code format

src/frontend/src/App.tsx

@@ -17,12 +17,12 @@ import {
 } from "./constants/constants";
 import { AuthContext } from "./contexts/authContext";
 import { locationContext } from "./contexts/locationContext";
-import { getHealth, getRepoStars, getVersion } from "./controllers/API";
+import { getHealth } from "./controllers/API";
 import Router from "./routes";
 import useAlertStore from "./stores/alertStore";
-import { useTypesStore } from "./stores/typesStore";
 import { useDarkStore } from "./stores/darkStore";
 import useFlowsManagerStore from "./stores/flowsManagerStore";
+import { useTypesStore } from "./stores/typesStore";
 
 export default function App() {
   let { setCurrent, setShowSideBar, setIsStackedOpen } =
@@ -147,7 +147,6 @@ export default function App() {
         refreshFlows();
       });
     }
-
   }, [isAuthenticated]);
 
   useEffect(() => {

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

@@ -1,11 +1,5 @@
 import { cloneDeep } from "lodash";
-import React, {
+import React, { ReactNode, useEffect, useRef, useState } from "react";
-  ReactNode,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
 import { Handle, Position } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
@@ -29,6 +23,8 @@ import {
 import { postCustomComponentUpdate } from "../../../../controllers/API";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
+import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { useTypesStore } from "../../../../stores/typesStore";
 import { APIClassType } from "../../../../types/api";
 import { ParameterComponentType } from "../../../../types/components";
 import { NodeDataType } from "../../../../types/flow";
@@ -45,8 +41,6 @@ import {
   nodeNames,
 } from "../../../../utils/styleUtils";
 import { classNames, groupByFamily } from "../../../../utils/utils";
-import { useTypesStore } from "../../../../stores/typesStore";
-import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 
 export default function ParameterComponent({
   left,
@@ -300,7 +294,7 @@ export default function ParameterComponent({
   ) : (
     <div
       ref={ref}
-      className="mt-1 flex w-full flex-wrap items-center justify-between relative bg-muted px-5 py-2"
+      className="relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
     >
       <>
         <div

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

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { NodeToolbar } from "reactflow";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import Tooltip from "../../components/TooltipComponent";
@@ -9,14 +9,14 @@ import { priorityFields } from "../../constants/constants";
 import { useSSE } from "../../contexts/SSEContext";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
 import useFlowStore from "../../stores/flowStore";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { useTypesStore } from "../../stores/typesStore";
 import { validationStatusType } from "../../types/components";
 import { NodeDataType } from "../../types/flow";
 import { handleKeyDown, scapedJSONStringfy } from "../../utils/reactflowUtils";
 import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
 import { classNames, cn, getFieldTitle } from "../../utils/utils";
 import ParameterComponent from "./components/parameterComponent";
-import { useTypesStore } from "../../stores/typesStore";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 
 export default function GenericNode({
   data,

src/frontend/src/components/authAdminGuard/index.tsx

@@ -1,15 +1,10 @@
-import { useContext, useEffect } from "react";
+import { useContext } from "react";
 import { Navigate } from "react-router-dom";
 import { AuthContext } from "../../contexts/authContext";
 
 export const ProtectedAdminRoute = ({ children }) => {
-  const {
+  const { isAdmin, isAuthenticated, logout, userData, autoLogin } =
-    isAdmin,
+    useContext(AuthContext);
-    isAuthenticated,
-    logout,
-    userData,
-    autoLogin,
-  } = useContext(AuthContext);
 
   if (!isAuthenticated) {
     logout();

src/frontend/src/components/authGuard/index.tsx

@@ -3,8 +3,7 @@ import { Navigate } from "react-router-dom";
 import { AuthContext } from "../../contexts/authContext";
 
 export const ProtectedRoute = ({ children }) => {
-  const { isAuthenticated, logout} =
+  const { isAuthenticated, logout } = useContext(AuthContext);
-    useContext(AuthContext);
   if (!isAuthenticated) {
     logout();
     return <Navigate to="/login" replace />;

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

@@ -1,7 +1,8 @@
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { getComponent, postLikeComponent } from "../../controllers/API";
 import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
 import useAlertStore from "../../stores/alertStore";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { storeComponent } from "../../types/store";
 import cloneFLowWithParent from "../../utils/storeUtils";
@@ -17,7 +18,6 @@ import {
   CardHeader,
   CardTitle,
 } from "../ui/card";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 
 export default function CollectionCardComponent({
   data,

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

@@ -1,5 +1,5 @@
 import { Transition } from "@headlessui/react";
-import { useContext, useState } from "react";
+import { useState } from "react";
 import Loading from "../../../components/ui/loading";
 import { useSSE } from "../../../contexts/SSEContext";
 import { postBuildInit } from "../../../controllers/API";
@@ -9,7 +9,6 @@ import useAlertStore from "../../../stores/alertStore";
 import useFlowStore from "../../../stores/flowStore";
 import useFlowsManagerStore from "../../../stores/flowsManagerStore";
 import { parsedDataType } from "../../../types/components";
-import { FlowState } from "../../../types/tabs";
 import { validateNodes } from "../../../utils/reactflowUtils";
 import RadialProgressComponent from "../../RadialProgress";
 import IconComponent from "../../genericIconComponent";

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

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useNodes } from "reactflow";
 import { ChatType } from "../../types/chat";
 import BuildTrigger from "./buildTrigger";
@@ -8,15 +8,17 @@ import * as _ from "lodash";
 import { getBuildStatus } from "../../controllers/API";
 import FormModal from "../../modals/formModal";
 import useFlowStore from "../../stores/flowStore";
-import { NodeType } from "../../types/flow";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { NodeType } from "../../types/flow";
 
 export default function Chat({ flow }: ChatType): JSX.Element {
   const [open, setOpen] = useState(false);
   const [canOpen, setCanOpen] = useState(false);
   const isBuilt = useFlowStore((state) => state.isBuilt);
   const setIsBuilt = useFlowStore((state) => state.setIsBuilt);
-  const currentFlowState = useFlowsManagerStore((state) => state.currentFlowState);
+  const currentFlowState = useFlowsManagerStore(
+    (state) => state.currentFlowState
+  );
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -53,9 +55,7 @@ export default function Chat({ flow }: ChatType): JSX.Element {
     const currentNodes = nodes.map((node: NodeType) =>
       _.cloneDeep(node.data.node?.template)
     );
-    if (
+    if (JSON.stringify(prevNodes) !== JSON.stringify(currentNodes)) {
-      JSON.stringify(prevNodes) !== JSON.stringify(currentNodes)
-    ) {
       setIsBuilt(false);
     }
     if (

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

@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import { useState } from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -49,9 +49,7 @@ export const MenuBar = (): JSX.Element => {
           <DropdownMenuTrigger asChild>
             <Button asChild variant="primary" size="sm">
               <div className="header-menu-bar-display">
-                <div className="header-menu-flow-name">
+                <div className="header-menu-flow-name">{currentFlow.name}</div>
-                  {currentFlow.name}
-                </div>
                 <IconComponent name="ChevronDown" className="h-4 w-4" />
               </div>
             </Button>

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

@@ -166,7 +166,10 @@ export default function Header(): JSX.Element {
                   <button
                     className={
                       "h-7 w-7 rounded-full focus-visible:outline-0 " +
-                      (userData?.profile_image ?? gradients[parseInt(userData?.id ?? "", 30) % gradients.length])
+                      (userData?.profile_image ??
+                        gradients[
+                          parseInt(userData?.id ?? "", 30) % gradients.length
+                        ])
                     }
                   />
                 </DropdownMenuTrigger>

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

@@ -1,9 +1,9 @@
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { uploadFile } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { FileComponentType } from "../../types/components";
 import IconComponent from "../genericIconComponent";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 
 export default function InputFileComponent({
   value,

src/frontend/src/components/intComponent/index.tsx

@@ -1,6 +1,9 @@
 import { useEffect } from "react";
 import { IntComponentType } from "../../types/components";
-import { handleKeyDown, handleOnlyIntegerInput } from "../../utils/reactflowUtils";
+import {
+  handleKeyDown,
+  handleOnlyIntegerInput,
+} from "../../utils/reactflowUtils";
 import { Input } from "../ui/input";
 
 export default function IntComponent({

src/frontend/src/components/ui/checkbox.tsx

@@ -26,7 +26,13 @@ const Checkbox = React.forwardRef<
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-const CheckBoxDiv = (({ className = "", checked }: {className?: string, checked?: boolean}) => (
+const CheckBoxDiv = ({
+  className = "",
+  checked,
+}: {
+  className?: string;
+  checked?: boolean;
+}) => (
   <div
     className={cn(
       className,
@@ -40,6 +46,6 @@ const CheckBoxDiv = (({ className = "", checked }: {className?: string, checked?
       </div>
     )}
   </div>
-));
+);
 
 export { CheckBoxDiv, Checkbox };

src/frontend/src/contexts/authContext.tsx

@@ -35,7 +35,7 @@ export function AuthProvider({ children }): React.ReactElement {
   );
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(
     !!cookies.get("refresh_tkn_lflw") && !!cookies.get("access_tkn_lflw")
-    );
+  );
   const [isAdmin, setIsAdmin] = useState<boolean>(false);
   const [userData, setUserData] = useState<Users | null>(null);
   const [autoLogin, setAutoLogin] = useState<boolean>(false);
@@ -81,7 +81,7 @@ export function AuthProvider({ children }): React.ReactElement {
       });
   }, [setUserData, setLoading, autoLogin, setIsAdmin]);
 
-  function getUser(){
+  function getUser() {
     getLoggedUser()
       .then((user) => {
         setUserData(user);
@@ -101,8 +101,9 @@ export function AuthProvider({ children }): React.ReactElement {
     setAccessToken(newAccessToken);
     setRefreshToken(refreshToken);
     setIsAuthenticated(true);
-    setTimeout(() => {getUser();}, 500)
+    setTimeout(() => {
-    
+      getUser();
+    }, 500);
   }
 
   function logout() {

src/frontend/src/contexts/index.tsx

@@ -17,9 +17,7 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
             <ReactFlowProvider>
               <LocationProvider>
                 <ApiInterceptor />
-                <SSEProvider>
+                <SSEProvider>{children}</SSEProvider>
-                  {children}
-                </SSEProvider>
               </LocationProvider>
             </ReactFlowProvider>
           </TooltipProvider>

src/frontend/src/contexts/typesContext.tsx

@@ -1,16 +1,9 @@
 import _ from "lodash";
-import {
+import { createContext, ReactNode, useState } from "react";
-  createContext,
-  ReactNode,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
 import { getAll, getHealth } from "../controllers/API";
 import useAlertStore from "../stores/alertStore";
 import { APIKindType } from "../types/api";
 import { typesContextType } from "../types/typesContext";
-import { AuthContext } from "./authContext";
 
 //context to share types adn functions from nodes to flow
 

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

@@ -58,7 +58,12 @@ const ApiModal = forwardRef(
       tweak.current,
       currentFlowState
     );
-    const curl_code = getCurlCode(flow, autoLogin, tweak.current, currentFlowState);
+    const curl_code = getCurlCode(
+      flow,
+      autoLogin,
+      tweak.current,
+      currentFlowState
+    );
     const pythonCode = getPythonCode(flow, tweak.current, currentFlowState);
     const widgetCode = getWidgetCode(flow, autoLogin, currentFlowState);
     const tweaksCode = buildTweaks(flow);
@@ -173,7 +178,12 @@ const ApiModal = forwardRef(
         tweak.current,
         currentFlowState
       );
-      const curl_code = getCurlCode(flow, autoLogin, tweak.current, currentFlowState);
+      const curl_code = getCurlCode(
+        flow,
+        autoLogin,
+        tweak.current,
+        currentFlowState
+      );
       const pythonCode = getPythonCode(flow, tweak.current, currentFlowState);
       const widgetCode = getWidgetCode(flow, autoLogin, currentFlowState);
 

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

@@ -1,14 +1,14 @@
-import { ReactNode, forwardRef, useContext, useEffect, useState } from "react";
+import { ReactNode, forwardRef, useEffect, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
 import { EXPORT_DIALOG_SUBTITLE } from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
-import { downloadFlow, removeApiKeys } from "../../utils/reactflowUtils";
-import BaseModal from "../baseModal";
 import { useDarkStore } from "../../stores/darkStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { downloadFlow, removeApiKeys } from "../../utils/reactflowUtils";
+import BaseModal from "../baseModal";
 
 const ExportModal = forwardRef(
   (props: { children: ReactNode }, ref): JSX.Element => {

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

@@ -1,12 +1,12 @@
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { SETTINGS_DIALOG_SUBTITLE } from "../../constants/constants";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { FlowSettingsPropsType } from "../../types/components";
 import { FlowType } from "../../types/flow";
 import BaseModal from "../baseModal";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 
 export default function FlowSettingsModal({
   open,

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

@@ -26,7 +26,7 @@ import { getBuildStatus } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
-import { FlowState, FlowsState } from "../../types/tabs";
+import { FlowState } from "../../types/tabs";
 import { validateNodes } from "../../utils/reactflowUtils";
 
 export default function FormModal({
@@ -629,15 +629,12 @@ export default function FormModal({
                       setChatValue={(value) => {
                         setChatValue(value);
                         if (currentFlowState && chatKey) {
-                          setCurrentFlowState(
+                          setCurrentFlowState((old: FlowState | undefined) => {
-                            (old: FlowState | undefined) => {
+                            let newFlowState = cloneDeep(old!);
-                              let newFlowState = cloneDeep(old!);
+                            newFlowState.formKeysData.input_keys![chatKey] =
-                              newFlowState.formKeysData.input_keys![
+                              value;
-                                chatKey
+                            return newFlowState;
-                              ] = value;
+                          });
-                              return newFlowState;
-                            }
-                          );
                         }
                       }}
                       inputRef={ref}

src/frontend/src/modals/shareModal/index.tsx

@@ -1,5 +1,5 @@
 import { Loader2 } from "lucide-react";
-import { ReactNode, useContext, useEffect, useMemo, useState } from "react";
+import { ReactNode, useEffect, useMemo, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { TagsSelector } from "../../components/tagsSelectorComponent";
@@ -12,6 +12,8 @@ import {
   updateFlowStore,
 } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
+import { useDarkStore } from "../../stores/darkStore";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { FlowType } from "../../types/flow";
 import {
@@ -22,8 +24,6 @@ import {
 import { getTagsIds } from "../../utils/storeUtils";
 import ConfirmationModal from "../ConfirmationModal";
 import BaseModal from "../baseModal";
-import { useDarkStore } from "../../stores/darkStore";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 
 export default function ShareModal({
   component,

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

@@ -4,7 +4,7 @@ import { Button } from "../../../components/ui/button";
 import { Input } from "../../../components/ui/input";
 import { CONTROL_LOGIN_STATE } from "../../../constants/constants";
 import { AuthContext } from "../../../contexts/authContext";
-import { getLoggedUser, onLogin } from "../../../controllers/API";
+import { onLogin } from "../../../controllers/API";
 import useAlertStore from "../../../stores/alertStore";
 import { LoginType } from "../../../types/api";
 import {

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

@@ -30,9 +30,9 @@ import {
 import ConfirmationModal from "../../modals/ConfirmationModal";
 import UserManagementModal from "../../modals/UserManagementModal";
 import useAlertStore from "../../stores/alertStore";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { Users } from "../../types/api";
 import { UserInputType } from "../../types/components";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 
 export default function AdminPage() {
   const [inputValue, setInputValue] = useState("");
@@ -44,7 +44,9 @@ export default function AdminPage() {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const { userData } = useContext(AuthContext);
   const [totalRowsCount, setTotalRowsCount] = useState(0);
-  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
+  const setCurrentFlowId = useFlowsManagerStore(
+    (state) => state.setCurrentFlowId
+  );
 
   // set null id
   useEffect(() => {
@@ -333,9 +335,7 @@ export default function AdminPage() {
                               </ConfirmationModal.Content>
                               <ConfirmationModal.Trigger>
                                 <div className="flex w-fit">
-                                  <CheckBoxDiv
+                                  <CheckBoxDiv checked={user.is_active} />
-                                    checked={user.is_active}
-                                  />
                                 </div>
                               </ConfirmationModal.Trigger>
                             </ConfirmationModal>
@@ -367,9 +367,7 @@ export default function AdminPage() {
                               </ConfirmationModal.Content>
                               <ConfirmationModal.Trigger>
                                 <div className="flex w-fit">
-                                  <CheckBoxDiv
+                                  <CheckBoxDiv checked={user.is_superuser} />
-                                    checked={user.is_superuser}
-                                  />
                                 </div>
                               </ConfirmationModal.Trigger>
                             </ConfirmationModal>

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

@@ -18,8 +18,6 @@ import ReactFlow, {
   SelectionDragHandler,
   addEdge,
   updateEdge,
-  useEdgesState,
-  useNodesState,
 } from "reactflow";
 import GenericNode from "../../../../CustomNodes/GenericNode";
 import Chat from "../../../../components/chatComponent";
@@ -224,8 +222,7 @@ export default function Page({
   const onMoveEnd: OnMove = useCallback(() => {
     // 👇 make moving the canvas undoable
     autoSaveCurrentFlow(nodes, edges, reactFlowInstance?.getViewport()!);
-  }
+  }, [takeSnapshot, autoSaveCurrentFlow, nodes, edges, reactFlowInstance]);
-  , [takeSnapshot, autoSaveCurrentFlow, nodes, edges, reactFlowInstance]);
 
   const onSelectionDragStart: SelectionDragHandler = useCallback(() => {
     // 👇 make dragging a selection undoable
@@ -290,14 +287,16 @@ export default function Page({
         const newNode: NodeType = {
           id: newId,
           type: "genericNode",
-          position: {x: 0, y:0},
+          position: { x: 0, y: 0 },
           data: {
             ...data,
             id: newId,
           },
         };
-        paste({ nodes: [newNode], edges: [] }, {x: event.clientX, y: event.clientY});
+        paste(
-
+          { nodes: [newNode], edges: [] },
+          { x: event.clientX, y: event.clientY }
+        );
       } else if (event.dataTransfer.types.some((types) => types === "Files")) {
         takeSnapshot();
         if (event.dataTransfer.files.item(0)!.type === "application/json") {
@@ -384,7 +383,6 @@ export default function Page({
     setFilterEdge([]);
   }, []);
 
-
   return (
     <div className="flex h-full overflow-hidden">
       {!view && <ExtraSidebar />}

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

@@ -1,5 +1,5 @@
 import { cloneDeep } from "lodash";
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import IconComponent from "../../../../components/genericIconComponent";
 import {
@@ -11,7 +11,9 @@ import {
 import ConfirmationModal from "../../../../modals/ConfirmationModal";
 import EditNodeModal from "../../../../modals/EditNodeModal";
 import ShareModal from "../../../../modals/shareModal";
+import { useDarkStore } from "../../../../stores/darkStore";
 import useFlowStore from "../../../../stores/flowStore";
+import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { useStoreStore } from "../../../../stores/storeStore";
 import { nodeToolbarPropsType } from "../../../../types/components";
 import { FlowType } from "../../../../types/flow";
@@ -22,8 +24,6 @@ import {
   updateFlowPosition,
 } from "../../../../utils/reactflowUtils";
 import { classNames } from "../../../../utils/utils";
-import { useDarkStore } from "../../../../stores/darkStore";
-import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 
 export default function NodeToolbarComponent({
   data,
@@ -33,22 +33,21 @@ export default function NodeToolbarComponent({
   numberOfHandles,
   showNode,
 }: nodeToolbarPropsType): JSX.Element {
-  const nodeLength = 
+  const nodeLength = Object.keys(data.node!.template).filter(
-    Object.keys(data.node!.template).filter(
+    (templateField) =>
-      (templateField) =>
+      templateField.charAt(0) !== "_" &&
-        templateField.charAt(0) !== "_" &&
+      data.node?.template[templateField].show &&
-        data.node?.template[templateField].show &&
+      (data.node.template[templateField].type === "str" ||
-        (data.node.template[templateField].type === "str" ||
+        data.node.template[templateField].type === "bool" ||
-          data.node.template[templateField].type === "bool" ||
+        data.node.template[templateField].type === "float" ||
-          data.node.template[templateField].type === "float" ||
+        data.node.template[templateField].type === "code" ||
-          data.node.template[templateField].type === "code" ||
+        data.node.template[templateField].type === "prompt" ||
-          data.node.template[templateField].type === "prompt" ||
+        data.node.template[templateField].type === "file" ||
-          data.node.template[templateField].type === "file" ||
+        data.node.template[templateField].type === "Any" ||
-          data.node.template[templateField].type === "Any" ||
+        data.node.template[templateField].type === "int" ||
-          data.node.template[templateField].type === "int" ||
+        data.node.template[templateField].type === "dict" ||
-          data.node.template[templateField].type === "dict" ||
+        data.node.template[templateField].type === "NestedDict")
-          data.node.template[templateField].type === "NestedDict")
+  ).length;
-    ).length;
 
   const hasStore = useStoreStore((state) => state.hasStore);
   const hasApiKey = useStoreStore((state) => state.hasApiKey);

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

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import PaginatorComponent from "../../../../components/PaginatorComponent";
 import CollectionCardComponent from "../../../../components/cardComponent";
@@ -7,8 +7,8 @@ import IconComponent from "../../../../components/genericIconComponent";
 import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent";
 import { Button } from "../../../../components/ui/button";
 import useAlertStore from "../../../../stores/alertStore";
-import { FlowType } from "../../../../types/flow";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { FlowType } from "../../../../types/flow";
 
 export default function ComponentsComponent({
   is_component = true,

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

@@ -1,5 +1,5 @@
 import { Group, ToyBrick } from "lucide-react";
-import { useContext, useEffect } from "react";
+import { useEffect } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import DropdownButton from "../../components/DropdownButtonComponent";
 import IconComponent from "../../components/genericIconComponent";
@@ -16,9 +16,7 @@ export default function HomePage(): JSX.Element {
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId
   );
-  const uploadFlows = useFlowsManagerStore(
+  const uploadFlows = useFlowsManagerStore((state) => state.uploadFlows);
-    (state) => state.uploadFlows
-  );
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const location = useLocation();

src/frontend/src/pages/ProfileSettingsPage/index.tsx

@@ -10,14 +10,16 @@ import { CONTROL_PATCH_USER_STATE } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
 import { resetPassword, updateUser } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import {
   inputHandlerEventType,
   patchUserInputStateType,
 } from "../../types/components";
 import { gradients } from "../../utils/styleUtils";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 export default function ProfileSettingsPage(): JSX.Element {
-  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
+  const setCurrentFlowId = useFlowsManagerStore(
+    (state) => state.setCurrentFlowId
+  );
 
   const [inputState, setInputState] = useState<patchUserInputStateType>(
     CONTROL_PATCH_USER_STATE

src/frontend/src/pages/StorePage/index.tsx

@@ -28,10 +28,10 @@ import {
 } from "../../controllers/API";
 import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
 import useAlertStore from "../../stores/alertStore";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { storeComponent } from "../../types/store";
 import { cn } from "../../utils/utils";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 
 export default function StorePage(): JSX.Element {
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
@@ -45,7 +45,9 @@ export default function StorePage(): JSX.Element {
   const { apiKey } = useContext(AuthContext);
 
   const setErrorData = useAlertStore((state) => state.setErrorData);
-  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
+  const setCurrentFlowId = useFlowsManagerStore(
+    (state) => state.setCurrentFlowId
+  );
   const [loading, setLoading] = useState(true);
   const [loadingTags, setLoadingTags] = useState(true);
   const { id } = useParams();

src/frontend/src/pages/ViewPage/index.tsx

@@ -1,11 +1,13 @@
 import { useEffect } from "react";
 import { useParams } from "react-router-dom";
-import Page from "../FlowPage/components/PageComponent";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import Page from "../FlowPage/components/PageComponent";
 
 export default function ViewPage() {
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
-  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
+  const setCurrentFlowId = useFlowsManagerStore(
+    (state) => state.setCurrentFlowId
+  );
   const { id } = useParams();
 
   // Set flow tab id
@@ -15,9 +17,7 @@ export default function ViewPage() {
 
   return (
     <div className="flow-page-positioning">
-        {currentFlow && (
+      {currentFlow && <Page view flow={currentFlow} />}
-          <Page view flow={currentFlow} />
-        )}
     </div>
   );
 }

src/frontend/src/pages/loginPage/index.tsx

@@ -6,7 +6,7 @@ import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 import { CONTROL_LOGIN_STATE } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
-import { getLoggedUser, onLogin } from "../../controllers/API";
+import { onLogin } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
 import { LoginType } from "../../types/api";
 import {

src/frontend/src/stores/flowStore.ts

@@ -1,6 +1,5 @@
 import { cloneDeep } from "lodash";
 import {
-  Connection,
   Edge,
   EdgeChange,
   Node,

src/frontend/src/stores/flowsManagerStore.ts

@@ -352,8 +352,10 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
       JSON.stringify(past[currentFlowId][pastLength - 1]) !==
         JSON.stringify(newState)
     ) {
-      past[currentFlowId] = past[currentFlowId]
+      past[currentFlowId] = past[currentFlowId].slice(
-        .slice(pastLength - defaultOptions.maxHistorySize + 1, pastLength)
+        pastLength - defaultOptions.maxHistorySize + 1,
+        pastLength
+      );
 
       past[currentFlowId].push(newState);
     } else {
@@ -371,8 +373,11 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     if (pastState) {
       past[currentFlowId] = past[currentFlowId].slice(0, pastLength - 1);
 
-      if(!future[currentFlowId]) future[currentFlowId] = [];
+      if (!future[currentFlowId]) future[currentFlowId] = [];
-      future[currentFlowId].push({ nodes: newState.nodes, edges: newState.edges });
+      future[currentFlowId].push({
+        nodes: newState.nodes,
+        edges: newState.edges,
+      });
 
       newState.setNodes(pastState.nodes);
       newState.setEdges(pastState.edges);
@@ -387,8 +392,11 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     if (futureState) {
       future[currentFlowId] = future[currentFlowId].slice(0, futureLength - 1);
 
-      if(!past[currentFlowId]) past[currentFlowId] = [];
+      if (!past[currentFlowId]) past[currentFlowId] = [];
-      past[currentFlowId].push({ nodes: newState.nodes, edges: newState.edges });
+      past[currentFlowId].push({
+        nodes: newState.nodes,
+        edges: newState.edges,
+      });
 
       newState.setNodes(futureState.nodes);
       newState.setEdges(futureState.edges);

src/frontend/src/types/components/index.ts

@@ -4,7 +4,6 @@ import { APIClassType, APITemplateType, TemplateVariableType } from "../api";
 import { ChatMessageType } from "../chat";
 import { FlowStyleType, FlowType, NodeDataType, NodeType } from "../flow/index";
 import { sourceHandleType, targetHandleType } from "./../flow/index";
-import { TypesStoreType } from "../zustand/types";
 export type InputComponentType = {
   autoFocus?: boolean;
   onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
@@ -263,7 +262,6 @@ export type LoadingComponentProps = {
 
 export type ContentProps = {
   children: ReactNode;
-  
 };
 export type HeaderProps = { children: ReactNode; description: string };
 export type TriggerProps = {
@@ -305,10 +303,9 @@ export type ConfirmationModalType = {
   modalContentTitle?: string;
   cancelText: string;
   confirmationText: string;
-  children: [
+  children:
-    React.ReactElement<ContentProps>,
+    | [React.ReactElement<ContentProps>, React.ReactElement<TriggerProps>]
-    React.ReactElement<TriggerProps>
+    | React.ReactElement<ContentProps>;
-  ] | React.ReactElement<ContentProps>;
   icon: string;
   data?: any;
   index?: number;

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

@@ -1,7 +1,6 @@
 import {
   Edge,
   Node,
-  OnConnect,
   OnEdgesChange,
   OnNodesChange,
   ReactFlowInstance,

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

@@ -1,4 +1,4 @@
-import { Node, Edge, Viewport, XYPosition } from "reactflow";
+import { Edge, Node, Viewport, XYPosition } from "reactflow";
 import { FlowType } from "../../flow";
 import { FlowState, FlowsState } from "../../tabs";
 
@@ -12,16 +12,40 @@ export type FlowsManagerStoreType = {
   setIsLoading: (isLoading: boolean) => void;
   flowsState: FlowsState;
   currentFlowState: FlowState | undefined;
-  setCurrentFlowState: (state: FlowState | ((oldState: FlowState | undefined) => FlowState)) => void;
+  setCurrentFlowState: (
+    state: FlowState | ((oldState: FlowState | undefined) => FlowState)
+  ) => void;
   refreshFlows: () => Promise<void>;
   saveFlow: (flow: FlowType, silent?: boolean) => Promise<void>;
-  autoSaveCurrentFlow: (nodes: Node[], edges: Edge[], viewport: Viewport) => void;
+  autoSaveCurrentFlow: (
+    nodes: Node[],
+    edges: Edge[],
+    viewport: Viewport
+  ) => void;
   uploadFlows: () => Promise<void>;
-  uploadFlow: ({newProject, file, isComponent, position}: {newProject: boolean, file?: File, isComponent?: boolean, position?: XYPosition}) => Promise<string | never>;
+  uploadFlow: ({
-  addFlow: (newProject: boolean, flow?: FlowType, override?: boolean, position?: XYPosition) => Promise<string | undefined>;
+    newProject,
+    file,
+    isComponent,
+    position,
+  }: {
+    newProject: boolean;
+    file?: File;
+    isComponent?: boolean;
+    position?: XYPosition;
+  }) => Promise<string | never>;
+  addFlow: (
+    newProject: boolean,
+    flow?: FlowType,
+    override?: boolean,
+    position?: XYPosition
+  ) => Promise<string | undefined>;
   deleteComponent: (key: string) => Promise<void>;
   removeFlow: (id: string) => Promise<void>;
-  saveComponent: (component: any, override: boolean) => Promise<string | undefined>;
+  saveComponent: (
+    component: any,
+    override: boolean
+  ) => Promise<string | undefined>;
   undo: () => void;
   redo: () => void;
   takeSnapshot: () => void;

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

@@ -1,13 +1,13 @@
 import { APIClassType, APIDataType } from "../../api";
 
 export type TypesStoreType = {
-    types: { [char: string]: string };
+  types: { [char: string]: string };
-    setTypes: (newState: {}) => void;
+  setTypes: (newState: {}) => void;
-    templates: { [char: string]: APIClassType };
+  templates: { [char: string]: APIClassType };
-    setTemplates: (newState: {}) => void;
+  setTemplates: (newState: {}) => void;
-    data: APIDataType;
+  data: APIDataType;
-    setData: (newState: {}) => void;
+  setData: (newState: {}) => void;
-    getTypes: () => Promise<void>;
+  getTypes: () => Promise<void>;
-    setFilterEdge: (newState) => void;
+  setFilterEdge: (newState) => void;
-    getFilterEdge: any[];
+  getFilterEdge: any[];
-}
+};

src/frontend/src/utils/reactflowUtils.ts

@@ -415,7 +415,9 @@ export function handleKeyDown(
   }
 }
 
-export function handleOnlyIntegerInput(event: React.KeyboardEvent<HTMLInputElement>) {
+export function handleOnlyIntegerInput(
+  event: React.KeyboardEvent<HTMLInputElement>
+) {
   if (
     event.key === "." ||
     event.key === "-" ||

src/frontend/src/utils/utils.ts

@@ -297,7 +297,10 @@ export function buildTweakObject(tweak: tweakType) {
  * @param {FlowsState} tabsState - The current tabs state.
  * @returns {string} - The chat input field
  */
-export function getChatInputField(flow: FlowType, currentFlowState?: FlowState) {
+export function getChatInputField(
+  flow: FlowType,
+  currentFlowState?: FlowState
+) {
   let chat_input_field = "text";
 
   if (