Fix useRef typo and update chat message reference

src/frontend/src/components/newChatView/chatMessage/index.tsx

@@ -1,5 +1,5 @@
 import Convert from "ansi-to-html";
-import { useEffect, useMemo, useState,useRef } from "react";
+import { useEffect, useMemo, useState, useRef } from "react";
 import Markdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
 import remarkGfm from "remark-gfm";
@@ -32,6 +32,13 @@ export default function ChatMessage({
   const [isStreaming, setIsStreaming] = useState(false);
   const eventSource = useRef<EventSource | undefined>(undefined);
   const updateFlowPool = useFlowStore((state) => state.updateFlowPool);
+  const chatMessageRef = useRef(chatMessage);
+
+  // Sync ref with state
+  useEffect(() => {
+    chatMessageRef.current = chatMessage;
+  }, [chatMessage]);
+
 
 
   // The idea now is that chat.stream_url MAY be a URL if we should stream the output of the chat
@@ -63,28 +70,26 @@ export default function ChatMessage({
   };
 
 
-
   useEffect(() => {
-    console.log(streamUrl)
+    console.log("chatMessage", chatMessage);
-    if (streamUrl&& !isStreaming) {
+    if (streamUrl && !isStreaming) {
       streamChunks(streamUrl)
         .then(() => {
           if (updateChat) {
-            console.log("rodou")
+            updateChat(chat, chatMessageRef.current);
-            updateChat(chat, chatMessage);
           }
         })
         .catch((error) => {
           console.error(error);
         });
     }
-  }, [streamUrl,chatMessage]);
+  }, [streamUrl, chatMessage]);
 
-  useEffect(()=>{
+  useEffect(() => {
     return () => {
       eventSource.current?.close();
     }
-  },[])
+  }, [])
 
   useEffect(() => {
     const element = document.getElementById("last-chat-message");
@@ -213,7 +218,7 @@ dark:prose-invert"
                                       },
                                     ]}
                                     activeTab={"0"}
-                                    setActiveTab={() => {}}
+                                    setActiveTab={() => { }}
                                   />
                                 ) : (
                                   <code className={className} {...props}>

src/frontend/src/components/newChatView/index.tsx

@@ -123,7 +123,6 @@ export default function NewChatView({
     ) {
       if (message === "") return;
       chat.message = message;
-      console.log(message)
     // chat is one of the chatHistory
     updateFlowPool(chat.componentId,{message,sender_name:chat.sender_name??"Bot",sender:"Machine"})
     // setChatHistory((oldChatHistory) => {