Revert "code format"

This reverts commit 8a0b240a7f.

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 } from "./controllers/API";
+import { getHealth, getRepoStars, getVersion } 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,6 +147,7 @@ export default function App() {
         refreshFlows();
       });
     }
+
   }, [isAuthenticated]);
 
   useEffect(() => {

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

@@ -1,5 +1,11 @@
 import { cloneDeep } from "lodash";
-import React, { ReactNode, useEffect, useRef, useState } from "react";
+import React, {
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { Handle, Position } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
@@ -23,8 +29,6 @@ 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";
@@ -41,6 +45,8 @@ 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,
@@ -106,7 +112,7 @@ export default function ParameterComponent({
     if (data.node!.template[name].value !== newValue) {
       takeSnapshot();
     }
-
+    
     data.node!.template[name].value = newValue; // necessary to enable ctrl+z inside the input
 
     setNode(data.id, (oldNode) => {
@@ -294,7 +300,7 @@ export default function ParameterComponent({
   ) : (
     <div
       ref={ref}
-      className="relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
+      className="mt-1 flex w-full flex-wrap items-center justify-between relative bg-muted px-5 py-2"
     >
       <>
         <div

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

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

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

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

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

@@ -1,8 +1,7 @@
-import { useEffect, useState } from "react";
+import { useContext, 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";
@@ -18,6 +17,7 @@ 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 { useState } from "react";
+import { useContext, useState } from "react";
 import Loading from "../../../components/ui/loading";
 import { useSSE } from "../../../contexts/SSEContext";
 import { postBuildInit } from "../../../controllers/API";
@@ -9,6 +9,7 @@ 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 { useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { useNodes } from "reactflow";
 import { ChatType } from "../../types/chat";
 import BuildTrigger from "./buildTrigger";
@@ -8,17 +8,15 @@ import * as _ from "lodash";
 import { getBuildStatus } from "../../controllers/API";
 import FormModal from "../../modals/formModal";
 import useFlowStore from "../../stores/flowStore";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { NodeType } from "../../types/flow";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 
 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(
+  const currentFlowState = useFlowsManagerStore((state) => state.currentFlowState);
-    (state) => state.currentFlowState
-  );
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -55,7 +53,9 @@ export default function Chat({ flow }: ChatType): JSX.Element {
     const currentNodes = nodes.map((node: NodeType) =>
       _.cloneDeep(node.data.node?.template)
     );
-    if (JSON.stringify(prevNodes) !== JSON.stringify(currentNodes)) {
+    if (
+      JSON.stringify(prevNodes) !== JSON.stringify(currentNodes)
+    ) {
       setIsBuilt(false);
     }
     if (

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useContext, useState } from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -49,7 +49,9 @@ 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">{currentFlow.name}</div>
+                <div className="header-menu-flow-name">
+                  {currentFlow.name}
+                </div>
                 <IconComponent name="ChevronDown" className="h-4 w-4" />
               </div>
             </Button>

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

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

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

@@ -1,9 +1,9 @@
-import { useEffect, useState } from "react";
+import { useContext, 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,9 +1,6 @@
 import { useEffect } from "react";
 import { IntComponentType } from "../../types/components";
-import {
+import { handleKeyDown, handleOnlyIntegerInput } from "../../utils/reactflowUtils";
-  handleKeyDown,
-  handleOnlyIntegerInput,
-} from "../../utils/reactflowUtils";
 import { Input } from "../ui/input";
 
 export default function IntComponent({

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

@@ -26,13 +26,7 @@ const Checkbox = React.forwardRef<
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-const CheckBoxDiv = ({
+const CheckBoxDiv = (({ className = "", checked }: {className?: string, checked?: boolean}) => (
-  className = "",
-  checked,
-}: {
-  className?: string;
-  checked?: boolean;
-}) => (
   <div
     className={cn(
       className,
@@ -46,6 +40,6 @@ const CheckBoxDiv = ({
       </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,9 +101,8 @@ export function AuthProvider({ children }): React.ReactElement {
     setAccessToken(newAccessToken);
     setRefreshToken(refreshToken);
     setIsAuthenticated(true);
-    setTimeout(() => {
+    setTimeout(() => {getUser();}, 500)
-      getUser();
+    
-    }, 500);
   }
 
   function logout() {

src/frontend/src/contexts/index.tsx

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

src/frontend/src/contexts/typesContext.tsx

@@ -1,9 +1,16 @@
 import _ from "lodash";
-import { createContext, ReactNode, useState } from "react";
+import {
+  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,12 +58,7 @@ const ApiModal = forwardRef(
       tweak.current,
       currentFlowState
     );
-    const curl_code = getCurlCode(
+    const curl_code = getCurlCode(flow, autoLogin, tweak.current, currentFlowState);
-      flow,
-      autoLogin,
-      tweak.current,
-      currentFlowState
-    );
     const pythonCode = getPythonCode(flow, tweak.current, currentFlowState);
     const widgetCode = getWidgetCode(flow, autoLogin, currentFlowState);
     const tweaksCode = buildTweaks(flow);
@@ -178,12 +173,7 @@ const ApiModal = forwardRef(
         tweak.current,
         currentFlowState
       );
-      const curl_code = getCurlCode(
+      const curl_code = getCurlCode(flow, autoLogin, tweak.current, currentFlowState);
-        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, useEffect, useState } from "react";
+import { ReactNode, forwardRef, useContext, 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 { useDarkStore } from "../../stores/darkStore";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { downloadFlow, removeApiKeys } from "../../utils/reactflowUtils";
 import BaseModal from "../baseModal";
+import { useDarkStore } from "../../stores/darkStore";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 
 const ExportModal = forwardRef(
   (props: { children: ReactNode }, ref): JSX.Element => {

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

@@ -1,12 +1,12 @@
-import { useEffect, useState } from "react";
+import { useContext, 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 } from "../../types/tabs";
+import { FlowState, FlowsState } from "../../types/tabs";
 import { validateNodes } from "../../utils/reactflowUtils";
 
 export default function FormModal({
@@ -629,12 +629,15 @@ export default function FormModal({
                       setChatValue={(value) => {
                         setChatValue(value);
                         if (currentFlowState && chatKey) {
-                          setCurrentFlowState((old: FlowState | undefined) => {
+                          setCurrentFlowState(
-                            let newFlowState = cloneDeep(old!);
+                            (old: FlowState | undefined) => {
-                            newFlowState.formKeysData.input_keys![chatKey] =
+                              let newFlowState = cloneDeep(old!);
-                              value;
+                              newFlowState.formKeysData.input_keys![
-                            return newFlowState;
+                                chatKey
-                          });
+                              ] = value;
+                              return newFlowState;
+                            }
+                          );
                         }
                       }}
                       inputRef={ref}

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

@@ -1,5 +1,5 @@
 import { Loader2 } from "lucide-react";
-import { ReactNode, useEffect, useMemo, useState } from "react";
+import { ReactNode, useContext, useEffect, useMemo, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { TagsSelector } from "../../components/tagsSelectorComponent";
@@ -12,8 +12,6 @@ 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 {
@@ -24,6 +22,8 @@ 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 { onLogin } from "../../../controllers/API";
+import { getLoggedUser, 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,9 +44,7 @@ export default function AdminPage() {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const { userData } = useContext(AuthContext);
   const [totalRowsCount, setTotalRowsCount] = useState(0);
-  const setCurrentFlowId = useFlowsManagerStore(
+  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
-    (state) => state.setCurrentFlowId
-  );
 
   // set null id
   useEffect(() => {
@@ -335,7 +333,9 @@ export default function AdminPage() {
                               </ConfirmationModal.Content>
                               <ConfirmationModal.Trigger>
                                 <div className="flex w-fit">
-                                  <CheckBoxDiv checked={user.is_active} />
+                                  <CheckBoxDiv
+                                    checked={user.is_active}
+                                  />
                                 </div>
                               </ConfirmationModal.Trigger>
                             </ConfirmationModal>
@@ -367,7 +367,9 @@ export default function AdminPage() {
                               </ConfirmationModal.Content>
                               <ConfirmationModal.Trigger>
                                 <div className="flex w-fit">
-                                  <CheckBoxDiv checked={user.is_superuser} />
+                                  <CheckBoxDiv
+                                    checked={user.is_superuser}
+                                  />
                                 </div>
                               </ConfirmationModal.Trigger>
                             </ConfirmationModal>

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

@@ -18,6 +18,8 @@ import ReactFlow, {
   SelectionDragHandler,
   addEdge,
   updateEdge,
+  useEdgesState,
+  useNodesState,
 } from "reactflow";
 import GenericNode from "../../../../CustomNodes/GenericNode";
 import Chat from "../../../../components/chatComponent";
@@ -222,7 +224,8 @@ 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
@@ -287,16 +290,14 @@ 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(
+        paste({ nodes: [newNode], edges: [] }, {x: event.clientX, y: event.clientY});
-          { 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") {
@@ -383,6 +384,7 @@ 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 { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import IconComponent from "../../../../components/genericIconComponent";
 import {
@@ -11,9 +11,7 @@ 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";
@@ -24,6 +22,8 @@ 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,21 +33,22 @@ export default function NodeToolbarComponent({
   numberOfHandles,
   showNode,
 }: nodeToolbarPropsType): JSX.Element {
-  const nodeLength = Object.keys(data.node!.template).filter(
+  const nodeLength = 
-    (templateField) =>
+    Object.keys(data.node!.template).filter(
-      templateField.charAt(0) !== "_" &&
+      (templateField) =>
-      data.node?.template[templateField].show &&
+        templateField.charAt(0) !== "_" &&
-      (data.node.template[templateField].type === "str" ||
+        data.node?.template[templateField].show &&
-        data.node.template[templateField].type === "bool" ||
+        (data.node.template[templateField].type === "str" ||
-        data.node.template[templateField].type === "float" ||
+          data.node.template[templateField].type === "bool" ||
-        data.node.template[templateField].type === "code" ||
+          data.node.template[templateField].type === "float" ||
-        data.node.template[templateField].type === "prompt" ||
+          data.node.template[templateField].type === "code" ||
-        data.node.template[templateField].type === "file" ||
+          data.node.template[templateField].type === "prompt" ||
-        data.node.template[templateField].type === "Any" ||
+          data.node.template[templateField].type === "file" ||
-        data.node.template[templateField].type === "int" ||
+          data.node.template[templateField].type === "Any" ||
-        data.node.template[templateField].type === "dict" ||
+          data.node.template[templateField].type === "int" ||
-        data.node.template[templateField].type === "NestedDict")
+          data.node.template[templateField].type === "dict" ||
-  ).length;
+          data.node.template[templateField].type === "NestedDict")
+    ).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 { useEffect, useState } from "react";
+import { useContext, 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 useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { FlowType } from "../../../../types/flow";
+import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 
 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 { useEffect } from "react";
+import { useContext, useEffect } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import DropdownButton from "../../components/DropdownButtonComponent";
 import IconComponent from "../../components/genericIconComponent";
@@ -16,7 +16,9 @@ export default function HomePage(): JSX.Element {
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId
   );
-  const uploadFlows = useFlowsManagerStore((state) => state.uploadFlows);
+  const uploadFlows = useFlowsManagerStore(
+    (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,16 +10,14 @@ 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(
+  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
-    (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,9 +45,7 @@ export default function StorePage(): JSX.Element {
   const { apiKey } = useContext(AuthContext);
 
   const setErrorData = useAlertStore((state) => state.setErrorData);
-  const setCurrentFlowId = useFlowsManagerStore(
+  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
-    (state) => state.setCurrentFlowId
-  );
   const [loading, setLoading] = useState(true);
   const [loadingTags, setLoadingTags] = useState(true);
   const { id } = useParams();

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

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

src/frontend/src/stores/flowStore.ts

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

src/frontend/src/stores/flowsManagerStore.ts

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

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

@@ -4,6 +4,7 @@ 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;
@@ -262,6 +263,7 @@ export type LoadingComponentProps = {
 
 export type ContentProps = {
   children: ReactNode;
+  
 };
 export type HeaderProps = { children: ReactNode; description: string };
 export type TriggerProps = {
@@ -303,9 +305,10 @@ export type ConfirmationModalType = {
   modalContentTitle?: string;
   cancelText: string;
   confirmationText: string;
-  children:
+  children: [
-    | [React.ReactElement<ContentProps>, React.ReactElement<TriggerProps>]
+    React.ReactElement<ContentProps>,
-    | React.ReactElement<ContentProps>;
+    React.ReactElement<TriggerProps>
+  ] | React.ReactElement<ContentProps>;
   icon: string;
   data?: any;
   index?: number;

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

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

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

@@ -1,4 +1,4 @@
-import { Edge, Node, Viewport, XYPosition } from "reactflow";
+import { Node, Edge, Viewport, XYPosition } from "reactflow";
 import { FlowType } from "../../flow";
 import { FlowState, FlowsState } from "../../tabs";
 
@@ -12,40 +12,16 @@ export type FlowsManagerStoreType = {
   setIsLoading: (isLoading: boolean) => void;
   flowsState: FlowsState;
   currentFlowState: FlowState | undefined;
-  setCurrentFlowState: (
+  setCurrentFlowState: (state: FlowState | ((oldState: FlowState | undefined) => FlowState)) => void;
-    state: FlowState | ((oldState: FlowState | undefined) => FlowState)
-  ) => void;
   refreshFlows: () => Promise<void>;
   saveFlow: (flow: FlowType, silent?: boolean) => Promise<void>;
-  autoSaveCurrentFlow: (
+  autoSaveCurrentFlow: (nodes: Node[], edges: Edge[], viewport: Viewport) => void;
-    nodes: Node[],
-    edges: Edge[],
-    viewport: Viewport
-  ) => void;
   uploadFlows: () => Promise<void>;
-  uploadFlow: ({
+  uploadFlow: ({newProject, file, isComponent, position}: {newProject: boolean, file?: File, isComponent?: boolean, position?: XYPosition}) => Promise<string | never>;
-    newProject,
+  addFlow: (newProject: boolean, flow?: FlowType, override?: boolean, position?: XYPosition) => Promise<string | undefined>;
-    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: (
+  saveComponent: (component: any, override: boolean) => Promise<string | undefined>;
-    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,9 +415,7 @@ export function handleKeyDown(
   }
 }
 
-export function handleOnlyIntegerInput(
+export function handleOnlyIntegerInput(event: React.KeyboardEvent<HTMLInputElement>) {
-  event: React.KeyboardEvent<HTMLInputElement>
-) {
   if (
     event.key === "." ||
     event.key === "-" ||

src/frontend/src/utils/utils.ts

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