Format code

src/frontend/src/App.tsx

@@ -29,10 +29,10 @@ export default function App() {
   useTrackLastVisitedPath();
 
   const removeFromTempNotificationList = useAlertStore(
-    (state) => state.removeFromTempNotificationList,
+    (state) => state.removeFromTempNotificationList
   );
   const tempNotificationList = useAlertStore(
-    (state) => state.tempNotificationList,
+    (state) => state.tempNotificationList
   );
   const [fetchError, setFetchError] = useState(false);
   const isLoading = useFlowsManagerStore((state) => state.isLoading);
@@ -50,7 +50,7 @@ export default function App() {
   const refreshVersion = useDarkStore((state) => state.refreshVersion);
   const refreshStars = useDarkStore((state) => state.refreshStars);
   const setGlobalVariables = useGlobalVariablesStore(
-    (state) => state.setGlobalVariables,
+    (state) => state.setGlobalVariables
   );
   const checkHasStore = useStoreStore((state) => state.checkHasStore);
   const navigate = useNavigate();

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

@@ -1,5 +1,6 @@
 import { cloneDeep } from "lodash";
 import { ReactNode, useEffect, useRef, useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 import { Handle, Position, useUpdateNodeInternals } from "reactflow";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
 import DictComponent from "../../../../components/dictComponent";
@@ -24,6 +25,7 @@ import {
 import { Case } from "../../../../shared/components/caseComponent";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { useShortcutsStore } from "../../../../stores/shortcuts";
 import { useTypesStore } from "../../../../stores/typesStore";
 import { APIClassType } from "../../../../types/api";
 import { ParameterComponentType } from "../../../../types/components";
@@ -48,11 +50,9 @@ import useFetchDataOnMount from "../../../hooks/use-fetch-data-on-mount";
 import useHandleOnNewValue from "../../../hooks/use-handle-new-value";
 import useHandleNodeClass from "../../../hooks/use-handle-node-class";
 import useHandleRefreshButtonPress from "../../../hooks/use-handle-refresh-buttons";
+import OutputModal from "../outputModal";
 import TooltipRenderComponent from "../tooltipRenderComponent";
 import { TEXT_FIELD_TYPES } from "./constants";
-import OutputModal from "../outputModal";
-import { useShortcutsStore } from "../../../../stores/shortcuts";
-import { useHotkeys } from "react-hotkeys-hook";
 
 export default function ParameterComponent({
   left,
@@ -121,7 +121,7 @@ export default function ParameterComponent({
     debouncedHandleUpdateValues,
     setNode,
     renderTooltips,
-    setIsLoading,
+    setIsLoading
   );
 
   const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
@@ -130,7 +130,7 @@ export default function ParameterComponent({
     takeSnapshot,
     setNode,
     updateNodeInternals,
-    renderTooltips,
+    renderTooltips
   );
 
   const { handleRefreshButtonPress: handleRefreshButtonPressHook } =
@@ -139,7 +139,7 @@ export default function ParameterComponent({
   let disabled =
     edges.some(
       (edge) =>
-        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
+        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id)
     ) ?? false;
 
   const handleRefreshButtonPress = async (name, data) => {
@@ -152,12 +152,12 @@ export default function ParameterComponent({
     handleUpdateValues,
     setNode,
     renderTooltips,
-    setIsLoading,
+    setIsLoading
   );
 
   const handleOnNewValue = async (
     newValue: string | string[] | boolean | Object[],
-    skipSnapshot: boolean | undefined = false,
+    skipSnapshot: boolean | undefined = false
   ): Promise<void> => {
     handleOnNewValueHook(newValue, skipSnapshot);
   };
@@ -239,7 +239,7 @@ export default function ParameterComponent({
               className={classNames(
                 left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
                 "h-3 w-3 rounded-full border-2 bg-background",
-                !showNode ? "mt-0" : "",
+                !showNode ? "mt-0" : ""
               )}
               style={{
                 borderColor: color ?? nodeColors.unknown,
@@ -309,7 +309,7 @@ export default function ParameterComponent({
                         "h-5 w-5 rounded-md",
                         displayOutputPreview && !unknownOutput
                           ? " hover:bg-secondary-foreground/5 hover:text-medium-indigo"
-                          : " cursor-not-allowed text-muted-foreground",
+                          : " cursor-not-allowed text-muted-foreground"
                       )}
                       name={"ScanEye"}
                     />
@@ -359,7 +359,7 @@ export default function ParameterComponent({
                   }
                   className={classNames(
                     left ? "-ml-0.5" : "-mr-0.5",
-                    "h-3 w-3 rounded-full border-2 bg-background",
+                    "h-3 w-3 rounded-full border-2 bg-background"
                   )}
                   style={{ borderColor: color ?? nodeColors.unknown }}
                   onClick={() => setFilterEdge(groupedEdge.current)}

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

@@ -24,7 +24,7 @@ const TooltipRenderComponent = ({ item, index, left }) => {
       <span
         key={index}
         className={classNames(
-          index > 0 ? "mt-2 flex items-center" : "mt-3 flex items-center",
+          index > 0 ? "mt-2 flex items-center" : "mt-3 flex items-center"
         )}
       >
         <div

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

@@ -61,10 +61,10 @@ export default function GenericNode({
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const isDark = useDarkStore((state) => state.dark);
   const buildStatus = useFlowStore(
-    (state) => state.flowBuildStatus[data.id]?.status,
+    (state) => state.flowBuildStatus[data.id]?.status
   );
   const lastRunTime = useFlowStore(
-    (state) => state.flowBuildStatus[data.id]?.timestamp,
+    (state) => state.flowBuildStatus[data.id]?.timestamp
   );
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
 
@@ -72,7 +72,7 @@ export default function GenericNode({
   const [nodeName, setNodeName] = useState(data.node!.display_name);
   const [inputDescription, setInputDescription] = useState(false);
   const [nodeDescription, setNodeDescription] = useState(
-    data.node?.description!,
+    data.node?.description!
   );
   const [isOutdated, setIsOutdated] = useState(false);
   const [validationStatus, setValidationStatus] =
@@ -90,7 +90,7 @@ export default function GenericNode({
     data.node!,
     setNode,
     setIsOutdated,
-    updateNodeInternals,
+    updateNodeInternals
   );
 
   const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
@@ -117,12 +117,12 @@ export default function GenericNode({
     selected: boolean,
     showNode: boolean,
     buildStatus: BuildStatus | undefined,
-    validationStatus: VertexBuildTypeAPI | null,
+    validationStatus: VertexBuildTypeAPI | null
   ) => {
     const specificClassFromBuildStatus = getSpecificClassFromBuildStatus(
       buildStatus,
       validationStatus,
-      isDark,
+      isDark
     );
 
     const baseBorderClass = getBaseBorderClass(selected);
@@ -131,7 +131,7 @@ export default function GenericNode({
       baseBorderClass,
       nodeSizeClass,
       "generic-node-div group/node",
-      specificClassFromBuildStatus,
+      specificClassFromBuildStatus
     );
     return names;
   };
@@ -176,7 +176,7 @@ export default function GenericNode({
     showNode,
     isEmoji,
     nodeIconFragment,
-    checkNodeIconFragment,
+    checkNodeIconFragment
   );
 
   function countHandles(): void {
@@ -309,7 +309,7 @@ export default function GenericNode({
           selected,
           showNode,
           buildStatus,
-          validationStatus,
+          validationStatus
         )}
       >
         {data.node?.beta && showNode && (
@@ -457,7 +457,7 @@ export default function GenericNode({
                             }
                             title={getFieldTitle(
                               data.node?.template!,
-                              templateField,
+                              templateField
                             )}
                             info={data.node?.template[templateField].info}
                             name={templateField}
@@ -485,7 +485,7 @@ export default function GenericNode({
                             proxy={data.node?.template[templateField].proxy}
                             showNode={showNode}
                           />
-                        ),
+                        )
                     )}
                   <ParameterComponent
                     selected={selected}
@@ -643,7 +643,7 @@ export default function GenericNode({
                       !data.node?.description) &&
                       nameEditable
                       ? "font-light italic"
-                      : "",
+                      : ""
                   )}
                   onDoubleClick={(e) => {
                     setInputDescription(true);
@@ -713,13 +713,13 @@ export default function GenericNode({
                         }
                         title={getFieldTitle(
                           data.node?.template!,
-                          templateField,
+                          templateField
                         )}
                         info={data.node?.template[templateField].info}
                         name={templateField}
                         tooltipTitle={
                           data.node?.template[templateField].input_types?.join(
-                            "\n",
+                            "\n"
                           ) ?? data.node?.template[templateField].type
                         }
                         required={data.node!.template[templateField].required}
@@ -746,7 +746,7 @@ export default function GenericNode({
               <div
                 className={classNames(
                   Object.keys(data.node!.template).length < 1 ? "hidden" : "",
-                  "flex-max-width justify-center",
+                  "flex-max-width justify-center"
                 )}
               >
                 {" "}

src/frontend/src/CustomNodes/helpers/get-class-from-build-status.ts

@@ -4,7 +4,7 @@ import { VertexBuildTypeAPI } from "../../types/api";
 export const getSpecificClassFromBuildStatus = (
   buildStatus: BuildStatus | undefined,
   validationStatus: VertexBuildTypeAPI | null,
-  isDark: boolean,
+  isDark: boolean
 ) => {
   let isInvalid = validationStatus && !validationStatus.valid;
 

src/frontend/src/CustomNodes/hooks/use-check-code-validity.tsx

@@ -6,7 +6,7 @@ const useCheckCodeValidity = (
   data: NodeDataType,
   templates: { [key: string]: any },
   setIsOutdated: (value: boolean) => void,
-  types,
+  types
 ) => {
   useEffect(() => {
     // This one should run only once

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

@@ -13,7 +13,7 @@ const useFetchDataOnMount = (
   handleUpdateValues,
   setNode,
   renderTooltips,
-  setIsLoading,
+  setIsLoading
 ) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);
 

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

@@ -14,7 +14,7 @@ const useHandleOnNewValue = (
   debouncedHandleUpdateValues,
   setNode,
   renderTooltips,
-  setIsLoading,
+  setIsLoading
 ) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);
 

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

@@ -6,7 +6,7 @@ const useHandleNodeClass = (
   takeSnapshot,
   setNode,
   updateNodeInternals,
-  renderTooltips,
+  renderTooltips
 ) => {
   const handleNodeClass = (newNodeClass, code) => {
     if (!data.node) return;

src/frontend/src/CustomNodes/hooks/use-icon-render.tsx

@@ -12,8 +12,8 @@ const useIconNodeRender = (
   checkNodeIconFragment: (
     iconColor: string,
     iconName: string,
-    iconClassName: string,
+    iconClassName: string
-  ) => JSX.Element,
+  ) => JSX.Element
 ) => {
   const iconNodeRender = useCallback(() => {
     const iconElement = data?.node?.icon;

src/frontend/src/CustomNodes/hooks/use-icons-status.tsx

@@ -1,14 +1,12 @@
-import ForwardedIconComponent from "../../components/genericIconComponent";
 import Checkmark from "../../components/ui/checkmark";
 import Loading from "../../components/ui/loading";
 import Xmark from "../../components/ui/xmark";
 import { BuildStatus } from "../../constants/enums";
 import { VertexBuildTypeAPI } from "../../types/api";
-import { cn } from "../../utils/utils";
 
 const useIconStatus = (
   buildStatus: BuildStatus | undefined,
-  validationStatus: VertexBuildTypeAPI | null,
+  validationStatus: VertexBuildTypeAPI | null
 ) => {
   const conditionSuccess = validationStatus && validationStatus.valid;
   const conditionError =

src/frontend/src/CustomNodes/hooks/use-update-node-code.tsx

@@ -7,7 +7,7 @@ const useUpdateNodeCode = (
   dataNode: APIClassType, // Define YourNodeType according to your data structure
   setNode: (id: string, callback: (oldNode) => any) => void,
   setIsOutdated: (value: boolean) => void,
-  updateNodeInternals: (id: string) => void,
+  updateNodeInternals: (id: string) => void
 ) => {
   const updateNodeCode = useCallback(
     (newNodeClass: APIClassType, code: string, name: string) => {
@@ -30,7 +30,7 @@ const useUpdateNodeCode = (
 
       updateNodeInternals(dataId);
     },
-    [dataId, dataNode, setNode, setIsOutdated, updateNodeInternals],
+    [dataId, dataNode, setNode, setIsOutdated, updateNodeInternals]
   );
 
   return updateNodeCode;

src/frontend/src/CustomNodes/utils/get-field-title.tsx

@@ -2,7 +2,7 @@ import { APITemplateType } from "../../types/api";
 
 export default function getFieldTitle(
   template: APITemplateType,
-  templateField: string,
+  templateField: string
 ): string {
   return template[templateField].display_name
     ? template[templateField].display_name!

src/frontend/src/alerts/alertDropDown/index.tsx

@@ -16,13 +16,13 @@ export default function AlertDropdown({
 }: AlertDropdownType): JSX.Element {
   const notificationList = useAlertStore((state) => state.notificationList);
   const clearNotificationList = useAlertStore(
-    (state) => state.clearNotificationList,
+    (state) => state.clearNotificationList
   );
   const removeFromNotificationList = useAlertStore(
-    (state) => state.removeFromNotificationList,
+    (state) => state.removeFromNotificationList
   );
   const setNotificationCenter = useAlertStore(
-    (state) => state.setNotificationCenter,
+    (state) => state.setNotificationCenter
   );
 
   const [open, setOpen] = useState(false);

src/frontend/src/components/ImageViewer/index.tsx

@@ -31,14 +31,14 @@ export default function ImageViewer({ image }) {
         const fullPageButton = document.getElementById("full-page-button");
 
         zoomInButton!.addEventListener("click", () =>
-          viewer.viewport.zoomBy(1.2),
+          viewer.viewport.zoomBy(1.2)
         );
         zoomOutButton!.addEventListener("click", () =>
-          viewer.viewport.zoomBy(0.8),
+          viewer.viewport.zoomBy(0.8)
         );
         homeButton!.addEventListener("click", () => viewer.viewport.goHome());
         fullPageButton!.addEventListener("click", () =>
-          viewer.setFullScreen(true),
+          viewer.setFullScreen(true)
         );
 
         // Optionally, you can set additional viewer options here
@@ -47,16 +47,16 @@ export default function ImageViewer({ image }) {
         return () => {
           viewer.destroy();
           zoomInButton!.removeEventListener("click", () =>
-            viewer.viewport.zoomBy(1.2),
+            viewer.viewport.zoomBy(1.2)
           );
           zoomOutButton!.removeEventListener("click", () =>
-            viewer.viewport.zoomBy(0.8),
+            viewer.viewport.zoomBy(0.8)
           );
           homeButton!.removeEventListener("click", () =>
-            viewer.viewport.goHome(),
+            viewer.viewport.goHome()
           );
           fullPageButton!.removeEventListener("click", () =>
-            viewer.setFullScreen(true),
+            viewer.setFullScreen(true)
           );
         };
       }

src/frontend/src/components/accordionComponent/composite/folderAccordionComponent/index.tsx

@@ -15,7 +15,7 @@ export default function FolderAccordionComponent({
   options,
 }: AccordionComponentType): JSX.Element {
   const [value, setValue] = useState(
-    open.length === 0 ? "" : getOpenAccordion(),
+    open.length === 0 ? "" : getOpenAccordion()
   );
 
   function getOpenAccordion(): string {

src/frontend/src/components/accordionComponent/index.tsx

@@ -17,7 +17,7 @@ export default function AccordionComponent({
   sideBar,
 }: AccordionComponentType): JSX.Element {
   const [value, setValue] = useState(
-    open.length === 0 ? "" : getOpenAccordion(),
+    open.length === 0 ? "" : getOpenAccordion()
   );
 
   function getOpenAccordion(): string {
@@ -52,7 +52,7 @@ export default function AccordionComponent({
             disabled={disabled}
             className={cn(
               sideBar ? "w-full bg-muted px-[0.75rem] py-[0.5rem]" : "ml-3",
-              disabled ? "cursor-not-allowed" : "cursor-pointer",
+              disabled ? "cursor-not-allowed" : "cursor-pointer"
             )}
           >
             {trigger}

src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx

@@ -29,19 +29,19 @@ export default function AddNewVariableButton({
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const componentFields = useTypesStore((state) => state.ComponentFields);
   const unavaliableFields = new Set(
-    Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields)),
+    Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields))
   );
 
   const availableFields = () => {
     const fields = Array.from(componentFields).filter(
-      (field) => !unavaliableFields.has(field),
+      (field) => !unavaliableFields.has(field)
     );
 
     return sortByName(fields);
   };
 
   const addGlobalVariable = useGlobalVariablesStore(
-    (state) => state.addGlobalVariable,
+    (state) => state.addGlobalVariable
   );
 
   function handleSaveVariable() {

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

@@ -10,7 +10,7 @@ export default function DragCardComponent({ data }: { data: storeComponent }) {
         draggable
         //TODO check color schema
         className={cn(
-          "group relative flex flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#ffffff10]",
+          "group relative flex flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#ffffff10]"
         )}
       >
         <div>
@@ -22,7 +22,7 @@ export default function DragCardComponent({ data }: { data: storeComponent }) {
                     "visible flex-shrink-0",
                     data.is_component
                       ? "mx-0.5 h-6 w-6 text-component-icon"
-                      : "h-7 w-7 flex-shrink-0 text-flow-icon",
+                      : "h-7 w-7 flex-shrink-0 text-flow-icon"
                   )}
                   name={data.is_component ? "ToyBrick" : "Group"}
                 />

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

@@ -60,11 +60,11 @@ export default function CollectionCardComponent({
   const [loading, setLoading] = useState(false);
   const [loadingLike, setLoadingLike] = useState(false);
   const [liked_by_user, setLiked_by_user] = useState(
-    data?.liked_by_user ?? false,
+    data?.liked_by_user ?? false
   );
   const [likes_count, setLikes_count] = useState(data?.liked_by_count ?? 0);
   const [downloads_count, setDownloads_count] = useState(
-    data?.downloads_count ?? 0,
+    data?.downloads_count ?? 0
   );
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
@@ -75,12 +75,12 @@ export default function CollectionCardComponent({
   const [openPlayground, setOpenPlayground] = useState(false);
   const [openDelete, setOpenDelete] = useState(false);
   const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
+    (state) => state.setCurrentFlowId
   );
   const [loadingPlayground, setLoadingPlayground] = useState(false);
 
   const selectedFlowsComponentsCards = useFlowsManagerStore(
-    (state) => state.selectedFlowsComponentsCards,
+    (state) => state.selectedFlowsComponentsCards
   );
 
   const name = data.is_component ? "Component" : "Flow";
@@ -220,7 +220,7 @@ export default function CollectionCardComponent({
           "group relative flex h-[11rem] flex-col justify-between overflow-hidden hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#5f5f5f0e]",
           disabled ? "pointer-events-none opacity-50" : "",
           onClick ? "cursor-pointer" : "",
-          isSelectedCard ? "border border-selected" : "",
+          isSelectedCard ? "border border-selected" : ""
         )}
         onClick={onClick}
       >
@@ -233,7 +233,7 @@ export default function CollectionCardComponent({
                     "visible flex-shrink-0",
                     data.is_component
                       ? "mx-0.5 h-6 w-6 text-component-icon"
-                      : "h-7 w-7 flex-shrink-0 text-flow-icon",
+                      : "h-7 w-7 flex-shrink-0 text-flow-icon"
                   )}
                   name={data.is_component ? "ToyBrick" : "Group"}
                 />
@@ -428,7 +428,7 @@ export default function CollectionCardComponent({
                             name="Trash2"
                             className={cn(
                               "h-5 w-5",
-                              !authorized ? " text-ring" : "",
+                              !authorized ? " text-ring" : ""
                             )}
                           />
                         </Button>
@@ -463,7 +463,7 @@ export default function CollectionCardComponent({
                             liked_by_user
                               ? "fill-destructive stroke-destructive"
                               : "",
-                            !authorized ? " text-ring" : "",
+                            !authorized ? " text-ring" : ""
                           )}
                         />
                       </Button>
@@ -501,7 +501,7 @@ export default function CollectionCardComponent({
                         }
                         className={cn(
                           loading ? "h-5 w-5 animate-spin" : "h-5 w-5",
-                          !authorized ? " text-ring" : "",
+                          !authorized ? " text-ring" : ""
                         )}
                       />
                     </Button>

src/frontend/src/components/cardsWrapComponent/index.tsx

@@ -65,7 +65,7 @@ export default function CardsWrapComponent({
         "h-full w-full",
         isDragging
           ? "mb-36 flex flex-col items-center justify-center gap-4 text-2xl font-light"
-          : "",
+          : ""
       )}
     >
       {isDragging ? (

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

@@ -65,7 +65,7 @@ export default function FlowToolbar(): JSX.Element {
             "relative inline-flex h-full w-full items-center justify-center gap-[4px] bg-muted px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-background hover:bg-hover ",
             !hasApiKey || !validApiKey || !hasStore
               ? " button-disable text-muted-foreground  "
-              : "",
+              : ""
           )}
         >
           <ForwardedIconComponent
@@ -74,7 +74,7 @@ export default function FlowToolbar(): JSX.Element {
               "-m-0.5 -ml-1 h-6 w-6",
               !hasApiKey || !validApiKey || !hasStore
                 ? "extra-side-bar-save-disable"
-                : "",
+                : ""
             )}
           />
           Share
@@ -88,7 +88,7 @@ export default function FlowToolbar(): JSX.Element {
       hasStore,
       openShareModal,
       setOpenShareModal,
-    ],
+    ]
   );
 
   return (
@@ -144,7 +144,7 @@ export default function FlowToolbar(): JSX.Element {
                 >
                   <div
                     className={classNames(
-                      "relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-hover",
+                      "relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-hover"
                     )}
                   >
                     <ForwardedIconComponent

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -18,7 +18,7 @@ export default function CodeAreaComponent({
   setOpen,
 }: CodeAreaComponentType) {
   const [myValue, setMyValue] = useState(
-    typeof value == "string" ? value : JSON.stringify(value),
+    typeof value == "string" ? value : JSON.stringify(value)
   );
   useEffect(() => {
     if (disabled && myValue !== "") {

src/frontend/src/components/csvOutputComponent/index.tsx

@@ -67,7 +67,7 @@ function CsvOutputComponent({
     if (file) {
       const { rowData: data, colDefs: columns } = convertCSVToData(
         file,
-        separator,
+        separator
       );
       setRowData(data);
       setColDefs(columns);

src/frontend/src/components/dictComponent/index.tsx

@@ -24,7 +24,7 @@ export default function DictComponent({
     <div
       className={classNames(
         value.length > 1 && editNode ? "my-1" : "",
-        "flex w-full flex-col gap-3",
+        "flex w-full flex-col gap-3"
       )}
     >
       {

src/frontend/src/components/dropdownComponent/index.tsx

@@ -58,7 +58,7 @@ export default function Dropdown({
                       ? "dropdown-component-outline"
                       : "dropdown-component-false-outline",
                     "w-full justify-between font-normal",
-                    editNode ? "input-edit-node" : "py-2",
+                    editNode ? "input-edit-node" : "py-2"
                   )}
                 >
                   <span data-testid={`value-dropdown-` + id}>
@@ -106,7 +106,7 @@ export default function Dropdown({
                           name="Check"
                           className={cn(
                             "ml-auto h-4 w-4 text-primary",
-                            value === option ? "opacity-100" : "opacity-0",
+                            value === option ? "opacity-100" : "opacity-0"
                           )}
                         />
                       </CommandItem>

src/frontend/src/components/editFlowSettingsComponent/index.tsx

@@ -99,7 +99,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           <span
             className={cn(
               "font-normal text-muted-foreground word-break-break-word",
-              description === "" ? "font-light italic" : "",
+              description === "" ? "font-light italic" : ""
             )}
           >
             {description === "" ? "No description" : description}

src/frontend/src/components/genericIconComponent/index.tsx

@@ -18,7 +18,7 @@ export const ForwardedIconComponent = memo(
         strokeWidth,
         id = "",
       }: IconComponentProps,
-      ref,
+      ref
     ) => {
       const [showFallback, setShowFallback] = useState(false);
 
@@ -65,8 +65,8 @@ export const ForwardedIconComponent = memo(
           />
         </Suspense>
       );
-    },
+    }
-  ),
+  )
 );
 
 export default ForwardedIconComponent;

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

@@ -115,7 +115,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
                       title: UPLOAD_ERROR_ALERT,
                       list: [error],
                     });
-                  },
+                  }
                 );
               }}
             >
@@ -201,7 +201,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
               name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"}
               className={cn(
                 "h-4 w-4",
-                isBuilding || saveLoading ? "animate-spin" : "animate-wiggle",
+                isBuilding || saveLoading ? "animate-spin" : "animate-wiggle"
               )}
             />
             {printByBuildStatus()}

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

@@ -59,7 +59,7 @@ export default function Header(): JSX.Element {
     const lastFlowVisitedIndex = routeHistory
       .reverse()
       .findIndex(
-        (path) => path.includes("/flow/") && path !== location.pathname,
+        (path) => path.includes("/flow/") && path !== location.pathname
       );
 
     const lastFlowVisited = routeHistory[lastFlowVisitedIndex];
@@ -201,7 +201,7 @@ export default function Header(): JSX.Element {
                     src={
                       `${BACKEND_URL.slice(
                         0,
-                        BACKEND_URL.length - 1,
+                        BACKEND_URL.length - 1
                       )}${BASE_URL_API}files/profile_pictures/${
                         userData?.profile_image ?? "Space/046-rocket.svg"
                       }` ?? profileCircle
@@ -219,7 +219,7 @@ export default function Header(): JSX.Element {
                           src={
                             `${BACKEND_URL.slice(
                               0,
-                              BACKEND_URL.length - 1,
+                              BACKEND_URL.length - 1
                             )}${BASE_URL_API}files/profile_pictures/${
                               userData?.profile_image ?? "Space/046-rocket.svg"
                             }` ?? profileCircle

src/frontend/src/components/horizontalScrollFadeComponent/index.tsx

@@ -32,11 +32,11 @@ export default function HorizontalScrollFadeComponent({
 
       fadeContainerRef.current.classList.toggle(
         "fade-left",
-        isScrollable && !atStart,
+        isScrollable && !atStart
       );
       fadeContainerRef.current.classList.toggle(
         "fade-right",
-        isScrollable && !atEnd,
+        isScrollable && !atEnd
       );
     };
 

src/frontend/src/components/inputComponent/components/popover/index.tsx

@@ -103,7 +103,7 @@ const CustomInputPopover = ({
               (password && !(setSelectedOption || setSelectedOptions))
               ? "pr-8"
               : "",
-            className!,
+            className!
           )}
           placeholder={password && editNode ? "Key" : placeholder}
           onChange={handleInputChange}
@@ -141,15 +141,15 @@ const CustomInputPopover = ({
                   onSelect={(currentValue) => {
                     setSelectedOption &&
                       setSelectedOption(
-                        currentValue === selectedOption ? "" : currentValue,
+                        currentValue === selectedOption ? "" : currentValue
                       );
                     setSelectedOptions &&
                       setSelectedOptions(
                         selectedOptions?.includes(currentValue)
                           ? selectedOptions.filter(
-                              (item) => item !== currentValue,
+                              (item) => item !== currentValue
                             )
-                          : [...selectedOptions, currentValue],
+                          : [...selectedOptions, currentValue]
                       );
                     !setSelectedOptions && setShowOptions(false);
                   }}
@@ -162,7 +162,7 @@ const CustomInputPopover = ({
                           selectedOption === option ||
                             selectedOptions?.includes(option)
                             ? "opacity-100"
-                            : "opacity-0",
+                            : "opacity-0"
                         )}
                       >
                         <div className="absolute opacity-100 transition-all group-hover:opacity-0">

src/frontend/src/components/inputComponent/components/popoverObject/index.tsx

@@ -64,7 +64,7 @@ const CustomInputPopoverObject = ({
               ? selectedOptions
                   .map(
                     (optionId) =>
-                        options.find((option) => option.id === optionId)?.name,
+                      options.find((option) => option.id === optionId)?.name
                   )
                   .join(", ")
               : value
@@ -115,15 +115,15 @@ const CustomInputPopoverObject = ({
                   onSelect={(currentValue) => {
                     setSelectedOption &&
                       setSelectedOption(
-                        currentValue === selectedOption ? "" : currentValue,
+                        currentValue === selectedOption ? "" : currentValue
                       );
                     setSelectedOptions &&
                       setSelectedOptions(
                         selectedOptions?.includes(currentValue)
                           ? selectedOptions.filter(
-                              (item) => item !== currentValue,
+                              (item) => item !== currentValue
                             )
-                          : [...selectedOptions, currentValue],
+                          : [...selectedOptions, currentValue]
                       );
                     !setSelectedOptions && setShowOptions(false);
                   }}
@@ -136,7 +136,7 @@ const CustomInputPopoverObject = ({
                           selectedOption === option.id ||
                             selectedOptions?.includes(option.id)
                             ? "opacity-100"
-                            : "opacity-0",
+                            : "opacity-0"
                         )}
                       >
                         <div className="absolute opacity-100 transition-all group-hover:opacity-0">

src/frontend/src/components/inputComponent/index.tsx

@@ -72,7 +72,7 @@ export default function InputComponent({
               editNode ? " input-edit-node " : "",
               password && editNode ? "pr-8" : "",
               password && !editNode ? "pr-10" : "",
-              className!,
+              className!
             )}
             placeholder={password && editNode ? "Key" : placeholder}
             onChange={(e) => {
@@ -155,7 +155,7 @@ export default function InputComponent({
         <span
           className={cn(
             password && selectedOption === "" ? "right-8" : "right-0",
-            "absolute inset-y-0 flex items-center pr-2.5",
+            "absolute inset-y-0 flex items-center pr-2.5"
           )}
         >
           <button
@@ -168,7 +168,7 @@ export default function InputComponent({
               onChange && setSelectedOption && selectedOption !== ""
                 ? "text-medium-indigo"
                 : "text-muted-foreground",
-              "hover:text-accent-foreground",
+              "hover:text-accent-foreground"
             )}
           >
             <ForwardedIconComponent
@@ -188,7 +188,7 @@ export default function InputComponent({
             "mb-px",
             editNode
               ? "input-component-true-button"
-              : "input-component-false-button",
+              : "input-component-false-button"
           )}
           onClick={(event) => {
             event.preventDefault();
@@ -205,7 +205,7 @@ export default function InputComponent({
               className={classNames(
                 editNode
                   ? "input-component-true-svg"
-                  : "input-component-false-svg",
+                  : "input-component-false-svg"
               )}
             >
               <path
@@ -224,7 +224,7 @@ export default function InputComponent({
               className={classNames(
                 editNode
                   ? "input-component-true-svg"
-                  : "input-component-false-svg",
+                  : "input-component-false-svg"
               )}
             >
               <path

src/frontend/src/components/inputGlobalComponent/index.tsx

@@ -19,15 +19,15 @@ export default function InputGlobalComponent({
   editNode = false,
 }: InputGlobalComponentType): JSX.Element {
   const globalVariablesEntries = useGlobalVariablesStore(
-    (state) => state.globalVariablesEntries,
+    (state) => state.globalVariablesEntries
   );
 
   const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
   const unavaliableFields = useGlobalVariablesStore(
-    (state) => state.unavaliableFields,
+    (state) => state.unavaliableFields
   );
   const removeGlobalVariable = useGlobalVariablesStore(
-    (state) => state.removeGlobalVariable,
+    (state) => state.removeGlobalVariable
   );
   const setErrorData = useAlertStore((state) => state.setErrorData);
 
@@ -121,7 +121,7 @@ export default function InputGlobalComponent({
             <ForwardedIconComponent
               name="Trash2"
               className={cn(
-                "h-4 w-4 text-primary opacity-0 hover:text-status-red group-hover:opacity-100",
+                "h-4 w-4 text-primary opacity-0 hover:text-status-red group-hover:opacity-100"
               )}
               aria-hidden="true"
             />

src/frontend/src/components/inputListComponent/index.tsx

@@ -31,7 +31,7 @@ export default function InputListComponent({
     <div
       className={classNames(
         value.length > 1 && editNode ? "my-1" : "",
-        "flex flex-col gap-3",
+        "flex flex-col gap-3"
       )}
     >
       {value.map((singleValue, idx) => {

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

@@ -27,7 +27,7 @@ const SideBarButtonsComponent = ({
               pathname === item.href
                 ? "border border-border bg-muted hover:bg-muted"
                 : "border border-transparent hover:border-border hover:bg-transparent",
-              "flex w-full shrink-0 justify-start gap-4",
+              "flex w-full shrink-0 justify-start gap-4"
             )}
           >
             {item.icon}

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

@@ -31,7 +31,7 @@ const SideBarFoldersButtonsComponent = ({
   const [foldersNames, setFoldersNames] = useState({});
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
   const [editFolders, setEditFolderName] = useState(
-    folders.map((obj) => ({ name: obj.name, edit: false })),
+    folders.map((obj) => ({ name: obj.name, edit: false }))
   );
   const uploadFolder = useFolderStore((state) => state.uploadFolder);
   const currentFolder = pathname.split("/");
@@ -58,7 +58,7 @@ const SideBarFoldersButtonsComponent = ({
 
   const { dragOver, dragEnter, dragLeave, onDrop } = useFileDrop(
     folderId,
-    handleFolderChange,
+    handleFolderChange
   );
 
   const handleUploadFlowsToFolder = () => {
@@ -86,7 +86,7 @@ const SideBarFoldersButtonsComponent = ({
     addFolder({ name: "New Folder", parent_id: null, description: "" }).then(
       (res) => {
         getFoldersApi(true);
-      },
+      }
     );
   }
 
@@ -132,7 +132,7 @@ const SideBarFoldersButtonsComponent = ({
         <>
           {folders.map((item, index) => {
             const editFolderName = editFolders?.filter(
-              (folder) => folder.name === item.name,
+              (folder) => folder.name === item.name
             )[0];
             return (
               <div
@@ -148,7 +148,7 @@ const SideBarFoldersButtonsComponent = ({
                     ? "border border-border bg-muted hover:bg-muted"
                     : "border hover:bg-transparent lg:border-transparent lg:hover:border-border",
                   "group flex w-full shrink-0 cursor-pointer gap-2 opacity-100 lg:min-w-full",
-                  folderIdDragging === item.id! ? "bg-border" : "",
+                  folderIdDragging === item.id! ? "bg-border" : ""
                 )}
                 onClick={() => handleChangeFolder!(item.id!)}
               >
@@ -218,7 +218,7 @@ const SideBarFoldersButtonsComponent = ({
                               folders.map((obj) => ({
                                 name: obj.name,
                                 edit: false,
-                              })),
+                              }))
                             );
                           }
                           if (e.key === "Enter") {
@@ -251,10 +251,10 @@ const SideBarFoldersButtonsComponent = ({
                             };
                             const updatedFolder = await updateFolder(
                               body,
-                              item.id!,
+                              item.id!
                             );
                             const updateFolders = folders.filter(
-                              (f) => f.name !== item.name,
+                              (f) => f.name !== item.name
                             );
                             setFolders([...updateFolders, updatedFolder]);
                             setFoldersNames({});
@@ -262,7 +262,7 @@ const SideBarFoldersButtonsComponent = ({
                               folders.map((obj) => ({
                                 name: obj.name,
                                 edit: false,
-                              })),
+                              }))
                             );
                           } else {
                             setFoldersNames((old) => ({

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

@@ -12,7 +12,7 @@ import { addVersionToDuplicates } from "../../../utils/reactflowUtils";
 const useFileDrop = (folderId, folderChangeCallback) => {
   const setFolderDragging = useFolderStore((state) => state.setFolderDragging);
   const setFolderIdDragging = useFolderStore(
-    (state) => state.setFolderIdDragging,
+    (state) => state.setFolderIdDragging
   );
 
   const setErrorData = useAlertStore((state) => state.setErrorData);
@@ -45,7 +45,7 @@ const useFileDrop = (folderId, folderChangeCallback) => {
       | React.DragEvent<HTMLDivElement>
       | React.DragEvent<HTMLButtonElement>
       | React.DragEvent<HTMLAnchorElement>,
-    folderId: string,
+    folderId: string
   ) => {
     e.preventDefault();
 
@@ -60,7 +60,7 @@ const useFileDrop = (folderId, folderChangeCallback) => {
       | React.DragEvent<HTMLDivElement>
       | React.DragEvent<HTMLButtonElement>
       | React.DragEvent<HTMLAnchorElement>,
-    folderId: string,
+    folderId: string
   ) => {
     if (e.dataTransfer.types.some((types) => types === "Files")) {
       setFolderDragging(true);
@@ -73,7 +73,7 @@ const useFileDrop = (folderId, folderChangeCallback) => {
     e:
       | React.DragEvent<HTMLDivElement>
       | React.DragEvent<HTMLButtonElement>
-      | React.DragEvent<HTMLAnchorElement>,
+      | React.DragEvent<HTMLAnchorElement>
   ) => {
     e.preventDefault();
     if (e.target === e.currentTarget) {
@@ -87,7 +87,7 @@ const useFileDrop = (folderId, folderChangeCallback) => {
       | React.DragEvent<HTMLDivElement>
       | React.DragEvent<HTMLButtonElement>
       | React.DragEvent<HTMLAnchorElement>,
-    folderId: string,
+    folderId: string
   ) => {
     if (e?.dataTransfer?.getData("flow")) {
       const data = JSON.parse(e?.dataTransfer?.getData("flow"));

src/frontend/src/components/tableComponent/components/TableOptions/index.tsx

@@ -33,7 +33,7 @@ export default function TableOptions({
                 name="RotateCcw"
                 strokeWidth={2}
                 className={cn(
-                  "h-5 w-5 text-primary transition-all hover:text-accent-foreground",
+                  "h-5 w-5 text-primary transition-all hover:text-accent-foreground"
                 )}
               />
             </Button>
@@ -85,7 +85,7 @@ export default function TableOptions({
                   name="Trash2"
                   className={cn(
                     "h-5 w-5  text-primary transition-all",
-                    !hasSelection ? "" : "hover:text-status-red ",
+                    !hasSelection ? "" : "hover:text-status-red "
                   )}
                 />
               </Button>

src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx

@@ -30,7 +30,7 @@ export default function TableAutoCellRender({
               variant="outline"
               size="sq"
               className={cn(
-                "min-w-min bg-success-background text-success-foreground hover:bg-success-background",
+                "min-w-min bg-success-background text-success-foreground hover:bg-success-background"
               )}
             >
               {value}

src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx

@@ -72,8 +72,8 @@ export default function TableNodeCellRender({
                 ...id,
                 proxy: templateData.proxy,
               }
-            : id,
+            : id
-        ),
+        )
     ) ?? false;
   function getCellType() {
     switch (templateData.type) {
@@ -144,7 +144,7 @@ export default function TableNodeCellRender({
           <div
             className={classNames(
               "max-h-48 w-full overflow-auto custom-scroll",
-              templateValue?.length > 1 ? "my-3" : "",
+              templateValue?.length > 1 ? "my-3" : ""
             )}
           >
             <KeypairListComponent

src/frontend/src/components/tableComponent/index.tsx

@@ -13,7 +13,6 @@ import ForwardedIconComponent from "../genericIconComponent";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
 import TableOptions from "./components/TableOptions";
 import resetGrid from "./utils/reset-grid-columns";
-import Loading from "../ui/loading";
 
 interface TableComponentProps extends AgGridReactProps {
   columnDefs: NonNullable<AgGridReactProps["columnDefs"]>;
@@ -36,7 +35,7 @@ const TableComponent = forwardRef<
       alertDescription = DEFAULT_TABLE_ALERT_MSG,
       ...props
     },
-    ref,
+    ref
   ) => {
     let colDef = props.columnDefs.map((col, index) => {
       let newCol = {
@@ -112,7 +111,7 @@ const TableComponent = forwardRef<
     };
     const onColumnMoved = (params) => {
       const updatedColumnDefs = makeLastColumnNonResizable(
-        params.columnApi.getAllGridColumns().map((col) => col.getColDef()),
+        params.columnApi.getAllGridColumns().map((col) => col.getColDef())
       );
       params.api.setGridOption("columnDefs", updatedColumnDefs);
       if (props.onColumnMoved) props.onColumnMoved(params);
@@ -136,7 +135,7 @@ const TableComponent = forwardRef<
         className={cn(
           dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
           "ag-theme-shadcn flex h-full flex-col",
-          "relative",
+          "relative"
         )} // applying the grid theme
       >
         <AgGridReact
@@ -153,7 +152,7 @@ const TableComponent = forwardRef<
             if (e.sources.some((source) => source.includes("column"))) {
               localStorage.setItem(
                 storeReference,
-                JSON.stringify(realRef.current?.api?.getColumnState()),
+                JSON.stringify(realRef.current?.api?.getColumnState())
               );
               setColumnStateChange(true);
             }
@@ -176,7 +175,7 @@ const TableComponent = forwardRef<
         )}
       </div>
     );
-  },
+  }
 );
 
 export default TableComponent;

src/frontend/src/components/tagsSelectorComponent/index.tsx

@@ -48,7 +48,7 @@ export function TagsSelector({
               className={cn(
                 selectedTags.some((category) => category === tag.name)
                   ? "min-w-min bg-beta-foreground text-background hover:bg-beta-foreground"
-                  : "",
+                  : ""
               )}
             >
               {tag.name}

src/frontend/src/components/ui/accordion.tsx

@@ -34,7 +34,7 @@ const AccordionTrigger = React.forwardRef<
       <div
         className={cn(
           "flex flex-1 cursor-pointer items-center justify-between py-4 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180",
-          className,
+          className
         )}
       >
         {children}
@@ -46,7 +46,7 @@ const AccordionTrigger = React.forwardRef<
           <ChevronDownIcon
             className={cn(
               "h-4 w-4 font-bold transition-transform duration-200",
-              disabled ? "text-muted-foreground" : "text-primary",
+              disabled ? "text-muted-foreground" : "text-primary"
             )}
           />
         </ShadTooltip>
@@ -64,7 +64,7 @@ const AccordionContent = React.forwardRef<
     ref={ref}
     className={cn(
       "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
-      className,
+      className
     )}
     {...props}
   >

src/frontend/src/components/ui/alert.tsx

@@ -15,7 +15,7 @@ const alertVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  },
+  }
 );
 
 const Alert = React.forwardRef<

src/frontend/src/components/ui/badge.tsx

@@ -27,7 +27,7 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  },
+  }
 );
 
 export interface BadgeProps

src/frontend/src/components/ui/button.tsx

@@ -35,7 +35,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
+  }
 );
 
 export interface ButtonProps
@@ -65,7 +65,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       children,
       ...props
     },
-    ref,
+    ref
   ) => {
     const Comp = asChild ? Slot : "button";
     let newChildren = children;
@@ -97,7 +97,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         </Comp>
       </>
     );
-  },
+  }
 );
 Button.displayName = "Button";
 

src/frontend/src/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
     ref={ref}
     className={cn(
       "flex flex-col justify-between rounded-lg border bg-muted text-card-foreground shadow-sm transition-all",
-      className,
+      className
     )}
     {...props}
   />
@@ -36,7 +36,7 @@ const CardTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-base font-semibold leading-tight tracking-tight",
-      className,
+      className
     )}
     {...props}
   />

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

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
     ref={ref}
     className={cn(
       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className,
+      className
     )}
     {...props}
   >
@@ -37,7 +37,7 @@ const CheckBoxDiv = ({
     className={cn(
       className,
       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-      checked ? "bg-primary text-primary-foreground" : "",
+      checked ? "bg-primary text-primary-foreground" : ""
     )}
   >
     {checked && (

src/frontend/src/components/ui/custom-accordion.tsx

@@ -24,7 +24,7 @@ const AccordionTrigger = React.forwardRef<
       <div
         className={cn(
           " flex flex-1 cursor-pointer items-center justify-between border-[1px] py-2 text-sm font-medium data-[state=closed]:rounded-md data-[state=open]:rounded-t-md data-[state=open]:border-b-0 data-[state=open]:bg-muted [&[data-state=open]>svg]:rotate-180",
-          className,
+          className
         )}
       >
         {children}
@@ -43,7 +43,7 @@ const AccordionContent = React.forwardRef<
     ref={ref}
     className={cn(
       "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden border-[1px] text-sm data-[state=open]:rounded-b-md data-[state=open]:border-t-0 data-[state=open]:bg-muted",
-      className,
+      className
     )}
     {...props}
   >

src/frontend/src/components/ui/form.tsx

@@ -16,18 +16,18 @@ const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 > = {
   name: TName;
 };
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue,
+  {} as FormFieldContextValue
 );
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -66,7 +66,7 @@ type FormItemContextValue = {
 };
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue,
+  {} as FormItemContextValue
 );
 
 const FormItem = React.forwardRef<

src/frontend/src/components/ui/select-custom.tsx

@@ -36,7 +36,7 @@ const SelectContent = React.forwardRef<
         "relative z-50 min-w-[14rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className,
+        className
       )}
       position={position}
       {...props}
@@ -45,7 +45,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
         )}
       >
         {children}
@@ -75,7 +75,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-3 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
+      className
     )}
     {...props}
   >

src/frontend/src/components/ui/toggle.tsx

@@ -25,7 +25,7 @@ const toggleVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
+  }
 );
 
 const Toggle = React.forwardRef<

src/frontend/src/components/ui/tooltip.tsx

@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-45 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-        className,
+        className
       )}
       {...props}
     />
@@ -37,7 +37,7 @@ const TooltipContentWithoutPortal = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "z-45 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-      className,
+      className
     )}
     {...props}
   />

src/frontend/src/contexts/authContext.tsx

@@ -30,17 +30,17 @@ export function AuthProvider({ children }): React.ReactElement {
   const navigate = useNavigate();
   const cookies = new Cookies();
   const [accessToken, setAccessToken] = useState<string | null>(
-    cookies.get("access_token_lf") ?? null,
+    cookies.get("access_token_lf") ?? null
   );
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(
-    !!cookies.get("access_token_lf"),
+    !!cookies.get("access_token_lf")
   );
   const [isAdmin, setIsAdmin] = useState<boolean>(false);
   const [userData, setUserData] = useState<Users | null>(null);
   const [autoLogin, setAutoLogin] = useState<boolean>(false);
   const setLoading = useAlertStore((state) => state.setLoading);
   const [apiKey, setApiKey] = useState<string | null>(
-    cookies.get("apikey_tkn_lflw"),
+    cookies.get("apikey_tkn_lflw")
   );
   // const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
 

src/frontend/src/controllers/API/api.tsx

@@ -48,7 +48,7 @@ function ApiInterceptor() {
         }
         await clearBuildVerticesState(error);
         return Promise.reject(error);
-      },
+      }
     );
 
     const isAuthorizedURL = (url) => {
@@ -65,10 +65,10 @@ function ApiInterceptor() {
         const parsedURL = new URL(url);
 
         const isDomainAllowed = authorizedDomains.some(
-          (domain) => parsedURL.origin === new URL(domain).origin,
+          (domain) => parsedURL.origin === new URL(domain).origin
         );
         const isEndpointAllowed = authorizedEndpoints.some((endpoint) =>
-          parsedURL.pathname.includes(endpoint),
+          parsedURL.pathname.includes(endpoint)
         );
 
         return isDomainAllowed || isEndpointAllowed;
@@ -101,7 +101,7 @@ function ApiInterceptor() {
       },
       (error) => {
         return Promise.reject(error);
-      },
+      }
     );
 
     return () => {
@@ -133,7 +133,7 @@ function ApiInterceptor() {
       if (error?.config?.headers) {
         delete error.config.headers["Authorization"];
         error.config.headers["Authorization"] = `Bearer ${cookies.get(
-          "access_token_lf",
+          "access_token_lf"
         )}`;
         const response = await axios.request(error.config);
         return response;

src/frontend/src/controllers/API/helpers/check-duplicate-requests.ts

@@ -8,7 +8,7 @@ export function checkDuplicateRequestAndStoreRequest(config) {
   const currentTime = Date.now();
 
   const isContained = AUTHORIZED_DUPLICATE_REQUESTS.some((request) =>
-    config?.url!.includes(request),
+    config?.url!.includes(request)
   );
 
   if (

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

@@ -63,7 +63,7 @@ export async function sendAll(data: sendAllProps) {
 }
 
 export async function postValidateCode(
-  code: string,
+  code: string
 ): Promise<AxiosResponse<errorsTypeAPI>> {
   return await api.post(`${BASE_URL_API}validate/code`, { code });
 }
@@ -78,7 +78,7 @@ export async function postValidateCode(
 export async function postValidatePrompt(
   name: string,
   template: string,
-  frontend_node: APIClassType,
+  frontend_node: APIClassType
 ): Promise<AxiosResponse<PromptTypeAPI>> {
   return api.post(`${BASE_URL_API}validate/prompt`, {
     name,
@@ -151,7 +151,7 @@ export async function saveFlowToDatabase(newFlow: {
  * @throws Will throw an error if the update fails.
  */
 export async function updateFlowInDatabase(
-  updatedFlow: FlowType,
+  updatedFlow: FlowType
 ): Promise<FlowType> {
   try {
     const response = await api.patch(`${BASE_URL_API}flows/${updatedFlow.id}`, {
@@ -329,7 +329,7 @@ export async function getHealth() {
  *
  */
 export async function getBuildStatus(
-  flowId: string,
+  flowId: string
 ): Promise<AxiosResponse<BuildStatusTypeAPI>> {
   return await api.get(`${BASE_URL_API}build/${flowId}/status`);
 }
@@ -342,7 +342,7 @@ export async function getBuildStatus(
  *
  */
 export async function postBuildInit(
-  flow: FlowType,
+  flow: FlowType
 ): Promise<AxiosResponse<InitTypeAPI>> {
   return await api.post(`${BASE_URL_API}build/init/${flow.id}`, flow);
 }
@@ -358,7 +358,7 @@ export async function postBuildInit(
  */
 export async function uploadFile(
   file: File,
-  id: string,
+  id: string
 ): Promise<AxiosResponse<UploadFileTypeAPI>> {
   const formData = new FormData();
   formData.append("file", file);
@@ -380,7 +380,7 @@ export async function getProfilePictures(): Promise<ProfilePicturesTypeAPI | nul
 
 export async function postCustomComponent(
   code: string,
-  apiClass: APIClassType,
+  apiClass: APIClassType
 ): Promise<AxiosResponse<APIClassType>> {
   // let template = apiClass.template;
   return await api.post(`${BASE_URL_API}custom_component`, {
@@ -393,7 +393,7 @@ export async function postCustomComponentUpdate(
   code: string,
   template: APITemplateType,
   field: string,
-  field_value: any,
+  field_value: any
 ): Promise<AxiosResponse<APIClassType>> {
   return await api.post(`${BASE_URL_API}custom_component/update`, {
     code,
@@ -415,7 +415,7 @@ export async function onLogin(user: LoginType) {
         headers: {
           "Content-Type": "application/x-www-form-urlencoded",
         },
-      },
+      }
     );
 
     if (response.status === 200) {
@@ -477,11 +477,11 @@ export async function addUser(user: UserInputType): Promise<Array<Users>> {
 
 export async function getUsersPage(
   skip: number,
-  limit: number,
+  limit: number
 ): Promise<Array<Users>> {
   try {
     const res = await api.get(
-      `${BASE_URL_API}users/?skip=${skip}&limit=${limit}`,
+      `${BASE_URL_API}users/?skip=${skip}&limit=${limit}`
     );
     if (res.status === 200) {
       return res.data;
@@ -518,7 +518,7 @@ export async function resetPassword(user_id: string, user: resetPasswordType) {
   try {
     const res = await api.patch(
       `${BASE_URL_API}users/${user_id}/reset-password`,
-      user,
+      user
     );
     if (res.status === 200) {
       return res.data;
@@ -592,7 +592,7 @@ export async function saveFlowStore(
     last_tested_version?: string;
   },
   tags: string[],
-  publicFlow = false,
+  publicFlow = false
 ): Promise<FlowType> {
   try {
     const response = await api.post(`${BASE_URL_API}store/components/`, {
@@ -721,7 +721,7 @@ export async function postStoreComponents(component: Component) {
 export async function getComponent(component_id: string) {
   try {
     const res = await api.get(
-      `${BASE_URL_API}store/components/${component_id}`,
+      `${BASE_URL_API}store/components/${component_id}`
     );
     if (res.status === 200) {
       return res.data;
@@ -736,7 +736,7 @@ export async function searchComponent(
   page?: number | null,
   limit?: number | null,
   status?: string | null,
-  tags?: string[],
+  tags?: string[]
 ): Promise<StoreComponentResponse | undefined> {
   try {
     let url = `${BASE_URL_API}store/components/`;
@@ -848,7 +848,7 @@ export async function updateFlowStore(
   },
   tags: string[],
   publicFlow = false,
-  id: string,
+  id: string
 ): Promise<FlowType> {
   try {
     const response = await api.patch(`${BASE_URL_API}store/components/${id}`, {
@@ -932,7 +932,7 @@ export async function deleteGlobalVariable(id: string) {
 export async function updateGlobalVariable(
   name: string,
   value: string,
-  id: string,
+  id: string
 ) {
   try {
     const response = api.patch(`${BASE_URL_API}variables/${id}`, {
@@ -951,7 +951,7 @@ export async function getVerticesOrder(
   startNodeId?: string | null,
   stopNodeId?: string | null,
   nodes?: Node[],
-  Edges?: Edge[],
+  Edges?: Edge[]
 ): Promise<AxiosResponse<VerticesOrderTypeAPI>> {
   // nodeId is optional and is a query parameter
   // if nodeId is not provided, the API will return all vertices
@@ -971,7 +971,7 @@ export async function getVerticesOrder(
   return await api.post(
     `${BASE_URL_API}build/${flowId}/vertices`,
     data,
-    config,
+    config
   );
 }
 
@@ -979,7 +979,7 @@ export async function postBuildVertex(
   flowId: string,
   vertexId: string,
   input_value: string,
-  files?: string[],
+  files?: string[]
 ): Promise<AxiosResponse<VertexBuildTypeAPI>> {
   // input_value is optional and is a query parameter
   let data = {};
@@ -991,7 +991,7 @@ export async function postBuildVertex(
   }
   return await api.post(
     `${BASE_URL_API}build/${flowId}/vertices/${vertexId}`,
-    data,
+    data
   );
 }
 
@@ -1015,7 +1015,7 @@ export async function getFlowPool({
 }
 
 export async function deleteFlowPool(
-  flowId: string,
+  flowId: string
 ): Promise<AxiosResponse<any>> {
   const config = {};
   config["params"] = { flow_id: flowId };
@@ -1029,7 +1029,7 @@ export async function deleteFlowPool(
  * @returns A promise that resolves to an array of AxiosResponse objects representing the delete responses.
  */
 export async function multipleDeleteFlowsComponents(
-  flowIds: string[],
+  flowIds: string[]
 ): Promise<AxiosResponse<any>[]> {
   const batches: string[][] = [];
 
@@ -1052,7 +1052,7 @@ export async function multipleDeleteFlowsComponents(
 
   // Execute all delete requests
   const responses: Promise<AxiosResponse<any>>[] = batches.map((batch) =>
-    deleteBatch(batch),
+    deleteBatch(batch)
   );
 
   // Return the responses after all requests are completed
@@ -1062,7 +1062,7 @@ export async function multipleDeleteFlowsComponents(
 export async function getTransactionTable(
   id: string,
   mode: "intersection" | "union",
-  params = {},
+  params = {}
 ): Promise<{ rows: Array<object>; columns: Array<ColDef | ColGroupDef> }> {
   const config = {};
   config["params"] = { flow_id: id };
@@ -1078,7 +1078,7 @@ export async function getMessagesTable(
   mode: "intersection" | "union",
   id?: string,
   excludedFields?: string[],
-  params = {},
+  params = {}
 ): Promise<{ rows: Array<Message>; columns: Array<ColDef | ColGroupDef> }> {
   const config = {};
   if (id) {

src/frontend/src/icons/Groq/index.tsx

@@ -4,5 +4,5 @@ import SvgGroqLogo from "./GroqLogo";
 export const GroqIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <SvgGroqLogo ref={ref} {...props} />;
-  },
+  }
 );

src/frontend/src/icons/Streamlit/index.tsx

@@ -4,5 +4,5 @@ import SvgStreamlit from "./SvgStreamlit";
 export const Streamlit = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <SvgStreamlit className="icon" ref={ref} {...props} />;
-  },
+  }
 );

src/frontend/src/index.tsx

@@ -11,11 +11,11 @@ import "./style/applies.css";
 import "./style/classes.css";
 
 const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement,
+  document.getElementById("root") as HTMLElement
 );
 root.render(
   <ContextWrapper>
     <App />
-  </ContextWrapper>,
+  </ContextWrapper>
 );
 reportWebVitals();

src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx

@@ -27,7 +27,7 @@ const useFolderSubmit = (setOpen, folderToEdit) => {
             getFoldersApi(true);
             setOpen(false);
           }
-        },
+        }
       );
     } else {
       addFolder(data).then(
@@ -42,7 +42,7 @@ const useFolderSubmit = (setOpen, folderToEdit) => {
           setErrorData({
             title: `Error creating folder.`,
           });
-        },
+        }
       );
     }
   };

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

@@ -29,7 +29,7 @@ export default function CsvSelect({ node, handleChangeSelect }): JSX.Element {
                   <SelectItem key={separator} value={separator}>
                     {separator}
                   </SelectItem>
-                ),
+                )
               )}
             </SelectGroup>
           </SelectContent>

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

@@ -50,7 +50,7 @@ export default function IOFieldView({
       .results.result ?? "";
 
   console.log(
-    (flowPool[node!.id] ?? [])[(flowPool[node!.id]?.length ?? 1) - 1]?.data,
+    (flowPool[node!.id] ?? [])[(flowPool[node!.id]?.length ?? 1) - 1]?.data
   );
 
   function handleOutputType() {
@@ -257,7 +257,7 @@ export default function IOFieldView({
                   rows={
                     Array.isArray(flowPoolNode?.data?.artifacts)
                       ? flowPoolNode?.data?.artifacts?.map(
-                          (artifact) => artifact.data,
+                          (artifact) => artifact.data
                         ) ?? []
                       : [flowPoolNode?.data?.artifacts]
                   }

src/frontend/src/modals/IOModal/components/SessionView/hooks/index.tsx

@@ -10,7 +10,7 @@ const useRemoveSession = (setSuccessData, setErrorData) => {
       await deleteMessagesFn(
         messages
           .filter((msg) => msg.session_id === session_id)
-          .map((msg) => msg.index),
+          .map((msg) => msg.index)
       );
       deleteSession(session_id);
       setSuccessData({

src/frontend/src/modals/IOModal/components/SessionView/index.tsx

@@ -17,7 +17,7 @@ export default function SessionView({ rows }: { rows: Array<any> }) {
     setSelectedRows,
     setSuccessData,
     setErrorData,
-    selectedRows,
+    selectedRows
   );
 
   const { handleUpdate } = useUpdateMessage(setSuccessData, setErrorData);

src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx

@@ -29,7 +29,7 @@ const ButtonSendWrapper = ({
           ? "bg-high-indigo text-background"
           : chatValue === ""
           ? "text-primary"
-            : "bg-chat-send text-background",
+          : "bg-chat-send text-background"
       )}
       disabled={lockChat || saveLoading}
       onClick={(): void => send()}

src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx

@@ -18,7 +18,7 @@ const TextAreaWrapper = ({
 }) => {
   const getPlaceholderText = (
     isDragging: boolean,
-    noInput: boolean,
+    noInput: boolean
   ): string => {
     if (isDragging) {
       return "Drop here";

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

@@ -9,7 +9,7 @@ const useDragAndDrop = (
   setIsDragging,
   setFiles,
   currentFlowId,
-  setErrorData,
+  setErrorData
 ) => {
   const dragOver = (e) => {
     e.preventDefault();

src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-handle-file-change.tsx

@@ -9,7 +9,7 @@ const snErrorTxt = "png, jpg, jpeg";
 export const useHandleFileChange = (setFiles, currentFlowId) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const handleFileChange = async (
-    event: React.ChangeEvent<HTMLInputElement>,
+    event: React.ChangeEvent<HTMLInputElement>
   ) => {
     const fileInput = event.target;
     const file = fileInput.files?.[0];

src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx

@@ -116,7 +116,7 @@ export default function ChatInput({
               key={file.id}
               onDelete={() => {
                 setFiles((prev: FilePreviewType[]) =>
-                  prev.filter((f) => f.id !== file.id),
+                  prev.filter((f) => f.id !== file.id)
                 );
                 // TODO: delete file on backend
               }}

src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx

@@ -115,19 +115,19 @@ export default function ChatMessage({
       <div
         className={classNames(
           "form-modal-chat-position",
-          chat.isSend ? "" : " ",
+          chat.isSend ? "" : " "
         )}
       >
         <div
           className={classNames(
-            "mr-3 mt-1 flex w-24 flex-col items-center gap-1 overflow-hidden px-3 pb-3",
+            "mr-3 mt-1 flex w-24 flex-col items-center gap-1 overflow-hidden px-3 pb-3"
           )}
         >
           <div className="flex flex-col items-center gap-1">
             <div
               className={cn(
                 "relative flex h-8 w-8 items-center justify-center overflow-hidden rounded-md p-5 text-2xl",
-                !chat.isSend ? "bg-chat-bot-icon" : "bg-chat-user-icon",
+                !chat.isSend ? "bg-chat-bot-icon" : "bg-chat-user-icon"
               )}
             >
               <img
@@ -211,12 +211,12 @@ dark:prose-invert"
 
                                   children[0] = (children[0] as string).replace(
                                     "`▍`",
-                                    "▍",
+                                    "▍"
                                   );
                                 }
 
                                 const match = /language-(\w+)/.exec(
-                                  className || "",
+                                  className || ""
                                 );
 
                                 return !inline ? (
@@ -231,7 +231,7 @@ dark:prose-invert"
                                         language: (match && match[1]) || "",
                                         code: String(children).replace(
                                           /\n$/,
-                                          "",
+                                          ""
                                         ),
                                       },
                                     ]}
@@ -249,7 +249,7 @@ dark:prose-invert"
                             {chatMessage}
                           </Markdown>
                         ),
-                      [chat.message, chatMessage],
+                      [chat.message, chatMessage]
                     )}
                   </div>
                 </div>
@@ -292,7 +292,7 @@ dark:prose-invert"
                             parts.push(
                               <span className="chat-message-highlight">
                                 {chat.message[match[1]]}
-                              </span>,
+                              </span>
                             );
                           }
 

src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx

@@ -29,7 +29,7 @@ export default function FileCard({
 
   const imgSrc = `${BACKEND_URL.slice(
     0,
-    BACKEND_URL.length - 1,
+    BACKEND_URL.length - 1
   )}${BASE_URL_API}files/images/${content}`;
 
   console.log(imgSrc);

src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/handle-download.tsx

@@ -20,8 +20,8 @@ export default async function handleDownload({
     const response = await fetch(
       `${BACKEND_URL.slice(
         0,
-        BACKEND_URL.length - 1,
+        BACKEND_URL.length - 1
-      )}${BASE_URL_API}files/download/${content}`,
+      )}${BASE_URL_API}files/download/${content}`
     );
     if (!response.ok) {
       throw new Error("Network response was not ok");

src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/utils/format-file-name.tsx

@@ -1,6 +1,6 @@
 export default function formatFileName(
   name: string,
-  numberToTruncate: number = 25,
+  numberToTruncate: number = 25
 ): string {
   if (name[numberToTruncate] === undefined) {
     return name;

src/frontend/src/modals/IOModal/components/chatView/index.tsx

@@ -58,7 +58,7 @@ export default function ChatView({
       //
       .filter(
         (output) =>
-          output.data.message || (!output.data.message && output.artifacts),
+          output.data.message || (!output.data.message && output.artifacts)
       )
       .map((output, index) => {
         try {
@@ -139,7 +139,7 @@ export default function ChatView({
   function updateChat(
     chat: ChatMessageType,
     message: string,
-    stream_url?: string,
+    stream_url?: string
   ) {
     chat.message = message;
     updateFlowPool(chat.componentId, {
@@ -155,7 +155,7 @@ export default function ChatView({
     setIsDragging,
     setFiles,
     currentFlowId,
-    setErrorData,
+    setErrorData
   );
 
   return (

src/frontend/src/modals/IOModal/index.tsx

@@ -36,25 +36,25 @@ export default function IOModal({
   const allNodes = useFlowStore((state) => state.nodes);
   const setMessages = useMessagesStore((state) => state.setMessages);
   const inputs = useFlowStore((state) => state.inputs).filter(
-    (input) => input.type !== "ChatInput",
+    (input) => input.type !== "ChatInput"
   );
   const chatInput = useFlowStore((state) => state.inputs).find(
-    (input) => input.type === "ChatInput",
+    (input) => input.type === "ChatInput"
   );
   const outputs = useFlowStore((state) => state.outputs).filter(
-    (output) => output.type !== "ChatOutput",
+    (output) => output.type !== "ChatOutput"
   );
   const chatOutput = useFlowStore((state) => state.outputs).find(
-    (output) => output.type === "ChatOutput",
+    (output) => output.type === "ChatOutput"
   );
   const nodes = useFlowStore((state) => state.nodes).filter(
     (node) =>
       inputs.some((input) => input.id === node.id) ||
-      outputs.some((output) => output.id === node.id),
+      outputs.some((output) => output.id === node.id)
   );
   const haveChat = chatInput || chatOutput;
   const [selectedTab, setSelectedTab] = useState(
-    inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0,
+    inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0
   );
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
@@ -131,7 +131,7 @@ export default function IOModal({
 
   const { handleRemoveSession } = useRemoveSession(
     setSuccessData,
-    setErrorData,
+    setErrorData
   );
 
   useEffect(() => {
@@ -155,7 +155,7 @@ export default function IOModal({
         ({ rows, columns }) => {
           setMessages(rows);
           setColumns(columns);
-        },
+        }
       );
     }
   }, [open]);
@@ -194,7 +194,7 @@ export default function IOModal({
           <div className="flex-max-width h-full">
             <div
               className={cn(
-                "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300",
+                "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300"
               )}
             >
               <Tabs
@@ -223,11 +223,11 @@ export default function IOModal({
                 <TabsContent value={"1"} className="api-modal-tabs-content">
                   {nodes
                     .filter((node) =>
-                      inputs.some((input) => input.id === node.id),
+                      inputs.some((input) => input.id === node.id)
                     )
                     .map((node, index) => {
                       const input = inputs.find(
-                        (input) => input.id === node.id,
+                        (input) => input.id === node.id
                       )!;
                       return (
                         <div
@@ -284,11 +284,11 @@ export default function IOModal({
                 <TabsContent value={"2"} className="api-modal-tabs-content">
                   {nodes
                     .filter((node) =>
-                      outputs.some((output) => output.id === node.id),
+                      outputs.some((output) => output.id === node.id)
                     )
                     .map((node, index) => {
                       const output = outputs.find(
-                        (output) => output.id === node.id,
+                        (output) => output.id === node.id
                       )!;
                       const textOutputValue =
                         (flowPool[node!.id] ?? [])[
@@ -439,7 +439,7 @@ export default function IOModal({
                 <div
                   className={cn(
                     "flex h-full w-full flex-col items-start gap-4 pt-4",
-                    !selectedViewField ? "hidden" : "",
+                    !selectedViewField ? "hidden" : ""
                   )}
                 >
                   <div className="font-xl flex items-center justify-center gap-3 font-semibold">
@@ -458,7 +458,7 @@ export default function IOModal({
                   </div>
                   <div className="h-full w-full">
                     {inputs.some(
-                      (input) => input.id === selectedViewField.id,
+                      (input) => input.id === selectedViewField.id
                     ) && (
                       <IOFieldView
                         type={InputOutput.INPUT}
@@ -468,7 +468,7 @@ export default function IOModal({
                       />
                     )}
                     {outputs.some(
-                      (output) => output.id === selectedViewField.id,
+                      (output) => output.id === selectedViewField.id
                     ) && (
                       <IOFieldView
                         type={InputOutput.OUTPUT}
@@ -478,12 +478,12 @@ export default function IOModal({
                       />
                     )}
                     {sessions.some(
-                      (session) => session === selectedViewField.id,
+                      (session) => session === selectedViewField.id
                     ) && (
                       <SessionView
                         rows={messages.filter(
                           (message) =>
-                            message.session_id === selectedViewField.id,
+                            message.session_id === selectedViewField.id
                         )}
                       />
                     )}
@@ -493,7 +493,7 @@ export default function IOModal({
               <div
                 className={cn(
                   "flex h-full w-full",
-                  selectedViewField ? "hidden" : "",
+                  selectedViewField ? "hidden" : ""
                 )}
               >
                 {haveChat ? (
@@ -525,7 +525,7 @@ export default function IOModal({
                   "h-4 w-4",
                   isBuilding
                     ? "animate-spin"
-                    : "fill-current text-medium-indigo",
+                    : "fill-current text-medium-indigo"
                 )}
               />
             ),

src/frontend/src/modals/apiModal/index.tsx

@@ -39,7 +39,7 @@ const ApiModal = forwardRef(
       open?: boolean;
       setOpen?: (a: boolean | ((o?: boolean) => boolean)) => void;
     },
-    ref,
+    ref
   ) => {
     const tweak = useTweaksStore((state) => state.tweak);
     const addTweaks = useTweaksStore((state) => state.setTweak);
@@ -57,18 +57,18 @@ const ApiModal = forwardRef(
       flow?.id,
       autoLogin,
       tweak,
-      flow?.endpoint_name,
+      flow?.endpoint_name
     );
     const curl_run_code = getCurlRunCode(
       flow?.id,
       autoLogin,
       tweak,
-      flow?.endpoint_name,
+      flow?.endpoint_name
     );
     const curl_webhook_code = getCurlWebhookCode(
       flow?.id,
       autoLogin,
-      flow?.endpoint_name,
+      flow?.endpoint_name
     );
     const pythonCode = getPythonCode(flow?.name, tweak);
     const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
@@ -83,7 +83,7 @@ const ApiModal = forwardRef(
       pythonCode,
     ];
     const [tabs, setTabs] = useState(
-      createTabsArray(codesArray, includeWebhook),
+      createTabsArray(codesArray, includeWebhook)
     );
 
     const canShowTweaks =
@@ -132,7 +132,7 @@ const ApiModal = forwardRef(
               buildTweakObject(
                 nodeId,
                 element.data.node.template[templateField].value,
-                element.data.node.template[templateField],
+                element.data.node.template[templateField]
               );
             }
           });
@@ -149,7 +149,7 @@ const ApiModal = forwardRef(
     async function buildTweakObject(
       tw: string,
       changes: string | string[] | boolean | number | Object[] | Object,
-      template: TemplateVariableType,
+      template: TemplateVariableType
     ) {
       changes = getChangesType(changes, template);
 
@@ -191,7 +191,7 @@ const ApiModal = forwardRef(
         flow?.id,
         autoLogin,
         cloneTweak,
-        flow?.endpoint_name,
+        flow?.endpoint_name
       );
       const pythonCode = getPythonCode(flow?.name, cloneTweak);
       const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
@@ -235,7 +235,7 @@ const ApiModal = forwardRef(
         </BaseModal.Content>
       </BaseModal>
     );
-  },
+  }
 );
 
 export default ApiModal;

src/frontend/src/modals/apiModal/utils/check-can-build-tweak-object.ts

@@ -6,7 +6,7 @@ export const checkCanBuildTweakObject = (element, templateField) => {
     templateField.charAt(0) !== "_" &&
     element.data.node.template[templateField].show &&
     LANGFLOW_SUPPORTED_TYPES.has(
-      element.data.node.template[templateField].type,
+      element.data.node.template[templateField].type
     ) &&
     templateField !== "code"
   );

src/frontend/src/modals/apiModal/utils/get-changes-types.ts

@@ -3,7 +3,7 @@ import { convertArrayToObj } from "../../../utils/reactflowUtils";
 
 export const getChangesType = (
   changes: string | string[] | boolean | number | Object[] | Object,
-  template: TemplateVariableType,
+  template: TemplateVariableType
 ) => {
   if (typeof changes === "string" && template.type === "float") {
     changes = parseFloat(changes);

src/frontend/src/modals/apiModal/utils/get-curl-code.tsx

@@ -8,7 +8,7 @@ export function getCurlRunCode(
   flowId: string,
   isAuth: boolean,
   tweaksBuildedObject,
-  endpointName?: string,
+  endpointName?: string
 ): string {
   const tweaksObject = tweaksBuildedObject[0];
   // show the endpoint name in the curl command if it exists

src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts

@@ -13,8 +13,8 @@ export const getNodesWithDefaultValue = (flow) => {
           templateField.charAt(0) !== "_" &&
           node.data.node.template[templateField]?.show &&
           LANGFLOW_SUPPORTED_TYPES.has(
-            node.data.node.template[templateField]?.type,
+            node.data.node.template[templateField]?.type
-          ),
+          )
       )
       .map((n, i) => {
         arrNodesWithValues.push(node["id"]);

src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx

@@ -10,7 +10,7 @@ export default function getPythonApiCode(
   flowId: string,
   isAuth: boolean,
   tweaksBuildedObject: any[],
-  endpointName?: string,
+  endpointName?: string
 ): string {
   let tweaksString = "{}";
   if (tweaksBuildedObject && tweaksBuildedObject.length > 0) {

src/frontend/src/modals/apiModal/utils/get-python-code.tsx

@@ -6,7 +6,7 @@
  */
 export default function getPythonCode(
   flowName: string,
-  tweaksBuildedObject: any[],
+  tweaksBuildedObject: any[]
 ): string {
   let tweaksString = "{}";
   if (tweaksBuildedObject && tweaksBuildedObject.length > 0) {

src/frontend/src/modals/apiModal/utils/get-value.ts

@@ -5,7 +5,7 @@ export const getValue = (
   value: string,
   node: NodeType,
   template: TemplateVariableType,
-  tweak: Object[],
+  tweak: Object[]
 ) => {
   let returnValue = value ?? "";
 

src/frontend/src/modals/apiModal/utils/get-widget-code.tsx

@@ -6,7 +6,7 @@
 export default function getWidgetCode(
   flowId: string,
   flowName: string,
-  isAuth: boolean,
+  isAuth: boolean
 ): string {
   return `<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@1.0_alpha/dist/build/static/js/bundle.min.js"></script>
 

src/frontend/src/modals/apiModal/utils/tabs-array.tsx

@@ -1,7 +1,7 @@
 export function createTabsArray(
   codes,
   includeWebhookCurl = false,
-  includeTweaks = false,
+  includeTweaks = false
 ) {
   const tabs = [
     {

src/frontend/src/modals/baseModal/index.tsx

@@ -37,7 +37,7 @@ const Content: React.FC<ContentProps> = ({ children, overflowHidden }) => {
     <div
       className={cn(
         `flex w-full flex-grow flex-col transition-all duration-300`,
-        overflowHidden ? "overflow-hidden" : "overflow-visible",
+        overflowHidden ? "overflow-hidden" : "overflow-visible"
       )}
     >
       {children}
@@ -122,7 +122,7 @@ interface BaseModalProps {
     React.ReactElement<ContentProps>,
     React.ReactElement<HeaderProps>,
     React.ReactElement<TriggerProps>?,
-    React.ReactElement<FooterProps>?,
+    React.ReactElement<FooterProps>?
   ];
   open?: boolean;
   setOpen?: (open: boolean) => void;
@@ -158,16 +158,16 @@ function BaseModal({
   onSubmit,
 }: BaseModalProps) {
   const headerChild = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Header,
+    (child) => (child as React.ReactElement).type === Header
   );
   const triggerChild = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Trigger,
+    (child) => (child as React.ReactElement).type === Trigger
   );
   const ContentChild = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Content,
+    (child) => (child as React.ReactElement).type === Content
   );
   const ContentFooter = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Footer,
+    (child) => (child as React.ReactElement).type === Footer
   );
 
   let { minWidth, height } = switchCaseModalSize(size);
@@ -189,7 +189,7 @@ function BaseModal({
   const contentClasses = cn(
     minWidth,
     height,
-    "flex flex-col duration-300 overflow-hidden",
+    "flex flex-col duration-300 overflow-hidden"
   );
 
   //UPDATE COLORS AND STYLE CLASSSES

src/frontend/src/modals/dictAreaModal/index.tsx

@@ -4,6 +4,7 @@ import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
 // import "ace-builds/webpack-resolver";
+import { cloneDeep } from "lodash";
 import { useEffect, useState } from "react";
 import JsonView from "react18-json-view";
 import "react18-json-view/src/dark.css";
@@ -12,7 +13,6 @@ import IconComponent from "../../components/genericIconComponent";
 import { CODE_DICT_DIALOG_SUBTITLE } from "../../constants/constants";
 import { useDarkStore } from "../../stores/darkStore";
 import BaseModal from "../baseModal";
-import { cloneDeep } from "lodash";
 
 export default function DictAreaModal({
   children,

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

@@ -8,7 +8,7 @@ const useColumnDefs = (
   handleOnNewValue: (newValue: any, name: string) => void,
   handleOnChangeDb: (value: boolean, key: string) => void,
   changeAdvanced: (n: string) => void,
-  open: boolean,
+  open: boolean
 ) => {
   const columnDefs: ColDef[] = useMemo(
     () => [
@@ -76,7 +76,7 @@ const useColumnDefs = (
         cellClass: "no-border",
       },
     ],
-    [open, myData],
+    [open, myData]
   );
 
   return columnDefs;

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

@@ -1,6 +1,6 @@
 import { ColDef, GridApi } from "ag-grid-community";
+import { cloneDeep } from "lodash";
 import { forwardRef, useEffect, useRef, useState } from "react";
-import IconComponent from "../../components/genericIconComponent";
 import TableComponent from "../../components/tableComponent";
 import { Badge } from "../../components/ui/badge";
 import { useDarkStore } from "../../stores/darkStore";
@@ -9,7 +9,6 @@ import { NodeDataType } from "../../types/flow";
 import BaseModal from "../baseModal";
 import useColumnDefs from "./hooks/use-column-defs";
 import useRowData from "./hooks/use-row-data";
-import { cloneDeep } from "lodash";
 
 const EditNodeModal = forwardRef(
   (
@@ -26,7 +25,7 @@ const EditNodeModal = forwardRef(
       //      setOpenWDoubleClick: (open: boolean) => void;
       data: NodeDataType;
     },
-    ref,
+    ref
   ) => {
     const myData = useRef(cloneDeep(data));
 
@@ -54,7 +53,7 @@ const EditNodeModal = forwardRef(
       handleOnNewValue,
       handleOnChangeDb,
       changeAdvanced,
-      open,
+      open
     );
 
     const [gridApi, setGridApi] = useState<GridApi | null>(null);
@@ -118,7 +117,7 @@ const EditNodeModal = forwardRef(
         />
       </BaseModal>
     );
-  },
+  }
 );
 
 export default EditNodeModal;

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

@@ -45,7 +45,7 @@ const ExportModal = forwardRef(
                 is_component: false,
               },
               name!,
-              description,
+              description
             );
             setNoticeData({
               title: API_WARNING_NOTICE_ALERT,
@@ -61,7 +61,7 @@ const ExportModal = forwardRef(
                 is_component: false,
               }),
               name!,
-              description,
+              description
             );
           setOpen(false);
         }}
@@ -102,6 +102,6 @@ const ExportModal = forwardRef(
         <BaseModal.Footer submit={{ label: "Export" }} />
       </BaseModal>
     );
-  },
+  }
 );
 export default ExportModal;

src/frontend/src/modals/flowLogsModal/index.tsx

@@ -37,7 +37,7 @@ export default function FlowLogsModal({
           const { columns, rows } = data;
           setColumns(columns.map((col) => ({ ...col, editable: true })));
           setRows(rows);
-        },
+        }
       );
     }
 
@@ -47,7 +47,7 @@ export default function FlowLogsModal({
         .some((template) => template["stream"] && template["stream"].value);
       console.log(
         haStream,
-        nodes.map((nodes) => (nodes.data as NodeDataType).node!.template),
+        nodes.map((nodes) => (nodes.data as NodeDataType).node!.template)
       );
       if (haStream) {
         setNoticeData({

src/frontend/src/modals/foldersModal/hooks/submit-folder.tsx

@@ -33,7 +33,7 @@ const useFolderSubmit = (setOpen, folderToEdit) => {
             getFoldersApi(true);
             setOpen(false);
           }
-        },
+        }
       );
     } else {
       addFolder(data).then(
@@ -49,7 +49,7 @@ const useFolderSubmit = (setOpen, folderToEdit) => {
           setErrorData({
             title: `Error creating folder.`,
           });
-        },
+        }
       );
     }
   };

src/frontend/src/modals/genericModal/index.tsx

@@ -83,7 +83,7 @@ export default function GenericModal({
     }
 
     const filteredWordsHighlight = matches.filter(
-      (word) => !invalid_chars.includes(word),
+      (word) => !invalid_chars.includes(word)
     );
 
     setWordsHighlight(filteredWordsHighlight);
@@ -134,7 +134,7 @@ export default function GenericModal({
         // to the first key of the custom_fields object
         if (field_name === "") {
           field_name = Array.isArray(
-            apiReturn.data?.frontend_node?.custom_fields?.[""],
+            apiReturn.data?.frontend_node?.custom_fields?.[""]
           )
             ? apiReturn.data?.frontend_node?.custom_fields?.[""][0] ?? ""
             : apiReturn.data?.frontend_node?.custom_fields?.[""] ?? "";
@@ -209,7 +209,7 @@ export default function GenericModal({
           <div
             className={classNames(
               !isEdit ? "rounded-lg border" : "",
-              "flex h-full max-h-[85%] w-full",
+              "flex h-full max-h-[85%] w-full"
             )}
           >
             {type === TypeModal.PROMPT && isEdit && !readonly ? (

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

@@ -32,7 +32,7 @@ export default function NewFlowModal({
               key={0}
               flow={
                 examples.find(
-                  (e) => e.name == "Basic Prompting (Hello, World)",
+                  (e) => e.name == "Basic Prompting (Hello, World)"
                 )!
               }
             />

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

@@ -131,14 +131,14 @@ export default function ShareModal({
             title: "Error sharing " + is_component ? "component" : "flow",
             list: [err["response"]["data"]["detail"]],
           });
-        },
+        }
       );
     else
       updateFlowStore(
         flow!,
         getTagsIds(selectedTags, tags),
         sharePublic,
-        unavaliableNames.find((e) => e.name === name)!.id,
+        unavaliableNames.find((e) => e.name === name)!.id
       ).then(successShare, (err) => {
         setErrorData({
           title: "Error sharing " + is_component ? "component" : "flow",
@@ -205,7 +205,7 @@ export default function ShareModal({
         setOpen={internalSetOpen}
         onSubmit={() => {
           const isNameAvailable = !unavaliableNames.some(
-            (element) => element.name === name,
+            (element) => element.name === name
           );
 
           if (isNameAvailable) {

src/frontend/src/modals/shareModal/utils/get-tags-ids.tsx

@@ -1,6 +1,6 @@
 export default function getTagsIds(
   tags: string[],
-  tagListId: { name: string; id: string }[],
+  tagListId: { name: string; id: string }[]
 ) {
   return tags
     .map((tag) => tagListId.find((tagObj) => tagObj.name === tag))!

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

@@ -62,19 +62,19 @@ export default function Page({
   const preventDefault = true;
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const autoSaveCurrentFlow = useFlowsManagerStore(
-    (state) => state.autoSaveCurrentFlow,
+    (state) => state.autoSaveCurrentFlow
   );
   const types = useTypesStore((state) => state.types);
   const templates = useTypesStore((state) => state.templates);
   const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const [showCanvas, setSHowCanvas] = useState(
-    Object.keys(templates).length > 0 && Object.keys(types).length > 0,
+    Object.keys(templates).length > 0 && Object.keys(types).length > 0
   );
 
   const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
   const setReactFlowInstance = useFlowStore(
-    (state) => state.setReactFlowInstance,
+    (state) => state.setReactFlowInstance
   );
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
@@ -91,10 +91,10 @@ export default function Page({
   const paste = useFlowStore((state) => state.paste);
   const resetFlow = useFlowStore((state) => state.resetFlow);
   const lastCopiedSelection = useFlowStore(
-    (state) => state.lastCopiedSelection,
+    (state) => state.lastCopiedSelection
   );
   const setLastCopiedSelection = useFlowStore(
-    (state) => state.setLastCopiedSelection,
+    (state) => state.setLastCopiedSelection
   );
   const onConnect = useFlowStore((state) => state.onConnect);
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
@@ -117,7 +117,7 @@ export default function Page({
         clonedSelection!,
         clonedNodes,
         clonedEdges,
-        getRandomName(),
+        getRandomName()
       );
       const newGroupNode = generateNodeFromFlow(newFlow, getNodeId);
       const newEdges = reconnectEdges(newGroupNode, removedEdges);
@@ -125,8 +125,8 @@ export default function Page({
         ...clonedNodes.filter(
           (oldNodes) =>
             !clonedSelection?.nodes.some(
-              (selectionNode) => selectionNode.id === oldNodes.id,
+              (selectionNode) => selectionNode.id === oldNodes.id
-            ),
+            )
         ),
         newGroupNode,
       ]);
@@ -136,8 +136,8 @@ export default function Page({
             !clonedSelection!.nodes.some(
               (selectionNode) =>
                 selectionNode.id === oldEdge.target ||
-                selectionNode.id === oldEdge.source,
+                selectionNode.id === oldEdge.source
-            ),
+            )
         ),
         ...newEdges,
       ]);
@@ -213,7 +213,7 @@ export default function Page({
         {
           x: position.current.x,
           y: position.current.y,
-        },
+        }
       );
     }
   }
@@ -297,7 +297,7 @@ export default function Page({
 
   useEffect(() => {
     setSHowCanvas(
-      Object.keys(templates).length > 0 && Object.keys(types).length > 0,
+      Object.keys(templates).length > 0 && Object.keys(types).length > 0
     );
   }, [templates, types]);
 
@@ -306,7 +306,7 @@ export default function Page({
       takeSnapshot();
       onConnect(params);
     },
-    [takeSnapshot, onConnect],
+    [takeSnapshot, onConnect]
   );
 
   const onNodeDragStart: NodeDragHandler = useCallback(() => {
@@ -347,7 +347,7 @@ export default function Page({
 
         // Extract the data from the drag event and parse it as a JSON object
         const data: { type: string; node?: APIClassType } = JSON.parse(
-          event.dataTransfer.getData("nodedata"),
+          event.dataTransfer.getData("nodedata")
         );
 
         const newId = getNodeId(data.type);
@@ -363,7 +363,7 @@ export default function Page({
         };
         paste(
           { nodes: [newNode], edges: [] },
-          { x: event.clientX, y: event.clientY },
+          { x: event.clientX, y: event.clientY }
         );
       } else if (event.dataTransfer.types.some((types) => types === "Files")) {
         takeSnapshot();
@@ -392,7 +392,7 @@ export default function Page({
       }
     },
     // Specify dependencies for useCallback
-    [getNodeId, setNodes, takeSnapshot, paste],
+    [getNodeId, setNodes, takeSnapshot, paste]
   );
 
   const onEdgeUpdateStart = useCallback(() => {
@@ -408,7 +408,7 @@ export default function Page({
         setEdges((els) => updateEdge(oldEdge, newConnection, els));
       }
     },
-    [setEdges],
+    [setEdges]
   );
 
   const onEdgeUpdateEnd = useCallback((_, edge: Edge): void => {
@@ -441,7 +441,7 @@ export default function Page({
     (flow: OnSelectionChangeParams): void => {
       setLastSelection(flow);
     },
-    [],
+    []
   );
 
   const onPaneClick = useCallback((flow) => {