From becdb49661c7071cac0ee0acac42656d4f4c53c9 Mon Sep 17 00:00:00 2001
From: ogabrielluiz <gabriel@langflow.org>
Date: Mon, 10 Jun 2024 14:13:10 -0300
Subject: [PATCH 1/6] refactor: Rename 'document' variable to 'text' in
 chroma_collection_to_records function

---
 src/backend/base/langflow/base/vectorstores/utils.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/backend/base/langflow/base/vectorstores/utils.py b/src/backend/base/langflow/base/vectorstores/utils.py
index e8d93ff37..739181600 100644
--- a/src/backend/base/langflow/base/vectorstores/utils.py
+++ b/src/backend/base/langflow/base/vectorstores/utils.py
@@ -15,7 +15,7 @@ def chroma_collection_to_records(collection_dict: dict):
     for i, doc in enumerate(collection_dict["documents"]):
         record_dict = {
             "id": collection_dict["ids"][i],
-            "document": doc,
+            "text": doc,
         }
         if "metadatas" in collection_dict:
             for key, value in collection_dict["metadatas"][i].items():

From 24e8da5086faac90b3a79a7b5e3b542f65b97e45 Mon Sep 17 00:00:00 2001
From: ogabrielluiz <gabriel@langflow.org>
Date: Mon, 10 Jun 2024 14:14:18 -0300
Subject: [PATCH 2/6] refactor: Update ChromaComponent build method to allow
 duplicates in the Vector Store

---
 .../components/vectorstores/Chroma.py         | 52 +++++++++++--------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/backend/base/langflow/components/vectorstores/Chroma.py b/src/backend/base/langflow/components/vectorstores/Chroma.py
index b7cfad7d4..6001b119c 100644
--- a/src/backend/base/langflow/components/vectorstores/Chroma.py
+++ b/src/backend/base/langflow/components/vectorstores/Chroma.py
@@ -1,3 +1,4 @@
+from copy import deepcopy
 from typing import List, Optional, Union
 
 import chromadb
@@ -6,6 +7,7 @@ from langchain_chroma import Chroma
 from langchain_core.embeddings import Embeddings
 from langchain_core.retrievers import BaseRetriever
 from langchain_core.vectorstores import VectorStore
+
 from langflow.base.vectorstores.utils import chroma_collection_to_records
 from langflow.custom import CustomComponent
 from langflow.schema import Record
@@ -48,6 +50,11 @@ class ChromaComponent(CustomComponent):
                 "display_name": "Server SSL Enabled",
                 "advanced": True,
             },
+            "allow_duplicates": {
+                "display_name": "Allow Duplicates",
+                "advanced": True,
+                "info": "If false, will not add documents that are already in the Vector Store.",
+            },
         }
 
     def build(
@@ -61,6 +68,7 @@ class ChromaComponent(CustomComponent):
         chroma_server_host: Optional[str] = None,
         chroma_server_http_port: Optional[int] = None,
         chroma_server_grpc_port: Optional[int] = None,
+        allow_duplicates: bool = False,
     ) -> Union[VectorStore, BaseRetriever]:
         """
         Builds the Vector Store or BaseRetriever object.
@@ -75,6 +83,7 @@ class ChromaComponent(CustomComponent):
         - chroma_server_host (Optional[str]): The host for the Chroma server.
         - chroma_server_http_port (Optional[int]): The HTTP port for the Chroma server.
         - chroma_server_grpc_port (Optional[int]): The gRPC port for the Chroma server.
+        - allow_duplicates (bool): Whether to allow duplicates in the Vector Store.
 
         Returns:
         - Union[VectorStore, BaseRetriever]: The Vector Store or BaseRetriever object.
@@ -93,35 +102,34 @@ class ChromaComponent(CustomComponent):
             )
             client = chromadb.HttpClient(settings=chroma_settings)
 
-        # If documents, then we need to create a Chroma instance using .from_documents
-
         # Check index_directory and expand it if it is a relative path
         if index_directory is not None:
             index_directory = self.resolve_path(index_directory)
 
+        chroma = Chroma(
+            persist_directory=index_directory,
+            client=client,
+            embedding_function=embedding,
+            collection_name=collection_name,
+        )
+        if allow_duplicates:
+            stored_records = []
+        else:
+            stored_records = chroma_collection_to_records(chroma.get())
+            _stored_documents_without_id = []
+            for record in deepcopy(stored_records):
+                del record.id
+                _stored_documents_without_id.append(record)
         documents = []
         for _input in inputs or []:
             if isinstance(_input, Record):
-                documents.append(_input.to_lc_document())
+                if _input not in _stored_documents_without_id:
+                    documents.append(_input.to_lc_document())
             else:
-                documents.append(_input)
-        if documents is not None and embedding is not None:
-            if len(documents) == 0:
-                raise ValueError("If documents are provided, there must be at least one document.")
-            chroma = Chroma.from_documents(
-                documents=documents,  # type: ignore
-                persist_directory=index_directory,
-                collection_name=collection_name,
-                embedding=embedding,
-                client=client,
-            )
-        else:
-            chroma = Chroma(
-                persist_directory=index_directory,
-                client=client,
-                embedding_function=embedding,
-            )
+                raise ValueError("Inputs must be a Record objects.")
 
-        store = chroma.get()
-        self.status = chroma_collection_to_records(store)
+        if documents and embedding is not None:
+            chroma.add_documents(documents)
+
+        self.status = stored_records
         return chroma

From f872a3e753ece33cb219f93e6e3826422f937831 Mon Sep 17 00:00:00 2001
From: ogabrielluiz <gabriel@langflow.org>
Date: Mon, 10 Jun 2024 14:29:16 -0300
Subject: [PATCH 3/6] refactor: Update SelfQueryRetrieverComponent build method
 to handle different input types

---
 .../retrievers/SelfQueryRetriever.py          | 49 +++++++++++++++----
 1 file changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/backend/base/langflow/components/retrievers/SelfQueryRetriever.py b/src/backend/base/langflow/components/retrievers/SelfQueryRetriever.py
index a46bf7bd8..3e6d6f696 100644
--- a/src/backend/base/langflow/components/retrievers/SelfQueryRetriever.py
+++ b/src/backend/base/langflow/components/retrievers/SelfQueryRetriever.py
@@ -4,7 +4,7 @@ from langchain.retrievers.self_query.base import SelfQueryRetriever
 from langchain_core.vectorstores import VectorStore
 
 from langflow.custom import CustomComponent
-from langflow.field_typing import BaseLanguageModel
+from langflow.field_typing import BaseLanguageModel, Text
 from langflow.schema import Record
 from langflow.schema.message import Message
 
@@ -14,25 +14,54 @@ class SelfQueryRetrieverComponent(CustomComponent):
     description: str = "Retriever that uses a vector store and an LLM to generate the vector store queries."
     icon = "LangChain"
 
+    def build_config(self):
+        return {
+            "query": {
+                "display_name": "Query",
+                "input_types": ["Message", "Text"],
+                "info": "Query to be passed as input.",
+            },
+            "vectorstore": {
+                "display_name": "Vector Store",
+                "info": "Vector Store to be passed as input.",
+            },
+            "attribute_infos": {
+                "display_name": "Metadata Field Info",
+                "info": "Metadata Field Info to be passed as input.",
+            },
+            "document_content_description": {
+                "display_name": "Document Content Description",
+                "info": "Document Content Description to be passed as input.",
+            },
+            "llm": {
+                "display_name": "LLM",
+                "info": "LLM to be passed as input.",
+            },
+        }
+
     def build(
         self,
         query: Message,
         vectorstore: VectorStore,
-        metadata_field_info: list[AttributeInfo],
-        document_content_description: str,
+        attribute_infos: list[Record],
+        document_content_description: Text,
         llm: BaseLanguageModel,
     ) -> Record:
-        metadata_field_info = [i[0] for i in metadata_field_info]
-
+        metadata_field_infos = [AttributeInfo(**record.data) for record in attribute_infos]
         self_query_retriever = SelfQueryRetriever.from_llm(
-            llm,
-            vectorstore,
-            document_content_description,
-            metadata_field_info,
+            llm=llm,
+            vectorstore=vectorstore,
+            document_contents=document_content_description,
+            metadata_field_info=metadata_field_infos,
             enable_limit=True,
         )
 
-        input_text = query.text
+        if isinstance(query, Message):
+            input_text = query.text
+        elif isinstance(query, str):
+            input_text = query
+        else:
+            raise ValueError(f"Query type {type(query)} not supported.")
         documents = self_query_retriever.invoke(input=input_text)
         records = [Record.from_document(document) for document in documents]
         self.status = records

From 65773b424f04b685e8d43837b249d7ddc55980bd Mon Sep 17 00:00:00 2001
From: ogabrielluiz <gabriel@langflow.org>
Date: Mon, 10 Jun 2024 14:30:27 -0300
Subject: [PATCH 4/6] refactor: Update .gitattributes to remove
 working-tree-encoding for .mdx and .json files

---
 .gitattributes | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.gitattributes b/.gitattributes
index d6e351bc3..379b21be8 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -11,12 +11,12 @@
 *.ts text
 *.tsx text
 *.md text
-*.mdx text working-tree-encoding = UTF-8
+*.mdx text
 *.yml text
 *.yaml text
 *.xml text
 *.csv text
-*.json text working-tree-encoding = UTF-8
+*.json text
 *.sh text
 *.Dockerfile text
 Dockerfile text

From 1726561f397843cae5dc246b4552468ef64866ff Mon Sep 17 00:00:00 2001
From: ogabrielluiz <gabriel@langflow.org>
Date: Mon, 10 Jun 2024 15:16:49 -0300
Subject: [PATCH 5/6] format

---
 src/backend/base/langflow/api/v1/files.py     |  3 +-
 src/backend/base/langflow/helpers/folders.py  |  2 +-
 src/frontend/src/App.tsx                      |  6 +--
 .../components/parameterComponent/index.tsx   | 16 +++---
 .../tooltipRenderComponent/index.tsx          |  2 +-
 .../src/CustomNodes/GenericNode/index.tsx     | 38 +++++++-------
 .../helpers/get-class-from-build-status.ts    |  2 +-
 .../hooks/use-check-code-validity.tsx         |  2 +-
 .../hooks/use-fetch-data-on-mount.tsx         |  2 +-
 .../hooks/use-handle-new-value.tsx            |  2 +-
 .../hooks/use-handle-node-class.tsx           |  2 +-
 .../src/CustomNodes/hooks/use-icon-render.tsx |  4 +-
 .../CustomNodes/hooks/use-icons-status.tsx    |  2 +-
 .../hooks/use-update-node-code.tsx            |  4 +-
 .../src/CustomNodes/utils/get-field-title.tsx |  2 +-
 .../src/alerts/alertDropDown/index.tsx        |  6 +--
 .../src/components/ImageViewer/index.tsx      | 14 +++---
 .../folderAccordionComponent/index.tsx        |  2 +-
 .../components/accordionComponent/index.tsx   |  4 +-
 .../addNewVariableButton.tsx                  |  6 +--
 .../components/dragCardComponent/index.tsx    |  4 +-
 .../src/components/cardComponent/index.tsx    | 18 +++----
 .../components/cardsWrapComponent/index.tsx   |  2 +-
 .../src/components/chatComponent/index.tsx    | 10 ++--
 .../components/codeAreaComponent/index.tsx    |  2 +-
 .../components/codeTabsComponent/index.tsx    | 45 ++++++++---------
 .../src/components/dictComponent/index.tsx    |  2 +-
 .../components/dropdownComponent/index.tsx    |  4 +-
 .../editFlowSettingsComponent/index.tsx       |  2 +-
 .../components/genericIconComponent/index.tsx |  6 +--
 .../components/menuBar/index.tsx              |  2 +-
 .../src/components/headerComponent/index.tsx  | 19 +++----
 .../horizontalScrollFadeComponent/index.tsx   |  4 +-
 .../components/popover/index.tsx              | 16 +++---
 .../components/popoverObject/index.tsx        | 24 ++++-----
 .../src/components/inputComponent/index.tsx   | 12 ++---
 .../components/inputFileComponent/index.tsx   |  4 +-
 .../components/inputGlobalComponent/index.tsx |  8 +--
 .../components/inputListComponent/index.tsx   |  2 +-
 .../components/sideBarButtons/index.tsx       |  2 +-
 .../components/sideBarFolderButtons/index.tsx | 18 +++----
 .../hooks/use-on-file-drop.tsx                | 10 ++--
 .../components/TableOptions/index.tsx         |  4 +-
 .../components/tableAutoCellRender/index.tsx  |  3 +-
 .../components/tableNodeCellRender/index.tsx  |  6 +--
 .../src/components/tableComponent/index.tsx   |  9 ++--
 .../tagsSelectorComponent/index.tsx           |  2 +-
 src/frontend/src/components/ui/accordion.tsx  |  6 +--
 src/frontend/src/components/ui/alert.tsx      |  2 +-
 src/frontend/src/components/ui/button.tsx     |  6 +--
 src/frontend/src/components/ui/card.tsx       |  4 +-
 src/frontend/src/components/ui/checkbox.tsx   |  4 +-
 .../src/components/ui/custom-accordion.tsx    |  4 +-
 src/frontend/src/components/ui/form.tsx       |  8 +--
 .../src/components/ui/select-custom.tsx       |  6 +--
 src/frontend/src/components/ui/toggle.tsx     |  2 +-
 src/frontend/src/components/ui/tooltip.tsx    |  4 +-
 src/frontend/src/controllers/API/api.tsx      | 12 ++---
 .../API/helpers/check-duplicate-requests.ts   |  2 +-
 src/frontend/src/icons/Groq/index.tsx         |  2 +-
 .../src/icons/LangChain/LangChainIcon.jsx     | 28 ++++++++---
 src/frontend/src/icons/Streamlit/index.tsx    |  2 +-
 src/frontend/src/index.tsx                    |  5 +-
 .../BundleModal/hooks/submit-folder.tsx       |  4 +-
 .../components/csvSelect/index.tsx            |  2 +-
 .../components/SessionView/hooks/index.tsx    |  2 +-
 .../IOModal/components/SessionView/index.tsx  | 18 ++-----
 .../components/buttonSendWrapper/index.tsx    |  4 +-
 .../components/textAreaWrapper/index.tsx      |  6 +--
 .../components/uploadFileButton/index.tsx     |  4 +-
 .../chatInput/hooks/use-drag-and-drop.tsx     |  3 +-
 .../hooks/use-handle-file-change.tsx          |  4 +-
 .../chatView/chatInput/hooks/use-upload.tsx   |  2 +-
 .../components/chatView/chatInput/index.tsx   |  6 ++-
 .../components/fileCardWrapper/index.tsx      |  2 +-
 .../components/chatView/chatMessage/index.tsx | 22 ++++----
 .../chatView/fileComponent/index.tsx          |  2 +-
 .../fileComponent/utils/get-classes.tsx       |  4 +-
 .../fileComponent/utils/handle-download.tsx   |  5 +-
 .../utils/format-file-name.tsx                |  2 +-
 .../IOModal/components/chatView/index.tsx     |  4 +-
 src/frontend/src/modals/IOModal/index.tsx     | 38 +++++++-------
 .../utils/check-can-build-tweak-object.ts     |  2 +-
 .../apiModal/utils/get-changes-types.ts       |  2 +-
 .../modals/apiModal/utils/get-curl-code.tsx   |  6 +--
 .../utils/get-nodes-with-default-value.ts     |  4 +-
 .../apiModal/utils/get-python-api-code.tsx    |  2 +-
 .../modals/apiModal/utils/get-python-code.tsx |  2 +-
 .../src/modals/apiModal/utils/get-value.ts    |  2 +-
 .../modals/apiModal/utils/get-widget-code.tsx |  2 +-
 .../src/modals/apiModal/utils/tabs-array.tsx  |  2 +-
 .../src/modals/apiModal/views/index.tsx       | 18 +++----
 src/frontend/src/modals/baseModal/index.tsx   | 10 ++--
 .../editNodeModal/hooks/use-column-defs.tsx   |  5 +-
 .../src/modals/editNodeModal/index.tsx        |  6 +--
 src/frontend/src/modals/exportModal/index.tsx |  6 +--
 .../src/modals/flowLogsModal/index.tsx        |  4 +-
 .../foldersModal/hooks/submit-folder.tsx      |  4 +-
 .../src/modals/genericModal/index.tsx         |  6 +--
 .../src/modals/newFlowModal/index.tsx         |  2 +-
 src/frontend/src/modals/shareModal/index.tsx  |  6 +--
 .../modals/shareModal/utils/get-tags-ids.tsx  |  2 +-
 .../components/PageComponent/index.tsx        | 36 ++++++-------
 .../PageComponent/utils/get-random-name.tsx   |  2 +-
 .../SelectionMenuComponent/index.tsx          |  2 +-
 .../extraSidebarComponent/index.tsx           | 28 +++++------
 .../components/nodeToolbarComponent/index.tsx | 45 ++++++++---------
 .../toolbarSelectItem/index.tsx               | 10 ++--
 src/frontend/src/pages/FlowPage/index.tsx     |  2 +-
 .../hooks/use-delete-multiple.tsx             |  2 +-
 .../hooks/use-filtered-flows.tsx              |  4 +-
 .../hooks/use-handle-duplicate.tsx            |  8 +--
 .../hooks/use-handle-export.tsx               |  4 +-
 .../hooks/use-handle-select-all.tsx           |  2 +-
 .../hooks/use-select-options-change.tsx       |  4 +-
 .../hooks/use-selected-flows.tsx              |  2 +-
 .../components/componentsComponent/index.tsx  | 22 ++++----
 .../components/headerComponent/index.tsx      |  2 +-
 .../headerTabsSearchComponent/index.tsx       |  2 +-
 .../components/inputSearchComponent/index.tsx |  2 +-
 .../pages/MainPage/pages/mainPage/index.tsx   |  2 +-
 .../src/pages/MainPage/services/index.ts      | 12 ++---
 .../MainPage/utils/handle-download-folder.ts  |  2 +-
 src/frontend/src/pages/Playground/index.tsx   |  2 +-
 .../src/pages/ProfileSettingsPage/index.tsx   |  6 +--
 src/frontend/src/pages/SettingsPage/index.tsx |  2 +-
 .../components/ApiKeyHeader/index.tsx         |  1 -
 .../hooks/use-handle-delete-key.tsx           |  2 +-
 .../SettingsPage/pages/ApiKeysPage/index.tsx  |  4 +-
 .../components/PasswordForm/index.tsx         |  2 +-
 .../hooks/use-get-profile-pictures.ts         |  3 +-
 .../profilePictureChooserComponent/index.tsx  | 20 +++-----
 .../components/ProfilePictureForm/index.tsx   |  3 +-
 .../components/StoreApiKeyForm/index.tsx      |  4 +-
 .../SettingsPage/pages/GeneralPage/index.tsx  | 14 +++---
 .../pages/GlobalVariablesPage/index.tsx       |  7 ++-
 .../EditShortcutButton/index.tsx              | 14 +++---
 .../pages/ShortcutsPage/index.tsx             |  3 +-
 .../pages/hooks/use-patch-profile-picture.tsx |  2 +-
 .../SettingsPage/pages/hooks/use-save-key.tsx |  4 +-
 .../components/headerMessages/index.tsx       |  2 -
 .../hooks/use-remove-messages.tsx             |  2 +-
 .../SettingsPage/pages/messagesPage/index.tsx |  4 +-
 src/frontend/src/pages/StorePage/index.tsx    |  6 +--
 src/frontend/src/routes.tsx                   | 10 ++--
 src/frontend/src/stores/darkStore.ts          |  2 +-
 src/frontend/src/stores/flowStore.ts          | 50 +++++++++----------
 src/frontend/src/stores/flowsManagerStore.ts  | 28 +++++------
 src/frontend/src/stores/foldersStore.tsx      | 11 ++--
 .../globalVariablesStore/globalVariables.ts   |  2 +-
 src/frontend/src/stores/messagesStore.ts      |  6 +--
 src/frontend/src/types/store/index.ts         |  2 +-
 src/frontend/src/types/zustand/flow/index.ts  | 14 +++---
 .../src/types/zustand/flowsManager/index.ts   |  8 +--
 .../types/zustand/globalVariables/index.ts    |  2 +-
 src/frontend/src/utils/buildUtils.ts          | 18 +++----
 src/frontend/src/utils/parameterUtils.ts      |  4 +-
 src/frontend/src/utils/storeUtils.ts          |  2 +-
 src/frontend/src/utils/utils.ts               | 24 ++++-----
 159 files changed, 582 insertions(+), 588 deletions(-)

diff --git a/src/backend/base/langflow/api/v1/files.py b/src/backend/base/langflow/api/v1/files.py
index f6293686f..a72ee7711 100644
--- a/src/backend/base/langflow/api/v1/files.py
+++ b/src/backend/base/langflow/api/v1/files.py
@@ -110,7 +110,7 @@ async def download_profile_picture(
         extension = file_name.split(".")[-1]
         config_dir = get_storage_service().settings_service.settings.config_dir
         config_path = Path(config_dir)
-        folder_path = config_path / 'profile_pictures' / folder_name
+        folder_path = config_path / "profile_pictures" / folder_name
         content_type = build_content_type_from_extension(extension)
         file_content = await storage_service.get_file(flow_id=folder_path, file_name=file_name)
         return StreamingResponse(BytesIO(file_content), media_type=content_type)
@@ -140,7 +140,6 @@ async def list_profile_pictures(storage_service: StorageService = Depends(get_st
         raise HTTPException(status_code=500, detail=str(e))
 
 
-
 @router.get("/list/{flow_id}")
 async def list_files(
     flow_id: UUID = Depends(get_flow_id), storage_service: StorageService = Depends(get_storage_service)
diff --git a/src/backend/base/langflow/helpers/folders.py b/src/backend/base/langflow/helpers/folders.py
index fa6f27fcc..c3d7567b5 100644
--- a/src/backend/base/langflow/helpers/folders.py
+++ b/src/backend/base/langflow/helpers/folders.py
@@ -20,4 +20,4 @@ def generate_unique_folder_name(folder_name, user_id, session):
 
         # If a folder with the name already exists, append (n) to the name and increment n
         folder_name = f"{original_name} ({n})"
-        n += 1
\ No newline at end of file
+        n += 1
diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 4a60f453f..36f2ad9f9 100644
--- 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();
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 941c86271..37ef5cf60 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -98,7 +98,7 @@ export default function ParameterComponent({
     debouncedHandleUpdateValues,
     setNode,
     renderTooltips,
-    setIsLoading,
+    setIsLoading
   );
 
   const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
@@ -107,7 +107,7 @@ export default function ParameterComponent({
     takeSnapshot,
     setNode,
     updateNodeInternals,
-    renderTooltips,
+    renderTooltips
   );
 
   const { handleRefreshButtonPress: handleRefreshButtonPressHook } =
@@ -116,7 +116,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) => {
@@ -129,12 +129,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);
   };
@@ -216,7 +216,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,
@@ -286,7 +286,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"}
                     />
@@ -336,7 +336,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)}
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/tooltipRenderComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/tooltipRenderComponent/index.tsx
index ed2760161..c76bc7293 100644
--- 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
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index dea103b37..71c5388e0 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -13,19 +13,21 @@ import {
   TOOLTIP_OUTDATED_NODE,
 } from "../../constants/constants";
 import { BuildStatus } from "../../constants/enums";
-import { countHandlesFn } from "../helpers/count-handles";
-import { getSpecificClassFromBuildStatus } from "../helpers/get-class-from-build-status";
+import { postCustomComponent } from "../../controllers/API";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
 import useAlertStore from "../../stores/alertStore";
 import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { useShortcutsStore } from "../../stores/shortcuts";
 import { useTypesStore } from "../../stores/typesStore";
 import { VertexBuildTypeAPI } from "../../types/api";
 import { NodeDataType } from "../../types/flow";
 import { handleKeyDown, scapedJSONStringfy } from "../../utils/reactflowUtils";
 import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
 import { classNames, cn } from "../../utils/utils";
+import { countHandlesFn } from "../helpers/count-handles";
+import { getSpecificClassFromBuildStatus } from "../helpers/get-class-from-build-status";
 import useCheckCodeValidity from "../hooks/use-check-code-validity";
 import useIconNodeRender from "../hooks/use-icon-render";
 import useIconStatus from "../hooks/use-icons-status";
@@ -35,8 +37,6 @@ import useValidationStatusString from "../hooks/use-validation-status-string";
 import getFieldTitle from "../utils/get-field-title";
 import sortFields from "../utils/sort-fields";
 import ParameterComponent from "./components/parameterComponent";
-import { postCustomComponent } from "../../controllers/API";
-import { useShortcutsStore } from "../../stores/shortcuts";
 
 export default function GenericNode({
   data,
@@ -58,10 +58,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);
 
@@ -69,7 +69,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] =
@@ -87,7 +87,7 @@ export default function GenericNode({
     data.node!,
     setNode,
     setIsOutdated,
-    updateNodeInternals,
+    updateNodeInternals
   );
 
   const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
@@ -118,12 +118,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);
@@ -132,7 +132,7 @@ export default function GenericNode({
       baseBorderClass,
       nodeSizeClass,
       "generic-node-div group/node",
-      specificClassFromBuildStatus,
+      specificClassFromBuildStatus
     );
     return names;
   };
@@ -175,7 +175,7 @@ export default function GenericNode({
     showNode,
     isEmoji,
     nodeIconFragment,
-    checkNodeIconFragment,
+    checkNodeIconFragment
   );
 
   function countHandles(): void {
@@ -288,7 +288,7 @@ export default function GenericNode({
           selected,
           showNode,
           buildStatus,
-          validationStatus,
+          validationStatus
         )}
       >
         {data.node?.beta && showNode && (
@@ -419,7 +419,7 @@ export default function GenericNode({
                             }
                             title={getFieldTitle(
                               data.node?.template!,
-                              templateField,
+                              templateField
                             )}
                             info={data.node?.template[templateField].info}
                             name={templateField}
@@ -447,7 +447,7 @@ export default function GenericNode({
                             proxy={data.node?.template[templateField].proxy}
                             showNode={showNode}
                           />
-                        ),
+                        )
                     )}
                   <ParameterComponent
                     key={scapedJSONStringfy({
@@ -610,7 +610,7 @@ export default function GenericNode({
                       !data.node?.description) &&
                       nameEditable
                       ? "font-light italic"
-                      : "",
+                      : ""
                   )}
                   onClick={(e) => {
                     setInputDescription(true);
@@ -672,13 +672,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}
@@ -705,7 +705,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"
                 )}
               >
                 {" "}
diff --git a/src/frontend/src/CustomNodes/helpers/get-class-from-build-status.ts b/src/frontend/src/CustomNodes/helpers/get-class-from-build-status.ts
index 710e91d15..cf251c40c 100644
--- 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;
 
diff --git a/src/frontend/src/CustomNodes/hooks/use-check-code-validity.tsx b/src/frontend/src/CustomNodes/hooks/use-check-code-validity.tsx
index ec4d586f6..3a49ef62f 100644
--- 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
diff --git a/src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.tsx b/src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.tsx
index be239df8a..7426164f7 100644
--- a/src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.tsx
+++ b/src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.tsx
@@ -9,7 +9,7 @@ const useFetchDataOnMount = (
   handleUpdateValues,
   setNode,
   renderTooltips,
-  setIsLoading,
+  setIsLoading
 ) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);
 
diff --git a/src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx b/src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx
index e917970ca..dc416646b 100644
--- a/src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx
+++ b/src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx
@@ -10,7 +10,7 @@ const useHandleOnNewValue = (
   debouncedHandleUpdateValues,
   setNode,
   renderTooltips,
-  setIsLoading,
+  setIsLoading
 ) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);
 
diff --git a/src/frontend/src/CustomNodes/hooks/use-handle-node-class.tsx b/src/frontend/src/CustomNodes/hooks/use-handle-node-class.tsx
index 412658d77..bdcf1f8cc 100644
--- 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;
diff --git a/src/frontend/src/CustomNodes/hooks/use-icon-render.tsx b/src/frontend/src/CustomNodes/hooks/use-icon-render.tsx
index 181b4f515..cc9e29c0e 100644
--- 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;
diff --git a/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx b/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
index ec378fac2..9915c9074 100644
--- a/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
+++ b/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
@@ -7,7 +7,7 @@ import { VertexBuildTypeAPI } from "../../types/api";
 
 const useIconStatus = (
   buildStatus: BuildStatus | undefined,
-  validationStatus: VertexBuildTypeAPI | null,
+  validationStatus: VertexBuildTypeAPI | null
 ) => {
   const renderIconStatus = () => {
     if (buildStatus === BuildStatus.BUILDING) {
diff --git a/src/frontend/src/CustomNodes/hooks/use-update-node-code.tsx b/src/frontend/src/CustomNodes/hooks/use-update-node-code.tsx
index f1593597f..d919a4fa9 100644
--- 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;
diff --git a/src/frontend/src/CustomNodes/utils/get-field-title.tsx b/src/frontend/src/CustomNodes/utils/get-field-title.tsx
index e448c4f01..a00829a90 100644
--- 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!
diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index 05f42922d..6eff32fe2 100644
--- 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);
diff --git a/src/frontend/src/components/ImageViewer/index.tsx b/src/frontend/src/components/ImageViewer/index.tsx
index 8433962a7..dc7f41ad7 100644
--- 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)
           );
         };
       }
diff --git a/src/frontend/src/components/accordionComponent/composite/folderAccordionComponent/index.tsx b/src/frontend/src/components/accordionComponent/composite/folderAccordionComponent/index.tsx
index d4fb95b5c..212a03fa2 100644
--- 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 {
diff --git a/src/frontend/src/components/accordionComponent/index.tsx b/src/frontend/src/components/accordionComponent/index.tsx
index c9c21b8b2..43a0aef79 100644
--- 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}
diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index 36b68a7e8..61dada650 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -23,19 +23,19 @@ export default function AddNewVariableButton({ children }): JSX.Element {
   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() {
diff --git a/src/frontend/src/components/cardComponent/components/dragCardComponent/index.tsx b/src/frontend/src/components/cardComponent/components/dragCardComponent/index.tsx
index 28674f3bc..54dbf4846 100644
--- 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"}
                 />
diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index d169a598a..a364a2d45 100644
--- 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>
diff --git a/src/frontend/src/components/cardsWrapComponent/index.tsx b/src/frontend/src/components/cardsWrapComponent/index.tsx
index c7ca01588..0de3f1a2f 100644
--- 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 ? (
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 7fad5a882..bbb4f10bb 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -1,6 +1,6 @@
 import { Transition } from "@headlessui/react";
+import { useMemo, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import { useEffect, useMemo, useRef, useState } from "react";
 import IOModal from "../../modals/IOModal";
 import ApiModal from "../../modals/apiModal/views";
 import ShareModal from "../../modals/shareModal";
@@ -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
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index cd8a0f77d..dd68e774a 100644
--- 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 !== "") {
diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 3b42608d1..885de6442 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -26,7 +26,6 @@ import {
   TabsTrigger,
 } from "../../components/ui/tabs";
 import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants";
-import ExportModal from "../../modals/exportModal";
 import { Case } from "../../shared/components/caseComponent";
 import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
@@ -43,9 +42,9 @@ import IconComponent from "../genericIconComponent";
 import InputComponent from "../inputComponent";
 import KeypairListComponent from "../keypairListComponent";
 import ShadTooltip from "../shadTooltipComponent";
+import { Button } from "../ui/button";
 import { Label } from "../ui/label";
 import { Switch } from "../ui/switch";
-import { Button } from "../ui/button";
 
 export default function CodeTabsComponent({
   flow,
@@ -139,7 +138,7 @@ export default function CodeTabsComponent({
               <Label
                 className={cn(
                   "relative right-1 top-[4px] text-xs font-medium text-muted-foreground",
-                  activeTweaks ? "text-primary" : "",
+                  activeTweaks ? "text-primary" : ""
                 )}
                 htmlFor="tweaks-switch"
               >
@@ -194,7 +193,7 @@ export default function CodeTabsComponent({
               <div className="api-modal-according-display">
                 <div
                   className={classNames(
-                    "h-[70vh] w-full overflow-y-auto overflow-x-hidden rounded-lg bg-muted custom-scroll",
+                    "h-[70vh] w-full overflow-y-auto overflow-x-hidden rounded-lg bg-muted custom-scroll"
                   )}
                 >
                   {data?.map((node: any, i) => (
@@ -233,8 +232,8 @@ export default function CodeTabsComponent({
                                         .show &&
                                       LANGFLOW_SUPPORTED_TYPES.has(
                                         node.data.node.template[templateField]
-                                          .type,
-                                      ),
+                                          .type
+                                      )
                                   )
                                   .map((templateField, indx) => {
                                     return (
@@ -292,7 +291,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
@@ -338,7 +337,7 @@ export default function CodeTabsComponent({
                                                         target,
                                                         node.data.node.template[
                                                           templateField
-                                                        ],
+                                                        ]
                                                       );
                                                     }}
                                                   />
@@ -391,7 +390,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
@@ -428,7 +427,7 @@ export default function CodeTabsComponent({
                                                       e,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                   size="small"
@@ -459,7 +458,7 @@ export default function CodeTabsComponent({
                                                     ].fileTypes
                                                   }
                                                   onFileChange={(
-                                                    value: any,
+                                                    value: any
                                                   ) => {
                                                     node.data.node.template[
                                                       templateField
@@ -512,7 +511,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
@@ -552,7 +551,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                   value={
@@ -614,7 +613,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
@@ -660,7 +659,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
@@ -706,7 +705,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
@@ -738,8 +737,8 @@ export default function CodeTabsComponent({
                                                           ].value,
                                                           type(
                                                             node,
-                                                            templateField,
-                                                          ),
+                                                            templateField
+                                                          )
                                                         )
                                                   }
                                                   duplicateKey={
@@ -748,15 +747,15 @@ export default function CodeTabsComponent({
                                                   onChange={(target) => {
                                                     const valueToNumbers =
                                                       convertValuesToNumbers(
-                                                        target,
+                                                        target
                                                       );
                                                     node.data.node!.template[
                                                       templateField
                                                     ].value = valueToNumbers;
                                                     setErrorDuplicateKey(
                                                       hasDuplicateKeys(
-                                                        valueToNumbers,
-                                                      ),
+                                                        valueToNumbers
+                                                      )
                                                     );
                                                     setData((old) => {
                                                       let newInputList =
@@ -773,7 +772,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                   isList={
@@ -821,7 +820,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
diff --git a/src/frontend/src/components/dictComponent/index.tsx b/src/frontend/src/components/dictComponent/index.tsx
index 39850e6e3..5161135ed 100644
--- a/src/frontend/src/components/dictComponent/index.tsx
+++ b/src/frontend/src/components/dictComponent/index.tsx
@@ -29,7 +29,7 @@ export default function DictComponent({
     <div
       className={classNames(
         value.length > 1 && editNode ? "my-1" : "",
-        "flex flex-col gap-3",
+        "flex flex-col gap-3"
       )}
     >
       {
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 4aa9dcf07..0fd981603 100644
--- 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>
diff --git a/src/frontend/src/components/editFlowSettingsComponent/index.tsx b/src/frontend/src/components/editFlowSettingsComponent/index.tsx
index 26bc138e3..3dd813965 100644
--- 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}
diff --git a/src/frontend/src/components/genericIconComponent/index.tsx b/src/frontend/src/components/genericIconComponent/index.tsx
index 9f7c687a1..398ae6e7f 100644
--- 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;
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 6405e258a..83511c769 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -16,11 +16,11 @@ import FlowSettingsModal from "../../../../modals/flowSettingsModal";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { useShortcutsStore } from "../../../../stores/shortcuts";
 import { cn } from "../../../../utils/utils";
 import IconComponent from "../../../genericIconComponent";
 import ShadTooltip from "../../../shadTooltipComponent";
 import { Button } from "../../../ui/button";
-import { useShortcutsStore } from "../../../../stores/shortcuts";
 
 export const MenuBar = ({}: {}): JSX.Element => {
   const shortcuts = useShortcutsStore((state) => state.shortcuts);
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 7c094ca22..4c9b8c261 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -1,9 +1,9 @@
 import { useContext } from "react";
-import profileCircle from "../../assets/profile-circle.png";
 import { FaDiscord, FaGithub } from "react-icons/fa";
 import { RiTwitterXFill } from "react-icons/ri";
 import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import AlertDropdown from "../../alerts/alertDropDown";
+import profileCircle from "../../assets/profile-circle.png";
 import {
   BACKEND_URL,
   BASE_URL_API,
@@ -18,7 +18,6 @@ import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useLocationStore } from "../../stores/locationStore";
 import { useStoreStore } from "../../stores/storeStore";
-import { gradients } from "../../utils/styleUtils";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
 import {
@@ -59,7 +58,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];
@@ -200,9 +199,10 @@ export default function Header(): JSX.Element {
                     src={
                       `${BACKEND_URL.slice(
                         0,
-                        BACKEND_URL.length - 1,
-                      )}${BASE_URL_API}files/profile_pictures/${userData?.profile_image ?? "Space/046-rocket.png"}` ??
-                      profileCircle
+                        BACKEND_URL.length - 1
+                      )}${BASE_URL_API}files/profile_pictures/${
+                        userData?.profile_image ?? "Space/046-rocket.png"
+                      }` ?? profileCircle
                     }
                     className="h-7 w-7 focus-visible:outline-0 "
                   />
@@ -217,9 +217,10 @@ export default function Header(): JSX.Element {
                           src={
                             `${BACKEND_URL.slice(
                               0,
-                              BACKEND_URL.length - 1,
-                            )}${BASE_URL_API}files/profile_pictures/${userData?.profile_image}` ??
-                            profileCircle
+                              BACKEND_URL.length - 1
+                            )}${BASE_URL_API}files/profile_pictures/${
+                              userData?.profile_image
+                            }` ?? profileCircle
                           }
                           className="h-5 w-5 focus-visible:outline-0 "
                         />
diff --git a/src/frontend/src/components/horizontalScrollFadeComponent/index.tsx b/src/frontend/src/components/horizontalScrollFadeComponent/index.tsx
index e0bf48917..7e0c788a6 100644
--- 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
       );
     };
 
diff --git a/src/frontend/src/components/inputComponent/components/popover/index.tsx b/src/frontend/src/components/inputComponent/components/popover/index.tsx
index e93f69207..06be89d91 100644
--- 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">
diff --git a/src/frontend/src/components/inputComponent/components/popoverObject/index.tsx b/src/frontend/src/components/inputComponent/components/popoverObject/index.tsx
index e907ec239..d43022845 100644
--- 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">
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 5327c11e3..b361f48ab 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -71,7 +71,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) => {
@@ -154,7 +154,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
@@ -167,7 +167,7 @@ export default function InputComponent({
               selectedOption !== ""
                 ? "text-medium-indigo"
                 : "text-muted-foreground",
-              "hover:text-accent-foreground",
+              "hover:text-accent-foreground"
             )}
           >
             <ForwardedIconComponent
@@ -187,7 +187,7 @@ export default function InputComponent({
             "mb-px",
             editNode
               ? "input-component-true-button"
-              : "input-component-false-button",
+              : "input-component-false-button"
           )}
           onClick={(event) => {
             event.preventDefault();
@@ -204,7 +204,7 @@ export default function InputComponent({
               className={classNames(
                 editNode
                   ? "input-component-true-svg"
-                  : "input-component-false-svg",
+                  : "input-component-false-svg"
               )}
             >
               <path
@@ -223,7 +223,7 @@ export default function InputComponent({
               className={classNames(
                 editNode
                   ? "input-component-true-svg"
-                  : "input-component-false-svg",
+                  : "input-component-false-svg"
               )}
             >
               <path
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 1cd8b4a64..99e1e6b60 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -103,8 +103,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"}
diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx
index 3f74d2c1d..21c93e6bf 100644
--- 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"
             />
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 3690fcaf6..ce55ff1d4 100644
--- 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) => {
diff --git a/src/frontend/src/components/sidebarComponent/components/sideBarButtons/index.tsx b/src/frontend/src/components/sidebarComponent/components/sideBarButtons/index.tsx
index 5b382bd15..8e14f8fc1 100644
--- 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}
diff --git a/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx b/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx
index d43f753c5..234eb9304 100644
--- 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) => ({
diff --git a/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx b/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx
index 141dcb110..f10733468 100644
--- 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"));
diff --git a/src/frontend/src/components/tableComponent/components/TableOptions/index.tsx b/src/frontend/src/components/tableComponent/components/TableOptions/index.tsx
index dcf246fda..cbdb541b4 100644
--- 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>
diff --git a/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx
index 4a6020f78..dd886e4fa 100644
--- a/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx
+++ b/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx
@@ -1,6 +1,5 @@
 import { CustomCellRendererProps } from "ag-grid-react";
 import { cn, isTimeStampString } from "../../../../utils/utils";
-import ArrayReader from "../../../arrayReaderComponent";
 import DateReader from "../../../dateReaderComponent";
 import NumberReader from "../../../numberReader";
 import ObjectRender from "../../../objectRender";
@@ -31,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}
diff --git a/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx
index 86db7de9c..6351d5d98 100644
--- a/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx
+++ b/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx
@@ -63,8 +63,8 @@ export default function TableNodeCellRender({
                 ...id,
                 proxy: templateData.proxy,
               }
-            : id,
-        ),
+            : id
+        )
     ) ?? false;
   function getCellType() {
     switch (templateData.type) {
@@ -135,7 +135,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
diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
index ee7455e01..da5cf6d42 100644
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -12,7 +12,6 @@ import { cn, toTitleCase } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
 import TableOptions from "./components/TableOptions";
-import { useParams } from "react-router-dom";
 import resetGrid from "./utils/reset-grid-columns";
 
 interface TableComponentProps extends AgGridReactProps {
@@ -35,7 +34,7 @@ const TableComponent = forwardRef<
       alertDescription = DEFAULT_TABLE_ALERT_MSG,
       ...props
     },
-    ref,
+    ref
   ) => {
     let colDef = props.columnDefs.map((col, index) => {
       let newCol = {
@@ -98,7 +97,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);
@@ -123,7 +122,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
@@ -161,7 +160,7 @@ const TableComponent = forwardRef<
         />
       </div>
     );
-  },
+  }
 );
 
 export default TableComponent;
diff --git a/src/frontend/src/components/tagsSelectorComponent/index.tsx b/src/frontend/src/components/tagsSelectorComponent/index.tsx
index 4e3e181fc..6f84ae7c3 100644
--- 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}
diff --git a/src/frontend/src/components/ui/accordion.tsx b/src/frontend/src/components/ui/accordion.tsx
index 39578095b..403b07996 100644
--- 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}
   >
diff --git a/src/frontend/src/components/ui/alert.tsx b/src/frontend/src/components/ui/alert.tsx
index 05c5b7fa7..a584cea26 100644
--- 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<
diff --git a/src/frontend/src/components/ui/button.tsx b/src/frontend/src/components/ui/button.tsx
index 92d6f41a9..445c9b27a 100644
--- 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";
 
diff --git a/src/frontend/src/components/ui/card.tsx b/src/frontend/src/components/ui/card.tsx
index a558fb645..d986c5530 100644
--- 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}
   />
diff --git a/src/frontend/src/components/ui/checkbox.tsx b/src/frontend/src/components/ui/checkbox.tsx
index 1c3d1e4fe..2c48fde84 100644
--- 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 && (
diff --git a/src/frontend/src/components/ui/custom-accordion.tsx b/src/frontend/src/components/ui/custom-accordion.tsx
index 507649ca5..9ce39b8a7 100644
--- 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}
   >
diff --git a/src/frontend/src/components/ui/form.tsx b/src/frontend/src/components/ui/form.tsx
index 69789b6f3..dcfd39449 100644
--- 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<
diff --git a/src/frontend/src/components/ui/select-custom.tsx b/src/frontend/src/components/ui/select-custom.tsx
index 82ba540fe..86a7bf3ac 100644
--- 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}
   >
diff --git a/src/frontend/src/components/ui/toggle.tsx b/src/frontend/src/components/ui/toggle.tsx
index f41840dce..08ebb1380 100644
--- 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<
diff --git a/src/frontend/src/components/ui/tooltip.tsx b/src/frontend/src/components/ui/tooltip.tsx
index 3ee8b9c7a..7f81bc3bd 100644
--- 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}
   />
diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx
index 4070b784f..2a305cf5a 100644
--- a/src/frontend/src/controllers/API/api.tsx
+++ b/src/frontend/src/controllers/API/api.tsx
@@ -1,4 +1,4 @@
-import axios, { Axios, AxiosError, AxiosInstance } from "axios";
+import axios, { AxiosError, AxiosInstance } from "axios";
 import { useContext, useEffect } from "react";
 import { Cookies } from "react-cookie";
 import { renewAccessToken } from ".";
@@ -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;
diff --git a/src/frontend/src/controllers/API/helpers/check-duplicate-requests.ts b/src/frontend/src/controllers/API/helpers/check-duplicate-requests.ts
index 79a47c7a7..6486de541 100644
--- 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 (
diff --git a/src/frontend/src/icons/Groq/index.tsx b/src/frontend/src/icons/Groq/index.tsx
index 6c4283d29..291696154 100644
--- 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} />;
-  },
+  }
 );
diff --git a/src/frontend/src/icons/LangChain/LangChainIcon.jsx b/src/frontend/src/icons/LangChain/LangChainIcon.jsx
index c68bd3f4f..aa5e98bec 100644
--- a/src/frontend/src/icons/LangChain/LangChainIcon.jsx
+++ b/src/frontend/src/icons/LangChain/LangChainIcon.jsx
@@ -1,10 +1,24 @@
 const SvgLangChainIcon = (props) => (
-<svg viewBox="0 0 81 41" fill="none" height="200" width="400" xmlns="http://www.w3.org/2000/svg"     {...props}>
-  <path d="M61.514 11.157a3.94 3.94 0 0 0-2.806 1.158l-3.018 3.01a3.95 3.95 0 0 0-1.147 3.095l.019.191a3.9 3.9 0 0 0 1.128 2.314 3.6 3.6 0 0 0 1.496.9q.046.263.047.53c0 .797-.31 1.546-.874 2.107l-.186.186c-1.008-.344-1.848-.847-2.607-1.604a6.9 6.9 0 0 1-1.927-3.67l-.034-.193-.153.124a4 4 0 0 0-.294.265l-3.018 3.01a3.957 3.957 0 0 0 2.807 6.757 3.96 3.96 0 0 0 2.806-1.158l3.019-3.01a3.96 3.96 0 0 0 0-5.599 3.9 3.9 0 0 0-1.462-.92 3.25 3.25 0 0 1 .924-2.855 6.9 6.9 0 0 1 2.664 1.656 6.9 6.9 0 0 1 1.926 3.67l.035.193.153-.124q.155-.125.296-.267l3.018-3.01a3.956 3.956 0 0 0-2.808-6.756z" fill="CurrentColor"/>
-  <path d="M59.897.149h-39.49C9.153.149 0 9.279 0 20.5c0 11.222 9.154 20.351 20.406 20.351h39.49c11.253 0 20.407-9.13 20.407-20.35C80.303 9.277 71.149.148 59.897.148M40.419 32.056c-.651.134-1.384.158-1.882-.36-.183.42-.612.199-.943.144-.03.085-.057.16-.085.246-1.1.073-1.925-1.046-2.449-1.89-1.04-.562-2.222-.904-3.285-1.492-.062.968.15 2.17-.774 2.794-.047 1.862 2.824.22 3.088 1.608-.204.022-.43-.033-.594.124-.749.726-1.608-.55-2.471-.023-1.16.582-1.276 1.059-2.71 1.179-.08-.12-.047-.2.02-.273.404-.468.433-1.02 1.122-1.22-.71-.111-1.303.28-1.901.59-.778.317-.772-.717-1.968.054-.132-.108-.069-.206.007-.289.304-.37.704-.425 1.155-.405-2.219-1.233-3.263 1.508-4.288.145-.308.081-.424.358-.618.553-.167-.183-.04-.405-.033-.62-.2-.094-.453-.139-.394-.459-.391-.132-.665.1-.957.32-.263-.203.178-.5.26-.712.234-.407.769-.084 1.04-.377.772-.437 1.847.273 2.729.153.68.085 1.52-.61 1.179-1.305-.726-.926-.598-2.137-.614-3.244-.09-.645-1.643-1.467-2.092-2.163-.555-.627-.987-1.353-1.42-2.068-1.561-3.014-1.07-6.886-3.037-9.685-.89.49-2.048.259-2.816-.399-.414.377-.432.87-.465 1.392-.994-.99-.87-2.863-.075-3.966a5.3 5.3 0 0 1 1.144-1.11c.098-.07.131-.14.129-.25.786-3.524 6.144-2.845 7.838-.348 1.229 1.537 1.6 3.57 2.994 4.997 1.875 2.047 4.012 3.85 5.742 6.03 1.637 1.992 2.806 4.328 3.826 6.683.416.782.42 1.74 1.037 2.408.304.403 1.79 1.5 1.467 1.888.186.403 1.573.959 1.092 1.35zm26.026-12.024-3.018 3.01a6.96 6.96 0 0 1-2.875 1.728l-.056.016-.02.053a6.9 6.9 0 0 1-1.585 2.446l-3.019 3.01a6.94 6.94 0 0 1-4.932 2.035 6.94 6.94 0 0 1-4.932-2.035 6.95 6.95 0 0 1 0-9.838l3.018-3.01a6.9 6.9 0 0 1 2.871-1.721l.055-.017.02-.053a6.9 6.9 0 0 1 1.59-2.454l3.019-3.01a6.94 6.94 0 0 1 4.932-2.035c1.865 0 3.616.723 4.932 2.035a6.9 6.9 0 0 1 2.04 4.92c0 1.86-.724 3.607-2.04 4.918z" fill="CurrentColor"/>
-  <path d="M28.142 28.413c-.265 1.03-.35 2.782-1.694 2.832-.11.595.413.819.89.627.472-.215.696.171.855.556.729.106 1.806-.242 1.847-1.103-1.088-.625-1.424-1.813-1.896-2.914z" fill="CurrentColor"/>
-</svg>
-
-
+  <svg
+    viewBox="0 0 81 41"
+    fill="none"
+    height="200"
+    width="400"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M61.514 11.157a3.94 3.94 0 0 0-2.806 1.158l-3.018 3.01a3.95 3.95 0 0 0-1.147 3.095l.019.191a3.9 3.9 0 0 0 1.128 2.314 3.6 3.6 0 0 0 1.496.9q.046.263.047.53c0 .797-.31 1.546-.874 2.107l-.186.186c-1.008-.344-1.848-.847-2.607-1.604a6.9 6.9 0 0 1-1.927-3.67l-.034-.193-.153.124a4 4 0 0 0-.294.265l-3.018 3.01a3.957 3.957 0 0 0 2.807 6.757 3.96 3.96 0 0 0 2.806-1.158l3.019-3.01a3.96 3.96 0 0 0 0-5.599 3.9 3.9 0 0 0-1.462-.92 3.25 3.25 0 0 1 .924-2.855 6.9 6.9 0 0 1 2.664 1.656 6.9 6.9 0 0 1 1.926 3.67l.035.193.153-.124q.155-.125.296-.267l3.018-3.01a3.956 3.956 0 0 0-2.808-6.756z"
+      fill="CurrentColor"
+    />
+    <path
+      d="M59.897.149h-39.49C9.153.149 0 9.279 0 20.5c0 11.222 9.154 20.351 20.406 20.351h39.49c11.253 0 20.407-9.13 20.407-20.35C80.303 9.277 71.149.148 59.897.148M40.419 32.056c-.651.134-1.384.158-1.882-.36-.183.42-.612.199-.943.144-.03.085-.057.16-.085.246-1.1.073-1.925-1.046-2.449-1.89-1.04-.562-2.222-.904-3.285-1.492-.062.968.15 2.17-.774 2.794-.047 1.862 2.824.22 3.088 1.608-.204.022-.43-.033-.594.124-.749.726-1.608-.55-2.471-.023-1.16.582-1.276 1.059-2.71 1.179-.08-.12-.047-.2.02-.273.404-.468.433-1.02 1.122-1.22-.71-.111-1.303.28-1.901.59-.778.317-.772-.717-1.968.054-.132-.108-.069-.206.007-.289.304-.37.704-.425 1.155-.405-2.219-1.233-3.263 1.508-4.288.145-.308.081-.424.358-.618.553-.167-.183-.04-.405-.033-.62-.2-.094-.453-.139-.394-.459-.391-.132-.665.1-.957.32-.263-.203.178-.5.26-.712.234-.407.769-.084 1.04-.377.772-.437 1.847.273 2.729.153.68.085 1.52-.61 1.179-1.305-.726-.926-.598-2.137-.614-3.244-.09-.645-1.643-1.467-2.092-2.163-.555-.627-.987-1.353-1.42-2.068-1.561-3.014-1.07-6.886-3.037-9.685-.89.49-2.048.259-2.816-.399-.414.377-.432.87-.465 1.392-.994-.99-.87-2.863-.075-3.966a5.3 5.3 0 0 1 1.144-1.11c.098-.07.131-.14.129-.25.786-3.524 6.144-2.845 7.838-.348 1.229 1.537 1.6 3.57 2.994 4.997 1.875 2.047 4.012 3.85 5.742 6.03 1.637 1.992 2.806 4.328 3.826 6.683.416.782.42 1.74 1.037 2.408.304.403 1.79 1.5 1.467 1.888.186.403 1.573.959 1.092 1.35zm26.026-12.024-3.018 3.01a6.96 6.96 0 0 1-2.875 1.728l-.056.016-.02.053a6.9 6.9 0 0 1-1.585 2.446l-3.019 3.01a6.94 6.94 0 0 1-4.932 2.035 6.94 6.94 0 0 1-4.932-2.035 6.95 6.95 0 0 1 0-9.838l3.018-3.01a6.9 6.9 0 0 1 2.871-1.721l.055-.017.02-.053a6.9 6.9 0 0 1 1.59-2.454l3.019-3.01a6.94 6.94 0 0 1 4.932-2.035c1.865 0 3.616.723 4.932 2.035a6.9 6.9 0 0 1 2.04 4.92c0 1.86-.724 3.607-2.04 4.918z"
+      fill="CurrentColor"
+    />
+    <path
+      d="M28.142 28.413c-.265 1.03-.35 2.782-1.694 2.832-.11.595.413.819.89.627.472-.215.696.171.855.556.729.106 1.806-.242 1.847-1.103-1.088-.625-1.424-1.813-1.896-2.914z"
+      fill="CurrentColor"
+    />
+  </svg>
 );
 export default SvgLangChainIcon;
diff --git a/src/frontend/src/icons/Streamlit/index.tsx b/src/frontend/src/icons/Streamlit/index.tsx
index 1a4c55119..6b3391021 100644
--- 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} />;
-  },
+  }
 );
diff --git a/src/frontend/src/index.tsx b/src/frontend/src/index.tsx
index 9c828e086..78a57298f 100644
--- a/src/frontend/src/index.tsx
+++ b/src/frontend/src/index.tsx
@@ -8,15 +8,14 @@ import "./style/index.css";
 // @ts-ignore
 import "./style/applies.css";
 // @ts-ignore
-import { StrictMode } from "react";
 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();
diff --git a/src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx b/src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx
index cb12ca7cb..1347a323b 100644
--- 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.`,
           });
-        },
+        }
       );
     }
   };
diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/components/csvSelect/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/components/csvSelect/index.tsx
index 5adb156ef..1438237b7 100644
--- 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>
diff --git a/src/frontend/src/modals/IOModal/components/SessionView/hooks/index.tsx b/src/frontend/src/modals/IOModal/components/SessionView/hooks/index.tsx
index e8e638def..738ea9977 100644
--- 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({
diff --git a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx b/src/frontend/src/modals/IOModal/components/SessionView/index.tsx
index b20ed6c57..a7fc91b03 100644
--- a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/SessionView/index.tsx
@@ -1,20 +1,10 @@
-import {
-  CellEditRequestEvent,
-  ColDef,
-  ColGroupDef,
-  SelectionChangedEvent,
-} from "ag-grid-community";
+import { CellEditRequestEvent, SelectionChangedEvent } from "ag-grid-community";
 import { useState } from "react";
 import TableComponent from "../../../../components/tableComponent";
-import { Card, CardContent } from "../../../../components/ui/card";
+import useRemoveMessages from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages";
+import useUpdateMessage from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage";
 import useAlertStore from "../../../../stores/alertStore";
 import { useMessagesStore } from "../../../../stores/messagesStore";
-import useUpdateMessage from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage";
-import useRemoveMessages from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages";
-import HeaderMessagesComponent from "../../../../pages/SettingsPage/pages/messagesPage/components/headerMessages";
-import { Button } from "../../../../components/ui/button";
-import ForwardedIconComponent from "../../../../components/genericIconComponent";
-import { cn } from "../../../../utils/utils";
 
 export default function SessionView({ rows }: { rows: Array<any> }) {
   const columns = useMessagesStore((state) => state.columns);
@@ -27,7 +17,7 @@ export default function SessionView({ rows }: { rows: Array<any> }) {
     setSelectedRows,
     setSuccessData,
     setErrorData,
-    selectedRows,
+    selectedRows
   );
 
   const { handleUpdate } = useUpdateMessage(setSuccessData, setErrorData);
diff --git 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
index bf61b2fb9..bf0600a5d 100644
--- 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()}
diff --git 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
index 29f88453a..3d41e51f4 100644
--- 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
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx
index e675794e0..17ca897ea 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx
@@ -18,7 +18,9 @@ const UploadFileButton = ({
       />
       <Button
         disabled={lockChat}
-        className={`font-bold text-white transition-all ${lockChat ? "cursor-not-allowed" : "hover:text-muted-foreground"}`}
+        className={`font-bold text-white transition-all ${
+          lockChat ? "cursor-not-allowed" : "hover:text-muted-foreground"
+        }`}
         onClick={handleButtonClick}
         variant="none"
         size="none"
diff --git 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
index 7abc8d6e3..141754cbd 100644
--- 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
@@ -1,6 +1,5 @@
 import ShortUniqueId from "short-unique-id";
 import useFileUpload from "./use-file-upload";
-import useAlertStore from "../../../../../../stores/alertStore";
 
 const fsErrorText =
   "Please ensure your file has one of the following extensions:";
@@ -10,7 +9,7 @@ const useDragAndDrop = (
   setIsDragging,
   setFiles,
   currentFlowId,
-  setErrorData,
+  setErrorData
 ) => {
   const dragOver = (e) => {
     e.preventDefault();
diff --git 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
index 796f99c75..060481cd5 100644
--- 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
@@ -1,6 +1,6 @@
 import ShortUniqueId from "short-unique-id";
-import useFileUpload from "./use-file-upload";
 import useAlertStore from "../../../../../../stores/alertStore";
+import useFileUpload from "./use-file-upload";
 
 const fsErrorText =
   "Please ensure your file has one of the following extensions:";
@@ -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];
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx
index a45fd171f..94c3df51c 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import ShortUniqueId from "short-unique-id";
-import useFileUpload from "./use-file-upload";
 import useAlertStore from "../../../../../../stores/alertStore";
+import useFileUpload from "./use-file-upload";
 
 const fsErrorText =
   "Please ensure your file has one of the following extensions:";
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
index 8af591df9..4311f0ed2 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
@@ -94,7 +94,9 @@ export default function ChatInput({
         </div>
 
         <div
-          className={`absolute bottom-2 left-4 ${lockChat || saveLoading ? "cursor-not-allowed" : ""}`}
+          className={`absolute bottom-2 left-4 ${
+            lockChat || saveLoading ? "cursor-not-allowed" : ""
+          }`}
         >
           <UploadFileButton
             lockChat={lockChat || saveLoading}
@@ -114,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
               }}
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/fileCardWrapper/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/fileCardWrapper/index.tsx
index 496ab3c30..e6b4509d0 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/fileCardWrapper/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/fileCardWrapper/index.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import ForwardedIconComponent from "../../../../../../../components/genericIconComponent";
-import formatFileName from "../../../filePreviewChat/utils/format-file-name";
 import FileCard from "../../../fileComponent";
+import formatFileName from "../../../filePreviewChat/utils/format-file-name";
 
 export default function FileCardWrapper({
   index,
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
index 8c03226fb..d6451d1ae 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
@@ -7,16 +7,12 @@ import remarkMath from "remark-math";
 import MaleTechnology from "../../../../../assets/male-technologist.png";
 import Robot from "../../../../../assets/robot.png";
 import CodeTabsComponent from "../../../../../components/codeTabsComponent";
-import IconComponent, {
-  ForwardedIconComponent,
-} from "../../../../../components/genericIconComponent";
+import IconComponent from "../../../../../components/genericIconComponent";
 import SanitizedHTMLWrapper from "../../../../../components/sanitizedHTMLWrapper";
 import useAlertStore from "../../../../../stores/alertStore";
 import useFlowStore from "../../../../../stores/flowStore";
 import { chatMessagePropsType } from "../../../../../types/components";
 import { classNames, cn } from "../../../../../utils/utils";
-import FileCard from "../fileComponent";
-import formatFileName from "../filePreviewChat/utils/format-file-name";
 import FileCardWrapper from "./components/fileCardWrapper";
 
 export default function ChatMessage({
@@ -119,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
@@ -215,12 +211,12 @@ dark:prose-invert"
 
                                   children[0] = (children[0] as string).replace(
                                     "`▍`",
-                                    "▍",
+                                    "▍"
                                   );
                                 }
 
                                 const match = /language-(\w+)/.exec(
-                                  className || "",
+                                  className || ""
                                 );
 
                                 return !inline ? (
@@ -235,7 +231,7 @@ dark:prose-invert"
                                         language: (match && match[1]) || "",
                                         code: String(children).replace(
                                           /\n$/,
-                                          "",
+                                          ""
                                         ),
                                       },
                                     ]}
@@ -253,7 +249,7 @@ dark:prose-invert"
                             {chatMessage}
                           </Markdown>
                         ),
-                      [chat.message, chatMessage],
+                      [chat.message, chatMessage]
                     )}
                   </div>
                 </div>
@@ -296,7 +292,7 @@ dark:prose-invert"
                             parts.push(
                               <span className="chat-message-highlight">
                                 {chat.message[match[1]]}
-                              </span>,
+                              </span>
                             );
                           }
 
diff --git a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx
index a034b1c40..7b56cdcc0 100644
--- 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);
diff --git a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/get-classes.tsx b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/get-classes.tsx
index 4e9b2416f..7a12a4e6a 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/get-classes.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/get-classes.tsx
@@ -1,5 +1,7 @@
 export default function getClasses(isHovered: boolean): string {
-  return `relative ${false ? "h-20 w-20" : "h-20 w-80"} cursor-pointer rounded-lg border  border-ring bg-muted shadow transition duration-300 hover:drop-shadow-lg ${
+  return `relative ${
+    false ? "h-20 w-20" : "h-20 w-80"
+  } cursor-pointer rounded-lg border  border-ring bg-muted shadow transition duration-300 hover:drop-shadow-lg ${
     isHovered ? "shadow-md" : ""
   }`;
 }
diff --git 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
index cfc484686..e82bf3167 100644
--- 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
@@ -18,7 +18,10 @@ export default async function handleDownload({
     isDownloading = true;
 
     const response = await fetch(
-      `${BACKEND_URL.slice(0, BACKEND_URL.length - 1)}${BASE_URL_API}files/download/${content}`,
+      `${BACKEND_URL.slice(
+        0,
+        BACKEND_URL.length - 1
+      )}${BASE_URL_API}files/download/${content}`
     );
     if (!response.ok) {
       throw new Error("Network response was not ok");
diff --git 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
index 94258b6af..b474f8294 100644
--- 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;
diff --git a/src/frontend/src/modals/IOModal/components/chatView/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/index.tsx
index 067cf525c..aba9a7f46 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/index.tsx
@@ -131,7 +131,7 @@ export default function ChatView({
   function updateChat(
     chat: ChatMessageType,
     message: string,
-    stream_url?: string,
+    stream_url?: string
   ) {
     // if (message === "") return;
     chat.message = message;
@@ -161,7 +161,7 @@ export default function ChatView({
     setIsDragging,
     setFiles,
     currentFlowId,
-    setErrorData,
+    setErrorData
   );
 
   return (
diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index 79c68169d..0150e98a4 100644
--- 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);
@@ -127,7 +127,7 @@ export default function IOModal({
 
   const { handleRemoveSession } = useRemoveSession(
     setSuccessData,
-    setErrorData,
+    setErrorData
   );
 
   useEffect(() => {
@@ -188,7 +188,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
@@ -217,11 +217,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
@@ -282,11 +282,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
                       )!;
                       return (
                         <div
@@ -418,7 +418,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">
@@ -437,7 +437,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}
@@ -447,7 +447,7 @@ export default function IOModal({
                       />
                     )}
                     {outputs.some(
-                      (output) => output.id === selectedViewField.id,
+                      (output) => output.id === selectedViewField.id
                     ) && (
                       <IOFieldView
                         type={InputOutput.OUTPUT}
@@ -457,12 +457,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
                         )}
                       />
                     )}
@@ -472,7 +472,7 @@ export default function IOModal({
               <div
                 className={cn(
                   "flex h-full w-full",
-                  selectedViewField ? "hidden" : "",
+                  selectedViewField ? "hidden" : ""
                 )}
               >
                 {haveChat ? (
@@ -504,7 +504,7 @@ export default function IOModal({
                   "h-4 w-4",
                   isBuilding
                     ? "animate-spin"
-                    : "fill-current text-medium-indigo",
+                    : "fill-current text-medium-indigo"
                 )}
               />
             ),
diff --git 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
index 5a859cae8..592a812c4 100644
--- 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"
   );
diff --git a/src/frontend/src/modals/apiModal/utils/get-changes-types.ts b/src/frontend/src/modals/apiModal/utils/get-changes-types.ts
index e8e912ff3..7e295e358 100644
--- 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);
diff --git a/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx b/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
index c17118d1a..40257d73d 100644
--- 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>'\\` : ""
     }
diff --git 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
index fb30a57a1..ea5887fda 100644
--- 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"]);
diff --git a/src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx b/src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx
index a19ee6a28..e51403acb 100644
--- a/src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx
+++ b/src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx
@@ -9,7 +9,7 @@ export default function getPythonApiCode(
   flowId: string,
   isAuth: boolean,
   tweaksBuildedObject,
-  endpointName?: string,
+  endpointName?: string
 ): string {
   const tweaksObject = tweaksBuildedObject[0];
   return `import argparse
diff --git a/src/frontend/src/modals/apiModal/utils/get-python-code.tsx b/src/frontend/src/modals/apiModal/utils/get-python-code.tsx
index ff571b492..9fd8048f2 100644
--- 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,
+  tweaksBuildedObject
 ): string {
   const tweaksObject = tweaksBuildedObject[0];
 
diff --git a/src/frontend/src/modals/apiModal/utils/get-value.ts b/src/frontend/src/modals/apiModal/utils/get-value.ts
index df8e5bdde..8db7666bf 100644
--- 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 ?? "";
 
diff --git a/src/frontend/src/modals/apiModal/utils/get-widget-code.tsx b/src/frontend/src/modals/apiModal/utils/get-widget-code.tsx
index 0d3d02f91..a05dc192a 100644
--- 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>
 
diff --git a/src/frontend/src/modals/apiModal/utils/tabs-array.tsx b/src/frontend/src/modals/apiModal/utils/tabs-array.tsx
index deed73332..adc15f932 100644
--- 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 = [
     {
diff --git a/src/frontend/src/modals/apiModal/views/index.tsx b/src/frontend/src/modals/apiModal/views/index.tsx
index 3b41103f9..ad5fc1b73 100644
--- a/src/frontend/src/modals/apiModal/views/index.tsx
+++ b/src/frontend/src/modals/apiModal/views/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;
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index a95d615af..8ac883bb3 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -103,7 +103,7 @@ interface BaseModalProps {
     React.ReactElement<ContentProps>,
     React.ReactElement<HeaderProps>,
     React.ReactElement<TriggerProps>?,
-    React.ReactElement<FooterProps>?,
+    React.ReactElement<FooterProps>?
   ];
   open?: boolean;
   setOpen?: (open: boolean) => void;
@@ -139,16 +139,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);
diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx
index 5dff3567e..b05696791 100644
--- a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx
+++ b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx
@@ -2,13 +2,12 @@ import { ColDef, ValueGetterParams } from "ag-grid-community";
 import { useMemo } from "react";
 import TableNodeCellRender from "../../../components/tableComponent/components/tableNodeCellRender";
 import TableToggleCellRender from "../../../components/tableComponent/components/tableToggleCellRender";
-import TableTooltipRender from "../../../components/tableComponent/components/tableTooltipRender";
 
 const useColumnDefs = (
   myData: any,
   handleOnNewValue: (newValue: any, name: string) => void,
   changeAdvanced: (n: string) => void,
-  open: boolean,
+  open: boolean
 ) => {
   const columnDefs: ColDef[] = useMemo(
     () => [
@@ -78,7 +77,7 @@ const useColumnDefs = (
         cellClass: "no-border",
       },
     ],
-    [open, myData],
+    [open, myData]
   );
 
   return columnDefs;
diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx
index 63849cd7e..6c603288a 100644
--- a/src/frontend/src/modals/editNodeModal/index.tsx
+++ b/src/frontend/src/modals/editNodeModal/index.tsx
@@ -25,7 +25,7 @@ const EditNodeModal = forwardRef(
       //      setOpenWDoubleClick: (open: boolean) => void;
       data: NodeDataType;
     },
-    ref,
+    ref
   ) => {
     const myData = useRef(data);
 
@@ -48,7 +48,7 @@ const EditNodeModal = forwardRef(
       data,
       handleOnNewValue,
       changeAdvanced,
-      open,
+      open
     );
 
     const [gridApi, setGridApi] = useState<GridApi | null>(null);
@@ -121,7 +121,7 @@ const EditNodeModal = forwardRef(
         <BaseModal.Footer submit={{ label: "Save Changes" }} />
       </BaseModal>
     );
-  },
+  }
 );
 
 export default EditNodeModal;
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 9cd81c123..5a95e3f56 100644
--- 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: "Download Flow" }} />
       </BaseModal>
     );
-  },
+  }
 );
 export default ExportModal;
diff --git a/src/frontend/src/modals/flowLogsModal/index.tsx b/src/frontend/src/modals/flowLogsModal/index.tsx
index 1ba42f9eb..840de14ca 100644
--- 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({
diff --git a/src/frontend/src/modals/foldersModal/hooks/submit-folder.tsx b/src/frontend/src/modals/foldersModal/hooks/submit-folder.tsx
index 71a8ac944..c35d7c450 100644
--- 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.`,
           });
-        },
+        }
       );
     }
   };
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 326be58db..250192dc9 100644
--- 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 ? (
diff --git a/src/frontend/src/modals/newFlowModal/index.tsx b/src/frontend/src/modals/newFlowModal/index.tsx
index f9d1f98b2..7e64ed5dc 100644
--- 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)"
                 )!
               }
             />
diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx
index ac6832082..0bc66092a 100644
--- 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) {
diff --git a/src/frontend/src/modals/shareModal/utils/get-tags-ids.tsx b/src/frontend/src/modals/shareModal/utils/get-tags-ids.tsx
index 364d310a5..1eb1c650e 100644
--- 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))!
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index fd2190e53..8a8bd4d6c 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -62,19 +62,19 @@ export default function Page({
   const preventDefault = true;
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const autoSaveCurrentFlow = useFlowsManagerStore(
-    (state) => state.autoSaveCurrentFlow,
+    (state) => state.autoSaveCurrentFlow
   );
   const types = useTypesStore((state) => state.types);
   const templates = useTypesStore((state) => state.templates);
   const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const [showCanvas, setSHowCanvas] = useState(
-    Object.keys(templates).length > 0 && Object.keys(types).length > 0,
+    Object.keys(templates).length > 0 && Object.keys(types).length > 0
   );
 
   const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
   const setReactFlowInstance = useFlowStore(
-    (state) => state.setReactFlowInstance,
+    (state) => state.setReactFlowInstance
   );
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
@@ -91,10 +91,10 @@ export default function Page({
   const paste = useFlowStore((state) => state.paste);
   const resetFlow = useFlowStore((state) => state.resetFlow);
   const lastCopiedSelection = useFlowStore(
-    (state) => state.lastCopiedSelection,
+    (state) => state.lastCopiedSelection
   );
   const setLastCopiedSelection = useFlowStore(
-    (state) => state.setLastCopiedSelection,
+    (state) => state.setLastCopiedSelection
   );
   const onConnect = useFlowStore((state) => state.onConnect);
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
@@ -117,7 +117,7 @@ export default function Page({
         clonedSelection!,
         clonedNodes,
         clonedEdges,
-        getRandomName(),
+        getRandomName()
       );
       const newGroupNode = generateNodeFromFlow(newFlow, getNodeId);
       const newEdges = reconnectEdges(newGroupNode, removedEdges);
@@ -125,8 +125,8 @@ export default function Page({
         ...clonedNodes.filter(
           (oldNodes) =>
             !clonedSelection?.nodes.some(
-              (selectionNode) => selectionNode.id === oldNodes.id,
-            ),
+              (selectionNode) => selectionNode.id === oldNodes.id
+            )
         ),
         newGroupNode,
       ]);
@@ -136,8 +136,8 @@ export default function Page({
             !clonedSelection!.nodes.some(
               (selectionNode) =>
                 selectionNode.id === oldEdge.target ||
-                selectionNode.id === oldEdge.source,
-            ),
+                selectionNode.id === oldEdge.source
+            )
         ),
         ...newEdges,
       ]);
@@ -213,7 +213,7 @@ export default function Page({
         {
           x: position.current.x,
           y: position.current.y,
-        },
+        }
       );
     }
   }
@@ -297,7 +297,7 @@ export default function Page({
 
   useEffect(() => {
     setSHowCanvas(
-      Object.keys(templates).length > 0 && Object.keys(types).length > 0,
+      Object.keys(templates).length > 0 && Object.keys(types).length > 0
     );
   }, [templates, types]);
 
@@ -306,7 +306,7 @@ export default function Page({
       takeSnapshot();
       onConnect(params);
     },
-    [takeSnapshot, onConnect],
+    [takeSnapshot, onConnect]
   );
 
   const onNodeDragStart: NodeDragHandler = useCallback(() => {
@@ -347,7 +347,7 @@ export default function Page({
 
         // Extract the data from the drag event and parse it as a JSON object
         const data: { type: string; node?: APIClassType } = JSON.parse(
-          event.dataTransfer.getData("nodedata"),
+          event.dataTransfer.getData("nodedata")
         );
 
         const newId = getNodeId(data.type);
@@ -363,7 +363,7 @@ export default function Page({
         };
         paste(
           { nodes: [newNode], edges: [] },
-          { x: event.clientX, y: event.clientY },
+          { x: event.clientX, y: event.clientY }
         );
       } else if (event.dataTransfer.types.some((types) => types === "Files")) {
         takeSnapshot();
@@ -392,7 +392,7 @@ export default function Page({
       }
     },
     // Specify dependencies for useCallback
-    [getNodeId, setNodes, takeSnapshot, paste],
+    [getNodeId, setNodes, takeSnapshot, paste]
   );
 
   const onEdgeUpdateStart = useCallback(() => {
@@ -408,7 +408,7 @@ export default function Page({
         setEdges((els) => updateEdge(oldEdge, newConnection, els));
       }
     },
-    [setEdges],
+    [setEdges]
   );
 
   const onEdgeUpdateEnd = useCallback((_, edge: Edge): void => {
@@ -441,7 +441,7 @@ export default function Page({
     (flow: OnSelectionChangeParams): void => {
       setLastSelection(flow);
     },
-    [],
+    []
   );
 
   const onPaneClick = useCallback((flow) => {
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/utils/get-random-name.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/utils/get-random-name.tsx
index d3bcf4d55..a58b83ec3 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/utils/get-random-name.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/utils/get-random-name.tsx
@@ -5,7 +5,7 @@ import { toTitleCase } from "../../../../../utils/utils";
 export default function getRandomName(
   retry: number = 0,
   noSpace: boolean = false,
-  maxRetries: number = 3,
+  maxRetries: number = 3
 ): string {
   const left: string[] = ADJECTIVES;
   const right: string[] = NOUNS;
diff --git a/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
index a6d83153c..d850ce1e2 100644
--- a/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
@@ -13,7 +13,7 @@ export default function SelectionMenu({
   const [disable, setDisable] = useState<boolean>(
     lastSelection && edges.length > 0
       ? validateSelection(lastSelection!, edges).length > 0
-      : false,
+      : false
   );
   const [isOpen, setIsOpen] = useState(false);
   const [isTransitioning, setIsTransitioning] = useState(false);
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 696f9898a..d193d2e6b 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -41,7 +41,7 @@ export default function ExtraSidebar(): JSX.Element {
   const [search, setSearch] = useState("");
   function onDragStart(
     event: React.DragEvent<any>,
-    data: { type: string; node?: APIClassType },
+    data: { type: string; node?: APIClassType }
   ): void {
     //start drag event
     var crt = event.currentTarget.cloneNode(true);
@@ -67,7 +67,7 @@ export default function ExtraSidebar(): JSX.Element {
         let keys = Object.keys(data[d]).filter(
           (nd) =>
             nd.toLowerCase().includes(e.toLowerCase()) ||
-            data[d][nd].display_name?.toLowerCase().includes(e.toLowerCase()),
+            data[d][nd].display_name?.toLowerCase().includes(e.toLowerCase())
         );
         keys.forEach((element) => {
           ret[d][element] = data[d][element];
@@ -134,7 +134,7 @@ export default function ExtraSidebar(): JSX.Element {
 
             if (filtered.some((x) => x !== "")) {
               let keys = Object.keys(dataClone[d]).filter((nd) =>
-                filtered.includes(nd),
+                filtered.includes(nd)
               );
               Object.keys(dataClone[d]).forEach((element) => {
                 if (!keys.includes(element)) {
@@ -171,7 +171,7 @@ export default function ExtraSidebar(): JSX.Element {
 
             if (filtered.some((x) => x !== "")) {
               let keys = Object.keys(dataClone[d]).filter((nd) =>
-                filtered.includes(nd),
+                filtered.includes(nd)
               );
               Object.keys(dataClone[d]).forEach((element) => {
                 if (!keys.includes(element)) {
@@ -200,7 +200,7 @@ export default function ExtraSidebar(): JSX.Element {
             "extra-side-bar-buttons gap-[4px] text-sm font-semibold",
             !hasApiKey || !validApiKey || !hasStore
               ? "button-disable  cursor-default text-muted-foreground"
-              : "",
+              : ""
           )}
         >
           <IconComponent
@@ -209,14 +209,14 @@ export default function ExtraSidebar(): JSX.Element {
               "-m-0.5 -ml-1 h-6 w-6",
               !hasApiKey || !validApiKey || !hasStore
                 ? "extra-side-bar-save-disable"
-                : "",
+                : ""
             )}
           />
           Share
         </button>
       </ShareModal>
     ),
-    [hasApiKey, validApiKey, currentFlow, hasStore],
+    [hasApiKey, validApiKey, currentFlow, hasStore]
   );
 
   const ExportMemo = useMemo(
@@ -227,7 +227,7 @@ export default function ExtraSidebar(): JSX.Element {
         </button>
       </ExportModal>
     ),
-    [],
+    []
   );
 
   const getIcon = useMemo(() => {
@@ -311,8 +311,8 @@ export default function ExtraSidebar(): JSX.Element {
                       .sort((a, b) =>
                         sensitiveSort(
                           dataFilter[SBSectionName][a].display_name,
-                          dataFilter[SBSectionName][b].display_name,
-                        ),
+                          dataFilter[SBSectionName][b].display_name
+                        )
                       )
                       .map((SBItemName: string, index) => (
                         <ShadTooltip
@@ -356,7 +356,7 @@ export default function ExtraSidebar(): JSX.Element {
               </>
             ) : (
               <div key={index}></div>
-            ),
+            )
           )}{" "}
         <ParentDisclosureComponent
           openDisc={false}
@@ -393,8 +393,8 @@ export default function ExtraSidebar(): JSX.Element {
                         .sort((a, b) =>
                           sensitiveSort(
                             dataFilter[SBSectionName][a].display_name,
-                            dataFilter[SBSectionName][b].display_name,
-                          ),
+                            dataFilter[SBSectionName][b].display_name
+                          )
                         )
                         .map((SBItemName: string, index) => (
                           <ShadTooltip
@@ -468,7 +468,7 @@ export default function ExtraSidebar(): JSX.Element {
                 </>
               ) : (
                 <div key={index}></div>
-              ),
+              )
             )}
         </ParentDisclosureComponent>
       </div>
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 295384fea..c953548db 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -3,9 +3,8 @@ import { useEffect, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useUpdateNodeInternals } from "reactflow";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
-import IconComponent, {
-  ForwardedIconComponent,
-} from "../../../../components/genericIconComponent";
+import IconComponent from "../../../../components/genericIconComponent";
+import RenderIcons from "../../../../components/renderIconComponent";
 import ShadTooltip from "../../../../components/shadTooltipComponent";
 import {
   Select,
@@ -22,7 +21,6 @@ import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { useShortcutsStore } from "../../../../stores/shortcuts";
 import { useStoreStore } from "../../../../stores/storeStore";
-import { useTypesStore } from "../../../../stores/typesStore";
 import { APIClassType } from "../../../../types/api";
 import { nodeToolbarPropsType } from "../../../../types/components";
 import { FlowType } from "../../../../types/flow";
@@ -34,7 +32,6 @@ import {
 } from "../../../../utils/reactflowUtils";
 import { classNames, cn, isThereModal } from "../../../../utils/utils";
 import ToolbarSelectItem from "./toolbarSelectItem";
-import RenderIcons from "../../../../components/renderIconComponent";
 
 export default function NodeToolbarComponent({
   data,
@@ -52,7 +49,7 @@ export default function NodeToolbarComponent({
   const [showconfirmShare, setShowconfirmShare] = useState(false);
   const [showOverrideModal, setShowOverrideModal] = useState(false);
   const [flowComponent, setFlowComponent] = useState<FlowType>(
-    createFlowComponent(cloneDeep(data), version),
+    createFlowComponent(cloneDeep(data), version)
   );
   const preventDefault = true;
   const isMac = navigator.platform.toUpperCase().includes("MAC");
@@ -69,7 +66,7 @@ export default function NodeToolbarComponent({
         data.node.template[templateField].type === "Any" ||
         data.node.template[templateField].type === "int" ||
         data.node.template[templateField].type === "dict" ||
-        data.node.template[templateField].type === "NestedDict"),
+        data.node.template[templateField].type === "NestedDict")
   ).length;
 
   const hasStore = useStoreStore((state) => state.hasStore);
@@ -224,7 +221,7 @@ export default function NodeToolbarComponent({
   const updateNodeInternals = useUpdateNodeInternals();
 
   const setLastCopiedSelection = useFlowStore(
-    (state) => state.setLastCopiedSelection,
+    (state) => state.setLastCopiedSelection
   );
 
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
@@ -298,7 +295,7 @@ export default function NodeToolbarComponent({
           nodes,
           edges,
           setNodes,
-          setEdges,
+          setEdges
         );
         break;
       case "override":
@@ -322,14 +319,14 @@ export default function NodeToolbarComponent({
             y: 10,
             paneX: nodes.find((node) => node.id === data.id)?.position.x,
             paneY: nodes.find((node) => node.id === data.id)?.position.y,
-          },
+          }
         );
         break;
     }
   };
 
   const isSaved = flows.some((flow) =>
-    Object.values(flow).includes(data.node?.display_name!),
+    Object.values(flow).includes(data.node?.display_name!)
   );
 
   function displayShortcut({
@@ -347,7 +344,7 @@ export default function NodeToolbarComponent({
       }
     });
     const filteredShortcut = fixedShortcut.filter(
-      (key) => !key.toLowerCase().includes("shift"),
+      (key) => !key.toLowerCase().includes("shift")
     );
     let shortcutWPlus: string[] = [];
     if (!hasShift) shortcutWPlus = filteredShortcut.join("+").split(" ");
@@ -371,7 +368,7 @@ export default function NodeToolbarComponent({
   const setNode = useFlowStore((state) => state.setNode);
 
   const handleOnNewValue = (
-    newValue: string | string[] | boolean | Object[],
+    newValue: string | string[] | boolean | Object[]
   ): void => {
     if (data.node!.template[name].value !== newValue) {
       takeSnapshot();
@@ -426,8 +423,8 @@ export default function NodeToolbarComponent({
             <ShadTooltip
               content={displayShortcut(
                 shortcuts.find(
-                  ({ name }) => name.split(" ")[0].toLowerCase() === "code",
-                )!,
+                  ({ name }) => name.split(" ")[0].toLowerCase() === "code"
+                )!
               )}
               side="top"
             >
@@ -446,13 +443,15 @@ export default function NodeToolbarComponent({
             <ShadTooltip
               content={displayShortcut(
                 shortcuts.find(
-                  ({ name }) => name.split(" ")[0].toLowerCase() === "advanced",
-                )!,
+                  ({ name }) => name.split(" ")[0].toLowerCase() === "advanced"
+                )!
               )}
               side="top"
             >
               <button
-                className={`${isGroup ? "rounded-l-md" : ""} relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10`}
+                className={`${
+                  isGroup ? "rounded-l-md" : ""
+                } relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10`}
                 onClick={() => {
                   setShowModalAdvanced(true);
                 }}
@@ -484,14 +483,14 @@ export default function NodeToolbarComponent({
           <ShadTooltip
             content={displayShortcut(
               shortcuts.find(
-                ({ name }) => name.split(" ")[0].toLowerCase() === "freeze",
-              )!,
+                ({ name }) => name.split(" ")[0].toLowerCase() === "freeze"
+              )!
             )}
             side="top"
           >
             <button
               className={classNames(
-                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
+                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -512,7 +511,7 @@ export default function NodeToolbarComponent({
                 className={cn(
                   "h-4 w-4 transition-all",
                   // TODO UPDATE THIS COLOR TO BE A VARIABLE
-                  frozen ? "animate-wiggle text-ice" : "",
+                  frozen ? "animate-wiggle text-ice" : ""
                 )}
               />
             </button>
@@ -540,7 +539,7 @@ export default function NodeToolbarComponent({
                   <div
                     data-testid="more-options-modal"
                     className={classNames(
-                      "relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground  shadow-md ring-1 ring-inset  ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
+                      "relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground  shadow-md ring-1 ring-inset  ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
                     )}
                   >
                     <IconComponent
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
index 48a53aa24..ac93c928b 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
@@ -19,7 +19,7 @@ export default function ToolbarSelectItem({
     }
   });
   const filteredShortcut = fixedShortcut.filter(
-    (key) => !key.toLowerCase().includes("shift"),
+    (key) => !key.toLowerCase().includes("shift")
   );
   let shortcutWPlus: string[] = [];
   if (!hasShift) shortcutWPlus = filteredShortcut.join("+").split(" ");
@@ -28,9 +28,11 @@ export default function ToolbarSelectItem({
     <div className={`flex ${style}`} data-testid={dataTestId}>
       <ForwardedIconComponent
         name={icon}
-        className={`   mr-2  ${icon === "Share3" ? "absolute left-2  top-[0.25em] h-6 w-6" : "mt-[0.15em] h-4 w-4"}   ${
-          ping && "animate-pulse text-green-500"
-        }`}
+        className={`   mr-2  ${
+          icon === "Share3"
+            ? "absolute left-2  top-[0.25em] h-6 w-6"
+            : "mt-[0.15em] h-4 w-4"
+        }   ${ping && "animate-pulse text-green-500"}`}
       />
       <span className={`${icon === "Share3" ? "ml-[1.8em]" : " "}`}>
         {value}
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index 49fdb1eca..e5a67bd35 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -10,7 +10,7 @@ import ExtraSidebar from "./components/extraSidebarComponent";
 
 export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
   const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
+    (state) => state.setCurrentFlowId
   );
   const version = useDarkStore((state) => state.version);
   const setOnFlowPage = useFlowStore((state) => state.setOnFlowPage);
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-delete-multiple.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-delete-multiple.tsx
index 395088193..af78db50d 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-delete-multiple.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-delete-multiple.tsx
@@ -9,7 +9,7 @@ const useDeleteMultipleFlows = (
   myCollectionId,
   getFolderById,
   setSuccessData,
-  setErrorData,
+  setErrorData
 ) => {
   const handleDeleteMultiple = useCallback(() => {
     removeFlow(selectedFlowsComponentsCards)
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-filtered-flows.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-filtered-flows.tsx
index 96b1757ff..b391d9c8e 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-filtered-flows.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-filtered-flows.tsx
@@ -4,7 +4,7 @@ import { useEffect } from "react";
 const useFilteredFlows = (
   flowsFromFolder,
   searchFlowsComponents,
-  setAllFlows,
+  setAllFlows
 ) => {
   useEffect(() => {
     const newFlows = cloneDeep(flowsFromFolder || []);
@@ -13,7 +13,7 @@ const useFilteredFlows = (
         f.name.toLowerCase().includes(searchFlowsComponents.toLowerCase()) ||
         f.description
           .toLowerCase()
-          .includes(searchFlowsComponents.toLowerCase()),
+          .includes(searchFlowsComponents.toLowerCase())
     );
 
     if (searchFlowsComponents === "") {
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-duplicate.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-duplicate.tsx
index fc49fc0d1..97e966b91 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-duplicate.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-duplicate.tsx
@@ -12,16 +12,16 @@ const useDuplicateFlows = (
   setSuccessData,
   setSelectedFlowsComponentsCards,
   handleSelectAll,
-  cardTypes,
+  cardTypes
 ) => {
   const handleDuplicate = useCallback(() => {
     Promise.all(
       selectedFlowsComponentsCards.map((selectedFlow) =>
         addFlow(
           true,
-          allFlows.find((flow) => flow.id === selectedFlow),
-        ),
-      ),
+          allFlows.find((flow) => flow.id === selectedFlow)
+        )
+      )
     ).then(() => {
       resetFilter();
       getFoldersApi(true);
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-export.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-export.tsx
index bd742045b..446525f13 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-export.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-export.tsx
@@ -9,7 +9,7 @@ const useExportFlows = (
   setSuccessData,
   setSelectedFlowsComponentsCards,
   handleSelectAll,
-  cardTypes,
+  cardTypes
 ) => {
   const handleExport = useCallback(() => {
     selectedFlowsComponentsCards.forEach((selectedFlowId) => {
@@ -25,7 +25,7 @@ const useExportFlows = (
             is_component: false,
           }),
           selectedFlow.name,
-          selectedFlow.description,
+          selectedFlow.description
         );
       }
     });
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-select-all.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-select-all.tsx
index a81515e0a..5b20a4ddc 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-select-all.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-select-all.tsx
@@ -16,7 +16,7 @@ const useSelectAll = (flowsFromFolder, getValues, setValue) => {
         setValue(key, false);
       });
     },
-    [flowsFromFolder, getValues, setValue],
+    [flowsFromFolder, getValues, setValue]
   );
 
   return { handleSelectAll };
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-select-options-change.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-select-options-change.tsx
index 56dc204c7..b19ec4f4f 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-select-options-change.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-select-options-change.tsx
@@ -5,7 +5,7 @@ const useSelectOptionsChange = (
   setErrorData,
   setOpenDelete,
   handleDuplicate,
-  handleExport,
+  handleExport
 ) => {
   const handleSelectOptionsChange = useCallback(
     (action) => {
@@ -31,7 +31,7 @@ const useSelectOptionsChange = (
       setOpenDelete,
       handleDuplicate,
       handleExport,
-    ],
+    ]
   );
 
   return { handleSelectOptionsChange };
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-selected-flows.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-selected-flows.tsx
index b6f00934e..aa70b025f 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-selected-flows.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-selected-flows.tsx
@@ -2,7 +2,7 @@ import { useEffect } from "react";
 
 const useSelectedFlows = (
   entireFormValues,
-  setSelectedFlowsComponentsCards,
+  setSelectedFlowsComponentsCards
 ) => {
   useEffect(() => {
     if (!entireFormValues || Object.keys(entireFormValues).length === 0) return;
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
index af13e2bb4..81d2aa18d 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
@@ -40,22 +40,22 @@ export default function ComponentsComponent({
   const allFlows = useFlowsManagerStore((state) => state.allFlows);
 
   const flowsFromFolder = useFolderStore(
-    (state) => state.selectedFolder?.flows,
+    (state) => state.selectedFolder?.flows
   );
 
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const [openDelete, setOpenDelete] = useState(false);
   const searchFlowsComponents = useFlowsManagerStore(
-    (state) => state.searchFlowsComponents,
+    (state) => state.searchFlowsComponents
   );
 
   const setSelectedFlowsComponentsCards = useFlowsManagerStore(
-    (state) => state.setSelectedFlowsComponentsCards,
+    (state) => state.setSelectedFlowsComponentsCards
   );
 
   const selectedFlowsComponentsCards = useFlowsManagerStore(
-    (state) => state.selectedFlowsComponentsCards,
+    (state) => state.selectedFlowsComponentsCards
   );
 
   const [handleFileDrop] = useFileDrop(uploadFlow, type)!;
@@ -109,7 +109,7 @@ export default function ComponentsComponent({
   const { handleSelectAll } = useSelectAll(
     flowsFromFolder,
     getValues,
-    setValue,
+    setValue
   );
 
   const { handleDuplicate } = useDuplicateFlows(
@@ -124,7 +124,7 @@ export default function ComponentsComponent({
     setSuccessData,
     setSelectedFlowsComponentsCards,
     handleSelectAll,
-    cardTypes,
+    cardTypes
   );
 
   const version = useDarkStore((state) => state.version);
@@ -138,7 +138,7 @@ export default function ComponentsComponent({
     setSuccessData,
     setSelectedFlowsComponentsCards,
     handleSelectAll,
-    cardTypes,
+    cardTypes
   );
 
   const { handleSelectOptionsChange } = useSelectOptionsChange(
@@ -146,7 +146,7 @@ export default function ComponentsComponent({
     setErrorData,
     setOpenDelete,
     handleDuplicate,
-    handleExport,
+    handleExport
   );
 
   const { handleDeleteMultiple } = useDeleteMultipleFlows(
@@ -158,21 +158,21 @@ export default function ComponentsComponent({
     myCollectionId,
     getFolderById,
     setSuccessData,
-    setErrorData,
+    setErrorData
   );
 
   useSelectedFlows(entireFormValues, setSelectedFlowsComponentsCards);
 
   const descriptionModal = useDescriptionModal(
     selectedFlowsComponentsCards,
-    type,
+    type
   );
 
   const getTotalRowsCount = () => {
     if (type === "all") return allFlows?.length;
 
     return allFlows?.filter(
-      (f) => (f.is_component ?? false) === (type === "component"),
+      (f) => (f.is_component ?? false) === (type === "component")
     )?.length;
   };
 
diff --git a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
index 151cdd902..26999fbd5 100644
--- a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
@@ -107,7 +107,7 @@ const HeaderComponent = ({
                   name="Trash2"
                   className={cn(
                     "h-5 w-5 text-primary transition-all",
-                    disableFunctions ? "" : "hover:text-status-red",
+                    disableFunctions ? "" : "hover:text-status-red"
                   )}
                 />
               </Button>
diff --git a/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/headerTabsSearchComponent/index.tsx b/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/headerTabsSearchComponent/index.tsx
index 2c1b9cd49..17916f05b 100644
--- a/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/headerTabsSearchComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/headerTabsSearchComponent/index.tsx
@@ -20,7 +20,7 @@ const HeaderTabsSearchComponent = ({}: HeaderTabsSearchComponentProps) => {
   const [inputValue, setInputValue] = useState("");
 
   const setSearchFlowsComponents = useFlowsManagerStore(
-    (state) => state.setSearchFlowsComponents,
+    (state) => state.setSearchFlowsComponents
   );
 
   const handleDownloadFolder = () => {
diff --git a/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/inputSearchComponent/index.tsx b/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/inputSearchComponent/index.tsx
index 59809425e..8619cb2d5 100644
--- a/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/inputSearchComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/inputSearchComponent/index.tsx
@@ -23,7 +23,7 @@ const InputSearchComponent = ({
   const pagePath = window.location.pathname;
   const allFlows = useFlowsManagerStore((state) => state.allFlows);
   const searchFlowsComponents = useFlowsManagerStore(
-    (state) => state.searchFlowsComponents,
+    (state) => state.searchFlowsComponents
   );
 
   const disableInputSearch =
diff --git a/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx b/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx
index ce2b653a2..0daa61257 100644
--- a/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx
@@ -16,7 +16,7 @@ import useDropdownOptions from "../../hooks/use-dropdown-options";
 export default function HomePage(): JSX.Element {
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
+    (state) => state.setCurrentFlowId
   );
 
   const location = useLocation();
diff --git a/src/frontend/src/pages/MainPage/services/index.ts b/src/frontend/src/pages/MainPage/services/index.ts
index 3e1286d5e..fbfc34389 100644
--- a/src/frontend/src/pages/MainPage/services/index.ts
+++ b/src/frontend/src/pages/MainPage/services/index.ts
@@ -30,12 +30,12 @@ export async function addFolder(data: AddFolderType): Promise<FolderType> {
 
 export async function updateFolder(
   body: FolderType,
-  folderId: string,
+  folderId: string
 ): Promise<FolderType> {
   try {
     const response = await api.patch(
       `${BASE_URL_API}folders/${folderId}`,
-      body,
+      body
     );
     return response?.data;
   } catch (error) {
@@ -68,7 +68,7 @@ export async function downloadFlowsFromFolders(folderId: string): Promise<{
 }> {
   try {
     const response = await api.get(
-      `${BASE_URL_API}folders/download/${folderId}`,
+      `${BASE_URL_API}folders/download/${folderId}`
     );
     if (response?.status !== 200) {
       throw new Error(`HTTP error! status: ${response?.status}`);
@@ -82,7 +82,7 @@ export async function downloadFlowsFromFolders(folderId: string): Promise<{
 }
 
 export async function uploadFlowsFromFolders(
-  flows: FormData,
+  flows: FormData
 ): Promise<FlowType[]> {
   try {
     const response = await api.post(`${BASE_URL_API}folders/upload/`, flows);
@@ -99,11 +99,11 @@ export async function uploadFlowsFromFolders(
 
 export async function moveFlowToFolder(
   flowId: string,
-  folderId: string,
+  folderId: string
 ): Promise<FlowType> {
   try {
     const response = await api.patch(
-      `${BASE_URL_API}folders/move_to_folder/${flowId}/${folderId}`,
+      `${BASE_URL_API}folders/move_to_folder/${flowId}/${folderId}`
     );
     return response?.data;
   } catch (error) {
diff --git a/src/frontend/src/pages/MainPage/utils/handle-download-folder.ts b/src/frontend/src/pages/MainPage/utils/handle-download-folder.ts
index 6817622d0..d6a8e957c 100644
--- a/src/frontend/src/pages/MainPage/utils/handle-download-folder.ts
+++ b/src/frontend/src/pages/MainPage/utils/handle-download-folder.ts
@@ -11,7 +11,7 @@ export function handleDownloadFolderFn(folderId: string) {
     data.folder_description = folder?.description || "";
 
     const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
-      JSON.stringify(data),
+      JSON.stringify(data)
     )}`;
 
     const link = document.createElement("a");
diff --git a/src/frontend/src/pages/Playground/index.tsx b/src/frontend/src/pages/Playground/index.tsx
index 4ea3cc506..d26147df6 100644
--- a/src/frontend/src/pages/Playground/index.tsx
+++ b/src/frontend/src/pages/Playground/index.tsx
@@ -11,7 +11,7 @@ export default function PlaygroundPage() {
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const getFlowById = useFlowsManagerStore((state) => state.getFlowById);
   const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
+    (state) => state.setCurrentFlowId
   );
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
diff --git a/src/frontend/src/pages/ProfileSettingsPage/index.tsx b/src/frontend/src/pages/ProfileSettingsPage/index.tsx
index 78e328623..c1635dc9e 100644
--- a/src/frontend/src/pages/ProfileSettingsPage/index.tsx
+++ b/src/frontend/src/pages/ProfileSettingsPage/index.tsx
@@ -2,7 +2,6 @@ import * as Form from "@radix-ui/react-form";
 import { cloneDeep } from "lodash";
 import { useContext, useEffect, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
-import GradientChooserComponent from "../SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent";
 import Header from "../../components/headerComponent";
 import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
@@ -22,13 +21,14 @@ import {
   patchUserInputStateType,
 } from "../../types/components";
 import { gradients } from "../../utils/styleUtils";
+import GradientChooserComponent from "../SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent";
 export default function ProfileSettingsPage(): JSX.Element {
   const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
+    (state) => state.setCurrentFlowId
   );
 
   const [inputState, setInputState] = useState<patchUserInputStateType>(
-    CONTROL_PATCH_USER_STATE,
+    CONTROL_PATCH_USER_STATE
   );
 
   // set null id
diff --git a/src/frontend/src/pages/SettingsPage/index.tsx b/src/frontend/src/pages/SettingsPage/index.tsx
index d201d2596..353b7a17c 100644
--- a/src/frontend/src/pages/SettingsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/index.tsx
@@ -8,7 +8,7 @@ import useFlowsManagerStore from "../../stores/flowsManagerStore";
 export default function SettingsPage(): JSX.Element {
   const pathname = location.pathname;
   const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
+    (state) => state.setCurrentFlowId
   );
   useEffect(() => {
     setCurrentFlowId("");
diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx
index 45a606af6..4138d621f 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx
@@ -2,7 +2,6 @@ import ForwardedIconComponent from "../../../../../../components/genericIconComp
 import { Button } from "../../../../../../components/ui/button";
 import { API_PAGE_PARAGRAPH } from "../../../../../../constants/constants";
 import SecretKeyModal from "../../../../../../modals/secretKeyModal";
-import { cn } from "../../../../../../utils/utils";
 
 type ApiKeyHeaderComponentProps = {
   selectedRows: string[];
diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx
index 74d5dae99..01b4b7415 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx
@@ -10,7 +10,7 @@ const useDeleteApiKeys = (
   selectedRows,
   resetFilter,
   setSuccessData,
-  setErrorData,
+  setErrorData
 ) => {
   const handleDeleteKey = () => {
     Promise.all(selectedRows.map((selectedRow) => deleteApiKey(selectedRow)))
diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx
index af5280f72..e5b224a58 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx
@@ -25,7 +25,7 @@ export default function ApiKeysPage() {
     userData,
     setLoadingKeys,
     keysList,
-    setUserId,
+    setUserId
   );
 
   function resetFilter() {
@@ -36,7 +36,7 @@ export default function ApiKeysPage() {
     selectedRows,
     resetFilter,
     setSuccessData,
-    setErrorData,
+    setErrorData
   );
 
   const columnDefs = getColumnDefs();
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/PasswordForm/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/PasswordForm/index.tsx
index 28edb2f09..d99752e7b 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/PasswordForm/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/PasswordForm/index.tsx
@@ -17,7 +17,7 @@ type PasswordFormComponentProps = {
   handlePatchPassword: (
     password: string,
     cnfPassword: string,
-    handleInput: any,
+    handleInput: any
   ) => void;
 };
 const PasswordFormComponent = ({
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts
index 2997a4b2f..684fd5e38 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts
@@ -1,7 +1,6 @@
-import { reject } from "lodash";
+import axios from "axios";
 import { PROFILE_PICTURES_GET_ERROR_ALERT } from "../../../../../../../../../constants/alerts_constants";
 import { getProfilePictures } from "../../../../../../../../../controllers/API";
-import axios from "axios";
 
 const useGetProfilePictures = (setErrorData) => {
   const handleGetProfilePictures = async () => {
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
index c02c6a560..f085bba23 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
@@ -1,18 +1,12 @@
-import { useEffect, useRef, useState } from "react";
-import useAlertStore from "../../../../../../../../stores/alertStore";
-import { gradients } from "../../../../../../../../utils/styleUtils";
-import useGetProfilePictures from "./hooks/use-get-profile-pictures";
-import { Label } from "../../../../../../../../components/ui/label";
+import { useEffect, useRef } from "react";
+import { Button } from "../../../../../../../../components/ui/button";
+import Loading from "../../../../../../../../components/ui/loading";
 import {
   BACKEND_URL,
   BASE_URL_API,
 } from "../../../../../../../../constants/constants";
-import HorizontalScrollFadeComponent from "../../../../../../../../components/horizontalScrollFadeComponent";
-import LoadingComponent from "../../../../../../../../components/loadingComponent";
-import Loading from "../../../../../../../../components/ui/loading";
-import { cn } from "../../../../../../../../utils/utils";
-import { Button } from "../../../../../../../../components/ui/button";
 import { useDarkStore } from "../../../../../../../../stores/darkStore";
+import { cn } from "../../../../../../../../utils/utils";
 
 type ProfilePictureChooserComponentProps = {
   profilePictures: { [key: string]: string[] };
@@ -60,8 +54,10 @@ export default function ProfilePictureChooserComponent({
                       key={idx}
                       src={`${BACKEND_URL.slice(
                         0,
-                        BACKEND_URL.length - 1,
-                      )}${BASE_URL_API}files/profile_pictures/${folder + "/" + path}`}
+                        BACKEND_URL.length - 1
+                      )}${BASE_URL_API}files/profile_pictures/${
+                        folder + "/" + path
+                      }`}
                       style={{
                         filter:
                           value === folder + "/" + path
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx
index a841ecc5e..908cea255 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx
@@ -1,4 +1,5 @@
 import * as Form from "@radix-ui/react-form";
+import { useEffect, useState } from "react";
 import { Button } from "../../../../../../components/ui/button";
 import {
   Card,
@@ -10,8 +11,6 @@ import {
 } from "../../../../../../components/ui/card";
 import { gradients } from "../../../../../../utils/styleUtils";
 import ProfilePictureChooserComponent from "./components/profilePictureChooserComponent";
-import { useEffect, useState } from "react";
-import { GenericAbortSignal } from "axios";
 
 type ProfilePictureFormComponentProps = {
   profilePicture: string;
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/StoreApiKeyForm/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/StoreApiKeyForm/index.tsx
index 5bc5ea38b..1fbf34024 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/StoreApiKeyForm/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/StoreApiKeyForm/index.tsx
@@ -47,8 +47,8 @@ const StoreApiKeyFormComponent = ({
               {(hasApiKey && !validApiKey
                 ? INVALID_API_KEY
                 : !hasApiKey
-                  ? NO_API_KEY
-                  : "") + INSERT_API_KEY}
+                ? NO_API_KEY
+                : "") + INSERT_API_KEY}
             </CardDescription>
           </CardHeader>
           <CardContent>
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
index 3c81bdb1c..917d61714 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
@@ -9,25 +9,25 @@ import {
   inputHandlerEventType,
   patchUserInputStateType,
 } from "../../../../types/components";
-import usePatchProfilePicture from "../hooks/use-patch-profile-picture";
 import usePatchPassword from "../hooks/use-patch-password";
+import usePatchProfilePicture from "../hooks/use-patch-profile-picture";
 import useSaveKey from "../hooks/use-save-key";
 import useScrollToElement from "../hooks/use-scroll-to-element";
 import GeneralPageHeaderComponent from "./components/GeneralPageHeader";
 import PasswordFormComponent from "./components/PasswordForm";
 import ProfilePictureFormComponent from "./components/ProfilePictureForm";
-import StoreApiKeyFormComponent from "./components/StoreApiKeyForm";
 import useGetProfilePictures from "./components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures";
+import StoreApiKeyFormComponent from "./components/StoreApiKeyForm";
 
 export default function GeneralPage() {
   const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
+    (state) => state.setCurrentFlowId
   );
 
   const { scrollId } = useParams();
 
   const [inputState, setInputState] = useState<patchUserInputStateType>(
-    CONTROL_PATCH_USER_STATE,
+    CONTROL_PATCH_USER_STATE
   );
 
   const { autoLogin } = useContext(AuthContext);
@@ -48,7 +48,7 @@ export default function GeneralPage() {
   const { handlePatchPassword } = usePatchPassword(
     userData,
     setSuccessData,
-    setErrorData,
+    setErrorData
   );
 
   const { handleGetProfilePictures } = useGetProfilePictures(setErrorData);
@@ -57,7 +57,7 @@ export default function GeneralPage() {
     setSuccessData,
     setErrorData,
     userData,
-    setUserData,
+    setUserData
   );
 
   useScrollToElement(scrollId, setCurrentFlowId);
@@ -67,7 +67,7 @@ export default function GeneralPage() {
     setErrorData,
     setHasApiKey,
     setValidApiKey,
-    setLoadingApiKey,
+    setLoadingApiKey
   );
 
   function handleInput({
diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index 990312739..d6f97a633 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -11,17 +11,16 @@ import { Badge } from "../../../../components/ui/badge";
 import { deleteGlobalVariable } from "../../../../controllers/API";
 import useAlertStore from "../../../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../../../stores/globalVariablesStore/globalVariables";
-import { cn } from "../../../../utils/utils";
 
 export default function GlobalVariablesPage() {
   const globalVariablesEntries = useGlobalVariablesStore(
-    (state) => state.globalVariablesEntries,
+    (state) => state.globalVariablesEntries
   );
   const removeGlobalVariable = useGlobalVariablesStore(
-    (state) => state.removeGlobalVariable,
+    (state) => state.removeGlobalVariable
   );
   const globalVariables = useGlobalVariablesStore(
-    (state) => state.globalVariables,
+    (state) => state.globalVariables
   );
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx
index 652a3c8db..894969f52 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx
@@ -31,7 +31,7 @@ export default function EditShortcutButton({
       ? defaultShortcuts.find(
           (s) =>
             s.name.split(" ")[0].toLowerCase().toLowerCase() ===
-            shortcut[0]?.split(" ")[0].toLowerCase(),
+            shortcut[0]?.split(" ")[0].toLowerCase()
         )?.shortcut
       : "";
   const [key, setKey] = useState<string | null>(null);
@@ -50,7 +50,7 @@ export default function EditShortcutButton({
   }
 
   const setUniqueShortcut = useShortcutsStore(
-    (state) => state.updateUniqueShortcut,
+    (state) => state.updateUniqueShortcut
   );
 
   function editCombination(): void {
@@ -74,7 +74,7 @@ export default function EditShortcutButton({
         setShortcuts(newCombination);
         localStorage.setItem(
           "langflow-shortcuts",
-          JSON.stringify(newCombination),
+          JSON.stringify(newCombination)
         );
         setKey(null);
         setOpen(false);
@@ -107,14 +107,16 @@ export default function EditShortcutButton({
     if (oldKey === null) {
       return `${key.length > 0 ? toTitleCase(key) : toTitleCase(key)}`;
     }
-    return `${oldKey.length > 0 ? toTitleCase(oldKey) : oldKey.toUpperCase()} + ${key.length > 0 ? toTitleCase(key) : key.toUpperCase()}`;
+    return `${
+      oldKey.length > 0 ? toTitleCase(oldKey) : oldKey.toUpperCase()
+    } + ${key.length > 0 ? toTitleCase(key) : key.toUpperCase()}`;
   }
 
   function checkForKeys(keys: string, keyToCompare: string): boolean {
     const keysArr = keys.split(" ");
     let hasNewKey = false;
     return keysArr.some(
-      (k) => k.toLowerCase().trim() === keyToCompare.toLowerCase().trim(),
+      (k) => k.toLowerCase().trim() === keyToCompare.toLowerCase().trim()
     );
   }
 
@@ -135,7 +137,7 @@ export default function EditShortcutButton({
         if (checkForKeys(key, fixedKey)) return;
       }
       setKey((oldKey) =>
-        getFixedCombination({ oldKey: oldKey!, key: fixedKey }),
+        getFixedCombination({ oldKey: oldKey!, key: fixedKey })
       );
     }
 
diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
index 9a6b4ea8f..90e442897 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
@@ -1,4 +1,3 @@
-import { ColDef, ColGroupDef, SelectionChangedEvent } from "ag-grid-community";
 import { useEffect, useState } from "react";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
@@ -41,7 +40,7 @@ export default function ShortcutsPage() {
   const combinationToEdit = shortcuts.filter((s) => s.name === selectedRows[0]);
   const [open, setOpen] = useState(false);
   const updateUniqueShortcut = useShortcutsStore(
-    (state) => state.updateUniqueShortcut,
+    (state) => state.updateUniqueShortcut
   );
 
   function handleRestore() {
diff --git a/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-profile-picture.tsx b/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-profile-picture.tsx
index 584300fdf..537c579af 100644
--- a/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-profile-picture.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-profile-picture.tsx
@@ -9,7 +9,7 @@ const usePatchProfilePicture = (
   setSuccessData,
   setErrorData,
   currentUserData,
-  setUserData,
+  setUserData
 ) => {
   const handlePatchProfilePicture = async (profile_picture) => {
     try {
diff --git a/src/frontend/src/pages/SettingsPage/pages/hooks/use-save-key.tsx b/src/frontend/src/pages/SettingsPage/pages/hooks/use-save-key.tsx
index cf5871a26..bdd105fef 100644
--- a/src/frontend/src/pages/SettingsPage/pages/hooks/use-save-key.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/hooks/use-save-key.tsx
@@ -11,7 +11,7 @@ const useSaveKey = (
   setErrorData,
   setHasApiKey,
   setValidApiKey,
-  setLoadingApiKey,
+  setLoadingApiKey
 ) => {
   const { storeApiKey } = useContext(AuthContext);
 
@@ -35,7 +35,7 @@ const useSaveKey = (
           setHasApiKey(false);
           setValidApiKey(false);
           setLoadingApiKey(false);
-        },
+        }
       );
     }
   };
diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/components/headerMessages/index.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/components/headerMessages/index.tsx
index 20f44427a..505adc872 100644
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/components/headerMessages/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/components/headerMessages/index.tsx
@@ -1,6 +1,4 @@
 import ForwardedIconComponent from "../../../../../../components/genericIconComponent";
-import { Button } from "../../../../../../components/ui/button";
-import { cn } from "../../../../../../utils/utils";
 
 type HeaderMessagesComponentProps = {
   selectedRows: number[];
diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx
index d7f4d5202..f4de52cbb 100644
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx
@@ -5,7 +5,7 @@ const useRemoveMessages = (
   setSelectedRows,
   setSuccessData,
   setErrorData,
-  selectedRows,
+  selectedRows
 ) => {
   const deleteMessages = useMessagesStore((state) => state.removeMessages);
 
diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
index 8b6f2a0a0..5b1766d8c 100644
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
@@ -26,7 +26,7 @@ export default function MessagesPage() {
     setSelectedRows,
     setSuccessData,
     setErrorData,
-    selectedRows,
+    selectedRows
   );
 
   const { handleUpdate } = useUpdateMessage(setSuccessData, setErrorData);
@@ -63,7 +63,7 @@ export default function MessagesPage() {
           overlayNoRowsTemplate="No data available"
           onSelectionChanged={(event: SelectionChangedEvent) => {
             setSelectedRows(
-              event.api.getSelectedRows().map((row) => row.index),
+              event.api.getSelectedRows().map((row) => row.index)
             );
           }}
           rowSelection="multiple"
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 718888c66..80b842db7 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -46,7 +46,7 @@ export default function StorePage(): JSX.Element {
 
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
+    (state) => state.setCurrentFlowId
   );
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const [loading, setLoading] = useState(true);
@@ -143,7 +143,7 @@ export default function StorePage(): JSX.Element {
           setTotalRowsCount(
             filteredCategories?.length === 0
               ? Number(res?.count ?? 0)
-              : res?.results?.length ?? 0,
+              : res?.results?.length ?? 0
           );
         }
       })
@@ -183,7 +183,7 @@ export default function StorePage(): JSX.Element {
           disabled={loading}
           className={cn(
             `${!validApiKey ? "animate-pulse border-error" : ""}`,
-            loading ? "cursor-not-allowed" : "",
+            loading ? "cursor-not-allowed" : ""
           )}
           variant="primary"
           onClick={() => {
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index a1997e510..5623f0871 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -11,25 +11,25 @@ import MessagesPage from "./pages/SettingsPage/pages/messagesPage";
 const AdminPage = lazy(() => import("./pages/AdminPage"));
 const LoginAdminPage = lazy(() => import("./pages/AdminPage/LoginPage"));
 const ApiKeysPage = lazy(
-  () => import("./pages/SettingsPage/pages/ApiKeysPage"),
+  () => import("./pages/SettingsPage/pages/ApiKeysPage")
 );
 const DeleteAccountPage = lazy(() => import("./pages/DeleteAccountPage"));
 const FlowPage = lazy(() => import("./pages/FlowPage"));
 const LoginPage = lazy(() => import("./pages/LoginPage"));
 const MyCollectionComponent = lazy(
-  () => import("./pages/MainPage/components/myCollectionComponent"),
+  () => import("./pages/MainPage/components/myCollectionComponent")
 );
 const HomePage = lazy(() => import("./pages/MainPage/pages/mainPage"));
 const PlaygroundPage = lazy(() => import("./pages/Playground"));
 const SettingsPage = lazy(() => import("./pages/SettingsPage"));
 const GeneralPage = lazy(
-  () => import("./pages/SettingsPage/pages/GeneralPage"),
+  () => import("./pages/SettingsPage/pages/GeneralPage")
 );
 const GlobalVariablesPage = lazy(
-  () => import("./pages/SettingsPage/pages/GlobalVariablesPage"),
+  () => import("./pages/SettingsPage/pages/GlobalVariablesPage")
 );
 const ShortcutsPage = lazy(
-  () => import("./pages/SettingsPage/pages/ShortcutsPage"),
+  () => import("./pages/SettingsPage/pages/ShortcutsPage")
 );
 const SignUp = lazy(() => import("./pages/SignUpPage"));
 const StorePage = lazy(() => import("./pages/StorePage"));
diff --git a/src/frontend/src/stores/darkStore.ts b/src/frontend/src/stores/darkStore.ts
index 8c9c10951..79f5518da 100644
--- a/src/frontend/src/stores/darkStore.ts
+++ b/src/frontend/src/stores/darkStore.ts
@@ -36,7 +36,7 @@ export const useDarkStore = create<DarkStoreType>((set, get) => ({
         window.localStorage.setItem("githubStars", res?.toString() ?? "0");
         window.localStorage.setItem(
           "githubStarsLastUpdated",
-          new Date().toString(),
+          new Date().toString()
         );
         set(() => ({ stars: res, lastUpdated: new Date() }));
       });
diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index 99aea0515..6d1c2ad5c 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -74,7 +74,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   updateFlowPool: (
     nodeId: string,
     data: VertexBuildTypeAPI | ChatOutputType | ChatInputType,
-    buildId?: string,
+    buildId?: string
   ) => {
     let newFlowPool = cloneDeep({ ...get().flowPool });
     if (!newFlowPool[nodeId]) {
@@ -167,7 +167,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       flowsManager.autoSaveCurrentFlow(
         newChange,
         newEdges,
-        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 },
+        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
       );
     }
   },
@@ -183,7 +183,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       flowsManager.autoSaveCurrentFlow(
         get().nodes,
         newChange,
-        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 },
+        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
       );
     }
   },
@@ -201,7 +201,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
           return newChange;
         }
         return node;
-      }),
+      })
     );
   },
   getNode: (id: string) => {
@@ -212,8 +212,8 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       get().nodes.filter((node) =>
         typeof nodeId === "string"
           ? node.id !== nodeId
-          : !nodeId.includes(node.id),
-      ),
+          : !nodeId.includes(node.id)
+      )
     );
   },
   deleteEdge: (edgeId) => {
@@ -221,8 +221,8 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       get().edges.filter((edge) =>
         typeof edgeId === "string"
           ? edge.id !== edgeId
-          : !edgeId.includes(edge.id),
-      ),
+          : !edgeId.includes(edge.id)
+      )
     );
   },
   paste: (selection, position) => {
@@ -288,7 +288,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       let source = idsMap[edge.source];
       let target = idsMap[edge.target];
       const sourceHandleObject: sourceHandleType = scapeJSONParse(
-        edge.sourceHandle!,
+        edge.sourceHandle!
       );
       let sourceHandle = scapedJSONStringfy({
         ...sourceHandleObject,
@@ -298,7 +298,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
 
       edge.data.sourceHandle = sourceHandleObject;
       const targetHandleObject: targetHandleType = scapeJSONParse(
-        edge.targetHandle!,
+        edge.targetHandle!
       );
       let targetHandle = scapedJSONStringfy({
         ...targetHandleObject,
@@ -317,7 +317,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
           data: cloneDeep(edge.data),
           selected: false,
         },
-        newEdges.map((edge) => ({ ...edge, selected: false })),
+        newEdges.map((edge) => ({ ...edge, selected: false }))
       );
     });
     get().setEdges(newEdges);
@@ -336,10 +336,10 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       });
 
       const newNodes = get().nodes.filter(
-        (node) => !nodesIdsSelected.includes(node.id),
+        (node) => !nodesIdsSelected.includes(node.id)
       );
       const newEdges = get().edges.filter(
-        (edge) => !edgesIdsSelected.includes(edge.id),
+        (edge) => !edgesIdsSelected.includes(edge.id)
       );
 
       set({ nodes: newNodes, edges: newEdges });
@@ -397,7 +397,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
           // style: { stroke: "#555" },
           // className: "stroke-foreground stroke-connection",
         },
-        oldEdges,
+        oldEdges
       );
 
       return newEdges;
@@ -407,7 +407,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       .autoSaveCurrentFlow(
         get().nodes,
         newEdges,
-        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 },
+        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
       );
   },
   unselectAll: () => {
@@ -442,7 +442,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     function validateSubgraph(nodes: string[]) {
       const errorsObjs = validateNodes(
         get().nodes.filter((node) => nodes.includes(node.id)),
-        get().edges,
+        get().edges
       );
 
       const errors = errorsObjs.map((obj) => obj.errors).flat();
@@ -461,13 +461,13 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     function handleBuildUpdate(
       vertexBuildData: VertexBuildTypeAPI,
       status: BuildStatus,
-      runId: string,
+      runId: string
     ) {
       if (vertexBuildData && vertexBuildData.inactivated_vertices) {
         get().removeFromVerticesBuild(vertexBuildData.inactivated_vertices);
         get().updateBuildStatus(
           vertexBuildData.inactivated_vertices,
-          BuildStatus.INACTIVE,
+          BuildStatus.INACTIVE
         );
       }
 
@@ -483,14 +483,14 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
 
         // next_vertices_ids should be next_vertices_ids without the inactivated vertices
         const next_vertices_ids = vertexBuildData.next_vertices_ids.filter(
-          (id) => !vertexBuildData.inactivated_vertices?.includes(id),
+          (id) => !vertexBuildData.inactivated_vertices?.includes(id)
         );
         const top_level_vertices = vertexBuildData.top_level_vertices.filter(
-          (vertex) => !vertexBuildData.inactivated_vertices?.includes(vertex),
+          (vertex) => !vertexBuildData.inactivated_vertices?.includes(vertex)
         );
         const nextVertices: VertexLayerElementType[] = zip(
           next_vertices_ids,
-          top_level_vertices,
+          top_level_vertices
         ).map(([id, reference]) => ({ id: id!, reference }));
 
         const newLayers = [
@@ -512,7 +512,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
 
       get().addDataToFlowPool(
         { ...vertexBuildData, run_id: runId },
-        vertexBuildData.id,
+        vertexBuildData.id
       );
 
       useFlowStore.getState().updateBuildStatus([vertexBuildData.id], status);
@@ -521,7 +521,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       const newFlowBuildStatus = { ...get().flowBuildStatus };
       // filter out the vertices that are not status
       const verticesToUpdate = verticesIds?.filter(
-        (id) => newFlowBuildStatus[id]?.status !== BuildStatus.BUILT,
+        (id) => newFlowBuildStatus[id]?.status !== BuildStatus.BUILT
       );
 
       if (verticesToUpdate) {
@@ -591,7 +591,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       verticesLayers: VertexLayerElementType[][];
       runId: string;
       verticesToRun: string[];
-    } | null,
+    } | null
   ) => {
     set({ verticesBuild: vertices });
   },
@@ -616,7 +616,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
         // that are going to be built
         verticesIds: get().verticesBuild!.verticesIds.filter(
           // keep the vertices that are not in the list of vertices to remove
-          (vertex) => !vertices.includes(vertex),
+          (vertex) => !vertices.includes(vertex)
         ),
       },
     });
diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts
index 393681b72..d6bc8338e 100644
--- a/src/frontend/src/stores/flowsManagerStore.ts
+++ b/src/frontend/src/stores/flowsManagerStore.ts
@@ -87,12 +87,12 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
           if (dbData) {
             const { data, flows } = processFlows(dbData);
             const examples = flows.filter(
-              (flow) => flow.folder_id === starterFolderId,
+              (flow) => flow.folder_id === starterFolderId
             );
             get().setExamples(examples);
 
             const flowsWithoutStarterFolder = flows.filter(
-              (flow) => flow.folder_id !== starterFolderId,
+              (flow) => flow.folder_id !== starterFolderId
             );
 
             get().setFlows(flowsWithoutStarterFolder);
@@ -120,7 +120,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     if (get().currentFlow) {
       get().saveFlow(
         { ...get().currentFlow!, data: { nodes, edges, viewport } },
-        true,
+        true
       );
     }
   },
@@ -146,7 +146,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
                   return updatedFlow;
                 }
                 return flow;
-              }),
+              })
             );
             //update tabs state
 
@@ -195,7 +195,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     flow?: FlowType,
     override?: boolean,
     position?: XYPosition,
-    fromDragAndDrop?: boolean,
+    fromDragAndDrop?: boolean
   ): Promise<string | undefined> => {
     if (newProject) {
       let flowData = flow
@@ -211,7 +211,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
         const newFlow = createNewFlow(
           flowData!,
           flow!,
-          folder_id || my_collection_id!,
+          folder_id || my_collection_id!
         );
         const { id } = await saveFlowToDatabase(newFlow);
         newFlow.id = id;
@@ -234,7 +234,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
       const newFlow = createNewFlow(
         flowData!,
         flow!,
-        folder_id || my_collection_id!,
+        folder_id || my_collection_id!
       );
 
       const newName = addVersionToDuplicates(newFlow, get().flows);
@@ -270,7 +270,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
         .getState()
         .paste(
           { nodes: flow!.data!.nodes, edges: flow!.data!.edges },
-          position ?? { x: 10, y: 10 },
+          position ?? { x: 10, y: 10 }
         );
     }
   },
@@ -280,7 +280,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
         multipleDeleteFlowsComponents(id)
           .then(() => {
             const { data, flows } = processFlows(
-              get().flows.filter((flow) => !id.includes(flow.id)),
+              get().flows.filter((flow) => !id.includes(flow.id))
             );
             get().setFlows(flows);
             set({ isLoading: false });
@@ -300,7 +300,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
           deleteFlowFromDatabase(id)
             .then(() => {
               const { data, flows } = processFlows(
-                get().flows.filter((flow) => flow.id !== id),
+                get().flows.filter((flow) => flow.id !== id)
               );
               get().setFlows(flows);
               set({ isLoading: false });
@@ -322,7 +322,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     return new Promise<void>((resolve) => {
       let componentFlow = get().flows.find(
         (componentFlow) =>
-          componentFlow.is_component && componentFlow.name === key,
+          componentFlow.is_component && componentFlow.name === key
       );
 
       if (componentFlow) {
@@ -370,7 +370,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
               fileData,
               undefined,
               position,
-              true,
+              true
             );
             resolve(id);
           }
@@ -411,7 +411,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     return get().addFlow(
       true,
       createFlowComponent(component, useDarkStore.getState().version),
-      override,
+      override
     );
   },
   takeSnapshot: () => {
@@ -432,7 +432,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     if (pastLength > 0) {
       past[currentFlowId] = past[currentFlowId].slice(
         pastLength - defaultOptions.maxHistorySize + 1,
-        pastLength,
+        pastLength
       );
 
       past[currentFlowId].push(newState);
diff --git a/src/frontend/src/stores/foldersStore.tsx b/src/frontend/src/stores/foldersStore.tsx
index 4d5f4a850..25247ce76 100644
--- a/src/frontend/src/stores/foldersStore.tsx
+++ b/src/frontend/src/stores/foldersStore.tsx
@@ -7,7 +7,6 @@ import {
 } from "../pages/MainPage/services";
 import { FoldersStoreType } from "../types/zustand/folders";
 import useFlowsManagerStore from "./flowsManagerStore";
-import { uploadFlowsToDatabase } from "../controllers/API";
 
 export const useFolderStore = create<FoldersStoreType>((set, get) => ({
   folders: [],
@@ -18,18 +17,18 @@ export const useFolderStore = create<FoldersStoreType>((set, get) => ({
         getFolders().then(
           (res) => {
             const foldersWithoutStarterProjects = res.filter(
-              (folder) => folder.name !== STARTER_FOLDER_NAME,
+              (folder) => folder.name !== STARTER_FOLDER_NAME
             );
 
             const starterProjects = res.find(
-              (folder) => folder.name === STARTER_FOLDER_NAME,
+              (folder) => folder.name === STARTER_FOLDER_NAME
             );
 
             set({ starterProjectId: starterProjects!.id ?? "" });
             set({ folders: foldersWithoutStarterProjects });
 
             const myCollectionId = res?.find(
-              (f) => f.name === DEFAULT_FOLDER,
+              (f) => f.name === DEFAULT_FOLDER
             )?.id;
 
             set({ myCollectionId });
@@ -46,7 +45,7 @@ export const useFolderStore = create<FoldersStoreType>((set, get) => ({
             set({ folders: [] });
             get().setLoading(false);
             reject(error);
-          },
+          }
         );
       }
     });
@@ -66,7 +65,7 @@ export const useFolderStore = create<FoldersStoreType>((set, get) => ({
         },
         () => {
           get().setLoadingById(false);
-        },
+        }
       );
     }
   },
diff --git a/src/frontend/src/stores/globalVariablesStore/globalVariables.ts b/src/frontend/src/stores/globalVariablesStore/globalVariables.ts
index 708f7ec09..c07813858 100644
--- a/src/frontend/src/stores/globalVariablesStore/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariablesStore/globalVariables.ts
@@ -45,5 +45,5 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
     getVariableId: (name) => {
       return get().globalVariables[name]?.id;
     },
-  }),
+  })
 );
diff --git a/src/frontend/src/stores/messagesStore.ts b/src/frontend/src/stores/messagesStore.ts
index 349a1c447..c6bf2042b 100644
--- a/src/frontend/src/stores/messagesStore.ts
+++ b/src/frontend/src/stores/messagesStore.ts
@@ -5,7 +5,7 @@ export const useMessagesStore = create<MessagesStoreType>((set, get) => ({
   deleteSession: (id) => {
     set((state) => {
       const updatedMessages = state.messages.filter(
-        (msg) => msg.session_id !== id,
+        (msg) => msg.session_id !== id
       );
       return { messages: updatedMessages };
     });
@@ -29,7 +29,7 @@ export const useMessagesStore = create<MessagesStoreType>((set, get) => ({
   updateMessage: (message) => {
     set(() => ({
       messages: get().messages.map((msg) =>
-        msg.index === message.index ? message : msg,
+        msg.index === message.index ? message : msg
       ),
     }));
   },
@@ -41,7 +41,7 @@ export const useMessagesStore = create<MessagesStoreType>((set, get) => ({
       try {
         set((state) => {
           const updatedMessages = state.messages.filter(
-            (msg) => !ids.includes(msg.index),
+            (msg) => !ids.includes(msg.index)
           );
           get().setMessages(updatedMessages);
           resolve(updatedMessages);
diff --git a/src/frontend/src/types/store/index.ts b/src/frontend/src/types/store/index.ts
index a24b1696d..31eb985e9 100644
--- a/src/frontend/src/types/store/index.ts
+++ b/src/frontend/src/types/store/index.ts
@@ -46,7 +46,7 @@ export type shortcutsStoreType = {
     shortcut: string;
   }>;
   setShortcuts: (
-    newShortcuts: Array<{ name: string; shortcut: string }>,
+    newShortcuts: Array<{ name: string; shortcut: string }>
   ) => void;
   getShortcutsFromStorage: () => void;
 };
diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts
index 7449f7bc1..e8b88e8d3 100644
--- a/src/frontend/src/types/zustand/flow/index.ts
+++ b/src/frontend/src/types/zustand/flow/index.ts
@@ -86,7 +86,7 @@ export type FlowStoreType = {
     state:
       | FlowState
       | undefined
-      | ((oldState: FlowState | undefined) => FlowState),
+      | ((oldState: FlowState | undefined) => FlowState)
   ) => void;
   nodes: Node[];
   edges: Edge[];
@@ -94,11 +94,11 @@ export type FlowStoreType = {
   onEdgesChange: OnEdgesChange;
   setNodes: (
     update: Node[] | ((oldState: Node[]) => Node[]),
-    skipSave?: boolean,
+    skipSave?: boolean
   ) => void;
   setEdges: (
     update: Edge[] | ((oldState: Edge[]) => Edge[]),
-    skipSave?: boolean,
+    skipSave?: boolean
   ) => void;
   setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void;
   getNode: (id: string) => Node | undefined;
@@ -106,12 +106,12 @@ export type FlowStoreType = {
   deleteEdge: (edgeId: string | Array<string>) => void;
   paste: (
     selection: { nodes: any; edges: any },
-    position: { x: number; y: number; paneX?: number; paneY?: number },
+    position: { x: number; y: number; paneX?: number; paneY?: number }
   ) => void;
   lastCopiedSelection: { nodes: any; edges: any } | null;
   setLastCopiedSelection: (
     newSelection: { nodes: any; edges: any } | null,
-    isCrop?: boolean,
+    isCrop?: boolean
   ) => void;
   cleanFlow: () => void;
   setFilterEdge: (newState) => void;
@@ -138,7 +138,7 @@ export type FlowStoreType = {
       verticesLayers: VertexLayerElementType[][];
       runId: string;
       verticesToRun: string[];
-    } | null,
+    } | null
   ) => void;
   addToVerticesBuild: (vertices: string[]) => void;
   removeFromVerticesBuild: (vertices: string[]) => void;
@@ -156,7 +156,7 @@ export type FlowStoreType = {
   updateFlowPool: (
     nodeId: string,
     data: VertexBuildTypeAPI | ChatOutputType | ChatInputType,
-    buildId?: string,
+    buildId?: string
   ) => void;
   getNodePosition: (nodeId: string) => { x: number; y: number };
 };
diff --git a/src/frontend/src/types/zustand/flowsManager/index.ts b/src/frontend/src/types/zustand/flowsManager/index.ts
index aaafebb7b..e0770626e 100644
--- a/src/frontend/src/types/zustand/flowsManager/index.ts
+++ b/src/frontend/src/types/zustand/flowsManager/index.ts
@@ -17,12 +17,12 @@ export type FlowsManagerStoreType = {
   saveFlow: (flow: FlowType, silent?: boolean) => Promise<void> | undefined;
   saveFlowDebounce: (
     flow: FlowType,
-    silent?: boolean,
+    silent?: boolean
   ) => Promise<void> | undefined;
   autoSaveCurrentFlow: (
     nodes: Node[],
     edges: Edge[],
-    viewport: Viewport,
+    viewport: Viewport
   ) => void;
   uploadFlows: () => Promise<void>;
   uploadFlow: ({
@@ -41,13 +41,13 @@ export type FlowsManagerStoreType = {
     flow?: FlowType,
     override?: boolean,
     position?: XYPosition,
-    fromDragAndDrop?: boolean,
+    fromDragAndDrop?: boolean
   ) => Promise<string | undefined>;
   deleteComponent: (key: string) => Promise<void>;
   removeFlow: (id: string | string[]) => Promise<void>;
   saveComponent: (
     component: any,
-    override: boolean,
+    override: boolean
   ) => Promise<string | undefined>;
   undo: () => void;
   redo: () => void;
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index 4b178088c..90817780f 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -21,7 +21,7 @@ export type GlobalVariablesStore = {
     id: string,
     type?: string,
     default_fields?: string[],
-    value?: string,
+    value?: string
   ) => void;
   removeGlobalVariable: (name: string) => Promise<void>;
   getVariableId: (name: string) => string | undefined;
diff --git a/src/frontend/src/utils/buildUtils.ts b/src/frontend/src/utils/buildUtils.ts
index eab498c4c..190c5f9ec 100644
--- a/src/frontend/src/utils/buildUtils.ts
+++ b/src/frontend/src/utils/buildUtils.ts
@@ -17,7 +17,7 @@ type BuildVerticesParams = {
   onBuildUpdate?: (
     data: VertexBuildTypeAPI,
     status: BuildStatus,
-    buildId: string,
+    buildId: string
   ) => void; // Replace any with the actual type if it's not any
   onBuildComplete?: (allNodesValid: boolean) => void;
   onBuildError?: (title, list, idList: VertexLayerElementType[]) => void;
@@ -55,7 +55,7 @@ export async function updateVerticesOrder(
   startNodeId?: string | null,
   stopNodeId?: string | null,
   nodes?: Node[],
-  edges?: Edge[],
+  edges?: Edge[]
 ): Promise<{
   verticesLayers: VertexLayerElementType[][];
   verticesIds: string[];
@@ -71,7 +71,7 @@ export async function updateVerticesOrder(
         startNodeId,
         stopNodeId,
         nodes,
-        edges,
+        edges
       );
     } catch (error: any) {
       setErrorData({
@@ -128,7 +128,7 @@ export async function buildVertices({
     startNodeId,
     stopNodeId,
     nodes,
-    edges,
+    edges
   );
   if (onValidateNodes) {
     try {
@@ -190,14 +190,14 @@ export async function buildVertices({
             onBuildUpdate(
               getInactiveVertexData(element.id),
               BuildStatus.INACTIVE,
-              runId,
+              runId
             );
           }
           if (element.reference) {
             onBuildUpdate(
               getInactiveVertexData(element.reference),
               BuildStatus.INACTIVE,
-              runId,
+              runId
             );
           }
           buildResults.push(false);
@@ -223,7 +223,7 @@ export async function buildVertices({
         if (stop) {
           return;
         }
-      }),
+      })
     );
     // Once the current layer is built, move to the next layer
     currentLayerIndex += 1;
@@ -268,7 +268,7 @@ async function buildVertex({
         onBuildError!(
           "Error Building Component",
           buildData.data.logs.map((log) => log.message),
-          verticesIds.map((id) => ({ id })),
+          verticesIds.map((id) => ({ id }))
         );
         stopBuild();
       }
@@ -280,7 +280,7 @@ async function buildVertex({
     onBuildError!(
       "Error Building Component",
       [(error as AxiosError<any>).response?.data?.detail ?? "Unknown Error"],
-      verticesIds.map((id) => ({ id })),
+      verticesIds.map((id) => ({ id }))
     );
     stopBuild();
   }
diff --git a/src/frontend/src/utils/parameterUtils.ts b/src/frontend/src/utils/parameterUtils.ts
index d1d53dde7..a1d2f2154 100644
--- a/src/frontend/src/utils/parameterUtils.ts
+++ b/src/frontend/src/utils/parameterUtils.ts
@@ -21,7 +21,7 @@ export const handleUpdateValues = async (name: string, data: NodeDataType) => {
       code,
       template,
       name,
-      data.node?.template[name]?.value,
+      data.node?.template[name]?.value
     );
     if (res.status === 200 && data.node?.template) {
       return res.data.template;
@@ -34,5 +34,5 @@ export const handleUpdateValues = async (name: string, data: NodeDataType) => {
 
 export const debouncedHandleUpdateValues = debounce(
   handleUpdateValues,
-  SAVE_DEBOUNCE_TIME,
+  SAVE_DEBOUNCE_TIME
 );
diff --git a/src/frontend/src/utils/storeUtils.ts b/src/frontend/src/utils/storeUtils.ts
index c8391b211..637e4331a 100644
--- a/src/frontend/src/utils/storeUtils.ts
+++ b/src/frontend/src/utils/storeUtils.ts
@@ -7,7 +7,7 @@ export default function cloneFLowWithParent(
   flow: FlowType,
   parent: string,
   is_component: boolean,
-  keepId = false,
+  keepId = false
 ) {
   let childFLow = cloneDeep(flow);
   childFLow.parent = parent;
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index db1bdfdf1..97798be58 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -1,6 +1,8 @@
 import { ColDef, ColGroupDef } from "ag-grid-community";
 import clsx, { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
+import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender";
+import { MODAL_CLASSES } from "../constants/constants";
 import { APIDataType, TemplateVariableType } from "../types/api";
 import {
   groupedObjType,
@@ -9,8 +11,6 @@ import {
 } from "../types/components";
 import { NodeType } from "../types/flow";
 import { FlowState } from "../types/tabs";
-import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender";
-import { MODAL_CLASSES } from "../constants/constants";
 
 export function classNames(...classes: Array<string>): string {
   return classes.filter(Boolean).join(" ");
@@ -56,7 +56,7 @@ export function normalCaseToSnakeCase(str: string): string {
 
 export function toTitleCase(
   str: string | undefined,
-  isNodeField?: boolean,
+  isNodeField?: boolean
 ): string {
   if (!str) return "";
   let result = str
@@ -65,7 +65,7 @@ export function toTitleCase(
       if (isNodeField) return word;
       if (index === 0) {
         return checkUpperWords(
-          word[0].toUpperCase() + word.slice(1).toLowerCase(),
+          word[0].toUpperCase() + word.slice(1).toLowerCase()
         );
       }
       return checkUpperWords(word.toLowerCase());
@@ -78,7 +78,7 @@ export function toTitleCase(
       if (isNodeField) return word;
       if (index === 0) {
         return checkUpperWords(
-          word[0].toUpperCase() + word.slice(1).toLowerCase(),
+          word[0].toUpperCase() + word.slice(1).toLowerCase()
         );
       }
       return checkUpperWords(word.toLowerCase());
@@ -182,7 +182,7 @@ export function checkLocalStorageKey(key: string): boolean {
 
 export function IncrementObjectKey(
   object: object,
-  key: string,
+  key: string
 ): { newKey: string; increment: number } {
   let count = 1;
   const type = removeCountFromString(key);
@@ -217,7 +217,7 @@ export function groupByFamily(
   data: APIDataType,
   baseClasses: string,
   left: boolean,
-  flow?: NodeType[],
+  flow?: NodeType[]
 ): groupedObjType[] {
   const baseClassesSet = new Set(baseClasses.split("\n"));
   let arrOfPossibleInputs: Array<{
@@ -243,7 +243,7 @@ export function groupByFamily(
         baseClassesSet.has(template.type)) ||
         (template.input_types &&
           template.input_types.some((inputType) =>
-            baseClassesSet.has(inputType),
+            baseClassesSet.has(inputType)
           )))
     );
   };
@@ -263,7 +263,7 @@ export function groupByFamily(
         hasBaseClassInBaseClasses:
           foundNode?.hasBaseClassInBaseClasses ||
           nodeData.node!.base_classes.some((baseClass) =>
-            baseClassesSet.has(baseClass),
+            baseClassesSet.has(baseClass)
           ), //seta como anterior ou verifica se o node tem base class
         displayName: nodeData.node?.display_name,
       });
@@ -280,10 +280,10 @@ export function groupByFamily(
       if (!foundNode) {
         foundNode = {
           hasBaseClassInTemplate: Object.values(node!.template).some(
-            checkBaseClass,
+            checkBaseClass
           ),
           hasBaseClassInBaseClasses: node!.base_classes.some((baseClass) =>
-            baseClassesSet.has(baseClass),
+            baseClassesSet.has(baseClass)
           ),
           displayName: node?.display_name,
         };
@@ -355,7 +355,7 @@ export function isTimeStampString(str: string): boolean {
 export function extractColumnsFromRows(
   rows: object[],
   mode: "intersection" | "union",
-  excludeColumns?: Array<string>,
+  excludeColumns?: Array<string>
 ): (ColDef<any> | ColGroupDef<any>)[] {
   let columnsKeys: { [key: string]: ColDef<any> | ColGroupDef<any> } = {};
   if (rows.length === 0) {

From e6fefa680d3c74a82a4c64db544cd563d50fa283 Mon Sep 17 00:00:00 2001
From: ogabrielluiz <gabriel@langflow.org>
Date: Mon, 10 Jun 2024 15:23:52 -0300
Subject: [PATCH 6/6] Format tests and update prettier command

---
 src/frontend/.prettierignore                  |  2 +-
 src/frontend/package.json                     |  4 +-
 .../tests/end-to-end/assets/ChatTest.json     | 79 ++++---------------
 .../tests/end-to-end/chatInputOutput.spec.ts  |  4 +-
 .../end-to-end/chatInputOutputUser.spec.ts    | 10 +--
 .../end-to-end/curl_api_generation.spec.ts    |  2 +-
 .../tests/end-to-end/dragAndDrop.spec.ts      |  4 +-
 .../end-to-end/dropdownComponent.spec.ts      | 28 +++----
 .../end-to-end/fileUploadComponent.spec.ts    |  4 +-
 .../tests/end-to-end/filterEdge.spec.ts       | 28 +++----
 .../tests/end-to-end/floatComponent.spec.ts   | 20 ++---
 .../tests/end-to-end/flowSettings.spec.ts     |  4 +-
 src/frontend/tests/end-to-end/folders.spec.ts |  4 +-
 .../tests/end-to-end/inputComponent.spec.ts   | 28 +++----
 .../end-to-end/inputListComponent.spec.ts     | 18 ++---
 .../tests/end-to-end/intComponent.spec.ts     | 32 ++++----
 .../end-to-end/keyPairListComponent.spec.ts   |  4 +-
 .../end-to-end/langflowShortcuts.spec.ts      |  4 +-
 .../tests/end-to-end/nestedComponent.spec.ts  | 42 +++++-----
 .../end-to-end/promptModalComponent.spec.ts   |  4 +-
 .../end-to-end/python_api_generation.spec.ts  |  2 +-
 .../tests/end-to-end/saveComponents.spec.ts   |  4 +-
 src/frontend/tests/end-to-end/store.spec.ts   |  2 +-
 .../end-to-end/textAreaModalComponent.spec.ts |  2 +-
 .../tests/end-to-end/textInputOutput.spec.ts  |  8 +-
 .../tests/end-to-end/toggleComponent.spec.ts  | 34 ++++----
 .../tests/end-to-end/tweaks_test.spec.ts      |  4 +-
 27 files changed, 168 insertions(+), 213 deletions(-)

diff --git a/src/frontend/.prettierignore b/src/frontend/.prettierignore
index 07ed7069a..a007feab0 100644
--- a/src/frontend/.prettierignore
+++ b/src/frontend/.prettierignore
@@ -1 +1 @@
-build/*
\ No newline at end of file
+build/*
diff --git a/src/frontend/package.json b/src/frontend/package.json
index c069b9da1..b29dd6a1e 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -82,7 +82,7 @@
     "start": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "format": "npx prettier --write \"{docs,src}/**/*.{js,jsx,ts,tsx,json,md}\" --ignore-path .prettierignore",
+    "format": "npx prettier --write \"{tests,src}/**/*.{js,jsx,ts,tsx,json,md}\" --ignore-path .prettierignore",
     "type-check": "tsc --noEmit --pretty --project tsconfig.json && vite"
   },
   "simple-git-hooks": {
@@ -138,4 +138,4 @@
     "ua-parser-js": "^1.0.37",
     "vite": "^4.5.2"
   }
-}
+}
\ No newline at end of file
diff --git a/src/frontend/tests/end-to-end/assets/ChatTest.json b/src/frontend/tests/end-to-end/assets/ChatTest.json
index cadb3fe12..045d0cddf 100644
--- a/src/frontend/tests/end-to-end/assets/ChatTest.json
+++ b/src/frontend/tests/end-to-end/assets/ChatTest.json
@@ -44,9 +44,7 @@
                 "name": "input_value",
                 "display_name": "Message",
                 "advanced": false,
-                "input_types": [
-                  "Text"
-                ],
+                "input_types": ["Text"],
                 "dynamic": false,
                 "info": "",
                 "load_from_db": false,
@@ -70,9 +68,7 @@
                 "info": "In case of Message being a Record, this template will be used to convert it to text.",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": [
-                  "Text"
-                ]
+                "input_types": ["Text"]
               },
               "return_record": {
                 "type": "bool",
@@ -104,10 +100,7 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                "options": [
-                  "Machine",
-                  "User"
-                ],
+                "options": ["Machine", "User"],
                 "name": "sender",
                 "display_name": "Sender Type",
                 "advanced": true,
@@ -115,9 +108,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": [
-                  "Text"
-                ]
+                "input_types": ["Text"]
               },
               "sender_name": {
                 "type": "str",
@@ -137,9 +128,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": [
-                  "Text"
-                ]
+                "input_types": ["Text"]
               },
               "session_id": {
                 "type": "str",
@@ -158,20 +147,13 @@
                 "info": "If provided, the message will be stored in the memory.",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": [
-                  "Text"
-                ]
+                "input_types": ["Text"]
               },
               "_type": "CustomComponent"
             },
             "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
-            "base_classes": [
-              "object",
-              "Record",
-              "str",
-              "Text"
-            ],
+            "base_classes": ["object", "Record", "str", "Text"],
             "display_name": "Chat Output",
             "documentation": "",
             "custom_fields": {
@@ -182,10 +164,7 @@
               "return_record": null,
               "record_template": null
             },
-            "output_types": [
-              "Text",
-              "Record"
-            ],
+            "output_types": ["Text", "Record"],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -280,10 +259,7 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                "options": [
-                  "Machine",
-                  "User"
-                ],
+                "options": ["Machine", "User"],
                 "name": "sender",
                 "display_name": "Sender Type",
                 "advanced": true,
@@ -291,9 +267,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": [
-                  "Text"
-                ]
+                "input_types": ["Text"]
               },
               "sender_name": {
                 "type": "str",
@@ -313,9 +287,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": [
-                  "Text"
-                ]
+                "input_types": ["Text"]
               },
               "session_id": {
                 "type": "str",
@@ -334,20 +306,13 @@
                 "info": "If provided, the message will be stored in the memory.",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": [
-                  "Text"
-                ]
+                "input_types": ["Text"]
               },
               "_type": "CustomComponent"
             },
             "description": "Get chat inputs from the Playground.",
             "icon": "ChatInput",
-            "base_classes": [
-              "object",
-              "Record",
-              "str",
-              "Text"
-            ],
+            "base_classes": ["object", "Record", "str", "Text"],
             "display_name": "Chat Input",
             "documentation": "",
             "custom_fields": {
@@ -357,10 +322,7 @@
               "session_id": null,
               "return_record": null
             },
-            "output_types": [
-              "Text",
-              "Record"
-            ],
+            "output_types": ["Text", "Record"],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -383,18 +345,11 @@
           "targetHandle": {
             "fieldName": "input_value",
             "id": "ChatOutput-xPeM1",
-            "inputTypes": [
-              "Text"
-            ],
+            "inputTypes": ["Text"],
             "type": "str"
           },
           "sourceHandle": {
-            "baseClasses": [
-              "object",
-              "Record",
-              "str",
-              "Text"
-            ],
+            "baseClasses": ["object", "Record", "str", "Text"],
             "dataType": "ChatInput",
             "id": "ChatInput-XYvUc"
           }
@@ -416,4 +371,4 @@
   "name": "ChatTest",
   "last_tested_version": "1.0.0a14",
   "is_component": false
-}
\ No newline at end of file
+}
diff --git a/src/frontend/tests/end-to-end/chatInputOutput.spec.ts b/src/frontend/tests/end-to-end/chatInputOutput.spec.ts
index 66044f25f..a1429ddec 100644
--- a/src/frontend/tests/end-to-end/chatInputOutput.spec.ts
+++ b/src/frontend/tests/end-to-end/chatInputOutput.spec.ts
@@ -24,7 +24,7 @@ test("chat_io_teste", async ({ page }) => {
 
   const jsonContent = readFileSync(
     "src/frontend/tests/end-to-end/assets/ChatTest.json",
-    "utf-8",
+    "utf-8"
   );
 
   await page.getByTestId("blank-flow").click();
@@ -47,7 +47,7 @@ test("chat_io_teste", async ({ page }) => {
     "drop",
     {
       dataTransfer,
-    },
+    }
   );
   await page.getByLabel("fit view").click();
   await page.getByText("Playground", { exact: true }).click();
diff --git a/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts b/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
index ce1a9ce27..c3e24018a 100644
--- a/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
+++ b/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
@@ -58,7 +58,7 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
     .getByTestId("textarea-input_value")
     .nth(1)
     .fill(
-      "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
+      "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!"
     );
   await page.getByTestId("icon-LucideSend").click();
   await page.getByText("Close", { exact: true }).click();
@@ -89,9 +89,9 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
     await page
       .getByText(
         "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
-        { exact: true },
+        { exact: true }
       )
-      .isVisible(),
+      .isVisible()
   );
 });
 
@@ -197,7 +197,7 @@ test("user must be able to send an image on chat", async ({ page }) => {
   await page.getByTestId("edit-button-modal").click();
   await page.getByTestId("toggle-edit-return_record").click();
   expect(
-    await page.getByTestId("toggle-edit-return_record").isChecked(),
+    await page.getByTestId("toggle-edit-return_record").isChecked()
   ).toBeTruthy();
   await page.getByText("Save Changes").click();
 
@@ -205,7 +205,7 @@ test("user must be able to send an image on chat", async ({ page }) => {
 
   const jsonContent = readFileSync(
     "src/frontend/tests/end-to-end/assets/chain.png",
-    "utf-8",
+    "utf-8"
   );
 
   // Create the DataTransfer and File
diff --git a/src/frontend/tests/end-to-end/curl_api_generation.spec.ts b/src/frontend/tests/end-to-end/curl_api_generation.spec.ts
index 74e3ee11e..406ecf268 100644
--- a/src/frontend/tests/end-to-end/curl_api_generation.spec.ts
+++ b/src/frontend/tests/end-to-end/curl_api_generation.spec.ts
@@ -23,7 +23,7 @@ test("curl_api_generation", async ({ page, context }) => {
   await page.getByRole("tab", { name: "cURL" }).click();
   await page.getByRole("button", { name: "Copy Code" }).click();
   const handle = await page.evaluateHandle(() =>
-    navigator.clipboard.readText(),
+    navigator.clipboard.readText()
   );
   const clipboardContent = await handle.jsonValue();
   expect(clipboardContent.length).toBeGreaterThan(0);
diff --git a/src/frontend/tests/end-to-end/dragAndDrop.spec.ts b/src/frontend/tests/end-to-end/dragAndDrop.spec.ts
index 03d11aaf7..3e760901d 100644
--- a/src/frontend/tests/end-to-end/dragAndDrop.spec.ts
+++ b/src/frontend/tests/end-to-end/dragAndDrop.spec.ts
@@ -27,7 +27,7 @@ test.describe("drag and drop test", () => {
     // Read your file into a buffer.
     const jsonContent = readFileSync(
       "src/frontend/tests/end-to-end/assets/collection.json",
-      "utf-8",
+      "utf-8"
     );
 
     // Create the DataTransfer and File
@@ -47,7 +47,7 @@ test.describe("drag and drop test", () => {
       "drop",
       {
         dataTransfer,
-      },
+      }
     );
 
     const genericNoda = page.getByTestId("div-generic-node");
diff --git a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
index 6c0a7dd9e..0152ca7ed 100644
--- a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
@@ -80,32 +80,32 @@ test("dropDownComponent", async ({ page }) => {
 
   await page.locator('//*[@id="showcredentials_profile_name"]').click();
   expect(
-    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked(),
+    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showcredentials_profile_name"]').click();
   expect(
-    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked(),
+    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showendpoint_url"]').click();
   expect(
-    await page.locator('//*[@id="showendpoint_url"]').isChecked(),
+    await page.locator('//*[@id="showendpoint_url"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showendpoint_url"]').click();
   expect(
-    await page.locator('//*[@id="showendpoint_url"]').isChecked(),
+    await page.locator('//*[@id="showendpoint_url"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showregion_name"]').click();
   expect(
-    await page.locator('//*[@id="showregion_name"]').isChecked(),
+    await page.locator('//*[@id="showregion_name"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showregion_name"]').click();
   expect(
-    await page.locator('//*[@id="showregion_name"]').isChecked(),
+    await page.locator('//*[@id="showregion_name"]').isChecked()
   ).toBeTruthy();
 
   // showmodel_id
@@ -115,7 +115,7 @@ test("dropDownComponent", async ({ page }) => {
   // showmodel_id
   await page.locator('//*[@id="showmodel_id"]').click();
   expect(
-    await page.locator('//*[@id="showmodel_id"]').isChecked(),
+    await page.locator('//*[@id="showmodel_id"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showcache"]').click();
@@ -126,32 +126,32 @@ test("dropDownComponent", async ({ page }) => {
 
   await page.locator('//*[@id="showcredentials_profile_name"]').click();
   expect(
-    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked(),
+    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showcredentials_profile_name"]').click();
   expect(
-    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked(),
+    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showendpoint_url"]').click();
   expect(
-    await page.locator('//*[@id="showendpoint_url"]').isChecked(),
+    await page.locator('//*[@id="showendpoint_url"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showendpoint_url"]').click();
   expect(
-    await page.locator('//*[@id="showendpoint_url"]').isChecked(),
+    await page.locator('//*[@id="showendpoint_url"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showregion_name"]').click();
   expect(
-    await page.locator('//*[@id="showregion_name"]').isChecked(),
+    await page.locator('//*[@id="showregion_name"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showregion_name"]').click();
   expect(
-    await page.locator('//*[@id="showregion_name"]').isChecked(),
+    await page.locator('//*[@id="showregion_name"]').isChecked()
   ).toBeTruthy();
 
   // showmodel_id
@@ -161,7 +161,7 @@ test("dropDownComponent", async ({ page }) => {
   // showmodel_id
   await page.locator('//*[@id="showmodel_id"]').click();
   expect(
-    await page.locator('//*[@id="showmodel_id"]').isChecked(),
+    await page.locator('//*[@id="showmodel_id"]').isChecked()
   ).toBeTruthy();
 
   await page.getByTestId("dropdown-edit-model_id").click();
diff --git a/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts b/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts
index 00f761dea..93b471c43 100644
--- a/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts
@@ -64,7 +64,7 @@ test("dropDownComponent", async ({ page }) => {
   // Click and hold on the first element
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[6]/button/div/div',
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[6]/button/div/div'
     )
     .hover();
   await page.mouse.down();
@@ -72,7 +72,7 @@ test("dropDownComponent", async ({ page }) => {
   // Move to the second element
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div/div',
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div/div'
     )
     .hover();
 
diff --git a/src/frontend/tests/end-to-end/filterEdge.spec.ts b/src/frontend/tests/end-to-end/filterEdge.spec.ts
index 7edbc0436..9cb5a567e 100644
--- a/src/frontend/tests/end-to-end/filterEdge.spec.ts
+++ b/src/frontend/tests/end-to-end/filterEdge.spec.ts
@@ -40,7 +40,7 @@ test("LLMChain - Tooltip", async ({ page }) => {
 
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[3]/div/button/div/div',
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[3]/div/button/div/div'
     )
     .hover()
     .then(async () => {
@@ -60,17 +60,17 @@ test("LLMChain - Tooltip", async ({ page }) => {
   await page.getByTitle("zoom out").click();
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[4]/div/button/div/div',
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[4]/div/button/div/div'
     )
     .hover()
     .then(async () => {
       await expect(
-        page.getByTestId("tooltip-Model Specs").first(),
+        page.getByTestId("tooltip-Model Specs").first()
       ).toBeVisible();
       await page.waitForTimeout(2000);
 
       await expect(
-        page.getByTestId("tooltip-Model Specs").first(),
+        page.getByTestId("tooltip-Model Specs").first()
       ).toBeVisible();
 
       await page.getByTestId("icon-Search").click();
@@ -81,12 +81,12 @@ test("LLMChain - Tooltip", async ({ page }) => {
 
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[5]/div/button/div/div',
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[5]/div/button/div/div'
     )
     .hover()
     .then(async () => {
       await expect(
-        page.getByTestId("empty-tooltip-filter").first(),
+        page.getByTestId("empty-tooltip-filter").first()
       ).toBeVisible();
     });
 });
@@ -113,7 +113,7 @@ test("LLMChain - Filter", async ({ page }) => {
   await page.waitForTimeout(1000);
 
   await page.getByTestId(
-    "input-list-plus-btn-edit_metadata_indexing_include-2",
+    "input-list-plus-btn-edit_metadata_indexing_include-2"
   );
 
   await page.getByTestId("blank-flow").click();
@@ -136,7 +136,7 @@ test("LLMChain - Filter", async ({ page }) => {
 
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[4]/div/button/div/div',
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[4]/div/button/div/div'
     )
     .click();
 
@@ -149,14 +149,14 @@ test("LLMChain - Filter", async ({ page }) => {
   await expect(page.getByTestId("model_specsChatOpenAI")).toBeVisible();
   await expect(page.getByTestId("model_specsChatVertexAI")).toBeVisible();
   await expect(
-    page.getByTestId("model_specsGoogle Generative AI"),
+    page.getByTestId("model_specsGoogle Generative AI")
   ).toBeVisible();
   await expect(
-    page.getByTestId("model_specsHugging Face Inference API"),
+    page.getByTestId("model_specsHugging Face Inference API")
   ).toBeVisible();
   await expect(page.getByTestId("model_specsOllama")).toBeVisible();
   await expect(
-    page.getByTestId("model_specsQianfanChatEndpoint"),
+    page.getByTestId("model_specsQianfanChatEndpoint")
   ).toBeVisible();
   await expect(page.getByTestId("model_specsQianfanLLMEndpoint")).toBeVisible();
   await expect(page.getByTestId("model_specsVertexAI")).toBeVisible();
@@ -168,7 +168,7 @@ test("LLMChain - Filter", async ({ page }) => {
   await expect(page.getByTestId("model_specsAmazon Bedrock")).not.toBeVisible();
   await expect(page.getByTestId("modelsAzure OpenAI")).not.toBeVisible();
   await expect(
-    page.getByTestId("model_specsAzureChatOpenAI"),
+    page.getByTestId("model_specsAzureChatOpenAI")
   ).not.toBeVisible();
   await expect(page.getByTestId("model_specsChatAnthropic")).not.toBeVisible();
   await expect(page.getByTestId("model_specsChatLiteLLM")).not.toBeVisible();
@@ -178,13 +178,13 @@ test("LLMChain - Filter", async ({ page }) => {
 
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div/div',
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div/div'
     )
     .click();
 
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div/div',
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div/div'
     )
     .click();
 
diff --git a/src/frontend/tests/end-to-end/floatComponent.spec.ts b/src/frontend/tests/end-to-end/floatComponent.spec.ts
index e172a92e3..0577a62b4 100644
--- a/src/frontend/tests/end-to-end/floatComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/floatComponent.spec.ts
@@ -71,27 +71,27 @@ test("FloatComponent", async ({ page }) => {
 
   await page.getByTestId("showmirostat").click();
   expect(
-    await page.locator('//*[@id="showmirostat"]').isChecked(),
+    await page.locator('//*[@id="showmirostat"]').isChecked()
   ).toBeTruthy();
 
   await page.getByTestId("showmirostat_eta").click();
   expect(
-    await page.locator('//*[@id="showmirostat_eta"]').isChecked(),
+    await page.locator('//*[@id="showmirostat_eta"]').isChecked()
   ).toBeTruthy();
 
   await page.getByTestId("showmirostat_eta").click();
   expect(
-    await page.locator('//*[@id="showmirostat_eta"]').isChecked(),
+    await page.locator('//*[@id="showmirostat_eta"]').isChecked()
   ).toBeFalsy();
 
   await page.getByTestId("showmirostat_tau").click();
   expect(
-    await page.locator('//*[@id="showmirostat_tau"]').isChecked(),
+    await page.locator('//*[@id="showmirostat_tau"]').isChecked()
   ).toBeTruthy();
 
   await page.getByTestId("showmirostat_tau").click();
   expect(
-    await page.locator('//*[@id="showmirostat_tau"]').isChecked(),
+    await page.locator('//*[@id="showmirostat_tau"]').isChecked()
   ).toBeFalsy();
 
   await page.getByTestId("showmodel").click();
@@ -114,22 +114,22 @@ test("FloatComponent", async ({ page }) => {
 
   await page.getByTestId("shownum_thread").click();
   expect(
-    await page.locator('//*[@id="shownum_thread"]').isChecked(),
+    await page.locator('//*[@id="shownum_thread"]').isChecked()
   ).toBeTruthy();
 
   await page.getByTestId("shownum_thread").click();
   expect(
-    await page.locator('//*[@id="shownum_thread"]').isChecked(),
+    await page.locator('//*[@id="shownum_thread"]').isChecked()
   ).toBeFalsy();
 
   await page.getByTestId("showrepeat_last_n").click();
   expect(
-    await page.locator('//*[@id="showrepeat_last_n"]').isChecked(),
+    await page.locator('//*[@id="showrepeat_last_n"]').isChecked()
   ).toBeTruthy();
 
   await page.getByTestId("showrepeat_last_n").click();
   expect(
-    await page.locator('//*[@id="showrepeat_last_n"]').isChecked(),
+    await page.locator('//*[@id="showrepeat_last_n"]').isChecked()
   ).toBeFalsy();
 
   await page.getByText("Save Changes", { exact: true }).click();
@@ -145,7 +145,7 @@ test("FloatComponent", async ({ page }) => {
     // showtemperature
     await page.locator('//*[@id="showtemperature"]').click();
     expect(
-      await page.locator('//*[@id="showtemperature"]').isChecked(),
+      await page.locator('//*[@id="showtemperature"]').isChecked()
     ).toBeTruthy();
 
     await page.getByText("Save Changes", { exact: true }).click();
diff --git a/src/frontend/tests/end-to-end/flowSettings.spec.ts b/src/frontend/tests/end-to-end/flowSettings.spec.ts
index 25807ed88..a2e9f25c0 100644
--- a/src/frontend/tests/end-to-end/flowSettings.spec.ts
+++ b/src/frontend/tests/end-to-end/flowSettings.spec.ts
@@ -29,7 +29,7 @@ test("flowSettings", async ({ page }) => {
   await page
     .getByPlaceholder("Flow name")
     .fill(
-      "Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test",
+      "Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test"
     );
 
   await page.getByText("Character limit reached").isVisible();
@@ -41,7 +41,7 @@ test("flowSettings", async ({ page }) => {
   await page
     .getByPlaceholder("Flow description")
     .fill(
-      "Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test",
+      "Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test"
     );
 
   await page.getByTestId("save-flow-settings").click();
diff --git a/src/frontend/tests/end-to-end/folders.spec.ts b/src/frontend/tests/end-to-end/folders.spec.ts
index e0f694910..384816b3f 100644
--- a/src/frontend/tests/end-to-end/folders.spec.ts
+++ b/src/frontend/tests/end-to-end/folders.spec.ts
@@ -58,7 +58,7 @@ test("add folder by drag and drop", async ({ page }) => {
 
   const jsonContent = readFileSync(
     "src/frontend/tests/end-to-end/assets/collection.json",
-    "utf-8",
+    "utf-8"
   );
 
   // Create the DataTransfer and File
@@ -78,7 +78,7 @@ test("add folder by drag and drop", async ({ page }) => {
     "drop",
     {
       dataTransfer,
-    },
+    }
   );
 
   await page.getByText("Getting Started").first().isVisible();
diff --git a/src/frontend/tests/end-to-end/inputComponent.spec.ts b/src/frontend/tests/end-to-end/inputComponent.spec.ts
index 3e6936b43..d944cffe5 100644
--- a/src/frontend/tests/end-to-end/inputComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/inputComponent.spec.ts
@@ -60,69 +60,69 @@ test("InputComponent", async ({ page }) => {
   expect(
     await page
       .locator('//*[@id="showchroma_server_cors_allow_origins"]')
-      .isChecked(),
+      .isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showchroma_server_grpc_port"]').click();
   expect(
-    await page.locator('//*[@id="showchroma_server_grpc_port"]').isChecked(),
+    await page.locator('//*[@id="showchroma_server_grpc_port"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showchroma_server_host"]').click();
   expect(
-    await page.locator('//*[@id="showchroma_server_host"]').isChecked(),
+    await page.locator('//*[@id="showchroma_server_host"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showchroma_server_http_port"]').click();
   expect(
-    await page.locator('//*[@id="showchroma_server_http_port"]').isChecked(),
+    await page.locator('//*[@id="showchroma_server_http_port"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showchroma_server_ssl_enabled"]').click();
   expect(
-    await page.locator('//*[@id="showchroma_server_ssl_enabled"]').isChecked(),
+    await page.locator('//*[@id="showchroma_server_ssl_enabled"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showcollection_name"]').click();
   expect(
-    await page.locator('//*[@id="showcollection_name"]').isChecked(),
+    await page.locator('//*[@id="showcollection_name"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showindex_directory"]').click();
   expect(
-    await page.locator('//*[@id="showindex_directory"]').isChecked(),
+    await page.locator('//*[@id="showindex_directory"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showchroma_server_cors_allow_origins"]').click();
   expect(
     await page
       .locator('//*[@id="showchroma_server_cors_allow_origins"]')
-      .isChecked(),
+      .isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showchroma_server_grpc_port"]').click();
   expect(
-    await page.locator('//*[@id="showchroma_server_grpc_port"]').isChecked(),
+    await page.locator('//*[@id="showchroma_server_grpc_port"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showchroma_server_host"]').click();
   expect(
-    await page.locator('//*[@id="showchroma_server_host"]').isChecked(),
+    await page.locator('//*[@id="showchroma_server_host"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showchroma_server_http_port"]').click();
   expect(
-    await page.locator('//*[@id="showchroma_server_http_port"]').isChecked(),
+    await page.locator('//*[@id="showchroma_server_http_port"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showchroma_server_ssl_enabled"]').click();
   expect(
-    await page.locator('//*[@id="showchroma_server_ssl_enabled"]').isChecked(),
+    await page.locator('//*[@id="showchroma_server_ssl_enabled"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showindex_directory"]').click();
   expect(
-    await page.locator('//*[@id="showindex_directory"]').isChecked(),
+    await page.locator('//*[@id="showindex_directory"]').isChecked()
   ).toBeTruthy();
 
   let valueEditNode = await page
@@ -152,7 +152,7 @@ test("InputComponent", async ({ page }) => {
 
     await page.locator('//*[@id="showcollection_name"]').click();
     expect(
-      await page.locator('//*[@id="showcollection_name"]').isChecked(),
+      await page.locator('//*[@id="showcollection_name"]').isChecked()
     ).toBeTruthy();
 
     await page.getByText("Save Changes", { exact: true }).click();
diff --git a/src/frontend/tests/end-to-end/inputListComponent.spec.ts b/src/frontend/tests/end-to-end/inputListComponent.spec.ts
index 74c527892..6414c92db 100644
--- a/src/frontend/tests/end-to-end/inputListComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/inputListComponent.spec.ts
@@ -41,19 +41,19 @@ test("InputListComponent", async ({ page }) => {
   await page.getByTestId("edit-button-modal").click();
 
   expect(
-    await page.getByTestId("showmetadata_indexing_exclude").isChecked(),
+    await page.getByTestId("showmetadata_indexing_exclude").isChecked()
   ).toBeFalsy();
   await page.getByTestId("showmetadata_indexing_exclude").click();
   expect(
-    await page.getByTestId("showmetadata_indexing_exclude").isChecked(),
+    await page.getByTestId("showmetadata_indexing_exclude").isChecked()
   ).toBeTruthy();
 
   expect(
-    await page.getByTestId("showmetadata_indexing_include").isChecked(),
+    await page.getByTestId("showmetadata_indexing_include").isChecked()
   ).toBeFalsy();
   await page.getByTestId("showmetadata_indexing_include").click();
   expect(
-    await page.getByTestId("showmetadata_indexing_include").isChecked(),
+    await page.getByTestId("showmetadata_indexing_include").isChecked()
   ).toBeTruthy();
 
   await page
@@ -93,7 +93,7 @@ test("InputListComponent", async ({ page }) => {
     .click();
 
   const plusButtonLocator = page.getByTestId(
-    "input-list-plus-btn_metadata_indexing_include-1",
+    "input-list-plus-btn_metadata_indexing_include-1"
   );
   const elementCount = await plusButtonLocator?.count();
 
@@ -164,12 +164,12 @@ test("InputListComponent", async ({ page }) => {
     .click();
 
   const plusButtonLocatorEdit0 = await page.getByTestId(
-    "input-list-plus-btn-edit_metadata_indexing_include-0",
+    "input-list-plus-btn-edit_metadata_indexing_include-0"
   );
   const elementCountEdit0 = await plusButtonLocatorEdit0?.count();
 
   const plusButtonLocatorEdit2 = await page.getByTestId(
-    "input-list-plus-btn-edit_metadata_indexing_include-2",
+    "input-list-plus-btn-edit_metadata_indexing_include-2"
   );
   const elementCountEdit2 = await plusButtonLocatorEdit2?.count();
 
@@ -178,13 +178,13 @@ test("InputListComponent", async ({ page }) => {
   }
 
   const minusButtonLocatorEdit1 = await page.getByTestId(
-    "input-list-minus-btn-edit_metadata_indexing_include-1",
+    "input-list-minus-btn-edit_metadata_indexing_include-1"
   );
 
   const elementCountMinusEdit1 = await minusButtonLocatorEdit1?.count();
 
   const minusButtonLocatorEdit2 = await page.getByTestId(
-    "input-list-minus-btn-edit_metadata_indexing_include-2",
+    "input-list-minus-btn-edit_metadata_indexing_include-2"
   );
 
   const elementCountMinusEdit2 = await minusButtonLocatorEdit2?.count();
diff --git a/src/frontend/tests/end-to-end/intComponent.spec.ts b/src/frontend/tests/end-to-end/intComponent.spec.ts
index 6ec81819a..9b4ed14e2 100644
--- a/src/frontend/tests/end-to-end/intComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/intComponent.spec.ts
@@ -87,77 +87,77 @@ test("IntComponent", async ({ page }) => {
 
   await page.locator('//*[@id="showmodel_kwargs"]').click();
   expect(
-    await page.locator('//*[@id="showmodel_kwargs"]').isChecked(),
+    await page.locator('//*[@id="showmodel_kwargs"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showmodel_name"]').click();
   expect(
-    await page.locator('//*[@id="showmodel_name"]').isChecked(),
+    await page.locator('//*[@id="showmodel_name"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showopenai_api_base"]').click();
   expect(
-    await page.locator('//*[@id="showopenai_api_base"]').isChecked(),
+    await page.locator('//*[@id="showopenai_api_base"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showopenai_api_key"]').click();
   expect(
-    await page.locator('//*[@id="showopenai_api_key"]').isChecked(),
+    await page.locator('//*[@id="showopenai_api_key"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showtemperature"]').click();
   expect(
-    await page.locator('//*[@id="showtemperature"]').isChecked(),
+    await page.locator('//*[@id="showtemperature"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showmodel_kwargs"]').click();
   expect(
-    await page.locator('//*[@id="showmodel_kwargs"]').isChecked(),
+    await page.locator('//*[@id="showmodel_kwargs"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showmodel_name"]').click();
   expect(
-    await page.locator('//*[@id="showmodel_name"]').isChecked(),
+    await page.locator('//*[@id="showmodel_name"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showopenai_api_base"]').click();
   expect(
-    await page.locator('//*[@id="showopenai_api_base"]').isChecked(),
+    await page.locator('//*[@id="showopenai_api_base"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showopenai_api_key"]').click();
   expect(
-    await page.locator('//*[@id="showopenai_api_key"]').isChecked(),
+    await page.locator('//*[@id="showopenai_api_key"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showtemperature"]').click();
   expect(
-    await page.locator('//*[@id="showtemperature"]').isChecked(),
+    await page.locator('//*[@id="showtemperature"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showmodel_kwargs"]').click();
   expect(
-    await page.locator('//*[@id="showmodel_kwargs"]').isChecked(),
+    await page.locator('//*[@id="showmodel_kwargs"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showmodel_name"]').click();
   expect(
-    await page.locator('//*[@id="showmodel_name"]').isChecked(),
+    await page.locator('//*[@id="showmodel_name"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showopenai_api_base"]').click();
   expect(
-    await page.locator('//*[@id="showopenai_api_base"]').isChecked(),
+    await page.locator('//*[@id="showopenai_api_base"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showopenai_api_key"]').click();
   expect(
-    await page.locator('//*[@id="showopenai_api_key"]').isChecked(),
+    await page.locator('//*[@id="showopenai_api_key"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showtemperature"]').click();
   expect(
-    await page.locator('//*[@id="showtemperature"]').isChecked(),
+    await page.locator('//*[@id="showtemperature"]').isChecked()
   ).toBeFalsy();
 
   await page.getByText("Save Changes", { exact: true }).click();
@@ -172,7 +172,7 @@ test("IntComponent", async ({ page }) => {
 
     await page.locator('//*[@id="showtimeout"]').click();
     expect(
-      await page.locator('//*[@id="showtimeout"]').isChecked(),
+      await page.locator('//*[@id="showtimeout"]').isChecked()
     ).toBeTruthy();
 
     const valueEditNode = await page
diff --git a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
index 31a4521ae..165dd685b 100644
--- a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
@@ -81,7 +81,7 @@ test("KeypairListComponent", async ({ page }) => {
   expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeFalsy();
   await page.locator('//*[@id="showcredentials_profile_name"]').click();
   expect(
-    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked(),
+    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
   ).toBeFalsy();
   await page.getByText("Save Changes", { exact: true }).click();
 
@@ -96,7 +96,7 @@ test("KeypairListComponent", async ({ page }) => {
 
     await page.locator('//*[@id="showcredentials_profile_name"]').click();
     expect(
-      await page.locator('//*[@id="showcredentials_profile_name"]').isChecked(),
+      await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
     ).toBeTruthy();
     await page.locator('//*[@id="showcache"]').click();
     expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeTruthy();
diff --git a/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts b/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
index 42b8744d1..58615dd55 100644
--- a/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
+++ b/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
@@ -61,7 +61,7 @@ test("LangflowShortcuts", async ({ page }) => {
 
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div[2]/div/div[1]/div/div[1]/div/div/div[1]',
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div[2]/div/div[1]/div/div[1]/div/div/div[1]'
     )
     .click();
   await page.keyboard.press("Backspace");
@@ -84,7 +84,7 @@ test("LangflowShortcuts", async ({ page }) => {
 
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div[2]/div/div[1]/div/div[1]/div/div/div[1]',
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div[2]/div/div[1]/div/div[1]/div/div/div[1]'
     )
     .click();
   await page.keyboard.press("Backspace");
diff --git a/src/frontend/tests/end-to-end/nestedComponent.spec.ts b/src/frontend/tests/end-to-end/nestedComponent.spec.ts
index 2df9c1b7b..3cd319576 100644
--- a/src/frontend/tests/end-to-end/nestedComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/nestedComponent.spec.ts
@@ -41,7 +41,7 @@ test("NestedComponent", async ({ page }) => {
   await page.locator('//*[@id="showpool_threads"]').click();
 
   expect(
-    await page.locator('//*[@id="showpool_threads"]').isChecked(),
+    await page.locator('//*[@id="showpool_threads"]').isChecked()
   ).toBeTruthy();
 
   //showtext_key
@@ -53,140 +53,140 @@ test("NestedComponent", async ({ page }) => {
   await page.locator('//*[@id="showindex_name"]').click();
 
   expect(
-    await page.locator('//*[@id="showindex_name"]').isChecked(),
+    await page.locator('//*[@id="showindex_name"]').isChecked()
   ).toBeFalsy();
 
   // shownamespace
   await page.locator('//*[@id="shownamespace"]').click();
 
   expect(
-    await page.locator('//*[@id="shownamespace"]').isChecked(),
+    await page.locator('//*[@id="shownamespace"]').isChecked()
   ).toBeFalsy();
 
   // showpinecone_api_key
   await page.locator('//*[@id="showpinecone_api_key"]').click();
 
   expect(
-    await page.locator('//*[@id="showpinecone_api_key"]').isChecked(),
+    await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
   ).toBeFalsy();
 
   // showindex_name
   await page.locator('//*[@id="showindex_name"]').click();
 
   expect(
-    await page.locator('//*[@id="showindex_name"]').isChecked(),
+    await page.locator('//*[@id="showindex_name"]').isChecked()
   ).toBeTruthy();
 
   // shownamespace
   await page.locator('//*[@id="shownamespace"]').click();
 
   expect(
-    await page.locator('//*[@id="shownamespace"]').isChecked(),
+    await page.locator('//*[@id="shownamespace"]').isChecked()
   ).toBeTruthy();
 
   // showpinecone_api_key
   await page.locator('//*[@id="showpinecone_api_key"]').click();
 
   expect(
-    await page.locator('//*[@id="showpinecone_api_key"]').isChecked(),
+    await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
   ).toBeTruthy();
 
   // showindex_name
   await page.locator('//*[@id="showindex_name"]').click();
 
   expect(
-    await page.locator('//*[@id="showindex_name"]').isChecked(),
+    await page.locator('//*[@id="showindex_name"]').isChecked()
   ).toBeFalsy();
 
   // shownamespace
   await page.locator('//*[@id="shownamespace"]').click();
 
   expect(
-    await page.locator('//*[@id="shownamespace"]').isChecked(),
+    await page.locator('//*[@id="shownamespace"]').isChecked()
   ).toBeFalsy();
 
   // showpinecone_api_key
   await page.locator('//*[@id="showpinecone_api_key"]').click();
 
   expect(
-    await page.locator('//*[@id="showpinecone_api_key"]').isChecked(),
+    await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
   ).toBeFalsy();
 
   // showindex_name
   await page.locator('//*[@id="showindex_name"]').click();
 
   expect(
-    await page.locator('//*[@id="showindex_name"]').isChecked(),
+    await page.locator('//*[@id="showindex_name"]').isChecked()
   ).toBeTruthy();
 
   // shownamespace
   await page.locator('//*[@id="shownamespace"]').click();
 
   expect(
-    await page.locator('//*[@id="shownamespace"]').isChecked(),
+    await page.locator('//*[@id="shownamespace"]').isChecked()
   ).toBeTruthy();
 
   // showpinecone_api_key
   await page.locator('//*[@id="showpinecone_api_key"]').click();
 
   expect(
-    await page.locator('//*[@id="showpinecone_api_key"]').isChecked(),
+    await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
   ).toBeTruthy();
 
   // showindex_name
   await page.locator('//*[@id="showindex_name"]').click();
 
   expect(
-    await page.locator('//*[@id="showindex_name"]').isChecked(),
+    await page.locator('//*[@id="showindex_name"]').isChecked()
   ).toBeFalsy();
 
   // shownamespace
   await page.locator('//*[@id="shownamespace"]').click();
 
   expect(
-    await page.locator('//*[@id="shownamespace"]').isChecked(),
+    await page.locator('//*[@id="shownamespace"]').isChecked()
   ).toBeFalsy();
 
   // showpinecone_api_key
   await page.locator('//*[@id="showpinecone_api_key"]').click();
 
   expect(
-    await page.locator('//*[@id="showpinecone_api_key"]').isChecked(),
+    await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
   ).toBeFalsy();
 
   // showindex_name
   await page.locator('//*[@id="showindex_name"]').click();
 
   expect(
-    await page.locator('//*[@id="showindex_name"]').isChecked(),
+    await page.locator('//*[@id="showindex_name"]').isChecked()
   ).toBeTruthy();
 
   // shownamespace
   await page.locator('//*[@id="shownamespace"]').click();
 
   expect(
-    await page.locator('//*[@id="shownamespace"]').isChecked(),
+    await page.locator('//*[@id="shownamespace"]').isChecked()
   ).toBeTruthy();
 
   // showpinecone_api_key
   await page.locator('//*[@id="showpinecone_api_key"]').click();
 
   expect(
-    await page.locator('//*[@id="showpinecone_api_key"]').isChecked(),
+    await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
   ).toBeTruthy();
 
   //showpool_threads
   await page.locator('//*[@id="showpool_threads"]').click();
 
   expect(
-    await page.locator('//*[@id="showpool_threads"]').isChecked(),
+    await page.locator('//*[@id="showpool_threads"]').isChecked()
   ).toBeFalsy();
 
   //showtext_key
   await page.locator('//*[@id="showtext_key"]').click();
 
   expect(
-    await page.locator('//*[@id="showtext_key"]').isChecked(),
+    await page.locator('//*[@id="showtext_key"]').isChecked()
   ).toBeTruthy();
 
   await page.getByText("Save Changes", { exact: true }).click();
diff --git a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
index 8c6a5ab84..ed8162a4e 100644
--- a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
@@ -138,7 +138,7 @@ test("PromptTemplateComponent", async ({ page }) => {
 
   await page.locator('//*[@id="showtemplate"]').click();
   expect(
-    await page.locator('//*[@id="showtemplate"]').isChecked(),
+    await page.locator('//*[@id="showtemplate"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showprompt"]').click();
@@ -158,7 +158,7 @@ test("PromptTemplateComponent", async ({ page }) => {
 
   await page.locator('//*[@id="showtemplate"]').click();
   expect(
-    await page.locator('//*[@id="showtemplate"]').isChecked(),
+    await page.locator('//*[@id="showtemplate"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showprompt"]').click();
diff --git a/src/frontend/tests/end-to-end/python_api_generation.spec.ts b/src/frontend/tests/end-to-end/python_api_generation.spec.ts
index 2857c9eb5..d75dd2c5e 100644
--- a/src/frontend/tests/end-to-end/python_api_generation.spec.ts
+++ b/src/frontend/tests/end-to-end/python_api_generation.spec.ts
@@ -23,7 +23,7 @@ test("python_api_generation", async ({ page, context }) => {
   await page.getByRole("tab", { name: "Python API" }).click();
   await page.getByRole("button", { name: "Copy Code" }).click();
   const handle = await page.evaluateHandle(() =>
-    navigator.clipboard.readText(),
+    navigator.clipboard.readText()
   );
   const clipboardContent = await handle.jsonValue();
   expect(clipboardContent.length).toBeGreaterThan(0);
diff --git a/src/frontend/tests/end-to-end/saveComponents.spec.ts b/src/frontend/tests/end-to-end/saveComponents.spec.ts
index 624bb5b2e..94fab8f39 100644
--- a/src/frontend/tests/end-to-end/saveComponents.spec.ts
+++ b/src/frontend/tests/end-to-end/saveComponents.spec.ts
@@ -27,7 +27,7 @@ test.describe("save component tests", () => {
     // Read your file into a buffer.
     const jsonContent = readFileSync(
       "src/frontend/tests/end-to-end/assets/flow_group_test.json",
-      "utf-8",
+      "utf-8"
     );
 
     // Create the DataTransfer and File
@@ -49,7 +49,7 @@ test.describe("save component tests", () => {
       "drop",
       {
         dataTransfer,
-      },
+      }
     );
 
     const genericNoda = page.getByTestId("div-generic-node");
diff --git a/src/frontend/tests/end-to-end/store.spec.ts b/src/frontend/tests/end-to-end/store.spec.ts
index 8e443ecdd..13963d698 100644
--- a/src/frontend/tests/end-to-end/store.spec.ts
+++ b/src/frontend/tests/end-to-end/store.spec.ts
@@ -262,7 +262,7 @@ test("should share component with share button", async ({ page }) => {
   await page.getByText("Set workflow status to public").isVisible();
   await page
     .getByText(
-      "Attention: API keys in specified fields are automatically removed upon sharing.",
+      "Attention: API keys in specified fields are automatically removed upon sharing."
     )
     .isVisible();
   await page.getByText("Export").first().isVisible();
diff --git a/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts b/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
index 9443586e6..fa4248a63 100644
--- a/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
@@ -51,7 +51,7 @@ test("TextAreaModalComponent", async ({ page }) => {
   await page
     .getByTestId("textarea-text")
     .fill(
-      "test test test test test test test test test test test !@#%*)( 123456789101010101010101111111111 !!!!!!!!!!",
+      "test test test test test test test test test test test !@#%*)( 123456789101010101010101111111111 !!!!!!!!!!"
     );
 
   await page.getByTestId("textarea-text-ExternalLink").click();
diff --git a/src/frontend/tests/end-to-end/textInputOutput.spec.ts b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
index 3da77e867..94804d956 100644
--- a/src/frontend/tests/end-to-end/textInputOutput.spec.ts
+++ b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
@@ -60,7 +60,7 @@ test("TextInputOutputComponent", async ({ page }) => {
   // Click and hold on the first element
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[6]/button/div/div',
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[6]/button/div/div'
     )
     .hover();
   await page.mouse.down();
@@ -68,7 +68,7 @@ test("TextInputOutputComponent", async ({ page }) => {
   // Move to the second element
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[9]/div/button/div/div',
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[9]/div/button/div/div'
     )
     .hover();
 
@@ -92,7 +92,7 @@ test("TextInputOutputComponent", async ({ page }) => {
   // Click and hold on the first element
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[13]/button/div/div',
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[13]/button/div/div'
     )
     .hover();
   await page.mouse.down();
@@ -100,7 +100,7 @@ test("TextInputOutputComponent", async ({ page }) => {
   // Move to the second element
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div/div',
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div/div'
     )
     .hover();
 
diff --git a/src/frontend/tests/end-to-end/toggleComponent.spec.ts b/src/frontend/tests/end-to-end/toggleComponent.spec.ts
index 58d909af4..5a8d9a36a 100644
--- a/src/frontend/tests/end-to-end/toggleComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/toggleComponent.spec.ts
@@ -45,7 +45,7 @@ test("ToggleComponent", async ({ page }) => {
 
   await page.locator('//*[@id="showload_hidden"]').click();
   expect(
-    await page.locator('//*[@id="showload_hidden"]').isChecked(),
+    await page.locator('//*[@id="showload_hidden"]').isChecked()
   ).toBeTruthy();
 
   await page.getByText("Save Changes", { exact: true }).click();
@@ -81,12 +81,12 @@ test("ToggleComponent", async ({ page }) => {
 
   await page.locator('//*[@id="showload_hidden"]').click();
   expect(
-    await page.locator('//*[@id="showload_hidden"]').isChecked(),
+    await page.locator('//*[@id="showload_hidden"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showmax_concurrency"]').click();
   expect(
-    await page.locator('//*[@id="showmax_concurrency"]').isChecked(),
+    await page.locator('//*[@id="showmax_concurrency"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showpath"]').click();
@@ -94,22 +94,22 @@ test("ToggleComponent", async ({ page }) => {
 
   await page.locator('//*[@id="showrecursive"]').click();
   expect(
-    await page.locator('//*[@id="showrecursive"]').isChecked(),
+    await page.locator('//*[@id="showrecursive"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showsilent_errors"]').click();
   expect(
-    await page.locator('//*[@id="showsilent_errors"]').isChecked(),
+    await page.locator('//*[@id="showsilent_errors"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showuse_multithreading"]').click();
   expect(
-    await page.locator('//*[@id="showuse_multithreading"]').isChecked(),
+    await page.locator('//*[@id="showuse_multithreading"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showmax_concurrency"]').click();
   expect(
-    await page.locator('//*[@id="showmax_concurrency"]').isChecked(),
+    await page.locator('//*[@id="showmax_concurrency"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showpath"]').click();
@@ -117,17 +117,17 @@ test("ToggleComponent", async ({ page }) => {
 
   await page.locator('//*[@id="showrecursive"]').click();
   expect(
-    await page.locator('//*[@id="showrecursive"]').isChecked(),
+    await page.locator('//*[@id="showrecursive"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showsilent_errors"]').click();
   expect(
-    await page.locator('//*[@id="showsilent_errors"]').isChecked(),
+    await page.locator('//*[@id="showsilent_errors"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showuse_multithreading"]').click();
   expect(
-    await page.locator('//*[@id="showuse_multithreading"]').isChecked(),
+    await page.locator('//*[@id="showuse_multithreading"]').isChecked()
   ).toBeFalsy();
 
   await page.getByText("Save Changes", { exact: true }).click();
@@ -144,38 +144,38 @@ test("ToggleComponent", async ({ page }) => {
 
     await page.locator('//*[@id="showload_hidden"]').click();
     expect(
-      await page.locator('//*[@id="showload_hidden"]').isChecked(),
+      await page.locator('//*[@id="showload_hidden"]').isChecked()
     ).toBeTruthy();
 
     expect(
-      await page.getByTestId("toggle-edit-load_hidden").isChecked(),
+      await page.getByTestId("toggle-edit-load_hidden").isChecked()
     ).toBeTruthy();
 
     await page.getByText("Save Changes", { exact: true }).click();
 
     await page.getByTestId("toggle-load_hidden").click();
     expect(
-      await page.getByTestId("toggle-load_hidden").isChecked(),
+      await page.getByTestId("toggle-load_hidden").isChecked()
     ).toBeFalsy();
 
     await page.getByTestId("toggle-load_hidden").click();
     expect(
-      await page.getByTestId("toggle-load_hidden").isChecked(),
+      await page.getByTestId("toggle-load_hidden").isChecked()
     ).toBeTruthy();
 
     await page.getByTestId("toggle-load_hidden").click();
     expect(
-      await page.getByTestId("toggle-load_hidden").isChecked(),
+      await page.getByTestId("toggle-load_hidden").isChecked()
     ).toBeFalsy();
 
     await page.getByTestId("toggle-load_hidden").click();
     expect(
-      await page.getByTestId("toggle-load_hidden").isChecked(),
+      await page.getByTestId("toggle-load_hidden").isChecked()
     ).toBeTruthy();
 
     await page.getByTestId("toggle-load_hidden").click();
     expect(
-      await page.getByTestId("toggle-load_hidden").isChecked(),
+      await page.getByTestId("toggle-load_hidden").isChecked()
     ).toBeFalsy();
   }
 });
diff --git a/src/frontend/tests/end-to-end/tweaks_test.spec.ts b/src/frontend/tests/end-to-end/tweaks_test.spec.ts
index 586d0d9e1..0006456af 100644
--- a/src/frontend/tests/end-to-end/tweaks_test.spec.ts
+++ b/src/frontend/tests/end-to-end/tweaks_test.spec.ts
@@ -24,7 +24,7 @@ test("curl_api_generation", async ({ page, context }) => {
   await page.getByRole("tab", { name: "cURL" }).click();
   await page.getByRole("button", { name: "Copy Code" }).click();
   const handle = await page.evaluateHandle(() =>
-    navigator.clipboard.readText(),
+    navigator.clipboard.readText()
   );
   const clipboardContent = await handle.jsonValue();
   const oldValue = clipboardContent;
@@ -50,7 +50,7 @@ test("curl_api_generation", async ({ page, context }) => {
   await page.getByRole("tab", { name: "cURL" }).click();
   await page.getByRole("button", { name: "Copy Code" }).click();
   const handle2 = await page.evaluateHandle(() =>
-    navigator.clipboard.readText(),
+    navigator.clipboard.readText()
   );
   const clipboardContent2 = await handle2.jsonValue();
   const newValue = clipboardContent2;