🤖 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
2025-12-19 18:00:15 +01:00 · 2024-04-30 22:11:48 -04:00 · 2024-04-30 22:11:48 -04:00 · 0e50c07e3f
commit 0e50c07e3f
parent a5cac03fa4
130 changed files with 3934 additions and 2973 deletions
--- a/client/src/components/Chat/Menus/Models/ModelSpecsMenu.tsx
+++ b/client/src/components/Chat/Menus/Models/ModelSpecsMenu.tsx
@ -0,0 +1,106 @@
+import { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
+import { EModelEndpoint } from 'librechat-data-provider';
+import { Content, Portal, Root } from '@radix-ui/react-popover';
+import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
+import type { TModelSpec, TConversation, TEndpointsConfig } from 'librechat-data-provider';
+import { getConvoSwitchLogic, getModelSpecIconURL } from '~/utils';
+import { useDefaultConvo, useNewConvo } from '~/hooks';
+import { useChatContext } from '~/Providers';
+import MenuButton from './MenuButton';
+import ModelSpecs from './ModelSpecs';
+import store from '~/store';
+
+export default function ModelSpecsMenu({ modelSpecs }: { modelSpecs: TModelSpec[] }) {
+  const { conversation } = useChatContext();
+  const { newConversation } = useNewConvo();
+
+  const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
+  const modularChat = useRecoilValue(store.modularChat);
+  const getDefaultConversation = useDefaultConvo();
+
+  const onSelectSpec = (spec: TModelSpec) => {
+    const { preset } = spec;
+    preset.iconURL = getModelSpecIconURL(spec);
+    preset.spec = spec.name;
+    const { endpoint: newEndpoint } = preset;
+    if (!newEndpoint) {
+      return;
+    }
+
+    const {
+      shouldSwitch,
+      isNewModular,
+      isCurrentModular,
+      isExistingConversation,
+      newEndpointType,
+      template,
+    } = getConvoSwitchLogic({
+      newEndpoint,
+      modularChat,
+      conversation,
+      endpointsConfig,
+    });
+
+    if (isExistingConversation && isCurrentModular && isNewModular && shouldSwitch) {
+      template.endpointType = newEndpointType as EModelEndpoint | undefined;
+
+      const currentConvo = getDefaultConversation({
+        /* target endpointType is necessary to avoid endpoint mixing */
+        conversation: { ...(conversation ?? {}), endpointType: template.endpointType },
+        preset: template,
+      });
+
+      /* We don't reset the latest message, only when changing settings mid-converstion */
+      newConversation({ template: currentConvo, preset, keepLatestMessage: true });
+      return;
+    }
+
+    newConversation({ template: { ...(template as Partial<TConversation>) }, preset });
+  };
+
+  const selected = useMemo(() => {
+    const spec = modelSpecs?.find((spec) => spec.name === conversation?.spec);
+    if (!spec) {
+      return undefined;
+    }
+    return spec;
+  }, [modelSpecs, conversation?.spec]);
+
+  return (
+    <Root>
+      <MenuButton
+        primaryText={selected?.label ?? ''}
+        selected={selected}
+        endpointsConfig={endpointsConfig}
+      />
+      <Portal>
+        {modelSpecs && modelSpecs?.length && (
+          <div
+            style={{
+              position: 'fixed',
+              left: '0px',
+              top: '0px',
+              transform: 'translate3d(268px, 50px, 0px)',
+              minWidth: 'max-content',
+              zIndex: 'auto',
+            }}
+          >
+            <Content
+              side="bottom"
+              align="start"
+              className="models-scrollbar mt-2 max-h-[65vh] min-w-[340px] max-w-xs overflow-y-auto rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-700 dark:text-white lg:max-h-[75vh]"
+            >
+              <ModelSpecs
+                specs={modelSpecs}
+                selected={selected}
+                setSelected={onSelectSpec}
+                endpointsConfig={endpointsConfig}
+              />
+            </Content>
+          </div>
+        )}
+      </Portal>
+    </Root>
+  );
+}