adjust edge tooltips

.github/workflows/codeql.yml

@@ -0,0 +1,66 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ 'dev', 'main' ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ 'dev' ]
+  schedule:
+    - cron: '17 2 * * 1'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    timeout-minutes: ${{ (matrix.language == 'swift' && 120) || 360 }}
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'python', 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Use only 'java' to analyze code written in Java, Kotlin or both
+        # Use only 'javascript' to analyze code written in JavaScript, TypeScript or both
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+
+    # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+    #   If the Autobuild fails above, remove it and uncomment the following three lines.
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+    # - run: |
+    #     echo "Run, Build Application using script"
+    #     ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2
+      with:
+        category: "/language:${{matrix.language}}"

.gitignore

@@ -245,3 +245,4 @@ dmypy.json
 .testenv/*
 langflow.db
 .githooks/prepare-commit-msg
+langchain.db

README.md

@@ -163,7 +163,7 @@ print(run_flow("Your message", flow_id=FLOW_ID, tweaks=TWEAKS))
 
 ## 🎨 Creating Flows
 
-Creating flows with LangFlow is easy. Simply drag sidebar components onto the canvas and connect them together to create your pipeline. LangFlow provides a range of [LangChain components](https://langchain.readthedocs.io/en/latest/reference.html) to choose from, including LLMs, prompt serializers, agents, and chains.
+Creating flows with LangFlow is easy. Simply drag sidebar components onto the canvas and connect them together to create your pipeline. LangFlow provides a range of [LangChain components](https://api.python.langchain.com/en/latest/index.html) to choose from, including LLMs, prompt serializers, agents, and chains.
 
 Explore by editing prompt parameters, link chains and agents, track an agent's thought process, and export your flow.
 

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langflow"
-version = "0.2.1"
+version = "0.2.11"
 description = "A Python package with a built-in web application"
 authors = ["Logspace <contact@logspace.ai>"]
 maintainers = [
@@ -22,25 +22,24 @@ include = ["src/backend/langflow/*", "src/backend/langflow/**/*"]
 langflow = "langflow.__main__:main"
 
 [tool.poetry.dependencies]
-python = ">=3.9,<3.12"
+python = ">=3.9,<3.11"
 fastapi = "^0.99.0"
 uvicorn = "^0.22.0"
-beautifulsoup4 = "^4.11.2"
+beautifulsoup4 = "^4.12.2"
 google-search-results = "^2.4.1"
 google-api-python-client = "^2.79.0"
 typer = "^0.9.0"
 gunicorn = "^20.1.0"
-langchain = "^0.0.215"
+langchain = "^0.0.219"
 openai = "^0.27.8"
-types-pyyaml = "^6.0.12.8"
-pandas = "^1.5.3"
+pandas = "^2.0.0"
 chromadb = "^0.3.21"
-huggingface-hub = "^0.13.3"
+huggingface-hub = "^0.15.0"
 rich = "^13.4.2"
 llama-cpp-python = "~0.1.0"
 networkx = "^3.1"
-unstructured = "^0.5.11"
-pypdf = "^3.7.1"
+unstructured = "^0.7.0"
+pypdf = "^3.11.0"
 lxml = "^4.9.2"
 pysrt = "^1.1.2"
 fake-useragent = "^1.1.3"
@@ -49,18 +48,18 @@ psycopg2-binary = "^2.9.6"
 pyarrow = "^12.0.0"
 tiktoken = "~0.4.0"
 wikipedia = "^1.4.0"
-langchain-serve = { version = ">0.0.39", optional = true }
-qdrant-client = "^1.2.0"
+langchain-serve = { version = ">0.0.49", optional = true }
+qdrant-client = "^1.3.0"
 websockets = "^10.3"
 weaviate-client = "^3.21.0"
 jina = "3.15.2"
 sentence-transformers = "^2.2.2"
-ctransformers = "^0.2.2"
-cohere = "^4.6.0"
+ctransformers = "^0.2.10"
+cohere = "^4.11.0"
 python-multipart = "^0.0.6"
 sqlmodel = "^0.0.8"
 faiss-cpu = "^1.7.4"
-anthropic = "^0.2.10"
+anthropic = "^0.3.0"
 orjson = "^3.9.1"
 multiprocess = "^0.70.14"
 cachetools = "^5.3.1"
@@ -70,7 +69,9 @@ pinecone-client = "^2.2.2"
 supabase = "^1.0.3"
 pymongo = "^4.4.0"
 certifi = "^2023.5.7"
-
+google-cloud-aiplatform = "^1.26.1"
+psycopg = "^3.1.9"
+psycopg-binary = "^3.1.9"
 
 [tool.poetry.dev-dependencies]
 black = "^23.1.0"
@@ -85,6 +86,7 @@ pytest-cov = "^4.0.0"
 pandas-stubs = "^2.0.0.230412"
 types-pillow = "^9.5.0.2"
 types-appdirs = "^1.4.3.5"
+types-pyyaml = "^6.0.12.8"
 
 
 [tool.poetry.extras]

src/backend/langflow/__main__.py

@@ -1,6 +1,5 @@
 import sys
 import time
-from fastapi import FastAPI
 import httpx
 from multiprocess import Process, cpu_count  # type: ignore
 import platform
@@ -11,9 +10,7 @@ from rich.panel import Panel
 from rich import box
 from rich import print as rprint
 import typer
-from fastapi.staticfiles import StaticFiles
-from fastapi.responses import FileResponse
-from langflow.main import create_app
+from langflow.main import setup_app
 from langflow.settings import settings
 from langflow.utils.logger import configure, logger
 import webbrowser
@@ -144,15 +141,9 @@ def serve(
         remove_api_keys=remove_api_keys,
         cache=cache,
     )
-    # get the directory of the current file
-    if not path:
-        frontend_path = Path(__file__).parent
-        static_files_dir = frontend_path / "frontend"
-    else:
-        static_files_dir = Path(path)
-
-    app = create_app()
-    setup_static_files(app, static_files_dir)
+    # create path object if path is provided
+    static_files_dir: Optional[Path] = Path(path) if path else None
+    app = setup_app(static_files_dir=static_files_dir)
     # check if port is being used
     if is_port_in_use(port, host):
         port = get_free_port(port)
@@ -200,29 +191,6 @@ def run_on_windows(host, port, log_level, options, app):
     run_langflow(host, port, log_level, options, app)
 
 
-def setup_static_files(app: FastAPI, static_files_dir: Path):
-    """
-    Setup the static files directory.
-
-    Args:
-        app (FastAPI): FastAPI app.
-        path (str): Path to the static files directory.
-    """
-    app.mount(
-        "/",
-        StaticFiles(directory=static_files_dir, html=True),
-        name="static",
-    )
-
-    @app.exception_handler(404)
-    async def custom_404_handler(request, __):
-        path = static_files_dir / "index.html"
-
-        if not path.exists():
-            raise RuntimeError(f"File at path {path} does not exist.")
-        return FileResponse(path)
-
-
 def is_port_in_use(port, host="localhost"):
     """
     Check if a port is in use.
@@ -303,7 +271,7 @@ def run_langflow(host, port, log_level, options, app):
     except KeyboardInterrupt:
         pass
     except Exception as e:
-        logger.error(e)
+        logger.exception(e)
         sys.exit(1)
 
 

src/backend/langflow/api/v1/base.py

@@ -18,6 +18,7 @@ class FrontendNodeRequest(FrontendNode):
 
 
 class ValidatePromptRequest(BaseModel):
+    name: str
     template: str
     frontend_node: FrontendNodeRequest
 

src/backend/langflow/api/v1/chat.py

@@ -1,13 +1,7 @@
-from fastapi import (
-    APIRouter,
-    HTTPException,
-    WebSocket,
-    WebSocketException,
-    status,
-)
+from fastapi import APIRouter, HTTPException, WebSocket, WebSocketException, status
 from fastapi.responses import StreamingResponse
 from langflow.api.utils import build_input_keys_response
-from langflow.api.v1.schemas import BuiltResponse, InitResponse, StreamData
+from langflow.api.v1.schemas import BuildStatus, BuiltResponse, InitResponse, StreamData
 
 from langflow.chat.manager import ChatManager
 from langflow.graph.graph.base import Graph
@@ -26,22 +20,39 @@ async def chat(client_id: str, websocket: WebSocket):
         if client_id in chat_manager.in_memory_cache:
             await chat_manager.handle_websocket(client_id, websocket)
         else:
+            # We accept the connection but close it immediately
+            # if the flow is not built yet
+            await websocket.accept()
             message = "Please, build the flow before sending messages"
-            await websocket.close(code=status.WS_1008_POLICY_VIOLATION, reason=message)
+            await websocket.close(code=status.WS_1011_INTERNAL_ERROR, reason=message)
     except WebSocketException as exc:
         logger.error(exc)
         await websocket.close(code=status.WS_1011_INTERNAL_ERROR, reason=str(exc))
 
 
-@router.post("/build/init", response_model=InitResponse, status_code=201)
-async def init_build(graph_data: dict):
+@router.post("/build/init/{flow_id}", response_model=InitResponse, status_code=201)
+async def init_build(graph_data: dict, flow_id: str):
     """Initialize the build by storing graph data and returning a unique session ID."""
 
     try:
-        flow_id = graph_data.get("id")
         if flow_id is None:
             raise ValueError("No ID provided")
-        flow_data_store[flow_id] = graph_data
+        # Check if already building
+        if (
+            flow_id in flow_data_store
+            and flow_data_store[flow_id]["status"] == BuildStatus.IN_PROGRESS
+        ):
+            return InitResponse(flowId=flow_id)
+
+        # Delete from cache if already exists
+        if flow_id in chat_manager.in_memory_cache:
+            with chat_manager.in_memory_cache._lock:
+                chat_manager.in_memory_cache.delete(flow_id)
+                logger.debug(f"Deleted flow {flow_id} from cache")
+        flow_data_store[flow_id] = {
+            "graph_data": graph_data,
+            "status": BuildStatus.STARTED,
+        }
 
         return InitResponse(flowId=flow_id)
     except Exception as exc:
@@ -53,8 +64,9 @@ async def init_build(graph_data: dict):
 async def build_status(flow_id: str):
     """Check the flow_id is in the flow_data_store."""
     try:
-        built = flow_id in flow_data_store and not isinstance(
-            flow_data_store[flow_id], dict
+        built = (
+            flow_id in flow_data_store
+            and flow_data_store[flow_id]["status"] == BuildStatus.SUCCESS
         )
 
         return BuiltResponse(
@@ -79,7 +91,12 @@ async def stream_build(flow_id: str):
                 yield str(StreamData(event="error", data={"error": error_message}))
                 return
 
-            graph_data = flow_data_store[flow_id].get("data")
+            if flow_data_store[flow_id].get("status") == BuildStatus.IN_PROGRESS:
+                error_message = "Already building"
+                yield str(StreamData(event="error", data={"error": error_message}))
+                return
+
+            graph_data = flow_data_store[flow_id].get("graph_data")
 
             if not graph_data:
                 error_message = "No data provided"
@@ -97,6 +114,15 @@ async def stream_build(flow_id: str):
                 return
 
             number_of_nodes = len(graph.nodes)
+            flow_data_store[flow_id]["status"] = BuildStatus.IN_PROGRESS
+            # To deal with the ZeroShotAgent case
+            # we need to build the root node first
+            # and then the rest of the graph
+            # This is a big problem because certain nodes require
+            # params that are not connected to it.
+            # We should consider connecting the tools to the ZeroShotPrompt
+            graph.build()
+
             for i, vertex in enumerate(graph.generator_build(), 1):
                 try:
                     log_dict = {
@@ -117,6 +143,7 @@ async def stream_build(flow_id: str):
                 except Exception as exc:
                     params = str(exc)
                     valid = False
+                    flow_data_store[flow_id]["status"] = BuildStatus.FAILURE
 
                 response = {
                     "valid": valid,
@@ -138,9 +165,11 @@ async def stream_build(flow_id: str):
             chat_manager.set_cache(flow_id, langchain_object)
             # We need to reset the chat history
             chat_manager.chat_history.empty_history(flow_id)
+            flow_data_store[flow_id]["status"] = BuildStatus.SUCCESS
         except Exception as exc:
             logger.exception(exc)
             logger.error("Error while building the flow: %s", exc)
+            flow_data_store[flow_id]["status"] = BuildStatus.FAILURE
             yield str(StreamData(event="error", data={"error": str(exc)}))
         finally:
             yield str(StreamData(event="message", data=final_response))

src/backend/langflow/api/v1/endpoints.py

@@ -11,9 +11,7 @@ from langflow.api.v1.schemas import (
     UploadFileResponse,
 )
 
-from langflow.interface.types import (
-    build_langchain_types_dict,
-)
+from langflow.interface.types import langchain_types_dict
 from langflow.database.base import get_session
 from sqlmodel import Session
 
@@ -23,7 +21,7 @@ router = APIRouter(tags=["Base"])
 
 @router.get("/all")
 def get_all():
-    return build_langchain_types_dict()
+    return langchain_types_dict
 
 
 # For backwards compatibility we will keep the old endpoint

src/backend/langflow/api/v1/schemas.py

@@ -1,3 +1,4 @@
+from enum import Enum
 from pathlib import Path
 from typing import Any, Dict, List, Optional, Union
 from langflow.database.models.flow import FlowCreate, FlowRead
@@ -5,6 +6,15 @@ from pydantic import BaseModel, Field, validator
 import json
 
 
+class BuildStatus(Enum):
+    """Status of the build."""
+
+    SUCCESS = "success"
+    FAILURE = "failure"
+    STARTED = "started"
+    IN_PROGRESS = "in_progress"
+
+
 class GraphData(BaseModel):
     """Data inside the exported flow."""
 

src/backend/langflow/api/v1/validate.py

@@ -28,49 +28,93 @@ def post_validate_code(code: Code):
 
 
 @router.post("/prompt", status_code=200, response_model=PromptValidationResponse)
-def post_validate_prompt(prompt: ValidatePromptRequest):
+def post_validate_prompt(prompt_request: ValidatePromptRequest):
     try:
-        input_variables = validate_prompt(prompt.template)
-        # Reinitialize custom_fields
-        old_custom_fields = prompt.frontend_node.custom_fields.copy()
-        prompt.frontend_node.custom_fields = []
-        # Add new variables to the template
-        for variable in input_variables:
-            try:
-                template_field = TemplateField(
-                    name=variable,
-                    display_name=variable,
-                    field_type="str",
-                    show=True,
-                    advanced=False,
-                    input_types=["Document", "BaseOutputParser"],
+        input_variables = validate_prompt(prompt_request.template)
+
+        old_custom_fields = get_old_custom_fields(prompt_request)
+
+        add_new_variables_to_template(input_variables, prompt_request)
+
+        remove_old_variables_from_template(
+            old_custom_fields, input_variables, prompt_request
+        )
+
+        update_input_variables_field(input_variables, prompt_request)
+
+        return PromptValidationResponse(
+            input_variables=input_variables,
+            frontend_node=prompt_request.frontend_node,
+        )
+    except Exception as e:
+        logger.exception(e)
+        raise HTTPException(status_code=500, detail=str(e)) from e
+
+
+def get_old_custom_fields(prompt_request):
+    try:
+        old_custom_fields = prompt_request.frontend_node.custom_fields[
+            prompt_request.name
+        ].copy()
+    except KeyError:
+        old_custom_fields = []
+    prompt_request.frontend_node.custom_fields[prompt_request.name] = []
+    return old_custom_fields
+
+
+def add_new_variables_to_template(input_variables, prompt_request):
+    for variable in input_variables:
+        try:
+            template_field = TemplateField(
+                name=variable,
+                display_name=variable,
+                field_type="str",
+                show=True,
+                advanced=False,
+                input_types=["Document", "BaseOutputParser"],
+            )
+
+            prompt_request.frontend_node.template[variable] = template_field.to_dict()
+
+            # Check if variable is not already in the list before appending
+            if (
+                variable
+                not in prompt_request.frontend_node.custom_fields[prompt_request.name]
+            ):
+                prompt_request.frontend_node.custom_fields[prompt_request.name].append(
+                    variable
                 )
 
-                prompt.frontend_node.template[variable] = template_field.to_dict()
-                prompt.frontend_node.custom_fields.append(variable)
+        except Exception as exc:
+            logger.exception(exc)
+            raise HTTPException(status_code=500, detail=str(exc)) from exc
+
+
+def remove_old_variables_from_template(
+    old_custom_fields, input_variables, prompt_request
+):
+    for variable in old_custom_fields:
+        if variable not in input_variables:
+            try:
+                # Remove the variable from custom_fields associated with the given name
+                if (
+                    variable
+                    in prompt_request.frontend_node.custom_fields[prompt_request.name]
+                ):
+                    prompt_request.frontend_node.custom_fields[
+                        prompt_request.name
+                    ].remove(variable)
+
+                # Remove the variable from the template
+                prompt_request.frontend_node.template.pop(variable, None)
 
             except Exception as exc:
                 logger.exception(exc)
                 raise HTTPException(status_code=500, detail=str(exc)) from exc
 
-        # Remove variables that are not in the template anymore
-        for variable in old_custom_fields:
-            if variable not in input_variables:
-                try:
-                    prompt.frontend_node.template.pop(variable, None)
-                except Exception as exc:
-                    logger.exception(exc)
-                    raise HTTPException(status_code=500, detail=str(exc)) from exc
 
-        # Now we will set the field "input_variables" to the new list of variables
-        # if it exists
-        if "input_variables" in prompt.frontend_node.template:
-            prompt.frontend_node.template["input_variables"]["value"] = input_variables
-
-        return PromptValidationResponse(
-            input_variables=input_variables,
-            frontend_node=prompt.frontend_node,
-        )
-    except Exception as e:
-        logger.exception(e)
-        raise HTTPException(status_code=500, detail=str(e)) from e
+def update_input_variables_field(input_variables, prompt_request):
+    if "input_variables" in prompt_request.frontend_node.template:
+        prompt_request.frontend_node.template["input_variables"][
+            "value"
+        ] = input_variables

src/backend/langflow/chat/config.py

@@ -0,0 +1,2 @@
+class ChatConfig:
+    streaming: bool = True

src/backend/langflow/config.yaml

@@ -1,146 +1,289 @@
----
 agents:
-  - ZeroShotAgent
-  - JsonAgent
-  - CSVAgent
-  - AgentInitializer
-  - VectorStoreAgent
-  - VectorStoreRouterAgent
-  - SQLAgent
+  ZeroShotAgent:
+    documentation: "https://python.langchain.com/docs/modules/agents/how_to/custom_mrkl_agent"
+  JsonAgent:
+    documentation: "https://python.langchain.com/docs/modules/agents/toolkits/openapi"
+  CSVAgent:
+    documentation: "https://python.langchain.com/docs/modules/agents/toolkits/csv"
+  AgentInitializer:
+    documentation: "https://python.langchain.com/docs/modules/agents/agent_types/"
+  VectorStoreAgent:
+    documentation: ""
+  VectorStoreRouterAgent:
+    documentation: ""
+  SQLAgent:
+    documentation: ""
 chains:
-  - LLMChain
-  - LLMMathChain
-  - LLMCheckerChain
-  - ConversationChain
-  - SeriesCharacterChain
-  - MidJourneyPromptChain
-  - TimeTravelGuideChain
-  - SQLDatabaseChain
-  - RetrievalQA
-  - RetrievalQAWithSourcesChain
-  - ConversationalRetrievalChain
-  - CombineDocsChain
+  LLMChain:
+    documentation: "https://python.langchain.com/docs/modules/chains/foundational/llm_chain"
+  LLMMathChain:
+    documentation: "https://python.langchain.com/docs/modules/chains/additional/llm_math"
+  LLMCheckerChain:
+    documentation: "https://python.langchain.com/docs/modules/chains/additional/llm_checker"
+  ConversationChain:
+    documentation: ""
+  SeriesCharacterChain:
+    documentation: ""
+  MidJourneyPromptChain:
+    documentation: ""
+  TimeTravelGuideChain:
+    documentation: ""
+  SQLDatabaseChain:
+    documentation: ""
+  RetrievalQA:
+    documentation: "https://python.langchain.com/docs/modules/chains/popular/vector_db_qa"
+  RetrievalQAWithSourcesChain:
+    documentation: ""
+  ConversationalRetrievalChain:
+    documentation: "https://python.langchain.com/docs/modules/chains/popular/chat_vector_db"
+  CombineDocsChain:
+    documentation: ""
 documentloaders:
-  - AirbyteJSONLoader
-  - CoNLLULoader
-  - CSVLoader
-  - UnstructuredEmailLoader
-  - EverNoteLoader
-  - FacebookChatLoader
-  - GutenbergLoader
-  - BSHTMLLoader
-  - UnstructuredHTMLLoader
-  # - UnstructuredImageLoader # Issue with Python 3.11 (https://github.com/Unstructured-IO/unstructured-inference/issues/83)
-  - UnstructuredMarkdownLoader
-  - PyPDFLoader
-  - UnstructuredPowerPointLoader
-  - SRTLoader
-  - TelegramChatLoader
-  - TextLoader
-  - UnstructuredWordDocumentLoader
-  - WebBaseLoader
-  - AZLyricsLoader
-  - CollegeConfidentialLoader
-  - HNLoader
-  - IFixitLoader
-  - IMSDbLoader
-  - GitbookLoader
-  - ReadTheDocsLoader
-  - SlackDirectoryLoader
-  - NotionDirectoryLoader
-  - DirectoryLoader
-  - GitLoader
+  AirbyteJSONLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/airbyte_json"
+  CoNLLULoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/conll-u"
+  CSVLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/csv"
+  UnstructuredEmailLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/email"
+  EverNoteLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/evernote"
+  FacebookChatLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/facebook_chat"
+  GutenbergLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/gutenberg"
+  BSHTMLLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/how_to/html"
+  UnstructuredHTMLLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/how_to/html"
+  UnstructuredMarkdownLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/how_to/markdown"
+  PyPDFDirectoryLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/how_to/pdf"
+  PyPDFLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/how_to/pdf"
+  UnstructuredPowerPointLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/microsoft_powerpoint"
+  SRTLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/subtitle"
+  TelegramChatLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/telegram"
+  TextLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/"
+  UnstructuredWordDocumentLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/microsoft_word"
+  WebBaseLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/web_base"
+  AZLyricsLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/azlyrics"
+  CollegeConfidentialLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/college_confidential"
+  HNLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/hacker_news"
+  IFixitLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/ifixit"
+  IMSDbLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/imsdb"
+  GitbookLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/gitbook"
+  ReadTheDocsLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/readthedocs_documentation"
+  SlackDirectoryLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/slack"
+  NotionDirectoryLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/notion"
+  DirectoryLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/how_to/file_directory"
+  GitLoader:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/git"
 embeddings:
-  - OpenAIEmbeddings
-  - HuggingFaceEmbeddings
-  - CohereEmbeddings
+  OpenAIEmbeddings:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/text_embedding/integrations/openai"
+  HuggingFaceEmbeddings:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/text_embedding/integrations/sentence_transformers"
+  CohereEmbeddings:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/text_embedding/integrations/cohere"
 llms:
-  - OpenAI
-  # - AzureOpenAI
-  # - AzureChatOpenAI
-  - ChatOpenAI
-  - LlamaCpp
-  - CTransformers
-  - Cohere
-  - Anthropic
-  - ChatAnthropic
-  - HuggingFaceHub
+  OpenAI:
+    documentation: "https://python.langchain.com/docs/modules/model_io/models/llms/integrations/openai"
+  ChatOpenAI:
+    documentation: "https://python.langchain.com/docs/modules/model_io/models/chat/integrations/openai"
+  LlamaCpp:
+    documentation: "https://python.langchain.com/docs/modules/model_io/models/llms/integrations/llamacpp"
+  CTransformers:
+    documentation: "https://python.langchain.com/docs/modules/model_io/models/llms/integrations/ctransformers"
+  Cohere:
+    documentation: "https://python.langchain.com/docs/modules/model_io/models/llms/integrations/cohere"
+  Anthropic:
+    documentation: ""
+  ChatAnthropic:
+    documentation: "https://python.langchain.com/docs/modules/model_io/models/chat/integrations/anthropic"
+  HuggingFaceHub:
+    documentation: "https://python.langchain.com/docs/modules/model_io/models/llms/integrations/huggingface_hub"
+  VertexAI:
+    documentation: "https://python.langchain.com/docs/modules/model_io/models/llms/integrations/google_vertex_ai_palm"
+  ###
+  # There's a bug in this component deactivating until we get it sorted: _language_models.py", line 804, in send_message
+  #     is_blocked=safety_attributes.get("blocked", False),
+  # AttributeError: 'list' object has no attribute 'get'
+  # ChatVertexAI:
+  #   documentation: "https://python.langchain.com/docs/modules/model_io/models/chat/integrations/google_vertex_ai_palm"
+  ###
 memories:
-  - ConversationBufferMemory
-  - ConversationSummaryMemory
-  - ConversationKGMemory
+  # https://github.com/supabase-community/supabase-py/issues/482
+  # ZepChatMessageHistory:
+  #   documentation: "https://python.langchain.com/docs/modules/memory/integrations/zep_memory"
+  ConversationEntityMemory:
+    documentation: "https://python.langchain.com/docs/modules/memory/integrations/entity_memory_with_sqlite"
+  # https://github.com/hwchase17/langchain/issues/6091
+  # SQLiteEntityStore:
+  #   documentation: "https://python.langchain.com/docs/modules/memory/integrations/entity_memory_with_sqlite"
+  PostgresChatMessageHistory:
+    documentation: "https://python.langchain.com/docs/modules/memory/integrations/postgres_chat_message_history"
+  ConversationBufferMemory:
+    documentation: "https://python.langchain.com/docs/modules/memory/how_to/buffer"
+  ConversationSummaryMemory:
+    documentation: "https://python.langchain.com/docs/modules/memory/how_to/summary"
+  ConversationKGMemory:
+    documentation: "https://python.langchain.com/docs/modules/memory/how_to/kg"
+  ConversationBufferWindowMemory:
+    documentation: "https://python.langchain.com/docs/modules/memory/how_to/buffer_window"
+  VectorStoreRetrieverMemory:
+    documentation: "https://python.langchain.com/docs/modules/memory/how_to/vectorstore_retriever_memory"
+  MongoDBChatMessageHistory:
+    documentation: "https://python.langchain.com/docs/modules/memory/integrations/mongodb_chat_message_history"
+  ChatMessagePromptTemplate:
+    documentation: "https://python.langchain.com/docs/modules/model_io/prompts/prompt_templates/msg_prompt_templates"
+  HumanMessagePromptTemplate:
+    documentation: "https://python.langchain.com/docs/modules/model_io/models/chat/how_to/prompts"
+  SystemMessagePromptTemplate:
+    documentation: "https://python.langchain.com/docs/modules/model_io/models/chat/how_to/prompts"
+  ChatPromptTemplate:
+    documentation: "https://python.langchain.com/docs/modules/model_io/models/chat/how_to/prompts"
 prompts:
-  - PromptTemplate
-  - FewShotPromptTemplate
-  - ZeroShotPrompt
-  - ChatPromptTemplate
-  - SystemMessagePromptTemplate
-  - AIMessagePromptTemplate
-  - HumanMessagePromptTemplate
-  - ChatMessagePromptTemplate
+  PromptTemplate:
+    documentation: "https://python.langchain.com/docs/modules/model_io/prompts/prompt_templates/"
+  ZeroShotPrompt:
+    documentation: "https://python.langchain.com/docs/modules/agents/how_to/custom_mrkl_agent"
 textsplitters:
-  - CharacterTextSplitter
-  - RecursiveCharacterTextSplitter
-  # - LatexTextSplitter
-  # - PythonCodeTextSplitter
+  CharacterTextSplitter:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_transformers/text_splitters/character_text_splitter"
+  RecursiveCharacterTextSplitter:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/document_transformers/text_splitters/recursive_text_splitter"
 toolkits:
-  - OpenAPIToolkit
-  - JsonToolkit
-  - VectorStoreInfo
-  - VectorStoreRouterToolkit
-  - VectorStoreToolkit
+  OpenAPIToolkit:
+    documentation: ""
+  JsonToolkit:
+    documentation: ""
+  VectorStoreInfo:
+    documentation: ""
+  VectorStoreRouterToolkit:
+    documentation: ""
+  VectorStoreToolkit:
+    documentation: ""
 tools:
-  - Search
-  - PAL-MATH
-  - Calculator
-  - Serper Search
-  - Tool
-  - PythonFunctionTool
-  - PythonFunction
-  - JsonSpec
-  - News API
-  - TMDB API
-  - Podcast API
-  - QuerySQLDataBaseTool
-  - InfoSQLDatabaseTool
-  - ListSQLDatabaseTool
-  # - QueryCheckerTool
-  - BingSearchRun
-  - GoogleSearchRun
-  - GoogleSearchResults
-  - GoogleSerperRun
-  - JsonListKeysTool
-  - JsonGetValueTool
-  - PythonREPLTool
-  - PythonAstREPLTool
-  - RequestsGetTool
-  - RequestsPostTool
-  - RequestsPatchTool
-  - RequestsPutTool
-  - RequestsDeleteTool
-  - WikipediaQueryRun
-  - WolframAlphaQueryRun
+  Search:
+    documentation: ""
+  PAL-MATH:
+    documentation: ""
+  Calculator:
+    documentation: ""
+  Serper Search:
+    documentation: ""
+  Tool:
+    documentation: ""
+  PythonFunctionTool:
+    documentation: ""
+  PythonFunction:
+    documentation: ""
+  JsonSpec:
+    documentation: ""
+  News API:
+    documentation: ""
+  TMDB API:
+    documentation: ""
+  Podcast API:
+    documentation: ""
+  QuerySQLDataBaseTool:
+    documentation: ""
+  InfoSQLDatabaseTool:
+    documentation: ""
+  ListSQLDatabaseTool:
+    documentation: ""
+  BingSearchRun:
+    documentation: ""
+  GoogleSearchRun:
+    documentation: ""
+  GoogleSearchResults:
+    documentation: ""
+  GoogleSerperRun:
+    documentation: ""
+  JsonListKeysTool:
+    documentation: ""
+  JsonGetValueTool:
+    documentation: ""
+  PythonREPLTool:
+    documentation: ""
+  PythonAstREPLTool:
+    documentation: ""
+  RequestsGetTool:
+    documentation: ""
+  RequestsPostTool:
+    documentation: ""
+  RequestsPatchTool:
+    documentation: ""
+  RequestsPutTool:
+    documentation: ""
+  RequestsDeleteTool:
+    documentation: ""
+  WikipediaQueryRun:
+    documentation: ""
+  WolframAlphaQueryRun:
+    documentation: ""
 utilities:
-  - BingSearchAPIWrapper
-  - GoogleSearchAPIWrapper
-  - GoogleSerperAPIWrapper
-  - SearxResults
-  - SearxSearchWrapper
-  - SerpAPIWrapper
-  - WikipediaAPIWrapper
-  - WolframAlphaAPIWrapper
-  # - ZapierNLAWrapper
-  - SQLDatabase
+  BingSearchAPIWrapper:
+    documentation: ""
+  GoogleSearchAPIWrapper:
+    documentation: ""
+  GoogleSerperAPIWrapper:
+    documentation: ""
+  SearxResults:
+    documentation: ""
+  SearxSearchWrapper:
+    documentation: ""
+  SerpAPIWrapper:
+    documentation: ""
+  WikipediaAPIWrapper:
+    documentation: ""
+  WolframAlphaAPIWrapper:
+    documentation: ""
+retrievers:
+  MultiQueryRetriever:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/retrievers/how_to/MultiQueryRetriever"
+  # https://github.com/supabase-community/supabase-py/issues/482
+  # ZepRetriever:
+  #   documentation: "https://python.langchain.com/docs/modules/data_connection/retrievers/integrations/zep_memorystore"
 vectorstores:
-  - Chroma
-  - Qdrant
-  - Weaviate
-  - FAISS
-  - Pinecone
-  - SupabaseVectorStore
-  - MongoDBAtlasVectorSearch
+  Chroma:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/vectorstores/integrations/chroma"
+  Qdrant:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/vectorstores/integrations/qdrant"
+  Weaviate:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/vectorstores/integrations/weaviate"
+  FAISS:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/vectorstores/integrations/faiss"
+  Pinecone:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/vectorstores/integrations/pinecone"
+  SupabaseVectorStore:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/vectorstores/integrations/supabase"
+  MongoDBAtlasVectorSearch:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/vectorstores/integrations/mongodb_atlas"
 wrappers:
-  - RequestsWrapper
+  RequestsWrapper:
+    documentation: ""
 output_parsers:
-  - StructuredOutputParser
-  - ResponseSchema
+  StructuredOutputParser:
+    documentation: "https://python.langchain.com/docs/modules/model_io/output_parsers/structured"
+  ResponseSchema:
+    documentation: "https://python.langchain.com/docs/modules/model_io/output_parsers/structured"

src/backend/langflow/custom/customs.py

@@ -21,6 +21,9 @@ CUSTOM_NODES = {
     "utilities": {
         "SQLDatabase": frontend_node.agents.SQLDatabaseNode(),
     },
+    "memories": {
+        "PostgresChatMessageHistory": frontend_node.memories.PostgresChatMessageHistoryFrontendNode(),
+    },
     "chains": {
         "SeriesCharacterChain": frontend_node.chains.SeriesCharacterChainNode(),
         "TimeTravelGuideChain": frontend_node.chains.TimeTravelGuideChainNode(),

src/backend/langflow/database/base.py

@@ -1,6 +1,6 @@
 from langflow.settings import settings
 from sqlmodel import SQLModel, Session, create_engine
-
+from langflow.utils.logger import logger
 
 if settings.database_url.startswith("sqlite"):
     connect_args = {"check_same_thread": False}
@@ -10,7 +10,9 @@ engine = create_engine(settings.database_url, connect_args=connect_args)
 
 
 def create_db_and_tables():
+    logger.debug("Creating database and tables")
     SQLModel.metadata.create_all(engine)
+    logger.debug("Database and tables created")
 
 
 def get_session():

src/backend/langflow/graph/__init__.py

@@ -14,6 +14,7 @@ from langflow.graph.vertex.types import (
     ToolkitVertex,
     VectorStoreVertex,
     WrapperVertex,
+    RetrieverVertex,
 )
 
 __all__ = [
@@ -32,4 +33,5 @@ __all__ = [
     "ToolkitVertex",
     "VectorStoreVertex",
     "WrapperVertex",
+    "RetrieverVertex",
 ]

src/backend/langflow/graph/edge/base.py

@@ -33,12 +33,7 @@ class Edge:
         # Get what type of input the target node is expecting
 
         self.matched_type = next(
-            (
-                output
-                for output in self.source_types
-                for target_req in self.target_reqs
-                if output in target_req
-            ),
+            (output for output in self.source_types if output in self.target_reqs),
             None,
         )
         no_matched_type = self.matched_type is None

src/backend/langflow/graph/graph/constants.py

@@ -13,7 +13,7 @@ from langflow.interface.tools.base import tool_creator
 from langflow.interface.vector_store.base import vectorstore_creator
 from langflow.interface.wrappers.base import wrapper_creator
 from langflow.interface.output_parsers.base import output_parser_creator
-
+from langflow.interface.retrievers.base import retriever_creator
 
 from typing import Dict, Type
 
@@ -32,4 +32,5 @@ VERTEX_TYPE_MAP: Dict[str, Type[Vertex]] = {
     **{t: types.DocumentLoaderVertex for t in documentloader_creator.to_list()},
     **{t: types.TextSplitterVertex for t in textsplitter_creator.to_list()},
     **{t: types.OutputParserVertex for t in output_parser_creator.to_list()},
+    **{t: types.RetrieverVertex for t in retriever_creator.to_list()},
 }

src/backend/langflow/graph/vertex/types.py

@@ -113,6 +113,11 @@ class MemoryVertex(Vertex):
         super().__init__(data, base_type="memory")
 
 
+class RetrieverVertex(Vertex):
+    def __init__(self, data: Dict):
+        super().__init__(data, base_type="retrievers")
+
+
 class TextSplitterVertex(Vertex):
     def __init__(self, data: Dict):
         super().__init__(data, base_type="textsplitters")

src/backend/langflow/interface/base.py

@@ -8,6 +8,7 @@ from langflow.template.field.base import TemplateField
 from langflow.template.frontend_node.base import FrontendNode
 from langflow.template.template.base import Template
 from langflow.utils.logger import logger
+from langflow.settings import settings
 
 # Assuming necessary imports for Field, Template, and FrontendNode classes
 
@@ -15,12 +16,29 @@ from langflow.utils.logger import logger
 class LangChainTypeCreator(BaseModel, ABC):
     type_name: str
     type_dict: Optional[Dict] = None
+    name_docs_dict: Optional[Dict[str, str]] = None
 
     @property
     def frontend_node_class(self) -> Type[FrontendNode]:
         """The class type of the FrontendNode created in frontend_node."""
         return FrontendNode
 
+    @property
+    def docs_map(self) -> Dict[str, str]:
+        """A dict with the name of the component as key and the documentation link as value."""
+        if self.name_docs_dict is None:
+            try:
+                type_settings = getattr(settings, self.type_name)
+                self.name_docs_dict = {
+                    name: value_dict["documentation"]
+                    for name, value_dict in type_settings.items()
+                }
+            except AttributeError as exc:
+                logger.error(exc)
+
+                self.name_docs_dict = {}
+        return self.name_docs_dict
+
     @property
     @abstractmethod
     def type_to_loader_dict(self) -> Dict:
@@ -83,7 +101,7 @@ class LangChainTypeCreator(BaseModel, ABC):
 
         signature.add_extra_fields()
         signature.add_extra_base_classes()
-
+        signature.set_documentation(self.docs_map.get(name, ""))
         return signature
 
 

src/backend/langflow/interface/custom_lists.py

@@ -10,8 +10,12 @@ from langchain import (
     text_splitter,
 )
 from langchain.agents import agent_toolkits
-from langchain.chat_models import AzureChatOpenAI, ChatOpenAI
-from langchain.chat_models import ChatAnthropic
+from langchain.chat_models import (
+    AzureChatOpenAI,
+    ChatOpenAI,
+    ChatVertexAI,
+    ChatAnthropic,
+)
 
 from langflow.interface.importing.utils import import_class
 from langflow.interface.agents.custom import CUSTOM_AGENTS
@@ -22,6 +26,7 @@ llm_type_to_cls_dict = llms.type_to_cls_dict
 llm_type_to_cls_dict["anthropic-chat"] = ChatAnthropic  # type: ignore
 llm_type_to_cls_dict["azure-chat"] = AzureChatOpenAI  # type: ignore
 llm_type_to_cls_dict["openai-chat"] = ChatOpenAI  # type: ignore
+llm_type_to_cls_dict["vertexai-chat"] = ChatVertexAI  # type: ignore
 
 
 # Toolkits

src/backend/langflow/interface/importing/utils.py

@@ -45,6 +45,7 @@ def import_by_type(_type: str, name: str) -> Any:
         "textsplitters": import_textsplitter,
         "utilities": import_utility,
         "output_parsers": import_output_parser,
+        "retrievers": import_retriever,
     }
     if _type == "llms":
         key = "chat" if "chat" in name.lower() else "llm"
@@ -65,6 +66,11 @@ def import_chat_llm(llm: str) -> BaseChatModel:
     return import_class(f"langchain.chat_models.{llm}")
 
 
+def import_retriever(retriever: str) -> Any:
+    """Import retriever from retriever name"""
+    return import_module(f"from langchain.retrievers import {retriever}")
+
+
 def import_memory(memory: str) -> Any:
     """Import memory from memory name"""
     return import_module(f"from langchain.memory import {memory}")

src/backend/langflow/interface/initialize/llm.py

@@ -0,0 +1,9 @@
+def initialize_vertexai(class_object, params):
+    if credentials_path := params.get("credentials"):
+        from google.oauth2 import service_account  # type: ignore
+
+        credentials_object = service_account.Credentials.from_service_account_file(
+            filename=credentials_path
+        )
+        params["credentials"] = credentials_object
+    return class_object(**params)

src/backend/langflow/interface/initialize/loading.py

@@ -1,11 +1,13 @@
 import json
-from typing import Any, Callable, Dict, List, Sequence
+from typing import Any, Callable, Dict, List, Sequence, Type
 
 from langchain.agents import ZeroShotAgent
 from langchain.agents import agent as agent_module
 from langchain.agents.agent import AgentExecutor
 from langchain.agents.agent_toolkits.base import BaseToolkit
 from langchain.agents.tools import BaseTool
+from langflow.interface.initialize.llm import initialize_vertexai
+
 from langflow.interface.initialize.vector_store import vecstore_initializer
 
 from langchain.schema import Document, BaseOutputParser
@@ -16,8 +18,13 @@ from langflow.interface.importing.utils import get_function, import_by_type
 from langflow.interface.toolkits.base import toolkits_creator
 from langflow.interface.chains.base import chain_creator
 from langflow.interface.output_parsers.base import output_parser_creator
+from langflow.interface.retrievers.base import retriever_creator
 from langflow.interface.utils import load_file_into_dict
 from langflow.utils import validate
+from langchain.chains.base import Chain
+from langchain.vectorstores.base import VectorStore
+from langchain.document_loaders.base import BaseLoader
+from langchain.prompts.base import BasePromptTemplate
 
 
 def instantiate_class(node_type: str, base_type: str, params: Dict) -> Any:
@@ -45,8 +52,8 @@ def convert_params_to_sets(params):
 
 def convert_kwargs(params):
     # if *kwargs are passed as a string, convert to dict
-    # first find any key that has kwargs in it
-    kwargs_keys = [key for key in params.keys() if "kwargs" in key]
+    # first find any key that has kwargs or config in it
+    kwargs_keys = [key for key in params.keys() if "kwargs" in key or "config" in key]
     for key in kwargs_keys:
         if isinstance(params[key], str):
             params[key] = json.loads(params[key])
@@ -76,6 +83,12 @@ def instantiate_based_on_type(class_object, base_type, node_type, params):
         return instantiate_chains(node_type, class_object, params)
     elif base_type == "output_parsers":
         return instantiate_output_parser(node_type, class_object, params)
+    elif base_type == "llms":
+        return instantiate_llm(node_type, class_object, params)
+    elif base_type == "retrievers":
+        return instantiate_retriever(node_type, class_object, params)
+    elif base_type == "memory":
+        return instantiate_memory(node_type, class_object, params)
     else:
         return class_object(**params)
 
@@ -89,7 +102,47 @@ def instantiate_output_parser(node_type, class_object, params):
     return class_object(**params)
 
 
-def instantiate_chains(node_type, class_object, params):
+def instantiate_llm(node_type, class_object, params: Dict):
+    # This is a workaround so JinaChat works until streaming is implemented
+    # if "openai_api_base" in params and "jina" in params["openai_api_base"]:
+    # False if condition is True
+    if node_type == "VertexAI":
+        return initialize_vertexai(class_object=class_object, params=params)
+    return class_object(**params)
+
+
+def instantiate_memory(node_type, class_object, params):
+    try:
+        if "retriever" in params and hasattr(params["retriever"], "as_retriever"):
+            params["retriever"] = params["retriever"].as_retriever()
+        return class_object(**params)
+    # I want to catch a specific attribute error that happens
+    # when the object does not have a cursor attribute
+    except Exception as exc:
+        if "object has no attribute 'cursor'" in str(
+            exc
+        ) or 'object has no field "conn"' in str(exc):
+            raise AttributeError(
+                (
+                    "Failed to build connection to database."
+                    f" Please check your connection string and try again. Error: {exc}"
+                )
+            ) from exc
+        raise exc
+
+
+def instantiate_retriever(node_type, class_object, params):
+    if "retriever" in params and hasattr(params["retriever"], "as_retriever"):
+        params["retriever"] = params["retriever"].as_retriever()
+    if node_type in retriever_creator.from_method_nodes:
+        method = retriever_creator.from_method_nodes[node_type]
+        if class_method := getattr(class_object, method, None):
+            return class_method(**params)
+        raise ValueError(f"Method {method} not found in {class_object}")
+    return class_object(**params)
+
+
+def instantiate_chains(node_type, class_object: Type[Chain], params: Dict):
     if "retriever" in params and hasattr(params["retriever"], "as_retriever"):
         params["retriever"] = params["retriever"].as_retriever()
     if node_type in chain_creator.from_method_nodes:
@@ -101,11 +154,11 @@ def instantiate_chains(node_type, class_object, params):
     return class_object(**params)
 
 
-def instantiate_agent(class_object, params):
+def instantiate_agent(class_object: Type[agent_module.Agent], params: Dict):
     return load_agent_executor(class_object, params)
 
 
-def instantiate_prompt(node_type, class_object, params):
+def instantiate_prompt(node_type, class_object: Type[BasePromptTemplate], params: Dict):
     if node_type == "ZeroShotPrompt":
         if "tools" not in params:
             params["tools"] = []
@@ -166,7 +219,7 @@ def instantiate_prompt(node_type, class_object, params):
     return prompt, format_kwargs
 
 
-def instantiate_tool(node_type, class_object, params):
+def instantiate_tool(node_type, class_object: Type[BaseTool], params: Dict):
     if node_type == "JsonSpec":
         params["dict_"] = load_file_into_dict(params.pop("path"))
         return class_object(**params)
@@ -184,7 +237,7 @@ def instantiate_tool(node_type, class_object, params):
     return class_object(**params)
 
 
-def instantiate_toolkit(node_type, class_object, params):
+def instantiate_toolkit(node_type, class_object: Type[BaseToolkit], params: Dict):
     loaded_toolkit = class_object(**params)
     # Commenting this out for now to use toolkits as normal tools
     # if toolkits_creator.has_create_function(node_type):
@@ -194,7 +247,7 @@ def instantiate_toolkit(node_type, class_object, params):
     return loaded_toolkit
 
 
-def instantiate_embedding(class_object, params):
+def instantiate_embedding(class_object, params: Dict):
     params.pop("model", None)
     params.pop("headers", None)
     try:
@@ -208,7 +261,7 @@ def instantiate_embedding(class_object, params):
         return class_object(**params)
 
 
-def instantiate_vectorstore(class_object, params):
+def instantiate_vectorstore(class_object: Type[VectorStore], params: Dict):
     search_kwargs = params.pop("search_kwargs", {})
     if initializer := vecstore_initializer.get(class_object.__name__):
         vecstore = initializer(class_object, params)
@@ -224,7 +277,7 @@ def instantiate_vectorstore(class_object, params):
     return vecstore
 
 
-def instantiate_documentloader(class_object, params):
+def instantiate_documentloader(class_object: Type[BaseLoader], params: Dict):
     if "file_filter" in params:
         # file_filter will be a string but we need a function
         # that will be used to filter the files using file_filter
@@ -237,35 +290,55 @@ def instantiate_documentloader(class_object, params):
             extension.strip() in x for extension in extensions
         )
     metadata = params.pop("metadata", None)
+    if metadata and isinstance(metadata, str):
+        try:
+            metadata = json.loads(metadata)
+        except json.JSONDecodeError as exc:
+            raise ValueError(
+                "The metadata you provided is not a valid JSON string."
+            ) from exc
     docs = class_object(**params).load()
+    # Now if metadata is an empty dict, we will not add it to the documents
     if metadata:
-        if isinstance(metadata, str):
-            try:
-                metadata = json.loads(metadata)
-            except json.JSONDecodeError as exc:
-                raise ValueError(
-                    "The metadata you provided is not a valid JSON string."
-                ) from exc
-
         for doc in docs:
-            doc.metadata = metadata
+            # If the document already has metadata, we will not overwrite it
+            if not doc.metadata:
+                doc.metadata = metadata
+            else:
+                doc.metadata.update(metadata)
 
     return docs
 
 
-def instantiate_textsplitter(class_object, params):
+def instantiate_textsplitter(
+    class_object,
+    params: Dict,
+):
     try:
         documents = params.pop("documents")
-    except KeyError as e:
+    except KeyError as exc:
         raise ValueError(
             "The source you provided did not load correctly or was empty."
             "Try changing the chunk_size of the Text Splitter."
-        ) from e
-    text_splitter = class_object(**params)
+        ) from exc
+
+    if (
+        "separator_type" in params and params["separator_type"] == "Text"
+    ) or "separator_type" not in params:
+        params.pop("separator_type", None)
+        text_splitter = class_object(**params)
+    else:
+        from langchain.text_splitter import Language
+
+        language = params.pop("separator_type", None)
+        params["language"] = Language(language)
+        params.pop("separators", None)
+
+        text_splitter = class_object.from_language(**params)
     return text_splitter.split_documents(documents)
 
 
-def instantiate_utility(node_type, class_object, params):
+def instantiate_utility(node_type, class_object, params: Dict):
     if node_type == "SQLDatabase":
         return class_object.from_uri(params.pop("uri"))
     return class_object(**params)
@@ -291,6 +364,8 @@ def load_agent_executor(agent_class: type[agent_module.Agent], params, **kwargs)
     """Load agent executor from agent class, tools and chain"""
     allowed_tools: Sequence[BaseTool] = params.get("allowed_tools", [])
     llm_chain = params["llm_chain"]
+    # agent has hidden args for memory. might need to be support
+    # memory = params["memory"]
     # if allowed_tools is not a list or set, make it a list
     if not isinstance(allowed_tools, (list, set)) and isinstance(
         allowed_tools, BaseTool
@@ -303,6 +378,7 @@ def load_agent_executor(agent_class: type[agent_module.Agent], params, **kwargs)
     return AgentExecutor.from_agent_and_tools(
         agent=agent,
         tools=allowed_tools,
+        # memory=memory,
         **kwargs,
     )
 

src/backend/langflow/interface/listing.py

@@ -12,6 +12,7 @@ from langflow.interface.utilities.base import utility_creator
 from langflow.interface.vector_store.base import vectorstore_creator
 from langflow.interface.wrappers.base import wrapper_creator
 from langflow.interface.output_parsers.base import output_parser_creator
+from langflow.interface.retrievers.base import retriever_creator
 
 
 def get_type_dict():
@@ -30,6 +31,7 @@ def get_type_dict():
         "textSplitters": textsplitter_creator.to_list(),
         "utilities": utility_creator.to_list(),
         "outputParsers": output_parser_creator.to_list(),
+        "retrievers": retriever_creator.to_list(),
     }
 
 

src/backend/langflow/interface/memories/base.py

@@ -6,12 +6,18 @@ from langflow.settings import settings
 from langflow.template.frontend_node.base import FrontendNode
 from langflow.template.frontend_node.memories import MemoryFrontendNode
 from langflow.utils.logger import logger
-from langflow.utils.util import build_template_from_class
+from langflow.utils.util import build_template_from_class, build_template_from_method
+from langflow.custom.customs import get_custom_nodes
 
 
 class MemoryCreator(LangChainTypeCreator):
     type_name: str = "memories"
 
+    from_method_nodes = {
+        "ZepChatMessageHistory": "__init__",
+        "SQLiteEntityStore": "__init__",
+    }
+
     @property
     def frontend_node_class(self) -> Type[FrontendNode]:
         """The class type of the FrontendNode created in frontend_node."""
@@ -26,6 +32,14 @@ class MemoryCreator(LangChainTypeCreator):
     def get_signature(self, name: str) -> Optional[Dict]:
         """Get the signature of a memory."""
         try:
+            if name in get_custom_nodes(self.type_name).keys():
+                return get_custom_nodes(self.type_name)[name]
+            elif name in self.from_method_nodes:
+                return build_template_from_method(
+                    name,
+                    type_to_cls_dict=memory_type_to_cls_dict,
+                    method_name=self.from_method_nodes[name],
+                )
             return build_template_from_class(name, memory_type_to_cls_dict)
         except ValueError as exc:
             raise ValueError("Memory not found") from exc

src/backend/langflow/interface/retrievers/base.py

@@ -0,0 +1,58 @@
+from typing import Any, Dict, List, Optional, Type
+
+from langchain import retrievers
+
+from langflow.interface.base import LangChainTypeCreator
+from langflow.interface.importing.utils import import_class
+from langflow.settings import settings
+from langflow.template.frontend_node.retrievers import RetrieverFrontendNode
+from langflow.utils.logger import logger
+from langflow.utils.util import build_template_from_method, build_template_from_class
+
+
+class RetrieverCreator(LangChainTypeCreator):
+    type_name: str = "retrievers"
+
+    from_method_nodes = {"MultiQueryRetriever": "from_llm", "ZepRetriever": "__init__"}
+
+    @property
+    def frontend_node_class(self) -> Type[RetrieverFrontendNode]:
+        return RetrieverFrontendNode
+
+    @property
+    def type_to_loader_dict(self) -> Dict:
+        if self.type_dict is None:
+            self.type_dict: dict[str, Any] = {
+                retriever_name: import_class(f"langchain.retrievers.{retriever_name}")
+                for retriever_name in retrievers.__all__
+            }
+        return self.type_dict
+
+    def get_signature(self, name: str) -> Optional[Dict]:
+        """Get the signature of an embedding."""
+        try:
+            if name in self.from_method_nodes:
+                return build_template_from_method(
+                    name,
+                    type_to_cls_dict=self.type_to_loader_dict,
+                    method_name=self.from_method_nodes[name],
+                )
+            else:
+                return build_template_from_class(
+                    name, type_to_cls_dict=self.type_to_loader_dict
+                )
+        except ValueError as exc:
+            raise ValueError(f"Retriever {name} not found") from exc
+        except AttributeError as exc:
+            logger.error(f"Retriever {name} not loaded: {exc}")
+            return None
+
+    def to_list(self) -> List[str]:
+        return [
+            retriever
+            for retriever in self.type_to_loader_dict.keys()
+            if retriever in settings.retrievers or settings.dev
+        ]
+
+
+retriever_creator = RetrieverCreator()

src/backend/langflow/interface/run.py

@@ -79,6 +79,10 @@ def update_memory_keys(langchain_object, possible_new_mem_key):
         if key not in [langchain_object.memory.memory_key, possible_new_mem_key]
     ][0]
 
-    langchain_object.memory.input_key = input_key
-    langchain_object.memory.output_key = output_key
-    langchain_object.memory.memory_key = possible_new_mem_key
+    keys = [input_key, output_key, possible_new_mem_key]
+    attrs = ["input_key", "output_key", "memory_key"]
+    for key, attr in zip(keys, attrs):
+        try:
+            setattr(langchain_object.memory, attr, key)
+        except ValueError as exc:
+            logger.debug(f"{langchain_object.memory} has no attribute {attr} ({exc})")

src/backend/langflow/interface/types.py

@@ -12,6 +12,7 @@ from langflow.interface.utilities.base import utility_creator
 from langflow.interface.vector_store.base import vectorstore_creator
 from langflow.interface.wrappers.base import wrapper_creator
 from langflow.interface.output_parsers.base import output_parser_creator
+from langflow.interface.retrievers.base import retriever_creator
 
 
 def get_type_list():
@@ -46,6 +47,7 @@ def build_langchain_types_dict():  # sourcery skip: dict-assign-update-to-union
         textsplitter_creator,
         utility_creator,
         output_parser_creator,
+        retriever_creator,
     ]
 
     all_types = {}
@@ -54,3 +56,6 @@ def build_langchain_types_dict():  # sourcery skip: dict-assign-update-to-union
         if created_types[creator.type_name].values():
             all_types.update(created_types)
     return all_types
+
+
+langchain_types_dict = build_langchain_types_dict()

src/backend/langflow/interface/utils.py

@@ -4,10 +4,12 @@ import os
 from io import BytesIO
 import re
 
+
 import yaml
 from langchain.base_language import BaseLanguageModel
 from PIL.Image import Image
 from langflow.utils.logger import logger
+from langflow.chat.config import ChatConfig
 
 
 def load_file_into_dict(file_path: str) -> dict:
@@ -49,9 +51,9 @@ def try_setting_streaming_options(langchain_object, websocket):
 
     if isinstance(llm, BaseLanguageModel):
         if hasattr(llm, "streaming") and isinstance(llm.streaming, bool):
-            llm.streaming = True
+            llm.streaming = ChatConfig.streaming
         elif hasattr(llm, "stream") and isinstance(llm.stream, bool):
-            llm.stream = True
+            llm.stream = ChatConfig.streaming
 
     return langchain_object
 

src/backend/langflow/main.py

@@ -1,5 +1,9 @@
+from pathlib import Path
+from typing import Optional
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
 
 from langflow.api import router
 from langflow.database.base import create_db_and_tables
@@ -12,12 +16,12 @@ template_node = {
             "placeholder": "",
             "show": True,
             "multiline": True,
-            "value": "\ndef my_user_python_function(text: str) -> str:\n    \"\"\"This is a default python function that returns the input text\"\"\"\n    return text.upper()\n",
+            "value": '\ndef my_user_python_function(text: str) -> str:\n    """This is a default python function that returns the input text"""\n    return text.upper()\n',
             "password": False,
             "name": "code",
             "advanced": False,
             "type": "code",
-            "list": False
+            "list": False,
         },
         "lc_kwargs": {
             "required": False,
@@ -28,7 +32,7 @@ template_node = {
             "name": "lc_kwargs",
             "advanced": True,
             "type": "code",
-            "list": False
+            "list": False,
         },
         "verbose": {
             "required": False,
@@ -40,7 +44,7 @@ template_node = {
             "name": "verbose",
             "advanced": False,
             "type": "bool",
-            "list": False
+            "list": False,
         },
         "callbacks": {
             "required": False,
@@ -51,7 +55,7 @@ template_node = {
             "name": "callbacks",
             "advanced": False,
             "type": "langchain.callbacks.base.BaseCallbackHandler",
-            "list": True
+            "list": True,
         },
         "tags": {
             "required": False,
@@ -62,7 +66,7 @@ template_node = {
             "name": "tags",
             "advanced": False,
             "type": "str",
-            "list": True
+            "list": True,
         },
         "client": {
             "required": False,
@@ -73,7 +77,7 @@ template_node = {
             "name": "client",
             "advanced": False,
             "type": "Any",
-            "list": False
+            "list": False,
         },
         "model_name": {
             "required": False,
@@ -90,12 +94,12 @@ template_node = {
                 "gpt-4-0613",
                 "gpt-4-32k-0613",
                 "gpt-4",
-                "gpt-4-32k"
+                "gpt-4-32k",
             ],
             "name": "model_name",
             "advanced": False,
             "type": "str",
-            "list": True
+            "list": True,
         },
         "temperature": {
             "required": False,
@@ -107,7 +111,7 @@ template_node = {
             "name": "temperature",
             "advanced": False,
             "type": "float",
-            "list": False
+            "list": False,
         },
         "model_kwargs": {
             "required": False,
@@ -118,7 +122,7 @@ template_node = {
             "name": "model_kwargs",
             "advanced": True,
             "type": "code",
-            "list": False
+            "list": False,
         },
         "openai_api_key": {
             "required": False,
@@ -131,7 +135,7 @@ template_node = {
             "display_name": "OpenAI API Key",
             "advanced": False,
             "type": "str",
-            "list": False
+            "list": False,
         },
         "openai_api_base": {
             "required": False,
@@ -143,7 +147,7 @@ template_node = {
             "display_name": "OpenAI API Base",
             "advanced": False,
             "type": "str",
-            "list": False
+            "list": False,
         },
         "openai_organization": {
             "required": False,
@@ -155,7 +159,7 @@ template_node = {
             "display_name": "OpenAI Organization",
             "advanced": False,
             "type": "str",
-            "list": False
+            "list": False,
         },
         "openai_proxy": {
             "required": False,
@@ -167,7 +171,7 @@ template_node = {
             "display_name": "OpenAI Proxy",
             "advanced": False,
             "type": "str",
-            "list": False
+            "list": False,
         },
         "request_timeout": {
             "required": False,
@@ -178,7 +182,7 @@ template_node = {
             "name": "request_timeout",
             "advanced": False,
             "type": "float",
-            "list": False
+            "list": False,
         },
         "max_retries": {
             "required": False,
@@ -190,7 +194,7 @@ template_node = {
             "name": "max_retries",
             "advanced": False,
             "type": "int",
-            "list": False
+            "list": False,
         },
         "streaming": {
             "required": False,
@@ -202,7 +206,7 @@ template_node = {
             "name": "streaming",
             "advanced": False,
             "type": "bool",
-            "list": False
+            "list": False,
         },
         "n": {
             "required": False,
@@ -214,7 +218,7 @@ template_node = {
             "name": "n",
             "advanced": False,
             "type": "int",
-            "list": False
+            "list": False,
         },
         "max_tokens": {
             "required": False,
@@ -225,17 +229,17 @@ template_node = {
             "name": "max_tokens",
             "advanced": False,
             "type": "int",
-            "list": False
+            "list": False,
         },
-        "_type": "ChatOpenAI"
+        "_type": "ChatOpenAI",
     },
     "base_classes": [
         "BaseChatModel",
         "Serializable",
         "BaseLanguageModel",
-        "ChatOpenAI"
+        "ChatOpenAI",
     ],
-    "description": "Wrapper around OpenAI Chat large language models."
+    "description": "Wrapper around OpenAI Chat large language models.",
 }
 
 
@@ -270,6 +274,42 @@ def create_app():
     return app
 
 
+def setup_static_files(app: FastAPI, static_files_dir: Path):
+    """
+    Setup the static files directory.
+    Args:
+        app (FastAPI): FastAPI app.
+        path (str): Path to the static files directory.
+    """
+    app.mount(
+        "/",
+        StaticFiles(directory=static_files_dir, html=True),
+        name="static",
+    )
+
+    @app.exception_handler(404)
+    async def custom_404_handler(request, __):
+        path = static_files_dir / "index.html"
+
+        if not path.exists():
+            raise RuntimeError(f"File at path {path} does not exist.")
+        return FileResponse(path)
+
+
+# app = create_app()
+# setup_static_files(app, static_files_dir)
+def setup_app(static_files_dir: Optional[Path]) -> FastAPI:
+    """Setup the FastAPI app."""
+    # get the directory of the current file
+    if not static_files_dir:
+        frontend_path = Path(__file__).parent
+        static_files_dir = frontend_path / "frontend"
+
+    app = create_app()
+    setup_static_files(app, static_files_dir)
+    return app
+
+
 app = create_app()
 
 

src/backend/langflow/processing/base.py

@@ -40,5 +40,6 @@ async def get_result_and_steps(langchain_object, inputs: dict, **kwargs):
         )
         thought = format_actions(intermediate_steps) if intermediate_steps else ""
     except Exception as exc:
+        logger.exception(exc)
         raise ValueError(f"Error: {str(exc)}") from exc
     return result, thought

src/backend/langflow/processing/process.py

@@ -115,6 +115,10 @@ def process_graph_cached(data_graph: Dict[str, Any], inputs: Optional[dict] = No
     elif isinstance(langchain_object, VectorStore):
         class_name = langchain_object.__class__.__name__
         result = {"message": f"Processed {class_name} successfully"}
+    else:
+        raise ValueError(
+            f"Unknown langchain_object type: {type(langchain_object).__name__}"
+        )
     return result
 
 

src/backend/langflow/settings.py

@@ -1,30 +1,42 @@
 import os
-from typing import List
 
 import yaml
 from pydantic import BaseSettings, root_validator
+from langflow.utils.logger import logger
 
 
 class Settings(BaseSettings):
-    chains: List[str] = []
-    agents: List[str] = []
-    prompts: List[str] = []
-    llms: List[str] = []
-    tools: List[str] = []
-    memories: List[str] = []
-    embeddings: List[str] = []
-    vectorstores: List[str] = []
-    documentloaders: List[str] = []
-    wrappers: List[str] = []
-    toolkits: List[str] = []
-    textsplitters: List[str] = []
-    utilities: List[str] = []
-    output_parsers: List[str] = []
+    chains: dict = {}
+    agents: dict = {}
+    prompts: dict = {}
+    llms: dict = {}
+    tools: dict = {}
+    memories: dict = {}
+    embeddings: dict = {}
+    vectorstores: dict = {}
+    documentloaders: dict = {}
+    wrappers: dict = {}
+    retrievers: dict = {}
+    toolkits: dict = {}
+    textsplitters: dict = {}
+    utilities: dict = {}
+    output_parsers: dict = {}
     dev: bool = False
-    database_url: str = "sqlite:///./langflow.db"
+    database_url: str
     cache: str = "InMemoryCache"
     remove_api_keys: bool = False
 
+    @root_validator(pre=True)
+    def set_database_url(cls, values):
+        if "database_url" not in values:
+            logger.debug("No database_url provided, trying DATABASE_URL env variable")
+            if database_url := os.getenv("DATABASE_URL"):
+                values["database_url"] = database_url
+            else:
+                logger.debug("No DATABASE_URL env variable, using sqlite database")
+                values["database_url"] = "sqlite:///./langflow.db"
+        return values
+
     class Config:
         validate_assignment = True
         extra = "ignore"
@@ -39,20 +51,21 @@ class Settings(BaseSettings):
 
     def update_from_yaml(self, file_path: str, dev: bool = False):
         new_settings = load_settings_from_yaml(file_path)
-        self.chains = new_settings.chains or []
-        self.agents = new_settings.agents or []
-        self.prompts = new_settings.prompts or []
-        self.llms = new_settings.llms or []
-        self.tools = new_settings.tools or []
-        self.memories = new_settings.memories or []
-        self.wrappers = new_settings.wrappers or []
-        self.toolkits = new_settings.toolkits or []
-        self.textsplitters = new_settings.textsplitters or []
-        self.utilities = new_settings.utilities or []
-        self.embeddings = new_settings.embeddings or []
-        self.vectorstores = new_settings.vectorstores or []
-        self.documentloaders = new_settings.documentloaders or []
-        self.output_parsers = new_settings.output_parsers or []
+        self.chains = new_settings.chains or {}
+        self.agents = new_settings.agents or {}
+        self.prompts = new_settings.prompts or {}
+        self.llms = new_settings.llms or {}
+        self.tools = new_settings.tools or {}
+        self.memories = new_settings.memories or {}
+        self.wrappers = new_settings.wrappers or {}
+        self.toolkits = new_settings.toolkits or {}
+        self.textsplitters = new_settings.textsplitters or {}
+        self.utilities = new_settings.utilities or {}
+        self.embeddings = new_settings.embeddings or {}
+        self.vectorstores = new_settings.vectorstores or {}
+        self.documentloaders = new_settings.documentloaders or {}
+        self.retrievers = new_settings.retrievers or {}
+        self.output_parsers = new_settings.output_parsers or {}
         self.dev = dev
 
     def update_settings(self, **kwargs):

src/backend/langflow/template/field/base.py

@@ -22,6 +22,7 @@ class TemplateFieldCreator(BaseModel, ABC):
     display_name: Optional[str] = None
     advanced: bool = False
     input_types: list[str] = []
+    info: Optional[str] = ""
 
     def to_dict(self):
         result = self.dict()

src/backend/langflow/template/frontend_node/base.py

@@ -1,8 +1,10 @@
+from collections import defaultdict
 import re
 from typing import List, Optional
 
-from pydantic import BaseModel
+from pydantic import BaseModel, Field
 
+from langflow.template.frontend_node.formatter import field_formatters
 from langflow.template.frontend_node.constants import FORCE_SHOW_FIELDS
 from langflow.template.field.base import TemplateField
 from langflow.template.template.base import Template
@@ -11,14 +13,44 @@ from langflow.utils import constants
 CLASSES_TO_REMOVE = ["Serializable", "BaseModel", "object"]
 
 
+class FieldFormatters(BaseModel):
+    formatters = {
+        "openai_api_key": field_formatters.OpenAIAPIKeyFormatter(),
+    }
+    base_formatters = {
+        "kwargs": field_formatters.KwargsFormatter(),
+        "optional": field_formatters.RemoveOptionalFormatter(),
+        "list": field_formatters.ListTypeFormatter(),
+        "dict": field_formatters.DictTypeFormatter(),
+        "union": field_formatters.UnionTypeFormatter(),
+        "multiline": field_formatters.MultilineFieldFormatter(),
+        "show": field_formatters.ShowFieldFormatter(),
+        "password": field_formatters.PasswordFieldFormatter(),
+        "default": field_formatters.DefaultValueFormatter(),
+        "headers": field_formatters.HeadersDefaultValueFormatter(),
+        "dict_code_file": field_formatters.DictCodeFileFormatter(),
+        "model_fields": field_formatters.ModelSpecificFieldFormatter(),
+    }
+
+    def format(self, field: TemplateField, name: Optional[str] = None) -> None:
+        for key, formatter in self.base_formatters.items():
+            formatter.format(field, name)
+
+        for key, formatter in self.formatters.items():
+            if key == field.name:
+                formatter.format(field, name)
+
+
 class FrontendNode(BaseModel):
     template: Template
     description: str
     base_classes: List[str]
     name: str = ""
     display_name: str = ""
-    custom_fields: List[str] = []
+    documentation: str = ""
+    custom_fields: defaultdict = defaultdict(list)
     output_types: List[str] = []
+    field_formatters: FieldFormatters = Field(default_factory=FieldFormatters)
 
     def process_base_classes(self) -> None:
         """Removes unwanted base classes from the list of base classes."""
@@ -28,7 +60,18 @@ class FrontendNode(BaseModel):
             if base_class not in CLASSES_TO_REMOVE
         ]
 
+    # field formatters is an instance attribute but it is not used in the class
+    # so we need to create a method to get it
+    @staticmethod
+    def get_field_formatters() -> FieldFormatters:
+        return FieldFormatters()
+
+    def set_documentation(self, documentation: str) -> None:
+        """Sets the documentation of the frontend node."""
+        self.documentation = documentation
+
     def to_dict(self) -> dict:
+        """Returns a dict representation of the frontend node."""
         self.process_base_classes()
         return {
             self.name: {
@@ -38,6 +81,7 @@ class FrontendNode(BaseModel):
                 "display_name": self.display_name or self.name,
                 "custom_fields": self.custom_fields,
                 "output_types": self.output_types,
+                "documentation": self.documentation,
             },
         }
 
@@ -50,33 +94,8 @@ class FrontendNode(BaseModel):
     @staticmethod
     def format_field(field: TemplateField, name: Optional[str] = None) -> None:
         """Formats a given field based on its attributes and value."""
-        SPECIAL_FIELD_HANDLERS = {
-            "allowed_tools": lambda field: "Tool",
-            "max_value_length": lambda field: "int",
-        }
 
-        key = field.name
-        value = field.to_dict()
-        _type = value["type"]
-
-        _type = FrontendNode.remove_optional(_type)
-        _type, is_list = FrontendNode.check_for_list_type(_type)
-        field.is_list = is_list or field.is_list
-        _type = FrontendNode.replace_mapping_with_dict(_type)
-        _type = FrontendNode.handle_union_type(_type)
-
-        field.field_type = FrontendNode.handle_special_field(
-            field, key, _type, SPECIAL_FIELD_HANDLERS
-        )
-        field.field_type = FrontendNode.handle_dict_type(field, _type)
-        field.show = FrontendNode.should_show_field(key, field.required)
-        field.password = FrontendNode.should_be_password(key, field.show)
-        field.multiline = FrontendNode.should_be_multiline(key)
-
-        FrontendNode.replace_default_value(field, value)
-        FrontendNode.handle_specific_field_values(field, key, name)
-        FrontendNode.handle_kwargs_field(field)
-        FrontendNode.handle_api_key_field(field, key)
+        FrontendNode.get_field_formatters().format(field, name)
 
     @staticmethod
     def remove_optional(_type: str) -> str:

src/backend/langflow/template/frontend_node/chains.py

@@ -49,6 +49,10 @@ class ChainFrontendNode(FrontendNode):
     def format_field(field: TemplateField, name: Optional[str] = None) -> None:
         FrontendNode.format_field(field, name)
 
+        if "name" == "RetrievalQA" and field.name == "memory":
+            field.show = False
+            field.required = False
+
         field.advanced = False
         if "key" in field.name:
             field.password = False

src/backend/langflow/template/frontend_node/constants.py

@@ -32,3 +32,29 @@ You are a good listener and you can talk about anything.
 HUMAN_PROMPT = "{input}"
 
 QA_CHAIN_TYPES = ["stuff", "map_reduce", "map_rerank", "refine"]
+
+CTRANSFORMERS_DEFAULT_CONFIG = {
+    "top_k": 40,
+    "top_p": 0.95,
+    "temperature": 0.8,
+    "repetition_penalty": 1.1,
+    "last_n_tokens": 64,
+    "seed": -1,
+    "max_new_tokens": 256,
+    "stop": None,
+    "stream": False,
+    "reset": True,
+    "batch_size": 8,
+    "threads": -1,
+    "context_length": -1,
+    "gpu_layers": 0,
+}
+
+# This variable is used to tell the user
+# that it can be changed to use other APIs
+# like Prem and LocalAI
+OPENAI_API_BASE_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.
+"""

src/backend/langflow/template/frontend_node/documentloaders.py

@@ -124,29 +124,23 @@ class DocumentLoaderFrontNode(FrontendNode):
             "DirectoryLoader",
             "ReadTheDocsLoader",
             "NotionDirectoryLoader",
+            "PyPDFDirectoryLoader",
         }:
             name = "path"
             display_name = "Local directory"
         if name:
-            self.template.add_field(
-                TemplateField(
-                    field_type="str",
-                    required=True,
-                    show=True,
-                    name=name,
-                    value="",
-                    display_name=display_name,
-                )
-            )
             if self.template.type_name in {"DirectoryLoader"}:
+                for field in build_directory_loader_fields():
+                    self.template.add_field(field)
+            else:
                 self.template.add_field(
                     TemplateField(
                         field_type="str",
                         required=True,
                         show=True,
-                        name="glob",
-                        value="**/*.txt",
-                        display_name="glob",
+                        name=name,
+                        value="",
+                        display_name=display_name,
                     )
                 )
             # add a metadata field of type dict
@@ -169,3 +163,101 @@ class DocumentLoaderFrontNode(FrontendNode):
             field.show = True
             field.advanced = False
         field.show = True
+
+
+def build_directory_loader_fields():
+    # if loader_kwargs is None:
+    #         loader_kwargs = {}
+    # self.path = path
+    # self.glob = glob
+    # self.load_hidden = load_hidden
+    # self.loader_cls = loader_cls
+    # self.loader_kwargs = loader_kwargs
+    # self.silent_errors = silent_errors
+    # self.recursive = recursive
+    # self.show_progress = show_progress
+    # self.use_multithreading = use_multithreading
+    # self.max_concurrency = max_concurrency
+    # Based on the above fields, we can build the following fields:
+    # path, glob, load_hidden, silent_errors, recursive, show_progress, use_multithreading, max_concurrency
+    # path
+    path = TemplateField(
+        field_type="str",
+        required=True,
+        show=True,
+        name="path",
+        value="",
+        display_name="Local directory",
+        advanced=False,
+    )
+    # glob
+    glob = TemplateField(
+        field_type="str",
+        required=True,
+        show=True,
+        name="glob",
+        value="**/*.txt",
+        display_name="glob",
+        advanced=False,
+    )
+    # load_hidden
+    load_hidden = TemplateField(
+        field_type="bool",
+        required=False,
+        show=True,
+        name="load_hidden",
+        value="False",
+        display_name="Load hidden files",
+        advanced=True,
+    )
+    # silent_errors
+    silent_errors = TemplateField(
+        field_type="bool",
+        required=False,
+        show=True,
+        name="silent_errors",
+        value="False",
+        display_name="Silent errors",
+        advanced=True,
+    )
+    # recursive
+    recursive = TemplateField(
+        field_type="bool",
+        required=False,
+        show=True,
+        name="recursive",
+        value="True",
+        display_name="Recursive",
+        advanced=True,
+    )
+
+    # use_multithreading
+    use_multithreading = TemplateField(
+        field_type="bool",
+        required=False,
+        show=True,
+        name="use_multithreading",
+        value="True",
+        display_name="Use multithreading",
+        advanced=True,
+    )
+    # max_concurrency
+    max_concurrency = TemplateField(
+        field_type="int",
+        required=False,
+        show=True,
+        name="max_concurrency",
+        value=10,
+        display_name="Max concurrency",
+        advanced=True,
+    )
+
+    return (
+        path,
+        glob,
+        load_hidden,
+        silent_errors,
+        recursive,
+        use_multithreading,
+        max_concurrency,
+    )

src/backend/langflow/template/frontend_node/formatter/base.py

@@ -0,0 +1,10 @@
+from abc import ABC, abstractmethod
+from typing import Optional
+
+from langflow.template.field.base import TemplateField
+
+
+class FieldFormatter(ABC):
+    @abstractmethod
+    def format(self, field: TemplateField, name: Optional[str]) -> None:
+        pass

src/backend/langflow/template/frontend_node/formatter/field_formatters.py

@@ -0,0 +1,162 @@
+from typing import Optional
+from langflow.template.field.base import TemplateField
+from langflow.template.frontend_node.constants import FORCE_SHOW_FIELDS
+from langflow.template.frontend_node.formatter.base import FieldFormatter
+import re
+
+from langflow.utils.constants import (
+    ANTHROPIC_MODELS,
+    CHAT_OPENAI_MODELS,
+    OPENAI_MODELS,
+)
+
+
+class OpenAIAPIKeyFormatter(FieldFormatter):
+    def format(self, field: TemplateField, name: Optional[str] = None) -> None:
+        if "api_key" in field.name and "OpenAI" in str(name):
+            field.display_name = "OpenAI API Key"
+            field.required = False
+            if field.value is None:
+                field.value = ""
+
+
+class ModelSpecificFieldFormatter(FieldFormatter):
+    MODEL_DICT = {
+        "OpenAI": OPENAI_MODELS,
+        "ChatOpenAI": CHAT_OPENAI_MODELS,
+        "Anthropic": ANTHROPIC_MODELS,
+        "ChatAnthropic": ANTHROPIC_MODELS,
+    }
+
+    def format(self, field: TemplateField, name: Optional[str] = None) -> None:
+        if name in self.MODEL_DICT and field.name == "model_name":
+            field.options = self.MODEL_DICT[name]
+            field.is_list = True
+
+
+class KwargsFormatter(FieldFormatter):
+    def format(self, field: TemplateField, name: Optional[str] = None) -> None:
+        if "kwargs" in field.name.lower():
+            field.advanced = True
+            field.required = False
+            field.show = False
+
+
+class APIKeyFormatter(FieldFormatter):
+    def format(self, field: TemplateField, name: Optional[str] = None) -> None:
+        if "api" in field.name.lower() and "key" in field.name.lower():
+            field.required = False
+            field.advanced = False
+
+            field.display_name = field.name.replace("_", " ").title()
+            field.display_name = field.display_name.replace("Api", "API")
+
+
+class RemoveOptionalFormatter(FieldFormatter):
+    def format(self, field: TemplateField, name: Optional[str] = None) -> None:
+        _type = field.field_type
+        field.field_type = re.sub(r"Optional\[(.*)\]", r"\1", _type)
+
+
+class ListTypeFormatter(FieldFormatter):
+    def format(self, field: TemplateField, name: Optional[str] = None) -> None:
+        _type = field.field_type
+        is_list = "List" in _type or "Sequence" in _type
+        if is_list:
+            _type = re.sub(r"(List|Sequence)\[(.*)\]", r"\2", _type)
+            field.is_list = True
+        field.field_type = _type
+
+
+class DictTypeFormatter(FieldFormatter):
+    def format(self, field: TemplateField, name: Optional[str] = None) -> None:
+        _type = field.field_type
+        _type = _type.replace("Mapping", "dict")
+        field.field_type = _type
+
+
+class UnionTypeFormatter(FieldFormatter):
+    def format(self, field: TemplateField, name: Optional[str] = None) -> None:
+        _type = field.field_type
+        if "Union" in _type:
+            _type = _type.replace("Union[", "")[:-1]
+            _type = _type.split(",")[0]
+            _type = _type.replace("]", "").replace("[", "")
+        field.field_type = _type
+
+
+class SpecialFieldFormatter(FieldFormatter):
+    SPECIAL_FIELD_HANDLERS = {
+        "allowed_tools": lambda field: "Tool",
+        "max_value_length": lambda field: "int",
+    }
+
+    def format(self, field: TemplateField, name: Optional[str] = None) -> None:
+        handler = self.SPECIAL_FIELD_HANDLERS.get(field.name)
+        field.field_type = handler(field) if handler else field.field_type
+
+
+class ShowFieldFormatter(FieldFormatter):
+    def format(self, field: TemplateField, name: Optional[str] = None) -> None:
+        key = field.name
+        required = field.required
+        field.show = (
+            (required and key not in ["input_variables"])
+            or key in FORCE_SHOW_FIELDS
+            or "api" in key
+            or ("key" in key and "input" not in key and "output" not in key)
+        )
+
+
+class PasswordFieldFormatter(FieldFormatter):
+    def format(self, field: TemplateField, name: Optional[str] = None) -> None:
+        key = field.name
+        show = field.show
+        if (
+            any(text in key.lower() for text in {"password", "token", "api", "key"})
+            and show
+        ):
+            field.password = True
+
+
+class MultilineFieldFormatter(FieldFormatter):
+    def format(self, field: TemplateField, name: Optional[str] = None) -> None:
+        key = field.name
+        if key in {
+            "suffix",
+            "prefix",
+            "template",
+            "examples",
+            "code",
+            "headers",
+            "description",
+        }:
+            field.multiline = True
+
+
+class DefaultValueFormatter(FieldFormatter):
+    def format(self, field: TemplateField, name: Optional[str] = None) -> None:
+        value = field.to_dict()
+        if "default" in value:
+            field.value = value["default"]
+
+
+class HeadersDefaultValueFormatter(FieldFormatter):
+    def format(self, field: TemplateField, name: Optional[str] = None) -> None:
+        key = field.name
+        if key == "headers":
+            field.value = """{'Authorization': 'Bearer <token>'}"""
+
+
+class DictCodeFileFormatter(FieldFormatter):
+    def format(self, field: TemplateField, name: Optional[str] = None) -> None:
+        key = field.name
+        value = field.to_dict()
+        _type = value["type"]
+        if "dict" in _type.lower():
+            if key == "dict_":
+                field.field_type = "file"
+                field.suffixes = [".json", ".yaml", ".yml"]
+                field.file_types = ["json", "yaml", "yml"]
+            else:
+                field.field_type = "code"

src/backend/langflow/template/frontend_node/llms.py

@@ -1,10 +1,56 @@
+import json
 from typing import Optional
 
 from langflow.template.field.base import TemplateField
 from langflow.template.frontend_node.base import FrontendNode
+from langflow.template.frontend_node.constants import CTRANSFORMERS_DEFAULT_CONFIG
+from langflow.template.frontend_node.constants import OPENAI_API_BASE_INFO
 
 
 class LLMFrontendNode(FrontendNode):
+    def add_extra_fields(self) -> None:
+        if "VertexAI" in self.template.type_name:
+            # Add credentials field which should of type file.
+            self.template.add_field(
+                TemplateField(
+                    field_type="file",
+                    required=False,
+                    show=True,
+                    name="credentials",
+                    value="",
+                    suffixes=[".json"],
+                    fileTypes=["json"],
+                )
+            )
+
+    @staticmethod
+    def format_vertex_field(field: TemplateField, name: str):
+        if "VertexAI" in name:
+            advanced_fields = [
+                "tuned_model_name",
+                "verbose",
+                "top_p",
+                "top_k",
+                "max_output_tokens",
+            ]
+            if field.name in advanced_fields:
+                field.advanced = True
+            show_fields = [
+                "tuned_model_name",
+                "verbose",
+                "project",
+                "location",
+                "credentials",
+                "max_output_tokens",
+                "model_name",
+                "temperature",
+                "top_p",
+                "top_k",
+            ]
+
+            if field.name in show_fields:
+                field.show = True
+
     @staticmethod
     def format_openai_field(field: TemplateField):
         if "openai" in field.name.lower():
@@ -15,6 +61,13 @@ class LLMFrontendNode(FrontendNode):
         if "key" not in field.name.lower() and "token" not in field.name.lower():
             field.password = False
 
+        if field.name == "openai_api_base":
+            field.info = OPENAI_API_BASE_INFO
+
+    def add_extra_base_classes(self) -> None:
+        if "BaseLLM" not in self.base_classes:
+            self.base_classes.append("BaseLLM")
+
     @staticmethod
     def format_azure_field(field: TemplateField):
         if field.name == "model_name":
@@ -31,6 +84,13 @@ class LLMFrontendNode(FrontendNode):
         field.show = True
         field.advanced = not field.required
 
+    @staticmethod
+    def format_ctransformers_field(field: TemplateField):
+        if field.name == "config":
+            field.show = True
+            field.advanced = True
+            field.value = json.dumps(CTRANSFORMERS_DEFAULT_CONFIG, indent=2)
+
     @staticmethod
     def format_field(field: TemplateField, name: Optional[str] = None) -> None:
         display_names_dict = {
@@ -38,10 +98,13 @@ class LLMFrontendNode(FrontendNode):
         }
         FrontendNode.format_field(field, name)
         LLMFrontendNode.format_openai_field(field)
+        LLMFrontendNode.format_ctransformers_field(field)
         if name and "azure" in name.lower():
             LLMFrontendNode.format_azure_field(field)
         if name and "llama" in name.lower():
             LLMFrontendNode.format_llama_field(field)
+        if name and "vertex" in name.lower():
+            LLMFrontendNode.format_vertex_field(field, name)
         SHOW_FIELDS = ["repo_id"]
         if field.name in SHOW_FIELDS:
             field.show = True
@@ -77,6 +140,17 @@ class LLMFrontendNode(FrontendNode):
             "model_file",
             "model_type",
             "deployment_name",
+            "credentials",
         ]:
             field.advanced = False
             field.show = True
+        if field.name == "credentials":
+            field.field_type = "file"
+        if name == "VertexAI" and field.name not in [
+            "callbacks",
+            "client",
+            "stop",
+            "tags",
+            "cache",
+        ]:
+            field.show = True

src/backend/langflow/template/frontend_node/memories.py

@@ -2,11 +2,19 @@ from typing import Optional
 
 from langflow.template.field.base import TemplateField
 from langflow.template.frontend_node.base import FrontendNode
+from langflow.template.template.base import Template
+from langchain.memory.chat_message_histories.postgres import DEFAULT_CONNECTION_STRING
 
 
 class MemoryFrontendNode(FrontendNode):
     #! Needs testing
     def add_extra_fields(self) -> None:
+        # chat history should have another way to add common field?
+        # prevent adding incorect field in ChatMessageHistory
+        base_message_classes = ["BaseEntityStore", "BaseChatMessageHistory"]
+        if any(base_class in self.base_classes for base_class in base_message_classes):
+            return
+
         # add return_messages field
         self.template.add_field(
             TemplateField(
@@ -29,16 +37,17 @@ class MemoryFrontendNode(FrontendNode):
                 value="",
             )
         )
-        self.template.add_field(
-            TemplateField(
-                field_type="str",
-                required=False,
-                show=True,
-                name="output_key",
-                advanced=True,
-                value="",
+        if self.template.type_name not in {"VectorStoreRetrieverMemory"}:
+            self.template.add_field(
+                TemplateField(
+                    field_type="str",
+                    required=False,
+                    show=True,
+                    name="output_key",
+                    advanced=True,
+                    value="",
+                )
             )
-        )
 
     @staticmethod
     def format_field(field: TemplateField, name: Optional[str] = None) -> None:
@@ -64,3 +73,50 @@ class MemoryFrontendNode(FrontendNode):
             field.value = ""
         if field.name == "memory_key":
             field.value = "chat_history"
+        if field.name == "chat_memory":
+            field.show = True
+            field.advanced = False
+            field.required = False
+        if field.name == "url":
+            field.show = True
+        if field.name == "entity_store":
+            field.show = True
+        if name == "SQLiteEntityStore":
+            field.show = True
+
+
+class PostgresChatMessageHistoryFrontendNode(MemoryFrontendNode):
+    name: str = "PostgresChatMessageHistory"
+    template: Template = Template(
+        type_name="PostgresChatMessageHistory",
+        fields=[
+            TemplateField(
+                field_type="str",
+                required=True,
+                placeholder="",
+                is_list=False,
+                show=True,
+                multiline=False,
+                name="session_id",
+            ),
+            TemplateField(
+                field_type="str",
+                required=True,
+                show=True,
+                name="connection_string",
+                value=DEFAULT_CONNECTION_STRING,
+            ),
+            TemplateField(
+                field_type="str",
+                required=True,
+                placeholder="",
+                is_list=False,
+                show=True,
+                multiline=False,
+                value="message_store",
+                name="table_name",
+            ),
+        ],
+    )
+    description: str = "Memory store with Postgres"
+    base_classes: list[str] = ["PostgresChatMessageHistory", "BaseChatMessageHistory"]

src/backend/langflow/template/frontend_node/retrievers.py

@@ -0,0 +1,15 @@
+from typing import Optional
+
+from langflow.template.field.base import TemplateField
+from langflow.template.frontend_node.base import FrontendNode
+
+
+class RetrieverFrontendNode(FrontendNode):
+    @staticmethod
+    def format_field(field: TemplateField, name: Optional[str] = None) -> None:
+        FrontendNode.format_field(field, name)
+        # Define common field attributes
+        field.show = True
+        if field.name == "parser_key":
+            field.display_name = "Parser Key"
+            field.password = False

src/backend/langflow/template/frontend_node/textsplitters.py

@@ -1,5 +1,6 @@
 from langflow.template.field.base import TemplateField
 from langflow.template.frontend_node.base import FrontendNode
+from langchain.text_splitter import Language
 
 
 class TextSplittersFrontendNode(FrontendNode):
@@ -21,6 +22,24 @@ class TextSplittersFrontendNode(FrontendNode):
             name = "separator"
         elif self.template.type_name == "RecursiveCharacterTextSplitter":
             name = "separators"
+            # Add a field for type of separator
+            # which will have Text or any value from the
+            # Language enum
+            options = [x.value for x in Language] + ["Text"]
+            options.sort()
+            self.template.add_field(
+                TemplateField(
+                    field_type="str",
+                    required=True,
+                    show=True,
+                    name="separator_type",
+                    advanced=False,
+                    is_list=True,
+                    options=options,
+                    value="Text",
+                    display_name="Separator Type",
+                )
+            )
         self.template.add_field(
             TemplateField(
                 field_type="str",

src/backend/langflow/template/frontend_node/vectorstores.py

@@ -51,7 +51,7 @@ class VectorStoreFrontendNode(FrontendNode):
                 required=False,
                 show=True,
                 advanced=False,
-                value=True,
+                value=False,
                 display_name="Persist",
             )
             extra_fields.append(extra_field)
@@ -200,7 +200,7 @@ class VectorStoreFrontendNode(FrontendNode):
                 self.template.add_field(field)
 
     def add_extra_base_classes(self) -> None:
-        self.base_classes.append("BaseRetriever")
+        self.base_classes.extend(("BaseRetriever", "VectorStoreRetriever"))
 
     @staticmethod
     def format_field(field: TemplateField, name: Optional[str] = None) -> None:

src/backend/langflow/utils/util.py

@@ -165,6 +165,7 @@ def build_template_from_method(
                         "required": param.default == param.empty,
                     }
                     for name, param in params.items()
+                    if name not in ["self", "kwargs", "args"]
                 },
             }
 
@@ -233,6 +234,9 @@ def format_dict(d, name: Optional[str] = None):
 
         _type = value["type"]
 
+        if not isinstance(_type, str):
+            _type = _type.__name__
+
         # Remove 'Optional' wrapper
         if "Optional" in _type:
             _type = _type.replace("Optional[", "")[:-1]

src/frontend/package-lock.json

@@ -17,6 +17,7 @@
         "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-dialog": "^1.0.4",
         "@radix-ui/react-dropdown-menu": "^2.0.5",
+        "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-menubar": "^1.0.3",
         "@radix-ui/react-progress": "^1.0.3",
@@ -28,6 +29,7 @@
         "@tabler/icons-react": "^2.18.0",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/line-clamp": "^0.4.4",
+        "accordion": "^3.0.2",
         "ace-builds": "^1.16.0",
         "add": "^2.0.6",
         "ansi-to-html": "^0.7.2",
@@ -35,6 +37,7 @@
         "base64-js": "^1.5.1",
         "class-variance-authority": "^0.6.0",
         "clsx": "^1.2.1",
+        "dompurify": "^3.0.3",
         "esbuild": "^0.17.18",
         "lodash": "^4.17.21",
         "lucide-react": "^0.233.0",
@@ -54,7 +57,7 @@
         "rehype-mathjax": "^4.0.2",
         "remark-gfm": "^3.0.1",
         "remark-math": "^5.1.1",
-        "shadcn-ui": "^0.1.3",
+        "shadcn-ui": "^0.2.2",
         "short-unique-id": "^4.4.4",
         "switch": "^0.0.0",
         "table": "^6.8.1",
@@ -81,6 +84,8 @@
         "autoprefixer": "^10.4.14",
         "daisyui": "^3.1.1",
         "postcss": "^8.4.23",
+        "prettier": "^2.8.8",
+        "prettier-plugin-tailwindcss": "^0.3.0",
         "tailwindcss": "^3.3.2",
         "typescript": "^5.0.2",
         "vite": "^4.3.9"
@@ -115,6 +120,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@antfu/ni": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/@antfu/ni/-/ni-0.21.4.tgz",
+      "integrity": "sha512-O0Uv9LbLDSoEg26fnMDdDRiPwFJnQSoD4WnrflDwKCJm8Cx/0mV4cGxwBLXan5mGIrpK4Dd7vizf4rQm0QCEAA==",
+      "bin": {
+        "na": "bin/na.mjs",
+        "nci": "bin/nci.mjs",
+        "ni": "bin/ni.mjs",
+        "nlx": "bin/nlx.mjs",
+        "nr": "bin/nr.mjs",
+        "nu": "bin/nu.mjs",
+        "nun": "bin/nun.mjs"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.21.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
@@ -1213,15 +1232,15 @@
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/@mui/system": {
-      "version": "5.13.5",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.5.tgz",
-      "integrity": "sha512-n0gzUxoZ2ZHZgnExkh2Htvo9uW2oakofgPRQrDoa/GQOWyRD0NH9MDszBwOb6AAoXZb+OV5TE7I4LeZ/dzgHYA==",
+      "version": "5.13.6",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.6.tgz",
+      "integrity": "sha512-G3Xr28uLqU3DyF6r2LQkHGw/ku4P0AHzlKVe7FGXOPl7X1u+hoe2xxj8Vdiq/69II/mh9OP21i38yBWgWb7WgQ==",
       "dependencies": {
-        "@babel/runtime": "^7.21.0",
+        "@babel/runtime": "^7.22.5",
         "@mui/private-theming": "^5.13.1",
         "@mui/styled-engine": "^5.13.2",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.13.1",
+        "@mui/utils": "^5.13.6",
         "clsx": "^1.2.1",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
@@ -1281,11 +1300,11 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.13.1",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.1.tgz",
-      "integrity": "sha512-6lXdWwmlUbEU2jUI8blw38Kt+3ly7xkmV9ljzY4Q20WhsJMWiNry9CX8M+TaP/HbtuyR8XKsdMgQW7h7MM3n3A==",
+      "version": "5.13.6",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.6.tgz",
+      "integrity": "sha512-ggNlxl5NPSbp+kNcQLmSig6WVB0Id+4gOxhx644987v4fsji+CSXc+MFYLocFB/x4oHtzCUlSzbVHlJfP/fXoQ==",
       "dependencies": {
-        "@babel/runtime": "^7.21.0",
+        "@babel/runtime": "^7.22.5",
         "@types/prop-types": "^15.7.5",
         "@types/react-is": "^18.2.0",
         "prop-types": "^15.8.1",
@@ -1692,6 +1711,14 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
+      "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x"
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
@@ -3168,6 +3195,39 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@ts-morph/common": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.19.0.tgz",
+      "integrity": "sha512-Unz/WHmd4pGax91rdIKWi51wnVUW11QttMEPpBiBgIewnc9UQIX7UDLxr5vRlqeByXCwhkF6VabSsI0raWcyAQ==",
+      "dependencies": {
+        "fast-glob": "^3.2.12",
+        "minimatch": "^7.4.3",
+        "mkdirp": "^2.1.6",
+        "path-browserify": "^1.0.1"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/minimatch": {
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-7.4.6.tgz",
+      "integrity": "sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz",
@@ -3609,6 +3669,11 @@
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
       "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA=="
     },
+    "node_modules/accordion": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/accordion/-/accordion-3.0.2.tgz",
+      "integrity": "sha512-jbQfFaw+57OBwPt7qSNHuW+RA8smmRwkWRS1Ozh6K/QxUspBgBV/LpdSzlY7vee8TomS6j3D33B9rIeH1qMwsA=="
+    },
     "node_modules/ace-builds": {
       "version": "1.16.0",
       "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.16.0.tgz",
@@ -3776,9 +3841,9 @@
       }
     },
     "node_modules/aria-query": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.2.1.tgz",
-      "integrity": "sha512-7uFg4b+lETFgdaJyETnILsXgnnzVnkHcgRbwbPwevm5x/LmUlt3MjczMRe1zg824iBgXZNRPTBftNYyRSKLp2g==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
       "dev": true,
       "dependencies": {
         "dequal": "^2.0.3"
@@ -4553,6 +4618,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/code-block-writer": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-12.0.0.tgz",
+      "integrity": "sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w=="
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -5071,10 +5141,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.3.tgz",
+      "integrity": "sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ=="
+    },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.438",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.438.tgz",
-      "integrity": "sha512-x94U0FhphEsHsOloCvlsujHCvoir0ZQ73ZAs/QN4PLx98uNvyEU79F75rq1db75Bx/atvuh7KPeuxelh+xfYJw=="
+      "version": "1.4.440",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.440.tgz",
+      "integrity": "sha512-r6dCgNpRhPwiWlxbHzZQ/d9swfPaEJGi8ekqRBwQYaR3WmA5VkqQfBWSDDjuJU1ntO+W9tHx8OHV/96Q8e0dVw=="
     },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
@@ -6807,9 +6882,9 @@
       }
     },
     "node_modules/katex": {
-      "version": "0.16.7",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.7.tgz",
-      "integrity": "sha512-Xk9C6oGKRwJTfqfIbtr0Kes9OSv6IFsuhFGc7tW4urlpMJtuh+7YhzU6YEG9n8gmWKcMAFzkp7nr+r69kV0zrA==",
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.8.tgz",
+      "integrity": "sha512-ftuDnJbcbOckGY11OO+zg3OofESlbR5DRl2cmN8HeWeeFIV7wTXvAOx8kEjZjobhA+9wh2fbKeO6cdcA9Mnovg==",
       "funding": [
         "https://opencollective.com/katex",
         "https://github.com/sponsors/katex"
@@ -6925,9 +7000,9 @@
       }
     },
     "node_modules/log-symbols/node_modules/chalk": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
-      "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
       "engines": {
         "node": "^12.17.0 || ^14.13 || >=16.0.0"
       },
@@ -7900,11 +7975,33 @@
         "node": "*"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/mj-context-menu": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/mj-context-menu/-/mj-context-menu-0.6.1.tgz",
       "integrity": "sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA=="
     },
+    "node_modules/mkdirp": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-2.1.6.tgz",
+      "integrity": "sha512-+hEnITedc8LAtIP9u3HJDFIdcLV2vXP33sqLLIzkv1Db1zO/1OxbvYf0Y1OC/S/Qo5dxHXepofhmxL02PsKe+A==",
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -8173,9 +8270,9 @@
       }
     },
     "node_modules/ora/node_modules/chalk": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
-      "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
       "engines": {
         "node": "^12.17.0 || ^14.13 || >=16.0.0"
       },
@@ -8272,6 +8369,11 @@
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
       "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="
+    },
     "node_modules/path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -8499,6 +8601,95 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.3.0.tgz",
+      "integrity": "sha512-009/Xqdy7UmkcTBpwlq7jsViDqXAYSOMLDrHAdTMlVZOrKfM2o9Ci7EMWTMZ7SkKBFTG04UM9F9iM2+4i6boDA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.17.0"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@shufo/prettier-plugin-blade": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "prettier": ">=2.2.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*",
+        "prettier-plugin-twig-melody": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@shufo/prettier-plugin-blade": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        },
+        "prettier-plugin-twig-melody": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@@ -9348,23 +9539,40 @@
       }
     },
     "node_modules/shadcn-ui": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/shadcn-ui/-/shadcn-ui-0.1.3.tgz",
-      "integrity": "sha512-f6Wa4ZIxsigfOonC3yyJkPb2JXJnuGFyUn1fJJrDUHvIJOydUukcdQsZg7Lp6F6llkmfRjra1dZOo0KpSfdjuQ==",
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/shadcn-ui/-/shadcn-ui-0.2.2.tgz",
+      "integrity": "sha512-T76EeZymSB45Yz63gkYOv9P0Ke+UA9IZenysx+975nyNzXxU7HRBgfwuHiMcrcubtOLrzRVedTLX3lcOMqDeRQ==",
       "dependencies": {
+        "@antfu/ni": "^0.21.4",
         "chalk": "5.2.0",
         "commander": "^10.0.0",
+        "cosmiconfig": "^8.1.3",
+        "diff": "^5.1.0",
         "execa": "^7.0.0",
         "fs-extra": "^11.1.0",
+        "https-proxy-agent": "^6.2.0",
         "node-fetch": "^3.3.0",
         "ora": "^6.1.2",
         "prompts": "^2.4.2",
+        "ts-morph": "^18.0.0",
+        "tsconfig-paths": "^4.2.0",
         "zod": "^3.20.2"
       },
       "bin": {
         "shadcn-ui": "dist/index.js"
       }
     },
+    "node_modules/shadcn-ui/node_modules/agent-base": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
+      "integrity": "sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/shadcn-ui/node_modules/chalk": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
@@ -9384,6 +9592,35 @@
         "node": ">=14"
       }
     },
+    "node_modules/shadcn-ui/node_modules/cosmiconfig": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.2.0.tgz",
+      "integrity": "sha512-3rTMnFJA1tCOPwRxtgF4wd7Ab2qvDbL8jX+3smjIbS4HlZBagTlpERbdN7iAbWlrfxE3M8c27kTwTawQ7st+OQ==",
+      "dependencies": {
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      }
+    },
+    "node_modules/shadcn-ui/node_modules/https-proxy-agent": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-6.2.1.tgz",
+      "integrity": "sha512-ONsE3+yfZF2caH5+bJlcddtWqNI3Gvs5A38+ngvljxaBiRXRswym2c7yf8UAeFpRFKjFNHIFEHqR/OLAWJzyiA==",
+      "dependencies": {
+        "agent-base": "^7.0.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -9637,6 +9874,14 @@
         "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/strip-eof": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
@@ -10012,6 +10257,28 @@
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
+    "node_modules/ts-morph": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-18.0.0.tgz",
+      "integrity": "sha512-Kg5u0mk19PIIe4islUI/HWRvm9bC1lHejK4S0oh1zaZ77TMZAEmQC0sHQYiu2RgCQFZKXz1fMVi/7nOOeirznA==",
+      "dependencies": {
+        "@ts-morph/common": "~0.19.0",
+        "code-block-writer": "^12.0.0"
+      }
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
+      "integrity": "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==",
+      "dependencies": {
+        "json5": "^2.2.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.5.3",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",

src/frontend/package.json

@@ -12,6 +12,7 @@
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-menubar": "^1.0.3",
     "@radix-ui/react-progress": "^1.0.3",
@@ -23,6 +24,7 @@
     "@tabler/icons-react": "^2.18.0",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.4",
+    "accordion": "^3.0.2",
     "ace-builds": "^1.16.0",
     "add": "^2.0.6",
     "ansi-to-html": "^0.7.2",
@@ -30,6 +32,7 @@
     "base64-js": "^1.5.1",
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
+    "dompurify": "^3.0.3",
     "esbuild": "^0.17.18",
     "lodash": "^4.17.21",
     "lucide-react": "^0.233.0",
@@ -49,7 +52,7 @@
     "rehype-mathjax": "^4.0.2",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "shadcn-ui": "^0.1.3",
+    "shadcn-ui": "^0.2.2",
     "short-unique-id": "^4.4.4",
     "switch": "^0.0.0",
     "table": "^6.8.1",
@@ -102,6 +105,8 @@
     "autoprefixer": "^10.4.14",
     "daisyui": "^3.1.1",
     "postcss": "^8.4.23",
+    "prettier": "^2.8.8",
+    "prettier-plugin-tailwindcss": "^0.3.0",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.0.2",
     "vite": "^4.3.9"

src/frontend/prettier.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("prettier-plugin-tailwindcss")],
+};

src/frontend/src/App.tsx

@@ -51,6 +51,13 @@ export default function App() {
   useEffect(() => {
     // If there is an error alert open with data, add it to the alertsList
     if (errorOpen && errorData) {
+      if (
+        alertsList.length > 0 &&
+        JSON.stringify(alertsList[alertsList.length - 1].data) ===
+          JSON.stringify(errorData)
+      ) {
+        return;
+      }
       setErrorOpen(false);
       setAlertsList((old) => {
         let newAlertsList = [
@@ -62,6 +69,13 @@ export default function App() {
     }
     // If there is a notice alert open with data, add it to the alertsList
     else if (noticeOpen && noticeData) {
+      if (
+        alertsList.length > 0 &&
+        JSON.stringify(alertsList[alertsList.length - 1].data) ===
+          JSON.stringify(noticeData)
+      ) {
+        return;
+      }
       setNoticeOpen(false);
       setAlertsList((old) => {
         let newAlertsList = [
@@ -73,6 +87,13 @@ export default function App() {
     }
     // If there is a success alert open with data, add it to the alertsList
     else if (successOpen && successData) {
+      if (
+        alertsList.length > 0 &&
+        JSON.stringify(alertsList[alertsList.length - 1].data) ===
+          JSON.stringify(successData)
+      ) {
+        return;
+      }
       setSuccessOpen(false);
       setAlertsList((old) => {
         let newAlertsList = [
@@ -103,7 +124,7 @@ export default function App() {
 
   return (
     //need parent component with width and height
-    <div className="h-full flex flex-col">
+    <div className="flex h-full flex-col">
       <ErrorBoundary
         onReset={() => {
           window.localStorage.removeItem("tabsData");
@@ -118,7 +139,7 @@ export default function App() {
       </ErrorBoundary>
       <div></div>
       <div
-        className="flex flex-col-reverse fixed bottom-5 left-5"
+        className="fixed bottom-5 left-5 flex flex-col-reverse"
         style={{ zIndex: 999 }}
       >
         {alertsList.map((alert) => (

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -25,7 +25,7 @@ import { nodeColors } from "../../../../utils";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import { PopUpContext } from "../../../../contexts/popUpContext";
 import ToggleShadComponent from "../../../../components/toggleShadComponent";
-import * as _ from "lodash";
+import { Info } from "lucide-react";
 
 export default function ParameterComponent({
   left,
@@ -38,9 +38,11 @@ export default function ParameterComponent({
   name = "",
   required = false,
   optionalHandle = null,
+  info = "",
 }: ParameterComponentType) {
   const ref = useRef(null);
   const refHtml = useRef(null);
+  const infoHtml = useRef(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
   const { closePopUp } = useContext(PopUpContext);
@@ -82,6 +84,18 @@ export default function ParameterComponent({
     });
   };
 
+  useEffect(() => {
+    infoHtml.current = (
+      <div className="h-full w-full break-words">
+        {info.split("\n").map((line, i) => (
+          <p key={i} className="block">
+            {line}
+          </p>
+        ))}
+      </div>
+    );
+  }, [info]);
+
   useEffect(() => {
     const groupedObj = groupByFamily(myData, tooltipTitle, left, data.type);
       
@@ -101,7 +115,7 @@ export default function ParameterComponent({
         >
           {React.createElement(nodeIconsLucide[item.family])}
         </div>
-        <span className="ps-2 text-gray-950">
+        <span className="ps-2 text-foreground">
           {nodeNames[item.family] ?? ""}{" "}
           <span>
             {" "}
@@ -128,12 +142,25 @@ export default function ParameterComponent({
   return (
     <div
       ref={ref}
-      className="mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2 dark:bg-gray-800 dark:text-white"
+      className="mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
     >
       <>
-        <div className={"w-full truncate text-sm " + (left ? "" : "text-end")}>
+        <div
+          className={
+            "w-full truncate text-sm" +
+            (left ? "" : " text-end") +
+            (info !== "" ? " flex items-center" : "")
+          }
+        >
           {title}
-          <span className="text-red-600">{required ? " *" : ""}</span>
+          <span className="text-destructive">{required ? " *" : ""}</span>
+          <div className="">
+            {info !== "" && (
+              <ShadTooltip content={infoHtml.current}>
+                <Info className="relative bottom-0.5 ml-2 h-3 w-3" />
+              </ShadTooltip>
+            )}
+          </div>
         </div>
         {left &&
         (type === "str" ||
@@ -147,11 +174,10 @@ export default function ParameterComponent({
           <></>
         ) : (
           <ShadTooltip
-            class="max-w-[40vw] max-h-[10vh] overflow-auto custom-scroll"
+            style="max-w-[40vw] max-h-[10vh] overflow-auto custom-scroll"
             delayDuration={0}
             content={refHtml.current}
             side={left ? "left" : "right"}
-            open={refHtml?.current?.length > 0}
           >
             <Handle
               type={left ? "target" : "source"}
@@ -162,7 +188,7 @@ export default function ParameterComponent({
               }
               className={classNames(
                 left ? "-ml-0.5 " : "-mr-0.5 ",
-                "h-3 w-3 rounded-full border-2 bg-white dark:bg-gray-800"
+                "h-3 w-3 rounded-full border-2 bg-background"
               )}
               style={{
                 borderColor: color,
@@ -204,7 +230,7 @@ export default function ParameterComponent({
             )}
           </div>
         ) : left === true && type === "bool" ? (
-          <div className="mt-2">
+          <div className="mt-2 w-full">
             <ToggleShadComponent
               disabled={disabled}
               enabled={enabled}
@@ -227,7 +253,7 @@ export default function ParameterComponent({
         ) : left === true &&
           type === "str" &&
           data.node.template[name].options ? (
-          <div className="w-full">
+          <div className="mt-2 w-full">
             <Dropdown
               options={data.node.template[name].options}
               onSelect={handleOnNewValue}
@@ -235,27 +261,31 @@ export default function ParameterComponent({
             ></Dropdown>
           </div>
         ) : left === true && type === "code" ? (
-          <CodeAreaComponent
-            setNodeClass={(nodeClass) => {
-              data.node = nodeClass;
-            }}
-            nodeClass={data.node}
-            disabled={disabled}
-            value={data.node.template[name].value ?? ""}
-            onChange={handleOnNewValue}
-          />
+          <div className="mt-2 w-full">
+            <CodeAreaComponent
+              setNodeClass={(nodeClass) => {
+                data.node = nodeClass;
+              }}
+              nodeClass={data.node}
+              disabled={disabled}
+              value={data.node.template[name].value ?? ""}
+              onChange={handleOnNewValue}
+            />
+          </div>
         ) : left === true && type === "file" ? (
-          <InputFileComponent
-            disabled={disabled}
-            value={data.node.template[name].value ?? ""}
-            onChange={handleOnNewValue}
-            fileTypes={data.node.template[name].fileTypes}
-            suffixes={data.node.template[name].suffixes}
-            onFileChange={(t: string) => {
-              data.node.template[name].file_path = t;
-              save();
-            }}
-          ></InputFileComponent>
+          <div className="mt-2 w-full">
+            <InputFileComponent
+              disabled={disabled}
+              value={data.node.template[name].value ?? ""}
+              onChange={handleOnNewValue}
+              fileTypes={data.node.template[name].fileTypes}
+              suffixes={data.node.template[name].suffixes}
+              onFileChange={(t: string) => {
+                data.node.template[name].file_path = t;
+                save();
+              }}
+            ></InputFileComponent>
+          </div>
         ) : left === true && type === "int" ? (
           <div className="mt-2 w-full">
             <IntComponent
@@ -266,15 +296,18 @@ export default function ParameterComponent({
             />
           </div>
         ) : left === true && type === "prompt" ? (
-          <PromptAreaComponent
-            setNodeClass={(nodeClass) => {
-              data.node = nodeClass;
-            }}
-            nodeClass={data.node}
-            disabled={disabled}
-            value={data.node.template[name].value ?? ""}
-            onChange={handleOnNewValue}
-          />
+          <div className="mt-2 w-full">
+            <PromptAreaComponent
+              field_name={name}
+              setNodeClass={(nodeClass) => {
+                data.node = nodeClass;
+              }}
+              nodeClass={data.node}
+              disabled={disabled}
+              value={data.node.template[name].value ?? ""}
+              onChange={handleOnNewValue}
+            />
+          </div>
         ) : (
           <></>
         )}

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -14,7 +14,6 @@ import NodeModal from "../../modals/NodeModal";
 import Tooltip from "../../components/TooltipComponent";
 import { NodeToolbar } from "reactflow";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
-
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import { useSSE } from "../../contexts/SSEContext";
 
@@ -36,6 +35,7 @@ export default function GenericNode({
   const [validationStatus, setValidationStatus] = useState(null);
   // State for outline color
   const { sseData, isBuilding } = useSSE();
+  const refHtml = useRef(null);
 
   // useEffect(() => {
   //   if (reactFlowInstance) {
@@ -66,7 +66,7 @@ export default function GenericNode({
     deleteNode(data.id);
     return;
   }
-
+  console.log(data);
   useEffect(() => {}, [closePopUp, data.node.template]);
   return (
     <>
@@ -80,13 +80,14 @@ export default function GenericNode({
 
       <div
         className={classNames(
-          selected ? "border border-ring" : "border dark:border-gray-700",
-          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-gray-900"
+          selected ? "border border-ring" : "border",
+          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-background"
         )}
       >
-        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 dark:border-b-gray-700 dark:bg-gray-800 dark:text-white ">
-          <div className="flex w-full items-center gap-2 truncate text-lg">
+        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4  ">
+          <div className="flex w-full items-center truncate">
             <Icon
+              strokeWidth={1.5}
               className="h-10 w-10 rounded p-1"
               style={{
                 color: nodeColors[types[data.type]] ?? nodeColors.unknown,
@@ -97,7 +98,7 @@ export default function GenericNode({
                 delayDuration={1500}
                 content={data.node.display_name}
               >
-                <div className="ml-2 truncate text-gray-800">
+                <div className="ml-2 truncate text-primary">
                   {data.node.display_name}
                 </div>
               </ShadTooltip>
@@ -128,29 +129,29 @@ export default function GenericNode({
                   )
                 }
               >
-                <div className="w-5 h-5 relative top-[3px]">
+                <div className="relative top-[3px] h-5 w-5">
                   <div
                     className={classNames(
                       validationStatus && validationStatus.valid
-                        ? "w-4 h-4 rounded-full bg-green-500 opacity-100"
-                        : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                        ? "w-4 h-4 rounded-full bg-status-red opacity-100"
+                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
+                      "absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       validationStatus && !validationStatus.valid
-                        ? "w-4 h-4 rounded-full  bg-red-500 opacity-100"
-                        : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                        ? "w-4 h-4 rounded-full  bg-status-red opacity-100"
+                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
+                      "absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       !validationStatus || isBuilding
-                        ? "w-4 h-4 rounded-full  bg-yellow-500 opacity-100"
-                        : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                        ? "w-4 h-4 rounded-full  bg-status-yellow opacity-100"
+                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
+                      "absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
                     )}
                   ></div>
                 </div>
@@ -159,7 +160,7 @@ export default function GenericNode({
           </div>
         </div>
 
-        <div className="h-full w-full py-5 text-gray-800">
+        <div className="h-full w-full py-5 text-foreground">
           <div className="w-full px-5 pb-3 text-sm text-muted-foreground">
             {data.node.description}
           </div>
@@ -172,7 +173,7 @@ export default function GenericNode({
                   {/* {idx === 0 ? (
                                 <div
                                     className={classNames(
-                                        "px-5 py-2 mt-2 dark:text-white text-center",
+                                        "px-5 py-2 mt-2 text-center",
                                         Object.keys(data.node.template).filter(
                                             (key) =>
                                                 !key.startsWith("_") &&
@@ -204,6 +205,7 @@ export default function GenericNode({
                           ? toTitleCase(data.node.template[t].name)
                           : toTitleCase(t)
                       }
+                      info={data.node.template[t].info}
                       name={t}
                       tooltipTitle={data.node.template[t].input_types?.join("\n") ?? data.node.template[t].type}
                       required={data.node.template[t].required}
@@ -225,13 +227,13 @@ export default function GenericNode({
             >
               {" "}
             </div>
-            {/* <div className="px-5 py-2 mt-2 dark:text-white text-center">
+            {/* <div className="px-5 py-2 mt-2 text-center">
                   Output
               </div> */}
             <ParameterComponent
               data={data}
               color={nodeColors[types[data.type]] ?? nodeColors.unknown}
-              title={data.node.output_types ? data.node.output_types.join("|") : data.type}
+              title={data.node.output_types && data.node.output_types.length > 0 ? data.node.output_types.join("|") : data.type}
               tooltipTitle={data.node.base_classes.join("\n")}
               id={[data.type, data.id, ...data.node.base_classes].join("|")}
               type={data.node.base_classes.join("|")}

src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx

@@ -25,21 +25,18 @@ export default function SingleAlert({
     >
       {type === "error" ? (
         <div
-          className="flex bg-red-50 dark:bg-red-900 rounded-md p-3 mb-2 mx-2"
+          className="mx-2 mb-2 flex rounded-md bg-error-background p-3"
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
-            <XCircle
-              className="h-5 w-5 text-red-400 dark:text-red-50"
-              aria-hidden="true"
-            />
+            <XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
           </div>
           <div className="ml-3">
-            <h3 className="text-sm break-words font-medium text-red-800 dark:text-white/80">
+            <h3 className="break-words text-sm font-medium text-error-foreground">
               {dropItem.title}
             </h3>
             {dropItem.list ? (
-              <div className="mt-2 text-sm text-red-700 dark:text-red-50">
+              <div className="mt-2 text-sm text-error-foreground">
                 <ul className="list-disc space-y-1 pl-5">
                   {dropItem.list.map((item, idx) => (
                     <li className="break-words" key={idx}>
@@ -62,34 +59,34 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-red-50 dark:bg-transparent p-1.5 text-red-500 dark:text-red-50"
+                className="inline-flex rounded-md p-1.5 text-status-red"
               >
                 <span className="sr-only">Dismiss</span>
-                <X className="h-5 w-5" aria-hidden="true" />
+                <X
+                  className="h-4 w-4 text-error-foreground"
+                  aria-hidden="true"
+                />
               </button>
             </div>
           </div>
         </div>
       ) : type === "notice" ? (
         <div
-          className="flex rounded-md bg-blue-50 dark:bg-blue-900 p-3 mb-2 mx-2"
+          className="mx-2 mb-2 flex rounded-md bg-info-background p-3"
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
-            <Info
-              className="h-5 w-5 text-blue-400 dark:text-blue-50"
-              aria-hidden="true"
-            />
+            <Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-blue-700 dark:text-white/80">
+            <p className="text-sm font-medium text-info-foreground">
               {dropItem.title}
             </p>
-            <p className="mt-3 text-sm md:mt-0 md:ml-6">
+            <p className="mt-3 text-sm md:ml-6 md:mt-0">
               {dropItem.link ? (
                 <Link
                   to={dropItem.link}
-                  className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 dark:hover:text-blue-100 hover:text-ring"
+                  className="whitespace-nowrap font-medium text-info-foreground hover:text-accent-foreground"
                 >
                   Details
                 </Link>
@@ -108,27 +105,30 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-blue-50 dark:bg-transparent p-1.5 text-blue-500 dark:text-blue-50"
+                className="inline-flex rounded-md p-1.5 text-info-foreground"
               >
                 <span className="sr-only">Dismiss</span>
-                <X className="h-5 w-5" aria-hidden="true" />
+                <X
+                  className="h-4 w-4 text-info-foreground"
+                  aria-hidden="true"
+                />
               </button>
             </div>
           </div>
         </div>
       ) : (
         <div
-          className="flex bg-green-50 dark:bg-green-900 p-3 mb-2 mx-2 rounded-md"
+          className="mx-2 mb-2 flex rounded-md bg-success-background p-3"
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
             <CheckCircle2
-              className="h-5 w-5 text-green-400 dark:text-green-50"
+              className="h-5 w-5 text-status-green"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <p className="text-sm font-medium text-green-800 dark:bg-white/80">
+            <p className="text-sm font-medium text-success-foreground">
               {dropItem.title}
             </p>
           </div>
@@ -142,10 +142,13 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-green-50 dark:bg-transparent p-1.5 text-green-500 dark:text-green-50"
+                className="inline-flex rounded-md p-1.5 text-status-green"
               >
                 <span className="sr-only">Dismiss</span>
-                <X className="h-5 w-5" aria-hidden="true" />
+                <X
+                  className="h-4 w-4 text-success-foreground"
+                  aria-hidden="true"
+                />
               </button>
             </div>
           </div>

src/frontend/src/alerts/alertDropDown/index.tsx

@@ -24,29 +24,29 @@ export default function AlertDropdown({}: AlertDropdownType) {
   return (
     <div
       ref={componentRef}
-      className="z-10 py-3 pb-4 px-2 rounded-md bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col"
+      className="z-10 flex h-[500px] w-[400px] flex-col overflow-hidden rounded-md bg-background px-2 py-3 pb-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
     >
-      <div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800 dark:text-gray-200">
+      <div className="text-md flex flex-row justify-between pl-3 font-medium text-foreground">
         Notifications
         <div className="flex gap-3 pr-3 ">
           <button
-            className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
+            className="text-foreground hover:text-status-red"
             onClick={() => {
               closePopUp();
               setTimeout(clearNotificationList, 100);
             }}
           >
-            <Trash2 className="w-[1.1rem] h-[1.1rem]" />
+            <Trash2 className="h-[1.1rem] w-[1.1rem]" />
           </button>
           <button
-            className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
+            className="text-foreground hover:text-status-red"
             onClick={closePopUp}
           >
             <X className="h-5 w-5" />
           </button>
         </div>
       </div>
-      <div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-gray-900 dark:text-gray-300">
+      <div className="text-high-foreground mt-3 flex h-full w-full flex-col overflow-y-scroll scrollbar-hide">
         {notificationList.length !== 0 ? (
           notificationList.map((alertItem, index) => (
             <SingleAlert
@@ -56,7 +56,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
             />
           ))
         ) : (
-          <div className="h-full w-full pb-16 text-gray-500 dark:text-gray-500 flex justify-center items-center">
+          <div className="flex h-full w-full items-center justify-center pb-16 text-ring">
             No new notifications
           </div>
         )}

src/frontend/src/alerts/error/index.tsx

@@ -39,21 +39,18 @@ export default function ErrorAlert({
             removeAlert(id);
           }, 500);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-red-50 dark:bg-red-900 p-4 cursor-pointer"
+        className="mt-6 w-96 cursor-pointer rounded-md bg-error-background  p-4 shadow-xl"
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <XCircle
-              className="h-5 w-5 text-red-400 dark:text-red-50"
-              aria-hidden="true"
-            />
+            <XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
           </div>
           <div className="ml-3">
-            <h3 className="text-sm font-medium text-red-800 dark:text-white/80">
+            <h3 className="text-sm font-medium text-error-foreground">
               {title}
             </h3>
             {list.length !== 0 ? (
-              <div className="mt-2 text-sm text-red-700 dark:text-red-50">
+              <div className="mt-2 text-sm text-error-foreground">
                 <ul className="list-disc space-y-1 pl-5">
                   {list.map((item, index) => (
                     <li key={index}>{item}</li>

src/frontend/src/alerts/notice/index.tsx

@@ -36,22 +36,19 @@ export default function NoticeAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-blue-50 dark:bg-blue-900 p-4"
+        className="mt-6 w-96 rounded-md bg-info-background p-4 shadow-xl"
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <Info
-              className="h-5 w-5 text-blue-400 dark:text-blue-50"
-              aria-hidden="true"
-            />
+            <Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-blue-700 dark:text-white/80">{title}</p>
-            <p className="mt-3 text-sm md:mt-0 md:ml-6">
+            <p className="text-sm text-info-foreground">{title}</p>
+            <p className="mt-3 text-sm md:ml-6 md:mt-0">
               {link !== "" ? (
                 <Link
                   to={link}
-                  className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 hover:dark:text-blue-10 hover:text-ring"
+                  className="whitespace-nowrap font-medium text-info-foreground hover:text-accent-foreground"
                 >
                   Details
                 </Link>

src/frontend/src/alerts/success/index.tsx

@@ -34,17 +34,17 @@ export default function SuccessAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-green-50 dark:bg-green-900 p-4"
+        className="mt-6 w-96 rounded-md bg-success-background p-4 shadow-xl"
       >
         <div className="flex">
           <div className="flex-shrink-0">
             <CheckCircle2
-              className="h-5 w-5 text-green-400 dark:text-green-50"
+              className="h-5 w-5 text-status-green"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <p className="text-sm font-medium text-green-800 dark:text-white/80">
+            <p className="text-sm font-medium text-success-foreground">
               {title}
             </p>
           </div>

src/frontend/src/components/AccordionComponent/index.tsx

@@ -0,0 +1,56 @@
+import { ReactElement, useContext, useEffect, useRef, useState } from "react";
+import {
+  AccordionComponentType,
+  ProgressBarType,
+} from "../../types/components";
+import { Progress } from "../../components/ui/progress";
+import { setInterval } from "timers/promises";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../components/ui/accordion";
+
+export default function AccordionComponent({
+  trigger,
+  children,
+  open = [],
+}: AccordionComponentType) {
+  const [value, setValue] = useState(
+    open.length == 0 ? "" : getOpenAccordion()
+  );
+
+  function getOpenAccordion() {
+    let value = "";
+    open.forEach((el) => {
+      if (el == trigger) {
+        value = trigger;
+      }
+    });
+
+    return value;
+  }
+
+  function handleClick() {
+    value == "" ? setValue(trigger) : setValue("");
+  }
+
+  return (
+    <>
+      <Accordion type="single" value={value} onValueChange={setValue}>
+        <AccordionItem value={trigger} className="border-none">
+          <AccordionTrigger
+            onClick={() => {
+              handleClick();
+            }}
+            className="ml-3"
+          >
+            {trigger}
+          </AccordionTrigger>
+          <AccordionContent>{children}</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </>
+  );
+}

src/frontend/src/components/CrashErrorComponent/index.tsx

@@ -1,11 +1,11 @@
 export default function CrashErrorComponent({ error, resetErrorBoundary }) {
   return (
-    <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 z-50">
-      <div className="bg-white max-w-4xl h-1/3 min-h-fit rounded-lg shadow-lg p-8 text-start flex flex-col justify-evenly">
-        <h1 className="text-red-500 text-3xl mb-4">
+    <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-foreground bg-opacity-50">
+      <div className="flex h-1/3 min-h-fit max-w-4xl flex-col justify-evenly rounded-lg bg-background p-8 text-start shadow-lg">
+        <h1 className="mb-4 text-3xl text-status-red">
           Oops! An unknown error has occurred.
         </h1>
-        <p className="text-gray-700 mb-4 text-xl">
+        <p className="mb-4 text-xl text-foreground">
           Please click the 'Reset Application' button to restore the
           application's state. If the error persists, please create an issue on
           our GitHub page. We apologize for any inconvenience this may have
@@ -14,7 +14,7 @@ export default function CrashErrorComponent({ error, resetErrorBoundary }) {
         <div className="flex justify-center">
           <button
             onClick={resetErrorBoundary}
-            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-4"
+            className="mr-4 rounded bg-primary px-4 py-2 font-bold text-background hover:bg-ring"
           >
             Reset Application
           </button>
@@ -22,7 +22,7 @@ export default function CrashErrorComponent({ error, resetErrorBoundary }) {
             href="https://github.com/logspace-ai/langflow/issues/new"
             target="_blank"
             rel="noopener noreferrer"
-            className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
+            className="rounded bg-status-red px-4 py-2 font-bold text-background hover:bg-error-foreground"
           >
             Create Issue
           </a>

src/frontend/src/components/EditFlowSettingsComponent/index.tsx

@@ -47,7 +47,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
         <div className="flex justify-between">
           <span className="font-medium">Name</span>{" "}
           {isMaxLength && (
-            <span className="text-red-500 animate-pulse ml-10">
+            <span className="ml-10 animate-pulse text-status-red">
               Character limit reached
             </span>
           )}
@@ -71,7 +71,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           onChange={handleDescriptionChange}
           value={description ?? ""}
           placeholder="Flow description"
-          className="max-h-[100px] mt-2 font-normal"
+          className="mt-2 max-h-[100px] font-normal"
           rows={3}
         />
       </Label>

src/frontend/src/components/ExtraSidebarComponent/index.tsx

@@ -18,10 +18,10 @@ export default function ExtraSidebar() {
       <aside
         className={` ${
           isStackedOpen ? "w-52" : "w-0 "
-        } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
+        } flex flex-shrink-0 flex-col overflow-hidden border-r  transition-all duration-500`}
       >
-        <div className="w-52 dark:bg-gray-800 border dark:border-gray-700  overflow-y-auto scrollbar-hide h-full flex flex-col items-start bg-white">
-          <div className="flex flex-grow flex-col w-full">
+        <div className="flex h-full  w-52 flex-col items-start overflow-y-auto border bg-background scrollbar-hide">
+          <div className="flex w-full flex-grow flex-col">
             {extraNavigation.options ? (
               <div className="p-4">
                 <nav className="flex-1 space-y-1">
@@ -32,16 +32,16 @@ export default function ExtraSidebar() {
                           to={item.href}
                           className={classNames(
                             item.href.split("/")[2] === current[4]
-                              ? "bg-muted text-gray-900"
-                              : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
-                            "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
+                              ? "bg-muted text-foreground"
+                              : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
+                            "group flex w-full items-center rounded-md py-2 pl-2 text-sm font-medium"
                           )}
                         >
                           <item.icon
                             className={classNames(
                               item.href.split("/")[2] === current[4]
-                                ? "text-gray-500"
-                                : "text-gray-400 group-hover:text-gray-500",
+                                ? "text-ring"
+                                : "text-ring group-hover:text-accent-foreground",
                               "mr-3 flex-shrink-0 h-6 w-6"
                             )}
                           />
@@ -59,22 +59,20 @@ export default function ExtraSidebar() {
                             <Disclosure.Button
                               className={classNames(
                                 item.href.split("/")[2] === current[4]
-                                  ? "bg-muted text-gray-900"
-                                  : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
-                                "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                                  ? "bg-muted text-foreground"
+                                  : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
+                                "group flex w-full items-center rounded-md py-2 pl-2 pr-1 text-left text-sm font-medium focus:outline-none focus:ring-1 focus:ring-ring"
                               )}
                             >
                               <item.icon
-                                className="mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
+                                className="mr-3 h-6 w-6 flex-shrink-0 text-ring group-hover:text-accent-foreground"
                                 aria-hidden="true"
                               />
                               <span className="flex-1">{item.name}</span>
                               <svg
                                 className={classNames(
-                                  open
-                                    ? "text-gray-400 rotate-90"
-                                    : "text-gray-300",
-                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-gray-400"
+                                  open ? "text-ring rotate-90" : "text-ring",
+                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-accent-foreground"
                                 )}
                                 viewBox="0 0 20 20"
                                 aria-hidden="true"
@@ -92,8 +90,8 @@ export default function ExtraSidebar() {
                                   to={subItem.href}
                                   className={classNames(
                                     subItem.href.split("/")[3] === current[5]
-                                      ? "bg-muted text-gray-900"
-                                      : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
+                                      ? "bg-muted text-foreground"
+                                      : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
                                     "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
                                   )}
                                 >

src/frontend/src/components/ReactTooltipComponent/index.tsx

@@ -37,7 +37,7 @@ const TooltipReact: FC<TooltipProps> = ({
         id={selector}
         content={content}
         className={classNames(
-          "!bg-white !text-xs !font-normal !text-gray-700 !shadow-md !opacity-100 z-[9999]",
+          "z-[9999] !bg-white !text-xs !font-normal !text-foreground !opacity-100 !shadow-md",
           className
         )}
         place={position}

src/frontend/src/components/ShadTooltipComponent/index.tsx

@@ -1,3 +1,4 @@
+import { ShadTooltipProps } from "../../types/components";
 import {
   Tooltip,
   TooltipContent,
@@ -5,19 +6,22 @@ import {
   TooltipTrigger,
 } from "../ui/tooltip";
 
-const ShadTooltip = (props) => {
+const ShadTooltip = ({
+  delayDuration = 500,
+  side,
+  content,
+  children,
+  style
+}: ShadTooltipProps) => {
   return (
     <TooltipProvider>
-      <Tooltip delayDuration={props.delayDuration}>
-        <TooltipTrigger asChild>{props.children}</TooltipTrigger>
+      <Tooltip delayDuration={delayDuration}>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
 
-        <TooltipContent
-          side={props.side}
-          avoidCollisions={false}
-          sticky="always"
-          className={props.class}
-        >
-          {props.content}
+        <TooltipContent 
+        className={style}
+        side={side} avoidCollisions={false} sticky="always">
+          {content}
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>

src/frontend/src/components/cardComponent/index.tsx

@@ -33,11 +33,11 @@ export const CardComponent = ({
         <CardTitle className="flex w-full items-center gap-4">
           <span
             className={
-              "rounded-full w-7 h-7 flex items-center justify-center text-2xl " +
+              "flex h-7 w-7 items-center justify-center rounded-full text-2xl " +
               gradients[parseInt(flow.id.slice(0, 12), 16) % gradients.length]
             }
           ></span>
-          <span className="flex-1 w-full inline-block truncate-doubleline break-words">
+          <span className="inline-block w-full flex-1 break-words truncate-doubleline">
             {flow.name}
           </span>
           {onDelete && (
@@ -62,7 +62,7 @@ export const CardComponent = ({
           </Dialog>
           )}
         </CardTitle>
-        <CardDescription className="pt-2 pb-2">
+        <CardDescription className="pb-2 pt-2">
           <div className="truncate-doubleline">
             {flow.description}
             {/* {flow.description} */}
@@ -71,7 +71,7 @@ export const CardComponent = ({
       </CardHeader>
 
       <CardFooter>
-        <div className="flex gap-2 w-full justify-between items-end">
+        <div className="flex w-full items-end justify-between gap-2">
           <div className="flex flex-wrap gap-2">
             {/* <Badge variant="secondary">Agent</Badge>
             <Badge variant="secondary">

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -8,6 +8,7 @@ import { useSSE } from "../../../contexts/SSEContext";
 import { typesContext } from "../../../contexts/typesContext";
 import { alertContext } from "../../../contexts/alertContext";
 import { postBuildInit } from "../../../controllers/API";
+import ShadTooltip from "../../ShadTooltipComponent";
 
 import RadialProgressComponent from "../../RadialProgress";
 import { TabsContext } from "../../../contexts/tabsContext";
@@ -169,7 +170,7 @@ export default function BuildTrigger({
     >
       <div className="fixed right-4 bottom-20">
         <div
-          className={`${eventClick} flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-[#0000002a] hover:shadow-[#00000032] bg-[#E2E7EE] dark:border-gray-600 cursor-pointer`}
+          className={`${eventClick} align-center shadow-round-btn-shadow hover:shadow-round-btn-shadow flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3 py-1 shadow-md`}
           onClick={() => {
             handleBuild(flow);
           }}
@@ -177,17 +178,18 @@ export default function BuildTrigger({
           onMouseLeave={handleMouseLeave}
         >
           <button>
-            <div className="flex gap-3 items-center">
+            <div className="flex items-center gap-3">
               {isBuilding && progress < 1 ? (
                 // Render your loading animation here when isBuilding is true
                 <RadialProgressComponent
-                  color={"text-orange-400"}
+                  // ! confirm below works
+                  color={"text-build-trigger"}
                   value={progress}
                 ></RadialProgressComponent>
               ) : isBuilding ? (
-                <Loading strokeWidth={1.5} style={{ color: "#fb923c" }} />
+                <Loading strokeWidth={1.5} className="stroke-build-trigger" />
               ) : (
-                <Zap className="sh-6 w-6 fill-orange-400 stroke-1 stroke-orange-400" />
+                <Zap strokeWidth={1.5} className="sh-6 w-6 fill-build-trigger stroke-1 stroke-build-trigger" />
               )}
             </div>
           </button>

src/frontend/src/components/chatComponent/chatMessage/index.tsx

@@ -2,9 +2,9 @@ import { useState } from "react";
 import { ChatMessageType } from "../../../types/chat";
 import { nodeColors } from "../../../utils";
 import Convert from "ansi-to-html";
-const convert = new Convert({ newline: true });
 import { MessageCircle } from "lucide-react";
-
+import DOMPurify from "dompurify";
+const convert = new Convert({ newline: true });
 export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
   const [hidden, setHidden] = useState(true);
   return (
@@ -13,29 +13,30 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
         <div className="w-full text-start">
           <div
             style={{ backgroundColor: nodeColors["chat"] }}
-            className=" relative text-start inline-block text-white rounded-xl overflow-hidden w-fit max-w-[280px] text-sm font-normal rounded-tl-none"
+            className=" relative inline-block w-fit max-w-[280px] overflow-hidden rounded-xl rounded-tl-none text-start text-sm font-normal text-background"
           >
             {hidden && chat.thought && chat.thought !== "" && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
-                className="absolute top-2 right-2 cursor-pointer"
+                className="absolute right-2 top-2 cursor-pointer"
               >
-                <MessageCircle className="w-5 h-5 animate-bounce" />
+                <MessageCircle className="h-5 w-5 animate-bounce" />
               </div>
             )}
+
             {chat.thought && chat.thought !== "" && !hidden && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
                 style={{ backgroundColor: nodeColors["thought"] }}
-                className=" text-start inline-block w-full pb-3 pt-3 px-5 cursor-pointer"
+                className=" inline-block w-full cursor-pointer px-5 pb-3 pt-3 text-start"
                 dangerouslySetInnerHTML={{
-                  __html: convert.toHtml(chat.thought),
+                  __html: DOMPurify.sanitize(convert.toHtml(chat.thought)),
                 }}
               ></div>
             )}
             {chat.thought && chat.thought !== "" && !hidden && <br></br>}
             <div
-              className="w-full rounded-b-md px-4 pb-3 pt-3 pr-8"
+              className="w-full rounded-b-md px-4 pb-3 pr-8 pt-3"
               style={{ backgroundColor: nodeColors["chat"] }}
             >
               {chat.message}
@@ -44,7 +45,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
         </div>
       ) : (
         <div className="w-full text-end">
-          <div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-gray-700 bg-gray-200 font-normal rounded-tr-none">
+          <div className="inline-block w-fit max-w-[280px] overflow-hidden rounded-xl rounded-tr-none bg-input p-3 px-5 text-start text-sm font-normal text-black">
             {chat.message}
           </div>
         </div>

src/frontend/src/components/chatComponent/chatTrigger/index.tsx

@@ -3,6 +3,7 @@ import { MessagesSquare } from "lucide-react";
 
 import { alertContext } from "../../../contexts/alertContext";
 import { useContext } from "react";
+import ShadTooltip from "../../ShadTooltipComponent";
 
 export default function ChatTrigger({ open, setOpen, isBuilt }) {
   const { setErrorData } = useContext(alertContext);
@@ -29,10 +30,10 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
       leaveFrom="translate-y-0"
       leaveTo="translate-y-96"
     >
-          <button onClick={handleClick} className={ "transition-all fixed bottom-4 right-4 flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-[#0000002a] hover:shadow-[#00000032] bg-[#E2E7EE] dark:border-gray-600 "+ (!isBuilt ? "cursor-not-allowed" : "cursor-pointer")}>
+          <button onClick={handleClick} className={ "transition-all fixed bottom-4 right-4 flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-round-btn-shadow hover:shadow-round-btn-shadow bg-border "+ (!isBuilt ? "cursor-not-allowed" : "cursor-pointer")}>
             <div className="flex gap-3">
               <MessagesSquare
-                className={"h-6 w-6 transition-all " + (isBuilt ? "fill-[#5c8be1] stroke-1 stroke-[#5c8be1]" : "fill-[#a5bae0] stroke-1 stroke-[#a5bae0]")}
+                className={"h-6 w-6 transition-all " + (isBuilt ? "fill-chat-trigger stroke-chat-trigger stroke-1" : "fill-chat-trigger-disabled stroke-1 stroke-chat-trigger-disabled")}
                 style={{ color: "white" }}
                 strokeWidth={1.5}
               />

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -2,8 +2,8 @@ import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import CodeAreaModal from "../../modals/codeAreaModal";
 import TextAreaModal from "../../modals/textAreaModal";
-import { CodeAreaComponentType, TextAreaComponentType } from "../../types/components";
-import { INPUT_STYLE } from "../../constants";
+import { TextAreaComponentType } from "../../types/components";
+
 import { ExternalLink } from "lucide-react";
 
 export default function CodeAreaComponent({
@@ -13,8 +13,10 @@ export default function CodeAreaComponent({
   editNode = false,
   nodeClass,
   setNodeClass,
-}: CodeAreaComponentType) {
-  const [myValue, setMyValue] = useState(value);
+}: TextAreaComponentType) {
+  const [myValue, setMyValue] = useState(
+    typeof value == "string" ? value : JSON.stringify(value)
+  );
   const { openPopUp } = useContext(PopUpContext);
   useEffect(() => {
     if (disabled) {
@@ -24,16 +26,16 @@ export default function CodeAreaComponent({
   }, [disabled, onChange]);
 
   useEffect(() => {
-    setMyValue(value);
+    setMyValue(typeof value == "string" ? value : JSON.stringify(value));
   }, [value]);
 
   return (
     <div
       className={
-        disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
+        disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
       }
     >
-      <div className="w-full flex items-center">
+      <div className="flex w-full items-center">
         <span
           onClick={() => {
             openPopUp(
@@ -50,11 +52,8 @@ export default function CodeAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 border-1 shadow-sm sm:text-sm" +
-                INPUT_STYLE
-              : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
-                INPUT_STYLE +
-                (disabled ? " bg-gray-200" : "")
+              ? "input-edit-node input-dialog "
+              : "input-primary input-dialog " + (disabled ? "input-disable" : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
@@ -75,7 +74,7 @@ export default function CodeAreaComponent({
           }}
         >
           {!editNode && (
-            <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300 ml-3" />
+            <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground  ml-3" />
           )}
         </button>
       </div>

src/frontend/src/components/dropdownComponent/index.tsx

@@ -1,9 +1,10 @@
 import { Listbox, Transition } from "@headlessui/react";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useContext, useEffect, useState } from "react";
 import { DropDownComponentType } from "../../types/components";
 import { classNames } from "../../utils";
-import { INPUT_STYLE } from "../../constants";
 import { ChevronsUpDown, Check } from "lucide-react";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { TabsContext } from "../../contexts/tabsContext";
 
 export default function Dropdown({
   value,
@@ -11,13 +12,17 @@ export default function Dropdown({
   onSelect,
   editNode = false,
   numberOfOptions = 0,
+  apiModal = false,
 }: DropDownComponentType) {
+  const { closePopUp } = useContext(PopUpContext);
+
   let [internalValue, setInternalValue] = useState(
     value === "" || !value ? "Choose an option" : value
   );
+
   useEffect(() => {
     setInternalValue(value === "" || !value ? "Choose an option" : value);
-  }, [value]);
+  }, [closePopUp]);
 
   return (
     <>
@@ -34,20 +39,20 @@ export default function Dropdown({
               <Listbox.Button
                 className={
                   editNode
-                    ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md shadow-sm sm:text-sm border-gray-300 border-1" +
-                      INPUT_STYLE
-                    : "ring-1 ring-slate-300 dark:ring-slate-600 w-full py-2 pl-3 pr-10 text-left dark:focus:ring-offset-2 dark:focus:ring-offset-gray-900 dark:focus:ring-1 dark:focus:ring-gray-600 dark:focus-visible:ring-gray-900 dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
-                      INPUT_STYLE
+                    ? "border-1 relative pr-8 input-edit-node"
+                    : "py-2 pl-3 pr-10 text-left input-primary"
                 }
               >
-                <span className="block truncate w-full">{internalValue}</span>
+                <span className="block w-full truncate bg-background">
+                  {internalValue}
+                </span>
                 <span
                   className={
                     "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
                   }
                 >
                   <ChevronsUpDown
-                    className="h-5 w-5 text-gray-400"
+                    className="h-5 w-5 text-muted-foreground"
                     aria-hidden="true"
                   />
                 </span>
@@ -61,23 +66,22 @@ export default function Dropdown({
                 leaveTo="opacity-0"
               >
                 <Listbox.Options
-                  className={
+                  className={classNames(
                     editNode
-                      ? "absolute z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
-                      : "nowheel absolute z-10 mt-1 max-h-60 w-full overflow-auto overflow-y rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm "
-                  }
+                      ? "z-10 mt-1 max-h-60 w-[215px] overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+                      : "nowheel overflow-y z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm ",
+                    apiModal ? "mb-2 w-[250px]" : "absolute"
+                  )}
                 >
                   {options.map((option, id) => (
                     <Listbox.Option
                       key={id}
                       className={({ active }) =>
                         classNames(
-                          active
-                            ? " bg-accent dark:bg-white dark:text-gray-500"
-                            : "",
+                          active ? " bg-accent" : "",
                           editNode
-                            ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800"
-                            : "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800"
+                            ? "relative cursor-default select-none py-0.5 pl-3 pr-12"
+                            : "relative cursor-default select-none py-2 pl-3 pr-9"
                         )
                       }
                       value={option}
@@ -96,15 +100,15 @@ export default function Dropdown({
                           {selected ? (
                             <span
                               className={classNames(
-                                active ? "text-white dark:text-black" : "",
+                                active ? "text-background " : "",
                                 "absolute inset-y-0 right-0 flex items-center pr-4"
                               )}
                             >
                               <Check
                                 className={
                                   active
-                                    ? "h-5 w-5 dark:text-black text-black"
-                                    : "h-5 w-5 dark:text-white text-black"
+                                    ? "h-5 w-5 text-black"
+                                    : "h-5 w-5 text-black"
                                 }
                                 aria-hidden="true"
                               />

src/frontend/src/components/floatComponent/index.tsx

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from "react";
 import { FloatComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
-import { INPUT_STYLE } from "../../constants";
+import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function FloatComponent({
   value,
@@ -12,6 +12,7 @@ export default function FloatComponent({
 }: FloatComponentType) {
   const [myValue, setMyValue] = useState(value ?? "");
   const { setDisableCopyPaste } = useContext(TabsContext);
+  const { closePopUp } = useContext(PopUpContext);
 
   const step = 0.1;
   const min = 0;
@@ -26,7 +27,7 @@ export default function FloatComponent({
 
   useEffect(() => {
     setMyValue(value);
-  }, [value]);
+  }, [closePopUp]);
 
   return (
     <div
@@ -56,11 +57,8 @@ export default function FloatComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
-              INPUT_STYLE
-            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-gray-200 sm:text-sm" +
-              INPUT_STYLE +
-              (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
+            ? "input-edit-node"
+            : "input-primary" + (disabled ? " input-disable " : "")
         }
         placeholder={
           editNode ? "Number 0 to 1" : "Type a number from zero to one"

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -47,20 +47,20 @@ export const MenuBar = ({ flows, tabId }) => {
   let current_flow = flows.find((flow) => flow.id === tabId);
 
   return (
-    <div className="flex gap-2 items-center">
+    <div className="flex items-center gap-2">
       <Link to="/">
         <ChevronLeft className="w-4" />
       </Link>
-      <div className="flex items-center font-medium text-sm rounded-md py-1 px-1.5 gap-0.5">
+      <div className="flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
-              className="gap-2 flex items-center max-w-[200px]"
+              className="flex max-w-[200px] items-center gap-2"
               variant="primary"
               size="sm"
             >
-              <div className="truncate flex-1">{current_flow.name}</div>
-              <ChevronDown className="w-4 h-4" />
+              <div className="flex-1 truncate">{current_flow.name}</div>
+              <ChevronDown className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-44">
@@ -71,7 +71,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Plus className="w-4 h-4 mr-2" />
+              <Plus className="mr-2 h-4 w-4" />
               New
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -80,7 +80,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Settings2 className="w-4 h-4 mr-2 dark:text-gray-300" />
+              <Settings2 className="mr-2 h-4 w-4 " />
               Settings
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -89,7 +89,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Undo className="w-4 h-4 mr-2 dark:text-gray-300" />
+              <Undo className="mr-2 h-4 w-4 " />
               Undo
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -98,7 +98,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Redo className="w-4 h-4 mr-2 dark:text-gray-300" />
+              <Redo className="mr-2 h-4 w-4 " />
               Redo
             </DropdownMenuItem>
             <DropdownMenuSeparator />

src/frontend/src/components/headerComponent/index.tsx

@@ -36,23 +36,23 @@ export default function Header() {
     fetchStars();
   }, []);
   return (
-    <div className="w-full h-12 flex justify-between items-center border-b bg-muted">
-      <div className="flex gap-2 justify-start items-center w-96">
+    <div className="flex h-12 w-full items-center justify-between border-b bg-muted">
+      <div className="flex w-96 items-center justify-start gap-2">
         <Link to="/">
-          <span className="text-2xl ml-4">⛓️</span>
+          <span className="ml-4 text-2xl">⛓️</span>
         </Link>
         {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
           <MenuBar flows={flows} tabId={tabId} />
         )}
       </div>
-      <div className="flex gap-2 items-center">
+      <div className="flex items-center gap-2">
         <Link to="/">
           <Button
             className="gap-2"
             variant={location.pathname === "/" ? "primary" : "secondary"}
             size="sm"
           >
-            <Home className="w-4 h-4" />
+            <Home className="h-4 w-4" />
             <div className="flex-1">{USER_PROJECTS_HEADER}</div>
           </Button>
         </Link>
@@ -64,22 +64,22 @@ export default function Header() {
             }
             size="sm"
           >
-            <Users2 className="w-4 h-4" />
+            <Users2 className="h-4 w-4" />
             <div className="flex-1">Community Examples</div>
           </Button>
         </Link>
       </div>
-      <div className="flex justify-end px-2 w-96">
-        <div className="ml-auto mr-2 flex gap-5 items-center">
+      <div className="flex w-96 justify-end px-2">
+        <div className="ml-auto mr-2 flex items-center gap-5">
           <a
             href="https://github.com/logspace-ai/langflow"
             target="_blank"
             rel="noreferrer"
-            className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-gray-600 dark:text-gray-300 border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
+            className="inline-flex shadow-sm items-center justify-center text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground  border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
           >
-            <FaGithub className="h-5 w-5 mr-2" />
+            <FaGithub className="mr-2 h-5 w-5" />
             Star
-            <div className="ml-2 flex text-sm bg-background rounded-md rounded-l-none border px-2 h-9 -mr-px items-center justify-center">
+            <div className="-mr-px ml-2 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm">
               {stars}
             </div>
           </a>
@@ -89,7 +89,7 @@ export default function Header() {
             rel="noreferrer"
             className="text-muted-foreground"
           >
-            <FaTwitter className="h-5 w-5" />
+            <FaTwitter className="h-5 w-5 hover:text-accent-foreground" />
           </a>
           <a
             href="https://discord.gg/EqksyE2EX9"
@@ -97,11 +97,12 @@ export default function Header() {
             rel="noreferrer"
             className="text-muted-foreground"
           >
-            <FaDiscord className="h-5 w-5" />
+            <FaDiscord className="h-5 w-5 hover:text-accent-foreground" />
           </a>
-          {/* <Separator orientation="vertical" />
+
+          <Separator orientation="vertical" />
           <button
-            className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
+            className="text-muted-foreground hover:text-accent-foreground "
             onClick={() => {
               setDark(!dark);
             }}
@@ -111,9 +112,9 @@ export default function Header() {
             ) : (
               <MoonIcon className="h-5 w-5" />
             )}
-          </button> */}
+          </button>
           <button
-            className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200 relative"
+            className="text-muted-foreground hover:text-accent-foreground relative"
             onClick={(event: React.MouseEvent<HTMLElement>) => {
               setNotificationCenter(false);
               const { top, left } = (
@@ -122,18 +123,18 @@ export default function Header() {
               openPopUp(
                 <>
                   <div
-                    className="z-10 absolute"
+                    className="absolute z-10"
                     style={{ top: top + 34, left: left - AlertWidth }}
                   >
                     <AlertDropdown />
                   </div>
-                  <div className="h-screen w-screen fixed top-0 left-0"></div>
+                  <div className="fixed left-0 top-0 h-screen w-screen"></div>
                 </>
               );
             }}
           >
             {notificationCenter && (
-              <div className="absolute w-1.5 h-1.5 rounded-full bg-destructive right-[3px]"></div>
+              <div className="absolute right-[3px] h-1.5 w-1.5 rounded-full bg-destructive"></div>
             )}
             <Bell className="h-5 w-5" aria-hidden="true" />
           </button>

src/frontend/src/components/inputComponent/index.tsx

@@ -3,7 +3,6 @@ import { InputComponentType } from "../../types/components";
 import { classNames } from "../../utils";
 import { TabsContext } from "../../contexts/tabsContext";
 import { PopUpContext } from "../../contexts/popUpContext";
-import { INPUT_STYLE } from "../../constants";
 
 export default function InputComponent({
   value,
@@ -33,7 +32,7 @@ export default function InputComponent({
     <div
       className={
         disabled
-          ? "relative pointer-events-none cursor-not-allowed"
+          ? "pointer-events-none relative cursor-not-allowed"
           : "relative"
       }
     >
@@ -46,13 +45,10 @@ export default function InputComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         className={classNames(
-          "block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:placeholder-transparent",
-          disabled ? " bg-gray-200 dark:bg-gray-700" : "",
+          " pr-12 ",
+          disabled ? " input-disable " : "",
           password && !pwdVisible && myValue !== "" ? "password" : "",
-          editNode
-            ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm text-center" +
-                INPUT_STYLE
-            : "ring-offset-gray-200" + INPUT_STYLE,
+          editNode ? " input-edit-node " : " input-primary ",
           password && editNode ? "pr-8" : "pr-3"
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}
@@ -65,8 +61,8 @@ export default function InputComponent({
         <button
           className={classNames(
             editNode
-              ? "absolute inset-y-0 right-0 pr-2 items-center text-gray-600"
-              : "absolute inset-y-0 right-0 items-center px-4 text-gray-600"
+              ? "absolute inset-y-0 right-0 items-center pr-2 text-muted-foreground"
+              : "absolute inset-y-0 right-0 items-center px-4 text-muted-foreground"
           )}
           onClick={() => {
             setPwdVisible(!pwdVisible);
@@ -82,8 +78,8 @@ export default function InputComponent({
                 stroke="currentColor"
                 className={classNames(
                   editNode
-                    ? "w-5 h-5 absolute bottom-0.5 right-2"
-                    : "w-5 h-5 absolute bottom-2 right-3"
+                    ? "absolute bottom-0.5 right-2 h-5 w-5"
+                    : "absolute bottom-2 right-3 h-5 w-5"
                 )}
               >
                 <path
@@ -101,8 +97,8 @@ export default function InputComponent({
                 stroke="currentColor"
                 className={classNames(
                   editNode
-                    ? "w-5 h-5 absolute bottom-0.5 right-2"
-                    : "w-5 h-5 absolute bottom-2 right-3"
+                    ? "absolute bottom-0.5 right-2 h-5 w-5"
+                    : "absolute bottom-2 right-3 h-5 w-5"
                 )}
               >
                 <path

src/frontend/src/components/inputFileComponent/index.tsx

@@ -2,7 +2,6 @@ import { useContext, useEffect, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { FileComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
-import { INPUT_STYLE } from "../../constants";
 import { FileSearch2 } from "lucide-react";
 import { uploadFile } from "../../controllers/API";
 
@@ -95,29 +94,26 @@ export default function InputFileComponent({
   return (
     <div
       className={
-        disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
+        disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
       }
     >
-      <div className="w-full flex items-center gap-2">
+      <div className="flex w-full items-center">
         <span
           onClick={handleButtonClick}
           className={
             editNode
-              ? "truncate placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm border-1" +
-                INPUT_STYLE
-              : "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
-                INPUT_STYLE +
-                (disabled ? " bg-gray-200" : "")
+              ? "input-edit-node " + "input-primary "
+              : "input-primary " + (disabled ? "input-disable " : "")
           }
         >
           {myValue !== "" ? myValue : "No file"}
         </span>
         <button onClick={handleButtonClick}>
           {!editNode && !loading && (
-            <FileSearch2 className="w-6 h-6 hover:text-ring" />
+            <FileSearch2 strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground" />
           )}
           {!editNode && loading && (
-            <span className="loading loading-spinner loading-sm pl-3 h-8 pointer-events-none"></span>
+            <span className="loading loading-spinner loading-sm pointer-events-none h-8 pl-3"></span>
           )}
         </button>
       </div>

src/frontend/src/components/inputListComponent/index.tsx

@@ -3,81 +3,88 @@ import { InputListComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
 
 import _ from "lodash";
-import { INPUT_STYLE } from "../../constants";
 import { X, Plus } from "lucide-react";
+import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function InputListComponent({
   value,
   onChange,
   disabled,
   editNode = false,
+  onAddInput,
 }: InputListComponentType) {
   const [inputList, setInputList] = useState(value ?? [""]);
+  const { closePopUp } = useContext(PopUpContext);
+
   useEffect(() => {
     if (disabled) {
       setInputList([""]);
       onChange([""]);
     }
   }, [disabled, onChange]);
+
+  useEffect(() => {
+    setInputList(value);
+  }, [closePopUp]);
+
   return (
     <div
       className={
         (disabled ? "pointer-events-none cursor-not-allowed" : "") +
-        "flex flex-col gap-3 py-2"
+        "flex flex-col gap-3"
       }
     >
-      {inputList.map((i, idx) => (
-        <div key={idx} className="w-full flex gap-3">
-          <input
-            type="text"
-            value={i}
-            className={
-              editNode
-                ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
-                  INPUT_STYLE
-                : "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-500 sm:text-sm" +
-                  (disabled ? " bg-gray-200" : "") +
-                  "focus:placeholder-transparent"
-            }
-            placeholder="Type something..."
-            onChange={(e) => {
-              setInputList((old) => {
-                let newInputList = _.cloneDeep(old);
-                newInputList[idx] = e.target.value;
-                return newInputList;
-              });
-              onChange(inputList);
-            }}
-          />
-          {idx === inputList.length - 1 ? (
-            <button
-              onClick={() => {
+      {inputList.map((i, idx) => {
+        return (
+          <div key={idx} className="flex w-full gap-3">
+            <input
+              type="text"
+              value={i}
+              className={
+                editNode
+                  ? "input-edit-node "
+                  : "input-primary " + (disabled ? "input-disable" : "")
+              }
+              placeholder="Type something..."
+              onChange={(e) => {
                 setInputList((old) => {
                   let newInputList = _.cloneDeep(old);
-                  newInputList.push("");
+                  newInputList[idx] = e.target.value;
                   return newInputList;
                 });
                 onChange(inputList);
               }}
-            >
-              <Plus className={"w-4 h-4 hover:text-ring"} />
-            </button>
-          ) : (
-            <button
-              onClick={() => {
-                setInputList((old) => {
-                  let newInputList = _.cloneDeep(old);
-                  newInputList.splice(idx, 1);
-                  return newInputList;
-                });
-                onChange(inputList);
-              }}
-            >
-              <X className="w-4 h-4 hover:text-red-600" />
-            </button>
-          )}
-        </div>
-      ))}
+            />
+            {idx === inputList.length - 1 ? (
+              <button
+                onClick={() => {
+                  setInputList((old) => {
+                    let newInputList = _.cloneDeep(old);
+                    newInputList.push("");
+                    return newInputList;
+                  });
+                  onChange(inputList);
+                }}
+              >
+                <Plus className={"h-4 w-4 hover:text-accent-foreground"} />
+              </button>
+            ) : (
+              <button
+                onClick={() => {
+                  setInputList((old) => {
+                    let newInputList = _.cloneDeep(old);
+                    newInputList.splice(idx, 1);
+                    return newInputList;
+                  });
+                  onChange(inputList);
+                }}
+              >
+                <X className="h-4 w-4 hover:text-status-red" />
+              </button>
+            )}
+          </div>
+        );
+      })}
     </div>
   );
 }

src/frontend/src/components/intComponent/index.tsx

@@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from "react";
 import { FloatComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
 import { classNames } from "../../utils";
-import { INPUT_STYLE } from "../../constants";
+import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function IntComponent({
   value,
@@ -14,6 +14,7 @@ export default function IntComponent({
   const [myValue, setMyValue] = useState(value ?? "");
   const { setDisableCopyPaste } = useContext(TabsContext);
   const min = 0;
+  const { closePopUp } = useContext(PopUpContext);
 
   useEffect(() => {
     if (disabled) {
@@ -24,13 +25,13 @@ export default function IntComponent({
 
   useEffect(() => {
     setMyValue(value);
-  }, [value]);
+  }, [closePopUp]);
 
   return (
     <div
       className={
         "w-full " +
-        (disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full")
+        (disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full")
       }
     >
       <input
@@ -69,13 +70,10 @@ export default function IntComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
-              INPUT_STYLE
-            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background sm:text-sm" +
-              INPUT_STYLE +
-              (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
+            ? " input-edit-node "
+            : " input-primary " + (disabled ? " input-disable " : "")
         }
-        placeholder={editNode ? "Integer number" : "Type a integer number"}
+        placeholder={editNode ? "Integer number" : "Type an integer number"}
         onChange={(e) => {
           setMyValue(e.target.value);
           onChange(e.target.value);

src/frontend/src/components/loadingComponent/index.tsx

@@ -4,10 +4,10 @@ type LoadingComponentProps = {
 
 export default function LoadingComponent({ remSize }: LoadingComponentProps) {
   return (
-    <div role="status" className="w-min m-auto">
+    <div role="status" className="m-auto w-min">
       <svg
         aria-hidden="true"
-        className={`w-${remSize} h-${remSize} mr-2 text-muted animate-spin dark:text-gray-600 fill-blue-600`}
+        className={`w-${remSize} h-${remSize} mr-2 animate-spin fill-almost-medium-blue  text-muted`}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -22,7 +22,9 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
         />
       </svg>
       <br></br>
-      <span className="animate-pulse text-blue-600 text-lg">Loading...</span>
+      <span className="animate-pulse text-lg text-almost-medium-blue">
+        Loading...
+      </span>
     </div>
   );
 }

src/frontend/src/components/promptComponent/index.tsx

@@ -3,13 +3,14 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
-import { INPUT_STYLE } from "../../constants";
+
 import { ExternalLink } from "lucide-react";
 import { postValidatePrompt } from "../../controllers/API";
 import { typesContext } from "../../contexts/typesContext";
 import * as _ from "lodash";
 
 export default function PromptAreaComponent({
+  field_name,
   setNodeClass,
   nodeClass,
   value,
@@ -20,7 +21,6 @@ export default function PromptAreaComponent({
   const [myValue, setMyValue] = useState("");
   const { openPopUp } = useContext(PopUpContext);
   const { reactFlowInstance } = useContext(typesContext);
-
   useEffect(() => {
     if (disabled) {
       setMyValue("");
@@ -29,27 +29,30 @@ export default function PromptAreaComponent({
   }, [disabled, onChange]);
 
   useEffect(() => {
-    if (value !== "" && myValue !== value && reactFlowInstance) { // only executed once
+    if (value !== "" && myValue !== value && reactFlowInstance) {
+      // only executed once
       setMyValue(value);
-      postValidatePrompt(value, nodeClass)
+      postValidatePrompt(field_name, value, nodeClass)
         .then((apiReturn) => {
           if (apiReturn.data) {
             setNodeClass(apiReturn.data.frontend_node);
             // need to update reactFlowInstance to re-render the nodes.
-            reactFlowInstance.setEdges(_.cloneDeep(reactFlowInstance.getEdges()));
+            reactFlowInstance.setEdges(
+              _.cloneDeep(reactFlowInstance.getEdges())
+            );
           }
         })
         .catch((error) => {});
     }
-  }, [reactFlowInstance]);
+  }, [reactFlowInstance, field_name]);
 
   return (
     <div
       className={
-        disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full"
+        disabled ? "pointer-events-none w-full cursor-not-allowed" : " w-full"
       }
     >
-      <div className="w-full flex items-center gap-3">
+      <div className="flex w-full items-center">
         <span
           onClick={() => {
             openPopUp(
@@ -69,10 +72,10 @@ export default function PromptAreaComponent({
           }}
           className={
             editNode
-              ? "cursor-pointer truncate placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
-                INPUT_STYLE
-              : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
-                (disabled ? " bg-gray-200" : "")
+              ? " input-edit-node " + " input-dialog "
+              : (disabled ? " input-disable " : "") +
+                " input-primary " +
+                " input-dialog "
           }
         >
           {myValue !== "" ? myValue : "Type your prompt here"}
@@ -81,6 +84,7 @@ export default function PromptAreaComponent({
           onClick={() => {
             openPopUp(
               <GenericModal
+                field_name={field_name}
                 type={TypeModal.PROMPT}
                 value={myValue}
                 buttonText="Check & Save"
@@ -96,7 +100,10 @@ export default function PromptAreaComponent({
           }}
         >
           {!editNode && (
-            <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300" />
+            <ExternalLink
+              strokeWidth={1.5}
+              className="ml-3 h-6 w-6 hover:text-accent-foreground"
+            />
           )}
         </button>
       </div>

src/frontend/src/components/textAreaComponent/index.tsx

@@ -3,7 +3,7 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
-import { INPUT_STYLE } from "../../constants";
+
 import { ExternalLink } from "lucide-react";
 
 export default function TextAreaComponent({
@@ -31,8 +31,8 @@ export default function TextAreaComponent({
       <div
         className={
           editNode
-            ? "w-full flex items-center"
-            : "w-full flex items-center gap-3"
+            ? "w-full items-center"
+            : "w-full flex items-center"
         }
       >
         <span
@@ -52,10 +52,8 @@ export default function TextAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
-                INPUT_STYLE
-              : "truncate block w-full text-gray-500 dark:text-muted px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
-                (disabled ? " bg-gray-200" : "")
+            ? "input-edit-node input-dialog "
+            : "input-primary input-dialog " + (disabled ? "input-disable" : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
@@ -76,9 +74,7 @@ export default function TextAreaComponent({
             );
           }}
         >
-          {!editNode && (
-            <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300" />
-          )}
+          {!editNode && <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground ml-3" />}
         </button>
       </div>
     </div>

src/frontend/src/components/toggleComponent/index.tsx

@@ -21,7 +21,7 @@ export default function ToggleComponent({
           setEnabled(x);
         }}
         className={classNames(
-          enabled ? "bg-primary" : "bg-gray-200",
+          enabled ? "bg-primary" : "bg-input",
           "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-1"
         )}
       >
@@ -30,16 +30,14 @@ export default function ToggleComponent({
           className={classNames(
             enabled ? "translate-x-5" : "translate-x-0",
             "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out",
-            disabled
-              ? "bg-gray-200 dark:bg-gray-600"
-              : "bg-white dark:bg-gray-800"
+            disabled ? "bg-input " : "bg-background"
           )}
         >
           <span
             className={classNames(
               enabled
-                ? "opacity-0 ease-out duration-100"
-                : "opacity-100 ease-in duration-200",
+                ? "opacity-0 duration-100 ease-out"
+                : "opacity-100 duration-200 ease-in",
               "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
             )}
             aria-hidden="true"
@@ -47,8 +45,8 @@ export default function ToggleComponent({
           <span
             className={classNames(
               enabled
-                ? "opacity-100 ease-in duration-200"
-                : "opacity-0 ease-out duration-100",
+                ? "opacity-100 duration-200 ease-in"
+                : "opacity-0 duration-100 ease-out",
               "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
             )}
             aria-hidden="true"

src/frontend/src/components/toggleShadComponent/index.tsx

@@ -33,7 +33,7 @@ export default function ToggleShadComponent({
           transform: `scaleX(${scaleX}) scaleY(${scaleY})`,
         }}
         disabled={disabled}
-        className="data-[state=unchecked]:bg-slate-500"
+        className=""
         checked={enabled}
         onCheckedChange={(x: boolean) => {
           setEnabled(x);

src/frontend/src/components/ui/accordion.tsx

@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
-import { cn } from "../../utils"
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { cn } from "../../utils";
 
-const Accordion = AccordionPrimitive.Root
+const Accordion = AccordionPrimitive.Root;
 
 const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
@@ -16,8 +16,8 @@ const AccordionItem = React.forwardRef<
     className={cn("border-b", className)}
     {...props}
   />
-))
-AccordionItem.displayName = "AccordionItem"
+));
+AccordionItem.displayName = "AccordionItem";
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -27,17 +27,17 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
         className
       )}
       {...props}
     >
       {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+      <ChevronDownIcon className="h-4 w-4 text-muted-foreground transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
@@ -46,14 +46,14 @@ const AccordionContent = React.forwardRef<
   <AccordionPrimitive.Content
     ref={ref}
     className={cn(
-      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
       className
     )}
     {...props}
   >
     <div className="pb-4 pt-0">{children}</div>
   </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

src/frontend/src/components/ui/button.tsx

@@ -14,7 +14,7 @@ const buttonVariants = cva(
         outline:
           "border border-input hover:bg-accent hover:text-accent-foreground",
         primary:
-          "border bg-background text-secondary-foreground hover:bg-background/80 hover:shadow-sm",
+          "border bg-background text-secondary-foreground hover:bg-background/80 dark:hover:bg-background/10 hover:shadow-sm",
         secondary:
           "border border-muted bg-muted text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",

src/frontend/src/components/ui/card.tsx

@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg flex flex-col justify-between border bg-card text-card-foreground shadow-sm hover:shadow-lg transition-all",
+      "flex flex-col justify-between rounded-lg border bg-card text-card-foreground shadow-sm transition-all hover:shadow-lg",
       className
     )}
     {...props}

src/frontend/src/components/ui/dialog.tsx

@@ -27,7 +27,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-primary/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      "fixed inset-0 z-50 bg-blur-shared backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
       className
     )}
     {...props}
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+        "fixed gap-3 z-50 grid w-full rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
         className
       )}
       {...props}

src/frontend/src/components/ui/dropdown-menu.tsx

@@ -146,7 +146,7 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 pl-2 py-1.5 text-sm font-semibold",
+      "px-2 py-1.5 pl-2 text-sm font-semibold",
       inset && "pl-8",
       className
     )}

src/frontend/src/components/ui/rename-label.tsx

@@ -57,7 +57,7 @@ export default function RenameLabel(props) {
           ref={inputRef}
           onInput={resizeInput}
           className={cn(
-            "px-2 bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md",
+            "rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline",
             props.className
           )}
           onBlur={() => {
@@ -74,7 +74,7 @@ export default function RenameLabel(props) {
       ) : (
         <div className="flex items-center gap-2">
           <span
-            className={cn("px-2 text-left truncate", props.className)}
+            className={cn("truncate px-2 text-left", props.className)}
             onDoubleClick={() => {
               setIsRename(true);
               setMyValue(props.value);

src/frontend/src/components/ui/switch.tsx

@@ -10,7 +10,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed  disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-ring",
       className
     )}
     {...props}

src/frontend/src/components/ui/tabs.tsx

@@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:hover:bg-secondary/80 data-[state=active]:border data-[state=inactive]:border data-[state=inactive]:border-muted",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border data-[state=inactive]:border data-[state=inactive]:border-muted data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:hover:bg-secondary/80",
       className
     )}
     {...props}

src/frontend/src/constants.tsx

@@ -61,7 +61,7 @@ export const TEXT_DIALOG_SUBTITLE = "Edit your text.";
  * @param {string} flowId - The id of the flow
  * @returns {string} - The python code
  */
-export const getPythonApiCode = (flow: FlowType): string => {
+export const getPythonApiCode = (flow: FlowType, tweak?): string => {
   const flowId = flow.id;
 
   // create a dictionary of node ids and the values is an empty dictionary
@@ -77,7 +77,11 @@ BASE_API_URL = "${window.location.protocol}//${
 FLOW_ID = "${flowId}"
 # You can tweak the flow by adding a tweaks dictionary
 # e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}}
-TWEAKS = ${JSON.stringify(tweaks, null, 2)}
+TWEAKS = ${
+    tweak && tweak.length > 0
+      ? buildTweakObject(tweak)
+      : JSON.stringify(tweaks, null, 2)
+  }
 
 def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict:
     """
@@ -107,7 +111,7 @@ print(run_flow("Your message", flow_id=FLOW_ID, tweaks=TWEAKS))`;
  * @param {string} flowId - The id of the flow
  * @returns {string} - The curl code
  */
-export const getCurlCode = (flow: FlowType): string => {
+export const getCurlCode = (flow: FlowType, tweak?): string => {
   const flowId = flow.id;
   const tweaks = buildTweaks(flow);
   return `curl -X POST \\
@@ -115,27 +119,46 @@ export const getCurlCode = (flow: FlowType): string => {
     window.location.host
   }/api/v1/process/${flowId} \\
   -H 'Content-Type: application/json' \\
-  -d '{"inputs": {"input": message}, "tweaks": ${JSON.stringify(
-    tweaks,
-    null,
-    2
-  )}}'`;
+  -d '{"inputs": {"input": message}, "tweaks": ${
+    tweak && tweak.length > 0
+      ? buildTweakObject(tweak)
+      : JSON.stringify(tweaks, null, 2)
+  }}'`;
 };
 /**
  * Function to get the python code for the API
  * @param {string} flowName - The name of the flow
  * @returns {string} - The python code
  */
-export const getPythonCode = (flow: FlowType): string => {
+export const getPythonCode = (flow: FlowType, tweak?): string => {
   const flowName = flow.name;
   const tweaks = buildTweaks(flow);
   return `from langflow import load_flow_from_json
-TWEAKS = ${JSON.stringify(tweaks, null, 2)}
+TWEAKS = ${
+    tweak && tweak.length > 0
+      ? buildTweakObject(tweak)
+      : JSON.stringify(tweaks, null, 2)
+  }
 flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS)
 # Now you can use it like any chain
 flow("Hey, have you heard of LangFlow?")`;
 };
 
+function buildTweakObject(tweak) {
+  tweak.forEach((el) => {
+    Object.keys(el).forEach((key) => {
+      for (let kp in el[key]) {
+        try {
+          el[key][kp] = JSON.parse(el[key][kp]);
+        } catch {}
+      }
+    });
+  });
+
+  const tweakString = JSON.stringify(tweak, null, 2);
+  return tweakString;
+}
+
 /**
  * The base text for subtitle of Import Dialog
  * @constant
@@ -154,11 +177,14 @@ export const EXPORT_CODE_DIALOG =
  * The base text for subtitle of code dialog
  * @constant
  */
-export const INPUT_STYLE =
-  " focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";
+export const COLUMN_DIV_STYLE =
+  " w-full h-full flex overflow-auto flex-col bg-muted px-16 ";
+
+  export const NAV_DISPLAY_STYLE =
+  " w-full flex justify-between py-12 pb-2 px-6 ";
 
 /**
- * Default description for the flow
+ * The base text for subtitle of code dialog
  * @constant
  */
 export const DESCRIPTIONS: string[] = [
@@ -173,7 +199,7 @@ export const DESCRIPTIONS: string[] = [
   "Your Hub for Text Generation.",
   "Promptly Ingenious!",
   "Building Linguistic Labyrinths.",
-  "Create, Chain, Communicate.",
+  "LangFlow: Create, Chain, Communicate.",
   "Connect the Dots, Craft Language.",
   "Interactive Language Weaving.",
   "Generate, Innovate, Communicate.",
@@ -183,52 +209,12 @@ export const DESCRIPTIONS: string[] = [
   "Nurture NLP Nodes Here.",
   "Conversational Cartography Unlocked.",
   "Design, Develop, Dialogize.",
-  "Unleashing Linguistic Creativity.",
-  "Graph Your Way to Great Conversations.",
-  "The Power of Language at Your Fingertips.",
-  "Sculpting Language with Precision.",
-  "Where Language Meets Logic.",
-  "Building Intelligent Interactions.",
-  "Your Passport to Linguistic Landscapes.",
-  "Create, Curate, Communicate with LangFlow.",
-  "Flow into the Future of Language.",
-  "Mapping Meaningful Conversations.",
-  "Unravel the Art of Articulation.",
-  "Language Engineering Excellence.",
-  "Navigate the Networks of Conversation.",
-  "Crafting Conversations, One Node at a Time.",
-  "The Pinnacle of Prompt Generation.",
-  "Language Models, Mapped and Mastered.",
-  "Powerful Prompts, Perfectly Positioned.",
-  "Innovation in Interaction with LangFlow.",
-  "Your Toolkit for Text Generation.",
-  "Unfolding Linguistic Possibilities.",
-  "Building Powerful Solutions with Language Models.",
-  "Uncover Business Opportunities with NLP.",
-  "Harness the Power of Conversational AI.",
-  "Transform Your Business with Smart Dialogues.",
-  "Craft Meaningful Interactions, Generate Value.",
-  "Unleashing Business Potential through Language Engineering.",
-  "Empowering Enterprises with Intelligent Interactions.",
-  "Driving Innovation in Business Communication.",
-  "Catalyzing Business Growth through Conversational AI.",
-  "Text Generation Meets Business Transformation.",
-  "Navigate the Linguistic Landscape, Discover Opportunities.",
-  "Create Powerful Connections, Boost Business Value.",
-  "Empowering Communication, Enabling Opportunities.",
-  "Advanced NLP for Groundbreaking Business Solutions.",
-  "Innovation in Interaction, Revolution in Revenue.",
-  "Maximize Impact with Intelligent Conversations.",
-  "Beyond Text Generation - Unleashing Business Opportunities.",
-  "Unlock the Power of AI in Your Business Conversations.",
-  "Crafting Dialogues that Drive Business Success.",
-  "Engineered for Excellence, Built for Business.",
 ];
+export const BUTTON_DIV_STYLE = " flex gap-2 focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";
 
 /**
- * Adjectives for the name of the flow
+ * The base text for subtitle of code dialog
  * @constant
- *
  */
 export const ADJECTIVES: string[] = [
   "admiring",

src/frontend/src/contexts/alertContext.tsx

@@ -78,9 +78,9 @@ export function AlertProvider({ children }: { children: ReactNode }) {
    * @param newState An object containing the new error data, including title and optional list of error messages
    */
   function setErrorData(newState: { title: string; list?: Array<string> }) {
-    setErrorDataState(newState);
-    setErrorOpen(true);
     if (newState.title && newState.title !== "") {
+      setErrorDataState(newState);
+      setErrorOpen(true);
       setNotificationCenter(true);
       pushNotificationList({
         type: "error",
@@ -95,9 +95,9 @@ export function AlertProvider({ children }: { children: ReactNode }) {
    * @param newState An object containing the title of the notice and optionally a link.
    */
   function setNoticeData(newState: { title: string; link?: string }) {
-    setNoticeDataState(newState);
-    setNoticeOpen(true);
     if (newState.title && newState.title !== "") {
+      setNoticeDataState(newState);
+      setNoticeOpen(true);
       // Add new notice to notification center
       setNotificationCenter(true);
       pushNotificationList({
@@ -113,11 +113,10 @@ export function AlertProvider({ children }: { children: ReactNode }) {
    * @param newState - A state object with a "title" property to set in the success data state.
    */
   function setSuccessData(newState: { title: string }) {
-    setSuccessDataState(newState); // update the success data state with the provided new state
-    setSuccessOpen(true); // open the success alert
-
     // If the new state has a "title" property, add a new success notification to the list
     if (newState.title && newState.title !== "") {
+      setSuccessDataState(newState); // update the success data state with the provided new state
+      setSuccessOpen(true); // open the success alert
       setNotificationCenter(true); // show the notification center
       pushNotificationList({
         // add the new notification to the list

src/frontend/src/contexts/popUpContext.tsx

@@ -5,6 +5,8 @@ import React, { useState } from "react";
 export const PopUpContext = createContext({
   openPopUp: (popUpElement: JSX.Element) => {},
   closePopUp: () => {},
+  setCloseEdit: (value: string) => {},
+  closeEdit: "",
 });
 
 interface PopUpProviderProps {
@@ -22,8 +24,12 @@ const PopUpProvider = ({ children }: PopUpProviderProps) => {
     setPopUpElements((prevPopUps) => prevPopUps.slice(1));
   };
 
+  const [closeEdit, setCloseEdit] = useState("");
+
   return (
-    <PopUpContext.Provider value={{ openPopUp, closePopUp }}>
+    <PopUpContext.Provider
+      value={{ openPopUp, closePopUp, closeEdit, setCloseEdit }}
+    >
       {children}
       {popUpElements[0]}
     </PopUpContext.Provider>

src/frontend/src/contexts/tabsContext.tsx

@@ -53,6 +53,8 @@ const TabsContextInitialValue: TabsContextType = {
   tabsState: {},
   setTabsState: (state: TabsState) => {},
   getNodeId: (nodeType: string) => "",
+  setTweak: (tweak: any) => {},
+  getTweak: {},
   paste: (
     selection: { nodes: any; edges: any },
     position: { x: number; y: number; paneX?: number; paneY?: number }
@@ -73,6 +75,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   const { templates, reactFlowInstance } = useContext(typesContext);
   const [lastCopiedSelection, setLastCopiedSelection] = useState(null);
   const [tabsState, setTabsState] = useState<TabsState>({});
+  const [getTweak, setTweak] = useState({});
 
   const newNodeId = useRef(uid());
   function incrementNodeId() {
@@ -195,10 +198,13 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       edge.style = { stroke: "#555555" };
     });
   }
+
   function updateDisplay_name(node: NodeType, template: APIClassType) {
-    node.data.node.display_name = template["display_name"]
-      ? template["display_name"]
-      : node.data.type;
+    node.data.node.display_name = template["display_name"] || node.data.type;
+  }
+
+  function updateNodeDocumentation(node: NodeType, template: APIClassType) {
+    node.data.node.documentation = template["documentation"];
   }
 
   function processFlowNodes(flow) {
@@ -215,6 +221,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
         updateNodeEdges(flow, node, template);
         updateNodeDescription(node, template);
         updateNodeTemplate(node, template);
+        updateNodeDocumentation(node, template);
       }
     });
   }
@@ -265,16 +272,20 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   /**
    * Downloads the current flow as a JSON file
    */
-  function downloadFlow(flow: FlowType) {
+  function downloadFlow(
+    flow: FlowType,
+    flowName: string,
+    flowDescription?: string
+  ) {
     // create a data URI with the current flow data
     const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
-      JSON.stringify(flow)
+      JSON.stringify({ ...flow, name: flowName, description: flowDescription })
     )}`;
 
     // create a link element and set its properties
     const link = document.createElement("a");
     link.href = jsonString;
-    link.download = `${flows.find((f) => f.id === tabId).name}.json`;
+    link.download = `${flowName && flowName != "" ? flowName : flows.find((f) => f.id === tabId).name}.json`;
 
     // simulate a click on the link element to trigger the download
     link.click();
@@ -418,7 +429,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
           y: insidePosition.y + n.position.y - minimumY,
         },
         data: {
-          ...n.data,
+          ..._.cloneDeep(n.data),
           id: newId,
         },
       };
@@ -460,8 +471,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
           style: { stroke: "inherit" },
           className:
             targetHandle.split("|")[0] === "Text"
-              ? "stroke-gray-800 dark:stroke-gray-300"
-              : "stroke-gray-900 dark:stroke-gray-200",
+              ? "stroke-gray-800 "
+              : "stroke-gray-900 ",
           animated: targetHandle.split("|")[0] === "Text",
           selected: false,
         },
@@ -527,8 +538,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       edge.style = { stroke: "inherit" };
       edge.className =
         edge.targetHandle.split("|")[0] === "Text"
-          ? "stroke-gray-800 dark:stroke-gray-300"
-          : "stroke-gray-900 dark:stroke-gray-200";
+          ? "stroke-gray-800 "
+          : "stroke-gray-900 ";
       edge.animated = edge.targetHandle.split("|")[0] === "Text";
     });
   };
@@ -649,6 +660,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
         tabsState,
         setTabsState,
         paste,
+        getTweak,
+        setTweak,
       }}
     >
       {children}

src/frontend/src/controllers/API/index.ts

@@ -52,16 +52,18 @@ export async function postValidateCode(
 
 /**
  * Checks the prompt for the code block by sending it to an API endpoint.
- *
+ * @param {string} name - The name of the field to check.
  * @param {string} template - The template string of the prompt to check.
  * @param {APIClassType} frontend_node - The frontend node to check.
  * @returns {Promise<AxiosResponse<PromptTypeAPI>>} A promise that resolves to an AxiosResponse containing the validation results.
  */
 export async function postValidatePrompt(
+  name: string,
   template: string,
   frontend_node: APIClassType
 ): Promise<AxiosResponse<PromptTypeAPI>> {
   return await axios.post("/api/v1/validate/prompt", {
+    name: name,
     template: template,
     frontend_node: frontend_node,
   });
@@ -317,7 +319,7 @@ export async function getBuildStatus(
 export async function postBuildInit(
   flow: FlowType
 ): Promise<AxiosResponse<InitTypeAPI>> {
-  return await axios.post(`/api/v1/build/init`, flow);
+  return await axios.post(`/api/v1/build/init/${flow.id}`, flow);
 }
 
 // fetch(`/upload/${id}`, {

src/frontend/src/flow_constants.tsx

@@ -0,0 +1,364 @@
+/**
+ * Default description for the flow
+ * @constant
+ */
+export const DESCRIPTIONS: string[] = [
+  "Chain the Words, Master Language!",
+  "Language Architect at Work!",
+  "Empowering Language Engineering.",
+  "Craft Language Connections Here.",
+  "Create, Connect, Converse.",
+  "Smart Chains, Smarter Conversations.",
+  "Bridging Prompts for Brilliance.",
+  "Language Models, Unleashed.",
+  "Your Hub for Text Generation.",
+  "Promptly Ingenious!",
+  "Building Linguistic Labyrinths.",
+  "Create, Chain, Communicate.",
+  "Connect the Dots, Craft Language.",
+  "Interactive Language Weaving.",
+  "Generate, Innovate, Communicate.",
+  "Conversation Catalyst Engine.",
+  "Language Chainlink Master.",
+  "Design Dialogues with LangFlow.",
+  "Nurture NLP Nodes Here.",
+  "Conversational Cartography Unlocked.",
+  "Design, Develop, Dialogize.",
+  "Unleashing Linguistic Creativity.",
+  "Graph Your Way to Great Conversations.",
+  "The Power of Language at Your Fingertips.",
+  "Sculpting Language with Precision.",
+  "Where Language Meets Logic.",
+  "Building Intelligent Interactions.",
+  "Your Passport to Linguistic Landscapes.",
+  "Create, Curate, Communicate with LangFlow.",
+  "Flow into the Future of Language.",
+  "Mapping Meaningful Conversations.",
+  "Unravel the Art of Articulation.",
+  "Language Engineering Excellence.",
+  "Navigate the Networks of Conversation.",
+  "Crafting Conversations, One Node at a Time.",
+  "The Pinnacle of Prompt Generation.",
+  "Language Models, Mapped and Mastered.",
+  "Powerful Prompts, Perfectly Positioned.",
+  "Innovation in Interaction with LangFlow.",
+  "Your Toolkit for Text Generation.",
+  "Unfolding Linguistic Possibilities.",
+  "Building Powerful Solutions with Language Models.",
+  "Uncover Business Opportunities with NLP.",
+  "Harness the Power of Conversational AI.",
+  "Transform Your Business with Smart Dialogues.",
+  "Craft Meaningful Interactions, Generate Value.",
+  "Unleashing Business Potential through Language Engineering.",
+  "Empowering Enterprises with Intelligent Interactions.",
+  "Driving Innovation in Business Communication.",
+  "Catalyzing Business Growth through Conversational AI.",
+  "Text Generation Meets Business Transformation.",
+  "Navigate the Linguistic Landscape, Discover Opportunities.",
+  "Create Powerful Connections, Boost Business Value.",
+  "Empowering Communication, Enabling Opportunities.",
+  "Advanced NLP for Groundbreaking Business Solutions.",
+  "Innovation in Interaction, Revolution in Revenue.",
+  "Maximize Impact with Intelligent Conversations.",
+  "Beyond Text Generation - Unleashing Business Opportunities.",
+  "Unlock the Power of AI in Your Business Conversations.",
+  "Crafting Dialogues that Drive Business Success.",
+  "Engineered for Excellence, Built for Business.",
+];
+
+/**
+ * Adjectives for the name of the flow
+ * @constant
+ *
+ */
+export const ADJECTIVES: string[] = [
+  "admiring",
+  "adoring",
+  "agitated",
+  "amazing",
+  "angry",
+  "awesome",
+  "backstabbing",
+  "berserk",
+  "big",
+  "boring",
+  "clever",
+  "cocky",
+  "compassionate",
+  "condescending",
+  "cranky",
+  "desperate",
+  "determined",
+  "distracted",
+  "dreamy",
+  "drunk",
+  "ecstatic",
+  "elated",
+  "elegant",
+  "evil",
+  "fervent",
+  "focused",
+  "furious",
+  "gigantic",
+  "gloomy",
+  "goofy",
+  "grave",
+  "happy",
+  "high",
+  "hopeful",
+  "hungry",
+  "insane",
+  "jolly",
+  "jovial",
+  "kickass",
+  "lonely",
+  "loving",
+  "mad",
+  "modest",
+  "naughty",
+  "nauseous",
+  "nostalgic",
+  "pedantic",
+  "pensive",
+  "prickly",
+  "reverent",
+  "romantic",
+  "sad",
+  "serene",
+  "sharp",
+  "sick",
+  "silly",
+  "sleepy",
+  "small",
+  "stoic",
+  "stupefied",
+  "suspicious",
+  "tender",
+  "thirsty",
+  "tiny",
+  "trusting",
+  "bubbly",
+  "charming",
+  "cheerful",
+  "comical",
+  "dazzling",
+  "delighted",
+  "dynamic",
+  "effervescent",
+  "enthusiastic",
+  "exuberant",
+  "fluffy",
+  "friendly",
+  "funky",
+  "giddy",
+  "giggly",
+  "gleeful",
+  "goofy",
+  "graceful",
+  "grinning",
+  "hilarious",
+  "inquisitive",
+  "joyous",
+  "jubilant",
+  "lively",
+  "mirthful",
+  "mischievous",
+  "optimistic",
+  "peppy",
+  "perky",
+  "playful",
+  "quirky",
+  "radiant",
+  "sassy",
+  "silly",
+  "spirited",
+  "sprightly",
+  "twinkly",
+  "upbeat",
+  "vibrant",
+  "witty",
+  "zany",
+  "zealous",
+];
+/**
+ * Nouns for the name of the flow
+ * @constant
+ *
+ */
+export const NOUNS: string[] = [
+  "albattani",
+  "allen",
+  "almeida",
+  "archimedes",
+  "ardinghelli",
+  "aryabhata",
+  "austin",
+  "babbage",
+  "banach",
+  "bardeen",
+  "bartik",
+  "bassi",
+  "bell",
+  "bhabha",
+  "bhaskara",
+  "blackwell",
+  "bohr",
+  "booth",
+  "borg",
+  "bose",
+  "boyd",
+  "brahmagupta",
+  "brattain",
+  "brown",
+  "carson",
+  "chandrasekhar",
+  "colden",
+  "cori",
+  "cray",
+  "curie",
+  "darwin",
+  "davinci",
+  "dijkstra",
+  "dubinsky",
+  "easley",
+  "einstein",
+  "elion",
+  "engelbart",
+  "euclid",
+  "euler",
+  "fermat",
+  "fermi",
+  "feynman",
+  "franklin",
+  "galileo",
+  "gates",
+  "goldberg",
+  "goldstine",
+  "goldwasser",
+  "golick",
+  "goodall",
+  "hamilton",
+  "hawking",
+  "heisenberg",
+  "heyrovsky",
+  "hodgkin",
+  "hoover",
+  "hopper",
+  "hugle",
+  "hypatia",
+  "jang",
+  "jennings",
+  "jepsen",
+  "joliot",
+  "jones",
+  "kalam",
+  "kare",
+  "keller",
+  "khorana",
+  "kilby",
+  "kirch",
+  "knuth",
+  "kowalevski",
+  "lalande",
+  "lamarr",
+  "leakey",
+  "leavitt",
+  "lichterman",
+  "liskov",
+  "lovelace",
+  "lumiere",
+  "mahavira",
+  "mayer",
+  "mccarthy",
+  "mcclintock",
+  "mclean",
+  "mcnulty",
+  "meitner",
+  "meninsky",
+  "mestorf",
+  "minsky",
+  "mirzakhani",
+  "morse",
+  "murdock",
+  "newton",
+  "nobel",
+  "noether",
+  "northcutt",
+  "noyce",
+  "panini",
+  "pare",
+  "pasteur",
+  "payne",
+  "perlman",
+  "pike",
+  "poincare",
+  "poitras",
+  "ptolemy",
+  "raman",
+  "ramanujan",
+  "ride",
+  "ritchie",
+  "roentgen",
+  "rosalind",
+  "saha",
+  "sammet",
+  "shaw",
+  "shirley",
+  "shockley",
+  "sinoussi",
+  "snyder",
+  "spence",
+  "stallman",
+  "stonebraker",
+  "swanson",
+  "swartz",
+  "swirles",
+  "tesla",
+  "thompson",
+  "torvalds",
+  "turing",
+  "varahamihira",
+  "visvesvaraya",
+  "volhard",
+  "wescoff",
+  "williams",
+  "wilson",
+  "wing",
+  "wozniak",
+  "wright",
+  "yalow",
+  "yonath",
+  "coulomb",
+  "degrasse",
+  "dewey",
+  "edison",
+  "eratosthenes",
+  "faraday",
+  "galton",
+  "gauss",
+  "herschel",
+  "hubble",
+  "joule",
+  "kaku",
+  "kepler",
+  "khayyam",
+  "lavoisier",
+  "maxwell",
+  "mendel",
+  "mendeleev",
+  "ohm",
+  "pascal",
+  "planck",
+  "riemann",
+  "schrodinger",
+  "sagan",
+  "tesla",
+  "tyson",
+  "volta",
+  "watt",
+  "weber",
+  "wien",
+  "zoBell",
+  "zuse",
+  "carroll",
+];

src/frontend/src/icons/VertexAI/index.tsx

@@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as VertexAISVG } from "./vertex_ai.svg";
+
+export const VertexAIIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <VertexAISVG ref={ref} {...props} />;
+});

src/frontend/src/icons/VertexAI/vertex_ai.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32" fit="" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" focusable="false"><path d="M26.69 18.53a1 1 0 00-1.4-.22L16 25.17v.29a1 1 0 110 1.91v.05a1 1 0 00.6-.19l9.88-7.3a1 1 0 00.21-1.4z" fill="#80868b"></path><path d="M16 27.37a1 1 0 110-1.91v-.29l-9.29-6.86a1 1 0 00-1.4.22 1 1 0 00.21 1.4l9.89 7.3a1 1 0 00.59.19v-.05z" fill="#9ba0a5"></path><path d="M16 24.46a2 2 0 102 2 2 2 0 00-2-2zm0 2.91a1 1 0 111-.95 1 1 0 01-1 .95z" fill="#606368"></path><path d="M8 8.14a1 1 0 01-1-1V4.63a1 1 0 112 0v2.51a1 1 0 01-1 1z" fill="#9ba0a5"></path><circle cx="7.97" cy="16" r="1.01" fill="#9ba0a5"></circle><circle cx="7.97" cy="13.05" r="1.01" fill="#9ba0a5"></circle><circle cx="7.97" cy="10.09" r="1.01" fill="#9ba0a5"></circle><path d="M24 11.07a1 1 0 01-1-1V7.55a1 1 0 012 0v2.52a1 1 0 01-1 1z" fill="#606368"></path><circle cx="24.03" cy="16.01" r="1.01" fill="#606368"></circle><circle cx="24.03" cy="13.02" r="1.01" fill="#606368"></circle><circle cx="24.03" cy="4.63" r="1.01" fill="#606368"></circle><path d="M16 20a1 1 0 01-1-1v-2.54a1 1 0 012 0V19a1 1 0 01-1 1z" fill="#80868b"></path><circle cx="16" cy="21.93" r="1.01" fill="#80868b"></circle><circle cx="16" cy="13.51" r="1.01" fill="#80868b"></circle><circle cx="16" cy="10.56" r="1.01" fill="#80868b"></circle><path d="M20 14.05a1 1 0 01-1-1v-2.51a1 1 0 112 0v2.51a1 1 0 01-1 1z" fill="#606368"></path><circle cx="20.02" cy="7.58" r="1.01" fill="#606368"></circle><circle cx="20.02" cy="18.92" r="1.01" fill="#606368"></circle><circle cx="20.02" cy="15.97" r="1.01" fill="#606368"></circle><circle cx="11.98" cy="18.92" r="1.01" fill="#9ba0a5"></circle><circle cx="11.98" cy="10.56" r="1.01" fill="#9ba0a5"></circle><circle cx="11.98" cy="7.58" r="1.01" fill="#9ba0a5"></circle><path d="M12 17a1 1 0 01-1-1v-2.54a1 1 0 012 0V16a1 1 0 01-1 1z" fill="#9ba0a5"></path></svg>