From 9f2b6443cf97e3a3ddfab22477d3d7d1cc2f650f Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Sun, 2 Jul 2023 16:11:51 -0300
Subject: [PATCH 01/53] debugging improvements

---
 src/backend/langflow/database/base.py | 10 ++++++++++
 src/backend/langflow/lcserve.py       | 17 ++++-------------
 src/backend/langflow/main.py          |  2 +-
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/backend/langflow/database/base.py b/src/backend/langflow/database/base.py
index a0efcdd2a..37fe00255 100644
--- a/src/backend/langflow/database/base.py
+++ b/src/backend/langflow/database/base.py
@@ -6,6 +6,7 @@ if settings.database_url.startswith("sqlite"):
     connect_args = {"check_same_thread": False}
 else:
     connect_args = {}
+
 engine = create_engine(settings.database_url, connect_args=connect_args)
 
 
@@ -13,6 +14,15 @@ def create_db_and_tables():
     logger.debug("Creating database and tables")
     SQLModel.metadata.create_all(engine)
     logger.debug("Database and tables created")
+    # Now check if the table Flow exists, if not, something went wrong
+    # and we need to create the tables again.
+    from sqlalchemy import inspect
+
+    inspector = inspect(engine)
+    if "flow" not in inspector.get_table_names():
+        logger.error("Something went wrong creating the database and tables.")
+        logger.error("Please check your database settings.")
+        raise RuntimeError("Something went wrong creating the database and tables.")
 
 
 def get_session():
diff --git a/src/backend/langflow/lcserve.py b/src/backend/langflow/lcserve.py
index 9419fbe70..de1d2806d 100644
--- a/src/backend/langflow/lcserve.py
+++ b/src/backend/langflow/lcserve.py
@@ -1,16 +1,7 @@
 # This file is used by lc-serve to load the mounted app and serve it.
 
-from pathlib import Path
+from langflow.main import setup_app
+from langflow.utils.logger import configure
 
-from fastapi.staticfiles import StaticFiles
-
-from langflow.main import create_app
-
-app = create_app()
-path = Path(__file__).parent
-static_files_dir = path / "frontend"
-app.mount(
-    "/",
-    StaticFiles(directory=static_files_dir, html=True),
-    name="static",
-)
+configure(log_level="DEBUG")
+app = setup_app()
diff --git a/src/backend/langflow/main.py b/src/backend/langflow/main.py
index e937931d6..8831b8e0f 100644
--- a/src/backend/langflow/main.py
+++ b/src/backend/langflow/main.py
@@ -61,7 +61,7 @@ def setup_static_files(app: FastAPI, static_files_dir: Path):
 
 # app = create_app()
 # setup_static_files(app, static_files_dir)
-def setup_app(static_files_dir: Optional[Path]) -> FastAPI:
+def setup_app(static_files_dir: Optional[Path] = None) -> FastAPI:
     """Setup the FastAPI app."""
     # get the directory of the current file
     if not static_files_dir:

From 35e0ea9d8029398a8da897267bf3ba07d1f7fc34 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Sun, 2 Jul 2023 16:20:17 -0300
Subject: [PATCH 02/53] =?UTF-8?q?=F0=9F=94=A7=20chore(settings.py):=20upda?=
 =?UTF-8?q?te=20environment=20variable=20prefix=20from=20"LANGFLOW=5F"=20t?=
 =?UTF-8?q?o=20"langflow=5F"=20for=20consistency=20The=20environment=20var?=
 =?UTF-8?q?iable=20prefix=20used=20in=20the=20settings.py=20file=20has=20b?=
 =?UTF-8?q?een=20updated=20from=20"LANGFLOW=5F"=20to=20"langflow=5F"=20to?=
 =?UTF-8?q?=20maintain=20consistency=20with=20the=20naming=20conventions?=
 =?UTF-8?q?=20used=20in=20the=20project.=20This=20change=20ensures=20that?=
 =?UTF-8?q?=20all=20environment=20variables=20related=20to=20the=20Langflo?=
 =?UTF-8?q?w=20backend=20have=20a=20consistent=20prefix.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/settings.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/backend/langflow/settings.py b/src/backend/langflow/settings.py
index b2571780e..a149dae82 100644
--- a/src/backend/langflow/settings.py
+++ b/src/backend/langflow/settings.py
@@ -29,8 +29,8 @@ class Settings(BaseSettings):
     def set_database_url(cls, values):
         if "database_url" not in values:
             logger.debug("No database_url provided, trying DATABASE_URL env variable")
-            if database_url := os.getenv("DATABASE_URL"):
-                values["database_url"] = database_url
+            if langflow_database_url := os.getenv("langflow_database_url"):
+                values["database_url"] = langflow_database_url
             else:
                 logger.debug("No DATABASE_URL env variable, using sqlite database")
                 values["database_url"] = "sqlite:///./langflow.db"
@@ -39,7 +39,7 @@ class Settings(BaseSettings):
     class Config:
         validate_assignment = True
         extra = "ignore"
-        env_prefix = "LANGFLOW_"
+        env_prefix = "langflow_"
 
     @root_validator(allow_reuse=True)
     def validate_lists(cls, values):

From c1175e4961de0f7f67c022eee5878f913a639d4e Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 3 Jul 2023 08:46:01 -0300
Subject: [PATCH 03/53] =?UTF-8?q?=F0=9F=94=A7=20chore(base.py):=20remove?=
 =?UTF-8?q?=20unnecessary=20debug=20log=20and=20add=20success=20log=20for?=
 =?UTF-8?q?=20database=20and=20tables=20creation=20The=20debug=20log=20sta?=
 =?UTF-8?q?tement=20"Database=20and=20tables=20created"=20has=20been=20rem?=
 =?UTF-8?q?oved=20as=20it=20is=20unnecessary.=20Instead,=20a=20success=20l?=
 =?UTF-8?q?og=20statement=20"Database=20and=20tables=20created=20successfu?=
 =?UTF-8?q?lly"=20has=20been=20added=20to=20indicate=20that=20the=20databa?=
 =?UTF-8?q?se=20and=20tables=20were=20created=20without=20any=20errors.=20?=
 =?UTF-8?q?This=20improves=20the=20clarity=20of=20the=20log=20messages=20a?=
 =?UTF-8?q?nd=20provides=20better=20feedback=20during=20the=20database=20s?=
 =?UTF-8?q?etup=20process.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/database/base.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/backend/langflow/database/base.py b/src/backend/langflow/database/base.py
index 37fe00255..add28192a 100644
--- a/src/backend/langflow/database/base.py
+++ b/src/backend/langflow/database/base.py
@@ -13,7 +13,6 @@ engine = create_engine(settings.database_url, connect_args=connect_args)
 def create_db_and_tables():
     logger.debug("Creating database and tables")
     SQLModel.metadata.create_all(engine)
-    logger.debug("Database and tables created")
     # Now check if the table Flow exists, if not, something went wrong
     # and we need to create the tables again.
     from sqlalchemy import inspect
@@ -23,6 +22,8 @@ def create_db_and_tables():
         logger.error("Something went wrong creating the database and tables.")
         logger.error("Please check your database settings.")
         raise RuntimeError("Something went wrong creating the database and tables.")
+    else:
+        logger.debug("Database and tables created successfully")
 
 
 def get_session():

From 1d22e8c97a97b18a98f2d36ef4507dea74dfba4b Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 3 Jul 2023 09:12:59 -0300
Subject: [PATCH 04/53] =?UTF-8?q?=F0=9F=94=A7=20chore(chat.py):=20add=20mi?=
 =?UTF-8?q?ssing=20build=20step=20for=20root=20node=20in=20graph=20?=
 =?UTF-8?q?=F0=9F=93=9D=20docs(chat.py):=20explain=20the=20need=20for=20bu?=
 =?UTF-8?q?ilding=20the=20root=20node=20before=20the=20rest=20of=20the=20g?=
 =?UTF-8?q?raph=20The=20root=20node=20in=20the=20graph=20was=20not=20being?=
 =?UTF-8?q?=20built=20before=20the=20rest=20of=20the=20graph,=20which=20ca?=
 =?UTF-8?q?used=20issues=20when=20certain=20nodes=20required=20parameters?=
 =?UTF-8?q?=20that=20were=20not=20connected=20to=20them.=20By=20adding=20t?=
 =?UTF-8?q?he=20missing=20build=20step=20for=20the=20root=20node,=20we=20e?=
 =?UTF-8?q?nsure=20that=20all=20necessary=20connections=20and=20parameters?=
 =?UTF-8?q?=20are=20properly=20set=20up=20before=20building=20the=20rest?=
 =?UTF-8?q?=20of=20the=20graph.=20This=20improves=20the=20overall=20functi?=
 =?UTF-8?q?onality=20and=20reliability=20of=20the=20chat=20module.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/api/v1/chat.py | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/backend/langflow/api/v1/chat.py b/src/backend/langflow/api/v1/chat.py
index bf1b52058..e47c31694 100644
--- a/src/backend/langflow/api/v1/chat.py
+++ b/src/backend/langflow/api/v1/chat.py
@@ -113,6 +113,14 @@ async def stream_build(flow_id: str):
 
             number_of_nodes = len(graph.nodes)
             flow_data_store[flow_id]["status"] = BuildStatus.IN_PROGRESS
+            # To deal with the ZeroShotAgent case
+            # we need to build the root node first
+            # and then the rest of the graph
+            # This is a big problem because certain nodes require
+            # params that are not connected to it.
+            # We should consider connecting the tools to the ZeroShotPrompt
+            graph.build()
+
             for i, vertex in enumerate(graph.generator_build(), 1):
                 try:
                     log_dict = {

From 7d7db02fb660dbb22844ffedaceca833e7c4ec95 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 3 Jul 2023 09:17:01 -0300
Subject: [PATCH 05/53] =?UTF-8?q?=F0=9F=94=96=20chore(pyproject.toml):=20u?=
 =?UTF-8?q?pdate=20package=20version=20to=200.2.11=20=E2=AC=86=EF=B8=8F=20?=
 =?UTF-8?q?chore(pyproject.toml):=20update=20fastapi=20dependency=20to=20v?=
 =?UTF-8?q?ersion=200.99.0=20The=20package=20version=20has=20been=20update?=
 =?UTF-8?q?d=20from=200.2.10=20to=200.2.11.=20This=20change=20reflects=20t?=
 =?UTF-8?q?he=20new=20version=20of=20the=20package.=20Additionally,=20the?=
 =?UTF-8?q?=20fastapi=20dependency=20has=20been=20updated=20from=20version?=
 =?UTF-8?q?=200.98.0=20to=200.99.0=20to=20ensure=20compatibility=20with=20?=
 =?UTF-8?q?the=20latest=20version=20of=20fastapi.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 poetry.lock    | 21 +++++++++++----------
 pyproject.toml |  4 ++--
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/poetry.lock b/poetry.lock
index 0760411e8..7c08dfd02 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -1294,14 +1294,14 @@ files = [
 
 [[package]]
 name = "exceptiongroup"
-version = "1.1.1"
+version = "1.1.2"
 description = "Backport of PEP 654 (exception groups)"
 category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "exceptiongroup-1.1.1-py3-none-any.whl", hash = "sha256:232c37c63e4f682982c8b6459f33a8981039e5fb8756b2074364e5055c498c9e"},
-    {file = "exceptiongroup-1.1.1.tar.gz", hash = "sha256:d484c3090ba2889ae2928419117447a14daf3c1231d5e30d0aae34f354f01785"},
+    {file = "exceptiongroup-1.1.2-py3-none-any.whl", hash = "sha256:e346e69d186172ca7cf029c8c1d16235aa0e04035e5750b4b95039e65204328f"},
+    {file = "exceptiongroup-1.1.2.tar.gz", hash = "sha256:12c3e887d6485d16943a309616de20ae5582633e0a2eda17f4e10fd61c1e8af5"},
 ]
 
 [package.extras]
@@ -1374,19 +1374,20 @@ importlib-resources = {version = ">=5.0", markers = "python_version < \"3.10\""}
 
 [[package]]
 name = "fastapi"
-version = "0.98.0"
+version = "0.99.1"
 description = "FastAPI framework, high performance, easy to learn, fast to code, ready for production"
 category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "fastapi-0.98.0-py3-none-any.whl", hash = "sha256:f4165fb1fe3610c52cb1b8282c1480de9c34bc270f56a965aa93a884c350d605"},
-    {file = "fastapi-0.98.0.tar.gz", hash = "sha256:0d3c18886f652038262b5898fec6b09f4ca92ee23e9d9b1d1d24e429f84bf27b"},
+    {file = "fastapi-0.99.1-py3-none-any.whl", hash = "sha256:976df7bab51ac7beda9f68c4513b8c4490b5c1135c72aafd0a5ee4023ec5282e"},
+    {file = "fastapi-0.99.1.tar.gz", hash = "sha256:ac78f717cd80d657bd183f94d33b9bda84aa376a46a9dab513586b8eef1dc6fc"},
 ]
 
 [package.dependencies]
 pydantic = ">=1.7.4,<1.8 || >1.8,<1.8.1 || >1.8.1,<2.0.0"
 starlette = ">=0.27.0,<0.28.0"
+typing-extensions = ">=4.5.0"
 
 [package.extras]
 all = ["email-validator (>=1.1.1)", "httpx (>=0.23.0)", "itsdangerous (>=1.1.0)", "jinja2 (>=2.11.2)", "orjson (>=3.2.1)", "python-multipart (>=0.0.5)", "pyyaml (>=5.3.1)", "ujson (>=4.0.1,!=4.0.2,!=4.1.0,!=4.2.0,!=4.3.0,!=5.0.0,!=5.1.0)", "uvicorn[standard] (>=0.12.0)"]
@@ -5218,14 +5219,14 @@ diagrams = ["jinja2", "railroad-diagrams"]
 
 [[package]]
 name = "pypdf"
-version = "3.11.1"
+version = "3.12.0"
 description = "A pure-python PDF library capable of splitting, merging, cropping, and transforming PDF files"
 category = "main"
 optional = false
 python-versions = ">=3.6"
 files = [
-    {file = "pypdf-3.11.1-py3-none-any.whl", hash = "sha256:2afc8914355a784fb184f60ae82fe10f9b992aa0733b705f0746966e470f98bd"},
-    {file = "pypdf-3.11.1.tar.gz", hash = "sha256:198c4d0231525d0b730cbbd11a5fc7d9a2e410dfc8ae2928c8de000b7ef149c5"},
+    {file = "pypdf-3.12.0-py3-none-any.whl", hash = "sha256:826ad4681660394d7a5742fe8380168cf13058e27b826b7f5b798e994cb77b38"},
+    {file = "pypdf-3.12.0.tar.gz", hash = "sha256:cebac920db0698369f49c389018858a5436862bf3c45b64b10c55c008878db95"},
 ]
 
 [package.dependencies]
@@ -7830,4 +7831,4 @@ deploy = ["langchain-serve"]
 [metadata]
 lock-version = "2.0"
 python-versions = ">=3.9,<3.11"
-content-hash = "3b615d7e85c445b293174b2cb1d395e375edce224c0da51e03c3767c4892e662"
+content-hash = "814dc6b89b345e3ea08c7b7dc1fb29e3f8484070e3ad67030eb67566b33f12b0"
diff --git a/pyproject.toml b/pyproject.toml
index a9df0a27a..d02b284cd 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langflow"
-version = "0.2.10"
+version = "0.2.11"
 description = "A Python package with a built-in web application"
 authors = ["Logspace <contact@logspace.ai>"]
 maintainers = [
@@ -23,7 +23,7 @@ langflow = "langflow.__main__:main"
 
 [tool.poetry.dependencies]
 python = ">=3.9,<3.11"
-fastapi = "^0.98.0"
+fastapi = "^0.99.0"
 uvicorn = "^0.22.0"
 beautifulsoup4 = "^4.12.2"
 google-search-results = "^2.4.1"

From 608145af9ebd16789cd826a77cc1d02b84beb8e0 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 4 Jul 2023 09:51:48 -0300
Subject: [PATCH 06/53] =?UTF-8?q?=F0=9F=94=A7=20chore(documentloaders.py):?=
 =?UTF-8?q?=20moved=20GutenbergLoader=20to=20be=20used=20with=20web=5Fpath?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/template/frontend_node/documentloaders.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/backend/langflow/template/frontend_node/documentloaders.py b/src/backend/langflow/template/frontend_node/documentloaders.py
index 5a43634a2..541f4a71e 100644
--- a/src/backend/langflow/template/frontend_node/documentloaders.py
+++ b/src/backend/langflow/template/frontend_node/documentloaders.py
@@ -29,7 +29,6 @@ class DocumentLoaderFrontNode(FrontendNode):
         "SlackDirectoryLoader": build_file_field(suffixes=[".zip"], fileTypes=["zip"]),
         "EverNoteLoader": build_file_field(suffixes=[".xml"], fileTypes=["xml"]),
         "FacebookChatLoader": build_file_field(suffixes=[".json"], fileTypes=["json"]),
-        "GutenbergLoader": build_file_field(suffixes=[".txt"], fileTypes=["txt"]),
         "BSHTMLLoader": build_file_field(suffixes=[".html"], fileTypes=["html"]),
         "UnstructuredHTMLLoader": build_file_field(
             suffixes=[".html"], fileTypes=["html"]
@@ -112,6 +111,7 @@ class DocumentLoaderFrontNode(FrontendNode):
             "HNLoader",
             "IFixitLoader",
             "IMSDbLoader",
+            "GutenbergLoader",
         }:
             name = "web_path"
         elif self.template.type_name in {"GitbookLoader"}:

From 7d098ab927050175a13b38a3261cda1f7bcfe3d7 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 4 Jul 2023 09:56:52 -0300
Subject: [PATCH 07/53] =?UTF-8?q?=F0=9F=94=92=20chore(vectorstores.py):=20?=
 =?UTF-8?q?add=20password=20field=20to=20extra=5Ffield2=20in=20VectorStore?=
 =?UTF-8?q?FrontendNode=20class=20The=20password=20field=20is=20added=20to?=
 =?UTF-8?q?=20the=20extra=5Ffield2=20in=20the=20VectorStoreFrontendNode=20?=
 =?UTF-8?q?class.=20This=20allows=20the=20field=20to=20be=20displayed=20as?=
 =?UTF-8?q?=20a=20password=20input=20in=20the=20frontend,=20enhancing=20se?=
 =?UTF-8?q?curity=20by=20hiding=20the=20input=20characters.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/template/frontend_node/vectorstores.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/backend/langflow/template/frontend_node/vectorstores.py b/src/backend/langflow/template/frontend_node/vectorstores.py
index 13c955f7a..09ec49fb4 100644
--- a/src/backend/langflow/template/frontend_node/vectorstores.py
+++ b/src/backend/langflow/template/frontend_node/vectorstores.py
@@ -65,6 +65,7 @@ class VectorStoreFrontendNode(FrontendNode):
                 show=True,
                 advanced=True,
                 multiline=False,
+                password=True,
                 value="",
             )
             extra_field2 = TemplateField(

From 0cf94f37f632acfdb5bcd73ad1fd57c735fefd37 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 4 Jul 2023 09:58:11 -0300
Subject: [PATCH 08/53] =?UTF-8?q?=F0=9F=94=92=20chore(vectorstores.py):=20?=
 =?UTF-8?q?add=20password=20field=20to=20extra=5Ffields=20in=20VectorStore?=
 =?UTF-8?q?FrontendNode=20class=20The=20password=20field=20is=20added=20to?=
 =?UTF-8?q?=20the=20extra=5Ffields=20list=20in=20the=20VectorStoreFrontend?=
 =?UTF-8?q?Node=20class.=20This=20allows=20for=20the=20creation=20of=20a?=
 =?UTF-8?q?=20password=20input=20field=20in=20the=20frontend=20UI=20for=20?=
 =?UTF-8?q?this=20specific=20class.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/template/frontend_node/vectorstores.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/backend/langflow/template/frontend_node/vectorstores.py b/src/backend/langflow/template/frontend_node/vectorstores.py
index 09ec49fb4..89eedc596 100644
--- a/src/backend/langflow/template/frontend_node/vectorstores.py
+++ b/src/backend/langflow/template/frontend_node/vectorstores.py
@@ -143,6 +143,7 @@ class VectorStoreFrontendNode(FrontendNode):
                 show=True,
                 advanced=True,
                 multiline=False,
+                password=True,
                 value="",
             )
             extra_fields.extend((extra_field, extra_field2, extra_field3, extra_field4))

From a3792577a8afa6bd013948847f791b0631697953 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 4 Jul 2023 10:08:41 -0300
Subject: [PATCH 09/53] =?UTF-8?q?=F0=9F=94=84=20refactor(vertex/base.py):?=
 =?UTF-8?q?=20rename=20Node=20class=20to=20Vertex=20class=20for=20better?=
 =?UTF-8?q?=20clarity=20and=20consistency=20=F0=9F=94=84=20refactor(templa?=
 =?UTF-8?q?te/frontend=5Fnode/documentloaders.py):=20rename=20web=5Fpath?=
 =?UTF-8?q?=20variable=20to=20file=5Fpath=20for=20better=20clarity=20and?=
 =?UTF-8?q?=20consistency=20in=20the=20GutenbergLoader=20class=20The=20Nod?=
 =?UTF-8?q?e=20class=20in=20the=20vertex/base.py=20file=20has=20been=20ren?=
 =?UTF-8?q?amed=20to=20Vertex=20class=20to=20improve=20clarity=20and=20con?=
 =?UTF-8?q?sistency=20in=20the=20naming=20conventions=20used=20throughout?=
 =?UTF-8?q?=20the=20codebase.=20In=20the=20template/frontend=5Fnode/docume?=
 =?UTF-8?q?ntloaders.py=20file,=20the=20web=5Fpath=20variable=20has=20been?=
 =?UTF-8?q?=20renamed=20to=20file=5Fpath=20in=20the=20GutenbergLoader=20cl?=
 =?UTF-8?q?ass=20to=20provide=20better=20clarity=20and=20consistency=20in?=
 =?UTF-8?q?=20the=20naming=20conventions=20used=20within=20the=20class.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/graph/vertex/base.py                      | 2 +-
 src/backend/langflow/template/frontend_node/documentloaders.py | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/backend/langflow/graph/vertex/base.py b/src/backend/langflow/graph/vertex/base.py
index 61c50eda5..275a9e080 100644
--- a/src/backend/langflow/graph/vertex/base.py
+++ b/src/backend/langflow/graph/vertex/base.py
@@ -220,7 +220,7 @@ class Vertex:
         self.edges.append(edge)
 
     def __repr__(self) -> str:
-        return f"Node(id={self.id}, data={self.data})"
+        return f"Vertex(id={self.id}, data={self.data})"
 
     def __eq__(self, __o: object) -> bool:
         return self.id == __o.id if isinstance(__o, Vertex) else False
diff --git a/src/backend/langflow/template/frontend_node/documentloaders.py b/src/backend/langflow/template/frontend_node/documentloaders.py
index 541f4a71e..35a727870 100644
--- a/src/backend/langflow/template/frontend_node/documentloaders.py
+++ b/src/backend/langflow/template/frontend_node/documentloaders.py
@@ -114,6 +114,8 @@ class DocumentLoaderFrontNode(FrontendNode):
             "GutenbergLoader",
         }:
             name = "web_path"
+        elif self.template.type_name in {"GutenbergLoader"}:
+            name = "file_path"
         elif self.template.type_name in {"GitbookLoader"}:
             name = "web_page"
         elif self.template.type_name in {

From 9b185fada5349b3960e64681041846fc117b7a2a Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 4 Jul 2023 10:41:14 -0300
Subject: [PATCH 10/53] =?UTF-8?q?=F0=9F=90=9B=20fix(GenericNode/index.tsx)?=
 =?UTF-8?q?:=20fix=20incorrect=20class=20names=20for=20validation=20status?=
 =?UTF-8?q?=20indicators=20The=20class=20names=20for=20the=20validation=20?=
 =?UTF-8?q?status=20indicators=20were=20incorrect,=20causing=20the=20wrong?=
 =?UTF-8?q?=20styles=20to=20be=20applied.=20The=20class=20names=20have=20b?=
 =?UTF-8?q?een=20fixed=20to=20correctly=20display=20the=20validation=20sta?=
 =?UTF-8?q?tus=20indicators=20based=20on=20the=20validation=20status=20and?=
 =?UTF-8?q?=20whether=20the=20node=20is=20building.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/CustomNodes/GenericNode/index.tsx      | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index e9caf7cc1..32cee565d 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -134,25 +134,25 @@ export default function GenericNode({
                   <div
                     className={classNames(
                       validationStatus && validationStatus.valid
-                        ? "w-4 h-4 rounded-full bg-status-red opacity-100"
-                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
+                        ? "h-4 w-4 rounded-full bg-status-green opacity-100"
+                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
+                      "absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       validationStatus && !validationStatus.valid
-                        ? "w-4 h-4 rounded-full  bg-status-red opacity-100"
-                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
+                        ? "h-4 w-4 rounded-full  bg-status-red opacity-100"
+                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
+                      "absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       !validationStatus || isBuilding
-                        ? "w-4 h-4 rounded-full  bg-status-yellow opacity-100"
-                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
+                        ? "h-4 w-4 rounded-full  bg-status-yellow opacity-100"
+                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
+                      "absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
                     )}
                   ></div>
                 </div>

From a35529d59f3c1a1342a37ad22f9246fef0bd84ae Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Tue, 4 Jul 2023 17:08:13 -0300
Subject: [PATCH 11/53] feat: remove class button-div-style from constants.tsx
 file

---
 .../src/CustomNodes/GenericNode/index.tsx      | 18 +++++++++---------
 src/frontend/src/constants.tsx                 |  8 --------
 src/frontend/src/index.css                     |  3 +++
 src/frontend/src/pages/MainPage/index.tsx      |  3 +--
 4 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index e9caf7cc1..32cee565d 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -134,25 +134,25 @@ export default function GenericNode({
                   <div
                     className={classNames(
                       validationStatus && validationStatus.valid
-                        ? "w-4 h-4 rounded-full bg-status-red opacity-100"
-                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
+                        ? "h-4 w-4 rounded-full bg-status-green opacity-100"
+                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
+                      "absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       validationStatus && !validationStatus.valid
-                        ? "w-4 h-4 rounded-full  bg-status-red opacity-100"
-                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
+                        ? "h-4 w-4 rounded-full  bg-status-red opacity-100"
+                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
+                      "absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       !validationStatus || isBuilding
-                        ? "w-4 h-4 rounded-full  bg-status-yellow opacity-100"
-                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
+                        ? "h-4 w-4 rounded-full  bg-status-yellow opacity-100"
+                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
+                      "absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
                     )}
                   ></div>
                 </div>
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index 99a1beb7f..4dfcbc898 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -179,14 +179,6 @@ export const COLUMN_DIV_STYLE =
  */
 export const NAV_DISPLAY_STYLE =
   " w-full flex justify-between py-12 pb-2 px-6 ";
-
-/**
- * The base text for subtitle of code dialog
- * @constant
- */
-export const BUTTON_DIV_STYLE = " flex gap-2 ";
-(" focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ");
-
 /**
  * Header text for user projects
  * @constant
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 15a0b4b2e..077297311 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -143,6 +143,9 @@ The cursor: default; property value restores the browser's default cursor style
 
 
 @layer components {
+  .button-div-style {
+    @apply gap-2 flex
+  }
   .input-primary:focus{
     @apply focus:placeholder-transparent focus:ring-ring focus:border-ring
   }
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index 657ae8bd8..0b45a94ae 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -5,7 +5,6 @@ import { Button } from "../../components/ui/button";
 import { Link, useNavigate } from "react-router-dom";
 import { CardComponent } from "../../components/cardComponent";
 import { USER_PROJECTS_HEADER } from "../../constants";
-import { BUTTON_DIV_STYLE } from "../../constants";
 export default function HomePage() {
   const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
     useContext(TabsContext);
@@ -20,7 +19,7 @@ export default function HomePage() {
           <Home className="w-6" />
           {USER_PROJECTS_HEADER}
         </span>
-        <div className={`${BUTTON_DIV_STYLE}`}>
+        <div className="button-div-style">
           <Button
             variant="primary"
             onClick={() => {

From bfd830f1e41d4cad6b5ba194781d9b55144ca764 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Tue, 4 Jul 2023 17:45:47 -0300
Subject: [PATCH 12/53] feat: Change extra side bar buttons classes to tailwind
 constants

---
 src/frontend/src/index.css                             | 10 ++++++++++
 .../components/extraSidebarComponent/index.tsx         | 10 +++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 077297311..09d19db88 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -143,6 +143,15 @@ The cursor: default; property value restores the browser's default cursor style
 
 
 @layer components {
+  .extra-side-bar-save-disable {
+    @apply text-muted-foreground
+  }
+  .extra-side-bar-buttons {
+    @apply relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out
+  }
+  .extra-side-bar-buttons:hover {
+    @apply hover:bg-muted
+  }
   .button-div-style {
     @apply gap-2 flex
   }
@@ -164,4 +173,5 @@ The cursor: default; property value restores the browser's default cursor style
   .input-dialog{
     @apply text-ring cursor-pointer bg-transparent
   }
+
 }
\ No newline at end of file
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index e03cb521b..a3f7da7bc 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -63,7 +63,7 @@ export default function ExtraSidebar() {
       <div className="mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2">
         <ShadTooltip content="Import" side="top">
           <button
-            className="relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out hover:bg-muted"
+            className="extra-side-bar-buttons"
             onClick={() => {
               // openPopUp(<ImportModal />);
               uploadFlow();
@@ -76,7 +76,7 @@ export default function ExtraSidebar() {
         <ShadTooltip content="Export" side="top">
           <button
             className={classNames(
-              "relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset  ring-input transition-all duration-500 ease-in-out hover:bg-muted"
+              "extra-side-bar-buttons"
             )}
             onClick={(event) => {
               openPopUp(<ExportModal />);
@@ -88,7 +88,7 @@ export default function ExtraSidebar() {
         <ShadTooltip content="Code" side="top">
           <button
             className={classNames(
-              "relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset  ring-input transition-all duration-500 ease-in-out hover:bg-muted"
+              "extra-side-bar-buttons"
             )}
             onClick={(event) => {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
@@ -100,7 +100,7 @@ export default function ExtraSidebar() {
 
         <ShadTooltip content="Save" side="top">
           <button
-            className="relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset  ring-input transition-all duration-500 ease-in-out hover:bg-muted"
+            className="extra-side-bar-buttons"
             onClick={(event) => {
               saveFlow(flows.find((f) => f.id === tabId));
               setSuccessData({ title: "Changes saved successfully" });
@@ -110,7 +110,7 @@ export default function ExtraSidebar() {
             <Save
               strokeWidth={1.5}
               className={
-                "h-5 w-5" + (isPending ? " " : " text-muted-foreground")
+                "h-5 w-5" + (isPending ? " " : " extra-side-bar-save-disable")
               }
             ></Save>
           </button>

From 215e04078bb5251b0edf05a0cbfe52e1328f943e Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Tue, 4 Jul 2023 18:24:55 -0300
Subject: [PATCH 13/53] feat: add extra side bar constants classes

---
 src/frontend/src/index.css                    | 33 +++++++++++++++++++
 .../extraSidebarComponent/index.tsx           | 28 ++++++++--------
 2 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 09d19db88..dec62c95b 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -143,9 +143,42 @@ The cursor: default; property value restores the browser's default cursor style
 
 
 @layer components {
+  .side-bar-arrangement {
+    @apply flex h-full w-52 flex-col overflow-hidden border-r scrollbar-hide
+  }
+  .side-bar-search-div-placement {
+    @apply relative mx-auto mb-2 mt-2 flex items-center
+  }
+  .side-bar-components-icon {
+    @apply h-6 w-4 text-ring
+  }
+  .side-bar-components-text {
+    @apply w-full truncate pr-1 text-xs text-foreground
+  }
+  .side-bar-components-div-form {
+    @apply flex w-full items-center justify-between rounded-md rounded-l-none border border-l-0 border-dashed border-ring  bg-white px-3 py-1 text-sm
+  }
+  .side-bar-components-border {
+    @apply cursor-grab rounded-l-md border-l-8
+  }
+  .side-bar-components-gap {
+    @apply flex flex-col gap-2 p-2
+  }
+  .side-bar-components-div-arrangement {
+    @apply w-full overflow-auto scrollbar-hide
+  }
+  .search-icon {
+    @apply absolute inset-y-0 right-0 flex items-center py-1.5 pr-3
+  }
   .extra-side-bar-save-disable {
     @apply text-muted-foreground
   }
+  .side-bar-button-size {
+    @apply h-5 w-5
+  }
+  .side-bar-buttons-arrangement {
+    @apply mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2
+  }
   .extra-side-bar-buttons {
     @apply relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out
   }
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index a3f7da7bc..4d490a818 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -59,8 +59,8 @@ export default function ExtraSidebar() {
   }
 
   return (
-    <div className="flex h-full w-52 flex-col overflow-hidden border-r scrollbar-hide">
-      <div className="mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2">
+    <div className="side-bar-arrangement">
+      <div className="side-bar-buttons-arrangement">
         <ShadTooltip content="Import" side="top">
           <button
             className="extra-side-bar-buttons"
@@ -69,7 +69,7 @@ export default function ExtraSidebar() {
               uploadFlow();
             }}
           >
-            <FileUp strokeWidth={1.5} className="h-5 w-5 "></FileUp>
+            <FileUp strokeWidth={1.5} className="side-bar-button-size "></FileUp>
           </button>
         </ShadTooltip>
 
@@ -82,7 +82,7 @@ export default function ExtraSidebar() {
               openPopUp(<ExportModal />);
             }}
           >
-            <FileDown strokeWidth={1.5} className="h-5 w-5  "></FileDown>
+            <FileDown strokeWidth={1.5} className="side-bar-button-size"></FileDown>
           </button>
         </ShadTooltip>
         <ShadTooltip content="Code" side="top">
@@ -94,7 +94,7 @@ export default function ExtraSidebar() {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
             }}
           >
-            <Code2 strokeWidth={1.5} className="h-5 w-5  "></Code2>
+            <Code2 strokeWidth={1.5} className="side-bar-button-size"></Code2>
           </button>
         </ShadTooltip>
 
@@ -110,14 +110,14 @@ export default function ExtraSidebar() {
             <Save
               strokeWidth={1.5}
               className={
-                "h-5 w-5" + (isPending ? " " : " extra-side-bar-save-disable")
+                "side-bar-button-size" + (isPending ? " " : " extra-side-bar-save-disable")
               }
             ></Save>
           </button>
         </ShadTooltip>
       </div>
       <Separator />
-      <div className="relative mx-auto mb-2 mt-2 flex items-center">
+      <div className="side-bar-search-div-placement">
         <input
           type="text"
           name="search"
@@ -129,13 +129,13 @@ export default function ExtraSidebar() {
             setSearch(e.target.value);
           }}
         />
-        <div className="absolute inset-y-0 right-0 flex items-center py-1.5 pr-3">
+        <div className="search-icon">
           {/* ! replace hash color here */}
           <Search size={20} strokeWidth={1.5} className="text-primary" />
         </div>
       </div>
 
-      <div className="w-full overflow-auto scrollbar-hide">
+      <div className="side-bar-components-div-arrangement">
         {Object.keys(dataFilter)
           .sort()
           .map((d: keyof APIObjectType, i) =>
@@ -148,7 +148,7 @@ export default function ExtraSidebar() {
                   Icon: nodeIconsLucide[d] ?? nodeIconsLucide.unknown,
                 }}
               >
-                <div className="flex flex-col gap-2 p-2">
+                <div className="side-bar-components-gap">
                   {Object.keys(dataFilter[d])
                     .sort()
                     .map((t: string, k) => (
@@ -160,7 +160,7 @@ export default function ExtraSidebar() {
                         <div key={k} data-tooltip-id={t}>
                           <div
                             draggable
-                            className={"cursor-grab rounded-l-md border-l-8"}
+                            className={"side-bar-components-border"}
                             style={{
                               borderLeftColor:
                                 nodeColors[d] ?? nodeColors.unknown,
@@ -179,11 +179,11 @@ export default function ExtraSidebar() {
                               );
                             }}
                           >
-                            <div className="flex w-full items-center justify-between rounded-md rounded-l-none border border-l-0 border-dashed border-ring  bg-white px-3 py-1 text-sm">
-                              <span className="w-full  truncate pr-1 text-xs text-foreground">
+                            <div className="side-bar-components-div-form">
+                              <span className="side-bar-components-text">
                                 {data[d][t].display_name}
                               </span>
-                              <Menu className="h-6 w-4  text-ring " />
+                              <Menu className="side-bar-components-icon " />
                             </div>
                           </div>
                         </div>

From f545b9cf9b803d12968fd0a6196abb0ee33a65e7 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Tue, 4 Jul 2023 20:04:01 -0300
Subject: [PATCH 14/53] feat: add round buttons constants classes

---
 .../chatComponent/buildTrigger/index.tsx      | 10 ++++-----
 .../chatComponent/chatTrigger/index.tsx       |  9 ++++----
 src/frontend/src/index.css                    | 22 ++++++++++++++++++-
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 41a9f4164..e31303a68 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -156,9 +156,9 @@ export default function BuildTrigger({
       leaveFrom="translate-y-0"
       leaveTo="translate-y-96"
     >
-      <div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
+      <div className={'round-buttons-position' + (isBuilt ? " bottom-20" : " bottom-4")}>
         <div
-          className={`${eventClick} align-center shadow-round-btn-shadow hover:shadow-round-btn-shadow flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3 py-1 shadow-md`}
+          className={`${eventClick} round-button-form`}
           onClick={() => {
             handleBuild(flow);
           }}
@@ -166,7 +166,7 @@ export default function BuildTrigger({
           onMouseLeave={handleMouseLeave}
         >
           <button>
-            <div className="flex items-center gap-3">
+            <div className="round-button-div">
               {isBuilding && progress < 1 ? (
                 // Render your loading animation here when isBuilding is true
                 <RadialProgressComponent
@@ -175,9 +175,9 @@ export default function BuildTrigger({
                   value={progress}
                 ></RadialProgressComponent>
               ) : isBuilding ? (
-                <Loading strokeWidth={1.5} className="stroke-build-trigger" />
+                <Loading strokeWidth={1.5} className="build-trigger-loading-icon" />
               ) : (
-                <Zap strokeWidth={1.5} className="sh-6 w-6 fill-build-trigger stroke-1 stroke-build-trigger" />
+                <Zap strokeWidth={1.5} className="build-trigger-icon" />
               )}
             </div>
           </button>
diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
index 67ec52b99..8d1d3f42b 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -30,16 +30,15 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
       leaveFrom="translate-y-0"
       leaveTo="translate-y-96"
     >
-      <div className="absolute bottom-4 right-3">
+      <div className="message-button-position">
         <div
-          className="align-center shadow-round-btn-shadow hover:shadow-round-btn-shadow flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3
-          py-1 shadow-md"
+          className="round-button-form"
           onClick={handleClick}
         >
           <button>
-            <div className="flex gap-3">
+            <div className="round-button-div">
               <MessagesSquare
-                className="pth-6 w-6 fill-chat-trigger stroke-chat-trigger stroke-1"
+                className="message-button-icon"
                 style={{ color: "white" }}
                 strokeWidth={1.5}
               />
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index dec62c95b..eb77f2c01 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -143,6 +143,9 @@ The cursor: default; property value restores the browser's default cursor style
 
 
 @layer components {
+  .round-buttons-position {
+    @apply fixed right-4
+  }
   .side-bar-arrangement {
     @apply flex h-full w-52 flex-col overflow-hidden border-r scrollbar-hide
   }
@@ -206,5 +209,22 @@ The cursor: default; property value restores the browser's default cursor style
   .input-dialog{
     @apply text-ring cursor-pointer bg-transparent
   }
-
+  .round-button-form {
+    @apply flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3 py-1 shadow-md
+  }
+  .round-button-div {
+    @apply flex items-center gap-3
+  }
+  .build-trigger-loading-icon {
+    @apply stroke-build-trigger
+  }
+  .build-trigger-icon {
+    @apply w-6 fill-build-trigger stroke-1 stroke-build-trigger
+  }
+  .message-button-position {
+    @apply absolute bottom-4 right-3
+  }
+  .message-button-icon {
+    @apply w-6 fill-chat-trigger stroke-chat-trigger stroke-1
+  }
 }
\ No newline at end of file

From b6192162b0c7ee8d29485ae0b996618141857694 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Tue, 4 Jul 2023 20:17:09 -0300
Subject: [PATCH 15/53] feat: add side bar components disclosure constants
 classes

---
 src/frontend/src/index.css                           | 12 ++++++++++++
 .../components/DisclosureComponent/index.tsx         | 10 +++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index eb77f2c01..c80ff50ec 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -227,4 +227,16 @@ The cursor: default; property value restores the browser's default cursor style
   .message-button-icon {
     @apply w-6 fill-chat-trigger stroke-chat-trigger stroke-1
   }
+  .components-disclosure-arrangement {
+    @apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2
+  }
+  .text-color {
+    @apply text-primary
+  }
+  .components-disclosure-title {
+    @apply flex items-center text-sm text-color
+  }
+  .components-disclosure-div {
+    @apply flex gap-2
+  }
 }
\ No newline at end of file
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 60e086715..aa6da9f96 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -12,14 +12,14 @@ export default function DisclosureComponent({
       {({ open }) => (
         <>
           <div>
-            <Disclosure.Button className="-mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2">
+            <Disclosure.Button className="components-disclosure-arrangement">
               <div className="flex gap-4">
-                <Icon strokeWidth={1.5} size={22} className="text-primary " />
-                <span className="flex items-center text-sm text-primary">
+                <Icon strokeWidth={1.5} size={22} className="text-color" />
+                <span className="components-disclosure-title">
                   {title}
                 </span>
               </div>
-              <div className="flex gap-2">
+              <div className="components-disclosure-div">
                 {buttons.map((x, index) => (
                   <button key={index} onClick={x.onClick}>
                     {x.Icon}
@@ -35,7 +35,7 @@ export default function DisclosureComponent({
               </div>
             </Disclosure.Button>
           </div>
-          <Disclosure.Panel as="div" className="-mt-px" static={openDisc}>
+          <Disclosure.Panel as="div" static={openDisc}>
             {children}
           </Disclosure.Panel>
         </>

From 04c3cb2d4ecfca8a621e4be73e13f0af81a163c5 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Tue, 4 Jul 2023 20:30:03 -0300
Subject: [PATCH 16/53] feat: add flowpage constants classes

---
 src/frontend/src/index.css                | 14 ++++++++++++++
 src/frontend/src/pages/FlowPage/index.tsx |  6 +++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index c80ff50ec..2c8b1c893 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -239,4 +239,18 @@ The cursor: default; property value restores the browser's default cursor style
   .components-disclosure-div {
     @apply flex gap-2
   }
+  .flow-page-positioning {
+    @apply h-full w-full overflow-hidden
+  }
+  .logspace-page-icon {
+    @apply absolute bottom-2 left-7 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-foreground px-2 text-center font-sans text-xs tracking-wide text-secondary transition-all duration-500 ease-in-out
+  }
+
+  .logspace-page-icon:hover {
+    @apply hover:h-12
+  }
+
+  .logspace-icon-text {
+    @apply mt-1
+  }
 }
\ No newline at end of file
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index 27846f794..8ff6c708a 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -20,7 +20,7 @@ export default function FlowPage() {
   }, []);
 
   return (
-    <div className="h-full w-full overflow-hidden">
+    <div className="flow-page-positioning">
       {flows.length > 0 &&
         tabId !== "" &&
         flows.findIndex((flow) => flow.id === tabId) !== -1 && (
@@ -29,9 +29,9 @@ export default function FlowPage() {
       <a
         target={"_blank"}
         href="https://logspace.ai/"
-        className="absolute bottom-2 left-7 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-foreground px-2 text-center font-sans text-xs tracking-wide text-secondary transition-all duration-500 ease-in-out hover:h-12"
+        className="logspace-page-icon"
       >
-        {version && <div className="mt-1">⛓️ LangFlow v{version}</div>}
+        {version && <div className="logspace-icon-text">⛓️ LangFlow v{version}</div>}
         <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>
       </a>
     </div>

From fdad5e7da3e4c9e98d94526c9e4514e58024f25f Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Tue, 4 Jul 2023 20:44:38 -0300
Subject: [PATCH 17/53] feat: add main page constants classes

---
 src/frontend/src/index.css                | 28 +++++++++++++++++++++++
 src/frontend/src/pages/MainPage/index.tsx | 18 +++++++--------
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 2c8b1c893..9f6796447 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -253,4 +253,32 @@ The cursor: default; property value restores the browser's default cursor style
   .logspace-icon-text {
     @apply mt-1
   }
+
+  .flex-max-width {
+    @apply flex w-full
+  }
+
+  .main-page-panel {
+    @apply flex-max-width h-full flex-col overflow-auto bg-muted px-16
+  }
+
+  .main-page-nav-arrangement {
+    @apply flex-max-width justify-between px-6 py-12 pb-2
+  }
+
+  .main-page-nav-title {
+    @apply flex items-center justify-center gap-2 text-2xl font-semibold
+  }
+
+  .main-page-nav-button {
+    @apply mr-2 w-4
+  }
+
+  .main-page-description-text {
+    @apply flex w-[60%] px-6 pb-14 text-muted-foreground
+  }
+
+  .main-page-flows-display {
+    @apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4
+  }
 }
\ No newline at end of file
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index 0b45a94ae..99df6a8a8 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -13,9 +13,9 @@ export default function HomePage() {
   }, []);
   const navigate = useNavigate();
   return (
-    <div className="flex h-full w-full flex-col overflow-auto bg-muted px-16">
-      <div className="flex w-full justify-between px-6 py-12 pb-2">
-        <span className="flex items-center justify-center gap-2 text-2xl font-semibold">
+    <div className="main-page-panel">
+      <div className="main-page-nav-arrangement">
+        <span className="main-page-nav-title">
           <Home className="w-6" />
           {USER_PROJECTS_HEADER}
         </span>
@@ -26,7 +26,7 @@ export default function HomePage() {
               downloadFlows();
             }}
           >
-            <Download className="mr-2 w-4" />
+            <Download className="main-page-nav-button" />
             Download Collection
           </Button>
           <Button
@@ -35,7 +35,7 @@ export default function HomePage() {
               uploadFlows();
             }}
           >
-            <Upload className="mr-2 w-4" />
+            <Upload className="main-page-nav-button" />
             Upload Collection
           </Button>
           <Button
@@ -46,15 +46,15 @@ export default function HomePage() {
               });
             }}
           >
-            <Plus className="mr-2 w-4" />
+            <Plus className="main-page-nav-button" />
             New Project
           </Button>
         </div>
       </div>
-      <span className="flex w-[60%] px-6 pb-14 text-muted-foreground">
+      <span className="main-page-description-text">
         Manage your personal projects. Download or upload your collection.
       </span>
-      <div className="grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
+      <div className="main-page-flows-display">
         {flows.map((flow, idx) => (
           <CardComponent
             key={idx}
@@ -67,7 +67,7 @@ export default function HomePage() {
                   size="sm"
                   className="whitespace-nowrap "
                 >
-                  <ExternalLink className="mr-2 w-4" />
+                  <ExternalLink className="main-page-nav-button" />
                   Edit Flow
                 </Button>
               </Link>

From 84aa84cc08d4f168b48dd30ecee36e3ce3171969 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Tue, 4 Jul 2023 21:02:43 -0300
Subject: [PATCH 18/53] feat: Add community page constants classes

---
 src/frontend/src/index.css                    | 24 +++++++++++++++++++
 .../src/pages/CommunityPage/index.tsx         | 16 ++++++-------
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 9f6796447..3018b40c0 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -281,4 +281,28 @@ The cursor: default; property value restores the browser's default cursor style
   .main-page-flows-display {
     @apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4
   }
+
+  .community-page-arrangement {
+    @apply flex-max-width h-full flex-col overflow-auto bg-muted px-16
+  }
+
+  .community-page-nav-arrangement {
+    @apply flex-max-width justify-between px-6 py-12 pb-2
+  }
+
+  .community-page-nav-title {
+    @apply flex items-center justify-center gap-2 text-2xl font-semibold
+  }
+
+  .community-page-nav-button {
+    @apply flex gap-2
+  }
+
+  .community-page-description-text {
+    @apply flex w-[70%] px-6 pb-8 text-muted-foreground 
+  }
+
+  .community-pages-flows-panel {
+    @apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4
+  }
 }
\ No newline at end of file
diff --git a/src/frontend/src/pages/CommunityPage/index.tsx b/src/frontend/src/pages/CommunityPage/index.tsx
index 175198c79..fb39a42e8 100644
--- a/src/frontend/src/pages/CommunityPage/index.tsx
+++ b/src/frontend/src/pages/CommunityPage/index.tsx
@@ -37,31 +37,31 @@ export default function CommunityPage() {
     handleExamples();
   }, []);
   return (
-    <div className="flex h-full w-full flex-col overflow-auto bg-muted px-16">
-      <div className="flex w-full justify-between px-6 py-12 pb-2">
-        <span className="flex items-center justify-center gap-2 text-2xl font-semibold">
+    <div className="community-page-arrangement">
+      <div className="community-page-nav-arrangement">
+        <span className="community-page-nav-title">
           <Users2 className="w-6" />
           Community Examples
         </span>
-        <div className="flex gap-2">
+        <div className="community-page-nav-button">
           <a
             href="https://github.com/logspace-ai/langflow_examples"
             target="_blank"
             rel="noreferrer"
           >
             <Button variant="primary">
-              <GithubIcon className="mr-2 w-4" />
+              <GithubIcon className="main-page-nav-button" />
               Add Your Example
             </Button>
           </a>
         </div>
       </div>
-      <span className="flex w-[70%] px-6 pb-8 text-muted-foreground">
+      <span className="community-page-description-text">
         Discover and learn from shared examples by the LangFlow community. We
         welcome new example contributions that can help our community explore
         new and powerful features.
       </span>
-      <div className="grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
+      <div className="community-pages-flows-panel">
         {!loadingExamples &&
           examples.map((flow, idx) => (
             <CardComponent
@@ -79,7 +79,7 @@ export default function CommunityPage() {
                     });
                   }}
                 >
-                  <GitFork className="mr-2 w-4" />
+                  <GitFork className="main-page-nav-button" />
                   Fork Example
                 </Button>
               }

From 20da596d9a28dc3049d45043a596f0b7e473e5f7 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 11:47:55 -0300
Subject: [PATCH 19/53] =?UTF-8?q?=F0=9F=90=9B=20fix(base.py):=20handle=20c?=
 =?UTF-8?q?ase=20when=20no=20database=5Furl=20is=20provided=20and=20raise?=
 =?UTF-8?q?=20an=20error=20=E2=9C=A8=20feat(base.py):=20add=20error=20hand?=
 =?UTF-8?q?ling=20when=20creating=20database=20and=20tables=20to=20provide?=
 =?UTF-8?q?=20more=20informative=20error=20messages=20The=20code=20now=20c?=
 =?UTF-8?q?hecks=20if=20the=20`settings.database=5Furl`=20is=20provided=20?=
 =?UTF-8?q?and=20raises=20a=20`RuntimeError`=20if=20it=20is=20not.=20This?=
 =?UTF-8?q?=20ensures=20that=20the=20application=20does=20not=20attempt=20?=
 =?UTF-8?q?to=20create=20a=20database=20connection=20without=20a=20valid?=
 =?UTF-8?q?=20URL.=20Additionally,=20error=20handling=20has=20been=20added?=
 =?UTF-8?q?=20when=20creating=20the=20database=20and=20tables.=20If=20an?=
 =?UTF-8?q?=20exception=20occurs=20during=20the=20creation=20process,=20an?=
 =?UTF-8?q?=20error=20message=20is=20logged=20and=20a=20`RuntimeError`=20i?=
 =?UTF-8?q?s=20raised=20with=20a=20more=20informative=20error=20message.?=
 =?UTF-8?q?=20This=20helps=20in=20identifying=20and=20resolving=20any=20is?=
 =?UTF-8?q?sues=20related=20to=20the=20database=20creation=20process.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/database/base.py | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/backend/langflow/database/base.py b/src/backend/langflow/database/base.py
index add28192a..256434523 100644
--- a/src/backend/langflow/database/base.py
+++ b/src/backend/langflow/database/base.py
@@ -2,17 +2,22 @@ from langflow.settings import settings
 from sqlmodel import SQLModel, Session, create_engine
 from langflow.utils.logger import logger
 
-if settings.database_url.startswith("sqlite"):
+if settings.database_url and settings.database_url.startswith("sqlite"):
     connect_args = {"check_same_thread": False}
 else:
     connect_args = {}
-
+if not settings.database_url:
+    raise RuntimeError("No database_url provided")
 engine = create_engine(settings.database_url, connect_args=connect_args)
 
 
 def create_db_and_tables():
     logger.debug("Creating database and tables")
-    SQLModel.metadata.create_all(engine)
+    try:
+        SQLModel.metadata.create_all(engine)
+    except Exception as exc:
+        logger.error(f"Error creating database and tables: {exc}")
+        raise RuntimeError("Error creating database and tables") from exc
     # Now check if the table Flow exists, if not, something went wrong
     # and we need to create the tables again.
     from sqlalchemy import inspect
@@ -21,6 +26,7 @@ def create_db_and_tables():
     if "flow" not in inspector.get_table_names():
         logger.error("Something went wrong creating the database and tables.")
         logger.error("Please check your database settings.")
+
         raise RuntimeError("Something went wrong creating the database and tables.")
     else:
         logger.debug("Database and tables created successfully")

From c0efe4dbcfa371d99622acaf25db6f0dc9510238 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 11:49:22 -0300
Subject: [PATCH 20/53] =?UTF-8?q?=F0=9F=94=A7=20chore(=5F=5Finit=5F=5F.py)?=
 =?UTF-8?q?:=20add=20noqa=20comments=20to=20import=20statements=20to=20ign?=
 =?UTF-8?q?ore=20linting=20errors=20The=20noqa=20comments=20have=20been=20?=
 =?UTF-8?q?added=20to=20the=20import=20statements=20to=20ignore=20the=20li?=
 =?UTF-8?q?nting=20errors=20raised=20by=20the=20linter.=20This=20ensures?=
 =?UTF-8?q?=20that=20the=20linting=20errors=20related=20to=20the=20imports?=
 =?UTF-8?q?=20are=20ignored=20and=20the=20code=20can=20be=20properly=20exe?=
 =?UTF-8?q?cuted=20without=20any=20issues.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/__init__.py | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/backend/langflow/__init__.py b/src/backend/langflow/__init__.py
index 9b80c2ea7..f6d1facdf 100644
--- a/src/backend/langflow/__init__.py
+++ b/src/backend/langflow/__init__.py
@@ -1,6 +1,6 @@
 from importlib import metadata
-from langflow.cache import cache_manager
-from langflow.processing.process import load_flow_from_json
+from langflow.cache import cache_manager  # noqa: E402
+from langflow.processing.process import load_flow_from_json  # noqa: E402
 
 try:
     __version__ = metadata.version(__package__)
@@ -9,4 +9,5 @@ except metadata.PackageNotFoundError:
     __version__ = ""
 del metadata  # optional, avoids polluting the results of dir(__package__)
 
+
 __all__ = ["load_flow_from_json", "cache_manager"]

From d713d38ca75fbaaef15f6b0568bb07b99702768a Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 11:50:07 -0300
Subject: [PATCH 21/53] =?UTF-8?q?=F0=9F=94=A7=20chore(=5F=5Fmain=5F=5F.py)?=
 =?UTF-8?q?:=20refactor=20loading=20of=20environment=20variables=20to=20al?=
 =?UTF-8?q?low=20overriding=20with=20.env=20file=20The=20os=20module=20is?=
 =?UTF-8?q?=20imported=20to=20make=20use=20of=20the=20os.getenv()=20functi?=
 =?UTF-8?q?on.=20The=20loading=20of=20the=20environment=20variables=20is?=
 =?UTF-8?q?=20refactored=20to=20check=20for=20the=20presence=20of=20the=20?=
 =?UTF-8?q?"langflow=5Fdatabase=5Furl"=20environment=20variable=20and=20us?=
 =?UTF-8?q?e=20it=20as=20the=20value=20for=20the=20database=5Furl=20variab?=
 =?UTF-8?q?le=20if=20it=20is=20not=20provided.=20This=20allows=20for=20mor?=
 =?UTF-8?q?e=20flexibility=20in=20configuring=20the=20database=20URL.=20Ad?=
 =?UTF-8?q?ditionally,=20the=20loading=20of=20environment=20variables=20is?=
 =?UTF-8?q?=20refactored=20to=20allow=20overriding=20with=20a=20.env=20fil?=
 =?UTF-8?q?e=20if=20the=20env=5Ffile=20parameter=20is=20provided.=20This?=
 =?UTF-8?q?=20allows=20for=20easier=20configuration=20management.=20?=
 =?UTF-8?q?=F0=9F=94=A7=20chore(=5F=5Fmain=5F=5F.py):=20import=20os=20modu?=
 =?UTF-8?q?le=20and=20refactor=20loading=20of=20environment=20variables?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/__main__.py | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/backend/langflow/__main__.py b/src/backend/langflow/__main__.py
index 322c6b6a9..a8dab586b 100644
--- a/src/backend/langflow/__main__.py
+++ b/src/backend/langflow/__main__.py
@@ -1,3 +1,4 @@
+import os
 import sys
 import time
 import httpx
@@ -33,6 +34,10 @@ def update_settings(
     remove_api_keys: bool = False,
 ):
     """Update the settings from a config file."""
+
+    # Check for database_url in the environment variables
+    database_url = database_url or os.getenv("langflow_database_url")
+
     if config:
         settings.update_from_yaml(config, dev=dev)
     if database_url:
@@ -127,12 +132,13 @@ def serve(
     """
     Run the Langflow server.
     """
+    # override env variables with .env file
+    if env_file:
+        load_dotenv(env_file, override=True)
 
     if jcloud:
         return serve_on_jcloud()
 
-    load_dotenv(env_file)
-
     configure(log_level=log_level, log_file=log_file)
     update_settings(
         config,

From 552edf072b2c7ae0ec5fc8070bca93e339be43ef Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 11:50:32 -0300
Subject: [PATCH 22/53] =?UTF-8?q?=F0=9F=94=A7=20chore(settings.py):=20make?=
 =?UTF-8?q?=20database=5Furl=20optional=20to=20handle=20cases=20where=20it?=
 =?UTF-8?q?=20is=20not=20provided=20The=20`database=5Furl`=20setting=20is?=
 =?UTF-8?q?=20now=20declared=20as=20an=20optional=20string=20(`Optional[st?=
 =?UTF-8?q?r]`)=20instead=20of=20a=20required=20string.=20This=20change=20?=
 =?UTF-8?q?allows=20the=20application=20to=20handle=20cases=20where=20the?=
 =?UTF-8?q?=20`database=5Furl`=20is=20not=20provided,=20providing=20more?=
 =?UTF-8?q?=20flexibility=20in=20the=20configuration.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/settings.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/backend/langflow/settings.py b/src/backend/langflow/settings.py
index a149dae82..ed4830ceb 100644
--- a/src/backend/langflow/settings.py
+++ b/src/backend/langflow/settings.py
@@ -1,4 +1,5 @@
 import os
+from typing import Optional
 
 import yaml
 from pydantic import BaseSettings, root_validator
@@ -21,7 +22,7 @@ class Settings(BaseSettings):
     textsplitters: dict = {}
     utilities: dict = {}
     dev: bool = False
-    database_url: str
+    database_url: Optional[str] = None
     cache: str = "InMemoryCache"
     remove_api_keys: bool = False
 

From d93dbef31b3cd57716fe183e20063617b6f88846 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 5 Jul 2023 11:51:06 -0300
Subject: [PATCH 23/53] style(index.css): remove unused text-color class and
 update components-disclosure-title class to use text-primary class for
 consistent styling style(DisclosureComponent): update Icon class to use
 text-primary class for consistent styling style(FlowPage): remove
 logspace-icon-text class and update the structure of the icon and text
 elements for better alignment and spacing

---
 src/frontend/src/index.css                            | 11 ++---------
 .../FlowPage/components/DisclosureComponent/index.tsx |  2 +-
 src/frontend/src/pages/FlowPage/index.tsx             |  2 +-
 3 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 3018b40c0..a9dfc0c1a 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -230,11 +230,8 @@ The cursor: default; property value restores the browser's default cursor style
   .components-disclosure-arrangement {
     @apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2
   }
-  .text-color {
-    @apply text-primary
-  }
   .components-disclosure-title {
-    @apply flex items-center text-sm text-color
+    @apply flex items-center text-sm text-primary
   }
   .components-disclosure-div {
     @apply flex gap-2
@@ -249,11 +246,7 @@ The cursor: default; property value restores the browser's default cursor style
   .logspace-page-icon:hover {
     @apply hover:h-12
   }
-
-  .logspace-icon-text {
-    @apply mt-1
-  }
-
+  
   .flex-max-width {
     @apply flex w-full
   }
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index aa6da9f96..a35b8163e 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -14,7 +14,7 @@ export default function DisclosureComponent({
           <div>
             <Disclosure.Button className="components-disclosure-arrangement">
               <div className="flex gap-4">
-                <Icon strokeWidth={1.5} size={22} className="text-color" />
+                <Icon strokeWidth={1.5} size={22} className="text-primary" />
                 <span className="components-disclosure-title">
                   {title}
                 </span>
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index 8ff6c708a..7f9f2a214 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -31,7 +31,7 @@ export default function FlowPage() {
         href="https://logspace.ai/"
         className="logspace-page-icon"
       >
-        {version && <div className="logspace-icon-text">⛓️ LangFlow v{version}</div>}
+        {version && <div className="mt-1">⛓️ LangFlow v{version}</div>}
         <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>
       </a>
     </div>

From 8cee7e701fd96d4a89a55fd7691b918cc62c09c4 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 11:54:41 -0300
Subject: [PATCH 24/53] =?UTF-8?q?=F0=9F=94=BA=20chore(pyproject.toml):=20u?=
 =?UTF-8?q?pdate=20langchain-serve=20version=20to=20>0.0.51=20The=20langch?=
 =?UTF-8?q?ain-serve=20package=20has=20been=20updated=20to=20version=20>0.?=
 =?UTF-8?q?0.51.=20This=20update=20may=20include=20bug=20fixes,=20new=20fe?=
 =?UTF-8?q?atures,=20or=20other=20improvements.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 poetry.lock    | 311 +++++++++++++++++++++++++------------------------
 pyproject.toml |   2 +-
 2 files changed, 157 insertions(+), 156 deletions(-)

diff --git a/poetry.lock b/poetry.lock
index 0760411e8..6d6a9ec64 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -955,14 +955,14 @@ test-randomorder = ["pytest-randomly"]
 
 [[package]]
 name = "ctransformers"
-version = "0.2.10"
+version = "0.2.11"
 description = "Python bindings for the Transformer models implemented in C/C++ using GGML library."
 category = "main"
 optional = false
 python-versions = "*"
 files = [
-    {file = "ctransformers-0.2.10-py3-none-any.whl", hash = "sha256:912a80859bd252e2a389b4716d44b0663657148a85fbfbe6c5503a7ee69fd235"},
-    {file = "ctransformers-0.2.10.tar.gz", hash = "sha256:d82a299690f1494fe93db136f71b1b9b2cd4ada535e2afa07aaee1d180117a2d"},
+    {file = "ctransformers-0.2.11-py3-none-any.whl", hash = "sha256:06aa3b2a42112fb688b0d9a54b9958501af7db8557bda067ffbc43645590c522"},
+    {file = "ctransformers-0.2.11.tar.gz", hash = "sha256:993a3ba05d37822d0111393ab214856b9fe40d28b48af1306ee63e94e716a4e2"},
 ]
 
 [package.dependencies]
@@ -1294,14 +1294,14 @@ files = [
 
 [[package]]
 name = "exceptiongroup"
-version = "1.1.1"
+version = "1.1.2"
 description = "Backport of PEP 654 (exception groups)"
 category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "exceptiongroup-1.1.1-py3-none-any.whl", hash = "sha256:232c37c63e4f682982c8b6459f33a8981039e5fb8756b2074364e5055c498c9e"},
-    {file = "exceptiongroup-1.1.1.tar.gz", hash = "sha256:d484c3090ba2889ae2928419117447a14daf3c1231d5e30d0aae34f354f01785"},
+    {file = "exceptiongroup-1.1.2-py3-none-any.whl", hash = "sha256:e346e69d186172ca7cf029c8c1d16235aa0e04035e5750b4b95039e65204328f"},
+    {file = "exceptiongroup-1.1.2.tar.gz", hash = "sha256:12c3e887d6485d16943a309616de20ae5582633e0a2eda17f4e10fd61c1e8af5"},
 ]
 
 [package.extras]
@@ -2537,14 +2537,14 @@ files = [
 
 [[package]]
 name = "ipykernel"
-version = "6.23.3"
+version = "6.24.0"
 description = "IPython Kernel for Jupyter"
 category = "dev"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "ipykernel-6.23.3-py3-none-any.whl", hash = "sha256:bc00662dc44d4975b668cdb5fefb725e38e9d8d6e28441a519d043f38994922d"},
-    {file = "ipykernel-6.23.3.tar.gz", hash = "sha256:dd4e18116357f36a1e459b3768412371bee764c51844cbf25c4ed1eb9cae4a54"},
+    {file = "ipykernel-6.24.0-py3-none-any.whl", hash = "sha256:2f5fffc7ad8f1fd5aadb4e171ba9129d9668dbafa374732cf9511ada52d6547f"},
+    {file = "ipykernel-6.24.0.tar.gz", hash = "sha256:29cea0a716b1176d002a61d0b0c851f34536495bc4ef7dd0222c88b41b816123"},
 ]
 
 [package.dependencies]
@@ -2807,14 +2807,14 @@ websockets = ["websockets"]
 
 [[package]]
 name = "jina-hubble-sdk"
-version = "0.38.0"
+version = "0.39.0"
 description = "SDK for Hubble API at Jina AI."
 category = "main"
 optional = false
 python-versions = ">=3.7.0"
 files = [
-    {file = "jina-hubble-sdk-0.38.0.tar.gz", hash = "sha256:1667917ed16d75eddd1e0d3b8e9d78ffd611de59500abeca48b05040c7571c4c"},
-    {file = "jina_hubble_sdk-0.38.0-py3-none-any.whl", hash = "sha256:f887f5a5839b530b59393fe56e9b48d406f52a178739d3a5799c8e201bcf4015"},
+    {file = "jina-hubble-sdk-0.39.0.tar.gz", hash = "sha256:9021417794a6d3cf3fad8a880cf668a3a986b9d53d5be5fa391aae1767a5b9b0"},
+    {file = "jina_hubble_sdk-0.39.0-py3-none-any.whl", hash = "sha256:b0edd4b62d742c27d726d68f65a041b3c4d9aa6b3b9b203d5b0e729904161e3e"},
 ]
 
 [package.dependencies]
@@ -2972,13 +2972,13 @@ text-helpers = ["chardet (>=5.1.0,<6.0.0)"]
 
 [[package]]
 name = "langchain-serve"
-version = "0.0.49"
+version = "0.0.52"
 description = "Langchain Serve - serve your langchain apps on Jina AI Cloud."
 category = "main"
 optional = true
 python-versions = "*"
 files = [
-    {file = "langchain-serve-0.0.49.tar.gz", hash = "sha256:5dc30276e709e59838c28508228ad2185e264c8877ea70194fa5d2acd44e966d"},
+    {file = "langchain-serve-0.0.52.tar.gz", hash = "sha256:e69dcf6022423279059ab7ebda025e252aba4d9fd8e3e49776300355dbf85d1c"},
 ]
 
 [package.dependencies]
@@ -2998,14 +2998,14 @@ test = ["psutil", "pytest", "pytest-asyncio"]
 
 [[package]]
 name = "langchainplus-sdk"
-version = "0.0.19"
+version = "0.0.20"
 description = "Client library to connect to the LangSmith LLM Tracing and Evaluation Platform."
 category = "main"
 optional = false
 python-versions = ">=3.8.1,<4.0"
 files = [
-    {file = "langchainplus_sdk-0.0.19-py3-none-any.whl", hash = "sha256:2ee028280ad87063676efa1a0da1aa7801e8becf55b340c29e95cc536c2647f3"},
-    {file = "langchainplus_sdk-0.0.19.tar.gz", hash = "sha256:8ec11f07c0ce35b164eb3bd7217bfdb9f7c20263508751b1e9e5e12c9960bf45"},
+    {file = "langchainplus_sdk-0.0.20-py3-none-any.whl", hash = "sha256:07a869d476755803aa04c4986ce78d00c2fe4ff584c0eaa57d7570c9664188db"},
+    {file = "langchainplus_sdk-0.0.20.tar.gz", hash = "sha256:3d300e2e3290f68cc9d842c059f9458deba60e776c9e790309688cad1bfbb219"},
 ]
 
 [package.dependencies]
@@ -3069,96 +3069,100 @@ dev = ["Sphinx (==5.3.0)", "colorama (==0.4.5)", "colorama (==0.4.6)", "freezegu
 
 [[package]]
 name = "lxml"
-version = "4.9.2"
+version = "4.9.3"
 description = "Powerful and Pythonic XML processing library combining libxml2/libxslt with the ElementTree API."
 category = "main"
 optional = false
 python-versions = ">=2.7, !=3.0.*, !=3.1.*, !=3.2.*, !=3.3.*, != 3.4.*"
 files = [
-    {file = "lxml-4.9.2-cp27-cp27m-macosx_10_15_x86_64.whl", hash = "sha256:76cf573e5a365e790396a5cc2b909812633409306c6531a6877c59061e42c4f2"},
-    {file = "lxml-4.9.2-cp27-cp27m-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:b1f42b6921d0e81b1bcb5e395bc091a70f41c4d4e55ba99c6da2b31626c44892"},
-    {file = "lxml-4.9.2-cp27-cp27m-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:9f102706d0ca011de571de32c3247c6476b55bb6bc65a20f682f000b07a4852a"},
-    {file = "lxml-4.9.2-cp27-cp27m-win32.whl", hash = "sha256:8d0b4612b66ff5d62d03bcaa043bb018f74dfea51184e53f067e6fdcba4bd8de"},
-    {file = "lxml-4.9.2-cp27-cp27m-win_amd64.whl", hash = "sha256:4c8f293f14abc8fd3e8e01c5bd86e6ed0b6ef71936ded5bf10fe7a5efefbaca3"},
-    {file = "lxml-4.9.2-cp27-cp27mu-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:2899456259589aa38bfb018c364d6ae7b53c5c22d8e27d0ec7609c2a1ff78b50"},
-    {file = "lxml-4.9.2-cp27-cp27mu-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:6749649eecd6a9871cae297bffa4ee76f90b4504a2a2ab528d9ebe912b101975"},
-    {file = "lxml-4.9.2-cp310-cp310-macosx_10_15_x86_64.whl", hash = "sha256:a08cff61517ee26cb56f1e949cca38caabe9ea9fbb4b1e10a805dc39844b7d5c"},
-    {file = "lxml-4.9.2-cp310-cp310-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_24_i686.whl", hash = "sha256:85cabf64adec449132e55616e7ca3e1000ab449d1d0f9d7f83146ed5bdcb6d8a"},
-    {file = "lxml-4.9.2-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.manylinux_2_24_aarch64.whl", hash = "sha256:8340225bd5e7a701c0fa98284c849c9b9fc9238abf53a0ebd90900f25d39a4e4"},
-    {file = "lxml-4.9.2-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_24_x86_64.whl", hash = "sha256:1ab8f1f932e8f82355e75dda5413a57612c6ea448069d4fb2e217e9a4bed13d4"},
-    {file = "lxml-4.9.2-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:699a9af7dffaf67deeae27b2112aa06b41c370d5e7633e0ee0aea2e0b6c211f7"},
-    {file = "lxml-4.9.2-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:b9cc34af337a97d470040f99ba4282f6e6bac88407d021688a5d585e44a23184"},
-    {file = "lxml-4.9.2-cp310-cp310-win32.whl", hash = "sha256:d02a5399126a53492415d4906ab0ad0375a5456cc05c3fc0fc4ca11771745cda"},
-    {file = "lxml-4.9.2-cp310-cp310-win_amd64.whl", hash = "sha256:a38486985ca49cfa574a507e7a2215c0c780fd1778bb6290c21193b7211702ab"},
-    {file = "lxml-4.9.2-cp311-cp311-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_24_i686.whl", hash = "sha256:c83203addf554215463b59f6399835201999b5e48019dc17f182ed5ad87205c9"},
-    {file = "lxml-4.9.2-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.manylinux_2_24_aarch64.whl", hash = "sha256:2a87fa548561d2f4643c99cd13131acb607ddabb70682dcf1dff5f71f781a4bf"},
-    {file = "lxml-4.9.2-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_24_x86_64.whl", hash = "sha256:d6b430a9938a5a5d85fc107d852262ddcd48602c120e3dbb02137c83d212b380"},
-    {file = "lxml-4.9.2-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:3efea981d956a6f7173b4659849f55081867cf897e719f57383698af6f618a92"},
-    {file = "lxml-4.9.2-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:df0623dcf9668ad0445e0558a21211d4e9a149ea8f5666917c8eeec515f0a6d1"},
-    {file = "lxml-4.9.2-cp311-cp311-win32.whl", hash = "sha256:da248f93f0418a9e9d94b0080d7ebc407a9a5e6d0b57bb30db9b5cc28de1ad33"},
-    {file = "lxml-4.9.2-cp311-cp311-win_amd64.whl", hash = "sha256:3818b8e2c4b5148567e1b09ce739006acfaa44ce3156f8cbbc11062994b8e8dd"},
-    {file = "lxml-4.9.2-cp35-cp35m-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:ca989b91cf3a3ba28930a9fc1e9aeafc2a395448641df1f387a2d394638943b0"},
-    {file = "lxml-4.9.2-cp35-cp35m-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:822068f85e12a6e292803e112ab876bc03ed1f03dddb80154c395f891ca6b31e"},
-    {file = "lxml-4.9.2-cp35-cp35m-win32.whl", hash = "sha256:be7292c55101e22f2a3d4d8913944cbea71eea90792bf914add27454a13905df"},
-    {file = "lxml-4.9.2-cp35-cp35m-win_amd64.whl", hash = "sha256:998c7c41910666d2976928c38ea96a70d1aa43be6fe502f21a651e17483a43c5"},
-    {file = "lxml-4.9.2-cp36-cp36m-macosx_10_15_x86_64.whl", hash = "sha256:b26a29f0b7fc6f0897f043ca366142d2b609dc60756ee6e4e90b5f762c6adc53"},
-    {file = "lxml-4.9.2-cp36-cp36m-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_24_i686.whl", hash = "sha256:ab323679b8b3030000f2be63e22cdeea5b47ee0abd2d6a1dc0c8103ddaa56cd7"},
-    {file = "lxml-4.9.2-cp36-cp36m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:689bb688a1db722485e4610a503e3e9210dcc20c520b45ac8f7533c837be76fe"},
-    {file = "lxml-4.9.2-cp36-cp36m-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_24_x86_64.whl", hash = "sha256:f49e52d174375a7def9915c9f06ec4e569d235ad428f70751765f48d5926678c"},
-    {file = "lxml-4.9.2-cp36-cp36m-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:36c3c175d34652a35475a73762b545f4527aec044910a651d2bf50de9c3352b1"},
-    {file = "lxml-4.9.2-cp36-cp36m-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:a35f8b7fa99f90dd2f5dc5a9fa12332642f087a7641289ca6c40d6e1a2637d8e"},
-    {file = "lxml-4.9.2-cp36-cp36m-musllinux_1_1_aarch64.whl", hash = "sha256:58bfa3aa19ca4c0f28c5dde0ff56c520fbac6f0daf4fac66ed4c8d2fb7f22e74"},
-    {file = "lxml-4.9.2-cp36-cp36m-musllinux_1_1_x86_64.whl", hash = "sha256:bc718cd47b765e790eecb74d044cc8d37d58562f6c314ee9484df26276d36a38"},
-    {file = "lxml-4.9.2-cp36-cp36m-win32.whl", hash = "sha256:d5bf6545cd27aaa8a13033ce56354ed9e25ab0e4ac3b5392b763d8d04b08e0c5"},
-    {file = "lxml-4.9.2-cp36-cp36m-win_amd64.whl", hash = "sha256:3ab9fa9d6dc2a7f29d7affdf3edebf6ece6fb28a6d80b14c3b2fb9d39b9322c3"},
-    {file = "lxml-4.9.2-cp37-cp37m-macosx_10_15_x86_64.whl", hash = "sha256:05ca3f6abf5cf78fe053da9b1166e062ade3fa5d4f92b4ed688127ea7d7b1d03"},
-    {file = "lxml-4.9.2-cp37-cp37m-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_24_i686.whl", hash = "sha256:a5da296eb617d18e497bcf0a5c528f5d3b18dadb3619fbdadf4ed2356ef8d941"},
-    {file = "lxml-4.9.2-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.manylinux_2_24_aarch64.whl", hash = "sha256:04876580c050a8c5341d706dd464ff04fd597095cc8c023252566a8826505726"},
-    {file = "lxml-4.9.2-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_24_x86_64.whl", hash = "sha256:c9ec3eaf616d67db0764b3bb983962b4f385a1f08304fd30c7283954e6a7869b"},
-    {file = "lxml-4.9.2-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:2a29ba94d065945944016b6b74e538bdb1751a1db6ffb80c9d3c2e40d6fa9894"},
-    {file = "lxml-4.9.2-cp37-cp37m-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:a82d05da00a58b8e4c0008edbc8a4b6ec5a4bc1e2ee0fb6ed157cf634ed7fa45"},
-    {file = "lxml-4.9.2-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:223f4232855ade399bd409331e6ca70fb5578efef22cf4069a6090acc0f53c0e"},
-    {file = "lxml-4.9.2-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:d17bc7c2ccf49c478c5bdd447594e82692c74222698cfc9b5daae7ae7e90743b"},
-    {file = "lxml-4.9.2-cp37-cp37m-win32.whl", hash = "sha256:b64d891da92e232c36976c80ed7ebb383e3f148489796d8d31a5b6a677825efe"},
-    {file = "lxml-4.9.2-cp37-cp37m-win_amd64.whl", hash = "sha256:a0a336d6d3e8b234a3aae3c674873d8f0e720b76bc1d9416866c41cd9500ffb9"},
-    {file = "lxml-4.9.2-cp38-cp38-macosx_10_15_x86_64.whl", hash = "sha256:da4dd7c9c50c059aba52b3524f84d7de956f7fef88f0bafcf4ad7dde94a064e8"},
-    {file = "lxml-4.9.2-cp38-cp38-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_24_i686.whl", hash = "sha256:821b7f59b99551c69c85a6039c65b75f5683bdc63270fec660f75da67469ca24"},
-    {file = "lxml-4.9.2-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.manylinux_2_24_aarch64.whl", hash = "sha256:e5168986b90a8d1f2f9dc1b841467c74221bd752537b99761a93d2d981e04889"},
-    {file = "lxml-4.9.2-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_24_x86_64.whl", hash = "sha256:8e20cb5a47247e383cf4ff523205060991021233ebd6f924bca927fcf25cf86f"},
-    {file = "lxml-4.9.2-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:13598ecfbd2e86ea7ae45ec28a2a54fb87ee9b9fdb0f6d343297d8e548392c03"},
-    {file = "lxml-4.9.2-cp38-cp38-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:880bbbcbe2fca64e2f4d8e04db47bcdf504936fa2b33933efd945e1b429bea8c"},
-    {file = "lxml-4.9.2-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:7d2278d59425777cfcb19735018d897ca8303abe67cc735f9f97177ceff8027f"},
-    {file = "lxml-4.9.2-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:5344a43228767f53a9df6e5b253f8cdca7dfc7b7aeae52551958192f56d98457"},
-    {file = "lxml-4.9.2-cp38-cp38-win32.whl", hash = "sha256:925073b2fe14ab9b87e73f9a5fde6ce6392da430f3004d8b72cc86f746f5163b"},
-    {file = "lxml-4.9.2-cp38-cp38-win_amd64.whl", hash = "sha256:9b22c5c66f67ae00c0199f6055705bc3eb3fcb08d03d2ec4059a2b1b25ed48d7"},
-    {file = "lxml-4.9.2-cp39-cp39-macosx_10_15_x86_64.whl", hash = "sha256:5f50a1c177e2fa3ee0667a5ab79fdc6b23086bc8b589d90b93b4bd17eb0e64d1"},
-    {file = "lxml-4.9.2-cp39-cp39-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_24_i686.whl", hash = "sha256:090c6543d3696cbe15b4ac6e175e576bcc3f1ccfbba970061b7300b0c15a2140"},
-    {file = "lxml-4.9.2-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.manylinux_2_24_aarch64.whl", hash = "sha256:63da2ccc0857c311d764e7d3d90f429c252e83b52d1f8f1d1fe55be26827d1f4"},
-    {file = "lxml-4.9.2-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_24_x86_64.whl", hash = "sha256:5b4545b8a40478183ac06c073e81a5ce4cf01bf1734962577cf2bb569a5b3bbf"},
-    {file = "lxml-4.9.2-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:2e430cd2824f05f2d4f687701144556646bae8f249fd60aa1e4c768ba7018947"},
-    {file = "lxml-4.9.2-cp39-cp39-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:6804daeb7ef69e7b36f76caddb85cccd63d0c56dedb47555d2fc969e2af6a1a5"},
-    {file = "lxml-4.9.2-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:a6e441a86553c310258aca15d1c05903aaf4965b23f3bc2d55f200804e005ee5"},
-    {file = "lxml-4.9.2-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:ca34efc80a29351897e18888c71c6aca4a359247c87e0b1c7ada14f0ab0c0fb2"},
-    {file = "lxml-4.9.2-cp39-cp39-win32.whl", hash = "sha256:6b418afe5df18233fc6b6093deb82a32895b6bb0b1155c2cdb05203f583053f1"},
-    {file = "lxml-4.9.2-cp39-cp39-win_amd64.whl", hash = "sha256:f1496ea22ca2c830cbcbd473de8f114a320da308438ae65abad6bab7867fe38f"},
-    {file = "lxml-4.9.2-pp37-pypy37_pp73-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_24_i686.whl", hash = "sha256:b264171e3143d842ded311b7dccd46ff9ef34247129ff5bf5066123c55c2431c"},
-    {file = "lxml-4.9.2-pp37-pypy37_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_24_x86_64.whl", hash = "sha256:0dc313ef231edf866912e9d8f5a042ddab56c752619e92dfd3a2c277e6a7299a"},
-    {file = "lxml-4.9.2-pp38-pypy38_pp73-macosx_10_15_x86_64.whl", hash = "sha256:16efd54337136e8cd72fb9485c368d91d77a47ee2d42b057564aae201257d419"},
-    {file = "lxml-4.9.2-pp38-pypy38_pp73-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_24_i686.whl", hash = "sha256:0f2b1e0d79180f344ff9f321327b005ca043a50ece8713de61d1cb383fb8ac05"},
-    {file = "lxml-4.9.2-pp38-pypy38_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_24_x86_64.whl", hash = "sha256:7b770ed79542ed52c519119473898198761d78beb24b107acf3ad65deae61f1f"},
-    {file = "lxml-4.9.2-pp38-pypy38_pp73-win_amd64.whl", hash = "sha256:efa29c2fe6b4fdd32e8ef81c1528506895eca86e1d8c4657fda04c9b3786ddf9"},
-    {file = "lxml-4.9.2-pp39-pypy39_pp73-macosx_10_15_x86_64.whl", hash = "sha256:7e91ee82f4199af8c43d8158024cbdff3d931df350252288f0d4ce656df7f3b5"},
-    {file = "lxml-4.9.2-pp39-pypy39_pp73-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_24_i686.whl", hash = "sha256:b23e19989c355ca854276178a0463951a653309fb8e57ce674497f2d9f208746"},
-    {file = "lxml-4.9.2-pp39-pypy39_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_24_x86_64.whl", hash = "sha256:01d36c05f4afb8f7c20fd9ed5badca32a2029b93b1750f571ccc0b142531caf7"},
-    {file = "lxml-4.9.2-pp39-pypy39_pp73-win_amd64.whl", hash = "sha256:7b515674acfdcadb0eb5d00d8a709868173acece5cb0be3dd165950cbfdf5409"},
-    {file = "lxml-4.9.2.tar.gz", hash = "sha256:2455cfaeb7ac70338b3257f41e21f0724f4b5b0c0e7702da67ee6c3640835b67"},
+    {file = "lxml-4.9.3-cp27-cp27m-macosx_11_0_x86_64.whl", hash = "sha256:b0a545b46b526d418eb91754565ba5b63b1c0b12f9bd2f808c852d9b4b2f9b5c"},
+    {file = "lxml-4.9.3-cp27-cp27m-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:075b731ddd9e7f68ad24c635374211376aa05a281673ede86cbe1d1b3455279d"},
+    {file = "lxml-4.9.3-cp27-cp27m-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:1e224d5755dba2f4a9498e150c43792392ac9b5380aa1b845f98a1618c94eeef"},
+    {file = "lxml-4.9.3-cp27-cp27mu-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:c0781a98ff5e6586926293e59480b64ddd46282953203c76ae15dbbbf302e8bb"},
+    {file = "lxml-4.9.3-cp27-cp27mu-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:cef2502e7e8a96fe5ad686d60b49e1ab03e438bd9123987994528febd569868e"},
+    {file = "lxml-4.9.3-cp310-cp310-macosx_11_0_x86_64.whl", hash = "sha256:b86164d2cff4d3aaa1f04a14685cbc072efd0b4f99ca5708b2ad1b9b5988a991"},
+    {file = "lxml-4.9.3-cp310-cp310-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_24_i686.whl", hash = "sha256:42871176e7896d5d45138f6d28751053c711ed4d48d8e30b498da155af39aebd"},
+    {file = "lxml-4.9.3-cp310-cp310-manylinux_2_28_aarch64.whl", hash = "sha256:411007c0d88188d9f621b11d252cce90c4a2d1a49db6c068e3c16422f306eab8"},
+    {file = "lxml-4.9.3-cp310-cp310-manylinux_2_28_x86_64.whl", hash = "sha256:cd47b4a0d41d2afa3e58e5bf1f62069255aa2fd6ff5ee41604418ca925911d76"},
+    {file = "lxml-4.9.3-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:0e2cb47860da1f7e9a5256254b74ae331687b9672dfa780eed355c4c9c3dbd23"},
+    {file = "lxml-4.9.3-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:1247694b26342a7bf47c02e513d32225ededd18045264d40758abeb3c838a51f"},
+    {file = "lxml-4.9.3-cp310-cp310-win32.whl", hash = "sha256:cdb650fc86227eba20de1a29d4b2c1bfe139dc75a0669270033cb2ea3d391b85"},
+    {file = "lxml-4.9.3-cp310-cp310-win_amd64.whl", hash = "sha256:97047f0d25cd4bcae81f9ec9dc290ca3e15927c192df17331b53bebe0e3ff96d"},
+    {file = "lxml-4.9.3-cp311-cp311-macosx_11_0_universal2.whl", hash = "sha256:1f447ea5429b54f9582d4b955f5f1985f278ce5cf169f72eea8afd9502973dd5"},
+    {file = "lxml-4.9.3-cp311-cp311-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_24_i686.whl", hash = "sha256:57d6ba0ca2b0c462f339640d22882acc711de224d769edf29962b09f77129cbf"},
+    {file = "lxml-4.9.3-cp311-cp311-manylinux_2_28_aarch64.whl", hash = "sha256:71c52db65e4b56b8ddc5bb89fb2e66c558ed9d1a74a45ceb7dcb20c191c3df2f"},
+    {file = "lxml-4.9.3-cp311-cp311-manylinux_2_28_x86_64.whl", hash = "sha256:d73d8ecf8ecf10a3bd007f2192725a34bd62898e8da27eb9d32a58084f93962b"},
+    {file = "lxml-4.9.3-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:0a3d3487f07c1d7f150894c238299934a2a074ef590b583103a45002035be120"},
+    {file = "lxml-4.9.3-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:9e28c51fa0ce5674be9f560c6761c1b441631901993f76700b1b30ca6c8378d6"},
+    {file = "lxml-4.9.3-cp311-cp311-win32.whl", hash = "sha256:0bfd0767c5c1de2551a120673b72e5d4b628737cb05414f03c3277bf9bed3305"},
+    {file = "lxml-4.9.3-cp311-cp311-win_amd64.whl", hash = "sha256:25f32acefac14ef7bd53e4218fe93b804ef6f6b92ffdb4322bb6d49d94cad2bc"},
+    {file = "lxml-4.9.3-cp312-cp312-macosx_11_0_universal2.whl", hash = "sha256:d3ff32724f98fbbbfa9f49d82852b159e9784d6094983d9a8b7f2ddaebb063d4"},
+    {file = "lxml-4.9.3-cp312-cp312-manylinux_2_28_aarch64.whl", hash = "sha256:48d6ed886b343d11493129e019da91d4039826794a3e3027321c56d9e71505be"},
+    {file = "lxml-4.9.3-cp312-cp312-manylinux_2_28_x86_64.whl", hash = "sha256:9a92d3faef50658dd2c5470af249985782bf754c4e18e15afb67d3ab06233f13"},
+    {file = "lxml-4.9.3-cp312-cp312-musllinux_1_1_aarch64.whl", hash = "sha256:b4e4bc18382088514ebde9328da057775055940a1f2e18f6ad2d78aa0f3ec5b9"},
+    {file = "lxml-4.9.3-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:fc9b106a1bf918db68619fdcd6d5ad4f972fdd19c01d19bdb6bf63f3589a9ec5"},
+    {file = "lxml-4.9.3-cp312-cp312-win_amd64.whl", hash = "sha256:d37017287a7adb6ab77e1c5bee9bcf9660f90ff445042b790402a654d2ad81d8"},
+    {file = "lxml-4.9.3-cp35-cp35m-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:56dc1f1ebccc656d1b3ed288f11e27172a01503fc016bcabdcbc0978b19352b7"},
+    {file = "lxml-4.9.3-cp35-cp35m-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:578695735c5a3f51569810dfebd05dd6f888147a34f0f98d4bb27e92b76e05c2"},
+    {file = "lxml-4.9.3-cp35-cp35m-win32.whl", hash = "sha256:704f61ba8c1283c71b16135caf697557f5ecf3e74d9e453233e4771d68a1f42d"},
+    {file = "lxml-4.9.3-cp35-cp35m-win_amd64.whl", hash = "sha256:c41bfca0bd3532d53d16fd34d20806d5c2b1ace22a2f2e4c0008570bf2c58833"},
+    {file = "lxml-4.9.3-cp36-cp36m-macosx_11_0_x86_64.whl", hash = "sha256:64f479d719dc9f4c813ad9bb6b28f8390360660b73b2e4beb4cb0ae7104f1c12"},
+    {file = "lxml-4.9.3-cp36-cp36m-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_24_i686.whl", hash = "sha256:dd708cf4ee4408cf46a48b108fb9427bfa00b9b85812a9262b5c668af2533ea5"},
+    {file = "lxml-4.9.3-cp36-cp36m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:5c31c7462abdf8f2ac0577d9f05279727e698f97ecbb02f17939ea99ae8daa98"},
+    {file = "lxml-4.9.3-cp36-cp36m-manylinux_2_28_x86_64.whl", hash = "sha256:4930be26af26ac545c3dffb662521d4e6268352866956672231887d18f0eaab2"},
+    {file = "lxml-4.9.3-cp36-cp36m-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:4aec80cde9197340bc353d2768e2a75f5f60bacda2bab72ab1dc499589b3878c"},
+    {file = "lxml-4.9.3-cp36-cp36m-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:14e019fd83b831b2e61baed40cab76222139926b1fb5ed0e79225bc0cae14584"},
+    {file = "lxml-4.9.3-cp36-cp36m-musllinux_1_1_aarch64.whl", hash = "sha256:0c0850c8b02c298d3c7006b23e98249515ac57430e16a166873fc47a5d549287"},
+    {file = "lxml-4.9.3-cp36-cp36m-musllinux_1_1_x86_64.whl", hash = "sha256:aca086dc5f9ef98c512bac8efea4483eb84abbf926eaeedf7b91479feb092458"},
+    {file = "lxml-4.9.3-cp36-cp36m-win32.whl", hash = "sha256:50baa9c1c47efcaef189f31e3d00d697c6d4afda5c3cde0302d063492ff9b477"},
+    {file = "lxml-4.9.3-cp36-cp36m-win_amd64.whl", hash = "sha256:bef4e656f7d98aaa3486d2627e7d2df1157d7e88e7efd43a65aa5dd4714916cf"},
+    {file = "lxml-4.9.3-cp37-cp37m-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_24_i686.whl", hash = "sha256:46f409a2d60f634fe550f7133ed30ad5321ae2e6630f13657fb9479506b00601"},
+    {file = "lxml-4.9.3-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.manylinux_2_24_aarch64.whl", hash = "sha256:4c28a9144688aef80d6ea666c809b4b0e50010a2aca784c97f5e6bf143d9f129"},
+    {file = "lxml-4.9.3-cp37-cp37m-manylinux_2_28_x86_64.whl", hash = "sha256:53ace1c1fd5a74ef662f844a0413446c0629d151055340e9893da958a374f70d"},
+    {file = "lxml-4.9.3-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:17a753023436a18e27dd7769e798ce302963c236bc4114ceee5b25c18c52c693"},
+    {file = "lxml-4.9.3-cp37-cp37m-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:7d298a1bd60c067ea75d9f684f5f3992c9d6766fadbc0bcedd39750bf344c2f4"},
+    {file = "lxml-4.9.3-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:081d32421db5df44c41b7f08a334a090a545c54ba977e47fd7cc2deece78809a"},
+    {file = "lxml-4.9.3-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:23eed6d7b1a3336ad92d8e39d4bfe09073c31bfe502f20ca5116b2a334f8ec02"},
+    {file = "lxml-4.9.3-cp37-cp37m-win32.whl", hash = "sha256:1509dd12b773c02acd154582088820893109f6ca27ef7291b003d0e81666109f"},
+    {file = "lxml-4.9.3-cp37-cp37m-win_amd64.whl", hash = "sha256:120fa9349a24c7043854c53cae8cec227e1f79195a7493e09e0c12e29f918e52"},
+    {file = "lxml-4.9.3-cp38-cp38-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_24_i686.whl", hash = "sha256:4d2d1edbca80b510443f51afd8496be95529db04a509bc8faee49c7b0fb6d2cc"},
+    {file = "lxml-4.9.3-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.manylinux_2_24_aarch64.whl", hash = "sha256:8d7e43bd40f65f7d97ad8ef5c9b1778943d02f04febef12def25f7583d19baac"},
+    {file = "lxml-4.9.3-cp38-cp38-manylinux_2_28_x86_64.whl", hash = "sha256:6fc3c450eaa0b56f815c7b62f2b7fba7266c4779adcf1cece9e6deb1de7305ce"},
+    {file = "lxml-4.9.3-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:65299ea57d82fb91c7f019300d24050c4ddeb7c5a190e076b5f48a2b43d19c42"},
+    {file = "lxml-4.9.3-cp38-cp38-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:eadfbbbfb41b44034a4c757fd5d70baccd43296fb894dba0295606a7cf3124aa"},
+    {file = "lxml-4.9.3-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:3e9bdd30efde2b9ccfa9cb5768ba04fe71b018a25ea093379c857c9dad262c40"},
+    {file = "lxml-4.9.3-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:fcdd00edfd0a3001e0181eab3e63bd5c74ad3e67152c84f93f13769a40e073a7"},
+    {file = "lxml-4.9.3-cp38-cp38-win32.whl", hash = "sha256:57aba1bbdf450b726d58b2aea5fe47c7875f5afb2c4a23784ed78f19a0462574"},
+    {file = "lxml-4.9.3-cp38-cp38-win_amd64.whl", hash = "sha256:92af161ecbdb2883c4593d5ed4815ea71b31fafd7fd05789b23100d081ecac96"},
+    {file = "lxml-4.9.3-cp39-cp39-macosx_11_0_x86_64.whl", hash = "sha256:9bb6ad405121241e99a86efff22d3ef469024ce22875a7ae045896ad23ba2340"},
+    {file = "lxml-4.9.3-cp39-cp39-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_24_i686.whl", hash = "sha256:8ed74706b26ad100433da4b9d807eae371efaa266ffc3e9191ea436087a9d6a7"},
+    {file = "lxml-4.9.3-cp39-cp39-manylinux_2_28_aarch64.whl", hash = "sha256:303bf1edce6ced16bf67a18a1cf8339d0db79577eec5d9a6d4a80f0fb10aa2da"},
+    {file = "lxml-4.9.3-cp39-cp39-manylinux_2_28_x86_64.whl", hash = "sha256:5515edd2a6d1a5a70bfcdee23b42ec33425e405c5b351478ab7dc9347228f96e"},
+    {file = "lxml-4.9.3-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:690dafd0b187ed38583a648076865d8c229661ed20e48f2335d68e2cf7dc829d"},
+    {file = "lxml-4.9.3-cp39-cp39-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:b6420a005548ad52154c8ceab4a1290ff78d757f9e5cbc68f8c77089acd3c432"},
+    {file = "lxml-4.9.3-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:bb3bb49c7a6ad9d981d734ef7c7193bc349ac338776a0360cc671eaee89bcf69"},
+    {file = "lxml-4.9.3-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:d27be7405547d1f958b60837dc4c1007da90b8b23f54ba1f8b728c78fdb19d50"},
+    {file = "lxml-4.9.3-cp39-cp39-win32.whl", hash = "sha256:8df133a2ea5e74eef5e8fc6f19b9e085f758768a16e9877a60aec455ed2609b2"},
+    {file = "lxml-4.9.3-cp39-cp39-win_amd64.whl", hash = "sha256:4dd9a263e845a72eacb60d12401e37c616438ea2e5442885f65082c276dfb2b2"},
+    {file = "lxml-4.9.3-pp310-pypy310_pp73-manylinux_2_28_x86_64.whl", hash = "sha256:6689a3d7fd13dc687e9102a27e98ef33730ac4fe37795d5036d18b4d527abd35"},
+    {file = "lxml-4.9.3-pp37-pypy37_pp73-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_24_i686.whl", hash = "sha256:f6bdac493b949141b733c5345b6ba8f87a226029cbabc7e9e121a413e49441e0"},
+    {file = "lxml-4.9.3-pp37-pypy37_pp73-manylinux_2_28_x86_64.whl", hash = "sha256:c2006f5c8d28dee289f7020f721354362fa304acbaaf9745751ac4006650254b"},
+    {file = "lxml-4.9.3-pp38-pypy38_pp73-macosx_11_0_x86_64.whl", hash = "sha256:5c245b783db29c4e4fbbbfc9c5a78be496c9fea25517f90606aa1f6b2b3d5f7b"},
+    {file = "lxml-4.9.3-pp38-pypy38_pp73-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_24_i686.whl", hash = "sha256:4fb960a632a49f2f089d522f70496640fdf1218f1243889da3822e0a9f5f3ba7"},
+    {file = "lxml-4.9.3-pp38-pypy38_pp73-manylinux_2_28_x86_64.whl", hash = "sha256:9719fe17307a9e814580af1f5c6e05ca593b12fb7e44fe62450a5384dbf61b4b"},
+    {file = "lxml-4.9.3-pp38-pypy38_pp73-win_amd64.whl", hash = "sha256:3331bece23c9ee066e0fb3f96c61322b9e0f54d775fccefff4c38ca488de283a"},
+    {file = "lxml-4.9.3-pp39-pypy39_pp73-macosx_11_0_x86_64.whl", hash = "sha256:ed667f49b11360951e201453fc3967344d0d0263aa415e1619e85ae7fd17b4e0"},
+    {file = "lxml-4.9.3-pp39-pypy39_pp73-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_24_i686.whl", hash = "sha256:8b77946fd508cbf0fccd8e400a7f71d4ac0e1595812e66025bac475a8e811694"},
+    {file = "lxml-4.9.3-pp39-pypy39_pp73-manylinux_2_28_x86_64.whl", hash = "sha256:fe4bda6bd4340caa6e5cf95e73f8fea5c4bfc55763dd42f1b50a94c1b4a2fbd4"},
+    {file = "lxml-4.9.3-pp39-pypy39_pp73-win_amd64.whl", hash = "sha256:f3df3db1d336b9356dd3112eae5f5c2b8b377f3bc826848567f10bfddfee77e9"},
+    {file = "lxml-4.9.3.tar.gz", hash = "sha256:48628bd53a426c9eb9bc066a923acaa0878d1e86129fd5359aee99285f4eed9c"},
 ]
 
 [package.extras]
 cssselect = ["cssselect (>=0.7)"]
 html5 = ["html5lib"]
 htmlsoup = ["BeautifulSoup4"]
-source = ["Cython (>=0.29.7)"]
+source = ["Cython (>=0.29.35)"]
 
 [[package]]
 name = "lz4"
@@ -3230,14 +3234,14 @@ testing = ["coverage", "pyyaml"]
 
 [[package]]
 name = "markdown-it-py"
-version = "2.2.0"
+version = "3.0.0"
 description = "Python port of markdown-it. Markdown parsing, done right!"
 category = "main"
 optional = false
-python-versions = ">=3.7"
+python-versions = ">=3.8"
 files = [
-    {file = "markdown-it-py-2.2.0.tar.gz", hash = "sha256:7c9a5e412688bc771c67432cbfebcdd686c93ce6484913dccf06cb5a0bea35a1"},
-    {file = "markdown_it_py-2.2.0-py3-none-any.whl", hash = "sha256:5a35f8d1870171d9acc47b99612dc146129b631baf04970128b568f190d0cc30"},
+    {file = "markdown-it-py-3.0.0.tar.gz", hash = "sha256:e3f60a94fa066dc52ec76661e37c851cb232d92f9886b15cb560aaada2df8feb"},
+    {file = "markdown_it_py-3.0.0-py3-none-any.whl", hash = "sha256:355216845c60bd96232cd8d8c40e8f9765cc86f46880e43a8fd22dc1a1a8cab1"},
 ]
 
 [package.dependencies]
@@ -3252,7 +3256,7 @@ compare = ["commonmark (>=0.9,<1.0)", "markdown (>=3.4,<4.0)", "mistletoe (>=1.0
 linkify = ["linkify-it-py (>=1,<3)"]
 plugins = ["mdit-py-plugins"]
 profiling = ["gprof2dot"]
-rtd = ["attrs", "myst-parser", "pyyaml", "sphinx", "sphinx-copybutton", "sphinx-design", "sphinx_book_theme"]
+rtd = ["jupyter_sphinx", "mdit-py-plugins", "myst-parser", "pyyaml", "sphinx", "sphinx-copybutton", "sphinx-design", "sphinx_book_theme"]
 testing = ["coverage", "pytest", "pytest-cov", "pytest-regressions"]
 
 [[package]]
@@ -4624,14 +4628,14 @@ twisted = ["twisted"]
 
 [[package]]
 name = "prompt-toolkit"
-version = "3.0.38"
+version = "3.0.39"
 description = "Library for building powerful interactive command lines in Python"
 category = "dev"
 optional = false
 python-versions = ">=3.7.0"
 files = [
-    {file = "prompt_toolkit-3.0.38-py3-none-any.whl", hash = "sha256:45ea77a2f7c60418850331366c81cf6b5b9cf4c7fd34616f733c5427e6abbb1f"},
-    {file = "prompt_toolkit-3.0.38.tar.gz", hash = "sha256:23ac5d50538a9a38c8bde05fecb47d0b403ecd0662857a86f886f798563d5b9b"},
+    {file = "prompt_toolkit-3.0.39-py3-none-any.whl", hash = "sha256:9dffbe1d8acf91e3de75f3b544e4842382fc06c6babe903ac9acb74dc6e08d88"},
+    {file = "prompt_toolkit-3.0.39.tar.gz", hash = "sha256:04505ade687dc26dc4284b1ad19a83be2f2afe83e7a828ace0c72f3a1df72aac"},
 ]
 
 [package.dependencies]
@@ -5028,48 +5032,48 @@ files = [
 
 [[package]]
 name = "pydantic"
-version = "1.10.10"
+version = "1.10.11"
 description = "Data validation and settings management using python type hints"
 category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "pydantic-1.10.10-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:adad1ee4ab9888f12dac2529276704e719efcf472e38df7813f5284db699b4ec"},
-    {file = "pydantic-1.10.10-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:7a7db03339893feef2092ff7b1afc9497beed15ebd4af84c3042a74abce02d48"},
-    {file = "pydantic-1.10.10-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:67b3714b97ff84b2689654851c2426389bcabfac9080617bcf4306c69db606f6"},
-    {file = "pydantic-1.10.10-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:edfdf0a5abc5c9bf2052ebaec20e67abd52e92d257e4f2d30e02c354ed3e6030"},
-    {file = "pydantic-1.10.10-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:20a3b30fd255eeeb63caa9483502ba96b7795ce5bf895c6a179b3d909d9f53a6"},
-    {file = "pydantic-1.10.10-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:db4c7f7e60ca6f7d6c1785070f3e5771fcb9b2d88546e334d2f2c3934d949028"},
-    {file = "pydantic-1.10.10-cp310-cp310-win_amd64.whl", hash = "sha256:a2d5be50ac4a0976817144c7d653e34df2f9436d15555189f5b6f61161d64183"},
-    {file = "pydantic-1.10.10-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:566a04ba755e8f701b074ffb134ddb4d429f75d5dced3fbd829a527aafe74c71"},
-    {file = "pydantic-1.10.10-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:f79db3652ed743309f116ba863dae0c974a41b688242482638b892246b7db21d"},
-    {file = "pydantic-1.10.10-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c62376890b819bebe3c717a9ac841a532988372b7e600e76f75c9f7c128219d5"},
-    {file = "pydantic-1.10.10-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:4870f13a4fafd5bc3e93cff3169222534fad867918b188e83ee0496452978437"},
-    {file = "pydantic-1.10.10-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:990027e77cda6072a566e433b6962ca3b96b4f3ae8bd54748e9d62a58284d9d7"},
-    {file = "pydantic-1.10.10-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:8c40964596809eb616d94f9c7944511f620a1103d63d5510440ed2908fc410af"},
-    {file = "pydantic-1.10.10-cp311-cp311-win_amd64.whl", hash = "sha256:ea9eebc2ebcba3717e77cdeee3f6203ffc0e78db5f7482c68b1293e8cc156e5e"},
-    {file = "pydantic-1.10.10-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:762aa598f79b4cac2f275d13336b2dd8662febee2a9c450a49a2ab3bec4b385f"},
-    {file = "pydantic-1.10.10-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:6dab5219659f95e357d98d70577b361383057fb4414cfdb587014a5f5c595f7b"},
-    {file = "pydantic-1.10.10-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:f3d4ee957a727ccb5a36f1b0a6dbd9fad5dedd2a41eada99a8df55c12896e18d"},
-    {file = "pydantic-1.10.10-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:b69f9138dec566962ec65623c9d57bee44412d2fc71065a5f3ebb3820bdeee96"},
-    {file = "pydantic-1.10.10-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:7aa75d1bd9cc275cf9782f50f60cddaf74cbaae19b6ada2a28e737edac420312"},
-    {file = "pydantic-1.10.10-cp37-cp37m-win_amd64.whl", hash = "sha256:9f62a727f5c590c78c2d12fda302d1895141b767c6488fe623098f8792255fe5"},
-    {file = "pydantic-1.10.10-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:aac218feb4af73db8417ca7518fb3bade4534fcca6e3fb00f84966811dd94450"},
-    {file = "pydantic-1.10.10-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:88546dc10a40b5b52cae87d64666787aeb2878f9a9b37825aedc2f362e7ae1da"},
-    {file = "pydantic-1.10.10-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c41bbaae89e32fc582448e71974de738c055aef5ab474fb25692981a08df808a"},
-    {file = "pydantic-1.10.10-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:2b71bd504d1573b0b722ae536e8ffb796bedeef978979d076bf206e77dcc55a5"},
-    {file = "pydantic-1.10.10-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:e088e3865a2270ecbc369924cd7d9fbc565667d9158e7f304e4097ebb9cf98dd"},
-    {file = "pydantic-1.10.10-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:3403a090db45d4027d2344859d86eb797484dfda0706cf87af79ace6a35274ef"},
-    {file = "pydantic-1.10.10-cp38-cp38-win_amd64.whl", hash = "sha256:e0014e29637125f4997c174dd6167407162d7af0da73414a9340461ea8573252"},
-    {file = "pydantic-1.10.10-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:9965e49c6905840e526e5429b09e4c154355b6ecc0a2f05492eda2928190311d"},
-    {file = "pydantic-1.10.10-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:748d10ab6089c5d196e1c8be9de48274f71457b01e59736f7a09c9dc34f51887"},
-    {file = "pydantic-1.10.10-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:86936c383f7c38fd26d35107eb669c85d8f46dfceae873264d9bab46fe1c7dde"},
-    {file = "pydantic-1.10.10-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:7a26841be620309a9697f5b1ffc47dce74909e350c5315ccdac7a853484d468a"},
-    {file = "pydantic-1.10.10-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:409b810f387610cc7405ab2fa6f62bdf7ea485311845a242ebc0bd0496e7e5ac"},
-    {file = "pydantic-1.10.10-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:ce937a2a2c020bcad1c9fde02892392a1123de6dda906ddba62bfe8f3e5989a2"},
-    {file = "pydantic-1.10.10-cp39-cp39-win_amd64.whl", hash = "sha256:37ebddef68370e6f26243acc94de56d291e01227a67b2ace26ea3543cf53dd5f"},
-    {file = "pydantic-1.10.10-py3-none-any.whl", hash = "sha256:a5939ec826f7faec434e2d406ff5e4eaf1716eb1f247d68cd3d0b3612f7b4c8a"},
-    {file = "pydantic-1.10.10.tar.gz", hash = "sha256:3b8d5bd97886f9eb59260594207c9f57dce14a6f869c6ceea90188715d29921a"},
+    {file = "pydantic-1.10.11-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:ff44c5e89315b15ff1f7fdaf9853770b810936d6b01a7bcecaa227d2f8fe444f"},
+    {file = "pydantic-1.10.11-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:a6c098d4ab5e2d5b3984d3cb2527e2d6099d3de85630c8934efcfdc348a9760e"},
+    {file = "pydantic-1.10.11-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:16928fdc9cb273c6af00d9d5045434c39afba5f42325fb990add2c241402d151"},
+    {file = "pydantic-1.10.11-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:0588788a9a85f3e5e9ebca14211a496409cb3deca5b6971ff37c556d581854e7"},
+    {file = "pydantic-1.10.11-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:e9baf78b31da2dc3d3f346ef18e58ec5f12f5aaa17ac517e2ffd026a92a87588"},
+    {file = "pydantic-1.10.11-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:373c0840f5c2b5b1ccadd9286782852b901055998136287828731868027a724f"},
+    {file = "pydantic-1.10.11-cp310-cp310-win_amd64.whl", hash = "sha256:c3339a46bbe6013ef7bdd2844679bfe500347ac5742cd4019a88312aa58a9847"},
+    {file = "pydantic-1.10.11-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:08a6c32e1c3809fbc49debb96bf833164f3438b3696abf0fbeceb417d123e6eb"},
+    {file = "pydantic-1.10.11-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:a451ccab49971af043ec4e0d207cbc8cbe53dbf148ef9f19599024076fe9c25b"},
+    {file = "pydantic-1.10.11-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:5b02d24f7b2b365fed586ed73582c20f353a4c50e4be9ba2c57ab96f8091ddae"},
+    {file = "pydantic-1.10.11-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:3f34739a89260dfa420aa3cbd069fbcc794b25bbe5c0a214f8fb29e363484b66"},
+    {file = "pydantic-1.10.11-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:e297897eb4bebde985f72a46a7552a7556a3dd11e7f76acda0c1093e3dbcf216"},
+    {file = "pydantic-1.10.11-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:d185819a7a059550ecb85d5134e7d40f2565f3dd94cfd870132c5f91a89cf58c"},
+    {file = "pydantic-1.10.11-cp311-cp311-win_amd64.whl", hash = "sha256:4400015f15c9b464c9db2d5d951b6a780102cfa5870f2c036d37c23b56f7fc1b"},
+    {file = "pydantic-1.10.11-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:2417de68290434461a266271fc57274a138510dca19982336639484c73a07af6"},
+    {file = "pydantic-1.10.11-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:331c031ba1554b974c98679bd0780d89670d6fd6f53f5d70b10bdc9addee1713"},
+    {file = "pydantic-1.10.11-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:8268a735a14c308923e8958363e3a3404f6834bb98c11f5ab43251a4e410170c"},
+    {file = "pydantic-1.10.11-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:44e51ba599c3ef227e168424e220cd3e544288c57829520dc90ea9cb190c3248"},
+    {file = "pydantic-1.10.11-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:d7781f1d13b19700b7949c5a639c764a077cbbdd4322ed505b449d3ca8edcb36"},
+    {file = "pydantic-1.10.11-cp37-cp37m-win_amd64.whl", hash = "sha256:7522a7666157aa22b812ce14c827574ddccc94f361237ca6ea8bb0d5c38f1629"},
+    {file = "pydantic-1.10.11-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:bc64eab9b19cd794a380179ac0e6752335e9555d214cfcb755820333c0784cb3"},
+    {file = "pydantic-1.10.11-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:8dc77064471780262b6a68fe67e013298d130414d5aaf9b562c33987dbd2cf4f"},
+    {file = "pydantic-1.10.11-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:fe429898f2c9dd209bd0632a606bddc06f8bce081bbd03d1c775a45886e2c1cb"},
+    {file = "pydantic-1.10.11-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:192c608ad002a748e4a0bed2ddbcd98f9b56df50a7c24d9a931a8c5dd053bd3d"},
+    {file = "pydantic-1.10.11-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:ef55392ec4bb5721f4ded1096241e4b7151ba6d50a50a80a2526c854f42e6a2f"},
+    {file = "pydantic-1.10.11-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:41e0bb6efe86281623abbeeb0be64eab740c865388ee934cd3e6a358784aca6e"},
+    {file = "pydantic-1.10.11-cp38-cp38-win_amd64.whl", hash = "sha256:265a60da42f9f27e0b1014eab8acd3e53bd0bad5c5b4884e98a55f8f596b2c19"},
+    {file = "pydantic-1.10.11-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:469adf96c8e2c2bbfa655fc7735a2a82f4c543d9fee97bd113a7fb509bf5e622"},
+    {file = "pydantic-1.10.11-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:e6cbfbd010b14c8a905a7b10f9fe090068d1744d46f9e0c021db28daeb8b6de1"},
+    {file = "pydantic-1.10.11-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:abade85268cc92dff86d6effcd917893130f0ff516f3d637f50dadc22ae93999"},
+    {file = "pydantic-1.10.11-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:e9738b0f2e6c70f44ee0de53f2089d6002b10c33264abee07bdb5c7f03038303"},
+    {file = "pydantic-1.10.11-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:787cf23e5a0cde753f2eabac1b2e73ae3844eb873fd1f5bdbff3048d8dbb7604"},
+    {file = "pydantic-1.10.11-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:174899023337b9fc685ac8adaa7b047050616136ccd30e9070627c1aaab53a13"},
+    {file = "pydantic-1.10.11-cp39-cp39-win_amd64.whl", hash = "sha256:1954f8778489a04b245a1e7b8b22a9d3ea8ef49337285693cf6959e4b757535e"},
+    {file = "pydantic-1.10.11-py3-none-any.whl", hash = "sha256:008c5e266c8aada206d0627a011504e14268a62091450210eda7c07fabe6963e"},
+    {file = "pydantic-1.10.11.tar.gz", hash = "sha256:f66d479cf7eb331372c470614be6511eae96f1f120344c25f3f9bb59fb1b5528"},
 ]
 
 [package.dependencies]
@@ -5218,14 +5222,14 @@ diagrams = ["jinja2", "railroad-diagrams"]
 
 [[package]]
 name = "pypdf"
-version = "3.11.1"
+version = "3.12.0"
 description = "A pure-python PDF library capable of splitting, merging, cropping, and transforming PDF files"
 category = "main"
 optional = false
 python-versions = ">=3.6"
 files = [
-    {file = "pypdf-3.11.1-py3-none-any.whl", hash = "sha256:2afc8914355a784fb184f60ae82fe10f9b992aa0733b705f0746966e470f98bd"},
-    {file = "pypdf-3.11.1.tar.gz", hash = "sha256:198c4d0231525d0b730cbbd11a5fc7d9a2e410dfc8ae2928c8de000b7ef149c5"},
+    {file = "pypdf-3.12.0-py3-none-any.whl", hash = "sha256:826ad4681660394d7a5742fe8380168cf13058e27b826b7f5b798e994cb77b38"},
+    {file = "pypdf-3.12.0.tar.gz", hash = "sha256:cebac920db0698369f49c389018858a5436862bf3c45b64b10c55c008878db95"},
 ]
 
 [package.dependencies]
@@ -6598,25 +6602,22 @@ doc = ["reno", "sphinx", "tornado (>=4.5)"]
 
 [[package]]
 name = "textual"
-version = "0.28.1"
+version = "0.29.0"
 description = "Modern Text User Interface framework"
 category = "main"
 optional = true
 python-versions = ">=3.7,<4.0"
 files = [
-    {file = "textual-0.28.1-py3-none-any.whl", hash = "sha256:cb6f6230fea390178f8e727d2f9e542337a655549ea44331e22336da799a900f"},
-    {file = "textual-0.28.1.tar.gz", hash = "sha256:f63a873d810b5d01f7318d8eb8f706d530550f3a90a6892628d17d47ecefcd41"},
+    {file = "textual-0.29.0-py3-none-any.whl", hash = "sha256:949fd8f16a412404ba785605dda1e2fab8166656e4d29d4177ec63cd73ba83d4"},
+    {file = "textual-0.29.0.tar.gz", hash = "sha256:7eb87b6d007dc9bd08e00e893b860ecb7a11ca815c8866db39fe17ec547e2fcf"},
 ]
 
 [package.dependencies]
 importlib-metadata = ">=4.11.3"
-markdown-it-py = {version = ">=2.1.0,<3.0.0", extras = ["linkify", "plugins"]}
+markdown-it-py = {version = ">=2.1.0", extras = ["linkify", "plugins"]}
 rich = ">=13.3.3"
 typing-extensions = ">=4.4.0,<5.0.0"
 
-[package.extras]
-dev = ["aiohttp (>=3.8.1)", "click (>=8.1.2)", "msgpack (>=1.0.3)"]
-
 [[package]]
 name = "threadpoolctl"
 version = "3.1.0"
@@ -7045,14 +7046,14 @@ files = [
 
 [[package]]
 name = "types-pillow"
-version = "9.5.0.5"
+version = "9.5.0.6"
 description = "Typing stubs for Pillow"
 category = "dev"
 optional = false
 python-versions = "*"
 files = [
-    {file = "types-Pillow-9.5.0.5.tar.gz", hash = "sha256:de9877aa1e6226b6479459ca84df02fd7e999b970c79cfee3b8298840336e77c"},
-    {file = "types_Pillow-9.5.0.5-py3-none-any.whl", hash = "sha256:2b17f95c5c16e4962e4032bdb95494766a85569fa278ee21e5fcbbd318e9ccd2"},
+    {file = "types-Pillow-9.5.0.6.tar.gz", hash = "sha256:6a0cad40686e5c35fe7ada70f52bd3970395d31ece33486609e5420e820a9e4e"},
+    {file = "types_Pillow-9.5.0.6-py3-none-any.whl", hash = "sha256:1d238abaa9d529b04941d805b7f4d3f7df30702bb14521ec507617f117406fb4"},
 ]
 
 [[package]]
@@ -7830,4 +7831,4 @@ deploy = ["langchain-serve"]
 [metadata]
 lock-version = "2.0"
 python-versions = ">=3.9,<3.11"
-content-hash = "3b615d7e85c445b293174b2cb1d395e375edce224c0da51e03c3767c4892e662"
+content-hash = "279184bb96b8ace86f727cb35e32cbf8e6fc369683e28dd569f8defcc0c39a97"
diff --git a/pyproject.toml b/pyproject.toml
index a9df0a27a..c7ec8c4ce 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -48,7 +48,7 @@ psycopg2-binary = "^2.9.6"
 pyarrow = "^12.0.0"
 tiktoken = "~0.4.0"
 wikipedia = "^1.4.0"
-langchain-serve = { version = ">0.0.47", optional = true }
+langchain-serve = { version = ">0.0.51", optional = true }
 qdrant-client = "^1.3.0"
 websockets = "^10.3"
 weaviate-client = "^3.21.0"

From cb1ab1a79e37bd6ef4189f2dff67a2b11e4a5027 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 12:00:42 -0300
Subject: [PATCH 25/53] =?UTF-8?q?=F0=9F=93=9D=20docs(.env.example):=20add?=
 =?UTF-8?q?=20example=20.env=20file=20with=20langflow=5Fdatabase=5Furl=20s?=
 =?UTF-8?q?et=20to=20sqlite=20database=20URL=20The=20.env.example=20file?=
 =?UTF-8?q?=20is=20added=20to=20provide=20an=20example=20of=20how=20to=20c?=
 =?UTF-8?q?onfigure=20the=20.env=20file.=20It=20includes=20a=20commented?=
 =?UTF-8?q?=20out=20example=20of=20a=20PostgreSQL=20database=20URL=20and?=
 =?UTF-8?q?=20a=20new=20line=20is=20added=20with=20the=20langflow=5Fdataba?=
 =?UTF-8?q?se=5Furl=20set=20to=20a=20SQLite=20database=20URL.=20This=20all?=
 =?UTF-8?q?ows=20users=20to=20easily=20copy=20the=20file=20to=20.env=20and?=
 =?UTF-8?q?=20modify=20the=20values=20according=20to=20their=20needs.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.example | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .env.example

diff --git a/.env.example b/.env.example
new file mode 100644
index 000000000..22ac47a6f
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,8 @@
+# Description: Example of .env file
+# Usage: Copy this file to .env and change the values
+#        according to your needs
+#        Do not commit .env file to git
+#        Do not change .env.example file
+
+# langflow_database_url=postgresql://postgres:postgres@localhost:5432/langflow
+langflow_database_url=sqlite:///./langflow.db
\ No newline at end of file

From 4b1fb4a49edab2cf705bd0244f90af8904243f3f Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 12:09:53 -0300
Subject: [PATCH 26/53] =?UTF-8?q?=F0=9F=90=9B=20fix(utils.py):=20rename=20?=
 =?UTF-8?q?`cache=5Fclass`=20variable=20to=20`cache=5Ftype`=20for=20clarit?=
 =?UTF-8?q?y=20and=20consistency=20=F0=9F=94=A7=20chore(utils.py):=20refac?=
 =?UTF-8?q?tor=20`setup=5Fllm=5Fcaching`=20to=20extract=20cache=20setup=20?=
 =?UTF-8?q?logic=20into=20a=20separate=20function=20for=20better=20modular?=
 =?UTF-8?q?ity=20and=20readability=20The=20variable=20`cache=5Fclass`=20ha?=
 =?UTF-8?q?s=20been=20renamed=20to=20`cache=5Ftype`=20to=20improve=20clari?=
 =?UTF-8?q?ty=20and=20consistency=20with=20the=20naming=20conventions.=20T?=
 =?UTF-8?q?he=20`setup=5Fllm=5Fcaching`=20function=20has=20been=20refactor?=
 =?UTF-8?q?ed=20to=20extract=20the=20cache=20setup=20logic=20into=20a=20se?=
 =?UTF-8?q?parate=20function=20called=20`set=5Flangchain=5Fcache`.=20This?=
 =?UTF-8?q?=20improves=20modularity=20and=20readability=20of=20the=20code.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/interface/utils.py | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/backend/langflow/interface/utils.py b/src/backend/langflow/interface/utils.py
index ff89e92bf..1ab2b4ce5 100644
--- a/src/backend/langflow/interface/utils.py
+++ b/src/backend/langflow/interface/utils.py
@@ -66,17 +66,24 @@ def extract_input_variables_from_prompt(prompt: str) -> list[str]:
 def setup_llm_caching():
     """Setup LLM caching."""
 
+    from langflow.settings import settings
+
     try:
-        import langchain
-        from langflow.settings import settings
-        from langflow.interface.importing.utils import import_class
-
-        cache_class = import_class(f"langchain.cache.{settings.cache}")
-
-        logger.debug(f"Setting up LLM caching with {cache_class.__name__}")
-        langchain.llm_cache = cache_class()
-        logger.info(f"LLM caching setup with {cache_class.__name__}")
+        set_langchain_cache(settings)
     except ImportError:
         logger.warning(f"Could not import {settings.cache}. ")
     except Exception as exc:
         logger.warning(f"Could not setup LLM caching. Error: {exc}")
+
+
+# TODO Rename this here and in `setup_llm_caching`
+def set_langchain_cache(settings):
+    import langchain
+    from langflow.interface.importing.utils import import_class
+
+    cache_type = os.getenv("LANGFLOW_LANGCHAIN_CACHE")
+    cache_class = import_class(f"langchain.cache.{cache_type or settings.cache}")
+
+    logger.debug(f"Setting up LLM caching with {cache_class.__name__}")
+    langchain.llm_cache = cache_class()
+    logger.info(f"LLM caching setup with {cache_class.__name__}")

From 8214b22c098f78195156af45321e45d46c5eb436 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 12:10:09 -0300
Subject: [PATCH 27/53] =?UTF-8?q?=F0=9F=94=A7=20chore(=5F=5Fmain=5F=5F.py)?=
 =?UTF-8?q?:=20update=20cache=20and=20database=20environment=20variable=20?=
 =?UTF-8?q?names=20for=20clarity=20and=20consistency=20The=20`cache`=20opt?=
 =?UTF-8?q?ion=20has=20been=20changed=20to=20use=20the=20`LANGFLOW=5FLANGC?=
 =?UTF-8?q?HAIN=5FCACHE`=20environment=20variable=20instead=20of=20`LANGCH?=
 =?UTF-8?q?AIN=5FCACHE`=20for=20clarity=20and=20consistency.=20Similarly,?=
 =?UTF-8?q?=20the=20`database=5Furl`=20option=20now=20uses=20the=20`LANGFL?=
 =?UTF-8?q?OW=5FDATABASE=5FURL`=20environment=20variable=20instead=20of=20?=
 =?UTF-8?q?the=20previous=20behavior=20of=20using=20a=20local=20SQLite=20d?=
 =?UTF-8?q?atabase=20by=20default.=20This=20change=20allows=20for=20more?=
 =?UTF-8?q?=20flexibility=20in=20configuring=20the=20cache=20and=20databas?=
 =?UTF-8?q?e=20connections.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/__main__.py | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/backend/langflow/__main__.py b/src/backend/langflow/__main__.py
index a8dab586b..2780ff09e 100644
--- a/src/backend/langflow/__main__.py
+++ b/src/backend/langflow/__main__.py
@@ -107,8 +107,8 @@ def serve(
     ),
     log_level: str = typer.Option("critical", help="Logging level."),
     log_file: Path = typer.Option("logs/langflow.log", help="Path to the log file."),
-    cache: str = typer.Argument(
-        envvar="LANGCHAIN_CACHE",
+    cache: str = typer.Option(
+        envvar="LANGFLOW_LANGCHAIN_CACHE",
         help="Type of cache to use. (InMemoryCache, SQLiteCache)",
         default="SQLiteCache",
     ),
@@ -117,6 +117,7 @@ def serve(
     database_url: str = typer.Option(
         None,
         help="Database URL to connect to. If not provided, a local SQLite database will be used.",
+        envvar="LANGFLOW_DATABASE_URL",
     ),
     path: str = typer.Option(
         None,

From 95b8555503ae2c5166ed837b45c3f5887149789e Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 12:10:32 -0300
Subject: [PATCH 28/53] =?UTF-8?q?=F0=9F=90=9B=20fix(settings.py):=20change?=
 =?UTF-8?q?=20environment=20variable=20name=20from=20LANGFLOW=5FDATABASE?=
 =?UTF-8?q?=5FURL=20to=20langflow=5Fdatabase=5Furl=20for=20consistency=20T?=
 =?UTF-8?q?he=20environment=20variable=20name=20is=20changed=20from=20LANG?=
 =?UTF-8?q?FLOW=5FDATABASE=5FURL=20to=20langflow=5Fdatabase=5Furl=20to=20m?=
 =?UTF-8?q?aintain=20consistency=20with=20the=20naming=20conventions=20use?=
 =?UTF-8?q?d=20in=20the=20codebase.=20This=20ensures=20that=20the=20code?=
 =?UTF-8?q?=20is=20more=20readable=20and=20easier=20to=20understand.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/settings.py | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/backend/langflow/settings.py b/src/backend/langflow/settings.py
index ed4830ceb..df00a2c27 100644
--- a/src/backend/langflow/settings.py
+++ b/src/backend/langflow/settings.py
@@ -29,8 +29,10 @@ class Settings(BaseSettings):
     @root_validator(pre=True)
     def set_database_url(cls, values):
         if "database_url" not in values:
-            logger.debug("No database_url provided, trying DATABASE_URL env variable")
-            if langflow_database_url := os.getenv("langflow_database_url"):
+            logger.debug(
+                "No database_url provided, trying LANGFLOW_DATABASE_URL env variable"
+            )
+            if langflow_database_url := os.getenv("LANGFLOW_DATABASE_URL"):
                 values["database_url"] = langflow_database_url
             else:
                 logger.debug("No DATABASE_URL env variable, using sqlite database")
@@ -40,7 +42,6 @@ class Settings(BaseSettings):
     class Config:
         validate_assignment = True
         extra = "ignore"
-        env_prefix = "langflow_"
 
     @root_validator(allow_reuse=True)
     def validate_lists(cls, values):

From 29f840aed98909f6e9c4cd59119016737ddc45c1 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 13:06:50 -0300
Subject: [PATCH 29/53] =?UTF-8?q?=F0=9F=94=A7=20chore(.env.example):=20upd?=
 =?UTF-8?q?ate=20example=20values=20and=20add=20new=20configuration=20opti?=
 =?UTF-8?q?ons=20The=20.env.example=20file=20has=20been=20updated=20to=20i?=
 =?UTF-8?q?nclude=20example=20values=20and=20new=20configuration=20options?=
 =?UTF-8?q?.=20The=20LANGFLOW=5FDATABASE=5FURL=20example=20has=20been=20up?=
 =?UTF-8?q?dated=20to=20include=20both=20Postgres=20and=20SQLite=20example?=
 =?UTF-8?q?s.=20New=20configuration=20options=20have=20been=20added=20for?=
 =?UTF-8?q?=20cache=20type,=20server=20host,=20worker=20processes,=20serve?=
 =?UTF-8?q?r=20port,=20logging=20level,=20log=20file=20path,=20frontend=20?=
 =?UTF-8?q?directory=20path,=20whether=20to=20open=20the=20browser=20after?=
 =?UTF-8?q?=20starting=20the=20server,=20and=20whether=20to=20remove=20API?=
 =?UTF-8?q?=20keys=20from=20the=20projects=20saved=20in=20the=20database.?=
 =?UTF-8?q?=20These=20changes=20provide=20more=20flexibility=20and=20custo?=
 =?UTF-8?q?mization=20options=20for=20the=20application.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.example | 43 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/.env.example b/.env.example
index 22ac47a6f..6c6d2f667 100644
--- a/.env.example
+++ b/.env.example
@@ -4,5 +4,44 @@
 #        Do not commit .env file to git
 #        Do not change .env.example file
 
-# langflow_database_url=postgresql://postgres:postgres@localhost:5432/langflow
-langflow_database_url=sqlite:///./langflow.db
\ No newline at end of file
+# Database URL
+# Postgres example: LANGFLOW_DATABASE_URL=postgresql://postgres:postgres@localhost:5432/langflow
+# SQLite example:
+LANGFLOW_DATABASE_URL=sqlite:///./langflow.db
+
+# Cache type
+LANGFLOW_LANGCHAIN_CACHE=SQLiteCache
+
+# Server host
+# Example: LANGFLOW_HOST=127.0.0.1
+LANGFLOW_HOST=
+
+# Worker processes
+# Example: LANGFLOW_WORKERS=1
+LANGFLOW_WORKERS=
+
+# Server port
+# Example: LANGFLOW_PORT=7860
+LANGFLOW_PORT=
+
+# Logging level
+# Example: LANGFLOW_LOG_LEVEL=critical
+LANGFLOW_LOG_LEVEL=
+
+# Path to the log file
+# Example: LANGFLOW_LOG_FILE=logs/langflow.log
+LANGFLOW_LOG_FILE=
+
+# Path to the frontend directory containing build files
+# Example: LANGFLOW_FRONTEND_PATH=/path/to/frontend/build/files
+LANGFLOW_FRONTEND_PATH=
+
+# Whether to open the browser after starting the server
+# Values: true, false
+# Example: LANGFLOW_OPEN_BROWSER=true
+LANGFLOW_OPEN_BROWSER=
+
+# Whether to remove API keys from the projects saved in the database
+# Values: true, false
+# Example: LANGFLOW_REMOVE_API_KEYS=false
+LANGFLOW_REMOVE_API_KEYS=

From 70b634cbcff2eae3de50fbb9069ce9d2034cd95b Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 13:07:02 -0300
Subject: [PATCH 30/53] =?UTF-8?q?=F0=9F=94=A7=20chore(=5F=5Fmain=5F=5F.py)?=
 =?UTF-8?q?:=20refactor=20serve=20function=20to=20use=20environment=20vari?=
 =?UTF-8?q?ables=20for=20configuration=20options=20=F0=9F=8C=9F=20feat(=5F?=
 =?UTF-8?q?=5Fmain=5F=5F.py):=20add=20support=20for=20environment=20variab?=
 =?UTF-8?q?les=20to=20configure=20serve=20function=20The=20serve=20functio?=
 =?UTF-8?q?n=20in=20=5F=5Fmain=5F=5F.py=20has=20been=20refactored=20to=20u?=
 =?UTF-8?q?se=20environment=20variables=20for=20configuration=20options.?=
 =?UTF-8?q?=20The=20following=20configuration=20options=20now=20support=20?=
 =?UTF-8?q?environment=20variables:=20host,=20workers,=20port,=20log=5Flev?=
 =?UTF-8?q?el,=20log=5Ffile,=20path,=20open=5Fbrowser,=20and=20remove=5Fap?=
 =?UTF-8?q?i=5Fkeys.=20This=20change=20allows=20for=20greater=20flexibilit?=
 =?UTF-8?q?y=20and=20easier=20configuration=20of=20the=20serve=20function?=
 =?UTF-8?q?=20by=20using=20environment=20variables=20instead=20of=20comman?=
 =?UTF-8?q?d=20line=20options.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/__main__.py | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/backend/langflow/__main__.py b/src/backend/langflow/__main__.py
index 2780ff09e..15005585c 100644
--- a/src/backend/langflow/__main__.py
+++ b/src/backend/langflow/__main__.py
@@ -96,17 +96,25 @@ def serve_on_jcloud():
 
 @app.command()
 def serve(
-    host: str = typer.Option("127.0.0.1", help="Host to bind the server to."),
-    workers: int = typer.Option(1, help="Number of worker processes."),
+    host: str = typer.Option(
+        "127.0.0.1", help="Host to bind the server to.", envvar="LANGFLOW_HOST"
+    ),
+    workers: int = typer.Option(
+        1, help="Number of worker processes.", envvar="LANGFLOW_WORKERS"
+    ),
     timeout: int = typer.Option(60, help="Worker timeout in seconds."),
-    port: int = typer.Option(7860, help="Port to listen on."),
+    port: int = typer.Option(7860, help="Port to listen on.", envvar="LANGFLOW_PORT"),
     config: str = typer.Option("config.yaml", help="Path to the configuration file."),
     # .env file param
     env_file: Path = typer.Option(
         ".env", help="Path to the .env file containing environment variables."
     ),
-    log_level: str = typer.Option("critical", help="Logging level."),
-    log_file: Path = typer.Option("logs/langflow.log", help="Path to the log file."),
+    log_level: str = typer.Option(
+        "critical", help="Logging level.", envvar="LANGFLOW_LOG_LEVEL"
+    ),
+    log_file: Path = typer.Option(
+        "logs/langflow.log", help="Path to the log file.", envvar="LANGFLOW_LOG_FILE"
+    ),
     cache: str = typer.Option(
         envvar="LANGFLOW_LANGCHAIN_CACHE",
         help="Type of cache to use. (InMemoryCache, SQLiteCache)",
@@ -122,12 +130,17 @@ def serve(
     path: str = typer.Option(
         None,
         help="Path to the frontend directory containing build files. This is for development purposes only.",
+        envvar="LANGFLOW_FRONTEND_PATH",
     ),
     open_browser: bool = typer.Option(
-        True, help="Open the browser after starting the server."
+        True,
+        help="Open the browser after starting the server.",
+        envvar="LANGFLOW_OPEN_BROWSER",
     ),
     remove_api_keys: bool = typer.Option(
-        False, help="Remove API keys from the projects saved in the database."
+        False,
+        help="Remove API keys from the projects saved in the database.",
+        envvar="LANGFLOW_REMOVE_API_KEYS",
     ),
 ):
     """

From 611cb7f57c0876be9789929896bfee10ca41af40 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 13:07:16 -0300
Subject: [PATCH 31/53] =?UTF-8?q?=F0=9F=93=9D=20docs(README.md):=20Add=20C?=
 =?UTF-8?q?LI=20usage=20and=20environment=20variables=20sections=20to=20th?=
 =?UTF-8?q?e=20README=20The=20README=20file=20now=20includes=20a=20new=20s?=
 =?UTF-8?q?ection=20that=20provides=20information=20on=20how=20to=20use=20?=
 =?UTF-8?q?the=20command-line=20interface=20(CLI)=20of=20Langflow.=20It=20?=
 =?UTF-8?q?explains=20the=20available=20options=20and=20their=20usage.=20A?=
 =?UTF-8?q?dditionally,=20a=20section=20on=20environment=20variables=20is?=
 =?UTF-8?q?=20added,=20which=20explains=20how=20to=20configure=20CLI=20opt?=
 =?UTF-8?q?ions=20using=20environment=20variables.=20This=20provides=20use?=
 =?UTF-8?q?rs=20with=20more=20flexibility=20in=20customizing=20the=20behav?=
 =?UTF-8?q?ior=20of=20the=20Langflow=20server.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 43 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6d995e8c2..6c8d5e30b 100644
--- a/README.md
+++ b/README.md
@@ -41,9 +41,50 @@ python -m langflow
 ```
 or
 ```shell
-langflow
+langflow # or langflow --help
 ```
 
+
+# Command Line Interface (CLI)
+
+Langflow provides a command-line interface (CLI) for easy management and configuration of the server.
+
+## CLI Usage
+
+You can run the Langflow using the following command:
+
+```shell
+langflow [OPTIONS]
+```
+
+Each option is detailed below:
+
+- `--help`: Displays all available options.
+- `--host`: Defines the host to bind the server to. Can be set using the `LANGFLOW_HOST` environment variable. The default is `127.0.0.1`.
+- `--workers`: Sets the number of worker processes. Can be set using the `LANGFLOW_WORKERS` environment variable. The default is `1`.
+- `--timeout`: Sets the worker timeout in seconds. The default is `60`.
+- `--port`: Sets the port to listen on. Can be set using the `LANGFLOW_PORT` environment variable. The default is `7860`.
+- `--config`: Defines the path to the configuration file. The default is `config.yaml`.
+- `--env-file`: Specifies the path to the .env file containing environment variables. The default is `.env`.
+- `--log-level`: Defines the logging level. Can be set using the `LANGFLOW_LOG_LEVEL` environment variable. The default is `critical`.
+- `--log-file`: Specifies the path to the log file. Can be set using the `LANGFLOW_LOG_FILE` environment variable. The default is `logs/langflow.log`.
+- `--cache`: Selects the type of cache to use. Options are `InMemoryCache` and `SQLiteCache`. Can be set using the `LANGFLOW_LANGCHAIN_CACHE` environment variable. The default is `SQLiteCache`.
+- `--jcloud/--no-jcloud`: Toggles the option to deploy on Jina AI Cloud. The default is `no-jcloud`.
+- `--dev/--no-dev`: Toggles the development mode. The default is `no-dev`.
+- `--database-url`: Sets the database URL to connect to. If not provided, a local SQLite database will be used. Can be set using the `LANGFLOW_DATABASE_URL` environment variable.
+- `--path`: Specifies the path to the frontend directory containing build files. This option is for development purposes only. Can be set using the `LANGFLOW_FRONTEND_PATH` environment variable.
+- `--open-browser/--no-open-browser`: Toggles the option to open the browser after starting the server. Can be set using the `LANGFLOW_OPEN_BROWSER` environment variable. The default is `open-browser`.
+- `--remove-api-keys/--no-remove-api-keys`: Toggles the option to remove API keys from the projects saved in the database. Can be set using the `LANGFLOW_REMOVE_API_KEYS` environment variable. The default is `no-remove-api-keys`.
+- `--install-completion [bash|zsh|fish|powershell|pwsh]`: Installs completion for the specified shell.
+- `--show-completion [bash|zsh|fish|powershell|pwsh]`: Shows completion for the specified shell, allowing you to copy it or customize the installation.
+
+## Environment Variables
+
+You can configure many of the CLI options using environment variables. These can be exported in your operating system or added to a `.env` file and loaded using the `--env-file` option.
+
+A sample `.env` file named `.env.example` is included with the project. Copy this file to a new file named `.env` and replace the example values with your actual settings. If you're setting values in both your OS and the `.env` file, the `.env` settings will take precedence.
+
+
 ### Deploy Langflow on Google Cloud Platform
 
 Follow our step-by-step guide to deploy Langflow on Google Cloud Platform (GCP) using Google Cloud Shell. The guide is available in the [**Langflow in Google Cloud Platform**](GCP_DEPLOYMENT.md) document.

From f7515eb7bdfd03d45a962435d867b67421a6fcf6 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 14:45:28 -0300
Subject: [PATCH 32/53] =?UTF-8?q?=F0=9F=93=9A=20docs(README.md):=20update?=
 =?UTF-8?q?=20table=20of=20contents=20and=20headings=20for=20better=20orga?=
 =?UTF-8?q?nization=20and=20readability=20=F0=9F=94=A7=20chore(README.md):?=
 =?UTF-8?q?=20reformat=20and=20update=20CLI=20section=20for=20clarity=20an?=
 =?UTF-8?q?d=20consistency=20The=20README.md=20file=20has=20been=20updated?=
 =?UTF-8?q?=20to=20improve=20the=20organization=20and=20readability=20of?=
 =?UTF-8?q?=20the=20document.=20The=20table=20of=20contents=20has=20been?=
 =?UTF-8?q?=20updated=20to=20include=20all=20relevant=20sections.=20Headin?=
 =?UTF-8?q?gs=20have=20been=20adjusted=20to=20provide=20a=20clear=20hierar?=
 =?UTF-8?q?chy=20and=20improve=20navigation.=20The=20CLI=20section=20has?=
 =?UTF-8?q?=20been=20reformatted=20and=20updated=20to=20provide=20clearer?=
 =?UTF-8?q?=20instructions=20and=20explanations.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 6c8d5e30b..b1bcbad6a 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,22 @@
 <p>
 </p>
 
-## 📦 Installation
+# Table of Contents
+- [📦 Installation](#-installation)
+    - [Locally](#locally)
+- [🖥️ Command Line Interface (CLI)](#️-command-line-interface-cli)
+    - [Usage](#usage)
+    - [Environment Variables](#environment-variables)
+- [Deployment](#deployment)
+    - [Deploy Langflow on Google Cloud Platform](#deploy-langflow-on-google-cloud-platform)
+    - [Deploy Langflow on Jina AI Cloud](#deploy-langflow-on-jina-ai-cloud)
+      - [API Usage](#api-usage)
+- [🎨 Creating Flows](#-creating-flows)
+- [👋 Contributing](#-contributing)
+- [📄 License](#-license)
+
+
+# 📦 Installation
 ### <b>Locally</b>
 You can install LangFlow from pip:
 
@@ -45,11 +60,11 @@ langflow # or langflow --help
 ```
 
 
-# Command Line Interface (CLI)
+# 🖥️ Command Line Interface (CLI)
 
-Langflow provides a command-line interface (CLI) for easy management and configuration of the server.
+Langflow provides a command-line interface (CLI) for easy management and configuration.
 
-## CLI Usage
+### Usage
 
 You can run the Langflow using the following command:
 
@@ -78,12 +93,13 @@ Each option is detailed below:
 - `--install-completion [bash|zsh|fish|powershell|pwsh]`: Installs completion for the specified shell.
 - `--show-completion [bash|zsh|fish|powershell|pwsh]`: Shows completion for the specified shell, allowing you to copy it or customize the installation.
 
-## Environment Variables
+### Environment Variables
 
 You can configure many of the CLI options using environment variables. These can be exported in your operating system or added to a `.env` file and loaded using the `--env-file` option.
 
 A sample `.env` file named `.env.example` is included with the project. Copy this file to a new file named `.env` and replace the example values with your actual settings. If you're setting values in both your OS and the `.env` file, the `.env` settings will take precedence.
 
+# Deployment
 
 ### Deploy Langflow on Google Cloud Platform
 

From 08bc992d6364e1f57b29359756f38660d456efa8 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 14:57:48 -0300
Subject: [PATCH 33/53] =?UTF-8?q?=F0=9F=94=96=20chore(pyproject.toml):=20u?=
 =?UTF-8?q?pdate=20package=20version=20to=200.2.12=20The=20package=20versi?=
 =?UTF-8?q?on=20has=20been=20updated=20from=200.2.11=20to=200.2.12.=20This?=
 =?UTF-8?q?=20change=20is=20made=20to=20reflect=20the=20latest=20changes?=
 =?UTF-8?q?=20and=20improvements=20in=20the=20package.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 poetry.lock    | 22 +++++++++++-----------
 pyproject.toml |  2 +-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/poetry.lock b/poetry.lock
index 49b44c78a..dd4e1116e 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -170,14 +170,14 @@ typing-extensions = ">=4.1.1"
 
 [[package]]
 name = "anyio"
-version = "3.7.0"
+version = "3.7.1"
 description = "High level compatibility layer for multiple asynchronous event loop implementations"
 category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "anyio-3.7.0-py3-none-any.whl", hash = "sha256:eddca883c4175f14df8aedce21054bfca3adb70ffe76a9f607aef9d7fa2ea7f0"},
-    {file = "anyio-3.7.0.tar.gz", hash = "sha256:275d9973793619a5374e1c89a4f4ad3f4b0a5510a2b5b939444bee8f4c4d37ce"},
+    {file = "anyio-3.7.1-py3-none-any.whl", hash = "sha256:91dee416e570e92c64041bd18b900d1d6fa78dff7048769ce5ac5ddad004fbb5"},
+    {file = "anyio-3.7.1.tar.gz", hash = "sha256:44a3c9aba0f5defa43261a8b3efb97891f2bd7d804e0e1f56419befa1adfc780"},
 ]
 
 [package.dependencies]
@@ -186,7 +186,7 @@ idna = ">=2.8"
 sniffio = ">=1.1"
 
 [package.extras]
-doc = ["Sphinx (>=6.1.0)", "packaging", "sphinx-autodoc-typehints (>=1.2.0)", "sphinx-rtd-theme", "sphinxcontrib-jquery"]
+doc = ["Sphinx", "packaging", "sphinx-autodoc-typehints (>=1.2.0)", "sphinx-rtd-theme (>=1.2.2)", "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)"]
 
@@ -1609,14 +1609,14 @@ grpcio-gcp = ["grpcio-gcp (>=0.2.2,<1.0.dev0)"]
 
 [[package]]
 name = "google-api-python-client"
-version = "2.91.0"
+version = "2.92.0"
 description = "Google API Client Library for Python"
 category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "google-api-python-client-2.91.0.tar.gz", hash = "sha256:d9385ad6e7f95eecd40f7c81e3abfe4b6ad3a84f2c16bcdb66fb7b8dd814ed56"},
-    {file = "google_api_python_client-2.91.0-py2.py3-none-any.whl", hash = "sha256:6959d21d4b20c0f65c69662ca7b6a8a02fc08f3e7f72d70b28ae3e6e3a5f9ab2"},
+    {file = "google-api-python-client-2.92.0.tar.gz", hash = "sha256:f38a6e106a7417719715506d36f0a233ec253335e422bda311352866a86c4187"},
+    {file = "google_api_python_client-2.92.0-py2.py3-none-any.whl", hash = "sha256:e0b74ed5fa9bdb07a66fb030d3f4cae550ed1c07e23600d86450d3c3c5efae51"},
 ]
 
 [package.dependencies]
@@ -1761,14 +1761,14 @@ grpc = ["grpcio (>=1.38.0,<2.0dev)"]
 
 [[package]]
 name = "google-cloud-resource-manager"
-version = "1.10.1"
+version = "1.10.2"
 description = "Google Cloud Resource Manager API client library"
 category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "google-cloud-resource-manager-1.10.1.tar.gz", hash = "sha256:c974fb6f9810476cf7b63ea89394c1a8df47f7f2dc2303e728bb74b500bcde67"},
-    {file = "google_cloud_resource_manager-1.10.1-py2.py3-none-any.whl", hash = "sha256:41a2204532f084c707fde0bc1a9bc95c7e0b739d7072dd0b8a25106667a56184"},
+    {file = "google-cloud-resource-manager-1.10.2.tar.gz", hash = "sha256:9a7bdd0347ad553376cc66ad317c5223d1ae04bdcf74edcbfcd12605cff7b510"},
+    {file = "google_cloud_resource_manager-1.10.2-py2.py3-none-any.whl", hash = "sha256:9e074c28326bd1632f1a270c20cfea1ffe98f49cf821033e65bdac55661ffbd5"},
 ]
 
 [package.dependencies]
@@ -7832,4 +7832,4 @@ deploy = ["langchain-serve"]
 [metadata]
 lock-version = "2.0"
 python-versions = ">=3.9,<3.11"
-content-hash = "814dc6b89b345e3ea08c7b7dc1fb29e3f8484070e3ad67030eb67566b33f12b0"
+content-hash = "e25e43fde8f96f57beab702ac4c51cb3e569b81f85c540a7b4b5fb7b6388d04e"
diff --git a/pyproject.toml b/pyproject.toml
index 4960e97c5..dbd60f4c1 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langflow"
-version = "0.2.11"
+version = "0.2.12"
 description = "A Python package with a built-in web application"
 authors = ["Logspace <contact@logspace.ai>"]
 maintainers = [

From 513812900385d57d1b2af001b64de58fb340063c Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 15:41:49 -0300
Subject: [PATCH 34/53] =?UTF-8?q?=F0=9F=94=A7=20chore(=5F=5Fmain=5F=5F.py)?=
 =?UTF-8?q?:=20add=20load=5Fparams()=20function=20to=20load=20parameters?=
 =?UTF-8?q?=20from=20environment=20variables=20The=20load=5Fparams()=20fun?=
 =?UTF-8?q?ction=20is=20added=20to=20load=20the=20parameters=20from=20the?=
 =?UTF-8?q?=20environment=20variables.=20This=20allows=20for=20more=20flex?=
 =?UTF-8?q?ibility=20and=20configurability=20of=20the=20application=20by?=
 =?UTF-8?q?=20allowing=20the=20parameters=20to=20be=20set=20via=20environm?=
 =?UTF-8?q?ent=20variables.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/__main__.py | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/backend/langflow/__main__.py b/src/backend/langflow/__main__.py
index 15005585c..9002a20ee 100644
--- a/src/backend/langflow/__main__.py
+++ b/src/backend/langflow/__main__.py
@@ -48,6 +48,26 @@ def update_settings(
         settings.update_settings(cache=cache)
 
 
+def load_params():
+    """
+    Load the parameters from the environment variables.
+    """
+    global_vars = globals()
+
+    for key, value in global_vars.items():
+        env_key = f"LANGFLOW_{key.upper()}"
+        if env_key in os.environ:
+            if isinstance(value, bool):
+                # Handle booleans
+                global_vars[key] = os.getenv(env_key, str(value)).lower() == "true"
+            elif isinstance(value, int):
+                # Handle integers
+                global_vars[key] = int(os.getenv(env_key, str(value)))
+            elif isinstance(value, str) or value is None:
+                # Handle strings and None values
+                global_vars[key] = os.getenv(env_key, str(value))
+
+
 def serve_on_jcloud():
     """
     Deploy Langflow server on Jina AI Cloud
@@ -149,6 +169,7 @@ def serve(
     # override env variables with .env file
     if env_file:
         load_dotenv(env_file, override=True)
+        load_params()
 
     if jcloud:
         return serve_on_jcloud()

From fa628a04fd2c6d6a09ee61ca567da94e61b5e6b7 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Wed, 5 Jul 2023 15:50:57 -0300
Subject: [PATCH 35/53] feat: Add generic node tailwind constants classes

---
 .../src/CustomNodes/GenericNode/index.tsx     | 44 +++++++--------
 src/frontend/src/index.css                    | 53 +++++++++++++++++++
 2 files changed, 75 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 32cee565d..f177ab1c0 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -82,30 +82,30 @@ export default function GenericNode({
       <div
         className={classNames(
           selected ? "border border-ring" : "border",
-          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-background"
+          "generic-node-div"
         )}
       >
-        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4  ">
-          <div className="flex w-full items-center truncate">
+        <div className="generic-node-div-title">
+          <div className="generic-node-title-arrangement">
             <Icon
               strokeWidth={1.5}
-              className="h-10 w-10 rounded p-1"
+              className="generic-node-icon"
               style={{
                 color: nodeColors[types[data.type]] ?? nodeColors.unknown,
               }}
             />
-            <div className="ml-2 truncate">
+            <div className="generic-node-tooltip-div">
               <ShadTooltip
                 delayDuration={1500}
                 content={data.node.display_name}
               >
-                <div className="ml-2 truncate text-primary">
+                <div className="generic-node-tooltip-div text-primary">
                   {data.node.display_name}
                 </div>
               </ShadTooltip>
             </div>
           </div>
-          <div className="flex gap-3">
+          <div className="round-button-div">
             <button
               className="relative"
               onClick={(event) => {
@@ -114,14 +114,14 @@ export default function GenericNode({
               }}
             ></button>
           </div>
-          <div className="flex gap-3">
+          <div className="round-button-div">
             <div>
               <Tooltip
                 title={
                   !validationStatus ? (
                     "Validating..."
                   ) : (
-                    <div className="max-h-96 overflow-auto">
+                    <div className="generic-node-validation-div">
                       {validationStatus.params ||
                         ""
                           .split("\n")
@@ -130,29 +130,29 @@ export default function GenericNode({
                   )
                 }
               >
-                <div className="relative top-[3px] h-5 w-5">
+                <div className="generic-node-status-position">
                   <div
                     className={classNames(
                       validationStatus && validationStatus.valid
-                        ? "h-4 w-4 rounded-full bg-status-green opacity-100"
-                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
-                      "absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
+                        ? "green-status"
+                        : "status-build-animation",
+                      "status-div"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       validationStatus && !validationStatus.valid
-                        ? "h-4 w-4 rounded-full  bg-status-red opacity-100"
-                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
-                      "absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
+                        ? "red-status"
+                        : "status-build-animation",
+                      "status-div"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       !validationStatus || isBuilding
-                        ? "h-4 w-4 rounded-full  bg-status-yellow opacity-100"
-                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
-                      "absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
+                        ? "yellow-status"
+                        : "status-build-animation",
+                      "status-div"
                     )}
                   ></div>
                 </div>
@@ -161,8 +161,8 @@ export default function GenericNode({
           </div>
         </div>
 
-        <div className="h-full w-full py-5 text-foreground">
-          <div className="w-full px-5 pb-3 text-sm text-muted-foreground">
+        <div className="generic-node-desc">
+          <div className="generic-node-desc-text">
             {data.node.description}
           </div>
 
@@ -221,7 +221,7 @@ export default function GenericNode({
             <div
               className={classNames(
                 Object.keys(data.node.template).length < 1 ? "hidden" : "",
-                "flex w-full justify-center"
+                "flex-max-width justify-center"
               )}
             >
               {" "}
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index a9dfc0c1a..84398be78 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -298,4 +298,57 @@ The cursor: default; property value restores the browser's default cursor style
   .community-pages-flows-panel {
     @apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4
   }
+  .generic-node-div {
+    @apply relative flex w-96 flex-col justify-center rounded-lg bg-background
+  }
+  .generic-node-div-title {
+    @apply flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4
+  }
+  .generic-node-title-arrangement {
+    @apply flex-max-width items-center truncate
+  }
+  .generic-node-icon {
+    @apply h-10 w-10 rounded p-1
+  }
+  .generic-node-tooltip-div {
+    @apply ml-2 truncate
+  }
+  .generic-node-validation-div {
+    @apply max-h-96 overflow-auto
+  }
+
+  .generic-node-status-position {
+    @apply relative top-[3px] h-5 w-5
+  }
+
+  .generic-node-status-animation {
+    @apply hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0
+  }
+  .generic-node-status {
+    @apply h-4 w-4 rounded-full opacity-100
+  }
+  .green-status {
+    @apply generic-node-status bg-status-green
+  }
+  .red-status {
+    @apply generic-node-status bg-status-red
+  }
+  .yellow-status {
+    @apply generic-node-status bg-status-yellow
+  }
+  .status-build-animation {
+    @apply hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0
+  }
+  .status-div {
+    @apply absolute w-4 duration-200 ease-in-out
+  }
+  .status-div:hover {
+    @apply hover:text-accent-foreground hover:transition-all
+  }
+  .generic-node-desc {
+    @apply h-full w-full py-5 text-foreground
+  }
+  .generic-node-desc-text {
+    @apply w-full px-5 pb-3 text-sm text-muted-foreground
+  }
 }
\ No newline at end of file

From 9922ea05930bce58e1277dbd8910a04536abb2fa Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Wed, 5 Jul 2023 16:12:48 -0300
Subject: [PATCH 36/53] feat: Add alerts tailwind constants classes

---
 src/frontend/src/alerts/error/index.tsx   | 10 +++----
 src/frontend/src/alerts/success/index.tsx |  6 ++--
 src/frontend/src/index.css                | 36 +++++++++++++++++++++++
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx
index 31980dc6b..93f30484b 100644
--- a/src/frontend/src/alerts/error/index.tsx
+++ b/src/frontend/src/alerts/error/index.tsx
@@ -39,19 +39,19 @@ export default function ErrorAlert({
             removeAlert(id);
           }, 500);
         }}
-        className="mt-6 w-96 cursor-pointer rounded-md bg-error-background  p-4 shadow-xl"
+        className="error-build-message"
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
+            <XCircle className="error-build-message-circle" aria-hidden="true" />
           </div>
           <div className="ml-3">
-            <h3 className="text-sm font-medium text-error-foreground">
+            <h3 className="error-build-foreground">
               {title}
             </h3>
             {list.length !== 0 ? (
-              <div className="mt-2 text-sm text-error-foreground">
-                <ul className="list-disc space-y-1 pl-5">
+              <div className="error-build-message-div">
+                <ul className="error-build-message-list">
                   {list.map((item, index) => (
                     <li key={index}>{item}</li>
                   ))}
diff --git a/src/frontend/src/alerts/success/index.tsx b/src/frontend/src/alerts/success/index.tsx
index 88fc79962..e943feb8c 100644
--- a/src/frontend/src/alerts/success/index.tsx
+++ b/src/frontend/src/alerts/success/index.tsx
@@ -34,17 +34,17 @@ export default function SuccessAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="mt-6 w-96 rounded-md bg-success-background p-4 shadow-xl"
+        className="success-alert"
       >
         <div className="flex">
           <div className="flex-shrink-0">
             <CheckCircle2
-              className="h-5 w-5 text-status-green"
+              className="success-alert-icon"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <p className="text-sm font-medium text-success-foreground">
+            <p className="success-alert-message">
               {title}
             </p>
           </div>
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 84398be78..37b26ab1c 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -351,4 +351,40 @@ The cursor: default; property value restores the browser's default cursor style
   .generic-node-desc-text {
     @apply w-full px-5 pb-3 text-sm text-muted-foreground
   }
+
+  .alert-icon {
+    @apply h-5 w-5
+  } /*error-build-message-circle*/
+  .alert-font-size {
+    @apply text-sm font-medium
+  }
+
+  .error-build-message {
+    @apply mt-6 w-96 cursor-pointer rounded-md bg-error-background  p-4 shadow-xl
+  }
+  .error-build-message-circle {
+    @apply text-status-red alert-icon
+  }
+  .error-build-text {
+    @apply text-error-foreground
+  }
+  .error-build-foreground {
+    @apply error-build-text alert-font-size
+  }
+  .error-build-message-div {
+    @apply mt-2 text-sm error-build-text
+  }
+  .error-build-message-list {
+    @apply list-disc space-y-1 pl-5
+  }
+
+  .success-alert {
+    @apply mt-6 w-96 rounded-md bg-success-background p-4 shadow-xl
+  }
+  .success-alert-icon {
+    @apply alert-icon text-status-green
+  }
+  .success-alert-message {
+    @apply alert-font-size text-success-foreground
+  }
 }
\ No newline at end of file

From 14d50c878ce4cee7b62cc9ab1879e0472848537f Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 16:25:43 -0300
Subject: [PATCH 37/53] =?UTF-8?q?=F0=9F=94=96=20chore(pyproject.toml):=20u?=
 =?UTF-8?q?pdate=20package=20version=20to=200.2.13=20The=20package=20versi?=
 =?UTF-8?q?on=20has=20been=20updated=20from=200.2.12=20to=200.2.13.=20This?=
 =?UTF-8?q?=20change=20is=20made=20to=20reflect=20the=20latest=20changes?=
 =?UTF-8?q?=20and=20improvements=20in=20the=20package.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pyproject.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pyproject.toml b/pyproject.toml
index dbd60f4c1..08bdaad65 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langflow"
-version = "0.2.12"
+version = "0.2.13"
 description = "A Python package with a built-in web application"
 authors = ["Logspace <contact@logspace.ai>"]
 maintainers = [

From 90acee22736b5d8fcfb9f83311008e52ededd700 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 16:41:35 -0300
Subject: [PATCH 38/53] =?UTF-8?q?=F0=9F=90=9B=20fix(constants.tsx):=20fix?=
 =?UTF-8?q?=20typo=20in=20flow=20name=20from=20LangFlow=20to=20Langflow=20?=
 =?UTF-8?q?=F0=9F=90=9B=20fix(tabsContext.tsx):=20fix=20typo=20in=20variab?=
 =?UTF-8?q?le=20name=20from=20LangFlowState=20to=20LangflowState=20?=
 =?UTF-8?q?=F0=9F=90=9B=20fix(flow=5Fconstants.tsx):=20fix=20typo=20in=20d?=
 =?UTF-8?q?escription=20from=20LangFlow=20to=20Langflow=20=F0=9F=90=9B=20f?=
 =?UTF-8?q?ix(chatModal/index.tsx):=20fix=20typo=20in=20chat=20modal=20tit?=
 =?UTF-8?q?le=20from=20LangFlow=20Chat=20to=20Langflow=20Chat=20?=
 =?UTF-8?q?=F0=9F=90=9B=20fix(importModal/index.tsx):=20fix=20typo=20in=20?=
 =?UTF-8?q?import=20modal=20title=20from=20LangFlow=20Examples=20to=20Lang?=
 =?UTF-8?q?flow=20Examples=20=F0=9F=90=9B=20fix(CommunityPage/index.tsx):?=
 =?UTF-8?q?=20fix=20typo=20in=20community=20page=20text=20from=20LangFlow?=
 =?UTF-8?q?=20to=20Langflow=20=F0=9F=90=9B=20fix(FlowPage/index.tsx):=20fi?=
 =?UTF-8?q?x=20typo=20in=20flow=20page=20text=20from=20LangFlow=20to=20Lan?=
 =?UTF-8?q?gflow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The changes were made to fix typos in various parts of the codebase where the name "LangFlow" was misspelled as "Langflow". This improves consistency and ensures that the correct name is used throughout the application.
---
 src/frontend/src/constants.tsx                 |  2 +-
 src/frontend/src/contexts/tabsContext.tsx      |  2 +-
 src/frontend/src/flow_constants.tsx            |  6 +++---
 src/frontend/src/modals/chatModal/index.tsx    |  2 +-
 src/frontend/src/modals/importModal/index.tsx  | 11 +++--------
 src/frontend/src/pages/CommunityPage/index.tsx |  2 +-
 src/frontend/src/pages/FlowPage/index.tsx      |  2 +-
 7 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index bcca38087..b609bce80 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -134,7 +134,7 @@ TWEAKS = ${
   }
 flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS)
 # Now you can use it like any chain
-flow("Hey, have you heard of LangFlow?")`;
+flow("Hey, have you heard of Langflow?")`;
 };
 
 function buildTweakObject(tweak) {
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 3b20ded95..e3e1303f9 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -111,7 +111,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 
   // function loadCookie(cookie: string) {
   //   if (cookie && Object.keys(templates).length > 0) {
-  //     let cookieObject: LangFlowState = JSON.parse(cookie);
+  //     let cookieObject: LangflowState = JSON.parse(cookie);
   //     try {
   //       cookieObject.flows.forEach((flow) => {
   //         if (!flow.data) {
diff --git a/src/frontend/src/flow_constants.tsx b/src/frontend/src/flow_constants.tsx
index e9cf0478b..1e2280ab9 100644
--- a/src/frontend/src/flow_constants.tsx
+++ b/src/frontend/src/flow_constants.tsx
@@ -20,7 +20,7 @@ export const DESCRIPTIONS: string[] = [
   "Generate, Innovate, Communicate.",
   "Conversation Catalyst Engine.",
   "Language Chainlink Master.",
-  "Design Dialogues with LangFlow.",
+  "Design Dialogues with Langflow.",
   "Nurture NLP Nodes Here.",
   "Conversational Cartography Unlocked.",
   "Design, Develop, Dialogize.",
@@ -31,7 +31,7 @@ export const DESCRIPTIONS: string[] = [
   "Where Language Meets Logic.",
   "Building Intelligent Interactions.",
   "Your Passport to Linguistic Landscapes.",
-  "Create, Curate, Communicate with LangFlow.",
+  "Create, Curate, Communicate with Langflow.",
   "Flow into the Future of Language.",
   "Mapping Meaningful Conversations.",
   "Unravel the Art of Articulation.",
@@ -41,7 +41,7 @@ export const DESCRIPTIONS: string[] = [
   "The Pinnacle of Prompt Generation.",
   "Language Models, Mapped and Mastered.",
   "Powerful Prompts, Perfectly Positioned.",
-  "Innovation in Interaction with LangFlow.",
+  "Innovation in Interaction with Langflow.",
   "Your Toolkit for Text Generation.",
   "Unfolding Linguistic Possibilities.",
   "Building Powerful Solutions with Language Models.",
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index bb6efbb70..a9f6d34b1 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -380,7 +380,7 @@ export default function ChatModal({
                       <span>
                         👋{" "}
                         <span className="text-gray-600 dark:text-gray-300 text-lg">
-                          LangFlow Chat
+                          Langflow Chat
                         </span>
                       </span>
                       <br />
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index 00f17c959..a2fd29db7 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -1,22 +1,18 @@
 import {
-  XMarkIcon,
-  ArrowDownTrayIcon,
   DocumentDuplicateIcon,
   ComputerDesktopIcon,
   ArrowUpTrayIcon,
   ArrowLeftIcon,
-  CommandLineIcon,
 } from "@heroicons/react/24/outline";
-import { Fragment, useContext, useRef, useState } from "react";
+import { useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import ButtonBox from "./buttonBox";
 import { getExamples } from "../../controllers/API";
-import { error } from "console";
 import { alertContext } from "../../contexts/alertContext";
 import LoadingComponent from "../../components/loadingComponent";
 import { FlowType } from "../../types/flow";
-import { classNames, snakeToSpaces, toNormalCase } from "../../utils";
+import { classNames } from "../../utils";
 import {
   Dialog,
   DialogContent,
@@ -26,7 +22,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
-import { Button } from "../../components/ui/button";
 import { IMPORT_DIALOG_SUBTITLE } from "../../constants";
 
 export default function ImportModal() {
@@ -194,7 +189,7 @@ export default function ImportModal() {
                   fill="currentColor"
                 />
               </svg>
-              <span className="ml-2 ">LangFlow Examples</span>
+              <span className="ml-2 ">Langflow Examples</span>
             </a>
           </div>
         </DialogFooter>
diff --git a/src/frontend/src/pages/CommunityPage/index.tsx b/src/frontend/src/pages/CommunityPage/index.tsx
index d0bdc3536..871b27d5e 100644
--- a/src/frontend/src/pages/CommunityPage/index.tsx
+++ b/src/frontend/src/pages/CommunityPage/index.tsx
@@ -57,7 +57,7 @@ export default function CommunityPage() {
         </div>
       </div>
       <span className="flex pb-8 px-6 w-[70%] text-muted-foreground">
-        Discover and learn from shared examples by the LangFlow community. We
+        Discover and learn from shared examples by the Langflow community. We
         welcome new example contributions that can help our community explore
         new and powerful features.
       </span>
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index c2a7d53bb..57c00393b 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -31,7 +31,7 @@ export default function FlowPage() {
         href="https://logspace.ai/"
         className="absolute left-7 bottom-2 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-foreground px-2 text-center font-sans text-xs tracking-wide text-secondary transition-all duration-500 ease-in-out hover:h-12"
       >
-        {version && <div className="mt-1">⛓️ LangFlow v{version}</div>}
+        {version && <div className="mt-1">⛓️ Langflow v{version}</div>}
         <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>
       </a>
     </div>

From a73737435bd7de72abd71b5ac645530444649378 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 16:41:57 -0300
Subject: [PATCH 39/53] =?UTF-8?q?=F0=9F=93=9D=20docs(CONTRIBUTING.md):=20u?=
 =?UTF-8?q?pdate=20project=20name=20to=20"Langflow"=20for=20consistency=20?=
 =?UTF-8?q?=F0=9F=93=9D=20docs(README.md):=20update=20project=20name=20to?=
 =?UTF-8?q?=20"Langflow"=20for=20consistency=20=F0=9F=93=9D=20chore(fronte?=
 =?UTF-8?q?nd):=20update=20project=20name=20in=20HTML=20title=20tag=20to?=
 =?UTF-8?q?=20"Langflow"=20for=20consistency=20The=20project=20name=20"Lan?=
 =?UTF-8?q?gFlow"=20has=20been=20updated=20to=20"Langflow"=20for=20consist?=
 =?UTF-8?q?ency=20throughout=20the=20documentation=20and=20codebase.=20Thi?=
 =?UTF-8?q?s=20change=20improves=20readability=20and=20maintains=20a=20con?=
 =?UTF-8?q?sistent=20naming=20convention.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CONTRIBUTING.md         |  6 +++---
 README.md               | 14 +++++++-------
 src/frontend/index.html |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 001417643..f2c471b1a 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,6 +1,6 @@
-# Contributing to LangFlow
+# Contributing to Langflow
 
-Hello there! We appreciate your interest in contributing to LangFlow.
+Hello there! We appreciate your interest in contributing to Langflow.
 As an open-source project in a rapidly developing field, we are extremely open
 to contributions, whether it be in the form of a new feature, improved infra, or better documentation.
 
@@ -40,7 +40,7 @@ the system we use to tag our issues and pull requests.
 
 
 ### Local development
-You can develop LangFlow using docker compose, or locally.
+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.
 
diff --git a/README.md b/README.md
index b1bcbad6a..e53f3b535 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 <!-- Title -->
 
-# ⛓️ LangFlow
+# ⛓️ Langflow
 
 ~ An effortless way to experiment and prototype [LangChain](https://github.com/hwchase17/langchain) pipelines ~
 
@@ -16,7 +16,7 @@
 
 <p>
 <a href="https://discord.gg/EqksyE2EX9"><img alt="Discord Server" src="https://dcbadge.vercel.app/api/server/EqksyE2EX9?compact=true&style=flat"/></a>
-<a href="https://huggingface.co/spaces/Logspace/LangFlow"><img src="https://huggingface.co/datasets/huggingface/badges/raw/main/open-in-hf-spaces-sm.svg" alt="HuggingFace Spaces"></a>
+<a href="https://huggingface.co/spaces/Logspace/Langflow"><img src="https://huggingface.co/datasets/huggingface/badges/raw/main/open-in-hf-spaces-sm.svg" alt="HuggingFace Spaces"></a>
 </p>
 
 <a href="https://github.com/logspace-ai/langflow">
@@ -43,7 +43,7 @@
 
 # 📦 Installation
 ### <b>Locally</b>
-You can install LangFlow from pip:
+You can install Langflow from pip:
 
 ```shell
 pip install langflow
@@ -220,7 +220,7 @@ print(run_flow("Your message", flow_id=FLOW_ID, tweaks=TWEAKS))
 
 ## 🎨 Creating Flows
 
-Creating flows with LangFlow is easy. Simply drag sidebar components onto the canvas and connect them together to create your pipeline. LangFlow provides a range of [LangChain components](https://langchain.readthedocs.io/en/latest/reference.html) to choose from, including LLMs, prompt serializers, agents, and chains.
+Creating flows with Langflow is easy. Simply drag sidebar components onto the canvas and connect them together to create your pipeline. Langflow provides a range of [LangChain components](https://langchain.readthedocs.io/en/latest/reference.html) to choose from, including LLMs, prompt serializers, agents, and chains.
 
 Explore by editing prompt parameters, link chains and agents, track an agent's thought process, and export your flow.
 
@@ -233,13 +233,13 @@ from langflow import load_flow_from_json
 
 flow = load_flow_from_json("path/to/flow.json")
 # Now you can use it like any chain
-flow("Hey, have you heard of LangFlow?")
+flow("Hey, have you heard of Langflow?")
 ```
 
 
 ## 👋 Contributing
 
-We welcome contributions from developers of all levels to our open-source project on GitHub. If you'd like to contribute, please check our [contributing guidelines](./CONTRIBUTING.md) and help make LangFlow more accessible.
+We welcome contributions from developers of all levels to our open-source project on GitHub. If you'd like to contribute, please check our [contributing guidelines](./CONTRIBUTING.md) and help make Langflow more accessible.
 
 
 Join our [Discord](https://discord.com/invite/EqksyE2EX9) server to ask questions, make suggestions and showcase your projects! 🦾
@@ -252,4 +252,4 @@ Join our [Discord](https://discord.com/invite/EqksyE2EX9) server to ask question
 
 ## 📄 License
 
-LangFlow is released under the MIT License. See the LICENSE file for details.
+Langflow is released under the MIT License. See the LICENSE file for details.
diff --git a/src/frontend/index.html b/src/frontend/index.html
index 3b6e30308..50bdae647 100644
--- a/src/frontend/index.html
+++ b/src/frontend/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" href="/favicon.ico" />
-    <title>LangFlow</title>
+    <title>Langflow</title>
 </head>
 <body id='body' style="width: 100%; height:100%">
     <noscript>You need to enable JavaScript to run this app.</noscript>

From b71913a0aa1f6b39e1f0df5b588eac5e47c85a37 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 16:42:13 -0300
Subject: [PATCH 40/53] =?UTF-8?q?=F0=9F=90=9B=20fix(=5F=5Fmain=5F=5F.py):?=
 =?UTF-8?q?=20change=20word=20variable=20from=20"LangFlow"=20to=20"Langflo?=
 =?UTF-8?q?w"=20for=20consistency=20=F0=9F=90=9B=20fix(schemas.py):=20chan?=
 =?UTF-8?q?ge=20class=20name=20from=20"ExportedFlow"=20to=20"Exported=20fl?=
 =?UTF-8?q?ow=20from=20Langflow"=20for=20consistency=20The=20word=20variab?=
 =?UTF-8?q?le=20in=20=5F=5Fmain=5F=5F.py=20is=20changed=20from=20"LangFlow?=
 =?UTF-8?q?"=20to=20"Langflow"=20to=20maintain=20consistency=20in=20naming?=
 =?UTF-8?q?=20conventions.=20Similarly,=20the=20class=20name=20in=20schema?=
 =?UTF-8?q?s.py=20is=20changed=20from=20"ExportedFlow"=20to=20"Exported=20?=
 =?UTF-8?q?flow=20from=20Langflow"=20for=20consistency=20in=20naming=20con?=
 =?UTF-8?q?ventions.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/langflow/__main__.py       | 2 +-
 src/backend/langflow/api/v1/schemas.py | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/backend/langflow/__main__.py b/src/backend/langflow/__main__.py
index 9002a20ee..385e74932 100644
--- a/src/backend/langflow/__main__.py
+++ b/src/backend/langflow/__main__.py
@@ -265,7 +265,7 @@ def get_free_port(port):
 def print_banner(host, port):
     # console = Console()
 
-    word = "LangFlow"
+    word = "Langflow"
     colors = ["#3300cc"]
 
     styled_word = ""
diff --git a/src/backend/langflow/api/v1/schemas.py b/src/backend/langflow/api/v1/schemas.py
index f5f1f9ccf..22df4a977 100644
--- a/src/backend/langflow/api/v1/schemas.py
+++ b/src/backend/langflow/api/v1/schemas.py
@@ -23,7 +23,7 @@ class GraphData(BaseModel):
 
 
 class ExportedFlow(BaseModel):
-    """Exported flow from LangFlow."""
+    """Exported flow from Langflow."""
 
     description: str
     name: str

From df09f6119d0b4d9aceb48e4c4c10550bfd57edbf Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 16:42:47 -0300
Subject: [PATCH 41/53] =?UTF-8?q?=F0=9F=93=9D=20docs(README.md):=20fix=20t?=
 =?UTF-8?q?ypo=20in=20Langflow=20to=20LangFlow=20for=20consistency=20The?=
 =?UTF-8?q?=20typo=20in=20the=20word=20"LangFlow"=20has=20been=20fixed=20t?=
 =?UTF-8?q?o=20ensure=20consistency=20in=20the=20naming=20convention=20use?=
 =?UTF-8?q?d=20throughout=20the=20project.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .devcontainer/demo/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.devcontainer/demo/README.md b/.devcontainer/demo/README.md
index d0ad14f9e..0a828a009 100644
--- a/.devcontainer/demo/README.md
+++ b/.devcontainer/demo/README.md
@@ -1,6 +1,6 @@
-# LangFlow Demo Codespace Readme
+# Langflow Demo Codespace Readme
 
-These instructions will walk you through the process of running a LangFlow demo via GitHub Codespaces.
+These instructions will walk you through the process of running a Langflow demo via GitHub Codespaces.
 
 ## Setup
 

From 2fcc8296d212804c6285b1e399bfb060db8f9d94 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 16:45:45 -0300
Subject: [PATCH 42/53] formatting

---
 src/frontend/src/App.tsx                      |  2 +-
 .../components/parameterComponent/index.tsx   |  6 +-
 .../src/CustomNodes/GenericNode/index.tsx     | 10 ++--
 .../components/AccordionComponent/index.tsx   |  2 +-
 .../ExtraSidebarComponent/index.tsx           | 12 ++--
 .../ReactTooltipComponent/index.tsx           |  2 +-
 .../chatComponent/buildTrigger/index.tsx      |  2 +-
 .../src/components/chatComponent/index.tsx    |  2 +-
 .../components/codeAreaComponent/index.tsx    |  6 +-
 .../components/dropdownComponent/index.tsx    | 10 ++--
 .../src/components/headerComponent/index.tsx  |  2 +-
 .../src/components/inputComponent/index.tsx   |  8 +--
 .../src/components/promptComponent/index.tsx  |  4 +-
 .../components/textAreaComponent/index.tsx    |  4 +-
 .../src/components/toggleComponent/index.tsx  |  8 +--
 src/frontend/src/components/ui/accordion.tsx  |  4 +-
 src/frontend/src/components/ui/badge.tsx      |  2 +-
 src/frontend/src/components/ui/button.tsx     |  4 +-
 src/frontend/src/components/ui/card.tsx       |  4 +-
 src/frontend/src/components/ui/checkbox.tsx   |  2 +-
 src/frontend/src/components/ui/dialog.tsx     | 10 ++--
 .../src/components/ui/dropdown-menu.tsx       | 14 ++---
 src/frontend/src/components/ui/input.tsx      |  4 +-
 src/frontend/src/components/ui/label.tsx      |  2 +-
 src/frontend/src/components/ui/menubar.tsx    | 24 ++++----
 src/frontend/src/components/ui/progress.tsx   |  2 +-
 .../src/components/ui/rename-label.tsx        |  2 +-
 src/frontend/src/components/ui/separator.tsx  |  6 +-
 src/frontend/src/components/ui/switch.tsx     |  4 +-
 src/frontend/src/components/ui/table.tsx      |  4 +-
 src/frontend/src/components/ui/tabs.tsx       |  6 +-
 src/frontend/src/components/ui/textarea.tsx   |  4 +-
 src/frontend/src/components/ui/tooltip.tsx    |  2 +-
 src/frontend/src/contexts/alertContext.tsx    |  2 +-
 src/frontend/src/contexts/darkContext.tsx     |  2 +-
 src/frontend/src/contexts/locationContext.tsx |  2 +-
 src/frontend/src/contexts/tabsContext.tsx     | 24 ++++----
 src/frontend/src/contexts/typesContext.tsx    | 10 ++--
 src/frontend/src/contexts/undoRedoContext.tsx |  4 +-
 src/frontend/src/controllers/API/index.ts     | 14 ++---
 src/frontend/src/icons/AzLogo/index.tsx       |  2 +-
 src/frontend/src/icons/Bing/index.tsx         |  2 +-
 .../src/icons/FacebookMessenger/index.tsx     |  2 +-
 src/frontend/src/icons/IFixIt/index.tsx       |  2 +-
 src/frontend/src/icons/Meta/index.tsx         |  2 +-
 src/frontend/src/icons/Searx/index.tsx        |  2 +-
 src/frontend/src/icons/Slack/index.tsx        |  2 +-
 src/frontend/src/icons/Word/index.tsx         |  2 +-
 src/frontend/src/index.tsx                    |  4 +-
 src/frontend/src/modals/ApiModal/index.tsx    | 58 +++++++++----------
 .../src/modals/EditNodeModal/index.tsx        |  8 +--
 .../NodeModal/components/ModalField/index.tsx |  6 +-
 src/frontend/src/modals/NodeModal/index.tsx   |  6 +-
 .../src/modals/chatModal/chatInput/index.tsx  |  2 +-
 .../modals/chatModal/chatMessage/index.tsx    |  6 +-
 src/frontend/src/modals/chatModal/index.tsx   |  8 +--
 .../src/modals/codeAreaModal/index.tsx        |  2 +-
 src/frontend/src/modals/exportModal/index.tsx |  2 +-
 .../src/modals/flowSettingsModal/index.tsx    |  2 +-
 .../modals/importModal/buttonBox/index.tsx    |  4 +-
 src/frontend/src/modals/importModal/index.tsx |  6 +-
 .../src/pages/CommunityPage/index.tsx         |  2 +-
 .../components/PageComponent/index.tsx        | 27 ++++-----
 .../extraSidebarComponent/index.tsx           | 14 ++---
 .../components/nodeToolbarComponent/index.tsx | 12 ++--
 src/frontend/src/types/tabs/index.ts          |  2 +-
 src/frontend/src/utils.ts                     | 28 ++++-----
 67 files changed, 227 insertions(+), 226 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 166baf4c7..af42df916 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -118,7 +118,7 @@ export default function App() {
 
   const removeAlert = (id: string) => {
     setAlertsList((prevAlertsList) =>
-      prevAlertsList.filter((alert) => alert.id !== id)
+      prevAlertsList.filter((alert) => alert.id !== id),
     );
   };
 
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index ccc18a5fa..4e1c226a0 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -59,7 +59,7 @@ export default function ParameterComponent({
   }, [data.id, position, updateNodeInternals]);
 
   const [enabled, setEnabled] = useState(
-    data.node.template[name]?.value ?? false
+    data.node.template[name]?.value ?? false,
   );
 
   useEffect(() => {}, [closePopUp, data.node.template]);
@@ -101,7 +101,7 @@ export default function ParameterComponent({
       <span
         key={getRandomKeyByssmm()}
         className={classNames(
-          i > 0 ? "items-center flex mt-3" : "items-center flex"
+          i > 0 ? "items-center flex mt-3" : "items-center flex",
         )}
       >
         <div
@@ -183,7 +183,7 @@ export default function ParameterComponent({
               }
               className={classNames(
                 left ? "-ml-0.5 " : "-mr-0.5 ",
-                "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
+                "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800",
               )}
               style={{
                 borderColor: color,
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index aaa8030b5..d882528a5 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -82,7 +82,7 @@ export default function GenericNode({
       <div
         className={classNames(
           selected ? "border border-ring" : "border dark:border-gray-700",
-          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-gray-900"
+          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-gray-900",
         )}
       >
         <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 dark:border-b-gray-700 dark:bg-gray-800 dark:text-white ">
@@ -132,7 +132,7 @@ export default function GenericNode({
                       validationStatus && validationStatus.valid
                         ? "w-4 h-4 rounded-full bg-green-500 opacity-100"
                         : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200",
                     )}
                   ></div>
                   <div
@@ -140,7 +140,7 @@ export default function GenericNode({
                       validationStatus && !validationStatus.valid
                         ? "w-4 h-4 rounded-full  bg-red-500 opacity-100"
                         : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200",
                     )}
                   ></div>
                   <div
@@ -148,7 +148,7 @@ export default function GenericNode({
                       !validationStatus || isBuilding
                         ? "w-4 h-4 rounded-full  bg-yellow-500 opacity-100"
                         : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200",
                     )}
                   ></div>
                 </div>
@@ -217,7 +217,7 @@ export default function GenericNode({
             <div
               className={classNames(
                 Object.keys(data.node.template).length < 1 ? "hidden" : "",
-                "flex w-full justify-center"
+                "flex w-full justify-center",
               )}
             >
               {" "}
diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx
index f03a2ad5f..8990da245 100644
--- a/src/frontend/src/components/AccordionComponent/index.tsx
+++ b/src/frontend/src/components/AccordionComponent/index.tsx
@@ -18,7 +18,7 @@ export default function AccordionComponent({
   open = [],
 }: AccordionComponentType) {
   const [value, setValue] = useState(
-    open.length == 0 ? "" : getOpenAccordion()
+    open.length == 0 ? "" : getOpenAccordion(),
   );
 
   function getOpenAccordion() {
diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index b6fbf94b2..c0ad0b506 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -34,7 +34,7 @@ export default function ExtraSidebar() {
                             item.href.split("/")[2] === current[4]
                               ? "bg-muted text-gray-900"
                               : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
-                            "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
+                            "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md",
                           )}
                         >
                           <item.icon
@@ -42,7 +42,7 @@ export default function ExtraSidebar() {
                               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"
+                              "mr-3 flex-shrink-0 h-6 w-6",
                             )}
                           />
                           {item.name}
@@ -61,7 +61,7 @@ export default function ExtraSidebar() {
                                 item.href.split("/")[2] === current[4]
                                   ? "bg-muted text-gray-900"
                                   : "bg-white text-gray-600 hover:bg-muted 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-1 focus:ring-indigo-500"
+                                "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-1 focus:ring-indigo-500",
                               )}
                             >
                               <item.icon
@@ -74,7 +74,7 @@ export default function ExtraSidebar() {
                                   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"
+                                  "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"
@@ -94,7 +94,7 @@ export default function ExtraSidebar() {
                                     subItem.href.split("/")[3] === current[5]
                                       ? "bg-muted text-gray-900"
                                       : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
-                                    "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
+                                    "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium",
                                   )}
                                 >
                                   {subItem.name}
@@ -104,7 +104,7 @@ export default function ExtraSidebar() {
                           </>
                         )}
                       </Disclosure>
-                    )
+                    ),
                   )}
                 </nav>
               </div>
diff --git a/src/frontend/src/components/ReactTooltipComponent/index.tsx b/src/frontend/src/components/ReactTooltipComponent/index.tsx
index cb2a54f7c..cb4349305 100644
--- a/src/frontend/src/components/ReactTooltipComponent/index.tsx
+++ b/src/frontend/src/components/ReactTooltipComponent/index.tsx
@@ -38,7 +38,7 @@ const TooltipReact: FC<TooltipProps> = ({
         content={content}
         className={classNames(
           "!bg-white !text-xs !font-normal !text-gray-700 !shadow-md !opacity-100 z-[9999]",
-          className
+          className,
         )}
         place={position}
         clickable={clickable}
diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 215b75971..a247a46b8 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -126,7 +126,7 @@ export default function BuildTrigger({
 
   async function enforceMinimumLoadingTime(
     startTime: number,
-    minimumLoadingTime: number
+    minimumLoadingTime: number,
   ) {
     const elapsedTime = Date.now() - startTime;
     const remainingTime = minimumLoadingTime - elapsedTime;
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 6c451fc31..0c7c069c5 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -45,7 +45,7 @@ export default function Chat({ flow }: ChatType) {
   useEffect(() => {
     const prevNodes = prevNodesRef.current;
     const currentNodes = nodes.map(
-      (node: NodeType) => node.data.node.template.value
+      (node: NodeType) => node.data.node.template.value,
     );
 
     if (
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index b42f1489b..fc827fb05 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -13,7 +13,7 @@ export default function CodeAreaComponent({
   editNode = false,
 }: TextAreaComponentType) {
   const [myValue, setMyValue] = useState(
-    typeof value == "string" ? value : JSON.stringify(value)
+    typeof value == "string" ? value : JSON.stringify(value),
   );
   const { openPopUp } = useContext(PopUpContext);
   useEffect(() => {
@@ -43,7 +43,7 @@ export default function CodeAreaComponent({
                   setMyValue(t);
                   onChange(t);
                 }}
-              />
+              />,
             );
           }}
           className={
@@ -67,7 +67,7 @@ export default function CodeAreaComponent({
                   setMyValue(t);
                   onChange(t);
                 }}
-              />
+              />,
             );
           }}
         >
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index fab9cad93..35f008aba 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -18,7 +18,7 @@ export default function Dropdown({
   const { closePopUp } = useContext(PopUpContext);
 
   let [internalValue, setInternalValue] = useState(
-    value === "" || !value ? "Choose an option" : value
+    value === "" || !value ? "Choose an option" : value,
   );
 
   useEffect(() => {
@@ -71,7 +71,7 @@ export default function Dropdown({
                     editNode
                       ? "z-10 mt-1 max-h-60 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 w-[215px]"
                       : "nowheel z-10 mt-1 max-h-60 w-full overflow-auto overflow-y rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm ",
-                    apiModal ? "w-[250px] mb-2" : "absolute"
+                    apiModal ? "w-[250px] mb-2" : "absolute",
                   )}
                 >
                   {options.map((option, id) => (
@@ -84,7 +84,7 @@ export default function Dropdown({
                             : "",
                           editNode
                             ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800"
-                            : "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800"
+                            : "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800",
                         )
                       }
                       value={option}
@@ -94,7 +94,7 @@ export default function Dropdown({
                           <span
                             className={classNames(
                               selected ? "font-semibold" : "font-normal",
-                              "block truncate "
+                              "block truncate ",
                             )}
                           >
                             {option}
@@ -104,7 +104,7 @@ export default function Dropdown({
                             <span
                               className={classNames(
                                 active ? "text-white dark:text-black" : "",
-                                "absolute inset-y-0 right-0 flex items-center pr-4"
+                                "absolute inset-y-0 right-0 flex items-center pr-4",
                               )}
                             >
                               <Check
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 351e123a0..2c09ebdfc 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -128,7 +128,7 @@ export default function Header() {
                     <AlertDropdown />
                   </div>
                   <div className="h-screen w-screen fixed top-0 left-0"></div>
-                </>
+                </>,
               );
             }}
           >
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 98e643871..fb9c6f99e 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -53,7 +53,7 @@ export default function InputComponent({
             ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm text-center" +
                 INPUT_STYLE
             : "ring-offset-gray-200" + INPUT_STYLE,
-          password && editNode ? "pr-8" : "pr-3"
+          password && editNode ? "pr-8" : "pr-3",
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}
         onChange={(e) => {
@@ -66,7 +66,7 @@ export default function InputComponent({
           className={classNames(
             editNode
               ? "absolute inset-y-0 right-0 pr-2 items-center text-gray-600"
-              : "absolute inset-y-0 right-0 items-center px-4 text-gray-600"
+              : "absolute inset-y-0 right-0 items-center px-4 text-gray-600",
           )}
           onClick={() => {
             setPwdVisible(!pwdVisible);
@@ -83,7 +83,7 @@ export default function InputComponent({
                 className={classNames(
                   editNode
                     ? "w-5 h-5 absolute bottom-0.5 right-2"
-                    : "w-5 h-5 absolute bottom-2 right-3"
+                    : "w-5 h-5 absolute bottom-2 right-3",
                 )}
               >
                 <path
@@ -102,7 +102,7 @@ export default function InputComponent({
                 className={classNames(
                   editNode
                     ? "w-5 h-5 absolute bottom-0.5 right-2"
-                    : "w-5 h-5 absolute bottom-2 right-3"
+                    : "w-5 h-5 absolute bottom-2 right-3",
                 )}
               >
                 <path
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 58b975d00..47fe6c1eb 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -44,7 +44,7 @@ export default function PromptAreaComponent({
                   setMyValue(t);
                   onChange(t);
                 }}
-              />
+              />,
             );
           }}
           className={
@@ -70,7 +70,7 @@ export default function PromptAreaComponent({
                   setMyValue(t);
                   onChange(t);
                 }}
-              />
+              />,
             );
           }}
         >
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index d32a76687..731991117 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -47,7 +47,7 @@ export default function TextAreaComponent({
                   setMyValue(t);
                   onChange(t);
                 }}
-              />
+              />,
             );
           }}
           className={
@@ -73,7 +73,7 @@ export default function TextAreaComponent({
                   setMyValue(t);
                   onChange(t);
                 }}
-              />
+              />,
             );
           }}
         >
diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx
index 9481f6760..7414a462c 100644
--- a/src/frontend/src/components/toggleComponent/index.tsx
+++ b/src/frontend/src/components/toggleComponent/index.tsx
@@ -22,7 +22,7 @@ export default function ToggleComponent({
         }}
         className={classNames(
           enabled ? "bg-primary" : "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-1 focus:ring-primary focus:ring-offset-1"
+          "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-1 focus:ring-primary focus:ring-offset-1",
         )}
       >
         <span className="sr-only">Use setting</span>
@@ -32,7 +32,7 @@ export default function ToggleComponent({
             "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"
+              : "bg-white dark:bg-gray-800",
           )}
         >
           <span
@@ -40,7 +40,7 @@ export default function ToggleComponent({
               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"
+              "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity",
             )}
             aria-hidden="true"
           ></span>
@@ -49,7 +49,7 @@ export default function ToggleComponent({
               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"
+              "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity",
             )}
             aria-hidden="true"
           ></span>
diff --git a/src/frontend/src/components/ui/accordion.tsx b/src/frontend/src/components/ui/accordion.tsx
index 684b257fc..9dcb1c2a1 100644
--- a/src/frontend/src/components/ui/accordion.tsx
+++ b/src/frontend/src/components/ui/accordion.tsx
@@ -28,7 +28,7 @@ const AccordionTrigger = React.forwardRef<
       ref={ref}
       className={cn(
         "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
+        className,
       )}
       {...props}
     >
@@ -47,7 +47,7 @@ const AccordionContent = React.forwardRef<
     ref={ref}
     className={cn(
       "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-      className
+      className,
     )}
     {...props}
   >
diff --git a/src/frontend/src/components/ui/badge.tsx b/src/frontend/src/components/ui/badge.tsx
index d8f6ca740..3febd0bcd 100644
--- a/src/frontend/src/components/ui/badge.tsx
+++ b/src/frontend/src/components/ui/badge.tsx
@@ -19,7 +19,7 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 );
 
 export interface BadgeProps
diff --git a/src/frontend/src/components/ui/button.tsx b/src/frontend/src/components/ui/button.tsx
index 635da79b4..31c06c9e7 100644
--- a/src/frontend/src/components/ui/button.tsx
+++ b/src/frontend/src/components/ui/button.tsx
@@ -30,7 +30,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 export interface ButtonProps
@@ -49,7 +49,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       />
     );
-  }
+  },
 );
 Button.displayName = "Button";
 
diff --git a/src/frontend/src/components/ui/card.tsx b/src/frontend/src/components/ui/card.tsx
index 84fba4ede..23af93f78 100644
--- a/src/frontend/src/components/ui/card.tsx
+++ b/src/frontend/src/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
     ref={ref}
     className={cn(
       "rounded-lg flex flex-col justify-between border bg-card text-card-foreground shadow-sm hover:shadow-lg transition-all",
-      className
+      className,
     )}
     {...props}
   />
@@ -36,7 +36,7 @@ const CardTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-base font-semibold leading-tight tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
diff --git a/src/frontend/src/components/ui/checkbox.tsx b/src/frontend/src/components/ui/checkbox.tsx
index 4e4905bb9..1038b4bdc 100644
--- a/src/frontend/src/components/ui/checkbox.tsx
+++ b/src/frontend/src/components/ui/checkbox.tsx
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
     ref={ref}
     className={cn(
       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
+      className,
     )}
     {...props}
   >
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
index 050db3aaa..6adecee78 100644
--- a/src/frontend/src/components/ui/dialog.tsx
+++ b/src/frontend/src/components/ui/dialog.tsx
@@ -28,7 +28,7 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-primary/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
-      className
+      className,
     )}
     {...props}
   />
@@ -45,7 +45,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
-        className
+        className,
       )}
       {...props}
     >
@@ -66,7 +66,7 @@ const DialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
@@ -80,7 +80,7 @@ const DialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
@@ -95,7 +95,7 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
diff --git a/src/frontend/src/components/ui/dropdown-menu.tsx b/src/frontend/src/components/ui/dropdown-menu.tsx
index d13ee400e..9a69f2a9a 100644
--- a/src/frontend/src/components/ui/dropdown-menu.tsx
+++ b/src/frontend/src/components/ui/dropdown-menu.tsx
@@ -28,7 +28,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-      className
+      className,
     )}
     {...props}
   />
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
       )}
       {...props}
     />
@@ -84,7 +84,7 @@ const DropdownMenuItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     checked={checked}
     {...props}
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -148,7 +148,7 @@ const DropdownMenuLabel = React.forwardRef<
     className={cn(
       "px-2 pl-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
diff --git a/src/frontend/src/components/ui/input.tsx b/src/frontend/src/components/ui/input.tsx
index f3a8757e8..bb3c0409f 100644
--- a/src/frontend/src/components/ui/input.tsx
+++ b/src/frontend/src/components/ui/input.tsx
@@ -11,13 +11,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={type}
         className={cn(
           "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
     );
-  }
+  },
 );
 Input.displayName = "Input";
 
diff --git a/src/frontend/src/components/ui/label.tsx b/src/frontend/src/components/ui/label.tsx
index ab5129253..f2017b255 100644
--- a/src/frontend/src/components/ui/label.tsx
+++ b/src/frontend/src/components/ui/label.tsx
@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
 const Label = React.forwardRef<
diff --git a/src/frontend/src/components/ui/menubar.tsx b/src/frontend/src/components/ui/menubar.tsx
index 2eb3a61f4..a0c382e01 100644
--- a/src/frontend/src/components/ui/menubar.tsx
+++ b/src/frontend/src/components/ui/menubar.tsx
@@ -24,7 +24,7 @@ const Menubar = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
-      className
+      className,
     )}
     {...props}
   />
@@ -39,7 +39,7 @@ const MenubarTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      className
+      className,
     )}
     {...props}
   />
@@ -57,7 +57,7 @@ const MenubarSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
@@ -75,7 +75,7 @@ const MenubarSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-      className
+      className,
     )}
     {...props}
   />
@@ -88,7 +88,7 @@ const MenubarContent = React.forwardRef<
 >(
   (
     { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref
+    ref,
   ) => (
     <MenubarPrimitive.Portal>
       <MenubarPrimitive.Content
@@ -98,12 +98,12 @@ const MenubarContent = React.forwardRef<
         sideOffset={sideOffset}
         className={cn(
           "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in slide-in-from-top-1",
-          className
+          className,
         )}
         {...props}
       />
     </MenubarPrimitive.Portal>
-  )
+  ),
 );
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
@@ -118,7 +118,7 @@ const MenubarItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
@@ -133,7 +133,7 @@ const MenubarCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     checked={checked}
     {...props}
@@ -156,7 +156,7 @@ const MenubarRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -181,7 +181,7 @@ const MenubarLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
@@ -208,7 +208,7 @@ const MenubarShortcut = ({
     <span
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
+        className,
       )}
       {...props}
     />
diff --git a/src/frontend/src/components/ui/progress.tsx b/src/frontend/src/components/ui/progress.tsx
index 69d1f86fb..71ff8a889 100644
--- a/src/frontend/src/components/ui/progress.tsx
+++ b/src/frontend/src/components/ui/progress.tsx
@@ -12,7 +12,7 @@ const Progress = React.forwardRef<
     ref={ref}
     className={cn(
       "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
-      className
+      className,
     )}
     {...props}
   >
diff --git a/src/frontend/src/components/ui/rename-label.tsx b/src/frontend/src/components/ui/rename-label.tsx
index 1ee79808b..ffc93f4df 100644
--- a/src/frontend/src/components/ui/rename-label.tsx
+++ b/src/frontend/src/components/ui/rename-label.tsx
@@ -58,7 +58,7 @@ export default function RenameLabel(props) {
           onInput={resizeInput}
           className={cn(
             "px-2 bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md",
-            props.className
+            props.className,
           )}
           onBlur={() => {
             setIsRename(false);
diff --git a/src/frontend/src/components/ui/separator.tsx b/src/frontend/src/components/ui/separator.tsx
index 84a16676d..f78d5c0cb 100644
--- a/src/frontend/src/components/ui/separator.tsx
+++ b/src/frontend/src/components/ui/separator.tsx
@@ -10,7 +10,7 @@ const Separator = React.forwardRef<
 >(
   (
     { className, orientation = "horizontal", decorative = true, ...props },
-    ref
+    ref,
   ) => (
     <SeparatorPrimitive.Root
       ref={ref}
@@ -19,11 +19,11 @@ const Separator = React.forwardRef<
       className={cn(
         "shrink-0 bg-border",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  ),
 );
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
diff --git a/src/frontend/src/components/ui/switch.tsx b/src/frontend/src/components/ui/switch.tsx
index 122057cfb..5cc6456c5 100644
--- a/src/frontend/src/components/ui/switch.tsx
+++ b/src/frontend/src/components/ui/switch.tsx
@@ -11,14 +11,14 @@ const Switch = React.forwardRef<
   <SwitchPrimitives.Root
     className={cn(
       "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
+      className,
     )}
     {...props}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/src/frontend/src/components/ui/table.tsx b/src/frontend/src/components/ui/table.tsx
index f08ce3f6b..64a5c207c 100644
--- a/src/frontend/src/components/ui/table.tsx
+++ b/src/frontend/src/components/ui/table.tsx
@@ -55,7 +55,7 @@ const TableRow = React.forwardRef<
     ref={ref}
     className={cn(
       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
+      className,
     )}
     {...props}
   />
@@ -70,7 +70,7 @@ const TableHead = React.forwardRef<
     ref={ref}
     className={cn(
       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
+      className,
     )}
     {...props}
   />
diff --git a/src/frontend/src/components/ui/tabs.tsx b/src/frontend/src/components/ui/tabs.tsx
index f58a5b68f..c0ab2318f 100644
--- a/src/frontend/src/components/ui/tabs.tsx
+++ b/src/frontend/src/components/ui/tabs.tsx
@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
+      className,
     )}
     {...props}
   />
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:hover:bg-secondary/80 data-[state=active]:border data-[state=inactive]:border data-[state=inactive]:border-muted",
-      className
+      className,
     )}
     {...props}
   />
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
     ref={ref}
     className={cn(
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
+      className,
     )}
     {...props}
   />
diff --git a/src/frontend/src/components/ui/textarea.tsx b/src/frontend/src/components/ui/textarea.tsx
index fc0cda2ff..b399e167d 100644
--- a/src/frontend/src/components/ui/textarea.tsx
+++ b/src/frontend/src/components/ui/textarea.tsx
@@ -10,13 +10,13 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <textarea
         className={cn(
           "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
     );
-  }
+  },
 );
 Textarea.displayName = "Textarea";
 
diff --git a/src/frontend/src/components/ui/tooltip.tsx b/src/frontend/src/components/ui/tooltip.tsx
index b2ec0f701..fbfa57eb9 100644
--- a/src/frontend/src/components/ui/tooltip.tsx
+++ b/src/frontend/src/components/ui/tooltip.tsx
@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-      className
+      className,
     )}
     {...props}
   />
diff --git a/src/frontend/src/contexts/alertContext.tsx b/src/frontend/src/contexts/alertContext.tsx
index 62ae2e396..a56b09ebb 100644
--- a/src/frontend/src/contexts/alertContext.tsx
+++ b/src/frontend/src/contexts/alertContext.tsx
@@ -132,7 +132,7 @@ export function AlertProvider({ children }: { children: ReactNode }) {
   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)
+      prevAlertsList.filter((alert) => alert.id !== index),
     );
   }
   return (
diff --git a/src/frontend/src/contexts/darkContext.tsx b/src/frontend/src/contexts/darkContext.tsx
index 2a76d0e53..fd3258c20 100644
--- a/src/frontend/src/contexts/darkContext.tsx
+++ b/src/frontend/src/contexts/darkContext.tsx
@@ -14,7 +14,7 @@ export const darkContext = createContext<darkContextType>(initialValue);
 
 export function DarkProvider({ children }) {
   const [dark, setDark] = useState(
-    JSON.parse(window.localStorage.getItem("isDark")) ?? false
+    JSON.parse(window.localStorage.getItem("isDark")) ?? false,
   );
   useEffect(() => {
     if (dark) {
diff --git a/src/frontend/src/contexts/locationContext.tsx b/src/frontend/src/contexts/locationContext.tsx
index 474062d69..6cc4bc18f 100644
--- a/src/frontend/src/contexts/locationContext.tsx
+++ b/src/frontend/src/contexts/locationContext.tsx
@@ -53,7 +53,7 @@ export const locationContext = createContext<locationContextType>(initialValue);
 export function LocationProvider({ children }: { children: ReactNode }) {
   const [current, setCurrent] = useState(initialValue.current);
   const [isStackedOpen, setIsStackedOpen] = useState(
-    initialValue.isStackedOpen
+    initialValue.isStackedOpen,
   );
   const [showSideBar, setShowSideBar] = useState(initialValue.showSideBar);
   const [extraNavigation, setExtraNavigation] = useState({ title: "" });
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index e3e1303f9..e91536f18 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -57,12 +57,12 @@ const TabsContextInitialValue: TabsContextType = {
   getTweak: {},
   paste: (
     selection: { nodes: any; edges: any },
-    position: { x: number; y: number; paneX?: number; paneY?: number }
+    position: { x: number; y: number; paneX?: number; paneY?: number },
   ) => {},
 };
 
 export const TabsContext = createContext<TabsContextType>(
-  TabsContextInitialValue
+  TabsContextInitialValue,
 );
 
 export function TabsProvider({ children }: { children: ReactNode }) {
@@ -104,7 +104,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       });
       window.localStorage.setItem(
         "tabsData",
-        JSON.stringify({ tabId, flows: Saveflows, id })
+        JSON.stringify({ tabId, flows: Saveflows, id }),
       );
     }
   }
@@ -236,7 +236,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   function updateNodeEdges(
     flow: FlowType,
     node: NodeType,
-    template: APIClassType
+    template: APIClassType,
   ) {
     flow.data.edges.forEach((edge) => {
       if (edge.source === node.id) {
@@ -256,7 +256,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   function updateNodeTemplate(node: NodeType, template: APIClassType) {
     node.data.node.template = updateTemplate(
       template["template"] as unknown as APITemplateType,
-      node.data.node.template as APITemplateType
+      node.data.node.template as APITemplateType,
     );
   }
 
@@ -278,7 +278,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   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)
+      JSON.stringify(flow),
     )}`;
 
     // create a link element and set its properties
@@ -296,7 +296,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   function downloadFlows() {
     downloadFlowsFromDatabase().then((flows) => {
       const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
-        JSON.stringify(flows)
+        JSON.stringify(flows),
       )}`;
 
       // create a link element and set its properties
@@ -383,7 +383,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 
   function paste(
     selectionInstance,
-    position: { x: number; y: number; paneX?: number; paneY?: number }
+    position: { x: number; y: number; paneX?: number; paneY?: number },
   ) {
     let minimumX = Infinity;
     let minimumY = Infinity;
@@ -464,7 +464,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
           animated: targetHandle.split("|")[0] === "Text",
           selected: false,
         },
-        edges.map((e) => ({ ...e, selected: false }))
+        edges.map((e) => ({ ...e, selected: false })),
       );
     });
     reactFlowInstance.setEdges(edges);
@@ -472,7 +472,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 
   const addFlow = async (
     flow?: FlowType,
-    newProject?: Boolean
+    newProject?: Boolean,
   ): Promise<String> => {
     if (newProject) {
       let flowData = extractDataFromFlow(flow);
@@ -503,7 +503,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     } else {
       paste(
         { nodes: flow.data.nodes, edges: flow.data.edges },
-        { x: 10, y: 10 }
+        { x: 10, y: 10 },
       );
     }
   };
@@ -553,7 +553,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
         node.data.node.description = template["description"];
         node.data.node.template = updateTemplate(
           template["template"] as unknown as APITemplateType,
-          node.data.node.template as APITemplateType
+          node.data.node.template as APITemplateType,
         );
       }
     });
diff --git a/src/frontend/src/contexts/typesContext.tsx b/src/frontend/src/contexts/typesContext.tsx
index 3179e582e..151b625ae 100644
--- a/src/frontend/src/contexts/typesContext.tsx
+++ b/src/frontend/src/contexts/typesContext.tsx
@@ -47,7 +47,7 @@ export function TypesProvider({ children }: { children: ReactNode }) {
                 acc[c] = result.data[curr][c];
               });
               return acc;
-            }, {})
+            }, {}),
           );
           // Set the types by reducing over the keys of the result data and updating the accumulator.
           setTypes(
@@ -62,10 +62,10 @@ export function TypesProvider({ children }: { children: ReactNode }) {
                     result.data[curr][c].base_classes?.forEach((b) => {
                       acc[b] = curr;
                     });
-                  }
+                  },
                 );
                 return acc;
-              }, {})
+              }, {}),
           );
         }
         // Clear the interval if successful.
@@ -99,12 +99,12 @@ export function TypesProvider({ children }: { children: ReactNode }) {
 
   function deleteNode(idx: string) {
     reactFlowInstance.setNodes(
-      reactFlowInstance.getNodes().filter((n: Node) => n.id !== idx)
+      reactFlowInstance.getNodes().filter((n: Node) => n.id !== idx),
     );
     reactFlowInstance.setEdges(
       reactFlowInstance
         .getEdges()
-        .filter((ns) => ns.source !== idx && ns.target !== idx)
+        .filter((ns) => ns.source !== idx && ns.target !== idx),
     );
   }
   return (
diff --git a/src/frontend/src/contexts/undoRedoContext.tsx b/src/frontend/src/contexts/undoRedoContext.tsx
index b0f8ca6b9..d077d165e 100644
--- a/src/frontend/src/contexts/undoRedoContext.tsx
+++ b/src/frontend/src/contexts/undoRedoContext.tsx
@@ -52,7 +52,7 @@ export function UndoRedoProvider({ children }) {
   const [past, setPast] = useState<HistoryItem[][]>(flows.map(() => []));
   const [future, setFuture] = useState<HistoryItem[][]>(flows.map(() => []));
   const [tabIndex, setTabIndex] = useState(
-    flows.findIndex((f) => f.id === tabId)
+    flows.findIndex((f) => f.id === tabId),
   );
 
   useEffect(() => {
@@ -70,7 +70,7 @@ export function UndoRedoProvider({ children }) {
       let newPast = cloneDeep(old);
       newPast[tabIndex] = old[tabIndex].slice(
         old[tabIndex].length - defaultOptions.maxHistorySize + 1,
-        old[tabIndex].length
+        old[tabIndex].length,
       );
       newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
       return newPast;
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index cfae748d8..54e442752 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -24,7 +24,7 @@ const GITHUB_API_URL = "https://api.github.com";
 export async function getRepoStars(owner, repo) {
   try {
     const response = await axios.get(
-      `${GITHUB_API_URL}/repos/${owner}/${repo}`
+      `${GITHUB_API_URL}/repos/${owner}/${repo}`,
     );
     return response.data.stargazers_count;
   } catch (error) {
@@ -44,7 +44,7 @@ export async function sendAll(data: sendAllProps) {
 }
 
 export async function postValidateCode(
-  code: string
+  code: string,
 ): Promise<AxiosResponse<errorsTypeAPI>> {
   return await axios.post("/api/v1/validate/code", { code });
 }
@@ -56,7 +56,7 @@ export async function postValidateCode(
  * @returns {Promise<AxiosResponse<PromptTypeAPI>>} A promise that resolves to an AxiosResponse containing the validation results.
  */
 export async function checkPrompt(
-  template: string
+  template: string,
 ): Promise<AxiosResponse<PromptTypeAPI>> {
   return await axios.post("/api/v1/validate/prompt", { template });
 }
@@ -120,7 +120,7 @@ export async function saveFlowToDatabase(newFlow: {
  * @throws Will throw an error if the update fails.
  */
 export async function updateFlowInDatabase(
-  updatedFlow: FlowType
+  updatedFlow: FlowType,
 ): Promise<FlowType> {
   try {
     const response = await axios.patch(`/api/v1/flows/${updatedFlow.id}`, {
@@ -296,7 +296,7 @@ export async function getHealth() {
  *
  */
 export async function getBuildStatus(
-  flowId: string
+  flowId: string,
 ): Promise<BuildStatusTypeAPI> {
   return await axios.get(`/api/v1/build/${flowId}/status`);
 }
@@ -309,7 +309,7 @@ export async function getBuildStatus(
  *
  */
 export async function postBuildInit(
-  flow: FlowType
+  flow: FlowType,
 ): Promise<AxiosResponse<InitTypeAPI>> {
   return await axios.post(`/api/v1/build/init/${flow.id}`, flow);
 }
@@ -325,7 +325,7 @@ export async function postBuildInit(
  */
 export async function uploadFile(
   file: File,
-  id: string
+  id: string,
 ): Promise<AxiosResponse<UploadFileTypeAPI>> {
   const formData = new FormData();
   formData.append("file", file);
diff --git a/src/frontend/src/icons/AzLogo/index.tsx b/src/frontend/src/icons/AzLogo/index.tsx
index 96a8a058a..5152f2471 100644
--- a/src/frontend/src/icons/AzLogo/index.tsx
+++ b/src/frontend/src/icons/AzLogo/index.tsx
@@ -4,5 +4,5 @@ import { ReactComponent as AzSVG } from "./az_logo.svg";
 export const AzIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <AzSVG ref={ref} {...props} />;
-  }
+  },
 );
diff --git a/src/frontend/src/icons/Bing/index.tsx b/src/frontend/src/icons/Bing/index.tsx
index abaf31be4..fa2bd5377 100644
--- a/src/frontend/src/icons/Bing/index.tsx
+++ b/src/frontend/src/icons/Bing/index.tsx
@@ -4,5 +4,5 @@ import { ReactComponent as BingSVG } from "./bing.svg";
 export const BingIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <BingSVG ref={ref} {...props} />;
-  }
+  },
 );
diff --git a/src/frontend/src/icons/FacebookMessenger/index.tsx b/src/frontend/src/icons/FacebookMessenger/index.tsx
index 4450570aa..20246d3f2 100644
--- a/src/frontend/src/icons/FacebookMessenger/index.tsx
+++ b/src/frontend/src/icons/FacebookMessenger/index.tsx
@@ -4,5 +4,5 @@ import { ReactComponent as FacebookMessengerSVG } from "./Facebook_Messenger_log
 export const FBIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <FacebookMessengerSVG ref={ref} {...props} />;
-  }
+  },
 );
diff --git a/src/frontend/src/icons/IFixIt/index.tsx b/src/frontend/src/icons/IFixIt/index.tsx
index 9124266e4..b4bf987d4 100644
--- a/src/frontend/src/icons/IFixIt/index.tsx
+++ b/src/frontend/src/icons/IFixIt/index.tsx
@@ -4,5 +4,5 @@ import { ReactComponent as IFixItSVG } from "./ifixit-seeklogo.com.svg";
 export const IFixIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <IFixItSVG ref={ref} {...props} />;
-  }
+  },
 );
diff --git a/src/frontend/src/icons/Meta/index.tsx b/src/frontend/src/icons/Meta/index.tsx
index 0aabeea74..a08de3ecd 100644
--- a/src/frontend/src/icons/Meta/index.tsx
+++ b/src/frontend/src/icons/Meta/index.tsx
@@ -4,5 +4,5 @@ import { ReactComponent as MetaSVG } from "./meta-icon.svg";
 export const MetaIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <MetaSVG ref={ref} {...props} />;
-  }
+  },
 );
diff --git a/src/frontend/src/icons/Searx/index.tsx b/src/frontend/src/icons/Searx/index.tsx
index c1196c68a..50f059d33 100644
--- a/src/frontend/src/icons/Searx/index.tsx
+++ b/src/frontend/src/icons/Searx/index.tsx
@@ -4,5 +4,5 @@ import { ReactComponent as SearxSVG } from "./Searx_logo.svg";
 export const SearxIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <SearxSVG ref={ref} {...props} />;
-  }
+  },
 );
diff --git a/src/frontend/src/icons/Slack/index.tsx b/src/frontend/src/icons/Slack/index.tsx
index ec5bdc108..4ffb77521 100644
--- a/src/frontend/src/icons/Slack/index.tsx
+++ b/src/frontend/src/icons/Slack/index.tsx
@@ -4,5 +4,5 @@ import { ReactComponent as SlackSVG } from "./slack-icon.svg";
 export const SlackIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <SlackSVG ref={ref} {...props} />;
-  }
+  },
 );
diff --git a/src/frontend/src/icons/Word/index.tsx b/src/frontend/src/icons/Word/index.tsx
index 8c6cf9f31..861bdba49 100644
--- a/src/frontend/src/icons/Word/index.tsx
+++ b/src/frontend/src/icons/Word/index.tsx
@@ -4,5 +4,5 @@ import { ReactComponent as WordSVG } from "./word.svg";
 export const WordIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <WordSVG ref={ref} {...props} />;
-  }
+  },
 );
diff --git a/src/frontend/src/index.tsx b/src/frontend/src/index.tsx
index 088db15a8..585e20009 100644
--- a/src/frontend/src/index.tsx
+++ b/src/frontend/src/index.tsx
@@ -8,13 +8,13 @@ import ContextWrapper from "./contexts";
 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>,
 );
 reportWebVitals();
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 5acd42ec0..d47f6d9b7 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -156,7 +156,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
               t.data.node.template[n].type === "code" ||
               t.data.node.template[n].type === "prompt" ||
               t.data.node.template[n].type === "file" ||
-              t.data.node.template[n].type === "int")
+              t.data.node.template[n].type === "int"),
         )
         .map((n, i) => {
           arrNodesWithValues.push(t["id"]);
@@ -180,7 +180,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
     }
 
     const existingTweak = tweak.current.find((element) =>
-      element.hasOwnProperty(tw)
+      element.hasOwnProperty(tw),
     );
 
     if (existingTweak) {
@@ -327,7 +327,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                         "w-full rounded-lg  bg-muted border-[1px] border-gray-200",
                         1 == 1
                           ? "overflow-scroll overflow-x-hidden custom-scroll"
-                          : "overflow-hidden"
+                          : "overflow-hidden",
                       )}
                     >
                       {flow["data"]["nodes"].map((t: any, index) => (
@@ -368,7 +368,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                             t.data.node.template[n].type ===
                                               "file" ||
                                             t.data.node.template[n].type ===
-                                              "int")
+                                              "int"),
                                       )
                                       .map((n, i) => {
                                         //console.log(t.data.node.template[n]);
@@ -411,7 +411,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                             t["data"]["id"],
                                                             k,
                                                             t.data.node
-                                                              .template[n]
+                                                              .template[n],
                                                           );
                                                         }}
                                                       />
@@ -422,7 +422,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                         content={buildContent(
                                                           t.data.node.template[
                                                             n
-                                                          ].value
+                                                          ].value,
                                                         )}
                                                       >
                                                         <div>
@@ -435,14 +435,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                                 .value,
                                                               t.data,
                                                               t.data.node
-                                                                .template[n]
+                                                                .template[n],
                                                             )}
                                                             onChange={(k) => {
                                                               buildTweakObject(
                                                                 t["data"]["id"],
                                                                 k,
                                                                 t.data.node
-                                                                  .template[n]
+                                                                  .template[n],
                                                               );
                                                             }}
                                                           />
@@ -464,14 +464,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           t.data,
                                                           t.data.node.template[
                                                             n
-                                                          ]
+                                                          ],
                                                         )}
                                                         onChange={(k) => {
                                                           buildTweakObject(
                                                             t["data"]["id"],
                                                             k,
                                                             t.data.node
-                                                              .template[n]
+                                                              .template[n],
                                                           );
                                                         }}
                                                       />
@@ -496,7 +496,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           e,
                                                           t.data.node.template[
                                                             n
-                                                          ]
+                                                          ],
                                                         );
                                                       }}
                                                       size="small"
@@ -512,8 +512,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                         t.data.node.template[n]
                                                           .value,
                                                         t.data,
-                                                        t.data.node.template[n]
-                                                      )
+                                                        t.data.node.template[n],
+                                                      ),
                                                     )}
                                                   >
                                                     <div className="mx-auto">
@@ -526,7 +526,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           ].value ?? ""
                                                         }
                                                         onChange={(
-                                                          k: any
+                                                          k: any,
                                                         ) => {}}
                                                         fileTypes={
                                                           t.data.node.template[
@@ -539,7 +539,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           ].suffixes
                                                         }
                                                         onFileChange={(
-                                                          k: any
+                                                          k: any,
                                                         ) => {}}
                                                       ></InputFileComponent>
                                                     </div>
@@ -554,7 +554,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                         t.data.node.template[n]
                                                           .value,
                                                         t.data,
-                                                        t.data.node.template[n]
+                                                        t.data.node.template[n],
                                                       )}
                                                       onChange={(k) => {
                                                         buildTweakObject(
@@ -562,7 +562,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           k,
                                                           t.data.node.template[
                                                             n
-                                                          ]
+                                                          ],
                                                         );
                                                       }}
                                                     />
@@ -585,14 +585,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           k,
                                                           t.data.node.template[
                                                             n
-                                                          ]
+                                                          ],
                                                         );
                                                       }}
                                                       value={getValue(
                                                         t.data.node.template[n]
                                                           .value,
                                                         t.data,
-                                                        t.data.node.template[n]
+                                                        t.data.node.template[n],
                                                       )}
                                                     ></Dropdown>
                                                   </div>
@@ -606,7 +606,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                         t.data.node.template[n]
                                                           .value,
                                                         t.data,
-                                                        t.data.node.template[n]
+                                                        t.data.node.template[n],
                                                       )}
                                                       onChange={(k) => {
                                                         buildTweakObject(
@@ -614,7 +614,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           k,
                                                           t.data.node.template[
                                                             n
-                                                          ]
+                                                          ],
                                                         );
                                                       }}
                                                     />
@@ -628,8 +628,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                         t.data.node.template[n]
                                                           .value,
                                                         t.data,
-                                                        t.data.node.template[n]
-                                                      )
+                                                        t.data.node.template[n],
+                                                      ),
                                                     )}
                                                   >
                                                     <div className="mx-auto">
@@ -643,14 +643,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           t.data,
                                                           t.data.node.template[
                                                             n
-                                                          ]
+                                                          ],
                                                         )}
                                                         onChange={(k) => {
                                                           buildTweakObject(
                                                             t["data"]["id"],
                                                             k,
                                                             t.data.node
-                                                              .template[n]
+                                                              .template[n],
                                                           );
                                                         }}
                                                       />
@@ -665,8 +665,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                         t.data.node.template[n]
                                                           .value,
                                                         t.data,
-                                                        t.data.node.template[n]
-                                                      )
+                                                        t.data.node.template[n],
+                                                      ),
                                                     )}
                                                   >
                                                     <div className="mx-auto">
@@ -680,14 +680,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           t.data,
                                                           t.data.node.template[
                                                             n
-                                                          ]
+                                                          ],
                                                         )}
                                                         onChange={(k) => {
                                                           buildTweakObject(
                                                             t["data"]["id"],
                                                             k,
                                                             t.data.node
-                                                              .template[n]
+                                                              .template[n],
                                                           );
                                                         }}
                                                       />
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index e2f9c7bca..8ed789c20 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -47,8 +47,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           data.node.template[t].type === "code" ||
           data.node.template[t].type === "prompt" ||
           data.node.template[t].type === "file" ||
-          data.node.template[t].type === "int")
-    ).length
+          data.node.template[t].type === "int"),
+    ).length,
   );
   const [nodeValue, setNodeValue] = useState(null);
   const { closePopUp } = useContext(PopUpContext);
@@ -104,7 +104,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
               "w-full rounded-lg bg-white dark:bg-gray-800 border-[1px] border-gray-200",
               nodeLength > limitScrollFieldsModal
                 ? "overflow-scroll overflow-x-hidden custom-scroll"
-                : "overflow-hidden"
+                : "overflow-hidden",
             )}
           >
             {nodeLength > 0 && (
@@ -131,7 +131,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                             data.node.template[t].type === "code" ||
                             data.node.template[t].type === "prompt" ||
                             data.node.template[t].type === "file" ||
-                            data.node.template[t].type === "int")
+                            data.node.template[t].type === "int"),
                       )
                       .map((n, i) => (
                         <TableRow key={i} className="h-10 dark:border-b-muted">
diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
index a0b0c150c..ab8ded168 100644
--- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
+++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
@@ -22,7 +22,7 @@ export default function ModalField({
   index,
 }) {
   const [enabled, setEnabled] = useState(
-    data.node.template[name]?.value ?? false
+    data.node.template[name]?.value ?? false,
   );
   const display =
     type === "str" ||
@@ -42,12 +42,12 @@ export default function ModalField({
           (t) =>
             t.charAt(0) !== "_" &&
             data.node.template[t].advanced &&
-            data.node.template[t].show
+            data.node.template[t].show,
         ).length -
           1 ===
           index
           ? "pb-4"
-          : ""
+          : "",
       )}
     >
       {display && (
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index add842096..2428f32b2 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -99,10 +99,10 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                             (t) =>
                               t.charAt(0) !== "_" &&
                               data.node.template[t].advanced &&
-                              data.node.template[t].show
+                              data.node.template[t].show,
                           ).length > limitScrollFieldsModal
                             ? "overflow-scroll overflow-x-hidden custom-scroll"
-                            : "overflow-hidden"
+                            : "overflow-hidden",
                         )}
                       >
                         <div className="flex flex-col h-full gap-5">
@@ -111,7 +111,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                               (t) =>
                                 t.charAt(0) !== "_" &&
                                 data.node.template[t].advanced &&
-                                data.node.template[t].show
+                                data.node.template[t].show,
                             )
                             .map((t: string, idx) => {
                               return (
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index 69d382748..bd191aa24 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -54,7 +54,7 @@ export default function ChatInput({
             ? " bg-input text-black dark:bg-gray-700 dark:text-gray-300"
             : "  bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300",
           "form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm" +
-            INPUT_STYLE
+            INPUT_STYLE,
         )}
         placeholder={"Send a message..."}
       />
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 3b44ffe6f..381cbb53d 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -34,12 +34,12 @@ export default function ChatMessage({
         "w-full py-2 pl-2 flex",
         chat.isSend
           ? "bg-background dark:bg-gray-900 "
-          : "bg-input  dark:bg-gray-800"
+          : "bg-input  dark:bg-gray-800",
       )}
     >
       <div
         className={classNames(
-          "rounded-full overflow-hidden w-8 h-8 flex items-center my-3 justify-center"
+          "rounded-full overflow-hidden w-8 h-8 flex items-center my-3 justify-center",
         )}
       >
         {!chat.isSend && (
@@ -105,7 +105,7 @@ export default function ChatMessage({
 
                           children[0] = (children[0] as string).replace(
                             "`▍`",
-                            "▍"
+                            "▍",
                           );
                         }
 
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index a9f6d34b1..bfeaa5f69 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -51,7 +51,7 @@ export default function ChatModal({
     message: string,
     isSend: boolean,
     thought?: string,
-    files?: Array<any>
+    files?: Array<any>,
   ) => {
     setChatHistory((old) => {
       let newChat = _.cloneDeep(old);
@@ -147,10 +147,10 @@ export default function ChatModal({
                       isSend: !chatItem.is_bot,
                       message: chatItem.message,
                       thought: chatItem.intermediate_steps,
-                    }
+                    },
               );
             }
-          }
+          },
         );
         return newChatHistory;
       });
@@ -189,7 +189,7 @@ export default function ChatModal({
     try {
       const urlWs = getWebSocketUrl(
         id.current,
-        process.env.NODE_ENV === "development"
+        process.env.NODE_ENV === "development",
       );
       const newWs = new WebSocket(urlWs);
       newWs.onopen = () => {
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index bc814a9ab..a6819fefc 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -117,7 +117,7 @@ export default function CodeAreaModal({
                   setErrorData({
                     title:
                       "There is something wrong with this code, please review it",
-                  })
+                  }),
                 );
             }}
             type="submit"
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index df5925817..867769fbc 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -36,7 +36,7 @@ export default function ExportModal() {
   const [checked, setChecked] = useState(false);
   const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
   const [description, setDescription] = useState(
-    flows.find((f) => f.id === tabId).description
+    flows.find((f) => f.id === tabId).description,
   );
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index 3136dc1fe..3f4bcf51e 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -27,7 +27,7 @@ export default function FlowSettingsModal() {
   const maxLength = 50;
   const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
   const [description, setDescription] = useState(
-    flows.find((f) => f.id === tabId).description
+    flows.find((f) => f.id === tabId).description,
   );
   function setModalOpen(x: boolean) {
     setOpen(x);
diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index 5b7a42b48..db44707b3 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -81,7 +81,7 @@ export default function ButtonBox({
           bgColor,
           height,
           width,
-          padding
+          padding,
         )}
       >
         <div
@@ -98,7 +98,7 @@ export default function ButtonBox({
             className={classNames(
               "w-full font-semibold break-words text-white dark:text-white/80 truncate-multiline",
               titleFontSize,
-              marginTop
+              marginTop,
             )}
           >
             {title}
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index a2fd29db7..c51fd5277 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -53,7 +53,7 @@ export default function ImportModal() {
         setErrorData({
           title: "there was an error loading examples, please try again",
           list: [error.message],
-        })
+        }),
       );
   }
 
@@ -64,7 +64,7 @@ export default function ImportModal() {
         className={classNames(
           showExamples
             ? "lg:max-w-[650px] h-[600px]"
-            : "lg:max-w-[650px] h-[450px]"
+            : "lg:max-w-[650px] h-[450px]",
         )}
       >
         <DialogHeader>
@@ -104,7 +104,7 @@ export default function ImportModal() {
             "h-full w-full dark:bg-gray-900 overflow-y-auto scrollbar-hide",
             showExamples && !loadingExamples
               ? "flex flex-row start justify-center items-start flex-wrap overflow-auto mx-auto"
-              : "flex flex-row justify-center items-center"
+              : "flex flex-row justify-center items-center",
           )}
         >
           {!showExamples && (
diff --git a/src/frontend/src/pages/CommunityPage/index.tsx b/src/frontend/src/pages/CommunityPage/index.tsx
index 871b27d5e..5c42bd40f 100644
--- a/src/frontend/src/pages/CommunityPage/index.tsx
+++ b/src/frontend/src/pages/CommunityPage/index.tsx
@@ -28,7 +28,7 @@ export default function CommunityPage() {
         setErrorData({
           title: "there was an error loading examples, please try again",
           list: [error.message],
-        })
+        }),
       );
   }
   const navigate = useNavigate();
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 5cffe0395..8eb3e8057 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -111,10 +111,10 @@ export default function Page({ flow }: { flow: FlowType }) {
   const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
   const { setErrorData } = useContext(alertContext);
   const [nodes, setNodes, onNodesChange] = useNodesState(
-    flow.data?.nodes ?? []
+    flow.data?.nodes ?? [],
   );
   const [edges, setEdges, onEdgesChange] = useEdgesState(
-    flow.data?.edges ?? []
+    flow.data?.edges ?? [],
   );
   const { setViewport } = useReactFlow();
   const edgeUpdateSuccessful = useRef(true);
@@ -156,7 +156,7 @@ export default function Page({ flow }: { flow: FlowType }) {
         };
       });
     },
-    [onEdgesChange, setNodes, setTabsState, tabId]
+    [onEdgesChange, setNodes, setTabsState, tabId],
   );
 
   const onNodesChangeMod = useCallback(
@@ -171,7 +171,7 @@ export default function Page({ flow }: { flow: FlowType }) {
         };
       });
     },
-    [onNodesChange, setTabsState, tabId]
+    [onNodesChange, setTabsState, tabId],
   );
 
   const onConnect = useCallback(
@@ -188,15 +188,15 @@ export default function Page({ flow }: { flow: FlowType }) {
                 : "stroke-gray-900 dark:stroke-gray-200",
             animated: params.targetHandle.split("|")[0] === "Text",
           },
-          eds
-        )
+          eds,
+        ),
       );
       setNodes((x) => {
         let newX = _.cloneDeep(x);
         return newX;
       });
     },
-    [setEdges, setNodes, takeSnapshot]
+    [setEdges, setNodes, takeSnapshot],
   );
 
   const onNodeDragStart: NodeDragHandler = useCallback(() => {
@@ -230,7 +230,7 @@ export default function Page({ flow }: { flow: FlowType }) {
 
       // Extract the data from the drag event and parse it as a JSON object
       let data: { type: string; node?: APIClassType } = JSON.parse(
-        event.dataTransfer.getData("json")
+        event.dataTransfer.getData("json"),
       );
 
       // If data type is not "chatInput" or if there are no "chatInputNode" nodes present in the ReactFlow instance, create a new node
@@ -275,7 +275,7 @@ export default function Page({ flow }: { flow: FlowType }) {
       setNodes((nds) => nds.concat(newNode));
     },
     // Specify dependencies for useCallback
-    [getNodeId, reactFlowInstance, setErrorData, setNodes, takeSnapshot]
+    [getNodeId, reactFlowInstance, setErrorData, setNodes, takeSnapshot],
   );
 
   useEffect(() => {
@@ -291,11 +291,12 @@ export default function Page({ flow }: { flow: FlowType }) {
       takeSnapshot();
       setEdges(
         edges.filter(
-          (ns) => !mynodes.some((n) => ns.source === n.id || ns.target === n.id)
-        )
+          (ns) =>
+            !mynodes.some((n) => ns.source === n.id || ns.target === n.id),
+        ),
       );
     },
-    [takeSnapshot, edges, setEdges]
+    [takeSnapshot, edges, setEdges],
   );
 
   const onEdgeUpdateStart = useCallback(() => {
@@ -309,7 +310,7 @@ export default function Page({ flow }: { flow: FlowType }) {
         setEdges((els) => updateEdge(oldEdge, newConnection, els));
       }
     },
-    []
+    [],
   );
 
   const onEdgeUpdateEnd = useCallback((_, edge) => {
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 5da2d8e28..f4c051c10 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -30,7 +30,7 @@ export default function ExtraSidebar() {
   const isPending = tabsState[tabId]?.isPending;
   function onDragStart(
     event: React.DragEvent<any>,
-    data: { type: string; node?: APIClassType }
+    data: { type: string; node?: APIClassType },
   ) {
     //start drag event
     var crt = event.currentTarget.cloneNode(true);
@@ -49,7 +49,7 @@ export default function ExtraSidebar() {
       Object.keys(data).forEach((d: keyof APIObjectType, i) => {
         ret[d] = {};
         let keys = Object.keys(data[d]).filter((nd) =>
-          nd.toLowerCase().includes(e.toLowerCase())
+          nd.toLowerCase().includes(e.toLowerCase()),
         );
         keys.forEach((element) => {
           ret[d][element] = data[d][element];
@@ -77,7 +77,7 @@ export default function ExtraSidebar() {
         <ShadTooltip content="Export" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
+              "hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md",
             )}
             onClick={(event) => {
               openPopUp(<ExportModal />);
@@ -89,7 +89,7 @@ export default function ExtraSidebar() {
         <ShadTooltip content="Code" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
+              "hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md",
             )}
             onClick={(event) => {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
@@ -176,8 +176,8 @@ export default function ExtraSidebar() {
                             onDragEnd={() => {
                               document.body.removeChild(
                                 document.getElementsByClassName(
-                                  "cursor-grabbing"
-                                )[0]
+                                  "cursor-grabbing",
+                                )[0],
                               );
                             }}
                           >
@@ -195,7 +195,7 @@ export default function ExtraSidebar() {
               </DisclosureComponent>
             ) : (
               <div key={i}></div>
-            )
+            ),
           )}
       </div>
     </div>
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index a60c928b6..0af822ec4 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -19,8 +19,8 @@ const NodeToolbarComponent = (props) => {
           props.data.node.template[t].type === "prompt" ||
           props.data.node.template[t].type === "file" ||
           props.data.node.template[t].type === "Any" ||
-          props.data.node.template[t].type === "int")
-    ).length
+          props.data.node.template[t].type === "int"),
+    ).length,
   );
 
   const { setLastCopiedSelection, paste } = useContext(TabsContext);
@@ -43,7 +43,7 @@ const NodeToolbarComponent = (props) => {
           <ShadTooltip content="Duplicate" side="top">
             <button
               className={classNames(
-                "hover:dark:hover:bg-[#242f47] text-foreground transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
+                "hover:dark:hover:bg-[#242f47] text-foreground transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10",
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -58,7 +58,7 @@ const NodeToolbarComponent = (props) => {
                     y: 10,
                     paneX: reactFlowInstance.getNode(props.data.id).position.x,
                     paneY: reactFlowInstance.getNode(props.data.id).position.y,
-                  }
+                  },
                 );
               }}
             >
@@ -79,7 +79,7 @@ const NodeToolbarComponent = (props) => {
                 "hover:dark:hover:bg-[#242f47]  transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10" +
                   (props.data.node.documentation === ""
                     ? " text-muted-foreground"
-                    : " text-foreground")
+                    : " text-foreground"),
               )}
               target="_blank"
               rel="noopener noreferrer"
@@ -101,7 +101,7 @@ const NodeToolbarComponent = (props) => {
                 "hover:dark:hover:bg-[#242f47]  transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md" +
                   (nodeLength == 0
                     ? " text-muted-foreground"
-                    : " text-foreground")
+                    : " text-foreground"),
               )}
               onClick={(event) => {
                 if (nodeLength == 0) {
diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts
index 8f823535c..8a1a5e0c2 100644
--- a/src/frontend/src/types/tabs/index.ts
+++ b/src/frontend/src/types/tabs/index.ts
@@ -24,7 +24,7 @@ export type TabsContextType = {
   setTabsState: Dispatch<SetStateAction<TabsState>>;
   paste: (
     selection: { nodes: any; edges: any },
-    position: { x: number; y: number; paneX?: number; paneY?: number }
+    position: { x: number; y: number; paneX?: number; paneY?: number },
   ) => void;
   lastCopiedSelection: { nodes: any; edges: any };
   setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void;
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 61fb25977..3a5ac277e 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -467,7 +467,7 @@ export function cn(...inputs: ClassValue[]) {
 export function measureTextHeight(
   text: string,
   width: number,
-  fontSize: number
+  fontSize: number,
 ) {
   const charHeight = fontSize;
   const lineHeight = charHeight * 1.5;
@@ -494,7 +494,7 @@ export function toCamelCase(str: string) {
     .map((word, index) =>
       index === 0
         ? word.toLowerCase()
-        : word[0].toUpperCase() + word.slice(1).toLowerCase()
+        : word[0].toUpperCase() + word.slice(1).toLowerCase(),
     )
     .join("");
 }
@@ -555,7 +555,7 @@ export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
 
 export function isValidConnection(
   { source, target, sourceHandle, targetHandle }: Connection,
-  reactFlowInstance: ReactFlowInstance
+  reactFlowInstance: ReactFlowInstance,
 ) {
   if (
     sourceHandle.split("|")[0] === targetHandle.split("|")[0] ||
@@ -602,7 +602,7 @@ export function removeApiKeys(flow: FlowType): FlowType {
 
 export function updateObject<T extends Record<string, any>>(
   reference: T,
-  objectToUpdate: T
+  objectToUpdate: T,
 ): T {
   let clonedObject = _.cloneDeep(objectToUpdate);
   // Loop through each key in the object to update
@@ -633,7 +633,7 @@ export function debounce(func, wait) {
 
 export function updateTemplate(
   reference: APITemplateType,
-  objectToUpdate: APITemplateType
+  objectToUpdate: APITemplateType,
 ): APITemplateType {
   let clonedObject: APITemplateType = _.cloneDeep(reference);
 
@@ -691,7 +691,7 @@ export function toTitleCase(str: string) {
     .map((word, index) => {
       if (index === 0) {
         return checkUpperWords(
-          word[0].toUpperCase() + word.slice(1).toLowerCase()
+          word[0].toUpperCase() + word.slice(1).toLowerCase(),
         );
       }
       return checkUpperWords(word.toLowerCase());
@@ -703,7 +703,7 @@ export function toTitleCase(str: string) {
     .map((word, index) => {
       if (index === 0) {
         return checkUpperWords(
-          word[0].toUpperCase() + word.slice(1).toLowerCase()
+          word[0].toUpperCase() + word.slice(1).toLowerCase(),
         );
       }
       return checkUpperWords(word.toLowerCase());
@@ -772,7 +772,7 @@ export function groupByFamily(data, baseClasses) {
   });
 
   let uniq = arrOfParent.filter(
-    (item, index) => arrOfParent.indexOf(item) === index
+    (item, index) => arrOfParent.indexOf(item) === index,
   );
 
   Object.keys(data).map((d) => {
@@ -792,7 +792,7 @@ export function groupByFamily(data, baseClasses) {
 
   let groupedBy = arrOfType.filter((object, index, self) => {
     const foundIndex = self.findIndex(
-      (o) => o.family === object.family && o.type === object.type
+      (o) => o.family === object.family && o.type === object.type,
     );
     return foundIndex === index;
   });
@@ -818,7 +818,7 @@ export function buildTweaks(flow) {
 }
 export function validateNode(
   n: NodeType,
-  reactFlowInstance: ReactFlowInstance
+  reactFlowInstance: ReactFlowInstance,
 ): Array<string> {
   if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
     return [
@@ -844,16 +844,16 @@ export function validateNode(
             .some(
               (e) =>
                 e.targetHandle.split("|")[1] === t &&
-                e.targetHandle.split("|")[2] === n.id
+                e.targetHandle.split("|")[2] === n.id,
             )
           ? [
               `${type} is missing ${
                 template.display_name || toNormalCase(template[t].name)
               }.`,
             ]
-          : []
+          : [],
       ),
-    [] as string[]
+    [] as string[],
   );
 }
 
@@ -878,7 +878,7 @@ export function getRandomDescription(): string {
 export function getRandomName(
   retry: number = 0,
   noSpace: boolean = false,
-  maxRetries: number = 3
+  maxRetries: number = 3,
 ): string {
   const left: string[] = ADJECTIVES;
   const right: string[] = NOUNS;

From d0621efd1cf1511f9fe813a45db034627d429acf Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Wed, 5 Jul 2023 18:13:32 -0300
Subject: [PATCH 43/53] feat: Add card component and unused extrasidebar
 tailwind constants classes

---
 .../ExtraSidebarComponent/index.tsx           | 36 ++++-----
 .../src/components/cardComponent/index.tsx    | 18 ++---
 src/frontend/src/index.css                    | 76 ++++++++++++++++++-
 3 files changed, 102 insertions(+), 28 deletions(-)

diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index 7efef4ec0..318971dd5 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -18,13 +18,13 @@ export default function ExtraSidebar() {
       <aside
         className={` ${
           isStackedOpen ? "w-52" : "w-0 "
-        } flex flex-shrink-0 flex-col overflow-hidden border-r  transition-all duration-500`}
+        } unused-side-bar-aside`}
       >
-        <div className="flex h-full  w-52 flex-col items-start overflow-y-auto border bg-background scrollbar-hide">
-          <div className="flex w-full flex-grow flex-col">
+        <div className="unused-side-bar-arrangement">
+          <div className="unused-side-bar-division">
             {extraNavigation.options ? (
               <div className="p-4">
-                <nav className="flex-1 space-y-1">
+                <nav className="unused-side-bar-nav">
                   {extraNavigation.options.map((item) =>
                     !item.children ? (
                       <div key={item.name}>
@@ -32,17 +32,17 @@ export default function ExtraSidebar() {
                           to={item.href}
                           className={classNames(
                             item.href.split("/")[2] === current[4]
-                              ? "bg-muted text-foreground"
-                              : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
-                            "group flex w-full items-center rounded-md py-2 pl-2 text-sm font-medium"
+                              ? "unused-side-bar-link-colors-true"
+                              : "unused-side-bar-link-colors-false",
+                            "unused-side-bar-link"
                           )}
                         >
                           <item.icon
                             className={classNames(
                               item.href.split("/")[2] === current[4]
                                 ? "text-ring"
-                                : "text-ring group-hover:text-accent-foreground",
-                              "mr-3 flex-shrink-0 h-6 w-6"
+                                : "unused-side-bar-icon-false",
+                              "unused-side-bar-icon"
                             )}
                           />
                           {item.name}
@@ -59,20 +59,20 @@ export default function ExtraSidebar() {
                             <Disclosure.Button
                               className={classNames(
                                 item.href.split("/")[2] === current[4]
-                                  ? "bg-muted text-foreground"
-                                  : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
-                                "group flex w-full items-center rounded-md py-2 pl-2 pr-1 text-left text-sm font-medium focus:outline-none focus:ring-1 focus:ring-ring"
+                                  ? "unused-side-bar-link-colors-true"
+                                  : "unused-side-bar-link-colors-false",
+                                "unused-side-bar-disclosure"
                               )}
                             >
                               <item.icon
-                                className="mr-3 h-6 w-6 flex-shrink-0 text-ring group-hover:text-accent-foreground"
+                                className="unused-side-bar-disclosure-icon"
                                 aria-hidden="true"
                               />
                               <span className="flex-1">{item.name}</span>
                               <svg
                                 className={classNames(
-                                  open ? "text-ring rotate-90" : "text-ring",
-                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-accent-foreground"
+                                  open ? "unused-side-bar-svg-true" : "text-ring",
+                                  "unused-side-bar-svg"
                                 )}
                                 viewBox="0 0 20 20"
                                 aria-hidden="true"
@@ -90,9 +90,9 @@ export default function ExtraSidebar() {
                                   to={subItem.href}
                                   className={classNames(
                                     subItem.href.split("/")[3] === current[5]
-                                      ? "bg-muted text-foreground"
-                                      : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
-                                    "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
+                                      ? "unused-side-bar-link-colors-true"
+                                      : "unused-side-bar-link-colors-false",
+                                    "unused-side-bar-disclosure-panel"
                                   )}
                                 >
                                   {subItem.name}
diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 307568413..112744ab1 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -28,24 +28,24 @@ export const CardComponent = ({
   return (
     <Card className="group">
       <CardHeader>
-        <CardTitle className="flex w-full items-center gap-4">
+        <CardTitle className="card-component-title-display">
           <span
             className={
-              "flex h-7 w-7 items-center justify-center rounded-full text-2xl " +
+              "card-component-image " +
               gradients[parseInt(flow.id.slice(0, 12), 16) % gradients.length]
             }
           ></span>
-          <span className="inline-block w-full flex-1 break-words truncate-doubleline">
+          <span className="card-component-title-size">
             {flow.name}
           </span>
           {onDelete && (
-            <button className="flex self-start" onClick={onDelete}>
-              <Trash2 className="h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100" />
+            <button className="card-component-delete-button" onClick={onDelete}>
+              <Trash2 className="card-component-delete-icon" />
             </button>
           )}
         </CardTitle>
-        <CardDescription className="pb-2 pt-2">
-          <div className="truncate-doubleline">
+        <CardDescription className="card-component-desc">
+          <div className="card-component-desc-text">
             {flow.description}
             {/* {flow.description} */}
           </div>
@@ -53,8 +53,8 @@ export const CardComponent = ({
       </CardHeader>
 
       <CardFooter>
-        <div className="flex w-full items-end justify-between gap-2">
-          <div className="flex flex-wrap gap-2">
+        <div className="card-component-footer-arrangement">
+          <div className="card-component-footer">
             {/* <Badge variant="secondary">Agent</Badge>
             <Badge variant="secondary">
               <div className="w-3">
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 37b26ab1c..00b31bd37 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -354,7 +354,7 @@ The cursor: default; property value restores the browser's default cursor style
 
   .alert-icon {
     @apply h-5 w-5
-  } /*error-build-message-circle*/
+  }
   .alert-font-size {
     @apply text-sm font-medium
   }
@@ -387,4 +387,78 @@ The cursor: default; property value restores the browser's default cursor style
   .success-alert-message {
     @apply alert-font-size text-success-foreground
   }
+
+  .card-component-title-display {
+    @apply round-button-div flex-max-width
+  }
+  .card-component-image {
+    @apply flex h-7 w-7 items-center justify-center rounded-full text-2xl
+  }
+  .card-component-title-size {
+    @apply inline-block w-full flex-1 break-words truncate-doubleline
+  }
+  .card-component-delete-button {
+    @apply flex self-start
+  }
+  .card-component-delete-icon {
+    @apply h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100
+  }
+  .card-component-desc {
+    @apply pb-2 pt-2
+  }
+  .card-component-desc-text {
+    @apply truncate-doubleline
+  }
+  .card-component-footer-arrangement {
+    @apply flex-max-width items-end justify-between gap-2
+  }
+  .card-component-footer {
+    @apply flex flex-wrap gap-2
+  }
+
+  .unused-side-bar-aside {
+    @apply flex flex-shrink-0 flex-col overflow-hidden border-r  transition-all duration-500
+  }
+  .unused-side-bar-arrangement {
+    @apply flex h-full  w-52 flex-col items-start overflow-y-auto border bg-background scrollbar-hide
+  }
+  .unused-side-bar-division {
+    @apply flex-max-width flex-grow flex-col
+  }
+  .unused-side-bar-nav {
+    @apply flex-1 space-y-1
+  }
+  .unused-side-bar-link {
+    @apply flex-max-width items-center rounded-md py-2 pl-2 text-sm font-medium
+  }
+  .unused-side-bar-link-colors-true {
+    @apply bg-muted text-foreground
+  }
+  .unused-side-bar-link-colors-false {
+    @apply bg-background text-muted-foreground hover:bg-muted hover:text-foreground
+  }
+  .unused-side-bar-icon {
+    @apply mr-3 flex-shrink-0 h-6 w-6
+  }
+  .unused-side-bar-icon-false {
+    @apply text-ring group-hover:text-accent-foreground
+  }
+  .unused-side-bar-disclosure {
+    @apply unused-side-bar-link pr-1 text-left
+  }
+  .unused-side-bar-disclosure:focus {
+    @apply focus:outline-none focus:ring-1 focus:ring-ring
+  }
+  .unused-side-bar-disclosure-icon {
+    @apply unused-side-bar-icon text-ring group-hover:text-accent-foreground
+  }
+  .unused-side-bar-svg-true {
+    @apply text-ring rotate-90
+  }
+  .unused-side-bar-svg {
+    @apply ml-3 h-5 w-5 flex-shrink-0 duration-150 ease-in-out group-hover:text-accent-foreground
+  }
+  .unused-side-bar-disclosure-panel {
+    @apply flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium
+  }
 }
\ No newline at end of file

From dccb9c27dbcedbe0a6dbe0babc137dc9340db398 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Wed, 5 Jul 2023 19:08:33 -0300
Subject: [PATCH 44/53] feat: Add CodeArea and Dropdown component tailwind
 constant classes

---
 .../EditFlowSettingsComponent/index.tsx       |  4 +-
 .../components/codeAreaComponent/index.tsx    |  6 +-
 .../components/dropdownComponent/index.tsx    | 24 ++++----
 .../src/components/floatComponent/index.tsx   |  2 +-
 src/frontend/src/index.css                    | 60 +++++++++++++++++++
 5 files changed, 78 insertions(+), 18 deletions(-)

diff --git a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
index 7ce5f4f26..4c1d18b75 100644
--- a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
+++ b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
@@ -44,10 +44,10 @@ export const EditFlowSettings: React.FC<InputProps> = ({
   return (
     <>
       <Label>
-        <div className="flex justify-between">
+        <div className="edit-flow-arrangement">
           <span className="font-medium">Name</span>{" "}
           {isMaxLength && (
-            <span className="ml-10 animate-pulse text-status-red">
+            <span className="edit-flow-span">
               Character limit reached
             </span>
           )}
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index d4bf6f716..e0799ffac 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -30,10 +30,10 @@ export default function CodeAreaComponent({
   return (
     <div
       className={
-        disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
+        disabled ? "code-area-component" : "w-full"
       }
     >
-      <div className="flex w-full items-center">
+      <div className="code-area-input-positioning">
         <span
           onClick={() => {
             openPopUp(
@@ -68,7 +68,7 @@ export default function CodeAreaComponent({
           }}
         >
           {!editNode && (
-            <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground  ml-3" />
+            <ExternalLink strokeWidth={1.5} className="code-area-external-link" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 67447a21f..704c6bff5 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -39,20 +39,20 @@ export default function Dropdown({
               <Listbox.Button
                 className={
                   editNode
-                    ? "border-1 relative pr-8 input-edit-node"
-                    : "py-2 pl-3 pr-10 text-left input-primary"
+                    ? "dropdown-component-outline"
+                    : "dropdown-component-false-outline"
                 }
               >
-                <span className="block w-full truncate bg-background">
+                <span className="dropdown-component-display">
                   {internalValue}
                 </span>
                 <span
                   className={
-                    "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+                    "dropdown-component-arrow"
                   }
                 >
                   <ChevronsUpDown
-                    className="h-5 w-5 text-muted-foreground"
+                    className="dropdown-component-arrow-color"
                     aria-hidden="true"
                   />
                 </span>
@@ -68,8 +68,8 @@ export default function Dropdown({
                 <Listbox.Options
                   className={classNames(
                     editNode
-                      ? "z-10 mt-1 max-h-60 w-[215px] overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-                      : "nowheel overflow-y z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm ",
+                      ? "dropdown-component-true-options "
+                      : "dropdown-component-false-options ",
                     apiModal ? "mb-2 w-[250px]" : "absolute"
                   )}
                 >
@@ -80,8 +80,8 @@ export default function Dropdown({
                         classNames(
                           active ? " bg-accent" : "",
                           editNode
-                            ? "relative cursor-default select-none py-0.5 pl-3 pr-12"
-                            : "relative cursor-default select-none py-2 pl-3 pr-9"
+                            ? "dropdown-component-false-option"
+                            : "dropdown-component-true-option"
                         )
                       }
                       value={option}
@@ -101,14 +101,14 @@ export default function Dropdown({
                             <span
                               className={classNames(
                                 active ? "text-background " : "",
-                                "absolute inset-y-0 right-0 flex items-center pr-4"
+                                "dropdown-component-choosal"
                               )}
                             >
                               <Check
                                 className={
                                   active
-                                    ? "h-5 w-5 text-black"
-                                    : "h-5 w-5 text-black"
+                                    ? "dropdown-component-check-icon"
+                                    : "dropdown-component-check-icon"
                                 }
                                 aria-hidden="true"
                               />
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 523892595..b76256840 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -32,7 +32,7 @@ export default function FloatComponent({
   return (
     <div
       className={
-        "w-full " + (disabled ? "pointer-events-none cursor-not-allowed" : "")
+        "w-full " + (disabled ? "float-component-pointer" : "")
       }
     >
       <input
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 00b31bd37..ba7c657f4 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -461,4 +461,64 @@ The cursor: default; property value restores the browser's default cursor style
   .unused-side-bar-disclosure-panel {
     @apply flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium
   }
+
+  .code-area-component {
+    @apply pointer-events-none w-full cursor-not-allowed
+  }
+  .code-area-input-positioning {
+    @apply flex-max-width items-center
+  }
+  .code-area-external-link {
+    @apply w-6 h-6 ml-3
+  }
+  .code-area-external-link:hover {
+    @apply hover:text-accent-foreground
+  }
+
+  .dropdown-component-outline {
+    @apply relative pr-8 input-edit-node
+  }
+  .dropdown-component-false-outline {
+    @apply py-2 pl-3 pr-10 text-left input-primary
+  }
+  .dropdown-component-display {
+    @apply block w-full truncate bg-background
+  }
+  .dropdown-component-arrow {
+    @apply pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2
+  }
+  .dropdown-component-arrow-color {
+    @apply h-5 w-5 extra-side-bar-save-disable
+  }
+  .dropdown-component-options {
+    @apply z-10 mt-1 max-h-60 overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm
+  }
+  .dropdown-component-true-options {
+    @apply dropdown-component-options w-[215px]
+  }
+  .dropdown-component-false-options {
+    @apply dropdown-component-options w-full
+  }
+  .dropdown-component-option {
+    @apply relative cursor-default select-none
+  }
+  .dropdown-component-false-option {
+    @apply dropdown-component-option py-0.5 pl-3 pr-12
+  }
+  .dropdown-component-true-option {
+    @apply dropdown-component-option py-2 pl-3 pr-9
+  }
+  .dropdown-component-choosal {
+    @apply absolute inset-y-0 right-0 flex items-center pr-4
+  }
+  .dropdown-component-check-icon {
+    @apply h-5 w-5 text-black
+  }
+
+  .edit-flow-arrangement {
+    @apply flex justify-between
+  }
+  .edit-flow-span {
+    @apply ml-10 animate-pulse text-status-red
+  }
 }
\ No newline at end of file

From cbda5fc1462ac5e4f57dba08c149001c8867d38c Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Wed, 5 Jul 2023 19:09:15 -0300
Subject: [PATCH 45/53] fix: commit saving error

---
 src/frontend/src/index.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index ba7c657f4..b088671cd 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -521,4 +521,8 @@ The cursor: default; property value restores the browser's default cursor style
   .edit-flow-span {
     @apply ml-10 animate-pulse text-status-red
   }
+
+  .float-component-pointer {
+    @apply pointer-events-none cursor-not-allowed
+  }
 }
\ No newline at end of file

From 9d6d2fd88a8cc9cb2484695343d30cb3f6f8550c Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Wed, 5 Jul 2023 19:54:10 -0300
Subject: [PATCH 46/53] feat: add header and input component tailwind constant
 classes

---
 .../components/menuBar/index.tsx              | 16 ++---
 .../src/components/headerComponent/index.tsx  | 32 ++++-----
 .../src/components/inputComponent/index.tsx   | 14 ++--
 .../components/inputFileComponent/index.tsx   |  4 +-
 src/frontend/src/index.css                    | 67 +++++++++++++++++++
 5 files changed, 100 insertions(+), 33 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 4109e318f..41cb0bef9 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -47,19 +47,19 @@ export const MenuBar = ({ flows, tabId }) => {
   let current_flow = flows.find((flow) => flow.id === tabId);
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="round-button-div">
       <Link to="/">
         <ChevronLeft className="w-4" />
       </Link>
-      <div className="flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium">
+      <div className="header-menu-bar">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
-              className="flex max-w-[200px] items-center gap-2"
+              className="header-menu-bar-display"
               variant="primary"
               size="sm"
             >
-              <div className="flex-1 truncate">{current_flow.name}</div>
+              <div className="header-menu-flow-name">{current_flow.name}</div>
               <ChevronDown className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
@@ -71,7 +71,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Plus className="mr-2 h-4 w-4" />
+              <Plus className="header-menu-options" />
               New
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -80,7 +80,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Settings2 className="mr-2 h-4 w-4 " />
+              <Settings2 className="header-menu-options " />
               Settings
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -89,7 +89,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Undo className="mr-2 h-4 w-4 " />
+              <Undo className="header-menu-options " />
               Undo
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -98,7 +98,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Redo className="mr-2 h-4 w-4 " />
+              <Redo className="header-menu-options " />
               Redo
             </DropdownMenuItem>
             <DropdownMenuSeparator />
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 342054b10..0eedbff59 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -36,8 +36,8 @@ export default function Header() {
     fetchStars();
   }, []);
   return (
-    <div className="flex h-12 w-full items-center justify-between border-b bg-muted">
-      <div className="flex w-96 items-center justify-start gap-2">
+    <div className="header-arrangement">
+      <div className="header-start-display">
         <Link to="/">
           <span className="ml-4 text-2xl">⛓️</span>
         </Link>
@@ -45,7 +45,7 @@ export default function Header() {
           <MenuBar flows={flows} tabId={tabId} />
         )}
       </div>
-      <div className="flex items-center gap-2">
+      <div className="round-button-div">
         <Link to="/">
           <Button
             className="gap-2"
@@ -69,17 +69,17 @@ export default function Header() {
           </Button>
         </Link>
       </div>
-      <div className="flex w-96 justify-end px-2">
-        <div className="ml-auto mr-2 flex items-center gap-5">
+      <div className="header-end-division">
+        <div className="header-end-display">
           <a
             href="https://github.com/logspace-ai/langflow"
             target="_blank"
             rel="noreferrer"
-            className="inline-flex shadow-sm items-center justify-center text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground  border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
+            className="header-github-link"
           >
             <FaGithub className="mr-2 h-5 w-5" />
             Star
-            <div className="-mr-px ml-2 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm">
+            <div className="header-github-display">
               {stars}
             </div>
           </a>
@@ -89,7 +89,7 @@ export default function Header() {
             rel="noreferrer"
             className="text-muted-foreground"
           >
-            <FaTwitter className="h-5 w-5 hover:text-accent-foreground" />
+            <FaTwitter className="side-bar-button-size" />
           </a>
           <a
             href="https://discord.gg/EqksyE2EX9"
@@ -97,24 +97,24 @@ export default function Header() {
             rel="noreferrer"
             className="text-muted-foreground"
           >
-            <FaDiscord className="h-5 w-5 hover:text-accent-foreground" />
+            <FaDiscord className="side-bar-button-size" />
           </a>
 
           <Separator orientation="vertical" />
           <button
-            className="text-muted-foreground hover:text-accent-foreground "
+            className="extra-side-bar-save-disable"
             onClick={() => {
               setDark(!dark);
             }}
           >
             {dark ? (
-              <SunIcon className="h-5 w-5" />
+              <SunIcon className="side-bar-button-size" />
             ) : (
-              <MoonIcon className="h-5 w-5" />
+              <MoonIcon className="side-bar-button-size" />
             )}
           </button>
           <button
-            className="text-muted-foreground hover:text-accent-foreground relative"
+            className="extra-side-bar-save-disable relative"
             onClick={(event: React.MouseEvent<HTMLElement>) => {
               setNotificationCenter(false);
               const { top, left } = (
@@ -128,15 +128,15 @@ export default function Header() {
                   >
                     <AlertDropdown />
                   </div>
-                  <div className="fixed left-0 top-0 h-screen w-screen"></div>
+                  <div className="header-notifications-box"></div>
                 </>
               );
             }}
           >
             {notificationCenter && (
-              <div className="absolute right-[3px] h-1.5 w-1.5 rounded-full bg-destructive"></div>
+              <div className="header-notifications"></div>
             )}
-            <Bell className="h-5 w-5" aria-hidden="true" />
+            <Bell className="side-bar-button-size" aria-hidden="true" />
           </button>
         </div>
       </div>
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 4182dbbb2..61942f834 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -32,7 +32,7 @@ export default function InputComponent({
     <div
       className={
         disabled
-          ? "pointer-events-none relative cursor-not-allowed"
+          ? "input-component-div"
           : "relative"
       }
     >
@@ -61,8 +61,8 @@ export default function InputComponent({
         <button
           className={classNames(
             editNode
-              ? "absolute inset-y-0 right-0 items-center pr-2 text-muted-foreground"
-              : "absolute inset-y-0 right-0 items-center px-4 text-muted-foreground"
+              ? "input-component-true-button"
+              : "input-component-false-button"
           )}
           onClick={() => {
             setPwdVisible(!pwdVisible);
@@ -78,8 +78,8 @@ export default function InputComponent({
                 stroke="currentColor"
                 className={classNames(
                   editNode
-                    ? "absolute bottom-0.5 right-2 h-5 w-5"
-                    : "absolute bottom-2 right-3 h-5 w-5"
+                    ? "input-component-true-svg"
+                    : "input-component-false-svg"
                 )}
               >
                 <path
@@ -97,8 +97,8 @@ export default function InputComponent({
                 stroke="currentColor"
                 className={classNames(
                   editNode
-                    ? "absolute bottom-0.5 right-2 h-5 w-5"
-                    : "absolute bottom-2 right-3 h-5 w-5"
+                    ? "input-component-true-svg"
+                    : "input-component-false-svg"
                 )}
               >
                 <path
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index edfc8e39d..d909ebd86 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -94,10 +94,10 @@ export default function InputFileComponent({
   return (
     <div
       className={
-        disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
+        disabled ? "input-component-div" : "w-full"
       }
     >
-      <div className="flex w-full items-center">
+      <div className="input-file-component">
         <span
           onClick={handleButtonClick}
           className={
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index b088671cd..1582cc137 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -176,9 +176,15 @@ The cursor: default; property value restores the browser's default cursor style
   .extra-side-bar-save-disable {
     @apply text-muted-foreground
   }
+  .extra-side-bar-save-disable:hover {
+    @apply hover:text-accent-foreground
+  }
   .side-bar-button-size {
     @apply h-5 w-5
   }
+  .side-bar-button-size:hover {
+    @apply hover:text-accent-foreground
+  }
   .side-bar-buttons-arrangement {
     @apply mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2
   }
@@ -525,4 +531,65 @@ The cursor: default; property value restores the browser's default cursor style
   .float-component-pointer {
     @apply pointer-events-none cursor-not-allowed
   }
+
+  .header-menu-bar {
+    @apply flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium
+  }
+  .header-menu-bar-display {
+    @apply flex max-w-[200px] items-center gap-2
+  }
+  .header-menu-flow-name {
+    @apply flex-1 truncate
+  }
+  .header-menu-options {
+    @apply mr-2 h-4 w-4
+  }
+
+  .header-arrangement {
+    @apply flex-max-width h-12 items-center justify-between border-b bg-muted
+  }
+  .header-start-display {
+    @apply flex w-96 items-center justify-start gap-2
+  }
+  .header-end-division {
+    @apply flex w-96 justify-end px-2
+  }
+  .header-end-display {
+    @apply ml-auto mr-2 flex items-center gap-5
+  }
+  .header-github-link {
+    @apply inline-flex shadow-sm items-center justify-center text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground  border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md
+  }
+  .header-github-display {
+    @apply -mr-px ml-2 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm
+  }
+  .header-notifications-box {
+    @apply fixed left-0 top-0 h-screen w-screen
+  }
+  .header-notifications {
+    @apply absolute right-[3px] h-1.5 w-1.5 rounded-full bg-destructive
+  }
+
+  .input-component-div {
+    @apply pointer-events-none relative cursor-not-allowed
+  }
+  .input-component-button {
+    @apply absolute inset-y-0 right-0 items-center text-muted-foreground
+  }
+  .input-component-true-button {
+    @apply input-component-button pr-2
+  }
+  .input-component-false-button {
+    @apply input-component-button px-4
+  }
+  .input-component-true-svg {
+    @apply absolute bottom-0.5 right-2 side-bar-button-size
+  }
+  .input-component-false-svg {
+    @apply absolute bottom-2 right-3 side-bar-button-size
+  }
+  
+  .input-file-component {
+    @apply flex-max-width items-center
+  }
 }
\ No newline at end of file

From 0f97dfe6786e876db4ef546f2efbe13280bf96ce Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 5 Jul 2023 20:18:04 -0300
Subject: [PATCH 47/53] Formatting

---
 .../ExtraSidebarComponent/index.tsx           |  6 +--
 .../chatComponent/buildTrigger/index.tsx      | 11 ++++-
 .../chatComponent/chatTrigger/index.tsx       |  5 +-
 .../components/codeAreaComponent/index.tsx    |  8 +++-
 .../components/dropdownComponent/index.tsx    |  4 +-
 .../src/components/headerComponent/index.tsx  |  4 +-
 .../components/inputFileComponent/index.tsx   |  5 +-
 .../src/components/promptComponent/index.tsx  | 13 +++--
 .../components/textAreaComponent/index.tsx    | 15 ++++--
 src/frontend/src/components/ui/dialog.tsx     |  2 +-
 src/frontend/src/contexts/tabsContext.tsx     |  6 ++-
 src/frontend/src/modals/ApiModal/index.tsx    | 47 +++++++++----------
 .../src/modals/EditNodeModal/index.tsx        |  4 +-
 .../src/modals/codeAreaModal/index.tsx        |  4 +-
 src/frontend/src/modals/exportModal/index.tsx |  4 +-
 .../src/modals/genericModal/index.tsx         |  6 +--
 src/frontend/src/modals/importModal/index.tsx |  5 +-
 .../src/modals/textAreaModal/index.tsx        |  2 +-
 .../components/DisclosureComponent/index.tsx  |  4 +-
 .../extraSidebarComponent/index.tsx           | 21 +++++----
 20 files changed, 103 insertions(+), 73 deletions(-)

diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index 7efef4ec0..5273b7147 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -42,7 +42,7 @@ export default function ExtraSidebar() {
                               item.href.split("/")[2] === current[4]
                                 ? "text-ring"
                                 : "text-ring group-hover:text-accent-foreground",
-                              "mr-3 flex-shrink-0 h-6 w-6"
+                              "mr-3 h-6 w-6 flex-shrink-0"
                             )}
                           />
                           {item.name}
@@ -71,8 +71,8 @@ export default function ExtraSidebar() {
                               <span className="flex-1">{item.name}</span>
                               <svg
                                 className={classNames(
-                                  open ? "text-ring rotate-90" : "text-ring",
-                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-accent-foreground"
+                                  open ? "rotate-90 text-ring" : "text-ring",
+                                  "transition-rotate ml-3 h-5 w-5 flex-shrink-0 duration-150 ease-in-out group-hover:text-accent-foreground"
                                 )}
                                 viewBox="0 0 20 20"
                                 aria-hidden="true"
diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index e31303a68..f59fea7a6 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -156,7 +156,11 @@ export default function BuildTrigger({
       leaveFrom="translate-y-0"
       leaveTo="translate-y-96"
     >
-      <div className={'round-buttons-position' + (isBuilt ? " bottom-20" : " bottom-4")}>
+      <div
+        className={
+          "round-buttons-position" + (isBuilt ? " bottom-20" : " bottom-4")
+        }
+      >
         <div
           className={`${eventClick} round-button-form`}
           onClick={() => {
@@ -175,7 +179,10 @@ export default function BuildTrigger({
                   value={progress}
                 ></RadialProgressComponent>
               ) : isBuilding ? (
-                <Loading strokeWidth={1.5} className="build-trigger-loading-icon" />
+                <Loading
+                  strokeWidth={1.5}
+                  className="build-trigger-loading-icon"
+                />
               ) : (
                 <Zap strokeWidth={1.5} className="build-trigger-icon" />
               )}
diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
index 8d1d3f42b..bf6e744fa 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -31,10 +31,7 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
       leaveTo="translate-y-96"
     >
       <div className="message-button-position">
-        <div
-          className="round-button-form"
-          onClick={handleClick}
-        >
+        <div className="round-button-form" onClick={handleClick}>
           <button>
             <div className="round-button-div">
               <MessagesSquare
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index d4bf6f716..458edcc76 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -49,7 +49,8 @@ export default function CodeAreaComponent({
           className={
             editNode
               ? "input-edit-node input-dialog"
-              : "input-primary input-dialog " + (disabled ? "input-disable" : "")
+              : "input-dialog input-primary " +
+                (disabled ? "input-disable" : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
@@ -68,7 +69,10 @@ export default function CodeAreaComponent({
           }}
         >
           {!editNode && (
-            <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground  ml-3" />
+            <ExternalLink
+              strokeWidth={1.5}
+              className="ml-3 h-6 w-6  hover:text-accent-foreground"
+            />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 67447a21f..b275f83f7 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -39,8 +39,8 @@ export default function Dropdown({
               <Listbox.Button
                 className={
                   editNode
-                    ? "border-1 relative pr-8 input-edit-node"
-                    : "py-2 pl-3 pr-10 text-left input-primary"
+                    ? "border-1 input-edit-node relative pr-8"
+                    : "input-primary py-2 pl-3 pr-10 text-left"
                 }
               >
                 <span className="block w-full truncate bg-background">
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 342054b10..f60f65f61 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -75,7 +75,7 @@ export default function Header() {
             href="https://github.com/logspace-ai/langflow"
             target="_blank"
             rel="noreferrer"
-            className="inline-flex shadow-sm items-center justify-center text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground  border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
+            className="inline-flex h-9 items-center justify-center rounded-md border border-input px-3 pr-0 text-sm font-medium text-muted-foreground shadow-sm ring-offset-background  hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
           >
             <FaGithub className="mr-2 h-5 w-5" />
             Star
@@ -114,7 +114,7 @@ export default function Header() {
             )}
           </button>
           <button
-            className="text-muted-foreground hover:text-accent-foreground relative"
+            className="relative text-muted-foreground hover:text-accent-foreground"
             onClick={(event: React.MouseEvent<HTMLElement>) => {
               setNotificationCenter(false);
               const { top, left } = (
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index edfc8e39d..a0039abf1 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -110,7 +110,10 @@ export default function InputFileComponent({
         </span>
         <button onClick={handleButtonClick}>
           {!editNode && !loading && (
-            <FileSearch2 strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground" />
+            <FileSearch2
+              strokeWidth={1.5}
+              className="h-6 w-6 hover:text-accent-foreground"
+            />
           )}
           {!editNode && loading && (
             <span className="loading loading-spinner loading-sm pointer-events-none h-8 pl-3"></span>
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index cea548d8b..e4349c385 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -31,7 +31,7 @@ export default function PromptAreaComponent({
         disabled ? "pointer-events-none w-full cursor-not-allowed" : " w-full"
       }
     >
-      <div className="w-full flex items-center">
+      <div className="flex w-full items-center">
         <span
           onClick={() => {
             openPopUp(
@@ -50,7 +50,9 @@ export default function PromptAreaComponent({
           className={
             editNode
               ? " input-edit-node " + " input-dialog "
-              : (disabled ? " input-disable " : "") + " input-primary " + " input-dialog "
+              : (disabled ? " input-disable " : "") +
+                " input-primary " +
+                " input-dialog "
           }
         >
           {myValue !== "" ? myValue : "Type your prompt here"}
@@ -71,7 +73,12 @@ export default function PromptAreaComponent({
             );
           }}
         >
-          {!editNode && <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground ml-3" />}
+          {!editNode && (
+            <ExternalLink
+              strokeWidth={1.5}
+              className="ml-3 h-6 w-6 hover:text-accent-foreground"
+            />
+          )}
         </button>
       </div>
     </div>
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 61ce7891b..ec82242f2 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -30,9 +30,7 @@ export default function TextAreaComponent({
     <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
       <div
         className={
-          editNode
-            ? "w-full items-center"
-            : "w-full flex items-center gap-3"
+          editNode ? "w-full items-center" : "flex w-full items-center gap-3"
         }
       >
         <span
@@ -53,7 +51,9 @@ export default function TextAreaComponent({
           className={
             editNode
               ? "input-edit-node " + " input-dialog "
-              : " input_dialog " + "px-3 py-2" + (disabled ? " input-disable " : "")
+              : " input_dialog " +
+                "px-3 py-2" +
+                (disabled ? " input-disable " : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
@@ -74,7 +74,12 @@ export default function TextAreaComponent({
             );
           }}
         >
-          {!editNode && <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground ml-3" />}
+          {!editNode && (
+            <ExternalLink
+              strokeWidth={1.5}
+              className="ml-3 h-6 w-6 hover:text-accent-foreground"
+            />
+          )}
         </button>
       </div>
     </div>
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
index f17576064..a02379087 100644
--- a/src/frontend/src/components/ui/dialog.tsx
+++ b/src/frontend/src/components/ui/dialog.tsx
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed gap-3 z-50 grid w-full rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+        "fixed z-50 grid w-full gap-3 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
         className
       )}
       {...props}
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index be8afddb2..25b2fda1a 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -288,7 +288,11 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     // create a link element and set its properties
     const link = document.createElement("a");
     link.href = jsonString;
-    link.download = `${flowName && flowName != "" ? flowName : flows.find((f) => f.id === tabId).name}.json`;
+    link.download = `${
+      flowName && flowName != ""
+        ? flowName
+        : flows.find((f) => f.id === tabId).name
+    }.json`;
 
     // simulate a click on the link element to trigger the download
     link.click();
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index d069763ff..b37f6fe40 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -104,11 +104,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
   useEffect(() => {
     if (closeEdit !== "") {
       tweak.current = getTweak;
-      if(tweak.current.length > 0){
+      if (tweak.current.length > 0) {
         setActiveTab("3");
         openAccordions();
-      }
-      else{
+      } else {
         startTweaks();
       }
     } else {
@@ -250,25 +249,25 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
 
   function openAccordions() {
     let accordionsToOpen = [];
-      tweak.current.forEach((el) => {
-        Object.keys(el).forEach((key) => {
-          if (Object.keys(el[key]).length > 0) {
-            accordionsToOpen.push(key);
-            setOpenAccordion(accordionsToOpen);
-          }
-        });
+    tweak.current.forEach((el) => {
+      Object.keys(el).forEach((key) => {
+        if (Object.keys(el[key]).length > 0) {
+          accordionsToOpen.push(key);
+          setOpenAccordion(accordionsToOpen);
+        }
       });
+    });
   }
 
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[80vw] h-[80vh]">
+      <DialogContent className="h-[80vh] lg:max-w-[80vw]">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
             <Code2
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              className="h-6 w-6 pl-1 text-gray-800 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -277,7 +276,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
 
         <Tabs
           value={activeTab}
-          className="w-full h-full overflow-hidden text-center bg-muted rounded-md border"
+          className="h-full w-full overflow-hidden rounded-md border bg-muted text-center"
           onValueChange={(value) => {
             setActiveTab(value);
             if (value === "3") {
@@ -296,7 +295,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
             {Number(activeTab) < 3 && (
               <div className="float-right">
                 <button
-                  className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
+                  className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
                   onClick={copyToClipboard}
                 >
                   {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
@@ -309,12 +308,12 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           {tabs.map((tab, index) => (
             <TabsContent
               value={index.toString()}
-              className="overflow-hidden w-full h-full px-4 pb-4 -mt-1"
+              className="-mt-1 h-full w-full overflow-hidden px-4 pb-4"
               key={index} // Remember to add a unique key prop
             >
               {index < 3 ? (
                 <SyntaxHighlighter
-                  className="w-full overflow-auto h-[60vh]"
+                  className="h-[60vh] w-full overflow-auto"
                   language={tab.mode}
                   style={oneDark}
                 >
@@ -322,10 +321,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                 </SyntaxHighlighter>
               ) : index === 3 ? (
                 <>
-                  <div className="flex w-full h-full mt-2">
+                  <div className="mt-2 flex h-full w-full">
                     <div
                       className={classNames(
-                        "w-full rounded-lg bg-muted h-[60vh]",
+                        "h-[60vh] w-full rounded-lg bg-muted",
                         1 == 1
                           ? "overflow-scroll overflow-x-hidden custom-scroll"
                           : "overflow-hidden"
@@ -338,14 +337,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                               trigger={t["data"]["id"]}
                               open={openAccordion}
                             >
-                              <div className="flex flex-col gap-5 h-fit">
+                              <div className="flex h-fit flex-col gap-5">
                                 <Table className="table-fixed bg-muted outline-1">
-                                  <TableHeader className="border-input text-xs font-medium text-ring h-10">
+                                  <TableHeader className="h-10 border-input text-xs font-medium text-ring">
                                     <TableRow className="dark:border-b-muted">
                                       <TableHead className="h-7 text-center">
                                         PARAM
                                       </TableHead>
-                                      <TableHead className="p-0 h-7 text-center">
+                                      <TableHead className="h-7 p-0 text-center">
                                         VALUE
                                       </TableHead>
                                     </TableRow>
@@ -379,11 +378,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                             key={i}
                                             className="h-10 dark:border-b-muted"
                                           >
-                                            <TableCell className="p-0 text-center text-gray-900 text-sm">
+                                            <TableCell className="p-0 text-center text-sm text-gray-900">
                                               {n}
                                             </TableCell>
-                                            <TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300">
-                                              <div className="w-[250px] m-auto">
+                                            <TableCell className="p-0 text-center text-xs text-gray-900 dark:text-gray-300">
+                                              <div className="m-auto w-[250px]">
                                                 {t.data.node.template[n]
                                                   .type === "str" &&
                                                 !t.data.node.template[n]
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 1d0d912eb..8df70ff26 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -81,7 +81,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger asChild></DialogTrigger>
-      <DialogContent className="lg:max-w-[700px] sm:max-w-[600px]">
+      <DialogContent className="sm:max-w-[600px] lg:max-w-[700px]">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">{data.type}</span>
@@ -135,7 +135,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                       )
                       .map((n, i) => (
                         <TableRow key={i} className="h-10">
-                          <TableCell className="p-0 text-center text-sm text-foreground truncate sm:px-3">
+                          <TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
                             {data.node.template[n].name
                               ? data.node.template[n].name
                               : data.node.template[n].display_name}
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index be6e2e1fb..10e1b7ab9 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -53,8 +53,8 @@ export default function CodeAreaModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
             <TerminalSquare
-            strokeWidth={1.5}
-              className="h-6 w-6 text-primary pl-1 "
+              strokeWidth={1.5}
+              className="h-6 w-6 pl-1 text-primary "
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index e65eb537e..bef5b9244 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -47,8 +47,8 @@ export default function ExportModal() {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Export</span>
             <Download
-            strokeWidth={1.5}
-              className="h-6 w-6 text-foreground pl-1"
+              strokeWidth={1.5}
+              className="h-6 w-6 pl-1 text-foreground"
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 46291405b..e9dad4f4a 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -56,8 +56,8 @@ export default function GenericModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
             <FileText
-            strokeWidth={1.5}
-              className="h-6 w-6 text-primary pl-1 "
+              strokeWidth={1.5}
+              className="h-6 w-6 pl-1 text-primary "
               aria-hidden="true"
             />
           </DialogTitle>
@@ -80,7 +80,7 @@ export default function GenericModal({
         <div className="mt-2 flex h-full w-full">
           <Textarea
             ref={ref}
-            className=" h-[300px] w-full form-primary "
+            className=" form-primary h-[300px] w-full "
             value={myValue}
             onChange={(e) => {
               setMyValue(e.target.value);
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index ffd51c8d0..eb52ee6ff 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -160,7 +160,10 @@ export default function ImportModal() {
                     bgColor="bg-medium-emerald "
                     description={example.description ?? "Prebuilt Examples"}
                     icon={
-                      <DocumentDuplicateIcon strokeWidth={1.5} className="h-6 w-6 flex-shrink-0" />
+                      <DocumentDuplicateIcon
+                        strokeWidth={1.5}
+                        className="h-6 w-6 flex-shrink-0"
+                      />
                     }
                     onClick={() => {
                       addFlow(example, false);
diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx
index a41a39ba4..f1e47b738 100644
--- a/src/frontend/src/modals/textAreaModal/index.tsx
+++ b/src/frontend/src/modals/textAreaModal/index.tsx
@@ -92,7 +92,7 @@ export default function TextAreaModal({
                       <div className="w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6">
                         <textarea
                           ref={ref}
-                          className="form-input h-full w-full form-primary"
+                          className="form-primary form-input h-full w-full"
                           value={myValue}
                           onChange={(e) => {
                             setMyValue(e.target.value);
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index a35b8163e..2f3b1d4ff 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -15,9 +15,7 @@ export default function DisclosureComponent({
             <Disclosure.Button className="components-disclosure-arrangement">
               <div className="flex gap-4">
                 <Icon strokeWidth={1.5} size={22} className="text-primary" />
-                <span className="components-disclosure-title">
-                  {title}
-                </span>
+                <span className="components-disclosure-title">{title}</span>
               </div>
               <div className="components-disclosure-div">
                 {buttons.map((x, index) => (
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 4d490a818..94eafa739 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -69,27 +69,29 @@ export default function ExtraSidebar() {
               uploadFlow();
             }}
           >
-            <FileUp strokeWidth={1.5} className="side-bar-button-size "></FileUp>
+            <FileUp
+              strokeWidth={1.5}
+              className="side-bar-button-size "
+            ></FileUp>
           </button>
         </ShadTooltip>
 
         <ShadTooltip content="Export" side="top">
           <button
-            className={classNames(
-              "extra-side-bar-buttons"
-            )}
+            className={classNames("extra-side-bar-buttons")}
             onClick={(event) => {
               openPopUp(<ExportModal />);
             }}
           >
-            <FileDown strokeWidth={1.5} className="side-bar-button-size"></FileDown>
+            <FileDown
+              strokeWidth={1.5}
+              className="side-bar-button-size"
+            ></FileDown>
           </button>
         </ShadTooltip>
         <ShadTooltip content="Code" side="top">
           <button
-            className={classNames(
-              "extra-side-bar-buttons"
-            )}
+            className={classNames("extra-side-bar-buttons")}
             onClick={(event) => {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
             }}
@@ -110,7 +112,8 @@ export default function ExtraSidebar() {
             <Save
               strokeWidth={1.5}
               className={
-                "side-bar-button-size" + (isPending ? " " : " extra-side-bar-save-disable")
+                "side-bar-button-size" +
+                (isPending ? " " : " extra-side-bar-save-disable")
               }
             ></Save>
           </button>

From c6c86403efc6c4827bc41fe61ebd2b70407e9b56 Mon Sep 17 00:00:00 2001
From: Ri <80408777+bad-boy-ri-ri@users.noreply.github.com>
Date: Thu, 6 Jul 2023 04:14:54 -0400
Subject: [PATCH 48/53] Update deploy_langflow_gcp_spot.sh

---
 scripts/deploy_langflow_gcp_spot.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/deploy_langflow_gcp_spot.sh b/scripts/deploy_langflow_gcp_spot.sh
index 9291ddcc3..6a25899bc 100644
--- a/scripts/deploy_langflow_gcp_spot.sh
+++ b/scripts/deploy_langflow_gcp_spot.sh
@@ -35,7 +35,7 @@ fi
 # Create a firewall rule to allow IAP traffic
 firewall_iap_exists=$(gcloud compute firewall-rules list --filter="name=allow-iap" --format="value(name)")
 if [[ -z "$firewall_iap_exists" ]]; then
-    gcloud compute firewall-rules create allow-iap --network $VPC_NAME --allow tcp:80,tcp:443,tcp:22,:tcp:3389 --source-ranges 35.235.240.0/20 --direction INGRESS
+    gcloud compute firewall-rules create allow-iap --network $VPC_NAME --allow tcp:80,tcp:443,tcp:22,tcp:3389 --source-ranges 35.235.240.0/20 --direction INGRESS
 fi
 
 # Define the startup script as a multiline Bash here-doc

From 002db8bbb4843658683ddc4732322d8d6603090d Mon Sep 17 00:00:00 2001
From: Ri <80408777+bad-boy-ri-ri@users.noreply.github.com>
Date: Thu, 6 Jul 2023 04:16:24 -0400
Subject: [PATCH 49/53] Update GCP_DEPLOYMENT.md correct url for opening spot

---
 GCP_DEPLOYMENT.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/GCP_DEPLOYMENT.md b/GCP_DEPLOYMENT.md
index 36c81e19f..e00e9b1f8 100644
--- a/GCP_DEPLOYMENT.md
+++ b/GCP_DEPLOYMENT.md
@@ -13,7 +13,7 @@ This script sets up a Debian-based VM with the Langflow package, Nginx, and the
 
 ## Spot/Preemptible Instance
 
-[![Open in Cloud Shell - Spot Instance](https://gstatic.com/cloudssh/images/open-btn.svg)](https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/genome21/langflow&working_dir=scripts&shellonly=true&tutorial=walkthroughtutorial_spot.md)
+[![Open in Cloud Shell - Spot Instance](https://gstatic.com/cloudssh/images/open-btn.svg)](https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/logspace-ai/langflow&working_dir=scripts&shellonly=true&tutorial=walkthroughtutorial_spot.md)
 
 When running as a [spot (preemptible) instance](https://cloud.google.com/compute/docs/instances/preemptible), the code and VM will behave the same way as in a regular instance, executing the startup script to configure the environment, install necessary dependencies, and run the Langflow application. However, **due to the nature of spot instances, the VM may be terminated at any time if Google Cloud needs to reclaim the resources**. This makes spot instances suitable for fault-tolerant, stateless, or interruptible workloads that can handle unexpected terminations and restarts.
 

From 6eea2d8d58c65e20703d6ad26afdb5cd4c673019 Mon Sep 17 00:00:00 2001
From: Zac Li <zac.li@jina.ai>
Date: Thu, 6 Jul 2023 16:57:20 +0800
Subject: [PATCH 50/53] feat: Customize DB path for JCloud app

---
 src/backend/langflow/lcserve.py | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/backend/langflow/lcserve.py b/src/backend/langflow/lcserve.py
index de1d2806d..affc0ff79 100644
--- a/src/backend/langflow/lcserve.py
+++ b/src/backend/langflow/lcserve.py
@@ -1,5 +1,13 @@
 # This file is used by lc-serve to load the mounted app and serve it.
 
+import os
+
+# Use the JCLOUD_WORKSPACE for db URL if it's provided by JCloud.
+if 'JCLOUD_WORKSPACE' in os.environ:
+    os.environ[
+        'LANGFLOW_DATABASE_URL'
+    ] = f"sqlite:///{os.environ['JCLOUD_WORKSPACE']}/langflow.db"
+
 from langflow.main import setup_app
 from langflow.utils.logger import configure
 

From 7fc86a52af3916f811328ac297c5f934ecbe06c4 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Thu, 6 Jul 2023 11:14:48 -0300
Subject: [PATCH 51/53] feat: Add modals tailwind constants

---
 src/frontend/src/App.tsx                      |   2 +-
 .../src/components/toggleComponent/index.tsx  |   8 +-
 src/frontend/src/index.css                    | 300 ++++++++++++++++++
 src/frontend/src/modals/ApiModal/index.tsx    |  10 +-
 .../src/modals/EditNodeModal/index.tsx        |  12 +-
 src/frontend/src/modals/NodeModal/index.tsx   |  34 +-
 .../src/modals/chatModal/chatInput/index.tsx  |   8 +-
 .../chatModal/chatMessage/codeBlock/index.tsx |   8 +-
 .../modals/chatModal/chatMessage/index.tsx    |  23 +-
 .../modals/chatModal/fileComponent/index.tsx  |  14 +-
 src/frontend/src/modals/chatModal/index.tsx   |  24 +-
 .../src/modals/codeAreaModal/index.tsx        |   2 +-
 .../modals/importModal/buttonBox/index.tsx    |   2 +-
 src/frontend/src/modals/importModal/index.tsx |  22 +-
 src/frontend/src/modals/promptModal/index.tsx |  36 +--
 .../src/modals/textAreaModal/index.tsx        |  34 +-
 16 files changed, 419 insertions(+), 120 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index f4df0f00b..4497c9af0 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -139,7 +139,7 @@ export default function App() {
       </ErrorBoundary>
       <div></div>
       <div
-        className="fixed bottom-5 left-5 flex flex-col-reverse"
+        className="app-div"
         style={{ zIndex: 999 }}
       >
         {alertsList.map((alert) => (
diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx
index 760d8957b..c7b72a025 100644
--- a/src/frontend/src/components/toggleComponent/index.tsx
+++ b/src/frontend/src/components/toggleComponent/index.tsx
@@ -22,14 +22,14 @@ export default function ToggleComponent({
         }}
         className={classNames(
           enabled ? "bg-primary" : "bg-input",
-          "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-1 focus:ring-primary focus:ring-offset-1"
+          "toggle-component-switch "
         )}
       >
         <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",
+            "toggle-component-span",
             disabled ? "bg-input " : "bg-background"
           )}
         >
@@ -38,7 +38,7 @@ export default function ToggleComponent({
               enabled
                 ? "opacity-0 duration-100 ease-out"
                 : "opacity-100 duration-200 ease-in",
-              "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
+              "toggle-component-second-span"
             )}
             aria-hidden="true"
           ></span>
@@ -47,7 +47,7 @@ export default function ToggleComponent({
               enabled
                 ? "opacity-100 duration-200 ease-in"
                 : "opacity-0 duration-100 ease-out",
-              "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
+              "toggle-component-second-span"
             )}
             aria-hidden="true"
           ></span>
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 1582cc137..e116b2c17 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -592,4 +592,304 @@ The cursor: default; property value restores the browser's default cursor style
   .input-file-component {
     @apply flex-max-width items-center
   }
+
+  .toggle-component-switch {
+    @apply 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
+  }
+  .toggle-component-switch:focus {
+    @apply focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-1
+  }
+  .toggle-component-span {
+    @apply pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out
+  }
+  .toggle-component-second-span {
+    @apply absolute inset-0 flex h-full w-full items-center justify-center transition-opacity
+  }
+
+  .app-div {
+    @apply fixed bottom-5 left-5 flex flex-col-reverse
+  }
+
+  .chat-input-modal-txtarea {
+    @apply form-input block w-full rounded-md border-ring pr-10  custom-scroll sm:text-sm
+  }
+  .chat-input-modal-div {
+    @apply absolute bottom-0.5 right-3
+  }
+  .chat-input-modal-lock {
+    @apply side-bar-button-size animate-pulse text-ring
+  }
+  .chat-input-modal-send {
+    @apply side-bar-button-size text-ring hover:text-muted-foreground
+  }
+
+  .code-block-modal {
+    @apply flex items-center justify-between px-4 py-1.5
+  }
+  .code-block-modal-span {
+    @apply text-xs lowercase text-background
+  }
+  .code-block-modal-button {
+    @apply flex items-center gap-1.5 rounded bg-none p-1 text-xs text-background
+  }
+
+  .chat-message-modal {
+    @apply flex-max-width py-2 pl-2
+  }
+  .chat-message-modal-div {
+    @apply my-3 flex h-8 w-8 items-center justify-center overflow-hidden rounded-full
+  }
+  .chat-message-modal-img {
+    @apply absolute scale-150 transition-opacity duration-500
+  }
+  .chat-message-modal-display {
+    @apply flex-max-width items-center text-start
+  }
+  .chat-message-modal-text {
+    @apply relative inline-block w-full text-start text-sm  font-normal text-muted-foreground
+  }
+  .chat-message-modal-icon-div {
+    @apply absolute -left-2 -top-1 cursor-pointer
+  }
+  .chat-message-modal-thought {
+    @apply ml-3 inline-block h-full w-[95%] rounded-md border border-ring bg-muted px-2 pb-3 pt-3 text-start text-muted-foreground chat-message-modal-thought-cursor
+  }
+  .chat-message-modal-thought-cursor {
+    @apply cursor-pointer scrollbar-hide overflow-scroll
+  }
+  .chat-message-modal-markdown {
+    @apply w-full px-4 pb-3 pr-8 pt-3
+  }
+  .chat-message-modal-markdown-span {
+    @apply mt-1 animate-pulse cursor-default
+  }
+  .chat-message-modal-alert {
+    @apply inline-block px-3 text-start text-muted-foreground
+  }
+
+  .file-card-modal-image-div {
+    @apply absolute right-0 top-0 rounded-bl-lg bg-muted px-1 text-sm font-bold text-foreground
+  }
+  .file-card-modal-image-button {
+    @apply px-2 py-1 text-ring
+  }
+  .file-card-modal-button {
+    @apply flex w-1/2 items-center justify-between rounded border border-ring bg-muted px-2 py-2 text-foreground shadow hover:drop-shadow-lg
+  }
+  .file-card-modal-div {
+    @apply mr-2 flex-max-width items-center gap-2 text-current
+  }
+  .file-card-modal-footer {
+    @apply flex flex-col items-start
+  }
+  .file-card-modal-name {
+    @apply truncate text-sm text-current
+  }
+  .file-card-modal-type {
+    @apply truncate text-xs text-ring
+  }
+
+  .send-message-modal-transition {
+    @apply fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm transition-opacity
+  }
+  .chat-modal-box {
+    @apply fixed inset-0 z-10 overflow-y-auto
+  }
+  .chat-modal-box-div {
+    @apply flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0
+  }
+  .chat-modal-dialog-panel {
+    @apply relative flex h-[95%] w-[690px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl drop-shadow-2xl transition-all
+  }
+  .chat-modal-dialog-panel-div {
+    @apply relative w-full p-4
+  }
+  .chat-modal-dialog-trash-panel {
+    @apply absolute right-10 top-2 z-30 text-muted-foreground hover:text-status-red
+  }
+  .chat-modal-dialog-x-panel {
+    @apply absolute right-2 top-1.5 z-30 text-muted-foreground hover:text-status-red
+  }
+  .chat-modal-dialog-history {
+    @apply flex-max-width h-full flex-col items-center overflow-scroll border-t bg-background scrollbar-hide
+  }
+  .chat-modal-dialog-span-box {
+    @apply flex-max-width h-full flex-col items-center justify-center text-center align-middle
+  }
+  .chat-modal-dialog-desc {
+    @apply w-2/4 rounded-md border border-input bg-muted px-6 py-8
+  }
+  .chat-modal-input-div {
+    @apply flex-max-width flex-col items-center justify-between border-t bg-background p-3
+  }
+  .chat-modal-input {
+    @apply relative mt-1 w-full rounded-md shadow-sm
+  }
+  .code-area-modal-editor-div {
+    @apply mt-2 flex-max-width h-full
+  }
+  .code-area-modal-editor-box {
+    @apply h-[300px] w-full rounded-lg border-[1px] border-ring custom-scroll
+  }
+
+  .edit-node-modal-variable {
+    @apply h-5 w-5 stroke-2 pe-1 text-muted-foreground
+  }
+  .edit-node-modal-span {
+    @apply text-sm font-semibold text-primary
+  }
+  .edit-node-modal-arrangement {
+    @apply flex-max-width h-fit max-h-[400px]
+  }
+  .edit-node-modal-box {
+    @apply w-full rounded-lg border-[1px] border-input bg-background
+  }
+  .edit-node-modal-table {
+    @apply flex h-fit flex-col gap-5
+  }
+  .edit-node-modal-table-header {
+    @apply h-10 border-input text-xs font-medium text-ring
+  }
+  .edit-node-modal-table-cell {
+    @apply p-0 text-center text-sm text-foreground truncate sm:px-3
+  }
+  .edit-node-modal-second-cell {
+    @apply w-[300px] p-0 text-center text-xs text-foreground
+  }
+
+  .generic-modal-txtarea-div {
+    @apply mt-2 flex-max-width h-full
+  }
+
+  .button-box-modal-div {
+    @apply flex transform flex-col items-center justify-center rounded-lg border border-ring text-center shadow hover:scale-105 hover:shadow-lg
+  }
+
+  .dialog-header-modal-div {
+    @apply absolute left-0 top-2 z-50 hidden pl-4 pt-4 sm:block
+  }
+  .dialog-header-modal-button {
+    @apply rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 
+  }
+
+  .dialog-modal-examples-div {
+    @apply h-full w-full overflow-y-auto scrollbar-hide
+  }
+  .dialog-modal-example-true {
+    @apply mx-auto flex flex-row flex-wrap items-start justify-center overflow-auto
+  }
+  .dialog-modal-example-false {
+    @apply flex flex-row items-center justify-center
+  }
+  .dialog-modal-button-box-div {
+    @apply flex-max-width h-full items-center justify-evenly
+  }
+  .document-icon {
+    @apply h-10 w-10 flex-shrink-0
+  }
+  .loading-component-div {
+    @apply flex items-center justify-center align-middle
+  }
+  .dialog-modal-footer {
+    @apply mt-2 flex-max-width items-center justify-center
+  }
+  .dialog-modal-footer-link {
+    @apply flex items-center justify-center text-muted-foreground
+  }
+
+  .node-modal-div {
+    @apply fixed inset-0 bg-ring bg-opacity-75 transition-opacity
+  }
+  .node-modal-dialog-arrangement {
+    @apply fixed inset-0 z-10 overflow-y-auto
+  }
+  .node-modal-dialog-div {
+    @apply flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0
+  }
+  .node-modal-dialog-panel {
+    @apply relative flex h-[600px] w-[700px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8
+  }
+  .node-modal-dialog-panel-div {
+    @apply absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block
+  }
+  .node-modal-dialog-button {
+    @apply rounded-md text-ring hover:text-accent-foreground
+  }
+  .node-modal-dialog-icon-div {
+    @apply flex-max-width h-full flex-col items-center justify-center
+  }
+  .node-modal-icon-arrangement {
+    @apply z-10 flex-max-width justify-center pb-4 shadow-sm
+  }
+  .node-modal-icon {
+    @apply mt-4 h-10 w-10 rounded p-1
+  }
+  .node-modal-title-div {
+    @apply mt-4 text-center sm:ml-4 sm:text-left
+  }
+  .node-modal-title {
+    @apply text-lg font-medium leading-10 text-foreground
+  }
+  .node-modal-template-div {
+    @apply flex-max-width h-full flex-row items-center justify-center gap-4 bg-input p-4
+  }
+  .node-modal-template {
+    @apply w-full rounded-lg bg-background px-4 shadow sm:p-4
+  }
+  .node-modal-template-column {
+    @apply flex h-full flex-col gap-5
+  }
+  .node-modal-button-box {
+    @apply flex-max-width flex-row-reverse bg-input px-4 pb-3
+  }
+  .node-modal-button {
+    @apply inline-flex w-full justify-center rounded-md border border-transparent bg-status-red px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring sm:ml-3 sm:w-auto sm:text-sm
+  }
+  .node-modal-button:focus {
+    @apply focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1
+  }
+
+  .prompt-modal-icon-box {
+    @apply mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue sm:mx-0 sm:h-10 sm:w-10
+  }
+  .prompt-modal-icon {
+    @apply h-6 w-6 text-almost-medium-blue
+  }
+  .prompt-modal-txtarea-arrangement {
+    @apply flex-max-width h-full flex-row items-center justify-center gap-4 overflow-auto bg-accent p-4
+  }
+  .prompt-modal-txtarea-box {
+    @apply h-full w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6
+  }
+  .prompt-modal-txtarea {
+    @apply form-input h-full w-full rounded-lg border-ring
+  }
+
+  .txtarea-modal-arrangement {
+    @apply flex h-full w-full flex-row items-center justify-center gap-4 bg-input p-4
+  }
+  .txtarea-modal-box {
+    @apply w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6
+  }
+  .txtarea-modal-input {
+    @apply form-input h-full w-full
+  }
+
+  .api-modal-tabs {
+    @apply w-full h-full overflow-hidden text-center bg-muted rounded-md border
+  }
+  .api-modal-tablist-div {
+    @apply flex items-center justify-between px-2
+  }
+  .api-modal-tabs-content {
+    @apply overflow-hidden w-full h-full px-4 pb-4 -mt-1
+  }
+  .api-modal-accordion-display {
+    @apply flex w-full h-full mt-2
+  }
+  .api-modal-table-arrangement {
+    @apply flex flex-col gap-5 h-fit
+  }
+
+
 }
\ No newline at end of file
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index d069763ff..e5015bc46 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -277,7 +277,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
 
         <Tabs
           value={activeTab}
-          className="w-full h-full overflow-hidden text-center bg-muted rounded-md border"
+          className="api-modal-tabs"
           onValueChange={(value) => {
             setActiveTab(value);
             if (value === "3") {
@@ -285,7 +285,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
             }
           }}
         >
-          <div className="flex items-center justify-between px-2">
+          <div className="api-modal-tablist-div">
             <TabsList>
               {tabs.map((tab, index) => (
                 <TabsTrigger key={index} value={index.toString()}>
@@ -309,7 +309,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           {tabs.map((tab, index) => (
             <TabsContent
               value={index.toString()}
-              className="overflow-hidden w-full h-full px-4 pb-4 -mt-1"
+              className="api-modal-tabs-content"
               key={index} // Remember to add a unique key prop
             >
               {index < 3 ? (
@@ -322,7 +322,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                 </SyntaxHighlighter>
               ) : index === 3 ? (
                 <>
-                  <div className="flex w-full h-full mt-2">
+                  <div className="api-modal-according-display">
                     <div
                       className={classNames(
                         "w-full rounded-lg bg-muted h-[60vh]",
@@ -338,7 +338,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                               trigger={t["data"]["id"]}
                               open={openAccordion}
                             >
-                              <div className="flex flex-col gap-5 h-fit">
+                              <div className="api-modal-table-arrangement">
                                 <Table className="table-fixed bg-muted outline-1">
                                   <TableHeader className="border-input text-xs font-medium text-ring h-10">
                                     <TableRow className="dark:border-b-muted">
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 1d0d912eb..f0337f71c 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -90,27 +90,27 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           <DialogDescription>
             {data.node?.description}
             <div className="flex pt-3">
-              <Variable className="h-5 w-5 stroke-2 pe-1 text-muted-foreground "></Variable>
-              <span className="text-sm font-semibold text-primary">
+              <Variable className="edit-node-modal-variable "></Variable>
+              <span className="edit-node-modal-span">
                 Parameters
               </span>
             </div>
           </DialogDescription>
         </DialogHeader>
 
-        <div className="flex h-fit max-h-[400px] w-full">
+        <div className="edit-node-modal-arrangement">
           <div
             className={classNames(
-              "w-full rounded-lg border-[1px] border-input bg-background",
+              "edit-node-modal-box",
               nodeLength > limitScrollFieldsModal
                 ? "overflow-scroll overflow-x-hidden custom-scroll"
                 : "overflow-hidden"
             )}
           >
             {nodeLength > 0 && (
-              <div className="flex h-fit flex-col gap-5">
+              <div className="edit-node-modal-table">
                 <Table className="table-fixed bg-muted outline-1">
-                  <TableHeader className="h-10 border-input text-xs font-medium text-ring">
+                  <TableHeader className="edit-node-modal-table-header">
                     <TableRow className="">
                       <TableHead className="h-7 text-center">PARAM</TableHead>
                       <TableHead className="h-7 p-0 text-center">
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 83b672adf..3cc9c354a 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -45,11 +45,11 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-ring   bg-opacity-75 transition-opacity" />
+          <div className="node-modal-div" />
         </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">
+        <div className="node-modal-dialog-arrangement">
+          <div className="node-modal-dialog-div">
             <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
@@ -59,11 +59,11 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
               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 h-[600px] w-[700px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8">
-                <div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
+              <Dialog.Panel className="node-modal-dialog-panel">
+                <div className=" node-modal-dialog-panel-div">
                   <button
                     type="button"
-                    className="rounded-md text-ring hover:text-accent-foreground"
+                    className="node-modal-dialog-button"
                     onClick={() => {
                       setModalOpen(false);
                     }}
@@ -72,30 +72,30 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                     <X className="h-6 w-6" aria-hidden="true" />
                   </button>
                 </div>
-                <div className="flex h-full w-full flex-col items-center justify-center">
-                  <div className="z-10 flex w-full justify-center pb-4 shadow-sm">
+                <div className="node-modal-dialog-icon-div">
+                  <div className="node-modal-icon-arrangement">
                     <Icon
                       strokeWidth={1.5}
-                      className="mt-4 h-10 w-10 rounded p-1"
+                      className="node-modal-icon"
                       style={{
                         color:
                           nodeColors[types[data.type]] ?? nodeColors.unknown,
                       }}
                     />
-                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
+                    <div className="node-modal-title-div">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-10 text-foreground"
+                        className="node-modal-title"
                       >
                         {data.type}
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="flex h-full w-full flex-row items-center justify-center gap-4 bg-input p-4">
-                    <div className="flex h-[445px] w-full">
+                  <div className="node-modal-template-div">
+                    <div className="flex-max-width h-[445px]">
                       <div
                         className={classNames(
-                          "w-full rounded-lg bg-background px-4 shadow sm:p-4",
+                          "node-modal-template",
                           Object.keys(data.node.template).filter(
                             (t) =>
                               t.charAt(0) !== "_" &&
@@ -106,7 +106,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                             : "overflow-hidden"
                         )}
                       >
-                        <div className="flex h-full flex-col gap-5">
+                        <div className="node-modal-template-column">
                           {Object.keys(data.node.template)
                             .filter(
                               (t) =>
@@ -144,10 +144,10 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                       </div>
                     </div>
                   </div>
-                  <div className="flex w-full flex-row-reverse bg-input px-4 pb-3">
+                  <div className="node-modal-button-box">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-status-red px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="node-modal-button"
                       onClick={() => {
                         setModalOpen(false);
                       }}
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index 953da2940..759dbbc02 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -52,21 +52,21 @@ export default function ChatInput({
           lockChat
             ? " bg-input text-foreground "
             : "  bg-background text-foreground ",
-          "form-input block w-full rounded-md border-ring pr-10  custom-scroll sm:text-sm" +
+          "chat-input-modal-txtarea" +
             " input-primary "
         )}
         placeholder={"Send a message..."}
       />
-      <div className="absolute bottom-0.5 right-3">
+      <div className="chat-input-modal-div">
         <button disabled={lockChat} onClick={() => sendMessage()}>
           {lockChat ? (
             <Lock
-              className="h-5 w-5 animate-pulse   text-ring"
+              className="chat-input-modal-lock"
               aria-hidden="true"
             />
           ) : (
             <Send
-              className="h-5 w-5 text-ring hover:text-muted-foreground "
+              className="chat-input-modal-send "
               aria-hidden="true"
             />
           )}
diff --git a/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
index 09cdda29b..6a3ac2c74 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
@@ -48,19 +48,19 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
   };
   return (
     <div className="codeblock font-sans text-[16px]">
-      <div className="flex items-center justify-between px-4 py-1.5">
-        <span className="text-xs lowercase text-background">{language}</span>
+      <div className="code-block-modal">
+        <span className="code-block-modal-span">{language}</span>
 
         <div className="flex items-center">
           <button
-            className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-background"
+            className="code-block-modal-button"
             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-background"
+            className="code-block-modal-button"
             onClick={downloadAsFile}
           >
             <IconDownload size={18} />
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index b67556d04..d864f691a 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -31,27 +31,27 @@ export default function ChatMessage({
   return (
     <div
       className={classNames(
-        "flex w-full py-2 pl-2",
+        "chat-message-modal",
         chat.isSend ? "bg-background " : "bg-input"
       )}
     >
       <div
         className={classNames(
-          "my-3 flex h-8 w-8 items-center justify-center overflow-hidden rounded-full"
+          "chat-message-modal-div"
         )}
       >
         {!chat.isSend && (
           <div className="relative h-8 w-8">
             <img
               className={
-                "absolute scale-150 transition-opacity duration-500 " +
+                "chat-message-modal-img " +
                 (lockChat ? "opacity-100" : "opacity-0")
               }
               src={lastMessage ? AiIcon : AiIconStill}
             />
             <img
               className={
-                "absolute scale-150 transition-opacity duration-500 " +
+                "chat-message-modal-img " +
                 (lockChat ? "opacity-0" : "opacity-100")
               }
               src={AiIconStill}
@@ -61,12 +61,12 @@ export default function ChatMessage({
         {chat.isSend && <User2 className="-mb-1 h-6 w-6 text-primary " />}
       </div>
       {!chat.isSend ? (
-        <div className="flex w-full items-center text-start">
-          <div className="relative inline-block w-full text-start text-sm  font-normal text-muted-foreground">
+        <div className="chat-message-modal-display">
+          <div className="chat-message-modal-text">
             {hidden && chat.thought && chat.thought !== "" && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
-                className="absolute -left-2 -top-1 cursor-pointer"
+                className="chat-message-modal-icon-div"
               >
                 <MessageCircle className="h-5 w-5 animate-bounce " />
               </div>
@@ -74,15 +74,14 @@ export default function ChatMessage({
             {chat.thought && chat.thought !== "" && !hidden && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
-                className=" ml-3 inline-block h-full w-[95%]  cursor-pointer overflow-scroll rounded-md
-								border border-ring bg-muted px-2 pb-3 pt-3 text-start text-muted-foreground scrollbar-hide"
+                className=" chat-message-modal-thought"
                 dangerouslySetInnerHTML={{
                   __html: DOMPurify.sanitize(convert.toHtml(chat.thought)),
                 }}
               ></div>
             )}
             {chat.thought && chat.thought !== "" && !hidden && <br></br>}
-            <div className="w-full px-4 pb-3 pr-8 pt-3">
+            <div className="chat-message-modal-markdown">
               <div className="w-full">
                 <div className="w-full">
                   <ReactMarkdown
@@ -94,7 +93,7 @@ export default function ChatMessage({
                         if (children.length) {
                           if (children[0] == "▍") {
                             return (
-                              <span className="mt-1 animate-pulse cursor-default">
+                              <span className="chat-message-modal-markdown-span">
                                 ▍
                               </span>
                             );
@@ -147,7 +146,7 @@ export default function ChatMessage({
         </div>
       ) : (
         <div className="flex w-full items-center">
-          <div className="inline-block px-3 text-start text-muted-foreground ">
+          <div className="chat-message-modal-alert ">
             {message.split("\n").map((line, index) => (
               <span key={index} className="text-muted-foreground ">
                 {line}
diff --git a/src/frontend/src/modals/chatModal/fileComponent/index.tsx b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
index 61449330a..0188b87c4 100644
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@@ -37,9 +37,9 @@ export default function FileCard({ fileName, content, fileType }) {
         />
         {isHovered && (
           <div
-            className={`absolute right-0 top-0 rounded-bl-lg bg-muted px-1 text-sm font-bold text-foreground `}
+            className={`file-card-modal-image-div `}
           >
-            <button className="px-2 py-1 text-ring " onClick={handleDownload}>
+            <button className="file-card-modal-image-button " onClick={handleDownload}>
               <DownloadCloud className="h-5 w-5 text-current hover:scale-110" />
             </button>
           </div>
@@ -51,9 +51,9 @@ export default function FileCard({ fileName, content, fileType }) {
   return (
     <button
       onClick={handleDownload}
-      className="flex w-1/2 items-center justify-between rounded border border-ring bg-muted px-2 py-2 text-foreground shadow hover:drop-shadow-lg"
+      className="file-card-modal-button"
     >
-      <div className="mr-2 flex w-full items-center gap-2 text-current">
+      <div className="file-card-modal-div">
         {" "}
         {fileType === "image" ? (
           <img
@@ -64,10 +64,10 @@ export default function FileCard({ fileName, content, fileType }) {
         ) : (
           <File className="h-8 w-8" />
         )}
-        <div className="flex flex-col items-start">
+        <div className="file-card-modal-footer">
           {" "}
-          <div className="truncate text-sm text-current">{fileName}</div>
-          <div className="truncate text-xs  text-ring">{fileType}</div>
+          <div className="file-card-modal-name">{fileName}</div>
+          <div className="file-card-modal-type">{fileType}</div>
         </div>
         <DownloadCloud className="ml-auto h-6 w-6 text-current" />
       </div>
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index 010660adc..439bfcfeb 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -333,11 +333,11 @@ export default function ChatModal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-black bg-opacity-80   backdrop-blur-sm transition-opacity" />
+          <div className="send-message-modal-transition" />
         </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">
+        <div className="chat-modal-box">
+          <div className="chat-modal-box-div">
             <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
@@ -347,24 +347,24 @@ export default function ChatModal({
               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 h-[95%] w-[690px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl drop-shadow-2xl transition-all">
-                <div className="relative w-full p-4">
+              <Dialog.Panel className=" chat-modal-dialog-panel">
+                <div className="chat-modal-dialog-panel-div">
                   <button
                     onClick={() => clearChat()}
-                    className="absolute right-10 top-2 z-30 text-muted-foreground hover:text-status-red"
+                    className="chat-modal-dialog-trash-panel"
                   >
                     <Eraser className="h-4 w-4" />
                   </button>
                   <button
                     onClick={() => setModalOpen(false)}
-                    className="absolute right-2 top-1.5 z-30 text-muted-foreground hover:text-status-red"
+                    className="chat-modal-dialog-x-panel"
                   >
                     <X className="h-5 w-5" />
                   </button>
                 </div>
                 <div
                   ref={messagesRef}
-                  className="flex h-full w-full flex-col  items-center overflow-scroll border-t bg-background scrollbar-hide"
+                  className="chat-modal-dialog-history"
                 >
                   {chatHistory.length > 0 ? (
                     chatHistory.map((c, i) => (
@@ -376,7 +376,7 @@ export default function ChatModal({
                       />
                     ))
                   ) : (
-                    <div className="flex h-full w-full flex-col items-center justify-center text-center align-middle">
+                    <div className="chat-modal-dialog-span-box">
                       <span>
                         👋{" "}
                         <span className="text-lg  text-muted-foreground">
@@ -384,7 +384,7 @@ export default function ChatModal({
                         </span>
                       </span>
                       <br />
-                      <div className="w-2/4 rounded-md border border-input bg-muted px-6 py-8">
+                      <div className="chat-modal-dialog-desc">
                         <span className="text-base text-ring">
                           Start a conversation and click the agent’s thoughts{" "}
                           <span>
@@ -397,8 +397,8 @@ export default function ChatModal({
                   )}
                   <div ref={ref}></div>
                 </div>
-                <div className="flex w-full flex-col  items-center justify-between border-t bg-background p-3">
-                  <div className="relative mt-1  w-full rounded-md shadow-sm">
+                <div className="chat-modal-input-div">
+                  <div className="chat-modal-input">
                     <ChatInput
                       chatValue={chatValue}
                       lockChat={lockChat}
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index be6e2e1fb..513f2e695 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -61,7 +61,7 @@ export default function CodeAreaModal({
           <DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
 
-        <div className="mt-2 flex h-full w-full">
+        <div className="code-area-modal-editor-div">
           <AceEditor
             value={code}
             mode="python"
diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index d6286b6e8..ffe79abaa 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -77,7 +77,7 @@ export default function ButtonBox({
     <button disabled={deactivate} onClick={onClick}>
       <div
         className={classNames(
-          "flex transform flex-col items-center justify-center rounded-lg border border-ring text-center shadow hover:scale-105 hover:shadow-lg",
+          "button-box-modal-div",
           bgColor,
           height,
           width,
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index ffd51c8d0..5278bfa65 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -76,10 +76,10 @@ export default function ImportModal() {
           <DialogTitle className="flex items-center">
             {showExamples && (
               <>
-                <div className="absolute left-0 top-2 z-50 hidden pl-4 pt-4 sm:block">
+                <div className="dialog-header-modal-div">
                   <button
                     type="button"
-                    className="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+                    className="dialog-header-modal-button disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
                     onClick={() => {
                       setShowExamples(false);
                     }}
@@ -106,20 +106,20 @@ export default function ImportModal() {
 
         <div
           className={classNames(
-            "h-full w-full overflow-y-auto scrollbar-hide",
+            "dialog-modal-examples-div",
             showExamples && !loadingExamples
-              ? "start mx-auto flex flex-row flex-wrap items-start justify-center overflow-auto"
-              : "flex flex-row items-center justify-center"
+              ? "dialog-modal-example-true"
+              : "dialog-modal-example-false"
           )}
         >
           {!showExamples && (
-            <div className="flex h-full w-full items-center justify-evenly">
+            <div className="dialog-modal-button-box-div">
               <ButtonBox
                 size="big"
                 bgColor="bg-medium-emerald "
                 description="Prebuilt Examples"
                 icon={
-                  <DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
+                  <DocumentDuplicateIcon className="document-icon" />
                 }
                 onClick={() => {
                   setShowExamples(true);
@@ -133,7 +133,7 @@ export default function ImportModal() {
                 bgColor="bg-almost-dark-blue "
                 description="Import from Local"
                 icon={
-                  <ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
+                  <ComputerDesktopIcon className="document-icon" />
                 }
                 onClick={() => {
                   uploadFlow();
@@ -145,7 +145,7 @@ export default function ImportModal() {
             </div>
           )}
           {showExamples && loadingExamples && (
-            <div className="flex items-center justify-center align-middle">
+            <div className="loading-component-div">
               <LoadingComponent remSize={30} />
             </div>
           )}
@@ -175,11 +175,11 @@ export default function ImportModal() {
         </div>
 
         <DialogFooter>
-          <div className="mt-2 flex w-full items-center justify-center">
+          <div className="dialog-modal-footer">
             <a
               href="https://github.com/logspace-ai/langflow_examples"
               target="_blank"
-              className="flex items-center justify-center text-muted-foreground "
+              className="dialog-modal-footer-link "
               rel="noreferrer"
             >
               <svg
diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx
index 600750072..220fdad00 100644
--- a/src/frontend/src/modals/promptModal/index.tsx
+++ b/src/frontend/src/modals/promptModal/index.tsx
@@ -44,11 +44,11 @@ export default function PromptAreaModal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-ring   bg-opacity-75 transition-opacity" />
+          <div className="node-modal-div" />
         </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">
+        <div className="node-modal-dialog-arrangement">
+          <div className="node-modal-dialog-div">
             <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
@@ -58,11 +58,11 @@ export default function PromptAreaModal({
               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 h-[600px] w-[700px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8">
-                <div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
+              <Dialog.Panel className="node-modal-dialog-panel">
+                <div className=" node-modal-dialog-panel-div ">
                   <button
                     type="button"
-                    className="rounded-md text-ring hover:text-accent-foreground"
+                    className="node-modal-dialog-button"
                     onClick={() => {
                       setModalOpen(false);
                     }}
@@ -71,29 +71,29 @@ export default function PromptAreaModal({
                     <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                   </button>
                 </div>
-                <div className="flex h-full w-full flex-col items-center justify-center">
-                  <div className="z-10 flex w-full justify-center pb-4 shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue sm:mx-0 sm:h-10 sm:w-10">
+                <div className="node-modal-dialog-icon-div">
+                  <div className="node-modal-icon-arrangement">
+                    <div className="prompt-modal-icon-box">
                       <DocumentTextIcon
-                        className="h-6 w-6 text-almost-medium-blue"
+                        className="prompt-modal-icon"
                         aria-hidden="true"
                       />
                     </div>
-                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
+                    <div className="node-modal-title-div ">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-10 text-foreground"
+                        className="node-modal-title"
                       >
                         Edit Prompt
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="flex h-full w-full flex-row items-center justify-center gap-4 overflow-auto bg-accent p-4">
-                    <div className="flex h-full w-full">
-                      <div className="h-full w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6">
+                  <div className="prompt-modal-txtarea-arrangement">
+                    <div className="flex-max-width h-full">
+                      <div className="prompt-modal-txtarea-box">
                         <textarea
                           ref={ref}
-                          className="form-input h-full w-full rounded-lg border-ring"
+                          className="prompt-modal-txtarea"
                           value={myValue}
                           onChange={(e) => {
                             setMyValue(e.target.value);
@@ -103,10 +103,10 @@ export default function PromptAreaModal({
                       </div>
                     </div>
                   </div>
-                  <div className="flex w-full flex-row-reverse bg-input px-4 pb-3">
+                  <div className="node-modal-button-box">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="node-modal-button"
                       onClick={() => {
                         checkPrompt(myValue)
                           .then((apiReturn) => {
diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx
index a41a39ba4..c17ae727f 100644
--- a/src/frontend/src/modals/textAreaModal/index.tsx
+++ b/src/frontend/src/modals/textAreaModal/index.tsx
@@ -43,11 +43,11 @@ export default function TextAreaModal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-ring   bg-opacity-75 transition-opacity" />
+          <div className="node-modal-div" />
         </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">
+        <div className="node-modal-dialog-arrangement">
+          <div className="node-modal-dialog-div">
             <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
@@ -57,11 +57,11 @@ export default function TextAreaModal({
               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 h-[600px] w-[700px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8">
-                <div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
+              <Dialog.Panel className="node-modal-dialog-panel">
+                <div className=" node-modal-dialog-panel-div">
                   <button
                     type="button"
-                    className="rounded-md text-ring hover:text-accent-foreground"
+                    className="node-modal-dialog-button"
                     onClick={() => {
                       setModalOpen(false);
                     }}
@@ -70,29 +70,29 @@ export default function TextAreaModal({
                     <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                   </button>
                 </div>
-                <div className="flex h-full w-full flex-col items-center justify-center">
-                  <div className="z-10 flex w-full justify-center pb-4 shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue sm:mx-0 sm:h-10 sm:w-10">
+                <div className="node-modal-dialog-icon-div">
+                  <div className="node-modal-icon-arrangement">
+                    <div className="prompt-modal-icon-box">
                       <ClipboardDocumentListIcon
-                        className="h-6 w-6 text-almost-medium-blue"
+                        className="prompt-modal-icon"
                         aria-hidden="true"
                       />
                     </div>
-                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
+                    <div className="node-modal-title-div">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-10 text-foreground"
+                        className="node-modal-title"
                       >
                         Edit text
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="flex h-full w-full flex-row items-center justify-center gap-4 bg-input p-4">
+                  <div className="txtarea-modal-arrangement">
                     <div className="flex h-full w-full">
-                      <div className="w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6">
+                      <div className="txtarea-modal-box">
                         <textarea
                           ref={ref}
-                          className="form-input h-full w-full form-primary"
+                          className="txtarea-modal-input"
                           value={myValue}
                           onChange={(e) => {
                             setMyValue(e.target.value);
@@ -102,10 +102,10 @@ export default function TextAreaModal({
                       </div>
                     </div>
                   </div>
-                  <div className="flex w-full flex-row-reverse bg-input px-4 pb-3">
+                  <div className="node-modal-button-box">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="node-modal-button"
                       onClick={() => {
                         setModalOpen(false);
                       }}

From 2a546b69c2e934f9898b634840f14fd895e0a4f9 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Thu, 6 Jul 2023 11:23:12 -0300
Subject: [PATCH 52/53] refactor: big tailwind class into smaller classes

---
 src/frontend/src/index.css | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index e116b2c17..1e292310e 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -557,8 +557,17 @@ The cursor: default; property value restores the browser's default cursor style
   .header-end-display {
     @apply ml-auto mr-2 flex items-center gap-5
   }
+  .header-github-link-box {
+    @apply border border-input h-9 px-3 pr-0 rounded-md inline-flex shadow-sm items-center justify-center
+  }
   .header-github-link {
-    @apply inline-flex shadow-sm items-center justify-center text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground  border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md
+    @apply text-sm font-medium  disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground header-github-link-box
+  }
+  .header-github-link:focus-visible {
+    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+  }
+  .header-github-link:hover {
+    @apply hover:bg-accent hover:text-accent-foreground
   }
   .header-github-display {
     @apply -mr-px ml-2 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm

From a046e3a141c5af7ca40d4dfb12e500d7ca0d5a0e Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 6 Jul 2023 11:56:32 -0300
Subject: [PATCH 53/53] chore(index.css): remove border-1 class from
 dropdown-component-outline to fix styling issue

---
 src/frontend/src/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 1e57d5d67..45936b013 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -482,7 +482,7 @@ The cursor: default; property value restores the browser's default cursor style
   }
 
   .dropdown-component-outline {
-    @apply border-1 input-edit-node relative pr-8
+    @apply  input-edit-node relative pr-8
   }
   .dropdown-component-false-outline {
     @apply input-primary py-2 pl-3 pr-10 text-left