Allow typing in the chat input even when going

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

@@ -74,11 +74,11 @@ export const InputTextAreaButton = forwardRef<HTMLTextAreaElement, InputTextArea
       >
         <InputTextArea
           ref={textRef}
-          disabled={disabled || loading}
+          disabled={disabled}
           variant="ghost"
           className={cn(
             'leading-1.3 w-full px-5! pt-4! pr-10 align-middle',
-            loading && 'cursor-not-allowed! opacity-70',
+            loading && 'opacity-80',
             inputClassName
           )}
           style={style}

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

@@ -53,8 +53,8 @@ export const useChatInputFlow = ({
       return;
 
     if (loading) {
-      onStopChat();
-      return;
+      await onStopChat();
+      await timeout(100);
     }
 
     const trimmedInputValue = inputValue.trim();
@@ -130,8 +130,5 @@ export const useChatInputFlow = ({
     }, 100);
   });
 
-  return useMemo(
-    () => ({ onSubmitPreflight, onStopChat, isFileChanged }),
-    [onSubmitPreflight, onStopChat, isFileChanged]
-  );
+  return { onSubmitPreflight, onStopChat, isFileChanged };
 };

apps/web/src/layouts/ChatLayout/ChatContent/ChatMessageOptions.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from '@tanstack/react-router';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
+import type { BusterChatMessage } from '@/api/asset_interfaces/chat';
 import {
   useDuplicateChat,
   useGetChatMessage,
@@ -29,13 +30,20 @@ export const ChatMessageOptions: React.FC<{
   const permission = useChatPermission(chatId);
   const canEditChat = canEdit(permission);
   const { data: feedback } = useGetChatMessage(messageId, {
-    select: ({ feedback }) => feedback,
+    select: useCallback((x: BusterChatMessage) => x?.feedback, []),
+    notifyOnChangeProps: ['data'],
   });
   const { data: updatedAt } = useGetChatMessage(messageId, {
-    select: ({ updated_at }) => updated_at,
+    select: useCallback((x: BusterChatMessage) => x?.updated_at, []),
+    notifyOnChangeProps: ['data'],
   });
   const { data: postProcessingMessage } = useGetChatMessage(messageId, {
-    select: ({ post_processing_message }) => post_processing_message,
+    select: useCallback((x: BusterChatMessage) => x?.post_processing_message, []),
+    notifyOnChangeProps: ['data'],
+  });
+  const { data: hasFinalReasoningMessage } = useGetChatMessage(messageId, {
+    select: useCallback((x: BusterChatMessage) => !!x?.final_reasoning_message, []),
+    notifyOnChangeProps: ['data'],
   });
 
   const updatedAtFormatted = useMemo(() => {
@@ -67,6 +75,8 @@ export const ChatMessageOptions: React.FC<{
     });
   });
 
+  if (!hasFinalReasoningMessage) return null;
+
   return (
     <div className="flex items-center gap-1">
       {canEditChat && (

apps/web/src/layouts/ChatLayout/ChatContent/ChatResponseMessages/ChatResponseMessage_File/ChatResponseMessage_DashboardFile.tsx

@@ -1,8 +1,7 @@
 import { type ChartType, DEFAULT_CHART_CONFIG } from '@buster/server-shared/metrics';
 import { Link, type RegisteredRouter } from '@tanstack/react-router';
 import { AnimatePresence, type MotionProps, motion } from 'framer-motion';
-import React, { useMemo } from 'react';
-import type { BusterChatResponseMessage_file } from '@/api/asset_interfaces/chat/chatMessageInterfaces';
+import React, { useCallback, useMemo } from 'react';
 import type { BusterDashboardResponse } from '@/api/asset_interfaces/dashboard';
 import { useGetDashboard, usePrefetchGetDashboardClient } from '@/api/buster_rest/dashboards';
 import { useGetMetricMemoized } from '@/api/buster_rest/metrics/metricQueryHelpers';
@@ -40,7 +39,12 @@ export const ChatResponseMessage_DashboardFile: React.FC<ResponseMessageFileProp
       isLoading,
     } = useGetDashboard(
       { id, versionNumber: version_number },
-      { select: ({ dashboard, metrics }) => ({ dashboard, metrics }) }
+      {
+        select: useCallback(
+          ({ dashboard, metrics }: BusterDashboardResponse) => ({ dashboard, metrics }),
+          []
+        ),
+      }
     );
 
     const hasMetrics = Object.keys(dashboardResponse?.metrics || {}).length > 0;

apps/web/src/layouts/ChatLayout/ChatContent/ChatResponseMessages/ChatResponseMessage_File/ChatResponseMessage_File.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react';
-import type { BusterChatResponseMessage_file } from '@/api/asset_interfaces';
+import React, { useCallback, useMemo } from 'react';
+import type { BusterChatMessage, BusterChatResponseMessage_file } from '@/api/asset_interfaces';
 import { useGetChatMessage } from '@/api/buster_rest/chats';
 import { createChatAssetRoute } from '@/lib/routes/createSimpleAssetRoute';
 import type { ILinkProps } from '@/types/routes';
@@ -11,7 +11,11 @@ import { useGetIsSelectedFile } from './useGetIsSelectedFile';
 export const ChatResponseMessage_File: React.FC<ChatResponseMessageProps> = React.memo(
   ({ isStreamFinished, chatId, responseMessageId, messageId }) => {
     const { data } = useGetChatMessage(messageId, {
-      select: (x) => x?.response_messages?.[responseMessageId],
+      select: useCallback(
+        (x: BusterChatMessage) => x?.response_messages?.[responseMessageId],
+        [responseMessageId]
+      ),
+      notifyOnChangeProps: ['data'],
     });
     const responseMessage = data as BusterChatResponseMessage_file;
     const { file_type } = responseMessage;

apps/web/src/layouts/ChatLayout/ChatContent/ChatResponseMessages/ChatResponseMessage_Text.tsx

@@ -1,16 +1,17 @@
-import React from 'react';
-import type { BusterChatResponseMessage_text } from '@/api/asset_interfaces';
+import React, { useCallback } from 'react';
+import type { BusterChatMessage, BusterChatResponseMessage_text } from '@/api/asset_interfaces';
 import { useGetChatMessage } from '@/api/buster_rest/chats';
 import AppMarkdownStreaming from '@/components/ui/streaming/AppMarkdownStreaming/AppMarkdownStreaming';
 import type { ChatResponseMessageProps } from './ChatResponseMessageSelector';
 
-//IF I use dynamic import it will decrease the bundle size by 200kb. The problem is with the AppCodeBlock
-// import { AppMarkdownDynamic as AppMarkdown } from '@/components/ui/typography/AppMarkdown/AppMarkdownDynamic';
-
 export const ChatResponseMessage_Text: React.FC<ChatResponseMessageProps> = React.memo(
   ({ responseMessageId, messageId, isStreamFinished }) => {
     const { data: responseMessage } = useGetChatMessage(messageId, {
-      select: (x) => x?.response_messages?.[responseMessageId],
+      select: useCallback(
+        (x: BusterChatMessage) => x?.response_messages?.[responseMessageId],
+        [responseMessageId]
+      ),
+      notifyOnChangeProps: ['data'],
     });
     const { message } = responseMessage as BusterChatResponseMessage_text;