Adding New Components, XSS treatment in the chat, other fixes (#571)

- PostgresChatMessageHistory added to allow loading memory from external sources - MultiQueryRetriever added which builds better queries to Retrievers/VectorStores - XSS protection in the chat that uses markdown - FrontendNode refactor start - Fix Serializable nodes that were exposing wrong base classes on Components - ConversationEntityMemory as the first memory with EntityStore (entity stores coming very soon)
2023-06-29 23:52:12 +01:00 · 2023-06-29 23:52:12 +01:00 · d3793e364c
commit d3793e364c
parent 98fb7c84c7 ca32bc3ab5
60 changed files with 2382 additions and 484 deletions
--- a/.github/workflows/codeql.yml
+++ b/.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}}"
--- a/poetry.lock
+++ b/poetry.lock
--- a/pyproject.toml
+++ b/pyproject.toml
@ -25,22 +25,21 @@ langflow = "langflow.__main__:main"
 python = ">=3.9,<3.12"
 fastapi = "^0.98.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.218"
+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.47", 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,8 @@ pinecone-client = "^2.2.2"
 supabase = "^1.0.3"
 pymongo = "^4.4.0"
 certifi = "^2023.5.7"
-
+psycopg = "^3.1.9"
+psycopg-binary = "^3.1.9"

 [tool.poetry.dev-dependencies]
 black = "^23.1.0"
@ -85,6 +85,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]
--- a/src/backend/langflow/api/v1/chat.py
+++ b/src/backend/langflow/api/v1/chat.py
@ -1,12 +1,6 @@
-from fastapi import (
-    APIRouter,
-    HTTPException,
-    WebSocket,
-    WebSocketException,
-    status,
-)
+from fastapi import APIRouter, HTTPException, WebSocket, WebSocketException, status
 from fastapi.responses import StreamingResponse
-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
@ -32,15 +26,29 @@ async def chat(client_id: str, websocket: WebSocket):
        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:
@ -52,8 +60,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(
@ -77,7 +86,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"
@ -95,6 +109,7 @@ async def stream_build(flow_id: str):
                return

            number_of_nodes = len(graph.nodes)
+            flow_data_store[flow_id]["status"] = BuildStatus.IN_PROGRESS
            for i, vertex in enumerate(graph.generator_build(), 1):
                try:
                    log_dict = {
@ -110,6 +125,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,
@ -121,8 +137,10 @@ async def stream_build(flow_id: str):
                yield str(StreamData(event="message", data=response))

            chat_manager.set_cache(flow_id, graph.build())
+            flow_data_store[flow_id]["status"] = BuildStatus.SUCCESS
        except Exception as 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))
--- a/src/backend/langflow/api/v1/endpoints.py
+++ b/src/backend/langflow/api/v1/endpoints.py
@ -11,7 +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

@ -21,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
--- a/src/backend/langflow/api/v1/schemas.py
+++ b/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."""

--- a/src/backend/langflow/config.yaml
+++ b/src/backend/langflow/config.yaml
@ -120,6 +120,16 @@ llms:
  HuggingFaceHub:
    documentation: "https://python.langchain.com/docs/modules/model_io/models/llms/integrations/huggingface_hub"
 memories:
+  # 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:
@ -130,6 +140,7 @@ memories:
    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"
+
 prompts:
  PromptTemplate:
    documentation: "https://python.langchain.com/docs/modules/model_io/prompts/prompt_templates/"
@ -227,6 +238,12 @@ utilities:
    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:
    documentation: "https://python.langchain.com/docs/modules/data_connection/vectorstores/integrations/chroma"
--- a/src/backend/langflow/custom/customs.py
+++ b/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(),
--- a/src/backend/langflow/graph/init.py
+++ b/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",
 ]
--- a/src/backend/langflow/graph/graph/constants.py
+++ b/src/backend/langflow/graph/graph/constants.py
@ -1,18 +1,5 @@
 from langflow.graph.vertex.base import Vertex
-from langflow.graph.vertex.types import (
-    AgentVertex,
-    ChainVertex,
-    DocumentLoaderVertex,
-    EmbeddingVertex,
-    LLMVertex,
-    MemoryVertex,
-    PromptVertex,
-    TextSplitterVertex,
-    ToolVertex,
-    ToolkitVertex,
-    VectorStoreVertex,
-    WrapperVertex,
-)
+from langflow.graph.vertex import types
 from langflow.interface.agents.base import agent_creator
 from langflow.interface.chains.base import chain_creator
 from langflow.interface.document_loaders.base import documentloader_creator
@ -25,22 +12,23 @@ from langflow.interface.toolkits.base import toolkits_creator
 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.retrievers.base import retriever_creator

 from typing import Dict, Type


 VERTEX_TYPE_MAP: Dict[str, Type[Vertex]] = {
-    **{t: PromptVertex for t in prompt_creator.to_list()},
-    **{t: AgentVertex for t in agent_creator.to_list()},
-    **{t: ChainVertex for t in chain_creator.to_list()},
-    **{t: ToolVertex for t in tool_creator.to_list()},
-    **{t: ToolkitVertex for t in toolkits_creator.to_list()},
-    **{t: WrapperVertex for t in wrapper_creator.to_list()},
-    **{t: LLMVertex for t in llm_creator.to_list()},
-    **{t: MemoryVertex for t in memory_creator.to_list()},
-    **{t: EmbeddingVertex for t in embedding_creator.to_list()},
-    **{t: VectorStoreVertex for t in vectorstore_creator.to_list()},
-    **{t: DocumentLoaderVertex for t in documentloader_creator.to_list()},
-    **{t: TextSplitterVertex for t in textsplitter_creator.to_list()},
+    **{t: types.PromptVertex for t in prompt_creator.to_list()},
+    **{t: types.AgentVertex for t in agent_creator.to_list()},
+    **{t: types.ChainVertex for t in chain_creator.to_list()},
+    **{t: types.ToolVertex for t in tool_creator.to_list()},
+    **{t: types.ToolkitVertex for t in toolkits_creator.to_list()},
+    **{t: types.WrapperVertex for t in wrapper_creator.to_list()},
+    **{t: types.LLMVertex for t in llm_creator.to_list()},
+    **{t: types.MemoryVertex for t in memory_creator.to_list()},
+    **{t: types.EmbeddingVertex for t in embedding_creator.to_list()},
+    **{t: types.VectorStoreVertex for t in vectorstore_creator.to_list()},
+    **{t: types.DocumentLoaderVertex for t in documentloader_creator.to_list()},
+    **{t: types.TextSplitterVertex for t in textsplitter_creator.to_list()},
+    **{t: types.RetrieverVertex for t in retriever_creator.to_list()},
 }
--- a/src/backend/langflow/graph/vertex/types.py
+++ b/src/backend/langflow/graph/vertex/types.py
@ -112,6 +112,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")
--- a/src/backend/langflow/interface/importing/utils.py
+++ b/src/backend/langflow/interface/importing/utils.py
@ -44,6 +44,7 @@ def import_by_type(_type: str, name: str) -> Any:
        "documentloaders": import_documentloader,
        "textsplitters": import_textsplitter,
        "utilities": import_utility,
+        "retrievers": import_retriever,
    }
    if _type == "llms":
        key = "chat" if "chat" in name.lower() else "llm"
@ -59,6 +60,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}")
--- a/src/backend/langflow/interface/initialize/loading.py
+++ b/src/backend/langflow/interface/initialize/loading.py
@ -15,13 +15,13 @@ from langflow.interface.custom_lists import CUSTOM_NODES
 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.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
-from langflow.chat.config import ChatConfig


 def instantiate_class(node_type: str, base_type: str, params: Dict) -> Any:
@ -49,8 +49,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])
@ -80,16 +80,44 @@ def instantiate_based_on_type(class_object, base_type, node_type, params):
        return instantiate_chains(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)


-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
-    ChatConfig.streaming = "jina" not in params.get("openai_api_base", "")
+def instantiate_memory(node_type, class_object, params):
+    try:
+        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_llm(node_type, class_object, params: Dict):
    return class_object(**params)


@ -262,6 +290,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
@ -274,6 +304,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,
    )

--- a/src/backend/langflow/interface/listing.py
+++ b/src/backend/langflow/interface/listing.py
@ -11,6 +11,7 @@ from langflow.interface.tools.base import tool_creator
 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.retrievers.base import retriever_creator


 def get_type_dict():
@ -28,6 +29,7 @@ def get_type_dict():
        "embeddings": embedding_creator.to_list(),
        "textSplitters": textsplitter_creator.to_list(),
        "utilities": utility_creator.to_list(),
+        "retrievers": retriever_creator.to_list(),
    }


--- a/src/backend/langflow/interface/memories/base.py
+++ b/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
--- a/src/backend/langflow/interface/retrievers/init.py
+++ b/src/backend/langflow/interface/retrievers/init.py
--- a/src/backend/langflow/interface/retrievers/base.py
+++ b/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()
--- a/src/backend/langflow/interface/types.py
+++ b/src/backend/langflow/interface/types.py
@ -11,6 +11,7 @@ from langflow.interface.tools.base import tool_creator
 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.retrievers.base import retriever_creator


 def get_type_list():
@ -44,6 +45,7 @@ def build_langchain_types_dict():  # sourcery skip: dict-assign-update-to-union
        documentloader_creator,
        textsplitter_creator,
        utility_creator,
+        retriever_creator,
    ]

    all_types = {}
@ -52,3 +54,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()
--- a/src/backend/langflow/processing/process.py
+++ b/src/backend/langflow/processing/process.py
@ -107,6 +107,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


--- a/src/backend/langflow/settings.py
+++ b/src/backend/langflow/settings.py
@ -15,6 +15,7 @@ class Settings(BaseSettings):
    vectorstores: dict = {}
    documentloaders: dict = {}
    wrappers: dict = {}
+    retrievers: dict = {}
    toolkits: dict = {}
    textsplitters: dict = {}
    utilities: dict = {}
@ -47,6 +48,11 @@ class Settings(BaseSettings):
        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.dev = dev

    def update_settings(self, **kwargs):
--- a/src/backend/langflow/template/frontend_node/base.py
+++ b/src/backend/langflow/template/frontend_node/base.py
@ -1,12 +1,43 @@
 import re
 from typing import List, Optional

-from pydantic import BaseModel
+from pydantic import BaseModel, Field

 from langflow.template.frontend_node.constants import FORCE_SHOW_FIELDS
 from langflow.template.field.base import TemplateField
 from langflow.template.template.base import Template
 from langflow.utils import constants
+from langflow.template.frontend_node.formatter import field_formatters
+
+CLASSES_TO_REMOVE = ["Serializable", "BaseModel"]
+
+
+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):
@ -16,6 +47,21 @@ class FrontendNode(BaseModel):
    name: str = ""
    display_name: str = ""
    documentation: str = ""
+    field_formatters: FieldFormatters = Field(default_factory=FieldFormatters)
+
+    def process_base_classes(self) -> None:
+        """Removes unwanted base classes from the list of base classes."""
+        self.base_classes = [
+            base_class
+            for base_class in self.base_classes
+            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."""
@ -23,6 +69,7 @@ class FrontendNode(BaseModel):

    def to_dict(self) -> dict:
        """Returns a dict representation of the frontend node."""
+        self.process_base_classes()
        return {
            self.name: {
                "template": self.template.to_dict(self.format_field),
@ -42,33 +89,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:
--- a/src/backend/langflow/template/frontend_node/chains.py
+++ b/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
--- a/src/backend/langflow/template/frontend_node/constants.py
+++ b/src/backend/langflow/template/frontend_node/constants.py
@ -33,6 +33,22 @@ 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
--- a/src/backend/langflow/template/frontend_node/formatter/init.py
+++ b/src/backend/langflow/template/frontend_node/formatter/init.py
--- a/src/backend/langflow/template/frontend_node/formatter/base.py
+++ b/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
--- a/src/backend/langflow/template/frontend_node/formatter/field_formatters.py
+++ b/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"
--- a/src/backend/langflow/template/frontend_node/llms.py
+++ b/src/backend/langflow/template/frontend_node/llms.py
@ -1,7 +1,9 @@
+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


@ -19,6 +21,10 @@ class LLMFrontendNode(FrontendNode):
        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":
@ -35,6 +41,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 = {
@ -42,6 +55,7 @@ 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():
--- a/src/backend/langflow/template/frontend_node/memories.py
+++ b/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(
@ -64,3 +72,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"]
--- a/src/backend/langflow/template/frontend_node/retrievers.py
+++ b/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
--- a/src/backend/langflow/utils/util.py
+++ b/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]
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@ -13,9 +13,11 @@
        "@headlessui/react": "^1.7.10",
        "@heroicons/react": "^2.0.15",
        "@mui/material": "^5.11.9",
+        "@radix-ui/react-accordion": "^1.1.2",
        "@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",
@ -27,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",
@ -34,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",
@ -53,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",
@ -114,6 +118,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",
@ -1366,6 +1384,37 @@
        "@babel/runtime": "^7.13.10"
      }
    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.1.2.tgz",
+      "integrity": "sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collapsible": "1.0.3",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-arrow": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
@ -1419,6 +1468,36 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz",
+      "integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-collection": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
@ -1630,6 +1709,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",
@ -3106,6 +3193,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",
@ -3444,7 +3564,7 @@
      "version": "16.18.12",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.12.tgz",
      "integrity": "sha512-vzLe5NaNMjIE3mcddFVGlAXN1LEWueUsMsOJWaT6wWMJGyljHAWHznqfnKUQWGzu7TLPrGvWdNAsvQYW+C0xtw==",
-      "dev": true
+      "devOptional": true
    },
    "node_modules/@types/parse-json": {
      "version": "4.0.0",
@ -3547,6 +3667,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",
@ -4491,6 +4616,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",
@ -5009,6 +5139,11 @@
        "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.440",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.440.tgz",
@ -5504,7 +5639,6 @@
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
      "hasInstallScript": true,
      "optional": true,
      "os": [
@ -6864,9 +6998,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"
      },
@ -7839,11 +7973,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",
@ -8112,9 +8268,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"
      },
@ -8211,6 +8367,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",
@ -9287,23 +9448,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",
@ -9323,6 +9501,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",
@ -9576,6 +9783,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",
@ -9951,6 +10166,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",
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@ -8,9 +8,11 @@
    "@headlessui/react": "^1.7.10",
    "@heroicons/react": "^2.0.15",
    "@mui/material": "^5.11.9",
+    "@radix-ui/react-accordion": "^1.1.2",
    "@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",
@ -22,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",
@ -29,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",
@ -48,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",
--- a/src/frontend/src/components/AccordionComponent/index.tsx
+++ b/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>
+    </>
+  );
+}
--- a/src/frontend/src/components/chatComponent/chatMessage/index.tsx
+++ b/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 (
@ -23,13 +23,14 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
                <MessageCircle className="w-5 h-5 animate-bounce" />
              </div>
            )}
+
            {chat.thought && chat.thought !== "" && !hidden && (
              <div
                onClick={() => setHidden((prev) => !prev)}
                style={{ backgroundColor: nodeColors["thought"] }}
-                className=" text-start inline-block w-full pb-3 pt-3 px-5 cursor-pointer"
+                className="text-start inline-block w-full pb-3 pt-3 px-5 cursor-pointer"
                dangerouslySetInnerHTML={{
-                  __html: convert.toHtml(chat.thought),
+                  __html: DOMPurify.sanitize(convert.toHtml(chat.thought)),
                }}
              ></div>
            )}
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@ -12,7 +12,9 @@ export default function CodeAreaComponent({
  disabled,
  editNode = false,
 }: TextAreaComponentType) {
-  const [myValue, setMyValue] = useState(value);
+  const [myValue, setMyValue] = useState(
+    typeof value == "string" ? value : JSON.stringify(value)
+  );
  const { openPopUp } = useContext(PopUpContext);
  useEffect(() => {
    if (disabled) {
@ -22,7 +24,7 @@ export default function CodeAreaComponent({
  }, [disabled, onChange]);

  useEffect(() => {
-    setMyValue(value);
+    setMyValue(typeof value == "string" ? value : JSON.stringify(value));
  }, [value]);

  return (
@ -47,7 +49,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
+                INPUT_STYLE +
+                (disabled ? " bg-gray-200 " : "")
              : "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" : "")
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@ -13,6 +13,7 @@ export default function Dropdown({
  onSelect,
  editNode = false,
  numberOfOptions = 0,
+  apiModal = false,
 }: DropDownComponentType) {
  const { closePopUp } = useContext(PopUpContext);

@ -66,11 +67,12 @@ 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 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
+                      : "nowheel z-10 mt-1 max-h-60 w-full overflow-auto overflow-y rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm ",
+                    apiModal ? "w-[250px] mb-2" : "absolute"
+                  )}
                >
                  {options.map((option, id) => (
                    <Listbox.Option
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@ -59,7 +59,8 @@ export default function FloatComponent({
        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
+              INPUT_STYLE +
+              (disabled ? " bg-gray-200 " : "")
            : "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" : "")
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@ -98,23 +98,24 @@ export default function InputFileComponent({
        disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
      }
    >
-      <div className="w-full flex items-center gap-2">
+      <div className="w-full flex 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
+                INPUT_STYLE +
+                (disabled ? " bg-gray-200 " : "")
              : "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" : "")
+                (disabled ? " bg-gray-200 " : "")
          }
        >
          {myValue !== "" ? myValue : "No file"}
        </span>
        <button onClick={handleButtonClick}>
          {!editNode && !loading && (
-            <FileSearch2 className="w-6 h-6 hover:text-ring" />
+            <FileSearch2 className="w-6 h-6 hover:text-ring ml-3" />
          )}
          {!editNode && loading && (
            <span className="loading loading-spinner loading-sm pl-3 h-8 pointer-events-none"></span>
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@ -12,6 +12,7 @@ export default function InputListComponent({
  onChange,
  disabled,
  editNode = false,
+  onAddInput,
 }: InputListComponentType) {
  const [inputList, setInputList] = useState(value ?? [""]);
  const { closePopUp } = useContext(PopUpContext);
@ -42,7 +43,8 @@ export default function InputListComponent({
            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
+                  INPUT_STYLE +
+                  (disabled ? " bg-gray-200 " : "")
                : "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"
@ -63,6 +65,7 @@ export default function InputListComponent({
                setInputList((old) => {
                  let newInputList = _.cloneDeep(old);
                  newInputList.push("");
+                  onAddInput(newInputList);
                  return newInputList;
                });
                onChange(inputList);
@ -76,6 +79,7 @@ export default function InputListComponent({
                setInputList((old) => {
                  let newInputList = _.cloneDeep(old);
                  newInputList.splice(idx, 1);
+                  onAddInput(newInputList);
                  return newInputList;
                });
                onChange(inputList);
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@ -73,7 +73,8 @@ export default function IntComponent({
        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
+              INPUT_STYLE +
+              (disabled ? " bg-gray-200 " : "")
            : "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" : "")
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@ -31,7 +31,7 @@ export default function PromptAreaComponent({
        disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full"
      }
    >
-      <div className="w-full flex items-center gap-3">
+      <div className="w-full flex items-center">
        <span
          onClick={() => {
            openPopUp(
@ -50,7 +50,8 @@ 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
+                INPUT_STYLE +
+                (disabled ? " bg-gray-200 " : "")
              : "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" : "")
          }
@ -74,7 +75,7 @@ export default function PromptAreaComponent({
          }}
        >
          {!editNode && (
-            <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300" />
+            <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300 ml-3" />
          )}
        </button>
      </div>
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@ -53,7 +53,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
+                INPUT_STYLE +
+                (disabled ? " bg-gray-200 " : "")
              : "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" : "")
          }
--- a/src/frontend/src/components/ui/accordion.tsx
+++ b/src/frontend/src/components/ui/accordion.tsx
@ -0,0 +1,59 @@
+"use client";
+
+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 AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="h-4 w-4 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "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;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@ -54,7 +54,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
@ -70,7 +70,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:
    """
@ -100,7 +104,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 \\
@ -108,27 +112,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
--- a/src/frontend/src/contexts/popUpContext.tsx
+++ b/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>
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/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() {
@ -644,6 +647,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
        tabsState,
        setTabsState,
        paste,
+        getTweak,
+        setTweak,
      }}
    >
      {children}
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@ -311,7 +311,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}`, {
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
@ -26,14 +26,42 @@ import {
  TabsTrigger,
 } from "../../components/ui/tabs";
 import { Check, Clipboard, Code2 } from "lucide-react";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/ui/table";
+import { buildTweaks, classNames, limitScrollFieldsModal } from "../../utils";
+import AccordionComponent from "../../components/AccordionComponent";
+import CodeAreaComponent from "../../components/codeAreaComponent";
+import Dropdown from "../../components/dropdownComponent";
+import FloatComponent from "../../components/floatComponent";
+import InputComponent from "../../components/inputComponent";
+import InputFileComponent from "../../components/inputFileComponent";
+import InputListComponent from "../../components/inputListComponent";
+import IntComponent from "../../components/intComponent";
+import PromptAreaComponent from "../../components/promptComponent";
+import TextAreaComponent from "../../components/textAreaComponent";
+import ToggleShadComponent from "../../components/toggleShadComponent";
+import ShadTooltip from "../../components/ShadTooltipComponent";
+import { cloneDeep, filter } from "lodash";
+import { TabsContext } from "../../contexts/tabsContext";

 export default function ApiModal({ flow }: { flow: FlowType }) {
  const [open, setOpen] = useState(true);
  const { dark } = useContext(darkContext);
-  const { closePopUp } = useContext(PopUpContext);
+  const { closePopUp, closeEdit, setCloseEdit } = useContext(PopUpContext);
  const [activeTab, setActiveTab] = useState("0");
  const [isCopied, setIsCopied] = useState<Boolean>(false);
-
+  const [enabled, setEnabled] = useState(null);
+  const [openAccordion, setOpenAccordion] = useState([]);
+  const tweak = useRef([]);
+  const tweaksList = useRef([]);
+  const { setTweak, getTweak } = useContext(TabsContext);
  const copyToClipboard = () => {
    if (!navigator.clipboard || !navigator.clipboard.writeText) {
      return;
@ -47,18 +75,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
      }, 2000);
    });
  };
-  function setModalOpen(x: boolean) {
-    setOpen(x);
-    if (x === false) {
-      closePopUp();
-    }
-  }
-
-  const pythonApiCode = getPythonApiCode(flow);
-
-  const curl_code = getCurlCode(flow);
-  const pythonCode = getPythonCode(flow);
-
+  const pythonApiCode = getPythonApiCode(flow, tweak.current);
+  const curl_code = getCurlCode(flow, tweak.current);
+  const pythonCode = getPythonCode(flow, tweak.current);
+  const tweaksCode = buildTweaks(flow);
  const tabs = [
    {
      name: "cURL",
@ -80,10 +100,169 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
      code: pythonCode,
    },
  ];
+
+  useEffect(() => {
+    if (closeEdit !== "") {
+      tweak.current = getTweak;
+      if (tweak.current.length > 0) {
+        setActiveTab("3");
+        openAccordions();
+      } else {
+        startTweaks();
+      }
+    } else {
+      startTweaks();
+    }
+  }, [closeEdit]);
+
+  useEffect(() => {
+    filterNodes();
+  }, []);
+
+  if (Object.keys(tweaksCode).length > 0) {
+    tabs.push({
+      name: "Tweaks",
+      mode: "python",
+      image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+      code: pythonCode,
+    });
+  }
+
+  function setModalOpen(x: boolean) {
+    setOpen(x);
+    if (x === false) {
+      setCloseEdit("");
+      setTweak([]);
+      closePopUp();
+    }
+  }
+
+  function startTweaks() {
+    tweak.current.push(buildTweaks(flow));
+  }
+
+  function filterNodes() {
+    let arrNodesWithValues = [];
+
+    flow["data"]["nodes"].forEach((t) => {
+      Object.keys(t["data"]["node"]["template"])
+        .filter(
+          (n) =>
+            n.charAt(0) !== "_" &&
+            t.data.node.template[n].show &&
+            (t.data.node.template[n].type === "str" ||
+              t.data.node.template[n].type === "bool" ||
+              t.data.node.template[n].type === "float" ||
+              t.data.node.template[n].type === "code" ||
+              t.data.node.template[n].type === "prompt" ||
+              t.data.node.template[n].type === "file" ||
+              t.data.node.template[n].type === "int")
+        )
+        .map((n, i) => {
+          arrNodesWithValues.push(t["id"]);
+        });
+    });
+
+    tweaksList.current = arrNodesWithValues.filter((value, index, self) => {
+      return self.indexOf(value) === index;
+    });
+  }
+
+  function buildTweakObject(tw, changes, template) {
+    if (template.type === "float") {
+      changes = parseFloat(changes);
+    }
+    if (template.type === "int") {
+      changes = parseInt(changes);
+    }
+    if (template.list === true && Array.isArray(changes)) {
+      changes = changes?.filter((x) => x !== "");
+    }
+
+    const existingTweak = tweak.current.find((element) =>
+      element.hasOwnProperty(tw)
+    );
+
+    if (existingTweak) {
+      existingTweak[tw][template["name"]] = changes;
+
+      if (existingTweak[tw][template["name"]] == template.value) {
+        tweak.current.forEach((element) => {
+          if (element[tw] && Object.keys(element[tw])?.length === 0) {
+            tweak.current = tweak.current.filter((obj) => {
+              const prop = obj[Object.keys(obj)[0]].prop;
+              return prop !== undefined && prop !== null && prop !== "";
+            });
+          }
+        });
+      }
+    } else {
+      const newTweak = {
+        [tw]: {
+          [template["name"]]: changes,
+        },
+      };
+      tweak.current.push(newTweak);
+    }
+
+    const pythonApiCode = getPythonApiCode(flow, tweak.current);
+    const curl_code = getCurlCode(flow, tweak.current);
+    const pythonCode = getPythonCode(flow, tweak.current);
+
+    tabs[0].code = curl_code;
+    tabs[1].code = pythonApiCode;
+    tabs[2].code = pythonCode;
+
+    setTweak(tweak.current);
+  }
+
+  function buildContent(value) {
+    const htmlContent = (
+      <div className="w-[200px]">
+        <span>{value != null && value != "" ? value : "None"}</span>
+      </div>
+    );
+    return htmlContent;
+  }
+
+  function getValue(value, node, template) {
+    let returnValue = value ?? "";
+
+    if (getTweak.length > 0) {
+      for (const obj of getTweak) {
+        Object.keys(obj).forEach((key) => {
+          const value = obj[key];
+          if (key == node["id"]) {
+            Object.keys(value).forEach((key) => {
+              if (key == template["name"]) {
+                returnValue = value[key];
+              }
+            });
+          }
+        });
+      }
+    } else {
+      return value ?? "";
+    }
+    return returnValue;
+  }
+
+  function openAccordions() {
+    let accordionsToOpen = [];
+    tweak.current.forEach((el) => {
+      Object.keys(el).forEach((key) => {
+        if (Object.keys(el[key]).length > 0) {
+          accordionsToOpen.push(key);
+          setOpenAccordion(accordionsToOpen);
+        }
+      });
+    });
+  }
+
  return (
    <Dialog open={true} onOpenChange={setModalOpen}>
      <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[580px]">
+      <DialogContent className="lg:max-w-[850px] sm:max-w-[700px] h-[580px]">
        <DialogHeader>
          <DialogTitle className="flex items-center">
            <span className="pr-2">Code</span>
@ -96,9 +275,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
        </DialogHeader>

        <Tabs
-          defaultValue={"0"}
+          value={activeTab}
          className="w-full h-full overflow-hidden text-center bg-muted rounded-md border"
-          onValueChange={(value) => setActiveTab(value)}
+          onValueChange={(value) => {
+            setActiveTab(value);
+            if (value === "3") {
+              openAccordions();
+            }
+          }}
        >
          <div className="flex items-center justify-between px-2">
            <TabsList>
@ -108,29 +292,465 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                </TabsTrigger>
              ))}
            </TabsList>
-            <div className="float-right">
-              <button
-                className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
-                onClick={copyToClipboard}
-              >
-                {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
-                {isCopied ? "Copied!" : "Copy code"}
-              </button>
-            </div>
+            {Number(activeTab) < 3 && (
+              <div className="float-right">
+                <button
+                  className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
+                  onClick={copyToClipboard}
+                >
+                  {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
+                  {isCopied ? "Copied!" : "Copy code"}
+                </button>
+              </div>
+            )}
          </div>

          {tabs.map((tab, index) => (
            <TabsContent
              value={index.toString()}
              className="overflow-hidden w-full h-full px-4 pb-4 -mt-1"
+              key={index} // Remember to add a unique key prop
            >
-              <SyntaxHighlighter
-                className="h-[400px] w-full overflow-auto"
-                language={tab.mode}
-                style={oneDark}
-              >
-                {tab.code}
-              </SyntaxHighlighter>
+              {index < 3 ? (
+                <SyntaxHighlighter
+                  className="h-[400px] w-full overflow-auto"
+                  language={tab.mode}
+                  style={oneDark}
+                >
+                  {tab.code}
+                </SyntaxHighlighter>
+              ) : index === 3 ? (
+                <>
+                  <div className="flex w-full h-[400px] mt-2">
+                    <div
+                      className={classNames(
+                        "w-full rounded-lg  bg-muted border-[1px] border-gray-200",
+                        1 == 1
+                          ? "overflow-scroll overflow-x-hidden custom-scroll"
+                          : "overflow-hidden"
+                      )}
+                    >
+                      {flow["data"]["nodes"].map((t: any, index) => (
+                        <div className="px-3" key={index}>
+                          {tweaksList.current.includes(t["data"]["id"]) && (
+                            <AccordionComponent
+                              trigger={t["data"]["id"]}
+                              open={openAccordion}
+                            >
+                              <div className="flex flex-col gap-5 h-fit">
+                                <Table className="table-fixed bg-muted outline-1">
+                                  <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10">
+                                    <TableRow className="dark:border-b-muted">
+                                      <TableHead className="h-7 text-center">
+                                        PARAM
+                                      </TableHead>
+                                      <TableHead className="p-0 h-7 text-center">
+                                        VALUE
+                                      </TableHead>
+                                    </TableRow>
+                                  </TableHeader>
+                                  <TableBody className="p-0">
+                                    {Object.keys(t["data"]["node"]["template"])
+                                      .filter(
+                                        (n) =>
+                                          n.charAt(0) !== "_" &&
+                                          t.data.node.template[n].show &&
+                                          (t.data.node.template[n].type ===
+                                            "str" ||
+                                            t.data.node.template[n].type ===
+                                              "bool" ||
+                                            t.data.node.template[n].type ===
+                                              "float" ||
+                                            t.data.node.template[n].type ===
+                                              "code" ||
+                                            t.data.node.template[n].type ===
+                                              "prompt" ||
+                                            t.data.node.template[n].type ===
+                                              "file" ||
+                                            t.data.node.template[n].type ===
+                                              "int")
+                                      )
+                                      .map((n, i) => {
+                                        //console.log(t.data.node.template[n]);
+
+                                        return (
+                                          <TableRow
+                                            key={i}
+                                            className="h-10 dark:border-b-muted"
+                                          >
+                                            <TableCell className="p-0 text-center text-gray-900 text-sm">
+                                              {n}
+                                            </TableCell>
+                                            <TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300">
+                                              <div className="w-[250px] m-auto">
+                                                {t.data.node.template[n]
+                                                  .type === "str" &&
+                                                !t.data.node.template[n]
+                                                  .options ? (
+                                                  <div className="mx-auto">
+                                                    {t.data.node.template[n]
+                                                      .list ? (
+                                                      <InputListComponent
+                                                        editNode={true}
+                                                        disabled={false}
+                                                        value={
+                                                          !t.data.node.template[
+                                                            n
+                                                          ].value ||
+                                                          t.data.node.template[
+                                                            n
+                                                          ].value === ""
+                                                            ? [""]
+                                                            : t.data.node
+                                                                .template[n]
+                                                                .value
+                                                        }
+                                                        onChange={(k) => {}}
+                                                        onAddInput={(k) => {
+                                                          buildTweakObject(
+                                                            t["data"]["id"],
+                                                            k,
+                                                            t.data.node
+                                                              .template[n]
+                                                          );
+                                                        }}
+                                                      />
+                                                    ) : t.data.node.template[n]
+                                                        .multiline ? (
+                                                      <ShadTooltip
+                                                        delayDuration={1000}
+                                                        content={buildContent(
+                                                          t.data.node.template[
+                                                            n
+                                                          ].value
+                                                        )}
+                                                      >
+                                                        <div>
+                                                          <TextAreaComponent
+                                                            disabled={false}
+                                                            editNode={true}
+                                                            value={getValue(
+                                                              t.data.node
+                                                                .template[n]
+                                                                .value,
+                                                              t.data,
+                                                              t.data.node
+                                                                .template[n]
+                                                            )}
+                                                            onChange={(k) => {
+                                                              buildTweakObject(
+                                                                t["data"]["id"],
+                                                                k,
+                                                                t.data.node
+                                                                  .template[n]
+                                                              );
+                                                            }}
+                                                          />
+                                                        </div>
+                                                      </ShadTooltip>
+                                                    ) : (
+                                                      <InputComponent
+                                                        editNode={true}
+                                                        disabled={false}
+                                                        password={
+                                                          t.data.node.template[
+                                                            n
+                                                          ].password ?? false
+                                                        }
+                                                        value={getValue(
+                                                          t.data.node.template[
+                                                            n
+                                                          ].value,
+                                                          t.data,
+                                                          t.data.node.template[
+                                                            n
+                                                          ]
+                                                        )}
+                                                        onChange={(k) => {
+                                                          buildTweakObject(
+                                                            t["data"]["id"],
+                                                            k,
+                                                            t.data.node
+                                                              .template[n]
+                                                          );
+                                                        }}
+                                                      />
+                                                    )}
+                                                  </div>
+                                                ) : t.data.node.template[n]
+                                                    .type === "bool" ? (
+                                                  <div className="ml-auto">
+                                                    {" "}
+                                                    <ToggleShadComponent
+                                                      enabled={
+                                                        t.data.node.template[n]
+                                                          .value
+                                                      }
+                                                      setEnabled={(e) => {
+                                                        t.data.node.template[
+                                                          n
+                                                        ].value = e;
+                                                        setEnabled(e);
+                                                        buildTweakObject(
+                                                          t["data"]["id"],
+                                                          e,
+                                                          t.data.node.template[
+                                                            n
+                                                          ]
+                                                        );
+                                                      }}
+                                                      size="small"
+                                                      disabled={false}
+                                                    />
+                                                  </div>
+                                                ) : t.data.node.template[n]
+                                                    .type === "file" ? (
+                                                  <ShadTooltip
+                                                    delayDuration={1000}
+                                                    content={buildContent(
+                                                      getValue(
+                                                        t.data.node.template[n]
+                                                          .value,
+                                                        t.data,
+                                                        t.data.node.template[n]
+                                                      )
+                                                    )}
+                                                  >
+                                                    <div className="mx-auto">
+                                                      <InputFileComponent
+                                                        editNode={true}
+                                                        disabled={false}
+                                                        value={
+                                                          t.data.node.template[
+                                                            n
+                                                          ].value ?? ""
+                                                        }
+                                                        onChange={(
+                                                          k: any
+                                                        ) => {}}
+                                                        fileTypes={
+                                                          t.data.node.template[
+                                                            n
+                                                          ].fileTypes
+                                                        }
+                                                        suffixes={
+                                                          t.data.node.template[
+                                                            n
+                                                          ].suffixes
+                                                        }
+                                                        onFileChange={(
+                                                          k: any
+                                                        ) => {}}
+                                                      ></InputFileComponent>
+                                                    </div>
+                                                  </ShadTooltip>
+                                                ) : t.data.node.template[n]
+                                                    .type === "float" ? (
+                                                  <div className="mx-auto">
+                                                    <FloatComponent
+                                                      disabled={false}
+                                                      editNode={true}
+                                                      value={getValue(
+                                                        t.data.node.template[n]
+                                                          .value,
+                                                        t.data,
+                                                        t.data.node.template[n]
+                                                      )}
+                                                      onChange={(k) => {
+                                                        buildTweakObject(
+                                                          t["data"]["id"],
+                                                          k,
+                                                          t.data.node.template[
+                                                            n
+                                                          ]
+                                                        );
+                                                      }}
+                                                    />
+                                                  </div>
+                                                ) : t.data.node.template[n]
+                                                    .type === "str" &&
+                                                  t.data.node.template[n]
+                                                    .options ? (
+                                                  <div className="mx-auto">
+                                                    <Dropdown
+                                                      editNode={true}
+                                                      apiModal={true}
+                                                      options={
+                                                        t.data.node.template[n]
+                                                          .options
+                                                      }
+                                                      onSelect={(k) => {
+                                                        buildTweakObject(
+                                                          t["data"]["id"],
+                                                          k,
+                                                          t.data.node.template[
+                                                            n
+                                                          ]
+                                                        );
+                                                      }}
+                                                      value={getValue(
+                                                        t.data.node.template[n]
+                                                          .value,
+                                                        t.data,
+                                                        t.data.node.template[n]
+                                                      )}
+                                                    ></Dropdown>
+                                                  </div>
+                                                ) : t.data.node.template[n]
+                                                    .type === "int" ? (
+                                                  <div className="mx-auto">
+                                                    <IntComponent
+                                                      disabled={false}
+                                                      editNode={true}
+                                                      value={getValue(
+                                                        t.data.node.template[n]
+                                                          .value,
+                                                        t.data,
+                                                        t.data.node.template[n]
+                                                      )}
+                                                      onChange={(k) => {
+                                                        buildTweakObject(
+                                                          t["data"]["id"],
+                                                          k,
+                                                          t.data.node.template[
+                                                            n
+                                                          ]
+                                                        );
+                                                      }}
+                                                    />
+                                                  </div>
+                                                ) : t.data.node.template[n]
+                                                    .type === "prompt" ? (
+                                                  <ShadTooltip
+                                                    delayDuration={1000}
+                                                    content={buildContent(
+                                                      getValue(
+                                                        t.data.node.template[n]
+                                                          .value,
+                                                        t.data,
+                                                        t.data.node.template[n]
+                                                      )
+                                                    )}
+                                                  >
+                                                    <div className="mx-auto">
+                                                      <PromptAreaComponent
+                                                        editNode={true}
+                                                        disabled={false}
+                                                        value={getValue(
+                                                          t.data.node.template[
+                                                            n
+                                                          ].value,
+                                                          t.data,
+                                                          t.data.node.template[
+                                                            n
+                                                          ]
+                                                        )}
+                                                        onChange={(k) => {
+                                                          buildTweakObject(
+                                                            t["data"]["id"],
+                                                            k,
+                                                            t.data.node
+                                                              .template[n]
+                                                          );
+                                                        }}
+                                                      />
+                                                    </div>
+                                                  </ShadTooltip>
+                                                ) : t.data.node.template[n]
+                                                    .type === "code" ? (
+                                                  <ShadTooltip
+                                                    delayDuration={1000}
+                                                    content={buildContent(
+                                                      getValue(
+                                                        t.data.node.template[n]
+                                                          .value,
+                                                        t.data,
+                                                        t.data.node.template[n]
+                                                      )
+                                                    )}
+                                                  >
+                                                    <div className="mx-auto">
+                                                      <CodeAreaComponent
+                                                        disabled={false}
+                                                        editNode={true}
+                                                        value={getValue(
+                                                          t.data.node.template[
+                                                            n
+                                                          ].value,
+                                                          t.data,
+                                                          t.data.node.template[
+                                                            n
+                                                          ]
+                                                        )}
+                                                        onChange={(k) => {
+                                                          buildTweakObject(
+                                                            t["data"]["id"],
+                                                            k,
+                                                            t.data.node
+                                                              .template[n]
+                                                          );
+                                                        }}
+                                                      />
+                                                    </div>
+                                                  </ShadTooltip>
+                                                ) : t.data.node.template[n]
+                                                    .type === "Any" ? (
+                                                  "-"
+                                                ) : (
+                                                  <div className="hidden"></div>
+                                                )}
+                                              </div>
+                                            </TableCell>
+                                          </TableRow>
+                                        );
+                                      })}
+                                  </TableBody>
+                                </Table>
+                              </div>
+                            </AccordionComponent>
+                          )}
+
+                          {tweaksList.current.length === 0 && (
+                            <>
+                              <div className="pt-3">
+                                No tweaks are available for this flow.
+                              </div>
+                            </>
+                          )}
+                        </div>
+                      ))}
+
+                      {/* 
+                      <div className="flex flex-col gap-5 bg-muted">
+                        <Table className="table-fixed bg-muted outline-1">
+                          <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10">
+                            <TableRow className="dark:border-b-muted">
+                              <TableHead className="h-5 text-center">
+                                TWEAK
+                              </TableHead>
+                              <TableHead className="p-0 h-5 text-center">
+                                VALUE
+                              </TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {invoices.map((invoice) => (
+                              <TableRow className="p-0 text-center text-gray-900 text-sm">
+                                <TableCell className="p-2 text-center text-gray-900 text-sm truncate">
+                                  {invoice.paymentStatus}
+                                </TableCell>
+                                <TableCell className="p-2 text-center text-gray-900 text-sm truncate">
+                                  {invoice.paymentMethod}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div> */}
+                    </div>
+                  </div>
+                </>
+              ) : null}
            </TabsContent>
          ))}
        </Tabs>
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@ -6,8 +6,7 @@ import {
  classNames,
  limitScrollFieldsModal,
  nodeColors,
-  nodeIcons,
-  toNormalCase,
+  nodeIconsLucide,
  toTitleCase,
 } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
@ -28,7 +27,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
    }
  }
  // any to avoid type conflict
-  const Icon: any = nodeIcons[types[data.type]];
+  const Icon: any = nodeIconsLucide[types[data.type]];
  return (
    <Transition.Root show={open} appear={true} as={Fragment}>
      <Dialog
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@ -11,7 +11,7 @@ import remarkMath from "remark-math";
 import { CodeBlock } from "./codeBlock";
 import Convert from "ansi-to-html";
 import { User2, MessageCircle } from "lucide-react";
-
+import DOMPurify from "dompurify";
 export default function ChatMessage({
  chat,
  lockChat,
@ -78,10 +78,9 @@ export default function ChatMessage({
            {chat.thought && chat.thought !== "" && !hidden && (
              <div
                onClick={() => setHidden((prev) => !prev)}
-                className=" text-start inline-block rounded-md text-gray-600 dark:text-gray-200 h-full border border-gray-300 dark:border-gray-500
-								bg-muted dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
+                className="text-start inline-block rounded-md text-gray-600 dark:text-gray-200 h-full border border-gray-300 dark:border-gray-500 bg-muted dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
                dangerouslySetInnerHTML={{
-                  __html: convert.toHtml(chat.thought),
+                  __html: DOMPurify.sanitize(convert.toHtml(chat.thought)),
                }}
              ></div>
            )}
@ -152,12 +151,12 @@ export default function ChatMessage({
      ) : (
        <div className="w-full flex items-center">
          <div className="text-start inline-block px-3 text-gray-600 dark:text-white">
-            <span
-              className="text-gray-600 dark:text-gray-200"
-              dangerouslySetInnerHTML={{
-                __html: message.replace(/\n/g, "<br>"),
-              }}
-            ></span>
+            {message.split("\n").map((line, index) => (
+              <span key={index}>
+                {line}
+                <br />
+              </span>
+            ))}
          </div>
        </div>
      )}
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@ -34,12 +34,13 @@ export default function CodeAreaModal({
  const [code, setCode] = useState(value);
  const { dark } = useContext(darkContext);
  const { setErrorData, setSuccessData } = useContext(alertContext);
-  const { closePopUp } = useContext(PopUpContext);
+  const { closePopUp, setCloseEdit } = useContext(PopUpContext);
  const ref = useRef();
  function setModalOpen(x: boolean) {
    setOpen(x);
    if (x === false) {
      setTimeout(() => {
+        setCloseEdit("editcode");
        closePopUp();
      }, 300);
    }
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@ -38,11 +38,12 @@ export default function GenericModal({
  const [myValue, setMyValue] = useState(value);
  const { dark } = useContext(darkContext);
  const { setErrorData, setSuccessData } = useContext(alertContext);
-  const { closePopUp } = useContext(PopUpContext);
+  const { closePopUp, setCloseEdit } = useContext(PopUpContext);
  const ref = useRef();
  function setModalOpen(x: boolean) {
    setOpen(x);
    if (x === false) {
+      setCloseEdit("generic");
      closePopUp();
    }
  }
--- a/src/frontend/src/modals/promptModal/index.tsx
+++ b/src/frontend/src/modals/promptModal/index.tsx
@ -16,12 +16,13 @@ export default function PromptAreaModal({
  const [myValue, setMyValue] = useState(value);
  const { dark } = useContext(darkContext);
  const { setErrorData, setSuccessData } = useContext(alertContext);
-  const { closePopUp } = useContext(PopUpContext);
+  const { closePopUp, setCloseEdit } = useContext(PopUpContext);
  const ref = useRef();
  function setModalOpen(x: boolean) {
    setOpen(x);
    if (x === false) {
      setTimeout(() => {
+        setCloseEdit("prompt");
        closePopUp();
      }, 300);
    }
--- a/src/frontend/src/modals/textAreaModal/index.tsx
+++ b/src/frontend/src/modals/textAreaModal/index.tsx
@ -15,12 +15,13 @@ export default function TextAreaModal({
 }) {
  const [open, setOpen] = useState(true);
  const [myValue, setMyValue] = useState(value);
-  const { closePopUp } = useContext(PopUpContext);
+  const { closePopUp, setCloseEdit } = useContext(PopUpContext);
  const ref = useRef();
  function setModalOpen(x: boolean) {
    setOpen(x);
    if (x === false) {
      setTimeout(() => {
+        setCloseEdit("textarea");
        closePopUp();
      }, 300);
    }
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@ -22,6 +22,7 @@ export type DropDownComponentType = {
  options: string[];
  onSelect: (value: string) => void;
  editNode?: boolean;
+  apiModal?: boolean;
  numberOfOptions?: number;
 };
 export type ParameterComponentType = {
@ -42,6 +43,7 @@ export type InputListComponentType = {
  onChange: (value: string[]) => void;
  disabled: boolean;
  editNode?: boolean;
+  onAddInput?: (value?: string[]) => void;
 };

 export type TextAreaComponentType = {
@ -111,6 +113,11 @@ export type RadialProgressType = {
  color?: string;
 };

+export type AccordionComponentType = {
+  children?: ReactElement;
+  open?: string[];
+  trigger?: string;
+};
 export type Side = "top" | "right" | "bottom" | "left";

 export type ShadTooltipProps = {
--- a/src/frontend/src/types/tabs/index.ts
+++ b/src/frontend/src/types/tabs/index.ts
@ -28,6 +28,8 @@ export type TabsContextType = {
  ) => void;
  lastCopiedSelection: { nodes: any; edges: any };
  setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void;
+  setTweak: (tweak: any) => void;
+  getTweak: any;
 };

 export type TabsState = {
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@ -1,21 +1,3 @@
-import {
-  RocketLaunchIcon,
-  LinkIcon,
-  CpuChipIcon,
-  LightBulbIcon,
-  CommandLineIcon,
-  WrenchScrewdriverIcon,
-  WrenchIcon,
-  ComputerDesktopIcon,
-  GiftIcon,
-  PaperClipIcon,
-  QuestionMarkCircleIcon,
-  FingerPrintIcon,
-  ScissorsIcon,
-  CircleStackIcon,
-  Squares2X2Icon,
-  Bars3CenterLeftIcon,
-} from "@heroicons/react/24/outline";
 import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
 import { FlowType, NodeType } from "./types/flow";
 import { APITemplateType } from "./types/api";
@ -58,6 +40,7 @@ import {
  Paperclip,
  Rocket,
  Scissors,
+  FileSearch,
  TerminalSquare,
  Wand2,
  Wrench,
@ -139,6 +122,7 @@ export const nodeColors: { [char: string]: string } = {
  toolkits: "#DB2C2C",
  wrappers: "#E6277A",
  utilities: "#31A3CC",
+  retrievers: "#e6b25a",
  unknown: "#9CA3AF",
 };

@ -157,72 +141,11 @@ export const nodeNames: { [char: string]: string } = {
  toolkits: "Toolkits",
  wrappers: "Wrappers",
  textsplitters: "Text Splitters",
+  retrievers: "Retrievers",
  utilities: "Utilities",
  unknown: "Unknown",
 };

-export const nodeIcons: {
-  [char: string]: React.ForwardRefExoticComponent<
-    React.SVGProps<SVGSVGElement>
-  >;
-} = {
-  Chroma: ChromaIcon,
-  AirbyteJSONLoader: AirbyteIcon,
-  // SerpAPIWrapper: SerperIcon,
-  // AZLyricsLoader: AzIcon,
-  Anthropic: AnthropicIcon,
-  ChatAnthropic: AnthropicIcon,
-  BingSearchAPIWrapper: BingIcon,
-  BingSearchRun: BingIcon,
-  Cohere: CohereIcon,
-  CohereEmbeddings: CohereIcon,
-  EverNoteLoader: EvernoteIcon,
-  FacebookChatLoader: FBIcon,
-  GitbookLoader: GitBookIcon,
-  GoogleSearchAPIWrapper: GoogleIcon,
-  GoogleSearchResults: GoogleIcon,
-  GoogleSearchRun: GoogleIcon,
-  HNLoader: HackerNewsIcon,
-  HuggingFaceHub: HugginFaceIcon,
-  HuggingFaceEmbeddings: HugginFaceIcon,
-  IFixitLoader: IFixIcon,
-  Meta: MetaIcon,
-  Midjourney: MidjourneyIcon,
-  NotionDirectoryLoader: NotionIcon,
-  ChatOpenAI: OpenAiIcon,
-  OpenAI: OpenAiIcon,
-  OpenAIEmbeddings: OpenAiIcon,
-  Pinecone: PineconeIcon,
-  SupabaseVectorStore: SupabaseIcon,
-  MongoDBAtlasVectorSearch: MongoDBIcon,
-  // UnstructuredPowerPointLoader: PowerPointIcon, // word and powerpoint have differente styles
-  Qdrant: QDrantIcon,
-  // ReadTheDocsLoader: ReadTheDocsIcon, // does not work
-  Searx: SearxIcon,
-  SlackDirectoryLoader: SlackIcon,
-  // Weaviate: WeaviateIcon, // does not work
-  // WikipediaAPIWrapper: WikipediaIcon,
-  // WolframAlphaQueryRun: WolframIcon,
-  // WolframAlphaAPIWrapper: WolframIcon,
-  // UnstructuredWordDocumentLoader: WordIcon, // word and powerpoint have differente styles
-  agents: RocketLaunchIcon,
-  chains: LinkIcon,
-  memories: CpuChipIcon,
-  llms: LightBulbIcon,
-  prompts: CommandLineIcon,
-  tools: WrenchIcon,
-  advanced: ComputerDesktopIcon,
-  chat: Bars3CenterLeftIcon,
-  embeddings: FingerPrintIcon,
-  documentloaders: PaperClipIcon,
-  vectorstores: CircleStackIcon,
-  toolkits: WrenchScrewdriverIcon,
-  textsplitters: ScissorsIcon,
-  wrappers: GiftIcon,
-  utilities: Squares2X2Icon,
-  unknown: QuestionMarkCircleIcon,
-};
-
 export const nodeIconsLucide: {
  [char: string]: React.ForwardRefExoticComponent<
    ComponentType<SVGProps<SVGSVGElement>>
@ -363,6 +286,9 @@ export const nodeIconsLucide: {
  utilities: Wand2 as React.ForwardRefExoticComponent<
    ComponentType<SVGProps<SVGSVGElement>>
  >,
+  retrievers: FileSearch as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
  unknown: HelpCircle as React.ForwardRefExoticComponent<
    ComponentType<SVGProps<SVGSVGElement>>
  >,
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@ -90,6 +90,20 @@ module.exports = {
      },
    },
    extend: {
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
--- a/tests/test_llms_template.py
+++ b/tests/test_llms_template.py
@ -516,7 +516,7 @@ def test_chat_open_ai(client: TestClient):
        == "Wrapper around OpenAI Chat large language models."  # noqa E501
    )
    assert set(model["base_classes"]) == {
-        "Serializable",
+        "BaseLLM",
        "BaseChatModel",
        "ChatOpenAI",
        "BaseLanguageModel",
--- a/tests/test_websocket.py
+++ b/tests/test_websocket.py
@ -7,7 +7,7 @@ import pytest

 def test_init_build(client):
    response = client.post(
-        "api/v1/build/init", json={"id": "test", "data": {"key": "value"}}
+        "api/v1/build/init/test", json={"id": "test", "data": {"key": "value"}}
    )
    assert response.status_code == 201
    assert response.json() == {"flowId": "test"}