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

Merge remote-tracking branch 'origin/websocket' into chat_and_cache

Browse source
This commit is contained in:
Gabriel Almeida 2023-04-28 09:58:10 -03:00
commit 35b4b50b8f
2 changed files with 115 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/frontend/src/components/chatComponent/index.tsx
View file

@ -14,7 +14,8 @@ export default function Chat({ flow }: ChatType) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
useEffect(() => { useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => { 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); setOpen(oldState=>!oldState);
} }
}; };

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

@ -28,7 +28,6 @@ export default function ChatModal({
setOpen: Function; setOpen: Function;
flow: FlowType; flow: FlowType;
}) { }) {
const { updateFlow } = useContext(TabsContext);
const [chatValue, setChatValue] = useState(""); const [chatValue, setChatValue] = useState("");
const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]); const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
@ -55,101 +54,136 @@ export default function ChatModal({
}; };
function connectWS() { function connectWS() {
// Check if the app is running with npm start or npm run build console.log("conectou");
// if npm start, use localhost, otherwise use the windows.location.host try {
const urlWs = const urlWs =
process.env.NODE_ENV === "development" process.env.NODE_ENV === "development"
? `ws://localhost:7860/chat/${flow.id}` ? `ws://localhost:7860/chat/${flow.id}`
: `wss://${window.location.host}/chat/${flow.id}`; : `wss://${window.location.host}/chat/${flow.id}`;
const newWs = new WebSocket(urlWs); const newWs = new WebSocket(urlWs);
newWs.onopen = () => { newWs.onopen = () => {
console.log("WebSocket connection established!"); console.log("WebSocket connection established!");
}; };
newWs.onmessage = (event) => { newWs.onmessage = (event) => {
try { try {
setLockChat(false); setLockChat(false);
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
console.log("Received data:", data); console.log("Received data:", data);
//get chat history //get chat history
if (Array.isArray(data)) { if (Array.isArray(data)) {
console.log(data); console.log(data);
setChatHistory((_) => { setChatHistory((_) => {
let newChatHistory: ChatMessageType[] = []; let newChatHistory: ChatMessageType[] = [];
data.forEach( data.forEach(
(chatItem: { (chatItem: {
intermediate_steps?: "string"; intermediate_steps?: "string";
is_bot: boolean; is_bot: boolean;
message: string; message: string;
type: string; type: string;
files?: Array<any>; files?: Array<any>;
}) => { }) => {
if (chatItem.message) { if (chatItem.message) {
newChatHistory.push( newChatHistory.push(
chatItem.files chatItem.files
? { ? {
isSend: !chatItem.is_bot, isSend: !chatItem.is_bot,
message: chatItem.message, message: chatItem.message,
thought: chatItem.intermediate_steps, thought: chatItem.intermediate_steps,
files: chatItem.files, files: chatItem.files,
} }
: { : {
isSend: !chatItem.is_bot, isSend: !chatItem.is_bot,
message: chatItem.message, message: chatItem.message,
thought: chatItem.intermediate_steps, thought: chatItem.intermediate_steps,
} }
); );
}
} }
} );
); return newChatHistory;
return newChatHistory; });
}); }
} if (data.type === "end") {
if (data.type === "end") { if (data.files) {
if (data.files) { addChatHistory(
addChatHistory( data.message,
data.message, false,
false, data.intermediate_steps,
data.intermediate_steps, data.files
data.files );
); } else {
} else { addChatHistory(data.message, false, data.intermediate_steps);
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); newWs.onclose = (_) => {
if (open) {
setLockChat(false);
setTimeout(() => {
connectWS();
}, 1000);
} }
} catch (error) { };
if (event.data !== "Error: 1005") { newWs.onerror = (ev) => {
setErrorData({ title: event.data }); console.log(ev, "error");
} };
} setWs(newWs);
};
newWs.onclose = (_) => {
if (open) {
setLockChat(false);
setTimeout(() => {
connectWS();
}, 100);
}
};
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(() => {
if (ws && (ws.readyState === ws.CLOSED || ws.readyState === ws.CLOSING)) {
let newWs = connectWS();
return () => {
console.log("trigger");
newWs.close();
};
}
}, [lockChat]);
useEffect(() => { useEffect(() => {
let newWs = connectWS(); let newWs = connectWS();
return () => { return () => {
console.log("trigger");
newWs.close(); newWs.close();
}; };
}, []); }, []);
async function sendAll(data: sendAllProps) { async function sendAll(data: sendAllProps) {
if (ws) { try {
ws.send(JSON.stringify(data)); 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();
} }
} }