From 5f4f3dcde9a63c729db08a84beec612948e807c1 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Mon, 29 Sep 2025 15:59:22 -0600
Subject: [PATCH] add shadow and z index to list

---
 .../BusterChatInput/BusterChatInputBase.tsx   |  5 +++-
 .../ShortcutsSuggestions.tsx                  | 24 +++++++++----------
 .../ui/inputs/MentionInput/MentionInput.tsx   |  2 +-
 .../createMentionSuggestionOption.tsx         |  2 ++
 .../MentionInputSuggestions.tsx               |  1 -
 5 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/components/features/input/BusterChatInput/BusterChatInputBase.tsx b/apps/web/src/components/features/input/BusterChatInput/BusterChatInputBase.tsx
index c562b0a6e..6e5fafaa5 100644
--- a/apps/web/src/components/features/input/BusterChatInput/BusterChatInputBase.tsx
+++ b/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');
       },
diff --git a/apps/web/src/components/features/input/Mentions/ShortcutsSuggestions/ShortcutsSuggestions.tsx b/apps/web/src/components/features/input/Mentions/ShortcutsSuggestions/ShortcutsSuggestions.tsx
index 5a5803a93..d28b8a8bc 100644
--- a/apps/web/src/components/features/input/Mentions/ShortcutsSuggestions/ShortcutsSuggestions.tsx
+++ b/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) => {
-  return useMemo(
-    () =>
-      createMentionSuggestionExtension({
-        trigger: '/',
-        items: createAllItems(shortcutsResponse),
-        popoverContent: ShortcutPopoverContent,
-      }),
-    [shortcutsResponse]
-  );
+export const createShortcutsMentionsSuggestions = (
+  shortcuts: ListShortcutsResponse['shortcuts']
+) => {
+  return createMentionSuggestionExtension({
+    trigger: '/',
+    items: createAllItems(shortcuts),
+    popoverContent: ShortcutPopoverContent,
+  });
 };
 
-const createAllItems = (shortcutsResponse: ListShortcutsResponse): MentionInputTriggerItem[] => {
+const createAllItems = (
+  shortcuts: ListShortcutsResponse['shortcuts']
+): MentionInputTriggerItem[] => {
   return [
-    ...shortcutsResponse.shortcuts.map(createShortcut),
+    ...shortcuts.map(createShortcut),
     { type: 'separator' },
     {
       value: 'manageShortcuts',
diff --git a/apps/web/src/components/ui/inputs/MentionInput/MentionInput.tsx b/apps/web/src/components/ui/inputs/MentionInput/MentionInput.tsx
index a330c0f67..52681cf87 100644
--- a/apps/web/src/components/ui/inputs/MentionInput/MentionInput.tsx
+++ b/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,
         }),
       ],
diff --git a/apps/web/src/components/ui/inputs/MentionInput/createMentionSuggestionOption.tsx b/apps/web/src/components/ui/inputs/MentionInput/createMentionSuggestionOption.tsx
index fe329fe41..5f87a61aa 100644
--- a/apps/web/src/components/ui/inputs/MentionInput/createMentionSuggestionOption.tsx
+++ b/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);
       },
diff --git a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.tsx b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.tsx
index 1c169cdd5..e8e20ed21 100644
--- a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.tsx
+++ b/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}