Hotfix: Save Flow Bug in Browser (#305)

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.

src/frontend/src/contexts/tabsContext.tsx

@@ -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)
+				//disabled until flows can be saved on local storage again without bugs
-			window.localStorage.setItem(
+		// if (flows.length !== 0)
-				"tabsData",
+		// 	window.localStorage.setItem(
-				JSON.stringify({ tabIndex, flows, id, nodeId: newNodeId.current })
+		// 		"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(() => {
+	// useEffect(() => {
-		//get tabs locally saved
+	// 	//get tabs locally saved
-		let cookie = window.localStorage.getItem("tabsData");
+	// 	let cookie = window.localStorage.getItem("tabsData");
-		if (cookie && Object.keys(templates).length > 0) {
+	// 	if (cookie && Object.keys(templates).length > 0) {
-			let cookieObject: LangFlowState = JSON.parse(cookie);
+	// 		let cookieObject: LangFlowState = JSON.parse(cookie);
-			cookieObject.flows.forEach((flow) => {
+	// 		cookieObject.flows.forEach((flow) => {
-				flow.data.nodes.forEach((node) => {
+	// 			flow.data.nodes.forEach((node) => {
-					if (Object.keys(templates[node.data.type]["template"]).length > 0) {
+	// 				if (Object.keys(templates[node.data.type]["template"]).length > 0) {
-						node.data.node.template = updateTemplate(
+	// 					node.data.node.template = updateTemplate(
-							templates[node.data.type][
+	// 						templates[node.data.type][
-								"template"
+	// 							"template"
-							] as unknown as APITemplateType,
+	// 						] 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,
 		};
 

src/frontend/src/modals/chatModal/index.tsx

@@ -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",
-        ],
-      });
     }
   }