Format code

2024-06-13 12:13:27 -03:00 · 2024-06-13 12:13:27 -03:00 · 90798a91ea
commit 90798a91ea
parent 045cb38cd3
172 changed files with 652 additions and 656 deletions
--- a/src/frontend/src/App.tsx
+++ b/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();
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/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)}
--- a/src/frontend/src/CustomNodes/GenericNode/components/tooltipRenderComponent/index.tsx
+++ b/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
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/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"
                )}
              >
                {" "}
--- a/src/frontend/src/CustomNodes/helpers/get-class-from-build-status.ts
+++ b/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;

--- a/src/frontend/src/CustomNodes/hooks/use-check-code-validity.tsx
+++ b/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
--- a/src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.tsx
+++ b/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);

--- a/src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx
+++ b/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);

--- a/src/frontend/src/CustomNodes/hooks/use-handle-node-class.tsx
+++ b/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;
--- a/src/frontend/src/CustomNodes/hooks/use-icon-render.tsx
+++ b/src/frontend/src/CustomNodes/hooks/use-icon-render.tsx
@ -12,8 +12,8 @@ const useIconNodeRender = (
  checkNodeIconFragment: (
    iconColor: string,
    iconName: string,
-    iconClassName: string,
-  ) => JSX.Element,
+    iconClassName: string
+  ) => JSX.Element
 ) => {
  const iconNodeRender = useCallback(() => {
    const iconElement = data?.node?.icon;
--- a/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
+++ b/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 =
--- a/src/frontend/src/CustomNodes/hooks/use-update-node-code.tsx
+++ b/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;
--- a/src/frontend/src/CustomNodes/utils/get-field-title.tsx
+++ b/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!
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/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);
--- a/src/frontend/src/components/ImageViewer/index.tsx
+++ b/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)
          );
        };
      }
--- a/src/frontend/src/components/accordionComponent/composite/folderAccordionComponent/index.tsx
+++ b/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 {
--- a/src/frontend/src/components/accordionComponent/index.tsx
+++ b/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}
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/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() {
--- a/src/frontend/src/components/cardComponent/components/dragCardComponent/index.tsx
+++ b/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"}
                />
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/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>
--- a/src/frontend/src/components/cardsWrapComponent/index.tsx
+++ b/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 ? (
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/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
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/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 !== "") {
--- a/src/frontend/src/components/csvOutputComponent/index.tsx
+++ b/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);
--- a/src/frontend/src/components/dictComponent/index.tsx
+++ b/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"
      )}
    >
      {
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/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>
--- a/src/frontend/src/components/editFlowSettingsComponent/index.tsx
+++ b/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}
--- a/src/frontend/src/components/genericIconComponent/index.tsx
+++ b/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;
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/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()}
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/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
--- a/src/frontend/src/components/horizontalScrollFadeComponent/index.tsx
+++ b/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
      );
    };

--- a/src/frontend/src/components/inputComponent/components/popover/index.tsx
+++ b/src/frontend/src/components/inputComponent/components/popover/index.tsx
@ -75,9 +75,9 @@ const CustomInputPopover = ({
            (selectedOption !== "" || !onChange) && setSelectedOption
              ? selectedOption
              : (selectedOptions?.length !== 0 || !onChange) &&
-                  setSelectedOptions
-                ? selectedOptions?.join(", ")
-                : value
+                setSelectedOptions
+              ? selectedOptions?.join(", ")
+              : value
          }
          autoFocus={autoFocus}
          disabled={disabled}
@ -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">
--- a/src/frontend/src/components/inputComponent/components/popoverObject/index.tsx
+++ b/src/frontend/src/components/inputComponent/components/popoverObject/index.tsx
@ -60,14 +60,14 @@ const CustomInputPopoverObject = ({
              ? options.find((option) => option.id === selectedOption)?.name ||
                ""
              : (selectedOptions?.length !== 0 || !onChange) &&
-                  setSelectedOptions
-                ? selectedOptions
-                    .map(
-                      (optionId) =>
-                        options.find((option) => option.id === optionId)?.name,
-                    )
-                    .join(", ")
-                : value
+                setSelectedOptions
+              ? selectedOptions
+                  .map(
+                    (optionId) =>
+                      options.find((option) => option.id === optionId)?.name
+                  )
+                  .join(", ")
+              : value
          }
          autoFocus={autoFocus}
          disabled={disabled}
@ -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">
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/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
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@ -105,8 +105,8 @@ export default function InputFileComponent({
            editNode
              ? "input-edit-node input-dialog text-muted-foreground"
              : disabled
-                ? "input-disable input-dialog primary-input"
-                : "input-dialog primary-input text-muted-foreground"
+              ? "input-disable input-dialog primary-input"
+              : "input-dialog primary-input text-muted-foreground"
          }
        >
          {myValue !== "" ? myValue : "No file"}
--- a/src/frontend/src/components/inputGlobalComponent/index.tsx
+++ b/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"
            />
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/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) => {
--- a/src/frontend/src/components/sidebarComponent/components/sideBarButtons/index.tsx
+++ b/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}
--- a/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx
+++ b/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) => ({
--- a/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx
+++ b/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"));
--- a/src/frontend/src/components/tableComponent/components/TableOptions/index.tsx
+++ b/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>
--- a/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx
+++ b/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}
--- a/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx
+++ b/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
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/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;
--- a/src/frontend/src/components/tagsSelectorComponent/index.tsx
+++ b/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}
--- a/src/frontend/src/components/ui/accordion.tsx
+++ b/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}
  >
--- a/src/frontend/src/components/ui/alert.tsx
+++ b/src/frontend/src/components/ui/alert.tsx
@ -15,7 +15,7 @@ const alertVariants = cva(
    defaultVariants: {
      variant: "default",
    },
-  },
+  }
 );

 const Alert = React.forwardRef<
--- a/src/frontend/src/components/ui/badge.tsx
+++ b/src/frontend/src/components/ui/badge.tsx
@ -27,7 +27,7 @@ const badgeVariants = cva(
    defaultVariants: {
      variant: "default",
    },
-  },
+  }
 );

 export interface BadgeProps
--- a/src/frontend/src/components/ui/button.tsx
+++ b/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";

--- a/src/frontend/src/components/ui/card.tsx
+++ b/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}
  />
--- a/src/frontend/src/components/ui/checkbox.tsx
+++ b/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 && (
--- a/src/frontend/src/components/ui/custom-accordion.tsx
+++ b/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}
  >
--- a/src/frontend/src/components/ui/form.tsx
+++ b/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<
--- a/src/frontend/src/components/ui/select-custom.tsx
+++ b/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}
  >
--- a/src/frontend/src/components/ui/toggle.tsx
+++ b/src/frontend/src/components/ui/toggle.tsx
@ -25,7 +25,7 @@ const toggleVariants = cva(
      variant: "default",
      size: "default",
    },
-  },
+  }
 );

 const Toggle = React.forwardRef<
--- a/src/frontend/src/components/ui/tooltip.tsx
+++ b/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}
  />
--- a/src/frontend/src/contexts/authContext.tsx
+++ b/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);

--- a/src/frontend/src/controllers/API/api.tsx
+++ b/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;
--- a/src/frontend/src/controllers/API/helpers/check-duplicate-requests.ts
+++ b/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 (
--- a/src/frontend/src/controllers/API/index.ts
+++ b/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) {
--- a/src/frontend/src/icons/Groq/index.tsx
+++ b/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} />;
-  },
+  }
 );
--- a/src/frontend/src/icons/Streamlit/index.tsx
+++ b/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} />;
-  },
+  }
 );
--- a/src/frontend/src/index.tsx
+++ b/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();
--- a/src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx
+++ b/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.`,
          });
-        },
+        }
      );
    }
  };
--- a/src/frontend/src/modals/IOModal/components/IOFieldView/components/csvSelect/index.tsx
+++ b/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>
--- a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
+++ b/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]
                  }
--- a/src/frontend/src/modals/IOModal/components/SessionView/hooks/index.tsx
+++ b/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({
--- a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx
+++ b/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);
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx
@ -28,8 +28,8 @@ const ButtonSendWrapper = ({
        noInput
          ? "bg-high-indigo text-background"
          : chatValue === ""
-            ? "text-primary"
-            : "bg-chat-send text-background",
+          ? "text-primary"
+          : "bg-chat-send text-background"
      )}
      disabled={lockChat || saveLoading}
      onClick={(): void => send()}
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
+++ b/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";
@ -33,8 +33,8 @@ const TextAreaWrapper = ({
    lockChat || saveLoading
      ? "form-modal-lock-true bg-input"
      : noInput
-        ? "form-modal-no-input bg-input"
-        : "form-modal-lock-false bg-background";
+      ? "form-modal-no-input bg-input"
+      : "form-modal-lock-false bg-background";

  const fileClass =
    files.length > 0
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx
+++ b/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();
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-handle-file-change.tsx
+++ b/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];
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
+++ b/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
              }}
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
+++ b/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>
                            );
                          }

--- a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx
+++ b/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);
--- a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/handle-download.tsx
+++ b/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,
-      )}${BASE_URL_API}files/download/${content}`,
+        BACKEND_URL.length - 1
+      )}${BASE_URL_API}files/download/${content}`
    );
    if (!response.ok) {
      throw new Error("Network response was not ok");
--- a/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/utils/format-file-name.tsx
+++ b/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;
--- a/src/frontend/src/modals/IOModal/components/chatView/index.tsx
+++ b/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 (
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/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"
                )}
              />
            ),
--- a/src/frontend/src/modals/apiModal/index.tsx
+++ b/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;
--- a/src/frontend/src/modals/apiModal/utils/check-can-build-tweak-object.ts
+++ b/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"
  );
--- a/src/frontend/src/modals/apiModal/utils/get-changes-types.ts
+++ b/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);
--- a/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
+++ b/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
@ -8,14 +8,14 @@ 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
  return `curl -X POST \\
    "${window.location.protocol}//${window.location.host}/api/v1/run/${
-      endpointName || flowId
-    }?stream=false" \\
+    endpointName || flowId
+  }?stream=false" \\
    -H 'Content-Type: application/json'\\${
      !isAuth ? `\n  -H 'x-api-key: <your api key>'\\` : ""
    }
--- a/src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts
+++ b/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"]);
--- a/src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx
+++ b/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) {
--- a/src/frontend/src/modals/apiModal/utils/get-python-code.tsx
+++ b/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) {
--- a/src/frontend/src/modals/apiModal/utils/get-value.ts
+++ b/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 ?? "";

--- a/src/frontend/src/modals/apiModal/utils/get-widget-code.tsx
+++ b/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>

--- a/src/frontend/src/modals/apiModal/utils/tabs-array.tsx
+++ b/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 = [
    {
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/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
--- a/src/frontend/src/modals/dictAreaModal/index.tsx
+++ b/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,
--- a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx
+++ b/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;
--- a/src/frontend/src/modals/editNodeModal/index.tsx
+++ b/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;
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/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;
--- a/src/frontend/src/modals/flowLogsModal/index.tsx
+++ b/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({
--- a/src/frontend/src/modals/foldersModal/hooks/submit-folder.tsx
+++ b/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.`,
          });
-        },
+        }
      );
    }
  };
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/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 ? (
--- a/src/frontend/src/modals/newFlowModal/index.tsx
+++ b/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)"
                )!
              }
            />
--- a/src/frontend/src/modals/shareModal/index.tsx
+++ b/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) {
--- a/src/frontend/src/modals/shareModal/utils/get-tags-ids.tsx
+++ b/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))!
--- a/Show more
+++ b/Show more