hide after hidden elements

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);
+        },
       };
     });
 

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'}

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]
   );

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}
         >

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}