🔍 feat: Filter MultiSelect and SelectDropDown (+variants) + CSS fixes for Scrollbar (#2138)

* Initial implementation of MultiSearch. Added implementation to MultiSelect and SelectDropDown and variants

* Update scrollbar styles to prevent breakages on Chrome

* Revert changes to vite.config.ts (redundant for now)

* chore(New Chat): organize imports

* style(scrollbar-transparent): use webkit as standard, expected behavior

* chore: useCallback for mouse enter/leave

* fix(Footer): resolve map key error

* chore: memoize Conversations

* style(MultiSearch): improve multisearch styling

* style: dark mode search input

* fix: react warnings due to unrecognize html props

* chore: debounce OpenAI settings inputs

* fix(useDebouncedInput): only use event value as newValue if not object

---------

Co-authored-by: Flynn <gpg@flyn.ca>

client/src/components/ui/MultiSearch.tsx

@@ -0,0 +1,102 @@
+import { Search, X } from 'lucide-react';
+import React, { useState, useMemo, useCallback } from 'react';
+import { useLocalize } from '~/hooks';
+import { cn } from '~/utils';
+
+// This is a generic that can be added to Menu and Select components
+
+export default function MultiSearch({
+  value,
+  onChange,
+  placeholder,
+}: {
+  value: string | null;
+  onChange: (filter: string) => void;
+  placeholder?: string;
+}) {
+  const localize = useLocalize();
+  const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = useCallback(
+    (e) => onChange(e.target.value),
+    [],
+  );
+
+  return (
+    <div className="group sticky left-0 top-0 z-10 flex h-12 items-center gap-2 bg-gradient-to-b from-white from-65% to-transparent px-2 px-3 py-2 text-black transition-colors duration-300 focus:bg-gradient-to-b focus:from-white focus:to-white/50 dark:from-gray-800 dark:to-transparent dark:text-white dark:focus:from-white/10 dark:focus:to-white/20">
+      <Search className="h-4 w-4 text-gray-500 transition-colors duration-300 dark:group-focus-within:text-gray-300 dark:group-hover:text-gray-300" />
+      <input
+        type="text"
+        value={value || ''}
+        onChange={onChangeHandler}
+        placeholder={placeholder || localize('com_ui_select_search_model')}
+        className="flex-1 rounded-md border-none bg-transparent px-2.5 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-gray-700/10 dark:focus:ring-gray-200/10"
+      />
+      <div className="relative flex h-5 w-5 items-center justify-end text-gray-500">
+        <X
+          className={cn(
+            'text-gray-500 dark:text-gray-300',
+            value?.length ? 'cursor-pointer opacity-100' : 'opacity-0',
+          )}
+          onClick={() => onChange('')}
+        />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Helper function that will take a multiSearch input
+ * @param node
+ */
+function defaultGetStringKey(node: unknown): string {
+  if (typeof node === 'string') {
+    return node.toUpperCase();
+  }
+  // This should be a noop, but it's here for redundancy
+  return '';
+}
+
+/**
+ * Hook for conditionally making a multi-element list component into a sortable component
+ * Returns a RenderNode for search input when search functionality is available
+ * @param availableOptions
+ * @param placeholder
+ * @param getTextKeyOverride
+ * @returns
+ */
+export function useMultiSearch<OptionsType extends unknown[]>(
+  availableOptions: OptionsType,
+  placeholder?: string,
+  getTextKeyOverride?: (node: OptionsType[0]) => string,
+): [OptionsType, React.ReactNode] {
+  const [filterValue, setFilterValue] = useState<string | null>(null);
+
+  // We conditionally show the search when there's more than 10 elements in the menu
+  const shouldShowSearch = availableOptions.length > 10;
+
+  // Define the helper function used to enable search
+  // If this is invalidly described, we will assume developer error - tf. avoid rendering
+  const getTextKeyHelper = getTextKeyOverride || defaultGetStringKey;
+
+  // Iterate said options
+  const filteredOptions = useMemo(() => {
+    if (!shouldShowSearch || !filterValue || !availableOptions.length) {
+      // Don't render if available options aren't present, there's no filter active
+      return availableOptions;
+    }
+    // Filter through the values, using a simple text-based search
+    // nothing too fancy, but we can add a better search algo later if we need
+    const upperFilterValue = filterValue.toUpperCase();
+
+    return availableOptions.filter((value) =>
+      getTextKeyHelper(value).includes(upperFilterValue),
+    ) as OptionsType;
+  }, [availableOptions, getTextKeyHelper, filterValue, shouldShowSearch]);
+
+  const onSearchChange = useCallback((nextFilterValue) => setFilterValue(nextFilterValue), []);
+
+  const searchRender = shouldShowSearch ? (
+    <MultiSearch value={filterValue} onChange={onSearchChange} placeholder={placeholder} />
+  ) : null;
+
+  return [filteredOptions, searchRender];
+}