diff --git a/src/frontend/package.json b/src/frontend/package.json index 55749b635..c291ea882 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" +} \ No newline at end of file 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) => { diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx index 60a07e1b7..705f15de2 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,20 +49,24 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) { )} {chat.thought && chat.thought !== "" && !hidden &&

}
- {chat.file ? ( -
- ) : ( - - {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 b5413a517..a74216090 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 }); @@ -50,70 +49,97 @@ export default function ChatModal({ return newChat; }); }; - - useEffect(() => { - const newWs = new WebSocket(`ws://localhost:7860/chat/${flow.id}`); + + 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; - data?:string; - }) => { - if(chatItem.type==="file"){ - newChatHistory.push({ - isSend: !chatItem.is_bot, - message: chatItem.message, - thought: chatItem.intermediate_steps, - file:chatItem.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, + } + ); + } } - newChatHistory.push({ - isSend: !chatItem.is_bot, - message: chatItem.message, - thought: chatItem.intermediate_steps, - }); - } - ); - return newChatHistory; - }); + ); + 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) + + } + } + + }; + newWs.onclose = (_) => { + if(open){ + setLockChat(false); + setTimeout(() => { + connectWS() + }, 100); } - if (data.type === "end") { - addChatHistory(data.message, false, data.intermediate_steps); - setLockChat(false) - } - if (data.type=="file"){ - console.log(data) - } - // Do something with the data received from the WebSocket }; - newWs.onclose=(e)=>{console.log(e.reason)} setWs(newWs); + return newWs + + } + + useEffect(() => { + let newWs = connectWS() return () => { newWs.close(); }; }, []); - useEffect(()=>{ - if(ws && ws.CLOSED){ - setLockChat(false) - } - },[lockChat]) - async function sendAll(data: sendAllProps) { if (ws) { ws.send(JSON.stringify(data)); @@ -124,6 +150,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({ @@ -187,20 +219,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({ @@ -217,7 +235,7 @@ 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..6e388c88a 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<{data:string,type:string}>; +};