Merge branch 'chatUpdate' of https://github.com/logspace-ai/langflow into streaming
This commit is contained in:
Gabriel Almeida
commit
b5a1fec33d
3 changed files with 355 additions and 341 deletions
|
|
@ -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(<Transition
|
||||
show={!open}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export default function Chat({ flow }: ChatType) {
|
|||
return (
|
||||
<>
|
||||
<ChatModal key={flow.id} flow={flow} open={open} setOpen={setOpen} />
|
||||
<ChatTrigger open={open} setOpen={setOpen} flow={flow} />
|
||||
<ChatTrigger open={open} setOpen={setOpen} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
@ -32,8 +26,15 @@ export default function ChatModal({
|
|||
const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
|
||||
const { reactFlowInstance } = useContext(typesContext);
|
||||
const { setErrorData, setNoticeData } = useContext(alertContext);
|
||||
const [ws, setWs] = useState<WebSocket | null>(null);
|
||||
const ws = useRef<WebSocket | null>(null);
|
||||
const [lockChat, setLockChat] = useState(false);
|
||||
const isOpen = useRef(open);
|
||||
|
||||
useEffect(() => {
|
||||
isOpen.current = open;
|
||||
}, [open]);
|
||||
var isStream = false;
|
||||
|
||||
const addChatHistory = (
|
||||
message: string,
|
||||
isSend: boolean,
|
||||
|
|
@ -53,29 +54,34 @@ export default function ChatModal({
|
|||
});
|
||||
};
|
||||
|
||||
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}`;
|
||||
//add proper type signature for function
|
||||
|
||||
const newWs = new WebSocket(urlWs);
|
||||
newWs.onopen = () => {
|
||||
console.log("WebSocket connection established!");
|
||||
};
|
||||
newWs.onmessage = (event) => {
|
||||
try {
|
||||
function updateLastMessage({str,thought}:{str?: string, thought?: string}) {
|
||||
setChatHistory((old) => {
|
||||
let newChat = [...old];
|
||||
if (str) {
|
||||
newChat[newChat.length - 1].message =
|
||||
newChat[newChat.length - 1].message + str;
|
||||
}
|
||||
if(thought){
|
||||
newChat[newChat.length - 1].thought = thought
|
||||
}
|
||||
return newChat;
|
||||
});
|
||||
}
|
||||
|
||||
function handleOnClose(event: CloseEvent) {
|
||||
if (isOpen.current) {
|
||||
setLockChat(false);
|
||||
const data = JSON.parse(event.data);
|
||||
console.log("Received data:", data);
|
||||
//get chat history
|
||||
if (Array.isArray(data)) {
|
||||
console.log(data);
|
||||
setTimeout(() => {
|
||||
connectWS();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function handleWsMessage(data: any) {
|
||||
if (Array.isArray(data)) {
|
||||
//set chat history
|
||||
setChatHistory((_) => {
|
||||
let newChatHistory: ChatMessageType[] = [];
|
||||
data.forEach(
|
||||
|
|
@ -107,77 +113,98 @@ export default function ChatModal({
|
|||
return newChatHistory;
|
||||
});
|
||||
}
|
||||
if (data.type === "start") {
|
||||
console.log("start");
|
||||
addChatHistory("", false);
|
||||
isStream = true;
|
||||
}
|
||||
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.intermediate_steps){
|
||||
updateLastMessage({thought:data.intermediate_steps});
|
||||
}
|
||||
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") {
|
||||
if (data.type === "file") {
|
||||
console.log(data);
|
||||
}
|
||||
} catch (error) {
|
||||
if (event.data !== "Error: 1005") {
|
||||
setErrorData({ title: event.data });
|
||||
newWs.close();
|
||||
connectWS();
|
||||
if (data.type === "stream" && isStream) {
|
||||
updateLastMessage({str:data.message});
|
||||
}
|
||||
}
|
||||
|
||||
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.onclose = (_) => {
|
||||
if (open) {
|
||||
setLockChat(false);
|
||||
setTimeout(() => {
|
||||
connectWS();
|
||||
}, 1000);
|
||||
}
|
||||
console.log(flow.id);
|
||||
newWs.onmessage = (event) => {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log("Received data:", data);
|
||||
handleWsMessage(data);
|
||||
//get chat history
|
||||
};
|
||||
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: ",
|
||||
list: [
|
||||
"refresh the page",
|
||||
"use a new flow tab",
|
||||
"check if the backend is up",
|
||||
"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();
|
||||
connectWS();
|
||||
return () => {
|
||||
console.log("trigger");
|
||||
newWs.close();
|
||||
};
|
||||
console.log("unmount");
|
||||
console.log(ws);
|
||||
if (ws) {
|
||||
ws.current.close();
|
||||
}
|
||||
}, [lockChat]);
|
||||
|
||||
useEffect(() => {
|
||||
let newWs = connectWS();
|
||||
return () => {
|
||||
console.log("trigger");
|
||||
newWs.close();
|
||||
};
|
||||
}, []);
|
||||
|
||||
async function sendAll(data: sendAllProps) {
|
||||
try {
|
||||
if (ws) {
|
||||
ws.send(JSON.stringify(data));
|
||||
ws.current.send(JSON.stringify(data));
|
||||
}
|
||||
} catch (error) {
|
||||
setErrorData({
|
||||
|
|
@ -193,12 +220,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<string> {
|
||||
if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
|
||||
setNoticeData({
|
||||
|
|
@ -255,7 +276,6 @@ export default function ChatModal({
|
|||
let message = chatValue;
|
||||
setChatValue("");
|
||||
addChatHistory(message, true);
|
||||
|
||||
sendAll({
|
||||
...reactFlowInstance.toObject(),
|
||||
message,
|
||||
|
|
@ -278,20 +298,14 @@ export default function ChatModal({
|
|||
}
|
||||
function clearChat() {
|
||||
setChatHistory([]);
|
||||
ws.send(JSON.stringify({ clear_history: true }));
|
||||
ws.current.send(JSON.stringify({ clear_history: true }));
|
||||
}
|
||||
|
||||
const { closePopUp } = useContext(PopUpContext);
|
||||
function setModalOpen(x: boolean) {
|
||||
setOpen(x);
|
||||
if (x === false) {
|
||||
setTimeout(() => {
|
||||
closePopUp();
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<Transition.Root show={open} appear={true} as={Fragment}>
|
||||
<Transition.Root show={open} appear={open} as={Fragment}>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="relative z-10"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue