🤖 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/Input/Generations/GenerationButtons.tsx

@@ -1,83 +0,0 @@
-import { useEffect, useState } from 'react';
-import type { TMessage } from 'librechat-data-provider';
-import { useMessageHandler, useMediaQuery, useGenerations } from '~/hooks';
-import { cn } from '~/utils';
-import Regenerate from './Regenerate';
-import Continue from './Continue';
-import Stop from './Stop';
-
-type GenerationButtonsProps = {
-  endpoint: string;
-  showPopover: boolean;
-  opacityClass: string;
-};
-
-export default function GenerationButtons({
-  endpoint,
-  showPopover,
-  opacityClass,
-}: GenerationButtonsProps) {
-  const {
-    messages,
-    isSubmitting,
-    latestMessage,
-    handleContinue,
-    handleRegenerate,
-    handleStopGenerating,
-  } = useMessageHandler();
-  const isSmallScreen = useMediaQuery('(max-width: 768px)');
-  const { continueSupported, regenerateEnabled } = useGenerations({
-    endpoint,
-    message: latestMessage as TMessage,
-    isSubmitting,
-  });
-
-  const [userStopped, setUserStopped] = useState(false);
-
-  const handleStop = (e: React.MouseEvent<HTMLButtonElement>) => {
-    setUserStopped(true);
-    handleStopGenerating(e);
-  };
-
-  useEffect(() => {
-    let timer: NodeJS.Timeout;
-
-    if (userStopped) {
-      timer = setTimeout(() => {
-        setUserStopped(false);
-      }, 200);
-    }
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [userStopped]);
-
-  if (isSmallScreen) {
-    return null;
-  }
-
-  let button: React.ReactNode = null;
-
-  if (isSubmitting) {
-    button = <Stop onClick={handleStop} />;
-  } else if (userStopped || continueSupported) {
-    button = <Continue onClick={handleContinue} />;
-  } else if (messages && messages.length > 0 && regenerateEnabled) {
-    button = <Regenerate onClick={handleRegenerate} />;
-  }
-
-  return (
-    <div className="absolute bottom-4 right-0 z-[62]">
-      <div className="grow" />
-      <div className="flex items-center md:items-end">
-        <div
-          className={cn('option-buttons', showPopover ? '' : opacityClass)}
-          data-projection-id="173"
-        >
-          {button}
-        </div>
-      </div>
-    </div>
-  );
-}

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

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

client/src/components/Input/ModelSelect/ModelSelect.tsx

@@ -1,7 +1,7 @@
+import { useGetModelsQuery } from 'librechat-data-provider/react-query';
 import type { TConversation } from 'librechat-data-provider';
 import type { TSetOption } from '~/common';
-import { options, multiChatOptions } from './options';
-import { useGetModelsQuery } from 'librechat-data-provider/react-query';
+import { multiChatOptions } from './options';
 
 type TGoogleProps = {
   showExamples: boolean;
@@ -12,14 +12,14 @@ type TSelectProps = {
   conversation: TConversation | null;
   setOption: TSetOption;
   extraProps?: TGoogleProps;
-  isMultiChat?: boolean;
   showAbove?: boolean;
+  popover?: boolean;
 };
 
 export default function ModelSelect({
   conversation,
   setOption,
-  isMultiChat = false,
+  popover = false,
   showAbove = true,
 }: TSelectProps) {
   const modelsQuery = useGetModelsQuery();
@@ -32,7 +32,7 @@ export default function ModelSelect({
   const models = modelsQuery?.data?.[_endpoint] ?? [];
   const endpoint = endpointType ?? _endpoint;
 
-  const OptionComponent = isMultiChat ? multiChatOptions[endpoint] : options[endpoint];
+  const OptionComponent = multiChatOptions[endpoint];
 
   if (!OptionComponent) {
     return null;
@@ -44,7 +44,7 @@ export default function ModelSelect({
       setOption={setOption}
       models={models}
       showAbove={showAbove}
-      popover={isMultiChat}
+      popover={popover}
     />
   );
 }

client/src/components/Input/ModelSelect/Plugins.tsx

@@ -1,118 +0,0 @@
-import { useRecoilState } from 'recoil';
-import { useState, useEffect } from 'react';
-import { ChevronDownIcon } from 'lucide-react';
-import { useAvailablePluginsQuery } from 'librechat-data-provider/react-query';
-import type { TPlugin } from 'librechat-data-provider';
-import type { TModelSelectProps } from '~/common';
-import { SelectDropDown, MultiSelectDropDown, SelectDropDownPop, Button } from '~/components/ui';
-import { useSetOptions, useAuthContext, useMediaQuery, useLocalize } from '~/hooks';
-import { cn, cardStyle } from '~/utils/';
-import store from '~/store';
-
-const pluginStore: TPlugin = {
-  name: 'Plugin store',
-  pluginKey: 'pluginStore',
-  isButton: true,
-  description: '',
-  icon: '',
-  authConfig: [],
-  authenticated: false,
-};
-
-export default function Plugins({
-  conversation,
-  setOption,
-  models,
-  showAbove,
-  popover = false,
-}: TModelSelectProps) {
-  const localize = useLocalize();
-  const { data: allPlugins } = useAvailablePluginsQuery();
-  const [visible, setVisibility] = useState<boolean>(true);
-  const [availableTools, setAvailableTools] = useRecoilState(store.availableTools);
-  const { checkPluginSelection, setTools } = useSetOptions();
-  const { user } = useAuthContext();
-  const isSmallScreen = useMediaQuery('(max-width: 640px)');
-  const Menu = popover ? SelectDropDownPop : SelectDropDown;
-
-  useEffect(() => {
-    if (isSmallScreen) {
-      setVisibility(false);
-    }
-  }, [isSmallScreen]);
-
-  useEffect(() => {
-    if (!user) {
-      return;
-    }
-
-    if (!allPlugins) {
-      return;
-    }
-
-    if (!user.plugins || user.plugins.length === 0) {
-      setAvailableTools([pluginStore]);
-      return;
-    }
-
-    const tools = [...user.plugins]
-      .map((el) => allPlugins.find((plugin: TPlugin) => plugin.pluginKey === el))
-      .filter((el): el is TPlugin => el !== undefined);
-
-    /* Filter Last Selected Tools */
-    const localStorageItem = localStorage.getItem('lastSelectedTools');
-    if (!localStorageItem) {
-      return setAvailableTools([...tools, pluginStore]);
-    }
-    const lastSelectedTools = JSON.parse(localStorageItem);
-    const filteredTools = lastSelectedTools.filter((tool: TPlugin) =>
-      tools.some((existingTool) => existingTool.pluginKey === tool.pluginKey),
-    );
-    localStorage.setItem('lastSelectedTools', JSON.stringify(filteredTools));
-
-    setAvailableTools([...tools, pluginStore]);
-    // setAvailableTools is a recoil state setter, so it's safe to use it in useEffect
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allPlugins, user]);
-
-  if (!conversation) {
-    return null;
-  }
-
-  return (
-    <>
-      <Button
-        type="button"
-        className={cn(
-          cardStyle,
-          'z-40 flex h-[40px] min-w-4 flex-none items-center justify-center px-3 hover:bg-white focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-700',
-        )}
-        onClick={() => setVisibility((prev) => !prev)}
-      >
-        <ChevronDownIcon
-          className={cn(
-            !visible ? 'rotate-180 transform' : '',
-            'w-4 text-gray-600 dark:text-white',
-          )}
-        />
-      </Button>
-      <Menu
-        value={conversation.model ?? ''}
-        setValue={setOption('model')}
-        availableValues={models}
-        showAbove={showAbove}
-        className={cn(cardStyle, 'z-40 flex w-64 min-w-60 sm:w-48', visible ? '' : 'hidden')}
-      />
-      <MultiSelectDropDown
-        value={conversation.tools || []}
-        isSelected={checkPluginSelection}
-        setSelected={setTools}
-        availableValues={availableTools}
-        optionValueKey="pluginKey"
-        showAbove={showAbove}
-        className={cn(cardStyle, 'z-50 w-64 min-w-60 sm:w-48', visible ? '' : 'hidden')}
-        searchPlaceholder={localize('com_ui_select_search_plugin')}
-      />
-    </>
-  );
-}

client/src/components/Input/ModelSelect/PluginsByIndex.tsx

@@ -1,30 +1,20 @@
-import { useRecoilState } from 'recoil';
-import { useState, useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
 import { ChevronDownIcon } from 'lucide-react';
+import { useState, useEffect, useMemo } from 'react';
 import { useAvailablePluginsQuery } from 'librechat-data-provider/react-query';
 import type { TPlugin } from 'librechat-data-provider';
 import type { TModelSelectProps } from '~/common';
 import {
+  Button,
+  MultiSelectPop,
   SelectDropDown,
   SelectDropDownPop,
   MultiSelectDropDown,
-  MultiSelectPop,
-  Button,
 } from '~/components/ui';
 import { useSetIndexOptions, useAuthContext, useMediaQuery, useLocalize } from '~/hooks';
-import { cn, cardStyle } from '~/utils/';
+import { cn, cardStyle, selectPlugins, processPlugins } from '~/utils';
 import store from '~/store';
 
-const pluginStore: TPlugin = {
-  name: 'Plugin store',
-  pluginKey: 'pluginStore',
-  isButton: true,
-  description: '',
-  icon: '',
-  authConfig: [],
-  authenticated: false,
-};
-
 export default function PluginsByIndex({
   conversation,
   setOption,
@@ -33,12 +23,16 @@ export default function PluginsByIndex({
   popover = false,
 }: TModelSelectProps) {
   const localize = useLocalize();
-  const { data: allPlugins } = useAvailablePluginsQuery();
-  const [visible, setVisibility] = useState<boolean>(true);
-  const [availableTools, setAvailableTools] = useRecoilState(store.availableTools);
-  const { checkPluginSelection, setTools } = useSetIndexOptions();
   const { user } = useAuthContext();
+  const [visible, setVisibility] = useState<boolean>(true);
   const isSmallScreen = useMediaQuery('(max-width: 640px)');
+  const availableTools = useRecoilValue(store.availableTools);
+  const { checkPluginSelection, setTools } = useSetIndexOptions();
+
+  const { data: allPlugins } = useAvailablePluginsQuery({
+    enabled: !!user?.plugins,
+    select: selectPlugins,
+  });
 
   useEffect(() => {
     if (isSmallScreen) {
@@ -46,39 +40,20 @@ export default function PluginsByIndex({
     }
   }, [isSmallScreen]);
 
-  useEffect(() => {
-    if (!user) {
-      return;
+  const conversationTools: TPlugin[] = useMemo(() => {
+    if (!conversation?.tools) {
+      return [];
+    }
+    return processPlugins(conversation.tools, allPlugins?.map);
+  }, [conversation, allPlugins]);
+
+  const availablePlugins = useMemo(() => {
+    if (!availableTools) {
+      return [];
     }
 
-    if (!allPlugins) {
-      return;
-    }
-
-    if (!user.plugins || user.plugins.length === 0) {
-      setAvailableTools([pluginStore]);
-      return;
-    }
-
-    const tools = [...user.plugins]
-      .map((el) => allPlugins.find((plugin: TPlugin) => plugin.pluginKey === el))
-      .filter((el): el is TPlugin => el !== undefined);
-
-    /* Filter Last Selected Tools */
-    const localStorageItem = localStorage.getItem('lastSelectedTools');
-    if (!localStorageItem) {
-      return setAvailableTools([...tools, pluginStore]);
-    }
-    const lastSelectedTools = JSON.parse(localStorageItem);
-    const filteredTools = lastSelectedTools.filter((tool: TPlugin) =>
-      tools.some((existingTool) => existingTool.pluginKey === tool.pluginKey),
-    );
-    localStorage.setItem('lastSelectedTools', JSON.stringify(filteredTools));
-
-    setAvailableTools([...tools, pluginStore]);
-    // setAvailableTools is a recoil state setter, so it's safe to use it in useEffect
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allPlugins, user]);
+    return Object.values(availableTools);
+  }, [availableTools]);
 
   if (!conversation) {
     return null;
@@ -112,15 +87,19 @@ export default function PluginsByIndex({
             availableValues={models}
             showAbove={showAbove}
             showLabel={false}
+            className={cn(
+              cardStyle,
+              'z-50 flex h-[40px] w-48 min-w-48 flex-none items-center justify-center px-4 hover:cursor-pointer',
+            )}
           />
           <PluginsMenu
-            value={conversation.tools || []}
-            isSelected={checkPluginSelection}
-            setSelected={setTools}
-            availableValues={availableTools}
-            optionValueKey="pluginKey"
             showAbove={false}
             showLabel={false}
+            setSelected={setTools}
+            value={conversationTools}
+            optionValueKey="pluginKey"
+            availableValues={availablePlugins}
+            isSelected={checkPluginSelection}
             searchPlaceholder={localize('com_ui_select_search_plugin')}
           />
         </>

client/src/components/Input/ModelSelect/options.ts

@@ -5,7 +5,6 @@ import type { FC } from 'react';
 import OpenAI from './OpenAI';
 import BingAI from './BingAI';
 import Google from './Google';
-import Plugins from './Plugins';
 import ChatGPT from './ChatGPT';
 import Anthropic from './Anthropic';
 import PluginsByIndex from './PluginsByIndex';
@@ -16,7 +15,6 @@ export const options: { [key: string]: FC<TModelSelectProps> } = {
   [EModelEndpoint.azureOpenAI]: OpenAI,
   [EModelEndpoint.bingAI]: BingAI,
   [EModelEndpoint.google]: Google,
-  [EModelEndpoint.gptPlugins]: Plugins,
   [EModelEndpoint.anthropic]: Anthropic,
   [EModelEndpoint.chatGPTBrowser]: ChatGPT,
 };