🤖 feat: Model Specs & Save Tools per Convo/Preset (#2578)

* WIP: first pass ModelSpecs

* refactor(onSelectEndpoint): use `getConvoSwitchLogic`

* feat: introduce iconURL, greeting, frontend fields for conversations/presets/messages

* feat: conversation.iconURL & greeting in Landing

* feat: conversation.iconURL & greeting in New Chat button

* feat: message.iconURL

* refactor: ConversationIcon -> ConvoIconURL

* WIP: add spec as a conversation field

* refactor: useAppStartup, set spec on initial load for new chat, allow undefined spec, add localStorage keys enum, additional type fields for spec

* feat: handle `showIconInMenu`, `showIconInHeader`, undefined `iconURL` and no specs on initial load

* chore: handle undefined or empty modelSpecs

* WIP: first pass, modelSpec schema for custom config

* refactor: move default filtered tools definition to ToolService

* feat: pass modelSpecs from backend via startupConfig

* refactor: modelSpecs config, return and define list

* fix: react error and include iconURL in responseMessage

* refactor: add iconURL to responseMessage only

* refactor: getIconEndpoint

* refactor: pass TSpecsConfig

* fix(assistants): differentiate compactAssistantSchema, correctly resets shared conversation state with other endpoints

* refactor: assistant id prefix localStorage key

* refactor: add more LocalStorageKeys and replace hardcoded values

* feat: prioritize spec on new chat behavior: last selected modelSpec behavior (localStorage)

* feat: first pass, interface config

* chore: WIP, todo: add warnings based on config.modelSpecs settings.

* feat: enforce modelSpecs if configured

* feat: show config file yaml errors

* chore: delete unused legacy Plugins component

* refactor: set tools to localStorage from recoil store

* chore: add stable recoil setter to useEffect deps

* refactor: save tools to conversation documents

* style(MultiSelectPop): dynamic height, remove unused import

* refactor(react-query): use localstorage keys and pass config to useAvailablePluginsQuery

* feat(utils): add mapPlugins

* refactor(Convo): use conversation.tools if defined, lastSelectedTools if not

* refactor: remove unused legacy code using `useSetOptions`, remove conditional flag `isMultiChat` for using legacy settings

* refactor(PluginStoreDialog): add exhaustive-deps which are stable react state setters

* fix(HeaderOptions): pass `popover` as true

* refactor(useSetStorage): use project enums

* refactor: use LocalStorageKeys enum

* fix: prevent setConversation from setting falsy values in lastSelectedTools

* refactor: use map for availableTools state and available Plugins query

* refactor(updateLastSelectedModel): organize logic better and add note on purpose

* fix(setAgentOption): prevent reseting last model to secondary model for gptPlugins

* refactor(buildDefaultConvo): use enum

* refactor: remove `useSetStorage` and consolidate areas where conversation state is saved to localStorage

* fix: conversations retain tools on refresh

* fix(gptPlugins): prevent nullish tools from being saved

* chore: delete useServerStream

* refactor: move initial plugins logic to useAppStartup

* refactor(MultiSelectDropDown): add more pass-in className props

* feat: use tools in presets

* chore: delete unused usePresetOptions

* refactor: new agentOptions default handling

* chore: note

* feat: add label and custom instructions to agents

* chore: remove 'disabled with tools' message

* style: move plugins to 2nd column in parameters

* fix: TPreset type for agentOptions

* fix: interface controls

* refactor: add interfaceConfig, use Separator within Switcher

* refactor: hide Assistants panel if interface.parameters are disabled

* fix(Header): only modelSpecs if list is greater than 0

* refactor: separate MessageIcon logic from useMessageHelpers for better react rule-following

* fix(AppService): don't use reserved keyword 'interface'

* feat: set existing Icon for custom endpoints through iconURL

* fix(ci): tests passing for App Service

* docs: refactor custom_config.md for readability and better organization, also include missing values

* docs: interface section and re-organize docs

* docs: update modelSpecs info

* chore: remove unused files

* chore: remove unused files

* chore: move useSetIndexOptions

* chore: remove unused file

* chore: move useConversation(s)

* chore: move useDefaultConvo

* chore: move useNavigateToConvo

* refactor: use plugin install hook so it can be used elsewhere

* chore: import order

* update docs

* refactor(OpenAI/Plugins): allow modelLabel as an initial value for chatGptLabel

* chore: remove unused EndpointOptionsPopover and hide 'Save as Preset' button if preset UI visibility disabled

* feat(loadDefaultInterface): issue warnings based on values

* feat: changelog for custom config file

* docs: add additional changelog note

* fix: prevent unavailable tool selection from preset and update availableTools on Plugin installations

* feat: add `filteredTools` option in custom config

* chore: changelog

* fix(MessageIcon): always overwrite conversation.iconURL in messageSettings

* fix(ModelSpecsMenu): icon edge cases

* fix(NewChat): dynamic icon

* fix(PluginsClient): always include endpoint in responseMessage

* fix: always include endpoint and iconURL in responseMessage across different response methods

* feat: interchangeable keys for modelSpec enforcing

client/src/components/Endpoints/AlternativeSettings.tsx

@@ -10,7 +10,7 @@ export default function AlternativeSettings({
   setOption,
   isPreset = false,
   className = '',
-}: TSettingsProps & { isMultiChat?: boolean }) {
+}: TSettingsProps) {
   const currentSettingsView = useRecoilValue(store.currentSettingsView);
   if (!conversation?.endpoint || currentSettingsView === SettingsViews.default) {
     return null;

client/src/components/Endpoints/ConvoIconURL.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import type { TPreset } from 'librechat-data-provider';
+import type { IconMapProps } from '~/common';
+import { icons } from '~/components/Chat/Menus/Endpoints/Icons';
+
+interface ConvoIconURLProps {
+  preset: TPreset | null;
+  endpointIconURL?: string;
+  assistantName?: string;
+  context?: 'landing' | 'menu-item' | 'nav' | 'message';
+  assistantAvatar?: string;
+}
+
+const classMap = {
+  'menu-item': 'relative flex h-full items-center justify-center overflow-hidden rounded-full',
+  message: 'icon-md',
+  default: 'icon-xl relative flex h-full overflow-hidden rounded-full',
+};
+
+const styleMap = {
+  'menu-item': { width: '20px', height: '20px' },
+  default: { width: '100%', height: '100%' },
+};
+
+const styleImageMap = {
+  default: { width: '100%', height: '100%' },
+};
+
+const ConvoIconURL: React.FC<ConvoIconURLProps> = ({
+  preset,
+  endpointIconURL,
+  assistantAvatar,
+  assistantName,
+  context,
+}) => {
+  const { iconURL = '' } = preset ?? {};
+  let Icon: (
+    props: IconMapProps & {
+      context?: string;
+      iconURL?: string;
+    },
+  ) => React.JSX.Element;
+
+  if (!iconURL?.includes('http')) {
+    Icon = icons[iconURL] ?? icons.unknown;
+  } else {
+    Icon = () => (
+      <div
+        className={classMap[context ?? 'default'] ?? classMap.default}
+        style={styleMap[context ?? 'default'] ?? styleMap.default}
+      >
+        <img
+          src={iconURL}
+          alt={preset?.chatGptLabel ?? preset?.modelLabel ?? ''}
+          style={styleImageMap[context ?? 'default'] ?? styleImageMap.default}
+          className="object-cover"
+        />
+      </div>
+    );
+
+    return <Icon />;
+  }
+
+  return (
+    <div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black">
+      <Icon
+        size={41}
+        context={context}
+        className="h-2/3 w-2/3"
+        iconURL={endpointIconURL}
+        assistantName={assistantName}
+        avatar={assistantAvatar}
+      />
+    </div>
+  );
+};
+
+export default ConvoIconURL;

client/src/components/Endpoints/EndpointOptionsPopover.tsx

@@ -1,71 +0,0 @@
-import { Save } from 'lucide-react';
-import type { ReactNode } from 'react';
-// import { EModelEndpoint } from 'librechat-data-provider';
-import { cn, removeFocusOutlines } from '~/utils';
-// import PopoverButtons from './PopoverButtons';
-import { CrossIcon } from '~/components/svg';
-import { Button } from '~/components/ui';
-import { useLocalize } from '~/hooks';
-
-type TEndpointOptionsPopoverProps = {
-  children: ReactNode;
-  visible: boolean;
-  // endpoint: EModelEndpoint;
-  saveAsPreset: () => void;
-  closePopover: () => void;
-  PopoverButtons: ReactNode;
-};
-
-export default function EndpointOptionsPopover({
-  children,
-  // endpoint,
-  visible,
-  saveAsPreset,
-  closePopover,
-  PopoverButtons,
-}: TEndpointOptionsPopoverProps) {
-  const localize = useLocalize();
-  const cardStyle =
-    'shadow-xl rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white';
-
-  return (
-    <>
-      <div
-        className={cn(
-          'endpointOptionsPopover-container absolute bottom-[-10px] z-0 flex w-full flex-col items-center md:px-4',
-          visible ? ' show' : '',
-        )}
-      >
-        <div
-          className={cn(
-            cardStyle,
-            'border-d-0 flex w-full flex-col overflow-hidden rounded-none border-s-0 border-t bg-white px-0 pb-[10px] dark:border-white/10 md:rounded-md md:border lg:w-[736px]',
-          )}
-        >
-          <div className="flex w-full items-center bg-gray-100 px-2 py-2 dark:bg-gray-800/60">
-            <Button
-              type="button"
-              className="h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black focus:ring-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
-              onClick={saveAsPreset}
-            >
-              <Save className="mr-1 w-[14px]" />
-              {localize('com_endpoint_save_as_preset')}
-            </Button>
-            {PopoverButtons}
-            <Button
-              type="button"
-              className={cn(
-                'ml-auto h-auto bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white',
-                removeFocusOutlines,
-              )}
-              onClick={closePopover}
-            >
-              <CrossIcon />
-            </Button>
-          </div>
-          <div>{children}</div>
-        </div>
-      </div>
-    </>
-  );
-}

client/src/components/Endpoints/EndpointSettings.tsx

@@ -11,15 +11,14 @@ export default function Settings({
   setOption,
   isPreset = false,
   className = '',
-  isMultiChat = false,
-}: TSettingsProps & { isMultiChat?: boolean }) {
+}: TSettingsProps) {
   const modelsQuery = useGetModelsQuery();
   const currentSettingsView = useRecoilValue(store.currentSettingsView);
   if (!conversation?.endpoint || currentSettingsView !== SettingsViews.default) {
     return null;
   }
 
-  const { settings, multiViewSettings } = getSettings(isMultiChat);
+  const { settings, multiViewSettings } = getSettings();
   const { endpoint: _endpoint, endpointType } = conversation;
   const models = modelsQuery?.data?.[_endpoint] ?? [];
   const endpoint = endpointType ?? _endpoint;

client/src/components/Endpoints/Icon.tsx

@@ -21,14 +21,15 @@ import { cn } from '~/utils';
 const Icon: React.FC<IconProps> = (props) => {
   const { user } = useAuthContext();
   const {
-    size = 30,
-    isCreatedByUser,
-    button,
-    model = '',
-    endpoint,
     error,
+    button,
+    iconURL,
+    endpoint,
     jailbreak,
+    size = 30,
+    model = '',
     assistantName,
+    isCreatedByUser,
   } = props;
 
   const avatarSrc = useAvatar(user);
@@ -167,9 +168,13 @@ const Icon: React.FC<IconProps> = (props) => {
     },
   };
 
-  const { icon, bg, name } =
+  let { icon, bg, name } =
     endpoint && endpointIcons[endpoint] ? endpointIcons[endpoint] : endpointIcons.default;
 
+  if (iconURL && endpointIcons[iconURL]) {
+    ({ icon, bg, name } = endpointIcons[iconURL]);
+  }
+
   if (endpoint === EModelEndpoint.assistants) {
     return icon;
   }

client/src/components/Endpoints/MinimalIcon.tsx

@@ -55,7 +55,10 @@ const MinimalIcon: React.FC<IconProps> = (props) => {
     },
   };
 
-  const { icon, name } = endpointIcons[endpoint] ?? endpointIcons.default;
+  let { icon, name } = endpointIcons[endpoint] ?? endpointIcons.default;
+  if (props.iconURL && endpointIcons[props.iconURL]) {
+    ({ icon, name } = endpointIcons[props.iconURL]);
+  }
 
   return (
     <div

client/src/components/Endpoints/Settings/MultiView/Google.tsx

@@ -1,28 +0,0 @@
-import Settings from '../Google';
-import Examples from '../Examples';
-import { useSetOptions } from '~/hooks';
-import { useRecoilValue } from 'recoil';
-import store from '~/store';
-
-export default function GoogleView({ conversation, models, isPreset = false }) {
-  const optionSettings = useRecoilValue(store.optionSettings);
-  const { setOption, setExample, addExample, removeExample } = useSetOptions(
-    isPreset ? conversation : null,
-  );
-  if (!conversation) {
-    return null;
-  }
-
-  const { examples } = conversation;
-  const { showExamples, isCodeChat } = optionSettings;
-  return showExamples && !isCodeChat ? (
-    <Examples
-      examples={examples ?? []}
-      setExample={setExample}
-      addExample={addExample}
-      removeExample={removeExample}
-    />
-  ) : (
-    <Settings conversation={conversation} setOption={setOption} models={models} />
-  );
-}

client/src/components/Endpoints/Settings/MultiView/PluginSettings.tsx

@@ -5,7 +5,9 @@ import { useChatContext } from '~/Providers';
 
 export default function PluginsView({ conversation, models, isPreset = false }) {
   const { showAgentSettings } = useChatContext();
-  const { setOption, setAgentOption } = useSetIndexOptions(isPreset ? conversation : null);
+  const { setOption, setTools, setAgentOption, checkPluginSelection } = useSetIndexOptions(
+    isPreset ? conversation : null,
+  );
   if (!conversation) {
     return null;
   }
@@ -13,6 +15,12 @@ export default function PluginsView({ conversation, models, isPreset = false })
   return showAgentSettings ? (
     <AgentSettings conversation={conversation} setOption={setAgentOption} models={models} />
   ) : (
-    <Settings conversation={conversation} setOption={setOption} models={models} />
+    <Settings
+      conversation={conversation}
+      setOption={setOption}
+      setTools={setTools}
+      checkPluginSelection={checkPluginSelection}
+      models={models}
+    />
   );
 }

client/src/components/Endpoints/Settings/MultiView/Plugins.tsx

@@ -1,19 +0,0 @@
-import Settings from '../Plugins';
-import AgentSettings from '../AgentSettings';
-import { useSetOptions } from '~/hooks';
-import { useRecoilValue } from 'recoil';
-import store from '~/store';
-
-export default function PluginsView({ conversation, models, isPreset = false }) {
-  const showAgentSettings = useRecoilValue(store.showAgentSettings);
-  const { setOption, setAgentOption } = useSetOptions(isPreset ? conversation : null);
-  if (!conversation) {
-    return null;
-  }
-
-  return showAgentSettings ? (
-    <AgentSettings conversation={conversation} setOption={setAgentOption} models={models} />
-  ) : (
-    <Settings conversation={conversation} setOption={setOption} models={models} />
-  );
-}

client/src/components/Endpoints/Settings/MultiView/index.ts

@@ -1,4 +1,2 @@
-export { default as Google } from './Google';
-export { default as Plugins } from './Plugins';
 export { default as GoogleSettings } from './GoogleSettings';
 export { default as PluginSettings } from './PluginSettings';

client/src/components/Endpoints/Settings/OpenAI.tsx

@@ -32,6 +32,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
     endpoint,
     endpointType,
     model,
+    modelLabel,
     chatGptLabel,
     promptPrefix,
     temperature,
@@ -41,32 +42,33 @@ export default function Settings({ conversation, setOption, models, readonly }:
     resendFiles,
     imageDetail,
   } = conversation ?? {};
-  const [setChatGptLabel, chatGptLabelValue] = useDebouncedInput({
+
+  const [setChatGptLabel, chatGptLabelValue] = useDebouncedInput<string | null | undefined>({
     setOption,
     optionKey: 'chatGptLabel',
-    initialValue: chatGptLabel,
+    initialValue: modelLabel ?? chatGptLabel,
   });
-  const [setPromptPrefix, promptPrefixValue] = useDebouncedInput({
+  const [setPromptPrefix, promptPrefixValue] = useDebouncedInput<string | null | undefined>({
     setOption,
     optionKey: 'promptPrefix',
     initialValue: promptPrefix,
   });
-  const [setTemperature, temperatureValue] = useDebouncedInput({
+  const [setTemperature, temperatureValue] = useDebouncedInput<number | null | undefined>({
     setOption,
     optionKey: 'temperature',
     initialValue: temperature,
   });
-  const [setTopP, topPValue] = useDebouncedInput({
+  const [setTopP, topPValue] = useDebouncedInput<number | null | undefined>({
     setOption,
     optionKey: 'top_p',
     initialValue: topP,
   });
-  const [setFreqP, freqPValue] = useDebouncedInput({
+  const [setFreqP, freqPValue] = useDebouncedInput<number | null | undefined>({
     setOption,
     optionKey: 'frequency_penalty',
     initialValue: freqP,
   });
-  const [setPresP, presPValue] = useDebouncedInput({
+  const [setPresP, presPValue] = useDebouncedInput<number | null | undefined>({
     setOption,
     optionKey: 'presence_penalty',
     initialValue: presP,

client/src/components/Endpoints/Settings/Plugins.tsx

@@ -1,44 +1,105 @@
+import { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
 import TextareaAutosize from 'react-textarea-autosize';
+import { useAvailablePluginsQuery } from 'librechat-data-provider/react-query';
+import type { TPlugin } from 'librechat-data-provider';
+import type { TModelSelectProps } from '~/common';
 import {
-  SelectDropDown,
   Input,
   Label,
   Slider,
-  InputNumber,
   HoverCard,
+  InputNumber,
+  SelectDropDown,
   HoverCardTrigger,
-} from '~/components';
+  MultiSelectDropDown,
+} from '~/components/ui';
+import { cn, defaultTextProps, optionText, removeFocusOutlines } from '~/utils';
+import { useLocalize, useDebouncedInput } from '~/hooks';
+import { processPlugins, selectPlugins } from '~/utils';
 import OptionHover from './OptionHover';
-import type { TModelSelectProps } from '~/common';
 import { ESide } from '~/common';
-import { cn, defaultTextProps, optionText, removeFocusOutlines } from '~/utils/';
-import { useLocalize } from '~/hooks';
+import store from '~/store';
 
-export default function Settings({ conversation, setOption, models, readonly }: TModelSelectProps) {
+export default function Settings({
+  conversation,
+  setOption,
+  setTools,
+  checkPluginSelection,
+  models,
+  readonly,
+}: TModelSelectProps & {
+  setTools: (newValue: string, remove?: boolean | undefined) => void;
+  checkPluginSelection: (value: string) => boolean;
+}) {
   const localize = useLocalize();
-  if (!conversation) {
-    return null;
-  }
+  const availableTools = useRecoilValue(store.availableTools);
+  const { data: allPlugins } = useAvailablePluginsQuery({
+    select: selectPlugins,
+  });
+
+  const conversationTools: TPlugin[] = useMemo(() => {
+    if (!conversation?.tools) {
+      return [];
+    }
+    return processPlugins(conversation.tools, allPlugins?.map);
+  }, [conversation, allPlugins]);
+
+  const availablePlugins = useMemo(() => {
+    if (!availableTools) {
+      return [];
+    }
+
+    return Object.values(availableTools);
+  }, [availableTools]);
+
   const {
     model,
+    modelLabel,
     chatGptLabel,
     promptPrefix,
     temperature,
     top_p: topP,
     frequency_penalty: freqP,
     presence_penalty: presP,
-    tools,
-  } = conversation;
+  } = conversation ?? {};
+
+  const [setChatGptLabel, chatGptLabelValue] = useDebouncedInput<string | null | undefined>({
+    setOption,
+    optionKey: 'chatGptLabel',
+    initialValue: modelLabel ?? chatGptLabel,
+  });
+  const [setPromptPrefix, promptPrefixValue] = useDebouncedInput<string | null | undefined>({
+    setOption,
+    optionKey: 'promptPrefix',
+    initialValue: promptPrefix,
+  });
+  const [setTemperature, temperatureValue] = useDebouncedInput<number | null | undefined>({
+    setOption,
+    optionKey: 'temperature',
+    initialValue: temperature,
+  });
+  const [setTopP, topPValue] = useDebouncedInput<number | null | undefined>({
+    setOption,
+    optionKey: 'top_p',
+    initialValue: topP,
+  });
+  const [setFreqP, freqPValue] = useDebouncedInput<number | null | undefined>({
+    setOption,
+    optionKey: 'frequency_penalty',
+    initialValue: freqP,
+  });
+  const [setPresP, presPValue] = useDebouncedInput<number | null | undefined>({
+    setOption,
+    optionKey: 'presence_penalty',
+    initialValue: presP,
+  });
 
   const setModel = setOption('model');
-  const setChatGptLabel = setOption('chatGptLabel');
-  const setPromptPrefix = setOption('promptPrefix');
-  const setTemperature = setOption('temperature');
-  const setTopP = setOption('top_p');
-  const setFreqP = setOption('frequency_penalty');
-  const setPresP = setOption('presence_penalty');
 
-  const toolsSelected = tools && tools.length > 0;
+  if (!conversation) {
+    return null;
+  }
 
   return (
     <div className="grid grid-cols-5 gap-6">
@@ -58,21 +119,14 @@ export default function Settings({ conversation, setOption, models, readonly }:
           <div className="grid w-full items-center gap-2">
             <Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
               {localize('com_endpoint_custom_name')}{' '}
-              <small className="opacity-40">
-                ({localize('com_endpoint_default_empty')} |{' '}
-                {localize('com_endpoint_disabled_with_tools')})
-              </small>
+              <small className="opacity-40">{localize('com_endpoint_default_empty')}</small>
             </Label>
             <Input
               id="chatGptLabel"
-              disabled={readonly || toolsSelected}
-              value={chatGptLabel || ''}
+              disabled={readonly}
+              value={chatGptLabelValue || ''}
               onChange={(e) => setChatGptLabel(e.target.value ?? null)}
-              placeholder={
-                toolsSelected
-                  ? localize('com_endpoint_disabled_with_tools_placeholder')
-                  : localize('com_endpoint_openai_custom_name_placeholder')
-              }
+              placeholder={localize('com_endpoint_openai_custom_name_placeholder')}
               className={cn(
                 defaultTextProps,
                 'flex h-10 max-h-10 w-full resize-none px-3 py-2',
@@ -83,21 +137,16 @@ export default function Settings({ conversation, setOption, models, readonly }:
           <div className="grid w-full items-center gap-2">
             <Label htmlFor="promptPrefix" className="text-left text-sm font-medium">
               {localize('com_endpoint_prompt_prefix')}{' '}
-              <small className="opacity-40">
-                ({localize('com_endpoint_default_empty')} |{' '}
-                {localize('com_endpoint_disabled_with_tools')})
-              </small>
+              <small className="opacity-40">{localize('com_endpoint_default_empty')}</small>
             </Label>
             <TextareaAutosize
               id="promptPrefix"
-              disabled={readonly || toolsSelected}
-              value={promptPrefix || ''}
+              disabled={readonly}
+              value={promptPrefixValue || ''}
               onChange={(e) => setPromptPrefix(e.target.value ?? null)}
-              placeholder={
-                toolsSelected
-                  ? localize('com_endpoint_disabled_with_tools_placeholder')
-                  : localize('com_endpoint_plug_set_custom_instructions_for_gpt_placeholder')
-              }
+              placeholder={localize(
+                'com_endpoint_plug_set_custom_instructions_for_gpt_placeholder',
+              )}
               className={cn(
                 defaultTextProps,
                 'flex max-h-[138px] min-h-[100px] w-full resize-none px-3 py-2 ',
@@ -107,6 +156,20 @@ export default function Settings({ conversation, setOption, models, readonly }:
         </>
       </div>
       <div className="col-span-5 flex flex-col items-center justify-start gap-6 px-3 sm:col-span-2">
+        <MultiSelectDropDown
+          showAbove={false}
+          showLabel={false}
+          setSelected={setTools}
+          value={conversationTools}
+          optionValueKey="pluginKey"
+          availableValues={availablePlugins}
+          isSelected={checkPluginSelection}
+          searchPlaceholder={localize('com_ui_select_search_plugin')}
+          className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)}
+          optionsClassName="w-full max-h-[275px] dark:bg-gray-700 z-10 border dark:border-gray-600"
+          containerClassName="flex w-full resize-none border border-transparent"
+          labelClassName="dark:text-white"
+        />
         <HoverCard openDelay={300}>
           <HoverCardTrigger className="grid w-full items-center gap-2">
             <div className="flex justify-between">
@@ -119,7 +182,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               <InputNumber
                 id="temp-int"
                 disabled={readonly}
-                value={temperature}
+                value={temperatureValue}
                 onChange={(value) => setTemperature(Number(value))}
                 max={2}
                 min={0}
@@ -136,7 +199,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
             </div>
             <Slider
               disabled={readonly}
-              value={[temperature ?? 0.8]}
+              value={[temperatureValue ?? 0.8]}
               onValueChange={(value) => setTemperature(value[0])}
               doubleClickHandler={() => setTemperature(0.8)}
               max={2}
@@ -159,7 +222,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               <InputNumber
                 id="top-p-int"
                 disabled={readonly}
-                value={topP}
+                value={topPValue}
                 onChange={(value) => setTopP(Number(value))}
                 max={1}
                 min={0}
@@ -176,7 +239,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
             </div>
             <Slider
               disabled={readonly}
-              value={[topP ?? 1]}
+              value={[topPValue ?? 1]}
               onValueChange={(value) => setTopP(value[0])}
               doubleClickHandler={() => setTopP(1)}
               max={1}
@@ -200,7 +263,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               <InputNumber
                 id="freq-penalty-int"
                 disabled={readonly}
-                value={freqP}
+                value={freqPValue}
                 onChange={(value) => setFreqP(Number(value))}
                 max={2}
                 min={-2}
@@ -217,7 +280,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
             </div>
             <Slider
               disabled={readonly}
-              value={[freqP ?? 0]}
+              value={[freqPValue ?? 0]}
               onValueChange={(value) => setFreqP(value[0])}
               doubleClickHandler={() => setFreqP(0)}
               max={2}
@@ -241,7 +304,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               <InputNumber
                 id="pres-penalty-int"
                 disabled={readonly}
-                value={presP}
+                value={presPValue}
                 onChange={(value) => setPresP(Number(value))}
                 max={2}
                 min={-2}
@@ -258,7 +321,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
             </div>
             <Slider
               disabled={readonly}
-              value={[presP ?? 0]}
+              value={[presPValue ?? 0]}
               onValueChange={(value) => setPresP(value[0])}
               doubleClickHandler={() => setPresP(0)}
               max={2}

client/src/components/Endpoints/Settings/settings.ts

@@ -1,7 +1,7 @@
 import { EModelEndpoint } from 'librechat-data-provider';
 import type { FC } from 'react';
-import type { TModelSelectProps, TBaseSettingsProps, TModels } from '~/common';
-import { Google, Plugins, GoogleSettings, PluginSettings } from './MultiView';
+import type { TModelSelectProps } from '~/common';
+import { GoogleSettings, PluginSettings } from './MultiView';
 import AssistantsSettings from './Assistants';
 import AnthropicSettings from './Anthropic';
 import BingAISettings from './BingAI';
@@ -16,19 +16,7 @@ const settings: { [key: string]: FC<TModelSelectProps> } = {
   [EModelEndpoint.anthropic]: AnthropicSettings,
 };
 
-const multiViewSettings: { [key: string]: FC<TBaseSettingsProps & TModels> } = {
-  [EModelEndpoint.google]: Google,
-  [EModelEndpoint.gptPlugins]: Plugins,
-};
-
-export const getSettings = (isMultiChat = false) => {
-  if (!isMultiChat) {
-    return {
-      settings,
-      multiViewSettings,
-    };
-  }
-
+export const getSettings = () => {
   return {
     settings,
     multiViewSettings: {

client/src/components/Endpoints/index.ts

@@ -1,6 +1,6 @@
 export { default as Icon } from './Icon';
 export { default as MinimalIcon } from './MinimalIcon';
+export { default as ConvoIconURL } from './ConvoIconURL';
 export { default as EndpointSettings } from './EndpointSettings';
 export { default as SaveAsPresetDialog } from './SaveAsPresetDialog';
 export { default as AlternativeSettings } from './AlternativeSettings';
-export { default as EndpointOptionsPopover } from './EndpointOptionsPopover';