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

Hotfix: Save Flow Bug in Browser (#304)

Browse source 
This pull request addresses a small bug related to saving flows in the
browser. The bug was causing failures and inconsistent behavior.
This commit is contained in:
anovazzi1 2023-05-15 10:32:49 -03:00 • committed by GitHub
commit bb4ab77926
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",
],
});
}
}
}