has suggestions through hook

apps/web/src/components/features/input/BusterChatInput/BusterChatInputBase.tsx

@@ -132,7 +132,7 @@ const useUniqueSuggestions = (
 
     const fourUniqueSuggestions = sampleSize(allSuggestions, 4);
 
-    const items: MentionInputSuggestionsProps['suggestionItems'] = fourUniqueSuggestions.map(
+    const items: MentionInputSuggestionsDropdownItem[] = fourUniqueSuggestions.map(
       (suggestion) => ({
         type: 'item',
         value: suggestion.type + suggestion.value,
@@ -148,7 +148,7 @@ const useUniqueSuggestions = (
         addValueToInput: true,
         closeOnSelect: true,
       },
-    ];
+    ] satisfies MentionInputSuggestionsProps['suggestionItems'];
   }, [suggestedPrompts]);
 };
 

apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.tsx

@@ -1,4 +1,4 @@
-import { Command } from 'cmdk';
+import { Command, useCommandState } from 'cmdk';
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { useMemoizedFn } from '@/hooks/useMemoizedFn';
 import { cn } from '@/lib/utils';
@@ -51,7 +51,6 @@ export const MentionInputSuggestions = forwardRef<
   ) => {
     const [hasClickedSelect, setHasClickedSelect] = useState(false);
     const [value, setValue] = useState(valueProp ?? defaultValue);
-    const [hasResults, setHasResults] = useState(!!suggestionItems.length);
 
     const commandListNavigatedRef = useRef(false);
     const commandRef = useRef<HTMLDivElement>(null);
@@ -106,7 +105,6 @@ export const MentionInputSuggestions = forwardRef<
         onClick?.();
         if (closeSuggestionOnSelect) setHasClickedSelect(true);
         onSuggestionItemClick?.(params);
-        setHasResults(false);
       }
     );
 
@@ -153,14 +151,6 @@ export const MentionInputSuggestions = forwardRef<
       [value]
     );
 
-    function customFilter(value: string, search: string, keywords?: string[]): number {
-      console.log(value, search, keywords);
-      // Example: exact matches rank higher, case insensitive includes rank lower
-      if (value.toLowerCase() === search.toLowerCase()) return 2;
-      if (value.toLowerCase().includes(search.toLowerCase())) return 1;
-      return 0;
-    }
-
     return (
       <Command
         ref={commandRef}
@@ -186,26 +176,37 @@ export const MentionInputSuggestions = forwardRef<
           />
           {children && <div className="mt-3">{children}</div>}
         </MentionInputSuggestionsContainer>
-        {hasResults && <div className="border-b mb-1.5" />}
+        <SuggestionsSeperator />
         <MentionInputSuggestionsList
           show={showSuggestionList}
-          className={cn(suggestionsContainerClassName, hasResults && 'pb-1.5')}
+          className={cn(suggestionsContainerClassName)}
         >
           <MentionInputSuggestionsItemsSelector
             suggestionItems={suggestionItems}
             onSelect={onSelectItem}
             addValueToInput={addSuggestionValueToInput}
             closeOnSelect={closeSuggestionOnSelect}
-            hasResults={hasResults}
-            setHasResults={setHasResults}
           />
 
-          <MentionInputSuggestionsEmpty
-            setHasResults={setHasResults}
-            emptyComponent={emptyComponent}
-          />
+          <MentionInputSuggestionsEmpty emptyComponent={emptyComponent} />
         </MentionInputSuggestionsList>
       </Command>
     );
   }
 );
+
+const SuggestionsSeperator = () => {
+  const hasResults = useCommandState((x) => x.filtered.count) > 0;
+  if (!hasResults) return null;
+  return <div className="border-b mb-1.5" />;
+};
+
+const customFilter = (value: string, search: string, keywords?: string[]): number => {
+  if (keywords?.length) {
+    return keywords.includes(value) ? 2 : 0;
+  }
+  // Example: exact matches rank higher, case insensitive includes rank lower
+  if (value.toLowerCase() === search.toLowerCase()) return 2;
+  if (value.toLowerCase().includes(search.toLowerCase())) return 1;
+  return 0;
+};

apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsEmpty.tsx

@@ -5,10 +5,8 @@ import { cn } from '@/lib/utils';
 
 export const MentionInputSuggestionsEmpty = ({
   emptyComponent,
-  setHasResults,
   className,
 }: {
-  setHasResults: (hasResults: boolean) => void;
   className?: string;
   emptyComponent: React.ReactNode;
 }) => {
@@ -21,15 +19,6 @@ export const MentionInputSuggestionsEmpty = ({
       )}
     >
       {emptyComponent}
-      <SetHasResults setHasResults={setHasResults} />
     </Command.Empty>
   );
 };
-
-const SetHasResults = ({ setHasResults }: { setHasResults: (hasResults: boolean) => void }) => {
-  useMount(() => {
-    setHasResults(false);
-  });
-
-  return null;
-};

apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsGroup.tsx

@@ -12,8 +12,6 @@ export type MentionInputSuggestionsGroupProps = MentionInputSuggestionsDropdownG
 } & {
   className?: string;
   style?: React.CSSProperties;
-  hasResults: boolean;
-  setHasResults: (hasResults: boolean) => void;
 };
 
 export const MentionInputSuggestionsGroup = ({

apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsItem.tsx

@@ -1,4 +1,4 @@
-import { Command } from 'cmdk';
+import { Command, useCommandState } from 'cmdk';
 import type React from 'react';
 import { useMount } from '@/hooks/useMount';
 import { cn } from '@/lib/utils';
@@ -12,8 +12,6 @@ export type MentionInputSuggestionsItemProps = {
 } & MentionInputSuggestionsDropdownItem & {
     className?: string;
     style?: React.CSSProperties;
-    hasResults: boolean;
-    setHasResults: (hasResults: boolean) => void;
   };
 
 export const MentionInputSuggestionsItem = ({
@@ -28,8 +26,6 @@ export const MentionInputSuggestionsItem = ({
   type,
   addValueToInput,
   onSelect,
-  hasResults,
-  setHasResults,
   className,
   style,
 }: MentionInputSuggestionsItemProps) => {
@@ -42,6 +38,7 @@ export const MentionInputSuggestionsItem = ({
         className
       )}
       value={value}
+      data-testid={`type-${type}-value-${value}`}
       style={style}
       onSelect={() => {
         onSelect({
@@ -62,21 +59,6 @@ export const MentionInputSuggestionsItem = ({
         </span>
       )}
       {label}
-      {!hasResults && <SetHasResults hasResults={hasResults} setHasResults={setHasResults} />}
     </Command.Item>
   );
 };
-
-const SetHasResults = ({
-  hasResults,
-  setHasResults,
-}: {
-  hasResults: boolean;
-  setHasResults: (hasResults: boolean) => void;
-}) => {
-  useMount(() => {
-    if (!hasResults) setHasResults(true);
-  });
-
-  return null;
-};

apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsItemSelector.tsx

@@ -16,8 +16,6 @@ export const MentionInputSuggestionsItemSelector = ({
 }: {
   item: MentionInputSuggestionsProps['suggestionItems'][number];
   onSelect: (params: MentionInputSuggestionsOnSelectParams) => void;
-  hasResults: boolean;
-  setHasResults: (hasResults: boolean) => void;
 } & GroupOverrideProps) => {
   if (item.type === 'separator') {
     return <MentionInputSuggestionsSeparator />;
@@ -44,8 +42,6 @@ export const MentionInputSuggestionsItemsSelector = ({
 }: {
   suggestionItems: MentionInputSuggestionsProps['suggestionItems'];
   onSelect: (params: MentionInputSuggestionsOnSelectParams) => void;
-  hasResults: boolean;
-  setHasResults: (hasResults: boolean) => void;
 } & GroupOverrideProps) => {
   if (!suggestionItems) return null;
   return suggestionItems.map((item, index) => (

apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsList.tsx

@@ -1,4 +1,4 @@
-import { Command } from 'cmdk';
+import { Command, useCommandState } from 'cmdk';
 import type React from 'react';
 import { cn } from '@/lib/utils';
 
@@ -15,10 +15,12 @@ export const MentionInputSuggestionsList = ({
   children,
   show = true,
 }: MentionInputSuggestionsListProps) => {
+  const hasResults = useCommandState((x) => x.filtered.count) > 0;
+
   if (!show) return null;
 
   return (
-    <Command.List className={cn('px-3', className)} style={style}>
+    <Command.List className={cn('px-3', hasResults && 'pb-1.5', className)} style={style}>
       {children}
     </Command.List>
   );

apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsSeparator.tsx

@@ -1,4 +1,4 @@
-import { Command } from 'cmdk';
+import { Command, useCommandState } from 'cmdk';
 import type React from 'react';
 import { cn } from '@/lib/utils';
 
@@ -6,6 +6,8 @@ export const MentionInputSuggestionsSeparator = ({
   children,
   ...props
 }: React.ComponentPropsWithoutRef<typeof Command.Separator>) => {
+  const hasResults = useCommandState((x) => x);
+  console.log(hasResults);
   return (
     <Command.Separator className={cn('bg-border -mx-1 h-px my-1.5', props.className)} {...props}>
       {children}