stylize groups

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

@@ -140,7 +140,15 @@ const useUniqueSuggestions = (
       })
     );
 
-    return items;
+    return [
+      {
+        type: 'group',
+        label: 'Shortcuts',
+        suggestionItems: items,
+        addValueToInput: true,
+        closeOnSelect: true,
+      },
+    ];
   }, [suggestedPrompts]);
 };
 

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

@@ -23,6 +23,9 @@ const items: MentionInputSuggestionsProps['suggestionItems'] = [
     label: `Item ${i + 1}`,
     value: `item${i + 1}`,
   })),
+  {
+    type: 'separator',
+  },
   {
     label: 'Item (disabled)',
     value: 'item-disabled',
@@ -78,7 +81,6 @@ export const Default: Story = {
     value: 'Sample text value',
     suggestionItems: items,
     mentions,
-    onSubmit: fn(),
-    children: <div className="bg-red-100 min-h-20">Hello</div>,
+    children: <div className="bg-red-100 min-h-10">Hello</div>,
   },
 };

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

@@ -85,7 +85,7 @@ export const MentionInputSuggestions = forwardRef<
 
     const onSelectItem = useMemoizedFn(
       ({ onClick, ...params }: MentionInputSuggestionsOnSelectParams) => {
-        const { addValueToInput, loading, inputValue, label, disabled } = params;
+        const { addValueToInput, loading, label, disabled, inputValue } = params;
         if (disabled) {
           console.warn('Item is disabled', params);
           return;
@@ -153,13 +153,21 @@ 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}
         label={ariaLabel}
         className={cn('relative border rounded overflow-hidden bg-background shadow', className)}
-        shouldFilter={shouldFilter}
-        filter={filter}
+        shouldFilter={true}
+        filter={customFilter}
       >
         <MentionInputSuggestionsContainer className={inputContainerClassName}>
           <MentionInputSuggestionsMentionsInput

apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.types.ts

@@ -14,7 +14,7 @@ export type GroupOverrideProps = {
 
 export type MentionInputSuggestionsDropdownItem<T = string> = {
   value: T;
-  inputValue?: string; //if this is undefined, the label will be used (string casted), must have addValueToInput set to true
+  inputValue?: string; //this will be the value added to the input pill when addValueToInput is true
   label: string | React.ReactNode;
   icon?: React.ReactNode;
   onClick?: () => void;
@@ -23,6 +23,7 @@ export type MentionInputSuggestionsDropdownItem<T = string> = {
   closeOnSelect?: boolean; //defaults to parent
   type?: 'item';
   addValueToInput?: boolean; //defaults to group addValueToInput
+  keywords?: string[];
 };
 
 export type MentionInputSuggestionsOnSelectParams = NonNullable<
@@ -32,10 +33,11 @@ export type MentionInputSuggestionsOnSelectParams = NonNullable<
     | 'label'
     | 'addValueToInput'
     | 'onClick'
-    | 'inputValue'
     | 'closeOnSelect'
     | 'disabled'
     | 'loading'
+    | 'keywords'
+    | 'inputValue'
   >
 >;
 

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

@@ -29,7 +29,7 @@ export const MentionInputSuggestionsGroup = ({
   return (
     <Command.Group
       className={cn(
-        'text-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        'text-text-tertiary overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-2.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-base [&_[cmdk-group-heading]]:h-8',
         className
       )}
       style={style}

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

@@ -29,6 +29,7 @@ export const MentionInputSuggestionsMentionsInput = forwardRef<
         value={value}
         autoFocus={false}
         className="sr-only hidden h-0 border-0 p-0 pointer-events-none w-full"
+        // className="absolute -top-1 left-0 w-full h-full border border-red-500"
         aria-hidden="true"
       />
     </React.Fragment>