📦 feat: Model & Assistants Combobox for Side Panel (#2380)

* WIP: dynamic settings * WIP: update tests and validations * refactor(SidePanel): use hook for Links * WIP: dynamic settings, slider implemented * feat(useDebouncedInput): dynamic typing with generic * refactor(generate): add `custom` optionType to be non-conforming to conversation schema * feat: DynamicDropdown * refactor(DynamicSlider): custom optionType handling and useEffect for conversation updates elsewhere * refactor(Panel): add more test cases * chore(DynamicSlider): note * refactor(useDebouncedInput): import defaultDebouncedDelay from ~/common` * WIP: implement remaining ComponentTypes * chore: add com_sidepanel_parameters * refactor: add langCode handling for dynamic settings * chore(useOriginNavigate): change path to '/c/' * refactor: explicit textarea focus on new convo, share textarea idea via ~/common * refactor: useParameterEffects: reset if convo or preset Ids change, share and maintain statefulness in side panel * wip: combobox * chore: minor styling for Select components * wip: combobox select styling for side panel * feat: complete combobox * refactor: model select for side panel switcher * refactor(Combobox): add portal * chore: comment out dynamic parameters panel for future PR and delete prompt files * refactor(Combobox): add icon field for options, change hover bg-color, add displayValue * fix(useNewConvo): proper textarea focus with setTimeout * refactor(AssistantSwitcher): use Combobox * refactor(ModelSwitcher): add textarea focus on model switch
2025-12-19 09:50:15 +01:00 · 2024-04-10 14:27:22 -04:00 · 2024-04-10 14:27:22 -04:00 · 8e5f1ad575
commit 8e5f1ad575
parent f64a2cb0b0
33 changed files with 2850 additions and 462 deletions
--- a/client/src/components/SidePanel/AssistantSwitcher.tsx
+++ b/client/src/components/SidePanel/AssistantSwitcher.tsx
@ -0,0 +1,84 @@
+import { useEffect, useMemo } from 'react';
+import { Combobox } from '~/components/ui';
+import { EModelEndpoint, defaultOrderQuery } from 'librechat-data-provider';
+import type { SwitcherProps } from '~/common';
+import { useSetIndexOptions, useSelectAssistant, useLocalize } from '~/hooks';
+import { useChatContext, useAssistantsMapContext } from '~/Providers';
+import { useListAssistantsQuery } from '~/data-provider';
+import Icon from '~/components/Endpoints/Icon';
+
+export default function AssistantSwitcher({ isCollapsed }: SwitcherProps) {
+  const localize = useLocalize();
+  const { setOption } = useSetIndexOptions();
+  const { index, conversation } = useChatContext();
+
+  /* `selectedAssistant` must be defined with `null` to cause re-render on update */
+  const { assistant_id: selectedAssistant = null, endpoint } = conversation ?? {};
+
+  const { data: assistants = [] } = useListAssistantsQuery(defaultOrderQuery, {
+    select: (res) => res.data.map(({ id, name, metadata }) => ({ id, name, metadata })),
+  });
+
+  const assistantMap = useAssistantsMapContext();
+  const { onSelect } = useSelectAssistant();
+
+  useEffect(() => {
+    if (!selectedAssistant && assistants && assistants.length && assistantMap) {
+      const assistant_id =
+        localStorage.getItem(`assistant_id__${index}`) ?? assistants[0]?.id ?? '';
+      const assistant = assistantMap?.[assistant_id];
+      if (!assistant) {
+        return;
+      }
+
+      if (endpoint !== EModelEndpoint.assistants) {
+        return;
+      }
+      setOption('model')(assistant.model);
+      setOption('assistant_id')(assistant_id);
+    }
+  }, [index, assistants, selectedAssistant, assistantMap, endpoint, setOption]);
+
+  const currentAssistant = assistantMap?.[selectedAssistant ?? ''];
+
+  const assistantOptions = useMemo(() => {
+    return assistants.map((assistant) => {
+      return {
+        label: assistant.name ?? '',
+        value: assistant.id,
+        icon: (
+          <Icon
+            isCreatedByUser={false}
+            endpoint={EModelEndpoint.assistants}
+            assistantName={assistant.name ?? ''}
+            iconURL={(assistant.metadata?.avatar as string) ?? ''}
+          />
+        ),
+      };
+    });
+  }, [assistants]);
+
+  return (
+    <Combobox
+      selectedValue={currentAssistant?.id ?? ''}
+      displayValue={
+        assistants.find((assistant) => assistant.id === selectedAssistant)?.name ??
+        localize('com_sidepanel_select_assistant')
+      }
+      selectPlaceholder={localize('com_sidepanel_select_assistant')}
+      searchPlaceholder={localize('com_assistants_search_name')}
+      isCollapsed={isCollapsed}
+      ariaLabel={'assistant'}
+      setValue={onSelect}
+      items={assistantOptions}
+      SelectIcon={
+        <Icon
+          isCreatedByUser={false}
+          endpoint={EModelEndpoint.assistants}
+          assistantName={currentAssistant?.name ?? ''}
+          iconURL={(currentAssistant?.metadata?.avatar as string) ?? ''}
+        />
+      }
+    />
+  );
+}