From e92cf1110a8e29f358a8d5acf2b314e4063b5582 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Thu, 27 Apr 2023 23:23:14 -0300 Subject: [PATCH] change chat shortcut to ctrl+k and handled websocket errors --- .../src/components/chatComponent/index.tsx | 3 +- src/frontend/src/modals/chatModal/index.tsx | 193 +++++++++++------- 2 files changed, 116 insertions(+), 80 deletions(-) diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx index 668a970bd..a4eae7f21 100644 --- a/src/frontend/src/components/chatComponent/index.tsx +++ b/src/frontend/src/components/chatComponent/index.tsx @@ -14,7 +14,8 @@ export default function Chat({ flow }: ChatType) { const [open, setOpen] = useState(false); useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { - if (event.key === "K" && event.shiftKey && (event.metaKey||event.ctrlKey)) { + event.preventDefault() + if ((event.key === "K"||event.key==="k") && (event.metaKey||event.ctrlKey)) { setOpen(oldState=>!oldState); } }; diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx index 5b3810796..6adb1e51f 100644 --- a/src/frontend/src/modals/chatModal/index.tsx +++ b/src/frontend/src/modals/chatModal/index.tsx @@ -28,7 +28,6 @@ export default function ChatModal({ setOpen: Function; flow: FlowType; }) { - const { updateFlow } = useContext(TabsContext); const [chatValue, setChatValue] = useState(""); const [chatHistory, setChatHistory] = useState([]); const { reactFlowInstance } = useContext(typesContext); @@ -44,7 +43,7 @@ export default function ChatModal({ setChatHistory((old) => { let newChat = _.cloneDeep(old); if (files) { - newChat.push({ message, isSend, files,thought }); + newChat.push({ message, isSend, files, thought }); } else if (thought) { newChat.push({ message, isSend, thought }); } else { @@ -55,95 +54,128 @@ export default function ChatModal({ }; function connectWS() { - const newWs = new WebSocket(`ws://127.0.0.1:5003/chat/${flow.id}`); - 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); + console.log("conectou"); + try { + const newWs = new WebSocket(`ws://127.0.0.1:5003/chat/${flow.id}`); + 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); - 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, - } - ); + 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); + ); + 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() } } - if (data.type == "file") { - console.log(data); - } - } catch (error) { - if(event.data!=="Error: 1005"){ - setErrorData({ title: event.data }); - + }; + newWs.onclose = (_) => { + if (open) { + setLockChat(false); + setTimeout(() => { + connectWS(); + }, 1000); } + }; + newWs.onerror= (ev)=>{ + console.log(ev,"error") } - }; - newWs.onclose = (_) => { - if (open) { - setLockChat(false); - setTimeout(() => { - connectWS(); - }, 100); - } - }; - setWs(newWs); + setWs(newWs); - return 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", + ], + }); + } } useEffect(() => { - let newWs = connectWS(); - return () => { - newWs.close(); - }; + 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(); + } }, []); async function sendAll(data: sendAllProps) { - if (ws) { - ws.send(JSON.stringify(data)); + 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(); } } @@ -294,7 +326,10 @@ export default function ChatModal({ ) : (
- 👋 LangFlow Chat + 👋{" "} + + LangFlow Chat +