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/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,
-}: {
-  confirmClear: boolean;
-  className?: string;
-  showText: boolean;
-  onClick: () => void;
-}) => {
-  const localize = useLocalize();
-
+}: Pick<
+  TDangerButtonProps,
+  'confirmClear' | 'mutation' | 'className' | 'showText' | 'onClick'
+>) => {
   return (
-    <div className="flex items-center justify-between">
-      {showText && <div>{localize('com_nav_clear_all_chats')}</div>}
-      <DialogButton
-        id="clearConvosBtn"
-        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,
-        )}
-      >
-        {/* <button
-        className="btn mt-2 inline-flex h-10 items-center justify-center rounded-md relative bg-red-600 text-white hover:bg-red-800"
-        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>
+    <DangerButton
+      id="clearConvosBtn"
+      mutation={mutation}
+      confirmClear={confirmClear}
+      className={className}
+      showText={showText}
+      infoTextCode="com_nav_clear_all_chats"
+      actionTextCode="com_ui_clear"
+      confirmActionTextCode="com_nav_confirm_clear"
+      dataTestIdInitial="clear-convos-initial"
+      dataTestIdConfirm="clear-convos-confirm"
+      onClick={onClick}
+    />
   );
 };
 
@@ -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';