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

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
-        open={setTokenDialogOpen}
-        onOpenChange={setSetTokenDialogOpen}
-        endpoint={endpoint}
-      />
+      {userProvidesKey && (
+        <SetKeyDialog open={isDialogOpen} onOpenChange={setDialogOpen} 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) {
-      const lastSelectedModel = JSON.parse(localStorage.getItem('lastSelectedModel')) || {};
-      localStorage.setItem(
-        'lastSelectedModel',
-        JSON.stringify({ ...lastSelectedModel, [endpoint]: conversation.model }),
-      );
-      localStorage.setItem('lastConversationSetup', JSON.stringify(conversation));
-    }
-
-    if (endpoint === 'bingAI') {
-      const lastBingSettings = JSON.parse(localStorage.getItem('lastBingSettings')) || {};
+    if (endpoint && endpoint !== 'bingAI') {
+      setLastModel({ ...lastModel, [endpoint]: conversation?.model }), setLastConvo(conversation);
+    } else if (endpoint === 'bingAI') {
       const { jailbreak, toneStyle } = conversation;
-      localStorage.setItem(
-        'lastBingSettings',
-        JSON.stringify({ ...lastBingSettings, jailbreak, toneStyle }),
-      );
+      setLastBingSettings({ ...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]">
-      <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
-        <DropdownMenuTrigger asChild>
-          <Button
-            id="new-conversation-menu"
-            data-testid="new-conversation-menu"
-            variant="outline"
-            className={
-              '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'
-            }
-          >
-            {icon}
-            <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"
+    <TooltipProvider delayDuration={300}>
+      <Tooltip>
+        <Dialog className="z-[100]">
+          <DropdownMenu open={menuOpen} onOpenChange={onOpenChange}>
+            <TooltipTrigger asChild>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  id="new-conversation-menu"
+                  data-testid="new-conversation-menu"
+                  variant="outline"
+                  className={
+                    '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'
+                  }
                 >
-                  {/* <Button
-                  type="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"
-                > */}
-                  <Trash2 className="mr-1 flex w-[22px] items-center stroke-1" />
-                  {localize('com_ui_clear')} {localize('com_ui_all')}
-                  {/* </Button> */}
-                </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>
+                  {icon}
+                </Button>
+              </DropdownMenuTrigger>
+            </TooltipTrigger>
+            <TooltipContent forceMount={newUser} sideOffset={5}>
+              {localize('com_endpoint_open_menu')}
+            </TooltipContent>
+            <DropdownMenuContent
+              className="z-[100] w-[375px] dark:bg-gray-900 md:w-96"
+              onCloseAutoFocus={(event) => event.preventDefault()}
+              side="top"
+            >
+              <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"
+                    >
+                      <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 ">
-        {!status
-          ? text || localize('com_endpoint_import')
-          : status === localize('com_ui_succes')
-            ? successText
-            : invalidText}
-      </span>
+      <span className="flex text-xs ">{statusText}</span>
       <input
         id={`file-upload-${id}`}
         value=""