🤖 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/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: {