Change tabsContext name to FlowsContext (#1089)

src/frontend/src/App.tsx

@@ -17,7 +17,7 @@ import {
 } from "./constants/constants";
 import { alertContext } from "./contexts/alertContext";
 import { locationContext } from "./contexts/locationContext";
-import { TabsContext } from "./contexts/tabsContext";
+import { FlowsContext } from "./contexts/flowsContext";
 import { typesContext } from "./contexts/typesContext";
 import Router from "./routes";
 
@@ -30,7 +30,7 @@ export default function App() {
     setShowSideBar(true);
     setIsStackedOpen(true);
   }, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]);
-  const { hardReset } = useContext(TabsContext);
+  const { hardReset } = useContext(FlowsContext);
 
   const {
     errorData,

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

@@ -23,10 +23,10 @@ import TextAreaComponent from "../../../../components/textAreaComponent";
 import ToggleShadComponent from "../../../../components/toggleShadComponent";
 import { Button } from "../../../../components/ui/button";
 import { TOOLTIP_EMPTY } from "../../../../constants/constants";
-import { TabsContext } from "../../../../contexts/tabsContext";
+import { FlowsContext } from "../../../../contexts/flowsContext";
 import { typesContext } from "../../../../contexts/typesContext";
 import { ParameterComponentType } from "../../../../types/components";
-import { TabsState } from "../../../../types/tabs";
+import { FlowsState } from "../../../../types/tabs";
 import {
   convertObjToArray,
   convertValuesToNumbers,
@@ -63,7 +63,7 @@ export default function ParameterComponent({
   const infoHtml = useRef<HTMLDivElement & ReactNode>(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
-  const { setTabsState, tabId, flows } = useContext(TabsContext);
+  const { setTabsState, tabId, flows } = useContext(FlowsContext);
 
   const flow = flows.find((flow) => flow.id === tabId)?.data?.nodes ?? null;
 

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

@@ -7,7 +7,7 @@ import IconComponent from "../../components/genericIconComponent";
 import InputComponent from "../../components/inputComponent";
 import { Textarea } from "../../components/ui/textarea";
 import { useSSE } from "../../contexts/SSEContext";
-import { TabsContext } from "../../contexts/tabsContext";
+import { FlowsContext } from "../../contexts/flowsContext";
 import { typesContext } from "../../contexts/typesContext";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
 import { validationStatusType } from "../../types/components";
@@ -33,7 +33,7 @@ export default function GenericNode({
   yPos: number;
 }): JSX.Element {
   const [data, setData] = useState(olddata);
-  const { updateFlow, flows, tabId } = useContext(TabsContext);
+  const { updateFlow, flows, tabId } = useContext(FlowsContext);
   const updateNodeInternals = useUpdateNodeInternals();
   const { types, deleteNode, reactFlowInstance, setFilterEdge, getFilterEdge } =
     useContext(typesContext);

src/frontend/src/components/cardComponent/index.tsx

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { TabsContext } from "../../contexts/tabsContext";
+import { FlowsContext } from "../../contexts/flowsContext";
 import { cardComponentPropsType } from "../../types/components";
 import { gradients } from "../../utils/styleUtils";
 import IconComponent from "../genericIconComponent";
@@ -17,7 +17,7 @@ export const CardComponent = ({
   onDelete,
   button,
 }: cardComponentPropsType): JSX.Element => {
-  const { removeFlow } = useContext(TabsContext);
+  const { removeFlow } = useContext(FlowsContext);
 
   return (
     <Card className="group">

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -7,7 +7,7 @@ import { typesContext } from "../../../contexts/typesContext";
 import { postBuildInit } from "../../../controllers/API";
 import { FlowType } from "../../../types/flow";
 
-import { TabsContext } from "../../../contexts/tabsContext";
+import { FlowsContext } from "../../../contexts/flowsContext";
 import { parsedDataType } from "../../../types/components";
 import { TabsState } from "../../../types/tabs";
 import { validateNodes } from "../../../utils/reactflowUtils";
@@ -26,7 +26,7 @@ export default function BuildTrigger({
 }): JSX.Element {
   const { updateSSEData, isBuilding, setIsBuilding, sseData } = useSSE();
   const { reactFlowInstance } = useContext(typesContext);
-  const { setTabsState } = useContext(TabsContext);
+  const { setTabsState } = useContext(FlowsContext);
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const [isIconTouched, setIsIconTouched] = useState(false);
   const eventClick = isBuilding ? "pointer-events-none" : "";

src/frontend/src/components/chatComponent/index.tsx

@@ -5,7 +5,7 @@ import BuildTrigger from "./buildTrigger";
 import ChatTrigger from "./chatTrigger";
 
 import * as _ from "lodash";
-import { TabsContext } from "../../contexts/tabsContext";
+import { FlowsContext } from "../../contexts/flowsContext";
 import { getBuildStatus } from "../../controllers/API";
 import FormModal from "../../modals/formModal";
 import { NodeType } from "../../types/flow";
@@ -13,7 +13,7 @@ import { NodeType } from "../../types/flow";
 export default function Chat({ flow }: ChatType): JSX.Element {
   const [open, setOpen] = useState(false);
   const [canOpen, setCanOpen] = useState(false);
-  const { tabsState, isBuilt, setIsBuilt } = useContext(TabsContext);
+  const { tabsState, isBuilt, setIsBuilt } = useContext(FlowsContext);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -1,5 +1,5 @@
 import { useContext, useState } from "react";
-import { TabsContext } from "../../../../contexts/tabsContext";
+import { FlowsContext } from "../../../../contexts/flowsContext";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -17,7 +17,7 @@ import IconComponent from "../../../genericIconComponent";
 import { Button } from "../../../ui/button";
 
 export const MenuBar = ({ flows, tabId }: menuBarPropsType): JSX.Element => {
-  const { addFlow } = useContext(TabsContext);
+  const { addFlow } = useContext(FlowsContext);
   const { setErrorData } = useContext(alertContext);
   const { undo, redo } = useContext(undoRedoContext);
   const [openSettings, setOpenSettings] = useState(false);

src/frontend/src/components/headerComponent/index.tsx

@@ -6,7 +6,7 @@ import { USER_PROJECTS_HEADER } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
 import { AuthContext } from "../../contexts/authContext";
 import { darkContext } from "../../contexts/darkContext";
-import { TabsContext } from "../../contexts/tabsContext";
+import { FlowsContext } from "../../contexts/flowsContext";
 import { gradients } from "../../utils/styleUtils";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
@@ -22,7 +22,7 @@ import { Separator } from "../ui/separator";
 import MenuBar from "./components/menuBar";
 
 export default function Header(): JSX.Element {
-  const { flows, tabId } = useContext(TabsContext);
+  const { flows, tabId } = useContext(FlowsContext);
   const { dark, setDark } = useContext(darkContext);
   const { notificationCenter } = useContext(alertContext);
   const location = useLocation();

src/frontend/src/components/inputFileComponent/index.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
-import { TabsContext } from "../../contexts/tabsContext";
+import { FlowsContext } from "../../contexts/flowsContext";
 import { uploadFile } from "../../controllers/API";
 import { FileComponentType } from "../../types/components";
 import IconComponent from "../genericIconComponent";
@@ -17,7 +17,7 @@ export default function InputFileComponent({
   const [myValue, setMyValue] = useState(value);
   const [loading, setLoading] = useState(false);
   const { setErrorData } = useContext(alertContext);
-  const { tabId } = useContext(TabsContext);
+  const { tabId } = useContext(FlowsContext);
 
   // Clear component state
   useEffect(() => {

src/frontend/src/contexts/flowsContext.tsx

@@ -0,0 +1,669 @@
+import { AxiosError } from "axios";
+import _ from "lodash";
+import {
+  ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { Edge, Node, ReactFlowJsonObject, addEdge } from "reactflow";
+import ShortUniqueId from "short-unique-id";
+import { skipNodeUpdate } from "../constants/constants";
+import {
+  deleteFlowFromDatabase,
+  downloadFlowsFromDatabase,
+  readFlowsFromDatabase,
+  saveFlowToDatabase,
+  updateFlowInDatabase,
+  uploadFlowsToDatabase,
+} from "../controllers/API";
+import { APIClassType, APITemplateType } from "../types/api";
+import { tweakType } from "../types/components";
+import {
+  FlowType,
+  NodeDataType,
+  NodeType,
+  sourceHandleType,
+  targetHandleType,
+} from "../types/flow";
+import { FlowsContextType, TabsState } from "../types/tabs";
+import {
+  addVersionToDuplicates,
+  checkOldEdgesHandles,
+  scapeJSONParse,
+  scapedJSONStringfy,
+  updateEdgesHandleIds,
+  updateIds,
+  updateTemplate,
+} from "../utils/reactflowUtils";
+import { getRandomDescription, getRandomName } from "../utils/utils";
+import { alertContext } from "./alertContext";
+import { AuthContext } from "./authContext";
+import { typesContext } from "./typesContext";
+
+const uid = new ShortUniqueId({ length: 5 });
+
+const FlowsContextInitialValue: FlowsContextType = {
+  tabId: "",
+  setTabId: (index: string) => {},
+  isLoading: true,
+  flows: [],
+  removeFlow: (id: string) => {},
+  addFlow: async (newProject: boolean, flowData?: FlowType) => "",
+  updateFlow: (newFlow: FlowType) => {},
+  incrementNodeId: () => uid(),
+  downloadFlow: (flow: FlowType) => {},
+  downloadFlows: () => {},
+  uploadFlows: () => {},
+  uploadFlow: async () => "",
+  isBuilt: false,
+  setIsBuilt: (state: boolean) => {},
+  hardReset: () => {},
+  saveFlow: async (flow: FlowType, silent?: boolean) => {},
+  lastCopiedSelection: null,
+  setLastCopiedSelection: (selection: any) => {},
+  tabsState: {},
+  setTabsState: (state: TabsState) => {},
+  getNodeId: (nodeType: string) => "",
+  setTweak: (tweak: any) => {},
+  getTweak: [],
+  paste: (
+    selection: { nodes: any; edges: any },
+    position: { x: number; y: number; paneX?: number; paneY?: number }
+  ) => {},
+};
+
+export const FlowsContext = createContext<FlowsContextType>(
+  FlowsContextInitialValue
+);
+
+export function TabsProvider({ children }: { children: ReactNode }) {
+  const { setErrorData, setNoticeData, setSuccessData } =
+    useContext(alertContext);
+  const { getAuthentication, isAuthenticated } = useContext(AuthContext);
+
+  const [tabId, setTabId] = useState("");
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  const [flows, setFlows] = useState<Array<FlowType>>([]);
+  const [id, setId] = useState(uid());
+  const { templates, reactFlowInstance } = useContext(typesContext);
+  const [lastCopiedSelection, setLastCopiedSelection] = useState<{
+    nodes: any;
+    edges: any;
+  } | null>(null);
+  const [tabsState, setTabsState] = useState<TabsState>({});
+  const [getTweak, setTweak] = useState<tweakType>([]);
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      hardReset();
+    }
+  }, [isAuthenticated]);
+
+  const newNodeId = useRef(uid());
+  function incrementNodeId() {
+    newNodeId.current = uid();
+    return newNodeId.current;
+  }
+
+  function refreshFlows() {
+    setIsLoading(true);
+    getTabsDataFromDB().then((DbData) => {
+      if (DbData && Object.keys(templates).length > 0) {
+        try {
+          processDBData(DbData);
+          updateStateWithDbData(DbData);
+          setIsLoading(false);
+        } catch (e) {}
+      }
+    });
+  }
+
+  useEffect(() => {
+    // If the user is authenticated, fetch the types. This code is important to check if the user is auth because of the execution order of the useEffect hooks.
+    if (getAuthentication() === true) {
+      // get data from db
+      //get tabs locally saved
+      // let tabsData = getLocalStorageTabsData();
+      refreshFlows();
+    }
+  }, [templates, getAuthentication()]);
+
+  function getTabsDataFromDB() {
+    //get tabs from db
+    return readFlowsFromDatabase();
+  }
+
+  function processDBData(DbData: FlowType[]) {
+    DbData.forEach((flow: FlowType) => {
+      try {
+        if (!flow.data) {
+          return;
+        }
+        processDataFromFlow(flow, false);
+      } catch (e) {}
+    });
+  }
+
+  function processFlowEdges(flow: FlowType) {
+    if (!flow.data || !flow.data.edges) return;
+    if (checkOldEdgesHandles(flow.data.edges)) {
+      const newEdges = updateEdgesHandleIds(flow.data);
+      flow.data.edges = newEdges;
+    }
+    //update edges colors
+    flow.data.edges.forEach((edge) => {
+      edge.className = "";
+      edge.style = { stroke: "#555" };
+    });
+  }
+
+  function updateDisplay_name(node: NodeType, template: APIClassType) {
+    node.data.node!.display_name = template["display_name"] || node.data.type;
+  }
+
+  function updateNodeDocumentation(node: NodeType, template: APIClassType) {
+    node.data.node!.documentation = template["documentation"];
+  }
+
+  function processFlowNodes(flow: FlowType) {
+    if (!flow.data || !flow.data.nodes) return;
+    flow.data.nodes.forEach((node: NodeType) => {
+      if (node.data.node?.flow) return;
+      if (skipNodeUpdate.includes(node.data.type)) return;
+      const template = templates[node.data.type];
+      if (!template) {
+        setErrorData({ title: `Unknown node type: ${node.data.type}` });
+        return;
+      }
+      if (Object.keys(template["template"]).length > 0) {
+        updateDisplay_name(node, template);
+        updateNodeBaseClasses(node, template);
+        //update baseclasses in edges
+        updateNodeEdges(flow, node, template);
+        updateNodeDescription(node, template);
+        updateNodeTemplate(node, template);
+        updateNodeDocumentation(node, template);
+      }
+    });
+  }
+
+  function updateNodeBaseClasses(node: NodeType, template: APIClassType) {
+    node.data.node!.base_classes = template["base_classes"];
+  }
+
+  function updateNodeEdges(
+    flow: FlowType,
+    node: NodeType,
+    template: APIClassType
+  ) {
+    flow.data!.edges.forEach((edge) => {
+      if (edge.source === node.id) {
+        let sourceHandleObject: sourceHandleType = scapeJSONParse(
+          edge.sourceHandle!
+        );
+        sourceHandleObject.baseClasses = template["base_classes"];
+        edge.data.sourceHandle = sourceHandleObject;
+        edge.sourceHandle = scapedJSONStringfy(sourceHandleObject);
+      }
+    });
+  }
+
+  function updateNodeDescription(node: NodeType, template: APIClassType) {
+    node.data.node!.description = template["description"];
+  }
+
+  function updateNodeTemplate(node: NodeType, template: APIClassType) {
+    node.data.node!.template = updateTemplate(
+      template["template"] as unknown as APITemplateType,
+      node.data.node!.template as APITemplateType
+    );
+  }
+
+  function updateStateWithDbData(tabsData: FlowType[]) {
+    setFlows(tabsData);
+  }
+
+  function hardReset() {
+    newNodeId.current = uid();
+    setTabId("");
+    setFlows([]);
+    setIsLoading(true);
+    setId(uid());
+  }
+
+  /**
+   * Downloads the current flow as a JSON file
+   */
+  function downloadFlow(
+    flow: FlowType,
+    flowName: string,
+    flowDescription?: string
+  ) {
+    // create a data URI with the current flow data
+    const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
+      JSON.stringify({ ...flow, name: flowName, description: flowDescription })
+    )}`;
+
+    // create a link element and set its properties
+    const link = document.createElement("a");
+    link.href = jsonString;
+    link.download = `${
+      flowName && flowName != ""
+        ? flowName
+        : flows.find((f) => f.id === tabId)!.name
+    }.json`;
+
+    // simulate a click on the link element to trigger the download
+    link.click();
+  }
+
+  function downloadFlows() {
+    downloadFlowsFromDatabase().then((flows) => {
+      const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
+        JSON.stringify(flows)
+      )}`;
+
+      // create a link element and set its properties
+      const link = document.createElement("a");
+      link.href = jsonString;
+      link.download = `flows.json`;
+
+      // simulate a click on the link element to trigger the download
+      link.click();
+    });
+  }
+
+  function getNodeId(nodeType: string) {
+    return nodeType + "-" + incrementNodeId();
+  }
+
+  /**
+   * Creates a file input and listens to a change event to upload a JSON flow file.
+   * If the file type is application/json, the file is read and parsed into a JSON object.
+   * The resulting JSON object is passed to the addFlow function.
+   */
+  async function uploadFlow(
+    newProject: boolean,
+    file?: File
+  ): Promise<String | undefined> {
+    let id;
+    if (file) {
+      let text = await file.text();
+      let fileData = JSON.parse(text);
+      if (fileData.flows) {
+        fileData.flows.forEach((flow: FlowType) => {
+          id = addFlow(newProject, flow);
+        });
+      }
+      // parse the text into a JSON object
+      let flow: FlowType = JSON.parse(text);
+
+      id = await addFlow(newProject, flow);
+    } else {
+      // create a file input
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = ".json";
+      // add a change event listener to the file input
+      id = await new Promise((resolve) => {
+        input.onchange = async (e: Event) => {
+          if (
+            (e.target as HTMLInputElement).files![0].type === "application/json"
+          ) {
+            const currentfile = (e.target as HTMLInputElement).files![0];
+            let text = await currentfile.text();
+            let flow: FlowType = JSON.parse(text);
+            const flowId = await addFlow(newProject, flow);
+            resolve(flowId);
+          }
+        };
+        // trigger the file input click event to open the file dialog
+        input.click();
+      });
+    }
+    return id;
+  }
+
+  function uploadFlows() {
+    // create a file input
+    const input = document.createElement("input");
+    input.type = "file";
+    // add a change event listener to the file input
+    input.onchange = (event: Event) => {
+      // check if the file type is application/json
+      if (
+        (event.target as HTMLInputElement).files![0].type === "application/json"
+      ) {
+        // get the file from the file input
+        const file = (event.target as HTMLInputElement).files![0];
+        // read the file as text
+        const formData = new FormData();
+        formData.append("file", file);
+        uploadFlowsToDatabase(formData).then(() => {
+          refreshFlows();
+        });
+      }
+    };
+    // trigger the file input click event to open the file dialog
+    input.click();
+  }
+  /**
+   * Removes a flow from an array of flows based on its id.
+   * Updates the state of flows and tabIndex using setFlows and setTabIndex hooks.
+   * @param {string} id - The id of the flow to remove.
+   */
+  function removeFlow(id: string) {
+    const index = flows.findIndex((flow) => flow.id === id);
+    if (index >= 0) {
+      deleteFlowFromDatabase(id).then(() => {
+        setFlows(flows.filter((flow) => flow.id !== id));
+      });
+    }
+  }
+  /**
+   * Add a new flow to the list of flows.
+   * @param flow Optional flow to add.
+   */
+  function paste(
+    selectionInstance: { nodes: Node[]; edges: Edge[] },
+    position: { x: number; y: number; paneX?: number; paneY?: number }
+  ) {
+    let minimumX = Infinity;
+    let minimumY = Infinity;
+    let idsMap = {};
+    let nodes: Node<NodeDataType>[] = reactFlowInstance!.getNodes();
+    let edges = reactFlowInstance!.getEdges();
+    selectionInstance.nodes.forEach((node: Node) => {
+      if (node.position.y < minimumY) {
+        minimumY = node.position.y;
+      }
+      if (node.position.x < minimumX) {
+        minimumX = node.position.x;
+      }
+    });
+
+    const insidePosition = position.paneX
+      ? { x: position.paneX + position.x, y: position.paneY! + position.y }
+      : reactFlowInstance!.project({ x: position.x, y: position.y });
+
+    selectionInstance.nodes.forEach((node: NodeType) => {
+      // Generate a unique node ID
+      let newId = getNodeId(node.data.type);
+      idsMap[node.id] = newId;
+
+      // Create a new node object
+      const newNode: NodeType = {
+        id: newId,
+        type: "genericNode",
+        position: {
+          x: insidePosition.x + node.position!.x - minimumX,
+          y: insidePosition.y + node.position!.y - minimumY,
+        },
+        data: {
+          ..._.cloneDeep(node.data),
+          id: newId,
+        },
+      };
+
+      // Add the new node to the list of nodes in state
+      nodes = nodes
+        .map((node) => ({ ...node, selected: false }))
+        .concat({ ...newNode, selected: false });
+    });
+    reactFlowInstance!.setNodes(nodes);
+
+    selectionInstance.edges.forEach((edge: Edge) => {
+      let source = idsMap[edge.source];
+      let target = idsMap[edge.target];
+      const sourceHandleObject: sourceHandleType = scapeJSONParse(
+        edge.sourceHandle!
+      );
+      let sourceHandle = scapedJSONStringfy({
+        ...sourceHandleObject,
+        id: source,
+      });
+      sourceHandleObject.id = source;
+      edge.data.sourceHandle = sourceHandleObject;
+      const targetHandleObject: targetHandleType = scapeJSONParse(
+        edge.targetHandle!
+      );
+      let targetHandle = scapedJSONStringfy({
+        ...targetHandleObject,
+        id: target,
+      });
+      targetHandleObject.id = target;
+      edge.data.targetHandle = targetHandleObject;
+      let id =
+        "reactflow__edge-" +
+        source +
+        sourceHandle +
+        "-" +
+        target +
+        targetHandle;
+      edges = addEdge(
+        {
+          source,
+          target,
+          sourceHandle,
+          targetHandle,
+          id,
+          style: { stroke: "#555" },
+          className:
+            targetHandleObject.type === "Text"
+              ? "stroke-gray-800 "
+              : "stroke-gray-900 ",
+          animated: targetHandleObject.type === "Text",
+          selected: false,
+        },
+        edges.map((edge) => ({ ...edge, selected: false }))
+      );
+    });
+    reactFlowInstance!.setEdges(edges);
+  }
+
+  const addFlow = async (
+    newProject: Boolean,
+    flow?: FlowType
+  ): Promise<String | undefined> => {
+    if (newProject) {
+      let flowData = flow
+        ? processDataFromFlow(flow)
+        : { nodes: [], edges: [], viewport: { zoom: 1, x: 0, y: 0 } };
+
+      // Create a new flow with a default name if no flow is provided.
+      const newFlow = createNewFlow(flowData, flow!);
+
+      const flowName = addVersionToDuplicates(newFlow, flows);
+
+      newFlow.name = flowName;
+
+      try {
+        const { id } = await saveFlowToDatabase(newFlow);
+        // Change the id to the new id.
+        newFlow.id = id;
+
+        // Add the new flow to the list of flows.
+        addFlowToLocalState(newFlow);
+
+        // Return the id
+        return id;
+      } catch (error) {
+        // Handle the error if needed
+        throw error; // Re-throw the error so the caller can handle it if needed
+      }
+    } else {
+      paste(
+        { nodes: flow!.data!.nodes, edges: flow!.data!.edges },
+        { x: 10, y: 10 }
+      );
+    }
+  };
+
+  const processDataFromFlow = (flow: FlowType, refreshIds = true) => {
+    let data = flow?.data ? flow.data : null;
+    if (data) {
+      processFlowEdges(flow);
+      processFlowNodes(flow);
+      //add animation to text type edges
+      updateEdges(data.edges);
+      // updateNodes(data.nodes, data.edges);
+      if (refreshIds) updateIds(data, getNodeId); // Assuming updateIds is defined elsewhere
+    }
+
+    return data;
+  };
+
+  const updateEdges = (edges: Edge[]) => {
+    edges.forEach((edge) => {
+      const targetHandleObject: targetHandleType = scapeJSONParse(
+        edge.targetHandle!
+      );
+      edge.className =
+        (targetHandleObject.type === "Text"
+          ? "stroke-gray-800 "
+          : "stroke-gray-900 ") + " stroke-connection";
+      edge.animated = targetHandleObject.type === "Text";
+    });
+  };
+
+  const updateNodes = (nodes: Node[], edges: Edge[]) => {
+    nodes.forEach((node) => {
+      if (node.data.node?.flow) return;
+      if (skipNodeUpdate.includes(node.data.type)) return;
+      const template = templates[node.data.type];
+      if (!template) {
+        setErrorData({ title: `Unknown node type: ${node.data.type}` });
+        return;
+      }
+      if (Object.keys(template["template"]).length > 0) {
+        node.data.node.base_classes = template["base_classes"];
+        edges.forEach((edge) => {
+          let sourceHandleObject: sourceHandleType = scapeJSONParse(
+            edge.sourceHandle!
+          );
+          if (edge.source === node.id) {
+            let newSourceHandle = sourceHandleObject;
+            newSourceHandle.baseClasses.concat(template["base_classes"]);
+            edge.sourceHandle = scapedJSONStringfy(newSourceHandle);
+          }
+        });
+        node.data.node.description = template["description"];
+        node.data.node.template = updateTemplate(
+          template["template"] as unknown as APITemplateType,
+          node.data.node.template as APITemplateType
+        );
+      }
+    });
+  };
+
+  const createNewFlow = (
+    flowData: ReactFlowJsonObject | null,
+    flow: FlowType
+  ) => ({
+    description: flow?.description ?? getRandomDescription(),
+    name: flow?.name ?? getRandomName(),
+    data: flowData,
+    id: "",
+  });
+
+  const addFlowToLocalState = (newFlow: FlowType) => {
+    setFlows((prevState) => {
+      return [...prevState, newFlow];
+    });
+  };
+
+  /**
+   * Updates an existing flow with new data
+   * @param newFlow - The new flow object containing the updated data
+   */
+  function updateFlow(newFlow: FlowType) {
+    setFlows((prevState) => {
+      const newFlows = [...prevState];
+      const index = newFlows.findIndex((flow) => flow.id === newFlow.id);
+      if (index !== -1) {
+        newFlows[index].description = newFlow.description ?? "";
+        newFlows[index].data = newFlow.data;
+        newFlows[index].name = newFlow.name;
+      }
+      return newFlows;
+    });
+  }
+
+  async function saveFlow(newFlow: FlowType, silent?: boolean) {
+    try {
+      // updates flow in db
+      const updatedFlow = await updateFlowInDatabase(newFlow);
+      if (updatedFlow) {
+        // updates flow in state
+        if (!silent) {
+          setSuccessData({ title: "Changes saved successfully" });
+        }
+        setFlows((prevState) => {
+          const newFlows = [...prevState];
+          const index = newFlows.findIndex((flow) => flow.id === newFlow.id);
+          if (index !== -1) {
+            newFlows[index].description = newFlow.description ?? "";
+            newFlows[index].data = newFlow.data;
+            newFlows[index].name = newFlow.name;
+          }
+          return newFlows;
+        });
+        //update tabs state
+        setTabsState((prev) => {
+          return {
+            ...prev,
+            [tabId]: {
+              ...prev[tabId],
+              isPending: false,
+            },
+          };
+        });
+      }
+    } catch (err) {
+      setErrorData({
+        title: "Error while saving changes",
+        list: [(err as AxiosError).message],
+      });
+    }
+  }
+
+  const [isBuilt, setIsBuilt] = useState(false);
+
+  return (
+    <FlowsContext.Provider
+      value={{
+        saveFlow,
+        isBuilt,
+        setIsBuilt,
+        lastCopiedSelection,
+        setLastCopiedSelection,
+        hardReset,
+        tabId,
+        setTabId,
+        flows,
+        incrementNodeId,
+        removeFlow,
+        addFlow,
+        updateFlow,
+        downloadFlow,
+        downloadFlows,
+        uploadFlows,
+        uploadFlow,
+        getNodeId,
+        tabsState,
+        setTabsState,
+        paste,
+        getTweak,
+        setTweak,
+        isLoading,
+      }}
+    >
+      {children}
+    </FlowsContext.Provider>
+  );
+}

src/frontend/src/contexts/index.tsx

@@ -8,7 +8,7 @@ import { AlertProvider } from "./alertContext";
 import { AuthProvider } from "./authContext";
 import { DarkProvider } from "./darkContext";
 import { LocationProvider } from "./locationContext";
-import { TabsProvider } from "./tabsContext";
+import { TabsProvider } from "./flowsContext";
 import { TypesProvider } from "./typesContext";
 import { UndoRedoProvider } from "./undoRedoContext";
 

src/frontend/src/contexts/undoRedoContext.tsx

@@ -13,7 +13,7 @@ import {
   undoRedoContextType,
 } from "../types/typesContext";
 import { isWrappedWithClass } from "../utils/utils";
-import { TabsContext } from "./tabsContext";
+import { FlowsContext } from "./flowsContext";
 
 const initialValue = {
   undo: () => {},
@@ -29,7 +29,7 @@ const defaultOptions: UseUndoRedoOptions = {
 export const undoRedoContext = createContext<undoRedoContextType>(initialValue);
 
 export function UndoRedoProvider({ children }) {
-  const { tabId, flows } = useContext(TabsContext);
+  const { tabId, flows } = useContext(FlowsContext);
 
   const [past, setPast] = useState<HistoryItem[][]>(flows.map(() => []));
   const [future, setFuture] = useState<HistoryItem[][]>(flows.map(() => []));

src/frontend/src/modals/ApiModal/index.tsx

@@ -15,7 +15,7 @@ import CodeTabsComponent from "../../components/codeTabsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { EXPORT_CODE_DIALOG } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
-import { TabsContext } from "../../contexts/tabsContext";
+import { FlowsContext } from "../../contexts/flowsContext";
 import { TemplateVariableType } from "../../types/api";
 import { tweakType, uniqueTweakType } from "../../types/components";
 import { FlowType, NodeType } from "../../types/flow/index";
@@ -45,7 +45,7 @@ const ApiModal = forwardRef(
     const [activeTab, setActiveTab] = useState("0");
     const tweak = useRef<tweakType>([]);
     const tweaksList = useRef<string[]>([]);
-    const { setTweak, getTweak, tabsState } = useContext(TabsContext);
+    const { setTweak, getTweak, tabsState } = useContext(FlowsContext);
     const pythonApiCode = getPythonApiCode(
       flow,
       autoLogin,

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -33,7 +33,7 @@ import {
   TableRow,
 } from "../../components/ui/table";
 import { limitScrollFieldsModal } from "../../constants/constants";
-import { TabsContext } from "../../contexts/tabsContext";
+import { FlowsContext } from "../../contexts/flowsContext";
 import { typesContext } from "../../contexts/typesContext";
 import { NodeDataType } from "../../types/flow";
 import { TabsState } from "../../types/tabs";
@@ -69,7 +69,7 @@ const EditNodeModal = forwardRef(
 
     const myData = useRef(data);
 
-    const { setTabsState, tabId } = useContext(TabsContext);
+    const { setTabsState, tabId } = useContext(FlowsContext);
     const { reactFlowInstance } = useContext(typesContext);
     let disabled =
       reactFlowInstance

src/frontend/src/modals/exportModal/index.tsx

@@ -5,13 +5,13 @@ import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
 import { EXPORT_DIALOG_SUBTITLE } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
-import { TabsContext } from "../../contexts/tabsContext";
+import { FlowsContext } from "../../contexts/flowsContext";
 import { removeApiKeys } from "../../utils/reactflowUtils";
 import BaseModal from "../baseModal";
 
 const ExportModal = forwardRef(
   (props: { children: ReactNode }, ref): JSX.Element => {
-    const { flows, tabId, downloadFlow } = useContext(TabsContext);
+    const { flows, tabId, downloadFlow } = useContext(FlowsContext);
     const { setNoticeData } = useContext(alertContext);
     const [checked, setChecked] = useState(true);
     const flow = flows.find((f) => f.id === tabId);

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -3,7 +3,7 @@ import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { SETTINGS_DIALOG_SUBTITLE } from "../../constants/constants";
-import { TabsContext } from "../../contexts/tabsContext";
+import { FlowsContext } from "../../contexts/flowsContext";
 import { FlowSettingsPropsType } from "../../types/components";
 import BaseModal from "../baseModal";
 
@@ -11,7 +11,7 @@ export default function FlowSettingsModal({
   open,
   setOpen,
 }: FlowSettingsPropsType): JSX.Element {
-  const { flows, tabId, updateFlow, saveFlow } = useContext(TabsContext);
+  const { flows, tabId, updateFlow, saveFlow } = useContext(FlowsContext);
   const flow = flows.find((f) => f.id === tabId);
   useEffect(() => {
     setName(flow!.name);

src/frontend/src/modals/formModal/index.tsx

@@ -24,7 +24,7 @@ import {
 import { Textarea } from "../../components/ui/textarea";
 import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
-import { TabsContext } from "../../contexts/tabsContext";
+import { FlowsContext } from "../../contexts/flowsContext";
 import { getBuildStatus } from "../../controllers/API";
 import { TabsState } from "../../types/tabs";
 import { validateNodes } from "../../utils/reactflowUtils";
@@ -38,7 +38,7 @@ export default function FormModal({
   setOpen: (open: boolean) => void;
   flow: FlowType;
 }): JSX.Element {
-  const { tabsState, setTabsState } = useContext(TabsContext);
+  const { tabsState, setTabsState } = useContext(FlowsContext);
   const [chatValue, setChatValue] = useState(() => {
     try {
       const { formKeysData } = tabsState[flow.id];

src/frontend/src/pages/AdminPage/index.tsx

@@ -22,7 +22,7 @@ import {
 } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
 import { AuthContext } from "../../contexts/authContext";
-import { TabsContext } from "../../contexts/tabsContext";
+import { FlowsContext } from "../../contexts/flowsContext";
 import {
   addUser,
   deleteUser,
@@ -44,7 +44,7 @@ export default function AdminPage() {
   const { userData } = useContext(AuthContext);
   const [totalRowsCount, setTotalRowsCount] = useState(0);
 
-  const { setTabId } = useContext(TabsContext);
+  const { setTabId } = useContext(FlowsContext);
 
   // set null id
   useEffect(() => {

src/frontend/src/pages/CommunityPage/index.tsx

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from "react";
 import { Button } from "../../components/ui/button";
 import { alertContext } from "../../contexts/alertContext";
-import { TabsContext } from "../../contexts/tabsContext";
+import { FlowsContext } from "../../contexts/flowsContext";
 
 import { useNavigate } from "react-router-dom";
 import { CardComponent } from "../../components/cardComponent";
@@ -12,7 +12,7 @@ import { getExamples } from "../../controllers/API";
 import { FlowType } from "../../types/flow";
 export default function CommunityPage(): JSX.Element {
   const { flows, setTabId, downloadFlows, uploadFlows, addFlow } =
-    useContext(TabsContext);
+    useContext(FlowsContext);
 
   // set null id
   useEffect(() => {

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

@@ -29,7 +29,7 @@ import GenericNode from "../../../../CustomNodes/GenericNode";
 import Chat from "../../../../components/chatComponent";
 import { alertContext } from "../../../../contexts/alertContext";
 import { locationContext } from "../../../../contexts/locationContext";
-import { TabsContext } from "../../../../contexts/tabsContext";
+import { FlowsContext } from "../../../../contexts/flowsContext";
 import { typesContext } from "../../../../contexts/typesContext";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import { APIClassType } from "../../../../types/api";
@@ -70,7 +70,7 @@ export default function Page({
     saveFlow,
     setTabsState,
     tabId,
-  } = useContext(TabsContext);
+  } = useContext(FlowsContext);
   const {
     types,
     reactFlowInstance,