refactor: Settings/Presets UI Restructure, convert many files to TS (#740)

* progress on settings refactor

* fix(helpers.js): replace fs.rmdirSync with fs.rm to delete node_modules directory recursively
fix(packages.js): delete package-lock.json if it exists before running the script

* feat(CrossIcon.tsx): add CrossIcon component

* wip: refactor Options for modularity into higher order components, OptionsBar > ModelSelect/Settings

* refactor: import more from utils/index, including cardStyle used by model select/settings

* refactor(AnthropicOptions): refactor to new format, OpenAI: reduce format to name of endpoint

* refactor(AnthropicSettings): refactor to new format, match defaults to API docs

* fix: google and anthropic defaults

* refactor(conversation/submission atoms): add typing, remove unused code

* chore(types.ts): add missing type definitions for TMessages, TMessagesAtom, TConversationAtom, and ModelSelectProps
feat(types.ts): make endpoint property nullable in TSubmission, TEndpointOption, TConversation, and TPreset types

* refactor(ChatGPT): refactor to new format, add omit settings logic

* refactor(EndpointSettings/BingAI): new dir structure and format BingAI options/settings to new

* fix: update useUpdateTokenCountMutation to accept an object with a 'text' property instead of a string

* fix(endpoints): ensure expected behaviors for preset dialogs

* chore(index.ts): add defaultTextProps to utils/index.ts for use in settings components

* chore(index.ts): add optionText to utils/index.ts for use in settings components

* wip: refactor google settings

* wip: progress with Google refactor, needs AdditionalButtons handling and global state setters

* refactor(OptionsBar.tsx): The setOption function has been refactored to use the useSetOptions custom hook for setting conversation options.

* chore(Anthropic.tsx, BingAI.tsx, Google.tsx, OpenAI.tsx): adjust height of container div in Settings component; chore(Examples.tsx): adjust height in Examples component

* refactor(Google): complete google refactor
feat(client): add new component PopoverButtons for displaying popover buttons in EndpointPopover
feat(data-provider): add types for PopoverButton and EndpointOptionsPopoverProps

* fix(OptionsBar.tsx): add useEffect hook to handle opacity class based on messagesTree and advancedMode
fix(style.css): rename class from 'openAIOptions-simple-container' to 'options-bar' and update references

* refactor(Plugins/OptionsBar): complete refactor of Plugins Select options, consolidate logic from TextChat to OptionsBar

* fix(Plugins.tsx): filter lastSelectedTools to remove any tools that are not in the current tools list
fix(useSetOptions.ts): remove unnecessary empty line

* feat(useSetOptions.ts): add setAgentOption function to update agentOptions in conversation state
feat(types.ts): add setAgentOption function to UseSetOptions type

* refactor(Settings/Plugins): refactor to new format, refactor(OptionHover): use same component for all endpoints

* refactor(OptionHover.tsx): refactor types object to use nested objects for openAI and gptPlugins
feat(OptionHover.tsx): add openAI object with specific properties for openAI configuration

* refactor(AgentSettings): new format, feat(types.ts): add TAgentOptions type for defining agent options in a conversation

* feat(PopoverButtons.tsx): add support for GPT plugin settings button
feat(Plugins.tsx): create PluginsView component for displaying plugin settings
feat(optionSettings.ts): add showAgentSettings atom for controlling agent settings visibility

* feat(client): add support for PluginsSettings in Input/Settings component
fix(client): change import path for PluginsSettings in Input/Settings component

* refactor(Settings/Plugins): complete refactor, store: refactor to TS, refactor: import defaultTextPropsLabel from utils

* feat(EndpointSettings, AgentSettings, Anthropic, Google, types.ts): Add support for Recoil state management and useRecoilValue hook; Pass models from endpointsConfig to various components; Add TModels type and update ModelSelectProps type.
fix(AgentSettings, Anthropic, Google, GoogleView, Plugins, OpenAI, Settings.tsx): Change import statements for ModelSelectProps from librechat-data-provider; Add models as a parameter to various components; Add models prop to PluginsView, Settings, and other components.

* refactor(EditPresetDialog.jsx): update import statements for Examples and AgentSettings components
feat(Settings/index.ts): add export statements for Examples and AgentSettings components

* chore(package.json): update eslint-plugin-import to version 2.28.0

* fix(eslint): dependency cycle rule is now working

* fix: dependency cycle errors and type errors

* refactor(EditPresetDialog.jsx): update import path for DialogTemplate component
refactor(NewConversationMenu/index.jsx): update import path for DialogTemplate component
refactor(ExportModel.jsx): update import path for DialogTemplate component

* refactor: rename NewConversationMenu to EndpointMenu

* style: mobile and desktop optimizations

* chore: eslint changes

* chore(eslintrc.js): update eslint configuration to use 'prettier' plugin
chore(postcss.config.cjs): update postcss configuration to use single quotes for require statements
fix(helpers.js): fix fs.rmSync function call to delete node_modules directory recursively
feat(update.js): add support for skipping git commands with '-g' flag

* chore(ModelSelect.tsx): add support for azureOpenAI option component
chore(Settings.tsx): add support for azureOpenAI option component
chore(package.json): add rebuild:package-lock and update:branch scripts

* fix(OptionHover.tsx): fix accessing nested properties in types object
feat(OptionHover.tsx): add check for existence of text before rendering HoverCardContent

* chore(style.css): update transition duration for options-bar from 0.3s to 0.25s

* fix(ScrollToBottom.jsx): fix z-index value for scroll button

* style: improve dialogs

* fix(Nav.jsx): adjust width and max-width of nav component

* chore(Nav.jsx): update max-width class for nav component in different screen sizes
chore(Dialog.tsx): update class for DialogFooter component to use flex-row layout

* fix(client): fix node_module resolution with path mapping

* fix(AdjustToneButton.jsx): add z-index to adjust tone button for proper layering
fix(TextChat.jsx): change onClick function to use arrow function to avoid immediate execution
fix(mobile.css): update z-index for nav and nav-mask for proper layering
chore(package.json): rename update:branch script to reinstall for clarity and consistency

* fix(OptionsBar/Settings): add null checks for conversation in BingAI.tsx, ChatGPT.tsx, Plugins.tsx, Settings.tsx

* style(TextChat/OptionsBar): match official site styles, setup regen/continue/stop buttons div

* chore: Import and apply removeFocusOutlines utility across various components, and rename removeButtonOutline to removeFocusOutlines
chore(Settings): Remove unused import and conditionally return null if conversation is falsy

* feat(hooks): add useLocalize hook

The useLocalize hook is added to the hooks/index.ts file. This hook allows for localization of phrases using the localize function from the ~/localization/Translation module. The hook uses the lang value from the store to determine the current language and returns a function that takes a phraseKey and optional values array as arguments and returns the localized phrase.

* refactor(OptionHover.tsx): Update text keys for OptionHover component, use new hook: useLocalize

* refactor(useDocumentTitle.ts): refactor to TS

* fix(typescript): type issues and update typescript linting deps

* refactor: Update ThemeContext and useOnClickOutside to TypeScript
chore(useDidMountEffect.js): Remove useDidMountEffect hook

* feat: GenerationButtons for stop/continue/regen, remove AdjustToneButton in favor of alternate advanced mode/Settings in OptionsBar

* fix(EndpointOptionsPopover.tsx): change switchToSimpleMode function name to closePopover
fix(GenerationButtons.tsx): change advancedMode prop name to showPopover
fix(OptionsBar.tsx): change advancedMode state name to showPopover
feat(OptionsBar.tsx): add logic to show/hide popover based on showPopover state
fix(types.ts): change switchToSimpleMode function name to closePopover

* chore: remove template button

* chore(GenerationButtons.tsx): adjust positioning of the div element
chore(Plugins.tsx): adjust width of the MultiSelectDropDown component
chore(OptionsBar.tsx): adjust padding of the button element

* refactor(EditPresetDialog): use new modular higher order components

* chore(newoptionsbar.html): delete unused file newoptionsbar.html

* refactor(EditPresetDialog): convert to TS

* chore(babel.config.cjs): update babel configuration, linting

* chore(EditPresetDialog.tsx): update className for DialogTemplate to include pb-0
chore(EndpointOptionsDialog.jsx): update className for DialogTemplate to include pb-0
chore(PopoverButtons.tsx): add buttonClass prop to PopoverButtons component
chore(DialogTemplate.tsx): update className for the footer div to include h-auto
chore(Dropdown.jsx): remove id prop from Dropdown component
chore(mobile.css): update transition duration for .nav class from 0.2s to 0.15s

* refactor(EditPresetDialog.tsx): simplify localization usage with hook

* chore(EditPresetDialog.tsx): update containerClassName to include z-index value

* fix(endpoints.ts): change type of endpointsConfig atom to TEndpointsConfig
refactor(cleanupPreset.ts): convert to TS
fix(index.ts): export cleanupPreset utility function
fix(types.ts): add missing properties to TPreset type

* refactor(EndpointOptionsDialog): convert to TS

* fix(EditPresetDialog.tsx):
  - import cleanupPreset from index
  - add null check before submitting preset
  - add null check before exporting preset

refactor(SaveAsPresetDialog.tsx): convert to TS

fix(usePresetOptions.ts): import cleanupPreset from index

fix(types.ts):
  - make title prop optional in EditPresetProps
  - change preset prop in CleanupPreset to be partial

* chore: reorganize imports in App, EndpointMenu, Messages, and ExportModel components
feat(ScreenshotContext.jsx): add ScreenshotContext to hooks/index
chore(index.ts): export ThemeContext, ScreenshotContext, ApiErrorBoundaryContext hooks, cleanupPreset, and getIcon functions from utils

* wip: add headerClassName for dialog template

* chore(EndpointOptionsDialog.tsx): remove unused headerClassName prop
chore(EndpointOptionsDialog.tsx): adjust height of main container in mobile and desktop view

* fix(react-query-service.ts): change return type of useGetEndpointsQuery to QueryObserverResult<t.TEndpointsConfig>

* refactor: imports from index and refactor to TS

* refactor: refactor all svg components to TS

* refactor: refactor all UI components to TS, remove unused component

* fix(SelectDropDown.tsx): remove file extension from import statement for CheckMark component

* fix: SaveAsPresetDialog typing issue

* fix(OptionsBar): close popover when an endpoint with no settings is selected

* chore(ChatGPT.tsx): update width of model select dropdown to 60px
refactor(types.ts): decouple ModelSelectProps from SettingsProps

* fix(popover Settings): space taken from the options menu for each endpoint

* fix:'Set token first' element alignment, add padding to endpointmenu icon in mobile

* style: match official site header

* refactor(EndpointOptionsDialog): make functionality explicitly saving current convos as presets

* fix(useLocalize.ts): change values parameter from an array to rest parameters

* refactor(EndpointSettings): Utilize useLocalize hook for all endpoint settings

* fix(Popover): correct spacing/center and remove focus outlines for close button

* chore: employ use of cn (clsx) in Popover styles

* chore(EditPresetDialog.tsx): update className to add padding bottom
chore(EndpointOptionsDialog.tsx): update className to add padding bottom

* style(EndpointMenu, TextChat): add better styling at diff. breakpoints

* refactor(EndpointSettings): consolidate container style to higher order component

* refactor(EditPresetDialog.tsx): pass custom style to Settings from here

* style: setting dialogs improved in all views

* style(EndpointMenu): improve UX for mobile

* style(PresetDialog): increase height so scrollbar isn't triggered

* chore(EditPresetDialog.tsx): update className to include xl height for DialogTemplate
chore(InputNumber.tsx): update className to include max height for InputNumber component

* fix: light mode styling

* fix(OptionsBar/ScrollToBottom/Popover): quick fix to rework in future: hide scrollToBottom when Popover is open

* style: remove bg-gradient around textarea in mobile view

* chore(ThemeContext.tsx): refactor ThemeContext to use default context value, also fixes type issue

* chore(EditPresetDialog.tsx): adjust grid layout in EditPresetDialog component

* style(TextChat): make gradient more opaque/smoother

* fix(TextChat.jsx): fix background gradient color based on theme and system preference

* test(layout-test-utils.tsx): add mock implementation for window.matchMedia in test setup
feat(layout-test-utils.tsx): add authConfig prop to AuthContextProvider in renderWithProvidersWrapper function
chore(tsconfig.json): include test directory in tsconfig include section

* chore(jest.config.cjs): update test file paths in jest configuration
chore(Login.spec.tsx): update test file path in import statement
chore(LoginForm.spec.tsx): update test file path in import statement
chore(Registration.spec.tsx): update test file path in import statement
chore(PluginAuthForm.spec.tsx): update test file path in import statement
chore(PluginStoreDialog.spec.tsx): update test file path in import statement
chore(layout-test-utils.tsx): move matchMedia mock to separate file
chore(tsconfig.json): add path mapping for test files in client directory

* test: add import for 'test/matchMedia.mock' in test files

The changes in this commit add an import statement for 'test/matchMedia.mock' in multiple test files. This import is necessary for mocking the behavior of the matchMedia function during testing.

* style(ClearConvosDialog): remove borders from button and modal, uniform button size

* fix(AgentSettings.tsx): overlapping issue

* fix(PresetDialogs): improve spacing of top row and dialog content

* style(Settings): 2nd column will now dynamically adjust better across all screen sizes

* style(ModelSelect): improve styling for mobile/desktop, add hover shadow
feat(ModelSelect/Plugins): hide ModelSelect when screen is small

* refactor(RowButton, buildTree): convert to TS

* style(ModelSelect): add transition effect to shadows on hover

packages/data-provider/src/react-query-service.ts

@@ -165,7 +165,7 @@ export const useGetSearchEnabledQuery = (
   });
 };
 
-export const useGetEndpointsQuery = (): QueryObserverResult<t.TEndpoints> => {
+export const useGetEndpointsQuery = (): QueryObserverResult<t.TEndpointsConfig> => {
   return useQuery([QueryKeys.endpoints], () => dataService.getAIEndpoints(), {
     refetchOnWindowFocus: false,
     refetchOnReconnect: false,
@@ -246,11 +246,11 @@ export const useSearchQuery = (
 export const useUpdateTokenCountMutation = (): UseMutationResult<
   t.TUpdateTokenCountResponse,
   unknown,
-  string,
+  { text: string },
   unknown
 > => {
   const queryClient = useQueryClient();
-  return useMutation((text: string) => dataService.updateTokenCount(text), {
+  return useMutation(({ text }: { text: string }) => dataService.updateTokenCount(text), {
     onSuccess: () => {
       queryClient.invalidateQueries([QueryKeys.tokenCount]);
     },

packages/data-provider/src/types.ts

@@ -11,9 +11,17 @@ export type TMessage = {
   updatedAt: string;
 };
 
+export type TMessages = TMessage[];
+
+export type TMessagesAtom = TMessages | null;
+
 export type TExample = {
-  input: string;
-  output: string;
+  input: {
+    content: string;
+  };
+  output: {
+    content: string;
+  };
 };
 
 export enum EModelEndpoint {
@@ -33,7 +41,7 @@ export type TSubmission = {
   conversationId?: string;
   conversationSignature?: string;
   current: boolean;
-  endpoint: EModelEndpoint;
+  endpoint: EModelEndpoint | null;
   invocationId: number;
   isCreatedByUser: boolean;
   jailbreak: boolean;
@@ -57,7 +65,7 @@ export type TSubmission = {
 };
 
 export type TEndpointOption = {
-  endpoint: EModelEndpoint;
+  endpoint: EModelEndpoint | null;
   model?: string;
   promptPrefix?: string;
   temperature?: number;
@@ -76,6 +84,17 @@ export type TPlugin = {
   icon: string;
   authConfig: TPluginAuthConfig[];
   authenticated: boolean;
+  isButton?: boolean;
+};
+
+export type TPluginAction = {
+  pluginKey: string;
+  action: 'install' | 'uninstall';
+  auth?: unknown;
+};
+
+export type TTemplate = {
+  [key: string]: TPlugin;
 };
 
 export type TUpdateUserPlugins = {
@@ -84,17 +103,25 @@ export type TUpdateUserPlugins = {
   auth?: unknown;
 };
 
+export type TAgentOptions = {
+  agent: string;
+  skipCompletion: boolean;
+  model: string;
+  temperature: number;
+};
+
 export type TConversation = {
-  conversationId: string;
+  conversationId: string | null;
   title: string;
   user?: string;
-  endpoint: EModelEndpoint;
+  endpoint: EModelEndpoint | null;
   suggestions?: string[];
   messages?: TMessage[];
   tools?: TPlugin[];
   createdAt: string;
   updatedAt: string;
   // google only
+  systemMessage?: string;
   modelLabel?: string;
   examples?: TExample[];
   // for azureOpenAI, openAI only
@@ -108,6 +135,7 @@ export type TConversation = {
   // bing and google
   context?: string;
   top_p?: number;
+  frequency_penalty?: number;
   presence_penalty?: number;
   // for bingAI only
   jailbreak?: boolean;
@@ -117,21 +145,33 @@ export type TConversation = {
   clientId?: string;
   invocationId?: string;
   toneStyle?: string;
+  maxOutputTokens?: number;
+  // plugins only
+  agentOptions?: TAgentOptions;
 };
 
 export type TPreset = {
   title: string;
-  endpoint: EModelEndpoint;
+  conversationId?: string;
+  endpoint: EModelEndpoint | null;
   conversationSignature?: string;
   createdAt?: string;
   updatedAt?: string;
   presetId?: string;
+  tools?: TPlugin[];
   user?: string;
+  modelLabel?: string;
+  maxOutputTokens?: number;
+  topP?: number;
+  topK?: number;
+  context?: string;
+  systemMessage?: string;
   // for azureOpenAI, openAI only
   chatGptLabel?: string;
   frequence_penalty?: number;
   model?: string;
   presence_penalty?: number;
+  frequency_penalty?: number;
   promptPrefix?: string;
   temperature?: number;
   top_p?: number;
@@ -142,6 +182,15 @@ export type TPreset = {
   jailbreakPresetId?: string;
   presetSignature?: string;
   toneStyle?: string;
+  // plugins only
+  agentOptions?: TAgentOptions;
+  // google only
+  examples?: TExample[];
+};
+
+export type TOptionSettings = {
+  showExamples?: boolean;
+  isCodeChat?: boolean;
 };
 
 export type TUser = {
@@ -196,15 +245,30 @@ export type TSearchResults = {
   filter: object;
 };
 
-export type TEndpoints = {
-  azureOpenAI: boolean;
-  bingAI: boolean;
-  ChatGptBrowser: {
+export type TEndpointsConfig = {
+  azureOpenAI: {
     availableModels: [];
-  };
-  OpenAI: {
+  } | null;
+  bingAI: {
     availableModels: [];
-  };
+  } | null;
+  chatGPTBrowser: {
+    availableModels: [];
+  } | null;
+  anthropic: {
+    availableModels: [];
+  } | null;
+  google: {
+    availableModels: [];
+  } | null;
+  openAI: {
+    availableModels: [];
+  } | null;
+  gptPlugins: {
+    availableModels: [];
+    availableTools?: [];
+    plugins?: [];
+  } | null;
 };
 
 export type TUpdateTokenCountResponse = {
@@ -275,3 +339,129 @@ export type File = {
   date: number;
   size: number;
 };
+
+export type SetOption = (param: number | string) => (newValue: number | string | boolean) => void;
+export type SetExample = (
+  i: number,
+  type: string,
+  newValue: number | string | boolean | null,
+) => void;
+
+export enum Side {
+  Top = 'top',
+  Right = 'right',
+  Bottom = 'bottom',
+  Left = 'left',
+}
+
+export type OptionHoverProps = {
+  endpoint: string;
+  type: string;
+  side: Side;
+};
+
+export type BaseProps = {
+  conversation: TConversation | TPreset | null;
+  className?: string;
+  isPreset?: boolean;
+  readonly?: boolean;
+};
+
+export type SettingsProps = BaseProps & {
+  setOption: SetOption;
+};
+
+export type TModels = {
+  models: string[];
+};
+
+export type ModelSelectProps = SettingsProps & TModels;
+
+export type ExamplesProps = {
+  readonly?: boolean;
+  className?: string;
+  examples: TExample[];
+  setExample: SetExample;
+  addExample: () => void;
+  removeExample: () => void;
+};
+
+export type GoogleProps = {
+  showExamples: boolean;
+  isCodeChat: boolean;
+};
+
+export type GoogleViewProps = SettingsProps & GoogleProps;
+export type OptionComponent = React.FC<ModelSelectProps>;
+export type MultiViewComponent = React.FC<BaseProps & TModels>;
+
+export type SelectProps = {
+  conversation: TConversation | null;
+  setOption: SetOption;
+  extraProps?: GoogleProps;
+};
+
+export type SetOptionsPayload = {
+  setOption: SetOption;
+  setExample: SetExample;
+  addExample: () => void;
+  removeExample: () => void;
+  setAgentOption: SetOption;
+  getConversation: () => TConversation | TPreset | null;
+  checkPluginSelection: (value: string) => boolean;
+  setTools: (newValue: string) => void;
+};
+
+export type UseSetOptions = (preset?: TPreset | boolean | null) => SetOptionsPayload;
+export type UsePresetOptions = (preset?: TPreset | boolean | null) => SetOptionsPayload | boolean;
+
+export type PopoverButton = {
+  label: string;
+  buttonClass: string;
+  handler: () => void;
+  icon: React.ReactNode;
+};
+
+export type EndpointOptionsPopoverProps = {
+  children: React.ReactNode;
+  visible: boolean;
+  endpoint: EModelEndpoint;
+  saveAsPreset: () => void;
+  closePopover: () => void;
+};
+
+export type EditPresetProps = {
+  open: boolean;
+  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
+  preset: TPreset;
+  title?: string;
+};
+
+export type MultiSelectDropDownProps = {
+  title?: string;
+  value: Array<{ icon?: string; name?: string; isButton?: boolean }>;
+  disabled?: boolean;
+  setSelected: (option: string) => void;
+  availableValues: TPlugin[];
+  showAbove?: boolean;
+  showLabel?: boolean;
+  containerClassName?: string;
+  isSelected: (value: string) => boolean;
+  className?: string;
+  optionValueKey?: string;
+};
+
+export type TError = {
+  message: string;
+  code?: number;
+  response?: {
+    data?: {
+      message?: string;
+    };
+  };
+};
+
+export type CleanupPreset = {
+  preset: Partial<TPreset>;
+  endpointsConfig?: TEndpointsConfig | Record<string, unknown>;
+};