jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fixed onClose method websocket, streaming for text working

Browse source
This commit is contained in:
anovazzi1 2023-05-05 18:49:00 -03:00
commit 7f9651a305
1 changed files with 108 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

192
src/frontend/src/modals/chatModal/index.tsx
View file

@ -26,9 +26,15 @@ export default function ChatModal({
const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]); const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
const { setErrorData, setNoticeData } = useContext(alertContext); const { setErrorData, setNoticeData } = useContext(alertContext);
const [isStreaming,setIsStreaming] = useState() const ws = useRef<WebSocket|null>(null)
const [ws, setWs] = useState<WebSocket | null>(null);
const [lockChat, setLockChat] = useState(false); const [lockChat, setLockChat] = useState(false);
const isOpen = useRef(open);
useEffect(() => {
isOpen.current = open;
}, [open]);
var isStream = false;
const addChatHistory = ( const addChatHistory = (
message: string, message: string,
isSend: boolean, isSend: boolean,
@ -48,8 +54,85 @@ export default function ChatModal({
}); });
}; };
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<any>;
}) => {
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() { function connectWS() {
@ -65,76 +148,28 @@ export default function ChatModal({
newWs.onopen = () => { newWs.onopen = () => {
console.log("WebSocket connection established!"); console.log("WebSocket connection established!");
}; };
console.log(flow.id) console.log(flow.id);
newWs.onmessage = (event) => { newWs.onmessage = (event) => {
setLockChat(false);
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
console.log("Received data:", data); console.log("Received data:", data);
handleWsMessage(data);
//get chat history //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<any>;
}) => {
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 = (_) => { newWs.onclose = (event) => {
if(checkOpenFunction){ handleOnClose(event);
setLockChat(false);
setTimeout(() => {
connectWS();
}, 1000);
}
}; };
newWs.onerror = (ev) => { newWs.onerror = (ev) => {
console.log(ev, "error"); 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); ws.current=newWs
return newWs;
} catch { } catch {
setErrorData({ setErrorData({
title: "There was an error on web connection, please: ", title: "There was an error on web connection, please: ",
@ -148,25 +183,21 @@ export default function ChatModal({
} }
useEffect(() => { useEffect(() => {
let newWs = connectWS(); connectWS();
return () => { 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) { async function sendAll(data: sendAllProps) {
try { try {
if (ws) { if (ws) {
ws.send(JSON.stringify(data)); ws.current.send(JSON.stringify(data));
} }
} catch (error) { } catch (error) {
setErrorData({ setErrorData({
@ -182,12 +213,6 @@ export default function ChatModal({
if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" }); if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
}, [chatHistory]); }, [chatHistory]);
useEffect(() => {
if (ws && ws.readyState === ws.CLOSED) {
setLockChat(false);
}
}, [lockChat]);
function validateNode(n: NodeType): Array<string> { function validateNode(n: NodeType): Array<string> {
if (!n.data?.node?.template || !Object.keys(n.data.node.template)) { if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
setNoticeData({ setNoticeData({
@ -244,7 +269,6 @@ export default function ChatModal({
let message = chatValue; let message = chatValue;
setChatValue(""); setChatValue("");
addChatHistory(message, true); addChatHistory(message, true);
sendAll({ sendAll({
...reactFlowInstance.toObject(), ...reactFlowInstance.toObject(),
message, message,
@ -267,7 +291,7 @@ export default function ChatModal({
} }
function clearChat() { function clearChat() {
setChatHistory([]); setChatHistory([]);
ws.send(JSON.stringify({ clear_history: true })); ws.current.send(JSON.stringify({ clear_history: true }));
} }
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {