From 342c2eaec7881e19fba31205b9922ed4c50be316 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Fri, 26 May 2023 22:20:08 -0300
Subject: [PATCH 01/14] =?UTF-8?q?=F0=9F=94=A8=20refactor(base.py):=20refac?=
 =?UTF-8?q?tor=20FrontendNode.format=5Ffield()=20method=20to=20improve=20r?=
 =?UTF-8?q?eadability=20and=20maintainability=20This=20commit=20refactors?=
 =?UTF-8?q?=20the=20FrontendNode.format=5Ffield()=20method=20to=20improve?=
 =?UTF-8?q?=20its=20readability=20and=20maintainability.=20The=20method=20?=
 =?UTF-8?q?now=20uses=20helper=20methods=20to=20handle=20specific=20field?=
 =?UTF-8?q?=20types=20and=20values,=20and=20to=20determine=20whether=20a?=
 =?UTF-8?q?=20field=20should=20be=20shown,=20be=20a=20password=20field,=20?=
 =?UTF-8?q?or=20be=20multiline.=20The=20method=20also=20uses=20a=20diction?=
 =?UTF-8?q?ary=20to=20handle=20special=20fields=20and=20their=20respective?=
 =?UTF-8?q?=20handlers.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/template/base.py | 200 ++++++++++++++++++--------
 1 file changed, 137 insertions(+), 63 deletions(-)

diff --git a/src/backend/langflow/template/base.py b/src/backend/langflow/template/base.py
index 5273782ed..c944ec8d1 100644
--- a/src/backend/langflow/template/base.py
+++ b/src/backend/langflow/template/base.py
@@ -1,5 +1,6 @@
 from abc import ABC
-from typing import Any, Callable, Dict, Optional, Union
+import re
+from typing import Any, Callable, Dict, List, Optional, Union
 
 from pydantic import BaseModel
 
@@ -139,10 +140,10 @@ class Template(BaseModel):
 class FrontendNode(BaseModel):
     template: Template
     description: str
-    base_classes: list
+    base_classes: List[str]
     name: str = ""
 
-    def to_dict(self):
+    def to_dict(self) -> dict:
         return {
             self.name: {
                 "template": self.template.to_dict(self.format_field),
@@ -153,53 +154,145 @@ class FrontendNode(BaseModel):
 
     @staticmethod
     def format_field(field: TemplateField, name: Optional[str] = None) -> None:
+        """Formats a given field based on its attributes and value."""
+        SPECIAL_FIELD_HANDLERS = {
+            "allowed_tools": lambda field: "Tool",
+            "max_value_length": lambda field: "int",
+        }
+
         key = field.name
         value = field.to_dict()
         _type = value["type"]
 
-        # Remove 'Optional' wrapper
-        if "Optional" in _type:
-            _type = _type.replace("Optional[", "")[:-1]
+        _type = FrontendNode.remove_optional(_type)
+        _type, is_list = FrontendNode.check_for_list_type(_type)
+        field.is_list = is_list or field.is_list
+        _type = FrontendNode.replace_mapping_with_dict(_type)
+        _type = FrontendNode.handle_union_type(_type)
 
-        # Check for list type
-        if "List" in _type or "Sequence" in _type:
-            _type = _type.replace("List[", "")
-            _type = _type.replace("Sequence[", "")[:-1]
-            field.is_list = True
+        field.field_type = FrontendNode.handle_special_field(
+            field, key, _type, SPECIAL_FIELD_HANDLERS
+        )
+        field.field_type = FrontendNode.handle_dict_type(field, _type)
+        field.show = FrontendNode.should_show_field(key, field.required)
+        field.password = FrontendNode.should_be_password(key, field.show)
+        field.multiline = FrontendNode.should_be_multiline(key)
 
-        # Replace 'Mapping' with 'dict'
-        if "Mapping" in _type:
-            _type = _type.replace("Mapping", "dict")
+        FrontendNode.replace_default_value(field, value)
+        FrontendNode.handle_specific_field_values(field, key, name)
+        FrontendNode.handle_kwargs_field(field)
+        FrontendNode.handle_api_key_field(field, key)
 
-        # {'type': 'Union[float, Tuple[float, float], NoneType]'} != {'type': 'float'}
+    @staticmethod
+    def remove_optional(_type: str) -> str:
+        """Removes 'Optional' wrapper from the type if present."""
+        return re.sub(r"Optional\[(.*)\]", r"\1", _type)
+
+    @staticmethod
+    def check_for_list_type(_type: str) -> tuple:
+        """Checks for list type and returns the modified type and a boolean indicating if it's a list."""
+        is_list = "List" in _type or "Sequence" in _type
+        if is_list:
+            _type = re.sub(r"(List|Sequence)\[(.*)\]", r"\2", _type)
+        return _type, is_list
+
+    @staticmethod
+    def replace_mapping_with_dict(_type: str) -> str:
+        """Replaces 'Mapping' with 'dict'."""
+        return _type.replace("Mapping", "dict")
+
+    @staticmethod
+    def handle_union_type(_type: str) -> str:
+        """Simplifies the 'Union' type to the first type in the Union."""
         if "Union" in _type:
             _type = _type.replace("Union[", "")[:-1]
             _type = _type.split(",")[0]
             _type = _type.replace("]", "").replace("[", "")
+        return _type
 
-        field.field_type = _type
+    @staticmethod
+    def handle_special_field(
+        field, key: str, _type: str, SPECIAL_FIELD_HANDLERS
+    ) -> str:
+        """Handles special field by using the respective handler if present."""
+        handler = SPECIAL_FIELD_HANDLERS.get(key)
+        return handler(field) if handler else _type
 
-        # Change type from str to Tool
-        field.field_type = "Tool" if key in {"allowed_tools"} else field.field_type
+    @staticmethod
+    def handle_dict_type(field: TemplateField, _type: str) -> str:
+        """Handles 'dict' type by replacing it with 'code' or 'file' based on the field name."""
+        if "dict" in _type.lower():
+            if field.name == "dict_":
+                field.field_type = "file"
+                field.suffixes = [".json", ".yaml", ".yml"]
+                field.file_types = ["json", "yaml", "yml"]
+            else:
+                field.field_type = "code"
+        return _type
 
-        field.field_type = "int" if key in {"max_value_length"} else field.field_type
+    @staticmethod
+    def replace_default_value(field: TemplateField, value: dict) -> None:
+        """Replaces default value with actual value if 'default' is present in value."""
+        if "default" in value:
+            field.value = value["default"]
 
-        # Show or not field
-        field.show = bool(
-            (field.required and key not in ["input_variables"])
+    @staticmethod
+    def handle_specific_field_values(
+        field: TemplateField, key: str, name: Optional[str] = None
+    ) -> None:
+        """Handles specific field values for certain fields."""
+        if key == "headers":
+            field.value = """{'Authorization':
+            'Bearer <token>'}"""
+        if name == "OpenAI" and key == "model_name":
+            field.options = constants.OPENAI_MODELS
+            field.is_list = True
+        elif name == "ChatOpenAI" and key == "model_name":
+            field.options = constants.CHAT_OPENAI_MODELS
+            field.is_list = True
+        if "api_key" in key and "OpenAI" in str(name):
+            field.display_name = "OpenAI API Key"
+            field.required = False
+            if field.value is None:
+                field.value = ""
+
+    @staticmethod
+    def handle_kwargs_field(field: TemplateField) -> None:
+        """Handles kwargs field by setting certain attributes."""
+        if "kwargs" in field.name.lower():
+            field.advanced = True
+            field.required = False
+            field.show = False
+
+    @staticmethod
+    def handle_api_key_field(field: TemplateField, key: str) -> None:
+        """Handles api key field by setting certain attributes."""
+        if "api" in key.lower() and "key" in key.lower():
+            field.required = False
+            field.advanced = False
+
+    @staticmethod
+    def should_show_field(key: str, required: bool) -> bool:
+        """Determines whether the field should be shown."""
+        return (
+            (required and key not in ["input_variables"])
             or key in FORCE_SHOW_FIELDS
             or "api" in key
             or ("key" in key and "input" not in key and "output" not in key)
         )
 
-        # Add password field
-        field.password = (
+    @staticmethod
+    def should_be_password(key: str, show: bool) -> bool:
+        """Determines whether the field should be a password field."""
+        return (
             any(text in key.lower() for text in {"password", "token", "api", "key"})
-            and field.show
+            and show
         )
 
-        # Add multline
-        field.multiline = key in {
+    @staticmethod
+    def should_be_multiline(key: str) -> bool:
+        """Determines whether the field should be multiline."""
+        return key in {
             "suffix",
             "prefix",
             "template",
@@ -209,43 +302,24 @@ class FrontendNode(BaseModel):
             "description",
         }
 
-        # Replace dict type with str
-        if "dict" in field.field_type.lower():
-            field.field_type = "code"
+    @staticmethod
+    def replace_dict_with_code_or_file(
+        field: TemplateField, _type: str, key: str
+    ) -> str:
+        """Replaces 'dict' type with 'code' or 'file'."""
+        if "dict" in _type.lower():
+            if key == "dict_":
+                field.field_type = "file"
+                field.suffixes = [".json", ".yaml", ".yml"]
+                field.file_types = ["json", "yaml", "yml"]
+            else:
+                field.field_type = "code"
+        return field.field_type
 
-        if key == "dict_":
-            field.field_type = "file"
-            field.suffixes = [".json", ".yaml", ".yml"]
-            field.file_types = ["json", "yaml", "yml"]
-
-        # Replace default value with actual value
+    @staticmethod
+    def set_field_default_value(field: TemplateField, value: dict, key: str) -> None:
+        """Sets the field value with the default value if present."""
         if "default" in value:
             field.value = value["default"]
-
         if key == "headers":
-            field.value = """{'Authorization':
-            'Bearer <token>'}"""
-
-        # Add options to openai
-        if name == "OpenAI" and key == "model_name":
-            field.options = constants.OPENAI_MODELS
-            field.is_list = True
-        elif name == "ChatOpenAI":
-            if key == "model_name":
-                field.options = constants.CHAT_OPENAI_MODELS
-                field.is_list = True
-        if "api_key" in key and "OpenAI" in str(name):
-            field.display_name = "OpenAI API Key"
-            field.required = False
-            if field.value is None:
-                field.value = ""
-
-        if "kwargs" in field.name.lower():
-            field.advanced = True
-            field.required = False
-            field.show = False
-        # If the field.name contains api or api and key, then it might be an api key
-        # other conditions are to make sure that it is not an input or output variable
-        if "api" in key.lower() and "key" in key.lower():
-            field.required = False
-            field.advanced = False
+            field.value = """{'Authorization': 'Bearer <token>'}"""

From bd9d90786a06c374e700ef82c33528d1243dfde1 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Fri, 26 May 2023 22:29:52 -0300
Subject: [PATCH 02/14] =?UTF-8?q?=F0=9F=94=A5=20chore(base.py):=20remove?=
 =?UTF-8?q?=20unused=20process=5Ffield=20method=20from=20TemplateFieldCrea?=
 =?UTF-8?q?tor=20The=20process=5Ffield=20method=20in=20the=20TemplateField?=
 =?UTF-8?q?Creator=20class=20is=20not=20used=20anywhere=20in=20the=20codeb?=
 =?UTF-8?q?ase=20and=20is=20therefore=20removed=20to=20improve=20code=20re?=
 =?UTF-8?q?adability=20and=20maintainability.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/template/base.py | 70 ---------------------------
 1 file changed, 70 deletions(-)

diff --git a/src/backend/langflow/template/base.py b/src/backend/langflow/template/base.py
index c944ec8d1..74e180356 100644
--- a/src/backend/langflow/template/base.py
+++ b/src/backend/langflow/template/base.py
@@ -42,76 +42,6 @@ class TemplateFieldCreator(BaseModel, ABC):
             result["content"] = self.content
         return result
 
-    def process_field(
-        self, key: str, value: Dict[str, Any], name: Optional[str] = None
-    ) -> None:
-        _type = value["type"]
-
-        # Remove 'Optional' wrapper
-        if "Optional" in _type:
-            _type = _type.replace("Optional[", "")[:-1]
-
-        # Check for list type
-        if "List" in _type:
-            _type = _type.replace("List[", "")[:-1]
-            self.is_list = True
-
-        # Replace 'Mapping' with 'dict'
-        if "Mapping" in _type:
-            _type = _type.replace("Mapping", "dict")
-
-        # Change type from str to Tool
-        self.field_type = "Tool" if key in {"allowed_tools"} else self.field_type
-
-        self.field_type = "int" if key in {"max_value_length"} else self.field_type
-
-        # Show or not field
-        self.show = bool(
-            (self.required and key not in ["input_variables"])
-            or key in FORCE_SHOW_FIELDS
-            or "api_key" in key
-        )
-
-        # Add password field
-        self.password = any(
-            text in key.lower() for text in {"password", "token", "api", "key"}
-        )
-
-        # Add multline
-        self.multiline = key in {
-            "suffix",
-            "prefix",
-            "template",
-            "examples",
-            "code",
-            "headers",
-        }
-
-        # Replace dict type with str
-        if "dict" in self.field_type.lower():
-            self.field_type = "code"
-
-        if key == "dict_":
-            self.field_type = "file"
-            self.suffixes = [".json", ".yaml", ".yml"]
-            self.file_types = ["json", "yaml", "yml"]
-
-        # Replace default value with actual value
-        if "default" in value:
-            self.value = value["default"]
-
-        if key == "headers":
-            self.value = """{'Authorization':
-            'Bearer <token>'}"""
-
-        # Add options to openai
-        if name == "OpenAI" and key == "model_name":
-            self.options = constants.OPENAI_MODELS
-            self.is_list = True
-        elif name == "ChatOpenAI" and key == "model_name":
-            self.options = constants.CHAT_OPENAI_MODELS
-            self.is_list = True
-
 
 class TemplateField(TemplateFieldCreator):
     pass

From e10a21f82466ce267bfd9b9e009284782c692da9 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Fri, 26 May 2023 22:34:53 -0300
Subject: [PATCH 03/14] =?UTF-8?q?=F0=9F=90=9B=20fix(langflow):=20add=20typ?=
 =?UTF-8?q?e=20ignore=20to=20node=20variable=20in=20LangChainTypeCreator?=
 =?UTF-8?q?=20=F0=9F=90=9B=20fix(langflow):=20remove=20unused=20imports=20?=
 =?UTF-8?q?in=20base.py=20files=20The=20variable=20node=20in=20LangChainTy?=
 =?UTF-8?q?peCreator=20was=20causing=20a=20type=20error,=20so=20a=20type?=
 =?UTF-8?q?=20ignore=20was=20added=20to=20fix=20the=20issue.=20Additionall?=
 =?UTF-8?q?y,=20unused=20imports=20were=20removed=20from=20both=20base.py?=
 =?UTF-8?q?=20files.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/interface/base.py | 2 +-
 src/backend/langflow/template/base.py  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/backend/langflow/interface/base.py b/src/backend/langflow/interface/base.py
index 663700ffd..d51d81788 100644
--- a/src/backend/langflow/interface/base.py
+++ b/src/backend/langflow/interface/base.py
@@ -42,7 +42,7 @@ class LangChainTypeCreator(BaseModel, ABC):
             # so we should update the result dict
             node = self.frontend_node(name)
             if node is not None:
-                node = node.to_dict()
+                node = node.to_dict()  # type: ignore
                 result[self.type_name].update(node)
 
         return result
diff --git a/src/backend/langflow/template/base.py b/src/backend/langflow/template/base.py
index 74e180356..76b544974 100644
--- a/src/backend/langflow/template/base.py
+++ b/src/backend/langflow/template/base.py
@@ -1,6 +1,6 @@
-from abc import ABC
 import re
-from typing import Any, Callable, Dict, List, Optional, Union
+from abc import ABC
+from typing import Any, Callable, List, Optional, Union
 
 from pydantic import BaseModel
 

From 56da63691508898a9a1a8d2ebf2076ff79b148b5 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Fri, 26 May 2023 23:09:56 -0300
Subject: [PATCH 04/14] =?UTF-8?q?=F0=9F=94=A8=20refactor(nodes.py):=20extr?=
 =?UTF-8?q?act=20common=20field=20attributes=20to=20variables=20and=20set?=
 =?UTF-8?q?=20them=20accordingly=20This=20commit=20extracts=20common=20fie?=
 =?UTF-8?q?ld=20attributes=20to=20variables=20and=20sets=20them=20accordin?=
 =?UTF-8?q?gly.=20The=20basic=5Ffields=20and=20advanced=5Ffields=20variabl?=
 =?UTF-8?q?es=20are=20used=20to=20set=20the=20show=20and=20advanced=20attr?=
 =?UTF-8?q?ibutes=20of=20the=20fields.=20The=20API=20Key=20field=20is=20no?=
 =?UTF-8?q?w=20displayed=20as=20"API=20Key"=20and=20its=20value=20is=20hid?=
 =?UTF-8?q?den.=20The=20location=20field=20now=20has=20a=20default=20value?=
 =?UTF-8?q?=20of=20":memory:"=20and=20its=20placeholder=20is=20also=20set?=
 =?UTF-8?q?=20to=20":memory:".=20The=20password=20attribute=20of=20the=20k?=
 =?UTF-8?q?ey=20fields=20is=20set=20to=20False.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Issue Implement Qdrant #361
---
 poetry.lock                            | 201 ++++++++++++++++++++++---
 pyproject.toml                         |   5 +-
 src/backend/langflow/config.yaml       |   1 +
 src/backend/langflow/template/nodes.py |  39 ++++-
 4 files changed, 215 insertions(+), 31 deletions(-)

diff --git a/poetry.lock b/poetry.lock
index f4b9b18a2..599dc2758 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -1416,7 +1416,7 @@ name = "grpcio"
 version = "1.47.5"
 description = "HTTP/2-based RPC framework"
 category = "main"
-optional = true
+optional = false
 python-versions = ">=3.6"
 files = [
     {file = "grpcio-1.47.5-cp310-cp310-linux_armv7l.whl", hash = "sha256:acc73289d0c44650aa1f21eccfa967f5623b01c3b5e2b4596fe5f9c5bf10956d"},
@@ -1505,6 +1505,67 @@ files = [
 grpcio = ">=1.47.5"
 protobuf = ">=3.12.0"
 
+[[package]]
+name = "grpcio-tools"
+version = "1.47.5"
+description = "Protobuf code generator for gRPC"
+category = "main"
+optional = false
+python-versions = ">=3.6"
+files = [
+    {file = "grpcio-tools-1.47.5.tar.gz", hash = "sha256:62ced60566a4cbcf35c57e887e2e68b4f108b3474ef3ec0022d38cd579345f92"},
+    {file = "grpcio_tools-1.47.5-cp310-cp310-linux_armv7l.whl", hash = "sha256:9f92c561b245a562110bd84d3b64b016c8af5afde39febf1f71553ae56f6e8e4"},
+    {file = "grpcio_tools-1.47.5-cp310-cp310-macosx_12_0_universal2.whl", hash = "sha256:a0a991844a024705ad177cb858d36e3e6b329ea4a78b7f4c597b2817fc2692e7"},
+    {file = "grpcio_tools-1.47.5-cp310-cp310-manylinux_2_17_aarch64.whl", hash = "sha256:935976d5436d4306de052d1e00848fa25abc667e185aaaffcd367915f33a67c7"},
+    {file = "grpcio_tools-1.47.5-cp310-cp310-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:2481dba6a30d415a4756cd88cc380780e3f00bb41d56b8f6547bc3c09c6f4e7f"},
+    {file = "grpcio_tools-1.47.5-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:e62176978faa96b21e4e821e7070b0feed919726ff730c0b3b7e8d106ddb45bf"},
+    {file = "grpcio_tools-1.47.5-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:728eb1f4ef6d380366a2de9940d1f910ece8bf4e44de5ca935cd16d4394e82ff"},
+    {file = "grpcio_tools-1.47.5-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:d58982c747e107f65c7307ec1646cce105b0785088287bf209f545377aeedaf4"},
+    {file = "grpcio_tools-1.47.5-cp310-cp310-win32.whl", hash = "sha256:ea6d8f07b087bc2d579b7727daee2abf38fe5dc475c9e7c4f16b4a2c31895319"},
+    {file = "grpcio_tools-1.47.5-cp310-cp310-win_amd64.whl", hash = "sha256:5e7a4e68072639fa767bde1011f5d83f4461a8e60651ea202af597777ee1ffd7"},
+    {file = "grpcio_tools-1.47.5-cp36-cp36m-linux_armv7l.whl", hash = "sha256:bb1e066fc50ef7503b024924858658692d3e98582a9727b156f2f845da70e11e"},
+    {file = "grpcio_tools-1.47.5-cp36-cp36m-macosx_10_10_universal2.whl", hash = "sha256:7d3e397a27e652ae6579f1f7dc3fc0c771db977ccaaded1fe113e882df425c15"},
+    {file = "grpcio_tools-1.47.5-cp36-cp36m-manylinux_2_17_aarch64.whl", hash = "sha256:b19d8f1e8422826d49fc428acc66b69aa450c70f7090681df32d535188edf524"},
+    {file = "grpcio_tools-1.47.5-cp36-cp36m-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:a0e017bd1022bc981fa1629e757e0d3d4a1991f999fb90ec714c2683fe05b8fa"},
+    {file = "grpcio_tools-1.47.5-cp36-cp36m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:abb56ea33c4a33ee3b707f62339fd579e1a8dbbfeb7665d7ff85ee837cf64794"},
+    {file = "grpcio_tools-1.47.5-cp36-cp36m-musllinux_1_1_i686.whl", hash = "sha256:02882ff2f703b75d343991608b39104f1621508cf407e427a75c1794ed0fac95"},
+    {file = "grpcio_tools-1.47.5-cp36-cp36m-musllinux_1_1_x86_64.whl", hash = "sha256:84395aacae4f8a3358ad648a8bacf6b15bbb8946d8cf73f47dc77cfe1a154d48"},
+    {file = "grpcio_tools-1.47.5-cp36-cp36m-win32.whl", hash = "sha256:de8901c64a1091cc474318e7a013af8c30feba34c7954c29ca8f477baf07db28"},
+    {file = "grpcio_tools-1.47.5-cp36-cp36m-win_amd64.whl", hash = "sha256:37cb5c3d94ba1efef0d17a66e5e69b177fc934389eda8b76b161a6623e45e714"},
+    {file = "grpcio_tools-1.47.5-cp37-cp37m-linux_armv7l.whl", hash = "sha256:5c2d3a35e9341ea9c68afe289054bd8604eda4214e6d916f97b19a316537a296"},
+    {file = "grpcio_tools-1.47.5-cp37-cp37m-macosx_10_10_universal2.whl", hash = "sha256:89733edb89ec28e52dd9cc25e90b78248b6edd265f564726be2a9c4b4ee78479"},
+    {file = "grpcio_tools-1.47.5-cp37-cp37m-manylinux_2_17_aarch64.whl", hash = "sha256:489f41535d779287759942c6cced93c4219ea53dad46ebdc4faca6220e1dba88"},
+    {file = "grpcio_tools-1.47.5-cp37-cp37m-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:072c84f561912400363b81af6bf5424c38fab80f0c9436c0fe19b2e7c2bcf15c"},
+    {file = "grpcio_tools-1.47.5-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c650233420279f943bd1dcf286742aaeb4db7cc5f6554a5e8c16c2e4fa19a28f"},
+    {file = "grpcio_tools-1.47.5-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:dab220aba6b5777b16df5c5b3a30f831cdbc4f493eabdaf9f6585691bad5496a"},
+    {file = "grpcio_tools-1.47.5-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:309ca8508f361895ef2d4f533611272228d2412c8cae754b695673c7c65a2f8b"},
+    {file = "grpcio_tools-1.47.5-cp37-cp37m-win32.whl", hash = "sha256:f8ce5fb65e97866257943cbf6d504195ab55e01ef467988d86322a36041b6de8"},
+    {file = "grpcio_tools-1.47.5-cp37-cp37m-win_amd64.whl", hash = "sha256:b9154a18b0ad2bc4b9ceadedd7b67bb65b500b3427495b4d224a1a835aa55ce6"},
+    {file = "grpcio_tools-1.47.5-cp38-cp38-linux_armv7l.whl", hash = "sha256:aaa4063bc05a18f32ae98e414e2472477468b966b9a1425c41eec160250beff2"},
+    {file = "grpcio_tools-1.47.5-cp38-cp38-macosx_10_10_universal2.whl", hash = "sha256:093da28f8ce3a0eedd5370b9f09f815fb6c01fd663d60734eab5b300b9a305ec"},
+    {file = "grpcio_tools-1.47.5-cp38-cp38-manylinux_2_17_aarch64.whl", hash = "sha256:0771f57585b9070086dec509b02fa2804a9d4c395e95cd7a6cb42d8f4b5683f7"},
+    {file = "grpcio_tools-1.47.5-cp38-cp38-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:68d4cdc674c8596da8e25cf37741aab3f07bdf38731510a92019e5ec57f5fcea"},
+    {file = "grpcio_tools-1.47.5-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:08fdce5549acca9fd7a45084c62e8ab0a1ca1c530bcbfa089625e9523f224023"},
+    {file = "grpcio_tools-1.47.5-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:8431b9ee083bec444ca6d48705b89774f97ba0a75e8c33ef3b9a2dc6ed2aa584"},
+    {file = "grpcio_tools-1.47.5-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:baf37376da0062155d728fb9a1d522ea8f5039ebf774885d269f7772cbc3a2e6"},
+    {file = "grpcio_tools-1.47.5-cp38-cp38-win32.whl", hash = "sha256:b65a59698f938fa59fd756799cd641c3755fb09cb95de008e4d67a9e5b1af6d5"},
+    {file = "grpcio_tools-1.47.5-cp38-cp38-win_amd64.whl", hash = "sha256:17c2b5ce8b3100c8da4ae5070d8d2c2466f174e66d8127fb85ef8a7937a03853"},
+    {file = "grpcio_tools-1.47.5-cp39-cp39-linux_armv7l.whl", hash = "sha256:9070301f079fef76fb0d51b84f393c6738587f3a16a2f0ced303362b0cc0ecf6"},
+    {file = "grpcio_tools-1.47.5-cp39-cp39-macosx_10_10_universal2.whl", hash = "sha256:5bcf01116a4d3bed2faf832f8c5618d1c69473576f3925240e3c5042dfbc115e"},
+    {file = "grpcio_tools-1.47.5-cp39-cp39-manylinux_2_17_aarch64.whl", hash = "sha256:b555b954aa213eac8efe7df507a178c3ab7323df9f501846a1bbccdf81354831"},
+    {file = "grpcio_tools-1.47.5-cp39-cp39-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:7604e08530b3edc688e41aa8af46051478d417b08afdf6fc2eafb5eb90528a26"},
+    {file = "grpcio_tools-1.47.5-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:1d3f80818a560abee8189c4f0b074f45c16309b4596e013cb6ce105a022c5965"},
+    {file = "grpcio_tools-1.47.5-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:c801ebd7fa2304ff85aa15147f134aefe33132d85308c43e46f6a5be78b5a8a8"},
+    {file = "grpcio_tools-1.47.5-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:235adfc22e9c703533573344de1d2394ddd92b27c82eb259bb5fb46f885159b8"},
+    {file = "grpcio_tools-1.47.5-cp39-cp39-win32.whl", hash = "sha256:d659c257cbb48c843931b584d3c3da5473fa17275e0d04af79c9e9fdd6077179"},
+    {file = "grpcio_tools-1.47.5-cp39-cp39-win_amd64.whl", hash = "sha256:9d121c63ff2fddeae2c65f6675eb944f47808a242b647d80b4661b2c5e1e6732"},
+]
+
+[package.dependencies]
+grpcio = ">=1.47.5"
+protobuf = ">=3.12.0,<4.0dev"
+setuptools = "*"
+
 [[package]]
 name = "gunicorn"
 version = "20.1.0"
@@ -1538,6 +1599,22 @@ files = [
     {file = "h11-0.14.0.tar.gz", hash = "sha256:8f19fbbe99e72420ff35c00b27a34cb9937e902a8b810e2c88300c6f0a3b699d"},
 ]
 
+[[package]]
+name = "h2"
+version = "4.1.0"
+description = "HTTP/2 State-Machine based protocol implementation"
+category = "main"
+optional = false
+python-versions = ">=3.6.1"
+files = [
+    {file = "h2-4.1.0-py3-none-any.whl", hash = "sha256:03a46bcf682256c95b5fd9e9a99c1323584c3eec6440d379b9903d709476bc6d"},
+    {file = "h2-4.1.0.tar.gz", hash = "sha256:a83aca08fbe7aacb79fec788c9c0bac936343560ed9ec18b82a13a12c28d2abb"},
+]
+
+[package.dependencies]
+hpack = ">=4.0,<5"
+hyperframe = ">=6.0,<7"
+
 [[package]]
 name = "hnswlib"
 version = "0.7.0"
@@ -1552,11 +1629,23 @@ files = [
 [package.dependencies]
 numpy = "*"
 
+[[package]]
+name = "hpack"
+version = "4.0.0"
+description = "Pure-Python HPACK header compression"
+category = "main"
+optional = false
+python-versions = ">=3.6.1"
+files = [
+    {file = "hpack-4.0.0-py3-none-any.whl", hash = "sha256:84a076fad3dc9a9f8063ccb8041ef100867b1878b25ef0ee63847a5d53818a6c"},
+    {file = "hpack-4.0.0.tar.gz", hash = "sha256:fc41de0c63e687ebffde81187a948221294896f6bdc0ae2312708df339430095"},
+]
+
 [[package]]
 name = "httpcore"
 version = "0.16.3"
 description = "A minimal low-level HTTP client."
-category = "dev"
+category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
@@ -1647,7 +1736,7 @@ test = ["Cython (>=0.29.24,<0.30.0)"]
 name = "httpx"
 version = "0.23.3"
 description = "The next generation HTTP client."
-category = "dev"
+category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
@@ -1657,6 +1746,7 @@ files = [
 
 [package.dependencies]
 certifi = "*"
+h2 = {version = ">=3,<5", optional = true, markers = "extra == \"http2\""}
 httpcore = ">=0.15.0,<0.17.0"
 rfc3986 = {version = ">=1.3,<2", extras = ["idna2008"]}
 sniffio = "*"
@@ -1713,6 +1803,18 @@ files = [
 [package.dependencies]
 pyreadline3 = {version = "*", markers = "sys_platform == \"win32\" and python_version >= \"3.8\""}
 
+[[package]]
+name = "hyperframe"
+version = "6.0.1"
+description = "HTTP/2 framing layer for Python"
+category = "main"
+optional = false
+python-versions = ">=3.6.1"
+files = [
+    {file = "hyperframe-6.0.1-py3-none-any.whl", hash = "sha256:0ec6bafd80d8ad2195c4f03aacba3a8265e57bc4cff261e802bf39970ed02a15"},
+    {file = "hyperframe-6.0.1.tar.gz", hash = "sha256:ae510046231dc8e9ecb1a6586f63d2347bf4c8905914aa84ba585ae85f28a914"},
+]
+
 [[package]]
 name = "idna"
 version = "3.4"
@@ -3441,6 +3543,26 @@ files = [
 dev = ["pre-commit", "tox"]
 testing = ["pytest", "pytest-benchmark"]
 
+[[package]]
+name = "portalocker"
+version = "2.7.0"
+description = "Wraps the portalocker recipe for easy usage"
+category = "main"
+optional = false
+python-versions = ">=3.5"
+files = [
+    {file = "portalocker-2.7.0-py2.py3-none-any.whl", hash = "sha256:a07c5b4f3985c3cf4798369631fb7011adb498e2a46d8440efc75a8f29a0f983"},
+    {file = "portalocker-2.7.0.tar.gz", hash = "sha256:032e81d534a88ec1736d03f780ba073f047a06c478b06e2937486f334e955c51"},
+]
+
+[package.dependencies]
+pywin32 = {version = ">=226", markers = "platform_system == \"Windows\""}
+
+[package.extras]
+docs = ["sphinx (>=1.7.1)"]
+redis = ["redis"]
+tests = ["pytest (>=5.4.1)", "pytest-cov (>=2.8.1)", "pytest-mypy (>=0.8.0)", "pytest-timeout (>=2.1.0)", "redis", "sphinx (>=6.0.0)"]
+
 [[package]]
 name = "posthog"
 version = "3.0.1"
@@ -3497,25 +3619,34 @@ wcwidth = "*"
 
 [[package]]
 name = "protobuf"
-version = "4.23.1"
-description = ""
+version = "3.20.3"
+description = "Protocol Buffers"
 category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "protobuf-4.23.1-cp310-abi3-win32.whl", hash = "sha256:410bcc0a5b279f634d3e16082ce221dfef7c3392fac723500e2e64d1806dd2be"},
-    {file = "protobuf-4.23.1-cp310-abi3-win_amd64.whl", hash = "sha256:32e78beda26d7a101fecf15d7a4a792278a0d26a31bc327ff05564a9d68ab8ee"},
-    {file = "protobuf-4.23.1-cp37-abi3-macosx_10_9_universal2.whl", hash = "sha256:f9510cac91e764e86acd74e2b7f7bc5e6127a7f3fb646d7c8033cfb84fd1176a"},
-    {file = "protobuf-4.23.1-cp37-abi3-manylinux2014_aarch64.whl", hash = "sha256:346990f634272caac1f09efbcfbbacb23098b1f606d172534c6fa2d9758bb436"},
-    {file = "protobuf-4.23.1-cp37-abi3-manylinux2014_x86_64.whl", hash = "sha256:3ce113b3f3362493bddc9069c2163a38f240a9ed685ff83e7bcb756b05e1deb0"},
-    {file = "protobuf-4.23.1-cp37-cp37m-win32.whl", hash = "sha256:2036a3a1e7fc27f973fa0a7888dce712393af644f4695385f117886abc792e39"},
-    {file = "protobuf-4.23.1-cp37-cp37m-win_amd64.whl", hash = "sha256:3b8905eafe4439076e1f58e9d1fa327025fd2777cf90f14083092ae47f77b0aa"},
-    {file = "protobuf-4.23.1-cp38-cp38-win32.whl", hash = "sha256:5b9cd6097e6acae48a68cb29b56bc79339be84eca65b486910bb1e7a30e2b7c1"},
-    {file = "protobuf-4.23.1-cp38-cp38-win_amd64.whl", hash = "sha256:decf119d54e820f298ee6d89c72d6b289ea240c32c521f00433f9dc420595f38"},
-    {file = "protobuf-4.23.1-cp39-cp39-win32.whl", hash = "sha256:91fac0753c3c4951fbb98a93271c43cc7cf3b93cf67747b3e600bb1e5cc14d61"},
-    {file = "protobuf-4.23.1-cp39-cp39-win_amd64.whl", hash = "sha256:ac50be82491369a9ec3710565777e4da87c6d2e20404e0abb1f3a8f10ffd20f0"},
-    {file = "protobuf-4.23.1-py3-none-any.whl", hash = "sha256:65f0ac96ef67d7dd09b19a46aad81a851b6f85f89725577f16de38f2d68ad477"},
-    {file = "protobuf-4.23.1.tar.gz", hash = "sha256:95789b569418a3e32a53f43d7763be3d490a831e9c08042539462b6d972c2d7e"},
+    {file = "protobuf-3.20.3-cp310-cp310-manylinux2014_aarch64.whl", hash = "sha256:f4bd856d702e5b0d96a00ec6b307b0f51c1982c2bf9c0052cf9019e9a544ba99"},
+    {file = "protobuf-3.20.3-cp310-cp310-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:9aae4406ea63d825636cc11ffb34ad3379335803216ee3a856787bcf5ccc751e"},
+    {file = "protobuf-3.20.3-cp310-cp310-win32.whl", hash = "sha256:28545383d61f55b57cf4df63eebd9827754fd2dc25f80c5253f9184235db242c"},
+    {file = "protobuf-3.20.3-cp310-cp310-win_amd64.whl", hash = "sha256:67a3598f0a2dcbc58d02dd1928544e7d88f764b47d4a286202913f0b2801c2e7"},
+    {file = "protobuf-3.20.3-cp36-cp36m-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:899dc660cd599d7352d6f10d83c95df430a38b410c1b66b407a6b29265d66469"},
+    {file = "protobuf-3.20.3-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:e64857f395505ebf3d2569935506ae0dfc4a15cb80dc25261176c784662cdcc4"},
+    {file = "protobuf-3.20.3-cp37-cp37m-manylinux2014_aarch64.whl", hash = "sha256:d9e4432ff660d67d775c66ac42a67cf2453c27cb4d738fc22cb53b5d84c135d4"},
+    {file = "protobuf-3.20.3-cp37-cp37m-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:74480f79a023f90dc6e18febbf7b8bac7508420f2006fabd512013c0c238f454"},
+    {file = "protobuf-3.20.3-cp37-cp37m-win32.whl", hash = "sha256:b6cc7ba72a8850621bfec987cb72623e703b7fe2b9127a161ce61e61558ad905"},
+    {file = "protobuf-3.20.3-cp37-cp37m-win_amd64.whl", hash = "sha256:8c0c984a1b8fef4086329ff8dd19ac77576b384079247c770f29cc8ce3afa06c"},
+    {file = "protobuf-3.20.3-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:de78575669dddf6099a8a0f46a27e82a1783c557ccc38ee620ed8cc96d3be7d7"},
+    {file = "protobuf-3.20.3-cp38-cp38-manylinux2014_aarch64.whl", hash = "sha256:f4c42102bc82a51108e449cbb32b19b180022941c727bac0cfd50170341f16ee"},
+    {file = "protobuf-3.20.3-cp38-cp38-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:44246bab5dd4b7fbd3c0c80b6f16686808fab0e4aca819ade6e8d294a29c7050"},
+    {file = "protobuf-3.20.3-cp38-cp38-win32.whl", hash = "sha256:c02ce36ec760252242a33967d51c289fd0e1c0e6e5cc9397e2279177716add86"},
+    {file = "protobuf-3.20.3-cp38-cp38-win_amd64.whl", hash = "sha256:447d43819997825d4e71bf5769d869b968ce96848b6479397e29fc24c4a5dfe9"},
+    {file = "protobuf-3.20.3-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:398a9e0c3eaceb34ec1aee71894ca3299605fa8e761544934378bbc6c97de23b"},
+    {file = "protobuf-3.20.3-cp39-cp39-manylinux2014_aarch64.whl", hash = "sha256:bf01b5720be110540be4286e791db73f84a2b721072a3711efff6c324cdf074b"},
+    {file = "protobuf-3.20.3-cp39-cp39-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:daa564862dd0d39c00f8086f88700fdbe8bc717e993a21e90711acfed02f2402"},
+    {file = "protobuf-3.20.3-cp39-cp39-win32.whl", hash = "sha256:819559cafa1a373b7096a482b504ae8a857c89593cf3a25af743ac9ecbd23480"},
+    {file = "protobuf-3.20.3-cp39-cp39-win_amd64.whl", hash = "sha256:03038ac1cfbc41aa21f6afcbcd357281d7521b4157926f30ebecc8d4ea59dcb7"},
+    {file = "protobuf-3.20.3-py2.py3-none-any.whl", hash = "sha256:a7ca6d488aa8ff7f329d4c545b2dbad8ac31464f1d8b1c87ad1346717731e4db"},
+    {file = "protobuf-3.20.3.tar.gz", hash = "sha256:2e3427429c9cffebf259491be0af70189607f365c2f41c7c3764af6f337105f2"},
 ]
 
 [[package]]
@@ -4191,6 +4322,28 @@ files = [
 [package.dependencies]
 cffi = {version = "*", markers = "implementation_name == \"pypy\""}
 
+[[package]]
+name = "qdrant-client"
+version = "1.2.0"
+description = "Client library for the Qdrant vector search engine"
+category = "main"
+optional = false
+python-versions = ">=3.7,<3.12"
+files = [
+    {file = "qdrant_client-1.2.0-py3-none-any.whl", hash = "sha256:e84e43bee529e27990aa5bad487bab4204eb20bda0414916498d8bb80ce601e6"},
+    {file = "qdrant_client-1.2.0.tar.gz", hash = "sha256:5a3d9f89adce392a2ba619cfd5b9f7afb13e5146c49e88ed80469993f0fadbf0"},
+]
+
+[package.dependencies]
+grpcio = ">=1.41.0"
+grpcio-tools = ">=1.41.0"
+httpx = {version = ">=0.14.0", extras = ["http2"]}
+numpy = {version = ">=1.21", markers = "python_version >= \"3.8\""}
+portalocker = ">=2.7.0,<3.0.0"
+pydantic = ">=1.8,<2.0"
+typing-extensions = ">=4.0.0,<4.6.0"
+urllib3 = ">=1.26.14,<2.0.0"
+
 [[package]]
 name = "regex"
 version = "2023.5.5"
@@ -4315,7 +4468,7 @@ use-chardet-on-py3 = ["chardet (>=3.0.2,<6)"]
 name = "rfc3986"
 version = "1.5.0"
 description = "Validating URI References per RFC 3986"
-category = "dev"
+category = "main"
 optional = false
 python-versions = "*"
 files = [
@@ -4880,14 +5033,14 @@ files = [
 
 [[package]]
 name = "typing-extensions"
-version = "4.6.0"
+version = "4.5.0"
 description = "Backported and Experimental Type Hints for Python 3.7+"
 category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "typing_extensions-4.6.0-py3-none-any.whl", hash = "sha256:6ad00b63f849b7dcc313b70b6b304ed67b2b2963b3098a33efe18056b1a9a223"},
-    {file = "typing_extensions-4.6.0.tar.gz", hash = "sha256:ff6b238610c747e44c268aa4bb23c8c735d665a63726df3f9431ce707f2aa768"},
+    {file = "typing_extensions-4.5.0-py3-none-any.whl", hash = "sha256:fb33085c39dd998ac16d1431ebc293a8b3eedd00fd4a32de0ff79002c19511b4"},
+    {file = "typing_extensions-4.5.0.tar.gz", hash = "sha256:5cb5f4a79139d699607b3ef622a1dedafa84e115ab0024e0d9c044a9479ca7cb"},
 ]
 
 [[package]]
@@ -5485,5 +5638,5 @@ deploy = ["langchain-serve"]
 
 [metadata]
 lock-version = "2.0"
-python-versions = "^3.9"
-content-hash = "71a272bd7d914de11a801ecdfeaffe7d7ea63340852341c84eb1889e3e19f987"
+python-versions = ">=3.9,<3.12"
+content-hash = "0c59585416545c88e13ea3ebffc62a9f6dc5ecc21747f68c53e6ded0ea6ebfec"
diff --git a/pyproject.toml b/pyproject.toml
index 82f09b294..3e1e5a85c 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -21,7 +21,7 @@ include = ["src/backend/langflow/*", "src/backend/langflow/**/*"]
 langflow = "langflow.__main__:main"
 
 [tool.poetry.dependencies]
-python = "^3.9"
+python = ">=3.9,<3.12"
 fastapi = "^0.92.0"
 uvicorn = "^0.20.0"
 beautifulsoup4 = "^4.11.2"
@@ -47,10 +47,11 @@ fake-useragent = "^1.1.3"
 docstring-parser = "^0.15"
 psycopg2-binary = "^2.9.6"
 pyarrow = "^11.0.0"
-websockets = "^11.0.2"
 tiktoken = "^0.3.3"
 wikipedia = "^1.4.0"
 langchain-serve = { version = "^0.0.33", optional = true }
+qdrant-client = "^1.2.0"
+websockets = "^11.0.3"
 
 [tool.poetry.group.dev.dependencies]
 black = "^23.1.0"
diff --git a/src/backend/langflow/config.yaml b/src/backend/langflow/config.yaml
index 4ce6a28fc..940874846 100644
--- a/src/backend/langflow/config.yaml
+++ b/src/backend/langflow/config.yaml
@@ -108,6 +108,7 @@ utilities:
   - SQLDatabase
 vectorstores:
   - Chroma
+  - Qdrant
 wrappers:
   - RequestsWrapper # Wait more tests
   # - ChatPromptTemplate
diff --git a/src/backend/langflow/template/nodes.py b/src/backend/langflow/template/nodes.py
index f01a99144..eb6730457 100644
--- a/src/backend/langflow/template/nodes.py
+++ b/src/backend/langflow/template/nodes.py
@@ -634,6 +634,26 @@ class VectorStoreFrontendNode(FrontendNode):
     @staticmethod
     def format_field(field: TemplateField, name: Optional[str] = None) -> None:
         FrontendNode.format_field(field, name)
+        # Define common field attributes
+        basic_fields = ["work_dir", "collection_name", "api_key", "location"]
+        advanced_fields = [
+            "n_dim",
+            "key",
+            "prefix",
+            "distance_func",
+            "content_payload_key",
+            "metadata_payload_key",
+            "timeout",
+            "host",
+            "path",
+            "url",
+            "port",
+            "https",
+            "prefer_grpc",
+            "grpc_port",
+        ]
+
+        # Check and set field attributes
         if field.name == "texts":
             field.name = "documents"
             field.field_type = "TextSplitter"
@@ -642,7 +662,7 @@ class VectorStoreFrontendNode(FrontendNode):
             field.show = True
             field.advanced = False
 
-        if "embedding" in field.name:
+        elif "embedding" in field.name:
             # for backwards compatibility
             field.name = "embedding"
             field.required = True
@@ -651,9 +671,18 @@ class VectorStoreFrontendNode(FrontendNode):
             field.display_name = "Embedding"
             field.field_type = "Embeddings"
 
-        elif field.name == "n_dim":
-            field.show = True
-            field.advanced = True
-        elif field.name == "work_dir":
+        elif field.name in basic_fields:
             field.show = True
             field.advanced = False
+            if field.name == "api_key":
+                field.display_name = "API Key"
+                field.password = True
+            elif field.name == "location":
+                field.value = ":memory:"
+                field.placeholder = ":memory:"
+
+        elif field.name in advanced_fields:
+            field.show = True
+            field.advanced = True
+            if "key" in field.name:
+                field.password = False

From 194e5814171f0e220f0131d01ea0b2d103f05493 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Sat, 27 May 2023 09:40:55 -0300
Subject: [PATCH 05/14] =?UTF-8?q?=F0=9F=9A=80=20feat(pyproject.toml):=20ad?=
 =?UTF-8?q?d=20weaviate-client=20dependency=20to=20enable=20integration=20?=
 =?UTF-8?q?with=20Weaviate=20The=20weaviate-client=20package=20has=20been?=
 =?UTF-8?q?=20added=20as=20a=20dependency=20to=20the=20project=20to=20enab?=
 =?UTF-8?q?le=20integration=20with=20Weaviate.=20This=20will=20allow=20the?=
 =?UTF-8?q?=20application=20to=20communicate=20with=20Weaviate=20and=20per?=
 =?UTF-8?q?form=20operations=20such=20as=20adding=20and=20retrieving=20dat?=
 =?UTF-8?q?a.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 poetry.lock    | 109 +++++++++++++++++++++++++++++++++++++++++++++----
 pyproject.toml |   1 +
 2 files changed, 103 insertions(+), 7 deletions(-)

diff --git a/poetry.lock b/poetry.lock
index 599dc2758..a0075d592 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -257,6 +257,21 @@ docs = ["furo", "myst-parser", "sphinx", "sphinx-notfound-page", "sphinxcontrib-
 tests = ["attrs[tests-no-zope]", "zope-interface"]
 tests-no-zope = ["cloudpickle", "hypothesis", "mypy (>=1.1.1)", "pympler", "pytest (>=4.3.0)", "pytest-mypy-plugins", "pytest-xdist[psutil]"]
 
+[[package]]
+name = "authlib"
+version = "1.2.0"
+description = "The ultimate Python library in building OAuth and OpenID Connect servers and clients."
+category = "main"
+optional = false
+python-versions = "*"
+files = [
+    {file = "Authlib-1.2.0-py2.py3-none-any.whl", hash = "sha256:4ddf4fd6cfa75c9a460b361d4bd9dac71ffda0be879dbe4292a02e92349ad55a"},
+    {file = "Authlib-1.2.0.tar.gz", hash = "sha256:4fa3e80883a5915ef9f5bc28630564bc4ed5b5af39812a3ff130ec76bd631e9d"},
+]
+
+[package.dependencies]
+cryptography = ">=3.2"
+
 [[package]]
 name = "backcall"
 version = "0.2.0"
@@ -799,6 +814,48 @@ tomli = {version = "*", optional = true, markers = "python_full_version <= \"3.1
 [package.extras]
 toml = ["tomli"]
 
+[[package]]
+name = "cryptography"
+version = "40.0.2"
+description = "cryptography is a package which provides cryptographic recipes and primitives to Python developers."
+category = "main"
+optional = false
+python-versions = ">=3.6"
+files = [
+    {file = "cryptography-40.0.2-cp36-abi3-macosx_10_12_universal2.whl", hash = "sha256:8f79b5ff5ad9d3218afb1e7e20ea74da5f76943ee5edb7f76e56ec5161ec782b"},
+    {file = "cryptography-40.0.2-cp36-abi3-macosx_10_12_x86_64.whl", hash = "sha256:05dc219433b14046c476f6f09d7636b92a1c3e5808b9a6536adf4932b3b2c440"},
+    {file = "cryptography-40.0.2-cp36-abi3-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4df2af28d7bedc84fe45bd49bc35d710aede676e2a4cb7fc6d103a2adc8afe4d"},
+    {file = "cryptography-40.0.2-cp36-abi3-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:0dcca15d3a19a66e63662dc8d30f8036b07be851a8680eda92d079868f106288"},
+    {file = "cryptography-40.0.2-cp36-abi3-manylinux_2_28_aarch64.whl", hash = "sha256:a04386fb7bc85fab9cd51b6308633a3c271e3d0d3eae917eebab2fac6219b6d2"},
+    {file = "cryptography-40.0.2-cp36-abi3-manylinux_2_28_x86_64.whl", hash = "sha256:adc0d980fd2760c9e5de537c28935cc32b9353baaf28e0814df417619c6c8c3b"},
+    {file = "cryptography-40.0.2-cp36-abi3-musllinux_1_1_aarch64.whl", hash = "sha256:d5a1bd0e9e2031465761dfa920c16b0065ad77321d8a8c1f5ee331021fda65e9"},
+    {file = "cryptography-40.0.2-cp36-abi3-musllinux_1_1_x86_64.whl", hash = "sha256:a95f4802d49faa6a674242e25bfeea6fc2acd915b5e5e29ac90a32b1139cae1c"},
+    {file = "cryptography-40.0.2-cp36-abi3-win32.whl", hash = "sha256:aecbb1592b0188e030cb01f82d12556cf72e218280f621deed7d806afd2113f9"},
+    {file = "cryptography-40.0.2-cp36-abi3-win_amd64.whl", hash = "sha256:b12794f01d4cacfbd3177b9042198f3af1c856eedd0a98f10f141385c809a14b"},
+    {file = "cryptography-40.0.2-pp38-pypy38_pp73-macosx_10_12_x86_64.whl", hash = "sha256:142bae539ef28a1c76794cca7f49729e7c54423f615cfd9b0b1fa90ebe53244b"},
+    {file = "cryptography-40.0.2-pp38-pypy38_pp73-manylinux_2_28_aarch64.whl", hash = "sha256:956ba8701b4ffe91ba59665ed170a2ebbdc6fc0e40de5f6059195d9f2b33ca0e"},
+    {file = "cryptography-40.0.2-pp38-pypy38_pp73-manylinux_2_28_x86_64.whl", hash = "sha256:4f01c9863da784558165f5d4d916093737a75203a5c5286fde60e503e4276c7a"},
+    {file = "cryptography-40.0.2-pp38-pypy38_pp73-win_amd64.whl", hash = "sha256:3daf9b114213f8ba460b829a02896789751626a2a4e7a43a28ee77c04b5e4958"},
+    {file = "cryptography-40.0.2-pp39-pypy39_pp73-macosx_10_12_x86_64.whl", hash = "sha256:48f388d0d153350f378c7f7b41497a54ff1513c816bcbbcafe5b829e59b9ce5b"},
+    {file = "cryptography-40.0.2-pp39-pypy39_pp73-manylinux_2_28_aarch64.whl", hash = "sha256:c0764e72b36a3dc065c155e5b22f93df465da9c39af65516fe04ed3c68c92636"},
+    {file = "cryptography-40.0.2-pp39-pypy39_pp73-manylinux_2_28_x86_64.whl", hash = "sha256:cbaba590180cba88cb99a5f76f90808a624f18b169b90a4abb40c1fd8c19420e"},
+    {file = "cryptography-40.0.2-pp39-pypy39_pp73-win_amd64.whl", hash = "sha256:7a38250f433cd41df7fcb763caa3ee9362777fdb4dc642b9a349721d2bf47404"},
+    {file = "cryptography-40.0.2.tar.gz", hash = "sha256:c33c0d32b8594fa647d2e01dbccc303478e16fdd7cf98652d5b3ed11aa5e5c99"},
+]
+
+[package.dependencies]
+cffi = ">=1.12"
+
+[package.extras]
+docs = ["sphinx (>=5.3.0)", "sphinx-rtd-theme (>=1.1.1)"]
+docstest = ["pyenchant (>=1.6.11)", "sphinxcontrib-spelling (>=4.0.1)", "twine (>=1.12.0)"]
+pep8test = ["black", "check-manifest", "mypy", "ruff"]
+sdist = ["setuptools-rust (>=0.11.4)"]
+ssh = ["bcrypt (>=3.1.5)"]
+test = ["iso8601", "pretend", "pytest (>=6.2.0)", "pytest-benchmark", "pytest-cov", "pytest-shard (>=0.1.2)", "pytest-subtests", "pytest-xdist"]
+test-randomorder = ["pytest-randomly"]
+tox = ["tox"]
+
 [[package]]
 name = "dataclasses-json"
 version = "0.5.7"
@@ -851,7 +908,7 @@ files = [
 name = "decorator"
 version = "5.1.1"
 description = "Decorators for Humans"
-category = "dev"
+category = "main"
 optional = false
 python-versions = ">=3.5"
 files = [
@@ -4444,21 +4501,21 @@ files = [
 
 [[package]]
 name = "requests"
-version = "2.31.0"
+version = "2.28.2"
 description = "Python HTTP for Humans."
 category = "main"
 optional = false
-python-versions = ">=3.7"
+python-versions = ">=3.7, <4"
 files = [
-    {file = "requests-2.31.0-py3-none-any.whl", hash = "sha256:58cd2187c01e70e6e26505bca751777aa9f2ee0b7f4300988b709f44e013003f"},
-    {file = "requests-2.31.0.tar.gz", hash = "sha256:942c5a758f98d790eaed1a29cb6eefc7ffb0d1cf7af05c3d2791656dbd6ad1e1"},
+    {file = "requests-2.28.2-py3-none-any.whl", hash = "sha256:64299f4909223da747622c030b781c0d7811e359c37124b4bd368fb8c6518baa"},
+    {file = "requests-2.28.2.tar.gz", hash = "sha256:98b1b2782e3c6c4904938b84c0eb932721069dfdb9134313beff7c83c2df24bf"},
 ]
 
 [package.dependencies]
 certifi = ">=2017.4.17"
 charset-normalizer = ">=2,<4"
 idna = ">=2.5,<4"
-urllib3 = ">=1.21.1,<3"
+urllib3 = ">=1.21.1,<1.27"
 
 [package.extras]
 socks = ["PySocks (>=1.5.6,!=1.5.7)"]
@@ -5214,6 +5271,23 @@ dev = ["Cython (>=0.29.32,<0.30.0)", "Sphinx (>=4.1.2,<4.2.0)", "aiohttp", "flak
 docs = ["Sphinx (>=4.1.2,<4.2.0)", "sphinx-rtd-theme (>=0.5.2,<0.6.0)", "sphinxcontrib-asyncio (>=0.3.0,<0.4.0)"]
 test = ["Cython (>=0.29.32,<0.30.0)", "aiohttp", "flake8 (>=3.9.2,<3.10.0)", "mypy (>=0.800)", "psutil", "pyOpenSSL (>=22.0.0,<22.1.0)", "pycodestyle (>=2.7.0,<2.8.0)"]
 
+[[package]]
+name = "validators"
+version = "0.20.0"
+description = "Python Data Validation for Humans™."
+category = "main"
+optional = false
+python-versions = ">=3.4"
+files = [
+    {file = "validators-0.20.0.tar.gz", hash = "sha256:24148ce4e64100a2d5e267233e23e7afeb55316b47d30faae7eb6e7292bc226a"},
+]
+
+[package.dependencies]
+decorator = ">=3.4.0"
+
+[package.extras]
+test = ["flake8 (>=2.4.0)", "isort (>=4.2.2)", "pytest (>=2.2.3)"]
+
 [[package]]
 name = "watchfiles"
 version = "0.19.0"
@@ -5261,6 +5335,27 @@ files = [
     {file = "wcwidth-0.2.6.tar.gz", hash = "sha256:a5220780a404dbe3353789870978e472cfe477761f06ee55077256e509b156d0"},
 ]
 
+[[package]]
+name = "weaviate-client"
+version = "3.19.2"
+description = "A python native weaviate client"
+category = "main"
+optional = false
+python-versions = ">=3.8"
+files = [
+    {file = "weaviate-client-3.19.2.tar.gz", hash = "sha256:662cb2a5f6dacc2c9cdf6db2df70e9a3ac9d18b404d0c2ff971d9cb85d84ebed"},
+    {file = "weaviate_client-3.19.2-py3-none-any.whl", hash = "sha256:f4bbfb868907089f57fdfb836c4d00cf8a6fc5e296fa08879681ba1d2273cd40"},
+]
+
+[package.dependencies]
+authlib = ">=1.1.0"
+requests = ">=2.28.0,<2.29.0"
+tqdm = ">=4.59.0,<5.0.0"
+validators = ">=0.18.2,<=0.21.0"
+
+[package.extras]
+grpc = ["grpcio", "grpcio-tools"]
+
 [[package]]
 name = "websocket-client"
 version = "1.5.2"
@@ -5639,4 +5734,4 @@ deploy = ["langchain-serve"]
 [metadata]
 lock-version = "2.0"
 python-versions = ">=3.9,<3.12"
-content-hash = "0c59585416545c88e13ea3ebffc62a9f6dc5ecc21747f68c53e6ded0ea6ebfec"
+content-hash = "ba932035d31d7784a0df6690b2078f1f4a0f37f63b87e7f211c738807b46b313"
diff --git a/pyproject.toml b/pyproject.toml
index 3e1e5a85c..21dbdeb5b 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -52,6 +52,7 @@ wikipedia = "^1.4.0"
 langchain-serve = { version = "^0.0.33", optional = true }
 qdrant-client = "^1.2.0"
 websockets = "^11.0.3"
+weaviate-client = "^3.19.2"
 
 [tool.poetry.group.dev.dependencies]
 black = "^23.1.0"

From e3983da487d981743008b7032922a63f1406ff70 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Sat, 27 May 2023 09:41:35 -0300
Subject: [PATCH 06/14] =?UTF-8?q?=F0=9F=94=8D=20chore(.gitignore):=20add?=
 =?UTF-8?q?=20qdrant=5Fstorage=20to=20ignore=20list=20=F0=9F=86=95=20feat(?=
 =?UTF-8?q?.vscode/launch.json):=20add=20launch=20configuration=20for=20Fa?=
 =?UTF-8?q?stAPI=20app=20The=20qdrant=5Fstorage=20directory=20is=20now=20a?=
 =?UTF-8?q?dded=20to=20the=20ignore=20list=20to=20prevent=20it=20from=20be?=
 =?UTF-8?q?ing=20tracked=20by=20git.=20A=20new=20launch=20configuration=20?=
 =?UTF-8?q?for=20FastAPI=20app=20is=20added=20to=20the=20.vscode/launch.js?=
 =?UTF-8?q?on=20file.=20This=20configuration=20allows=20for=20debugging=20?=
 =?UTF-8?q?the=20app=20with=20uvicorn=20and=20sets=20the=20port=20to=20786?=
 =?UTF-8?q?0,=20reloads=20the=20app=20on=20changes,=20and=20sets=20the=20l?=
 =?UTF-8?q?og=20level=20to=20debug.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore          |  3 ++-
 .vscode/launch.json | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 .vscode/launch.json

diff --git a/.gitignore b/.gitignore
index c2ffb8276..cb7805a70 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,12 +5,13 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
+qdrant_storage
 
 # Mac
 .DS_Store
 
 # VSCode
-.vscode
+.vscode/settings.json
 .chroma
 .ruff_cache
 
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 000000000..b0a48cdc6
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,35 @@
+{
+  "configurations": [
+    {
+      "name": "Python: FastAPI",
+      "type": "python",
+      "request": "launch",
+      "module": "uvicorn",
+      "args": [
+        "langflow.main:app",
+        "--port",
+        "7860",
+        "--reload",
+        "--log-level",
+        "debug"
+      ],
+      "jinja": true,
+      "justMyCode": false
+    },
+    {
+      "name": "Python: Remote Attach",
+      "type": "python",
+      "request": "attach",
+      "justMyCode": true,
+      "connect": {
+        "port": 5678
+      },
+      "pathMappings": [
+        {
+          "localRoot": "${workspaceFolder}",
+          "remoteRoot": "."
+        }
+      ]
+    }
+  ]
+}

From 9cb52994add3f9bcf38c0e1148bc2ec7c0273242 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Sat, 27 May 2023 11:03:06 -0300
Subject: [PATCH 07/14] =?UTF-8?q?=F0=9F=94=A7=20chore(langflow):=20add=20W?=
 =?UTF-8?q?eaviate=20to=20vectorstores=20and=20add=20TODO=20comment=20to?=
 =?UTF-8?q?=20fix=20Weaviate=20integration=20Weaviate=20has=20been=20added?=
 =?UTF-8?q?=20to=20the=20list=20of=20vectorstores=20in=20the=20config.yaml?=
 =?UTF-8?q?=20file.=20A=20TODO=20comment=20has=20been=20added=20to=20the?=
 =?UTF-8?q?=20nodes.py=20file=20to=20fix=20the=20integration=20with=20Weav?=
 =?UTF-8?q?iate.=20Weaviate=20requires=20the=20weaviate=5Furl=20to=20be=20?=
 =?UTF-8?q?passed=20as=20it=20is=20not=20part=20of=20the=20class=20or=20fr?=
 =?UTF-8?q?om=5Ftexts=20method.=20The=20add=5Fextra=5Ffields=20method=20ne?=
 =?UTF-8?q?eds=20to=20be=20fixed=20to=20include=20the=20weaviate=5Furl=20p?=
 =?UTF-8?q?arameter.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/config.yaml       | 1 +
 src/backend/langflow/template/nodes.py | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/src/backend/langflow/config.yaml b/src/backend/langflow/config.yaml
index 940874846..149e7bf80 100644
--- a/src/backend/langflow/config.yaml
+++ b/src/backend/langflow/config.yaml
@@ -109,6 +109,7 @@ utilities:
 vectorstores:
   - Chroma
   - Qdrant
+  - Weaviate
 wrappers:
   - RequestsWrapper # Wait more tests
   # - ChatPromptTemplate
diff --git a/src/backend/langflow/template/nodes.py b/src/backend/langflow/template/nodes.py
index eb6730457..d19cae612 100644
--- a/src/backend/langflow/template/nodes.py
+++ b/src/backend/langflow/template/nodes.py
@@ -686,3 +686,6 @@ class VectorStoreFrontendNode(FrontendNode):
             field.advanced = True
             if "key" in field.name:
                 field.password = False
+
+        # TODO: Weaviate requires weaviate_url to be passed as it is not part of
+        # the class or from_texts method. We need the add_extra_fields to fix this

From de0a5810311ececb0425b9af293dd3d49e5be0a1 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Sat, 27 May 2023 12:14:50 -0300
Subject: [PATCH 08/14] =?UTF-8?q?=F0=9F=94=A5=20refactor(nodes.py):=20remo?=
 =?UTF-8?q?ve=20unused=20import=20of=20deepcopy=20=F0=9F=94=A5=20refactor(?=
 =?UTF-8?q?custom=5Flists.py):=20remove=20unused=20import=20of=20vectorsto?=
 =?UTF-8?q?res=20The=20import=20of=20deepcopy=20in=20nodes.py=20and=20vect?=
 =?UTF-8?q?orstores=20in=20custom=5Flists.py=20are=20not=20used=20in=20the?=
 =?UTF-8?q?=20codebase=20and=20can=20be=20safely=20removed=20to=20improve?=
 =?UTF-8?q?=20code=20readability=20and=20maintainability.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 poetry.lock                                   | 426 +++++++++---------
 src/backend/langflow/graph/nodes.py           |   1 -
 .../langflow/interface/custom_lists.py        |   1 -
 3 files changed, 216 insertions(+), 212 deletions(-)

diff --git a/poetry.lock b/poetry.lock
index a18968f33..91d7e2389 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -150,24 +150,25 @@ files = [
 
 [[package]]
 name = "anyio"
-version = "3.6.2"
+version = "3.7.0"
 description = "High level compatibility layer for multiple asynchronous event loop implementations"
 category = "main"
 optional = false
-python-versions = ">=3.6.2"
+python-versions = ">=3.7"
 files = [
-    {file = "anyio-3.6.2-py3-none-any.whl", hash = "sha256:fbbe32bd270d2a2ef3ed1c5d45041250284e31fc0a4df4a5a6071842051a51e3"},
-    {file = "anyio-3.6.2.tar.gz", hash = "sha256:25ea0d673ae30af41a0c442f81cf3b38c7e79fdc7b60335a4c14e05eb0947421"},
+    {file = "anyio-3.7.0-py3-none-any.whl", hash = "sha256:eddca883c4175f14df8aedce21054bfca3adb70ffe76a9f607aef9d7fa2ea7f0"},
+    {file = "anyio-3.7.0.tar.gz", hash = "sha256:275d9973793619a5374e1c89a4f4ad3f4b0a5510a2b5b939444bee8f4c4d37ce"},
 ]
 
 [package.dependencies]
+exceptiongroup = {version = "*", markers = "python_version < \"3.11\""}
 idna = ">=2.8"
 sniffio = ">=1.1"
 
 [package.extras]
-doc = ["packaging", "sphinx-autodoc-typehints (>=1.2.0)", "sphinx-rtd-theme"]
-test = ["contextlib2", "coverage[toml] (>=4.5)", "hypothesis (>=4.0)", "mock (>=4)", "pytest (>=7.0)", "pytest-mock (>=3.6.1)", "trustme", "uvloop (<0.15)", "uvloop (>=0.15)"]
-trio = ["trio (>=0.16,<0.22)"]
+doc = ["Sphinx (>=6.1.0)", "packaging", "sphinx-autodoc-typehints (>=1.2.0)", "sphinx-rtd-theme", "sphinxcontrib-jquery"]
+test = ["anyio[trio]", "coverage[toml] (>=4.5)", "hypothesis (>=4.0)", "mock (>=4)", "psutil (>=5.9)", "pytest (>=7.0)", "pytest-mock (>=3.6.1)", "trustme", "uvloop (>=0.17)"]
+trio = ["trio (<0.22)"]
 
 [[package]]
 name = "appnope"
@@ -183,16 +184,32 @@ files = [
 
 [[package]]
 name = "argilla"
-version = "0.0.1"
-description = ""
+version = "1.3.2"
+description = "Open-source tool for exploring, labeling, and monitoring data for NLP projects."
 category = "main"
 optional = false
-python-versions = "*"
+python-versions = ">=3.7"
 files = [
-    {file = "argilla-0.0.1-py3-none-any.whl", hash = "sha256:8bdc3c505bcfb47ba4b91f5658034eae53bf7d4f9317980397605c0c55817396"},
-    {file = "argilla-0.0.1.tar.gz", hash = "sha256:5017854754e89f573b31af25b25b803f51cea9ca1fa0bcf00505dee1f45cf7c9"},
+    {file = "argilla-1.3.2-py3-none-any.whl", hash = "sha256:2471d750f79bd1ac17c56be420781299a6b921405b473a272c402b71fddf45bf"},
+    {file = "argilla-1.3.2.tar.gz", hash = "sha256:bbf5a12acb7a8d8cd91852c86c432684464ad095bba6a9d8ab95ab56a5e06255"},
 ]
 
+[package.dependencies]
+backoff = "*"
+deprecated = ">=1.2.0,<1.3.0"
+httpx = ">=0.15,<0.24"
+monotonic = "*"
+numpy = "<1.24.0"
+packaging = ">=20.0"
+pandas = ">=1.0.0,<2.0.0"
+pydantic = ">=1.7.1"
+tqdm = ">=4.27.0"
+wrapt = ">=1.13,<1.15"
+
+[package.extras]
+listeners = ["prodict (>=0.8.0,<0.9.0)", "schedule (>=1.1.0,<1.2.0)"]
+server = ["Deprecated (>=1.2.0,<1.3.0)", "PyYAML (>=5.4.1,<6.1.0)", "aiofiles (>=0.6,<22.2)", "brotli-asgi (>=1.1,<1.3)", "elasticsearch (>=7.11.0,<8.6.0)", "fastapi (>=0.75,<0.89)", "luqum (>=0.11,<0.13)", "opensearch-py (>=1.0,<2.1)", "passlib[bcrypt] (>=1.7.4,<1.8.0)", "psutil (>=5.8,<5.10)", "python-jose[cryptography] (>=3.2,<3.4)", "python-multipart (>=0.0.5,<0.1.0)", "scikit-learn (>=0.24.2)", "segment-analytics-python (==2.2.0)", "smart-open", "uvicorn[standard] (>=0.15.0,<0.21.0)"]
+
 [[package]]
 name = "asgiref"
 version = "3.7.1"
@@ -924,7 +941,7 @@ name = "deprecated"
 version = "1.2.13"
 description = "Python @deprecated decorator to deprecate old python classes, functions or methods."
 category = "main"
-optional = true
+optional = false
 python-versions = ">=2.7, !=3.0.*, !=3.1.*, !=3.2.*, !=3.3.*"
 files = [
     {file = "Deprecated-1.2.13-py2.py3-none-any.whl", hash = "sha256:64756e3e14c8c5eea9795d93c524551432a0be75629f8f29e67ab8caf076c76d"},
@@ -1105,7 +1122,7 @@ files = [
 name = "exceptiongroup"
 version = "1.1.1"
 description = "Backport of PEP 654 (exception groups)"
-category = "dev"
+category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
@@ -1186,14 +1203,14 @@ testing = ["covdefaults (>=2.3)", "coverage (>=7.2.3)", "diff-cover (>=7.5)", "p
 
 [[package]]
 name = "flatbuffers"
-version = "23.5.9"
+version = "23.5.26"
 description = "The FlatBuffers serialization format for Python"
 category = "main"
 optional = false
 python-versions = "*"
 files = [
-    {file = "flatbuffers-23.5.9-py2.py3-none-any.whl", hash = "sha256:a02eb8c2d61cba153cd211937de8f8f7764b6a7510971b2c4684ed8b02e6e571"},
-    {file = "flatbuffers-23.5.9.tar.gz", hash = "sha256:93a506b6ab771c79ce816e7b35a93ed08ec5b4c9edb811101a22c44a4152f018"},
+    {file = "flatbuffers-23.5.26-py2.py3-none-any.whl", hash = "sha256:c0ff356da363087b915fde4b8b45bdda73432fc17cddb3c8157472eab1422ad1"},
+    {file = "flatbuffers-23.5.26.tar.gz", hash = "sha256:9ea1144cac05ce5d86e2859f431c6cd5e66cd9c78c558317c7955fb8d4c78d89"},
 ]
 
 [[package]]
@@ -1324,20 +1341,20 @@ uritemplate = ">=3.0.1,<5"
 
 [[package]]
 name = "google-auth"
-version = "2.18.1"
+version = "2.19.0"
 description = "Google Authentication Library"
 category = "main"
 optional = false
-python-versions = ">=2.7,!=3.0.*,!=3.1.*,!=3.2.*,!=3.3.*,!=3.4.*,!=3.5.*"
+python-versions = ">=3.6"
 files = [
-    {file = "google-auth-2.18.1.tar.gz", hash = "sha256:d7a3249027e7f464fbbfd7ee8319a08ad09d2eea51578575c4bd360ffa049ccb"},
-    {file = "google_auth-2.18.1-py2.py3-none-any.whl", hash = "sha256:55a395cdfd3f3dd3f649131d41f97c17b4ed8a2aac1be3502090c716314e8a37"},
+    {file = "google-auth-2.19.0.tar.gz", hash = "sha256:f39d528077ac540793dd3c22a8706178f157642a67d874db25c640b7fead277e"},
+    {file = "google_auth-2.19.0-py2.py3-none-any.whl", hash = "sha256:be617bfaf77774008e9d177573f782e109188c8a64ae6e744285df5cea3e7df6"},
 ]
 
 [package.dependencies]
 cachetools = ">=2.0.0,<6.0"
 pyasn1-modules = ">=0.2.1"
-rsa = {version = ">=3.1.4,<5", markers = "python_version >= \"3.6\""}
+rsa = ">=3.1.4,<5"
 six = ">=1.9.0"
 urllib3 = "<2.0"
 
@@ -2918,40 +2935,40 @@ numpy = ">=1.13.3"
 
 [[package]]
 name = "numpy"
-version = "1.24.3"
-description = "Fundamental package for array computing in Python"
+version = "1.23.5"
+description = "NumPy is the fundamental package for array computing with Python."
 category = "main"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "numpy-1.24.3-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:3c1104d3c036fb81ab923f507536daedc718d0ad5a8707c6061cdfd6d184e570"},
-    {file = "numpy-1.24.3-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:202de8f38fc4a45a3eea4b63e2f376e5f2dc64ef0fa692838e31a808520efaf7"},
-    {file = "numpy-1.24.3-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:8535303847b89aa6b0f00aa1dc62867b5a32923e4d1681a35b5eef2d9591a463"},
-    {file = "numpy-1.24.3-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:2d926b52ba1367f9acb76b0df6ed21f0b16a1ad87c6720a1121674e5cf63e2b6"},
-    {file = "numpy-1.24.3-cp310-cp310-win32.whl", hash = "sha256:f21c442fdd2805e91799fbe044a7b999b8571bb0ab0f7850d0cb9641a687092b"},
-    {file = "numpy-1.24.3-cp310-cp310-win_amd64.whl", hash = "sha256:ab5f23af8c16022663a652d3b25dcdc272ac3f83c3af4c02eb8b824e6b3ab9d7"},
-    {file = "numpy-1.24.3-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:9a7721ec204d3a237225db3e194c25268faf92e19338a35f3a224469cb6039a3"},
-    {file = "numpy-1.24.3-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:d6cc757de514c00b24ae8cf5c876af2a7c3df189028d68c0cb4eaa9cd5afc2bf"},
-    {file = "numpy-1.24.3-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:76e3f4e85fc5d4fd311f6e9b794d0c00e7002ec122be271f2019d63376f1d385"},
-    {file = "numpy-1.24.3-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:a1d3c026f57ceaad42f8231305d4653d5f05dc6332a730ae5c0bea3513de0950"},
-    {file = "numpy-1.24.3-cp311-cp311-win32.whl", hash = "sha256:c91c4afd8abc3908e00a44b2672718905b8611503f7ff87390cc0ac3423fb096"},
-    {file = "numpy-1.24.3-cp311-cp311-win_amd64.whl", hash = "sha256:5342cf6aad47943286afa6f1609cad9b4266a05e7f2ec408e2cf7aea7ff69d80"},
-    {file = "numpy-1.24.3-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:7776ea65423ca6a15255ba1872d82d207bd1e09f6d0894ee4a64678dd2204078"},
-    {file = "numpy-1.24.3-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:ae8d0be48d1b6ed82588934aaaa179875e7dc4f3d84da18d7eae6eb3f06c242c"},
-    {file = "numpy-1.24.3-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:ecde0f8adef7dfdec993fd54b0f78183051b6580f606111a6d789cd14c61ea0c"},
-    {file = "numpy-1.24.3-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:4749e053a29364d3452c034827102ee100986903263e89884922ef01a0a6fd2f"},
-    {file = "numpy-1.24.3-cp38-cp38-win32.whl", hash = "sha256:d933fabd8f6a319e8530d0de4fcc2e6a61917e0b0c271fded460032db42a0fe4"},
-    {file = "numpy-1.24.3-cp38-cp38-win_amd64.whl", hash = "sha256:56e48aec79ae238f6e4395886b5eaed058abb7231fb3361ddd7bfdf4eed54289"},
-    {file = "numpy-1.24.3-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:4719d5aefb5189f50887773699eaf94e7d1e02bf36c1a9d353d9f46703758ca4"},
-    {file = "numpy-1.24.3-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:0ec87a7084caa559c36e0a2309e4ecb1baa03b687201d0a847c8b0ed476a7187"},
-    {file = "numpy-1.24.3-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:ea8282b9bcfe2b5e7d491d0bf7f3e2da29700cec05b49e64d6246923329f2b02"},
-    {file = "numpy-1.24.3-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:210461d87fb02a84ef243cac5e814aad2b7f4be953b32cb53327bb49fd77fbb4"},
-    {file = "numpy-1.24.3-cp39-cp39-win32.whl", hash = "sha256:784c6da1a07818491b0ffd63c6bbe5a33deaa0e25a20e1b3ea20cf0e43f8046c"},
-    {file = "numpy-1.24.3-cp39-cp39-win_amd64.whl", hash = "sha256:d5036197ecae68d7f491fcdb4df90082b0d4960ca6599ba2659957aafced7c17"},
-    {file = "numpy-1.24.3-pp38-pypy38_pp73-macosx_10_9_x86_64.whl", hash = "sha256:352ee00c7f8387b44d19f4cada524586f07379c0d49270f87233983bc5087ca0"},
-    {file = "numpy-1.24.3-pp38-pypy38_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:1a7d6acc2e7524c9955e5c903160aa4ea083736fde7e91276b0e5d98e6332812"},
-    {file = "numpy-1.24.3-pp38-pypy38_pp73-win_amd64.whl", hash = "sha256:35400e6a8d102fd07c71ed7dcadd9eb62ee9a6e84ec159bd48c28235bbb0f8e4"},
-    {file = "numpy-1.24.3.tar.gz", hash = "sha256:ab344f1bf21f140adab8e47fdbc7c35a477dc01408791f8ba00d018dd0bc5155"},
+    {file = "numpy-1.23.5-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:9c88793f78fca17da0145455f0d7826bcb9f37da4764af27ac945488116efe63"},
+    {file = "numpy-1.23.5-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:e9f4c4e51567b616be64e05d517c79a8a22f3606499941d97bb76f2ca59f982d"},
+    {file = "numpy-1.23.5-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:7903ba8ab592b82014713c491f6c5d3a1cde5b4a3bf116404e08f5b52f6daf43"},
+    {file = "numpy-1.23.5-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:5e05b1c973a9f858c74367553e236f287e749465f773328c8ef31abe18f691e1"},
+    {file = "numpy-1.23.5-cp310-cp310-win32.whl", hash = "sha256:522e26bbf6377e4d76403826ed689c295b0b238f46c28a7251ab94716da0b280"},
+    {file = "numpy-1.23.5-cp310-cp310-win_amd64.whl", hash = "sha256:dbee87b469018961d1ad79b1a5d50c0ae850000b639bcb1b694e9981083243b6"},
+    {file = "numpy-1.23.5-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:ce571367b6dfe60af04e04a1834ca2dc5f46004ac1cc756fb95319f64c095a96"},
+    {file = "numpy-1.23.5-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:56e454c7833e94ec9769fa0f86e6ff8e42ee38ce0ce1fa4cbb747ea7e06d56aa"},
+    {file = "numpy-1.23.5-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:5039f55555e1eab31124a5768898c9e22c25a65c1e0037f4d7c495a45778c9f2"},
+    {file = "numpy-1.23.5-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:58f545efd1108e647604a1b5aa809591ccd2540f468a880bedb97247e72db387"},
+    {file = "numpy-1.23.5-cp311-cp311-win32.whl", hash = "sha256:b2a9ab7c279c91974f756c84c365a669a887efa287365a8e2c418f8b3ba73fb0"},
+    {file = "numpy-1.23.5-cp311-cp311-win_amd64.whl", hash = "sha256:0cbe9848fad08baf71de1a39e12d1b6310f1d5b2d0ea4de051058e6e1076852d"},
+    {file = "numpy-1.23.5-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:f063b69b090c9d918f9df0a12116029e274daf0181df392839661c4c7ec9018a"},
+    {file = "numpy-1.23.5-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:0aaee12d8883552fadfc41e96b4c82ee7d794949e2a7c3b3a7201e968c7ecab9"},
+    {file = "numpy-1.23.5-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:92c8c1e89a1f5028a4c6d9e3ccbe311b6ba53694811269b992c0b224269e2398"},
+    {file = "numpy-1.23.5-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:d208a0f8729f3fb790ed18a003f3a57895b989b40ea4dce4717e9cf4af62c6bb"},
+    {file = "numpy-1.23.5-cp38-cp38-win32.whl", hash = "sha256:06005a2ef6014e9956c09ba07654f9837d9e26696a0470e42beedadb78c11b07"},
+    {file = "numpy-1.23.5-cp38-cp38-win_amd64.whl", hash = "sha256:ca51fcfcc5f9354c45f400059e88bc09215fb71a48d3768fb80e357f3b457e1e"},
+    {file = "numpy-1.23.5-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:8969bfd28e85c81f3f94eb4a66bc2cf1dbdc5c18efc320af34bffc54d6b1e38f"},
+    {file = "numpy-1.23.5-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:a7ac231a08bb37f852849bbb387a20a57574a97cfc7b6cabb488a4fc8be176de"},
+    {file = "numpy-1.23.5-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:bf837dc63ba5c06dc8797c398db1e223a466c7ece27a1f7b5232ba3466aafe3d"},
+    {file = "numpy-1.23.5-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:33161613d2269025873025b33e879825ec7b1d831317e68f4f2f0f84ed14c719"},
+    {file = "numpy-1.23.5-cp39-cp39-win32.whl", hash = "sha256:af1da88f6bc3d2338ebbf0e22fe487821ea4d8e89053e25fa59d1d79786e7481"},
+    {file = "numpy-1.23.5-cp39-cp39-win_amd64.whl", hash = "sha256:09b7847f7e83ca37c6e627682f145856de331049013853f344f37b0c9690e3df"},
+    {file = "numpy-1.23.5-pp38-pypy38_pp73-macosx_10_9_x86_64.whl", hash = "sha256:abdde9f795cf292fb9651ed48185503a2ff29be87770c3b8e2a14b0cd7aa16f8"},
+    {file = "numpy-1.23.5-pp38-pypy38_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:f9a909a8bae284d46bbfdefbdd4a262ba19d3bc9921b1e76126b1d21c3c34135"},
+    {file = "numpy-1.23.5-pp38-pypy38_pp73-win_amd64.whl", hash = "sha256:01dd17cbb340bf0fc23981e52e1d18a9d4050792e8fb8363cecbf066a84b827d"},
+    {file = "numpy-1.23.5.tar.gz", hash = "sha256:1b1766d6f397c18153d40015ddfc79ddb715cabadc04d2d228d4e5a8bc4ded1a"},
 ]
 
 [[package]]
@@ -4287,89 +4304,89 @@ files = [
 
 [[package]]
 name = "pyzmq"
-version = "25.0.2"
+version = "25.1.0"
 description = "Python bindings for 0MQ"
 category = "dev"
 optional = false
 python-versions = ">=3.6"
 files = [
-    {file = "pyzmq-25.0.2-cp310-cp310-macosx_10_15_universal2.whl", hash = "sha256:ac178e666c097c8d3deb5097b58cd1316092fc43e8ef5b5fdb259b51da7e7315"},
-    {file = "pyzmq-25.0.2-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:659e62e1cbb063151c52f5b01a38e1df6b54feccfa3e2509d44c35ca6d7962ee"},
-    {file = "pyzmq-25.0.2-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:8280ada89010735a12b968ec3ea9a468ac2e04fddcc1cede59cb7f5178783b9c"},
-    {file = "pyzmq-25.0.2-cp310-cp310-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:a9b5eeb5278a8a636bb0abdd9ff5076bcbb836cd2302565df53ff1fa7d106d54"},
-    {file = "pyzmq-25.0.2-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:9a2e5fe42dfe6b73ca120b97ac9f34bfa8414feb15e00e37415dbd51cf227ef6"},
-    {file = "pyzmq-25.0.2-cp310-cp310-manylinux_2_28_x86_64.whl", hash = "sha256:827bf60e749e78acb408a6c5af6688efbc9993e44ecc792b036ec2f4b4acf485"},
-    {file = "pyzmq-25.0.2-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:7b504ae43d37e282301da586529e2ded8b36d4ee2cd5e6db4386724ddeaa6bbc"},
-    {file = "pyzmq-25.0.2-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:cb1f69a0a2a2b1aae8412979dd6293cc6bcddd4439bf07e4758d864ddb112354"},
-    {file = "pyzmq-25.0.2-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:2b9c9cc965cdf28381e36da525dcb89fc1571d9c54800fdcd73e3f73a2fc29bd"},
-    {file = "pyzmq-25.0.2-cp310-cp310-win32.whl", hash = "sha256:24abbfdbb75ac5039205e72d6c75f10fc39d925f2df8ff21ebc74179488ebfca"},
-    {file = "pyzmq-25.0.2-cp310-cp310-win_amd64.whl", hash = "sha256:6a821a506822fac55d2df2085a52530f68ab15ceed12d63539adc32bd4410f6e"},
-    {file = "pyzmq-25.0.2-cp311-cp311-macosx_10_15_universal2.whl", hash = "sha256:9af0bb0277e92f41af35e991c242c9c71920169d6aa53ade7e444f338f4c8128"},
-    {file = "pyzmq-25.0.2-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:54a96cf77684a3a537b76acfa7237b1e79a8f8d14e7f00e0171a94b346c5293e"},
-    {file = "pyzmq-25.0.2-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:88649b19ede1cab03b96b66c364cbbf17c953615cdbc844f7f6e5f14c5e5261c"},
-    {file = "pyzmq-25.0.2-cp311-cp311-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:715cff7644a80a7795953c11b067a75f16eb9fc695a5a53316891ebee7f3c9d5"},
-    {file = "pyzmq-25.0.2-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:312b3f0f066b4f1d17383aae509bacf833ccaf591184a1f3c7a1661c085063ae"},
-    {file = "pyzmq-25.0.2-cp311-cp311-manylinux_2_28_x86_64.whl", hash = "sha256:d488c5c8630f7e782e800869f82744c3aca4aca62c63232e5d8c490d3d66956a"},
-    {file = "pyzmq-25.0.2-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:38d9f78d69bcdeec0c11e0feb3bc70f36f9b8c44fc06e5d06d91dc0a21b453c7"},
-    {file = "pyzmq-25.0.2-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:3059a6a534c910e1d5d068df42f60d434f79e6cc6285aa469b384fa921f78cf8"},
-    {file = "pyzmq-25.0.2-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:6526d097b75192f228c09d48420854d53dfbc7abbb41b0e26f363ccb26fbc177"},
-    {file = "pyzmq-25.0.2-cp311-cp311-win32.whl", hash = "sha256:5c5fbb229e40a89a2fe73d0c1181916f31e30f253cb2d6d91bea7927c2e18413"},
-    {file = "pyzmq-25.0.2-cp311-cp311-win_amd64.whl", hash = "sha256:ed15e3a2c3c2398e6ae5ce86d6a31b452dfd6ad4cd5d312596b30929c4b6e182"},
-    {file = "pyzmq-25.0.2-cp36-cp36m-macosx_10_9_x86_64.whl", hash = "sha256:032f5c8483c85bf9c9ca0593a11c7c749d734ce68d435e38c3f72e759b98b3c9"},
-    {file = "pyzmq-25.0.2-cp36-cp36m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:374b55516393bfd4d7a7daa6c3b36d6dd6a31ff9d2adad0838cd6a203125e714"},
-    {file = "pyzmq-25.0.2-cp36-cp36m-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:08bfcc21b5997a9be4fefa405341320d8e7f19b4d684fb9c0580255c5bd6d695"},
-    {file = "pyzmq-25.0.2-cp36-cp36m-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:1a843d26a8da1b752c74bc019c7b20e6791ee813cd6877449e6a1415589d22ff"},
-    {file = "pyzmq-25.0.2-cp36-cp36m-musllinux_1_1_aarch64.whl", hash = "sha256:b48616a09d7df9dbae2f45a0256eee7b794b903ddc6d8657a9948669b345f220"},
-    {file = "pyzmq-25.0.2-cp36-cp36m-musllinux_1_1_i686.whl", hash = "sha256:d4427b4a136e3b7f85516c76dd2e0756c22eec4026afb76ca1397152b0ca8145"},
-    {file = "pyzmq-25.0.2-cp36-cp36m-musllinux_1_1_x86_64.whl", hash = "sha256:26b0358e8933990502f4513c991c9935b6c06af01787a36d133b7c39b1df37fa"},
-    {file = "pyzmq-25.0.2-cp36-cp36m-win32.whl", hash = "sha256:c8fedc3ccd62c6b77dfe6f43802057a803a411ee96f14e946f4a76ec4ed0e117"},
-    {file = "pyzmq-25.0.2-cp36-cp36m-win_amd64.whl", hash = "sha256:2da6813b7995b6b1d1307329c73d3e3be2fd2d78e19acfc4eff2e27262732388"},
-    {file = "pyzmq-25.0.2-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:a35960c8b2f63e4ef67fd6731851030df68e4b617a6715dd11b4b10312d19fef"},
-    {file = "pyzmq-25.0.2-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:eef2a0b880ab40aca5a878933376cb6c1ec483fba72f7f34e015c0f675c90b20"},
-    {file = "pyzmq-25.0.2-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:85762712b74c7bd18e340c3639d1bf2f23735a998d63f46bb6584d904b5e401d"},
-    {file = "pyzmq-25.0.2-cp37-cp37m-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:64812f29d6eee565e129ca14b0c785744bfff679a4727137484101b34602d1a7"},
-    {file = "pyzmq-25.0.2-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:510d8e55b3a7cd13f8d3e9121edf0a8730b87d925d25298bace29a7e7bc82810"},
-    {file = "pyzmq-25.0.2-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:b164cc3c8acb3d102e311f2eb6f3c305865ecb377e56adc015cb51f721f1dda6"},
-    {file = "pyzmq-25.0.2-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:28fdb9224a258134784a9cf009b59265a9dde79582fb750d4e88a6bcbc6fa3dc"},
-    {file = "pyzmq-25.0.2-cp37-cp37m-win32.whl", hash = "sha256:dd771a440effa1c36d3523bc6ba4e54ff5d2e54b4adcc1e060d8f3ca3721d228"},
-    {file = "pyzmq-25.0.2-cp37-cp37m-win_amd64.whl", hash = "sha256:9bdc40efb679b9dcc39c06d25629e55581e4c4f7870a5e88db4f1c51ce25e20d"},
-    {file = "pyzmq-25.0.2-cp38-cp38-macosx_10_15_universal2.whl", hash = "sha256:1f82906a2d8e4ee310f30487b165e7cc8ed09c009e4502da67178b03083c4ce0"},
-    {file = "pyzmq-25.0.2-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:21ec0bf4831988af43c8d66ba3ccd81af2c5e793e1bf6790eb2d50e27b3c570a"},
-    {file = "pyzmq-25.0.2-cp38-cp38-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:abbce982a17c88d2312ec2cf7673985d444f1beaac6e8189424e0a0e0448dbb3"},
-    {file = "pyzmq-25.0.2-cp38-cp38-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:9e1d2f2d86fc75ed7f8845a992c5f6f1ab5db99747fb0d78b5e4046d041164d2"},
-    {file = "pyzmq-25.0.2-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:a2e92ff20ad5d13266bc999a29ed29a3b5b101c21fdf4b2cf420c09db9fb690e"},
-    {file = "pyzmq-25.0.2-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:edbbf06cc2719889470a8d2bf5072bb00f423e12de0eb9ffec946c2c9748e149"},
-    {file = "pyzmq-25.0.2-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:77942243ff4d14d90c11b2afd8ee6c039b45a0be4e53fb6fa7f5e4fd0b59da39"},
-    {file = "pyzmq-25.0.2-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:ab046e9cb902d1f62c9cc0eca055b1d11108bdc271caf7c2171487298f229b56"},
-    {file = "pyzmq-25.0.2-cp38-cp38-win32.whl", hash = "sha256:ad761cfbe477236802a7ab2c080d268c95e784fe30cafa7e055aacd1ca877eb0"},
-    {file = "pyzmq-25.0.2-cp38-cp38-win_amd64.whl", hash = "sha256:8560756318ec7c4c49d2c341012167e704b5a46d9034905853c3d1ade4f55bee"},
-    {file = "pyzmq-25.0.2-cp39-cp39-macosx_10_15_universal2.whl", hash = "sha256:ab2c056ac503f25a63f6c8c6771373e2a711b98b304614151dfb552d3d6c81f6"},
-    {file = "pyzmq-25.0.2-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:cca8524b61c0eaaa3505382dc9b9a3bc8165f1d6c010fdd1452c224225a26689"},
-    {file = "pyzmq-25.0.2-cp39-cp39-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:cfb9f7eae02d3ac42fbedad30006b7407c984a0eb4189a1322241a20944d61e5"},
-    {file = "pyzmq-25.0.2-cp39-cp39-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:5eaeae038c68748082137d6896d5c4db7927e9349237ded08ee1bbd94f7361c9"},
-    {file = "pyzmq-25.0.2-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4a31992a8f8d51663ebf79df0df6a04ffb905063083d682d4380ab8d2c67257c"},
-    {file = "pyzmq-25.0.2-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:6a979e59d2184a0c8f2ede4b0810cbdd86b64d99d9cc8a023929e40dce7c86cc"},
-    {file = "pyzmq-25.0.2-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:1f124cb73f1aa6654d31b183810febc8505fd0c597afa127c4f40076be4574e0"},
-    {file = "pyzmq-25.0.2-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:65c19a63b4a83ae45d62178b70223adeee5f12f3032726b897431b6553aa25af"},
-    {file = "pyzmq-25.0.2-cp39-cp39-win32.whl", hash = "sha256:83d822e8687621bed87404afc1c03d83fa2ce39733d54c2fd52d8829edb8a7ff"},
-    {file = "pyzmq-25.0.2-cp39-cp39-win_amd64.whl", hash = "sha256:24683285cc6b7bf18ad37d75b9db0e0fefe58404e7001f1d82bf9e721806daa7"},
-    {file = "pyzmq-25.0.2-pp37-pypy37_pp73-macosx_10_9_x86_64.whl", hash = "sha256:4a4b4261eb8f9ed71f63b9eb0198dd7c934aa3b3972dac586d0ef502ba9ab08b"},
-    {file = "pyzmq-25.0.2-pp37-pypy37_pp73-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:62ec8d979f56c0053a92b2b6a10ff54b9ec8a4f187db2b6ec31ee3dd6d3ca6e2"},
-    {file = "pyzmq-25.0.2-pp37-pypy37_pp73-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:affec1470351178e892121b3414c8ef7803269f207bf9bef85f9a6dd11cde264"},
-    {file = "pyzmq-25.0.2-pp37-pypy37_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:ffc71111433bd6ec8607a37b9211f4ef42e3d3b271c6d76c813669834764b248"},
-    {file = "pyzmq-25.0.2-pp37-pypy37_pp73-win_amd64.whl", hash = "sha256:6fadc60970714d86eff27821f8fb01f8328dd36bebd496b0564a500fe4a9e354"},
-    {file = "pyzmq-25.0.2-pp38-pypy38_pp73-macosx_10_9_x86_64.whl", hash = "sha256:269968f2a76c0513490aeb3ba0dc3c77b7c7a11daa894f9d1da88d4a0db09835"},
-    {file = "pyzmq-25.0.2-pp38-pypy38_pp73-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:f7c8b8368e84381ae7c57f1f5283b029c888504aaf4949c32e6e6fb256ec9bf0"},
-    {file = "pyzmq-25.0.2-pp38-pypy38_pp73-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:25e6873a70ad5aa31e4a7c41e5e8c709296edef4a92313e1cd5fc87bbd1874e2"},
-    {file = "pyzmq-25.0.2-pp38-pypy38_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:b733076ff46e7db5504c5e7284f04a9852c63214c74688bdb6135808531755a3"},
-    {file = "pyzmq-25.0.2-pp38-pypy38_pp73-win_amd64.whl", hash = "sha256:a6f6ae12478fdc26a6d5fdb21f806b08fa5403cd02fd312e4cb5f72df078f96f"},
-    {file = "pyzmq-25.0.2-pp39-pypy39_pp73-macosx_10_9_x86_64.whl", hash = "sha256:67da1c213fbd208906ab3470cfff1ee0048838365135a9bddc7b40b11e6d6c89"},
-    {file = "pyzmq-25.0.2-pp39-pypy39_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:531e36d9fcd66f18de27434a25b51d137eb546931033f392e85674c7a7cea853"},
-    {file = "pyzmq-25.0.2-pp39-pypy39_pp73-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:34a6fddd159ff38aa9497b2e342a559f142ab365576284bc8f77cb3ead1f79c5"},
-    {file = "pyzmq-25.0.2-pp39-pypy39_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:b491998ef886662c1f3d49ea2198055a9a536ddf7430b051b21054f2a5831800"},
-    {file = "pyzmq-25.0.2-pp39-pypy39_pp73-manylinux_2_28_x86_64.whl", hash = "sha256:5d496815074e3e3d183fe2c7fcea2109ad67b74084c254481f87b64e04e9a471"},
-    {file = "pyzmq-25.0.2-pp39-pypy39_pp73-win_amd64.whl", hash = "sha256:56a94ab1d12af982b55ca96c6853db6ac85505e820d9458ac76364c1998972f4"},
-    {file = "pyzmq-25.0.2.tar.gz", hash = "sha256:6b8c1bbb70e868dc88801aa532cae6bd4e3b5233784692b786f17ad2962e5149"},
+    {file = "pyzmq-25.1.0-cp310-cp310-macosx_10_15_universal2.whl", hash = "sha256:1a6169e69034eaa06823da6a93a7739ff38716142b3596c180363dee729d713d"},
+    {file = "pyzmq-25.1.0-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:19d0383b1f18411d137d891cab567de9afa609b214de68b86e20173dc624c101"},
+    {file = "pyzmq-25.1.0-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:f1e931d9a92f628858a50f5bdffdfcf839aebe388b82f9d2ccd5d22a38a789dc"},
+    {file = "pyzmq-25.1.0-cp310-cp310-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:97d984b1b2f574bc1bb58296d3c0b64b10e95e7026f8716ed6c0b86d4679843f"},
+    {file = "pyzmq-25.1.0-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:154bddda2a351161474b36dba03bf1463377ec226a13458725183e508840df89"},
+    {file = "pyzmq-25.1.0-cp310-cp310-manylinux_2_28_x86_64.whl", hash = "sha256:cb6d161ae94fb35bb518b74bb06b7293299c15ba3bc099dccd6a5b7ae589aee3"},
+    {file = "pyzmq-25.1.0-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:90146ab578931e0e2826ee39d0c948d0ea72734378f1898939d18bc9c823fcf9"},
+    {file = "pyzmq-25.1.0-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:831ba20b660b39e39e5ac8603e8193f8fce1ee03a42c84ade89c36a251449d80"},
+    {file = "pyzmq-25.1.0-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:3a522510e3434e12aff80187144c6df556bb06fe6b9d01b2ecfbd2b5bfa5c60c"},
+    {file = "pyzmq-25.1.0-cp310-cp310-win32.whl", hash = "sha256:be24a5867b8e3b9dd5c241de359a9a5217698ff616ac2daa47713ba2ebe30ad1"},
+    {file = "pyzmq-25.1.0-cp310-cp310-win_amd64.whl", hash = "sha256:5693dcc4f163481cf79e98cf2d7995c60e43809e325b77a7748d8024b1b7bcba"},
+    {file = "pyzmq-25.1.0-cp311-cp311-macosx_10_15_universal2.whl", hash = "sha256:13bbe36da3f8aaf2b7ec12696253c0bf6ffe05f4507985a8844a1081db6ec22d"},
+    {file = "pyzmq-25.1.0-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:69511d604368f3dc58d4be1b0bad99b61ee92b44afe1cd9b7bd8c5e34ea8248a"},
+    {file = "pyzmq-25.1.0-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4a983c8694667fd76d793ada77fd36c8317e76aa66eec75be2653cef2ea72883"},
+    {file = "pyzmq-25.1.0-cp311-cp311-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:332616f95eb400492103ab9d542b69d5f0ff628b23129a4bc0a2fd48da6e4e0b"},
+    {file = "pyzmq-25.1.0-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:58416db767787aedbfd57116714aad6c9ce57215ffa1c3758a52403f7c68cff5"},
+    {file = "pyzmq-25.1.0-cp311-cp311-manylinux_2_28_x86_64.whl", hash = "sha256:cad9545f5801a125f162d09ec9b724b7ad9b6440151b89645241d0120e119dcc"},
+    {file = "pyzmq-25.1.0-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:d6128d431b8dfa888bf51c22a04d48bcb3d64431caf02b3cb943269f17fd2994"},
+    {file = "pyzmq-25.1.0-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:2b15247c49d8cbea695b321ae5478d47cffd496a2ec5ef47131a9e79ddd7e46c"},
+    {file = "pyzmq-25.1.0-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:442d3efc77ca4d35bee3547a8e08e8d4bb88dadb54a8377014938ba98d2e074a"},
+    {file = "pyzmq-25.1.0-cp311-cp311-win32.whl", hash = "sha256:65346f507a815a731092421d0d7d60ed551a80d9b75e8b684307d435a5597425"},
+    {file = "pyzmq-25.1.0-cp311-cp311-win_amd64.whl", hash = "sha256:8b45d722046fea5a5694cba5d86f21f78f0052b40a4bbbbf60128ac55bfcc7b6"},
+    {file = "pyzmq-25.1.0-cp36-cp36m-macosx_10_9_x86_64.whl", hash = "sha256:f45808eda8b1d71308c5416ef3abe958f033fdbb356984fabbfc7887bed76b3f"},
+    {file = "pyzmq-25.1.0-cp36-cp36m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:8b697774ea8273e3c0460cf0bba16cd85ca6c46dfe8b303211816d68c492e132"},
+    {file = "pyzmq-25.1.0-cp36-cp36m-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:b324fa769577fc2c8f5efcd429cef5acbc17d63fe15ed16d6dcbac2c5eb00849"},
+    {file = "pyzmq-25.1.0-cp36-cp36m-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:5873d6a60b778848ce23b6c0ac26c39e48969823882f607516b91fb323ce80e5"},
+    {file = "pyzmq-25.1.0-cp36-cp36m-musllinux_1_1_aarch64.whl", hash = "sha256:f0d9e7ba6a815a12c8575ba7887da4b72483e4cfc57179af10c9b937f3f9308f"},
+    {file = "pyzmq-25.1.0-cp36-cp36m-musllinux_1_1_i686.whl", hash = "sha256:414b8beec76521358b49170db7b9967d6974bdfc3297f47f7d23edec37329b00"},
+    {file = "pyzmq-25.1.0-cp36-cp36m-musllinux_1_1_x86_64.whl", hash = "sha256:01f06f33e12497dca86353c354461f75275a5ad9eaea181ac0dc1662da8074fa"},
+    {file = "pyzmq-25.1.0-cp36-cp36m-win32.whl", hash = "sha256:b5a07c4f29bf7cb0164664ef87e4aa25435dcc1f818d29842118b0ac1eb8e2b5"},
+    {file = "pyzmq-25.1.0-cp36-cp36m-win_amd64.whl", hash = "sha256:968b0c737797c1809ec602e082cb63e9824ff2329275336bb88bd71591e94a90"},
+    {file = "pyzmq-25.1.0-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:47b915ba666c51391836d7ed9a745926b22c434efa76c119f77bcffa64d2c50c"},
+    {file = "pyzmq-25.1.0-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:5af31493663cf76dd36b00dafbc839e83bbca8a0662931e11816d75f36155897"},
+    {file = "pyzmq-25.1.0-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:5489738a692bc7ee9a0a7765979c8a572520d616d12d949eaffc6e061b82b4d1"},
+    {file = "pyzmq-25.1.0-cp37-cp37m-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:1fc56a0221bdf67cfa94ef2d6ce5513a3d209c3dfd21fed4d4e87eca1822e3a3"},
+    {file = "pyzmq-25.1.0-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:75217e83faea9edbc29516fc90c817bc40c6b21a5771ecb53e868e45594826b0"},
+    {file = "pyzmq-25.1.0-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:3830be8826639d801de9053cf86350ed6742c4321ba4236e4b5568528d7bfed7"},
+    {file = "pyzmq-25.1.0-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:3575699d7fd7c9b2108bc1c6128641a9a825a58577775ada26c02eb29e09c517"},
+    {file = "pyzmq-25.1.0-cp37-cp37m-win32.whl", hash = "sha256:95bd3a998d8c68b76679f6b18f520904af5204f089beebb7b0301d97704634dd"},
+    {file = "pyzmq-25.1.0-cp37-cp37m-win_amd64.whl", hash = "sha256:dbc466744a2db4b7ca05589f21ae1a35066afada2f803f92369f5877c100ef62"},
+    {file = "pyzmq-25.1.0-cp38-cp38-macosx_10_15_universal2.whl", hash = "sha256:3bed53f7218490c68f0e82a29c92335daa9606216e51c64f37b48eb78f1281f4"},
+    {file = "pyzmq-25.1.0-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:eb52e826d16c09ef87132c6e360e1879c984f19a4f62d8a935345deac43f3c12"},
+    {file = "pyzmq-25.1.0-cp38-cp38-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:ddbef8b53cd16467fdbfa92a712eae46dd066aa19780681a2ce266e88fbc7165"},
+    {file = "pyzmq-25.1.0-cp38-cp38-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:9301cf1d7fc1ddf668d0abbe3e227fc9ab15bc036a31c247276012abb921b5ff"},
+    {file = "pyzmq-25.1.0-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:7e23a8c3b6c06de40bdb9e06288180d630b562db8ac199e8cc535af81f90e64b"},
+    {file = "pyzmq-25.1.0-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:4a82faae00d1eed4809c2f18b37f15ce39a10a1c58fe48b60ad02875d6e13d80"},
+    {file = "pyzmq-25.1.0-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:c8398a1b1951aaa330269c35335ae69744be166e67e0ebd9869bdc09426f3871"},
+    {file = "pyzmq-25.1.0-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:d40682ac60b2a613d36d8d3a0cd14fbdf8e7e0618fbb40aa9fa7b796c9081584"},
+    {file = "pyzmq-25.1.0-cp38-cp38-win32.whl", hash = "sha256:33d5c8391a34d56224bccf74f458d82fc6e24b3213fc68165c98b708c7a69325"},
+    {file = "pyzmq-25.1.0-cp38-cp38-win_amd64.whl", hash = "sha256:c66b7ff2527e18554030319b1376d81560ca0742c6e0b17ff1ee96624a5f1afd"},
+    {file = "pyzmq-25.1.0-cp39-cp39-macosx_10_15_universal2.whl", hash = "sha256:af56229ea6527a849ac9fb154a059d7e32e77a8cba27e3e62a1e38d8808cb1a5"},
+    {file = "pyzmq-25.1.0-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:bdca18b94c404af6ae5533cd1bc310c4931f7ac97c148bbfd2cd4bdd62b96253"},
+    {file = "pyzmq-25.1.0-cp39-cp39-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:0b6b42f7055bbc562f63f3df3b63e3dd1ebe9727ff0f124c3aa7bcea7b3a00f9"},
+    {file = "pyzmq-25.1.0-cp39-cp39-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:4c2fc7aad520a97d64ffc98190fce6b64152bde57a10c704b337082679e74f67"},
+    {file = "pyzmq-25.1.0-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:be86a26415a8b6af02cd8d782e3a9ae3872140a057f1cadf0133de685185c02b"},
+    {file = "pyzmq-25.1.0-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:851fb2fe14036cfc1960d806628b80276af5424db09fe5c91c726890c8e6d943"},
+    {file = "pyzmq-25.1.0-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:2a21fec5c3cea45421a19ccbe6250c82f97af4175bc09de4d6dd78fb0cb4c200"},
+    {file = "pyzmq-25.1.0-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:bad172aba822444b32eae54c2d5ab18cd7dee9814fd5c7ed026603b8cae2d05f"},
+    {file = "pyzmq-25.1.0-cp39-cp39-win32.whl", hash = "sha256:4d67609b37204acad3d566bb7391e0ecc25ef8bae22ff72ebe2ad7ffb7847158"},
+    {file = "pyzmq-25.1.0-cp39-cp39-win_amd64.whl", hash = "sha256:71c7b5896e40720d30cd77a81e62b433b981005bbff0cb2f739e0f8d059b5d99"},
+    {file = "pyzmq-25.1.0-pp37-pypy37_pp73-macosx_10_9_x86_64.whl", hash = "sha256:4cb27ef9d3bdc0c195b2dc54fcb8720e18b741624686a81942e14c8b67cc61a6"},
+    {file = "pyzmq-25.1.0-pp37-pypy37_pp73-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:0c4fc2741e0513b5d5a12fe200d6785bbcc621f6f2278893a9ca7bed7f2efb7d"},
+    {file = "pyzmq-25.1.0-pp37-pypy37_pp73-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:fc34fdd458ff77a2a00e3c86f899911f6f269d393ca5675842a6e92eea565bae"},
+    {file = "pyzmq-25.1.0-pp37-pypy37_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:8751f9c1442624da391bbd92bd4b072def6d7702a9390e4479f45c182392ff78"},
+    {file = "pyzmq-25.1.0-pp37-pypy37_pp73-win_amd64.whl", hash = "sha256:6581e886aec3135964a302a0f5eb68f964869b9efd1dbafdebceaaf2934f8a68"},
+    {file = "pyzmq-25.1.0-pp38-pypy38_pp73-macosx_10_9_x86_64.whl", hash = "sha256:5482f08d2c3c42b920e8771ae8932fbaa0a67dff925fc476996ddd8155a170f3"},
+    {file = "pyzmq-25.1.0-pp38-pypy38_pp73-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:5e7fbcafa3ea16d1de1f213c226005fea21ee16ed56134b75b2dede5a2129e62"},
+    {file = "pyzmq-25.1.0-pp38-pypy38_pp73-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:adecf6d02b1beab8d7c04bc36f22bb0e4c65a35eb0b4750b91693631d4081c70"},
+    {file = "pyzmq-25.1.0-pp38-pypy38_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:f6d39e42a0aa888122d1beb8ec0d4ddfb6c6b45aecb5ba4013c27e2f28657765"},
+    {file = "pyzmq-25.1.0-pp38-pypy38_pp73-win_amd64.whl", hash = "sha256:7018289b402ebf2b2c06992813523de61d4ce17bd514c4339d8f27a6f6809492"},
+    {file = "pyzmq-25.1.0-pp39-pypy39_pp73-macosx_10_9_x86_64.whl", hash = "sha256:9e68ae9864d260b18f311b68d29134d8776d82e7f5d75ce898b40a88df9db30f"},
+    {file = "pyzmq-25.1.0-pp39-pypy39_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:e21cc00e4debe8f54c3ed7b9fcca540f46eee12762a9fa56feb8512fd9057161"},
+    {file = "pyzmq-25.1.0-pp39-pypy39_pp73-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:2f666ae327a6899ff560d741681fdcdf4506f990595201ed39b44278c471ad98"},
+    {file = "pyzmq-25.1.0-pp39-pypy39_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:2f5efcc29056dfe95e9c9db0dfbb12b62db9c4ad302f812931b6d21dd04a9119"},
+    {file = "pyzmq-25.1.0-pp39-pypy39_pp73-manylinux_2_28_x86_64.whl", hash = "sha256:48e5e59e77c1a83162ab3c163fc01cd2eebc5b34560341a67421b09be0891287"},
+    {file = "pyzmq-25.1.0-pp39-pypy39_pp73-win_amd64.whl", hash = "sha256:108c96ebbd573d929740d66e4c3d1bdf31d5cde003b8dc7811a3c8c5b0fc173b"},
+    {file = "pyzmq-25.1.0.tar.gz", hash = "sha256:80c41023465d36280e801564a69cbfce8ae85ff79b080e1913f6e90481fb8957"},
 ]
 
 [package.dependencies]
@@ -5086,14 +5103,14 @@ files = [
 
 [[package]]
 name = "typing-extensions"
-version = "4.6.2"
+version = "4.5.0"
 description = "Backported and Experimental Type Hints for Python 3.7+"
 category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "typing_extensions-4.6.2-py3-none-any.whl", hash = "sha256:3a8b36f13dd5fdc5d1b16fe317f5668545de77fa0b8e02006381fd49d731ab98"},
-    {file = "typing_extensions-4.6.2.tar.gz", hash = "sha256:06006244c70ac8ee83fa8282cb188f697b8db25bc8b4df07be1873c43897060c"},
+    {file = "typing_extensions-4.5.0-py3-none-any.whl", hash = "sha256:fb33085c39dd998ac16d1431ebc293a8b3eedd00fd4a32de0ff79002c19511b4"},
+    {file = "typing_extensions-4.5.0.tar.gz", hash = "sha256:5cb5f4a79139d699607b3ef622a1dedafa84e115ab0024e0d9c044a9479ca7cb"},
 ]
 
 [[package]]
@@ -5466,87 +5483,76 @@ requests = ">=2.0.0,<3.0.0"
 
 [[package]]
 name = "wrapt"
-version = "1.15.0"
+version = "1.14.1"
 description = "Module for decorators, wrappers and monkey patching."
 category = "main"
-optional = true
+optional = false
 python-versions = "!=3.0.*,!=3.1.*,!=3.2.*,!=3.3.*,!=3.4.*,>=2.7"
 files = [
-    {file = "wrapt-1.15.0-cp27-cp27m-macosx_10_9_x86_64.whl", hash = "sha256:ca1cccf838cd28d5a0883b342474c630ac48cac5df0ee6eacc9c7290f76b11c1"},
-    {file = "wrapt-1.15.0-cp27-cp27m-manylinux1_i686.whl", hash = "sha256:e826aadda3cae59295b95343db8f3d965fb31059da7de01ee8d1c40a60398b29"},
-    {file = "wrapt-1.15.0-cp27-cp27m-manylinux1_x86_64.whl", hash = "sha256:5fc8e02f5984a55d2c653f5fea93531e9836abbd84342c1d1e17abc4a15084c2"},
-    {file = "wrapt-1.15.0-cp27-cp27m-manylinux2010_i686.whl", hash = "sha256:96e25c8603a155559231c19c0349245eeb4ac0096fe3c1d0be5c47e075bd4f46"},
-    {file = "wrapt-1.15.0-cp27-cp27m-manylinux2010_x86_64.whl", hash = "sha256:40737a081d7497efea35ab9304b829b857f21558acfc7b3272f908d33b0d9d4c"},
-    {file = "wrapt-1.15.0-cp27-cp27mu-manylinux1_i686.whl", hash = "sha256:f87ec75864c37c4c6cb908d282e1969e79763e0d9becdfe9fe5473b7bb1e5f09"},
-    {file = "wrapt-1.15.0-cp27-cp27mu-manylinux1_x86_64.whl", hash = "sha256:1286eb30261894e4c70d124d44b7fd07825340869945c79d05bda53a40caa079"},
-    {file = "wrapt-1.15.0-cp27-cp27mu-manylinux2010_i686.whl", hash = "sha256:493d389a2b63c88ad56cdc35d0fa5752daac56ca755805b1b0c530f785767d5e"},
-    {file = "wrapt-1.15.0-cp27-cp27mu-manylinux2010_x86_64.whl", hash = "sha256:58d7a75d731e8c63614222bcb21dd992b4ab01a399f1f09dd82af17bbfc2368a"},
-    {file = "wrapt-1.15.0-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:21f6d9a0d5b3a207cdf7acf8e58d7d13d463e639f0c7e01d82cdb671e6cb7923"},
-    {file = "wrapt-1.15.0-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:ce42618f67741d4697684e501ef02f29e758a123aa2d669e2d964ff734ee00ee"},
-    {file = "wrapt-1.15.0-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:41d07d029dd4157ae27beab04d22b8e261eddfc6ecd64ff7000b10dc8b3a5727"},
-    {file = "wrapt-1.15.0-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:54accd4b8bc202966bafafd16e69da9d5640ff92389d33d28555c5fd4f25ccb7"},
-    {file = "wrapt-1.15.0-cp310-cp310-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:2fbfbca668dd15b744418265a9607baa970c347eefd0db6a518aaf0cfbd153c0"},
-    {file = "wrapt-1.15.0-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:76e9c727a874b4856d11a32fb0b389afc61ce8aaf281ada613713ddeadd1cfec"},
-    {file = "wrapt-1.15.0-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:e20076a211cd6f9b44a6be58f7eeafa7ab5720eb796975d0c03f05b47d89eb90"},
-    {file = "wrapt-1.15.0-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:a74d56552ddbde46c246b5b89199cb3fd182f9c346c784e1a93e4dc3f5ec9975"},
-    {file = "wrapt-1.15.0-cp310-cp310-win32.whl", hash = "sha256:26458da5653aa5b3d8dc8b24192f574a58984c749401f98fff994d41d3f08da1"},
-    {file = "wrapt-1.15.0-cp310-cp310-win_amd64.whl", hash = "sha256:75760a47c06b5974aa5e01949bf7e66d2af4d08cb8c1d6516af5e39595397f5e"},
-    {file = "wrapt-1.15.0-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:ba1711cda2d30634a7e452fc79eabcadaffedf241ff206db2ee93dd2c89a60e7"},
-    {file = "wrapt-1.15.0-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:56374914b132c702aa9aa9959c550004b8847148f95e1b824772d453ac204a72"},
-    {file = "wrapt-1.15.0-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:a89ce3fd220ff144bd9d54da333ec0de0399b52c9ac3d2ce34b569cf1a5748fb"},
-    {file = "wrapt-1.15.0-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:3bbe623731d03b186b3d6b0d6f51865bf598587c38d6f7b0be2e27414f7f214e"},
-    {file = "wrapt-1.15.0-cp311-cp311-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:3abbe948c3cbde2689370a262a8d04e32ec2dd4f27103669a45c6929bcdbfe7c"},
-    {file = "wrapt-1.15.0-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:b67b819628e3b748fd3c2192c15fb951f549d0f47c0449af0764d7647302fda3"},
-    {file = "wrapt-1.15.0-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:7eebcdbe3677e58dd4c0e03b4f2cfa346ed4049687d839adad68cc38bb559c92"},
-    {file = "wrapt-1.15.0-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:74934ebd71950e3db69960a7da29204f89624dde411afbfb3b4858c1409b1e98"},
-    {file = "wrapt-1.15.0-cp311-cp311-win32.whl", hash = "sha256:bd84395aab8e4d36263cd1b9308cd504f6cf713b7d6d3ce25ea55670baec5416"},
-    {file = "wrapt-1.15.0-cp311-cp311-win_amd64.whl", hash = "sha256:a487f72a25904e2b4bbc0817ce7a8de94363bd7e79890510174da9d901c38705"},
-    {file = "wrapt-1.15.0-cp35-cp35m-manylinux1_i686.whl", hash = "sha256:4ff0d20f2e670800d3ed2b220d40984162089a6e2c9646fdb09b85e6f9a8fc29"},
-    {file = "wrapt-1.15.0-cp35-cp35m-manylinux1_x86_64.whl", hash = "sha256:9ed6aa0726b9b60911f4aed8ec5b8dd7bf3491476015819f56473ffaef8959bd"},
-    {file = "wrapt-1.15.0-cp35-cp35m-manylinux2010_i686.whl", hash = "sha256:896689fddba4f23ef7c718279e42f8834041a21342d95e56922e1c10c0cc7afb"},
-    {file = "wrapt-1.15.0-cp35-cp35m-manylinux2010_x86_64.whl", hash = "sha256:75669d77bb2c071333417617a235324a1618dba66f82a750362eccbe5b61d248"},
-    {file = "wrapt-1.15.0-cp35-cp35m-win32.whl", hash = "sha256:fbec11614dba0424ca72f4e8ba3c420dba07b4a7c206c8c8e4e73f2e98f4c559"},
-    {file = "wrapt-1.15.0-cp35-cp35m-win_amd64.whl", hash = "sha256:fd69666217b62fa5d7c6aa88e507493a34dec4fa20c5bd925e4bc12fce586639"},
-    {file = "wrapt-1.15.0-cp36-cp36m-macosx_10_9_x86_64.whl", hash = "sha256:b0724f05c396b0a4c36a3226c31648385deb6a65d8992644c12a4963c70326ba"},
-    {file = "wrapt-1.15.0-cp36-cp36m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:bbeccb1aa40ab88cd29e6c7d8585582c99548f55f9b2581dfc5ba68c59a85752"},
-    {file = "wrapt-1.15.0-cp36-cp36m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:38adf7198f8f154502883242f9fe7333ab05a5b02de7d83aa2d88ea621f13364"},
-    {file = "wrapt-1.15.0-cp36-cp36m-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:578383d740457fa790fdf85e6d346fda1416a40549fe8db08e5e9bd281c6a475"},
-    {file = "wrapt-1.15.0-cp36-cp36m-musllinux_1_1_aarch64.whl", hash = "sha256:a4cbb9ff5795cd66f0066bdf5947f170f5d63a9274f99bdbca02fd973adcf2a8"},
-    {file = "wrapt-1.15.0-cp36-cp36m-musllinux_1_1_i686.whl", hash = "sha256:af5bd9ccb188f6a5fdda9f1f09d9f4c86cc8a539bd48a0bfdc97723970348418"},
-    {file = "wrapt-1.15.0-cp36-cp36m-musllinux_1_1_x86_64.whl", hash = "sha256:b56d5519e470d3f2fe4aa7585f0632b060d532d0696c5bdfb5e8319e1d0f69a2"},
-    {file = "wrapt-1.15.0-cp36-cp36m-win32.whl", hash = "sha256:77d4c1b881076c3ba173484dfa53d3582c1c8ff1f914c6461ab70c8428b796c1"},
-    {file = "wrapt-1.15.0-cp36-cp36m-win_amd64.whl", hash = "sha256:077ff0d1f9d9e4ce6476c1a924a3332452c1406e59d90a2cf24aeb29eeac9420"},
-    {file = "wrapt-1.15.0-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:5c5aa28df055697d7c37d2099a7bc09f559d5053c3349b1ad0c39000e611d317"},
-    {file = "wrapt-1.15.0-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:3a8564f283394634a7a7054b7983e47dbf39c07712d7b177b37e03f2467a024e"},
-    {file = "wrapt-1.15.0-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:780c82a41dc493b62fc5884fb1d3a3b81106642c5c5c78d6a0d4cbe96d62ba7e"},
-    {file = "wrapt-1.15.0-cp37-cp37m-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:e169e957c33576f47e21864cf3fc9ff47c223a4ebca8960079b8bd36cb014fd0"},
-    {file = "wrapt-1.15.0-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:b02f21c1e2074943312d03d243ac4388319f2456576b2c6023041c4d57cd7019"},
-    {file = "wrapt-1.15.0-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:f2e69b3ed24544b0d3dbe2c5c0ba5153ce50dcebb576fdc4696d52aa22db6034"},
-    {file = "wrapt-1.15.0-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:d787272ed958a05b2c86311d3a4135d3c2aeea4fc655705f074130aa57d71653"},
-    {file = "wrapt-1.15.0-cp37-cp37m-win32.whl", hash = "sha256:02fce1852f755f44f95af51f69d22e45080102e9d00258053b79367d07af39c0"},
-    {file = "wrapt-1.15.0-cp37-cp37m-win_amd64.whl", hash = "sha256:abd52a09d03adf9c763d706df707c343293d5d106aea53483e0ec8d9e310ad5e"},
-    {file = "wrapt-1.15.0-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:cdb4f085756c96a3af04e6eca7f08b1345e94b53af8921b25c72f096e704e145"},
-    {file = "wrapt-1.15.0-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:230ae493696a371f1dbffaad3dafbb742a4d27a0afd2b1aecebe52b740167e7f"},
-    {file = "wrapt-1.15.0-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:63424c681923b9f3bfbc5e3205aafe790904053d42ddcc08542181a30a7a51bd"},
-    {file = "wrapt-1.15.0-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:d6bcbfc99f55655c3d93feb7ef3800bd5bbe963a755687cbf1f490a71fb7794b"},
-    {file = "wrapt-1.15.0-cp38-cp38-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c99f4309f5145b93eca6e35ac1a988f0dc0a7ccf9ccdcd78d3c0adf57224e62f"},
-    {file = "wrapt-1.15.0-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:b130fe77361d6771ecf5a219d8e0817d61b236b7d8b37cc045172e574ed219e6"},
-    {file = "wrapt-1.15.0-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:96177eb5645b1c6985f5c11d03fc2dbda9ad24ec0f3a46dcce91445747e15094"},
-    {file = "wrapt-1.15.0-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:d5fe3e099cf07d0fb5a1e23d399e5d4d1ca3e6dfcbe5c8570ccff3e9208274f7"},
-    {file = "wrapt-1.15.0-cp38-cp38-win32.whl", hash = "sha256:abd8f36c99512755b8456047b7be10372fca271bf1467a1caa88db991e7c421b"},
-    {file = "wrapt-1.15.0-cp38-cp38-win_amd64.whl", hash = "sha256:b06fa97478a5f478fb05e1980980a7cdf2712015493b44d0c87606c1513ed5b1"},
-    {file = "wrapt-1.15.0-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:2e51de54d4fb8fb50d6ee8327f9828306a959ae394d3e01a1ba8b2f937747d86"},
-    {file = "wrapt-1.15.0-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:0970ddb69bba00670e58955f8019bec4a42d1785db3faa043c33d81de2bf843c"},
-    {file = "wrapt-1.15.0-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:76407ab327158c510f44ded207e2f76b657303e17cb7a572ffe2f5a8a48aa04d"},
-    {file = "wrapt-1.15.0-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:cd525e0e52a5ff16653a3fc9e3dd827981917d34996600bbc34c05d048ca35cc"},
-    {file = "wrapt-1.15.0-cp39-cp39-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:9d37ac69edc5614b90516807de32d08cb8e7b12260a285ee330955604ed9dd29"},
-    {file = "wrapt-1.15.0-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:078e2a1a86544e644a68422f881c48b84fef6d18f8c7a957ffd3f2e0a74a0d4a"},
-    {file = "wrapt-1.15.0-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:2cf56d0e237280baed46f0b5316661da892565ff58309d4d2ed7dba763d984b8"},
-    {file = "wrapt-1.15.0-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:7dc0713bf81287a00516ef43137273b23ee414fe41a3c14be10dd95ed98a2df9"},
-    {file = "wrapt-1.15.0-cp39-cp39-win32.whl", hash = "sha256:46ed616d5fb42f98630ed70c3529541408166c22cdfd4540b88d5f21006b0eff"},
-    {file = "wrapt-1.15.0-cp39-cp39-win_amd64.whl", hash = "sha256:eef4d64c650f33347c1f9266fa5ae001440b232ad9b98f1f43dfe7a79435c0a6"},
-    {file = "wrapt-1.15.0-py3-none-any.whl", hash = "sha256:64b1df0f83706b4ef4cfb4fb0e4c2669100fd7ecacfb59e091fad300d4e04640"},
-    {file = "wrapt-1.15.0.tar.gz", hash = "sha256:d06730c6aed78cee4126234cf2d071e01b44b915e725a6cb439a879ec9754a3a"},
+    {file = "wrapt-1.14.1-cp27-cp27m-macosx_10_9_x86_64.whl", hash = "sha256:1b376b3f4896e7930f1f772ac4b064ac12598d1c38d04907e696cc4d794b43d3"},
+    {file = "wrapt-1.14.1-cp27-cp27m-manylinux1_i686.whl", hash = "sha256:903500616422a40a98a5a3c4ff4ed9d0066f3b4c951fa286018ecdf0750194ef"},
+    {file = "wrapt-1.14.1-cp27-cp27m-manylinux1_x86_64.whl", hash = "sha256:5a9a0d155deafd9448baff28c08e150d9b24ff010e899311ddd63c45c2445e28"},
+    {file = "wrapt-1.14.1-cp27-cp27m-manylinux2010_i686.whl", hash = "sha256:ddaea91abf8b0d13443f6dac52e89051a5063c7d014710dcb4d4abb2ff811a59"},
+    {file = "wrapt-1.14.1-cp27-cp27m-manylinux2010_x86_64.whl", hash = "sha256:36f582d0c6bc99d5f39cd3ac2a9062e57f3cf606ade29a0a0d6b323462f4dd87"},
+    {file = "wrapt-1.14.1-cp27-cp27mu-manylinux1_i686.whl", hash = "sha256:7ef58fb89674095bfc57c4069e95d7a31cfdc0939e2a579882ac7d55aadfd2a1"},
+    {file = "wrapt-1.14.1-cp27-cp27mu-manylinux1_x86_64.whl", hash = "sha256:e2f83e18fe2f4c9e7db597e988f72712c0c3676d337d8b101f6758107c42425b"},
+    {file = "wrapt-1.14.1-cp27-cp27mu-manylinux2010_i686.whl", hash = "sha256:ee2b1b1769f6707a8a445162ea16dddf74285c3964f605877a20e38545c3c462"},
+    {file = "wrapt-1.14.1-cp27-cp27mu-manylinux2010_x86_64.whl", hash = "sha256:833b58d5d0b7e5b9832869f039203389ac7cbf01765639c7309fd50ef619e0b1"},
+    {file = "wrapt-1.14.1-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:80bb5c256f1415f747011dc3604b59bc1f91c6e7150bd7db03b19170ee06b320"},
+    {file = "wrapt-1.14.1-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:07f7a7d0f388028b2df1d916e94bbb40624c59b48ecc6cbc232546706fac74c2"},
+    {file = "wrapt-1.14.1-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:02b41b633c6261feff8ddd8d11c711df6842aba629fdd3da10249a53211a72c4"},
+    {file = "wrapt-1.14.1-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:2fe803deacd09a233e4762a1adcea5db5d31e6be577a43352936179d14d90069"},
+    {file = "wrapt-1.14.1-cp310-cp310-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:257fd78c513e0fb5cdbe058c27a0624c9884e735bbd131935fd49e9fe719d310"},
+    {file = "wrapt-1.14.1-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:4fcc4649dc762cddacd193e6b55bc02edca674067f5f98166d7713b193932b7f"},
+    {file = "wrapt-1.14.1-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:11871514607b15cfeb87c547a49bca19fde402f32e2b1c24a632506c0a756656"},
+    {file = "wrapt-1.14.1-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:8ad85f7f4e20964db4daadcab70b47ab05c7c1cf2a7c1e51087bfaa83831854c"},
+    {file = "wrapt-1.14.1-cp310-cp310-win32.whl", hash = "sha256:a9a52172be0b5aae932bef82a79ec0a0ce87288c7d132946d645eba03f0ad8a8"},
+    {file = "wrapt-1.14.1-cp310-cp310-win_amd64.whl", hash = "sha256:6d323e1554b3d22cfc03cd3243b5bb815a51f5249fdcbb86fda4bf62bab9e164"},
+    {file = "wrapt-1.14.1-cp35-cp35m-manylinux1_i686.whl", hash = "sha256:43ca3bbbe97af00f49efb06e352eae40434ca9d915906f77def219b88e85d907"},
+    {file = "wrapt-1.14.1-cp35-cp35m-manylinux1_x86_64.whl", hash = "sha256:6b1a564e6cb69922c7fe3a678b9f9a3c54e72b469875aa8018f18b4d1dd1adf3"},
+    {file = "wrapt-1.14.1-cp35-cp35m-manylinux2010_i686.whl", hash = "sha256:00b6d4ea20a906c0ca56d84f93065b398ab74b927a7a3dbd470f6fc503f95dc3"},
+    {file = "wrapt-1.14.1-cp35-cp35m-manylinux2010_x86_64.whl", hash = "sha256:a85d2b46be66a71bedde836d9e41859879cc54a2a04fad1191eb50c2066f6e9d"},
+    {file = "wrapt-1.14.1-cp35-cp35m-win32.whl", hash = "sha256:dbcda74c67263139358f4d188ae5faae95c30929281bc6866d00573783c422b7"},
+    {file = "wrapt-1.14.1-cp35-cp35m-win_amd64.whl", hash = "sha256:b21bb4c09ffabfa0e85e3a6b623e19b80e7acd709b9f91452b8297ace2a8ab00"},
+    {file = "wrapt-1.14.1-cp36-cp36m-macosx_10_9_x86_64.whl", hash = "sha256:9e0fd32e0148dd5dea6af5fee42beb949098564cc23211a88d799e434255a1f4"},
+    {file = "wrapt-1.14.1-cp36-cp36m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:9736af4641846491aedb3c3f56b9bc5568d92b0692303b5a305301a95dfd38b1"},
+    {file = "wrapt-1.14.1-cp36-cp36m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:5b02d65b9ccf0ef6c34cba6cf5bf2aab1bb2f49c6090bafeecc9cd81ad4ea1c1"},
+    {file = "wrapt-1.14.1-cp36-cp36m-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:21ac0156c4b089b330b7666db40feee30a5d52634cc4560e1905d6529a3897ff"},
+    {file = "wrapt-1.14.1-cp36-cp36m-musllinux_1_1_aarch64.whl", hash = "sha256:9f3e6f9e05148ff90002b884fbc2a86bd303ae847e472f44ecc06c2cd2fcdb2d"},
+    {file = "wrapt-1.14.1-cp36-cp36m-musllinux_1_1_i686.whl", hash = "sha256:6e743de5e9c3d1b7185870f480587b75b1cb604832e380d64f9504a0535912d1"},
+    {file = "wrapt-1.14.1-cp36-cp36m-musllinux_1_1_x86_64.whl", hash = "sha256:d79d7d5dc8a32b7093e81e97dad755127ff77bcc899e845f41bf71747af0c569"},
+    {file = "wrapt-1.14.1-cp36-cp36m-win32.whl", hash = "sha256:81b19725065dcb43df02b37e03278c011a09e49757287dca60c5aecdd5a0b8ed"},
+    {file = "wrapt-1.14.1-cp36-cp36m-win_amd64.whl", hash = "sha256:b014c23646a467558be7da3d6b9fa409b2c567d2110599b7cf9a0c5992b3b471"},
+    {file = "wrapt-1.14.1-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:88bd7b6bd70a5b6803c1abf6bca012f7ed963e58c68d76ee20b9d751c74a3248"},
+    {file = "wrapt-1.14.1-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:b5901a312f4d14c59918c221323068fad0540e34324925c8475263841dbdfe68"},
+    {file = "wrapt-1.14.1-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:d77c85fedff92cf788face9bfa3ebaa364448ebb1d765302e9af11bf449ca36d"},
+    {file = "wrapt-1.14.1-cp37-cp37m-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:8d649d616e5c6a678b26d15ece345354f7c2286acd6db868e65fcc5ff7c24a77"},
+    {file = "wrapt-1.14.1-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:7d2872609603cb35ca513d7404a94d6d608fc13211563571117046c9d2bcc3d7"},
+    {file = "wrapt-1.14.1-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:ee6acae74a2b91865910eef5e7de37dc6895ad96fa23603d1d27ea69df545015"},
+    {file = "wrapt-1.14.1-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:2b39d38039a1fdad98c87279b48bc5dce2c0ca0d73483b12cb72aa9609278e8a"},
+    {file = "wrapt-1.14.1-cp37-cp37m-win32.whl", hash = "sha256:60db23fa423575eeb65ea430cee741acb7c26a1365d103f7b0f6ec412b893853"},
+    {file = "wrapt-1.14.1-cp37-cp37m-win_amd64.whl", hash = "sha256:709fe01086a55cf79d20f741f39325018f4df051ef39fe921b1ebe780a66184c"},
+    {file = "wrapt-1.14.1-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:8c0ce1e99116d5ab21355d8ebe53d9460366704ea38ae4d9f6933188f327b456"},
+    {file = "wrapt-1.14.1-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:e3fb1677c720409d5f671e39bac6c9e0e422584e5f518bfd50aa4cbbea02433f"},
+    {file = "wrapt-1.14.1-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:642c2e7a804fcf18c222e1060df25fc210b9c58db7c91416fb055897fc27e8cc"},
+    {file = "wrapt-1.14.1-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:7b7c050ae976e286906dd3f26009e117eb000fb2cf3533398c5ad9ccc86867b1"},
+    {file = "wrapt-1.14.1-cp38-cp38-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:ef3f72c9666bba2bab70d2a8b79f2c6d2c1a42a7f7e2b0ec83bb2f9e383950af"},
+    {file = "wrapt-1.14.1-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:01c205616a89d09827986bc4e859bcabd64f5a0662a7fe95e0d359424e0e071b"},
+    {file = "wrapt-1.14.1-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:5a0f54ce2c092aaf439813735584b9537cad479575a09892b8352fea5e988dc0"},
+    {file = "wrapt-1.14.1-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:2cf71233a0ed05ccdabe209c606fe0bac7379fdcf687f39b944420d2a09fdb57"},
+    {file = "wrapt-1.14.1-cp38-cp38-win32.whl", hash = "sha256:aa31fdcc33fef9eb2552cbcbfee7773d5a6792c137b359e82879c101e98584c5"},
+    {file = "wrapt-1.14.1-cp38-cp38-win_amd64.whl", hash = "sha256:d1967f46ea8f2db647c786e78d8cc7e4313dbd1b0aca360592d8027b8508e24d"},
+    {file = "wrapt-1.14.1-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:3232822c7d98d23895ccc443bbdf57c7412c5a65996c30442ebe6ed3df335383"},
+    {file = "wrapt-1.14.1-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:988635d122aaf2bdcef9e795435662bcd65b02f4f4c1ae37fbee7401c440b3a7"},
+    {file = "wrapt-1.14.1-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:9cca3c2cdadb362116235fdbd411735de4328c61425b0aa9f872fd76d02c4e86"},
+    {file = "wrapt-1.14.1-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:d52a25136894c63de15a35bc0bdc5adb4b0e173b9c0d07a2be9d3ca64a332735"},
+    {file = "wrapt-1.14.1-cp39-cp39-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:40e7bc81c9e2b2734ea4bc1aceb8a8f0ceaac7c5299bc5d69e37c44d9081d43b"},
+    {file = "wrapt-1.14.1-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:b9b7a708dd92306328117d8c4b62e2194d00c365f18eff11a9b53c6f923b01e3"},
+    {file = "wrapt-1.14.1-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:6a9a25751acb379b466ff6be78a315e2b439d4c94c1e99cb7266d40a537995d3"},
+    {file = "wrapt-1.14.1-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:34aa51c45f28ba7f12accd624225e2b1e5a3a45206aa191f6f9aac931d9d56fe"},
+    {file = "wrapt-1.14.1-cp39-cp39-win32.whl", hash = "sha256:dee0ce50c6a2dd9056c20db781e9c1cfd33e77d2d569f5d1d9321c641bb903d5"},
+    {file = "wrapt-1.14.1-cp39-cp39-win_amd64.whl", hash = "sha256:dee60e1de1898bde3b238f18340eec6148986da0455d8ba7848d50470a7a32fb"},
+    {file = "wrapt-1.14.1.tar.gz", hash = "sha256:380a85cf89e0e69b7cfbe2ea9f765f004ff419f34194018a6827ac0e3edfed4d"},
 ]
 
 [[package]]
diff --git a/src/backend/langflow/graph/nodes.py b/src/backend/langflow/graph/nodes.py
index f33a0fcef..189e40b5c 100644
--- a/src/backend/langflow/graph/nodes.py
+++ b/src/backend/langflow/graph/nodes.py
@@ -1,4 +1,3 @@
-from copy import deepcopy
 from typing import Any, Dict, List, Optional, Union
 
 from langflow.graph.base import Node
diff --git a/src/backend/langflow/interface/custom_lists.py b/src/backend/langflow/interface/custom_lists.py
index af453139b..ee8869bfb 100644
--- a/src/backend/langflow/interface/custom_lists.py
+++ b/src/backend/langflow/interface/custom_lists.py
@@ -10,7 +10,6 @@ from langchain import (
     requests,
     text_splitter,
     utilities,
-    vectorstores,
 )
 from langchain.agents import agent_toolkits
 from langchain.chat_models import ChatOpenAI

From d5f2d8351185f503f8ecb9d086553df6f16b64d4 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Sat, 27 May 2023 12:59:44 -0300
Subject: [PATCH 09/14] =?UTF-8?q?=F0=9F=9A=80=20feat(githooks,=20Makefile)?=
 =?UTF-8?q?:=20add=20pre-commit=20hook=20to=20run=20'make=20format'=20befo?=
 =?UTF-8?q?re=20committing=20=F0=9F=94=A7=20chore(Makefile):=20add=20'init?=
 =?UTF-8?q?'=20target=20to=20install=20pre-commit=20hooks=20The=20pre-comm?=
 =?UTF-8?q?it=20hook=20is=20added=20to=20run=20'make=20format'=20before=20?=
 =?UTF-8?q?committing.=20This=20ensures=20that=20the=20code=20is=20formatt?=
 =?UTF-8?q?ed=20correctly=20before=20it=20is=20committed.=20The=20Makefile?=
 =?UTF-8?q?=20is=20updated=20to=20include=20an=20'init'=20target=20that=20?=
 =?UTF-8?q?installs=20the=20pre-commit=20hooks.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .githooks/pre-commit | 2 ++
 Makefile             | 9 ++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100755 .githooks/pre-commit

diff --git a/.githooks/pre-commit b/.githooks/pre-commit
new file mode 100755
index 000000000..f5008c586
--- /dev/null
+++ b/.githooks/pre-commit
@@ -0,0 +1,2 @@
+
+make format
\ No newline at end of file
diff --git a/Makefile b/Makefile
index 0d8556e47..3143d7983 100644
--- a/Makefile
+++ b/Makefile
@@ -1,7 +1,13 @@
-.PHONY: all format lint build build_frontend install_frontend run_frontend run_backend dev help tests coverage
+.PHONY: all init format lint build build_frontend install_frontend run_frontend run_backend dev help tests coverage
 
 all: help
 
+init:
+	@echo 'Installing pre-commit hooks'
+	git config core.hooksPath .githooks
+	pre-commit install
+	pre-commit install --hook-type pre-push
+
 coverage:
 	poetry run pytest --cov \
 		--cov-config=.coveragerc \
@@ -14,6 +20,7 @@ tests:
 format:
 	poetry run black .
 	poetry run ruff --select I --fix .
+	cd src/frontend && npm run format
 
 lint:
 	poetry run mypy .

From a096e834740f8298d30d7893a032f98ffe787801 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Sat, 27 May 2023 13:00:28 -0300
Subject: [PATCH 10/14] =?UTF-8?q?=F0=9F=9A=80=20chore(lint.yml):=20rename?=
 =?UTF-8?q?=20job=20from=20'build'=20to=20'lint'=20for=20clarity=20The=20j?=
 =?UTF-8?q?ob=20was=20renamed=20from=20'build'=20to=20'lint'=20to=20better?=
 =?UTF-8?q?=20reflect=20its=20purpose=20of=20running=20linters=20and=20cod?=
 =?UTF-8?q?e=20quality=20checks.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/lint.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 656838e88..f32cbfc6b 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -9,7 +9,7 @@ env:
   POETRY_VERSION: "1.4.0"
 
 jobs:
-  build:
+  lint:
     runs-on: ubuntu-latest
     strategy:
       matrix:

From 276a06976d15df1823cebc425397cf65d4f1b023 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Sat, 27 May 2023 13:01:20 -0300
Subject: [PATCH 11/14] Formatting

---
 .../components/parameterComponent/index.tsx   | 364 ++++----
 .../components/singleAlertComponent/index.tsx | 293 +++----
 .../src/alerts/alertDropDown/index.tsx        | 106 +--
 src/frontend/src/alerts/error/index.tsx       | 121 +--
 .../alerts/hooks/useOnClickOutside/index.ts   |  50 +-
 src/frontend/src/alerts/notice/index.tsx      | 116 +--
 src/frontend/src/alerts/success/index.tsx     |  92 +-
 .../components/CrashErrorComponent/index.tsx  |  62 +-
 .../ExtraSidebarComponent/index.tsx           | 230 ++---
 .../LightTooltipComponent/index.tsx           |  22 +-
 .../src/components/TooltipComponent/index.tsx |  16 +-
 .../chatComponent/chatMessage/index.tsx       |  96 +--
 .../src/components/chatComponent/index.tsx    |  44 +-
 .../components/codeAreaComponent/index.tsx    | 110 +--
 .../components/dropdownComponent/index.tsx    | 166 ++--
 .../src/components/floatComponent/index.tsx   |  55 +-
 .../src/components/inputComponent/index.tsx   | 159 ++--
 .../components/inputFileComponent/index.tsx   | 148 ++--
 .../components/inputListComponent/index.tsx   | 134 +--
 .../src/components/intComponent/index.tsx     |  88 +-
 .../src/components/loadingComponent/index.tsx |  46 +-
 .../src/components/promptComponent/index.tsx  | 110 +--
 .../components/textAreaComponent/index.tsx    |  37 +-
 .../src/components/toggleComponent/index.tsx  | 106 ++-
 src/frontend/src/contexts/alertContext.tsx    | 294 +++----
 src/frontend/src/contexts/darkContext.tsx     |  44 +-
 src/frontend/src/contexts/index.tsx           |  32 +-
 src/frontend/src/contexts/locationContext.tsx | 130 +--
 src/frontend/src/contexts/popUpContext.tsx    |  32 +-
 src/frontend/src/contexts/tabsContext.tsx     | 620 +++++++-------
 src/frontend/src/controllers/API/index.ts     |  36 +-
 src/frontend/src/index.tsx                    |  14 +-
 src/frontend/src/modals/ApiModal/index.tsx    | 318 +++----
 .../NodeModal/components/ModalField/index.tsx | 296 +++----
 src/frontend/src/modals/NodeModal/index.tsx   | 266 +++---
 .../chatModal/chatMessage/codeBlock/index.tsx | 126 +--
 .../modals/chatModal/chatMessage/index.tsx    | 272 +++---
 .../modals/chatModal/fileComponent/index.tsx  | 142 ++--
 src/frontend/src/modals/chatModal/index.tsx   |   9 +-
 .../src/modals/codeAreaModal/index.tsx        | 314 +++----
 src/frontend/src/modals/exportModal/index.tsx | 335 ++++----
 .../modals/importModal/buttonBox/index.tsx    | 103 ++-
 src/frontend/src/modals/importModal/index.tsx | 426 +++++-----
 src/frontend/src/modals/promptModal/index.tsx | 282 +++----
 .../src/modals/textAreaModal/index.tsx        | 224 ++---
 .../ConnectionLineComponent/index.tsx         |  52 +-
 .../components/DisclosureComponent/index.tsx  |  74 +-
 .../extraSidebarComponent/index.tsx           | 112 +--
 .../components/tabComponent/index.tsx         | 164 ++--
 .../components/tabsManagerComponent/index.tsx | 220 ++---
 .../src/pages/FlowPage/hooks/useUndoRedo.ts   |  85 +-
 src/frontend/src/pages/FlowPage/index.tsx     |  16 +-
 src/frontend/src/png.d.ts                     |   4 +-
 src/frontend/src/reportWebVitals.ts           |  18 +-
 src/frontend/src/svg.d.ts                     |   4 +-
 src/frontend/src/types/alerts/index.ts        |  36 +-
 src/frontend/src/types/api/index.ts           |  46 +-
 src/frontend/src/types/chat/index.ts          |   8 +-
 src/frontend/src/types/components/index.ts    |  95 ++-
 src/frontend/src/types/entities/index.ts      |   8 +-
 src/frontend/src/types/flow/index.ts          |  24 +-
 src/frontend/src/types/tabs/index.ts          |  45 +-
 .../src/types/templatesContext/index.ts       |   4 +-
 src/frontend/src/types/typesContext/index.ts  |  18 +-
 src/frontend/src/utils.ts                     | 786 +++++++++---------
 65 files changed, 4515 insertions(+), 4390 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index c79904661..d582b2d5b 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -17,191 +17,191 @@ import IntComponent from "../../../../components/intComponent";
 import PromptAreaComponent from "../../../../components/promptComponent";
 
 export default function ParameterComponent({
-	left,
-	id,
-	data,
-	tooltipTitle,
-	title,
-	color,
-	type,
-	name = "",
-	required = false,
+  left,
+  id,
+  data,
+  tooltipTitle,
+  title,
+  color,
+  type,
+  name = "",
+  required = false,
 }: ParameterComponentType) {
-	const ref = useRef(null);
-	const updateNodeInternals = useUpdateNodeInternals();
-	const [position, setPosition] = useState(0);
-	useEffect(() => {
-		if (ref.current && ref.current.offsetTop && ref.current.clientHeight) {
-			setPosition(ref.current.offsetTop + ref.current.clientHeight / 2);
-			updateNodeInternals(data.id);
-		}
-	}, [data.id, ref, updateNodeInternals]);
+  const ref = useRef(null);
+  const updateNodeInternals = useUpdateNodeInternals();
+  const [position, setPosition] = useState(0);
+  useEffect(() => {
+    if (ref.current && ref.current.offsetTop && ref.current.clientHeight) {
+      setPosition(ref.current.offsetTop + ref.current.clientHeight / 2);
+      updateNodeInternals(data.id);
+    }
+  }, [data.id, ref, updateNodeInternals]);
 
-	useEffect(() => {
-		updateNodeInternals(data.id);
-	}, [data.id, position, updateNodeInternals]);
+  useEffect(() => {
+    updateNodeInternals(data.id);
+  }, [data.id, position, updateNodeInternals]);
 
-	const [enabled, setEnabled] = useState(
-		data.node.template[name]?.value ?? false
-	);
-	const { reactFlowInstance } = useContext(typesContext);
-	let disabled =
-		reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
-	const { save } = useContext(TabsContext);
+  const [enabled, setEnabled] = useState(
+    data.node.template[name]?.value ?? false
+  );
+  const { reactFlowInstance } = useContext(typesContext);
+  let disabled =
+    reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
+  const { save } = useContext(TabsContext);
 
-	return (
-		<div
-			ref={ref}
-			className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
-		>
-			<>
-				<div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
-					{title}
-					<span className="text-red-600">{required ? " *" : ""}</span>
-				</div>
-				{left &&
-				(type === "str" ||
-					type === "bool" ||
-					type === "float" ||
-					type === "code" ||
-					type === "prompt" ||
-					type === "file" ||
-					type === "int") ? (
-					<></>
-				) : (
-					<Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
-						<Handle
-							type={left ? "target" : "source"}
-							position={left ? Position.Left : Position.Right}
-							id={id}
-							isValidConnection={(connection) =>
-								isValidConnection(connection, reactFlowInstance)
-							}
-							className={classNames(
-								left ? "-ml-0.5 " : "-mr-0.5 ",
-								"w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
-							)}
-							style={{
-								borderColor: color,
-								top: position,
-							}}
-						></Handle>
-					</Tooltip>
-				)}
+  return (
+    <div
+      ref={ref}
+      className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
+    >
+      <>
+        <div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
+          {title}
+          <span className="text-red-600">{required ? " *" : ""}</span>
+        </div>
+        {left &&
+        (type === "str" ||
+          type === "bool" ||
+          type === "float" ||
+          type === "code" ||
+          type === "prompt" ||
+          type === "file" ||
+          type === "int") ? (
+          <></>
+        ) : (
+          <Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
+            <Handle
+              type={left ? "target" : "source"}
+              position={left ? Position.Left : Position.Right}
+              id={id}
+              isValidConnection={(connection) =>
+                isValidConnection(connection, reactFlowInstance)
+              }
+              className={classNames(
+                left ? "-ml-0.5 " : "-mr-0.5 ",
+                "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
+              )}
+              style={{
+                borderColor: color,
+                top: position,
+              }}
+            ></Handle>
+          </Tooltip>
+        )}
 
-				{left === true &&
-				type === "str" &&
-				!data.node.template[name].options ? (
-					<div className="mt-2 w-full">
-						{data.node.template[name].list ? (
-							<InputListComponent
-								disabled={disabled}
-								value={
-									!data.node.template[name].value ||
-									data.node.template[name].value === ""
-										? [""]
-										: data.node.template[name].value
-								}
-								onChange={(t: string[]) => {
-									data.node.template[name].value = t;
-									save();
-								}}
-							/>
-						) : data.node.template[name].multiline ? (
-							<TextAreaComponent
-								disabled={disabled}
-								value={data.node.template[name].value ?? ""}
-								onChange={(t: string) => {
-									data.node.template[name].value = t;
-									save();
-								}}
-							/>
-						) : (
-							<InputComponent
-								disabled={disabled}
-								password={data.node.template[name].password ?? false}
-								value={data.node.template[name].value ?? ""}
-								onChange={(t) => {
-									data.node.template[name].value = t;
-									save();
-								}}
-							/>
-						)}
-					</div>
-				) : left === true && type === "bool" ? (
-					<div className="mt-2">
-						<ToggleComponent
-							disabled={disabled}
-							enabled={enabled}
-							setEnabled={(t) => {
-								data.node.template[name].value = t;
-								setEnabled(t);
-								save();
-							}}
-						/>
-					</div>
-				) : left === true && type === "float" ? (
-					<FloatComponent
-						disabled={disabled}
-						value={data.node.template[name].value ?? ""}
-						onChange={(t) => {
-							data.node.template[name].value = t;
-							save();
-						}}
-					/>
-				) : left === true &&
-				  type === "str" &&
-				  data.node.template[name].options ? (
-					<Dropdown
-						options={data.node.template[name].options}
-						onSelect={(newValue) => (data.node.template[name].value = newValue)}
-						value={data.node.template[name].value ?? "Choose an option"}
-					></Dropdown>
-				) : left === true && type === "code" ? (
-					<CodeAreaComponent
-						disabled={disabled}
-						value={data.node.template[name].value ?? ""}
-						onChange={(t: string) => {
-							data.node.template[name].value = t;
-							save();
-						}}
-					/>
-				) : left === true && type === "file" ? (
-					<InputFileComponent
-						disabled={disabled}
-						value={data.node.template[name].value ?? ""}
-						onChange={(t: string) => {
-							data.node.template[name].value = t;
-						}}
-						fileTypes={data.node.template[name].fileTypes}
-						suffixes={data.node.template[name].suffixes}
-						onFileChange={(t: string) => {
-							data.node.template[name].content = t;
-							save();
-						}}
-					></InputFileComponent>
-				) : left === true && type === "int" ? (
-					<IntComponent
-						disabled={disabled}
-						value={data.node.template[name].value ?? ""}
-						onChange={(t) => {
-							data.node.template[name].value = t;
-							save();
-						}}
-					/>
-				) : left === true && type === "prompt" ? (
-					<PromptAreaComponent
-						disabled={disabled}
-						value={data.node.template[name].value ?? ""}
-						onChange={(t: string) => {
-							data.node.template[name].value = t;
-							save();
-						}}
-					/>
-				) : (
-					<></>
-				)}
-			</>
-		</div>
-	);
+        {left === true &&
+        type === "str" &&
+        !data.node.template[name].options ? (
+          <div className="mt-2 w-full">
+            {data.node.template[name].list ? (
+              <InputListComponent
+                disabled={disabled}
+                value={
+                  !data.node.template[name].value ||
+                  data.node.template[name].value === ""
+                    ? [""]
+                    : data.node.template[name].value
+                }
+                onChange={(t: string[]) => {
+                  data.node.template[name].value = t;
+                  save();
+                }}
+              />
+            ) : data.node.template[name].multiline ? (
+              <TextAreaComponent
+                disabled={disabled}
+                value={data.node.template[name].value ?? ""}
+                onChange={(t: string) => {
+                  data.node.template[name].value = t;
+                  save();
+                }}
+              />
+            ) : (
+              <InputComponent
+                disabled={disabled}
+                password={data.node.template[name].password ?? false}
+                value={data.node.template[name].value ?? ""}
+                onChange={(t) => {
+                  data.node.template[name].value = t;
+                  save();
+                }}
+              />
+            )}
+          </div>
+        ) : left === true && type === "bool" ? (
+          <div className="mt-2">
+            <ToggleComponent
+              disabled={disabled}
+              enabled={enabled}
+              setEnabled={(t) => {
+                data.node.template[name].value = t;
+                setEnabled(t);
+                save();
+              }}
+            />
+          </div>
+        ) : left === true && type === "float" ? (
+          <FloatComponent
+            disabled={disabled}
+            value={data.node.template[name].value ?? ""}
+            onChange={(t) => {
+              data.node.template[name].value = t;
+              save();
+            }}
+          />
+        ) : left === true &&
+          type === "str" &&
+          data.node.template[name].options ? (
+          <Dropdown
+            options={data.node.template[name].options}
+            onSelect={(newValue) => (data.node.template[name].value = newValue)}
+            value={data.node.template[name].value ?? "Choose an option"}
+          ></Dropdown>
+        ) : left === true && type === "code" ? (
+          <CodeAreaComponent
+            disabled={disabled}
+            value={data.node.template[name].value ?? ""}
+            onChange={(t: string) => {
+              data.node.template[name].value = t;
+              save();
+            }}
+          />
+        ) : left === true && type === "file" ? (
+          <InputFileComponent
+            disabled={disabled}
+            value={data.node.template[name].value ?? ""}
+            onChange={(t: string) => {
+              data.node.template[name].value = t;
+            }}
+            fileTypes={data.node.template[name].fileTypes}
+            suffixes={data.node.template[name].suffixes}
+            onFileChange={(t: string) => {
+              data.node.template[name].content = t;
+              save();
+            }}
+          ></InputFileComponent>
+        ) : left === true && type === "int" ? (
+          <IntComponent
+            disabled={disabled}
+            value={data.node.template[name].value ?? ""}
+            onChange={(t) => {
+              data.node.template[name].value = t;
+              save();
+            }}
+          />
+        ) : left === true && type === "prompt" ? (
+          <PromptAreaComponent
+            disabled={disabled}
+            value={data.node.template[name].value ?? ""}
+            onChange={(t: string) => {
+              data.node.template[name].value = t;
+              save();
+            }}
+          />
+        ) : (
+          <></>
+        )}
+      </>
+    </div>
+  );
 }
diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index be168b6c3..ace9b5a0b 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -1,8 +1,8 @@
 import {
-	XCircleIcon,
-	XMarkIcon,
-	InformationCircleIcon,
-	CheckCircleIcon,
+  XCircleIcon,
+  XMarkIcon,
+  InformationCircleIcon,
+  CheckCircleIcon,
 } from "@heroicons/react/24/outline";
 import { Link } from "react-router-dom";
 import { Transition } from "@headlessui/react";
@@ -10,145 +10,152 @@ import { useState } from "react";
 import { SingleAlertComponentType } from "../../../../types/alerts";
 
 export default function SingleAlert({
-	dropItem,
-	removeAlert,
+  dropItem,
+  removeAlert,
 }: SingleAlertComponentType) {
-	const [show, setShow] = useState(true);
-	const type = dropItem.type;
+  const [show, setShow] = useState(true);
+  const type = dropItem.type;
 
-	return (
-		<Transition
-			className="relative"
-			show={show}
-			appear={true}
-			enter="transition-transform duration-500 ease-out"
-			enterFrom={"transform translate-x-[-100%]"}
-			enterTo={"transform translate-x-0"}
-			leave="transition-transform duration-500 ease-in"
-			leaveFrom={"transform translate-x-0"}
-			leaveTo={"transform translate-x-[-100%]"}
-		>
-			{type === "error" ? (
-				<div
-					className="flex bg-red-50 dark:bg-red-900 rounded-md p-3 mb-2 mx-2"
-					key={dropItem.id}
-				>
-					<div className="flex-shrink-0">
-						<XCircleIcon className="h-5 w-5 text-red-400 dark:text-red-50" aria-hidden="true" />
-					</div>
-					<div className="ml-3">
-						<h3 className="text-sm break-words font-medium text-red-800 dark:text-white/80">
-							{dropItem.title}
-						</h3>
-						{dropItem.list ? (
-							<div className="mt-2 text-sm text-red-700 dark:text-red-50">
-								<ul className="list-disc space-y-1 pl-5">
-									{dropItem.list.map((item, idx) => (
-										<li className="break-words" key={idx}>{item}</li>
-									))}
-								</ul>
-							</div>
-						) : (
-							<></>
-						)}
-					</div>
-					<div className="ml-auto pl-3">
-						<div className="-mx-1.5 -my-1.5">
-							<button
-								type="button"
-								onClick={() => {
-									setShow(false);
-									setTimeout(() => {
-										removeAlert(dropItem.id);
-									}, 500);
-								}}
-								className="inline-flex rounded-md bg-red-50 dark:bg-transparent p-1.5 text-red-500 dark:text-red-50"
-							>
-								<span className="sr-only">Dismiss</span>
-								<XMarkIcon className="h-5 w-5" aria-hidden="true" />
-							</button>
-						</div>
-					</div>
-				</div>
-			) : type === "notice" ? (
-				<div
-					className="flex rounded-md bg-blue-50 dark:bg-blue-900 p-3 mb-2 mx-2"
-					key={dropItem.id}
-				>
-					<div className="flex-shrink-0">
-						<InformationCircleIcon
-							className="h-5 w-5 text-blue-400 dark:text-blue-50"
-							aria-hidden="true"
-						/>
-					</div>
-					<div className="ml-3 flex-1 md:flex md:justify-between">
-						<p className="text-sm text-blue-700 dark:text-white/80">{dropItem.title}</p>
-						<p className="mt-3 text-sm md:mt-0 md:ml-6">
-							{dropItem.link ? (
-								<Link
-									to={dropItem.link}
-									className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 dark:hover:text-blue-100 hover:text-blue-600"
-								>
-									Details
-								</Link>
-							) : (
-								<></>
-							)}
-						</p>
-					</div>
-					<div className="ml-auto pl-3">
-						<div className="-mx-1.5 -my-1.5">
-							<button
-								type="button"
-								onClick={() => {
-									setShow(false);
-									setTimeout(() => {
-										removeAlert(dropItem.id);
-									}, 500);
-								}}
-								className="inline-flex rounded-md bg-blue-50 dark:bg-transparent p-1.5 text-blue-500 dark:text-blue-50"
-							>
-								<span className="sr-only">Dismiss</span>
-								<XMarkIcon className="h-5 w-5" aria-hidden="true" />
-							</button>
-						</div>
-					</div>
-				</div>
-			) : (
-				<div
-					className="flex bg-green-50 dark:bg-green-900 p-3 mb-2 mx-2 rounded-md"
-					key={dropItem.id}
-				>
-					<div className="flex-shrink-0">
-						<CheckCircleIcon
-							className="h-5 w-5 text-green-400 dark:text-green-50"
-							aria-hidden="true"
-						/>
-					</div>
-					<div className="ml-3">
-						<p className="text-sm font-medium text-green-800 dark:bg-white/80">
-							{dropItem.title}
-						</p>
-					</div>
-					<div className="ml-auto pl-3">
-						<div className="-mx-1.5 -my-1.5">
-							<button
-								type="button"
-								onClick={() => {
-									setShow(false);
-									setTimeout(() => {
-										removeAlert(dropItem.id);
-									}, 500);
-								}}
-								className="inline-flex rounded-md bg-green-50 dark:bg-transparent p-1.5 text-green-500 dark:text-green-50"
-							>
-								<span className="sr-only">Dismiss</span>
-								<XMarkIcon className="h-5 w-5" aria-hidden="true" />
-							</button>
-						</div>
-					</div>
-				</div>
-			)}
-		</Transition>
-	);
+  return (
+    <Transition
+      className="relative"
+      show={show}
+      appear={true}
+      enter="transition-transform duration-500 ease-out"
+      enterFrom={"transform translate-x-[-100%]"}
+      enterTo={"transform translate-x-0"}
+      leave="transition-transform duration-500 ease-in"
+      leaveFrom={"transform translate-x-0"}
+      leaveTo={"transform translate-x-[-100%]"}
+    >
+      {type === "error" ? (
+        <div
+          className="flex bg-red-50 dark:bg-red-900 rounded-md p-3 mb-2 mx-2"
+          key={dropItem.id}
+        >
+          <div className="flex-shrink-0">
+            <XCircleIcon
+              className="h-5 w-5 text-red-400 dark:text-red-50"
+              aria-hidden="true"
+            />
+          </div>
+          <div className="ml-3">
+            <h3 className="text-sm break-words font-medium text-red-800 dark:text-white/80">
+              {dropItem.title}
+            </h3>
+            {dropItem.list ? (
+              <div className="mt-2 text-sm text-red-700 dark:text-red-50">
+                <ul className="list-disc space-y-1 pl-5">
+                  {dropItem.list.map((item, idx) => (
+                    <li className="break-words" key={idx}>
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ) : (
+              <></>
+            )}
+          </div>
+          <div className="ml-auto pl-3">
+            <div className="-mx-1.5 -my-1.5">
+              <button
+                type="button"
+                onClick={() => {
+                  setShow(false);
+                  setTimeout(() => {
+                    removeAlert(dropItem.id);
+                  }, 500);
+                }}
+                className="inline-flex rounded-md bg-red-50 dark:bg-transparent p-1.5 text-red-500 dark:text-red-50"
+              >
+                <span className="sr-only">Dismiss</span>
+                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : type === "notice" ? (
+        <div
+          className="flex rounded-md bg-blue-50 dark:bg-blue-900 p-3 mb-2 mx-2"
+          key={dropItem.id}
+        >
+          <div className="flex-shrink-0">
+            <InformationCircleIcon
+              className="h-5 w-5 text-blue-400 dark:text-blue-50"
+              aria-hidden="true"
+            />
+          </div>
+          <div className="ml-3 flex-1 md:flex md:justify-between">
+            <p className="text-sm text-blue-700 dark:text-white/80">
+              {dropItem.title}
+            </p>
+            <p className="mt-3 text-sm md:mt-0 md:ml-6">
+              {dropItem.link ? (
+                <Link
+                  to={dropItem.link}
+                  className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 dark:hover:text-blue-100 hover:text-blue-600"
+                >
+                  Details
+                </Link>
+              ) : (
+                <></>
+              )}
+            </p>
+          </div>
+          <div className="ml-auto pl-3">
+            <div className="-mx-1.5 -my-1.5">
+              <button
+                type="button"
+                onClick={() => {
+                  setShow(false);
+                  setTimeout(() => {
+                    removeAlert(dropItem.id);
+                  }, 500);
+                }}
+                className="inline-flex rounded-md bg-blue-50 dark:bg-transparent p-1.5 text-blue-500 dark:text-blue-50"
+              >
+                <span className="sr-only">Dismiss</span>
+                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div
+          className="flex bg-green-50 dark:bg-green-900 p-3 mb-2 mx-2 rounded-md"
+          key={dropItem.id}
+        >
+          <div className="flex-shrink-0">
+            <CheckCircleIcon
+              className="h-5 w-5 text-green-400 dark:text-green-50"
+              aria-hidden="true"
+            />
+          </div>
+          <div className="ml-3">
+            <p className="text-sm font-medium text-green-800 dark:bg-white/80">
+              {dropItem.title}
+            </p>
+          </div>
+          <div className="ml-auto pl-3">
+            <div className="-mx-1.5 -my-1.5">
+              <button
+                type="button"
+                onClick={() => {
+                  setShow(false);
+                  setTimeout(() => {
+                    removeAlert(dropItem.id);
+                  }, 500);
+                }}
+                className="inline-flex rounded-md bg-green-50 dark:bg-transparent p-1.5 text-green-500 dark:text-green-50"
+              >
+                <span className="sr-only">Dismiss</span>
+                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </Transition>
+  );
 }
diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index 09c91c7ca..edd3bb23f 100644
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/index.tsx
@@ -7,60 +7,60 @@ import { AlertDropdownType } from "../../types/alerts";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { useOnClickOutside } from "../hooks/useOnClickOutside";
 export default function AlertDropdown({}: AlertDropdownType) {
-	const { closePopUp } = useContext(PopUpContext);
-	const componentRef = useRef<HTMLDivElement>(null);
+  const { closePopUp } = useContext(PopUpContext);
+  const componentRef = useRef<HTMLDivElement>(null);
 
-	// Use the custom hook
-	useOnClickOutside(componentRef, () => {
-		closePopUp();
-	});
+  // Use the custom hook
+  useOnClickOutside(componentRef, () => {
+    closePopUp();
+  });
 
-	const {
-		notificationList,
-		clearNotificationList,
-		removeFromNotificationList,
-	} = useContext(alertContext);
+  const {
+    notificationList,
+    clearNotificationList,
+    removeFromNotificationList,
+  } = useContext(alertContext);
 
-	return (
-		<div
-			ref={componentRef}
-			className="z-10 py-3 pb-4 px-2 rounded-md bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col"
-		>
-			<div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800 dark:text-gray-200">
-				Notifications
-				<div className="flex gap-3 pr-3 ">
-					<button
-						className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
-						onClick={() => {
-							closePopUp();
-							setTimeout(clearNotificationList, 100);
-						}}
-					>
-						<TrashIcon className="w-[1.1rem] h-[1.1rem]" />
-					</button>
-					<button
-						className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
-						onClick={closePopUp}
-					>
-						<XMarkIcon className="h-5 w-5" />
-					</button>
-				</div>
-			</div>
-			<div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-gray-900 dark:text-gray-300">
-				{notificationList.length !== 0 ? (
-					notificationList.map((alertItem, index) => (
-						<SingleAlert
-							key={alertItem.id}
-							dropItem={alertItem}
-							removeAlert={removeFromNotificationList}
-						/>
-					))
-				) : (
-					<div className="h-full w-full pb-16 text-gray-500 dark:text-gray-500 flex justify-center items-center">
-						No new notifications
-					</div>
-				)}
-			</div>
-		</div>
-	);
+  return (
+    <div
+      ref={componentRef}
+      className="z-10 py-3 pb-4 px-2 rounded-md bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col"
+    >
+      <div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800 dark:text-gray-200">
+        Notifications
+        <div className="flex gap-3 pr-3 ">
+          <button
+            className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
+            onClick={() => {
+              closePopUp();
+              setTimeout(clearNotificationList, 100);
+            }}
+          >
+            <TrashIcon className="w-[1.1rem] h-[1.1rem]" />
+          </button>
+          <button
+            className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
+            onClick={closePopUp}
+          >
+            <XMarkIcon className="h-5 w-5" />
+          </button>
+        </div>
+      </div>
+      <div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-gray-900 dark:text-gray-300">
+        {notificationList.length !== 0 ? (
+          notificationList.map((alertItem, index) => (
+            <SingleAlert
+              key={alertItem.id}
+              dropItem={alertItem}
+              removeAlert={removeFromNotificationList}
+            />
+          ))
+        ) : (
+          <div className="h-full w-full pb-16 text-gray-500 dark:text-gray-500 flex justify-center items-center">
+            No new notifications
+          </div>
+        )}
+      </div>
+    </div>
+  );
 }
diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx
index 022ad8ba0..bcabe764f 100644
--- a/src/frontend/src/alerts/error/index.tsx
+++ b/src/frontend/src/alerts/error/index.tsx
@@ -4,63 +4,68 @@ import { useEffect, useState } from "react";
 import { ErrorAlertType } from "../../types/alerts";
 
 export default function ErrorAlert({
-	title,
-	list = [],
-	id,
-	removeAlert,
+  title,
+  list = [],
+  id,
+  removeAlert,
 }: ErrorAlertType) {
-	const [show, setShow] = useState(true);
-	useEffect(() => {
-		if (show) {
-			setTimeout(() => {
-				setShow(false);
-				setTimeout(() => {
-					removeAlert(id);
-				}, 500);
-			}, 5000);
-		}
-	}, [id, removeAlert, show]);
-	return (
-		<Transition
-			className="relative"
-			show={show}
-			appear={true}
-			enter="transition-transform duration-500 ease-out"
-			enterFrom={"transform translate-x-[-100%]"}
-			enterTo={"transform translate-x-0"}
-			leave="transition-transform duration-500 ease-in"
-			leaveFrom={"transform translate-x-0"}
-			leaveTo={"transform translate-x-[-100%]"}
-		>
-			<div
-				onClick={() => {
-					setShow(false);
-					setTimeout(() => {
-						removeAlert(id);
-					}, 500);
-				}}
-				className="rounded-md w-96 mt-6 shadow-xl bg-red-50 dark:bg-red-900 p-4 cursor-pointer"
-			>
-				<div className="flex">
-					<div className="flex-shrink-0">
-						<XCircleIcon className="h-5 w-5 text-red-400 dark:text-red-50" aria-hidden="true" />
-					</div>
-					<div className="ml-3">
-						<h3 className="text-sm font-medium text-red-800 dark:text-white/80">{title}</h3>
-						{list.length !== 0 ? (
-							<div className="mt-2 text-sm text-red-700 dark:text-red-50">
-								<ul className="list-disc space-y-1 pl-5">
-									{list.map((item, index) => (
-										<li key={index}>{item}</li>
-									))}
-								</ul>
-							</div>
-						) : (
-							<></>
-						)}
-					</div>
-				</div>
-			</div>
-		</Transition>
-	);
+  const [show, setShow] = useState(true);
+  useEffect(() => {
+    if (show) {
+      setTimeout(() => {
+        setShow(false);
+        setTimeout(() => {
+          removeAlert(id);
+        }, 500);
+      }, 5000);
+    }
+  }, [id, removeAlert, show]);
+  return (
+    <Transition
+      className="relative"
+      show={show}
+      appear={true}
+      enter="transition-transform duration-500 ease-out"
+      enterFrom={"transform translate-x-[-100%]"}
+      enterTo={"transform translate-x-0"}
+      leave="transition-transform duration-500 ease-in"
+      leaveFrom={"transform translate-x-0"}
+      leaveTo={"transform translate-x-[-100%]"}
+    >
+      <div
+        onClick={() => {
+          setShow(false);
+          setTimeout(() => {
+            removeAlert(id);
+          }, 500);
+        }}
+        className="rounded-md w-96 mt-6 shadow-xl bg-red-50 dark:bg-red-900 p-4 cursor-pointer"
+      >
+        <div className="flex">
+          <div className="flex-shrink-0">
+            <XCircleIcon
+              className="h-5 w-5 text-red-400 dark:text-red-50"
+              aria-hidden="true"
+            />
+          </div>
+          <div className="ml-3">
+            <h3 className="text-sm font-medium text-red-800 dark:text-white/80">
+              {title}
+            </h3>
+            {list.length !== 0 ? (
+              <div className="mt-2 text-sm text-red-700 dark:text-red-50">
+                <ul className="list-disc space-y-1 pl-5">
+                  {list.map((item, index) => (
+                    <li key={index}>{item}</li>
+                  ))}
+                </ul>
+              </div>
+            ) : (
+              <></>
+            )}
+          </div>
+        </div>
+      </div>
+    </Transition>
+  );
 }
diff --git a/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts b/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts
index 3046d41a4..249133d96 100644
--- a/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts
+++ b/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts
@@ -1,33 +1,33 @@
 import { useEffect } from "react";
 
 export function useOnClickOutside(ref, handler) {
-	useEffect(() => {
-		const listener = (event) => {
-			// Do nothing if clicking ref's element or its children
-			if (!ref.current || ref.current.contains(event.target)) {
-				return;
-			}
+  useEffect(() => {
+    const listener = (event) => {
+      // Do nothing if clicking ref's element or its children
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
 
-			handler(event);
-		};
+      handler(event);
+    };
 
-		// Attach the listener to the document
-		document.addEventListener("mousedown", listener, { passive: true });
+    // Attach the listener to the document
+    document.addEventListener("mousedown", listener, { passive: true });
 
-		// Attach the listener to the react-flow instance
-		const reactFlowContainer = document.querySelector(".react-flow");
-		if (reactFlowContainer) {
-			reactFlowContainer.addEventListener("mousedown", listener, {
-				passive: true,
-			});
-		}
+    // Attach the listener to the react-flow instance
+    const reactFlowContainer = document.querySelector(".react-flow");
+    if (reactFlowContainer) {
+      reactFlowContainer.addEventListener("mousedown", listener, {
+        passive: true,
+      });
+    }
 
-		// Clean up the listener when the component is unmounted
-		return () => {
-			document.removeEventListener("mousedown", listener);
-			if (reactFlowContainer) {
-				reactFlowContainer.removeEventListener("mousedown", listener);
-			}
-		};
-	}, [ref, handler]); // Rerun only if ref or handler changes
+    // Clean up the listener when the component is unmounted
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      if (reactFlowContainer) {
+        reactFlowContainer.removeEventListener("mousedown", listener);
+      }
+    };
+  }, [ref, handler]); // Rerun only if ref or handler changes
 }
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index e7e317157..1b2fb1514 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -5,63 +5,63 @@ import { Link } from "react-router-dom";
 import { NoticeAlertType } from "../../types/alerts";
 
 export default function NoticeAlert({
-	title,
-	link = "",
-	id,
-	removeAlert,
+  title,
+  link = "",
+  id,
+  removeAlert,
 }: NoticeAlertType) {
-	const [show, setShow] = useState(true);
-	useEffect(() => {
-		if (show) {
-			setTimeout(() => {
-				setShow(false);
-				setTimeout(() => {
-					removeAlert(id);
-				}, 500);
-			}, 5000);
-		}
-	}, [id, removeAlert, show]);
-	return (
-		<Transition
-			show={show}
-			enter="transition-transform duration-500 ease-out"
-			enterFrom={"transform translate-x-[-100%]"}
-			enterTo={"transform translate-x-0"}
-			leave="transition-transform duration-500 ease-in"
-			leaveFrom={"transform translate-x-0"}
-			leaveTo={"transform translate-x-[-100%]"}
-		>
-			<div
-				onClick={() => {
-					setShow(false);
-					removeAlert(id);
-				}}
-				className="rounded-md w-96 mt-6 shadow-xl bg-blue-50 dark:bg-blue-900 p-4"
-			>
-				<div className="flex">
-					<div className="flex-shrink-0">
-						<InformationCircleIcon
-							className="h-5 w-5 text-blue-400 dark:text-blue-50"
-							aria-hidden="true"
-						/>
-					</div>
-					<div className="ml-3 flex-1 md:flex md:justify-between">
-						<p className="text-sm text-blue-700 dark:text-white/80">{title}</p>
-						<p className="mt-3 text-sm md:mt-0 md:ml-6">
-							{link !== "" ? (
-								<Link
-									to={link}
-									className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 hover:dark:text-blue-10 hover:text-blue-600"
-								>
-									Details
-								</Link>
-							) : (
-								<></>
-							)}
-						</p>
-					</div>
-				</div>
-			</div>
-		</Transition>
-	);
+  const [show, setShow] = useState(true);
+  useEffect(() => {
+    if (show) {
+      setTimeout(() => {
+        setShow(false);
+        setTimeout(() => {
+          removeAlert(id);
+        }, 500);
+      }, 5000);
+    }
+  }, [id, removeAlert, show]);
+  return (
+    <Transition
+      show={show}
+      enter="transition-transform duration-500 ease-out"
+      enterFrom={"transform translate-x-[-100%]"}
+      enterTo={"transform translate-x-0"}
+      leave="transition-transform duration-500 ease-in"
+      leaveFrom={"transform translate-x-0"}
+      leaveTo={"transform translate-x-[-100%]"}
+    >
+      <div
+        onClick={() => {
+          setShow(false);
+          removeAlert(id);
+        }}
+        className="rounded-md w-96 mt-6 shadow-xl bg-blue-50 dark:bg-blue-900 p-4"
+      >
+        <div className="flex">
+          <div className="flex-shrink-0">
+            <InformationCircleIcon
+              className="h-5 w-5 text-blue-400 dark:text-blue-50"
+              aria-hidden="true"
+            />
+          </div>
+          <div className="ml-3 flex-1 md:flex md:justify-between">
+            <p className="text-sm text-blue-700 dark:text-white/80">{title}</p>
+            <p className="mt-3 text-sm md:mt-0 md:ml-6">
+              {link !== "" ? (
+                <Link
+                  to={link}
+                  className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 hover:dark:text-blue-10 hover:text-blue-600"
+                >
+                  Details
+                </Link>
+              ) : (
+                <></>
+              )}
+            </p>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  );
 }
diff --git a/src/frontend/src/alerts/success/index.tsx b/src/frontend/src/alerts/success/index.tsx
index 6e82075f9..d915adfcd 100644
--- a/src/frontend/src/alerts/success/index.tsx
+++ b/src/frontend/src/alerts/success/index.tsx
@@ -4,50 +4,52 @@ import { useEffect, useState } from "react";
 import { SuccessAlertType } from "../../types/alerts";
 
 export default function SuccessAlert({
-	title,
-	id,
-	removeAlert,
+  title,
+  id,
+  removeAlert,
 }: SuccessAlertType) {
-	const [show, setShow] = useState(true);
-	useEffect(() => {
-		if (show) {
-			setTimeout(() => {
-				setShow(false);
-				setTimeout(() => {
-					removeAlert(id);
-				}, 500);
-			}, 5000);
-		}
-	}, [id, removeAlert, show]);
-	return (
-		<Transition
-			show={show}
-			enter="transition-transform duration-500 ease-out"
-			enterFrom={"transform translate-x-[-100%]"}
-			enterTo={"transform translate-x-0"}
-			leave="transition-transform duration-500 ease-in"
-			leaveFrom={"transform translate-x-0"}
-			leaveTo={"transform translate-x-[-100%]"}
-		>
-			<div
-				onClick={() => {
-					setShow(false);
-					removeAlert(id);
-				}}
-				className="rounded-md w-96 mt-6 shadow-xl bg-green-50 dark:bg-green-900 p-4"
-			>
-				<div className="flex">
-					<div className="flex-shrink-0">
-						<CheckCircleIcon
-							className="h-5 w-5 text-green-400 dark:text-green-50"
-							aria-hidden="true"
-						/>
-					</div>
-					<div className="ml-3">
-						<p className="text-sm font-medium text-green-800 dark:text-white/80">{title}</p>
-					</div>
-				</div>
-			</div>
-		</Transition>
-	);
+  const [show, setShow] = useState(true);
+  useEffect(() => {
+    if (show) {
+      setTimeout(() => {
+        setShow(false);
+        setTimeout(() => {
+          removeAlert(id);
+        }, 500);
+      }, 5000);
+    }
+  }, [id, removeAlert, show]);
+  return (
+    <Transition
+      show={show}
+      enter="transition-transform duration-500 ease-out"
+      enterFrom={"transform translate-x-[-100%]"}
+      enterTo={"transform translate-x-0"}
+      leave="transition-transform duration-500 ease-in"
+      leaveFrom={"transform translate-x-0"}
+      leaveTo={"transform translate-x-[-100%]"}
+    >
+      <div
+        onClick={() => {
+          setShow(false);
+          removeAlert(id);
+        }}
+        className="rounded-md w-96 mt-6 shadow-xl bg-green-50 dark:bg-green-900 p-4"
+      >
+        <div className="flex">
+          <div className="flex-shrink-0">
+            <CheckCircleIcon
+              className="h-5 w-5 text-green-400 dark:text-green-50"
+              aria-hidden="true"
+            />
+          </div>
+          <div className="ml-3">
+            <p className="text-sm font-medium text-green-800 dark:text-white/80">
+              {title}
+            </p>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  );
 }
diff --git a/src/frontend/src/components/CrashErrorComponent/index.tsx b/src/frontend/src/components/CrashErrorComponent/index.tsx
index de3cea182..adc8909a8 100644
--- a/src/frontend/src/components/CrashErrorComponent/index.tsx
+++ b/src/frontend/src/components/CrashErrorComponent/index.tsx
@@ -1,33 +1,33 @@
 export default function CrashErrorComponent({ error, resetErrorBoundary }) {
-	return (
-		<div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 z-50">
-			<div className="bg-white max-w-4xl h-1/3 min-h-fit rounded-lg shadow-lg p-8 text-start flex flex-col justify-evenly">
-				<h1 className="text-red-500 text-3xl mb-4">
-					Oops! An unknown error has occurred.
-				</h1>
-				<p className="text-gray-700 mb-4 text-xl">
-					Please click the 'Reset Application' button to restore the
-					application's state. If the error persists, please create an issue on
-					our GitHub page. We apologize for any inconvenience this may have
-					caused.
-				</p>
-				<div className="flex justify-center">
-					<button
-						onClick={resetErrorBoundary}
-						className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-4"
-					>
-						Reset Application
-					</button>
-					<a
-						href="https://github.com/logspace-ai/langflow/issues/new"
-						target="_blank"
-						rel="noopener noreferrer"
-						className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
-					>
-						Create Issue
-					</a>
-				</div>
-			</div>
-		</div>
-	);
+  return (
+    <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 z-50">
+      <div className="bg-white max-w-4xl h-1/3 min-h-fit rounded-lg shadow-lg p-8 text-start flex flex-col justify-evenly">
+        <h1 className="text-red-500 text-3xl mb-4">
+          Oops! An unknown error has occurred.
+        </h1>
+        <p className="text-gray-700 mb-4 text-xl">
+          Please click the 'Reset Application' button to restore the
+          application's state. If the error persists, please create an issue on
+          our GitHub page. We apologize for any inconvenience this may have
+          caused.
+        </p>
+        <div className="flex justify-center">
+          <button
+            onClick={resetErrorBoundary}
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-4"
+          >
+            Reset Application
+          </button>
+          <a
+            href="https://github.com/logspace-ai/langflow/issues/new"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
+          >
+            Create Issue
+          </a>
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index 317f025ae..f5acd5a23 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -6,119 +6,119 @@ import { classNames } from "../../utils";
 import { locationContext } from "../../contexts/locationContext";
 
 export default function ExtraSidebar() {
-	const {
-		current,
-		isStackedOpen,
-		setIsStackedOpen,
-		extraNavigation,
-		extraComponent,
-	} = useContext(locationContext);
-	return (
-		<>
-			<aside
-				className={` ${
-					isStackedOpen ? "w-52" : "w-0 "
-				} flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
-			>
-				<div className="w-52 dark:bg-gray-800 border dark:border-gray-700  overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
-					<div className="flex pt-1 px-4 justify-between align-middle w-full">
-						<span className="text-gray-900 dark:text-white py-[2px] font-medium ">
-							{extraNavigation.title}
-						</span>
-					</div>
-					<div className="flex flex-grow flex-col w-full">
-						{extraNavigation.options ? (
-							<div className="p-4">
-								<nav className="flex-1 space-y-1">
-									{extraNavigation.options.map((item) =>
-										!item.children ? (
-											<div key={item.name}>
-												<Link
-													to={item.href}
-													className={classNames(
-														item.href.split("/")[2] === current[4]
-															? "bg-gray-100 text-gray-900"
-															: "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
-														"group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
-													)}
-												>
-													<item.icon
-														className={classNames(
-															item.href.split("/")[2] === current[4]
-																? "text-gray-500"
-																: "text-gray-400 group-hover:text-gray-500",
-															"mr-3 flex-shrink-0 h-6 w-6"
-														)}
-													/>
-													{item.name}
-												</Link>
-											</div>
-										) : (
-											<Disclosure
-												as="div"
-												key={item.name}
-												className="space-y-1"
-											>
-												{({ open }) => (
-													<>
-														<Disclosure.Button
-															className={classNames(
-																item.href.split("/")[2] === current[4]
-																	? "bg-gray-100 text-gray-900"
-																	: "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
-																"group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
-															)}
-														>
-															<item.icon
-																className="mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
-																aria-hidden="true"
-															/>
-															<span className="flex-1">{item.name}</span>
-															<svg
-																className={classNames(
-																	open
-																		? "text-gray-400 rotate-90"
-																		: "text-gray-300",
-																	"ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-gray-400"
-																)}
-																viewBox="0 0 20 20"
-																aria-hidden="true"
-															>
-																<path
-																	d="M6 6L14 10L6 14V6Z"
-																	fill="currentColor"
-																/>
-															</svg>
-														</Disclosure.Button>
-														<Disclosure.Panel className="space-y-1">
-															{item.children.map((subItem) => (
-																<Link
-																	key={subItem.name}
-																	to={subItem.href}
-																	className={classNames(
-																		subItem.href.split("/")[3] === current[5]
-																			? "bg-gray-100 text-gray-900"
-																			: "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
-																		"group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
-																	)}
-																>
-																	{subItem.name}
-																</Link>
-															))}
-														</Disclosure.Panel>
-													</>
-												)}
-											</Disclosure>
-										)
-									)}
-								</nav>
-							</div>
-						) : (
-							extraComponent
-						)}
-					</div>
-				</div>
-			</aside>
-		</>
-	);
+  const {
+    current,
+    isStackedOpen,
+    setIsStackedOpen,
+    extraNavigation,
+    extraComponent,
+  } = useContext(locationContext);
+  return (
+    <>
+      <aside
+        className={` ${
+          isStackedOpen ? "w-52" : "w-0 "
+        } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
+      >
+        <div className="w-52 dark:bg-gray-800 border dark:border-gray-700  overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
+          <div className="flex pt-1 px-4 justify-between align-middle w-full">
+            <span className="text-gray-900 dark:text-white py-[2px] font-medium ">
+              {extraNavigation.title}
+            </span>
+          </div>
+          <div className="flex flex-grow flex-col w-full">
+            {extraNavigation.options ? (
+              <div className="p-4">
+                <nav className="flex-1 space-y-1">
+                  {extraNavigation.options.map((item) =>
+                    !item.children ? (
+                      <div key={item.name}>
+                        <Link
+                          to={item.href}
+                          className={classNames(
+                            item.href.split("/")[2] === current[4]
+                              ? "bg-gray-100 text-gray-900"
+                              : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
+                            "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
+                          )}
+                        >
+                          <item.icon
+                            className={classNames(
+                              item.href.split("/")[2] === current[4]
+                                ? "text-gray-500"
+                                : "text-gray-400 group-hover:text-gray-500",
+                              "mr-3 flex-shrink-0 h-6 w-6"
+                            )}
+                          />
+                          {item.name}
+                        </Link>
+                      </div>
+                    ) : (
+                      <Disclosure
+                        as="div"
+                        key={item.name}
+                        className="space-y-1"
+                      >
+                        {({ open }) => (
+                          <>
+                            <Disclosure.Button
+                              className={classNames(
+                                item.href.split("/")[2] === current[4]
+                                  ? "bg-gray-100 text-gray-900"
+                                  : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
+                                "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                              )}
+                            >
+                              <item.icon
+                                className="mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
+                                aria-hidden="true"
+                              />
+                              <span className="flex-1">{item.name}</span>
+                              <svg
+                                className={classNames(
+                                  open
+                                    ? "text-gray-400 rotate-90"
+                                    : "text-gray-300",
+                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-gray-400"
+                                )}
+                                viewBox="0 0 20 20"
+                                aria-hidden="true"
+                              >
+                                <path
+                                  d="M6 6L14 10L6 14V6Z"
+                                  fill="currentColor"
+                                />
+                              </svg>
+                            </Disclosure.Button>
+                            <Disclosure.Panel className="space-y-1">
+                              {item.children.map((subItem) => (
+                                <Link
+                                  key={subItem.name}
+                                  to={subItem.href}
+                                  className={classNames(
+                                    subItem.href.split("/")[3] === current[5]
+                                      ? "bg-gray-100 text-gray-900"
+                                      : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
+                                    "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
+                                  )}
+                                >
+                                  {subItem.name}
+                                </Link>
+                              ))}
+                            </Disclosure.Panel>
+                          </>
+                        )}
+                      </Disclosure>
+                    )
+                  )}
+                </nav>
+              </div>
+            ) : (
+              extraComponent
+            )}
+          </div>
+        </div>
+      </aside>
+    </>
+  );
 }
diff --git a/src/frontend/src/components/LightTooltipComponent/index.tsx b/src/frontend/src/components/LightTooltipComponent/index.tsx
index 334fc0e71..4cdc912d0 100644
--- a/src/frontend/src/components/LightTooltipComponent/index.tsx
+++ b/src/frontend/src/components/LightTooltipComponent/index.tsx
@@ -2,16 +2,16 @@ import { styled } from "@mui/material/styles";
 import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
 
 export const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
-	<Tooltip {...props} classes={{ popper: className }} />
+  <Tooltip {...props} classes={{ popper: className }} />
 ))(({ theme }) => ({
-	[`& .${tooltipClasses.tooltip}`]: {
-		backgroundColor: theme.palette.common.white,
-		color: "rgba(0, 0, 0, 0.87)",
-		boxShadow: theme.shadows[2],
-		fontSize: 14,
-	},
-	[`& .${tooltipClasses.arrow}:before`]: {
-		color: theme.palette.common.white,
-		boxShadow: theme.shadows[1],
-	},
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.common.white,
+    color: "rgba(0, 0, 0, 0.87)",
+    boxShadow: theme.shadows[2],
+    fontSize: 14,
+  },
+  [`& .${tooltipClasses.arrow}:before`]: {
+    color: theme.palette.common.white,
+    boxShadow: theme.shadows[1],
+  },
 }));
diff --git a/src/frontend/src/components/TooltipComponent/index.tsx b/src/frontend/src/components/TooltipComponent/index.tsx
index f0a4eb8e6..0e571b1bc 100644
--- a/src/frontend/src/components/TooltipComponent/index.tsx
+++ b/src/frontend/src/components/TooltipComponent/index.tsx
@@ -3,13 +3,13 @@ import { LightTooltip } from "../LightTooltipComponent";
 import { TooltipComponentType } from "../../types/components";
 
 export default function Tooltip({
-	children,
-	title,
-	placement,
+  children,
+  title,
+  placement,
 }: TooltipComponentType) {
-	return (
-		<LightTooltip placement={placement} title={title} arrow>
-			{children}
-		</LightTooltip>
-	);
+  return (
+    <LightTooltip placement={placement} title={title} arrow>
+      {children}
+    </LightTooltip>
+  );
 }
diff --git a/src/frontend/src/components/chatComponent/chatMessage/index.tsx b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
index 9e3586d23..8ca2e56e3 100644
--- a/src/frontend/src/components/chatComponent/chatMessage/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
@@ -1,7 +1,7 @@
 import {
-	ChatBubbleLeftEllipsisIcon,
-	ChatBubbleOvalLeftEllipsisIcon,
-	PlusSmallIcon,
+  ChatBubbleLeftEllipsisIcon,
+  ChatBubbleOvalLeftEllipsisIcon,
+  PlusSmallIcon,
 } from "@heroicons/react/24/outline";
 import { useState } from "react";
 import { ChatMessageType } from "../../../types/chat";
@@ -10,49 +10,49 @@ import Convert from "ansi-to-html";
 const convert = new Convert({ newline: true });
 
 export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
-	const [hidden, setHidden] = useState(true);
-	return (
-		<div>
-			{!chat.isSend ? (
-				<div className="w-full text-start">
-					<div
-						style={{ backgroundColor: nodeColors["chat"] }}
-						className=" relative text-start inline-block text-white rounded-xl overflow-hidden w-fit max-w-[280px] text-sm font-normal rounded-tl-none"
-					>
-						{hidden && chat.thought && chat.thought !== "" && (
-							<div
-								onClick={() => setHidden((prev) => !prev)}
-								className="absolute top-2 right-2 cursor-pointer"
-							>
-								<ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce" />
-							</div>
-						)}
-						{chat.thought && chat.thought !== "" && !hidden && (
-							<div
-								onClick={() => setHidden((prev) => !prev)}
-								style={{ backgroundColor: nodeColors["thought"] }}
-								className=" text-start inline-block w-full pb-3 pt-3 px-5 cursor-pointer"
-								dangerouslySetInnerHTML={{
-									__html: convert.toHtml(chat.thought),
-								}}
-							></div>
-						)}
-						{chat.thought && chat.thought !== "" && !hidden && <br></br>}
-						<div
-							className="w-full rounded-b-md px-4 pb-3 pt-3 pr-8"
-							style={{ backgroundColor: nodeColors["chat"] }}
-						>
-							{chat.message}
-						</div>
-					</div>
-				</div>
-			) : (
-				<div className="w-full text-end">
-					<div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-gray-700 bg-gray-200 font-normal rounded-tr-none">
-						{chat.message}
-					</div>
-				</div>
-			)}
-		</div>
-	);
+  const [hidden, setHidden] = useState(true);
+  return (
+    <div>
+      {!chat.isSend ? (
+        <div className="w-full text-start">
+          <div
+            style={{ backgroundColor: nodeColors["chat"] }}
+            className=" relative text-start inline-block text-white rounded-xl overflow-hidden w-fit max-w-[280px] text-sm font-normal rounded-tl-none"
+          >
+            {hidden && chat.thought && chat.thought !== "" && (
+              <div
+                onClick={() => setHidden((prev) => !prev)}
+                className="absolute top-2 right-2 cursor-pointer"
+              >
+                <ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce" />
+              </div>
+            )}
+            {chat.thought && chat.thought !== "" && !hidden && (
+              <div
+                onClick={() => setHidden((prev) => !prev)}
+                style={{ backgroundColor: nodeColors["thought"] }}
+                className=" text-start inline-block w-full pb-3 pt-3 px-5 cursor-pointer"
+                dangerouslySetInnerHTML={{
+                  __html: convert.toHtml(chat.thought),
+                }}
+              ></div>
+            )}
+            {chat.thought && chat.thought !== "" && !hidden && <br></br>}
+            <div
+              className="w-full rounded-b-md px-4 pb-3 pt-3 pr-8"
+              style={{ backgroundColor: nodeColors["chat"] }}
+            >
+              {chat.message}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="w-full text-end">
+          <div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-gray-700 bg-gray-200 font-normal rounded-tr-none">
+            {chat.message}
+          </div>
+        </div>
+      )}
+    </div>
+  );
 }
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index dc51c0fb7..61d0f35a1 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -7,26 +7,26 @@ import ChatModal from "../../modals/chatModal";
 import _ from "lodash";
 
 export default function Chat({ flow }: ChatType) {
-	const [open, setOpen] = useState(false);
-	useEffect(() => {
-		const handleKeyDown = (event: KeyboardEvent) => {
-			if (
-				(event.key === "K" || event.key === "k") &&
-				(event.metaKey || event.ctrlKey)
-			) {
-				event.preventDefault();
-				setOpen((oldState) => !oldState);
-			}
-		};
-		document.addEventListener("keydown", handleKeyDown);
-		return () => {
-			document.removeEventListener("keydown", handleKeyDown);
-		};
-	}, []);
-	return (
-		<>
-			<ChatModal key={flow.id} flow={flow} open={open} setOpen={setOpen} />
-			<ChatTrigger open={open} setOpen={setOpen} />
-		</>
-	);
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        (event.key === "K" || event.key === "k") &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault();
+        setOpen((oldState) => !oldState);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+  return (
+    <>
+      <ChatModal key={flow.id} flow={flow} open={open} setOpen={setOpen} />
+      <ChatTrigger open={open} setOpen={setOpen} />
+    </>
+  );
 }
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 2da5323e8..9bf256594 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -6,60 +6,60 @@ import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
 
 export default function CodeAreaComponent({
-	value,
-	onChange,
-	disabled,
+  value,
+  onChange,
+  disabled,
 }: TextAreaComponentType) {
-	const [myValue, setMyValue] = useState(value);
-	const { openPopUp } = useContext(PopUpContext);
-	useEffect(() => {
-		if (disabled) {
-			setMyValue("");
-			onChange("");
-		}
-	}, [disabled, onChange]);
-	return (
-		<div
-			className={
-				disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
-			}
-		>
-			<div className="w-full flex items-center gap-3">
-				<span
-					onClick={() => {
-						openPopUp(
-							<CodeAreaModal
-								value={myValue}
-								setValue={(t: string) => {
-									setMyValue(t);
-									onChange(t);
-								}}
-							/>
-						);
-					}}
-					className={
-						"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
-						(disabled ? " bg-gray-200" : "")
-					}
-				>
-					{myValue !== "" ? myValue : "Text empty"}
-				</span>
-				<button
-					onClick={() => {
-						openPopUp(
-							<CodeAreaModal
-								value={myValue}
-								setValue={(t: string) => {
-									setMyValue(t);
-									onChange(t);
-								}}
-							/>
-						);
-					}}
-				>
-					<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
-				</button>
-			</div>
-		</div>
-	);
+  const [myValue, setMyValue] = useState(value);
+  const { openPopUp } = useContext(PopUpContext);
+  useEffect(() => {
+    if (disabled) {
+      setMyValue("");
+      onChange("");
+    }
+  }, [disabled, onChange]);
+  return (
+    <div
+      className={
+        disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
+      }
+    >
+      <div className="w-full flex items-center gap-3">
+        <span
+          onClick={() => {
+            openPopUp(
+              <CodeAreaModal
+                value={myValue}
+                setValue={(t: string) => {
+                  setMyValue(t);
+                  onChange(t);
+                }}
+              />
+            );
+          }}
+          className={
+            "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+            (disabled ? " bg-gray-200" : "")
+          }
+        >
+          {myValue !== "" ? myValue : "Text empty"}
+        </span>
+        <button
+          onClick={() => {
+            openPopUp(
+              <CodeAreaModal
+                value={myValue}
+                setValue={(t: string) => {
+                  setMyValue(t);
+                  onChange(t);
+                }}
+              />
+            );
+          }}
+        >
+          <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
+        </button>
+      </div>
+    </div>
+  );
 }
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 92085d8b8..bb4cd621c 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -5,90 +5,90 @@ import { DropDownComponentType } from "../../types/components";
 import { classNames } from "../../utils";
 
 export default function Dropdown({
-	value,
-	options,
-	onSelect,
+  value,
+  options,
+  onSelect,
 }: DropDownComponentType) {
-	let [internalValue, setInternalValue] = useState(
-		value === "" || !value ? "Choose an option" : value
-	);
-	return (
-		<>
-			<Listbox
-				value={internalValue}
-				onChange={(value) => {
-					setInternalValue(value);
-					onSelect(value);
-				}}
-			>
-				{({ open }) => (
-					<>
-						<div className="relative mt-1">
-							<Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white dark:bg-gray-900 py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm">
-								<span className="block w-max truncate">{internalValue}</span>
-								<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-									<ChevronUpDownIcon
-										className="h-5 w-5 text-gray-400"
-										aria-hidden="true"
-									/>
-								</span>
-							</Listbox.Button>
+  let [internalValue, setInternalValue] = useState(
+    value === "" || !value ? "Choose an option" : value
+  );
+  return (
+    <>
+      <Listbox
+        value={internalValue}
+        onChange={(value) => {
+          setInternalValue(value);
+          onSelect(value);
+        }}
+      >
+        {({ open }) => (
+          <>
+            <div className="relative mt-1">
+              <Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white dark:bg-gray-900 py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm">
+                <span className="block w-max truncate">{internalValue}</span>
+                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                  <ChevronUpDownIcon
+                    className="h-5 w-5 text-gray-400"
+                    aria-hidden="true"
+                  />
+                </span>
+              </Listbox.Button>
 
-							<Transition
-								show={open}
-								as={Fragment}
-								leave="transition ease-in duration-100"
-								leaveFrom="opacity-100"
-								leaveTo="opacity-0"
-							>
-								<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full dark:bg-gray-800 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-									{options.map((option, id) => (
-										<Listbox.Option
-											key={id}
-											className={({ active }) =>
-												classNames(
-													active
-														? "text-white bg-indigo-600 dark:bg-indigo-500"
-														: "text-gray-900",
-													"relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800"
-												)
-											}
-											value={option}
-										>
-											{({ selected, active }) => (
-												<>
-													<span
-														className={classNames(
-															selected ? "font-semibold" : "font-normal",
-															"block truncate"
-														)}
-													>
-														{option}
-													</span>
+              <Transition
+                show={open}
+                as={Fragment}
+                leave="transition ease-in duration-100"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full dark:bg-gray-800 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                  {options.map((option, id) => (
+                    <Listbox.Option
+                      key={id}
+                      className={({ active }) =>
+                        classNames(
+                          active
+                            ? "text-white bg-indigo-600 dark:bg-indigo-500"
+                            : "text-gray-900",
+                          "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800"
+                        )
+                      }
+                      value={option}
+                    >
+                      {({ selected, active }) => (
+                        <>
+                          <span
+                            className={classNames(
+                              selected ? "font-semibold" : "font-normal",
+                              "block truncate"
+                            )}
+                          >
+                            {option}
+                          </span>
 
-													{selected ? (
-														<span
-															className={classNames(
-																active ? "text-white" : "text-indigo-600",
-																"absolute inset-y-0 right-0 flex items-center pr-4"
-															)}
-														>
-															<CheckIcon
-																className="h-5 w-5"
-																aria-hidden="true"
-															/>
-														</span>
-													) : null}
-												</>
-											)}
-										</Listbox.Option>
-									))}
-								</Listbox.Options>
-							</Transition>
-						</div>
-					</>
-				)}
-			</Listbox>
-		</>
-	);
+                          {selected ? (
+                            <span
+                              className={classNames(
+                                active ? "text-white" : "text-indigo-600",
+                                "absolute inset-y-0 right-0 flex items-center pr-4"
+                              )}
+                            >
+                              <CheckIcon
+                                className="h-5 w-5"
+                                aria-hidden="true"
+                              />
+                            </span>
+                          ) : null}
+                        </>
+                      )}
+                    </Listbox.Option>
+                  ))}
+                </Listbox.Options>
+              </Transition>
+            </div>
+          </>
+        )}
+      </Listbox>
+    </>
+  );
 }
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 2752db43c..f3678b0c1 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -3,33 +3,32 @@ import { FloatComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
 
 export default function FloatComponent({
-	value,
-	onChange,
-	disabled,
+  value,
+  onChange,
+  disabled,
 }: FloatComponentType) {
-	const [myValue, setMyValue] = useState(value ?? "");
-	useEffect(() => {
-		if (disabled) {
-			setMyValue("");
-			onChange("");
-		}
-	}, [disabled, onChange]);
-	return (
-		<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
-			<input
-				type="number"
-				value={myValue}
-				className={
-					"block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
-					(disabled ? " bg-gray-200 dark:bg-gray-700" : "")
-				}
-				placeholder="Type a number from zero to one"
-				onChange={(e) => {
-					setMyValue(e.target.value);
-					onChange(e.target.value);
-				}}
-				
-			/>
-		</div>
-	);
+  const [myValue, setMyValue] = useState(value ?? "");
+  useEffect(() => {
+    if (disabled) {
+      setMyValue("");
+      onChange("");
+    }
+  }, [disabled, onChange]);
+  return (
+    <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
+      <input
+        type="number"
+        value={myValue}
+        className={
+          "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+          (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
+        }
+        placeholder="Type a number from zero to one"
+        onChange={(e) => {
+          setMyValue(e.target.value);
+          onChange(e.target.value);
+        }}
+      />
+    </div>
+  );
 }
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 648458f2b..8f8f4c587 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -4,85 +4,84 @@ import { classNames } from "../../utils";
 import { TabsContext } from "../../contexts/tabsContext";
 
 export default function InputComponent({
-	value,
-	onChange,
-	disabled,
-	password,
+  value,
+  onChange,
+  disabled,
+  password,
 }: InputComponentType) {
-	const [myValue, setMyValue] = useState(value ?? "");
-	const [pwdVisible, setPwdVisible] = useState(false);
-	useEffect(() => {
-		if (disabled) {
-			setMyValue("");
-			onChange("");
-		}
-	}, [disabled, onChange]);
-	return (
-		<div
-			className={
-				disabled
-					? "relative pointer-events-none cursor-not-allowed"
-					: "relative"
-			}
-		>
-			<input
-				value={myValue}
-				
-				className={classNames(
-					"block w-full pr-12 form-input dark:bg-gray-900 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
-					disabled ? " bg-gray-200 dark:bg-gray-700" : "",
-					password && !pwdVisible && myValue !== "" ? "password" : ""
-				)}
-				placeholder="Type a text"
-				onChange={(e) => {
-					setMyValue(e.target.value);
-					onChange(e.target.value);
-				}}
-			/>
-			<button
-				className="absolute inset-y-0 right-0 items-center px-4 text-gray-600"
-				onClick={() => {
-					setPwdVisible(!pwdVisible);
-				}}
-			>
-				{password &&
-					(pwdVisible ? (
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 24 24"
-							strokeWidth={1.5}
-							stroke="currentColor"
-							className="w-5 h-5"
-						>
-							<path
-								strokeLinecap="round"
-								strokeLinejoin="round"
-								d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
-							/>
-						</svg>
-					) : (
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 24 24"
-							strokeWidth={1.5}
-							stroke="currentColor"
-							className="w-5 h-5"
-						>
-							<path
-								strokeLinecap="round"
-								strokeLinejoin="round"
-								d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
-							/>
-							<path
-								strokeLinecap="round"
-								strokeLinejoin="round"
-								d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-							/>
-						</svg>
-					))}
-			</button>
-		</div>
-	);
+  const [myValue, setMyValue] = useState(value ?? "");
+  const [pwdVisible, setPwdVisible] = useState(false);
+  useEffect(() => {
+    if (disabled) {
+      setMyValue("");
+      onChange("");
+    }
+  }, [disabled, onChange]);
+  return (
+    <div
+      className={
+        disabled
+          ? "relative pointer-events-none cursor-not-allowed"
+          : "relative"
+      }
+    >
+      <input
+        value={myValue}
+        className={classNames(
+          "block w-full pr-12 form-input dark:bg-gray-900 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
+          disabled ? " bg-gray-200 dark:bg-gray-700" : "",
+          password && !pwdVisible && myValue !== "" ? "password" : ""
+        )}
+        placeholder="Type a text"
+        onChange={(e) => {
+          setMyValue(e.target.value);
+          onChange(e.target.value);
+        }}
+      />
+      <button
+        className="absolute inset-y-0 right-0 items-center px-4 text-gray-600"
+        onClick={() => {
+          setPwdVisible(!pwdVisible);
+        }}
+      >
+        {password &&
+          (pwdVisible ? (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+              className="w-5 h-5"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+              />
+            </svg>
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+              className="w-5 h-5"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+              />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+              />
+            </svg>
+          ))}
+      </button>
+    </div>
+  );
 }
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 01a500f91..8b998c731 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -4,83 +4,83 @@ import { alertContext } from "../../contexts/alertContext";
 import { FileComponentType } from "../../types/components";
 
 export default function InputFileComponent({
-	value,
-	onChange,
-	disabled,
-	suffixes,
-	fileTypes,
-	onFileChange,
+  value,
+  onChange,
+  disabled,
+  suffixes,
+  fileTypes,
+  onFileChange,
 }: FileComponentType) {
-	const [myValue, setMyValue] = useState(value);
-	const { setErrorData } = useContext(alertContext);
-	useEffect(() => {
-		if (disabled) {
-			setMyValue("");
-			onChange("");
-			onFileChange("");
-		}
-	}, [disabled, onChange]);
+  const [myValue, setMyValue] = useState(value);
+  const { setErrorData } = useContext(alertContext);
+  useEffect(() => {
+    if (disabled) {
+      setMyValue("");
+      onChange("");
+      onFileChange("");
+    }
+  }, [disabled, onChange]);
 
-	function attachFile(fileReadEvent: ProgressEvent<FileReader>) {
-		fileReadEvent.preventDefault();
-		const file = fileReadEvent.target.result;
-		onFileChange(file as string);
-	}
+  function attachFile(fileReadEvent: ProgressEvent<FileReader>) {
+    fileReadEvent.preventDefault();
+    const file = fileReadEvent.target.result;
+    onFileChange(file as string);
+  }
 
-	function checkFileType(fileName: string): boolean {
-		for (let index = 0; index < suffixes.length; index++) {
-			if (fileName.endsWith(suffixes[index])) {
-				return true;
-			}
-		}
-		return false;
-	}
+  function checkFileType(fileName: string): boolean {
+    for (let index = 0; index < suffixes.length; index++) {
+      if (fileName.endsWith(suffixes[index])) {
+        return true;
+      }
+    }
+    return false;
+  }
 
-	const handleButtonClick = () => {
-		const input = document.createElement("input");
-		input.type = "file";
-		input.accept = suffixes.join(",");
-		input.style.display = "none";
-		input.multiple = false;
-		input.onchange = (e: Event) => {
-			const file = (e.target as HTMLInputElement).files?.[0];
-			const fileData = new FileReader();
-			fileData.onload = attachFile;
-			if (file && checkFileType(file.name)) {
-				fileData.readAsDataURL(file);
-				setMyValue(file.name);
-				onChange(file.name);
-			} else {
-				setErrorData({
-					title:
-						"Please select a valid file. Only files this files are allowed:",
-					list: fileTypes,
-				});
-			}
-		};
-		input.click();
-	};
+  const handleButtonClick = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = suffixes.join(",");
+    input.style.display = "none";
+    input.multiple = false;
+    input.onchange = (e: Event) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      const fileData = new FileReader();
+      fileData.onload = attachFile;
+      if (file && checkFileType(file.name)) {
+        fileData.readAsDataURL(file);
+        setMyValue(file.name);
+        onChange(file.name);
+      } else {
+        setErrorData({
+          title:
+            "Please select a valid file. Only files this files are allowed:",
+          list: fileTypes,
+        });
+      }
+    };
+    input.click();
+  };
 
-	return (
-		<div
-			className={
-				disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
-			}
-		>
-			<div className="w-full flex items-center gap-3">
-				<span
-					onClick={handleButtonClick}
-					className={
-						"truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
-						(disabled ? " bg-gray-200" : "")
-					}
-				>
-					{myValue !== "" ? myValue : "No file"}
-				</span>
-				<button onClick={handleButtonClick}>
-					<DocumentMagnifyingGlassIcon className="w-8 h-8  hover:text-blue-600" />
-				</button>
-			</div>
-		</div>
-	);
+  return (
+    <div
+      className={
+        disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
+      }
+    >
+      <div className="w-full flex items-center gap-3">
+        <span
+          onClick={handleButtonClick}
+          className={
+            "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+            (disabled ? " bg-gray-200" : "")
+          }
+        >
+          {myValue !== "" ? myValue : "No file"}
+        </span>
+        <button onClick={handleButtonClick}>
+          <DocumentMagnifyingGlassIcon className="w-8 h-8  hover:text-blue-600" />
+        </button>
+      </div>
+    </div>
+  );
 }
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 01f783ad6..ea47af8f9 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -6,72 +6,72 @@ import { TabsContext } from "../../contexts/tabsContext";
 import _ from "lodash";
 
 export default function InputListComponent({
-	value,
-	onChange,
-	disabled,
+  value,
+  onChange,
+  disabled,
 }: InputListComponentType) {
-	const [inputList, setInputList] = useState(value ?? [""]);
-	useEffect(() => {
-		if (disabled) {
-			setInputList([""]);
-			onChange([""]);
-		}
-	}, [disabled, onChange]);
-	return (
-		<div
-			className={
-				(disabled ? "pointer-events-none cursor-not-allowed" : "") +
-				"flex flex-col gap-3"
-			}
-		>
-			{inputList.map((i, idx) => (
-				<div key={idx} className="w-full flex gap-3">
-					<input
-						type="text"
-						value={i}
-						className={
-							"block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
-							(disabled ? " bg-gray-200" : "")
-						}
-						placeholder="Type a text"
-						onChange={(e) => {
-							setInputList((old) => {
-								let newInputList = _.cloneDeep(old);
-								newInputList[idx] = e.target.value;
-								return newInputList;
-							});
-							onChange(inputList);
-						}}
-					/>
-					{idx === inputList.length - 1 ? (
-						<button
-							onClick={() => {
-								setInputList((old) => {
-									let newInputList = _.cloneDeep(old);
-									newInputList.push("");
-									return newInputList;
-								});
-								onChange(inputList);
-							}}
-						>
-							<PlusIcon className="w-4 h-4 hover:text-blue-600" />
-						</button>
-					) : (
-						<button
-							onClick={() => {
-								setInputList((old) => {
-									let newInputList = _.cloneDeep(old);
-									newInputList.splice(idx, 1);
-									return newInputList;
-								});
-								onChange(inputList);
-							}}
-						>
-							<XMarkIcon className="w-4 h-4 hover:text-red-600" />
-						</button>
-					)}
-				</div>
-			))}
-		</div>
-	);
+  const [inputList, setInputList] = useState(value ?? [""]);
+  useEffect(() => {
+    if (disabled) {
+      setInputList([""]);
+      onChange([""]);
+    }
+  }, [disabled, onChange]);
+  return (
+    <div
+      className={
+        (disabled ? "pointer-events-none cursor-not-allowed" : "") +
+        "flex flex-col gap-3"
+      }
+    >
+      {inputList.map((i, idx) => (
+        <div key={idx} className="w-full flex gap-3">
+          <input
+            type="text"
+            value={i}
+            className={
+              "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+              (disabled ? " bg-gray-200" : "")
+            }
+            placeholder="Type a text"
+            onChange={(e) => {
+              setInputList((old) => {
+                let newInputList = _.cloneDeep(old);
+                newInputList[idx] = e.target.value;
+                return newInputList;
+              });
+              onChange(inputList);
+            }}
+          />
+          {idx === inputList.length - 1 ? (
+            <button
+              onClick={() => {
+                setInputList((old) => {
+                  let newInputList = _.cloneDeep(old);
+                  newInputList.push("");
+                  return newInputList;
+                });
+                onChange(inputList);
+              }}
+            >
+              <PlusIcon className="w-4 h-4 hover:text-blue-600" />
+            </button>
+          ) : (
+            <button
+              onClick={() => {
+                setInputList((old) => {
+                  let newInputList = _.cloneDeep(old);
+                  newInputList.splice(idx, 1);
+                  return newInputList;
+                });
+                onChange(inputList);
+              }}
+            >
+              <XMarkIcon className="w-4 h-4 hover:text-red-600" />
+            </button>
+          )}
+        </div>
+      ))}
+    </div>
+  );
 }
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index b2713b369..80f687924 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -3,50 +3,48 @@ import { FloatComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
 
 export default function IntComponent({
-	value,
-	onChange,
-	disabled,
+  value,
+  onChange,
+  disabled,
 }: FloatComponentType) {
-	const [myValue, setMyValue] = useState(value ?? "");
-	useEffect(() => {
-		if (disabled) {
-			setMyValue("");
-			onChange("");
-		}
-	}, [disabled, onChange]);
-	return (
-		<div
-			className={
-				disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
-			}
-		>
-			<input
-				onKeyDown={(event) => {
-					if (
-						event.key !== "Backspace" &&
-						event.key !== "Enter" &&
-						event.key !== "Delete" &&
-						event.key !== "ArrowLeft" &&
-						event.key !== "ArrowRight" &&
-						!/^[-]?\d*$/.test(event.key)
-					) {
-						event.preventDefault();
-					}
-				}}
-				type="number"
-				value={myValue}
-				className={
-					"block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
-					(disabled ? " bg-gray-200 dark:bg-gray-700" : "")
-				}
-				placeholder="Type a integer number"
-				onChange={(e) => {
-					setMyValue(e.target.value);
-					onChange(e.target.value);
-				}}
-				
-			/>
-			
-		</div>
-	);
+  const [myValue, setMyValue] = useState(value ?? "");
+  useEffect(() => {
+    if (disabled) {
+      setMyValue("");
+      onChange("");
+    }
+  }, [disabled, onChange]);
+  return (
+    <div
+      className={
+        disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
+      }
+    >
+      <input
+        onKeyDown={(event) => {
+          if (
+            event.key !== "Backspace" &&
+            event.key !== "Enter" &&
+            event.key !== "Delete" &&
+            event.key !== "ArrowLeft" &&
+            event.key !== "ArrowRight" &&
+            !/^[-]?\d*$/.test(event.key)
+          ) {
+            event.preventDefault();
+          }
+        }}
+        type="number"
+        value={myValue}
+        className={
+          "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+          (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
+        }
+        placeholder="Type a integer number"
+        onChange={(e) => {
+          setMyValue(e.target.value);
+          onChange(e.target.value);
+        }}
+      />
+    </div>
+  );
 }
diff --git a/src/frontend/src/components/loadingComponent/index.tsx b/src/frontend/src/components/loadingComponent/index.tsx
index 43d6d9d75..42ad18c1e 100644
--- a/src/frontend/src/components/loadingComponent/index.tsx
+++ b/src/frontend/src/components/loadingComponent/index.tsx
@@ -1,28 +1,28 @@
 type LoadingComponentProps = {
-	remSize: number;
+  remSize: number;
 };
 
 export default function LoadingComponent({ remSize }: LoadingComponentProps) {
-	return (
-		<div role="status" className="w-min m-auto">
-			<svg
-				aria-hidden="true"
-				className={`w-${remSize} h-${remSize} mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600`}
-				viewBox="0 0 100 101"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-					fill="currentColor"
-				/>
-				<path
-					d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-					fill="currentFill"
-				/>
-			</svg>
-			<br></br>
-			<span className="animate-pulse text-blue-600 text-lg">Loading...</span>
-		</div>
-	);
+  return (
+    <div role="status" className="w-min m-auto">
+      <svg
+        aria-hidden="true"
+        className={`w-${remSize} h-${remSize} mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600`}
+        viewBox="0 0 100 101"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor"
+        />
+        <path
+          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+          fill="currentFill"
+        />
+      </svg>
+      <br></br>
+      <span className="animate-pulse text-blue-600 text-lg">Loading...</span>
+    </div>
+  );
 }
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 842e5e7d8..6182bd075 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -7,60 +7,60 @@ import { TextAreaComponentType } from "../../types/components";
 import PromptAreaModal from "../../modals/promptModal";
 
 export default function PromptAreaComponent({
-	value,
-	onChange,
-	disabled,
+  value,
+  onChange,
+  disabled,
 }: TextAreaComponentType) {
-	const [myValue, setMyValue] = useState(value);
-	const { openPopUp } = useContext(PopUpContext);
-	useEffect(() => {
-		if (disabled) {
-			setMyValue("");
-			onChange("");
-		}
-	}, [disabled, onChange]);
-	return (
-		<div
-			className={
-				disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full"
-			}
-		>
-			<div className="w-full flex items-center gap-3">
-				<span
-					onClick={() => {
-						openPopUp(
-							<PromptAreaModal
-								value={myValue}
-								setValue={(t: string) => {
-									setMyValue(t);
-									onChange(t);
-								}}
-							/>
-						);
-					}}
-					className={
-						"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
-						(disabled ? " bg-gray-200" : "")
-					}
-				>
-					{myValue !== "" ? myValue : "Text empty"}
-				</span>
-				<button
-					onClick={() => {
-						openPopUp(
-							<PromptAreaModal
-								value={myValue}
-								setValue={(t: string) => {
-									setMyValue(t);
-									onChange(t);
-								}}
-							/>
-						);
-					}}
-				>
-					<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
-				</button>
-			</div>
-		</div>
-	);
+  const [myValue, setMyValue] = useState(value);
+  const { openPopUp } = useContext(PopUpContext);
+  useEffect(() => {
+    if (disabled) {
+      setMyValue("");
+      onChange("");
+    }
+  }, [disabled, onChange]);
+  return (
+    <div
+      className={
+        disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full"
+      }
+    >
+      <div className="w-full flex items-center gap-3">
+        <span
+          onClick={() => {
+            openPopUp(
+              <PromptAreaModal
+                value={myValue}
+                setValue={(t: string) => {
+                  setMyValue(t);
+                  onChange(t);
+                }}
+              />
+            );
+          }}
+          className={
+            "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+            (disabled ? " bg-gray-200" : "")
+          }
+        >
+          {myValue !== "" ? myValue : "Text empty"}
+        </span>
+        <button
+          onClick={() => {
+            openPopUp(
+              <PromptAreaModal
+                value={myValue}
+                setValue={(t: string) => {
+                  setMyValue(t);
+                  onChange(t);
+                }}
+              />
+            );
+          }}
+        >
+          <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
+        </button>
+      </div>
+    </div>
+  );
 }
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 3737e02f0..a2fbad22a 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -4,7 +4,11 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
 
-export default function TextAreaComponent({ value, onChange, disabled }:TextAreaComponentType) {
+export default function TextAreaComponent({
+  value,
+  onChange,
+  disabled,
+}: TextAreaComponentType) {
   const [myValue, setMyValue] = useState(value);
   const { openPopUp } = useContext(PopUpContext);
   useEffect(() => {
@@ -16,16 +20,39 @@ export default function TextAreaComponent({ value, onChange, disabled }:TextArea
   return (
     <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
       <div className="w-full flex items-center gap-3">
-        <span onClick={()=>{openPopUp(<TextAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}
+        <span
+          onClick={() => {
+            openPopUp(
+              <TextAreaModal
+                value={myValue}
+                setValue={(t: string) => {
+                  setMyValue(t);
+                  onChange(t);
+                }}
+              />
+            );
+          }}
           className={
             "truncate block w-full text-gray-500 dark:text-gray-100 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
             (disabled ? " bg-gray-200" : "")
           }
         >
-            {myValue !== "" ? myValue : 'Text empty'}
+          {myValue !== "" ? myValue : "Text empty"}
         </span>
-        <button onClick={()=>{openPopUp(<TextAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}>
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
+        <button
+          onClick={() => {
+            openPopUp(
+              <TextAreaModal
+                value={myValue}
+                setValue={(t: string) => {
+                  setMyValue(t);
+                  onChange(t);
+                }}
+              />
+            );
+          }}
+        >
+          <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
         </button>
       </div>
     </div>
diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx
index eed5bc278..f7140bdee 100644
--- a/src/frontend/src/components/toggleComponent/index.tsx
+++ b/src/frontend/src/components/toggleComponent/index.tsx
@@ -4,59 +4,57 @@ import { useEffect } from "react";
 import { ToggleComponentType } from "../../types/components";
 
 export default function ToggleComponent({
-	enabled,
-	setEnabled,
-	disabled,
+  enabled,
+  setEnabled,
+  disabled,
 }: ToggleComponentType) {
-	useEffect(() => {
-		if (disabled) {
-			setEnabled(false);
-		}
-	}, [disabled, setEnabled]);
-	return (
-		<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
-			<Switch
-				checked={enabled}
-				onChange={(x: boolean) => {
-					setEnabled(x);
-				}}
-				className={classNames(
-					enabled ? 'bg-indigo-600' : 'bg-gray-200',
-					'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2'
-				  )}
-			>
-				<span className="sr-only">Use setting</span>
-				<span
-					className={classNames(
-						enabled ? "translate-x-5" : "translate-x-0",
-						"pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out",
-						disabled
-							? "bg-gray-200 dark:bg-gray-600"
-							: "bg-white dark:bg-gray-800"
-					)}
-				>
-					<span
-						className={classNames(
-							enabled
-								? "opacity-0 ease-out duration-100"
-								: "opacity-100 ease-in duration-200",
-							"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
-						)}
-						aria-hidden="true"
-					>
-					</span>
-					<span
-						className={classNames(
-							enabled
-								? "opacity-100 ease-in duration-200"
-								: "opacity-0 ease-out duration-100",
-							"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
-						)}
-						aria-hidden="true"
-					>
-					</span>
-				</span>
-			</Switch>
-		</div>
-	);
+  useEffect(() => {
+    if (disabled) {
+      setEnabled(false);
+    }
+  }, [disabled, setEnabled]);
+  return (
+    <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
+      <Switch
+        checked={enabled}
+        onChange={(x: boolean) => {
+          setEnabled(x);
+        }}
+        className={classNames(
+          enabled ? "bg-indigo-600" : "bg-gray-200",
+          "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
+        )}
+      >
+        <span className="sr-only">Use setting</span>
+        <span
+          className={classNames(
+            enabled ? "translate-x-5" : "translate-x-0",
+            "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out",
+            disabled
+              ? "bg-gray-200 dark:bg-gray-600"
+              : "bg-white dark:bg-gray-800"
+          )}
+        >
+          <span
+            className={classNames(
+              enabled
+                ? "opacity-0 ease-out duration-100"
+                : "opacity-100 ease-in duration-200",
+              "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
+            )}
+            aria-hidden="true"
+          ></span>
+          <span
+            className={classNames(
+              enabled
+                ? "opacity-100 ease-in duration-200"
+                : "opacity-0 ease-out duration-100",
+              "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
+            )}
+            aria-hidden="true"
+          ></span>
+        </span>
+      </Switch>
+    </div>
+  );
 }
diff --git a/src/frontend/src/contexts/alertContext.tsx b/src/frontend/src/contexts/alertContext.tsx
index ef18ade39..f85f858de 100644
--- a/src/frontend/src/contexts/alertContext.tsx
+++ b/src/frontend/src/contexts/alertContext.tsx
@@ -5,161 +5,161 @@ import _ from "lodash";
 
 //types for alertContextType
 type alertContextType = {
-	errorData: { title: string; list?: Array<string> };
-	setErrorData: (newState: { title: string; list?: Array<string> }) => void;
-	errorOpen: boolean;
-	setErrorOpen: (newState: boolean) => void;
-	noticeData: { title: string; link?: string };
-	setNoticeData: (newState: { title: string; link?: string }) => void;
-	noticeOpen: boolean;
-	setNoticeOpen: (newState: boolean) => void;
-	successData: { title: string };
-	setSuccessData: (newState: { title: string }) => void;
-	successOpen: boolean;
-	setSuccessOpen: (newState: boolean) => void;
-	notificationCenter: boolean;
-	setNotificationCenter: (newState: boolean) => void;
-	notificationList: Array<AlertItemType>;
-	pushNotificationList: (Object: AlertItemType) => void;
-	clearNotificationList: () => void;
-	removeFromNotificationList: (index: string) => void;
+  errorData: { title: string; list?: Array<string> };
+  setErrorData: (newState: { title: string; list?: Array<string> }) => void;
+  errorOpen: boolean;
+  setErrorOpen: (newState: boolean) => void;
+  noticeData: { title: string; link?: string };
+  setNoticeData: (newState: { title: string; link?: string }) => void;
+  noticeOpen: boolean;
+  setNoticeOpen: (newState: boolean) => void;
+  successData: { title: string };
+  setSuccessData: (newState: { title: string }) => void;
+  successOpen: boolean;
+  setSuccessOpen: (newState: boolean) => void;
+  notificationCenter: boolean;
+  setNotificationCenter: (newState: boolean) => void;
+  notificationList: Array<AlertItemType>;
+  pushNotificationList: (Object: AlertItemType) => void;
+  clearNotificationList: () => void;
+  removeFromNotificationList: (index: string) => void;
 };
 
 //initial values to alertContextType
 const initialValue: alertContextType = {
-	errorData: { title: "", list: [] },
-	setErrorData: () => {},
-	errorOpen: false,
-	setErrorOpen: () => {},
-	noticeData: { title: "", link: "" },
-	setNoticeData: () => {},
-	noticeOpen: false,
-	setNoticeOpen: () => {},
-	successData: { title: "" },
-	setSuccessData: () => {},
-	successOpen: false,
-	setSuccessOpen: () => {},
-	notificationCenter: false,
-	setNotificationCenter: () => {},
-	notificationList: [],
-	pushNotificationList: () => {},
-	clearNotificationList: () => {},
-	removeFromNotificationList: () => {},
+  errorData: { title: "", list: [] },
+  setErrorData: () => {},
+  errorOpen: false,
+  setErrorOpen: () => {},
+  noticeData: { title: "", link: "" },
+  setNoticeData: () => {},
+  noticeOpen: false,
+  setNoticeOpen: () => {},
+  successData: { title: "" },
+  setSuccessData: () => {},
+  successOpen: false,
+  setSuccessOpen: () => {},
+  notificationCenter: false,
+  setNotificationCenter: () => {},
+  notificationList: [],
+  pushNotificationList: () => {},
+  clearNotificationList: () => {},
+  removeFromNotificationList: () => {},
 };
 
 export const alertContext = createContext<alertContextType>(initialValue);
 
 export function AlertProvider({ children }: { children: ReactNode }) {
-	const [errorData, setErrorDataState] = useState<{
-		title: string;
-		list?: Array<string>;
-	}>({ title: "", list: [] });
-	const [errorOpen, setErrorOpen] = useState(false);
-	const [noticeData, setNoticeDataState] = useState<{
-		title: string;
-		link?: string;
-	}>({ title: "", link: "" });
-	const [noticeOpen, setNoticeOpen] = useState(false);
-	const [successData, setSuccessDataState] = useState<{ title: string }>({
-		title: "",
-	});
-	const [successOpen, setSuccessOpen] = useState(false);
-	const [notificationCenter, setNotificationCenter] = useState(false);
-	const [notificationList, setNotificationList] = useState([]);
-	const pushNotificationList = (notification: AlertItemType) => {
-		setNotificationList((old) => {
-			let newNotificationList = _.cloneDeep(old);
-			newNotificationList.unshift(notification);
-			return newNotificationList;
-		});
-	};
-	/**
-	 * Sets the error data state, opens the error dialog and pushes the new error notification to the notification list
-	 * @param newState An object containing the new error data, including title and optional list of error messages
-	 */
-	function setErrorData(newState: { title: string; list?: Array<string> }) {
-		setErrorDataState(newState);
-		setErrorOpen(true);
-		if (newState.title) {
-			setNotificationCenter(true);
-			pushNotificationList({
-				type: "error",
-				title: newState.title,
-				list: newState.list,
-				id: _.uniqueId(),
-			});
-		}
-	}
-	/**
-	 * Sets the state of the notice data and opens the notice modal, also adds a new notice to the notification center if the title is defined.
-	 * @param newState An object containing the title of the notice and optionally a link.
-	 */
-	function setNoticeData(newState: { title: string; link?: string }) {
-		setNoticeDataState(newState);
-		setNoticeOpen(true);
-		if (newState.title) {
-			// Add new notice to notification center
-			setNotificationCenter(true);
-			pushNotificationList({
-				type: "notice",
-				title: newState.title,
-				link: newState.link,
-				id: _.uniqueId(),
-			});
-		}
-	}
-	/**
-	 * Update the success data state and show a success alert notification.
-	 * @param newState - A state object with a "title" property to set in the success data state.
-	 */
-	function setSuccessData(newState: { title: string }) {
-		setSuccessDataState(newState); // update the success data state with the provided new state
-		setSuccessOpen(true); // open the success alert
+  const [errorData, setErrorDataState] = useState<{
+    title: string;
+    list?: Array<string>;
+  }>({ title: "", list: [] });
+  const [errorOpen, setErrorOpen] = useState(false);
+  const [noticeData, setNoticeDataState] = useState<{
+    title: string;
+    link?: string;
+  }>({ title: "", link: "" });
+  const [noticeOpen, setNoticeOpen] = useState(false);
+  const [successData, setSuccessDataState] = useState<{ title: string }>({
+    title: "",
+  });
+  const [successOpen, setSuccessOpen] = useState(false);
+  const [notificationCenter, setNotificationCenter] = useState(false);
+  const [notificationList, setNotificationList] = useState([]);
+  const pushNotificationList = (notification: AlertItemType) => {
+    setNotificationList((old) => {
+      let newNotificationList = _.cloneDeep(old);
+      newNotificationList.unshift(notification);
+      return newNotificationList;
+    });
+  };
+  /**
+   * Sets the error data state, opens the error dialog and pushes the new error notification to the notification list
+   * @param newState An object containing the new error data, including title and optional list of error messages
+   */
+  function setErrorData(newState: { title: string; list?: Array<string> }) {
+    setErrorDataState(newState);
+    setErrorOpen(true);
+    if (newState.title) {
+      setNotificationCenter(true);
+      pushNotificationList({
+        type: "error",
+        title: newState.title,
+        list: newState.list,
+        id: _.uniqueId(),
+      });
+    }
+  }
+  /**
+   * Sets the state of the notice data and opens the notice modal, also adds a new notice to the notification center if the title is defined.
+   * @param newState An object containing the title of the notice and optionally a link.
+   */
+  function setNoticeData(newState: { title: string; link?: string }) {
+    setNoticeDataState(newState);
+    setNoticeOpen(true);
+    if (newState.title) {
+      // Add new notice to notification center
+      setNotificationCenter(true);
+      pushNotificationList({
+        type: "notice",
+        title: newState.title,
+        link: newState.link,
+        id: _.uniqueId(),
+      });
+    }
+  }
+  /**
+   * Update the success data state and show a success alert notification.
+   * @param newState - A state object with a "title" property to set in the success data state.
+   */
+  function setSuccessData(newState: { title: string }) {
+    setSuccessDataState(newState); // update the success data state with the provided new state
+    setSuccessOpen(true); // open the success alert
 
-		// If the new state has a "title" property, add a new success notification to the list
-		if (newState.title) {
-			setNotificationCenter(true); // show the notification center
-			pushNotificationList({
-				// add the new notification to the list
-				type: "success",
-				title: newState.title,
-				id: _.uniqueId(),
-			});
-		}
-	}
-	function clearNotificationList() {
-		setNotificationList([]);
-	}
-	function removeFromNotificationList(index: string) {
-		// set the notification list to a new array that filters out the alert with the matching id
-		setNotificationList((prevAlertsList) =>
-			prevAlertsList.filter((alert) => alert.id !== index)
-		);
-	}
-	return (
-		<alertContext.Provider
-			value={{
-				removeFromNotificationList,
-				clearNotificationList,
-				notificationList,
-				pushNotificationList,
-				setNotificationCenter,
-				notificationCenter,
-				errorData,
-				setErrorData,
-				errorOpen,
-				setErrorOpen,
-				noticeData,
-				setNoticeData,
-				noticeOpen,
-				setNoticeOpen,
-				successData,
-				setSuccessData,
-				successOpen,
-				setSuccessOpen,
-			}}
-		>
-			{children}
-		</alertContext.Provider>
-	);
+    // If the new state has a "title" property, add a new success notification to the list
+    if (newState.title) {
+      setNotificationCenter(true); // show the notification center
+      pushNotificationList({
+        // add the new notification to the list
+        type: "success",
+        title: newState.title,
+        id: _.uniqueId(),
+      });
+    }
+  }
+  function clearNotificationList() {
+    setNotificationList([]);
+  }
+  function removeFromNotificationList(index: string) {
+    // set the notification list to a new array that filters out the alert with the matching id
+    setNotificationList((prevAlertsList) =>
+      prevAlertsList.filter((alert) => alert.id !== index)
+    );
+  }
+  return (
+    <alertContext.Provider
+      value={{
+        removeFromNotificationList,
+        clearNotificationList,
+        notificationList,
+        pushNotificationList,
+        setNotificationCenter,
+        notificationCenter,
+        errorData,
+        setErrorData,
+        errorOpen,
+        setErrorOpen,
+        noticeData,
+        setNoticeData,
+        noticeOpen,
+        setNoticeOpen,
+        successData,
+        setSuccessData,
+        successOpen,
+        setSuccessOpen,
+      }}
+    >
+      {children}
+    </alertContext.Provider>
+  );
 }
diff --git a/src/frontend/src/contexts/darkContext.tsx b/src/frontend/src/contexts/darkContext.tsx
index c383fb1e3..f612fe381 100644
--- a/src/frontend/src/contexts/darkContext.tsx
+++ b/src/frontend/src/contexts/darkContext.tsx
@@ -1,34 +1,34 @@
 import { createContext, useEffect, useState } from "react";
 
 type darkContextType = {
-	dark: {};
-	setDark: (newState: {}) => void;
+  dark: {};
+  setDark: (newState: {}) => void;
 };
 
 const initialValue = {
-	dark: {},
-	setDark: () => {},
+  dark: {},
+  setDark: () => {},
 };
 
 export const darkContext = createContext<darkContextType>(initialValue);
 
 export function DarkProvider({ children }) {
-	const [dark, setDark] = useState(false);
-	useEffect(() => {
-		if (dark) {
-			document.getElementById("body").classList.add("dark");
-		} else {
-			document.getElementById("body").classList.remove("dark");
-		}
-	}, [dark]);
-	return (
-		<darkContext.Provider
-			value={{
-				dark,
-				setDark,
-			}}
-		>
-			{children}
-		</darkContext.Provider>
-	);
+  const [dark, setDark] = useState(false);
+  useEffect(() => {
+    if (dark) {
+      document.getElementById("body").classList.add("dark");
+    } else {
+      document.getElementById("body").classList.remove("dark");
+    }
+  }, [dark]);
+  return (
+    <darkContext.Provider
+      value={{
+        dark,
+        setDark,
+      }}
+    >
+      {children}
+    </darkContext.Provider>
+  );
 }
diff --git a/src/frontend/src/contexts/index.tsx b/src/frontend/src/contexts/index.tsx
index bef4298e9..ab199368e 100644
--- a/src/frontend/src/contexts/index.tsx
+++ b/src/frontend/src/contexts/index.tsx
@@ -7,20 +7,20 @@ import { TabsProvider } from "./tabsContext";
 import { TypesProvider } from "./typesContext";
 
 export default function ContextWrapper({ children }: { children: ReactNode }) {
-	//element to wrap all context
-	return (
-		<>
-			<DarkProvider>
-				<TypesProvider>
-					<LocationProvider>
-						<AlertProvider>
-							<TabsProvider>
-								<PopUpProvider>{children}</PopUpProvider>
-							</TabsProvider>
-						</AlertProvider>
-					</LocationProvider>
-				</TypesProvider>
-			</DarkProvider>
-		</>
-	);
+  //element to wrap all context
+  return (
+    <>
+      <DarkProvider>
+        <TypesProvider>
+          <LocationProvider>
+            <AlertProvider>
+              <TabsProvider>
+                <PopUpProvider>{children}</PopUpProvider>
+              </TabsProvider>
+            </AlertProvider>
+          </LocationProvider>
+        </TypesProvider>
+      </DarkProvider>
+    </>
+  );
 }
diff --git a/src/frontend/src/contexts/locationContext.tsx b/src/frontend/src/contexts/locationContext.tsx
index a73db24fe..474062d69 100644
--- a/src/frontend/src/contexts/locationContext.tsx
+++ b/src/frontend/src/contexts/locationContext.tsx
@@ -2,78 +2,78 @@ import { createContext, ReactNode, useState } from "react";
 
 //types for location context
 type locationContextType = {
-	current: Array<string>;
-	setCurrent: (newState: Array<string>) => void;
-	isStackedOpen: boolean;
-	setIsStackedOpen: (newState: boolean) => void;
-	showSideBar: boolean;
-	setShowSideBar: (newState: boolean) => void;
-	extraNavigation: {
-		title: string;
-		options?: Array<{
-			name: string;
-			href: string;
-			icon: any;
-			children?: Array<any>;
-		}>;
-	};
-	setExtraNavigation: (newState: {
-		title: string;
-		options?: Array<{
-			name: string;
-			href: string;
-			icon: any;
-			children?: Array<any>;
-		}>;
-	}) => void;
-	extraComponent: any;
-	setExtraComponent: (newState: any) => void;
+  current: Array<string>;
+  setCurrent: (newState: Array<string>) => void;
+  isStackedOpen: boolean;
+  setIsStackedOpen: (newState: boolean) => void;
+  showSideBar: boolean;
+  setShowSideBar: (newState: boolean) => void;
+  extraNavigation: {
+    title: string;
+    options?: Array<{
+      name: string;
+      href: string;
+      icon: any;
+      children?: Array<any>;
+    }>;
+  };
+  setExtraNavigation: (newState: {
+    title: string;
+    options?: Array<{
+      name: string;
+      href: string;
+      icon: any;
+      children?: Array<any>;
+    }>;
+  }) => void;
+  extraComponent: any;
+  setExtraComponent: (newState: any) => void;
 };
 
 //initial value for location context
 const initialValue = {
-	//actual
-	current: window.location.pathname.replace(/\/$/g, "").split("/"),
-	isStackedOpen:
-		window.innerWidth > 1024 && window.location.pathname.split("/")[1]
-			? true
-			: false,
-	setCurrent: () => {},
-	setIsStackedOpen: () => {},
-	showSideBar: window.location.pathname.split("/")[1] ? true : false,
-	setShowSideBar: () => {},
-	extraNavigation: { title: "" },
-	setExtraNavigation: () => {},
-	extraComponent: <></>,
-	setExtraComponent: () => {},
+  //actual
+  current: window.location.pathname.replace(/\/$/g, "").split("/"),
+  isStackedOpen:
+    window.innerWidth > 1024 && window.location.pathname.split("/")[1]
+      ? true
+      : false,
+  setCurrent: () => {},
+  setIsStackedOpen: () => {},
+  showSideBar: window.location.pathname.split("/")[1] ? true : false,
+  setShowSideBar: () => {},
+  extraNavigation: { title: "" },
+  setExtraNavigation: () => {},
+  extraComponent: <></>,
+  setExtraComponent: () => {},
 };
 
 export const locationContext = createContext<locationContextType>(initialValue);
 
 export function LocationProvider({ children }: { children: ReactNode }) {
-	const [current, setCurrent] = useState(initialValue.current);
-	const [isStackedOpen, setIsStackedOpen] = useState(
-		initialValue.isStackedOpen
-	);
-	const [showSideBar, setShowSideBar] = useState(initialValue.showSideBar);
-	const [extraNavigation, setExtraNavigation] = useState({ title: "" });
-	const [extraComponent, setExtraComponent] = useState(<></>);
-	return (
-		<locationContext.Provider
-			value={{
-				isStackedOpen,
-				setIsStackedOpen,
-				current,
-				setCurrent,
-				showSideBar,
-				setShowSideBar,
-				extraNavigation,
-				setExtraNavigation,
-				extraComponent,
-				setExtraComponent,
-			}}
-		>
-			{children}
-		</locationContext.Provider>
-	);
+  const [current, setCurrent] = useState(initialValue.current);
+  const [isStackedOpen, setIsStackedOpen] = useState(
+    initialValue.isStackedOpen
+  );
+  const [showSideBar, setShowSideBar] = useState(initialValue.showSideBar);
+  const [extraNavigation, setExtraNavigation] = useState({ title: "" });
+  const [extraComponent, setExtraComponent] = useState(<></>);
+  return (
+    <locationContext.Provider
+      value={{
+        isStackedOpen,
+        setIsStackedOpen,
+        current,
+        setCurrent,
+        showSideBar,
+        setShowSideBar,
+        extraNavigation,
+        setExtraNavigation,
+        extraComponent,
+        setExtraComponent,
+      }}
+    >
+      {children}
+    </locationContext.Provider>
+  );
 }
diff --git a/src/frontend/src/contexts/popUpContext.tsx b/src/frontend/src/contexts/popUpContext.tsx
index b8c47dea2..371aeefce 100644
--- a/src/frontend/src/contexts/popUpContext.tsx
+++ b/src/frontend/src/contexts/popUpContext.tsx
@@ -3,31 +3,31 @@ import React, { useState } from "react";
 
 // context to set JSX element on the DOM
 export const PopUpContext = createContext({
-	openPopUp: (popUpElement: JSX.Element) => {},
-	closePopUp: () => {},
+  openPopUp: (popUpElement: JSX.Element) => {},
+  closePopUp: () => {},
 });
 
 interface PopUpProviderProps {
-	children: React.ReactNode;
+  children: React.ReactNode;
 }
 
 const PopUpProvider = ({ children }: PopUpProviderProps) => {
-	const [popUpElements, setPopUpElements] = useState<JSX.Element[]>([]);
+  const [popUpElements, setPopUpElements] = useState<JSX.Element[]>([]);
 
-	const openPopUp = (element: JSX.Element) => {
-		setPopUpElements((prevPopUps) => [element, ...prevPopUps]);
-	};
+  const openPopUp = (element: JSX.Element) => {
+    setPopUpElements((prevPopUps) => [element, ...prevPopUps]);
+  };
 
-	const closePopUp = () => {
-		setPopUpElements((prevPopUps) => prevPopUps.slice(1));
-	};
+  const closePopUp = () => {
+    setPopUpElements((prevPopUps) => prevPopUps.slice(1));
+  };
 
-	return (
-		<PopUpContext.Provider value={{ openPopUp, closePopUp }}>
-			{children}
-			{popUpElements[0]}
-		</PopUpContext.Provider>
-	);
+  return (
+    <PopUpContext.Provider value={{ openPopUp, closePopUp }}>
+      {children}
+      {popUpElements[0]}
+    </PopUpContext.Provider>
+  );
 };
 
 export default PopUpProvider;
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 997e563eb..6db425599 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -1,10 +1,10 @@
 import {
-	createContext,
-	useEffect,
-	useState,
-	useRef,
-	ReactNode,
-	useContext,
+  createContext,
+  useEffect,
+  useState,
+  useRef,
+  ReactNode,
+  useContext,
 } from "react";
 import { FlowType, NodeType } from "../types/flow";
 import { LangFlowState, TabsContextType } from "../types/tabs";
@@ -16,328 +16,332 @@ import { v4 as uuidv4 } from "uuid";
 import { addEdge } from "reactflow";
 
 const TabsContextInitialValue: TabsContextType = {
-	save: () => {},
-	tabIndex: 0,
-	setTabIndex: (index: number) => {},
-	flows: [],
-	removeFlow: (id: string) => {},
-	addFlow: (flowData?: any) => {},
-	updateFlow: (newFlow: FlowType) => {},
-	incrementNodeId: () => uuidv4(),
-	downloadFlow: (flow: FlowType) => {},
-	uploadFlow: () => {},
-	hardReset: () => {},
-	disableCopyPaste:false,
-	setDisableCopyPaste:(state:boolean)=>{},
-	getNodeId: () => "",
-	paste: (selection: {nodes: any, edges: any}, position: {x: number, y: number}) => {},
+  save: () => {},
+  tabIndex: 0,
+  setTabIndex: (index: number) => {},
+  flows: [],
+  removeFlow: (id: string) => {},
+  addFlow: (flowData?: any) => {},
+  updateFlow: (newFlow: FlowType) => {},
+  incrementNodeId: () => uuidv4(),
+  downloadFlow: (flow: FlowType) => {},
+  uploadFlow: () => {},
+  hardReset: () => {},
+  disableCopyPaste: false,
+  setDisableCopyPaste: (state: boolean) => {},
+  getNodeId: () => "",
+  paste: (
+    selection: { nodes: any; edges: any },
+    position: { x: number; y: number }
+  ) => {},
 };
 
 export const TabsContext = createContext<TabsContextType>(
-	TabsContextInitialValue
+  TabsContextInitialValue
 );
 
 export function TabsProvider({ children }: { children: ReactNode }) {
-	const { setNoticeData } = useContext(alertContext);
-	const [tabIndex, setTabIndex] = useState(0);
-	const [flows, setFlows] = useState<Array<FlowType>>([]);
-	const [id, setId] = useState(uuidv4());
-	const { templates, reactFlowInstance } = useContext(typesContext);
+  const { setNoticeData } = useContext(alertContext);
+  const [tabIndex, setTabIndex] = useState(0);
+  const [flows, setFlows] = useState<Array<FlowType>>([]);
+  const [id, setId] = useState(uuidv4());
+  const { templates, reactFlowInstance } = useContext(typesContext);
 
-	const newNodeId = useRef(uuidv4());
-	function incrementNodeId() {
-		newNodeId.current = uuidv4();
-		return newNodeId.current;
-	}
-	function save() {
-		let Saveflows = [...flows];
-		if (Saveflows.length !== 0)
-		Saveflows.forEach((flow) => {
-			if(flow.data && flow.data?.nodes) flow.data?.nodes.forEach((node) => {
-				console.log(node.data.type)
-				Object.keys(node.data.node.template).forEach((key) => {
-					console.log(node.data.node.template[key].type)
-					if(node.data.node.template[key].type==="file"){
-						console.log(node.data.node.template[key])
-						node.data.node.template[key].content = "";
-					}
-				})
-			})
-		})
-			window.localStorage.setItem(
-				"tabsData",
-				JSON.stringify({ tabIndex, flows:Saveflows, id})
-			);
-	}
-	useEffect(() => {
-		//save tabs locally
-		save();
-	}, [flows, id, tabIndex, newNodeId]);
+  const newNodeId = useRef(uuidv4());
+  function incrementNodeId() {
+    newNodeId.current = uuidv4();
+    return newNodeId.current;
+  }
+  function save() {
+    let Saveflows = [...flows];
+    if (Saveflows.length !== 0)
+      Saveflows.forEach((flow) => {
+        if (flow.data && flow.data?.nodes)
+          flow.data?.nodes.forEach((node) => {
+            console.log(node.data.type);
+            Object.keys(node.data.node.template).forEach((key) => {
+              console.log(node.data.node.template[key].type);
+              if (node.data.node.template[key].type === "file") {
+                console.log(node.data.node.template[key]);
+                node.data.node.template[key].content = "";
+              }
+            });
+          });
+      });
+    window.localStorage.setItem(
+      "tabsData",
+      JSON.stringify({ tabIndex, flows: Saveflows, id })
+    );
+  }
+  useEffect(() => {
+    //save tabs locally
+    save();
+  }, [flows, id, tabIndex, newNodeId]);
 
-	useEffect(() => {
-		//get tabs locally saved
-		let cookie = window.localStorage.getItem("tabsData");
-		if (cookie && Object.keys(templates).length > 0) {
-			let cookieObject: LangFlowState = JSON.parse(cookie);
-			cookieObject.flows.forEach((flow) => {
-				flow.data.nodes.forEach((node) => {
-					if (Object.keys(templates[node.data.type]["template"]).length > 0) {
-						node.data.node.template = updateTemplate(
-							templates[node.data.type][
-								"template"
-							] as unknown as APITemplateType,
+  useEffect(() => {
+    //get tabs locally saved
+    let cookie = window.localStorage.getItem("tabsData");
+    if (cookie && Object.keys(templates).length > 0) {
+      let cookieObject: LangFlowState = JSON.parse(cookie);
+      cookieObject.flows.forEach((flow) => {
+        flow.data.nodes.forEach((node) => {
+          if (Object.keys(templates[node.data.type]["template"]).length > 0) {
+            node.data.node.template = updateTemplate(
+              templates[node.data.type][
+                "template"
+              ] as unknown as APITemplateType,
 
-							node.data.node.template as APITemplateType
-						);
-					}
-				});
-			});
-			setTabIndex(cookieObject.tabIndex);
-			setFlows(cookieObject.flows);
-			setId(cookieObject.id);
-		}
-	}, [templates]);
+              node.data.node.template as APITemplateType
+            );
+          }
+        });
+      });
+      setTabIndex(cookieObject.tabIndex);
+      setFlows(cookieObject.flows);
+      setId(cookieObject.id);
+    }
+  }, [templates]);
 
-	function hardReset() {
-		newNodeId.current = uuidv4();
-		setTabIndex(0);
-		setFlows([]);
-		setId(uuidv4());
-	}
+  function hardReset() {
+    newNodeId.current = uuidv4();
+    setTabIndex(0);
+    setFlows([]);
+    setId(uuidv4());
+  }
 
-	/**
-	 * Downloads the current flow as a JSON file
-	 */
-	function downloadFlow(flow: FlowType) {
-		// create a data URI with the current flow data
-		const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
-			JSON.stringify(flow)
-		)}`;
+  /**
+   * Downloads the current flow as a JSON file
+   */
+  function downloadFlow(flow: FlowType) {
+    // create a data URI with the current flow data
+    const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
+      JSON.stringify(flow)
+    )}`;
 
-		// create a link element and set its properties
-		const link = document.createElement("a");
-		link.href = jsonString;
-		link.download = `${flows[tabIndex].name}.json`;
+    // create a link element and set its properties
+    const link = document.createElement("a");
+    link.href = jsonString;
+    link.download = `${flows[tabIndex].name}.json`;
 
-		// simulate a click on the link element to trigger the download
-		link.click();
-		setNoticeData({
-			title: "Warning: Critical data,JSON file may including API keys.",
-		});
-	}
+    // simulate a click on the link element to trigger the download
+    link.click();
+    setNoticeData({
+      title: "Warning: Critical data,JSON file may including API keys.",
+    });
+  }
 
-	function getNodeId() {
-		return `dndnode_` + incrementNodeId();
-	  }
+  function getNodeId() {
+    return `dndnode_` + incrementNodeId();
+  }
 
-	/**
-	 * Creates a file input and listens to a change event to upload a JSON flow file.
-	 * If the file type is application/json, the file is read and parsed into a JSON object.
-	 * The resulting JSON object is passed to the addFlow function.
-	 */
-	function uploadFlow() {
-		// create a file input
-		const input = document.createElement("input");
-		input.type = "file";
-		// add a change event listener to the file input
-		input.onchange = (e: Event) => {
-			// check if the file type is application/json
-			if ((e.target as HTMLInputElement).files[0].type === "application/json") {
-				// get the file from the file input
-				const file = (e.target as HTMLInputElement).files[0];
-				// read the file as text
-				file.text().then((text) => {
-					// parse the text into a JSON object
-					let flow: FlowType = JSON.parse(text);
+  /**
+   * Creates a file input and listens to a change event to upload a JSON flow file.
+   * If the file type is application/json, the file is read and parsed into a JSON object.
+   * The resulting JSON object is passed to the addFlow function.
+   */
+  function uploadFlow() {
+    // create a file input
+    const input = document.createElement("input");
+    input.type = "file";
+    // add a change event listener to the file input
+    input.onchange = (e: Event) => {
+      // check if the file type is application/json
+      if ((e.target as HTMLInputElement).files[0].type === "application/json") {
+        // get the file from the file input
+        const file = (e.target as HTMLInputElement).files[0];
+        // read the file as text
+        file.text().then((text) => {
+          // parse the text into a JSON object
+          let flow: FlowType = JSON.parse(text);
 
-					addFlow(flow);
-				});
-			}
-		};
-		// trigger the file input click event to open the file dialog
-		input.click();
-	}
-	/**
-	 * Removes a flow from an array of flows based on its id.
-	 * Updates the state of flows and tabIndex using setFlows and setTabIndex hooks.
-	 * @param {string} id - The id of the flow to remove.
-	 */
-	function removeFlow(id: string) {
-		setFlows((prevState) => {
-			const newFlows = [...prevState];
-			const index = newFlows.findIndex((flow) => flow.id === id);
-			if (index >= 0) {
-				if (index === tabIndex) {
-					setTabIndex(flows.length - 2);
-					newFlows.splice(index, 1);
-				} else {
-					let flowId = flows[tabIndex].id;
-					newFlows.splice(index, 1);
-					setTabIndex(newFlows.findIndex((flow) => flow.id === flowId));
-				}
-			}
-			return newFlows;
-		});
-	}
-	/**
-	 * Add a new flow to the list of flows.
-	 * @param flow Optional flow to add.
-	 */
+          addFlow(flow);
+        });
+      }
+    };
+    // trigger the file input click event to open the file dialog
+    input.click();
+  }
+  /**
+   * Removes a flow from an array of flows based on its id.
+   * Updates the state of flows and tabIndex using setFlows and setTabIndex hooks.
+   * @param {string} id - The id of the flow to remove.
+   */
+  function removeFlow(id: string) {
+    setFlows((prevState) => {
+      const newFlows = [...prevState];
+      const index = newFlows.findIndex((flow) => flow.id === id);
+      if (index >= 0) {
+        if (index === tabIndex) {
+          setTabIndex(flows.length - 2);
+          newFlows.splice(index, 1);
+        } else {
+          let flowId = flows[tabIndex].id;
+          newFlows.splice(index, 1);
+          setTabIndex(newFlows.findIndex((flow) => flow.id === flowId));
+        }
+      }
+      return newFlows;
+    });
+  }
+  /**
+   * Add a new flow to the list of flows.
+   * @param flow Optional flow to add.
+   */
 
-	function paste(selectionInstance, position){
-		let minimumX = Infinity;
-		let minimumY = Infinity;
-		let idsMap = {};
-		let nodes = reactFlowInstance.getNodes();
-		let edges = reactFlowInstance.getEdges();
-		selectionInstance.nodes.forEach((n) => {
-		  if (n.position.y < minimumY) {
-			minimumY = n.position.y;
-		  }
-		  if (n.position.x < minimumX) {
-			minimumX = n.position.x;
-		  }
-		});
+  function paste(selectionInstance, position) {
+    let minimumX = Infinity;
+    let minimumY = Infinity;
+    let idsMap = {};
+    let nodes = reactFlowInstance.getNodes();
+    let edges = reactFlowInstance.getEdges();
+    selectionInstance.nodes.forEach((n) => {
+      if (n.position.y < minimumY) {
+        minimumY = n.position.y;
+      }
+      if (n.position.x < minimumX) {
+        minimumX = n.position.x;
+      }
+    });
 
-		const insidePosition = reactFlowInstance.project(position);
-	
-		selectionInstance.nodes.forEach((n) => {
-		  // Generate a unique node ID
-		  let newId = getNodeId();
-		  idsMap[n.id] = newId;
-	
-		  // Create a new node object
-		  const newNode: NodeType = {
-			id: newId,
-			type: "genericNode",
-			position: {
-			  x: insidePosition.x + n.position.x - minimumX,
-			  y: insidePosition.y + n.position.y - minimumY,
-			},
-			data: {
-			  ...n.data,
-			  id: newId,
-			},
-		  };
-	
-		  // Add the new node to the list of nodes in state
-			nodes = nodes
-			  .map((e) => ({ ...e, selected: false }))
-			  .concat({ ...newNode, selected: false })
-		});
-		reactFlowInstance.setNodes(nodes);
-	
-		selectionInstance.edges.forEach((e) => {
-		  let source = idsMap[e.source];
-		  let target = idsMap[e.target];
-		  let sourceHandleSplitted = e.sourceHandle.split("|");
-		  let sourceHandle =
-			sourceHandleSplitted[0] +
-			"|" +
-			source +
-			"|" +
-			sourceHandleSplitted.slice(2).join("|");
-		  let targetHandleSplitted = e.targetHandle.split("|");
-		  let targetHandle =
-			targetHandleSplitted.slice(0, -1).join("|") + "|" + target;
-		  let id =
-			"reactflow__edge-" +
-			source +
-			sourceHandle +
-			"-" +
-			target +
-			targetHandle;
-		  edges = addEdge(
-			  {
-				source,
-				target,
-				sourceHandle,
-				targetHandle,
-				id,
-				className: "animate-pulse",
-				selected: false,
-			  },
-			  edges.map((e) => ({ ...e, selected: false }))
-			);
-		});
-		reactFlowInstance.setEdges(edges);
-	  };
-	
-	function addFlow(flow?: FlowType) {
-		// Get data from the flow or set it to null if there's no flow provided.
-		const data = flow?.data ? flow.data : null;
-		const description = flow?.description ? flow.description : "";
+    const insidePosition = reactFlowInstance.project(position);
 
-		if (data) {
-			data.nodes.forEach((node) => {
-				if (Object.keys(templates[node.data.type]["template"]).length > 0) {
-					node.data.node.template = updateTemplate(
-						templates[node.data.type]["template"] as unknown as APITemplateType,
-						node.data.node.template as APITemplateType
-					);
-				}
-			});
-		}
-		// Create a new flow with a default name if no flow is provided.
-		let newFlow: FlowType = {
-			description,
-			name: flow?.name ?? "New Flow",
-			id: uuidv4(),
-			data,
-		};
+    selectionInstance.nodes.forEach((n) => {
+      // Generate a unique node ID
+      let newId = getNodeId();
+      idsMap[n.id] = newId;
 
-		// Increment the ID counter.
-		setId(uuidv4());
+      // Create a new node object
+      const newNode: NodeType = {
+        id: newId,
+        type: "genericNode",
+        position: {
+          x: insidePosition.x + n.position.x - minimumX,
+          y: insidePosition.y + n.position.y - minimumY,
+        },
+        data: {
+          ...n.data,
+          id: newId,
+        },
+      };
 
-		// Add the new flow to the list of flows.
-		
-		setFlows((prevState) => {
-			const newFlows = [...prevState, newFlow];
-			return newFlows;
-		});
+      // Add the new node to the list of nodes in state
+      nodes = nodes
+        .map((e) => ({ ...e, selected: false }))
+        .concat({ ...newNode, selected: false });
+    });
+    reactFlowInstance.setNodes(nodes);
 
-		// Set the tab index to the new flow.
-		setTabIndex(flows.length);
-	}
-	/**
-	 * Updates an existing flow with new data
-	 * @param newFlow - The new flow object containing the updated data
-	 */
-	function updateFlow(newFlow: FlowType) {
-		setFlows((prevState) => {
-			const newFlows = [...prevState];
-			const index = newFlows.findIndex((flow) => flow.id === newFlow.id);
-			if (index !== -1) {
-				newFlows[index].description = newFlow.description ?? "";
-				newFlows[index].data = newFlow.data;
-				newFlows[index].name = newFlow.name;
-			}
-			return newFlows;
-		});
-	}
-	const [disableCopyPaste, setDisableCopyPaste] = useState(false);
+    selectionInstance.edges.forEach((e) => {
+      let source = idsMap[e.source];
+      let target = idsMap[e.target];
+      let sourceHandleSplitted = e.sourceHandle.split("|");
+      let sourceHandle =
+        sourceHandleSplitted[0] +
+        "|" +
+        source +
+        "|" +
+        sourceHandleSplitted.slice(2).join("|");
+      let targetHandleSplitted = e.targetHandle.split("|");
+      let targetHandle =
+        targetHandleSplitted.slice(0, -1).join("|") + "|" + target;
+      let id =
+        "reactflow__edge-" +
+        source +
+        sourceHandle +
+        "-" +
+        target +
+        targetHandle;
+      edges = addEdge(
+        {
+          source,
+          target,
+          sourceHandle,
+          targetHandle,
+          id,
+          className: "animate-pulse",
+          selected: false,
+        },
+        edges.map((e) => ({ ...e, selected: false }))
+      );
+    });
+    reactFlowInstance.setEdges(edges);
+  }
 
-	return (
-		<TabsContext.Provider
-			value={{
-				disableCopyPaste,
-				setDisableCopyPaste,
-				save,
-				hardReset,
-				tabIndex,
-				setTabIndex,
-				flows,
-				incrementNodeId,
-				removeFlow,
-				addFlow,
-				updateFlow,
-				downloadFlow,
-				uploadFlow,
-				getNodeId,
-				paste,
-			}}
-		>
-			{children}
-		</TabsContext.Provider>
-	);
-}
\ No newline at end of file
+  function addFlow(flow?: FlowType) {
+    // Get data from the flow or set it to null if there's no flow provided.
+    const data = flow?.data ? flow.data : null;
+    const description = flow?.description ? flow.description : "";
+
+    if (data) {
+      data.nodes.forEach((node) => {
+        if (Object.keys(templates[node.data.type]["template"]).length > 0) {
+          node.data.node.template = updateTemplate(
+            templates[node.data.type]["template"] as unknown as APITemplateType,
+            node.data.node.template as APITemplateType
+          );
+        }
+      });
+    }
+    // Create a new flow with a default name if no flow is provided.
+    let newFlow: FlowType = {
+      description,
+      name: flow?.name ?? "New Flow",
+      id: uuidv4(),
+      data,
+    };
+
+    // Increment the ID counter.
+    setId(uuidv4());
+
+    // Add the new flow to the list of flows.
+
+    setFlows((prevState) => {
+      const newFlows = [...prevState, newFlow];
+      return newFlows;
+    });
+
+    // Set the tab index to the new flow.
+    setTabIndex(flows.length);
+  }
+  /**
+   * Updates an existing flow with new data
+   * @param newFlow - The new flow object containing the updated data
+   */
+  function updateFlow(newFlow: FlowType) {
+    setFlows((prevState) => {
+      const newFlows = [...prevState];
+      const index = newFlows.findIndex((flow) => flow.id === newFlow.id);
+      if (index !== -1) {
+        newFlows[index].description = newFlow.description ?? "";
+        newFlows[index].data = newFlow.data;
+        newFlows[index].name = newFlow.name;
+      }
+      return newFlows;
+    });
+  }
+  const [disableCopyPaste, setDisableCopyPaste] = useState(false);
+
+  return (
+    <TabsContext.Provider
+      value={{
+        disableCopyPaste,
+        setDisableCopyPaste,
+        save,
+        hardReset,
+        tabIndex,
+        setTabIndex,
+        flows,
+        incrementNodeId,
+        removeFlow,
+        addFlow,
+        updateFlow,
+        downloadFlow,
+        uploadFlow,
+        getNodeId,
+        paste,
+      }}
+    >
+      {children}
+    </TabsContext.Provider>
+  );
+}
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 9a93a9b36..f6f46404b 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -4,40 +4,40 @@ import axios, { AxiosResponse } from "axios";
 import { FlowType } from "../../types/flow";
 
 export async function getAll(): Promise<AxiosResponse<APIObjectType>> {
-	return await axios.get(`/all`);
+  return await axios.get(`/all`);
 }
 
 export async function sendAll(data: sendAllProps) {
-	return await axios.post(`/predict`, data);
+  return await axios.post(`/predict`, data);
 }
 
 export async function checkCode(
-	code: string
+  code: string
 ): Promise<AxiosResponse<errorsTypeAPI>> {
-	return await axios.post("/validate/code", { code });
+  return await axios.post("/validate/code", { code });
 }
 
 export async function checkPrompt(
-	template: string
+  template: string
 ): Promise<AxiosResponse<PromptTypeAPI>> {
-	return await axios.post("/validate/prompt", { template });
+  return await axios.post("/validate/prompt", { template });
 }
 
 export async function getExamples(): Promise<FlowType[]> {
-	const url =
-		"https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples";
-	const response = await axios.get(url);
+  const url =
+    "https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples";
+  const response = await axios.get(url);
 
-	const jsonFiles = response.data.filter((file: any) => {
-		return file.name.endsWith(".json");
-	});
+  const jsonFiles = response.data.filter((file: any) => {
+    return file.name.endsWith(".json");
+  });
 
-	const contentsPromises = jsonFiles.map(async (file: any) => {
-		const contentResponse = await axios.get(file.download_url);
-		return contentResponse.data;
-	});
+  const contentsPromises = jsonFiles.map(async (file: any) => {
+    const contentResponse = await axios.get(file.download_url);
+    return contentResponse.data;
+  });
 
-	const contents = await Promise.all(contentsPromises);
+  const contents = await Promise.all(contentsPromises);
 
-	return contents;
+  return contents;
 }
diff --git a/src/frontend/src/index.tsx b/src/frontend/src/index.tsx
index 5857efd9a..088db15a8 100644
--- a/src/frontend/src/index.tsx
+++ b/src/frontend/src/index.tsx
@@ -5,16 +5,16 @@ import reportWebVitals from "./reportWebVitals";
 import { BrowserRouter } from "react-router-dom";
 import ContextWrapper from "./contexts";
 
-import './index.css';
+import "./index.css";
 
 const root = ReactDOM.createRoot(
-	document.getElementById("root") as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
 root.render(
-	<ContextWrapper>
-		<BrowserRouter>
-			<App />
-		</BrowserRouter>
-	</ContextWrapper>
+  <ContextWrapper>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </ContextWrapper>
 );
 reportWebVitals();
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index f14b190f5..daeafe6bb 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -1,6 +1,10 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
-import { XMarkIcon, CommandLineIcon, CodeBracketSquareIcon } from "@heroicons/react/24/outline";
+import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react";
+import {
+  XMarkIcon,
+  CommandLineIcon,
+  CodeBracketSquareIcon,
+} from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import "ace-builds/src-noconflict/mode-python";
@@ -9,42 +13,40 @@ import "ace-builds/src-noconflict/theme-twilight";
 import "ace-builds/src-noconflict/ext-language_tools";
 // import "ace-builds/webpack-resolver";
 import { darkContext } from "../../contexts/darkContext";
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-
-
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 
 export default function ApiModal({ flowName }) {
-	const [open, setOpen] = useState(true);
-	const { dark } = useContext(darkContext);
-	const { closePopUp } = useContext(PopUpContext);
-	const [activeTab, setActiveTab] = useState(0);
-	const ref = useRef();
-	const [isCopied, setIsCopied] = useState<Boolean>(false);
+  const [open, setOpen] = useState(true);
+  const { dark } = useContext(darkContext);
+  const { closePopUp } = useContext(PopUpContext);
+  const [activeTab, setActiveTab] = useState(0);
+  const ref = useRef();
+  const [isCopied, setIsCopied] = useState<Boolean>(false);
 
-	const copyToClipboard = () => {
-		if (!navigator.clipboard || !navigator.clipboard.writeText) {
-			return;
-		}
+  const copyToClipboard = () => {
+    if (!navigator.clipboard || !navigator.clipboard.writeText) {
+      return;
+    }
 
-		navigator.clipboard.writeText(tabs[activeTab].code).then(() => {
-			setIsCopied(true);
+    navigator.clipboard.writeText(tabs[activeTab].code).then(() => {
+      setIsCopied(true);
 
-			setTimeout(() => {
-				setIsCopied(false);
-			}, 2000);
-		});
-	};
-	function setModalOpen(x: boolean) {
-		setOpen(x);
-		if (x === false) {
-			setTimeout(() => {
-				closePopUp();
-			}, 300);
-		}
-	}
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2000);
+    });
+  };
+  function setModalOpen(x: boolean) {
+    setOpen(x);
+    if (x === false) {
+      setTimeout(() => {
+        closePopUp();
+      }, 300);
+    }
+  }
 
-	const pythonApiCode = `import requests
+  const pythonApiCode = `import requests
 import json
 
 API_URL = "${window.location.protocol}//${window.location.host}/predict"
@@ -58,130 +60,142 @@ def predict(message):
 
 print(predict("Your message"))`;
 
-	const pythonCode = `from langflow import load_flow_from_json
+  const pythonCode = `from langflow import load_flow_from_json
 
 flow = load_flow_from_json("${flowName}.json")
 # Now you can use it like any chain
 flow("Hey, have you heard of LangFlow?")`;
 
-	const tabs = [
-		{
-			name: "Python API",
-			mode: "python",
-			image: "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
-			code: pythonApiCode,
-		},
-		{
-			name: "Python Code",
-			mode: "python",
-			image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-			code: pythonCode,
-		},
+  const tabs = [
+    {
+      name: "Python API",
+      mode: "python",
+      image:
+        "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
+      code: pythonApiCode,
+    },
+    {
+      name: "Python Code",
+      mode: "python",
+      image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+      code: pythonCode,
+    },
+  ];
+  return (
+    <Transition.Root show={open} appear={true} as={Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-10"
+        onClose={setModalOpen}
+        initialFocus={ref}
+      >
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
 
-	]
-	return (
-		<Transition.Root show={open} appear={true} as={Fragment}>
-			<Dialog
-				as="div"
-				className="relative z-10"
-				onClose={setModalOpen}
-				initialFocus={ref}
-			>
-				<Transition.Child
-					as={Fragment}
-					enter="ease-out duration-300"
-					enterFrom="opacity-0"
-					enterTo="opacity-100"
-					leave="ease-in duration-200"
-					leaveFrom="opacity-100"
-					leaveTo="opacity-0"
-				>
-					<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-				</Transition.Child>
-
-				<div className="fixed inset-0 z-10 overflow-y-auto">
-					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-						<Transition.Child
-							as={Fragment}
-							enter="ease-out duration-300"
-							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-							enterTo="opacity-100 translate-y-0 sm:scale-100"
-							leave="ease-in duration-200"
-							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-						>
-							<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
-								<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-									<button
-										type="button"
-										className="rounded-md text-gray-400 hover:text-gray-500"
-										onClick={() => {
-											setModalOpen(false);
-										}}
-									>
-										<span className="sr-only">Close</span>
-										<XMarkIcon className="h-6 w-6" aria-hidden="true" />
-									</button>
-								</div>
-								<div className="h-full w-full flex flex-col justify-center items-center">
-									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-										<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
-											<CodeBracketSquareIcon
-												className="h-6 w-6 text-blue-600"
-												aria-hidden="true"
-											/>
-										</div>
-										<div className="mt-4 text-center sm:ml-4 sm:text-left">
-											<Dialog.Title
-												as="h3"
-												className="text-lg font-medium dark:text-white leading-10 text-gray-900"
-											>
-												Code
-											</Dialog.Title>
-										</div>
-									</div>
-									<div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
-										<div className="flex flex-col h-full w-full ">
-											<div className="flex px-5 z-10">
-												{tabs.map((tab, index) => (
-													<button onClick={() => {
-														setActiveTab(index);
-													}} className={"p-2 rounded-t-lg w-44 border border-b-0 border-gray-300 dark:border-gray-700 dark:text-gray-300 -mr-px flex justify-center items-center gap-4 " + (activeTab === index ? " bg-white dark:bg-gray-800" : "bg-gray-100 dark:bg-gray-900")}>
-														{tab.name}
-														<img src={tab.image} className="w-6" />
-													</button>
-												))}
-											</div>
-											<div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800">
-												<div className="w-full flex items-center justify-between mb-2">
-													<span className="text-sm text-gray-500 dark:text-gray-300">
-														Export your flow to use it with this code.
-													</span>
-													<button
-														className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
-														onClick={copyToClipboard}
-													>
-														{isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
-														{isCopied ? 'Copied!' : 'Copy code'}
-													</button>
-												</div>
-												<SyntaxHighlighter
-													className="h-[370px]"
-													language={tabs[activeTab].mode}
-													style={oneDark}
-													customStyle={{ margin: 0 }}
-												>
-													{tabs[activeTab].code}
-												</SyntaxHighlighter>
-											</div>
-										</div>
-									</div>
-								</div>
-							</Dialog.Panel>
-						</Transition.Child>
-					</div>
-				</div>
-			</Dialog>
-		</Transition.Root>
-	);
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+                  <button
+                    type="button"
+                    className="rounded-md text-gray-400 hover:text-gray-500"
+                    onClick={() => {
+                      setModalOpen(false);
+                    }}
+                  >
+                    <span className="sr-only">Close</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </button>
+                </div>
+                <div className="h-full w-full flex flex-col justify-center items-center">
+                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
+                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+                      <CodeBracketSquareIcon
+                        className="h-6 w-6 text-blue-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+                      >
+                        Code
+                      </Dialog.Title>
+                    </div>
+                  </div>
+                  <div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+                    <div className="flex flex-col h-full w-full ">
+                      <div className="flex px-5 z-10">
+                        {tabs.map((tab, index) => (
+                          <button
+                            onClick={() => {
+                              setActiveTab(index);
+                            }}
+                            className={
+                              "p-2 rounded-t-lg w-44 border border-b-0 border-gray-300 dark:border-gray-700 dark:text-gray-300 -mr-px flex justify-center items-center gap-4 " +
+                              (activeTab === index
+                                ? " bg-white dark:bg-gray-800"
+                                : "bg-gray-100 dark:bg-gray-900")
+                            }
+                          >
+                            {tab.name}
+                            <img src={tab.image} className="w-6" />
+                          </button>
+                        ))}
+                      </div>
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800">
+                        <div className="w-full flex items-center justify-between mb-2">
+                          <span className="text-sm text-gray-500 dark:text-gray-300">
+                            Export your flow to use it with this code.
+                          </span>
+                          <button
+                            className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
+                            onClick={copyToClipboard}
+                          >
+                            {isCopied ? (
+                              <IconCheck size={18} />
+                            ) : (
+                              <IconClipboard size={18} />
+                            )}
+                            {isCopied ? "Copied!" : "Copy code"}
+                          </button>
+                        </div>
+                        <SyntaxHighlighter
+                          className="h-[370px]"
+                          language={tabs[activeTab].mode}
+                          style={oneDark}
+                          customStyle={{ margin: 0 }}
+                        >
+                          {tabs[activeTab].code}
+                        </SyntaxHighlighter>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
 }
diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
index 049131e6b..0c19b9611 100644
--- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
+++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
@@ -13,154 +13,154 @@ import CodeAreaComponent from "../../../../components/codeAreaComponent";
 import { classNames } from "../../../../utils";
 
 export default function ModalField({ data, title, required, id, name, type }) {
-	const { save } = useContext(TabsContext);
-	const [enabled, setEnabled] = useState(
-		data.node.template[name]?.value ?? false
-	);
-	const display =
-		type === "str" ||
-		type === "int" ||
-		type === "prompt" ||
-		type === "bool" ||
-		type === "float" ||
-		type === "file" ||
-		type === "code";
+  const { save } = useContext(TabsContext);
+  const [enabled, setEnabled] = useState(
+    data.node.template[name]?.value ?? false
+  );
+  const display =
+    type === "str" ||
+    type === "int" ||
+    type === "prompt" ||
+    type === "bool" ||
+    type === "float" ||
+    type === "file" ||
+    type === "code";
 
-	return (
-		<div
-			className={classNames(
-				"flex flex-row w-full items-center justify-between",
-				display ? "" : "hidden"
-			)}
-		>
-			{display && (
-				<div>
-					<span className="mx-2 dark:text-gray-300">{title}</span>
-					<span className="text-red-600">{required ? " *" : ""}</span>
-				</div>
-			)}
+  return (
+    <div
+      className={classNames(
+        "flex flex-row w-full items-center justify-between",
+        display ? "" : "hidden"
+      )}
+    >
+      {display && (
+        <div>
+          <span className="mx-2 dark:text-gray-300">{title}</span>
+          <span className="text-red-600">{required ? " *" : ""}</span>
+        </div>
+      )}
 
-			{type === "str" && !data.node.template[name].options ? (
-				<div className="w-1/2">
-					{data.node.template[name].list ? (
-						<InputListComponent
-							disabled={false}
-							value={
-								!data.node.template[name].value ||
-								data.node.template[name].value === ""
-									? [""]
-									: data.node.template[name].value
-							}
-							onChange={(t: string[]) => {
-								data.node.template[name].value = t;
-								save();
-							}}
-						/>
-					) : data.node.template[name].multiline ? (
-						<TextAreaComponent
-							disabled={false}
-							value={data.node.template[name].value ?? ""}
-							onChange={(t: string) => {
-								data.node.template[name].value = t;
-								save();
-							}}
-						/>
-					) : (
-						<InputComponent
-							disabled={false}
-							password={data.node.template[name].password ?? false}
-							value={data.node.template[name].value ?? ""}
-							onChange={(t) => {
-								data.node.template[name].value = t;
-								save();
-							}}
-						/>
-					)}
-				</div>
-			) : type === "bool" ? (
-				<div className="ml-auto">
-					{" "}
-					<ToggleComponent
-						disabled={false}
-						enabled={enabled}
-						setEnabled={(t) => {
-							data.node.template[name].value = t;
-							setEnabled(t);
-							save();
-						}}
-					/>
-				</div>
-			) : type === "float" ? (
-				<div className="w-1/2">
-					<FloatComponent
-						disabled={false}
-						value={data.node.template[name].value ?? ""}
-						onChange={(t) => {
-							data.node.template[name].value = t;
-							save();
-						}}
-					/>
-				</div>
-			) : type === "str" && data.node.template[name].options ? (
-				<div className="w-1/2">
-					<Dropdown
-						options={data.node.template[name].options}
-						onSelect={(newValue) => (data.node.template[name].value = newValue)}
-						value={data.node.template[name].value ?? "Choose an option"}
-					></Dropdown>
-				</div>
-			) : type === "int" ? (
-				<div className="w-1/2">
-					<IntComponent
-						disabled={false}
-						value={data.node.template[name].value ?? ""}
-						onChange={(t) => {
-							data.node.template[name].value = t;
-							save();
-						}}
-					/>
-				</div>
-			) : type === "file" ? (
-				<div className="w-1/2">
-					<InputFileComponent
-						disabled={false}
-						value={data.node.template[name].value ?? ""}
-						onChange={(t: string) => {
-							data.node.template[name].value = t;
-						}}
-						fileTypes={data.node.template[name].fileTypes}
-						suffixes={data.node.template[name].suffixes}
-						onFileChange={(t: string) => {
-							data.node.template[name].content = t;
-							save();
-						}}
-					></InputFileComponent>
-				</div>
-			) : type === "prompt" ? (
-				<div className="w-1/2">
-					<PromptAreaComponent
-						disabled={false}
-						value={data.node.template[name].value ?? ""}
-						onChange={(t: string) => {
-							data.node.template[name].value = t;
-							save();
-						}}
-					/>
-				</div>
-			) : type === "code" ? (
-				<div className="w-1/2">
-					<CodeAreaComponent
-						disabled={false}
-						value={data.node.template[name].value ?? ""}
-						onChange={(t: string) => {
-							data.node.template[name].value = t;
-							save();
-						}}
-					/>
-				</div>
-			) : (
-				<div className="hidden"></div>
-			)}
-		</div>
-	);
+      {type === "str" && !data.node.template[name].options ? (
+        <div className="w-1/2">
+          {data.node.template[name].list ? (
+            <InputListComponent
+              disabled={false}
+              value={
+                !data.node.template[name].value ||
+                data.node.template[name].value === ""
+                  ? [""]
+                  : data.node.template[name].value
+              }
+              onChange={(t: string[]) => {
+                data.node.template[name].value = t;
+                save();
+              }}
+            />
+          ) : data.node.template[name].multiline ? (
+            <TextAreaComponent
+              disabled={false}
+              value={data.node.template[name].value ?? ""}
+              onChange={(t: string) => {
+                data.node.template[name].value = t;
+                save();
+              }}
+            />
+          ) : (
+            <InputComponent
+              disabled={false}
+              password={data.node.template[name].password ?? false}
+              value={data.node.template[name].value ?? ""}
+              onChange={(t) => {
+                data.node.template[name].value = t;
+                save();
+              }}
+            />
+          )}
+        </div>
+      ) : type === "bool" ? (
+        <div className="ml-auto">
+          {" "}
+          <ToggleComponent
+            disabled={false}
+            enabled={enabled}
+            setEnabled={(t) => {
+              data.node.template[name].value = t;
+              setEnabled(t);
+              save();
+            }}
+          />
+        </div>
+      ) : type === "float" ? (
+        <div className="w-1/2">
+          <FloatComponent
+            disabled={false}
+            value={data.node.template[name].value ?? ""}
+            onChange={(t) => {
+              data.node.template[name].value = t;
+              save();
+            }}
+          />
+        </div>
+      ) : type === "str" && data.node.template[name].options ? (
+        <div className="w-1/2">
+          <Dropdown
+            options={data.node.template[name].options}
+            onSelect={(newValue) => (data.node.template[name].value = newValue)}
+            value={data.node.template[name].value ?? "Choose an option"}
+          ></Dropdown>
+        </div>
+      ) : type === "int" ? (
+        <div className="w-1/2">
+          <IntComponent
+            disabled={false}
+            value={data.node.template[name].value ?? ""}
+            onChange={(t) => {
+              data.node.template[name].value = t;
+              save();
+            }}
+          />
+        </div>
+      ) : type === "file" ? (
+        <div className="w-1/2">
+          <InputFileComponent
+            disabled={false}
+            value={data.node.template[name].value ?? ""}
+            onChange={(t: string) => {
+              data.node.template[name].value = t;
+            }}
+            fileTypes={data.node.template[name].fileTypes}
+            suffixes={data.node.template[name].suffixes}
+            onFileChange={(t: string) => {
+              data.node.template[name].content = t;
+              save();
+            }}
+          ></InputFileComponent>
+        </div>
+      ) : type === "prompt" ? (
+        <div className="w-1/2">
+          <PromptAreaComponent
+            disabled={false}
+            value={data.node.template[name].value ?? ""}
+            onChange={(t: string) => {
+              data.node.template[name].value = t;
+              save();
+            }}
+          />
+        </div>
+      ) : type === "code" ? (
+        <div className="w-1/2">
+          <CodeAreaComponent
+            disabled={false}
+            value={data.node.template[name].value ?? ""}
+            onChange={(t: string) => {
+              data.node.template[name].value = t;
+              save();
+            }}
+          />
+        </div>
+      ) : (
+        <div className="hidden"></div>
+      )}
+    </div>
+  );
 }
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 1bc73af6f..257ccffa4 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -8,138 +8,138 @@ import { typesContext } from "../../contexts/typesContext";
 import ModalField from "./components/ModalField";
 
 export default function NodeModal({ data }: { data: NodeDataType }) {
-	const [open, setOpen] = useState(true);
-	const { closePopUp } = useContext(PopUpContext);
-	const { types } = useContext(typesContext);
-	const ref = useRef();
-	function setModalOpen(x: boolean) {
-		setOpen(x);
-		if (x === false) {
-			setTimeout(() => {
-				closePopUp();
-			}, 300);
-		}
-	}
-	const Icon = nodeIcons[types[data.type]];
-	return (
-		<Transition.Root show={open} appear={true} as={Fragment}>
-			<Dialog
-				as="div"
-				className="relative z-10"
-				onClose={setModalOpen}
-				initialFocus={ref}
-			>
-				<Transition.Child
-					as={Fragment}
-					enter="ease-out duration-300"
-					enterFrom="opacity-0"
-					enterTo="opacity-100"
-					leave="ease-in duration-200"
-					leaveFrom="opacity-100"
-					leaveTo="opacity-0"
-				>
-					<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-				</Transition.Child>
+  const [open, setOpen] = useState(true);
+  const { closePopUp } = useContext(PopUpContext);
+  const { types } = useContext(typesContext);
+  const ref = useRef();
+  function setModalOpen(x: boolean) {
+    setOpen(x);
+    if (x === false) {
+      setTimeout(() => {
+        closePopUp();
+      }, 300);
+    }
+  }
+  const Icon = nodeIcons[types[data.type]];
+  return (
+    <Transition.Root show={open} appear={true} as={Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-10"
+        onClose={setModalOpen}
+        initialFocus={ref}
+      >
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
 
-				<div className="fixed inset-0 z-10 overflow-y-auto">
-					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-						<Transition.Child
-							as={Fragment}
-							enter="ease-out duration-300"
-							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-							enterTo="opacity-100 translate-y-0 sm:scale-100"
-							leave="ease-in duration-200"
-							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-						>
-							<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
-								<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-								<button
-										type="button"
-										className="rounded-md text-gray-400 hover:text-gray-500"
-										onClick={() => {
-											setModalOpen(false);
-										}}
-									>
-										<span className="sr-only">Close</span>
-										<XMarkIcon className="h-6 w-6" aria-hidden="true" />
-									</button>
-								</div>
-								<div className="h-full w-full flex flex-col justify-center items-center">
-									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-										<Icon
-											className="w-10 mt-4 h-10 p-1 rounded"
-											style={{
-												color:
-													nodeColors[types[data.type]] ?? nodeColors.unknown,
-											}}
-										/>
-										<div className="mt-4 text-center sm:ml-4 sm:text-left">
-											<Dialog.Title
-												as="h3"
-												className="text-lg font-medium dark:text-white leading-10 text-gray-900"
-											>
-												{data.type}
-											</Dialog.Title>
-										</div>
-									</div>
-									<div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
-										<div className="flex h-full w-full">
-											<div className="overflow-hidden px-4 sm:p-4  w-full rounded-lg bg-white dark:bg-gray-800 shadow">
-												<div className="flex flex-col h-full gap-5">
-													{Object.keys(data.node.template)
-														.filter(
-															(t) =>
-																t.charAt(0) !== "_" &&
-																data.node.template[t].advanced &&
-																data.node.template[t].show
-														)
-														.map((t: string, idx) => {
-															return (
-																<ModalField
-																	key={idx}
-																	data={data}
-																	title={
-																		data.node.template[t].display_name
-																			? data.node.template[t].display_name
-																			: data.node.template[t].name
-																			? toNormalCase(data.node.template[t].name)
-																			: toNormalCase(t)
-																	}
-																	required={data.node.template[t].required}
-																	id={
-																		data.node.template[t].type +
-																		"|" +
-																		t +
-																		"|" +
-																		data.id
-																	}
-																	name={t}
-																	type={data.node.template[t].type}
-																/>
-															);
-														})}
-												</div>
-											</div>
-										</div>
-									</div>
-									<div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
-										<button
-											type="button"
-											className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
-											onClick={() => {
-												setModalOpen(false);
-											}}
-										>
-											Done
-										</button>
-									</div>
-								</div>
-							</Dialog.Panel>
-						</Transition.Child>
-					</div>
-				</div>
-			</Dialog>
-		</Transition.Root>
-	);
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+                  <button
+                    type="button"
+                    className="rounded-md text-gray-400 hover:text-gray-500"
+                    onClick={() => {
+                      setModalOpen(false);
+                    }}
+                  >
+                    <span className="sr-only">Close</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </button>
+                </div>
+                <div className="h-full w-full flex flex-col justify-center items-center">
+                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
+                    <Icon
+                      className="w-10 mt-4 h-10 p-1 rounded"
+                      style={{
+                        color:
+                          nodeColors[types[data.type]] ?? nodeColors.unknown,
+                      }}
+                    />
+                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+                      >
+                        {data.type}
+                      </Dialog.Title>
+                    </div>
+                  </div>
+                  <div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+                    <div className="flex h-full w-full">
+                      <div className="overflow-hidden px-4 sm:p-4  w-full rounded-lg bg-white dark:bg-gray-800 shadow">
+                        <div className="flex flex-col h-full gap-5">
+                          {Object.keys(data.node.template)
+                            .filter(
+                              (t) =>
+                                t.charAt(0) !== "_" &&
+                                data.node.template[t].advanced &&
+                                data.node.template[t].show
+                            )
+                            .map((t: string, idx) => {
+                              return (
+                                <ModalField
+                                  key={idx}
+                                  data={data}
+                                  title={
+                                    data.node.template[t].display_name
+                                      ? data.node.template[t].display_name
+                                      : data.node.template[t].name
+                                      ? toNormalCase(data.node.template[t].name)
+                                      : toNormalCase(t)
+                                  }
+                                  required={data.node.template[t].required}
+                                  id={
+                                    data.node.template[t].type +
+                                    "|" +
+                                    t +
+                                    "|" +
+                                    data.id
+                                  }
+                                  name={t}
+                                  type={data.node.template[t].type}
+                                />
+                              );
+                            })}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
+                    <button
+                      type="button"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+                      onClick={() => {
+                        setModalOpen(false);
+                      }}
+                    >
+                      Done
+                    </button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
 }
diff --git a/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
index ed67a9af5..851f5118a 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
@@ -5,78 +5,78 @@ import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { programmingLanguages } from "../../../../utils";
 
 interface Props {
-	language: string;
-	value: string;
+  language: string;
+  value: string;
 }
 
 export const CodeBlock: FC<Props> = memo(({ language, value }) => {
-	const [isCopied, setIsCopied] = useState<Boolean>(false);
+  const [isCopied, setIsCopied] = useState<Boolean>(false);
 
-	const copyToClipboard = () => {
-		if (!navigator.clipboard || !navigator.clipboard.writeText) {
-			return;
-		}
+  const copyToClipboard = () => {
+    if (!navigator.clipboard || !navigator.clipboard.writeText) {
+      return;
+    }
 
-		navigator.clipboard.writeText(value).then(() => {
-			setIsCopied(true);
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
 
-			setTimeout(() => {
-				setIsCopied(false);
-			}, 2000);
-		});
-	};
-	const downloadAsFile = () => {
-		const fileExtension = programmingLanguages[language] || ".file";
-		const suggestedFileName = `${"generated-code"}${fileExtension}`;
-		const fileName = window.prompt("enter file name", suggestedFileName);
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2000);
+    });
+  };
+  const downloadAsFile = () => {
+    const fileExtension = programmingLanguages[language] || ".file";
+    const suggestedFileName = `${"generated-code"}${fileExtension}`;
+    const fileName = window.prompt("enter file name", suggestedFileName);
 
-		if (!fileName) {
-			// user pressed cancel on prompt
-			return;
-		}
+    if (!fileName) {
+      // user pressed cancel on prompt
+      return;
+    }
 
-		const blob = new Blob([value], { type: "text/plain" });
-		const url = URL.createObjectURL(blob);
-		const link = document.createElement("a");
-		link.download = fileName;
-		link.href = url;
-		link.style.display = "none";
-		document.body.appendChild(link);
-		link.click();
-		document.body.removeChild(link);
-		URL.revokeObjectURL(url);
-	};
-	return (
-		<div className="codeblock font-sans text-[16px]">
-			<div className="flex items-center justify-between py-1.5 px-4">
-				<span className="text-xs lowercase text-white">{language}</span>
+    const blob = new Blob([value], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.download = fileName;
+    link.href = url;
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+  return (
+    <div className="codeblock font-sans text-[16px]">
+      <div className="flex items-center justify-between py-1.5 px-4">
+        <span className="text-xs lowercase text-white">{language}</span>
 
-				<div className="flex items-center">
-					<button
-						className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-white"
-						onClick={copyToClipboard}
-					>
-						{isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
-						{isCopied ? "Copied!" : "Copy code"}
-					</button>
-					<button
-						className="flex items-center rounded bg-none p-1 text-xs text-white"
-						onClick={downloadAsFile}
-					>
-						<IconDownload size={18} />
-					</button>
-				</div>
-			</div>
+        <div className="flex items-center">
+          <button
+            className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-white"
+            onClick={copyToClipboard}
+          >
+            {isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
+            {isCopied ? "Copied!" : "Copy code"}
+          </button>
+          <button
+            className="flex items-center rounded bg-none p-1 text-xs text-white"
+            onClick={downloadAsFile}
+          >
+            <IconDownload size={18} />
+          </button>
+        </div>
+      </div>
 
-			<SyntaxHighlighter
-			className=" w-[570px]"
-				language={language}
-				style={oneDark}
-				customStyle={{ margin: 0 }}
-			>
-				{value}
-			</SyntaxHighlighter>
-		</div>
-	);
+      <SyntaxHighlighter
+        className=" w-[570px]"
+        language={language}
+        style={oneDark}
+        customStyle={{ margin: 0 }}
+      >
+        {value}
+      </SyntaxHighlighter>
+    </div>
+  );
 });
 CodeBlock.displayName = "CodeBlock";
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index f7131e1e5..5e0f3e051 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import { ChatMessageType } from "../../../types/chat";
 import { classNames } from "../../../utils";
 import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
-import AiIconStill from "../../../assets/froze-flow.png"
+import AiIconStill from "../../../assets/froze-flow.png";
 import { UserIcon } from "@heroicons/react/24/solid";
 import FileCard from "../fileComponent";
 import ReactMarkdown from "react-markdown";
@@ -13,132 +13,154 @@ import remarkMath from "remark-math";
 import { CodeBlock } from "./codeBlock";
 import Convert from "ansi-to-html";
 
-export default function ChatMessage({ chat, lockChat }: { chat: ChatMessageType, lockChat: boolean }) {
-	const convert = new Convert({ newline: true });
-	const [message, setMessage] = useState("");
-	const imgRef = useRef(null);
-	useEffect(() => {
-		setMessage(chat.message);
-	}, [chat.message]);
-	const [hidden, setHidden] = useState(true);
-	return (
-		<div
-			className={classNames(
-				"w-full py-2 pl-2 flex",
-				chat.isSend
-					? "bg-white dark:bg-gray-900 "
-					: "bg-gray-200  dark:bg-gray-800"
-			)}
-		>
-			<div
-				className={classNames(
-					"rounded-full overflow-hidden w-8 h-8 flex items-center my-3 justify-center"
-				)}
-			>
-				{!chat.isSend && <div className="relative w-8 h-8">
-					<img className={"absolute transition-opacity duration-500 scale-150 " + (lockChat ? "opacity-100" : "opacity-0")} src={AiIcon} />
-					<img className={"absolute transition-opacity duration-500 scale-150 " + (lockChat ? "opacity-0" : "opacity-100")} src={AiIconStill} />
-				</div>}
-				{chat.isSend && <UserIcon className="w-6 h-6 -mb-1 text-gray-800 dark:text-gray-200" />}
-			</div>
-			{!chat.isSend ? (
-				<div className="w-full text-start flex items-center">
-					<div className="w-full relative text-start inline-block text-gray-600 dark:text-gray-300 text-sm font-normal">
-						{hidden && chat.thought && chat.thought !== "" && (
-							<div
-								onClick={() => setHidden((prev) => !prev)}
-								className="absolute -top-1 -left-2 cursor-pointer"
-							>
-								<ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce dark:text-white" />
-							</div>
-						)}
-						{chat.thought && chat.thought !== "" && !hidden && (
-							<div
-								onClick={() => setHidden((prev) => !prev)}
-								className=" text-start inline-block rounded-md text-gray-600 dark:text-gray-200 h-full border border-gray-300 dark:border-gray-500
+export default function ChatMessage({
+  chat,
+  lockChat,
+}: {
+  chat: ChatMessageType;
+  lockChat: boolean;
+}) {
+  const convert = new Convert({ newline: true });
+  const [message, setMessage] = useState("");
+  const imgRef = useRef(null);
+  useEffect(() => {
+    setMessage(chat.message);
+  }, [chat.message]);
+  const [hidden, setHidden] = useState(true);
+  return (
+    <div
+      className={classNames(
+        "w-full py-2 pl-2 flex",
+        chat.isSend
+          ? "bg-white dark:bg-gray-900 "
+          : "bg-gray-200  dark:bg-gray-800"
+      )}
+    >
+      <div
+        className={classNames(
+          "rounded-full overflow-hidden w-8 h-8 flex items-center my-3 justify-center"
+        )}
+      >
+        {!chat.isSend && (
+          <div className="relative w-8 h-8">
+            <img
+              className={
+                "absolute transition-opacity duration-500 scale-150 " +
+                (lockChat ? "opacity-100" : "opacity-0")
+              }
+              src={AiIcon}
+            />
+            <img
+              className={
+                "absolute transition-opacity duration-500 scale-150 " +
+                (lockChat ? "opacity-0" : "opacity-100")
+              }
+              src={AiIconStill}
+            />
+          </div>
+        )}
+        {chat.isSend && (
+          <UserIcon className="w-6 h-6 -mb-1 text-gray-800 dark:text-gray-200" />
+        )}
+      </div>
+      {!chat.isSend ? (
+        <div className="w-full text-start flex items-center">
+          <div className="w-full relative text-start inline-block text-gray-600 dark:text-gray-300 text-sm font-normal">
+            {hidden && chat.thought && chat.thought !== "" && (
+              <div
+                onClick={() => setHidden((prev) => !prev)}
+                className="absolute -top-1 -left-2 cursor-pointer"
+              >
+                <ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce dark:text-white" />
+              </div>
+            )}
+            {chat.thought && chat.thought !== "" && !hidden && (
+              <div
+                onClick={() => setHidden((prev) => !prev)}
+                className=" text-start inline-block rounded-md text-gray-600 dark:text-gray-200 h-full border border-gray-300 dark:border-gray-500
 								bg-gray-100 dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
-								dangerouslySetInnerHTML={{
-									__html: convert.toHtml(chat.thought),
-								}}
-							></div>
-						)}
-						{chat.thought && chat.thought !== "" && !hidden && <br></br>}
-						<div className="w-full px-4 pb-3 pt-3 pr-8">
-							<div className="dark:text-white w-full">
-								<div className="w-full">
-									<ReactMarkdown
-										remarkPlugins={[remarkGfm, remarkMath]}
-										rehypePlugins={[rehypeMathjax]}
-										className="markdown prose dark:prose-invert text-gray-600 dark:text-gray-200"
-										components={{
-											code({ node, inline, className, children, ...props }) {
-												if (children.length) {
-													if (children[0] == "▍") {
-														return (
-															<span className="animate-pulse cursor-default mt-1">
-																▍
-															</span>
-														);
-													}
+                dangerouslySetInnerHTML={{
+                  __html: convert.toHtml(chat.thought),
+                }}
+              ></div>
+            )}
+            {chat.thought && chat.thought !== "" && !hidden && <br></br>}
+            <div className="w-full px-4 pb-3 pt-3 pr-8">
+              <div className="dark:text-white w-full">
+                <div className="w-full">
+                  <ReactMarkdown
+                    remarkPlugins={[remarkGfm, remarkMath]}
+                    rehypePlugins={[rehypeMathjax]}
+                    className="markdown prose dark:prose-invert text-gray-600 dark:text-gray-200"
+                    components={{
+                      code({ node, inline, className, children, ...props }) {
+                        if (children.length) {
+                          if (children[0] == "▍") {
+                            return (
+                              <span className="animate-pulse cursor-default mt-1">
+                                ▍
+                              </span>
+                            );
+                          }
 
-													children[0] = (children[0] as string).replace(
-														"`▍`",
-														"▍"
-													);
-												}
+                          children[0] = (children[0] as string).replace(
+                            "`▍`",
+                            "▍"
+                          );
+                        }
 
-												const match = /language-(\w+)/.exec(className || "");
+                        const match = /language-(\w+)/.exec(className || "");
 
-												return !inline ? (
-													<CodeBlock
-														key={Math.random()}
-														language={(match && match[1]) || ""}
-														value={String(children).replace(/\n$/, "")}
-														{...props}
-													/>
-												) : (
-													<code className={className} {...props}>
-														{children}
-													</code>
-												);
-											},
-										}}
-									>
-										{message}
-									</ReactMarkdown>
-								</div>
-								{chat.files && (
-									<div className="my-2 w-full">
-										{chat.files.map((file, index) => {
-											return (
-												<div key={index} className="my-2 w-full">
-													<FileCard
-														fileName={"Generated File"}
-														fileType={file.data_type}
-														content={file.data}
-													/>
-												</div>
-											);
-										})}
-									</div>
-								)}
-							</div>
-						</div>
-					</div>
-				</div>
-			) : (
-				<div className="w-full flex items-center">
-					<div className="text-start inline-block px-3 text-sm text-gray-600 dark:text-white">
-						<ReactMarkdown
-							remarkPlugins={[remarkGfm, remarkMath]}
-							rehypePlugins={[rehypeMathjax]}
-							className="markdown prose dark:prose-invert text-gray-600 dark:text-gray-200"
-						>
-							{message}
-						</ReactMarkdown>
-					</div>
-				</div>
-			)}
-		</div>
-	);
+                        return !inline ? (
+                          <CodeBlock
+                            key={Math.random()}
+                            language={(match && match[1]) || ""}
+                            value={String(children).replace(/\n$/, "")}
+                            {...props}
+                          />
+                        ) : (
+                          <code className={className} {...props}>
+                            {children}
+                          </code>
+                        );
+                      },
+                    }}
+                  >
+                    {message}
+                  </ReactMarkdown>
+                </div>
+                {chat.files && (
+                  <div className="my-2 w-full">
+                    {chat.files.map((file, index) => {
+                      return (
+                        <div key={index} className="my-2 w-full">
+                          <FileCard
+                            fileName={"Generated File"}
+                            fileType={file.data_type}
+                            content={file.data}
+                          />
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="w-full flex items-center">
+          <div className="text-start inline-block px-3 text-sm text-gray-600 dark:text-white">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm, remarkMath]}
+              rehypePlugins={[rehypeMathjax]}
+              className="markdown prose dark:prose-invert text-gray-600 dark:text-gray-200"
+            >
+              {message}
+            </ReactMarkdown>
+          </div>
+        </div>
+      )}
+    </div>
+  );
 }
diff --git a/src/frontend/src/modals/chatModal/fileComponent/index.tsx b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
index 1ffb1da01..3d4feb1d5 100644
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@@ -3,77 +3,77 @@ import * as base64js from "base64-js";
 import { useState } from "react";
 
 export default function FileCard({ fileName, content, fileType }) {
-	const handleDownload = () => {
-		const byteArray = new Uint8Array(base64js.toByteArray(content));
-		const blob = new Blob([byteArray], { type: "application/octet-stream" });
-		const url = URL.createObjectURL(blob);
-		const link = document.createElement("a");
-		link.href = url;
-		link.download = fileName + ".png";
-		document.body.appendChild(link);
-		link.click();
-		document.body.removeChild(link);
-		URL.revokeObjectURL(url);
-	};
-	const [isHovered, setIsHovered] = useState(false);
-	function handleMouseEnter() {
-		setIsHovered(true);
-	}
-	function handleMouseLeave() {
-		setIsHovered(false);
-	}
+  const handleDownload = () => {
+    const byteArray = new Uint8Array(base64js.toByteArray(content));
+    const blob = new Blob([byteArray], { type: "application/octet-stream" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName + ".png";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+  const [isHovered, setIsHovered] = useState(false);
+  function handleMouseEnter() {
+    setIsHovered(true);
+  }
+  function handleMouseLeave() {
+    setIsHovered(false);
+  }
 
-	if (fileType === "image") {
-		return (
-			<div
-				className="relative w-1/4 h-1/4"
-				onMouseEnter={handleMouseEnter}
-				onMouseLeave={handleMouseLeave}
-			>
-				<img
-					src={`data:image/png;base64,${content}`}
-					alt="generated image"
-					className="rounded-lg  w-full h-full"
-				/>
-				{isHovered && (
-					<div
-						className={`absolute top-0 right-0 bg-gray-100 text-gray-700 rounded-bl-lg px-1 text-sm font-bold dark:bg-gray-700 dark:text-gray-300`}
-					>
-						<button
-							className="text-gray-500 py-1 px-2 dark:bg-gray-700 dark:text-gray-300"
-							onClick={handleDownload}
-						>
-							<CloudArrowDownIcon className="hover:scale-110 w-5 h-5 text-current"></CloudArrowDownIcon>
-						</button>
-					</div>
-				)}
-			</div>
-		);
-	}
+  if (fileType === "image") {
+    return (
+      <div
+        className="relative w-1/4 h-1/4"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        <img
+          src={`data:image/png;base64,${content}`}
+          alt="generated image"
+          className="rounded-lg  w-full h-full"
+        />
+        {isHovered && (
+          <div
+            className={`absolute top-0 right-0 bg-gray-100 text-gray-700 rounded-bl-lg px-1 text-sm font-bold dark:bg-gray-700 dark:text-gray-300`}
+          >
+            <button
+              className="text-gray-500 py-1 px-2 dark:bg-gray-700 dark:text-gray-300"
+              onClick={handleDownload}
+            >
+              <CloudArrowDownIcon className="hover:scale-110 w-5 h-5 text-current"></CloudArrowDownIcon>
+            </button>
+          </div>
+        )}
+      </div>
+    );
+  }
 
-	return (
-		<button
-			onClick={handleDownload}
-			className="bg-gray-100 shadow rounded w-1/2 text-gray-700 hover:drop-shadow-lg px-2 py-2 flex justify-between items-center border border-gray-300"
-		>
-			<div className="flex gap-2 text-current items-center w-full mr-2">
-				{" "}
-				{fileType === "image" ? (
-					<img
-						src={`data:image/png;base64,${content}`}
-						alt=""
-						className="w-8 h-8"
-					/>
-				) : (
-					<DocumentIcon className="w-8 h-8" />
-				)}
-				<div className="flex flex-col items-start">
-					{" "}
-					<div className="truncate text-sm text-current">{fileName}</div>
-					<div className="truncate text-xs  text-gray-500">{fileType}</div>
-				</div>
-				<CloudArrowDownIcon className="w-6 h-6 text-current ml-auto" />
-			</div>
-		</button>
-	);
+  return (
+    <button
+      onClick={handleDownload}
+      className="bg-gray-100 shadow rounded w-1/2 text-gray-700 hover:drop-shadow-lg px-2 py-2 flex justify-between items-center border border-gray-300"
+    >
+      <div className="flex gap-2 text-current items-center w-full mr-2">
+        {" "}
+        {fileType === "image" ? (
+          <img
+            src={`data:image/png;base64,${content}`}
+            alt=""
+            className="w-8 h-8"
+          />
+        ) : (
+          <DocumentIcon className="w-8 h-8" />
+        )}
+        <div className="flex flex-col items-start">
+          {" "}
+          <div className="truncate text-sm text-current">{fileName}</div>
+          <div className="truncate text-xs  text-gray-500">{fileType}</div>
+        </div>
+        <CloudArrowDownIcon className="w-6 h-6 text-current ml-auto" />
+      </div>
+    </button>
+  );
 }
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index 20080ad7f..399febebe 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -236,11 +236,14 @@ export default function ChatModal({
   }, []);
 
   useEffect(() => {
-    if((ws.current.readyState=== ws.current.CLOSED || ws.current.readyState=== ws.current.CLOSING)){
+    if (
+      ws.current.readyState === ws.current.CLOSED ||
+      ws.current.readyState === ws.current.CLOSING
+    ) {
       connectWS();
       setLockChat(false);
     }
-  },[lockChat]);
+  }, [lockChat]);
 
   async function sendAll(data: sendAllProps) {
     try {
@@ -346,7 +349,7 @@ export default function ChatModal({
   function clearChat() {
     setChatHistory([]);
     ws.current.send(JSON.stringify({ clear_history: true }));
-    if(lockChat) setLockChat(false);
+    if (lockChat) setLockChat(false);
   }
 
   function setModalOpen(x: boolean) {
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 77ebf45c1..2a14fabe6 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -13,164 +13,164 @@ import { checkCode } from "../../controllers/API";
 import { alertContext } from "../../contexts/alertContext";
 import { TabsContext } from "../../contexts/tabsContext";
 export default function CodeAreaModal({
-	value,
-	setValue,
+  value,
+  setValue,
 }: {
-	setValue: (value: string) => void;
-	value: string;
+  setValue: (value: string) => void;
+  value: string;
 }) {
-	const [open, setOpen] = useState(true);
-	const [code, setCode] = useState(value);
-	const { dark } = useContext(darkContext);
-	const { setErrorData, setSuccessData } = useContext(alertContext);
-	const { closePopUp } = useContext(PopUpContext);
-	const ref = useRef();
-	function setModalOpen(x: boolean) {
-		setOpen(x);
-		if (x === false) {
-			setTimeout(() => {
-				closePopUp();
-			}, 300);
-		}
-	}
-	return (
-		<Transition.Root show={open} appear={true} as={Fragment}>
-			<Dialog
-				as="div"
-				className="relative z-10"
-				onClose={setModalOpen}
-				initialFocus={ref}
-			>
-				<Transition.Child
-					as={Fragment}
-					enter="ease-out duration-300"
-					enterFrom="opacity-0"
-					enterTo="opacity-100"
-					leave="ease-in duration-200"
-					leaveFrom="opacity-100"
-					leaveTo="opacity-0"
-				>
-					<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-				</Transition.Child>
+  const [open, setOpen] = useState(true);
+  const [code, setCode] = useState(value);
+  const { dark } = useContext(darkContext);
+  const { setErrorData, setSuccessData } = useContext(alertContext);
+  const { closePopUp } = useContext(PopUpContext);
+  const ref = useRef();
+  function setModalOpen(x: boolean) {
+    setOpen(x);
+    if (x === false) {
+      setTimeout(() => {
+        closePopUp();
+      }, 300);
+    }
+  }
+  return (
+    <Transition.Root show={open} appear={true} as={Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-10"
+        onClose={setModalOpen}
+        initialFocus={ref}
+      >
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
 
-				<div className="fixed inset-0 z-10 overflow-y-auto">
-					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-						<Transition.Child
-							as={Fragment}
-							enter="ease-out duration-300"
-							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-							enterTo="opacity-100 translate-y-0 sm:scale-100"
-							leave="ease-in duration-200"
-							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-						>
-							<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
-								<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-								<button
-										type="button"
-										className="rounded-md text-gray-400 hover:text-gray-500"
-										onClick={() => {
-											setModalOpen(false);
-										}}
-									>
-										<span className="sr-only">Close</span>
-										<XMarkIcon className="h-6 w-6" aria-hidden="true" />
-									</button>
-								</div>
-								<div className="h-full w-full flex flex-col justify-center items-center">
-									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-										<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
-											<CommandLineIcon
-												className="h-6 w-6 text-blue-600"
-												aria-hidden="true"
-											/>
-										</div>
-										<div className="mt-4 text-center sm:ml-4 sm:text-left">
-											<Dialog.Title
-												as="h3"
-												className="text-lg font-medium dark:text-white leading-10 text-gray-900"
-											>
-												Edit Code
-											</Dialog.Title>
-										</div>
-									</div>
-									<div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
-										<div className="flex h-full w-full">
-											<div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-gray-800 shadow">
-												<AceEditor
-													value={code}
-													mode="python"
-													highlightActiveLine={true}
-													showPrintMargin={false}
-													fontSize={14}
-													showGutter
-													enableLiveAutocompletion
-													theme={dark ? "twilight" : "github"}
-													name="CodeEditor"
-													onChange={(value) => {
-														setCode(value);
-													}}
-													className="h-full w-full rounded-lg"
-												/>
-											</div>
-										</div>
-									</div>
-									<div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
-										<button
-											type="button"
-											className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
-											onClick={() => {
-												checkCode(code)
-													.then((apiReturn) => {
-														if (apiReturn.data) {
-															let importsErrors = apiReturn.data.imports.errors;
-															let funcErrors = apiReturn.data.function.errors;
-															if (
-																funcErrors.length === 0 &&
-																importsErrors.length === 0
-															) {
-																setSuccessData({
-																	title: "Code is ready to run",
-																});
-																setModalOpen(false);
-																setValue(code);
-															} else {
-																if (funcErrors.length !== 0) {
-																	setErrorData({
-																		title: "There is an error in your function",
-																		list: funcErrors,
-																	});
-																}
-																if (importsErrors.length !== 0) {
-																	setErrorData({
-																		title: "There is an error in your imports",
-																		list: importsErrors,
-																	});
-																}
-															}
-														} else {
-															setErrorData({
-																title: "Something went wrong, please try again",
-															});
-														}
-													})
-													.catch((_) =>
-														setErrorData({
-															title:
-																"There is something wrong with this code, please review it",
-														})
-													);
-											}}
-										>
-											Check & Save
-										</button>
-									</div>
-								</div>
-							</Dialog.Panel>
-						</Transition.Child>
-					</div>
-				</div>
-			</Dialog>
-		</Transition.Root>
-	);
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+                  <button
+                    type="button"
+                    className="rounded-md text-gray-400 hover:text-gray-500"
+                    onClick={() => {
+                      setModalOpen(false);
+                    }}
+                  >
+                    <span className="sr-only">Close</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </button>
+                </div>
+                <div className="h-full w-full flex flex-col justify-center items-center">
+                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
+                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+                      <CommandLineIcon
+                        className="h-6 w-6 text-blue-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+                      >
+                        Edit Code
+                      </Dialog.Title>
+                    </div>
+                  </div>
+                  <div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+                    <div className="flex h-full w-full">
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-gray-800 shadow">
+                        <AceEditor
+                          value={code}
+                          mode="python"
+                          highlightActiveLine={true}
+                          showPrintMargin={false}
+                          fontSize={14}
+                          showGutter
+                          enableLiveAutocompletion
+                          theme={dark ? "twilight" : "github"}
+                          name="CodeEditor"
+                          onChange={(value) => {
+                            setCode(value);
+                          }}
+                          className="h-full w-full rounded-lg"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
+                    <button
+                      type="button"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+                      onClick={() => {
+                        checkCode(code)
+                          .then((apiReturn) => {
+                            if (apiReturn.data) {
+                              let importsErrors = apiReturn.data.imports.errors;
+                              let funcErrors = apiReturn.data.function.errors;
+                              if (
+                                funcErrors.length === 0 &&
+                                importsErrors.length === 0
+                              ) {
+                                setSuccessData({
+                                  title: "Code is ready to run",
+                                });
+                                setModalOpen(false);
+                                setValue(code);
+                              } else {
+                                if (funcErrors.length !== 0) {
+                                  setErrorData({
+                                    title: "There is an error in your function",
+                                    list: funcErrors,
+                                  });
+                                }
+                                if (importsErrors.length !== 0) {
+                                  setErrorData({
+                                    title: "There is an error in your imports",
+                                    list: importsErrors,
+                                  });
+                                }
+                              }
+                            } else {
+                              setErrorData({
+                                title: "Something went wrong, please try again",
+                              });
+                            }
+                          })
+                          .catch((_) =>
+                            setErrorData({
+                              title:
+                                "There is something wrong with this code, please review it",
+                            })
+                          );
+                      }}
+                    >
+                      Check & Save
+                    </button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
 }
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 44b8d7992..6bcedc60c 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -1,9 +1,9 @@
 import { Dialog, Transition } from "@headlessui/react";
 import {
-	XMarkIcon,
-	ArrowDownTrayIcon,
-	DocumentDuplicateIcon,
-	ComputerDesktopIcon,
+  XMarkIcon,
+  ArrowDownTrayIcon,
+  DocumentDuplicateIcon,
+  ComputerDesktopIcon,
 } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
@@ -12,170 +12,169 @@ import { TabsContext } from "../../contexts/tabsContext";
 import { removeApiKeys } from "../../utils";
 
 export default function ExportModal() {
-	const [open, setOpen] = useState(true);
-	const { closePopUp } = useContext(PopUpContext);
-	const ref = useRef();
-	const { setErrorData } = useContext(alertContext);
-	const { flows, tabIndex, updateFlow, downloadFlow } = useContext(TabsContext);
-	function setModalOpen(x: boolean) {
-		setOpen(x);
-		if (x === false) {
-			setTimeout(() => {
-				closePopUp();
-			}, 300);
-		}
-	}
-	const [checked, setChecked] = useState(true);
-	const [name, setName] = useState(flows[tabIndex].name);
-	return (
-		<Transition.Root show={open} appear={true} as={Fragment}>
-			<Dialog
-				as="div"
-				className="relative z-10"
-				onClose={setModalOpen}
-				initialFocus={ref}
-			>
-				<Transition.Child
-					as={Fragment}
-					enter="ease-out duration-300"
-					enterFrom="opacity-0"
-					enterTo="opacity-100"
-					leave="ease-in duration-200"
-					leaveFrom="opacity-100"
-					leaveTo="opacity-0"
-				>
-					<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-				</Transition.Child>
+  const [open, setOpen] = useState(true);
+  const { closePopUp } = useContext(PopUpContext);
+  const ref = useRef();
+  const { setErrorData } = useContext(alertContext);
+  const { flows, tabIndex, updateFlow, downloadFlow } = useContext(TabsContext);
+  function setModalOpen(x: boolean) {
+    setOpen(x);
+    if (x === false) {
+      setTimeout(() => {
+        closePopUp();
+      }, 300);
+    }
+  }
+  const [checked, setChecked] = useState(true);
+  const [name, setName] = useState(flows[tabIndex].name);
+  return (
+    <Transition.Root show={open} appear={true} as={Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-10"
+        onClose={setModalOpen}
+        initialFocus={ref}
+      >
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
 
-				<div className="fixed inset-0 z-10 overflow-y-auto">
-					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-						<Transition.Child
-							as={Fragment}
-							enter="ease-out duration-300"
-							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-							enterTo="opacity-100 translate-y-0 sm:scale-100"
-							leave="ease-in duration-200"
-							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-						>
-							<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
-								<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-								<button
-										type="button"
-										className="rounded-md text-gray-400 hover:text-gray-500"
-										onClick={() => {
-											setModalOpen(false);
-										}}
-									>
-										<span className="sr-only">Close</span>
-										<XMarkIcon className="h-6 w-6" aria-hidden="true" />
-									</button>
-								</div>
-								<div className="h-full w-full flex flex-col justify-center items-center">
-									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-										<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
-											<ArrowDownTrayIcon
-												className="h-6 w-6 text-blue-600"
-												aria-hidden="true"
-											/>
-										</div>
-										<div className="mt-4 text-center sm:ml-4 sm:text-left">
-											<Dialog.Title
-												as="h3"
-												className="text-lg font-medium dark:text-white leading-10 text-gray-900"
-											>
-												Export as
-											</Dialog.Title>
-										</div>
-									</div>
-									<div className="pt-16 flex flex-col items-start justify-start h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-16">
-										<div className="w-full">
-											<label
-												htmlFor="name"
-												className="block mb-2 font-medium text-gray-700 dark:text-white"
-											>
-												Name
-											</label>
-											<input
-												onChange={(event) => {
-													if (event.target.value != "") {
-														let newFlow = flows[tabIndex];
-														newFlow.name = event.target.value;
-														setName(event.target.value);
-														updateFlow(newFlow);
-													} else {
-														setName(event.target.value);
-													}
-												}}
-												type="text"
-												name="name"
-												value={name ?? null}
-												placeholder="File name"
-												id="name"
-												className="focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500 text-gray-900 dark:text-gray-100"
-											/>
-										</div>
-										<div className="w-full">
-											<label
-												htmlFor="description"
-												className="block mb-2 font-medium text-gray-700 dark:text-white"
-											>
-												Description{" "}
-												<span className="text-gray-400 text-sm">
-													{" "}
-													(optional)
-												</span>
-											</label>
-											<textarea
-												name="description"
-												id="description"
-												onChange={(event) => {
-													let newFlow = flows[tabIndex];
-													newFlow.description = event.target.value;
-													updateFlow(newFlow);
-												}}
-												value={flows[tabIndex].description ?? null}
-												placeholder="Flow description"
-												rows={3}
-												className=" focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 text-gray-900 dark:text-gray-100 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-											></textarea>
-										</div>
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+                  <button
+                    type="button"
+                    className="rounded-md text-gray-400 hover:text-gray-500"
+                    onClick={() => {
+                      setModalOpen(false);
+                    }}
+                  >
+                    <span className="sr-only">Close</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </button>
+                </div>
+                <div className="h-full w-full flex flex-col justify-center items-center">
+                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
+                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+                      <ArrowDownTrayIcon
+                        className="h-6 w-6 text-blue-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+                      >
+                        Export as
+                      </Dialog.Title>
+                    </div>
+                  </div>
+                  <div className="pt-16 flex flex-col items-start justify-start h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-16">
+                    <div className="w-full">
+                      <label
+                        htmlFor="name"
+                        className="block mb-2 font-medium text-gray-700 dark:text-white"
+                      >
+                        Name
+                      </label>
+                      <input
+                        onChange={(event) => {
+                          if (event.target.value != "") {
+                            let newFlow = flows[tabIndex];
+                            newFlow.name = event.target.value;
+                            setName(event.target.value);
+                            updateFlow(newFlow);
+                          } else {
+                            setName(event.target.value);
+                          }
+                        }}
+                        type="text"
+                        name="name"
+                        value={name ?? null}
+                        placeholder="File name"
+                        id="name"
+                        className="focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500 text-gray-900 dark:text-gray-100"
+                      />
+                    </div>
+                    <div className="w-full">
+                      <label
+                        htmlFor="description"
+                        className="block mb-2 font-medium text-gray-700 dark:text-white"
+                      >
+                        Description{" "}
+                        <span className="text-gray-400 text-sm">
+                          {" "}
+                          (optional)
+                        </span>
+                      </label>
+                      <textarea
+                        name="description"
+                        id="description"
+                        onChange={(event) => {
+                          let newFlow = flows[tabIndex];
+                          newFlow.description = event.target.value;
+                          updateFlow(newFlow);
+                        }}
+                        value={flows[tabIndex].description ?? null}
+                        placeholder="Flow description"
+                        rows={3}
+                        className=" focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 text-gray-900 dark:text-gray-100 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+                      ></textarea>
+                    </div>
 
-										<div>
-											<label htmlFor="checkbox" className="flex items-center">
-												<input
-													onChange={(event) => {
-														setChecked(event.target.checked);
-													}}
-													checked={checked}
-													id="checkbox"
-													type="checkbox"
-													className="h-4 w-4 text-blue-600 border-gray-300 rounded dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-
-												/>
-												<span className="ml-2 font-medium text-gray-700 dark:text-white">
-													Save with my API keys
-												</span>
-											</label>
-										</div>
-										<div className="w-full flex justify-end">
-											<button
-												onClick={() => {
-													if (checked) downloadFlow(flows[tabIndex]);
-													else downloadFlow(removeApiKeys(flows[tabIndex]));
-												}}
-												className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-											>
-												Download Flow
-											</button>
-										</div>
-									</div>
-								</div>
-							</Dialog.Panel>
-						</Transition.Child>
-					</div>
-				</div>
-			</Dialog>
-		</Transition.Root>
-	);
+                    <div>
+                      <label htmlFor="checkbox" className="flex items-center">
+                        <input
+                          onChange={(event) => {
+                            setChecked(event.target.checked);
+                          }}
+                          checked={checked}
+                          id="checkbox"
+                          type="checkbox"
+                          className="h-4 w-4 text-blue-600 border-gray-300 rounded dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+                        />
+                        <span className="ml-2 font-medium text-gray-700 dark:text-white">
+                          Save with my API keys
+                        </span>
+                      </label>
+                    </div>
+                    <div className="w-full flex justify-end">
+                      <button
+                        onClick={() => {
+                          if (checked) downloadFlow(flows[tabIndex]);
+                          else downloadFlow(removeApiKeys(flows[tabIndex]));
+                        }}
+                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+                      >
+                        Download Flow
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
 }
diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index b8e51e388..2c408a120 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -33,48 +33,47 @@ export default function ButtonBox({
   let textHeight: number;
   let textWidth: number;
   switch (size) {
-		case "small":
-			bigCircle = "h-12 w-12";
-			smallCircle = "h-8 w-8";
-			titleFontSize = "text-sm";
-			descriptionFontSize = "text-xs";
-			padding = "p-2 py-3";
-			marginTop = "mt-2";
-			height = "h-36";
-			width = "w-32";
-			break;
-		case "medium":
-			bigCircle = "h-16 w-16";
-			smallCircle = "h-12 w-12";
-			titleFontSize = "text-base";
-			descriptionFontSize = "text-sm";
-			padding = "p-4 py-5";
-			marginTop = "mt-3";
-			height = "h-44";
-			width = "w-36";
-			break;
-		case "big":
-			bigCircle = "h-20 w-20";
-			smallCircle = "h-16 w-16";
-			titleFontSize = "text-lg";
-			descriptionFontSize = "text-sm";
-			padding = "p-8 py-10";
-			marginTop = "mt-6";
-			height = "h-56";
-			width = "w-44";
-			break;
-		default:
-			bigCircle = "h-20 w-20";
-			smallCircle = "h-16 w-16";
-			titleFontSize = "text-lg";
-			descriptionFontSize = "text-sm";
-			padding = "p-8 py-10";
-			marginTop = "mt-6";
-			height = "h-56";
-			width = "w-44";
-			break;
-	}
-  
+    case "small":
+      bigCircle = "h-12 w-12";
+      smallCircle = "h-8 w-8";
+      titleFontSize = "text-sm";
+      descriptionFontSize = "text-xs";
+      padding = "p-2 py-3";
+      marginTop = "mt-2";
+      height = "h-36";
+      width = "w-32";
+      break;
+    case "medium":
+      bigCircle = "h-16 w-16";
+      smallCircle = "h-12 w-12";
+      titleFontSize = "text-base";
+      descriptionFontSize = "text-sm";
+      padding = "p-4 py-5";
+      marginTop = "mt-3";
+      height = "h-44";
+      width = "w-36";
+      break;
+    case "big":
+      bigCircle = "h-20 w-20";
+      smallCircle = "h-16 w-16";
+      titleFontSize = "text-lg";
+      descriptionFontSize = "text-sm";
+      padding = "p-8 py-10";
+      marginTop = "mt-6";
+      height = "h-56";
+      width = "w-44";
+      break;
+    default:
+      bigCircle = "h-20 w-20";
+      smallCircle = "h-16 w-16";
+      titleFontSize = "text-lg";
+      descriptionFontSize = "text-sm";
+      padding = "p-8 py-10";
+      marginTop = "mt-6";
+      height = "h-56";
+      width = "w-44";
+      break;
+  }
 
   return (
     <button disabled={deactivate} onClick={onClick}>
@@ -97,16 +96,16 @@ export default function ButtonBox({
           </div>
         </div>
         <div className="w-full mt-auto mb-auto">
-						<h3
-							className={classNames(
-								"w-full font-semibold break-words text-white dark:text-white/80 truncate-multiline",
-								titleFontSize,
-								marginTop
-							)}
-						>
-							{title}
-						</h3>
-						</div>
+          <h3
+            className={classNames(
+              "w-full font-semibold break-words text-white dark:text-white/80 truncate-multiline",
+              titleFontSize,
+              marginTop
+            )}
+          >
+            {title}
+          </h3>
+        </div>
       </div>
     </button>
   );
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index 2d3ef979a..aa25e058b 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -1,11 +1,11 @@
 import { Dialog, Transition } from "@headlessui/react";
 import {
-	XMarkIcon,
-	ArrowDownTrayIcon,
-	DocumentDuplicateIcon,
-	ComputerDesktopIcon,
-	ArrowUpTrayIcon,
-	ArrowLeftIcon,
+  XMarkIcon,
+  ArrowDownTrayIcon,
+  DocumentDuplicateIcon,
+  ComputerDesktopIcon,
+  ArrowUpTrayIcon,
+  ArrowLeftIcon,
 } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -19,214 +19,214 @@ import { FlowType } from "../../types/flow";
 import { classNames, snakeToSpaces, toNormalCase } from "../../utils";
 
 export default function ImportModal() {
-	const [open, setOpen] = useState(true);
-	const { setErrorData } = useContext(alertContext);
-	const { closePopUp } = useContext(PopUpContext);
-	const ref = useRef();
-	const [showExamples, setShowExamples] = useState(false);
-	const [loadingExamples, setLoadingExamples] = useState(false);
-	const [examples, setExamples] = useState<FlowType[]>([]);
-	const { uploadFlow, addFlow } = useContext(TabsContext);
-	function setModalOpen(x: boolean) {
-		setOpen(x);
-		if (x === false) {
-			setTimeout(() => {
-				closePopUp();
-			}, 300);
-		}
-	}
+  const [open, setOpen] = useState(true);
+  const { setErrorData } = useContext(alertContext);
+  const { closePopUp } = useContext(PopUpContext);
+  const ref = useRef();
+  const [showExamples, setShowExamples] = useState(false);
+  const [loadingExamples, setLoadingExamples] = useState(false);
+  const [examples, setExamples] = useState<FlowType[]>([]);
+  const { uploadFlow, addFlow } = useContext(TabsContext);
+  function setModalOpen(x: boolean) {
+    setOpen(x);
+    if (x === false) {
+      setTimeout(() => {
+        closePopUp();
+      }, 300);
+    }
+  }
 
-	function handleExamples() {
-		setLoadingExamples(true);
-		getExamples()
-			.then((result) => {
-				setLoadingExamples(false);
-				setExamples(result);
-			})
-			.catch((error) =>
-				setErrorData({
-					title: "there was an error loading examples, please try again",
-					list: [error.message],
-				})
-			);
-	}
+  function handleExamples() {
+    setLoadingExamples(true);
+    getExamples()
+      .then((result) => {
+        setLoadingExamples(false);
+        setExamples(result);
+      })
+      .catch((error) =>
+        setErrorData({
+          title: "there was an error loading examples, please try again",
+          list: [error.message],
+        })
+      );
+  }
 
-	return (
-		<Transition.Root show={open} appear={true} as={Fragment}>
-			<Dialog
-				as="div"
-				className="relative z-10"
-				onClose={setModalOpen}
-				initialFocus={ref}
-			>
-				<Transition.Child
-					as={Fragment}
-					enter="ease-out duration-300"
-					enterFrom="opacity-0"
-					enterTo="opacity-100"
-					leave="ease-in duration-200"
-					leaveFrom="opacity-100"
-					leaveTo="opacity-0"
-				>
-					<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-				</Transition.Child>
+  return (
+    <Transition.Root show={open} appear={true} as={Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-10"
+        onClose={setModalOpen}
+        initialFocus={ref}
+      >
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
 
-				<div className="fixed inset-0 z-10 overflow-y-auto">
-					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-						<Transition.Child
-							as={Fragment}
-							enter="ease-out duration-300"
-							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-							enterTo="opacity-100 translate-y-0 sm:scale-100"
-							leave="ease-in duration-200"
-							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-						>
-							<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[776px]">
-								<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-								<button
-										type="button"
-										className="rounded-md text-gray-400 hover:text-gray-500"
-										onClick={() => {
-											setModalOpen(false);
-										}}
-									>
-										<span className="sr-only">Close</span>
-										<XMarkIcon className="h-6 w-6" aria-hidden="true" />
-									</button>
-								</div>
-								{showExamples && (
-									<>
-										<div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
-											<button
-												type="button"
-												className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-												onClick={() => {
-													setShowExamples(false);
-												}}
-											>
-												<span className="sr-only">Close</span>
-												<ArrowLeftIcon className="h-6 w-6" aria-hidden="true" />
-											</button>
-										</div>
-									</>
-								)}
-								<div className="h-full w-full flex flex-col justify-center items-center">
-									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-										<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
-											<ArrowUpTrayIcon
-												className="h-6 w-6 text-blue-600"
-												aria-hidden="true"
-											/>
-										</div>
-										<div className="mt-4 text-center sm:ml-4 sm:text-left">
-											<Dialog.Title
-												as="h3"
-												className="text-lg font-medium dark:text-white leading-10 text-gray-900"
-											>
-												{showExamples ? "Select an example" : "Import from"}
-											</Dialog.Title>
-										</div>
-									</div>
-									<div
-										className={classNames(
-											"h-full w-full bg-gray-200 dark:bg-gray-900 gap-4 overflow-y-auto scrollbar-hide",
-											showExamples && !loadingExamples
-												? "flex flex-row start justify-start items-start p-9 flex-wrap overflow-auto"
-												: "flex flex-row justify-center items-center p-4"
-										)}
-									>
-										{!showExamples && (
-											<div className="flex h-full w-full justify-evenly items-center">
-												<ButtonBox
-													size="big"
-													bgColor="bg-emerald-500 dark:bg-emerald-500/75"
-													description="Prebuilt Examples"
-													icon={
-														<DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
-													}
-													onClick={() => {
-														setShowExamples(true);
-														handleExamples();
-													}}
-													textColor="text-emerald-500 dark:text-emerald-500/75"
-													title="Examples"
-												></ButtonBox>
-												<ButtonBox
-													size="big"
-													bgColor="bg-blue-500 dark:bg-blue-500/75"
-													description="Import from Local"
-													icon={
-														<ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
-													}
-													onClick={() => {
-														uploadFlow();
-														setModalOpen(false);
-													}}
-													textColor="text-blue-500 dark:text-blue-500/75"
-													title="Local File"
-												></ButtonBox>
-											</div>
-										)}
-										{showExamples && loadingExamples && (
-											<div className="flex align-middle justify-center items-center">
-												<LoadingComponent remSize={30} />
-											</div>
-										)}
-										{showExamples &&
-											!loadingExamples &&
-											examples.map((example, index) => {
-												return (
-													<div key={index}>
-														{" "}
-														<ButtonBox
-															size="small"
-															bgColor="bg-emerald-500 dark:bg-emerald-500/75"
-															description={
-																example.description ?? "Prebuilt Examples"
-															}
-															icon={
-																<DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
-															}
-															onClick={() => {
-																addFlow(example);
-																setModalOpen(false);
-															}}
-															textColor="text-emerald-500 dark:text-emerald-500/75"
-															title={example.name}
-														></ButtonBox>
-													</div>
-												);
-											})}
-									</div>
-									<div className="bg-white dark:bg-gray-800 w-full h-20 flex items-center justify-center">
-											<a
-												href="https://github.com/logspace-ai/langflow_examples"
-												target="_blank"
-												className="flex items-center justify-center text-gray-600 dark:text-gray-300"
-												rel="noreferrer"
-											>
-												<svg
-													width="24"
-													viewBox="0 0 98 96"
-													xmlns="http://www.w3.org/2000/svg"
-												>
-													<path
-														fill-rule="evenodd"
-														clip-rule="evenodd"
-														d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-														fill="currentColor"
-													/>
-												</svg>
-												<span className="ml-2 ">LangFlow Examples</span>
-											</a>
-										</div>
-								</div>
-							</Dialog.Panel>
-						</Transition.Child>
-					</div>
-				</div>
-			</Dialog>
-		</Transition.Root>
-	);
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[776px]">
+                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+                  <button
+                    type="button"
+                    className="rounded-md text-gray-400 hover:text-gray-500"
+                    onClick={() => {
+                      setModalOpen(false);
+                    }}
+                  >
+                    <span className="sr-only">Close</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </button>
+                </div>
+                {showExamples && (
+                  <>
+                    <div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
+                      <button
+                        type="button"
+                        className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                        onClick={() => {
+                          setShowExamples(false);
+                        }}
+                      >
+                        <span className="sr-only">Close</span>
+                        <ArrowLeftIcon className="h-6 w-6" aria-hidden="true" />
+                      </button>
+                    </div>
+                  </>
+                )}
+                <div className="h-full w-full flex flex-col justify-center items-center">
+                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
+                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+                      <ArrowUpTrayIcon
+                        className="h-6 w-6 text-blue-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+                      >
+                        {showExamples ? "Select an example" : "Import from"}
+                      </Dialog.Title>
+                    </div>
+                  </div>
+                  <div
+                    className={classNames(
+                      "h-full w-full bg-gray-200 dark:bg-gray-900 gap-4 overflow-y-auto scrollbar-hide",
+                      showExamples && !loadingExamples
+                        ? "flex flex-row start justify-start items-start p-9 flex-wrap overflow-auto"
+                        : "flex flex-row justify-center items-center p-4"
+                    )}
+                  >
+                    {!showExamples && (
+                      <div className="flex h-full w-full justify-evenly items-center">
+                        <ButtonBox
+                          size="big"
+                          bgColor="bg-emerald-500 dark:bg-emerald-500/75"
+                          description="Prebuilt Examples"
+                          icon={
+                            <DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
+                          }
+                          onClick={() => {
+                            setShowExamples(true);
+                            handleExamples();
+                          }}
+                          textColor="text-emerald-500 dark:text-emerald-500/75"
+                          title="Examples"
+                        ></ButtonBox>
+                        <ButtonBox
+                          size="big"
+                          bgColor="bg-blue-500 dark:bg-blue-500/75"
+                          description="Import from Local"
+                          icon={
+                            <ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
+                          }
+                          onClick={() => {
+                            uploadFlow();
+                            setModalOpen(false);
+                          }}
+                          textColor="text-blue-500 dark:text-blue-500/75"
+                          title="Local File"
+                        ></ButtonBox>
+                      </div>
+                    )}
+                    {showExamples && loadingExamples && (
+                      <div className="flex align-middle justify-center items-center">
+                        <LoadingComponent remSize={30} />
+                      </div>
+                    )}
+                    {showExamples &&
+                      !loadingExamples &&
+                      examples.map((example, index) => {
+                        return (
+                          <div key={index}>
+                            {" "}
+                            <ButtonBox
+                              size="small"
+                              bgColor="bg-emerald-500 dark:bg-emerald-500/75"
+                              description={
+                                example.description ?? "Prebuilt Examples"
+                              }
+                              icon={
+                                <DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
+                              }
+                              onClick={() => {
+                                addFlow(example);
+                                setModalOpen(false);
+                              }}
+                              textColor="text-emerald-500 dark:text-emerald-500/75"
+                              title={example.name}
+                            ></ButtonBox>
+                          </div>
+                        );
+                      })}
+                  </div>
+                  <div className="bg-white dark:bg-gray-800 w-full h-20 flex items-center justify-center">
+                    <a
+                      href="https://github.com/logspace-ai/langflow_examples"
+                      target="_blank"
+                      className="flex items-center justify-center text-gray-600 dark:text-gray-300"
+                      rel="noreferrer"
+                    >
+                      <svg
+                        width="24"
+                        viewBox="0 0 98 96"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span className="ml-2 ">LangFlow Examples</span>
+                    </a>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
 }
diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx
index 5dbeb2264..508042a1c 100644
--- a/src/frontend/src/modals/promptModal/index.tsx
+++ b/src/frontend/src/modals/promptModal/index.tsx
@@ -6,148 +6,148 @@ import { darkContext } from "../../contexts/darkContext";
 import { checkPrompt } from "../../controllers/API";
 import { alertContext } from "../../contexts/alertContext";
 export default function PromptAreaModal({
-	value,
-	setValue,
+  value,
+  setValue,
 }: {
-	setValue: (value: string) => void;
-	value: string;
+  setValue: (value: string) => void;
+  value: string;
 }) {
-	const [open, setOpen] = useState(true);
-	const [myValue, setMyValue] = useState(value);
-	const { dark } = useContext(darkContext);
-	const { setErrorData, setSuccessData } = useContext(alertContext);
-	const { closePopUp } = useContext(PopUpContext);
-	const ref = useRef();
-	function setModalOpen(x: boolean) {
-		setOpen(x);
-		if (x === false) {
-			setTimeout(() => {
-				closePopUp();
-			}, 300);
-		}
-	}
-	return (
-		<Transition.Root show={open} appear={true} as={Fragment}>
-			<Dialog
-				as="div"
-				className="relative z-10"
-				onClose={setModalOpen}
-				initialFocus={ref}
-			>
-				<Transition.Child
-					as={Fragment}
-					enter="ease-out duration-300"
-					enterFrom="opacity-0"
-					enterTo="opacity-100"
-					leave="ease-in duration-200"
-					leaveFrom="opacity-100"
-					leaveTo="opacity-0"
-				>
-					<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-				</Transition.Child>
+  const [open, setOpen] = useState(true);
+  const [myValue, setMyValue] = useState(value);
+  const { dark } = useContext(darkContext);
+  const { setErrorData, setSuccessData } = useContext(alertContext);
+  const { closePopUp } = useContext(PopUpContext);
+  const ref = useRef();
+  function setModalOpen(x: boolean) {
+    setOpen(x);
+    if (x === false) {
+      setTimeout(() => {
+        closePopUp();
+      }, 300);
+    }
+  }
+  return (
+    <Transition.Root show={open} appear={true} as={Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-10"
+        onClose={setModalOpen}
+        initialFocus={ref}
+      >
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
 
-				<div className="fixed inset-0 z-10 overflow-y-auto">
-					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-						<Transition.Child
-							as={Fragment}
-							enter="ease-out duration-300"
-							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-							enterTo="opacity-100 translate-y-0 sm:scale-100"
-							leave="ease-in duration-200"
-							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-						>
-							<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
-								<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-								<button
-										type="button"
-										className="rounded-md text-gray-400 hover:text-gray-500"
-										onClick={() => {
-											setModalOpen(false);
-										}}
-									>
-										<span className="sr-only">Close</span>
-										<XMarkIcon className="h-6 w-6" aria-hidden="true" />
-									</button>
-								</div>
-								<div className="h-full w-full flex flex-col justify-center items-center">
-									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-										<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
-											<DocumentTextIcon
-												className="h-6 w-6 text-blue-600"
-												aria-hidden="true"
-											/>
-										</div>
-										<div className="mt-4 text-center sm:ml-4 sm:text-left">
-											<Dialog.Title
-												as="h3"
-												className="text-lg font-medium dark:text-white leading-10 text-gray-900"
-											>
-												Edit Prompt
-											</Dialog.Title>
-										</div>
-									</div>
-									<div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
-										<div className="flex h-full w-full">
-											<div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-gray-800 shadow">
-												<textarea
-													ref={ref}
-													className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
-													value={myValue}
-													onChange={(e) => {
-														setMyValue(e.target.value);
-														setValue(e.target.value);
-													}}
-												/>
-											</div>
-										</div>
-									</div>
-									<div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
-										<button
-											type="button"
-											className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
-											onClick={() => {
-												checkPrompt(myValue)
-													.then((apiReturn) => {
-														if (apiReturn.data) {
-															let inputVariables =
-																apiReturn.data.input_variables;
-															if (inputVariables.length === 0) {
-																setErrorData({
-																	title:
-																		"The template you are attempting to use does not contain any variables for data entry.",
-																});
-															} else {
-																setSuccessData({
-																	title: "Prompt is ready",
-																});
-																setModalOpen(false);
-																setValue(myValue);
-															}
-														} else {
-															setErrorData({
-																title: "Something went wrong, please try again",
-															});
-														}
-													})
-													.catch((error) => {
-														return setErrorData({
-															title:
-																"There is something wrong with this prompt, please review it",
-															list: [error.response.data.detail],
-														});
-													});
-											}}
-										>
-											Check & Save
-										</button>
-									</div>
-								</div>
-							</Dialog.Panel>
-						</Transition.Child>
-					</div>
-				</div>
-			</Dialog>
-		</Transition.Root>
-	);
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+                  <button
+                    type="button"
+                    className="rounded-md text-gray-400 hover:text-gray-500"
+                    onClick={() => {
+                      setModalOpen(false);
+                    }}
+                  >
+                    <span className="sr-only">Close</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </button>
+                </div>
+                <div className="h-full w-full flex flex-col justify-center items-center">
+                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
+                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+                      <DocumentTextIcon
+                        className="h-6 w-6 text-blue-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+                      >
+                        Edit Prompt
+                      </Dialog.Title>
+                    </div>
+                  </div>
+                  <div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+                    <div className="flex h-full w-full">
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-gray-800 shadow">
+                        <textarea
+                          ref={ref}
+                          className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+                          value={myValue}
+                          onChange={(e) => {
+                            setMyValue(e.target.value);
+                            setValue(e.target.value);
+                          }}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
+                    <button
+                      type="button"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+                      onClick={() => {
+                        checkPrompt(myValue)
+                          .then((apiReturn) => {
+                            if (apiReturn.data) {
+                              let inputVariables =
+                                apiReturn.data.input_variables;
+                              if (inputVariables.length === 0) {
+                                setErrorData({
+                                  title:
+                                    "The template you are attempting to use does not contain any variables for data entry.",
+                                });
+                              } else {
+                                setSuccessData({
+                                  title: "Prompt is ready",
+                                });
+                                setModalOpen(false);
+                                setValue(myValue);
+                              }
+                            } else {
+                              setErrorData({
+                                title: "Something went wrong, please try again",
+                              });
+                            }
+                          })
+                          .catch((error) => {
+                            return setErrorData({
+                              title:
+                                "There is something wrong with this prompt, please review it",
+                              list: [error.response.data.detail],
+                            });
+                          });
+                      }}
+                    >
+                      Check & Save
+                    </button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
 }
diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx
index c561b552e..0a13413ff 100644
--- a/src/frontend/src/modals/textAreaModal/index.tsx
+++ b/src/frontend/src/modals/textAreaModal/index.tsx
@@ -1,123 +1,123 @@
 import { Dialog, Transition } from "@headlessui/react";
 import {
-	XMarkIcon,
-	ClipboardDocumentListIcon,
+  XMarkIcon,
+  ClipboardDocumentListIcon,
 } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function TextAreaModal({
-	value,
-	setValue,
+  value,
+  setValue,
 }: {
-	setValue: (value: string) => void;
-	value: string | string[];
+  setValue: (value: string) => void;
+  value: string | string[];
 }) {
-	const [open, setOpen] = useState(true);
-	const [myValue, setMyValue] = useState(value);
-	const { closePopUp } = useContext(PopUpContext);
-	const ref = useRef();
-	function setModalOpen(x: boolean) {
-		setOpen(x);
-		if (x === false) {
-			setTimeout(() => {
-				closePopUp();
-			}, 300);
-		}
-	}
-	return (
-		<Transition.Root show={open} appear={true} as={Fragment}>
-			<Dialog
-				as="div"
-				className="relative z-10"
-				onClose={setModalOpen}
-				initialFocus={ref}
-			>
-				<Transition.Child
-					as={Fragment}
-					enter="ease-out duration-300"
-					enterFrom="opacity-0"
-					enterTo="opacity-100"
-					leave="ease-in duration-200"
-					leaveFrom="opacity-100"
-					leaveTo="opacity-0"
-				>
-					<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-				</Transition.Child>
+  const [open, setOpen] = useState(true);
+  const [myValue, setMyValue] = useState(value);
+  const { closePopUp } = useContext(PopUpContext);
+  const ref = useRef();
+  function setModalOpen(x: boolean) {
+    setOpen(x);
+    if (x === false) {
+      setTimeout(() => {
+        closePopUp();
+      }, 300);
+    }
+  }
+  return (
+    <Transition.Root show={open} appear={true} as={Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-10"
+        onClose={setModalOpen}
+        initialFocus={ref}
+      >
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
 
-				<div className="fixed inset-0 z-10 overflow-y-auto">
-					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-						<Transition.Child
-							as={Fragment}
-							enter="ease-out duration-300"
-							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-							enterTo="opacity-100 translate-y-0 sm:scale-100"
-							leave="ease-in duration-200"
-							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-						>
-							<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
-								<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-									<button
-										type="button"
-										className="rounded-md text-gray-400 hover:text-gray-500"
-										onClick={() => {
-											setModalOpen(false);
-										}}
-									>
-										<span className="sr-only">Close</span>
-										<XMarkIcon className="h-6 w-6" aria-hidden="true" />
-									</button>
-								</div>
-								<div className="h-full w-full flex flex-col justify-center items-center">
-									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-										<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
-											<ClipboardDocumentListIcon
-												className="h-6 w-6 text-blue-600"
-												aria-hidden="true"
-											/>
-										</div>
-										<div className="mt-4 text-center sm:ml-4 sm:text-left">
-											<Dialog.Title
-												as="h3"
-												className="text-lg font-medium dark:text-white leading-10 text-gray-900"
-											>
-												Edit text
-											</Dialog.Title>
-										</div>
-									</div>
-									<div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
-										<div className="flex h-full w-full">
-											<div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
-												<textarea
-													ref={ref}
-													className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
-													value={myValue}
-													onChange={(e) => {
-														setMyValue(e.target.value);
-														setValue(e.target.value);
-													}}
-												/>
-											</div>
-										</div>
-									</div>
-									<div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
-										<button
-											type="button"
-											className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
-											onClick={() => {
-												setModalOpen(false);
-											}}
-										>
-											Finish editing
-										</button>
-									</div>
-								</div>
-							</Dialog.Panel>
-						</Transition.Child>
-					</div>
-				</div>
-			</Dialog>
-		</Transition.Root>
-	);
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+                  <button
+                    type="button"
+                    className="rounded-md text-gray-400 hover:text-gray-500"
+                    onClick={() => {
+                      setModalOpen(false);
+                    }}
+                  >
+                    <span className="sr-only">Close</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </button>
+                </div>
+                <div className="h-full w-full flex flex-col justify-center items-center">
+                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
+                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+                      <ClipboardDocumentListIcon
+                        className="h-6 w-6 text-blue-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+                      >
+                        Edit text
+                      </Dialog.Title>
+                    </div>
+                  </div>
+                  <div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+                    <div className="flex h-full w-full">
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
+                        <textarea
+                          ref={ref}
+                          className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+                          value={myValue}
+                          onChange={(e) => {
+                            setMyValue(e.target.value);
+                            setValue(e.target.value);
+                          }}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
+                    <button
+                      type="button"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+                      onClick={() => {
+                        setModalOpen(false);
+                      }}
+                    >
+                      Finish editing
+                    </button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
 }
diff --git a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
index 9eae07286..db356d854 100644
--- a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
@@ -1,33 +1,33 @@
 import { ConnectionLineComponentProps } from "reactflow";
 
 const ConnectionLineComponent = ({
-	fromX,
-	fromY,
-	toX,
-	toY,
-	connectionLineStyle = {}, // provide a default value for connectionLineStyle
+  fromX,
+  fromY,
+  toX,
+  toY,
+  connectionLineStyle = {}, // provide a default value for connectionLineStyle
 }: ConnectionLineComponentProps) => {
-	return (
-		<g>
-			<path
-				fill="none"
-				stroke="#222"
-				strokeWidth={1.5}
-				className="animated dark:stroke-gray-400"
-				d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
-				style={connectionLineStyle}
-			/>
-			<circle
-				cx={toX}
-				cy={toY}
-				fill="#fff"
-				r={3}
-				stroke="#222"
-				className="dark:stroke-gray-400 dark:fill-gray-800"
-				strokeWidth={1.5}
-			/>
-		</g>
-	);
+  return (
+    <g>
+      <path
+        fill="none"
+        stroke="#222"
+        strokeWidth={1.5}
+        className="animated dark:stroke-gray-400"
+        d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
+        style={connectionLineStyle}
+      />
+      <circle
+        cx={toX}
+        cy={toY}
+        fill="#fff"
+        r={3}
+        stroke="#222"
+        className="dark:stroke-gray-400 dark:fill-gray-800"
+        strokeWidth={1.5}
+      />
+    </g>
+  );
 };
 
 export default ConnectionLineComponent;
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index a657a1211..31bf78156 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -3,42 +3,42 @@ import { Disclosure } from "@headlessui/react";
 import { DisclosureComponentType } from "../../../../types/components";
 
 export default function DisclosureComponent({
-	button: { title, Icon, buttons = [] },
-	children,
+  button: { title, Icon, buttons = [] },
+  children,
 }: DisclosureComponentType) {
-	return (
-		<Disclosure as="div" key={title}>
-			{({ open }) => (
-				<>
-					<div>
-						<Disclosure.Button className="select-none bg-gray-50 dark:bg-gray-700/60 dark:border-y-gray-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
-							<div className="flex gap-4">
-								<Icon className="w-6 text-gray-800 dark:text-white/80" />
-								<span className="flex items-center text-sm text-gray-800 dark:text-white/80 font-medium">
-									{title}
-								</span>
-							</div>
-							<div className="flex gap-2">
-								{buttons.map((x, index) => (
-									<button key={index} onClick={x.onClick}>
-										{x.Icon}
-									</button>
-								))}
-								<div>
-									<ChevronRightIcon
-										className={`${
-											open ? "rotate-90 transform" : ""
-										} h-4 w-4 text-gray-800 dark:text-white`}
-									/>
-								</div>
-							</div>
-						</Disclosure.Button>
-					</div>
-					<Disclosure.Panel as="div" className="-mt-px">
-						{children}
-					</Disclosure.Panel>
-				</>
-			)}
-		</Disclosure>
-	);
+  return (
+    <Disclosure as="div" key={title}>
+      {({ open }) => (
+        <>
+          <div>
+            <Disclosure.Button className="select-none bg-gray-50 dark:bg-gray-700/60 dark:border-y-gray-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
+              <div className="flex gap-4">
+                <Icon className="w-6 text-gray-800 dark:text-white/80" />
+                <span className="flex items-center text-sm text-gray-800 dark:text-white/80 font-medium">
+                  {title}
+                </span>
+              </div>
+              <div className="flex gap-2">
+                {buttons.map((x, index) => (
+                  <button key={index} onClick={x.onClick}>
+                    {x.Icon}
+                  </button>
+                ))}
+                <div>
+                  <ChevronRightIcon
+                    className={`${
+                      open ? "rotate-90 transform" : ""
+                    } h-4 w-4 text-gray-800 dark:text-white`}
+                  />
+                </div>
+              </div>
+            </Disclosure.Button>
+          </div>
+          <Disclosure.Panel as="div" className="-mt-px">
+            {children}
+          </Disclosure.Panel>
+        </>
+      )}
+    </Disclosure>
+  );
 }
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index c0ba3f31a..998575c53 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -6,62 +6,62 @@ import { typesContext } from "../../../../contexts/typesContext";
 import { APIClassType, APIObjectType } from "../../../../types/api";
 
 export default function ExtraSidebar() {
-	const { data } = useContext(typesContext);
+  const { data } = useContext(typesContext);
 
-	function onDragStart(
-		event: React.DragEvent<any>,
-		data: { type: string; node?: APIClassType }
-	) {
-		//start drag event
-		event.dataTransfer.effectAllowed = "move";
-		event.dataTransfer.setData("json", JSON.stringify(data));
-	}
+  function onDragStart(
+    event: React.DragEvent<any>,
+    data: { type: string; node?: APIClassType }
+  ) {
+    //start drag event
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("json", JSON.stringify(data));
+  }
 
-	return (
-		<div className="mt-1 w-full">
-			{Object.keys(data)
-				.sort()
-				.map((d: keyof APIObjectType, i) => (
-					<DisclosureComponent
-						key={i}
-						button={{
-							title: nodeNames[d] ?? nodeNames.unknown,
-							Icon: nodeIcons[d] ?? nodeIcons.unknown,
-						}}
-					>
-						<div className="p-2 flex flex-col gap-2">
-							{Object.keys(data[d])
-								.sort()
-								.map((t: string, k) => (
-									<div key={k}>
-										<div
-											draggable
-											className={" cursor-grab border-l-8 rounded-l-md"}
-											style={{
-												borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
-											}}
-											onDragStart={(event) =>
-												onDragStart(event, {
-													type: t,
-													node: data[d][t],
-												})
-											}
-										>
-											<div className="flex w-full justify-between text-sm px-3 py-1 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
-												<span className="text-black dark:text-white w-36 pr-1 truncate text-xs">
-													{t}
-												</span>
-												<Bars2Icon className="w-4 h-6  text-gray-400 dark:text-gray-600" />
-											</div>
-										</div>
-									</div>
-								))}
-							{Object.keys(data[d]).length === 0 && (
-								<div className="text-gray-400 text-center">Coming soon</div>
-							)}
-						</div>
-					</DisclosureComponent>
-				))}
-		</div>
-	);
+  return (
+    <div className="mt-1 w-full">
+      {Object.keys(data)
+        .sort()
+        .map((d: keyof APIObjectType, i) => (
+          <DisclosureComponent
+            key={i}
+            button={{
+              title: nodeNames[d] ?? nodeNames.unknown,
+              Icon: nodeIcons[d] ?? nodeIcons.unknown,
+            }}
+          >
+            <div className="p-2 flex flex-col gap-2">
+              {Object.keys(data[d])
+                .sort()
+                .map((t: string, k) => (
+                  <div key={k}>
+                    <div
+                      draggable
+                      className={" cursor-grab border-l-8 rounded-l-md"}
+                      style={{
+                        borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
+                      }}
+                      onDragStart={(event) =>
+                        onDragStart(event, {
+                          type: t,
+                          node: data[d][t],
+                        })
+                      }
+                    >
+                      <div className="flex w-full justify-between text-sm px-3 py-1 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
+                        <span className="text-black dark:text-white w-36 pr-1 truncate text-xs">
+                          {t}
+                        </span>
+                        <Bars2Icon className="w-4 h-6  text-gray-400 dark:text-gray-600" />
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              {Object.keys(data[d]).length === 0 && (
+                <div className="text-gray-400 text-center">Coming soon</div>
+              )}
+            </div>
+          </DisclosureComponent>
+        ))}
+    </div>
+  );
 }
diff --git a/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
index 5f7f934d2..782596782 100644
--- a/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
@@ -6,89 +6,89 @@ import { FlowType } from "../../../../types/flow";
 import _ from "lodash";
 
 export default function TabComponent({
-	selected,
-	flow,
-	onClick,
+  selected,
+  flow,
+  onClick,
 }: {
-	flow: FlowType;
-	selected: boolean;
-	onClick: () => void;
+  flow: FlowType;
+  selected: boolean;
+  onClick: () => void;
 }) {
-	const { removeFlow, updateFlow, flows } = useContext(TabsContext);
-	const [isRename, setIsRename] = useState(false);
-	const [value, setValue] = useState("");
-	return (
-		<>
-			{flow ? (
-				!selected ? (
-					<div
-						className="dark:text-white flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-x-gray-300 dark:border-x-gray-600 -ml-px"
-						onClick={onClick}
-					>
-						<span className="w-32 truncate text-left">{flow.name}</span>
+  const { removeFlow, updateFlow, flows } = useContext(TabsContext);
+  const [isRename, setIsRename] = useState(false);
+  const [value, setValue] = useState("");
+  return (
+    <>
+      {flow ? (
+        !selected ? (
+          <div
+            className="dark:text-white flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-x-gray-300 dark:border-x-gray-600 -ml-px"
+            onClick={onClick}
+          >
+            <span className="w-32 truncate text-left">{flow.name}</span>
 
-						<button
-							onClick={(e) => {
-								e.stopPropagation();
-								removeFlow(flow.id);
-							}}
-						>
-							<XMarkIcon className="h-4 hover:bg-white dark:hover:bg-gray-600 rounded-full" />
-						</button>
-					</div>
-				) : (
-					<div className="bg-white dark:text-white dark:bg-gray-700/60 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-gray-600 px-4 py-1 rounded-t-xl -ml-px">
-						{isRename ? (
-							<input
-								autoFocus
-								className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md  w-28"
-								onBlur={() => {
-									setIsRename(false);
-									if (value !== "") {
-										let newFlow = _.cloneDeep(flow);
-										newFlow.name = value;
-										updateFlow(newFlow);
-									}
-								}}
-								value={value}
-								onChange={(e) => {
-									setValue(e.target.value);
-								}}
-							/>
-						) : (
-							<div className="flex items-center gap-2">
-								<span
-									className="text-left w-32 truncate"
-									onDoubleClick={() => {
-										setIsRename(true);
-										setValue(flow.name);
-									}}
-								>
-									{flow.name}
-								</span>
-							</div>
-						)}
-						<button
-							onClick={() => {
-								removeFlow(flow.id);
-							}}
-						>
-							{flows.length > 1 && (
-								<XMarkIcon className="h-4 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-full" />
-							)}
-						</button>
-					</div>
-				)
-			) : (
-				<div className="h-full py-1.5 flex justify-center items-center">
-					<button
-						className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-x-gray-300 dark:border-x-gray-600 dark:text-white -ml-px"
-						onClick={onClick}
-					>
-						<PlusIcon className="h-5 rounded-full hover:bg-white dark:hover:bg-gray-600" />
-					</button>
-				</div>
-			)}
-		</>
-	);
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                removeFlow(flow.id);
+              }}
+            >
+              <XMarkIcon className="h-4 hover:bg-white dark:hover:bg-gray-600 rounded-full" />
+            </button>
+          </div>
+        ) : (
+          <div className="bg-white dark:text-white dark:bg-gray-700/60 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-gray-600 px-4 py-1 rounded-t-xl -ml-px">
+            {isRename ? (
+              <input
+                autoFocus
+                className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md  w-28"
+                onBlur={() => {
+                  setIsRename(false);
+                  if (value !== "") {
+                    let newFlow = _.cloneDeep(flow);
+                    newFlow.name = value;
+                    updateFlow(newFlow);
+                  }
+                }}
+                value={value}
+                onChange={(e) => {
+                  setValue(e.target.value);
+                }}
+              />
+            ) : (
+              <div className="flex items-center gap-2">
+                <span
+                  className="text-left w-32 truncate"
+                  onDoubleClick={() => {
+                    setIsRename(true);
+                    setValue(flow.name);
+                  }}
+                >
+                  {flow.name}
+                </span>
+              </div>
+            )}
+            <button
+              onClick={() => {
+                removeFlow(flow.id);
+              }}
+            >
+              {flows.length > 1 && (
+                <XMarkIcon className="h-4 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-full" />
+              )}
+            </button>
+          </div>
+        )
+      ) : (
+        <div className="h-full py-1.5 flex justify-center items-center">
+          <button
+            className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-x-gray-300 dark:border-x-gray-600 dark:text-white -ml-px"
+            onClick={onClick}
+          >
+            <PlusIcon className="h-5 rounded-full hover:bg-white dark:hover:bg-gray-600" />
+          </button>
+        </div>
+      )}
+    </>
+  );
 }
diff --git a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
index 3a3a9f277..278fe6756 100644
--- a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
@@ -5,12 +5,12 @@ import { TabsContext } from "../../../../contexts/tabsContext";
 import FlowPage from "../..";
 import { darkContext } from "../../../../contexts/darkContext";
 import {
-	ArrowDownTrayIcon,
-	ArrowUpTrayIcon,
-	BellIcon,
-	CodeBracketSquareIcon,
-	MoonIcon,
-	SunIcon,
+  ArrowDownTrayIcon,
+  ArrowUpTrayIcon,
+  BellIcon,
+  CodeBracketSquareIcon,
+  MoonIcon,
+  SunIcon,
 } from "@heroicons/react/24/outline";
 import { PopUpContext } from "../../../../contexts/popUpContext";
 import AlertDropdown from "../../../../alerts/alertDropDown";
@@ -21,108 +21,110 @@ import { typesContext } from "../../../../contexts/typesContext";
 import ApiModal from "../../../../modals/ApiModal";
 
 export default function TabsManagerComponent() {
-	const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } =
-		useContext(TabsContext);
-	const { openPopUp } = useContext(PopUpContext);
-	const { templates } = useContext(typesContext);
-	const AlertWidth = 384;
-	const { dark, setDark } = useContext(darkContext);
-	const { notificationCenter, setNotificationCenter } =
-		useContext(alertContext);
-	useEffect(() => {
-		//create the first flow
-		if (flows.length === 0 && Object.keys(templates).length > 0) {
-			addFlow();
-		}
-	}, [addFlow, flows.length, templates]);
+  const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } =
+    useContext(TabsContext);
+  const { openPopUp } = useContext(PopUpContext);
+  const { templates } = useContext(typesContext);
+  const AlertWidth = 384;
+  const { dark, setDark } = useContext(darkContext);
+  const { notificationCenter, setNotificationCenter } =
+    useContext(alertContext);
+  useEffect(() => {
+    //create the first flow
+    if (flows.length === 0 && Object.keys(templates).length > 0) {
+      addFlow();
+    }
+  }, [addFlow, flows.length, templates]);
 
-	return (
-		<div className="h-full w-full flex flex-col">
-			<div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 dark:bg-gray-800 px-2">
-				{flows.map((flow, index) => {
-					return (
-						<TabComponent
-							onClick={() => setTabIndex(index)}
-							selected={index === tabIndex}
-							key={index}
-							flow={flow}
-						/>
-					);
-				})}
-				<TabComponent
-					onClick={() => {
-						addFlow();
-					}}
-					selected={false}
-					flow={null}
-				/>
-				<div className="ml-auto mr-2 flex gap-3">
-					<button
-						onClick={() => openPopUp(<ApiModal flowName={flows[tabIndex].name} />)}
-						className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
-					>
-						Code <CodeBracketSquareIcon className="w-5 h-5" />
-					</button>
-					<button
-						onClick={() => openPopUp(<ImportModal />)}
-						className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
-					>
-						Import <ArrowUpTrayIcon className="w-5 h-5" />
-					</button>
-					<button
-						onClick={() => openPopUp(<ExportModal />)}
-						className="flex items-center gap-1 pr-2 text-sm text-gray-600  border-gray-400 border-r hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
-					>
-						Export <ArrowDownTrayIcon className="h-5 w-5" />
-					</button>
-					<button
-						className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
-						onClick={() => {
-							setDark(!dark);
-						}}
-					>
-						{dark ? (
-							<SunIcon className="h-5 w-5" />
-						) : (
-							<MoonIcon className="h-5 w-5" />
-						)}
-					</button>
-					<button
-						className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200 relative"
-						onClick={(event: React.MouseEvent<HTMLElement>) => {
-							setNotificationCenter(false);
-							const top = (event.target as Element).getBoundingClientRect().top;
-							const left = (event.target as Element).getBoundingClientRect()
-								.left;
-							openPopUp(
-								<>
-									<div
-										className="z-10 absolute"
-										style={{ top: top + 34, left: left - AlertWidth }}
-									>
-										<AlertDropdown />
-									</div>
-									<div className="h-screen w-screen fixed top-0 left-0"></div>
-								</>
-							);
-						}}
-					>
-						{notificationCenter && (
-							<div className="absolute w-1.5 h-1.5 rounded-full bg-red-600 right-[3px]"></div>
-						)}
-						<BellIcon className="h-5 w-5" aria-hidden="true" />
-					</button>
-				</div>
-			</div>
-			<div className="w-full h-full">
-				<ReactFlowProvider>
-					{flows[tabIndex] ? (
-						<FlowPage flow={flows[tabIndex]}></FlowPage>
-					) : (
-						<></>
-					)}
-				</ReactFlowProvider>
-			</div>
-		</div>
-	);
+  return (
+    <div className="h-full w-full flex flex-col">
+      <div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 dark:bg-gray-800 px-2">
+        {flows.map((flow, index) => {
+          return (
+            <TabComponent
+              onClick={() => setTabIndex(index)}
+              selected={index === tabIndex}
+              key={index}
+              flow={flow}
+            />
+          );
+        })}
+        <TabComponent
+          onClick={() => {
+            addFlow();
+          }}
+          selected={false}
+          flow={null}
+        />
+        <div className="ml-auto mr-2 flex gap-3">
+          <button
+            onClick={() =>
+              openPopUp(<ApiModal flowName={flows[tabIndex].name} />)
+            }
+            className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
+          >
+            Code <CodeBracketSquareIcon className="w-5 h-5" />
+          </button>
+          <button
+            onClick={() => openPopUp(<ImportModal />)}
+            className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
+          >
+            Import <ArrowUpTrayIcon className="w-5 h-5" />
+          </button>
+          <button
+            onClick={() => openPopUp(<ExportModal />)}
+            className="flex items-center gap-1 pr-2 text-sm text-gray-600  border-gray-400 border-r hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
+          >
+            Export <ArrowDownTrayIcon className="h-5 w-5" />
+          </button>
+          <button
+            className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
+            onClick={() => {
+              setDark(!dark);
+            }}
+          >
+            {dark ? (
+              <SunIcon className="h-5 w-5" />
+            ) : (
+              <MoonIcon className="h-5 w-5" />
+            )}
+          </button>
+          <button
+            className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200 relative"
+            onClick={(event: React.MouseEvent<HTMLElement>) => {
+              setNotificationCenter(false);
+              const top = (event.target as Element).getBoundingClientRect().top;
+              const left = (event.target as Element).getBoundingClientRect()
+                .left;
+              openPopUp(
+                <>
+                  <div
+                    className="z-10 absolute"
+                    style={{ top: top + 34, left: left - AlertWidth }}
+                  >
+                    <AlertDropdown />
+                  </div>
+                  <div className="h-screen w-screen fixed top-0 left-0"></div>
+                </>
+              );
+            }}
+          >
+            {notificationCenter && (
+              <div className="absolute w-1.5 h-1.5 rounded-full bg-red-600 right-[3px]"></div>
+            )}
+            <BellIcon className="h-5 w-5" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+      <div className="w-full h-full">
+        <ReactFlowProvider>
+          {flows[tabIndex] ? (
+            <FlowPage flow={flows[tabIndex]}></FlowPage>
+          ) : (
+            <></>
+          )}
+        </ReactFlowProvider>
+      </div>
+    </div>
+  );
 }
diff --git a/src/frontend/src/pages/FlowPage/hooks/useUndoRedo.ts b/src/frontend/src/pages/FlowPage/hooks/useUndoRedo.ts
index 85b135b73..a78ec7580 100644
--- a/src/frontend/src/pages/FlowPage/hooks/useUndoRedo.ts
+++ b/src/frontend/src/pages/FlowPage/hooks/useUndoRedo.ts
@@ -1,7 +1,7 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
-import { Edge, Node, useReactFlow } from 'reactflow';
-import { TabsContext } from '../../../contexts/tabsContext';
-import { cloneDeep } from 'lodash';
+import { useCallback, useContext, useEffect, useState } from "react";
+import { Edge, Node, useReactFlow } from "reactflow";
+import { TabsContext } from "../../../contexts/tabsContext";
+import { cloneDeep } from "lodash";
 
 type UseUndoRedoOptions = {
   maxHistorySize: number;
@@ -34,23 +34,25 @@ export const useUndoRedo: UseUndoRedo = ({
   // the past and future arrays store the states that we can jump to
   const { tabIndex, flows } = useContext(TabsContext);
 
-  const [past, setPast] = useState<HistoryItem[][]>(flows.map(()=>[]));
-  const [future, setFuture] = useState<HistoryItem[][]>(flows.map(()=>[]));
+  const [past, setPast] = useState<HistoryItem[][]>(flows.map(() => []));
+  const [future, setFuture] = useState<HistoryItem[][]>(flows.map(() => []));
 
   useEffect(() => {
     // whenever the flows variable changes, we need to add one array to the past and future states
-    setPast((old) => flows.map((f, i)=>old[i] ? old[i] : []));
-    setFuture((old) => flows.map((f, i)=>old[i] ? old[i] : []));
+    setPast((old) => flows.map((f, i) => (old[i] ? old[i] : [])));
+    setFuture((old) => flows.map((f, i) => (old[i] ? old[i] : [])));
   }, [flows]);
 
-
   const { setNodes, setEdges, getNodes, getEdges } = useReactFlow();
 
   const takeSnapshot = useCallback(() => {
     // push the current graph to the past state
     setPast((old) => {
       let newPast = cloneDeep(old);
-      newPast[tabIndex] = old[tabIndex].slice(old[tabIndex].length - maxHistorySize + 1, old[tabIndex].length);
+      newPast[tabIndex] = old[tabIndex].slice(
+        old[tabIndex].length - maxHistorySize + 1,
+        old[tabIndex].length
+      );
       newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
       return newPast;
     });
@@ -59,9 +61,18 @@ export const useUndoRedo: UseUndoRedo = ({
     setFuture((old) => {
       let newFuture = cloneDeep(old);
       newFuture[tabIndex] = [];
-      return newFuture
+      return newFuture;
     });
-  }, [getNodes, getEdges, past, future, tabIndex, setPast, setFuture, maxHistorySize]);
+  }, [
+    getNodes,
+    getEdges,
+    past,
+    future,
+    tabIndex,
+    setPast,
+    setFuture,
+    maxHistorySize,
+  ]);
 
   const undo = useCallback(() => {
     // get the last state that we want to go back to
@@ -72,20 +83,30 @@ export const useUndoRedo: UseUndoRedo = ({
       setPast((old) => {
         let newPast = cloneDeep(old);
         newPast[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1);
-        return newPast
+        return newPast;
       });
       // we store the current graph for the redo operation
       setFuture((old) => {
         let newFuture = cloneDeep(old);
-        newFuture[tabIndex] = old[tabIndex]
+        newFuture[tabIndex] = old[tabIndex];
         newFuture[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
-        return newFuture
+        return newFuture;
       });
       // now we can set the graph to the past state
       setNodes(pastState.nodes);
       setEdges(pastState.edges);
     }
-  }, [setNodes, setEdges, getNodes, getEdges, future, past, setFuture, setPast, tabIndex]);
+  }, [
+    setNodes,
+    setEdges,
+    getNodes,
+    getEdges,
+    future,
+    past,
+    setFuture,
+    setPast,
+    tabIndex,
+  ]);
 
   const redo = useCallback(() => {
     const futureState = future[tabIndex][future[tabIndex].length - 1];
@@ -94,18 +115,29 @@ export const useUndoRedo: UseUndoRedo = ({
       setFuture((old) => {
         let newFuture = cloneDeep(old);
         newFuture[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1);
-        return newFuture
+        return newFuture;
       });
       setPast((old) => {
         let newPast = cloneDeep(old);
         newPast[tabIndex] = old[tabIndex];
         newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
-        return newPast
+        return newPast;
       });
       setNodes(futureState.nodes);
       setEdges(futureState.edges);
     }
-  }, [future, past, setFuture, setPast, setNodes, setEdges, getNodes, getEdges, future, tabIndex]);
+  }, [
+    future,
+    past,
+    setFuture,
+    setPast,
+    setNodes,
+    setEdges,
+    getNodes,
+    getEdges,
+    future,
+    tabIndex,
+  ]);
 
   useEffect(() => {
     // this effect is used to attach the global event handlers
@@ -114,21 +146,24 @@ export const useUndoRedo: UseUndoRedo = ({
     }
 
     const keyDownHandler = (event: KeyboardEvent) => {
-      if (event.key === 'z' && (event.ctrlKey || event.metaKey) && event.shiftKey) {
+      if (
+        event.key === "z" &&
+        (event.ctrlKey || event.metaKey) &&
+        event.shiftKey
+      ) {
         redo();
-      } 
-      else if (event.key === 'y' && (event.ctrlKey || event.metaKey)) {
+      } else if (event.key === "y" && (event.ctrlKey || event.metaKey)) {
         event.preventDefault(); // prevent the default action
         redo();
-      } else if (event.key === 'z' && (event.ctrlKey || event.metaKey)) {
+      } else if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
         undo();
       }
     };
 
-    document.addEventListener('keydown', keyDownHandler);
+    document.addEventListener("keydown", keyDownHandler);
 
     return () => {
-      document.removeEventListener('keydown', keyDownHandler);
+      document.removeEventListener("keydown", keyDownHandler);
     };
   }, [undo, redo, enableShortcuts]);
 
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index faf1cc60d..213b79ab4 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -302,10 +302,10 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
     setLastSelection(flow);
   }, []);
 
-  const {setDisableCopyPaste} =  useContext(TabsContext)
+  const { setDisableCopyPaste } = useContext(TabsContext);
 
   return (
-    <div className="w-full h-full" ref={reactFlowWrapper} >
+    <div className="w-full h-full" ref={reactFlowWrapper}>
       {Object.keys(templates).length > 0 && Object.keys(types).length > 0 ? (
         <>
           <ReactFlow
@@ -314,9 +314,15 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
               updateFlow({ ...flow, data: reactFlowInstance.toObject() });
             }}
             edges={edges}
-            onPaneClick={() => {setDisableCopyPaste(false);}}
-            onNodeClick={() => {setDisableCopyPaste(true);}}
-            onPaneMouseLeave={() => {setDisableCopyPaste(true);}}
+            onPaneClick={() => {
+              setDisableCopyPaste(false);
+            }}
+            onNodeClick={() => {
+              setDisableCopyPaste(true);
+            }}
+            onPaneMouseLeave={() => {
+              setDisableCopyPaste(true);
+            }}
             onNodesChange={onNodesChange}
             onEdgesChange={onEdgesChangeMod}
             onConnect={onConnect}
diff --git a/src/frontend/src/png.d.ts b/src/frontend/src/png.d.ts
index f02bea9ff..cbfbd10d0 100644
--- a/src/frontend/src/png.d.ts
+++ b/src/frontend/src/png.d.ts
@@ -1,4 +1,4 @@
 declare module "*.png" {
-	const content: any;
-	export default content;
+  const content: any;
+  export default content;
 }
diff --git a/src/frontend/src/reportWebVitals.ts b/src/frontend/src/reportWebVitals.ts
index e48d8f3ca..5fa3583b7 100644
--- a/src/frontend/src/reportWebVitals.ts
+++ b/src/frontend/src/reportWebVitals.ts
@@ -1,15 +1,15 @@
 import { ReportHandler } from "web-vitals";
 
 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-	if (onPerfEntry && onPerfEntry instanceof Function) {
-		import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-			getCLS(onPerfEntry);
-			getFID(onPerfEntry);
-			getFCP(onPerfEntry);
-			getLCP(onPerfEntry);
-			getTTFB(onPerfEntry);
-		});
-	}
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
 };
 
 export default reportWebVitals;
diff --git a/src/frontend/src/svg.d.ts b/src/frontend/src/svg.d.ts
index d071d8e9e..1a3dd3c2a 100644
--- a/src/frontend/src/svg.d.ts
+++ b/src/frontend/src/svg.d.ts
@@ -1,4 +1,4 @@
 declare module "*.svg" {
-	const content: any;
-	export default content;
+  const content: any;
+  export default content;
 }
diff --git a/src/frontend/src/types/alerts/index.ts b/src/frontend/src/types/alerts/index.ts
index 91b6444b2..7033d99eb 100644
--- a/src/frontend/src/types/alerts/index.ts
+++ b/src/frontend/src/types/alerts/index.ts
@@ -1,29 +1,29 @@
 export type ErrorAlertType = {
-	title: string;
-	list: Array<string>;
-	id: string;
-	removeAlert: (id: string) => void;
+  title: string;
+  list: Array<string>;
+  id: string;
+  removeAlert: (id: string) => void;
 };
 export type NoticeAlertType = {
-	title: string;
-	link: string;
-	id: string;
-	removeAlert: (id: string) => void;
+  title: string;
+  link: string;
+  id: string;
+  removeAlert: (id: string) => void;
 };
 export type SuccessAlertType = {
-	title: string;
-	id: string;
-	removeAlert: (id: string) => void;
+  title: string;
+  id: string;
+  removeAlert: (id: string) => void;
 };
 export type SingleAlertComponentType = {
-	dropItem: AlertItemType;
-	removeAlert: (index: string) => void;
+  dropItem: AlertItemType;
+  removeAlert: (index: string) => void;
 };
 export type AlertDropdownType = {};
 export type AlertItemType = {
-	type: "notice" | "error" | "success";
-	title: string;
-	link?: string;
-	list?: Array<string>;
-	id: string;
+  type: "notice" | "error" | "success";
+  title: string;
+  link?: string;
+  list?: Array<string>;
+  id: string;
 };
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index 333e3d39a..8d26c4e15 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -4,37 +4,37 @@ import { Node, Edge, Viewport } from "reactflow";
 export type APIObjectType = { kind: APIKindType; [key: string]: APIKindType };
 export type APIKindType = { class: APIClassType; [key: string]: APIClassType };
 export type APITemplateType = {
-	variable: TemplateVariableType;
-	[key: string]: TemplateVariableType;
+  variable: TemplateVariableType;
+  [key: string]: TemplateVariableType;
 };
 export type APIClassType = {
-	base_classes: Array<string>;
-	description: string;
-	template: APITemplateType;
-	[key: string]: Array<string> | string | APITemplateType;
+  base_classes: Array<string>;
+  description: string;
+  template: APITemplateType;
+  [key: string]: Array<string> | string | APITemplateType;
 };
 export type TemplateVariableType = {
-	type: string;
-	required: boolean;
-	placeholder?: string;
-	list: boolean;
-	show: boolean;
-	multiline?: boolean;
-	value?: any;
-	[key: string]: any;
+  type: string;
+  required: boolean;
+  placeholder?: string;
+  list: boolean;
+  show: boolean;
+  multiline?: boolean;
+  value?: any;
+  [key: string]: any;
 };
 export type sendAllProps = {
-	nodes: Node[];
-	edges: Edge[];
-	name: string;
-	description: string;
-	viewport: Viewport;
-	message: string;
+  nodes: Node[];
+  edges: Edge[];
+  name: string;
+  description: string;
+  viewport: Viewport;
+  message: string;
 
-	chatHistory: { message: string; isSend: boolean }[];
+  chatHistory: { message: string; isSend: boolean }[];
 };
 export type errorsTypeAPI = {
-	function: { errors: Array<string> };
-	imports: { errors: Array<string> };
+  function: { errors: Array<string> };
+  imports: { errors: Array<string> };
 };
 export type PromptTypeAPI = { input_variables: Array<string> };
diff --git a/src/frontend/src/types/chat/index.ts b/src/frontend/src/types/chat/index.ts
index 13ca1db67..e4e0c1627 100644
--- a/src/frontend/src/types/chat/index.ts
+++ b/src/frontend/src/types/chat/index.ts
@@ -3,8 +3,8 @@ import { FlowType } from "../flow";
 
 export type ChatType = { flow: FlowType; reactFlowInstance: ReactFlowInstance };
 export type ChatMessageType = {
-	message: string;
-	isSend: boolean;
-	thought?: string;
-	files?: Array<{ data: string; type: string; data_type: string }>;
+  message: string;
+  isSend: boolean;
+  thought?: string;
+  files?: Array<{ data: string; type: string; data_type: string }>;
 };
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index d14a89c0c..e5fc986e8 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -1,69 +1,74 @@
-import { ForwardRefExoticComponent, ReactElement, ReactFragment, ReactNode } from "react";
+import {
+  ForwardRefExoticComponent,
+  ReactElement,
+  ReactFragment,
+  ReactNode,
+} from "react";
 import { NodeDataType } from "../flow/index";
 export type InputComponentType = {
-	value: string;
-	disabled?: boolean;
-	onChange: (value: string) => void;
-	password: boolean;
+  value: string;
+  disabled?: boolean;
+  onChange: (value: string) => void;
+  password: boolean;
 };
 export type ToggleComponentType = {
-	enabled: boolean;
-	setEnabled: (state: boolean) => void;
-	disabled: boolean;
+  enabled: boolean;
+  setEnabled: (state: boolean) => void;
+  disabled: boolean;
 };
 export type DropDownComponentType = {
-	value: string;
-	options: string[];
-	onSelect: (value: string) => void;
+  value: string;
+  options: string[];
+  onSelect: (value: string) => void;
 };
 export type ParameterComponentType = {
-	data: NodeDataType;
-	title: string;
-	id: string;
-	color: string;
-	left: boolean;
-	type: string;
-	required?: boolean;
-	name?: string;
-	tooltipTitle: string;
+  data: NodeDataType;
+  title: string;
+  id: string;
+  color: string;
+  left: boolean;
+  type: string;
+  required?: boolean;
+  name?: string;
+  tooltipTitle: string;
 };
 export type InputListComponentType = {
-	value: string[];
-	onChange: (value: string[]) => void;
-	disabled: boolean;
+  value: string[];
+  onChange: (value: string[]) => void;
+  disabled: boolean;
 };
 
 export type TextAreaComponentType = {
-	disabled: boolean;
-	onChange: (value: string[] | string) => void;
-	value: string;
+  disabled: boolean;
+  onChange: (value: string[] | string) => void;
+  value: string;
 };
 
 export type FileComponentType = {
-	disabled: boolean;
-	onChange: (value: string[] | string) => void;
-	value: string;
-	suffixes: Array<string>;
-	fileTypes: Array<string>;
-	onFileChange: (value: string) => void;
+  disabled: boolean;
+  onChange: (value: string[] | string) => void;
+  value: string;
+  suffixes: Array<string>;
+  fileTypes: Array<string>;
+  onFileChange: (value: string) => void;
 };
 
 export type DisclosureComponentType = {
-	children: ReactNode;
-	button: {
-		title: string;
-		Icon: ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
-		buttons?: {
-			Icon: ReactElement;
-			title: string;
-			onClick: (event?: React.MouseEvent) => void;
-		}[];
-	};
+  children: ReactNode;
+  button: {
+    title: string;
+    Icon: ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
+    buttons?: {
+      Icon: ReactElement;
+      title: string;
+      onClick: (event?: React.MouseEvent) => void;
+    }[];
+  };
 };
 export type FloatComponentType = {
-	value: string;
-	disabled?: boolean;
-	onChange: (value: string) => void;
+  value: string;
+  disabled?: boolean;
+  onChange: (value: string) => void;
 };
 
 export type TooltipComponentType = {
diff --git a/src/frontend/src/types/entities/index.ts b/src/frontend/src/types/entities/index.ts
index 0a395f64e..3c0877579 100644
--- a/src/frontend/src/types/entities/index.ts
+++ b/src/frontend/src/types/entities/index.ts
@@ -1,8 +1,8 @@
 import { HomeIcon } from "@heroicons/react/24/outline";
 
 export type sidebarNavigationItemType = {
-	name: string;
-	href: string;
-	icon: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
-	current: boolean;
+  name: string;
+  href: string;
+  icon: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
+  current: boolean;
 };
diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts
index e4c43a2aa..6c118aa49 100644
--- a/src/frontend/src/types/flow/index.ts
+++ b/src/frontend/src/types/flow/index.ts
@@ -3,20 +3,20 @@ import { APIClassType } from "../api/index";
 import { ReactFlowJsonObject, XYPosition } from "reactflow";
 
 export type FlowType = {
-	name: string;
-	id: string;
-	data: ReactFlowJsonObject;
-	description: string;
+  name: string;
+  id: string;
+  data: ReactFlowJsonObject;
+  description: string;
 };
 export type NodeType = {
-	id: string;
-	type?: string;
-	position: XYPosition;
-	data: NodeDataType;
+  id: string;
+  type?: string;
+  position: XYPosition;
+  data: NodeDataType;
 };
 export type NodeDataType = {
-	type: string;
-	node?: APIClassType;
-	id: string;
-	value: any;
+  type: string;
+  node?: APIClassType;
+  id: string;
+  value: any;
 };
diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts
index 85a5b220e..f99b33dc0 100644
--- a/src/frontend/src/types/tabs/index.ts
+++ b/src/frontend/src/types/tabs/index.ts
@@ -1,27 +1,30 @@
 import { FlowType } from "../flow";
 
 export type TabsContextType = {
-	save: () => void;
-	tabIndex: number;
-	setTabIndex: (index: number) => void;
-	flows: Array<FlowType>;
-	removeFlow: (id: string) => void;
-	addFlow: (flowData?: FlowType,newFlow?:boolean) => void;
-	updateFlow: (newFlow: FlowType) => void;
-	incrementNodeId: () => string;
-	downloadFlow: (flow: FlowType) => void;
-	uploadFlow: (newFlow?:boolean) => void;
-	hardReset: () => void;
-	//disable CopyPaste
-	disableCopyPaste: boolean;
-	setDisableCopyPaste: (value: boolean) => void;
-	getNodeId: () => string;
-	paste: (selection: {nodes: any, edges: any}, position: {x: number, y: number}) => void;
+  save: () => void;
+  tabIndex: number;
+  setTabIndex: (index: number) => void;
+  flows: Array<FlowType>;
+  removeFlow: (id: string) => void;
+  addFlow: (flowData?: FlowType, newFlow?: boolean) => void;
+  updateFlow: (newFlow: FlowType) => void;
+  incrementNodeId: () => string;
+  downloadFlow: (flow: FlowType) => void;
+  uploadFlow: (newFlow?: boolean) => void;
+  hardReset: () => void;
+  //disable CopyPaste
+  disableCopyPaste: boolean;
+  setDisableCopyPaste: (value: boolean) => void;
+  getNodeId: () => string;
+  paste: (
+    selection: { nodes: any; edges: any },
+    position: { x: number; y: number }
+  ) => void;
 };
 
 export type LangFlowState = {
-	tabIndex: number;
-	flows: FlowType[];
-	id: string;
-	nodeId: number;
-};
\ No newline at end of file
+  tabIndex: number;
+  flows: FlowType[];
+  id: string;
+  nodeId: number;
+};
diff --git a/src/frontend/src/types/templatesContext/index.ts b/src/frontend/src/types/templatesContext/index.ts
index 7e2f82890..93c84dc3d 100644
--- a/src/frontend/src/types/templatesContext/index.ts
+++ b/src/frontend/src/types/templatesContext/index.ts
@@ -1,6 +1,6 @@
 const template: { [char: string]: string } = {};
 
 export type TemplateContextType = {
-	templates: typeof template;
-	setTemplates: (newState: {}) => void;
+  templates: typeof template;
+  setTemplates: (newState: {}) => void;
 };
diff --git a/src/frontend/src/types/typesContext/index.ts b/src/frontend/src/types/typesContext/index.ts
index 6754e605c..c44bfa4ef 100644
--- a/src/frontend/src/types/typesContext/index.ts
+++ b/src/frontend/src/types/typesContext/index.ts
@@ -5,13 +5,13 @@ const template: { [char: string]: string } = {};
 const data: { [char: string]: string } = {};
 
 export type typesContextType = {
-	reactFlowInstance: ReactFlowInstance | null;
-	setReactFlowInstance: any;
-	deleteNode: (idx: string) => void;
-	types: typeof types;
-	setTypes: (newState: {}) => void;
-	templates: typeof template;
-	setTemplates: (newState: {}) => void;
-	data: typeof data;
-	setData: (newState: {}) => void;
+  reactFlowInstance: ReactFlowInstance | null;
+  setReactFlowInstance: any;
+  deleteNode: (idx: string) => void;
+  types: typeof types;
+  setTypes: (newState: {}) => void;
+  templates: typeof template;
+  setTemplates: (newState: {}) => void;
+  data: typeof data;
+  setData: (newState: {}) => void;
 };
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 72e44f781..d464290e1 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -1,20 +1,20 @@
 import {
-	RocketLaunchIcon,
-	LinkIcon,
-	CpuChipIcon,
-	LightBulbIcon,
-	CommandLineIcon,
-	WrenchScrewdriverIcon,
-	WrenchIcon,
-	ComputerDesktopIcon,
-	Bars3CenterLeftIcon,
-	GiftIcon,
-	PaperClipIcon,
-	QuestionMarkCircleIcon,
-	FingerPrintIcon,
-	ScissorsIcon,
-	CircleStackIcon,
-	Squares2X2Icon,
+  RocketLaunchIcon,
+  LinkIcon,
+  CpuChipIcon,
+  LightBulbIcon,
+  CommandLineIcon,
+  WrenchScrewdriverIcon,
+  WrenchIcon,
+  ComputerDesktopIcon,
+  Bars3CenterLeftIcon,
+  GiftIcon,
+  PaperClipIcon,
+  QuestionMarkCircleIcon,
+  FingerPrintIcon,
+  ScissorsIcon,
+  CircleStackIcon,
+  Squares2X2Icon,
 } from "@heroicons/react/24/outline";
 import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
 import { FlowType } from "./types/flow";
@@ -22,475 +22,473 @@ import { APITemplateType, TemplateVariableType } from "./types/api";
 import _ from "lodash";
 
 export function classNames(...classes: Array<string>) {
-	return classes.filter(Boolean).join(" ");
+  return classes.filter(Boolean).join(" ");
 }
 
 export const textColors = {
-	white: "text-white",
-	red: "text-red-700",
-	orange: "text-orange-700",
-	amber: "text-amber-700",
-	yellow: "text-yellow-700",
-	lime: "text-lime-700",
-	green: "text-green-700",
-	emerald: "text-emerald-700",
-	teal: "text-teal-700",
-	cyan: "text-cyan-700",
-	sky: "text-sky-700",
-	blue: "text-blue-700",
-	indigo: "text-indigo-700",
-	violet: "text-violet-700",
-	purple: "text-purple-700",
-	fuchsia: "text-fuchsia-700",
-	pink: "text-pink-700",
-	rose: "text-rose-700",
-	black: "text-black-700",
-	gray: "text-gray-700",
+  white: "text-white",
+  red: "text-red-700",
+  orange: "text-orange-700",
+  amber: "text-amber-700",
+  yellow: "text-yellow-700",
+  lime: "text-lime-700",
+  green: "text-green-700",
+  emerald: "text-emerald-700",
+  teal: "text-teal-700",
+  cyan: "text-cyan-700",
+  sky: "text-sky-700",
+  blue: "text-blue-700",
+  indigo: "text-indigo-700",
+  violet: "text-violet-700",
+  purple: "text-purple-700",
+  fuchsia: "text-fuchsia-700",
+  pink: "text-pink-700",
+  rose: "text-rose-700",
+  black: "text-black-700",
+  gray: "text-gray-700",
 };
 
 export const borderLColors = {
-	white: "border-l-white",
-	red: "border-l-red-500",
-	orange: "border-l-orange-500",
-	amber: "border-l-amber-500",
-	yellow: "border-l-yellow-500",
-	lime: "border-l-lime-500",
-	green: "border-l-green-500",
-	emerald: "border-l-emerald-500",
-	teal: "border-l-teal-500",
-	cyan: "border-l-cyan-500",
-	sky: "border-l-sky-500",
-	blue: "border-l-blue-500",
-	indigo: "border-l-indigo-500",
-	violet: "border-l-violet-500",
-	purple: "border-l-purple-500",
-	fuchsia: "border-l-fuchsia-500",
-	pink: "border-l-pink-500",
-	rose: "border-l-rose-500",
-	black: "border-l-black-500",
-	gray: "border-l-gray-500",
+  white: "border-l-white",
+  red: "border-l-red-500",
+  orange: "border-l-orange-500",
+  amber: "border-l-amber-500",
+  yellow: "border-l-yellow-500",
+  lime: "border-l-lime-500",
+  green: "border-l-green-500",
+  emerald: "border-l-emerald-500",
+  teal: "border-l-teal-500",
+  cyan: "border-l-cyan-500",
+  sky: "border-l-sky-500",
+  blue: "border-l-blue-500",
+  indigo: "border-l-indigo-500",
+  violet: "border-l-violet-500",
+  purple: "border-l-purple-500",
+  fuchsia: "border-l-fuchsia-500",
+  pink: "border-l-pink-500",
+  rose: "border-l-rose-500",
+  black: "border-l-black-500",
+  gray: "border-l-gray-500",
 };
 
 export const nodeColors: { [char: string]: string } = {
-	prompts: "#4367BF",
-	llms: "#6344BE",
-	chains: "#FE7500",
-	agents: "#903BBE",
-	tools: "#FF3434",
-	memories: "#F5B85A",
-	advanced: "#000000",
-	chat: "#198BF6",
-	thought: "#272541",
-	embeddings: "#42BAA7",
-	documentloaders: "#7AAE42",
-	vectorstores: "#AA8742",
-	textsplitters: "#B47CB5",
-	toolkits: "#DB2C2C",
-	wrappers: "#E6277A",
-	utilities: "#31A3CC",
-	unknown: "#9CA3AF",
+  prompts: "#4367BF",
+  llms: "#6344BE",
+  chains: "#FE7500",
+  agents: "#903BBE",
+  tools: "#FF3434",
+  memories: "#F5B85A",
+  advanced: "#000000",
+  chat: "#198BF6",
+  thought: "#272541",
+  embeddings: "#42BAA7",
+  documentloaders: "#7AAE42",
+  vectorstores: "#AA8742",
+  textsplitters: "#B47CB5",
+  toolkits: "#DB2C2C",
+  wrappers: "#E6277A",
+  utilities: "#31A3CC",
+  unknown: "#9CA3AF",
 };
 
 export const nodeNames: { [char: string]: string } = {
-	prompts: "Prompts",
-	llms: "LLMs",
-	chains: "Chains",
-	agents: "Agents",
-	tools: "Tools",
-	memories: "Memories",
-	advanced: "Advanced",
-	chat: "Chat",
-	embeddings: "Embeddings",
-	documentloaders: "Loaders",
-	vectorstores: "Vector Stores",
-	toolkits: "Toolkits",
-	wrappers: "Wrappers",
-	textsplitters: "Text Splitters",
-	utilities: "Utilities",
-	unknown: "Unknown",
+  prompts: "Prompts",
+  llms: "LLMs",
+  chains: "Chains",
+  agents: "Agents",
+  tools: "Tools",
+  memories: "Memories",
+  advanced: "Advanced",
+  chat: "Chat",
+  embeddings: "Embeddings",
+  documentloaders: "Loaders",
+  vectorstores: "Vector Stores",
+  toolkits: "Toolkits",
+  wrappers: "Wrappers",
+  textsplitters: "Text Splitters",
+  utilities: "Utilities",
+  unknown: "Unknown",
 };
 
 export const nodeIcons: {
-	[char: string]: React.ForwardRefExoticComponent<
-		React.SVGProps<SVGSVGElement>
-	>;
+  [char: string]: React.ForwardRefExoticComponent<
+    React.SVGProps<SVGSVGElement>
+  >;
 } = {
-	agents: RocketLaunchIcon,
-	chains: LinkIcon,
-	memories: CpuChipIcon,
-	llms: LightBulbIcon,
-	prompts: CommandLineIcon,
-	tools: WrenchIcon,
-	advanced: ComputerDesktopIcon,
-	chat: Bars3CenterLeftIcon,
-	embeddings: FingerPrintIcon,
-	documentloaders: PaperClipIcon,
-	vectorstores: CircleStackIcon,
-	toolkits: WrenchScrewdriverIcon,
-	textsplitters: ScissorsIcon,
-	wrappers: GiftIcon,
-	utilities: Squares2X2Icon,
-	unknown: QuestionMarkCircleIcon,
+  agents: RocketLaunchIcon,
+  chains: LinkIcon,
+  memories: CpuChipIcon,
+  llms: LightBulbIcon,
+  prompts: CommandLineIcon,
+  tools: WrenchIcon,
+  advanced: ComputerDesktopIcon,
+  chat: Bars3CenterLeftIcon,
+  embeddings: FingerPrintIcon,
+  documentloaders: PaperClipIcon,
+  vectorstores: CircleStackIcon,
+  toolkits: WrenchScrewdriverIcon,
+  textsplitters: ScissorsIcon,
+  wrappers: GiftIcon,
+  utilities: Squares2X2Icon,
+  unknown: QuestionMarkCircleIcon,
 };
 
 export const bgColors = {
-	white: "bg-white",
-	red: "bg-red-100",
-	orange: "bg-orange-100",
-	amber: "bg-amber-100",
-	yellow: "bg-yellow-100",
-	lime: "bg-lime-100",
-	green: "bg-green-100",
-	emerald: "bg-emerald-100",
-	teal: "bg-teal-100",
-	cyan: "bg-cyan-100",
-	sky: "bg-sky-100",
-	blue: "bg-blue-100",
-	indigo: "bg-indigo-100",
-	violet: "bg-violet-100",
-	purple: "bg-purple-100",
-	fuchsia: "bg-fuchsia-100",
-	pink: "bg-pink-100",
-	rose: "bg-rose-100",
-	black: "bg-black-100",
-	gray: "bg-gray-100",
+  white: "bg-white",
+  red: "bg-red-100",
+  orange: "bg-orange-100",
+  amber: "bg-amber-100",
+  yellow: "bg-yellow-100",
+  lime: "bg-lime-100",
+  green: "bg-green-100",
+  emerald: "bg-emerald-100",
+  teal: "bg-teal-100",
+  cyan: "bg-cyan-100",
+  sky: "bg-sky-100",
+  blue: "bg-blue-100",
+  indigo: "bg-indigo-100",
+  violet: "bg-violet-100",
+  purple: "bg-purple-100",
+  fuchsia: "bg-fuchsia-100",
+  pink: "bg-pink-100",
+  rose: "bg-rose-100",
+  black: "bg-black-100",
+  gray: "bg-gray-100",
 };
 
 export const bgColorsHover = {
-	white: "hover:bg-white",
-	black: "hover:bg-black-50",
-	gray: "hover:bg-gray-50",
-	red: "hover:bg-red-50",
-	orange: "hover:bg-orange-50",
-	amber: "hover:bg-amber-50",
-	yellow: "hover:bg-yellow-50",
-	lime: "hover:bg-lime-50",
-	green: "hover:bg-green-50",
-	emerald: "hover:bg-emerald-50",
-	teal: "hover:bg-teal-50",
-	cyan: "hover:bg-cyan-50",
-	sky: "hover:bg-sky-50",
-	blue: "hover:bg-blue-50",
-	indigo: "hover:bg-indigo-50",
-	violet: "hover:bg-violet-50",
-	purple: "hover:bg-purple-50",
-	fuchsia: "hover:bg-fuchsia-50",
-	pink: "hover:bg-pink-50",
-	rose: "hover:bg-rose-50",
+  white: "hover:bg-white",
+  black: "hover:bg-black-50",
+  gray: "hover:bg-gray-50",
+  red: "hover:bg-red-50",
+  orange: "hover:bg-orange-50",
+  amber: "hover:bg-amber-50",
+  yellow: "hover:bg-yellow-50",
+  lime: "hover:bg-lime-50",
+  green: "hover:bg-green-50",
+  emerald: "hover:bg-emerald-50",
+  teal: "hover:bg-teal-50",
+  cyan: "hover:bg-cyan-50",
+  sky: "hover:bg-sky-50",
+  blue: "hover:bg-blue-50",
+  indigo: "hover:bg-indigo-50",
+  violet: "hover:bg-violet-50",
+  purple: "hover:bg-purple-50",
+  fuchsia: "hover:bg-fuchsia-50",
+  pink: "hover:bg-pink-50",
+  rose: "hover:bg-rose-50",
 };
 
 export const textColorsHex = {
-	red: "rgb(185 28 28)",
-	orange: "rgb(194 65 12)",
-	amber: "rgb(180 83 9)",
-	yellow: "rgb(161 98 7)",
-	lime: "rgb(77 124 15)",
-	green: "rgb(21 128 61)",
-	emerald: "rgb(4 120 87)",
-	teal: "rgb(15 118 110)",
-	cyan: "rgb(14 116 144)",
-	sky: "rgb(3 105 161)",
-	blue: "rgb(29 78 216)",
-	indigo: "rgb(67 56 202)",
-	violet: "rgb(109 40 217)",
-	purple: "rgb(126 34 206)",
-	fuchsia: "rgb(162 28 175)",
-	pink: "rgb(190 24 93)",
-	rose: "rgb(190 18 60)",
+  red: "rgb(185 28 28)",
+  orange: "rgb(194 65 12)",
+  amber: "rgb(180 83 9)",
+  yellow: "rgb(161 98 7)",
+  lime: "rgb(77 124 15)",
+  green: "rgb(21 128 61)",
+  emerald: "rgb(4 120 87)",
+  teal: "rgb(15 118 110)",
+  cyan: "rgb(14 116 144)",
+  sky: "rgb(3 105 161)",
+  blue: "rgb(29 78 216)",
+  indigo: "rgb(67 56 202)",
+  violet: "rgb(109 40 217)",
+  purple: "rgb(126 34 206)",
+  fuchsia: "rgb(162 28 175)",
+  pink: "rgb(190 24 93)",
+  rose: "rgb(190 18 60)",
 };
 
 export const bgColorsHex = {
-	red: "rgb(254 226 226)",
-	orange: "rgb(255 237 213)",
-	amber: "rgb(254 243 199)",
-	yellow: "rgb(254 249 195)",
-	lime: "rgb(236 252 203)",
-	green: "rgb(220 252 231)",
-	emerald: "rgb(209 250 229)",
-	teal: "rgb(204 251 241)",
-	cyan: "rgb(207 250 254)",
-	sky: "rgb(224 242 254)",
-	blue: "rgb(219 234 254)",
-	indigo: "rgb(224 231 255)",
-	violet: "rgb(237 233 254)",
-	purple: "rgb(243 232 255)",
-	fuchsia: "rgb(250 232 255)",
-	pink: "rgb(252 231 243)",
-	rose: "rgb(255 228 230)",
+  red: "rgb(254 226 226)",
+  orange: "rgb(255 237 213)",
+  amber: "rgb(254 243 199)",
+  yellow: "rgb(254 249 195)",
+  lime: "rgb(236 252 203)",
+  green: "rgb(220 252 231)",
+  emerald: "rgb(209 250 229)",
+  teal: "rgb(204 251 241)",
+  cyan: "rgb(207 250 254)",
+  sky: "rgb(224 242 254)",
+  blue: "rgb(219 234 254)",
+  indigo: "rgb(224 231 255)",
+  violet: "rgb(237 233 254)",
+  purple: "rgb(243 232 255)",
+  fuchsia: "rgb(250 232 255)",
+  pink: "rgb(252 231 243)",
+  rose: "rgb(255 228 230)",
 };
 
 export const taskTypeMap: { [key: string]: string } = {
-	MULTICLASS_CLASSIFICATION: "Multiclass Classification",
+  MULTICLASS_CLASSIFICATION: "Multiclass Classification",
 };
 
 const charWidths: { [char: string]: number } = {
-	" ": 0.2,
-	"!": 0.2,
-	'"': 0.3,
-	"#": 0.5,
-	$: 0.5,
-	"%": 0.5,
-	"&": 0.5,
-	"(": 0.2,
-	")": 0.2,
-	"*": 0.5,
-	"+": 0.5,
-	",": 0.2,
-	"-": 0.2,
-	".": 0.1,
-	"/": 0.5,
-	":": 0.2,
-	";": 0.2,
-	"<": 0.5,
-	"=": 0.5,
-	">": 0.5,
-	"?": 0.2,
-	"@": 0.5,
-	"[": 0.2,
-	"\\": 0.5,
-	"]": 0.2,
-	"^": 0.5,
-	_: 0.2,
-	"`": 0.5,
-	"{": 0.2,
-	"|": 0.2,
-	"}": 0.2,
-	"~": 0.5,
+  " ": 0.2,
+  "!": 0.2,
+  '"': 0.3,
+  "#": 0.5,
+  $: 0.5,
+  "%": 0.5,
+  "&": 0.5,
+  "(": 0.2,
+  ")": 0.2,
+  "*": 0.5,
+  "+": 0.5,
+  ",": 0.2,
+  "-": 0.2,
+  ".": 0.1,
+  "/": 0.5,
+  ":": 0.2,
+  ";": 0.2,
+  "<": 0.5,
+  "=": 0.5,
+  ">": 0.5,
+  "?": 0.2,
+  "@": 0.5,
+  "[": 0.2,
+  "\\": 0.5,
+  "]": 0.2,
+  "^": 0.5,
+  _: 0.2,
+  "`": 0.5,
+  "{": 0.2,
+  "|": 0.2,
+  "}": 0.2,
+  "~": 0.5,
 };
 
 for (let i = 65; i <= 90; i++) {
-	charWidths[String.fromCharCode(i)] = 0.6;
+  charWidths[String.fromCharCode(i)] = 0.6;
 }
 for (let i = 97; i <= 122; i++) {
-	charWidths[String.fromCharCode(i)] = 0.5;
+  charWidths[String.fromCharCode(i)] = 0.5;
 }
 
 export function measureTextWidth(text: string, fontSize: number) {
-	let wordWidth = 0;
-	for (let j = 0; j < text.length; j++) {
-		let char = text[j];
-		let charWidth = charWidths[char] || 0.5;
-		wordWidth += charWidth * fontSize;
-	}
-	return wordWidth;
+  let wordWidth = 0;
+  for (let j = 0; j < text.length; j++) {
+    let char = text[j];
+    let charWidth = charWidths[char] || 0.5;
+    wordWidth += charWidth * fontSize;
+  }
+  return wordWidth;
 }
 
 export function measureTextHeight(
-	text: string,
-	width: number,
-	fontSize: number
+  text: string,
+  width: number,
+  fontSize: number
 ) {
-	const charHeight = fontSize;
-	const lineHeight = charHeight * 1.5;
-	const words = text.split(" ");
-	let lineWidth = 0;
-	let totalHeight = 0;
-	for (let i = 0; i < words.length; i++) {
-		let word = words[i];
-		let wordWidth = measureTextWidth(word, fontSize);
-		if (lineWidth + wordWidth + charWidths[" "] * fontSize <= width) {
-			lineWidth += wordWidth + charWidths[" "] * fontSize;
-		} else {
-			totalHeight += lineHeight;
-			lineWidth = wordWidth;
-		}
-	}
-	totalHeight += lineHeight;
-	return totalHeight;
+  const charHeight = fontSize;
+  const lineHeight = charHeight * 1.5;
+  const words = text.split(" ");
+  let lineWidth = 0;
+  let totalHeight = 0;
+  for (let i = 0; i < words.length; i++) {
+    let word = words[i];
+    let wordWidth = measureTextWidth(word, fontSize);
+    if (lineWidth + wordWidth + charWidths[" "] * fontSize <= width) {
+      lineWidth += wordWidth + charWidths[" "] * fontSize;
+    } else {
+      totalHeight += lineHeight;
+      lineWidth = wordWidth;
+    }
+  }
+  totalHeight += lineHeight;
+  return totalHeight;
 }
 
 export function toCamelCase(str: string) {
-	return str
-		.split(" ")
-		.map((word, index) =>
-			index === 0
-				? word.toLowerCase()
-				: word[0].toUpperCase() + word.slice(1).toLowerCase()
-		)
-		.join("");
+  return str
+    .split(" ")
+    .map((word, index) =>
+      index === 0
+        ? word.toLowerCase()
+        : word[0].toUpperCase() + word.slice(1).toLowerCase()
+    )
+    .join("");
 }
 export function toFirstUpperCase(str: string) {
-	return str
-		.split(" ")
-		.map((word, index) => word[0].toUpperCase() + word.slice(1).toLowerCase())
-		.join("");
+  return str
+    .split(" ")
+    .map((word, index) => word[0].toUpperCase() + word.slice(1).toLowerCase())
+    .join("");
 }
 
 export function snakeToSpaces(str: string) {
-	let result = str
-		.split("_")
-		.join(" ");
+  let result = str.split("_").join(" ");
 
-	return result
+  return result;
 }
 
 export function toNormalCase(str: string) {
-	let result = str
-		.split("_")
-		.map((word, index) => {
-			if (index === 0) {
-				return word[0].toUpperCase() + word.slice(1).toLowerCase();
-			}
-			return word.toLowerCase();
-		})
-		.join(" ");
+  let result = str
+    .split("_")
+    .map((word, index) => {
+      if (index === 0) {
+        return word[0].toUpperCase() + word.slice(1).toLowerCase();
+      }
+      return word.toLowerCase();
+    })
+    .join(" ");
 
-	return result
-		.split("-")
-		.map((word, index) => {
-			if (index === 0) {
-				return word[0].toUpperCase() + word.slice(1).toLowerCase();
-			}
-			return word.toLowerCase();
-		})
-		.join(" ");
+  return result
+    .split("-")
+    .map((word, index) => {
+      if (index === 0) {
+        return word[0].toUpperCase() + word.slice(1).toLowerCase();
+      }
+      return word.toLowerCase();
+    })
+    .join(" ");
 }
 
 export function normalCaseToSnakeCase(str: string) {
-	return str
-		.split(" ")
-		.map((word, index) => {
-			if (index === 0) {
-				return word[0].toUpperCase() + word.slice(1).toLowerCase();
-			}
-			return word.toLowerCase();
-		})
-		.join("_");
+  return str
+    .split(" ")
+    .map((word, index) => {
+      if (index === 0) {
+        return word[0].toUpperCase() + word.slice(1).toLowerCase();
+      }
+      return word.toLowerCase();
+    })
+    .join("_");
 }
 
 export function roundNumber(x: number, decimals: number) {
-	return Math.round(x * Math.pow(10, decimals)) / Math.pow(10, decimals);
+  return Math.round(x * Math.pow(10, decimals)) / Math.pow(10, decimals);
 }
 
 export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
-	const sourceId = edge.source;
-	const targetId = edge.target;
-	const connectedNodes = nodes.filter(
-		(node) => node.id === targetId || node.id === sourceId
-	);
-	return connectedNodes;
+  const sourceId = edge.source;
+  const targetId = edge.target;
+  const connectedNodes = nodes.filter(
+    (node) => node.id === targetId || node.id === sourceId
+  );
+  return connectedNodes;
 }
 
 export function isValidConnection(
-	{ source, target, sourceHandle, targetHandle }: Connection,
-	reactFlowInstance: ReactFlowInstance
+  { source, target, sourceHandle, targetHandle }: Connection,
+  reactFlowInstance: ReactFlowInstance
 ) {
-	if (
-		sourceHandle.split("|")[0] === targetHandle.split("|")[0] ||
-		sourceHandle
-			.split("|")
-			.slice(2)
-			.some((t) => t === targetHandle.split("|")[0]) ||
-		targetHandle.split("|")[0] === "str"
-	) {
-		let targetNode = reactFlowInstance.getNode(target).data.node;
-		if (!targetNode) {
-			if (
-				!reactFlowInstance
-					.getEdges()
-					.find((e) => e.targetHandle === targetHandle)
-			) {
-				return true;
-			}
-		} else if (
-			(!targetNode.template[targetHandle.split("|")[1]].list &&
-				!reactFlowInstance
-					.getEdges()
-					.find((e) => e.targetHandle === targetHandle)) ||
-			targetNode.template[targetHandle.split("|")[1]].list
-		) {
-			return true;
-		}
-	}
-	return false;
+  if (
+    sourceHandle.split("|")[0] === targetHandle.split("|")[0] ||
+    sourceHandle
+      .split("|")
+      .slice(2)
+      .some((t) => t === targetHandle.split("|")[0]) ||
+    targetHandle.split("|")[0] === "str"
+  ) {
+    let targetNode = reactFlowInstance.getNode(target).data.node;
+    if (!targetNode) {
+      if (
+        !reactFlowInstance
+          .getEdges()
+          .find((e) => e.targetHandle === targetHandle)
+      ) {
+        return true;
+      }
+    } else if (
+      (!targetNode.template[targetHandle.split("|")[1]].list &&
+        !reactFlowInstance
+          .getEdges()
+          .find((e) => e.targetHandle === targetHandle)) ||
+      targetNode.template[targetHandle.split("|")[1]].list
+    ) {
+      return true;
+    }
+  }
+  return false;
 }
 
 export function removeApiKeys(flow: FlowType): FlowType {
-	let cleanFLow = _.cloneDeep(flow);
-	cleanFLow.data.nodes.forEach((node) => {
-		for (const key in node.data.node.template) {
-			if (key.includes("api")) {
-				node.data.node.template[key].value = "";
-			}
-		}
-	});
-	return cleanFLow;
+  let cleanFLow = _.cloneDeep(flow);
+  cleanFLow.data.nodes.forEach((node) => {
+    for (const key in node.data.node.template) {
+      if (key.includes("api")) {
+        node.data.node.template[key].value = "";
+      }
+    }
+  });
+  return cleanFLow;
 }
 
 export function updateObject<T extends Record<string, any>>(
-	reference: T,
-	objectToUpdate: T
+  reference: T,
+  objectToUpdate: T
 ): T {
-	let clonedObject = _.cloneDeep(objectToUpdate);
-	// Loop through each key in the object to update
-	for (const key in clonedObject) {
-		// If the key is not in the reference object, delete it
-		if (!(key in reference)) {
-			delete clonedObject[key];
-		}
-	}
-	// Loop through each key in the reference object
-	for (const key in reference) {
-		// If the key is not in the object to update, add it
-		if (!(key in clonedObject)) {
-			clonedObject[key] = reference[key];
-		}
-	}
-	return clonedObject;
+  let clonedObject = _.cloneDeep(objectToUpdate);
+  // Loop through each key in the object to update
+  for (const key in clonedObject) {
+    // If the key is not in the reference object, delete it
+    if (!(key in reference)) {
+      delete clonedObject[key];
+    }
+  }
+  // Loop through each key in the reference object
+  for (const key in reference) {
+    // If the key is not in the object to update, add it
+    if (!(key in clonedObject)) {
+      clonedObject[key] = reference[key];
+    }
+  }
+  return clonedObject;
 }
 
 export function debounce(func, wait) {
-	let timeout;
-	return function (...args) {
-		const context = this;
-		clearTimeout(timeout);
-		timeout = setTimeout(() => func.apply(context, args), wait);
-	};
+  let timeout;
+  return function (...args) {
+    const context = this;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(context, args), wait);
+  };
 }
 
 export function updateTemplate(
-	reference: APITemplateType,
-	objectToUpdate: APITemplateType
+  reference: APITemplateType,
+  objectToUpdate: APITemplateType
 ): APITemplateType {
-	let clonedObject: APITemplateType = _.cloneDeep(reference);
+  let clonedObject: APITemplateType = _.cloneDeep(reference);
 
-	// Loop through each key in the reference object
-	for (const key in clonedObject) {
-		// If the key is not in the object to update, add it
-		if (objectToUpdate[key] && objectToUpdate[key].value) {
-			clonedObject[key].value = objectToUpdate[key].value;
-		}
-	}
-	return clonedObject;
+  // Loop through each key in the reference object
+  for (const key in clonedObject) {
+    // If the key is not in the object to update, add it
+    if (objectToUpdate[key] && objectToUpdate[key].value) {
+      clonedObject[key].value = objectToUpdate[key].value;
+    }
+  }
+  return clonedObject;
 }
 
 interface languageMap {
-	[key: string]: string | undefined;
+  [key: string]: string | undefined;
 }
 
 export const programmingLanguages: languageMap = {
-	javascript: ".js",
-	python: ".py",
-	java: ".java",
-	c: ".c",
-	cpp: ".cpp",
-	"c++": ".cpp",
-	"c#": ".cs",
-	ruby: ".rb",
-	php: ".php",
-	swift: ".swift",
-	"objective-c": ".m",
-	kotlin: ".kt",
-	typescript: ".ts",
-	go: ".go",
-	perl: ".pl",
-	rust: ".rs",
-	scala: ".scala",
-	haskell: ".hs",
-	lua: ".lua",
-	shell: ".sh",
-	sql: ".sql",
-	html: ".html",
-	css: ".css",
-	// add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
+  javascript: ".js",
+  python: ".py",
+  java: ".java",
+  c: ".c",
+  cpp: ".cpp",
+  "c++": ".cpp",
+  "c#": ".cs",
+  ruby: ".rb",
+  php: ".php",
+  swift: ".swift",
+  "objective-c": ".m",
+  kotlin: ".kt",
+  typescript: ".ts",
+  go: ".go",
+  perl: ".pl",
+  rust: ".rs",
+  scala: ".scala",
+  haskell: ".hs",
+  lua: ".lua",
+  shell: ".sh",
+  sql: ".sql",
+  html: ".html",
+  css: ".css",
+  // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
 };

From 47f440066fb9234f77627a56e76cca1eb17431a7 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Sat, 27 May 2023 13:01:58 -0300
Subject: [PATCH 12/14] =?UTF-8?q?=F0=9F=94=A5=20chore(Makefile):=20remove?=
 =?UTF-8?q?=20pre-push=20hook=20installation=20The=20pre-push=20hook=20ins?=
 =?UTF-8?q?tallation=20command=20was=20removed=20from=20the=20Makefile.=20?=
 =?UTF-8?q?This=20was=20done=20to=20avoid=20conflicts=20with=20other=20hoo?=
 =?UTF-8?q?ks=20that=20may=20be=20installed=20in=20the=20future.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Makefile | 2 --
 1 file changed, 2 deletions(-)

diff --git a/Makefile b/Makefile
index 3143d7983..fcb592426 100644
--- a/Makefile
+++ b/Makefile
@@ -5,8 +5,6 @@ all: help
 init:
 	@echo 'Installing pre-commit hooks'
 	git config core.hooksPath .githooks
-	pre-commit install
-	pre-commit install --hook-type pre-push
 
 coverage:
 	poetry run pytest --cov \

From a7749323e4dd913b7187c694a1ca2a08dc65fab1 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Sat, 27 May 2023 13:03:25 -0300
Subject: [PATCH 13/14] =?UTF-8?q?=F0=9F=94=A7=20chore(frontend):=20add=20p?=
 =?UTF-8?q?rettier=20formatting=20script=20to=20package.json=20The=20`form?=
 =?UTF-8?q?at`=20script=20has=20been=20added=20to=20the=20`package.json`?=
 =?UTF-8?q?=20file=20in=20the=20`frontend`=20directory.=20This=20script=20?=
 =?UTF-8?q?uses=20`prettier`=20to=20format=20all=20files=20with=20the=20ex?=
 =?UTF-8?q?tensions=20`.js`,=20`.jsx`,=20`.ts`,=20`.tsx`,=20`.json`,=20and?=
 =?UTF-8?q?=20`.md`=20in=20the=20`src`=20directory.=20This=20ensures=20tha?=
 =?UTF-8?q?t=20the=20codebase=20is=20consistent=20and=20follows=20a=20stan?=
 =?UTF-8?q?dard=20formatting=20style.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/package-lock.json | 2 +-
 src/frontend/package.json      | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index b98a26b64..607f4946c 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -7370,4 +7370,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 6315deb05..20c62c11d 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -38,7 +38,8 @@
         "dev:docker": "vite --host 0.0.0.0",
         "start": "vite",
         "build": "vite build",
-        "serve": "vite preview"
+        "serve": "vite preview",
+        "format": "npx prettier --write \"src/**/*.{js,jsx,ts,tsx,json,md}\""
     },
     "eslintConfig": {
         "extends": [

From 9e6c4f8d579fa100a71298d801624158c5f2f063 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Sat, 27 May 2023 13:09:17 -0300
Subject: [PATCH 14/14] =?UTF-8?q?=F0=9F=94=A7=20chore(CONTRIBUTING.md):=20?=
 =?UTF-8?q?reorganize=20and=20clarify=20instructions=20for=20local=20devel?=
 =?UTF-8?q?opment=20The=20commit=20reorganizes=20the=20instructions=20for?=
 =?UTF-8?q?=20local=20development=20in=20CONTRIBUTING.md=20to=20make=20the?=
 =?UTF-8?q?m=20clearer=20and=20more=20concise.=20It=20also=20adds=20a=20se?=
 =?UTF-8?q?ction=20on=20setting=20up=20pre-commit=20hooks=20to=20ensure=20?=
 =?UTF-8?q?consistent=20code=20formatting.=20Additionally,=20it=20updates?=
 =?UTF-8?q?=20the=20instructions=20for=20running=20the=20backend=20and=20f?=
 =?UTF-8?q?rontend=20to=20use=20the=20`make`=20command=20for=20consistency?=
 =?UTF-8?q?=20and=20ease=20of=20use.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CONTRIBUTING.md | 47 +++++++++++++++++++++++++++++------------------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index f98336ba9..001417643 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -42,6 +42,35 @@ the system we use to tag our issues and pull requests.
 ### Local development
 You can develop LangFlow using docker compose, or locally.
 
+We provide a .vscode/launch.json file for debugging the backend in VSCode, which is a lot faster than using docker compose.
+
+Setting up hooks:
+```bash
+make init
+```
+
+This will install the pre-commit hooks, which will run `make format` on every commit.
+
+It is advised to run `make lint` before pushing to the repository.
+
+#### **Locally**
+Run locally by cloning the repository and installing the dependencies. We recommend using a virtual environment to isolate the dependencies from your system.
+
+Before you start, make sure you have the following installed:
+  - Poetry (>=1.4)
+  - Node.js
+
+For the backend, you will need to install the dependencies and start the development server.
+```bash
+make install_backend
+make backend
+```
+For the frontend, you will need to install the dependencies and start the development server.
+```bash
+make frontend
+```
+
+
 #### **Docker compose**
 This will run the backend and frontend in separate containers. The frontend will be available at `localhost:3000` and the backend at `localhost:7860`.
 ```bash
@@ -50,22 +79,4 @@ docker compose up --build
 make dev build=1
 ```
 
-#### **Locally**
-Run locally by cloning the repository and installing the dependencies. We recommend using a virtual environment to isolate the dependencies from your system.
-
-Before you start, make sure you have the following installed:
-  - Poetry
-  - Node.js
-
-For the backend, you will need to install the dependencies and start the development server.
-```bash
-poetry install
-make run_backend
-```
-For the frontend, you will need to install the dependencies and start the development server.
-```bash
-cd src/frontend
-npm install
-npm start
-```