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 (