Add more shortcut options

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

@@ -2,8 +2,10 @@ import type { ListShortcutsResponse } from '@buster/server-shared/shortcuts';
 import type { GetSuggestedPromptsResponse } from '@buster/server-shared/user';
 import sampleSize from 'lodash/sampleSize';
 import React, { useMemo, useRef, useState } from 'react';
+import { Plus } from '@/components/ui/icons';
 import type { MentionSuggestionExtension } from '@/components/ui/inputs/MentionInput';
 import type {
+  MentionInputSuggestionsDropdownItem,
   MentionInputSuggestionsProps,
   MentionInputSuggestionsRef,
 } from '@/components/ui/inputs/MentionInputSuggestions';
@@ -145,12 +147,33 @@ const useShortcuts = (
   shortcuts: ListShortcutsResponse['shortcuts']
 ): MentionInputSuggestionsProps['suggestionItems'] => {
   return useMemo(() => {
-    return shortcuts.map((shortcut) => {
+    const shortcutsItems = shortcuts.map<MentionInputSuggestionsDropdownItem>((shortcut) => {
       return {
         type: 'item',
         value: shortcut.name,
         label: shortcut.name,
+        icon: '/',
       };
     });
+
+    shortcutsItems.push({
+      type: 'item',
+      value: 'createShortcut',
+      label: 'Create shortcut',
+      icon: <Plus />,
+      onClick: () => {
+        console.log('createShortcut');
+      },
+    });
+
+    return [
+      {
+        type: 'group',
+        label: 'Shortcuts',
+        suggestionItems: shortcutsItems,
+        addValueToInput: false,
+        closeOnSelect: true,
+      },
+    ];
   }, [shortcuts]);
 };

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

@@ -16,7 +16,6 @@ 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
   label: string | React.ReactNode;
-  shortcut?: string;
   icon?: React.ReactNode;
   onClick?: () => void;
   disabled?: boolean;

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

@@ -1,7 +1,10 @@
 import { Command } from 'cmdk';
 import type React from 'react';
 import { cn } from '@/lib/utils';
-import type { MentionInputSuggestionsDropdownGroup, MentionInputSuggestionsOnSelectParams } from './MentionInputSuggestions.types';
+import type {
+  MentionInputSuggestionsDropdownGroup,
+  MentionInputSuggestionsOnSelectParams,
+} from './MentionInputSuggestions.types';
 import { MentionInputSuggestionsItemsSelector } from './MentionInputSuggestionsItemSelector';
 
 export type MentionInputSuggestionsGroupProps = MentionInputSuggestionsDropdownGroup & {
@@ -9,6 +12,8 @@ export type MentionInputSuggestionsGroupProps = MentionInputSuggestionsDropdownG
 } & {
   className?: string;
   style?: React.CSSProperties;
+  hasResults: boolean;
+  setHasResults: (hasResults: boolean) => void;
 };
 
 export const MentionInputSuggestionsGroup = ({
@@ -19,6 +24,7 @@ export const MentionInputSuggestionsGroup = ({
   className,
   closeOnSelect,
   style,
+  ...rest
 }: MentionInputSuggestionsGroupProps) => {
   return (
     <Command.Group
@@ -34,6 +40,7 @@ export const MentionInputSuggestionsGroup = ({
         onSelect={onSelect}
         addValueToInput={addValueToInput}
         closeOnSelect={closeOnSelect}
+        {...rest}
       />
     </Command.Group>
   );

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

@@ -20,7 +20,6 @@ export const MentionInputSuggestionsItem = ({
   value,
   inputValue,
   label,
-  shortcut,
   icon,
   onClick,
   disabled,
@@ -31,16 +30,19 @@ export const MentionInputSuggestionsItem = ({
   onSelect,
   hasResults,
   setHasResults,
-  ...props
+  className,
+  style,
 }: MentionInputSuggestionsItemProps) => {
   return (
     <Command.Item
       className={cn(
         'data-[selected=true]:bg-item-hover data-[selected=true]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-base outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-        props.className
+        !disabled ? 'cursor-pointer' : 'cursor-not-allowed',
+        'text-secondary group',
+        className
       )}
       value={value}
-      {...props}
+      style={style}
       onSelect={() => {
         onSelect({
           value,
@@ -54,6 +56,11 @@ export const MentionInputSuggestionsItem = ({
         });
       }}
     >
+      {icon && (
+        <span className="text-icon-color min-w-4 w-4 text-center group-hover:text-foreground">
+          {icon}
+        </span>
+      )}
       {label}
       {!hasResults && <SetHasResults hasResults={hasResults} setHasResults={setHasResults} />}
     </Command.Item>