diff --git a/apps/web/src/components/features/input/BusterChatInput/BusterChatInputBase.tsx b/apps/web/src/components/features/input/BusterChatInput/BusterChatInputBase.tsx index 6e5fafaa5..0aee74105 100644 --- a/apps/web/src/components/features/input/BusterChatInput/BusterChatInputBase.tsx +++ b/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]); }; diff --git a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.stories.tsx b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.stories.tsx index 61145e402..ad09646b7 100644 --- a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.stories.tsx +++ b/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:
Hello
, + children:
Hello
, }, }; diff --git a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.tsx b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.tsx index e8e20ed21..702c1ef33 100644 --- a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.tsx +++ b/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 ( = { 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 = { 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' > >; diff --git a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsGroup.tsx b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsGroup.tsx index edf5f320a..6d1cbc062 100644 --- a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsGroup.tsx +++ b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsGroup.tsx @@ -29,7 +29,7 @@ export const MentionInputSuggestionsGroup = ({ return (