refactor: add flow and upload flow functionality (#3200)

* Removed unused function and fixed tags initial value

* Added post save flow

* Added update flow patch

* removed unused import

* created useAddFlow hook to substitute AddFlow function on flowsManager store

* fixed post save flow to handle endpoint name as undefined

* Fixed add flow hook to use post save flow mutation

* removed unused  line

* changed addFlow to use hook in all components that use addFlow

* Removed unused code

* removed addFlow of useDuplicateFlows call

* made newProject default as true

* removed unused variables from addFlow

* fixed url of requests of flows

* passed functions directly

* fix app to display loading on top of the router

* fixed promise of addFlow

* Added upload flow hook with a lot of modularity

* Fixed addFlow naming

* Added helper functions for file uploading

* Changed upload flow to use helper functions

* removed refresh on post

* changed paste function to handle when chatinput node exists on paste

* Used helper function to create input on FileInput

* Used helper function to create input on InputFileComponent

* Used helper function to create input on folder upload, and used uploadFlow hook

* used uploadFlow hook on dropdown options

* used addFlow instead of addComponent on node toolbar

* changed upload flow on headerComponent to use hook

* Changed pageComponent to use uploadFlow hook

* removed useFileDrop dependency

* Fixed onFileDrop to use uploadFlow

* removed useDropdown dependency

* removed unused add and upload functions from flowsManagerStore

* Clean flows and refetch when flow change, added loader when is fetching

* Changed loading to the useQuery isPending

* changed post to add flow

* fixed error when uploading other thing that is not a JSON not appearing

* changed useAddFlow to handle empty params too

* Fixed loading every time we switch tabs

* Fixed unnecessary list and !

* Fixed reference bug

* Inserted cloneDeep to prevent reference bugs

* Fixed tests of drag and drop

* Fixed flows not being refreshed when uploading

* [autofix.ci] apply automated fixes

* fixed folders test

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/src/App.tsx

@@ -23,12 +23,12 @@ 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 { Case } from "./shared/components/caseComponent";
 import useAlertStore from "./stores/alertStore";
 import useAuthStore from "./stores/authStore";
 import { useDarkStore } from "./stores/darkStore";
 import useFlowsManagerStore from "./stores/flowsManagerStore";
 import { useFolderStore } from "./stores/foldersStore";
+import { cn } from "./utils/utils";
 
 export default function App() {
   useTrackLastVisitedPath();
@@ -164,15 +164,16 @@ export default function App() {
             ></FetchErrorComponent>
           }
 
-          <Case condition={isLoadingApplication}>
+          <div
-            <div className="loading-page-panel">
+            className={cn(
+              "loading-page-panel absolute left-0 top-0 z-[999]",
+              isLoadingApplication ? "" : "hidden",
+            )}
+          >
             <LoadingComponent remSize={50} />
           </div>
-          </Case>
 
-          <Case condition={!isLoadingApplication}>
           <Router />
-          </Case>
         </>
       </ErrorBoundary>
       <div></div>

src/frontend/src/components/cardComponent/hooks/use-handle-install.tsx

@@ -1,6 +1,5 @@
-import { useState } from "react";
+import useAddFlow from "@/hooks/flows/use-add-flow";
 import { getComponent } from "../../../controllers/API";
-import useFlowsManagerStore from "../../../stores/flowsManagerStore";
 import { storeComponent } from "../../../types/store";
 import cloneFlowWithParent from "../../../utils/storeUtils";
 
@@ -14,7 +13,7 @@ const useInstallComponent = (
   setSuccessData: (value: { title: string }) => void,
   setErrorData: (value: { title: string; list: string[] }) => void,
 ) => {
-  const addFlow = useFlowsManagerStore((state) => state.addFlow);
+  const addFlow = useAddFlow();
 
   const handleInstall = () => {
     const temp = downloadsCount;
@@ -24,7 +23,7 @@ const useInstallComponent = (
     getComponent(data.id)
       .then((res) => {
         const newFlow = cloneFlowWithParent(res, res.id, data.is_component);
-        addFlow(true, newFlow)
+        addFlow({ flow: newFlow })
           .then((id) => {
             setSuccessData({
               title: `${name} ${isStore ? "Downloaded" : "Installed"} Successfully.`,

src/frontend/src/components/exampleComponent/index.tsx

@@ -1,5 +1,6 @@
+import useAddFlow from "@/hooks/flows/use-add-flow";
+import emojiRegex from "emoji-regex";
 import { useNavigate } from "react-router-dom";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { FlowType } from "../../types/flow";
 import { updateIds } from "../../utils/reactflowUtils";
 import { cn } from "../../utils/utils";
@@ -20,10 +21,9 @@ export default function CollectionCardComponent({
   flow: FlowType;
   authorized?: boolean;
 }) {
-  const addFlow = useFlowsManagerStore((state) => state.addFlow);
+  const addFlow = useAddFlow();
   const navigate = useNavigate();
-  const emojiRegex = /\p{Emoji}/u;
+  const isEmoji = (str: string) => emojiRegex().test(str);
-  const isEmoji = (str: string) => emojiRegex.test(str);
 
   return (
     <Card
@@ -77,7 +77,7 @@ export default function CollectionCardComponent({
             <Button
               onClick={() => {
                 updateIds(flow.data!);
-                addFlow(true, flow).then((id) => {
+                addFlow({ flow }).then((id) => {
                   navigate("/flow/" + id);
                 });
               }}

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

@@ -7,6 +7,8 @@ import {
   DropdownMenuTrigger,
 } from "../../../ui/dropdown-menu";
 
+import useAddFlow from "@/hooks/flows/use-add-flow";
+import useUploadFlow from "@/hooks/flows/use-upload-flow";
 import { useNavigate } from "react-router-dom";
 import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
 import { SAVED_HOVER } from "../../../../constants/constants";
@@ -26,7 +28,7 @@ import { Button } from "../../../ui/button";
 
 export const MenuBar = ({}: {}): JSX.Element => {
   const shortcuts = useShortcutsStore((state) => state.shortcuts);
-  const addFlow = useFlowsManagerStore((state) => state.addFlow);
+  const addFlow = useAddFlow();
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
@@ -40,14 +42,14 @@ export const MenuBar = ({}: {}): JSX.Element => {
   const saveLoading = useFlowsManagerStore((state) => state.saveLoading);
   const [openSettings, setOpenSettings] = useState(false);
   const [openLogs, setOpenLogs] = useState(false);
-  const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
+  const uploadFlow = useUploadFlow();
   const navigate = useNavigate();
   const isBuilding = useFlowStore((state) => state.isBuilding);
   const getTypes = useTypesStore((state) => state.getTypes);
 
   function handleAddFlow() {
     try {
-      addFlow(true).then((id) => {
+      addFlow().then((id) => {
         navigate("/flow/" + id);
       });
     } catch (err) {
@@ -125,14 +127,18 @@ export const MenuBar = ({}: {}): JSX.Element => {
             <DropdownMenuItem
               className="cursor-pointer"
               onClick={() => {
-                uploadFlow({ newProject: false, isComponent: false }).catch(
+                uploadFlow({ position: { x: 300, y: 100 } })
-                  (error) => {
+                  .then(() => {
+                    setSuccessData({
+                      title: "Uploaded successfully",
+                    });
+                  })
+                  .catch((error) => {
                     setErrorData({
                       title: UPLOAD_ERROR_ALERT,
-                      list: [error],
+                      list: [(error as Error).message],
+                    });
                   });
-                  },
-                );
               }}
             >
               <IconComponent name="FileUp" className="header-menu-options" />

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

@@ -1,5 +1,6 @@
 import { usePostUploadFile } from "@/controllers/API/queries/files/use-post-upload-file";
-import { useEffect, useState } from "react";
+import { createFileUpload } from "@/helpers/create-file-upload";
+import { useEffect } from "react";
 import {
   CONSOLE_ERROR_MSG,
   INVALID_FILE_ALERT,
@@ -19,7 +20,6 @@ export default function InputFileComponent({
   id,
 }: FileComponentType): JSX.Element {
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
-  const [loading, setLoading] = useState(false);
   const setErrorData = useAlertStore((state) => state.setErrorData);
 
   // Clear component state
@@ -39,24 +39,14 @@ export default function InputFileComponent({
     return false;
   }
 
-  const { mutate } = usePostUploadFile();
+  const { mutate, isPending } = usePostUploadFile();
 
   const handleButtonClick = (): void => {
-    // Create a file input element
+    createFileUpload({ multiple: false, accept: fileTypes?.join(",") }).then(
-    const input = document.createElement("input");
+      (files) => {
-    document.body.appendChild(input);
+        const file = files[0];
-    input.type = "file";
+        if (file) {
-    input.accept = fileTypes?.join(",");
+          if (checkFileType(file.name)) {
-    input.style.display = "none"; // Hidden from view
-    input.multiple = false; // Allow only one file selection
-    const onChangeFile = (event: Event): void => {
-      setLoading(true);
-
-      // Get the selected file
-      const file = (event.target as HTMLInputElement).files?.[0];
-
-      // Check if the file type is correct
-      if (file && checkFileType(file.name)) {
             // Upload the file
             mutate(
               { file, id: currentFlowId },
@@ -69,11 +59,9 @@ export default function InputFileComponent({
                   // Update the state and on with the name of the file
                   // sets the value to the user
                   handleOnNewValue({ value: file.name, file_path });
-              setLoading(false);
                 },
                 onError: () => {
                   console.error(CONSOLE_ERROR_MSG);
-              setLoading(false);
                 },
               },
             );
@@ -83,14 +71,10 @@ export default function InputFileComponent({
               title: INVALID_FILE_ALERT,
               list: fileTypes,
             });
-        setLoading(false);
           }
-    };
+        }
-
+      },
-    input.addEventListener("change", onChangeFile);
+    );
-
-    // Trigger the file selection dialog
-    input.click();
   };
 
   return (
@@ -114,7 +98,7 @@ export default function InputFileComponent({
             unstyled
             className="inline-flex items-center justify-center"
             onClick={handleButtonClick}
-            loading={loading}
+            loading={isPending}
             disabled={disabled}
           >
             <IconComponent

src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx

@@ -4,6 +4,9 @@ import {
   usePostUploadFolders,
 } from "@/controllers/API/queries/folders";
 import { useGetDownloadFolders } from "@/controllers/API/queries/folders/use-get-download-folders";
+import { createFileUpload } from "@/helpers/create-file-upload";
+import { getObjectsFromFilelist } from "@/helpers/get-objects-from-filelist";
+import useUploadFlow from "@/hooks/flows/use-upload-flow";
 import { useEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { FolderType } from "../../../../pages/MainPage/entities";
@@ -55,6 +58,7 @@ const SideBarFoldersButtonsComponent = ({
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
+  const uploadFlow = useUploadFlow();
 
   const handleFolderChange = () => {
     getFolderById(folderId);
@@ -68,46 +72,41 @@ const SideBarFoldersButtonsComponent = ({
   const { mutate } = usePostUploadFolders();
 
   const handleUploadFlowsToFolder = () => {
-    const input = document.createElement("input");
+    createFileUpload().then((files: File[]) => {
-    input.type = "file";
+      getObjectsFromFilelist<any>(files).then((objects) => {
-    input.accept = ".json";
+        if (objects.every((flow) => flow.data?.nodes)) {
-    input.click();
+          uploadFlow({ files }).then(() => {
-
-    input.onchange = (event: Event) => {
-      if (
-        (event.target as HTMLInputElement).files![0].type === "application/json"
-      ) {
-        const file = (event.target as HTMLInputElement).files![0];
-        const formData = new FormData();
-        formData.append("file", file);
-        file.text().then(async (text) => {
-          const data = JSON.parse(text);
-          if (data.data?.nodes) {
-            await useFlowsManagerStore.getState().addFlow(true, data);
             getFolderById(folderId);
+            setSuccessData({
+              title: "Uploaded successfully",
+            });
+          });
         } else {
+          files.forEach((folder) => {
+            const formData = new FormData();
+            formData.append("file", folder);
             mutate(
               { formData },
               {
                 onSuccess: () => {
-                  getFolderById(folderId);
+                  getFoldersApi(true);
                   setSuccessData({
-                    title: "Uploaded successfully",
+                    title: "Folder uploaded successfully.",
                   });
                 },
                 onError: (err) => {
                   console.log(err);
                   setErrorData({
                     title: `Error on upload`,
-                    list: [err["response"]["data"]],
+                    list: [err["response"]["data"]["message"]],
                   });
                 },
               },
             );
-          }
           });
         }
-    };
+      });
+    });
   };
 
   const { mutate: mutateDownloadFolder } = useGetDownloadFolders();

src/frontend/src/controllers/API/index.ts

@@ -262,32 +262,6 @@ export async function getFlowStylesFromDatabase() {
   }
 }
 
-/**
- * Saves a new flow style to the database.
- *
- * @param {FlowStyleType} flowStyle - The flow style data to save.
- * @returns {Promise<any>} The saved flow style data.
- * @throws Will throw an error if saving fails.
- */
-export async function saveFlowStyleToDatabase(flowStyle: FlowStyleType) {
-  try {
-    const response = await api.post(`${BASE_URL_API}flow_styles/`, flowStyle, {
-      headers: {
-        accept: "application/json",
-        "Content-Type": "application/json",
-      },
-    });
-
-    if (response.status !== 201) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    return response?.data;
-  } catch (error) {
-    console.error(error);
-    throw error;
-  }
-}
-
 /**
  * Fetches the version of the API.
  *
@@ -508,7 +482,7 @@ export async function getStoreComponents({
   limit = 9999999,
   is_component = null,
   sort = "-count(liked_by)",
-  tags = [] || null,
+  tags = [],
   liked = null,
   isPrivate = null,
   search = null,

src/frontend/src/controllers/API/queries/_builds/use-delete-builds.ts

@@ -8,9 +8,10 @@ interface IDeleteBuilds {
 }
 
 // add types for error handling and success
-export const useDeleteBuilds: useMutationFunctionType<undefined,IDeleteBuilds> = (
+export const useDeleteBuilds: useMutationFunctionType<
-  options,
+  undefined,
-) => {
+  IDeleteBuilds
+> = (options) => {
   const { mutate } = UseRequestProcessor();
 
   const deleteBuildsFn = async (payload: IDeleteBuilds): Promise<any> => {

src/frontend/src/controllers/API/queries/_builds/use-get-builds.ts

@@ -1,8 +1,6 @@
 import useFlowStore from "@/stores/flowStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { FlowPoolType } from "@/types/zustand/flow";
-import { cleanEdges } from "@/utils/reactflowUtils";
-import { getInputsAndOutputs } from "@/utils/storeUtils";
 import { keepPreviousData } from "@tanstack/react-query";
 import { AxiosResponse } from "axios";
 import { useQueryFunctionType } from "../../../../types/api";
@@ -52,6 +50,7 @@ export const useGetBuildsQuery: useQueryFunctionType<
 
   const queryResult = query(["useGetBuildsQuery"], responseFn, {
     placeholderData: keepPreviousData,
+    refetchOnWindowFocus: false,
   });
 
   return queryResult;

src/frontend/src/controllers/API/queries/flows/use-patch-update-flow.ts

@@ -0,0 +1,46 @@
+import { useMutationFunctionType } from "@/types/api";
+import { UseMutationResult } from "@tanstack/react-query";
+import { ReactFlowJsonObject } from "reactflow";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface IPatchUpdateFlow {
+  name: string;
+  data: ReactFlowJsonObject;
+  description: string;
+  folder_id: string;
+  endpoint_name: string;
+}
+
+interface IPatchUpdateFlowParams {
+  id: string;
+}
+
+export const usePatchUpdateFlow: useMutationFunctionType<
+  IPatchUpdateFlowParams,
+  IPatchUpdateFlow
+> = (params, options?) => {
+  const { mutate } = UseRequestProcessor();
+
+  const PatchUpdateFlowFn = async (payload: IPatchUpdateFlow): Promise<any> => {
+    const response = await api.patch(`${getURL("FLOWS")}/${params}`, {
+      name: payload.name,
+      data: payload.data,
+      description: payload.description,
+      folder_id: payload.folder_id === "" ? null : payload.folder_id,
+      endpoint_name: payload.endpoint_name,
+    });
+
+    return response.data;
+  };
+
+  const mutation: UseMutationResult<IPatchUpdateFlow, any, IPatchUpdateFlow> =
+    mutate(
+      ["usePatchUpdateFlow", { id: params.id }],
+      PatchUpdateFlowFn,
+      options,
+    );
+
+  return mutation;
+};

src/frontend/src/controllers/API/queries/flows/use-post-add-flow.ts

@@ -0,0 +1,43 @@
+import { useMutationFunctionType } from "@/types/api";
+import { UseMutationResult } from "@tanstack/react-query";
+import { ReactFlowJsonObject } from "reactflow";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface IPostAddFlow {
+  name: string;
+  data: ReactFlowJsonObject;
+  description: string;
+  is_component: boolean;
+  folder_id: string;
+  endpoint_name: string | undefined;
+}
+
+export const usePostAddFlow: useMutationFunctionType<
+  undefined,
+  IPostAddFlow
+> = (options?) => {
+  const { mutate } = UseRequestProcessor();
+
+  const postAddFlowFn = async (payload: IPostAddFlow): Promise<any> => {
+    const response = await api.post(`${getURL("FLOWS")}/`, {
+      name: payload.name,
+      data: payload.data,
+      description: payload.description,
+      is_component: payload.is_component,
+      folder_id: payload.folder_id || null,
+      endpoint_name: payload.endpoint_name || null,
+    });
+
+    return response.data;
+  };
+
+  const mutation: UseMutationResult<IPostAddFlow, any, IPostAddFlow> = mutate(
+    ["usePostAddFlow"],
+    postAddFlowFn,
+    options,
+  );
+
+  return mutation;
+};

src/frontend/src/controllers/API/queries/flows/use-post-download-multiple-flows.ts

@@ -32,10 +32,7 @@ export const usePostDownloadMultipleFlows: useMutationFunctionType<
     IPostDownloadMultipleFlows
   > = mutate(
     ["usePostDownloadMultipleFlows"],
-    async (payload: IPostDownloadMultipleFlows) => {
+    postDownloadMultipleFlowsFn,
-      const res = await postDownloadMultipleFlowsFn(payload);
-      return res;
-    },
     options,
   );
 

src/frontend/src/controllers/API/queries/folders/use-post-upload-folders.ts

@@ -1,6 +1,4 @@
-import useFlowsManagerStore from "@/stores/flowsManagerStore";
+import { useMutationFunctionType } from "@/types/api";
-import { useFolderStore } from "@/stores/foldersStore";
-import { Users, useMutationFunctionType } from "@/types/api";
 import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
@@ -22,7 +20,6 @@ export const usePostUploadFolders: useMutationFunctionType<
       `${getURL("FOLDERS")}/upload/`,
       payload.formData,
     );
-    await useFolderStore.getState().getFoldersApi(true);
     return res.data;
   };
 

src/frontend/src/helpers/create-file-upload.ts

@@ -0,0 +1,35 @@
+export async function createFileUpload(props?: {
+  accept?: string;
+  multiple?: boolean;
+}): Promise<File[]> {
+  let lock = false;
+  return new Promise((resolve) => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = props?.accept ?? ".json";
+    input.multiple = props?.multiple ?? true;
+    input.style.display = "none";
+    // add a change event listener to the file input
+    input.onchange = async (e: Event) => {
+      lock = true;
+      resolve(Array.from((e.target as HTMLInputElement).files!));
+      document.body.removeChild(input);
+    };
+    window.addEventListener(
+      "focus",
+      () => {
+        setTimeout(() => {
+          if (!lock) {
+            resolve([]);
+            document.body.removeChild(input);
+          }
+        }, 300);
+      },
+      { once: true },
+    );
+    // add the input element to the body to ensure it is part of the DOM
+    document.body.appendChild(input);
+    // trigger the file input click event to open the file dialog
+    input.click();
+  });
+}

src/frontend/src/helpers/get-objects-from-filelist.ts

@@ -0,0 +1,9 @@
+export async function getObjectsFromFilelist<T>(files: File[]): Promise<T[]> {
+  let objects: T[] = [];
+  for (const file of files) {
+    let text = await file.text();
+    let fileData = await JSON.parse(text);
+    objects.push(fileData as T);
+  }
+  return objects;
+}

src/frontend/src/hooks/flows/use-add-flow.ts

@@ -0,0 +1,106 @@
+import { usePostAddFlow } from "@/controllers/API/queries/flows/use-post-add-flow";
+import useAlertStore from "@/stores/alertStore";
+import useFlowsManagerStore from "@/stores/flowsManagerStore";
+import { useFolderStore } from "@/stores/foldersStore";
+import { useGlobalVariablesStore } from "@/stores/globalVariablesStore/globalVariables";
+import { useTypesStore } from "@/stores/typesStore";
+import { FlowType } from "@/types/flow";
+import {
+  addVersionToDuplicates,
+  createNewFlow,
+  extractFieldsFromComponenents,
+  processDataFromFlow,
+  processFlows,
+  updateGroupRecursion,
+} from "@/utils/reactflowUtils";
+import { cloneDeep } from "lodash";
+
+const useAddFlow = () => {
+  const unavaliableFields = useGlobalVariablesStore(
+    (state) => state.unavailableFields,
+  );
+  const globalVariablesEntries = useGlobalVariablesStore(
+    (state) => state.globalVariablesEntries,
+  );
+  const flows = useFlowsManagerStore((state) => state.flows);
+  const setFlows = useFlowsManagerStore((state) => state.setFlows);
+  const deleteComponent = useFlowsManagerStore(
+    (state) => state.deleteComponent,
+  );
+  const setIsLoading = useFlowsManagerStore((state) => state.setIsLoading);
+
+  const { mutate: postAddFlow } = usePostAddFlow();
+
+  const addFlow = async (params?: { flow?: FlowType; override?: boolean }) => {
+    return new Promise(async (resolve, reject) => {
+      const flow = cloneDeep(params?.flow) ?? undefined;
+      let flowData = flow
+        ? processDataFromFlow(flow)
+        : { nodes: [], edges: [], viewport: { zoom: 1, x: 0, y: 0 } };
+      flowData?.nodes.forEach((node) => {
+        updateGroupRecursion(
+          node,
+          flowData?.edges,
+          unavaliableFields,
+          globalVariablesEntries,
+        );
+      });
+      // Create a new flow with a default name if no flow is provided.
+      const folder_id = useFolderStore.getState().folderUrl;
+      const my_collection_id = useFolderStore.getState().myCollectionId;
+
+      if (params?.override && flow) {
+        await deleteComponent(flow.name);
+      }
+      const newFlow = createNewFlow(
+        flowData!,
+        folder_id || my_collection_id!,
+        flow,
+      );
+
+      const newName = addVersionToDuplicates(newFlow, flows);
+      newFlow.name = newName;
+      newFlow.folder_id = useFolderStore.getState().folderUrl;
+
+      postAddFlow(newFlow, {
+        onSuccess: ({ id }) => {
+          newFlow.id = id;
+          // Add the new flow to the list of flows.
+          const { data, flows: myFlows } = processFlows([newFlow, ...flows]);
+          setFlows(myFlows);
+          useTypesStore.setState((state) => ({
+            data: { ...state.data, ["saved_components"]: data },
+            ComponentFields: extractFieldsFromComponenents({
+              ...state.data,
+              ["saved_components"]: data,
+            }),
+          }));
+          setIsLoading(false);
+          resolve(id);
+        },
+        onError: (error) => {
+          if (error.response?.data?.detail) {
+            useAlertStore.getState().setErrorData({
+              title: "Could not load flows from database",
+              list: [error.response?.data?.detail],
+            });
+          } else {
+            useAlertStore.getState().setErrorData({
+              title: "Could not load flows from database",
+              list: [
+                error.message ??
+                  "An unexpected error occurred, please try again",
+              ],
+            });
+          }
+          setIsLoading(false);
+          reject(error); // Re-throw the error so the caller can handle it if needed},
+        },
+      });
+    });
+  };
+
+  return addFlow;
+};
+
+export default useAddFlow;

src/frontend/src/hooks/flows/use-upload-flow.ts

@@ -0,0 +1,98 @@
+import { createFileUpload } from "@/helpers/create-file-upload";
+import { getObjectsFromFilelist } from "@/helpers/get-objects-from-filelist";
+import useFlowStore from "@/stores/flowStore";
+import useFlowsManagerStore from "@/stores/flowsManagerStore";
+import { FlowType } from "@/types/flow";
+import useAddFlow from "./use-add-flow";
+
+const useUploadFlow = () => {
+  const addFlow = useAddFlow();
+  const paste = useFlowStore((state) => state.paste);
+  const refreshFlows = useFlowsManagerStore((state) => state.refreshFlows);
+
+  const getFlowsFromFiles = async ({
+    files,
+  }: {
+    files: File[];
+  }): Promise<FlowType[]> => {
+    const objectList = await getObjectsFromFilelist<any>(files);
+    const flows: FlowType[] = [];
+    objectList.forEach((object) => {
+      if (object.flows) {
+        object.flows.forEach((flow: FlowType) => {
+          flows.push(flow);
+        });
+      } else {
+        flows.push(object as FlowType);
+      }
+    });
+    return flows;
+  };
+
+  const getFlowsToUpload = async ({
+    files,
+  }: {
+    files?: File[];
+  }): Promise<FlowType[]> => {
+    if (!files) {
+      files = await createFileUpload();
+    }
+    if (!files.every((file) => file.type === "application/json")) {
+      throw new Error("Invalid file type");
+    }
+    return await getFlowsFromFiles({
+      files,
+    });
+  };
+
+  const uploadFlow = async ({
+    files,
+    isComponent,
+    position,
+  }: {
+    files?: File[];
+    isComponent?: boolean;
+    position?: { x: number; y: number };
+  }): Promise<void> => {
+    try {
+      let flows = await getFlowsToUpload({ files });
+      if (
+        isComponent !== undefined &&
+        flows.every(
+          (fileData) =>
+            (!fileData.is_component && isComponent === true) ||
+            (fileData.is_component !== undefined &&
+              fileData.is_component !== isComponent),
+        )
+      ) {
+        throw new Error(
+          "You cannot upload a component as a flow or vice versa",
+        );
+      } else {
+        let currentPosition = position;
+        for (const flow of flows) {
+          if (flow.data) {
+            if (currentPosition) {
+              paste(flow.data, currentPosition);
+              currentPosition = {
+                x: currentPosition.x + 50,
+                y: currentPosition.y + 50,
+              };
+            } else {
+              await addFlow({ flow });
+            }
+          } else {
+            throw new Error("Invalid flow data");
+          }
+        }
+        refreshFlows();
+      }
+    } catch (e) {
+      throw e;
+    }
+  };
+
+  return uploadFlow;
+};
+
+export default useUploadFlow;

src/frontend/src/modals/IOModal/components/IOFieldView/components/FileInput/index.tsx

@@ -1,10 +1,13 @@
 import { Button } from "../../../../../../components/ui/button";
 
 import { usePostUploadFile } from "@/controllers/API/queries/files/use-post-upload-file";
+import { createFileUpload } from "@/helpers/create-file-upload";
 import { useEffect, useState } from "react";
 import IconComponent from "../../../../../../components/genericIconComponent";
-import { BASE_URL_API } from "../../../../../../constants/constants";
+import {
-import { uploadFile } from "../../../../../../controllers/API";
+  ALLOWED_IMAGE_INPUT_EXTENSIONS,
+  BASE_URL_API,
+} from "../../../../../../constants/constants";
 import useFlowsManagerStore from "../../../../../../stores/flowsManagerStore";
 import { IOFileInputProps } from "../../../../../../types/components";
 
@@ -99,18 +102,11 @@ export default function IOFileInput({ field, updateValue }: IOFileInputProps) {
   };
 
   const handleButtonClick = (): void => {
+    createFileUpload({
+      multiple: false,
+      accept: ALLOWED_IMAGE_INPUT_EXTENSIONS.join(","),
+    }).then((files) => upload(files[0]));
     // Create a file input element
-    const input = document.createElement("input");
-    input.type = "file";
-    input.style.display = "none"; // Hidden from view
-    input.multiple = false; // Allow only one file selection
-    input.onchange = (event: Event): void => {
-      // Get the selected file
-      const file = (event.target as HTMLInputElement).files?.[0];
-      upload(file);
-    };
-    // Trigger the file selection dialog
-    input.click();
   };
 
   return (

src/frontend/src/modals/newFlowModal/components/NewFlowCardComponent/index.tsx

@@ -1,3 +1,4 @@
+import useAddFlow from "@/hooks/flows/use-add-flow";
 import { useLocation, useNavigate } from "react-router-dom";
 import {
   Card,
@@ -5,11 +6,10 @@ import {
   CardDescription,
   CardTitle,
 } from "../../../../components/ui/card";
-import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { useFolderStore } from "../../../../stores/foldersStore";
 
 export default function NewFlowCardComponent() {
-  const addFlow = useFlowsManagerStore((state) => state.addFlow);
+  const addFlow = useAddFlow();
   const navigate = useNavigate();
   const location = useLocation();
   const folderId = location?.state?.folderId;
@@ -18,7 +18,7 @@ export default function NewFlowCardComponent() {
   return (
     <Card
       onClick={() => {
-        addFlow(true).then((id) => {
+        addFlow().then((id) => {
           setFolderUrl(folderId ?? "");
           navigate(`/flow/${id}${folderId ? `/folder/${folderId}` : ""}`);
         });

src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx

@@ -10,13 +10,13 @@ import APIRequest from "../../../../assets/undraw_real_time_analytics_re_yliv.sv
 import BasicPrompt from "../../../../assets/undraw_short_bio_re_fmx0.svg?react";
 import TransferFiles from "../../../../assets/undraw_transfer_files_re_a2a9.svg?react";
 
+import useAddFlow from "@/hooks/flows/use-add-flow";
 import {
   Card,
   CardContent,
   CardDescription,
   CardTitle,
 } from "../../../../components/ui/card";
-import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { useFolderStore } from "../../../../stores/foldersStore";
 import { UndrawCardComponentProps } from "../../../../types/components";
 import { updateIds } from "../../../../utils/reactflowUtils";
@@ -24,7 +24,7 @@ import { updateIds } from "../../../../utils/reactflowUtils";
 export default function UndrawCardComponent({
   flow,
 }: UndrawCardComponentProps): JSX.Element {
-  const addFlow = useFlowsManagerStore((state) => state.addFlow);
+  const addFlow = useAddFlow();
   const navigate = useNavigate();
   const location = useLocation();
   const folderId = location?.state?.folderId;
@@ -142,7 +142,7 @@ export default function UndrawCardComponent({
     <Card
       onClick={() => {
         updateIds(flow.data!);
-        addFlow(true, flow).then((id) => {
+        addFlow({ flow }).then((id) => {
           setFolderUrl(folderId ?? "");
           navigate(`/flow/${id}/folder/${folderIdUrl}`);
         });

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

@@ -1,4 +1,6 @@
+import LoadingComponent from "@/components/loadingComponent";
 import { useGetBuildsQuery } from "@/controllers/API/queries/_builds";
+import useUploadFlow from "@/hooks/flows/use-upload-flow";
 import { getInputsAndOutputs } from "@/utils/storeUtils";
 import _, { cloneDeep } from "lodash";
 import {
@@ -62,7 +64,7 @@ export default function Page({
   flow: FlowType;
   view?: boolean;
 }): JSX.Element {
-  const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
+  const uploadFlow = useUploadFlow();
   const autoSaveCurrentFlow = useFlowsManagerStore(
     (state) => state.autoSaveCurrentFlow,
   );
@@ -70,9 +72,6 @@ export default function Page({
   const templates = useTypesStore((state) => state.templates);
   const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
-  const [showCanvas, setSHowCanvas] = useState(
-    Object.keys(templates).length > 0 && Object.keys(types).length > 0,
-  );
 
   const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
   const setReactFlowInstance = useFlowStore(
@@ -166,7 +165,12 @@ export default function Page({
     }
   }, [currentFlowId, reactFlowInstance]);
 
-  const { isFetching } = useGetBuildsQuery({});
+  const { isFetching, refetch } = useGetBuildsQuery({});
+
+  const showCanvas =
+    Object.keys(templates).length > 0 &&
+    Object.keys(types).length > 0 &&
+    !isFetching;
 
   useEffect(() => {
     if (!isFetching) {
@@ -187,13 +191,14 @@ export default function Page({
           "Components created before Langflow 1.0 may be unstable. Ensure components are up to date.",
       });
     }
-  }, []);
+  }, [currentFlowId]);
 
   useEffect(() => {
+    refetch();
     return () => {
       cleanFlow();
     };
-  }, []);
+  }, [currentFlowId]);
 
   function handleUndo(e: KeyboardEvent) {
     if (!isWrappedWithClass(e, "noflow")) {
@@ -315,12 +320,6 @@ export default function Page({
   //@ts-ignore
   useHotkeys("delete", handleDelete);
 
-  useEffect(() => {
-    setSHowCanvas(
-      Object.keys(templates).length > 0 && Object.keys(types).length > 0,
-    );
-  }, [templates, types]);
-
   const onConnectMod = useCallback(
     (params: Connection) => {
       takeSnapshot();
@@ -387,20 +386,17 @@ export default function Page({
         );
       } else if (event.dataTransfer.types.some((types) => types === "Files")) {
         takeSnapshot();
-        if (event.dataTransfer.files.item(0)!.type === "application/json") {
         const position = {
           x: event.clientX,
           y: event.clientY,
         };
         uploadFlow({
-            newProject: false,
+          files: Array.from(event.dataTransfer.files!),
-            isComponent: false,
-            file: event.dataTransfer.files.item(0)!,
           position: position,
         }).catch((error) => {
           setErrorData({
             title: UPLOAD_ERROR_ALERT,
-              list: [error],
+            list: [(error as Error).message],
           });
         });
       } else {
@@ -409,7 +405,6 @@ export default function Page({
           list: [UPLOAD_ALERT_LIST],
         });
       }
-      }
     },
     // Specify dependencies for useCallback
     [getNodeId, setNodes, takeSnapshot, paste],
@@ -533,7 +528,9 @@ export default function Page({
           </ReactFlow>
         </div>
       ) : (
-        <></>
+        <div className="flex h-full w-full items-center justify-center">
+          <LoadingComponent remSize={30} />
+        </div>
       )}
     </div>
   );

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

@@ -1,6 +1,7 @@
 import useHandleOnNewValue from "@/CustomNodes/hooks/use-handle-new-value";
 import useHandleNodeClass from "@/CustomNodes/hooks/use-handle-node-class";
 import { usePostRetrieveVertexOrder } from "@/controllers/API/queries/vertex";
+import useAddFlow from "@/hooks/flows/use-add-flow";
 import { APIClassType } from "@/types/api";
 import _, { cloneDeep } from "lodash";
 import { useEffect, useState } from "react";
@@ -82,6 +83,8 @@ export default function NodeToolbarComponent({
   const shortcuts = useShortcutsStore((state) => state.shortcuts);
   const unselectAll = useFlowStore((state) => state.unselectAll);
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const addFlow = useAddFlow();
+
   function handleMinimizeWShortcut(e: KeyboardEvent) {
     if (isWrappedWithClass(e, "noflow")) return;
     e.preventDefault();
@@ -134,7 +137,10 @@ export default function NodeToolbarComponent({
       return;
     }
     if (hasCode && !isSaved) {
-      saveComponent(cloneDeep(data), false);
+      addFlow({
+        flow: flowComponent,
+        override: false,
+      });
       setSuccessData({ title: `${data.id} saved successfully` });
       return;
     }
@@ -208,7 +214,6 @@ export default function NodeToolbarComponent({
   const setNodes = useFlowStore((state) => state.setNodes);
 
   const setEdges = useFlowStore((state) => state.setEdges);
-  const saveComponent = useFlowsManagerStore((state) => state.saveComponent);
   const getNodePosition = useFlowStore((state) => state.getNodePosition);
   const flows = useFlowsManagerStore((state) => state.flows);
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
@@ -257,7 +262,10 @@ export default function NodeToolbarComponent({
         if (isSaved) {
           return setShowOverrideModal(true);
         }
-        saveComponent(cloneDeep(data), false);
+        addFlow({
+          flow: flowComponent,
+          override: false,
+        });
         break;
       case "freeze":
         setNode(data.id, (old) => ({
@@ -291,7 +299,10 @@ export default function NodeToolbarComponent({
         downloadNode(flowComponent!);
         break;
       case "SaveAll":
-        saveComponent(cloneDeep(data), false);
+        addFlow({
+          flow: flowComponent,
+          override: false,
+        });
         break;
       case "documentation":
         if (data.node?.documentation) openInNewTab(data.node?.documentation);
@@ -695,12 +706,18 @@ export default function NodeToolbarComponent({
             icon={"SaveAll"}
             index={6}
             onConfirm={(index, user) => {
-              saveComponent(cloneDeep(data), true);
+              addFlow({
+                flow: flowComponent,
+                override: true,
+              });
               setSuccessData({ title: `${data.id} successfully overridden!` });
             }}
             onClose={setShowOverrideModal}
             onCancel={() => {
-              saveComponent(cloneDeep(data), false);
+              addFlow({
+                flow: flowComponent,
+                override: true,
+              });
               setSuccessData({ title: "New component successfully saved!" });
             }}
           >

src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-duplicate.tsx

@@ -1,16 +1,8 @@
+import useAddFlow from "@/hooks/flows/use-add-flow";
 import { useCallback } from "react";
-import { XYPosition } from "reactflow";
-import { FlowType } from "../../../../../types/flow";
 
 const useDuplicateFlows = (
   selectedFlowsComponentsCards: string[],
-  addFlow: (
-    newProject: boolean,
-    flow?: FlowType,
-    override?: boolean,
-    position?: XYPosition,
-    fromDragAndDrop?: boolean,
-  ) => Promise<string | undefined>,
   allFlows: any[],
   resetFilter: () => void,
   getFoldersApi: (
@@ -27,13 +19,11 @@ const useDuplicateFlows = (
   handleSelectAll: (select: boolean) => void,
   cardTypes: string,
 ) => {
+  const addFlow = useAddFlow();
   const handleDuplicate = useCallback(() => {
     Promise.all(
       selectedFlowsComponentsCards.map((selectedFlow) =>
-        addFlow(
+        addFlow({ flow: allFlows.find((flow) => flow.id === selectedFlow) }),
-          true,
-          allFlows.find((flow) => flow.id === selectedFlow),
-        ),
       ),
     ).then(() => {
       resetFilter();

src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx

@@ -17,7 +17,6 @@ import { sortFlows } from "../../utils/sort-flows";
 import EmptyComponent from "../emptyComponent";
 import HeaderComponent from "../headerComponent";
 import CollectionCard from "./components/collectionCard";
-import useDeleteMultipleFlows from "./hooks/use-delete-multiple";
 import useDescriptionModal from "./hooks/use-description-modal";
 import useFilteredFlows from "./hooks/use-filtered-flows";
 import useDuplicateFlows from "./hooks/use-handle-duplicate";
@@ -30,8 +29,6 @@ export default function ComponentsComponent({
 }: {
   type?: string;
 }) {
-  const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
-  const removeFlow = useFlowsManagerStore((state) => state.removeFlow);
   const isLoading = useFlowsManagerStore((state) => state.isLoading);
   const setAllFlows = useFlowsManagerStore((state) => state.setAllFlows);
   const allFlows = useFlowsManagerStore((state) => state.allFlows);
@@ -55,7 +52,7 @@ export default function ComponentsComponent({
     (state) => state.selectedFlowsComponentsCards,
   );
 
-  const [handleFileDrop] = useFileDrop(uploadFlow, type)!;
+  const handleFileDrop = useFileDrop(type);
   const [pageSize, setPageSize] = useState(20);
   const [pageIndex, setPageIndex] = useState(1);
   const location = useLocation();
@@ -71,7 +68,6 @@ export default function ComponentsComponent({
   const myCollectionId = useFolderStore((state) => state.myCollectionId);
   const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
   const setFolderUrl = useFolderStore((state) => state.setFolderUrl);
-  const addFlow = useFlowsManagerStore((state) => state.addFlow);
   const isLoadingFolders = useFolderStore((state) => state.isLoadingFolders);
   const setSelectedFolder = useFolderStore((state) => state.setSelectedFolder);
 
@@ -114,7 +110,6 @@ export default function ComponentsComponent({
 
   const { handleDuplicate } = useDuplicateFlows(
     selectedFlowsComponentsCards,
-    addFlow,
     allFlows,
     resetFilter,
     getFoldersApi,

src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx

@@ -1,14 +1,9 @@
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
 import NewFlowModal from "../../../../modals/newFlowModal";
-import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 
 type EmptyComponentProps = {};
 
 const EmptyComponent = ({}: EmptyComponentProps) => {
-  const addFlow = useFlowsManagerStore((state) => state.addFlow);
-  const navigate = useNavigate();
-
   const [openModal, setOpenModal] = useState(false);
 
   return (

src/frontend/src/pages/MainPage/hooks/use-dropdown-options.tsx

@@ -1,31 +1,19 @@
-import { XYPosition } from "reactflow";
+import useUploadFlow from "@/hooks/flows/use-upload-flow";
 import { CONSOLE_ERROR_MSG } from "../../../constants/alerts_constants";
 import useAlertStore from "../../../stores/alertStore";
 
 const useDropdownOptions = ({
-  uploadFlow,
   navigate,
   is_component,
 }: {
-  uploadFlow: ({
-    newProject,
-    file,
-    isComponent,
-    position,
-  }: {
-    newProject: boolean;
-    file?: File;
-    isComponent: boolean | null;
-    position?: XYPosition;
-  }) => Promise<string | never>;
   navigate: (url: string) => void;
   is_component: boolean;
 }) => {
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
+  const uploadFlow = useUploadFlow();
   const handleImportFromJSON = () => {
     uploadFlow({
-      newProject: true,
       isComponent: is_component,
     })
       .then((id) => {

src/frontend/src/pages/MainPage/hooks/use-on-file-drop.tsx

@@ -1,69 +1,27 @@
+import useUploadFlow from "@/hooks/flows/use-upload-flow";
 import { useLocation } from "react-router-dom";
-import { XYPosition } from "reactflow";
+import { CONSOLE_ERROR_MSG } from "../../../constants/alerts_constants";
-import {
-  CONSOLE_ERROR_MSG,
-  UPLOAD_ALERT_LIST,
-  WRONG_FILE_ERROR_ALERT,
-} from "../../../constants/alerts_constants";
 import useAlertStore from "../../../stores/alertStore";
 import { useFolderStore } from "../../../stores/foldersStore";
 
-const useFileDrop = (
+const useFileDrop = (type?: string) => {
-  uploadFlow: ({
-    newProject,
-    file,
-    isComponent,
-    position,
-  }: {
-    newProject: boolean;
-    file?: File;
-    isComponent: boolean | null;
-    position?: XYPosition;
-  }) => Promise<string | never>,
-  type,
-) => {
   const location = useLocation();
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const getFolderById = useFolderStore((state) => state.getFolderById);
   const folderId = location?.state?.folderId;
   const myCollectionId = useFolderStore((state) => state.myCollectionId);
+  const uploadFlow = useUploadFlow();
 
   const handleFileDrop = (e) => {
     e.preventDefault();
-    if (e.dataTransfer.types.some((type) => type === "Files")) {
+    if (e.dataTransfer.types.every((type) => type === "Files")) {
-      const files: FileList = e.dataTransfer.files;
+      const files: File[] = Array.from(e.dataTransfer.files);
-
-      const uploadPromises: Promise<any>[] = [];
-
-      for (let i = 0; i < files.length; i++) {
-        const file = files[i];
-        if (file.type === "application/json") {
-          const reader = new FileReader();
-          const FileReaderPromise: Promise<void> = new Promise(
-            (resolve, reject) => {
-              reader.onload = (event) => {
-                const fileContent = event.target!.result;
-                const fileContentJson = JSON.parse(fileContent as string);
-                const is_component = fileContentJson.is_component;
       uploadFlow({
-                  newProject: true,
+        files,
-                  file: file,
+        isComponent:
-                  isComponent: type === "all" ? null : type === "component",
+          type === "component" ? true : type === "flow" ? false : undefined,
       })
-                  .then((_) => resolve())
-                  .catch((error) => {
-                    reject(error);
-                  });
-              };
-              reader.readAsText(file);
-            },
-          );
-          uploadPromises.push(FileReaderPromise);
-        }
-      }
-
-      Promise.all(uploadPromises)
         .then(() => {
           setSuccessData({
             title: `All files uploaded successfully`,
@@ -71,14 +29,15 @@ const useFileDrop = (
           getFolderById(folderId ? folderId : myCollectionId);
         })
         .catch((error) => {
+          console.log(error);
           setErrorData({
             title: CONSOLE_ERROR_MSG,
-            list: [error],
+            list: [(error as Error).message],
           });
         });
     }
   };
-  return [handleFileDrop];
+  return handleFileDrop;
 };
 
 export default useFileDrop;

src/frontend/src/pages/MainPage/pages/mainPage/index.tsx

@@ -16,7 +16,6 @@ import useDropdownOptions from "../../hooks/use-dropdown-options";
 import { getFolderById } from "../../services";
 
 export default function HomePage(): JSX.Element {
-  const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId,
   );
@@ -41,7 +40,6 @@ export default function HomePage(): JSX.Element {
   }, [pathname]);
 
   const dropdownOptions = useDropdownOptions({
-    uploadFlow,
     navigate,
     is_component,
   });

src/frontend/src/stores/flowStore.ts

@@ -294,11 +294,17 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       selection.nodes.some((node) => node.data.type === "ChatInput") &&
       checkChatInput(get().nodes)
     ) {
-      useAlertStore.getState().setErrorData({
+      useAlertStore.getState().setNoticeData({
-        title: "Error pasting components",
+        title: "You can only have one Chat Input component in a flow.",
-        list: ["You can only have one ChatInput component in the flow"],
       });
-      return;
+      selection.nodes = selection.nodes.filter(
+        (node) => node.data.type !== "ChatInput",
+      );
+      selection.edges = selection.edges.filter(
+        (edge) =>
+          selection.nodes.some((node) => edge.source === node.id) &&
+          selection.nodes.some((node) => edge.target === node.id),
+      );
     }
     if (selection.nodes) {
       if (checkOldComponents({ nodes: selection.nodes ?? [] })) {

src/frontend/src/stores/flowsManagerStore.ts

@@ -1,45 +1,29 @@
-import { brokenEdgeMessage } from "@/utils/utils";
 import { AxiosError } from "axios";
 import { cloneDeep } from "lodash";
 import pDebounce from "p-debounce";
-import { Edge, Node, Viewport, XYPosition } from "reactflow";
+import { Edge, Node, Viewport } from "reactflow";
 import { create } from "zustand";
-import {
+import { SAVE_DEBOUNCE_TIME } from "../constants/constants";
-  BROKEN_EDGES_WARNING,
-  SAVE_DEBOUNCE_TIME,
-} from "../constants/constants";
 import {
   deleteFlowFromDatabase,
   multipleDeleteFlowsComponents,
   readFlowsFromDatabase,
-  saveFlowToDatabase,
   updateFlowInDatabase,
-  uploadFlowsToDatabase,
 } from "../controllers/API";
-import { FlowType, NodeDataType } from "../types/flow";
+import { FlowType } from "../types/flow";
 import {
   FlowsManagerStoreType,
   UseUndoRedoOptions,
 } from "../types/zustand/flowsManager";
 import {
-  addVersionToDuplicates,
-  createFlowComponent,
-  createNewFlow,
-  detectBrokenEdgesEdges,
   extractFieldsFromComponenents,
-  processDataFromFlow,
   processFlows,
-  updateGroupRecursion,
 } from "../utils/reactflowUtils";
 import useAlertStore from "./alertStore";
-import { useDarkStore } from "./darkStore";
 import useFlowStore from "./flowStore";
 import { useFolderStore } from "./foldersStore";
-import { useGlobalVariablesStore } from "./globalVariablesStore/globalVariables";
 import { useTypesStore } from "./typesStore";
 
-let saveTimeoutId: NodeJS.Timeout | null = null;
-
 const defaultOptions: UseUndoRedoOptions = {
   maxHistorySize: 100,
   enableShortcuts: true,
@@ -179,148 +163,6 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
         });
     });
   }, SAVE_DEBOUNCE_TIME),
-  uploadFlows: () => {
-    return new Promise<void>((resolve) => {
-      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(() => {
-            get()
-              .refreshFlows()
-              .then(() => {
-                resolve();
-              });
-          });
-        }
-      };
-      // trigger the file input click event to open the file dialog
-      input.click();
-    });
-  },
-  addFlow: async (
-    newProject: Boolean,
-    flow?: FlowType,
-    override?: boolean,
-    position?: XYPosition,
-    fromDragAndDrop?: boolean,
-  ): Promise<string | undefined> => {
-    let flowData = flow
-      ? processDataFromFlow(flow)
-      : { nodes: [], edges: [], viewport: { zoom: 1, x: 0, y: 0 } };
-    flowData?.nodes.forEach((node) => {
-      updateGroupRecursion(
-        node,
-        flowData?.edges,
-        useGlobalVariablesStore.getState().unavailableFields,
-        useGlobalVariablesStore.getState().globalVariablesEntries,
-      );
-    });
-    if (newProject) {
-      // Create a new flow with a default name if no flow is provided.
-      const folder_id = useFolderStore.getState().folderUrl;
-      const my_collection_id = useFolderStore.getState().myCollectionId;
-
-      if (override) {
-        get().deleteComponent(flow!.name);
-        const newFlow = createNewFlow(
-          flowData!,
-          flow!,
-          folder_id || my_collection_id!,
-        );
-        const { id } = await saveFlowToDatabase(newFlow);
-        newFlow.id = id;
-        //setTimeout  to prevent update state with wrong state
-        setTimeout(() => {
-          const { data, flows } = processFlows([newFlow, ...get().flows]);
-          get().setFlows(flows);
-          set({ isLoading: false });
-          useTypesStore.setState((state) => ({
-            data: { ...state.data, ["saved_components"]: data },
-            ComponentFields: extractFieldsFromComponenents({
-              ...state.data,
-              ["saved_components"]: data,
-            }),
-          }));
-        }, 200);
-        // addFlowToLocalState(newFlow);
-        return;
-      }
-      const newFlow = createNewFlow(
-        flowData!,
-        flow!,
-        folder_id || my_collection_id!,
-      );
-
-      const newName = addVersionToDuplicates(newFlow, get().flows);
-
-      newFlow.name = newName;
-      newFlow.folder_id = useFolderStore.getState().folderUrl;
-
-      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.
-        const { data, flows } = processFlows([newFlow, ...get().flows]);
-        get().setFlows(flows);
-        set({ isLoading: false });
-        useTypesStore.setState((state) => ({
-          data: { ...state.data, ["saved_components"]: data },
-          ComponentFields: extractFieldsFromComponenents({
-            ...state.data,
-            ["saved_components"]: data,
-          }),
-        }));
-
-        // Return the id
-        return id;
-      } catch (error: any) {
-        if (error.response?.data?.detail) {
-          useAlertStore.getState().setErrorData({
-            title: "Could not load flows from database",
-            list: [error.response?.data?.detail],
-          });
-        } else {
-          useAlertStore.getState().setErrorData({
-            title: "Could not load flows from database",
-            list: [
-              error.message ?? "An unexpected error occurred, please try again",
-            ],
-          });
-        }
-        throw error; // Re-throw the error so the caller can handle it if needed
-      }
-    } else {
-      let brokenEdges = detectBrokenEdgesEdges(
-        flow!.data!.nodes,
-        flow!.data!.edges,
-      );
-      if (brokenEdges.length > 0) {
-        useAlertStore.getState().setErrorData({
-          title: BROKEN_EDGES_WARNING,
-          list: brokenEdges.map((edge) => brokenEdgeMessage(edge)),
-        });
-      }
-      useFlowStore
-        .getState()
-        .paste(
-          { nodes: flow!.data!.nodes, edges: flow!.data!.edges },
-          position ?? { x: 10, y: 10 },
-        );
-    }
-  },
   removeFlow: async (id: string | string[]) => {
     return new Promise<void>((resolve, reject) => {
       if (Array.isArray(id)) {
@@ -381,86 +223,6 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
       }
     });
   },
-  uploadFlow: async ({
-    newProject,
-    file,
-    isComponent,
-    position = { x: 10, y: 10 },
-  }: {
-    newProject: boolean;
-    file?: File;
-    isComponent: boolean | null;
-    position?: XYPosition;
-  }): Promise<string | never> => {
-    return new Promise(async (resolve, reject) => {
-      let id;
-      if (file) {
-        let text = await file.text();
-        let fileData = JSON.parse(text);
-        if (
-          newProject &&
-          isComponent !== null &&
-          ((!fileData.is_component && isComponent === true) ||
-            (fileData.is_component !== undefined &&
-              fileData.is_component !== isComponent))
-        ) {
-          reject("You cannot upload a component as a flow or vice versa");
-        } else {
-          if (fileData.flows) {
-            fileData.flows.forEach((flow: FlowType) => {
-              id = get().addFlow(newProject, flow, undefined, position);
-            });
-            resolve("");
-          } else {
-            id = await get().addFlow(
-              newProject,
-              fileData,
-              undefined,
-              position,
-              true,
-            );
-            resolve(id);
-          }
-        }
-      } 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
-        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 fileData: FlowType = await JSON.parse(text);
-
-            if (
-              (!fileData.is_component && isComponent === true) ||
-              (fileData.is_component !== undefined &&
-                fileData.is_component !== isComponent)
-            ) {
-              reject("You cannot upload a component as a flow or vice versa");
-            } else {
-              id = await get().addFlow(newProject, fileData);
-              resolve(id);
-            }
-          }
-        };
-        // trigger the file input click event to open the file dialog
-        input.click();
-      }
-    });
-  },
-  saveComponent: (component: NodeDataType, override: boolean) => {
-    component.node!.official = false;
-    return get().addFlow(
-      true,
-      createFlowComponent(component, useDarkStore.getState().version),
-      override,
-    );
-  },
   takeSnapshot: () => {
     const currentFlowId = get().currentFlowId;
     // push the current graph to the past state

src/frontend/src/types/zustand/flowsManager/index.ts

@@ -1,4 +1,4 @@
-import { Edge, Node, Viewport, XYPosition } from "reactflow";
+import { Edge, Node, Viewport } from "reactflow";
 import { FlowType } from "../../flow";
 
 export type FlowsManagerStoreType = {
@@ -30,31 +30,8 @@ export type FlowsManagerStoreType = {
     edges: Edge[],
     viewport: Viewport,
   ) => void;
-  uploadFlows: () => Promise<void>;
-  uploadFlow: ({
-    newProject,
-    file,
-    isComponent,
-    position,
-  }: {
-    newProject: boolean;
-    file?: File;
-    isComponent: boolean | null;
-    position?: XYPosition;
-  }) => Promise<string | never>;
-  addFlow: (
-    newProject: boolean,
-    flow?: FlowType,
-    override?: boolean,
-    position?: XYPosition,
-    fromDragAndDrop?: boolean,
-  ) => Promise<string | undefined>;
   deleteComponent: (key: string) => Promise<void>;
   removeFlow: (id: string | string[]) => Promise<void>;
-  saveComponent: (
-    component: any,
-    override: boolean,
-  ) => Promise<string | undefined>;
   undo: () => void;
   redo: () => void;
   takeSnapshot: () => void;

src/frontend/src/utils/reactflowUtils.ts

@@ -1527,8 +1527,8 @@ export function getRandomDescription(): string {
 
 export const createNewFlow = (
   flowData: ReactFlowJsonObject,
-  flow: FlowType,
   folderId: string,
+  flow?: FlowType,
 ) => {
   return {
     description: flow?.description ?? getRandomDescription(),

src/frontend/tests/end-to-end/dragAndDrop.spec.ts

@@ -43,7 +43,7 @@ test.describe("drag and drop test", () => {
 
     // Now dispatch
     await page.dispatchEvent(
-      '//*[@id="root"]/div/div[1]/div[2]/div[3]/div/div',
+      '//*[@id="root"]/div/div[2]/div[2]/div[3]/div',
       "drop",
       {
         dataTransfer,

src/frontend/tests/end-to-end/folders.spec.ts

@@ -77,7 +77,7 @@ test("add folder by drag and drop", async ({ page }) => {
 
   // Wait for the target element to be available before evaluation
   await page.waitForSelector(
-    '//*[@id="root"]/div/div[1]/div[2]/div[3]/aside/nav/div/div[2]',
+    '//*[@id="root"]/div/div[2]/div[2]/div[3]/aside/nav/div/div[2]',
   );
 
   // Create the DataTransfer and File
@@ -93,7 +93,7 @@ test("add folder by drag and drop", async ({ page }) => {
 
   // Now dispatch
   await page.dispatchEvent(
-    '//*[@id="root"]/div/div[1]/div[2]/div[3]/aside/nav/div/div[2]',
+    '//*[@id="root"]/div/div[2]/div[2]/div[3]/aside/nav/div/div[2]',
     "drop",
     {
       dataTransfer,