add shadow and z index to list

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

@@ -2,6 +2,7 @@ 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 { createShortcutsMentionsSuggestions } from '@/components/features/input/Mentions/ShortcutsSuggestions/ShortcutsSuggestions';
 import { Plus } from '@/components/ui/icons';
 import type { MentionSuggestionExtension } from '@/components/ui/inputs/MentionInput';
 import type {
@@ -48,7 +49,7 @@ export const BusterChatInputBase: React.FC<BusterChatInput> = React.memo(
     }, [uniqueSuggestions, shortcutsSuggestions]);
 
     const mentions: MentionSuggestionExtension[] = useMemo(() => {
-      return [];
+      return [createShortcutsMentionsSuggestions(shortcuts)];
     }, [shortcuts]);
 
     const onDictate = useMemoizedFn((transcript: string) => {
@@ -153,6 +154,7 @@ const useShortcuts = (
         value: shortcut.name,
         label: shortcut.name,
         icon: '/',
+        inputValue: `/ ${shortcut.name}`,
       };
     });
 
@@ -161,6 +163,7 @@ const useShortcuts = (
       value: 'createShortcut',
       label: 'Create shortcut',
       icon: <Plus />,
+      inputValue: '/ Create shortcut',
       onClick: () => {
         console.log('createShortcut');
       },

apps/web/src/components/features/input/Mentions/ShortcutsSuggestions/ShortcutsSuggestions.tsx

@@ -10,21 +10,21 @@ import {
 } from '@/components/ui/inputs/MentionInput';
 import { ShortcutPopoverContent } from './ShortcutPopoverContent';
 
-export const createShortcutsSuggestions = (shortcutsResponse: ListShortcutsResponse) => {
+export const createShortcutsMentionsSuggestions = (
-  return useMemo(
+  shortcuts: ListShortcutsResponse['shortcuts']
-    () =>
+) => {
-      createMentionSuggestionExtension({
+  return createMentionSuggestionExtension({
-        trigger: '/',
+    trigger: '/',
-        items: createAllItems(shortcutsResponse),
+    items: createAllItems(shortcuts),
-        popoverContent: ShortcutPopoverContent,
+    popoverContent: ShortcutPopoverContent,
-      }),
+  });
-    [shortcutsResponse]
-  );
 };
 
-const createAllItems = (shortcutsResponse: ListShortcutsResponse): MentionInputTriggerItem[] => {
+const createAllItems = (
+  shortcuts: ListShortcutsResponse['shortcuts']
+): MentionInputTriggerItem[] => {
   return [
-    ...shortcutsResponse.shortcuts.map(createShortcut),
+    ...shortcuts.map(createShortcut),
     { type: 'separator' },
     {
       value: 'manageShortcuts',

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

@@ -73,8 +73,8 @@ export const MentionInput = forwardRef<MentionInputRef, MentionInputProps>(
         Placeholder.configure({ placeholder }),
         MentionExtension(mentions),
         SubmitOnEnter({
-          mentionsByTrigger,
           onPressEnter,
+          mentionsByTrigger,
           commandListNavigatedRef,
         }),
       ],

apps/web/src/components/ui/inputs/MentionInput/createMentionSuggestionOption.tsx

@@ -57,6 +57,8 @@ export const createMentionSuggestionExtension = ({
         element.style.left = `${rect.left}px`;
         element.style.top = `${rect.top}px`;
         element.style.transform = `translateY(1.15lh)`;
+        element.classList.add('z-50');
+        element.classList.add('shadow');
 
         document.body.appendChild(component.element);
       },

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

@@ -156,7 +156,6 @@ export const MentionInputSuggestions = forwardRef<
     return (
       <Command
         ref={commandRef}
-        value={value}
         label={ariaLabel}
         className={cn('relative border rounded overflow-hidden bg-background shadow', className)}
         shouldFilter={shouldFilter}