black box message update

web/src/api/query_keys/chat.ts

@@ -31,9 +31,18 @@ const chatsGetList = (filters?: GetChatListParams) =>
     staleTime: 10 * 1000
   });
 
+const chatsBlackBoxMessages = (messageId: string) =>
+  queryOptions<string | null>({
+    queryKey: ['chats', 'messages', messageId, 'black-box'] as const,
+    staleTime: Infinity,
+    enabled: false,
+    queryFn: () => Promise.resolve(null)
+  });
+
 export const chatQueryKeys = {
   chatsGetChat,
   chatsGetList,
   chatsMessages,
-  chatsMessagesFetchingData
+  chatsMessagesFetchingData,
+  chatsBlackBoxMessages
 };

web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/page.tsx

@@ -1,5 +1,5 @@
 'use client';
 
 export default function Page() {
-  return <>If you are seeing this there is probably an error</>; //we need this page to be able to load the chat page
+  return <>Chat page: this there is probably an error</>;
 }

web/src/context/Chats/NewChatProvider/useBlackBoxMessage.ts

@@ -1,28 +1,35 @@
+'use client';
+
 import { useMemoizedFn } from 'ahooks';
 import sample from 'lodash/sample';
 import { useBusterChatContextSelector } from '../ChatProvider';
 import random from 'lodash/random';
 import last from 'lodash/last';
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 import { IBusterChatMessage } from '../interfaces';
 import { ChatEvent_GeneratingReasoningMessage } from '@/api/buster_socket/chats';
+import { useQueryClient } from '@tanstack/react-query';
+import { queryKeys } from '@/api/query_keys';
 
 export const useBlackBoxMessage = () => {
-  const [boxBoxMessages, setBoxBoxMessages] = useState<Record<string, string | null>>({});
-  const timeoutRef = useRef<Record<string, NodeJS.Timeout>>({});
+  const timeoutRef = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
   const getChatMessageMemoized = useBusterChatContextSelector((x) => x.getChatMessageMemoized);
+  const queryClient = useQueryClient();
 
   const removeAutoThought = useMemoizedFn(({ messageId }: { messageId: string }) => {
     if (timeoutRef.current[messageId]) {
       clearTimeout(timeoutRef.current[messageId]);
       delete timeoutRef.current[messageId];
     }
-    setBoxBoxMessages((x) => ({ ...x, [messageId]: null }));
+
+    const options = queryKeys.chatsBlackBoxMessages(messageId);
+    queryClient.setQueryData(options.queryKey, null);
   });
 
   const addAutoThought = useMemoizedFn(({ messageId }: { messageId: string }) => {
     const randomThought = getRandomThought();
-    setBoxBoxMessages((x) => ({ ...x, [messageId]: randomThought }));
+    const options = queryKeys.chatsBlackBoxMessages(messageId);
+    queryClient.setQueryData(options.queryKey, randomThought);
   });
 
   const checkAutoThought = useMemoizedFn(

web/src/context/Chats/NewChatProvider/useChatStreamMessage.ts

@@ -1,12 +1,6 @@
 import { useMemoizedFn } from 'ahooks';
 import { useBusterChatContextSelector } from '../ChatProvider';
-import type {
-  BusterChat,
-  BusterChatMessageReasoning_files,
-  BusterChatMessageReasoning_text,
-  BusterChatResponseMessage_text,
-  BusterChatMessageReasoning_file
-} from '@/api/asset_interfaces';
+import type { BusterChat } from '@/api/asset_interfaces';
 import type {
   ChatEvent_GeneratingReasoningMessage,
   ChatEvent_GeneratingResponseMessage,
@@ -38,7 +32,7 @@ export const useChatStreamMessage = () => {
   const chatRefMessages = useRef<Record<string, IBusterChatMessage>>({});
   const [isPending, startTransition] = useTransition();
 
-  const { checkAutoThought } = useBlackBoxMessage();
+  const { checkAutoThought, removeAutoThought } = useBlackBoxMessage();
 
   const onUpdateChatMessageTransition = useMemoizedFn(
     (chatMessage: Parameters<typeof onUpdateChatMessage>[0]) => {
@@ -71,6 +65,7 @@ export const useChatStreamMessage = () => {
     chatRef.current[iChat.id] = iChat;
     normalizeChatMessage(iChatMessages);
     onUpdateChat(iChat);
+    removeAutoThought({ messageId: iChat.message_ids[iChat.message_ids.length - 1] });
   });
 
   const stopChatCallback = useMemoizedFn((chatId: string) => {

web/src/controllers/ReasoningController/ReasoningController.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { useChatIndividualContextSelector } from '@chatLayout/ChatContext';
 import { useMessageIndividual } from '@/context/Chats';
 import { ReasoningMessageSelector } from './ReasoningMessages';
+import { BlackBoxMessage } from './ReasoningMessages/ReasoningBlackBoxMessage';
 
 interface ReasoningControllerProps {
   chatId: string;
@@ -16,7 +17,7 @@ export const ReasoningController: React.FC<ReasoningControllerProps> = ({ chatId
   const isCompletedStream = useMessageIndividual(messageId, (x) => x?.isCompletedStream);
 
   if (!hasChat || !reasoningMessageIds)
-    return <>If you are seeing this there is probably an error...</>;
+    return <>ReasoningController: If you are seeing this there is probably an error...</>;
 
   return (
     <div className="h-full flex-col space-y-2 overflow-y-auto p-5">
@@ -29,6 +30,8 @@ export const ReasoningController: React.FC<ReasoningControllerProps> = ({ chatId
           messageId={messageId}
         />
       ))}
+
+      <BlackBoxMessage messageId={messageId} />
     </div>
   );
 };

web/src/controllers/ReasoningController/ReasoningMessages/ReasoningBlackBoxMessage.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+import { queryKeys } from '@/api/query_keys';
+import { BarContainer } from './BarContainer';
+import { Text } from '@/components/ui/typography';
+
+export const BlackBoxMessage: React.FC<{ messageId: string }> = React.memo(({ messageId }) => {
+  const blackBoxMessage = useQuery({
+    ...queryKeys.chatsBlackBoxMessages(messageId),
+    notifyOnChangeProps: ['data']
+  }).data;
+
+  if (blackBoxMessage) {
+    <BarContainer
+      showBar={false}
+      status={'loading'}
+      isCompletedStream={false}
+      title={blackBoxMessage}
+      secondaryTitle={''}>
+      <Text>{blackBoxMessage}</Text>
+    </BarContainer>;
+  }
+
+  return null;
+});
+
+BlackBoxMessage.displayName = 'BlackBoxMessage';

web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseReasoning.tsx

@@ -6,6 +6,8 @@ import { AnimatePresence } from 'framer-motion';
 import { Text } from '@/components/ui/typography';
 import { useChatLayoutContextSelector } from '../../../ChatLayoutContext';
 import { useMessageIndividual } from '@/context/Chats';
+import { useQuery } from '@tanstack/react-query';
+import { queryKeys } from '@/api/query_keys';
 
 const animations = {
   initial: { opacity: 0 },
@@ -28,11 +30,17 @@ export const ChatResponseReasoning: React.FC<{
   const selectedFileType = useChatLayoutContextSelector((x) => x.selectedFileType);
   const isReasonginFileSelected = selectedFileType === 'reasoning' && isCompletedStream;
 
+  const blackBoxMessage = useQuery({
+    ...queryKeys.chatsBlackBoxMessages(messageId),
+    notifyOnChangeProps: ['data']
+  }).data;
+
   const text: string = useMemo(() => {
     if (finalReasoningMessage) return finalReasoningMessage;
+    if (blackBoxMessage) return blackBoxMessage;
     if (lastMessageTitle) return lastMessageTitle;
     return lastMessageTitle || 'Thinking...';
-  }, [lastMessageTitle, finalReasoningMessage]);
+  }, [lastMessageTitle, finalReasoningMessage, blackBoxMessage]);
 
   const onClickReasoning = useMemoizedFn(() => {
     onSetSelectedFile({
@@ -41,8 +49,6 @@ export const ChatResponseReasoning: React.FC<{
     });
   });
 
-  console.log(isReasonginFileSelected, isCompletedStream);
-
   return (
     <AnimatePresence initial={!isCompletedStream} mode="wait">
       <motion.div {...animations} key={text} className="mb-3.5 w-fit" onClick={onClickReasoning}>