From 546e0ad7017027f1be35533ebc82160fb8fa11e8 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 28 Feb 2024 21:50:22 -0300
Subject: [PATCH] Fix formatting issues in code

---
 src/frontend/src/App.tsx                      | 23 +++--
 .../components/parameterComponent/index.tsx   |  6 +-
 .../src/CustomNodes/GenericNode/index.tsx     |  2 +-
 .../src/alerts/alertDropDown/index.tsx        |  2 +-
 .../src/components/IOInputField/index.tsx     |  6 +-
 .../src/components/IOOutputView/index.tsx     |  8 +-
 .../components/ShadTooltipComponent/index.tsx |  2 +-
 .../chatComponent/buildTrigger/index.tsx      |  2 +-
 .../components/menuBar/index.tsx              |  2 +-
 .../components/inputFileComponent/index.tsx   |  6 +-
 .../newChatView/chatInput/index.tsx           | 26 ++++--
 .../components/textAreaComponent/index.tsx    |  2 +-
 src/frontend/src/components/ui/xmark.tsx      |  1 -
 .../src/constants/alerts_constants.tsx        | 91 ++++++++++---------
 src/frontend/src/constants/constants.ts       | 40 ++++----
 src/frontend/src/controllers/API/api.tsx      |  4 +-
 src/frontend/src/controllers/API/index.ts     |  7 +-
 .../src/modals/SecretKeyModal/index.tsx       |  2 +-
 .../src/modals/StoreApiKeyModal/index.tsx     | 21 +++--
 src/frontend/src/modals/baseModal/index.tsx   |  2 +-
 .../src/modals/codeAreaModal/index.tsx        | 58 +++++++-----
 src/frontend/src/modals/exportModal/index.tsx | 15 +--
 .../src/modals/formModal/chatInput/index.tsx  | 11 +--
 src/frontend/src/modals/formModal/index.tsx   | 15 ++-
 .../src/modals/genericModal/index.tsx         |  8 +-
 .../src/pages/AdminPage/LoginPage/index.tsx   |  2 +-
 src/frontend/src/pages/AdminPage/index.tsx    |  9 +-
 src/frontend/src/pages/ApiKeysPage/index.tsx  |  5 +-
 .../components/PageComponent/index.tsx        | 30 ++++--
 .../extraSidebarComponent/index.tsx           |  2 +-
 .../components/nodeToolbarComponent/index.tsx | 12 ++-
 .../MainPage/components/components/index.tsx  |  6 +-
 src/frontend/src/pages/MainPage/index.tsx     |  7 +-
 .../src/pages/ProfileSettingsPage/index.tsx   |  7 +-
 src/frontend/src/pages/StorePage/index.tsx    | 17 ++--
 src/frontend/src/pages/loginPage/index.tsx    |  2 +-
 src/frontend/src/pages/signUpPage/index.tsx   |  2 +-
 src/frontend/src/stores/flowStore.ts          | 13 ++-
 src/frontend/src/types/zustand/flow/index.ts  | 39 ++++++--
 src/frontend/src/utils/buildUtils.ts          | 19 +++-
 src/frontend/src/utils/styleUtils.ts          |  2 +-
 41 files changed, 347 insertions(+), 189 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 7faf4bc79..4dbac7a5c 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -18,10 +18,10 @@ import { getHealth } from "./controllers/API";
 import Router from "./routes";
 import useAlertStore from "./stores/alertStore";
 import { useDarkStore } from "./stores/darkStore";
+import useFlowStore from "./stores/flowStore";
 import useFlowsManagerStore from "./stores/flowsManagerStore";
 import { useStoreStore } from "./stores/storeStore";
 import { useTypesStore } from "./stores/typesStore";
-import useFlowStore from "./stores/flowStore";
 
 export default function App() {
   const removeFromTempNotificationList = useAlertStore(
@@ -45,24 +45,31 @@ export default function App() {
   const refreshStars = useDarkStore((state) => state.refreshStars);
   const checkHasStore = useStoreStore((state) => state.checkHasStore);
 
-  const handleModalWShortcut = useFlowStore(state => state.handleModalWShortcut);
-  const nodes = useFlowStore(state => state.nodes);
-  
+  const handleModalWShortcut = useFlowStore(
+    (state) => state.handleModalWShortcut
+  );
+  const nodes = useFlowStore((state) => state.nodes);
+
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
       const selectedNode = nodes.filter((obj) => obj.selected);
-      if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "C" && selectedNode.length > 0) {
+      if (
+        (event.ctrlKey || event.metaKey) &&
+        event.shiftKey &&
+        event.key === "C" &&
+        selectedNode.length > 0
+      ) {
         event.preventDefault();
         handleModalWShortcut("code");
       }
     };
-  
+
     document.addEventListener("keydown", onKeyDown);
-  
+
     return () => {
       document.removeEventListener("keydown", onKeyDown);
     };
-  }, [handleModalWShortcut, nodes]); 
+  }, [handleModalWShortcut, nodes]);
 
   useEffect(() => {
     refreshStars();
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 9006039d1..94525831d 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -182,11 +182,7 @@ export default function ParameterComponent({
         return (
           <div key={index}>
             {index === 0 && (
-              <span>
-                {left
-                  ? inputHandleHover
-                  : outputHandleHover}
-              </span>
+              <span>{left ? inputHandleHover : outputHandleHover}</span>
             )}
             <span
               key={index}
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index f0552bdc7..9b81f93a2 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -466,7 +466,7 @@ export default function GenericNode({
                   if (buildStatus === BuildStatus.BUILDING || isBuilding)
                     return;
                   setValidationStatus(null);
-                  buildFlow({nodeId: data.id});
+                  buildFlow({ nodeId: data.id });
                 }}
               >
                 <div>
diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index f1eab4c60..617ba3e29 100644
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/index.tsx
@@ -6,10 +6,10 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "../../components/ui/popover";
+import { zeroNotifications } from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
 import { AlertDropdownType } from "../../types/alerts";
 import SingleAlert from "./components/singleAlertComponent";
-import { zeroNotifications } from "../../constants/constants";
 
 export default function AlertDropdown({
   children,
diff --git a/src/frontend/src/components/IOInputField/index.tsx b/src/frontend/src/components/IOInputField/index.tsx
index 20c6dceb3..04610baeb 100644
--- a/src/frontend/src/components/IOInputField/index.tsx
+++ b/src/frontend/src/components/IOInputField/index.tsx
@@ -24,7 +24,8 @@ export default function IOInputField({
               e.target.value;
               if (node) {
                 let newNode = cloneDeep(node);
-                newNode.data.node!.template["input_value"].value = e.target.value;
+                newNode.data.node!.template["input_value"].value =
+                  e.target.value;
                 setNode(node.id, newNode);
               }
             }}
@@ -54,7 +55,8 @@ export default function IOInputField({
               e.target.value;
               if (node) {
                 let newNode = cloneDeep(node);
-                newNode.data.node!.template["input_value"].value = e.target.value;
+                newNode.data.node!.template["input_value"].value =
+                  e.target.value;
                 setNode(node.id, newNode);
               }
             }}
diff --git a/src/frontend/src/components/IOOutputView/index.tsx b/src/frontend/src/components/IOOutputView/index.tsx
index 00ef69a14..b16878cb4 100644
--- a/src/frontend/src/components/IOOutputView/index.tsx
+++ b/src/frontend/src/components/IOOutputView/index.tsx
@@ -20,7 +20,10 @@ export default function IOOutputView({
             className="w-full custom-scroll"
             placeholder={"Empty"}
             // update to real value on flowPool
-            value={((flowPool[node.id] ?? [])[(flowPool[node.id]?.length ?? 1) - 1])?.params ?? ""}
+            value={
+              (flowPool[node.id] ?? [])[(flowPool[node.id]?.length ?? 1) - 1]
+                ?.params ?? ""
+            }
             readOnly
           />
         );
@@ -35,7 +38,8 @@ export default function IOOutputView({
               e.target.value;
               if (node) {
                 let newNode = cloneDeep(node);
-                newNode.data.node!.template["input_value"].value = e.target.value;
+                newNode.data.node!.template["input_value"].value =
+                  e.target.value;
                 setNode(node.id, newNode);
               }
             }}
diff --git a/src/frontend/src/components/ShadTooltipComponent/index.tsx b/src/frontend/src/components/ShadTooltipComponent/index.tsx
index c56d2b23e..080935b6f 100644
--- a/src/frontend/src/components/ShadTooltipComponent/index.tsx
+++ b/src/frontend/src/components/ShadTooltipComponent/index.tsx
@@ -15,7 +15,7 @@ export default function ShadTooltip({
       <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
 
       <TooltipContent
-        className={cn(styleClasses, "max-w-96") }
+        className={cn(styleClasses, "max-w-96")}
         side={side}
         avoidCollisions={false}
         sticky="always"
diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 2014b2b47..269fcbb6b 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -3,12 +3,12 @@ import { useState } from "react";
 import Loading from "../../../components/ui/loading";
 import { FlowType } from "../../../types/flow";
 
+import { MISSED_ERROR_ALERT } from "../../../constants/alerts_constants";
 import useAlertStore from "../../../stores/alertStore";
 import useFlowStore from "../../../stores/flowStore";
 import { validateNodes } from "../../../utils/reactflowUtils";
 import RadialProgressComponent from "../../RadialProgress";
 import IconComponent from "../../genericIconComponent";
-import { MISSED_ERROR_ALERT } from "../../../constants/alerts_constants";
 
 export default function BuildTrigger({
   open,
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 7dcc62ee2..ed15bdede 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -9,6 +9,7 @@ import {
 
 import { useNavigate } from "react-router-dom";
 import { Node } from "reactflow";
+import { savedHover } from "../../../../constants/constants";
 import FlowSettingsModal from "../../../../modals/flowSettingsModal";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
@@ -17,7 +18,6 @@ import { cn } from "../../../../utils/utils";
 import ShadTooltip from "../../../ShadTooltipComponent";
 import IconComponent from "../../../genericIconComponent";
 import { Button } from "../../../ui/button";
-import { savedHover } from "../../../../constants/constants";
 
 export const MenuBar = ({
   removeFunction,
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 71cc59ccb..688ea8d97 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -1,10 +1,14 @@
 import { useEffect, useState } from "react";
+import {
+  CONSOLE_ERROR_MSG,
+  CONSOLE_SUCCESS_MSG,
+  INVALID_FILE_ALERT,
+} from "../../constants/alerts_constants";
 import { uploadFile } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { FileComponentType } from "../../types/components";
 import IconComponent from "../genericIconComponent";
-import { CONSOLE_ERROR_MSG, CONSOLE_SUCCESS_MSG, INVALID_FILE_ALERT } from "../../constants/alerts_constants";
 
 export default function InputFileComponent({
   value,
diff --git a/src/frontend/src/components/newChatView/chatInput/index.tsx b/src/frontend/src/components/newChatView/chatInput/index.tsx
index 7c112bfd2..9f7f0f761 100644
--- a/src/frontend/src/components/newChatView/chatInput/index.tsx
+++ b/src/frontend/src/components/newChatView/chatInput/index.tsx
@@ -1,10 +1,13 @@
 import { useEffect, useState } from "react";
 import IconComponent from "../../../components/genericIconComponent";
 import { Textarea } from "../../../components/ui/textarea";
+import {
+  chatInputPlaceholder,
+  chatInputPlaceholderSend,
+} from "../../../constants/constants";
+import useFlowsManagerStore from "../../../stores/flowsManagerStore";
 import { chatInputType } from "../../../types/components";
 import { classNames } from "../../../utils/utils";
-import { chatInputPlaceholder, chatInputPlaceholderSend } from "../../../constants/constants";
-import useFlowsManagerStore from "../../../stores/flowsManagerStore";
 
 export default function ChatInput({
   lockChat,
@@ -22,7 +25,7 @@ export default function ChatInput({
     }
   }, [lockChat, inputRef]);
 
-/*   function handleChange(value: number) {
+  /*   function handleChange(value: number) {
     console.log(value);
     if (value > 0) {
       setRepeat(value);
@@ -43,7 +46,12 @@ export default function ChatInput({
       <div className="relative w-full">
         <Textarea
           onKeyDown={(event) => {
-            if (event.key === "Enter" && !lockChat && !saveLoading && !event.shiftKey) {
+            if (
+              event.key === "Enter" &&
+              !lockChat &&
+              !saveLoading &&
+              !event.shiftKey
+            ) {
               sendMessage(repeat);
             }
           }}
@@ -60,12 +68,14 @@ export default function ChatInput({
                 : "hidden"
             }`,
           }}
-          value={lockChat ? "Thinking..." : (saveLoading ? "Saving..." : chatValue)}
+          value={
+            lockChat ? "Thinking..." : saveLoading ? "Saving..." : chatValue
+          }
           onChange={(event): void => {
             setChatValue(event.target.value);
           }}
           className={classNames(
-            (lockChat || saveLoading)
+            lockChat || saveLoading
               ? " form-modal-lock-true bg-input"
               : noInput
               ? "form-modal-no-input bg-input"
@@ -74,9 +84,7 @@ export default function ChatInput({
             "form-modal-lockchat"
           )}
           placeholder={
-            noInput
-              ? chatInputPlaceholder
-              : chatInputPlaceholderSend
+            noInput ? chatInputPlaceholder : chatInputPlaceholderSend
           }
         />
         <div className="form-modal-send-icon-position">
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 14ba7c67e..3c7c5c0ab 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -1,10 +1,10 @@
 import { useEffect } from "react";
+import { editTextModalTitle } from "../../constants/constants";
 import { TypeModal } from "../../constants/enums";
 import GenericModal from "../../modals/genericModal";
 import { TextAreaComponentType } from "../../types/components";
 import IconComponent from "../genericIconComponent";
 import { Input } from "../ui/input";
-import { editTextModalTitle } from "../../constants/constants";
 
 export default function TextAreaComponent({
   value,
diff --git a/src/frontend/src/components/ui/xmark.tsx b/src/frontend/src/components/ui/xmark.tsx
index b5598842a..b6b595f0c 100644
--- a/src/frontend/src/components/ui/xmark.tsx
+++ b/src/frontend/src/components/ui/xmark.tsx
@@ -12,7 +12,6 @@ export default function Xmark({ initial = true, isVisible, className }) {
           className={"CheckIcon " + className}
         >
           <motion.path
-          
             initial={{ pathLength: 0, pathOffset: 1, strokeLinecap: "butt" }}
             animate={{ pathLength: 1, pathOffset: 0, strokeLinecap: "round" }}
             exit={{ pathLength: 0, pathOffset: 1, strokeLinecap: "butt" }}
diff --git a/src/frontend/src/constants/alerts_constants.tsx b/src/frontend/src/constants/alerts_constants.tsx
index 7e6250829..6ac4efae9 100644
--- a/src/frontend/src/constants/alerts_constants.tsx
+++ b/src/frontend/src/constants/alerts_constants.tsx
@@ -1,49 +1,58 @@
 // ERROR
 export const MISSED_ERROR_ALERT = "Oops! Looks like you missed something";
-export const INVALID_FILE_ALERT = "Please select a valid file. Only these file types are allowed:";
+export const INVALID_FILE_ALERT =
+  "Please select a valid file. Only these file types are allowed:";
 export const CONSOLE_ERROR_MSG = "Error occurred while uploading file";
 export const CONSOLE_SUCCESS_MSG = "File uploaded successfully";
-export const INFO_MISSING_ALERT = "Oops! Looks like you missed some required information:";
-export const FUNC_ERROR_ALERT = "There is an error in your function"
-export const IMPORT_ERROR_ALERT = "There is an error in your imports"
-export const BUG_ALERT = "Something went wrong, please try again"
-export const CODE_ERROR_ALERT = "There is something wrong with this code, please review it"
-export const CHAT_ERROR_ALERT = "Please build the flow again before using the chat."
-export const MSG_ERROR_ALERT = "There was an error sending the message"
-export const PROMPT_ERROR_ALERT = "There is something wrong with this prompt, please review it"
-export const API_ERROR_ALERT = "There was an error saving the API Key, please try again."
-export const USER_DEL_ERROR_ALERT = "Error on delete user"
-export const USER_EDIT_ERROR_ALERT = "Error on edit user"
-export const USER_ADD_ERROR_ALERT = "Error when adding new user"
-export const SIGNIN_ERROR_ALERT = "Error signing in"
-export const DEL_KEY_ERROR_ALERT = "Error on delete key"
-export const UPLOAD_ERROR_ALERT = "Error uploading file"
-export const WRONG_FILE_ERROR_ALERT = "Invalid file type"
-export const UPLOAD_ALERT_LIST = "Please upload a JSON file"
-export const INVALID_SELECTION_ERROR_ALERT = "Invalid selection"
-export const EDIT_PASSWORD_ERROR_ALERT = "Error changing password"
-export const EDIT_PASSWORD_ALERT_LIST = "Passwords do not match"
-export const SAVE_ERROR_ALERT = "Error saving changes"
-export const SIGNUP_ERROR_ALERT = "Error signing up"
-export const APIKEY_ERROR_ALERT = "API Key Error"
-export const NOAPI_ERROR_ALERT = "You don't have an API Key. Please add one to use the Langflow Store."
-export const INVALID_API_ERROR_ALERT = "Your API Key is not valid. Please add a valid API Key to use the Langflow Store."
-export const COMPONENTS_ERROR_ALERT = "Error getting components."
+export const INFO_MISSING_ALERT =
+  "Oops! Looks like you missed some required information:";
+export const FUNC_ERROR_ALERT = "There is an error in your function";
+export const IMPORT_ERROR_ALERT = "There is an error in your imports";
+export const BUG_ALERT = "Something went wrong, please try again";
+export const CODE_ERROR_ALERT =
+  "There is something wrong with this code, please review it";
+export const CHAT_ERROR_ALERT =
+  "Please build the flow again before using the chat.";
+export const MSG_ERROR_ALERT = "There was an error sending the message";
+export const PROMPT_ERROR_ALERT =
+  "There is something wrong with this prompt, please review it";
+export const API_ERROR_ALERT =
+  "There was an error saving the API Key, please try again.";
+export const USER_DEL_ERROR_ALERT = "Error on delete user";
+export const USER_EDIT_ERROR_ALERT = "Error on edit user";
+export const USER_ADD_ERROR_ALERT = "Error when adding new user";
+export const SIGNIN_ERROR_ALERT = "Error signing in";
+export const DEL_KEY_ERROR_ALERT = "Error on delete key";
+export const UPLOAD_ERROR_ALERT = "Error uploading file";
+export const WRONG_FILE_ERROR_ALERT = "Invalid file type";
+export const UPLOAD_ALERT_LIST = "Please upload a JSON file";
+export const INVALID_SELECTION_ERROR_ALERT = "Invalid selection";
+export const EDIT_PASSWORD_ERROR_ALERT = "Error changing password";
+export const EDIT_PASSWORD_ALERT_LIST = "Passwords do not match";
+export const SAVE_ERROR_ALERT = "Error saving changes";
+export const SIGNUP_ERROR_ALERT = "Error signing up";
+export const APIKEY_ERROR_ALERT = "API Key Error";
+export const NOAPI_ERROR_ALERT =
+  "You don't have an API Key. Please add one to use the Langflow Store.";
+export const INVALID_API_ERROR_ALERT =
+  "Your API Key is not valid. Please add a valid API Key to use the Langflow Store.";
+export const COMPONENTS_ERROR_ALERT = "Error getting components.";
 
 // NOTICE
-export const NOCHATOUTPUT_NOTICE_ALERT = "There is no ChatOutput node in the flow."
-export const API_WARNING_NOTICE_ALERT = "Warning: Critical data, JSON file may include API keys."
-export const COPIED_NOTICE_ALERT = "API Key copied!"
-export const TEMP_NOTICE_ALERT = "Your template does not have any variables."
-
+export const NOCHATOUTPUT_NOTICE_ALERT =
+  "There is no ChatOutput node in the flow.";
+export const API_WARNING_NOTICE_ALERT =
+  "Warning: Critical data, JSON file may include API keys.";
+export const COPIED_NOTICE_ALERT = "API Key copied!";
+export const TEMP_NOTICE_ALERT = "Your template does not have any variables.";
 
 // SUCCESS
-export const CODE_SUCCESS_ALERT = "Code is ready to run"
-export const PROMPT_SUCCESS_ALERT = "Prompt is ready"
-export const API_SUCCESS_ALERT = "Success! Your API Key has been saved."
-export const USER_DEL_SUCCESS_ALERT = "Success! User deleted!"
-export const USER_EDIT_SUCCESS_ALERT = "Success! User edited!"
-export const USER_ADD_SUCCESS_ALERT = "Success! New user added!"
-export const DEL_KEY_SUCCESS_ALERT = "Success! Key deleted!"
-export const FLOW_BUILD_SUCCESS_ALERT = `Flow built successfully`
-export const SAVE_SUCCESS_ALERT = "Changes saved successfully!"
+export const CODE_SUCCESS_ALERT = "Code is ready to run";
+export const PROMPT_SUCCESS_ALERT = "Prompt is ready";
+export const API_SUCCESS_ALERT = "Success! Your API Key has been saved.";
+export const USER_DEL_SUCCESS_ALERT = "Success! User deleted!";
+export const USER_EDIT_SUCCESS_ALERT = "Success! User edited!";
+export const USER_ADD_SUCCESS_ALERT = "Success! New user added!";
+export const DEL_KEY_SUCCESS_ALERT = "Success! Key deleted!";
+export const FLOW_BUILD_SUCCESS_ALERT = `Flow built successfully`;
+export const SAVE_SUCCESS_ALERT = "Changes saved successfully!";
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index 2c0df8fad..d9ce68847 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -683,7 +683,8 @@ export const priorityFields = new Set(["code", "template"]);
 export const INPUT_TYPES = new Set(["ChatInput", "TextInput"]);
 export const OUTPUT_TYPES = new Set(["ChatOutput", "TextOutput"]);
 
-export const chatFirstInitialText = "Start a conversation and click the agent's thoughts";
+export const chatFirstInitialText =
+  "Start a conversation and click the agent's thoughts";
 
 export const chatSecondInitialText = "to inspect the chaining process.";
 
@@ -691,26 +692,29 @@ export const zeroNotifications = "No new notifications";
 
 export const successBuild = "Built sucessfully ✨";
 
-export const alertSaveWApi = "Caution: Uncheck this box only removes API keys from fields specifically designated for API keys."
+export const alertSaveWApi =
+  "Caution: Uncheck this box only removes API keys from fields specifically designated for API keys.";
 
 export const saveWApiCheckbox = "Save with my API keys";
-export const editTextModalTitle = "Edit Text"
-export const editTextPlaceholder = "Type message here."
+export const editTextModalTitle = "Edit Text";
+export const editTextPlaceholder = "Type message here.";
 export const inputHandleHover = "Avaliable input components:";
 export const outputHandleHover = "Avaliable output components:";
 export const textInputModalTitle = "Text Inputs";
-export const outputsModalTitle = "Prompt Outputs"
-export const langflowChatTitle = "Langflow Chat"
-export const chatInputPlaceholder = "No chat input variables found. Click to run your flow."
-export const chatInputPlaceholderSend = "Send a message..."
-export const editCodeTitle = "Edit Code"
-export const myCollectionDesc = "Manage your personal projects. Download or upload your collection."
+export const outputsModalTitle = "Prompt Outputs";
+export const langflowChatTitle = "Langflow Chat";
+export const chatInputPlaceholder =
+  "No chat input variables found. Click to run your flow.";
+export const chatInputPlaceholderSend = "Send a message...";
+export const editCodeTitle = "Edit Code";
+export const myCollectionDesc =
+  "Manage your personal projects. Download or upload your collection.";
 export const storeDesc = "Search flows and components from the community.";
-export const storeTitle = "Langflow Store"
-export const noApi = "You don't have an API key. "
-export const insertApi = "Insert your Langflow API key."
-export const invalidApi = "Your API key is not valid. "
-export const createApi = `Don’t have an API key? Sign up at`
-export const statusBuild = "Build to validate status."
-export const statusBuilding = "Building..."
-export const savedHover = "Last saved at "
\ No newline at end of file
+export const storeTitle = "Langflow Store";
+export const noApi = "You don't have an API key. ";
+export const insertApi = "Insert your Langflow API key.";
+export const invalidApi = "Your API key is not valid. ";
+export const createApi = `Don’t have an API key? Sign up at`;
+export const statusBuild = "Build to validate status.";
+export const statusBuilding = "Building...";
+export const savedHover = "Last saved at ";
diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx
index a7224dbc4..7f3cb38d2 100644
--- a/src/frontend/src/controllers/API/api.tsx
+++ b/src/frontend/src/controllers/API/api.tsx
@@ -123,7 +123,9 @@ function ApiInterceptor() {
   async function clearBuildVerticesState(error) {
     if (error?.response?.status === 500) {
       const vertices = useFlowStore.getState().verticesBuild;
-      useFlowStore.getState().updateBuildStatus(vertices?.verticesIds ?? [], BuildStatus.BUILT);
+      useFlowStore
+        .getState()
+        .updateBuildStatus(vertices?.verticesIds ?? [], BuildStatus.BUILT);
       useFlowStore.getState().setIsBuilding(false);
     }
   }
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index bc7a0fa72..2d4f65148 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -870,9 +870,12 @@ export async function getVerticesOrder(
 export async function postBuildVertex(
   flowId: string,
   vertexId: string,
-  input_value: string,
+  input_value: string
 ): Promise<AxiosResponse<VertexBuildTypeAPI>> {
-  return await api.post(`${BASE_URL_API}build/${flowId}/vertices/${vertexId}`, input_value ? {inputs: {input_value: input_value}} : undefined);
+  return await api.post(
+    `${BASE_URL_API}build/${flowId}/vertices/${vertexId}`,
+    input_value ? { inputs: { input_value: input_value } } : undefined
+  );
 }
 
 export async function downloadImage({ flowId, fileName }): Promise<any> {
diff --git a/src/frontend/src/modals/SecretKeyModal/index.tsx b/src/frontend/src/modals/SecretKeyModal/index.tsx
index a03ce8262..3c6ab9489 100644
--- a/src/frontend/src/modals/SecretKeyModal/index.tsx
+++ b/src/frontend/src/modals/SecretKeyModal/index.tsx
@@ -3,12 +3,12 @@ import { useEffect, useRef, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
+import { COPIED_NOTICE_ALERT } from "../../constants/alerts_constants";
 import { createApiKey } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
 import { ApiKeyType } from "../../types/components";
 import { nodeIconsLucide } from "../../utils/styleUtils";
 import BaseModal from "../baseModal";
-import { COPIED_NOTICE_ALERT } from "../../constants/alerts_constants";
 
 export default function SecretKeyModal({
   title,
diff --git a/src/frontend/src/modals/StoreApiKeyModal/index.tsx b/src/frontend/src/modals/StoreApiKeyModal/index.tsx
index 168fc79fc..fca6a36ee 100644
--- a/src/frontend/src/modals/StoreApiKeyModal/index.tsx
+++ b/src/frontend/src/modals/StoreApiKeyModal/index.tsx
@@ -3,14 +3,22 @@ import { useContext, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
+import {
+  API_ERROR_ALERT,
+  API_SUCCESS_ALERT,
+} from "../../constants/alerts_constants";
+import {
+  createApi,
+  insertApi,
+  invalidApi,
+  noApi,
+} from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
 import { addApiKeyStore } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { StoreApiKeyType } from "../../types/components";
 import BaseModal from "../baseModal";
-import { API_ERROR_ALERT, API_SUCCESS_ALERT } from "../../constants/alerts_constants";
-import { createApi, insertApi, invalidApi, noApi } from "../../constants/constants";
 
 export default function StoreApiKeyModal({
   children,
@@ -60,11 +68,8 @@ export default function StoreApiKeyModal({
       <BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
       <BaseModal.Header
         description={
-          (hasApiKey && !validApiKey
-            ? invalidApi
-            : !hasApiKey
-            ? noApi
-            : "") + insertApi
+          (hasApiKey && !validApiKey ? invalidApi : !hasApiKey ? noApi : "") +
+          insertApi
         }
       >
         <span className="pr-2">API Key</span>
@@ -99,7 +104,7 @@ export default function StoreApiKeyModal({
           </div>
           <div className="flex items-end justify-between">
             <span className="pr-1 text-xs text-muted-foreground">
-              {createApi} {" "}
+              {createApi}{" "}
               <a
                 className="text-high-indigo underline"
                 href="https://langflow.store/"
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index 6788fdcf9..58f816805 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -21,7 +21,7 @@ type TriggerProps = {
 };
 
 const Content: React.FC<ContentProps> = ({ children }) => {
-  return <div className="h-full w-full flex flex-col">{children}</div>;
+  return <div className="flex h-full w-full flex-col">{children}</div>;
 };
 const Trigger: React.FC<TriggerProps> = ({ children, asChild, disable }) => {
   return (
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index f2f1499ea..0fecf2a7f 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -9,14 +9,23 @@ import AceEditor from "react-ace";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
-import { CODE_PROMPT_DIALOG_SUBTITLE, editCodeTitle } from "../../constants/constants";
+import {
+  BUG_ALERT,
+  CODE_ERROR_ALERT,
+  CODE_SUCCESS_ALERT,
+  FUNC_ERROR_ALERT,
+  IMPORT_ERROR_ALERT,
+} from "../../constants/alerts_constants";
+import {
+  CODE_PROMPT_DIALOG_SUBTITLE,
+  editCodeTitle,
+} from "../../constants/constants";
 import { postCustomComponent, postValidateCode } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
 import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
 import { codeAreaModalPropsType } from "../../types/components";
 import BaseModal from "../baseModal";
-import { BUG_ALERT, CODE_ERROR_ALERT, CODE_SUCCESS_ALERT, FUNC_ERROR_ALERT, IMPORT_ERROR_ALERT } from "../../constants/alerts_constants";
 
 export default function CodeAreaModal({
   value,
@@ -47,26 +56,33 @@ export default function CodeAreaModal({
     }
   }, []);
 
-  const handleModalWShortcut = useFlowStore((state) => state.handleModalWShortcut) 
-  const openCodeModalWShortcut = useFlowStore(state => state.openCodeModalWShortcut);
-const nodes = useFlowStore(state => state.nodes);
+  const handleModalWShortcut = useFlowStore(
+    (state) => state.handleModalWShortcut
+  );
+  const openCodeModalWShortcut = useFlowStore(
+    (state) => state.openCodeModalWShortcut
+  );
+  const nodes = useFlowStore((state) => state.nodes);
 
-useEffect(() => {
-  const onKeyDown = (event: KeyboardEvent) => {
-    
-    const selectedNode = nodes.filter((obj) => obj.selected);
-    if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "C" && selectedNode.length > 0) {
-      event.preventDefault();
-      setOpen(openCodeModalWShortcut)
-    }
-    
-  }
-  document.addEventListener("keydown", onKeyDown);
-  
-  return () => {
-    document.removeEventListener("keydown", onKeyDown);
-  }
-}, []);
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      const selectedNode = nodes.filter((obj) => obj.selected);
+      if (
+        (event.ctrlKey || event.metaKey) &&
+        event.shiftKey &&
+        event.key === "C" &&
+        selectedNode.length > 0
+      ) {
+        event.preventDefault();
+        setOpen(openCodeModalWShortcut);
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, []);
 
   useEffect(() => {
     if (openModal) setOpen(true);
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 0a9bf3290..9ff06c2cc 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -3,13 +3,17 @@ import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
-import { EXPORT_DIALOG_SUBTITLE, alertSaveWApi, saveWApiCheckbox } from "../../constants/constants";
+import { API_WARNING_NOTICE_ALERT } from "../../constants/alerts_constants";
+import {
+  EXPORT_DIALOG_SUBTITLE,
+  alertSaveWApi,
+  saveWApiCheckbox,
+} from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
 import { useDarkStore } from "../../stores/darkStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { downloadFlow, removeApiKeys } from "../../utils/reactflowUtils";
 import BaseModal from "../baseModal";
-import { API_WARNING_NOTICE_ALERT } from "../../constants/alerts_constants";
 
 const ExportModal = forwardRef(
   (props: { children: ReactNode }, ref): JSX.Element => {
@@ -55,9 +59,7 @@ const ExportModal = forwardRef(
               {saveWApiCheckbox}
             </label>
           </div>
-          <span className=" text-xs text-destructive ">
-            {alertSaveWApi}
-          </span>
+          <span className=" text-xs text-destructive ">{alertSaveWApi}</span>
         </BaseModal.Content>
 
         <BaseModal.Footer>
@@ -77,8 +79,7 @@ const ExportModal = forwardRef(
                   description
                 );
                 setNoticeData({
-                  title:
-                    API_WARNING_NOTICE_ALERT,
+                  title: API_WARNING_NOTICE_ALERT,
                 });
               } else
                 downloadFlow(
diff --git a/src/frontend/src/modals/formModal/chatInput/index.tsx b/src/frontend/src/modals/formModal/chatInput/index.tsx
index bf39740d4..b3a126b7e 100644
--- a/src/frontend/src/modals/formModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/formModal/chatInput/index.tsx
@@ -1,9 +1,12 @@
 import { useEffect } from "react";
 import IconComponent from "../../../components/genericIconComponent";
 import { Textarea } from "../../../components/ui/textarea";
+import {
+  chatInputPlaceholder,
+  chatInputPlaceholderSend,
+} from "../../../constants/constants";
 import { chatInputType } from "../../../types/components";
 import { classNames } from "../../../utils/utils";
-import { chatInputPlaceholder, chatInputPlaceholderSend } from "../../../constants/constants";
 
 export default function ChatInput({
   lockChat,
@@ -67,11 +70,7 @@ export default function ChatInput({
 
           "form-modal-lockchat"
         )}
-        placeholder={
-          noInput
-            ? chatInputPlaceholder
-            : chatInputPlaceholderSend
-        }
+        placeholder={noInput ? chatInputPlaceholder : chatInputPlaceholderSend}
       />
       <div className="form-modal-send-icon-position">
         <button
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index 1d000ee31..d90e67e57 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -20,14 +20,23 @@ import {
   DialogTrigger,
 } from "../../components/ui/dialog";
 import { Textarea } from "../../components/ui/textarea";
-import { CHAT_FORM_DIALOG_SUBTITLE, chatFirstInitialText, chatSecondInitialText, langflowChatTitle } from "../../constants/constants";
+import {
+  CHAT_ERROR_ALERT,
+  INFO_MISSING_ALERT,
+  MSG_ERROR_ALERT,
+} from "../../constants/alerts_constants";
+import {
+  CHAT_FORM_DIALOG_SUBTITLE,
+  chatFirstInitialText,
+  chatSecondInitialText,
+  langflowChatTitle,
+} from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
 import { getBuildStatus } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
 import { FlowState } from "../../types/tabs";
 import { validateNodes } from "../../utils/reactflowUtils";
-import { CHAT_ERROR_ALERT, INFO_MISSING_ALERT, MSG_ERROR_ALERT } from "../../constants/alerts_constants";
 
 export default function FormModal({
   flow,
@@ -591,7 +600,7 @@ export default function FormModal({
                       <br />
                       <div className="langflow-chat-desc">
                         <span className="langflow-chat-desc-span">
-                          {chatFirstInitialText} {" "}
+                          {chatFirstInitialText}{" "}
                           <span>
                             <IconComponent
                               name="MessageSquare"
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index b79431ac9..253115bf3 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -5,12 +5,17 @@ import IconComponent from "../../components/genericIconComponent";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import { Textarea } from "../../components/ui/textarea";
+import {
+  BUG_ALERT,
+  PROMPT_ERROR_ALERT,
+  PROMPT_SUCCESS_ALERT,
+  TEMP_NOTICE_ALERT,
+} from "../../constants/alerts_constants";
 import {
   INVALID_CHARACTERS,
   MAX_WORDS_HIGHLIGHT,
   PROMPT_DIALOG_SUBTITLE,
   TEXT_DIALOG_SUBTITLE,
-  editTextModalTitle,
   editTextPlaceholder,
   regexHighlight,
 } from "../../constants/constants";
@@ -21,7 +26,6 @@ import { genericModalPropsType } from "../../types/components";
 import { handleKeyDown } from "../../utils/reactflowUtils";
 import { classNames, varHighlightHTML } from "../../utils/utils";
 import BaseModal from "../baseModal";
-import { BUG_ALERT, PROMPT_ERROR_ALERT, PROMPT_SUCCESS_ALERT, TEMP_NOTICE_ALERT } from "../../constants/alerts_constants";
 
 export default function GenericModal({
   field_name = "",
diff --git a/src/frontend/src/pages/AdminPage/LoginPage/index.tsx b/src/frontend/src/pages/AdminPage/LoginPage/index.tsx
index 335cf2a6a..b1772baa5 100644
--- a/src/frontend/src/pages/AdminPage/LoginPage/index.tsx
+++ b/src/frontend/src/pages/AdminPage/LoginPage/index.tsx
@@ -2,6 +2,7 @@ import { useContext, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Button } from "../../../components/ui/button";
 import { Input } from "../../../components/ui/input";
+import { SIGNIN_ERROR_ALERT } from "../../../constants/alerts_constants";
 import { CONTROL_LOGIN_STATE } from "../../../constants/constants";
 import { AuthContext } from "../../../contexts/authContext";
 import { onLogin } from "../../../controllers/API";
@@ -11,7 +12,6 @@ import {
   inputHandlerEventType,
   loginInputStateType,
 } from "../../../types/components";
-import { SIGNIN_ERROR_ALERT } from "../../../constants/alerts_constants";
 
 export default function LoginAdminPage() {
   const navigate = useNavigate();
diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx
index 16cce09da..95b52b24c 100644
--- a/src/frontend/src/pages/AdminPage/index.tsx
+++ b/src/frontend/src/pages/AdminPage/index.tsx
@@ -16,6 +16,14 @@ import {
   TableHeader,
   TableRow,
 } from "../../components/ui/table";
+import {
+  USER_ADD_ERROR_ALERT,
+  USER_ADD_SUCCESS_ALERT,
+  USER_DEL_ERROR_ALERT,
+  USER_DEL_SUCCESS_ALERT,
+  USER_EDIT_ERROR_ALERT,
+  USER_EDIT_SUCCESS_ALERT,
+} from "../../constants/alerts_constants";
 import {
   ADMIN_HEADER_DESCRIPTION,
   ADMIN_HEADER_TITLE,
@@ -33,7 +41,6 @@ import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { Users } from "../../types/api";
 import { UserInputType } from "../../types/components";
-import { USER_ADD_ERROR_ALERT, USER_ADD_SUCCESS_ALERT, USER_DEL_ERROR_ALERT, USER_DEL_SUCCESS_ALERT, USER_EDIT_ERROR_ALERT, USER_EDIT_SUCCESS_ALERT } from "../../constants/alerts_constants";
 
 export default function AdminPage() {
   const [inputValue, setInputValue] = useState("");
diff --git a/src/frontend/src/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/ApiKeysPage/index.tsx
index bf9c62e7f..9dd473637 100644
--- a/src/frontend/src/pages/ApiKeysPage/index.tsx
+++ b/src/frontend/src/pages/ApiKeysPage/index.tsx
@@ -17,6 +17,10 @@ import SecretKeyModal from "../../modals/SecretKeyModal";
 
 import moment from "moment";
 import Header from "../../components/headerComponent";
+import {
+  DEL_KEY_ERROR_ALERT,
+  DEL_KEY_SUCCESS_ALERT,
+} from "../../constants/alerts_constants";
 import {
   API_PAGE_PARAGRAPH_1,
   API_PAGE_PARAGRAPH_2,
@@ -26,7 +30,6 @@ import {
 } from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
 import { ApiKey } from "../../types/components";
-import { DEL_KEY_ERROR_ALERT, DEL_KEY_SUCCESS_ALERT } from "../../constants/alerts_constants";
 
 export default function ApiKeysPage() {
   const [loadingKeys, setLoadingKeys] = useState(true);
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 8c3f99c46..638de133c 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -13,6 +13,12 @@ import ReactFlow, {
 } from "reactflow";
 import GenericNode from "../../../../CustomNodes/GenericNode";
 import Chat from "../../../../components/chatComponent";
+import {
+  INVALID_SELECTION_ERROR_ALERT,
+  UPLOAD_ALERT_LIST,
+  UPLOAD_ERROR_ALERT,
+  WRONG_FILE_ERROR_ALERT,
+} from "../../../../constants/alerts_constants";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
@@ -31,7 +37,6 @@ import { getRandomName, isWrappedWithClass } from "../../../../utils/utils";
 import ConnectionLineComponent from "../ConnectionLineComponent";
 import SelectionMenu from "../SelectionMenuComponent";
 import ExtraSidebar from "../extraSidebarComponent";
-import { INVALID_SELECTION_ERROR_ALERT, UPLOAD_ALERT_LIST, UPLOAD_ERROR_ALERT, WRONG_FILE_ERROR_ALERT } from "../../../../constants/alerts_constants";
 
 const nodeTypes = {
   genericNode: GenericNode,
@@ -91,7 +96,11 @@ export default function Page({
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
       const selectedNode = nodes.filter((obj) => obj.selected);
-      if ((event.ctrlKey || event.metaKey) && event.key === "p" && selectedNode.length > 0) {
+      if (
+        (event.ctrlKey || event.metaKey) &&
+        event.key === "p" &&
+        selectedNode.length > 0
+      ) {
         event.preventDefault();
         setNode(selectedNode[0].id, (old) => ({
           ...old,
@@ -104,12 +113,19 @@ export default function Page({
           },
         }));
       }
-      if ((event.ctrlKey || event.metaKey) && event.key === "d" && selectedNode.length > 0) {
+      if (
+        (event.ctrlKey || event.metaKey) &&
+        event.key === "d" &&
+        selectedNode.length > 0
+      ) {
         event.preventDefault();
-        paste({nodes: selectedNode, edges: []}, {
-          x: position.current.x,
-          y: position.current.y,
-        });
+        paste(
+          { nodes: selectedNode, edges: [] },
+          {
+            x: position.current.x,
+            y: position.current.y,
+          }
+        );
       }
       if (!isWrappedWithClass(event, "noundo")) {
         if (
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index a756ae8c3..fe78895c0 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -4,6 +4,7 @@ import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import IconComponent from "../../../../components/genericIconComponent";
 import { Input } from "../../../../components/ui/input";
 import { Separator } from "../../../../components/ui/separator";
+import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
 import ApiModal from "../../../../modals/ApiModal";
 import ExportModal from "../../../../modals/exportModal";
 import ShareModal from "../../../../modals/shareModal";
@@ -25,7 +26,6 @@ import {
 } from "../../../../utils/utils";
 import DisclosureComponent from "../DisclosureComponent";
 import SidebarDraggableComponent from "./sideBarDraggableComponent";
-import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
 
 export default function ExtraSidebar(): JSX.Element {
   const data = useTypesStore((state) => state.data);
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 3fa1ddefa..812eb9ed1 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -90,12 +90,16 @@ export default function NodeToolbarComponent({
   }, [showModalAdvanced]);
   const updateNodeInternals = useUpdateNodeInternals();
 
-  const openCodeModalWShortcut = useFlowStore(state => state.openCodeModalWShortcut);
-  const handleModalWShortcut = useFlowStore(state => state.handleModalWShortcut);
+  const openCodeModalWShortcut = useFlowStore(
+    (state) => state.openCodeModalWShortcut
+  );
+  const handleModalWShortcut = useFlowStore(
+    (state) => state.handleModalWShortcut
+  );
 
   useEffect(() => {
-    setOpenModal(openCodeModalWShortcut)
-  }, [openCodeModalWShortcut, handleModalWShortcut])
+    setOpenModal(openCodeModalWShortcut);
+  }, [openCodeModalWShortcut, handleModalWShortcut]);
 
   const setLastCopiedSelection = useFlowStore(
     (state) => state.setLastCopiedSelection
diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
index d93811d5b..6e971b635 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -6,10 +6,14 @@ import CardsWrapComponent from "../../../../components/cardsWrapComponent";
 import IconComponent from "../../../../components/genericIconComponent";
 import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent";
 import { Button } from "../../../../components/ui/button";
+import {
+  CONSOLE_ERROR_MSG,
+  UPLOAD_ALERT_LIST,
+  WRONG_FILE_ERROR_ALERT,
+} from "../../../../constants/alerts_constants";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { FlowType } from "../../../../types/flow";
-import { CONSOLE_ERROR_MSG, UPLOAD_ALERT_LIST, WRONG_FILE_ERROR_ALERT } from "../../../../constants/alerts_constants";
 
 export default function ComponentsComponent({
   is_component = true,
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index e8f0f4136..2cddf4273 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -6,11 +6,14 @@ import IconComponent from "../../components/genericIconComponent";
 import PageLayout from "../../components/pageLayout";
 import SidebarNav from "../../components/sidebarComponent";
 import { Button } from "../../components/ui/button";
-import { USER_PROJECTS_HEADER, myCollectionDesc } from "../../constants/constants";
+import { CONSOLE_ERROR_MSG } from "../../constants/alerts_constants";
+import {
+  USER_PROJECTS_HEADER,
+  myCollectionDesc,
+} from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { downloadFlows } from "../../utils/reactflowUtils";
-import { CONSOLE_ERROR_MSG } from "../../constants/alerts_constants";
 export default function HomePage(): JSX.Element {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
diff --git a/src/frontend/src/pages/ProfileSettingsPage/index.tsx b/src/frontend/src/pages/ProfileSettingsPage/index.tsx
index 4ee66139e..a7af7c86a 100644
--- a/src/frontend/src/pages/ProfileSettingsPage/index.tsx
+++ b/src/frontend/src/pages/ProfileSettingsPage/index.tsx
@@ -6,6 +6,12 @@ import GradientChooserComponent from "../../components/gradientChooserComponent"
 import Header from "../../components/headerComponent";
 import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
+import {
+  EDIT_PASSWORD_ALERT_LIST,
+  EDIT_PASSWORD_ERROR_ALERT,
+  SAVE_ERROR_ALERT,
+  SAVE_SUCCESS_ALERT,
+} from "../../constants/alerts_constants";
 import { CONTROL_PATCH_USER_STATE } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
 import { resetPassword, updateUser } from "../../controllers/API";
@@ -16,7 +22,6 @@ import {
   patchUserInputStateType,
 } from "../../types/components";
 import { gradients } from "../../utils/styleUtils";
-import { EDIT_PASSWORD_ALERT_LIST, EDIT_PASSWORD_ERROR_ALERT, SAVE_ERROR_ALERT, SAVE_SUCCESS_ALERT } from "../../constants/alerts_constants";
 export default function ProfileSettingsPage(): JSX.Element {
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index b824cf7f1..57cebf693 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -20,6 +20,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../components/ui/select";
+import {
+  APIKEY_ERROR_ALERT,
+  COMPONENTS_ERROR_ALERT,
+  INVALID_API_ERROR_ALERT,
+  NOAPI_ERROR_ALERT,
+} from "../../constants/alerts_constants";
+import { storeDesc, storeTitle } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
 import { getStoreComponents, getStoreTags } from "../../controllers/API";
 import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
@@ -28,8 +35,6 @@ import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { storeComponent } from "../../types/store";
 import { cn } from "../../utils/utils";
-import { APIKEY_ERROR_ALERT, COMPONENTS_ERROR_ALERT, INVALID_API_ERROR_ALERT, NOAPI_ERROR_ALERT } from "../../constants/alerts_constants";
-import { storeDesc, storeTitle } from "../../constants/constants";
 
 export default function StorePage(): JSX.Element {
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
@@ -65,17 +70,13 @@ export default function StorePage(): JSX.Element {
       if (!hasApiKey) {
         setErrorData({
           title: APIKEY_ERROR_ALERT,
-          list: [
-            NOAPI_ERROR_ALERT,
-          ],
+          list: [NOAPI_ERROR_ALERT],
         });
         setLoading(false);
       } else if (!validApiKey) {
         setErrorData({
           title: APIKEY_ERROR_ALERT,
-          list: [
-            INVALID_API_ERROR_ALERT,
-          ],
+          list: [INVALID_API_ERROR_ALERT],
         });
       }
     }
diff --git a/src/frontend/src/pages/loginPage/index.tsx b/src/frontend/src/pages/loginPage/index.tsx
index f0d77ba9f..2d9ea59c9 100644
--- a/src/frontend/src/pages/loginPage/index.tsx
+++ b/src/frontend/src/pages/loginPage/index.tsx
@@ -4,6 +4,7 @@ import { Link, useNavigate } from "react-router-dom";
 import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
+import { SIGNIN_ERROR_ALERT } from "../../constants/alerts_constants";
 import { CONTROL_LOGIN_STATE } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
 import { onLogin } from "../../controllers/API";
@@ -13,7 +14,6 @@ import {
   inputHandlerEventType,
   loginInputStateType,
 } from "../../types/components";
-import { SIGNIN_ERROR_ALERT } from "../../constants/alerts_constants";
 
 export default function LoginPage(): JSX.Element {
   const [inputState, setInputState] =
diff --git a/src/frontend/src/pages/signUpPage/index.tsx b/src/frontend/src/pages/signUpPage/index.tsx
index 932ed67e4..1cdad3d59 100644
--- a/src/frontend/src/pages/signUpPage/index.tsx
+++ b/src/frontend/src/pages/signUpPage/index.tsx
@@ -4,6 +4,7 @@ import { Link, useNavigate } from "react-router-dom";
 import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
+import { SIGNUP_ERROR_ALERT } from "../../constants/alerts_constants";
 import {
   CONTROL_INPUT_STATE,
   SIGN_UP_SUCCESS,
@@ -15,7 +16,6 @@ import {
   inputHandlerEventType,
   signUpInputStateType,
 } from "../../types/components";
-import { SIGNUP_ERROR_ALERT } from "../../constants/alerts_constants";
 
 export default function SignUp(): JSX.Element {
   const [inputState, setInputState] =
diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index 473b51b09..1f4a494bb 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -57,15 +57,15 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   inputs: [],
   outputs: [],
   openCodeModalWShortcut: false,
-  handleModalWShortcut: ((modal) => {
+  handleModalWShortcut: (modal) => {
     switch (modal) {
       case "code":
         set((state) => ({
           openCodeModalWShortcut: !state.openCodeModalWShortcut,
         }));
-        break
+        break;
     }
-  }),
+  },
   setFlowPool: (flowPool) => {
     set({ flowPool });
   },
@@ -494,7 +494,12 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     };
   },
   updateVerticesBuild: (
-    vertices: { verticesIds: string[], verticesOrder: string[][], verticesLayers: string[][], runId: string } | null
+    vertices: {
+      verticesIds: string[];
+      verticesOrder: string[][];
+      verticesLayers: string[][];
+      runId: string;
+    } | null
   ) => {
     set({ verticesBuild: vertices });
   },
diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts
index 9ed8d3215..75044f921 100644
--- a/src/frontend/src/types/zustand/flow/index.ts
+++ b/src/frontend/src/types/zustand/flow/index.ts
@@ -25,7 +25,10 @@ export type FlowPoolObjectType = {
   timestamp: string;
   valid: boolean;
   params: any;
-  data: { artifacts: any | ChatOutputType | chatInputType; results: any | ChatOutputType | chatInputType };
+  data: {
+    artifacts: any | ChatOutputType | chatInputType;
+    results: any | ChatOutputType | chatInputType;
+  };
   duration?: string;
   progress?: number;
   id: string;
@@ -38,7 +41,7 @@ export type FlowPoolType = {
 
 export type FlowStoreType = {
   openCodeModalWShortcut: boolean;
-  handleModalWShortcut: (modal: string) => void
+  handleModalWShortcut: (modal: string) => void;
   flowPool: FlowPoolType;
   inputs: Array<{ type: string; id: string }>;
   outputs: Array<{ type: string; id: string }>;
@@ -88,13 +91,35 @@ export type FlowStoreType = {
   getFilterEdge: any[];
   onConnect: (connection: Connection) => void;
   unselectAll: () => void;
-  buildFlow: ({nodeId, input_value}: {nodeId?: string, input_value?: string}) => Promise<void>;
+  buildFlow: ({
+    nodeId,
+    input_value,
+  }: {
+    nodeId?: string;
+    input_value?: string;
+  }) => Promise<void>;
   getFlow: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
-  updateVerticesBuild: (vertices: {verticesIds: string[], verticesLayers: string[][], verticesOrder: string[][], runId: string} | null) => void;
-  removeFromVerticesBuild: (vertices: string[]) => void; 
-  verticesBuild:  {verticesIds: string[], verticesLayers: string[][], verticesOrder: string[][], runId: string} | null;
+  updateVerticesBuild: (
+    vertices: {
+      verticesIds: string[];
+      verticesLayers: string[][];
+      verticesOrder: string[][];
+      runId: string;
+    } | null
+  ) => void;
+  removeFromVerticesBuild: (vertices: string[]) => void;
+  verticesBuild: {
+    verticesIds: string[];
+    verticesLayers: string[][];
+    verticesOrder: string[][];
+    runId: string;
+  } | null;
   updateBuildStatus: (nodeId: string[], status: BuildStatus) => void;
   revertBuiltStatusFromBuilding: () => void;
   flowBuildStatus: { [key: string]: BuildStatus };
-  updateFlowPool: (nodeId:string, data:FlowPoolObjectType | ChatOutputType | chatInputType,buildId?:string) => void;
+  updateFlowPool: (
+    nodeId: string,
+    data: FlowPoolObjectType | ChatOutputType | chatInputType,
+    buildId?: string
+  ) => void;
 };
diff --git a/src/frontend/src/utils/buildUtils.ts b/src/frontend/src/utils/buildUtils.ts
index b50c90b23..e5003caf2 100644
--- a/src/frontend/src/utils/buildUtils.ts
+++ b/src/frontend/src/utils/buildUtils.ts
@@ -39,7 +39,15 @@ function getInactiveVertexData(vertexId: string): VertexBuildTypeAPI {
   return inactiveVertexData;
 }
 
-export async function updateVerticesOrder(flowId: string, nodeId: string | null): Promise<{ verticesLayers: string[][], verticesIds: string[], verticesOrder: string[][], runId: string }> {
+export async function updateVerticesOrder(
+  flowId: string,
+  nodeId: string | null
+): Promise<{
+  verticesLayers: string[][];
+  verticesIds: string[];
+  verticesOrder: string[][];
+  runId: string;
+}> {
   return new Promise(async (resolve, reject) => {
     const setErrorData = useAlertStore.getState().setErrorData;
     let orderResponse;
@@ -79,7 +87,12 @@ export async function updateVerticesOrder(flowId: string, nodeId: string | null)
     const verticesIds = verticesLayers.flat();
     useFlowStore
       .getState()
-      .updateVerticesBuild({ verticesLayers, verticesIds, verticesOrder, runId });
+      .updateVerticesBuild({
+        verticesLayers,
+        verticesIds,
+        verticesOrder,
+        runId,
+      });
     resolve({ verticesLayers, verticesIds, verticesOrder, runId });
   });
 }
@@ -106,7 +119,7 @@ export async function buildVertices({
   let stop = false;
 
   if (onGetOrderSuccess) onGetOrderSuccess();
-    
+
   if (validateNodes) {
     try {
       validateNodes(verticesOrder.flatMap((id) => id));
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index 2cd74d6d1..3be951214 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -280,7 +280,7 @@ export const nodeIconsLucide: iconsType = {
   Meta: MetaIcon,
   Midjorney: MidjourneyIcon,
   MongoDBAtlasVectorSearch: MongoDBIcon,
-  MongoDB:MongoDBIcon,
+  MongoDB: MongoDBIcon,
   MongoDBChatMessageHistory: MongoDBIcon,
   NotionDirectoryLoader: NotionIcon,
   ChatOpenAI: OpenAiIcon,