Merge branch 'dev' into fix_group_graph

Makefile

@@ -47,20 +47,22 @@ init:
 
 
 coverage: ## run the tests and generate a coverage report
-	poetry run pytest --cov \
+	@poetry run coverage run
-		--cov-config=.coveragerc \
+	@poetry run coverage erase
-		--cov-report xml \
-		--cov-report term-missing:skip-covered \
-		--cov-report lcov:coverage/lcov-pytest.info
 
 
 # allow passing arguments to pytest
 unit_tests:
-	poetry run pytest --ignore=tests/integration --instafail -ra -n auto -m "not api_key_required" $(args)
+	poetry run pytest \
+		--ignore=tests/integration \
+		--instafail -ra -n auto -m "not api_key_required" \
+		$(args)
 
 
 integration_tests:
-	poetry run pytest tests/integration --instafail -ra -n auto $(args)
+	poetry run pytest tests/integration \
+		--instafail -ra -n auto \
+		$(args)
 
 format: ## run code formatters
 	poetry run ruff check . --fix
@@ -129,9 +131,20 @@ start:
 	@echo 'Running the CLI'
 
 ifeq ($(open_browser),false)
-	@make install_backend && poetry run langflow run --path $(path) --log-level $(log_level) --host $(host) --port $(port) --env-file $(env) --no-open-browser
+	@make install_backend && poetry run langflow run \
+		--path $(path) \
+		--log-level $(log_level) \
+		--host $(host) \
+		--port $(port) \
+		--env-file $(env) \
+		--no-open-browser
 else
-	@make install_backend && poetry run langflow run --path $(path) --log-level $(log_level) --host $(host) --port $(port) --env-file $(env)
+	@make install_backend && poetry run langflow run \
+		--path $(path) \
+		--log-level $(log_level) \
+		--host $(host) \
+		--port $(port) \
+		--env-file $(env)
 endif
 
 
@@ -166,13 +179,27 @@ backend: ## run the backend in development mode
 	@echo 'Setting up the environment'
 	@make setup_env
 	make install_backend
-	@-kill -9 $(lsof -t -i:7860)
+	@-kill -9 $$(lsof -t -i:7860)
 ifdef login
 	@echo "Running backend autologin is $(login)";
-	LANGFLOW_AUTO_LOGIN=$(login) poetry run uvicorn --factory langflow.main:create_app --host 0.0.0.0 --port 7860 --reload --env-file .env --loop asyncio --workers $(workers)
+	LANGFLOW_AUTO_LOGIN=$(login) poetry run uvicorn \
+		--factory langflow.main:create_app \
+		--host 0.0.0.0 \
+		--port $(port) \
+		--reload \
+		--env-file $(env) \
+		--loop asyncio \
+		--workers $(workers)
 else
-	@echo "Running backend respecting the .env file";
+	@echo "Running backend respecting the $(env) file";
-	poetry run uvicorn --factory langflow.main:create_app --host 0.0.0.0 --port 7860 --reload --env-file .env  --loop asyncio --workers $(workers)
+	poetry run uvicorn \
+		--factory langflow.main:create_app \
+		--host 0.0.0.0 \
+		--port $(port) \
+		--reload \
+		--env-file $(env) \
+		--loop asyncio \
+		--workers $(workers)
 endif
 
 

pyproject.toml

@@ -151,6 +151,28 @@ log_cli = true
 markers = ["async_test", "api_key_required"]
 
 
+[tool.coverage.run]
+command_line = """
+    -m pytest
+    --cov --cov-report=term --cov-report=html
+    --instafail -ra -n auto -m "not api_key_required"
+    tests/unit
+"""
+source = ["src/backend/base/langflow/"]
+omit = ["*/alembic/*", "tests/*", "*/__init__.py"]
+
+
+[tool.coverage.report]
+sort = "Stmts"
+skip_empty = true
+show_missing = false
+ignore_errors = true
+
+
+[tool.coverage.html]
+directory = "coverage"
+
+
 [tool.ruff]
 exclude = ["src/backend/langflow/alembic/*"]
 line-length = 120

src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.tsx

@@ -6,13 +6,14 @@ import {
 } from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
 import { ResponseErrorDetailAPI } from "../../types/api";
+import { NodeDataType } from "../../types/flow";
 
 const useFetchDataOnMount = (
-  data,
+  data: NodeDataType,
-  name,
+  name: string,
-  handleUpdateValues,
+  handleUpdateValues: (name: string, data: NodeDataType) => Promise<any>,
-  setNode,
+  setNode: (id: string, callback: (oldNode: any) => any) => void,
-  setIsLoading,
+  setIsLoading: (value: boolean) => void,
 ) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);
 

src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx

@@ -5,15 +5,16 @@ import {
 } from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
 import { ResponseErrorTypeAPI } from "../../types/api";
+import { NodeDataType } from "../../types/flow";
 
 const useHandleOnNewValue = (
-  data,
+  data: NodeDataType,
-  name,
+  name: string,
-  takeSnapshot,
+  takeSnapshot: () => void,
-  handleUpdateValues,
+  handleUpdateValues: (name: string, data: NodeDataType) => Promise<any>,
-  debouncedHandleUpdateValues,
+  debouncedHandleUpdateValues: any,
-  setNode,
+  setNode: (id: string, callback: (oldNode: any) => any) => void,
-  setIsLoading,
+  setIsLoading: (value: boolean) => void,
 ) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);
 

src/frontend/src/CustomNodes/hooks/use-handle-node-class.tsx

@@ -1,11 +1,12 @@
 import { cloneDeep } from "lodash";
+import { NodeDataType } from "../../types/flow";
 
 const useHandleNodeClass = (
-  data,
+  data: NodeDataType,
-  name,
+  name: string,
-  takeSnapshot,
+  takeSnapshot: () => void,
-  setNode,
+  setNode: (id: string, callback: (oldNode: any) => any) => void,
-  updateNodeInternals,
+  updateNodeInternals: (id: string) => void,
 ) => {
   const handleNodeClass = (newNodeClass, code, type?: string) => {
     if (!data.node) return;

src/frontend/src/CustomNodes/hooks/use-handle-refresh-buttons.tsx

@@ -7,7 +7,10 @@ import useAlertStore from "../../stores/alertStore";
 import { ResponseErrorDetailAPI } from "../../types/api";
 import { handleUpdateValues } from "../../utils/parameterUtils";
 
-const useHandleRefreshButtonPress = (setIsLoading, setNode) => {
+const useHandleRefreshButtonPress = (
+  setIsLoading: (value: boolean) => void,
+  setNode: (id: string, callback: (oldNode: any) => any) => void,
+) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);
 
   const handleRefreshButtonPress = async (name, data) => {

src/frontend/src/CustomNodes/hooks/use-update-validation-status.tsx

@@ -1,6 +1,11 @@
 import { useEffect } from "react";
+import { FlowPoolType } from "../../types/zustand/flow";
 
-const useUpdateValidationStatus = (dataId, flowPool, setValidationStatus) => {
+const useUpdateValidationStatus = (
+  dataId: string,
+  flowPool: FlowPoolType,
+  setValidationStatus: (value: any) => void,
+) => {
   useEffect(() => {
     const relevantData =
       flowPool[dataId] && flowPool[dataId]?.length > 0

src/frontend/src/CustomNodes/hooks/use-validation-status-string.tsx

@@ -4,7 +4,7 @@ import { isErrorLog } from "../../types/utils/typeCheckingUtils";
 
 const useValidationStatusString = (
   validationStatus: VertexBuildTypeAPI | null,
-  setValidationString,
+  setValidationString: (value: any) => void,
 ) => {
   useEffect(() => {
     if (validationStatus && validationStatus.data?.outputs) {

src/frontend/src/components/cardComponent/hooks/use-data-effect.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { storeComponent } from "../../../types/store";
+
+const useDataEffect = (
+  data: storeComponent,
+  setLikedByUser: (value: any) => void,
+  setLikesCount: (value: any) => void,
+  setDownloadsCount: (value: any) => void,
+) => {
+  useEffect(() => {
+    if (data) {
+      setLikedByUser(data?.liked_by_user ?? false);
+      setLikesCount(data?.liked_by_count ?? 0);
+      setDownloadsCount(data?.downloads_count ?? 0);
+    }
+  }, [data, data?.liked_by_count, data?.liked_by_user, data?.downloads_count]);
+};
+
+export default useDataEffect;

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

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { getComponent } from "../../../controllers/API";
+import useFlowsManagerStore from "../../../stores/flowsManagerStore";
+import { storeComponent } from "../../../types/store";
+import cloneFlowWithParent from "../../../utils/storeUtils";
+
+const useInstallComponent = (
+  data: storeComponent,
+  name: string,
+  isStore: boolean,
+  downloadsCount: number,
+  setDownloadsCount: (value: any) => void,
+  setLoading: (value: boolean) => void,
+  setSuccessData: (value: { title: string }) => void,
+  setErrorData: (value: { title: string; list: string[] }) => void,
+) => {
+  const addFlow = useFlowsManagerStore((state) => state.addFlow);
+
+  const handleInstall = () => {
+    const temp = downloadsCount;
+    setDownloadsCount((old) => Number(old) + 1);
+    setLoading(true);
+
+    getComponent(data.id)
+      .then((res) => {
+        const newFlow = cloneFlowWithParent(res, res.id, data.is_component);
+        addFlow(true, newFlow)
+          .then((id) => {
+            setSuccessData({
+              title: `${name} ${isStore ? "Downloaded" : "Installed"} Successfully.`,
+            });
+            setLoading(false);
+          })
+          .catch((error) => {
+            setLoading(false);
+            setErrorData({
+              title: `Error ${isStore ? "downloading" : "installing"} the ${name}`,
+              list: [error.response.data.detail],
+            });
+          });
+      })
+      .catch((err) => {
+        setLoading(false);
+        setErrorData({
+          title: `Error ${isStore ? "downloading" : "installing"} the ${name}`,
+          list: [err.response.data.detail],
+        });
+        setDownloadsCount(temp);
+      });
+  };
+
+  return { handleInstall };
+};
+
+export default useInstallComponent;

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

@@ -0,0 +1,51 @@
+import { postLikeComponent } from "../../../controllers/API";
+import { storeComponent } from "../../../types/store";
+
+const useLikeComponent = (
+  data: storeComponent,
+  name: string,
+  setLoadingLike: (value: boolean) => void,
+  likedByUser: boolean | null | undefined,
+  likesCount: number,
+  setLikedByUser: (value: any) => void,
+  setLikesCount: (value: any) => void,
+  setValidApiKey: (value: boolean) => void,
+  setErrorData: (value: { title: string; list: string[] }) => void,
+) => {
+  const handleLike = () => {
+    setLoadingLike(true);
+    if (likedByUser !== undefined || likedByUser !== null) {
+      const temp = likedByUser;
+      const tempNum = likesCount;
+      setLikedByUser((prev) => !prev);
+      setLikesCount((prev) => (temp ? prev - 1 : prev + 1));
+
+      postLikeComponent(data.id)
+        .then((response) => {
+          setLoadingLike(false);
+          setLikesCount(response.data.likes_count);
+          setLikedByUser(response.data.liked_by_user);
+        })
+        .catch((error) => {
+          setLoadingLike(false);
+          setLikesCount(tempNum);
+          setLikedByUser(temp);
+          if (error.response.status === 403) {
+            setValidApiKey(false);
+          } else {
+            console.error(error);
+            setErrorData({
+              title: `Error liking ${name}.`,
+              list: [error.response.data.detail],
+            });
+          }
+        });
+    }
+  };
+
+  return {
+    handleLike,
+  };
+};
+
+export default useLikeComponent;

src/frontend/src/components/cardComponent/hooks/use-on-drag-start.tsx

@@ -0,0 +1,34 @@
+import { useCallback } from "react";
+import { createRoot } from "react-dom/client";
+import useFlowsManagerStore from "../../../stores/flowsManagerStore";
+import { storeComponent } from "../../../types/store";
+import DragCardComponent from "../components/dragCardComponent";
+
+const useDragStart = (data: storeComponent) => {
+  const getFlowById = useFlowsManagerStore((state) => state.getFlowById);
+
+  const onDragStart = useCallback(
+    (event) => {
+      let image = <DragCardComponent data={data} />; // Replace with whatever you want here
+
+      const ghost = document.createElement("div");
+      ghost.style.transform = "translate(-10000px, -10000px)";
+      ghost.style.position = "absolute";
+      document.body.appendChild(ghost);
+      event.dataTransfer.setDragImage(ghost, 0, 0);
+
+      const root = createRoot(ghost);
+      root.render(image);
+
+      const flow = getFlowById(data.id);
+      if (flow) {
+        event.dataTransfer.setData("flow", JSON.stringify(data));
+      }
+    },
+    [data],
+  );
+
+  return { onDragStart };
+};
+
+export default useDragStart;

src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { FlowType } from "../../../types/flow";
+
+const usePlaygroundEffect = (
+  currentFlowId: string,
+  playground: boolean,
+  openPlayground: boolean,
+  currentFlow: FlowType | undefined,
+  setNodes: (value: any, value2: boolean) => void,
+  setEdges: (value: any, value2: boolean) => void,
+  cleanFlowPool: () => void,
+) => {
+  useEffect(() => {
+    if (currentFlowId && playground) {
+      if (openPlayground) {
+        setNodes(currentFlow?.data?.nodes ?? [], true);
+        setEdges(currentFlow?.data?.edges ?? [], true);
+      } else {
+        setNodes([], true);
+        setEdges([], true);
+      }
+      cleanFlowPool();
+    }
+  }, [openPlayground]);
+};
+
+export default usePlaygroundEffect;

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

@@ -28,6 +28,11 @@ import { Checkbox } from "../ui/checkbox";
 import { FormControl, FormField } from "../ui/form";
 import Loading from "../ui/loading";
 import DragCardComponent from "./components/dragCardComponent";
+import useDataEffect from "./hooks/use-data-effect";
+import useInstallComponent from "./hooks/use-handle-install";
+import useLikeComponent from "./hooks/use-handle-like";
+import useDragStart from "./hooks/use-on-drag-start";
+import usePlaygroundEffect from "./hooks/use-playground-effect";
 import { convertTestName } from "./utils/convert-test-name";
 
 export default function CollectionCardComponent({
@@ -59,11 +64,9 @@ export default function CollectionCardComponent({
   const isStore = false;
   const [loading, setLoading] = useState(false);
   const [loadingLike, setLoadingLike] = useState(false);
-  const [liked_by_user, setLiked_by_user] = useState(
+  const [likedByUser, setLikedByUser] = useState(data?.liked_by_user ?? false);
-    data?.liked_by_user ?? false,
+  const [likesCount, setLikesCount] = useState(data?.liked_by_count ?? 0);
-  );
+  const [downloadsCount, setDownloadsCount] = useState(
-  const [likes_count, setLikes_count] = useState(data?.liked_by_count ?? 0);
-  const [downloads_count, setDownloads_count] = useState(
     data?.downloads_count ?? 0,
   );
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
@@ -99,115 +102,45 @@ export default function CollectionCardComponent({
     return inputs.length > 0 || outputs.length > 0;
   }
 
-  useEffect(() => {
+  usePlaygroundEffect(
-    if (currentFlowId && playground) {
+    currentFlowId,
-      if (openPlayground) {
+    playground!,
-        setNodes(currentFlow?.data?.nodes ?? [], true);
+    openPlayground,
-        setEdges(currentFlow?.data?.edges ?? [], true);
+    currentFlow,
-      } else {
+    setNodes,
-        setNodes([], true);
+    setEdges,
-        setEdges([], true);
+    cleanFlowPool,
-      }
+  );
-      cleanFlowPool();
-    }
-  }, [openPlayground]);
 
-  useEffect(() => {
+  useDataEffect(data, setLikedByUser, setLikesCount, setDownloadsCount);
-    if (data) {
-      setLiked_by_user(data?.liked_by_user ?? false);
-      setLikes_count(data?.liked_by_count ?? 0);
-      setDownloads_count(data?.downloads_count ?? 0);
-    }
-  }, [data, data.liked_by_count, data.liked_by_user, data.downloads_count]);
 
-  function handleInstall() {
+  const { handleInstall } = useInstallComponent(
-    const temp = downloads_count;
+    data,
-    setDownloads_count((old) => Number(old) + 1);
+    name,
-    setLoading(true);
+    isStore,
-    getComponent(data.id)
+    downloadsCount,
-      .then((res) => {
+    setDownloadsCount,
-        const newFlow = cloneFLowWithParent(res, res.id, data.is_component);
+    setLoading,
-        addFlow(true, newFlow)
+    setSuccessData,
-          .then((id) => {
+    setErrorData,
-            setSuccessData({
+  );
-              title: `${name} ${
-                isStore ? "Downloaded" : "Installed"
-              } Successfully.`,
-            });
-            setLoading(false);
-          })
-          .catch((error) => {
-            setLoading(false);
-            setErrorData({
-              title: `Error ${
-                isStore ? "downloading" : "installing"
-              } the ${name}`,
-              list: [error["response"]["data"]["detail"]],
-            });
-          });
-      })
-      .catch((err) => {
-        setLoading(false);
-        setErrorData({
-          title: `Error ${isStore ? "downloading" : "installing"} the ${name}`,
-          list: [err["response"]["data"]["detail"]],
-        });
-        setDownloads_count(temp);
-      });
-  }
 
-  function handleLike() {
+  const { handleLike } = useLikeComponent(
-    setLoadingLike(true);
+    data,
-    if (liked_by_user !== undefined || liked_by_user !== null) {
+    name,
-      const temp = liked_by_user;
+    setLoadingLike,
-      const tempNum = likes_count;
+    likedByUser,
-      setLiked_by_user((prev) => !prev);
+    likesCount,
-      if (!temp) {
+    setLikedByUser,
-        setLikes_count((prev) => Number(prev) + 1);
+    setLikesCount,
-      } else {
+    setValidApiKey,
-        setLikes_count((prev) => Number(prev) - 1);
+    setErrorData,
-      }
+  );
-      postLikeComponent(data.id)
-        .then((response) => {
-          setLoadingLike(false);
-          setLikes_count(response.data.likes_count);
-          setLiked_by_user(response.data.liked_by_user);
-        })
-        .catch((error) => {
-          setLoadingLike(false);
-          setLikes_count(tempNum);
-          setLiked_by_user(temp);
-          if (error.response.status === 403) {
-            setValidApiKey(false);
-          } else {
-            console.error(error);
-            setErrorData({
-              title: `Error liking ${name}.`,
-              list: [error["response"]["data"]["detail"]],
-            });
-          }
-        });
-    }
-  }
 
   const isSelectedCard =
     selectedFlowsComponentsCards?.includes(data?.id) ?? false;
 
-  function onDragStart(event: React.DragEvent<any>) {
+  const { onDragStart } = useDragStart(data);
-    let image: JSX.Element = <DragCardComponent data={data} />; // <== whatever you want here
-
-    var ghost = document.createElement("div");
-    ghost.style.transform = "translate(-10000px, -10000px)";
-    ghost.style.position = "absolute";
-    document.body.appendChild(ghost);
-    event.dataTransfer.setDragImage(ghost, 0, 0);
-    const root = createRoot(ghost);
-    root.render(image);
-    const flow = getFlowById(data.id);
-    if (flow) {
-      event.dataTransfer.setData("flow", JSON.stringify(data));
-    }
-  }
 
   return (
     <>
@@ -264,7 +197,7 @@ export default function CollectionCardComponent({
                       <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
                         <IconComponent name="Heart" className={cn("h-4 w-4")} />
                         <span data-testid={`likes-${data.name}`}>
-                          {likes_count ?? 0}
+                          {likesCount ?? 0}
                         </span>
                       </span>
                     </ShadTooltip>
@@ -275,7 +208,7 @@ export default function CollectionCardComponent({
                           className="h-4 w-4"
                         />
                         <span data-testid={`downloads-${data.name}`}>
-                          {downloads_count ?? 0}
+                          {downloadsCount ?? 0}
                         </span>
                       </span>
                     </ShadTooltip>
@@ -324,20 +257,7 @@ export default function CollectionCardComponent({
                   )}
                 </span>
               )}
-              <div className="flex w-full flex-1 flex-wrap gap-2">
+              <div className="flex w-full flex-1 flex-wrap gap-2"></div>
-                {/* {data.tags &&
-                  data.tags.length > 0 &&
-                  data.tags.map((tag, index) => (
-                    <Badge
-                      key={index}
-                      variant="outline"
-                      size="xq"
-                      className="text-muted-foreground"
-                    >
-                      {tag.name}
-                    </Badge>
-                  ))} */}
-              </div>
             </div>
 
             <CardDescription className="pb-2 pt-2">
@@ -457,7 +377,7 @@ export default function CollectionCardComponent({
                           name="Heart"
                           className={cn(
                             "h-5 w-5",
-                            liked_by_user
+                            likedByUser
                               ? "fill-destructive stroke-destructive"
                               : "",
                             !authorized ? "text-ring" : "",

src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx

@@ -9,7 +9,10 @@ import useFlowsManagerStore from "../../../stores/flowsManagerStore";
 import { useFolderStore } from "../../../stores/foldersStore";
 import { addVersionToDuplicates } from "../../../utils/reactflowUtils";
 
-const useFileDrop = (folderId, folderChangeCallback) => {
+const useFileDrop = (
+  folderId: string,
+  folderChangeCallback: (folderId: string) => void,
+) => {
   const setFolderDragging = useFolderStore((state) => state.setFolderDragging);
   const setFolderIdDragging = useFolderStore(
     (state) => state.setFolderIdDragging,

src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-auto-resize-text-area.tsx

@@ -1,6 +1,9 @@
 import { useEffect } from "react";
 
-const useAutoResizeTextArea = (value, inputRef) => {
+const useAutoResizeTextArea = (
+  value: string,
+  inputRef: React.RefObject<HTMLInputElement>,
+) => {
   useEffect(() => {
     if (inputRef.current && inputRef.current.scrollHeight! !== 0) {
       inputRef.current.style!.height = "inherit"; // Reset the height

src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx

@@ -7,10 +7,10 @@ import {
 import useFileUpload from "./use-file-upload";
 
 const useDragAndDrop = (
-  setIsDragging,
+  setIsDragging: (value: boolean) => void,
-  setFiles,
+  setFiles: (value: any) => void,
-  currentFlowId,
+  currentFlowId: string,
-  setErrorData,
+  setErrorData: (value: any) => void,
 ) => {
   const dragOver = (e) => {
     e.preventDefault();

src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-focus-unlock.tsx

@@ -1,6 +1,9 @@
 import { useEffect } from "react";
 
-const useFocusOnUnlock = (lockChat, inputRef) => {
+const useFocusOnUnlock = (
+  lockChat: boolean,
+  inputRef: React.RefObject<HTMLInputElement>,
+) => {
   useEffect(() => {
     if (!lockChat && inputRef.current) {
       inputRef.current.focus();

src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx

@@ -1,3 +1,4 @@
+import { AxiosResponse } from "axios";
 import { useEffect } from "react";
 import ShortUniqueId from "short-unique-id";
 import {
@@ -6,9 +7,18 @@ import {
   SN_ERROR_TEXT,
 } from "../../../../../../constants/constants";
 import useAlertStore from "../../../../../../stores/alertStore";
+import { UploadFileTypeAPI } from "../../../../../../types/api";
 import useFileUpload from "./use-file-upload";
 
-const useUpload = (uploadFile, currentFlowId, setFiles, lockChat) => {
+const useUpload = (
+  uploadFile: (
+    file: File,
+    id: string,
+  ) => Promise<AxiosResponse<UploadFileTypeAPI>>,
+  currentFlowId: string,
+  setFiles: any,
+  lockChat: boolean,
+) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   useEffect(() => {
     const handlePaste = (event: ClipboardEvent): void => {

src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx

@@ -2,9 +2,10 @@ import { ColDef, ValueGetterParams } from "ag-grid-community";
 import { useMemo } from "react";
 import TableNodeCellRender from "../../../components/tableComponent/components/tableNodeCellRender";
 import TableToggleCellRender from "../../../components/tableComponent/components/tableToggleCellRender";
+import { NodeDataType } from "../../../types/flow";
 
 const useColumnDefs = (
-  myData: any,
+  myData: NodeDataType,
   handleOnNewValue: (newValue: any, name: string) => void,
   handleOnChangeDb: (value: boolean, key: string) => void,
   changeAdvanced: (n: string) => void,

src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx

@@ -1,14 +1,12 @@
 import { useMemo } from "react";
 import { LANGFLOW_SUPPORTED_TYPES } from "../../../constants/constants";
-import { TemplateVariableType } from "../../../types/api";
+import { NodeDataType } from "../../../types/flow";
 
-const useRowData = (myData, open) => {
+const useRowData = (myData: NodeDataType, open: boolean) => {
   const rowData = useMemo(() => {
     return Object.keys(myData.node!.template)
       .filter((key: string) => {
-        const templateParam = myData.node!.template[
+        const templateParam = myData.node!.template[key] as any;
-          key
-        ] as TemplateVariableType;
         return (
           key.charAt(0) !== "_" &&
           templateParam.show &&
@@ -20,9 +18,7 @@ const useRowData = (myData, open) => {
         );
       })
       .map((key: string) => {
-        const templateParam = myData.node!.template[
+        const templateParam = myData.node!.template[key] as any;
-          key
-        ] as TemplateVariableType;
         return {
           ...templateParam,
           key: key,

src/frontend/src/modals/editNodeModal/index.tsx

@@ -16,13 +16,11 @@ const EditNodeModal = forwardRef(
       nodeLength,
       open,
       setOpen,
-      //      setOpenWDoubleClick,
       data,
     }: {
       nodeLength: number;
       open: boolean;
       setOpen: (open: boolean) => void;
-      //      setOpenWDoubleClick: (open: boolean) => void;
       data: NodeDataType;
     },
     ref,

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

@@ -0,0 +1,58 @@
+import React from "react";
+import { Link, useNavigate } from "react-router-dom";
+import CollectionCardComponent from "../../../../../../components/cardComponent";
+import IconComponent from "../../../../../../components/genericIconComponent";
+import { Button } from "../../../../../../components/ui/button";
+const CollectionCard = ({ item, type, isLoading, control }) => {
+  const navigate = useNavigate();
+  const isComponent = item.is_component ?? false;
+  const editFlowLink = `/flow/${item.id}`;
+  const editFlowButtonTestId = `edit-flow-button-${item.id}`;
+
+  const handleClick = () => {
+    if (!isComponent) {
+      navigate(editFlowLink);
+    }
+  };
+
+  const renderButton = () => {
+    if (!isComponent) {
+      return (
+        <Link to={editFlowLink}>
+          <Button
+            tabIndex={-1}
+            variant="outline"
+            size="sm"
+            className="whitespace-nowrap"
+            data-testid={editFlowButtonTestId}
+          >
+            <IconComponent
+              name="ExternalLink"
+              className="main-page-nav-button select-none"
+            />
+            Edit Flow
+          </Button>
+        </Link>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <CollectionCardComponent
+      is_component={type === "component"}
+      data={{
+        is_component: isComponent,
+        ...item,
+      }}
+      disabled={isLoading}
+      data-testid={editFlowButtonTestId}
+      button={renderButton()!}
+      onClick={!isComponent ? handleClick : undefined}
+      playground={!isComponent}
+      control={control}
+    />
+  );
+};
+
+export default CollectionCard;

src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-delete-multiple.tsx

@@ -1,15 +1,15 @@
 import { useCallback } from "react";
 
 const useDeleteMultipleFlows = (
-  selectedFlowsComponentsCards,
+  selectedFlowsComponentsCards: string[],
-  removeFlow,
+  removeFlow: (selectedFlowsComponentsCards: string[]) => Promise<void>,
-  resetFilter,
+  resetFilter: () => void,
-  getFoldersApi,
+  getFoldersApi: (refetch?: boolean) => Promise<void>,
-  folderId,
+  folderId: string | undefined,
-  myCollectionId,
+  myCollectionId: string,
-  getFolderById,
+  getFolderById: (id: string) => void,
-  setSuccessData,
+  setSuccessData: (data: { title: string }) => void,
-  setErrorData,
+  setErrorData: (data: { title: string; list: string[] }) => void,
 ) => {
   const handleDeleteMultiple = useCallback(() => {
     removeFlow(selectedFlowsComponentsCards)

src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-description-modal.tsx

@@ -1,6 +1,9 @@
 import { useMemo } from "react";
 
-const useDescriptionModal = (selectedFlowsComponentsCards, type) => {
+const useDescriptionModal = (
+  selectedFlowsComponentsCards: string[] | undefined,
+  type: string | undefined,
+) => {
   const getDescriptionModal = useMemo(() => {
     const getTypeLabel = (type) => {
       const labels = {

src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-filtered-flows.tsx

@@ -1,10 +1,11 @@
 import cloneDeep from "lodash/cloneDeep";
 import { useEffect } from "react";
+import { FlowType } from "../../../../../types/flow";
 
 const useFilteredFlows = (
-  flowsFromFolder,
+  flowsFromFolder: FlowType[],
-  searchFlowsComponents,
+  searchFlowsComponents: string,
-  setAllFlows,
+  setAllFlows: (value: any[]) => void,
 ) => {
   useEffect(() => {
     const newFlows = cloneDeep(flowsFromFolder || []);

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

@@ -1,18 +1,31 @@
 import { useCallback } from "react";
+import { XYPosition } from "reactflow";
+import { FlowType } from "../../../../../types/flow";
 
 const useDuplicateFlows = (
-  selectedFlowsComponentsCards,
+  selectedFlowsComponentsCards: string[],
-  addFlow,
+  addFlow: (
-  allFlows,
+    newProject: boolean,
-  resetFilter,
+    flow?: FlowType,
-  getFoldersApi,
+    override?: boolean,
-  folderId,
+    position?: XYPosition,
-  myCollectionId,
+    fromDragAndDrop?: boolean,
-  getFolderById,
+  ) => Promise<string | undefined>,
-  setSuccessData,
+  allFlows: any[],
-  setSelectedFlowsComponentsCards,
+  resetFilter: () => void,
-  handleSelectAll,
+  getFoldersApi: (
-  cardTypes,
+    refetch?: boolean,
+    startupApplication?: boolean,
+  ) => Promise<void>,
+  folderId: string,
+  myCollectionId: string,
+  getFolderById: (id: string) => void,
+  setSuccessData: (data: { title: string }) => void,
+  setSelectedFlowsComponentsCards: (
+    selectedFlowsComponentsCards: string[],
+  ) => void,
+  handleSelectAll: (select: boolean) => void,
+  cardTypes: string,
 ) => {
   const handleDuplicate = useCallback(() => {
     Promise.all(

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

@@ -1,15 +1,18 @@
 import { useCallback } from "react";
+import { FlowType } from "../../../../../types/flow";
 
 const useExportFlows = (
-  selectedFlowsComponentsCards,
+  selectedFlowsComponentsCards: string[],
-  allFlows,
+  allFlows: Array<FlowType>,
-  downloadFlow,
+  downloadFlow: (flow: any, name: string, description: string) => void,
-  removeApiKeys,
+  removeApiKeys: (flow: any) => any,
-  version,
+  version: string,
-  setSuccessData,
+  setSuccessData: (data: { title: string }) => void,
-  setSelectedFlowsComponentsCards,
+  setSelectedFlowsComponentsCards: (
-  handleSelectAll,
+    selectedFlowsComponentsCards: string[],
-  cardTypes,
+  ) => void,
+  handleSelectAll: (select: boolean) => void,
+  cardTypes: string,
 ) => {
   const handleExport = useCallback(() => {
     selectedFlowsComponentsCards.forEach((selectedFlowId) => {

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

@@ -1,6 +1,11 @@
 import { useCallback } from "react";
+import { FlowType } from "../../../../../types/flow";
 
-const useSelectAll = (flowsFromFolder, getValues, setValue) => {
+const useSelectAll = (
+  flowsFromFolder: FlowType[],
+  getValues: () => Record<string, boolean>,
+  setValue: (key: string, value: boolean) => void,
+) => {
   const handleSelectAll = useCallback(
     (select) => {
       const flowsFromFolderIds = flowsFromFolder?.map((f) => f.id);

src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-select-options-change.tsx

@@ -1,15 +1,15 @@
 import { useCallback } from "react";
 
 const useSelectOptionsChange = (
-  selectedFlowsComponentsCards,
+  selectedFlowsComponentsCards: string[] | undefined,
-  setErrorData,
+  setErrorData: (data: { title: string; list: string[] }) => void,
-  setOpenDelete,
+  setOpenDelete: (value: boolean) => void,
-  handleDuplicate,
+  handleDuplicate: () => void,
-  handleExport,
+  handleExport: () => void,
 ) => {
   const handleSelectOptionsChange = useCallback(
     (action) => {
-      const hasSelected = selectedFlowsComponentsCards?.length > 0;
+      const hasSelected = selectedFlowsComponentsCards?.length! > 0;
       if (!hasSelected) {
         setErrorData({
           title: "No items selected",

src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-selected-flows.tsx

@@ -1,8 +1,10 @@
 import { useEffect } from "react";
 
 const useSelectedFlows = (
-  entireFormValues,
+  entireFormValues: Record<string, boolean> | undefined,
-  setSelectedFlowsComponentsCards,
+  setSelectedFlowsComponentsCards: (
+    selectedFlowsComponentsCards: string[],
+  ) => void,
 ) => {
   useEffect(() => {
     if (!entireFormValues || Object.keys(entireFormValues).length === 0) return;

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

@@ -19,6 +19,7 @@ import { getNameByType } from "../../utils/get-name-by-type";
 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";
@@ -61,7 +62,6 @@ export default function ComponentsComponent({
   const [handleFileDrop] = useFileDrop(uploadFlow, type)!;
   const [pageSize, setPageSize] = useState(20);
   const [pageIndex, setPageIndex] = useState(1);
-  const navigate = useNavigate();
   const location = useLocation();
   const all: FlowType[] = sortFlows(allFlows, type);
   const start = (pageIndex - 1) * pageSize;
@@ -94,7 +94,7 @@ export default function ComponentsComponent({
     getFolderById(folderId ? folderId : myCollectionId);
   }, [location]);
 
-  useFilteredFlows(flowsFromFolder, searchFlowsComponents, setAllFlows);
+  useFilteredFlows(flowsFromFolder!, searchFlowsComponents, setAllFlows);
 
   const resetFilter = () => {
     setPageIndex(1);
@@ -107,7 +107,7 @@ export default function ComponentsComponent({
   const methods = useForm();
 
   const { handleSelectAll } = useSelectAll(
-    flowsFromFolder,
+    flowsFromFolder!,
     getValues,
     setValue,
   );
@@ -119,7 +119,7 @@ export default function ComponentsComponent({
     resetFilter,
     getFoldersApi,
     folderId,
-    myCollectionId,
+    myCollectionId!,
     getFolderById,
     setSuccessData,
     setSelectedFlowsComponentsCards,
@@ -155,7 +155,7 @@ export default function ComponentsComponent({
     resetFilter,
     getFoldersApi,
     folderId,
-    myCollectionId,
+    myCollectionId!,
     getFolderById,
     setSuccessData,
     setErrorData,
@@ -205,43 +205,10 @@ export default function ComponentsComponent({
                     {data?.map((item) => (
                       <FormProvider {...methods} key={item.id}>
                         <form>
-                          <CollectionCardComponent
+                          <CollectionCard
-                            is_component={type === "component"}
+                            item={item}
-                            data={{
+                            type={type}
-                              is_component: item.is_component ?? false,
+                            isLoading={isLoading}
-                              ...item,
-                            }}
-                            disabled={isLoading}
-                            data-testid={"edit-flow-button-" + item.id}
-                            button={
-                              !item.is_component ? (
-                                <Link to={"/flow/" + item.id}>
-                                  <Button
-                                    tabIndex={-1}
-                                    variant="outline"
-                                    size="sm"
-                                    className="whitespace-nowrap"
-                                    data-testid={"edit-flow-button-" + item.id}
-                                  >
-                                    <IconComponent
-                                      name="ExternalLink"
-                                      className="main-page-nav-button select-none"
-                                    />
-                                    Edit Flow
-                                  </Button>
-                                </Link>
-                              ) : (
-                                <></>
-                              )
-                            }
-                            onClick={
-                              !item.is_component
-                                ? () => {
-                                    navigate("/flow/" + item.id);
-                                  }
-                                : undefined
-                            }
-                            playground={!item.is_component}
                             control={control}
                           />
                         </form>

src/frontend/src/pages/MainPage/hooks/use-delete-folder.tsx

@@ -2,7 +2,7 @@ import useAlertStore from "../../../stores/alertStore";
 import { useFolderStore } from "../../../stores/foldersStore";
 import { deleteFolder, getFolderById } from "../services";
 
-const useDeleteFolder = ({ navigate }) => {
+const useDeleteFolder = ({ navigate }: { navigate: (url: string) => void }) => {
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const folderToEdit = useFolderStore((state) => state.folderToEdit);

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

@@ -1,7 +1,26 @@
+import { XYPosition } from "reactflow";
 import { CONSOLE_ERROR_MSG } from "../../../constants/alerts_constants";
 import useAlertStore from "../../../stores/alertStore";
 
-const useDropdownOptions = ({ uploadFlow, navigate, is_component }) => {
+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 handleImportFromJSON = () => {

src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx

@@ -1,6 +1,12 @@
 import { getApiKey } from "../../../../../controllers/API";
+import { Users } from "../../../../../types/api";
 
-const useApiKeys = (userData, setLoadingKeys, keysList, setUserId) => {
+const useApiKeys = (
+  userData: Users | null,
+  setLoadingKeys: (load: boolean) => void,
+  keysList: React.MutableRefObject<never[]>,
+  setUserId: (userId: string) => void,
+) => {
   const fetchApiKeys = () => {
     setLoadingKeys(true);
     getApiKey()

src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx

@@ -7,10 +7,10 @@ import {
 import { deleteApiKey } from "../../../../../controllers/API";
 
 const useDeleteApiKeys = (
-  selectedRows,
+  selectedRows: string[],
-  resetFilter,
+  resetFilter: () => void,
-  setSuccessData,
+  setSuccessData: (data: { title: string }) => void,
-  setErrorData,
+  setErrorData: (data: { title: string; list: string[] }) => void,
 ) => {
   const handleDeleteKey = () => {
     Promise.all(selectedRows.map((selectedRow) => deleteApiKey(selectedRow)))

src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-preload-images.tsx

@@ -4,7 +4,10 @@ import {
   BASE_URL_API,
 } from "../../../../../../../../../constants/constants";
 
-const usePreloadImages = (profilePictures, setImagesLoaded) => {
+const usePreloadImages = (
+  profilePictures: { [key: string]: string[] },
+  setImagesLoaded: (value: boolean) => void,
+) => {
   const preloadImages = async (imageUrls) => {
     return Promise.all(
       imageUrls.map(

src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-password.tsx

@@ -5,8 +5,13 @@ import {
   SAVE_SUCCESS_ALERT,
 } from "../../../../constants/alerts_constants";
 import { resetPassword } from "../../../../controllers/API";
+import { Users } from "../../../../types/api";
 
-const usePatchPassword = (userData, setSuccessData, setErrorData) => {
+const usePatchPassword = (
+  userData: Users | null,
+  setSuccessData: (data: { title: string; list?: string[] }) => void,
+  setErrorData: (data: { title: string; list: string[] }) => void,
+) => {
   const handlePatchPassword = async (password, cnfPassword, handleInput) => {
     if (password !== cnfPassword) {
       setErrorData({
@@ -16,7 +21,7 @@ const usePatchPassword = (userData, setSuccessData, setErrorData) => {
       return;
     }
     try {
-      if (password !== "") await resetPassword(userData.id, { password });
+      if (password !== "") await resetPassword(userData!.id, { password });
       handleInput({ target: { name: "password", value: "" } });
       handleInput({ target: { name: "cnfPassword", value: "" } });
       setSuccessData({ title: SAVE_SUCCESS_ALERT });

src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-profile-picture.tsx

@@ -4,21 +4,22 @@ import {
   SAVE_SUCCESS_ALERT,
 } from "../../../../constants/alerts_constants";
 import { updateUser } from "../../../../controllers/API";
+import { Users } from "../../../../types/api";
 
 const usePatchProfilePicture = (
-  setSuccessData,
+  setSuccessData: (data: { title: string; list?: string[] }) => void,
-  setErrorData,
+  setErrorData: (data: { title: string; list: string[] }) => void,
-  currentUserData,
+  currentUserData: Users | null,
-  setUserData,
+  setUserData: (data: any) => void,
 ) => {
   const handlePatchProfilePicture = async (profile_picture) => {
     try {
       if (profile_picture !== "") {
-        await updateUser(currentUserData.id, {
+        await updateUser(currentUserData!.id, {
           profile_image: profile_picture,
         });
         let newUserData = cloneDeep(currentUserData);
-        newUserData.profile_image = profile_picture;
+        newUserData!.profile_image = profile_picture;
         setUserData(newUserData);
       }
       setSuccessData({ title: SAVE_SUCCESS_ALERT });

src/frontend/src/pages/SettingsPage/pages/hooks/use-save-key.tsx

@@ -7,11 +7,11 @@ import { AuthContext } from "../../../../contexts/authContext";
 import { addApiKeyStore } from "../../../../controllers/API";
 
 const useSaveKey = (
-  setSuccessData,
+  setSuccessData: (data: { title: string }) => void,
-  setErrorData,
+  setErrorData: (data: { title: string; list: string[] }) => void,
-  setHasApiKey,
+  setHasApiKey: (hasApiKey: boolean) => void,
-  setValidApiKey,
+  setValidApiKey: (validApiKey: boolean) => void,
-  setLoadingApiKey,
+  setLoadingApiKey: (loadingApiKey: boolean) => void,
 ) => {
   const { storeApiKey } = useContext(AuthContext);
 

src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx

@@ -1,6 +1,9 @@
 import { useEffect } from "react";
 
-const useScrollToElement = (scrollId, setCurrentFlowId) => {
+const useScrollToElement = (
+  scrollId: string | null | undefined,
+  setCurrentFlowId: (currentFlowId: string) => void,
+) => {
   useEffect(() => {
     const element = document.getElementById(scrollId ?? "null");
     if (element) {

src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx

@@ -1,8 +1,11 @@
+import { ColDef, ColGroupDef } from "ag-grid-community";
 import { useEffect } from "react";
 import { getMessagesTable } from "../../../../../controllers/API";
 import { useMessagesStore } from "../../../../../stores/messagesStore";
 
-const useMessagesTable = (setColumns) => {
+const useMessagesTable = (
+  setColumns: (data: Array<ColDef | ColGroupDef>) => void,
+) => {
   const setMessages = useMessagesStore((state) => state.setMessages);
   useEffect(() => {
     const fetchData = async () => {

src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx

@@ -2,10 +2,10 @@ import { deleteMessagesFn } from "../../../../../controllers/API";
 import { useMessagesStore } from "../../../../../stores/messagesStore";
 
 const useRemoveMessages = (
-  setSelectedRows,
+  setSelectedRows: (data: number[]) => void,
-  setSuccessData,
+  setSuccessData: (data: { title: string }) => void,
-  setErrorData,
+  setErrorData: (data: { title: string }) => void,
-  selectedRows,
+  selectedRows: number[],
 ) => {
   const deleteMessages = useMessagesStore((state) => state.removeMessages);
 

src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx

@@ -2,7 +2,10 @@ import { updateMessageApi } from "../../../../../controllers/API";
 import { useMessagesStore } from "../../../../../stores/messagesStore";
 import { Message } from "../../../../../types/messages";
 
-const useUpdateMessage = (setSuccessData, setErrorData) => {
+const useUpdateMessage = (
+  setSuccessData: (data: { title: string; list?: string[] }) => void,
+  setErrorData: (data: { title: string; list?: string[] }) => void,
+) => {
   const updateMessage = useMessagesStore((state) => state.updateMessage);
 
   const handleUpdate = async (data: Message) => {