🌟 fix: Handle Assistants Edge Cases, Improve Filter Styling (#2201)

* fix(assistants): default query to limit of 100 and `desc` order

* refactor(useMultiSearch): use object as params and fix styling for assistants

* feat: informative message for thread initialization failing due to long message

client/src/components/ui/MultiSearch.tsx

@@ -9,10 +9,12 @@ export default function MultiSearch({
   value,
   onChange,
   placeholder,
+  className = '',
 }: {
   value: string | null;
   onChange: (filter: string) => void;
   placeholder?: string;
+  className?: string;
 }) {
   const localize = useLocalize();
   const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = useCallback(
@@ -21,7 +23,12 @@ export default function MultiSearch({
   );
 
   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-700 dark:to-transparent dark:text-white dark:focus:from-white/10 dark:focus:to-white/20">
+    <div
+      className={cn(
+        '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-700 dark:to-transparent dark:text-white dark:focus:from-white/10 dark:focus:to-white/20',
+        className,
+      )}
+    >
       <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"
@@ -69,17 +76,27 @@ function defaultGetStringKey(node: unknown): string {
  * @param availableOptions
  * @param placeholder
  * @param getTextKeyOverride
+ * @param className - Additional classnames to add to the search container
+ * @param disabled - If the search should be disabled
  * @returns
  */
-export function useMultiSearch<OptionsType extends unknown[]>(
-  availableOptions: OptionsType,
-  placeholder?: string,
-  getTextKeyOverride?: (node: OptionsType[0]) => string,
-): [OptionsType, React.ReactNode] {
+export function useMultiSearch<OptionsType extends unknown[]>({
+  availableOptions,
+  placeholder,
+  getTextKeyOverride,
+  className,
+  disabled = false,
+}: {
+  availableOptions: OptionsType;
+  placeholder?: string;
+  getTextKeyOverride?: (node: OptionsType[0]) => string;
+  className?: string;
+  disabled?: boolean;
+}): [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;
+  const shouldShowSearch = availableOptions.length > 10 && !disabled;
 
   // Define the helper function used to enable search
   // If this is invalidly described, we will assume developer error - tf. avoid rendering
@@ -103,7 +120,12 @@ export function useMultiSearch<OptionsType extends unknown[]>(
   const onSearchChange = useCallback((nextFilterValue) => setFilterValue(nextFilterValue), []);
 
   const searchRender = shouldShowSearch ? (
-    <MultiSearch value={filterValue} onChange={onSearchChange} placeholder={placeholder} />
+    <MultiSearch
+      value={filterValue}
+      className={className}
+      onChange={onSearchChange}
+      placeholder={placeholder}
+    />
   ) : null;
 
   return [filteredOptions, searchRender];

client/src/components/ui/MultiSelectDropDown.tsx

@@ -48,11 +48,12 @@ function MultiSelectDropDown({
 
   // 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,
-    searchPlaceholder,
-    (option) => (option.name || '').toUpperCase(),
-  );
+  const [filteredValues, searchRender] = useMultiSearch<TPlugin[]>({
+    availableOptions: availableValues,
+    placeholder: searchPlaceholder,
+    getTextKeyOverride: (option) => (option.name || '').toUpperCase(),
+  });
+
   const hasSearchRender = Boolean(searchRender);
   const options = hasSearchRender ? filteredValues : availableValues;
 
@@ -65,6 +66,7 @@ function MultiSelectDropDown({
     <div className={cn('flex items-center justify-center gap-2', containerClassName ?? '')}>
       <div className="relative w-full">
         {/* the function typing is correct but there's still an issue here */}
+        {/* @ts-ignore */}
         <Listbox value={value} onChange={handleSelect} disabled={disabled}>
           {() => (
             <>

client/src/components/ui/MultiSelectPop.tsx

@@ -39,11 +39,11 @@ function MultiSelectPop({
   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,
-    searchPlaceholder,
-    (option) => (option.name || '').toUpperCase(),
-  );
+  const [filteredValues, searchRender] = useMultiSearch<TPlugin[]>({
+    availableOptions: availableValues,
+    placeholder: searchPlaceholder,
+    getTextKeyOverride: (option) => (option.name || '').toUpperCase(),
+  });
   const hasSearchRender = Boolean(searchRender);
   const options = hasSearchRender ? filteredValues : availableValues;
 

client/src/components/ui/SelectDropDown.tsx

@@ -24,6 +24,8 @@ type SelectDropDownProps = {
   optionsClass?: string;
   subContainerClassName?: string;
   className?: string;
+  searchClassName?: string;
+  searchPlaceholder?: string;
 };
 
 function SelectDropDown({
@@ -43,6 +45,8 @@ function SelectDropDown({
   subContainerClassName,
   className,
   renderOption,
+  searchClassName,
+  searchPlaceholder,
 }: SelectDropDownProps) {
   const localize = useLocalize();
   const transitionProps = { className: 'top-full mt-3' };
@@ -61,7 +65,12 @@ function SelectDropDown({
   // 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 [filteredValues, searchRender] = useMultiSearch<string[] | Option[]>({
+    availableOptions: availableValues,
+    placeholder: searchPlaceholder,
+    getTextKeyOverride: (option) => ((option as Option)?.label || '').toUpperCase(),
+    className: searchClassName,
+  });
   const hasSearchRender = Boolean(searchRender);
   const options = hasSearchRender ? filteredValues : availableValues;
 

client/src/components/ui/SelectDropDownPop.tsx

@@ -46,7 +46,9 @@ function SelectDropDownPop({
   // 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 [filteredValues, searchRender] = useMultiSearch<string[] | Option[]>({
+    availableOptions: availableValues,
+  });
   const hasSearchRender = Boolean(searchRender);
   const options = hasSearchRender ? filteredValues : availableValues;