From d0db81d359244a5dcfe5297137cb17634ce7236c Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Mon, 29 Sep 2025 19:15:32 -0600
Subject: [PATCH] hide after hidden elements

---
 .../input/BusterChatInput/BusterChatInputBase.tsx  | 14 ++++++++++++--
 .../BusterChatInput/BusterChatInputButtons.tsx     |  5 ++++-
 .../ShortcutsSuggestions/ShortcutsSuggestions.tsx  |  7 +++++++
 .../MentionInputSuggestions.tsx                    |  9 +++++++--
 .../MentionInputSuggestionsSeparator.tsx           |  1 +
 5 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/features/input/BusterChatInput/BusterChatInputBase.tsx b/apps/web/src/components/features/input/BusterChatInput/BusterChatInputBase.tsx
index 6e70055ca..03c8b5b19 100644
--- a/apps/web/src/components/features/input/BusterChatInput/BusterChatInputBase.tsx
+++ b/apps/web/src/components/features/input/BusterChatInput/BusterChatInputBase.tsx
@@ -1,5 +1,6 @@
 import type { ListShortcutsResponse } from '@buster/server-shared/shortcuts';
 import type { GetSuggestedPromptsResponse } from '@buster/server-shared/user';
+import type { Editor } from '@tiptap/react';
 import sampleSize from 'lodash/sampleSize';
 import React, { useMemo, useRef, useState } from 'react';
 import { useCreateShortcutsMentionsSuggestions } from '@/components/features/input/Mentions/ShortcutsSuggestions/ShortcutsSuggestions';
@@ -34,7 +35,11 @@ export const BusterChatInputBase: React.FC<BusterChatInput> = React.memo(
     const uniqueSuggestions = useUniqueSuggestions(suggestedPrompts);
     const [openCreateShortcutModal, setOpenCreateShortcutModal] = useState(false);
     const [mode, setMode] = useState<BusterChatInputMode>('auto');
-    const shortcutsSuggestions = useShortcuts(shortcuts, setOpenCreateShortcutModal);
+    const shortcutsSuggestions = useShortcuts(
+      shortcuts,
+      setOpenCreateShortcutModal,
+      mentionInputSuggestionsRef.current?.onChangeValue
+    );
 
     const suggestionItems: MentionInputSuggestionsProps['suggestionItems'] = useMemo(() => {
       const items: MentionInputSuggestionsProps['suggestionItems'] = [...uniqueSuggestions];
@@ -85,6 +90,7 @@ export const BusterChatInputBase: React.FC<BusterChatInput> = React.memo(
 
     const onSubmitButton = useMemoizedFn(() => {
       const value = mentionInputSuggestionsRef.current?.getValue();
+
       if (value) {
         onSubmitPreflight(value.transformedValue);
       }
@@ -175,7 +181,8 @@ const useUniqueSuggestions = (
 
 const useShortcuts = (
   shortcuts: ListShortcutsResponse['shortcuts'],
-  setOpenCreateShortcutModal: (open: boolean) => void
+  setOpenCreateShortcutModal: (open: boolean) => void,
+  onChangeValue: MentionInputSuggestionsRef['onChangeValue'] | undefined
 ): MentionInputSuggestionsProps['suggestionItems'] => {
   return useMemo(() => {
     const shortcutsItems = shortcuts.map<MentionInputSuggestionsDropdownItem>((shortcut) => {
@@ -185,6 +192,9 @@ const useShortcuts = (
         label: shortcut.name,
         icon: '/',
         inputValue: `/ ${shortcut.name}`,
+        onClick: () => {
+          onChangeValue?.(shortcut.name);
+        },
       };
     });
 
diff --git a/apps/web/src/components/features/input/BusterChatInput/BusterChatInputButtons.tsx b/apps/web/src/components/features/input/BusterChatInput/BusterChatInputButtons.tsx
index a3c078e93..9484009bf 100644
--- a/apps/web/src/components/features/input/BusterChatInput/BusterChatInputButtons.tsx
+++ b/apps/web/src/components/features/input/BusterChatInput/BusterChatInputButtons.tsx
@@ -80,7 +80,10 @@ export const BusterChatInputButtons = React.memo(
               />
             </AppTooltip>
           )}
-          <AppTooltip title={'Submit'}>
+          <AppTooltip
+            delayDuration={disableSubmit ? 500 : 0}
+            title={disableSubmit ? 'Please type something...' : 'Submit'}
+          >
             <Button
               rounding={'large'}
               variant={'default'}
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 d34c4f26d..145785952 100644
--- a/apps/web/src/components/features/input/Mentions/ShortcutsSuggestions/ShortcutsSuggestions.tsx
+++ b/apps/web/src/components/features/input/Mentions/ShortcutsSuggestions/ShortcutsSuggestions.tsx
@@ -46,6 +46,13 @@ export const useCreateShortcutsMentionsSuggestions = (
           },
         ],
         popoverContent: ShortcutPopoverContent,
+        onChangeTransform: (v) => {
+          const foundShortcut = shortcuts.find((shortcut) => shortcut.name === v.label);
+          if (foundShortcut) {
+            return foundShortcut.instructions;
+          }
+          return v.value;
+        },
       }),
     [shortcuts, setOpenCreateShortcutModal]
   );
diff --git a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.tsx b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.tsx
index 55ff80c8c..3a2f4bc17 100644
--- a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.tsx
+++ b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.tsx
@@ -69,7 +69,7 @@ export const MentionInputSuggestions = forwardRef<
       [onChange, setHasClickedSelect]
     );
 
-    //this is used to change the value of the input from outside the component
+    //Exported: this is used to change the value of the input from outside the component
     const onChangeValue = useMemoizedFn((v: string | ((prevState: string) => string)) => {
       if (typeof v === 'function') {
         setValue((prevState) => {
@@ -165,7 +165,12 @@ export const MentionInputSuggestions = forwardRef<
         <Command
           ref={commandRef}
           label={ariaLabel}
-          className={cn('relative border rounded overflow-hidden bg-background shadow', className)}
+          className={cn(
+            'relative border rounded overflow-hidden bg-background shadow',
+            // CSS-only solution: Hide separators that come after hidden elements
+            '[&_[hidden]+[data-separator-after-hidden]]:hidden',
+            className
+          )}
           shouldFilter={shouldFilter}
           filter={filter || customFilter}
         >
diff --git a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsSeparator.tsx b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsSeparator.tsx
index 6fef51d3d..3acc011ab 100644
--- a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsSeparator.tsx
+++ b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsSeparator.tsx
@@ -27,6 +27,7 @@ export const MentionInputSuggestionsSeparator = ({
         !hasResults && 'hidden',
         className
       )}
+      data-separator-after-hidden="true"
       {...props}
     >
       {children}