From 42ef82def05a5ea9cd1a6ea487e2296204cf4cf4 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 7 Aug 2024 16:07:58 -0300
Subject: [PATCH 01/84] fixed patch update flow

---
 .../src/controllers/API/queries/flows/use-patch-update-flow.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/controllers/API/queries/flows/use-patch-update-flow.ts b/src/frontend/src/controllers/API/queries/flows/use-patch-update-flow.ts
index d9551823e1d..c6435b9431d 100644
--- a/src/frontend/src/controllers/API/queries/flows/use-patch-update-flow.ts
+++ b/src/frontend/src/controllers/API/queries/flows/use-patch-update-flow.ts
@@ -24,7 +24,7 @@ export const usePatchUpdateFlow: useMutationFunctionType<
   const { mutate } = UseRequestProcessor();
 
   const PatchUpdateFlowFn = async (payload: IPatchUpdateFlow): Promise<any> => {
-    const response = await api.patch(`${getURL("FLOWS")}/${params}`, {
+    const response = await api.patch(`${getURL("FLOWS")}/${params.id}`, {
       name: payload.name,
       data: payload.data,
       description: payload.description,

From 4a60211593187893429bd5c18c0ae07ba6faada2 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 7 Aug 2024 16:37:57 -0300
Subject: [PATCH 02/84] fixed update flow patch to receive id by payload

---
 .../queries/flows/use-patch-update-flow.ts    | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/src/frontend/src/controllers/API/queries/flows/use-patch-update-flow.ts b/src/frontend/src/controllers/API/queries/flows/use-patch-update-flow.ts
index c6435b9431d..8b81ec3cd31 100644
--- a/src/frontend/src/controllers/API/queries/flows/use-patch-update-flow.ts
+++ b/src/frontend/src/controllers/API/queries/flows/use-patch-update-flow.ts
@@ -6,41 +6,34 @@ import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
 
 interface IPatchUpdateFlow {
+  id: string;
   name: string;
   data: ReactFlowJsonObject;
   description: string;
-  folder_id: string;
-  endpoint_name: string;
-}
-
-interface IPatchUpdateFlowParams {
-  id: string;
+  folder_id: string | null | undefined;
+  endpoint_name: string | null | undefined;
 }
 
 export const usePatchUpdateFlow: useMutationFunctionType<
-  IPatchUpdateFlowParams,
+  undefined,
   IPatchUpdateFlow
-> = (params, options?) => {
+> = (options?) => {
   const { mutate } = UseRequestProcessor();
 
   const PatchUpdateFlowFn = async (payload: IPatchUpdateFlow): Promise<any> => {
-    const response = await api.patch(`${getURL("FLOWS")}/${params.id}`, {
+    const response = await api.patch(`${getURL("FLOWS")}/${payload.id}`, {
       name: payload.name,
       data: payload.data,
       description: payload.description,
-      folder_id: payload.folder_id === "" ? null : payload.folder_id,
-      endpoint_name: payload.endpoint_name,
+      folder_id: payload.folder_id || null,
+      endpoint_name: payload.endpoint_name || null,
     });
 
     return response.data;
   };
 
   const mutation: UseMutationResult<IPatchUpdateFlow, any, IPatchUpdateFlow> =
-    mutate(
-      ["usePatchUpdateFlow", { id: params.id }],
-      PatchUpdateFlowFn,
-      options,
-    );
+    mutate(["usePatchUpdateFlow"], PatchUpdateFlowFn, options);
 
   return mutation;
 };

From 842cabaa578e1e3e969c882673677d0210b284ea Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 7 Aug 2024 16:38:09 -0300
Subject: [PATCH 03/84] created save flow hook with auto save and manual save
 functions

---
 src/frontend/src/hooks/flows/use-save-flow.ts | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 src/frontend/src/hooks/flows/use-save-flow.ts

diff --git a/src/frontend/src/hooks/flows/use-save-flow.ts b/src/frontend/src/hooks/flows/use-save-flow.ts
new file mode 100644
index 00000000000..28671b1a734
--- /dev/null
+++ b/src/frontend/src/hooks/flows/use-save-flow.ts
@@ -0,0 +1,61 @@
+import { SAVE_DEBOUNCE_TIME } from "@/constants/constants";
+import { usePatchUpdateFlow } from "@/controllers/API/queries/flows/use-patch-update-flow";
+import useAlertStore from "@/stores/alertStore";
+import useFlowsManagerStore from "@/stores/flowsManagerStore";
+import { FlowType } from "@/types/flow";
+import { debounce } from "lodash";
+
+const useSaveFlow = () => {
+  const flows = useFlowsManagerStore((state) => state.flows);
+  const setFlows = useFlowsManagerStore((state) => state.setFlows);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
+
+  const { mutate } = usePatchUpdateFlow();
+
+  const autoSaveFlow = debounce((flow?: FlowType) => {
+    saveFlow(flow).catch((e) => {
+      setErrorData({
+        title: "Failed to save flow",
+        list: [e.message],
+      });
+    });
+  }, SAVE_DEBOUNCE_TIME);
+
+  const saveFlow = async (flow?: FlowType): Promise<void> => {
+    return new Promise<void>((resolve, reject) => {
+      flow = flow || flows.find((flow) => flow.id === currentFlowId);
+      if (flow && flow.data) {
+        const { id, name, data, description, folder_id, endpoint_name } = flow;
+        mutate(
+          { id, name, data, description, folder_id, endpoint_name },
+          {
+            onSuccess: (updatedFlow) => {
+              if (updatedFlow) {
+                // updates flow in state
+                setFlows(
+                  flows.map((flow) => {
+                    if (flow.id === updatedFlow.id) {
+                      return updatedFlow;
+                    }
+                    return flow;
+                  }),
+                );
+                resolve();
+              }
+            },
+            onError: (e) => {
+              reject(e);
+            },
+          },
+        );
+      } else {
+        reject(new Error("Flow not found"));
+      }
+    });
+  };
+
+  return { saveFlow, autoSaveFlow };
+};
+
+export default useSaveFlow;

From b117f671de091baa9944ff1a3b61ce1b0be4d164 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 7 Aug 2024 17:42:43 -0300
Subject: [PATCH 04/84] fix poetry lock

---
 src/backend/base/poetry.lock | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/backend/base/poetry.lock b/src/backend/base/poetry.lock
index 7e9e76bf5a3..6142c834499 100644
--- a/src/backend/base/poetry.lock
+++ b/src/backend/base/poetry.lock
@@ -860,7 +860,6 @@ wrapt = ">=1.10,<2"
 dev = ["PyTest", "PyTest-Cov", "bump2version (<1)", "sphinx (<2)", "tox"]
 
 [[package]]
-<<<<<<< Updated upstream
 name = "devtools"
 version = "0.12.2"
 description = "Python's missing debug print command, and more."
@@ -877,8 +876,6 @@ executing = ">=1.1.1"
 pygments = ">=2.15.0"
 
 [[package]]
-=======
->>>>>>> Stashed changes
 name = "dictdiffer"
 version = "0.9.0"
 description = "Dictdiffer is a library that helps you to diff and patch dictionaries."
@@ -5259,8 +5256,4 @@ local = []
 [metadata]
 lock-version = "2.0"
 python-versions = ">=3.10,<3.13"
-<<<<<<< Updated upstream
 content-hash = "877648288f4f9d5d3304c36853d1b2c5f833d673665bf9b1c707c37bbf02e6ad"
-=======
-content-hash = "bbbc234350488c8293c4b74695db9757be15cabbf6df99ce24d569aecdcd503b"
->>>>>>> Stashed changes

From b52fc2e13a1a3dab211d09b9ee1f8ed224310666 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 7 Aug 2024 17:47:09 -0300
Subject: [PATCH 05/84] added auto save check with environment variable

---
 src/frontend/src/hooks/flows/use-save-flow.ts | 21 ++++++++++++-------
 src/frontend/vite.config.mts                  |  3 +++
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/hooks/flows/use-save-flow.ts b/src/frontend/src/hooks/flows/use-save-flow.ts
index 28671b1a734..afc74b405cf 100644
--- a/src/frontend/src/hooks/flows/use-save-flow.ts
+++ b/src/frontend/src/hooks/flows/use-save-flow.ts
@@ -1,6 +1,7 @@
 import { SAVE_DEBOUNCE_TIME } from "@/constants/constants";
 import { usePatchUpdateFlow } from "@/controllers/API/queries/flows/use-patch-update-flow";
 import useAlertStore from "@/stores/alertStore";
+import useAuthStore from "@/stores/authStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { FlowType } from "@/types/flow";
 import { debounce } from "lodash";
@@ -10,17 +11,17 @@ const useSaveFlow = () => {
   const setFlows = useFlowsManagerStore((state) => state.setFlows);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
+  const user = useAuthStore((state) => state.userData);
+
+  const shouldAutosave = Boolean(process.env.LANGFLOW_AUTO_SAVE) ?? true;
 
   const { mutate } = usePatchUpdateFlow();
 
-  const autoSaveFlow = debounce((flow?: FlowType) => {
-    saveFlow(flow).catch((e) => {
-      setErrorData({
-        title: "Failed to save flow",
-        list: [e.message],
-      });
-    });
-  }, SAVE_DEBOUNCE_TIME);
+  const autoSaveFlow = shouldAutosave
+    ? debounce((flow?: FlowType) => {
+        saveFlow(flow);
+      }, SAVE_DEBOUNCE_TIME)
+    : () => {};
 
   const saveFlow = async (flow?: FlowType): Promise<void> => {
     return new Promise<void>((resolve, reject) => {
@@ -45,6 +46,10 @@ const useSaveFlow = () => {
               }
             },
             onError: (e) => {
+              setErrorData({
+                title: "Failed to save flow",
+                list: [e.message],
+              });
               reject(e);
             },
           },
diff --git a/src/frontend/vite.config.mts b/src/frontend/vite.config.mts
index 24e4c179540..43b0d85adaa 100644
--- a/src/frontend/vite.config.mts
+++ b/src/frontend/vite.config.mts
@@ -31,6 +31,9 @@ export default defineConfig(({ mode }) => {
       outDir: "build",
     },
     define: {
+      "process.env.LANGFLOW_AUTO_SAVE": JSON.stringify(
+        process.env.LANGFLOW_AUTO_SAVE,
+      ),
       "process.env.BACKEND_URL": JSON.stringify(process.env.BACKEND_URL),
       "process.env.ACCESS_TOKEN_EXPIRE_SECONDS": JSON.stringify(
         process.env.ACCESS_TOKEN_EXPIRE_SECONDS,

From 4d7a7a35cebb001615591453002a2f5b125aebc5 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 7 Aug 2024 17:47:18 -0300
Subject: [PATCH 06/84] removed unused user

---
 src/frontend/src/hooks/flows/use-save-flow.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/frontend/src/hooks/flows/use-save-flow.ts b/src/frontend/src/hooks/flows/use-save-flow.ts
index afc74b405cf..8699ae7312e 100644
--- a/src/frontend/src/hooks/flows/use-save-flow.ts
+++ b/src/frontend/src/hooks/flows/use-save-flow.ts
@@ -1,7 +1,6 @@
 import { SAVE_DEBOUNCE_TIME } from "@/constants/constants";
 import { usePatchUpdateFlow } from "@/controllers/API/queries/flows/use-patch-update-flow";
 import useAlertStore from "@/stores/alertStore";
-import useAuthStore from "@/stores/authStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { FlowType } from "@/types/flow";
 import { debounce } from "lodash";
@@ -11,7 +10,6 @@ const useSaveFlow = () => {
   const setFlows = useFlowsManagerStore((state) => state.setFlows);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
-  const user = useAuthStore((state) => state.userData);
 
   const shouldAutosave = Boolean(process.env.LANGFLOW_AUTO_SAVE) ?? true;
 

From 05840eb37a13f62b6f8b713269d55a9f20884905 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 7 Aug 2024 18:21:18 -0300
Subject: [PATCH 07/84] separated autosave and put the flow as a creation with
 nodes and edges

---
 src/frontend/src/hooks/flows/use-save-flow.ts | 34 +++++++++++++------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/hooks/flows/use-save-flow.ts b/src/frontend/src/hooks/flows/use-save-flow.ts
index 8699ae7312e..39818dd25ef 100644
--- a/src/frontend/src/hooks/flows/use-save-flow.ts
+++ b/src/frontend/src/hooks/flows/use-save-flow.ts
@@ -1,29 +1,40 @@
-import { SAVE_DEBOUNCE_TIME } from "@/constants/constants";
 import { usePatchUpdateFlow } from "@/controllers/API/queries/flows/use-patch-update-flow";
 import useAlertStore from "@/stores/alertStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
+import useFlowStore from "@/stores/flowStore";
 import { FlowType } from "@/types/flow";
-import { debounce } from "lodash";
 
 const useSaveFlow = () => {
   const flows = useFlowsManagerStore((state) => state.flows);
   const setFlows = useFlowsManagerStore((state) => state.setFlows);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
+  const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
+  const nodes = useFlowStore((state) => state.nodes);
+  const edges = useFlowStore((state) => state.edges);
 
-  const shouldAutosave = Boolean(process.env.LANGFLOW_AUTO_SAVE) ?? true;
+  const currentFlow = flows.find((flow) => flow.id === currentFlowId);
+  const flowData = currentFlow?.data;
 
   const { mutate } = usePatchUpdateFlow();
 
-  const autoSaveFlow = shouldAutosave
-    ? debounce((flow?: FlowType) => {
-        saveFlow(flow);
-      }, SAVE_DEBOUNCE_TIME)
-    : () => {};
-
   const saveFlow = async (flow?: FlowType): Promise<void> => {
     return new Promise<void>((resolve, reject) => {
-      flow = flow || flows.find((flow) => flow.id === currentFlowId);
+      if (currentFlow) {
+        flow = flow || {
+          ...currentFlow,
+          data: {
+            ...flowData,
+            nodes,
+            edges,
+            viewport: reactFlowInstance?.getViewport() ?? {
+              zoom: 1,
+              x: 0,
+              y: 0,
+            },
+          },
+        };
+      }
       if (flow && flow.data) {
         const { id, name, data, description, folder_id, endpoint_name } = flow;
         mutate(
@@ -32,6 +43,7 @@ const useSaveFlow = () => {
             onSuccess: (updatedFlow) => {
               if (updatedFlow) {
                 // updates flow in state
+                console.log("uai");
                 setFlows(
                   flows.map((flow) => {
                     if (flow.id === updatedFlow.id) {
@@ -58,7 +70,7 @@ const useSaveFlow = () => {
     });
   };
 
-  return { saveFlow, autoSaveFlow };
+  return saveFlow;
 };
 
 export default useSaveFlow;

From f1dae3d1b065b23c1de1c5e1424bb1aafaccb22a Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 7 Aug 2024 18:21:36 -0300
Subject: [PATCH 08/84] removed set nodes that skipped saving

---
 .../cardComponent/hooks/use-playground-effect.tsx    | 12 ++++++------
 src/frontend/src/pages/Playground/index.tsx          | 10 ++++------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx b/src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx
index e9236e98be1..ab05c0c036a 100644
--- a/src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx
+++ b/src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx
@@ -6,18 +6,18 @@ const usePlaygroundEffect = (
   playground: boolean,
   openPlayground: boolean,
   currentFlow: FlowType | undefined,
-  setNodes: (value: any, value2: boolean) => void,
-  setEdges: (value: any, value2: boolean) => void,
+  setNodes: (value: any) => void,
+  setEdges: (value: any) => void,
   cleanFlowPool: () => void,
 ) => {
   useEffect(() => {
     if (currentFlowId && playground) {
       if (openPlayground) {
-        setNodes(currentFlow?.data?.nodes ?? [], true);
-        setEdges(currentFlow?.data?.edges ?? [], true);
+        setNodes(currentFlow?.data?.nodes ?? []);
+        setEdges(currentFlow?.data?.edges ?? []);
       } else {
-        setNodes([], true);
-        setEdges([], true);
+        setNodes([]);
+        setEdges([]);
       }
       cleanFlowPool();
     }
diff --git a/src/frontend/src/pages/Playground/index.tsx b/src/frontend/src/pages/Playground/index.tsx
index 4ea3cc506db..694468a652c 100644
--- a/src/frontend/src/pages/Playground/index.tsx
+++ b/src/frontend/src/pages/Playground/index.tsx
@@ -13,7 +13,6 @@ export default function PlaygroundPage() {
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId,
   );
-  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
   const setNodes = useFlowStore((state) => state.setNodes);
   const setEdges = useFlowStore((state) => state.setEdges);
@@ -37,17 +36,16 @@ export default function PlaygroundPage() {
       });
     }
   }, [id]);
-
   useEffect(() => {
     if (currentFlow) {
-      setNodes(currentFlow?.data?.nodes ?? [], true);
-      setEdges(currentFlow?.data?.edges ?? [], true);
+      setNodes(currentFlow?.data?.nodes ?? []);
+      setEdges(currentFlow?.data?.edges ?? []);
       cleanFlowPool();
       setLoading(false);
     }
     return () => {
-      setNodes([], true);
-      setEdges([], true);
+      setNodes([]);
+      setEdges([]);
       cleanFlowPool();
     };
   }, [currentFlow]);

From 67454082da656d54a03ac5f0b0f7732bbfdd50eb Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 7 Aug 2024 18:21:51 -0300
Subject: [PATCH 09/84] implemented auto save hook

---
 .../src/hooks/flows/use-autosave-flow.ts      | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/frontend/src/hooks/flows/use-autosave-flow.ts

diff --git a/src/frontend/src/hooks/flows/use-autosave-flow.ts b/src/frontend/src/hooks/flows/use-autosave-flow.ts
new file mode 100644
index 00000000000..15983e2527c
--- /dev/null
+++ b/src/frontend/src/hooks/flows/use-autosave-flow.ts
@@ -0,0 +1,25 @@
+import { SAVE_DEBOUNCE_TIME } from "@/constants/constants";
+import { FlowType } from "@/types/flow";
+import { debounce } from "lodash";
+import { useMemo } from "react";
+import useSaveFlow from "./use-save-flow";
+
+const useAutoSaveFlow = () => {
+  const saveFlow = useSaveFlow();
+
+  const shouldAutosave = Boolean(process.env.LANGFLOW_AUTO_SAVE) ?? true;
+
+  const autoSaveFlow = shouldAutosave
+    ? useMemo(
+        () =>
+          debounce((flow?: FlowType) => {
+            saveFlow(flow);
+          }, SAVE_DEBOUNCE_TIME),
+        [],
+      )
+    : () => {};
+
+  return autoSaveFlow;
+};
+
+export default useAutoSaveFlow;

From 647ef80a46ea595048d6c04381c6229b5bc6b8b2 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 7 Aug 2024 18:23:24 -0300
Subject: [PATCH 10/84] removed autosave from setNodes and setEdges

---
 src/frontend/src/stores/flowStore.ts | 22 ++--------------------
 1 file changed, 2 insertions(+), 20 deletions(-)

diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index 489cfb1ead0..50ba74d28d9 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -206,7 +206,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       edges: applyEdgeChanges(changes, get().edges),
     });
   },
-  setNodes: (change, skipSave = false) => {
+  setNodes: (change) => {
     let newChange = typeof change === "function" ? change(get().nodes) : change;
     let newEdges = cleanEdges(newChange, get().edges);
     const { inputs, outputs } = getInputsAndOutputs(newChange);
@@ -219,31 +219,13 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       outputs,
       hasIO: inputs.length > 0 || outputs.length > 0,
     });
-
-    const flowsManager = useFlowsManagerStore.getState();
-    if (!get().isBuilding && !skipSave && get().onFlowPage) {
-      flowsManager.autoSaveCurrentFlow(
-        newChange,
-        newEdges,
-        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 },
-      );
-    }
   },
-  setEdges: (change, skipSave = false) => {
+  setEdges: (change) => {
     let newChange = typeof change === "function" ? change(get().edges) : change;
     set({
       edges: newChange,
       flowState: undefined,
     });
-
-    const flowsManager = useFlowsManagerStore.getState();
-    if (!get().isBuilding && !skipSave && get().onFlowPage) {
-      flowsManager.autoSaveCurrentFlow(
-        get().nodes,
-        newChange,
-        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 },
-      );
-    }
   },
   setNode: (
     id: string,

From 55c590c93d822c2f33fe61d629e265774564f3f5 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 7 Aug 2024 18:25:45 -0300
Subject: [PATCH 11/84] added auto save hook and saved on viewport move and
 added useEffect to save on nodes and edges changed

---
 .../components/PageComponent/index.tsx        | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index cddddeb0585..cbf5e64351a 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -1,5 +1,6 @@
 import LoadingComponent from "@/components/loadingComponent";
 import { useGetBuildsQuery } from "@/controllers/API/queries/_builds";
+import useAutoSaveFlow from "@/hooks/flows/use-autosave-flow";
 import useUploadFlow from "@/hooks/flows/use-upload-flow";
 import { getInputsAndOutputs } from "@/utils/storeUtils";
 import _, { cloneDeep } from "lodash";
@@ -65,9 +66,7 @@ export default function Page({
   view?: boolean;
 }): JSX.Element {
   const uploadFlow = useUploadFlow();
-  const autoSaveCurrentFlow = useFlowsManagerStore(
-    (state) => state.autoSaveCurrentFlow,
-  );
+  const autoSaveFlow = useAutoSaveFlow();
   const types = useTypesStore((state) => state.types);
   const templates = useTypesStore((state) => state.templates);
   const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
@@ -200,6 +199,12 @@ export default function Page({
     };
   }, [currentFlowId]);
 
+  useEffect(() => {
+    if (nodes.length !== 0) {
+      autoSaveFlow();
+    }
+  }, [nodes, edges]);
+
   function handleUndo(e: KeyboardEvent) {
     if (!isWrappedWithClass(e, "noflow")) {
       e.preventDefault();
@@ -334,15 +339,10 @@ export default function Page({
     // 👉 you can place your event handlers here
   }, [takeSnapshot]);
 
-  const onNodeDragStop: NodeDragHandler = useCallback(() => {
-    autoSaveCurrentFlow(nodes, edges, reactFlowInstance?.getViewport()!);
-    // 👉 you can place your event handlers here
-  }, [takeSnapshot, autoSaveCurrentFlow, nodes, edges, reactFlowInstance]);
-
   const onMoveEnd: OnMove = useCallback(() => {
     // 👇 make moving the canvas undoable
-    autoSaveCurrentFlow(nodes, edges, reactFlowInstance?.getViewport()!);
-  }, [takeSnapshot, autoSaveCurrentFlow, nodes, edges, reactFlowInstance]);
+    autoSaveFlow();
+  }, [takeSnapshot, autoSaveFlow, nodes, edges, reactFlowInstance]);
 
   const onSelectionDragStart: SelectionDragHandler = useCallback(() => {
     // 👇 make dragging a selection undoable
@@ -493,7 +493,6 @@ export default function Page({
             onEdgeUpdateStart={onEdgeUpdateStart}
             onEdgeUpdateEnd={onEdgeUpdateEnd}
             onNodeDragStart={onNodeDragStart}
-            onNodeDragStop={onNodeDragStop}
             onSelectionDragStart={onSelectionDragStart}
             onSelectionEnd={onSelectionEnd}
             onSelectionStart={onSelectionStart}

From b70cfb1b020ab439e4353f3cad503be7a5e7c648 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 7 Aug 2024 18:26:02 -0300
Subject: [PATCH 12/84] changed type of setNodes

---
 src/frontend/src/types/zustand/flow/index.ts | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts
index 59ea979fad9..da52455e297 100644
--- a/src/frontend/src/types/zustand/flow/index.ts
+++ b/src/frontend/src/types/zustand/flow/index.ts
@@ -101,14 +101,8 @@ export type FlowStoreType = {
   edges: Edge[];
   onNodesChange: OnNodesChange;
   onEdgesChange: OnEdgesChange;
-  setNodes: (
-    update: Node[] | ((oldState: Node[]) => Node[]),
-    skipSave?: boolean,
-  ) => void;
-  setEdges: (
-    update: Edge[] | ((oldState: Edge[]) => Edge[]),
-    skipSave?: boolean,
-  ) => void;
+  setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void;
+  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void;
   setNode: (
     id: string,
     update: Node | ((oldState: Node) => Node),

From e9f30bfc55a6d1fdb46d8615be12edb5774f2d7e Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 8 Aug 2024 11:40:20 -0300
Subject: [PATCH 13/84] removed unused var

---
 src/frontend/src/components/chatComponent/index.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index cf4ea95e241..7823adcbbef 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -1,6 +1,6 @@
 import FeatureFlags from "@/../feature-config.json";
 import { Transition } from "@headlessui/react";
-import { useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import IOModal from "../../modals/IOModal";
 import ApiModal from "../../modals/apiModal";
@@ -49,8 +49,6 @@ export default function FlowToolbar(): JSX.Element {
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
 
-  const prevNodesRef = useRef<any[] | undefined>();
-
   const ModalMemo = useMemo(
     () => (
       <ShareModal

From cdb61ac10fe9920f645c57c04bb7d98daf88ae5a Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 8 Aug 2024 11:41:15 -0300
Subject: [PATCH 14/84] removed deletion of empty flow

---
 .../src/components/headerComponent/index.tsx    | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index c806b4d5cae..ab63a9ecb9b 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { FaDiscord, FaGithub } from "react-icons/fa";
 import { RiTwitterXFill } from "react-icons/ri";
-import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import AlertDropdown from "../../alerts/alertDropDown";
 import {
   BASE_URL_API,
@@ -12,11 +12,9 @@ import { AuthContext } from "../../contexts/authContext";
 
 import FeatureFlags from "@/../feature-config.json";
 import { useLogout } from "@/controllers/API/queries/auth";
-import useDeleteFlow from "@/hooks/flows/use-delete-flow";
 import useAuthStore from "@/stores/authStore";
 import useAlertStore from "../../stores/alertStore";
 import { useDarkStore } from "../../stores/darkStore";
-import useFlowStore from "../../stores/flowStore";
 import { useLocationStore } from "../../stores/locationStore";
 import { useStoreStore } from "../../stores/storeStore";
 import IconComponent, { ForwardedIconComponent } from "../genericIconComponent";
@@ -44,10 +42,7 @@ export default function Header(): JSX.Element {
   const logout = useAuthStore((state) => state.logout);
 
   const navigate = useNavigate();
-  const deleteFlow = useDeleteFlow();
   const hasStore = useStoreStore((state) => state.hasStore);
-  const { id } = useParams();
-  const nodes = useFlowStore((state) => state.nodes);
 
   const dark = useDarkStore((state) => state.dark);
   const setDark = useDarkStore((state) => state.setDark);
@@ -58,11 +53,6 @@ export default function Header(): JSX.Element {
   const profileImageUrl = `${BASE_URL_API}files/profile_pictures/${
     userData?.profile_image ?? "Space/046-rocket.svg"
   }`;
-  async function checkForChanges(): Promise<void> {
-    if (nodes.length === 0 && id) {
-      await deleteFlow({ id });
-    }
-  }
 
   const redirectToLastLocation = () => {
     const lastFlowVisitedIndex = routeHistory
@@ -100,14 +90,13 @@ export default function Header(): JSX.Element {
   return (
     <div className="header-arrangement">
       <div className="header-start-display lg:w-[407px]">
-        <Link to="/all" className="cursor-pointer" onClick={checkForChanges}>
+        <Link to="/all" className="cursor-pointer">
           <span className="ml-4 text-2xl">⛓️</span>
         </Link>
         {showArrowReturnIcon && (
           <Button
             unstyled
             onClick={() => {
-              checkForChanges();
               redirectToLastLocation();
             }}
           >
@@ -129,7 +118,6 @@ export default function Header(): JSX.Element {
                 : "secondary"
             }
             size="sm"
-            onClick={checkForChanges}
           >
             <IconComponent name="Home" className="h-4 w-4" />
             <div className="hidden flex-1 md:block">{USER_PROJECTS_HEADER}</div>
@@ -142,7 +130,6 @@ export default function Header(): JSX.Element {
               className="gap-2"
               variant={location.pathname === "/store" ? "primary" : "secondary"}
               size="sm"
-              onClick={checkForChanges}
               data-testid="button-store"
             >
               <IconComponent name="Store" className="h-4 w-4" />

From 7db78aceebc40430ba882dd875ff8a1a1257dea1 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 8 Aug 2024 11:41:39 -0300
Subject: [PATCH 15/84] Added saving of flow on button when autoSave is
 disabled

---
 .../components/menuBar/index.tsx              | 45 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index b7475e6d547..a5a2747af92 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -8,6 +8,7 @@ import {
 } from "../../../ui/dropdown-menu";
 
 import useAddFlow from "@/hooks/flows/use-add-flow";
+import useSaveFlow from "@/hooks/flows/use-save-flow";
 import useUploadFlow from "@/hooks/flows/use-upload-flow";
 import { useNavigate } from "react-router-dom";
 import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
@@ -46,6 +47,20 @@ export const MenuBar = ({}: {}): JSX.Element => {
   const navigate = useNavigate();
   const isBuilding = useFlowStore((state) => state.isBuilding);
   const getTypes = useTypesStore((state) => state.getTypes);
+  const saveFlow = useSaveFlow();
+  const shouldAutosave = process.env.LANGFLOW_AUTO_SAVE !== "false";
+  const updatedAt = currentFlow?.updated_at;
+  const currentTime = new Date();
+  const updatedTime = new Date(updatedAt ?? "");
+  const timeDifference =
+    (currentTime.getTime() - updatedTime.getTime()) / 1000 / 60; // difference in minutes
+  const savedText =
+    updatedAt && timeDifference > 1
+      ? new Date(currentFlow.updated_at ?? "").toLocaleString("en-US", {
+          hour: "numeric",
+          minute: "numeric",
+        })
+      : "Saved";
 
   function handleAddFlow() {
     try {
@@ -69,7 +84,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
     } else if (saveLoading) {
       return "Saving...";
     }
-    return "Saved";
+    return savedText;
   }
 
   return currentFlow ? (
@@ -112,6 +127,26 @@ export const MenuBar = ({}: {}): JSX.Element => {
               <IconComponent name="Settings2" className="header-menu-options" />
               Settings
             </DropdownMenuItem>
+            {!shouldAutosave && (
+              <DropdownMenuItem
+                onClick={() => {
+                  saveFlow().then(() => {
+                    setSuccessData({ title: "Saved successfully" });
+                  });
+                }}
+                className="cursor-pointer"
+              >
+                <ToolbarSelectItem
+                  value="Save"
+                  icon="Save"
+                  dataTestId=""
+                  shortcut={
+                    shortcuts.find((s) => s.name.toLowerCase() === "save")
+                      ?.shortcut!
+                  }
+                />
+              </DropdownMenuItem>
+            )}
             <DropdownMenuItem
               onClick={() => {
                 setOpenLogs(true);
@@ -221,7 +256,13 @@ export const MenuBar = ({}: {}): JSX.Element => {
           <div className="flex cursor-default items-center gap-2 text-sm text-muted-foreground transition-all">
             <div className="flex cursor-default items-center gap-1.5 text-sm text-muted-foreground transition-all">
               <IconComponent
-                name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"}
+                name={
+                  isBuilding || saveLoading
+                    ? "Loader2"
+                    : timeDifference > 1
+                      ? "Save"
+                      : "CheckCircle2"
+                }
                 className={cn(
                   "h-4 w-4",
                   isBuilding || saveLoading ? "animate-spin" : "animate-wiggle",

From 43d75a4e29440f48be9e8639ca76dae550d6ab03 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 8 Aug 2024 11:41:58 -0300
Subject: [PATCH 16/84] disable saving when the nodes are empty

---
 .../src/controllers/API/queries/flows/use-patch-update-flow.ts   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/frontend/src/controllers/API/queries/flows/use-patch-update-flow.ts b/src/frontend/src/controllers/API/queries/flows/use-patch-update-flow.ts
index 8b81ec3cd31..1bbe871e2d8 100644
--- a/src/frontend/src/controllers/API/queries/flows/use-patch-update-flow.ts
+++ b/src/frontend/src/controllers/API/queries/flows/use-patch-update-flow.ts
@@ -21,6 +21,7 @@ export const usePatchUpdateFlow: useMutationFunctionType<
   const { mutate } = UseRequestProcessor();
 
   const PatchUpdateFlowFn = async (payload: IPatchUpdateFlow): Promise<any> => {
+    if (payload.data.nodes.length === 0) return null;
     const response = await api.patch(`${getURL("FLOWS")}/${payload.id}`, {
       name: payload.name,
       data: payload.data,

From 063efd39d705045c7f15105c880afbbb179abacc Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 8 Aug 2024 11:42:17 -0300
Subject: [PATCH 17/84] removed save loading as false when the access token is
 renewed

---
 src/frontend/src/controllers/API/api.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx
index 00d38690a6e..d9b06945559 100644
--- a/src/frontend/src/controllers/API/api.tsx
+++ b/src/frontend/src/controllers/API/api.tsx
@@ -1,6 +1,5 @@
 import { LANGFLOW_ACCESS_TOKEN } from "@/constants/constants";
 import useAuthStore from "@/stores/authStore";
-import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import axios, { AxiosError, AxiosInstance, AxiosRequestConfig } from "axios";
 import { useContext, useEffect } from "react";
 import { Cookies } from "react-cookie";
@@ -21,8 +20,6 @@ function ApiInterceptor() {
   const autoLogin = useAuthStore((state) => state.autoLogin);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   let { accessToken, authenticationErrorCount } = useContext(AuthContext);
-
-  const setSaveLoading = useFlowsManagerStore((state) => state.setSaveLoading);
   const { mutate: mutationLogout } = useLogout();
   const { mutate: mutationRenewAccessToken } = useRefreshAccessToken();
   const logout = useAuthStore((state) => state.logout);
@@ -152,7 +149,6 @@ function ApiInterceptor() {
         onSuccess: async (data) => {
           authenticationErrorCount = 0;
           await remakeRequest(error);
-          setSaveLoading(false);
           authenticationErrorCount = 0;
         },
         onError: (error) => {

From 1fe147e5d10f974cb5172f2ac1b66eca53aca170 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 8 Aug 2024 11:42:26 -0300
Subject: [PATCH 18/84] implemented useDebounce

---
 src/frontend/src/hooks/use-debounce.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 src/frontend/src/hooks/use-debounce.ts

diff --git a/src/frontend/src/hooks/use-debounce.ts b/src/frontend/src/hooks/use-debounce.ts
new file mode 100644
index 00000000000..5de7761739b
--- /dev/null
+++ b/src/frontend/src/hooks/use-debounce.ts
@@ -0,0 +1,13 @@
+import { debounce } from "lodash";
+import { useLayoutEffect, useMemo, useRef } from "react";
+
+export function useDebounce(callback, delay) {
+  const callbackRef = useRef(callback);
+  useLayoutEffect(() => {
+    callbackRef.current = callback;
+  });
+  return useMemo(
+    () => debounce((...args) => callbackRef.current(...args), delay),
+    [delay],
+  );
+}

From dec884e41c67cc41ace5285b519463433253471e Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 8 Aug 2024 11:42:48 -0300
Subject: [PATCH 19/84] added save loading to save flow hook

---
 src/frontend/src/hooks/flows/use-save-flow.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/hooks/flows/use-save-flow.ts b/src/frontend/src/hooks/flows/use-save-flow.ts
index 39818dd25ef..7872a632201 100644
--- a/src/frontend/src/hooks/flows/use-save-flow.ts
+++ b/src/frontend/src/hooks/flows/use-save-flow.ts
@@ -8,17 +8,18 @@ const useSaveFlow = () => {
   const flows = useFlowsManagerStore((state) => state.flows);
   const setFlows = useFlowsManagerStore((state) => state.setFlows);
   const setErrorData = useAlertStore((state) => state.setErrorData);
-  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
+  const setSaveLoading = useFlowsManagerStore((state) => state.setSaveLoading);
 
-  const currentFlow = flows.find((flow) => flow.id === currentFlowId);
+  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const flowData = currentFlow?.data;
 
   const { mutate } = usePatchUpdateFlow();
 
   const saveFlow = async (flow?: FlowType): Promise<void> => {
+    setSaveLoading(true);
     return new Promise<void>((resolve, reject) => {
       if (currentFlow) {
         flow = flow || {
@@ -41,9 +42,8 @@ const useSaveFlow = () => {
           { id, name, data, description, folder_id, endpoint_name },
           {
             onSuccess: (updatedFlow) => {
-              if (updatedFlow) {
+              if (updatedFlow !== null) {
                 // updates flow in state
-                console.log("uai");
                 setFlows(
                   flows.map((flow) => {
                     if (flow.id === updatedFlow.id) {
@@ -52,6 +52,7 @@ const useSaveFlow = () => {
                     return flow;
                   }),
                 );
+                setSaveLoading(false);
                 resolve();
               }
             },
@@ -60,6 +61,7 @@ const useSaveFlow = () => {
                 title: "Failed to save flow",
                 list: [e.message],
               });
+              setSaveLoading(false);
               reject(e);
             },
           },

From b87e0e070bfacefd019c7b76261fe95439d49e94 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 8 Aug 2024 11:43:38 -0300
Subject: [PATCH 20/84] removed setting nodes and edges on fetching, since they
 are set when the current flow is updated

---
 .../components/PageComponent/index.tsx         | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index cbf5e64351a..f41e933bd41 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -40,7 +40,6 @@ import { APIClassType } from "../../../../types/api";
 import { FlowType, NodeType } from "../../../../types/flow";
 import {
   checkOldComponents,
-  cleanEdges,
   generateFlow,
   generateNodeFromFlow,
   getNodeId,
@@ -96,7 +95,8 @@ export default function Page({
     (state) => state.setLastCopiedSelection,
   );
   const onConnect = useFlowStore((state) => state.onConnect);
-  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
+  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setNoticeData = useAlertStore((state) => state.setNoticeData);
   const [selectionMenuVisible, setSelectionMenuVisible] = useState(false);
@@ -110,8 +110,8 @@ export default function Page({
   const setInputs = useFlowStore((state) => state.setInputs);
   const setOutputs = useFlowStore((state) => state.setOutputs);
   const setHasIO = useFlowStore((state) => state.setHasIO);
+  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const { inputs, outputs } = getInputsAndOutputs(flow.data!.nodes);
-  const viewport = flow?.data?.viewport ?? { zoom: 1, x: 0, y: 0 };
 
   function handleGroupNode() {
     takeSnapshot();
@@ -159,7 +159,8 @@ export default function Page({
   }, [lastCopiedSelection, lastSelection, takeSnapshot, selectionMenuVisible]);
 
   useEffect(() => {
-    if (reactFlowInstance && currentFlowId) {
+    if (reactFlowInstance && currentFlow) {
+      const viewport = currentFlow.data?.viewport ?? { zoom: 1, x: 0, y: 0 };
       reactFlowInstance!.setViewport(viewport);
     }
   }, [currentFlowId, reactFlowInstance]);
@@ -173,9 +174,6 @@ export default function Page({
 
   useEffect(() => {
     if (!isFetching) {
-      let newEdges = cleanEdges(flow.data!.nodes, flow.data!.edges);
-      setNodes(flow.data!.nodes);
-      setEdges(newEdges);
       setFlowState(undefined);
       setInputs(inputs);
       setOutputs(outputs);
@@ -184,7 +182,7 @@ export default function Page({
   }, [isFetching]);
 
   useEffect(() => {
-    if (checkOldComponents({ nodes: flow?.data?.nodes ?? [] })) {
+    if (checkOldComponents({ nodes })) {
       setNoticeData({
         title:
           "Components created before Langflow 1.0 may be unstable. Ensure components are up to date.",
@@ -200,9 +198,7 @@ export default function Page({
   }, [currentFlowId]);
 
   useEffect(() => {
-    if (nodes.length !== 0) {
-      autoSaveFlow();
-    }
+    autoSaveFlow();
   }, [nodes, edges]);
 
   function handleUndo(e: KeyboardEvent) {

From f3eb79173cbf1b4fb3a3d3b7bb453932ac493969 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 8 Aug 2024 11:43:52 -0300
Subject: [PATCH 21/84] removed unused var

---
 .../src/pages/FlowPage/components/PageComponent/index.tsx        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index f41e933bd41..69c5129d262 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -96,7 +96,6 @@ export default function Page({
   );
   const onConnect = useFlowStore((state) => state.onConnect);
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
-  const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setNoticeData = useAlertStore((state) => state.setNoticeData);
   const [selectionMenuVisible, setSelectionMenuVisible] = useState(false);

From 65f62fbb8a7bfe54ac32d5e6809bf881118da37f Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 8 Aug 2024 11:44:04 -0300
Subject: [PATCH 22/84] use debounce hook to save flow

---
 .../src/hooks/flows/use-autosave-flow.ts         | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/hooks/flows/use-autosave-flow.ts b/src/frontend/src/hooks/flows/use-autosave-flow.ts
index 15983e2527c..62fe8562d7a 100644
--- a/src/frontend/src/hooks/flows/use-autosave-flow.ts
+++ b/src/frontend/src/hooks/flows/use-autosave-flow.ts
@@ -1,22 +1,16 @@
 import { SAVE_DEBOUNCE_TIME } from "@/constants/constants";
 import { FlowType } from "@/types/flow";
-import { debounce } from "lodash";
-import { useMemo } from "react";
+import { useDebounce } from "../use-debounce";
 import useSaveFlow from "./use-save-flow";
 
 const useAutoSaveFlow = () => {
   const saveFlow = useSaveFlow();
-
-  const shouldAutosave = Boolean(process.env.LANGFLOW_AUTO_SAVE) ?? true;
+  const shouldAutosave = process.env.LANGFLOW_AUTO_SAVE !== "false";
 
   const autoSaveFlow = shouldAutosave
-    ? useMemo(
-        () =>
-          debounce((flow?: FlowType) => {
-            saveFlow(flow);
-          }, SAVE_DEBOUNCE_TIME),
-        [],
-      )
+    ? useDebounce((flow?: FlowType) => {
+        saveFlow(flow);
+      }, SAVE_DEBOUNCE_TIME)
     : () => {};
 
   return autoSaveFlow;

From 4a61a5b977e666d43b3659dd80a155e77ff10182 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 8 Aug 2024 11:44:34 -0300
Subject: [PATCH 23/84] set nodes and edges on current flow id change

---
 src/frontend/src/stores/flowsManagerStore.ts | 22 ++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts
index 1c2c69c3730..1a0a25325f6 100644
--- a/src/frontend/src/stores/flowsManagerStore.ts
+++ b/src/frontend/src/stores/flowsManagerStore.ts
@@ -14,6 +14,7 @@ import {
   UseUndoRedoOptions,
 } from "../types/zustand/flowsManager";
 import {
+  cleanEdges,
   extractFieldsFromComponenents,
   processFlows,
 } from "../utils/reactflowUtils";
@@ -37,19 +38,28 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
   },
   currentFlowId: "",
   setCurrentFlow: (flow: FlowType) => {
-    set((state) => ({
+    set({
       currentFlow: flow,
       currentFlowId: flow.id,
-    }));
+    });
+    useFlowStore.setState({
+      nodes: flow?.data?.nodes ?? [],
+      edges: flow?.data?.edges ?? [],
+    });
   },
   getFlowById: (id: string) => {
     return get().flows.find((flow) => flow.id === id);
   },
   setCurrentFlowId: (currentFlowId: string) => {
-    set((state) => ({
+    const flow = get().flows?.find((flow) => flow.id === currentFlowId);
+    let newEdges = cleanEdges(flow?.data!.nodes ?? [], flow?.data!.edges ?? []);
+    set({
       currentFlowId,
-      currentFlow: state.flows.find((flow) => flow.id === currentFlowId),
-    }));
+      currentFlow:
+        get().flows?.find((flow) => flow.id === currentFlowId) ?? undefined,
+    });
+
+    useFlowStore.setState({ edges: newEdges, nodes: flow?.data?.nodes ?? [] });
   },
   flows: [],
   allFlows: [],
@@ -57,6 +67,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     set({ allFlows });
   },
   setFlows: (flows: FlowType[]) => {
+    console.log("setando o flou", flows);
     set({
       flows,
       currentFlow: flows.find((flow) => flow.id === get().currentFlowId),
@@ -127,7 +138,6 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
       ? useFolderStore.getState().folderUrl
       : useFolderStore.getState().myCollectionId ?? "";
 
-    set({ saveLoading: true });
     return new Promise<void>((resolve, reject) => {
       updateFlowInDatabase(flow)
         .then((updatedFlow) => {

From 210a86b51bc52ad9635dad0431f2011173662e04 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 8 Aug 2024 12:53:42 -0300
Subject: [PATCH 24/84] removed useplaygroundeffect

---
 .../hooks/use-playground-effect.tsx           | 27 -------------------
 .../src/components/cardComponent/index.tsx    | 23 +++-------------
 2 files changed, 3 insertions(+), 47 deletions(-)
 delete mode 100644 src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx

diff --git a/src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx b/src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx
deleted file mode 100644
index ab05c0c036a..00000000000
--- a/src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useEffect } from "react";
-import { FlowType } from "../../../types/flow";
-
-const usePlaygroundEffect = (
-  currentFlowId: string,
-  playground: boolean,
-  openPlayground: boolean,
-  currentFlow: FlowType | undefined,
-  setNodes: (value: any) => void,
-  setEdges: (value: any) => void,
-  cleanFlowPool: () => void,
-) => {
-  useEffect(() => {
-    if (currentFlowId && playground) {
-      if (openPlayground) {
-        setNodes(currentFlow?.data?.nodes ?? []);
-        setEdges(currentFlow?.data?.edges ?? []);
-      } else {
-        setNodes([]);
-        setEdges([]);
-      }
-      cleanFlowPool();
-    }
-  }, [openPlayground]);
-};
-
-export default usePlaygroundEffect;
diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 0e6af1f35f2..f90f2c35024 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -1,12 +1,10 @@
 import { usePostLikeComponent } from "@/controllers/API/queries/store";
-import { useEffect, useState } from "react";
-import { createRoot } from "react-dom/client";
+import { useState } from "react";
 import { Control } from "react-hook-form";
-import { getComponent, postLikeComponent } from "../../controllers/API";
+import { getComponent } from "../../controllers/API";
 import IOModal from "../../modals/IOModal";
 import DeleteConfirmationModal from "../../modals/deleteConfirmationModal";
 import useAlertStore from "../../stores/alertStore";
-import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { FlowType } from "../../types/flow";
@@ -31,7 +29,6 @@ import Loading from "../ui/loading";
 import useDataEffect from "./hooks/use-data-effect";
 import useInstallComponent from "./hooks/use-handle-install";
 import useDragStart from "./hooks/use-on-drag-start";
-import usePlaygroundEffect from "./hooks/use-playground-effect";
 import { convertTestName } from "./utils/convert-test-name";
 
 export default function CollectionCardComponent({
@@ -56,7 +53,6 @@ export default function CollectionCardComponent({
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setValidApiKey = useStoreStore((state) => state.updateValidApiKey);
-  const cleanFlowPool = useFlowStore((state) => state.CleanFlowPool);
   const isStore = false;
   const [loading, setLoading] = useState(false);
   const [likedByUser, setLikedByUser] = useState(data?.liked_by_user ?? false);
@@ -64,12 +60,8 @@ export default function CollectionCardComponent({
   const [downloadsCount, setDownloadsCount] = useState(
     data?.downloads_count ?? 0,
   );
-  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
   const getFlowById = useFlowsManagerStore((state) => state.getFlowById);
-  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
-  const setNodes = useFlowStore((state) => state.setNodes);
-  const setEdges = useFlowStore((state) => state.setEdges);
   const [openPlayground, setOpenPlayground] = useState(false);
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId,
@@ -96,16 +88,6 @@ export default function CollectionCardComponent({
     return inputs.length > 0 || outputs.length > 0;
   }
 
-  usePlaygroundEffect(
-    currentFlowId,
-    playground!,
-    openPlayground,
-    currentFlow,
-    setNodes,
-    setEdges,
-    cleanFlowPool,
-  );
-
   useDataEffect(data, setLikedByUser, setLikesCount, setDownloadsCount);
 
   const { handleInstall } = useInstallComponent(
@@ -510,6 +492,7 @@ export default function CollectionCardComponent({
       </Card>
       {openPlayground && (
         <IOModal
+          key={data.id}
           cleanOnClose={true}
           open={openPlayground}
           setOpen={setOpenPlayground}

From a111b83949612c9e95a4045e3258630da73c203b Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 8 Aug 2024 12:53:57 -0300
Subject: [PATCH 25/84] removed unused import

---
 src/frontend/src/modals/IOModal/components/chatView/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/frontend/src/modals/IOModal/components/chatView/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/index.tsx
index 511cb108583..5e0b2d4fd3d 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/index.tsx
@@ -11,7 +11,6 @@ import {
   FS_ERROR_TEXT,
   SN_ERROR_TEXT,
 } from "../../../../constants/constants";
-import { deleteFlowPool } from "../../../../controllers/API";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";

From 5aaa273a605ea6e0b070bb7f522b57b02181111b Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 8 Aug 2024 12:54:10 -0300
Subject: [PATCH 26/84] put set save loading before the If

---
 src/frontend/src/hooks/flows/use-save-flow.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/hooks/flows/use-save-flow.ts b/src/frontend/src/hooks/flows/use-save-flow.ts
index 7872a632201..e4f50d66b11 100644
--- a/src/frontend/src/hooks/flows/use-save-flow.ts
+++ b/src/frontend/src/hooks/flows/use-save-flow.ts
@@ -42,6 +42,7 @@ const useSaveFlow = () => {
           { id, name, data, description, folder_id, endpoint_name },
           {
             onSuccess: (updatedFlow) => {
+              setSaveLoading(false);
               if (updatedFlow !== null) {
                 // updates flow in state
                 setFlows(
@@ -52,7 +53,6 @@ const useSaveFlow = () => {
                     return flow;
                   }),
                 );
-                setSaveLoading(false);
                 resolve();
               }
             },

From c5c0aa1686ba63f8ad16d7d83a1494e5bca32619 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 8 Aug 2024 12:55:13 -0300
Subject: [PATCH 27/84] removed flow cleaning and inputs setting, since the
 inputs and outputs are set on the ResetFlow function

---
 .../components/PageComponent/index.tsx        | 25 +++----------------
 1 file changed, 4 insertions(+), 21 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 69c5129d262..10a0f9c7c6b 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -2,7 +2,6 @@ import LoadingComponent from "@/components/loadingComponent";
 import { useGetBuildsQuery } from "@/controllers/API/queries/_builds";
 import useAutoSaveFlow from "@/hooks/flows/use-autosave-flow";
 import useUploadFlow from "@/hooks/flows/use-upload-flow";
-import { getInputsAndOutputs } from "@/utils/storeUtils";
 import _, { cloneDeep } from "lodash";
 import {
   KeyboardEvent,
@@ -106,11 +105,8 @@ export default function Page({
     useState<OnSelectionChangeParams | null>(null);
 
   const setFlowState = useFlowStore((state) => state.setFlowState);
-  const setInputs = useFlowStore((state) => state.setInputs);
-  const setOutputs = useFlowStore((state) => state.setOutputs);
   const setHasIO = useFlowStore((state) => state.setHasIO);
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
-  const { inputs, outputs } = getInputsAndOutputs(flow.data!.nodes);
 
   function handleGroupNode() {
     takeSnapshot();
@@ -172,15 +168,7 @@ export default function Page({
     !isFetching;
 
   useEffect(() => {
-    if (!isFetching) {
-      setFlowState(undefined);
-      setInputs(inputs);
-      setOutputs(outputs);
-      setHasIO(inputs.length > 0 || outputs.length > 0);
-    }
-  }, [isFetching]);
-
-  useEffect(() => {
+    refetch();
     if (checkOldComponents({ nodes })) {
       setNoticeData({
         title:
@@ -190,14 +178,9 @@ export default function Page({
   }, [currentFlowId]);
 
   useEffect(() => {
-    refetch();
-    return () => {
-      cleanFlow();
-    };
-  }, [currentFlowId]);
-
-  useEffect(() => {
-    autoSaveFlow();
+    if (currentFlow) {
+      autoSaveFlow();
+    }
   }, [nodes, edges]);
 
   function handleUndo(e: KeyboardEvent) {

From 4164b00449ba163a6cebe150f7992794854b99d2 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 8 Aug 2024 12:55:35 -0300
Subject: [PATCH 28/84] updated to use ResetFlow function to update everything
 regarding flow

---
 src/frontend/src/stores/flowsManagerStore.ts | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts
index 1a0a25325f6..0834675f9a7 100644
--- a/src/frontend/src/stores/flowsManagerStore.ts
+++ b/src/frontend/src/stores/flowsManagerStore.ts
@@ -14,7 +14,6 @@ import {
   UseUndoRedoOptions,
 } from "../types/zustand/flowsManager";
 import {
-  cleanEdges,
   extractFieldsFromComponenents,
   processFlows,
 } from "../utils/reactflowUtils";
@@ -37,14 +36,15 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     set({ examples });
   },
   currentFlowId: "",
-  setCurrentFlow: (flow: FlowType) => {
+  setCurrentFlow: (flow: FlowType | undefined) => {
     set({
       currentFlow: flow,
-      currentFlowId: flow.id,
+      currentFlowId: flow?.id ?? "",
     });
-    useFlowStore.setState({
-      nodes: flow?.data?.nodes ?? [],
+    useFlowStore.getState().resetFlow({
       edges: flow?.data?.edges ?? [],
+      nodes: flow?.data?.nodes ?? [],
+      viewport: flow?.data?.viewport ?? { zoom: 1, x: 0, y: 0 },
     });
   },
   getFlowById: (id: string) => {
@@ -52,14 +52,17 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
   },
   setCurrentFlowId: (currentFlowId: string) => {
     const flow = get().flows?.find((flow) => flow.id === currentFlowId);
-    let newEdges = cleanEdges(flow?.data!.nodes ?? [], flow?.data!.edges ?? []);
+    console.log(flow, "kakakkaka");
     set({
       currentFlowId,
       currentFlow:
         get().flows?.find((flow) => flow.id === currentFlowId) ?? undefined,
     });
-
-    useFlowStore.setState({ edges: newEdges, nodes: flow?.data?.nodes ?? [] });
+    useFlowStore.getState().resetFlow({
+      edges: flow?.data?.edges ?? [],
+      nodes: flow?.data?.nodes ?? [],
+      viewport: flow?.data?.viewport ?? { zoom: 1, x: 0, y: 0 },
+    });
   },
   flows: [],
   allFlows: [],

From 270cb54271da234341019d62ed121dbd94f3de0f Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 8 Aug 2024 12:56:04 -0300
Subject: [PATCH 29/84] removed flow pool get on resetFlow, for it to be
 fetched only if the user is inside the flow

---
 src/frontend/src/stores/flowStore.ts | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index 50ba74d28d9..1aea57414ad 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -19,7 +19,6 @@ import {
   MISSED_ERROR_ALERT,
 } from "../constants/alerts_constants";
 import { BuildStatus } from "../constants/enums";
-import { getFlowPool } from "../controllers/API";
 import { VertexBuildTypeAPI } from "../types/api";
 import { ChatInputType, ChatOutputType } from "../types/chat";
 import {
@@ -154,7 +153,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     set({ isPending });
   },
   resetFlow: ({ nodes, edges, viewport }) => {
-    const currentFlow = useFlowsManagerStore.getState().currentFlow;
     let brokenEdges = detectBrokenEdgesEdges(nodes, edges);
     if (brokenEdges.length > 0) {
       useAlertStore.getState().setErrorData({
@@ -172,13 +170,9 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       inputs,
       outputs,
       hasIO: inputs.length > 0 || outputs.length > 0,
+      flowPool: {},
     });
-    get().reactFlowInstance!.setViewport(viewport);
-    if (currentFlow) {
-      getFlowPool({ flowId: currentFlow.id }).then((flowPool) => {
-        set({ flowPool: flowPool.data.vertex_builds });
-      });
-    }
+    get().reactFlowInstance?.setViewport(viewport);
   },
   setIsBuilding: (isBuilding) => {
     set({ isBuilding });
@@ -602,6 +596,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
 
       useFlowStore.getState().updateBuildStatus([vertexBuildData.id], status);
     }
+    console.log("on flow page", get().onFlowPage, "nodes", get().nodes);
     await buildFlowVerticesWithFallback({
       input_value,
       files,
@@ -654,8 +649,8 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
         useFlowStore.getState().updateBuildStatus(idList, BuildStatus.BUILDING);
       },
       onValidateNodes: validateSubgraph,
-      nodes: get().onFlowPage ? get().nodes : undefined,
-      edges: get().onFlowPage ? get().edges : undefined,
+      nodes: get().nodes || undefined,
+      edges: get().edges || undefined,
     });
     get().setIsBuilding(false);
     get().setLockChat(false);

From 8f0054d6fdd881da3cf4f7e811d5fe77ac5aa87d Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 8 Aug 2024 12:56:22 -0300
Subject: [PATCH 30/84] updated packagelock

---
 src/frontend/package-lock.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index f150e6b429d..db0e15228cd 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -1079,7 +1079,6 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {

From 5efd55a600b970fe5945155c5cb7c9b5b1b4004f Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:45:09 -0300
Subject: [PATCH 31/84] Changed router to outlet on app.tsx to use createRouter

---
 src/frontend/src/App.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index ddccd55ccee..9423ce55f23 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -1,6 +1,7 @@
 import { useContext, useEffect } from "react";
 import { Cookies } from "react-cookie";
 import { ErrorBoundary } from "react-error-boundary";
+import { Outlet } from "react-router-dom";
 import "reactflow/dist/style.css";
 import "./App.css";
 import AlertDisplayArea from "./alerts/displayArea";
@@ -22,7 +23,6 @@ import { useGetHealthQuery } from "./controllers/API/queries/health";
 import { useGetVersionQuery } from "./controllers/API/queries/version";
 import { setupAxiosDefaults } from "./controllers/API/utils";
 import useTrackLastVisitedPath from "./hooks/use-track-last-visited-path";
-import Router from "./routes";
 import useAlertStore from "./stores/alertStore";
 import useAuthStore from "./stores/authStore";
 import { useDarkStore } from "./stores/darkStore";
@@ -172,8 +172,7 @@ export default function App() {
           >
             <LoadingComponent remSize={50} />
           </div>
-
-          <Router />
+          <Outlet />
         </>
       </ErrorBoundary>
       <div></div>

From 332037d450379624851d4ee9f931599f978f6e75 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:45:30 -0300
Subject: [PATCH 32/84] Created authSettingsGuard to guard the general settings

---
 .../components/authSettingsGuard/index.tsx    | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 src/frontend/src/components/authSettingsGuard/index.tsx

diff --git a/src/frontend/src/components/authSettingsGuard/index.tsx b/src/frontend/src/components/authSettingsGuard/index.tsx
new file mode 100644
index 00000000000..90bf63dd93c
--- /dev/null
+++ b/src/frontend/src/components/authSettingsGuard/index.tsx
@@ -0,0 +1,19 @@
+import FeatureFlags from "@/../feature-config.json";
+import useAuthStore from "@/stores/authStore";
+import { useStoreStore } from "@/stores/storeStore";
+import { Navigate } from "react-router-dom";
+
+export const AuthSettingsGuard = ({ children }) => {
+  const autoLogin = useAuthStore((state) => state.autoLogin);
+  const hasStore = useStoreStore((state) => state.hasStore);
+
+  // Hides the General settings if there is nothing to show
+  const showGeneralSettings =
+    FeatureFlags.ENABLE_PROFILE_ICONS || hasStore || !autoLogin;
+
+  if (showGeneralSettings) {
+    return children;
+  } else {
+    return <Navigate replace to="global-variables" />;
+  }
+};

From 95d42e2403ed0fa00b3e077a066d7b16e4a8e6c6 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:45:54 -0300
Subject: [PATCH 33/84] Fixed routes to use createBrowserRouter to allow the
 use of useBlocker

---
 src/frontend/src/routes.tsx | 297 +++++++++++++++++-------------------
 1 file changed, 139 insertions(+), 158 deletions(-)

diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index fd2bc6bda0f..028b44e23c1 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -1,16 +1,20 @@
-import FeatureFlags from "@/../feature-config.json";
-import useAuthStore from "@/stores/authStore";
-import { useStoreStore } from "@/stores/storeStore";
-import { Suspense, lazy } from "react";
-import { Navigate, Route, Routes } from "react-router-dom";
+import { lazy } from "react";
+import {
+  createBrowserRouter,
+  createRoutesFromElements,
+  Navigate,
+  Route,
+} from "react-router-dom";
+import App from "./App";
 import { ProtectedAdminRoute } from "./components/authAdminGuard";
 import { ProtectedRoute } from "./components/authGuard";
 import { ProtectedLoginRoute } from "./components/authLoginGuard";
+import { AuthSettingsGuard } from "./components/authSettingsGuard";
 import { CatchAllRoute } from "./components/catchAllRoutes";
-import LoadingComponent from "./components/loadingComponent";
 import { StoreGuard } from "./components/storeGuard";
-import MessagesPage from "./pages/SettingsPage/pages/messagesPage";
-
+const MessagesPage = lazy(
+  () => import("./pages/SettingsPage/pages/messagesPage"),
+);
 const AdminPage = lazy(() => import("./pages/AdminPage"));
 const LoginAdminPage = lazy(() => import("./pages/AdminPage/LoginPage"));
 const ApiKeysPage = lazy(
@@ -38,184 +42,161 @@ const SignUp = lazy(() => import("./pages/SignUpPage"));
 const StorePage = lazy(() => import("./pages/StorePage"));
 const ViewPage = lazy(() => import("./pages/ViewPage"));
 
-const Router = () => {
-  const autoLogin = useAuthStore((state) => state.autoLogin);
-  const hasStore = useStoreStore((state) => state.hasStore);
-
-  // Hides the General settings if there is nothing to show
-  const showGeneralSettings =
-    FeatureFlags.ENABLE_PROFILE_ICONS || hasStore || !autoLogin;
-
-  return (
-    <Suspense
-      fallback={
-        <div className="loading-page-panel">
-          <LoadingComponent remSize={50} />
-        </div>
-      }
-    >
-      <Routes>
+const router = createBrowserRouter(
+  createRoutesFromElements([
+    <Route path="" element={<App />}>
+      <Route
+        path="/"
+        element={
+          <ProtectedRoute>
+            <HomePage />
+          </ProtectedRoute>
+        }
+      >
+        <Route index element={<Navigate replace to={"all"} />} />
         <Route
-          path="/"
-          element={
-            <ProtectedRoute>
-              <HomePage />
-            </ProtectedRoute>
-          }
-        >
-          <Route index element={<Navigate replace to={"all"} />} />
-          <Route
-            path="flows/*"
-            element={<MyCollectionComponent key="flows" type="flow" />}
-          />
-          <Route
-            path="components/*"
-            element={
-              <MyCollectionComponent key="components" type="component" />
-            }
-          />
-          <Route
-            path="all/*"
-            element={<MyCollectionComponent key="all" type="all" />}
-          />
-        </Route>
+          path="flows/*"
+          element={<MyCollectionComponent key="flows" type="flow" />}
+        />
         <Route
-          path="/settings"
-          element={
-            <ProtectedRoute>
-              <SettingsPage />
-            </ProtectedRoute>
-          }
-        >
-          <Route
-            index
-            element={
-              <Navigate
-                replace
-                to={showGeneralSettings ? "general" : "global-variables"}
-              />
-            }
-          />
-          <Route path="global-variables" element={<GlobalVariablesPage />} />
-          <Route path="api-keys" element={<ApiKeysPage />} />
-          {showGeneralSettings && (
-            <Route path="general/:scrollId?" element={<GeneralPage />} />
-          )}
-          <Route path="shortcuts" element={<ShortcutsPage />} />
-          <Route path="messages" element={<MessagesPage />} />
-        </Route>
+          path="components/*"
+          element={<MyCollectionComponent key="components" type="component" />}
+        />
+        <Route
+          path="all/*"
+          element={<MyCollectionComponent key="all" type="all" />}
+        />
+      </Route>
+      <Route
+        path="/settings"
+        element={
+          <ProtectedRoute>
+            <SettingsPage />
+          </ProtectedRoute>
+        }
+      >
+        <Route index element={<Navigate replace to={"general"} />} />
+        <Route path="global-variables" element={<GlobalVariablesPage />} />
+        <Route path="api-keys" element={<ApiKeysPage />} />
         <Route
-          path="/store"
+          path="general/:scrollId?"
           element={
-            <ProtectedRoute>
-              <StoreGuard>
-                <StorePage />
-              </StoreGuard>
-            </ProtectedRoute>
+            <AuthSettingsGuard>
+              <GeneralPage />
+            </AuthSettingsGuard>
           }
         />
+        <Route path="shortcuts" element={<ShortcutsPage />} />
+        <Route path="messages" element={<MessagesPage />} />
+      </Route>
+      <Route
+        path="/store"
+        element={
+          <ProtectedRoute>
+            <StoreGuard>
+              <StorePage />
+            </StoreGuard>
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/store/:id/"
+        element={
+          <ProtectedRoute>
+            <StoreGuard>
+              <StorePage />
+            </StoreGuard>
+          </ProtectedRoute>
+        }
+      />
+      <Route path="/playground/:id/">
         <Route
-          path="/store/:id/"
+          path=""
           element={
             <ProtectedRoute>
-              <StoreGuard>
-                <StorePage />
-              </StoreGuard>
+              <PlaygroundPage />
             </ProtectedRoute>
           }
         />
-        <Route path="/playground/:id/">
-          <Route
-            path=""
-            element={
-              <ProtectedRoute>
-                <PlaygroundPage />
-              </ProtectedRoute>
-            }
-          />
-        </Route>
-        <Route path="/flow/:id/">
-          <Route
-            path="*"
-            element={
-              <ProtectedRoute>
-                <FlowPage />
-              </ProtectedRoute>
-            }
-          />
-          <Route
-            path=""
-            element={
-              <ProtectedRoute>
-                <FlowPage />
-              </ProtectedRoute>
-            }
-          />
-          <Route
-            path="view"
-            element={
-              <ProtectedRoute>
-                <ViewPage />
-              </ProtectedRoute>
-            }
-          />
-        </Route>
+      </Route>
+      <Route path="/flow/:id/">
         <Route
           path="*"
           element={
             <ProtectedRoute>
-              <CatchAllRoute />
+              <FlowPage />
             </ProtectedRoute>
           }
         />
-
-        <Route
-          path="/login"
-          element={
-            <ProtectedLoginRoute>
-              <LoginPage />
-            </ProtectedLoginRoute>
-          }
-        />
         <Route
-          path="/signup"
+          path=""
           element={
-            <ProtectedLoginRoute>
-              <SignUp />
-            </ProtectedLoginRoute>
+            <ProtectedRoute>
+              <FlowPage />
+            </ProtectedRoute>
           }
         />
         <Route
-          path="/login/admin"
+          path="view"
           element={
-            <ProtectedLoginRoute>
-              <LoginAdminPage />
-            </ProtectedLoginRoute>
+            <ProtectedRoute>
+              <ViewPage />
+            </ProtectedRoute>
           }
         />
-
+      </Route>
+      <Route
+        path="*"
+        element={
+          <ProtectedRoute>
+            <CatchAllRoute />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/login"
+        element={
+          <ProtectedLoginRoute>
+            <LoginPage />
+          </ProtectedLoginRoute>
+        }
+      />
+      <Route
+        path="/signup"
+        element={
+          <ProtectedLoginRoute>
+            <SignUp />
+          </ProtectedLoginRoute>
+        }
+      />
+      <Route
+        path="/login/admin"
+        element={
+          <ProtectedLoginRoute>
+            <LoginAdminPage />
+          </ProtectedLoginRoute>
+        }
+      />
+      <Route
+        path="/admin"
+        element={
+          <ProtectedAdminRoute>
+            <AdminPage />
+          </ProtectedAdminRoute>
+        }
+      />
+      <Route path="/account">
         <Route
-          path="/admin"
+          path="delete"
           element={
-            <ProtectedAdminRoute>
-              <AdminPage />
-            </ProtectedAdminRoute>
+            <ProtectedRoute>
+              <DeleteAccountPage />
+            </ProtectedRoute>
           }
-        />
-
-        <Route path="/account">
-          <Route
-            path="delete"
-            element={
-              <ProtectedRoute>
-                <DeleteAccountPage />
-              </ProtectedRoute>
-            }
-          ></Route>
-        </Route>
-      </Routes>
-    </Suspense>
-  );
-};
+        ></Route>
+      </Route>
+    </Route>,
+  ]),
+);
 
-export default Router;
+export default router;

From c40dc17974cf10b820d9589d23ea4bbba3eeb210 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:46:12 -0300
Subject: [PATCH 34/84] Changed index.tsx to use RouterProvider and the router
 just created

---
 src/frontend/src/index.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/index.tsx b/src/frontend/src/index.tsx
index 006d93ff287..7fa7cf724b7 100644
--- a/src/frontend/src/index.tsx
+++ b/src/frontend/src/index.tsx
@@ -1,5 +1,4 @@
 import ReactDOM from "react-dom/client";
-import App from "./App";
 import ContextWrapper from "./contexts";
 import reportWebVitals from "./reportWebVitals";
 
@@ -8,6 +7,10 @@ import "./style/index.css";
 // @ts-ignore
 import "./style/applies.css";
 // @ts-ignore
+import { Suspense } from "react";
+import { RouterProvider } from "react-router-dom";
+import LoadingComponent from "./components/loadingComponent";
+import router from "./routes";
 import "./style/classes.css";
 
 const root = ReactDOM.createRoot(
@@ -15,7 +18,15 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <ContextWrapper>
-    <App />
+    <Suspense
+      fallback={
+        <div className="loading-page-panel">
+          <LoadingComponent remSize={50} />
+        </div>
+      }
+    >
+      <RouterProvider router={router} />
+    </Suspense>
   </ContextWrapper>,
 );
 reportWebVitals();

From 578e0ae33ea18b230d1731be495e96d52efd02e5 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:46:47 -0300
Subject: [PATCH 35/84] Changed flowStore to have a local flow state

---
 src/frontend/src/stores/flowStore.ts         | 28 ++++++++++++++++++--
 src/frontend/src/types/zustand/flow/index.ts | 18 +++++++++----
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index 1aea57414ad..0c62f04c72d 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -152,7 +152,10 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   setPending: (isPending) => {
     set({ isPending });
   },
-  resetFlow: ({ nodes, edges, viewport }) => {
+  resetFlow: (flow) => {
+    const nodes = flow?.data?.nodes ?? [];
+    const edges = flow?.data?.edges ?? [];
+    const viewport = flow?.data?.viewport ?? { zoom: 1, x: 0, y: 0 };
     let brokenEdges = detectBrokenEdgesEdges(nodes, edges);
     if (brokenEdges.length > 0) {
       useAlertStore.getState().setErrorData({
@@ -171,6 +174,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       outputs,
       hasIO: inputs.length > 0 || outputs.length > 0,
       flowPool: {},
+      currentFlow: flow,
     });
     get().reactFlowInstance?.setViewport(viewport);
   },
@@ -596,7 +600,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
 
       useFlowStore.getState().updateBuildStatus([vertexBuildData.id], status);
     }
-    console.log("on flow page", get().onFlowPage, "nodes", get().nodes);
     await buildFlowVerticesWithFallback({
       input_value,
       files,
@@ -721,6 +724,27 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     });
     set({ flowBuildStatus: newFlowBuildStatus });
   },
+  currentFlow: undefined,
+  setCurrentFlow: (flow) => {
+    set({ currentFlow: flow });
+  },
+  updateCurrentFlow: ({ nodes, edges, viewport }) => {
+    set({
+      currentFlow: {
+        ...get().currentFlow!,
+        data: {
+          nodes: nodes ?? get().currentFlow?.data?.nodes ?? [],
+          edges: edges ?? get().currentFlow?.data?.edges ?? [],
+          viewport: viewport ??
+            get().currentFlow?.data?.viewport ?? {
+              x: 0,
+              y: 0,
+              zoom: 1,
+            },
+        },
+      },
+    });
+  },
 }));
 
 export default useFlowStore;
diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts
index da52455e297..574e8e54753 100644
--- a/src/frontend/src/types/zustand/flow/index.ts
+++ b/src/frontend/src/types/zustand/flow/index.ts
@@ -1,3 +1,4 @@
+import { FlowType } from "@/types/flow";
 import {
   Connection,
   Edge,
@@ -83,11 +84,7 @@ export type FlowStoreType = {
   isPending: boolean;
   setIsBuilding: (isBuilding: boolean) => void;
   setPending: (isPending: boolean) => void;
-  resetFlow: (flow: {
-    nodes: Node[];
-    edges: Edge[];
-    viewport: Viewport;
-  }) => void;
+  resetFlow: (flow: FlowType | undefined) => void;
   reactFlowInstance: ReactFlowInstance | null;
   setReactFlowInstance: (newState: ReactFlowInstance) => void;
   flowState: FlowState | undefined;
@@ -171,4 +168,15 @@ export type FlowStoreType = {
   setLockChat: (lock: boolean) => void;
   lockChat: boolean;
   updateFreezeStatus: (nodeIds: string[], freeze: boolean) => void;
+  currentFlow: FlowType | undefined;
+  setCurrentFlow: (flow: FlowType | undefined) => void;
+  updateCurrentFlow: ({
+    nodes,
+    edges,
+    viewport,
+  }: {
+    nodes?: Node[];
+    edges?: Edge[];
+    viewport?: Viewport;
+  }) => void;
 };

From a984b6dea9d7c3823ec17497b673e307e5bba76c Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:47:12 -0300
Subject: [PATCH 36/84] Implemented setting the current flow state when saving
 the flow

---
 src/frontend/src/hooks/flows/use-save-flow.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/frontend/src/hooks/flows/use-save-flow.ts b/src/frontend/src/hooks/flows/use-save-flow.ts
index e4f50d66b11..dee4143c0c5 100644
--- a/src/frontend/src/hooks/flows/use-save-flow.ts
+++ b/src/frontend/src/hooks/flows/use-save-flow.ts
@@ -12,6 +12,7 @@ const useSaveFlow = () => {
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
   const setSaveLoading = useFlowsManagerStore((state) => state.setSaveLoading);
+  const setCurrentFlow = useFlowStore((state) => state.setCurrentFlow);
 
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const flowData = currentFlow?.data;
@@ -53,6 +54,7 @@ const useSaveFlow = () => {
                     return flow;
                   }),
                 );
+                setCurrentFlow(updatedFlow);
                 resolve();
               }
             },

From 352d8aa7c9488513f189471493291cfbfa2971c0 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:47:38 -0300
Subject: [PATCH 37/84] Added the update of current flow when auto saving

---
 .../components/PageComponent/index.tsx        | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 10a0f9c7c6b..4dd4e5425c4 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -80,7 +80,6 @@ export default function Page({
   const onEdgesChange = useFlowStore((state) => state.onEdgesChange);
   const setNodes = useFlowStore((state) => state.setNodes);
   const setEdges = useFlowStore((state) => state.setEdges);
-  const cleanFlow = useFlowStore((state) => state.cleanFlow);
   const deleteNode = useFlowStore((state) => state.deleteNode);
   const deleteEdge = useFlowStore((state) => state.deleteEdge);
   const undo = useFlowsManagerStore((state) => state.undo);
@@ -97,15 +96,13 @@ export default function Page({
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setNoticeData = useAlertStore((state) => state.setNoticeData);
+  const updateCurrentFlow = useFlowStore((state) => state.updateCurrentFlow);
   const [selectionMenuVisible, setSelectionMenuVisible] = useState(false);
   const edgeUpdateSuccessful = useRef(true);
 
   const position = useRef({ x: 0, y: 0 });
   const [lastSelection, setLastSelection] =
     useState<OnSelectionChangeParams | null>(null);
-
-  const setFlowState = useFlowStore((state) => state.setFlowState);
-  const setHasIO = useFlowStore((state) => state.setHasIO);
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
 
   function handleGroupNode() {
@@ -178,8 +175,12 @@ export default function Page({
   }, [currentFlowId]);
 
   useEffect(() => {
-    if (currentFlow) {
+    if (currentFlow && reactFlowInstance) {
       autoSaveFlow();
+      updateCurrentFlow({
+        nodes,
+        edges,
+      });
     }
   }, [nodes, edges]);
 
@@ -320,7 +321,17 @@ export default function Page({
   const onMoveEnd: OnMove = useCallback(() => {
     // 👇 make moving the canvas undoable
     autoSaveFlow();
-  }, [takeSnapshot, autoSaveFlow, nodes, edges, reactFlowInstance]);
+    updateCurrentFlow({
+      viewport: reactFlowInstance?.getViewport(),
+    });
+  }, [
+    takeSnapshot,
+    autoSaveFlow,
+    updateCurrentFlow,
+    nodes,
+    edges,
+    reactFlowInstance,
+  ]);
 
   const onSelectionDragStart: SelectionDragHandler = useCallback(() => {
     // 👇 make dragging a selection undoable

From 244370c076239368768900d126b26c0ff6862c65 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:48:03 -0300
Subject: [PATCH 38/84] changed current flow to use the current flow from Flow
 Store instead of Flows Manager Store

---
 src/frontend/src/components/chatComponent/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 7823adcbbef..1b40466e13c 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -6,7 +6,6 @@ import IOModal from "../../modals/IOModal";
 import ApiModal from "../../modals/apiModal";
 import ShareModal from "../../modals/shareModal";
 import useFlowStore from "../../stores/flowStore";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useShortcutsStore } from "../../stores/shortcuts";
 import { useStoreStore } from "../../stores/storeStore";
 import { classNames, isThereModal } from "../../utils/utils";
@@ -47,7 +46,7 @@ export default function FlowToolbar(): JSX.Element {
   const hasStore = useStoreStore((state) => state.hasStore);
   const validApiKey = useStoreStore((state) => state.validApiKey);
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
-  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const currentFlow = useFlowStore((state) => state.currentFlow);
 
   const ModalMemo = useMemo(
     () => (

From 633da70a1d224f71bf12be17989095c12c4cd325 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:48:23 -0300
Subject: [PATCH 39/84] Changed codeTabsComponent Tweaks check to show if its
 checked

---
 src/frontend/src/components/codeTabsComponent/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 239a3117e0c..f17afa61571 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -86,6 +86,7 @@ export default function CodeTabsComponent({
                   }}
                   id="tweaks-switch"
                   onCheckedChange={setActiveTweaks}
+                  checked={activeTweaks}
                   autoFocus={false}
                 />
                 <Label

From 6caa743ace7addef0fe55eb06901285ec6e8ae8b Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:48:39 -0300
Subject: [PATCH 40/84] Removed unused variables

---
 src/frontend/src/contexts/authContext.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx
index 3e2af285461..f8902480734 100644
--- a/src/frontend/src/contexts/authContext.tsx
+++ b/src/frontend/src/contexts/authContext.tsx
@@ -5,11 +5,8 @@ import {
 } from "@/constants/constants";
 import { useGetUserData } from "@/controllers/API/queries/auth";
 import useAuthStore from "@/stores/authStore";
-import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { createContext, useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
 import Cookies from "universal-cookie";
-import { getLoggedUser, requestLogout } from "../controllers/API";
 import useAlertStore from "../stores/alertStore";
 import { useFolderStore } from "../stores/foldersStore";
 import { useStoreStore } from "../stores/storeStore";
@@ -31,7 +28,6 @@ const initialValue: AuthContextType = {
 export const AuthContext = createContext<AuthContextType>(initialValue);
 
 export function AuthProvider({ children }): React.ReactElement {
-  const navigate = useNavigate();
   const cookies = new Cookies();
   const [accessToken, setAccessToken] = useState<string | null>(
     cookies.get(LANGFLOW_ACCESS_TOKEN) ?? null,
@@ -46,12 +42,7 @@ export function AuthProvider({ children }): React.ReactElement {
 
   const checkHasStore = useStoreStore((state) => state.checkHasStore);
   const fetchApiData = useStoreStore((state) => state.fetchApiData);
-  const setAllFlows = useFlowsManagerStore((state) => state.setAllFlows);
-  const setSelectedFolder = useFolderStore((state) => state.setSelectedFolder);
   const setIsAuthenticated = useAuthStore((state) => state.setIsAuthenticated);
-  const setIsAdmin = useAuthStore((state) => state.setIsAdmin);
-  const setIsLoading = useFlowsManagerStore((state) => state.setIsLoading);
-  const autoLogin = useAuthStore((state) => state.autoLogin);
 
   const { mutate: mutateLoggedUser } = useGetUserData();
 

From 02d08895fa9fe949414dd9ffc43a051bc8ec8fc1 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:48:49 -0300
Subject: [PATCH 41/84] Removed browser router from context wrapper

---
 src/frontend/src/contexts/index.tsx | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/contexts/index.tsx b/src/frontend/src/contexts/index.tsx
index 5405d2dac0c..66bf9629ef1 100644
--- a/src/frontend/src/contexts/index.tsx
+++ b/src/frontend/src/contexts/index.tsx
@@ -1,6 +1,5 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactNode } from "react";
-import { BrowserRouter } from "react-router-dom";
 import { ReactFlowProvider } from "reactflow";
 import { TooltipProvider } from "../components/ui/tooltip";
 import { ApiInterceptor } from "../controllers/API/api";
@@ -11,18 +10,16 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
   //element to wrap all context
   return (
     <>
-      <BrowserRouter>
-        <QueryClientProvider client={queryClient}>
-          <AuthProvider>
-            <TooltipProvider skipDelayDuration={0}>
-              <ReactFlowProvider>
-                <ApiInterceptor />
-                {children}
-              </ReactFlowProvider>
-            </TooltipProvider>
-          </AuthProvider>
-        </QueryClientProvider>
-      </BrowserRouter>
+      <QueryClientProvider client={queryClient}>
+        <AuthProvider>
+          <TooltipProvider skipDelayDuration={0}>
+            <ReactFlowProvider>
+              <ApiInterceptor />
+              {children}
+            </ReactFlowProvider>
+          </TooltipProvider>
+        </AuthProvider>
+      </QueryClientProvider>
     </>
   );
 }

From 178bd5fcd63a39fd6cf6e72eff081130f73edafd Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:48:59 -0300
Subject: [PATCH 42/84] Removed unused console.log

---
 src/frontend/src/CustomNodes/GenericNode/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index e0a582d445c..09dd6f6a4e2 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -289,7 +289,6 @@ export default function GenericNode({
   function handlePlayWShortcut() {
     if (buildStatus === BuildStatus.BUILDING || isBuilding || !selected) return;
     setValidationStatus(null);
-    console.log(data.node?.display_name);
     buildFlow({ stopNodeId: data.id });
   }
 

From cadf7e609c125e4e44952a2e788fd3fdf838aaa9 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:49:21 -0300
Subject: [PATCH 43/84] Changed initialSetup to just run when opening the modal

---
 src/frontend/src/modals/apiModal/index.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/frontend/src/modals/apiModal/index.tsx b/src/frontend/src/modals/apiModal/index.tsx
index 1155c8bb4a5..83099e5228b 100644
--- a/src/frontend/src/modals/apiModal/index.tsx
+++ b/src/frontend/src/modals/apiModal/index.tsx
@@ -35,9 +35,6 @@ export default function ApiModal({
 
   useEffect(() => {
     if (open) initialSetup(autoLogin, flow);
-  }, [open, flow?.data?.nodes]);
-
-  useEffect(() => {
     setActiveTab("0");
   }, [open]);
 

From eb42521166bd8a5766e0989d777a39d19ed957b9 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:49:46 -0300
Subject: [PATCH 44/84] changed confirmationModal to have destructiveCancel and
 to only call onCancel if the other buttons were not pressed

---
 .../src/modals/confirmationModal/index.tsx         | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/modals/confirmationModal/index.tsx b/src/frontend/src/modals/confirmationModal/index.tsx
index dd7437693c9..b5fa35b0d59 100644
--- a/src/frontend/src/modals/confirmationModal/index.tsx
+++ b/src/frontend/src/modals/confirmationModal/index.tsx
@@ -33,6 +33,7 @@ function ConfirmationModal({
   confirmationText,
   children,
   destructive = false,
+  destructiveCancel = false,
   icon,
   data,
   index,
@@ -44,13 +45,18 @@ function ConfirmationModal({
 }: ConfirmationModalType) {
   const Icon: any = nodeIconsLucide[icon];
   const [modalOpen, setModalOpen] = useState(open ?? false);
+  const [flag, setFlag] = useState(false);
 
   useEffect(() => {
     if (open) setModalOpen(open);
   }, [open]);
 
   useEffect(() => {
-    if (onClose) onClose!(modalOpen);
+    if (onClose && modalOpen === false && !flag) {
+      onClose();
+    } else if (flag) {
+      setFlag(false);
+    }
   }, [modalOpen]);
 
   const triggerChild = React.Children.toArray(children).find(
@@ -61,7 +67,7 @@ function ConfirmationModal({
   );
 
   return (
-    <BaseModal size={size} open={open} setOpen={setModalOpen}>
+    <BaseModal size={size} open={modalOpen} setOpen={setModalOpen}>
       <BaseModal.Trigger>{triggerChild}</BaseModal.Trigger>
       <BaseModal.Header description={titleHeader ?? null}>
         <span className="pr-2">{title}</span>
@@ -86,6 +92,7 @@ function ConfirmationModal({
           className="ml-3"
           variant={destructive ? "destructive" : "default"}
           onClick={() => {
+            setFlag(true);
             setModalOpen(false);
             onConfirm(index, data);
           }}
@@ -96,8 +103,9 @@ function ConfirmationModal({
 
         <Button
           className=""
-          variant="outline"
+          variant={destructiveCancel ? "destructive" : "outline"}
           onClick={() => {
+            setFlag(true);
             if (onCancel) onCancel();
             setModalOpen(false);
           }}

From 0ab6e38daa5767c6c2c41747b2360a179ade7a8a Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:50:03 -0300
Subject: [PATCH 45/84] Created a SaveChangesModal that confirms if the user
 wants to save their changes

---
 .../src/modals/saveChangesModal/index.tsx     | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 src/frontend/src/modals/saveChangesModal/index.tsx

diff --git a/src/frontend/src/modals/saveChangesModal/index.tsx b/src/frontend/src/modals/saveChangesModal/index.tsx
new file mode 100644
index 00000000000..b783e7c7c1e
--- /dev/null
+++ b/src/frontend/src/modals/saveChangesModal/index.tsx
@@ -0,0 +1,22 @@
+import ConfirmationModal from "../confirmationModal";
+
+export function SaveChangesModal({ onSave, onProceed, onCancel }) {
+  return (
+    <ConfirmationModal
+      open={true}
+      onClose={onCancel}
+      destructiveCancel
+      title={"Exit without saving?"}
+      cancelText={"Exit anyway"}
+      confirmationText={"Save and Exit"}
+      icon={"Save"}
+      onConfirm={onSave}
+      onCancel={onProceed}
+      size="x-small"
+    >
+      <ConfirmationModal.Content>
+        You have unsaved changes. Would you like to save them before exiting?
+      </ConfirmationModal.Content>
+    </ConfirmationModal>
+  );
+}

From d14663fb85645cf058118e6a26022a10bba09c22 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:50:21 -0300
Subject: [PATCH 46/84] Get folder by id when folder id changes too

---
 .../src/pages/MainPage/components/componentsComponent/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
index ba05f3c0a9b..2184149a78d 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
@@ -89,7 +89,7 @@ export default function ComponentsComponent({
     handleSelectAll(false);
     setShouldSelectAll(true);
     getFolderById(folderId ? folderId : myCollectionId);
-  }, [location]);
+  }, [location, folderId, myCollectionId]);
 
   useFilteredFlows(flowsFromFolder!, searchFlowsComponents, setAllFlows);
 

From d85ed642cf94ed68454a43a0bf3cce24e1365d9d Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:50:36 -0300
Subject: [PATCH 47/84] Changed reset flow calls to store whole flow

---
 src/frontend/src/stores/flowsManagerStore.ts | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts
index 0834675f9a7..8fa617151c4 100644
--- a/src/frontend/src/stores/flowsManagerStore.ts
+++ b/src/frontend/src/stores/flowsManagerStore.ts
@@ -41,28 +41,19 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
       currentFlow: flow,
       currentFlowId: flow?.id ?? "",
     });
-    useFlowStore.getState().resetFlow({
-      edges: flow?.data?.edges ?? [],
-      nodes: flow?.data?.nodes ?? [],
-      viewport: flow?.data?.viewport ?? { zoom: 1, x: 0, y: 0 },
-    });
+    useFlowStore.getState().resetFlow(flow);
   },
   getFlowById: (id: string) => {
     return get().flows.find((flow) => flow.id === id);
   },
   setCurrentFlowId: (currentFlowId: string) => {
     const flow = get().flows?.find((flow) => flow.id === currentFlowId);
-    console.log(flow, "kakakkaka");
     set({
       currentFlowId,
       currentFlow:
         get().flows?.find((flow) => flow.id === currentFlowId) ?? undefined,
     });
-    useFlowStore.getState().resetFlow({
-      edges: flow?.data?.edges ?? [],
-      nodes: flow?.data?.nodes ?? [],
-      viewport: flow?.data?.viewport ?? { zoom: 1, x: 0, y: 0 },
-    });
+    useFlowStore.getState().resetFlow(flow);
   },
   flows: [],
   allFlows: [],
@@ -70,7 +61,6 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     set({ allFlows });
   },
   setFlows: (flows: FlowType[]) => {
-    console.log("setando o flou", flows);
     set({
       flows,
       currentFlow: flows.find((flow) => flow.id === get().currentFlowId),

From 586b73a534f6c650fedca51b49f912c7b04f2749 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:50:56 -0300
Subject: [PATCH 48/84] Added check if user is exiting page to prevent him when
 there are unsaved changes

---
 src/frontend/src/pages/FlowPage/index.tsx | 42 +++++++++++++++++++++--
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index c8e4f334443..ee4e0a46979 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -1,7 +1,10 @@
 import FeatureFlags from "@/../feature-config.json";
 import { useGetGlobalVariables } from "@/controllers/API/queries/variables";
+import useSaveFlow from "@/hooks/flows/use-save-flow";
+import { SaveChangesModal } from "@/modals/saveChangesModal";
+import { customStringify } from "@/utils/reactflowUtils";
 import { useEffect } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useBlocker, useNavigate, useParams } from "react-router-dom";
 import FlowToolbar from "../../components/chatComponent";
 import Header from "../../components/headerComponent";
 import { useDarkStore } from "../../stores/darkStore";
@@ -14,15 +17,42 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId,
   );
+  const currentFlow = useFlowStore((state) => state.currentFlow);
+  const currentSavedFlow = useFlowsManagerStore((state) => state.currentFlow);
+
+  const changesNotSaved =
+    customStringify(currentFlow?.data) !==
+    customStringify(currentSavedFlow?.data);
+
+  const blocker = useBlocker(changesNotSaved);
   const version = useDarkStore((state) => state.version);
   const setOnFlowPage = useFlowStore((state) => state.setOnFlowPage);
-  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const { id } = useParams();
   const navigate = useNavigate();
   useGetGlobalVariables();
+  const saveFlow = useSaveFlow();
 
   const flows = useFlowsManagerStore((state) => state.flows);
 
+  const handleSave = () => {
+    saveFlow().then(() => (blocker.proceed ? blocker.proceed() : null));
+  };
+
+  useEffect(() => {
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      if (changesNotSaved) {
+        event.preventDefault();
+        event.returnValue = ""; // Required for Chrome
+      }
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [changesNotSaved, navigate]);
+
   // Set flow tab id
   useEffect(() => {
     const isAnExistingFlow = flows.some((flow) => flow.id === id);
@@ -39,6 +69,7 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
       setOnFlowPage(false);
     };
   }, [id]);
+
   return (
     <>
       <Header />
@@ -66,6 +97,13 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
           <div className={version ? "mt-2" : "mt-1"}>⛓️ v{version}</div>
         </a>
       </div>
+      {blocker.state === "blocked" && (
+        <SaveChangesModal
+          onSave={handleSave}
+          onCancel={() => (blocker.reset ? blocker.reset() : null)}
+          onProceed={() => (blocker.proceed ? blocker.proceed() : null)}
+        />
+      )}
     </>
   );
 }

From 6e887ade46b9734dabaf5bcc4ce35ca3e8564351 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 14:51:10 -0300
Subject: [PATCH 49/84] Added new types on ConfirmationModalType

---
 src/frontend/src/types/components/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 058c6a83355..e65101ffeeb 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -435,6 +435,7 @@ export type ConfirmationModalType = {
   title: string;
   titleHeader?: string;
   destructive?: boolean;
+  destructiveCancel?: boolean;
   modalContentTitle?: string;
   cancelText: string;
   confirmationText: string;
@@ -446,7 +447,7 @@ export type ConfirmationModalType = {
   index?: number;
   onConfirm: (index, data) => void;
   open?: boolean;
-  onClose?: (close: boolean) => void;
+  onClose?: () => void;
   size?:
     | "x-small"
     | "smaller"

From 734820a082e5efc7752c9ce524cd1c30264400c9 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 15:50:26 -0300
Subject: [PATCH 50/84] Implement save on clicking the save button on the
 header

---
 .../components/menuBar/index.tsx              | 39 +++++++++++++------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index a5a2747af92..dd562487fd1 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -255,19 +255,36 @@ export const MenuBar = ({}: {}): JSX.Element => {
         >
           <div className="flex cursor-default items-center gap-2 text-sm text-muted-foreground transition-all">
             <div className="flex cursor-default items-center gap-1.5 text-sm text-muted-foreground transition-all">
-              <IconComponent
-                name={
-                  isBuilding || saveLoading
-                    ? "Loader2"
-                    : timeDifference > 1
-                      ? "Save"
-                      : "CheckCircle2"
-                }
+              <Button
+                unstyled
+                disabled={shouldAutosave || timeDifference <= 1}
                 className={cn(
-                  "h-4 w-4",
-                  isBuilding || saveLoading ? "animate-spin" : "animate-wiggle",
+                  !shouldAutosave && timeDifference > 1
+                    ? "hover:text-primary"
+                    : "",
                 )}
-              />
+                onClick={() => {
+                  saveFlow().then(() => {
+                    setSuccessData({ title: "Saved successfully" });
+                  });
+                }}
+              >
+                <IconComponent
+                  name={
+                    isBuilding || saveLoading
+                      ? "Loader2"
+                      : timeDifference > 1
+                        ? "Save"
+                        : "CheckCircle2"
+                  }
+                  className={cn(
+                    "h-4 w-4",
+                    isBuilding || saveLoading
+                      ? "animate-spin"
+                      : "animate-wiggle",
+                  )}
+                />
+              </Button>
               <div>{printByBuildStatus()}</div>
             </div>
             <button

From 3db8aa7a1505af9b4890cee9a7a784fe845209bb Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 15:56:38 -0300
Subject: [PATCH 51/84] added save component shortcut to use save shortcut as
 save flow

---
 src/frontend/src/stores/shortcuts.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/frontend/src/stores/shortcuts.ts b/src/frontend/src/stores/shortcuts.ts
index 774d0ec273a..f37afc0c4b0 100644
--- a/src/frontend/src/stores/shortcuts.ts
+++ b/src/frontend/src/stores/shortcuts.ts
@@ -21,6 +21,7 @@ export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
   component: "mod+shift+s",
   docs: "mod+shift+d",
   save: "mod+s",
+  save_component: "mod+shift+e",
   delete: "backspace",
   group: "mod+g",
   cut: "mod+x",

From af81afa969f973019dd11acd14020ab4464b68a0 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 15:56:52 -0300
Subject: [PATCH 52/84] added save component shortcut on shortcutsStore type

---
 src/frontend/src/types/store/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/frontend/src/types/store/index.ts b/src/frontend/src/types/store/index.ts
index c074f85c285..392a73a0987 100644
--- a/src/frontend/src/types/store/index.ts
+++ b/src/frontend/src/types/store/index.ts
@@ -39,6 +39,7 @@ export type shortcutsStoreType = {
   component: string;
   docs: string;
   save: string;
+  save_component: string;
   delete: string;
   update: string;
   download: string;

From db386efaaedad0a94da635e911a8ab804e71ae63 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 15:57:05 -0300
Subject: [PATCH 53/84] changed save shortcut to save component on node toolbar

---
 .../FlowPage/components/nodeToolbarComponent/index.tsx      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index d2c80c02dd3..f22fc1fdd36 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -185,7 +185,7 @@ export default function NodeToolbarComponent({
   const advanced = useShortcutsStore((state) => state.advanced);
   const minimize = useShortcutsStore((state) => state.minimize);
   const component = useShortcutsStore((state) => state.component);
-  const save = useShortcutsStore((state) => state.save);
+  const save_component = useShortcutsStore((state) => state.save_component);
   const docs = useShortcutsStore((state) => state.docs);
   const code = useShortcutsStore((state) => state.code);
   const group = useShortcutsStore((state) => state.group);
@@ -198,7 +198,7 @@ export default function NodeToolbarComponent({
   useHotkeys(component, handleShareWShortcut, { preventDefault });
   useHotkeys(code, handleCodeWShortcut, { preventDefault });
   useHotkeys(advanced, handleAdvancedWShortcut, { preventDefault });
-  useHotkeys(save, handleSaveWShortcut, { preventDefault });
+  useHotkeys(save_component, handleSaveWShortcut, { preventDefault });
   useHotkeys(docs, handleDocsWShortcut, { preventDefault });
   useHotkeys(download, handleDownloadWShortcut, { preventDefault });
   useHotkeys(freeze, handleFreeze);
@@ -712,7 +712,7 @@ export default function NodeToolbarComponent({
               });
               setSuccessData({ title: `${data.id} successfully overridden!` });
             }}
-            onClose={setShowOverrideModal}
+            onClose={() => setShowOverrideModal(false)}
             onCancel={() => {
               addFlow({
                 flow: flowComponent,

From 0c17b7b715241f944d63ec1a4c49aa9425782dee Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 15:57:19 -0300
Subject: [PATCH 54/84] added save shortcut to header menubar

---
 .../components/menuBar/index.tsx              | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index dd562487fd1..656f6aec9e4 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -10,6 +10,7 @@ import {
 import useAddFlow from "@/hooks/flows/use-add-flow";
 import useSaveFlow from "@/hooks/flows/use-save-flow";
 import useUploadFlow from "@/hooks/flows/use-upload-flow";
+import { useHotkeys } from "react-hotkeys-hook";
 import { useNavigate } from "react-router-dom";
 import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
 import { SAVED_HOVER } from "../../../../constants/constants";
@@ -87,6 +88,15 @@ export const MenuBar = ({}: {}): JSX.Element => {
     return savedText;
   }
 
+  const handleSave = () => {
+    saveFlow().then(() => {
+      setSuccessData({ title: "Saved successfully" });
+    });
+  };
+
+  const save = useShortcutsStore((state) => state.save);
+  useHotkeys(save, handleSave, { preventDefault: true });
+
   return currentFlow ? (
     <div className="round-button-div">
       <div className="header-menu-bar">
@@ -128,14 +138,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
               Settings
             </DropdownMenuItem>
             {!shouldAutosave && (
-              <DropdownMenuItem
-                onClick={() => {
-                  saveFlow().then(() => {
-                    setSuccessData({ title: "Saved successfully" });
-                  });
-                }}
-                className="cursor-pointer"
-              >
+              <DropdownMenuItem onClick={handleSave} className="cursor-pointer">
                 <ToolbarSelectItem
                   value="Save"
                   icon="Save"
@@ -263,11 +266,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
                     ? "hover:text-primary"
                     : "",
                 )}
-                onClick={() => {
-                  saveFlow().then(() => {
-                    setSuccessData({ title: "Saved successfully" });
-                  });
-                }}
+                onClick={handleSave}
               >
                 <IconComponent
                   name={

From c1b4fc369ccbc8b1b1439ad622f4f7599d694d22 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 16:14:44 -0300
Subject: [PATCH 55/84] changed shortcuts name to be compatible with existing
 ones

---
 src/frontend/src/constants/constants.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index 1b0901c60c8..c6da1336bcb 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -770,9 +770,13 @@ export const defaultShortcuts = [
     shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + Shift + D`,
   },
   {
-    name: "Save",
+    name: "Changes Save",
     shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + S`,
   },
+  {
+    name: "Save Component",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + Alt + S`,
+  },
   {
     name: "Delete",
     shortcut: "Backspace",

From 852d3c492cd5d665e907525b612a5b6f3e3a2da1 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 16:15:01 -0300
Subject: [PATCH 56/84] changed shortcuts to be backwards compatible

---
 src/frontend/src/stores/shortcuts.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/stores/shortcuts.ts b/src/frontend/src/stores/shortcuts.ts
index f37afc0c4b0..98702e0054d 100644
--- a/src/frontend/src/stores/shortcuts.ts
+++ b/src/frontend/src/stores/shortcuts.ts
@@ -20,8 +20,8 @@ export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
   duplicate: "mod+d",
   component: "mod+shift+s",
   docs: "mod+shift+d",
-  save: "mod+s",
-  save_component: "mod+shift+e",
+  changes: "mod+s",
+  save: "mod+alt+s",
   delete: "backspace",
   group: "mod+g",
   cut: "mod+x",

From 4cb76c82b59988ff9022295b730910a82ff71914 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 16:15:28 -0300
Subject: [PATCH 57/84] changed save to changes to maintain retrocompatibility

---
 .../components/headerComponent/components/menuBar/index.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 656f6aec9e4..e4301162de6 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -94,8 +94,8 @@ export const MenuBar = ({}: {}): JSX.Element => {
     });
   };
 
-  const save = useShortcutsStore((state) => state.save);
-  useHotkeys(save, handleSave, { preventDefault: true });
+  const changes = useShortcutsStore((state) => state.changes);
+  useHotkeys(changes, handleSave, { preventDefault: true });
 
   return currentFlow ? (
     <div className="round-button-div">

From 567f5242154009258ae5a9837c1201997ede5547 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 16:15:40 -0300
Subject: [PATCH 58/84] changed save_component to save to maintain
 retrocompatibility

---
 .../FlowPage/components/nodeToolbarComponent/index.tsx     | 7 ++++---
 src/frontend/src/types/store/index.ts                      | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index f22fc1fdd36..58107d8b94c 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -185,7 +185,7 @@ export default function NodeToolbarComponent({
   const advanced = useShortcutsStore((state) => state.advanced);
   const minimize = useShortcutsStore((state) => state.minimize);
   const component = useShortcutsStore((state) => state.component);
-  const save_component = useShortcutsStore((state) => state.save_component);
+  const save = useShortcutsStore((state) => state.save);
   const docs = useShortcutsStore((state) => state.docs);
   const code = useShortcutsStore((state) => state.code);
   const group = useShortcutsStore((state) => state.group);
@@ -198,7 +198,7 @@ export default function NodeToolbarComponent({
   useHotkeys(component, handleShareWShortcut, { preventDefault });
   useHotkeys(code, handleCodeWShortcut, { preventDefault });
   useHotkeys(advanced, handleAdvancedWShortcut, { preventDefault });
-  useHotkeys(save_component, handleSaveWShortcut, { preventDefault });
+  useHotkeys(save, handleSaveWShortcut, { preventDefault });
   useHotkeys(docs, handleDocsWShortcut, { preventDefault });
   useHotkeys(download, handleDownloadWShortcut, { preventDefault });
   useHotkeys(freeze, handleFreeze);
@@ -543,7 +543,8 @@ export default function NodeToolbarComponent({
               <SelectItem value={"save"}>
                 <ToolbarSelectItem
                   shortcut={
-                    shortcuts.find((obj) => obj.name === "Save")?.shortcut!
+                    shortcuts.find((obj) => obj.name === "Save Component")
+                      ?.shortcut!
                   }
                   value={"Save"}
                   icon={"SaveAll"}
diff --git a/src/frontend/src/types/store/index.ts b/src/frontend/src/types/store/index.ts
index 392a73a0987..43254c8511a 100644
--- a/src/frontend/src/types/store/index.ts
+++ b/src/frontend/src/types/store/index.ts
@@ -38,8 +38,8 @@ export type shortcutsStoreType = {
   duplicate: string;
   component: string;
   docs: string;
+  changes: string;
   save: string;
-  save_component: string;
   delete: string;
   update: string;
   download: string;

From 246b9bfe5dde70ac43725e90cd783cccb647e64c Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 16:20:39 -0300
Subject: [PATCH 59/84] Changed time difference to unsaved changes

---
 .../components/menuBar/index.tsx              | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index e4301162de6..5feaef70415 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -10,6 +10,7 @@ import {
 import useAddFlow from "@/hooks/flows/use-add-flow";
 import useSaveFlow from "@/hooks/flows/use-save-flow";
 import useUploadFlow from "@/hooks/flows/use-upload-flow";
+import { customStringify } from "@/utils/reactflowUtils";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useNavigate } from "react-router-dom";
 import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
@@ -31,7 +32,6 @@ import { Button } from "../../../ui/button";
 export const MenuBar = ({}: {}): JSX.Element => {
   const shortcuts = useShortcutsStore((state) => state.shortcuts);
   const addFlow = useAddFlow();
-  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setLockChat = useFlowStore((state) => state.setLockChat);
@@ -50,14 +50,17 @@ export const MenuBar = ({}: {}): JSX.Element => {
   const getTypes = useTypesStore((state) => state.getTypes);
   const saveFlow = useSaveFlow();
   const shouldAutosave = process.env.LANGFLOW_AUTO_SAVE !== "false";
-  const updatedAt = currentFlow?.updated_at;
-  const currentTime = new Date();
-  const updatedTime = new Date(updatedAt ?? "");
-  const timeDifference =
-    (currentTime.getTime() - updatedTime.getTime()) / 1000 / 60; // difference in minutes
+  const currentFlow = useFlowStore((state) => state.currentFlow);
+  const currentSavedFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const updatedAt = currentSavedFlow?.updated_at;
+
+  const changesNotSaved =
+    customStringify(currentFlow?.data) !==
+    customStringify(currentSavedFlow?.data);
+
   const savedText =
-    updatedAt && timeDifference > 1
-      ? new Date(currentFlow.updated_at ?? "").toLocaleString("en-US", {
+    updatedAt && changesNotSaved
+      ? new Date(updatedAt).toLocaleString("en-US", {
           hour: "numeric",
           minute: "numeric",
         })
@@ -243,11 +246,11 @@ export const MenuBar = ({}: {}): JSX.Element => {
         ></FlowSettingsModal>
         <FlowLogsModal open={openLogs} setOpen={setOpenLogs}></FlowLogsModal>
       </div>
-      {(currentFlow.updated_at || saveLoading) && (
+      {(updatedAt || saveLoading) && (
         <ShadTooltip
           content={
             SAVED_HOVER +
-            new Date(currentFlow.updated_at ?? "").toLocaleString("en-US", {
+            new Date(updatedAt ?? "").toLocaleString("en-US", {
               hour: "numeric",
               minute: "numeric",
               second: "numeric",
@@ -260,9 +263,9 @@ export const MenuBar = ({}: {}): JSX.Element => {
             <div className="flex cursor-default items-center gap-1.5 text-sm text-muted-foreground transition-all">
               <Button
                 unstyled
-                disabled={shouldAutosave || timeDifference <= 1}
+                disabled={shouldAutosave || !changesNotSaved}
                 className={cn(
-                  !shouldAutosave && timeDifference > 1
+                  !shouldAutosave && changesNotSaved
                     ? "hover:text-primary"
                     : "",
                 )}
@@ -272,7 +275,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
                   name={
                     isBuilding || saveLoading
                       ? "Loader2"
-                      : timeDifference > 1
+                      : changesNotSaved
                         ? "Save"
                         : "CheckCircle2"
                   }

From c91ad5386050755cb1ae92be5dd3eaad5b72e7be Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 16:22:28 -0300
Subject: [PATCH 60/84] changed the toolbar select item to get the right save
 shortcut

---
 .../components/headerComponent/components/menuBar/index.tsx  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 5feaef70415..4e73ffd0f6b 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -147,8 +147,9 @@ export const MenuBar = ({}: {}): JSX.Element => {
                   icon="Save"
                   dataTestId=""
                   shortcut={
-                    shortcuts.find((s) => s.name.toLowerCase() === "save")
-                      ?.shortcut!
+                    shortcuts.find(
+                      (s) => s.name.toLowerCase() === "changes save",
+                    )?.shortcut!
                   }
                 />
               </DropdownMenuItem>

From 253c871d88e9a1d699e90bfeb0b9a55b7573b31d Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 17:23:36 -0300
Subject: [PATCH 61/84] Changed save flow to use current flow from useFlowStore
 instead of the previous saved flow

---
 src/frontend/src/hooks/flows/use-save-flow.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/hooks/flows/use-save-flow.ts b/src/frontend/src/hooks/flows/use-save-flow.ts
index dee4143c0c5..d204f2d031f 100644
--- a/src/frontend/src/hooks/flows/use-save-flow.ts
+++ b/src/frontend/src/hooks/flows/use-save-flow.ts
@@ -14,7 +14,7 @@ const useSaveFlow = () => {
   const setSaveLoading = useFlowsManagerStore((state) => state.setSaveLoading);
   const setCurrentFlow = useFlowStore((state) => state.setCurrentFlow);
 
-  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const currentFlow = useFlowStore((state) => state.currentFlow);
   const flowData = currentFlow?.data;
 
   const { mutate } = usePatchUpdateFlow();

From 2e62439f7a521344bbde7d617759116162e2655a Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 17:23:54 -0300
Subject: [PATCH 62/84] changed changesNotSaved to include flow name and
 metadata

---
 .../components/headerComponent/components/menuBar/index.tsx    | 3 +--
 src/frontend/src/pages/FlowPage/index.tsx                      | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 4e73ffd0f6b..53b5e2e931e 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -55,8 +55,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
   const updatedAt = currentSavedFlow?.updated_at;
 
   const changesNotSaved =
-    customStringify(currentFlow?.data) !==
-    customStringify(currentSavedFlow?.data);
+    customStringify(currentFlow) !== customStringify(currentSavedFlow);
 
   const savedText =
     updatedAt && changesNotSaved
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index ee4e0a46979..68874b63b6b 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -21,8 +21,7 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
   const currentSavedFlow = useFlowsManagerStore((state) => state.currentFlow);
 
   const changesNotSaved =
-    customStringify(currentFlow?.data) !==
-    customStringify(currentSavedFlow?.data);
+    customStringify(currentFlow) !== customStringify(currentSavedFlow);
 
   const blocker = useBlocker(changesNotSaved);
   const version = useDarkStore((state) => state.version);

From 6d10d9f63e86936e6201756e007ee4ee397219ce Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 17:24:22 -0300
Subject: [PATCH 63/84] Added way of saving the flow settings just locally
 instead of directly to database

---
 .../src/modals/flowSettingsModal/index.tsx    | 47 ++++++++++++-------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index b76ac85a5ee..7c8a1c374fe 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -1,3 +1,6 @@
+import useSaveFlow from "@/hooks/flows/use-save-flow";
+import useFlowStore from "@/stores/flowStore";
+import { cloneDeep } from "lodash";
 import { useEffect, useState } from "react";
 import EditFlowSettings from "../../components/editFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
@@ -13,8 +16,9 @@ export default function FlowSettingsModal({
   open,
   setOpen,
 }: FlowSettingsPropsType): JSX.Element {
-  const saveFlow = useFlowsManagerStore((state) => state.saveFlow);
-  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const saveFlow = useSaveFlow();
+  const currentFlow = useFlowStore((state) => state.currentFlow);
+  const setCurrentFlow = useFlowStore((state) => state.setCurrentFlow);
   const flows = useFlowsManagerStore((state) => state.flows);
   useEffect(() => {
     setName(currentFlow!.name);
@@ -28,25 +32,34 @@ export default function FlowSettingsModal({
   );
   const [isSaving, setIsSaving] = useState(false);
   const [disableSave, setDisableSave] = useState(true);
+  const shouldAutosave = process.env.LANGFLOW_AUTO_SAVE !== "false";
   function handleClick(): void {
     setIsSaving(true);
-    currentFlow!.name = name;
-    currentFlow!.description = description;
-    currentFlow!.endpoint_name =
+    if (!currentFlow) return;
+    const newFlow = cloneDeep(currentFlow);
+    newFlow.name = name;
+    newFlow.description = description;
+    newFlow.endpoint_name =
       endpoint_name && endpoint_name.length > 0 ? endpoint_name : null;
-    saveFlow(currentFlow!)
-      ?.then(() => {
-        setOpen(false);
-        setIsSaving(false);
-      })
-      .catch((err) => {
-        useAlertStore.getState().setErrorData({
-          title: "Error while saving changes",
-          list: [err?.response?.data.detail ?? ""],
+    if (shouldAutosave) {
+      saveFlow(newFlow)
+        ?.then(() => {
+          setOpen(false);
+          setIsSaving(false);
+        })
+        .catch((err) => {
+          useAlertStore.getState().setErrorData({
+            title: "Error while saving changes",
+            list: [err?.response?.data.detail ?? ""],
+          });
+          console.error(err);
+          setIsSaving(false);
         });
-        console.error(err);
-        setIsSaving(false);
-      });
+    } else {
+      setCurrentFlow(newFlow);
+      setOpen(false);
+      setIsSaving(false);
+    }
   }
 
   const [nameLists, setNameList] = useState<string[]>([]);

From 17fd1bf9e8a05b0484d243663c4558cd8b97fe89 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 17:25:53 -0300
Subject: [PATCH 64/84] Changed shareModal to save flow with hook

---
 src/frontend/src/modals/shareModal/index.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx
index f616ab85ed1..1cf82a36f75 100644
--- a/src/frontend/src/modals/shareModal/index.tsx
+++ b/src/frontend/src/modals/shareModal/index.tsx
@@ -1,4 +1,5 @@
 import { useGetTagsQuery } from "@/controllers/API/queries/store";
+import useSaveFlow from "@/hooks/flows/use-save-flow";
 import { cloneDeep } from "lodash";
 import { ReactNode, useEffect, useMemo, useState } from "react";
 import EditFlowSettings from "../../components/editFlowSettingsComponent";
@@ -8,13 +9,11 @@ import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
 import {
   getStoreComponents,
-  getStoreTags,
   saveFlowStore,
   updateFlowStore,
 } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
 import { useDarkStore } from "../../stores/darkStore";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { FlowType } from "../../types/flow";
 import {
@@ -59,7 +58,7 @@ export default function ShareModal({
   const [unavaliableNames, setUnavaliableNames] = useState<
     { id: string; name: string }[]
   >([]);
-  const saveFlow = useFlowsManagerStore((state) => state.saveFlow);
+  const saveFlow = useSaveFlow();
   const { data, isFetching } = useGetTagsQuery();
 
   const [loadingNames, setLoadingNames] = useState(false);
@@ -105,7 +104,7 @@ export default function ShareModal({
 
     function successShare() {
       if (!is_component) {
-        saveFlow(flow!, true);
+        saveFlow(flow);
       }
       setSuccessData({
         title: `${is_component ? "Component" : "Flow"} shared successfully!`,

From eeaf21a555902247769ce7c24fd79542dc4d61bf Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 17:26:46 -0300
Subject: [PATCH 65/84] removed old auto saving on connect

---
 src/frontend/src/stores/flowStore.ts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index 0c62f04c72d..53bad8291b2 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -465,13 +465,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
 
       return newEdges;
     });
-    useFlowsManagerStore
-      .getState()
-      .autoSaveCurrentFlow(
-        get().nodes,
-        newEdges,
-        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 },
-      );
   },
   unselectAll: () => {
     let newNodes = cloneDeep(get().nodes);

From 72a40a17e39606296ae024fe3e6f3ada92a85e91 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 17:27:39 -0300
Subject: [PATCH 66/84] Removed save functions from flowsManagerStore

---
 src/frontend/src/stores/flowsManagerStore.ts  | 62 +------------------
 .../src/types/zustand/flowsManager/index.ts   | 16 -----
 2 files changed, 1 insertion(+), 77 deletions(-)

diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts
index 8fa617151c4..d06c6864380 100644
--- a/src/frontend/src/stores/flowsManagerStore.ts
+++ b/src/frontend/src/stores/flowsManagerStore.ts
@@ -1,13 +1,6 @@
-import { AxiosError } from "axios";
 import { cloneDeep } from "lodash";
-import pDebounce from "p-debounce";
-import { Edge, Node, Viewport } from "reactflow";
 import { create } from "zustand";
-import { SAVE_DEBOUNCE_TIME } from "../constants/constants";
-import {
-  readFlowsFromDatabase,
-  updateFlowInDatabase,
-} from "../controllers/API";
+import { readFlowsFromDatabase } from "../controllers/API";
 import { FlowType } from "../types/flow";
 import {
   FlowsManagerStoreType,
@@ -111,59 +104,6 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
         });
     });
   },
-  autoSaveCurrentFlow: (nodes: Node[], edges: Edge[], viewport: Viewport) => {
-    if (get().currentFlow) {
-      get().saveFlow(
-        { ...get().currentFlow!, data: { nodes, edges, viewport } },
-        true,
-      );
-    }
-  },
-  saveFlow: (flow: FlowType, silent?: boolean) => {
-    set({ saveLoading: true }); // set saveLoading true immediately
-    return get().saveFlowDebounce(flow, silent); // call the debounced function directly
-  },
-  saveFlowDebounce: pDebounce((flow: FlowType, silent?: boolean) => {
-    const folderUrl = useFolderStore.getState().folderUrl;
-    const hasFolderUrl = folderUrl != null && folderUrl !== "";
-
-    flow.folder_id = hasFolderUrl
-      ? useFolderStore.getState().folderUrl
-      : useFolderStore.getState().myCollectionId ?? "";
-
-    return new Promise<void>((resolve, reject) => {
-      updateFlowInDatabase(flow)
-        .then((updatedFlow) => {
-          if (updatedFlow) {
-            // updates flow in state
-            if (!silent) {
-              useAlertStore
-                .getState()
-                .setSuccessData({ title: "Changes saved successfully" });
-            }
-            get().setFlows(
-              get().flows.map((flow) => {
-                if (flow.id === updatedFlow.id) {
-                  return updatedFlow;
-                }
-                return flow;
-              }),
-            );
-            //update tabs state
-
-            resolve();
-            set({ saveLoading: false });
-          }
-        })
-        .catch((err) => {
-          useAlertStore.getState().setErrorData({
-            title: "Error while saving changes",
-            list: [(err as AxiosError).message],
-          });
-          reject(err);
-        });
-    });
-  }, SAVE_DEBOUNCE_TIME),
   takeSnapshot: () => {
     const currentFlowId = get().currentFlowId;
     // push the current graph to the past state
diff --git a/src/frontend/src/types/zustand/flowsManager/index.ts b/src/frontend/src/types/zustand/flowsManager/index.ts
index c99c090bb69..6fd343e0768 100644
--- a/src/frontend/src/types/zustand/flowsManager/index.ts
+++ b/src/frontend/src/types/zustand/flowsManager/index.ts
@@ -1,4 +1,3 @@
-import { Edge, Node, Viewport } from "reactflow";
 import { FlowType } from "../../flow";
 
 export type FlowsManagerStoreType = {
@@ -15,21 +14,6 @@ export type FlowsManagerStoreType = {
   isLoading: boolean;
   setIsLoading: (isLoading: boolean) => void;
   refreshFlows: () => Promise<void>;
-  saveFlow: (
-    flow: FlowType,
-    silent?: boolean,
-    folderId?: string,
-  ) => Promise<void> | undefined;
-  saveFlowDebounce: (
-    flow: FlowType,
-    silent?: boolean,
-    folderId?: string,
-  ) => Promise<void> | undefined;
-  autoSaveCurrentFlow: (
-    nodes: Node[],
-    edges: Edge[],
-    viewport: Viewport,
-  ) => void;
   undo: () => void;
   redo: () => void;
   takeSnapshot: () => void;

From f04822b47dc082da112c08b9ab19f33ed106be70 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 17:43:22 -0300
Subject: [PATCH 67/84] refactor: Remove unused imports and state variables in
 EditFlowSettings component

---
 src/frontend/src/components/editFlowSettingsComponent/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/frontend/src/components/editFlowSettingsComponent/index.tsx b/src/frontend/src/components/editFlowSettingsComponent/index.tsx
index 03a9252f3c0..d1fcc710087 100644
--- a/src/frontend/src/components/editFlowSettingsComponent/index.tsx
+++ b/src/frontend/src/components/editFlowSettingsComponent/index.tsx
@@ -2,7 +2,6 @@ import React, { ChangeEvent, useState } from "react";
 import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
 import { Textarea } from "../../components/ui/textarea";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { InputProps } from "../../types/components";
 import { cn, isEndpointNameValid } from "../../utils/utils";
 
@@ -19,7 +18,6 @@ export const EditFlowSettings: React.FC<InputProps> = ({
   const [isMaxLength, setIsMaxLength] = useState(false);
   const [validEndpointName, setValidEndpointName] = useState(true);
   const [isInvalidName, setIsInvalidName] = useState(false);
-  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
 
   const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;

From 763e8c1f6816bbabe5a0af942870b72d1f538233 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 17:44:25 -0300
Subject: [PATCH 68/84] use current flow not saved one and refactored page to
 not receive flow

---
 .../API/queries/_builds/use-get-builds.ts     |  3 +-
 src/frontend/src/modals/IOModal/index.tsx     | 10 +--
 src/frontend/src/modals/exportModal/index.tsx |  4 +-
 .../components/PageComponent/index.tsx        | 22 +++---
 .../extraSidebarComponent/index.tsx           | 69 +------------------
 .../components/nodeToolbarComponent/index.tsx |  8 +--
 src/frontend/src/pages/FlowPage/index.tsx     |  2 +-
 src/frontend/src/pages/Playground/index.tsx   | 24 +------
 src/frontend/src/pages/ViewPage/index.tsx     |  3 +-
 9 files changed, 29 insertions(+), 116 deletions(-)

diff --git a/src/frontend/src/controllers/API/queries/_builds/use-get-builds.ts b/src/frontend/src/controllers/API/queries/_builds/use-get-builds.ts
index facc45c4c4f..ad062ac7af4 100644
--- a/src/frontend/src/controllers/API/queries/_builds/use-get-builds.ts
+++ b/src/frontend/src/controllers/API/queries/_builds/use-get-builds.ts
@@ -1,5 +1,4 @@
 import useFlowStore from "@/stores/flowStore";
-import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { FlowPoolType } from "@/types/zustand/flow";
 import { keepPreviousData } from "@tanstack/react-query";
 import { AxiosResponse } from "axios";
@@ -20,7 +19,7 @@ export const useGetBuildsQuery: useQueryFunctionType<
   const { query } = UseRequestProcessor();
 
   const setFlowPool = useFlowStore((state) => state.setFlowPool);
-  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const currentFlow = useFlowStore((state) => state.currentFlow);
 
   const getBuildsFn = async (
     params: BuildsQueryParams,
diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index 2df027e81c3..7e13a6f1275 100644
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@@ -107,7 +107,7 @@ export default function IOModal({
   const setLockChat = useFlowStore((state) => state.setLockChat);
   const [chatValue, setChatValue] = useState("");
   const isBuilding = useFlowStore((state) => state.isBuilding);
-  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const setNode = useFlowStore((state) => state.setNode);
   const [sessions, setSessions] = useState<string[]>([]);
   const messages = useMessagesStore((state) => state.messages);
@@ -115,7 +115,7 @@ export default function IOModal({
 
   const { refetch } = useGetMessagesQuery({
     mode: "union",
-    id: currentFlow?.id,
+    id: currentFlowId,
   });
 
   async function sendMessage({
@@ -164,7 +164,7 @@ export default function IOModal({
   useEffect(() => {
     const sessions = new Set<string>();
     messages
-      .filter((message) => message.flow_id === currentFlow!.id)
+      .filter((message) => message.flow_id === currentFlowId)
       .forEach((row) => {
         sessions.add(row.session_id);
       });
@@ -375,7 +375,7 @@ export default function IOModal({
                                 size="md"
                                 className="block truncate"
                               >
-                                {session === currentFlow?.id
+                                {session === currentFlowId
                                   ? "Default Session"
                                   : session}
                               </Badge>
@@ -491,7 +491,7 @@ export default function IOModal({
                     ) && (
                       <SessionView
                         session={selectedViewField.id}
-                        id={currentFlow!.id}
+                        id={currentFlowId}
                       />
                     )}
                   </div>
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 8904f79befe..9689170faa6 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -1,3 +1,4 @@
+import useFlowStore from "@/stores/flowStore";
 import { ReactNode, forwardRef, useEffect, useState } from "react";
 import EditFlowSettings from "../../components/editFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
@@ -10,7 +11,6 @@ import {
 } from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
 import { useDarkStore } from "../../stores/darkStore";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { downloadFlow, removeApiKeys } from "../../utils/reactflowUtils";
 import BaseModal from "../baseModal";
 
@@ -19,7 +19,7 @@ const ExportModal = forwardRef(
     const version = useDarkStore((state) => state.version);
     const setNoticeData = useAlertStore((state) => state.setNoticeData);
     const [checked, setChecked] = useState(false);
-    const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+    const currentFlow = useFlowStore((state) => state.currentFlow);
     useEffect(() => {
       setName(currentFlow!.name);
       setDescription(currentFlow!.description);
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 4dd4e5425c4..5af80da3106 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -36,7 +36,7 @@ import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { useShortcutsStore } from "../../../../stores/shortcuts";
 import { useTypesStore } from "../../../../stores/typesStore";
 import { APIClassType } from "../../../../types/api";
-import { FlowType, NodeType } from "../../../../types/flow";
+import { NodeType } from "../../../../types/flow";
 import {
   checkOldComponents,
   generateFlow,
@@ -56,13 +56,7 @@ const nodeTypes = {
   genericNode: GenericNode,
 };
 
-export default function Page({
-  flow,
-  view,
-}: {
-  flow: FlowType;
-  view?: boolean;
-}): JSX.Element {
+export default function Page({ view }: { view?: boolean }): JSX.Element {
   const uploadFlow = useUploadFlow();
   const autoSaveFlow = useAutoSaveFlow();
   const types = useTypesStore((state) => state.types);
@@ -93,7 +87,7 @@ export default function Page({
     (state) => state.setLastCopiedSelection,
   );
   const onConnect = useFlowStore((state) => state.onConnect);
-  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const currentSavedFlow = useFlowsManagerStore((state) => state.currentFlow);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setNoticeData = useAlertStore((state) => state.setNoticeData);
   const updateCurrentFlow = useFlowStore((state) => state.updateCurrentFlow);
@@ -151,8 +145,12 @@ export default function Page({
   }, [lastCopiedSelection, lastSelection, takeSnapshot, selectionMenuVisible]);
 
   useEffect(() => {
-    if (reactFlowInstance && currentFlow) {
-      const viewport = currentFlow.data?.viewport ?? { zoom: 1, x: 0, y: 0 };
+    if (reactFlowInstance && currentSavedFlow) {
+      const viewport = currentSavedFlow.data?.viewport ?? {
+        zoom: 1,
+        x: 0,
+        y: 0,
+      };
       reactFlowInstance!.setViewport(viewport);
     }
   }, [currentFlowId, reactFlowInstance]);
@@ -175,7 +173,7 @@ export default function Page({
   }, [currentFlowId]);
 
   useEffect(() => {
-    if (currentFlow && reactFlowInstance) {
+    if (currentSavedFlow && reactFlowInstance) {
       autoSaveFlow();
       updateCurrentFlow({
         nodes,
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 3ac87f76c0d..b16d7cc733c 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -1,17 +1,13 @@
 import { cloneDeep } from "lodash";
 import { LinkIcon, SparklesIcon } from "lucide-react";
-import { Fragment, useEffect, useMemo, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import IconComponent from "../../../../components/genericIconComponent";
 import ShadTooltip from "../../../../components/shadTooltipComponent";
 import { Input } from "../../../../components/ui/input";
 import { Separator } from "../../../../components/ui/separator";
 import { PRIORITY_SIDEBAR_ORDER } from "../../../../constants/constants";
-import ExportModal from "../../../../modals/exportModal";
-import ShareModal from "../../../../modals/shareModal";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
-import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
-import { useStoreStore } from "../../../../stores/storeStore";
 import { useTypesStore } from "../../../../stores/typesStore";
 import { APIClassType, APIObjectType } from "../../../../types/api";
 import {
@@ -19,7 +15,7 @@ import {
   nodeIconsLucide,
   nodeNames,
 } from "../../../../utils/styleUtils";
-import { classNames, removeCountFromString } from "../../../../utils/utils";
+import { removeCountFromString } from "../../../../utils/utils";
 import DisclosureComponent from "../DisclosureComponent";
 import ParentDisclosureComponent from "../ParentDisclosureComponent";
 import SidebarDraggableComponent from "./sideBarDraggableComponent";
@@ -31,10 +27,6 @@ export default function ExtraSidebar(): JSX.Element {
   const templates = useTypesStore((state) => state.templates);
   const getFilterEdge = useFlowStore((state) => state.getFilterEdge);
   const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
-  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
-  const hasStore = useStoreStore((state) => state.hasStore);
-  const hasApiKey = useStoreStore((state) => state.hasApiKey);
-  const validApiKey = useStoreStore((state) => state.validApiKey);
 
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const [dataFilter, setFilterData] = useState(data);
@@ -187,63 +179,6 @@ export default function ExtraSidebar(): JSX.Element {
     }
   }, [getFilterEdge, data]);
 
-  const ModalMemo = useMemo(
-    () => (
-      <ShareModal
-        is_component={false}
-        component={currentFlow!}
-        disabled={!hasApiKey || !validApiKey || !hasStore}
-      >
-        <button
-          disabled={!hasApiKey || !validApiKey || !hasStore}
-          className={classNames(
-            "extra-side-bar-buttons gap-[4px] text-sm font-semibold",
-            !hasApiKey || !validApiKey || !hasStore
-              ? "button-disable cursor-default text-muted-foreground"
-              : "",
-          )}
-        >
-          <IconComponent
-            name="Share3"
-            className={classNames(
-              "-m-0.5 -ml-1 h-6 w-6",
-              !hasApiKey || !validApiKey || !hasStore
-                ? "extra-side-bar-save-disable"
-                : "",
-            )}
-          />
-          Share
-        </button>
-      </ShareModal>
-    ),
-    [hasApiKey, validApiKey, currentFlow, hasStore],
-  );
-
-  const ExportMemo = useMemo(
-    () => (
-      <ExportModal>
-        <button className={classNames("extra-side-bar-buttons")}>
-          <IconComponent name="FileDown" className="side-bar-button-size" />
-        </button>
-      </ExportModal>
-    ),
-    [],
-  );
-
-  const getIcon = useMemo(() => {
-    return (SBSectionName: string) => {
-      if (nodeIconsLucide[SBSectionName]) {
-        return (
-          <IconComponent
-            name={SBSectionName}
-            strokeWidth={1.5}
-            className="w-[22px] text-primary"
-          />
-        );
-      }
-    };
-  }, []);
-
   return (
     <div className="side-bar-arrangement">
       <div className="side-bar-search-div-placement">
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 58107d8b94c..9e492d8100a 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -82,7 +82,7 @@ export default function NodeToolbarComponent({
   const validApiKey = useStoreStore((state) => state.validApiKey);
   const shortcuts = useShortcutsStore((state) => state.shortcuts);
   const unselectAll = useFlowStore((state) => state.unselectAll);
-  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const addFlow = useAddFlow();
 
   function handleMinimizeWShortcut(e: KeyboardEvent) {
@@ -179,7 +179,7 @@ export default function NodeToolbarComponent({
   function handleFreezeAll(e: KeyboardEvent) {
     if (isWrappedWithClass(e, "noflow")) return;
     e.preventDefault();
-    FreezeAllVertices({ flowId: currentFlow!.id, stopNodeId: data.id });
+    FreezeAllVertices({ flowId: currentFlowId, stopNodeId: data.id });
   }
 
   const advanced = useShortcutsStore((state) => state.advanced);
@@ -280,7 +280,7 @@ export default function NodeToolbarComponent({
         }));
         break;
       case "freezeAll":
-        FreezeAllVertices({ flowId: currentFlow!.id, stopNodeId: data.id });
+        FreezeAllVertices({ flowId: currentFlowId, stopNodeId: data.id });
         break;
       case "code":
         setOpenModal(!openModal);
@@ -480,7 +480,7 @@ export default function NodeToolbarComponent({
                 event.preventDefault();
                 takeSnapshot();
                 FreezeAllVertices({
-                  flowId: currentFlow!.id,
+                  flowId: currentFlowId,
                   stopNodeId: data.id,
                 });
               }}
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index 68874b63b6b..02a2d52782a 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -79,7 +79,7 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
             <main className="flex flex-1">
               {/* Primary column */}
               <div className="h-full w-full">
-                <Page flow={currentFlow} />
+                <Page />
               </div>
               {!view && <FlowToolbar />}
             </main>
diff --git a/src/frontend/src/pages/Playground/index.tsx b/src/frontend/src/pages/Playground/index.tsx
index 694468a652c..e83faa24b26 100644
--- a/src/frontend/src/pages/Playground/index.tsx
+++ b/src/frontend/src/pages/Playground/index.tsx
@@ -1,25 +1,20 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useParams } from "react-router-dom";
 import LoadingComponent from "../../components/loadingComponent";
 import { getComponent } from "../../controllers/API";
 import IOModal from "../../modals/IOModal";
-import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import cloneFLowWithParent from "../../utils/storeUtils";
 
 export default function PlaygroundPage() {
-  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const getFlowById = useFlowsManagerStore((state) => state.getFlowById);
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId,
   );
   const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
-  const setNodes = useFlowStore((state) => state.setNodes);
-  const setEdges = useFlowStore((state) => state.setEdges);
-  const cleanFlowPool = useFlowStore((state) => state.CleanFlowPool);
+  const currentSavedFlow = useFlowsManagerStore((state) => state.currentFlow);
 
   const { id } = useParams();
-  const [loading, setLoading] = useState(true);
   async function getFlowData() {
     const res = await getComponent(id!);
     const newFlow = cloneFLowWithParent(res, res.id, false, true);
@@ -36,23 +31,10 @@ export default function PlaygroundPage() {
       });
     }
   }, [id]);
-  useEffect(() => {
-    if (currentFlow) {
-      setNodes(currentFlow?.data?.nodes ?? []);
-      setEdges(currentFlow?.data?.edges ?? []);
-      cleanFlowPool();
-      setLoading(false);
-    }
-    return () => {
-      setNodes([]);
-      setEdges([]);
-      cleanFlowPool();
-    };
-  }, [currentFlow]);
 
   return (
     <div className="flex h-full w-full flex-col items-center justify-center align-middle">
-      {loading ? (
+      {currentSavedFlow ? (
         <div>
           <LoadingComponent remSize={24}></LoadingComponent>
         </div>
diff --git a/src/frontend/src/pages/ViewPage/index.tsx b/src/frontend/src/pages/ViewPage/index.tsx
index 5498b77bd1e..a5487937f55 100644
--- a/src/frontend/src/pages/ViewPage/index.tsx
+++ b/src/frontend/src/pages/ViewPage/index.tsx
@@ -4,7 +4,6 @@ import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import Page from "../FlowPage/components/PageComponent";
 
 export default function ViewPage() {
-  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId,
   );
@@ -17,7 +16,7 @@ export default function ViewPage() {
 
   return (
     <div className="flow-page-positioning">
-      {currentFlow && <Page view flow={currentFlow} />}
+      <Page view />
     </div>
   );
 }

From 3a7e8c5017ad06013dc050fa64abc2afe211b36a Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 18:09:41 -0300
Subject: [PATCH 69/84] added check of isFlowPage to display the menubar

---
 .../components/headerComponent/components/menuBar/index.tsx    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 53b5e2e931e..c9fff9dc815 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -53,6 +53,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
   const currentFlow = useFlowStore((state) => state.currentFlow);
   const currentSavedFlow = useFlowsManagerStore((state) => state.currentFlow);
   const updatedAt = currentSavedFlow?.updated_at;
+  const onFlowPage = useFlowStore((state) => state.onFlowPage);
 
   const changesNotSaved =
     customStringify(currentFlow) !== customStringify(currentSavedFlow);
@@ -99,7 +100,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
   const changes = useShortcutsStore((state) => state.changes);
   useHotkeys(changes, handleSave, { preventDefault: true });
 
-  return currentFlow ? (
+  return currentFlow && onFlowPage ? (
     <div className="round-button-div">
       <div className="header-menu-bar">
         <DropdownMenu>

From 11a506ed225ed527cc00b89c03e6a7862868d6b6 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 18:14:47 -0300
Subject: [PATCH 70/84] Added checks to render playground if API key is valid
 and if Flows exists

---
 src/frontend/src/pages/Playground/index.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/pages/Playground/index.tsx b/src/frontend/src/pages/Playground/index.tsx
index e83faa24b26..cf751052502 100644
--- a/src/frontend/src/pages/Playground/index.tsx
+++ b/src/frontend/src/pages/Playground/index.tsx
@@ -1,3 +1,4 @@
+import { useStoreStore } from "@/stores/storeStore";
 import { useEffect } from "react";
 import { useParams } from "react-router-dom";
 import LoadingComponent from "../../components/loadingComponent";
@@ -8,11 +9,13 @@ import cloneFLowWithParent from "../../utils/storeUtils";
 
 export default function PlaygroundPage() {
   const getFlowById = useFlowsManagerStore((state) => state.getFlowById);
+  const flows = useFlowsManagerStore((state) => state.flows);
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId,
   );
   const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
   const currentSavedFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const validApiKey = useStoreStore((state) => state.validApiKey);
 
   const { id } = useParams();
   async function getFlowData() {
@@ -26,15 +29,16 @@ export default function PlaygroundPage() {
     if (getFlowById(id!)) {
       setCurrentFlowId(id!);
     } else {
-      getFlowData().then((flow) => {
-        setCurrentFlow(flow);
-      });
+      if (validApiKey)
+        getFlowData().then((flow) => {
+          setCurrentFlow(flow);
+        });
     }
-  }, [id]);
+  }, [id, flows, validApiKey]);
 
   return (
     <div className="flex h-full w-full flex-col items-center justify-center align-middle">
-      {currentSavedFlow ? (
+      {!currentSavedFlow ? (
         <div>
           <LoadingComponent remSize={24}></LoadingComponent>
         </div>

From 7343b3358ce090c69d1e3a47dac7a3c78bfe7a62 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 18:16:56 -0300
Subject: [PATCH 71/84] Added check to not display X on chat on playground page

---
 src/frontend/src/modals/IOModal/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index 7e13a6f1275..caa10f9bb8e 100644
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@@ -33,6 +33,7 @@ export default function IOModal({
   open,
   setOpen,
   disable,
+  isPlayground,
 }: IOModalPropsType): JSX.Element {
   const allNodes = useFlowStore((state) => state.nodes);
   const inputs = useFlowStore((state) => state.inputs).filter(
@@ -178,6 +179,7 @@ export default function IOModal({
       open={open}
       setOpen={setOpen}
       disable={disable}
+      type={isPlayground ? "modal" : undefined}
       onSubmit={() => sendMessage({ repeat: 1 })}
     >
       <BaseModal.Trigger>{children}</BaseModal.Trigger>

From a335e77a8c5dbff5394c577839b03e0e0c582569 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 9 Aug 2024 18:28:12 -0300
Subject: [PATCH 72/84] Updated flows variable to be undefined by start to
 prevent things from loading before flows initialize

---
 .../sidebarComponent/hooks/use-on-file-drop.tsx  |  4 ++--
 src/frontend/src/hooks/flows/use-add-flow.ts     |  9 ++++++---
 src/frontend/src/hooks/flows/use-delete-flow.ts  |  2 +-
 src/frontend/src/hooks/flows/use-save-flow.ts    |  2 +-
 .../src/modals/flowSettingsModal/index.tsx       | 13 ++++++++-----
 .../sideBarDraggableComponent/index.tsx          |  2 +-
 .../components/nodeToolbarComponent/index.tsx    |  2 +-
 src/frontend/src/pages/FlowPage/index.tsx        | 15 ++++++++++-----
 src/frontend/src/pages/Playground/index.tsx      | 16 +++++++++-------
 src/frontend/src/stores/flowsManagerStore.ts     |  4 ++--
 .../src/types/zustand/flowsManager/index.ts      |  2 +-
 11 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx b/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx
index 216fde9f93e..659eadddf42 100644
--- a/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx
+++ b/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx
@@ -106,14 +106,14 @@ const useFileDrop = (
   };
 
   const uploadFromDragCard = (flowId, folderId) => {
-    const selectedFlow = flows.find((flow) => flow.id === flowId);
+    const selectedFlow = flows?.find((flow) => flow.id === flowId);
 
     if (!selectedFlow) {
       throw new Error("Flow not found");
     }
     const updatedFlow = { ...selectedFlow, folder_id: folderId };
 
-    const newName = addVersionToDuplicates(updatedFlow, flows);
+    const newName = addVersionToDuplicates(updatedFlow, flows ?? []);
 
     updatedFlow.name = newName;
 
diff --git a/src/frontend/src/hooks/flows/use-add-flow.ts b/src/frontend/src/hooks/flows/use-add-flow.ts
index 5d9587db3ee..9a5fe31b5e6 100644
--- a/src/frontend/src/hooks/flows/use-add-flow.ts
+++ b/src/frontend/src/hooks/flows/use-add-flow.ts
@@ -49,7 +49,7 @@ const useAddFlow = () => {
       const my_collection_id = useFolderStore.getState().myCollectionId;
 
       if (params?.override && flow) {
-        const flowId = flows.find((f) => f.name === flow.name);
+        const flowId = flows?.find((f) => f.name === flow.name);
         if (flowId) {
           await deleteFlow({ id: flowId.id });
         }
@@ -60,7 +60,7 @@ const useAddFlow = () => {
         flow,
       );
 
-      const newName = addVersionToDuplicates(newFlow, flows);
+      const newName = addVersionToDuplicates(newFlow, flows ?? []);
       newFlow.name = newName;
       newFlow.folder_id = useFolderStore.getState().folderUrl;
 
@@ -68,7 +68,10 @@ const useAddFlow = () => {
         onSuccess: ({ id }) => {
           newFlow.id = id;
           // Add the new flow to the list of flows.
-          const { data, flows: myFlows } = processFlows([newFlow, ...flows]);
+          const { data, flows: myFlows } = processFlows([
+            newFlow,
+            ...(flows ?? []),
+          ]);
           setFlows(myFlows);
           useTypesStore.setState((state) => ({
             data: { ...state.data, ["saved_components"]: data },
diff --git a/src/frontend/src/hooks/flows/use-delete-flow.ts b/src/frontend/src/hooks/flows/use-delete-flow.ts
index bc8c5d5387d..043df2d2978 100644
--- a/src/frontend/src/hooks/flows/use-delete-flow.ts
+++ b/src/frontend/src/hooks/flows/use-delete-flow.ts
@@ -27,7 +27,7 @@ const useDeleteFlow = () => {
         {
           onSuccess: () => {
             const { data, flows: myFlows } = processFlows(
-              flows.filter((flow) => !id.includes(flow.id)),
+              (flows ?? []).filter((flow) => !id.includes(flow.id)),
             );
             setFlows(myFlows);
             setIsLoading(false);
diff --git a/src/frontend/src/hooks/flows/use-save-flow.ts b/src/frontend/src/hooks/flows/use-save-flow.ts
index d204f2d031f..55383b73400 100644
--- a/src/frontend/src/hooks/flows/use-save-flow.ts
+++ b/src/frontend/src/hooks/flows/use-save-flow.ts
@@ -44,7 +44,7 @@ const useSaveFlow = () => {
           {
             onSuccess: (updatedFlow) => {
               setSaveLoading(false);
-              if (updatedFlow !== null) {
+              if (updatedFlow !== null && flows) {
                 // updates flow in state
                 setFlows(
                   flows.map((flow) => {
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index 7c8a1c374fe..a55441598cc 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -65,11 +65,14 @@ export default function FlowSettingsModal({
   const [nameLists, setNameList] = useState<string[]>([]);
 
   useEffect(() => {
-    const tempNameList: string[] = [];
-    flows.forEach((flow: FlowType) => {
-      if ((flow.is_component ?? false) === false) tempNameList.push(flow.name);
-    });
-    setNameList(tempNameList.filter((name) => name !== currentFlow!.name));
+    if (flows) {
+      const tempNameList: string[] = [];
+      flows.forEach((flow: FlowType) => {
+        if ((flow.is_component ?? false) === false)
+          tempNameList.push(flow.name);
+      });
+      setNameList(tempNameList.filter((name) => name !== currentFlow!.name));
+    }
   }, [flows]);
 
   useEffect(() => {
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
index 835f98c69d6..1dc7e2afa2a 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
@@ -72,7 +72,7 @@ export const SidebarDraggableComponent = forwardRef(
           );
           break;
         case "delete":
-          const flowId = flows.find((f) => f.name === display_name);
+          const flowId = flows?.find((f) => f.name === display_name);
           if (flowId) deleteFlow({ id: flowId.id });
           break;
       }
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 9e492d8100a..743c5acd444 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -355,7 +355,7 @@ export default function NodeToolbarComponent({
     }
   };
 
-  const isSaved = flows.some((flow) =>
+  const isSaved = flows?.some((flow) =>
     Object.values(flow).includes(data.node?.display_name!),
   );
 
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index 02a2d52782a..32c93305573 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -54,14 +54,19 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
 
   // Set flow tab id
   useEffect(() => {
-    const isAnExistingFlow = flows.some((flow) => flow.id === id);
+    if (flows) {
+      const isAnExistingFlow = flows.some((flow) => flow.id === id);
 
-    if (!isAnExistingFlow) {
-      navigate("/all");
-      return;
+      if (!isAnExistingFlow) {
+        navigate("/all");
+        return;
+      }
+
+      setCurrentFlowId(id!);
     }
+  }, [id, flows]);
 
-    setCurrentFlowId(id!);
+  useEffect(() => {
     setOnFlowPage(true);
 
     return () => {
diff --git a/src/frontend/src/pages/Playground/index.tsx b/src/frontend/src/pages/Playground/index.tsx
index cf751052502..21276a96691 100644
--- a/src/frontend/src/pages/Playground/index.tsx
+++ b/src/frontend/src/pages/Playground/index.tsx
@@ -26,13 +26,15 @@ export default function PlaygroundPage() {
 
   // Set flow tab id
   useEffect(() => {
-    if (getFlowById(id!)) {
-      setCurrentFlowId(id!);
-    } else {
-      if (validApiKey)
-        getFlowData().then((flow) => {
-          setCurrentFlow(flow);
-        });
+    if (flows) {
+      if (getFlowById(id!)) {
+        setCurrentFlowId(id!);
+      } else {
+        if (validApiKey)
+          getFlowData().then((flow) => {
+            setCurrentFlow(flow);
+          });
+      }
     }
   }, [id, flows, validApiKey]);
 
diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts
index d06c6864380..ed16031d249 100644
--- a/src/frontend/src/stores/flowsManagerStore.ts
+++ b/src/frontend/src/stores/flowsManagerStore.ts
@@ -37,7 +37,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     useFlowStore.getState().resetFlow(flow);
   },
   getFlowById: (id: string) => {
-    return get().flows.find((flow) => flow.id === id);
+    return get().flows?.find((flow) => flow.id === id);
   },
   setCurrentFlowId: (currentFlowId: string) => {
     const flow = get().flows?.find((flow) => flow.id === currentFlowId);
@@ -48,7 +48,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     });
     useFlowStore.getState().resetFlow(flow);
   },
-  flows: [],
+  flows: undefined,
   allFlows: [],
   setAllFlows: (allFlows: FlowType[]) => {
     set({ allFlows });
diff --git a/src/frontend/src/types/zustand/flowsManager/index.ts b/src/frontend/src/types/zustand/flowsManager/index.ts
index 6fd343e0768..419d5b514b0 100644
--- a/src/frontend/src/types/zustand/flowsManager/index.ts
+++ b/src/frontend/src/types/zustand/flowsManager/index.ts
@@ -2,7 +2,7 @@ import { FlowType } from "../../flow";
 
 export type FlowsManagerStoreType = {
   getFlowById: (id: string) => FlowType | undefined;
-  flows: Array<FlowType>;
+  flows: Array<FlowType> | undefined;
   allFlows: Array<FlowType>;
   setAllFlows: (flows: FlowType[]) => void;
   setFlows: (flows: FlowType[]) => void;

From f101bd1a6f04936c79feefba5ee21103de883ba6 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sun, 11 Aug 2024 23:12:59 -0300
Subject: [PATCH 73/84] Implemented log builds parameter to not allow the
 builds to be logged if user not on flowPage

---
 src/frontend/src/stores/flowStore.ts | 1 +
 src/frontend/src/utils/buildUtils.ts | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index 53bad8291b2..3283fee306e 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -647,6 +647,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       onValidateNodes: validateSubgraph,
       nodes: get().nodes || undefined,
       edges: get().edges || undefined,
+      logBuilds: get().onFlowPage,
     });
     get().setIsBuilding(false);
     get().setLockChat(false);
diff --git a/src/frontend/src/utils/buildUtils.ts b/src/frontend/src/utils/buildUtils.ts
index 77dbb8054e7..1a6a9f31c98 100644
--- a/src/frontend/src/utils/buildUtils.ts
+++ b/src/frontend/src/utils/buildUtils.ts
@@ -30,6 +30,7 @@ type BuildVerticesParams = {
   onValidateNodes?: (nodes: string[]) => void;
   nodes?: Node[];
   edges?: Edge[];
+  logBuilds?: boolean;
 };
 
 function getInactiveVertexData(vertexId: string): VertexBuildTypeAPI {
@@ -146,6 +147,7 @@ export async function buildFlowVertices({
   onValidateNodes,
   nodes,
   edges,
+  logBuilds,
   setLockChat,
 }: BuildVerticesParams) {
   let url = `${BASE_URL_API}build/${flowId}/flow?`;
@@ -155,6 +157,9 @@ export async function buildFlowVertices({
   if (stopNodeId) {
     url = `${url}&stop_component_id=${stopNodeId}`;
   }
+  if (logBuilds !== undefined) {
+    url = `${url}&log_builds=${logBuilds}`;
+  }
   const postData = {};
   if (typeof input_value !== "undefined") {
     postData["inputs"] = { input_value: input_value };

From 2fa6f7112f901084fcc07d9a55ad8dd7c0d2383d Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 12 Aug 2024 14:06:52 -0300
Subject: [PATCH 74/84] fix flows manager store removing the setCurrentFlowId

---
 src/frontend/src/stores/flowsManagerStore.ts         | 9 ---------
 src/frontend/src/types/zustand/flowsManager/index.ts | 3 +--
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts
index ed16031d249..5b5bb451b03 100644
--- a/src/frontend/src/stores/flowsManagerStore.ts
+++ b/src/frontend/src/stores/flowsManagerStore.ts
@@ -39,15 +39,6 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
   getFlowById: (id: string) => {
     return get().flows?.find((flow) => flow.id === id);
   },
-  setCurrentFlowId: (currentFlowId: string) => {
-    const flow = get().flows?.find((flow) => flow.id === currentFlowId);
-    set({
-      currentFlowId,
-      currentFlow:
-        get().flows?.find((flow) => flow.id === currentFlowId) ?? undefined,
-    });
-    useFlowStore.getState().resetFlow(flow);
-  },
   flows: undefined,
   allFlows: [],
   setAllFlows: (allFlows: FlowType[]) => {
diff --git a/src/frontend/src/types/zustand/flowsManager/index.ts b/src/frontend/src/types/zustand/flowsManager/index.ts
index 419d5b514b0..ae1252f26eb 100644
--- a/src/frontend/src/types/zustand/flowsManager/index.ts
+++ b/src/frontend/src/types/zustand/flowsManager/index.ts
@@ -8,7 +8,6 @@ export type FlowsManagerStoreType = {
   setFlows: (flows: FlowType[]) => void;
   currentFlow: FlowType | undefined;
   currentFlowId: string;
-  setCurrentFlowId: (currentFlowId: string) => void;
   saveLoading: boolean;
   setSaveLoading: (saveLoading: boolean) => void;
   isLoading: boolean;
@@ -19,7 +18,7 @@ export type FlowsManagerStoreType = {
   takeSnapshot: () => void;
   examples: Array<FlowType>;
   setExamples: (examples: FlowType[]) => void;
-  setCurrentFlow: (flow: FlowType) => void;
+  setCurrentFlow: (flow?: FlowType) => void;
   setSearchFlowsComponents: (search: string) => void;
   searchFlowsComponents: string;
   selectedFlowsComponentsCards: string[];

From eb97599a0ce9fb9d535b2224b046f33aa93ffbad Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 12 Aug 2024 14:07:06 -0300
Subject: [PATCH 75/84] Add viewport setting on setReactFlowInstance

---
 src/frontend/src/stores/flowStore.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index 3283fee306e..ca42275a3ae 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -193,6 +193,16 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   },
   setReactFlowInstance: (newState) => {
     set({ reactFlowInstance: newState });
+    const viewport = get().currentFlow?.data?.viewport ?? {
+      zoom: 1,
+      x: 0,
+      y: 0,
+    };
+    if (viewport.x == 0 && viewport.y == 0) {
+      newState.fitView();
+    } else {
+      newState.setViewport(viewport);
+    }
   },
   onNodesChange: (changes: NodeChange[]) => {
     set({

From a852b6c6eb3034ebadafbc1b1678dc7060d263e9 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 12 Aug 2024 14:07:35 -0300
Subject: [PATCH 76/84] Remove unused imports

---
 .../components/OutputComponent/index.tsx          | 15 ---------------
 src/frontend/src/stores/darkStore.ts              |  2 +-
 2 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/OutputComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/OutputComponent/index.tsx
index 6c18e6b0bfa..d3992035f75 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/OutputComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/OutputComponent/index.tsx
@@ -1,17 +1,5 @@
-import { cloneDeep } from "lodash";
-import { useUpdateNodeInternals } from "reactflow";
-import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import ShadTooltip from "../../../../components/shadTooltipComponent";
-import { Button } from "../../../../components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "../../../../components/ui/dropdown-menu";
-import useFlowStore from "../../../../stores/flowStore";
 import { outputComponentType } from "../../../../types/components";
-import { NodeDataType } from "../../../../types/flow";
 import { cn } from "../../../../utils/utils";
 
 export default function OutputComponent({
@@ -23,9 +11,6 @@ export default function OutputComponent({
   name,
   proxy,
 }: outputComponentType) {
-  const setNode = useFlowStore((state) => state.setNode);
-  const updateNodeInternals = useUpdateNodeInternals();
-
   const displayProxy = (children) => {
     if (proxy) {
       return (
diff --git a/src/frontend/src/stores/darkStore.ts b/src/frontend/src/stores/darkStore.ts
index a652525925a..6e3c28afa56 100644
--- a/src/frontend/src/stores/darkStore.ts
+++ b/src/frontend/src/stores/darkStore.ts
@@ -1,5 +1,5 @@
 import { create } from "zustand";
-import { getRepoStars, getVersion } from "../controllers/API";
+import { getRepoStars } from "../controllers/API";
 import { DarkStoreType } from "../types/zustand/dark";
 
 const startedStars = Number(window.localStorage.getItem("githubStars")) ?? 0;

From bac3e1bbdb6f6b24df833dd3809489a11a46fec4 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 12 Aug 2024 14:08:39 -0300
Subject: [PATCH 77/84] Removed setting of currentFlowId on every page and made
 the setting of currentFlow become default

---
 .../src/components/cardComponent/index.tsx    |  7 ++--
 src/frontend/src/pages/AdminPage/index.tsx    |  9 -----
 src/frontend/src/pages/FlowPage/index.tsx     | 12 +++----
 .../pages/MainPage/pages/mainPage/index.tsx   | 11 +-----
 src/frontend/src/pages/Playground/index.tsx   |  8 ++---
 .../src/pages/ProfileSettingsPage/index.tsx   | 12 +------
 src/frontend/src/pages/SettingsPage/index.tsx | 11 ------
 .../SettingsPage/pages/GeneralPage/index.tsx  |  7 +---
 .../pages/hooks/use-scroll-to-element.tsx     |  9 +----
 src/frontend/src/pages/StorePage/index.tsx    | 10 +-----
 src/frontend/src/pages/ViewPage/index.tsx     | 35 ++++++++++++++++---
 11 files changed, 46 insertions(+), 85 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index f90f2c35024..c36aef2913d 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -63,9 +63,6 @@ export default function CollectionCardComponent({
   const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
   const getFlowById = useFlowsManagerStore((state) => state.getFlowById);
   const [openPlayground, setOpenPlayground] = useState(false);
-  const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
-  );
   const [loadingPlayground, setLoadingPlayground] = useState(false);
 
   const selectedFlowsComponentsCards = useFlowsManagerStore(
@@ -299,7 +296,7 @@ export default function CollectionCardComponent({
                         setLoadingPlayground(false);
                         return;
                       }
-                      setCurrentFlowId(data.id);
+                      setCurrentFlow(flow);
                       setOpenPlayground(true);
                       setLoadingPlayground(false);
                     } else {
@@ -455,7 +452,7 @@ export default function CollectionCardComponent({
                         setLoadingPlayground(false);
                         return;
                       }
-                      setCurrentFlowId(data.id);
+                      setCurrentFlow(flow);
                       setOpenPlayground(true);
                       setLoadingPlayground(false);
                     } else {
diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx
index e715340d4ad..5605742a0c4 100644
--- a/src/frontend/src/pages/AdminPage/index.tsx
+++ b/src/frontend/src/pages/AdminPage/index.tsx
@@ -38,7 +38,6 @@ import { AuthContext } from "../../contexts/authContext";
 import ConfirmationModal from "../../modals/confirmationModal";
 import UserManagementModal from "../../modals/userManagementModal";
 import useAlertStore from "../../stores/alertStore";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { Users } from "../../types/api";
 import { UserInputType } from "../../types/components";
 
@@ -51,19 +50,11 @@ export default function AdminPage() {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const { userData } = useContext(AuthContext);
   const [totalRowsCount, setTotalRowsCount] = useState(0);
-  const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
-  );
 
   const { mutate: mutateDeleteUser } = useDeleteUsers();
   const { mutate: mutateUpdateUser } = useUpdateUser();
   const { mutate: mutateAddUser } = useAddUser();
 
-  // set null id
-  useEffect(() => {
-    setCurrentFlowId("");
-  }, []);
-
   const userList = useRef([]);
 
   useEffect(() => {
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index 32c93305573..e4a6553d996 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -14,9 +14,7 @@ import Page from "./components/PageComponent";
 import ExtraSidebar from "./components/extraSidebarComponent";
 
 export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
-  const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
-  );
+  const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
   const currentFlow = useFlowStore((state) => state.currentFlow);
   const currentSavedFlow = useFlowsManagerStore((state) => state.currentFlow);
 
@@ -32,6 +30,7 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
   const saveFlow = useSaveFlow();
 
   const flows = useFlowsManagerStore((state) => state.flows);
+  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
 
   const handleSave = () => {
     saveFlow().then(() => (blocker.proceed ? blocker.proceed() : null));
@@ -54,15 +53,15 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
 
   // Set flow tab id
   useEffect(() => {
-    if (flows) {
-      const isAnExistingFlow = flows.some((flow) => flow.id === id);
+    if (flows && currentFlowId === "") {
+      const isAnExistingFlow = flows.find((flow) => flow.id === id);
 
       if (!isAnExistingFlow) {
         navigate("/all");
         return;
       }
 
-      setCurrentFlowId(id!);
+      setCurrentFlow(isAnExistingFlow);
     }
   }, [id, flows]);
 
@@ -71,6 +70,7 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
 
     return () => {
       setOnFlowPage(false);
+      setCurrentFlow();
     };
   }, [id]);
 
diff --git a/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx b/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx
index 98d26452c0e..6847ad5794c 100644
--- a/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx
@@ -1,6 +1,6 @@
 import { useDeleteFolders } from "@/controllers/API/queries/folders";
 import useAlertStore from "@/stores/alertStore";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import DropdownButton from "../../../../components/dropdownButtonComponent";
 import PageLayout from "../../../../components/pageLayout";
@@ -9,17 +9,12 @@ import {
   MY_COLLECTION_DESC,
   USER_PROJECTS_HEADER,
 } from "../../../../constants/constants";
-import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { useFolderStore } from "../../../../stores/foldersStore";
 import ModalsComponent from "../../components/modalsComponent";
 import useDropdownOptions from "../../hooks/use-dropdown-options";
 import { getFolderById } from "../../services";
 
 export default function HomePage(): JSX.Element {
-  const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
-  );
-
   const location = useLocation();
   const pathname = location.pathname;
   const [openModal, setOpenModal] = useState(false);
@@ -35,10 +30,6 @@ export default function HomePage(): JSX.Element {
   const myCollectionId = useFolderStore((state) => state.myCollectionId);
   const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
 
-  useEffect(() => {
-    setCurrentFlowId("");
-  }, [pathname]);
-
   const dropdownOptions = useDropdownOptions({
     navigate,
     is_component,
diff --git a/src/frontend/src/pages/Playground/index.tsx b/src/frontend/src/pages/Playground/index.tsx
index 21276a96691..47c2aa17744 100644
--- a/src/frontend/src/pages/Playground/index.tsx
+++ b/src/frontend/src/pages/Playground/index.tsx
@@ -10,9 +10,6 @@ import cloneFLowWithParent from "../../utils/storeUtils";
 export default function PlaygroundPage() {
   const getFlowById = useFlowsManagerStore((state) => state.getFlowById);
   const flows = useFlowsManagerStore((state) => state.flows);
-  const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
-  );
   const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
   const currentSavedFlow = useFlowsManagerStore((state) => state.currentFlow);
   const validApiKey = useStoreStore((state) => state.validApiKey);
@@ -27,8 +24,9 @@ export default function PlaygroundPage() {
   // Set flow tab id
   useEffect(() => {
     if (flows) {
-      if (getFlowById(id!)) {
-        setCurrentFlowId(id!);
+      const flow = getFlowById(id!);
+      if (flow) {
+        setCurrentFlow(flow);
       } else {
         if (validApiKey)
           getFlowData().then((flow) => {
diff --git a/src/frontend/src/pages/ProfileSettingsPage/index.tsx b/src/frontend/src/pages/ProfileSettingsPage/index.tsx
index 5d0135d9f62..ef8beadaa5a 100644
--- a/src/frontend/src/pages/ProfileSettingsPage/index.tsx
+++ b/src/frontend/src/pages/ProfileSettingsPage/index.tsx
@@ -4,7 +4,7 @@ import {
 } from "@/controllers/API/queries/auth";
 import * as Form from "@radix-ui/react-form";
 import { cloneDeep } from "lodash";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import Header from "../../components/headerComponent";
 import InputComponent from "../../components/inputComponent";
@@ -18,7 +18,6 @@ import {
 import { CONTROL_PATCH_USER_STATE } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
 import useAlertStore from "../../stores/alertStore";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import {
   inputHandlerEventType,
   patchUserInputStateType,
@@ -26,18 +25,9 @@ import {
 import { gradients } from "../../utils/styleUtils";
 import GradientChooserComponent from "../SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent";
 export default function ProfileSettingsPage(): JSX.Element {
-  const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
-  );
-
   const [inputState, setInputState] = useState<patchUserInputStateType>(
     CONTROL_PATCH_USER_STATE,
   );
-
-  // set null id
-  useEffect(() => {
-    setCurrentFlowId("");
-  }, []);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const { userData, setUserData } = useContext(AuthContext);
diff --git a/src/frontend/src/pages/SettingsPage/index.tsx b/src/frontend/src/pages/SettingsPage/index.tsx
index bb08417d4d6..297aba41874 100644
--- a/src/frontend/src/pages/SettingsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/index.tsx
@@ -1,19 +1,12 @@
 import FeatureFlags from "@/../feature-config.json";
 import useAuthStore from "@/stores/authStore";
 import { useStoreStore } from "@/stores/storeStore";
-import { useEffect } from "react";
 import { Outlet } from "react-router-dom";
 import ForwardedIconComponent from "../../components/genericIconComponent";
 import PageLayout from "../../components/pageLayout";
 import SidebarNav from "../../components/sidebarComponent";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 
 export default function SettingsPage(): JSX.Element {
-  const pathname = location.pathname;
-  const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
-  );
-
   const autoLogin = useAuthStore((state) => state.autoLogin);
   const hasStore = useStoreStore((state) => state.hasStore);
 
@@ -21,10 +14,6 @@ export default function SettingsPage(): JSX.Element {
   const showGeneralSettings =
     FeatureFlags.ENABLE_PROFILE_ICONS || hasStore || !autoLogin;
 
-  useEffect(() => {
-    setCurrentFlowId("");
-  }, [pathname]);
-
   const sidebarNavItems: {
     href?: string;
     title: string;
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
index 5218edb5d22..a4570f7c5d1 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
@@ -18,7 +18,6 @@ import { useParams } from "react-router-dom";
 import { CONTROL_PATCH_USER_STATE } from "../../../../constants/constants";
 import { AuthContext } from "../../../../contexts/authContext";
 import useAlertStore from "../../../../stores/alertStore";
-import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { useStoreStore } from "../../../../stores/storeStore";
 import {
   inputHandlerEventType,
@@ -31,10 +30,6 @@ import ProfilePictureFormComponent from "./components/ProfilePictureForm";
 import StoreApiKeyFormComponent from "./components/StoreApiKeyForm";
 
 export const GeneralPage = () => {
-  const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
-  );
-
   const { scrollId } = useParams();
 
   const [inputState, setInputState] = useState<patchUserInputStateType>(
@@ -112,7 +107,7 @@ export const GeneralPage = () => {
     }
   };
 
-  useScrollToElement(scrollId, setCurrentFlowId);
+  useScrollToElement(scrollId);
 
   const { mutate } = usePostAddApiKey({
     onSuccess: () => {
diff --git a/src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx b/src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx
index faa7408a333..966d4bb3481 100644
--- a/src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx
@@ -1,9 +1,6 @@
 import { useEffect } from "react";
 
-const useScrollToElement = (
-  scrollId: string | null | undefined,
-  setCurrentFlowId: (currentFlowId: string) => void,
-) => {
+const useScrollToElement = (scrollId: string | null | undefined) => {
   useEffect(() => {
     const element = document.getElementById(scrollId ?? "null");
     if (element) {
@@ -11,10 +8,6 @@ const useScrollToElement = (
       element.scrollIntoView({ behavior: "smooth" });
     }
   }, [scrollId]);
-
-  useEffect(() => {
-    setCurrentFlowId("");
-  }, [setCurrentFlowId]);
 };
 
 export default useScrollToElement;
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 36e6ce08de1..5342eb248ee 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -28,7 +28,7 @@ import {
 } from "../../constants/alerts_constants";
 import { STORE_DESC, STORE_TITLE } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
-import { getStoreComponents, getStoreTags } from "../../controllers/API";
+import { getStoreComponents } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useStoreStore } from "../../stores/storeStore";
@@ -46,9 +46,6 @@ export default function StorePage(): JSX.Element {
   const { apiKey } = useContext(AuthContext);
 
   const setErrorData = useAlertStore((state) => state.setErrorData);
-  const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
-  );
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const [loading, setLoading] = useState(true);
   const { id } = useParams();
@@ -148,11 +145,6 @@ export default function StorePage(): JSX.Element {
       });
   }
 
-  // Set a null id
-  useEffect(() => {
-    setCurrentFlowId("");
-  }, []);
-
   function resetPagination() {
     setPageIndex(1);
     setPageSize(12);
diff --git a/src/frontend/src/pages/ViewPage/index.tsx b/src/frontend/src/pages/ViewPage/index.tsx
index a5487937f55..456e8c35d77 100644
--- a/src/frontend/src/pages/ViewPage/index.tsx
+++ b/src/frontend/src/pages/ViewPage/index.tsx
@@ -1,17 +1,42 @@
+import { useGetGlobalVariables } from "@/controllers/API/queries/variables";
+import useFlowStore from "@/stores/flowStore";
 import { useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import Page from "../FlowPage/components/PageComponent";
 
 export default function ViewPage() {
-  const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
-  );
+  const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
+
+  const setOnFlowPage = useFlowStore((state) => state.setOnFlowPage);
   const { id } = useParams();
+  const navigate = useNavigate();
+  useGetGlobalVariables();
+
+  const flows = useFlowsManagerStore((state) => state.flows);
+  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
 
   // Set flow tab id
   useEffect(() => {
-    setCurrentFlowId(id!);
+    if (flows && currentFlowId === "") {
+      const isAnExistingFlow = flows.find((flow) => flow.id === id);
+
+      if (!isAnExistingFlow) {
+        navigate("/all");
+        return;
+      }
+
+      setCurrentFlow(isAnExistingFlow);
+    }
+  }, [id, flows]);
+
+  useEffect(() => {
+    setOnFlowPage(true);
+
+    return () => {
+      setOnFlowPage(false);
+      setCurrentFlow();
+    };
   }, [id]);
 
   return (

From f91807935a243079dadb9028d9f043b912bdb4cc Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 12 Aug 2024 14:08:50 -0300
Subject: [PATCH 78/84] removed fit view on page

---
 .../components/PageComponent/index.tsx        | 45 ++++---------------
 1 file changed, 9 insertions(+), 36 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 2a0a20a0420..f84dd90af12 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -144,21 +144,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
     };
   }, [lastCopiedSelection, lastSelection, takeSnapshot, selectionMenuVisible]);
 
-  useEffect(() => {
-    if (reactFlowInstance && currentSavedFlow) {
-      const viewport = currentSavedFlow.data?.viewport ?? {
-        zoom: 1,
-        x: 0,
-        y: 0,
-      };
-      if (viewport.x == 0 && viewport.y == 0) {
-        reactFlowInstance.fitView();
-      } else {
-        reactFlowInstance.setViewport(viewport);
-      }
-    }
-  }, [currentSavedFlow, reactFlowInstance]);
-
   const { isFetching, refetch } = useGetBuildsQuery({});
 
   const showCanvas =
@@ -176,16 +161,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
     }
   }, [currentFlowId]);
 
-  useEffect(() => {
-    if (currentSavedFlow && reactFlowInstance) {
-      autoSaveFlow();
-      updateCurrentFlow({
-        nodes,
-        edges,
-      });
-    }
-  }, [nodes, edges]);
-
   function handleUndo(e: KeyboardEvent) {
     if (!isWrappedWithClass(e, "noflow")) {
       e.preventDefault();
@@ -323,17 +298,14 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
   const onMoveEnd: OnMove = useCallback(() => {
     // 👇 make moving the canvas undoable
     autoSaveFlow();
-    updateCurrentFlow({
-      viewport: reactFlowInstance?.getViewport(),
-    });
-  }, [
-    takeSnapshot,
-    autoSaveFlow,
-    updateCurrentFlow,
-    nodes,
-    edges,
-    reactFlowInstance,
-  ]);
+    updateCurrentFlow({ viewport: reactFlowInstance?.getViewport() });
+  }, [takeSnapshot, autoSaveFlow, nodes, edges, reactFlowInstance]);
+
+  const onNodeDragStop: NodeDragHandler = useCallback(() => {
+    // 👇 make moving the canvas undoable
+    autoSaveFlow();
+    updateCurrentFlow({ nodes });
+  }, [takeSnapshot, autoSaveFlow, nodes, edges, reactFlowInstance]);
 
   const onSelectionDragStart: SelectionDragHandler = useCallback(() => {
     // 👇 make dragging a selection undoable
@@ -490,6 +462,7 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
             connectionLineComponent={ConnectionLineComponent}
             onDragOver={onDragOver}
             onMoveEnd={onMoveEnd}
+            onNodeDragStop={onNodeDragStop}
             onDrop={onDrop}
             onSelectionChange={onSelectionChange}
             deleteKeyCode={[]}

From cf763658f782d5289878499340ab8d54e0ef52b6 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 12 Aug 2024 14:16:56 -0300
Subject: [PATCH 79/84] added auto save flow function setting on the store to
 allow the flow to be auto saved on set node

---
 .../src/pages/FlowPage/components/PageComponent/index.tsx  | 1 +
 src/frontend/src/stores/flowStore.ts                       | 7 +++++++
 src/frontend/src/types/zustand/flow/index.ts               | 1 +
 3 files changed, 9 insertions(+)

diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index f84dd90af12..22a8f65bf62 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -153,6 +153,7 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
 
   useEffect(() => {
     refetch();
+    useFlowStore.setState({ autoSaveFlow });
     if (checkOldComponents({ nodes })) {
       setNoticeData({
         title:
diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index ca42275a3ae..3a8289e2e50 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -50,6 +50,7 @@ import { useTypesStore } from "./typesStore";
 
 // this is our useStore hook that we can use in our components to get parts of the store and call actions
 const useFlowStore = create<FlowStoreType>((set, get) => ({
+  autoSaveFlow: undefined,
   componentsToUpdate: false,
   updateComponentsToUpdate: (nodes) => {
     let outdatedNodes = false;
@@ -227,6 +228,9 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       outputs,
       hasIO: inputs.length > 0 || outputs.length > 0,
     });
+    if (get().autoSaveFlow) {
+      get().autoSaveFlow!();
+    }
   },
   setEdges: (change) => {
     let newChange = typeof change === "function" ? change(get().edges) : change;
@@ -234,6 +238,9 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       edges: newChange,
       flowState: undefined,
     });
+    if (get().autoSaveFlow) {
+      get().autoSaveFlow!();
+    }
   },
   setNode: (
     id: string,
diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts
index 574e8e54753..c27e056e24b 100644
--- a/src/frontend/src/types/zustand/flow/index.ts
+++ b/src/frontend/src/types/zustand/flow/index.ts
@@ -54,6 +54,7 @@ export type FlowPoolType = {
 };
 
 export type FlowStoreType = {
+  autoSaveFlow: (() => void) | undefined;
   componentsToUpdate: boolean;
   updateComponentsToUpdate: (nodes: Node[]) => void;
   onFlowPage: boolean;

From 4d9fa7ebdff6f028e64c485908906da48f7fbbbd Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 12 Aug 2024 14:20:18 -0300
Subject: [PATCH 80/84] Changed header to just show the save button if autosave
 is disabled

---
 .../components/headerComponent/components/menuBar/index.tsx    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index c9fff9dc815..776059dcd6b 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -56,7 +56,8 @@ export const MenuBar = ({}: {}): JSX.Element => {
   const onFlowPage = useFlowStore((state) => state.onFlowPage);
 
   const changesNotSaved =
-    customStringify(currentFlow) !== customStringify(currentSavedFlow);
+    customStringify(currentFlow) !== customStringify(currentSavedFlow) &&
+    !shouldAutosave;
 
   const savedText =
     updatedAt && changesNotSaved

From fd701786a08ac0604a56890c57de0c2c06970ce6 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 12 Aug 2024 16:39:59 -0300
Subject: [PATCH 81/84] Added check to only save empty flow when it was already
 empty before

---
 .../queries/flows/use-patch-update-flow.ts    |  1 -
 src/frontend/src/hooks/flows/use-save-flow.ts | 76 ++++++++++++-------
 .../src/modals/flowSettingsModal/index.tsx    |  8 +-
 3 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/src/frontend/src/controllers/API/queries/flows/use-patch-update-flow.ts b/src/frontend/src/controllers/API/queries/flows/use-patch-update-flow.ts
index 1bbe871e2d8..8b81ec3cd31 100644
--- a/src/frontend/src/controllers/API/queries/flows/use-patch-update-flow.ts
+++ b/src/frontend/src/controllers/API/queries/flows/use-patch-update-flow.ts
@@ -21,7 +21,6 @@ export const usePatchUpdateFlow: useMutationFunctionType<
   const { mutate } = UseRequestProcessor();
 
   const PatchUpdateFlowFn = async (payload: IPatchUpdateFlow): Promise<any> => {
-    if (payload.data.nodes.length === 0) return null;
     const response = await api.patch(`${getURL("FLOWS")}/${payload.id}`, {
       name: payload.name,
       data: payload.data,
diff --git a/src/frontend/src/hooks/flows/use-save-flow.ts b/src/frontend/src/hooks/flows/use-save-flow.ts
index 55383b73400..117273ca44c 100644
--- a/src/frontend/src/hooks/flows/use-save-flow.ts
+++ b/src/frontend/src/hooks/flows/use-save-flow.ts
@@ -13,6 +13,7 @@ const useSaveFlow = () => {
   const edges = useFlowStore((state) => state.edges);
   const setSaveLoading = useFlowsManagerStore((state) => state.setSaveLoading);
   const setCurrentFlow = useFlowStore((state) => state.setCurrentFlow);
+  const currentSavedFlow = useFlowsManagerStore((state) => state.currentFlow);
 
   const currentFlow = useFlowStore((state) => state.currentFlow);
   const flowData = currentFlow?.data;
@@ -39,36 +40,55 @@ const useSaveFlow = () => {
       }
       if (flow && flow.data) {
         const { id, name, data, description, folder_id, endpoint_name } = flow;
-        mutate(
-          { id, name, data, description, folder_id, endpoint_name },
-          {
-            onSuccess: (updatedFlow) => {
-              setSaveLoading(false);
-              if (updatedFlow !== null && flows) {
-                // updates flow in state
-                setFlows(
-                  flows.map((flow) => {
-                    if (flow.id === updatedFlow.id) {
-                      return updatedFlow;
-                    }
-                    return flow;
-                  }),
-                );
-                setCurrentFlow(updatedFlow);
-                resolve();
-              }
+        if (!currentSavedFlow?.data?.nodes.length || data.nodes.length > 0) {
+          mutate(
+            { id, name, data, description, folder_id, endpoint_name },
+            {
+              onSuccess: (updatedFlow) => {
+                setSaveLoading(false);
+                if (flows) {
+                  // updates flow in state
+                  setFlows(
+                    flows.map((flow) => {
+                      if (flow.id === updatedFlow.id) {
+                        return updatedFlow;
+                      }
+                      return flow;
+                    }),
+                  );
+                  setCurrentFlow(updatedFlow);
+                  resolve();
+                } else {
+                  setErrorData({
+                    title: "Failed to save flow",
+                    list: ["Flows variable undefined"],
+                  });
+                  reject(new Error("Flows variable undefined"));
+                }
+              },
+              onError: (e) => {
+                setErrorData({
+                  title: "Failed to save flow",
+                  list: [e.message],
+                });
+                setSaveLoading(false);
+                reject(e);
+              },
             },
-            onError: (e) => {
-              setErrorData({
-                title: "Failed to save flow",
-                list: [e.message],
-              });
-              setSaveLoading(false);
-              reject(e);
-            },
-          },
-        );
+          );
+        } else {
+          setErrorData({
+            title: "Failed to save flow",
+            list: ["Can't save empty flow"],
+          });
+          setSaveLoading(false);
+          reject(new Error("Can't save empty flow"));
+        }
       } else {
+        setErrorData({
+          title: "Failed to save flow",
+          list: ["Flow not found"],
+        });
         reject(new Error("Flow not found"));
       }
     });
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index a55441598cc..c8e31a8d51f 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -5,7 +5,6 @@ import { useEffect, useState } from "react";
 import EditFlowSettings from "../../components/editFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { SETTINGS_DIALOG_SUBTITLE } from "../../constants/constants";
-import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { FlowSettingsPropsType } from "../../types/components";
 import { FlowType } from "../../types/flow";
@@ -47,12 +46,7 @@ export default function FlowSettingsModal({
           setOpen(false);
           setIsSaving(false);
         })
-        .catch((err) => {
-          useAlertStore.getState().setErrorData({
-            title: "Error while saving changes",
-            list: [err?.response?.data.detail ?? ""],
-          });
-          console.error(err);
+        .catch(() => {
           setIsSaving(false);
         });
     } else {

From a667f8b73794bdcbc64e34d3056ce333ad258bf0 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 12 Aug 2024 18:14:13 -0300
Subject: [PATCH 82/84] Changed tests and added message to not fail tests about
 flow settings

---
 src/frontend/src/modals/flowSettingsModal/index.tsx | 3 +++
 src/frontend/tests/end-to-end/flowSettings.spec.ts  | 4 ----
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index c8e31a8d51f..e7a9b90782a 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -1,4 +1,5 @@
 import useSaveFlow from "@/hooks/flows/use-save-flow";
+import useAlertStore from "@/stores/alertStore";
 import useFlowStore from "@/stores/flowStore";
 import { cloneDeep } from "lodash";
 import { useEffect, useState } from "react";
@@ -18,6 +19,7 @@ export default function FlowSettingsModal({
   const saveFlow = useSaveFlow();
   const currentFlow = useFlowStore((state) => state.currentFlow);
   const setCurrentFlow = useFlowStore((state) => state.setCurrentFlow);
+  const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const flows = useFlowsManagerStore((state) => state.flows);
   useEffect(() => {
     setName(currentFlow!.name);
@@ -45,6 +47,7 @@ export default function FlowSettingsModal({
         ?.then(() => {
           setOpen(false);
           setIsSaving(false);
+          setSuccessData({ title: "Changes saved successfully" });
         })
         .catch(() => {
           setIsSaving(false);
diff --git a/src/frontend/tests/end-to-end/flowSettings.spec.ts b/src/frontend/tests/end-to-end/flowSettings.spec.ts
index 062bb5bea62..04dd0694ab4 100644
--- a/src/frontend/tests/end-to-end/flowSettings.spec.ts
+++ b/src/frontend/tests/end-to-end/flowSettings.spec.ts
@@ -47,10 +47,6 @@ test("flowSettings", async ({ page }) => {
 
   await page.getByTestId("save-flow-settings").click();
 
-  await page.getByText("Close").last().click();
-
-  await page.waitForTimeout(1000);
-
   await page.getByText("Changes saved successfully").isVisible();
 
   await page.getByTestId("flow_name").click();

From b0c226d6db35158d182acc759d6025c11b1628ee Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 12 Aug 2024 18:35:59 -0300
Subject: [PATCH 83/84] Changed on file drop to use saveFlow

---
 .../hooks/use-on-file-drop.tsx                |  5 ++--
 src/frontend/src/controllers/API/index.ts     | 28 -------------------
 2 files changed, 3 insertions(+), 30 deletions(-)

diff --git a/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx b/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx
index 659eadddf42..9e353624c06 100644
--- a/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx
+++ b/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx
@@ -1,8 +1,8 @@
+import useSaveFlow from "@/hooks/flows/use-save-flow";
 import {
   UPLOAD_ALERT_LIST,
   WRONG_FILE_ERROR_ALERT,
 } from "../../../constants/alerts_constants";
-import { updateFlowInDatabase } from "../../../controllers/API";
 import { uploadFlowToFolder } from "../../../pages/MainPage/services";
 import useAlertStore from "../../../stores/alertStore";
 import useFlowsManagerStore from "../../../stores/flowsManagerStore";
@@ -21,6 +21,7 @@ const useFileDrop = (
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const refreshFolders = useFolderStore((state) => state.refreshFolders);
   const flows = useFlowsManagerStore((state) => state.flows);
+  const saveFlow = useSaveFlow();
 
   const triggerFolderChange = (folderId) => {
     if (folderChangeCallback) {
@@ -120,7 +121,7 @@ const useFileDrop = (
     setFolderDragging(false);
     setFolderIdDragging("");
 
-    updateFlowInDatabase(updatedFlow).then(() => {
+    saveFlow(updatedFlow).then(() => {
       refreshFolders();
       triggerFolderChange(folderId);
     });
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index e1918ccec8d..0c46f27396c 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -141,34 +141,6 @@ export async function saveFlowToDatabase(newFlow: {
     throw error;
   }
 }
-/**
- * Updates an existing flow in the database.
- *
- * @param {FlowType} updatedFlow - The updated flow data.
- * @returns {Promise<any>} The updated flow data.
- * @throws Will throw an error if the update fails.
- */
-export async function updateFlowInDatabase(
-  updatedFlow: FlowType,
-): Promise<FlowType> {
-  try {
-    const response = await api.patch(`${BASE_URL_API}flows/${updatedFlow.id}`, {
-      name: updatedFlow.name,
-      data: updatedFlow.data,
-      description: updatedFlow.description,
-      folder_id: updatedFlow.folder_id === "" ? null : updatedFlow.folder_id,
-      endpoint_name: updatedFlow.endpoint_name,
-    });
-
-    if (response && response?.status !== 200) {
-      throw new Error(`HTTP error! status: ${response?.status}`);
-    }
-    return response?.data;
-  } catch (error) {
-    console.error(error);
-    throw error;
-  }
-}
 
 /**
  * Reads all flows from the database.

From 6dd99e6f1215c5a849a66b34cd999bd76cd2c677 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 12 Aug 2024 18:36:14 -0300
Subject: [PATCH 84/84] Updated tests

---
 src/frontend/tests/end-to-end/store-shard-2.spec.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/frontend/tests/end-to-end/store-shard-2.spec.ts b/src/frontend/tests/end-to-end/store-shard-2.spec.ts
index 9c017b8219a..c5f4881e80b 100644
--- a/src/frontend/tests/end-to-end/store-shard-2.spec.ts
+++ b/src/frontend/tests/end-to-end/store-shard-2.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";
 
@@ -111,7 +111,6 @@ test("should share component with share button", async ({ page }) => {
     .inputValue();
   await page.getByPlaceholder("Flow name").fill(randomName);
   await page.getByText("Save").last().click();
-  await page.getByText("Close").last().click();
 
   await page.waitForSelector('[data-testid="shared-button-flow"]', {
     timeout: 100000,