🔍 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];
+}

client/src/components/ui/MultiSelectDropDown.tsx

@@ -3,6 +3,7 @@ import { Listbox, Transition } from '@headlessui/react';
 import { Wrench, ArrowRight } from 'lucide-react';
 import { CheckMark } from '~/components/svg';
 import useOnClickOutside from '~/hooks/useOnClickOutside';
+import { useMultiSearch } from './MultiSearch';
 import { cn } from '~/utils/';
 import type { TPlugin } from 'librechat-data-provider';
 
@@ -43,6 +44,13 @@ function MultiSelectDropDown({
     setIsOpen(true);
   };
 
+  // Detemine if we should to convert this component into a searchable select.  If we have enough elements, a search
+  // input will appear near the top of the menu, allowing correct filtering of different model menu items. This will
+  // reset once the component is unmounted (as per a normal search)
+  const [filteredValues, searchRender] = useMultiSearch<TPlugin[]>(availableValues);
+  const hasSearchRender = Boolean(searchRender);
+  const options = hasSearchRender ? filteredValues : availableValues;
+
   const transitionProps = { className: 'top-full mt-3' };
   if (showAbove) {
     transitionProps.className = 'bottom-full mb-3';
@@ -136,9 +144,12 @@ function MultiSelectDropDown({
               >
                 <Listbox.Options
                   ref={menuRef}
-                  className="absolute z-50 mt-2 max-h-60 w-full overflow-auto rounded bg-white text-base text-xs ring-1 ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%]"
+                  className={cn(
+                    'absolute z-50 mt-2 max-h-60 w-full overflow-auto rounded bg-white text-base text-xs ring-1 ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%]',
+                  )}
                 >
-                  {availableValues.map((option, i: number) => {
+                  {searchRender}
+                  {options.map((option, i: number) => {
                     if (!option) {
                       return null;
                     }

client/src/components/ui/MultiSelectPop.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import { Wrench } from 'lucide-react';
 import { Root, Trigger, Content, Portal } from '@radix-ui/react-popover';
 import type { TPlugin } from 'librechat-data-provider';
 import MenuItem from '~/components/Chat/Menus/UI/MenuItem';
+import { useMultiSearch } from './MultiSearch';
 import { cn } from '~/utils/';
 
 type SelectDropDownProps = {
@@ -35,6 +36,11 @@ function MultiSelectPop({
   const title = _title;
   const excludeIds = ['select-plugin', 'plugins-label', 'selected-plugins'];
 
+  // Detemine if we should to convert this component into a searchable select
+  const [filteredValues, searchRender] = useMultiSearch<TPlugin[]>(availableValues);
+  const hasSearchRender = Boolean(searchRender);
+  const options = hasSearchRender ? filteredValues : availableValues;
+
   return (
     <Root>
       <div className={cn('flex items-center justify-center gap-2', containerClassName ?? '')}>
@@ -106,9 +112,13 @@ function MultiSelectPop({
             <Content
               side="bottom"
               align="center"
-              className="mt-2 max-h-60 min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+              className={cn(
+                'mt-2 max-h-60 min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white',
+                hasSearchRender && 'relative',
+              )}
             >
-              {availableValues.map((option) => {
+              {searchRender}
+              {options.map((option) => {
                 if (!option) {
                   return null;
                 }

client/src/components/ui/SelectDropDown.tsx

@@ -4,6 +4,7 @@ import type { Option } from '~/common';
 import CheckMark from '../svg/CheckMark';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils/';
+import { useMultiSearch } from './MultiSearch';
 
 type SelectDropDownProps = {
   id?: string;
@@ -57,6 +58,13 @@ function SelectDropDown({
     title = localize('com_ui_model');
   }
 
+  // Detemine if we should to convert this component into a searchable select.  If we have enough elements, a search
+  // input will appear near the top of the menu, allowing correct filtering of different model menu items. This will
+  // reset once the component is unmounted (as per a normal search)
+  const [filteredValues, searchRender] = useMultiSearch<string[] | Option[]>(availableValues);
+  const hasSearchRender = Boolean(searchRender);
+  const options = hasSearchRender ? filteredValues : availableValues;
+
   return (
     <div className={cn('flex items-center justify-center gap-2 ', containerClassName ?? '')}>
       <div className={cn('relative w-full', subContainerClassName ?? '')}>
@@ -122,7 +130,7 @@ function SelectDropDown({
               >
                 <Listbox.Options
                   className={cn(
-                    'absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded border bg-white text-base text-xs ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:border-gray-600 md:w-[100%]',
+                    'absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded border bg-white text-base text-xs ring-black/10 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:ring-white/20 md:w-[100%]',
                     optionsListClass ?? '',
                   )}
                 >
@@ -138,7 +146,8 @@ function SelectDropDown({
                       {renderOption()}
                     </Listbox.Option>
                   )}
-                  {availableValues.map((option: string | Option, i: number) => {
+                  {searchRender}
+                  {options.map((option: string | Option, i: number) => {
                     if (!option) {
                       return null;
                     }

client/src/components/ui/SelectDropDownPop.tsx

@@ -4,6 +4,7 @@ import MenuItem from '~/components/Chat/Menus/UI/MenuItem';
 import type { Option } from '~/common';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils/';
+import { useMultiSearch } from './MultiSearch';
 
 type SelectDropDownProps = {
   id?: string;
@@ -42,6 +43,13 @@ function SelectDropDownPop({
     title = localize('com_ui_model');
   }
 
+  // Detemine if we should to convert this component into a searchable select.  If we have enough elements, a search
+  // input will appear near the top of the menu, allowing correct filtering of different model menu items. This will
+  // reset once the component is unmounted (as per a normal search)
+  const [filteredValues, searchRender] = useMultiSearch<string[] | Option[]>(availableValues);
+  const hasSearchRender = Boolean(searchRender);
+  const options = hasSearchRender ? filteredValues : availableValues;
+
   return (
     <Root>
       <div className={'flex items-center justify-center gap-2 '}>
@@ -95,9 +103,13 @@ function SelectDropDownPop({
             <Content
               side="bottom"
               align="start"
-              className="mt-2 max-h-[52vh] min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white lg:max-h-[52vh]"
+              className={cn(
+                'mt-2 max-h-[52vh] min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white lg:max-h-[52vh]',
+                hasSearchRender && 'relative',
+              )}
             >
-              {availableValues.map((option) => {
+              {searchRender}
+              {options.map((option) => {
                 return (
                   <MenuItem
                     key={option}