From 42338a829b375d51d06e0ef3e719978e1180ceab Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 27 Feb 2024 20:50:22 -0300
Subject: [PATCH] Fix useRef typo and update chat message reference

---
 .../newChatView/chatMessage/index.tsx         | 77 ++++++++++---------
 .../src/components/newChatView/index.tsx      |  1 -
 2 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/src/frontend/src/components/newChatView/chatMessage/index.tsx b/src/frontend/src/components/newChatView/chatMessage/index.tsx
index 59befcb1b..8b2c181f5 100644
--- a/src/frontend/src/components/newChatView/chatMessage/index.tsx
+++ b/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)
-    if (streamUrl&& !isStreaming) {
+    console.log("chatMessage", chatMessage);
+    if (streamUrl && !isStreaming) {
       streamChunks(streamUrl)
         .then(() => {
           if (updateChat) {
-            console.log("rodou")
-            updateChat(chat, chatMessage);
+            updateChat(chat, chatMessageRef.current);
           }
         })
         .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}>
@@ -270,33 +275,33 @@ dark:prose-invert"
                 <span className="prose text-primary word-break-break-word dark:prose-invert">
                   {promptOpen
                     ? template?.split("\n")?.map((line, index) => {
-                        const regex = /{([^}]+)}/g;
-                        let match;
-                        let parts: Array<JSX.Element | string> = [];
-                        let lastIndex = 0;
-                        while ((match = regex.exec(line)) !== null) {
-                          // Push text up to the match
-                          if (match.index !== lastIndex) {
-                            parts.push(line.substring(lastIndex, match.index));
-                          }
-                          // Push div with matched text
-                          if (chat.message[match[1]]) {
-                            parts.push(
-                              <span className="chat-message-highlight">
-                                {chat.message[match[1]]}
-                              </span>
-                            );
-                          }
+                      const regex = /{([^}]+)}/g;
+                      let match;
+                      let parts: Array<JSX.Element | string> = [];
+                      let lastIndex = 0;
+                      while ((match = regex.exec(line)) !== null) {
+                        // Push text up to the match
+                        if (match.index !== lastIndex) {
+                          parts.push(line.substring(lastIndex, match.index));
+                        }
+                        // Push div with matched text
+                        if (chat.message[match[1]]) {
+                          parts.push(
+                            <span className="chat-message-highlight">
+                              {chat.message[match[1]]}
+                            </span>
+                          );
+                        }
 
-                          // Update last index
-                          lastIndex = regex.lastIndex;
-                        }
-                        // Push text after the last match
-                        if (lastIndex !== line.length) {
-                          parts.push(line.substring(lastIndex));
-                        }
-                        return <p>{parts}</p>;
-                      })
+                        // Update last index
+                        lastIndex = regex.lastIndex;
+                      }
+                      // Push text after the last match
+                      if (lastIndex !== line.length) {
+                        parts.push(line.substring(lastIndex));
+                      }
+                      return <p>{parts}</p>;
+                    })
                     : chatMessage}
                 </span>
               </>
diff --git a/src/frontend/src/components/newChatView/index.tsx b/src/frontend/src/components/newChatView/index.tsx
index b1b41b8fc..72a203cb8 100644
--- a/src/frontend/src/components/newChatView/index.tsx
+++ b/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) => {