📦 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/hooks/Input/index.ts

@@ -1,5 +1,6 @@
 export { default as useUserKey } from './useUserKey';
 export { default as useDebounce } from './useDebounce';
 export { default as useTextarea } from './useTextarea';
+export { default as useCombobox } from './useCombobox';
 export { default as useRequiresKey } from './useRequiresKey';
 export { default as useMultipleKeys } from './useMultipleKeys';

client/src/hooks/Input/useCombobox.ts

@@ -0,0 +1,37 @@
+import { useMemo, useState } from 'react';
+import { matchSorter } from 'match-sorter';
+import type { OptionWithIcon } from '~/common';
+
+export default function useCombobox({
+  value,
+  options,
+}: {
+  value: string;
+  options: OptionWithIcon[];
+}) {
+  const [open, setOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState('');
+
+  const matches = useMemo(() => {
+    if (!searchValue) {
+      return options;
+    }
+    const keys = ['label', 'value'];
+    const matches = matchSorter(options, searchValue, { keys });
+    // Radix Select does not work if we don't render the selected item, so we
+    // make sure to include it in the list of matches.
+    const selectedItem = options.find((currentItem) => currentItem.value === value);
+    if (selectedItem && !matches.includes(selectedItem)) {
+      matches.push(selectedItem);
+    }
+    return matches;
+  }, [searchValue, value, options]);
+
+  return {
+    open,
+    setOpen,
+    searchValue,
+    setSearchValue,
+    matches,
+  };
+}