👐 refactor: Fix formatting in userSchema.js

* added PassKey authentication.

* fixed issue with test :)

* Delete client/src/components/Auth/AuthLayout.tsx

* fix: conflicted issue

.env.example

@@ -88,7 +88,7 @@ PROXY=
 #============#
 
 ANTHROPIC_API_KEY=user_provided
-# ANTHROPIC_MODELS=claude-3-7-sonnet-latest,claude-3-7-sonnet-20250219,claude-3-5-haiku-20241022,claude-3-5-sonnet-20241022,claude-3-5-sonnet-latest,claude-3-5-sonnet-20240620,claude-3-opus-20240229,claude-3-sonnet-20240229,claude-3-haiku-20240307,claude-2.1,claude-2,claude-1.2,claude-1,claude-1-100k,claude-instant-1,claude-instant-1-100k
+# ANTHROPIC_MODELS=claude-3-5-haiku-20241022,claude-3-5-sonnet-20241022,claude-3-5-sonnet-latest,claude-3-5-sonnet-20240620,claude-3-opus-20240229,claude-3-sonnet-20240229,claude-3-haiku-20240307,claude-2.1,claude-2,claude-1.2,claude-1,claude-1-100k,claude-instant-1,claude-instant-1-100k
 # ANTHROPIC_REVERSE_PROXY=
 
 #============#
@@ -209,6 +209,12 @@ ASSISTANTS_API_KEY=user_provided
 # More info, including how to enable use of Assistants with Azure here:
 # https://www.librechat.ai/docs/configuration/librechat_yaml/ai_endpoints/azure#using-assistants-with-azure
 
+#============#
+# OpenRouter #
+#============#
+# !!!Warning: Use the variable above instead of this one. Using this one will override the OpenAI endpoint
+# OPENROUTER_API_KEY=
+
 #============#
 # Plugins    #
 #============#
@@ -408,6 +414,10 @@ APPLE_KEY_ID=
 APPLE_PRIVATE_KEY_PATH=
 APPLE_CALLBACK_URL=/oauth/apple/callback
 
+# PassKeys
+PASSKEY_ENABLED=true
+RP_ID=localhost
+
 # OpenID
 OPENID_CLIENT_ID=
 OPENID_CLIENT_SECRET=

.github/workflows/unused-packages.yml

@@ -1,12 +1,6 @@
 name: Detect Unused NPM Packages
 
-on:
-  pull_request:
-    paths:
-      - 'package.json'
-      - 'package-lock.json'
-      - 'client/**'
-      - 'api/**'
+on: [pull_request]
 
 jobs:
   detect-unused-packages:

.gitignore

@@ -100,10 +100,13 @@ auth.json
 /images
 
 !client/src/components/Nav/SettingsTabs/Data/
+!/client/src/@types/i18next.d.ts
 
 # User uploads
 uploads/
 
 # owner
 release/
-!/client/src/@types/i18next.d.ts
+
+# Apple Private Key
+*.p8

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "tailwindConfig": "./client/tailwind.config.mjs",
+  "tailwindConfig": "./client/tailwind.config.cjs",
   "printWidth": 100,
   "tabWidth": 2,
   "useTabs": false,

api/app/clients/AnthropicClient.js

@@ -7,7 +7,7 @@ const {
   getResponseSender,
   validateVisionModel,
 } = require('librechat-data-provider');
-const { SplitStreamHandler: _Handler, GraphEvents } = require('@librechat/agents');
+const { encodeAndFormat } = require('~/server/services/Files/images/encode');
 const {
   truncateText,
   formatMessage,
@@ -16,31 +16,16 @@ const {
   parseParamFromPrompt,
   createContextHandlers,
 } = require('./prompts');
-const {
-  getClaudeHeaders,
-  configureReasoning,
-  checkPromptCacheSupport,
-} = require('~/server/services/Endpoints/anthropic/helpers');
 const { getModelMaxTokens, getModelMaxOutputTokens, matchModelName } = require('~/utils');
 const { spendTokens, spendStructuredTokens } = require('~/models/spendTokens');
-const { encodeAndFormat } = require('~/server/services/Files/images/encode');
 const Tokenizer = require('~/server/services/Tokenizer');
-const { logger, sendEvent } = require('~/config');
 const { sleep } = require('~/server/utils');
 const BaseClient = require('./BaseClient');
+const { logger } = require('~/config');
 
 const HUMAN_PROMPT = '\n\nHuman:';
 const AI_PROMPT = '\n\nAssistant:';
 
-class SplitStreamHandler extends _Handler {
-  getDeltaContent(chunk) {
-    return (chunk?.delta?.text ?? chunk?.completion) || '';
-  }
-  getReasoningDelta(chunk) {
-    return chunk?.delta?.thinking || '';
-  }
-}
-
 /** Helper function to introduce a delay before retrying */
 function delayBeforeRetry(attempts, baseDelay = 1000) {
   return new Promise((resolve) => setTimeout(resolve, baseDelay * attempts));
@@ -83,8 +68,6 @@ class AnthropicClient extends BaseClient {
     /** The key for the usage object's output tokens
      * @type {string} */
     this.outputTokensKey = 'output_tokens';
-    /** @type {SplitStreamHandler | undefined} */
-    this.streamHandler;
   }
 
   setOptions(options) {
@@ -114,10 +97,9 @@ class AnthropicClient extends BaseClient {
 
     const modelMatch = matchModelName(this.modelOptions.model, EModelEndpoint.anthropic);
     this.isClaude3 = modelMatch.includes('claude-3');
-    this.isLegacyOutput = !(
-      /claude-3[-.]5-sonnet/.test(modelMatch) || /claude-3[-.]7/.test(modelMatch)
-    );
-    this.supportsCacheControl = this.options.promptCache && checkPromptCacheSupport(modelMatch);
+    this.isLegacyOutput = !modelMatch.includes('claude-3-5-sonnet');
+    this.supportsCacheControl =
+      this.options.promptCache && this.checkPromptCacheSupport(modelMatch);
 
     if (
       this.isLegacyOutput &&
@@ -143,7 +125,7 @@ class AnthropicClient extends BaseClient {
         this.options.endpointType ?? this.options.endpoint,
         this.options.endpointTokenConfig,
       ) ??
-      anthropicSettings.maxOutputTokens.reset(this.modelOptions.model);
+      1500;
     this.maxPromptTokens =
       this.options.maxPromptTokens || this.maxContextTokens - this.maxResponseTokens;
 
@@ -189,9 +171,18 @@ class AnthropicClient extends BaseClient {
       options.baseURL = this.options.reverseProxyUrl;
     }
 
-    const headers = getClaudeHeaders(requestOptions?.model, this.supportsCacheControl);
-    if (headers) {
-      options.defaultHeaders = headers;
+    if (
+      this.supportsCacheControl &&
+      requestOptions?.model &&
+      requestOptions.model.includes('claude-3-5-sonnet')
+    ) {
+      options.defaultHeaders = {
+        'anthropic-beta': 'max-tokens-3-5-sonnet-2024-07-15,prompt-caching-2024-07-31',
+      };
+    } else if (this.supportsCacheControl) {
+      options.defaultHeaders = {
+        'anthropic-beta': 'prompt-caching-2024-07-31',
+      };
     }
 
     return new Anthropic(options);
@@ -677,38 +668,29 @@ class AnthropicClient extends BaseClient {
    * @returns {Promise<Anthropic.default.Message | Anthropic.default.Completion>} The response from the Anthropic client.
    */
   async createResponse(client, options, useMessages) {
-    return (useMessages ?? this.useMessages)
+    return useMessages ?? this.useMessages
       ? await client.messages.create(options)
       : await client.completions.create(options);
   }
 
-  getMessageMapMethod() {
-    /**
-     * @param {TMessage} msg
-     */
-    return (msg) => {
-      if (msg.text != null && msg.text && msg.text.startsWith(':::thinking')) {
-        msg.text = msg.text.replace(/:::thinking.*?:::/gs, '').trim();
-      }
-
-      return msg;
-    };
-  }
-
   /**
-   * @param {string[]} [intermediateReply]
-   * @returns {string}
+   * @param {string} modelName
+   * @returns {boolean}
    */
-  getStreamText(intermediateReply) {
-    if (!this.streamHandler) {
-      return intermediateReply?.join('') ?? '';
+  checkPromptCacheSupport(modelName) {
+    const modelMatch = matchModelName(modelName, EModelEndpoint.anthropic);
+    if (modelMatch.includes('claude-3-5-sonnet-latest')) {
+      return false;
     }
-
-    const reasoningText = this.streamHandler.reasoningTokens.join('');
-
-    const reasoningBlock = reasoningText.length > 0 ? `:::thinking\n${reasoningText}\n:::\n` : '';
-
-    return `${reasoningBlock}${this.streamHandler.tokens.join('')}`;
+    if (
+      modelMatch === 'claude-3-5-sonnet' ||
+      modelMatch === 'claude-3-5-haiku' ||
+      modelMatch === 'claude-3-haiku' ||
+      modelMatch === 'claude-3-opus'
+    ) {
+      return true;
+    }
+    return false;
   }
 
   async sendCompletion(payload, { onProgress, abortController }) {
@@ -728,6 +710,7 @@ class AnthropicClient extends BaseClient {
       user_id: this.user,
     };
 
+    let text = '';
     const {
       stream,
       model,
@@ -738,37 +721,24 @@ class AnthropicClient extends BaseClient {
       topK: top_k,
     } = this.modelOptions;
 
-    let requestOptions = {
+    const requestOptions = {
       model,
       stream: stream || true,
       stop_sequences,
       temperature,
       metadata,
+      top_p,
+      top_k,
     };
 
-    if (!/claude-3[-.]7/.test(model)) {
-      if (top_p !== undefined) {
-        requestOptions.top_p = top_p;
-      }
-      if (top_k !== undefined) {
-        requestOptions.top_k = top_k;
-      }
-    }
-
     if (this.useMessages) {
       requestOptions.messages = payload;
-      requestOptions.max_tokens =
-        maxOutputTokens || anthropicSettings.maxOutputTokens.reset(requestOptions.model);
+      requestOptions.max_tokens = maxOutputTokens || legacy.maxOutputTokens.default;
     } else {
       requestOptions.prompt = payload;
-      requestOptions.max_tokens_to_sample = maxOutputTokens || legacy.maxOutputTokens.default;
+      requestOptions.max_tokens_to_sample = maxOutputTokens || 1500;
     }
 
-    requestOptions = configureReasoning(requestOptions, {
-      thinking: this.options.thinking,
-      thinkingBudget: this.options.thinkingBudget,
-    });
-
     if (this.systemMessage && this.supportsCacheControl === true) {
       requestOptions.system = [
         {
@@ -786,17 +756,13 @@ class AnthropicClient extends BaseClient {
     }
 
     logger.debug('[AnthropicClient]', { ...requestOptions });
-    this.streamHandler = new SplitStreamHandler({
-      accumulate: true,
-      runId: this.responseMessageId,
-      handlers: {
-        [GraphEvents.ON_RUN_STEP]: (event) => sendEvent(this.options.res, event),
-        [GraphEvents.ON_MESSAGE_DELTA]: (event) => sendEvent(this.options.res, event),
-        [GraphEvents.ON_REASONING_DELTA]: (event) => sendEvent(this.options.res, event),
-      },
-    });
 
-    let intermediateReply = this.streamHandler.tokens;
+    const handleChunk = (currentChunk) => {
+      if (currentChunk) {
+        text += currentChunk;
+        onProgress(currentChunk);
+      }
+    };
 
     const maxRetries = 3;
     const streamRate = this.options.streamRate ?? Constants.DEFAULT_STREAM_RATE;
@@ -817,15 +783,22 @@ class AnthropicClient extends BaseClient {
           });
 
           for await (const completion of response) {
+            // Handle each completion as before
             const type = completion?.type ?? '';
             if (tokenEventTypes.has(type)) {
               logger.debug(`[AnthropicClient] ${type}`, completion);
               this[type] = completion;
             }
-            this.streamHandler.handle(completion);
+            if (completion?.delta?.text) {
+              handleChunk(completion.delta.text);
+            } else if (completion.completion) {
+              handleChunk(completion.completion);
+            }
+
             await sleep(streamRate);
           }
 
+          // Successful processing, exit loop
           break;
         } catch (error) {
           attempts += 1;
@@ -835,10 +808,6 @@ class AnthropicClient extends BaseClient {
 
           if (attempts < maxRetries) {
             await delayBeforeRetry(attempts, 350);
-          } else if (this.streamHandler && this.streamHandler.reasoningTokens.length) {
-            return this.getStreamText();
-          } else if (intermediateReply.length > 0) {
-            return this.getStreamText(intermediateReply);
           } else {
             throw new Error(`Operation failed after ${maxRetries} attempts: ${error.message}`);
           }
@@ -854,7 +823,8 @@ class AnthropicClient extends BaseClient {
     }
 
     await processResponse.bind(this)();
-    return this.getStreamText(intermediateReply);
+
+    return text.trim();
   }
 
   getSaveOptions() {
@@ -864,8 +834,6 @@ class AnthropicClient extends BaseClient {
       promptPrefix: this.options.promptPrefix,
       modelLabel: this.options.modelLabel,
       promptCache: this.options.promptCache,
-      thinking: this.options.thinking,
-      thinkingBudget: this.options.thinkingBudget,
       resendFiles: this.options.resendFiles,
       iconURL: this.options.iconURL,
       greeting: this.options.greeting,

api/app/clients/BaseClient.js

@@ -5,11 +5,10 @@ const {
   isAgentsEndpoint,
   isParamEndpoint,
   EModelEndpoint,
-  excludedKeys,
   ErrorTypes,
   Constants,
 } = require('librechat-data-provider');
-const { getMessages, saveMessage, updateMessage, saveConvo, getConvo } = require('~/models');
+const { getMessages, saveMessage, updateMessage, saveConvo } = require('~/models');
 const { addSpaceIfNeeded, isEnabled } = require('~/server/utils');
 const { truncateToolCallOutputs } = require('./prompts');
 const checkBalance = require('~/models/checkBalance');
@@ -56,10 +55,6 @@ class BaseClient {
      * Flag to determine if the client re-submitted the latest assistant message.
      * @type {boolean | undefined} */
     this.continued;
-    /**
-     * Flag to determine if the client has already fetched the conversation while saving new messages.
-     * @type {boolean | undefined} */
-    this.fetchedConvo;
     /** @type {TMessage[]} */
     this.currentMessages = [];
     /** @type {import('librechat-data-provider').VisionModes | undefined} */
@@ -868,39 +863,16 @@ class BaseClient {
       return { message: savedMessage };
     }
 
-    const fieldsToKeep = {
-      conversationId: message.conversationId,
-      endpoint: this.options.endpoint,
-      endpointType: this.options.endpointType,
-      ...endpointOptions,
-    };
-
-    const existingConvo =
-      this.fetchedConvo === true
-        ? null
-        : await getConvo(this.options.req?.user?.id, message.conversationId);
-
-    const unsetFields = {};
-    if (existingConvo != null) {
-      this.fetchedConvo = true;
-      for (const key in existingConvo) {
-        if (!key) {
-          continue;
-        }
-        if (excludedKeys.has(key)) {
-          continue;
-        }
-
-        if (endpointOptions?.[key] === undefined) {
-          unsetFields[key] = 1;
-        }
-      }
-    }
-
-    const conversation = await saveConvo(this.options.req, fieldsToKeep, {
-      context: 'api/app/clients/BaseClient.js - saveMessageToDatabase #saveConvo',
-      unsetFields,
-    });
+    const conversation = await saveConvo(
+      this.options.req,
+      {
+        conversationId: message.conversationId,
+        endpoint: this.options.endpoint,
+        endpointType: this.options.endpointType,
+        ...endpointOptions,
+      },
+      { context: 'api/app/clients/BaseClient.js - saveMessageToDatabase #saveConvo' },
+    );
 
     return { message: savedMessage, conversation };
   }

api/app/clients/OpenAIClient.js

@@ -109,7 +109,12 @@ class OpenAIClient extends BaseClient {
     const omniPattern = /\b(o1|o3)\b/i;
     this.isOmni = omniPattern.test(this.modelOptions.model);
 
-    const { OPENAI_FORCE_PROMPT } = process.env ?? {};
+    const { OPENROUTER_API_KEY, OPENAI_FORCE_PROMPT } = process.env ?? {};
+    if (OPENROUTER_API_KEY && !this.azure) {
+      this.apiKey = OPENROUTER_API_KEY;
+      this.useOpenRouter = true;
+    }
+
     const { reverseProxyUrl: reverseProxy } = this.options;
 
     if (!this.useOpenRouter && reverseProxy && reverseProxy.includes(KnownEndpoints.openrouter)) {

api/app/clients/prompts/addCacheControl.js

@@ -1,7 +1,7 @@
 /**
  * Anthropic API: Adds cache control to the appropriate user messages in the payload.
- * @param {Array<AnthropicMessage | BaseMessage>} messages - The array of message objects.
- * @returns {Array<AnthropicMessage | BaseMessage>} - The updated array of message objects with cache control added.
+ * @param {Array<AnthropicMessage>} messages - The array of message objects.
+ * @returns {Array<AnthropicMessage>} - The updated array of message objects with cache control added.
  */
 function addCacheControl(messages) {
   if (!Array.isArray(messages) || messages.length < 2) {
@@ -13,9 +13,7 @@ function addCacheControl(messages) {
 
   for (let i = updatedMessages.length - 1; i >= 0 && userMessagesModified < 2; i--) {
     const message = updatedMessages[i];
-    if (message.getType != null && message.getType() !== 'human') {
-      continue;
-    } else if (message.getType == null && message.role !== 'user') {
+    if (message.role !== 'user') {
       continue;
     }
 

api/app/clients/specs/AnthropicClient.test.js

@@ -1,4 +1,3 @@
-const { SplitStreamHandler } = require('@librechat/agents');
 const { anthropicSettings } = require('librechat-data-provider');
 const AnthropicClient = require('~/app/clients/AnthropicClient');
 
@@ -406,278 +405,4 @@ describe('AnthropicClient', () => {
       expect(Number.isNaN(result)).toBe(false);
     });
   });
-
-  describe('maxOutputTokens handling for different models', () => {
-    it('should not cap maxOutputTokens for Claude 3.5 Sonnet models', () => {
-      const client = new AnthropicClient('test-api-key');
-      const highTokenValue = anthropicSettings.legacy.maxOutputTokens.default * 10;
-
-      client.setOptions({
-        modelOptions: {
-          model: 'claude-3-5-sonnet',
-          maxOutputTokens: highTokenValue,
-        },
-      });
-
-      expect(client.modelOptions.maxOutputTokens).toBe(highTokenValue);
-
-      // Test with decimal notation
-      client.setOptions({
-        modelOptions: {
-          model: 'claude-3.5-sonnet',
-          maxOutputTokens: highTokenValue,
-        },
-      });
-
-      expect(client.modelOptions.maxOutputTokens).toBe(highTokenValue);
-    });
-
-    it('should not cap maxOutputTokens for Claude 3.7 models', () => {
-      const client = new AnthropicClient('test-api-key');
-      const highTokenValue = anthropicSettings.legacy.maxOutputTokens.default * 2;
-
-      client.setOptions({
-        modelOptions: {
-          model: 'claude-3-7-sonnet',
-          maxOutputTokens: highTokenValue,
-        },
-      });
-
-      expect(client.modelOptions.maxOutputTokens).toBe(highTokenValue);
-
-      // Test with decimal notation
-      client.setOptions({
-        modelOptions: {
-          model: 'claude-3.7-sonnet',
-          maxOutputTokens: highTokenValue,
-        },
-      });
-
-      expect(client.modelOptions.maxOutputTokens).toBe(highTokenValue);
-    });
-
-    it('should cap maxOutputTokens for Claude 3.5 Haiku models', () => {
-      const client = new AnthropicClient('test-api-key');
-      const highTokenValue = anthropicSettings.legacy.maxOutputTokens.default * 2;
-
-      client.setOptions({
-        modelOptions: {
-          model: 'claude-3-5-haiku',
-          maxOutputTokens: highTokenValue,
-        },
-      });
-
-      expect(client.modelOptions.maxOutputTokens).toBe(
-        anthropicSettings.legacy.maxOutputTokens.default,
-      );
-
-      // Test with decimal notation
-      client.setOptions({
-        modelOptions: {
-          model: 'claude-3.5-haiku',
-          maxOutputTokens: highTokenValue,
-        },
-      });
-
-      expect(client.modelOptions.maxOutputTokens).toBe(
-        anthropicSettings.legacy.maxOutputTokens.default,
-      );
-    });
-
-    it('should cap maxOutputTokens for Claude 3 Haiku and Opus models', () => {
-      const client = new AnthropicClient('test-api-key');
-      const highTokenValue = anthropicSettings.legacy.maxOutputTokens.default * 2;
-
-      // Test haiku
-      client.setOptions({
-        modelOptions: {
-          model: 'claude-3-haiku',
-          maxOutputTokens: highTokenValue,
-        },
-      });
-
-      expect(client.modelOptions.maxOutputTokens).toBe(
-        anthropicSettings.legacy.maxOutputTokens.default,
-      );
-
-      // Test opus
-      client.setOptions({
-        modelOptions: {
-          model: 'claude-3-opus',
-          maxOutputTokens: highTokenValue,
-        },
-      });
-
-      expect(client.modelOptions.maxOutputTokens).toBe(
-        anthropicSettings.legacy.maxOutputTokens.default,
-      );
-    });
-  });
-
-  describe('topK/topP parameters for different models', () => {
-    beforeEach(() => {
-      // Mock the SplitStreamHandler
-      jest.spyOn(SplitStreamHandler.prototype, 'handle').mockImplementation(() => {});
-    });
-
-    afterEach(() => {
-      jest.restoreAllMocks();
-    });
-
-    it('should include top_k and top_p parameters for non-claude-3.7 models', async () => {
-      const client = new AnthropicClient('test-api-key');
-
-      // Create a mock async generator function
-      async function* mockAsyncGenerator() {
-        yield { type: 'message_start', message: { usage: {} } };
-        yield { delta: { text: 'Test response' } };
-        yield { type: 'message_delta', usage: {} };
-      }
-
-      // Mock createResponse to return the async generator
-      jest.spyOn(client, 'createResponse').mockImplementation(() => {
-        return mockAsyncGenerator();
-      });
-
-      client.setOptions({
-        modelOptions: {
-          model: 'claude-3-opus',
-          temperature: 0.7,
-          topK: 10,
-          topP: 0.9,
-        },
-      });
-
-      // Mock getClient to capture the request options
-      let capturedOptions = null;
-      jest.spyOn(client, 'getClient').mockImplementation((options) => {
-        capturedOptions = options;
-        return {};
-      });
-
-      const payload = [{ role: 'user', content: 'Test message' }];
-      await client.sendCompletion(payload, {});
-
-      // Check the options passed to getClient
-      expect(capturedOptions).toHaveProperty('top_k', 10);
-      expect(capturedOptions).toHaveProperty('top_p', 0.9);
-    });
-
-    it('should include top_k and top_p parameters for claude-3-5-sonnet models', async () => {
-      const client = new AnthropicClient('test-api-key');
-
-      // Create a mock async generator function
-      async function* mockAsyncGenerator() {
-        yield { type: 'message_start', message: { usage: {} } };
-        yield { delta: { text: 'Test response' } };
-        yield { type: 'message_delta', usage: {} };
-      }
-
-      // Mock createResponse to return the async generator
-      jest.spyOn(client, 'createResponse').mockImplementation(() => {
-        return mockAsyncGenerator();
-      });
-
-      client.setOptions({
-        modelOptions: {
-          model: 'claude-3-5-sonnet',
-          temperature: 0.7,
-          topK: 10,
-          topP: 0.9,
-        },
-      });
-
-      // Mock getClient to capture the request options
-      let capturedOptions = null;
-      jest.spyOn(client, 'getClient').mockImplementation((options) => {
-        capturedOptions = options;
-        return {};
-      });
-
-      const payload = [{ role: 'user', content: 'Test message' }];
-      await client.sendCompletion(payload, {});
-
-      // Check the options passed to getClient
-      expect(capturedOptions).toHaveProperty('top_k', 10);
-      expect(capturedOptions).toHaveProperty('top_p', 0.9);
-    });
-
-    it('should not include top_k and top_p parameters for claude-3-7-sonnet models', async () => {
-      const client = new AnthropicClient('test-api-key');
-
-      // Create a mock async generator function
-      async function* mockAsyncGenerator() {
-        yield { type: 'message_start', message: { usage: {} } };
-        yield { delta: { text: 'Test response' } };
-        yield { type: 'message_delta', usage: {} };
-      }
-
-      // Mock createResponse to return the async generator
-      jest.spyOn(client, 'createResponse').mockImplementation(() => {
-        return mockAsyncGenerator();
-      });
-
-      client.setOptions({
-        modelOptions: {
-          model: 'claude-3-7-sonnet',
-          temperature: 0.7,
-          topK: 10,
-          topP: 0.9,
-        },
-      });
-
-      // Mock getClient to capture the request options
-      let capturedOptions = null;
-      jest.spyOn(client, 'getClient').mockImplementation((options) => {
-        capturedOptions = options;
-        return {};
-      });
-
-      const payload = [{ role: 'user', content: 'Test message' }];
-      await client.sendCompletion(payload, {});
-
-      // Check the options passed to getClient
-      expect(capturedOptions).not.toHaveProperty('top_k');
-      expect(capturedOptions).not.toHaveProperty('top_p');
-    });
-
-    it('should not include top_k and top_p parameters for models with decimal notation (claude-3.7)', async () => {
-      const client = new AnthropicClient('test-api-key');
-
-      // Create a mock async generator function
-      async function* mockAsyncGenerator() {
-        yield { type: 'message_start', message: { usage: {} } };
-        yield { delta: { text: 'Test response' } };
-        yield { type: 'message_delta', usage: {} };
-      }
-
-      // Mock createResponse to return the async generator
-      jest.spyOn(client, 'createResponse').mockImplementation(() => {
-        return mockAsyncGenerator();
-      });
-
-      client.setOptions({
-        modelOptions: {
-          model: 'claude-3.7-sonnet',
-          temperature: 0.7,
-          topK: 10,
-          topP: 0.9,
-        },
-      });
-
-      // Mock getClient to capture the request options
-      let capturedOptions = null;
-      jest.spyOn(client, 'getClient').mockImplementation((options) => {
-        capturedOptions = options;
-        return {};
-      });
-
-      const payload = [{ role: 'user', content: 'Test message' }];
-      await client.sendCompletion(payload, {});
-
-      // Check the options passed to getClient
-      expect(capturedOptions).not.toHaveProperty('top_k');
-      expect(capturedOptions).not.toHaveProperty('top_p');
-    });
-  });
 });

api/app/clients/specs/OpenAIClient.test.js

@@ -202,6 +202,14 @@ describe('OpenAIClient', () => {
       expect(client.modelOptions.temperature).toBe(0.7);
     });
 
+    it('should set apiKey and useOpenRouter if OPENROUTER_API_KEY is present', () => {
+      process.env.OPENROUTER_API_KEY = 'openrouter-key';
+      client.setOptions({});
+      expect(client.apiKey).toBe('openrouter-key');
+      expect(client.useOpenRouter).toBe(true);
+      delete process.env.OPENROUTER_API_KEY; // Cleanup
+    });
+
     it('should set FORCE_PROMPT based on OPENAI_FORCE_PROMPT or reverseProxyUrl', () => {
       process.env.OPENAI_FORCE_PROMPT = 'true';
       client.setOptions({});
@@ -526,6 +534,7 @@ describe('OpenAIClient', () => {
     afterEach(() => {
       delete process.env.AZURE_OPENAI_DEFAULT_MODEL;
       delete process.env.AZURE_USE_MODEL_AS_DEPLOYMENT_NAME;
+      delete process.env.OPENROUTER_API_KEY;
     });
 
     it('should call getCompletion and fetchEventSource when using a text/instruct model', async () => {

api/cache/index.js

@@ -1,5 +1,7 @@
 const keyvFiles = require('./keyvFiles');
 const getLogStores = require('./getLogStores');
 const logViolation = require('./logViolation');
+const mongoUserStore = require('./mongoUserStore');
+const mongoChallengeStore = require('./mongoChallengeStore');
 
-module.exports = { ...keyvFiles, getLogStores, logViolation };
+module.exports = { ...keyvFiles, getLogStores, logViolation, mongoUserStore, mongoChallengeStore };

api/cache/keyvRedis.js

@@ -9,7 +9,7 @@ const { REDIS_URI, USE_REDIS, USE_REDIS_CLUSTER, REDIS_CA, REDIS_KEY_PREFIX, RED
 
 let keyvRedis;
 const redis_prefix = REDIS_KEY_PREFIX || '';
-const redis_max_listeners = Number(REDIS_MAX_LISTENERS) || 10;
+const redis_max_listeners = REDIS_MAX_LISTENERS || 10;
 
 function mapURI(uri) {
   const regex =

api/cache/mongoChallengeStore.js

@@ -0,0 +1,35 @@
+const ChallengeStore = require('~/models/ChallengeStore');
+
+class MongoChallengeStore {
+  async get(userId) {
+    try {
+      const challenge = await ChallengeStore.findOne({ userId }).lean().exec();
+      return challenge ? challenge.challenge : undefined;
+    } catch (error) {
+      console.error(`❌ Error fetching challenge for userId ${userId}:`, error);
+      return undefined;
+    }
+  }
+
+  async save(userId, challenge) {
+    try {
+      await ChallengeStore.findOneAndUpdate(
+        { userId },
+        { challenge, createdAt: new Date() },
+        { upsert: true, new: true, setDefaultsOnInsert: true },
+      ).exec();
+    } catch (error) {
+      console.error(`❌ Error saving challenge for userId ${userId}:`, error);
+    }
+  }
+
+  async delete(userId) {
+    try {
+      await ChallengeStore.deleteOne({ userId }).exec();
+    } catch (error) {
+      console.error(`❌ Error deleting challenge for userId ${userId}:`, error);
+    }
+  }
+}
+
+module.exports = MongoChallengeStore;

api/cache/mongoUserStore.js

@@ -0,0 +1,55 @@
+const User = require('~/models');
+
+class MongoUserStore {
+  async get(identifier, byID = false) {
+    let user;
+    if (byID) {
+      user = await User.getUserById(identifier);
+    } else {
+      user = await User.findUser({ email: identifier });
+    }
+    if (user) {
+      return {
+        id: user._id.toString(),
+        email: user.email,
+        passkeys: user.passkeys,
+      };
+    }
+    return undefined;
+  }
+
+  async save(user) {
+    if (!user.id) {
+      const createdUser = await User.createUser(
+        {
+          email: user.email,
+          username: user.email,
+          passkeys: user.passkeys,
+        },
+        /* disableTTL */ true,
+        /* returnUser */ true,
+      );
+      return {
+        id: createdUser._id.toString(),
+        email: createdUser.email,
+        passkeys: createdUser.passkeys,
+      };
+    } else {
+      const updatedUser = await User.updateUser(user.id, {
+        email: user.email,
+        username: user.email,
+        passkeys: user.passkeys,
+      });
+      if (!updatedUser) {
+        throw new Error('Failed to update user');
+      }
+      return {
+        id: updatedUser._id.toString(),
+        email: updatedUser.email,
+        passkeys: updatedUser.passkeys,
+      };
+    }
+  }
+}
+
+module.exports = MongoUserStore;

api/models/ChallengeStore.js

@@ -0,0 +1,6 @@
+const mongoose = require('mongoose');
+const challengeSchema = require('~/models/schema/challengeSchema');
+
+const ChallengeStore = mongoose.model('Challenge', challengeSchema);
+
+module.exports = ChallengeStore;

api/models/Conversation.js

@@ -104,16 +104,10 @@ module.exports = {
         update.expiredAt = null;
       }
 
-      /** @type {{ $set: Partial<TConversation>; $unset?: Record<keyof TConversation, number> }} */
-      const updateOperation = { $set: update };
-      if (metadata && metadata.unsetFields && Object.keys(metadata.unsetFields).length > 0) {
-        updateOperation.$unset = metadata.unsetFields;
-      }
-
       /** Note: the resulting Model object is necessary for Meilisearch operations */
       const conversation = await Conversation.findOneAndUpdate(
         { conversationId, user: req.user.id },
-        updateOperation,
+        update,
         {
           new: true,
           upsert: true,

api/models/Role.js

@@ -6,10 +6,8 @@ const {
   removeNullishValues,
   agentPermissionsSchema,
   promptPermissionsSchema,
-  runCodePermissionsSchema,
   bookmarkPermissionsSchema,
   multiConvoPermissionsSchema,
-  temporaryChatPermissionsSchema,
 } = require('librechat-data-provider');
 const getLogStores = require('~/cache/getLogStores');
 const Role = require('~/models/schema/roleSchema');
@@ -79,8 +77,6 @@ const permissionSchemas = {
   [PermissionTypes.PROMPTS]: promptPermissionsSchema,
   [PermissionTypes.BOOKMARKS]: bookmarkPermissionsSchema,
   [PermissionTypes.MULTI_CONVO]: multiConvoPermissionsSchema,
-  [PermissionTypes.TEMPORARY_CHAT]: temporaryChatPermissionsSchema,
-  [PermissionTypes.RUN_CODE]: runCodePermissionsSchema,
 };
 
 /**

api/models/Token.js

@@ -13,13 +13,6 @@ const Token = mongoose.model('Token', tokenSchema);
  */
 async function fixIndexes() {
   try {
-    if (
-      process.env.NODE_ENV === 'CI' ||
-      process.env.NODE_ENV === 'development' ||
-      process.env.NODE_ENV === 'test'
-    ) {
-      return;
-    }
     const indexes = await Token.collection.indexes();
     logger.debug('Existing Token Indexes:', JSON.stringify(indexes, null, 2));
     const unwantedTTLIndexes = indexes.filter(

api/models/schema/challengeSchema.js

@@ -0,0 +1,22 @@
+const mongoose = require('mongoose');
+
+const challengeSchema = mongoose.Schema({
+  userId: {
+    type: String,
+    required: true,
+    unique: true,
+  },
+  challenge: {
+    type: String,
+    required: true,
+  },
+  createdAt: {
+    type: Date,
+    default: Date.now,
+    index: {
+      expires: '5m',
+    },
+  },
+});
+
+module.exports = challengeSchema;

api/models/schema/convoSchema.js

@@ -20,6 +20,8 @@ const convoSchema = mongoose.Schema(
       index: true,
     },
     messages: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Message' }],
+    // google only
+    examples: { type: [{ type: mongoose.Schema.Types.Mixed }], default: undefined },
     agentOptions: {
       type: mongoose.Schema.Types.Mixed,
     },
@@ -46,12 +48,12 @@ if (process.env.MEILI_HOST && process.env.MEILI_MASTER_KEY) {
   convoSchema.plugin(mongoMeili, {
     host: process.env.MEILI_HOST,
     apiKey: process.env.MEILI_MASTER_KEY,
-    /** Note: Will get created automatically if it doesn't exist already */
-    indexName: 'convos',
+    indexName: 'convos', // Will get created automatically if it doesn't exist already
     primaryKey: 'conversationId',
   });
 }
 
+// Create TTL index
 convoSchema.index({ expiredAt: 1 }, { expireAfterSeconds: 0 });
 convoSchema.index({ createdAt: 1, updatedAt: 1 });
 convoSchema.index({ conversationId: 1, user: 1 }, { unique: true });

api/models/schema/defaults.js

@@ -1,5 +1,3 @@
-const mongoose = require('mongoose');
-
 const conversationPreset = {
   // endpoint: [azureOpenAI, openAI, anthropic, chatGPTBrowser]
   endpoint: {
@@ -26,7 +24,6 @@ const conversationPreset = {
     required: false,
   },
   // for google only
-  examples: { type: [{ type: mongoose.Schema.Types.Mixed }], default: undefined },
   modelLabel: {
     type: String,
     required: false,
@@ -73,12 +70,6 @@ const conversationPreset = {
   promptCache: {
     type: Boolean,
   },
-  thinking: {
-    type: Boolean,
-  },
-  thinkingBudget: {
-    type: Number,
-  },
   system: {
     type: String,
   },
@@ -132,6 +123,56 @@ const conversationPreset = {
   },
 };
 
+const agentOptions = {
+  model: {
+    type: String,
+    required: false,
+  },
+  // for azureOpenAI, openAI only
+  chatGptLabel: {
+    type: String,
+    required: false,
+  },
+  modelLabel: {
+    type: String,
+    required: false,
+  },
+  promptPrefix: {
+    type: String,
+    required: false,
+  },
+  temperature: {
+    type: Number,
+    required: false,
+  },
+  top_p: {
+    type: Number,
+    required: false,
+  },
+  // for google only
+  topP: {
+    type: Number,
+    required: false,
+  },
+  topK: {
+    type: Number,
+    required: false,
+  },
+  maxOutputTokens: {
+    type: Number,
+    required: false,
+  },
+  presence_penalty: {
+    type: Number,
+    required: false,
+  },
+  frequency_penalty: {
+    type: Number,
+    required: false,
+  },
+};
+
 module.exports = {
   conversationPreset,
+  agentOptions,
 };

api/models/schema/presetSchema.js

@@ -23,6 +23,8 @@ const presetSchema = mongoose.Schema(
     order: {
       type: Number,
     },
+    // google only
+    examples: [{ type: mongoose.Schema.Types.Mixed }],
     ...conversationPreset,
     agentOptions: {
       type: mongoose.Schema.Types.Mixed,

api/models/schema/roleSchema.js

@@ -48,18 +48,6 @@ const roleSchema = new mongoose.Schema({
       default: true,
     },
   },
-  [PermissionTypes.TEMPORARY_CHAT]: {
-    [Permissions.USE]: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  [PermissionTypes.RUN_CODE]: {
-    [Permissions.USE]: {
-      type: Boolean,
-      default: true,
-    },
-  },
 });
 
 const Role = mongoose.model('Role', roleSchema);

api/models/schema/userSchema.js

@@ -45,6 +45,13 @@ const backupCodeSchema = mongoose.Schema({
   usedAt: { type: Date, default: null },
 });
 
+const passkeySchema = mongoose.Schema({
+  id: { type: String, required: true },
+  publicKey: { type: Buffer, required: true },
+  counter: { type: Number, default: 0 },
+  transports: { type: [String], default: [] },
+});
+
 /** @type {MongooseSchema<MongoUser>} */
 const userSchema = mongoose.Schema(
   {
@@ -123,6 +130,10 @@ const userSchema = mongoose.Schema(
       unique: true,
       sparse: true,
     },
+    passkeys: {
+      type: [passkeySchema],
+      default: [],
+    },
     plugins: {
       type: Array,
     },

api/models/tx.js

@@ -88,8 +88,6 @@ const tokenValues = Object.assign(
     'claude-3-sonnet': { prompt: 3, completion: 15 },
     'claude-3-5-sonnet': { prompt: 3, completion: 15 },
     'claude-3.5-sonnet': { prompt: 3, completion: 15 },
-    'claude-3-7-sonnet': { prompt: 3, completion: 15 },
-    'claude-3.7-sonnet': { prompt: 3, completion: 15 },
     'claude-3-5-haiku': { prompt: 0.8, completion: 4 },
     'claude-3.5-haiku': { prompt: 0.8, completion: 4 },
     'claude-3-haiku': { prompt: 0.25, completion: 1.25 },
@@ -112,14 +110,6 @@ const tokenValues = Object.assign(
     'gemini-1.5': { prompt: 2.5, completion: 10 },
     'gemini-pro-vision': { prompt: 0.5, completion: 1.5 },
     gemini: { prompt: 0.5, completion: 1.5 },
-    'grok-2-vision-1212': { prompt: 2.0, completion: 10.0 },
-    'grok-2-vision-latest': { prompt: 2.0, completion: 10.0 },
-    'grok-2-vision': { prompt: 2.0, completion: 10.0 },
-    'grok-vision-beta': { prompt: 5.0, completion: 15.0 },
-    'grok-2-1212': { prompt: 2.0, completion: 10.0 },
-    'grok-2-latest': { prompt: 2.0, completion: 10.0 },
-    'grok-2': { prompt: 2.0, completion: 10.0 },
-    'grok-beta': { prompt: 5.0, completion: 15.0 },
   },
   bedrockValues,
 );
@@ -131,8 +121,6 @@ const tokenValues = Object.assign(
  * @type {Object.<string, {write: number, read: number }>}
  */
 const cacheTokenValues = {
-  'claude-3.7-sonnet': { write: 3.75, read: 0.3 },
-  'claude-3-7-sonnet': { write: 3.75, read: 0.3 },
   'claude-3.5-sonnet': { write: 3.75, read: 0.3 },
   'claude-3-5-sonnet': { write: 3.75, read: 0.3 },
   'claude-3.5-haiku': { write: 1, read: 0.08 },

api/models/tx.spec.js

@@ -80,20 +80,6 @@ describe('getValueKey', () => {
     expect(getValueKey('chatgpt-4o-latest-0718')).toBe('gpt-4o');
   });
 
-  it('should return "claude-3-7-sonnet" for model type of "claude-3-7-sonnet-"', () => {
-    expect(getValueKey('claude-3-7-sonnet-20240620')).toBe('claude-3-7-sonnet');
-    expect(getValueKey('anthropic/claude-3-7-sonnet')).toBe('claude-3-7-sonnet');
-    expect(getValueKey('claude-3-7-sonnet-turbo')).toBe('claude-3-7-sonnet');
-    expect(getValueKey('claude-3-7-sonnet-0125')).toBe('claude-3-7-sonnet');
-  });
-
-  it('should return "claude-3.7-sonnet" for model type of "claude-3.7-sonnet-"', () => {
-    expect(getValueKey('claude-3.7-sonnet-20240620')).toBe('claude-3.7-sonnet');
-    expect(getValueKey('anthropic/claude-3.7-sonnet')).toBe('claude-3.7-sonnet');
-    expect(getValueKey('claude-3.7-sonnet-turbo')).toBe('claude-3.7-sonnet');
-    expect(getValueKey('claude-3.7-sonnet-0125')).toBe('claude-3.7-sonnet');
-  });
-
   it('should return "claude-3-5-sonnet" for model type of "claude-3-5-sonnet-"', () => {
     expect(getValueKey('claude-3-5-sonnet-20240620')).toBe('claude-3-5-sonnet');
     expect(getValueKey('anthropic/claude-3-5-sonnet')).toBe('claude-3-5-sonnet');
@@ -472,30 +458,3 @@ describe('Google Model Tests', () => {
     });
   });
 });
-
-describe('Grok Model Tests - Pricing', () => {
-  describe('getMultiplier', () => {
-    test('should return correct prompt and completion rates for Grok vision models', () => {
-      const models = ['grok-2-vision-1212', 'grok-2-vision', 'grok-2-vision-latest'];
-      models.forEach((model) => {
-        expect(getMultiplier({ model, tokenType: 'prompt' })).toBe(2.0);
-        expect(getMultiplier({ model, tokenType: 'completion' })).toBe(10.0);
-      });
-    });
-
-    test('should return correct prompt and completion rates for Grok text models', () => {
-      const models = ['grok-2-1212', 'grok-2', 'grok-2-latest'];
-      models.forEach((model) => {
-        expect(getMultiplier({ model, tokenType: 'prompt' })).toBe(2.0);
-        expect(getMultiplier({ model, tokenType: 'completion' })).toBe(10.0);
-      });
-    });
-
-    test('should return correct prompt and completion rates for Grok beta models', () => {
-      expect(getMultiplier({ model: 'grok-vision-beta', tokenType: 'prompt' })).toBe(5.0);
-      expect(getMultiplier({ model: 'grok-vision-beta', tokenType: 'completion' })).toBe(15.0);
-      expect(getMultiplier({ model: 'grok-beta', tokenType: 'prompt' })).toBe(5.0);
-      expect(getMultiplier({ model: 'grok-beta', tokenType: 'completion' })).toBe(15.0);
-    });
-  });
-});

api/package.json

@@ -34,18 +34,18 @@
   },
   "homepage": "https://librechat.ai",
   "dependencies": {
-    "@anthropic-ai/sdk": "^0.37.0",
+    "@anthropic-ai/sdk": "^0.32.1",
     "@azure/search-documents": "^12.0.0",
     "@google/generative-ai": "^0.21.0",
     "@googleapis/youtube": "^20.0.0",
     "@keyv/mongo": "^2.1.8",
     "@keyv/redis": "^2.8.1",
     "@langchain/community": "^0.3.14",
-    "@langchain/core": "^0.3.40",
-    "@langchain/google-genai": "^0.1.9",
-    "@langchain/google-vertexai": "^0.2.0",
+    "@langchain/core": "^0.3.37",
+    "@langchain/google-genai": "^0.1.7",
+    "@langchain/google-vertexai": "^0.1.8",
     "@langchain/textsplitters": "^0.1.0",
-    "@librechat/agents": "^2.1.3",
+    "@librechat/agents": "^2.1.2",
     "@waylaidwanderer/fetch-event-source": "^3.0.1",
     "axios": "1.7.8",
     "bcryptjs": "^2.4.3",
@@ -57,12 +57,10 @@
     "cors": "^2.8.5",
     "dedent": "^1.5.3",
     "dotenv": "^16.0.3",
-    "eventsource": "^3.0.2",
     "express": "^4.21.2",
     "express-mongo-sanitize": "^2.2.0",
     "express-rate-limit": "^7.4.1",
     "express-session": "^1.18.1",
-    "express-static-gzip": "^2.2.0",
     "file-type": "^18.7.0",
     "firebase": "^11.0.2",
     "googleapis": "^126.0.1",
@@ -99,6 +97,7 @@
     "passport-jwt": "^4.0.1",
     "passport-ldapauth": "^3.0.1",
     "passport-local": "^1.0.0",
+    "passport-simple-webauthn2": "^3.2.0",
     "sharp": "^0.32.6",
     "tiktoken": "^1.0.15",
     "traverse": "^0.6.7",

api/server/controllers/agents/client.js

@@ -22,7 +22,6 @@ const {
 } = require('librechat-data-provider');
 const {
   formatMessage,
-  addCacheControl,
   formatAgentMessages,
   formatContentStrings,
   createContextHandlers,
@@ -590,7 +589,7 @@ class AgentClient extends BaseClient {
        * @param {number} [i]
        * @param {TMessageContentParts[]} [contentData]
        */
-      const runAgent = async (agent, _messages, i = 0, contentData = []) => {
+      const runAgent = async (agent, messages, i = 0, contentData = []) => {
         config.configurable.model = agent.model_parameters.model;
         if (i > 0) {
           this.model = agent.model_parameters.model;
@@ -623,21 +622,12 @@ class AgentClient extends BaseClient {
         }
 
         if (noSystemMessages === true && systemContent?.length) {
-          let latestMessage = _messages.pop().content;
+          let latestMessage = messages.pop().content;
           if (typeof latestMessage !== 'string') {
             latestMessage = latestMessage[0].text;
           }
           latestMessage = [systemContent, latestMessage].join('\n');
-          _messages.push(new HumanMessage(latestMessage));
-        }
-
-        let messages = _messages;
-        if (
-          agent.model_parameters?.clientOptions?.defaultHeaders?.['anthropic-beta']?.includes(
-            'prompt-caching',
-          )
-        ) {
-          messages = addCacheControl(messages);
+          messages.push(new HumanMessage(latestMessage));
         }
 
         run = await createRun({

api/server/controllers/tools.js

@@ -1,17 +1,10 @@
 const { nanoid } = require('nanoid');
 const { EnvVar } = require('@librechat/agents');
-const {
-  Tools,
-  AuthType,
-  Permissions,
-  ToolCallTypes,
-  PermissionTypes,
-} = require('librechat-data-provider');
+const { Tools, AuthType, ToolCallTypes } = require('librechat-data-provider');
 const { processFileURL, uploadImageBuffer } = require('~/server/services/Files/process');
 const { processCodeOutput } = require('~/server/services/Files/Code/process');
-const { createToolCall, getToolCallsByConvo } = require('~/models/ToolCall');
 const { loadAuthValues, loadTools } = require('~/app/clients/tools/util');
-const { checkAccess } = require('~/server/middleware');
+const { createToolCall, getToolCallsByConvo } = require('~/models/ToolCall');
 const { getMessage } = require('~/models/Message');
 const { logger } = require('~/config');
 
@@ -19,10 +12,6 @@ const fieldsMap = {
   [Tools.execute_code]: [EnvVar.CODE_API_KEY],
 };
 
-const toolAccessPermType = {
-  [Tools.execute_code]: PermissionTypes.RUN_CODE,
-};
-
 /**
  * @param {ServerRequest} req - The request object, containing information about the HTTP request.
  * @param {ServerResponse} res - The response object, used to send back the desired HTTP response.
@@ -69,7 +58,6 @@ const verifyToolAuth = async (req, res) => {
 /**
  * @param {ServerRequest} req - The request object, containing information about the HTTP request.
  * @param {ServerResponse} res - The response object, used to send back the desired HTTP response.
- * @param {NextFunction} next - The next middleware function to call.
  * @returns {Promise<void>} A promise that resolves when the function has completed.
  */
 const callTool = async (req, res) => {
@@ -95,16 +83,6 @@ const callTool = async (req, res) => {
       return;
     }
     logger.debug(`[${toolId}/call] User: ${req.user.id}`);
-    let hasAccess = true;
-    if (toolAccessPermType[toolId]) {
-      hasAccess = await checkAccess(req.user, toolAccessPermType[toolId], [Permissions.USE]);
-    }
-    if (!hasAccess) {
-      logger.warn(
-        `[${toolAccessPermType[toolId]}] Forbidden: Insufficient permissions for User ${req.user.id}: ${Permissions.USE}`,
-      );
-      return res.status(403).json({ message: 'Forbidden: Insufficient permissions' });
-    }
     const { loadedTools } = await loadTools({
       user: req.user.id,
       tools: [toolId],

api/server/index.js

@@ -21,6 +21,8 @@ const AppService = require('./services/AppService');
 const staticCache = require('./utils/staticCache');
 const noIndex = require('./middleware/noIndex');
 const routes = require('./routes');
+const { mongoUserStore, mongoChallengeStore } = require('~/cache');
+const { WebAuthnStrategy } = require('passport-simple-webauthn2');
 
 const { PORT, HOST, ALLOW_SOCIAL_LOGIN, DISABLE_COMPRESSION, TRUST_PROXY } = process.env ?? {};
 
@@ -78,11 +80,29 @@ const startServer = async () => {
     passport.use(ldapLogin);
   }
 
+  /* Passkey (WebAuthn) Strategy */
+  if (process.env.PASSKEY_ENABLED) {
+
+    const userStore = new mongoUserStore();
+    const challengeStore = new mongoChallengeStore();
+
+    passport.use(
+      new WebAuthnStrategy({
+        rpID: process.env.RP_ID || 'localhost',
+        rpName: process.env.APP_TITLE || 'LibreChat',
+        userStore,
+        challengeStore,
+        debug: true,
+      }),
+    );
+  }
+
   if (isEnabled(ALLOW_SOCIAL_LOGIN)) {
     configureSocialLogins(app);
   }
 
   app.use('/oauth', routes.oauth);
+  app.use('/webauthn', routes.authWebAuthn);
   /* API Endpoints */
   app.use('/api/auth', routes.auth);
   app.use('/api/actions', routes.actions);

api/server/middleware/roles/generateCheckAccess.js

@@ -1,42 +1,4 @@
 const { getRoleByName } = require('~/models/Role');
-const { logger } = require('~/config');
-
-/**
- * Core function to check if a user has one or more required permissions
- *
- * @param {object} user - The user object
- * @param {PermissionTypes} permissionType - The type of permission to check
- * @param {Permissions[]} permissions - The list of specific permissions to check
- * @param {Record<Permissions, string[]>} [bodyProps] - An optional object where keys are permissions and values are arrays of properties to check
- * @param {object} [checkObject] - The object to check properties against
- * @returns {Promise<boolean>} Whether the user has the required permissions
- */
-const checkAccess = async (user, permissionType, permissions, bodyProps = {}, checkObject = {}) => {
-  if (!user) {
-    return false;
-  }
-
-  const role = await getRoleByName(user.role);
-  if (role && role[permissionType]) {
-    const hasAnyPermission = permissions.some((permission) => {
-      if (role[permissionType][permission]) {
-        return true;
-      }
-
-      if (bodyProps[permission] && checkObject) {
-        return bodyProps[permission].some((prop) =>
-          Object.prototype.hasOwnProperty.call(checkObject, prop),
-        );
-      }
-
-      return false;
-    });
-
-    return hasAnyPermission;
-  }
-
-  return false;
-};
 
 /**
  * Middleware to check if a user has one or more required permissions, optionally based on `req.body` properties.
@@ -44,35 +6,42 @@ const checkAccess = async (user, permissionType, permissions, bodyProps = {}, ch
  * @param {PermissionTypes} permissionType - The type of permission to check.
  * @param {Permissions[]} permissions - The list of specific permissions to check.
  * @param {Record<Permissions, string[]>} [bodyProps] - An optional object where keys are permissions and values are arrays of `req.body` properties to check.
- * @returns {(req: ServerRequest, res: ServerResponse, next: NextFunction) => Promise<void>} Express middleware function.
+ * @returns {Function} Express middleware function.
  */
 const generateCheckAccess = (permissionType, permissions, bodyProps = {}) => {
   return async (req, res, next) => {
     try {
-      const hasAccess = await checkAccess(
-        req.user,
-        permissionType,
-        permissions,
-        bodyProps,
-        req.body,
-      );
-
-      if (hasAccess) {
-        return next();
+      const { user } = req;
+      if (!user) {
+        return res.status(401).json({ message: 'Authorization required' });
+      }
+
+      const role = await getRoleByName(user.role);
+      if (role && role[permissionType]) {
+        const hasAnyPermission = permissions.some((permission) => {
+          if (role[permissionType][permission]) {
+            return true;
+          }
+
+          if (bodyProps[permission] && req.body) {
+            return bodyProps[permission].some((prop) =>
+              Object.prototype.hasOwnProperty.call(req.body, prop),
+            );
+          }
+
+          return false;
+        });
+
+        if (hasAnyPermission) {
+          return next();
+        }
       }
 
-      logger.warn(
-        `[${permissionType}] Forbidden: Insufficient permissions for User ${req.user.id}: ${permissions.join(', ')}`,
-      );
       return res.status(403).json({ message: 'Forbidden: Insufficient permissions' });
     } catch (error) {
-      logger.error(error);
       return res.status(500).json({ message: `Server error: ${error.message}` });
     }
   };
 };
 
-module.exports = {
-  checkAccess,
-  generateCheckAccess,
-};
+module.exports = generateCheckAccess;

api/server/middleware/roles/index.js

@@ -1,8 +1,7 @@
 const checkAdmin = require('./checkAdmin');
-const { checkAccess, generateCheckAccess } = require('./generateCheckAccess');
+const generateCheckAccess = require('./generateCheckAccess');
 
 module.exports = {
   checkAdmin,
-  checkAccess,
   generateCheckAccess,
 };

api/server/routes/authWebAuthn.js

@@ -0,0 +1,44 @@
+const express = require('express');
+const passport = require('passport');
+const { setAuthTokens } = require('~/server/services/AuthService');
+const router = express.Router();
+
+router.get(
+  '/register',
+  passport.authenticate('webauthn', { session: false }),
+  (req, res) => {
+    res.json(req.user);
+  },
+);
+
+router.post(
+  '/register',
+  passport.authenticate('webauthn', { session: false, failureRedirect: '/login' }),
+  (req, res) => {
+    res.json({ user: req.user });
+  },
+);
+
+router.get(
+  '/login',
+  passport.authenticate('webauthn', { session: false }),
+  (req, res) => {
+    res.json(req.user);
+  },
+);
+
+router.post(
+  '/login',
+  passport.authenticate('webauthn', { session: false, failureRedirect: '/login' }),
+  async (req, res) => {
+    try {
+      const token = await setAuthTokens(req.user.id, res);
+      res.status(200).json({ token, user: req.user });
+    } catch (err) {
+      console.error('[WebAuthn Login Callback]', err);
+      res.status(500).json({ message: 'Something went wrong during login' });
+    }
+  },
+);
+
+module.exports = router;

api/server/routes/config.js

@@ -51,6 +51,7 @@ router.get('/', async function (req, res) {
           !!process.env.APPLE_TEAM_ID &&
           !!process.env.APPLE_KEY_ID &&
           !!process.env.APPLE_PRIVATE_KEY_PATH,
+      passkeyLoginEnabled: !!process.env.PASSKEY_ENABLED && !!process.env.RP_ID,
       openidLoginEnabled:
         !!process.env.OPENID_CLIENT_ID &&
         !!process.env.OPENID_CLIENT_SECRET &&

api/server/routes/index.js

@@ -1,3 +1,4 @@
+const authWebAuthn = require('./authWebAuthn');
 const assistants = require('./assistants');
 const categories = require('./categories');
 const tokenizer = require('./tokenizer');
@@ -55,5 +56,6 @@ module.exports = {
   assistants,
   categories,
   staticRoute,
+  authWebAuthn,
   banner,
 };

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

@@ -1,4 +1,4 @@
-const { removeNullishValues, anthropicSettings } = require('librechat-data-provider');
+const { removeNullishValues } = require('librechat-data-provider');
 const generateArtifactsPrompt = require('~/app/clients/prompts/artifacts');
 
 const buildOptions = (endpoint, parsedBody) => {
@@ -6,10 +6,8 @@ const buildOptions = (endpoint, parsedBody) => {
     modelLabel,
     promptPrefix,
     maxContextTokens,
-    resendFiles = anthropicSettings.resendFiles.default,
-    promptCache = anthropicSettings.promptCache.default,
-    thinking = anthropicSettings.thinking.default,
-    thinkingBudget = anthropicSettings.thinkingBudget.default,
+    resendFiles = true,
+    promptCache = true,
     iconURL,
     greeting,
     spec,
@@ -23,8 +21,6 @@ const buildOptions = (endpoint, parsedBody) => {
     promptPrefix,
     resendFiles,
     promptCache,
-    thinking,
-    thinkingBudget,
     iconURL,
     greeting,
     spec,

api/server/services/Endpoints/anthropic/helpers.js

@@ -1,110 +0,0 @@
-const { EModelEndpoint, anthropicSettings } = require('librechat-data-provider');
-const { matchModelName } = require('~/utils');
-const { logger } = require('~/config');
-
-/**
- * @param {string} modelName
- * @returns {boolean}
- */
-function checkPromptCacheSupport(modelName) {
-  const modelMatch = matchModelName(modelName, EModelEndpoint.anthropic);
-  if (
-    modelMatch.includes('claude-3-5-sonnet-latest') ||
-    modelMatch.includes('claude-3.5-sonnet-latest')
-  ) {
-    return false;
-  }
-
-  if (
-    modelMatch === 'claude-3-7-sonnet' ||
-    modelMatch === 'claude-3-5-sonnet' ||
-    modelMatch === 'claude-3-5-haiku' ||
-    modelMatch === 'claude-3-haiku' ||
-    modelMatch === 'claude-3-opus' ||
-    modelMatch === 'claude-3.7-sonnet' ||
-    modelMatch === 'claude-3.5-sonnet' ||
-    modelMatch === 'claude-3.5-haiku'
-  ) {
-    return true;
-  }
-
-  return false;
-}
-
-/**
- * Gets the appropriate headers for Claude models with cache control
- * @param {string} model The model name
- * @param {boolean} supportsCacheControl Whether the model supports cache control
- * @returns {AnthropicClientOptions['extendedOptions']['defaultHeaders']|undefined} The headers object or undefined if not applicable
- */
-function getClaudeHeaders(model, supportsCacheControl) {
-  if (!supportsCacheControl) {
-    return undefined;
-  }
-
-  if (/claude-3[-.]5-sonnet/.test(model)) {
-    return {
-      'anthropic-beta': 'max-tokens-3-5-sonnet-2024-07-15,prompt-caching-2024-07-31',
-    };
-  } else if (/claude-3[-.]7/.test(model)) {
-    return {
-      'anthropic-beta': 'output-128k-2025-02-19,prompt-caching-2024-07-31',
-    };
-  } else {
-    return {
-      'anthropic-beta': 'prompt-caching-2024-07-31',
-    };
-  }
-}
-
-/**
- * Configures reasoning-related options for Claude models
- * @param {AnthropicClientOptions & { max_tokens?: number }} anthropicInput The request options object
- * @param {Object} extendedOptions Additional client configuration options
- * @param {boolean} extendedOptions.thinking Whether thinking is enabled in client config
- * @param {number|null} extendedOptions.thinkingBudget The token budget for thinking
- * @returns {Object} Updated request options
- */
-function configureReasoning(anthropicInput, extendedOptions = {}) {
-  const updatedOptions = { ...anthropicInput };
-  const currentMaxTokens = updatedOptions.max_tokens ?? updatedOptions.maxTokens;
-  if (
-    extendedOptions.thinking &&
-    updatedOptions?.model &&
-    /claude-3[-.]7/.test(updatedOptions.model)
-  ) {
-    updatedOptions.thinking = {
-      type: 'enabled',
-    };
-  }
-
-  if (updatedOptions.thinking != null && extendedOptions.thinkingBudget != null) {
-    updatedOptions.thinking = {
-      ...updatedOptions.thinking,
-      budget_tokens: extendedOptions.thinkingBudget,
-    };
-  }
-
-  if (
-    updatedOptions.thinking != null &&
-    (currentMaxTokens == null || updatedOptions.thinking.budget_tokens > currentMaxTokens)
-  ) {
-    const maxTokens = anthropicSettings.maxOutputTokens.reset(updatedOptions.model);
-    updatedOptions.max_tokens = currentMaxTokens ?? maxTokens;
-
-    logger.warn(
-      updatedOptions.max_tokens === maxTokens
-        ? '[AnthropicClient] max_tokens is not defined while thinking is enabled. Setting max_tokens to model default.'
-        : `[AnthropicClient] thinking budget_tokens (${updatedOptions.thinking.budget_tokens}) exceeds max_tokens (${updatedOptions.max_tokens}). Adjusting budget_tokens.`,
-    );
-
-    updatedOptions.thinking.budget_tokens = Math.min(
-      updatedOptions.thinking.budget_tokens,
-      Math.floor(updatedOptions.max_tokens * 0.9),
-    );
-  }
-
-  return updatedOptions;
-}
-
-module.exports = { checkPromptCacheSupport, getClaudeHeaders, configureReasoning };

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

@@ -1,6 +1,5 @@
 const { HttpsProxyAgent } = require('https-proxy-agent');
 const { anthropicSettings, removeNullishValues } = require('librechat-data-provider');
-const { checkPromptCacheSupport, getClaudeHeaders } = require('./helpers');
 
 /**
  * Generates configuration options for creating an Anthropic language model (LLM) instance.
@@ -21,14 +20,6 @@ const { checkPromptCacheSupport, getClaudeHeaders } = require('./helpers');
  * @returns {Object} Configuration options for creating an Anthropic LLM instance, with null and undefined values removed.
  */
 function getLLMConfig(apiKey, options = {}) {
-  const systemOptions = {
-    thinking: options.modelOptions.thinking ?? anthropicSettings.thinking.default,
-    promptCache: options.modelOptions.promptCache ?? anthropicSettings.promptCache.default,
-    thinkingBudget: options.modelOptions.thinkingBudget ?? anthropicSettings.thinkingBudget.default,
-  };
-  for (let key in systemOptions) {
-    delete options.modelOptions[key];
-  }
   const defaultOptions = {
     model: anthropicSettings.model.default,
     maxOutputTokens: anthropicSettings.maxOutputTokens.default,
@@ -38,33 +29,19 @@ function getLLMConfig(apiKey, options = {}) {
   const mergedOptions = Object.assign(defaultOptions, options.modelOptions);
 
   /** @type {AnthropicClientOptions} */
-  let requestOptions = {
+  const requestOptions = {
     apiKey,
     model: mergedOptions.model,
     stream: mergedOptions.stream,
     temperature: mergedOptions.temperature,
+    topP: mergedOptions.topP,
+    topK: mergedOptions.topK,
     stopSequences: mergedOptions.stop,
     maxTokens:
       mergedOptions.maxOutputTokens || anthropicSettings.maxOutputTokens.reset(mergedOptions.model),
     clientOptions: {},
   };
 
-  if (!/claude-3[-.]7/.test(mergedOptions.model)) {
-    if (mergedOptions.topP !== undefined) {
-      requestOptions.topP = mergedOptions.topP;
-    }
-    if (mergedOptions.topK !== undefined) {
-      requestOptions.topK = mergedOptions.topK;
-    }
-  }
-
-  const supportsCacheControl =
-    systemOptions.promptCache === true && checkPromptCacheSupport(requestOptions.model);
-  const headers = getClaudeHeaders(requestOptions.model, supportsCacheControl);
-  if (headers) {
-    requestOptions.clientOptions.defaultHeaders = headers;
-  }
-
   if (options.proxy) {
     requestOptions.clientOptions.httpAgent = new HttpsProxyAgent(options.proxy);
   }

api/server/services/Endpoints/anthropic/llm.spec.js

@@ -1,112 +0,0 @@
-const { anthropicSettings } = require('librechat-data-provider');
-const { getLLMConfig } = require('~/server/services/Endpoints/anthropic/llm');
-
-jest.mock('https-proxy-agent', () => ({
-  HttpsProxyAgent: jest.fn().mockImplementation((proxy) => ({ proxy })),
-}));
-
-describe('getLLMConfig', () => {
-  it('should create a basic configuration with default values', () => {
-    const result = getLLMConfig('test-api-key', { modelOptions: {} });
-
-    expect(result.llmConfig).toHaveProperty('apiKey', 'test-api-key');
-    expect(result.llmConfig).toHaveProperty('model', anthropicSettings.model.default);
-    expect(result.llmConfig).toHaveProperty('stream', true);
-    expect(result.llmConfig).toHaveProperty('maxTokens');
-  });
-
-  it('should include proxy settings when provided', () => {
-    const result = getLLMConfig('test-api-key', {
-      modelOptions: {},
-      proxy: 'http://proxy:8080',
-    });
-
-    expect(result.llmConfig.clientOptions).toHaveProperty('httpAgent');
-    expect(result.llmConfig.clientOptions.httpAgent).toHaveProperty('proxy', 'http://proxy:8080');
-  });
-
-  it('should include reverse proxy URL when provided', () => {
-    const result = getLLMConfig('test-api-key', {
-      modelOptions: {},
-      reverseProxyUrl: 'http://reverse-proxy',
-    });
-
-    expect(result.llmConfig.clientOptions).toHaveProperty('baseURL', 'http://reverse-proxy');
-  });
-
-  it('should include topK and topP for non-Claude-3.7 models', () => {
-    const result = getLLMConfig('test-api-key', {
-      modelOptions: {
-        model: 'claude-3-opus',
-        topK: 10,
-        topP: 0.9,
-      },
-    });
-
-    expect(result.llmConfig).toHaveProperty('topK', 10);
-    expect(result.llmConfig).toHaveProperty('topP', 0.9);
-  });
-
-  it('should include topK and topP for Claude-3.5 models', () => {
-    const result = getLLMConfig('test-api-key', {
-      modelOptions: {
-        model: 'claude-3-5-sonnet',
-        topK: 10,
-        topP: 0.9,
-      },
-    });
-
-    expect(result.llmConfig).toHaveProperty('topK', 10);
-    expect(result.llmConfig).toHaveProperty('topP', 0.9);
-  });
-
-  it('should NOT include topK and topP for Claude-3-7 models (hyphen notation)', () => {
-    const result = getLLMConfig('test-api-key', {
-      modelOptions: {
-        model: 'claude-3-7-sonnet',
-        topK: 10,
-        topP: 0.9,
-      },
-    });
-
-    expect(result.llmConfig).not.toHaveProperty('topK');
-    expect(result.llmConfig).not.toHaveProperty('topP');
-  });
-
-  it('should NOT include topK and topP for Claude-3.7 models (decimal notation)', () => {
-    const result = getLLMConfig('test-api-key', {
-      modelOptions: {
-        model: 'claude-3.7-sonnet',
-        topK: 10,
-        topP: 0.9,
-      },
-    });
-
-    expect(result.llmConfig).not.toHaveProperty('topK');
-    expect(result.llmConfig).not.toHaveProperty('topP');
-  });
-
-  it('should handle custom maxOutputTokens', () => {
-    const result = getLLMConfig('test-api-key', {
-      modelOptions: {
-        model: 'claude-3-opus',
-        maxOutputTokens: 2048,
-      },
-    });
-
-    expect(result.llmConfig).toHaveProperty('maxTokens', 2048);
-  });
-
-  it('should handle promptCache setting', () => {
-    const result = getLLMConfig('test-api-key', {
-      modelOptions: {
-        model: 'claude-3-5-sonnet',
-        promptCache: true,
-      },
-    });
-
-    // We're not checking specific header values since that depends on the actual helper function
-    // Just verifying that the promptCache setting is processed
-    expect(result.llmConfig).toBeDefined();
-  });
-});

api/server/services/ModelService.js

@@ -129,6 +129,9 @@ const fetchOpenAIModels = async (opts, _models = []) => {
     //   .split('/deployments')[0]
     //   .concat(`/models?api-version=${azure.azureOpenAIApiVersion}`);
     // apiKey = azureOpenAIApiKey;
+  } else if (process.env.OPENROUTER_API_KEY) {
+    reverseProxyUrl = 'https://openrouter.ai/api/v1';
+    apiKey = process.env.OPENROUTER_API_KEY;
   }
 
   if (reverseProxyUrl) {
@@ -215,7 +218,7 @@ const getOpenAIModels = async (opts) => {
     return models;
   }
 
-  if (userProvidedOpenAI) {
+  if (userProvidedOpenAI && !process.env.OPENROUTER_API_KEY) {
     return models;
   }
 

api/server/services/ModelService.spec.js

@@ -161,6 +161,22 @@ describe('getOpenAIModels', () => {
     expect(models).toEqual(expect.arrayContaining(['openai-model', 'openai-model-2']));
   });
 
+  it('attempts to use OPENROUTER_API_KEY if set', async () => {
+    process.env.OPENROUTER_API_KEY = 'test-router-key';
+    const expectedModels = ['model-router-1', 'model-router-2'];
+
+    axios.get.mockResolvedValue({
+      data: {
+        data: expectedModels.map((id) => ({ id })),
+      },
+    });
+
+    const models = await getOpenAIModels({ user: 'user456' });
+
+    expect(models).toEqual(expect.arrayContaining(expectedModels));
+    expect(axios.get).toHaveBeenCalled();
+  });
+
   it('utilizes proxy configuration when PROXY is set', async () => {
     axios.get.mockResolvedValue({
       data: {

api/server/services/start/interface.js

@@ -34,8 +34,6 @@ async function loadDefaultInterface(config, configDefaults, roleName = SystemRol
     multiConvo: interfaceConfig?.multiConvo ?? defaults.multiConvo,
     agents: interfaceConfig?.agents ?? defaults.agents,
     temporaryChat: interfaceConfig?.temporaryChat ?? defaults.temporaryChat,
-    runCode: interfaceConfig?.runCode ?? defaults.runCode,
-    customWelcome: interfaceConfig?.customWelcome ?? defaults.customWelcome,
   });
 
   await updateAccessPermissions(roleName, {
@@ -43,16 +41,12 @@ async function loadDefaultInterface(config, configDefaults, roleName = SystemRol
     [PermissionTypes.BOOKMARKS]: { [Permissions.USE]: loadedInterface.bookmarks },
     [PermissionTypes.MULTI_CONVO]: { [Permissions.USE]: loadedInterface.multiConvo },
     [PermissionTypes.AGENTS]: { [Permissions.USE]: loadedInterface.agents },
-    [PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: loadedInterface.temporaryChat },
-    [PermissionTypes.RUN_CODE]: { [Permissions.USE]: loadedInterface.runCode },
   });
   await updateAccessPermissions(SystemRoles.ADMIN, {
     [PermissionTypes.PROMPTS]: { [Permissions.USE]: loadedInterface.prompts },
     [PermissionTypes.BOOKMARKS]: { [Permissions.USE]: loadedInterface.bookmarks },
     [PermissionTypes.MULTI_CONVO]: { [Permissions.USE]: loadedInterface.multiConvo },
     [PermissionTypes.AGENTS]: { [Permissions.USE]: loadedInterface.agents },
-    [PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: loadedInterface.temporaryChat },
-    [PermissionTypes.RUN_CODE]: { [Permissions.USE]: loadedInterface.runCode },
   });
 
   let i = 0;

api/server/services/start/interface.spec.js

@@ -14,8 +14,6 @@ describe('loadDefaultInterface', () => {
         bookmarks: true,
         multiConvo: true,
         agents: true,
-        temporaryChat: true,
-        runCode: true,
       },
     };
     const configDefaults = { interface: {} };
@@ -27,8 +25,6 @@ describe('loadDefaultInterface', () => {
       [PermissionTypes.BOOKMARKS]: { [Permissions.USE]: true },
       [PermissionTypes.MULTI_CONVO]: { [Permissions.USE]: true },
       [PermissionTypes.AGENTS]: { [Permissions.USE]: true },
-      [PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: true },
-      [PermissionTypes.RUN_CODE]: { [Permissions.USE]: true },
     });
   });
 
@@ -39,8 +35,6 @@ describe('loadDefaultInterface', () => {
         bookmarks: false,
         multiConvo: false,
         agents: false,
-        temporaryChat: false,
-        runCode: false,
       },
     };
     const configDefaults = { interface: {} };
@@ -52,8 +46,6 @@ describe('loadDefaultInterface', () => {
       [PermissionTypes.BOOKMARKS]: { [Permissions.USE]: false },
       [PermissionTypes.MULTI_CONVO]: { [Permissions.USE]: false },
       [PermissionTypes.AGENTS]: { [Permissions.USE]: false },
-      [PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: false },
-      [PermissionTypes.RUN_CODE]: { [Permissions.USE]: false },
     });
   });
 
@@ -68,8 +60,6 @@ describe('loadDefaultInterface', () => {
       [PermissionTypes.BOOKMARKS]: { [Permissions.USE]: undefined },
       [PermissionTypes.MULTI_CONVO]: { [Permissions.USE]: undefined },
       [PermissionTypes.AGENTS]: { [Permissions.USE]: undefined },
-      [PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: undefined },
-      [PermissionTypes.RUN_CODE]: { [Permissions.USE]: undefined },
     });
   });
 
@@ -80,8 +70,6 @@ describe('loadDefaultInterface', () => {
         bookmarks: undefined,
         multiConvo: undefined,
         agents: undefined,
-        temporaryChat: undefined,
-        runCode: undefined,
       },
     };
     const configDefaults = { interface: {} };
@@ -93,8 +81,6 @@ describe('loadDefaultInterface', () => {
       [PermissionTypes.BOOKMARKS]: { [Permissions.USE]: undefined },
       [PermissionTypes.MULTI_CONVO]: { [Permissions.USE]: undefined },
       [PermissionTypes.AGENTS]: { [Permissions.USE]: undefined },
-      [PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: undefined },
-      [PermissionTypes.RUN_CODE]: { [Permissions.USE]: undefined },
     });
   });
 
@@ -105,8 +91,6 @@ describe('loadDefaultInterface', () => {
         bookmarks: false,
         multiConvo: undefined,
         agents: true,
-        temporaryChat: undefined,
-        runCode: false,
       },
     };
     const configDefaults = { interface: {} };
@@ -118,8 +102,6 @@ describe('loadDefaultInterface', () => {
       [PermissionTypes.BOOKMARKS]: { [Permissions.USE]: false },
       [PermissionTypes.MULTI_CONVO]: { [Permissions.USE]: undefined },
       [PermissionTypes.AGENTS]: { [Permissions.USE]: true },
-      [PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: undefined },
-      [PermissionTypes.RUN_CODE]: { [Permissions.USE]: false },
     });
   });
 
@@ -131,8 +113,6 @@ describe('loadDefaultInterface', () => {
         bookmarks: true,
         multiConvo: true,
         agents: true,
-        temporaryChat: true,
-        runCode: true,
       },
     };
 
@@ -143,8 +123,6 @@ describe('loadDefaultInterface', () => {
       [PermissionTypes.BOOKMARKS]: { [Permissions.USE]: true },
       [PermissionTypes.MULTI_CONVO]: { [Permissions.USE]: true },
       [PermissionTypes.AGENTS]: { [Permissions.USE]: true },
-      [PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: true },
-      [PermissionTypes.RUN_CODE]: { [Permissions.USE]: true },
     });
   });
 
@@ -159,8 +137,6 @@ describe('loadDefaultInterface', () => {
       [PermissionTypes.BOOKMARKS]: { [Permissions.USE]: undefined },
       [PermissionTypes.MULTI_CONVO]: { [Permissions.USE]: true },
       [PermissionTypes.AGENTS]: { [Permissions.USE]: undefined },
-      [PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: undefined },
-      [PermissionTypes.RUN_CODE]: { [Permissions.USE]: undefined },
     });
   });
 
@@ -175,8 +151,6 @@ describe('loadDefaultInterface', () => {
       [PermissionTypes.BOOKMARKS]: { [Permissions.USE]: undefined },
       [PermissionTypes.MULTI_CONVO]: { [Permissions.USE]: false },
       [PermissionTypes.AGENTS]: { [Permissions.USE]: undefined },
-      [PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: undefined },
-      [PermissionTypes.RUN_CODE]: { [Permissions.USE]: undefined },
     });
   });
 
@@ -191,8 +165,6 @@ describe('loadDefaultInterface', () => {
       [PermissionTypes.BOOKMARKS]: { [Permissions.USE]: undefined },
       [PermissionTypes.MULTI_CONVO]: { [Permissions.USE]: undefined },
       [PermissionTypes.AGENTS]: { [Permissions.USE]: undefined },
-      [PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: undefined },
-      [PermissionTypes.RUN_CODE]: { [Permissions.USE]: undefined },
     });
   });
 
@@ -203,8 +175,6 @@ describe('loadDefaultInterface', () => {
         bookmarks: false,
         multiConvo: true,
         agents: false,
-        temporaryChat: true,
-        runCode: false,
       },
     };
     const configDefaults = { interface: {} };
@@ -216,8 +186,6 @@ describe('loadDefaultInterface', () => {
       [PermissionTypes.BOOKMARKS]: { [Permissions.USE]: false },
       [PermissionTypes.MULTI_CONVO]: { [Permissions.USE]: true },
       [PermissionTypes.AGENTS]: { [Permissions.USE]: false },
-      [PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: true },
-      [PermissionTypes.RUN_CODE]: { [Permissions.USE]: false },
     });
   });
 
@@ -229,8 +197,6 @@ describe('loadDefaultInterface', () => {
         bookmarks: true,
         multiConvo: false,
         agents: undefined,
-        temporaryChat: undefined,
-        runCode: undefined,
       },
     };
 
@@ -241,8 +207,6 @@ describe('loadDefaultInterface', () => {
       [PermissionTypes.BOOKMARKS]: { [Permissions.USE]: true },
       [PermissionTypes.MULTI_CONVO]: { [Permissions.USE]: false },
       [PermissionTypes.AGENTS]: { [Permissions.USE]: undefined },
-      [PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: undefined },
-      [PermissionTypes.RUN_CODE]: { [Permissions.USE]: undefined },
     });
   });
 });

api/server/utils/staticCache.js

@@ -1,4 +1,4 @@
-const expressStaticGzip = require('express-static-gzip');
+const express = require('express');
 
 const oneDayInSeconds = 24 * 60 * 60;
 
@@ -6,13 +6,13 @@ const sMaxAge = process.env.STATIC_CACHE_S_MAX_AGE || oneDayInSeconds;
 const maxAge = process.env.STATIC_CACHE_MAX_AGE || oneDayInSeconds * 2;
 
 const staticCache = (staticPath) =>
-  expressStaticGzip(staticPath, {
-    enableBrotli: false, // disable Brotli, only using gzip
-    orderPreference: ['gz'],
-    setHeaders: (res, _path) => {
-      if (process.env.NODE_ENV?.toLowerCase() === 'production') {
-        res.setHeader('Cache-Control', `public, max-age=${maxAge}, s-maxage=${sMaxAge}`);
+  express.static(staticPath, {
+    setHeaders: (res) => {
+      if (process.env.NODE_ENV?.toLowerCase() !== 'production') {
+        return;
       }
+
+      res.setHeader('Cache-Control', `public, max-age=${maxAge}, s-maxage=${sMaxAge}`);
     },
   });
 

api/typedefs.js

@@ -20,12 +20,6 @@
  * @memberof typedefs
  */
 
-/**
- * @exports NextFunction
- * @typedef {import('express').NextFunction} NextFunction
- * @memberof typedefs
- */
-
 /**
  * @exports AgentRun
  * @typedef {import('@librechat/agents').Run} AgentRun

api/utils/tokens.js

@@ -74,7 +74,6 @@ const anthropicModels = {
   'claude-instant': 100000,
   'claude-2': 100000,
   'claude-2.1': 200000,
-  'claude-3': 200000,
   'claude-3-haiku': 200000,
   'claude-3-sonnet': 200000,
   'claude-3-opus': 200000,
@@ -82,8 +81,6 @@ const anthropicModels = {
   'claude-3-5-haiku': 200000,
   'claude-3-5-sonnet': 200000,
   'claude-3.5-sonnet': 200000,
-  'claude-3-7-sonnet': 200000,
-  'claude-3.7-sonnet': 200000,
   'claude-3-5-sonnet-latest': 200000,
   'claude-3.5-sonnet-latest': 200000,
 };
@@ -186,18 +183,7 @@ const bedrockModels = {
   ...amazonModels,
 };
 
-const xAIModels = {
-  'grok-beta': 131072,
-  'grok-vision-beta': 8192,
-  'grok-2': 131072,
-  'grok-2-latest': 131072,
-  'grok-2-1212': 131072,
-  'grok-2-vision': 32768,
-  'grok-2-vision-latest': 32768,
-  'grok-2-vision-1212': 32768,
-};
-
-const aggregateModels = { ...openAIModels, ...googleModels, ...bedrockModels, ...xAIModels };
+const aggregateModels = { ...openAIModels, ...googleModels, ...bedrockModels };
 
 const maxTokensMap = {
   [EModelEndpoint.azureOpenAI]: openAIModels,

api/utils/tokens.spec.js

@@ -116,7 +116,6 @@ describe('getModelMaxTokens', () => {
       'claude-3-sonnet',
       'claude-3-opus',
       'claude-3-5-sonnet',
-      'claude-3-7-sonnet',
     ];
 
     const maxTokens = {
@@ -484,68 +483,3 @@ describe('Meta Models Tests', () => {
     });
   });
 });
-
-describe('Grok Model Tests - Tokens', () => {
-  describe('getModelMaxTokens', () => {
-    test('should return correct tokens for Grok vision models', () => {
-      expect(getModelMaxTokens('grok-2-vision-1212')).toBe(32768);
-      expect(getModelMaxTokens('grok-2-vision')).toBe(32768);
-      expect(getModelMaxTokens('grok-2-vision-latest')).toBe(32768);
-    });
-
-    test('should return correct tokens for Grok beta models', () => {
-      expect(getModelMaxTokens('grok-vision-beta')).toBe(8192);
-      expect(getModelMaxTokens('grok-beta')).toBe(131072);
-    });
-
-    test('should return correct tokens for Grok text models', () => {
-      expect(getModelMaxTokens('grok-2-1212')).toBe(131072);
-      expect(getModelMaxTokens('grok-2')).toBe(131072);
-      expect(getModelMaxTokens('grok-2-latest')).toBe(131072);
-    });
-
-    test('should handle partial matches for Grok models with prefixes', () => {
-      // Vision models should match before general models
-      expect(getModelMaxTokens('openai/grok-2-vision-1212')).toBe(32768);
-      expect(getModelMaxTokens('openai/grok-2-vision')).toBe(32768);
-      expect(getModelMaxTokens('openai/grok-2-vision-latest')).toBe(32768);
-      // Beta models
-      expect(getModelMaxTokens('openai/grok-vision-beta')).toBe(8192);
-      expect(getModelMaxTokens('openai/grok-beta')).toBe(131072);
-      // Text models
-      expect(getModelMaxTokens('openai/grok-2-1212')).toBe(131072);
-      expect(getModelMaxTokens('openai/grok-2')).toBe(131072);
-      expect(getModelMaxTokens('openai/grok-2-latest')).toBe(131072);
-    });
-  });
-
-  describe('matchModelName', () => {
-    test('should match exact Grok model names', () => {
-      // Vision models
-      expect(matchModelName('grok-2-vision-1212')).toBe('grok-2-vision-1212');
-      expect(matchModelName('grok-2-vision')).toBe('grok-2-vision');
-      expect(matchModelName('grok-2-vision-latest')).toBe('grok-2-vision-latest');
-      // Beta models
-      expect(matchModelName('grok-vision-beta')).toBe('grok-vision-beta');
-      expect(matchModelName('grok-beta')).toBe('grok-beta');
-      // Text models
-      expect(matchModelName('grok-2-1212')).toBe('grok-2-1212');
-      expect(matchModelName('grok-2')).toBe('grok-2');
-      expect(matchModelName('grok-2-latest')).toBe('grok-2-latest');
-    });
-
-    test('should match Grok model variations with prefixes', () => {
-      // Vision models should match before general models
-      expect(matchModelName('openai/grok-2-vision-1212')).toBe('grok-2-vision-1212');
-      expect(matchModelName('openai/grok-2-vision')).toBe('grok-2-vision');
-      expect(matchModelName('openai/grok-2-vision-latest')).toBe('grok-2-vision-latest');
-      // Beta models
-      expect(matchModelName('openai/grok-vision-beta')).toBe('grok-vision-beta');
-      expect(matchModelName('openai/grok-beta')).toBe('grok-beta');
-      // Text models
-      expect(matchModelName('openai/grok-2-1212')).toBe('grok-2-1212');
-      expect(matchModelName('openai/grok-2')).toBe('grok-2');
-      expect(matchModelName('openai/grok-2-latest')).toBe('grok-2-latest');
-    });
-  });
-});

client/index.html

@@ -6,7 +6,6 @@
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-    <meta name="description" content="LibreChat - An open source chat application with support for multiple AI models" />
     <title>LibreChat</title>
     <link rel="shortcut icon" href="#" />
     <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png" />
@@ -54,5 +53,6 @@
     <div id="root">
       <div id="loading-container"></div>
     </div>
+    <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>

client/package.json

@@ -65,7 +65,7 @@
     "framer-motion": "^11.5.4",
     "html-to-image": "^1.11.11",
     "i18next": "^24.2.2",
-    "i18next-browser-languagedetector": "^8.0.4",
+    "i18next-browser-languagedetector": "^8.0.3",
     "input-otp": "^1.4.2",
     "js-cookie": "^3.0.5",
     "librechat-data-provider": "*",
@@ -83,7 +83,7 @@
     "react-flip-toolkit": "^7.1.0",
     "react-gtm-module": "^2.0.11",
     "react-hook-form": "^7.43.9",
-    "react-i18next": "^15.4.1",
+    "react-i18next": "^15.4.0",
     "react-lazy-load-image-component": "^1.6.0",
     "react-markdown": "^9.0.1",
     "react-resizable-panels": "^2.1.7",
@@ -101,9 +101,9 @@
     "remark-math": "^6.0.0",
     "remark-supersub": "^1.0.0",
     "sse.js": "^2.5.0",
-    "tailwind-merge": "^3.0.2",
-    "tailwindcss-animate": "^1.0.7",
-    "tailwindcss-radix": "^4.0.2",
+    "tailwind-merge": "^1.9.1",
+    "tailwindcss-animate": "^1.0.5",
+    "tailwindcss-radix": "^2.8.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
@@ -121,7 +121,7 @@
     "@types/node": "^20.3.0",
     "@types/react": "^18.2.11",
     "@types/react-dom": "^18.2.4",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.20",
     "babel-plugin-replace-ts-export-assignment": "^0.0.2",
     "babel-plugin-root-import": "^6.6.0",
@@ -134,13 +134,14 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-file-loader": "^1.0.3",
     "jest-junit": "^16.0.0",
-    "tailwindcss": "^4.0.9",
-    "@tailwindcss/vite": "^4.0.9",
+    "postcss": "^8.4.31",
+    "postcss-loader": "^7.1.0",
+    "postcss-preset-env": "^8.2.0",
+    "tailwindcss": "^3.4.1",
     "ts-jest": "^29.2.5",
     "typescript": "^5.3.3",
     "vite": "^6.1.0",
     "vite-plugin-node-polyfills": "^0.17.0",
-    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-pwa": "^0.21.1"
   }
 }

client/postcss.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-preset-env'),
+    require('tailwindcss'),
+    require('autoprefixer'),
+  ],
+};

client/public/robots.txt

@@ -1,3 +0,0 @@
-User-agent: *
-Disallow: /api/
-Allow: /

client/src/App.jsx

@@ -35,7 +35,7 @@ const App = () => {
                   <RouterProvider router={router} />
                   <ReactQueryDevtools initialIsOpen={false} position="top-right" />
                   <Toast />
-                  <RadixToast.Viewport className="pointer-events-none fixed inset-0 z-1000 mx-auto my-2 flex max-w-[560px] flex-col items-stretch justify-start md:pb-5" />
+                  <RadixToast.Viewport className="pointer-events-none fixed inset-0 z-[1000] mx-auto my-2 flex max-w-[560px] flex-col items-stretch justify-start md:pb-5" />
                 </DndProvider>
               </ToastProvider>
             </RadixToast.Provider>

client/src/components/Artifacts/ArtifactTabs.tsx

@@ -31,7 +31,7 @@ export default function ArtifactTabs({
         ref={contentRef}
         value="code"
         id="artifacts-code"
-        className={cn('grow overflow-auto')}
+        className={cn('flex-grow overflow-auto')}
       >
         <ArtifactCodeEditor
           files={files}
@@ -45,7 +45,7 @@ export default function ArtifactTabs({
       </Tabs.Content>
       <Tabs.Content
         value="preview"
-        className={cn('grow overflow-auto', isMermaid ? 'bg-[#282C34]' : 'bg-white')}
+        className={cn('flex-grow overflow-auto', isMermaid ? 'bg-[#282C34]' : 'bg-white')}
       >
         <ArtifactPreview
           files={files}

client/src/components/Artifacts/Code.tsx

@@ -26,7 +26,7 @@ export const code: React.ElementType = memo(({ inline, className, children }: TC
     );
   }
 
-  return <code className={`hljs language-${lang} whitespace-pre!`}>{children}</code>;
+  return <code className={`hljs language-${lang} !whitespace-pre`}>{children}</code>;
 });
 
 export const CodeMarkdown = memo(

client/src/components/Audio/Voices.tsx

@@ -27,7 +27,7 @@ export function EdgeVoiceDropdown() {
         value={voice ?? ''}
         options={voices}
         onChange={handleVoiceChange}
-        sizeClasses="min-w-[200px] max-w-[400px]! [--anchor-max-width:400px]"
+        sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]"
         testId="EdgeVoiceDropdown"
       />
     </div>
@@ -55,7 +55,7 @@ export function BrowserVoiceDropdown() {
         value={voice ?? ''}
         options={voices}
         onChange={handleVoiceChange}
-        sizeClasses="min-w-[200px] max-w-[400px]! [--anchor-max-width:400px]"
+        sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]"
         testId="BrowserVoiceDropdown"
       />
     </div>
@@ -83,7 +83,7 @@ export function ExternalVoiceDropdown() {
         value={voice ?? ''}
         options={voices}
         onChange={handleVoiceChange}
-        sizeClasses="min-w-[200px] max-w-[400px]! [--anchor-max-width:400px]"
+        sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]"
         testId="ExternalVoiceDropdown"
       />
     </div>

client/src/components/Auth/AuthLayout.tsx

@@ -5,6 +5,8 @@ import SocialLoginRender from './SocialLoginRender';
 import { ThemeSelector } from '~/components/ui';
 import { Banner } from '../Banners';
 import Footer from './Footer';
+import { useState } from 'react';
+import PasskeyAuth from '~/components/Auth/PasskeyAuth';
 
 const ErrorRender = ({ children }: { children: React.ReactNode }) => (
   <div className="mt-16 flex justify-center">
@@ -57,6 +59,12 @@ function AuthLayout({
     return null;
   };
 
+  // Determine the mode from the URL: if the pathname contains "register" then mode is "register", else "login"
+  const mode = pathname.includes('register') ? 'register' : 'login';
+
+  // Local state to toggle between the default form (children) and the passkey view.
+  const [showPasskey, setShowPasskey] = useState(false);
+
   return (
     <div className="relative flex min-h-screen flex-col bg-white dark:bg-gray-900">
       <Banner />
@@ -74,7 +82,7 @@ function AuthLayout({
         <ThemeSelector />
       </div>
 
-      <div className="flex grow items-center justify-center">
+      <div className="flex flex-grow items-center justify-center">
         <div className="w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
           {!hasStartupConfigError && !isFetching && (
             <h1
@@ -84,10 +92,19 @@ function AuthLayout({
               {header}
             </h1>
           )}
-          {children}
-          {!pathname.includes('2fa') &&
-            (pathname.includes('login') || pathname.includes('register')) && (
-            <SocialLoginRender startupConfig={startupConfig} />
+          {showPasskey ? (
+            <PasskeyAuth mode={mode} onBack={() => setShowPasskey(false)} />
+          ) : (
+            <>
+              {children}
+              {!pathname.includes('2fa') && (pathname.includes('login') || pathname.includes('register')) && (
+                <SocialLoginRender
+                  startupConfig={startupConfig}
+                  mode={mode}
+                  onPasskeyClick={() => setShowPasskey(true)}
+                />
+              )}
+            </>
           )}
         </div>
       </div>

client/src/components/Auth/ErrorMessage.tsx

@@ -2,7 +2,7 @@ export const ErrorMessage = ({ children }: { children: React.ReactNode }) => (
   <div
     role="alert"
     aria-live="assertive"
-    className="relative mt-6 rounded-lg border border-red-500/20 bg-red-50/50 px-6 py-4 text-red-700 shadow-2xs transition-all dark:bg-red-950/30 dark:text-red-100"
+    className="relative mt-6 rounded-lg border border-red-500/20 bg-red-50/50 px-6 py-4 text-red-700 shadow-sm transition-all dark:bg-red-950/30 dark:text-red-100"
   >
     {children}
   </div>

client/src/components/Auth/LoginForm.tsx

@@ -98,7 +98,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
               aria-invalid={!!errors.email}
               className="
                 webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light
-                bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-hidden
+                bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none
               "
               placeholder=" "
             />
@@ -108,7 +108,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
                 absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200
                 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100
                 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-600 dark:peer-focus:text-green-500
-                peer-focus:rtl:left-auto peer-focus:rtl:translate-x-1/4
+                rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4
                 "
             >
               {useUsernameLogin
@@ -133,7 +133,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
               aria-invalid={!!errors.password}
               className="
                 webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light
-                bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-hidden
+                bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none
                 "
               placeholder=" "
             />
@@ -143,7 +143,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
                 absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200
                 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100
                 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-600 dark:peer-focus:text-green-500
-                peer-focus:rtl:left-auto peer-focus:rtl:translate-x-1/4
+                rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4
                 "
             >
               {localize('com_auth_password')}

client/src/components/Auth/PasskeyAuth.tsx

@@ -0,0 +1,283 @@
+import React, { useState } from 'react';
+import { TranslationKeys, useLocalize } from '~/hooks';
+
+type PasskeyAuthProps = {
+  mode: 'login' | 'register';
+  onBack?: () => void;
+};
+
+const PasskeyAuth: React.FC<PasskeyAuthProps> = ({ mode, onBack }) => {
+  const localize = useLocalize();
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  // Utility for showing errors using localized keys
+  const alertError = (key: TranslationKeys, error: any) => {
+    console.error(`${localize(key)} error:`, error);
+    alert(
+      `${localize(key)}: ${error.message}. ${localize('com_auth_passkey_try_again')}`
+    );
+  };
+
+  // Convert login challenge options from the server
+  const processLoginOptions = (options: any) => {
+    options.challenge = base64URLToArrayBuffer(options.challenge);
+    if (options.allowCredentials) {
+      options.allowCredentials = options.allowCredentials.map((cred: any) => ({
+        ...cred,
+        id: base64URLToArrayBuffer(cred.id),
+      }));
+    }
+    return options;
+  };
+
+  // Convert registration challenge options from the server
+  const processRegistrationOptions = (options: any) => {
+    options.challenge = base64URLToArrayBuffer(options.challenge);
+    options.user.id = base64URLToArrayBuffer(options.user.id);
+    if (options.excludeCredentials) {
+      options.excludeCredentials = options.excludeCredentials.map((cred: any) => ({
+        ...cred,
+        id: base64URLToArrayBuffer(cred.id),
+      }));
+    }
+    return options;
+  };
+
+  // Format the authentication response from navigator.credentials.get()
+  const getAuthenticationResponse = (credential: PublicKeyCredential) => ({
+    id: credential.id,
+    rawId: arrayBufferToBase64URL(credential.rawId),
+    type: credential.type,
+    response: {
+      authenticatorData: arrayBufferToBase64URL(
+        (credential.response as any).authenticatorData
+      ),
+      clientDataJSON: arrayBufferToBase64URL(
+        (credential.response as any).clientDataJSON
+      ),
+      signature: arrayBufferToBase64URL(
+        (credential.response as any).signature
+      ),
+      userHandle: (credential.response as any).userHandle
+        ? arrayBufferToBase64URL((credential.response as any).userHandle)
+        : null,
+    },
+  });
+
+  // Format the registration response from navigator.credentials.create()
+  const getRegistrationResponse = (credential: PublicKeyCredential) => ({
+    id: credential.id,
+    rawId: arrayBufferToBase64URL(credential.rawId),
+    type: credential.type,
+    response: {
+      clientDataJSON: arrayBufferToBase64URL(
+        (credential.response as any).clientDataJSON
+      ),
+      attestationObject: arrayBufferToBase64URL(
+        (credential.response as any).attestationObject
+      ),
+    },
+  });
+
+  // --- PASSKEY LOGIN FLOW ---
+  async function handlePasskeyLogin() {
+    if (!email) {
+      // (You may wish to replace this literal with a localized string if available.)
+      return alert('Email is required for login.');
+    }
+    if (typeof PublicKeyCredential === 'undefined') {
+      alert(localize('com_auth_passkey_not_supported'));
+      return;
+    }
+    setLoading(true);
+    try {
+      const challengeResponse = await fetch(
+        `/webauthn/login?email=${encodeURIComponent(email)}`,
+        {
+          method: 'GET',
+          headers: { 'Content-Type': 'application/json' },
+        }
+      );
+      if (!challengeResponse.ok) {
+        const errorData = await challengeResponse.json();
+        throw new Error(
+          errorData.error || localize('com_auth_passkey_error')
+        );
+      }
+      let options = await challengeResponse.json();
+      options = processLoginOptions(options);
+
+      const credential = (await navigator.credentials.get({
+        publicKey: options,
+      })) as PublicKeyCredential;
+      if (!credential) {
+        throw new Error(localize('com_auth_passkey_no_credentials'));
+      }
+
+      const authenticationResponse = getAuthenticationResponse(credential);
+      const loginCallbackResponse = await fetch('/webauthn/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, credential: authenticationResponse }),
+      });
+      const result = await loginCallbackResponse.json();
+      if (result.user) {
+        // alert(localize('com_auth_passkey_login_success'));
+        window.location.href = '/';
+      } else {
+        throw new Error(
+          result.error || localize('com_auth_passkey_error')
+        );
+      }
+    } catch (error: any) {
+      alertError('com_auth_passkey_failed', error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // --- PASSKEY REGISTRATION FLOW ---
+  async function handlePasskeyRegister() {
+    if (!email) {
+      // (You may wish to replace this literal with a localized string if available.)
+      return alert('Email is required for registration.');
+    }
+    if (typeof PublicKeyCredential === 'undefined') {
+      alert(localize('com_auth_passkey_not_supported'));
+      return;
+    }
+    setLoading(true);
+    try {
+      const challengeResponse = await fetch(
+        `/webauthn/register?email=${encodeURIComponent(email)}`,
+        {
+          method: 'GET',
+          headers: { 'Content-Type': 'application/json' },
+        }
+      );
+      if (!challengeResponse.ok) {
+        const errorData = await challengeResponse.json();
+        throw new Error(
+          errorData.error || localize('com_auth_passkey_error')
+        );
+      }
+      let options = await challengeResponse.json();
+      options = processRegistrationOptions(options);
+
+      const credential = (await navigator.credentials.create({
+        publicKey: options,
+      })) as PublicKeyCredential;
+      if (!credential) {
+        throw new Error(localize('com_auth_passkey_create_error'));
+      }
+
+      const registrationResponse = getRegistrationResponse(credential);
+      const registerCallbackResponse = await fetch('/webauthn/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, credential: registrationResponse }),
+      });
+      const result = await registerCallbackResponse.json();
+      if (result.user) {
+        // alert(localize('com_auth_passkey_register_success'));
+        window.location.href = '/login';
+      } else {
+        throw new Error(
+          result.error || localize('com_auth_passkey_error')
+        );
+      }
+    } catch (error: any) {
+      alertError('com_auth_passkey_registration_failed', error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (mode === 'login') {
+      await handlePasskeyLogin();
+    } else {
+      await handlePasskeyRegister();
+    }
+  };
+
+  return (
+    <div className="mt-6">
+      <form onSubmit={handleSubmit}>
+        <div className="relative mb-4">
+          <input
+            type="text"
+            id="passkey-email"
+            autoComplete="email"
+            aria-label={localize('com_auth_email')}
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            className="
+              webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light
+              bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none
+            "
+            placeholder=" "
+          />
+          <label
+            htmlFor="passkey-email"
+            className="
+              absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200
+              peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100
+              peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-600 dark:peer-focus:text-green-500
+              rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4
+            "
+          >
+            {localize('com_auth_email_address')}
+          </label>
+        </div>
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50"
+        >
+          {loading
+            ? localize('com_auth_loading')
+            : localize(
+              mode === 'login'
+                ? 'com_auth_passkey_login_success'
+                : 'com_auth_passkey_register_success'
+            )}
+        </button>
+      </form>
+      {onBack && (
+        <div className="mt-4 text-center">
+          <button
+            onClick={onBack}
+            className="text-sm font-medium text-blue-600 hover:underline"
+          >
+            {localize(
+              mode === 'login'
+                ? 'com_auth_back_to_login'
+                : 'com_auth_back_to_register',
+            )}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PasskeyAuth;
+
+// Utility functions for base64url conversion
+function base64URLToArrayBuffer(base64url: string): ArrayBuffer {
+  const padding = '='.repeat((4 - (base64url.length % 4)) % 4);
+  const base64 = (base64url + padding).replace(/-/g, '+').replace(/_/g, '/');
+  const binary = atob(base64);
+  return Uint8Array.from(binary, (c) => c.charCodeAt(0)).buffer;
+}
+
+function arrayBufferToBase64URL(buffer: ArrayBuffer): string {
+  return btoa(String.fromCharCode(...new Uint8Array(buffer)))
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=+$/, '');
+}

client/src/components/Auth/Registration.tsx

@@ -71,7 +71,7 @@ const Registration: React.FC = () => {
           aria-invalid={!!errors[id]}
           className="
             webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light
-            bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-hidden
+            bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none
           "
           placeholder=" "
           data-testid={id}
@@ -82,7 +82,7 @@ const Registration: React.FC = () => {
             absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200
             peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100
             peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-500
-            peer-focus:rtl:left-auto peer-focus:rtl:translate-x-1/4
+            rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4
           "
         >
           {localize(label)}
@@ -185,7 +185,7 @@ const Registration: React.FC = () => {
                 aria-label="Submit registration"
                 className="
             w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white
-            transition-colors hover:bg-green-700 focus:outline-hidden focus:ring-2
+            transition-colors hover:bg-green-700 focus:outline-none focus:ring-2
             focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50
             disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700
           "

client/src/components/Auth/RequestPasswordReset.tsx

@@ -10,7 +10,7 @@ import { useLocalize } from '~/hooks';
 const BodyTextWrapper: FC<{ children: ReactNode }> = ({ children }) => {
   return (
     <div
-      className="relative mt-6 rounded-lg border border-green-500/20 bg-green-50/50 px-6 py-4 text-green-700 shadow-2xs transition-all dark:bg-green-950/30 dark:text-green-100"
+      className="relative mt-6 rounded-lg border border-green-500/20 bg-green-50/50 px-6 py-4 text-green-700 shadow-sm transition-all dark:bg-green-950/30 dark:text-green-100"
       role="alert"
     >
       {children}
@@ -108,7 +108,7 @@ function RequestPasswordReset() {
             className="
               peer w-full rounded-lg border border-gray-300 bg-transparent px-4 py-3
               text-base text-gray-900 placeholder-transparent transition-all
-              focus:border-green-500 focus:outline-hidden focus:ring-2 focus:ring-green-500/20
+              focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20
               dark:border-gray-700 dark:text-white dark:focus:border-green-500
             "
             placeholder="email@example.com"
@@ -138,7 +138,7 @@ function RequestPasswordReset() {
           disabled={!!errors.email}
           className="
             w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white
-            transition-colors hover:bg-green-700 focus:outline-hidden focus:ring-2
+            transition-colors hover:bg-green-700 focus:outline-none focus:ring-2
             focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50
             disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700
           "

client/src/components/Auth/ResetPassword.tsx

@@ -43,7 +43,7 @@ function ResetPassword() {
         <button
           onClick={() => navigate('/login')}
           aria-label={localize('com_auth_sign_in')}
-          className="w-full transform rounded-2xl bg-green-500 px-4 py-3 tracking-wide text-white transition-colors duration-200 hover:bg-green-600 focus:bg-green-600 focus:outline-hidden"
+          className="w-full transform rounded-2xl bg-green-500 px-4 py-3 tracking-wide text-white transition-colors duration-200 hover:bg-green-600 focus:bg-green-600 focus:outline-none"
         >
           {localize('com_auth_continue')}
         </button>
@@ -91,7 +91,7 @@ function ResetPassword() {
             aria-invalid={!!errors.password}
             className="
               webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light
-              bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-hidden
+              bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none
            "
             placeholder=" "
           />
@@ -101,7 +101,7 @@ function ResetPassword() {
               absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200
               peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100
               peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-500
-              peer-focus:rtl:left-auto peer-focus:rtl:translate-x-1/4
+              rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4
           "
           >
             {localize('com_auth_password')}
@@ -126,7 +126,7 @@ function ResetPassword() {
             aria-invalid={!!errors.confirm_password}
             className="
             webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light
-            bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-hidden
+            bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none
             "
             placeholder=" "
           />
@@ -136,7 +136,7 @@ function ResetPassword() {
               absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200
               peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100
               peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-500
-              peer-focus:rtl:left-auto peer-focus:rtl:translate-x-1/4
+              rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4
             "
           >
             {localize('com_auth_password_confirm')}
@@ -165,7 +165,7 @@ function ResetPassword() {
           aria-label={localize('com_auth_submit_registration')}
           className="
             w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white
-            transition-colors hover:bg-green-700 focus:outline-hidden focus:ring-2
+            transition-colors hover:bg-green-700 focus:outline-none focus:ring-2
             focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50
             disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700
           "

client/src/components/Auth/SocialLoginRender.tsx

@@ -1,22 +1,36 @@
-import { GoogleIcon, FacebookIcon, OpenIDIcon, GithubIcon, DiscordIcon, AppleIcon } from '~/components';
-
+import {
+  GoogleIcon,
+  FacebookIcon,
+  OpenIDIcon,
+  GithubIcon,
+  DiscordIcon,
+  AppleIcon,
+  PasskeyIcon,
+} from '~/components';
 import SocialButton from './SocialButton';
-
 import { useLocalize } from '~/hooks';
-
 import { TStartupConfig } from 'librechat-data-provider';
+import React from 'react';
 
-function SocialLoginRender({
-  startupConfig,
-}: {
+type SocialLoginRenderProps = {
   startupConfig: TStartupConfig | null | undefined;
-}) {
+  mode: 'login' | 'register';
+  onPasskeyClick?: () => void;
+};
+
+function SocialLoginRender({ startupConfig, mode, onPasskeyClick }: SocialLoginRenderProps) {
   const localize = useLocalize();
 
   if (!startupConfig) {
     return null;
   }
 
+  // Compute the passkey label based on mode.
+  const passkeyLabel =
+      mode === 'register'
+        ? localize('com_auth_passkey_register')
+        : localize('com_auth_passkey_login');
+
   const providerComponents = {
     discord: startupConfig.discordLoginEnabled && (
       <SocialButton
@@ -107,10 +121,25 @@ function SocialLoginRender({
         )}
         <div className="mt-2">
           {startupConfig.socialLogins?.map((provider) => providerComponents[provider] || null)}
+          {startupConfig.passkeyLoginEnabled && (
+
+            <div className="mt-2 flex gap-x-2">
+              <button
+                aria-label={passkeyLabel}
+                className="flex w-full items-center space-x-3 rounded-2xl border border-border-light bg-surface-primary px-5 py-3 text-text-primary transition-colors duration-200 hover:bg-surface-tertiary"
+                data-testid="passkey"
+                type="button"
+                onClick={onPasskeyClick}
+              >
+                <PasskeyIcon />
+                <p>{passkeyLabel}</p>
+              </button>
+            </div>
+          )}
         </div>
       </>
     )
   );
 }
 
-export default SocialLoginRender;
+export default SocialLoginRender;

client/src/components/Banners/Banner.tsx

@@ -29,7 +29,7 @@ export const Banner = ({ onHeightChange }: { onHeightChange?: (height: number) =
   return (
     <div
       ref={bannerRef}
-      className="sticky top-0 z-20 flex items-center bg-neutral-900 from-gray-700 to-gray-900 px-2 py-1 text-slate-50 dark:bg-linear-to-r dark:text-white md:relative"
+      className="sticky top-0 z-20 flex items-center bg-neutral-900 from-gray-700 to-gray-900 px-2 py-1 text-slate-50 dark:bg-gradient-to-r dark:text-white md:relative"
     >
       <div
         className="w-full truncate px-4 text-center text-sm"

client/src/components/Bookmarks/BookmarkForm.tsx

@@ -134,7 +134,7 @@ const BookmarkForm = ({
             id="bookmark-description"
             disabled={false}
             className={cn(
-              'flex h-10 max-h-[250px] min-h-[100px] w-full resize-none rounded-lg border border-input bg-transparent px-3 py-2 text-sm ring-offset-background focus-visible:outline-hidden',
+              'flex h-10 max-h-[250px] min-h-[100px] w-full resize-none rounded-lg border border-input bg-transparent px-3 py-2 text-sm ring-offset-background focus-visible:outline-none',
             )}
           />
         </div>

client/src/components/Bookmarks/BookmarkItem.tsx

@@ -46,7 +46,7 @@ const BookmarkItem: FC<MenuItemProps> = ({ tag, selected, handleSubmit, icon, ..
   return (
     <MenuItem
       aria-label={tag as string}
-      className="group flex w-full gap-2 rounded-lg p-2.5 text-sm text-text-primary transition-colors duration-200 focus:outline-hidden data-focus:bg-surface-secondary data-focus:ring-2 data-focus:ring-primary"
+      className="group flex w-full gap-2 rounded-lg p-2.5 text-sm text-text-primary transition-colors duration-200 focus:outline-none data-[focus]:bg-surface-secondary data-[focus]:ring-2 data-[focus]:ring-primary"
       {...rest}
       as="button"
       onClick={clickHandler}

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

@@ -26,7 +26,7 @@ export default function AddedConvo({
   }
   return (
     <div className="flex items-start gap-4 py-2.5 pl-3 pr-1.5 text-sm">
-      <span className="mt-0 flex h-6 w-6 shrink-0 items-center justify-center">
+      <span className="mt-0 flex h-6 w-6 flex-shrink-0 items-center justify-center">
         <div className="icon-md">
           <EndpointIcon
             conversation={addedConvo}
@@ -41,7 +41,7 @@ export default function AddedConvo({
         {title}
       </span>
       <button
-        className="text-token-text-secondary shrink-0"
+        className="text-token-text-secondary flex-shrink-0"
         type="button"
         aria-label="Close added conversation"
         onClick={() => setAddedConvo(null)}

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

@@ -81,25 +81,17 @@ export default function AudioRecorder({
 
   return (
     <TooltipAnchor
+      id="audio-recorder"
+      aria-label={localize('com_ui_use_micrphone')}
+      onClick={isListening === true ? handleStopRecording : handleStartRecording}
+      disabled={disabled}
+      className={cn(
+        'absolute flex size-[35px] items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover',
+        isRTL ? 'bottom-2 left-2' : 'bottom-2 right-2',
+      )}
       description={localize('com_ui_use_micrphone')}
-      render={
-        <button
-          id="audio-recorder"
-          type="button"
-          aria-label={localize('com_ui_use_micrphone')}
-          onClick={isListening === true ? handleStopRecording : handleStartRecording}
-          disabled={disabled}
-          className={cn(
-            'absolute flex size-[35px] items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover',
-            isRTL ? 'bottom-2 left-2' : 'bottom-2 right-2',
-            disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
-          )}
-          title={localize('com_ui_use_micrphone')}
-          aria-pressed={isListening}
-        >
-          {renderIcon()}
-        </button>
-      }
-    />
+    >
+      {renderIcon()}
+    </TooltipAnchor>
   );
 }

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

@@ -183,7 +183,7 @@ const ChatForm = ({ index = 0 }) => {
             />
           )}
           <PromptsCommand index={index} textAreaRef={textAreaRef} submitPrompt={submitPrompt} />
-          <div className="transitional-all relative flex w-full grow flex-col overflow-hidden rounded-3xl bg-surface-tertiary text-text-primary duration-200">
+          <div className="transitional-all relative flex w-full flex-grow flex-col overflow-hidden rounded-3xl bg-surface-tertiary text-text-primary duration-200">
             <TemporaryChat
               isTemporaryChat={isTemporaryChat}
               setIsTemporaryChat={setIsTemporaryChat}

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

@@ -30,7 +30,7 @@ const CollapseChat = ({
       onClick={() => setIsCollapsed(true)}
       className={cn(
         'absolute right-2 top-2 z-10 size-[35px] rounded-full p-2 transition-colors',
-        'hover:bg-surface-hover focus:outline-hidden focus:ring-2 focus:ring-primary focus:ring-opacity-50',
+        'hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50',
       )}
     >
       <Minimize2 className="h-full w-full" />

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

@@ -25,7 +25,7 @@ const AttachFile = ({
         aria-label={localize('com_sidepanel_attach_files')}
         disabled={isUploadDisabled}
         className={cn(
-          'absolute flex size-[35px] items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover focus:outline-hidden focus:ring-2 focus:ring-primary focus:ring-opacity-50',
+          'absolute flex size-[35px] items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50',
           isRTL ? 'bottom-2 right-2' : 'bottom-2 left-2',
         )}
         description={localize('com_sidepanel_attach_files')}

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

@@ -82,7 +82,7 @@ const AttachFile = ({ isRTL, disabled, handleFileChange }: AttachFileProps) => {
           id="attach-file-menu-button"
           aria-label="Attach File Options"
           className={cn(
-            'absolute flex size-[35px] items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover focus:outline-hidden focus:ring-2 focus:ring-primary focus:ring-opacity-50',
+            'absolute flex size-[35px] items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50',
             isRTL ? 'bottom-2 right-2' : 'bottom-2 left-1 md:left-2',
           )}
         >

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

@@ -1,11 +1,11 @@
 export default function DragDropOverlay() {
   return (
     <div
-      className="bg-surface-primary/85 fixed inset-0 z-9999 flex flex-col items-center justify-center
+      className="bg-surface-primary/85 fixed inset-0 z-[9999] flex flex-col items-center justify-center
         gap-2 text-text-primary
         backdrop-blur-[4px] transition-all duration-200
         ease-in-out animate-in fade-in
-        zoom-in-95 hover:backdrop-blur-xs"
+        zoom-in-95 hover:backdrop-blur-sm"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"

client/src/components/Chat/Input/Files/Table/SortFilterHeader.tsx

@@ -59,7 +59,7 @@ export function SortFilterHeader<TData, TValue>({
         </DropdownMenuTrigger>
         <DropdownMenuContent
           align="start"
-          className="z-1001 dark:border-gray-700 dark:bg-gray-850"
+          className="z-[1001] dark:border-gray-700 dark:bg-gray-850"
         >
           <DropdownMenuItem
             onClick={() => column.toggleSorting(false)}

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

@@ -70,7 +70,7 @@ export default function HeaderOptions({
       <Anchor>
         <div className="my-auto lg:max-w-2xl xl:max-w-3xl">
           <span className="flex w-full flex-col items-center justify-center gap-0 md:order-none md:m-auto md:gap-2">
-            <div className="z-61 flex w-full items-center justify-center gap-2">
+            <div className="z-[61] flex w-full items-center justify-center gap-2">
               {interfaceConfig?.modelSelect === true && !isAgentsEndpoint(endpoint) && (
                 <ModelSelect
                   conversation={conversation}

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

@@ -166,7 +166,7 @@ export default function Mention({
           autoFocus
           ref={inputRef}
           placeholder={localize(placeholder)}
-          className="mb-1 w-full border-0 bg-white p-2 text-sm focus:outline-hidden dark:bg-gray-700 dark:text-gray-200"
+          className="mb-1 w-full border-0 bg-white p-2 text-sm focus:outline-none dark:bg-gray-700 dark:text-gray-200"
           autoComplete="off"
           value={searchValue}
           onKeyDown={(e) => {

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

@@ -37,8 +37,8 @@ export default function MentionItem({
           isActive === true ? 'bg-surface-active' : 'bg-transparent',
         )}
       >
-        <div className="flex h-5 w-5 shrink-0 items-center justify-center">{icon}</div>
-        <div className="flex min-w-0 grow items-center justify-between">
+        <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center">{icon}</div>
+        <div className="flex min-w-0 flex-grow items-center justify-between">
           <div className="truncate">
             <span className="font-medium">{name}</span>
             {description != null && description ? (
@@ -47,7 +47,7 @@ export default function MentionItem({
               </span>
             ) : null}
           </div>
-          <Clock4 size={16} className="ml-2 shrink-0" />
+          <Clock4 size={16} className="ml-2 flex-shrink-0" />
         </div>
       </div>
     </button>

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

@@ -54,7 +54,7 @@ export default function OptionsPopover({
   return (
     <Portal>
       <Content sideOffset={8} align="start" ref={popoverRef} asChild>
-        <div className="z-70 flex w-screen flex-col items-center md:w-full md:px-4">
+        <div className="z-[70] flex w-screen flex-col items-center md:w-full md:px-4">
           <div
             className={cn(
               cardStyle,

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

@@ -203,7 +203,7 @@ function PromptsCommand({
             autoFocus
             ref={inputRef}
             placeholder={localize('com_ui_command_usage_placeholder')}
-            className="mb-1 w-full border-0 bg-surface-tertiary-alt p-2 text-sm focus:outline-hidden dark:text-gray-200"
+            className="mb-1 w-full border-0 bg-surface-tertiary-alt p-2 text-sm focus:outline-none dark:text-gray-200"
             autoComplete="off"
             value={searchValue}
             onKeyDown={(e) => {

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

@@ -16,7 +16,7 @@ export const TemporaryChat = ({ isTemporaryChat, setIsTemporaryChat }: Temporary
   return (
     <div className="divide-token-border-light m-1.5 flex flex-col divide-y overflow-hidden rounded-b-lg rounded-t-2xl bg-surface-secondary-alt">
       <div className="flex items-start gap-4 py-2.5 pl-3 pr-1.5 text-sm">
-        <span className="mt-0 flex h-6 w-6 shrink-0 items-center justify-center">
+        <span className="mt-0 flex h-6 w-6 flex-shrink-0 items-center justify-center">
           <div className="icon-md">
             <MessageCircleDashed className="icon-md" aria-hidden="true" />
           </div>
@@ -25,7 +25,7 @@ export const TemporaryChat = ({ isTemporaryChat, setIsTemporaryChat }: Temporary
           {localize('com_ui_temporary_chat')}
         </span>
         <button
-          className="text-token-text-secondary shrink-0"
+          className="text-token-text-secondary flex-shrink-0"
           type="button"
           aria-label="Close temporary chat"
           onClick={() => setIsTemporaryChat(false)}

client/src/components/Chat/Landing.tsx

@@ -87,9 +87,7 @@ export default function Landing({ Header }: { Header?: ReactNode }) {
       return localize('com_nav_welcome_agent');
     }
 
-    return typeof startupConfig?.interface?.customWelcome === 'string'
-      ? startupConfig?.interface?.customWelcome
-      : localize('com_nav_welcome_message');
+    return localize('com_nav_welcome_message');
   };
 
   return (
@@ -120,13 +118,10 @@ export default function Landing({ Header }: { Header?: ReactNode }) {
           <div className="flex flex-col items-center gap-0 p-2">
             <div className="text-center text-2xl font-medium dark:text-white">{name}</div>
             <div className="max-w-md text-center text-sm font-normal text-text-primary ">
-              {description ||
-                (typeof startupConfig?.interface?.customWelcome === 'string'
-                  ? startupConfig?.interface?.customWelcome
-                  : localize('com_nav_welcome_message'))}
+              {description ? description : localize('com_nav_welcome_message')}
             </div>
             {/* <div className="mt-1 flex items-center gap-1 text-token-text-tertiary">
-             <div className="text-sm text-token-text-tertiary">By Daniel Avila</div>
+            <div className="text-sm text-token-text-tertiary">By Daniel Avila</div>
           </div> */}
           </div>
         ) : (

client/src/components/Chat/Menus/Endpoints/MenuItem.tsx

@@ -98,7 +98,7 @@ const MenuItem: FC<MenuItemProps> = ({
         role="option"
         aria-selected={selected}
         className={cn(
-          'group m-1.5 flex max-h-[40px] cursor-pointer gap-2 rounded px-5 py-2.5 pr-3! text-sm opacity-100! hover:bg-surface-hover',
+          'group m-1.5 flex max-h-[40px] cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-surface-hover',
           'radix-disabled:pointer-events-none radix-disabled:opacity-50',
         )}
         tabIndex={0}

client/src/components/Chat/Menus/Models/ModelSpec.tsx

@@ -57,7 +57,7 @@ const MenuItem: FC<MenuItemProps> = ({
         id={selected ? 'selected-llm' : undefined}
         role="option"
         aria-selected={selected}
-        className="group m-1.5 flex cursor-pointer gap-2 rounded px-1 py-2.5 pr-3! text-sm opacity-100! hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
+        className="group m-1.5 flex cursor-pointer gap-2 rounded px-1 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
         tabIndex={0}
         {...rest}
         onClick={clickHandler}

client/src/components/Chat/Menus/Presets/PresetItems.tsx

@@ -39,7 +39,7 @@ const PresetItems: FC<{
     <>
       <div
         role="menuitem"
-        className="pointer-none group m-1.5 flex h-8 min-w-[170px] gap-2 rounded px-5 py-2.5 pr-3! text-sm opacity-100! focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50  md:min-w-[240px]"
+        className="pointer-none group m-1.5 flex h-8 min-w-[170px] gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50  md:min-w-[240px]"
         tabIndex={-1}
       >
         <div className="flex h-full grow items-center justify-end gap-2">
@@ -101,7 +101,7 @@ const PresetItems: FC<{
       {presets && presets.length === 0 && (
         <div
           role="menuitem"
-          className="pointer-none group m-1.5 flex h-8 min-w-[170px] gap-2 rounded px-5 py-2.5 pr-3! text-sm opacity-100! focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 md:min-w-[240px]"
+          className="pointer-none group m-1.5 flex h-8 min-w-[170px] gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 md:min-w-[240px]"
           tabIndex={-1}
         >
           <div className="flex h-full grow items-center justify-end gap-2 text-gray-600 dark:text-gray-300">

client/src/components/Chat/Menus/UI/MenuItem.tsx

@@ -38,7 +38,7 @@ const MenuItem: FC<MenuItemProps> = ({
       aria-label={title}
       data-testid="chat-menu-item"
       className={cn(
-        'group m-1.5 flex cursor-pointer gap-2 rounded px-5 py-2.5 pr-3! text-sm opacity-100! hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 md:min-w-[240px]',
+        'group m-1.5 flex cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 md:min-w-[240px]',
         className || '',
       )}
       tabIndex={0} // Change to 0 to make it focusable

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

@@ -4,7 +4,7 @@ export default function DialogImage({ src = '', width = 1920, height = 1080 }) {
   return (
     <Dialog.Portal>
       <Dialog.Overlay
-        className="radix-state-open:animate-show fixed inset-0 z-100 flex items-center justify-center overflow-hidden bg-black/90 dark:bg-black/80"
+        className="radix-state-open:animate-show fixed inset-0 z-[100] flex items-center justify-center overflow-hidden bg-black/90 dark:bg-black/80"
         style={{ pointerEvents: 'auto' }}
       >
         <Dialog.Close asChild>
@@ -30,7 +30,7 @@ export default function DialogImage({ src = '', width = 1920, height = 1080 }) {
           </button>
         </Dialog.Close>
         <Dialog.Content
-          className="radix-state-open:animate-contentShow relative max-h-[85vh] max-w-[90vw] shadow-xl focus:outline-hidden"
+          className="radix-state-open:animate-contentShow relative max-h-[85vh] max-w-[90vw] shadow-xl focus:outline-none"
           tabIndex={-1}
           style={{ pointerEvents: 'auto', aspectRatio: height > width ? 1 / 1.75 : 1.75 / 1 }}
         >

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

@@ -150,7 +150,7 @@ const EditMessage = ({
 
   return (
     <Container message={message}>
-      <div className="bg-token-main-surface-primary relative flex w-full grow flex-col overflow-hidden rounded-2xl border border-border-medium text-text-primary [&:has(textarea:focus)]:border-border-heavy [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]">
+      <div className="bg-token-main-surface-primary relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border border-border-medium text-text-primary [&:has(textarea:focus)]:border-border-heavy [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]">
         <TextareaAutosize
           {...registerProps}
           ref={(e) => {

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

@@ -7,7 +7,6 @@ import { useRecoilValue } from 'recoil';
 import ReactMarkdown from 'react-markdown';
 import rehypeHighlight from 'rehype-highlight';
 import remarkDirective from 'remark-directive';
-import { PermissionTypes, Permissions } from 'librechat-data-provider';
 import type { Pluggable } from 'unified';
 import {
   useToastContext,
@@ -18,7 +17,6 @@ import {
 import { Artifact, artifactPlugin } from '~/components/Artifacts/Artifact';
 import { langSubset, preprocessLaTeX, handleDoubleClick } from '~/utils';
 import CodeBlock from '~/components/Messages/Content/CodeBlock';
-import useHasAccess from '~/hooks/Roles/useHasAccess';
 import { useFileDownload } from '~/data-provider';
 import useLocalize from '~/hooks/useLocalize';
 import store from '~/store';
@@ -30,10 +28,6 @@ type TCodeProps = {
 };
 
 export const code: React.ElementType = memo(({ className, children }: TCodeProps) => {
-  const canRunCode = useHasAccess({
-    permissionType: PermissionTypes.RUN_CODE,
-    permission: Permissions.USE,
-  });
   const match = /language-(\w+)/.exec(className ?? '');
   const lang = match && match[1];
   const isMath = lang === 'math';
@@ -55,14 +49,7 @@ export const code: React.ElementType = memo(({ className, children }: TCodeProps
       </code>
     );
   } else {
-    return (
-      <CodeBlock
-        lang={lang ?? 'text'}
-        codeChildren={children}
-        blockIndex={blockIndex}
-        allowExecution={canRunCode}
-      />
-    );
+    return <CodeBlock lang={lang ?? 'text'} codeChildren={children} blockIndex={blockIndex} />;
   }
 });
 

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

@@ -146,7 +146,7 @@ const EditTextPart = ({
 
   return (
     <Container message={message}>
-      <div className="bg-token-main-surface-primary relative flex w-full grow flex-col overflow-hidden rounded-2xl border border-border-medium text-text-primary [&:has(textarea:focus)]:border-border-heavy [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]">
+      <div className="bg-token-main-surface-primary relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border border-border-medium text-text-primary [&:has(textarea:focus)]:border-border-heavy [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]">
         <TextareaAutosize
           {...registerProps}
           ref={(e) => {

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

@@ -42,7 +42,7 @@ const LogLink: React.FC<LogLinkProps> = ({ href, filename, children }) => {
       onClick={handleDownload}
       target="_blank"
       rel="noopener noreferrer"
-      className="text-blue-400! visited:text-purple-400! hover:underline"
+      className="!text-blue-400 visited:!text-purple-400 hover:underline"
     >
       {children}
     </a>

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

@@ -48,7 +48,7 @@ export default function ToolPopover({
             <div className="mb-2 text-sm font-medium text-text-primary">{title}</div>
             <div className="bg-token-surface-secondary text-token-text-primary dark rounded-md text-xs">
               <div className="max-h-32 overflow-y-auto rounded-md bg-surface-tertiary p-2">
-                <code className="whitespace-pre-wrap! ">{formatText(input)}</code>
+                <code className="!whitespace-pre-wrap ">{formatText(input)}</code>
               </div>
             </div>
             {output != null && output && (
@@ -58,7 +58,7 @@ export default function ToolPopover({
                 </div>
                 <div className="bg-token-surface-secondary text-token-text-primary dark rounded-md text-xs">
                   <div className="max-h-32 overflow-y-auto rounded-md bg-surface-tertiary p-2">
-                    <code className="whitespace-pre-wrap! ">{formatText(output)}</code>
+                    <code className="!whitespace-pre-wrap ">{formatText(output)}</code>
                   </div>
                 </div>
               </>

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

@@ -71,7 +71,7 @@ export default function HoverButtons({
     return (
       <button
         className={cn(
-          'hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400 md:invisible md:group-hover:visible md:group-[.final-completion]:visible',
+          'hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 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 md:group-[.final-completion]:visible',
           !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
         )}
         onClick={regenerate}
@@ -79,7 +79,7 @@ export default function HoverButtons({
         title={localize('com_ui_regenerate')}
       >
         <RegenerateIcon
-          className="hover:text-gray-500 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400"
+          className="hover:text-gray-500 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400"
           size="19"
         />
       </button>
@@ -110,7 +110,7 @@ export default function HoverButtons({
           content={message.content ?? message.text}
           isLast={isLast}
           className={cn(
-            'ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
+            'ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
           )}
         />
       )}
@@ -118,7 +118,7 @@ export default function HoverButtons({
         <button
           id={`edit-${message.messageId}`}
           className={cn(
-            'hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
+            'hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
             isCreatedByUser ? '' : 'active',
             hideEditButton ? 'opacity-0' : '',
             isEditing ? 'active text-gray-700 dark:text-gray-200' : '',
@@ -134,7 +134,7 @@ export default function HoverButtons({
       )}
       <button
         className={cn(
-          'ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
+          'ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
           isSubmitting && isCreatedByUser ? 'md:opacity-0 md:group-hover:opacity-100' : '',
           !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
         )}
@@ -157,14 +157,14 @@ export default function HoverButtons({
       {continueSupported === true ? (
         <button
           className={cn(
-            'hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400 md:invisible md:group-hover:visible',
+            'hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 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',
             !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
           )}
           onClick={handleContinue}
           type="button"
           title={localize('com_ui_continue')}
         >
-          <ContinueIcon className="h-4 w-4 hover:text-gray-500 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400" />
+          <ContinueIcon className="h-4 w-4 hover:text-gray-500 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" />
         </button>
       ) : null}
     </div>

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

@@ -80,7 +80,7 @@ export default function Message(props: TMessageProps) {
       >
         <div className="m-auto justify-center p-4 py-2 md:gap-6 ">
           <div className="group mx-auto flex flex-1 gap-3 md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5">
-            <div className="relative flex shrink-0 flex-col items-end">
+            <div className="relative flex flex-shrink-0 flex-col items-end">
               <div>
                 <div className="pt-0.5">
                   <div className="shadow-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
@@ -97,7 +97,7 @@ export default function Message(props: TMessageProps) {
             >
               <div className={cn('select-none font-semibold', fontSize)}>{name}</div>
               <div className="flex-col gap-1 md:gap-3">
-                <div className="flex max-w-full grow flex-col gap-0">
+                <div className="flex max-w-full flex-grow flex-col gap-0">
                   <ContentParts
                     isLast={isLast}
                     isSubmitting={isSubmitting}

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

@@ -72,7 +72,7 @@ export default function MessagesView({
             )}
             <div
               id="messages-end"
-              className="group h-0 w-full shrink-0"
+              className="group h-0 w-full flex-shrink-0"
               ref={messagesEndRef}
             />
           </div>

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

@@ -15,7 +15,7 @@ export default function MinimalHoverButtons({ message }: THoverButtons) {
   return (
     <div className="visible mt-0 flex justify-center gap-1 self-end text-gray-400 lg:justify-start">
       <button
-        className="ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible"
+        className="ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible"
         onClick={() => copyToClipboard(setIsCopied)}
         type="button"
         title={

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

@@ -27,7 +27,7 @@ const MinimalMessages = React.forwardRef(
                 >
                   <div className="flex flex-col pb-9 text-sm dark:bg-transparent">
                     {props.children}
-                    <div className="dark:gpt-dark-gray group h-0 w-full shrink-0 dark:border-gray-800/50" />
+                    <div className="dark:gpt-dark-gray group h-0 w-full flex-shrink-0 dark:border-gray-800/50" />
                   </div>
                 </div>
               </div>

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

@@ -46,7 +46,7 @@ export default function Message({ message }: Pick<TMessageProps, 'message'>) {
       <div className="text-token-text-primary w-full border-0 bg-transparent dark:border-0 dark:bg-transparent">
         <div className="m-auto justify-center p-4 py-2 md:gap-6 ">
           <div className="final-completion group mx-auto flex flex-1 gap-3 md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5">
-            <div className="relative flex shrink-0 flex-col items-end">
+            <div className="relative flex flex-shrink-0 flex-col items-end">
               <div>
                 <div className="pt-0.5">
                   <div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
@@ -60,7 +60,7 @@ export default function Message({ message }: Pick<TMessageProps, 'message'>) {
             >
               <div className={cn('select-none font-semibold', fontSize)}>{messageLabel}</div>
               <div className="flex-col gap-1 md:gap-3">
-                <div className="flex max-w-full grow flex-col gap-0">
+                <div className="flex max-w-full flex-grow flex-col gap-0">
                   <SearchContent message={message} />
                 </div>
               </div>