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/components/Input/EndpointMenu/EndpointItem.jsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { Settings } from 'lucide-react';
+import { DropdownMenuRadioItem } from '~/components';
+import { getIcon } from '~/components/Endpoints';
+import { SetTokenDialog } from '../SetTokenDialog';
+
+import store from '~/store';
+import { cn, alternateName } from '~/utils';
+
+export default function ModelItem({ endpoint, value, isSelected }) {
+  const [setTokenDialogOpen, setSetTokenDialogOpen] = useState(false);
+  const endpointsConfig = useRecoilValue(store.endpointsConfig);
+
+  const icon = getIcon({
+    size: 20,
+    endpoint,
+    error: false,
+    className: 'mr-2',
+    message: false,
+  });
+
+  const isUserProvided = endpointsConfig?.[endpoint]?.userProvide;
+
+  // regular model
+  return (
+    <>
+      <DropdownMenuRadioItem
+        value={value}
+        className={cn(
+          'group dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800',
+          isSelected && 'active bg-gray-50 dark:bg-gray-800',
+        )}
+        id={endpoint}
+      >
+        {icon}
+        {alternateName[endpoint] || endpoint}
+        {endpoint === 'gptPlugins' && (
+          <span className="py-0.25 ml-1 rounded bg-blue-200 px-1 text-[10px] font-semibold text-[#4559A4]">
+            Beta
+          </span>
+        )}
+        <div className="flex w-4 flex-1" />
+        {isUserProvided ? (
+          <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',
+              isSelected && 'visible text-gray-700 dark:text-gray-200',
+            )}
+            onClick={(e) => {
+              e.preventDefault();
+              setSetTokenDialogOpen(true);
+            }}
+          >
+            <Settings className="mr-1 inline-block w-[16px] items-center stroke-1" />
+            Config Token
+          </button>
+        ) : null}
+      </DropdownMenuRadioItem>
+      <SetTokenDialog
+        open={setTokenDialogOpen}
+        onOpenChange={setSetTokenDialogOpen}
+        endpoint={endpoint}
+      />
+    </>
+  );
+}

client/src/components/Input/EndpointMenu/EndpointItems.jsx

@@ -0,0 +1,17 @@
+import EndpointItem from './EndpointItem';
+
+export default function EndpointItems({ endpoints, onSelect, selectedEndpoint }) {
+  return (
+    <>
+      {endpoints.map((endpoint) => (
+        <EndpointItem
+          isSelected={selectedEndpoint === endpoint}
+          key={endpoint}
+          value={endpoint}
+          onSelect={onSelect}
+          endpoint={endpoint}
+        />
+      ))}
+    </>
+  );
+}

client/src/components/Input/EndpointMenu/EndpointMenu.jsx

@@ -0,0 +1,260 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { Trash2 } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { useRecoilValue, useRecoilState } from 'recoil';
+import { useDeletePresetMutation, useCreatePresetMutation } from 'librechat-data-provider';
+import { getIcon, EditPresetDialog } from '~/components/Endpoints';
+import EndpointItems from './EndpointItems';
+import PresetItems from './PresetItems';
+import FileUpload from './FileUpload';
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Dialog,
+  DialogTrigger,
+} from '~/components/ui/';
+import DialogTemplate from '~/components/ui/DialogTemplate';
+import { cn, cleanupPreset, getDefaultConversation } from '~/utils';
+
+import store from '~/store';
+
+export default function NewConversationMenu() {
+  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 [messages, setMessages] = useRecoilState(store.messages);
+  const availableEndpoints = useRecoilValue(store.availableEndpoints);
+  const endpointsConfig = useRecoilValue(store.endpointsConfig);
+  const [presets, setPresets] = useRecoilState(store.presets);
+  const modularEndpoints = new Set(['gptPlugins', 'anthropic', 'google', 'openAI']);
+
+  const { endpoint, conversationId } = conversation;
+  const { newConversation } = store.useConversation();
+
+  const deletePresetsMutation = useDeletePresetMutation();
+  const createPresetMutation = useCreatePresetMutation();
+
+  const importPreset = (jsonData) => {
+    createPresetMutation.mutate(
+      { ...jsonData },
+      {
+        onSuccess: (data) => {
+          setPresets(data);
+        },
+        onError: (error) => {
+          console.error('Error uploading the preset:', error);
+        },
+      },
+    );
+  };
+
+  const onFileSelected = (jsonData) => {
+    const jsonPreset = { ...cleanupPreset({ preset: jsonData, endpointsConfig }), presetId: null };
+    importPreset(jsonPreset);
+  };
+
+  // update the default model when availableModels changes
+  // typically, availableModels changes => modelsFilter or customGPTModels changes
+  useEffect(() => {
+    const isInvalidConversation = !availableEndpoints.find((e) => e === endpoint);
+    if (conversationId == 'new' && isInvalidConversation) {
+      newConversation();
+    }
+  }, [availableEndpoints]);
+
+  // save selected model to localStorage
+  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')) || {};
+      const { jailbreak, toneStyle } = conversation;
+      localStorage.setItem(
+        'lastBingSettings',
+        JSON.stringify({ ...lastBingSettings, jailbreak, toneStyle }),
+      );
+    }
+  }, [conversation]);
+
+  // set the current model
+  const onSelectEndpoint = (newEndpoint) => {
+    setMenuOpen(false);
+    if (!newEndpoint) {
+      return;
+    } else {
+      newConversation({}, { endpoint: newEndpoint });
+    }
+  };
+
+  // set the current model
+  const onSelectPreset = (newPreset) => {
+    setMenuOpen(false);
+
+    if (modularEndpoints.has(endpoint) && modularEndpoints.has(newPreset?.endpoint)) {
+      const currentConvo = getDefaultConversation({
+        conversation,
+        endpointsConfig,
+        preset: newPreset,
+      });
+
+      setConversation(currentConvo);
+      setMessages(messages);
+      return;
+    }
+
+    if (!newPreset) {
+      return;
+    }
+
+    newConversation({}, newPreset);
+  };
+
+  const onChangePreset = (preset) => {
+    setPresetModelVisible(true);
+    setPreset(preset);
+  };
+
+  const clearAllPresets = () => {
+    deletePresetsMutation.mutate({ arg: {} });
+  };
+
+  const onDeletePreset = (preset) => {
+    deletePresetsMutation.mutate({ arg: preset });
+  };
+
+  const icon = getIcon({
+    size: 32,
+    ...conversation,
+    isCreatedByUser: false,
+    error: false,
+    button: true,
+  });
+
+  return (
+    <Dialog className="z-[100]">
+      <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            id="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-hover:max-w-[80px] group-hover:px-2 group-data-[state=open]:max-w-[80px] group-data-[state=open]:px-2 dark:text-slate-300">
+              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 ? 'Hide ' : 'Show '} Endpoints
+          </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">
+                  No endpoint 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 ? 'Hide ' : 'Show '} 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"
+                >
+                  {/* <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" />
+                  Clear All
+                  {/* </Button> */}
+                </label>
+              </DialogTrigger>
+              <DialogTemplate
+                title="Clear presets"
+                description="Are you sure you want to clear all presets? This is irreversible."
+                selection={{
+                  selectHandler: clearAllPresets,
+                  selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
+                  selectText: 'Clear',
+                }}
+              />
+            </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">No preset yet.</DropdownMenuLabel>
+              ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <EditPresetDialog
+        open={presetModelVisible}
+        onOpenChange={setPresetModelVisible}
+        preset={preset}
+      />
+    </Dialog>
+  );
+}

client/src/components/Input/EndpointMenu/FileUpload.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { FileUp } from 'lucide-react';
+import { cn } from '~/utils/';
+
+type FileUploadProps = {
+  onFileSelected: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  className?: string;
+  successText?: string;
+  invalidText?: string;
+  validator?: ((data: Record<string, unknown>) => boolean) | null;
+  text?: string;
+  id?: string;
+};
+
+const FileUpload: React.FC<FileUploadProps> = ({
+  onFileSelected,
+  className = '',
+  successText = null,
+  invalidText = null,
+  validator = null,
+  text = null,
+  id = '1',
+}) => {
+  const [statusColor, setStatusColor] = useState<string>('text-gray-600');
+  const [status, setStatus] = useState<null | string>(null);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    const file = event.target.files?.[0];
+    if (!file) {
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const jsonData = JSON.parse(e.target?.result as string);
+      if (validator && !validator(jsonData)) {
+        setStatus('invalid');
+        setStatusColor('text-red-600');
+        return;
+      }
+
+      if (validator) {
+        setStatus('success');
+        setStatusColor('text-green-500 dark:text-green-500');
+      }
+
+      onFileSelected(jsonData);
+    };
+    reader.readAsText(file);
+  };
+
+  return (
+    <label
+      htmlFor={`file-upload-${id}`}
+      className={cn(
+        'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:bg-slate-200 hover:text-green-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500',
+        statusColor,
+      )}
+    >
+      <FileUp className="mr-1 flex w-[22px] items-center stroke-1" />
+      <span className="flex text-xs ">
+        {!status ? text || 'Import' : status === 'success' ? successText : invalidText}
+      </span>
+      <input
+        id={`file-upload-${id}`}
+        value=""
+        type="file"
+        className={cn('hidden ', className)}
+        accept=".json"
+        onChange={handleFileChange}
+      />
+    </label>
+  );
+};
+
+export default FileUpload;

client/src/components/Input/EndpointMenu/PresetItem.jsx

@@ -0,0 +1,95 @@
+import { DropdownMenuRadioItem, EditIcon, TrashIcon } from '~/components';
+import { getIcon } from '~/components/Endpoints';
+
+export default function PresetItem({ preset = {}, value, onChangePreset, onDeletePreset }) {
+  const { endpoint } = preset;
+
+  const icon = getIcon({
+    size: 20,
+    endpoint: preset?.endpoint,
+    model: preset?.model,
+    error: false,
+    className: 'mr-2',
+  });
+
+  const getPresetTitle = () => {
+    let _title = `${endpoint}`;
+
+    if (endpoint === 'azureOpenAI' || endpoint === 'openAI') {
+      const { chatGptLabel, model } = preset;
+      if (model) {
+        _title += `: ${model}`;
+      }
+      if (chatGptLabel) {
+        _title += ` as ${chatGptLabel}`;
+      }
+    } else if (endpoint === 'google') {
+      const { modelLabel, model } = preset;
+      if (model) {
+        _title += `: ${model}`;
+      }
+      if (modelLabel) {
+        _title += ` as ${modelLabel}`;
+      }
+    } else if (endpoint === 'bingAI') {
+      const { jailbreak, toneStyle } = preset;
+      if (toneStyle) {
+        _title += `: ${toneStyle}`;
+      }
+      if (jailbreak) {
+        _title += ' as Sydney';
+      }
+    } else if (endpoint === 'chatGPTBrowser') {
+      const { model } = preset;
+      if (model) {
+        _title += `: ${model}`;
+      }
+    } else if (endpoint === 'gptPlugins') {
+      const { model } = preset;
+      if (model) {
+        _title += `: ${model}`;
+      }
+    } else if (endpoint === null) {
+      null;
+    } else {
+      null;
+    }
+    return _title;
+  };
+
+  // regular model
+  return (
+    <DropdownMenuRadioItem
+      value={value}
+      className="group flex h-10 max-h-[44px] flex-row justify-between dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800 sm:h-auto"
+    >
+      <div className="flex items-center justify-start">
+        {icon}
+        <small className="text-[11px]">{preset?.title}</small>
+        <small className="invisible ml-1 flex w-0 flex-shrink text-[10px] sm:visible sm:w-auto">
+          ({getPresetTitle()})
+        </small>
+      </div>
+      <div className="flex h-full items-center justify-end">
+        <button
+          className="m-0 mr-1 h-full rounded-md px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:p-2 sm:group-hover:visible"
+          onClick={(e) => {
+            e.preventDefault();
+            onChangePreset(preset);
+          }}
+        >
+          <EditIcon />
+        </button>
+        <button
+          className="m-0 h-full rounded-md px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:p-2 sm:group-hover:visible"
+          onClick={(e) => {
+            e.preventDefault();
+            onDeletePreset(preset);
+          }}
+        >
+          <TrashIcon />
+        </button>
+      </div>
+    </DropdownMenuRadioItem>
+  );
+}

client/src/components/Input/EndpointMenu/PresetItems.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import PresetItem from './PresetItem';
+
+export default function PresetItems({ presets, onSelect, onChangePreset, onDeletePreset }) {
+  return (
+    <>
+      {presets.map((preset) => (
+        <PresetItem
+          key={preset?.presetId ?? Math.random()}
+          value={preset}
+          onSelect={onSelect}
+          onChangePreset={onChangePreset}
+          onDeletePreset={onDeletePreset}
+          preset={preset}
+        />
+      ))}
+    </>
+  );
+}

client/src/components/Input/EndpointMenu/index.ts

@@ -0,0 +1 @@
+export { default as EndpointMenu } from './EndpointMenu';