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

change chat shortcut to ctrl+k and handled websocket errors

Browse source
This commit is contained in:
anovazzi1 2023-04-27 23:23:14 -03:00
commit e92cf1110a
2 changed files with 116 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);
useEffect(() => {
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);
}
};

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

@ -28,7 +28,6 @@ export default function ChatModal({
setOpen: Function;
flow: FlowType;
}) {
const { updateFlow } = useContext(TabsContext);
const [chatValue, setChatValue] = useState("");
const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
const { reactFlowInstance } = useContext(typesContext);
@ -44,7 +43,7 @@ export default function ChatModal({
setChatHistory((old) => {
let newChat = _.cloneDeep(old);
if (files) {
newChat.push({ message, isSend, files,thought });
newChat.push({ message, isSend, files, thought });
} else if (thought) {
newChat.push({ message, isSend, thought });
} else {
@ -55,95 +54,128 @@ export default function ChatModal({
};
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) => {
try {
setLockChat(false);
const data = JSON.parse(event.data);
console.log("Received data:", data);
//get chat history
if (Array.isArray(data)) {
console.log(data);
console.log("conectou");
try {
const newWs = new WebSocket(`ws://127.0.0.1:5003/chat/${flow.id}`);
newWs.onopen = () => {
console.log("WebSocket connection established!");
};
newWs.onmessage = (event) => {
try {
setLockChat(false);
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<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,
}
);
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);
);
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);
}
} catch (error) {
if (event.data !== "Error: 1005") {
setErrorData({ title: event.data });
newWs.close()
connectWS()
}
}
if (data.type == "file") {
console.log(data);
}
} catch (error) {
if(event.data!=="Error: 1005"){
setErrorData({ title: event.data });
};
newWs.onclose = (_) => {
if (open) {
setLockChat(false);
setTimeout(() => {
connectWS();
}, 1000);
}
};
newWs.onerror= (ev)=>{
console.log(ev,"error")
}
};
newWs.onclose = (_) => {
if (open) {
setLockChat(false);
setTimeout(() => {
connectWS();
}, 100);
}
};
setWs(newWs);
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(() => {
let newWs = connectWS();
return () => {
newWs.close();
};
if (ws && (ws.readyState === ws.CLOSED|| ws.readyState===ws.CLOSING)) {
let newWs = connectWS();
return () => {
console.log("trigger")
newWs.close();
};
}
}, [lockChat]);
useEffect(() => {
let newWs = connectWS();
return () => {
console.log("trigger")
newWs.close();
}
}, []);
async function sendAll(data: sendAllProps) {
if (ws) {
ws.send(JSON.stringify(data));
try {
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();
}
}
@ -294,7 +326,10 @@ export default function ChatModal({
) : (
<div className="flex flex-col h-full text-center justify-center w-full items-center align-middle ">
<span>
👋 <span className="text-gray-600 text-lg">LangFlow Chat</span>
👋{" "}
<span className="text-gray-600 text-lg">
LangFlow Chat
</span>
</span>
<br />
<div className="bg-gray-100 rounded-md w-2/4 px-6 py-8 border border-gray-200">