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/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';