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

Hotfix: Save Flow Bug in Browser (#305)

Browse source 
This pull request addresses a critical bug related to saving flows in
the browser. The bug was causing intermittent failures and inconsistent
behavior when users attempted to save their workflow configurations.
This commit is contained in:
anovazzi1 2023-05-15 10:48:04 -03:00 • committed by GitHub
commit 64c6897b71
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 65 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/frontend/src/contexts/tabsContext.tsx
View file

@ -38,7 +38,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
const { setNoticeData } = useContext(alertContext);
const [tabIndex, setTabIndex] = useState(0);
const [flows, setFlows] = useState<Array<FlowType>>([]);
const [id, setId] = useState("");
const [id, setId] = useState(uuidv4());
const { templates } = useContext(typesContext);
const newNodeId = useRef(0);
@ -47,46 +47,50 @@ export function TabsProvider({ children }: { children: ReactNode }) {
return newNodeId.current;
}
function save() {
if (flows.length !== 0)
window.localStorage.setItem(
"tabsData",
JSON.stringify({ tabIndex, flows, id, nodeId: newNodeId.current })
);
//disabled until flows can be saved on local storage again without bugs
// if (flows.length !== 0)
// window.localStorage.setItem(
// "tabsData",
// JSON.stringify({ tabIndex, flows, id, nodeId: newNodeId.current })
// );
}
useEffect(() => {
//disabled until flows can be saved on local storage again without bugs
//save tabs locally
save();
// save();
}, [flows, id, tabIndex, newNodeId]);
useEffect(() => {
//get tabs locally saved
let cookie = window.localStorage.getItem("tabsData");
if (cookie && Object.keys(templates).length > 0) {
let cookieObject: LangFlowState = JSON.parse(cookie);
cookieObject.flows.forEach((flow) => {
flow.data.nodes.forEach((node) => {
if (Object.keys(templates[node.data.type]["template"]).length > 0) {
node.data.node.template = updateTemplate(
templates[node.data.type][
"template"
] as unknown as APITemplateType,
// useEffect(() => {
// //get tabs locally saved
// let cookie = window.localStorage.getItem("tabsData");
// if (cookie && Object.keys(templates).length > 0) {
// let cookieObject: LangFlowState = JSON.parse(cookie);
// cookieObject.flows.forEach((flow) => {
// flow.data.nodes.forEach((node) => {
// if (Object.keys(templates[node.data.type]["template"]).length > 0) {
// node.data.node.template = updateTemplate(
// templates[node.data.type][
// "template"
// ] as unknown as APITemplateType,
// node.data.node.template as APITemplateType
// );
// }
// });
// });
// setTabIndex(cookieObject.tabIndex);
// setFlows(cookieObject.flows);
// setId(cookieObject.id);
// newNodeId.current = cookieObject.nodeId;
// }
// }, [templates]);
node.data.node.template as APITemplateType
);
}
});
});
setTabIndex(cookieObject.tabIndex);
setFlows(cookieObject.flows);
setId(cookieObject.id);
newNodeId.current = cookieObject.nodeId;
}
}, [templates]);
function hardReset() {
newNodeId.current = 0;
setTabIndex(0);
setFlows([]);
setId("");
setId(uuidv4());
}
/**
@ -182,7 +186,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
let newFlow: FlowType = {
description,
name: flow?.name ?? "New Flow",
id: id.toString(),
id: uuidv4(),
data,
};

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

@ -30,10 +30,16 @@ export default function ChatModal({
const ws = useRef<WebSocket | null>(null);
const [lockChat, setLockChat] = useState(false);
const isOpen = useRef(open);
const id = useRef(flow.id);
useEffect(() => {
isOpen.current = open;
}, [open]);
useEffect(() => {
id.current = flow.id;
},[flow.id])
var isStream = false;
const addChatHistory = (
@ -164,10 +170,9 @@ export default function ChatModal({
try {
const urlWs =
process.env.NODE_ENV === "development"
? `ws://localhost:7860/chat/${flow.id}`
? `ws://localhost:7860/chat/${id.current}`
: `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host
}/chat/${flow.id}`;
}/chat/${id.current}`;
const newWs = new WebSocket(urlWs);
newWs.onopen = () => {
console.log("WebSocket connection established!");
@ -184,6 +189,26 @@ export default function ChatModal({
};
newWs.onerror = (ev) => {
console.log(ev, "error");
if(flow.id===""){
connectWS();
}
else{
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",
],
});
}
};
ws.current = newWs;
} catch {
if(flow.id===""){
connectWS();
}
else{
setErrorData({
title: "There was an error on web connection, please: ",
list: [
@ -192,17 +217,7 @@ export default function ChatModal({
"Check if the backend is up",
],
});
};
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",
],
});
}
}
}