diff --git a/.github/workflows/auto-update.yml b/.github/workflows/auto-update.yml
new file mode 100644
index 000000000..85deafa82
--- /dev/null
+++ b/.github/workflows/auto-update.yml
@@ -0,0 +1,14 @@
+name: Auto-update
+
+on:
+  push:
+    branches:
+      - dev
+      - main
+
+jobs:
+  Auto:
+    name: Auto-update
+    runs-on: ubuntu-latest
+    steps:
+      - uses: tibdex/auto-update@v2
\ No newline at end of file
diff --git a/.github/workflows/docker-build.yml b/.github/workflows/docker-build.yml
index cfffc24d2..e327ce1aa 100644
--- a/.github/workflows/docker-build.yml
+++ b/.github/workflows/docker-build.yml
@@ -11,7 +11,7 @@ on:
       pre_release:
         required: false
         type: boolean
-        default: true
+        default: false
 
   workflow_dispatch:
     inputs:
@@ -86,10 +86,10 @@ jobs:
         include:
           - component: backend
             dockerfile: ./docker/build_and_push_backend.Dockerfile
-            tags: langflowai/langflow-backend:${{ inputs.version }},langflowai/langflow-backend:1.0-alpha
+            tags: ${{ inputs.pre_release == 'true' && format('langflowai/langflow-backend:{0}', inputs.version) || format('langflowai/langflow-backend:{0},langflowai/langflow-backend:latest', inputs.version) }}
           - component: frontend
             dockerfile: ./docker/frontend/build_and_push_frontend.Dockerfile
-            tags: langflowai/langflow-frontend:${{ inputs.version }},langflowai/langflow-frontend:1.0-alpha
+            tags: ${{ inputs.pre_release == 'true' && format('langflowai/langflow-frontend:{0}', inputs.version) || format('langflowai/langflow-frontend:{0},langflowai/langflow-frontend:latest', inputs.version) }}
     steps:
       - uses: actions/checkout@v4
       - name: Set up Docker Buildx
diff --git a/.github/workflows/lint-js.yml b/.github/workflows/lint-js.yml
index 11156c8b8..b528ee8ed 100644
--- a/.github/workflows/lint-js.yml
+++ b/.github/workflows/lint-js.yml
@@ -5,7 +5,7 @@ on:
     paths:
       - "src/frontend/**"
   merge_group:
-    branches: [dev]
+    types: [checks_requested]
 
 env:
   NODE_VERSION: "21"
@@ -45,10 +45,6 @@ jobs:
       - name: Run Prettier
         run: |
           cd src/frontend
-          npm run format
-      - name: Commit changes
-        uses: stefanzweifel/git-auto-commit-action@v5
-        with:
-          commit_message: Apply Prettier formatting
-          branch: ${{ github.head_ref }}
+          npm run check-format
+
 
diff --git a/.github/workflows/python_test.yml b/.github/workflows/python_test.yml
index 689f225ce..ae2c87714 100644
--- a/.github/workflows/python_test.yml
+++ b/.github/workflows/python_test.yml
@@ -41,7 +41,7 @@ jobs:
           poetry run python -m langflow run --host 127.0.0.1 --port 7860 --backend-only &
           SERVER_PID=$!
           # Wait for the server to start
-          timeout 120 bash -c 'until curl -f http://127.0.0.1:7860/auto_login; do sleep 2; done' || (echo "Server did not start in time" && kill $SERVER_PID && exit 1)
+          timeout 120 bash -c 'until curl -f http://127.0.0.1:7860/api/v1/auto_login; do sleep 5; done' || (echo "Server did not start in time" && kill $SERVER_PID && exit 1)
           # Terminate the server
           kill $SERVER_PID || (echo "Failed to terminate the server" && exit 1)
           sleep 10 # give the server some time to terminate
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index ec9828c0a..1617561a0 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -58,7 +58,7 @@ jobs:
           python -m langflow run --host 127.0.0.1 --port 7860 &
           SERVER_PID=$!
           # Wait for the server to start
-          timeout 120 bash -c 'until curl -f http://127.0.0.1:7860/auto_login; do sleep 2; done' || (echo "Server did not start in time" && kill $SERVER_PID && exit 1)
+          timeout 120 bash -c 'until curl -f http://127.0.0.1:7860/api/v1/auto_login; do sleep 2; done' || (echo "Server did not start in time" && kill $SERVER_PID && exit 1)
           # Terminate the server
           kill $SERVER_PID || (echo "Failed to terminate the server" && exit 1)
           sleep 10 # give the server some time to terminate
@@ -120,7 +120,7 @@ jobs:
           python -m langflow run --host 127.0.0.1 --port 7860 &
           SERVER_PID=$!
           # Wait for the server to start
-          timeout 120 bash -c 'until curl -f http://127.0.0.1:7860/auto_login; do sleep 2; done' || (echo "Server did not start in time" && kill $SERVER_PID && exit 1)
+          timeout 120 bash -c 'until curl -f http://127.0.0.1:7860/api/v1/auto_login; do sleep 2; done' || (echo "Server did not start in time" && kill $SERVER_PID && exit 1)
           # Terminate the server
           kill $SERVER_PID || (echo "Failed to terminate the server" && exit 1)
           sleep 10 # give the server some time to terminate
diff --git a/.github/workflows/typescript_test.yml b/.github/workflows/typescript_test.yml
index bd06b5dab..07f86602a 100644
--- a/.github/workflows/typescript_test.yml
+++ b/.github/workflows/typescript_test.yml
@@ -4,13 +4,14 @@ on:
   workflow_dispatch:
     inputs:
       branch:
-        description: "Branch to run tests on"
-        required: true
+        description: "(Optional) Branch to checkout"
+        required: false
         type: string
-
+  pull_request:
+  merge_group:
 
 env:
-  POETRY_VERSION: "1.8.2"
+  POETRY_VERSION: "1.8.3"
   NODE_VERSION: "21"
   PYTHON_VERSION: "3.12"
   # Define the directory where Playwright browsers will be installed.
@@ -19,18 +20,23 @@ env:
 
 jobs:
   setup-and-test:
-    name: Run Frontend Tests on branch ${{ inputs.branch }}
+    name: Run Playwright Tests
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4]
-        shardTotal: [4]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+        shardTotal: [10]
+    env:
+      OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      STORE_API_KEY: ${{ secrets.STORE_API_KEY }}
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
         with:
-          ref: ${{ inputs.branch }}
+          # If branch is passed as input, checkout that branch
+          # else checkout the default branch
+          ref: ${{ github.event.inputs.branch || github.ref }}
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
@@ -52,14 +58,15 @@ jobs:
           cd src/frontend
           npm ci
         if: ${{ steps.setup-node.outputs.cache-hit != 'true' }}
-
-      - name: Cache playwright binaries
-        uses: actions/cache@v4
+      - name: Get Playwright version
+        run: echo "PLAYWRIGHT_VERSION=$(jq '.devDependencies["@playwright/test"]' src/frontend/package.json -r)" >> $GITHUB_ENV
+      - name: Cache Playwright binaries
         id: playwright-cache
+        uses: actions/cache@v4
         with:
-          path: |
-            ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ hashFiles('src/frontend/package-lock.json') }}
+          path: ~/.cache/ms-playwright
+          key: playwright-browsers-${{ runner.os }}-${{ env.PLAYWRIGHT_VERSION }}
+
       - name: Install Frontend dependencies
         run: |
           cd src/frontend
diff --git a/Makefile b/Makefile
index 853fe6196..0b03489ab 100644
--- a/Makefile
+++ b/Makefile
@@ -47,20 +47,22 @@ init:
 
 
 coverage: ## run the tests and generate a coverage report
-	poetry run pytest --cov \
-		--cov-config=.coveragerc \
-		--cov-report xml \
-		--cov-report term-missing:skip-covered \
-		--cov-report lcov:coverage/lcov-pytest.info
+	@poetry run coverage run
+	@poetry run coverage erase
 
 
 # allow passing arguments to pytest
 unit_tests:
-	poetry run pytest --ignore=tests/integration --instafail -ra -n auto -m "not api_key_required" $(args)
+	poetry run pytest \
+		--ignore=tests/integration \
+		--instafail -ra -n auto -m "not api_key_required" \
+		$(args)
 
 
 integration_tests:
-	poetry run pytest tests/integration --instafail -ra -n auto $(args)
+	poetry run pytest tests/integration \
+		--instafail -ra -n auto \
+		$(args)
 
 format: ## run code formatters
 	poetry run ruff check . --fix
@@ -129,9 +131,20 @@ start:
 	@echo 'Running the CLI'
 
 ifeq ($(open_browser),false)
-	@make install_backend && poetry run langflow run --path $(path) --log-level $(log_level) --host $(host) --port $(port) --env-file $(env) --no-open-browser
+	@make install_backend && poetry run langflow run \
+		--path $(path) \
+		--log-level $(log_level) \
+		--host $(host) \
+		--port $(port) \
+		--env-file $(env) \
+		--no-open-browser
 else
-	@make install_backend && poetry run langflow run --path $(path) --log-level $(log_level) --host $(host) --port $(port) --env-file $(env)
+	@make install_backend && poetry run langflow run \
+		--path $(path) \
+		--log-level $(log_level) \
+		--host $(host) \
+		--port $(port) \
+		--env-file $(env)
 endif
 
 
@@ -166,13 +179,27 @@ backend: ## run the backend in development mode
 	@echo 'Setting up the environment'
 	@make setup_env
 	make install_backend
-	@-kill -9 $(lsof -t -i:7860)
+	@-kill -9 $$(lsof -t -i:7860)
 ifdef login
 	@echo "Running backend autologin is $(login)";
-	LANGFLOW_AUTO_LOGIN=$(login) poetry run uvicorn --factory langflow.main:create_app --host 0.0.0.0 --port 7860 --reload --env-file .env --loop asyncio --workers $(workers)
+	LANGFLOW_AUTO_LOGIN=$(login) poetry run uvicorn \
+		--factory langflow.main:create_app \
+		--host 0.0.0.0 \
+		--port $(port) \
+		--reload \
+		--env-file $(env) \
+		--loop asyncio \
+		--workers $(workers)
 else
-	@echo "Running backend respecting the .env file";
-	poetry run uvicorn --factory langflow.main:create_app --host 0.0.0.0 --port 7860 --reload --env-file .env  --loop asyncio --workers $(workers)
+	@echo "Running backend respecting the $(env) file";
+	poetry run uvicorn \
+		--factory langflow.main:create_app \
+		--host 0.0.0.0 \
+		--port $(port) \
+		--reload \
+		--env-file $(env) \
+		--loop asyncio \
+		--workers $(workers)
 endif
 
 
diff --git a/docker/build_and_push.Dockerfile b/docker/build_and_push.Dockerfile
index 79f6ac8d7..448a802e6 100644
--- a/docker/build_and_push.Dockerfile
+++ b/docker/build_and_push.Dockerfile
@@ -93,5 +93,7 @@ ENV PATH="/app/.venv/bin:${PATH}"
 USER user
 WORKDIR /app
 
-ENTRYPOINT ["python", "-m", "langflow", "run"]
-CMD ["--host", "0.0.0.0", "--port", "7860"]
\ No newline at end of file
+ENV LANGFLOW_HOST=0.0.0.0
+ENV LANGFLOW_PORT=7860
+
+ENTRYPOINT ["python", "-m", "langflow", "run"]
\ No newline at end of file
diff --git a/docker/build_and_push_backend.Dockerfile b/docker/build_and_push_backend.Dockerfile
index 8b82da524..2efbefb10 100644
--- a/docker/build_and_push_backend.Dockerfile
+++ b/docker/build_and_push_backend.Dockerfile
@@ -5,4 +5,4 @@ ARG LANGFLOW_IMAGE
 FROM $LANGFLOW_IMAGE
 
 RUN rm -rf /app/.venv/langflow/frontend
-CMD ["--host", "0.0.0.0", "--port", "7860", "--backend-only"]
+CMD ["--backend-only"]
diff --git a/docker/build_and_push_base.Dockerfile b/docker/build_and_push_base.Dockerfile
index 916531df2..d539c1ae8 100644
--- a/docker/build_and_push_base.Dockerfile
+++ b/docker/build_and_push_base.Dockerfile
@@ -95,6 +95,7 @@ USER user
 # Install the package from the .tar.gz
 RUN python -m pip install /app/src/backend/base/dist/*.tar.gz --user
 
+ENV LANGFLOW_HOST=0.0.0.0
+ENV LANGFLOW_PORT=7860
 
 ENTRYPOINT ["python", "-m", "langflow", "run"]
-CMD ["--host", "0.0.0.0", "--port", "7860"]
diff --git a/docker/render.Dockerfile b/docker/render.Dockerfile
index 346348c0a..e8462ab19 100644
--- a/docker/render.Dockerfile
+++ b/docker/render.Dockerfile
@@ -1,15 +1,3 @@
-FROM python:3.10-slim
+FROM langflowai/langflow:latest
 
-RUN apt-get update && apt-get install gcc g++ git make -y && apt-get clean \
-	&& rm -rf /var/lib/apt/lists/*
-RUN useradd -m -u 1000 user
-USER user
-ENV HOME=/home/user \
-	PATH=/home/user/.local/bin:$PATH
-
-WORKDIR $HOME/app
-
-COPY --chown=user . $HOME/app
-
-RUN pip install langflow>==0.5.0 -U --user
-CMD ["python", "-m", "langflow", "run", "--host", "0.0.0.0", "--port", "7860"]
+ENTRYPOINT ["python", "-m", "langflow", "run"]
diff --git a/docker_example/docker-compose.yml b/docker_example/docker-compose.yml
index a8fddac71..61c02e65e 100644
--- a/docker_example/docker-compose.yml
+++ b/docker_example/docker-compose.yml
@@ -10,9 +10,9 @@ services:
     environment:
       - LANGFLOW_DATABASE_URL=postgresql://langflow:langflow@postgres:5432/langflow
       # This variable defines where the logs, file storage, monitor data and secret keys are stored.
-      - LANGFLOW_CONFIG_DIR=/var/lib/langflow
+      - LANGFLOW_CONFIG_DIR=/app/langflow
     volumes:
-      - langflow-data:/var/lib/langflow
+      - langflow-data:/app/langflow
 
   postgres:
     image: postgres:16
diff --git a/poetry.lock b/poetry.lock
index c8653b9e4..411b285a4 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -123,13 +123,13 @@ frozenlist = ">=1.1.0"
 
 [[package]]
 name = "alembic"
-version = "1.13.1"
+version = "1.13.2"
 description = "A database migration tool for SQLAlchemy."
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "alembic-1.13.1-py3-none-any.whl", hash = "sha256:2edcc97bed0bd3272611ce3a98d98279e9c209e7186e43e75bbb1b2bdfdbcc43"},
-    {file = "alembic-1.13.1.tar.gz", hash = "sha256:4932c8558bf68f2ee92b9bbcb8218671c627064d5b08939437af6d77dc05e595"},
+    {file = "alembic-1.13.2-py3-none-any.whl", hash = "sha256:6b8733129a6224a9a711e17c99b08462dbf7cc9670ba8f2e2ae9af860ceb1953"},
+    {file = "alembic-1.13.2.tar.gz", hash = "sha256:1ff0ae32975f4fd96028c39ed9bb3c867fe3af956bd7bb37343b54c9fe7445ef"},
 ]
 
 [package.dependencies]
@@ -167,13 +167,13 @@ files = [
 
 [[package]]
 name = "anthropic"
-version = "0.29.0"
+version = "0.30.0"
 description = "The official Python library for the anthropic API"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "anthropic-0.29.0-py3-none-any.whl", hash = "sha256:d16010715129c8bc3295b74fbf4da73cfb156618bf0abb2d007255983266b76a"},
-    {file = "anthropic-0.29.0.tar.gz", hash = "sha256:3eb558a232d83bdf7cdedb75663bf7ff7a8b50cc10acaa9ce6494ff295b8506a"},
+    {file = "anthropic-0.30.0-py3-none-any.whl", hash = "sha256:061bf58c9c64968361e6c21c76ff5016a6f7fdd9a5f6b7f2280ede2c3b44bfd5"},
+    {file = "anthropic-0.30.0.tar.gz", hash = "sha256:9e9ee2bfce833370eac74d7de433db97a0bf141f9118c40ac0e2f4c39bc2b76f"},
 ]
 
 [package.dependencies]
@@ -461,17 +461,17 @@ files = [
 
 [[package]]
 name = "boto3"
-version = "1.34.132"
+version = "1.34.133"
 description = "The AWS SDK for Python"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "boto3-1.34.132-py3-none-any.whl", hash = "sha256:b5d1681a0d8bf255787c8b37f911d706672d5722c9ace5342cd283a3cdb04820"},
-    {file = "boto3-1.34.132.tar.gz", hash = "sha256:3b2964060620f1bbe9574b5f8d3fb2a4e087faacfc6023c24154b184f1b16443"},
+    {file = "boto3-1.34.133-py3-none-any.whl", hash = "sha256:da7e78c03270be872ad78301892396ffea56647efcb2c3a8621ef46a905541ab"},
+    {file = "boto3-1.34.133.tar.gz", hash = "sha256:7071f8ce1f09113ca5630860fd590464e6325a4df55faae83c956225941016fc"},
 ]
 
 [package.dependencies]
-botocore = ">=1.34.132,<1.35.0"
+botocore = ">=1.34.133,<1.35.0"
 jmespath = ">=0.7.1,<2.0.0"
 s3transfer = ">=0.10.0,<0.11.0"
 
@@ -480,13 +480,13 @@ crt = ["botocore[crt] (>=1.21.0,<2.0a0)"]
 
 [[package]]
 name = "botocore"
-version = "1.34.132"
+version = "1.34.133"
 description = "Low-level, data-driven core of boto 3."
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "botocore-1.34.132-py3-none-any.whl", hash = "sha256:06ef8b4bd3b3cb5a9b9a4273a543b257be3304030978ba51516b576a65156c39"},
-    {file = "botocore-1.34.132.tar.gz", hash = "sha256:372a6cfce29e5de9bcf8c95af901d0bc3e27d8aa2295fadee295424f95f43f16"},
+    {file = "botocore-1.34.133-py3-none-any.whl", hash = "sha256:f269dad8e17432d2527b97ed9f1fd30ec8dc705f8b818957170d1af484680ef2"},
+    {file = "botocore-1.34.133.tar.gz", hash = "sha256:5ea609aa4831a6589e32eef052a359ad8d7311733b4d86a9d35dab4bd3ec80ff"},
 ]
 
 [package.dependencies]
@@ -1501,33 +1501,33 @@ vision = ["Pillow (>=6.2.1)"]
 
 [[package]]
 name = "debugpy"
-version = "1.8.1"
+version = "1.8.2"
 description = "An implementation of the Debug Adapter Protocol for Python"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "debugpy-1.8.1-cp310-cp310-macosx_11_0_x86_64.whl", hash = "sha256:3bda0f1e943d386cc7a0e71bfa59f4137909e2ed947fb3946c506e113000f741"},
-    {file = "debugpy-1.8.1-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:dda73bf69ea479c8577a0448f8c707691152e6c4de7f0c4dec5a4bc11dee516e"},
-    {file = "debugpy-1.8.1-cp310-cp310-win32.whl", hash = "sha256:3a79c6f62adef994b2dbe9fc2cc9cc3864a23575b6e387339ab739873bea53d0"},
-    {file = "debugpy-1.8.1-cp310-cp310-win_amd64.whl", hash = "sha256:7eb7bd2b56ea3bedb009616d9e2f64aab8fc7000d481faec3cd26c98a964bcdd"},
-    {file = "debugpy-1.8.1-cp311-cp311-macosx_11_0_universal2.whl", hash = "sha256:016a9fcfc2c6b57f939673c874310d8581d51a0fe0858e7fac4e240c5eb743cb"},
-    {file = "debugpy-1.8.1-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:fd97ed11a4c7f6d042d320ce03d83b20c3fb40da892f994bc041bbc415d7a099"},
-    {file = "debugpy-1.8.1-cp311-cp311-win32.whl", hash = "sha256:0de56aba8249c28a300bdb0672a9b94785074eb82eb672db66c8144fff673146"},
-    {file = "debugpy-1.8.1-cp311-cp311-win_amd64.whl", hash = "sha256:1a9fe0829c2b854757b4fd0a338d93bc17249a3bf69ecf765c61d4c522bb92a8"},
-    {file = "debugpy-1.8.1-cp312-cp312-macosx_11_0_universal2.whl", hash = "sha256:3ebb70ba1a6524d19fa7bb122f44b74170c447d5746a503e36adc244a20ac539"},
-    {file = "debugpy-1.8.1-cp312-cp312-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:a2e658a9630f27534e63922ebf655a6ab60c370f4d2fc5c02a5b19baf4410ace"},
-    {file = "debugpy-1.8.1-cp312-cp312-win32.whl", hash = "sha256:caad2846e21188797a1f17fc09c31b84c7c3c23baf2516fed5b40b378515bbf0"},
-    {file = "debugpy-1.8.1-cp312-cp312-win_amd64.whl", hash = "sha256:edcc9f58ec0fd121a25bc950d4578df47428d72e1a0d66c07403b04eb93bcf98"},
-    {file = "debugpy-1.8.1-cp38-cp38-macosx_11_0_x86_64.whl", hash = "sha256:7a3afa222f6fd3d9dfecd52729bc2e12c93e22a7491405a0ecbf9e1d32d45b39"},
-    {file = "debugpy-1.8.1-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:d915a18f0597ef685e88bb35e5d7ab968964b7befefe1aaea1eb5b2640b586c7"},
-    {file = "debugpy-1.8.1-cp38-cp38-win32.whl", hash = "sha256:92116039b5500633cc8d44ecc187abe2dfa9b90f7a82bbf81d079fcdd506bae9"},
-    {file = "debugpy-1.8.1-cp38-cp38-win_amd64.whl", hash = "sha256:e38beb7992b5afd9d5244e96ad5fa9135e94993b0c551ceebf3fe1a5d9beb234"},
-    {file = "debugpy-1.8.1-cp39-cp39-macosx_11_0_x86_64.whl", hash = "sha256:bfb20cb57486c8e4793d41996652e5a6a885b4d9175dd369045dad59eaacea42"},
-    {file = "debugpy-1.8.1-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:efd3fdd3f67a7e576dd869c184c5dd71d9aaa36ded271939da352880c012e703"},
-    {file = "debugpy-1.8.1-cp39-cp39-win32.whl", hash = "sha256:58911e8521ca0c785ac7a0539f1e77e0ce2df753f786188f382229278b4cdf23"},
-    {file = "debugpy-1.8.1-cp39-cp39-win_amd64.whl", hash = "sha256:6df9aa9599eb05ca179fb0b810282255202a66835c6efb1d112d21ecb830ddd3"},
-    {file = "debugpy-1.8.1-py2.py3-none-any.whl", hash = "sha256:28acbe2241222b87e255260c76741e1fbf04fdc3b6d094fcf57b6c6f75ce1242"},
-    {file = "debugpy-1.8.1.zip", hash = "sha256:f696d6be15be87aef621917585f9bb94b1dc9e8aced570db1b8a6fc14e8f9b42"},
+    {file = "debugpy-1.8.2-cp310-cp310-macosx_11_0_x86_64.whl", hash = "sha256:7ee2e1afbf44b138c005e4380097d92532e1001580853a7cb40ed84e0ef1c3d2"},
+    {file = "debugpy-1.8.2-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:3f8c3f7c53130a070f0fc845a0f2cee8ed88d220d6b04595897b66605df1edd6"},
+    {file = "debugpy-1.8.2-cp310-cp310-win32.whl", hash = "sha256:f179af1e1bd4c88b0b9f0fa153569b24f6b6f3de33f94703336363ae62f4bf47"},
+    {file = "debugpy-1.8.2-cp310-cp310-win_amd64.whl", hash = "sha256:0600faef1d0b8d0e85c816b8bb0cb90ed94fc611f308d5fde28cb8b3d2ff0fe3"},
+    {file = "debugpy-1.8.2-cp311-cp311-macosx_11_0_universal2.whl", hash = "sha256:8a13417ccd5978a642e91fb79b871baded925d4fadd4dfafec1928196292aa0a"},
+    {file = "debugpy-1.8.2-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:acdf39855f65c48ac9667b2801234fc64d46778021efac2de7e50907ab90c634"},
+    {file = "debugpy-1.8.2-cp311-cp311-win32.whl", hash = "sha256:2cbd4d9a2fc5e7f583ff9bf11f3b7d78dfda8401e8bb6856ad1ed190be4281ad"},
+    {file = "debugpy-1.8.2-cp311-cp311-win_amd64.whl", hash = "sha256:d3408fddd76414034c02880e891ea434e9a9cf3a69842098ef92f6e809d09afa"},
+    {file = "debugpy-1.8.2-cp312-cp312-macosx_11_0_universal2.whl", hash = "sha256:5d3ccd39e4021f2eb86b8d748a96c766058b39443c1f18b2dc52c10ac2757835"},
+    {file = "debugpy-1.8.2-cp312-cp312-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:62658aefe289598680193ff655ff3940e2a601765259b123dc7f89c0239b8cd3"},
+    {file = "debugpy-1.8.2-cp312-cp312-win32.whl", hash = "sha256:bd11fe35d6fd3431f1546d94121322c0ac572e1bfb1f6be0e9b8655fb4ea941e"},
+    {file = "debugpy-1.8.2-cp312-cp312-win_amd64.whl", hash = "sha256:15bc2f4b0f5e99bf86c162c91a74c0631dbd9cef3c6a1d1329c946586255e859"},
+    {file = "debugpy-1.8.2-cp38-cp38-macosx_11_0_x86_64.whl", hash = "sha256:5a019d4574afedc6ead1daa22736c530712465c0c4cd44f820d803d937531b2d"},
+    {file = "debugpy-1.8.2-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:40f062d6877d2e45b112c0bbade9a17aac507445fd638922b1a5434df34aed02"},
+    {file = "debugpy-1.8.2-cp38-cp38-win32.whl", hash = "sha256:c78ba1680f1015c0ca7115671fe347b28b446081dada3fedf54138f44e4ba031"},
+    {file = "debugpy-1.8.2-cp38-cp38-win_amd64.whl", hash = "sha256:cf327316ae0c0e7dd81eb92d24ba8b5e88bb4d1b585b5c0d32929274a66a5210"},
+    {file = "debugpy-1.8.2-cp39-cp39-macosx_11_0_x86_64.whl", hash = "sha256:1523bc551e28e15147815d1397afc150ac99dbd3a8e64641d53425dba57b0ff9"},
+    {file = "debugpy-1.8.2-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:e24ccb0cd6f8bfaec68d577cb49e9c680621c336f347479b3fce060ba7c09ec1"},
+    {file = "debugpy-1.8.2-cp39-cp39-win32.whl", hash = "sha256:7f8d57a98c5a486c5c7824bc0b9f2f11189d08d73635c326abef268f83950326"},
+    {file = "debugpy-1.8.2-cp39-cp39-win_amd64.whl", hash = "sha256:16c8dcab02617b75697a0a925a62943e26a0330da076e2a10437edd9f0bf3755"},
+    {file = "debugpy-1.8.2-py2.py3-none-any.whl", hash = "sha256:16e16df3a98a35c63c3ab1e4d19be4cbc7fdda92d9ddc059294f18910928e0ca"},
+    {file = "debugpy-1.8.2.zip", hash = "sha256:95378ed08ed2089221896b9b3a8d021e642c24edc8fef20e5d4342ca8be65c00"},
 ]
 
 [[package]]
@@ -4122,19 +4122,19 @@ adal = ["adal (>=1.0.2)"]
 
 [[package]]
 name = "langchain"
-version = "0.2.5"
+version = "0.2.6"
 description = "Building applications with LLMs through composability"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain-0.2.5-py3-none-any.whl", hash = "sha256:9aded9a65348254e1c93dcdaacffe4d1b6a5e7f74ef80c160c88ff78ad299228"},
-    {file = "langchain-0.2.5.tar.gz", hash = "sha256:ffdbf4fcea46a10d461bcbda2402220fcfd72a0c70e9f4161ae0510067b9b3bd"},
+    {file = "langchain-0.2.6-py3-none-any.whl", hash = "sha256:f86e8a7afd3e56f8eb5ba47f01dd00144fb9fc2f1db9873bd197347be2857aa4"},
+    {file = "langchain-0.2.6.tar.gz", hash = "sha256:867f6add370c1e3911b0e87d3dd0e36aec1e8f513bf06131340fe8f151d89dc5"},
 ]
 
 [package.dependencies]
 aiohttp = ">=3.8.3,<4.0.0"
 async-timeout = {version = ">=4.0.0,<5.0.0", markers = "python_version < \"3.11\""}
-langchain-core = ">=0.2.7,<0.3.0"
+langchain-core = ">=0.2.10,<0.3.0"
 langchain-text-splitters = ">=0.2.0,<0.3.0"
 langsmith = ">=0.1.17,<0.2.0"
 numpy = [
@@ -4145,7 +4145,7 @@ pydantic = ">=1,<3"
 PyYAML = ">=5.3"
 requests = ">=2,<3"
 SQLAlchemy = ">=1.4,<3"
-tenacity = ">=8.1.0,<9.0.0"
+tenacity = ">=8.1.0,<8.4.0 || >8.4.0,<9.0.0"
 
 [[package]]
 name = "langchain-anthropic"
@@ -4181,18 +4181,18 @@ numpy = ">=1,<2"
 
 [[package]]
 name = "langchain-aws"
-version = "0.1.7"
+version = "0.1.8"
 description = "An integration package connecting AWS and LangChain"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain_aws-0.1.7-py3-none-any.whl", hash = "sha256:413f88cbb120cc1d6ca0e9f6d72b89c1d930b78ce071fef5b03e1595fc4d6029"},
-    {file = "langchain_aws-0.1.7.tar.gz", hash = "sha256:aa0bbd3e530e21fdc1d0459e97ee14fa387ce9bb2d00d721cf526e9c3ecea78f"},
+    {file = "langchain_aws-0.1.8-py3-none-any.whl", hash = "sha256:d1ade6d01af7d86f42c106bb32c08a99a38c84f54a3d669201362f42fd2684b8"},
+    {file = "langchain_aws-0.1.8.tar.gz", hash = "sha256:d1e5edbda092ddbeda45ef8245a494b5b4f6bef79ed5afd56054c7d348dfed74"},
 ]
 
 [package.dependencies]
-boto3 = ">=1.34.51,<1.35.0"
-langchain-core = ">=0.2.2,<0.3"
+boto3 = ">=1.34.127,<1.35.0"
+langchain-core = ">=0.2.6,<0.3"
 numpy = ">=1,<2"
 
 [[package]]
@@ -4229,20 +4229,20 @@ langchain-core = ">=0.2.0,<0.3"
 
 [[package]]
 name = "langchain-community"
-version = "0.2.5"
+version = "0.2.6"
 description = "Community contributed LangChain integrations."
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain_community-0.2.5-py3-none-any.whl", hash = "sha256:bf37a334952e42c7676d083cf2d2c4cbfbb7de1949c4149fe19913e2b06c485f"},
-    {file = "langchain_community-0.2.5.tar.gz", hash = "sha256:476787b8c8c213b67e7b0eceb53346e787f00fbae12d8e680985bd4f93b0bf64"},
+    {file = "langchain_community-0.2.6-py3-none-any.whl", hash = "sha256:758cc800acfe5dd396bf8ba1b57c4792639ead0eab48ed0367f0732ec6ee1f68"},
+    {file = "langchain_community-0.2.6.tar.gz", hash = "sha256:40ce09a50ed798aa651ddb34c8978200fa8589b9813c7a28ce8af027bbf249f0"},
 ]
 
 [package.dependencies]
 aiohttp = ">=3.8.3,<4.0.0"
 dataclasses-json = ">=0.5.7,<0.7"
-langchain = ">=0.2.5,<0.3.0"
-langchain-core = ">=0.2.7,<0.3.0"
+langchain = ">=0.2.6,<0.3.0"
+langchain-core = ">=0.2.10,<0.3.0"
 langsmith = ">=0.1.0,<0.2.0"
 numpy = [
     {version = ">=1,<2", markers = "python_version < \"3.12\""},
@@ -4251,17 +4251,17 @@ numpy = [
 PyYAML = ">=5.3"
 requests = ">=2,<3"
 SQLAlchemy = ">=1.4,<3"
-tenacity = ">=8.1.0,<9.0.0"
+tenacity = ">=8.1.0,<8.4.0 || >8.4.0,<9.0.0"
 
 [[package]]
 name = "langchain-core"
-version = "0.2.9"
+version = "0.2.10"
 description = "Building applications with LLMs through composability"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain_core-0.2.9-py3-none-any.whl", hash = "sha256:426a5a4fea95a5db995ba5ab560b76edd4998fb6fe52ccc28ac987092a4cbfcd"},
-    {file = "langchain_core-0.2.9.tar.gz", hash = "sha256:f1c59082642921727844e1cd0eb36d451edd1872c20e193aa3142aac03495986"},
+    {file = "langchain_core-0.2.10-py3-none-any.whl", hash = "sha256:6eb72086b6bc86db9812da98f79e507c2209a15c0112aefd214a04182ada8586"},
+    {file = "langchain_core-0.2.10.tar.gz", hash = "sha256:33d1fc234ab58c80476eb5bbde2107ef522a2ce8f46bdf47d9e1bd21e054208f"},
 ]
 
 [package.dependencies]
@@ -4277,18 +4277,18 @@ tenacity = ">=8.1.0,<8.4.0 || >8.4.0,<9.0.0"
 
 [[package]]
 name = "langchain-experimental"
-version = "0.0.61"
+version = "0.0.62"
 description = "Building applications with LLMs through composability"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain_experimental-0.0.61-py3-none-any.whl", hash = "sha256:f9c516f528f55919743bd56fe1689a53bf74ae7f8902d64b9d8aebc61249cbe2"},
-    {file = "langchain_experimental-0.0.61.tar.gz", hash = "sha256:e9538efb994be5db3045cc582cddb9787c8299c86ffeee9d3779b7f58eef2226"},
+    {file = "langchain_experimental-0.0.62-py3-none-any.whl", hash = "sha256:9240f9e3490e819976f20a37863970036e7baacb7104b9eb6833d19ab6d518c9"},
+    {file = "langchain_experimental-0.0.62.tar.gz", hash = "sha256:9737fbc8429d24457ea4d368e3c9ba9ed1cace0564fb5f1a96a3027a588bd0ac"},
 ]
 
 [package.dependencies]
-langchain-community = ">=0.2.5,<0.3.0"
-langchain-core = ">=0.2.7,<0.3.0"
+langchain-community = ">=0.2.6,<0.3.0"
+langchain-core = ">=0.2.10,<0.3.0"
 
 [[package]]
 name = "langchain-google-genai"
@@ -4377,13 +4377,13 @@ pymongo = ">=4.6.1,<5.0"
 
 [[package]]
 name = "langchain-openai"
-version = "0.1.9"
+version = "0.1.10"
 description = "An integration package connecting OpenAI and LangChain"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain_openai-0.1.9-py3-none-any.whl", hash = "sha256:afae71ef315c967685e53fe061470438000946739a9492d5f2d53bd4ae9d495a"},
-    {file = "langchain_openai-0.1.9.tar.gz", hash = "sha256:730a94d68208678b9b9f64e4959a87057e021d6600754ea8b954e7765c7a62f1"},
+    {file = "langchain_openai-0.1.10-py3-none-any.whl", hash = "sha256:62eb000980eb45e4f16c88acdbaeccf3d59266554b0dd3ce6bebea1bbe8143dd"},
+    {file = "langchain_openai-0.1.10.tar.gz", hash = "sha256:30f881f8ccaec28c054759837c41fd2a2264fcc5564728ce12e1715891a9ce3c"},
 ]
 
 [package.dependencies]
@@ -4409,20 +4409,17 @@ pinecone-client = ">=3.2.2,<4.0.0"
 
 [[package]]
 name = "langchain-text-splitters"
-version = "0.2.1"
+version = "0.2.2"
 description = "LangChain text splitting utilities"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain_text_splitters-0.2.1-py3-none-any.whl", hash = "sha256:c2774a85f17189eaca50339629d2316d13130d4a8d9f1a1a96f3a03670c4a138"},
-    {file = "langchain_text_splitters-0.2.1.tar.gz", hash = "sha256:06853d17d7241ecf5c97c7b6ef01f600f9b0fb953dd997838142a527a4f32ea4"},
+    {file = "langchain_text_splitters-0.2.2-py3-none-any.whl", hash = "sha256:1c80d4b11b55e2995f02d2a326c0323ee1eeff24507329bb22924e420c782dff"},
+    {file = "langchain_text_splitters-0.2.2.tar.gz", hash = "sha256:a1e45de10919fa6fb080ef0525deab56557e9552083600455cb9fa4238076140"},
 ]
 
 [package.dependencies]
-langchain-core = ">=0.2.0,<0.3.0"
-
-[package.extras]
-extended-testing = ["beautifulsoup4 (>=4.12.3,<5.0.0)", "lxml (>=4.9.3,<6.0)"]
+langchain-core = ">=0.2.10,<0.3.0"
 
 [[package]]
 name = "langchainhub"
@@ -4456,7 +4453,7 @@ six = "*"
 
 [[package]]
 name = "langflow-base"
-version = "0.0.80"
+version = "0.0.81"
 description = "A Python package with a built-in web application"
 optional = false
 python-versions = ">=3.10,<3.13"
@@ -4474,6 +4471,7 @@ docstring-parser = "^0.15"
 duckdb = "^1.0.0"
 emoji = "^2.12.0"
 fastapi = "^0.111.0"
+firecrawl-py = "^0.0.16"
 gunicorn = "^22.0.0"
 httpx = "*"
 jq = {version = "^1.7.0", markers = "sys_platform != \"win32\""}
@@ -4557,13 +4555,13 @@ requests = ">=2,<3"
 
 [[package]]
 name = "litellm"
-version = "1.40.26"
+version = "1.40.27"
 description = "Library to easily interface with LLM API providers"
 optional = false
 python-versions = "!=2.7.*,!=3.0.*,!=3.1.*,!=3.2.*,!=3.3.*,!=3.4.*,!=3.5.*,!=3.6.*,!=3.7.*,>=3.8"
 files = [
-    {file = "litellm-1.40.26-py3-none-any.whl", hash = "sha256:5daedec00a3a8e32f55b3099190ccd9d550177f6e516823002831e6620ae771c"},
-    {file = "litellm-1.40.26.tar.gz", hash = "sha256:4dfd4ca3eb50a62600e60303c4975ba9fe7c52d07882d0d2b6bad2d474d88758"},
+    {file = "litellm-1.40.27-py3-none-any.whl", hash = "sha256:f6906e5260d784e7e31d579f5b28545e87517268cb96dd0dcaf31e4c5d34073f"},
+    {file = "litellm-1.40.27.tar.gz", hash = "sha256:a13a04168be5a8e52d43c34c2e657ca2521da61039ac39a17abc233a1875923f"},
 ]
 
 [package.dependencies]
@@ -5748,13 +5746,13 @@ sympy = "*"
 
 [[package]]
 name = "openai"
-version = "1.35.3"
+version = "1.35.5"
 description = "The official Python library for the openai API"
 optional = false
 python-versions = ">=3.7.1"
 files = [
-    {file = "openai-1.35.3-py3-none-any.whl", hash = "sha256:7b26544cef80f125431c073ffab3811d2421fbb9e30d3bd5c2436aba00b042d5"},
-    {file = "openai-1.35.3.tar.gz", hash = "sha256:d6177087f150b381d49499be782d764213fdf638d391b29ca692b84dd675a389"},
+    {file = "openai-1.35.5-py3-none-any.whl", hash = "sha256:28d92503c6e4b6a32a89277b36693023ef41f60922a4b5c8c621e8c5697ae3a6"},
+    {file = "openai-1.35.5.tar.gz", hash = "sha256:67ef289ae22d350cbf9381d83ae82c4e3596d71b7ad1cc886143554ee12fe0c9"},
 ]
 
 [package.dependencies]
@@ -7067,71 +7065,61 @@ windows-terminal = ["colorama (>=0.4.6)"]
 
 [[package]]
 name = "pymongo"
-version = "4.7.3"
+version = "4.8.0"
 description = "Python driver for MongoDB <http://www.mongodb.org>"
 optional = false
-python-versions = ">=3.7"
+python-versions = ">=3.8"
 files = [
-    {file = "pymongo-4.7.3-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:e9580b4537b3cc5d412070caabd1dabdf73fdce249793598792bac5782ecf2eb"},
-    {file = "pymongo-4.7.3-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:517243b2b189c98004570dd8fc0e89b1a48363d5578b3b99212fa2098b2ea4b8"},
-    {file = "pymongo-4.7.3-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:23b1e9dabd61da1c7deb54d888f952f030e9e35046cebe89309b28223345b3d9"},
-    {file = "pymongo-4.7.3-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:03e0f9901ad66c6fb7da0d303461377524d61dab93a4e4e5af44164c5bb4db76"},
-    {file = "pymongo-4.7.3-cp310-cp310-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:9a870824aa54453aee030bac08c77ebcf2fe8999400f0c2a065bebcbcd46b7f8"},
-    {file = "pymongo-4.7.3-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:dfd7b3d3f4261bddbb74a332d87581bc523353e62bb9da4027cc7340f6fcbebc"},
-    {file = "pymongo-4.7.3-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:4d719a643ea6da46d215a3ba51dac805a773b611c641319558d8576cbe31cef8"},
-    {file = "pymongo-4.7.3-cp310-cp310-win32.whl", hash = "sha256:d8b1e06f361f3c66ee694cb44326e1a2e4f93bc9c3a4849ae8547889fca71154"},
-    {file = "pymongo-4.7.3-cp310-cp310-win_amd64.whl", hash = "sha256:c450ab2f9397e2d5caa7fddeb4feb30bf719c47c13ae02c0bbb3b71bf4099c1c"},
-    {file = "pymongo-4.7.3-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:79cc6459209e885ba097779eaa0fe7f2fa049db39ab43b1731cf8d065a4650e8"},
-    {file = "pymongo-4.7.3-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:6e2287f1e2cc35e73cd74a4867e398a97962c5578a3991c730ef78d276ca8e46"},
-    {file = "pymongo-4.7.3-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:413506bd48d8c31ee100645192171e4773550d7cb940b594d5175ac29e329ea1"},
-    {file = "pymongo-4.7.3-cp311-cp311-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:1cc1febf17646d52b7561caa762f60bdfe2cbdf3f3e70772f62eb624269f9c05"},
-    {file = "pymongo-4.7.3-cp311-cp311-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:8dfcf18a49955d50a16c92b39230bd0668ffc9c164ccdfe9d28805182b48fa72"},
-    {file = "pymongo-4.7.3-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:89872041196c008caddf905eb59d3dc2d292ae6b0282f1138418e76f3abd3ad6"},
-    {file = "pymongo-4.7.3-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:d3ed97b89de62ea927b672ad524de0d23f3a6b4a01c8d10e3d224abec973fbc3"},
-    {file = "pymongo-4.7.3-cp311-cp311-win32.whl", hash = "sha256:d2f52b38151e946011d888a8441d3d75715c663fc5b41a7ade595e924e12a90a"},
-    {file = "pymongo-4.7.3-cp311-cp311-win_amd64.whl", hash = "sha256:4a4cc91c28e81c0ce03d3c278e399311b0af44665668a91828aec16527082676"},
-    {file = "pymongo-4.7.3-cp312-cp312-macosx_10_9_x86_64.whl", hash = "sha256:cb30c8a78f5ebaca98640943447b6a0afcb146f40b415757c9047bf4a40d07b4"},
-    {file = "pymongo-4.7.3-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:9cf2069f5d37c398186453589486ea98bb0312214c439f7d320593b61880dc05"},
-    {file = "pymongo-4.7.3-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:3564f423958fced8a8c90940fd2f543c27adbcd6c7c6ed6715d847053f6200a0"},
-    {file = "pymongo-4.7.3-cp312-cp312-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:7a8af8a38fa6951fff73e6ff955a6188f829b29fed7c5a1b739a306b4aa56fe8"},
-    {file = "pymongo-4.7.3-cp312-cp312-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:3a0e81c8dba6d825272867d487f18764cfed3c736d71d7d4ff5b79642acbed42"},
-    {file = "pymongo-4.7.3-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:88fc1d146feabac4385ea8ddb1323e584922922641303c8bf392fe1c36803463"},
-    {file = "pymongo-4.7.3-cp312-cp312-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:4225100b2c5d1f7393d7c5d256ceb8b20766830eecf869f8ae232776347625a6"},
-    {file = "pymongo-4.7.3-cp312-cp312-win32.whl", hash = "sha256:5f3569ed119bf99c0f39ac9962fb5591eff02ca210fe80bb5178d7a1171c1b1e"},
-    {file = "pymongo-4.7.3-cp312-cp312-win_amd64.whl", hash = "sha256:eb383c54c0c8ba27e7712b954fcf2a0905fee82a929d277e2e94ad3a5ba3c7db"},
-    {file = "pymongo-4.7.3-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:a46cffe91912570151617d866a25d07b9539433a32231ca7e7cf809b6ba1745f"},
-    {file = "pymongo-4.7.3-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4c3cba427dac50944c050c96d958c5e643c33a457acee03bae27c8990c5b9c16"},
-    {file = "pymongo-4.7.3-cp37-cp37m-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:a7a5fd893edbeb7fa982f8d44b6dd0186b6cd86c89e23f6ef95049ff72bffe46"},
-    {file = "pymongo-4.7.3-cp37-cp37m-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:c168a2fadc8b19071d0a9a4f85fe38f3029fe22163db04b4d5c046041c0b14bd"},
-    {file = "pymongo-4.7.3-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:2c59c2c9e70f63a7f18a31e367898248c39c068c639b0579623776f637e8f482"},
-    {file = "pymongo-4.7.3-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:d08165fd82c89d372e82904c3268bd8fe5de44f92a00e97bb1db1785154397d9"},
-    {file = "pymongo-4.7.3-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:397fed21afec4fdaecf72f9c4344b692e489756030a9c6d864393e00c7e80491"},
-    {file = "pymongo-4.7.3-cp37-cp37m-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:f903075f8625e2d228f1b9b9a0cf1385f1c41e93c03fd7536c91780a0fb2e98f"},
-    {file = "pymongo-4.7.3-cp37-cp37m-win32.whl", hash = "sha256:8ed1132f58c38add6b6138b771d0477a3833023c015c455d9a6e26f367f9eb5c"},
-    {file = "pymongo-4.7.3-cp37-cp37m-win_amd64.whl", hash = "sha256:8d00a5d8fc1043a4f641cbb321da766699393f1b6f87c70fae8089d61c9c9c54"},
-    {file = "pymongo-4.7.3-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:9377b868c38700c7557aac1bc4baae29f47f1d279cc76b60436e547fd643318c"},
-    {file = "pymongo-4.7.3-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:da4a6a7b4f45329bb135aa5096823637bd5f760b44d6224f98190ee367b6b5dd"},
-    {file = "pymongo-4.7.3-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:487e2f9277f8a63ac89335ec4f1699ae0d96ebd06d239480d69ed25473a71b2c"},
-    {file = "pymongo-4.7.3-cp38-cp38-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:6db3d608d541a444c84f0bfc7bad80b0b897e0f4afa580a53f9a944065d9b633"},
-    {file = "pymongo-4.7.3-cp38-cp38-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:e90af2ad3a8a7c295f4d09a2fbcb9a350c76d6865f787c07fe843b79c6e821d1"},
-    {file = "pymongo-4.7.3-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:8e28feb18dc559d50ededba27f9054c79f80c4edd70a826cecfe68f3266807b3"},
-    {file = "pymongo-4.7.3-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:f21ecddcba2d9132d5aebd8e959de8d318c29892d0718420447baf2b9bccbb19"},
-    {file = "pymongo-4.7.3-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:26140fbb3f6a9a74bd73ed46d0b1f43d5702e87a6e453a31b24fad9c19df9358"},
-    {file = "pymongo-4.7.3-cp38-cp38-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:94baa5fc7f7d22c3ce2ac7bd92f7e03ba7a6875f2480e3b97a400163d6eaafc9"},
-    {file = "pymongo-4.7.3-cp38-cp38-win32.whl", hash = "sha256:92dd247727dd83d1903e495acc743ebd757f030177df289e3ba4ef8a8c561fad"},
-    {file = "pymongo-4.7.3-cp38-cp38-win_amd64.whl", hash = "sha256:1c90c848a5e45475731c35097f43026b88ef14a771dfd08f20b67adc160a3f79"},
-    {file = "pymongo-4.7.3-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:f598be401b416319a535c386ac84f51df38663f7a9d1071922bda4d491564422"},
-    {file = "pymongo-4.7.3-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:35ba90477fae61c65def6e7d09e8040edfdd3b7fd47c3c258b4edded60c4d625"},
-    {file = "pymongo-4.7.3-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:9aa8735955c70892634d7e61b0ede9b1eefffd3cd09ccabee0ffcf1bdfe62254"},
-    {file = "pymongo-4.7.3-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:82a97d8f7f138586d9d0a0cff804a045cdbbfcfc1cd6bba542b151e284fbbec5"},
-    {file = "pymongo-4.7.3-cp39-cp39-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:de3b9db558930efab5eaef4db46dcad8bf61ac3ddfd5751b3e5ac6084a25e366"},
-    {file = "pymongo-4.7.3-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:f0e149217ef62812d3c2401cf0e2852b0c57fd155297ecc4dcd67172c4eca402"},
-    {file = "pymongo-4.7.3-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:b3a8a1ef4a824f5feb793b3231526d0045eadb5eb01080e38435dfc40a26c3e5"},
-    {file = "pymongo-4.7.3-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:d14e5e89a4be1f10efc3d9dcb13eb7a3b2334599cb6bb5d06c6a9281b79c8e22"},
-    {file = "pymongo-4.7.3-cp39-cp39-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:c6bfa29f032fd4fd7b129520f8cdb51ab71d88c2ba0567cccd05d325f963acb5"},
-    {file = "pymongo-4.7.3-cp39-cp39-win32.whl", hash = "sha256:1421d0bd2ce629405f5157bd1aaa9b83f12d53a207cf68a43334f4e4ee312b66"},
-    {file = "pymongo-4.7.3-cp39-cp39-win_amd64.whl", hash = "sha256:f7ee974f8b9370a998919c55b1050889f43815ab588890212023fecbc0402a6d"},
-    {file = "pymongo-4.7.3.tar.gz", hash = "sha256:6354a66b228f2cd399be7429685fb68e07f19110a3679782ecb4fdb68da03831"},
+    {file = "pymongo-4.8.0-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:f2b7bec27e047e84947fbd41c782f07c54c30c76d14f3b8bf0c89f7413fac67a"},
+    {file = "pymongo-4.8.0-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:3c68fe128a171493018ca5c8020fc08675be130d012b7ab3efe9e22698c612a1"},
+    {file = "pymongo-4.8.0-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:920d4f8f157a71b3cb3f39bc09ce070693d6e9648fb0e30d00e2657d1dca4e49"},
+    {file = "pymongo-4.8.0-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:52b4108ac9469febba18cea50db972605cc43978bedaa9fea413378877560ef8"},
+    {file = "pymongo-4.8.0-cp310-cp310-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:180d5eb1dc28b62853e2f88017775c4500b07548ed28c0bd9c005c3d7bc52526"},
+    {file = "pymongo-4.8.0-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:aec2b9088cdbceb87e6ca9c639d0ff9b9d083594dda5ca5d3c4f6774f4c81b33"},
+    {file = "pymongo-4.8.0-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:d0cf61450feadca81deb1a1489cb1a3ae1e4266efd51adafecec0e503a8dcd84"},
+    {file = "pymongo-4.8.0-cp310-cp310-win32.whl", hash = "sha256:8b18c8324809539c79bd6544d00e0607e98ff833ca21953df001510ca25915d1"},
+    {file = "pymongo-4.8.0-cp310-cp310-win_amd64.whl", hash = "sha256:e5df28f74002e37bcbdfdc5109799f670e4dfef0fb527c391ff84f078050e7b5"},
+    {file = "pymongo-4.8.0-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:6b50040d9767197b77ed420ada29b3bf18a638f9552d80f2da817b7c4a4c9c68"},
+    {file = "pymongo-4.8.0-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:417369ce39af2b7c2a9c7152c1ed2393edfd1cbaf2a356ba31eb8bcbd5c98dd7"},
+    {file = "pymongo-4.8.0-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:bf821bd3befb993a6db17229a2c60c1550e957de02a6ff4dd0af9476637b2e4d"},
+    {file = "pymongo-4.8.0-cp311-cp311-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:9365166aa801c63dff1a3cb96e650be270da06e3464ab106727223123405510f"},
+    {file = "pymongo-4.8.0-cp311-cp311-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:cc8b8582f4209c2459b04b049ac03c72c618e011d3caa5391ff86d1bda0cc486"},
+    {file = "pymongo-4.8.0-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:16e5019f75f6827bb5354b6fef8dfc9d6c7446894a27346e03134d290eb9e758"},
+    {file = "pymongo-4.8.0-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:3b5802151fc2b51cd45492c80ed22b441d20090fb76d1fd53cd7760b340ff554"},
+    {file = "pymongo-4.8.0-cp311-cp311-win32.whl", hash = "sha256:4bf58e6825b93da63e499d1a58de7de563c31e575908d4e24876234ccb910eba"},
+    {file = "pymongo-4.8.0-cp311-cp311-win_amd64.whl", hash = "sha256:b747c0e257b9d3e6495a018309b9e0c93b7f0d65271d1d62e572747f4ffafc88"},
+    {file = "pymongo-4.8.0-cp312-cp312-macosx_10_9_x86_64.whl", hash = "sha256:e6a720a3d22b54183352dc65f08cd1547204d263e0651b213a0a2e577e838526"},
+    {file = "pymongo-4.8.0-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:31e4d21201bdf15064cf47ce7b74722d3e1aea2597c6785882244a3bb58c7eab"},
+    {file = "pymongo-4.8.0-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:c6b804bb4f2d9dc389cc9e827d579fa327272cdb0629a99bfe5b83cb3e269ebf"},
+    {file = "pymongo-4.8.0-cp312-cp312-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:f2fbdb87fe5075c8beb17a5c16348a1ea3c8b282a5cb72d173330be2fecf22f5"},
+    {file = "pymongo-4.8.0-cp312-cp312-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:cd39455b7ee70aabee46f7399b32ab38b86b236c069ae559e22be6b46b2bbfc4"},
+    {file = "pymongo-4.8.0-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:940d456774b17814bac5ea7fc28188c7a1338d4a233efbb6ba01de957bded2e8"},
+    {file = "pymongo-4.8.0-cp312-cp312-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:236bbd7d0aef62e64caf4b24ca200f8c8670d1a6f5ea828c39eccdae423bc2b2"},
+    {file = "pymongo-4.8.0-cp312-cp312-win32.whl", hash = "sha256:47ec8c3f0a7b2212dbc9be08d3bf17bc89abd211901093e3ef3f2adea7de7a69"},
+    {file = "pymongo-4.8.0-cp312-cp312-win_amd64.whl", hash = "sha256:e84bc7707492f06fbc37a9f215374d2977d21b72e10a67f1b31893ec5a140ad8"},
+    {file = "pymongo-4.8.0-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:519d1bab2b5e5218c64340b57d555d89c3f6c9d717cecbf826fb9d42415e7750"},
+    {file = "pymongo-4.8.0-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:87075a1feb1e602e539bdb1ef8f4324a3427eb0d64208c3182e677d2c0718b6f"},
+    {file = "pymongo-4.8.0-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:77f53429515d2b3e86dcc83dadecf7ff881e538c168d575f3688698a8707b80a"},
+    {file = "pymongo-4.8.0-cp38-cp38-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:fdc20cd1e1141b04696ffcdb7c71e8a4a665db31fe72e51ec706b3bdd2d09f36"},
+    {file = "pymongo-4.8.0-cp38-cp38-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:284d0717d1a7707744018b0b6ee7801b1b1ff044c42f7be7a01bb013de639470"},
+    {file = "pymongo-4.8.0-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:f5bf0eb8b6ef40fa22479f09375468c33bebb7fe49d14d9c96c8fd50355188b0"},
+    {file = "pymongo-4.8.0-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:2ecd71b9226bd1d49416dc9f999772038e56f415a713be51bf18d8676a0841c8"},
+    {file = "pymongo-4.8.0-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:e0061af6e8c5e68b13f1ec9ad5251247726653c5af3c0bbdfbca6cf931e99216"},
+    {file = "pymongo-4.8.0-cp38-cp38-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:658d0170f27984e0d89c09fe5c42296613b711a3ffd847eb373b0dbb5b648d5f"},
+    {file = "pymongo-4.8.0-cp38-cp38-win32.whl", hash = "sha256:3ed1c316718a2836f7efc3d75b4b0ffdd47894090bc697de8385acd13c513a70"},
+    {file = "pymongo-4.8.0-cp38-cp38-win_amd64.whl", hash = "sha256:7148419eedfea9ecb940961cfe465efaba90595568a1fb97585fb535ea63fe2b"},
+    {file = "pymongo-4.8.0-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:e8400587d594761e5136a3423111f499574be5fd53cf0aefa0d0f05b180710b0"},
+    {file = "pymongo-4.8.0-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:af3e98dd9702b73e4e6fd780f6925352237f5dce8d99405ff1543f3771201704"},
+    {file = "pymongo-4.8.0-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:de3a860f037bb51f968de320baef85090ff0bbb42ec4f28ec6a5ddf88be61871"},
+    {file = "pymongo-4.8.0-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:0fc18b3a093f3db008c5fea0e980dbd3b743449eee29b5718bc2dc15ab5088bb"},
+    {file = "pymongo-4.8.0-cp39-cp39-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:18c9d8f975dd7194c37193583fd7d1eb9aea0c21ee58955ecf35362239ff31ac"},
+    {file = "pymongo-4.8.0-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:408b2f8fdbeca3c19e4156f28fff1ab11c3efb0407b60687162d49f68075e63c"},
+    {file = "pymongo-4.8.0-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:b6564780cafd6abeea49759fe661792bd5a67e4f51bca62b88faab497ab5fe89"},
+    {file = "pymongo-4.8.0-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:d18d86bc9e103f4d3d4f18b85a0471c0e13ce5b79194e4a0389a224bb70edd53"},
+    {file = "pymongo-4.8.0-cp39-cp39-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:9097c331577cecf8034422956daaba7ec74c26f7b255d718c584faddd7fa2e3c"},
+    {file = "pymongo-4.8.0-cp39-cp39-win32.whl", hash = "sha256:d5428dbcd43d02f6306e1c3c95f692f68b284e6ee5390292242f509004c9e3a8"},
+    {file = "pymongo-4.8.0-cp39-cp39-win_amd64.whl", hash = "sha256:ef7225755ed27bfdb18730c68f6cb023d06c28f2b734597480fb4c0e500feb6f"},
+    {file = "pymongo-4.8.0.tar.gz", hash = "sha256:454f2295875744dc70f1881e4b2eb99cdad008a33574bc8aaf120530f66c0cde"},
 ]
 
 [package.dependencies]
@@ -7139,6 +7127,7 @@ dnspython = ">=1.16.0,<3.0.0"
 
 [package.extras]
 aws = ["pymongo-auth-aws (>=1.1.0,<2.0.0)"]
+docs = ["furo (==2023.9.10)", "readthedocs-sphinx-search (>=0.3,<1.0)", "sphinx (>=5.3,<8)", "sphinx-rtd-theme (>=2,<3)", "sphinxcontrib-shellcheck (>=1,<2)"]
 encryption = ["certifi", "pymongo-auth-aws (>=1.1.0,<2.0.0)", "pymongocrypt (>=1.6.0,<2.0.0)"]
 gssapi = ["pykerberos", "winkerberos (>=0.5.0)"]
 ocsp = ["certifi", "cryptography (>=2.5)", "pyopenssl (>=17.2.0)", "requests (<3.0.0)", "service-identity (>=18.1.0)"]
@@ -7880,13 +7869,13 @@ websockets = ">=11,<13"
 
 [[package]]
 name = "redis"
-version = "5.0.6"
+version = "5.0.7"
 description = "Python client for Redis database and key-value store"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "redis-5.0.6-py3-none-any.whl", hash = "sha256:c0d6d990850c627bbf7be01c5c4cbaadf67b48593e913bb71c9819c30df37eee"},
-    {file = "redis-5.0.6.tar.gz", hash = "sha256:38473cd7c6389ad3e44a91f4c3eaf6bcb8a9f746007f29bf4fb20824ff0b2197"},
+    {file = "redis-5.0.7-py3-none-any.whl", hash = "sha256:0e479e24da960c690be5d9b96d21f7b918a98c0cf49af3b6fafaa0753f93a0db"},
+    {file = "redis-5.0.7.tar.gz", hash = "sha256:8f611490b93c8109b50adc317b31bfd84fff31def3475b92e7e80bf39f48175b"},
 ]
 
 [package.dependencies]
@@ -8361,13 +8350,13 @@ dev = ["pre-commit", "pytest", "ruff (>=0.3.0)"]
 
 [[package]]
 name = "sentry-sdk"
-version = "2.6.0"
+version = "2.7.0"
 description = "Python client for Sentry (https://sentry.io)"
 optional = false
 python-versions = ">=3.6"
 files = [
-    {file = "sentry_sdk-2.6.0-py2.py3-none-any.whl", hash = "sha256:422b91cb49378b97e7e8d0e8d5a1069df23689d45262b86f54988a7db264e874"},
-    {file = "sentry_sdk-2.6.0.tar.gz", hash = "sha256:65cc07e9c6995c5e316109f138570b32da3bd7ff8d0d0ee4aaf2628c3dd8127d"},
+    {file = "sentry_sdk-2.7.0-py2.py3-none-any.whl", hash = "sha256:db9594c27a4d21c1ebad09908b1f0dc808ef65c2b89c1c8e7e455143262e37c1"},
+    {file = "sentry_sdk-2.7.0.tar.gz", hash = "sha256:d846a211d4a0378b289ced3c434480945f110d0ede00450ba631fc2852e7a0d4"},
 ]
 
 [package.dependencies]
@@ -8399,7 +8388,7 @@ langchain = ["langchain (>=0.0.210)"]
 loguru = ["loguru (>=0.5)"]
 openai = ["openai (>=1.0.0)", "tiktoken (>=0.3.0)"]
 opentelemetry = ["opentelemetry-distro (>=0.35b0)"]
-opentelemetry-experimental = ["opentelemetry-distro (>=0.40b0,<1.0)", "opentelemetry-instrumentation-aiohttp-client (>=0.40b0,<1.0)", "opentelemetry-instrumentation-django (>=0.40b0,<1.0)", "opentelemetry-instrumentation-fastapi (>=0.40b0,<1.0)", "opentelemetry-instrumentation-flask (>=0.40b0,<1.0)", "opentelemetry-instrumentation-requests (>=0.40b0,<1.0)", "opentelemetry-instrumentation-sqlite3 (>=0.40b0,<1.0)", "opentelemetry-instrumentation-urllib (>=0.40b0,<1.0)"]
+opentelemetry-experimental = ["opentelemetry-instrumentation-aio-pika (==0.46b0)", "opentelemetry-instrumentation-aiohttp-client (==0.46b0)", "opentelemetry-instrumentation-aiopg (==0.46b0)", "opentelemetry-instrumentation-asgi (==0.46b0)", "opentelemetry-instrumentation-asyncio (==0.46b0)", "opentelemetry-instrumentation-asyncpg (==0.46b0)", "opentelemetry-instrumentation-aws-lambda (==0.46b0)", "opentelemetry-instrumentation-boto (==0.46b0)", "opentelemetry-instrumentation-boto3sqs (==0.46b0)", "opentelemetry-instrumentation-botocore (==0.46b0)", "opentelemetry-instrumentation-cassandra (==0.46b0)", "opentelemetry-instrumentation-celery (==0.46b0)", "opentelemetry-instrumentation-confluent-kafka (==0.46b0)", "opentelemetry-instrumentation-dbapi (==0.46b0)", "opentelemetry-instrumentation-django (==0.46b0)", "opentelemetry-instrumentation-elasticsearch (==0.46b0)", "opentelemetry-instrumentation-falcon (==0.46b0)", "opentelemetry-instrumentation-fastapi (==0.46b0)", "opentelemetry-instrumentation-flask (==0.46b0)", "opentelemetry-instrumentation-grpc (==0.46b0)", "opentelemetry-instrumentation-httpx (==0.46b0)", "opentelemetry-instrumentation-jinja2 (==0.46b0)", "opentelemetry-instrumentation-kafka-python (==0.46b0)", "opentelemetry-instrumentation-logging (==0.46b0)", "opentelemetry-instrumentation-mysql (==0.46b0)", "opentelemetry-instrumentation-mysqlclient (==0.46b0)", "opentelemetry-instrumentation-pika (==0.46b0)", "opentelemetry-instrumentation-psycopg (==0.46b0)", "opentelemetry-instrumentation-psycopg2 (==0.46b0)", "opentelemetry-instrumentation-pymemcache (==0.46b0)", "opentelemetry-instrumentation-pymongo (==0.46b0)", "opentelemetry-instrumentation-pymysql (==0.46b0)", "opentelemetry-instrumentation-pyramid (==0.46b0)", "opentelemetry-instrumentation-redis (==0.46b0)", "opentelemetry-instrumentation-remoulade (==0.46b0)", "opentelemetry-instrumentation-requests (==0.46b0)", "opentelemetry-instrumentation-sklearn (==0.46b0)", "opentelemetry-instrumentation-sqlalchemy (==0.46b0)", "opentelemetry-instrumentation-sqlite3 (==0.46b0)", "opentelemetry-instrumentation-starlette (==0.46b0)", "opentelemetry-instrumentation-system-metrics (==0.46b0)", "opentelemetry-instrumentation-threading (==0.46b0)", "opentelemetry-instrumentation-tornado (==0.46b0)", "opentelemetry-instrumentation-tortoiseorm (==0.46b0)", "opentelemetry-instrumentation-urllib (==0.46b0)", "opentelemetry-instrumentation-urllib3 (==0.46b0)", "opentelemetry-instrumentation-wsgi (==0.46b0)"]
 pure-eval = ["asttokens", "executing", "pure-eval"]
 pymongo = ["pymongo (>=3.1)"]
 pyspark = ["pyspark (>=2.4.4)"]
diff --git a/pyproject.toml b/pyproject.toml
index 159c81fbe..5e3744a89 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -147,11 +147,33 @@ ignore-regex = '.*(Stati Uniti|Tense=Pres).*'
 minversion = "6.0"
 testpaths = ["tests", "integration"]
 console_output_style = "progress"
-filterwarnings = ["ignore::DeprecationWarning"]
+filterwarnings = ["ignore::DeprecationWarning", "ignore::ResourceWarning"]
 log_cli = true
 markers = ["async_test", "api_key_required"]
 
 
+[tool.coverage.run]
+command_line = """
+    -m pytest
+    --cov --cov-report=term --cov-report=html
+    --instafail -ra -n auto -m "not api_key_required"
+    tests/unit
+"""
+source = ["src/backend/base/langflow/"]
+omit = ["*/alembic/*", "tests/*", "*/__init__.py"]
+
+
+[tool.coverage.report]
+sort = "Stmts"
+skip_empty = true
+show_missing = false
+ignore_errors = true
+
+
+[tool.coverage.html]
+directory = "coverage"
+
+
 [tool.ruff]
 exclude = ["src/backend/langflow/alembic/*"]
 line-length = 120
diff --git a/render.yaml b/render.yaml
index 919a3e21f..69852cf40 100644
--- a/render.yaml
+++ b/render.yaml
@@ -3,14 +3,16 @@ services:
   - type: web
     name: langflow
     runtime: docker
-    dockerfilePath: ./docker/render.pre-release.Dockerfile
+    dockerfilePath: ./docker/render.Dockerfile
     repo: https://github.com/langflow-ai/langflow
-    branch: dev
+    branch: main
     healthCheckPath: /health
     autoDeploy: false
     envVars:
       - key: LANGFLOW_DATABASE_URL
         value: sqlite:////home/user/.cache/langflow/langflow.db
+      - key: LANGFLOW_HOST
+        value: 0.0.0.0
     disk:
       name: langflow-data
       mountPath: /home/user/.cache/langflow
diff --git a/scripts/aws/package-lock.json b/scripts/aws/package-lock.json
index c1be6a071..1f99ebc3f 100644
--- a/scripts/aws/package-lock.json
+++ b/scripts/aws/package-lock.json
@@ -1950,12 +1950,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -2763,9 +2763,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
diff --git a/src/backend/base/langflow/alembic/versions/d066bfd22890_add_message_table.py b/src/backend/base/langflow/alembic/versions/d066bfd22890_add_message_table.py
new file mode 100644
index 000000000..dd63398b7
--- /dev/null
+++ b/src/backend/base/langflow/alembic/versions/d066bfd22890_add_message_table.py
@@ -0,0 +1,52 @@
+"""Add message table
+
+Revision ID: 325180f0c4e1
+Revises: 631faacf5da2
+Create Date: 2024-06-23 21:29:28.220100
+
+"""
+
+from typing import Sequence, Union
+
+import sqlalchemy as sa
+import sqlmodel
+from alembic import op
+
+from langflow.utils import migration
+
+# revision identifiers, used by Alembic.
+revision: str = "325180f0c4e1"
+down_revision: Union[str, None] = "631faacf5da2"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    conn = op.get_bind()
+    # ### commands auto generated by Alembic - please adjust! ###
+    if not migration.table_exists("message", conn):
+        op.create_table(
+            "message",
+            sa.Column("timestamp", sa.DateTime(), nullable=False),
+            sa.Column("sender", sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+            sa.Column("sender_name", sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+            sa.Column("session_id", sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+            sa.Column("text", sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+            sa.Column("id", sqlmodel.sql.sqltypes.GUID(), nullable=False),
+            sa.Column("flow_id", sqlmodel.sql.sqltypes.GUID(), nullable=True),
+            sa.Column("files", sa.JSON(), nullable=True),
+            sa.ForeignKeyConstraint(
+                ["flow_id"],
+                ["flow.id"],
+            ),
+            sa.PrimaryKeyConstraint("id"),
+        )
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    conn = op.get_bind()
+    # ### commands auto generated by Alembic - please adjust! ###
+    if migration.table_exists("message", conn):
+        op.drop_table("message")
+    # ### end Alembic commands ###
diff --git a/src/backend/base/langflow/api/v1/endpoints.py b/src/backend/base/langflow/api/v1/endpoints.py
index 92358111a..35a8f6637 100644
--- a/src/backend/base/langflow/api/v1/endpoints.py
+++ b/src/backend/base/langflow/api/v1/endpoints.py
@@ -276,15 +276,15 @@ async def webhook_run_flow(
         # get all webhook components in the flow
         webhook_components = get_all_webhook_components_in_flow(flow.data)
         tweaks = {}
-        data_dict = await request.json()
+
         for component in webhook_components:
             tweaks[component["id"]] = {"data": data.decode() if isinstance(data, bytes) else data}
         input_request = SimplifiedAPIRequest(
-            input_value=data_dict.get("input_value", ""),
-            input_type=data_dict.get("input_type", "chat"),
-            output_type=data_dict.get("output_type", "chat"),
+            input_value="",
+            input_type="chat",
+            output_type="chat",
             tweaks=tweaks,
-            session_id=data_dict.get("session_id"),
+            session_id=None,
         )
         logger.debug("Starting background task")
         background_tasks.add_task(  # type: ignore
diff --git a/src/backend/base/langflow/api/v1/files.py b/src/backend/base/langflow/api/v1/files.py
index a96397e08..1e3d828b2 100644
--- a/src/backend/base/langflow/api/v1/files.py
+++ b/src/backend/base/langflow/api/v1/files.py
@@ -131,8 +131,8 @@ async def list_profile_pictures(storage_service: StorageService = Depends(get_st
         people = await storage_service.list_files(flow_id=people_path)  # type: ignore
         space = await storage_service.list_files(flow_id=space_path)  # type: ignore
 
-        files = [Path("People") / i for i in people]
-        files += [Path("Space") / i for i in space]
+        files = [f"People/{i}" for i in people]
+        files += [f"Space/{i}" for i in space]
 
         return {"files": files}
 
diff --git a/src/backend/base/langflow/api/v1/flows.py b/src/backend/base/langflow/api/v1/flows.py
index d735a314b..e01af05ac 100644
--- a/src/backend/base/langflow/api/v1/flows.py
+++ b/src/backend/base/langflow/api/v1/flows.py
@@ -1,3 +1,4 @@
+import re
 from datetime import datetime, timezone
 from typing import List
 from uuid import UUID
@@ -46,8 +47,14 @@ def create_flow(
                 select(Flow).where(Flow.name.like(f"{flow.name} (%")).where(Flow.user_id == current_user.id)  # type: ignore
             ).all()
             if flows:
-                numbers = [int(flow.name.split("(")[1].split(")")[0]) for flow in flows]
-                flow.name = f"{flow.name} ({max(numbers) + 1})"
+                extract_number = re.compile(r"\((\d+)\)$")
+                numbers = []
+                for _flow in flows:
+                    result = extract_number.search(_flow.name)
+                    if result:
+                        numbers.append(int(result.groups(1)[0]))
+                if numbers:
+                    flow.name = f"{flow.name} ({max(numbers) + 1})"
             else:
                 flow.name = f"{flow.name} (1)"
         # Now check if the endpoint is unique
@@ -204,28 +211,11 @@ def update_flow(
         if settings_service.settings.remove_api_keys:
             flow_data = remove_api_keys(flow_data)
         for key, value in flow_data.items():
-            if value is not None:
-                setattr(db_flow, key, value)
+            setattr(db_flow, key, value)
         webhook_component = get_webhook_component_in_flow(db_flow.data)
         db_flow.webhook = webhook_component is not None
         db_flow.updated_at = datetime.now(timezone.utc)
 
-        # First check if the flow.name is unique
-        # there might be flows with name like: "MyFlow", "MyFlow (1)", "MyFlow (2)"
-        # so we need to check if the name is unique with `like` operator
-        # if we find a flow with the same name, we add a number to the end of the name
-        # based on the highest number found
-        flow_from_db = session.exec(select(Flow).where(Flow.id == flow_id, Flow.user_id == current_user.id)).first()
-        if flow_from_db:
-            flows = session.exec(
-                select(Flow).where(Flow.name.like(f"{flow.name} (%")).where(Flow.user_id == current_user.id)  # type: ignore
-            ).all()
-            if flows:
-                numbers = [int(flow.name.split("(")[1].split(")")[0]) for flow in flows]
-                flow.name = f"{flow.name} ({max(numbers) + 1})"
-            else:
-                flow.name = f"{flow.name} (1)"
-
         if db_flow.folder_id is None:
             default_folder = session.exec(select(Folder).where(Folder.name == DEFAULT_FOLDER_NAME)).first()
             if default_folder:
diff --git a/src/backend/base/langflow/api/v1/monitor.py b/src/backend/base/langflow/api/v1/monitor.py
index a99c86bf8..224a26912 100644
--- a/src/backend/base/langflow/api/v1/monitor.py
+++ b/src/backend/base/langflow/api/v1/monitor.py
@@ -1,15 +1,15 @@
 from typing import List, Optional
-
+from uuid import UUID
 
 from fastapi import APIRouter, Depends, HTTPException, Query
+from sqlalchemy import delete
+from sqlmodel import Session, col, select
 
-from langflow.services.deps import get_monitor_service
-from langflow.services.monitor.schema import (
-    MessageModelRequest,
-    MessageModelResponse,
-    TransactionModelResponse,
-    VertexBuildMapModel,
-)
+from langflow.services.auth.utils import get_current_active_user
+from langflow.services.database.models.message.model import MessageRead, MessageTable, MessageUpdate
+from langflow.services.database.models.user.model import User
+from langflow.services.deps import get_monitor_service, get_session
+from langflow.services.monitor.schema import MessageModelResponse, TransactionModelResponse, VertexBuildMapModel
 from langflow.services.monitor.service import MonitorService
 
 router = APIRouter(prefix="/monitor", tags=["Monitor"])
@@ -52,45 +52,59 @@ async def get_messages(
     sender: Optional[str] = Query(None),
     sender_name: Optional[str] = Query(None),
     order_by: Optional[str] = Query("timestamp"),
-    monitor_service: MonitorService = Depends(get_monitor_service),
+    session: Session = Depends(get_session),
 ):
     try:
-        df = monitor_service.get_messages(
-            flow_id=flow_id,
-            sender=sender,
-            sender_name=sender_name,
-            session_id=session_id,
-            order_by=order_by,
-        )
-        dicts = df.to_dict(orient="records")
-        return [MessageModelResponse(**d) for d in dicts]
+        stmt = select(MessageTable)
+        if flow_id:
+            stmt = stmt.where(MessageTable.flow_id == flow_id)
+        if session_id:
+            stmt = stmt.where(MessageTable.session_id == session_id)
+        if sender:
+            stmt = stmt.where(MessageTable.sender == sender)
+        if sender_name:
+            stmt = stmt.where(MessageTable.sender_name == sender_name)
+        if order_by:
+            col = getattr(MessageTable, order_by).asc()
+            stmt = stmt.order_by(col)
+        messages = session.exec(stmt)
+        return [MessageModelResponse.model_validate(d, from_attributes=True) for d in messages]
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
 
 
 @router.delete("/messages", status_code=204)
 async def delete_messages(
-    message_ids: List[int],
-    monitor_service: MonitorService = Depends(get_monitor_service),
+    message_ids: List[UUID],
+    session: Session = Depends(get_session),
+    current_user: User = Depends(get_current_active_user),
 ):
     try:
-        monitor_service.delete_messages(message_ids=message_ids)
+        session.exec(delete(MessageTable).where(MessageTable.id.in_(message_ids)))  # type: ignore
+        session.commit()
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
 
 
-@router.post("/messages/{message_id}", response_model=MessageModelResponse)
+@router.put("/messages/{message_id}", response_model=MessageRead)
 async def update_message(
-    message_id: int,
-    message: MessageModelRequest,
-    monitor_service: MonitorService = Depends(get_monitor_service),
+    message_id: UUID,
+    message: MessageUpdate,
+    session: Session = Depends(get_session),
+    user: User = Depends(get_current_active_user),
 ):
     try:
-        message_dict = message.model_dump(exclude_none=True)
-        message_dict.pop("index", None)
-        monitor_service.update_message(message_id=message_id, **message_dict)  # type: ignore
-        return MessageModelResponse(index=message_id, **message_dict)
-
+        db_message = session.get(MessageTable, message_id)
+        if not db_message:
+            raise HTTPException(status_code=404, detail="Message not found")
+        message_dict = message.model_dump(exclude_unset=True, exclude_none=True)
+        db_message.sqlmodel_update(message_dict)
+        session.add(db_message)
+        session.commit()
+        session.refresh(db_message)
+        return db_message
+    except HTTPException as e:
+        raise e
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
 
@@ -98,10 +112,16 @@ async def update_message(
 @router.delete("/messages/session/{session_id}", status_code=204)
 async def delete_messages_session(
     session_id: str,
-    monitor_service: MonitorService = Depends(get_monitor_service),
+    session: Session = Depends(get_session),
 ):
     try:
-        monitor_service.delete_messages_session(session_id=session_id)
+        session.exec(  # type: ignore
+            delete(MessageTable)
+            .where(col(MessageTable.session_id) == session_id)
+            .execution_options(synchronize_session="fetch")
+        )
+        session.commit()
+        return {"message": "Messages deleted successfully"}
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
 
@@ -137,4 +157,3 @@ async def get_transactions(
         return result
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
-        raise HTTPException(status_code=500, detail=str(e))
diff --git a/src/backend/base/langflow/base/models/model.py b/src/backend/base/langflow/base/models/model.py
index 81f124fd7..0ea39fcb2 100644
--- a/src/backend/base/langflow/base/models/model.py
+++ b/src/backend/base/langflow/base/models/model.py
@@ -119,7 +119,11 @@ class LCModelComponent(Component):
         return status_message
 
     def get_chat_result(
-        self, runnable: LanguageModel, stream: bool, input_value: str | Message, system_message: Optional[str] = None
+        self,
+        runnable: LanguageModel,
+        stream: bool,
+        input_value: str | Message,
+        system_message: Optional[str] = None,
     ):
         messages: list[Union[BaseMessage]] = []
         if not input_value and not system_message:
@@ -139,13 +143,13 @@ class LCModelComponent(Component):
                 messages.append(HumanMessage(content=input_value))
         inputs: Union[list, dict] = messages or {}
         try:
-            runnable = runnable.with_config(
-                {"run_name": self.display_name, "project_name": self._tracing_service.project_name}
+            runnable = runnable.with_config(  # type: ignore
+                {"run_name": self.display_name, "project_name": self._tracing_service.project_name}  # type: ignore
             )
             if stream:
-                return runnable.stream(inputs)
+                return runnable.stream(inputs)  # type: ignore
             else:
-                message = runnable.invoke(inputs)
+                message = runnable.invoke(inputs)  # type: ignore
                 result = message.content if hasattr(message, "content") else message
                 if isinstance(message, AIMessage):
                     status_message = self.build_status_message(message)
diff --git a/src/backend/base/langflow/base/models/openai_constants.py b/src/backend/base/langflow/base/models/openai_constants.py
index e846229cc..8fffa9614 100644
--- a/src/backend/base/langflow/base/models/openai_constants.py
+++ b/src/backend/base/langflow/base/models/openai_constants.py
@@ -1 +1 @@
-MODEL_NAMES = ["gpt-4o", "gpt-4-turbo", "gpt-4-turbo-preview", "gpt-3.5-turbo", "gpt-3.5-turbo-0125"]
+MODEL_NAMES = ["gpt-4o", "gpt-4-turbo", "gpt-4-turbo-preview", "gpt-4", "gpt-3.5-turbo", "gpt-3.5-turbo-0125"]
diff --git a/src/backend/base/langflow/components/deactivated/ChatLiteLLMModel.py b/src/backend/base/langflow/components/deactivated/ChatLiteLLMModel.py
index cd487c4a0..10f7a1eb9 100644
--- a/src/backend/base/langflow/components/deactivated/ChatLiteLLMModel.py
+++ b/src/backend/base/langflow/components/deactivated/ChatLiteLLMModel.py
@@ -127,7 +127,7 @@ class ChatLiteLLMModelComponent(LCModelComponent):
         Output(display_name="Language Model", name="model_output", method="build_model"),
     ]
 
-    def build_model(self) -> LanguageModel:
+    def build_model(self) -> LanguageModel:  # type: ignore[type-var]
         try:
             import litellm  # type: ignore
 
@@ -176,5 +176,4 @@ class ChatLiteLLMModelComponent(LCModelComponent):
             openrouter_api_key=api_keys["openrouter_api_key"],
         )
 
-        return output
-        return output
+        return output  # type: ignore
diff --git a/src/backend/base/langflow/components/embeddings/AstraVectorize.py b/src/backend/base/langflow/components/embeddings/AstraVectorize.py
index 00b1a9a63..cd618f346 100644
--- a/src/backend/base/langflow/components/embeddings/AstraVectorize.py
+++ b/src/backend/base/langflow/components/embeddings/AstraVectorize.py
@@ -13,20 +13,39 @@ class AstraVectorize(Component):
     VECTORIZE_PROVIDERS_MAPPING = {
         "Azure OpenAI": ["azureOpenAI", ["text-embedding-3-small", "text-embedding-3-large", "text-embedding-ada-002"]],
         "Hugging Face - Dedicated": ["huggingfaceDedicated", ["endpoint-defined-model"]],
-        "Hugging Face - Serverless": ["huggingface",
-                                      ["sentence-transformers/all-MiniLM-L6-v2", "intfloat/multilingual-e5-large",
-                                       "intfloat/multilingual-e5-large-instruct", "BAAI/bge-small-en-v1.5",
-                                       "BAAI/bge-base-en-v1.5", "BAAI/bge-large-en-v1.5"]],
-        "Jina AI": ["jinaAI", ["jina-embeddings-v2-base-en", "jina-embeddings-v2-base-de", "jina-embeddings-v2-base-es",
-                               "jina-embeddings-v2-base-code", "jina-embeddings-v2-base-zh"]],
+        "Hugging Face - Serverless": [
+            "huggingface",
+            [
+                "sentence-transformers/all-MiniLM-L6-v2",
+                "intfloat/multilingual-e5-large",
+                "intfloat/multilingual-e5-large-instruct",
+                "BAAI/bge-small-en-v1.5",
+                "BAAI/bge-base-en-v1.5",
+                "BAAI/bge-large-en-v1.5",
+            ],
+        ],
+        "Jina AI": [
+            "jinaAI",
+            [
+                "jina-embeddings-v2-base-en",
+                "jina-embeddings-v2-base-de",
+                "jina-embeddings-v2-base-es",
+                "jina-embeddings-v2-base-code",
+                "jina-embeddings-v2-base-zh",
+            ],
+        ],
         "Mistral AI": ["mistral", ["mistral-embed"]],
         "NVIDIA": ["nvidia", ["NV-Embed-QA"]],
         "OpenAI": ["openai", ["text-embedding-3-small", "text-embedding-3-large", "text-embedding-ada-002"]],
         "Upstage": ["upstageAI", ["solar-embedding-1-large"]],
-        "Voyage AI": ["voyageAI",
-                      ["voyage-large-2-instruct", "voyage-law-2", "voyage-code-2", "voyage-large-2", "voyage-2"]]
+        "Voyage AI": [
+            "voyageAI",
+            ["voyage-large-2-instruct", "voyage-law-2", "voyage-code-2", "voyage-large-2", "voyage-2"],
+        ],
     }
-    VECTORIZE_MODELS_STR = "\n\n".join([provider + ": " + (', '.join(models[1])) for provider, models in VECTORIZE_PROVIDERS_MAPPING.items()])
+    VECTORIZE_MODELS_STR = "\n\n".join(
+        [provider + ": " + (", ".join(models[1])) for provider, models in VECTORIZE_PROVIDERS_MAPPING.items()]
+    )
 
     inputs = [
         DropdownInput(
@@ -39,13 +58,13 @@ class AstraVectorize(Component):
             name="model_name",
             display_name="Model name",
             info=f"The embedding model to use for the selected provider. Each provider has a different set of models "
-                 f"available (full list at https://docs.datastax.com/en/astra-db-serverless/databases/embedding-generation.html):\n\n{VECTORIZE_MODELS_STR}",
-            required=True
+            f"available (full list at https://docs.datastax.com/en/astra-db-serverless/databases/embedding-generation.html):\n\n{VECTORIZE_MODELS_STR}",
+            required=True,
         ),
         MessageTextInput(
             name="api_key_name",
             display_name="API Key name",
-            info="The name of the embeddings provider API key stored on Astra. If set, it will override the 'ProviderKey' in the authentication parameters."
+            info="The name of the embeddings provider API key stored on Astra. If set, it will override the 'ProviderKey' in the authentication parameters.",
         ),
         DictInput(
             name="authentication",
diff --git a/src/backend/base/langflow/components/embeddings/OpenAIEmbeddings.py b/src/backend/base/langflow/components/embeddings/OpenAIEmbeddings.py
index 039caea24..7f56874be 100644
--- a/src/backend/base/langflow/components/embeddings/OpenAIEmbeddings.py
+++ b/src/backend/base/langflow/components/embeddings/OpenAIEmbeddings.py
@@ -40,7 +40,7 @@ class OpenAIEmbeddingsComponent(LCEmbeddingsModel):
         ),
         DictInput(name="model_kwargs", display_name="Model Kwargs", advanced=True),
         SecretStrInput(name="openai_api_base", display_name="OpenAI API Base", advanced=True),
-        SecretStrInput(name="openai_api_key", display_name="OpenAI API Key"),
+        SecretStrInput(name="openai_api_key", display_name="OpenAI API Key", value="OPENAI_API_KEY"),
         SecretStrInput(name="openai_api_type", display_name="OpenAI API Type", advanced=True),
         MessageTextInput(name="openai_api_version", display_name="OpenAI API Version", advanced=True),
         MessageTextInput(
diff --git a/src/backend/base/langflow/components/helpers/CreateList.py b/src/backend/base/langflow/components/helpers/CreateList.py
new file mode 100644
index 000000000..ea0130ecc
--- /dev/null
+++ b/src/backend/base/langflow/components/helpers/CreateList.py
@@ -0,0 +1,28 @@
+from langflow.custom import Component
+from langflow.inputs import StrInput
+from langflow.schema import Data
+from langflow.template import Output
+
+
+class CreateListComponent(Component):
+    display_name = "Create List"
+    description = "Creates a list of texts."
+    icon = "list"
+
+    inputs = [
+        StrInput(
+            name="texts",
+            display_name="Texts",
+            info="Enter one or more texts.",
+            is_list=True,
+        ),
+    ]
+
+    outputs = [
+        Output(display_name="Data List", name="list", method="create_list"),
+    ]
+
+    def create_list(self) -> list[Data]:
+        data = [Data(text=text) for text in self.texts]
+        self.status = data
+        return data
diff --git a/src/backend/base/langflow/components/helpers/IDGenerator.py b/src/backend/base/langflow/components/helpers/IDGenerator.py
index 72a944f71..7e63f870b 100644
--- a/src/backend/base/langflow/components/helpers/IDGenerator.py
+++ b/src/backend/base/langflow/components/helpers/IDGenerator.py
@@ -5,7 +5,7 @@ from langflow.custom import CustomComponent
 from langflow.schema.dotdict import dotdict
 
 
-class UUIDGeneratorComponent(CustomComponent):
+class IDGeneratorComponent(CustomComponent):
     display_name = "ID Generator"
     description = "Generates a unique ID."
 
diff --git a/src/backend/base/langflow/components/helpers/StoreMessage.py b/src/backend/base/langflow/components/helpers/StoreMessage.py
index 5d0abfbb9..ce1abbe29 100644
--- a/src/backend/base/langflow/components/helpers/StoreMessage.py
+++ b/src/backend/base/langflow/components/helpers/StoreMessage.py
@@ -1,22 +1,47 @@
-from langflow.custom import CustomComponent
-from langflow.memory import get_messages, store_message
+from langflow.custom import Component
+from langflow.inputs import MessageInput, StrInput
 from langflow.schema.message import Message
+from langflow.template import Output
+from langflow.memory import get_messages, store_message
 
 
-class StoreMessageComponent(CustomComponent):
+class StoreMessageComponent(Component):
     display_name = "Store Message"
-    description = "Stores a chat message."
+    description = "Stores a chat message or text."
+    icon = "save"
 
-    def build_config(self):
-        return {
-            "message": {"display_name": "Message"},
-        }
+    inputs = [
+        MessageInput(name="message", display_name="Message", info="The chat message to be stored.", required=True),
+        StrInput(
+            name="sender",
+            display_name="Sender",
+            info="The sender of the message.",
+            value="AI",
+            advanced=True,
+        ),
+        StrInput(
+            name="sender_name", display_name="Sender Name", info="The name of the sender.", value="AI", advanced=True
+        ),
+        StrInput(
+            name="session_id",
+            display_name="Session ID",
+            info="The session ID of the chat.",
+            value="",
+        ),
+    ]
+
+    outputs = [
+        Output(display_name="Stored Messages", name="stored_messages", method="store_message"),
+    ]
+
+    def store_message(self) -> Message:
+        message = self.message
+
+        message.session_id = self.session_id or message.session_id
+        message.sender = self.sender or message.sender
+        message.sender_name = self.sender_name or message.sender_name
 
-    def build(
-        self,
-        message: Message,
-    ) -> Message:
         store_message(message, flow_id=self.graph.flow_id)
-        self.status = get_messages()
-
-        return message
+        stored = get_messages(session_id=message.session_id, sender_name=message.sender_name, sender=message.sender)
+        self.status = stored
+        return stored
diff --git a/src/backend/base/langflow/components/helpers/__init__.py b/src/backend/base/langflow/components/helpers/__init__.py
index 1941e38b8..fcc9e83ee 100644
--- a/src/backend/base/langflow/components/helpers/__init__.py
+++ b/src/backend/base/langflow/components/helpers/__init__.py
@@ -1,22 +1,25 @@
 from .CombineText import CombineTextComponent
 from .CustomComponent import CustomComponent
 from .FilterData import FilterDataComponent
-from .IDGenerator import UUIDGeneratorComponent
+from .IDGenerator import IDGeneratorComponent
 from .Memory import MemoryComponent
 from .MergeData import MergeDataComponent
 from .ParseData import ParseDataComponent
 from .SplitText import SplitTextComponent
 from .StoreMessage import StoreMessageComponent
+from .CreateList import CreateListComponent
 
 
 __all__ = [
+    "CreateListComponent",
     "CombineTextComponent",
     "CustomComponent",
     "FilterDataComponent",
-    "UUIDGeneratorComponent",
+    "IDGeneratorComponent",
     "MemoryComponent",
     "MergeDataComponent",
     "ParseDataComponent",
     "SplitTextComponent",
     "StoreMessageComponent",
+    "ListComponent",
 ]
diff --git a/src/backend/base/langflow/components/langchain_utilities/FirecrawlCrawlApi.py b/src/backend/base/langflow/components/langchain_utilities/FirecrawlCrawlApi.py
index 54355285d..ea5a3918e 100644
--- a/src/backend/base/langflow/components/langchain_utilities/FirecrawlCrawlApi.py
+++ b/src/backend/base/langflow/components/langchain_utilities/FirecrawlCrawlApi.py
@@ -1,8 +1,9 @@
+import uuid
 from typing import Optional
-from firecrawl.firecrawl import FirecrawlApp
+
 from langflow.custom import CustomComponent
 from langflow.schema import Data
-import uuid
+
 
 class FirecrawlCrawlApi(CustomComponent):
     display_name: str = "FirecrawlCrawlApi"
@@ -47,18 +48,25 @@ class FirecrawlCrawlApi(CustomComponent):
         self,
         api_key: str,
         url: str,
-        timeout: Optional[int] = 30000,
+        timeout: int = 30000,
         crawlerOptions: Optional[Data] = None,
         pageOptions: Optional[Data] = None,
         idempotency_key: Optional[str] = None,
     ) -> Data:
+        try:
+            from firecrawl.firecrawl import FirecrawlApp  # type: ignore
+        except ImportError:
+            raise ImportError(
+                "Could not import firecrawl integration package. " "Please install it with `pip install firecrawl-py`."
+            )
+
         if crawlerOptions:
-            crawler_options_dict = crawlerOptions.__dict__['data']['text']
+            crawler_options_dict = crawlerOptions.__dict__["data"]["text"]
         else:
             crawler_options_dict = {}
 
         if pageOptions:
-            page_options_dict = pageOptions.__dict__['data']['text']
+            page_options_dict = pageOptions.__dict__["data"]["text"]
         else:
             page_options_dict = {}
 
@@ -74,7 +82,7 @@ class FirecrawlCrawlApi(CustomComponent):
             },
             True,
             int(timeout / 1000),
-            idempotency_key
+            idempotency_key,
         )
 
         records = Data(data={"results": crawl_result})
diff --git a/src/backend/base/langflow/components/langchain_utilities/FirecrawlScrapeApi.py b/src/backend/base/langflow/components/langchain_utilities/FirecrawlScrapeApi.py
index 277cbfb93..a2bc6829b 100644
--- a/src/backend/base/langflow/components/langchain_utilities/FirecrawlScrapeApi.py
+++ b/src/backend/base/langflow/components/langchain_utilities/FirecrawlScrapeApi.py
@@ -1,8 +1,9 @@
 from typing import Optional
-from firecrawl.firecrawl import FirecrawlApp
+
 from langflow.custom import CustomComponent
 from langflow.schema import Data
 
+
 class FirecrawlScrapeApi(CustomComponent):
     display_name: str = "FirecrawlScrapeApi"
     description: str = "Firecrawl Scrape API."
@@ -46,13 +47,19 @@ class FirecrawlScrapeApi(CustomComponent):
         pageOptions: Optional[Data] = None,
         extractorOptions: Optional[Data] = None,
     ) -> Data:
+        try:
+            from firecrawl.firecrawl import FirecrawlApp  # type: ignore
+        except ImportError:
+            raise ImportError(
+                "Could not import firecrawl integration package. " "Please install it with `pip install firecrawl-py`."
+            )
         if extractorOptions:
-            extractor_options_dict = extractorOptions.__dict__['data']['text']
+            extractor_options_dict = extractorOptions.__dict__["data"]["text"]
         else:
             extractor_options_dict = {}
 
         if pageOptions:
-            page_options_dict = pageOptions.__dict__['data']['text']
+            page_options_dict = pageOptions.__dict__["data"]["text"]
         else:
             page_options_dict = {}
 
diff --git a/src/backend/base/langflow/components/models/AmazonBedrockModel.py b/src/backend/base/langflow/components/models/AmazonBedrockModel.py
index ba06c6723..21c778a89 100644
--- a/src/backend/base/langflow/components/models/AmazonBedrockModel.py
+++ b/src/backend/base/langflow/components/models/AmazonBedrockModel.py
@@ -69,7 +69,7 @@ class AmazonBedrockComponent(LCModelComponent):
         Output(display_name="Language Model", name="model_output", method="build_model"),
     ]
 
-    def build_model(self) -> LanguageModel:
+    def build_model(self) -> LanguageModel:  # type: ignore[type-var]
         model_id = self.model_id
         credentials_profile_name = self.credentials_profile_name
         region_name = self.region_name
@@ -89,4 +89,4 @@ class AmazonBedrockComponent(LCModelComponent):
             )
         except Exception as e:
             raise ValueError("Could not connect to AmazonBedrock API.") from e
-        return output
+        return output  # type: ignore
diff --git a/src/backend/base/langflow/components/models/AnthropicModel.py b/src/backend/base/langflow/components/models/AnthropicModel.py
index 4a750b645..39a78c384 100644
--- a/src/backend/base/langflow/components/models/AnthropicModel.py
+++ b/src/backend/base/langflow/components/models/AnthropicModel.py
@@ -64,7 +64,7 @@ class AnthropicModelComponent(LCModelComponent):
         Output(display_name="Language Model", name="model_output", method="build_model"),
     ]
 
-    def build_model(self) -> LanguageModel:
+    def build_model(self) -> LanguageModel:  # type: ignore[type-var]
         model = self.model
         anthropic_api_key = self.anthropic_api_key
         max_tokens = self.max_tokens
@@ -83,7 +83,7 @@ class AnthropicModelComponent(LCModelComponent):
         except Exception as e:
             raise ValueError("Could not connect to Anthropic API.") from e
 
-        return output
+        return output  # type: ignore
 
     def _get_exception_message(self, exception: Exception) -> str | None:
         """
diff --git a/src/backend/base/langflow/components/models/AzureOpenAIModel.py b/src/backend/base/langflow/components/models/AzureOpenAIModel.py
index 9a2ebbbe0..23528ed29 100644
--- a/src/backend/base/langflow/components/models/AzureOpenAIModel.py
+++ b/src/backend/base/langflow/components/models/AzureOpenAIModel.py
@@ -78,7 +78,7 @@ class AzureChatOpenAIComponent(LCModelComponent):
         Output(display_name="Language Model", name="model_output", method="model_response"),
     ]
 
-    def model_response(self) -> LanguageModel:
+    def model_response(self) -> LanguageModel:  # type: ignore[type-var]
         model = self.model
         azure_endpoint = self.azure_endpoint
         azure_deployment = self.azure_deployment
@@ -107,4 +107,4 @@ class AzureChatOpenAIComponent(LCModelComponent):
         except Exception as e:
             raise ValueError("Could not connect to AzureOpenAI API.") from e
 
-        return output
+        return output  # type: ignore
diff --git a/src/backend/base/langflow/components/models/CohereModel.py b/src/backend/base/langflow/components/models/CohereModel.py
index 305f8b4c2..101b72397 100644
--- a/src/backend/base/langflow/components/models/CohereModel.py
+++ b/src/backend/base/langflow/components/models/CohereModel.py
@@ -51,4 +51,4 @@ class CohereComponent(LCModelComponent):
             cohere_api_key=api_key,
         )
 
-        return output
+        return output  # type: ignore
diff --git a/src/backend/base/langflow/components/models/GoogleGenerativeAIModel.py b/src/backend/base/langflow/components/models/GoogleGenerativeAIModel.py
index d4e75e54b..7bcaf0b07 100644
--- a/src/backend/base/langflow/components/models/GoogleGenerativeAIModel.py
+++ b/src/backend/base/langflow/components/models/GoogleGenerativeAIModel.py
@@ -3,15 +3,7 @@ from pydantic.v1 import SecretStr
 from langflow.base.constants import STREAM_INFO_TEXT
 from langflow.base.models.model import LCModelComponent
 from langflow.field_typing import LanguageModel
-from langflow.inputs import (
-    BoolInput,
-    DropdownInput,
-    FloatInput,
-    IntInput,
-    MessageInput,
-    SecretStrInput,
-    StrInput,
-)
+from langflow.inputs import BoolInput, DropdownInput, FloatInput, IntInput, MessageInput, SecretStrInput, StrInput
 
 
 class GoogleGenerativeAIComponent(LCModelComponent):
@@ -66,7 +58,7 @@ class GoogleGenerativeAIComponent(LCModelComponent):
         ),
     ]
 
-    def build_model(self) -> LanguageModel:
+    def build_model(self) -> LanguageModel:  # type: ignore[type-var]
         try:
             from langchain_google_genai import ChatGoogleGenerativeAI
         except ImportError:
@@ -90,4 +82,4 @@ class GoogleGenerativeAIComponent(LCModelComponent):
             google_api_key=SecretStr(google_api_key),
         )
 
-        return output
+        return output  # type: ignore
diff --git a/src/backend/base/langflow/components/models/GroqModel.py b/src/backend/base/langflow/components/models/GroqModel.py
index a4784354f..fe1f4f4b1 100644
--- a/src/backend/base/langflow/components/models/GroqModel.py
+++ b/src/backend/base/langflow/components/models/GroqModel.py
@@ -68,7 +68,7 @@ class GroqModel(LCModelComponent):
         ),
     ]
 
-    def build_model(self) -> LanguageModel:
+    def build_model(self) -> LanguageModel:  # type: ignore[type-var]
         groq_api_key = self.groq_api_key
         model_name = self.model_name
         max_tokens = self.max_tokens
@@ -87,4 +87,4 @@ class GroqModel(LCModelComponent):
             streaming=stream,
         )
 
-        return output
+        return output  # type: ignore
diff --git a/src/backend/base/langflow/components/models/HuggingFaceModel.py b/src/backend/base/langflow/components/models/HuggingFaceModel.py
index 021f15793..28c341114 100644
--- a/src/backend/base/langflow/components/models/HuggingFaceModel.py
+++ b/src/backend/base/langflow/components/models/HuggingFaceModel.py
@@ -36,7 +36,7 @@ class HuggingFaceEndpointsComponent(LCModelComponent):
         Output(display_name="Language Model", name="model_output", method="build_model"),
     ]
 
-    def build_model(self) -> LanguageModel:
+    def build_model(self) -> LanguageModel:  # type: ignore[type-var]
         endpoint_url = self.endpoint_url
         task = self.task
         huggingfacehub_api_token = self.huggingfacehub_api_token
@@ -53,4 +53,4 @@ class HuggingFaceEndpointsComponent(LCModelComponent):
             raise ValueError("Could not connect to HuggingFace Endpoints API.") from e
 
         output = ChatHuggingFace(llm=llm)
-        return output
+        return output  # type: ignore
diff --git a/src/backend/base/langflow/components/models/MistralModel.py b/src/backend/base/langflow/components/models/MistralModel.py
index cf20de5a0..1604ecb5b 100644
--- a/src/backend/base/langflow/components/models/MistralModel.py
+++ b/src/backend/base/langflow/components/models/MistralModel.py
@@ -70,7 +70,7 @@ class MistralAIModelComponent(LCModelComponent):
         Output(display_name="Language Model", name="model_output", method="build_model"),
     ]
 
-    def build_model(self) -> LanguageModel:
+    def build_model(self) -> LanguageModel:  # type: ignore[type-var]
         mistral_api_key = self.mistral_api_key
         temperature = self.temperature
         model_name = self.model_name
@@ -102,4 +102,4 @@ class MistralAIModelComponent(LCModelComponent):
             safe_mode=safe_mode,
         )
 
-        return output
+        return output  # type: ignore
diff --git a/src/backend/base/langflow/components/models/OllamaModel.py b/src/backend/base/langflow/components/models/OllamaModel.py
index 71a62cd68..1c0e5fd2c 100644
--- a/src/backend/base/langflow/components/models/OllamaModel.py
+++ b/src/backend/base/langflow/components/models/OllamaModel.py
@@ -223,7 +223,7 @@ class ChatOllamaComponent(LCModelComponent):
         Output(display_name="Language Model", name="model_output", method="build_model"),
     ]
 
-    def build_model(self) -> LanguageModel:
+    def build_model(self) -> LanguageModel:  # type: ignore[type-var]
         # Mapping mirostat settings to their corresponding values
         mirostat_options = {"Mirostat": 1, "Mirostat 2.0": 2}
 
@@ -272,4 +272,4 @@ class ChatOllamaComponent(LCModelComponent):
         except Exception as e:
             raise ValueError("Could not initialize Ollama LLM.") from e
 
-        return output
+        return output  # type: ignore
diff --git a/src/backend/base/langflow/components/models/OpenAIModel.py b/src/backend/base/langflow/components/models/OpenAIModel.py
index 6545cf3dc..0cdc8fdf9 100644
--- a/src/backend/base/langflow/components/models/OpenAIModel.py
+++ b/src/backend/base/langflow/components/models/OpenAIModel.py
@@ -34,6 +34,12 @@ class OpenAIModelComponent(LCModelComponent):
             info="The maximum number of tokens to generate. Set to 0 for unlimited tokens.",
         ),
         DictInput(name="model_kwargs", display_name="Model Kwargs", advanced=True),
+        BoolInput(
+            name="json_mode",
+            display_name="JSON Mode",
+            advanced=True,
+            info="If True, it will output JSON regardless of passing a schema.",
+        ),
         DictInput(
             name="output_schema",
             is_list=True,
@@ -74,8 +80,8 @@ class OpenAIModelComponent(LCModelComponent):
         ),
     ]
 
-    def build_model(self) -> LanguageModel:
-        # self.output_schea is a list of dictionaries
+    def build_model(self) -> LanguageModel:  # type: ignore[type-var]
+        # self.output_schea is a list of dictionarie s
         # let's convert it to a dictionary
         output_schema_dict: dict[str, str] = reduce(operator.ior, self.output_schema or {}, {})
         openai_api_key = self.openai_api_key
@@ -84,7 +90,7 @@ class OpenAIModelComponent(LCModelComponent):
         max_tokens = self.max_tokens
         model_kwargs = self.model_kwargs or {}
         openai_api_base = self.openai_api_base or "https://api.openai.com/v1"
-        json_mode = bool(output_schema_dict)
+        json_mode = bool(output_schema_dict) or self.json_mode
         seed = self.seed
         model_kwargs["seed"] = seed
 
@@ -101,9 +107,12 @@ class OpenAIModelComponent(LCModelComponent):
             temperature=temperature or 0.1,
         )
         if json_mode:
-            output = output.with_structured_output(schema=output_schema_dict, method="json_mode")  # type: ignore
+            if output_schema_dict:
+                output = output.with_structured_output(schema=output_schema_dict, method="json_mode")  # type: ignore
+            else:
+                output = output.bind(response_format={"type": "json_object"})  # type: ignore
 
-        return output
+        return output  # type: ignore
 
     def _get_exception_message(self, e: Exception):
         """
diff --git a/src/backend/base/langflow/components/models/VertexAiModel.py b/src/backend/base/langflow/components/models/VertexAiModel.py
index fb06ac5f2..0415a7971 100644
--- a/src/backend/base/langflow/components/models/VertexAiModel.py
+++ b/src/backend/base/langflow/components/models/VertexAiModel.py
@@ -52,7 +52,7 @@ class ChatVertexAIComponent(LCModelComponent):
         Output(display_name="Language Model", name="model_output", method="build_model"),
     ]
 
-    def build_model(self) -> LanguageModel:
+    def build_model(self) -> LanguageModel:  # type: ignore[type-var]
         credentials = self.credentials
         location = self.location
         max_output_tokens = self.max_output_tokens
@@ -75,4 +75,4 @@ class ChatVertexAIComponent(LCModelComponent):
             verbose=verbose,
         )
 
-        return output
+        return output  # type: ignore
diff --git a/src/backend/base/langflow/components/prototypes/ConditionalRouter.py b/src/backend/base/langflow/components/prototypes/ConditionalRouter.py
index 8305730ba..6d24bfa5e 100644
--- a/src/backend/base/langflow/components/prototypes/ConditionalRouter.py
+++ b/src/backend/base/langflow/components/prototypes/ConditionalRouter.py
@@ -66,21 +66,17 @@ class ConditionalRouterComponent(Component):
     def true_response(self) -> Message:
         result = self.evaluate_condition(self.input_text, self.match_text, self.operator, self.case_sensitive)
         if result:
-            self.stop("false_result")
-            response = self.message if self.message else self.input_text
-            self.status = response
-            return response
+            self.status = self.message
+            return self.message
         else:
             self.stop("true_result")
-            return Message()
+            return None  # type: ignore
 
     def false_response(self) -> Message:
         result = self.evaluate_condition(self.input_text, self.match_text, self.operator, self.case_sensitive)
         if not result:
-            self.stop("true_result")
-            response = self.message if self.message else self.input_text
-            self.status = response
-            return response
+            self.status = self.message
+            return self.message
         else:
             self.stop("false_result")
-            return Message()
+            return None  # type: ignore
diff --git a/src/backend/base/langflow/components/prototypes/Pass.py b/src/backend/base/langflow/components/prototypes/Pass.py
index 4e2f234c9..28e9ea524 100644
--- a/src/backend/base/langflow/components/prototypes/Pass.py
+++ b/src/backend/base/langflow/components/prototypes/Pass.py
@@ -1,31 +1,32 @@
-from typing import Union
-
-from langflow.custom import CustomComponent
-from langflow.field_typing import Text
-from langflow.schema import Data
+from langflow.custom import Component
+from langflow.io import MessageInput
+from langflow.schema.message import Message
+from langflow.template import Output
 
 
-class PassComponent(CustomComponent):
+class PassMessageComponent(Component):
     display_name = "Pass"
-    description = "A pass-through component that forwards the second input while ignoring the first, used for controlling workflow direction."
-    field_order = ["ignored_input", "forwarded_input"]
-    beta = True
+    description = "Forwards the input message, unchanged."
+    icon = "arrow-right"
 
-    def build_config(self) -> dict:
-        return {
-            "ignored_input": {
-                "display_name": "Ignored Input",
-                "info": "This input is ignored. It's used to control the flow in the graph.",
-                "input_types": ["Text", "Data"],
-            },
-            "forwarded_input": {
-                "display_name": "Input",
-                "info": "This input is forwarded by the component.",
-                "input_types": ["Text", "Data"],
-            },
-        }
+    inputs = [
+        MessageInput(
+            name="input_message",
+            display_name="Input Message",
+            info="The message to be passed forward.",
+        ),
+        MessageInput(
+            name="ignored_message",
+            display_name="Ignored Message",
+            info="A second message to be ignored. Used as a workaround for continuity.",
+            advanced=True,
+        ),
+    ]
 
-    def build(self, ignored_input: Text, forwarded_input: Text) -> Union[Text, Data]:
-        # The ignored_input is not used in the logic, it's just there for graph flow control
-        self.status = forwarded_input
-        return forwarded_input
+    outputs = [
+        Output(display_name="Output Message", name="output_message", method="pass_message"),
+    ]
+
+    def pass_message(self) -> Message:
+        self.status = self.input_message
+        return self.input_message
diff --git a/src/backend/base/langflow/components/prototypes/__init__.py b/src/backend/base/langflow/components/prototypes/__init__.py
index 89c14f7e9..252d1a1c5 100644
--- a/src/backend/base/langflow/components/prototypes/__init__.py
+++ b/src/backend/base/langflow/components/prototypes/__init__.py
@@ -2,7 +2,7 @@ from .ConditionalRouter import ConditionalRouterComponent
 from .FlowTool import FlowToolComponent
 from .Listen import ListenComponent
 from .Notify import NotifyComponent
-from .Pass import PassComponent
+from .Pass import PassMessageComponent
 from .PythonFunction import PythonFunctionComponent
 from .RunFlow import RunFlowComponent
 from .RunnableExecutor import RunnableExecComponent
@@ -16,7 +16,7 @@ __all__ = [
     "FlowToolComponent",
     "ListenComponent",
     "NotifyComponent",
-    "PassComponent",
+    "PassMessageComponent",
     "PythonFunctionComponent",
     "RunFlowComponent",
     "RunnableExecComponent",
diff --git a/src/backend/base/langflow/components/vectorstores/Cassandra.py b/src/backend/base/langflow/components/vectorstores/Cassandra.py
index 14ca572f4..ee6b83972 100644
--- a/src/backend/base/langflow/components/vectorstores/Cassandra.py
+++ b/src/backend/base/langflow/components/vectorstores/Cassandra.py
@@ -24,18 +24,20 @@ class CassandraVectorStoreComponent(LCVectorStoreComponent):
     icon = "Cassandra"
 
     inputs = [
-        MessageTextInput(name="database_ref",
-                         display_name="Contact Points / Astra Database ID",
-                         info="Contact points for the database (or AstraDB database ID)",
-                         required=True),
-        MessageTextInput(name="username",
-                         display_name="Username",
-                         info="Username for the database (leave empty for AstraDB)."),
+        MessageTextInput(
+            name="database_ref",
+            display_name="Contact Points / Astra Database ID",
+            info="Contact points for the database (or AstraDB database ID)",
+            required=True,
+        ),
+        MessageTextInput(
+            name="username", display_name="Username", info="Username for the database (leave empty for AstraDB)."
+        ),
         SecretStrInput(
             name="token",
             display_name="Password / AstraDB Token",
             info="User password for the database (or AstraDB token).",
-            required=True
+            required=True,
         ),
         MessageTextInput(
             name="keyspace",
@@ -81,7 +83,7 @@ class CassandraVectorStoreComponent(LCVectorStoreComponent):
             display_name="Cluster arguments",
             info="Optional dictionary of additional keyword arguments for the Cassandra cluster.",
             advanced=True,
-            is_list=True
+            is_list=True,
         ),
         MultilineInput(name="search_query", display_name="Search Query"),
         DataInput(
@@ -137,7 +139,7 @@ class CassandraVectorStoreComponent(LCVectorStoreComponent):
                 cluster_kwargs=self.cluster_kwargs,
             )
 
-        if not self.ttl_seconds:
+        if not self.ttl_seconds:  # type: ignore
             self.ttl_seconds = None
 
         documents = []
diff --git a/src/backend/base/langflow/custom/code_parser/code_parser.py b/src/backend/base/langflow/custom/code_parser/code_parser.py
index 9dc736dc0..8fc276efd 100644
--- a/src/backend/base/langflow/custom/code_parser/code_parser.py
+++ b/src/backend/base/langflow/custom/code_parser/code_parser.py
@@ -329,8 +329,6 @@ class CodeParser:
         """
         Extracts "classes" from the code, including inheritance and init methods.
         """
-        if node.name in ["CustomComponent", "Component", "BaseComponent"]:
-            return
         bases = self.get_base_classes()
         nodes = []
         for base in bases:
diff --git a/src/backend/base/langflow/custom/custom_component/custom_component.py b/src/backend/base/langflow/custom/custom_component/custom_component.py
index 5505ae132..ee8192496 100644
--- a/src/backend/base/langflow/custom/custom_component/custom_component.py
+++ b/src/backend/base/langflow/custom/custom_component/custom_component.py
@@ -83,7 +83,7 @@ class CustomComponent(BaseComponent):
     _flows_data: Optional[List[Data]] = None
     _outputs: List[OutputLog] = []
     _logs: List[Log] = []
-    _tracing_service: "TracingService"
+    tracing_service: Optional["TracingService"] = None
 
     def update_state(self, name: str, value: Any):
         if not self.vertex:
@@ -96,7 +96,7 @@ class CustomComponent(BaseComponent):
     def stop(self, output_name: str | None = None):
         if not output_name and self.vertex and len(self.vertex.outputs) == 1:
             output_name = self.vertex.outputs[0]["name"]
-        else:
+        elif not output_name:
             raise ValueError("You must specify an output name to call stop")
         if not self.vertex:
             raise ValueError("Vertex is not set")
@@ -488,14 +488,14 @@ class CustomComponent(BaseComponent):
         Args:
             message (LoggableType | list[LoggableType]): The message to log.
         """
-        if name is None:
-            name = self.display_name if self.display_name else self.__class__.__name__
-        if hasattr(message, "model_dump") and isinstance(message, BaseModel):
-            message = message.model_dump()
+        if name is None and self.display_name:
+            name = self.display_name
+        else:
+            name = self.__class__.__name__
         log = Log(message=message, type=get_artifact_type(message), name=name)
         self._logs.append(log)
-        if self.vertex:
-            self._tracing_service.add_log(trace_name=self.vertex.id, log=log)
+        if self.tracing_service and self.vertex:
+            self.tracing_service.add_log(trace_name=self.vertex.id, log=log)
 
     def post_code_processing(self, new_build_config: dict, current_build_config: dict):
         """
diff --git a/src/backend/base/langflow/field_typing/__init__.py b/src/backend/base/langflow/field_typing/__init__.py
index bd25f6cf4..e387c4c8d 100644
--- a/src/backend/base/langflow/field_typing/__init__.py
+++ b/src/backend/base/langflow/field_typing/__init__.py
@@ -26,6 +26,7 @@ from .constants import (
     TextSplitter,
     Tool,
     VectorStore,
+    LanguageModel,
 )
 from .range_spec import RangeSpec
 
@@ -84,4 +85,5 @@ __all__ = [
     "BaseChatModel",
     "Retriever",
     "Text",
+    "LanguageModel",
 ]
diff --git a/src/backend/base/langflow/graph/graph/base.py b/src/backend/base/langflow/graph/graph/base.py
index 46f562c95..22af2a68f 100644
--- a/src/backend/base/langflow/graph/graph/base.py
+++ b/src/backend/base/langflow/graph/graph/base.py
@@ -343,10 +343,10 @@ class Graph:
         except Exception as exc:
             logger.exception(exc)
             tb = traceback.format_exc()
-            await self.end_all_traces(error=f"{exc.__class__.__name__}: {exc}\n\n{tb}")
+            asyncio.create_task(self.end_all_traces(error=f"{exc.__class__.__name__}: {exc}\n\n{tb}"))
             raise ValueError(f"Error running graph: {exc}") from exc
         finally:
-            await self.end_all_traces()
+            asyncio.create_task(self.end_all_traces())
         # Get the outputs
         vertex_outputs = []
         for vertex in self.vertices:
@@ -1208,6 +1208,7 @@ class Graph:
         except ValueError:
             stop_or_start_vertex = self.get_root_of_group_node(vertex_id)
             stack = [stop_or_start_vertex.id]
+            vertex_id = stop_or_start_vertex.id
         stop_predecessors = [pre.id for pre in stop_or_start_vertex.predecessors]
         # DFS to collect all vertices that can reach the specified vertex
         while stack:
@@ -1443,7 +1444,7 @@ class Graph:
 
     def is_vertex_runnable(self, vertex_id: str) -> bool:
         """Returns whether a vertex is runnable."""
-        return self.run_manager.is_vertex_runnable(vertex_id)
+        return self.run_manager.is_vertex_runnable(vertex_id, self.inactivated_vertices)
 
     def build_run_map(self):
         """
@@ -1463,7 +1464,7 @@ class Graph:
         This checks the direct predecessors of each successor to identify any that are
         immediately runnable, expanding the search to ensure progress can be made.
         """
-        return self.run_manager.find_runnable_predecessors_for_successors(vertex_id)
+        return self.run_manager.find_runnable_predecessors_for_successors(vertex_id, self.inactivated_vertices)
 
     def remove_from_predecessors(self, vertex_id: str):
         self.run_manager.remove_from_predecessors(vertex_id)
diff --git a/src/backend/base/langflow/graph/graph/runnable_vertices_manager.py b/src/backend/base/langflow/graph/graph/runnable_vertices_manager.py
index 63b0aacaf..46d59066e 100644
--- a/src/backend/base/langflow/graph/graph/runnable_vertices_manager.py
+++ b/src/backend/base/langflow/graph/graph/runnable_vertices_manager.py
@@ -1,6 +1,6 @@
 import asyncio
 from collections import defaultdict
-from typing import TYPE_CHECKING, Callable, List, Coroutine
+from typing import TYPE_CHECKING, Callable, Coroutine, List
 
 if TYPE_CHECKING:
     from langflow.graph.graph.base import Graph
@@ -40,19 +40,23 @@ class RunnableVerticesManager:
         self.run_predecessors = state["run_predecessors"]
         self.vertices_to_run = state["vertices_to_run"]
 
-    def is_vertex_runnable(self, vertex_id: str) -> bool:
+    def is_vertex_runnable(self, vertex_id: str, inactivated_vertices: set[str]) -> bool:
         """Determines if a vertex is runnable."""
 
-        return vertex_id in self.vertices_to_run and not self.run_predecessors.get(vertex_id)
+        return (
+            vertex_id in self.vertices_to_run
+            and not self.run_predecessors.get(vertex_id)
+            and vertex_id not in inactivated_vertices
+        )
 
-    def find_runnable_predecessors_for_successors(self, vertex_id: str) -> List[str]:
+    def find_runnable_predecessors_for_successors(self, vertex_id: str, inactivated_vertices: set[str]) -> List[str]:
         """Finds runnable predecessors for the successors of a given vertex."""
         runnable_vertices = []
         visited = set()
 
         for successor_id in self.run_map.get(vertex_id, []):
             for predecessor_id in self.run_predecessors.get(successor_id, []):
-                if predecessor_id not in visited and self.is_vertex_runnable(predecessor_id):
+                if predecessor_id not in visited and self.is_vertex_runnable(predecessor_id, inactivated_vertices):
                     runnable_vertices.append(predecessor_id)
                     visited.add(predecessor_id)
         return runnable_vertices
@@ -104,10 +108,14 @@ class RunnableVerticesManager:
         """
         async with lock:
             self.remove_from_predecessors(vertex.id)
-            direct_successors_ready = [v for v in vertex.successors_ids if self.is_vertex_runnable(v)]
+            direct_successors_ready = [
+                v for v in vertex.successors_ids if self.is_vertex_runnable(v, graph.inactivated_vertices)
+            ]
             if not direct_successors_ready:
                 # No direct successors ready, look for runnable predecessors of successors
-                next_runnable_vertices = self.find_runnable_predecessors_for_successors(vertex.id)
+                next_runnable_vertices = self.find_runnable_predecessors_for_successors(
+                    vertex.id, graph.inactivated_vertices
+                )
             else:
                 next_runnable_vertices = direct_successors_ready
 
diff --git a/src/backend/base/langflow/initial_setup/starter_projects/Basic Prompting (Hello, World).json b/src/backend/base/langflow/initial_setup/starter_projects/Basic Prompting (Hello, World).json
index 163384b2c..50f9385ac 100644
--- a/src/backend/base/langflow/initial_setup/starter_projects/Basic Prompting (Hello, World).json	
+++ b/src/backend/base/langflow/initial_setup/starter_projects/Basic Prompting (Hello, World).json	
@@ -2,10 +2,11 @@
   "data": {
     "edges": [
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "ChatInput",
-            "id": "ChatInput-pxptT",
+            "id": "ChatInput-Y6mi1",
             "name": "message",
             "output_types": [
               "Message"
@@ -13,7 +14,7 @@
           },
           "targetHandle": {
             "fieldName": "user_input",
-            "id": "Prompt-1S5SU",
+            "id": "Prompt-Z4WYI",
             "inputTypes": [
               "Message",
               "Text"
@@ -21,17 +22,18 @@
             "type": "str"
           }
         },
-        "id": "reactflow__edge-ChatInput-pxptT{œdataTypeœ:œChatInputœ,œidœ:œChatInput-pxptTœ,œnameœ:œmessageœ,œoutput_typesœ:[œMessageœ]}-Prompt-1S5SU{œfieldNameœ:œuser_inputœ,œidœ:œPrompt-1S5SUœ,œinputTypesœ:[œMessageœ,œTextœ],œtypeœ:œstrœ}",
-        "source": "ChatInput-pxptT",
-        "sourceHandle": "{œdataTypeœ: œChatInputœ, œidœ: œChatInput-pxptTœ, œnameœ: œmessageœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "Prompt-1S5SU",
-        "targetHandle": "{œfieldNameœ: œuser_inputœ, œidœ: œPrompt-1S5SUœ, œinputTypesœ: [œMessageœ, œTextœ], œtypeœ: œstrœ}"
+        "id": "reactflow__edge-ChatInput-Y6mi1{œdataTypeœ:œChatInputœ,œidœ:œChatInput-Y6mi1œ,œnameœ:œmessageœ,œoutput_typesœ:[œMessageœ]}-Prompt-Z4WYI{œfieldNameœ:œuser_inputœ,œidœ:œPrompt-Z4WYIœ,œinputTypesœ:[œMessageœ,œTextœ],œtypeœ:œstrœ}",
+        "source": "ChatInput-Y6mi1",
+        "sourceHandle": "{œdataTypeœ: œChatInputœ, œidœ: œChatInput-Y6mi1œ, œnameœ: œmessageœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "Prompt-Z4WYI",
+        "targetHandle": "{œfieldNameœ: œuser_inputœ, œidœ: œPrompt-Z4WYIœ, œinputTypesœ: [œMessageœ, œTextœ], œtypeœ: œstrœ}"
       },
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "Prompt",
-            "id": "Prompt-1S5SU",
+            "id": "Prompt-Z4WYI",
             "name": "prompt",
             "output_types": [
               "Message"
@@ -39,24 +41,24 @@
           },
           "targetHandle": {
             "fieldName": "input_value",
-            "id": "OpenAIModel-nJXWj",
+            "id": "OpenAIModel-26Eve",
             "inputTypes": [
               "Message"
             ],
             "type": "str"
           }
         },
-        "id": "reactflow__edge-Prompt-1S5SU{œdataTypeœ:œPromptœ,œidœ:œPrompt-1S5SUœ,œnameœ:œpromptœ,œoutput_typesœ:[œMessageœ]}-OpenAIModel-nJXWj{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-nJXWjœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
-        "source": "Prompt-1S5SU",
-        "sourceHandle": "{œdataTypeœ: œPromptœ, œidœ: œPrompt-1S5SUœ, œnameœ: œpromptœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "OpenAIModel-nJXWj",
-        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œOpenAIModel-nJXWjœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
+        "id": "reactflow__edge-Prompt-Z4WYI{œdataTypeœ:œPromptœ,œidœ:œPrompt-Z4WYIœ,œnameœ:œpromptœ,œoutput_typesœ:[œMessageœ]}-OpenAIModel-26Eve{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-26Eveœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
+        "source": "Prompt-Z4WYI",
+        "sourceHandle": "{œdataTypeœ: œPromptœ, œidœ: œPrompt-Z4WYIœ, œnameœ: œpromptœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "OpenAIModel-26Eve",
+        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œOpenAIModel-26Eveœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
       },
       {
         "data": {
           "sourceHandle": {
-            "dataType": "OpenAIModel",
-            "id": "OpenAIModel-nJXWj",
+            "dataType": "OpenAIModelComponent",
+            "id": "OpenAIModel-26Eve",
             "name": "text_output",
             "output_types": [
               "Message"
@@ -64,24 +66,24 @@
           },
           "targetHandle": {
             "fieldName": "input_value",
-            "id": "ChatOutput-XP4bj",
+            "id": "ChatOutput-cQnVI",
             "inputTypes": [
               "Message"
             ],
             "type": "str"
           }
         },
-        "id": "reactflow__edge-OpenAIModel-nJXWj{œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-nJXWjœ,œnameœ:œtext_outputœ,œoutput_typesœ:[œMessageœ]}-ChatOutput-XP4bj{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-XP4bjœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
-        "source": "OpenAIModel-nJXWj",
-        "sourceHandle": "{œdataTypeœ: œOpenAIModelœ, œidœ: œOpenAIModel-nJXWjœ, œnameœ: œtext_outputœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "ChatOutput-XP4bj",
-        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œChatOutput-XP4bjœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
+        "id": "reactflow__edge-OpenAIModel-26Eve{œdataTypeœ:œOpenAIModelComponentœ,œidœ:œOpenAIModel-26Eveœ,œnameœ:œtext_outputœ,œoutput_typesœ:[œMessageœ]}-ChatOutput-cQnVI{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-cQnVIœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
+        "source": "OpenAIModel-26Eve",
+        "sourceHandle": "{œdataTypeœ: œOpenAIModelComponentœ, œidœ: œOpenAIModel-26Eveœ, œnameœ: œtext_outputœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "ChatOutput-cQnVI",
+        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œChatOutput-cQnVIœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
       }
     ],
     "nodes": [
       {
         "data": {
-          "id": "ChatInput-pxptT",
+          "id": "ChatInput-Y6mi1",
           "node": {
             "base_classes": [
               "Message"
@@ -264,7 +266,7 @@
         },
         "dragging": false,
         "height": 308,
-        "id": "ChatInput-pxptT",
+        "id": "ChatInput-Y6mi1",
         "position": {
           "x": -493.6459512396177,
           "y": 1083.200545525551
@@ -281,7 +283,7 @@
         "data": {
           "description": "Create a prompt template with dynamic variables.",
           "display_name": "Prompt",
-          "id": "Prompt-1S5SU",
+          "id": "Prompt-Z4WYI",
           "node": {
             "base_classes": [
               "Message"
@@ -389,7 +391,7 @@
         },
         "dragging": false,
         "height": 422,
-        "id": "Prompt-1S5SU",
+        "id": "Prompt-Z4WYI",
         "position": {
           "x": 56.354011530798516,
           "y": 1157.2005405164796
@@ -404,7 +406,10 @@
       },
       {
         "data": {
-          "id": "OpenAIModel-nJXWj",
+          "description": "Generates text using OpenAI LLMs.",
+          "display_name": "OpenAI",
+          "edited": false,
+          "id": "OpenAIModel-26Eve",
           "node": {
             "base_classes": [
               "LanguageModel",
@@ -416,11 +421,12 @@
             "description": "Generates text using OpenAI LLMs.",
             "display_name": "OpenAI",
             "documentation": "",
-            "edited": false,
+            "edited": true,
             "field_order": [
               "input_value",
               "max_tokens",
               "model_kwargs",
+              "json_mode",
               "output_schema",
               "model_name",
               "openai_api_base",
@@ -477,7 +483,7 @@
                 "show": true,
                 "title_case": false,
                 "type": "code",
-                "value": "import operator\nfrom functools import reduce\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import LanguageModel\nfrom langflow.inputs import (\n    BoolInput,\n    DictInput,\n    DropdownInput,\n    FloatInput,\n    IntInput,\n    MessageInput,\n    SecretStrInput,\n    StrInput,\n)\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    inputs = [\n        MessageInput(name=\"input_value\", display_name=\"Input\"),\n        IntInput(\n            name=\"max_tokens\",\n            display_name=\"Max Tokens\",\n            advanced=True,\n            info=\"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n        ),\n        DictInput(name=\"model_kwargs\", display_name=\"Model Kwargs\", advanced=True),\n        DictInput(\n            name=\"output_schema\",\n            is_list=True,\n            display_name=\"Schema\",\n            advanced=True,\n            info=\"The schema for the Output of the model. You must pass the word JSON in the prompt. If left blank, JSON mode will be disabled.\",\n        ),\n        DropdownInput(\n            name=\"model_name\", display_name=\"Model Name\", advanced=False, options=MODEL_NAMES, value=MODEL_NAMES[0]\n        ),\n        StrInput(\n            name=\"openai_api_base\",\n            display_name=\"OpenAI API Base\",\n            advanced=True,\n            info=\"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1. You can change this to use other APIs like JinaChat, LocalAI and Prem.\",\n        ),\n        SecretStrInput(\n            name=\"openai_api_key\",\n            display_name=\"OpenAI API Key\",\n            info=\"The OpenAI API Key to use for the OpenAI model.\",\n            advanced=False,\n            value=\"OPENAI_API_KEY\",\n        ),\n        FloatInput(name=\"temperature\", display_name=\"Temperature\", value=0.1),\n        BoolInput(name=\"stream\", display_name=\"Stream\", info=STREAM_INFO_TEXT, advanced=True),\n        StrInput(\n            name=\"system_message\",\n            display_name=\"System Message\",\n            info=\"System message to pass to the model.\",\n            advanced=True,\n        ),\n        IntInput(\n            name=\"seed\",\n            display_name=\"Seed\",\n            info=\"The seed controls the reproducibility of the job.\",\n            advanced=True,\n            value=1,\n        ),\n    ]\n\n    def build_model(self) -> LanguageModel:\n        # self.output_schea is a list of dictionaries\n        # let's convert it to a dictionary\n        output_schema_dict: dict[str, str] = reduce(operator.ior, self.output_schema or {}, {})\n        openai_api_key = self.openai_api_key\n        temperature = self.temperature\n        model_name: str = self.model_name\n        max_tokens = self.max_tokens\n        model_kwargs = self.model_kwargs or {}\n        openai_api_base = self.openai_api_base or \"https://api.openai.com/v1\"\n        json_mode = bool(output_schema_dict)\n        seed = self.seed\n        model_kwargs[\"seed\"] = seed\n\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature or 0.1,\n        )\n        if json_mode:\n            output = output.with_structured_output(schema=output_schema_dict, method=\"json_mode\")  # type: ignore\n\n        return output\n\n    def _get_exception_message(self, e: Exception):\n        \"\"\"\n        Get a message from an OpenAI exception.\n\n        Args:\n            exception (Exception): The exception to get the message from.\n\n        Returns:\n            str: The message from the exception.\n        \"\"\"\n\n        try:\n            from openai import BadRequestError\n        except ImportError:\n            return\n        if isinstance(e, BadRequestError):\n            message = e.body.get(\"message\")  # type: ignore\n            if message:\n                return message\n        return\n"
+                "value": "import operator\nfrom functools import reduce\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import LanguageModel\nfrom langflow.inputs import (\n    BoolInput,\n    DictInput,\n    DropdownInput,\n    FloatInput,\n    IntInput,\n    MessageInput,\n    SecretStrInput,\n    StrInput,\n)\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    inputs = [\n        MessageInput(name=\"input_value\", display_name=\"Input\"),\n        IntInput(\n            name=\"max_tokens\",\n            display_name=\"Max Tokens\",\n            advanced=True,\n            info=\"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n        ),\n        DictInput(name=\"model_kwargs\", display_name=\"Model Kwargs\", advanced=True),\n        BoolInput(\n            name=\"json_mode\",\n            display_name=\"JSON Mode\",\n            advanced=True,\n            info=\"If True, it will output JSON regardless of passing a schema.\",\n        ),\n        DictInput(\n            name=\"output_schema\",\n            is_list=True,\n            display_name=\"Schema\",\n            advanced=True,\n            info=\"The schema for the Output of the model. You must pass the word JSON in the prompt. If left blank, JSON mode will be disabled.\",\n        ),\n        DropdownInput(\n            name=\"model_name\", display_name=\"Model Name\", advanced=False, options=MODEL_NAMES, value=MODEL_NAMES[0]\n        ),\n        StrInput(\n            name=\"openai_api_base\",\n            display_name=\"OpenAI API Base\",\n            advanced=True,\n            info=\"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1. You can change this to use other APIs like JinaChat, LocalAI and Prem.\",\n        ),\n        SecretStrInput(\n            name=\"openai_api_key\",\n            display_name=\"OpenAI API Key\",\n            info=\"The OpenAI API Key to use for the OpenAI model.\",\n            advanced=False,\n            value=\"OPENAI_API_KEY\",\n        ),\n        FloatInput(name=\"temperature\", display_name=\"Temperature\", value=0.1),\n        BoolInput(name=\"stream\", display_name=\"Stream\", info=STREAM_INFO_TEXT, advanced=True),\n        StrInput(\n            name=\"system_message\",\n            display_name=\"System Message\",\n            info=\"System message to pass to the model.\",\n            advanced=True,\n        ),\n        IntInput(\n            name=\"seed\",\n            display_name=\"Seed\",\n            info=\"The seed controls the reproducibility of the job.\",\n            advanced=True,\n            value=1,\n        ),\n    ]\n\n    def build_model(self) -> LanguageModel:\n        # self.output_schea is a list of dictionaries\n        # let's convert it to a dictionary\n        output_schema_dict: dict[str, str] = reduce(operator.ior, self.output_schema or {}, {})\n        openai_api_key = self.openai_api_key\n        temperature = self.temperature\n        model_name: str = self.model_name\n        max_tokens = self.max_tokens\n        model_kwargs = self.model_kwargs or {}\n        openai_api_base = self.openai_api_base or \"https://api.openai.com/v1\"\n        json_mode = bool(output_schema_dict) or self.json_mode\n        seed = self.seed\n        model_kwargs[\"seed\"] = seed\n\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature or 0.1,\n        )\n        if json_mode:\n            if output_schema_dict:\n                output = output.with_structured_output(schema=output_schema_dict, method=\"json_mode\")  # type: ignore\n            else:\n                output = output.bind(response_format={\"type\": \"json_object\"})  # type: ignore\n\n        return output\n\n    def _get_exception_message(self, e: Exception):\n        \"\"\"\n        Get a message from an OpenAI exception.\n\n        Args:\n            exception (Exception): The exception to get the message from.\n\n        Returns:\n            str: The message from the exception.\n        \"\"\"\n\n        try:\n            from openai import BadRequestError\n        except ImportError:\n            return\n        if isinstance(e, BadRequestError):\n            message = e.body.get(\"message\")  # type: ignore\n            if message:\n                return message\n        return\n"
               },
               "input_value": {
                 "advanced": false,
@@ -499,6 +505,21 @@
                 "type": "str",
                 "value": ""
               },
+              "json_mode": {
+                "advanced": true,
+                "display_name": "JSON Mode",
+                "dynamic": false,
+                "info": "If True, it will output JSON regardless of passing a schema.",
+                "list": false,
+                "name": "json_mode",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_metadata": true,
+                "type": "bool",
+                "value": false
+              },
               "max_tokens": {
                 "advanced": true,
                 "display_name": "Max Tokens",
@@ -572,7 +593,7 @@
                 "dynamic": false,
                 "info": "The OpenAI API Key to use for the OpenAI model.",
                 "input_types": [],
-                "load_from_db": false,
+                "load_from_db": true,
                 "name": "openai_api_key",
                 "password": true,
                 "placeholder": "",
@@ -580,7 +601,7 @@
                 "show": true,
                 "title_case": false,
                 "type": "str",
-                "value": ""
+                "value": "OPENAI_API_KEY"
               },
               "output_schema": {
                 "advanced": true,
@@ -660,11 +681,11 @@
               }
             }
           },
-          "type": "OpenAIModel"
+          "type": "OpenAIModelComponent"
         },
         "dragging": false,
         "height": 621,
-        "id": "OpenAIModel-nJXWj",
+        "id": "OpenAIModel-26Eve",
         "position": {
           "x": 624.3539730827923,
           "y": 1053.2005475562555
@@ -679,7 +700,7 @@
       },
       {
         "data": {
-          "id": "ChatOutput-XP4bj",
+          "id": "ChatOutput-cQnVI",
           "node": {
             "base_classes": [
               "Message"
@@ -839,7 +860,7 @@
         },
         "dragging": false,
         "height": 308,
-        "id": "ChatOutput-XP4bj",
+        "id": "ChatOutput-cQnVI",
         "position": {
           "x": 1219.477374823274,
           "y": 1200.950216973985
@@ -854,15 +875,15 @@
       }
     ],
     "viewport": {
-      "x": 392.1085223509972,
-      "y": -327.49805229761307,
-      "zoom": 0.5000000676901589
+      "x": 366.93776265249005,
+      "y": -343.56726676261223,
+      "zoom": 0.5000000676901587
     }
   },
   "description": "This flow will get you experimenting with the basics of the UI, the Chat and the Prompt component. \n\nTry changing the Template in it to see how the model behaves. \nYou can change it to this and a Text Input into the `type_of_person` variable : \"Answer the user as if you were a pirate.\n\nUser: {user_input}\n\nAnswer: \" ",
   "endpoint_name": null,
-  "id": "f652abdc-7ef2-4e52-a00b-847b7aa32cee",
+  "id": "e533253b-818b-4b5a-9793-55ab83fffb07",
   "is_component": false,
-  "last_tested_version": "1.0.0rc1",
+  "last_tested_version": "1.0.5",
   "name": "Basic Prompting (Hello, World)"
 }
\ No newline at end of file
diff --git a/src/backend/base/langflow/initial_setup/starter_projects/Blog Writer.json b/src/backend/base/langflow/initial_setup/starter_projects/Blog Writer.json
index ec4a19aac..7828ac585 100644
--- a/src/backend/base/langflow/initial_setup/starter_projects/Blog Writer.json	
+++ b/src/backend/base/langflow/initial_setup/starter_projects/Blog Writer.json	
@@ -2,10 +2,11 @@
   "data": {
     "edges": [
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "URL",
-            "id": "URL-k9NkE",
+            "id": "URL-rETJU",
             "name": "data",
             "output_types": [
               "Data"
@@ -13,24 +14,25 @@
           },
           "targetHandle": {
             "fieldName": "data",
-            "id": "ParseData-EwWXd",
+            "id": "ParseData-AqSfN",
             "inputTypes": [
               "Data"
             ],
             "type": "other"
           }
         },
-        "id": "reactflow__edge-URL-k9NkE{œdataTypeœ:œURLœ,œidœ:œURL-k9NkEœ,œnameœ:œdataœ,œoutput_typesœ:[œDataœ]}-ParseData-EwWXd{œfieldNameœ:œdataœ,œidœ:œParseData-EwWXdœ,œinputTypesœ:[œDataœ],œtypeœ:œotherœ}",
-        "source": "URL-k9NkE",
-        "sourceHandle": "{œdataTypeœ: œURLœ, œidœ: œURL-k9NkEœ, œnameœ: œdataœ, œoutput_typesœ: [œDataœ]}",
-        "target": "ParseData-EwWXd",
-        "targetHandle": "{œfieldNameœ: œdataœ, œidœ: œParseData-EwWXdœ, œinputTypesœ: [œDataœ], œtypeœ: œotherœ}"
+        "id": "reactflow__edge-URL-rETJU{œdataTypeœ:œURLœ,œidœ:œURL-rETJUœ,œnameœ:œdataœ,œoutput_typesœ:[œDataœ]}-ParseData-AqSfN{œfieldNameœ:œdataœ,œidœ:œParseData-AqSfNœ,œinputTypesœ:[œDataœ],œtypeœ:œotherœ}",
+        "source": "URL-rETJU",
+        "sourceHandle": "{œdataTypeœ: œURLœ, œidœ: œURL-rETJUœ, œnameœ: œdataœ, œoutput_typesœ: [œDataœ]}",
+        "target": "ParseData-AqSfN",
+        "targetHandle": "{œfieldNameœ: œdataœ, œidœ: œParseData-AqSfNœ, œinputTypesœ: [œDataœ], œtypeœ: œotherœ}"
       },
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "ParseData",
-            "id": "ParseData-EwWXd",
+            "id": "ParseData-AqSfN",
             "name": "text",
             "output_types": [
               "Message"
@@ -38,7 +40,7 @@
           },
           "targetHandle": {
             "fieldName": "references",
-            "id": "Prompt-B9Mq6",
+            "id": "Prompt-rizUK",
             "inputTypes": [
               "Message",
               "Text"
@@ -46,17 +48,18 @@
             "type": "str"
           }
         },
-        "id": "reactflow__edge-ParseData-EwWXd{œdataTypeœ:œParseDataœ,œidœ:œParseData-EwWXdœ,œnameœ:œtextœ,œoutput_typesœ:[œMessageœ]}-Prompt-B9Mq6{œfieldNameœ:œreferencesœ,œidœ:œPrompt-B9Mq6œ,œinputTypesœ:[œMessageœ,œTextœ],œtypeœ:œstrœ}",
-        "source": "ParseData-EwWXd",
-        "sourceHandle": "{œdataTypeœ: œParseDataœ, œidœ: œParseData-EwWXdœ, œnameœ: œtextœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "Prompt-B9Mq6",
-        "targetHandle": "{œfieldNameœ: œreferencesœ, œidœ: œPrompt-B9Mq6œ, œinputTypesœ: [œMessageœ, œTextœ], œtypeœ: œstrœ}"
+        "id": "reactflow__edge-ParseData-AqSfN{œdataTypeœ:œParseDataœ,œidœ:œParseData-AqSfNœ,œnameœ:œtextœ,œoutput_typesœ:[œMessageœ]}-Prompt-rizUK{œfieldNameœ:œreferencesœ,œidœ:œPrompt-rizUKœ,œinputTypesœ:[œMessageœ,œTextœ],œtypeœ:œstrœ}",
+        "source": "ParseData-AqSfN",
+        "sourceHandle": "{œdataTypeœ: œParseDataœ, œidœ: œParseData-AqSfNœ, œnameœ: œtextœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "Prompt-rizUK",
+        "targetHandle": "{œfieldNameœ: œreferencesœ, œidœ: œPrompt-rizUKœ, œinputTypesœ: [œMessageœ, œTextœ], œtypeœ: œstrœ}"
       },
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "TextInput",
-            "id": "TextInput-uf6ij",
+            "id": "TextInput-OffFR",
             "name": "text",
             "output_types": [
               "Message"
@@ -64,7 +67,7 @@
           },
           "targetHandle": {
             "fieldName": "instructions",
-            "id": "Prompt-B9Mq6",
+            "id": "Prompt-rizUK",
             "inputTypes": [
               "Message",
               "Text"
@@ -72,17 +75,18 @@
             "type": "str"
           }
         },
-        "id": "reactflow__edge-TextInput-uf6ij{œdataTypeœ:œTextInputœ,œidœ:œTextInput-uf6ijœ,œnameœ:œtextœ,œoutput_typesœ:[œMessageœ]}-Prompt-B9Mq6{œfieldNameœ:œinstructionsœ,œidœ:œPrompt-B9Mq6œ,œinputTypesœ:[œMessageœ,œTextœ],œtypeœ:œstrœ}",
-        "source": "TextInput-uf6ij",
-        "sourceHandle": "{œdataTypeœ: œTextInputœ, œidœ: œTextInput-uf6ijœ, œnameœ: œtextœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "Prompt-B9Mq6",
-        "targetHandle": "{œfieldNameœ: œinstructionsœ, œidœ: œPrompt-B9Mq6œ, œinputTypesœ: [œMessageœ, œTextœ], œtypeœ: œstrœ}"
+        "id": "reactflow__edge-TextInput-OffFR{œdataTypeœ:œTextInputœ,œidœ:œTextInput-OffFRœ,œnameœ:œtextœ,œoutput_typesœ:[œMessageœ]}-Prompt-rizUK{œfieldNameœ:œinstructionsœ,œidœ:œPrompt-rizUKœ,œinputTypesœ:[œMessageœ,œTextœ],œtypeœ:œstrœ}",
+        "source": "TextInput-OffFR",
+        "sourceHandle": "{œdataTypeœ: œTextInputœ, œidœ: œTextInput-OffFRœ, œnameœ: œtextœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "Prompt-rizUK",
+        "targetHandle": "{œfieldNameœ: œinstructionsœ, œidœ: œPrompt-rizUKœ, œinputTypesœ: [œMessageœ, œTextœ], œtypeœ: œstrœ}"
       },
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "Prompt",
-            "id": "Prompt-B9Mq6",
+            "id": "Prompt-rizUK",
             "name": "prompt",
             "output_types": [
               "Message"
@@ -90,24 +94,24 @@
           },
           "targetHandle": {
             "fieldName": "input_value",
-            "id": "OpenAIModel-X9ukk",
+            "id": "OpenAIModel-qmhKV",
             "inputTypes": [
               "Message"
             ],
             "type": "str"
           }
         },
-        "id": "reactflow__edge-Prompt-B9Mq6{œdataTypeœ:œPromptœ,œidœ:œPrompt-B9Mq6œ,œnameœ:œpromptœ,œoutput_typesœ:[œMessageœ]}-OpenAIModel-X9ukk{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-X9ukkœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
-        "source": "Prompt-B9Mq6",
-        "sourceHandle": "{œdataTypeœ: œPromptœ, œidœ: œPrompt-B9Mq6œ, œnameœ: œpromptœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "OpenAIModel-X9ukk",
-        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œOpenAIModel-X9ukkœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
+        "id": "reactflow__edge-Prompt-rizUK{œdataTypeœ:œPromptœ,œidœ:œPrompt-rizUKœ,œnameœ:œpromptœ,œoutput_typesœ:[œMessageœ]}-OpenAIModel-qmhKV{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-qmhKVœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
+        "source": "Prompt-rizUK",
+        "sourceHandle": "{œdataTypeœ: œPromptœ, œidœ: œPrompt-rizUKœ, œnameœ: œpromptœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "OpenAIModel-qmhKV",
+        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œOpenAIModel-qmhKVœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
       },
       {
         "data": {
           "sourceHandle": {
-            "dataType": "OpenAIModel",
-            "id": "OpenAIModel-X9ukk",
+            "dataType": "OpenAIModelComponent",
+            "id": "OpenAIModel-qmhKV",
             "name": "text_output",
             "output_types": [
               "Message"
@@ -115,24 +119,24 @@
           },
           "targetHandle": {
             "fieldName": "input_value",
-            "id": "ChatOutput-5r5Iw",
+            "id": "ChatOutput-W684s",
             "inputTypes": [
               "Message"
             ],
             "type": "str"
           }
         },
-        "id": "reactflow__edge-OpenAIModel-X9ukk{œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-X9ukkœ,œnameœ:œtext_outputœ,œoutput_typesœ:[œMessageœ]}-ChatOutput-5r5Iw{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-5r5Iwœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
-        "source": "OpenAIModel-X9ukk",
-        "sourceHandle": "{œdataTypeœ: œOpenAIModelœ, œidœ: œOpenAIModel-X9ukkœ, œnameœ: œtext_outputœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "ChatOutput-5r5Iw",
-        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œChatOutput-5r5Iwœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
+        "id": "reactflow__edge-OpenAIModel-qmhKV{œdataTypeœ:œOpenAIModelComponentœ,œidœ:œOpenAIModel-qmhKVœ,œnameœ:œtext_outputœ,œoutput_typesœ:[œMessageœ]}-ChatOutput-W684s{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-W684sœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
+        "source": "OpenAIModel-qmhKV",
+        "sourceHandle": "{œdataTypeœ: œOpenAIModelComponentœ, œidœ: œOpenAIModel-qmhKVœ, œnameœ: œtext_outputœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "ChatOutput-W684s",
+        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œChatOutput-W684sœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
       }
     ],
     "nodes": [
       {
         "data": {
-          "id": "URL-k9NkE",
+          "id": "URL-rETJU",
           "node": {
             "base_classes": [
               "Data"
@@ -214,7 +218,7 @@
         },
         "dragging": false,
         "height": 358,
-        "id": "URL-k9NkE",
+        "id": "URL-rETJU",
         "position": {
           "x": 220.79156431407534,
           "y": 498.8186168722667
@@ -229,7 +233,7 @@
       },
       {
         "data": {
-          "id": "ParseData-EwWXd",
+          "id": "ParseData-AqSfN",
           "node": {
             "base_classes": [
               "Message"
@@ -346,7 +350,7 @@
         },
         "dragging": false,
         "height": 384,
-        "id": "ParseData-EwWXd",
+        "id": "ParseData-AqSfN",
         "position": {
           "x": 754.3607306709101,
           "y": 736.8516961537598
@@ -363,7 +367,7 @@
         "data": {
           "description": "Create a prompt template with dynamic variables.",
           "display_name": "Prompt",
-          "id": "Prompt-B9Mq6",
+          "id": "Prompt-rizUK",
           "node": {
             "base_classes": [
               "Message"
@@ -496,7 +500,7 @@
         },
         "dragging": false,
         "height": 515,
-        "id": "Prompt-B9Mq6",
+        "id": "Prompt-rizUK",
         "position": {
           "x": 1368.0633591447076,
           "y": 467.19448061224284
@@ -511,7 +515,7 @@
       },
       {
         "data": {
-          "id": "TextInput-uf6ij",
+          "id": "TextInput-OffFR",
           "node": {
             "base_classes": [
               "Message"
@@ -590,7 +594,7 @@
         },
         "dragging": false,
         "height": 308,
-        "id": "TextInput-uf6ij",
+        "id": "TextInput-OffFR",
         "position": {
           "x": 743.7338453293725,
           "y": 301.58775454952183
@@ -605,7 +609,10 @@
       },
       {
         "data": {
-          "id": "OpenAIModel-X9ukk",
+          "description": "Generates text using OpenAI LLMs.",
+          "display_name": "OpenAI",
+          "edited": false,
+          "id": "OpenAIModel-qmhKV",
           "node": {
             "base_classes": [
               "LanguageModel",
@@ -617,11 +624,12 @@
             "description": "Generates text using OpenAI LLMs.",
             "display_name": "OpenAI",
             "documentation": "",
-            "edited": false,
+            "edited": true,
             "field_order": [
               "input_value",
               "max_tokens",
               "model_kwargs",
+              "json_mode",
               "output_schema",
               "model_name",
               "openai_api_base",
@@ -678,7 +686,7 @@
                 "show": true,
                 "title_case": false,
                 "type": "code",
-                "value": "import operator\nfrom functools import reduce\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import LanguageModel\nfrom langflow.inputs import (\n    BoolInput,\n    DictInput,\n    DropdownInput,\n    FloatInput,\n    IntInput,\n    MessageInput,\n    SecretStrInput,\n    StrInput,\n)\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    inputs = [\n        MessageInput(name=\"input_value\", display_name=\"Input\"),\n        IntInput(\n            name=\"max_tokens\",\n            display_name=\"Max Tokens\",\n            advanced=True,\n            info=\"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n        ),\n        DictInput(name=\"model_kwargs\", display_name=\"Model Kwargs\", advanced=True),\n        DictInput(\n            name=\"output_schema\",\n            is_list=True,\n            display_name=\"Schema\",\n            advanced=True,\n            info=\"The schema for the Output of the model. You must pass the word JSON in the prompt. If left blank, JSON mode will be disabled.\",\n        ),\n        DropdownInput(\n            name=\"model_name\", display_name=\"Model Name\", advanced=False, options=MODEL_NAMES, value=MODEL_NAMES[0]\n        ),\n        StrInput(\n            name=\"openai_api_base\",\n            display_name=\"OpenAI API Base\",\n            advanced=True,\n            info=\"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1. You can change this to use other APIs like JinaChat, LocalAI and Prem.\",\n        ),\n        SecretStrInput(\n            name=\"openai_api_key\",\n            display_name=\"OpenAI API Key\",\n            info=\"The OpenAI API Key to use for the OpenAI model.\",\n            advanced=False,\n            value=\"OPENAI_API_KEY\",\n        ),\n        FloatInput(name=\"temperature\", display_name=\"Temperature\", value=0.1),\n        BoolInput(name=\"stream\", display_name=\"Stream\", info=STREAM_INFO_TEXT, advanced=True),\n        StrInput(\n            name=\"system_message\",\n            display_name=\"System Message\",\n            info=\"System message to pass to the model.\",\n            advanced=True,\n        ),\n        IntInput(\n            name=\"seed\",\n            display_name=\"Seed\",\n            info=\"The seed controls the reproducibility of the job.\",\n            advanced=True,\n            value=1,\n        ),\n    ]\n\n    def build_model(self) -> LanguageModel:\n        # self.output_schea is a list of dictionaries\n        # let's convert it to a dictionary\n        output_schema_dict: dict[str, str] = reduce(operator.ior, self.output_schema or {}, {})\n        openai_api_key = self.openai_api_key\n        temperature = self.temperature\n        model_name: str = self.model_name\n        max_tokens = self.max_tokens\n        model_kwargs = self.model_kwargs or {}\n        openai_api_base = self.openai_api_base or \"https://api.openai.com/v1\"\n        json_mode = bool(output_schema_dict)\n        seed = self.seed\n        model_kwargs[\"seed\"] = seed\n\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature or 0.1,\n        )\n        if json_mode:\n            output = output.with_structured_output(schema=output_schema_dict, method=\"json_mode\")  # type: ignore\n\n        return output\n\n    def _get_exception_message(self, e: Exception):\n        \"\"\"\n        Get a message from an OpenAI exception.\n\n        Args:\n            exception (Exception): The exception to get the message from.\n\n        Returns:\n            str: The message from the exception.\n        \"\"\"\n\n        try:\n            from openai import BadRequestError\n        except ImportError:\n            return\n        if isinstance(e, BadRequestError):\n            message = e.body.get(\"message\")  # type: ignore\n            if message:\n                return message\n        return\n"
+                "value": "import operator\nfrom functools import reduce\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import LanguageModel\nfrom langflow.inputs import (\n    BoolInput,\n    DictInput,\n    DropdownInput,\n    FloatInput,\n    IntInput,\n    MessageInput,\n    SecretStrInput,\n    StrInput,\n)\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    inputs = [\n        MessageInput(name=\"input_value\", display_name=\"Input\"),\n        IntInput(\n            name=\"max_tokens\",\n            display_name=\"Max Tokens\",\n            advanced=True,\n            info=\"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n        ),\n        DictInput(name=\"model_kwargs\", display_name=\"Model Kwargs\", advanced=True),\n        BoolInput(\n            name=\"json_mode\",\n            display_name=\"JSON Mode\",\n            advanced=True,\n            info=\"If True, it will output JSON regardless of passing a schema.\",\n        ),\n        DictInput(\n            name=\"output_schema\",\n            is_list=True,\n            display_name=\"Schema\",\n            advanced=True,\n            info=\"The schema for the Output of the model. You must pass the word JSON in the prompt. If left blank, JSON mode will be disabled.\",\n        ),\n        DropdownInput(\n            name=\"model_name\", display_name=\"Model Name\", advanced=False, options=MODEL_NAMES, value=MODEL_NAMES[0]\n        ),\n        StrInput(\n            name=\"openai_api_base\",\n            display_name=\"OpenAI API Base\",\n            advanced=True,\n            info=\"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1. You can change this to use other APIs like JinaChat, LocalAI and Prem.\",\n        ),\n        SecretStrInput(\n            name=\"openai_api_key\",\n            display_name=\"OpenAI API Key\",\n            info=\"The OpenAI API Key to use for the OpenAI model.\",\n            advanced=False,\n            value=\"OPENAI_API_KEY\",\n        ),\n        FloatInput(name=\"temperature\", display_name=\"Temperature\", value=0.1),\n        BoolInput(name=\"stream\", display_name=\"Stream\", info=STREAM_INFO_TEXT, advanced=True),\n        StrInput(\n            name=\"system_message\",\n            display_name=\"System Message\",\n            info=\"System message to pass to the model.\",\n            advanced=True,\n        ),\n        IntInput(\n            name=\"seed\",\n            display_name=\"Seed\",\n            info=\"The seed controls the reproducibility of the job.\",\n            advanced=True,\n            value=1,\n        ),\n    ]\n\n    def build_model(self) -> LanguageModel:\n        # self.output_schea is a list of dictionaries\n        # let's convert it to a dictionary\n        output_schema_dict: dict[str, str] = reduce(operator.ior, self.output_schema or {}, {})\n        openai_api_key = self.openai_api_key\n        temperature = self.temperature\n        model_name: str = self.model_name\n        max_tokens = self.max_tokens\n        model_kwargs = self.model_kwargs or {}\n        openai_api_base = self.openai_api_base or \"https://api.openai.com/v1\"\n        json_mode = bool(output_schema_dict) or self.json_mode\n        seed = self.seed\n        model_kwargs[\"seed\"] = seed\n\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature or 0.1,\n        )\n        if json_mode:\n            if output_schema_dict:\n                output = output.with_structured_output(schema=output_schema_dict, method=\"json_mode\")  # type: ignore\n            else:\n                output = output.bind(response_format={\"type\": \"json_object\"})  # type: ignore\n\n        return output\n\n    def _get_exception_message(self, e: Exception):\n        \"\"\"\n        Get a message from an OpenAI exception.\n\n        Args:\n            exception (Exception): The exception to get the message from.\n\n        Returns:\n            str: The message from the exception.\n        \"\"\"\n\n        try:\n            from openai import BadRequestError\n        except ImportError:\n            return\n        if isinstance(e, BadRequestError):\n            message = e.body.get(\"message\")  # type: ignore\n            if message:\n                return message\n        return\n"
               },
               "input_value": {
                 "advanced": false,
@@ -700,6 +708,21 @@
                 "type": "str",
                 "value": ""
               },
+              "json_mode": {
+                "advanced": true,
+                "display_name": "JSON Mode",
+                "dynamic": false,
+                "info": "If True, it will output JSON regardless of passing a schema.",
+                "list": false,
+                "name": "json_mode",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_metadata": true,
+                "type": "bool",
+                "value": false
+              },
               "max_tokens": {
                 "advanced": true,
                 "display_name": "Max Tokens",
@@ -773,7 +796,7 @@
                 "dynamic": false,
                 "info": "The OpenAI API Key to use for the OpenAI model.",
                 "input_types": [],
-                "load_from_db": false,
+                "load_from_db": true,
                 "name": "openai_api_key",
                 "password": true,
                 "placeholder": "",
@@ -781,7 +804,7 @@
                 "show": true,
                 "title_case": false,
                 "type": "str",
-                "value": ""
+                "value": "OPENAI_API_KEY"
               },
               "output_schema": {
                 "advanced": true,
@@ -861,11 +884,11 @@
               }
             }
           },
-          "type": "OpenAIModel"
+          "type": "OpenAIModelComponent"
         },
         "dragging": false,
         "height": 621,
-        "id": "OpenAIModel-X9ukk",
+        "id": "OpenAIModel-qmhKV",
         "position": {
           "x": 1899.407626221589,
           "y": 395.9013619556682
@@ -880,7 +903,7 @@
       },
       {
         "data": {
-          "id": "ChatOutput-5r5Iw",
+          "id": "ChatOutput-W684s",
           "node": {
             "base_classes": [
               "Message"
@@ -1040,7 +1063,7 @@
         },
         "dragging": false,
         "height": 308,
-        "id": "ChatOutput-5r5Iw",
+        "id": "ChatOutput-W684s",
         "position": {
           "x": 2449.3489426461606,
           "y": 571.2449700910389
@@ -1062,8 +1085,8 @@
   },
   "description": "This flow can be used to create a blog post following instructions from the user, using two other blogs as reference.",
   "endpoint_name": null,
-  "id": "13da3150-95b9-4d81-9ad2-f635dcdce7ab",
+  "id": "da9999f8-9013-4bd9-8adb-653c94ebf08c",
   "is_component": false,
-  "last_tested_version": "1.0.0rc1",
+  "last_tested_version": "1.0.5",
   "name": "Blog Writer"
 }
\ No newline at end of file
diff --git a/src/backend/base/langflow/initial_setup/starter_projects/Document QA.json b/src/backend/base/langflow/initial_setup/starter_projects/Document QA.json
index d66c6b22b..d0e7c53b0 100644
--- a/src/backend/base/langflow/initial_setup/starter_projects/Document QA.json	
+++ b/src/backend/base/langflow/initial_setup/starter_projects/Document QA.json	
@@ -2,10 +2,11 @@
   "data": {
     "edges": [
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "File",
-            "id": "File-h46aK",
+            "id": "File-Q3Xrb",
             "name": "data",
             "output_types": [
               "Data"
@@ -13,24 +14,25 @@
           },
           "targetHandle": {
             "fieldName": "data",
-            "id": "ParseData-sqVr1",
+            "id": "ParseData-1Y5jJ",
             "inputTypes": [
               "Data"
             ],
             "type": "other"
           }
         },
-        "id": "reactflow__edge-File-h46aK{œdataTypeœ:œFileœ,œidœ:œFile-h46aKœ,œnameœ:œdataœ,œoutput_typesœ:[œDataœ]}-ParseData-sqVr1{œfieldNameœ:œdataœ,œidœ:œParseData-sqVr1œ,œinputTypesœ:[œDataœ],œtypeœ:œotherœ}",
-        "source": "File-h46aK",
-        "sourceHandle": "{œdataTypeœ: œFileœ, œidœ: œFile-h46aKœ, œnameœ: œdataœ, œoutput_typesœ: [œDataœ]}",
-        "target": "ParseData-sqVr1",
-        "targetHandle": "{œfieldNameœ: œdataœ, œidœ: œParseData-sqVr1œ, œinputTypesœ: [œDataœ], œtypeœ: œotherœ}"
+        "id": "reactflow__edge-File-Q3Xrb{œdataTypeœ:œFileœ,œidœ:œFile-Q3Xrbœ,œnameœ:œdataœ,œoutput_typesœ:[œDataœ]}-ParseData-1Y5jJ{œfieldNameœ:œdataœ,œidœ:œParseData-1Y5jJœ,œinputTypesœ:[œDataœ],œtypeœ:œotherœ}",
+        "source": "File-Q3Xrb",
+        "sourceHandle": "{œdataTypeœ: œFileœ, œidœ: œFile-Q3Xrbœ, œnameœ: œdataœ, œoutput_typesœ: [œDataœ]}",
+        "target": "ParseData-1Y5jJ",
+        "targetHandle": "{œfieldNameœ: œdataœ, œidœ: œParseData-1Y5jJœ, œinputTypesœ: [œDataœ], œtypeœ: œotherœ}"
       },
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "ParseData",
-            "id": "ParseData-sqVr1",
+            "id": "ParseData-1Y5jJ",
             "name": "text",
             "output_types": [
               "Message"
@@ -38,7 +40,7 @@
           },
           "targetHandle": {
             "fieldName": "Document",
-            "id": "Prompt-mQ7w2",
+            "id": "Prompt-CMJEB",
             "inputTypes": [
               "Message",
               "Text"
@@ -46,17 +48,18 @@
             "type": "str"
           }
         },
-        "id": "reactflow__edge-ParseData-sqVr1{œdataTypeœ:œParseDataœ,œidœ:œParseData-sqVr1œ,œnameœ:œtextœ,œoutput_typesœ:[œMessageœ]}-Prompt-mQ7w2{œfieldNameœ:œDocumentœ,œidœ:œPrompt-mQ7w2œ,œinputTypesœ:[œMessageœ,œTextœ],œtypeœ:œstrœ}",
-        "source": "ParseData-sqVr1",
-        "sourceHandle": "{œdataTypeœ: œParseDataœ, œidœ: œParseData-sqVr1œ, œnameœ: œtextœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "Prompt-mQ7w2",
-        "targetHandle": "{œfieldNameœ: œDocumentœ, œidœ: œPrompt-mQ7w2œ, œinputTypesœ: [œMessageœ, œTextœ], œtypeœ: œstrœ}"
+        "id": "reactflow__edge-ParseData-1Y5jJ{œdataTypeœ:œParseDataœ,œidœ:œParseData-1Y5jJœ,œnameœ:œtextœ,œoutput_typesœ:[œMessageœ]}-Prompt-CMJEB{œfieldNameœ:œDocumentœ,œidœ:œPrompt-CMJEBœ,œinputTypesœ:[œMessageœ,œTextœ],œtypeœ:œstrœ}",
+        "source": "ParseData-1Y5jJ",
+        "sourceHandle": "{œdataTypeœ: œParseDataœ, œidœ: œParseData-1Y5jJœ, œnameœ: œtextœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "Prompt-CMJEB",
+        "targetHandle": "{œfieldNameœ: œDocumentœ, œidœ: œPrompt-CMJEBœ, œinputTypesœ: [œMessageœ, œTextœ], œtypeœ: œstrœ}"
       },
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "ChatInput",
-            "id": "ChatInput-cMXe0",
+            "id": "ChatInput-mc7sJ",
             "name": "message",
             "output_types": [
               "Message"
@@ -64,7 +67,7 @@
           },
           "targetHandle": {
             "fieldName": "Question",
-            "id": "Prompt-mQ7w2",
+            "id": "Prompt-CMJEB",
             "inputTypes": [
               "Message",
               "Text"
@@ -72,17 +75,18 @@
             "type": "str"
           }
         },
-        "id": "reactflow__edge-ChatInput-cMXe0{œdataTypeœ:œChatInputœ,œidœ:œChatInput-cMXe0œ,œnameœ:œmessageœ,œoutput_typesœ:[œMessageœ]}-Prompt-mQ7w2{œfieldNameœ:œQuestionœ,œidœ:œPrompt-mQ7w2œ,œinputTypesœ:[œMessageœ,œTextœ],œtypeœ:œstrœ}",
-        "source": "ChatInput-cMXe0",
-        "sourceHandle": "{œdataTypeœ: œChatInputœ, œidœ: œChatInput-cMXe0œ, œnameœ: œmessageœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "Prompt-mQ7w2",
-        "targetHandle": "{œfieldNameœ: œQuestionœ, œidœ: œPrompt-mQ7w2œ, œinputTypesœ: [œMessageœ, œTextœ], œtypeœ: œstrœ}"
+        "id": "reactflow__edge-ChatInput-mc7sJ{œdataTypeœ:œChatInputœ,œidœ:œChatInput-mc7sJœ,œnameœ:œmessageœ,œoutput_typesœ:[œMessageœ]}-Prompt-CMJEB{œfieldNameœ:œQuestionœ,œidœ:œPrompt-CMJEBœ,œinputTypesœ:[œMessageœ,œTextœ],œtypeœ:œstrœ}",
+        "source": "ChatInput-mc7sJ",
+        "sourceHandle": "{œdataTypeœ: œChatInputœ, œidœ: œChatInput-mc7sJœ, œnameœ: œmessageœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "Prompt-CMJEB",
+        "targetHandle": "{œfieldNameœ: œQuestionœ, œidœ: œPrompt-CMJEBœ, œinputTypesœ: [œMessageœ, œTextœ], œtypeœ: œstrœ}"
       },
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "Prompt",
-            "id": "Prompt-mQ7w2",
+            "id": "Prompt-CMJEB",
             "name": "prompt",
             "output_types": [
               "Message"
@@ -90,24 +94,24 @@
           },
           "targetHandle": {
             "fieldName": "input_value",
-            "id": "OpenAIModel-O0AGC",
+            "id": "OpenAIModel-U2g5u",
             "inputTypes": [
               "Message"
             ],
             "type": "str"
           }
         },
-        "id": "reactflow__edge-Prompt-mQ7w2{œdataTypeœ:œPromptœ,œidœ:œPrompt-mQ7w2œ,œnameœ:œpromptœ,œoutput_typesœ:[œMessageœ]}-OpenAIModel-O0AGC{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-O0AGCœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
-        "source": "Prompt-mQ7w2",
-        "sourceHandle": "{œdataTypeœ: œPromptœ, œidœ: œPrompt-mQ7w2œ, œnameœ: œpromptœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "OpenAIModel-O0AGC",
-        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œOpenAIModel-O0AGCœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
+        "id": "reactflow__edge-Prompt-CMJEB{œdataTypeœ:œPromptœ,œidœ:œPrompt-CMJEBœ,œnameœ:œpromptœ,œoutput_typesœ:[œMessageœ]}-OpenAIModel-U2g5u{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-U2g5uœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
+        "source": "Prompt-CMJEB",
+        "sourceHandle": "{œdataTypeœ: œPromptœ, œidœ: œPrompt-CMJEBœ, œnameœ: œpromptœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "OpenAIModel-U2g5u",
+        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œOpenAIModel-U2g5uœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
       },
       {
         "data": {
           "sourceHandle": {
-            "dataType": "OpenAIModel",
-            "id": "OpenAIModel-O0AGC",
+            "dataType": "OpenAIModelComponent",
+            "id": "OpenAIModel-U2g5u",
             "name": "text_output",
             "output_types": [
               "Message"
@@ -115,24 +119,24 @@
           },
           "targetHandle": {
             "fieldName": "input_value",
-            "id": "ChatOutput-efggd",
+            "id": "ChatOutput-yZjPO",
             "inputTypes": [
               "Message"
             ],
             "type": "str"
           }
         },
-        "id": "reactflow__edge-OpenAIModel-O0AGC{œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-O0AGCœ,œnameœ:œtext_outputœ,œoutput_typesœ:[œMessageœ]}-ChatOutput-efggd{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-efggdœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
-        "source": "OpenAIModel-O0AGC",
-        "sourceHandle": "{œdataTypeœ: œOpenAIModelœ, œidœ: œOpenAIModel-O0AGCœ, œnameœ: œtext_outputœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "ChatOutput-efggd",
-        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œChatOutput-efggdœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
+        "id": "reactflow__edge-OpenAIModel-U2g5u{œdataTypeœ:œOpenAIModelComponentœ,œidœ:œOpenAIModel-U2g5uœ,œnameœ:œtext_outputœ,œoutput_typesœ:[œMessageœ]}-ChatOutput-yZjPO{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-yZjPOœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
+        "source": "OpenAIModel-U2g5u",
+        "sourceHandle": "{œdataTypeœ: œOpenAIModelComponentœ, œidœ: œOpenAIModel-U2g5uœ, œnameœ: œtext_outputœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "ChatOutput-yZjPO",
+        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œChatOutput-yZjPOœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
       }
     ],
     "nodes": [
       {
         "data": {
-          "id": "File-h46aK",
+          "id": "File-Q3Xrb",
           "node": {
             "base_classes": [
               "Data"
@@ -243,7 +247,7 @@
         },
         "dragging": false,
         "height": 300,
-        "id": "File-h46aK",
+        "id": "File-Q3Xrb",
         "position": {
           "x": -449.0807503257012,
           "y": -253.5304920926106
@@ -258,7 +262,7 @@
       },
       {
         "data": {
-          "id": "ParseData-sqVr1",
+          "id": "ParseData-1Y5jJ",
           "node": {
             "base_classes": [
               "Message"
@@ -375,7 +379,7 @@
         },
         "dragging": false,
         "height": 384,
-        "id": "ParseData-sqVr1",
+        "id": "ParseData-1Y5jJ",
         "position": {
           "x": 73.79471204296345,
           "y": -186.9430114986888
@@ -392,7 +396,7 @@
         "data": {
           "description": "Create a prompt template with dynamic variables.",
           "display_name": "Prompt",
-          "id": "Prompt-mQ7w2",
+          "id": "Prompt-CMJEB",
           "node": {
             "base_classes": [
               "Message"
@@ -525,7 +529,7 @@
         },
         "dragging": false,
         "height": 515,
-        "id": "Prompt-mQ7w2",
+        "id": "Prompt-CMJEB",
         "position": {
           "x": 637.3518652087848,
           "y": 47.191730368560215
@@ -540,7 +544,7 @@
       },
       {
         "data": {
-          "id": "ChatInput-cMXe0",
+          "id": "ChatInput-mc7sJ",
           "node": {
             "base_classes": [
               "Message"
@@ -723,7 +727,7 @@
         },
         "dragging": false,
         "height": 308,
-        "id": "ChatInput-cMXe0",
+        "id": "ChatInput-mc7sJ",
         "position": {
           "x": 50.08709924122684,
           "y": 320.88186720121615
@@ -738,7 +742,10 @@
       },
       {
         "data": {
-          "id": "OpenAIModel-O0AGC",
+          "description": "Generates text using OpenAI LLMs.",
+          "display_name": "OpenAI",
+          "edited": false,
+          "id": "OpenAIModel-U2g5u",
           "node": {
             "base_classes": [
               "LanguageModel",
@@ -750,11 +757,12 @@
             "description": "Generates text using OpenAI LLMs.",
             "display_name": "OpenAI",
             "documentation": "",
-            "edited": false,
+            "edited": true,
             "field_order": [
               "input_value",
               "max_tokens",
               "model_kwargs",
+              "json_mode",
               "output_schema",
               "model_name",
               "openai_api_base",
@@ -811,7 +819,7 @@
                 "show": true,
                 "title_case": false,
                 "type": "code",
-                "value": "import operator\nfrom functools import reduce\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import LanguageModel\nfrom langflow.inputs import (\n    BoolInput,\n    DictInput,\n    DropdownInput,\n    FloatInput,\n    IntInput,\n    MessageInput,\n    SecretStrInput,\n    StrInput,\n)\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    inputs = [\n        MessageInput(name=\"input_value\", display_name=\"Input\"),\n        IntInput(\n            name=\"max_tokens\",\n            display_name=\"Max Tokens\",\n            advanced=True,\n            info=\"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n        ),\n        DictInput(name=\"model_kwargs\", display_name=\"Model Kwargs\", advanced=True),\n        DictInput(\n            name=\"output_schema\",\n            is_list=True,\n            display_name=\"Schema\",\n            advanced=True,\n            info=\"The schema for the Output of the model. You must pass the word JSON in the prompt. If left blank, JSON mode will be disabled.\",\n        ),\n        DropdownInput(\n            name=\"model_name\", display_name=\"Model Name\", advanced=False, options=MODEL_NAMES, value=MODEL_NAMES[0]\n        ),\n        StrInput(\n            name=\"openai_api_base\",\n            display_name=\"OpenAI API Base\",\n            advanced=True,\n            info=\"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1. You can change this to use other APIs like JinaChat, LocalAI and Prem.\",\n        ),\n        SecretStrInput(\n            name=\"openai_api_key\",\n            display_name=\"OpenAI API Key\",\n            info=\"The OpenAI API Key to use for the OpenAI model.\",\n            advanced=False,\n            value=\"OPENAI_API_KEY\",\n        ),\n        FloatInput(name=\"temperature\", display_name=\"Temperature\", value=0.1),\n        BoolInput(name=\"stream\", display_name=\"Stream\", info=STREAM_INFO_TEXT, advanced=True),\n        StrInput(\n            name=\"system_message\",\n            display_name=\"System Message\",\n            info=\"System message to pass to the model.\",\n            advanced=True,\n        ),\n        IntInput(\n            name=\"seed\",\n            display_name=\"Seed\",\n            info=\"The seed controls the reproducibility of the job.\",\n            advanced=True,\n            value=1,\n        ),\n    ]\n\n    def build_model(self) -> LanguageModel:\n        # self.output_schea is a list of dictionaries\n        # let's convert it to a dictionary\n        output_schema_dict: dict[str, str] = reduce(operator.ior, self.output_schema or {}, {})\n        openai_api_key = self.openai_api_key\n        temperature = self.temperature\n        model_name: str = self.model_name\n        max_tokens = self.max_tokens\n        model_kwargs = self.model_kwargs or {}\n        openai_api_base = self.openai_api_base or \"https://api.openai.com/v1\"\n        json_mode = bool(output_schema_dict)\n        seed = self.seed\n        model_kwargs[\"seed\"] = seed\n\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature or 0.1,\n        )\n        if json_mode:\n            output = output.with_structured_output(schema=output_schema_dict, method=\"json_mode\")  # type: ignore\n\n        return output\n\n    def _get_exception_message(self, e: Exception):\n        \"\"\"\n        Get a message from an OpenAI exception.\n\n        Args:\n            exception (Exception): The exception to get the message from.\n\n        Returns:\n            str: The message from the exception.\n        \"\"\"\n\n        try:\n            from openai import BadRequestError\n        except ImportError:\n            return\n        if isinstance(e, BadRequestError):\n            message = e.body.get(\"message\")  # type: ignore\n            if message:\n                return message\n        return\n"
+                "value": "import operator\nfrom functools import reduce\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import LanguageModel\nfrom langflow.inputs import (\n    BoolInput,\n    DictInput,\n    DropdownInput,\n    FloatInput,\n    IntInput,\n    MessageInput,\n    SecretStrInput,\n    StrInput,\n)\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    inputs = [\n        MessageInput(name=\"input_value\", display_name=\"Input\"),\n        IntInput(\n            name=\"max_tokens\",\n            display_name=\"Max Tokens\",\n            advanced=True,\n            info=\"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n        ),\n        DictInput(name=\"model_kwargs\", display_name=\"Model Kwargs\", advanced=True),\n        BoolInput(\n            name=\"json_mode\",\n            display_name=\"JSON Mode\",\n            advanced=True,\n            info=\"If True, it will output JSON regardless of passing a schema.\",\n        ),\n        DictInput(\n            name=\"output_schema\",\n            is_list=True,\n            display_name=\"Schema\",\n            advanced=True,\n            info=\"The schema for the Output of the model. You must pass the word JSON in the prompt. If left blank, JSON mode will be disabled.\",\n        ),\n        DropdownInput(\n            name=\"model_name\", display_name=\"Model Name\", advanced=False, options=MODEL_NAMES, value=MODEL_NAMES[0]\n        ),\n        StrInput(\n            name=\"openai_api_base\",\n            display_name=\"OpenAI API Base\",\n            advanced=True,\n            info=\"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1. You can change this to use other APIs like JinaChat, LocalAI and Prem.\",\n        ),\n        SecretStrInput(\n            name=\"openai_api_key\",\n            display_name=\"OpenAI API Key\",\n            info=\"The OpenAI API Key to use for the OpenAI model.\",\n            advanced=False,\n            value=\"OPENAI_API_KEY\",\n        ),\n        FloatInput(name=\"temperature\", display_name=\"Temperature\", value=0.1),\n        BoolInput(name=\"stream\", display_name=\"Stream\", info=STREAM_INFO_TEXT, advanced=True),\n        StrInput(\n            name=\"system_message\",\n            display_name=\"System Message\",\n            info=\"System message to pass to the model.\",\n            advanced=True,\n        ),\n        IntInput(\n            name=\"seed\",\n            display_name=\"Seed\",\n            info=\"The seed controls the reproducibility of the job.\",\n            advanced=True,\n            value=1,\n        ),\n    ]\n\n    def build_model(self) -> LanguageModel:\n        # self.output_schea is a list of dictionaries\n        # let's convert it to a dictionary\n        output_schema_dict: dict[str, str] = reduce(operator.ior, self.output_schema or {}, {})\n        openai_api_key = self.openai_api_key\n        temperature = self.temperature\n        model_name: str = self.model_name\n        max_tokens = self.max_tokens\n        model_kwargs = self.model_kwargs or {}\n        openai_api_base = self.openai_api_base or \"https://api.openai.com/v1\"\n        json_mode = bool(output_schema_dict) or self.json_mode\n        seed = self.seed\n        model_kwargs[\"seed\"] = seed\n\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature or 0.1,\n        )\n        if json_mode:\n            if output_schema_dict:\n                output = output.with_structured_output(schema=output_schema_dict, method=\"json_mode\")  # type: ignore\n            else:\n                output = output.bind(response_format={\"type\": \"json_object\"})  # type: ignore\n\n        return output\n\n    def _get_exception_message(self, e: Exception):\n        \"\"\"\n        Get a message from an OpenAI exception.\n\n        Args:\n            exception (Exception): The exception to get the message from.\n\n        Returns:\n            str: The message from the exception.\n        \"\"\"\n\n        try:\n            from openai import BadRequestError\n        except ImportError:\n            return\n        if isinstance(e, BadRequestError):\n            message = e.body.get(\"message\")  # type: ignore\n            if message:\n                return message\n        return\n"
               },
               "input_value": {
                 "advanced": false,
@@ -833,6 +841,21 @@
                 "type": "str",
                 "value": ""
               },
+              "json_mode": {
+                "advanced": true,
+                "display_name": "JSON Mode",
+                "dynamic": false,
+                "info": "If True, it will output JSON regardless of passing a schema.",
+                "list": false,
+                "name": "json_mode",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_metadata": true,
+                "type": "bool",
+                "value": false
+              },
               "max_tokens": {
                 "advanced": true,
                 "display_name": "Max Tokens",
@@ -906,7 +929,7 @@
                 "dynamic": false,
                 "info": "The OpenAI API Key to use for the OpenAI model.",
                 "input_types": [],
-                "load_from_db": false,
+                "load_from_db": true,
                 "name": "openai_api_key",
                 "password": true,
                 "placeholder": "",
@@ -914,7 +937,7 @@
                 "show": true,
                 "title_case": false,
                 "type": "str",
-                "value": ""
+                "value": "OPENAI_API_KEY"
               },
               "output_schema": {
                 "advanced": true,
@@ -994,26 +1017,26 @@
               }
             }
           },
-          "type": "OpenAIModel"
+          "type": "OpenAIModelComponent"
         },
         "dragging": false,
         "height": 621,
-        "id": "OpenAIModel-O0AGC",
+        "id": "OpenAIModel-U2g5u",
         "position": {
-          "x": 1227.3672858178775,
-          "y": 11.61201090144857
+          "x": 1249.1992451905348,
+          "y": 2.8792271523856243
         },
         "positionAbsolute": {
-          "x": 1227.3672858178775,
-          "y": 11.61201090144857
+          "x": 1249.1992451905348,
+          "y": 2.8792271523856243
         },
-        "selected": false,
+        "selected": true,
         "type": "genericNode",
         "width": 384
       },
       {
         "data": {
-          "id": "ChatOutput-efggd",
+          "id": "ChatOutput-yZjPO",
           "node": {
             "base_classes": [
               "Message"
@@ -1173,7 +1196,7 @@
         },
         "dragging": false,
         "height": 308,
-        "id": "ChatOutput-efggd",
+        "id": "ChatOutput-yZjPO",
         "position": {
           "x": 1831.1359796346408,
           "y": 139.5174517327903
@@ -1188,15 +1211,15 @@
       }
     ],
     "viewport": {
-      "x": 249.03047748371796,
-      "y": 251.71203687916693,
+      "x": 252.03047748371796,
+      "y": 253.71203687916693,
       "zoom": 0.4580440916596844
     }
   },
   "description": "This flow integrates PDF reading with a language model to answer document-specific questions. Ideal for small-scale texts, it facilitates direct queries with immediate insights.",
   "endpoint_name": null,
-  "id": "4b4cbf9e-34fe-4613-a460-3b7af89b7788",
+  "id": "483d5200-b59b-4afa-a71f-52fcfcde8fca",
   "is_component": false,
-  "last_tested_version": "1.0.0rc1",
+  "last_tested_version": "1.0.5",
   "name": "Document QA"
 }
\ No newline at end of file
diff --git a/src/backend/base/langflow/initial_setup/starter_projects/Memory Chatbot.json b/src/backend/base/langflow/initial_setup/starter_projects/Memory Chatbot.json
index c3396f03e..1edb56cd5 100644
--- a/src/backend/base/langflow/initial_setup/starter_projects/Memory Chatbot.json	
+++ b/src/backend/base/langflow/initial_setup/starter_projects/Memory Chatbot.json	
@@ -2,10 +2,11 @@
   "data": {
     "edges": [
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "Memory",
-            "id": "Memory-uy2TA",
+            "id": "Memory-VIq7F",
             "name": "messages_text",
             "output_types": [
               "Message"
@@ -13,7 +14,7 @@
           },
           "targetHandle": {
             "fieldName": "context",
-            "id": "Prompt-m9rUs",
+            "id": "Prompt-gEaWL",
             "inputTypes": [
               "Message",
               "Text"
@@ -21,17 +22,18 @@
             "type": "str"
           }
         },
-        "id": "reactflow__edge-Memory-uy2TA{œdataTypeœ:œMemoryœ,œidœ:œMemory-uy2TAœ,œnameœ:œmessages_textœ,œoutput_typesœ:[œMessageœ]}-Prompt-m9rUs{œfieldNameœ:œcontextœ,œidœ:œPrompt-m9rUsœ,œinputTypesœ:[œMessageœ,œTextœ],œtypeœ:œstrœ}",
-        "source": "Memory-uy2TA",
-        "sourceHandle": "{œdataTypeœ: œMemoryœ, œidœ: œMemory-uy2TAœ, œnameœ: œmessages_textœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "Prompt-m9rUs",
-        "targetHandle": "{œfieldNameœ: œcontextœ, œidœ: œPrompt-m9rUsœ, œinputTypesœ: [œMessageœ, œTextœ], œtypeœ: œstrœ}"
+        "id": "reactflow__edge-Memory-VIq7F{œdataTypeœ:œMemoryœ,œidœ:œMemory-VIq7Fœ,œnameœ:œmessages_textœ,œoutput_typesœ:[œMessageœ]}-Prompt-gEaWL{œfieldNameœ:œcontextœ,œidœ:œPrompt-gEaWLœ,œinputTypesœ:[œMessageœ,œTextœ],œtypeœ:œstrœ}",
+        "source": "Memory-VIq7F",
+        "sourceHandle": "{œdataTypeœ: œMemoryœ, œidœ: œMemory-VIq7Fœ, œnameœ: œmessages_textœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "Prompt-gEaWL",
+        "targetHandle": "{œfieldNameœ: œcontextœ, œidœ: œPrompt-gEaWLœ, œinputTypesœ: [œMessageœ, œTextœ], œtypeœ: œstrœ}"
       },
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "ChatInput",
-            "id": "ChatInput-hSTqh",
+            "id": "ChatInput-gIy9N",
             "name": "message",
             "output_types": [
               "Message"
@@ -39,7 +41,7 @@
           },
           "targetHandle": {
             "fieldName": "user_message",
-            "id": "Prompt-m9rUs",
+            "id": "Prompt-gEaWL",
             "inputTypes": [
               "Message",
               "Text"
@@ -47,17 +49,18 @@
             "type": "str"
           }
         },
-        "id": "reactflow__edge-ChatInput-hSTqh{œdataTypeœ:œChatInputœ,œidœ:œChatInput-hSTqhœ,œnameœ:œmessageœ,œoutput_typesœ:[œMessageœ]}-Prompt-m9rUs{œfieldNameœ:œuser_messageœ,œidœ:œPrompt-m9rUsœ,œinputTypesœ:[œMessageœ,œTextœ],œtypeœ:œstrœ}",
-        "source": "ChatInput-hSTqh",
-        "sourceHandle": "{œdataTypeœ: œChatInputœ, œidœ: œChatInput-hSTqhœ, œnameœ: œmessageœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "Prompt-m9rUs",
-        "targetHandle": "{œfieldNameœ: œuser_messageœ, œidœ: œPrompt-m9rUsœ, œinputTypesœ: [œMessageœ, œTextœ], œtypeœ: œstrœ}"
+        "id": "reactflow__edge-ChatInput-gIy9N{œdataTypeœ:œChatInputœ,œidœ:œChatInput-gIy9Nœ,œnameœ:œmessageœ,œoutput_typesœ:[œMessageœ]}-Prompt-gEaWL{œfieldNameœ:œuser_messageœ,œidœ:œPrompt-gEaWLœ,œinputTypesœ:[œMessageœ,œTextœ],œtypeœ:œstrœ}",
+        "source": "ChatInput-gIy9N",
+        "sourceHandle": "{œdataTypeœ: œChatInputœ, œidœ: œChatInput-gIy9Nœ, œnameœ: œmessageœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "Prompt-gEaWL",
+        "targetHandle": "{œfieldNameœ: œuser_messageœ, œidœ: œPrompt-gEaWLœ, œinputTypesœ: [œMessageœ, œTextœ], œtypeœ: œstrœ}"
       },
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "Prompt",
-            "id": "Prompt-m9rUs",
+            "id": "Prompt-gEaWL",
             "name": "prompt",
             "output_types": [
               "Message"
@@ -65,24 +68,24 @@
           },
           "targetHandle": {
             "fieldName": "input_value",
-            "id": "OpenAIModel-WmUtU",
+            "id": "OpenAIModel-uNcAU",
             "inputTypes": [
               "Message"
             ],
             "type": "str"
           }
         },
-        "id": "reactflow__edge-Prompt-m9rUs{œdataTypeœ:œPromptœ,œidœ:œPrompt-m9rUsœ,œnameœ:œpromptœ,œoutput_typesœ:[œMessageœ]}-OpenAIModel-WmUtU{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-WmUtUœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
-        "source": "Prompt-m9rUs",
-        "sourceHandle": "{œdataTypeœ: œPromptœ, œidœ: œPrompt-m9rUsœ, œnameœ: œpromptœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "OpenAIModel-WmUtU",
-        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œOpenAIModel-WmUtUœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
+        "id": "reactflow__edge-Prompt-gEaWL{œdataTypeœ:œPromptœ,œidœ:œPrompt-gEaWLœ,œnameœ:œpromptœ,œoutput_typesœ:[œMessageœ]}-OpenAIModel-uNcAU{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-uNcAUœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
+        "source": "Prompt-gEaWL",
+        "sourceHandle": "{œdataTypeœ: œPromptœ, œidœ: œPrompt-gEaWLœ, œnameœ: œpromptœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "OpenAIModel-uNcAU",
+        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œOpenAIModel-uNcAUœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
       },
       {
         "data": {
           "sourceHandle": {
-            "dataType": "OpenAIModel",
-            "id": "OpenAIModel-WmUtU",
+            "dataType": "OpenAIModelComponent",
+            "id": "OpenAIModel-uNcAU",
             "name": "text_output",
             "output_types": [
               "Message"
@@ -90,24 +93,24 @@
           },
           "targetHandle": {
             "fieldName": "input_value",
-            "id": "ChatOutput-LIvGN",
+            "id": "ChatOutput-KtSB9",
             "inputTypes": [
               "Message"
             ],
             "type": "str"
           }
         },
-        "id": "reactflow__edge-OpenAIModel-WmUtU{œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-WmUtUœ,œnameœ:œtext_outputœ,œoutput_typesœ:[œMessageœ]}-ChatOutput-LIvGN{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-LIvGNœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
-        "source": "OpenAIModel-WmUtU",
-        "sourceHandle": "{œdataTypeœ: œOpenAIModelœ, œidœ: œOpenAIModel-WmUtUœ, œnameœ: œtext_outputœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "ChatOutput-LIvGN",
-        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œChatOutput-LIvGNœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
+        "id": "reactflow__edge-OpenAIModel-uNcAU{œdataTypeœ:œOpenAIModelComponentœ,œidœ:œOpenAIModel-uNcAUœ,œnameœ:œtext_outputœ,œoutput_typesœ:[œMessageœ]}-ChatOutput-KtSB9{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-KtSB9œ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
+        "source": "OpenAIModel-uNcAU",
+        "sourceHandle": "{œdataTypeœ: œOpenAIModelComponentœ, œidœ: œOpenAIModel-uNcAUœ, œnameœ: œtext_outputœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "ChatOutput-KtSB9",
+        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œChatOutput-KtSB9œ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
       }
     ],
     "nodes": [
       {
         "data": {
-          "id": "Memory-uy2TA",
+          "id": "Memory-VIq7F",
           "node": {
             "base_classes": [
               "Data",
@@ -296,7 +299,7 @@
         },
         "dragging": false,
         "height": 266,
-        "id": "Memory-uy2TA",
+        "id": "Memory-VIq7F",
         "position": {
           "x": 1264.7588980556088,
           "y": 506.6868269980502
@@ -313,7 +316,7 @@
         "data": {
           "description": "Create a prompt template with dynamic variables.",
           "display_name": "Prompt",
-          "id": "Prompt-m9rUs",
+          "id": "Prompt-gEaWL",
           "node": {
             "base_classes": [
               "Message"
@@ -446,7 +449,7 @@
         },
         "dragging": false,
         "height": 515,
-        "id": "Prompt-m9rUs",
+        "id": "Prompt-gEaWL",
         "position": {
           "x": 1880.8227904110583,
           "y": 625.8049209882275
@@ -461,7 +464,7 @@
       },
       {
         "data": {
-          "id": "ChatInput-hSTqh",
+          "id": "ChatInput-gIy9N",
           "node": {
             "base_classes": [
               "Message"
@@ -644,7 +647,7 @@
         },
         "dragging": false,
         "height": 308,
-        "id": "ChatInput-hSTqh",
+        "id": "ChatInput-gIy9N",
         "position": {
           "x": 1275.9262193671882,
           "y": 836.1228056896347
@@ -659,7 +662,10 @@
       },
       {
         "data": {
-          "id": "OpenAIModel-WmUtU",
+          "description": "Generates text using OpenAI LLMs.",
+          "display_name": "OpenAI",
+          "edited": false,
+          "id": "OpenAIModel-uNcAU",
           "node": {
             "base_classes": [
               "LanguageModel",
@@ -671,11 +677,12 @@
             "description": "Generates text using OpenAI LLMs.",
             "display_name": "OpenAI",
             "documentation": "",
-            "edited": false,
+            "edited": true,
             "field_order": [
               "input_value",
               "max_tokens",
               "model_kwargs",
+              "json_mode",
               "output_schema",
               "model_name",
               "openai_api_base",
@@ -732,7 +739,7 @@
                 "show": true,
                 "title_case": false,
                 "type": "code",
-                "value": "import operator\nfrom functools import reduce\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import LanguageModel\nfrom langflow.inputs import (\n    BoolInput,\n    DictInput,\n    DropdownInput,\n    FloatInput,\n    IntInput,\n    MessageInput,\n    SecretStrInput,\n    StrInput,\n)\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    inputs = [\n        MessageInput(name=\"input_value\", display_name=\"Input\"),\n        IntInput(\n            name=\"max_tokens\",\n            display_name=\"Max Tokens\",\n            advanced=True,\n            info=\"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n        ),\n        DictInput(name=\"model_kwargs\", display_name=\"Model Kwargs\", advanced=True),\n        DictInput(\n            name=\"output_schema\",\n            is_list=True,\n            display_name=\"Schema\",\n            advanced=True,\n            info=\"The schema for the Output of the model. You must pass the word JSON in the prompt. If left blank, JSON mode will be disabled.\",\n        ),\n        DropdownInput(\n            name=\"model_name\", display_name=\"Model Name\", advanced=False, options=MODEL_NAMES, value=MODEL_NAMES[0]\n        ),\n        StrInput(\n            name=\"openai_api_base\",\n            display_name=\"OpenAI API Base\",\n            advanced=True,\n            info=\"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1. You can change this to use other APIs like JinaChat, LocalAI and Prem.\",\n        ),\n        SecretStrInput(\n            name=\"openai_api_key\",\n            display_name=\"OpenAI API Key\",\n            info=\"The OpenAI API Key to use for the OpenAI model.\",\n            advanced=False,\n            value=\"OPENAI_API_KEY\",\n        ),\n        FloatInput(name=\"temperature\", display_name=\"Temperature\", value=0.1),\n        BoolInput(name=\"stream\", display_name=\"Stream\", info=STREAM_INFO_TEXT, advanced=True),\n        StrInput(\n            name=\"system_message\",\n            display_name=\"System Message\",\n            info=\"System message to pass to the model.\",\n            advanced=True,\n        ),\n        IntInput(\n            name=\"seed\",\n            display_name=\"Seed\",\n            info=\"The seed controls the reproducibility of the job.\",\n            advanced=True,\n            value=1,\n        ),\n    ]\n\n    def build_model(self) -> LanguageModel:\n        # self.output_schea is a list of dictionaries\n        # let's convert it to a dictionary\n        output_schema_dict: dict[str, str] = reduce(operator.ior, self.output_schema or {}, {})\n        openai_api_key = self.openai_api_key\n        temperature = self.temperature\n        model_name: str = self.model_name\n        max_tokens = self.max_tokens\n        model_kwargs = self.model_kwargs or {}\n        openai_api_base = self.openai_api_base or \"https://api.openai.com/v1\"\n        json_mode = bool(output_schema_dict)\n        seed = self.seed\n        model_kwargs[\"seed\"] = seed\n\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature or 0.1,\n        )\n        if json_mode:\n            output = output.with_structured_output(schema=output_schema_dict, method=\"json_mode\")  # type: ignore\n\n        return output\n\n    def _get_exception_message(self, e: Exception):\n        \"\"\"\n        Get a message from an OpenAI exception.\n\n        Args:\n            exception (Exception): The exception to get the message from.\n\n        Returns:\n            str: The message from the exception.\n        \"\"\"\n\n        try:\n            from openai import BadRequestError\n        except ImportError:\n            return\n        if isinstance(e, BadRequestError):\n            message = e.body.get(\"message\")  # type: ignore\n            if message:\n                return message\n        return\n"
+                "value": "import operator\nfrom functools import reduce\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import LanguageModel\nfrom langflow.inputs import (\n    BoolInput,\n    DictInput,\n    DropdownInput,\n    FloatInput,\n    IntInput,\n    MessageInput,\n    SecretStrInput,\n    StrInput,\n)\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    inputs = [\n        MessageInput(name=\"input_value\", display_name=\"Input\"),\n        IntInput(\n            name=\"max_tokens\",\n            display_name=\"Max Tokens\",\n            advanced=True,\n            info=\"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n        ),\n        DictInput(name=\"model_kwargs\", display_name=\"Model Kwargs\", advanced=True),\n        BoolInput(\n            name=\"json_mode\",\n            display_name=\"JSON Mode\",\n            advanced=True,\n            info=\"If True, it will output JSON regardless of passing a schema.\",\n        ),\n        DictInput(\n            name=\"output_schema\",\n            is_list=True,\n            display_name=\"Schema\",\n            advanced=True,\n            info=\"The schema for the Output of the model. You must pass the word JSON in the prompt. If left blank, JSON mode will be disabled.\",\n        ),\n        DropdownInput(\n            name=\"model_name\", display_name=\"Model Name\", advanced=False, options=MODEL_NAMES, value=MODEL_NAMES[0]\n        ),\n        StrInput(\n            name=\"openai_api_base\",\n            display_name=\"OpenAI API Base\",\n            advanced=True,\n            info=\"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1. You can change this to use other APIs like JinaChat, LocalAI and Prem.\",\n        ),\n        SecretStrInput(\n            name=\"openai_api_key\",\n            display_name=\"OpenAI API Key\",\n            info=\"The OpenAI API Key to use for the OpenAI model.\",\n            advanced=False,\n            value=\"OPENAI_API_KEY\",\n        ),\n        FloatInput(name=\"temperature\", display_name=\"Temperature\", value=0.1),\n        BoolInput(name=\"stream\", display_name=\"Stream\", info=STREAM_INFO_TEXT, advanced=True),\n        StrInput(\n            name=\"system_message\",\n            display_name=\"System Message\",\n            info=\"System message to pass to the model.\",\n            advanced=True,\n        ),\n        IntInput(\n            name=\"seed\",\n            display_name=\"Seed\",\n            info=\"The seed controls the reproducibility of the job.\",\n            advanced=True,\n            value=1,\n        ),\n    ]\n\n    def build_model(self) -> LanguageModel:\n        # self.output_schea is a list of dictionaries\n        # let's convert it to a dictionary\n        output_schema_dict: dict[str, str] = reduce(operator.ior, self.output_schema or {}, {})\n        openai_api_key = self.openai_api_key\n        temperature = self.temperature\n        model_name: str = self.model_name\n        max_tokens = self.max_tokens\n        model_kwargs = self.model_kwargs or {}\n        openai_api_base = self.openai_api_base or \"https://api.openai.com/v1\"\n        json_mode = bool(output_schema_dict) or self.json_mode\n        seed = self.seed\n        model_kwargs[\"seed\"] = seed\n\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature or 0.1,\n        )\n        if json_mode:\n            if output_schema_dict:\n                output = output.with_structured_output(schema=output_schema_dict, method=\"json_mode\")  # type: ignore\n            else:\n                output = output.bind(response_format={\"type\": \"json_object\"})  # type: ignore\n\n        return output\n\n    def _get_exception_message(self, e: Exception):\n        \"\"\"\n        Get a message from an OpenAI exception.\n\n        Args:\n            exception (Exception): The exception to get the message from.\n\n        Returns:\n            str: The message from the exception.\n        \"\"\"\n\n        try:\n            from openai import BadRequestError\n        except ImportError:\n            return\n        if isinstance(e, BadRequestError):\n            message = e.body.get(\"message\")  # type: ignore\n            if message:\n                return message\n        return\n"
               },
               "input_value": {
                 "advanced": false,
@@ -754,6 +761,21 @@
                 "type": "str",
                 "value": ""
               },
+              "json_mode": {
+                "advanced": true,
+                "display_name": "JSON Mode",
+                "dynamic": false,
+                "info": "If True, it will output JSON regardless of passing a schema.",
+                "list": false,
+                "name": "json_mode",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_metadata": true,
+                "type": "bool",
+                "value": false
+              },
               "max_tokens": {
                 "advanced": true,
                 "display_name": "Max Tokens",
@@ -827,7 +849,7 @@
                 "dynamic": false,
                 "info": "The OpenAI API Key to use for the OpenAI model.",
                 "input_types": [],
-                "load_from_db": false,
+                "load_from_db": true,
                 "name": "openai_api_key",
                 "password": true,
                 "placeholder": "",
@@ -835,7 +857,7 @@
                 "show": true,
                 "title_case": false,
                 "type": "str",
-                "value": ""
+                "value": "OPENAI_API_KEY"
               },
               "output_schema": {
                 "advanced": true,
@@ -915,11 +937,11 @@
               }
             }
           },
-          "type": "OpenAIModel"
+          "type": "OpenAIModelComponent"
         },
         "dragging": false,
         "height": 621,
-        "id": "OpenAIModel-WmUtU",
+        "id": "OpenAIModel-uNcAU",
         "position": {
           "x": 2428.0215346784357,
           "y": 569.9683144303319
@@ -934,7 +956,7 @@
       },
       {
         "data": {
-          "id": "ChatOutput-LIvGN",
+          "id": "ChatOutput-KtSB9",
           "node": {
             "base_classes": [
               "Message"
@@ -1094,7 +1116,7 @@
         },
         "dragging": false,
         "height": 308,
-        "id": "ChatOutput-LIvGN",
+        "id": "ChatOutput-KtSB9",
         "position": {
           "x": 2988.248820475989,
           "y": 705.837390387878
@@ -1116,8 +1138,8 @@
   },
   "description": "This project can be used as a starting point for building a Chat experience with user specific memory. You can set a different Session ID to start a new message history.",
   "endpoint_name": null,
-  "id": "2a47bc35-69ca-4d8b-9895-2a7fab222b9f",
+  "id": "16c029a0-0d89-4c36-8a8c-e5410206df38",
   "is_component": false,
-  "last_tested_version": "1.0.0rc1",
+  "last_tested_version": "1.0.5",
   "name": "Memory Chatbot"
 }
\ No newline at end of file
diff --git a/src/backend/base/langflow/initial_setup/starter_projects/Vector Store RAG.json b/src/backend/base/langflow/initial_setup/starter_projects/Vector Store RAG.json
index ae6115c67..7890fe164 100644
--- a/src/backend/base/langflow/initial_setup/starter_projects/Vector Store RAG.json	
+++ b/src/backend/base/langflow/initial_setup/starter_projects/Vector Store RAG.json	
@@ -2,10 +2,11 @@
   "data": {
     "edges": [
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "ChatInput",
-            "id": "ChatInput-c4xn9",
+            "id": "ChatInput-tuEeg",
             "name": "message",
             "output_types": [
               "Message"
@@ -13,50 +14,25 @@
           },
           "targetHandle": {
             "fieldName": "search_input",
-            "id": "AstraDB-7nAHJ",
+            "id": "AstraDB-xVF1f",
             "inputTypes": [
               "Message"
             ],
             "type": "str"
           }
         },
-        "id": "reactflow__edge-ChatInput-c4xn9{œdataTypeœ:œChatInputœ,œidœ:œChatInput-c4xn9œ,œnameœ:œmessageœ,œoutput_typesœ:[œMessageœ]}-AstraDB-7nAHJ{œfieldNameœ:œsearch_inputœ,œidœ:œAstraDB-7nAHJœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
-        "source": "ChatInput-c4xn9",
-        "sourceHandle": "{œdataTypeœ: œChatInputœ, œidœ: œChatInput-c4xn9œ, œnameœ: œmessageœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "AstraDB-7nAHJ",
-        "targetHandle": "{œfieldNameœ: œsearch_inputœ, œidœ: œAstraDB-7nAHJœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
-      },
-      {
-        "data": {
-          "sourceHandle": {
-            "dataType": "OpenAIEmbeddings",
-            "id": "OpenAIEmbeddings-BKXc6",
-            "name": "embeddings",
-            "output_types": [
-              "Embeddings"
-            ]
-          },
-          "targetHandle": {
-            "fieldName": "embedding",
-            "id": "AstraDB-7nAHJ",
-            "inputTypes": [
-              "Embeddings",
-              "dict"
-            ],
-            "type": "other"
-          }
-        },
-        "id": "reactflow__edge-OpenAIEmbeddings-BKXc6{œdataTypeœ:œOpenAIEmbeddingsœ,œidœ:œOpenAIEmbeddings-BKXc6œ,œnameœ:œembeddingsœ,œoutput_typesœ:[œEmbeddingsœ]}-AstraDB-7nAHJ{œfieldNameœ:œembeddingœ,œidœ:œAstraDB-7nAHJœ,œinputTypesœ:[œEmbeddingsœ,œdictœ],œtypeœ:œotherœ}",
-        "source": "OpenAIEmbeddings-BKXc6",
-        "sourceHandle": "{œdataTypeœ: œOpenAIEmbeddingsœ, œidœ: œOpenAIEmbeddings-BKXc6œ, œnameœ: œembeddingsœ, œoutput_typesœ: [œEmbeddingsœ]}",
-        "target": "AstraDB-7nAHJ",
-        "targetHandle": "{œfieldNameœ: œembeddingœ, œidœ: œAstraDB-7nAHJœ, œinputTypesœ: [œEmbeddingsœ, œdictœ], œtypeœ: œotherœ}"
+        "id": "reactflow__edge-ChatInput-tuEeg{œdataTypeœ:œChatInputœ,œidœ:œChatInput-tuEegœ,œnameœ:œmessageœ,œoutput_typesœ:[œMessageœ]}-AstraDB-xVF1f{œfieldNameœ:œsearch_inputœ,œidœ:œAstraDB-xVF1fœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
+        "source": "ChatInput-tuEeg",
+        "sourceHandle": "{œdataTypeœ: œChatInputœ, œidœ: œChatInput-tuEegœ, œnameœ: œmessageœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "AstraDB-xVF1f",
+        "targetHandle": "{œfieldNameœ: œsearch_inputœ, œidœ: œAstraDB-xVF1fœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
       },
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "AstraDB",
-            "id": "AstraDB-7nAHJ",
+            "id": "AstraDB-xVF1f",
             "name": "search_results",
             "output_types": [
               "Data"
@@ -64,24 +40,25 @@
           },
           "targetHandle": {
             "fieldName": "data",
-            "id": "ParseData-d61Q0",
+            "id": "ParseData-ZG3Aa",
             "inputTypes": [
               "Data"
             ],
             "type": "other"
           }
         },
-        "id": "reactflow__edge-AstraDB-7nAHJ{œdataTypeœ:œAstraDBœ,œidœ:œAstraDB-7nAHJœ,œnameœ:œsearch_resultsœ,œoutput_typesœ:[œDataœ]}-ParseData-d61Q0{œfieldNameœ:œdataœ,œidœ:œParseData-d61Q0œ,œinputTypesœ:[œDataœ],œtypeœ:œotherœ}",
-        "source": "AstraDB-7nAHJ",
-        "sourceHandle": "{œdataTypeœ: œAstraDBœ, œidœ: œAstraDB-7nAHJœ, œnameœ: œsearch_resultsœ, œoutput_typesœ: [œDataœ]}",
-        "target": "ParseData-d61Q0",
-        "targetHandle": "{œfieldNameœ: œdataœ, œidœ: œParseData-d61Q0œ, œinputTypesœ: [œDataœ], œtypeœ: œotherœ}"
+        "id": "reactflow__edge-AstraDB-xVF1f{œdataTypeœ:œAstraDBœ,œidœ:œAstraDB-xVF1fœ,œnameœ:œsearch_resultsœ,œoutput_typesœ:[œDataœ]}-ParseData-ZG3Aa{œfieldNameœ:œdataœ,œidœ:œParseData-ZG3Aaœ,œinputTypesœ:[œDataœ],œtypeœ:œotherœ}",
+        "source": "AstraDB-xVF1f",
+        "sourceHandle": "{œdataTypeœ: œAstraDBœ, œidœ: œAstraDB-xVF1fœ, œnameœ: œsearch_resultsœ, œoutput_typesœ: [œDataœ]}",
+        "target": "ParseData-ZG3Aa",
+        "targetHandle": "{œfieldNameœ: œdataœ, œidœ: œParseData-ZG3Aaœ, œinputTypesœ: [œDataœ], œtypeœ: œotherœ}"
       },
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "ParseData",
-            "id": "ParseData-d61Q0",
+            "id": "ParseData-ZG3Aa",
             "name": "text",
             "output_types": [
               "Message"
@@ -89,7 +66,7 @@
           },
           "targetHandle": {
             "fieldName": "context",
-            "id": "Prompt-vqAlG",
+            "id": "Prompt-0Hp9v",
             "inputTypes": [
               "Message",
               "Text"
@@ -97,17 +74,18 @@
             "type": "str"
           }
         },
-        "id": "reactflow__edge-ParseData-d61Q0{œdataTypeœ:œParseDataœ,œidœ:œParseData-d61Q0œ,œnameœ:œtextœ,œoutput_typesœ:[œMessageœ]}-Prompt-vqAlG{œfieldNameœ:œcontextœ,œidœ:œPrompt-vqAlGœ,œinputTypesœ:[œMessageœ,œTextœ],œtypeœ:œstrœ}",
-        "source": "ParseData-d61Q0",
-        "sourceHandle": "{œdataTypeœ: œParseDataœ, œidœ: œParseData-d61Q0œ, œnameœ: œtextœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "Prompt-vqAlG",
-        "targetHandle": "{œfieldNameœ: œcontextœ, œidœ: œPrompt-vqAlGœ, œinputTypesœ: [œMessageœ, œTextœ], œtypeœ: œstrœ}"
+        "id": "reactflow__edge-ParseData-ZG3Aa{œdataTypeœ:œParseDataœ,œidœ:œParseData-ZG3Aaœ,œnameœ:œtextœ,œoutput_typesœ:[œMessageœ]}-Prompt-0Hp9v{œfieldNameœ:œcontextœ,œidœ:œPrompt-0Hp9vœ,œinputTypesœ:[œMessageœ,œTextœ],œtypeœ:œstrœ}",
+        "source": "ParseData-ZG3Aa",
+        "sourceHandle": "{œdataTypeœ: œParseDataœ, œidœ: œParseData-ZG3Aaœ, œnameœ: œtextœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "Prompt-0Hp9v",
+        "targetHandle": "{œfieldNameœ: œcontextœ, œidœ: œPrompt-0Hp9vœ, œinputTypesœ: [œMessageœ, œTextœ], œtypeœ: œstrœ}"
       },
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "ChatInput",
-            "id": "ChatInput-c4xn9",
+            "id": "ChatInput-tuEeg",
             "name": "message",
             "output_types": [
               "Message"
@@ -115,7 +93,7 @@
           },
           "targetHandle": {
             "fieldName": "question",
-            "id": "Prompt-vqAlG",
+            "id": "Prompt-0Hp9v",
             "inputTypes": [
               "Message",
               "Text"
@@ -123,17 +101,18 @@
             "type": "str"
           }
         },
-        "id": "reactflow__edge-ChatInput-c4xn9{œdataTypeœ:œChatInputœ,œidœ:œChatInput-c4xn9œ,œnameœ:œmessageœ,œoutput_typesœ:[œMessageœ]}-Prompt-vqAlG{œfieldNameœ:œquestionœ,œidœ:œPrompt-vqAlGœ,œinputTypesœ:[œMessageœ,œTextœ],œtypeœ:œstrœ}",
-        "source": "ChatInput-c4xn9",
-        "sourceHandle": "{œdataTypeœ: œChatInputœ, œidœ: œChatInput-c4xn9œ, œnameœ: œmessageœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "Prompt-vqAlG",
-        "targetHandle": "{œfieldNameœ: œquestionœ, œidœ: œPrompt-vqAlGœ, œinputTypesœ: [œMessageœ, œTextœ], œtypeœ: œstrœ}"
+        "id": "reactflow__edge-ChatInput-tuEeg{œdataTypeœ:œChatInputœ,œidœ:œChatInput-tuEegœ,œnameœ:œmessageœ,œoutput_typesœ:[œMessageœ]}-Prompt-0Hp9v{œfieldNameœ:œquestionœ,œidœ:œPrompt-0Hp9vœ,œinputTypesœ:[œMessageœ,œTextœ],œtypeœ:œstrœ}",
+        "source": "ChatInput-tuEeg",
+        "sourceHandle": "{œdataTypeœ: œChatInputœ, œidœ: œChatInput-tuEegœ, œnameœ: œmessageœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "Prompt-0Hp9v",
+        "targetHandle": "{œfieldNameœ: œquestionœ, œidœ: œPrompt-0Hp9vœ, œinputTypesœ: [œMessageœ, œTextœ], œtypeœ: œstrœ}"
       },
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "Prompt",
-            "id": "Prompt-vqAlG",
+            "id": "Prompt-0Hp9v",
             "name": "prompt",
             "output_types": [
               "Message"
@@ -141,49 +120,25 @@
           },
           "targetHandle": {
             "fieldName": "input_value",
-            "id": "OpenAIModel-ybL3k",
+            "id": "OpenAIModel-BQXFs",
             "inputTypes": [
               "Message"
             ],
             "type": "str"
           }
         },
-        "id": "reactflow__edge-Prompt-vqAlG{œdataTypeœ:œPromptœ,œidœ:œPrompt-vqAlGœ,œnameœ:œpromptœ,œoutput_typesœ:[œMessageœ]}-OpenAIModel-ybL3k{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-ybL3kœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
-        "source": "Prompt-vqAlG",
-        "sourceHandle": "{œdataTypeœ: œPromptœ, œidœ: œPrompt-vqAlGœ, œnameœ: œpromptœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "OpenAIModel-ybL3k",
-        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œOpenAIModel-ybL3kœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
-      },
-      {
-        "data": {
-          "sourceHandle": {
-            "dataType": "OpenAIModel",
-            "id": "OpenAIModel-ybL3k",
-            "name": "text_output",
-            "output_types": [
-              "Message"
-            ]
-          },
-          "targetHandle": {
-            "fieldName": "input_value",
-            "id": "ChatOutput-BpzuD",
-            "inputTypes": [
-              "Message"
-            ],
-            "type": "str"
-          }
-        },
-        "id": "reactflow__edge-OpenAIModel-ybL3k{œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-ybL3kœ,œnameœ:œtext_outputœ,œoutput_typesœ:[œMessageœ]}-ChatOutput-BpzuD{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-BpzuDœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
-        "source": "OpenAIModel-ybL3k",
-        "sourceHandle": "{œdataTypeœ: œOpenAIModelœ, œidœ: œOpenAIModel-ybL3kœ, œnameœ: œtext_outputœ, œoutput_typesœ: [œMessageœ]}",
-        "target": "ChatOutput-BpzuD",
-        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œChatOutput-BpzuDœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
+        "id": "reactflow__edge-Prompt-0Hp9v{œdataTypeœ:œPromptœ,œidœ:œPrompt-0Hp9vœ,œnameœ:œpromptœ,œoutput_typesœ:[œMessageœ]}-OpenAIModel-BQXFs{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-BQXFsœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
+        "source": "Prompt-0Hp9v",
+        "sourceHandle": "{œdataTypeœ: œPromptœ, œidœ: œPrompt-0Hp9vœ, œnameœ: œpromptœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "OpenAIModel-BQXFs",
+        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œOpenAIModel-BQXFsœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
       },
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "File",
-            "id": "File-bf6wn",
+            "id": "File-BTJVJ",
             "name": "data",
             "output_types": [
               "Data"
@@ -191,24 +146,25 @@
           },
           "targetHandle": {
             "fieldName": "data_inputs",
-            "id": "SplitText-52wBo",
+            "id": "SplitText-RkdZ3",
             "inputTypes": [
               "Data"
             ],
             "type": "other"
           }
         },
-        "id": "reactflow__edge-File-bf6wn{œdataTypeœ:œFileœ,œidœ:œFile-bf6wnœ,œnameœ:œdataœ,œoutput_typesœ:[œDataœ]}-SplitText-52wBo{œfieldNameœ:œdata_inputsœ,œidœ:œSplitText-52wBoœ,œinputTypesœ:[œDataœ],œtypeœ:œotherœ}",
-        "source": "File-bf6wn",
-        "sourceHandle": "{œdataTypeœ: œFileœ, œidœ: œFile-bf6wnœ, œnameœ: œdataœ, œoutput_typesœ: [œDataœ]}",
-        "target": "SplitText-52wBo",
-        "targetHandle": "{œfieldNameœ: œdata_inputsœ, œidœ: œSplitText-52wBoœ, œinputTypesœ: [œDataœ], œtypeœ: œotherœ}"
+        "id": "reactflow__edge-File-BTJVJ{œdataTypeœ:œFileœ,œidœ:œFile-BTJVJœ,œnameœ:œdataœ,œoutput_typesœ:[œDataœ]}-SplitText-RkdZ3{œfieldNameœ:œdata_inputsœ,œidœ:œSplitText-RkdZ3œ,œinputTypesœ:[œDataœ],œtypeœ:œotherœ}",
+        "source": "File-BTJVJ",
+        "sourceHandle": "{œdataTypeœ: œFileœ, œidœ: œFile-BTJVJœ, œnameœ: œdataœ, œoutput_typesœ: [œDataœ]}",
+        "target": "SplitText-RkdZ3",
+        "targetHandle": "{œfieldNameœ: œdata_inputsœ, œidœ: œSplitText-RkdZ3œ, œinputTypesœ: [œDataœ], œtypeœ: œotherœ}"
       },
       {
+        "className": "",
         "data": {
           "sourceHandle": {
             "dataType": "SplitText",
-            "id": "SplitText-52wBo",
+            "id": "SplitText-RkdZ3",
             "name": "chunks",
             "output_types": [
               "Data"
@@ -216,24 +172,49 @@
           },
           "targetHandle": {
             "fieldName": "ingest_data",
-            "id": "AstraDB-vyd5U",
+            "id": "AstraDB-XXizY",
             "inputTypes": [
               "Data"
             ],
             "type": "other"
           }
         },
-        "id": "reactflow__edge-SplitText-52wBo{œdataTypeœ:œSplitTextœ,œidœ:œSplitText-52wBoœ,œnameœ:œchunksœ,œoutput_typesœ:[œDataœ]}-AstraDB-vyd5U{œfieldNameœ:œingest_dataœ,œidœ:œAstraDB-vyd5Uœ,œinputTypesœ:[œDataœ],œtypeœ:œotherœ}",
-        "source": "SplitText-52wBo",
-        "sourceHandle": "{œdataTypeœ: œSplitTextœ, œidœ: œSplitText-52wBoœ, œnameœ: œchunksœ, œoutput_typesœ: [œDataœ]}",
-        "target": "AstraDB-vyd5U",
-        "targetHandle": "{œfieldNameœ: œingest_dataœ, œidœ: œAstraDB-vyd5Uœ, œinputTypesœ: [œDataœ], œtypeœ: œotherœ}"
+        "id": "reactflow__edge-SplitText-RkdZ3{œdataTypeœ:œSplitTextœ,œidœ:œSplitText-RkdZ3œ,œnameœ:œchunksœ,œoutput_typesœ:[œDataœ]}-AstraDB-XXizY{œfieldNameœ:œingest_dataœ,œidœ:œAstraDB-XXizYœ,œinputTypesœ:[œDataœ],œtypeœ:œotherœ}",
+        "source": "SplitText-RkdZ3",
+        "sourceHandle": "{œdataTypeœ: œSplitTextœ, œidœ: œSplitText-RkdZ3œ, œnameœ: œchunksœ, œoutput_typesœ: [œDataœ]}",
+        "target": "AstraDB-XXizY",
+        "targetHandle": "{œfieldNameœ: œingest_dataœ, œidœ: œAstraDB-XXizYœ, œinputTypesœ: [œDataœ], œtypeœ: œotherœ}"
+      },
+      {
+        "data": {
+          "sourceHandle": {
+            "dataType": "OpenAIModelComponent",
+            "id": "OpenAIModel-BQXFs",
+            "name": "text_output",
+            "output_types": [
+              "Message"
+            ]
+          },
+          "targetHandle": {
+            "fieldName": "input_value",
+            "id": "ChatOutput-fDyGT",
+            "inputTypes": [
+              "Message"
+            ],
+            "type": "str"
+          }
+        },
+        "id": "reactflow__edge-OpenAIModel-BQXFs{œdataTypeœ:œOpenAIModelComponentœ,œidœ:œOpenAIModel-BQXFsœ,œnameœ:œtext_outputœ,œoutput_typesœ:[œMessageœ]}-ChatOutput-fDyGT{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-fDyGTœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
+        "source": "OpenAIModel-BQXFs",
+        "sourceHandle": "{œdataTypeœ: œOpenAIModelComponentœ, œidœ: œOpenAIModel-BQXFsœ, œnameœ: œtext_outputœ, œoutput_typesœ: [œMessageœ]}",
+        "target": "ChatOutput-fDyGT",
+        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œChatOutput-fDyGTœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
       },
       {
         "data": {
           "sourceHandle": {
             "dataType": "OpenAIEmbeddings",
-            "id": "OpenAIEmbeddings-sRZMc",
+            "id": "OpenAIEmbeddings-fpOKp",
             "name": "embeddings",
             "output_types": [
               "Embeddings"
@@ -241,7 +222,7 @@
           },
           "targetHandle": {
             "fieldName": "embedding",
-            "id": "AstraDB-vyd5U",
+            "id": "AstraDB-XXizY",
             "inputTypes": [
               "Embeddings",
               "dict"
@@ -249,17 +230,43 @@
             "type": "other"
           }
         },
-        "id": "reactflow__edge-OpenAIEmbeddings-sRZMc{œdataTypeœ:œOpenAIEmbeddingsœ,œidœ:œOpenAIEmbeddings-sRZMcœ,œnameœ:œembeddingsœ,œoutput_typesœ:[œEmbeddingsœ]}-AstraDB-vyd5U{œfieldNameœ:œembeddingœ,œidœ:œAstraDB-vyd5Uœ,œinputTypesœ:[œEmbeddingsœ,œdictœ],œtypeœ:œotherœ}",
-        "source": "OpenAIEmbeddings-sRZMc",
-        "sourceHandle": "{œdataTypeœ: œOpenAIEmbeddingsœ, œidœ: œOpenAIEmbeddings-sRZMcœ, œnameœ: œembeddingsœ, œoutput_typesœ: [œEmbeddingsœ]}",
-        "target": "AstraDB-vyd5U",
-        "targetHandle": "{œfieldNameœ: œembeddingœ, œidœ: œAstraDB-vyd5Uœ, œinputTypesœ: [œEmbeddingsœ, œdictœ], œtypeœ: œotherœ}"
+        "id": "reactflow__edge-OpenAIEmbeddings-fpOKp{œdataTypeœ:œOpenAIEmbeddingsœ,œidœ:œOpenAIEmbeddings-fpOKpœ,œnameœ:œembeddingsœ,œoutput_typesœ:[œEmbeddingsœ]}-AstraDB-XXizY{œfieldNameœ:œembeddingœ,œidœ:œAstraDB-XXizYœ,œinputTypesœ:[œEmbeddingsœ,œdictœ],œtypeœ:œotherœ}",
+        "source": "OpenAIEmbeddings-fpOKp",
+        "sourceHandle": "{œdataTypeœ: œOpenAIEmbeddingsœ, œidœ: œOpenAIEmbeddings-fpOKpœ, œnameœ: œembeddingsœ, œoutput_typesœ: [œEmbeddingsœ]}",
+        "target": "AstraDB-XXizY",
+        "targetHandle": "{œfieldNameœ: œembeddingœ, œidœ: œAstraDB-XXizYœ, œinputTypesœ: [œEmbeddingsœ, œdictœ], œtypeœ: œotherœ}"
+      },
+      {
+        "data": {
+          "sourceHandle": {
+            "dataType": "OpenAIEmbeddings",
+            "id": "OpenAIEmbeddings-lCQlU",
+            "name": "embeddings",
+            "output_types": [
+              "Embeddings"
+            ]
+          },
+          "targetHandle": {
+            "fieldName": "embedding",
+            "id": "AstraDB-xVF1f",
+            "inputTypes": [
+              "Embeddings",
+              "dict"
+            ],
+            "type": "other"
+          }
+        },
+        "id": "reactflow__edge-OpenAIEmbeddings-lCQlU{œdataTypeœ:œOpenAIEmbeddingsœ,œidœ:œOpenAIEmbeddings-lCQlUœ,œnameœ:œembeddingsœ,œoutput_typesœ:[œEmbeddingsœ]}-AstraDB-xVF1f{œfieldNameœ:œembeddingœ,œidœ:œAstraDB-xVF1fœ,œinputTypesœ:[œEmbeddingsœ,œdictœ],œtypeœ:œotherœ}",
+        "source": "OpenAIEmbeddings-lCQlU",
+        "sourceHandle": "{œdataTypeœ: œOpenAIEmbeddingsœ, œidœ: œOpenAIEmbeddings-lCQlUœ, œnameœ: œembeddingsœ, œoutput_typesœ: [œEmbeddingsœ]}",
+        "target": "AstraDB-xVF1f",
+        "targetHandle": "{œfieldNameœ: œembeddingœ, œidœ: œAstraDB-xVF1fœ, œinputTypesœ: [œEmbeddingsœ, œdictœ], œtypeœ: œotherœ}"
       }
     ],
     "nodes": [
       {
         "data": {
-          "id": "ChatInput-c4xn9",
+          "id": "ChatInput-tuEeg",
           "node": {
             "base_classes": [
               "Message"
@@ -442,7 +449,7 @@
         },
         "dragging": false,
         "height": 308,
-        "id": "ChatInput-c4xn9",
+        "id": "ChatInput-tuEeg",
         "position": {
           "x": 642.3545710150049,
           "y": 220.22556606238678
@@ -457,7 +464,7 @@
       },
       {
         "data": {
-          "id": "AstraDB-7nAHJ",
+          "id": "AstraDB-xVF1f",
           "node": {
             "base_classes": [
               "Data",
@@ -863,7 +870,7 @@
         },
         "dragging": false,
         "height": 753,
-        "id": "AstraDB-7nAHJ",
+        "id": "AstraDB-xVF1f",
         "position": {
           "x": 1246.0381406498648,
           "y": 333.25157075413966
@@ -878,437 +885,7 @@
       },
       {
         "data": {
-          "id": "OpenAIEmbeddings-BKXc6",
-          "node": {
-            "base_classes": [
-              "Embeddings"
-            ],
-            "beta": false,
-            "conditional_paths": [],
-            "custom_fields": {},
-            "description": "Generate embeddings using OpenAI models.",
-            "display_name": "OpenAI Embeddings",
-            "documentation": "",
-            "edited": false,
-            "field_order": [
-              "default_headers",
-              "default_query",
-              "chunk_size",
-              "client",
-              "deployment",
-              "embedding_ctx_length",
-              "max_retries",
-              "model",
-              "model_kwargs",
-              "openai_api_base",
-              "openai_api_key",
-              "openai_api_type",
-              "openai_api_version",
-              "openai_organization",
-              "openai_proxy",
-              "request_timeout",
-              "show_progress_bar",
-              "skip_empty",
-              "tiktoken_model_name",
-              "tiktoken_enable"
-            ],
-            "frozen": false,
-            "icon": "OpenAI",
-            "output_types": [],
-            "outputs": [
-              {
-                "cache": true,
-                "display_name": "Embeddings",
-                "hidden": false,
-                "method": "build_embeddings",
-                "name": "embeddings",
-                "selected": "Embeddings",
-                "types": [
-                  "Embeddings"
-                ],
-                "value": "__UNDEFINED__"
-              }
-            ],
-            "pinned": false,
-            "template": {
-              "_type": "Component",
-              "chunk_size": {
-                "advanced": true,
-                "display_name": "Chunk Size",
-                "dynamic": false,
-                "info": "",
-                "list": false,
-                "name": "chunk_size",
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "trace_as_metadata": true,
-                "type": "int",
-                "value": 1000
-              },
-              "client": {
-                "advanced": true,
-                "display_name": "Client",
-                "dynamic": false,
-                "info": "",
-                "input_types": [
-                  "Message"
-                ],
-                "list": false,
-                "load_from_db": false,
-                "name": "client",
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "trace_as_input": true,
-                "trace_as_metadata": true,
-                "type": "str",
-                "value": ""
-              },
-              "code": {
-                "advanced": true,
-                "dynamic": true,
-                "fileTypes": [],
-                "file_path": "",
-                "info": "",
-                "list": false,
-                "load_from_db": false,
-                "multiline": true,
-                "name": "code",
-                "password": false,
-                "placeholder": "",
-                "required": true,
-                "show": true,
-                "title_case": false,
-                "type": "code",
-                "value": "from langchain_openai.embeddings.base import OpenAIEmbeddings\n\nfrom langflow.base.embeddings.model import LCEmbeddingsModel\nfrom langflow.field_typing import Embeddings\nfrom langflow.io import BoolInput, DictInput, DropdownInput, FloatInput, IntInput, MessageTextInput, SecretStrInput\n\n\nclass OpenAIEmbeddingsComponent(LCEmbeddingsModel):\n    display_name = \"OpenAI Embeddings\"\n    description = \"Generate embeddings using OpenAI models.\"\n    icon = \"OpenAI\"\n    inputs = [\n        DictInput(\n            name=\"default_headers\",\n            display_name=\"Default Headers\",\n            advanced=True,\n            info=\"Default headers to use for the API request.\",\n        ),\n        DictInput(\n            name=\"default_query\",\n            display_name=\"Default Query\",\n            advanced=True,\n            info=\"Default query parameters to use for the API request.\",\n        ),\n        IntInput(name=\"chunk_size\", display_name=\"Chunk Size\", advanced=True, value=1000),\n        MessageTextInput(name=\"client\", display_name=\"Client\", advanced=True),\n        MessageTextInput(name=\"deployment\", display_name=\"Deployment\", advanced=True),\n        IntInput(name=\"embedding_ctx_length\", display_name=\"Embedding Context Length\", advanced=True, value=1536),\n        IntInput(name=\"max_retries\", display_name=\"Max Retries\", value=3, advanced=True),\n        DropdownInput(\n            name=\"model\",\n            display_name=\"Model\",\n            advanced=False,\n            options=[\n                \"text-embedding-3-small\",\n                \"text-embedding-3-large\",\n                \"text-embedding-ada-002\",\n            ],\n            value=\"text-embedding-3-small\",\n        ),\n        DictInput(name=\"model_kwargs\", display_name=\"Model Kwargs\", advanced=True),\n        SecretStrInput(name=\"openai_api_base\", display_name=\"OpenAI API Base\", advanced=True),\n        SecretStrInput(name=\"openai_api_key\", display_name=\"OpenAI API Key\"),\n        SecretStrInput(name=\"openai_api_type\", display_name=\"OpenAI API Type\", advanced=True),\n        MessageTextInput(name=\"openai_api_version\", display_name=\"OpenAI API Version\", advanced=True),\n        MessageTextInput(\n            name=\"openai_organization\",\n            display_name=\"OpenAI Organization\",\n            advanced=True,\n        ),\n        MessageTextInput(name=\"openai_proxy\", display_name=\"OpenAI Proxy\", advanced=True),\n        FloatInput(name=\"request_timeout\", display_name=\"Request Timeout\", advanced=True),\n        BoolInput(name=\"show_progress_bar\", display_name=\"Show Progress Bar\", advanced=True),\n        BoolInput(name=\"skip_empty\", display_name=\"Skip Empty\", advanced=True),\n        MessageTextInput(\n            name=\"tiktoken_model_name\",\n            display_name=\"TikToken Model Name\",\n            advanced=True,\n        ),\n        BoolInput(\n            name=\"tiktoken_enable\",\n            display_name=\"TikToken Enable\",\n            advanced=True,\n            value=True,\n            info=\"If False, you must have transformers installed.\",\n        ),\n    ]\n\n    def build_embeddings(self) -> Embeddings:\n        return OpenAIEmbeddings(\n            tiktoken_enabled=self.tiktoken_enable,\n            default_headers=self.default_headers,\n            default_query=self.default_query,\n            allowed_special=\"all\",\n            disallowed_special=\"all\",\n            chunk_size=self.chunk_size,\n            deployment=self.deployment,\n            embedding_ctx_length=self.embedding_ctx_length,\n            max_retries=self.max_retries,\n            model=self.model,\n            model_kwargs=self.model_kwargs,\n            base_url=self.openai_api_base,\n            api_key=self.openai_api_key,\n            openai_api_type=self.openai_api_type,\n            api_version=self.openai_api_version,\n            organization=self.openai_organization,\n            openai_proxy=self.openai_proxy,\n            timeout=self.request_timeout or None,\n            show_progress_bar=self.show_progress_bar,\n            skip_empty=self.skip_empty,\n            tiktoken_model_name=self.tiktoken_model_name,\n        )\n"
-              },
-              "default_headers": {
-                "advanced": true,
-                "display_name": "Default Headers",
-                "dynamic": false,
-                "info": "Default headers to use for the API request.",
-                "list": false,
-                "name": "default_headers",
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "trace_as_input": true,
-                "type": "dict",
-                "value": {}
-              },
-              "default_query": {
-                "advanced": true,
-                "display_name": "Default Query",
-                "dynamic": false,
-                "info": "Default query parameters to use for the API request.",
-                "list": false,
-                "name": "default_query",
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "trace_as_input": true,
-                "type": "dict",
-                "value": {}
-              },
-              "deployment": {
-                "advanced": true,
-                "display_name": "Deployment",
-                "dynamic": false,
-                "info": "",
-                "input_types": [
-                  "Message"
-                ],
-                "list": false,
-                "load_from_db": false,
-                "name": "deployment",
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "trace_as_input": true,
-                "trace_as_metadata": true,
-                "type": "str",
-                "value": ""
-              },
-              "embedding_ctx_length": {
-                "advanced": true,
-                "display_name": "Embedding Context Length",
-                "dynamic": false,
-                "info": "",
-                "list": false,
-                "name": "embedding_ctx_length",
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "trace_as_metadata": true,
-                "type": "int",
-                "value": 1536
-              },
-              "max_retries": {
-                "advanced": true,
-                "display_name": "Max Retries",
-                "dynamic": false,
-                "info": "",
-                "list": false,
-                "name": "max_retries",
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "trace_as_metadata": true,
-                "type": "int",
-                "value": 3
-              },
-              "model": {
-                "advanced": false,
-                "display_name": "Model",
-                "dynamic": false,
-                "info": "",
-                "name": "model",
-                "options": [
-                  "text-embedding-3-small",
-                  "text-embedding-3-large",
-                  "text-embedding-ada-002"
-                ],
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "trace_as_metadata": true,
-                "type": "str",
-                "value": "text-embedding-3-small"
-              },
-              "model_kwargs": {
-                "advanced": true,
-                "display_name": "Model Kwargs",
-                "dynamic": false,
-                "info": "",
-                "list": false,
-                "name": "model_kwargs",
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "trace_as_input": true,
-                "type": "dict",
-                "value": {}
-              },
-              "openai_api_base": {
-                "advanced": true,
-                "display_name": "OpenAI API Base",
-                "dynamic": false,
-                "info": "",
-                "input_types": [],
-                "load_from_db": true,
-                "name": "openai_api_base",
-                "password": true,
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "type": "str",
-                "value": ""
-              },
-              "openai_api_key": {
-                "advanced": false,
-                "display_name": "OpenAI API Key",
-                "dynamic": false,
-                "info": "",
-                "input_types": [],
-                "load_from_db": false,
-                "name": "openai_api_key",
-                "password": true,
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "type": "str",
-                "value": ""
-              },
-              "openai_api_type": {
-                "advanced": true,
-                "display_name": "OpenAI API Type",
-                "dynamic": false,
-                "info": "",
-                "input_types": [],
-                "load_from_db": true,
-                "name": "openai_api_type",
-                "password": true,
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "type": "str",
-                "value": ""
-              },
-              "openai_api_version": {
-                "advanced": true,
-                "display_name": "OpenAI API Version",
-                "dynamic": false,
-                "info": "",
-                "input_types": [
-                  "Message"
-                ],
-                "list": false,
-                "load_from_db": false,
-                "name": "openai_api_version",
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "trace_as_input": true,
-                "trace_as_metadata": true,
-                "type": "str",
-                "value": ""
-              },
-              "openai_organization": {
-                "advanced": true,
-                "display_name": "OpenAI Organization",
-                "dynamic": false,
-                "info": "",
-                "input_types": [
-                  "Message"
-                ],
-                "list": false,
-                "load_from_db": false,
-                "name": "openai_organization",
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "trace_as_input": true,
-                "trace_as_metadata": true,
-                "type": "str",
-                "value": ""
-              },
-              "openai_proxy": {
-                "advanced": true,
-                "display_name": "OpenAI Proxy",
-                "dynamic": false,
-                "info": "",
-                "input_types": [
-                  "Message"
-                ],
-                "list": false,
-                "load_from_db": false,
-                "name": "openai_proxy",
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "trace_as_input": true,
-                "trace_as_metadata": true,
-                "type": "str",
-                "value": ""
-              },
-              "request_timeout": {
-                "advanced": true,
-                "display_name": "Request Timeout",
-                "dynamic": false,
-                "info": "",
-                "list": false,
-                "name": "request_timeout",
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "trace_as_metadata": true,
-                "type": "float",
-                "value": ""
-              },
-              "show_progress_bar": {
-                "advanced": true,
-                "display_name": "Show Progress Bar",
-                "dynamic": false,
-                "info": "",
-                "list": false,
-                "name": "show_progress_bar",
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "trace_as_metadata": true,
-                "type": "bool",
-                "value": false
-              },
-              "skip_empty": {
-                "advanced": true,
-                "display_name": "Skip Empty",
-                "dynamic": false,
-                "info": "",
-                "list": false,
-                "name": "skip_empty",
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "trace_as_metadata": true,
-                "type": "bool",
-                "value": false
-              },
-              "tiktoken_enable": {
-                "advanced": true,
-                "display_name": "TikToken Enable",
-                "dynamic": false,
-                "info": "If False, you must have transformers installed.",
-                "list": false,
-                "name": "tiktoken_enable",
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "trace_as_metadata": true,
-                "type": "bool",
-                "value": true
-              },
-              "tiktoken_model_name": {
-                "advanced": true,
-                "display_name": "TikToken Model Name",
-                "dynamic": false,
-                "info": "",
-                "input_types": [
-                  "Message"
-                ],
-                "list": false,
-                "load_from_db": false,
-                "name": "tiktoken_model_name",
-                "placeholder": "",
-                "required": false,
-                "show": true,
-                "title_case": false,
-                "trace_as_input": true,
-                "trace_as_metadata": true,
-                "type": "str",
-                "value": ""
-              }
-            }
-          },
-          "type": "OpenAIEmbeddings"
-        },
-        "dragging": false,
-        "height": 394,
-        "id": "OpenAIEmbeddings-BKXc6",
-        "position": {
-          "x": 603.2488770584523,
-          "y": 661.6162066128852
-        },
-        "positionAbsolute": {
-          "x": 603.2488770584523,
-          "y": 661.6162066128852
-        },
-        "selected": false,
-        "type": "genericNode",
-        "width": 384
-      },
-      {
-        "data": {
-          "id": "ParseData-d61Q0",
+          "id": "ParseData-ZG3Aa",
           "node": {
             "base_classes": [
               "Message"
@@ -1425,7 +1002,7 @@
         },
         "dragging": false,
         "height": 384,
-        "id": "ParseData-d61Q0",
+        "id": "ParseData-ZG3Aa",
         "position": {
           "x": 1854.1518317915907,
           "y": 459.3386924128532
@@ -1442,7 +1019,7 @@
         "data": {
           "description": "Create a prompt template with dynamic variables.",
           "display_name": "Prompt",
-          "id": "Prompt-vqAlG",
+          "id": "Prompt-0Hp9v",
           "node": {
             "base_classes": [
               "Message"
@@ -1575,7 +1152,7 @@
         },
         "dragging": false,
         "height": 515,
-        "id": "Prompt-vqAlG",
+        "id": "Prompt-0Hp9v",
         "position": {
           "x": 2486.0988668404975,
           "y": 496.5120474157301
@@ -1590,7 +1167,10 @@
       },
       {
         "data": {
-          "id": "OpenAIModel-ybL3k",
+          "description": "Generates text using OpenAI LLMs.",
+          "display_name": "OpenAI",
+          "edited": false,
+          "id": "OpenAIModel-BQXFs",
           "node": {
             "base_classes": [
               "LanguageModel",
@@ -1602,11 +1182,12 @@
             "description": "Generates text using OpenAI LLMs.",
             "display_name": "OpenAI",
             "documentation": "",
-            "edited": false,
+            "edited": true,
             "field_order": [
               "input_value",
               "max_tokens",
               "model_kwargs",
+              "json_mode",
               "output_schema",
               "model_name",
               "openai_api_base",
@@ -1663,7 +1244,7 @@
                 "show": true,
                 "title_case": false,
                 "type": "code",
-                "value": "import operator\nfrom functools import reduce\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import LanguageModel\nfrom langflow.inputs import (\n    BoolInput,\n    DictInput,\n    DropdownInput,\n    FloatInput,\n    IntInput,\n    MessageInput,\n    SecretStrInput,\n    StrInput,\n)\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    inputs = [\n        MessageInput(name=\"input_value\", display_name=\"Input\"),\n        IntInput(\n            name=\"max_tokens\",\n            display_name=\"Max Tokens\",\n            advanced=True,\n            info=\"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n        ),\n        DictInput(name=\"model_kwargs\", display_name=\"Model Kwargs\", advanced=True),\n        DictInput(\n            name=\"output_schema\",\n            is_list=True,\n            display_name=\"Schema\",\n            advanced=True,\n            info=\"The schema for the Output of the model. You must pass the word JSON in the prompt. If left blank, JSON mode will be disabled.\",\n        ),\n        DropdownInput(\n            name=\"model_name\", display_name=\"Model Name\", advanced=False, options=MODEL_NAMES, value=MODEL_NAMES[0]\n        ),\n        StrInput(\n            name=\"openai_api_base\",\n            display_name=\"OpenAI API Base\",\n            advanced=True,\n            info=\"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1. You can change this to use other APIs like JinaChat, LocalAI and Prem.\",\n        ),\n        SecretStrInput(\n            name=\"openai_api_key\",\n            display_name=\"OpenAI API Key\",\n            info=\"The OpenAI API Key to use for the OpenAI model.\",\n            advanced=False,\n            value=\"OPENAI_API_KEY\",\n        ),\n        FloatInput(name=\"temperature\", display_name=\"Temperature\", value=0.1),\n        BoolInput(name=\"stream\", display_name=\"Stream\", info=STREAM_INFO_TEXT, advanced=True),\n        StrInput(\n            name=\"system_message\",\n            display_name=\"System Message\",\n            info=\"System message to pass to the model.\",\n            advanced=True,\n        ),\n        IntInput(\n            name=\"seed\",\n            display_name=\"Seed\",\n            info=\"The seed controls the reproducibility of the job.\",\n            advanced=True,\n            value=1,\n        ),\n    ]\n\n    def build_model(self) -> LanguageModel:\n        # self.output_schea is a list of dictionaries\n        # let's convert it to a dictionary\n        output_schema_dict: dict[str, str] = reduce(operator.ior, self.output_schema or {}, {})\n        openai_api_key = self.openai_api_key\n        temperature = self.temperature\n        model_name: str = self.model_name\n        max_tokens = self.max_tokens\n        model_kwargs = self.model_kwargs or {}\n        openai_api_base = self.openai_api_base or \"https://api.openai.com/v1\"\n        json_mode = bool(output_schema_dict)\n        seed = self.seed\n        model_kwargs[\"seed\"] = seed\n\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature or 0.1,\n        )\n        if json_mode:\n            output = output.with_structured_output(schema=output_schema_dict, method=\"json_mode\")  # type: ignore\n\n        return output\n\n    def _get_exception_message(self, e: Exception):\n        \"\"\"\n        Get a message from an OpenAI exception.\n\n        Args:\n            exception (Exception): The exception to get the message from.\n\n        Returns:\n            str: The message from the exception.\n        \"\"\"\n\n        try:\n            from openai import BadRequestError\n        except ImportError:\n            return\n        if isinstance(e, BadRequestError):\n            message = e.body.get(\"message\")  # type: ignore\n            if message:\n                return message\n        return\n"
+                "value": "import operator\nfrom functools import reduce\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import LanguageModel\nfrom langflow.inputs import (\n    BoolInput,\n    DictInput,\n    DropdownInput,\n    FloatInput,\n    IntInput,\n    MessageInput,\n    SecretStrInput,\n    StrInput,\n)\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    inputs = [\n        MessageInput(name=\"input_value\", display_name=\"Input\"),\n        IntInput(\n            name=\"max_tokens\",\n            display_name=\"Max Tokens\",\n            advanced=True,\n            info=\"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n        ),\n        DictInput(name=\"model_kwargs\", display_name=\"Model Kwargs\", advanced=True),\n        BoolInput(\n            name=\"json_mode\",\n            display_name=\"JSON Mode\",\n            advanced=True,\n            info=\"If True, it will output JSON regardless of passing a schema.\",\n        ),\n        DictInput(\n            name=\"output_schema\",\n            is_list=True,\n            display_name=\"Schema\",\n            advanced=True,\n            info=\"The schema for the Output of the model. You must pass the word JSON in the prompt. If left blank, JSON mode will be disabled.\",\n        ),\n        DropdownInput(\n            name=\"model_name\", display_name=\"Model Name\", advanced=False, options=MODEL_NAMES, value=MODEL_NAMES[0]\n        ),\n        StrInput(\n            name=\"openai_api_base\",\n            display_name=\"OpenAI API Base\",\n            advanced=True,\n            info=\"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1. You can change this to use other APIs like JinaChat, LocalAI and Prem.\",\n        ),\n        SecretStrInput(\n            name=\"openai_api_key\",\n            display_name=\"OpenAI API Key\",\n            info=\"The OpenAI API Key to use for the OpenAI model.\",\n            advanced=False,\n            value=\"OPENAI_API_KEY\",\n        ),\n        FloatInput(name=\"temperature\", display_name=\"Temperature\", value=0.1),\n        BoolInput(name=\"stream\", display_name=\"Stream\", info=STREAM_INFO_TEXT, advanced=True),\n        StrInput(\n            name=\"system_message\",\n            display_name=\"System Message\",\n            info=\"System message to pass to the model.\",\n            advanced=True,\n        ),\n        IntInput(\n            name=\"seed\",\n            display_name=\"Seed\",\n            info=\"The seed controls the reproducibility of the job.\",\n            advanced=True,\n            value=1,\n        ),\n    ]\n\n    def build_model(self) -> LanguageModel:\n        # self.output_schea is a list of dictionaries\n        # let's convert it to a dictionary\n        output_schema_dict: dict[str, str] = reduce(operator.ior, self.output_schema or {}, {})\n        openai_api_key = self.openai_api_key\n        temperature = self.temperature\n        model_name: str = self.model_name\n        max_tokens = self.max_tokens\n        model_kwargs = self.model_kwargs or {}\n        openai_api_base = self.openai_api_base or \"https://api.openai.com/v1\"\n        json_mode = bool(output_schema_dict) or self.json_mode\n        seed = self.seed\n        model_kwargs[\"seed\"] = seed\n\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature or 0.1,\n        )\n        if json_mode:\n            if output_schema_dict:\n                output = output.with_structured_output(schema=output_schema_dict, method=\"json_mode\")  # type: ignore\n            else:\n                output = output.bind(response_format={\"type\": \"json_object\"})  # type: ignore\n\n        return output\n\n    def _get_exception_message(self, e: Exception):\n        \"\"\"\n        Get a message from an OpenAI exception.\n\n        Args:\n            exception (Exception): The exception to get the message from.\n\n        Returns:\n            str: The message from the exception.\n        \"\"\"\n\n        try:\n            from openai import BadRequestError\n        except ImportError:\n            return\n        if isinstance(e, BadRequestError):\n            message = e.body.get(\"message\")  # type: ignore\n            if message:\n                return message\n        return\n"
               },
               "input_value": {
                 "advanced": false,
@@ -1685,6 +1266,21 @@
                 "type": "str",
                 "value": ""
               },
+              "json_mode": {
+                "advanced": true,
+                "display_name": "JSON Mode",
+                "dynamic": false,
+                "info": "If True, it will output JSON regardless of passing a schema.",
+                "list": false,
+                "name": "json_mode",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_metadata": true,
+                "type": "bool",
+                "value": false
+              },
               "max_tokens": {
                 "advanced": true,
                 "display_name": "Max Tokens",
@@ -1758,7 +1354,7 @@
                 "dynamic": false,
                 "info": "The OpenAI API Key to use for the OpenAI model.",
                 "input_types": [],
-                "load_from_db": false,
+                "load_from_db": true,
                 "name": "openai_api_key",
                 "password": true,
                 "placeholder": "",
@@ -1766,7 +1362,7 @@
                 "show": true,
                 "title_case": false,
                 "type": "str",
-                "value": ""
+                "value": "OPENAI_API_KEY"
               },
               "output_schema": {
                 "advanced": true,
@@ -1846,11 +1442,11 @@
               }
             }
           },
-          "type": "OpenAIModel"
+          "type": "OpenAIModelComponent"
         },
         "dragging": false,
         "height": 621,
-        "id": "OpenAIModel-ybL3k",
+        "id": "OpenAIModel-BQXFs",
         "position": {
           "x": 3145.6693008609222,
           "y": 374.23955005474204
@@ -1865,7 +1461,7 @@
       },
       {
         "data": {
-          "id": "ChatOutput-BpzuD",
+          "id": "ChatOutput-fDyGT",
           "node": {
             "base_classes": [
               "Message"
@@ -2025,7 +1621,7 @@
         },
         "dragging": false,
         "height": 308,
-        "id": "ChatOutput-BpzuD",
+        "id": "ChatOutput-fDyGT",
         "position": {
           "x": 3769.242086248817,
           "y": 585.3403837062634
@@ -2040,7 +1636,7 @@
       },
       {
         "data": {
-          "id": "SplitText-52wBo",
+          "id": "SplitText-RkdZ3",
           "node": {
             "base_classes": [
               "Data"
@@ -2170,7 +1766,7 @@
         },
         "dragging": false,
         "height": 527,
-        "id": "SplitText-52wBo",
+        "id": "SplitText-RkdZ3",
         "position": {
           "x": 2044.2799160989089,
           "y": 1185.3130355818519
@@ -2185,7 +1781,7 @@
       },
       {
         "data": {
-          "id": "File-bf6wn",
+          "id": "File-BTJVJ",
           "node": {
             "base_classes": [
               "Data"
@@ -2296,7 +1892,7 @@
         },
         "dragging": false,
         "height": 300,
-        "id": "File-bf6wn",
+        "id": "File-BTJVJ",
         "position": {
           "x": 1418.981990122179,
           "y": 1539.3825691184466
@@ -2311,7 +1907,7 @@
       },
       {
         "data": {
-          "id": "AstraDB-vyd5U",
+          "id": "AstraDB-XXizY",
           "node": {
             "base_classes": [
               "Data",
@@ -2716,7 +2312,7 @@
         },
         "dragging": false,
         "height": 753,
-        "id": "AstraDB-vyd5U",
+        "id": "AstraDB-XXizY",
         "position": {
           "x": 2676.4816074350247,
           "y": 1269.304067004569
@@ -2731,7 +2327,7 @@
       },
       {
         "data": {
-          "id": "OpenAIEmbeddings-sRZMc",
+          "id": "OpenAIEmbeddings-fpOKp",
           "node": {
             "base_classes": [
               "Embeddings"
@@ -2836,7 +2432,7 @@
                 "show": true,
                 "title_case": false,
                 "type": "code",
-                "value": "from langchain_openai.embeddings.base import OpenAIEmbeddings\n\nfrom langflow.base.embeddings.model import LCEmbeddingsModel\nfrom langflow.field_typing import Embeddings\nfrom langflow.io import BoolInput, DictInput, DropdownInput, FloatInput, IntInput, MessageTextInput, SecretStrInput\n\n\nclass OpenAIEmbeddingsComponent(LCEmbeddingsModel):\n    display_name = \"OpenAI Embeddings\"\n    description = \"Generate embeddings using OpenAI models.\"\n    icon = \"OpenAI\"\n    inputs = [\n        DictInput(\n            name=\"default_headers\",\n            display_name=\"Default Headers\",\n            advanced=True,\n            info=\"Default headers to use for the API request.\",\n        ),\n        DictInput(\n            name=\"default_query\",\n            display_name=\"Default Query\",\n            advanced=True,\n            info=\"Default query parameters to use for the API request.\",\n        ),\n        IntInput(name=\"chunk_size\", display_name=\"Chunk Size\", advanced=True, value=1000),\n        MessageTextInput(name=\"client\", display_name=\"Client\", advanced=True),\n        MessageTextInput(name=\"deployment\", display_name=\"Deployment\", advanced=True),\n        IntInput(name=\"embedding_ctx_length\", display_name=\"Embedding Context Length\", advanced=True, value=1536),\n        IntInput(name=\"max_retries\", display_name=\"Max Retries\", value=3, advanced=True),\n        DropdownInput(\n            name=\"model\",\n            display_name=\"Model\",\n            advanced=False,\n            options=[\n                \"text-embedding-3-small\",\n                \"text-embedding-3-large\",\n                \"text-embedding-ada-002\",\n            ],\n            value=\"text-embedding-3-small\",\n        ),\n        DictInput(name=\"model_kwargs\", display_name=\"Model Kwargs\", advanced=True),\n        SecretStrInput(name=\"openai_api_base\", display_name=\"OpenAI API Base\", advanced=True),\n        SecretStrInput(name=\"openai_api_key\", display_name=\"OpenAI API Key\"),\n        SecretStrInput(name=\"openai_api_type\", display_name=\"OpenAI API Type\", advanced=True),\n        MessageTextInput(name=\"openai_api_version\", display_name=\"OpenAI API Version\", advanced=True),\n        MessageTextInput(\n            name=\"openai_organization\",\n            display_name=\"OpenAI Organization\",\n            advanced=True,\n        ),\n        MessageTextInput(name=\"openai_proxy\", display_name=\"OpenAI Proxy\", advanced=True),\n        FloatInput(name=\"request_timeout\", display_name=\"Request Timeout\", advanced=True),\n        BoolInput(name=\"show_progress_bar\", display_name=\"Show Progress Bar\", advanced=True),\n        BoolInput(name=\"skip_empty\", display_name=\"Skip Empty\", advanced=True),\n        MessageTextInput(\n            name=\"tiktoken_model_name\",\n            display_name=\"TikToken Model Name\",\n            advanced=True,\n        ),\n        BoolInput(\n            name=\"tiktoken_enable\",\n            display_name=\"TikToken Enable\",\n            advanced=True,\n            value=True,\n            info=\"If False, you must have transformers installed.\",\n        ),\n    ]\n\n    def build_embeddings(self) -> Embeddings:\n        return OpenAIEmbeddings(\n            tiktoken_enabled=self.tiktoken_enable,\n            default_headers=self.default_headers,\n            default_query=self.default_query,\n            allowed_special=\"all\",\n            disallowed_special=\"all\",\n            chunk_size=self.chunk_size,\n            deployment=self.deployment,\n            embedding_ctx_length=self.embedding_ctx_length,\n            max_retries=self.max_retries,\n            model=self.model,\n            model_kwargs=self.model_kwargs,\n            base_url=self.openai_api_base,\n            api_key=self.openai_api_key,\n            openai_api_type=self.openai_api_type,\n            api_version=self.openai_api_version,\n            organization=self.openai_organization,\n            openai_proxy=self.openai_proxy,\n            timeout=self.request_timeout or None,\n            show_progress_bar=self.show_progress_bar,\n            skip_empty=self.skip_empty,\n            tiktoken_model_name=self.tiktoken_model_name,\n        )\n"
+                "value": "from langchain_openai.embeddings.base import OpenAIEmbeddings\n\nfrom langflow.base.embeddings.model import LCEmbeddingsModel\nfrom langflow.field_typing import Embeddings\nfrom langflow.io import BoolInput, DictInput, DropdownInput, FloatInput, IntInput, MessageTextInput, SecretStrInput\n\n\nclass OpenAIEmbeddingsComponent(LCEmbeddingsModel):\n    display_name = \"OpenAI Embeddings\"\n    description = \"Generate embeddings using OpenAI models.\"\n    icon = \"OpenAI\"\n    inputs = [\n        DictInput(\n            name=\"default_headers\",\n            display_name=\"Default Headers\",\n            advanced=True,\n            info=\"Default headers to use for the API request.\",\n        ),\n        DictInput(\n            name=\"default_query\",\n            display_name=\"Default Query\",\n            advanced=True,\n            info=\"Default query parameters to use for the API request.\",\n        ),\n        IntInput(name=\"chunk_size\", display_name=\"Chunk Size\", advanced=True, value=1000),\n        MessageTextInput(name=\"client\", display_name=\"Client\", advanced=True),\n        MessageTextInput(name=\"deployment\", display_name=\"Deployment\", advanced=True),\n        IntInput(name=\"embedding_ctx_length\", display_name=\"Embedding Context Length\", advanced=True, value=1536),\n        IntInput(name=\"max_retries\", display_name=\"Max Retries\", value=3, advanced=True),\n        DropdownInput(\n            name=\"model\",\n            display_name=\"Model\",\n            advanced=False,\n            options=[\n                \"text-embedding-3-small\",\n                \"text-embedding-3-large\",\n                \"text-embedding-ada-002\",\n            ],\n            value=\"text-embedding-3-small\",\n        ),\n        DictInput(name=\"model_kwargs\", display_name=\"Model Kwargs\", advanced=True),\n        SecretStrInput(name=\"openai_api_base\", display_name=\"OpenAI API Base\", advanced=True),\n        SecretStrInput(name=\"openai_api_key\", display_name=\"OpenAI API Key\", value=\"OPENAI_API_KEY\"),\n        SecretStrInput(name=\"openai_api_type\", display_name=\"OpenAI API Type\", advanced=True),\n        MessageTextInput(name=\"openai_api_version\", display_name=\"OpenAI API Version\", advanced=True),\n        MessageTextInput(\n            name=\"openai_organization\",\n            display_name=\"OpenAI Organization\",\n            advanced=True,\n        ),\n        MessageTextInput(name=\"openai_proxy\", display_name=\"OpenAI Proxy\", advanced=True),\n        FloatInput(name=\"request_timeout\", display_name=\"Request Timeout\", advanced=True),\n        BoolInput(name=\"show_progress_bar\", display_name=\"Show Progress Bar\", advanced=True),\n        BoolInput(name=\"skip_empty\", display_name=\"Skip Empty\", advanced=True),\n        MessageTextInput(\n            name=\"tiktoken_model_name\",\n            display_name=\"TikToken Model Name\",\n            advanced=True,\n        ),\n        BoolInput(\n            name=\"tiktoken_enable\",\n            display_name=\"TikToken Enable\",\n            advanced=True,\n            value=True,\n            info=\"If False, you must have transformers installed.\",\n        ),\n    ]\n\n    def build_embeddings(self) -> Embeddings:\n        return OpenAIEmbeddings(\n            tiktoken_enabled=self.tiktoken_enable,\n            default_headers=self.default_headers,\n            default_query=self.default_query,\n            allowed_special=\"all\",\n            disallowed_special=\"all\",\n            chunk_size=self.chunk_size,\n            deployment=self.deployment,\n            embedding_ctx_length=self.embedding_ctx_length,\n            max_retries=self.max_retries,\n            model=self.model,\n            model_kwargs=self.model_kwargs,\n            base_url=self.openai_api_base,\n            api_key=self.openai_api_key,\n            openai_api_type=self.openai_api_type,\n            api_version=self.openai_api_version,\n            organization=self.openai_organization,\n            openai_proxy=self.openai_proxy,\n            timeout=self.request_timeout or None,\n            show_progress_bar=self.show_progress_bar,\n            skip_empty=self.skip_empty,\n            tiktoken_model_name=self.tiktoken_model_name,\n        )\n"
               },
               "default_headers": {
                 "advanced": true,
@@ -2958,7 +2554,7 @@
                 "dynamic": false,
                 "info": "",
                 "input_types": [],
-                "load_from_db": true,
+                "load_from_db": false,
                 "name": "openai_api_base",
                 "password": true,
                 "placeholder": "",
@@ -2974,7 +2570,7 @@
                 "dynamic": false,
                 "info": "",
                 "input_types": [],
-                "load_from_db": false,
+                "load_from_db": true,
                 "name": "openai_api_key",
                 "password": true,
                 "placeholder": "",
@@ -2982,7 +2578,7 @@
                 "show": true,
                 "title_case": false,
                 "type": "str",
-                "value": ""
+                "value": "OPENAI_API_KEY"
               },
               "openai_api_type": {
                 "advanced": true,
@@ -2990,7 +2586,7 @@
                 "dynamic": false,
                 "info": "",
                 "input_types": [],
-                "load_from_db": true,
+                "load_from_db": false,
                 "name": "openai_api_type",
                 "password": true,
                 "placeholder": "",
@@ -3146,14 +2742,444 @@
         },
         "dragging": false,
         "height": 394,
-        "id": "OpenAIEmbeddings-sRZMc",
+        "id": "OpenAIEmbeddings-fpOKp",
         "position": {
-          "x": 2050.0569098721217,
-          "y": 1823.5240486490072
+          "x": 2044.683126356786,
+          "y": 1785.2283494456522
         },
         "positionAbsolute": {
-          "x": 2050.0569098721217,
-          "y": 1823.5240486490072
+          "x": 2044.683126356786,
+          "y": 1785.2283494456522
+        },
+        "selected": false,
+        "type": "genericNode",
+        "width": 384
+      },
+      {
+        "data": {
+          "id": "OpenAIEmbeddings-lCQlU",
+          "node": {
+            "base_classes": [
+              "Embeddings"
+            ],
+            "beta": false,
+            "conditional_paths": [],
+            "custom_fields": {},
+            "description": "Generate embeddings using OpenAI models.",
+            "display_name": "OpenAI Embeddings",
+            "documentation": "",
+            "edited": false,
+            "field_order": [
+              "default_headers",
+              "default_query",
+              "chunk_size",
+              "client",
+              "deployment",
+              "embedding_ctx_length",
+              "max_retries",
+              "model",
+              "model_kwargs",
+              "openai_api_base",
+              "openai_api_key",
+              "openai_api_type",
+              "openai_api_version",
+              "openai_organization",
+              "openai_proxy",
+              "request_timeout",
+              "show_progress_bar",
+              "skip_empty",
+              "tiktoken_model_name",
+              "tiktoken_enable"
+            ],
+            "frozen": false,
+            "icon": "OpenAI",
+            "output_types": [],
+            "outputs": [
+              {
+                "cache": true,
+                "display_name": "Embeddings",
+                "hidden": false,
+                "method": "build_embeddings",
+                "name": "embeddings",
+                "selected": "Embeddings",
+                "types": [
+                  "Embeddings"
+                ],
+                "value": "__UNDEFINED__"
+              }
+            ],
+            "pinned": false,
+            "template": {
+              "_type": "Component",
+              "chunk_size": {
+                "advanced": true,
+                "display_name": "Chunk Size",
+                "dynamic": false,
+                "info": "",
+                "list": false,
+                "name": "chunk_size",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_metadata": true,
+                "type": "int",
+                "value": 1000
+              },
+              "client": {
+                "advanced": true,
+                "display_name": "Client",
+                "dynamic": false,
+                "info": "",
+                "input_types": [
+                  "Message"
+                ],
+                "list": false,
+                "load_from_db": false,
+                "name": "client",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_input": true,
+                "trace_as_metadata": true,
+                "type": "str",
+                "value": ""
+              },
+              "code": {
+                "advanced": true,
+                "dynamic": true,
+                "fileTypes": [],
+                "file_path": "",
+                "info": "",
+                "list": false,
+                "load_from_db": false,
+                "multiline": true,
+                "name": "code",
+                "password": false,
+                "placeholder": "",
+                "required": true,
+                "show": true,
+                "title_case": false,
+                "type": "code",
+                "value": "from langchain_openai.embeddings.base import OpenAIEmbeddings\n\nfrom langflow.base.embeddings.model import LCEmbeddingsModel\nfrom langflow.field_typing import Embeddings\nfrom langflow.io import BoolInput, DictInput, DropdownInput, FloatInput, IntInput, MessageTextInput, SecretStrInput\n\n\nclass OpenAIEmbeddingsComponent(LCEmbeddingsModel):\n    display_name = \"OpenAI Embeddings\"\n    description = \"Generate embeddings using OpenAI models.\"\n    icon = \"OpenAI\"\n    inputs = [\n        DictInput(\n            name=\"default_headers\",\n            display_name=\"Default Headers\",\n            advanced=True,\n            info=\"Default headers to use for the API request.\",\n        ),\n        DictInput(\n            name=\"default_query\",\n            display_name=\"Default Query\",\n            advanced=True,\n            info=\"Default query parameters to use for the API request.\",\n        ),\n        IntInput(name=\"chunk_size\", display_name=\"Chunk Size\", advanced=True, value=1000),\n        MessageTextInput(name=\"client\", display_name=\"Client\", advanced=True),\n        MessageTextInput(name=\"deployment\", display_name=\"Deployment\", advanced=True),\n        IntInput(name=\"embedding_ctx_length\", display_name=\"Embedding Context Length\", advanced=True, value=1536),\n        IntInput(name=\"max_retries\", display_name=\"Max Retries\", value=3, advanced=True),\n        DropdownInput(\n            name=\"model\",\n            display_name=\"Model\",\n            advanced=False,\n            options=[\n                \"text-embedding-3-small\",\n                \"text-embedding-3-large\",\n                \"text-embedding-ada-002\",\n            ],\n            value=\"text-embedding-3-small\",\n        ),\n        DictInput(name=\"model_kwargs\", display_name=\"Model Kwargs\", advanced=True),\n        SecretStrInput(name=\"openai_api_base\", display_name=\"OpenAI API Base\", advanced=True),\n        SecretStrInput(name=\"openai_api_key\", display_name=\"OpenAI API Key\", value=\"OPENAI_API_KEY\"),\n        SecretStrInput(name=\"openai_api_type\", display_name=\"OpenAI API Type\", advanced=True),\n        MessageTextInput(name=\"openai_api_version\", display_name=\"OpenAI API Version\", advanced=True),\n        MessageTextInput(\n            name=\"openai_organization\",\n            display_name=\"OpenAI Organization\",\n            advanced=True,\n        ),\n        MessageTextInput(name=\"openai_proxy\", display_name=\"OpenAI Proxy\", advanced=True),\n        FloatInput(name=\"request_timeout\", display_name=\"Request Timeout\", advanced=True),\n        BoolInput(name=\"show_progress_bar\", display_name=\"Show Progress Bar\", advanced=True),\n        BoolInput(name=\"skip_empty\", display_name=\"Skip Empty\", advanced=True),\n        MessageTextInput(\n            name=\"tiktoken_model_name\",\n            display_name=\"TikToken Model Name\",\n            advanced=True,\n        ),\n        BoolInput(\n            name=\"tiktoken_enable\",\n            display_name=\"TikToken Enable\",\n            advanced=True,\n            value=True,\n            info=\"If False, you must have transformers installed.\",\n        ),\n    ]\n\n    def build_embeddings(self) -> Embeddings:\n        return OpenAIEmbeddings(\n            tiktoken_enabled=self.tiktoken_enable,\n            default_headers=self.default_headers,\n            default_query=self.default_query,\n            allowed_special=\"all\",\n            disallowed_special=\"all\",\n            chunk_size=self.chunk_size,\n            deployment=self.deployment,\n            embedding_ctx_length=self.embedding_ctx_length,\n            max_retries=self.max_retries,\n            model=self.model,\n            model_kwargs=self.model_kwargs,\n            base_url=self.openai_api_base,\n            api_key=self.openai_api_key,\n            openai_api_type=self.openai_api_type,\n            api_version=self.openai_api_version,\n            organization=self.openai_organization,\n            openai_proxy=self.openai_proxy,\n            timeout=self.request_timeout or None,\n            show_progress_bar=self.show_progress_bar,\n            skip_empty=self.skip_empty,\n            tiktoken_model_name=self.tiktoken_model_name,\n        )\n"
+              },
+              "default_headers": {
+                "advanced": true,
+                "display_name": "Default Headers",
+                "dynamic": false,
+                "info": "Default headers to use for the API request.",
+                "list": false,
+                "name": "default_headers",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_input": true,
+                "type": "dict",
+                "value": {}
+              },
+              "default_query": {
+                "advanced": true,
+                "display_name": "Default Query",
+                "dynamic": false,
+                "info": "Default query parameters to use for the API request.",
+                "list": false,
+                "name": "default_query",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_input": true,
+                "type": "dict",
+                "value": {}
+              },
+              "deployment": {
+                "advanced": true,
+                "display_name": "Deployment",
+                "dynamic": false,
+                "info": "",
+                "input_types": [
+                  "Message"
+                ],
+                "list": false,
+                "load_from_db": false,
+                "name": "deployment",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_input": true,
+                "trace_as_metadata": true,
+                "type": "str",
+                "value": ""
+              },
+              "embedding_ctx_length": {
+                "advanced": true,
+                "display_name": "Embedding Context Length",
+                "dynamic": false,
+                "info": "",
+                "list": false,
+                "name": "embedding_ctx_length",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_metadata": true,
+                "type": "int",
+                "value": 1536
+              },
+              "max_retries": {
+                "advanced": true,
+                "display_name": "Max Retries",
+                "dynamic": false,
+                "info": "",
+                "list": false,
+                "name": "max_retries",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_metadata": true,
+                "type": "int",
+                "value": 3
+              },
+              "model": {
+                "advanced": false,
+                "display_name": "Model",
+                "dynamic": false,
+                "info": "",
+                "name": "model",
+                "options": [
+                  "text-embedding-3-small",
+                  "text-embedding-3-large",
+                  "text-embedding-ada-002"
+                ],
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_metadata": true,
+                "type": "str",
+                "value": "text-embedding-3-small"
+              },
+              "model_kwargs": {
+                "advanced": true,
+                "display_name": "Model Kwargs",
+                "dynamic": false,
+                "info": "",
+                "list": false,
+                "name": "model_kwargs",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_input": true,
+                "type": "dict",
+                "value": {}
+              },
+              "openai_api_base": {
+                "advanced": true,
+                "display_name": "OpenAI API Base",
+                "dynamic": false,
+                "info": "",
+                "input_types": [],
+                "load_from_db": false,
+                "name": "openai_api_base",
+                "password": true,
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "type": "str",
+                "value": ""
+              },
+              "openai_api_key": {
+                "advanced": false,
+                "display_name": "OpenAI API Key",
+                "dynamic": false,
+                "info": "",
+                "input_types": [],
+                "load_from_db": true,
+                "name": "openai_api_key",
+                "password": true,
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "type": "str",
+                "value": "OPENAI_API_KEY"
+              },
+              "openai_api_type": {
+                "advanced": true,
+                "display_name": "OpenAI API Type",
+                "dynamic": false,
+                "info": "",
+                "input_types": [],
+                "load_from_db": false,
+                "name": "openai_api_type",
+                "password": true,
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "type": "str",
+                "value": ""
+              },
+              "openai_api_version": {
+                "advanced": true,
+                "display_name": "OpenAI API Version",
+                "dynamic": false,
+                "info": "",
+                "input_types": [
+                  "Message"
+                ],
+                "list": false,
+                "load_from_db": false,
+                "name": "openai_api_version",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_input": true,
+                "trace_as_metadata": true,
+                "type": "str",
+                "value": ""
+              },
+              "openai_organization": {
+                "advanced": true,
+                "display_name": "OpenAI Organization",
+                "dynamic": false,
+                "info": "",
+                "input_types": [
+                  "Message"
+                ],
+                "list": false,
+                "load_from_db": false,
+                "name": "openai_organization",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_input": true,
+                "trace_as_metadata": true,
+                "type": "str",
+                "value": ""
+              },
+              "openai_proxy": {
+                "advanced": true,
+                "display_name": "OpenAI Proxy",
+                "dynamic": false,
+                "info": "",
+                "input_types": [
+                  "Message"
+                ],
+                "list": false,
+                "load_from_db": false,
+                "name": "openai_proxy",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_input": true,
+                "trace_as_metadata": true,
+                "type": "str",
+                "value": ""
+              },
+              "request_timeout": {
+                "advanced": true,
+                "display_name": "Request Timeout",
+                "dynamic": false,
+                "info": "",
+                "list": false,
+                "name": "request_timeout",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_metadata": true,
+                "type": "float",
+                "value": ""
+              },
+              "show_progress_bar": {
+                "advanced": true,
+                "display_name": "Show Progress Bar",
+                "dynamic": false,
+                "info": "",
+                "list": false,
+                "name": "show_progress_bar",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_metadata": true,
+                "type": "bool",
+                "value": false
+              },
+              "skip_empty": {
+                "advanced": true,
+                "display_name": "Skip Empty",
+                "dynamic": false,
+                "info": "",
+                "list": false,
+                "name": "skip_empty",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_metadata": true,
+                "type": "bool",
+                "value": false
+              },
+              "tiktoken_enable": {
+                "advanced": true,
+                "display_name": "TikToken Enable",
+                "dynamic": false,
+                "info": "If False, you must have transformers installed.",
+                "list": false,
+                "name": "tiktoken_enable",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_metadata": true,
+                "type": "bool",
+                "value": true
+              },
+              "tiktoken_model_name": {
+                "advanced": true,
+                "display_name": "TikToken Model Name",
+                "dynamic": false,
+                "info": "",
+                "input_types": [
+                  "Message"
+                ],
+                "list": false,
+                "load_from_db": false,
+                "name": "tiktoken_model_name",
+                "placeholder": "",
+                "required": false,
+                "show": true,
+                "title_case": false,
+                "trace_as_input": true,
+                "trace_as_metadata": true,
+                "type": "str",
+                "value": ""
+              }
+            }
+          },
+          "type": "OpenAIEmbeddings"
+        },
+        "dragging": false,
+        "height": 394,
+        "id": "OpenAIEmbeddings-lCQlU",
+        "position": {
+          "x": 628.9252513328779,
+          "y": 648.6750537749285
+        },
+        "positionAbsolute": {
+          "x": 628.9252513328779,
+          "y": 648.6750537749285
         },
         "selected": false,
         "type": "genericNode",
@@ -3161,15 +3187,15 @@
       }
     ],
     "viewport": {
-      "x": -108.04801490857153,
-      "y": -44.38043074355511,
-      "zoom": 0.32281188532359256
+      "x": -110.08684771034166,
+      "y": -46.27017080984389,
+      "zoom": 0.3228119071747796
     }
   },
   "description": "Visit https://docs.langflow.org/tutorials/rag-with-astradb for a detailed guide of this project.\nThis project give you both Ingestion and RAG in a single file. You'll need to visit https://astra.datastax.com/ to create an Astra DB instance, your Token and grab an API Endpoint.\nRunning this project requires you to add a file in the Files component, then define a Collection Name and click on the Play icon on the Astra DB component. \n\nAfter the ingestion ends you are ready to click on the Run button at the lower left corner and start asking questions about your data.",
   "endpoint_name": null,
-  "id": "7804e4a4-8e16-45e0-88ab-ed6248daa0eb",
+  "id": "f1a53ec2-49e2-4029-b8a8-1a73079f9653",
   "is_component": false,
-  "last_tested_version": "1.0.0rc1",
+  "last_tested_version": "1.0.5",
   "name": "Vector Store RAG"
 }
\ No newline at end of file
diff --git a/src/backend/base/langflow/memory.py b/src/backend/base/langflow/memory.py
index e89682969..f052acdee 100644
--- a/src/backend/base/langflow/memory.py
+++ b/src/backend/base/langflow/memory.py
@@ -1,20 +1,24 @@
 import warnings
-from typing import List, Optional
+from uuid import UUID
 
 from loguru import logger
+from sqlalchemy import delete
+from sqlmodel import Session, col, select
 
 from langflow.schema.message import Message
-from langflow.services.deps import get_monitor_service
-from langflow.services.monitor.schema import MessageModel
+from langflow.services.database.models.message.model import MessageRead, MessageTable
+from langflow.services.database.utils import migrate_messages_from_monitor_service_to_database
+from langflow.services.deps import session_scope
 
 
 def get_messages(
-    sender: Optional[str] = None,
-    sender_name: Optional[str] = None,
-    session_id: Optional[str] = None,
-    order_by: Optional[str] = "timestamp",
-    order: Optional[str] = "DESC",
-    limit: Optional[int] = None,
+    sender: str | None = None,
+    sender_name: str | None = None,
+    session_id: str | None = None,
+    order_by: str | None = "timestamp",
+    order: str | None = "DESC",
+    flow_id: UUID | None = None,
+    limit: int | None = None,
 ):
     """
     Retrieves messages from the monitor service based on the provided filters.
@@ -29,42 +33,38 @@ def get_messages(
     Returns:
         List[Data]: A list of Data objects representing the retrieved messages.
     """
-    monitor_service = get_monitor_service()
-    messages_df = monitor_service.get_messages(
-        sender=sender,
-        sender_name=sender_name,
-        session_id=session_id,
-        order_by=order_by,
-        limit=limit,
-        order=order,
-    )
+    with session_scope() as session:
+        migrate_messages_from_monitor_service_to_database(session)
+    messages_read: list[Message] = []
+    with session_scope() as session:
+        stmt = select(MessageTable)
+        if sender:
+            stmt = stmt.where(MessageTable.sender == sender)
+        if sender_name:
+            stmt = stmt.where(MessageTable.sender_name == sender_name)
+        if session_id:
+            stmt = stmt.where(MessageTable.session_id == session_id)
+        if flow_id:
+            stmt = stmt.where(MessageTable.flow_id == flow_id)
+        if order_by:
+            if order == "DESC":
+                col = getattr(MessageTable, order_by).desc()
+            else:
+                col = getattr(MessageTable, order_by).asc()
+            stmt = stmt.order_by(col)
+        if limit:
+            stmt = stmt.limit(limit)
+        messages = session.exec(stmt)
+        messages_read = [Message(**d.model_dump()) for d in messages]
 
-    messages: list[Message] = []
-    # messages_df has a timestamp
-    # it gets the last 5 messages, for example
-    # but now they are ordered from most recent to least recent
-    # so we need to reverse the order
-    messages_df = messages_df[::-1] if order == "DESC" else messages_df
-    for row in messages_df.itertuples():
-        msg = Message(
-            text=row.text,
-            sender=row.sender,
-            session_id=row.session_id,
-            sender_name=row.sender_name,
-            timestamp=row.timestamp,
-        )
-
-        messages.append(msg)
-
-    return messages
+    return messages_read
 
 
-def add_messages(messages: Message | list[Message], flow_id: Optional[str] = None):
+def add_messages(messages: Message | list[Message], flow_id: str | None = None):
     """
     Add a message to the monitor service.
     """
     try:
-        monitor_service = get_monitor_service()
         if not isinstance(messages, list):
             messages = [messages]
 
@@ -72,25 +72,29 @@ def add_messages(messages: Message | list[Message], flow_id: Optional[str] = Non
             types = ", ".join([str(type(message)) for message in messages])
             raise ValueError(f"The messages must be instances of Message. Found: {types}")
 
-        messages_models: list[MessageModel] = []
+        messages_models: list[MessageTable] = []
         for msg in messages:
-            if not msg.timestamp:
-                msg.timestamp = monitor_service.get_timestamp()
-            messages_models.append(MessageModel.from_message(msg, flow_id=flow_id))
-
-        for message_model in messages_models:
-            try:
-                monitor_service.add_message(message_model)
-            except Exception as e:
-                logger.error(f"Error adding message to monitor service: {e}")
-                logger.exception(e)
-                raise e
-        return messages_models
+            messages_models.append(MessageTable.from_message(msg, flow_id=flow_id))
+        with session_scope() as session:
+            messages_models = add_messagetables(messages_models, session)
+        return [Message(**message.model_dump()) for message in messages_models]
     except Exception as e:
         logger.exception(e)
         raise e
 
 
+def add_messagetables(messages: list[MessageTable], session: Session):
+    for message in messages:
+        try:
+            session.add(message)
+            session.commit()
+            session.refresh(message)
+        except Exception as e:
+            logger.exception(e)
+            raise e
+    return [MessageRead.model_validate(message, from_attributes=True) for message in messages]
+
+
 def delete_messages(session_id: str):
     """
     Delete messages from the monitor service based on the provided session ID.
@@ -98,14 +102,19 @@ def delete_messages(session_id: str):
     Args:
         session_id (str): The session ID associated with the messages to delete.
     """
-    monitor_service = get_monitor_service()
-    monitor_service.delete_messages_session(session_id)
+    with session_scope() as session:
+        session.exec(
+            delete(MessageTable)
+            .where(col(MessageTable.session_id) == session_id)
+            .execution_options(synchronize_session="fetch")
+        )
+        session.commit()
 
 
 def store_message(
     message: Message,
-    flow_id: Optional[str] = None,
-) -> List[Message]:
+    flow_id: str | None = None,
+) -> list[Message]:
     """
     Stores a message in the memory.
 
diff --git a/src/backend/base/langflow/schema/message.py b/src/backend/base/langflow/schema/message.py
index c50dab880..5ad7d1922 100644
--- a/src/backend/base/langflow/schema/message.py
+++ b/src/backend/base/langflow/schema/message.py
@@ -1,5 +1,6 @@
 from datetime import datetime, timezone
 from typing import Annotated, Any, AsyncIterator, Iterator, List, Optional
+from uuid import UUID
 
 from fastapi.encoders import jsonable_encoder
 from langchain_core.load import load
@@ -31,7 +32,20 @@ class Message(Data):
     timestamp: Annotated[str, BeforeValidator(_timestamp_to_str)] = Field(
         default=datetime.now(timezone.utc).strftime("%Y-%m-%d %H:%M:%S")
     )
-    flow_id: Optional[str] = None
+    flow_id: Optional[str | UUID] = None
+
+    @field_validator("flow_id", mode="before")
+    @classmethod
+    def validate_flow_id(cls, value):
+        if isinstance(value, UUID):
+            value = str(value)
+        return value
+
+    @field_serializer("flow_id")
+    def serialize_flow_id(value):
+        if isinstance(value, str):
+            return UUID(value)
+        return value
 
     @field_validator("files", mode="before")
     @classmethod
diff --git a/src/backend/base/langflow/services/auth/utils.py b/src/backend/base/langflow/services/auth/utils.py
index 4c2fdbfb4..f5fba63a8 100644
--- a/src/backend/base/langflow/services/auth/utils.py
+++ b/src/backend/base/langflow/services/auth/utils.py
@@ -1,3 +1,5 @@
+import base64
+import random
 import warnings
 from datetime import datetime, timedelta, timezone
 from typing import Annotated, Coroutine, Optional, Union
@@ -330,17 +332,25 @@ def authenticate_user(username: str, password: str, db: Session = Depends(get_se
     return user if verify_password(password, user.password) else None
 
 
-def add_padding(s):
-    # Calculate the number of padding characters needed
-    padding_needed = 4 - len(s) % 4
-    return s + "=" * padding_needed
+def ensure_valid_key(s: str) -> bytes:
+    # If the key is too short, we'll use it as a seed to generate a valid key
+    if len(s) < 32:
+        # Use the input as a seed for the random number generator
+        random.seed(s)
+        # Generate 32 random bytes
+        key = bytes(random.getrandbits(8) for _ in range(32))
+    else:
+        # If the key is long enough, use the first 32 bytes
+        key = s[:32].encode()
+
+    # Ensure the key is URL-safe base64-encoded
+    return base64.urlsafe_b64encode(key)
 
 
 def get_fernet(settings_service=Depends(get_settings_service)):
     SECRET_KEY = settings_service.auth_settings.SECRET_KEY.get_secret_value()
-    # It's important that your secret key is 32 url-safe base64-encoded byte
-    padded_secret_key = add_padding(SECRET_KEY)
-    fernet = Fernet(padded_secret_key)
+    valid_key = ensure_valid_key(SECRET_KEY)
+    fernet = Fernet(valid_key)
     return fernet
 
 
diff --git a/src/backend/base/langflow/services/database/models/__init__.py b/src/backend/base/langflow/services/database/models/__init__.py
index ce12a6fce..6e1f09fe3 100644
--- a/src/backend/base/langflow/services/database/models/__init__.py
+++ b/src/backend/base/langflow/services/database/models/__init__.py
@@ -1,7 +1,8 @@
 from .api_key import ApiKey
 from .flow import Flow
 from .folder import Folder
+from .message import MessageTable
 from .user import User
 from .variable import Variable
 
-__all__ = ["Flow", "User", "ApiKey", "Variable", "Folder"]
+__all__ = ["Flow", "User", "ApiKey", "Variable", "Folder", "MessageTable"]
diff --git a/src/backend/base/langflow/services/database/models/flow/model.py b/src/backend/base/langflow/services/database/models/flow/model.py
index 624ea0543..6d3e4aea8 100644
--- a/src/backend/base/langflow/services/database/models/flow/model.py
+++ b/src/backend/base/langflow/services/database/models/flow/model.py
@@ -3,7 +3,7 @@
 import re
 import warnings
 from datetime import datetime, timezone
-from typing import TYPE_CHECKING, Dict, Optional
+from typing import TYPE_CHECKING, Dict, List, Optional
 from uuid import UUID, uuid4
 
 import emoji
@@ -17,6 +17,7 @@ from langflow.schema import Data
 
 if TYPE_CHECKING:
     from langflow.services.database.models.folder import Folder
+    from langflow.services.database.models.message import MessageTable
     from langflow.services.database.models.user import User
 
 
@@ -141,6 +142,7 @@ class Flow(FlowBase, table=True):
     user: "User" = Relationship(back_populates="flows")
     folder_id: Optional[UUID] = Field(default=None, foreign_key="folder.id", nullable=True, index=True)
     folder: Optional["Folder"] = Relationship(back_populates="flows")
+    messages: List["MessageTable"] = Relationship(back_populates="flow")
 
     def to_data(self):
         serialized = self.model_dump()
diff --git a/src/backend/base/langflow/services/database/models/message/__init__.py b/src/backend/base/langflow/services/database/models/message/__init__.py
new file mode 100644
index 000000000..8cfb2ff4f
--- /dev/null
+++ b/src/backend/base/langflow/services/database/models/message/__init__.py
@@ -0,0 +1,3 @@
+from .model import MessageTable, MessageCreate, MessageRead, MessageUpdate
+
+__all__ = ["MessageTable", "MessageCreate", "MessageRead", "MessageUpdate"]
diff --git a/src/backend/base/langflow/services/database/models/message/model.py b/src/backend/base/langflow/services/database/models/message/model.py
new file mode 100644
index 000000000..7c0b9dc8f
--- /dev/null
+++ b/src/backend/base/langflow/services/database/models/message/model.py
@@ -0,0 +1,85 @@
+from datetime import datetime, timezone
+from typing import TYPE_CHECKING, List, Optional
+from uuid import UUID, uuid4
+
+from pydantic import field_validator
+from sqlmodel import JSON, Column, Field, Relationship, SQLModel
+
+if TYPE_CHECKING:
+    from langflow.schema.message import Message
+    from langflow.services.database.models.flow.model import Flow
+
+
+class MessageBase(SQLModel):
+    timestamp: datetime = Field(default_factory=lambda: datetime.now(timezone.utc))
+    sender: str
+    sender_name: str
+    session_id: str
+    text: str
+    files: list[str] = Field(default_factory=list)
+
+    @field_validator("files", mode="before")
+    @classmethod
+    def validate_files(cls, value):
+        if not value:
+            value = []
+        return value
+
+    @classmethod
+    def from_message(cls, message: "Message", flow_id: str | UUID | None = None):
+        # first check if the record has all the required fields
+        if message.text is None or not message.sender or not message.sender_name:
+            raise ValueError("The message does not have the required fields (text, sender, sender_name).")
+        if isinstance(message.timestamp, str):
+            timestamp = datetime.fromisoformat(message.timestamp)
+        else:
+            timestamp = message.timestamp
+        if not flow_id and message.flow_id:
+            flow_id = message.flow_id
+        return cls(
+            sender=message.sender,
+            sender_name=message.sender_name,
+            text=message.text,
+            session_id=message.session_id,
+            files=message.files or [],
+            timestamp=timestamp,
+            flow_id=flow_id,
+        )
+
+
+class MessageTable(MessageBase, table=True):
+    __tablename__ = "message"
+    id: UUID = Field(default_factory=uuid4, primary_key=True)
+    flow_id: Optional[UUID] = Field(default=None, foreign_key="flow.id")
+    flow: "Flow" = Relationship(back_populates="messages")
+    files: List[str] = Field(sa_column=Column(JSON))
+
+    @field_validator("flow_id", mode="before")
+    @classmethod
+    def validate_flow_id(cls, value):
+        if value is None:
+            return value
+        if isinstance(value, str):
+            value = UUID(value)
+        return value
+
+    # Needed for Column(JSON)
+    class Config:
+        arbitrary_types_allowed = True
+
+
+class MessageRead(MessageBase):
+    id: UUID
+    flow_id: Optional[UUID] = Field()
+
+
+class MessageCreate(MessageBase):
+    pass
+
+
+class MessageUpdate(SQLModel):
+    text: Optional[str] = None
+    sender: Optional[str] = None
+    sender_name: Optional[str] = None
+    session_id: Optional[str] = None
+    files: Optional[list[str]] = None
diff --git a/src/backend/base/langflow/services/database/service.py b/src/backend/base/langflow/services/database/service.py
index ceeaf3e38..32e0b08e2 100644
--- a/src/backend/base/langflow/services/database/service.py
+++ b/src/backend/base/langflow/services/database/service.py
@@ -6,22 +6,24 @@ from typing import TYPE_CHECKING
 import sqlalchemy as sa
 from alembic import command, util
 from alembic.config import Config
-from langflow.services.base import Service
-from langflow.services.database import models  # noqa
-from langflow.services.database.models.user.crud import get_user_by_username
-from langflow.services.database.utils import Result, TableResults
-from langflow.services.deps import get_settings_service
-from langflow.services.utils import teardown_superuser
 from loguru import logger
 from sqlalchemy import event, inspect
 from sqlalchemy.engine import Engine
 from sqlalchemy.exc import OperationalError
 from sqlmodel import Session, SQLModel, create_engine, select, text
 
+from langflow.services.base import Service
+from langflow.services.database import models  # noqa
+from langflow.services.database.models.user.crud import get_user_by_username
+from langflow.services.database.utils import Result, TableResults, migrate_messages_from_monitor_service_to_database
+from langflow.services.deps import get_settings_service
+from langflow.services.utils import teardown_superuser
+
 if TYPE_CHECKING:
-    from langflow.services.settings.service import SettingsService
     from sqlalchemy.engine import Engine
 
+    from langflow.services.settings.service import SettingsService
+
 
 class DatabaseService(Service):
     name = "database_service"
@@ -205,6 +207,10 @@ class DatabaseService(Service):
             logger.error(f"AutogenerateDiffsDetected: {exc}")
             if not fix:
                 raise RuntimeError(f"There's a mismatch between the models and the database.\n{exc}")
+        try:
+            migrate_messages_from_monitor_service_to_database(session)
+        except Exception as exc:
+            logger.error(f"Error migrating messages from monitor service to database: {exc}")
 
         if fix:
             self.try_downgrade_upgrade_until_success(alembic_cfg)
diff --git a/src/backend/base/langflow/services/database/utils.py b/src/backend/base/langflow/services/database/utils.py
index cf2c92cb3..9500bcc50 100644
--- a/src/backend/base/langflow/services/database/utils.py
+++ b/src/backend/base/langflow/services/database/utils.py
@@ -4,11 +4,82 @@ from typing import TYPE_CHECKING
 
 from alembic.util.exc import CommandError
 from loguru import logger
-from sqlmodel import Session, text
+from sqlmodel import Session, select, text
+
+from langflow.services.deps import get_monitor_service
 
 if TYPE_CHECKING:
     from langflow.services.database.service import DatabaseService
 
+from typing import Dict, List
+
+
+def migrate_messages_from_monitor_service_to_database(session: Session) -> bool:
+    from langflow.schema.message import Message
+    from langflow.services.database.models.message import MessageTable
+
+    try:
+        monitor_service = get_monitor_service()
+        messages_df = monitor_service.get_messages()
+    except Exception as e:
+        logger.error(f"Error retrieving messages from monitor service: {e}")
+        return False
+
+    if messages_df.empty:
+        logger.info("No messages to migrate.")
+        return True
+
+    original_messages: List[Dict] = messages_df.to_dict(orient="records")
+
+    db_messages = session.exec(select(MessageTable)).all()
+    db_messages = [msg[0] for msg in db_messages]  # type: ignore
+    db_msg_dict = {(msg.text, msg.timestamp.isoformat(), str(msg.flow_id), msg.session_id): msg for msg in db_messages}
+    # Filter out messages that already exist in the database
+    original_messages_filtered = []
+    for message in original_messages:
+        key = (message["text"], message["timestamp"].isoformat(), str(message["flow_id"]), message["session_id"])
+        if key not in db_msg_dict:
+            original_messages_filtered.append(message)
+    if not original_messages_filtered:
+        logger.info("No messages to migrate.")
+        return True
+    try:
+        # Bulk insert messages
+        session.bulk_insert_mappings(
+            MessageTable,  # type: ignore
+            [MessageTable.from_message(Message(**msg)).model_dump() for msg in original_messages_filtered],
+        )
+        session.commit()
+    except Exception as e:
+        logger.error(f"Error during message insertion: {str(e)}")
+        session.rollback()
+        return False
+
+    # Create a dictionary for faster lookup
+
+    all_ok = True
+    for orig_msg in original_messages_filtered:
+        key = (orig_msg["text"], orig_msg["timestamp"].isoformat(), str(orig_msg["flow_id"]), orig_msg["session_id"])
+        matching_db_msg = db_msg_dict.get(key)
+
+        if matching_db_msg is None:
+            logger.warning(f"Message not found in database: {orig_msg}")
+            all_ok = False
+        else:
+            # Validate other fields
+            if any(getattr(matching_db_msg, k) != v for k, v in orig_msg.items() if k != "index"):
+                logger.warning(f"Message mismatch in database: {orig_msg}")
+                all_ok = False
+
+    if all_ok:
+        messages_ids = [message["index"] for message in original_messages]
+        monitor_service.delete_messages(messages_ids)
+        logger.info("Migration completed successfully. Original messages deleted.")
+    else:
+        logger.warning("Migration completed with errors. Original messages not deleted.")
+
+    return all_ok
+
 
 def initialize_database(fix_migration: bool = False):
     logger.debug("Initializing database")
diff --git a/src/backend/base/langflow/services/monitor/schema.py b/src/backend/base/langflow/services/monitor/schema.py
index 2294678fe..de0bb17bb 100644
--- a/src/backend/base/langflow/services/monitor/schema.py
+++ b/src/backend/base/langflow/services/monitor/schema.py
@@ -1,6 +1,7 @@
 import json
 from datetime import datetime, timezone
-from typing import Any, Optional
+from typing import Any
+from uuid import UUID
 
 from pydantic import BaseModel, Field, field_serializer, field_validator
 
@@ -27,15 +28,15 @@ class DefaultModel(BaseModel):
 
 
 class TransactionModel(DefaultModel):
-    index: Optional[int] = Field(default=None)
-    timestamp: Optional[datetime] = Field(default_factory=datetime.now, alias="timestamp")
+    index: int | None = Field(default=None)
+    timestamp: datetime | None = Field(default_factory=datetime.now, alias="timestamp")
     vertex_id: str
     target_id: str | None = None
     inputs: dict
-    outputs: Optional[dict] = None
+    outputs: dict | None = None
     status: str
-    error: Optional[str] = None
-    flow_id: Optional[str] = Field(default=None, alias="flow_id")
+    error: str | None = None
+    flow_id: str | None = Field(default=None, alias="flow_id")
 
     # validate target_args in case it is a JSON
     @field_validator("outputs", "inputs", mode="before")
@@ -52,16 +53,16 @@ class TransactionModel(DefaultModel):
 
 
 class TransactionModelResponse(DefaultModel):
-    index: Optional[int] = Field(default=None)
-    timestamp: Optional[datetime] = Field(default_factory=datetime.now, alias="timestamp")
+    index: int | None = Field(default=None)
+    timestamp: datetime | None = Field(default_factory=datetime.now, alias="timestamp")
     vertex_id: str
     inputs: dict
-    outputs: Optional[dict] = None
+    outputs: dict | None = None
     status: str
-    error: Optional[str] = None
-    flow_id: Optional[str] = Field(default=None, alias="flow_id")
-    source: Optional[str] = None
-    target: Optional[str] = None
+    error: str | None = None
+    flow_id: str | None = Field(default=None, alias="flow_id")
+    source: str | None = None
+    target: str | None = None
 
     # validate target_args in case it is a JSON
     @field_validator("outputs", "inputs", mode="before")
@@ -80,9 +81,9 @@ class TransactionModelResponse(DefaultModel):
         return v
 
 
-class MessageModel(DefaultModel):
-    index: Optional[int] = Field(default=None)
-    flow_id: Optional[str] = Field(default=None, alias="flow_id")
+class DuckDbMessageModel(DefaultModel):
+    index: int | None = Field(default=None, alias="index")
+    flow_id: str | None = Field(default=None, alias="flow_id")
     timestamp: datetime = Field(default_factory=lambda: datetime.now(timezone.utc))
     sender: str
     sender_name: str
@@ -111,7 +112,53 @@ class MessageModel(DefaultModel):
         return v
 
     @classmethod
-    def from_message(cls, message: Message, flow_id: Optional[str] = None):
+    def from_message(cls, message: Message, flow_id: str | None = None):
+        # first check if the record has all the required fields
+        if message.text is None or not message.sender or not message.sender_name:
+            raise ValueError("The message does not have the required fields (text, sender, sender_name).")
+        return cls(
+            sender=message.sender,
+            sender_name=message.sender_name,
+            text=message.text,
+            session_id=message.session_id,
+            files=message.files or [],
+            timestamp=message.timestamp,
+            flow_id=flow_id,
+        )
+
+
+class MessageModel(DefaultModel):
+    id: str | UUID | None = Field(default=None)
+    flow_id: UUID | None = Field(default=None)
+    timestamp: datetime = Field(default_factory=lambda: datetime.now(timezone.utc))
+    sender: str
+    sender_name: str
+    session_id: str
+    text: str
+    files: list[str] = []
+
+    @field_validator("files", mode="before")
+    @classmethod
+    def validate_files(cls, v):
+        if isinstance(v, str):
+            v = json.loads(v)
+        return v
+
+    @field_serializer("timestamp")
+    @classmethod
+    def serialize_timestamp(cls, v):
+        v = v.replace(microsecond=0)
+        return v.strftime("%Y-%m-%d %H:%M:%S")
+
+    @field_serializer("files")
+    @classmethod
+    def serialize_files(cls, v):
+        if isinstance(v, list):
+            return json.dumps(v)
+        return v
+
+    @classmethod
+    def from_message(cls, message: Message, flow_id: str | None = None):
         # first check if the record has all the required fields
         if message.text is None or not message.sender or not message.sender_name:
             raise ValueError("The message does not have the required fields (text, sender, sender_name).")
@@ -127,16 +174,7 @@ class MessageModel(DefaultModel):
 
 
 class MessageModelResponse(MessageModel):
-    index: Optional[int] = Field(default=None)
-
-    @field_validator("index", mode="before")
-    def validate_id(cls, v):
-        if isinstance(v, float):
-            try:
-                return int(v)
-            except ValueError:
-                return None
-        return v
+    pass
 
 
 class MessageModelRequest(MessageModel):
@@ -147,8 +185,8 @@ class MessageModelRequest(MessageModel):
 
 
 class VertexBuildModel(DefaultModel):
-    index: Optional[int] = Field(default=None, alias="index", exclude=True)
-    id: Optional[str] = Field(default=None, alias="id")
+    index: int | None = Field(default=None, alias="index", exclude=True)
+    id: str | None = Field(default=None, alias="id")
     flow_id: str
     valid: bool
     params: Any
diff --git a/src/backend/base/langflow/services/monitor/service.py b/src/backend/base/langflow/services/monitor/service.py
index 6b99b9760..f644fd871 100644
--- a/src/backend/base/langflow/services/monitor/service.py
+++ b/src/backend/base/langflow/services/monitor/service.py
@@ -1,30 +1,31 @@
 from datetime import datetime
 from pathlib import Path
-from typing import TYPE_CHECKING, List, Optional, Union
+from typing import TYPE_CHECKING, Union
 
 import duckdb
-from langflow.services.base import Service
-from langflow.services.monitor.utils import add_row_to_table, drop_and_create_table_if_schema_mismatch
 from loguru import logger
 from platformdirs import user_cache_dir
 
+from langflow.services.base import Service
+from langflow.services.monitor.utils import add_row_to_table, drop_and_create_table_if_schema_mismatch
+
 if TYPE_CHECKING:
+    from langflow.services.monitor.schema import DuckDbMessageModel, TransactionModel, VertexBuildModel
     from langflow.services.settings.service import SettingsService
-    from langflow.services.monitor.schema import MessageModel, TransactionModel, VertexBuildModel
 
 
 class MonitorService(Service):
     name = "monitor_service"
 
     def __init__(self, settings_service: "SettingsService"):
-        from langflow.services.monitor.schema import MessageModel, TransactionModel, VertexBuildModel
+        from langflow.services.monitor.schema import DuckDbMessageModel, TransactionModel, VertexBuildModel
 
         self.settings_service = settings_service
         self.base_cache_dir = Path(user_cache_dir("langflow"))
         self.db_path = self.base_cache_dir / "monitor.duckdb"
-        self.table_map: dict[str, type[TransactionModel | MessageModel | VertexBuildModel]] = {
+        self.table_map: dict[str, type[TransactionModel | DuckDbMessageModel | VertexBuildModel]] = {
             "transactions": TransactionModel,
-            "messages": MessageModel,
+            "messages": DuckDbMessageModel,
             "vertex_builds": VertexBuildModel,
         }
 
@@ -47,7 +48,7 @@ class MonitorService(Service):
     def add_row(
         self,
         table_name: str,
-        data: Union[dict, "TransactionModel", "MessageModel", "VertexBuildModel"],
+        data: Union[dict, "TransactionModel", "DuckDbMessageModel", "VertexBuildModel"],
     ):
         # Make sure the model passed matches the table
 
@@ -67,80 +68,15 @@ class MonitorService(Service):
     def get_timestamp():
         return datetime.now().strftime("%Y-%m-%d %H:%M:%S")
 
-    def get_vertex_builds(
-        self,
-        flow_id: Optional[str] = None,
-        vertex_id: Optional[str] = None,
-        valid: Optional[bool] = None,
-        order_by: Optional[str] = "timestamp",
-    ):
-        query = "SELECT id, index,flow_id, valid, params, data, artifacts, timestamp FROM vertex_builds"
-        conditions = []
-        if flow_id:
-            conditions.append(f"flow_id = '{flow_id}'")
-        if vertex_id:
-            conditions.append(f"id = '{vertex_id}'")
-        if valid is not None:  # Check for None because valid is a boolean
-            valid_str = "true" if valid else "false"
-            conditions.append(f"valid = {valid_str}")
-
-        if conditions:
-            query += " WHERE " + " AND ".join(conditions)
-
-        if order_by:
-            query += f" ORDER BY {order_by}"
-
-        with duckdb.connect(str(self.db_path), read_only=True) as conn:
-            df = conn.execute(query).df()
-
-        return df.to_dict(orient="records")
-
-    def delete_vertex_builds(self, flow_id: Optional[str] = None):
-        query = "DELETE FROM vertex_builds"
-        if flow_id:
-            query += f" WHERE flow_id = '{flow_id}'"
-
-        with duckdb.connect(str(self.db_path), read_only=False) as conn:
-            conn.execute(query)
-
-    def delete_messages_session(self, session_id: str):
-        query = f"DELETE FROM messages WHERE session_id = '{session_id}'"
-
-        return self.exec_query(query, read_only=False)
-
-    def delete_messages(self, message_ids: Union[List[int], str]):
-        if isinstance(message_ids, list):
-            # If message_ids is a list, join the string representations of the integers
-            ids_str = ",".join(map(str, message_ids))
-        elif isinstance(message_ids, str):
-            # If message_ids is already a string, use it directly
-            ids_str = message_ids
-        else:
-            raise ValueError("message_ids must be a list of integers or a string")
-
-        query = f"DELETE FROM messages WHERE index IN ({ids_str})"
-
-        return self.exec_query(query, read_only=False)
-
-    def update_message(self, message_id: str, **kwargs):
-        query = (
-            f"""UPDATE messages SET {', '.join(f"{k} = '{v}'" for k, v in kwargs.items())} WHERE index = {message_id}"""
-        )
-
-        return self.exec_query(query, read_only=False)
-
-    def add_message(self, message: "MessageModel"):
-        self.add_row("messages", message)
-
     def get_messages(
         self,
-        flow_id: Optional[str] = None,
-        sender: Optional[str] = None,
-        sender_name: Optional[str] = None,
-        session_id: Optional[str] = None,
-        order_by: Optional[str] = "timestamp",
-        order: Optional[str] = "DESC",
-        limit: Optional[int] = None,
+        flow_id: str | None = None,
+        sender: str | None = None,
+        sender_name: str | None = None,
+        session_id: str | None = None,
+        order_by: str | None = "timestamp",
+        order: str | None = "DESC",
+        limit: int | None = None,
     ):
         query = "SELECT index, flow_id, sender_name, sender, session_id, text, files, timestamp FROM messages"
         conditions = []
@@ -168,13 +104,75 @@ class MonitorService(Service):
 
         return df
 
+    def get_vertex_builds(
+        self,
+        flow_id: str | None = None,
+        vertex_id: str | None = None,
+        valid: bool | None = None,
+        order_by: str | None = "timestamp",
+    ):
+        query = "SELECT id, index,flow_id, valid, params, data, artifacts, timestamp FROM vertex_builds"
+        conditions = []
+        if flow_id:
+            conditions.append(f"flow_id = '{flow_id}'")
+        if vertex_id:
+            conditions.append(f"id = '{vertex_id}'")
+        if valid is not None:  # Check for None because valid is a boolean
+            valid_str = "true" if valid else "false"
+            conditions.append(f"valid = {valid_str}")
+
+        if conditions:
+            query += " WHERE " + " AND ".join(conditions)
+
+        if order_by:
+            query += f" ORDER BY {order_by}"
+
+        with duckdb.connect(str(self.db_path), read_only=True) as conn:
+            df = conn.execute(query).df()
+
+        return df.to_dict(orient="records")
+
+    def delete_vertex_builds(self, flow_id: str | None = None):
+        query = "DELETE FROM vertex_builds"
+        if flow_id:
+            query += f" WHERE flow_id = '{flow_id}'"
+
+        with duckdb.connect(str(self.db_path), read_only=False) as conn:
+            conn.execute(query)
+
+    def delete_messages_session(self, session_id: str):
+        query = f"DELETE FROM messages WHERE session_id = '{session_id}'"
+
+        return self.exec_query(query, read_only=False)
+
+    def delete_messages(self, message_ids: list[int] | str):
+        if isinstance(message_ids, list):
+            # If message_ids is a list, join the string representations of the integers
+            ids_str = ",".join(map(str, message_ids))
+        elif isinstance(message_ids, str):
+            # If message_ids is already a string, use it directly
+            ids_str = message_ids
+        else:
+            raise ValueError("message_ids must be a list of integers or a string")
+
+        query = f"DELETE FROM messages WHERE index IN ({ids_str})"
+
+        return self.exec_query(query, read_only=False)
+
+    def update_message(self, message_id: str, **kwargs):
+        query = (
+            f"""UPDATE messages SET {', '.join(f"{k} = '{v}'" for k, v in kwargs.items())} WHERE index = {message_id}"""
+        )
+
+        return self.exec_query(query, read_only=False)
+
     def get_transactions(
         self,
-        source: Optional[str] = None,
-        target: Optional[str] = None,
-        status: Optional[str] = None,
-        order_by: Optional[str] = "timestamp",
-        flow_id: Optional[str] = None,
+        source: str | None = None,
+        target: str | None = None,
+        status: str | None = None,
+        order_by: str | None = "timestamp",
+        flow_id: str | None = None,
     ):
         query = (
             "SELECT index,flow_id, status, error, timestamp, vertex_id, inputs, outputs, target_id FROM transactions"
diff --git a/src/backend/base/langflow/services/tracing/base.py b/src/backend/base/langflow/services/tracing/base.py
new file mode 100644
index 000000000..2ec2eea26
--- /dev/null
+++ b/src/backend/base/langflow/services/tracing/base.py
@@ -0,0 +1,33 @@
+from abc import ABC, abstractmethod
+from typing import Any, Dict
+from uuid import UUID
+
+
+class BaseTracer(ABC):
+    @abstractmethod
+    def __init__(self, trace_name: str, trace_type: str, project_name: str, trace_id: UUID):
+        raise NotImplementedError
+
+    @abstractmethod
+    def ready(self):
+        raise NotImplementedError
+
+    @abstractmethod
+    def add_trace(
+        self, trace_name: str, trace_type: str, inputs: Dict[str, Any], metadata: Dict[str, Any] | None = None
+    ):
+        raise NotImplementedError
+
+    @abstractmethod
+    def end_trace(self, trace_name: str, outputs: Dict[str, Any] | None = None, error: str | None = None):
+        raise NotImplementedError
+
+    @abstractmethod
+    def end(
+        self,
+        inputs: dict[str, Any],
+        outputs: Dict[str, Any],
+        error: str | None = None,
+        metadata: dict[str, Any] | None = None,
+    ):
+        raise NotImplementedError
diff --git a/src/backend/base/langflow/services/tracing/service.py b/src/backend/base/langflow/services/tracing/service.py
index 95795c988..4bdf17fa8 100644
--- a/src/backend/base/langflow/services/tracing/service.py
+++ b/src/backend/base/langflow/services/tracing/service.py
@@ -12,6 +12,7 @@ from loguru import logger
 
 from langflow.schema.data import Data
 from langflow.services.base import Service
+from langflow.services.tracing.base import BaseTracer
 from langflow.services.tracing.schema import Log
 
 if TYPE_CHECKING:
@@ -180,7 +181,7 @@ class TracingService(Service):
         self.outputs_metadata[trace_name] |= output_metadata or {}
 
 
-class LangSmithTracer:
+class LangSmithTracer(BaseTracer):
     def __init__(self, trace_name: str, trace_type: str, project_name: str, trace_id: UUID):
         from langsmith.run_trees import RunTree
 
@@ -292,7 +293,7 @@ class LangSmithTracer:
         inputs: dict[str, Any],
         outputs: Dict[str, Any],
         error: str | None = None,
-        metadata: Optional[dict[str, Any]] = None,
+        metadata: dict[str, Any] | None = None,
     ):
         self._run_tree.add_metadata({"inputs": inputs, "metadata": metadata or {}})
         self._run_tree.end(outputs=outputs, error=error)
diff --git a/src/backend/base/langflow/services/tracing/utils.py b/src/backend/base/langflow/services/tracing/utils.py
new file mode 100644
index 000000000..a90c94c99
--- /dev/null
+++ b/src/backend/base/langflow/services/tracing/utils.py
@@ -0,0 +1,34 @@
+from typing import Any, Dict
+
+from langflow.schema.data import Data
+
+
+def convert_to_langchain_type(value):
+    from langflow.schema.message import Message
+
+    if isinstance(value, dict):
+        for key, _value in value.copy().items():
+            _value = convert_to_langchain_type(_value)
+            value[key] = _value
+    elif isinstance(value, list):
+        value = [convert_to_langchain_type(v) for v in value]
+    elif isinstance(value, Message):
+        if "prompt" in value:
+            value = value.load_lc_prompt()
+        elif value.sender:
+            value = value.to_lc_message()
+        else:
+            value = value.to_lc_document()
+    elif isinstance(value, Data):
+        if "text" in value.data:
+            value = value.to_lc_document()
+        else:
+            value = value.data
+    return value
+
+
+def convert_to_langchain_types(io_dict: Dict[str, Any]):
+    converted = {}
+    for key, value in io_dict.items():
+        converted[key] = convert_to_langchain_type(value)
+    return converted
diff --git a/src/backend/base/langflow/utils/logger.py b/src/backend/base/langflow/utils/logger.py
index 48783710a..c84cbeced 100644
--- a/src/backend/base/langflow/utils/logger.py
+++ b/src/backend/base/langflow/utils/logger.py
@@ -1,5 +1,6 @@
 import logging
 import os
+import sys
 from pathlib import Path
 from typing import Optional
 
@@ -11,7 +12,7 @@ from rich.logging import RichHandler
 VALID_LOG_LEVELS = ["DEBUG", "INFO", "WARNING", "ERROR", "CRITICAL"]
 
 
-def serialize(record):
+def serialize_log(record):
     subset = {
         "timestamp": record["time"].timestamp(),
         "message": record["message"],
@@ -22,54 +23,67 @@ def serialize(record):
 
 
 def patching(record):
-    record["extra"]["serialized"] = serialize(record)
+    record["extra"]["serialized"] = serialize_log(record)
 
 
-def configure(log_level: Optional[str] = None, log_file: Optional[Path] = None, disable: Optional[bool] = False):
+def configure(
+    log_level: Optional[str] = None,
+    log_file: Optional[Path] = None,
+    disable: Optional[bool] = False,
+    log_env: Optional[str] = None,
+):
     if disable and log_level is None and log_file is None:
         logger.disable("langflow")
     if os.getenv("LANGFLOW_LOG_LEVEL", "").upper() in VALID_LOG_LEVELS and log_level is None:
         log_level = os.getenv("LANGFLOW_LOG_LEVEL")
     if log_level is None:
         log_level = "ERROR"
-    # Human-readable
-    log_format = (
-        "<green>{time:YYYY-MM-DD HH:mm:ss}</green> - <level>"
-        "{level: <8}</level> - {module} - <level>{message}</level>"
-    )
 
-    # log_format = log_format_dev if log_level.upper() == "DEBUG" else log_format_prod
+    if log_env is None:
+        log_env = os.getenv("LANGFLOW_LOG_ENV", "")
+
     logger.remove()  # Remove default handlers
     logger.patch(patching)
-    # Configure loguru to use RichHandler
-    logger.configure(
-        handlers=[
-            {
-                "sink": RichHandler(rich_tracebacks=True, markup=True),
-                "format": log_format,
-                "level": log_level.upper(),
-            }
-        ]
-    )
-
-    if not log_file:
-        cache_dir = Path(user_cache_dir("langflow"))
-        logger.debug(f"Cache directory: {cache_dir}")
-        log_file = cache_dir / "langflow.log"
-        logger.debug(f"Log file: {log_file}")
-    try:
-        log_file = Path(log_file)
-        log_file.parent.mkdir(parents=True, exist_ok=True)
-
-        logger.add(
-            sink=str(log_file),
-            level=log_level.upper(),
-            format=log_format,
-            rotation="10 MB",  # Log rotation based on file size
-            serialize=True,
+    if log_env.lower() == "container" or log_env.lower() == "container_json":
+        logger.add(sys.stdout, format="{message}", serialize=True)
+    elif log_env.lower() == "container_csv":
+        logger.add(sys.stdout, format="{time:YYYY-MM-DD HH:mm:ss.SSS} {level} {file} {line} {function} {message}")
+    else:
+        # Human-readable
+        log_format = (
+            "<green>{time:YYYY-MM-DD HH:mm:ss}</green> - <level>"
+            "{level: <8}</level> - {module} - <level>{message}</level>"
         )
-    except Exception as exc:
-        logger.error(f"Error setting up log file: {exc}")
+
+        # Configure loguru to use RichHandler
+        logger.configure(
+            handlers=[
+                {
+                    "sink": RichHandler(rich_tracebacks=True, markup=True),
+                    "format": log_format,
+                    "level": log_level.upper(),
+                }
+            ]
+        )
+
+        if not log_file:
+            cache_dir = Path(user_cache_dir("langflow"))
+            logger.debug(f"Cache directory: {cache_dir}")
+            log_file = cache_dir / "langflow.log"
+            logger.debug(f"Log file: {log_file}")
+        try:
+            log_file = Path(log_file)
+            log_file.parent.mkdir(parents=True, exist_ok=True)
+
+            logger.add(
+                sink=str(log_file),
+                level=log_level.upper(),
+                format=log_format,
+                rotation="10 MB",  # Log rotation based on file size
+                serialize=True,
+            )
+        except Exception as exc:
+            logger.error(f"Error setting up log file: {exc}")
 
     logger.debug(f"Logger set up with log level: {log_level}")
 
diff --git a/src/backend/base/poetry.lock b/src/backend/base/poetry.lock
index fd3571889..bc60a1fbd 100644
--- a/src/backend/base/poetry.lock
+++ b/src/backend/base/poetry.lock
@@ -112,13 +112,13 @@ frozenlist = ">=1.1.0"
 
 [[package]]
 name = "alembic"
-version = "1.13.1"
+version = "1.13.2"
 description = "A database migration tool for SQLAlchemy."
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "alembic-1.13.1-py3-none-any.whl", hash = "sha256:2edcc97bed0bd3272611ce3a98d98279e9c209e7186e43e75bbb1b2bdfdbcc43"},
-    {file = "alembic-1.13.1.tar.gz", hash = "sha256:4932c8558bf68f2ee92b9bbcb8218671c627064d5b08939437af6d77dc05e595"},
+    {file = "alembic-1.13.2-py3-none-any.whl", hash = "sha256:6b8733129a6224a9a711e17c99b08462dbf7cc9670ba8f2e2ae9af860ceb1953"},
+    {file = "alembic-1.13.2.tar.gz", hash = "sha256:1ff0ae32975f4fd96028c39ed9bb3c867fe3af956bd7bb37343b54c9fe7445ef"},
 ]
 
 [package.dependencies]
@@ -1172,19 +1172,19 @@ files = [
 
 [[package]]
 name = "langchain"
-version = "0.2.5"
+version = "0.2.6"
 description = "Building applications with LLMs through composability"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain-0.2.5-py3-none-any.whl", hash = "sha256:9aded9a65348254e1c93dcdaacffe4d1b6a5e7f74ef80c160c88ff78ad299228"},
-    {file = "langchain-0.2.5.tar.gz", hash = "sha256:ffdbf4fcea46a10d461bcbda2402220fcfd72a0c70e9f4161ae0510067b9b3bd"},
+    {file = "langchain-0.2.6-py3-none-any.whl", hash = "sha256:f86e8a7afd3e56f8eb5ba47f01dd00144fb9fc2f1db9873bd197347be2857aa4"},
+    {file = "langchain-0.2.6.tar.gz", hash = "sha256:867f6add370c1e3911b0e87d3dd0e36aec1e8f513bf06131340fe8f151d89dc5"},
 ]
 
 [package.dependencies]
 aiohttp = ">=3.8.3,<4.0.0"
 async-timeout = {version = ">=4.0.0,<5.0.0", markers = "python_version < \"3.11\""}
-langchain-core = ">=0.2.7,<0.3.0"
+langchain-core = ">=0.2.10,<0.3.0"
 langchain-text-splitters = ">=0.2.0,<0.3.0"
 langsmith = ">=0.1.17,<0.2.0"
 numpy = [
@@ -1195,24 +1195,24 @@ pydantic = ">=1,<3"
 PyYAML = ">=5.3"
 requests = ">=2,<3"
 SQLAlchemy = ">=1.4,<3"
-tenacity = ">=8.1.0,<9.0.0"
+tenacity = ">=8.1.0,<8.4.0 || >8.4.0,<9.0.0"
 
 [[package]]
 name = "langchain-community"
-version = "0.2.5"
+version = "0.2.6"
 description = "Community contributed LangChain integrations."
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain_community-0.2.5-py3-none-any.whl", hash = "sha256:bf37a334952e42c7676d083cf2d2c4cbfbb7de1949c4149fe19913e2b06c485f"},
-    {file = "langchain_community-0.2.5.tar.gz", hash = "sha256:476787b8c8c213b67e7b0eceb53346e787f00fbae12d8e680985bd4f93b0bf64"},
+    {file = "langchain_community-0.2.6-py3-none-any.whl", hash = "sha256:758cc800acfe5dd396bf8ba1b57c4792639ead0eab48ed0367f0732ec6ee1f68"},
+    {file = "langchain_community-0.2.6.tar.gz", hash = "sha256:40ce09a50ed798aa651ddb34c8978200fa8589b9813c7a28ce8af027bbf249f0"},
 ]
 
 [package.dependencies]
 aiohttp = ">=3.8.3,<4.0.0"
 dataclasses-json = ">=0.5.7,<0.7"
-langchain = ">=0.2.5,<0.3.0"
-langchain-core = ">=0.2.7,<0.3.0"
+langchain = ">=0.2.6,<0.3.0"
+langchain-core = ">=0.2.10,<0.3.0"
 langsmith = ">=0.1.0,<0.2.0"
 numpy = [
     {version = ">=1,<2", markers = "python_version < \"3.12\""},
@@ -1221,17 +1221,17 @@ numpy = [
 PyYAML = ">=5.3"
 requests = ">=2,<3"
 SQLAlchemy = ">=1.4,<3"
-tenacity = ">=8.1.0,<9.0.0"
+tenacity = ">=8.1.0,<8.4.0 || >8.4.0,<9.0.0"
 
 [[package]]
 name = "langchain-core"
-version = "0.2.9"
+version = "0.2.10"
 description = "Building applications with LLMs through composability"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain_core-0.2.9-py3-none-any.whl", hash = "sha256:426a5a4fea95a5db995ba5ab560b76edd4998fb6fe52ccc28ac987092a4cbfcd"},
-    {file = "langchain_core-0.2.9.tar.gz", hash = "sha256:f1c59082642921727844e1cd0eb36d451edd1872c20e193aa3142aac03495986"},
+    {file = "langchain_core-0.2.10-py3-none-any.whl", hash = "sha256:6eb72086b6bc86db9812da98f79e507c2209a15c0112aefd214a04182ada8586"},
+    {file = "langchain_core-0.2.10.tar.gz", hash = "sha256:33d1fc234ab58c80476eb5bbde2107ef522a2ce8f46bdf47d9e1bd21e054208f"},
 ]
 
 [package.dependencies]
@@ -1247,35 +1247,32 @@ tenacity = ">=8.1.0,<8.4.0 || >8.4.0,<9.0.0"
 
 [[package]]
 name = "langchain-experimental"
-version = "0.0.61"
+version = "0.0.62"
 description = "Building applications with LLMs through composability"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain_experimental-0.0.61-py3-none-any.whl", hash = "sha256:f9c516f528f55919743bd56fe1689a53bf74ae7f8902d64b9d8aebc61249cbe2"},
-    {file = "langchain_experimental-0.0.61.tar.gz", hash = "sha256:e9538efb994be5db3045cc582cddb9787c8299c86ffeee9d3779b7f58eef2226"},
+    {file = "langchain_experimental-0.0.62-py3-none-any.whl", hash = "sha256:9240f9e3490e819976f20a37863970036e7baacb7104b9eb6833d19ab6d518c9"},
+    {file = "langchain_experimental-0.0.62.tar.gz", hash = "sha256:9737fbc8429d24457ea4d368e3c9ba9ed1cace0564fb5f1a96a3027a588bd0ac"},
 ]
 
 [package.dependencies]
-langchain-community = ">=0.2.5,<0.3.0"
-langchain-core = ">=0.2.7,<0.3.0"
+langchain-community = ">=0.2.6,<0.3.0"
+langchain-core = ">=0.2.10,<0.3.0"
 
 [[package]]
 name = "langchain-text-splitters"
-version = "0.2.1"
+version = "0.2.2"
 description = "LangChain text splitting utilities"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain_text_splitters-0.2.1-py3-none-any.whl", hash = "sha256:c2774a85f17189eaca50339629d2316d13130d4a8d9f1a1a96f3a03670c4a138"},
-    {file = "langchain_text_splitters-0.2.1.tar.gz", hash = "sha256:06853d17d7241ecf5c97c7b6ef01f600f9b0fb953dd997838142a527a4f32ea4"},
+    {file = "langchain_text_splitters-0.2.2-py3-none-any.whl", hash = "sha256:1c80d4b11b55e2995f02d2a326c0323ee1eeff24507329bb22924e420c782dff"},
+    {file = "langchain_text_splitters-0.2.2.tar.gz", hash = "sha256:a1e45de10919fa6fb080ef0525deab56557e9552083600455cb9fa4238076140"},
 ]
 
 [package.dependencies]
-langchain-core = ">=0.2.0,<0.3.0"
-
-[package.extras]
-extended-testing = ["beautifulsoup4 (>=4.12.3,<5.0.0)", "lxml (>=4.9.3,<6.0)"]
+langchain-core = ">=0.2.10,<0.3.0"
 
 [[package]]
 name = "langchainhub"
@@ -2482,13 +2479,13 @@ pyasn1 = ">=0.1.3"
 
 [[package]]
 name = "sentry-sdk"
-version = "2.6.0"
+version = "2.7.0"
 description = "Python client for Sentry (https://sentry.io)"
 optional = false
 python-versions = ">=3.6"
 files = [
-    {file = "sentry_sdk-2.6.0-py2.py3-none-any.whl", hash = "sha256:422b91cb49378b97e7e8d0e8d5a1069df23689d45262b86f54988a7db264e874"},
-    {file = "sentry_sdk-2.6.0.tar.gz", hash = "sha256:65cc07e9c6995c5e316109f138570b32da3bd7ff8d0d0ee4aaf2628c3dd8127d"},
+    {file = "sentry_sdk-2.7.0-py2.py3-none-any.whl", hash = "sha256:db9594c27a4d21c1ebad09908b1f0dc808ef65c2b89c1c8e7e455143262e37c1"},
+    {file = "sentry_sdk-2.7.0.tar.gz", hash = "sha256:d846a211d4a0378b289ced3c434480945f110d0ede00450ba631fc2852e7a0d4"},
 ]
 
 [package.dependencies]
@@ -2520,7 +2517,7 @@ langchain = ["langchain (>=0.0.210)"]
 loguru = ["loguru (>=0.5)"]
 openai = ["openai (>=1.0.0)", "tiktoken (>=0.3.0)"]
 opentelemetry = ["opentelemetry-distro (>=0.35b0)"]
-opentelemetry-experimental = ["opentelemetry-distro (>=0.40b0,<1.0)", "opentelemetry-instrumentation-aiohttp-client (>=0.40b0,<1.0)", "opentelemetry-instrumentation-django (>=0.40b0,<1.0)", "opentelemetry-instrumentation-fastapi (>=0.40b0,<1.0)", "opentelemetry-instrumentation-flask (>=0.40b0,<1.0)", "opentelemetry-instrumentation-requests (>=0.40b0,<1.0)", "opentelemetry-instrumentation-sqlite3 (>=0.40b0,<1.0)", "opentelemetry-instrumentation-urllib (>=0.40b0,<1.0)"]
+opentelemetry-experimental = ["opentelemetry-instrumentation-aio-pika (==0.46b0)", "opentelemetry-instrumentation-aiohttp-client (==0.46b0)", "opentelemetry-instrumentation-aiopg (==0.46b0)", "opentelemetry-instrumentation-asgi (==0.46b0)", "opentelemetry-instrumentation-asyncio (==0.46b0)", "opentelemetry-instrumentation-asyncpg (==0.46b0)", "opentelemetry-instrumentation-aws-lambda (==0.46b0)", "opentelemetry-instrumentation-boto (==0.46b0)", "opentelemetry-instrumentation-boto3sqs (==0.46b0)", "opentelemetry-instrumentation-botocore (==0.46b0)", "opentelemetry-instrumentation-cassandra (==0.46b0)", "opentelemetry-instrumentation-celery (==0.46b0)", "opentelemetry-instrumentation-confluent-kafka (==0.46b0)", "opentelemetry-instrumentation-dbapi (==0.46b0)", "opentelemetry-instrumentation-django (==0.46b0)", "opentelemetry-instrumentation-elasticsearch (==0.46b0)", "opentelemetry-instrumentation-falcon (==0.46b0)", "opentelemetry-instrumentation-fastapi (==0.46b0)", "opentelemetry-instrumentation-flask (==0.46b0)", "opentelemetry-instrumentation-grpc (==0.46b0)", "opentelemetry-instrumentation-httpx (==0.46b0)", "opentelemetry-instrumentation-jinja2 (==0.46b0)", "opentelemetry-instrumentation-kafka-python (==0.46b0)", "opentelemetry-instrumentation-logging (==0.46b0)", "opentelemetry-instrumentation-mysql (==0.46b0)", "opentelemetry-instrumentation-mysqlclient (==0.46b0)", "opentelemetry-instrumentation-pika (==0.46b0)", "opentelemetry-instrumentation-psycopg (==0.46b0)", "opentelemetry-instrumentation-psycopg2 (==0.46b0)", "opentelemetry-instrumentation-pymemcache (==0.46b0)", "opentelemetry-instrumentation-pymongo (==0.46b0)", "opentelemetry-instrumentation-pymysql (==0.46b0)", "opentelemetry-instrumentation-pyramid (==0.46b0)", "opentelemetry-instrumentation-redis (==0.46b0)", "opentelemetry-instrumentation-remoulade (==0.46b0)", "opentelemetry-instrumentation-requests (==0.46b0)", "opentelemetry-instrumentation-sklearn (==0.46b0)", "opentelemetry-instrumentation-sqlalchemy (==0.46b0)", "opentelemetry-instrumentation-sqlite3 (==0.46b0)", "opentelemetry-instrumentation-starlette (==0.46b0)", "opentelemetry-instrumentation-system-metrics (==0.46b0)", "opentelemetry-instrumentation-threading (==0.46b0)", "opentelemetry-instrumentation-tornado (==0.46b0)", "opentelemetry-instrumentation-tortoiseorm (==0.46b0)", "opentelemetry-instrumentation-urllib (==0.46b0)", "opentelemetry-instrumentation-urllib3 (==0.46b0)", "opentelemetry-instrumentation-wsgi (==0.46b0)"]
 pure-eval = ["asttokens", "executing", "pure-eval"]
 pymongo = ["pymongo (>=3.1)"]
 pyspark = ["pyspark (>=2.4.4)"]
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 219b5c7d4..42752d9c4 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -83,6 +83,7 @@
     "build": "vite build",
     "serve": "vite preview",
     "format": "npx prettier --write \"{tests,src}/**/*.{js,jsx,ts,tsx,json,md}\" --ignore-path .prettierignore",
+    "check-format": "npx prettier --check \"{tests,src}/**/*.{js,jsx,ts,tsx,json,md}\" --ignore-path .prettierignore",
     "type-check": "tsc --noEmit --pretty --project tsconfig.json && vite"
   },
   "eslintConfig": {
@@ -132,4 +133,4 @@
     "ua-parser-js": "^1.0.38",
     "vite": "^5.3.1"
   }
-}
+}
\ No newline at end of file
diff --git a/src/frontend/playwright.config.ts b/src/frontend/playwright.config.ts
index 5af71db80..54153792d 100644
--- a/src/frontend/playwright.config.ts
+++ b/src/frontend/playwright.config.ts
@@ -15,13 +15,13 @@ dotenv.config({ path: path.resolve(__dirname, "../../.env") });
 export default defineConfig({
   testDir: "./tests",
   /* Run tests in files in parallel */
-  fullyParallel: false,
+  fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
+  retries: process.env.CI ? 2 : 3,
   /* Opt out of parallel tests on CI. */
-  workers: 1,
+  workers: 2,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   timeout: 120 * 1000,
   // reporter: [
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
index 4e53881d4..d8b3b772e 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
@@ -21,6 +21,7 @@ export default function HandleRenderComponent({
   colors,
   setFilterEdge,
   showNode,
+  testIdComplement,
 }: {
   left: boolean;
   nodes: any;
@@ -33,6 +34,7 @@ export default function HandleRenderComponent({
   colors: string[];
   setFilterEdge: any;
   showNode: any;
+  testIdComplement?: string;
 }) {
   return (
     <Button
@@ -52,7 +54,7 @@ export default function HandleRenderComponent({
         side={left ? "left" : "right"}
       >
         <Handle
-          data-test-id={`handle-${title.toLowerCase()}-${
+          data-testid={`handle-${testIdComplement}-${title.toLowerCase()}-${
             !showNode ? (left ? "target" : "source") : left ? "left" : "right"
           }`}
           type={left ? "target" : "source"}
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index afb15b8eb..10e5aa3e4 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -174,9 +174,10 @@ export default function ParameterComponent({
 
   const handleOnNewValue = async (
     newValue: string | string[] | boolean | Object[],
+    dbValue?: boolean,
     skipSnapshot: boolean | undefined = false,
   ): Promise<void> => {
-    handleOnNewValueHook(newValue, skipSnapshot);
+    handleOnNewValueHook(newValue, dbValue, skipSnapshot);
   };
 
   const handleNodeClass = (newNodeClass: APIClassType, code?: string): void => {
@@ -264,6 +265,7 @@ export default function ParameterComponent({
         colors={colors}
         setFilterEdge={setFilterEdge}
         showNode={showNode}
+        testIdComplement={`${data?.type?.toLowerCase()}-noshownode`}
       />
     )
   ) : (
@@ -390,6 +392,7 @@ export default function ParameterComponent({
             colors={colors}
             setFilterEdge={setFilterEdge}
             showNode={showNode}
+            testIdComplement={`${data?.type?.toLowerCase()}-shownode`}
           />
         )}
 
@@ -468,16 +471,6 @@ export default function ParameterComponent({
                   <InputGlobalComponent
                     disabled={disabled}
                     onChange={handleOnNewValue}
-                    setDb={(value) => {
-                      setNode(data.id, (oldNode) => {
-                        let newNode = cloneDeep(oldNode);
-                        newNode.data = {
-                          ...newNode.data,
-                        };
-                        newNode.data.node.template[name].load_from_db = value;
-                        return newNode;
-                      });
-                    }}
                     name={name}
                     data={data.node?.template[name]!}
                   />
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 18c2bbb6a..c71313b3b 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -26,7 +26,7 @@ import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useShortcutsStore } from "../../stores/shortcuts";
 import { useTypesStore } from "../../stores/typesStore";
-import { VertexBuildTypeAPI } from "../../types/api";
+import { OutputFieldType, VertexBuildTypeAPI } from "../../types/api";
 import { NodeDataType } from "../../types/flow";
 import { handleKeyDown, scapedJSONStringfy } from "../../utils/reactflowUtils";
 import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
@@ -279,7 +279,7 @@ export default function GenericNode({
 
   const shortcuts = useShortcutsStore((state) => state.shortcuts);
 
-  const renderOutputParameter = (output, idx) => {
+  const renderOutputParameter = (output: OutputFieldType, idx: number) => {
     return (
       <ParameterComponent
         index={idx}
diff --git a/src/frontend/src/CustomNodes/helpers/get-node-input-colors.ts b/src/frontend/src/CustomNodes/helpers/get-node-input-colors.ts
index abff92936..58b2ae677 100644
--- a/src/frontend/src/CustomNodes/helpers/get-node-input-colors.ts
+++ b/src/frontend/src/CustomNodes/helpers/get-node-input-colors.ts
@@ -1,6 +1,10 @@
 import { nodeColors } from "../../utils/styleUtils";
 
-export function getNodeInputColors(input_types, type, types) {
+export function getNodeInputColors(
+  input_types: string[] | undefined,
+  type: string | undefined,
+  types: { [char: string]: string },
+) {
   // Helper function to get the color based on type
   const getColorByType = (type) => nodeColors[type] ?? nodeColors.unknown;
 
diff --git a/src/frontend/src/CustomNodes/helpers/get-node-output-colors.ts b/src/frontend/src/CustomNodes/helpers/get-node-output-colors.ts
index d846a304e..dcac3d5cc 100644
--- a/src/frontend/src/CustomNodes/helpers/get-node-output-colors.ts
+++ b/src/frontend/src/CustomNodes/helpers/get-node-output-colors.ts
@@ -1,6 +1,12 @@
+import { OutputFieldType } from "../../types/api";
+import { NodeDataType } from "../../types/flow";
 import { nodeColors } from "../../utils/styleUtils";
 
-export function getNodeOutputColors(output, data, types): string[] {
+export function getNodeOutputColors(
+  output: OutputFieldType,
+  data: NodeDataType,
+  types: { [char: string]: string },
+): string[] {
   // Helper function to get the color based on type
   const getColorByType = (type) => nodeColors[type] ?? nodeColors.unknown;
 
diff --git a/src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.tsx b/src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.tsx
index 5802863b0..497c560c2 100644
--- a/src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.tsx
+++ b/src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.tsx
@@ -6,13 +6,14 @@ import {
 } from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
 import { ResponseErrorDetailAPI } from "../../types/api";
+import { NodeDataType } from "../../types/flow";
 
 const useFetchDataOnMount = (
-  data,
-  name,
-  handleUpdateValues,
-  setNode,
-  setIsLoading,
+  data: NodeDataType,
+  name: string,
+  handleUpdateValues: (name: string, data: NodeDataType) => Promise<any>,
+  setNode: (id: string, callback: (oldNode: any) => any) => void,
+  setIsLoading: (value: boolean) => void,
 ) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);
 
diff --git a/src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx b/src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx
index b9690e270..25ef54825 100644
--- a/src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx
+++ b/src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx
@@ -5,19 +5,20 @@ import {
 } from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
 import { ResponseErrorTypeAPI } from "../../types/api";
+import { NodeDataType } from "../../types/flow";
 
 const useHandleOnNewValue = (
-  data,
-  name,
-  takeSnapshot,
-  handleUpdateValues,
-  debouncedHandleUpdateValues,
-  setNode,
-  setIsLoading,
+  data: NodeDataType,
+  name: string,
+  takeSnapshot: () => void,
+  handleUpdateValues: (name: string, data: NodeDataType) => Promise<any>,
+  debouncedHandleUpdateValues: any,
+  setNode: (id: string, callback: (oldNode: any) => any) => void,
+  setIsLoading: (value: boolean) => void,
 ) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);
 
-  const handleOnNewValue = async (newValue, skipSnapshot = false) => {
+  const handleOnNewValue = async (newValue, dbValue, skipSnapshot = false) => {
     const nodeTemplate = data.node!.template[name];
     const currentValue = nodeTemplate.value;
 
@@ -62,6 +63,10 @@ const useHandleOnNewValue = (
         ...newNode.data,
       };
 
+      if (dbValue) {
+        newNode.data.node.template[name].load_from_db = dbValue;
+      }
+
       if (data.node?.template[name].real_time_refresh && newTemplate) {
         newNode.data.node.template = newTemplate;
       } else {
diff --git a/src/frontend/src/CustomNodes/hooks/use-handle-node-class.tsx b/src/frontend/src/CustomNodes/hooks/use-handle-node-class.tsx
index 933f836a4..e82c06e72 100644
--- a/src/frontend/src/CustomNodes/hooks/use-handle-node-class.tsx
+++ b/src/frontend/src/CustomNodes/hooks/use-handle-node-class.tsx
@@ -1,11 +1,12 @@
 import { cloneDeep } from "lodash";
+import { NodeDataType } from "../../types/flow";
 
 const useHandleNodeClass = (
-  data,
-  name,
-  takeSnapshot,
-  setNode,
-  updateNodeInternals,
+  data: NodeDataType,
+  name: string,
+  takeSnapshot: () => void,
+  setNode: (id: string, callback: (oldNode: any) => any) => void,
+  updateNodeInternals: (id: string) => void,
 ) => {
   const handleNodeClass = (newNodeClass, code, type?: string) => {
     if (!data.node) return;
diff --git a/src/frontend/src/CustomNodes/hooks/use-handle-refresh-buttons.tsx b/src/frontend/src/CustomNodes/hooks/use-handle-refresh-buttons.tsx
index e2ecb3f46..65345fcea 100644
--- a/src/frontend/src/CustomNodes/hooks/use-handle-refresh-buttons.tsx
+++ b/src/frontend/src/CustomNodes/hooks/use-handle-refresh-buttons.tsx
@@ -7,7 +7,10 @@ import useAlertStore from "../../stores/alertStore";
 import { ResponseErrorDetailAPI } from "../../types/api";
 import { handleUpdateValues } from "../../utils/parameterUtils";
 
-const useHandleRefreshButtonPress = (setIsLoading, setNode) => {
+const useHandleRefreshButtonPress = (
+  setIsLoading: (value: boolean) => void,
+  setNode: (id: string, callback: (oldNode: any) => any) => void,
+) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);
 
   const handleRefreshButtonPress = async (name, data) => {
diff --git a/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx b/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
index 155592b78..7a969b965 100644
--- a/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
+++ b/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
@@ -9,7 +9,10 @@ const useIconStatus = (
   buildStatus: BuildStatus | undefined,
   validationStatus: VertexBuildTypeAPI | null,
 ) => {
-  const conditionSuccess = validationStatus && validationStatus.valid;
+  const conditionSuccess =
+    !(!buildStatus || buildStatus === BuildStatus.TO_BUILD) &&
+    validationStatus &&
+    validationStatus.valid;
   const conditionError = buildStatus === BuildStatus.ERROR;
   const conditionInactive = buildStatus === BuildStatus.INACTIVE;
 
diff --git a/src/frontend/src/CustomNodes/hooks/use-update-validation-status.tsx b/src/frontend/src/CustomNodes/hooks/use-update-validation-status.tsx
index 2a7153dfb..e93691b5f 100644
--- a/src/frontend/src/CustomNodes/hooks/use-update-validation-status.tsx
+++ b/src/frontend/src/CustomNodes/hooks/use-update-validation-status.tsx
@@ -1,6 +1,11 @@
 import { useEffect } from "react";
+import { FlowPoolType } from "../../types/zustand/flow";
 
-const useUpdateValidationStatus = (dataId, flowPool, setValidationStatus) => {
+const useUpdateValidationStatus = (
+  dataId: string,
+  flowPool: FlowPoolType,
+  setValidationStatus: (value: any) => void,
+) => {
   useEffect(() => {
     const relevantData =
       flowPool[dataId] && flowPool[dataId]?.length > 0
diff --git a/src/frontend/src/CustomNodes/hooks/use-validation-status-string.tsx b/src/frontend/src/CustomNodes/hooks/use-validation-status-string.tsx
index 31929eb99..3ad905dc8 100644
--- a/src/frontend/src/CustomNodes/hooks/use-validation-status-string.tsx
+++ b/src/frontend/src/CustomNodes/hooks/use-validation-status-string.tsx
@@ -4,7 +4,7 @@ import { isErrorLog } from "../../types/utils/typeCheckingUtils";
 
 const useValidationStatusString = (
   validationStatus: VertexBuildTypeAPI | null,
-  setValidationString,
+  setValidationString: (value: any) => void,
 ) => {
   useEffect(() => {
     if (validationStatus && validationStatus.data?.outputs) {
diff --git a/src/frontend/src/components/ImageViewer/index.tsx b/src/frontend/src/components/ImageViewer/index.tsx
index 9e7f091d2..6e2c340fd 100644
--- a/src/frontend/src/components/ImageViewer/index.tsx
+++ b/src/frontend/src/components/ImageViewer/index.tsx
@@ -6,7 +6,7 @@ import useAlertStore from "../../stores/alertStore";
 import ForwardedIconComponent from "../genericIconComponent";
 import { Separator } from "../ui/separator";
 
-export default function ImageViewer({ image }) {
+export default function ImageViewer({ image }: { image: string }) {
   const viewerRef = useRef(null);
   const [errorDownloading, setErrordownloading] = useState(false);
   const setErrorList = useAlertStore((state) => state.setErrorData);
diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index 415cd92d7..4dcda2deb 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -29,7 +29,9 @@ export default function AddNewVariableButton({
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const componentFields = useTypesStore((state) => state.ComponentFields);
   const unavaliableFields = new Set(
-    Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields)),
+    Object.keys(
+      useGlobalVariablesStore((state) => state.unavaliableFields) ?? {},
+    ),
   );
 
   const availableFields = () => {
diff --git a/src/frontend/src/components/cardComponent/hooks/use-data-effect.tsx b/src/frontend/src/components/cardComponent/hooks/use-data-effect.tsx
new file mode 100644
index 000000000..21d29049a
--- /dev/null
+++ b/src/frontend/src/components/cardComponent/hooks/use-data-effect.tsx
@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { storeComponent } from "../../../types/store";
+
+const useDataEffect = (
+  data: storeComponent,
+  setLikedByUser: (value: any) => void,
+  setLikesCount: (value: any) => void,
+  setDownloadsCount: (value: any) => void,
+) => {
+  useEffect(() => {
+    if (data) {
+      setLikedByUser(data?.liked_by_user ?? false);
+      setLikesCount(data?.liked_by_count ?? 0);
+      setDownloadsCount(data?.downloads_count ?? 0);
+    }
+  }, [data, data?.liked_by_count, data?.liked_by_user, data?.downloads_count]);
+};
+
+export default useDataEffect;
diff --git a/src/frontend/src/components/cardComponent/hooks/use-handle-install.tsx b/src/frontend/src/components/cardComponent/hooks/use-handle-install.tsx
new file mode 100644
index 000000000..4c407349d
--- /dev/null
+++ b/src/frontend/src/components/cardComponent/hooks/use-handle-install.tsx
@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { getComponent } from "../../../controllers/API";
+import useFlowsManagerStore from "../../../stores/flowsManagerStore";
+import { storeComponent } from "../../../types/store";
+import cloneFlowWithParent from "../../../utils/storeUtils";
+
+const useInstallComponent = (
+  data: storeComponent,
+  name: string,
+  isStore: boolean,
+  downloadsCount: number,
+  setDownloadsCount: (value: any) => void,
+  setLoading: (value: boolean) => void,
+  setSuccessData: (value: { title: string }) => void,
+  setErrorData: (value: { title: string; list: string[] }) => void,
+) => {
+  const addFlow = useFlowsManagerStore((state) => state.addFlow);
+
+  const handleInstall = () => {
+    const temp = downloadsCount;
+    setDownloadsCount((old) => Number(old) + 1);
+    setLoading(true);
+
+    getComponent(data.id)
+      .then((res) => {
+        const newFlow = cloneFlowWithParent(res, res.id, data.is_component);
+        addFlow(true, newFlow)
+          .then((id) => {
+            setSuccessData({
+              title: `${name} ${isStore ? "Downloaded" : "Installed"} Successfully.`,
+            });
+            setLoading(false);
+          })
+          .catch((error) => {
+            setLoading(false);
+            setErrorData({
+              title: `Error ${isStore ? "downloading" : "installing"} the ${name}`,
+              list: [error.response.data.detail],
+            });
+          });
+      })
+      .catch((err) => {
+        setLoading(false);
+        setErrorData({
+          title: `Error ${isStore ? "downloading" : "installing"} the ${name}`,
+          list: [err.response.data.detail],
+        });
+        setDownloadsCount(temp);
+      });
+  };
+
+  return { handleInstall };
+};
+
+export default useInstallComponent;
diff --git a/src/frontend/src/components/cardComponent/hooks/use-handle-like.tsx b/src/frontend/src/components/cardComponent/hooks/use-handle-like.tsx
new file mode 100644
index 000000000..bfda076be
--- /dev/null
+++ b/src/frontend/src/components/cardComponent/hooks/use-handle-like.tsx
@@ -0,0 +1,51 @@
+import { postLikeComponent } from "../../../controllers/API";
+import { storeComponent } from "../../../types/store";
+
+const useLikeComponent = (
+  data: storeComponent,
+  name: string,
+  setLoadingLike: (value: boolean) => void,
+  likedByUser: boolean | null | undefined,
+  likesCount: number,
+  setLikedByUser: (value: any) => void,
+  setLikesCount: (value: any) => void,
+  setValidApiKey: (value: boolean) => void,
+  setErrorData: (value: { title: string; list: string[] }) => void,
+) => {
+  const handleLike = () => {
+    setLoadingLike(true);
+    if (likedByUser !== undefined || likedByUser !== null) {
+      const temp = likedByUser;
+      const tempNum = likesCount;
+      setLikedByUser((prev) => !prev);
+      setLikesCount((prev) => (temp ? prev - 1 : prev + 1));
+
+      postLikeComponent(data.id)
+        .then((response) => {
+          setLoadingLike(false);
+          setLikesCount(response.data.likes_count);
+          setLikedByUser(response.data.liked_by_user);
+        })
+        .catch((error) => {
+          setLoadingLike(false);
+          setLikesCount(tempNum);
+          setLikedByUser(temp);
+          if (error.response.status === 403) {
+            setValidApiKey(false);
+          } else {
+            console.error(error);
+            setErrorData({
+              title: `Error liking ${name}.`,
+              list: [error.response.data.detail],
+            });
+          }
+        });
+    }
+  };
+
+  return {
+    handleLike,
+  };
+};
+
+export default useLikeComponent;
diff --git a/src/frontend/src/components/cardComponent/hooks/use-on-drag-start.tsx b/src/frontend/src/components/cardComponent/hooks/use-on-drag-start.tsx
new file mode 100644
index 000000000..251c668e2
--- /dev/null
+++ b/src/frontend/src/components/cardComponent/hooks/use-on-drag-start.tsx
@@ -0,0 +1,34 @@
+import { useCallback } from "react";
+import { createRoot } from "react-dom/client";
+import useFlowsManagerStore from "../../../stores/flowsManagerStore";
+import { storeComponent } from "../../../types/store";
+import DragCardComponent from "../components/dragCardComponent";
+
+const useDragStart = (data: storeComponent) => {
+  const getFlowById = useFlowsManagerStore((state) => state.getFlowById);
+
+  const onDragStart = useCallback(
+    (event) => {
+      let image = <DragCardComponent data={data} />; // Replace with whatever you want here
+
+      const ghost = document.createElement("div");
+      ghost.style.transform = "translate(-10000px, -10000px)";
+      ghost.style.position = "absolute";
+      document.body.appendChild(ghost);
+      event.dataTransfer.setDragImage(ghost, 0, 0);
+
+      const root = createRoot(ghost);
+      root.render(image);
+
+      const flow = getFlowById(data.id);
+      if (flow) {
+        event.dataTransfer.setData("flow", JSON.stringify(data));
+      }
+    },
+    [data],
+  );
+
+  return { onDragStart };
+};
+
+export default useDragStart;
diff --git a/src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx b/src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx
new file mode 100644
index 000000000..e9236e98b
--- /dev/null
+++ b/src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx
@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { FlowType } from "../../../types/flow";
+
+const usePlaygroundEffect = (
+  currentFlowId: string,
+  playground: boolean,
+  openPlayground: boolean,
+  currentFlow: FlowType | undefined,
+  setNodes: (value: any, value2: boolean) => void,
+  setEdges: (value: any, value2: boolean) => void,
+  cleanFlowPool: () => void,
+) => {
+  useEffect(() => {
+    if (currentFlowId && playground) {
+      if (openPlayground) {
+        setNodes(currentFlow?.data?.nodes ?? [], true);
+        setEdges(currentFlow?.data?.edges ?? [], true);
+      } else {
+        setNodes([], true);
+        setEdges([], true);
+      }
+      cleanFlowPool();
+    }
+  }, [openPlayground]);
+};
+
+export default usePlaygroundEffect;
diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index ba00e6958..53d24f0af 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -28,6 +28,11 @@ import { Checkbox } from "../ui/checkbox";
 import { FormControl, FormField } from "../ui/form";
 import Loading from "../ui/loading";
 import DragCardComponent from "./components/dragCardComponent";
+import useDataEffect from "./hooks/use-data-effect";
+import useInstallComponent from "./hooks/use-handle-install";
+import useLikeComponent from "./hooks/use-handle-like";
+import useDragStart from "./hooks/use-on-drag-start";
+import usePlaygroundEffect from "./hooks/use-playground-effect";
 import { convertTestName } from "./utils/convert-test-name";
 
 export default function CollectionCardComponent({
@@ -59,11 +64,9 @@ export default function CollectionCardComponent({
   const isStore = false;
   const [loading, setLoading] = useState(false);
   const [loadingLike, setLoadingLike] = useState(false);
-  const [liked_by_user, setLiked_by_user] = useState(
-    data?.liked_by_user ?? false,
-  );
-  const [likes_count, setLikes_count] = useState(data?.liked_by_count ?? 0);
-  const [downloads_count, setDownloads_count] = useState(
+  const [likedByUser, setLikedByUser] = useState(data?.liked_by_user ?? false);
+  const [likesCount, setLikesCount] = useState(data?.liked_by_count ?? 0);
+  const [downloadsCount, setDownloadsCount] = useState(
     data?.downloads_count ?? 0,
   );
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
@@ -99,115 +102,45 @@ export default function CollectionCardComponent({
     return inputs.length > 0 || outputs.length > 0;
   }
 
-  useEffect(() => {
-    if (currentFlowId && playground) {
-      if (openPlayground) {
-        setNodes(currentFlow?.data?.nodes ?? [], true);
-        setEdges(currentFlow?.data?.edges ?? [], true);
-      } else {
-        setNodes([], true);
-        setEdges([], true);
-      }
-      cleanFlowPool();
-    }
-  }, [openPlayground]);
+  usePlaygroundEffect(
+    currentFlowId,
+    playground!,
+    openPlayground,
+    currentFlow,
+    setNodes,
+    setEdges,
+    cleanFlowPool,
+  );
 
-  useEffect(() => {
-    if (data) {
-      setLiked_by_user(data?.liked_by_user ?? false);
-      setLikes_count(data?.liked_by_count ?? 0);
-      setDownloads_count(data?.downloads_count ?? 0);
-    }
-  }, [data, data.liked_by_count, data.liked_by_user, data.downloads_count]);
+  useDataEffect(data, setLikedByUser, setLikesCount, setDownloadsCount);
 
-  function handleInstall() {
-    const temp = downloads_count;
-    setDownloads_count((old) => Number(old) + 1);
-    setLoading(true);
-    getComponent(data.id)
-      .then((res) => {
-        const newFlow = cloneFLowWithParent(res, res.id, data.is_component);
-        addFlow(true, newFlow)
-          .then((id) => {
-            setSuccessData({
-              title: `${name} ${
-                isStore ? "Downloaded" : "Installed"
-              } Successfully.`,
-            });
-            setLoading(false);
-          })
-          .catch((error) => {
-            setLoading(false);
-            setErrorData({
-              title: `Error ${
-                isStore ? "downloading" : "installing"
-              } the ${name}`,
-              list: [error["response"]["data"]["detail"]],
-            });
-          });
-      })
-      .catch((err) => {
-        setLoading(false);
-        setErrorData({
-          title: `Error ${isStore ? "downloading" : "installing"} the ${name}`,
-          list: [err["response"]["data"]["detail"]],
-        });
-        setDownloads_count(temp);
-      });
-  }
+  const { handleInstall } = useInstallComponent(
+    data,
+    name,
+    isStore,
+    downloadsCount,
+    setDownloadsCount,
+    setLoading,
+    setSuccessData,
+    setErrorData,
+  );
 
-  function handleLike() {
-    setLoadingLike(true);
-    if (liked_by_user !== undefined || liked_by_user !== null) {
-      const temp = liked_by_user;
-      const tempNum = likes_count;
-      setLiked_by_user((prev) => !prev);
-      if (!temp) {
-        setLikes_count((prev) => Number(prev) + 1);
-      } else {
-        setLikes_count((prev) => Number(prev) - 1);
-      }
-      postLikeComponent(data.id)
-        .then((response) => {
-          setLoadingLike(false);
-          setLikes_count(response.data.likes_count);
-          setLiked_by_user(response.data.liked_by_user);
-        })
-        .catch((error) => {
-          setLoadingLike(false);
-          setLikes_count(tempNum);
-          setLiked_by_user(temp);
-          if (error.response.status === 403) {
-            setValidApiKey(false);
-          } else {
-            console.error(error);
-            setErrorData({
-              title: `Error liking ${name}.`,
-              list: [error["response"]["data"]["detail"]],
-            });
-          }
-        });
-    }
-  }
+  const { handleLike } = useLikeComponent(
+    data,
+    name,
+    setLoadingLike,
+    likedByUser,
+    likesCount,
+    setLikedByUser,
+    setLikesCount,
+    setValidApiKey,
+    setErrorData,
+  );
 
   const isSelectedCard =
     selectedFlowsComponentsCards?.includes(data?.id) ?? false;
 
-  function onDragStart(event: React.DragEvent<any>) {
-    let image: JSX.Element = <DragCardComponent data={data} />; // <== whatever you want here
-
-    var ghost = document.createElement("div");
-    ghost.style.transform = "translate(-10000px, -10000px)";
-    ghost.style.position = "absolute";
-    document.body.appendChild(ghost);
-    event.dataTransfer.setDragImage(ghost, 0, 0);
-    const root = createRoot(ghost);
-    root.render(image);
-    const flow = getFlowById(data.id);
-    if (flow) {
-      event.dataTransfer.setData("flow", JSON.stringify(data));
-    }
-  }
+  const { onDragStart } = useDragStart(data);
 
   return (
     <>
@@ -264,7 +197,7 @@ export default function CollectionCardComponent({
                       <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
                         <IconComponent name="Heart" className={cn("h-4 w-4")} />
                         <span data-testid={`likes-${data.name}`}>
-                          {likes_count ?? 0}
+                          {likesCount ?? 0}
                         </span>
                       </span>
                     </ShadTooltip>
@@ -275,7 +208,7 @@ export default function CollectionCardComponent({
                           className="h-4 w-4"
                         />
                         <span data-testid={`downloads-${data.name}`}>
-                          {downloads_count ?? 0}
+                          {downloadsCount ?? 0}
                         </span>
                       </span>
                     </ShadTooltip>
@@ -296,6 +229,7 @@ export default function CollectionCardComponent({
                       render={({ field }) => (
                         <FormControl>
                           <Checkbox
+                            data-testid={`checkbox-component`}
                             aria-label="checkbox-component"
                             checked={field.value}
                             onCheckedChange={field.onChange}
@@ -324,24 +258,19 @@ export default function CollectionCardComponent({
                   )}
                 </span>
               )}
-              <div className="flex w-full flex-1 flex-wrap gap-2">
-                {/* {data.tags &&
-                  data.tags.length > 0 &&
-                  data.tags.map((tag, index) => (
-                    <Badge
-                      key={index}
-                      variant="outline"
-                      size="xq"
-                      className="text-muted-foreground"
-                    >
-                      {tag.name}
-                    </Badge>
-                  ))} */}
-              </div>
+              <div className="flex w-full flex-1 flex-wrap gap-2"></div>
             </div>
 
             <CardDescription className="pb-2 pt-2">
-              <div className="truncate-doubleline">{data.description}</div>
+              <div
+                className={
+                  data?.metadata !== undefined
+                    ? "truncate"
+                    : "truncate-doubleline"
+                }
+              >
+                {data.description}
+              </div>
             </CardDescription>
           </CardHeader>
         </div>
@@ -457,7 +386,7 @@ export default function CollectionCardComponent({
                           name="Heart"
                           className={cn(
                             "h-5 w-5",
-                            liked_by_user
+                            likedByUser
                               ? "fill-destructive stroke-destructive"
                               : "",
                             !authorized ? "text-ring" : "",
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 83c6c80c1..a88bd9573 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -67,6 +67,7 @@ export default function FlowToolbar(): JSX.Element {
               ? "button-disable text-muted-foreground"
               : "",
           )}
+          data-testid="shared-button-flow"
         >
           <ForwardedIconComponent
             name="Share3"
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 00721137f..ad8cfaf6f 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -23,7 +23,7 @@ export default function CodeAreaComponent({
   useEffect(() => {
     if (disabled && myValue !== "") {
       setMyValue("");
-      onChange("", true);
+      onChange("", undefined, true);
     }
   }, [disabled]);
 
diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 4b22ac11e..a7c80ebd6 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -26,6 +26,7 @@ import {
   TabsTrigger,
 } from "../../components/ui/tabs";
 import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants";
+import getTabsOrder from "../../modals/apiModal/utils/get-tabs-order";
 import { Case } from "../../shared/components/caseComponent";
 import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
@@ -56,6 +57,8 @@ export default function CodeTabsComponent({
   setActiveTweaks,
   activeTweaks,
   allowExport = false,
+  isThereTweaks = false,
+  isThereWH = false,
 }: codeTabsPropsType) {
   const [isCopied, setIsCopied] = useState<Boolean>(false);
   const [data, setData] = useState(flow ? flow["data"]!["nodes"] : null);
@@ -93,6 +96,8 @@ export default function CodeTabsComponent({
     return node.data.node.template[templateParam].type;
   };
 
+  const tabsOrder = getTabsOrder(isThereWH, isThereTweaks);
+
   return (
     <Tabs
       value={activeTab}
@@ -172,7 +177,7 @@ export default function CodeTabsComponent({
           className="api-modal-tabs-content overflow-hidden"
           key={idx} // Remember to add a unique key prop
         >
-          {idx < 5 ? (
+          {tabsOrder[idx].toLowerCase() !== "tweaks" ? (
             <div className="flex h-full w-full flex-col">
               {tab.description && (
                 <div
@@ -188,7 +193,7 @@ export default function CodeTabsComponent({
                 {tab.code}
               </SyntaxHighlighter>
             </div>
-          ) : idx === 5 ? (
+          ) : tabsOrder[idx].toLowerCase() === "tweaks" ? (
             <>
               <div className="api-modal-according-display">
                 <div
diff --git a/src/frontend/src/components/dataOutputComponent/index.tsx b/src/frontend/src/components/dataOutputComponent/index.tsx
index 9a3b2f66d..cc42be4e3 100644
--- a/src/frontend/src/components/dataOutputComponent/index.tsx
+++ b/src/frontend/src/components/dataOutputComponent/index.tsx
@@ -10,9 +10,14 @@ function DataOutputComponent({
   columnMode = "union",
 }: {
   pagination: boolean;
-  rows: any;
+  rows: any[];
   columnMode?: "intersection" | "union";
 }) {
+  // If the rows are not an array of objects, convert them to an array of objects
+  if (rows.some((row) => typeof row !== "object")) {
+    rows = rows.map((row) => ({ data: row }));
+  }
+
   const columns = extractColumnsFromRows(rows, columnMode);
 
   const columnDefs = columns.map((col, idx) => ({
diff --git a/src/frontend/src/components/editFlowSettingsComponent/index.tsx b/src/frontend/src/components/editFlowSettingsComponent/index.tsx
index b15e0c369..d6f518776 100644
--- a/src/frontend/src/components/editFlowSettingsComponent/index.tsx
+++ b/src/frontend/src/components/editFlowSettingsComponent/index.tsx
@@ -4,7 +4,7 @@ import { Label } from "../../components/ui/label";
 import { Textarea } from "../../components/ui/textarea";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { InputProps } from "../../types/components";
-import { cn } from "../../utils/utils";
+import { cn, isEndpointNameValid } from "../../utils/utils";
 
 export const EditFlowSettings: React.FC<InputProps> = ({
   name,
@@ -17,7 +17,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
   setEndpointName,
 }: InputProps): JSX.Element => {
   const [isMaxLength, setIsMaxLength] = useState(false);
-  const [isEndpointNameValid, setIsEndpointNameValid] = useState(true);
+  const [validEndpointName, setValidEndpointName] = useState(true);
   const [isInvalidName, setIsInvalidName] = useState(false);
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
 
@@ -34,10 +34,6 @@ export const EditFlowSettings: React.FC<InputProps> = ({
         invalid = true;
         break;
       }
-      if (value === currentFlow?.name) {
-        invalid = true;
-        break;
-      }
       invalid = false;
     }
     setIsInvalidName(invalid);
@@ -51,12 +47,8 @@ export const EditFlowSettings: React.FC<InputProps> = ({
   const handleEndpointNameChange = (event: ChangeEvent<HTMLInputElement>) => {
     // Validate the endpoint name
     // use this regex r'^[a-zA-Z0-9_-]+$'
-    const isValid =
-      (/^[a-zA-Z0-9_-]+$/.test(event.target.value) &&
-        event.target.value.length <= maxLength) ||
-      // empty is also valid
-      event.target.value.length === 0;
-    setIsEndpointNameValid(isValid);
+    const isValid = isEndpointNameValid(event.target.value, maxLength);
+    setValidEndpointName(isValid);
     setEndpointName!(event.target.value);
   };
 
@@ -115,21 +107,21 @@ export const EditFlowSettings: React.FC<InputProps> = ({
             }}
           />
         ) : (
-          <span
+          <div
             className={cn(
-              "font-normal text-muted-foreground word-break-break-word",
+              "max-h-[250px] overflow-auto font-normal text-muted-foreground word-break-break-word",
               description === "" ? "font-light italic" : "",
             )}
           >
             {description === "" ? "No description" : description}
-          </span>
+          </div>
         )}
       </Label>
       {setEndpointName && (
         <Label>
           <div className="edit-flow-arrangement mt-3">
             <span className="font-medium">Endpoint Name</span>
-            {!isEndpointNameValid && (
+            {!validEndpointName && (
               <span className="edit-flow-span">
                 Invalid endpoint name. Use only letters, numbers, hyphens, and
                 underscores ({maxLength} characters max).
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 8db5b823a..07de1fbb2 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -16,7 +16,7 @@ export default function FloatComponent({
   // Clear component state
   useEffect(() => {
     if (disabled && value !== "") {
-      onChange("", true);
+      onChange("", undefined, true);
     }
   }, [disabled]);
 
diff --git a/src/frontend/src/components/horizontalScrollFadeComponent/index.tsx b/src/frontend/src/components/horizontalScrollFadeComponent/index.tsx
index e0bf48917..db78daaaf 100644
--- a/src/frontend/src/components/horizontalScrollFadeComponent/index.tsx
+++ b/src/frontend/src/components/horizontalScrollFadeComponent/index.tsx
@@ -3,6 +3,9 @@ import { useEffect, useRef, useState } from "react";
 export default function HorizontalScrollFadeComponent({
   children,
   isFolder = true,
+}: {
+  children: JSX.Element | JSX.Element[];
+  isFolder?: boolean;
 }) {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const fadeContainerRef = useRef<HTMLDivElement>(null);
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 9710f7f61..f8dd9725f 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -27,7 +27,7 @@ export default function InputFileComponent({
   useEffect(() => {
     if (disabled && value !== "") {
       setMyValue("");
-      onChange("", true);
+      onChange("", undefined, true);
       onFileChange("");
     }
   }, [disabled, onChange]);
diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx
index 4d20e8132..1d3cf4f60 100644
--- a/src/frontend/src/components/inputGlobalComponent/index.tsx
+++ b/src/frontend/src/components/inputGlobalComponent/index.tsx
@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { Controller } from "react-hook-form";
 import { deleteGlobalVariable } from "../../controllers/API";
 import DeleteConfirmationModal from "../../modals/deleteConfirmationModal";
 import useAlertStore from "../../stores/alertStore";
@@ -13,7 +14,6 @@ import { CommandItem } from "../ui/command";
 export default function InputGlobalComponent({
   disabled,
   onChange,
-  setDb,
   name,
   data,
   editNode = false,
@@ -23,39 +23,17 @@ export default function InputGlobalComponent({
   );
 
   const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
-  const unavaliableFields = useGlobalVariablesStore(
-    (state) => state.unavaliableFields,
-  );
   const removeGlobalVariable = useGlobalVariablesStore(
     (state) => state.removeGlobalVariable,
   );
   const setErrorData = useAlertStore((state) => state.setErrorData);
 
   useEffect(() => {
-    if (data)
-      if (
-        ((globalVariablesEntries &&
-          !globalVariablesEntries.includes(data.value)) ||
-          !globalVariablesEntries) &&
-        data.load_from_db
-      ) {
-        setTimeout(() => {
-          onChange("", true);
-          setDb(false);
-        }, 100);
+    if (data && globalVariablesEntries)
+      if (data.load_from_db && !globalVariablesEntries.includes(data.value)) {
+        onChange("", false, true);
       }
-  }, [globalVariablesEntries, data]);
-
-  useEffect(() => {
-    if (!data.value && data.display_name) {
-      if (unavaliableFields[data.display_name!] && !disabled) {
-        setTimeout(() => {
-          setDb(true);
-          onChange(unavaliableFields[data.display_name!]);
-        }, 100);
-      }
-    }
-  }, [unavaliableFields]);
+  }, [globalVariablesEntries]);
 
   async function handleDelete(key: string) {
     const id = getVariableId(key);
@@ -64,8 +42,7 @@ export default function InputGlobalComponent({
         .then(() => {
           removeGlobalVariable(key);
           if (data?.value === key && data?.load_from_db) {
-            onChange("");
-            setDb(false);
+            onChange("", false);
           }
         })
         .catch(() => {
@@ -137,12 +114,10 @@ export default function InputGlobalComponent({
           : ""
       }
       setSelectedOption={(value) => {
-        onChange(value);
-        setDb(value !== "" ? true : false);
+        onChange(value, value !== "" ? true : false);
       }}
       onChange={(value, skipSnapshot) => {
-        onChange(value, skipSnapshot);
-        setDb(false);
+        onChange(value, false, skipSnapshot);
       }}
     />
   );
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index f0d67a402..7621d6732 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -19,7 +19,7 @@ export default function IntComponent({
   // Clear component state
   useEffect(() => {
     if (disabled && value !== "") {
-      onChange("", true);
+      onChange("", undefined, true);
     }
   }, [disabled, onChange]);
 
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 0dcec3dbf..c2e721baf 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -19,7 +19,7 @@ export default function PromptAreaComponent({
 }: PromptAreaComponentType): JSX.Element {
   useEffect(() => {
     if (disabled && value !== "") {
-      onChange("", true);
+      onChange("", undefined, true);
     }
   }, [disabled]);
 
diff --git a/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx b/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx
index c75bf4bec..4dd87fc50 100644
--- a/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx
+++ b/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx
@@ -9,7 +9,10 @@ import useFlowsManagerStore from "../../../stores/flowsManagerStore";
 import { useFolderStore } from "../../../stores/foldersStore";
 import { addVersionToDuplicates } from "../../../utils/reactflowUtils";
 
-const useFileDrop = (folderId, folderChangeCallback) => {
+const useFileDrop = (
+  folderId: string,
+  folderChangeCallback: (folderId: string) => void,
+) => {
   const setFolderDragging = useFolderStore((state) => state.setFolderDragging);
   const setFolderIdDragging = useFolderStore(
     (state) => state.setFolderIdDragging,
diff --git a/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx
index d0c3d4e53..1495ff98f 100644
--- a/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx
+++ b/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx
@@ -24,32 +24,21 @@ import ToggleShadComponent from "../../../toggleShadComponent";
 
 export default function TableNodeCellRender({
   node: { data },
-  value: {
-    value,
-    nodeClass,
-    handleOnNewValue: handleOnNewValueNode,
-    handleOnChangeDb: handleOnChangeDbNode,
-  },
+  value: { value, nodeClass, handleOnNewValue: handleOnNewValueNode },
 }: CustomCellRendererProps) {
-  const handleOnNewValue = (newValue: any, name: string) => {
-    handleOnNewValueNode(newValue, name);
+  const handleOnNewValue = (newValue: any, name: string, dbValue?: boolean) => {
+    handleOnNewValueNode(newValue, name, dbValue);
     setTemplateData((old) => {
       let newData = cloneDeep(old);
       newData.value = newValue;
+      if (dbValue) {
+        newData.load_from_db = newValue;
+      }
       return newData;
     });
     setTemplateValue(newValue);
   };
 
-  const handleOnChangeDb = (newValue: boolean, name: string) => {
-    handleOnChangeDbNode(newValue, name);
-    setTemplateData((old) => {
-      let newData = cloneDeep(old);
-      newData.load_from_db = newValue;
-      return newData;
-    });
-  };
-
   const [templateValue, setTemplateValue] = useState(value);
   const [templateData, setTemplateData] = useState(data);
 
@@ -106,10 +95,9 @@ export default function TableNodeCellRender({
             <InputGlobalComponent
               disabled={disabled}
               editNode={true}
-              onChange={(value) => handleOnNewValue(value, templateData.key)}
-              setDb={(value) => {
-                handleOnChangeDb(value, templateData.key);
-              }}
+              onChange={(value, dbValue, snapshot) =>
+                handleOnNewValue(value, templateData.key, dbValue)
+              }
               name={templateData.key}
               data={templateData}
             />
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 18a7f5b40..253e3eff9 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -18,7 +18,7 @@ export default function TextAreaComponent({
   // Clear text area
   useEffect(() => {
     if (disabled && value !== "") {
-      onChange("", true);
+      onChange("", undefined, true);
     }
   }, [disabled]);
 
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index f963d7234..8b5d4e177 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -863,3 +863,11 @@ export const TITLE_ERROR_UPDATING_COMPONENT =
   "Error while updating the Component";
 
 export const EMPTY_INPUT_SEND_MESSAGE = "No input message provided.";
+
+export const TABS_ORDER = [
+  "run curl",
+  "python api",
+  "js api",
+  "python code",
+  "chat widget html",
+];
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 17e89debe..ebb5d1247 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -1112,7 +1112,7 @@ export async function getMessagesTable(
   return { rows: rowsOrganized, columns };
 }
 
-export async function deleteMessagesFn(ids: number[]) {
+export async function deleteMessagesFn(ids: string[]) {
   try {
     return await api.delete(`${BASE_URL_API}monitor/messages`, {
       data: ids,
@@ -1124,5 +1124,8 @@ export async function deleteMessagesFn(ids: number[]) {
 }
 
 export async function updateMessageApi(data: Message) {
-  return await api.post(`${BASE_URL_API}monitor/messages/${data.index}`, data);
+  if (data.files && typeof data.files === "string") {
+    data.files = JSON.parse(data.files);
+  }
+  return await api.put(`${BASE_URL_API}monitor/messages/${data.id}`, data);
 }
diff --git a/src/frontend/tests/end-to-end/logs.spec.ts b/src/frontend/src/logs.spec.ts
similarity index 94%
rename from src/frontend/tests/end-to-end/logs.spec.ts
rename to src/frontend/src/logs.spec.ts
index 8f5ce4a2d..f3f0a7c95 100644
--- a/src/frontend/tests/end-to-end/logs.spec.ts
+++ b/src/frontend/src/logs.spec.ts
@@ -33,6 +33,11 @@ test("should able to see and interact with logs", async ({ page }) => {
   await page
     .getByTestId("popover-anchor-input-openai_api_key")
     .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown-model_name").click();
+  await page.getByTestId("gpt-4o-0-option").click();
+
+  await page.waitForTimeout(2000);
   await page.getByTestId("button_run_chat output").first().click();
 
   await page.waitForTimeout(2000);
diff --git a/src/frontend/src/modals/BundleModal/component/index.tsx b/src/frontend/src/modals/BundleModal/component/index.tsx
index c7521cfe2..df356ee18 100644
--- a/src/frontend/src/modals/BundleModal/component/index.tsx
+++ b/src/frontend/src/modals/BundleModal/component/index.tsx
@@ -43,10 +43,6 @@ export const FolderForms = ({
     if (folderToEdit) {
       setValue("name", folderToEdit.name);
       setValue("description", folderToEdit.description);
-      console.log(folderToEdit);
-
-      // setSelectedComponents(folderToEdit.components);
-      // setSelectedFlows(folderToEdit.flows);
       return;
     }
     setValue("name", "");
diff --git a/src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx b/src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx
index cb12ca7cb..cd3c3a1e1 100644
--- a/src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx
+++ b/src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx
@@ -1,8 +1,12 @@
+import { FolderType } from "../../../pages/MainPage/entities";
 import { addFolder, updateFolder } from "../../../pages/MainPage/services";
 import useAlertStore from "../../../stores/alertStore";
 import { useFolderStore } from "../../../stores/foldersStore";
 
-const useFolderSubmit = (setOpen, folderToEdit) => {
+const useFolderSubmit = (
+  setOpen: (a: boolean) => void,
+  folderToEdit: FolderType | null,
+) => {
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
diff --git a/src/frontend/src/modals/IOModal/components/SessionView/hooks/index.tsx b/src/frontend/src/modals/IOModal/components/SessionView/hooks/index.tsx
index e8e638def..17b44fd2b 100644
--- a/src/frontend/src/modals/IOModal/components/SessionView/hooks/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/SessionView/hooks/index.tsx
@@ -10,7 +10,7 @@ const useRemoveSession = (setSuccessData, setErrorData) => {
       await deleteMessagesFn(
         messages
           .filter((msg) => msg.session_id === session_id)
-          .map((msg) => msg.index),
+          .map((msg) => msg.id),
       );
       deleteSession(session_id);
       setSuccessData({
diff --git a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx b/src/frontend/src/modals/IOModal/components/SessionView/index.tsx
index 2ea6ef606..21b64cfb1 100644
--- a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/SessionView/index.tsx
@@ -17,7 +17,7 @@ export default function SessionView({ rows }: { rows: Array<any> }) {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
 
-  const [selectedRows, setSelectedRows] = useState<number[]>([]);
+  const [selectedRows, setSelectedRows] = useState<string[]>([]);
 
   const { handleRemoveMessages } = useRemoveMessages(
     setSelectedRows,
@@ -52,7 +52,7 @@ export default function SessionView({ rows }: { rows: Array<any> }) {
       ]}
       overlayNoRowsTemplate="No data available"
       onSelectionChanged={(event: SelectionChangedEvent) => {
-        setSelectedRows(event.api.getSelectedRows().map((row) => row.index));
+        setSelectedRows(event.api.getSelectedRows().map((row) => row.id));
       }}
       rowSelection="multiple"
       suppressRowClickSelection={true}
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
index 29f88453a..0a9ba4a7e 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
@@ -45,6 +45,7 @@ const TextAreaWrapper = ({
 
   return (
     <Textarea
+      data-testid="input-chat-playground"
       onFocus={(e) => {
         setInputFocus(true);
         e.target.style.borderTopWidth = "0";
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-auto-resize-text-area.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-auto-resize-text-area.tsx
index d4102fe9d..41428e4a4 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-auto-resize-text-area.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-auto-resize-text-area.tsx
@@ -1,6 +1,9 @@
 import { useEffect } from "react";
 
-const useAutoResizeTextArea = (value, inputRef) => {
+const useAutoResizeTextArea = (
+  value: string,
+  inputRef: React.RefObject<HTMLInputElement>,
+) => {
   useEffect(() => {
     if (inputRef.current && inputRef.current.scrollHeight! !== 0) {
       inputRef.current.style!.height = "inherit"; // Reset the height
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx
index b1ff9d143..9b30fba41 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx
@@ -7,10 +7,10 @@ import {
 import useFileUpload from "./use-file-upload";
 
 const useDragAndDrop = (
-  setIsDragging,
-  setFiles,
-  currentFlowId,
-  setErrorData,
+  setIsDragging: (value: boolean) => void,
+  setFiles: (value: any) => void,
+  currentFlowId: string,
+  setErrorData: (value: any) => void,
 ) => {
   const dragOver = (e) => {
     e.preventDefault();
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-focus-unlock.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-focus-unlock.tsx
index 15dfe70ae..6e951d80f 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-focus-unlock.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-focus-unlock.tsx
@@ -1,6 +1,9 @@
 import { useEffect } from "react";
 
-const useFocusOnUnlock = (lockChat, inputRef) => {
+const useFocusOnUnlock = (
+  lockChat: boolean,
+  inputRef: React.RefObject<HTMLInputElement>,
+) => {
   useEffect(() => {
     if (!lockChat && inputRef.current) {
       inputRef.current.focus();
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx
index 5a9e85195..29bc86e6a 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx
@@ -1,3 +1,4 @@
+import { AxiosResponse } from "axios";
 import { useEffect } from "react";
 import ShortUniqueId from "short-unique-id";
 import {
@@ -6,9 +7,18 @@ import {
   SN_ERROR_TEXT,
 } from "../../../../../../constants/constants";
 import useAlertStore from "../../../../../../stores/alertStore";
+import { UploadFileTypeAPI } from "../../../../../../types/api";
 import useFileUpload from "./use-file-upload";
 
-const useUpload = (uploadFile, currentFlowId, setFiles, lockChat) => {
+const useUpload = (
+  uploadFile: (
+    file: File,
+    id: string,
+  ) => Promise<AxiosResponse<UploadFileTypeAPI>>,
+  currentFlowId: string,
+  setFiles: any,
+  lockChat: boolean,
+) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   useEffect(() => {
     const handlePaste = (event: ClipboardEvent): void => {
diff --git a/src/frontend/src/modals/IOModal/components/chatView/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/index.tsx
index 1149425dc..e8b0ae092 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/index.tsx
@@ -63,8 +63,6 @@ export default function ChatView({
       )
       .map((output, index) => {
         try {
-          console.log("output:", output);
-
           const messageOutput = output.data.message;
           const hasMessageValue =
             messageOutput?.message ||
diff --git a/src/frontend/src/modals/apiModal/index.tsx b/src/frontend/src/modals/apiModal/index.tsx
index 36ded5afb..7971d8288 100644
--- a/src/frontend/src/modals/apiModal/index.tsx
+++ b/src/frontend/src/modals/apiModal/index.tsx
@@ -18,11 +18,13 @@ import { buildContent } from "./utils/build-content";
 import { buildTweaks } from "./utils/build-tweaks";
 import { checkCanBuildTweakObject } from "./utils/check-can-build-tweak-object";
 import { getChangesType } from "./utils/get-changes-types";
+import getCodesObj from "./utils/get-codes-obj";
 import { getCurlRunCode, getCurlWebhookCode } from "./utils/get-curl-code";
 import getJsApiCode from "./utils/get-js-api-code";
 import { getNodesWithDefaultValue } from "./utils/get-nodes-with-default-value";
 import getPythonApiCode from "./utils/get-python-api-code";
 import getPythonCode from "./utils/get-python-code";
+import getTabsOrder from "./utils/get-tabs-order";
 import { getValue } from "./utils/get-value";
 import getWidgetCode from "./utils/get-widget-code";
 import { createTabsArray } from "./utils/tabs-array";
@@ -42,11 +44,12 @@ const ApiModal = forwardRef(
     },
     ref,
   ) => {
+    const tweaksCode = buildTweaks(flow);
     const tweak = useTweaksStore((state) => state.tweak);
     const addTweaks = useTweaksStore((state) => state.setTweak);
     const setTweaksList = useTweaksStore((state) => state.setTweaksList);
     const tweaksList = useTweaksStore((state) => state.tweaksList);
-
+    const isThereTweaks = Object.keys(tweaksCode).length > 0;
     const [activeTweaks, setActiveTweaks] = useState(false);
     const { autoLogin } = useContext(AuthContext);
     const [open, setOpen] =
@@ -80,7 +83,6 @@ const ApiModal = forwardRef(
     const pythonCode = getPythonCode(flow?.name, tweak);
     const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
     const includeWebhook = flow.webhook;
-    const tweaksCode = buildTweaks(flow);
     const codesArray = [
       runCurlCode,
       webhookCurlCode,
@@ -119,7 +121,7 @@ const ApiModal = forwardRef(
 
       filterNodes();
 
-      if (Object.keys(tweaksCode).length > 0) {
+      if (isThereTweaks) {
         setActiveTab("0");
         setTabs(createTabsArray(codesArray, includeWebhook, true));
       } else {
@@ -213,21 +215,25 @@ const ApiModal = forwardRef(
       );
       const pythonCode = getPythonCode(flow?.name, cloneTweak);
       const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
+      const codesObj = getCodesObj({
+        runCurlCode,
+        webhookCurlCode,
+        pythonApiCode,
+        jsApiCode,
+        pythonCode,
+        widgetCode,
+      });
+      const tabsOrder = getTabsOrder(includeWebhook, isThereTweaks);
       if (tabs && tabs?.length > 0) {
-        let i = 0;
-        tabs![i].code = runCurlCode;
-        i++;
-        if (includeWebhook) {
-          tabs![i].code = webhookCurlCode;
-          i++;
-        }
-        tabs![i].code = pythonApiCode;
-        i++;
-        tabs![i].code = jsApiCode;
-        i++;
-        tabs![i].code = pythonCode;
-        i++;
-        tabs![i].code = widgetCode;
+        tabs.forEach((tab, idx) => {
+          const order = tabsOrder[idx];
+          if (order && order.toLowerCase() === tab.name.toLowerCase()) {
+            const codeToFind = codesObj.find(
+              (c) => c.name.toLowerCase() === tab.name.toLowerCase(),
+            );
+            tab.code = codeToFind?.code;
+          }
+        });
       }
     };
 
@@ -244,6 +250,8 @@ const ApiModal = forwardRef(
         </BaseModal.Header>
         <BaseModal.Content overflowHidden>
           <CodeTabsComponent
+            isThereTweaks={isThereTweaks}
+            isThereWH={includeWebhook ?? false}
             flow={flow}
             tabs={tabs!}
             activeTab={activeTab}
diff --git a/src/frontend/src/modals/apiModal/utils/get-codes-obj.tsx b/src/frontend/src/modals/apiModal/utils/get-codes-obj.tsx
new file mode 100644
index 000000000..ed232d510
--- /dev/null
+++ b/src/frontend/src/modals/apiModal/utils/get-codes-obj.tsx
@@ -0,0 +1,40 @@
+import {
+  getCodesObjProps,
+  getCodesObjReturn,
+} from "../../../types/utils/functions";
+
+export default function getCodesObj({
+  runCurlCode,
+  webhookCurlCode,
+  pythonApiCode,
+  jsApiCode,
+  pythonCode,
+  widgetCode,
+}: getCodesObjProps): getCodesObjReturn {
+  return [
+    {
+      name: "run curl",
+      code: runCurlCode,
+    },
+    {
+      name: "webhook curl",
+      code: webhookCurlCode,
+    },
+    {
+      name: "python api",
+      code: pythonApiCode,
+    },
+    {
+      name: "js api",
+      code: jsApiCode,
+    },
+    {
+      name: "python code",
+      code: pythonCode,
+    },
+    {
+      name: "chat widget html",
+      code: widgetCode,
+    },
+  ];
+}
diff --git a/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx b/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
index c17118d1a..6d92f4c96 100644
--- a/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
+++ b/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
@@ -8,7 +8,7 @@ export function getCurlRunCode(
   flowId: string,
   isAuth: boolean,
   tweaksBuildedObject,
-  endpointName?: string,
+  endpointName?: string | null,
 ): string {
   const tweaksObject = tweaksBuildedObject[0];
   // show the endpoint name in the curl command if it exists
@@ -35,7 +35,11 @@ export function getCurlRunCode(
  * @param {string} options.endpointName - The name of the webhook endpoint.
  * @returns {string} The cURL command.
  */
-export function getCurlWebhookCode(flowId, isAuth, endpointName?: string) {
+export function getCurlWebhookCode(
+  flowId,
+  isAuth,
+  endpointName?: string | null,
+) {
   return `curl -X POST \\
   "${window.location.protocol}//${window.location.host}/api/v1/webhook/${
     endpointName || flowId
diff --git a/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx b/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx
index e49817d81..b40ed1e3a 100644
--- a/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx
+++ b/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx
@@ -10,7 +10,7 @@ export default function getJsApiCode(
   flowId: string,
   isAuth: boolean,
   tweaksBuildedObject: any[],
-  endpointName?: string,
+  endpointName?: string | null,
 ): string {
   let tweaksString = "{}";
   if (tweaksBuildedObject && tweaksBuildedObject.length > 0) {
diff --git a/src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx b/src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx
index 9aa946746..224d1d711 100644
--- a/src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx
+++ b/src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx
@@ -10,7 +10,7 @@ export default function getPythonApiCode(
   flowId: string,
   isAuth: boolean,
   tweaksBuildedObject: any[],
-  endpointName?: string,
+  endpointName?: string | null,
 ): string {
   let tweaksString = "{}";
   if (tweaksBuildedObject && tweaksBuildedObject.length > 0) {
diff --git a/src/frontend/src/modals/apiModal/utils/get-tabs-order.tsx b/src/frontend/src/modals/apiModal/utils/get-tabs-order.tsx
new file mode 100644
index 000000000..b1a1e3020
--- /dev/null
+++ b/src/frontend/src/modals/apiModal/utils/get-tabs-order.tsx
@@ -0,0 +1,16 @@
+import { cloneDeep } from "lodash";
+import { TABS_ORDER } from "../../../constants/constants";
+
+export default function getTabsOrder(
+  isThereWH: boolean = false,
+  isThereTweaks: boolean = false,
+): string[] {
+  const defaultOrder = cloneDeep(TABS_ORDER);
+  if (isThereTweaks) {
+    defaultOrder.push("tweaks");
+  }
+  if (isThereWH) {
+    defaultOrder.splice(1, 0, "webhook curl");
+  }
+  return defaultOrder;
+}
diff --git a/src/frontend/src/modals/apiModal/utils/tabs-array.tsx b/src/frontend/src/modals/apiModal/utils/tabs-array.tsx
index dc50bf7a3..a194fae17 100644
--- a/src/frontend/src/modals/apiModal/utils/tabs-array.tsx
+++ b/src/frontend/src/modals/apiModal/utils/tabs-array.tsx
@@ -3,6 +3,8 @@ export function createTabsArray(
   includeWebhookCurl = false,
   includeTweaks = false,
 ) {
+  // console.log(includeTweaks)
+  console.log(includeWebhookCurl);
   const tabs = [
     {
       name: "Run cURL",
diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx
index 14263a9c6..cad877aa6 100644
--- a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx
+++ b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx
@@ -2,11 +2,11 @@ import { ColDef, ValueGetterParams } from "ag-grid-community";
 import { useMemo } from "react";
 import TableNodeCellRender from "../../../components/tableComponent/components/tableNodeCellRender";
 import TableToggleCellRender from "../../../components/tableComponent/components/tableToggleCellRender";
+import { NodeDataType } from "../../../types/flow";
 
 const useColumnDefs = (
-  myData: any,
-  handleOnNewValue: (newValue: any, name: string) => void,
-  handleOnChangeDb: (value: boolean, key: string) => void,
+  myData: NodeDataType,
+  handleOnNewValue: (newValue: any, name: string, setDb?: boolean) => void,
   changeAdvanced: (n: string) => void,
   open: boolean,
 ) => {
@@ -48,7 +48,6 @@ const useColumnDefs = (
             value: params.data.value,
             nodeClass: myData.node,
             handleOnNewValue: handleOnNewValue,
-            handleOnChangeDb: handleOnChangeDb,
           };
         },
         minWidth: 340,
diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx
index cafd25c6d..e2cd5a772 100644
--- a/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx
+++ b/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx
@@ -1,14 +1,12 @@
 import { useMemo } from "react";
 import { LANGFLOW_SUPPORTED_TYPES } from "../../../constants/constants";
-import { TemplateVariableType } from "../../../types/api";
+import { NodeDataType } from "../../../types/flow";
 
-const useRowData = (myData, open) => {
+const useRowData = (myData: NodeDataType, open: boolean) => {
   const rowData = useMemo(() => {
     return Object.keys(myData.node!.template)
       .filter((key: string) => {
-        const templateParam = myData.node!.template[
-          key
-        ] as TemplateVariableType;
+        const templateParam = myData.node!.template[key] as any;
         return (
           key.charAt(0) !== "_" &&
           templateParam.show &&
@@ -20,9 +18,7 @@ const useRowData = (myData, open) => {
         );
       })
       .map((key: string) => {
-        const templateParam = myData.node!.template[
-          key
-        ] as TemplateVariableType;
+        const templateParam = myData.node!.template[key] as any;
         return {
           ...templateParam,
           key: key,
diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx
index f4a368fa6..e267b6bac 100644
--- a/src/frontend/src/modals/editNodeModal/index.tsx
+++ b/src/frontend/src/modals/editNodeModal/index.tsx
@@ -16,13 +16,11 @@ const EditNodeModal = forwardRef(
       nodeLength,
       open,
       setOpen,
-      //      setOpenWDoubleClick,
       data,
     }: {
       nodeLength: number;
       open: boolean;
       setOpen: (open: boolean) => void;
-      //      setOpenWDoubleClick: (open: boolean) => void;
       data: NodeDataType;
     },
     ref,
@@ -38,12 +36,11 @@ const EditNodeModal = forwardRef(
         !myData.current.node!.template[n]?.advanced;
     }
 
-    const handleOnNewValue = (newValue: any, key: string) => {
+    const handleOnNewValue = (newValue: any, key: string, setDb?: boolean) => {
       myData.current.node!.template[key].value = newValue;
-    };
-
-    const handleOnChangeDb = (newValue: boolean, key: string) => {
-      myData.current.node!.template[key].load_from_db = newValue;
+      if (setDb) {
+        myData.current.node!.template[key].load_from_db = newValue;
+      }
     };
 
     const rowData = useRowData(data, open);
@@ -51,7 +48,6 @@ const EditNodeModal = forwardRef(
     const columnDefs: ColDef[] = useColumnDefs(
       data,
       handleOnNewValue,
-      handleOnChangeDb,
       changeAdvanced,
       open,
     );
@@ -71,7 +67,7 @@ const EditNodeModal = forwardRef(
           <></>
         </BaseModal.Trigger>
         <BaseModal.Header description={data.node?.description!}>
-          <span className="pr-2">{data.type}</span>
+          <span className="pr-2">{data.node?.display_name ?? data.type}</span>
           <div>
             <Badge size="sm" variant={isDark ? "gray" : "secondary"}>
               ID: {data.id}
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index e5bc58d0d..b76ac85a5 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -6,6 +6,7 @@ import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { FlowSettingsPropsType } from "../../types/components";
 import { FlowType } from "../../types/flow";
+import { isEndpointNameValid } from "../../utils/utils";
 import BaseModal from "../baseModal";
 
 export default function FlowSettingsModal({
@@ -22,13 +23,17 @@ export default function FlowSettingsModal({
 
   const [name, setName] = useState(currentFlow!.name);
   const [description, setDescription] = useState(currentFlow!.description);
-  const [endpoint_name, setEndpointName] = useState(currentFlow!.endpoint_name);
+  const [endpoint_name, setEndpointName] = useState(
+    currentFlow!.endpoint_name ?? "",
+  );
   const [isSaving, setIsSaving] = useState(false);
+  const [disableSave, setDisableSave] = useState(true);
   function handleClick(): void {
     setIsSaving(true);
     currentFlow!.name = name;
     currentFlow!.description = description;
-    currentFlow!.endpoint_name = endpoint_name;
+    currentFlow!.endpoint_name =
+      endpoint_name && endpoint_name.length > 0 ? endpoint_name : null;
     saveFlow(currentFlow!)
       ?.then(() => {
         setOpen(false);
@@ -54,6 +59,18 @@ export default function FlowSettingsModal({
     setNameList(tempNameList.filter((name) => name !== currentFlow!.name));
   }, [flows]);
 
+  useEffect(() => {
+    if (
+      (!nameLists.includes(name) && currentFlow?.name !== name) ||
+      currentFlow?.description !== description ||
+      ((currentFlow?.endpoint_name ?? "") !== endpoint_name &&
+        isEndpointNameValid(endpoint_name ?? "", 50))
+    ) {
+      setDisableSave(false);
+    } else {
+      setDisableSave(true);
+    }
+  }, [nameLists, currentFlow, description, endpoint_name, name]);
   return (
     <BaseModal
       open={open}
@@ -80,8 +97,8 @@ export default function FlowSettingsModal({
       <BaseModal.Footer
         submit={{
           label: "Save",
-          disabled: nameLists.includes(name) || name === currentFlow!.name,
           dataTestId: "save-flow-settings",
+          disabled: disableSave,
           loading: isSaving,
         }}
       />
diff --git a/src/frontend/src/modals/foldersModal/hooks/submit-folder.tsx b/src/frontend/src/modals/foldersModal/hooks/submit-folder.tsx
index 71a8ac944..a60f2a419 100644
--- a/src/frontend/src/modals/foldersModal/hooks/submit-folder.tsx
+++ b/src/frontend/src/modals/foldersModal/hooks/submit-folder.tsx
@@ -1,9 +1,13 @@
 import { useNavigate } from "react-router-dom";
+import { FolderType } from "../../../pages/MainPage/entities";
 import { addFolder, updateFolder } from "../../../pages/MainPage/services";
 import useAlertStore from "../../../stores/alertStore";
 import { useFolderStore } from "../../../stores/foldersStore";
 
-const useFolderSubmit = (setOpen, folderToEdit) => {
+const useFolderSubmit = (
+  setOpen: (a: boolean) => void,
+  folderToEdit: FolderType | null,
+) => {
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
diff --git a/src/frontend/src/modals/newFlowModal/index.tsx b/src/frontend/src/modals/newFlowModal/index.tsx
index 37a6afeeb..295ecd395 100644
--- a/src/frontend/src/modals/newFlowModal/index.tsx
+++ b/src/frontend/src/modals/newFlowModal/index.tsx
@@ -10,12 +10,6 @@ export default function NewFlowModal({
 }: newFlowModalPropsType): JSX.Element {
   const examples = useFlowsManagerStore((state) => state.examples);
 
-  examples?.forEach((example) => {
-    if (example.name === "Blog Writter") {
-      example.name = "Blog Writer";
-    }
-  });
-
   return (
     <BaseModal size="three-cards" open={open} setOpen={setOpen}>
       <BaseModal.Header description={"Select a template below"}>
diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx
index 13d50f0a9..c0ba3d628 100644
--- a/src/frontend/src/modals/shareModal/index.tsx
+++ b/src/frontend/src/modals/shareModal/index.tsx
@@ -128,7 +128,7 @@ export default function ShareModal({
         successShare,
         (err) => {
           setErrorData({
-            title: "Error sharing " + is_component ? "component" : "flow",
+            title: "Error sharing " + (is_component ? "component" : "flow"),
             list: [err["response"]["data"]["detail"]],
           });
         },
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index f302c70e3..87bbfbf68 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -228,7 +228,13 @@ export default function Page({
   }
 
   function handleCopy(e: KeyboardEvent) {
-    if (!isWrappedWithClass(e, "nocopy")) {
+    const multipleSelection = lastSelection?.nodes
+      ? lastSelection?.nodes.length > 0
+      : false;
+    if (
+      !isWrappedWithClass(e, "nocopy") &&
+      (isWrappedWithClass(e, "react-flow__node") || multipleSelection)
+    ) {
       e.preventDefault();
       (e as unknown as Event).stopImmediatePropagation();
       if (window.getSelection()?.toString().length === 0 && lastSelection) {
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/components/collectionCard/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/components/collectionCard/index.tsx
new file mode 100644
index 000000000..1c9c0799e
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/components/collectionCard/index.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { Link, useNavigate } from "react-router-dom";
+import CollectionCardComponent from "../../../../../../components/cardComponent";
+import IconComponent from "../../../../../../components/genericIconComponent";
+import { Button } from "../../../../../../components/ui/button";
+const CollectionCard = ({ item, type, isLoading, control }) => {
+  const navigate = useNavigate();
+  const isComponent = item.is_component ?? false;
+  const editFlowLink = `/flow/${item.id}`;
+  const editFlowButtonTestId = `edit-flow-button-${item.id}`;
+
+  const handleClick = () => {
+    if (!isComponent) {
+      navigate(editFlowLink);
+    }
+  };
+
+  const renderButton = () => {
+    if (!isComponent) {
+      return (
+        <Link to={editFlowLink}>
+          <Button
+            tabIndex={-1}
+            variant="outline"
+            size="sm"
+            className="whitespace-nowrap"
+            data-testid={editFlowButtonTestId}
+          >
+            <IconComponent
+              name="ExternalLink"
+              className="main-page-nav-button select-none"
+            />
+            Edit Flow
+          </Button>
+        </Link>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <CollectionCardComponent
+      is_component={type === "component"}
+      data={{
+        is_component: isComponent,
+        ...item,
+      }}
+      disabled={isLoading}
+      data-testid={editFlowButtonTestId}
+      button={renderButton()!}
+      onClick={!isComponent ? handleClick : undefined}
+      playground={!isComponent}
+      control={control}
+    />
+  );
+};
+
+export default CollectionCard;
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-delete-multiple.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-delete-multiple.tsx
index 395088193..46caecbf1 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-delete-multiple.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-delete-multiple.tsx
@@ -1,15 +1,15 @@
 import { useCallback } from "react";
 
 const useDeleteMultipleFlows = (
-  selectedFlowsComponentsCards,
-  removeFlow,
-  resetFilter,
-  getFoldersApi,
-  folderId,
-  myCollectionId,
-  getFolderById,
-  setSuccessData,
-  setErrorData,
+  selectedFlowsComponentsCards: string[],
+  removeFlow: (selectedFlowsComponentsCards: string[]) => Promise<void>,
+  resetFilter: () => void,
+  getFoldersApi: (refetch?: boolean) => Promise<void>,
+  folderId: string | undefined,
+  myCollectionId: string,
+  getFolderById: (id: string) => void,
+  setSuccessData: (data: { title: string }) => void,
+  setErrorData: (data: { title: string; list: string[] }) => void,
 ) => {
   const handleDeleteMultiple = useCallback(() => {
     removeFlow(selectedFlowsComponentsCards)
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-description-modal.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-description-modal.tsx
index 6de2ebb6d..2af71e91a 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-description-modal.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-description-modal.tsx
@@ -1,6 +1,9 @@
 import { useMemo } from "react";
 
-const useDescriptionModal = (selectedFlowsComponentsCards, type) => {
+const useDescriptionModal = (
+  selectedFlowsComponentsCards: string[] | undefined,
+  type: string | undefined,
+) => {
   const getDescriptionModal = useMemo(() => {
     const getTypeLabel = (type) => {
       const labels = {
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-filtered-flows.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-filtered-flows.tsx
index 96b1757ff..db8be8c72 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-filtered-flows.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-filtered-flows.tsx
@@ -1,10 +1,11 @@
 import cloneDeep from "lodash/cloneDeep";
 import { useEffect } from "react";
+import { FlowType } from "../../../../../types/flow";
 
 const useFilteredFlows = (
-  flowsFromFolder,
-  searchFlowsComponents,
-  setAllFlows,
+  flowsFromFolder: FlowType[],
+  searchFlowsComponents: string,
+  setAllFlows: (value: any[]) => void,
 ) => {
   useEffect(() => {
     const newFlows = cloneDeep(flowsFromFolder || []);
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-duplicate.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-duplicate.tsx
index fc49fc0d1..d0ae38e4f 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-duplicate.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-duplicate.tsx
@@ -1,18 +1,31 @@
 import { useCallback } from "react";
+import { XYPosition } from "reactflow";
+import { FlowType } from "../../../../../types/flow";
 
 const useDuplicateFlows = (
-  selectedFlowsComponentsCards,
-  addFlow,
-  allFlows,
-  resetFilter,
-  getFoldersApi,
-  folderId,
-  myCollectionId,
-  getFolderById,
-  setSuccessData,
-  setSelectedFlowsComponentsCards,
-  handleSelectAll,
-  cardTypes,
+  selectedFlowsComponentsCards: string[],
+  addFlow: (
+    newProject: boolean,
+    flow?: FlowType,
+    override?: boolean,
+    position?: XYPosition,
+    fromDragAndDrop?: boolean,
+  ) => Promise<string | undefined>,
+  allFlows: any[],
+  resetFilter: () => void,
+  getFoldersApi: (
+    refetch?: boolean,
+    startupApplication?: boolean,
+  ) => Promise<void>,
+  folderId: string,
+  myCollectionId: string,
+  getFolderById: (id: string) => void,
+  setSuccessData: (data: { title: string }) => void,
+  setSelectedFlowsComponentsCards: (
+    selectedFlowsComponentsCards: string[],
+  ) => void,
+  handleSelectAll: (select: boolean) => void,
+  cardTypes: string,
 ) => {
   const handleDuplicate = useCallback(() => {
     Promise.all(
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-export.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-export.tsx
index 8edabc146..4b5e2f925 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-export.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-export.tsx
@@ -1,15 +1,18 @@
 import { useCallback } from "react";
+import { FlowType } from "../../../../../types/flow";
 
 const useExportFlows = (
-  selectedFlowsComponentsCards,
-  allFlows,
-  downloadFlow,
-  removeApiKeys,
-  version,
-  setSuccessData,
-  setSelectedFlowsComponentsCards,
-  handleSelectAll,
-  cardTypes,
+  selectedFlowsComponentsCards: string[],
+  allFlows: Array<FlowType>,
+  downloadFlow: (flow: any, name: string, description: string) => void,
+  removeApiKeys: (flow: any) => any,
+  version: string,
+  setSuccessData: (data: { title: string }) => void,
+  setSelectedFlowsComponentsCards: (
+    selectedFlowsComponentsCards: string[],
+  ) => void,
+  handleSelectAll: (select: boolean) => void,
+  cardTypes: string,
 ) => {
   const handleExport = useCallback(() => {
     selectedFlowsComponentsCards.forEach((selectedFlowId) => {
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-select-all.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-select-all.tsx
index a81515e0a..4961c73e9 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-select-all.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-select-all.tsx
@@ -1,6 +1,11 @@
 import { useCallback } from "react";
+import { FlowType } from "../../../../../types/flow";
 
-const useSelectAll = (flowsFromFolder, getValues, setValue) => {
+const useSelectAll = (
+  flowsFromFolder: FlowType[],
+  getValues: () => Record<string, boolean>,
+  setValue: (key: string, value: boolean) => void,
+) => {
   const handleSelectAll = useCallback(
     (select) => {
       const flowsFromFolderIds = flowsFromFolder?.map((f) => f.id);
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-select-options-change.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-select-options-change.tsx
index 56dc204c7..dc7053600 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-select-options-change.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-select-options-change.tsx
@@ -1,15 +1,15 @@
 import { useCallback } from "react";
 
 const useSelectOptionsChange = (
-  selectedFlowsComponentsCards,
-  setErrorData,
-  setOpenDelete,
-  handleDuplicate,
-  handleExport,
+  selectedFlowsComponentsCards: string[] | undefined,
+  setErrorData: (data: { title: string; list: string[] }) => void,
+  setOpenDelete: (value: boolean) => void,
+  handleDuplicate: () => void,
+  handleExport: () => void,
 ) => {
   const handleSelectOptionsChange = useCallback(
     (action) => {
-      const hasSelected = selectedFlowsComponentsCards?.length > 0;
+      const hasSelected = selectedFlowsComponentsCards?.length! > 0;
       if (!hasSelected) {
         setErrorData({
           title: "No items selected",
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-selected-flows.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-selected-flows.tsx
index b6f00934e..e5ac9a90d 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-selected-flows.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-selected-flows.tsx
@@ -1,8 +1,10 @@
 import { useEffect } from "react";
 
 const useSelectedFlows = (
-  entireFormValues,
-  setSelectedFlowsComponentsCards,
+  entireFormValues: Record<string, boolean> | undefined,
+  setSelectedFlowsComponentsCards: (
+    selectedFlowsComponentsCards: string[],
+  ) => void,
 ) => {
   useEffect(() => {
     if (!entireFormValues || Object.keys(entireFormValues).length === 0) return;
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
index af13e2bb4..7ccd88048 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
@@ -19,6 +19,7 @@ import { getNameByType } from "../../utils/get-name-by-type";
 import { sortFlows } from "../../utils/sort-flows";
 import EmptyComponent from "../emptyComponent";
 import HeaderComponent from "../headerComponent";
+import CollectionCard from "./components/collectionCard";
 import useDeleteMultipleFlows from "./hooks/use-delete-multiple";
 import useDescriptionModal from "./hooks/use-description-modal";
 import useFilteredFlows from "./hooks/use-filtered-flows";
@@ -61,7 +62,6 @@ export default function ComponentsComponent({
   const [handleFileDrop] = useFileDrop(uploadFlow, type)!;
   const [pageSize, setPageSize] = useState(20);
   const [pageIndex, setPageIndex] = useState(1);
-  const navigate = useNavigate();
   const location = useLocation();
   const all: FlowType[] = sortFlows(allFlows, type);
   const start = (pageIndex - 1) * pageSize;
@@ -94,7 +94,7 @@ export default function ComponentsComponent({
     getFolderById(folderId ? folderId : myCollectionId);
   }, [location]);
 
-  useFilteredFlows(flowsFromFolder, searchFlowsComponents, setAllFlows);
+  useFilteredFlows(flowsFromFolder!, searchFlowsComponents, setAllFlows);
 
   const resetFilter = () => {
     setPageIndex(1);
@@ -107,7 +107,7 @@ export default function ComponentsComponent({
   const methods = useForm();
 
   const { handleSelectAll } = useSelectAll(
-    flowsFromFolder,
+    flowsFromFolder!,
     getValues,
     setValue,
   );
@@ -119,7 +119,7 @@ export default function ComponentsComponent({
     resetFilter,
     getFoldersApi,
     folderId,
-    myCollectionId,
+    myCollectionId!,
     getFolderById,
     setSuccessData,
     setSelectedFlowsComponentsCards,
@@ -155,7 +155,7 @@ export default function ComponentsComponent({
     resetFilter,
     getFoldersApi,
     folderId,
-    myCollectionId,
+    myCollectionId!,
     getFolderById,
     setSuccessData,
     setErrorData,
@@ -205,43 +205,10 @@ export default function ComponentsComponent({
                     {data?.map((item) => (
                       <FormProvider {...methods} key={item.id}>
                         <form>
-                          <CollectionCardComponent
-                            is_component={type === "component"}
-                            data={{
-                              is_component: item.is_component ?? false,
-                              ...item,
-                            }}
-                            disabled={isLoading}
-                            data-testid={"edit-flow-button-" + item.id}
-                            button={
-                              !item.is_component ? (
-                                <Link to={"/flow/" + item.id}>
-                                  <Button
-                                    tabIndex={-1}
-                                    variant="outline"
-                                    size="sm"
-                                    className="whitespace-nowrap"
-                                    data-testid={"edit-flow-button-" + item.id}
-                                  >
-                                    <IconComponent
-                                      name="ExternalLink"
-                                      className="main-page-nav-button select-none"
-                                    />
-                                    Edit Flow
-                                  </Button>
-                                </Link>
-                              ) : (
-                                <></>
-                              )
-                            }
-                            onClick={
-                              !item.is_component
-                                ? () => {
-                                    navigate("/flow/" + item.id);
-                                  }
-                                : undefined
-                            }
-                            playground={!item.is_component}
+                          <CollectionCard
+                            item={item}
+                            type={type}
+                            isLoading={isLoading}
                             control={control}
                           />
                         </form>
diff --git a/src/frontend/src/pages/MainPage/hooks/use-delete-folder.tsx b/src/frontend/src/pages/MainPage/hooks/use-delete-folder.tsx
index 0d093bc32..27ccfdc19 100644
--- a/src/frontend/src/pages/MainPage/hooks/use-delete-folder.tsx
+++ b/src/frontend/src/pages/MainPage/hooks/use-delete-folder.tsx
@@ -2,7 +2,7 @@ import useAlertStore from "../../../stores/alertStore";
 import { useFolderStore } from "../../../stores/foldersStore";
 import { deleteFolder, getFolderById } from "../services";
 
-const useDeleteFolder = ({ navigate }) => {
+const useDeleteFolder = ({ navigate }: { navigate: (url: string) => void }) => {
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const folderToEdit = useFolderStore((state) => state.folderToEdit);
diff --git a/src/frontend/src/pages/MainPage/hooks/use-dropdown-options.tsx b/src/frontend/src/pages/MainPage/hooks/use-dropdown-options.tsx
index 69e2c2df3..92957d295 100644
--- a/src/frontend/src/pages/MainPage/hooks/use-dropdown-options.tsx
+++ b/src/frontend/src/pages/MainPage/hooks/use-dropdown-options.tsx
@@ -1,7 +1,26 @@
+import { XYPosition } from "reactflow";
 import { CONSOLE_ERROR_MSG } from "../../../constants/alerts_constants";
 import useAlertStore from "../../../stores/alertStore";
 
-const useDropdownOptions = ({ uploadFlow, navigate, is_component }) => {
+const useDropdownOptions = ({
+  uploadFlow,
+  navigate,
+  is_component,
+}: {
+  uploadFlow: ({
+    newProject,
+    file,
+    isComponent,
+    position,
+  }: {
+    newProject: boolean;
+    file?: File;
+    isComponent: boolean | null;
+    position?: XYPosition;
+  }) => Promise<string | never>;
+  navigate: (url: string) => void;
+  is_component: boolean;
+}) => {
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const handleImportFromJSON = () => {
diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx
index 8af9b4a0b..2bdbe33f9 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx
@@ -1,6 +1,12 @@
 import { getApiKey } from "../../../../../controllers/API";
+import { Users } from "../../../../../types/api";
 
-const useApiKeys = (userData, setLoadingKeys, keysList, setUserId) => {
+const useApiKeys = (
+  userData: Users | null,
+  setLoadingKeys: (load: boolean) => void,
+  keysList: React.MutableRefObject<never[]>,
+  setUserId: (userId: string) => void,
+) => {
   const fetchApiKeys = () => {
     setLoadingKeys(true);
     getApiKey()
diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx
index 74d5dae99..0d642dfbf 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx
@@ -7,10 +7,10 @@ import {
 import { deleteApiKey } from "../../../../../controllers/API";
 
 const useDeleteApiKeys = (
-  selectedRows,
-  resetFilter,
-  setSuccessData,
-  setErrorData,
+  selectedRows: string[],
+  resetFilter: () => void,
+  setSuccessData: (data: { title: string }) => void,
+  setErrorData: (data: { title: string; list: string[] }) => void,
 ) => {
   const handleDeleteKey = () => {
     Promise.all(selectedRows.map((selectedRow) => deleteApiKey(selectedRow)))
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-preload-images.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-preload-images.tsx
index 988af6ea9..abc8587d2 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-preload-images.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-preload-images.tsx
@@ -4,7 +4,10 @@ import {
   BASE_URL_API,
 } from "../../../../../../../../../constants/constants";
 
-const usePreloadImages = (profilePictures, setImagesLoaded) => {
+const usePreloadImages = (
+  profilePictures: { [key: string]: string[] },
+  setImagesLoaded: (value: boolean) => void,
+) => {
   const preloadImages = async (imageUrls) => {
     return Promise.all(
       imageUrls.map(
diff --git a/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-password.tsx b/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-password.tsx
index c4b452e6b..0003fe4a1 100644
--- a/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-password.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-password.tsx
@@ -5,8 +5,13 @@ import {
   SAVE_SUCCESS_ALERT,
 } from "../../../../constants/alerts_constants";
 import { resetPassword } from "../../../../controllers/API";
+import { Users } from "../../../../types/api";
 
-const usePatchPassword = (userData, setSuccessData, setErrorData) => {
+const usePatchPassword = (
+  userData: Users | null,
+  setSuccessData: (data: { title: string; list?: string[] }) => void,
+  setErrorData: (data: { title: string; list: string[] }) => void,
+) => {
   const handlePatchPassword = async (password, cnfPassword, handleInput) => {
     if (password !== cnfPassword) {
       setErrorData({
@@ -16,7 +21,7 @@ const usePatchPassword = (userData, setSuccessData, setErrorData) => {
       return;
     }
     try {
-      if (password !== "") await resetPassword(userData.id, { password });
+      if (password !== "") await resetPassword(userData!.id, { password });
       handleInput({ target: { name: "password", value: "" } });
       handleInput({ target: { name: "cnfPassword", value: "" } });
       setSuccessData({ title: SAVE_SUCCESS_ALERT });
diff --git a/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-profile-picture.tsx b/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-profile-picture.tsx
index 584300fdf..6ad76f4ff 100644
--- a/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-profile-picture.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-profile-picture.tsx
@@ -4,21 +4,22 @@ import {
   SAVE_SUCCESS_ALERT,
 } from "../../../../constants/alerts_constants";
 import { updateUser } from "../../../../controllers/API";
+import { Users } from "../../../../types/api";
 
 const usePatchProfilePicture = (
-  setSuccessData,
-  setErrorData,
-  currentUserData,
-  setUserData,
+  setSuccessData: (data: { title: string; list?: string[] }) => void,
+  setErrorData: (data: { title: string; list: string[] }) => void,
+  currentUserData: Users | null,
+  setUserData: (data: any) => void,
 ) => {
   const handlePatchProfilePicture = async (profile_picture) => {
     try {
       if (profile_picture !== "") {
-        await updateUser(currentUserData.id, {
+        await updateUser(currentUserData!.id, {
           profile_image: profile_picture,
         });
         let newUserData = cloneDeep(currentUserData);
-        newUserData.profile_image = profile_picture;
+        newUserData!.profile_image = profile_picture;
         setUserData(newUserData);
       }
       setSuccessData({ title: SAVE_SUCCESS_ALERT });
diff --git a/src/frontend/src/pages/SettingsPage/pages/hooks/use-save-key.tsx b/src/frontend/src/pages/SettingsPage/pages/hooks/use-save-key.tsx
index cf5871a26..4f87405c3 100644
--- a/src/frontend/src/pages/SettingsPage/pages/hooks/use-save-key.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/hooks/use-save-key.tsx
@@ -7,11 +7,11 @@ import { AuthContext } from "../../../../contexts/authContext";
 import { addApiKeyStore } from "../../../../controllers/API";
 
 const useSaveKey = (
-  setSuccessData,
-  setErrorData,
-  setHasApiKey,
-  setValidApiKey,
-  setLoadingApiKey,
+  setSuccessData: (data: { title: string }) => void,
+  setErrorData: (data: { title: string; list: string[] }) => void,
+  setHasApiKey: (hasApiKey: boolean) => void,
+  setValidApiKey: (validApiKey: boolean) => void,
+  setLoadingApiKey: (loadingApiKey: boolean) => void,
 ) => {
   const { storeApiKey } = useContext(AuthContext);
 
diff --git a/src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx b/src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx
index a56c2d5d6..faa7408a3 100644
--- a/src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx
@@ -1,6 +1,9 @@
 import { useEffect } from "react";
 
-const useScrollToElement = (scrollId, setCurrentFlowId) => {
+const useScrollToElement = (
+  scrollId: string | null | undefined,
+  setCurrentFlowId: (currentFlowId: string) => void,
+) => {
   useEffect(() => {
     const element = document.getElementById(scrollId ?? "null");
     if (element) {
diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx
index 7f3a74352..fe344e478 100644
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx
@@ -1,8 +1,11 @@
+import { ColDef, ColGroupDef } from "ag-grid-community";
 import { useEffect } from "react";
 import { getMessagesTable } from "../../../../../controllers/API";
 import { useMessagesStore } from "../../../../../stores/messagesStore";
 
-const useMessagesTable = (setColumns) => {
+const useMessagesTable = (
+  setColumns: (data: Array<ColDef | ColGroupDef>) => void,
+) => {
   const setMessages = useMessagesStore((state) => state.setMessages);
   useEffect(() => {
     const fetchData = async () => {
diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx
index d7f4d5202..36cb24531 100644
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx
@@ -2,10 +2,10 @@ import { deleteMessagesFn } from "../../../../../controllers/API";
 import { useMessagesStore } from "../../../../../stores/messagesStore";
 
 const useRemoveMessages = (
-  setSelectedRows,
-  setSuccessData,
-  setErrorData,
-  selectedRows,
+  setSelectedRows: (data: string[]) => void,
+  setSuccessData: (data: { title: string }) => void,
+  setErrorData: (data: { title: string }) => void,
+  selectedRows: string[],
 ) => {
   const deleteMessages = useMessagesStore((state) => state.removeMessages);
 
diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx
index f199ac489..dc2840b79 100644
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx
@@ -2,7 +2,10 @@ import { updateMessageApi } from "../../../../../controllers/API";
 import { useMessagesStore } from "../../../../../stores/messagesStore";
 import { Message } from "../../../../../types/messages";
 
-const useUpdateMessage = (setSuccessData, setErrorData) => {
+const useUpdateMessage = (
+  setSuccessData: (data: { title: string; list?: string[] }) => void,
+  setErrorData: (data: { title: string; list?: string[] }) => void,
+) => {
   const updateMessage = useMessagesStore((state) => state.updateMessage);
 
   const handleUpdate = async (data: Message) => {
diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
index 70037ee7c..b2e654cef 100644
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
@@ -4,6 +4,7 @@ import {
   ColGroupDef,
   SelectionChangedEvent,
 } from "ag-grid-community";
+import { cloneDeep } from "lodash";
 import { useState } from "react";
 import TableComponent from "../../../../components/tableComponent";
 import useAlertStore from "../../../../stores/alertStore";
@@ -21,7 +22,7 @@ export default function MessagesPage() {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
 
-  const [selectedRows, setSelectedRows] = useState<number[]>([]);
+  const [selectedRows, setSelectedRows] = useState<string[]>([]);
 
   const { handleRemoveMessages } = useRemoveMessages(
     setSelectedRows,
@@ -37,7 +38,7 @@ export default function MessagesPage() {
   function handleUpdateMessage(event: CellEditRequestEvent<any, string>) {
     const newValue = event.newValue;
     const field = event.column.getColId();
-    const row = event.data;
+    const row = cloneDeep(event.data);
     const data = {
       ...row,
       [field]: newValue,
@@ -66,9 +67,7 @@ export default function MessagesPage() {
           ]}
           overlayNoRowsTemplate="No data available"
           onSelectionChanged={(event: SelectionChangedEvent) => {
-            setSelectedRows(
-              event.api.getSelectedRows().map((row) => row.index),
-            );
+            setSelectedRows(event.api.getSelectedRows().map((row) => row.id));
           }}
           rowSelection="multiple"
           suppressRowClickSelection={true}
diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index df12c944c..0b67dd88f 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -40,6 +40,7 @@ import { getInputsAndOutputs } from "../utils/storeUtils";
 import useAlertStore from "./alertStore";
 import { useDarkStore } from "./darkStore";
 import useFlowsManagerStore from "./flowsManagerStore";
+import { useGlobalVariablesStore } from "./globalVariablesStore/globalVariables";
 
 // this is our useStore hook that we can use in our components to get parts of the store and call actions
 const useFlowStore = create<FlowStoreType>((set, get) => ({
@@ -288,7 +289,12 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
           id: newId,
         },
       };
-      updateGroupRecursion(newNode, selection.edges);
+      updateGroupRecursion(
+        newNode,
+        selection.edges,
+        useGlobalVariablesStore.getState().unavaliableFields,
+        useGlobalVariablesStore.getState().globalVariablesEntries,
+      );
 
       // Add the new node to the list of nodes in state
       newNodes = newNodes
diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts
index a804710ac..a99916107 100644
--- a/src/frontend/src/stores/flowsManagerStore.ts
+++ b/src/frontend/src/stores/flowsManagerStore.ts
@@ -1,3 +1,4 @@
+import { AxiosError } from "axios";
 import { cloneDeep } from "lodash";
 import pDebounce from "p-debounce";
 import { Edge, Node, Viewport, XYPosition } from "reactflow";
@@ -23,11 +24,13 @@ import {
   extractFieldsFromComponenents,
   processDataFromFlow,
   processFlows,
+  updateGroupRecursion,
 } from "../utils/reactflowUtils";
 import useAlertStore from "./alertStore";
 import { useDarkStore } from "./darkStore";
 import useFlowStore from "./flowStore";
 import { useFolderStore } from "./foldersStore";
+import { useGlobalVariablesStore } from "./globalVariablesStore/globalVariables";
 import { useTypesStore } from "./typesStore";
 
 let saveTimeoutId: NodeJS.Timeout | null = null;
@@ -202,6 +205,14 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     let flowData = flow
       ? processDataFromFlow(flow)
       : { nodes: [], edges: [], viewport: { zoom: 1, x: 0, y: 0 } };
+    flowData?.nodes.forEach((node) => {
+      updateGroupRecursion(
+        node,
+        flowData?.edges,
+        useGlobalVariablesStore.getState().unavaliableFields,
+        useGlobalVariablesStore.getState().globalVariablesEntries,
+      );
+    });
     if (newProject) {
       // Create a new flow with a default name if no flow is provided.
       const folder_id = useFolderStore.getState().folderUrl;
diff --git a/src/frontend/src/stores/globalVariablesStore/globalVariables.ts b/src/frontend/src/stores/globalVariablesStore/globalVariables.ts
index 708f7ec09..4f80559f5 100644
--- a/src/frontend/src/stores/globalVariablesStore/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariablesStore/globalVariables.ts
@@ -4,12 +4,12 @@ import getUnavailableFields from "./utils/get-unavailable-fields";
 
 export const useGlobalVariablesStore = create<GlobalVariablesStore>(
   (set, get) => ({
-    unavaliableFields: {},
+    unavaliableFields: undefined,
     setUnavaliableFields: (fields) => {
       set({ unavaliableFields: fields });
     },
     removeUnavaliableField: (field) => {
-      const newFields = get().unavaliableFields;
+      const newFields = get().unavaliableFields || {};
       delete newFields[field];
       set({ unavaliableFields: newFields });
     },
@@ -18,7 +18,7 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
     setGlobalVariables: (variables) => {
       set({
         globalVariables: variables,
-        globalVariablesEntries: Object.keys(variables),
+        globalVariablesEntries: Object.keys(variables) || [],
         unavaliableFields: getUnavailableFields(variables),
       });
     },
@@ -27,7 +27,7 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
       const newVariables = { ...get().globalVariables, [name]: data };
       set({
         globalVariables: newVariables,
-        globalVariablesEntries: Object.keys(newVariables),
+        globalVariablesEntries: Object.keys(newVariables) || [],
         unavaliableFields: getUnavailableFields(newVariables),
       });
     },
@@ -38,7 +38,7 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
       delete newVariables[name];
       set({
         globalVariables: newVariables,
-        globalVariablesEntries: Object.keys(newVariables),
+        globalVariablesEntries: Object.keys(newVariables) || [],
         unavaliableFields: getUnavailableFields(newVariables),
       });
     },
diff --git a/src/frontend/src/stores/messagesStore.ts b/src/frontend/src/stores/messagesStore.ts
index 349a1c447..cb817febc 100644
--- a/src/frontend/src/stores/messagesStore.ts
+++ b/src/frontend/src/stores/messagesStore.ts
@@ -29,7 +29,7 @@ export const useMessagesStore = create<MessagesStoreType>((set, get) => ({
   updateMessage: (message) => {
     set(() => ({
       messages: get().messages.map((msg) =>
-        msg.index === message.index ? message : msg,
+        msg.id === message.id ? message : msg,
       ),
     }));
   },
@@ -41,7 +41,7 @@ export const useMessagesStore = create<MessagesStoreType>((set, get) => ({
       try {
         set((state) => {
           const updatedMessages = state.messages.filter(
-            (msg) => !ids.includes(msg.index),
+            (msg) => !ids.includes(msg.id),
           );
           get().setMessages(updatedMessages);
           resolve(updatedMessages);
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 992c012bd..7c5c60579 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -91,8 +91,7 @@ export type InputListComponentType = {
 
 export type InputGlobalComponentType = {
   disabled: boolean;
-  onChange: (value: string, snapshot?: boolean) => void;
-  setDb: (value: boolean) => void;
+  onChange: (value: string, dbValue: boolean, snapshot?: boolean) => void;
   name: string;
   data: InputFieldType;
   editNode?: boolean;
@@ -124,7 +123,11 @@ export type TextAreaComponentType = {
   nodeClass?: APIClassType;
   setNodeClass?: (value: APIClassType) => void;
   disabled: boolean;
-  onChange: (value: string[] | string, skipSnapshot?: boolean) => void;
+  onChange: (
+    value: string[] | string,
+    dbValue?: boolean,
+    skipSnapshot?: boolean,
+  ) => void;
   value: string;
   editNode?: boolean;
   id?: string;
@@ -146,7 +149,11 @@ export type PromptAreaComponentType = {
   nodeClass?: APIClassType;
   setNodeClass?: (value: APIClassType, code?: string) => void;
   disabled: boolean;
-  onChange: (value: string[] | string, skipSnapshot?: boolean) => void;
+  onChange: (
+    value: string[] | string,
+    dbValue?: boolean,
+    skipSnapshot?: boolean,
+  ) => void;
   value: string;
   readonly?: boolean;
   editNode?: boolean;
@@ -156,7 +163,11 @@ export type PromptAreaComponentType = {
 export type CodeAreaComponentType = {
   setOpenModal?: (bool: boolean) => void;
   disabled: boolean;
-  onChange: (value: string[] | string, skipSnapshot?: boolean) => void;
+  onChange: (
+    value: string[] | string,
+    dbValue?: boolean,
+    skipSnapshot?: boolean,
+  ) => void;
   value: string;
   editNode?: boolean;
   nodeClass?: APIClassType;
@@ -171,7 +182,11 @@ export type CodeAreaComponentType = {
 export type FileComponentType = {
   IOInputProps?;
   disabled: boolean;
-  onChange: (value: string[] | string, skipSnapshot?: boolean) => void;
+  onChange: (
+    value: string[] | string,
+    dbValue?: boolean,
+    skipSnapshot?: boolean,
+  ) => void;
   value: string;
   fileTypes: Array<string>;
   onFileChange: (value: string) => void;
@@ -204,7 +219,7 @@ export type IntComponentType = {
   value: string;
   disabled?: boolean;
   rangeSpec: RangeSpecType;
-  onChange: (value: string, skipSnapshot?: boolean) => void;
+  onChange: (value: string, dbValue?: boolean, skipSnapshot?: boolean) => void;
   editNode?: boolean;
   id?: string;
 };
@@ -212,7 +227,7 @@ export type IntComponentType = {
 export type FloatComponentType = {
   value: string;
   disabled?: boolean;
-  onChange: (value: string, skipSnapshot?: boolean) => void;
+  onChange: (value: string, dbValue?: boolean, skipSnapshot?: boolean) => void;
   rangeSpec: RangeSpecType;
   editNode?: boolean;
   id?: string;
@@ -303,7 +318,7 @@ export type IconComponentProps = {
 export type InputProps = {
   name: string | null;
   description: string | null;
-  endpointName?: string;
+  endpointName?: string | null;
   maxLength?: number;
   setName?: (name: string) => void;
   setDescription?: (description: string) => void;
@@ -695,6 +710,8 @@ type codeTabsFuncTempType = {
 };
 
 export type codeTabsPropsType = {
+  isThereTweaks?: boolean;
+  isThereWH?: boolean;
   flow?: FlowType;
   tabs: Array<tabsArrayType>;
   activeTab: string;
diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts
index 95e04f5b2..2f8457138 100644
--- a/src/frontend/src/types/flow/index.ts
+++ b/src/frontend/src/types/flow/index.ts
@@ -7,7 +7,7 @@ export type FlowType = {
   id: string;
   data: ReactFlowJsonObject | null;
   description: string;
-  endpoint_name?: string;
+  endpoint_name?: string | null;
   style?: FlowStyleType;
   is_component?: boolean;
   last_tested_version?: string;
diff --git a/src/frontend/src/types/messages/index.ts b/src/frontend/src/types/messages/index.ts
index 738e16258..9b19e1489 100644
--- a/src/frontend/src/types/messages/index.ts
+++ b/src/frontend/src/types/messages/index.ts
@@ -1,12 +1,12 @@
 type Message = {
   artifacts: Record<string, any>;
   flow_id: string;
-  index: number;
   message: string;
   sender: string;
   sender_name: string;
   session_id: string;
   timestamp: string;
+  files: Array<string>;
   id: string;
 };
 
diff --git a/src/frontend/src/types/utils/functions.ts b/src/frontend/src/types/utils/functions.ts
new file mode 100644
index 000000000..59ef9f2d7
--- /dev/null
+++ b/src/frontend/src/types/utils/functions.ts
@@ -0,0 +1,10 @@
+export type getCodesObjProps = {
+  runCurlCode: string;
+  webhookCurlCode: string;
+  pythonApiCode: string;
+  jsApiCode: string;
+  pythonCode: string;
+  widgetCode: string;
+};
+
+export type getCodesObjReturn = Array<{ name: string; code: string }>;
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index 4b178088c..e4749ee8f 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -25,7 +25,7 @@ export type GlobalVariablesStore = {
   ) => void;
   removeGlobalVariable: (name: string) => Promise<void>;
   getVariableId: (name: string) => string | undefined;
-  unavaliableFields: { [name: string]: string };
+  unavaliableFields: { [name: string]: string } | undefined;
   setUnavaliableFields: (fields: { [name: string]: string }) => void;
   removeUnavaliableField: (field: string) => void;
 };
diff --git a/src/frontend/src/types/zustand/messages/index.ts b/src/frontend/src/types/zustand/messages/index.ts
index b3ebd50d1..38e66c990 100644
--- a/src/frontend/src/types/zustand/messages/index.ts
+++ b/src/frontend/src/types/zustand/messages/index.ts
@@ -8,7 +8,7 @@ export type MessagesStoreType = {
   removeMessage: (message: Message) => void;
   updateMessage: (message: Message) => void;
   clearMessages: () => void;
-  removeMessages: (ids: number[]) => void;
+  removeMessages: (ids: string[]) => void;
   columns: Array<ColDef | ColGroupDef>;
   setColumns: (columns: Array<ColDef | ColGroupDef>) => void;
   deleteSession: (id: string) => void;
diff --git a/src/frontend/src/utils/buildUtils.ts b/src/frontend/src/utils/buildUtils.ts
index f3ae642bc..4d0a81594 100644
--- a/src/frontend/src/utils/buildUtils.ts
+++ b/src/frontend/src/utils/buildUtils.ts
@@ -99,6 +99,10 @@ export async function updateVerticesOrder(
     const runId = orderResponse.data.run_id;
     const verticesToRun = orderResponse.data.vertices_to_run;
 
+    useFlowStore
+      .getState()
+      .updateBuildStatus(verticesToRun, BuildStatus.TO_BUILD);
+
     const verticesIds = orderResponse.data.ids;
     useFlowStore.getState().updateVerticesBuild({
       verticesLayers,
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index 9b62b2624..e4ac017a8 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -1117,6 +1117,18 @@ export function updateProxyIdsOnTemplate(
   });
 }
 
+export function updateProxyIdsOnOutputs(
+  outputs: OutputFieldType[] | undefined,
+  idsMap: { [key: string]: string },
+) {
+  if (!outputs) return;
+  outputs.forEach((output) => {
+    if (output.proxy && idsMap[output.proxy.id]) {
+      output.proxy.id = idsMap[output.proxy.id];
+    }
+  });
+}
+
 export function updateEdgesIds(
   edges: Edge[],
   idsMap: { [key: string]: string },
@@ -1475,21 +1487,76 @@ export function isOutputType(type: string): boolean {
   return OUTPUT_TYPES.has(type);
 }
 
-export function updateGroupRecursion(groupNode: NodeType, edges: Edge[]) {
+export function updateGroupRecursion(
+  groupNode: NodeType,
+  edges: Edge[],
+  unavailableFields:
+    | {
+        [name: string]: string;
+      }
+    | undefined,
+  globalVariablesEntries: string[] | undefined,
+) {
+  updateGlobalVariables(
+    groupNode.data.node,
+    unavailableFields,
+    globalVariablesEntries,
+  );
   if (groupNode.data.node?.flow) {
     groupNode.data.node.flow.data!.nodes.forEach((node) => {
       if (node.data.node?.flow) {
-        updateGroupRecursion(node, node.data.node.flow.data!.edges);
+        updateGroupRecursion(
+          node,
+          node.data.node.flow.data!.edges,
+          unavailableFields,
+          globalVariablesEntries,
+        );
       }
     });
     let newFlow = groupNode.data.node!.flow;
     const idsMap = updateIds(newFlow.data!);
     updateProxyIdsOnTemplate(groupNode.data.node!.template, idsMap);
+    updateProxyIdsOnOutputs(groupNode.data.node.outputs, idsMap);
     let flowEdges = edges;
     updateEdgesIds(flowEdges, idsMap);
   }
 }
 
+export function updateGlobalVariables(
+  node: APIClassType | undefined,
+  unavailableFields:
+    | {
+        [name: string]: string;
+      }
+    | undefined,
+  globalVariablesEntries: string[] | undefined,
+) {
+  if (node && node.template) {
+    Object.keys(node.template).forEach((field) => {
+      if (
+        globalVariablesEntries &&
+        node!.template[field].load_from_db &&
+        !globalVariablesEntries.includes(node!.template[field].value)
+      ) {
+        node!.template[field].value = "";
+        node!.template[field].load_from_db = false;
+      }
+      if (
+        !node!.template[field].load_from_db &&
+        node!.template[field].value === "" &&
+        unavailableFields &&
+        Object.keys(unavailableFields).includes(
+          node!.template[field].display_name ?? "",
+        )
+      ) {
+        node!.template[field].value =
+          unavailableFields[node!.template[field].display_name ?? ""];
+        node!.template[field].load_from_db = true;
+      }
+    });
+  }
+}
+
 export function getGroupOutputNodeId(
   flow: FlowType,
   p_name: string,
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index e704beb63..8ea79fd7a 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -463,3 +463,11 @@ export const logTypeIsError = (
     return isErrorLog(outputs);
   }
 };
+
+export function isEndpointNameValid(name: string, maxLength: number): boolean {
+  return (
+    (/^[a-zA-Z0-9_-]+$/.test(name) && name.length <= maxLength) ||
+    // empty is also valid
+    name.length === 0
+  );
+}
diff --git a/src/frontend/tests/end-to-end/Basic Prompting.spec.ts b/src/frontend/tests/end-to-end/Basic Prompting.spec.ts
new file mode 100644
index 000000000..aff45928c
--- /dev/null
+++ b/src/frontend/tests/end-to-end/Basic Prompting.spec.ts	
@@ -0,0 +1,97 @@
+import { expect, test } from "@playwright/test";
+
+test("Basic Prompting (Hello, World)", async ({ page }) => {
+  if (!process?.env?.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown-model_name").click();
+  await page.getByTestId("gpt-4o-0-option").click();
+
+  await page.waitForTimeout(2000);
+
+  await page.getByTestId("button_run_chat output").click();
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page.getByText("Playground", { exact: true }).click();
+  await page
+    .getByText("No input message provided.", { exact: true })
+    .last()
+    .isVisible();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page
+    .getByTestId("input-chat-playground")
+    .last()
+    .fill("Say hello as a pirate");
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-LucideSend").last().click();
+
+  await page.waitForSelector("text=matey", {
+    timeout: 100000,
+  });
+
+  await page.getByText("matey").last().isVisible();
+  await page.getByText("Default Session").last().click();
+
+  await page.getByText("timestamp", { exact: true }).last().isVisible();
+  await page.getByText("text", { exact: true }).last().isVisible();
+  await page.getByText("sender", { exact: true }).last().isVisible();
+  await page.getByText("sender_name", { exact: true }).last().isVisible();
+  await page.getByText("session_id", { exact: true }).last().isVisible();
+  await page.getByText("files", { exact: true }).last().isVisible();
+
+  await page.getByRole("gridcell").last().isVisible();
+  await page.getByTestId("icon-Trash2").first().click();
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("input-chat-playground").last().isVisible();
+});
diff --git a/src/frontend/tests/end-to-end/Blog Writer.spec.ts b/src/frontend/tests/end-to-end/Blog Writer.spec.ts
new file mode 100644
index 000000000..68c6c0bf3
--- /dev/null
+++ b/src/frontend/tests/end-to-end/Blog Writer.spec.ts	
@@ -0,0 +1,109 @@
+import { expect, test } from "@playwright/test";
+import path from "path";
+
+test("Blog Writer", async ({ page }) => {
+  if (!process?.env?.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Blog Writer" }).click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown-model_name").click();
+  await page.getByTestId("gpt-4o-0-option").click();
+
+  await page.waitForTimeout(2000);
+  await page
+    .getByTestId("input-list-input_urls-0")
+    .nth(0)
+    .fill(
+      "https://www.natgeokids.com/uk/discover/animals/sea-life/turtle-facts/",
+    );
+  await page
+    .getByTestId("input-list-input_urls-1")
+    .nth(0)
+    .fill("https://www.originaldiving.com/blog/top-ten-turtle-facts");
+
+  await page
+    .getByTestId("popover-anchor-input-input_value")
+    .nth(0)
+    .fill(
+      "Use the references above for style to write a new blog/tutorial about turtles. Suggest non-covered topics.",
+    );
+
+  await page.getByTestId("button_run_chat output").click();
+  await page.waitForTimeout(5000);
+
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 30000,
+  });
+
+  await page.getByText("Playground", { exact: true }).click();
+  await page
+    .getByPlaceholder(
+      "No chat input variables found. Click to run your flow.",
+      { exact: true },
+    )
+    .last()
+    .isVisible();
+
+  await page.waitForTimeout(3000);
+
+  await page.getByText("turtles").last().isVisible();
+  await page.getByText("sea").last().isVisible();
+  await page.getByText("survival").last().isVisible();
+
+  await page.getByText("Instructions").last().click();
+
+  const value = await page
+    .getByPlaceholder("Enter text...")
+    .last()
+    .inputValue();
+
+  expect(value).toBe(
+    "Use the references above for style to write a new blog/tutorial about turtles. Suggest non-covered topics.",
+  );
+
+  await page.getByTestId("icon-ExternalLink").last().click();
+
+  const count = await page
+    .getByText(
+      "Use the references above for style to write a new blog/tutorial about turtles. Suggest non-covered topics.",
+    )
+    .count();
+
+  if (count <= 1) {
+    expect(false).toBe(true);
+  }
+});
diff --git a/src/frontend/tests/end-to-end/Document QA.spec.ts b/src/frontend/tests/end-to-end/Document QA.spec.ts
new file mode 100644
index 000000000..03ff442df
--- /dev/null
+++ b/src/frontend/tests/end-to-end/Document QA.spec.ts	
@@ -0,0 +1,96 @@
+import { expect, test } from "@playwright/test";
+import path from "path";
+
+test("Document QA", async ({ page }) => {
+  if (!process?.env?.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Document QA" }).click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown-model_name").click();
+  await page.getByTestId("gpt-4o-0-option").click();
+
+  await page.waitForTimeout(2000);
+  const fileChooserPromise = page.waitForEvent("filechooser");
+  await page.getByTestId("icon-FileSearch2").click();
+  const fileChooser = await fileChooserPromise;
+  await fileChooser.setFiles(path.join(__dirname, "/assets/test_file.txt"));
+  await page.getByText("test_file.txt").isVisible();
+
+  await page.waitForTimeout(2000);
+
+  await page.getByTestId("button_run_chat output").click();
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page.getByText("Playground", { exact: true }).click();
+  await page
+    .getByText("No input message provided.", { exact: true })
+    .last()
+    .isVisible();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+  await page
+    .getByTestId("input-chat-playground")
+    .last()
+    .fill("whats the text in the file?");
+  await page.getByTestId("icon-LucideSend").last().click();
+
+  await page.waitForTimeout(3000);
+
+  await page.getByText("this is a test file").last().isVisible();
+
+  await page.getByText("Default Session").last().click();
+
+  await page.getByText("timestamp", { exact: true }).last().isVisible();
+  await page.getByText("text", { exact: true }).last().isVisible();
+  await page.getByText("sender", { exact: true }).last().isVisible();
+  await page.getByText("sender_name", { exact: true }).last().isVisible();
+  await page.getByText("session_id", { exact: true }).last().isVisible();
+  await page.getByText("files", { exact: true }).last().isVisible();
+
+  await page.getByRole("gridcell").last().isVisible();
+  await page.getByTestId("icon-Trash2").first().click();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("input-chat-playground").last().isVisible();
+});
diff --git a/src/frontend/tests/end-to-end/Memory Chatbot.spec.ts b/src/frontend/tests/end-to-end/Memory Chatbot.spec.ts
new file mode 100644
index 000000000..861cc6d0f
--- /dev/null
+++ b/src/frontend/tests/end-to-end/Memory Chatbot.spec.ts	
@@ -0,0 +1,102 @@
+import { expect, test } from "@playwright/test";
+import path from "path";
+
+test("Memory Chatbot", async ({ page }) => {
+  if (!process?.env?.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Memory Chatbot" }).click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown-model_name").click();
+  await page.getByTestId("gpt-4o-0-option").click();
+
+  await page.waitForTimeout(2000);
+
+  await page.getByTestId("button_run_chat output").click();
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page.getByText("Playground", { exact: true }).click();
+
+  await page
+    .getByText("No input message provided.", { exact: true })
+    .last()
+    .isVisible();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page
+    .getByTestId("input-chat-playground")
+    .last()
+    .fill("Remember that I'm a lion");
+  await page.getByTestId("icon-LucideSend").last().click();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page
+    .getByTestId("input-chat-playground")
+    .last()
+    .fill("try reproduce the sound I made in words");
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-LucideSend").last().click();
+
+  await page.waitForSelector("text=roar", { timeout: 30000 });
+  await page.getByText("roar").last().isVisible();
+  await page.getByText("Default Session").last().click();
+
+  await page.getByText("timestamp", { exact: true }).last().isVisible();
+  await page.getByText("text", { exact: true }).last().isVisible();
+  await page.getByText("sender", { exact: true }).last().isVisible();
+  await page.getByText("sender_name", { exact: true }).last().isVisible();
+  await page.getByText("session_id", { exact: true }).last().isVisible();
+  await page.getByText("files", { exact: true }).last().isVisible();
+
+  await page.getByRole("gridcell").last().isVisible();
+  await page.getByTestId("icon-Trash2").first().click();
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+  await page.getByTestId("input-chat-playground").last().isVisible();
+});
diff --git a/src/frontend/tests/end-to-end/Vector Store.spec.ts b/src/frontend/tests/end-to-end/Vector Store.spec.ts
new file mode 100644
index 000000000..3f825128a
--- /dev/null
+++ b/src/frontend/tests/end-to-end/Vector Store.spec.ts	
@@ -0,0 +1,129 @@
+import { expect, test } from "@playwright/test";
+import path from "path";
+
+test("Vector Store RAG", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Vector Store RAG" }).click();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  // if (
+  //   !process.env.OPENAI_API_KEY ||
+  //   !process.env.ASTRA_DB_API_ENDPOINT ||
+  //   !process.env.ASTRA_DB_APPLICATION_TOKEN
+  // ) {
+  //   //You must set the OPENAI_API_KEY, ASTRA_DB_API_ENDPOINT and ASTRA_DB_APPLICATION_TOKEN on .env file to run this test
+  //   expect(false).toBe(true);
+  // }
+
+  // await page
+  //   .getByTestId("popover-anchor-input-openai_api_key")
+  //   .nth(0)
+  //   .fill(process.env.OPENAI_API_KEY ?? "");
+
+  // await page
+  //   .getByTestId("popover-anchor-input-openai_api_key")
+  //   .nth(1)
+  //   .fill(process.env.OPENAI_API_KEY ?? "");
+
+  // await page
+  //   .getByTestId("popover-anchor-input-openai_api_key")
+  //   .nth(2)
+  //   .fill(process.env.OPENAI_API_KEY ?? "");
+
+  // await page
+  //   .getByTestId("popover-anchor-input-token")
+  //   .nth(0)
+  //   .fill(process.env.ASTRA_DB_APPLICATION_TOKEN ?? "");
+  // await page
+  //   .getByTestId("popover-anchor-input-token")
+  //   .nth(1)
+  //   .fill(process.env.ASTRA_DB_APPLICATION_TOKEN ?? "");
+
+  // await page
+  //   .getByTestId("popover-anchor-input-api_endpoint")
+  //   .nth(0)
+  //   .fill(process.env.ASTRA_DB_API_ENDPOINT ?? "");
+  // await page
+  //   .getByTestId("popover-anchor-input-api_endpoint")
+  //   .nth(1)
+  //   .fill(process.env.ASTRA_DB_API_ENDPOINT ?? "");
+
+  const fileChooserPromise = page.waitForEvent("filechooser");
+  await page.getByTestId("icon-FileSearch2").last().click();
+  const fileChooser = await fileChooserPromise;
+  await fileChooser.setFiles(path.join(__dirname, "/assets/test_file.txt"));
+  await page.getByText("test_file.txt").isVisible();
+
+  // await page.getByTestId("button_run_astra db").first().click();
+  // await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  // await page.getByText("built successfully").last().click({
+  //   timeout: 30000,
+  // });
+
+  // await page.getByTestId("button_run_chat output").click();
+  // await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  // await page.getByText("built successfully").last().click({
+  //   timeout: 30000,
+  // });
+
+  // await page.getByText("Playground", { exact: true }).click();
+
+  // await page.waitForSelector('[data-testid="input-chat-playground"]', {
+  //   timeout: 100000,
+  // });
+
+  // await page.getByTestId("input-chat-playground").last().fill("hello");
+
+  // await page.getByTestId("icon-LucideSend").last().click();
+
+  // await page
+  //   .getByText("This is a test file.", { exact: true })
+  //   .last()
+  //   .isVisible();
+
+  // await page.getByText("Memories", { exact: true }).last().click();
+  // await page.getByText("Default Session").last().click();
+
+  // await page.getByText("timestamp", { exact: true }).last().isVisible();
+  // await page.getByText("text", { exact: true }).last().isVisible();
+  // await page.getByText("sender", { exact: true }).last().isVisible();
+  // await page.getByText("sender_name", { exact: true }).last().isVisible();
+  // await page.getByText("session_id", { exact: true }).last().isVisible();
+  // await page.getByText("files", { exact: true }).last().isVisible();
+
+  // await page.getByRole("gridcell").last().isVisible();
+  // await page.getByTestId("icon-Trash2").first().click();
+
+  // await page.waitForSelector('[data-testid="input-chat-playground"]', {
+  //   timeout: 100000,
+  // });
+
+  // await page.getByTestId("input-chat-playground").last().isVisible();
+});
diff --git a/src/frontend/tests/end-to-end/actionsMainPage-shard-0.spec.ts b/src/frontend/tests/end-to-end/actionsMainPage-shard-0.spec.ts
new file mode 100644
index 000000000..9788b0466
--- /dev/null
+++ b/src/frontend/tests/end-to-end/actionsMainPage-shard-0.spec.ts
@@ -0,0 +1,134 @@
+import { test } from "@playwright/test";
+
+test("user should be able to download a flow or a component", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.getByText("Chat Input", { exact: true }).click();
+  await page.getByTestId("more-options-modal").click();
+
+  await page.getByTestId("icon-SaveAll").first().click();
+  await page.waitForTimeout(3000);
+
+  if (await page.getByTestId("replace-button").isVisible()) {
+    await page.getByTestId("replace-button").click();
+  }
+  await page.waitForTimeout(3000);
+
+  await page.getByTestId("icon-ChevronLeft").last().click();
+  await page.getByRole("checkbox").nth(1).click();
+  await page.getByTestId("icon-FileDown").last().click();
+  await page.waitForTimeout(1000);
+  await page.getByText("Items exported successfully").isVisible();
+
+  await page.getByText("Flows", { exact: true }).click();
+  await page.getByRole("checkbox").nth(1).click();
+  await page.getByTestId("icon-FileDown").last().click();
+  await page.waitForTimeout(1000);
+  await page.getByText("Items exported successfully").isVisible();
+
+  await page.getByText("Components", { exact: true }).click();
+  await page.getByRole("checkbox").nth(1).click();
+  await page.getByTestId("icon-FileDown").last().click();
+  await page.waitForTimeout(1000);
+  await page.getByText("Components exported successfully").isVisible();
+});
+
+test("user should be able to upload a flow or a component", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  await page.getByTestId("upload-folder-button").last().click();
+});
+
+test("user should be able to duplicate a flow or a component", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.getByText("Chat Input", { exact: true }).click();
+  await page.getByTestId("more-options-modal").click();
+
+  await page.getByTestId("icon-SaveAll").first().click();
+  await page.waitForTimeout(3000);
+
+  if (await page.getByTestId("replace-button").isVisible()) {
+    await page.getByTestId("replace-button").click();
+  }
+  await page.waitForTimeout(3000);
+
+  await page.getByTestId("icon-ChevronLeft").last().click();
+  await page.getByRole("checkbox").nth(1).click();
+
+  await page.getByTestId("icon-Copy").last().click();
+  await page.waitForTimeout(1000);
+  await page.getByText("Items duplicated successfully").isVisible();
+});
diff --git a/src/frontend/tests/end-to-end/actionsMainPage.spec.ts b/src/frontend/tests/end-to-end/actionsMainPage-shard-1.spec.ts
similarity index 52%
rename from src/frontend/tests/end-to-end/actionsMainPage.spec.ts
rename to src/frontend/tests/end-to-end/actionsMainPage-shard-1.spec.ts
index d14feb50a..d5367bbe6 100644
--- a/src/frontend/tests/end-to-end/actionsMainPage.spec.ts
+++ b/src/frontend/tests/end-to-end/actionsMainPage-shard-1.spec.ts
@@ -89,6 +89,10 @@ test("search components", async ({ page }) => {
   }
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
@@ -133,128 +137,3 @@ test("search components", async ({ page }) => {
   await page.getByText("Prompt", { exact: true }).isHidden();
   await page.getByText("OpenAI", { exact: true }).isHidden();
 });
-
-test("user should be able to download a flow or a component", async ({
-  page,
-}) => {
-  await page.goto("/");
-  await page.waitForTimeout(2000);
-
-  let modalCount = 0;
-  try {
-    const modalTitleElement = await page?.getByTestId("modal-title");
-    if (modalTitleElement) {
-      modalCount = await modalTitleElement.count();
-    }
-  } catch (error) {
-    modalCount = 0;
-  }
-
-  while (modalCount === 0) {
-    await page.getByText("New Project", { exact: true }).click();
-    await page.waitForTimeout(5000);
-    modalCount = await page.getByTestId("modal-title")?.count();
-  }
-
-  await page.getByRole("heading", { name: "Basic Prompting" }).click();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-
-  await page.getByText("Chat Input", { exact: true }).click();
-  await page.getByTestId("more-options-modal").click();
-
-  await page.getByTestId("icon-SaveAll").first().click();
-  await page.waitForTimeout(3000);
-
-  if (await page.getByTestId("replace-button").isVisible()) {
-    await page.getByTestId("replace-button").click();
-  }
-  await page.waitForTimeout(3000);
-
-  await page.getByTestId("icon-ChevronLeft").last().click();
-  await page.getByRole("checkbox").nth(1).click();
-  await page.getByTestId("icon-FileDown").last().click();
-  await page.waitForTimeout(1000);
-  await page.getByText("Items exported successfully").isVisible();
-
-  await page.getByText("Flows", { exact: true }).click();
-  await page.getByRole("checkbox").nth(1).click();
-  await page.getByTestId("icon-FileDown").last().click();
-  await page.waitForTimeout(1000);
-  await page.getByText("Items exported successfully").isVisible();
-
-  await page.getByText("Components", { exact: true }).click();
-  await page.getByRole("checkbox").nth(1).click();
-  await page.getByTestId("icon-FileDown").last().click();
-  await page.waitForTimeout(1000);
-  await page.getByText("Components exported successfully").isVisible();
-});
-
-test("user should be able to upload a flow or a component", async ({
-  page,
-}) => {
-  await page.goto("/");
-  await page.waitForTimeout(2000);
-
-  let modalCount = 0;
-  try {
-    const modalTitleElement = await page?.getByTestId("modal-title");
-    if (modalTitleElement) {
-      modalCount = await modalTitleElement.count();
-    }
-  } catch (error) {
-    modalCount = 0;
-  }
-
-  await page.getByTestId("upload-folder-button").last().click();
-});
-
-test("user should be able to duplicate a flow or a component", async ({
-  page,
-}) => {
-  await page.goto("/");
-  await page.waitForTimeout(2000);
-
-  let modalCount = 0;
-  try {
-    const modalTitleElement = await page?.getByTestId("modal-title");
-    if (modalTitleElement) {
-      modalCount = await modalTitleElement.count();
-    }
-  } catch (error) {
-    modalCount = 0;
-  }
-
-  while (modalCount === 0) {
-    await page.getByText("New Project", { exact: true }).click();
-    await page.waitForTimeout(5000);
-    modalCount = await page.getByTestId("modal-title")?.count();
-  }
-
-  await page.getByRole("heading", { name: "Basic Prompting" }).click();
-
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-
-  await page.getByText("Chat Input", { exact: true }).click();
-  await page.getByTestId("more-options-modal").click();
-
-  await page.getByTestId("icon-SaveAll").first().click();
-  await page.waitForTimeout(3000);
-
-  if (await page.getByTestId("replace-button").isVisible()) {
-    await page.getByTestId("replace-button").click();
-  }
-  await page.waitForTimeout(3000);
-
-  await page.getByTestId("icon-ChevronLeft").last().click();
-  await page.getByRole("checkbox").nth(1).click();
-
-  await page.getByTestId("icon-Copy").last().click();
-  await page.waitForTimeout(1000);
-  await page.getByText("Items duplicated successfully").isVisible();
-});
diff --git a/src/frontend/tests/end-to-end/auto_login.spec.ts b/src/frontend/tests/end-to-end/autoLogin.spec.ts
similarity index 100%
rename from src/frontend/tests/end-to-end/auto_login.spec.ts
rename to src/frontend/tests/end-to-end/autoLogin.spec.ts
diff --git a/src/frontend/tests/end-to-end/basicExamples.spec.ts b/src/frontend/tests/end-to-end/basicExamples.spec.ts
deleted file mode 100644
index c5f80c362..000000000
--- a/src/frontend/tests/end-to-end/basicExamples.spec.ts
+++ /dev/null
@@ -1,440 +0,0 @@
-import { expect, test } from "@playwright/test";
-import path from "path";
-
-test("Basic Prompting (Hello, World)", async ({ page }) => {
-  await page.goto("/");
-  await page.waitForTimeout(2000);
-
-  let modalCount = 0;
-  try {
-    const modalTitleElement = await page?.getByTestId("modal-title");
-    if (modalTitleElement) {
-      modalCount = await modalTitleElement.count();
-    }
-  } catch (error) {
-    modalCount = 0;
-  }
-
-  while (modalCount === 0) {
-    await page.getByText("New Project", { exact: true }).click();
-    await page.waitForTimeout(5000);
-    modalCount = await page.getByTestId("modal-title")?.count();
-  }
-
-  await page.getByRole("heading", { name: "Basic Prompting" }).click();
-  await page.waitForTimeout(1000);
-
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-
-  if (!process.env.OPENAI_API_KEY) {
-    //You must set the OPENAI_API_KEY on .env file to run this test
-    expect(false).toBe(true);
-  }
-
-  await page
-    .getByTestId("popover-anchor-input-openai_api_key")
-    .fill(process.env.OPENAI_API_KEY ?? "");
-
-  await page.getByTestId("button_run_chat output").click();
-  await page.waitForTimeout(1000);
-  await page.getByText("built successfully").last().click({
-    timeout: 15000,
-  });
-
-  await page.getByText("Playground", { exact: true }).click();
-  await page
-    .getByText("No input message provided.", { exact: true })
-    .last()
-    .isVisible();
-  await page
-    .getByPlaceholder("Send a message...")
-    .last()
-    .fill("Say hello as a pirate");
-  await page.getByTestId("icon-LucideSend").last().click();
-  await page.waitForTimeout(3000);
-
-  await page.getByText("Ahoy").last().isVisible();
-  await page.getByText("Default Session").last().click();
-
-  await page.getByText("timestamp", { exact: true }).last().isVisible();
-  await page.getByText("text", { exact: true }).last().isVisible();
-  await page.getByText("sender", { exact: true }).last().isVisible();
-  await page.getByText("sender_name", { exact: true }).last().isVisible();
-  await page.getByText("session_id", { exact: true }).last().isVisible();
-  await page.getByText("files", { exact: true }).last().isVisible();
-
-  await page.getByRole("gridcell").last().isVisible();
-  await page.getByTestId("icon-Trash2").first().click();
-  await page.getByPlaceholder("Send a message...").last().isVisible();
-});
-
-test("Memory Chatbot", async ({ page }) => {
-  await page.goto("/");
-  await page.waitForTimeout(2000);
-
-  let modalCount = 0;
-  try {
-    const modalTitleElement = await page?.getByTestId("modal-title");
-    if (modalTitleElement) {
-      modalCount = await modalTitleElement.count();
-    }
-  } catch (error) {
-    modalCount = 0;
-  }
-
-  while (modalCount === 0) {
-    await page.getByText("New Project", { exact: true }).click();
-    await page.waitForTimeout(5000);
-    modalCount = await page.getByTestId("modal-title")?.count();
-  }
-
-  await page.getByRole("heading", { name: "Memory Chatbot" }).click();
-  await page.waitForTimeout(1000);
-
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-
-  if (!process.env.OPENAI_API_KEY) {
-    //You must set the OPENAI_API_KEY on .env file to run this test
-    expect(false).toBe(true);
-  }
-
-  await page
-    .getByTestId("popover-anchor-input-openai_api_key")
-    .fill(process.env.OPENAI_API_KEY ?? "");
-
-  await page.getByTestId("button_run_chat output").click();
-  await page.waitForTimeout(1000);
-  await page.getByText("built successfully").last().click({
-    timeout: 15000,
-  });
-
-  await page.getByText("Playground", { exact: true }).click();
-  await page
-    .getByText("No input message provided.", { exact: true })
-    .last()
-    .isVisible();
-  await page
-    .getByPlaceholder("Send a message...")
-    .last()
-    .fill("Remember that I'm a lion");
-  await page.getByTestId("icon-LucideSend").last().click();
-  await page.waitForTimeout(3000);
-  await page
-    .getByPlaceholder("Send a message...")
-    .last()
-    .fill("try reproduce the sound I made in words");
-  await page.getByTestId("icon-LucideSend").last().click();
-  await page.waitForTimeout(3000);
-  await page.getByText("roar").last().isVisible();
-  await page.getByText("Default Session").last().click();
-
-  await page.getByText("timestamp", { exact: true }).last().isVisible();
-  await page.getByText("text", { exact: true }).last().isVisible();
-  await page.getByText("sender", { exact: true }).last().isVisible();
-  await page.getByText("sender_name", { exact: true }).last().isVisible();
-  await page.getByText("session_id", { exact: true }).last().isVisible();
-  await page.getByText("files", { exact: true }).last().isVisible();
-
-  await page.getByRole("gridcell").last().isVisible();
-  await page.getByTestId("icon-Trash2").first().click();
-  await page.getByPlaceholder("Send a message...").last().isVisible();
-});
-
-test("Document QA", async ({ page }) => {
-  await page.goto("/");
-  await page.waitForTimeout(2000);
-
-  let modalCount = 0;
-  try {
-    const modalTitleElement = await page?.getByTestId("modal-title");
-    if (modalTitleElement) {
-      modalCount = await modalTitleElement.count();
-    }
-  } catch (error) {
-    modalCount = 0;
-  }
-
-  while (modalCount === 0) {
-    await page.getByText("New Project", { exact: true }).click();
-    await page.waitForTimeout(5000);
-    modalCount = await page.getByTestId("modal-title")?.count();
-  }
-
-  await page.getByRole("heading", { name: "Document QA" }).click();
-  await page.waitForTimeout(1000);
-
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-
-  if (!process.env.OPENAI_API_KEY) {
-    //You must set the OPENAI_API_KEY on .env file to run this test
-    expect(false).toBe(true);
-  }
-
-  await page
-    .getByTestId("popover-anchor-input-openai_api_key")
-    .fill(process.env.OPENAI_API_KEY ?? "");
-
-  const fileChooserPromise = page.waitForEvent("filechooser");
-  await page.getByTestId("icon-FileSearch2").click();
-  const fileChooser = await fileChooserPromise;
-  await fileChooser.setFiles(path.join(__dirname, "/assets/test_file.txt"));
-  await page.getByText("test_file.txt").isVisible();
-
-  await page.waitForTimeout(2000);
-
-  await page.getByTestId("button_run_chat output").click();
-  await page.getByText("built successfully").last().click({
-    timeout: 15000,
-  });
-
-  await page.getByText("Playground", { exact: true }).click();
-  await page
-    .getByText("No input message provided.", { exact: true })
-    .last()
-    .isVisible();
-
-  await page
-    .getByPlaceholder("Send a message...")
-    .last()
-    .fill("whats the text in the file?");
-  await page.getByTestId("icon-LucideSend").last().click();
-
-  await page.waitForTimeout(3000);
-
-  await page.getByText("this is a test file").last().isVisible();
-
-  await page.getByText("Default Session").last().click();
-
-  await page.getByText("timestamp", { exact: true }).last().isVisible();
-  await page.getByText("text", { exact: true }).last().isVisible();
-  await page.getByText("sender", { exact: true }).last().isVisible();
-  await page.getByText("sender_name", { exact: true }).last().isVisible();
-  await page.getByText("session_id", { exact: true }).last().isVisible();
-  await page.getByText("files", { exact: true }).last().isVisible();
-
-  await page.getByRole("gridcell").last().isVisible();
-  await page.getByTestId("icon-Trash2").first().click();
-  await page.getByPlaceholder("Send a message...").last().isVisible();
-});
-
-test("Blog Writer", async ({ page }) => {
-  await page.goto("/");
-  await page.waitForTimeout(2000);
-
-  let modalCount = 0;
-  try {
-    const modalTitleElement = await page?.getByTestId("modal-title");
-    if (modalTitleElement) {
-      modalCount = await modalTitleElement.count();
-    }
-  } catch (error) {
-    modalCount = 0;
-  }
-
-  while (modalCount === 0) {
-    await page.getByText("New Project", { exact: true }).click();
-    await page.waitForTimeout(5000);
-    modalCount = await page.getByTestId("modal-title")?.count();
-  }
-
-  await page.getByRole("heading", { name: "Blog Writer" }).click();
-  await page.waitForTimeout(1000);
-
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-
-  if (!process.env.OPENAI_API_KEY) {
-    //You must set the OPENAI_API_KEY on .env file to run this test
-    expect(false).toBe(true);
-  }
-
-  await page
-    .getByTestId("popover-anchor-input-openai_api_key")
-    .fill(process.env.OPENAI_API_KEY ?? "");
-
-  await page
-    .getByTestId("input-list-input_urls-0")
-    .nth(0)
-    .fill(
-      "https://www.natgeokids.com/uk/discover/animals/sea-life/turtle-facts/",
-    );
-  await page
-    .getByTestId("input-list-input_urls-1")
-    .nth(0)
-    .fill("https://www.originaldiving.com/blog/top-ten-turtle-facts");
-
-  await page
-    .getByTestId("popover-anchor-input-input_value")
-    .nth(0)
-    .fill(
-      "Use the references above for style to write a new blog/tutorial about turtles. Suggest non-covered topics.",
-    );
-
-  await page.getByTestId("button_run_chat output").click();
-  await page.waitForTimeout(5000);
-  await page.getByText("built successfully").last().click({
-    timeout: 30000,
-  });
-
-  await page.getByText("Playground", { exact: true }).click();
-  await page
-    .getByPlaceholder(
-      "No chat input variables found. Click to run your flow.",
-      { exact: true },
-    )
-    .last()
-    .isVisible();
-
-  await page.waitForTimeout(3000);
-
-  await page.getByText("turtles").last().isVisible();
-  await page.getByText("sea").last().isVisible();
-  await page.getByText("survival").last().isVisible();
-
-  await page.getByText("Instructions").last().click();
-
-  const value = await page
-    .getByPlaceholder("Enter text...")
-    .last()
-    .inputValue();
-
-  expect(value).toBe(
-    "Use the references above for style to write a new blog/tutorial about turtles. Suggest non-covered topics.",
-  );
-
-  await page.getByTestId("icon-ExternalLink").last().click();
-
-  const count = await page
-    .getByText(
-      "Use the references above for style to write a new blog/tutorial about turtles. Suggest non-covered topics.",
-    )
-    .count();
-
-  if (count <= 1) {
-    expect(false).toBe(true);
-  }
-});
-
-test("Vector Store RAG", async ({ page }) => {
-  await page.goto("/");
-  await page.waitForTimeout(2000);
-
-  let modalCount = 0;
-  try {
-    const modalTitleElement = await page?.getByTestId("modal-title");
-    if (modalTitleElement) {
-      modalCount = await modalTitleElement.count();
-    }
-  } catch (error) {
-    modalCount = 0;
-  }
-
-  while (modalCount === 0) {
-    await page.getByText("New Project", { exact: true }).click();
-    await page.waitForTimeout(5000);
-    modalCount = await page.getByTestId("modal-title")?.count();
-  }
-
-  await page.getByRole("heading", { name: "Vector Store RAG" }).click();
-  await page.waitForTimeout(1000);
-
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-
-  if (
-    !process.env.OPENAI_API_KEY ||
-    !process.env.ASTRA_DB_API_ENDPOINT ||
-    !process.env.ASTRA_DB_APPLICATION_TOKEN
-  ) {
-    //You must set the OPENAI_API_KEY, ASTRA_DB_API_ENDPOINT and ASTRA_DB_APPLICATION_TOKEN on .env file to run this test
-    expect(false).toBe(true);
-  }
-
-  await page
-    .getByTestId("popover-anchor-input-openai_api_key")
-    .nth(0)
-    .fill(process.env.OPENAI_API_KEY ?? "");
-
-  await page
-    .getByTestId("popover-anchor-input-openai_api_key")
-    .nth(1)
-    .fill(process.env.OPENAI_API_KEY ?? "");
-
-  await page
-    .getByTestId("popover-anchor-input-openai_api_key")
-    .nth(2)
-    .fill(process.env.OPENAI_API_KEY ?? "");
-
-  await page
-    .getByTestId("popover-anchor-input-token")
-    .nth(0)
-    .fill(process.env.ASTRA_DB_APPLICATION_TOKEN ?? "");
-  await page
-    .getByTestId("popover-anchor-input-token")
-    .nth(1)
-    .fill(process.env.ASTRA_DB_APPLICATION_TOKEN ?? "");
-
-  await page
-    .getByTestId("popover-anchor-input-api_endpoint")
-    .nth(0)
-    .fill(process.env.ASTRA_DB_API_ENDPOINT ?? "");
-  await page
-    .getByTestId("popover-anchor-input-api_endpoint")
-    .nth(1)
-    .fill(process.env.ASTRA_DB_API_ENDPOINT ?? "");
-
-  const fileChooserPromise = page.waitForEvent("filechooser");
-  await page.getByTestId("icon-FileSearch2").last().click();
-  const fileChooser = await fileChooserPromise;
-  await fileChooser.setFiles(path.join(__dirname, "/assets/test_file.txt"));
-  await page.getByText("test_file.txt").isVisible();
-  await page.waitForTimeout(2000);
-
-  await page.getByTestId("button_run_astra db").first().click();
-  await page.getByText("built successfully").last().click({
-    timeout: 30000,
-  });
-
-  await page.getByTestId("button_run_chat output").click();
-  await page.getByText("built successfully").last().click({
-    timeout: 30000,
-  });
-
-  await page.getByText("Playground", { exact: true }).click();
-
-  await page.getByPlaceholder("Send a message...").last().fill("hello");
-
-  await page.getByTestId("icon-LucideSend").last().click();
-
-  await page
-    .getByText("This is a test file.", { exact: true })
-    .last()
-    .isVisible();
-
-  await page.getByText("Memories", { exact: true }).last().click();
-  await page.getByText("Default Session").last().click();
-
-  await page.getByText("timestamp", { exact: true }).last().isVisible();
-  await page.getByText("text", { exact: true }).last().isVisible();
-  await page.getByText("sender", { exact: true }).last().isVisible();
-  await page.getByText("sender_name", { exact: true }).last().isVisible();
-  await page.getByText("session_id", { exact: true }).last().isVisible();
-  await page.getByText("files", { exact: true }).last().isVisible();
-
-  await page.getByRole("gridcell").last().isVisible();
-  await page.getByTestId("icon-Trash2").first().click();
-  await page.getByPlaceholder("Send a message...").last().isVisible();
-});
diff --git a/src/frontend/tests/end-to-end/chatInputOutput.spec.ts b/src/frontend/tests/end-to-end/chatInputOutput.spec.ts
index e1adf3d88..7f5bdd050 100644
--- a/src/frontend/tests/end-to-end/chatInputOutput.spec.ts
+++ b/src/frontend/tests/end-to-end/chatInputOutput.spec.ts
@@ -1,5 +1,4 @@
 import { expect, test } from "@playwright/test";
-import { readFileSync } from "fs";
 
 test("chat_io_teste", async ({ page }) => {
   await page.goto("/");
@@ -22,13 +21,14 @@ test("chat_io_teste", async ({ page }) => {
     modalCount = await page.getByTestId("modal-title")?.count();
   }
 
-  const jsonContent = readFileSync(
-    "tests/end-to-end/assets/ChatTest.json",
-    "utf-8",
-  );
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("chat output");
@@ -50,6 +50,10 @@ test("chat_io_teste", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
@@ -59,28 +63,48 @@ test("chat_io_teste", async ({ page }) => {
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
 
+  const elementsChatInput = await page
+    .locator('[data-testid="handle-chatinput-shownode-message-right"]')
+    .all();
+
+  let visibleElementHandle;
+
+  for (const element of elementsChatInput) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
   // Click and hold on the first element
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[9]/button/div[1]',
-    )
-    .hover();
+  await visibleElementHandle.hover();
   await page.mouse.down();
 
   // Move to the second element
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[3]/div/button/div[1]',
-    )
-    .hover();
+
+  const elementsChatOutput = await page
+    .getByTestId("handle-chatoutput-shownode-text-left")
+    .all();
+
+  for (const element of elementsChatOutput) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover();
 
   // Release the mouse
   await page.mouse.up();
 
   await page.getByLabel("fit view").click();
   await page.getByText("Playground", { exact: true }).click();
-  await page.getByPlaceholder("Send a message...").click();
-  await page.getByPlaceholder("Send a message...").fill("teste");
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+  await page.getByTestId("input-chat-playground").click();
+  await page.getByTestId("input-chat-playground").fill("teste");
   await page.getByRole("button").nth(1).click();
   const chat_output = page.getByTestId("chat-message-AI-teste");
   const chat_input = page.getByTestId("chat-message-User-teste");
diff --git a/src/frontend/tests/end-to-end/chatInputOutputUser - Images.spec.ts b/src/frontend/tests/end-to-end/chatInputOutputUser - Images.spec.ts
new file mode 100644
index 000000000..72c451c10
--- /dev/null
+++ b/src/frontend/tests/end-to-end/chatInputOutputUser - Images.spec.ts	
@@ -0,0 +1,112 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import { readFileSync } from "fs";
+import path from "path";
+
+test("user must be able to send an image on chat", async ({ page }) => {
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+
+  await page.waitForTimeout(1000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  if (!process.env.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown-model_name").click();
+  await page.getByTestId("gpt-4o-0-option").click();
+
+  await page.waitForSelector("text=Chat Input", { timeout: 30000 });
+
+  await page.getByText("Chat Input", { exact: true }).click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+  await page.getByText("Save Changes").click();
+
+  await page.getByText("Playground", { exact: true }).click();
+
+  // Read the image file as a binary string
+  const filePath = "tests/end-to-end/assets/chain.png";
+  const fileContent = readFileSync(filePath, "base64");
+
+  // Create the DataTransfer and File objects within the browser context
+  const dataTransfer = await page.evaluateHandle(
+    ({ fileContent }) => {
+      const dt = new DataTransfer();
+      const byteCharacters = atob(fileContent);
+      const byteNumbers = new Array(byteCharacters.length);
+      for (let i = 0; i < byteCharacters.length; i++) {
+        byteNumbers[i] = byteCharacters.charCodeAt(i);
+      }
+      const byteArray = new Uint8Array(byteNumbers);
+      const file = new File([byteArray], "chain.png", { type: "image/png" });
+      dt.items.add(file);
+      return dt;
+    },
+    { fileContent },
+  );
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  // Locate the target element
+  const element = await page.getByTestId("input-chat-playground");
+
+  // Dispatch the drop event on the target element
+  await element.dispatchEvent("drop", { dataTransfer });
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-LucideSend").click();
+
+  await page.waitForSelector("text=chain.png", { timeout: 30000 });
+
+  await page.getByText("chain.png").isVisible();
+
+  await page.getByText("Close", { exact: true }).click();
+
+  await page.waitForSelector('[data-testid="icon-ScanEye"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("icon-ScanEye").nth(4).click();
+
+  await page.getByText("Restart").isHidden();
+});
diff --git a/src/frontend/tests/end-to-end/chatInputOutputUser - Inspection.spec.ts b/src/frontend/tests/end-to-end/chatInputOutputUser - Inspection.spec.ts
new file mode 100644
index 000000000..50fbdba0a
--- /dev/null
+++ b/src/frontend/tests/end-to-end/chatInputOutputUser - Inspection.spec.ts	
@@ -0,0 +1,67 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import { readFileSync } from "fs";
+import path from "path";
+
+test("user must be able to see output inspection", async ({ page }) => {
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+
+  await page.waitForTimeout(1000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  if (!process.env.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown-model_name").click();
+  await page.getByTestId("gpt-4o-0-option").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByTestId("button_run_chat output").last().click();
+
+  await page.waitForTimeout(5000);
+
+  await page.waitForSelector('[data-testid="icon-ScanEye"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("icon-ScanEye").nth(4).click();
+
+  await page.getByText("Sender", { exact: true }).isVisible();
+  await page.getByText("Type", { exact: true }).isVisible();
+  await page.getByText("User", { exact: true }).last().isVisible();
+});
diff --git a/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts b/src/frontend/tests/end-to-end/chatInputOutputUser - Interact.spec.ts
similarity index 50%
rename from src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
rename to src/frontend/tests/end-to-end/chatInputOutputUser - Interact.spec.ts
index 524312bb3..8f77262ba 100644
--- a/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
+++ b/src/frontend/tests/end-to-end/chatInputOutputUser - Interact.spec.ts	
@@ -29,7 +29,9 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
   }
 
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
-  await page.waitForTimeout(1000);
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
 
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
@@ -44,8 +46,23 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
   await page
     .getByTestId("popover-anchor-input-openai_api_key")
     .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown-model_name").click();
+  await page.getByTestId("gpt-4o-0-option").click();
+
+  await page.waitForTimeout(2000);
   await page.getByText("Playground", { exact: true }).click();
-  await page.getByPlaceholder("Send a message...").fill("Hello, how are you?");
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("input-chat-playground").fill("Hello, how are you?");
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
   await page.getByTestId("icon-LucideSend").click();
   let valueUser = await page.getByTestId("sender_name_user").textContent();
 
@@ -67,6 +84,11 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
       "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
     );
   await page.getByText("Playground", { exact: true }).last().click();
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
   await page.getByTestId("icon-LucideSend").click();
   await page.getByText("Close", { exact: true }).click();
   await page.getByText("Chat Input", { exact: true }).click();
@@ -89,6 +111,11 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
     .fill("TestSenderNameAI");
 
   await page.getByText("Playground", { exact: true }).last().click();
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
   await page.getByTestId("icon-LucideSend").click();
 
   valueUser = await page
@@ -110,153 +137,3 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
       .isVisible(),
   );
 });
-
-test("user must be able to see output inspection", async ({ page }) => {
-  if (!process.env.CI) {
-    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
-  }
-
-  await page.goto("/");
-
-  await page.waitForTimeout(1000);
-
-  let modalCount = 0;
-  try {
-    const modalTitleElement = await page?.getByTestId("modal-title");
-    if (modalTitleElement) {
-      modalCount = await modalTitleElement.count();
-    }
-  } catch (error) {
-    modalCount = 0;
-  }
-
-  while (modalCount === 0) {
-    await page.getByText("New Project", { exact: true }).click();
-    await page.waitForTimeout(5000);
-    modalCount = await page.getByTestId("modal-title")?.count();
-  }
-
-  await page.getByRole("heading", { name: "Basic Prompting" }).click();
-  await page.waitForTimeout(1000);
-
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-
-  if (!process.env.OPENAI_API_KEY) {
-    //You must set the OPENAI_API_KEY on .env file to run this test
-    expect(false).toBe(true);
-  }
-
-  await page
-    .getByTestId("popover-anchor-input-openai_api_key")
-    .fill(process.env.OPENAI_API_KEY ?? "");
-
-  await page.getByTestId("button_run_chat output").last().click();
-
-  await page.waitForTimeout(5000);
-
-  await page.waitForSelector('[data-testid="icon-ScanEye"]', {
-    timeout: 30000,
-  });
-
-  await page.getByTestId("icon-ScanEye").nth(4).click();
-
-  await page.getByText("Sender", { exact: true }).isVisible();
-  await page.getByText("Type", { exact: true }).isVisible();
-  await page.getByText("User", { exact: true }).last().isVisible();
-});
-
-test("user must be able to send an image on chat", async ({ page }) => {
-  if (!process.env.CI) {
-    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
-  }
-
-  await page.goto("/");
-
-  await page.waitForTimeout(1000);
-
-  let modalCount = 0;
-  try {
-    const modalTitleElement = await page?.getByTestId("modal-title");
-    if (modalTitleElement) {
-      modalCount = await modalTitleElement.count();
-    }
-  } catch (error) {
-    modalCount = 0;
-  }
-
-  while (modalCount === 0) {
-    await page.getByText("New Project", { exact: true }).click();
-    await page.waitForTimeout(5000);
-    modalCount = await page.getByTestId("modal-title")?.count();
-  }
-
-  await page.getByRole("heading", { name: "Basic Prompting" }).click();
-  await page.waitForTimeout(1000);
-
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-
-  if (!process.env.OPENAI_API_KEY) {
-    //You must set the OPENAI_API_KEY on .env file to run this test
-    expect(false).toBe(true);
-  }
-
-  await page
-    .getByTestId("popover-anchor-input-openai_api_key")
-    .fill(process.env.OPENAI_API_KEY ?? "");
-
-  await page.getByText("Chat Input", { exact: true }).click();
-  await page.getByTestId("more-options-modal").click();
-  await page.getByTestId("edit-button-modal").click();
-  await page.getByText("Save Changes").click();
-
-  await page.getByText("Playground", { exact: true }).click();
-
-  // Read the image file as a binary string
-  const filePath = "tests/end-to-end/assets/chain.png";
-  const fileContent = readFileSync(filePath, "base64");
-
-  // Create the DataTransfer and File objects within the browser context
-  const dataTransfer = await page.evaluateHandle(
-    ({ fileContent }) => {
-      const dt = new DataTransfer();
-      const byteCharacters = atob(fileContent);
-      const byteNumbers = new Array(byteCharacters.length);
-      for (let i = 0; i < byteCharacters.length; i++) {
-        byteNumbers[i] = byteCharacters.charCodeAt(i);
-      }
-      const byteArray = new Uint8Array(byteNumbers);
-      const file = new File([byteArray], "chain.png", { type: "image/png" });
-      dt.items.add(file);
-      return dt;
-    },
-    { fileContent },
-  );
-
-  // Locate the target element
-  const element = await page.getByPlaceholder("Send a message...");
-
-  // Dispatch the drop event on the target element
-  await element.dispatchEvent("drop", { dataTransfer });
-
-  await page.waitForTimeout(4000);
-
-  await page.getByText("chain.png").isVisible();
-  await page.getByTestId("icon-LucideSend").click();
-  await page.waitForTimeout(2000);
-  await page.getByText("chain.png").isVisible();
-
-  await page.getByText("Close", { exact: true }).click();
-
-  await page.waitForSelector('[data-testid="icon-ScanEye"]', {
-    timeout: 30000,
-  });
-
-  await page.getByTestId("icon-ScanEye").nth(4).click();
-  await page.getByText("Restart").isHidden();
-});
diff --git a/src/frontend/tests/end-to-end/chatInputOutputUser-shard-0.spec.ts b/src/frontend/tests/end-to-end/chatInputOutputUser-shard-0.spec.ts
new file mode 100644
index 000000000..72c451c10
--- /dev/null
+++ b/src/frontend/tests/end-to-end/chatInputOutputUser-shard-0.spec.ts
@@ -0,0 +1,112 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import { readFileSync } from "fs";
+import path from "path";
+
+test("user must be able to send an image on chat", async ({ page }) => {
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+
+  await page.waitForTimeout(1000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  if (!process.env.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown-model_name").click();
+  await page.getByTestId("gpt-4o-0-option").click();
+
+  await page.waitForSelector("text=Chat Input", { timeout: 30000 });
+
+  await page.getByText("Chat Input", { exact: true }).click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+  await page.getByText("Save Changes").click();
+
+  await page.getByText("Playground", { exact: true }).click();
+
+  // Read the image file as a binary string
+  const filePath = "tests/end-to-end/assets/chain.png";
+  const fileContent = readFileSync(filePath, "base64");
+
+  // Create the DataTransfer and File objects within the browser context
+  const dataTransfer = await page.evaluateHandle(
+    ({ fileContent }) => {
+      const dt = new DataTransfer();
+      const byteCharacters = atob(fileContent);
+      const byteNumbers = new Array(byteCharacters.length);
+      for (let i = 0; i < byteCharacters.length; i++) {
+        byteNumbers[i] = byteCharacters.charCodeAt(i);
+      }
+      const byteArray = new Uint8Array(byteNumbers);
+      const file = new File([byteArray], "chain.png", { type: "image/png" });
+      dt.items.add(file);
+      return dt;
+    },
+    { fileContent },
+  );
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  // Locate the target element
+  const element = await page.getByTestId("input-chat-playground");
+
+  // Dispatch the drop event on the target element
+  await element.dispatchEvent("drop", { dataTransfer });
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-LucideSend").click();
+
+  await page.waitForSelector("text=chain.png", { timeout: 30000 });
+
+  await page.getByText("chain.png").isVisible();
+
+  await page.getByText("Close", { exact: true }).click();
+
+  await page.waitForSelector('[data-testid="icon-ScanEye"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("icon-ScanEye").nth(4).click();
+
+  await page.getByText("Restart").isHidden();
+});
diff --git a/src/frontend/tests/end-to-end/chatInputOutputUser-shard-1.spec.ts b/src/frontend/tests/end-to-end/chatInputOutputUser-shard-1.spec.ts
new file mode 100644
index 000000000..50fbdba0a
--- /dev/null
+++ b/src/frontend/tests/end-to-end/chatInputOutputUser-shard-1.spec.ts
@@ -0,0 +1,67 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import { readFileSync } from "fs";
+import path from "path";
+
+test("user must be able to see output inspection", async ({ page }) => {
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+
+  await page.waitForTimeout(1000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  if (!process.env.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown-model_name").click();
+  await page.getByTestId("gpt-4o-0-option").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByTestId("button_run_chat output").last().click();
+
+  await page.waitForTimeout(5000);
+
+  await page.waitForSelector('[data-testid="icon-ScanEye"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("icon-ScanEye").nth(4).click();
+
+  await page.getByText("Sender", { exact: true }).isVisible();
+  await page.getByText("Type", { exact: true }).isVisible();
+  await page.getByText("User", { exact: true }).last().isVisible();
+});
diff --git a/src/frontend/tests/end-to-end/chatInputOutputUser-shard-2.spec.ts b/src/frontend/tests/end-to-end/chatInputOutputUser-shard-2.spec.ts
new file mode 100644
index 000000000..8f77262ba
--- /dev/null
+++ b/src/frontend/tests/end-to-end/chatInputOutputUser-shard-2.spec.ts
@@ -0,0 +1,139 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import { readFileSync } from "fs";
+import path from "path";
+
+test("user must interact with chat with Input/Output", async ({ page }) => {
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+
+  await page.waitForTimeout(1000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  if (!process.env.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown-model_name").click();
+  await page.getByTestId("gpt-4o-0-option").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("Playground", { exact: true }).click();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("input-chat-playground").fill("Hello, how are you?");
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-LucideSend").click();
+  let valueUser = await page.getByTestId("sender_name_user").textContent();
+
+  await page.waitForSelector('[data-testid="sender_name_ai"]', {
+    timeout: 100000,
+  });
+
+  let valueAI = await page.getByTestId("sender_name_ai").textContent();
+
+  expect(valueUser).toBe("User");
+  expect(valueAI).toBe("AI");
+
+  await page.keyboard.press("Escape");
+
+  await page
+    .getByTestId("textarea-input_value")
+    .nth(0)
+    .fill(
+      "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
+    );
+  await page.getByText("Playground", { exact: true }).last().click();
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-LucideSend").click();
+  await page.getByText("Close", { exact: true }).click();
+  await page.getByText("Chat Input", { exact: true }).click();
+  await page.getByTestId("advanced-button-modal").click();
+  await page.getByTestId("showsender_name").click();
+  await page.getByText("Save Changes", { exact: true }).click();
+
+  await page.getByText("Chat Output", { exact: true }).click();
+  await page.getByTestId("advanced-button-modal").click();
+  await page.getByTestId("showsender_name").click();
+  await page.getByText("Save Changes", { exact: true }).click();
+
+  await page
+    .getByTestId("popover-anchor-input-sender_name")
+    .nth(1)
+    .fill("TestSenderNameUser");
+  await page
+    .getByTestId("popover-anchor-input-sender_name")
+    .nth(0)
+    .fill("TestSenderNameAI");
+
+  await page.getByText("Playground", { exact: true }).last().click();
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-LucideSend").click();
+
+  valueUser = await page
+    .getByTestId("sender_name_testsendernameuser")
+    .textContent();
+  valueAI = await page
+    .getByTestId("sender_name_testsendernameai")
+    .textContent();
+
+  expect(valueUser).toBe("TestSenderNameUser");
+  expect(valueAI).toBe("TestSenderNameAI");
+
+  expect(
+    await page
+      .getByText(
+        "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
+        { exact: true },
+      )
+      .isVisible(),
+  );
+});
diff --git a/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts b/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
index 044065d18..27cc128c6 100644
--- a/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
@@ -20,10 +20,14 @@ test("CodeAreaModalComponent", async ({ page }) => {
     modalCount = await page.getByTestId("modal-title")?.count();
   }
 
-  await page.waitForTimeout(1000);
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("python function");
diff --git a/src/frontend/tests/end-to-end/curl_api_generation.spec.ts b/src/frontend/tests/end-to-end/curlApiGeneration.spec.ts
similarity index 100%
rename from src/frontend/tests/end-to-end/curl_api_generation.spec.ts
rename to src/frontend/tests/end-to-end/curlApiGeneration.spec.ts
diff --git a/src/frontend/tests/end-to-end/decisionFlow.spec.ts b/src/frontend/tests/end-to-end/decisionFlow.spec.ts
new file mode 100644
index 000000000..7d15bfff2
--- /dev/null
+++ b/src/frontend/tests/end-to-end/decisionFlow.spec.ts
@@ -0,0 +1,568 @@
+import { expect, test } from "@playwright/test";
+
+test("should create a flow with decision", async ({ page }) => {
+  await page.goto("/");
+  await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("chat input");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("inputsChat Input")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("create list");
+  await page.waitForTimeout(1000);
+
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page
+    .getByTestId("helpersCreate List")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTestId("input-list-plus-btn_texts-0").click();
+  await page.getByTestId("input-list-plus-btn_texts-0").click();
+
+  await page
+    .getByTestId("input-list-input_texts-0")
+    .fill("big news! langflow 1.0 is out");
+  await page
+    .getByTestId("input-list-input_texts-1")
+    .fill("uhul that movie was awesome");
+  await page.getByTestId("input-list-input_texts-2").fill("love you babe");
+
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page
+    .getByTestId("helpersCreate List")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTestId("input-list-plus-btn_texts-0").last().click();
+  await page.getByTestId("input-list-plus-btn_texts-0").last().click();
+
+  await page
+    .getByTestId("input-list-input_texts-0")
+    .last()
+    .fill("oh my cat died");
+  await page
+    .getByTestId("input-list-input_texts-1")
+    .last()
+    .fill("No one loves me");
+  await page.getByTestId("input-list-input_texts-2").last().fill("not cool..");
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("parse data");
+  await page.waitForTimeout(1000);
+
+  await page.getByTitle("zoom out").click();
+
+  await page
+    .getByTestId("helpersParse Data")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page
+    .getByTestId("helpersParse Data")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("prompt");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("promptsPrompt")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("openai");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("modelsOpenAI")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("conditional router");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("prototypesConditional Router")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("pass");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("prototypesPass")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page
+    .getByTestId("prototypesPass")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("zoom out").click();
+
+  await page
+    .getByTestId("prototypesPass")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("zoom out").click();
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("chatoutput");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("outputsChat Output")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("zoom out").click();
+
+  await page
+    .getByTestId("outputsChat Output")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  //connection 1
+  const elementCreateListOutput0 = await page
+    .getByTestId("handle-createlist-shownode-data list-right")
+    .nth(2);
+  await elementCreateListOutput0.hover();
+  await page.mouse.down();
+  const elementParseDataInput0 = await page
+    .getByTestId("handle-parsedata-shownode-data-left")
+    .nth(0);
+  await elementParseDataInput0.hover();
+  await page.mouse.up();
+
+  //connection 2
+  const elementCreateListOutput1 = await page
+    .getByTestId("handle-createlist-shownode-data list-right")
+    .first();
+  await elementCreateListOutput1.hover();
+  await page.mouse.down();
+  const elementParseDataInput1 = await page
+    .getByTestId("handle-parsedata-shownode-data-left")
+    .last();
+  await elementParseDataInput1.hover();
+  await page.mouse.up();
+
+  //connection 3
+  const elementChatInputOutput = await page
+    .getByTestId("handle-chatinput-shownode-message-right")
+    .first();
+  await elementChatInputOutput.hover();
+  await page.mouse.down();
+  const elementPassInput3 = await page
+    .getByTestId("handle-pass-shownode-input message-left")
+    .last();
+  await elementPassInput3.hover();
+  await page.mouse.up();
+
+  //connection 4
+  const elementPassOutput3 = await page
+    .getByTestId("handle-pass-shownode-output message-right")
+    .nth(4);
+  await elementPassOutput3.hover();
+  await page.mouse.down();
+  const elementConditionalRouterInput = await page
+    .getByTestId("handle-conditionalrouter-shownode-message-left")
+    .first();
+  await elementConditionalRouterInput.hover();
+  await page.mouse.up();
+
+  //edit prompt
+  await page.getByTestId("prompt-input-template").first().click();
+  await page.getByTestId("modal-prompt-input-template").first().fill(`
+    {Condition}
+
+Answer with either TRUE or FALSE (and nothing else).
+
+TRUE Examples:
+{true_examples}
+
+FALSE Examples:
+{false_examples}
+
+
+User: {user_message}
+AI:
+
+    `);
+
+  await page.getByText("Check & Save").last().click();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  //connection 5
+  const elementParseDataOutput0 = await page
+    .getByTestId("handle-parsedata-shownode-text-right")
+    .nth(0);
+  await elementParseDataOutput0.hover();
+  await page.mouse.down();
+  const elementPromptInput = await page
+    .getByTestId("handle-prompt-shownode-false_examples-left")
+    .first();
+  await elementPromptInput.hover();
+  await page.mouse.up();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  //connection 6
+  const elementParseDataOutput1 = await page
+    .getByTestId("handle-parsedata-shownode-text-right")
+    .nth(2);
+  await elementParseDataOutput1.hover();
+  await page.mouse.down();
+  const elementPromptInput1 = await page
+    .getByTestId("handle-prompt-shownode-true_examples-left")
+    .first();
+  await elementPromptInput1.hover();
+  await page.mouse.up();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  //connection 7
+  elementPassOutput3.hover();
+  await page.mouse.down();
+  const elementPromptInput2 = await page
+    .getByTestId("handle-prompt-shownode-user_message-left")
+    .first();
+  await elementPromptInput2.hover();
+  await page.mouse.up();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  //connection 8
+  const elementPromptOutput = await page
+    .getByTestId("handle-prompt-shownode-prompt message-right")
+    .first();
+  await elementPromptOutput.hover();
+  await page.mouse.down();
+  const elementOpenAiInput = await page
+    .getByTestId("handle-openaimodel-shownode-input-left")
+    .first();
+  await elementOpenAiInput.hover();
+  await page.mouse.up();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  //connection 9
+  const elementPassOutput1 = await page
+    .getByTestId("handle-pass-shownode-output message-right")
+    .nth(2);
+  await elementPassOutput1.hover();
+  await page.mouse.down();
+  const elementChatOutput = await page
+    .getByTestId("handle-chatoutput-shownode-text-left")
+    .last();
+  await elementChatOutput.hover();
+  await page.mouse.up();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  //connection 10
+  const elementPassOutput2 = await page
+    .getByTestId("handle-pass-shownode-output message-right")
+    .first();
+  await elementPassOutput2.hover();
+  await page.mouse.down();
+  const elementChatOutput1 = await page
+    .getByTestId("handle-chatoutput-shownode-text-left")
+    .first();
+  await elementChatOutput1.hover();
+  await page.mouse.up();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  //connection 11
+  const elementOpenAiOutput = await page
+    .getByTestId("handle-openaimodel-shownode-text-right")
+    .first();
+  await elementOpenAiOutput.hover();
+  await page.mouse.down();
+  const elementConditionalRouterInput1 = await page
+    .getByTestId("handle-conditionalrouter-shownode-input text-left")
+    .first();
+  await elementConditionalRouterInput1.hover();
+  await page.mouse.up();
+
+  await page.getByTestId("icon-arrow-right").nth(1).click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  let showIgnoredMessageCheckbox = await page.getByTestId(
+    "showignored_message",
+  );
+
+  if (!(await showIgnoredMessageCheckbox.isChecked())) {
+    await showIgnoredMessageCheckbox.click();
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-input_message-edit")
+    .nth(0)
+    .fill("You're Happy! 🤪");
+  await page.getByText("Save Changes").click();
+
+  await page.getByTitle("zoom in").click();
+  await page.getByTitle("zoom in").click();
+  await page.getByTitle("zoom in").click();
+  await page.getByTitle("zoom in").click();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  await page.getByTestId("icon-arrow-right").nth(0).click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  showIgnoredMessageCheckbox = await page.getByTestId("showignored_message");
+
+  if (!(await showIgnoredMessageCheckbox.isChecked())) {
+    await showIgnoredMessageCheckbox.click();
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-input_message-edit")
+    .nth(0)
+    .fill("You're Sad! 🥲");
+  await page.getByText("Save Changes").click();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTestId("popover-anchor-input-match_text").fill("TRUE");
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  //connection 12
+  const elementConditionalRouterOutput1 = await page
+    .getByTestId("handle-conditionalrouter-shownode-true route-right")
+    .first();
+  await elementConditionalRouterOutput1.hover();
+  await page.mouse.down();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  const elementPassInput1 = await page
+    .getByTestId("handle-pass-shownode-ignored message-left")
+    .nth(1);
+  await elementPassInput1.hover();
+  await page.mouse.up();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  //connection 13
+  const elementConditionalRouterOutput2 = await page
+    .getByTestId("handle-conditionalrouter-shownode-false route-right")
+    .first();
+  await elementConditionalRouterOutput2.hover();
+  await page.mouse.down();
+  const elementPassInput2 = await page
+    .getByTestId("handle-pass-shownode-ignored message-left")
+    .first();
+  await elementPassInput2.hover();
+  await page.mouse.up();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  if (!process.env.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByLabel("fit view").click();
+  await page.getByText("Playground", { exact: true }).click();
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+  await page.getByTestId("input-chat-playground").click();
+
+  await page.getByTestId("input-chat-playground").fill("my dog just dead");
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-LucideSend").click();
+
+  await page.waitForSelector("text=🥲", {
+    timeout: 100000,
+  });
+
+  await page.getByText("🥲").isVisible();
+});
diff --git a/src/frontend/tests/end-to-end/deleteComponentFlows.spec.ts b/src/frontend/tests/end-to-end/deleteComponentFlows.spec.ts
index 9099727b6..e8a96fce0 100644
--- a/src/frontend/tests/end-to-end/deleteComponentFlows.spec.ts
+++ b/src/frontend/tests/end-to-end/deleteComponentFlows.spec.ts
@@ -1,29 +1,61 @@
 import { test } from "@playwright/test";
 
+test("should add API-KEY", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("api-key-button-store").click();
+  await page
+    .getByPlaceholder("Insert your API Key")
+    .fill("testtesttesttesttesttest");
+
+  await page.getByTestId("api-key-save-button-store").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("Success! Your API Key has been saved.").isVisible();
+
+  await page
+    .getByPlaceholder("Insert your API Key")
+    .fill(process.env.STORE_API_KEY ?? "");
+  await page.getByTestId("api-key-save-button-store").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("Success! Your API Key has been saved.").isVisible();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("API Key Error").isHidden();
+});
+
 test("should delete a flow", async ({ page }) => {
   await page.goto("/");
   await page.waitForTimeout(2000);
+
+  await page.waitForSelector("text=Store", { timeout: 30000 });
+
   await page.getByText("Store").nth(0).click();
 
-  await page.getByText("API Key", { exact: true }).click();
-  await page
-    .getByPlaceholder("Insert your API Key", { exact: true })
-    .fill(process.env.STORE_API_KEY ?? "");
-  await page.getByText("Save").last().click();
-  await page.waitForTimeout(8000);
-  await page.getByText("Store").nth(0).click();
-
-  await page.getByTestId("install-Website Content QA").click();
-  await page.waitForTimeout(5000);
-  await page.getByText("My Collection").nth(0).click();
-  await page.getByText("Website Content QA").first().isVisible();
-
-  await page.getByLabel("checkbox-component").last().waitFor({
-    state: "visible",
-    timeout: 30000, // Timeout of 30 seconds
+  await page.waitForSelector('[data-testid="install-Website Content QA"]', {
+    timeout: 100000,
   });
 
-  await page.getByLabel("checkbox-component").first().click();
+  await page.getByTestId("install-Website Content QA").click();
+
+  await page.waitForSelector("text=My Collection", { timeout: 30000 });
+
+  await page.getByText("My Collection").nth(0).click();
+
+  await page.waitForSelector("text=Website Content QA", { timeout: 30000 });
+
+  await page.getByText("Website Content QA").first().isVisible();
+
+  await page.waitForSelector('[data-testid="checkbox-component"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("checkbox-component").first().click();
 
   await page.getByTestId("icon-Trash2").click();
   await page
@@ -44,12 +76,12 @@ test("should delete a component", async ({ page }) => {
   await page.getByText("Components").first().click();
   await page.getByText("Basic RAG").first().isVisible();
 
-  await page.getByLabel("checkbox-component").last().waitFor({
-    state: "visible",
-    timeout: 30000, // Timeout of 30 seconds
+  await page.waitForSelector('[data-testid="checkbox-component"]', {
+    timeout: 100000,
   });
 
-  await page.getByLabel("checkbox-component").first().click();
+  await page.getByTestId("checkbox-component").first().click();
+
   await page.getByTestId("icon-Trash2").click();
   await page
     .getByText("Are you sure you want to delete the selected component?")
diff --git a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
index 9e3fafa36..2f1fb5b34 100644
--- a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
@@ -19,10 +19,14 @@ test("dropDownComponent", async ({ page }) => {
     await page.waitForTimeout(5000);
     modalCount = await page.getByTestId("modal-title")?.count();
   }
-  await page.waitForTimeout(1000);
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
 
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
diff --git a/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts b/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts
index 1b6f5b6e7..afc9e0824 100644
--- a/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts
@@ -20,10 +20,13 @@ test("should be able to upload a file", async ({ page }) => {
     await page.waitForTimeout(5000);
     modalCount = await page.getByTestId("modal-title")?.count();
   }
-  await page.waitForTimeout(1000);
-
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
 
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
@@ -75,38 +78,70 @@ test("should be able to upload a file", async ({ page }) => {
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
 
+  let visibleElementHandle;
+
+  const elementsFile = await page
+    .getByTestId("handle-file-shownode-data-right")
+    .all();
+
+  for (const element of elementsFile) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
   // Click and hold on the first element
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[6]/button/div[1]',
-    )
-    .hover();
+  await visibleElementHandle.hover();
   await page.mouse.down();
 
   // Move to the second element
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]/div/div[2]/div[4]/div/button/div[1]',
-    )
-    .hover();
+
+  const parseDataElement = await page
+    .getByTestId("handle-parsedata-shownode-data-left")
+    .all();
+
+  for (const element of parseDataElement) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover();
 
   // Release the mouse
   await page.mouse.up();
 
   // Click and hold on the first element
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]/div/div[2]/div[7]/button/div[1]',
-    )
-    .hover();
+
+  const parseDataOutputElement = await page
+    .getByTestId("handle-parsedata-shownode-text-right")
+    .all();
+
+  for (const element of parseDataOutputElement) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover();
   await page.mouse.down();
 
   // Move to the second element
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div[1]',
-    )
-    .hover();
+  const textOutputElement = await page
+    .getByTestId("handle-textoutput-shownode-text-left")
+    .all();
+
+  for (const element of textOutputElement) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover();
 
   // Release the mouse
   await page.mouse.up();
diff --git a/src/frontend/tests/end-to-end/filterEdge-shard-0.spec.ts b/src/frontend/tests/end-to-end/filterEdge-shard-0.spec.ts
new file mode 100644
index 000000000..4be381f97
--- /dev/null
+++ b/src/frontend/tests/end-to-end/filterEdge-shard-0.spec.ts
@@ -0,0 +1,175 @@
+import { expect, test } from "@playwright/test";
+
+test("LLMChain - Tooltip", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("llmchain");
+
+  await page.waitForTimeout(1000);
+  await page
+    .getByTestId("chainsLLMChain")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  const llmChainOutputElements = await page
+    .getByTestId("handle-llmchain-shownode-text-right")
+    .all();
+  let visibleElementHandle;
+
+  for (const element of llmChainOutputElements) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover().then(async () => {
+    await expect(
+      page.getByTestId("available-output-chains").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-textsplitters").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-retrievers").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-prototypes").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-tools").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-memories").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-toolkits").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-chains").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-agents").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-helpers").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-langchain_utilities").first(),
+    ).toBeVisible();
+
+    await page.getByTestId("icon-X").click();
+    await page.waitForTimeout(500);
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  const llmChainInputElements1 = await page
+    .getByTestId("handle-llmchain-shownode-llm-left")
+    .all();
+
+  for (const element of llmChainInputElements1) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover().then(async () => {
+    await expect(
+      page.getByTestId("available-input-models").first(),
+    ).toBeVisible();
+    await page.waitForTimeout(2000);
+
+    await page.getByTestId("icon-Search").click();
+
+    await page.waitForTimeout(500);
+  });
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  const llmChainInputElements0 = await page
+    .getByTestId("handle-llmchain-shownode-template-left")
+    .all();
+
+  for (const element of llmChainInputElements0) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover().then(async () => {
+    await page.waitForTimeout(2000);
+
+    await expect(
+      page.getByTestId("available-input-chains").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-input-prototypes").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-input-agents").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-input-helpers").first(),
+    ).toBeVisible();
+
+    await page.waitForTimeout(500);
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  const llmChainInputElements2 = await page
+    .getByTestId("handle-llmchain-shownode-memory-left")
+    .all();
+
+  for (const element of llmChainInputElements2) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover().then(async () => {
+    await expect(
+      page.getByTestId("empty-tooltip-filter").first(),
+    ).toBeVisible();
+  });
+});
diff --git a/src/frontend/tests/end-to-end/filterEdge-shard-1.spec.ts b/src/frontend/tests/end-to-end/filterEdge-shard-1.spec.ts
new file mode 100644
index 000000000..2d5f906f9
--- /dev/null
+++ b/src/frontend/tests/end-to-end/filterEdge-shard-1.spec.ts
@@ -0,0 +1,148 @@
+import { expect, test } from "@playwright/test";
+
+test("LLMChain - Filter", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId(
+    "input-list-plus-btn-edit_metadata_indexing_include-2",
+  );
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("llmchain");
+
+  await page.waitForTimeout(1000);
+  await page
+    .getByTestId("chainsLLMChain")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.waitForTimeout(500);
+
+  let visibleElementHandle;
+
+  const llmChainOutputElements = await page
+    .getByTestId("handle-llmchain-shownode-text-right")
+    .all();
+
+  for (const element of llmChainOutputElements) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.click({
+    force: true,
+  });
+
+  await expect(page.getByTestId("disclosure-helpers")).toBeVisible();
+  await expect(page.getByTestId("disclosure-agents")).toBeVisible();
+  await expect(page.getByTestId("disclosure-chains")).toBeVisible();
+  await expect(page.getByTestId("disclosure-utilities")).toBeVisible();
+  await expect(page.getByTestId("disclosure-memories")).toBeVisible();
+  await expect(page.getByTestId("disclosure-prototypes")).toBeVisible();
+  await expect(page.getByTestId("disclosure-retrievers")).toBeVisible();
+  await expect(page.getByTestId("disclosure-text splitters")).toBeVisible();
+  await expect(page.getByTestId("disclosure-toolkits")).toBeVisible();
+  await expect(page.getByTestId("disclosure-tools")).toBeVisible();
+
+  await expect(page.getByTestId("chainsLLMChain").first()).toBeVisible();
+  await expect(
+    page.getByTestId("langchain_utilitiesSearchApi").first(),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("memoriesAstra DB Message Reader").first(),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("prototypesFlow as Tool").first(),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("retrieversAmazon Kendra Retriever").first(),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("textsplittersCharacterTextSplitter").first(),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("toolkitsVectorStoreInfo").first(),
+  ).toBeVisible();
+  await expect(page.getByTestId("toolsSearchApi").first()).toBeVisible();
+
+  await page.getByPlaceholder("Search").click();
+
+  await expect(page.getByTestId("model_specsVertexAI")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsCTransformers")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsAmazon Bedrock")).not.toBeVisible();
+  await expect(page.getByTestId("modelsAzure OpenAI")).not.toBeVisible();
+  await expect(
+    page.getByTestId("model_specsAzureChatOpenAI"),
+  ).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatAnthropic")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatLiteLLM")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatOllama")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatOpenAI")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatVertexAI")).not.toBeVisible();
+
+  const llmChainInputElements1 = await page
+    .getByTestId("handle-llmchain-shownode-llm-left")
+    .all();
+
+  for (const element of llmChainInputElements1) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.blur();
+
+  await visibleElementHandle.click({
+    force: true,
+  });
+
+  await expect(page.getByTestId("disclosure-models")).toBeVisible();
+
+  const llmChainInputElements0 = await page
+    .getByTestId("handle-llmchain-shownode-template-left")
+    .all();
+
+  for (const element of llmChainInputElements0) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.click();
+
+  await expect(page.getByTestId("disclosure-helpers")).toBeVisible();
+  await expect(page.getByTestId("disclosure-agents")).toBeVisible();
+  await expect(page.getByTestId("disclosure-chains")).toBeVisible();
+  await expect(page.getByTestId("disclosure-prototypes")).toBeVisible();
+});
diff --git a/src/frontend/tests/end-to-end/filterEdge.spec.ts b/src/frontend/tests/end-to-end/filterEdge.spec.ts
deleted file mode 100644
index 77bef251d..000000000
--- a/src/frontend/tests/end-to-end/filterEdge.spec.ts
+++ /dev/null
@@ -1,257 +0,0 @@
-import { expect, test } from "@playwright/test";
-
-test("LLMChain - Tooltip", async ({ page }) => {
-  await page.goto("/");
-  await page.waitForTimeout(1000);
-
-  let modalCount = 0;
-  try {
-    const modalTitleElement = await page?.getByTestId("modal-title");
-    if (modalTitleElement) {
-      modalCount = await modalTitleElement.count();
-    }
-  } catch (error) {
-    modalCount = 0;
-  }
-
-  while (modalCount === 0) {
-    await page.getByText("New Project", { exact: true }).click();
-    await page.waitForTimeout(5000);
-    modalCount = await page.getByTestId("modal-title")?.count();
-  }
-
-  await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
-
-  await page.getByTestId("extended-disclosure").click();
-  await page.getByPlaceholder("Search").click();
-  await page.getByPlaceholder("Search").fill("llmchain");
-
-  await page.waitForTimeout(1000);
-  await page
-    .getByTestId("chainsLLMChain")
-    .dragTo(page.locator('//*[@id="react-flow-id"]'));
-  await page.mouse.up();
-  await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div[1]',
-    )
-    .hover()
-    .then(async () => {
-      await expect(
-        page.getByTestId("available-output-chains").first(),
-      ).toBeVisible();
-      await expect(
-        page.getByTestId("available-output-textsplitters").first(),
-      ).toBeVisible();
-      await expect(
-        page.getByTestId("available-output-retrievers").first(),
-      ).toBeVisible();
-      await expect(
-        page.getByTestId("available-output-prototypes").first(),
-      ).toBeVisible();
-      await expect(
-        page.getByTestId("available-output-tools").first(),
-      ).toBeVisible();
-      await expect(
-        page.getByTestId("available-output-memories").first(),
-      ).toBeVisible();
-      await expect(
-        page.getByTestId("available-output-toolkits").first(),
-      ).toBeVisible();
-      await expect(
-        page.getByTestId("available-output-chains").first(),
-      ).toBeVisible();
-      await expect(
-        page.getByTestId("available-output-agents").first(),
-      ).toBeVisible();
-      await expect(
-        page.getByTestId("available-output-helpers").first(),
-      ).toBeVisible();
-      await expect(
-        page.getByTestId("available-output-langchain_utilities").first(),
-      ).toBeVisible();
-
-      await page.getByTestId("icon-X").click();
-      await page.waitForTimeout(500);
-    });
-
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[4]/div/button/div[1]',
-    )
-    .hover()
-    .then(async () => {
-      await expect(
-        page.getByTestId("available-input-models").first(),
-      ).toBeVisible();
-      await page.waitForTimeout(2000);
-
-      await page.getByTestId("icon-Search").click();
-
-      await page.waitForTimeout(500);
-    });
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div/div/div[2]/div[3]/div/button/div[1]',
-    )
-    .hover()
-    .then(async () => {
-      await page.waitForTimeout(2000);
-
-      await expect(
-        page.getByTestId("available-input-chains").first(),
-      ).toBeVisible();
-      await expect(
-        page.getByTestId("available-input-prototypes").first(),
-      ).toBeVisible();
-      await expect(
-        page.getByTestId("available-input-agents").first(),
-      ).toBeVisible();
-      await expect(
-        page.getByTestId("available-input-helpers").first(),
-      ).toBeVisible();
-
-      await page.waitForTimeout(500);
-    });
-
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[5]/div/button/div[1]',
-    )
-    .hover()
-    .then(async () => {
-      await expect(
-        page.getByTestId("empty-tooltip-filter").first(),
-      ).toBeVisible();
-    });
-});
-
-test("LLMChain - Filter", async ({ page }) => {
-  await page.goto("/");
-  await page.waitForTimeout(2000);
-
-  let modalCount = 0;
-  try {
-    const modalTitleElement = await page?.getByTestId("modal-title");
-    if (modalTitleElement) {
-      modalCount = await modalTitleElement.count();
-    }
-  } catch (error) {
-    modalCount = 0;
-  }
-
-  while (modalCount === 0) {
-    await page.getByText("New Project", { exact: true }).click();
-    await page.waitForTimeout(5000);
-    modalCount = await page.getByTestId("modal-title")?.count();
-  }
-  await page.waitForTimeout(1000);
-
-  await page.getByTestId(
-    "input-list-plus-btn-edit_metadata_indexing_include-2",
-  );
-
-  await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
-  await page.getByTestId("extended-disclosure").click();
-  await page.getByPlaceholder("Search").click();
-  await page.getByPlaceholder("Search").fill("llmchain");
-
-  await page.waitForTimeout(1000);
-  await page
-    .getByTestId("chainsLLMChain")
-    .dragTo(page.locator('//*[@id="react-flow-id"]'));
-  await page.mouse.up();
-  await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.waitForTimeout(500);
-
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div[1]',
-    )
-    .click();
-
-  await expect(page.getByTestId("disclosure-models")).toBeVisible();
-  await expect(
-    page.getByTestId("modelsGoogle Generative AI").first(),
-  ).toBeVisible();
-  await expect(page.getByTestId("chainsLLMChain").first()).toBeVisible();
-  await expect(
-    page.getByTestId("langchain_utilitiesSearchApi").first(),
-  ).toBeVisible();
-  await expect(
-    page.getByTestId("memoriesAstra DB Message Reader").first(),
-  ).toBeVisible();
-  await expect(
-    page.getByTestId("prototypesFlow as Tool").first(),
-  ).toBeVisible();
-  await expect(
-    page.getByTestId("retrieversAmazon Kendra Retriever").first(),
-  ).toBeVisible();
-  await expect(
-    page.getByTestId("textsplittersCharacterTextSplitter").first(),
-  ).toBeVisible();
-  await expect(
-    page.getByTestId("toolkitsVectorStoreInfo").first(),
-  ).toBeVisible();
-  await expect(page.getByTestId("toolsSearchApi").first()).toBeVisible();
-
-  await page.getByPlaceholder("Search").click();
-
-  await expect(page.getByTestId("model_specsVertexAI")).not.toBeVisible();
-  await expect(page.getByTestId("model_specsCTransformers")).not.toBeVisible();
-  await expect(page.getByTestId("model_specsAmazon Bedrock")).not.toBeVisible();
-  await expect(page.getByTestId("modelsAzure OpenAI")).not.toBeVisible();
-  await expect(
-    page.getByTestId("model_specsAzureChatOpenAI"),
-  ).not.toBeVisible();
-  await expect(page.getByTestId("model_specsChatAnthropic")).not.toBeVisible();
-  await expect(page.getByTestId("model_specsChatLiteLLM")).not.toBeVisible();
-  await expect(page.getByTestId("model_specsChatOllama")).not.toBeVisible();
-  await expect(page.getByTestId("model_specsChatOpenAI")).not.toBeVisible();
-  await expect(page.getByTestId("model_specsChatVertexAI")).not.toBeVisible();
-
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[4]/div/button/div[1]',
-    )
-    .click();
-
-  await expect(page.getByTestId("disclosure-models")).toBeVisible();
-
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[3]/div/button/div[1]',
-    )
-    .click();
-
-  await expect(page.getByTestId("disclosure-helpers")).toBeVisible();
-  await expect(page.getByTestId("disclosure-agents")).toBeVisible();
-  await expect(page.getByTestId("disclosure-chains")).toBeVisible();
-  await expect(page.getByTestId("disclosure-prototypes")).toBeVisible();
-});
diff --git a/src/frontend/tests/end-to-end/filterSidebar.spec.ts b/src/frontend/tests/end-to-end/filterSidebar.spec.ts
new file mode 100644
index 000000000..b8190db86
--- /dev/null
+++ b/src/frontend/tests/end-to-end/filterSidebar.spec.ts
@@ -0,0 +1,109 @@
+import { expect, test } from "@playwright/test";
+
+test("LLMChain - Filter", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(3000);
+
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("llmchain");
+
+  await page.waitForTimeout(1000);
+  await page
+    .getByTestId("chainsLLMChain")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.waitForTimeout(500);
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div[1]',
+    )
+    .click();
+
+  await expect(page.getByTestId("disclosure-agents")).toBeVisible();
+
+  await expect(page.getByTestId("chainsLLMChain").first()).toBeVisible();
+  await expect(
+    page.getByTestId("langchain_utilitiesSearchApi").first(),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("memoriesAstra DB Message Reader").first(),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("prototypesFlow as Tool").first(),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("retrieversAmazon Kendra Retriever").first(),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("textsplittersCharacterTextSplitter").first(),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("toolkitsVectorStoreInfo").first(),
+  ).toBeVisible();
+  await expect(page.getByTestId("toolsSearchApi").first()).toBeVisible();
+
+  await page.getByPlaceholder("Search").click();
+
+  await expect(page.getByTestId("model_specsVertexAI")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsCTransformers")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsAmazon Bedrock")).not.toBeVisible();
+  await expect(page.getByTestId("modelsAzure OpenAI")).not.toBeVisible();
+  await expect(
+    page.getByTestId("model_specsAzureChatOpenAI"),
+  ).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatAnthropic")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatLiteLLM")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatOllama")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatOpenAI")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatVertexAI")).not.toBeVisible();
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[4]/div/button/div[1]',
+    )
+    .click();
+
+  await expect(page.getByTestId("disclosure-models")).toBeVisible();
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[3]/div/button/div[1]',
+    )
+    .click();
+
+  await expect(page.getByTestId("disclosure-helpers")).toBeVisible();
+  await expect(page.getByTestId("disclosure-agents")).toBeVisible();
+  await expect(page.getByTestId("disclosure-chains")).toBeVisible();
+  await expect(page.getByTestId("disclosure-prototypes")).toBeVisible();
+});
diff --git a/src/frontend/tests/end-to-end/floatComponent.spec.ts b/src/frontend/tests/end-to-end/floatComponent.spec.ts
index 126863a6b..2dfd44951 100644
--- a/src/frontend/tests/end-to-end/floatComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/floatComponent.spec.ts
@@ -19,10 +19,13 @@ test("FloatComponent", async ({ page }) => {
     await page.waitForTimeout(5000);
     modalCount = await page.getByTestId("modal-title")?.count();
   }
-  await page.waitForTimeout(1000);
-
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("ollama");
diff --git a/src/frontend/tests/end-to-end/flowPage.spec.ts b/src/frontend/tests/end-to-end/flowPage.spec.ts
index 4cae45bf2..2470276ff 100644
--- a/src/frontend/tests/end-to-end/flowPage.spec.ts
+++ b/src/frontend/tests/end-to-end/flowPage.spec.ts
@@ -22,7 +22,9 @@ test.describe("Flow Page tests", () => {
     }
 
     await page.getByTestId("blank-flow").click();
-    await page.waitForTimeout(3000);
+    await page.waitForSelector('[data-testid="extended-disclosure"]', {
+      timeout: 30000,
+    });
     await page.getByTestId("extended-disclosure").click();
     await page.getByPlaceholder("Search").click();
     await page.getByPlaceholder("Search").fill("custom");
diff --git a/src/frontend/tests/end-to-end/flowSettings.spec.ts b/src/frontend/tests/end-to-end/flowSettings.spec.ts
index 25807ed88..062bb5bea 100644
--- a/src/frontend/tests/end-to-end/flowSettings.spec.ts
+++ b/src/frontend/tests/end-to-end/flowSettings.spec.ts
@@ -19,8 +19,9 @@ test("flowSettings", async ({ page }) => {
     await page.waitForTimeout(5000);
     modalCount = await page.getByTestId("modal-title")?.count();
   }
-  await page.waitForTimeout(1000);
-
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("blank-flow").click();
   await page.waitForTimeout(1000);
 
diff --git a/src/frontend/tests/end-to-end/folders.spec.ts b/src/frontend/tests/end-to-end/folders.spec.ts
index d049b39f9..64293728e 100644
--- a/src/frontend/tests/end-to-end/folders.spec.ts
+++ b/src/frontend/tests/end-to-end/folders.spec.ts
@@ -22,6 +22,10 @@ test("CRUD folders", async ({ page }) => {
   }
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
+  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
+    timeout: 100000,
+  });
+
   await page.getByTestId("icon-ChevronLeft").first().click();
 
   await page.getByText("My Collection").nth(2).isVisible();
@@ -35,9 +39,18 @@ test("CRUD folders", async ({ page }) => {
   await page.getByText("New Folder").last().isVisible();
   await page.waitForTimeout(1000);
   await page.getByText("New Folder").last().dblclick();
-  await page.getByTestId("input-folder").fill("new folder test name");
-  await page.keyboard.press("Enter");
-  await page.getByText("new folder test name").last().isVisible();
+
+  const element = await page.getByTestId("input-folder");
+  await element.fill("new folder test name");
+
+  await page.getByText("My Projects").last().click({
+    force: true,
+  });
+
+  await page.getByText("new folder test name").last().waitFor({
+    state: "visible",
+    timeout: 30000,
+  });
 
   await page
     .getByText("new folder test name")
diff --git a/src/frontend/tests/end-to-end/generalBugs.spec.ts b/src/frontend/tests/end-to-end/generalBugs-shard-0.spec.ts
similarity index 86%
rename from src/frontend/tests/end-to-end/generalBugs.spec.ts
rename to src/frontend/tests/end-to-end/generalBugs-shard-0.spec.ts
index a0e435fd5..77d90bd3e 100644
--- a/src/frontend/tests/end-to-end/generalBugs.spec.ts
+++ b/src/frontend/tests/end-to-end/generalBugs-shard-0.spec.ts
@@ -22,7 +22,9 @@ test("should interact with api request", async ({ page }) => {
     modalCount = await page.getByTestId("modal-title")?.count();
   }
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("api request");
@@ -81,8 +83,23 @@ test("erase button should clear the chat messages", async ({ page }) => {
   await page
     .getByTestId("popover-anchor-input-openai_api_key")
     .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown-model_name").click();
+  await page.getByTestId("gpt-4o-0-option").click();
+
+  await page.waitForTimeout(2000);
   await page.getByText("Playground", { exact: true }).click();
-  await page.getByPlaceholder("Send a message...").fill("Hello, how are you?");
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("input-chat-playground").fill("Hello, how are you?");
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
   await page.getByTestId("icon-LucideSend").click();
   let valueUser = await page.getByTestId("sender_name_user").textContent();
 
diff --git a/src/frontend/tests/end-to-end/generalBugs-shard-1.spec.ts b/src/frontend/tests/end-to-end/generalBugs-shard-1.spec.ts
new file mode 100644
index 000000000..bd4c72e28
--- /dev/null
+++ b/src/frontend/tests/end-to-end/generalBugs-shard-1.spec.ts
@@ -0,0 +1,89 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("should delete rows from table message", async ({ page }) => {
+  if (!process?.env?.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown-model_name").click();
+  await page.getByTestId("gpt-4o-0-option").click();
+
+  await page.waitForTimeout(2000);
+
+  await page.getByTestId("button_run_chat output").click();
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page.getByText("Playground", { exact: true }).click();
+  await page
+    .getByText("No input message provided.", { exact: true })
+    .last()
+    .isVisible();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page
+    .getByTestId("input-chat-playground")
+    .last()
+    .fill("Say hello as a pirate");
+  await page.getByTestId("icon-LucideSend").last().click();
+
+  await page.waitForSelector("text=matey", {
+    timeout: 100000,
+  });
+
+  await page.getByText("Close").last().click();
+  await page.getByTestId("user-profile-settings").last().click();
+  await page.getByText("Settings").last().click();
+  await page.getByText("Messages").last().click();
+
+  const label = "Press Space to toggle all rows selection (unchecked)";
+  await page.getByLabel(label).first().click();
+
+  await page.getByTestId("icon-Trash2").first().click();
+
+  await page.waitForSelector("text=No Data Available", { timeout: 30000 });
+  await page.getByText("No Data Available").isVisible();
+});
diff --git a/src/frontend/tests/end-to-end/generalBugs-shard-2.spec.ts b/src/frontend/tests/end-to-end/generalBugs-shard-2.spec.ts
new file mode 100644
index 000000000..fb5f5129b
--- /dev/null
+++ b/src/frontend/tests/end-to-end/generalBugs-shard-2.spec.ts
@@ -0,0 +1,72 @@
+import { expect, test } from "@playwright/test";
+
+test("should use webhook component on API", async ({ page }) => {
+  if (!process?.env?.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("webhook");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("dataWebhook Input")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("API", { exact: true }).click();
+
+  await page.getByText("Webhook cURL", { exact: true }).click();
+  await page.getByRole("tab", { name: "Webhook cURL" }).click();
+
+  await page.getByTestId("icon-Copy").last().click();
+
+  const handle = await page.evaluateHandle(() =>
+    navigator.clipboard.readText(),
+  );
+  const clipboardContent = await handle.jsonValue();
+  expect(clipboardContent.length).toBeGreaterThan(0);
+  expect(clipboardContent).toContain("curl -X POST");
+  expect(clipboardContent).toContain("webhook");
+  await page.getByRole("tab", { name: "Tweaks" }).click();
+  // await page.getByText("Webhook Input").isVisible();
+  // await page.getByText("Webhook Input").click();
+});
diff --git a/src/frontend/tests/end-to-end/generalBugs-shard-3.spec.ts b/src/frontend/tests/end-to-end/generalBugs-shard-3.spec.ts
new file mode 100644
index 000000000..445c870d3
--- /dev/null
+++ b/src/frontend/tests/end-to-end/generalBugs-shard-3.spec.ts
@@ -0,0 +1,181 @@
+import { expect, test } from "@playwright/test";
+
+test("should copy code from playground modal", async ({ page }) => {
+  await page.goto("/");
+  await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("chat output");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("outputsChat Output")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("chat input");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("inputsChat Input")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("openai");
+  await page.waitForTimeout(1000);
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page
+    .getByTestId("modelsOpenAI")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  if (!process?.env?.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  const elementsChatInput = await page
+    .locator('[data-testid="handle-chatinput-shownode-message-right"]')
+    .all();
+
+  let visibleElementHandle;
+
+  for (const element of elementsChatInput) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  // Click and hold on the first element
+  await visibleElementHandle.hover();
+  await page.mouse.down();
+
+  const elementsOpenAiInput = await page
+    .locator('[data-testid="handle-openaimodel-shownode-input-left"]')
+    .all();
+
+  for (const element of elementsOpenAiInput) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover();
+  await page.mouse.up();
+
+  const elementsOpenAiOutput = await page
+    .locator('[data-testid="handle-openaimodel-shownode-text-right"]')
+    .all();
+
+  for (const element of elementsOpenAiOutput) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  // Click and hold on the first element
+  await visibleElementHandle.hover();
+  await page.mouse.down();
+
+  // Move to the second element
+  const elementsChatOutput = await page
+    .getByTestId("handle-chatoutput-shownode-text-left")
+    .all();
+
+  for (const element of elementsChatOutput) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover();
+  await page.mouse.up();
+
+  await page.getByLabel("fit view").click();
+  await page.getByText("Playground", { exact: true }).click();
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+  await page.getByTestId("input-chat-playground").click();
+  await page
+    .getByTestId("input-chat-playground")
+    .fill("Could you provide a Python example for a 'Hello, World!' program?");
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-LucideSend").click();
+
+  await page.getByRole("tab", { name: "python" }).isVisible({
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-Copy").first().click();
+
+  const handle = await page.evaluateHandle(() =>
+    navigator.clipboard.readText(),
+  );
+  const clipboardContent = await handle.jsonValue();
+  expect(clipboardContent.length).toBeGreaterThan(0);
+  expect(clipboardContent).toContain("Hello");
+});
diff --git a/src/frontend/tests/end-to-end/globalVariables.spec.ts b/src/frontend/tests/end-to-end/globalVariables.spec.ts
index 64af7fe28..74b0acc4d 100644
--- a/src/frontend/tests/end-to-end/globalVariables.spec.ts
+++ b/src/frontend/tests/end-to-end/globalVariables.spec.ts
@@ -19,10 +19,13 @@ test("GlobalVariables", async ({ page }) => {
     await page.waitForTimeout(5000);
     modalCount = await page.getByTestId("modal-title")?.count();
   }
-  await page.waitForTimeout(1000);
-
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("openai");
@@ -35,6 +38,10 @@ test("GlobalVariables", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
diff --git a/src/frontend/tests/end-to-end/inputComponent.spec.ts b/src/frontend/tests/end-to-end/inputComponent.spec.ts
index 99bf207cf..c9e9a8f11 100644
--- a/src/frontend/tests/end-to-end/inputComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/inputComponent.spec.ts
@@ -19,10 +19,13 @@ test("InputComponent", async ({ page }) => {
     await page.waitForTimeout(5000);
     modalCount = await page.getByTestId("modal-title")?.count();
   }
-  await page.waitForTimeout(1000);
-
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("Chroma");
@@ -34,6 +37,10 @@ test("InputComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
diff --git a/src/frontend/tests/end-to-end/inputListComponent.spec.ts b/src/frontend/tests/end-to-end/inputListComponent.spec.ts
index fa91b685f..5450e6b71 100644
--- a/src/frontend/tests/end-to-end/inputListComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/inputListComponent.spec.ts
@@ -21,7 +21,9 @@ test("InputListComponent", async ({ page }) => {
   }
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("url");
diff --git a/src/frontend/tests/end-to-end/intComponent.spec.ts b/src/frontend/tests/end-to-end/intComponent.spec.ts
index 30522d397..a7acf3659 100644
--- a/src/frontend/tests/end-to-end/intComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/intComponent.spec.ts
@@ -19,10 +19,13 @@ test("IntComponent", async ({ page }) => {
     await page.waitForTimeout(5000);
     modalCount = await page.getByTestId("modal-title")?.count();
   }
-  await page.waitForTimeout(1000);
-
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("openai");
@@ -35,6 +38,10 @@ test("IntComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
@@ -66,6 +73,11 @@ test("IntComponent", async ({ page }) => {
   }
 
   await page.getByTestId("title-OpenAI").click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
diff --git a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
index 685f5b4fd..b5d532d78 100644
--- a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
@@ -19,10 +19,13 @@ test("KeypairListComponent", async ({ page }) => {
     await page.waitForTimeout(5000);
     modalCount = await page.getByTestId("modal-title")?.count();
   }
-  await page.waitForTimeout(1000);
-
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("amazon bedrock");
diff --git a/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts b/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
index 42b8744d1..4275223e3 100644
--- a/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
+++ b/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
@@ -2,15 +2,6 @@ import { expect, test } from "@playwright/test";
 import uaParser from "ua-parser-js";
 test("LangflowShortcuts", async ({ page }) => {
   await page.goto("/");
-  const getUA = await page.evaluate(() => navigator.userAgent);
-  const userAgentInfo = uaParser(getUA);
-  let control = "Control";
-
-  if (userAgentInfo.os.name.includes("Mac")) {
-    control = "Meta";
-  }
-
-  await page.waitForTimeout(1000);
 
   let modalCount = 0;
   try {
@@ -28,8 +19,23 @@ test("LangflowShortcuts", async ({ page }) => {
     modalCount = await page.getByTestId("modal-title")?.count();
   }
 
+  const getUA = await page.evaluate(() => navigator.userAgent);
+  const userAgentInfo = uaParser(getUA);
+  let control = "Control";
+
+  if (userAgentInfo.os.name.includes("Mac")) {
+    control = "Meta";
+  }
+
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
+
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("ollama");
@@ -43,6 +49,11 @@ test("LangflowShortcuts", async ({ page }) => {
   await page.mouse.down();
 
   await page.locator('//*[@id="react-flow-id"]/div/div[2]/button[3]').click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
@@ -59,11 +70,9 @@ test("LangflowShortcuts", async ({ page }) => {
     expect(false).toBeTruthy();
   }
 
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div[2]/div/div[1]/div/div[1]/div/div/div[1]',
-    )
-    .click();
+  const ollamaTitleElement = await page.getByTestId("title-Ollama").last();
+
+  await ollamaTitleElement.click();
   await page.keyboard.press("Backspace");
 
   numberOfNodes = await page.getByTestId("title-Ollama")?.count();
@@ -82,11 +91,7 @@ test("LangflowShortcuts", async ({ page }) => {
     expect(false).toBeTruthy();
   }
 
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div[2]/div/div[1]/div/div[1]/div/div/div[1]',
-    )
-    .click();
+  await ollamaTitleElement.click();
   await page.keyboard.press("Backspace");
 
   await page.getByTestId("title-Ollama").click();
diff --git a/src/frontend/tests/end-to-end/nestedComponent.spec.ts b/src/frontend/tests/end-to-end/nestedComponent.spec.ts
index a00e2f9b3..bd419f4dd 100644
--- a/src/frontend/tests/end-to-end/nestedComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/nestedComponent.spec.ts
@@ -19,9 +19,13 @@ test("NestedComponent", async ({ page }) => {
     await page.waitForTimeout(5000);
     modalCount = await page.getByTestId("modal-title")?.count();
   }
-
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("pinecone");
diff --git a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
index 74bc44480..94ef0dc78 100644
--- a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
@@ -19,9 +19,13 @@ test("PromptTemplateComponent", async ({ page }) => {
     await page.waitForTimeout(5000);
     modalCount = await page.getByTestId("modal-title")?.count();
   }
-
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("prompt");
diff --git a/src/frontend/tests/end-to-end/python_api_generation.spec.ts b/src/frontend/tests/end-to-end/pythonApiGeneration.spec.ts
similarity index 100%
rename from src/frontend/tests/end-to-end/python_api_generation.spec.ts
rename to src/frontend/tests/end-to-end/pythonApiGeneration.spec.ts
diff --git a/src/frontend/tests/end-to-end/saveComponents.spec.ts b/src/frontend/tests/end-to-end/saveComponents.spec.ts
index 17be7622b..6066f3880 100644
--- a/src/frontend/tests/end-to-end/saveComponents.spec.ts
+++ b/src/frontend/tests/end-to-end/saveComponents.spec.ts
@@ -20,7 +20,9 @@ test.describe("save component tests", () => {
       await page.waitForTimeout(5000);
       modalCount = await page.getByTestId("modal-title")?.count();
     }
-    await page.waitForTimeout(1000);
+    await page.waitForSelector('[data-testid="blank-flow"]', {
+      timeout: 30000,
+    });
     await page.getByTestId("blank-flow").click();
     await page.waitForTimeout(1000);
 
@@ -93,8 +95,9 @@ test.describe("save component tests", () => {
     if (replaceButton) {
       await page.getByTestId("replace-button").click();
     }
-    await page.waitForTimeout(3000);
-
+    await page.waitForSelector('[data-testid="extended-disclosure"]', {
+      timeout: 30000,
+    });
     await page.getByTestId("extended-disclosure").click();
     await page.getByPlaceholder("Search").click();
     await page.getByPlaceholder("Search").fill("group");
diff --git a/src/frontend/tests/end-to-end/store-shard-0.spec.ts b/src/frontend/tests/end-to-end/store-shard-0.spec.ts
new file mode 100644
index 000000000..134859ac3
--- /dev/null
+++ b/src/frontend/tests/end-to-end/store-shard-0.spec.ts
@@ -0,0 +1,19 @@
+import { test } from "@playwright/test";
+
+test("should exists Store", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").isVisible();
+  await page.getByTestId("button-store").isEnabled();
+});
+
+test("should not have an API key", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(2000);
+
+  await page.getByText("API Key Error").isVisible();
+});
diff --git a/src/frontend/tests/end-to-end/store-shard-1.spec.ts b/src/frontend/tests/end-to-end/store-shard-1.spec.ts
new file mode 100644
index 000000000..9cced0923
--- /dev/null
+++ b/src/frontend/tests/end-to-end/store-shard-1.spec.ts
@@ -0,0 +1,119 @@
+import { expect, test } from "@playwright/test";
+
+test("should add API-KEY", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("api-key-button-store").click();
+  await page
+    .getByPlaceholder("Insert your API Key")
+    .fill("testtesttesttesttesttest");
+
+  await page.getByTestId("api-key-save-button-store").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("Success! Your API Key has been saved.").isVisible();
+
+  await page
+    .getByPlaceholder("Insert your API Key")
+    .fill(process.env.STORE_API_KEY ?? "");
+  await page.getByTestId("api-key-save-button-store").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("Success! Your API Key has been saved.").isVisible();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("API Key Error").isHidden();
+});
+
+test("should like and add components and flows", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("api-key-button-store").click();
+
+  await page
+    .getByPlaceholder("Insert your API Key")
+    .fill(process.env.STORE_API_KEY ?? "");
+  await page.getByTestId("api-key-save-button-store").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("Success! Your API Key has been saved.").isVisible();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("API Key Error").isHidden();
+
+  await page.waitForTimeout(2000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(5000);
+
+  const likedValue = await page
+    .getByTestId("likes-Website Content QA")
+    .innerText();
+
+  await page.getByTestId("like-Website Content QA").click();
+
+  await page.waitForTimeout(5000);
+  const likedValueAfter = await page
+    .getByTestId("likes-Website Content QA")
+    .innerText();
+
+  if (Number(likedValue) === Number(likedValueAfter)) {
+    expect(false).toBe(true);
+  }
+
+  const downloadValue = await page
+    .getByTestId("downloads-Website Content QA")
+    .innerText();
+
+  await page.getByTestId("install-Website Content QA").click();
+  await page.waitForTimeout(2000);
+  await page.getByText("Flow Installed Successfully").isVisible();
+  await page.waitForTimeout(5000);
+
+  const downloadValueAfter = await page
+    .getByTestId("downloads-Website Content QA")
+    .innerText();
+
+  if (Number(downloadValue) === Number(downloadValueAfter)) {
+    expect(false).toBe(true);
+  }
+
+  await page.getByTestId("install-Basic RAG").click();
+  await page.waitForTimeout(2000);
+  await page.getByText("Component Installed Successfully").isVisible();
+  await page.waitForTimeout(5000);
+
+  await page.getByText("My Collection").click();
+  await page.getByText("Website Content QA").first().isVisible();
+
+  await page.getByText("Components").first().click();
+  await page.getByText("Basic RAG").first().isVisible();
+});
+
+test("should find a searched Component on Store", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("search-store-input").fill("File Loader");
+  await page.getByTestId("search-store-button").click();
+  await page.getByText("File Loader").isVisible();
+
+  await page.getByTestId("search-store-input").fill("Basic RAG");
+  await page.getByTestId("search-store-button").click();
+  await page.getByText("Basic RAG").isVisible();
+
+  await page.getByTestId("search-store-input").fill("YouTube QA");
+  await page.getByTestId("search-store-button").click();
+  await page.getByText("YouTube QA").isVisible();
+});
diff --git a/src/frontend/tests/end-to-end/store-shard-2.spec.ts b/src/frontend/tests/end-to-end/store-shard-2.spec.ts
new file mode 100644
index 000000000..a39ca5a02
--- /dev/null
+++ b/src/frontend/tests/end-to-end/store-shard-2.spec.ts
@@ -0,0 +1,122 @@
+import { expect, test } from "@playwright/test";
+
+test("should add API-KEY", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("api-key-button-store").click();
+  await page
+    .getByPlaceholder("Insert your API Key")
+    .fill("testtesttesttesttesttest");
+
+  await page.getByTestId("api-key-save-button-store").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("Success! Your API Key has been saved.").isVisible();
+
+  await page
+    .getByPlaceholder("Insert your API Key")
+    .fill(process.env.STORE_API_KEY ?? "");
+  await page.getByTestId("api-key-save-button-store").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("Success! Your API Key has been saved.").isVisible();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("API Key Error").isHidden();
+});
+
+test("should filter by tag", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("tag-selector-Agent").click();
+  await page.getByText("File Loader").isVisible();
+  await page.getByTestId("tag-selector-Agent").click();
+  await page.getByText("Album Cover Builder").isVisible();
+
+  await page.getByTestId("tag-selector-Memory").click();
+  await page.getByText("MP3 QA12").isVisible();
+
+  await page.getByTestId("tag-selector-Chain").click();
+  await page.getByText("There are no").isVisible();
+  await page.getByTestId("tag-selector-Chain").click();
+
+  await page.getByTestId("tag-selector-Vector Store").click();
+  await page.getByText("MP3 QA12").isVisible();
+  await page.getByTestId("tag-selector-Vector Store").click();
+  await page.getByTestId("tag-selector-Memory").click();
+
+  await page.getByText("Basic RAG").isVisible();
+});
+
+test("should share component with share button", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForTimeout(1000);
+
+  const randomName = Math.random().toString(36).substring(2);
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForTimeout(1000);
+  const flowName = await page.getByTestId("flow_name").innerText();
+  await page.getByTestId("flow_name").click();
+  await page.getByText("Settings").click();
+  const flowDescription = await page
+    .getByPlaceholder("Flow description")
+    .inputValue();
+  await page.getByPlaceholder("Flow name").fill(randomName);
+  await page.getByText("Save").last().click();
+  await page.getByText("Close").last().click();
+
+  await page.waitForSelector('[data-testid="shared-button-flow"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("shared-button-flow").first().click();
+  await page.getByText("Name:").isVisible();
+  await page.getByText("Description:").isVisible();
+  await page.getByText("Set workflow status to public").isVisible();
+  await page
+    .getByText(
+      "Attention: API keys in specified fields are automatically removed upon sharing.",
+    )
+    .isVisible();
+  await page.getByText("Export").first().isVisible();
+  await page.getByText("Share Flow").first().isVisible();
+
+  await page.waitForTimeout(5000);
+
+  await page.getByText("Agent").first().isVisible();
+  await page.getByText("Memory").first().isVisible();
+  await page.getByText("Chain").first().isVisible();
+  await page.getByText("Vector Store").first().isVisible();
+  await page.getByText("Prompt").last().isVisible();
+  await page.getByTestId("public-checkbox").isChecked();
+  await page.getByText(flowName).last().isVisible();
+  await page.getByText(flowDescription).last().isVisible();
+  await page.waitForTimeout(1000);
+  await page.getByText("Flow shared successfully").last().isVisible();
+});
diff --git a/src/frontend/tests/end-to-end/store-shard-3.spec.ts b/src/frontend/tests/end-to-end/store-shard-3.spec.ts
new file mode 100644
index 000000000..c19379421
--- /dev/null
+++ b/src/frontend/tests/end-to-end/store-shard-3.spec.ts
@@ -0,0 +1,88 @@
+import { expect, test } from "@playwright/test";
+
+test("should add API-KEY", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("api-key-button-store").click();
+  await page
+    .getByPlaceholder("Insert your API Key")
+    .fill("testtesttesttesttesttest");
+
+  await page.getByTestId("api-key-save-button-store").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("Success! Your API Key has been saved.").isVisible();
+
+  await page
+    .getByPlaceholder("Insert your API Key")
+    .fill(process.env.STORE_API_KEY ?? "");
+  await page.getByTestId("api-key-save-button-store").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("Success! Your API Key has been saved.").isVisible();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("API Key Error").isHidden();
+});
+
+test("should order the visualization", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByText("Basic RAG").isVisible();
+
+  await page.getByTestId("select-order-store").click();
+  await page.waitForTimeout(2000);
+  await page.getByText("Alphabetical").click();
+
+  await page.getByText("Album Cover Builder").isVisible();
+
+  await page.getByTestId("select-order-store").click();
+  await page.getByText("Popular").click();
+
+  await page.getByText("Basic RAG").isVisible();
+});
+
+test("should filter by type", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByText("Website Content QA").isVisible();
+
+  await page.getByTestId("flows-button-store").click();
+  await page.waitForTimeout(8000);
+
+  let iconGroup = await page.getByTestId("icon-Group")?.count();
+  expect(iconGroup).not.toBe(0);
+
+  await page.getByText("icon-ToyBrick").last().isHidden();
+
+  await page.getByTestId("components-button-store").click();
+  await page.waitForTimeout(8000);
+
+  await page.getByTestId("icon-Group").last().isHidden();
+  let toyBrick = await page.getByTestId("icon-ToyBrick")?.count();
+  expect(toyBrick).not.toBe(0);
+
+  await page.getByTestId("all-button-store").click();
+  await page.waitForTimeout(8000);
+
+  let iconGroupAllCount = await page.getByTestId("icon-Group")?.count();
+  await page.waitForTimeout(2000);
+  let toyBrickAllCount = await page.getByTestId("icon-ToyBrick")?.count();
+  await page.waitForTimeout(2000);
+
+  if (iconGroupAllCount === 0 || toyBrickAllCount === 0) {
+    expect(false).toBe(true);
+  }
+});
diff --git a/src/frontend/tests/end-to-end/store.spec.ts b/src/frontend/tests/end-to-end/store.spec.ts
deleted file mode 100644
index 9ca0b040d..000000000
--- a/src/frontend/tests/end-to-end/store.spec.ts
+++ /dev/null
@@ -1,290 +0,0 @@
-import { expect, test } from "@playwright/test";
-
-test("should exists Store", async ({ page }) => {
-  await page.goto("/");
-  await page.waitForTimeout(1000);
-
-  await page.getByTestId("button-store").isVisible();
-  await page.getByTestId("button-store").isEnabled();
-});
-
-test("should not have an API key", async ({ page }) => {
-  await page.goto("/");
-  await page.waitForTimeout(1000);
-
-  await page.getByTestId("button-store").click();
-  await page.waitForTimeout(2000);
-
-  await page.getByText("API Key Error").isVisible();
-});
-
-test("should find a searched Component on Store", async ({ page }) => {
-  await page.goto("/");
-  await page.waitForTimeout(1000);
-
-  await page.getByTestId("button-store").click();
-  await page.waitForTimeout(1000);
-
-  await page.getByTestId("search-store-input").fill("File Loader");
-  await page.getByTestId("search-store-button").click();
-  await page.getByText("File Loader").isVisible();
-
-  await page.getByTestId("search-store-input").fill("Basic RAG");
-  await page.getByTestId("search-store-button").click();
-  await page.getByText("Basic RAG").isVisible();
-
-  await page.getByTestId("search-store-input").fill("YouTube QA");
-  await page.getByTestId("search-store-button").click();
-  await page.getByText("YouTube QA").isVisible();
-});
-
-test("should filter by tag", async ({ page }) => {
-  await page.goto("/");
-  await page.waitForTimeout(1000);
-
-  await page.getByTestId("button-store").click();
-  await page.waitForTimeout(1000);
-
-  await page.getByTestId("tag-selector-Agent").click();
-  await page.getByText("File Loader").isVisible();
-  await page.getByTestId("tag-selector-Agent").click();
-  await page.getByText("Album Cover Builder").isVisible();
-
-  await page.getByTestId("tag-selector-Memory").click();
-  await page.getByText("MP3 QA12").isVisible();
-
-  await page.getByTestId("tag-selector-Chain").click();
-  await page.getByText("There are no").isVisible();
-  await page.getByTestId("tag-selector-Chain").click();
-
-  await page.getByTestId("tag-selector-Vector Store").click();
-  await page.getByText("MP3 QA12").isVisible();
-  await page.getByTestId("tag-selector-Vector Store").click();
-  await page.getByTestId("tag-selector-Memory").click();
-
-  await page.getByText("Basic RAG").isVisible();
-});
-
-test("should order the visualization", async ({ page }) => {
-  await page.goto("/");
-  await page.waitForTimeout(1000);
-
-  await page.getByTestId("button-store").click();
-  await page.waitForTimeout(1000);
-
-  await page.getByText("Basic RAG").isVisible();
-
-  await page.getByTestId("select-order-store").click();
-  await page.waitForTimeout(2000);
-  await page.getByText("Alphabetical").click();
-
-  await page.getByText("Album Cover Builder").isVisible();
-
-  await page.getByTestId("select-order-store").click();
-  await page.getByText("Popular").click();
-
-  await page.getByText("Basic RAG").isVisible();
-});
-
-test("should filter by type", async ({ page }) => {
-  await page.goto("/");
-  await page.waitForTimeout(1000);
-
-  await page.getByTestId("button-store").click();
-  await page.waitForTimeout(1000);
-
-  await page.getByText("Website Content QA").isVisible();
-
-  await page.getByTestId("flows-button-store").click();
-  await page.waitForTimeout(8000);
-
-  let iconGroup = await page.getByTestId("icon-Group")?.count();
-  expect(iconGroup).not.toBe(0);
-
-  await page.getByText("icon-ToyBrick").last().isHidden();
-
-  await page.getByTestId("components-button-store").click();
-  await page.waitForTimeout(8000);
-
-  await page.getByTestId("icon-Group").last().isHidden();
-  let toyBrick = await page.getByTestId("icon-ToyBrick")?.count();
-  expect(toyBrick).not.toBe(0);
-
-  await page.getByTestId("all-button-store").click();
-  await page.waitForTimeout(8000);
-
-  let iconGroupAllCount = await page.getByTestId("icon-Group")?.count();
-  await page.waitForTimeout(2000);
-  let toyBrickAllCount = await page.getByTestId("icon-ToyBrick")?.count();
-  await page.waitForTimeout(2000);
-
-  if (iconGroupAllCount === 0 || toyBrickAllCount === 0) {
-    expect(false).toBe(true);
-  }
-});
-
-test("should add API-KEY", async ({ page }) => {
-  await page.goto("/");
-  await page.waitForTimeout(1000);
-
-  await page.getByTestId("button-store").click();
-  await page.waitForTimeout(1000);
-
-  await page.getByTestId("api-key-button-store").click();
-  await page
-    .getByPlaceholder("Insert your API Key")
-    .fill("testtesttesttesttesttest");
-
-  await page.getByTestId("api-key-save-button-store").click();
-
-  await page.waitForTimeout(2000);
-  await page.getByText("Success! Your API Key has been saved.").isVisible();
-
-  await page.waitForTimeout(2000);
-  await page.getByText("API Key Error").isVisible();
-
-  await page
-    .getByPlaceholder("Insert your API Key")
-    .fill(process.env.STORE_API_KEY ?? "");
-  await page.getByTestId("api-key-save-button-store").click();
-
-  await page.waitForTimeout(2000);
-  await page.getByText("Success! Your API Key has been saved.").isVisible();
-
-  await page.waitForTimeout(2000);
-  await page.getByText("API Key Error").isHidden();
-});
-
-test("should like and add components and flows", async ({ page }) => {
-  await page.goto("/");
-  await page.waitForTimeout(1000);
-
-  await page.getByTestId("button-store").click();
-  await page.waitForTimeout(1000);
-
-  await page.getByTestId("api-key-button-store").click();
-
-  await page
-    .getByPlaceholder("Insert your API Key")
-    .fill(process.env.STORE_API_KEY ?? "");
-  await page.getByTestId("api-key-save-button-store").click();
-
-  await page.waitForTimeout(2000);
-  await page.getByText("Success! Your API Key has been saved.").isVisible();
-
-  await page.waitForTimeout(2000);
-  await page.getByText("API Key Error").isHidden();
-
-  await page.waitForTimeout(2000);
-
-  await page.getByTestId("button-store").click();
-  await page.waitForTimeout(5000);
-
-  const likedValue = await page
-    .getByTestId("likes-Website Content QA")
-    .innerText();
-
-  await page.getByTestId("like-Website Content QA").click();
-
-  await page.waitForTimeout(5000);
-  const likedValueAfter = await page
-    .getByTestId("likes-Website Content QA")
-    .innerText();
-
-  if (Number(likedValue) === Number(likedValueAfter)) {
-    expect(false).toBe(true);
-  }
-
-  const downloadValue = await page
-    .getByTestId("downloads-Website Content QA")
-    .innerText();
-
-  await page.getByTestId("install-Website Content QA").click();
-  await page.waitForTimeout(2000);
-  await page.getByText("Flow Installed Successfully").isVisible();
-  await page.waitForTimeout(5000);
-
-  const downloadValueAfter = await page
-    .getByTestId("downloads-Website Content QA")
-    .innerText();
-
-  if (Number(downloadValue) === Number(downloadValueAfter)) {
-    expect(false).toBe(true);
-  }
-
-  await page.getByTestId("install-Basic RAG").click();
-  await page.waitForTimeout(2000);
-  await page.getByText("Component Installed Successfully").isVisible();
-  await page.waitForTimeout(5000);
-
-  await page.getByText("My Collection").click();
-  await page.getByText("Website Content QA").first().isVisible();
-
-  await page.getByText("Components").first().click();
-  await page.getByText("Basic RAG").first().isVisible();
-});
-
-test("should share component with share button", async ({ page }) => {
-  await page.goto("/");
-  await page.waitForTimeout(2000);
-
-  let modalCount = 0;
-  try {
-    const modalTitleElement = await page?.getByTestId("modal-title");
-    if (modalTitleElement) {
-      modalCount = await modalTitleElement.count();
-    }
-  } catch (error) {
-    modalCount = 0;
-  }
-
-  while (modalCount === 0) {
-    await page.getByText("New Project", { exact: true }).click();
-    await page.waitForTimeout(5000);
-    modalCount = await page.getByTestId("modal-title")?.count();
-  }
-  await page.waitForTimeout(1000);
-
-  const randomName = Math.random().toString(36).substring(2);
-
-  await page.getByRole("heading", { name: "Basic Prompting" }).click();
-  await page.waitForTimeout(1000);
-  const flowName = await page.getByTestId("flow_name").innerText();
-  await page.getByTestId("flow_name").click();
-  await page.getByText("Settings").click();
-  const flowDescription = await page
-    .getByPlaceholder("Flow description")
-    .inputValue();
-  await page.getByPlaceholder("Flow name").fill(randomName);
-  await page.getByText("Save").last().click();
-  await page.getByText("Close").last().click();
-
-  await page.waitForSelector('[data-testid="icon-Share3"]', {
-    timeout: 100000,
-  });
-
-  await page.getByTestId("icon-Share3").first().click();
-  await page.getByText("Name:").isVisible();
-  await page.getByText("Description:").isVisible();
-  await page.getByText("Set workflow status to public").isVisible();
-  await page
-    .getByText(
-      "Attention: API keys in specified fields are automatically removed upon sharing.",
-    )
-    .isVisible();
-  await page.getByText("Export").first().isVisible();
-  await page.getByText("Share Flow").first().isVisible();
-
-  await page.waitForTimeout(5000);
-
-  await page.getByText("Agent").first().isVisible();
-  await page.getByText("Memory").first().isVisible();
-  await page.getByText("Chain").first().isVisible();
-  await page.getByText("Vector Store").first().isVisible();
-  await page.getByText("Prompt").last().isVisible();
-  await page.getByTestId("public-checkbox").isChecked();
-  await page.getByText(flowName).last().isVisible();
-  await page.getByText(flowDescription).last().isVisible();
-  await page.waitForTimeout(1000);
-  await page.getByText("Flow shared successfully").last().isVisible();
-});
diff --git a/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts b/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
index 54cb1f1ad..bedb4eb9f 100644
--- a/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
@@ -19,7 +19,9 @@ test("TextAreaModalComponent", async ({ page }) => {
     await page.waitForTimeout(5000);
     modalCount = await page.getByTestId("modal-title")?.count();
   }
-
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("blank-flow").click();
 
   await page.waitForSelector('[data-testid="extended-disclosure"]', {
@@ -42,6 +44,10 @@ test("TextAreaModalComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
diff --git a/src/frontend/tests/end-to-end/textInputOutput.spec.ts b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
index 40b054c59..dc7e8c2d5 100644
--- a/src/frontend/tests/end-to-end/textInputOutput.spec.ts
+++ b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
@@ -26,8 +26,9 @@ test("TextInputOutputComponent", async ({ page }) => {
     modalCount = await page.getByTestId("modal-title")?.count();
   }
 
-  await page.waitForTimeout(1000);
-
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("blank-flow").click();
   await page.waitForSelector('[data-testid="extended-disclosure"]', {
     timeout: 30000,
@@ -60,42 +61,50 @@ test("TextInputOutputComponent", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
 
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[5]/button/div[1]',
-    )
-    .waitFor({
-      state: "visible",
-      timeout: 30000,
-    });
+  let visibleElementHandle;
 
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[5]/button/div[1]',
-    )
-    .hover();
+  const elementsTextInputOutput = await page
+    .getByTestId("handle-textinput-shownode-text-right")
+    .all();
+
+  for (const element of elementsTextInputOutput) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.waitFor({
+    state: "visible",
+    timeout: 30000,
+  });
+
+  await visibleElementHandle.hover();
   await page.mouse.down();
 
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div[1]',
-    )
-    .waitFor({
-      state: "visible",
-      timeout: 30000,
-    });
+  for (const element of elementsTextInputOutput) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.waitFor({
+    state: "visible",
+    timeout: 30000,
+  });
 
   // Move to the second element
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div[1]',
-    )
-    .hover();
+  await visibleElementHandle.hover();
 
   // Release the mouse
   await page.mouse.up();
@@ -109,43 +118,55 @@ test("TextInputOutputComponent", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.getByTitle("fit view").click();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
 
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[15]/button/div[1]',
-    )
-    .waitFor({
-      state: "visible",
-      timeout: 30000,
-    });
+  const elementsOpenAiOutput = await page
+    .getByTestId("handle-openaimodel-shownode-text-right")
+    .all();
+
+  for (const element of elementsOpenAiOutput) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.waitFor({
+    state: "visible",
+    timeout: 30000,
+  });
 
   // Click and hold on the first element
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[15]/button/div[1]',
-    )
-    .hover();
+  await visibleElementHandle.hover();
   await page.mouse.down();
 
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div[1]',
-    )
-    .waitFor({
-      state: "visible",
-      timeout: 30000,
-    });
+  const elementTextOutputInput = await page
+    .getByTestId("handle-textoutput-shownode-text-left")
+    .all();
+
+  for (const element of elementTextOutputInput) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.waitFor({
+    state: "visible",
+    timeout: 30000,
+  });
 
   // Move to the second element
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div[1]',
-    )
-    .hover();
+  await visibleElementHandle.hover();
 
   // Release the mouse
   await page.mouse.up();
@@ -163,6 +184,11 @@ test("TextInputOutputComponent", async ({ page }) => {
   await page
     .getByTestId("popover-anchor-input-openai_api_key")
     .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown-model_name").click();
+  await page.getByTestId("gpt-4o-0-option").click();
+
+  await page.waitForTimeout(2000);
   await page.getByText("Playground", { exact: true }).click();
   await page.getByText("Run Flow", { exact: true }).click();
 
diff --git a/src/frontend/tests/end-to-end/toggleComponent.spec.ts b/src/frontend/tests/end-to-end/toggleComponent.spec.ts
index 5c8eef429..eded6b2b3 100644
--- a/src/frontend/tests/end-to-end/toggleComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/toggleComponent.spec.ts
@@ -19,7 +19,9 @@ test("ToggleComponent", async ({ page }) => {
     await page.waitForTimeout(5000);
     modalCount = await page.getByTestId("modal-title")?.count();
   }
-
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("blank-flow").click();
 
   await page.waitForSelector('[data-testid="extended-disclosure"]', {
@@ -41,6 +43,10 @@ test("ToggleComponent", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
@@ -58,6 +64,10 @@ test("ToggleComponent", async ({ page }) => {
 
   await page.getByText("Save Changes", { exact: true }).click();
 
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
 
   await page.getByTestId("toggle-load_hidden").click();
@@ -77,6 +87,10 @@ test("ToggleComponent", async ({ page }) => {
 
   await page.getByTestId("div-generic-node").click();
 
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
diff --git a/src/frontend/tests/end-to-end/tweaks_test.spec.ts b/src/frontend/tests/end-to-end/tweaksTest.spec.ts
similarity index 94%
rename from src/frontend/tests/end-to-end/tweaks_test.spec.ts
rename to src/frontend/tests/end-to-end/tweaksTest.spec.ts
index bc4ab7c56..5fba18a44 100644
--- a/src/frontend/tests/end-to-end/tweaks_test.spec.ts
+++ b/src/frontend/tests/end-to-end/tweaksTest.spec.ts
@@ -79,10 +79,15 @@ test("check if tweaks are updating when someothing on the flow changes", async (
     await page.waitForTimeout(5000);
     modalCount = await page.getByTestId("modal-title")?.count();
   }
-  await page.waitForTimeout(1000);
+
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("Chroma");
@@ -94,6 +99,11 @@ test("check if tweaks are updating when someothing on the flow changes", async (
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
diff --git a/src/frontend/tsconfig.json b/src/frontend/tsconfig.json
index 1879137c5..28cdcd18b 100644
--- a/src/frontend/tsconfig.json
+++ b/src/frontend/tsconfig.json
@@ -17,5 +17,41 @@
     "jsx": "react-jsx",
     "noImplicitAny": false
   },
-  "include": ["src"]
+  "include": [
+    "src",
+    "tests/end-to-end/saveComponents.spec.ts",
+    "tests/end-to-end/actionsMainPage-shard-1.spec.ts",
+    "tests/end-to-end/auto_login.spec.ts",
+    "tests/end-to-end/chatInputOutput.spec.ts",
+    "tests/end-to-end/chatInputOutputUser-shard-2.spec.ts",
+    "tests/end-to-end/codeAreaModalComponent.spec.ts",
+    "tests/end-to-end/curlApiGeneration.spec.ts",
+    "tests/end-to-end/deleteComponentFlows.spec.ts",
+    "tests/end-to-end/dragAndDrop.spec.ts",
+    "tests/end-to-end/dropdownComponent.spec.ts",
+    "tests/end-to-end/fileUploadComponent.spec.ts",
+    "tests/end-to-end/filterEdge.spec.ts",
+    "tests/end-to-end/floatComponent.spec.ts",
+    "tests/end-to-end/flowPage.spec.ts",
+    "tests/end-to-end/flowSettings.spec.ts",
+    "tests/end-to-end/generalBugs-shard-0.spec.ts",
+    "tests/end-to-end/globalVariables.spec.ts",
+    "tests/end-to-end/group.spec.ts",
+    "tests/end-to-end/folders.spec.ts",
+    "tests/end-to-end/inputComponent.spec.ts",
+    "tests/end-to-end/inputListComponent.spec.ts",
+    "tests/end-to-end/intComponent.spec.ts",
+    "tests/end-to-end/keyPairListComponent.spec.ts",
+    "tests/end-to-end/langflowShortcuts.spec.ts",
+    "tests/end-to-end/nestedComponent.spec.ts",
+    "tests/end-to-end/promptModalComponent.spec.ts",
+    "tests/end-to-end/python_api_generation.spec.ts",
+    "tests/end-to-end/textAreaModalComponent.spec.ts",
+    "tests/end-to-end/textInputOutput.spec.ts",
+    "tests/end-to-end/toggleComponent.spec.ts",
+    "tests/end-to-end/tweaks_test.spec.ts",
+    "tests/end-to-end/twoEdges.spec.ts",
+    "tests/end-to-end/userSettings.spec.ts",
+    "tests/end-to-end/store.spec.ts"
+  ]
 }
diff --git a/tests/test_messages_endpoints.py b/tests/test_messages_endpoints.py
new file mode 100644
index 000000000..ee4021784
--- /dev/null
+++ b/tests/test_messages_endpoints.py
@@ -0,0 +1,76 @@
+from uuid import UUID
+
+import pytest
+from fastapi.testclient import TestClient
+
+from langflow.memory import add_messagetables
+
+# Assuming you have these imports available
+from langflow.services.database.models.message import MessageCreate, MessageRead, MessageUpdate
+from langflow.services.database.models.message.model import MessageTable
+from langflow.services.deps import session_scope
+
+
+@pytest.fixture()
+def created_message():
+    with session_scope() as session:
+        message = MessageCreate(text="Test message", sender="User", sender_name="User", session_id="session_id")
+        messagetable = MessageTable.model_validate(message, from_attributes=True)
+        messagetables = add_messagetables([messagetable], session)
+        message_read = MessageRead.model_validate(messagetables[0], from_attributes=True)
+        return message_read
+
+
+@pytest.fixture()
+def created_messages(session):
+    with session_scope() as session:
+        messages = [
+            MessageCreate(text="Test message 1", sender="User", sender_name="User", session_id="session_id2"),
+            MessageCreate(text="Test message 2", sender="User", sender_name="User", session_id="session_id2"),
+            MessageCreate(text="Test message 3", sender="User", sender_name="User", session_id="session_id2"),
+        ]
+        messagetables = [MessageTable.model_validate(message, from_attributes=True) for message in messages]
+        message_list = add_messagetables(messagetables, session)
+
+        return message_list
+
+
+def test_delete_messages(client: TestClient, created_messages, logged_in_headers):
+    response = client.request(
+        "DELETE", "api/v1/monitor/messages", json=[str(msg.id) for msg in created_messages], headers=logged_in_headers
+    )
+    assert response.status_code == 204, response.text
+    assert response.reason_phrase == "No Content"
+
+
+def test_update_message(client: TestClient, logged_in_headers, created_message):
+    message_id = created_message.id
+    message_update = MessageUpdate(text="Updated content")
+    response = client.put(
+        f"api/v1/monitor/messages/{message_id}", json=message_update.model_dump(), headers=logged_in_headers
+    )
+    assert response.status_code == 200, response.text
+    updated_message = MessageRead(**response.json())
+    assert updated_message.text == "Updated content"
+
+
+def test_update_message_not_found(client: TestClient, logged_in_headers):
+    non_existent_id = UUID("00000000-0000-0000-0000-000000000000")
+    message_update = MessageUpdate(text="Updated content")
+    response = client.put(
+        f"api/v1/monitor/messages/{non_existent_id}", json=message_update.model_dump(), headers=logged_in_headers
+    )
+    assert response.status_code == 404, response.text
+    assert response.json()["detail"] == "Message not found"
+
+
+def test_delete_messages_session(client: TestClient, created_messages, logged_in_headers):
+    session_id = "session_id2"
+    response = client.delete(f"api/v1/monitor/messages/session/{session_id}", headers=logged_in_headers)
+    assert response.status_code == 204
+    assert response.reason_phrase == "No Content"
+
+    assert len(created_messages) == 3
+    response = client.get("api/v1/monitor/messages", headers=logged_in_headers)
+    assert response.status_code == 200
+    assert len(response.json()) == 0
diff --git a/tests/test_webhook.py b/tests/test_webhook.py
index c8d75c9cc..edba88168 100644
--- a/tests/test_webhook.py
+++ b/tests/test_webhook.py
@@ -26,3 +26,15 @@ def test_webhook_endpoint(client, added_webhook_test):
     response = client.post(endpoint, json=payload)
     assert response.status_code == 202
     assert not file_path.exists()
+
+
+def test_webhook_with_random_payload(client, added_webhook_test):
+    endpoint_name = added_webhook_test["endpoint_name"]
+    endpoint = f"api/v1/webhook/{endpoint_name}"
+    # Just test that "Random Payload" returns 202
+    # returns 202
+    response = client.post(
+        endpoint,
+        json="Random Payload",
+    )
+    assert response.status_code == 202
diff --git a/tests/unit/test_helper_components.py b/tests/unit/test_helper_components.py
index 9e9c4f63a..dc07c5835 100644
--- a/tests/unit/test_helper_components.py
+++ b/tests/unit/test_helper_components.py
@@ -31,7 +31,7 @@ from langflow.schema import Data
 
 def test_uuid_generator_component():
     # Arrange
-    uuid_generator_component = helpers.UUIDGeneratorComponent()
+    uuid_generator_component = helpers.IDGeneratorComponent()
     uuid_generator_component.code = open(helpers.IDGenerator.__file__, "r").read()
 
     frontend_node, _ = build_custom_component_template(uuid_generator_component)
diff --git a/tests/unit/test_messages.py b/tests/unit/test_messages.py
new file mode 100644
index 000000000..059d82b61
--- /dev/null
+++ b/tests/unit/test_messages.py
@@ -0,0 +1,76 @@
+import pytest
+
+from langflow.memory import add_messages, add_messagetables, delete_messages, get_messages, store_message
+from langflow.schema.message import Message
+
+# Assuming you have these imports available
+from langflow.services.database.models.message import MessageCreate, MessageRead
+from langflow.services.database.models.message.model import MessageTable
+from langflow.services.deps import session_scope
+
+
+@pytest.fixture()
+def created_message():
+    with session_scope() as session:
+        message = MessageCreate(text="Test message", sender="User", sender_name="User", session_id="session_id")
+        messagetable = MessageTable.model_validate(message, from_attributes=True)
+        messagetables = add_messagetables([messagetable], session)
+        message_read = MessageRead.model_validate(messagetables[0], from_attributes=True)
+        return message_read
+
+
+@pytest.fixture()
+def created_messages(session):
+    with session_scope() as session:
+        messages = [
+            MessageCreate(text="Test message 1", sender="User", sender_name="User", session_id="session_id2"),
+            MessageCreate(text="Test message 2", sender="User", sender_name="User", session_id="session_id2"),
+            MessageCreate(text="Test message 3", sender="User", sender_name="User", session_id="session_id2"),
+        ]
+        messagetables = [MessageTable.model_validate(message, from_attributes=True) for message in messages]
+        messagetables = add_messagetables(messagetables, session)
+        messages_read = [
+            MessageRead.model_validate(messagetable, from_attributes=True) for messagetable in messagetables
+        ]
+        return messages_read
+
+
+def test_get_messages():
+    add_messages(
+        [
+            Message(text="Test message 1", sender="User", sender_name="User", session_id="session_id2"),
+            Message(text="Test message 2", sender="User", sender_name="User", session_id="session_id2"),
+        ]
+    )
+    messages = get_messages(sender="User", session_id="session_id2", limit=2)
+    assert len(messages) == 2
+    assert messages[0].text == "Test message 1"
+    assert messages[1].text == "Test message 2"
+
+
+def test_add_messages():
+    message = Message(text="New Test message", sender="User", sender_name="User", session_id="new_session_id")
+    messages = add_messages(message)
+    assert len(messages) == 1
+    assert messages[0].text == "New Test message"
+
+
+def test_add_messagetables(session):
+    messages = [MessageTable(text="New Test message", sender="User", sender_name="User", session_id="new_session_id")]
+    added_messages = add_messagetables(messages, session)
+    assert len(added_messages) == 1
+    assert added_messages[0].text == "New Test message"
+
+
+def test_delete_messages(session):
+    session_id = "session_id2"
+    delete_messages(session_id)
+    messages = session.query(MessageTable).filter(MessageTable.session_id == session_id).all()
+    assert len(messages) == 0
+
+
+def test_store_message():
+    message = Message(text="Stored message", sender="User", sender_name="User", session_id="stored_session_id")
+    stored_messages = store_message(message)
+    assert len(stored_messages) == 1
+    assert stored_messages[0].text == "Stored message"