Add streaming buffer message display to PlanChat

Introduces a new StreamingBufferMessage component to render live agent message streams in PlanChat. Updates PlanPage and WebSocketService to handle and buffer streaming agent messages, improving real-time feedback during plan generation.

Author: Fr4nc3

src/frontend/src/components/content/PlanChat.tsx

@@ -31,12 +31,15 @@ import renderPlanResponse from "./streaming/StreamingPlanResponse";
 import renderThinkingState from "./streaming/StreamingPlanState";
 import ContentNotFound from "../NotFound/ContentNotFound";
 import PlanChatBody from "./PlanChatBody";
+import renderBufferMessage from "./streaming/StreamingBufferMessage";
 interface SimplifiedPlanChatProps extends PlanChatProps {
   onPlanReceived?: (planData: MPlanData) => void;
   initialTask?: string;
   planApprovalRequest: MPlanData | null;
   waitingForPlan: boolean;
   messagesContainerRef: React.RefObject<HTMLDivElement>;
+  streamingMessageBuffer: string;
+  agentMessages: any[];
 }
 
 const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
@@ -50,7 +53,9 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
   initialTask,
   planApprovalRequest,
   waitingForPlan,
-  messagesContainerRef
+  messagesContainerRef,
+  streamingMessageBuffer,
+  agentMessages
 
 }) => {
   const navigate = useNavigate();
@@ -154,6 +159,9 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
 
         {/* Plan response with all information */}
         {renderPlanResponse(planApprovalRequest, handleApprovePlan, handleRejectPlan, processingApproval, showApprovalButtons)}
+
+        {/* Streaming plan updates */}
+        {renderBufferMessage(streamingMessageBuffer)}
       </div>
 
       {/* Chat Input - only show if no plan is waiting for approval */}

src/frontend/src/components/content/PlanChatBody.tsx

@@ -15,7 +15,6 @@ const PlanChatBody: React.FC<SimplifiedPlanChatProps> = ({
     OnChatSubmit,
     showChatInput,
     waitingForPlan
-
 }) => {
     if (!showChatInput) {
         return null;

src/frontend/src/components/content/streaming/StreamingBufferMessage.tsx

@@ -0,0 +1,32 @@
+import {
+    Accordion,
+    AccordionItem,
+    AccordionHeader,
+    AccordionPanel,
+} from '@fluentui/react-components';
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypePrism from "rehype-prism";
+import { useState } from "react";
+// Render AI thinking/planning state
+const renderBufferMessage = (streamingMessageBuffer: string) => {
+    if (!streamingMessageBuffer || streamingMessageBuffer.trim() === "") return null;
+    return (
+        <Accordion collapsible defaultOpenItems="one">
+            <AccordionItem value="one">
+
+                <AccordionPanel>
+                    <ReactMarkdown
+                        remarkPlugins={[remarkGfm]}
+                        rehypePlugins={[rehypePrism]}
+                    >
+                        {streamingMessageBuffer}
+                    </ReactMarkdown>
+                </AccordionPanel>
+            </AccordionItem>
+        </Accordion>
+
+    );
+};
+
+export default renderBufferMessage;

src/frontend/src/pages/PlanPage.tsx

@@ -53,10 +53,11 @@ const PlanPage: React.FC = () => {
     // WebSocket connection state
     const [wsConnected, setWsConnected] = useState(false);
     const [streamingMessages, setStreamingMessages] = useState<StreamingPlanUpdate[]>([]);
-
+    const [streamingMessageBuffer, setStreamingMessageBuffer] = useState<string>("");
     // RAI Error state
     const [raiError, setRAIError] = useState<RAIErrorData | null>(null);
 
+    const [agentMessages, setAgentMessages] = useState<any[]>([]);
     // Team config state
     const [teamConfig, setTeamConfig] = useState<TeamConfig | null>(null);
     const [loadingTeamConfig, setLoadingTeamConfig] = useState(true);
@@ -72,7 +73,11 @@ const PlanPage: React.FC = () => {
     const scrollToBottom = useCallback(() => {
         setTimeout(() => {
             if (messagesContainerRef.current) {
-                messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+                //messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+                messagesContainerRef.current?.scrollTo({
+                    top: messagesContainerRef.current.scrollHeight,
+                    behavior: "smooth",
+                });
             }
         }, 100);
     }, []);
@@ -116,6 +121,29 @@ const PlanPage: React.FC = () => {
 
         return () => unsubscribe();
     }, [scrollToBottom]); //onPlanReceived, scrollToBottom
+
+
+    useEffect(() => {
+        const unsubscribe = webSocketService.on(WebsocketMessageType.AGENT_MESSAGE_STREAMING, (streamingMessage: any) => {
+            // console.log('📋 Streaming Message', streamingMessage);
+            setStreamingMessageBuffer(prev => prev + streamingMessage.data.content);
+            scrollToBottom();
+
+        });
+
+        return () => unsubscribe();
+    }, [scrollToBottom]); //onPlanReceived, scrollToBottom
+
+    useEffect(() => {
+        const unsubscribe = webSocketService.on(WebsocketMessageType.AGENT_MESSAGE, (agentMessage: any) => {
+            console.log('📋 Agent Message', agentMessage);
+            setAgentMessages(prev => [...prev, agentMessage]);
+            scrollToBottom();
+        });
+
+        return () => unsubscribe();
+    }, [scrollToBottom]); //onPlanReceived, scrollToBottom
+
     // Loading message rotation effect
     useEffect(() => {
         let interval: NodeJS.Timeout;
@@ -429,19 +457,6 @@ const PlanPage: React.FC = () => {
                                 </PanelRightToggles>
                             </ContentToolbar>
 
-                            {/* Show RAI error if present */}
-                            {raiError && (
-                                <div style={{ padding: '16px 24px 0' }}>
-                                    <RAIErrorCard
-                                        error={raiError}
-                                        onRetry={() => {
-                                            setRAIError(null);
-                                        }}
-                                        onDismiss={() => setRAIError(null)}
-                                    />
-                                </div>
-                            )}
-
                             <PlanChat
                                 planData={planData}
                                 OnChatSubmit={handleOnchatSubmit}
@@ -455,6 +470,9 @@ const PlanPage: React.FC = () => {
                                 planApprovalRequest={planApprovalRequest}
                                 waitingForPlan={waitingForPlan}
                                 messagesContainerRef={messagesContainerRef}
+                                streamingMessageBuffer={streamingMessageBuffer}
+                                agentMessages={agentMessages}
+
                             />
                         </>
                     )}

src/frontend/src/services/WebSocketService.tsx

@@ -165,13 +165,14 @@ class WebSocketService {
     }
 
     private handleMessage(message: StreamMessage): void {
-        console.log('WebSocket message received:', message);
+
         const currentPlanIds = Array.from(this.planSubscriptions);
         const firstPlanId = currentPlanIds[0];
 
         switch (message.type) {
             case WebsocketMessageType.PLAN_APPROVAL_REQUEST: {
                 console.log("enter plan approval request");
+                console.log('WebSocket message received:', message);
                 const parsedData = PlanDataService.parsePlanApprovalRequest(message.data);
                 if (parsedData) {
                     const structuredMessage: ParsedPlanApprovalRequest = {
@@ -189,44 +190,18 @@ class WebSocketService {
 
             case WebsocketMessageType.AGENT_MESSAGE: {
                 if (message.data) {
-                    const transformed: StreamMessage = {
-                        ...message,
-                        data: {
-                            plan_id: firstPlanId,
-                            agent_name: message.data.agent_name || 'Unknown Agent',
-                            content: message.data.content || '',
-                            message_type: 'thinking',
-                            status: 'in_progress',
-                            timestamp: Date.now() / 1000
-                        }
-                    };
+                    console.log('WebSocket message received:', message);
+                    const transformed = PlanDataService.parseAgentMessage(message);
                     this.emit(WebsocketMessageType.AGENT_MESSAGE, transformed);
-                } else {
-                    this.emit(WebsocketMessageType.AGENT_MESSAGE, message);
+
                 }
                 break;
             }
 
             case WebsocketMessageType.AGENT_MESSAGE_STREAMING: {
                 if (message.data) {
-                    const isFinal = !!message.data.is_final;
-                    const transformed: StreamMessage = {
-                        type: WebsocketMessageType.AGENT_MESSAGE,
-                        data: {
-                            plan_id: message.data.plan_id || firstPlanId,
-                            agent_name: message.data.agent_name || 'Unknown Agent',
-                            content: message.data.content || '',
-                            message_type: isFinal ? 'result' : 'thinking',
-                            status: isFinal ? 'completed' : 'in_progress',
-                            timestamp: Date.now() / 1000,
-                            is_final: isFinal
-                        }
-                    };
-                    if (!transformed.data.plan_id) {
-                        console.warn('Streaming message missing plan_id and no subscription context.');
-                        break;
-                    }
-                    this.emit(WebsocketMessageType.AGENT_MESSAGE, transformed);
+                    const streamedMessage = PlanDataService.parseAgentMessageStreaming(message);
+                    this.emit(WebsocketMessageType.AGENT_MESSAGE_STREAMING, streamedMessage);
                 }
                 break;
             }