From 4c2f3b80dc2443da8c326857dd4bbd9ec186ac98 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Thu, 4 May 2023 19:25:24 -0300 Subject: [PATCH 1/5] update ws error handle --- .../chatComponent/chatTrigger/index.tsx | 2 +- .../src/components/chatComponent/index.tsx | 2 +- src/frontend/src/modals/chatModal/index.tsx | 655 +++++++++--------- 3 files changed, 318 insertions(+), 341 deletions(-) diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx index 9d5f67e0c..61c1b4a3e 100644 --- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx +++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx @@ -5,7 +5,7 @@ import { PopUpContext } from "../../../contexts/popUpContext"; import { useContext } from "react"; import ChatModal from "../../../modals/chatModal"; -export default function ChatTrigger({open, setOpen,flow}){ +export default function ChatTrigger({open, setOpen}){ const {openPopUp} = useContext(PopUpContext) return( - + ); } diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx index dd82ae313..04cf416d3 100644 --- a/src/frontend/src/modals/chatModal/index.tsx +++ b/src/frontend/src/modals/chatModal/index.tsx @@ -1,13 +1,7 @@ import { Dialog, Transition } from "@headlessui/react"; -import { - ChatBubbleOvalLeftEllipsisIcon, - LockClosedIcon, - PaperAirplaneIcon, -} from "@heroicons/react/24/outline"; +import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline"; import { Fragment, useContext, useEffect, useRef, useState } from "react"; -import { PopUpContext } from "../../contexts/popUpContext"; import { FlowType, NodeType } from "../../types/flow"; -import { TabsContext } from "../../contexts/tabsContext"; import { alertContext } from "../../contexts/alertContext"; import { toNormalCase } from "../../utils"; import { typesContext } from "../../contexts/typesContext"; @@ -20,356 +14,339 @@ import ChatInput from "./chatInput"; const _ = require("lodash"); export default function ChatModal({ - flow, - open, - setOpen, + flow, + open, + setOpen, }: { - open: boolean; - setOpen: Function; - flow: FlowType; + open: boolean; + setOpen: Function; + flow: FlowType; }) { - const [chatValue, setChatValue] = useState(""); - const [chatHistory, setChatHistory] = useState([]); - const { reactFlowInstance } = useContext(typesContext); - const { setErrorData, setNoticeData } = useContext(alertContext); - const [ws, setWs] = useState(null); - const [lockChat, setLockChat] = useState(false); - const addChatHistory = ( - message: string, - isSend: boolean, - thought?: string, - files?: Array - ) => { - setChatHistory((old) => { - let newChat = _.cloneDeep(old); - if (files) { - newChat.push({ message, isSend, files, thought }); - } else if (thought) { - newChat.push({ message, isSend, thought }); - } else { - newChat.push({ message, isSend }); - } - return newChat; - }); - }; + const [chatValue, setChatValue] = useState(""); + const [chatHistory, setChatHistory] = useState([]); + const { reactFlowInstance } = useContext(typesContext); + const { setErrorData, setNoticeData } = useContext(alertContext); + const [ws, setWs] = useState(null); + const [lockChat, setLockChat] = useState(false); + const addChatHistory = ( + message: string, + isSend: boolean, + thought?: string, + files?: Array + ) => { + setChatHistory((old) => { + let newChat = _.cloneDeep(old); + if (files) { + newChat.push({ message, isSend, files, thought }); + } else if (thought) { + newChat.push({ message, isSend, thought }); + } else { + newChat.push({ message, isSend }); + } + return newChat; + }); + }; - function connectWS() { - console.log("conectou"); - try { - const urlWs = - process.env.NODE_ENV === "development" - ? `ws://localhost:7860/chat/${flow.id}` - : `${window.location.protocol === "https:" ? "wss" : "ws"}://${ - window.location.host - }/chat/${flow.id}`; + function connectWS() { + try { + const urlWs = + process.env.NODE_ENV === "development" + ? `ws://localhost:7860/chat/${flow.id}` + : `${window.location.protocol === "https:" ? "wss" : "ws"}://${ + window.location.host + }/chat/${flow.id}`; - const newWs = new WebSocket(urlWs); - newWs.onopen = () => { - console.log("WebSocket connection established!"); - }; - newWs.onmessage = (event) => { - try { - setLockChat(false); - const data = JSON.parse(event.data); - console.log("Received data:", data); - //get chat history - if (Array.isArray(data)) { - console.log(data); + const newWs = new WebSocket(urlWs); + newWs.onopen = () => { + console.log("WebSocket connection established!"); + }; + newWs.onmessage = (event) => { + setLockChat(false); + const data = JSON.parse(event.data); + console.log("Received data:", data); + //get chat history + if (Array.isArray(data)) { + console.log(data); - setChatHistory((_) => { - let newChatHistory: ChatMessageType[] = []; - data.forEach( - (chatItem: { - intermediate_steps?: "string"; - is_bot: boolean; - message: string; - type: string; - files?: Array; - }) => { - if (chatItem.message) { - newChatHistory.push( - chatItem.files - ? { - isSend: !chatItem.is_bot, - message: chatItem.message, - thought: chatItem.intermediate_steps, - files: chatItem.files, - } - : { - isSend: !chatItem.is_bot, - message: chatItem.message, - thought: chatItem.intermediate_steps, - } - ); - } - } - ); - return newChatHistory; - }); - } - if (data.type === "end") { - if (data.files) { - addChatHistory( - data.message, - false, - data.intermediate_steps, - data.files - ); - } else { - addChatHistory(data.message, false, data.intermediate_steps); - } - } - if (data.type == "file") { - console.log(data); - } - } catch (error) { - if (event.data !== "Error: 1005") { - setErrorData({ title: event.data }); - newWs.close(); - connectWS(); - } - } - }; - newWs.onclose = (_) => { - if (open) { - setLockChat(false); - setTimeout(() => { - connectWS(); - }, 1000); - } - }; - newWs.onerror = (ev) => { - console.log(ev, "error"); - }; - setWs(newWs); + setChatHistory((_) => { + let newChatHistory: ChatMessageType[] = []; + data.forEach( + (chatItem: { + intermediate_steps?: "string"; + is_bot: boolean; + message: string; + type: string; + files?: Array; + }) => { + if (chatItem.message) { + newChatHistory.push( + chatItem.files + ? { + isSend: !chatItem.is_bot, + message: chatItem.message, + thought: chatItem.intermediate_steps, + files: chatItem.files, + } + : { + isSend: !chatItem.is_bot, + message: chatItem.message, + thought: chatItem.intermediate_steps, + } + ); + } + } + ); + return newChatHistory; + }); + } + if (data.type === "end") { + if (data.files) { + addChatHistory( + data.message, + false, + data.intermediate_steps, + data.files + ); + } else { + addChatHistory(data.message, false, data.intermediate_steps); + } + } + if (data.type === "file") { + console.log(data); + } + }; + newWs.onclose = (_) => { + setLockChat(false); + setTimeout(() => { + connectWS(); + }, 1000); + }; + newWs.onerror = (ev) => { + console.log(ev, "error"); + }; + setWs(newWs); - return newWs; - } catch { - setErrorData({ - title: "There was an error on web connection, please: ", - list: [ - "refresh the page", - "use a new flow tab", - "check if the backend is up", - ], - }); - } - } + return newWs; + } catch { + setErrorData({ + title: "There was an error on web connection, please: ", + list: [ + "Refresh the page", + "Use a new flow tab", + "Check if the backend is up", + ], + }); + } + } - useEffect(() => { - if (ws && (ws.readyState === ws.CLOSED || ws.readyState === ws.CLOSING)) { - let newWs = connectWS(); - return () => { - console.log("trigger"); - newWs.close(); - }; - } - }, [lockChat]); + useEffect(() => { + let newWs = connectWS(); + return () => { + console.log("trigger"); + newWs.close(); + }; + }, []); - useEffect(() => { - let newWs = connectWS(); - return () => { - console.log("trigger"); - newWs.close(); - }; - }, []); + useEffect(() => { + if (ws && (ws.readyState === ws.CLOSED || ws.readyState === ws.CLOSING)) { + let newWs = connectWS(); + return () => { + console.log("trigger"); + newWs.close(); + }; + } + }, [lockChat]); - async function sendAll(data: sendAllProps) { - try { - if (ws) { - ws.send(JSON.stringify(data)); - } - } catch (error) { - setErrorData({ - title: "There was an erro sending the message", - list: [error.message], - }); - setChatValue(data.message); - connectWS(); - } - } + async function sendAll(data: sendAllProps) { + try { + if (ws) { + ws.send(JSON.stringify(data)); + } + } catch (error) { + setErrorData({ + title: "There was an erro sending the message", + list: [error.message], + }); + setChatValue(data.message); + connectWS(); + } + } - useEffect(() => { - if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" }); - }, [chatHistory]); + useEffect(() => { + if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" }); + }, [chatHistory]); - useEffect(() => { - if (ws && ws.readyState === ws.CLOSED) { - setLockChat(false); - } - }, [lockChat]); + useEffect(() => { + if (ws && ws.readyState === ws.CLOSED) { + setLockChat(false); + } + }, [lockChat]); - function validateNode(n: NodeType): Array { - if (!n.data?.node?.template || !Object.keys(n.data.node.template)) { - setNoticeData({ - title: - "We've noticed a potential issue with a node in the flow. Please review it and, if necessary, submit a bug report with your exported flow file. Thank you for your help!", - }); - return []; - } + function validateNode(n: NodeType): Array { + if (!n.data?.node?.template || !Object.keys(n.data.node.template)) { + setNoticeData({ + title: + "We've noticed a potential issue with a node in the flow. Please review it and, if necessary, submit a bug report with your exported flow file. Thank you for your help!", + }); + return []; + } - const { - type, - node: { template }, - } = n.data; + const { + type, + node: { template }, + } = n.data; - return Object.keys(template).reduce( - (errors: Array, t) => - errors.concat( - template[t].required && - template[t].show && - (!template[t].value || template[t].value === "") && - !reactFlowInstance - .getEdges() - .some( - (e) => - e.targetHandle.split("|")[1] === t && - e.targetHandle.split("|")[2] === n.id - ) - ? [ - `${type} is missing ${ - template.display_name - ? template.display_name - : toNormalCase(template[t].name) - }.`, - ] - : [] - ), - [] as string[] - ); - } + return Object.keys(template).reduce( + (errors: Array, t) => + errors.concat( + template[t].required && + template[t].show && + (!template[t].value || template[t].value === "") && + !reactFlowInstance + .getEdges() + .some( + (e) => + e.targetHandle.split("|")[1] === t && + e.targetHandle.split("|")[2] === n.id + ) + ? [ + `${type} is missing ${ + template.display_name + ? template.display_name + : toNormalCase(template[t].name) + }.`, + ] + : [] + ), + [] as string[] + ); + } - function validateNodes() { - return reactFlowInstance - .getNodes() - .flatMap((n: NodeType) => validateNode(n)); - } + function validateNodes() { + return reactFlowInstance + .getNodes() + .flatMap((n: NodeType) => validateNode(n)); + } - const ref = useRef(null); + const ref = useRef(null); - function sendMessage() { - if (chatValue !== "") { - let nodeValidationErrors = validateNodes(); - if (nodeValidationErrors.length === 0) { - setLockChat(true); - let message = chatValue; - setChatValue(""); - addChatHistory(message, true); + function sendMessage() { + if (chatValue !== "") { + let nodeValidationErrors = validateNodes(); + if (nodeValidationErrors.length === 0) { + setLockChat(true); + let message = chatValue; + setChatValue(""); + addChatHistory(message, true); - sendAll({ - ...reactFlowInstance.toObject(), - message, - chatHistory, - name: flow.name, - description: flow.description, - }); - } else { - setErrorData({ - title: "Oops! Looks like you missed some required information:", - list: nodeValidationErrors, - }); - } - } else { - setErrorData({ - title: "Error sending message", - list: ["The message cannot be empty."], - }); - } - } - function clearChat() { - setChatHistory([]); - ws.send(JSON.stringify({ clear_history: true })); - } + sendAll({ + ...reactFlowInstance.toObject(), + message, + chatHistory, + name: flow.name, + description: flow.description, + }); + } else { + setErrorData({ + title: "Oops! Looks like you missed some required information:", + list: nodeValidationErrors, + }); + } + } else { + setErrorData({ + title: "Error sending message", + list: ["The message cannot be empty."], + }); + } + } + function clearChat() { + setChatHistory([]); + ws.send(JSON.stringify({ clear_history: true })); + } - const { closePopUp } = useContext(PopUpContext); - function setModalOpen(x: boolean) { - setOpen(x); - if (x === false) { - setTimeout(() => { - closePopUp(); - }, 300); - } - } - return ( - - - -
- + function setModalOpen(x: boolean) { + setOpen(x); + } + return ( + + + +
+ -
-
- - -
- -
-
- {chatHistory.length > 0 ? ( - chatHistory.map((c, i) => ) - ) : ( -
- - 👋{" "} - - LangFlow Chat - - -
-
- - Start a conversation and click the agent’s thoughts{" "} - - - {" "} - to inspect the chaining process. - -
-
- )} -
-
-
-
- -
-
- - -
-
-
- - ); +
+
+ + +
+ +
+
+ {chatHistory.length > 0 ? ( + chatHistory.map((c, i) => ) + ) : ( +
+ + 👋{" "} + + LangFlow Chat + + +
+
+ + Start a conversation and click the agent’s thoughts{" "} + + + {" "} + to inspect the chaining process. + +
+
+ )} +
+
+
+
+ +
+
+ + +
+
+
+ + ); } From 8758dd85d5c1fd50c49f8b30c1f346d0c021b66f Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Fri, 5 May 2023 12:42:59 -0300 Subject: [PATCH 2/5] fixed double ws bug --- src/frontend/src/modals/chatModal/index.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx index 04cf416d3..8b94fb141 100644 --- a/src/frontend/src/modals/chatModal/index.tsx +++ b/src/frontend/src/modals/chatModal/index.tsx @@ -26,6 +26,7 @@ export default function ChatModal({ const [chatHistory, setChatHistory] = useState([]); const { reactFlowInstance } = useContext(typesContext); const { setErrorData, setNoticeData } = useContext(alertContext); + const [isStreaming,setIsStreaming] = useState() const [ws, setWs] = useState(null); const [lockChat, setLockChat] = useState(false); const addChatHistory = ( @@ -47,6 +48,10 @@ export default function ChatModal({ }); }; + function checkOpenFunction(){ + return open + } + function connectWS() { try { const urlWs = @@ -60,6 +65,7 @@ export default function ChatModal({ newWs.onopen = () => { console.log("WebSocket connection established!"); }; + console.log(flow.id) newWs.onmessage = (event) => { setLockChat(false); const data = JSON.parse(event.data); @@ -116,10 +122,12 @@ export default function ChatModal({ } }; newWs.onclose = (_) => { - setLockChat(false); - setTimeout(() => { - connectWS(); - }, 1000); + if(checkOpenFunction){ + setLockChat(false); + setTimeout(() => { + connectWS(); + }, 1000); + } }; newWs.onerror = (ev) => { console.log(ev, "error"); @@ -142,7 +150,6 @@ export default function ChatModal({ useEffect(() => { let newWs = connectWS(); return () => { - console.log("trigger"); newWs.close(); }; }, []); @@ -151,7 +158,6 @@ export default function ChatModal({ if (ws && (ws.readyState === ws.CLOSED || ws.readyState === ws.CLOSING)) { let newWs = connectWS(); return () => { - console.log("trigger"); newWs.close(); }; } From a99a434c1263d358e2b23a5e1066dab0e9d73a68 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Fri, 5 May 2023 12:43:39 -0300 Subject: [PATCH 3/5] update ws error handle --- src/backend/langflow/api/chat_manager.py | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/backend/langflow/api/chat_manager.py b/src/backend/langflow/api/chat_manager.py index 2dab12e34..7f84e8f01 100644 --- a/src/backend/langflow/api/chat_manager.py +++ b/src/backend/langflow/api/chat_manager.py @@ -175,8 +175,10 @@ class ChatManager: # Handle any exceptions that might occur logger.exception(e) # send a message to the client - await self.send_message(client_id, str(e)) - raise e + await self.active_connections[client_id].close( + code=1011, reason=str(e) + ) + finally: await self.active_connections[client_id].close( code=1000, reason="Client disconnected" From 7f9651a3053cb94fe51284eb9e6fb152036a42ca Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Fri, 5 May 2023 18:49:00 -0300 Subject: [PATCH 4/5] fixed onClose method websocket, streaming for text working --- src/frontend/src/modals/chatModal/index.tsx | 192 +++++++++++--------- 1 file changed, 108 insertions(+), 84 deletions(-) diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx index 8b94fb141..40f0e88a2 100644 --- a/src/frontend/src/modals/chatModal/index.tsx +++ b/src/frontend/src/modals/chatModal/index.tsx @@ -26,9 +26,15 @@ export default function ChatModal({ const [chatHistory, setChatHistory] = useState([]); const { reactFlowInstance } = useContext(typesContext); const { setErrorData, setNoticeData } = useContext(alertContext); - const [isStreaming,setIsStreaming] = useState() - const [ws, setWs] = useState(null); + const ws = useRef(null) const [lockChat, setLockChat] = useState(false); + const isOpen = useRef(open); + + useEffect(() => { + isOpen.current = open; + }, [open]); + var isStream = false; + const addChatHistory = ( message: string, isSend: boolean, @@ -47,9 +53,86 @@ export default function ChatModal({ return newChat; }); }; + - function checkOpenFunction(){ - return open + function updateLastMessage(str: string) { + console.log(str); + setChatHistory((old) => { + let newChat = [...old]; + newChat[newChat.length - 1].message = + newChat[newChat.length - 1].message + str; + return newChat; + }); + } + + function handleOnClose(event: CloseEvent) { + if (isOpen.current) { + setLockChat(false); + setTimeout(() => { + connectWS() + }, 1000); + } + } + + function handleWsMessage(data: any) { + if (Array.isArray(data)) { + //set chat history + setChatHistory((_) => { + let newChatHistory: ChatMessageType[] = []; + data.forEach( + (chatItem: { + intermediate_steps?: "string"; + is_bot: boolean; + message: string; + type: string; + files?: Array; + }) => { + if (chatItem.message) { + newChatHistory.push( + chatItem.files + ? { + isSend: !chatItem.is_bot, + message: chatItem.message, + thought: chatItem.intermediate_steps, + files: chatItem.files, + } + : { + isSend: !chatItem.is_bot, + message: chatItem.message, + thought: chatItem.intermediate_steps, + } + ); + } + } + ); + return newChatHistory; + }); + } + if (data.type === "start") { + console.log("start"); + addChatHistory("", false); + isStream = true; + } + if (data.type === "end") { + setLockChat(false); + isStream = false; + // if (data.files) { + // addChatHistory( + // data.message, + // false, + // data.intermediate_steps, + // data.files + // ); + // } else { + // addChatHistory(data.message, false, data.intermediate_steps); + // } + } + if (data.type === "file") { + console.log(data); + } + if (data.type === "stream" && isStream) { + updateLastMessage(data.message); + } } function connectWS() { @@ -65,76 +148,28 @@ export default function ChatModal({ newWs.onopen = () => { console.log("WebSocket connection established!"); }; - console.log(flow.id) + console.log(flow.id); newWs.onmessage = (event) => { - setLockChat(false); const data = JSON.parse(event.data); console.log("Received data:", data); + handleWsMessage(data); //get chat history - if (Array.isArray(data)) { - console.log(data); - - setChatHistory((_) => { - let newChatHistory: ChatMessageType[] = []; - data.forEach( - (chatItem: { - intermediate_steps?: "string"; - is_bot: boolean; - message: string; - type: string; - files?: Array; - }) => { - if (chatItem.message) { - newChatHistory.push( - chatItem.files - ? { - isSend: !chatItem.is_bot, - message: chatItem.message, - thought: chatItem.intermediate_steps, - files: chatItem.files, - } - : { - isSend: !chatItem.is_bot, - message: chatItem.message, - thought: chatItem.intermediate_steps, - } - ); - } - } - ); - return newChatHistory; - }); - } - if (data.type === "end") { - if (data.files) { - addChatHistory( - data.message, - false, - data.intermediate_steps, - data.files - ); - } else { - addChatHistory(data.message, false, data.intermediate_steps); - } - } - if (data.type === "file") { - console.log(data); - } }; - newWs.onclose = (_) => { - if(checkOpenFunction){ - setLockChat(false); - setTimeout(() => { - connectWS(); - }, 1000); - } + newWs.onclose = (event) => { + handleOnClose(event); }; newWs.onerror = (ev) => { console.log(ev, "error"); + setErrorData({ + title: "There was an error on web connection, please: ", + list: [ + "Refresh the page", + "Use a new flow tab", + "Check if the backend is up", + ], + }); }; - setWs(newWs); - - return newWs; + ws.current=newWs } catch { setErrorData({ title: "There was an error on web connection, please: ", @@ -148,25 +183,21 @@ export default function ChatModal({ } useEffect(() => { - let newWs = connectWS(); + connectWS(); return () => { - newWs.close(); + console.log("unmount") + console.log(ws) + if (ws) { + ws.current.close(); + } }; }, []); - useEffect(() => { - if (ws && (ws.readyState === ws.CLOSED || ws.readyState === ws.CLOSING)) { - let newWs = connectWS(); - return () => { - newWs.close(); - }; - } - }, [lockChat]); async function sendAll(data: sendAllProps) { try { if (ws) { - ws.send(JSON.stringify(data)); + ws.current.send(JSON.stringify(data)); } } catch (error) { setErrorData({ @@ -182,12 +213,6 @@ export default function ChatModal({ if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" }); }, [chatHistory]); - useEffect(() => { - if (ws && ws.readyState === ws.CLOSED) { - setLockChat(false); - } - }, [lockChat]); - function validateNode(n: NodeType): Array { if (!n.data?.node?.template || !Object.keys(n.data.node.template)) { setNoticeData({ @@ -244,7 +269,6 @@ export default function ChatModal({ let message = chatValue; setChatValue(""); addChatHistory(message, true); - sendAll({ ...reactFlowInstance.toObject(), message, @@ -267,7 +291,7 @@ export default function ChatModal({ } function clearChat() { setChatHistory([]); - ws.send(JSON.stringify({ clear_history: true })); + ws.current.send(JSON.stringify({ clear_history: true })); } function setModalOpen(x: boolean) { From 88c5cd91472c5e5f30121e4bd5a794ca317a0a55 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Fri, 5 May 2023 19:06:07 -0300 Subject: [PATCH 5/5] added stream thought --- src/frontend/src/modals/chatModal/index.tsx | 31 +++++++++++++-------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx index 40f0e88a2..a9d72264e 100644 --- a/src/frontend/src/modals/chatModal/index.tsx +++ b/src/frontend/src/modals/chatModal/index.tsx @@ -26,7 +26,7 @@ export default function ChatModal({ const [chatHistory, setChatHistory] = useState([]); const { reactFlowInstance } = useContext(typesContext); const { setErrorData, setNoticeData } = useContext(alertContext); - const ws = useRef(null) + const ws = useRef(null); const [lockChat, setLockChat] = useState(false); const isOpen = useRef(open); @@ -53,14 +53,19 @@ export default function ChatModal({ return newChat; }); }; - - function updateLastMessage(str: string) { - console.log(str); + //add proper type signature for function + + function updateLastMessage({str,thought}:{str?: string, thought?: string}) { setChatHistory((old) => { let newChat = [...old]; - newChat[newChat.length - 1].message = - newChat[newChat.length - 1].message + str; + if (str) { + newChat[newChat.length - 1].message = + newChat[newChat.length - 1].message + str; + } + if(thought){ + newChat[newChat.length - 1].thought = thought + } return newChat; }); } @@ -69,7 +74,7 @@ export default function ChatModal({ if (isOpen.current) { setLockChat(false); setTimeout(() => { - connectWS() + connectWS(); }, 1000); } } @@ -114,6 +119,9 @@ export default function ChatModal({ isStream = true; } if (data.type === "end") { + if(data.intermediate_steps){ + updateLastMessage({thought:data.intermediate_steps}); + } setLockChat(false); isStream = false; // if (data.files) { @@ -131,7 +139,7 @@ export default function ChatModal({ console.log(data); } if (data.type === "stream" && isStream) { - updateLastMessage(data.message); + updateLastMessage({str:data.message}); } } @@ -169,7 +177,7 @@ export default function ChatModal({ ], }); }; - ws.current=newWs + ws.current = newWs; } catch { setErrorData({ title: "There was an error on web connection, please: ", @@ -185,15 +193,14 @@ export default function ChatModal({ useEffect(() => { connectWS(); return () => { - console.log("unmount") - console.log(ws) + console.log("unmount"); + console.log(ws); if (ws) { ws.current.close(); } }; }, []); - async function sendAll(data: sendAllProps) { try { if (ws) {