Refactor code formatting

src/frontend/src/App.tsx

@@ -16,13 +16,13 @@ import {
   FETCH_ERROR_MESSAGE,
 } from "./constants/constants";
 import { AuthContext } from "./contexts/authContext";
-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 { useLocationStore } from "./stores/locationStore";
+import { useTypesStore } from "./stores/typesStore";
 
 export default function App() {
   const setCurrent = useLocationStore((state) => state.setCurrent);
@@ -149,7 +149,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";
@@ -8,14 +8,14 @@ import { Textarea } from "../../components/ui/textarea";
 import { priorityFields } from "../../constants/constants";
 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/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

@@ -10,7 +10,6 @@ import { parsedDataType } from "../../../types/components";
 import { validateNodes } from "../../../utils/reactflowUtils";
 import RadialProgressComponent from "../../RadialProgress";
 import IconComponent from "../../genericIconComponent";
-import { stat } from "fs";
 
 export default function BuildTrigger({
   open,
@@ -29,9 +28,7 @@ export default function BuildTrigger({
   const edges = useFlowStore((state) => state.edges);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
-  const setFlowState = useFlowStore(
+  const setFlowState = useFlowStore((state) => state.setFlowState);
-    (state) => state.setFlowState
-  );
 
   const eventClick = isBuilding ? "pointer-events-none" : "";
   const [progress, setProgress] = useState(0);

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";
@@ -9,7 +9,6 @@ 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";
 
 export default function Chat({ flow }: ChatType): JSX.Element {
   const [open, setOpen] = useState(false);
@@ -51,9 +50,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);
     }
     prevNodesRef.current = currentNodes;
@@ -68,16 +65,9 @@ export default function Chat({ flow }: ChatType): JSX.Element {
           setIsBuilt={setIsBuilt}
           isBuilt={isBuilt}
         />
-        {isBuilt &&
+        {isBuilt && flowState && !!flowState?.input_keys && (
-          flowState &&
+          <FormModal key={flow.id} flow={flow} open={open} setOpen={setOpen} />
-          !!flowState?.input_keys && (
+        )}
-            <FormModal
-              key={flow.id}
-              flow={flow}
-              open={open}
-              setOpen={setOpen}
-            />
-          )}
         <ChatTrigger
           canOpen={!!flowState?.input_keys}
           open={open}

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/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/accordion.tsx

@@ -27,7 +27,7 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger asChild ref={ref} {...props}>
       <div
         className={cn(
-          "cursor-pointer flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180",
+          "flex flex-1 cursor-pointer items-center justify-between py-4 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180",
           className
         )}
       >

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/index.tsx

@@ -13,8 +13,8 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
         <AuthProvider>
           <TooltipProvider>
             <ReactFlowProvider>
-                <ApiInterceptor />
+              <ApiInterceptor />
-                  {children}
+              {children}
             </ReactFlowProvider>
           </TooltipProvider>
         </AuthProvider>

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

@@ -18,7 +18,7 @@ import {
   LANGFLOW_SUPPORTED_TYPES,
 } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import useFlowStore from "../../stores/flowStore";
 import { TemplateVariableType } from "../../types/api";
 import { tweakType, uniqueTweakType } from "../../types/components";
 import { FlowType, NodeType } from "../../types/flow/index";
@@ -31,7 +31,6 @@ import {
   tabsArray,
 } from "../../utils/utils";
 import BaseModal from "../baseModal";
-import useFlowStore from "../../stores/flowStore";
 
 const ApiModal = forwardRef(
   (
@@ -50,9 +49,7 @@ const ApiModal = forwardRef(
     const tweak = useRef<tweakType>([]);
     const tweaksList = useRef<string[]>([]);
     const [getTweak, setTweak] = useState<tweakType>([]);
-    const flowState = useFlowStore(
+    const flowState = useFlowStore((state) => state.flowState);
-      (state) => state.flowState
-    );
     const pythonApiCode = getPythonApiCode(
       flow,
       autoLogin,

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

@@ -25,8 +25,7 @@ import { AuthContext } from "../../contexts/authContext";
 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({
@@ -40,12 +39,8 @@ export default function FormModal({
 }): JSX.Element {
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
-  const flowState = useFlowStore(
+  const flowState = useFlowStore((state) => state.flowState);
-    (state) => state.flowState
+  const setFlowState = useFlowStore((state) => state.setFlowState);
-  );
-  const setFlowState = useFlowStore(
-    (state) => state.setFlowState
-  );
   const [chatValue, setChatValue] = useState(() => {
     try {
       if (!flowState) {
@@ -468,72 +463,63 @@ export default function FormModal({
               </div>
 
               {flowState?.input_keys
-                ? Object.keys(flowState?.input_keys!).map(
+                ? Object.keys(flowState?.input_keys!).map((key, index) => (
-                    (key, index) => (
+                    <div className="file-component-accordion-div" key={index}>
-                      <div className="file-component-accordion-div" key={index}>
+                      <AccordionComponent
-                        <AccordionComponent
+                        trigger={
-                          trigger={
+                          <div className="file-component-badge-div">
-                            <div className="file-component-badge-div">
+                            <Badge variant="gray" size="md">
-                              <Badge variant="gray" size="md">
+                              {key}
-                                {key}
+                            </Badge>
-                              </Badge>
 
-                              <div
+                            <div
-                                className="-mb-1"
+                              className="-mb-1"
-                                onClick={(event) => {
+                              onClick={(event) => {
-                                  event.stopPropagation();
+                                event.stopPropagation();
-                                }}
-                              >
-                                <ToggleShadComponent
-                                  enabled={chatKey === key}
-                                  setEnabled={(value) =>
-                                    handleOnCheckedChange(value, key)
-                                  }
-                                  size="small"
-                                  disabled={flowState.handle_keys!.some(
-                                    (t) => t === key
-                                  )}
-                                />
-                              </div>
-                            </div>
-                          }
-                          key={index}
-                          keyValue={key}
-                        >
-                          <div className="file-component-tab-column">
-                            {flowState?.handle_keys!.some(
-                              (t) => t === key
-                            ) && (
-                              <div className="font-normal text-muted-foreground ">
-                                Source: Component
-                              </div>
-                            )}
-                            <Textarea
-                              className="custom-scroll"
-                              value={
-                                flowState?.input_keys![key]
-                              }
-                              onChange={(e) => {
-                                if (flowState) {
-                                  setFlowState(
-                                    (old: FlowState | undefined) => {
-                                      let newFlowState = cloneDeep(old!);
-                                      newFlowState.input_keys![
-                                        key
-                                      ] = e.target.value;
-                                      return newFlowState;
-                                    }
-                                  );
-                                }
                               }}
-                              disabled={chatKey === key}
+                            >
-                              placeholder="Enter text..."
+                              <ToggleShadComponent
-                            ></Textarea>
+                                enabled={chatKey === key}
+                                setEnabled={(value) =>
+                                  handleOnCheckedChange(value, key)
+                                }
+                                size="small"
+                                disabled={flowState.handle_keys!.some(
+                                  (t) => t === key
+                                )}
+                              />
+                            </div>
                           </div>
-                        </AccordionComponent>
+                        }
-                      </div>
+                        key={index}
-                    )
+                        keyValue={key}
-                  )
+                      >
+                        <div className="file-component-tab-column">
+                          {flowState?.handle_keys!.some((t) => t === key) && (
+                            <div className="font-normal text-muted-foreground ">
+                              Source: Component
+                            </div>
+                          )}
+                          <Textarea
+                            className="custom-scroll"
+                            value={flowState?.input_keys![key]}
+                            onChange={(e) => {
+                              if (flowState) {
+                                setFlowState((old: FlowState | undefined) => {
+                                  let newFlowState = cloneDeep(old!);
+                                  newFlowState.input_keys![key] =
+                                    e.target.value;
+                                  return newFlowState;
+                                });
+                              }
+                            }}
+                            disabled={chatKey === key}
+                            placeholder="Enter text..."
+                          ></Textarea>
+                        </div>
+                      </AccordionComponent>
+                    </div>
+                  ))
                 : null}
               {flowState?.memory_keys!.map((key, index) => (
                 <div className="file-component-accordion-div" key={index}>
@@ -628,15 +614,11 @@ export default function FormModal({
                       setChatValue={(value) => {
                         setChatValue(value);
                         if (flowState && chatKey) {
-                          setFlowState(
+                          setFlowState((old: FlowState | undefined) => {
-                            (old: FlowState | undefined) => {
+                            let newFlowState = cloneDeep(old!);
-                              let newFlowState = cloneDeep(old!);
+                            newFlowState.input_keys![chatKey] = value;
-                              newFlowState.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, 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/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,6 +18,7 @@ import Loading from "../../../../components/ui/loading";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { useLocationStore } from "../../../../stores/locationStore";
 import { useTypesStore } from "../../../../stores/typesStore";
 import { APIClassType } from "../../../../types/api";
 import { FlowType, NodeType, targetHandleType } from "../../../../types/flow";
@@ -33,7 +34,6 @@ import { cn, getRandomName, isWrappedWithClass } from "../../../../utils/utils";
 import ConnectionLineComponent from "../ConnectionLineComponent";
 import SelectionMenu from "../SelectionMenuComponent";
 import ExtraSidebar from "../extraSidebarComponent";
-import { useLocationStore } from "../../../../stores/locationStore";
 
 const nodeTypes = {
   genericNode: GenericNode,
@@ -179,7 +179,7 @@ export default function Page({
         nodes: flow?.data?.nodes ?? [],
         edges: flow?.data?.edges ?? [],
         viewport: flow?.data?.viewport ?? { zoom: 1, x: 0, y: 0 },
-      })
+      });
     }
 
     // Clear the previous timeout

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/stores/flowStore.ts

@@ -1,6 +1,5 @@
 import { cloneDeep } from "lodash";
 import {
-  Connection,
   Edge,
   EdgeChange,
   Node,
@@ -37,7 +36,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   reactFlowInstance: null,
   lastCopiedSelection: null,
 
-
   resetFlow: ({ nodes, edges, viewport }) => {
     set({
       nodes,
@@ -45,7 +43,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       flowState: undefined,
       sseData: {},
       isBuilt: false,
-
     });
     get().reactFlowInstance!.setViewport(viewport);
   },
@@ -60,11 +57,9 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   },
   setFlowState: (flowState) => {
     const newFlowState =
-      typeof flowState === "function"
+      typeof flowState === "function" ? flowState(get().flowState) : flowState;
-        ? flowState(get().flowState)
-        : flowState;
 
-    if(newFlowState !== get().flowState){
+    if (newFlowState !== get().flowState) {
       set(() => ({
         flowState: newFlowState,
       }));
@@ -87,30 +82,39 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     let newChange = typeof change === "function" ? change(get().nodes) : change;
     let newEdges = cleanEdges(newChange, get().edges);
 
-    set({ edges: newEdges, nodes: newChange, flowState: undefined, isBuilt: false, sseData: {} });
+    set({
+      edges: newEdges,
+      nodes: newChange,
+      flowState: undefined,
+      isBuilt: false,
+      sseData: {},
+    });
 
-    const flowsManager = useFlowsManagerStore.getState()
+    const flowsManager = useFlowsManagerStore.getState();
 
     flowsManager.autoSaveCurrentFlow(
-        newChange,
+      newChange,
-        newEdges,
+      newEdges,
-        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
+      get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
-      );
+    );
-
   },
   setEdges: (change) => {
     let newChange = typeof change === "function" ? change(get().edges) : change;
 
-    set({ edges: newChange, flowState: undefined, isBuilt: false, sseData: {} });
+    set({
+      edges: newChange,
+      flowState: undefined,
+      isBuilt: false,
+      sseData: {},
+    });
 
-    const flowsManager = useFlowsManagerStore.getState()
+    const flowsManager = useFlowsManagerStore.getState();
 
     flowsManager.autoSaveCurrentFlow(
-        get().nodes,
+      get().nodes,
-        newChange,
+      newChange,
-        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
+      get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
-      );
+    );
-
   },
   setNode: (id: string, change: Node | ((oldState: Node) => Node)) => {
     let newChange =

src/frontend/src/stores/flowsManagerStore.ts

@@ -9,8 +9,10 @@ import {
   uploadFlowsToDatabase,
 } from "../controllers/API";
 import { FlowType, NodeDataType } from "../types/flow";
-import { FlowState } from "../types/tabs";
+import {
-import { FlowsManagerStoreType, UseUndoRedoOptions } from "../types/zustand/flowsManager";
+  FlowsManagerStoreType,
+  UseUndoRedoOptions,
+} from "../types/zustand/flowsManager";
 import {
   addVersionToDuplicates,
   createFlowComponent,
@@ -333,8 +335,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 {
@@ -352,8 +356,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);
@@ -368,8 +375,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/stores/locationStore.tsx

@@ -2,27 +2,27 @@ import { create } from "zustand";
 import { LocationStoreType } from "../types/zustand/location";
 
 export const useLocationStore = create<LocationStoreType>((set, get) => ({
-    current: window.location.pathname.replace(/\/$/g, "").split("/"),
+  current: window.location.pathname.replace(/\/$/g, "").split("/"),
-    isStackedOpen:
+  isStackedOpen:
-      window.innerWidth > 1024 && window.location.pathname.split("/")[1]
+    window.innerWidth > 1024 && window.location.pathname.split("/")[1]
-        ? true
+      ? true
-        : false,
+      : false,
-    setCurrent: (newState) => {
+  setCurrent: (newState) => {
-        set({ current: newState });
+    set({ current: newState });
-        },
+  },
-    setIsStackedOpen: (newState) => {
+  setIsStackedOpen: (newState) => {
-        set({ isStackedOpen: newState });
+    set({ isStackedOpen: newState });
-    },
+  },
-    showSideBar: window.location.pathname.split("/")[1] ? true : false,
+  showSideBar: window.location.pathname.split("/")[1] ? true : false,
-    setShowSideBar: (newState) => {
+  setShowSideBar: (newState) => {
-        set({ showSideBar: newState });
+    set({ showSideBar: newState });
-    },
+  },
-    extraNavigation: { title: "" },
+  extraNavigation: { title: "" },
-    setExtraNavigation: (newState) => {
+  setExtraNavigation: (newState) => {
-        set({ extraNavigation: newState });
+    set({ extraNavigation: newState });
-    },
+  },
-    extraComponent: <></>,
+  extraComponent: <></>,
-    setExtraComponent: (newState) => {
+  setExtraComponent: (newState) => {
-        set({ extraComponent: newState });
+    set({ extraComponent: newState });
-    },
+  },
 }));

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,
@@ -14,11 +13,20 @@ export type FlowStoreType = {
   sseData: object;
   isBuilding: boolean;
   setIsBuilding: (isBuilding: boolean) => void;
-  resetFlow: (flow: {nodes: Node[], edges: Edge[], viewport: Viewport}) => void;
+  resetFlow: (flow: {
+    nodes: Node[];
+    edges: Edge[];
+    viewport: Viewport;
+  }) => void;
   reactFlowInstance: ReactFlowInstance | null;
   setReactFlowInstance: (newState: ReactFlowInstance) => void;
   flowState: FlowState | undefined;
-  setFlowState: (state: FlowState | undefined | ((oldState: FlowState | undefined) => FlowState)) => void;
+  setFlowState: (
+    state:
+      | FlowState
+      | undefined
+      | ((oldState: FlowState | undefined) => FlowState)
+  ) => void;
   nodes: Node[];
   edges: Edge[];
   onNodesChange: OnNodesChange;
@@ -39,5 +47,4 @@ export type FlowStoreType = {
   ) => void;
   isBuilt: boolean;
   setIsBuilt: (isBuilt: boolean) => void;
-
 };

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

@@ -1,6 +1,5 @@
-import { Node, Edge, Viewport, XYPosition } from "reactflow";
+import { Edge, Node, Viewport, XYPosition } from "reactflow";
 import { FlowType } from "../../flow";
-import { FlowState, FlowsState } from "../../tabs";
 
 export type FlowsManagerStoreType = {
   flows: Array<FlowType>;
@@ -12,13 +11,35 @@ export type FlowsManagerStoreType = {
   setIsLoading: (isLoading: boolean) => 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

@@ -299,13 +299,8 @@ export function buildTweakObject(tweak: tweakType) {
 export function getChatInputField(flow: FlowType, flowState?: FlowState) {
   let chat_input_field = "text";
 
-  if (
+  if (flowState && flowState.input_keys) {
-    flowState &&
+    chat_input_field = Object.keys(flowState.input_keys!)[0];
-    flowState.input_keys
-  ) {
-    chat_input_field = Object.keys(
-      flowState.input_keys!
-    )[0];
   }
   return chat_input_field;
 }