From 101044946db0bd6fafe089f4fa06cc5cb699a2de Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 25 Apr 2023 22:02:25 -0300 Subject: [PATCH 1/7] clean function implemented on front --- src/frontend/package.json | 2 +- .../src/modals/chatModal/chatMessage/index.tsx | 8 ++++---- src/frontend/src/modals/chatModal/index.tsx | 6 +++--- src/frontend/src/types/chat/index.ts | 11 ++++++++--- 4 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/frontend/package.json b/src/frontend/package.json index 55749b635..927dab67e 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -61,5 +61,5 @@ "last 1 safari version" ] }, - "proxy": "http://backend:7860" + "proxy": "http://127.0.0.1:5003" } diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx index 60a07e1b7..e9d3a699a 100644 --- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx +++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx @@ -19,12 +19,12 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) { >
{!chat.isSend && } - {chat.isSend && } + {chat.isSend && }
{!chat.isSend ? (
@@ -49,7 +49,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) { )} {chat.thought && chat.thought !== "" && !hidden &&

}
- {chat.file ? ( + {chat.files ? (
) : ( diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx index b5413a517..32c370a22 100644 --- a/src/frontend/src/modals/chatModal/index.tsx +++ b/src/frontend/src/modals/chatModal/index.tsx @@ -52,7 +52,7 @@ export default function ChatModal({ }; useEffect(() => { - const newWs = new WebSocket(`ws://localhost:7860/chat/${flow.id}`); + const newWs = new WebSocket(`ws://127.0.0.1:5003/chat/${flow.id}`); newWs.onopen = () => { console.log("WebSocket connection established!"); }; @@ -78,7 +78,6 @@ export default function ChatModal({ isSend: !chatItem.is_bot, message: chatItem.message, thought: chatItem.intermediate_steps, - file:chatItem.data }); } newChatHistory.push({ @@ -217,7 +216,8 @@ export default function ChatModal({ } function clearChat() { setChatHistory([]); - updateFlow({ ..._.cloneDeep(flow), chat: [] }); + ws.send(JSON.stringify({clear_history:true})) + } const { closePopUp } = useContext(PopUpContext); diff --git a/src/frontend/src/types/chat/index.ts b/src/frontend/src/types/chat/index.ts index b32968290..0e3fe4ef6 100644 --- a/src/frontend/src/types/chat/index.ts +++ b/src/frontend/src/types/chat/index.ts @@ -1,5 +1,10 @@ -import { ReactFlowInstance } from 'reactflow'; +import { ReactFlowInstance } from "reactflow"; import { FlowType } from "../flow"; -export type ChatType = {flow:FlowType,reactFlowInstance:ReactFlowInstance} -export type ChatMessageType = { message: string; isSend: boolean, thought?:string,file?:string } \ No newline at end of file +export type ChatType = { flow: FlowType; reactFlowInstance: ReactFlowInstance }; +export type ChatMessageType = { + message: string; + isSend: boolean; + thought?: string; + files?: Array<{content:string,type:string}>; +}; From 2196111bf2d5f29dde7e7c1e0c53559101bebd05 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 25 Apr 2023 22:12:33 -0300 Subject: [PATCH 2/7] checking type from chat history --- src/frontend/src/modals/chatModal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx index 32c370a22..2f614c545 100644 --- a/src/frontend/src/modals/chatModal/index.tsx +++ b/src/frontend/src/modals/chatModal/index.tsx @@ -73,7 +73,7 @@ export default function ChatModal({ type: string; data?:string; }) => { - if(chatItem.type==="file"){ + if(chatItem.type==="end"){ newChatHistory.push({ isSend: !chatItem.is_bot, message: chatItem.message, From ce2895f1c798c6b537d1344ca81499bc4f29fe33 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 25 Apr 2023 22:16:07 -0300 Subject: [PATCH 3/7] change lock logic --- src/frontend/src/modals/chatModal/index.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx index 2f614c545..c06ac0e47 100644 --- a/src/frontend/src/modals/chatModal/index.tsx +++ b/src/frontend/src/modals/chatModal/index.tsx @@ -99,7 +99,7 @@ export default function ChatModal({ } // Do something with the data received from the WebSocket }; - newWs.onclose=(e)=>{console.log(e.reason)} + newWs.onclose=(e)=>{console.log(e.reason);setLockChat(false)} setWs(newWs); return () => { @@ -107,11 +107,6 @@ export default function ChatModal({ }; }, []); - useEffect(()=>{ - if(ws && ws.CLOSED){ - setLockChat(false) - } - },[lockChat]) async function sendAll(data: sendAllProps) { if (ws) { From 56d97e7c7fb684b91a58544bba2c935de281109f Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 25 Apr 2023 22:47:52 -0300 Subject: [PATCH 4/7] file download working --- .../modals/chatModal/chatMessage/index.tsx | 28 +++++---- src/frontend/src/modals/chatModal/index.tsx | 63 +++++++++++-------- src/frontend/src/types/chat/index.ts | 2 +- 3 files changed, 55 insertions(+), 38 deletions(-) diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx index e9d3a699a..705f15de2 100644 --- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx +++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx @@ -49,20 +49,24 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) { )} {chat.thought && chat.thought !== "" && !hidden &&

}
- {chat.files ? ( -
- ) : ( - - {chat.message} + + {chat.message} + {chat.files && (
- + {chat.files.map((file) => { + return ( +
+ +
+ ); + })}
- - )} + )} +
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx index c06ac0e47..a2d148ca0 100644 --- a/src/frontend/src/modals/chatModal/index.tsx +++ b/src/frontend/src/modals/chatModal/index.tsx @@ -35,14 +35,13 @@ export default function ChatModal({ message: string, isSend: boolean, thought?: string, - file?:Blob + files?: Array ) => { setChatHistory((old) => { let newChat = _.cloneDeep(old); - if(file){ - newChat.push({ message, isSend,file }); - } - else if (thought) { + if (files) { + newChat.push({ message, isSend, files }); + } else if (thought) { newChat.push({ message, isSend, thought }); } else { newChat.push({ message, isSend }); @@ -71,35 +70,51 @@ export default function ChatModal({ is_bot: boolean; message: string; type: string; - data?:string; + files?: Array; }) => { - if(chatItem.type==="end"){ - newChatHistory.push({ - isSend: !chatItem.is_bot, - message: chatItem.message, - thought: chatItem.intermediate_steps, - }); + 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, + } + ); } - newChatHistory.push({ - isSend: !chatItem.is_bot, - message: chatItem.message, - thought: chatItem.intermediate_steps, - }); } ); return newChatHistory; }); } if (data.type === "end") { - addChatHistory(data.message, false, data.intermediate_steps); - setLockChat(false) + if (data.files) { + addChatHistory( + data.message, + false, + data.intermediate_steps, + data.files + ); + } else { + addChatHistory(data.message, false, data.intermediate_steps); + } + setLockChat(false); } - if (data.type=="file"){ - console.log(data) + if (data.type == "file") { + console.log(data); } // Do something with the data received from the WebSocket }; - newWs.onclose=(e)=>{console.log(e.reason);setLockChat(false)} + newWs.onclose = (e) => { + console.log(e.code); + setLockChat(false); + }; setWs(newWs); return () => { @@ -107,7 +122,6 @@ export default function ChatModal({ }; }, []); - async function sendAll(data: sendAllProps) { if (ws) { ws.send(JSON.stringify(data)); @@ -211,8 +225,7 @@ export default function ChatModal({ } function clearChat() { setChatHistory([]); - ws.send(JSON.stringify({clear_history:true})) - + ws.send(JSON.stringify({ clear_history: true })); } const { closePopUp } = useContext(PopUpContext); diff --git a/src/frontend/src/types/chat/index.ts b/src/frontend/src/types/chat/index.ts index 0e3fe4ef6..6e388c88a 100644 --- a/src/frontend/src/types/chat/index.ts +++ b/src/frontend/src/types/chat/index.ts @@ -6,5 +6,5 @@ export type ChatMessageType = { message: string; isSend: boolean; thought?: string; - files?: Array<{content:string,type:string}>; + files?: Array<{data:string,type:string}>; }; From 5d94b5cd9c4620392f3a245ca6afe37164efea2a Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 25 Apr 2023 23:01:52 -0300 Subject: [PATCH 5/7] fixed lockChat logic --- src/frontend/src/modals/chatModal/index.tsx | 25 +++++++++------------ 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx index a2d148ca0..ba5164917 100644 --- a/src/frontend/src/modals/chatModal/index.tsx +++ b/src/frontend/src/modals/chatModal/index.tsx @@ -112,9 +112,12 @@ export default function ChatModal({ // Do something with the data received from the WebSocket }; newWs.onclose = (e) => { - console.log(e.code); + console.log("close"); setLockChat(false); }; + newWs.onerror = (e) => { + window.alert("error"); + }; setWs(newWs); return () => { @@ -132,6 +135,12 @@ 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({ @@ -195,20 +204,6 @@ export default function ChatModal({ chatHistory, name: flow.name, description: flow.description, - }).catch((error) => { - setErrorData({ - title: error.message ?? "Unknown Error", - list: [error.response.data.detail], - }); - setLockChat(false); - let lastMessage; - setChatHistory((chatHistory) => { - let newChat = chatHistory; - - lastMessage = newChat.pop().message; - return newChat; - }); - setChatValue(lastMessage); }); } else { setErrorData({ From bc4abd50c4a0d1146cbe61c5789e0f7750c8613a Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 25 Apr 2023 23:09:19 -0300 Subject: [PATCH 6/7] using unique id as flow id --- src/frontend/src/contexts/tabsContext.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx index 288a4fea2..f087d8f2b 100644 --- a/src/frontend/src/contexts/tabsContext.tsx +++ b/src/frontend/src/contexts/tabsContext.tsx @@ -10,6 +10,7 @@ import { FlowType } from "../types/flow"; import { TabsContextType } from "../types/tabs"; import { normalCaseToSnakeCase } from "../utils"; import { alertContext } from "./alertContext"; +const { v4: uuidv4 } = require('uuid'); const TabsContextInitialValue: TabsContextType = { save: () => {}, @@ -33,8 +34,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { const { setNoticeData } = useContext(alertContext); const [tabIndex, setTabIndex] = useState(0); const [flows, setFlows] = useState>([]); - const [id, setId] = useState(0); - const [lockChat, setLockChat] = useState(false); + const [id, setId] = useState(""); const newNodeId = useRef(0); function incrementNodeId() { @@ -68,7 +68,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { newNodeId.current = 0; setTabIndex(0); setFlows([]); - setId(0); + setId(uuidv4()); } /** @@ -157,7 +157,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { }; // Increment the ID counter. - setId((old) => old + 1); + setId(uuidv4()); // Add the new flow to the list of flows. setFlows((prevState) => { From bb18f128ce9ff3a9477277c26aba5cee6b79d5a6 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 25 Apr 2023 23:36:25 -0300 Subject: [PATCH 7/7] added basic error handling --- src/frontend/src/modals/chatModal/index.tsx | 131 +++++++++++--------- 1 file changed, 73 insertions(+), 58 deletions(-) diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx index ba5164917..a74216090 100644 --- a/src/frontend/src/modals/chatModal/index.tsx +++ b/src/frontend/src/modals/chatModal/index.tsx @@ -49,77 +49,92 @@ export default function ChatModal({ return newChat; }); }; - - useEffect(() => { + + 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) => { - const data = JSON.parse(event.data); - console.log("Received data:", data); - //get chat history - if (Array.isArray(data)) { - console.log(data); + try { + 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); + } + setLockChat(false); + } + if (data.type == "file") { + console.log(data); + } + } catch (error) { + setErrorData({title:event.data}) + if(newWs.readyState===newWs.CLOSED){ + window.alert(error) + } - setLockChat(false); } - if (data.type == "file") { - console.log(data); - } - // Do something with the data received from the WebSocket + }; - newWs.onclose = (e) => { - console.log("close"); + newWs.onclose = (_) => { + if(open){ setLockChat(false); - }; - newWs.onerror = (e) => { - window.alert("error"); + setTimeout(() => { + connectWS() + }, 100); + } }; setWs(newWs); + return newWs + + } + + useEffect(() => { + let newWs = connectWS() return () => { newWs.close(); }; @@ -136,7 +151,7 @@ export default function ChatModal({ }, [chatHistory]); useEffect(() => { - if (ws &&ws.readyState===ws.CLOSED) { + if (ws && ws.readyState === ws.CLOSED) { setLockChat(false); } }, [lockChat]);