Merge branch 'main' into refactor/openid-strategy

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.env.example

@@ -20,8 +20,8 @@ DOMAIN_CLIENT=http://localhost:3080
 DOMAIN_SERVER=http://localhost:3080
 
 NO_INDEX=true
-# Use the address that is at most n number of hops away from the Express application. 
-# req.socket.remoteAddress is the first hop, and the rest are looked for in the X-Forwarded-For header from right to left. 
+# Use the address that is at most n number of hops away from the Express application.
+# req.socket.remoteAddress is the first hop, and the rest are looked for in the X-Forwarded-For header from right to left.
 # A value of 0 means that the first untrusted address would be req.socket.remoteAddress, i.e. there is no reverse proxy.
 # Defaulted to 1.
 TRUST_PROXY=1
@@ -142,12 +142,12 @@ GOOGLE_KEY=user_provided
 # GOOGLE_AUTH_HEADER=true
 
 # Gemini API (AI Studio)
-# GOOGLE_MODELS=gemini-2.5-pro-exp-03-25,gemini-2.0-flash-exp,gemini-2.0-flash-thinking-exp-1219,gemini-exp-1121,gemini-exp-1114,gemini-1.5-flash-latest,gemini-1.0-pro,gemini-1.0-pro-001,gemini-1.0-pro-latest,gemini-1.0-pro-vision-latest,gemini-1.5-pro-latest,gemini-pro,gemini-pro-vision
+# GOOGLE_MODELS=gemini-2.5-pro-preview-05-06,gemini-2.5-flash-preview-04-17,gemini-2.0-flash-001,gemini-2.0-flash-exp,gemini-2.0-flash-lite-001,gemini-1.5-pro-002,gemini-1.5-flash-002
 
 # Vertex AI
-# GOOGLE_MODELS=gemini-1.5-flash-preview-0514,gemini-1.5-pro-preview-0514,gemini-1.0-pro-vision-001,gemini-1.0-pro-002,gemini-1.0-pro-001,gemini-pro-vision,gemini-1.0-pro
+# GOOGLE_MODELS=gemini-2.5-pro-preview-05-06,gemini-2.5-flash-preview-04-17,gemini-2.0-flash-001,gemini-2.0-flash-exp,gemini-2.0-flash-lite-001,gemini-1.5-pro-002,gemini-1.5-flash-002
 
-# GOOGLE_TITLE_MODEL=gemini-pro
+# GOOGLE_TITLE_MODEL=gemini-2.0-flash-lite-001
 
 # GOOGLE_LOC=us-central1
 
@@ -428,9 +428,12 @@ OPENID_CLIENT_ID=
 OPENID_CLIENT_SECRET=
 OPENID_ISSUER=
 OPENID_SESSION_SECRET=
+# OPENID_USE_PKCE=
 OPENID_SCOPE="openid profile email"
 OPENID_CALLBACK_URL=/oauth/openid/callback
 OPENID_REQUIRED_ROLE=
+# Set to 'userinfo' or 'token' to determine witch role source to use, Default is 'token'
+OPENID_REQUIRED_ROLE_SOURCE=
 OPENID_REQUIRED_ROLE_TOKEN_KIND=
 OPENID_REQUIRED_ROLE_PARAMETER_PATH=
 # Set to determine which user info property returned from OpenID Provider to store as the User's username

.github/workflows/generate-release-changelog-pr.yml

@@ -4,6 +4,7 @@ on:
   push:
     tags:
       - 'v*.*.*'
+  workflow_dispatch:
 
 jobs:
   generate-release-changelog-pr:
@@ -88,7 +89,7 @@ jobs:
           base: main
           branch: "changelog/${{ github.ref_name }}"
           reviewers: danny-avila
-          title: "chore: update CHANGELOG for release ${{ github.ref_name }}"
+          title: "📜 docs: Changelog for release ${{ github.ref_name }}"
           body: |
             **Description**:
-            - This PR updates the CHANGELOG.md by removing the "Unreleased" section and adding new release notes for release ${{ github.ref_name }} above previous releases.
+            - This PR updates the CHANGELOG.md by removing the "Unreleased" section and adding new release notes for release ${{ github.ref_name }} above previous releases.

.github/workflows/generate-unreleased-changelog-pr.yml

@@ -3,6 +3,7 @@ name: Generate Unreleased Changelog PR
 on:
   schedule:
     - cron: "0 0 * * 1"  # Runs every Monday at 00:00 UTC
+  workflow_dispatch:
 
 jobs:
   generate-unreleased-changelog-pr:
@@ -98,9 +99,9 @@ jobs:
           branch: "changelog/unreleased-update"
           sign-commits: true
           commit-message: "action: update Unreleased changelog"
-          title: "action: update Unreleased changelog"
+          title: "📜 docs: Unreleased Changelog"
           body: |
             **Description**:
             - This PR updates the Unreleased section in CHANGELOG.md.
             - It compares the current main branch with the latest version tag (determined as ${{ steps.get_latest_tag.outputs.tag }}),
-              regenerates the Unreleased changelog, removes any old Unreleased block, and inserts the new content.
+              regenerates the Unreleased changelog, removes any old Unreleased block, and inserts the new content.

.github/workflows/i18n-unused-keys.yml

@@ -39,12 +39,35 @@ jobs:
           # Check if each key is used in the source code
           for KEY in $KEYS; do
             FOUND=false
-            for DIR in "${SOURCE_DIRS[@]}"; do
-              if grep -r --include=\*.{js,jsx,ts,tsx} -q "$KEY" "$DIR"; then
-                FOUND=true
-                break
+            
+            # Special case for dynamically constructed special variable keys
+            if [[ "$KEY" == com_ui_special_var_* ]]; then
+              # Check if TSpecialVarLabel is used in the codebase
+              for DIR in "${SOURCE_DIRS[@]}"; do
+                if grep -r --include=\*.{js,jsx,ts,tsx} -q "TSpecialVarLabel" "$DIR"; then
+                  FOUND=true
+                  break
+                fi
+              done
+              
+              # Also check if the key is directly used somewhere
+              if [[ "$FOUND" == false ]]; then
+                for DIR in "${SOURCE_DIRS[@]}"; do
+                  if grep -r --include=\*.{js,jsx,ts,tsx} -q "$KEY" "$DIR"; then
+                    FOUND=true
+                    break
+                  fi
+                done
               fi
-            done
+            else
+              # Regular check for other keys
+              for DIR in "${SOURCE_DIRS[@]}"; do
+                if grep -r --include=\*.{js,jsx,ts,tsx} -q "$KEY" "$DIR"; then
+                  FOUND=true
+                  break
+                fi
+              done
+            fi
           
             if [[ "$FOUND" == false ]]; then
               UNUSED_KEYS+=("$KEY")
@@ -90,4 +113,4 @@ jobs:
 
       - name: Fail workflow if unused keys found
         if: env.unused_keys != '[]'
-        run: exit 1
+        run: exit 1

CHANGELOG.md

@@ -2,15 +2,212 @@
 
 All notable changes to this project will be documented in this file.
 
+
+
+
 ## [Unreleased]
 
 ### ✨ New Features
 
-- 🪄 feat: Agent Artifacts by **@danny-avila** in [#5804](https://github.com/danny-avila/LibreChat/pull/5804)
+- ✨ feat: implement search parameter updates by **@mawburn** in [#7151](https://github.com/danny-avila/LibreChat/pull/7151)
+- 🎏 feat: Add MCP support for Streamable HTTP Transport by **@benverhees** in [#7353](https://github.com/danny-avila/LibreChat/pull/7353)
+
+### 🔧 Fixes
+
+- 💬 fix: update aria-label for accessibility in ConvoLink component by **@berry-13** in [#7320](https://github.com/danny-avila/LibreChat/pull/7320)
+- 🔑 fix: use `apiKey` instead of `openAIApiKey` in OpenAI-like Config by **@danny-avila** in [#7337](https://github.com/danny-avila/LibreChat/pull/7337)
+- 🔄 fix: update navigation logic in `useFocusChatEffect` to ensure correct search parameters are used by **@mawburn** in [#7340](https://github.com/danny-avila/LibreChat/pull/7340)
 
 ### ⚙️ Other Changes
 
-- 🔄 chore: Enforce 18next Language Keys by **@rubentalstra** in [#5803](https://github.com/danny-avila/LibreChat/pull/5803)
-- 🔃 refactor: Parent Message ID Handling on Error, Update Translations, Bump Agents by **@danny-avila** in [#5833](https://github.com/danny-avila/LibreChat/pull/5833)
+- 📜 docs: CHANGELOG for release v0.7.8 by **@github-actions[bot]** in [#7290](https://github.com/danny-avila/LibreChat/pull/7290)
+- 📦 chore: Update API Package Dependencies by **@danny-avila** in [#7359](https://github.com/danny-avila/LibreChat/pull/7359)
+
+
+
+---
+## [v0.7.8] - 
+
+Changes from v0.7.8-rc1 to v0.7.8.
+
+### ✨ New Features
+
+- ✨ feat: Enhance form submission for touch screens by **@berry-13** in [#7198](https://github.com/danny-avila/LibreChat/pull/7198)
+- 🔍 feat: Additional Tavily API Tool Parameters by **@glowforge-opensource** in [#7232](https://github.com/danny-avila/LibreChat/pull/7232)
+- 🐋 feat: Add python to Dockerfile for increased MCP compatibility by **@technicalpickles** in [#7270](https://github.com/danny-avila/LibreChat/pull/7270)
+
+### 🔧 Fixes
+
+- 🔧 fix: Google Gemma Support & OpenAI Reasoning Instructions by **@danny-avila** in [#7196](https://github.com/danny-avila/LibreChat/pull/7196)
+- 🛠️ fix: Conversation Navigation State by **@danny-avila** in [#7210](https://github.com/danny-avila/LibreChat/pull/7210)
+- 🔄 fix: o-Series Model Regex for System Messages by **@danny-avila** in [#7245](https://github.com/danny-avila/LibreChat/pull/7245)
+- 🔖 fix: Custom Headers for Initial MCP SSE Connection by **@danny-avila** in [#7246](https://github.com/danny-avila/LibreChat/pull/7246)
+- 🛡️ fix: Deep Clone `MCPOptions` for User MCP Connections by **@danny-avila** in [#7247](https://github.com/danny-avila/LibreChat/pull/7247)
+- 🔄 fix: URL Param Race Condition and File Draft Persistence by **@danny-avila** in [#7257](https://github.com/danny-avila/LibreChat/pull/7257)
+- 🔄 fix: Assistants Endpoint & Minor Issues by **@danny-avila** in [#7274](https://github.com/danny-avila/LibreChat/pull/7274)
+- 🔄 fix: Ollama Think Tag Edge Case with Tools by **@danny-avila** in [#7275](https://github.com/danny-avila/LibreChat/pull/7275)
+
+### ⚙️ Other Changes
+
+- 📜 docs: CHANGELOG for release v0.7.8-rc1 by **@github-actions[bot]** in [#7153](https://github.com/danny-avila/LibreChat/pull/7153)
+- 🔄 refactor: Artifact Visibility Management by **@danny-avila** in [#7181](https://github.com/danny-avila/LibreChat/pull/7181)
+- 📦 chore: Bump Package Security by **@danny-avila** in [#7183](https://github.com/danny-avila/LibreChat/pull/7183)
+- 🌿 refactor: Unmount Fork Popover on Hide for Better Performance by **@danny-avila** in [#7189](https://github.com/danny-avila/LibreChat/pull/7189)
+- 🧰 chore: ESLint configuration to enforce Prettier formatting rules by **@mawburn** in [#7186](https://github.com/danny-avila/LibreChat/pull/7186)
+- 🎨 style: Improve KaTeX Rendering for LaTeX Equations by **@andresgit** in [#7223](https://github.com/danny-avila/LibreChat/pull/7223)
+- 📝 docs: Update `.env.example` Google models by **@marlonka** in [#7254](https://github.com/danny-avila/LibreChat/pull/7254)
+- 💬 refactor: MCP Chat Visibility Option, Google Rates, Remove OpenAPI Plugins by **@danny-avila** in [#7286](https://github.com/danny-avila/LibreChat/pull/7286)
+- 📜 docs: Unreleased Changelog by **@github-actions[bot]** in [#7214](https://github.com/danny-avila/LibreChat/pull/7214)
+
+
+
+[See full release details][release-v0.7.8]
+
+[release-v0.7.8]: https://github.com/danny-avila/LibreChat/releases/tag/v0.7.8
+
+---
+## [v0.7.8-rc1] - 
+## [v0.7.8-rc1] - 
+
+Changes from v0.7.7 to v0.7.8-rc1.
+
+### ✨ New Features
+
+- 🔍 feat: Mistral OCR API / Upload Files as Text by **@danny-avila** in [#6274](https://github.com/danny-avila/LibreChat/pull/6274)
+- 🤖 feat: Support OpenAI Web Search models by **@danny-avila** in [#6313](https://github.com/danny-avila/LibreChat/pull/6313)
+- 🔗 feat: Agent Chain (Mixture-of-Agents) by **@danny-avila** in [#6374](https://github.com/danny-avila/LibreChat/pull/6374)
+- ⌛ feat: `initTimeout` for Slow Starting MCP Servers by **@perweij** in [#6383](https://github.com/danny-avila/LibreChat/pull/6383)
+- 🚀 feat: `S3` Integration for File handling and Image uploads by **@rubentalstra** in [#6142](https://github.com/danny-avila/LibreChat/pull/6142)
+- 🔒feat: Enable OpenID Auto-Redirect by **@leondape** in [#6066](https://github.com/danny-avila/LibreChat/pull/6066)
+- 🚀 feat: Integrate `Azure Blob Storage` for file handling and image uploads by **@rubentalstra** in [#6153](https://github.com/danny-avila/LibreChat/pull/6153)
+- 🚀 feat: Add support for custom `AWS` endpoint in `S3` by **@rubentalstra** in [#6431](https://github.com/danny-avila/LibreChat/pull/6431)
+- 🚀 feat: Add support for LDAP STARTTLS in LDAP authentication by **@rubentalstra** in [#6438](https://github.com/danny-avila/LibreChat/pull/6438)
+- 🚀 feat: Refactor schema exports and update package version to 0.0.4 by **@rubentalstra** in [#6455](https://github.com/danny-avila/LibreChat/pull/6455)
+- 🔼 feat: Add Auto Submit For URL Query Params by **@mjaverto** in [#6440](https://github.com/danny-avila/LibreChat/pull/6440)
+- 🛠 feat: Enhance Redis Integration, Rate Limiters & Log Headers by **@danny-avila** in [#6462](https://github.com/danny-avila/LibreChat/pull/6462)
+- 💵 feat: Add Automatic Balance Refill by **@rubentalstra** in [#6452](https://github.com/danny-avila/LibreChat/pull/6452)
+- 🗣️ feat: add support for gpt-4o-transcribe models by **@berry-13** in [#6483](https://github.com/danny-avila/LibreChat/pull/6483)
+- 🎨 feat: UI Refresh for Enhanced UX by **@berry-13** in [#6346](https://github.com/danny-avila/LibreChat/pull/6346)
+- 🌍 feat: Add support for Hungarian language localization by **@rubentalstra** in [#6508](https://github.com/danny-avila/LibreChat/pull/6508)
+- 🚀 feat: Add Gemini 2.5 Token/Context Values, Increase Max Possible Output to 64k by **@danny-avila** in [#6563](https://github.com/danny-avila/LibreChat/pull/6563)
+- 🚀 feat: Enhance MCP Connections For Multi-User Support by **@danny-avila** in [#6610](https://github.com/danny-avila/LibreChat/pull/6610)
+- 🚀 feat: Enhance S3 URL Expiry with Refresh; fix: S3 File Deletion by **@danny-avila** in [#6647](https://github.com/danny-avila/LibreChat/pull/6647)
+- 🚀 feat: enhance UI components and refactor settings by **@berry-13** in [#6625](https://github.com/danny-avila/LibreChat/pull/6625)
+- 💬 feat: move TemporaryChat to the Header by **@berry-13** in [#6646](https://github.com/danny-avila/LibreChat/pull/6646)
+- 🚀 feat: Use Model Specs + Specific Endpoints, Limit Providers for Agents by **@danny-avila** in [#6650](https://github.com/danny-avila/LibreChat/pull/6650)
+- 🪙 feat: Sync Balance Config on Login by **@danny-avila** in [#6671](https://github.com/danny-avila/LibreChat/pull/6671)
+- 🔦 feat: MCP Support for Non-Agent Endpoints by **@danny-avila** in [#6775](https://github.com/danny-avila/LibreChat/pull/6775)
+- 🗃️ feat: Code Interpreter File Persistence between Sessions by **@danny-avila** in [#6790](https://github.com/danny-avila/LibreChat/pull/6790)
+- 🖥️ feat: Code Interpreter API for Non-Agent Endpoints by **@danny-avila** in [#6803](https://github.com/danny-avila/LibreChat/pull/6803)
+- ⚡ feat: Self-hosted Artifacts Static Bundler URL by **@danny-avila** in [#6827](https://github.com/danny-avila/LibreChat/pull/6827)
+- 🐳 feat: Add Jemalloc and UV to Docker Builds by **@danny-avila** in [#6836](https://github.com/danny-avila/LibreChat/pull/6836)
+- 🤖 feat: GPT-4.1 by **@danny-avila** in [#6880](https://github.com/danny-avila/LibreChat/pull/6880)
+- 👋 feat: remove Edge TTS by **@berry-13** in [#6885](https://github.com/danny-avila/LibreChat/pull/6885)
+- feat: nav optimization  by **@berry-13** in [#5785](https://github.com/danny-avila/LibreChat/pull/5785)
+- 🗺️ feat: Add Parameter Location Mapping for OpenAPI actions by **@peeeteeer** in [#6858](https://github.com/danny-avila/LibreChat/pull/6858)
+- 🤖 feat: Support `o4-mini` and `o3` Models by **@danny-avila** in [#6928](https://github.com/danny-avila/LibreChat/pull/6928)
+- 🎨 feat: OpenAI Image Tools (GPT-Image-1) by **@danny-avila** in [#7079](https://github.com/danny-avila/LibreChat/pull/7079)
+- 🗓️ feat: Add Special Variables for Prompts & Agents, Prompt UI Improvements by **@danny-avila** in [#7123](https://github.com/danny-avila/LibreChat/pull/7123)
+
+### 🌍 Internationalization
+
+- 🌍 i18n: Add Thai Language Support and Update Translations by **@rubentalstra** in [#6219](https://github.com/danny-avila/LibreChat/pull/6219)
+- 🌍 i18n: Update translation.json with latest translations by **@github-actions[bot]** in [#6220](https://github.com/danny-avila/LibreChat/pull/6220)
+- 🌍 i18n: Update translation.json with latest translations by **@github-actions[bot]** in [#6240](https://github.com/danny-avila/LibreChat/pull/6240)
+- 🌍 i18n: Update translation.json with latest translations by **@github-actions[bot]** in [#6241](https://github.com/danny-avila/LibreChat/pull/6241)
+- 🌍 i18n: Update translation.json with latest translations by **@github-actions[bot]** in [#6277](https://github.com/danny-avila/LibreChat/pull/6277)
+- 🌍 i18n: Update translation.json with latest translations by **@github-actions[bot]** in [#6414](https://github.com/danny-avila/LibreChat/pull/6414)
+- 🌍 i18n: Update translation.json with latest translations by **@github-actions[bot]** in [#6505](https://github.com/danny-avila/LibreChat/pull/6505)
+- 🌍 i18n: Update translation.json with latest translations by **@github-actions[bot]** in [#6530](https://github.com/danny-avila/LibreChat/pull/6530)
+- 🌍 i18n: Add Persian Localization Support by **@rubentalstra** in [#6669](https://github.com/danny-avila/LibreChat/pull/6669)
+- 🌍 i18n: Update translation.json with latest translations by **@github-actions[bot]** in [#6667](https://github.com/danny-avila/LibreChat/pull/6667)
+- 🌍 i18n: Update translation.json with latest translations by **@github-actions[bot]** in [#7126](https://github.com/danny-avila/LibreChat/pull/7126)
+- 🌍 i18n: Update translation.json with latest translations by **@github-actions[bot]** in [#7148](https://github.com/danny-avila/LibreChat/pull/7148)
+
+### 👐 Accessibility
+
+- 🎨 a11y: Update Model Spec Description Text by **@berry-13** in [#6294](https://github.com/danny-avila/LibreChat/pull/6294)
+- 🗑️ a11y: Add Accessible Name to Button for File Attachment Removal by **@kangabell** in [#6709](https://github.com/danny-avila/LibreChat/pull/6709)
+- ⌨️ a11y: enhance accessibility & visual consistency by **@berry-13** in [#6866](https://github.com/danny-avila/LibreChat/pull/6866)
+- 🙌 a11y: Searchbar/Conversations List Focus by **@danny-avila** in [#7096](https://github.com/danny-avila/LibreChat/pull/7096)
+- 👐 a11y: Improve Fork and SplitText Accessibility by **@danny-avila** in [#7147](https://github.com/danny-avila/LibreChat/pull/7147)
+
+### 🔧 Fixes
+
+- 🐛 fix: Avatar Type Definitions in Agent/Assistant Schemas by **@danny-avila** in [#6235](https://github.com/danny-avila/LibreChat/pull/6235)
+- 🔧 fix: MeiliSearch Field Error and Patch Incorrect Import by #6210 by **@rubentalstra** in [#6245](https://github.com/danny-avila/LibreChat/pull/6245)
+- 🔏 fix: Enhance Two-Factor Authentication by **@rubentalstra** in [#6247](https://github.com/danny-avila/LibreChat/pull/6247)
+- 🐛 fix: Await saveMessage in abortMiddleware to ensure proper execution by **@sh4shii** in [#6248](https://github.com/danny-avila/LibreChat/pull/6248)
+- 🔧 fix: Axios Proxy Usage And Bump `mongoose` by **@danny-avila** in [#6298](https://github.com/danny-avila/LibreChat/pull/6298)
+- 🔧 fix: comment out MCP servers to resolve service run issues by **@KunalScriptz** in [#6316](https://github.com/danny-avila/LibreChat/pull/6316)
+- 🔧 fix: Update Token Calculations and Mapping, MCP `env` Initialization by **@danny-avila** in [#6406](https://github.com/danny-avila/LibreChat/pull/6406)
+- 🐞 fix: Agent "Resend" Message Attachments + Source Icon Styling by **@danny-avila** in [#6408](https://github.com/danny-avila/LibreChat/pull/6408)
+- 🐛 fix: Prevent Crash on Duplicate Message ID by **@Odrec** in [#6392](https://github.com/danny-avila/LibreChat/pull/6392)
+- 🔐 fix: Invalid Key Length in 2FA Encryption by **@rubentalstra** in [#6432](https://github.com/danny-avila/LibreChat/pull/6432)
+- 🏗️ fix: Fix Agents Token Spend Race Conditions, Expand Test Coverage by **@danny-avila** in [#6480](https://github.com/danny-avila/LibreChat/pull/6480)
+- 🔃 fix: Draft Clearing, Claude Titles, Remove Default Vision Max Tokens by **@danny-avila** in [#6501](https://github.com/danny-avila/LibreChat/pull/6501)
+- 🔧 fix: Update username reference to use user.name in greeting display by **@rubentalstra** in [#6534](https://github.com/danny-avila/LibreChat/pull/6534)
+- 🔧 fix: S3 Download Stream with Key Extraction and Blob Storage Encoding for Vision by **@danny-avila** in [#6557](https://github.com/danny-avila/LibreChat/pull/6557)
+- 🔧 fix: Mistral type strictness for `usage` & update token values/windows by **@danny-avila** in [#6562](https://github.com/danny-avila/LibreChat/pull/6562)
+- 🔧 fix: Consolidate Text Parsing and TTS Edge Initialization by **@danny-avila** in [#6582](https://github.com/danny-avila/LibreChat/pull/6582)
+- 🔧 fix: Ensure continuation in image processing on base64 encoding from Blob Storage by **@danny-avila** in [#6619](https://github.com/danny-avila/LibreChat/pull/6619)
+- ✉️ fix: Fallback For User Name In Email Templates by **@danny-avila** in [#6620](https://github.com/danny-avila/LibreChat/pull/6620)
+- 🔧 fix: Azure Blob Integration and File Source References by **@rubentalstra** in [#6575](https://github.com/danny-avila/LibreChat/pull/6575)
+- 🐛 fix: Safeguard against undefined addedEndpoints by **@wipash** in [#6654](https://github.com/danny-avila/LibreChat/pull/6654)
+- 🤖 fix: Gemini 2.5 Vision Support by **@danny-avila** in [#6663](https://github.com/danny-avila/LibreChat/pull/6663)
+- 🔄 fix: Avatar & Error Handling Enhancements by **@danny-avila** in [#6687](https://github.com/danny-avila/LibreChat/pull/6687)
+- 🔧 fix: Chat Middleware, Zod Conversion, Auto-Save and S3 URL Refresh by **@danny-avila** in [#6720](https://github.com/danny-avila/LibreChat/pull/6720)
+- 🔧 fix: Agent Capability Checks & DocumentDB Compatibility for Agent Resource Removal by **@danny-avila** in [#6726](https://github.com/danny-avila/LibreChat/pull/6726)
+- 🔄 fix: Improve audio MIME type detection and handling by **@berry-13** in [#6707](https://github.com/danny-avila/LibreChat/pull/6707)
+- 🪺 fix: Update Role Handling due to New Schema Shape by **@danny-avila** in [#6774](https://github.com/danny-avila/LibreChat/pull/6774)
+- 🗨️ fix: Show ModelSpec Greeting by **@berry-13** in [#6770](https://github.com/danny-avila/LibreChat/pull/6770)
+- 🔧 fix: Keyv and Proxy Issues, and More Memory Optimizations by **@danny-avila** in [#6867](https://github.com/danny-avila/LibreChat/pull/6867)
+- ✨ fix: Implement dynamic text sizing for greeting and name display by **@berry-13** in [#6833](https://github.com/danny-avila/LibreChat/pull/6833)
+- 📝 fix: Mistral OCR Image Support and Azure Agent Titles by **@danny-avila** in [#6901](https://github.com/danny-avila/LibreChat/pull/6901)
+- 📢 fix: Invalid `engineTTS` and Conversation State on Navigation by **@berry-13** in [#6904](https://github.com/danny-avila/LibreChat/pull/6904)
+- 🛠️ fix: Improve Accessibility and Display of Conversation Menu by **@danny-avila** in [#6913](https://github.com/danny-avila/LibreChat/pull/6913)
+- 🔧 fix: Agent Resource Form, Convo Menu Style, Ensure Draft Clears on Submission by **@danny-avila** in [#6925](https://github.com/danny-avila/LibreChat/pull/6925)
+- 🔀 fix: MCP Improvements, Auto-Save Drafts, Artifact Markup by **@danny-avila** in [#7040](https://github.com/danny-avila/LibreChat/pull/7040)
+- 🐋 fix: Improve Deepseek Compatbility by **@danny-avila** in [#7132](https://github.com/danny-avila/LibreChat/pull/7132)
+- 🐙 fix: Add Redis Ping Interval to Prevent Connection Drops by **@peeeteeer** in [#7127](https://github.com/danny-avila/LibreChat/pull/7127)
+
+### ⚙️ Other Changes
+
+- 📦 refactor: Move DB Models to `@librechat/data-schemas` by **@rubentalstra** in [#6210](https://github.com/danny-avila/LibreChat/pull/6210)
+- 📦 chore: Patch `axios` to address CVE-2025-27152 by **@danny-avila** in [#6222](https://github.com/danny-avila/LibreChat/pull/6222)
+- ⚠️ refactor: Use Error Content Part Instead Of Throwing Error for Agents by **@danny-avila** in [#6262](https://github.com/danny-avila/LibreChat/pull/6262)
+- 🏃‍♂️ refactor: Improve Agent Run Context & Misc. Changes by **@danny-avila** in [#6448](https://github.com/danny-avila/LibreChat/pull/6448)
+- 📝 docs: librechat.example.yaml by **@ineiti** in [#6442](https://github.com/danny-avila/LibreChat/pull/6442)
+- 🏃‍♂️ refactor: More Agent Context Improvements during Run by **@danny-avila** in [#6477](https://github.com/danny-avila/LibreChat/pull/6477)
+- 🔃 refactor: Allow streaming for `o1` models by **@danny-avila** in [#6509](https://github.com/danny-avila/LibreChat/pull/6509)
+- 🔧 chore: `Vite` Plugin Upgrades & Config Optimizations by **@rubentalstra** in [#6547](https://github.com/danny-avila/LibreChat/pull/6547)
+- 🔧 refactor: Consolidate Logging, Model Selection & Actions Optimizations, Minor Fixes by **@danny-avila** in [#6553](https://github.com/danny-avila/LibreChat/pull/6553)
+- 🎨 style: Address Minor UI Refresh Issues by **@berry-13** in [#6552](https://github.com/danny-avila/LibreChat/pull/6552)
+- 🔧 refactor: Enhance Model & Endpoint Configurations with Global Indicators 🌍 by **@berry-13** in [#6578](https://github.com/danny-avila/LibreChat/pull/6578)
+- 💬 style: Chat UI, Greeting, and Message adjustments by **@berry-13** in [#6612](https://github.com/danny-avila/LibreChat/pull/6612)
+- ⚡ refactor: DocumentDB Compatibility for Balance Updates by **@danny-avila** in [#6673](https://github.com/danny-avila/LibreChat/pull/6673)
+- 🧹 chore: Update ESLint rules for React hooks by **@rubentalstra** in [#6685](https://github.com/danny-avila/LibreChat/pull/6685)
+- 🪙 chore: Update Gemini Pricing by **@RedwindA** in [#6731](https://github.com/danny-avila/LibreChat/pull/6731)
+- 🪺 refactor: Nest Permission fields for Roles by **@rubentalstra** in [#6487](https://github.com/danny-avila/LibreChat/pull/6487)
+- 📦 chore: Update `caniuse-lite` dependency to version 1.0.30001706 by **@rubentalstra** in [#6482](https://github.com/danny-avila/LibreChat/pull/6482)
+- ⚙️ refactor: OAuth Flow Signal, Type Safety, Tool Progress & Updated Packages by **@danny-avila** in [#6752](https://github.com/danny-avila/LibreChat/pull/6752)
+- 📦 chore: bump vite from 6.2.3 to 6.2.5 by **@dependabot[bot]** in [#6745](https://github.com/danny-avila/LibreChat/pull/6745)
+- 💾 chore: Enhance Local Storage Handling and Update MCP SDK by **@danny-avila** in [#6809](https://github.com/danny-avila/LibreChat/pull/6809)
+- 🤖 refactor: Improve Agents Memory Usage, Bump Keyv, Grok 3 by **@danny-avila** in [#6850](https://github.com/danny-avila/LibreChat/pull/6850)
+- 💾 refactor: Enhance Memory In Image Encodings & Client Disposal by **@danny-avila** in [#6852](https://github.com/danny-avila/LibreChat/pull/6852)
+- 🔁 refactor: Token Event Handler and Standardize `maxTokens` Key by **@danny-avila** in [#6886](https://github.com/danny-avila/LibreChat/pull/6886)
+- 🔍 refactor: Search & Message Retrieval by **@berry-13** in [#6903](https://github.com/danny-avila/LibreChat/pull/6903)
+- 🎨 style: standardize dropdown styling & fix z-Index layering by **@berry-13** in [#6939](https://github.com/danny-avila/LibreChat/pull/6939)
+- 📙 docs: CONTRIBUTING.md by **@dblock** in [#6831](https://github.com/danny-avila/LibreChat/pull/6831)
+- 🧭 refactor: Modernize Nav/Header by **@danny-avila** in [#7094](https://github.com/danny-avila/LibreChat/pull/7094)
+- 🪶 refactor: Chat Input Focus for Conversation Navigations & ChatForm Optimizations by **@danny-avila** in [#7100](https://github.com/danny-avila/LibreChat/pull/7100)
+- 🔃 refactor: Streamline Navigation, Message Loading UX by **@danny-avila** in [#7118](https://github.com/danny-avila/LibreChat/pull/7118)
+- 📜 docs: Unreleased changelog by **@github-actions[bot]** in [#6265](https://github.com/danny-avila/LibreChat/pull/6265)
+
+
+
+[See full release details][release-v0.7.8-rc1]
+
+[release-v0.7.8-rc1]: https://github.com/danny-avila/LibreChat/releases/tag/v0.7.8-rc1
 
 ---

Dockerfile

@@ -1,10 +1,11 @@
-# v0.7.7
+# v0.7.8
 
 # Base node image
 FROM node:20-alpine AS node
 
 # Install jemalloc
 RUN apk add --no-cache jemalloc
+RUN apk add --no-cache python3 py3-pip uv
 
 # Set environment variable to use jemalloc
 ENV LD_PRELOAD=/usr/lib/libjemalloc.so.2

Dockerfile.multi

@@ -1,5 +1,5 @@
 # Dockerfile.multi
-# v0.7.7
+# v0.7.8
 
 # Base for all builds
 FROM node:20-alpine AS base-min

api/app/clients/AnthropicClient.js

@@ -396,13 +396,13 @@ class AnthropicClient extends BaseClient {
     const formattedMessages = orderedMessages.map((message, i) => {
       const formattedMessage = this.useMessages
         ? formatMessage({
-          message,
-          endpoint: EModelEndpoint.anthropic,
-        })
+            message,
+            endpoint: EModelEndpoint.anthropic,
+          })
         : {
-          author: message.isCreatedByUser ? this.userLabel : this.assistantLabel,
-          content: message?.content ?? message.text,
-        };
+            author: message.isCreatedByUser ? this.userLabel : this.assistantLabel,
+            content: message?.content ?? message.text,
+          };
 
       const needsTokenCount = this.contextStrategy && !orderedMessages[i].tokenCount;
       /* If tokens were never counted, or, is a Vision request and the message has files, count again */
@@ -680,7 +680,7 @@ class AnthropicClient extends BaseClient {
   }
 
   getCompletion() {
-    logger.debug('AnthropicClient doesn\'t use getCompletion (all handled in sendCompletion)');
+    logger.debug("AnthropicClient doesn't use getCompletion (all handled in sendCompletion)");
   }
 
   /**
@@ -888,7 +888,7 @@ class AnthropicClient extends BaseClient {
   }
 
   getBuildMessagesOptions() {
-    logger.debug('AnthropicClient doesn\'t use getBuildMessagesOptions');
+    logger.debug("AnthropicClient doesn't use getBuildMessagesOptions");
   }
 
   getEncoding() {

api/app/clients/BaseClient.js

@@ -63,15 +63,15 @@ class BaseClient {
   }
 
   setOptions() {
-    throw new Error('Method \'setOptions\' must be implemented.');
+    throw new Error("Method 'setOptions' must be implemented.");
   }
 
   async getCompletion() {
-    throw new Error('Method \'getCompletion\' must be implemented.');
+    throw new Error("Method 'getCompletion' must be implemented.");
   }
 
   async sendCompletion() {
-    throw new Error('Method \'sendCompletion\' must be implemented.');
+    throw new Error("Method 'sendCompletion' must be implemented.");
   }
 
   getSaveOptions() {
@@ -237,11 +237,11 @@ class BaseClient {
     const userMessage = opts.isEdited
       ? this.currentMessages[this.currentMessages.length - 2]
       : this.createUserMessage({
-        messageId: userMessageId,
-        parentMessageId,
-        conversationId,
-        text: message,
-      });
+          messageId: userMessageId,
+          parentMessageId,
+          conversationId,
+          text: message,
+        });
 
     if (typeof opts?.getReqData === 'function') {
       opts.getReqData({

api/app/clients/GoogleClient.js

@@ -140,8 +140,7 @@ class GoogleClient extends BaseClient {
     this.options.attachments?.then((attachments) => this.checkVisionRequest(attachments));
 
     /** @type {boolean} Whether using a "GenerativeAI" Model */
-    this.isGenerativeModel =
-      this.modelOptions.model.includes('gemini') || this.modelOptions.model.includes('learnlm');
+    this.isGenerativeModel = /gemini|learnlm|gemma/.test(this.modelOptions.model);
 
     this.maxContextTokens =
       this.options.maxContextTokens ??

api/app/clients/OpenAIClient.js

@@ -475,7 +475,9 @@ class OpenAIClient extends BaseClient {
       promptPrefix = this.augmentedPrompt + promptPrefix;
     }
 
-    if (promptPrefix && this.isOmni !== true) {
+    const noSystemModelRegex = /\b(o1-preview|o1-mini)\b/i.test(this.modelOptions.model);
+
+    if (promptPrefix && !noSystemModelRegex) {
       promptPrefix = `Instructions:\n${promptPrefix.trim()}`;
       instructions = {
         role: 'system',
@@ -503,7 +505,7 @@ class OpenAIClient extends BaseClient {
     };
 
     /** EXPERIMENTAL */
-    if (promptPrefix && this.isOmni === true) {
+    if (promptPrefix && noSystemModelRegex) {
       const lastUserMessageIndex = payload.findLastIndex((message) => message.role === 'user');
       if (lastUserMessageIndex !== -1) {
         if (Array.isArray(payload[lastUserMessageIndex].content)) {
@@ -1227,9 +1229,9 @@ ${convo}
 
         opts.baseURL = this.langchainProxy
           ? constructAzureURL({
-            baseURL: this.langchainProxy,
-            azureOptions: this.azure,
-          })
+              baseURL: this.langchainProxy,
+              azureOptions: this.azure,
+            })
           : this.azureEndpoint.split(/(?<!\/)\/(chat|completion)\//)[0];
 
         opts.defaultQuery = { 'api-version': this.azure.azureOpenAIApiVersion };
@@ -1283,6 +1285,14 @@ ${convo}
         modelOptions.messages[0].role = 'user';
       }
 
+      if (
+        (this.options.endpoint === EModelEndpoint.openAI ||
+          this.options.endpoint === EModelEndpoint.azureOpenAI) &&
+        modelOptions.stream === true
+      ) {
+        modelOptions.stream_options = { include_usage: true };
+      }
+
       if (this.options.addParams && typeof this.options.addParams === 'object') {
         const addParams = { ...this.options.addParams };
         modelOptions = {
@@ -1385,12 +1395,6 @@ ${convo}
           ...modelOptions,
           stream: true,
         };
-        if (
-          this.options.endpoint === EModelEndpoint.openAI ||
-          this.options.endpoint === EModelEndpoint.azureOpenAI
-        ) {
-          params.stream_options = { include_usage: true };
-        }
         const stream = await openai.beta.chat.completions
           .stream(params)
           .on('abort', () => {

api/app/clients/tools/structured/TavilySearchResults.js

@@ -43,9 +43,39 @@ class TavilySearchResults extends Tool {
         .boolean()
         .optional()
         .describe('Whether to include answers in the search results. Default is False.'),
-      // include_raw_content: z.boolean().optional().describe('Whether to include raw content in the search results. Default is False.'),
-      // include_domains: z.array(z.string()).optional().describe('A list of domains to specifically include in the search results.'),
-      // exclude_domains: z.array(z.string()).optional().describe('A list of domains to specifically exclude from the search results.'),
+      include_raw_content: z
+        .boolean()
+        .optional()
+        .describe('Whether to include raw content in the search results. Default is False.'),
+      include_domains: z
+        .array(z.string())
+        .optional()
+        .describe('A list of domains to specifically include in the search results.'),
+      exclude_domains: z
+        .array(z.string())
+        .optional()
+        .describe('A list of domains to specifically exclude from the search results.'),
+      topic: z
+        .enum(['general', 'news', 'finance'])
+        .optional()
+        .describe(
+          'The category of the search. Use news ONLY if query SPECIFCALLY mentions the word "news".',
+        ),
+      time_range: z
+        .enum(['day', 'week', 'month', 'year', 'd', 'w', 'm', 'y'])
+        .optional()
+        .describe('The time range back from the current date to filter results.'),
+      days: z
+        .number()
+        .min(1)
+        .optional()
+        .describe('Number of days back from the current date to include. Only if topic is news.'),
+      include_image_descriptions: z
+        .boolean()
+        .optional()
+        .describe(
+          'When include_images is true, also add a descriptive text for each image. Default is false.',
+        ),
     });
   }
 

api/app/clients/tools/util/addOpenAPISpecs.js

@@ -1,30 +0,0 @@
-const { loadSpecs } = require('./loadSpecs');
-
-function transformSpec(input) {
-  return {
-    name: input.name_for_human,
-    pluginKey: input.name_for_model,
-    description: input.description_for_human,
-    icon: input?.logo_url ?? 'https://placehold.co/70x70.png',
-    // TODO: add support for authentication
-    isAuthRequired: 'false',
-    authConfig: [],
-  };
-}
-
-async function addOpenAPISpecs(availableTools) {
-  try {
-    const specs = (await loadSpecs({})).map(transformSpec);
-    if (specs.length > 0) {
-      return [...specs, ...availableTools];
-    }
-    return availableTools;
-  } catch (error) {
-    return availableTools;
-  }
-}
-
-module.exports = {
-  transformSpec,
-  addOpenAPISpecs,
-};

api/app/clients/tools/util/addOpenAPISpecs.spec.js

@@ -1,76 +0,0 @@
-const { addOpenAPISpecs, transformSpec } = require('./addOpenAPISpecs');
-const { loadSpecs } = require('./loadSpecs');
-const { createOpenAPIPlugin } = require('../dynamic/OpenAPIPlugin');
-
-jest.mock('./loadSpecs');
-jest.mock('../dynamic/OpenAPIPlugin');
-
-describe('transformSpec', () => {
-  it('should transform input spec to a desired format', () => {
-    const input = {
-      name_for_human: 'Human Name',
-      name_for_model: 'Model Name',
-      description_for_human: 'Human Description',
-      logo_url: 'https://example.com/logo.png',
-    };
-
-    const expectedOutput = {
-      name: 'Human Name',
-      pluginKey: 'Model Name',
-      description: 'Human Description',
-      icon: 'https://example.com/logo.png',
-      isAuthRequired: 'false',
-      authConfig: [],
-    };
-
-    expect(transformSpec(input)).toEqual(expectedOutput);
-  });
-
-  it('should use default icon if logo_url is not provided', () => {
-    const input = {
-      name_for_human: 'Human Name',
-      name_for_model: 'Model Name',
-      description_for_human: 'Human Description',
-    };
-
-    const expectedOutput = {
-      name: 'Human Name',
-      pluginKey: 'Model Name',
-      description: 'Human Description',
-      icon: 'https://placehold.co/70x70.png',
-      isAuthRequired: 'false',
-      authConfig: [],
-    };
-
-    expect(transformSpec(input)).toEqual(expectedOutput);
-  });
-});
-
-describe('addOpenAPISpecs', () => {
-  it('should add specs to available tools', async () => {
-    const availableTools = ['Tool1', 'Tool2'];
-    const specs = [
-      {
-        name_for_human: 'Human Name',
-        name_for_model: 'Model Name',
-        description_for_human: 'Human Description',
-        logo_url: 'https://example.com/logo.png',
-      },
-    ];
-
-    loadSpecs.mockResolvedValue(specs);
-    createOpenAPIPlugin.mockReturnValue('Plugin');
-
-    const result = await addOpenAPISpecs(availableTools);
-    expect(result).toEqual([...specs.map(transformSpec), ...availableTools]);
-  });
-
-  it('should return available tools if specs loading fails', async () => {
-    const availableTools = ['Tool1', 'Tool2'];
-
-    loadSpecs.mockRejectedValue(new Error('Failed to load specs'));
-
-    const result = await addOpenAPISpecs(availableTools);
-    expect(result).toEqual(availableTools);
-  });
-});

api/app/clients/tools/util/handleTools.js

@@ -24,7 +24,6 @@ const { primeFiles: primeCodeFiles } = require('~/server/services/Files/Code/pro
 const { createFileSearchTool, primeFiles: primeSearchFiles } = require('./fileSearch');
 const { loadAuthValues } = require('~/server/services/Tools/credentials');
 const { createMCPTool } = require('~/server/services/MCP');
-const { loadSpecs } = require('./loadSpecs');
 const { logger } = require('~/config');
 
 const mcpToolPattern = new RegExp(`^.+${Constants.mcp_delimiter}.+$`);
@@ -232,7 +231,6 @@ const loadTools = async ({
 
   /** @type {Record<string, string>} */
   const toolContextMap = {};
-  const remainingTools = [];
   const appTools = options.req?.app?.locals?.availableTools ?? {};
 
   for (const tool of tools) {
@@ -292,30 +290,6 @@ const loadTools = async ({
       requestedTools[tool] = toolInstance;
       continue;
     }
-
-    if (functions === true) {
-      remainingTools.push(tool);
-    }
-  }
-
-  let specs = null;
-  if (useSpecs === true && functions === true && remainingTools.length > 0) {
-    specs = await loadSpecs({
-      llm: model,
-      user,
-      message: options.message,
-      memory: options.memory,
-      signal: options.signal,
-      tools: remainingTools,
-      map: true,
-      verbose: false,
-    });
-  }
-
-  for (const tool of remainingTools) {
-    if (specs && specs[tool]) {
-      requestedTools[tool] = specs[tool];
-    }
   }
 
   if (returnMap) {

api/app/clients/tools/util/loadSpecs.js

@@ -1,117 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const { z } = require('zod');
-const { logger } = require('~/config');
-const { createOpenAPIPlugin } = require('~/app/clients/tools/dynamic/OpenAPIPlugin');
-
-// The minimum Manifest definition
-const ManifestDefinition = z.object({
-  schema_version: z.string().optional(),
-  name_for_human: z.string(),
-  name_for_model: z.string(),
-  description_for_human: z.string(),
-  description_for_model: z.string(),
-  auth: z.object({}).optional(),
-  api: z.object({
-    // Spec URL or can be the filename of the OpenAPI spec yaml file,
-    // located in api\app\clients\tools\.well-known\openapi
-    url: z.string(),
-    type: z.string().optional(),
-    is_user_authenticated: z.boolean().nullable().optional(),
-    has_user_authentication: z.boolean().nullable().optional(),
-  }),
-  // use to override any params that the LLM will consistently get wrong
-  params: z.object({}).optional(),
-  logo_url: z.string().optional(),
-  contact_email: z.string().optional(),
-  legal_info_url: z.string().optional(),
-});
-
-function validateJson(json) {
-  try {
-    return ManifestDefinition.parse(json);
-  } catch (error) {
-    logger.debug('[validateJson] manifest parsing error', error);
-    return false;
-  }
-}
-
-// omit the LLM to return the well known jsons as objects
-async function loadSpecs({ llm, user, message, tools = [], map = false, memory, signal }) {
-  const directoryPath = path.join(__dirname, '..', '.well-known');
-  let files = [];
-
-  for (let i = 0; i < tools.length; i++) {
-    const filePath = path.join(directoryPath, tools[i] + '.json');
-
-    try {
-      // If the access Promise is resolved, it means that the file exists
-      // Then we can add it to the files array
-      await fs.promises.access(filePath, fs.constants.F_OK);
-      files.push(tools[i] + '.json');
-    } catch (err) {
-      logger.error(`[loadSpecs] File ${tools[i] + '.json'} does not exist`, err);
-    }
-  }
-
-  if (files.length === 0) {
-    files = (await fs.promises.readdir(directoryPath)).filter(
-      (file) => path.extname(file) === '.json',
-    );
-  }
-
-  const validJsons = [];
-  const constructorMap = {};
-
-  logger.debug('[validateJson] files', files);
-
-  for (const file of files) {
-    if (path.extname(file) === '.json') {
-      const filePath = path.join(directoryPath, file);
-      const fileContent = await fs.promises.readFile(filePath, 'utf8');
-      const json = JSON.parse(fileContent);
-
-      if (!validateJson(json)) {
-        logger.debug('[validateJson] Invalid json', json);
-        continue;
-      }
-
-      if (llm && map) {
-        constructorMap[json.name_for_model] = async () =>
-          await createOpenAPIPlugin({
-            data: json,
-            llm,
-            message,
-            memory,
-            signal,
-            user,
-          });
-        continue;
-      }
-
-      if (llm) {
-        validJsons.push(createOpenAPIPlugin({ data: json, llm }));
-        continue;
-      }
-
-      validJsons.push(json);
-    }
-  }
-
-  if (map) {
-    return constructorMap;
-  }
-
-  const plugins = (await Promise.all(validJsons)).filter((plugin) => plugin);
-
-  //   logger.debug('[validateJson] plugins', plugins);
-  //   logger.debug(plugins[0].name);
-
-  return plugins;
-}
-
-module.exports = {
-  loadSpecs,
-  validateJson,
-  ManifestDefinition,
-};

api/app/clients/tools/util/loadSpecs.spec.js

@@ -1,101 +0,0 @@
-const fs = require('fs');
-const { validateJson, loadSpecs, ManifestDefinition } = require('./loadSpecs');
-const { createOpenAPIPlugin } = require('../dynamic/OpenAPIPlugin');
-
-jest.mock('../dynamic/OpenAPIPlugin');
-
-describe('ManifestDefinition', () => {
-  it('should validate correct json', () => {
-    const json = {
-      name_for_human: 'Test',
-      name_for_model: 'Test',
-      description_for_human: 'Test',
-      description_for_model: 'Test',
-      api: {
-        url: 'http://test.com',
-      },
-    };
-
-    expect(() => ManifestDefinition.parse(json)).not.toThrow();
-  });
-
-  it('should not validate incorrect json', () => {
-    const json = {
-      name_for_human: 'Test',
-      name_for_model: 'Test',
-      description_for_human: 'Test',
-      description_for_model: 'Test',
-      api: {
-        url: 123, // incorrect type
-      },
-    };
-
-    expect(() => ManifestDefinition.parse(json)).toThrow();
-  });
-});
-
-describe('validateJson', () => {
-  it('should return parsed json if valid', () => {
-    const json = {
-      name_for_human: 'Test',
-      name_for_model: 'Test',
-      description_for_human: 'Test',
-      description_for_model: 'Test',
-      api: {
-        url: 'http://test.com',
-      },
-    };
-
-    expect(validateJson(json)).toEqual(json);
-  });
-
-  it('should return false if json is not valid', () => {
-    const json = {
-      name_for_human: 'Test',
-      name_for_model: 'Test',
-      description_for_human: 'Test',
-      description_for_model: 'Test',
-      api: {
-        url: 123, // incorrect type
-      },
-    };
-
-    expect(validateJson(json)).toEqual(false);
-  });
-});
-
-describe('loadSpecs', () => {
-  beforeEach(() => {
-    jest.spyOn(fs.promises, 'readdir').mockResolvedValue(['test.json']);
-    jest.spyOn(fs.promises, 'readFile').mockResolvedValue(
-      JSON.stringify({
-        name_for_human: 'Test',
-        name_for_model: 'Test',
-        description_for_human: 'Test',
-        description_for_model: 'Test',
-        api: {
-          url: 'http://test.com',
-        },
-      }),
-    );
-    createOpenAPIPlugin.mockResolvedValue({});
-  });
-
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  it('should return plugins', async () => {
-    const plugins = await loadSpecs({ llm: true, verbose: false });
-
-    expect(plugins).toHaveLength(1);
-    expect(createOpenAPIPlugin).toHaveBeenCalledTimes(1);
-  });
-
-  it('should return constructorMap if map is true', async () => {
-    const plugins = await loadSpecs({ llm: {}, map: true, verbose: false });
-
-    expect(plugins).toHaveProperty('Test');
-    expect(createOpenAPIPlugin).not.toHaveBeenCalled();
-  });
-});

api/cache/keyvRedis.js

@@ -75,6 +75,12 @@ if (REDIS_URI && isEnabled(USE_REDIS)) {
   } else {
     keyvRedis = new KeyvRedis(REDIS_URI, keyvOpts);
   }
+
+  const pingInterval = setInterval(() => {
+    logger.debug('KeyvRedis ping');
+    keyvRedis.client.ping().catch(err => logger.error('Redis keep-alive ping failed:', err));
+  }, 5 * 60 * 1000);
+
   keyvRedis.on('ready', () => {
     logger.info('KeyvRedis connection ready');
   });
@@ -85,6 +91,7 @@ if (REDIS_URI && isEnabled(USE_REDIS)) {
     logger.info('KeyvRedis connection ended');
   });
   keyvRedis.on('close', () => {
+    clearInterval(pingInterval);
     logger.info('KeyvRedis connection closed');
   });
   keyvRedis.on('error', (err) => logger.error('KeyvRedis connection error:', err));

api/models/Agent.js

@@ -308,7 +308,7 @@ const getListAgents = async (searchParameter) => {
  * This function also updates the corresponding projects to include or exclude the agent ID.
  *
  * @param {Object} params - Parameters for updating the agent's projects.
- * @param {import('librechat-data-provider').TUser} params.user - Parameters for updating the agent's projects.
+ * @param {MongoUser} params.user - Parameters for updating the agent's projects.
  * @param {string} params.agentId - The ID of the agent to update.
  * @param {string[]} [params.projectIds] - Array of project IDs to add to the agent.
  * @param {string[]} [params.removeProjectIds] - Array of project IDs to remove from the agent.

api/models/tx.js

@@ -111,10 +111,15 @@ const tokenValues = Object.assign(
     /* cohere doesn't have rates for the older command models,
   so this was from https://artificialanalysis.ai/models/command-light/providers */
     command: { prompt: 0.38, completion: 0.38 },
+    gemma: { prompt: 0, completion: 0 }, // https://ai.google.dev/pricing
+    'gemma-2': { prompt: 0, completion: 0 }, // https://ai.google.dev/pricing
+    'gemma-3': { prompt: 0, completion: 0 }, // https://ai.google.dev/pricing
+    'gemma-3-27b': { prompt: 0, completion: 0 }, // https://ai.google.dev/pricing
     'gemini-2.0-flash-lite': { prompt: 0.075, completion: 0.3 },
     'gemini-2.0-flash': { prompt: 0.1, completion: 0.4 },
     'gemini-2.0': { prompt: 0, completion: 0 }, // https://ai.google.dev/pricing
-    'gemini-2.5-pro-preview-03-25': { prompt: 1.25, completion: 10 },
+    'gemini-2.5-pro': { prompt: 1.25, completion: 10 },
+    'gemini-2.5-flash': { prompt: 0.15, completion: 3.5 },
     'gemini-2.5': { prompt: 0, completion: 0 }, // Free for a period of time
     'gemini-1.5-flash-8b': { prompt: 0.075, completion: 0.3 },
     'gemini-1.5-flash': { prompt: 0.15, completion: 0.6 },

api/models/tx.spec.js

@@ -488,6 +488,9 @@ describe('getCacheMultiplier', () => {
 
 describe('Google Model Tests', () => {
   const googleModels = [
+    'gemini-2.5-pro-preview-05-06',
+    'gemini-2.5-flash-preview-04-17',
+    'gemini-2.5-exp',
     'gemini-2.0-flash-lite-preview-02-05',
     'gemini-2.0-flash-001',
     'gemini-2.0-flash-exp',
@@ -525,6 +528,9 @@ describe('Google Model Tests', () => {
 
   it('should map to the correct model keys', () => {
     const expected = {
+      'gemini-2.5-pro-preview-05-06': 'gemini-2.5-pro',
+      'gemini-2.5-flash-preview-04-17': 'gemini-2.5-flash',
+      'gemini-2.5-exp': 'gemini-2.5',
       'gemini-2.0-flash-lite-preview-02-05': 'gemini-2.0-flash-lite',
       'gemini-2.0-flash-001': 'gemini-2.0-flash',
       'gemini-2.0-flash-exp': 'gemini-2.0-flash',

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@librechat/backend",
-  "version": "v0.7.7",
+  "version": "v0.7.8",
   "description": "",
   "scripts": {
     "start": "echo 'please run this from the root directory'",
@@ -43,12 +43,12 @@
     "@google/generative-ai": "^0.23.0",
     "@googleapis/youtube": "^20.0.0",
     "@keyv/redis": "^4.3.3",
-    "@langchain/community": "^0.3.39",
-    "@langchain/core": "^0.3.43",
-    "@langchain/google-genai": "^0.2.2",
-    "@langchain/google-vertexai": "^0.2.3",
+    "@langchain/community": "^0.3.42",
+    "@langchain/core": "^0.3.55",
+    "@langchain/google-genai": "^0.2.8",
+    "@langchain/google-vertexai": "^0.2.8",
     "@langchain/textsplitters": "^0.1.0",
-    "@librechat/agents": "^2.4.22",
+    "@librechat/agents": "^2.4.317",
     "@librechat/data-schemas": "*",
     "@waylaidwanderer/fetch-event-source": "^3.0.1",
     "axios": "^1.8.2",
@@ -90,7 +90,7 @@
     "nanoid": "^3.3.7",
     "nodemailer": "^6.9.15",
     "ollama": "^0.5.0",
-    "openai": "^4.47.1",
+    "openai": "^4.96.2",
     "openai-chat-tokens": "^0.2.8",
     "openid-client": "^5.4.2",
     "passport": "^0.6.0",
@@ -116,6 +116,6 @@
     "jest": "^29.7.0",
     "mongodb-memory-server": "^10.1.3",
     "nodemon": "^3.0.3",
-    "supertest": "^7.0.0"
+    "supertest": "^7.1.0"
   }
 }

api/server/controllers/AskController.js

@@ -128,7 +128,7 @@ const AskController = async (req, res, next, initializeClient, addTitle) => {
     clientRef = new WeakRef(client);
 
     getAbortData = () => {
-      const currentClient = clientRef.deref();
+      const currentClient = clientRef?.deref();
       const currentText =
         currentClient?.getStreamText != null ? currentClient.getStreamText() : getPartialText();
 
@@ -228,7 +228,7 @@ const AskController = async (req, res, next, initializeClient, addTitle) => {
 
     if (!client?.skipSaveUserMessage && latestUserMessage) {
       await saveMessage(req, latestUserMessage, {
-        context: 'api/server/controllers/AskController.js - don\'t skip saving user message',
+        context: "api/server/controllers/AskController.js - don't skip saving user message",
       });
     }
 
@@ -255,7 +255,7 @@ const AskController = async (req, res, next, initializeClient, addTitle) => {
     logger.error('[AskController] Error handling request', error);
     let partialText = '';
     try {
-      const currentClient = clientRef.deref();
+      const currentClient = clientRef?.deref();
       partialText =
         currentClient?.getStreamText != null ? currentClient.getStreamText() : getPartialText();
     } catch (getTextError) {
@@ -268,6 +268,7 @@ const AskController = async (req, res, next, initializeClient, addTitle) => {
       conversationId: reqDataContext.conversationId,
       messageId: reqDataContext.responseMessageId,
       parentMessageId: overrideParentMessageId ?? reqDataContext.userMessageId ?? parentMessageId,
+      userMessageId: reqDataContext.userMessageId,
     })
       .catch((err) => {
         logger.error('[AskController] Error in `handleAbortError` during catch block', err);

api/server/controllers/EditController.js

@@ -123,7 +123,7 @@ const EditController = async (req, res, next, initializeClient) => {
     clientRef = new WeakRef(client);
 
     getAbortData = () => {
-      const currentClient = clientRef.deref();
+      const currentClient = clientRef?.deref();
       const currentText =
         currentClient?.getStreamText != null ? currentClient.getStreamText() : getPartialText();
 
@@ -219,7 +219,7 @@ const EditController = async (req, res, next, initializeClient) => {
     logger.error('[EditController] Error handling request', error);
     let partialText = '';
     try {
-      const currentClient = clientRef.deref();
+      const currentClient = clientRef?.deref();
       partialText =
         currentClient?.getStreamText != null ? currentClient.getStreamText() : getPartialText();
     } catch (getTextError) {
@@ -232,6 +232,7 @@ const EditController = async (req, res, next, initializeClient) => {
       conversationId,
       messageId: reqDataContext.responseMessageId,
       parentMessageId: overrideParentMessageId ?? userMessageId ?? parentMessageId,
+      userMessageId,
     })
       .catch((err) => {
         logger.error('[EditController] Error in `handleAbortError` during catch block', err);

api/server/controllers/PluginController.js

@@ -1,5 +1,5 @@
 const { CacheKeys, AuthType } = require('librechat-data-provider');
-const { addOpenAPISpecs } = require('~/app/clients/tools/util/addOpenAPISpecs');
+const { getToolkitKey } = require('~/server/services/ToolService');
 const { getCustomConfig } = require('~/server/services/Config');
 const { availableTools } = require('~/app/clients/tools');
 const { getMCPManager } = require('~/config');
@@ -69,7 +69,7 @@ const getAvailablePluginsController = async (req, res) => {
       );
     }
 
-    let plugins = await addOpenAPISpecs(authenticatedPlugins);
+    let plugins = authenticatedPlugins;
 
     if (includedTools.length > 0) {
       plugins = plugins.filter((plugin) => includedTools.includes(plugin.pluginKey));
@@ -105,11 +105,11 @@ const getAvailableTools = async (req, res) => {
       return;
     }
 
-    const pluginManifest = availableTools;
+    let pluginManifest = availableTools;
     const customConfig = await getCustomConfig();
     if (customConfig?.mcpServers != null) {
       const mcpManager = getMCPManager();
-      await mcpManager.loadManifestTools(pluginManifest);
+      pluginManifest = await mcpManager.loadManifestTools(pluginManifest);
     }
 
     /** @type {TPlugin[]} */
@@ -128,7 +128,7 @@ const getAvailableTools = async (req, res) => {
       (plugin) =>
         toolDefinitions[plugin.pluginKey] !== undefined ||
         (plugin.toolkit === true &&
-          Object.keys(toolDefinitions).some((key) => key.startsWith(`${plugin.pluginKey}_`))),
+          Object.keys(toolDefinitions).some((key) => getToolkitKey(key) === plugin.pluginKey)),
     );
 
     await cache.set(CacheKeys.TOOLS, tools);

api/server/controllers/agents/callbacks.js

@@ -14,15 +14,6 @@ const { loadAuthValues } = require('~/server/services/Tools/credentials');
 const { saveBase64Image } = require('~/server/services/Files/process');
 const { logger, sendEvent } = require('~/config');
 
-/** @typedef {import('@librechat/agents').Graph} Graph */
-/** @typedef {import('@librechat/agents').EventHandler} EventHandler */
-/** @typedef {import('@librechat/agents').ModelEndData} ModelEndData */
-/** @typedef {import('@librechat/agents').ToolEndData} ToolEndData */
-/** @typedef {import('@librechat/agents').ToolEndCallback} ToolEndCallback */
-/** @typedef {import('@librechat/agents').ChatModelStreamHandler} ChatModelStreamHandler */
-/** @typedef {import('@librechat/agents').ContentAggregatorResult['aggregateContent']} ContentAggregator */
-/** @typedef {import('@librechat/agents').GraphEvents} GraphEvents */
-
 class ModelEndHandler {
   /**
    * @param {Array<UsageMetadata>} collectedUsage
@@ -38,7 +29,7 @@ class ModelEndHandler {
    * @param {string} event
    * @param {ModelEndData | undefined} data
    * @param {Record<string, unknown> | undefined} metadata
-   * @param {Graph} graph
+   * @param {StandardGraph} graph
    * @returns
    */
   handle(event, data, metadata, graph) {
@@ -61,7 +52,10 @@ class ModelEndHandler {
       }
 
       this.collectedUsage.push(usage);
-      if (!graph.clientOptions?.disableStreaming) {
+      const streamingDisabled = !!(
+        graph.clientOptions?.disableStreaming || graph?.boundModel?.disableStreaming
+      );
+      if (!streamingDisabled) {
         return;
       }
       if (!data.output.content) {

api/server/controllers/agents/client.js

@@ -58,7 +58,7 @@ const payloadParser = ({ req, agent, endpoint }) => {
 
 const legacyContentEndpoints = new Set([KnownEndpoints.groq, KnownEndpoints.deepseek]);
 
-const noSystemModelRegex = [/\b(o\d)\b/gi];
+const noSystemModelRegex = [/\b(o1-preview|o1-mini|amazon\.titan-text)\b/gi];
 
 // const { processMemory, memoryInstructions } = require('~/server/services/Endpoints/agents/memory');
 // const { getFormattedMemories } = require('~/models/Memory');
@@ -148,19 +148,13 @@ class AgentClient extends BaseClient {
    * @param {MongoFile[]} attachments
    */
   checkVisionRequest(attachments) {
-    logger.info(
-      '[api/server/controllers/agents/client.js #checkVisionRequest] not implemented',
-      attachments,
-    );
     // if (!attachments) {
     //   return;
     // }
-
     // const availableModels = this.options.modelsConfig?.[this.options.endpoint];
     // if (!availableModels) {
     //   return;
     // }
-
     // let visionRequestDetected = false;
     // for (const file of attachments) {
     //   if (file?.type?.includes('image')) {
@@ -171,13 +165,11 @@ class AgentClient extends BaseClient {
     // if (!visionRequestDetected) {
     //   return;
     // }
-
     // this.isVisionModel = validateVisionModel({ model: this.modelOptions.model, availableModels });
     // if (this.isVisionModel) {
     //   delete this.modelOptions.stop;
     //   return;
     // }
-
     // for (const model of availableModels) {
     //   if (!validateVisionModel({ model, availableModels })) {
     //     continue;
@@ -187,14 +179,12 @@ class AgentClient extends BaseClient {
     //   delete this.modelOptions.stop;
     //   return;
     // }
-
     // if (!availableModels.includes(this.defaultVisionModel)) {
     //   return;
     // }
     // if (!validateVisionModel({ model: this.defaultVisionModel, availableModels })) {
     //   return;
     // }
-
     // this.modelOptions.model = this.defaultVisionModel;
     // this.isVisionModel = true;
     // delete this.modelOptions.stop;
@@ -673,7 +663,7 @@ class AgentClient extends BaseClient {
         this.indexTokenCountMap,
         toolSet,
       );
-      if (legacyContentEndpoints.has(this.options.agent.endpoint)) {
+      if (legacyContentEndpoints.has(this.options.agent.endpoint?.toLowerCase())) {
         initialMessages = formatContentStrings(initialMessages);
       }
 
@@ -728,12 +718,14 @@ class AgentClient extends BaseClient {
         }
 
         if (noSystemMessages === true && systemContent?.length) {
-          let latestMessage = _messages.pop().content;
+          const latestMessageContent = _messages.pop().content;
           if (typeof latestMessage !== 'string') {
-            latestMessage = latestMessage[0].text;
+            latestMessageContent[0].text = [systemContent, latestMessageContent[0].text].join('\n');
+            _messages.push(new HumanMessage({ content: latestMessageContent }));
+          } else {
+            const text = [systemContent, latestMessageContent].join('\n');
+            _messages.push(new HumanMessage(text));
           }
-          latestMessage = [systemContent, latestMessage].join('\n');
-          _messages.push(new HumanMessage(latestMessage));
         }
 
         let messages = _messages;

api/server/controllers/agents/request.js

@@ -259,6 +259,7 @@ const AgentController = async (req, res, next, initializeClient, addTitle) => {
       sender,
       messageId: responseMessageId,
       parentMessageId: overrideParentMessageId ?? userMessageId ?? parentMessageId,
+      userMessageId,
     })
       .catch((err) => {
         logger.error('[api/server/controllers/agents/request] Error in `handleAbortError`', err);

api/server/controllers/assistants/chatV1.js

@@ -119,7 +119,7 @@ const chatV1 = async (req, res) => {
     } else if (/Files.*are invalid/.test(error.message)) {
       const errorMessage = `Files are invalid, or may not have uploaded yet.${
         endpoint === EModelEndpoint.azureAssistants
-          ? ' If using Azure OpenAI, files are only available in the region of the assistant\'s model at the time of upload.'
+          ? " If using Azure OpenAI, files are only available in the region of the assistant's model at the time of upload."
           : ''
       }`;
       return sendResponse(req, res, messageData, errorMessage);
@@ -379,8 +379,8 @@ const chatV1 = async (req, res) => {
         body.additional_instructions ? `${body.additional_instructions}\n` : ''
       }The user has uploaded ${imageCount} image${pluralized}.
       Use the \`${ImageVisionTool.function.name}\` tool to retrieve ${
-  plural ? '' : 'a '
-}detailed text description${pluralized} for ${plural ? 'each' : 'the'} image${pluralized}.`;
+        plural ? '' : 'a '
+      }detailed text description${pluralized} for ${plural ? 'each' : 'the'} image${pluralized}.`;
 
       return files;
     };
@@ -576,6 +576,8 @@ const chatV1 = async (req, res) => {
       thread_id,
       model: assistant_id,
       endpoint,
+      spec: endpointOption.spec,
+      iconURL: endpointOption.iconURL,
     };
 
     sendMessage(res, {

api/server/controllers/assistants/chatV2.js

@@ -428,6 +428,8 @@ const chatV2 = async (req, res) => {
       thread_id,
       model: assistant_id,
       endpoint,
+      spec: endpointOption.spec,
+      iconURL: endpointOption.iconURL,
     };
 
     sendMessage(res, {

api/server/middleware/abortMiddleware.js

@@ -311,7 +311,7 @@ const handleAbortError = async (res, req, error, data) => {
   } else {
     logger.error('[handleAbortError] AI response error; aborting request:', error);
   }
-  const { sender, conversationId, messageId, parentMessageId, partialText } = data;
+  const { sender, conversationId, messageId, parentMessageId, userMessageId, partialText } = data;
 
   if (error.stack && error.stack.includes('google')) {
     logger.warn(
@@ -344,10 +344,10 @@ const handleAbortError = async (res, req, error, data) => {
       parentMessageId,
       text: errorText,
       user: req.user.id,
-      shouldSaveMessage: true,
       spec: endpointOption?.spec,
       iconURL: endpointOption?.iconURL,
       modelLabel: endpointOption?.modelLabel,
+      shouldSaveMessage: userMessageId != null,
       model: endpointOption?.modelOptions?.model || req.body?.model,
     };
 

api/server/routes/files/files.js

@@ -21,6 +21,7 @@ const { getOpenAIClient } = require('~/server/controllers/assistants/helpers');
 const { loadAuthValues } = require('~/server/services/Tools/credentials');
 const { refreshS3FileUrls } = require('~/server/services/Files/S3/crud');
 const { getFiles, batchUpdateFiles } = require('~/models/File');
+const { getAssistant } = require('~/models/Assistant');
 const { getAgent } = require('~/models/Agent');
 const { getLogStores } = require('~/cache');
 const { logger } = require('~/config');
@@ -94,7 +95,7 @@ router.delete('/', async (req, res) => {
       });
     }
 
-    /* Handle entity unlinking even if no valid files to delete */
+    /* Handle agent unlinking even if no valid files to delete */
     if (req.body.agent_id && req.body.tool_resource && dbFiles.length === 0) {
       const agent = await getAgent({
         id: req.body.agent_id,
@@ -104,7 +105,21 @@ router.delete('/', async (req, res) => {
       const agentFiles = files.filter((f) => toolResourceFiles.includes(f.file_id));
 
       await processDeleteRequest({ req, files: agentFiles });
-      res.status(200).json({ message: 'File associations removed successfully' });
+      res.status(200).json({ message: 'File associations removed successfully from agent' });
+      return;
+    }
+
+    /* Handle assistant unlinking even if no valid files to delete */
+    if (req.body.assistant_id && req.body.tool_resource && dbFiles.length === 0) {
+      const assistant = await getAssistant({
+        id: req.body.assistant_id,
+      });
+
+      const toolResourceFiles = assistant.tool_resources?.[req.body.tool_resource]?.file_ids ?? [];
+      const assistantFiles = files.filter((f) => toolResourceFiles.includes(f.file_id));
+
+      await processDeleteRequest({ req, files: assistantFiles });
+      res.status(200).json({ message: 'File associations removed successfully from assistant' });
       return;
     }
 

api/server/routes/search.js

@@ -1,40 +1,17 @@
-const { Keyv } = require('keyv');
 const express = require('express');
 const { MeiliSearch } = require('meilisearch');
-const { Conversation } = require('~/models/Conversation');
 const requireJwtAuth = require('~/server/middleware/requireJwtAuth');
-const { Message } = require('~/models/Message');
 const { isEnabled } = require('~/server/utils');
-const keyvRedis = require('~/cache/keyvRedis');
 
 const router = express.Router();
 
-const expiration = 60 * 1000;
-const cache = isEnabled(process.env.USE_REDIS)
-  ? new Keyv({ store: keyvRedis })
-  : new Keyv({ namespace: 'search', ttl: expiration });
-
 router.use(requireJwtAuth);
 
-router.get('/sync', async function (req, res) {
-  await Message.syncWithMeili();
-  await Conversation.syncWithMeili();
-  res.send('synced');
-});
-
-router.get('/test', async function (req, res) {
-  const { q } = req.query;
-  const messages = (
-    await Message.meiliSearch(q, { attributesToHighlight: ['text'] }, true)
-  ).hits.map((message) => {
-    const { _formatted, ...rest } = message;
-    return { ...rest, searchResult: true, text: _formatted.text };
-  });
-  res.send(messages);
-});
-
 router.get('/enable', async function (req, res) {
-  let result = false;
+  if (!isEnabled(process.env.SEARCH)) {
+    return res.send(false);
+  }
+
   try {
     const client = new MeiliSearch({
       host: process.env.MEILI_HOST,
@@ -42,8 +19,7 @@ router.get('/enable', async function (req, res) {
     });
 
     const { status } = await client.health();
-    result = status === 'available' && !!process.env.SEARCH;
-    return res.send(result);
+    return res.send(status === 'available');
   } catch (error) {
     return res.send(false);
   }

api/server/services/ActionService.js

@@ -146,7 +146,7 @@ async function createActionTool({
       /** @type {import('librechat-data-provider').ActionMetadataRuntime} */
       const metadata = action.metadata;
       const executor = requestBuilder.createExecutor();
-      const preparedExecutor = executor.setParams(toolInput);
+      const preparedExecutor = executor.setParams(toolInput ?? {});
 
       if (metadata.auth && metadata.auth.type !== AuthTypeEnum.None) {
         try {

api/server/services/AuthService.js

@@ -56,7 +56,7 @@ const logoutUser = async (req, refreshToken) => {
     try {
       req.session.destroy();
     } catch (destroyErr) {
-      logger.error('[logoutUser] Failed to destroy session.', destroyErr);
+      logger.debug('[logoutUser] Failed to destroy session.', destroyErr);
     }
 
     return { status: 200, message: 'Logout successful' };

api/server/services/Endpoints/agents/initialize.js

@@ -6,6 +6,7 @@ const {
   EToolResources,
   getResponseSender,
   AgentCapabilities,
+  replaceSpecialVars,
   providerEndpointMap,
 } = require('librechat-data-provider');
 const {
@@ -232,6 +233,13 @@ const initializeAgentOptions = async ({
     endpointOption: _endpointOption,
   });
 
+  if (
+    agent.endpoint === EModelEndpoint.azureOpenAI &&
+    options.llmConfig?.azureOpenAIApiInstanceName == null
+  ) {
+    agent.provider = Providers.OPENAI;
+  }
+
   if (options.provider != null) {
     agent.provider = options.provider;
   }
@@ -246,6 +254,13 @@ const initializeAgentOptions = async ({
     agent.model_parameters.model = agent.model;
   }
 
+  if (agent.instructions && agent.instructions !== '') {
+    agent.instructions = replaceSpecialVars({
+      text: agent.instructions,
+      user: req.user,
+    });
+  }
+
   if (typeof agent.artifacts === 'string' && agent.artifacts !== '') {
     agent.additional_instructions = generateArtifactsPrompt({
       endpoint: agent.provider,

api/server/services/Endpoints/assistants/build.js

@@ -3,7 +3,6 @@ const generateArtifactsPrompt = require('~/app/clients/prompts/artifacts');
 const { getAssistant } = require('~/models/Assistant');
 
 const buildOptions = async (endpoint, parsedBody) => {
-
   const { promptPrefix, assistant_id, iconURL, greeting, spec, artifacts, ...modelOptions } =
     parsedBody;
   const endpointOption = removeNullishValues({

api/server/services/Endpoints/openAI/llm.js

@@ -136,7 +136,7 @@ function getLLMConfig(apiKey, options = {}, endpoint = null) {
     Object.assign(llmConfig, azure);
     llmConfig.model = llmConfig.azureOpenAIApiDeploymentName;
   } else {
-    llmConfig.openAIApiKey = apiKey;
+    llmConfig.apiKey = apiKey;
     // Object.assign(llmConfig, {
     //   configuration: { apiKey },
     // });

api/server/services/Threads/manage.js

@@ -132,6 +132,8 @@ async function saveUserMessage(req, params) {
  * @param {string} params.endpoint - The conversation endpoint
  * @param {string} params.parentMessageId - The latest user message that triggered this response.
  * @param {string} [params.instructions] - Optional: from preset for `instructions` field.
+ * @param {string} [params.spec] - Optional: Model spec identifier.
+ * @param {string} [params.iconURL]
  * Overrides the instructions of the assistant.
  * @param {string} [params.promptPrefix] - Optional: from preset for `additional_instructions` field.
  * @return {Promise<Run>} A promise that resolves to the created run object.
@@ -154,6 +156,8 @@ async function saveAssistantMessage(req, params) {
     text: params.text,
     unfinished: false,
     // tokenCount,
+    iconURL: params.iconURL,
+    spec: params.spec,
   });
 
   await saveConvo(
@@ -165,6 +169,8 @@ async function saveAssistantMessage(req, params) {
       instructions: params.instructions,
       assistant_id: params.assistant_id,
       model: params.model,
+      iconURL: params.iconURL,
+      spec: params.spec,
     },
     { context: 'api/server/services/Threads/manage.js #saveAssistantMessage' },
   );

api/server/services/ToolService.js

@@ -8,6 +8,7 @@ const {
   ErrorTypes,
   ContentTypes,
   imageGenTools,
+  EToolResources,
   EModelEndpoint,
   actionDelimiter,
   ImageVisionTool,
@@ -36,6 +37,30 @@ const { redactMessage } = require('~/config/parsers');
 const { sleep } = require('~/server/utils');
 const { logger } = require('~/config');
 
+/**
+ * @param {string} toolName
+ * @returns {string | undefined} toolKey
+ */
+function getToolkitKey(toolName) {
+  /** @type {string|undefined} */
+  let toolkitKey;
+  for (const toolkit of toolkits) {
+    if (toolName.startsWith(EToolResources.image_edit)) {
+      const splitMatches = toolkit.pluginKey.split('_');
+      const suffix = splitMatches[splitMatches.length - 1];
+      if (toolName.endsWith(suffix)) {
+        toolkitKey = toolkit.pluginKey;
+        break;
+      }
+    }
+    if (toolName.startsWith(toolkit.pluginKey)) {
+      toolkitKey = toolkit.pluginKey;
+      break;
+    }
+  }
+  return toolkitKey;
+}
+
 /**
  * Loads and formats tools from the specified tool directory.
  *
@@ -108,7 +133,7 @@ function loadAndFormatTools({ directory, adminFilter = [], adminIncluded = [] })
     tools.push(formattedTool);
   }
 
-  /** Basic Tools; schema: { input: string } */
+  /** Basic Tools & Toolkits; schema: { input: string } */
   const basicToolInstances = [
     new Calculator(),
     ...createOpenAIImageTools({ override: true }),
@@ -117,9 +142,7 @@ function loadAndFormatTools({ directory, adminFilter = [], adminIncluded = [] })
   for (const toolInstance of basicToolInstances) {
     const formattedTool = formatToOpenAIAssistantTool(toolInstance);
     let toolName = formattedTool[Tools.function].name;
-    toolName = toolkits.some((toolkit) => toolName.startsWith(toolkit.pluginKey))
-      ? toolName.split('_')[0]
-      : toolName;
+    toolName = getToolkitKey(toolName) ?? toolName;
     if (filter.has(toolName) && included.size === 0) {
       continue;
     }
@@ -682,6 +705,7 @@ async function loadAgentTools({ req, res, agent, tool_resources, openAIApiKey })
 }
 
 module.exports = {
+  getToolkitKey,
   loadAgentTools,
   loadAndFormatTools,
   processRequiredActions,

api/server/utils/streamResponse.js

@@ -70,7 +70,13 @@ const sendError = async (req, res, options, callback) => {
   }
 
   if (shouldSaveMessage) {
-    await saveMessage(req, { ...errorMessage, user });
+    await saveMessage(
+      req,
+      { ...errorMessage, user },
+      {
+        context: 'api/server/utils/streamResponse.js - sendError',
+      },
+    );
   }
 
   if (!errorMessage.error) {

api/strategies/openidStrategy.js

@@ -17,12 +17,15 @@ try {
 }
 
 /**
- * Downloads an image from a URL using an access token.
- * @param {string} url
- * @param {string} accessToken
- * @returns {Promise<Buffer>}
+ * Downloads an image from a URL using an access token, returning a Buffer.
+ *
+ * @async
+ * @function downloadImage
+ * @param {string} url - The image URL
+ * @param {string} accessToken - The OAuth2 access token, if required by the server
+ * @returns {Promise<Buffer|string>} A Buffer if successful, or an empty string on failure
  */
-const downloadImage = async (url, accessToken) => {
+async function downloadImage(url, accessToken) {
   if (!url) {
     return '';
   }
@@ -30,34 +33,33 @@ const downloadImage = async (url, accessToken) => {
   try {
     const options = {
       method: 'GET',
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-      },
+      headers: { Authorization: `Bearer ${accessToken}` },
     };
-
     if (process.env.PROXY) {
       options.agent = new HttpsProxyAgent(process.env.PROXY);
     }
 
     const response = await fetch(url, options);
-
-    if (response.ok) {
-      const buffer = await response.buffer();
-      return buffer;
-    } else {
+    if (!response.ok) {
       throw new Error(`${response.statusText} (HTTP ${response.status})`);
     }
+    return await response.buffer();
   } catch (error) {
-    logger.error(
-      `[openidStrategy] downloadImage: Error downloading image at URL "${url}": ${error}`,
-    );
+    logger.error(`[openidStrategy] downloadImage: Failed to fetch "${url}": ${error}`);
     return '';
   }
-};
+}
 
 /**
- * Determines the full name of a user based on OpenID userinfo and environment configuration.
+ * Derives a user's "full name" from userinfo or environment-specified claim.
  *
+ * Priority:
+ * 1) process.env.OPENID_NAME_CLAIM
+ * 2) userinfo.given_name + userinfo.family_name
+ * 3) userinfo.given_name OR userinfo.family_name
+ * 4) userinfo.username or userinfo.email
+ *
+ * @function getFullName
  * @param {Object} userinfo - The user information object from OpenID Connect
  * @param {string} [userinfo.given_name] - The user's first name
  * @param {string} [userinfo.family_name] - The user's last name
@@ -66,153 +68,252 @@ const downloadImage = async (url, accessToken) => {
  * @returns {string} The determined full name of the user
  */
 function getFullName(userinfo) {
-  if (process.env.OPENID_NAME_CLAIM) {
+  if (process.env.OPENID_NAME_CLAIM && userinfo[process.env.OPENID_NAME_CLAIM]) {
     return userinfo[process.env.OPENID_NAME_CLAIM];
   }
-
   if (userinfo.given_name && userinfo.family_name) {
     return `${userinfo.given_name} ${userinfo.family_name}`;
   }
-
   if (userinfo.given_name) {
     return userinfo.given_name;
   }
-
   if (userinfo.family_name) {
     return userinfo.family_name;
   }
-
-  return userinfo.username || userinfo.email;
+  return userinfo.username || userinfo.email || '';
 }
 
 /**
  * Converts an input into a string suitable for a username.
- * If the input is a string, it will be returned as is.
- * If the input is an array, elements will be joined with underscores.
- * In case of undefined or other falsy values, a default value will be returned.
  *
- * @param {string | string[] | undefined} input - The input value to be converted into a username.
- * @param {string} [defaultValue=''] - The default value to return if the input is falsy.
- * @returns {string} The processed input as a string suitable for a username.
+ * @function convertToUsername
+ * @param {string|string[]|undefined} input - Could be a string or array of strings
+ * @param {string} [defaultValue=''] - Fallback if input is invalid or not provided
+ * @returns {string} A processed username string
  */
 function convertToUsername(input, defaultValue = '') {
   if (typeof input === 'string') {
     return input;
-  } else if (Array.isArray(input)) {
+  }
+  if (Array.isArray(input)) {
     return input.join('_');
   }
-
   return defaultValue;
 }
 
+/**
+ * Safely extracts an array of roles from an object using dot notation (e.g. realm_access.roles).
+ *
+ * @function extractRolesFrom
+ * @param {Object} obj
+ * @param {string} path
+ * @returns {string[]} Array of roles, or empty array if not found
+ */
+function extractRolesFrom(obj, path) {
+  try {
+    let current = obj;
+    for (const part of path.split('.')) {
+      if (!current || typeof current !== 'object') {
+        return [];
+      }
+      current = current[part];
+    }
+    return Array.isArray(current) ? current : [];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Retrieves user roles from either a token, the userinfo object, or both.
+ *
+ * Supports three strategies based on the roleSource:
+ * - 'token': Extract roles from the token (access or id token), fallback to userinfo if extraction fails.
+ * - 'userinfo': Extract roles solely from the userinfo object.
+ * - 'both': Extract roles from both token and userinfo and merge them.
+ *
+ * Also supports encrypted tokens by falling back to userinfo if the token is not JWT-decodable.
+ *
+ * @function getUserRoles
+ * @param {import('openid-client').TokenSet} tokenSet
+ * @param {Object} userinfo
+ * @param {string} rolePath - Dot-notation path to where roles are stored
+ * @param {'access'|'id'} tokenKind - Which token to parse for roles
+ * @param {'token'|'userinfo'|'both'} roleSource - Source of roles for extraction
+ * @returns {string[]} Array of roles, possibly empty
+ */
+function getUserRoles(tokenSet, userinfo, rolePath, tokenKind, roleSource) {
+  if (!tokenSet) {
+    return extractRolesFrom(userinfo, rolePath);
+  }
+
+  if (roleSource === 'userinfo') {
+    const roles = extractRolesFrom(userinfo, rolePath);
+    if (!roles.length) {
+      logger.warn(`[openidStrategy] Key '${rolePath}' not found in userinfo.`);
+    }
+    return roles;
+  } else if (roleSource === 'both') {
+    let tokenRoles = [];
+    try {
+      let tokenToDecode = tokenKind === 'access' ? tokenSet.access_token : tokenSet.id_token;
+      if (tokenToDecode && tokenToDecode.includes('.')) {
+        const tokenData = jwtDecode(tokenToDecode);
+        tokenRoles = extractRolesFrom(tokenData, rolePath);
+      } else {
+        logger.warn(
+          '[openidStrategy] Token is not a valid JWT for decoding, skipping token roles extraction.',
+        );
+      }
+    } catch (err) {
+      logger.error(`[openidStrategy] Failed to decode ${tokenKind} token: ${err}.`);
+    }
+    const userinfoRoles = extractRolesFrom(userinfo, rolePath);
+    const combinedRoles = Array.from(new Set([...tokenRoles, ...userinfoRoles]));
+    if (!combinedRoles.length) {
+      logger.warn(`[openidStrategy] Key '${rolePath}' not found in both token and userinfo.`);
+    }
+    return combinedRoles;
+  } else {
+    // default 'token' strategy
+    try {
+      let tokenToDecode = tokenKind === 'access' ? tokenSet.access_token : tokenSet.id_token;
+      if (!tokenToDecode || !tokenToDecode.includes('.')) {
+        throw new Error('Token is not a valid JWT for decoding.');
+      }
+      const tokenData = jwtDecode(tokenToDecode);
+      const roles = extractRolesFrom(tokenData, rolePath);
+      if (!roles.length) {
+        logger.warn(
+          `[openidStrategy] Key '${rolePath}' not found in ${tokenKind} token. Falling back to userinfo.`,
+        );
+        return extractRolesFrom(userinfo, rolePath);
+      }
+      return roles;
+    } catch (err) {
+      logger.error(`[openidStrategy] ${err}. Falling back to userinfo for role extraction.`);
+      return extractRolesFrom(userinfo, rolePath);
+    }
+  }
+}
+
+/**
+ * Registers and configures the OpenID Connect strategy with Passport, enabling PKCE when toggled.
+ *
+ * @async
+ * @function setupOpenId
+ * @returns {Promise<void>}
+ */
 async function setupOpenId() {
   try {
+    // Set up a proxy if specified
     if (process.env.PROXY) {
       const proxyAgent = new HttpsProxyAgent(process.env.PROXY);
-      custom.setHttpOptionsDefaults({
-        agent: proxyAgent,
-      });
-      logger.info(`[openidStrategy] proxy agent added: ${process.env.PROXY}`);
+      custom.setHttpOptionsDefaults({ agent: proxyAgent });
+      logger.info(`[openidStrategy] Using proxy: ${process.env.PROXY}`);
     }
+
+    // Discover issuer configuration
     const issuer = await Issuer.discover(process.env.OPENID_ISSUER);
-    /* Supported Algorithms, openid-client v5 doesn't set it automatically as discovered from server.
-      - id_token_signed_response_alg      // defaults to 'RS256'
-      - request_object_signing_alg        // defaults to 'RS256'
-      - userinfo_signed_response_alg      // not in v5
-      - introspection_signed_response_alg // not in v5
-      - authorization_signed_response_alg // not in v5
-    */
+    logger.info(`[openidStrategy] Discovered issuer: ${issuer.issuer}`);
+
+    /**
+     *  Supported Algorithms, openid-client v5 doesn't set it automatically as discovered from server.
+     *  - id_token_signed_response_alg      // defaults to 'RS256'
+     *  - request_object_signing_alg        // defaults to 'RS256'
+     *  - userinfo_signed_response_alg      // not in v5
+     *  - introspection_signed_response_alg // not in v5
+     *  - authorization_signed_response_alg // not in v5
+     */
     /** @type {import('openid-client').ClientMetadata} */
     const clientMetadata = {
       client_id: process.env.OPENID_CLIENT_ID,
-      client_secret: process.env.OPENID_CLIENT_SECRET,
+      client_secret: process.env.OPENID_CLIENT_SECRET || '',
       redirect_uris: [process.env.DOMAIN_SERVER + process.env.OPENID_CALLBACK_URL],
     };
+
+    // Optionally force the first supported signing algorithm
     if (isEnabled(process.env.OPENID_SET_FIRST_SUPPORTED_ALGORITHM)) {
       clientMetadata.id_token_signed_response_alg =
         issuer.id_token_signing_alg_values_supported?.[0] || 'RS256';
     }
+
     const client = new issuer.Client(clientMetadata);
+
+    // Determine whether to enable PKCE
+    const usePKCE = process.env.OPENID_USE_PKCE === 'true';
+
+    // Set up authorization parameters. Include code_challenge_method if PKCE is enabled.
+    const openidScope = process.env.OPENID_SCOPE || 'openid profile email';
+    /** @type {import('openid-client').AuthorizationParameters} */
+    const params = {
+      scope: openidScope,
+      response_type: 'code',
+    };
+    if (usePKCE) {
+      params.code_challenge_method = 'S256'; // Enable PKCE by specifying the code challenge method
+    }
+
+    // Role-based config
     const requiredRole = process.env.OPENID_REQUIRED_ROLE;
-    const requiredRoleParameterPath = process.env.OPENID_REQUIRED_ROLE_PARAMETER_PATH;
-    const requiredRoleTokenKind = process.env.OPENID_REQUIRED_ROLE_TOKEN_KIND;
-    const openidLogin = new OpenIDStrategy(
+    const rolePath = process.env.OPENID_REQUIRED_ROLE_PARAMETER_PATH;
+    const tokenKind = process.env.OPENID_REQUIRED_ROLE_TOKEN_KIND || 'id'; // 'id'|'access'
+    const roleSource = process.env.OPENID_REQUIRED_ROLE_SOURCE || 'both'; // 'token'|'userinfo'|'both'
+
+    // Create the Passport strategy using the new type-correct instantiation and toggle for PKCE
+    const openidStrategy = new OpenIDStrategy(
       {
         client,
-        params: {
-          scope: process.env.OPENID_SCOPE,
-        },
+        params,
+        usePKCE,
       },
-      async (tokenset, userinfo, done) => {
+      async (tokenSet, userinfo, done) => {
         try {
-          logger.info(`[openidStrategy] verify login openidId: ${userinfo.sub}`);
-          logger.debug('[openidStrategy] very login tokenset and userinfo', { tokenset, userinfo });
+          logger.info(`[openidStrategy] Verifying login for sub=${userinfo.sub}`);
 
+          // Find user by openidId or fallback to email
           let user = await findUser({ openidId: userinfo.sub });
-          logger.info(
-            `[openidStrategy] user ${user ? 'found' : 'not found'} with openidId: ${userinfo.sub}`,
-          );
-
-          if (!user) {
+          if (!user && userinfo.email) {
             user = await findUser({ email: userinfo.email });
             logger.info(
-              `[openidStrategy] user ${user ? 'found' : 'not found'} with email: ${
-                userinfo.email
-              } for openidId: ${userinfo.sub}`,
+              `[openidStrategy] User ${user ? 'found' : 'not found'} by email=${userinfo.email}.`,
             );
           }
 
-          const fullName = getFullName(userinfo);
-
-          if (requiredRole) {
-            let decodedToken = '';
-            if (requiredRoleTokenKind === 'access') {
-              decodedToken = jwtDecode(tokenset.access_token);
-            } else if (requiredRoleTokenKind === 'id') {
-              decodedToken = jwtDecode(tokenset.id_token);
-            }
-            const pathParts = requiredRoleParameterPath.split('.');
-            let found = true;
-            let roles = pathParts.reduce((o, key) => {
-              if (o === null || o === undefined || !(key in o)) {
-                found = false;
-                return [];
-              }
-              return o[key];
-            }, decodedToken);
-
-            if (!found) {
-              logger.error(
-                `[openidStrategy] Key '${requiredRoleParameterPath}' not found in ${requiredRoleTokenKind} token!`,
-              );
-            }
-
+          // If a role is required, check user roles
+          if (requiredRole && rolePath) {
+            const roles = getUserRoles(tokenSet, userinfo, rolePath, tokenKind, roleSource);
             if (!roles.includes(requiredRole)) {
+              logger.warn(
+                `[openidStrategy] Missing required role "${requiredRole}". Roles: [${roles.join(', ')}]`,
+              );
               return done(null, false, {
                 message: `You must have the "${requiredRole}" role to log in.`,
               });
             }
           }
 
-          let username = '';
-          if (process.env.OPENID_USERNAME_CLAIM) {
-            username = userinfo[process.env.OPENID_USERNAME_CLAIM];
-          } else {
-            username = convertToUsername(
-              userinfo.username || userinfo.given_name || userinfo.email,
-            );
-          }
+          // Derive name and username
+          const fullName = getFullName(userinfo);
+          const username = process.env.OPENID_USERNAME_CLAIM
+            ? convertToUsername(userinfo[process.env.OPENID_USERNAME_CLAIM])
+            : convertToUsername(userinfo.username || userinfo.given_name || userinfo.email);
 
+          // Create or update user
           if (!user) {
-            user = {
-              provider: 'openid',
-              openidId: userinfo.sub,
-              username,
-              email: userinfo.email || '',
-              emailVerified: userinfo.email_verified || false,
-              name: fullName,
-            };
-            user = await createUser(user, true, true);
+            logger.info(`[openidStrategy] Creating a new user for sub=${userinfo.sub}`);
+            user = await createUser(
+              {
+                provider: 'openid',
+                openidId: userinfo.sub,
+                username,
+                email: userinfo.email || '',
+                emailVerified: Boolean(userinfo.email_verified) || false,
+                name: fullName,
+              },
+              true,
+              true,
+            );
           } else {
             user.provider = 'openid';
             user.openidId = userinfo.sub;
@@ -220,54 +321,44 @@ async function setupOpenId() {
             user.name = fullName;
           }
 
-          if (userinfo.picture && !user.avatar?.includes('manual=true')) {
-            /** @type {string | undefined} */
-            const imageUrl = userinfo.picture;
-
-            let fileName;
-            if (crypto) {
-              fileName = (await hashToken(userinfo.sub)) + '.png';
-            } else {
-              fileName = userinfo.sub + '.png';
-            }
-
-            const imageBuffer = await downloadImage(imageUrl, tokenset.access_token);
+          // Fetch avatar if not manually overridden
+          if (userinfo.picture && !String(user.avatar || '').includes('manual=true')) {
+            const imageBuffer = await downloadImage(userinfo.picture, tokenSet.access_token);
             if (imageBuffer) {
               const { saveBuffer } = getStrategyFunctions(process.env.CDN_PROVIDER);
+              const fileHash = crypto ? await hashToken(userinfo.sub) : userinfo.sub;
+              const fileName = `${fileHash}.png`;
+
               const imagePath = await saveBuffer({
                 fileName,
                 userId: user._id.toString(),
                 buffer: imageBuffer,
               });
-              user.avatar = imagePath ?? '';
+              if (imagePath) {
+                user.avatar = imagePath;
+              }
             }
           }
 
+          // Persist user changes
           user = await updateUser(user._id, user);
 
+          // Success
           logger.info(
-            `[openidStrategy] login success openidId: ${user.openidId} | email: ${user.email} | username: ${user.username} `,
-            {
-              user: {
-                openidId: user.openidId,
-                username: user.username,
-                email: user.email,
-                name: user.name,
-              },
-            },
+            `[openidStrategy] Login success for sub=${user.openidId}, email=${user.email}, username=${user.username}`,
           );
-
-          done(null, user);
+          return done(null, user);
         } catch (err) {
-          logger.error('[openidStrategy] login failed', err);
-          done(err);
+          logger.error('[openidStrategy] Login verification failed:', err);
+          return done(err);
         }
       },
     );
 
-    passport.use('openid', openidLogin);
+    // Register the strategy under the 'openid' name
+    passport.use('openid', openidStrategy);
   } catch (err) {
-    logger.error('[openidStrategy]', err);
+    logger.error('[openidStrategy] Error setting up OpenID strategy:', err);
   }
 }
 

api/strategies/openidStrategy.spec.js

@@ -10,7 +10,6 @@ jest.mock('openid-client');
 jest.mock('jsonwebtoken/decode');
 jest.mock('~/server/services/Files/strategies', () => ({
   getStrategyFunctions: jest.fn(() => ({
-    // You can modify this mock as needed (here returning a dummy function)
     saveBuffer: jest.fn().mockResolvedValue('/fake/path/to/avatar.png'),
   })),
 }));
@@ -23,18 +22,20 @@ jest.mock('~/server/utils/crypto', () => ({
   hashToken: jest.fn().mockResolvedValue('hashed-token'),
 }));
 jest.mock('~/server/utils', () => ({
-  isEnabled: jest.fn(() => false), // default to false, override per test if needed
+  isEnabled: jest.fn(() => false), // default to false; override per test if needed
 }));
 jest.mock('~/config', () => ({
   logger: {
     info: jest.fn(),
     debug: jest.fn(),
     error: jest.fn(),
+    warn: jest.fn(),
   },
 }));
 
-// Mock Issuer.discover so that setupOpenId gets a fake issuer and client
+// Update Issuer.discover mock so that the returned issuer has an 'issuer' property.
 Issuer.discover = jest.fn().mockResolvedValue({
+  issuer: 'https://fake-issuer.com',
   id_token_signing_alg_values_supported: ['RS256'],
   Client: jest.fn().mockImplementation((clientMetadata) => {
     return {
@@ -43,7 +44,7 @@ Issuer.discover = jest.fn().mockResolvedValue({
   }),
 });
 
-// To capture the verify callback from the strategy, we grab it from the mock constructor
+// To capture the verify callback from the strategy, we grab it from the mock constructor.
 let verifyCallback;
 OpenIDStrategy.mockImplementation((options, verify) => {
   verifyCallback = verify;
@@ -51,21 +52,21 @@ OpenIDStrategy.mockImplementation((options, verify) => {
 });
 
 describe('setupOpenId', () => {
-  // Helper to wrap the verify callback in a promise
+  // Helper to wrap the verify callback in a promise.
   const validate = (tokenset, userinfo) =>
     new Promise((resolve, reject) => {
       verifyCallback(tokenset, userinfo, (err, user, details) => {
         if (err) {
-          reject(err);
-        } else {
-          resolve({ user, details });
+          return reject(err);
         }
+        resolve({ user, details });
       });
     });
 
-  const tokenset = {
-    id_token: 'fake_id_token',
-    access_token: 'fake_access_token',
+  // Default tokenset: tokens include a period to simulate a JWT.
+  const validTokenSet = {
+    id_token: 'header.payload.signature',
+    access_token: 'header.payload.signature',
   };
 
   const baseUserinfo = {
@@ -77,13 +78,14 @@ describe('setupOpenId', () => {
     name: 'My Full',
     username: 'flast',
     picture: 'https://example.com/avatar.png',
+    roles: ['requiredRole'],
   };
 
   beforeEach(async () => {
-    // Clear previous mock calls and reset implementations
+    // Clear previous mock calls and reset implementations.
     jest.clearAllMocks();
 
-    // Reset environment variables needed by the strategy
+    // Reset environment variables needed by the strategy.
     process.env.OPENID_ISSUER = 'https://fake-issuer.com';
     process.env.OPENID_CLIENT_ID = 'fake_client_id';
     process.env.OPENID_CLIENT_SECRET = 'fake_client_secret';
@@ -93,26 +95,29 @@ describe('setupOpenId', () => {
     process.env.OPENID_REQUIRED_ROLE = 'requiredRole';
     process.env.OPENID_REQUIRED_ROLE_PARAMETER_PATH = 'roles';
     process.env.OPENID_REQUIRED_ROLE_TOKEN_KIND = 'id';
+    process.env.OPENID_REQUIRED_ROLE_SOURCE = 'token';
     delete process.env.OPENID_USERNAME_CLAIM;
     delete process.env.OPENID_NAME_CLAIM;
     delete process.env.PROXY;
+    delete process.env.OPENID_USE_PKCE;
+    delete process.env.OPENID_SET_FIRST_SUPPORTED_ALGORITHM;
 
-    // Default jwtDecode mock returns a token that includes the required role.
+    // By default, jwtDecode returns a token that includes the required role.
     jwtDecode.mockReturnValue({
       roles: ['requiredRole'],
     });
 
-    // By default, assume that no user is found, so createUser will be called
+    // By default, assume that no user is found so that createUser will be called.
     findUser.mockResolvedValue(null);
     createUser.mockImplementation(async (userData) => {
-      // simulate created user with an _id property
+      // Simulate created user with an _id property.
       return { _id: 'newUserId', ...userData };
     });
     updateUser.mockImplementation(async (id, userData) => {
       return { _id: id, ...userData };
     });
 
-    // For image download, simulate a successful response
+    // For image download, simulate a successful response.
     const fakeBuffer = Buffer.from('fake image');
     const fakeResponse = {
       ok: true,
@@ -120,18 +125,13 @@ describe('setupOpenId', () => {
     };
     fetch.mockResolvedValue(fakeResponse);
 
-    // Finally, call the setup function so that passport.use gets called
+    // (Re)initialize the strategy with current env settings.
     await setupOpenId();
   });
 
   it('should create a new user with correct username when username claim exists', async () => {
-    // Arrange – our userinfo already has username 'flast'
     const userinfo = { ...baseUserinfo };
-
-    // Act
-    const { user } = await validate(tokenset, userinfo);
-
-    // Assert
+    const { user } = await validate(validTokenSet, userinfo);
     expect(user.username).toBe(userinfo.username);
     expect(createUser).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -147,16 +147,10 @@ describe('setupOpenId', () => {
   });
 
   it('should use given_name as username when username claim is missing', async () => {
-    // Arrange – remove username from userinfo
     const userinfo = { ...baseUserinfo };
     delete userinfo.username;
-    // Expect the username to be the given name (unchanged case)
     const expectUsername = userinfo.given_name;
-
-    // Act
-    const { user } = await validate(tokenset, userinfo);
-
-    // Assert
+    const { user } = await validate(validTokenSet, userinfo);
     expect(user.username).toBe(expectUsername);
     expect(createUser).toHaveBeenCalledWith(
       expect.objectContaining({ username: expectUsername }),
@@ -166,16 +160,11 @@ describe('setupOpenId', () => {
   });
 
   it('should use email as username when username and given_name are missing', async () => {
-    // Arrange – remove username and given_name
     const userinfo = { ...baseUserinfo };
     delete userinfo.username;
     delete userinfo.given_name;
     const expectUsername = userinfo.email;
-
-    // Act
-    const { user } = await validate(tokenset, userinfo);
-
-    // Assert
+    const { user } = await validate(validTokenSet, userinfo);
     expect(user.username).toBe(expectUsername);
     expect(createUser).toHaveBeenCalledWith(
       expect.objectContaining({ username: expectUsername }),
@@ -185,14 +174,10 @@ describe('setupOpenId', () => {
   });
 
   it('should override username with OPENID_USERNAME_CLAIM when set', async () => {
-    // Arrange – set OPENID_USERNAME_CLAIM so that the sub claim is used
     process.env.OPENID_USERNAME_CLAIM = 'sub';
     const userinfo = { ...baseUserinfo };
-
-    // Act
-    const { user } = await validate(tokenset, userinfo);
-
-    // Assert – username should equal the sub (converted as-is)
+    await setupOpenId();
+    const { user } = await validate(validTokenSet, userinfo);
     expect(user.username).toBe(userinfo.sub);
     expect(createUser).toHaveBeenCalledWith(
       expect.objectContaining({ username: userinfo.sub }),
@@ -202,31 +187,21 @@ describe('setupOpenId', () => {
   });
 
   it('should set the full name correctly when given_name and family_name exist', async () => {
-    // Arrange
     const userinfo = { ...baseUserinfo };
     const expectedFullName = `${userinfo.given_name} ${userinfo.family_name}`;
-
-    // Act
-    const { user } = await validate(tokenset, userinfo);
-
-    // Assert
+    const { user } = await validate(validTokenSet, userinfo);
     expect(user.name).toBe(expectedFullName);
   });
 
   it('should override full name with OPENID_NAME_CLAIM when set', async () => {
-    // Arrange – use the name claim as the full name
     process.env.OPENID_NAME_CLAIM = 'name';
     const userinfo = { ...baseUserinfo, name: 'Custom Name' };
-
-    // Act
-    const { user } = await validate(tokenset, userinfo);
-
-    // Assert
+    await setupOpenId();
+    const { user } = await validate(validTokenSet, userinfo);
     expect(user.name).toBe('Custom Name');
   });
 
   it('should update an existing user on login', async () => {
-    // Arrange – simulate that a user already exists
     const existingUser = {
       _id: 'existingUserId',
       provider: 'local',
@@ -241,13 +216,8 @@ describe('setupOpenId', () => {
       }
       return null;
     });
-
     const userinfo = { ...baseUserinfo };
-
-    // Act
-    await validate(tokenset, userinfo);
-
-    // Assert – updateUser should be called and the user object updated
+    await validate(validTokenSet, userinfo);
     expect(updateUser).toHaveBeenCalledWith(
       existingUser._id,
       expect.objectContaining({
@@ -260,43 +230,154 @@ describe('setupOpenId', () => {
   });
 
   it('should enforce the required role and reject login if missing', async () => {
-    // Arrange – simulate a token without the required role.
-    jwtDecode.mockReturnValue({
-      roles: ['SomeOtherRole'],
-    });
+    jwtDecode.mockReturnValue({ roles: ['SomeOtherRole'] });
     const userinfo = { ...baseUserinfo };
-
-    // Act
-    const { user, details } = await validate(tokenset, userinfo);
-
-    // Assert – verify that the strategy rejects login
+    const { user, details } = await validate(validTokenSet, userinfo);
     expect(user).toBe(false);
     expect(details.message).toBe('You must have the "requiredRole" role to log in.');
   });
 
   it('should attempt to download and save the avatar if picture is provided', async () => {
-    // Arrange – ensure userinfo contains a picture URL
     const userinfo = { ...baseUserinfo };
-
-    // Act
-    const { user } = await validate(tokenset, userinfo);
-
-    // Assert – verify that download was attempted and the avatar field was set via updateUser
+    const { user } = await validate(validTokenSet, userinfo);
     expect(fetch).toHaveBeenCalled();
-    // Our mock getStrategyFunctions.saveBuffer returns '/fake/path/to/avatar.png'
     expect(user.avatar).toBe('/fake/path/to/avatar.png');
   });
 
   it('should not attempt to download avatar if picture is not provided', async () => {
-    // Arrange – remove picture
     const userinfo = { ...baseUserinfo };
     delete userinfo.picture;
-
-    // Act
-    await validate(tokenset, userinfo);
-
-    // Assert – fetch should not be called and avatar should remain undefined or empty
+    await validate(validTokenSet, userinfo);
     expect(fetch).not.toHaveBeenCalled();
-    // Depending on your implementation, user.avatar may be undefined or an empty string.
+  });
+
+  it('should fallback to userinfo roles if the id_token is invalid (missing a period)', async () => {
+    const invalidTokenSet = { ...validTokenSet, id_token: 'invalidtoken' };
+    const userinfo = { ...baseUserinfo, roles: ['requiredRole'] };
+    const { user } = await validate(invalidTokenSet, userinfo);
+    expect(user).toBeDefined();
+    expect(createUser).toHaveBeenCalled();
+  });
+
+  it('should handle downloadImage failure gracefully and not set an avatar', async () => {
+    fetch.mockRejectedValue(new Error('network error'));
+    const userinfo = { ...baseUserinfo };
+    const { user } = await validate(validTokenSet, userinfo);
+    expect(fetch).toHaveBeenCalled();
+    expect(user.avatar).toBeUndefined();
+  });
+
+  it('should allow login if no required role is specified', async () => {
+    delete process.env.OPENID_REQUIRED_ROLE;
+    delete process.env.OPENID_REQUIRED_ROLE_PARAMETER_PATH;
+    jwtDecode.mockReturnValue({});
+    const userinfo = { ...baseUserinfo };
+    const { user } = await validate(validTokenSet, userinfo);
+    expect(user).toBeDefined();
+    expect(createUser).toHaveBeenCalled();
+  });
+
+  it('should use roles from userinfo when OPENID_REQUIRED_ROLE_SOURCE is set to "userinfo"', async () => {
+    process.env.OPENID_REQUIRED_ROLE_SOURCE = 'userinfo';
+    jwtDecode.mockReturnValue({});
+    const userinfo = { ...baseUserinfo, roles: ['requiredRole'] };
+    await setupOpenId();
+    const { user } = await validate(validTokenSet, userinfo);
+    expect(user).toBeDefined();
+    expect(createUser).toHaveBeenCalled();
+  });
+
+  it('should merge roles from both token and userinfo when OPENID_REQUIRED_ROLE_SOURCE is "both"', async () => {
+    process.env.OPENID_REQUIRED_ROLE_SOURCE = 'both';
+    jwtDecode.mockReturnValue({ roles: ['extraRole'] });
+    const userinfo = { ...baseUserinfo, roles: ['requiredRole'] };
+    await setupOpenId();
+    const { user } = await validate(validTokenSet, userinfo);
+    expect(user).toBeDefined();
+    expect(createUser).toHaveBeenCalled();
+  });
+
+  it('should fall back to userinfo roles when token decode fails and roleSource is "both"', async () => {
+    process.env.OPENID_REQUIRED_ROLE_SOURCE = 'both';
+    jwtDecode.mockImplementation(() => {
+      throw new Error('Decode error');
+    });
+    const userinfo = { ...baseUserinfo, roles: ['requiredRole'] };
+    await setupOpenId();
+    const { user } = await validate(validTokenSet, userinfo);
+    expect(user).toBeDefined();
+    expect(createUser).toHaveBeenCalled();
+  });
+
+  it('should merge roles from both token and userinfo when token is invalid and roleSource is "both"', async () => {
+    process.env.OPENID_REQUIRED_ROLE_SOURCE = 'both';
+    const invalidTokenSet = { ...validTokenSet, id_token: 'invalidtoken' };
+    const userinfo = { ...baseUserinfo, roles: ['requiredRole'] };
+    await setupOpenId();
+    const { user } = await validate(invalidTokenSet, userinfo);
+    expect(user).toBeDefined();
+    expect(createUser).toHaveBeenCalled();
+  });
+
+  it('should reject login if merged roles from both token and userinfo do not include required role', async () => {
+    process.env.OPENID_REQUIRED_ROLE_SOURCE = 'both';
+    jwtDecode.mockReturnValue({ roles: ['SomeOtherRole'] });
+    const userinfo = { ...baseUserinfo, roles: ['AnotherRole'] };
+    await setupOpenId();
+    const { user, details } = await validate(validTokenSet, userinfo);
+    expect(user).toBe(false);
+    expect(details.message).toBe('You must have the "requiredRole" role to log in.');
+  });
+
+  it('should pass usePKCE true and set code_challenge_method in params when OPENID_USE_PKCE is "true"', async () => {
+    process.env.OPENID_USE_PKCE = 'true';
+    await setupOpenId();
+    const callOptions = OpenIDStrategy.mock.calls[OpenIDStrategy.mock.calls.length - 1][0];
+    expect(callOptions.usePKCE).toBe(true);
+    expect(callOptions.params.code_challenge_method).toBe('S256');
+  });
+
+  it('should pass usePKCE false and not set code_challenge_method in params when OPENID_USE_PKCE is "false"', async () => {
+    process.env.OPENID_USE_PKCE = 'false';
+    await setupOpenId();
+    const callOptions = OpenIDStrategy.mock.calls[OpenIDStrategy.mock.calls.length - 1][0];
+    expect(callOptions.usePKCE).toBe(false);
+    expect(callOptions.params.code_challenge_method).toBeUndefined();
+  });
+
+  it('should default to usePKCE false when OPENID_USE_PKCE is not defined', async () => {
+    delete process.env.OPENID_USE_PKCE;
+    await setupOpenId();
+    const callOptions = OpenIDStrategy.mock.calls[OpenIDStrategy.mock.calls.length - 1][0];
+    expect(callOptions.usePKCE).toBe(false);
+    expect(callOptions.params.code_challenge_method).toBeUndefined();
+  });
+
+  it('should set id_token_signed_response_alg if OPENID_SET_FIRST_SUPPORTED_ALGORITHM is enabled', async () => {
+    process.env.OPENID_SET_FIRST_SUPPORTED_ALGORITHM = 'true';
+    // Override isEnabled so that it returns true.
+    const { isEnabled } = require('~/server/utils');
+    isEnabled.mockReturnValue(true);
+    await setupOpenId();
+    const callOptions = OpenIDStrategy.mock.calls[OpenIDStrategy.mock.calls.length - 1][0];
+    expect(callOptions.client.metadata.id_token_signed_response_alg).toBe('RS256');
+  });
+
+  it('should use access token when OPENID_REQUIRED_ROLE_TOKEN_KIND is set to "access"', async () => {
+    process.env.OPENID_REQUIRED_ROLE_TOKEN_KIND = 'access';
+    // Reinitialize strategy so that the new token kind is used.
+    await setupOpenId();
+    jwtDecode.mockClear();
+    jwtDecode.mockReturnValue({ roles: ['requiredRole'] });
+    const userinfo = { ...baseUserinfo };
+    await validate(validTokenSet, userinfo);
+    expect(jwtDecode).toHaveBeenCalledWith(validTokenSet.access_token);
+  });
+
+  it('should use proxy agent if PROXY is provided', async () => {
+    process.env.PROXY = 'http://fake-proxy.com';
+    await setupOpenId();
+    const { logger } = require('~/config');
+    expect(logger.info).toHaveBeenCalledWith(`[openidStrategy] Using proxy: ${process.env.PROXY}`);
   });
 });

api/typedefs.js

@@ -43,6 +43,60 @@
  * @memberof typedefs
  */
 
+/**
+ * @exports Graph
+ * @typedef {import('@librechat/agents').Graph} Graph
+ * @memberof typedefs
+ */
+
+/**
+ * @exports StandardGraph
+ * @typedef {import('@librechat/agents').StandardGraph} StandardGraph
+ * @memberof typedefs
+ */
+
+/**
+ * @exports EventHandler
+ * @typedef {import('@librechat/agents').EventHandler} EventHandler
+ * @memberof typedefs
+ */
+
+/**
+ * @exports ModelEndData
+ * @typedef {import('@librechat/agents').ModelEndData} ModelEndData
+ * @memberof typedefs
+ */
+
+/**
+ * @exports ToolEndData
+ * @typedef {import('@librechat/agents').ToolEndData} ToolEndData
+ * @memberof typedefs
+ */
+
+/**
+ * @exports ToolEndCallback
+ * @typedef {import('@librechat/agents').ToolEndCallback} ToolEndCallback
+ * @memberof typedefs
+ */
+
+/**
+ * @exports ChatModelStreamHandler
+ * @typedef {import('@librechat/agents').ChatModelStreamHandler} ChatModelStreamHandler
+ * @memberof typedefs
+ */
+
+/**
+ * @exports ContentAggregator
+ * @typedef {import('@librechat/agents').ContentAggregatorResult['aggregateContent']} ContentAggregator
+ * @memberof typedefs
+ */
+
+/**
+ * @exports GraphEvents
+ * @typedef {import('@librechat/agents').GraphEvents} GraphEvents
+ * @memberof typedefs
+ */
+
 /**
  * @exports AgentRun
  * @typedef {import('@librechat/agents').Run} AgentRun
@@ -97,12 +151,6 @@
  * @memberof typedefs
  */
 
-/**
- * @exports ToolEndData
- * @typedef {import('@librechat/agents').ToolEndData} ToolEndData
- * @memberof typedefs
- */
-
 /**
  * @exports BaseMessage
  * @typedef {import('@langchain/core/messages').BaseMessage} BaseMessage

api/utils/tokens.js

@@ -60,10 +60,16 @@ const cohereModels = {
 
 const googleModels = {
   /* Max I/O is combined so we subtract the amount from max response tokens for actual total */
+  gemma: 8196,
+  'gemma-2': 32768,
+  'gemma-3': 32768,
+  'gemma-3-27b': 131072,
   gemini: 30720, // -2048 from max
   'gemini-pro-vision': 12288,
   'gemini-exp': 2000000,
   'gemini-2.5': 1000000, // 1M input tokens, 64k output tokens
+  'gemini-2.5-pro': 1000000,
+  'gemini-2.5-flash': 1000000,
   'gemini-2.0': 2000000,
   'gemini-2.0-flash': 1000000,
   'gemini-2.0-flash-lite': 1000000,
@@ -235,12 +241,15 @@ const modelMaxOutputs = {
   system_default: 1024,
 };
 
+/** Outputs from https://docs.anthropic.com/en/docs/about-claude/models/all-models#model-names */
 const anthropicMaxOutputs = {
   'claude-3-haiku': 4096,
   'claude-3-sonnet': 4096,
   'claude-3-opus': 4096,
   'claude-3.5-sonnet': 8192,
   'claude-3-5-sonnet': 8192,
+  'claude-3.7-sonnet': 128000,
+  'claude-3-7-sonnet': 128000,
 };
 
 const maxOutputTokensMap = {

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@librechat/frontend",
-  "version": "v0.7.7",
+  "version": "v0.7.8",
   "description": "",
   "type": "module",
   "scripts": {
@@ -141,7 +141,7 @@
     "tailwindcss": "^3.4.1",
     "ts-jest": "^29.2.5",
     "typescript": "^5.3.3",
-    "vite": "^6.2.5",
+    "vite": "^6.3.4",
     "vite-plugin-compression2": "^1.3.3",
     "vite-plugin-node-polyfills": "^0.23.0",
     "vite-plugin-pwa": "^0.21.2"

client/src/components/Artifacts/Artifact.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useCallback, useRef, useState } from 'react';
 import throttle from 'lodash/throttle';
 import { visit } from 'unist-util-visit';
 import { useSetRecoilState } from 'recoil';
+import { useLocation } from 'react-router-dom';
 import type { Pluggable } from 'unified';
 import type { Artifact } from '~/common';
 import { useMessageContext, useArtifactContext } from '~/Providers';
@@ -45,6 +46,7 @@ export function Artifact({
   children: React.ReactNode | { props: { children: React.ReactNode } };
   node: unknown;
 }) {
+  const location = useLocation();
   const { messageId } = useMessageContext();
   const { getNextIndex, resetCounter } = useArtifactContext();
   const artifactIndex = useRef(getNextIndex(false)).current;
@@ -86,6 +88,10 @@ export function Artifact({
         lastUpdateTime: now,
       };
 
+      if (!location.pathname.includes('/c/')) {
+        return setArtifact(currentArtifact);
+      }
+
       setArtifacts((prevArtifacts) => {
         if (
           prevArtifacts?.[artifactKey] != null &&
@@ -110,6 +116,7 @@ export function Artifact({
     props.identifier,
     messageId,
     artifactIndex,
+    location.pathname,
   ]);
 
   useEffect(() => {

client/src/components/Artifacts/ArtifactButton.tsx

@@ -1,15 +1,52 @@
-import { useSetRecoilState, useResetRecoilState } from 'recoil';
+import { useEffect, useRef } from 'react';
+import debounce from 'lodash/debounce';
+import { useLocation } from 'react-router-dom';
+import { useRecoilState, useSetRecoilState, useResetRecoilState } from 'recoil';
 import type { Artifact } from '~/common';
 import FilePreview from '~/components/Chat/Input/Files/FilePreview';
+import { getFileType, logger } from '~/utils';
 import { useLocalize } from '~/hooks';
-import { getFileType } from '~/utils';
 import store from '~/store';
 
 const ArtifactButton = ({ artifact }: { artifact: Artifact | null }) => {
   const localize = useLocalize();
-  const setVisible = useSetRecoilState(store.artifactsVisible);
+  const location = useLocation();
+  const setVisible = useSetRecoilState(store.artifactsVisibility);
+  const [artifacts, setArtifacts] = useRecoilState(store.artifactsState);
   const setCurrentArtifactId = useSetRecoilState(store.currentArtifactId);
   const resetCurrentArtifactId = useResetRecoilState(store.currentArtifactId);
+  const [visibleArtifacts, setVisibleArtifacts] = useRecoilState(store.visibleArtifacts);
+
+  const debouncedSetVisibleRef = useRef(
+    debounce((artifactToSet: Artifact) => {
+      logger.log(
+        'artifacts_visibility',
+        'Setting artifact to visible state from Artifact button',
+        artifactToSet,
+      );
+      setVisibleArtifacts((prev) => ({
+        ...prev,
+        [artifactToSet.id]: artifactToSet,
+      }));
+    }, 750),
+  );
+
+  useEffect(() => {
+    if (artifact == null || artifact?.id == null || artifact.id === '') {
+      return;
+    }
+
+    if (!location.pathname.includes('/c/')) {
+      return;
+    }
+
+    const debouncedSetVisible = debouncedSetVisibleRef.current;
+    debouncedSetVisible(artifact);
+    return () => {
+      debouncedSetVisible.cancel();
+    };
+  }, [artifact, location.pathname]);
+
   if (artifact === null || artifact === undefined) {
     return null;
   }
@@ -20,8 +57,14 @@ const ArtifactButton = ({ artifact }: { artifact: Artifact | null }) => {
       <button
         type="button"
         onClick={() => {
+          if (!location.pathname.includes('/c/')) {
+            return;
+          }
           resetCurrentArtifactId();
           setVisible(true);
+          if (artifacts?.[artifact.id] == null) {
+            setArtifacts(visibleArtifacts);
+          }
           setTimeout(() => {
             setCurrentArtifactId(artifact.id);
           }, 15);

client/src/components/Artifacts/Artifacts.tsx

@@ -1,7 +1,7 @@
 import { useRef, useState, useEffect } from 'react';
-import { RefreshCw } from 'lucide-react';
 import { useSetRecoilState } from 'recoil';
 import * as Tabs from '@radix-ui/react-tabs';
+import { ArrowLeft, ChevronLeft, ChevronRight, RefreshCw, X } from 'lucide-react';
 import type { SandpackPreviewRef, CodeEditorRef } from '@codesandbox/sandpack-react';
 import useArtifacts from '~/hooks/Artifacts/useArtifacts';
 import DownloadArtifact from './DownloadArtifact';
@@ -18,7 +18,7 @@ export default function Artifacts() {
   const previewRef = useRef<SandpackPreviewRef>();
   const [isVisible, setIsVisible] = useState(false);
   const [isRefreshing, setIsRefreshing] = useState(false);
-  const setArtifactsVisible = useSetRecoilState(store.artifactsVisible);
+  const setArtifactsVisible = useSetRecoilState(store.artifactsVisibility);
 
   useEffect(() => {
     setIsVisible(true);
@@ -48,37 +48,26 @@ export default function Artifacts() {
     setTimeout(() => setIsRefreshing(false), 750);
   };
 
+  const closeArtifacts = () => {
+    setIsVisible(false);
+    setTimeout(() => setArtifactsVisible(false), 300);
+  };
+
   return (
     <Tabs.Root value={activeTab} onValueChange={setActiveTab} asChild>
       {/* Main Parent */}
       <div className="flex h-full w-full items-center justify-center">
         {/* Main Container */}
         <div
-          className={`flex h-full w-full flex-col overflow-hidden border border-border-medium bg-surface-primary text-xl text-text-primary shadow-xl transition-all duration-300 ease-in-out ${
-            isVisible
-              ? 'translate-x-0 scale-100 opacity-100'
-              : 'translate-x-full scale-95 opacity-0'
+          className={`flex h-full w-full flex-col overflow-hidden border border-border-medium bg-surface-primary text-xl text-text-primary shadow-xl transition-all duration-500 ease-in-out ${
+            isVisible ? 'scale-100 opacity-100 blur-0' : 'scale-105 opacity-0 blur-sm'
           }`}
         >
           {/* Header */}
           <div className="flex items-center justify-between border-b border-border-medium bg-surface-primary-alt p-2">
             <div className="flex items-center">
-              <button
-                className="mr-2 text-text-secondary"
-                onClick={() => {
-                  setIsVisible(false);
-                  setTimeout(() => setArtifactsVisible(false), 300);
-                }}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  fill="currentColor"
-                  viewBox="0 0 256 256"
-                >
-                  <path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z" />
-                </svg>
+              <button className="mr-2 text-text-secondary" onClick={closeArtifacts}>
+                <ArrowLeft className="h-4 w-4" />
               </button>
               <h3 className="truncate text-sm text-text-primary">{currentArtifact.title}</h3>
             </div>
@@ -118,22 +107,8 @@ export default function Artifacts() {
                   {localize('com_ui_code')}
                 </Tabs.Trigger>
               </Tabs.List>
-              <button
-                className="text-text-secondary"
-                onClick={() => {
-                  setIsVisible(false);
-                  setTimeout(() => setArtifactsVisible(false), 300);
-                }}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  fill="currentColor"
-                  viewBox="0 0 256 256"
-                >
-                  <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z" />
-                </svg>
+              <button className="text-text-secondary" onClick={closeArtifacts}>
+                <X className="h-4 w-4" />
               </button>
             </div>
           </div>
@@ -149,29 +124,13 @@ export default function Artifacts() {
           <div className="flex items-center justify-between border-t border-border-medium bg-surface-primary-alt p-2 text-sm text-text-secondary">
             <div className="flex items-center">
               <button onClick={() => cycleArtifact('prev')} className="mr-2 text-text-secondary">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  fill="currentColor"
-                  viewBox="0 0 256 256"
-                >
-                  <path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z" />
-                </svg>
+                <ChevronLeft className="h-4 w-4" />
               </button>
               <span className="text-xs">{`${currentIndex + 1} / ${
                 orderedArtifactIds.length
               }`}</span>
               <button onClick={() => cycleArtifact('next')} className="ml-2 text-text-secondary">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  fill="currentColor"
-                  viewBox="0 0 256 256"
-                >
-                  <path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" />
-                </svg>
+                <ChevronRight className="h-4 w-4" />
               </button>
             </div>
             <div className="flex items-center gap-2">

client/src/components/Artifacts/Code.tsx

@@ -35,7 +35,7 @@ export const CodeMarkdown = memo(
     const [userScrolled, setUserScrolled] = useState(false);
     const currentContent = content;
     const rehypePlugins = [
-      [rehypeKatex, { output: 'mathml' }],
+      [rehypeKatex],
       [
         rehypeHighlight,
         {

client/src/components/Chat/ChatView.tsx

@@ -2,22 +2,33 @@ import { memo, useCallback } from 'react';
 import { useRecoilValue } from 'recoil';
 import { useForm } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
-import { useGetMessagesByConvoId } from 'librechat-data-provider/react-query';
+import { Constants } from 'librechat-data-provider';
 import type { TMessage } from 'librechat-data-provider';
 import type { ChatFormValues } from '~/common';
 import { ChatContext, AddedChatContext, useFileMapContext, ChatFormProvider } from '~/Providers';
 import { useChatHelpers, useAddedResponse, useSSE } from '~/hooks';
 import ConversationStarters from './Input/ConversationStarters';
+import { useGetMessagesByConvoId } from '~/data-provider';
 import MessagesView from './Messages/MessagesView';
 import { Spinner } from '~/components/svg';
 import Presentation from './Presentation';
+import { buildTree, cn } from '~/utils';
 import ChatForm from './Input/ChatForm';
-import { buildTree } from '~/utils';
 import Landing from './Landing';
 import Header from './Header';
 import Footer from './Footer';
 import store from '~/store';
 
+function LoadingSpinner() {
+  return (
+    <div className="relative flex-1 overflow-hidden overflow-y-auto">
+      <div className="relative flex h-full items-center justify-center">
+        <Spinner className="text-text-primary" />
+      </div>
+    </div>
+  );
+}
+
 function ChatView({ index = 0 }: { index?: number }) {
   const { conversationId } = useParams();
   const rootSubmission = useRecoilValue(store.submissionByIndex(index));
@@ -48,16 +59,15 @@ function ChatView({ index = 0 }: { index?: number }) {
   });
 
   let content: JSX.Element | null | undefined;
-  const isLandingPage = !messagesTree || messagesTree.length === 0;
+  const isLandingPage =
+    (!messagesTree || messagesTree.length === 0) &&
+    (conversationId === Constants.NEW_CONVO || !conversationId);
+  const isNavigating = (!messagesTree || messagesTree.length === 0) && conversationId != null;
 
-  if (isLoading && conversationId !== 'new') {
-    content = (
-      <div className="relative flex-1 overflow-hidden overflow-y-auto">
-        <div className="relative flex h-full items-center justify-center">
-          <Spinner className="text-text-primary" />
-        </div>
-      </div>
-    );
+  if (isLoading && conversationId !== Constants.NEW_CONVO) {
+    content = <LoadingSpinner />;
+  } else if ((isLoading || isNavigating) && !isLandingPage) {
+    content = <LoadingSpinner />;
   } else if (!isLandingPage) {
     content = <MessagesView messagesTree={messagesTree} />;
   } else {
@@ -71,27 +81,28 @@ function ChatView({ index = 0 }: { index?: number }) {
           <Presentation>
             <div className="flex h-full w-full flex-col">
               {!isLoading && <Header />}
-
-              {isLandingPage ? (
-                <>
-                  <div className="flex flex-1 flex-col items-center justify-end sm:justify-center">
-                    {content}
-                    <div className="w-full max-w-3xl transition-all duration-200 xl:max-w-4xl">
-                      <ChatForm index={index} />
-                      <ConversationStarters />
-                    </div>
-                  </div>
-                  <Footer />
-                </>
-              ) : (
-                <div className="flex h-full flex-col overflow-y-auto">
+              <>
+                <div
+                  className={cn(
+                    'flex flex-col',
+                    isLandingPage
+                      ? 'flex-1 items-center justify-end sm:justify-center'
+                      : 'h-full overflow-y-auto',
+                  )}
+                >
                   {content}
-                  <div className="w-full">
+                  <div
+                    className={cn(
+                      'w-full',
+                      isLandingPage && 'max-w-3xl transition-all duration-200 xl:max-w-4xl',
+                    )}
+                  >
                     <ChatForm index={index} />
-                    <Footer />
+                    {isLandingPage ? <ConversationStarters /> : <Footer />}
                   </div>
                 </div>
-              )}
+                {isLandingPage && <Footer />}
+              </>
             </div>
           </Presentation>
         </AddedChatContext.Provider>

client/src/components/Chat/ExportAndShareMenu.tsx

@@ -44,15 +44,6 @@ export default function ExportAndShareMenu({
   };
 
   const dropdownItems: t.MenuItemProps[] = [
-    {
-      label: localize('com_endpoint_export'),
-      onClick: exportHandler,
-      icon: <Upload className="icon-md mr-2 text-text-secondary" />,
-      /** NOTE: THE FOLLOWING PROPS ARE REQUIRED FOR MENU ITEMS THAT OPEN DIALOGS */
-      hideOnClick: false,
-      ref: exportButtonRef,
-      render: (props) => <button {...props} />,
-    },
     {
       label: localize('com_ui_share'),
       onClick: shareHandler,
@@ -63,6 +54,15 @@ export default function ExportAndShareMenu({
       ref: shareButtonRef,
       render: (props) => <button {...props} />,
     },
+    {
+      label: localize('com_endpoint_export'),
+      onClick: exportHandler,
+      icon: <Upload className="icon-md mr-2 text-text-secondary" />,
+      /** NOTE: THE FOLLOWING PROPS ARE REQUIRED FOR MENU ITEMS THAT OPEN DIALOGS */
+      hideOnClick: false,
+      ref: exportButtonRef,
+      render: (props) => <button {...props} />,
+    },
   ];
 
   return (
@@ -70,6 +70,7 @@ export default function ExportAndShareMenu({
       <DropdownPopup
         menuId={menuId}
         focusLoop={true}
+        unmountOnHide={true}
         isOpen={isPopoverActive}
         setIsOpen={setIsPopoverActive}
         trigger={
@@ -81,7 +82,7 @@ export default function ExportAndShareMenu({
                 aria-label="Export options"
                 className="inline-flex size-10 flex-shrink-0 items-center justify-center rounded-xl border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
               >
-                <Upload
+                <Share2
                   className="icon-md text-text-secondary"
                   aria-hidden="true"
                   focusable="false"

client/src/components/Chat/Header.tsx

@@ -36,7 +36,7 @@ export default function Header() {
   return (
     <div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white p-2 font-semibold text-text-primary dark:bg-gray-800">
       <div className="hide-scrollbar flex w-full items-center justify-between gap-2 overflow-x-auto">
-        <div className="mx-2 flex items-center gap-2">
+        <div className="mx-1 flex items-center gap-2">
           {!navVisible && <OpenSidebar setNavVisible={setNavVisible} />}
           {!navVisible && <HeaderNewChat />}
           {<ModelSelector startupConfig={startupConfig} />}

client/src/components/Chat/Input/ChatForm.tsx

@@ -15,6 +15,7 @@ import {
   useHandleKeyUp,
   useQueryParams,
   useSubmitMessage,
+  useFocusChatEffect,
 } from '~/hooks';
 import { mainTextareaId, BadgeItem } from '~/common';
 import AttachFileChat from './Files/AttachFileChat';
@@ -36,6 +37,7 @@ import store from '~/store';
 const ChatForm = memo(({ index = 0 }: { index?: number }) => {
   const submitButtonRef = useRef<HTMLButtonElement>(null);
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  useFocusChatEffect(textAreaRef);
 
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [, setIsScrollable] = useState(false);
@@ -43,7 +45,6 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
   const [isTextAreaFocused, setIsTextAreaFocused] = useState(false);
   const [backupBadges, setBackupBadges] = useState<Pick<BadgeItem, 'id'>[]>([]);
 
-  const search = useRecoilValue(store.search);
   const SpeechToText = useRecoilValue(store.speechToText);
   const TextToSpeech = useRecoilValue(store.textToSpeech);
   const chatDirection = useRecoilValue(store.chatDirection);
@@ -107,6 +108,10 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
   );
 
   const handleContainerClick = useCallback(() => {
+    /** Check if the device is a touchscreen */
+    if (window.matchMedia?.('(pointer: coarse)').matches) {
+      return;
+    }
     textAreaRef.current?.focus();
   }, []);
 
@@ -125,13 +130,20 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
   });
 
   const { submitMessage, submitPrompt } = useSubmitMessage();
+
   const handleKeyUp = useHandleKeyUp({
     index,
     textAreaRef,
     setShowPlusPopover,
     setShowMentionPopover,
   });
-  const { handlePaste, handleKeyDown, handleCompositionStart, handleCompositionEnd } = useTextarea({
+  const {
+    isNotAppendable,
+    handlePaste,
+    handleKeyDown,
+    handleCompositionStart,
+    handleCompositionEnd,
+  } = useTextarea({
     textAreaRef,
     submitButtonRef,
     setIsScrollable,
@@ -151,12 +163,6 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
 
   const textValue = useWatch({ control: methods.control, name: 'text' });
 
-  useEffect(() => {
-    if (!search.isSearching && textAreaRef.current && !disableInputs) {
-      textAreaRef.current.focus();
-    }
-  }, [search.isSearching, disableInputs]);
-
   useEffect(() => {
     if (textAreaRef.current) {
       const style = window.getComputedStyle(textAreaRef.current);
@@ -256,7 +262,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
                     ref(e);
                     (textAreaRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = e;
                   }}
-                  disabled={disableInputs}
+                  disabled={disableInputs || isNotAppendable}
                   onPaste={handlePaste}
                   onKeyDown={handleKeyDown}
                   onKeyUp={handleKeyUp}
@@ -276,7 +282,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
                   className={cn(
                     baseClasses,
                     removeFocusRings,
-                    'transition-[max-height] duration-200',
+                    'transition-[max-height] duration-200 disabled:cursor-not-allowed',
                   )}
                 />
                 <div className="flex flex-col items-start justify-start pt-1.5">
@@ -311,7 +317,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
                   methods={methods}
                   ask={submitMessage}
                   textAreaRef={textAreaRef}
-                  disabled={disableInputs}
+                  disabled={disableInputs || isNotAppendable}
                   isSubmitting={isSubmitting}
                 />
               )}
@@ -323,7 +329,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
                     <SendButton
                       ref={submitButtonRef}
                       control={methods.control}
-                      disabled={filesLoading || isSubmitting || disableInputs}
+                      disabled={filesLoading || isSubmitting || disableInputs || isNotAppendable}
                     />
                   )
                 )}

client/src/components/Chat/Input/CollapseChat.tsx

@@ -41,9 +41,9 @@ const CollapseChat = ({
             )}
           >
             {isCollapsed ? (
-              <ChevronDown className="h-full w-full" />
-            ) : (
               <ChevronUp className="h-full w-full" />
+            ) : (
+              <ChevronDown className="h-full w-full" />
             )}
           </button>
         }

client/src/components/Chat/Input/Files/AttachFileMenu.tsx

@@ -119,6 +119,7 @@ const AttachFile = ({ disabled }: AttachFileProps) => {
         isOpen={isPopoverActive}
         setIsOpen={setIsPopoverActive}
         modal={true}
+        unmountOnHide={true}
         trigger={menuTrigger}
         items={dropdownItems}
         iconClassName="mr-0"

client/src/components/Chat/Input/MCPSelect.tsx

@@ -31,7 +31,8 @@ function MCPSelect({ conversationId }: { conversationId?: string | null }) {
     select: (data) => {
       const serverNames = new Set<string>();
       data.forEach((tool) => {
-        if (tool.pluginKey.includes(Constants.mcp_delimiter)) {
+        const isMCP = tool.pluginKey.includes(Constants.mcp_delimiter);
+        if (isMCP && tool.chatMenu !== false) {
           const parts = tool.pluginKey.split(Constants.mcp_delimiter);
           serverNames.add(parts[parts.length - 1]);
         }

client/src/components/Chat/Input/PopoverButtons.tsx

@@ -44,7 +44,7 @@ export default function PopoverButtons({
   const endpoint = overrideEndpoint ?? endpointType ?? _endpoint ?? '';
   const model = overrideModel ?? _model;
 
-  const isGenerativeModel = model?.toLowerCase().includes('gemini') ?? false;
+  const isGenerativeModel = /gemini|learnlm|gemma/.test(model ?? '') ?? false;
   const isChatModel = (!isGenerativeModel && model?.toLowerCase().includes('chat')) ?? false;
   const isTextModel = !isGenerativeModel && !isChatModel && /code|text/.test(model ?? '');
 
@@ -133,7 +133,6 @@ export default function PopoverButtons({
           </Button>
         ))}
       </div>
-      {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
       {disabled ? null : (
         <div className="flex w-[150px] items-center justify-end">
           {additionalButtons[settingsView].map((button, index) => (

client/src/components/Chat/Input/PromptsCommand.tsx

@@ -201,7 +201,7 @@ function PromptsCommand({
         <div className="popover border-token-border-light rounded-2xl border bg-surface-tertiary-alt p-2 shadow-lg">
           <input
             // The user expects focus to transition to the input field when the popover is opened
-
+            // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus
             ref={inputRef}
             placeholder={localize('com_ui_command_usage_placeholder')}

client/src/components/Chat/Landing.tsx

@@ -149,7 +149,7 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
     >
       <div ref={contentRef} className="flex flex-col items-center gap-0 p-2">
         <div
-          className={`flex ${textHasMultipleLines ? 'flex-col' : 'flex-col md:flex-row'} items-center justify-center gap-4`}
+          className={`flex ${textHasMultipleLines ? 'flex-col' : 'flex-col md:flex-row'} items-center justify-center gap-2`}
         >
           <div className={`relative size-10 justify-center ${textHasMultipleLines ? 'mb-2' : ''}`}>
             <ConvoIcon

client/src/components/Chat/Menus/BookmarkMenu.tsx

@@ -160,6 +160,7 @@ const BookmarkMenu: FC = () => {
         focusLoop={true}
         menuId={menuId}
         isOpen={isMenuOpen}
+        unmountOnHide={true}
         setIsOpen={setIsMenuOpen}
         keyPrefix={`${conversationId}-bookmark-`}
         trigger={

client/src/components/Chat/Menus/HeaderNewChat.tsx

@@ -20,6 +20,7 @@ export default function HeaderNewChat() {
       [QueryKeys.messages, conversation?.conversationId ?? Constants.NEW_CONVO],
       [],
     );
+    queryClient.invalidateQueries([QueryKeys.messages]);
     newConversation();
   };
 

client/src/components/Chat/Messages/Content/EditMessage.tsx

@@ -113,9 +113,9 @@ const EditMessage = ({
         messages.map((msg) =>
           msg.messageId === messageId
             ? {
-              ...msg,
-              text: data.text,
-            }
+                ...msg,
+                text: data.text,
+              }
             : msg,
         ),
       );

client/src/components/Chat/Messages/Content/Markdown.tsx

@@ -184,7 +184,7 @@ const Markdown = memo(({ content = '', isLatestMessage }: TContentProps) => {
 
   const rehypePlugins = useMemo(
     () => [
-      [rehypeKatex, { output: 'mathml' }],
+      [rehypeKatex],
       [
         rehypeHighlight,
         {

client/src/components/Chat/Messages/Content/MarkdownLite.tsx

@@ -13,7 +13,7 @@ import { langSubset } from '~/utils';
 const MarkdownLite = memo(
   ({ content = '', codeExecution = true }: { content?: string; codeExecution?: boolean }) => {
     const rehypePlugins: PluggableList = [
-      [rehypeKatex, { output: 'mathml' }],
+      [rehypeKatex],
       [
         rehypeHighlight,
         {

client/src/components/Chat/Messages/Content/Parts/Text.tsx

@@ -35,7 +35,7 @@ const TextPart = memo(({ text, isCreatedByUser, showCursor }: TextPartProps) =>
     } else {
       return <>{text}</>;
     }
-  }, [isCreatedByUser, enableUserMsgMarkdown, text, showCursorState, isLatestMessage]);
+  }, [isCreatedByUser, enableUserMsgMarkdown, text, isLatestMessage]);
 
   return (
     <div

client/src/components/Chat/Messages/MessagesView.tsx

@@ -14,10 +14,9 @@ export default function MessagesView({
   messagesTree?: TMessage[] | null;
 }) {
   const localize = useLocalize();
-  const scrollButtonPreference = useRecoilValue(store.showScrollButton);
-  const maximizeChatSpace = useRecoilValue(store.maximizeChatSpace);
   const fontSize = useRecoilValue(store.fontSize);
   const { screenshotTargetRef } = useScreenshot();
+  const scrollButtonPreference = useRecoilValue(store.showScrollButton);
   const [currentEditId, setCurrentEditId] = useState<number | string | null>(-1);
 
   const {

client/src/components/Chat/Messages/SearchButtons.tsx

@@ -13,7 +13,7 @@ export default function SearchButtons({ message }: { message: TMessage }) {
   const localize = useLocalize();
   const queryClient = useQueryClient();
   const search = useRecoilValue(store.search);
-  const { navigateWithLastTools } = useNavigateToConvo();
+  const { navigateToConvo } = useNavigateToConvo();
   const conversationId = message.conversationId ?? '';
 
   const clickHandler = async (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -39,14 +39,13 @@ export default function SearchButtons({ message }: { message: TMessage }) {
     }
 
     document.title = title;
-    navigateWithLastTools(
+    navigateToConvo(
       cachedConvo ??
         ({
           conversationId,
           title,
         } as TConversation),
-      true,
-      true,
+      { resetLatestMessage: true },
     );
   };
 

client/src/components/Chat/Presentation.tsx

@@ -12,7 +12,7 @@ import store from '~/store';
 
 export default function Presentation({ children }: { children: React.ReactNode }) {
   const artifacts = useRecoilValue(store.artifactsState);
-  const artifactsVisible = useRecoilValue(store.artifactsVisible);
+  const artifactsVisibility = useRecoilValue(store.artifactsVisibility);
 
   const setFilesToDelete = useSetFilesToDelete();
 
@@ -64,7 +64,7 @@ export default function Presentation({ children }: { children: React.ReactNode }
         fullPanelCollapse={fullCollapse}
         defaultCollapsed={defaultCollapsed}
         artifacts={
-          artifactsVisible === true && Object.keys(artifacts ?? {}).length > 0 ? (
+          artifactsVisibility === true && Object.keys(artifacts ?? {}).length > 0 ? (
             <EditorProvider>
               <Artifacts />
             </EditorProvider>

client/src/components/Conversations/Conversations.tsx

@@ -220,6 +220,7 @@ const Conversations: FC<ConversationsProps> = ({
                 role="list"
                 aria-label="Conversations"
                 onRowsRendered={handleRowsRendered}
+                tabIndex={-1}
               />
             )}
           </AutoSizer>

client/src/components/Conversations/Convo.tsx

@@ -31,11 +31,11 @@ export default function Conversation({
   const params = useParams();
   const localize = useLocalize();
   const { showToast } = useToastContext();
+  const { navigateToConvo } = useNavigateToConvo();
+  const { data: endpointsConfig } = useGetEndpointsQuery();
   const currentConvoId = useMemo(() => params.conversationId, [params.conversationId]);
   const updateConvoMutation = useUpdateConversationMutation(currentConvoId ?? '');
   const activeConvos = useRecoilValue(store.allConversationsSelector);
-  const { data: endpointsConfig } = useGetEndpointsQuery();
-  const { navigateWithLastTools } = useNavigateToConvo();
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
   const { conversationId, title = '' } = conversation;
 
@@ -118,10 +118,10 @@ export default function Conversation({
       document.title = title;
     }
 
-    navigateWithLastTools(
-      conversation,
-      !(conversationId ?? '') || conversationId === Constants.NEW_CONVO,
-    );
+    navigateToConvo(conversation, {
+      currentConvoId,
+      resetLatestMessage: !(conversationId ?? '') || conversationId === Constants.NEW_CONVO,
+    });
   };
 
   const convoOptionsProps = {

client/src/components/Conversations/ConvoLink.tsx

@@ -41,7 +41,7 @@ const ConvoLink: React.FC<ConvoLinkProps> = ({
           onRename();
         }}
         role="button"
-        aria-label={isSmallScreen ? undefined : localize('com_ui_double_click_to_rename')}
+        aria-label={isSmallScreen ? undefined : title || localize('com_ui_untitled')}
       >
         {title || localize('com_ui_untitled')}
       </div>

client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx

@@ -235,10 +235,11 @@ function ConvoOptions({
         <DeleteButton
           title={title ?? ''}
           retainView={retainView}
-          conversationId={conversationId ?? ''}
-          showDeleteDialog={showDeleteDialog}
-          setShowDeleteDialog={setShowDeleteDialog}
           triggerRef={deleteButtonRef}
+          setMenuOpen={setIsPopoverActive}
+          showDeleteDialog={showDeleteDialog}
+          conversationId={conversationId ?? ''}
+          setShowDeleteDialog={setShowDeleteDialog}
         />
       )}
     </>

client/src/components/Conversations/ConvoOptions/DeleteButton.tsx

@@ -4,13 +4,12 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useParams, useNavigate } from 'react-router-dom';
 import type { TMessage } from 'librechat-data-provider';
 import {
-  Label,
-  OGDialog,
-  OGDialogTitle,
-  OGDialogContent,
-  OGDialogHeader,
   Button,
   Spinner,
+  OGDialog,
+  OGDialogTitle,
+  OGDialogHeader,
+  OGDialogContent,
 } from '~/components';
 import { useDeleteConversationMutation } from '~/data-provider';
 import { useLocalize, useNewConvo } from '~/hooks';
@@ -24,14 +23,17 @@ type DeleteButtonProps = {
   showDeleteDialog?: boolean;
   setShowDeleteDialog?: (value: boolean) => void;
   triggerRef?: React.RefObject<HTMLButtonElement>;
+  setMenuOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export function DeleteConversationDialog({
   setShowDeleteDialog,
   conversationId,
+  setMenuOpen,
   retainView,
   title,
 }: {
+  setMenuOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   setShowDeleteDialog: (value: boolean) => void;
   conversationId: string;
   retainView: () => void;
@@ -51,6 +53,7 @@ export function DeleteConversationDialog({
         newConversation();
         navigate('/c/new', { replace: true });
       }
+      setMenuOpen?.(false);
       retainView();
     },
     onError: () => {
@@ -98,6 +101,7 @@ export default function DeleteButton({
   conversationId,
   retainView,
   title,
+  setMenuOpen,
   showDeleteDialog,
   setShowDeleteDialog,
   triggerRef,
@@ -115,6 +119,7 @@ export default function DeleteButton({
       <DeleteConversationDialog
         setShowDeleteDialog={setShowDeleteDialog}
         conversationId={conversationId}
+        setMenuOpen={setMenuOpen}
         retainView={retainView}
         title={title}
       />

client/src/components/Conversations/Fork.tsx

@@ -1,21 +1,13 @@
 import React, { useState, useRef } from 'react';
 import { useRecoilState } from 'recoil';
+import * as Ariakit from '@ariakit/react';
+import { VisuallyHidden } from '@ariakit/react';
 import { GitFork, InfoIcon } from 'lucide-react';
-import * as Popover from '@radix-ui/react-popover';
 import { ForkOptions } from 'librechat-data-provider';
 import { GitCommit, GitBranchPlus, ListTree } from 'lucide-react';
-import {
-  Checkbox,
-  HoverCard,
-  HoverCardTrigger,
-  HoverCardPortal,
-  HoverCardContent,
-} from '~/components/ui';
-import OptionHover from '~/components/SidePanel/Parameters/OptionHover';
 import { TranslationKeys, useLocalize, useNavigateToConvo } from '~/hooks';
 import { useForkConvoMutation } from '~/data-provider';
 import { useToastContext } from '~/Providers';
-import { ESide } from '~/common';
 import { cn } from '~/utils';
 import store from '~/store';
 
@@ -24,11 +16,11 @@ interface PopoverButtonProps {
   setting: ForkOptions;
   onClick: (setting: ForkOptions) => void;
   setActiveSetting: React.Dispatch<React.SetStateAction<TranslationKeys>>;
-  sideOffset?: number;
   timeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;
   hoverInfo?: React.ReactNode | string;
   hoverTitle?: React.ReactNode | string;
   hoverDescription?: React.ReactNode | string;
+  label: string;
 }
 
 const optionLabels: Record<ForkOptions, TranslationKeys> = {
@@ -38,57 +30,84 @@ const optionLabels: Record<ForkOptions, TranslationKeys> = {
   [ForkOptions.DEFAULT]: 'com_ui_fork_from_message',
 };
 
+const chevronDown = (
+  <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+    />
+  </svg>
+);
+
 const PopoverButton: React.FC<PopoverButtonProps> = ({
   children,
   setting,
   onClick,
   setActiveSetting,
-  sideOffset = 30,
   timeoutRef,
   hoverInfo,
   hoverTitle,
   hoverDescription,
+  label,
 }) => {
+  const localize = useLocalize();
   return (
-    <HoverCard openDelay={200}>
-      <Popover.Close
-        onClick={() => onClick(setting)}
-        onMouseEnter={() => {
-          if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = null;
+    <Ariakit.HovercardProvider>
+      <div className="flex flex-col items-center">
+        <Ariakit.HovercardAnchor
+          render={
+            <Ariakit.Button
+              onClick={() => onClick(setting)}
+              onMouseEnter={() => {
+                if (timeoutRef.current) {
+                  clearTimeout(timeoutRef.current);
+                  timeoutRef.current = null;
+                }
+                setActiveSetting(optionLabels[setting]);
+              }}
+              onMouseLeave={() => {
+                if (timeoutRef.current) {
+                  clearTimeout(timeoutRef.current);
+                }
+                timeoutRef.current = setTimeout(() => {
+                  setActiveSetting(optionLabels[ForkOptions.DEFAULT]);
+                }, 175);
+              }}
+              className="mx-1 max-w-14 flex-1 rounded-lg border-2 border-border-medium bg-surface-secondary text-text-secondary transition duration-300 ease-in-out hover:border-border-xheavy hover:bg-surface-hover hover:text-text-primary"
+              aria-label={label}
+            >
+              {children}
+              <VisuallyHidden>{label}</VisuallyHidden>
+            </Ariakit.Button>
           }
-          setActiveSetting(optionLabels[setting]);
-        }}
-        onMouseLeave={() => {
-          if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-          }
-          timeoutRef.current = setTimeout(() => {
-            setActiveSetting(optionLabels[ForkOptions.DEFAULT]);
-          }, 175);
-        }}
-        className="mx-1 max-w-14 flex-1 rounded-lg border-2 bg-white text-gray-700 transition duration-300 ease-in-out hover:bg-gray-200 hover:text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-gray-100"
-        type="button"
-      >
-        {children}
-      </Popover.Close>
-      {((hoverInfo != null && hoverInfo !== '') ||
-        (hoverTitle != null && hoverTitle !== '') ||
-        (hoverDescription != null && hoverDescription !== '')) && (
-        <HoverCardPortal>
-          <HoverCardContent side="right" className="z-[999] w-80 dark:bg-gray-700" sideOffset={sideOffset}>
+        />
+        <Ariakit.HovercardDisclosure className="rounded-full text-text-secondary focus:outline-none focus:ring-2 focus:ring-ring">
+          <VisuallyHidden>
+            {localize('com_ui_fork_more_details_about', { 0: label })}
+          </VisuallyHidden>
+          {chevronDown}
+        </Ariakit.HovercardDisclosure>
+        {((hoverInfo != null && hoverInfo !== '') ||
+          (hoverTitle != null && hoverTitle !== '') ||
+          (hoverDescription != null && hoverDescription !== '')) && (
+          <Ariakit.Hovercard
+            gutter={16}
+            className="z-[999] w-80 rounded-md border border-border-medium bg-surface-secondary p-4 text-text-primary shadow-md"
+            portal={true}
+            unmountOnHide={true}
+          >
             <div className="space-y-2">
-              <p className="flex flex-col gap-2 text-sm text-gray-600 dark:text-gray-300">
+              <p className="flex flex-col gap-2 text-sm text-text-secondary">
                 {hoverInfo && hoverInfo}
                 {hoverTitle && <span className="flex flex-wrap gap-1 font-bold">{hoverTitle}</span>}
                 {hoverDescription && hoverDescription}
               </p>
             </div>
-          </HoverCardContent>
-        </HoverCardPortal>
-      )}
-    </HoverCard>
+          </Ariakit.Hovercard>
+        )}
+      </div>
+    </Ariakit.HovercardProvider>
   );
 };
 
@@ -114,6 +133,9 @@ export default function Fork({
   const [activeSetting, setActiveSetting] = useState(optionLabels.default);
   const [splitAtTarget, setSplitAtTarget] = useRecoilState(store.splitAtTarget);
   const [rememberGlobal, setRememberGlobal] = useRecoilState(store.rememberDefaultFork);
+  const popoverStore = Ariakit.usePopoverStore({
+    placement: 'top',
+  });
   const forkConvo = useForkConvoMutation({
     onSuccess: (data) => {
       navigateToConvo(data.conversation);
@@ -157,173 +179,230 @@ export default function Fork({
   };
 
   return (
-    <Popover.Root>
-      <Popover.Trigger asChild>
-        <button
-          className={cn(
-            'hover-button active rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible ',
-            'data-[state=open]:active focus:opacity-100 data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 data-[state=open]:dark:bg-gray-700  data-[state=open]:dark:text-gray-200',
-            !isLast ? 'data-[state=open]:opacity-100 md:opacity-0 md:group-hover:opacity-100' : '',
-          )}
-          onClick={(e) => {
-            if (rememberGlobal) {
-              e.preventDefault();
-              forkConvo.mutate({
-                messageId,
-                splitAtTarget,
-                conversationId,
-                option: forkSetting,
-                latestMessageId,
-              });
-            }
-          }}
-          type="button"
-          title={localize('com_ui_fork')}
-        >
-          <GitFork className="h-4 w-4 hover:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" />
-        </button>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <div dir="ltr">
-          <Popover.Content
-            side="top"
-            role="menu"
-            className="bg-token-surface-primary flex min-h-[120px] min-w-[215px] flex-col gap-3 overflow-hidden rounded-lg bg-white p-2 px-3 shadow-lg dark:bg-gray-700"
-            style={{ outline: 'none', pointerEvents: 'auto', boxSizing: 'border-box' }}
-            tabIndex={-1}
-            sideOffset={5}
-            align="center"
+    <>
+      <Ariakit.PopoverAnchor
+        store={popoverStore}
+        render={
+          <button
+            className={cn(
+              'hover-button active rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible',
+              'data-[state=open]:active focus:opacity-100 data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 data-[state=open]:dark:bg-gray-700 data-[state=open]:dark:text-gray-200',
+              !isLast
+                ? 'data-[state=open]:opacity-100 md:opacity-0 md:group-hover:opacity-100'
+                : '',
+            )}
+            onClick={(e) => {
+              if (rememberGlobal) {
+                e.preventDefault();
+                forkConvo.mutate({
+                  messageId,
+                  splitAtTarget,
+                  conversationId,
+                  option: forkSetting,
+                  latestMessageId,
+                });
+              } else {
+                popoverStore.toggle();
+              }
+            }}
+            type="button"
+            aria-label={localize('com_ui_fork')}
           >
-            <div className="flex h-6 w-full items-center justify-center text-sm dark:text-gray-200">
-              {localize(activeSetting )}
-              <HoverCard openDelay={50}>
-                <HoverCardTrigger asChild>
-                  <InfoIcon className="ml-auto flex h-4 w-4 gap-2 text-gray-500 dark:text-white/50" />
-                </HoverCardTrigger>
-                <HoverCardPortal>
-                  <HoverCardContent
-                    side="right"
-                    className="z-[999] w-80 dark:bg-gray-700"
-                    sideOffset={19}
+            <GitFork className="h-4 w-4 hover:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" />
+          </button>
+        }
+      />
+      <Ariakit.Popover
+        store={popoverStore}
+        gutter={5}
+        className="flex min-h-[120px] min-w-[215px] flex-col gap-3 overflow-hidden rounded-lg border border-border-heavy bg-surface-secondary p-2 px-3 shadow-lg"
+        style={{
+          outline: 'none',
+          pointerEvents: 'auto',
+          zIndex: 50,
+        }}
+        portal={true}
+        unmountOnHide={true}
+      >
+        <div className="flex h-8 w-full items-center justify-center text-sm text-text-primary">
+          {localize(activeSetting)}
+          <Ariakit.HovercardProvider>
+            <div className="ml-auto flex h-6 w-6 items-center justify-center gap-1">
+              <Ariakit.HovercardAnchor
+                render={
+                  <button
+                    className="flex h-5 w-5 items-center rounded-full text-text-secondary"
+                    aria-label={localize('com_ui_fork_info_button_label')}
                   >
-                    <div className="flex flex-col gap-2 space-y-2 text-sm text-gray-600 dark:text-gray-300">
-                      <span>{localize('com_ui_fork_info_1')}</span>
-                      <span>{localize('com_ui_fork_info_2')}</span>
-                      <span>
-                        {localize('com_ui_fork_info_3', {
-                          0: localize('com_ui_fork_split_target'),
-                        })}
-                      </span>
-                    </div>
-                  </HoverCardContent>
-                </HoverCardPortal>
-              </HoverCard>
-            </div>
-            <div className="flex h-full w-full items-center justify-center gap-1">
-              <PopoverButton
-                sideOffset={155}
-                setActiveSetting={setActiveSetting}
-                timeoutRef={timeoutRef}
-                onClick={onClick}
-                setting={ForkOptions.DIRECT_PATH}
-                hoverTitle={
-                  <>
-                    <GitCommit className="h-5 w-5 rotate-90" />
-                    {localize(optionLabels[ForkOptions.DIRECT_PATH])}
-                  </>
+                    <InfoIcon />
+                  </button>
                 }
-                hoverDescription={localize('com_ui_fork_info_visible')}
-              >
-                <HoverCardTrigger asChild>
-                  <GitCommit className="h-full w-full rotate-90 p-2" />
-                </HoverCardTrigger>
-              </PopoverButton>
-              <PopoverButton
-                sideOffset={90}
-                setActiveSetting={setActiveSetting}
-                timeoutRef={timeoutRef}
-                onClick={onClick}
-                setting={ForkOptions.INCLUDE_BRANCHES}
-                hoverTitle={
-                  <>
-                    <GitBranchPlus className="h-4 w-4 rotate-180" />
-                    {localize(optionLabels[ForkOptions.INCLUDE_BRANCHES])}
-                  </>
-                }
-                hoverDescription={localize('com_ui_fork_info_branches')}
-              >
-                <HoverCardTrigger asChild>
-                  <GitBranchPlus className="h-full w-full rotate-180 p-2" />
-                </HoverCardTrigger>
-              </PopoverButton>
-              <PopoverButton
-                sideOffset={25}
-                setActiveSetting={setActiveSetting}
-                timeoutRef={timeoutRef}
-                onClick={onClick}
-                setting={ForkOptions.TARGET_LEVEL}
-                hoverTitle={
-                  <>
-                    <ListTree className="h-5 w-5" />
-                    {`${localize(
-                      optionLabels[ForkOptions.TARGET_LEVEL],
-                    )} (${localize('com_endpoint_default')})`}
-                  </>
-                }
-                hoverDescription={localize('com_ui_fork_info_target')}
-              >
-                <HoverCardTrigger asChild>
-                  <ListTree className="h-full w-full p-2" />
-                </HoverCardTrigger>
-              </PopoverButton>
-            </div>
-            <HoverCard openDelay={50}>
-              <HoverCardTrigger asChild>
-                <div className="flex h-6 w-full items-center justify-start text-sm dark:text-gray-300 dark:hover:text-gray-200">
-                  <Checkbox
-                    checked={splitAtTarget}
-                    onCheckedChange={(checked: boolean) => setSplitAtTarget(checked)}
-                    className="m-2 transition duration-300 ease-in-out"
-                  />
-                  {localize('com_ui_fork_split_target')}
-                </div>
-              </HoverCardTrigger>
-              <OptionHover
-                side={ESide.Right}
-                description="com_ui_fork_info_start"
-                langCode={true}
-                sideOffset={20}
               />
-            </HoverCard>
-            <HoverCard openDelay={50}>
-              <HoverCardTrigger asChild>
-                <div className="flex h-6 w-full items-center justify-start text-sm dark:text-gray-300 dark:hover:text-gray-200">
-                  <Checkbox
+              <Ariakit.HovercardDisclosure className="rounded-full text-text-secondary focus:outline-none focus:ring-2 focus:ring-ring">
+                <VisuallyHidden>{localize('com_ui_fork_more_info_options')}</VisuallyHidden>
+                {chevronDown}
+              </Ariakit.HovercardDisclosure>
+            </div>
+            <Ariakit.Hovercard
+              gutter={19}
+              className="z-[999] w-80 rounded-md border border-border-medium bg-surface-secondary p-4 text-text-primary shadow-md"
+              portal={true}
+              unmountOnHide={true}
+            >
+              <div className="flex flex-col gap-2 space-y-2 text-sm text-text-secondary">
+                <span>{localize('com_ui_fork_info_1')}</span>
+                <span>{localize('com_ui_fork_info_2')}</span>
+                <span>
+                  {localize('com_ui_fork_info_3', {
+                    0: localize('com_ui_fork_split_target'),
+                  })}
+                </span>
+              </div>
+            </Ariakit.Hovercard>
+          </Ariakit.HovercardProvider>
+        </div>
+        <div className="flex h-full w-full items-center justify-center gap-1">
+          <PopoverButton
+            setActiveSetting={setActiveSetting}
+            timeoutRef={timeoutRef}
+            onClick={onClick}
+            setting={ForkOptions.DIRECT_PATH}
+            label={localize(optionLabels[ForkOptions.DIRECT_PATH])}
+            hoverTitle={
+              <>
+                <GitCommit className="h-5 w-5 rotate-90" />
+                {localize(optionLabels[ForkOptions.DIRECT_PATH])}
+              </>
+            }
+            hoverDescription={localize('com_ui_fork_info_visible')}
+          >
+            <GitCommit className="h-full w-full rotate-90 p-2" />
+          </PopoverButton>
+          <PopoverButton
+            setActiveSetting={setActiveSetting}
+            timeoutRef={timeoutRef}
+            onClick={onClick}
+            setting={ForkOptions.INCLUDE_BRANCHES}
+            label={localize(optionLabels[ForkOptions.INCLUDE_BRANCHES])}
+            hoverTitle={
+              <>
+                <GitBranchPlus className="h-4 w-4 rotate-180" />
+                {localize(optionLabels[ForkOptions.INCLUDE_BRANCHES])}
+              </>
+            }
+            hoverDescription={localize('com_ui_fork_info_branches')}
+          >
+            <GitBranchPlus className="h-full w-full rotate-180 p-2" />
+          </PopoverButton>
+          <PopoverButton
+            setActiveSetting={setActiveSetting}
+            timeoutRef={timeoutRef}
+            onClick={onClick}
+            setting={ForkOptions.TARGET_LEVEL}
+            label={localize(optionLabels[ForkOptions.TARGET_LEVEL])}
+            hoverTitle={
+              <>
+                <ListTree className="h-5 w-5" />
+                {`${localize(
+                  optionLabels[ForkOptions.TARGET_LEVEL],
+                )} (${localize('com_endpoint_default')})`}
+              </>
+            }
+            hoverDescription={localize('com_ui_fork_info_target')}
+          >
+            <ListTree className="h-full w-full p-2" />
+          </PopoverButton>
+        </div>
+        <Ariakit.HovercardProvider>
+          <div className="flex items-center">
+            <Ariakit.HovercardAnchor
+              render={
+                <div className="flex h-6 w-full select-none items-center justify-start rounded-md text-sm text-text-secondary hover:text-text-primary">
+                  <Ariakit.Checkbox
+                    id="split-target-checkbox"
+                    checked={splitAtTarget}
+                    onChange={(event) => setSplitAtTarget(event.target.checked)}
+                    className="m-2 h-4 w-4 rounded-sm border border-primary ring-offset-background transition duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+                    aria-label={localize('com_ui_fork_split_target')}
+                  />
+                  <label htmlFor="split-target-checkbox" className="ml-2 cursor-pointer">
+                    {localize('com_ui_fork_split_target')}
+                  </label>
+                </div>
+              }
+            />
+            <Ariakit.HovercardDisclosure className="rounded-full text-text-secondary focus:outline-none focus:ring-2 focus:ring-ring">
+              <VisuallyHidden>
+                {localize('com_ui_fork_more_info_split_target', {
+                  0: localize('com_ui_fork_split_target'),
+                })}
+              </VisuallyHidden>
+              {chevronDown}
+            </Ariakit.HovercardDisclosure>
+          </div>
+          <Ariakit.Hovercard
+            gutter={32}
+            className="z-[999] w-80 select-none rounded-md border border-border-medium bg-surface-secondary p-4 text-text-primary shadow-md"
+            portal={true}
+            unmountOnHide={true}
+          >
+            <div className="space-y-2">
+              <p className="text-sm text-text-secondary">{localize('com_ui_fork_info_start')}</p>
+            </div>
+          </Ariakit.Hovercard>
+        </Ariakit.HovercardProvider>
+        <Ariakit.HovercardProvider>
+          <div className="flex items-center">
+            <Ariakit.HovercardAnchor
+              render={
+                <div
+                  onClick={() => setRemember((prev) => !prev)}
+                  className="flex h-6 w-full select-none items-center justify-start rounded-md text-sm text-text-secondary hover:text-text-primary"
+                >
+                  <Ariakit.Checkbox
+                    id="remember-checkbox"
                     checked={remember}
-                    onCheckedChange={(checked: boolean) => {
+                    onChange={(event) => {
+                      const checked = event.target.checked;
+                      console.log('checked', checked);
                       if (checked) {
                         showToast({
                           message: localize('com_ui_fork_remember_checked'),
                           status: 'info',
                         });
                       }
-                      setRemember(checked);
+                      return setRemember(checked);
                     }}
-                    className="m-2 transition duration-300 ease-in-out"
+                    className="m-2 h-4 w-4 rounded-sm border border-primary ring-offset-background transition duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+                    aria-label={localize('com_ui_fork_remember')}
                   />
-                  {localize('com_ui_fork_remember')}
+                  <label htmlFor="remember-checkbox" className="ml-2 cursor-pointer">
+                    {localize('com_ui_fork_remember')}
+                  </label>
                 </div>
-              </HoverCardTrigger>
-              <OptionHover
-                side={ESide.Right}
-                description="com_ui_fork_info_remember"
-                langCode={true}
-                sideOffset={20}
-              />
-            </HoverCard>
-          </Popover.Content>
-        </div>
-      </Popover.Portal>
-    </Popover.Root>
+              }
+            />
+            <Ariakit.HovercardDisclosure className="rounded-full text-text-secondary focus:outline-none focus:ring-2 focus:ring-ring">
+              <VisuallyHidden>
+                {localize('com_ui_fork_more_info_remember', {
+                  0: localize('com_ui_fork_remember'),
+                })}
+              </VisuallyHidden>
+              {chevronDown}
+            </Ariakit.HovercardDisclosure>
+          </div>
+          <Ariakit.Hovercard
+            gutter={14}
+            className="z-[999] w-80 rounded-md border border-border-medium bg-surface-secondary p-4 text-text-primary shadow-md"
+            portal={true}
+            unmountOnHide={true}
+          >
+            <div className="space-y-2">
+              <p className="text-sm text-text-secondary">{localize('com_ui_fork_info_remember')}</p>
+            </div>
+          </Ariakit.Hovercard>
+        </Ariakit.HovercardProvider>
+      </Ariakit.Popover>
+    </>
   );
 }

client/src/components/Endpoints/MessageEndpointIcon.tsx

@@ -34,10 +34,7 @@ function getOpenAIColor(_model: string | null | undefined) {
 function getGoogleIcon(model: string | null | undefined, size: number) {
   if (model?.toLowerCase().includes('code') === true) {
     return <CodeyIcon size={size * 0.75} />;
-  } else if (
-    model?.toLowerCase().includes('gemini') === true ||
-    model?.toLowerCase().includes('learnlm') === true
-  ) {
+  } else if (/gemini|learnlm|gemma/.test(model?.toLowerCase() ?? '')) {
     return <GeminiIcon size={size * 0.7} />;
   } else {
     return <PaLMIcon size={size * 0.7} />;
@@ -52,6 +49,8 @@ function getGoogleModelName(model: string | null | undefined) {
     model?.toLowerCase().includes('learnlm') === true
   ) {
     return 'Gemini';
+  } else if (model?.toLowerCase().includes('gemma') === true) {
+    return 'Gemma';
   } else {
     return 'PaLM2';
   }

client/src/components/Nav/Bookmarks/BookmarkNav.tsx

@@ -39,15 +39,22 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags, isSmallScreen }: Boo
                 className={cn(
                   'flex items-center justify-center',
                   'size-10 border-none text-text-primary hover:bg-accent hover:text-accent-foreground',
-                  'rounded-xl border-none p-2 hover:bg-surface-hover',
+                  'rounded-full border-none p-2 hover:bg-surface-hover md:rounded-xl',
                   open ? 'bg-surface-hover' : '',
                 )}
                 data-testid="bookmark-menu"
               >
                 {tags.length > 0 ? (
-                  <BookmarkFilledIcon className="icon-lg text-text-primary" aria-hidden="true" />
+                  <BookmarkFilledIcon
+                    /** `isSmallScreen` is used because lazy loading is not influencing `md:` prefix for some reason */
+                    className={cn('text-text-primary', isSmallScreen ? 'icon-md-heavy' : 'icon-lg')}
+                    aria-hidden="true"
+                  />
                 ) : (
-                  <BookmarkIcon className="icon-lg text-text-primary" aria-hidden="true" />
+                  <BookmarkIcon
+                    className={cn('text-text-primary', isSmallScreen ? 'icon-md-heavy' : 'icon-lg')}
+                    aria-hidden="true"
+                  />
                 )}
               </MenuButton>
             }

client/src/components/Nav/MobileNav.tsx

@@ -61,6 +61,7 @@ export default function MobileNav({
             [QueryKeys.messages, conversation?.conversationId ?? Constants.NEW_CONVO],
             [],
           );
+          queryClient.invalidateQueries([QueryKeys.messages]);
           newConversation();
         }}
       >

client/src/components/Nav/Nav.tsx

@@ -58,7 +58,6 @@ const Nav = memo(
     const [navWidth, setNavWidth] = useState(NAV_WIDTH_DESKTOP);
     const isSmallScreen = useMediaQuery('(max-width: 768px)');
     const [newUser, setNewUser] = useLocalStorage('newUser', true);
-    const [isToggleHovering, setIsToggleHovering] = useState(false);
     const [showLoading, setShowLoading] = useState(false);
     const [tags, setTags] = useState<string[]>([]);
 
@@ -198,17 +197,12 @@ const Nav = memo(
         >
           <div className="h-full w-[320px] md:w-[260px]">
             <div className="flex h-full flex-col">
-              <div
-                className={cn(
-                  'flex h-full flex-col transition-opacity',
-                  isToggleHovering && !isSmallScreen ? 'opacity-50' : 'opacity-100',
-                )}
-              >
+              <div className="flex h-full flex-col transition-opacity">
                 <div className="flex h-full flex-col">
                   <nav
                     id="chat-history-nav"
                     aria-label={localize('com_ui_chat_history')}
-                    className="flex h-full flex-col px-3 pb-3.5"
+                    className="flex h-full flex-col px-2 pb-3.5 md:px-3"
                   >
                     <div className="flex flex-1 flex-col" ref={outerContainerRef}>
                       <MemoNewChat

client/src/components/Nav/NewChat.tsx

@@ -4,8 +4,8 @@ import { useNavigate } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
 import { QueryKeys, Constants } from 'librechat-data-provider';
 import type { TMessage, TStartupConfig } from 'librechat-data-provider';
-import { createChatSearchParams, getDefaultModelSpec, getModelSpecPreset } from '~/utils';
 import { NewChatIcon, MobileSidebar, Sidebar } from '~/components/svg';
+import { getDefaultModelSpec, getModelSpecPreset } from '~/utils';
 import { TooltipAnchor, Button } from '~/components/ui';
 import { useLocalize, useNewConvo } from '~/hooks';
 import store from '~/store';
@@ -28,7 +28,6 @@ export default function NewChat({
   const { newConversation: newConvo } = useNewConvo(index);
   const navigate = useNavigate();
   const localize = useLocalize();
-  const defaultPreset = useRecoilValue(store.defaultPreset);
   const { conversation } = store.useCreateConversationAtom(index);
 
   const clickHandler: React.MouseEventHandler<HTMLButtonElement> = useCallback(
@@ -41,23 +40,19 @@ export default function NewChat({
         [QueryKeys.messages, conversation?.conversationId ?? Constants.NEW_CONVO],
         [],
       );
-      const startupConfig = queryClient.getQueryData<TStartupConfig>([QueryKeys.startupConfig]);
-      const defaultSpec = getDefaultModelSpec(startupConfig);
-      const preset = defaultSpec != null ? getModelSpecPreset(defaultSpec) : defaultPreset;
-      const params = createChatSearchParams(preset ?? conversation);
-      const newRoute = params.size > 0 ? `/c/new?${params.toString()}` : '/c/new';
+      queryClient.invalidateQueries([QueryKeys.messages]);
       newConvo();
-      navigate(newRoute);
+      navigate('/c/new', { state: { focusChat: true } });
       if (isSmallScreen) {
         toggleNav();
       }
     },
-    [queryClient, conversation, newConvo, navigate, toggleNav, defaultPreset, isSmallScreen],
+    [queryClient, conversation, newConvo, navigate, toggleNav, isSmallScreen],
   );
 
   return (
     <>
-      <div className="h-header-height xs:pe-3 flex items-center justify-between py-2">
+      <div className="flex items-center justify-between py-[2px] md:py-2">
         <TooltipAnchor
           description={localize('com_nav_close_sidebar')}
           render={
@@ -66,11 +61,11 @@ export default function NewChat({
               variant="outline"
               data-testid="close-sidebar-button"
               aria-label={localize('com_nav_close_sidebar')}
-              className="rounded-xl border-none bg-transparent p-2 hover:bg-surface-hover"
+              className="rounded-full border-none bg-transparent p-2 hover:bg-surface-hover md:rounded-xl"
               onClick={toggleNav}
             >
               <Sidebar className="max-md:hidden" />
-              <MobileSidebar className="md:hidden" />
+              <MobileSidebar className="m-1 inline-flex size-10 items-center justify-center md:hidden" />
             </Button>
           }
         />
@@ -84,10 +79,10 @@ export default function NewChat({
                 variant="outline"
                 data-testid="nav-new-chat-button"
                 aria-label={localize('com_ui_new_chat')}
-                className="rounded-xl border-none bg-transparent p-2 hover:bg-surface-hover"
+                className="rounded-full border-none bg-transparent p-2 hover:bg-surface-hover md:rounded-xl"
                 onClick={clickHandler}
               >
-                <NewChatIcon />
+                <NewChatIcon className="icon-md md:h-6 md:w-6" />
               </Button>
             }
           />

client/src/components/Nav/SearchBar.tsx

@@ -1,7 +1,7 @@
-import { forwardRef, useState, useCallback, useMemo, useEffect, Ref } from 'react';
+import React, { forwardRef, useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import debounce from 'lodash/debounce';
+import { useRecoilState } from 'recoil';
 import { Search, X } from 'lucide-react';
-import { useSetRecoilState, useRecoilValue } from 'recoil';
 import { QueryKeys } from 'librechat-data-provider';
 import { useQueryClient } from '@tanstack/react-query';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -13,7 +13,7 @@ type SearchBarProps = {
   isSmallScreen?: boolean;
 };
 
-const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) => {
+const SearchBar = forwardRef((props: SearchBarProps, ref: React.Ref<HTMLDivElement>) => {
   const localize = useLocalize();
   const location = useLocation();
   const queryClient = useQueryClient();
@@ -21,11 +21,11 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) =
   const { isSmallScreen } = props;
 
   const [text, setText] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
   const [showClearIcon, setShowClearIcon] = useState(false);
 
   const { newConversation } = useNewConvo();
-  const setSearchState = useSetRecoilState(store.search);
-  const search = useRecoilValue(store.search);
+  const [search, setSearchState] = useRecoilState(store.search);
 
   const clearSearch = useCallback(() => {
     if (location.pathname.includes('/search')) {
@@ -44,6 +44,7 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) =
       isTyping: false,
     }));
     clearSearch();
+    inputRef.current?.focus();
   }, [setSearchState, clearSearch]);
 
   const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -108,6 +109,7 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) =
       <Search className="absolute left-3 h-4 w-4 text-text-secondary group-focus-within:text-text-primary group-hover:text-text-primary" />
       <input
         type="text"
+        ref={inputRef}
         className="m-0 mr-0 w-full border-none bg-transparent p-0 pl-7 text-sm leading-tight placeholder-text-secondary placeholder-opacity-100 focus-visible:outline-none group-focus-within:placeholder-text-primary group-hover:placeholder-text-primary"
         value={text}
         onChange={onChange}
@@ -122,14 +124,20 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) =
         autoComplete="off"
         dir="auto"
       />
-      <X
+      <button
+        type="button"
+        aria-label={`${localize('com_ui_clear')} ${localize('com_ui_search')}`}
         className={cn(
-          'absolute right-[7px] h-5 w-5 cursor-pointer transition-opacity duration-200',
+          'absolute right-[7px] flex h-5 w-5 items-center justify-center rounded-full border-none bg-transparent p-0 transition-opacity duration-200',
           showClearIcon ? 'opacity-100' : 'opacity-0',
           isSmallScreen === true ? 'right-[16px]' : '',
         )}
         onClick={clearText}
-      />
+        tabIndex={showClearIcon ? 0 : -1}
+        disabled={!showClearIcon}
+      >
+        <X className="h-5 w-5 cursor-pointer" />
+      </button>
     </div>
   );
 });

client/src/components/Nav/SettingsTabs/Chat/ForkSettings.tsx

@@ -44,6 +44,7 @@ export const ForkSettings = () => {
               options={forkOptions}
               sizeClasses="w-[200px]"
               testId="fork-setting-dropdown"
+              className="z-[50]"
             />
           </div>
         </div>

client/src/components/Nav/SettingsTabs/General/General.tsx

@@ -80,8 +80,10 @@ export const LangSelector = ({
     { value: 'zh-Hans', label: localize('com_nav_lang_chinese') },
     { value: 'zh-Hant', label: localize('com_nav_lang_traditional_chinese') },
     { value: 'ar-EG', label: localize('com_nav_lang_arabic') },
+    { value: 'da-DK', label: localize('com_nav_lang_danish') },
     { value: 'de-DE', label: localize('com_nav_lang_german') },
     { value: 'es-ES', label: localize('com_nav_lang_spanish') },
+    { value: 'ca-ES', label: localize('com_nav_lang_catalan') },
     { value: 'et-EE', label: localize('com_nav_lang_estonian') },
     { value: 'fa-IR', label: localize('com_nav_lang_persian') },
     { value: 'fr-FR', label: localize('com_nav_lang_french') },
@@ -94,6 +96,7 @@ export const LangSelector = ({
     { value: 'ru-RU', label: localize('com_nav_lang_russian') },
     { value: 'ja-JP', label: localize('com_nav_lang_japanese') },
     { value: 'ka-GE', label: localize('com_nav_lang_georgian') },
+    { value: 'cs-CZ', label: localize('com_nav_lang_czech') },
     { value: 'sv-SE', label: localize('com_nav_lang_swedish') },
     { value: 'ko-KR', label: localize('com_nav_lang_korean') },
     { value: 'vi-VN', label: localize('com_nav_lang_vietnamese') },

client/src/components/Nav/SettingsTabs/Speech/STT/LanguageSTTDropdown.tsx

@@ -102,8 +102,8 @@ export default function LanguageSTTDropdown() {
         onChange={handleSelect}
         options={languageOptions}
         sizeClasses="[--anchor-max-height:256px]"
-        anchor="bottom start"
         testId="LanguageSTTDropdown"
+        className="z-50"
       />
     </div>
   );

client/src/components/Prompts/AdminSettings.tsx

@@ -66,7 +66,7 @@ const AdminSettings = () => {
   const [confirmAdminUseChange, setConfirmAdminUseChange] = useState<{
     newValue: boolean;
     callback: (value: boolean) => void;
-      } | null>(null);
+  } | null>(null);
   const { mutate, isLoading } = useUpdatePromptPermissionsMutation({
     onSuccess: () => {
       showToast({ status: 'success', message: localize('com_ui_saved') });
@@ -166,6 +166,7 @@ const AdminSettings = () => {
             <div className="flex items-center gap-2">
               <span className="font-medium">{localize('com_ui_role_select')}:</span>
               <DropdownPopup
+                unmountOnHide={true}
                 menuId="prompt-role-dropdown"
                 isOpen={isRoleMenuOpen}
                 setIsOpen={setIsRoleMenuOpen}
@@ -191,11 +192,11 @@ const AdminSettings = () => {
                       setValue={setValue}
                       {...(selectedRole === SystemRoles.ADMIN && promptPerm === Permissions.USE
                         ? {
-                          confirmChange: (
-                            newValue: boolean,
-                            onChange: (value: boolean) => void,
-                          ) => setConfirmAdminUseChange({ newValue, callback: onChange }),
-                        }
+                            confirmChange: (
+                              newValue: boolean,
+                              onChange: (value: boolean) => void,
+                            ) => setConfirmAdminUseChange({ newValue, callback: onChange }),
+                          }
                         : {})}
                     />
                     {selectedRole === SystemRoles.ADMIN && promptPerm === Permissions.USE && (

client/src/components/Prompts/Groups/CategoryIcon.tsx

@@ -28,9 +28,9 @@ const categoryColorMap: Record<string, string> = {
   code: 'text-red-500',
   misc: 'text-blue-300',
   shop: 'text-purple-400',
-  idea: 'text-yellow-300',
+  idea: 'text-yellow-500/90 dark:text-yellow-300 ',
   write: 'text-purple-400',
-  travel: 'text-yellow-300',
+  travel: 'text-yellow-500/90 dark:text-yellow-300 ',
   finance: 'text-orange-400',
   roleplay: 'text-orange-400',
   teach_or_explain: 'text-blue-300',

client/src/components/Prompts/Groups/CategorySelector.tsx

@@ -1,4 +1,6 @@
 import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { ReactNode } from 'react';
 import { useFormContext, Controller } from 'react-hook-form';
 import { LocalStorageKeys } from 'librechat-data-provider';
 import { Dropdown } from '~/components/ui';
@@ -15,6 +17,7 @@ const CategorySelector: React.FC<CategorySelectorProps> = ({
   onValueChange,
   className = '',
 }) => {
+  const { t } = useTranslation();
   const formContext = useFormContext();
   const { categories, emptyCategory } = useCategories();
 
@@ -32,13 +35,25 @@ const CategorySelector: React.FC<CategorySelectorProps> = ({
     [watchedCategory, categories, currentCategory, emptyCategory],
   );
 
+  const displayCategory = useMemo(() => {
+    if (!categoryOption.value && !('icon' in categoryOption)) {
+      return {
+        ...categoryOption,
+        icon: (<span className="i-heroicons-tag" />) as ReactNode,
+        label: categoryOption.label || t('com_ui_empty_category'),
+      };
+    }
+    return categoryOption;
+  }, [categoryOption, t]);
+
   return formContext ? (
     <Controller
       name="category"
       control={control}
       render={() => (
         <Dropdown
-          value={categoryOption.value ?? ''}
+          value={displayCategory.value ?? ''}
+          label={displayCategory.value ? undefined : t('com_ui_category')}
           onChange={(value: string) => {
             setValue('category', value, { shouldDirty: false });
             localStorage.setItem(LocalStorageKeys.LAST_PROMPT_CATEGORY, value);
@@ -48,10 +63,12 @@ const CategorySelector: React.FC<CategorySelectorProps> = ({
           ariaLabel="Prompt's category selector"
           className={className}
           options={categories || []}
-          renderValue={(option) => (
+          renderValue={() => (
             <div className="flex items-center space-x-2">
-              {option.icon != null && <span>{option.icon as React.ReactNode}</span>}
-              <span>{option.label}</span>
+              {'icon' in displayCategory && displayCategory.icon != null && (
+                <span>{displayCategory.icon as ReactNode}</span>
+              )}
+              <span>{displayCategory.label}</span>
             </div>
           )}
         />
@@ -68,10 +85,12 @@ const CategorySelector: React.FC<CategorySelectorProps> = ({
       ariaLabel="Prompt's category selector"
       className={className}
       options={categories || []}
-      renderValue={(option) => (
+      renderValue={() => (
         <div className="flex items-center space-x-2">
-          {option.icon != null && <span>{option.icon as React.ReactNode}</span>}
-          <span>{option.label}</span>
+          {'icon' in displayCategory && displayCategory.icon != null && (
+            <span>{displayCategory.icon as ReactNode}</span>
+          )}
+          <span>{displayCategory.label}</span>
         </div>
       )}
     />

client/src/components/Prompts/Groups/ChatGroupItem.tsx

@@ -57,7 +57,7 @@ function ChatGroupItem({
         snippet={
           typeof group.oneliner === 'string' && group.oneliner.length > 0
             ? group.oneliner
-            : group.productionPrompt?.prompt ?? ''
+            : (group.productionPrompt?.prompt ?? '')
         }
       >
         <div className="flex flex-row items-center gap-2">
@@ -83,7 +83,11 @@ function ChatGroupItem({
                 className="z-50 inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border-medium bg-transparent p-0 text-sm font-medium transition-all duration-300 ease-in-out hover:border-border-heavy hover:bg-surface-hover focus:border-border-heavy focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
               >
                 <MenuIcon className="icon-md text-text-secondary" aria-hidden="true" />
-                <span className="sr-only">Open actions menu for {group.name}</span>
+                <span className="sr-only">
+                  {localize('com_ui_sr_actions_menu', { 0: group.name }) +
+                    ' ' +
+                    localize('com_ui_prompt')}
+                </span>
               </button>
             </DropdownMenuTrigger>
             <DropdownMenuContent

client/src/components/Prompts/Groups/CreatePromptForm.tsx

@@ -7,6 +7,7 @@ import PromptVariables from '~/components/Prompts/PromptVariables';
 import { Button, TextareaAutosize, Input } from '~/components/ui';
 import Description from '~/components/Prompts/Description';
 import { useLocalize, useHasAccess } from '~/hooks';
+import VariablesDropdown from '~/components/Prompts/VariablesDropdown';
 import Command from '~/components/Prompts/Command';
 import { useCreatePrompt } from '~/data-provider';
 import { cn } from '~/utils';
@@ -132,7 +133,8 @@ const CreatePromptForm = ({
         <div className="flex w-full flex-col gap-4 md:mt-[1.075rem]">
           <div>
             <h2 className="flex items-center justify-between rounded-t-lg border border-border-medium py-2 pl-4 pr-1 text-base font-semibold dark:text-gray-200">
-              {localize('com_ui_prompt_text')}*
+              <span>{localize('com_ui_prompt_text')}*</span>
+              <VariablesDropdown fieldName="prompt" className="mr-2" />
             </h2>
             <div className="min-h-32 rounded-b-lg border border-border-medium p-4 transition-all duration-150">
               <Controller

client/src/components/Prompts/Groups/VariableDialog.tsx

@@ -31,7 +31,7 @@ const VariableDialog: React.FC<VariableDialogProps> = ({ open, onClose, group })
 
   return (
     <OGDialog open={open} onOpenChange={handleOpenChange}>
-      <OGDialogContent className="max-w-full bg-white dark:border-gray-700 dark:bg-gray-850 dark:text-gray-300 md:max-w-3xl">
+      <OGDialogContent className="max-h-[90vh] max-w-full overflow-y-auto bg-white dark:border-gray-700 dark:bg-gray-850 dark:text-gray-300 md:max-w-[60vw]">
         <OGDialogTitle>{group.name}</OGDialogTitle>
         <VariableForm group={group} onClose={onClose} />
       </OGDialogContent>

client/src/components/Prompts/Groups/VariableForm.tsx

@@ -5,18 +5,14 @@ import supersub from 'remark-supersub';
 import rehypeKatex from 'rehype-katex';
 import ReactMarkdown from 'react-markdown';
 import rehypeHighlight from 'rehype-highlight';
+import { replaceSpecialVars } from 'librechat-data-provider';
 import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form';
 import type { TPromptGroup } from 'librechat-data-provider';
-import {
-  cn,
-  wrapVariable,
-  defaultTextProps,
-  replaceSpecialVars,
-  extractVariableInfo,
-} from '~/utils';
+import { cn, wrapVariable, defaultTextProps, extractVariableInfo } from '~/utils';
 import { codeNoExecution } from '~/components/Chat/Messages/Content/Markdown';
 import { TextareaAutosize, InputCombobox, Button } from '~/components/ui';
 import { useAuthContext, useLocalize, useSubmitMessage } from '~/hooks';
+import { PromptVariableGfm } from '../Markdown';
 
 type FieldType = 'text' | 'select';
 
@@ -115,9 +111,12 @@ export default function VariableForm({
     allVariables.forEach((variable) => {
       const placeholder = `{{${variable}}}`;
       const fieldIndex = variableIndexMap.get(variable) as string | number;
-      const fieldValue = fieldValues[fieldIndex].value as string;
-      const highlightText = fieldValue !== '' ? fieldValue : placeholder;
-      tempText = tempText.replaceAll(placeholder, `**${highlightText}**`);
+      const fieldValue = fieldValues[fieldIndex].value as string | undefined;
+      if (fieldValue === placeholder || fieldValue === '' || !fieldValue) {
+        return;
+      }
+      const highlightText = fieldValue !== '' ? `**${fieldValue}**` : placeholder;
+      tempText = tempText.replaceAll(placeholder, highlightText);
     });
     return tempText;
   };
@@ -141,19 +140,19 @@ export default function VariableForm({
   return (
     <div className="mx-auto p-1 md:container">
       <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-        <div className="mb-6 max-h-screen max-w-[90vw] overflow-auto rounded-md bg-gray-100 p-4 text-text-secondary dark:bg-gray-700/50 sm:max-w-full md:max-h-80">
+        <div className="mb-6 max-h-screen max-w-[90vw] overflow-auto rounded-md bg-surface-tertiary p-4 text-text-secondary dark:bg-surface-primary sm:max-w-full md:max-h-96">
           <ReactMarkdown
             /** @ts-ignore */
             remarkPlugins={[supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]]}
             rehypePlugins={[
               /** @ts-ignore */
-              [rehypeKatex, { output: 'mathml' }],
+              [rehypeKatex],
               /** @ts-ignore */
               [rehypeHighlight, { ignoreMissing: true }],
             ]}
             /** @ts-ignore */
-            components={{ code: codeNoExecution }}
-            className="prose dark:prose-invert light dark:text-gray-70 my-1 max-h-[50vh] break-words"
+            components={{ code: codeNoExecution, p: PromptVariableGfm }}
+            className="markdown prose dark:prose-invert light my-1 max-h-[50vh] max-w-full break-words dark:text-text-secondary"
           >
             {generateHighlightedMarkdown()}
           </ReactMarkdown>

client/src/components/Prompts/Markdown.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { handleDoubleClick } from '~/utils';
 
-export const CodeVariableGfm = ({ children }: { children: React.ReactNode }) => {
+export const CodeVariableGfm: React.ElementType = ({ children }: { children: React.ReactNode }) => {
   return (
     <code
       onDoubleClick={handleDoubleClick}
@@ -29,7 +29,10 @@ export const PromptVariableGfm = ({
     const parts = child.split(regex);
     return parts.map((part, index) =>
       index % 2 === 1 ? (
-        <b key={index} className="rounded-md bg-yellow-100/90 p-1 text-gray-700">
+        <b
+          key={index}
+          className="ml-[0.5] rounded-lg bg-amber-100 p-[1px] font-medium text-yellow-800 dark:border-yellow-500/50 dark:bg-transparent dark:text-yellow-500/90"
+        >
           {`{{${part}}}`}
         </b>
       ) : (

client/src/components/Prompts/PreviewPrompt.tsx

@@ -13,7 +13,7 @@ const PreviewPrompt = ({
 }) => {
   return (
     <OGDialog open={open} onOpenChange={onOpenChange}>
-      <OGDialogContent className="w-11/12 max-w-5xl">
+      <OGDialogContent className="max-h-[90vh] w-11/12 max-w-full overflow-y-auto md:max-w-[60vw]">
         <div className="p-2">
           <PromptDetails group={group} />
         </div>

client/src/components/Prompts/PromptDetails.tsx

@@ -5,13 +5,13 @@ import rehypeKatex from 'rehype-katex';
 import remarkMath from 'remark-math';
 import supersub from 'remark-supersub';
 import rehypeHighlight from 'rehype-highlight';
+import { replaceSpecialVars } from 'librechat-data-provider';
 import type { TPromptGroup } from 'librechat-data-provider';
 import { codeNoExecution } from '~/components/Chat/Messages/Content/Markdown';
 import { useLocalize, useAuthContext } from '~/hooks';
 import CategoryIcon from './Groups/CategoryIcon';
 import PromptVariables from './PromptVariables';
 import { PromptVariableGfm } from './Markdown';
-import { replaceSpecialVars } from '~/utils';
 import { Label } from '~/components/ui';
 import Description from './Description';
 import Command from './Command';
@@ -46,7 +46,7 @@ const PromptDetails = ({ group }: { group?: TPromptGroup }) => {
       <div className="flex h-full max-h-screen flex-col overflow-y-auto md:flex-row">
         <div className="flex flex-1 flex-col gap-4 p-0 md:max-h-[calc(100vh-150px)] md:p-2">
           <div>
-            <h2 className="flex items-center justify-between rounded-t-lg border border-border-light py-2 pl-4 text-base font-semibold text-text-primary ">
+            <h2 className="flex items-center justify-between rounded-t-lg border border-border-light py-2 pl-4 text-base font-semibold text-text-primary">
               {localize('com_ui_prompt_text')}
             </h2>
             <div className="group relative min-h-32 rounded-b-lg border border-border-light p-4 transition-all duration-150">
@@ -59,13 +59,13 @@ const PromptDetails = ({ group }: { group?: TPromptGroup }) => {
                 ]}
                 rehypePlugins={[
                   /** @ts-ignore */
-                  [rehypeKatex, { output: 'mathml' }],
+                  [rehypeKatex],
                   /** @ts-ignore */
                   [rehypeHighlight, { ignoreMissing: true }],
                 ]}
                 /** @ts-ignore */
                 components={{ p: PromptVariableGfm, code: codeNoExecution }}
-                className="prose dark:prose-invert light dark:text-gray-70 my-1"
+                className="markdown prose dark:prose-invert light dark:text-gray-70 my-1 break-words"
               >
                 {mainText}
               </ReactMarkdown>

client/src/components/Prompts/PromptEditor.tsx

@@ -12,6 +12,7 @@ import ReactMarkdown from 'react-markdown';
 import { codeNoExecution } from '~/components/Chat/Messages/Content/Markdown';
 import AlwaysMakeProd from '~/components/Prompts/Groups/AlwaysMakeProd';
 import { SaveIcon, CrossIcon } from '~/components/svg';
+import VariablesDropdown from './VariablesDropdown';
 import { TextareaAutosize } from '~/components/ui';
 import { PromptVariableGfm } from './Markdown';
 import { PromptsEditorMode } from '~/common';
@@ -42,7 +43,7 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
   }, [isEditing, prompt]);
 
   const rehypePlugins: PluggableList = [
-    [rehypeKatex, { output: 'mathml' }],
+    [rehypeKatex],
     [
       rehypeHighlight,
       {
@@ -59,10 +60,11 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
         <span className="max-w-[200px] truncate sm:max-w-none">
           {localize('com_ui_prompt_text')}
         </span>
-        <div className="flex flex-shrink-0 flex-row gap-3 sm:gap-6">
+        <div className="flex flex-shrink-0 flex-row items-center gap-3 sm:gap-6">
           {editorMode === PromptsEditorMode.ADVANCED && (
             <AlwaysMakeProd className="hidden sm:flex" />
           )}
+          <VariablesDropdown fieldName={name} />
           <button
             type="button"
             onClick={() => setIsEditing((prev) => !prev)}
@@ -105,6 +107,7 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
             isEditing ? (
               <TextareaAutosize
                 {...field}
+                // eslint-disable-next-line jsx-a11y/no-autofocus
                 autoFocus
                 className="w-full resize-none overflow-y-auto rounded bg-transparent text-sm text-text-primary focus:outline-none sm:text-base"
                 minRows={3}
@@ -123,8 +126,8 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
                 style={{ minHeight: '4.5em', maxHeight: '21em', overflow: 'auto' }}
               >
                 <ReactMarkdown
-                  /** @ts-ignore */
                   remarkPlugins={[
+                    /** @ts-ignore */
                     supersub,
                     remarkGfm,
                     [remarkMath, { singleDollarTextMath: true }],

client/src/components/Prompts/PromptVariables.tsx

@@ -1,18 +1,18 @@
 import React, { useMemo } from 'react';
 import { Variable } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
+import { specialVariables } from 'librechat-data-provider';
 import { cn, extractUniqueVariables } from '~/utils';
 import { CodeVariableGfm } from './Markdown';
 import { Separator } from '~/components/ui';
 import { useLocalize } from '~/hooks';
 
-const specialVariables = {
-  current_date: true,
-  current_user: true,
-};
-
 const specialVariableClasses =
-  'bg-yellow-500/25 text-yellow-600 dark:border-yellow-500/50 dark:bg-transparent dark:text-yellow-500/90';
+  'bg-amber-100 text-yellow-800 border-yellow-600 dark:border-yellow-500/50 dark:bg-transparent dark:text-yellow-500/90';
+
+const components: {
+  [nodeType: string]: React.ElementType;
+} = { code: CodeVariableGfm };
 
 const PromptVariables = ({
   promptText,
@@ -52,7 +52,7 @@ const PromptVariables = ({
           </div>
         ) : (
           <div className="text-sm text-text-secondary">
-            <ReactMarkdown components={{ code: CodeVariableGfm }}>
+            <ReactMarkdown components={components} className="markdown prose dark:prose-invert">
               {localize('com_ui_variables_info')}
             </ReactMarkdown>
           </div>
@@ -65,8 +65,8 @@ const PromptVariables = ({
                 {localize('com_ui_special_variables')}
               </span>
               <span className="text-sm text-text-secondary">
-                <ReactMarkdown components={{ code: CodeVariableGfm }}>
-                  {localize('com_ui_special_variables_info')}
+                <ReactMarkdown components={components} className="markdown prose dark:prose-invert">
+                  {localize('com_ui_special_variables_more_info')}
                 </ReactMarkdown>
               </span>
             </div>
@@ -75,7 +75,7 @@ const PromptVariables = ({
                 {localize('com_ui_dropdown_variables')}
               </span>
               <span className="text-sm text-text-secondary">
-                <ReactMarkdown components={{ code: CodeVariableGfm }}>
+                <ReactMarkdown components={components} className="markdown prose dark:prose-invert">
                   {localize('com_ui_dropdown_variables_info')}
                 </ReactMarkdown>
               </span>

client/src/components/Prompts/VariablesDropdown.tsx

@@ -0,0 +1,75 @@
+import { useState, useId } from 'react';
+import { PlusCircle } from 'lucide-react';
+import * as Menu from '@ariakit/react/menu';
+import { useFormContext } from 'react-hook-form';
+import { specialVariables } from 'librechat-data-provider';
+import type { TSpecialVarLabel } from 'librechat-data-provider';
+import { DropdownPopup } from '~/components';
+import { useLocalize } from '~/hooks';
+
+interface VariableOption {
+  label: TSpecialVarLabel;
+  value: string;
+}
+
+const variableOptions: VariableOption[] = Object.keys(specialVariables).map((key) => ({
+  label: `com_ui_special_var_${key}` as TSpecialVarLabel,
+  value: `{{${key}}}`,
+}));
+
+interface VariablesDropdownProps {
+  fieldName?: string;
+  className?: string;
+}
+
+export default function VariablesDropdown({
+  fieldName = 'prompt',
+  className = '',
+}: VariablesDropdownProps) {
+  const menuId = useId();
+  const localize = useLocalize();
+  const methods = useFormContext();
+  const { setValue, getValues } = methods;
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const handleAddVariable = (label: TSpecialVarLabel, value: string) => {
+    const currentText = getValues(fieldName) || '';
+    const spacer = currentText.length > 0 ? '\n\n' : '';
+    const prefix = localize(label);
+    setValue(fieldName, currentText + spacer + prefix + ': ' + value);
+    setIsMenuOpen(false);
+  };
+
+  return (
+    <div
+      className={className}
+      title={`${localize('com_ui_add')} ${localize('com_ui_special_variables')}`}
+    >
+      <DropdownPopup
+        portal={true}
+        mountByState={true}
+        unmountOnHide={true}
+        preserveTabOrder={true}
+        isOpen={isMenuOpen}
+        setIsOpen={setIsMenuOpen}
+        trigger={
+          <Menu.MenuButton
+            id="variables-menu-button"
+            aria-label={`${localize('com_ui_add')} ${localize('com_ui_special_variables')}`}
+            className="flex h-8 items-center gap-1 rounded-md border border-border-medium bg-surface-secondary px-2 py-0 text-sm text-text-primary transition-colors duration-200 hover:bg-surface-tertiary"
+          >
+            <PlusCircle className="mr-1 h-3 w-3 text-text-secondary" aria-hidden={true} />
+            {localize('com_ui_special_variables')}
+          </Menu.MenuButton>
+        }
+        items={variableOptions.map((option) => ({
+          label: localize(option.label) || option.label,
+          onClick: () => handleAddVariable(option.label, option.value),
+        }))}
+        menuId={menuId}
+        className="z-30"
+      />
+    </div>
+  );
+}

client/src/components/Share/MessagesView.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import type { TMessage } from 'librechat-data-provider';
 import MultiMessage from './MultiMessage';
+import { useLocalize } from '~/hooks';
 
 export default function MessagesView({
   messagesTree: _messagesTree,
@@ -9,6 +10,7 @@ export default function MessagesView({
   messagesTree?: TMessage[] | null;
   conversationId: string;
 }) {
+  const localize = useLocalize();
   const [currentEditId, setCurrentEditId] = useState<number | string | null>(-1);
   return (
     <div className="flex-1 pb-[50px]">
@@ -23,7 +25,7 @@ export default function MessagesView({
           <div className="flex flex-col pb-9 text-sm dark:bg-transparent">
             {(_messagesTree && _messagesTree.length == 0) || _messagesTree === null ? (
               <div className="flex w-full items-center justify-center gap-1 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-800/50 dark:bg-gray-800 dark:text-gray-300">
-                Nothing found
+                {localize('com_ui_nothing_found')}
               </div>
             ) : (
               <>

client/src/components/SidePanel/Agents/AdminSettings.tsx

@@ -157,6 +157,7 @@ const AdminSettings = () => {
           <div className="flex items-center gap-2">
             <span className="font-medium">{localize('com_ui_role_select')}:</span>
             <DropdownPopup
+              unmountOnHide={true}
               menuId="role-dropdown"
               isOpen={isRoleMenuOpen}
               setIsOpen={setIsRoleMenuOpen}

client/src/components/SidePanel/Agents/AgentConfig.tsx

@@ -10,6 +10,7 @@ import Action from '~/components/SidePanel/Builder/Action';
 import { ToolSelectDialog } from '~/components/Tools';
 import { icons } from '~/hooks/Endpoint/Icons';
 import { processAgentOption } from '~/utils';
+import Instructions from './Instructions';
 import AgentAvatar from './AgentAvatar';
 import FileContext from './FileContext';
 import { useLocalize } from '~/hooks';
@@ -228,39 +229,7 @@ export default function AgentConfig({
           />
         </div>
         {/* Instructions */}
-        <div className="mb-4">
-          <label className={labelClass} htmlFor="instructions">
-            {localize('com_ui_instructions')}
-          </label>
-          <Controller
-            name="instructions"
-            control={control}
-            render={({ field, fieldState: { error } }) => (
-              <>
-                <textarea
-                  {...field}
-                  value={field.value ?? ''}
-                  // maxLength={32768}
-                  className={cn(inputClass, 'min-h-[100px] resize-y')}
-                  id="instructions"
-                  placeholder={localize('com_agents_instructions_placeholder')}
-                  rows={3}
-                  aria-label="Agent instructions"
-                  aria-required="true"
-                  aria-invalid={error ? 'true' : 'false'}
-                />
-                {error && (
-                  <span
-                    className="text-sm text-red-500 transition duration-300 ease-in-out"
-                    role="alert"
-                  >
-                    {localize('com_ui_field_required')}
-                  </span>
-                )}
-              </>
-            )}
-          />
-        </div>
+        <Instructions />
         {/* Model and Provider */}
         <div className="mb-4">
           <label className={labelClass} htmlFor="provider">