📦 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

client/src/components/SidePanel/ModelSwitcher.tsx

@@ -0,0 +1,54 @@
+import { useMemo, useRef, useCallback } from 'react';
+import { useGetModelsQuery } from 'librechat-data-provider/react-query';
+import MinimalIcon from '~/components/Endpoints/MinimalIcon';
+import { useSetIndexOptions, useLocalize } from '~/hooks';
+import type { SwitcherProps } from '~/common';
+import { useChatContext } from '~/Providers';
+import { Combobox } from '~/components/ui';
+import { mainTextareaId } from '~/common';
+
+export default function ModelSwitcher({ isCollapsed }: SwitcherProps) {
+  const localize = useLocalize();
+  const modelsQuery = useGetModelsQuery();
+  const { conversation } = useChatContext();
+  const { setOption } = useSetIndexOptions();
+  const timeoutIdRef = useRef<NodeJS.Timeout>();
+
+  const { endpoint, model = null } = conversation ?? {};
+  const models = useMemo(() => {
+    return modelsQuery?.data?.[endpoint ?? ''] ?? [];
+  }, [modelsQuery, endpoint]);
+
+  const setModel = useCallback(
+    (model: string) => {
+      setOption('model')(model);
+      clearTimeout(timeoutIdRef.current);
+      timeoutIdRef.current = setTimeout(() => {
+        const textarea = document.getElementById(mainTextareaId);
+        if (textarea) {
+          textarea.focus();
+        }
+      }, 150);
+    },
+    [setOption],
+  );
+
+  return (
+    <Combobox
+      selectPlaceholder={localize('com_ui_select_model')}
+      searchPlaceholder={localize('com_ui_select_search_model')}
+      isCollapsed={isCollapsed}
+      ariaLabel={'model'}
+      selectedValue={model ?? ''}
+      setValue={setModel}
+      items={models}
+      SelectIcon={
+        <MinimalIcon
+          isCreatedByUser={false}
+          endpoint={endpoint}
+          // iconURL={} // for future preset icons
+        />
+      }
+    />
+  );
+}