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

client/src/store/conversation.ts

@@ -1,4 +1,3 @@
-import endpoints from './endpoints';
 import { useCallback } from 'react';
 import {
   atom,
@@ -8,11 +7,12 @@ import {
   useResetRecoilState,
   useRecoilCallback,
 } from 'recoil';
-import buildTree from '~/utils/buildTree';
-import getDefaultConversation from '~/utils/getDefaultConversation';
-import submission from './submission.js';
+import { TConversation, TMessagesAtom, TSubmission, TPreset } from 'librechat-data-provider';
+import { buildTree, getDefaultConversation } from '~/utils';
+import submission from './submission';
+import endpoints from './endpoints';
 
-const conversation = atom({
+const conversation = atom<TConversation | null>({
   key: 'conversation',
   default: null,
 });
@@ -20,7 +20,7 @@ const conversation = atom({
 // current messages of the conversation, must be an array
 // sample structure
 // [{text, sender, messageId, parentMessageId, isCreatedByUser}]
-const messages = atom({
+const messages = atom<TMessagesAtom>({
   key: 'messages',
   default: [],
 });
@@ -44,24 +44,23 @@ const messagesSiblingIdxFamily = atomFamily({
 
 const useConversation = () => {
   const setConversation = useSetRecoilState(conversation);
-  const setMessages = useSetRecoilState(messages);
-  const setSubmission = useSetRecoilState(submission.submission);
+  const setMessages = useSetRecoilState<TMessagesAtom>(messages);
+  const setSubmission = useSetRecoilState<TSubmission | object | null>(submission.submission);
   const resetLatestMessage = useResetRecoilState(latestMessage);
 
   const _switchToConversation = (
-    conversation,
-    messages = null,
-    preset = null,
-    { endpointsConfig = {}, prevConversation = {} },
+    conversation: TConversation,
+    messages: TMessagesAtom = null,
+    preset: object | null = null,
+    { endpointsConfig = {} },
   ) => {
-    let { endpoint = null } = conversation;
+    const { endpoint = null } = conversation;
 
     if (endpoint === null) {
       // get the default model
       conversation = getDefaultConversation({
         conversation,
         endpointsConfig,
-        prevConversation,
         preset,
       });
     }
@@ -74,24 +73,29 @@ const useConversation = () => {
 
   const switchToConversation = useRecoilCallback(
     ({ snapshot }) =>
-      async (_conversation, messages = null, preset = null) => {
-        const prevConversation = await snapshot.getPromise(conversation);
+      async (
+        _conversation: TConversation,
+        messages: TMessagesAtom = null,
+        preset: object | null = null,
+      ) => {
         const endpointsConfig = await snapshot.getPromise(endpoints.endpointsConfig);
         _switchToConversation(_conversation, messages, preset, {
           endpointsConfig,
-          prevConversation,
         });
       },
     [],
   );
 
   const newConversation = useCallback(
-    (template = {}, preset) => {
+    (template = {}, preset?: TPreset) => {
       switchToConversation(
         {
           conversationId: 'new',
           title: 'New Chat',
           ...template,
+          endpoint: null,
+          createdAt: '',
+          updatedAt: '',
         },
         [],
         preset,
@@ -105,6 +109,9 @@ const useConversation = () => {
       {
         conversationId: 'search',
         title: 'Search',
+        endpoint: null,
+        createdAt: '',
+        updatedAt: '',
       },
       [],
     );
@@ -119,8 +126,8 @@ const useConversation = () => {
 };
 
 export default {
-  conversation,
   messages,
+  conversation,
   messagesTree,
   latestMessage,
   messagesSiblingIdxFamily,

client/src/store/endpoints.ts

@@ -1,6 +1,7 @@
 import { atom, selector } from 'recoil';
+import { TEndpointsConfig } from 'librechat-data-provider';
 
-const endpointsConfig = atom({
+const endpointsConfig = atom<TEndpointsConfig>({
   key: 'endpointsConfig',
   default: {
     azureOpenAI: null,
@@ -26,7 +27,7 @@ const endpointsFilter = selector({
   get: ({ get }) => {
     const config = get(endpointsConfig) || {};
 
-    let filter = {};
+    const filter = {};
     for (const key of Object.keys(config)) {
       filter[key] = !!config[key];
     }

client/src/store/index.ts

@@ -8,6 +8,7 @@ import search from './search';
 import preset from './preset';
 import token from './token';
 import lang from './language';
+import optionSettings from './optionSettings';
 
 export default {
   ...conversation,
@@ -20,4 +21,5 @@ export default {
   ...preset,
   ...token,
   ...lang,
+  ...optionSettings,
 };

client/src/store/optionSettings.ts

@@ -0,0 +1,35 @@
+import { atom } from 'recoil';
+import { TOptionSettings } from 'librechat-data-provider';
+
+const optionSettings = atom<TOptionSettings>({
+  key: 'optionSettings',
+  default: {},
+});
+
+const showPluginStoreDialog = atom<boolean>({
+  key: 'showPluginStoreDialog',
+  default: false,
+});
+
+const showAgentSettings = atom<boolean>({
+  key: 'showAgentSettings',
+  default: false,
+});
+
+const showBingToneSetting = atom<boolean>({
+  key: 'showBingToneSetting',
+  default: false,
+});
+
+const showPopover = atom<boolean>({
+  key: 'showPopover',
+  default: false,
+});
+
+export default {
+  optionSettings,
+  showPluginStoreDialog,
+  showAgentSettings,
+  showBingToneSetting,
+  showPopover,
+};

client/src/store/preset.ts

@@ -1,4 +1,5 @@
 import { atom } from 'recoil';
+import { TPreset } from 'librechat-data-provider';
 
 // preset structure is as same defination as conversation
 
@@ -10,6 +11,12 @@ const presets = atom({
   default: [],
 });
 
+const preset = atom<TPreset | null>({
+  key: 'preset',
+  default: null,
+});
+
 export default {
+  preset,
   presets,
 };

client/src/store/search.ts

@@ -1,5 +1,5 @@
 import { atom, selector } from 'recoil';
-import buildTree from '~/utils/buildTree';
+import { buildTree } from '~/utils';
 
 const isSearchEnabled = atom({
   key: 'isSearchEnabled',

client/src/store/submission.ts

@@ -1,4 +1,5 @@
 import { atom } from 'recoil';
+import { TSubmission } from 'librechat-data-provider';
 
 // current submission
 // submit any new value to this state will cause new message to be send.
@@ -11,7 +12,7 @@ import { atom } from 'recoil';
 //   isRegenerate=false, // isRegenerate?
 // }
 
-const submission = atom({
+const submission = atom<TSubmission | object | null>({
   key: 'submission',
   default: null,
 });

client/src/store/text.ts

@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 
-const text = atom({
+const text = atom<string>({
   key: 'text',
   default: '',
 });

client/src/store/token.ts

@@ -1,15 +1,14 @@
-import { atom, useRecoilState } from 'recoil';
+import { atom, useSetRecoilState } from 'recoil';
 
-const tokenRefreshHints = atom({
+const tokenRefreshHints = atom<number>({
   key: 'tokenRefreshHints',
   default: 1,
 });
 
-const useToken = (endpoint) => {
-  // eslint-disable-next-line no-unused-vars
-  const [hints, setHints] = useRecoilState(tokenRefreshHints);
+const useToken = (endpoint: string) => {
+  const setHints = useSetRecoilState(tokenRefreshHints);
   const getToken = () => localStorage.getItem(`${endpoint}_token`);
-  const saveToken = (value) => {
+  const saveToken = (value: string) => {
     localStorage.setItem(`${endpoint}_token`, value);
     setHints((prev) => prev + 1);
   };

client/src/store/user.js

@@ -1,10 +0,0 @@
-import { atom } from 'recoil';
-
-const user = atom({
-  key: 'user',
-  default: null,
-});
-
-export default {
-  user,
-};

client/src/store/user.ts

@@ -0,0 +1,17 @@
+import { atom } from 'recoil';
+import { TPlugin } from 'librechat-data-provider';
+
+const user = atom({
+  key: 'user',
+  default: null,
+});
+
+const availableTools = atom<TPlugin[]>({
+  key: 'availableTools',
+  default: [],
+});
+
+export default {
+  user,
+  availableTools,
+};