Fixed Undo and Redo on different pages

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -58,7 +58,6 @@ export default function GenericNode({
         if (response.status === 200) {
           let jsonResponse = await response.json();
           let jsonResponseParsed = await JSON.parse(jsonResponse);
-          console.log(jsonResponseParsed);
           setValidationStatus(jsonResponseParsed);
         }
       } catch (error) {

src/frontend/src/contexts/tabsContext.tsx

@@ -58,7 +58,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 	}
 	useEffect(() => {
 		//save tabs locally
-		// console.log(id)
 		save();
 	}, [flows, id, tabIndex, newNodeId]);
 
@@ -173,8 +172,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 	 */
 
 	function paste(selectionInstance, position){
-		console.log(position);
-		console.log(selectionInstance)
 		let minimumX = Infinity;
 		let minimumY = Infinity;
 		let idsMap = {};
@@ -214,7 +211,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 			nodes = nodes
 			  .map((e) => ({ ...e, selected: false }))
 			  .concat({ ...newNode, selected: false })
-		  console.log(nodes);
 		});
 		reactFlowInstance.setNodes(nodes);
 	
@@ -250,7 +246,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 			  },
 			  edges.map((e) => ({ ...e, selected: false }))
 			);
-			console.log(edges);
 		});
 		reactFlowInstance.setEdges(edges);
 	  };

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

@@ -183,7 +183,6 @@ export default function ChatModal({
       newWs.onopen = () => {
         console.log("WebSocket connection established!");
       };
-      console.log(flow.id);
       newWs.onmessage = (event) => {
         const data = JSON.parse(event.data);
         console.log("Received data:", data);

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -129,9 +129,7 @@ export default function CodeAreaModal({
 											onClick={() => {
 												checkCode(code)
 													.then((apiReturn) => {
-														console.log(apiReturn);
 														if (apiReturn.data) {
-															console.log(apiReturn.data);
 															let importsErrors = apiReturn.data.imports.errors;
 															let funcErrors = apiReturn.data.function.errors;
 															if (

src/frontend/src/modals/promptModal/index.tsx

@@ -109,7 +109,6 @@ export default function PromptAreaModal({
 											onClick={() => {
 												checkPrompt(myValue)
 													.then((apiReturn) => {
-														console.log(apiReturn);
 														if (apiReturn.data) {
 															let inputVariables =
 																apiReturn.data.input_variables;

src/frontend/src/pages/FlowPage/hooks/useUndoRedo.ts

@@ -1,5 +1,7 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { Edge, Node, useReactFlow } from 'reactflow';
+import { TabsContext } from '../../../contexts/tabsContext';
+import { cloneDeep } from 'lodash';
 
 type UseUndoRedoOptions = {
   maxHistorySize: number;
@@ -30,47 +32,80 @@ export const useUndoRedo: UseUndoRedo = ({
   enableShortcuts = defaultOptions.enableShortcuts,
 } = defaultOptions) => {
   // the past and future arrays store the states that we can jump to
-  const [past, setPast] = useState<HistoryItem[]>([]);
+  const { tabIndex, flows } = useContext(TabsContext);
-  const [future, setFuture] = useState<HistoryItem[]>([]);
+
+  const [past, setPast] = useState<HistoryItem[][]>(flows.map(()=>[]));
+  const [future, setFuture] = useState<HistoryItem[][]>(flows.map(()=>[]));
+
+  useEffect(() => {
+    // whenever the flows variable changes, we need to add one array to the past and future states
+    setPast((old) => flows.map((f, i)=>old[i] ? old[i] : []));
+    setFuture((old) => flows.map((f, i)=>old[i] ? old[i] : []));
+  }, [flows]);
+
 
   const { setNodes, setEdges, getNodes, getEdges } = useReactFlow();
 
   const takeSnapshot = useCallback(() => {
     // push the current graph to the past state
-    setPast((past) => [
+    setPast((old) => {
-      ...past.slice(past.length - maxHistorySize + 1, past.length),
+      let newPast = cloneDeep(old);
-      { nodes: getNodes(), edges: getEdges() },
+      newPast[tabIndex] = old[tabIndex].slice(old[tabIndex].length - maxHistorySize + 1, old[tabIndex].length);
-    ]);
+      newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
+      return newPast;
+    });
 
     // whenever we take a new snapshot, the redo operations need to be cleared to avoid state mismatches
-    setFuture([]);
+    setFuture((old) => {
-  }, [getNodes, getEdges, maxHistorySize]);
+      let newFuture = cloneDeep(old);
+      newFuture[tabIndex] = [];
+      return newFuture
+    });
+  }, [getNodes, getEdges, past, future, tabIndex, setPast, setFuture, maxHistorySize]);
 
   const undo = useCallback(() => {
     // get the last state that we want to go back to
-    const pastState = past[past.length - 1];
+    const pastState = past[tabIndex][past[tabIndex].length - 1];
 
     if (pastState) {
       // first we remove the state from the history
-      setPast((past) => past.slice(0, past.length - 1));
+      setPast((old) => {
+        let newPast = cloneDeep(old);
+        newPast[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1);
+        return newPast
+      });
       // we store the current graph for the redo operation
-      setFuture((future) => [...future, { nodes: getNodes(), edges: getEdges() }]);
+      setFuture((old) => {
+        let newFuture = cloneDeep(old);
+        newFuture[tabIndex] = old[tabIndex]
+        newFuture[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
+        return newFuture
+      });
       // now we can set the graph to the past state
       setNodes(pastState.nodes);
       setEdges(pastState.edges);
     }
-  }, [setNodes, setEdges, getNodes, getEdges, past]);
+  }, [setNodes, setEdges, getNodes, getEdges, future, past, setFuture, setPast, tabIndex]);
 
   const redo = useCallback(() => {
-    const futureState = future[future.length - 1];
+    const futureState = future[tabIndex][future[tabIndex].length - 1];
 
     if (futureState) {
-      setFuture((future) => future.slice(0, future.length - 1));
+      setFuture((old) => {
-      setPast((past) => [...past, { nodes: getNodes(), edges: getEdges() }]);
+        let newFuture = cloneDeep(old);
+        newFuture[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1);
+        return newFuture
+      });
+      setPast((old) => {
+        let newPast = cloneDeep(old);
+        newPast[tabIndex] = old[tabIndex];
+        newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
+        return newPast
+      });
       setNodes(futureState.nodes);
       setEdges(futureState.edges);
     }
-  }, [setNodes, setEdges, getNodes, getEdges, future]);
+  }, [future, past, setFuture, setPast, setNodes, setEdges, getNodes, getEdges, future, tabIndex]);
 
   useEffect(() => {
     // this effect is used to attach the global event handlers

src/frontend/src/pages/FlowPage/index.tsx

@@ -56,7 +56,6 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
     // this effect is used to attach the global event handlers
 
     const onKeyDown = (event: KeyboardEvent) => {
-      console.log("keydownou", lastCopiedSelection, position);
       if (
         (event.ctrlKey || event.metaKey) &&
         event.key === "c" &&