refactor: Encrypt & Expire User Provided Keys, feat: Rate Limiting (#874)

* docs: make_your_own.md formatting fix for mkdocs

* feat: add express-mongo-sanitize
feat: add login/registration rate limiting

* chore: remove unnecessary console log

* wip: remove token handling from localStorage to encrypted DB solution

* refactor: minor change to UserService

* fix mongo query and add keys route to server

* fix backend controllers and simplify schema/crud

* refactor: rename token to key to separate from access/refresh tokens, setTokenDialog -> setKeyDialog

* refactor(schemas): TEndpointOption token -> key

* refactor(api): use new encrypted key retrieval system

* fix(SetKeyDialog): fix key prop error

* fix(abortMiddleware): pass random UUID if messageId is not generated yet for proper error display on frontend

* fix(getUserKey): wrong prop passed in arg, adds error handling

* fix: prevent message without conversationId from saving to DB, prevents branching on the frontend to a new top-level branch

* refactor: change wording of multiple display messages

* refactor(checkExpiry -> checkUserKeyExpiry): move to UserService file

* fix: type imports from common

* refactor(SubmitButton): convert to TS

* refactor(key.ts): change localStorage map key name

* refactor: add new custom tailwind classes to better match openAI colors

* chore: remove unnecessary warning and catch ScreenShot error

* refactor: move userKey frontend logic to hooks and remove use of localStorage and instead query the DB

* refactor: invalidate correct query key, memoize userKey hook, conditionally render SetKeyDialog to avoid unnecessary calls, refactor SubmitButton props and useEffect for showing 'provide key first'

* fix(SetKeyDialog): use enum-like object for expiry values
feat(Dropdown): add optionsClassName to dynamically change dropdown options container classes

* fix: handle edge case where user had provided a key but the server changes to env variable for keys

* refactor(OpenAI/titleConvo): move titling to client to retain authorized credentials in message lifecycle for titling

* fix(azure): handle user_provided keys correctly for azure

* feat: send user Id to OpenAI to differentiate users in completion requests

* refactor(OpenAI/titleConvo): adding tokens helps minimize LLM from using the language in title response

* feat: add delete endpoint for keys

* chore: remove throttling of title

* feat: add 'Data controls' to Settings, add 'Revoke' keys feature in Key Dialog and Data controls

* refactor: reorganize PluginsClient files in langchain format

* feat: use langchain for titling convos

* chore: cleanup titling convo, with fallback to original method, escape braces, use only snippet for language detection

* refactor: move helper functions to appropriate langchain folders for reusability

* fix: userProvidesKey handling for gptPlugins

* fix: frontend handling of plugins key

* chore: cleanup logging and ts-ignore SSE

* fix: forwardRef misuse in DangerButton

* fix(GoogleConfig/FileUpload): localize errors and simplify validation with zod

* fix: cleanup google logging and fix user provided key handling

* chore: remove titling from google

* chore: removing logging from browser endpoint

* wip: fix menu flicker

* feat: useLocalStorage hook

* feat: add Tooltip for UI

* refactor(EndpointMenu): utilize Tooltip and useLocalStorage, remove old 'New Chat' slide-over

* fix(e2e): use testId for endpoint menu trigger

* chore: final touches to EndpointMenu before future refactor to declutter component

* refactor(localization): change select endpoint to open menu and add translations

* chore: add final prop to error message response

* ci: minor edits to facilitate testing

* ci: new e2e test which tests for new key setting/revoking features

.env.example

@@ -13,6 +13,13 @@ APP_TITLE=LibreChat
 HOST=localhost
 PORT=3080
 
+# Login and registration rate limiting.
+
+LOGIN_MAX=7 # The max amount of logins allowed per IP per LOGIN_WINDOW
+LOGIN_WINDOW=5 # in minutes, determines how long an IP is banned for after LOGIN_MAX logins
+REGISTER_MAX=5 # The max amount of registrations allowed per IP per REGISTER_WINDOW
+REGISTER_WINDOW=60 # in minutes, determines how long an IP is banned for after REGISTER_MAX registrations
+
 # Change this to proxy any API request. 
 # It's useful if your machine has difficulty calling the original API server. 
 # PROXY=

api/app/bingai.js

@@ -1,5 +1,6 @@
 require('dotenv').config();
 const { KeyvFile } = require('keyv-file');
+const { getUserKey, checkUserKeyExpiry } = require('../server/services/UserService');
 
 const askBing = async ({
   text,
@@ -13,9 +14,21 @@ const askBing = async ({
   clientId,
   invocationId,
   toneStyle,
-  token,
+  key: expiresAt,
   onProgress,
+  userId,
 }) => {
+  const isUserProvided = process.env.BINGAI_TOKEN === 'user_provided';
+
+  let key = null;
+  if (expiresAt && isUserProvided) {
+    checkUserKeyExpiry(
+      expiresAt,
+      'Your BingAI Cookies have expired. Please provide your cookies again.',
+    );
+    key = await getUserKey({ userId, name: 'bingAI' });
+  }
+
   const { BingAIClient } = await import('@waylaidwanderer/chatgpt-api');
   const store = {
     store: new KeyvFile({ filename: './data/cache.json' }),
@@ -24,9 +37,9 @@ const askBing = async ({
   const bingAIClient = new BingAIClient({
     // "_U" cookie from bing.com
     // userToken:
-    //   process.env.BINGAI_TOKEN == 'user_provided' ? token : process.env.BINGAI_TOKEN ?? null,
+    //   isUserProvided ? key : process.env.BINGAI_TOKEN ?? null,
     // If the above doesn't work, provide all your cookies as a string instead
-    cookies: process.env.BINGAI_TOKEN == 'user_provided' ? token : process.env.BINGAI_TOKEN ?? null,
+    cookies: isUserProvided ? key : process.env.BINGAI_TOKEN ?? null,
     debug: false,
     cache: store,
     host: process.env.BINGAI_HOST || null,

api/app/chatgpt-browser.js

@@ -1,17 +1,29 @@
 require('dotenv').config();
 const { KeyvFile } = require('keyv-file');
+const { getUserKey, checkUserKeyExpiry } = require('../server/services/UserService');
 
 const browserClient = async ({
   text,
   parentMessageId,
   conversationId,
   model,
-  token,
+  key: expiresAt,
   onProgress,
   onEventMessage,
   abortController,
   userId,
 }) => {
+  const isUserProvided = process.env.CHATGPT_TOKEN === 'user_provided';
+
+  let key = null;
+  if (expiresAt && isUserProvided) {
+    checkUserKeyExpiry(
+      expiresAt,
+      'Your ChatGPT Access Token has expired. Please provide your token again.',
+    );
+    key = await getUserKey({ userId, name: 'chatGPTBrowser' });
+  }
+
   const { ChatGPTBrowserClient } = await import('@waylaidwanderer/chatgpt-api');
   const store = {
     store: new KeyvFile({ filename: './data/cache.json' }),
@@ -20,13 +32,12 @@ const browserClient = async ({
   const clientOptions = {
     // Warning: This will expose your access token to a third party. Consider the risks before using this.
     reverseProxyUrl:
-      process.env.CHATGPT_REVERSE_PROXY || 'https://ai.fakeopen.com/api/conversation',
+      process.env.CHATGPT_REVERSE_PROXY ?? 'https://ai.fakeopen.com/api/conversation',
     // Access token from https://chat.openai.com/api/auth/session
-    accessToken:
+    accessToken: isUserProvided ? key : process.env.CHATGPT_TOKEN ?? null,
-      process.env.CHATGPT_TOKEN == 'user_provided' ? token : process.env.CHATGPT_TOKEN ?? null,
     model: model,
     debug: false,
-    proxy: process.env.PROXY || null,
+    proxy: process.env.PROXY ?? null,
     user: userId,
   };
 
@@ -37,8 +48,6 @@ const browserClient = async ({
     options = { ...options, parentMessageId, conversationId };
   }
 
-  console.log('gptBrowser clientOptions', clientOptions);
-
   if (parentMessageId === '00000000-0000-0000-0000-000000000000') {
     delete options.conversationId;
   }

api/app/clients/BaseClient.js

@@ -3,9 +3,9 @@ const TextStream = require('./TextStream');
 const { RecursiveCharacterTextSplitter } = require('langchain/text_splitter');
 const { ChatOpenAI } = require('langchain/chat_models/openai');
 const { loadSummarizationChain } = require('langchain/chains');
-const { refinePrompt } = require('./prompts/refinePrompt');
 const { getConvo, getMessages, saveMessage, updateMessage, saveConvo } = require('../../models');
 const { addSpaceIfNeeded } = require('../../server/utils');
+const { refinePrompt } = require('./prompts');
 
 class BaseClient {
   constructor(apiKey, options = {}) {
@@ -55,6 +55,7 @@ class BaseClient {
 
     const { isEdited, isContinued } = opts;
     const user = opts.user ?? null;
+    this.user = user;
     const saveOptions = this.getSaveOptions();
     this.abortController = opts.abortController ?? new AbortController();
     const conversationId = opts.conversationId ?? crypto.randomUUID();
@@ -407,7 +408,6 @@ class BaseClient {
 
     const { generation = '' } = opts;
 
-    this.user = user;
     // It's not necessary to push to currentMessages
     // depending on subclass implementation of handling messages
     // When this is an edit, all messages are already in currentMessages, both user and response
@@ -600,6 +600,14 @@ class BaseClient {
     // Sum the number of tokens in all properties and add `tokensPerMessage` for metadata
     return propertyTokenCounts.reduce((a, b) => a + b, tokensPerMessage);
   }
+
+  async sendPayload(payload, opts = {}) {
+    if (opts && typeof opts === 'object') {
+      this.setOptions(opts);
+    }
+
+    return await this.sendCompletion(payload, opts);
+  }
 }
 
 module.exports = BaseClient;

api/app/clients/GoogleClient.js

@@ -29,7 +29,8 @@ class GoogleClient extends BaseClient {
 
     jwtClient.authorize((err) => {
       if (err) {
-        console.log(err);
+        console.error('Error: jwtClient failed to authorize');
+        console.error(err.message);
         throw err;
       }
     });
@@ -247,7 +248,8 @@ class GoogleClient extends BaseClient {
         console.debug(result);
       }
     } catch (err) {
-      console.error(err);
+      console.error('Error: failed to send completion to Google');
+      console.error(err.message);
     }
 
     if (!blocked) {

api/app/clients/OpenAIClient.js

@@ -5,6 +5,8 @@ const {
   get_encoding: getEncoding,
 } = require('@dqbd/tiktoken');
 const { maxTokensMap, genAzureChatCompletion } = require('../../utils');
+const { runTitleChain } = require('./chains');
+const { createLLM } = require('./llm');
 
 // Cache to store Tiktoken instances
 const tokenizersCache = {};
@@ -105,6 +107,7 @@ class OpenAIClient extends BaseClient {
 
     if (this.options.reverseProxyUrl) {
       this.completionsUrl = this.options.reverseProxyUrl;
+      this.langchainProxy = this.options.reverseProxyUrl.match(/.*v1/)[0];
     } else if (isChatGptModel) {
       this.completionsUrl = 'https://api.openai.com/v1/chat/completions';
     } else {
@@ -116,7 +119,7 @@ class OpenAIClient extends BaseClient {
     }
 
     if (this.azureEndpoint && this.options.debug) {
-      console.debug(`Using Azure endpoint: ${this.azureEndpoint}`, this.azure);
+      console.debug('Using Azure endpoint');
     }
 
     return this;
@@ -315,6 +318,7 @@ class OpenAIClient extends BaseClient {
     let reply = '';
     let result = null;
     let streamResult = null;
+    this.modelOptions.user = this.user;
     if (typeof opts.onProgress === 'function') {
       await this.getCompletion(
         payload,
@@ -373,6 +377,64 @@ class OpenAIClient extends BaseClient {
       content: response.text,
     });
   }
+
+  async titleConvo({ text, responseText = '' }) {
+    let title = 'New Chat';
+    const convo = `||>User:
+"${text}"
+||>Response:
+"${JSON.stringify(responseText)}"`;
+
+    const modelOptions = {
+      model: 'gpt-3.5-turbo-0613',
+      temperature: 0.2,
+      presence_penalty: 0,
+      frequency_penalty: 0,
+      max_tokens: 16,
+    };
+
+    const configOptions = {};
+
+    if (this.langchainProxy) {
+      configOptions.basePath = this.langchainProxy;
+    }
+
+    try {
+      const llm = createLLM({
+        modelOptions,
+        configOptions,
+        openAIApiKey: this.apiKey,
+        azure: this.azure,
+      });
+
+      title = await runTitleChain({ llm, text, convo });
+    } catch (e) {
+      console.error(e.message);
+      console.log('There was an issue generating title with LangChain, trying the old method...');
+      modelOptions.model = 'gpt-3.5-turbo';
+      const instructionsPayload = [
+        {
+          role: 'system',
+          content: `Detect user language and write in the same language an extremely concise title for this conversation, which you must accurately detect.
+Write in the detected language. Title in 5 Words or Less. No Punctuation or Quotation. Do not mention the language. All first letters of every word should be capitalized and write the title in User Language only.
+
+${convo}
+
+||>Title:`,
+        },
+      ];
+
+      try {
+        title = (await this.sendPayload(instructionsPayload, { modelOptions })).replaceAll('"', '');
+      } catch (e) {
+        console.error(e);
+        console.log('There was another issue generating the title, see error above.');
+      }
+    }
+
+    console.log('CONVERSATION TITLE', title);
+    return title;
+  }
 }
 
 module.exports = OpenAIClient;

api/app/clients/PluginsClient.js

@@ -1,10 +1,11 @@
 const OpenAIClient = require('./OpenAIClient');
 const { CallbackManager } = require('langchain/callbacks');
 const { HumanChatMessage, AIChatMessage } = require('langchain/schema');
-const { initializeCustomAgent, initializeFunctionsAgent } = require('./agents/');
+const { initializeCustomAgent, initializeFunctionsAgent } = require('./agents');
-const { addImages, createLLM, buildErrorInput, buildPromptPrefix } = require('./agents/methods/');
+const { addImages, buildErrorInput, buildPromptPrefix } = require('./output_parsers');
-const { SelfReflectionTool } = require('./tools/');
+const { SelfReflectionTool } = require('./tools');
 const { loadTools } = require('./tools/util');
+const { createLLM } = require('./llm');
 
 class PluginsClient extends OpenAIClient {
   constructor(apiKey, options = {}) {
@@ -28,9 +29,9 @@ class PluginsClient extends OpenAIClient {
     super.setOptions(options);
     this.isGpt3 = this.modelOptions.model.startsWith('gpt-3');
 
-    if (this.options.reverseProxyUrl) {
+    // if (this.options.reverseProxyUrl) {
-      this.langchainProxy = this.options.reverseProxyUrl.match(/.*v1/)[0];
+    //   this.langchainProxy = this.options.reverseProxyUrl.match(/.*v1/)[0];
-    }
+    // }
   }
 
   getSaveOptions() {

api/app/clients/chains/index.js

@@ -0,0 +1,5 @@
+const runTitleChain = require('./runTitleChain');
+
+module.exports = {
+  runTitleChain,
+};

api/app/clients/chains/runTitleChain.js

@@ -0,0 +1,43 @@
+const { z } = require('zod');
+const { langPrompt, createTitlePrompt } = require('../prompts');
+const { escapeBraces, getSnippet } = require('../output_parsers');
+const { createStructuredOutputChainFromZod } = require('langchain/chains/openai_functions');
+
+const langSchema = z.object({
+  language: z.string().describe('The language of the input text (full noun, no abbreviations).'),
+});
+
+const createLanguageChain = ({ llm }) =>
+  createStructuredOutputChainFromZod(langSchema, {
+    prompt: langPrompt,
+    llm,
+    // verbose: true,
+  });
+
+const titleSchema = z.object({
+  title: z.string().describe('The title-cased title of the conversation in the given language.'),
+});
+const createTitleChain = ({ llm, convo }) => {
+  const titlePrompt = createTitlePrompt({ convo });
+  return createStructuredOutputChainFromZod(titleSchema, {
+    prompt: titlePrompt,
+    llm,
+    // verbose: true,
+  });
+};
+
+const runTitleChain = async ({ llm, text, convo }) => {
+  let snippet = text;
+  try {
+    snippet = getSnippet(text);
+  } catch (e) {
+    console.log('Error getting snippet of text for titleChain');
+    console.log(e);
+  }
+  const languageChain = createLanguageChain({ llm });
+  const titleChain = createTitleChain({ llm, convo: escapeBraces(convo) });
+  const { language } = await languageChain.run(snippet);
+  return (await titleChain.run(language)).title;
+};
+
+module.exports = runTitleChain;

api/app/clients/llm/index.js

@@ -0,0 +1,5 @@
+const createLLM = require('./createLLM');
+
+module.exports = {
+  createLLM,
+};

api/app/clients/output_parsers/handleInputs.js

@@ -0,0 +1,38 @@
+// Escaping curly braces is necessary for LangChain to correctly process the prompt
+function escapeBraces(str) {
+  return str
+    .replace(/({{2,})|(}{2,})/g, (match) => `${match[0]}`)
+    .replace(/{|}/g, (match) => `${match}${match}`);
+}
+
+function getSnippet(text) {
+  let limit = 50;
+  let splitText = escapeBraces(text).split(' ');
+
+  if (splitText.length === 1 && splitText[0].length > limit) {
+    return splitText[0].substring(0, limit);
+  }
+
+  let result = '';
+  let spaceCount = 0;
+
+  for (let i = 0; i < splitText.length; i++) {
+    if (result.length + splitText[i].length <= limit) {
+      result += splitText[i] + ' ';
+      spaceCount++;
+    } else {
+      break;
+    }
+
+    if (spaceCount == 10) {
+      break;
+    }
+  }
+
+  return result.trim();
+}
+
+module.exports = {
+  escapeBraces,
+  getSnippet,
+};

api/app/clients/output_parsers/handleOutputs.js

@@ -1,8 +1,4 @@
-const {
+const { instructions, imageInstructions, errorInstructions } = require('../prompts');
-  instructions,
-  imageInstructions,
-  errorInstructions,
-} = require('../../prompts/instructions');
 
 function getActions(actions = [], functionsAgent = false) {
   let output = 'Internal thoughts & actions taken:\n"';

api/app/clients/output_parsers/index.js

@@ -1,9 +1,9 @@
 const addImages = require('./addImages');
-const createLLM = require('./createLLM');
+const handleInputs = require('./handleInputs');
 const handleOutputs = require('./handleOutputs');
 
 module.exports = {
   addImages,
-  createLLM,
+  ...handleInputs,
   ...handleOutputs,
 };

api/app/clients/prompts/index.js

@@ -0,0 +1,9 @@
+const instructions = require('./instructions');
+const titlePrompts = require('./titlePrompts');
+const refinePrompts = require('./refinePrompts');
+
+module.exports = {
+  ...refinePrompts,
+  ...instructions,
+  ...titlePrompts,
+};

api/app/clients/prompts/titlePrompts.js

@@ -0,0 +1,33 @@
+const {
+  ChatPromptTemplate,
+  SystemMessagePromptTemplate,
+  HumanMessagePromptTemplate,
+} = require('langchain/prompts');
+
+const langPrompt = new ChatPromptTemplate({
+  promptMessages: [
+    SystemMessagePromptTemplate.fromTemplate('Detect the language used in the following text.'),
+    HumanMessagePromptTemplate.fromTemplate('{inputText}'),
+  ],
+  inputVariables: ['inputText'],
+});
+
+const createTitlePrompt = ({ convo }) => {
+  const titlePrompt = new ChatPromptTemplate({
+    promptMessages: [
+      SystemMessagePromptTemplate.fromTemplate(
+        `Write a concise title for this conversation in the given language. Title in 5 Words or Less. No Punctuation or Quotation. All first letters of every word must be capitalized (resembling title-case), written in the given Language.
+${convo}`,
+      ),
+      HumanMessagePromptTemplate.fromTemplate('Language: {language}'),
+    ],
+    inputVariables: ['language'],
+  });
+
+  return titlePrompt;
+};
+
+module.exports = {
+  langPrompt,
+  createTitlePrompt,
+};

api/app/index.js

@@ -1,13 +1,11 @@
 const { browserClient } = require('./chatgpt-browser');
 const { askBing } = require('./bingai');
 const clients = require('./clients');
-const titleConvo = require('./titleConvo');
 const titleConvoBing = require('./titleConvoBing');
 
 module.exports = {
   browserClient,
   askBing,
-  titleConvo,
   titleConvoBing,
   ...clients,
 };

api/app/titleConvo.js

@@ -1,57 +0,0 @@
-const throttle = require('lodash/throttle');
-const { genAzureChatCompletion, getAzureCredentials } = require('../utils/');
-
-const titleConvo = async ({ text, response, openAIApiKey, azure = false }) => {
-  let title = 'New Chat';
-  const ChatGPTClient = (await import('@waylaidwanderer/chatgpt-api')).default;
-
-  try {
-    const instructionsPayload = {
-      role: 'system',
-      content: `Detect user language and write in the same language an extremely concise title for this conversation, which you must accurately detect. Write in the detected language. Title in 5 Words or Less. No Punctuation or Quotation. All first letters of every word should be capitalized and complete only the title in User Language only.
-
-    ||>User:
-    "${text}"
-    ||>Response:
-    "${JSON.stringify(response?.text)}"
-    
-    ||>Title:`,
-    };
-
-    const options = {
-      azure,
-      reverseProxyUrl: process.env.OPENAI_REVERSE_PROXY || null,
-      proxy: process.env.PROXY || null,
-    };
-
-    const titleGenClientOptions = JSON.parse(JSON.stringify(options));
-
-    titleGenClientOptions.modelOptions = {
-      model: 'gpt-3.5-turbo',
-      temperature: 0,
-      presence_penalty: 0,
-      frequency_penalty: 0,
-    };
-
-    let apiKey = openAIApiKey ?? process.env.OPENAI_API_KEY;
-
-    if (azure) {
-      apiKey = process.env.AZURE_API_KEY;
-      titleGenClientOptions.reverseProxyUrl = genAzureChatCompletion(getAzureCredentials());
-    }
-
-    const titleGenClient = new ChatGPTClient(apiKey, titleGenClientOptions);
-    const result = await titleGenClient.getCompletion([instructionsPayload], null);
-    title = result.choices[0].message.content.replace(/\s+/g, ' ').replaceAll('"', '').trim();
-  } catch (e) {
-    console.error(e);
-    console.log('There was an issue generating title, see error above');
-  }
-
-  console.log('CONVERSATION TITLE', title);
-  return title;
-};
-
-const throttledTitleConvo = throttle(titleConvo, 1000);
-
-module.exports = throttledTitleConvo;

api/models/Message.js

@@ -21,6 +21,9 @@ module.exports = {
     model = null,
   }) {
     try {
+      if (!conversationId) {
+        return console.log('Message not saved: no conversationId');
+      }
       // may also need to update the conversation here
       await Message.findOneAndUpdate(
         { messageId },

api/models/User.js

@@ -3,97 +3,13 @@ const bcrypt = require('bcryptjs');
 const jwt = require('jsonwebtoken');
 const Joi = require('joi');
 const DebugControl = require('../utils/debug.js');
+const userSchema = require('./schema/userSchema.js');
 
 function log({ title, parameters }) {
   DebugControl.log.functionName(title);
   DebugControl.log.parameters(parameters);
 }
 
-const Session = mongoose.Schema({
-  refreshToken: {
-    type: String,
-    default: '',
-  },
-});
-
-const userSchema = mongoose.Schema(
-  {
-    name: {
-      type: String,
-    },
-    username: {
-      type: String,
-      lowercase: true,
-      default: '',
-    },
-    email: {
-      type: String,
-      required: [true, 'can\'t be blank'],
-      lowercase: true,
-      unique: true,
-      match: [/\S+@\S+\.\S+/, 'is invalid'],
-      index: true,
-    },
-    emailVerified: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    password: {
-      type: String,
-      trim: true,
-      minlength: 8,
-      maxlength: 128,
-    },
-    avatar: {
-      type: String,
-      required: false,
-    },
-    provider: {
-      type: String,
-      required: true,
-      default: 'local',
-    },
-    role: {
-      type: String,
-      default: 'USER',
-    },
-    googleId: {
-      type: String,
-      unique: true,
-      sparse: true,
-    },
-    facebookId: {
-      type: String,
-      unique: true,
-      sparse: true,
-    },
-    openidId: {
-      type: String,
-      unique: true,
-      sparse: true,
-    },
-    githubId: {
-      type: String,
-      unique: true,
-      sparse: true,
-    },
-    discordId: {
-      type: String,
-      unique: true,
-      sparse: true,
-    },
-    plugins: {
-      type: Array,
-      default: [],
-    },
-    refreshToken: {
-      type: [Session],
-    },
-  },
-  { timestamps: true },
-);
-
 //Remove refreshToken from the response
 userSchema.set('toJSON', {
   transform: function (_doc, ret) {

api/models/index.js

@@ -7,8 +7,13 @@ const {
 } = require('./Message');
 const { getConvoTitle, getConvo, saveConvo } = require('./Conversation');
 const { getPreset, getPresets, savePreset, deletePresets } = require('./Preset');
+const User = require('./User');
+const Key = require('./schema/keySchema');
 
 module.exports = {
+  User,
+  Key,
+
   getMessages,
   saveMessage,
   updateMessage,

api/models/schema/keySchema.js

@@ -0,0 +1,25 @@
+const mongoose = require('mongoose');
+
+const keySchema = mongoose.Schema({
+  userId: {
+    type: mongoose.Schema.Types.ObjectId,
+    ref: 'User',
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  value: {
+    type: String,
+    required: true,
+  },
+  expiresAt: {
+    type: Date,
+    expires: 0,
+  },
+});
+
+keySchema.index({ expiresAt: 1 }, { expireAfterSeconds: 0 });
+
+module.exports = mongoose.model('Key', keySchema);

api/models/schema/userSchema.js

@@ -0,0 +1,88 @@
+const mongoose = require('mongoose');
+
+const Session = mongoose.Schema({
+  refreshToken: {
+    type: String,
+    default: '',
+  },
+});
+
+const userSchema = mongoose.Schema(
+  {
+    name: {
+      type: String,
+    },
+    username: {
+      type: String,
+      lowercase: true,
+      default: '',
+    },
+    email: {
+      type: String,
+      required: [true, 'can\'t be blank'],
+      lowercase: true,
+      unique: true,
+      match: [/\S+@\S+\.\S+/, 'is invalid'],
+      index: true,
+    },
+    emailVerified: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    password: {
+      type: String,
+      trim: true,
+      minlength: 8,
+      maxlength: 128,
+    },
+    avatar: {
+      type: String,
+      required: false,
+    },
+    provider: {
+      type: String,
+      required: true,
+      default: 'local',
+    },
+    role: {
+      type: String,
+      default: 'USER',
+    },
+    googleId: {
+      type: String,
+      unique: true,
+      sparse: true,
+    },
+    facebookId: {
+      type: String,
+      unique: true,
+      sparse: true,
+    },
+    openidId: {
+      type: String,
+      unique: true,
+      sparse: true,
+    },
+    githubId: {
+      type: String,
+      unique: true,
+      sparse: true,
+    },
+    discordId: {
+      type: String,
+      unique: true,
+      sparse: true,
+    },
+    plugins: {
+      type: Array,
+      default: [],
+    },
+    refreshToken: {
+      type: [Session],
+    },
+  },
+  { timestamps: true },
+);
+
+module.exports = userSchema;

api/package.json

@@ -35,6 +35,8 @@
     "dotenv": "^16.0.3",
     "eslint": "^8.41.0",
     "express": "^4.18.2",
+    "express-mongo-sanitize": "^2.2.0",
+    "express-rate-limit": "^6.9.0",
     "express-session": "^1.17.3",
     "googleapis": "^118.0.0",
     "handlebars": "^4.7.7",
@@ -64,7 +66,7 @@
   },
   "devDependencies": {
     "jest": "^29.5.0",
-    "nodemon": "^2.0.20",
+    "nodemon": "^3.0.1",
     "path": "^0.12.7",
     "supertest": "^6.3.3"
   }

api/server/index.js

@@ -1,4 +1,5 @@
 const express = require('express');
+const mongoSanitize = require('express-mongo-sanitize');
 const connectDb = require('../lib/db/connectDb');
 const indexSync = require('../lib/db/indexSync');
 const path = require('path');
@@ -23,6 +24,7 @@ const startServer = async () => {
   // Middleware
   app.use(errorController);
   app.use(express.json({ limit: '3mb' }));
+  app.use(mongoSanitize());
   app.use(express.urlencoded({ extended: true, limit: '3mb' }));
   app.use(express.static(path.join(projectPath, 'dist')));
   app.use(express.static(path.join(projectPath, 'public')));
@@ -38,7 +40,7 @@ const startServer = async () => {
   // OAUTH
   app.use(passport.initialize());
   passport.use(await jwtLogin());
-  passport.use(await passportLogin());
+  passport.use(passportLogin());
 
   if (process.env.ALLOW_SOCIAL_LOGIN === 'true') {
     configureSocialLogins(app);
@@ -47,6 +49,7 @@ const startServer = async () => {
   app.use('/oauth', routes.oauth);
   // API Endpoints
   app.use('/api/auth', routes.auth);
+  app.use('/api/keys', routes.keys);
   app.use('/api/user', routes.user);
   app.use('/api/search', routes.search);
   app.use('/api/ask', routes.ask);

api/server/middleware/abortMiddleware.js

@@ -1,3 +1,4 @@
+const crypto = require('crypto');
 const { saveMessage, getConvo, getConvoTitle } = require('../../models');
 const { sendMessage, handleError } = require('../utils');
 const abortControllers = require('./abortControllers');
@@ -73,12 +74,13 @@ const handleAbortError = async (res, req, error, data) => {
   const respondWithError = async () => {
     const errorMessage = {
       sender,
-      messageId,
+      messageId: messageId ?? crypto.randomUUID(),
       conversationId,
       parentMessageId,
       unfinished: false,
       cancelled: false,
       error: true,
+      final: true,
       text: error.message,
       isCreatedByUser: false,
     };

api/server/middleware/index.js

@@ -1,6 +1,8 @@
 const abortMiddleware = require('./abortMiddleware');
 const setHeaders = require('./setHeaders');
+const loginLimiter = require('./loginLimiter');
 const requireJwtAuth = require('./requireJwtAuth');
+const registerLimiter = require('./registerLimiter');
 const requireLocalAuth = require('./requireLocalAuth');
 const validateEndpoint = require('./validateEndpoint');
 const validateMessageReq = require('./validateMessageReq');
@@ -10,7 +12,9 @@ const validateRegistration = require('./validateRegistration');
 module.exports = {
   ...abortMiddleware,
   setHeaders,
+  loginLimiter,
   requireJwtAuth,
+  registerLimiter,
   requireLocalAuth,
   validateEndpoint,
   validateMessageReq,

api/server/middleware/loginLimiter.js

@@ -0,0 +1,12 @@
+const rateLimit = require('express-rate-limit');
+const windowMs = (process.env?.LOGIN_WINDOW ?? 5) * 60 * 1000; // default: 5 minutes
+const max = process.env?.LOGIN_MAX ?? 7; // default: limit each IP to 7 requests per windowMs
+const windowInMinutes = windowMs / 60000;
+
+const loginLimiter = rateLimit({
+  windowMs,
+  max,
+  message: `Too many login attempts from this IP, please try again after ${windowInMinutes} minutes.`,
+});
+
+module.exports = loginLimiter;

api/server/middleware/registerLimiter.js

@@ -0,0 +1,12 @@
+const rateLimit = require('express-rate-limit');
+const windowMs = (process.env?.REGISTER_WINDOW ?? 60) * 60 * 1000; // default: 1 hour
+const max = process.env?.REGISTER_MAX ?? 5; // default: limit each IP to 5 registrations per windowMs
+const windowInMinutes = windowMs / 60000;
+
+const registerLimiter = rateLimit({
+  windowMs,
+  max,
+  message: `Too many accounts created from this IP, please try again after ${windowInMinutes} minutes`,
+});
+
+module.exports = registerLimiter;

api/server/routes/ask/anthropic.js

@@ -87,7 +87,7 @@ router.post(
         getAbortData,
       );
 
-      const { client } = initializeClient(req, endpointOption);
+      const { client } = await initializeClient(req, endpointOption);
 
       let response = await client.sendMessage(text, {
         getIds,
@@ -135,7 +135,7 @@ router.post(
         conversationId,
         sender: getResponseSender(endpointOption),
         messageId: responseMessageId,
-        parentMessageId: userMessageId,
+        parentMessageId: userMessageId ?? parentMessageId,
       });
     }
   },

api/server/routes/ask/askChatGPTBrowser.js

@@ -38,7 +38,7 @@ router.post('/', requireJwtAuth, setHeaders, async (req, res) => {
   // build endpoint option
   const endpointOption = {
     model: req.body?.model ?? 'text-davinci-002-render-sha',
-    token: req.body?.token ?? null,
+    key: req.body?.key ?? null,
   };
 
   // const availableModels = getChatGPTBrowserModels();

api/server/routes/ask/bingAI.js

@@ -45,7 +45,7 @@ router.post('/', requireJwtAuth, setHeaders, async (req, res) => {
       systemMessage: req.body?.systemMessage ?? null,
       context: req.body?.context ?? null,
       toneStyle: req.body?.toneStyle ?? 'creative',
-      token: req.body?.token ?? null,
+      key: req.body?.key ?? null,
     };
   } else {
     endpointOption = {
@@ -56,7 +56,7 @@ router.post('/', requireJwtAuth, setHeaders, async (req, res) => {
       clientId: req.body?.clientId ?? null,
       invocationId: req.body?.invocationId ?? null,
       toneStyle: req.body?.toneStyle ?? 'creative',
-      token: req.body?.token ?? null,
+      key: req.body?.key ?? null,
     };
   }
 
@@ -139,6 +139,7 @@ const ask = async ({
   try {
     let response = await askBing({
       text,
+      userId: req.user.id,
       parentMessageId: userParentMessageId,
       conversationId: bingConversationId ?? conversationId,
       ...endpointOption,

api/server/routes/ask/google.js

@@ -1,9 +1,10 @@
 const express = require('express');
 const router = express.Router();
 const crypto = require('crypto');
-const { titleConvo, GoogleClient } = require('../../../app');
+const { GoogleClient } = require('../../../app');
 const { saveMessage, getConvoTitle, saveConvo, getConvo } = require('../../../models');
 const { handleError, sendMessage, createOnProgress } = require('../../utils');
+const { getUserKey, checkUserKeyExpiry } = require('../../services/UserService');
 const { requireJwtAuth, setHeaders } = require('../../middleware');
 
 router.post('/', requireJwtAuth, setHeaders, async (req, res) => {
@@ -19,7 +20,7 @@ router.post('/', requireJwtAuth, setHeaders, async (req, res) => {
   const endpointOption = {
     examples: req.body?.examples ?? [{ input: { content: '' }, output: { content: '' } }],
     promptPrefix: req.body?.promptPrefix ?? null,
-    token: req.body?.token ?? null,
+    key: req.body?.key ?? null,
     modelOptions: {
       model: req.body?.model ?? 'chat-bison',
       modelLabel: req.body?.modelLabel ?? null,
@@ -88,17 +89,22 @@ const ask = async ({ text, endpointOption, parentMessageId = null, conversationI
 
     const abortController = new AbortController();
 
+    const isUserProvided = process.env.PALM_KEY === 'user_provided';
+
     let key;
-    if (endpointOption.token) {
+    if (endpointOption.key && isUserProvided) {
-      key = JSON.parse(endpointOption.token);
+      checkUserKeyExpiry(
-      delete endpointOption.token;
+        endpointOption.key,
+        'Your GOOGLE_TOKEN has expired. Please provide your token again.',
+      );
+      key = await getUserKey({ userId: req.user.id, name: 'google' });
+      key = JSON.parse(key);
+      delete endpointOption.key;
       console.log('Using service account key provided by User for PaLM models');
     }
 
     try {
-      if (!key) {
+      key = require('../../../data/auth.json');
-        key = require('../../../data/auth.json');
-      }
     } catch (e) {
       console.log('No \'auth.json\' file (service account key) found in /api/data/ for PaLM models');
     }
@@ -146,14 +152,6 @@ const ask = async ({ text, endpointOption, parentMessageId = null, conversationI
       responseMessage: response,
     });
     res.end();
-
-    if (parentMessageId == '00000000-0000-0000-0000-000000000000') {
-      const title = await titleConvo({ text, response });
-      await saveConvo(req.user.id, {
-        conversationId,
-        title,
-      });
-    }
   } catch (error) {
     console.error(error);
     const errorMessage = {

api/server/routes/ask/gptPlugins.js

@@ -158,7 +158,7 @@ router.post(
 
     try {
       endpointOption.tools = await validateTools(user, endpointOption.tools);
-      const { client, azure, openAIApiKey } = initializeClient(req, endpointOption);
+      const { client } = await initializeClient(req, endpointOption);
 
       let response = await client.sendMessage(text, {
         user,
@@ -204,14 +204,14 @@ router.post(
         responseMessage: response,
       });
       res.end();
-      addTitle(req, {
+
-        text,
+      if (parentMessageId == '00000000-0000-0000-0000-000000000000' && newConvo) {
-        newConvo,
+        addTitle(req, {
-        response,
+          text,
-        openAIApiKey,
+          response,
-        parentMessageId,
+          client,
-        azure: !!azure,
+        });
-      });
+      }
     } catch (error) {
       const partialText = getPartialText();
       handleAbortError(res, req, error, {
@@ -219,7 +219,7 @@ router.post(
         conversationId,
         sender: getResponseSender(endpointOption),
         messageId: responseMessageId,
-        parentMessageId: userMessageId,
+        parentMessageId: userMessageId ?? parentMessageId,
       });
     }
   },

api/server/routes/ask/openAI.js

@@ -94,7 +94,7 @@ router.post(
     );
 
     try {
-      const { client, openAIApiKey } = initializeClient(req, endpointOption);
+      const { client } = await initializeClient(req, endpointOption);
 
       let response = await client.sendMessage(text, {
         user,
@@ -136,14 +136,13 @@ router.post(
       });
       res.end();
 
-      addTitle(req, {
+      if (parentMessageId == '00000000-0000-0000-0000-000000000000' && newConvo) {
-        text,
+        addTitle(req, {
-        newConvo,
+          text,
-        response,
+          response,
-        openAIApiKey,
+          client,
-        parentMessageId,
+        });
-        azure: endpointOption.endpoint === 'azureOpenAI',
+      }
-      });
     } catch (error) {
       const partialText = getPartialText();
       handleAbortError(res, req, error, {
@@ -151,7 +150,7 @@ router.post(
         conversationId,
         sender: getResponseSender(endpointOption),
         messageId: responseMessageId,
-        parentMessageId: userMessageId,
+        parentMessageId: userMessageId ?? parentMessageId,
       });
     }
   },

api/server/routes/auth.js

@@ -7,15 +7,21 @@ const {
 } = require('../controllers/AuthController');
 const { loginController } = require('../controllers/auth/LoginController');
 const { logoutController } = require('../controllers/auth/LogoutController');
-const { requireJwtAuth, requireLocalAuth, validateRegistration } = require('../middleware');
+const {
+  loginLimiter,
+  registerLimiter,
+  requireJwtAuth,
+  requireLocalAuth,
+  validateRegistration,
+} = require('../middleware');
 
 const router = express.Router();
 
 //Local
 router.post('/logout', requireJwtAuth, logoutController);
-router.post('/login', requireLocalAuth, loginController);
+router.post('/login', loginLimiter, requireLocalAuth, loginController);
 // router.post('/refresh', requireJwtAuth, refreshController);
-router.post('/register', validateRegistration, registrationController);
+router.post('/register', registerLimiter, validateRegistration, registrationController);
 router.post('/requestPasswordReset', resetPasswordRequestController);
 router.post('/resetPassword', resetPasswordController);
 

api/server/routes/edit/anthropic.js

@@ -87,7 +87,7 @@ router.post(
         getAbortData,
       );
 
-      const { client } = initializeClient(req, endpointOption);
+      const { client } = await initializeClient(req, endpointOption);
 
       let response = await client.sendMessage(text, {
         user: req.user.id,
@@ -136,7 +136,7 @@ router.post(
         conversationId,
         sender: getResponseSender(endpointOption),
         messageId: responseMessageId,
-        parentMessageId: userMessageId,
+        parentMessageId: userMessageId ?? parentMessageId,
       });
     }
   },

api/server/routes/edit/gptPlugins.js

@@ -128,7 +128,7 @@ router.post(
 
     try {
       endpointOption.tools = await validateTools(user, endpointOption.tools);
-      const { client } = initializeClient(req, endpointOption);
+      const { client } = await initializeClient(req, endpointOption);
 
       let response = await client.sendMessage(text, {
         user,
@@ -182,7 +182,7 @@ router.post(
         conversationId,
         sender: getResponseSender(endpointOption),
         messageId: responseMessageId,
-        parentMessageId: userMessageId,
+        parentMessageId: userMessageId ?? parentMessageId,
       });
     }
   },

api/server/routes/edit/openAI.js

@@ -90,7 +90,7 @@ router.post(
     );
 
     try {
-      const { client } = initializeClient(req, endpointOption);
+      const { client } = await initializeClient(req, endpointOption);
 
       let response = await client.sendMessage(text, {
         user: req.user.id,
@@ -138,7 +138,7 @@ router.post(
         conversationId,
         sender: getResponseSender(endpointOption),
         messageId: responseMessageId,
-        parentMessageId: userMessageId,
+        parentMessageId: userMessageId ?? parentMessageId,
       });
     }
   },

api/server/routes/endpoints.js

@@ -8,9 +8,9 @@ const { addOpenAPISpecs } = require('../../app/clients/tools/util/addOpenAPISpec
 const openAIApiKey = process.env.OPENAI_API_KEY;
 const azureOpenAIApiKey = process.env.AZURE_API_KEY;
 const useAzurePlugins = !!process.env.PLUGINS_USE_AZURE;
-const userProvidedOpenAI = openAIApiKey
+const userProvidedOpenAI = useAzurePlugins
-  ? openAIApiKey === 'user_provided'
+  ? azureOpenAIApiKey === 'user_provided'
-  : azureOpenAIApiKey === 'user_provided';
+  : openAIApiKey === 'user_provided';
 
 const fetchOpenAIModels = async (opts = { azure: false, plugins: false }, _models = []) => {
   let models = _models.slice() ?? [];
@@ -81,9 +81,6 @@ const getOpenAIModels = async (opts = { azure: false, plugins: false }) => {
   }
 
   if (userProvidedOpenAI) {
-    console.warn(
-      `When setting OPENAI_API_KEY to 'user_provided', ${key} must be set manually or default values will be used`,
-    );
     return models;
   }
 
@@ -161,6 +158,7 @@ router.get('/', async function (req, res) {
         plugins,
         availableAgents: ['classic', 'functions'],
         userProvide: userProvidedOpenAI,
+        azure: useAzurePlugins,
       }
       : false;
   const bingAI = process.env.BINGAI_TOKEN

api/server/routes/endpoints/anthropic/initializeClient.js

@@ -1,7 +1,21 @@
 const { AnthropicClient } = require('../../../../app');
+const { getUserKey, checkUserKeyExpiry } = require('../../../services/UserService');
 
-const initializeClient = (req) => {
+const initializeClient = async (req) => {
-  let anthropicApiKey = req.body?.token ?? process.env.ANTHROPIC_API_KEY;
+  const { ANTHROPIC_API_KEY } = process.env;
+  const { key: expiresAt } = req.body;
+
+  const isUserProvided = ANTHROPIC_API_KEY === 'user_provided';
+
+  let key = null;
+  if (expiresAt && isUserProvided) {
+    checkUserKeyExpiry(
+      expiresAt,
+      'Your ANTHROPIC_API_KEY has expired. Please provide your API key again.',
+    );
+    key = await getUserKey({ userId: req.user.id, name: 'anthropic' });
+  }
+  let anthropicApiKey = isUserProvided ? key : ANTHROPIC_API_KEY;
   const client = new AnthropicClient(anthropicApiKey);
   return {
     client,

api/server/routes/endpoints/gptPlugins/initializeClient.js

@@ -1,22 +1,43 @@
 const { PluginsClient } = require('../../../../app');
 const { getAzureCredentials } = require('../../../../utils');
+const { getUserKey, checkUserKeyExpiry } = require('../../../services/UserService');
 
-const initializeClient = (req, endpointOption) => {
+const initializeClient = async (req, endpointOption) => {
+  const { PROXY, OPENAI_API_KEY, AZURE_API_KEY, PLUGINS_USE_AZURE, OPENAI_REVERSE_PROXY } =
+    process.env;
+  const { key: expiresAt } = req.body;
   const clientOptions = {
-    debug: true,
+    // debug: true,
-    reverseProxyUrl: process.env.OPENAI_REVERSE_PROXY || null,
+    reverseProxyUrl: OPENAI_REVERSE_PROXY ?? null,
-    proxy: process.env.PROXY || null,
+    proxy: PROXY ?? null,
     ...endpointOption,
   };
 
-  let openAIApiKey = req.body?.token ?? process.env.OPENAI_API_KEY;
+  const isUserProvided = PLUGINS_USE_AZURE
-  if (process.env.PLUGINS_USE_AZURE) {
+    ? AZURE_API_KEY === 'user_provided'
-    clientOptions.azure = getAzureCredentials();
+    : OPENAI_API_KEY === 'user_provided';
+
+  let key = null;
+  if (expiresAt && isUserProvided) {
+    checkUserKeyExpiry(
+      expiresAt,
+      'Your OpenAI API key has expired. Please provide your API key again.',
+    );
+    key = await getUserKey({
+      userId: req.user.id,
+      name: PLUGINS_USE_AZURE ? 'azureOpenAI' : 'openAI',
+    });
+  }
+
+  let openAIApiKey = isUserProvided ? key : OPENAI_API_KEY;
+
+  if (PLUGINS_USE_AZURE) {
+    clientOptions.azure = isUserProvided ? JSON.parse(key) : getAzureCredentials();
     openAIApiKey = clientOptions.azure.azureOpenAIApiKey;
   }
 
   if (openAIApiKey && openAIApiKey.includes('azure') && !clientOptions.azure) {
-    clientOptions.azure = JSON.parse(req.body?.token) ?? getAzureCredentials();
+    clientOptions.azure = isUserProvided ? JSON.parse(key) : getAzureCredentials();
     openAIApiKey = clientOptions.azure.azureOpenAIApiKey;
   }
   const client = new PluginsClient(openAIApiKey, clientOptions);

api/server/routes/endpoints/openAI/addTitle.js

@@ -1,22 +1,11 @@
-const { titleConvo } = require('../../../../app');
 const { saveConvo } = require('../../../../models');
 
-const addTitle = async (
+const addTitle = async (req, { text, response, client }) => {
-  req,
+  const title = await client.titleConvo({ text, responseText: response?.text });
-  { text, azure, response, newConvo, parentMessageId, openAIApiKey },
+  await saveConvo(req.user.id, {
-) => {
+    conversationId: response.conversationId,
-  if (parentMessageId == '00000000-0000-0000-0000-000000000000' && newConvo) {
+    title,
-    const title = await titleConvo({
+  });
-      text,
-      azure,
-      response,
-      openAIApiKey,
-    });
-    await saveConvo(req.user.id, {
-      conversationId: response.conversationId,
-      title,
-    });
-  }
 };
 
 module.exports = addTitle;

api/server/routes/endpoints/openAI/initializeClient.js

@@ -1,19 +1,34 @@
 const { OpenAIClient } = require('../../../../app');
 const { getAzureCredentials } = require('../../../../utils');
+const { getUserKey, checkUserKeyExpiry } = require('../../../services/UserService');
 
-const initializeClient = (req, endpointOption) => {
+const initializeClient = async (req, endpointOption) => {
+  const { PROXY, OPENAI_API_KEY, AZURE_API_KEY, OPENAI_REVERSE_PROXY } = process.env;
+  const { key: expiresAt, endpoint } = req.body;
   const clientOptions = {
     // debug: true,
     // contextStrategy: 'refine',
-    reverseProxyUrl: process.env.OPENAI_REVERSE_PROXY || null,
+    reverseProxyUrl: OPENAI_REVERSE_PROXY ?? null,
-    proxy: process.env.PROXY || null,
+    proxy: PROXY ?? null,
     ...endpointOption,
   };
 
-  let openAIApiKey = req.body?.token ?? process.env.OPENAI_API_KEY;
+  const isUserProvided =
+    endpoint === 'openAI' ? OPENAI_API_KEY === 'user_provided' : AZURE_API_KEY === 'user_provided';
 
-  if (process.env.AZURE_API_KEY && endpointOption.endpoint === 'azureOpenAI') {
+  let key = null;
-    clientOptions.azure = JSON.parse(req.body?.token) ?? getAzureCredentials();
+  if (expiresAt && isUserProvided) {
+    checkUserKeyExpiry(
+      expiresAt,
+      'Your OpenAI API key has expired. Please provide your API key again.',
+    );
+    key = await getUserKey({ userId: req.user.id, name: endpoint });
+  }
+
+  let openAIApiKey = isUserProvided ? key : OPENAI_API_KEY;
+
+  if (process.env.AZURE_API_KEY && endpoint === 'azureOpenAI') {
+    clientOptions.azure = isUserProvided ? JSON.parse(key) : getAzureCredentials();
     openAIApiKey = clientOptions.azure.azureOpenAIApiKey;
   }
 

api/server/routes/index.js

@@ -7,6 +7,7 @@ const prompts = require('./prompts');
 const search = require('./search');
 const tokenizer = require('./tokenizer');
 const auth = require('./auth');
+const keys = require('./keys');
 const oauth = require('./oauth');
 const { router: endpoints } = require('./endpoints');
 const plugins = require('./plugins');
@@ -22,6 +23,7 @@ module.exports = {
   presets,
   prompts,
   auth,
+  keys,
   oauth,
   user,
   tokenizer,

api/server/routes/keys.js

@@ -0,0 +1,35 @@
+const express = require('express');
+const router = express.Router();
+const { updateUserKey, deleteUserKey, getUserKeyExpiry } = require('../services/UserService');
+const { requireJwtAuth } = require('../middleware/');
+
+router.put('/', requireJwtAuth, async (req, res) => {
+  await updateUserKey({ userId: req.user.id, ...req.body });
+  res.status(201).send();
+});
+
+router.delete('/:name', requireJwtAuth, async (req, res) => {
+  const { name } = req.params;
+  await deleteUserKey({ userId: req.user.id, name });
+  res.status(204).send();
+});
+
+router.delete('/', requireJwtAuth, async (req, res) => {
+  const { all } = req.query;
+
+  if (all !== 'true') {
+    return res.status(400).send({ error: 'Specify either all=true to delete.' });
+  }
+
+  await deleteUserKey({ userId: req.user.id, all: true });
+
+  res.status(204).send();
+});
+
+router.get('/', requireJwtAuth, async (req, res) => {
+  const { name } = req.query;
+  const response = await getUserKeyExpiry({ userId: req.user.id, name });
+  res.status(200).send(response);
+});
+
+module.exports = router;

api/server/routes/oauth.js

@@ -1,6 +1,7 @@
 const passport = require('passport');
 const express = require('express');
 const router = express.Router();
+const { loginLimiter } = require('../middleware');
 const config = require('../../../config/loader');
 const domains = config.domains;
 const isProduction = config.isProduction;
@@ -10,6 +11,7 @@ const isProduction = config.isProduction;
  */
 router.get(
   '/google',
+  loginLimiter,
   passport.authenticate('google', {
     scope: ['openid', 'profile', 'email'],
     session: false,
@@ -37,6 +39,7 @@ router.get(
 
 router.get(
   '/facebook',
+  loginLimiter,
   passport.authenticate('facebook', {
     scope: ['public_profile'],
     profileFields: ['id', 'email', 'name'],
@@ -66,6 +69,7 @@ router.get(
 
 router.get(
   '/openid',
+  loginLimiter,
   passport.authenticate('openid', {
     session: false,
   }),
@@ -91,6 +95,7 @@ router.get(
 
 router.get(
   '/github',
+  loginLimiter,
   passport.authenticate('github', {
     scope: ['user:email', 'read:user'],
     session: false,
@@ -118,6 +123,7 @@ router.get(
 
 router.get(
   '/discord',
+  loginLimiter,
   passport.authenticate('discord', {
     scope: ['identify', 'email'],
     session: false,

api/server/services/UserService.js

@@ -1,19 +1,18 @@
-const User = require('../../models/User');
+const { User, Key } = require('../../models');
+const { encrypt, decrypt } = require('../utils');
 
 const updateUserPluginsService = async (user, pluginKey, action) => {
   try {
     if (action === 'install') {
-      const response = await User.updateOne(
+      return await User.updateOne(
         { _id: user._id },
         { $set: { plugins: [...user.plugins, pluginKey] } },
       );
-      return response;
     } else if (action === 'uninstall') {
-      const response = await User.updateOne(
+      return await User.updateOne(
         { _id: user._id },
         { $set: { plugins: user.plugins.filter((plugin) => plugin !== pluginKey) } },
       );
-      return response;
     }
   } catch (err) {
     console.log(err);
@@ -21,4 +20,58 @@ const updateUserPluginsService = async (user, pluginKey, action) => {
   }
 };
 
-module.exports = { updateUserPluginsService };
+const getUserKey = async ({ userId, name }) => {
+  const keyValue = await Key.findOne({ userId, name }).lean();
+  if (!keyValue) {
+    throw new Error('User-provided key not found');
+  }
+  return decrypt(keyValue.value);
+};
+
+const getUserKeyExpiry = async ({ userId, name }) => {
+  const keyValue = await Key.findOne({ userId, name }).lean();
+  if (!keyValue) {
+    return { expiresAt: null };
+  }
+  return { expiresAt: keyValue.expiresAt };
+};
+
+const updateUserKey = async ({ userId, name, value, expiresAt }) => {
+  const encryptedValue = encrypt(value);
+  return await Key.findOneAndUpdate(
+    { userId, name },
+    {
+      userId,
+      name,
+      value: encryptedValue,
+      expiresAt: new Date(expiresAt),
+    },
+    { upsert: true, new: true },
+  ).lean();
+};
+
+const deleteUserKey = async ({ userId, name, all = false }) => {
+  if (all) {
+    return await Key.deleteMany({ userId });
+  }
+
+  await Key.findOneAndDelete({ userId, name }).lean();
+};
+
+const checkUserKeyExpiry = (expiresAt, message) => {
+  const expiresAtDate = new Date(expiresAt);
+  if (expiresAtDate < new Date()) {
+    const expiryStr = `User-provided key expired at ${expiresAtDate.toLocaleString()}`;
+    const errorMessage = message ? `${message}\n${expiryStr}` : expiryStr;
+    throw new Error(errorMessage);
+  }
+};
+
+module.exports = {
+  updateUserPluginsService,
+  getUserKey,
+  getUserKeyExpiry,
+  updateUserKey,
+  deleteUserKey,
+  checkUserKeyExpiry,
+};

client/package.json

@@ -39,6 +39,7 @@
     "@radix-ui/react-slider": "^1.1.1",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.3",
+    "@radix-ui/react-tooltip": "^1.0.6",
     "@tailwindcss/forms": "^0.5.3",
     "@tanstack/react-query": "^4.28.0",
     "@zattoo/use-double-click": "1.2.0",

client/src/common/types.ts

@@ -1,4 +1,4 @@
-import { TConversation, TMessage, TPreset } from 'librechat-data-provider';
+import type { TConversation, TMessage, TPreset, TMutation } from 'librechat-data-provider';
 
 export type TSetOption = (param: number | string) => (newValue: number | string | boolean) => void;
 export type TSetExample = (
@@ -120,3 +120,29 @@ export type TDisplayProps = TText &
   Pick<TAdditionalProps, 'isCreatedByUser' | 'message'> & {
     showCursor?: boolean;
   };
+
+export type TConfigProps = {
+  userKey: string;
+  setUserKey: React.Dispatch<React.SetStateAction<string>>;
+  endpoint: string;
+};
+
+export type TDangerButtonProps = {
+  id: string;
+  confirmClear: boolean;
+  className?: string;
+  disabled?: boolean;
+  showText?: boolean;
+  mutation?: TMutation;
+  onClick: () => void;
+  infoTextCode: string;
+  actionTextCode: string;
+  dataTestIdInitial: string;
+  dataTestIdConfirm: string;
+  confirmActionTextCode?: string;
+};
+
+export type TDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};

client/src/components/Auth/Login.tsx

@@ -30,7 +30,9 @@ function Login() {
             className="relative mt-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
             role="alert"
           >
-            {localize('com_auth_error_login')}
+            {error?.includes('429')
+              ? localize('com_auth_error_login_rl')
+              : localize('com_auth_error_login')}
           </div>
         )}
         <LoginForm onSubmit={login} />

client/src/components/Endpoints/EditPresetDialog.tsx

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import filenamify from 'filenamify';
 import exportFromJSON from 'export-from-json';
 import { useSetRecoilState, useRecoilState, useRecoilValue } from 'recoil';
-import { TEditPresetProps } from '~/common';
+import type { TEditPresetProps } from '~/common';
 import { useSetOptions, useLocalize } from '~/hooks';
 import { Input, Label, Dropdown, Dialog, DialogClose, DialogButton } from '~/components/';
 import DialogTemplate from '~/components/ui/DialogTemplate';

client/src/components/Endpoints/Settings/AgentSettings.tsx

@@ -1,4 +1,5 @@
-import { TModelSelectProps, ESide } from '~/common';
+import type { TModelSelectProps } from '~/common';
+import { ESide } from '~/common';
 import {
   Switch,
   SelectDropDown,

client/src/components/Endpoints/Settings/Anthropic.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
-import { ESide, TModelSelectProps } from '~/common';
+import type { TModelSelectProps } from '~/common';
+import { ESide } from '~/common';
 import {
   Input,
   Label,

client/src/components/Endpoints/Settings/Google.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
-import { ESide, TModelSelectProps } from '~/common';
+import type { TModelSelectProps } from '~/common';
+import { ESide } from '~/common';
 import {
   SelectDropDown,
   Input,

client/src/components/Endpoints/Settings/OpenAI.tsx

@@ -1,5 +1,6 @@
 import TextareaAutosize from 'react-textarea-autosize';
-import { ESide, TModelSelectProps } from '~/common';
+import type { TModelSelectProps } from '~/common';
+import { ESide } from '~/common';
 import {
   SelectDropDown,
   Input,

client/src/components/Endpoints/Settings/Plugins.tsx

@@ -9,7 +9,8 @@ import {
   HoverCardTrigger,
 } from '~/components';
 import OptionHover from './OptionHover';
-import { ESide, TModelSelectProps } from '~/common';
+import type { TModelSelectProps } from '~/common';
+import { ESide } from '~/common';
 import { cn, defaultTextProps, optionText, removeFocusOutlines } from '~/utils/';
 import { useLocalize } from '~/hooks';
 

client/src/components/Input/EndpointMenu/EndpointItem.tsx

@@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil';
 import { Settings } from 'lucide-react';
 import { DropdownMenuRadioItem } from '~/components';
 import { getIcon } from '~/components/Endpoints';
-import { SetTokenDialog } from '../SetTokenDialog';
+import { SetKeyDialog } from '../SetKeyDialog';
 import { useLocalize } from '~/hooks';
 
 import store from '~/store';
@@ -18,7 +18,7 @@ export default function ModelItem({
   value: string;
   isSelected: boolean;
 }) {
-  const [setTokenDialogOpen, setSetTokenDialogOpen] = useState(false);
+  const [isDialogOpen, setDialogOpen] = useState(false);
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
 
   const icon = getIcon({
@@ -29,7 +29,7 @@ export default function ModelItem({
     message: false,
   });
 
-  const isUserProvided = endpointsConfig?.[endpoint]?.userProvide;
+  const userProvidesKey = endpointsConfig?.[endpoint]?.userProvide;
   const localize = useLocalize();
 
   // regular model
@@ -52,7 +52,7 @@ export default function ModelItem({
           </span>
         )}
         <div className="flex w-4 flex-1" />
-        {isUserProvided ? (
+        {userProvidesKey ? (
           <button
             className={cn(
               'invisible m-0 mr-1 flex-initial rounded-md p-0 text-xs font-medium text-gray-400 hover:text-gray-700 group-hover:visible dark:font-normal dark:text-gray-400 dark:hover:text-gray-200',
@@ -60,19 +60,17 @@ export default function ModelItem({
             )}
             onClick={(e) => {
               e.preventDefault();
-              setSetTokenDialogOpen(true);
+              setDialogOpen(true);
             }}
           >
             <Settings className="mr-1 inline-block w-[16px] items-center stroke-1" />
-            {localize('com_endpoint_config_token')}
+            {localize('com_endpoint_config_key')}
           </button>
         ) : null}
       </DropdownMenuRadioItem>
-      <SetTokenDialog
+      {userProvidesKey && (
-        open={setTokenDialogOpen}
+        <SetKeyDialog open={isDialogOpen} onOpenChange={setDialogOpen} endpoint={endpoint} />
-        onOpenChange={setSetTokenDialogOpen}
+      )}
-        endpoint={endpoint}
-      />
     </>
   );
 }

client/src/components/Input/EndpointMenu/EndpointMenu.jsx

@@ -17,20 +17,24 @@ import {
   DropdownMenuTrigger,
   Dialog,
   DialogTrigger,
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
 } from '~/components/ui/';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import { cn, cleanupPreset, getDefaultConversation } from '~/utils';
-import { useLocalize } from '~/hooks';
+import { useLocalize, useLocalStorage } from '~/hooks';
-
 import store from '~/store';
 
 export default function NewConversationMenu() {
+  const localize = useLocalize();
   const [menuOpen, setMenuOpen] = useState(false);
   const [showPresets, setShowPresets] = useState(true);
   const [showEndpoints, setShowEndpoints] = useState(true);
   const [presetModelVisible, setPresetModelVisible] = useState(false);
   const [preset, setPreset] = useState(false);
-  const [conversation, setConversation] = useRecoilState(store.conversation) || {};
+  const [conversation, setConversation] = useRecoilState(store.conversation) ?? {};
   const [messages, setMessages] = useRecoilState(store.messages);
   const availableEndpoints = useRecoilValue(store.availableEndpoints);
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
@@ -71,24 +75,17 @@ export default function NewConversationMenu() {
     }
   }, [availableEndpoints]);
 
-  // save selected model to localStorage
+  // save states to localStorage
+  const [newUser, setNewUser] = useLocalStorage('newUser', true);
+  const [lastModel, setLastModel] = useLocalStorage('lastSelectedModel', {});
+  const setLastConvo = useLocalStorage('lastConversationSetup', {})[1];
+  const [lastBingSettings, setLastBingSettings] = useLocalStorage('lastBingSettings', {});
   useEffect(() => {
-    if (endpoint) {
+    if (endpoint && endpoint !== 'bingAI') {
-      const lastSelectedModel = JSON.parse(localStorage.getItem('lastSelectedModel')) || {};
+      setLastModel({ ...lastModel, [endpoint]: conversation?.model }), setLastConvo(conversation);
-      localStorage.setItem(
+    } else if (endpoint === 'bingAI') {
-        'lastSelectedModel',
-        JSON.stringify({ ...lastSelectedModel, [endpoint]: conversation.model }),
-      );
-      localStorage.setItem('lastConversationSetup', JSON.stringify(conversation));
-    }
-
-    if (endpoint === 'bingAI') {
-      const lastBingSettings = JSON.parse(localStorage.getItem('lastBingSettings')) || {};
       const { jailbreak, toneStyle } = conversation;
-      localStorage.setItem(
+      setLastBingSettings({ ...lastBingSettings, jailbreak, toneStyle });
-        'lastBingSettings',
-        JSON.stringify({ ...lastBingSettings, jailbreak, toneStyle }),
-      );
     }
   }, [conversation]);
 
@@ -150,124 +147,131 @@ export default function NewConversationMenu() {
     button: true,
   });
 
-  const localize = useLocalize();
+  const onOpenChange = (open) => {
+    setMenuOpen(open);
+    if (newUser) {
+      setNewUser(false);
+    }
+  };
 
   return (
-    <Dialog className="z-[100]">
+    <TooltipProvider delayDuration={300}>
-      <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+      <Tooltip>
-        <DropdownMenuTrigger asChild>
+        <Dialog className="z-[100]">
-          <Button
+          <DropdownMenu open={menuOpen} onOpenChange={onOpenChange}>
-            id="new-conversation-menu"
+            <TooltipTrigger asChild>
-            data-testid="new-conversation-menu"
+              <DropdownMenuTrigger asChild>
-            variant="outline"
+                <Button
-            className={
+                  id="new-conversation-menu"
-              'group relative mb-[-12px] ml-1 mt-[-8px] items-center rounded-md border-0 p-1 outline-none focus:ring-0 focus:ring-offset-0 dark:data-[state=open]:bg-opacity-50 md:left-1 md:ml-0 md:ml-[-12px] md:pl-1'
+                  data-testid="new-conversation-menu"
-            }
+                  variant="outline"
-          >
+                  className={
-            {icon}
+                    'group relative mb-[-12px] ml-1 mt-[-8px] items-center rounded-md border-0 p-1 outline-none focus:ring-0 focus:ring-offset-0 dark:data-[state=open]:bg-opacity-50 md:left-1 md:ml-0 md:ml-[-12px] md:pl-1'
-            <span className="max-w-0 overflow-hidden whitespace-nowrap px-0 text-slate-600 transition-all group-data-[state=open]:max-w-[80px] group-data-[state=open]:px-2 dark:text-slate-300">
+                  }
-              {localize('com_endpoint_new_topic')}
-            </span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent
-          className="z-[100] w-[375px] dark:bg-gray-900 md:w-96"
-          onCloseAutoFocus={(event) => event.preventDefault()}
-        >
-          <DropdownMenuLabel
-            className="cursor-pointer dark:text-gray-300"
-            onClick={() => setShowEndpoints((prev) => !prev)}
-          >
-            {showEndpoints ? localize('com_endpoint_hide') : localize('com_endpoint_show')}{' '}
-            {localize('com_endpoint')}
-          </DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuRadioGroup
-            value={endpoint}
-            onValueChange={onSelectEndpoint}
-            className="flex flex-col gap-1 overflow-y-auto"
-          >
-            {showEndpoints &&
-              (availableEndpoints.length ? (
-                <EndpointItems
-                  selectedEndpoint={endpoint}
-                  endpoints={availableEndpoints}
-                  onSelect={onSelectEndpoint}
-                />
-              ) : (
-                <DropdownMenuLabel className="dark:text-gray-300">
-                  {localize('com_endpoint_not_available')}
-                </DropdownMenuLabel>
-              ))}
-          </DropdownMenuRadioGroup>
-
-          <div className="mt-2 w-full" />
-
-          <DropdownMenuLabel className="flex items-center dark:text-gray-300">
-            <span
-              className="mr-auto cursor-pointer "
-              onClick={() => setShowPresets((prev) => !prev)}
-            >
-              {showPresets ? localize('com_endpoint_hide') : localize('com_endpoint_show')}{' '}
-              {localize('com_endpoint_presets')}
-            </span>
-            <FileUpload onFileSelected={onFileSelected} />
-            <Dialog>
-              <DialogTrigger asChild>
-                <label
-                  htmlFor="file-upload"
-                  className="mr-1 flex h-[32px] h-auto cursor-pointer  items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
                 >
-                  {/* <Button
+                  {icon}
-                  type="button"
+                </Button>
-                  className="h-auto bg-transparent px-2 py-1 text-xs font-medium font-normal text-red-700 hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-red-400 dark:hover:bg-gray-800 dark:hover:text-red-400"
+              </DropdownMenuTrigger>
-                > */}
+            </TooltipTrigger>
-                  <Trash2 className="mr-1 flex w-[22px] items-center stroke-1" />
+            <TooltipContent forceMount={newUser} sideOffset={5}>
-                  {localize('com_ui_clear')} {localize('com_ui_all')}
+              {localize('com_endpoint_open_menu')}
-                  {/* </Button> */}
+            </TooltipContent>
-                </label>
+            <DropdownMenuContent
-              </DialogTrigger>
+              className="z-[100] w-[375px] dark:bg-gray-900 md:w-96"
-              <DialogTemplate
+              onCloseAutoFocus={(event) => event.preventDefault()}
-                title={`${localize('com_ui_clear')} ${localize('com_endpoint_presets')}`}
+              side="top"
-                description={localize('com_endpoint_presets_clear_warning')}
+            >
-                selection={{
+              <DropdownMenuLabel
-                  selectHandler: clearAllPresets,
+                className="cursor-pointer dark:text-gray-300"
-                  selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
+                onClick={() => setShowEndpoints((prev) => !prev)}
-                  selectText: localize('com_ui_clear'),
+              >
-                }}
+                {showEndpoints ? localize('com_endpoint_hide') : localize('com_endpoint_show')}{' '}
-                className="max-w-[500px]"
+                {localize('com_endpoint')}
-              />
+              </DropdownMenuLabel>
-            </Dialog>
+              <DropdownMenuSeparator />
-          </DropdownMenuLabel>
+              <DropdownMenuRadioGroup
-          <DropdownMenuSeparator />
+                value={endpoint}
-          <DropdownMenuRadioGroup
+                onValueChange={onSelectEndpoint}
-            onValueChange={onSelectPreset}
+                className="flex flex-col gap-1 overflow-y-auto"
-            className={cn(
+              >
-              'overflow-y-auto overflow-x-hidden',
+                {showEndpoints &&
-              showEndpoints ? 'max-h-[210px]' : 'max-h-[315px]',
+                  (availableEndpoints.length ? (
-            )}
+                    <EndpointItems
-          >
+                      selectedEndpoint={endpoint}
-            {showPresets &&
+                      endpoints={availableEndpoints}
-              (presets.length ? (
+                      onSelect={onSelectEndpoint}
-                <PresetItems
+                    />
-                  presets={presets}
+                  ) : (
-                  onSelect={onSelectPreset}
+                    <DropdownMenuLabel className="dark:text-gray-300">
-                  onChangePreset={onChangePreset}
+                      {localize('com_endpoint_not_available')}
-                  onDeletePreset={onDeletePreset}
+                    </DropdownMenuLabel>
-                />
+                  ))}
-              ) : (
+              </DropdownMenuRadioGroup>
-                <DropdownMenuLabel className="dark:text-gray-300">
+
-                  {localize('com_endpoint_no_presets')}
+              <div className="mt-2 w-full" />
-                </DropdownMenuLabel>
+
-              ))}
+              <DropdownMenuLabel className="flex items-center dark:text-gray-300">
-          </DropdownMenuRadioGroup>
+                <span
-        </DropdownMenuContent>
+                  className="mr-auto cursor-pointer "
-      </DropdownMenu>
+                  onClick={() => setShowPresets((prev) => !prev)}
-      <EditPresetDialog
+                >
-        open={presetModelVisible}
+                  {showPresets ? localize('com_endpoint_hide') : localize('com_endpoint_show')}{' '}
-        onOpenChange={setPresetModelVisible}
+                  {localize('com_endpoint_presets')}
-        preset={preset}
+                </span>
-      />
+                <FileUpload onFileSelected={onFileSelected} />
-    </Dialog>
+                <Dialog>
+                  <DialogTrigger asChild>
+                    <label
+                      htmlFor="file-upload"
+                      className="mr-1 flex h-[32px] h-auto cursor-pointer  items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
+                    >
+                      <Trash2 className="mr-1 flex w-[22px] items-center stroke-1" />
+                      {localize('com_ui_clear')} {localize('com_ui_all')}
+                    </label>
+                  </DialogTrigger>
+                  <DialogTemplate
+                    title={`${localize('com_ui_clear')} ${localize('com_endpoint_presets')}`}
+                    description={localize('com_endpoint_presets_clear_warning')}
+                    selection={{
+                      selectHandler: clearAllPresets,
+                      selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
+                      selectText: localize('com_ui_clear'),
+                    }}
+                    className="max-w-[500px]"
+                  />
+                </Dialog>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuRadioGroup
+                onValueChange={onSelectPreset}
+                className={cn(
+                  'overflow-y-auto overflow-x-hidden',
+                  showEndpoints ? 'max-h-[210px]' : 'max-h-[315px]',
+                )}
+              >
+                {showPresets &&
+                  (presets.length ? (
+                    <PresetItems
+                      presets={presets}
+                      onSelect={onSelectPreset}
+                      onChangePreset={onChangePreset}
+                      onDeletePreset={onDeletePreset}
+                    />
+                  ) : (
+                    <DropdownMenuLabel className="dark:text-gray-300">
+                      {localize('com_endpoint_no_presets')}
+                    </DropdownMenuLabel>
+                  ))}
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <EditPresetDialog
+            open={presetModelVisible}
+            onOpenChange={setPresetModelVisible}
+            preset={preset}
+          />
+        </Dialog>
+      </Tooltip>
+    </TooltipProvider>
   );
 }

client/src/components/Input/EndpointMenu/FileUpload.tsx

@@ -51,6 +51,15 @@ const FileUpload: React.FC<FileUploadProps> = ({
     reader.readAsText(file);
   };
 
+  let statusText: string;
+  if (!status) {
+    statusText = text ?? localize('com_endpoint_import');
+  } else if (status === 'success') {
+    statusText = successText ?? localize('com_ui_upload_success');
+  } else {
+    statusText = invalidText ?? localize('com_ui_upload_invalid');
+  }
+
   return (
     <label
       htmlFor={`file-upload-${id}`}
@@ -60,13 +69,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
       )}
     >
       <FileUp className="mr-1 flex w-[22px] items-center stroke-1" />
-      <span className="flex text-xs ">
+      <span className="flex text-xs ">{statusText}</span>
-        {!status
-          ? text || localize('com_endpoint_import')
-          : status === localize('com_ui_succes')
-            ? successText
-            : invalidText}
-      </span>
       <input
         id={`file-upload-${id}`}
         value=""

client/src/components/Input/SetKeyDialog/GoogleConfig.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { object, string } from 'zod';
+import type { TConfigProps } from '~/common';
+import FileUpload from '../EndpointMenu/FileUpload';
+import { useLocalize } from '~/hooks';
+
+const CredentialsSchema = object({
+  client_email: string().email().min(3),
+  project_id: string().min(3),
+  private_key: string().min(601),
+});
+
+const validateCredentials = (credentials: Record<string, unknown>) => {
+  const result = CredentialsSchema.safeParse(credentials);
+  return result.success;
+};
+
+const GoogleConfig = ({ setUserKey }: Pick<TConfigProps, 'setUserKey'>) => {
+  const localize = useLocalize();
+  return (
+    <FileUpload
+      id="googleKey"
+      className="w-full"
+      text={localize('com_endpoint_config_key_import_json_key')}
+      successText={localize('com_endpoint_config_key_import_json_key_success')}
+      invalidText={localize('com_endpoint_config_key_import_json_key_invalid')}
+      validator={validateCredentials}
+      onFileSelected={(data) => {
+        setUserKey(JSON.stringify(data));
+      }}
+    />
+  );
+};
+
+export default GoogleConfig;

client/src/components/Input/SetKeyDialog/HelpText.tsx

@@ -6,7 +6,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
   const textMap = {
     bingAI: (
       <small className="break-all text-gray-600">
-        {localize('com_endpoint_config_token_get_edge_key')}{' '}
+        {localize('com_endpoint_config_key_get_edge_key')}{' '}
         <a
           target="_blank"
           href="https://www.bing.com"
@@ -16,21 +16,21 @@ function HelpText({ endpoint }: { endpoint: string }) {
           https://www.bing.com
         </a>
         {'. '}
-        {localize('com_endpoint_config_token_get_edge_key_dev_tool')}{' '}
+        {localize('com_endpoint_config_key_get_edge_key_dev_tool')}{' '}
         <a
           target="_blank"
           href="https://github.com/waylaidwanderer/node-chatgpt-api/issues/378#issuecomment-1559868368"
           rel="noreferrer"
           className="text-blue-600 underline"
         >
-          {localize('com_endpoint_config_token_edge_instructions')}
+          {localize('com_endpoint_config_key_edge_instructions')}
         </a>{' '}
-        {localize('com_endpoint_config_token_edge_full_token_string')}
+        {localize('com_endpoint_config_key_edge_full_token_string')}
       </small>
     ),
     chatGPTBrowser: (
       <small className="break-all text-gray-600">
-        {localize('com_endpoint_config_token_chatgpt')}{' '}
+        {localize('com_endpoint_config_key_chatgpt')}{' '}
         <a
           target="_blank"
           href="https://chat.openai.com"
@@ -40,7 +40,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
           https://chat.openai.com
         </a>
         {', '}
-        {localize('com_endpoint_config_token_chatgpt_then_visit')}{' '}
+        {localize('com_endpoint_config_key_chatgpt_then_visit')}{' '}
         <a
           target="_blank"
           href="https://chat.openai.com/api/auth/session"
@@ -50,31 +50,31 @@ function HelpText({ endpoint }: { endpoint: string }) {
           https://chat.openai.com/api/auth/session
         </a>
         {'. '}
-        {localize('com_endpoint_config_token_chatgpt_copy_token')}
+        {localize('com_endpoint_config_key_chatgpt_copy_token')}
       </small>
     ),
     google: (
       <small className="break-all text-gray-600">
-        {localize('com_endpoint_config_token_google_need_to')}{' '}
+        {localize('com_endpoint_config_key_google_need_to')}{' '}
         <a
           target="_blank"
           href="https://console.cloud.google.com/vertex-ai"
           rel="noreferrer"
           className="text-blue-600 underline"
         >
-          {localize('com_endpoint_config_token_google_vertex_ai')}
+          {localize('com_endpoint_config_key_google_vertex_ai')}
         </a>{' '}
-        {localize('com_endpoint_config_token_google_vertex_api')}{' '}
+        {localize('com_endpoint_config_key_google_vertex_api')}{' '}
         <a
           target="_blank"
           href="https://console.cloud.google.com/projectselector/iam-admin/serviceaccounts/create?walkthrough_id=iam--create-service-account#step_index=1"
           rel="noreferrer"
           className="text-blue-600 underline"
         >
-          {localize('com_endpoint_config_token_google_service_account')}
+          {localize('com_endpoint_config_key_google_service_account')}
         </a>
         {'. '}
-        {localize('com_endpoint_config_token_google_vertex_api_role')}
+        {localize('com_endpoint_config_key_google_vertex_api_role')}
       </small>
     ),
   };

client/src/components/Input/SetKeyDialog/InputWithLabel.tsx

@@ -21,9 +21,10 @@ const InputWithLabel: FC<InputWithLabelProps> = ({ value, onChange, label, id })
 
       <Input
         id={id}
-        value={value || ''}
+        data-testid={`input-${id}`}
+        value={value ?? ''}
         onChange={onChange}
-        placeholder={`${localize('com_ui_enter')} ${label}`}
+        placeholder={`${localize('com_endpoint_config_value')} ${label}`}
         className={cn(
           defaultTextPropsLabel,
           'flex h-10 max-h-10 w-full resize-none px-3 py-2',

client/src/components/Input/SetKeyDialog/OpenAIConfig.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 // import * as Checkbox from '@radix-ui/react-checkbox';
 // import { CheckIcon } from '@radix-ui/react-icons';
 import InputWithLabel from './InputWithLabel';
-import store from '~/store';
+import type { TConfigProps } from '~/common';
 
 function isJson(str: string) {
   try {
@@ -15,56 +15,48 @@ function isJson(str: string) {
   return true;
 }
 
-type OpenAIConfigProps = {
+const OpenAIConfig = ({ userKey, setUserKey, endpoint }: TConfigProps) => {
-  token: string;
-  setToken: React.Dispatch<React.SetStateAction<string>>;
-  endpoint: string;
-};
-
-const OpenAIConfig = ({ token, setToken, endpoint }: OpenAIConfigProps) => {
   const [showPanel, setShowPanel] = useState(endpoint === 'azureOpenAI');
-  const { getToken } = store.useToken(endpoint);
 
   useEffect(() => {
-    const oldToken = getToken();
+    if (isJson(userKey)) {
-    if (isJson(token)) {
       setShowPanel(true);
     }
-    setToken(oldToken ?? '');
+    setUserKey('');
   }, []);
 
   useEffect(() => {
-    if (!showPanel && isJson(token)) {
+    if (!showPanel && isJson(userKey)) {
-      setToken('');
+      setUserKey('');
     }
   }, [showPanel]);
 
   function getAzure(name: string) {
-    if (isJson(token)) {
+    if (isJson(userKey)) {
-      const newToken = JSON.parse(token);
+      const newKey = JSON.parse(userKey);
-      return newToken[name];
+      return newKey[name];
     } else {
       return '';
     }
   }
 
   function setAzure(name: string, value: number | string | boolean) {
-    let newToken = {};
+    let newKey = {};
-    if (isJson(token)) {
+    if (isJson(userKey)) {
-      newToken = JSON.parse(token);
+      newKey = JSON.parse(userKey);
     }
-    newToken[name] = value;
+    newKey[name] = value;
 
-    setToken(JSON.stringify(newToken));
+    setUserKey(JSON.stringify(newKey));
   }
   return (
     <>
       {!showPanel ? (
         <>
           <InputWithLabel
-            id={'chatGPTLabel'}
+            id={endpoint}
-            value={token || ''}
+            value={userKey ?? ''}
-            onChange={(e: { target: { value: string } }) => setToken(e.target.value || '')}
+            onChange={(e: { target: { value: string } }) => setUserKey(e.target.value ?? '')}
             label={'OpenAI API Key'}
           />
         </>
@@ -72,36 +64,36 @@ const OpenAIConfig = ({ token, setToken, endpoint }: OpenAIConfigProps) => {
         <>
           <InputWithLabel
             id={'instanceNameLabel'}
-            value={getAzure('azureOpenAIApiInstanceName') || ''}
+            value={getAzure('azureOpenAIApiInstanceName') ?? ''}
             onChange={(e: { target: { value: string } }) =>
-              setAzure('azureOpenAIApiInstanceName', e.target.value || '')
+              setAzure('azureOpenAIApiInstanceName', e.target.value ?? '')
             }
             label={'Azure OpenAI Instance Name'}
           />
 
           <InputWithLabel
             id={'deploymentNameLabel'}
-            value={getAzure('azureOpenAIApiDeploymentName') || ''}
+            value={getAzure('azureOpenAIApiDeploymentName') ?? ''}
             onChange={(e: { target: { value: string } }) =>
-              setAzure('azureOpenAIApiDeploymentName', e.target.value || '')
+              setAzure('azureOpenAIApiDeploymentName', e.target.value ?? '')
             }
             label={'Azure OpenAI Deployment Name'}
           />
 
           <InputWithLabel
             id={'versionLabel'}
-            value={getAzure('azureOpenAIApiVersion') || ''}
+            value={getAzure('azureOpenAIApiVersion') ?? ''}
             onChange={(e: { target: { value: string } }) =>
-              setAzure('azureOpenAIApiVersion', e.target.value || '')
+              setAzure('azureOpenAIApiVersion', e.target.value ?? '')
             }
             label={'Azure OpenAI API Version'}
           />
 
           <InputWithLabel
             id={'apiKeyLabel'}
-            value={getAzure('azureOpenAIApiKey') || ''}
+            value={getAzure('azureOpenAIApiKey') ?? ''}
             onChange={(e: { target: { value: string } }) =>
-              setAzure('azureOpenAIApiKey', e.target.value || '')
+              setAzure('azureOpenAIApiKey', e.target.value ?? '')
             }
             label={'Azure OpenAI API Key'}
           />

client/src/components/Input/SetKeyDialog/OtherConfig.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import InputWithLabel from './InputWithLabel';
+import type { TConfigProps } from '~/common';
+import { useLocalize } from '~/hooks';
+
+const OtherConfig = ({ userKey, setUserKey, endpoint }: TConfigProps) => {
+  const localize = useLocalize();
+  return (
+    <InputWithLabel
+      id={endpoint}
+      value={userKey ?? ''}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUserKey(e.target.value ?? '')}
+      label={localize('com_endpoint_config_key_name')}
+    />
+  );
+};
+
+export default OtherConfig;

client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import type { TDialogProps } from '~/common';
+import { Dialog, Dropdown } from '~/components/ui';
+import DialogTemplate from '~/components/ui/DialogTemplate';
+import { RevokeKeysButton } from '~/components/Nav';
+import { cn, defaultTextProps, removeFocusOutlines, alternateName } from '~/utils';
+import { useUserKey, useLocalize } from '~/hooks';
+import GoogleConfig from './GoogleConfig';
+import OpenAIConfig from './OpenAIConfig';
+import OtherConfig from './OtherConfig';
+import HelpText from './HelpText';
+
+const endpointComponents = {
+  google: GoogleConfig,
+  openAI: OpenAIConfig,
+  azureOpenAI: OpenAIConfig,
+  gptPlugins: OpenAIConfig,
+  default: OtherConfig,
+};
+
+const EXPIRY = {
+  THIRTY_MINUTES: { display: 'in 30 minutes', value: 30 * 60 * 1000 },
+  TWO_HOURS: { display: 'in 2 hours', value: 2 * 60 * 60 * 1000 },
+  TWELVE_HOURS: { display: 'in 12 hours', value: 12 * 60 * 60 * 1000 },
+  ONE_DAY: { display: 'in 1 day', value: 24 * 60 * 60 * 1000 },
+  ONE_WEEK: { display: 'in 7 days', value: 7 * 24 * 60 * 60 * 1000 },
+  ONE_MONTH: { display: 'in 30 days', value: 30 * 24 * 60 * 60 * 1000 },
+};
+
+const SetKeyDialog = ({
+  open,
+  onOpenChange,
+  endpoint,
+}: Pick<TDialogProps, 'open' | 'onOpenChange'> & {
+  endpoint: string;
+}) => {
+  const [userKey, setUserKey] = useState('');
+  const [expiresAtLabel, setExpiresAtLabel] = useState(EXPIRY.TWELVE_HOURS.display);
+  const { getExpiry, saveUserKey } = useUserKey(endpoint);
+  const localize = useLocalize();
+
+  const expirationOptions = Object.values(EXPIRY);
+
+  const handleExpirationChange = (label: string) => {
+    setExpiresAtLabel(label);
+  };
+
+  const submit = () => {
+    const selectedOption = expirationOptions.find((option) => option.display === expiresAtLabel);
+    const expiresAt = Date.now() + (selectedOption ? selectedOption.value : 0);
+    saveUserKey(userKey, expiresAt);
+    onOpenChange(false);
+    setUserKey('');
+  };
+
+  const EndpointComponent = endpointComponents[endpoint] ?? endpointComponents['default'];
+  const expiryTime = getExpiry();
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogTemplate
+        title={`${localize('com_endpoint_config_key_for')} ${alternateName[endpoint] ?? endpoint}`}
+        className="w-full max-w-[650px] sm:w-3/4 md:w-3/4 lg:w-3/4"
+        main={
+          <div className="grid w-full items-center gap-2">
+            <small className="text-red-600">
+              {`${localize('com_endpoint_config_key_encryption')} ${
+                !expiryTime
+                  ? localize('com_endpoint_config_key_expiry')
+                  : `${new Date(expiryTime).toLocaleString()}`
+              }`}
+            </small>
+            <Dropdown
+              label="Expires "
+              value={expiresAtLabel}
+              onChange={handleExpirationChange}
+              options={expirationOptions.map((option) => option.display)}
+              className={cn(
+                defaultTextProps,
+                'flex h-full w-full resize-none',
+                removeFocusOutlines,
+              )}
+              optionsClassName="max-h-72"
+              containerClassName="flex w-1/2 md:w-1/3 resize-none z-[51]"
+            />
+            <EndpointComponent userKey={userKey} setUserKey={setUserKey} endpoint={endpoint} />
+            <HelpText endpoint={endpoint} />
+          </div>
+        }
+        selection={{
+          selectHandler: submit,
+          selectClasses: 'bg-green-600 hover:bg-green-700 dark:hover:bg-green-800 text-white',
+          selectText: localize('com_ui_submit'),
+        }}
+        leftButtons={
+          <RevokeKeysButton endpoint={endpoint} showText={false} disabled={!expiryTime} />
+        }
+      />
+    </Dialog>
+  );
+};
+
+export default SetKeyDialog;

client/src/components/Input/SetKeyDialog/index.ts

@@ -0,0 +1 @@
+export { default as SetKeyDialog } from './SetKeyDialog';

client/src/components/Input/SetTokenDialog/GoogleConfig.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import FileUpload from '../EndpointMenu/FileUpload';
-import { useLocalize } from '~/hooks';
-
-const GoogleConfig = ({ setToken }: { setToken: React.Dispatch<React.SetStateAction<string>> }) => {
-  const localize = useLocalize();
-  return (
-    <FileUpload
-      id="googleKey"
-      className="w-full"
-      text={localize('com_endpoint_config_token_import_json_key')}
-      successText={localize('com_endpoint_config_token_import_json_key_succesful')}
-      invalidText={localize('com_endpoint_config_token_import_json_key_invalid')}
-      validator={(credentials) => {
-        if (!credentials) {
-          return false;
-        }
-
-        if (
-          !credentials.client_email ||
-          typeof credentials.client_email !== 'string' ||
-          credentials.client_email.length <= 2
-        ) {
-          return false;
-        }
-
-        if (
-          !credentials.project_id ||
-          typeof credentials.project_id !== 'string' ||
-          credentials.project_id.length <= 2
-        ) {
-          return false;
-        }
-
-        if (
-          !credentials.private_key ||
-          typeof credentials.private_key !== 'string' ||
-          credentials.private_key.length <= 600
-        ) {
-          return false;
-        }
-
-        return true;
-      }}
-      onFileSelected={(data) => {
-        setToken(JSON.stringify(data));
-      }}
-    />
-  );
-};
-
-export default GoogleConfig;

client/src/components/Input/SetTokenDialog/OtherConfig.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import InputWithLabel from './InputWithLabel';
-import { useLocalize } from '~/hooks';
-
-type ConfigProps = {
-  token: string;
-  setToken: React.Dispatch<React.SetStateAction<string>>;
-};
-
-const OtherConfig = ({ token, setToken }: ConfigProps) => {
-  const localize = useLocalize();
-  return (
-    <InputWithLabel
-      id={'chatGPTLabel'}
-      value={token || ''}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setToken(e.target.value || '')}
-      label={localize('com_endpoint_config_token_name')}
-    />
-  );
-};
-
-export default OtherConfig;

client/src/components/Input/SetTokenDialog/SetTokenDialog.tsx

@@ -1,56 +0,0 @@
-import React, { useState } from 'react';
-import HelpText from './HelpText';
-import GoogleConfig from './GoogleConfig';
-import OpenAIConfig from './OpenAIConfig';
-import OtherConfig from './OtherConfig';
-import { Dialog } from '~/components/ui';
-import DialogTemplate from '~/components/ui/DialogTemplate';
-import { alternateName } from '~/utils';
-import store from '~/store';
-import { useLocalize } from '~/hooks';
-
-const SetTokenDialog = ({ open, onOpenChange, endpoint }) => {
-  const localize = useLocalize();
-  const [token, setToken] = useState('');
-  const { saveToken } = store.useToken(endpoint);
-
-  const submit = () => {
-    saveToken(token);
-    onOpenChange(false);
-  };
-
-  const endpointComponents = {
-    google: GoogleConfig,
-    openAI: OpenAIConfig,
-    azureOpenAI: OpenAIConfig,
-    gptPlugins: OpenAIConfig,
-    default: OtherConfig,
-  };
-
-  const EndpointComponent = endpointComponents[endpoint] || endpointComponents['default'];
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogTemplate
-        title={`${localize('com_endpoint_config_token_for')} ${
-          alternateName[endpoint] ?? endpoint
-        }`}
-        className="w-full max-w-[650px] sm:w-3/4 md:w-3/4 lg:w-3/4"
-        main={
-          <div className="grid w-full items-center gap-2">
-            <EndpointComponent token={token} setToken={setToken} endpoint={endpoint} />
-            <small className="text-red-600">{localize('com_endpoint_config_token_server')}</small>
-            <HelpText endpoint={endpoint} />
-          </div>
-        }
-        selection={{
-          selectHandler: submit,
-          selectClasses: 'bg-green-600 hover:bg-green-700 dark:hover:bg-green-800 text-white',
-          selectText: localize('com_ui_submit'),
-        }}
-      />
-    </Dialog>
-  );
-};
-
-export default SetTokenDialog;

client/src/components/Input/SetTokenDialog/index.ts

@@ -1 +0,0 @@
-export { default as SetTokenDialog } from './SetTokenDialog';

client/src/components/Input/SubmitButton.tsx

@@ -1,33 +1,43 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { StopGeneratingIcon } from '~/components';
 import { Settings } from 'lucide-react';
-import { SetTokenDialog } from './SetTokenDialog';
+import { SetKeyDialog } from './SetKeyDialog';
-import store from '~/store';
+import { useUserKey, useLocalize } from '~/hooks';
-import { useLocalize } from '~/hooks';
 
 export default function SubmitButton({
-  endpoint,
+  conversation,
   submitMessage,
   handleStopGenerating,
   disabled,
   isSubmitting,
-  endpointsConfig,
+  userProvidesKey,
 }) {
-  const [setTokenDialogOpen, setSetTokenDialogOpen] = useState(false);
+  const { endpoint } = conversation;
-  const { getToken } = store.useToken(endpoint);
+  const [isDialogOpen, setDialogOpen] = useState(false);
-
+  const { checkExpiry } = useUserKey(endpoint);
-  const isTokenProvided = endpointsConfig?.[endpoint]?.userProvide ? !!getToken() : true;
+  const [isKeyProvided, setKeyProvided] = useState(userProvidesKey ? checkExpiry() : true);
-  const endpointsToHideSetTokens = new Set(['openAI', 'azureOpenAI', 'bingAI']);
+  const isKeyActive = checkExpiry();
   const localize = useLocalize();
 
-  const clickHandler = (e) => {
+  useEffect(() => {
-    e.preventDefault();
+    if (userProvidesKey) {
-    submitMessage();
+      setKeyProvided(isKeyActive);
-  };
+    } else {
+      setKeyProvided(true);
+    }
+  }, [checkExpiry, endpoint, userProvidesKey, isKeyActive]);
 
-  const setToken = () => {
+  const clickHandler = useCallback(
-    setSetTokenDialogOpen(true);
+    (e: React.MouseEvent<HTMLButtonElement>) => {
-  };
+      e.preventDefault();
+      submitMessage();
+    },
+    [submitMessage],
+  );
+
+  const setKey = useCallback(() => {
+    setDialogOpen(true);
+  }, []);
 
   if (isSubmitting) {
     return (
@@ -41,26 +51,24 @@ export default function SubmitButton({
         </div>
       </button>
     );
-  } else if (!isTokenProvided && !endpointsToHideSetTokens.has(endpoint)) {
+  } else if (!isKeyProvided) {
     return (
       <>
         <button
-          onClick={setToken}
+          onClick={setKey}
           type="button"
           className="group absolute bottom-0 right-0 z-[101] flex h-[100%] w-auto items-center justify-center bg-transparent pr-1 text-gray-500"
         >
           <div className="flex items-center justify-center rounded-md text-xs group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
             <div className="m-0 mr-0 flex items-center justify-center rounded-md p-2 sm:p-2">
               <Settings className="mr-1 inline-block h-auto w-[18px]" />
-              {localize('com_endpoint_config_token_name_placeholder')}
+              {localize('com_endpoint_config_key_name_placeholder')}
             </div>
           </div>
         </button>
-        <SetTokenDialog
+        {userProvidesKey && (
-          open={setTokenDialogOpen}
+          <SetKeyDialog open={isDialogOpen} onOpenChange={setDialogOpen} endpoint={endpoint} />
-          onOpenChange={setSetTokenDialogOpen}
+        )}
-          endpoint={endpoint}
-        />
       </>
     );
   } else {
@@ -68,6 +76,7 @@ export default function SubmitButton({
       <button
         onClick={clickHandler}
         disabled={disabled}
+        data-testid="submit-button"
         className="group absolute bottom-0 right-0 z-[101] flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
       >
         <div className="m-1 mr-0 rounded-md pb-[9px] pl-[9.5px] pr-[7px] pt-[11px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">

client/src/components/Input/TextChat.jsx

@@ -169,12 +169,12 @@ export default function TextChat({ isSearchView = false }) {
                   className="m-0 flex h-auto max-h-52 flex-1 resize-none overflow-auto border-0 bg-transparent p-0 pl-2 pr-12 leading-6 placeholder:text-sm placeholder:text-gray-600 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder:text-gray-500 md:pl-2"
                 />
                 <SubmitButton
+                  conversation={conversation}
                   submitMessage={submitMessage}
                   handleStopGenerating={handleStopGenerating}
                   disabled={disabled || isNotAppendable}
                   isSubmitting={isSubmitting}
-                  endpointsConfig={endpointsConfig}
+                  userProvidesKey={endpointsConfig?.[conversation.endpoint]?.userProvide}
-                  endpoint={conversation?.endpoint}
                 />
               </div>
             </div>

client/src/components/Messages/Content/MessageContent.tsx

@@ -22,7 +22,7 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay
     <div
       className={cn(
         'markdown prose dark:prose-invert light w-full break-words',
-        isCreatedByUser ? 'whitespace-pre-wrap' : '',
+        isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70',
       )}
     >
       {!isCreatedByUser ? (

client/src/components/Messages/Content/Plugin.tsx

@@ -96,7 +96,7 @@ const Plugin: React.FC<PluginProps> = ({ plugin }) => {
             <>
               <div
                 className={cn(
-                  plugin.loading ? 'bg-green-100' : 'bg-[#ECECF1]',
+                  plugin.loading ? 'bg-green-100' : 'bg-gray-20',
                   'flex items-center rounded p-3 text-xs text-gray-900',
                 )}
               >

client/src/components/Messages/Message.tsx

@@ -11,6 +11,7 @@ import SiblingSwitch from './SiblingSwitch';
 import { getIcon } from '~/components/Endpoints';
 import { useMessageHandler } from '~/hooks';
 import type { TMessageProps } from '~/common';
+import { cn } from '~/utils';
 import store from '~/store';
 
 export default function Message({
@@ -78,9 +79,14 @@ export default function Message({
     }
   };
 
+  const commonClasses =
+    'w-full border-b text-gray-800 group border-black/10 dark:border-gray-900/50 dark:text-gray-100';
+  const uniqueClasses = isCreatedByUser
+    ? 'bg-white dark:bg-gray-800 dark:text-gray-20'
+    : 'bg-gray-50 dark:bg-gray-1000 dark:text-gray-70';
+
   const props = {
-    className:
+    className: cn(commonClasses, uniqueClasses),
-      'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800',
     titleclass: '',
   };
 
@@ -90,11 +96,6 @@ export default function Message({
     model: message?.model ?? conversation?.model,
   });
 
-  if (!isCreatedByUser) {
-    props.className =
-      'w-full border-b border-black/10 bg-gray-50 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-gray-1000';
-  }
-
   if (message?.bg && searchResult) {
     props.className = message?.bg?.split('hover')[0];
     props.titleclass = message?.bg?.split(props.className)[1] + ' cursor-pointer';

client/src/components/Nav/ExportConversation/ExportModel.jsx

@@ -119,7 +119,13 @@ export default function ExportModel({ open, onOpenChange }) {
   };
 
   const exportScreenshot = async () => {
-    const data = await captureScreenshot();
+    let data;
+    try {
+      data = await captureScreenshot();
+    } catch (err) {
+      console.error('Failed to capture screenshot');
+      return console.error(err);
+    }
     download(data, `${filename}.png`, 'image/png');
   };
 

client/src/components/Nav/Settings.jsx

@@ -1,88 +0,0 @@
-import * as Tabs from '@radix-ui/react-tabs';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui';
-import { General } from './SettingsTabs';
-import { CogIcon } from '~/components/svg';
-import { useEffect, useState } from 'react';
-import { cn } from '~/utils/';
-import { useRecoilValue } from 'recoil';
-import { localize } from '~/localization/Translation';
-import store from '~/store';
-
-export default function Settings({ open, onOpenChange }) {
-  const [confirmClear, setConfirmClear] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
-  const lang = useRecoilValue(store.lang);
-
-  // check if mobile dynamically and update
-  useEffect(() => {
-    const checkMobile = () => {
-      if (window.innerWidth <= 768) {
-        setIsMobile(true);
-      } else {
-        setIsMobile(false);
-      }
-    };
-
-    checkMobile();
-    window.addEventListener('resize', checkMobile);
-  }, []);
-
-  useEffect(() => {
-    // If the user clicks in the dialog when confirmClear is true, set it to false
-    const handleClick = (e) => {
-      if (confirmClear) {
-        if (e.target.id === 'clearConvosBtn' || e.target.id === 'clearConvosTxt') {
-          return;
-        }
-
-        setConfirmClear(false);
-      }
-    };
-
-    window.addEventListener('click', handleClick);
-    return () => window.removeEventListener('click', handleClick);
-  }, [confirmClear]);
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className={cn('shadow-2xl dark:bg-gray-900 dark:text-white md:w-[680px] ')}>
-        <DialogHeader>
-          <DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
-            {localize(lang, 'com_nav_settings')}
-          </DialogTitle>
-        </DialogHeader>
-        <div className="px-6">
-          <Tabs.Root
-            defaultValue="general"
-            className="flex flex-col gap-6 md:flex-row"
-            orientation="vertical"
-          >
-            <Tabs.List
-              aria-label="Settings"
-              role="tablist"
-              aria-orientation="vertical"
-              className={cn(
-                '-ml-[8px] flex min-w-[180px] flex-shrink-0 flex-col',
-                isMobile && 'flex-row rounded-lg bg-gray-100 p-1 dark:bg-gray-800/30',
-              )}
-              style={{ outline: 'none' }}
-            >
-              <Tabs.Trigger
-                className={cn(
-                  'flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm radix-state-active:bg-gray-800 radix-state-active:text-white',
-                  isMobile &&
-                    'group flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white',
-                )}
-                value="general"
-              >
-                <CogIcon />
-                {localize(lang, 'com_nav_setting_general')}
-              </Tabs.Trigger>
-            </Tabs.List>
-            <General />
-          </Tabs.Root>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

client/src/components/Nav/Settings.tsx

@@ -0,0 +1,69 @@
+import * as Tabs from '@radix-ui/react-tabs';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui';
+import { CogIcon, DataIcon } from '~/components/svg';
+import { useMediaQuery, useLocalize } from '~/hooks';
+import type { TDialogProps } from '~/common';
+import { General, Data } from './SettingsTabs';
+import { cn } from '~/utils';
+
+export default function Settings({ open, onOpenChange }: TDialogProps) {
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
+  const localize = useLocalize();
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={cn('shadow-2xl dark:bg-gray-900 dark:text-white md:w-[680px] ')}>
+        <DialogHeader>
+          <DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
+            {localize('com_nav_settings')}
+          </DialogTitle>
+        </DialogHeader>
+        <div className="px-6">
+          <Tabs.Root
+            defaultValue="general"
+            className="flex flex-col gap-6 md:flex-row"
+            orientation="vertical"
+          >
+            <Tabs.List
+              aria-label="Settings"
+              role="tablist"
+              aria-orientation="vertical"
+              className={cn(
+                '-ml-[8px] flex min-w-[180px] flex-shrink-0 flex-col',
+                isSmallScreen ? 'flex-row rounded-lg bg-gray-100 p-1 dark:bg-gray-800/30' : '',
+              )}
+              style={{ outline: 'none' }}
+            >
+              <Tabs.Trigger
+                className={cn(
+                  'group flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm radix-state-active:bg-gray-800 radix-state-active:text-white',
+                  isSmallScreen
+                    ? 'flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
+                    : '',
+                )}
+                value="general"
+              >
+                <CogIcon className="fill-gray-800" />
+                {localize('com_nav_setting_general')}
+              </Tabs.Trigger>
+              <Tabs.Trigger
+                className={cn(
+                  'group flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm radix-state-active:bg-gray-800 radix-state-active:text-white',
+                  isSmallScreen
+                    ? 'flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
+                    : '',
+                )}
+                value="data"
+              >
+                <DataIcon />
+                {localize('com_nav_setting_data')}
+              </Tabs.Trigger>
+            </Tabs.List>
+            <General />
+            <Data />
+          </Tabs.Root>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,70 @@
+import { forwardRef } from 'react';
+import type { ForwardedRef } from 'react';
+import { CheckIcon } from 'lucide-react';
+import { DialogButton } from '~/components/ui';
+import { Spinner } from '~/components/svg';
+import type { TDangerButtonProps } from '~/common';
+import { useLocalize } from '~/hooks';
+import { cn } from '~/utils';
+
+const DangerButton = (props: TDangerButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
+  const {
+    id,
+    onClick,
+    mutation,
+    disabled,
+    confirmClear,
+    infoTextCode,
+    actionTextCode,
+    className = '',
+    showText = true,
+    dataTestIdInitial,
+    dataTestIdConfirm,
+    confirmActionTextCode = 'com_ui_confirm_action',
+  } = props;
+  const localize = useLocalize();
+
+  const renderMutation = (node: React.ReactNode | string) => {
+    if (mutation && mutation.isLoading) {
+      return <Spinner className="h-5 w-5" />;
+    }
+    return node;
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      {showText && <div>{localize(infoTextCode)}</div>}
+      <DialogButton
+        id={id}
+        ref={ref}
+        disabled={disabled}
+        onClick={onClick}
+        className={cn(
+          ' btn btn-danger relative border-none bg-red-700 text-white hover:bg-red-800 dark:hover:bg-red-800',
+          className,
+        )}
+      >
+        {confirmClear ? (
+          <div
+            className="flex w-full items-center justify-center gap-2"
+            id={`${id}-text`}
+            data-testid={dataTestIdConfirm}
+          >
+            {renderMutation(<CheckIcon className="h-5 w-5" />)}
+            {mutation && mutation.isLoading ? null : localize(confirmActionTextCode)}
+          </div>
+        ) : (
+          <div
+            className="flex w-full items-center justify-center gap-2"
+            id={`${id}-text`}
+            data-testid={dataTestIdInitial}
+          >
+            {renderMutation(localize(actionTextCode))}
+          </div>
+        )}
+      </DialogButton>
+    </div>
+  );
+};
+
+export default forwardRef(DangerButton);

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

@@ -0,0 +1,76 @@
+import * as Tabs from '@radix-ui/react-tabs';
+import { useRevokeAllUserKeysMutation, useRevokeUserKeyMutation } from 'librechat-data-provider';
+import React, { useState, useCallback, useRef } from 'react';
+import { useOnClickOutside } from '~/hooks';
+import DangerButton from './DangerButton';
+
+export const RevokeKeysButton = ({
+  showText = true,
+  endpoint = '',
+  all = false,
+  disabled = false,
+}: {
+  showText?: boolean;
+  endpoint?: string;
+  all?: boolean;
+  disabled?: boolean;
+}) => {
+  const [confirmClear, setConfirmClear] = useState(false);
+  const revokeKeyMutation = useRevokeUserKeyMutation(endpoint);
+  const revokeKeysMutation = useRevokeAllUserKeysMutation();
+
+  const contentRef = useRef(null);
+  useOnClickOutside(contentRef, () => confirmClear && setConfirmClear(false), []);
+
+  const revokeAllUserKeys = useCallback(() => {
+    if (confirmClear) {
+      revokeKeysMutation.mutate({});
+      setConfirmClear(false);
+    } else {
+      setConfirmClear(true);
+    }
+  }, [confirmClear, revokeKeysMutation]);
+
+  const revokeUserKey = useCallback(() => {
+    if (!endpoint) {
+      return;
+    } else if (confirmClear) {
+      revokeKeyMutation.mutate({});
+      setConfirmClear(false);
+    } else {
+      setConfirmClear(true);
+    }
+  }, [confirmClear, revokeKeyMutation, endpoint]);
+
+  const onClick = all ? revokeAllUserKeys : revokeUserKey;
+
+  return (
+    <DangerButton
+      ref={contentRef}
+      showText={showText}
+      onClick={onClick}
+      disabled={disabled}
+      confirmClear={confirmClear}
+      id={'revoke-all-user-keys'}
+      actionTextCode={'com_ui_revoke'}
+      infoTextCode={'com_ui_revoke_info'}
+      dataTestIdInitial={'revoke-all-keys-initial'}
+      dataTestIdConfirm={'revoke-all-keys-confirm'}
+      mutation={all ? revokeKeysMutation : revokeKeyMutation}
+    />
+  );
+};
+
+function Data() {
+  return (
+    <Tabs.Content value="data" role="tabpanel" className="w-full md:min-h-[300px]">
+      <div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-300">
+        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
+          <RevokeKeysButton all={true} />
+        </div>
+      </div>
+    </Tabs.Content>
+  );
+}
+
+export default React.memo(Data);

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

@@ -1,13 +1,11 @@
-import * as Tabs from '@radix-ui/react-tabs';
-import { CheckIcon } from 'lucide-react';
-import { DialogButton } from '~/components/ui';
-import React, { useState, useContext, useEffect, useCallback } from 'react';
-import { useClearConversationsMutation } from 'librechat-data-provider';
 import { useRecoilState } from 'recoil';
+import * as Tabs from '@radix-ui/react-tabs';
+import React, { useState, useContext, useEffect, useCallback, useRef } from 'react';
+import { useClearConversationsMutation } from 'librechat-data-provider';
+import { ThemeContext, useLocalize, useOnClickOutside } from '~/hooks';
+import type { TDangerButtonProps } from '~/common';
+import DangerButton from './DangerButton';
 import store from '~/store';
-import { ThemeContext } from '~/hooks';
-import { cn } from '~/utils';
-import { useLocalize } from '~/hooks';
 
 export const ThemeSelector = ({
   theme,
@@ -38,53 +36,26 @@ export const ClearChatsButton = ({
   confirmClear,
   className = '',
   showText = true,
+  mutation,
   onClick,
-}: {
+}: Pick<
-  confirmClear: boolean;
+  TDangerButtonProps,
-  className?: string;
+  'confirmClear' | 'mutation' | 'className' | 'showText' | 'onClick'
-  showText: boolean;
+>) => {
-  onClick: () => void;
-}) => {
-  const localize = useLocalize();
-
   return (
-    <div className="flex items-center justify-between">
+    <DangerButton
-      {showText && <div>{localize('com_nav_clear_all_chats')}</div>}
+      id="clearConvosBtn"
-      <DialogButton
+      mutation={mutation}
-        id="clearConvosBtn"
+      confirmClear={confirmClear}
-        onClick={onClick}
+      className={className}
-        className={cn(
+      showText={showText}
-          ' btn btn-danger relative border-none bg-red-700 text-white hover:bg-red-800 dark:hover:bg-red-800',
+      infoTextCode="com_nav_clear_all_chats"
-          className,
+      actionTextCode="com_ui_clear"
-        )}
+      confirmActionTextCode="com_nav_confirm_clear"
-      >
+      dataTestIdInitial="clear-convos-initial"
-        {/* <button
+      dataTestIdConfirm="clear-convos-confirm"
-        className="btn mt-2 inline-flex h-10 items-center justify-center rounded-md relative bg-red-600 text-white hover:bg-red-800"
+      onClick={onClick}
-        type="button"
+    />
-        id="clearConvosBtn"
-        onClick={onClick}
-      > */}
-        {confirmClear ? (
-          <div
-            className="flex w-full items-center justify-center gap-2"
-            id="clearConvosTxt"
-            data-testid="clear-convos-confirm"
-          >
-            <CheckIcon className="h-5 w-5" /> {localize('com_nav_confirm_clear')}
-          </div>
-        ) : (
-          <div
-            className="flex w-full items-center justify-center gap-2"
-            id="clearConvosTxt"
-            data-testid="clear-convos-initial"
-          >
-            {localize('com_ui_clear')}
-          </div>
-        )}
-
-        {/* </button> */}
-      </DialogButton>
-    </div>
   );
 };
 
@@ -127,6 +98,9 @@ function General() {
   const { newConversation } = store.useConversation();
   const { refreshConversations } = store.useConversations();
 
+  const contentRef = useRef(null);
+  useOnClickOutside(contentRef, () => confirmClear && setConfirmClear(false), []);
+
   useEffect(() => {
     if (clearConvosMutation.isSuccess) {
       newConversation();
@@ -159,7 +133,12 @@ function General() {
   );
 
   return (
-    <Tabs.Content value="general" role="tabpanel" className="w-full md:min-h-[300px]">
+    <Tabs.Content
+      value="general"
+      role="tabpanel"
+      className="w-full md:min-h-[300px]"
+      ref={contentRef}
+    >
       <div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-300">
         <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
           <ThemeSelector theme={theme} onChange={changeTheme} />
@@ -168,7 +147,12 @@ function General() {
           <LangSelector langcode={langcode} onChange={changeLang} />
         </div>
         <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
-          <ClearChatsButton confirmClear={confirmClear} onClick={clearConvos} showText={true} />
+          <ClearChatsButton
+            confirmClear={confirmClear}
+            onClick={clearConvos}
+            showText={true}
+            mutation={clearConvosMutation}
+          />
         </div>
       </div>
     </Tabs.Content>

client/src/components/Nav/SettingsTabs/index.ts

@@ -1,2 +1,4 @@
 export { default as General } from './General';
 export { ClearChatsButton } from './General';
+export { default as Data } from './Data';
+export { RevokeKeysButton } from './Data';

client/src/components/svg/CogIcon.tsx

@@ -1,13 +1,16 @@
-import * as React from 'react';
+import { cn } from '~/utils';
 
-export default function CogIcon() {
+export default function CogIcon({ className = '' }) {
   return (
     <svg
       stroke="currentColor"
       fill="currentColor"
       strokeWidth="0"
       viewBox="0 0 20 20"
-      className="group-radix-state-active:fill-white h-4 h-5 w-4 w-5 fill-white dark:fill-gray-500"
+      className={cn(
+        'h-4 h-5 w-4 w-5 fill-white group-radix-state-active:fill-white dark:fill-gray-500',
+        className,
+      )}
       height="1em"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"

client/src/components/svg/DataIcon.tsx

@@ -0,0 +1,18 @@
+export default function DataIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 20 20"
+      className="h-4 h-5 w-4 w-5 fill-gray-800 group-radix-state-active:fill-white dark:fill-gray-500"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z" />
+      <path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z" />
+      <path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z" />
+    </svg>
+  );
+}

client/src/components/svg/index.ts

@@ -2,6 +2,7 @@ export { default as Plugin } from './Plugin';
 export { default as GPTIcon } from './GPTIcon';
 export { default as EditIcon } from './EditIcon';
 export { default as CogIcon } from './CogIcon';
+export { default as DataIcon } from './DataIcon';
 export { default as Panel } from './Panel';
 export { default as Spinner } from './Spinner';
 export { default as Clipboard } from './Clipboard';

client/src/components/ui/Dropdown.jsx

@@ -3,7 +3,15 @@ import CheckMark from '../svg/CheckMark';
 import { Listbox } from '@headlessui/react';
 import { cn } from '~/utils/';
 
-function Dropdown({ value, onChange, options, className, containerClassName }) {
+function Dropdown({
+  value,
+  label = '',
+  onChange,
+  options,
+  className,
+  containerClassName,
+  optionsClassName = '',
+}) {
   const currentOption =
     options.find((element) => element === value || element?.value === value) ?? value;
   return (
@@ -18,7 +26,7 @@ function Dropdown({ value, onChange, options, className, containerClassName }) {
           >
             <span className="inline-flex w-full truncate">
               <span className="flex h-6 items-center gap-1 truncate text-sm text-black dark:text-white">
-                {currentOption?.display ?? value}
+                {`${label}${currentOption?.display ?? value}`}
               </span>
             </span>
             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -38,12 +46,17 @@ function Dropdown({ value, onChange, options, className, containerClassName }) {
               </svg>
             </span>
           </Listbox.Button>
-          <Listbox.Options className="absolute z-50 mt-2 max-h-60 w-full overflow-auto rounded bg-white text-base text-xs ring-1 ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%] ">
+          <Listbox.Options
+            className={cn(
+              'absolute z-50 mt-2 max-h-60 w-full overflow-auto rounded bg-white text-base text-xs ring-1 ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%] ',
+              optionsClassName,
+            )}
+          >
             {options.map((item, i) => (
               <Listbox.Option
                 key={i}
                 value={item?.value ?? item}
-                className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-[#ECECF1] dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
+                className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
               >
                 <span className="flex items-center gap-1.5 truncate">
                   <span

client/src/components/ui/DropdownMenu.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Check, ChevronRight, Circle } from 'lucide-react';
-
+import { cn } from '~/utils';
-import { cn } from '../../utils';
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 

client/src/components/ui/MultiSelectDropDown.tsx

@@ -147,7 +147,7 @@ function MultiSelectDropDown({
                       <Listbox.Option
                         key={i}
                         value={option[optionValueKey]}
-                        className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-[#ECECF1] dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
+                        className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
                       >
                         <span className="flex items-center gap-1.5 truncate">
                           {!option.isButton && (

client/src/components/ui/SelectDropDown.tsx

@@ -107,7 +107,7 @@ function SelectDropDown({
                     <Listbox.Option
                       key={i}
                       value={option}
-                      className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-[#ECECF1] dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
+                      className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
                     >
                       <span className="flex items-center gap-1.5 truncate">
                         <span

client/src/components/ui/Tooltip.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '~/utils';
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>
+>((props, ref) => <TooltipPrimitive.Trigger ref={ref} {...props} />);
+TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
+
+const TooltipPortal = TooltipPrimitive.Portal;
+
+const TooltipArrow = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Arrow>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>
+>((props, ref) => <TooltipPrimitive.Arrow ref={ref} {...props} />);
+TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className = '', forceMount, children, ...props }, ref) => (
+  <TooltipPortal forceMount={forceMount}>
+    <TooltipPrimitive.Content
+      className={cn(
+        'shadow-xs relative max-w-xs rounded-lg border border-black/10 bg-black p-1 transition-opacity',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      <span className="flex items-center whitespace-pre-wrap px-2 py-1 text-center text-sm font-medium normal-case text-white">
+        {children}
+        <TooltipArrow className="TooltipArrow" />
+      </span>
+    </TooltipPrimitive.Content>
+  </TooltipPortal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+export { Tooltip, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, TooltipProvider };

client/src/components/ui/index.ts

@@ -14,6 +14,7 @@ export * from './Switch';
 export * from './Tabs';
 export * from './Templates';
 export * from './Textarea';
+export * from './Tooltip';
 export { default as Dropdown } from './Dropdown';
 export { default as SelectDropDown } from './SelectDropDown';
 export { default as MultiSelectDropDown } from './MultiSelectDropDown';

client/src/hooks/index.ts

@@ -2,11 +2,14 @@ export * from './AuthContext';
 export * from './ThemeContext';
 export * from './ScreenshotContext';
 export * from './ApiErrorBoundaryContext';
+export { default as useUserKey } from './useUserKey';
 export { default as useDebounce } from './useDebounce';
 export { default as useLocalize } from './useLocalize';
 export { default as useMediaQuery } from './useMediaQuery';
 export { default as useSetOptions } from './useSetOptions';
 export { default as useGenerations } from './useGenerations';
 export { default as useScrollToRef } from './useScrollToRef';
+export { default as useLocalStorage } from './useLocalStorage';
 export { default as useServerStream } from './useServerStream';
+export { default as useOnClickOutside } from './useOnClickOutside';
 export { default as useMessageHandler } from './useMessageHandler';

client/src/hooks/useLocalStorage.tsx

@@ -0,0 +1,53 @@
+/* `useLocalStorage`
+ *
+ * Features:
+ *  - JSON Serializing
+ *  - Also value will be updated everywhere, when value updated (via `storage` event)
+ */
+
+import { useEffect, useState } from 'react';
+
+export default function useLocalStorage<T>(key: string, defaultValue: T): [T, (value: T) => void] {
+  const [value, setValue] = useState(defaultValue);
+
+  useEffect(() => {
+    const item = localStorage.getItem(key);
+
+    if (!item) {
+      localStorage.setItem(key, JSON.stringify(defaultValue));
+    }
+
+    setValue(item ? JSON.parse(item) : defaultValue);
+
+    function handler(e: StorageEvent) {
+      if (e.key !== key) {
+        return;
+      }
+
+      const lsi = localStorage.getItem(key);
+      setValue(JSON.parse(lsi ?? ''));
+    }
+
+    window.addEventListener('storage', handler);
+
+    return () => {
+      window.removeEventListener('storage', handler);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const setValueWrap = (value: T) => {
+    try {
+      setValue(value);
+
+      localStorage.setItem(key, JSON.stringify(value));
+      if (typeof window !== 'undefined') {
+        window.dispatchEvent(new StorageEvent('storage', { key }));
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  return [value, setValueWrap];
+}

client/src/hooks/useMessageHandler.ts

@@ -3,6 +3,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { parseConvo, getResponseSender } from 'librechat-data-provider';
 import type { TMessage, TSubmission } from 'librechat-data-provider';
 import type { TAskFunction } from '~/common';
+import useUserKey from './useUserKey';
 import store from '~/store';
 
 const useMessageHandler = () => {
@@ -16,7 +17,7 @@ const useMessageHandler = () => {
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
   const [messages, setMessages] = useRecoilState(store.messages);
   const { endpoint } = currentConversation;
-  const { getToken } = store.useToken(endpoint ?? '');
+  const { getExpiry } = useUserKey(endpoint ?? '');
 
   const ask: TAskFunction = (
     { text, parentMessageId = null, conversationId = null, messageId = null },
@@ -49,14 +50,13 @@ const useMessageHandler = () => {
     }
 
     const isEditOrContinue = isEdited || isContinued;
-    const { userProvide } = endpointsConfig[endpoint] ?? {};
 
     // set the endpoint option
     const convo = parseConvo(endpoint, currentConversation);
     const endpointOption = {
       endpoint,
       ...convo,
-      token: userProvide ? getToken() : null,
+      key: getExpiry(),
     };
     const responseSender = getResponseSender(endpointOption);
 

client/src/hooks/useServerStream.ts

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useResetRecoilState, useSetRecoilState } from 'recoil';
+/* @ts-ignore */
 import { SSE, createPayload, tMessageSchema, tConversationSchema } from 'librechat-data-provider';
 import type { TResPlugin, TMessage, TConversation, TSubmission } from 'librechat-data-provider';
 import { useAuthContext } from '~/hooks/AuthContext';

client/src/hooks/useUserKey.ts

@@ -0,0 +1,58 @@
+import { useRecoilValue } from 'recoil';
+import { useMemo, useCallback } from 'react';
+import { useUpdateUserKeysMutation, useUserKeyQuery } from 'librechat-data-provider';
+import store from '~/store';
+
+const useUserKey = (endpoint: string) => {
+  const endpointsConfig = useRecoilValue(store.endpointsConfig);
+  const config = endpointsConfig[endpoint];
+
+  const { azure } = config ?? {};
+  let keyEndpoint = endpoint;
+
+  if (azure) {
+    keyEndpoint = 'azureOpenAI';
+  } else if (keyEndpoint === 'gptPlugins') {
+    keyEndpoint = 'openAI';
+  }
+
+  const updateKey = useUpdateUserKeysMutation();
+  const checkUserKey = useUserKeyQuery(keyEndpoint);
+  const getExpiry = useCallback(() => {
+    if (checkUserKey.data) {
+      return checkUserKey.data.expiresAt;
+    }
+  }, [checkUserKey.data]);
+
+  const checkExpiry = useCallback(() => {
+    const expiresAt = getExpiry();
+    if (!expiresAt) {
+      return false;
+    }
+
+    const expiresAtDate = new Date(expiresAt);
+    if (expiresAtDate < new Date()) {
+      return false;
+    }
+    return true;
+  }, [getExpiry]);
+
+  const saveUserKey = useCallback(
+    (value: string, expiresAt: number) => {
+      const dateStr = new Date(expiresAt).toISOString();
+      updateKey.mutate({
+        name: keyEndpoint,
+        value,
+        expiresAt: dateStr,
+      });
+    },
+    [updateKey, keyEndpoint],
+  );
+
+  return useMemo(
+    () => ({ getExpiry, checkExpiry, saveUserKey }),
+    [getExpiry, checkExpiry, saveUserKey],
+  );
+};
+
+export default useUserKey;

client/src/localization/languages/Br.tsx

@@ -84,6 +84,7 @@ export default {
   com_auth_to_try_again: 'para tentar novamente.',
   com_auth_submit_registration: 'Enviar registro',
   com_auth_welcome_back: 'Bem-vindo(a) de volta',
+  com_endpoint_open_menu: 'Abrir Menu',
   com_endpoint_bing_enable_sydney: 'Habilitar Sydney',
   com_endpoint_bing_to_enable_sydney: 'Para habilitar Sydney',
   com_endpoint_bing_jailbreak: 'Jailbreak',