Merge pull request #1234 from buster-so/big-nate-bus-2019-fire-off-suggested-question-as-soon-as-its-clicked-instead

Big nate bus 2019 fire off suggested question as soon as its clicked instead

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

@@ -104,6 +104,10 @@ export const BusterChatInputBase: React.FC<BusterChatInputProps> = React.memo(
       onSubmit({ ...value, mode });
     };
 
+    const onSuggestionItemClick = useMemoizedFn(() => {
+      onSubmitPreflight();
+    });
+
     const onCloseCreateShortcutModal = useMemoizedFn(() => {
       setOpenCreateShortcutModal(false);
     });
@@ -123,6 +127,7 @@ export const BusterChatInputBase: React.FC<BusterChatInputProps> = React.memo(
         <MentionInputSuggestions
           defaultValue={defaultValue}
           onPressEnter={onSubmitPreflight}
+          onSuggestionItemClick={onSuggestionItemClick}
           mentions={mentions}
           suggestionItems={suggestionItems}
           disabled={disabled}

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

@@ -166,6 +166,7 @@ const ModePopoverContent = ({
       side="bottom"
       sideOffset={10}
       className="p-0"
+      onOpenAutoFocus={(e) => e.preventDefault()}
       content={
         <div className={cn('flex flex-col space-y-3 max-w-[210px] py-3')}>
           <div className={cn('flex flex-col space-y-1', classes)}>

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

@@ -66,6 +66,12 @@ export const MentionInputSuggestions = forwardRef<
         ? !hasClickedSelect && suggestionItems.length > 0
         : isInteracting && suggestionItems.length > 0;
 
+    // biome-ignore lint/style/noNonNullAssertion: we know the ref is not null
+    const getValue = mentionsInputRef.current?.getValue!;
+    // biome-ignore lint/style/noNonNullAssertion: we know the ref is not null
+    const addMentionToInput = mentionsInputRef.current?.addMentionToInput!;
+    const mounted = useMounted();
+
     const onChangeInputValue: MentionInputProps['onChange'] = useCallback(
       (d) => {
         const { transformedValue } = d;
@@ -113,17 +119,12 @@ export const MentionInputSuggestions = forwardRef<
           setValue(stringValue);
         }
         onClick?.();
-        if (closeSuggestionOnSelect && params.closeOnSelect !== false) setHasClickedSelect(true);
         onSuggestionItemClick?.(params);
+
+        if (closeSuggestionOnSelect && params.closeOnSelect !== false) setHasClickedSelect(true);
       }
     );
 
-    // biome-ignore lint/style/noNonNullAssertion: we know the ref is not null
-    const getValue = mentionsInputRef.current?.getValue!;
-    // biome-ignore lint/style/noNonNullAssertion: we know the ref is not null
-    const addMentionToInput = mentionsInputRef.current?.addMentionToInput!;
-    const mounted = useMounted();
-
     const onBlur = useMemoizedFn(() => {
       setIsInteracting(false);
     });
@@ -193,6 +194,9 @@ export const MentionInputSuggestions = forwardRef<
           )}
           shouldFilter={shouldFilter}
           filter={filter || customFilter}
+          onClick={() => {
+            setIsInteracting(true);
+          }}
         >
           <MentionInputSuggestionsContainer className={inputContainerClassName}>
             <MentionInputSuggestionsMentionsInput

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

@@ -30,6 +30,19 @@ export const MentionInputSuggestionsItem = ({
   style,
   popoverContent,
 }: MentionInputSuggestionsItemProps) => {
+  const onSelectItem = () => {
+    onSelect({
+      value,
+      inputValue,
+      label,
+      onClick,
+      addValueToInput,
+      closeOnSelect,
+      disabled,
+      loading,
+    });
+  };
+
   return (
     <PopoverContentWrapper popoverContent={popoverContent}>
       <Command.Item
@@ -42,17 +55,11 @@ export const MentionInputSuggestionsItem = ({
         value={value}
         data-testid={`type-${type}-value-${value}`}
         style={style}
+        onMouseDown={() => {
+          onSelectItem();
+        }}
         onSelect={() => {
-          onSelect({
+          onSelectItem();
-            value,
-            inputValue,
-            label,
-            onClick,
-            addValueToInput,
-            closeOnSelect,
-            disabled,
-            loading,
-          });
         }}
       >
         {icon && (

apps/web/src/components/ui/popover/Popover.tsx

@@ -9,7 +9,7 @@ import {
 
 export interface PopoverProps
   extends React.ComponentProps<typeof PopoverBase>,
-    Pick<React.ComponentProps<typeof PopoverContent>, 'align' | 'side'> {
+    Pick<React.ComponentProps<typeof PopoverContent>, 'align' | 'side' | 'onOpenAutoFocus'> {
   children: React.ReactNode;
   content: React.ReactNode;
   className?: string;
@@ -28,6 +28,7 @@ export const Popover = React.memo<PopoverProps>(
     trigger = 'click',
     size = 'default',
     sideOffset,
+    onOpenAutoFocus,
     ...props
   }) => {
     return (
@@ -41,6 +42,7 @@ export const Popover = React.memo<PopoverProps>(
           className={className}
           size={size}
           sideOffset={sideOffset}
+          onOpenAutoFocus={onOpenAutoFocus}
         >
           {content}
         </PopoverContent>

apps/web/src/context/Chats/useChat.ts

@@ -1,4 +1,5 @@
 import type { MessageAnalysisMode } from '@buster/server-shared/chats';
+import { useMutation } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 import { create } from 'mutative';
 import type { FileType } from '@/api/asset_interfaces/chat';
@@ -6,6 +7,7 @@ import { useGetChatMemoized, useGetChatMessageMemoized } from '@/api/buster_rest
 import { useStartNewChat, useStopChat } from '@/api/buster_rest/chats/queryRequestsV2';
 import { useChatUpdate } from '@/api/buster_rest/chats/useChatUpdate';
 import { useMemoizedFn } from '@/hooks/useMemoizedFn';
+import { timeout } from '@/lib/timeout';
 
 type StartChatParams = {
   prompt: string | undefined;
@@ -19,13 +21,14 @@ type StartChatParams = {
 
 export const useChat = () => {
   const navigate = useNavigate();
-  const { mutateAsync: startNewChat, isPending: isSubmittingChat } = useStartNewChat();
+  const { mutateAsync: startNewChatServerFn } = useStartNewChat();
   const { mutateAsync: stopChatMutation } = useStopChat();
   const getChatMemoized = useGetChatMemoized();
   const getChatMessageMemoized = useGetChatMessageMemoized();
   const { onUpdateChat, onUpdateChatMessage } = useChatUpdate();
 
-  const startChat = async ({
+  const { mutateAsync: startChat, isPending: isSubmittingChat } = useMutation({
+    mutationFn: async ({
       prompt,
       chatId,
       metricId,
@@ -33,7 +36,7 @@ export const useChat = () => {
       messageId,
       mode,
     }: StartChatParams) => {
-    const res = await startNewChat({
+      const res = await startNewChatServerFn({
         prompt,
         chat_id: chatId,
         metric_id: metricId,
@@ -46,12 +49,15 @@ export const useChat = () => {
 
       const hasMultipleMessages = message_ids.length > 1;
       if (!hasMultipleMessages) {
-      navigate({
+        await navigate({
           to: '/app/chats/$chatId',
           params: { chatId: id },
         });
       }
-  };
+
+      await timeout(150);
+    },
+  });
 
   const onStartNewChat = useMemoizedFn(
     async (d: { prompt: string; mode: StartChatParams['mode'] }) => {