streaming text

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

@@ -1,5 +1,25 @@
 'use client';
 
-export default function Page() {
-  return <>Chat page: this there is probably an error</>;
+import { StatusCard } from '@/components/ui/card/StatusCard';
+import { ReasoningController } from '@/controllers/ReasoningController';
+import { useChatIndividualContextSelector } from '@/layouts/ChatLayout/ChatContext';
+
+export default function Page(params: { params: { chatId: string } }) {
+  const selectedFileId = useChatIndividualContextSelector((x) => x.selectedFileId);
+  const selectedFileType = useChatIndividualContextSelector((x) => x.selectedFileType);
+
+  console.log('selectedFileId', selectedFileId);
+  console.log('selectedFileType', selectedFileType);
+
+  if (selectedFileId && selectedFileType === 'reasoning') {
+    return <ReasoningController chatId={params.params.chatId} messageId={selectedFileId} />;
+  }
+
+  return (
+    <StatusCard
+      className="text-red-500"
+      title="Error"
+      message="If you are seeing this, tell Nate and screenshot this whole page including the URL and logs..."
+    />
+  );
 }

web/src/components/ui/streaming/StreamingMessage_Text.tsx

@@ -55,7 +55,8 @@ const AnimatedSpan: React.FC<{ children: React.ReactNode; isCompletedStream: boo
   isCompletedStream
 }) => {
   return (
-    <span className={cn(!isCompletedStream ? 'animate-in fade-in duration-700' : '')}>
+    <span
+      className={cn('leading-1.3', !isCompletedStream ? 'animate-in fade-in duration-700' : '')}>
       {children}
     </span>
   );

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

@@ -24,7 +24,6 @@ export const useBlackBoxMessage = () => {
   });
 
   const removeBlackBoxMessage = useMemoizedFn(({ messageId }: { messageId: string }) => {
-    console.log('removeBlackBoxMessage', messageId);
     clearTimeoutRef(messageId);
 
     const options = queryKeys.chatsBlackBoxMessages(messageId);
@@ -58,8 +57,6 @@ export const useBlackBoxMessage = () => {
       if (!message) return;
       if (!timeoutRef.current[messageId]) return;
 
-      console.log('loopAutoThought', messageId, !!message);
-
       const isMessageCompletedStream = !!message?.isCompletedStream;
       const lastReasoningMessageId = last(message?.reasoning_message_ids) || '';
       const lastReasoningMessage = message?.reasoning_messages[lastReasoningMessageId];

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

@@ -43,7 +43,7 @@ export const useChatStreamMessage = () => {
       })!;
       chatRefMessages.current[chatMessage.id] = iChatMessage;
 
-      onUpdateChatMessage(iChatMessage!);
+      onUpdateChatMessage(iChatMessage);
 
       startTransition(() => {
         //

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

@@ -11,7 +11,7 @@ export const BarContainer: React.FC<{
   showBar: boolean;
   status: BusterChatMessageReasoning_status;
   isCompletedStream: boolean;
-  children: React.ReactNode;
+  children?: React.ReactNode;
   title: string;
   secondaryTitle?: string;
   contentClassName?: string;
@@ -41,7 +41,7 @@ const VerticalBarContainer: React.FC<{
   status: BusterChatMessageReasoning_status;
 }> = React.memo(({ showBar, status }) => {
   return (
-    <div className="ml-2 flex w-4 min-w-4 flex-col items-center">
+    <div className="ml-2 flex w-5 min-w-5 flex-col items-center">
       <StatusIndicator status={status} />
       <VerticalBar show={showBar} />
     </div>
@@ -107,13 +107,18 @@ const AnimatedThoughtTitle = React.memo(
     type: 'tertiary' | 'default';
     className?: string;
   }) => {
+    const isSecondaryTitle = type === 'tertiary';
     return (
       <AnimatePresence initial={false} mode="wait">
         {title && (
           <motion.div className="flex" {...animations} key={title}>
             <Text
               size="sm"
-              className={cn(`whitespace-nowrap @[170px]:hidden`, className)}
+              className={cn(
+                `whitespace-nowrap`,
+                isSecondaryTitle ? '@[170px]:hidden' : '',
+                className
+              )}
               variant={type}>
               {title}
             </Text>

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

@@ -13,17 +13,18 @@ export const BlackBoxMessage: React.FC<{ messageId: string }> = React.memo(({ me
   }).data;
 
   if (blackBoxMessage) {
-    <BarContainer
-      showBar={false}
-      status={'loading'}
-      isCompletedStream={false}
-      title={blackBoxMessage}
-      secondaryTitle={''}>
-      <Text>{blackBoxMessage}</Text>
-    </BarContainer>;
+    return (
+      <BarContainer
+        showBar={false}
+        status={'loading'}
+        isCompletedStream={false}
+        title={blackBoxMessage}
+        secondaryTitle={''}
+      />
+    );
   }
 
-  return <span className="text-red-500">no black box</span>;
+  return <span className="text-red-500">no black box {messageId}</span>;
 });
 
 BlackBoxMessage.displayName = 'BlackBoxMessage';

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

@@ -37,7 +37,7 @@ export const ChatResponseReasoning: React.FC<{
 
   const text: string = useMemo(() => {
     if (finalReasoningMessage) return finalReasoningMessage;
-    if (blackBoxMessage) return blackBoxMessage;
+    if (blackBoxMessage) return blackBoxMessage + '⬛️⬛️';
     if (lastMessageTitle) return lastMessageTitle;
     return lastMessageTitle || 'Thinking...';
   }, [lastMessageTitle, finalReasoningMessage, blackBoxMessage]);

web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts

@@ -51,7 +51,9 @@ export const useSelectedFileAndLayout = ({
     setRenderViewLayoutKey('both');
     setSelectedFile(file);
     await onChangePage(route);
+
     startTransition(() => {
+      onChangePage(route); //this is hack for now...
       animateOpenSplitter('both');
     });
   });