Merge remote-tracking branch 'origin/dev' into v2

src/backend/langflow/__main__.py

@@ -52,6 +52,20 @@ def display_results(results):
         console.print()  # Print a new line
 
 
+def set_var_for_macos_issue():
+    # OBJC_DISABLE_INITIALIZE_FORK_SAFETY=YES
+    # we need to set this var is we are running on MacOS
+    # otherwise we get an error when running gunicorn
+
+    if platform.system() in ["Darwin"]:
+        import os
+
+        os.environ["OBJC_DISABLE_INITIALIZE_FORK_SAFETY"] = "YES"
+        # https://stackoverflow.com/questions/75747888/uwsgi-segmentation-fault-with-flask-python-app-behind-nginx-after-running-for-2 # noqa
+        os.environ["no_proxy"] = "*"  # to avoid error with gunicorn
+        logger.debug("Set OBJC_DISABLE_INITIALIZE_FORK_SAFETY to YES to avoid error")
+
+
 def update_settings(
     config: str,
     cache: Optional[str] = None,
@@ -84,7 +98,7 @@ def run(
         "127.0.0.1", help="Host to bind the server to.", envvar="LANGFLOW_HOST"
     ),
     workers: int = typer.Option(
-        2, help="Number of worker processes.", envvar="LANGFLOW_WORKERS"
+        1, help="Number of worker processes.", envvar="LANGFLOW_WORKERS"
     ),
     timeout: int = typer.Option(300, help="Worker timeout in seconds."),
     port: int = typer.Option(7860, help="Port to listen on.", envvar="LANGFLOW_PORT"),
@@ -143,7 +157,10 @@ def run(
     """
     Run the Langflow.
     """
+
+    set_var_for_macos_issue()
     # override env variables with .env file
+
     if env_file:
         load_dotenv(env_file, override=True)
 
@@ -165,7 +182,6 @@ def run(
     options = {
         "bind": f"{host}:{port}",
         "workers": get_number_of_workers(workers),
-        "worker_class": "uvicorn.workers.UvicornWorker",
         "timeout": timeout,
     }
 

src/backend/langflow/alembic/versions/eb5866d51fd2_change_columns_to_be_nullable.py

@@ -0,0 +1,85 @@
+"""Change columns to be nullable
+
+Revision ID: eb5866d51fd2
+Revises: 67cc006d50bf
+Create Date: 2023-10-04 10:18:25.640458
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+from sqlalchemy import exc
+import sqlmodel  # noqa: F401
+
+# revision identifiers, used by Alembic.
+revision: str = "eb5866d51fd2"
+down_revision: Union[str, None] = "67cc006d50bf"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    connection = op.get_bind()
+    try:
+        op.drop_table("flowstyle")
+        with op.batch_alter_table("component", schema=None) as batch_op:
+            batch_op.drop_index("ix_component_frontend_node_id")
+            batch_op.drop_index("ix_component_name")
+    except exc.SQLAlchemyError:
+        connection.execute("ROLLBACK")
+    except Exception:
+        pass
+
+    try:
+        op.drop_table("component")
+    except exc.SQLAlchemyError:
+        connection.execute("ROLLBACK")
+    except Exception:
+        pass
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    try:
+        op.create_table(
+            "component",
+            sa.Column("id", sa.CHAR(length=32), nullable=False),
+            sa.Column("frontend_node_id", sa.CHAR(length=32), nullable=False),
+            sa.Column("name", sa.VARCHAR(), nullable=False),
+            sa.Column("description", sa.VARCHAR(), nullable=True),
+            sa.Column("python_code", sa.VARCHAR(), nullable=True),
+            sa.Column("return_type", sa.VARCHAR(), nullable=True),
+            sa.Column("is_disabled", sa.BOOLEAN(), nullable=False),
+            sa.Column("is_read_only", sa.BOOLEAN(), nullable=False),
+            sa.Column("create_at", sa.DATETIME(), nullable=False),
+            sa.Column("update_at", sa.DATETIME(), nullable=False),
+            sa.PrimaryKeyConstraint("id"),
+        )
+        with op.batch_alter_table("component", schema=None) as batch_op:
+            batch_op.create_index("ix_component_name", ["name"], unique=False)
+            batch_op.create_index(
+                "ix_component_frontend_node_id", ["frontend_node_id"], unique=False
+            )
+    except Exception:
+        pass
+
+    try:
+        op.create_table(
+            "flowstyle",
+            sa.Column("color", sa.VARCHAR(), nullable=False),
+            sa.Column("emoji", sa.VARCHAR(), nullable=False),
+            sa.Column("flow_id", sa.CHAR(length=32), nullable=True),
+            sa.Column("id", sa.CHAR(length=32), nullable=False),
+            sa.ForeignKeyConstraint(
+                ["flow_id"],
+                ["flow.id"],
+            ),
+            sa.PrimaryKeyConstraint("id"),
+            sa.UniqueConstraint("id"),
+        )
+    except Exception:
+        pass
+    # ### end Alembic commands ###

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

@@ -1,15 +1,17 @@
 import asyncio
+from uuid import UUID
 
 from langchain.callbacks.base import AsyncCallbackHandler, BaseCallbackHandler
 
-from langflow.api.v1.schemas import ChatResponse
+from langflow.api.v1.schemas import ChatResponse, PromptResponse
 
 
-from typing import Any, Dict, List, Union
-from fastapi import WebSocket
+from typing import Any, Dict, List, Optional
+from langflow.services.getters import get_chat_service
 
 
-from langchain.schema import AgentAction, LLMResult, AgentFinish
+from langflow.utils.util import remove_ansi_escape_codes
+from langchain.schema import AgentAction, AgentFinish
 from loguru import logger
 
 
@@ -17,39 +19,15 @@ from loguru import logger
 class AsyncStreamingLLMCallbackHandler(AsyncCallbackHandler):
     """Callback handler for streaming LLM responses."""
 
-    def __init__(self, websocket: WebSocket):
-        self.websocket = websocket
+    def __init__(self, client_id: str):
+        self.chat_service = get_chat_service()
+        self.client_id = client_id
+        self.websocket = self.chat_service.active_connections[self.client_id]
 
     async def on_llm_new_token(self, token: str, **kwargs: Any) -> None:
         resp = ChatResponse(message=token, type="stream", intermediate_steps="")
         await self.websocket.send_json(resp.dict())
 
-    async def on_llm_start(
-        self, serialized: Dict[str, Any], prompts: List[str], **kwargs: Any
-    ) -> Any:
-        """Run when LLM starts running."""
-
-    async def on_llm_end(self, response: LLMResult, **kwargs: Any) -> Any:
-        """Run when LLM ends running."""
-
-    async def on_llm_error(
-        self, error: Union[Exception, KeyboardInterrupt], **kwargs: Any
-    ) -> Any:
-        """Run when LLM errors."""
-
-    async def on_chain_start(
-        self, serialized: Dict[str, Any], inputs: Dict[str, Any], **kwargs: Any
-    ) -> Any:
-        """Run when chain starts running."""
-
-    async def on_chain_end(self, outputs: Dict[str, Any], **kwargs: Any) -> Any:
-        """Run when chain ends running."""
-
-    async def on_chain_error(
-        self, error: Union[Exception, KeyboardInterrupt], **kwargs: Any
-    ) -> Any:
-        """Run when chain errors."""
-
     async def on_tool_start(
         self, serialized: Dict[str, Any], input_str: str, **kwargs: Any
     ) -> Any:
@@ -95,8 +73,14 @@ class AsyncStreamingLLMCallbackHandler(AsyncCallbackHandler):
             logger.error(f"Error sending response: {exc}")
 
     async def on_tool_error(
-        self, error: Union[Exception, KeyboardInterrupt], **kwargs: Any
-    ) -> Any:
+        self,
+        error: BaseException,
+        *,
+        run_id: UUID,
+        parent_run_id: Optional[UUID] = None,
+        tags: Optional[List[str]] = None,
+        **kwargs: Any,
+    ) -> None:
         """Run when tool errors."""
 
     async def on_text(self, text: str, **kwargs: Any) -> Any:
@@ -104,6 +88,14 @@ class AsyncStreamingLLMCallbackHandler(AsyncCallbackHandler):
         # This runs when first sending the prompt
         # to the LLM, adding it will send the final prompt
         # to the frontend
+        if "Prompt after formatting" in text:
+            text = text.replace("Prompt after formatting:\n", "")
+            text = remove_ansi_escape_codes(text)
+            resp = PromptResponse(
+                prompt=text,
+            )
+            await self.websocket.send_json(resp.dict())
+            self.chat_service.chat_history.add_message(self.client_id, resp)
 
     async def on_agent_action(self, action: AgentAction, **kwargs: Any):
         log = f"Thought: {action.log}"
@@ -131,8 +123,10 @@ class AsyncStreamingLLMCallbackHandler(AsyncCallbackHandler):
 class StreamingLLMCallbackHandler(BaseCallbackHandler):
     """Callback handler for streaming LLM responses."""
 
-    def __init__(self, websocket):
-        self.websocket = websocket
+    def __init__(self, client_id: str):
+        self.chat_service = get_chat_service()
+        self.client_id = client_id
+        self.websocket = self.chat_service.active_connections[self.client_id]
 
     def on_llm_new_token(self, token: str, **kwargs: Any) -> None:
         resp = ChatResponse(message=token, type="stream", intermediate_steps="")

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

@@ -187,14 +187,18 @@ async def stream_build(
                     valid = False
                     update_build_status(cache_service, flow_id, BuildStatus.FAILURE)
 
-                response = {
-                    "valid": valid,
-                    "params": params,
-                    "id": vertex.id,
-                    "progress": round(i / number_of_nodes, 2),
-                }
+                vertex_id = (
+                    vertex.parent_node_id if vertex.parent_is_top_level else vertex.id
+                )
+                if vertex_id in graph.top_level_nodes:
+                    response = {
+                        "valid": valid,
+                        "params": params,
+                        "id": vertex_id,
+                        "progress": round(i / number_of_nodes, 2),
+                    }
 
-                yield str(StreamData(event="message", data=response))
+                    yield str(StreamData(event="message", data=response))
 
             langchain_object = graph.build()
             # Now we  need to check the input_keys to send them to the client
@@ -239,8 +243,7 @@ def try_running_celery_task(vertex):
         task = build_vertex.delay(vertex)
         vertex.task_id = task.id
     except Exception as exc:
-        logger.exception(exc)
-        logger.error("Error running task in celery, running locally")
+        logger.debug(f"Error running task in celery: {exc}")
         vertex.task_id = None
         vertex.build()
     return vertex

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

@@ -69,7 +69,7 @@ def get_all(
     "/process/{flow_id}",
     response_model=ProcessResponse,
 )
-async def process_flow(
+async def process(
     session: Annotated[Session, Depends(get_session)],
     flow_id: str,
     inputs: Optional[dict] = None,
@@ -156,7 +156,7 @@ async def process_flow(
             result=task_result,
             task=task_response,
             session_id=session_id,
-            backend=str(type(task_service.backend)),
+            backend=task_service.backend_name,
         )
     except sa.exc.StatementError as exc:
         # StatementError('(builtins.ValueError) badly formed hexadecimal UUID string')

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

@@ -78,6 +78,7 @@ class ChatMessage(BaseModel):
 
     is_bot: bool = False
     message: Union[str, None, dict] = None
+    chatKey: Optional[str] = None
     type: str = "human"
 
 
@@ -85,6 +86,7 @@ class ChatResponse(ChatMessage):
     """Chat response schema."""
 
     intermediate_steps: str
+
     type: str
     is_bot: bool = True
     files: list = []
@@ -97,6 +99,14 @@ class ChatResponse(ChatMessage):
         return v
 
 
+class PromptResponse(ChatMessage):
+    """Prompt response schema."""
+
+    prompt: str
+    type: str = "prompt"
+    is_bot: bool = True
+
+
 class FileResponse(ChatMessage):
     """File response schema."""
 

src/backend/langflow/components/agents/OpenAIConversationalAgent.py

@@ -79,4 +79,5 @@ class ConversationalAgent(CustomComponent):
             memory=memory,
             verbose=True,
             return_intermediate_steps=True,
+            handle_parsing_errors=True,
         )

src/backend/langflow/components/chains/PromptRunner.py

@@ -1,7 +1,7 @@
 from langflow import CustomComponent
 
 from langchain.llms.base import BaseLLM
-from langchain import PromptTemplate
+from langchain.prompts import PromptTemplate
 from langchain.schema import Document
 
 

src/backend/langflow/components/llms/BaiduQianfanChatEndpoints.py

@@ -0,0 +1,92 @@
+from typing import Optional
+from langflow import CustomComponent
+from langchain.chat_models.baidu_qianfan_endpoint import QianfanChatEndpoint
+from langchain.llms.base import BaseLLM
+
+
+class QianfanChatEndpointComponent(CustomComponent):
+    display_name: str = "QianfanChatEndpoint"
+    description: str = (
+        "Baidu Qianfan chat models. Get more detail from "
+        "https://python.langchain.com/docs/integrations/chat/baidu_qianfan_endpoint."
+    )
+
+    def build_config(self):
+        return {
+            "model": {
+                "display_name": "Model Name",
+                "options": [
+                    "ERNIE-Bot",
+                    "ERNIE-Bot-turbo",
+                    "BLOOMZ-7B",
+                    "Llama-2-7b-chat",
+                    "Llama-2-13b-chat",
+                    "Llama-2-70b-chat",
+                    "Qianfan-BLOOMZ-7B-compressed",
+                    "Qianfan-Chinese-Llama-2-7B",
+                    "ChatGLM2-6B-32K",
+                    "AquilaChat-7B",
+                ],
+                "info": "https://python.langchain.com/docs/integrations/chat/baidu_qianfan_endpoint",
+                "required": True,
+            },
+            "qianfan_ak": {
+                "display_name": "Qianfan Ak",
+                "required": True,
+                "password": True,
+                "info": "which you could get from  https://cloud.baidu.com/product/wenxinworkshop",
+            },
+            "qianfan_sk": {
+                "display_name": "Qianfan Sk",
+                "required": True,
+                "password": True,
+                "info": "which you could get from  https://cloud.baidu.com/product/wenxinworkshop",
+            },
+            "top_p": {
+                "display_name": "Top p",
+                "field_type": "float",
+                "info": "Model params, only supported in ERNIE-Bot and ERNIE-Bot-turbo",
+                "value": 0.8,
+            },
+            "temperature": {
+                "display_name": "Temperature",
+                "field_type": "float",
+                "info": "Model params, only supported in ERNIE-Bot and ERNIE-Bot-turbo",
+                "value": 0.95,
+            },
+            "penalty_score": {
+                "display_name": "Penalty Score",
+                "field_type": "float",
+                "info": "Model params, only supported in ERNIE-Bot and ERNIE-Bot-turbo",
+                "value": 1.0,
+            },
+            "endpoint": {
+                "display_name": "Endpoint",
+                "info": "Endpoint of the Qianfan LLM, required if custom model used.",
+            },
+            "code": {"show": False},
+        }
+
+    def build(
+        self,
+        model: str = "ERNIE-Bot-turbo",
+        qianfan_ak: Optional[str] = None,
+        qianfan_sk: Optional[str] = None,
+        top_p: Optional[float] = None,
+        temperature: Optional[float] = None,
+        penalty_score: Optional[float] = None,
+        endpoint: Optional[str] = None,
+    ) -> BaseLLM:
+        try:
+            output = QianfanChatEndpoint(  # type: ignore
+                model=model,
+                qianfan_ak=qianfan_ak,
+                qianfan_sk=qianfan_sk,
+                top_p=top_p,
+                temperature=temperature,
+                penalty_score=penalty_score,
+                endpoint=endpoint,
+            )
+        except Exception as e:
+            raise ValueError("Could not connect to Baidu Qianfan API.") from e
+        return output  # type: ignore

src/backend/langflow/components/llms/BaiduQianfanLLMEndpoints.py

@@ -0,0 +1,92 @@
+from typing import Optional
+from langflow import CustomComponent
+from langchain.llms.baidu_qianfan_endpoint import QianfanLLMEndpoint
+from langchain.llms.base import BaseLLM
+
+
+class QianfanLLMEndpointComponent(CustomComponent):
+    display_name: str = "QianfanLLMEndpoint"
+    description: str = (
+        "Baidu Qianfan hosted open source or customized models. "
+        "Get more detail from https://python.langchain.com/docs/integrations/chat/baidu_qianfan_endpoint"
+    )
+
+    def build_config(self):
+        return {
+            "model": {
+                "display_name": "Model Name",
+                "options": [
+                    "ERNIE-Bot",
+                    "ERNIE-Bot-turbo",
+                    "BLOOMZ-7B",
+                    "Llama-2-7b-chat",
+                    "Llama-2-13b-chat",
+                    "Llama-2-70b-chat",
+                    "Qianfan-BLOOMZ-7B-compressed",
+                    "Qianfan-Chinese-Llama-2-7B",
+                    "ChatGLM2-6B-32K",
+                    "AquilaChat-7B",
+                ],
+                "info": "https://python.langchain.com/docs/integrations/chat/baidu_qianfan_endpoint",
+                "required": True,
+            },
+            "qianfan_ak": {
+                "display_name": "Qianfan Ak",
+                "required": True,
+                "password": True,
+                "info": "which you could get from  https://cloud.baidu.com/product/wenxinworkshop",
+            },
+            "qianfan_sk": {
+                "display_name": "Qianfan Sk",
+                "required": True,
+                "password": True,
+                "info": "which you could get from  https://cloud.baidu.com/product/wenxinworkshop",
+            },
+            "top_p": {
+                "display_name": "Top p",
+                "field_type": "float",
+                "info": "Model params, only supported in ERNIE-Bot and ERNIE-Bot-turbo",
+                "value": 0.8,
+            },
+            "temperature": {
+                "display_name": "Temperature",
+                "field_type": "float",
+                "info": "Model params, only supported in ERNIE-Bot and ERNIE-Bot-turbo",
+                "value": 0.95,
+            },
+            "penalty_score": {
+                "display_name": "Penalty Score",
+                "field_type": "float",
+                "info": "Model params, only supported in ERNIE-Bot and ERNIE-Bot-turbo",
+                "value": 1.0,
+            },
+            "endpoint": {
+                "display_name": "Endpoint",
+                "info": "Endpoint of the Qianfan LLM, required if custom model used.",
+            },
+            "code": {"show": False},
+        }
+
+    def build(
+        self,
+        model: str = "ERNIE-Bot-turbo",
+        qianfan_ak: Optional[str] = None,
+        qianfan_sk: Optional[str] = None,
+        top_p: Optional[float] = None,
+        temperature: Optional[float] = None,
+        penalty_score: Optional[float] = None,
+        endpoint: Optional[str] = None,
+    ) -> BaseLLM:
+        try:
+            output = QianfanLLMEndpoint(  # type: ignore
+                model=model,
+                qianfan_ak=qianfan_ak,
+                qianfan_sk=qianfan_sk,
+                top_p=top_p,
+                temperature=temperature,
+                penalty_score=penalty_score,
+                endpoint=endpoint,
+            )
+        except Exception as e:
+            raise ValueError("Could not connect to Baidu Qianfan API.") from e
+        return output  # type: ignore

src/backend/langflow/components/llms/HuggingFaceEndpoints.py

@@ -1,6 +1,6 @@
 from typing import Optional
 from langflow import CustomComponent
-from langchain.llms import HuggingFaceEndpoint
+from langchain.llms.huggingface_endpoint import HuggingFaceEndpoint
 from langchain.llms.base import BaseLLM
 
 
@@ -13,7 +13,6 @@ class HuggingFaceEndpointsComponent(CustomComponent):
             "endpoint_url": {"display_name": "Endpoint URL", "password": True},
             "task": {
                 "display_name": "Task",
-                "type": "select",
                 "options": ["text2text-generation", "text-generation", "summarization"],
             },
             "huggingfacehub_api_token": {"display_name": "API token", "password": True},
@@ -27,7 +26,7 @@ class HuggingFaceEndpointsComponent(CustomComponent):
     def build(
         self,
         endpoint_url: str,
-        task="text2text-generation",
+        task: str = "text2text-generation",
         huggingfacehub_api_token: Optional[str] = None,
         model_kwargs: Optional[dict] = None,
     ) -> BaseLLM:
@@ -36,6 +35,7 @@ class HuggingFaceEndpointsComponent(CustomComponent):
                 endpoint_url=endpoint_url,
                 task=task,
                 huggingfacehub_api_token=huggingfacehub_api_token,
+                model_kwargs=model_kwargs,
             )
         except Exception as e:
             raise ValueError("Could not connect to HuggingFace Endpoints API.") from e

src/backend/langflow/components/vectorstores/Vectara.py

@@ -5,7 +5,6 @@ from langchain.vectorstores import Vectara
 from langchain.schema import Document
 from langchain.vectorstores.base import VectorStore
 from langchain.schema import BaseRetriever
-from langchain.embeddings.base import Embeddings
 
 
 class VectaraComponent(CustomComponent):
@@ -22,7 +21,6 @@ class VectaraComponent(CustomComponent):
         "vectara_api_key": {"display_name": "Vectara API Key", "password": True},
         "code": {"show": False},
         "documents": {"display_name": "Documents"},
-        "embedding": {"display_name": "Embedding"},
     }
 
     def build(
@@ -30,21 +28,21 @@ class VectaraComponent(CustomComponent):
         vectara_customer_id: str,
         vectara_corpus_id: str,
         vectara_api_key: str,
-        embedding: Optional[Embeddings] = None,
         documents: Optional[Document] = None,
     ) -> Union[VectorStore, BaseRetriever]:
         # If documents, then we need to create a Vectara instance using .from_documents
-        if documents is not None and embedding is not None:
+        if documents is not None:
             return Vectara.from_documents(
                 documents=documents,  # type: ignore
                 vectara_customer_id=vectara_customer_id,
                 vectara_corpus_id=vectara_corpus_id,
                 vectara_api_key=vectara_api_key,
-                embedding=embedding,
+                source="langflow",
             )
 
         return Vectara(
             vectara_customer_id=vectara_customer_id,
             vectara_corpus_id=vectara_corpus_id,
             vectara_api_key=vectara_api_key,
+            source="langflow",
         )

src/backend/langflow/field_typing/__init__.py

@@ -1,3 +1,53 @@
-from .base import NestedDict
+# LANGCHAIN_BASE_TYPES = {
+#     "Chain": Chain,
+#     "AgentExecutor": AgentExecutor,
+#     "Tool": Tool,
+#     "BaseLLM": BaseLLM,
+#     "PromptTemplate": PromptTemplate,
+#     "BaseLoader": BaseLoader,
+#     "Document": Document,
+#     "TextSplitter": TextSplitter,
+#     "VectorStore": VectorStore,
+#     "Embeddings": Embeddings,
+#     "BaseRetriever": BaseRetriever,
+#     "BaseOutputParser": BaseOutputParser,
+#     "BaseMemory": BaseMemory,
+#     "BaseChatMemory": BaseChatMemory,
+# }
+from .constants import (
+    Tool,
+    PromptTemplate,
+    Chain,
+    BaseChatMemory,
+    BaseLLM,
+    BaseLoader,
+    BaseMemory,
+    BaseOutputParser,
+    BaseRetriever,
+    VectorStore,
+    Embeddings,
+    TextSplitter,
+    Document,
+    AgentExecutor,
+    NestedDict,
+    Data,
+)
 
-__all__ = ["NestedDict"]
+__all__ = [
+    "NestedDict",
+    "Data",
+    "Tool",
+    "PromptTemplate",
+    "Chain",
+    "BaseChatMemory",
+    "BaseLLM",
+    "BaseLoader",
+    "BaseMemory",
+    "BaseOutputParser",
+    "BaseRetriever",
+    "VectorStore",
+    "Embeddings",
+    "TextSplitter",
+    "Document",
+    "AgentExecutor",
+]

src/backend/langflow/field_typing/base.py

@@ -1,4 +0,0 @@
-from typing import Union, Dict
-
-# Type alias for more complex dicts
-NestedDict = Dict[str, Union[str, Dict]]

src/backend/langflow/field_typing/constants.py

@@ -0,0 +1,50 @@
+from langchain.agents.agent import AgentExecutor
+from langchain.chains.base import Chain
+from langchain.document_loaders.base import BaseLoader
+from langchain.llms.base import BaseLLM
+from langchain.memory.chat_memory import BaseChatMemory
+from langchain.prompts import PromptTemplate
+from langchain.schema import BaseOutputParser, BaseRetriever, Document
+from langchain.schema.embeddings import Embeddings
+from langchain.schema.memory import BaseMemory
+from langchain.text_splitter import TextSplitter
+from langchain.tools import Tool
+from langchain.vectorstores.base import VectorStore
+from typing import Union, Dict
+
+# Type alias for more complex dicts
+NestedDict = Dict[str, Union[str, Dict]]
+
+
+class Data:
+    pass
+
+
+LANGCHAIN_BASE_TYPES = {
+    "Chain": Chain,
+    "AgentExecutor": AgentExecutor,
+    "Tool": Tool,
+    "BaseLLM": BaseLLM,
+    "PromptTemplate": PromptTemplate,
+    "BaseLoader": BaseLoader,
+    "Document": Document,
+    "TextSplitter": TextSplitter,
+    "VectorStore": VectorStore,
+    "Embeddings": Embeddings,
+    "BaseRetriever": BaseRetriever,
+    "BaseOutputParser": BaseOutputParser,
+    "BaseMemory": BaseMemory,
+    "BaseChatMemory": BaseChatMemory,
+}
+# Langchain base types plus Python base types
+CUSTOM_COMPONENT_SUPPORTED_TYPES = {
+    **LANGCHAIN_BASE_TYPES,
+    "str": str,
+    "int": int,
+    "float": float,
+    "bool": bool,
+    "list": list,
+    "dict": dict,
+    "NestedDict": NestedDict,
+    "Data": Data,
+}

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

@@ -1,28 +1,79 @@
 from loguru import logger
 from typing import TYPE_CHECKING
+from pydantic import BaseModel, Field
+from typing import List, Optional
 
 if TYPE_CHECKING:
     from langflow.graph.vertex.base import Vertex
 
 
+class SourceHandle(BaseModel):
+    baseClasses: List[str] = Field(
+        ..., description="List of base classes for the source handle."
+    )
+    dataType: str = Field(..., description="Data type for the source handle.")
+    id: str = Field(..., description="Unique identifier for the source handle.")
+
+
+class TargetHandle(BaseModel):
+    fieldName: str = Field(..., description="Field name for the target handle.")
+    id: str = Field(..., description="Unique identifier for the target handle.")
+    inputTypes: Optional[List[str]] = Field(
+        None, description="List of input types for the target handle."
+    )
+    type: str = Field(..., description="Type of the target handle.")
+
+
 class Edge:
     def __init__(self, source: "Vertex", target: "Vertex", edge: dict):
         self.source: "Vertex" = source
         self.target: "Vertex" = target
-        self.source_handle = edge.get("sourceHandle", "")
-        self.target_handle = edge.get("targetHandle", "")
-        # 'BaseLoader;BaseOutputParser|documents|PromptTemplate-zmTlD'
-        # target_param is documents
-        self.target_param = self.target_handle.split("|")[1]
-
+        if data := edge.get("data", {}):
+            self._source_handle = data.get("sourceHandle", {})
+            self._target_handle = data.get("targetHandle", {})
+            self.source_handle: SourceHandle = SourceHandle(**self._source_handle)
+            self.target_handle: TargetHandle = TargetHandle(**self._target_handle)
+            self.target_param = self.target_handle.fieldName
+            # validate handles
+            self.validate_handles()
+        else:
+            # Logging here because this is a breaking change
+            logger.error("Edge data is empty")
+            self._source_handle = edge.get("sourceHandle", "")
+            self._target_handle = edge.get("targetHandle", "")
+            # 'BaseLoader;BaseOutputParser|documents|PromptTemplate-zmTlD'
+            # target_param is documents
+            self.target_param = self._target_handle.split("|")[1]
+        # Validate in __init__ to fail fast
         self.validate_edge()
 
+    def validate_handles(self) -> None:
+        if self.target_handle.inputTypes is None:
+            self.valid_handles = (
+                self.target_handle.type in self.source_handle.baseClasses
+            )
+        else:
+            self.valid_handles = (
+                any(
+                    baseClass in self.target_handle.inputTypes
+                    for baseClass in self.source_handle.baseClasses
+                )
+                or self.target_handle.type in self.source_handle.baseClasses
+            )
+        if not self.valid_handles:
+            logger.debug(self.source_handle)
+            logger.debug(self.target_handle)
+            raise ValueError(
+                f"Edge between {self.source.vertex_type} and {self.target.vertex_type} "
+                f"has invalid handles"
+            )
+
     def __setstate__(self, state):
         self.source = state["source"]
         self.target = state["target"]
         self.target_param = state["target_param"]
-        self.source_handle = state["source_handle"]
-        self.target_handle = state["target_handle"]
+        self.source_handle = state.get("source_handle")
+        self.target_handle = state.get("target_handle")
 
     def reset(self) -> None:
         self.source._build_params()

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

@@ -2,6 +2,7 @@ from typing import Dict, Generator, List, Type, Union
 
 from langflow.graph.edge.base import Edge
 from langflow.graph.graph.constants import lazy_load_vertex_dict
+from langflow.graph.graph.utils import process_flow
 from langflow.graph.vertex.base import Vertex
 from langflow.graph.vertex.types import (
     FileToolVertex,
@@ -19,11 +20,21 @@ class Graph:
 
     def __init__(
         self,
-        nodes: List[Dict[str, Union[str, Dict[str, Union[str, List[str]]]]]],
+        nodes: List[Dict],
         edges: List[Dict[str, str]],
     ) -> None:
         self._nodes = nodes
         self._edges = edges
+        self.raw_graph_data = {"nodes": nodes, "edges": edges}
+
+        self.top_level_nodes = []
+        for node in self._nodes:
+            if node_id := node.get("id"):
+                self.top_level_nodes.append(node_id)
+
+        self._graph_data = process_flow(self.raw_graph_data)
+        self._nodes = self._graph_data["nodes"]
+        self._edges = self._graph_data["edges"]
         self._build_graph()
 
     def __setstate__(self, state):
@@ -50,6 +61,7 @@ class Graph:
             edges = payload["edges"]
             return cls(nodes, edges)
         except KeyError as exc:
+            logger.exception(exc)
             raise ValueError(
                 f"Invalid payload. Expected keys 'nodes' and 'edges'. Found {list(payload.keys())}"
             ) from exc
@@ -215,7 +227,9 @@ class Graph:
             node_lc_type: str = node_data["node"]["template"]["_type"]  # type: ignore
 
             VertexClass = self._get_vertex_class(node_type, node_lc_type)
-            nodes.append(VertexClass(node))
+            vertex = VertexClass(node)
+            vertex.set_top_level(self.top_level_nodes)
+            nodes.append(vertex)
 
         return nodes
 

src/backend/langflow/graph/graph/utils.py

@@ -0,0 +1,230 @@
+from collections import deque
+import copy
+
+
+def find_last_node(nodes, edges):
+    """
+    This function receives a flow and returns the last node.
+    """
+    return next((n for n in nodes if all(e["source"] != n["id"] for e in edges)), None)
+
+
+def add_parent_node_id(nodes, parent_node_id):
+    """
+    This function receives a list of nodes and adds a parent_node_id to each node.
+    """
+    for node in nodes:
+        node["parent_node_id"] = parent_node_id
+
+
+def ungroup_node(group_node_data, base_flow):
+    template, flow = (
+        group_node_data["node"]["template"],
+        group_node_data["node"]["flow"],
+    )
+    parent_node_id = group_node_data["id"]
+    g_nodes = flow["data"]["nodes"]
+    add_parent_node_id(g_nodes, parent_node_id)
+    g_edges = flow["data"]["edges"]
+
+    # Redirect edges to the correct proxy node
+    updated_edges = get_updated_edges(
+        base_flow, g_nodes, g_edges, group_node_data["id"]
+    )
+
+    # Update template values
+    update_template(template, g_nodes)
+
+    nodes = [
+        n for n in base_flow["nodes"] if n["id"] != group_node_data["id"]
+    ] + g_nodes
+    edges = (
+        [
+            e
+            for e in base_flow["edges"]
+            if e["target"] != group_node_data["id"]
+            and e["source"] != group_node_data["id"]
+        ]
+        + g_edges
+        + updated_edges
+    )
+
+    base_flow["nodes"] = nodes
+    base_flow["edges"] = edges
+
+    return nodes
+
+
+def process_flow(flow_object):
+    cloned_flow = copy.deepcopy(flow_object)
+    processed_nodes = set()  # To keep track of processed nodes
+
+    def process_node(node):
+        node_id = node.get("id")
+
+        # If node already processed, skip
+        if node_id in processed_nodes:
+            return
+
+        if (
+            node.get("data")
+            and node["data"].get("node")
+            and node["data"]["node"].get("flow")
+        ):
+            process_flow(node["data"]["node"]["flow"]["data"])
+            new_nodes = ungroup_node(node["data"], cloned_flow)
+            # Add new nodes to the queue for future processing
+            nodes_to_process.extend(new_nodes)
+
+        # Mark node as processed
+        processed_nodes.add(node_id)
+
+    nodes_to_process = deque(cloned_flow["nodes"])
+
+    while nodes_to_process:
+        node = nodes_to_process.popleft()
+        process_node(node)
+
+    return cloned_flow
+
+
+def update_template(template, g_nodes):
+    """
+    Updates the template of a node in a graph with the given template.
+
+    Args:
+        template (dict): The new template to update the node with.
+        g_nodes (list): The list of nodes in the graph.
+
+    Returns:
+        None
+    """
+    for _, value in template.items():
+        if not value.get("proxy"):
+            continue
+        proxy_dict = value["proxy"]
+        field, id_ = proxy_dict["field"], proxy_dict["id"]
+        node_index = next((i for i, n in enumerate(g_nodes) if n["id"] == id_), -1)
+        if node_index != -1:
+            display_name = None
+            show = g_nodes[node_index]["data"]["node"]["template"][field]["show"]
+            advanced = g_nodes[node_index]["data"]["node"]["template"][field][
+                "advanced"
+            ]
+            if "display_name" in g_nodes[node_index]["data"]["node"]["template"][field]:
+                display_name = g_nodes[node_index]["data"]["node"]["template"][field][
+                    "display_name"
+                ]
+            else:
+                display_name = g_nodes[node_index]["data"]["node"]["template"][field][
+                    "name"
+                ]
+
+            g_nodes[node_index]["data"]["node"]["template"][field] = value
+            g_nodes[node_index]["data"]["node"]["template"][field]["show"] = show
+            g_nodes[node_index]["data"]["node"]["template"][field][
+                "advanced"
+            ] = advanced
+            g_nodes[node_index]["data"]["node"]["template"][field][
+                "display_name"
+            ] = display_name
+
+
+def update_target_handle(new_edge, g_nodes, group_node_id):
+    """
+    Updates the target handle of a given edge if it is a proxy node.
+
+    Args:
+        new_edge (dict): The edge to update.
+        g_nodes (list): The list of nodes in the graph.
+        group_node_id (str): The ID of the group node.
+
+    Returns:
+        dict: The updated edge.
+    """
+    target_handle = new_edge["data"]["targetHandle"]
+    if target_handle.get("proxy"):
+        proxy_id = target_handle["proxy"]["id"]
+        if node := next((n for n in g_nodes if n["id"] == proxy_id), None):
+            set_new_target_handle(proxy_id, new_edge, target_handle, node)
+    return new_edge
+
+
+def set_new_target_handle(proxy_id, new_edge, target_handle, node):
+    """
+    Sets a new target handle for a given edge.
+
+    Args:
+        proxy_id (str): The ID of the proxy.
+        new_edge (dict): The new edge to be created.
+        target_handle (dict): The target handle of the edge.
+        node (dict): The node containing the edge.
+
+    Returns:
+        None
+    """
+    new_edge["target"] = proxy_id
+    _type = target_handle.get("type")
+    if _type is None:
+        raise KeyError("The 'type' key must be present in target_handle.")
+
+    field = target_handle["proxy"]["field"]
+    new_target_handle = {
+        "fieldName": field,
+        "type": _type,
+        "id": proxy_id,
+    }
+    if node["data"]["node"].get("flow"):
+        new_target_handle["proxy"] = {
+            "field": node["data"]["node"]["template"][field]["proxy"]["field"],
+            "id": node["data"]["node"]["template"][field]["proxy"]["id"],
+        }
+    if input_types := target_handle.get("inputTypes"):
+        new_target_handle["inputTypes"] = input_types
+    new_edge["data"]["targetHandle"] = new_target_handle
+
+
+def update_source_handle(new_edge, g_nodes, g_edges):
+    """
+    Updates the source handle of a given edge to the last node in the flow data.
+
+    Args:
+        new_edge (dict): The edge to update.
+        flow_data (dict): The flow data containing the nodes and edges.
+
+    Returns:
+        dict: The updated edge with the new source handle.
+    """
+    last_node = copy.deepcopy(find_last_node(g_nodes, g_edges))
+    new_edge["source"] = last_node["id"]
+    new_source_handle = new_edge["data"]["sourceHandle"]
+    new_source_handle["id"] = last_node["id"]
+    new_edge["data"]["sourceHandle"] = new_source_handle
+    return new_edge
+
+
+def get_updated_edges(base_flow, g_nodes, g_edges, group_node_id):
+    """
+    Given a base flow, a list of graph nodes and a group node id, returns a list of updated edges.
+    An updated edge is an edge that has its target or source handle updated based on the group node id.
+
+    Args:
+        base_flow (dict): The base flow containing a list of edges.
+        g_nodes (list): A list of graph nodes.
+        group_node_id (str): The id of the group node.
+
+    Returns:
+        list: A list of updated edges.
+    """
+    updated_edges = []
+    for edge in base_flow["edges"]:
+        new_edge = copy.deepcopy(edge)
+        if new_edge["target"] == group_node_id:
+            new_edge = update_target_handle(new_edge, g_nodes, group_node_id)
+
+        if new_edge["source"] == group_node_id:
+            new_edge = update_source_handle(new_edge, g_nodes, g_edges)
+
+        if edge["target"] == group_node_id or edge["source"] == group_node_id:
+            updated_edges.append(new_edge)
+    return updated_edges

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

@@ -38,6 +38,8 @@ class Vertex:
         self.task_id: Optional[str] = None
         self.is_task = is_task
         self.params = params or {}
+        self.parent_node_id: Optional[str] = self._data.get("parent_node_id")
+        self.parent_is_top_level = False
 
     def reset_params(self):
         for edge in self.edges:
@@ -88,6 +90,11 @@ class Vertex:
             self._built = False
         self.artifacts: Dict[str, Any] = {}
         self.task_id: Optional[str] = None
+        self.parent_node_id = state["parent_node_id"]
+        self.parent_is_top_level = state["parent_is_top_level"]
+
+    def set_top_level(self, top_level_nodes: List[str]) -> None:
+        self.parent_is_top_level = self.parent_node_id in top_level_nodes
 
     def _parse_data(self) -> None:
         self.data = self._data["data"]
@@ -209,6 +216,16 @@ class Vertex:
                         }
                     elif isinstance(_value, dict):
                         params[key] = _value
+                elif value.get("type") == "int" and value.get("value") is not None:
+                    try:
+                        params[key] = int(value.get("value"))
+                    except ValueError:
+                        params[key] = value.get("value")
+                elif value.get("type") == "float" and value.get("value") is not None:
+                    try:
+                        params[key] = float(value.get("value"))
+                    except ValueError:
+                        params[key] = value.get("value")
                 else:
                     params[key] = value.get("value")
 
@@ -342,7 +359,7 @@ class Vertex:
         except Exception as exc:
             logger.exception(exc)
             raise ValueError(
-                f"Error building node {self.vertex_type}: {str(exc)}"
+                f"Error building node {self.vertex_type}(ID:{self.id}): {str(exc)}"
             ) from exc
 
     def _update_built_object_and_artifacts(self, result):

src/backend/langflow/interface/agents/custom.py

@@ -1,6 +1,6 @@
 from typing import Any, List, Optional
 
-from langchain import LLMChain
+from langchain.chains.llm import LLMChain
 from langchain.agents import (
     AgentExecutor,
     Tool,

src/backend/langflow/interface/agents/prebuilt.py

@@ -1,4 +1,4 @@
-from langchain import LLMChain
+from langchain.chains.llm import LLMChain
 from langchain.agents import AgentExecutor, ZeroShotAgent
 from langchain.agents.agent_toolkits.json.prompt import JSON_PREFIX, JSON_SUFFIX
 from langchain.agents.agent_toolkits.json.toolkit import JsonToolkit

src/backend/langflow/interface/custom/constants.py

@@ -1,65 +1,33 @@
-from langchain import PromptTemplate
-from langchain.chains.base import Chain
-from langchain.document_loaders.base import BaseLoader
-from langchain.embeddings.base import Embeddings
-from langchain.llms.base import BaseLLM
-from langchain.schema import BaseRetriever, Document
-from langchain.text_splitter import TextSplitter
-from langchain.tools import Tool
-from langchain.vectorstores.base import VectorStore
-from langchain.schema import BaseOutputParser
-from langchain.schema.memory import BaseMemory
-from langchain.memory.chat_memory import BaseChatMemory
-from langchain.agents.agent import AgentExecutor
-
-LANGCHAIN_BASE_TYPES = {
-    "Chain": Chain,
-    "AgentExecutor": AgentExecutor,
-    "Tool": Tool,
-    "BaseLLM": BaseLLM,
-    "PromptTemplate": PromptTemplate,
-    "BaseLoader": BaseLoader,
-    "Document": Document,
-    "TextSplitter": TextSplitter,
-    "VectorStore": VectorStore,
-    "Embeddings": Embeddings,
-    "BaseRetriever": BaseRetriever,
-    "BaseOutputParser": BaseOutputParser,
-    "BaseMemory": BaseMemory,
-    "BaseChatMemory": BaseChatMemory,
-}
-
-# Langchain base types plus Python base types
-CUSTOM_COMPONENT_SUPPORTED_TYPES = {
-    **LANGCHAIN_BASE_TYPES,
-    "str": str,
-    "int": int,
-    "float": float,
-    "bool": bool,
-    "list": list,
-    "dict": dict,
-}
-
-
 DEFAULT_CUSTOM_COMPONENT_CODE = """from langflow import CustomComponent
 
-from langchain.llms.base import BaseLLM
-from langchain.chains import LLMChain
-from langchain import PromptTemplate
-from langchain.schema import Document
+from langflow.field_typing import (
+    Tool,
+    PromptTemplate,
+    Chain,
+    BaseChatMemory,
+    BaseLLM,
+    BaseLoader,
+    BaseMemory,
+    BaseOutputParser,
+    BaseRetriever,
+    VectorStore,
+    Embeddings,
+    TextSplitter,
+    Document,
+    AgentExecutor,
+    NestedDict,
+    Data,
+)
 
-import requests
 
-class YourComponent(CustomComponent):
+class Component(CustomComponent):
     display_name: str = "Custom Component"
     description: str = "Create any custom component you want!"
 
     def build_config(self):
-        return { "url": { "multiline": True, "required": True } }
+        return {"param": {"display_name": "Parameter"}}
+
+    def build(self, param: Data) -> Data:
+        return param
 
-    def build(self, url: str, llm: BaseLLM, prompt: PromptTemplate) -> Document:
-        response = requests.get(url)
-        chain = LLMChain(llm=llm, prompt=prompt)
-        result = chain.run(response.text[:300])
-        return Document(page_content=str(result))
 """

src/backend/langflow/interface/custom/custom_component.py

@@ -1,7 +1,7 @@
 from typing import Any, Callable, ClassVar, List, Optional, Union, Dict
 from uuid import UUID
 from fastapi import HTTPException
-from langflow.interface.custom.constants import CUSTOM_COMPONENT_SUPPORTED_TYPES
+from langflow.field_typing.constants import CUSTOM_COMPONENT_SUPPORTED_TYPES
 from langflow.interface.custom.component import Component
 from langflow.interface.custom.directory_reader import DirectoryReader
 from langflow.services.getters import get_db_service
@@ -108,6 +108,9 @@ class CustomComponent(Component, extra=Extra.allow):
                         ),
                     },
                 )
+            elif not arg.get("type"):
+                # Set the type to Data
+                arg["type"] = "Data"
         return args
 
     @property

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

@@ -3,7 +3,7 @@
 import importlib
 from typing import Any, Type
 
-from langchain import PromptTemplate
+from langchain.prompts import PromptTemplate
 from langchain.agents import Agent
 from langchain.base_language import BaseLanguageModel
 from langchain.chains.base import Chain

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

@@ -111,7 +111,7 @@ def instantiate_based_on_type(class_object, base_type, node_type, params, user_i
     elif base_type == "vectorstores":
         return instantiate_vectorstore(class_object, params)
     elif base_type == "documentloaders":
-        return instantiate_documentloader(class_object, params)
+        return instantiate_documentloader(node_type, class_object, params)
     elif base_type == "textsplitters":
         return instantiate_textsplitter(class_object, params)
     elif base_type == "utilities":
@@ -321,7 +321,9 @@ def instantiate_vectorstore(class_object: Type[VectorStore], params: Dict):
     return vecstore
 
 
-def instantiate_documentloader(class_object: Type[BaseLoader], params: Dict):
+def instantiate_documentloader(
+    node_type: str, class_object: Type[BaseLoader], params: Dict
+):
     if "file_filter" in params:
         # file_filter will be a string but we need a function
         # that will be used to filter the files using file_filter
@@ -341,6 +343,11 @@ def instantiate_documentloader(class_object: Type[BaseLoader], params: Dict):
             raise ValueError(
                 "The metadata you provided is not a valid JSON string."
             ) from exc
+
+    if node_type == "WebBaseLoader":
+        if web_path := params.pop("web_path", None):
+            params["web_paths"] = [web_path]
+
     docs = class_object(**params).load()
     # Now if metadata is an empty dict, we will not add it to the documents
     if metadata:

src/backend/langflow/interface/types.py

@@ -4,7 +4,7 @@ from typing import Any, List
 from langflow.api.utils import get_new_key
 from langflow.interface.agents.base import agent_creator
 from langflow.interface.chains.base import chain_creator
-from langflow.interface.custom.constants import CUSTOM_COMPONENT_SUPPORTED_TYPES
+from langflow.field_typing.constants import CUSTOM_COMPONENT_SUPPORTED_TYPES
 from langflow.interface.custom.utils import extract_inner_type
 from langflow.interface.document_loaders.base import documentloader_creator
 from langflow.interface.embeddings.base import embedding_creator
@@ -288,6 +288,24 @@ def add_base_classes(frontend_node, return_types: List[str]):
                 frontend_node.get("base_classes").append(base_class)
 
 
+def add_output_types(frontend_node, return_types: List[str]):
+    """Add output types to the frontend node"""
+    for return_type in return_types:
+        if return_type not in CUSTOM_COMPONENT_SUPPORTED_TYPES or return_type is None:
+            raise HTTPException(
+                status_code=400,
+                detail={
+                    "error": (
+                        "Invalid return type should be one of: "
+                        f"{list(CUSTOM_COMPONENT_SUPPORTED_TYPES.keys())}"
+                    ),
+                    "traceback": traceback.format_exc(),
+                },
+            )
+
+        frontend_node.get("output_types").append(return_type)
+
+
 def build_langchain_template_custom_component(custom_component: CustomComponent):
     """Build a custom component template for the langchain"""
     try:
@@ -314,6 +332,9 @@ def build_langchain_template_custom_component(custom_component: CustomComponent)
         add_base_classes(
             frontend_node, custom_component.get_function_entrypoint_return_type
         )
+        add_output_types(
+            frontend_node, custom_component.get_function_entrypoint_return_type
+        )
         logger.debug("Added base classes")
         return frontend_node
     except Exception as exc:

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

@@ -1,6 +1,6 @@
 from typing import Dict, List, Optional, Type
 
-from langchain import SQLDatabase, utilities
+from langchain import utilities
 
 from langflow.custom.customs import get_custom_nodes
 from langflow.interface.base import LangChainTypeCreator
@@ -32,7 +32,7 @@ class UtilityCreator(LangChainTypeCreator):
                 utility_name: import_class(f"langchain.utilities.{utility_name}")
                 for utility_name in utilities.__all__
             }
-            self.type_dict["SQLDatabase"] = SQLDatabase
+            self.type_dict["SQLDatabase"] = utilities.SQLDatabase
             # Filter according to settings.utilities
             self.type_dict = {
                 name: utility

src/backend/langflow/interface/utils.py

@@ -36,7 +36,7 @@ def pil_to_base64(image: Image) -> str:
     return img_str.decode("utf-8")
 
 
-def try_setting_streaming_options(langchain_object, websocket):
+def try_setting_streaming_options(langchain_object):
     # If the LLM type is OpenAI or ChatOpenAI,
     # set streaming to True
     # First we need to find the LLM

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

@@ -1,6 +1,6 @@
 from typing import ClassVar, Dict, List, Optional
 
-from langchain import requests, sql_database
+from langchain.utilities import requests, sql_database
 
 from langflow.interface.base import LangChainTypeCreator
 from loguru import logger

src/backend/langflow/processing/base.py

@@ -34,7 +34,9 @@ def get_langfuse_callback(trace_id):
     if langfuse := LangfuseInstance.get():
         logger.debug("Langfuse credentials found")
         try:
-            trace = langfuse.trace(CreateTrace(id=trace_id))
+            trace = langfuse.trace(
+                CreateTrace(name="langflow-" + trace_id, id=trace_id)
+            )
             return trace.getNewHandler()
         except Exception as exc:
             logger.error(f"Error initializing langfuse callback: {exc}")

src/backend/langflow/server.py

@@ -4,6 +4,8 @@ from gunicorn.app.base import BaseApplication  # type: ignore
 class LangflowApplication(BaseApplication):
     def __init__(self, app, options=None):
         self.options = options or {}
+
+        self.options["worker_class"] = "uvicorn.workers.UvicornWorker"
         self.application = app
         super().__init__()
 

src/backend/langflow/services/chat/manager.py

@@ -1,6 +1,7 @@
 from collections import defaultdict
 import uuid
 from fastapi import WebSocket, status
+from starlette.websockets import WebSocketState
 from langflow.api.v1.schemas import ChatMessage, ChatResponse, FileResponse
 from langflow.interface.utils import pil_to_base64
 from langflow.services.base import Service
@@ -125,7 +126,8 @@ class ChatService(Service):
     ):
         # Process the graph data and chat message
         chat_inputs = payload.pop("inputs", {})
-        chat_inputs = ChatMessage(message=chat_inputs)
+        chatkey = payload.pop("chatKey", None)
+        chat_inputs = ChatMessage(message=chat_inputs, chatKey=chatkey)
         self.chat_history.add_message(client_id, chat_inputs)
 
         # graph_data = payload
@@ -140,7 +142,7 @@ class ChatService(Service):
             result, intermediate_steps = await process_graph(
                 langchain_object=langchain_object,
                 chat_inputs=chat_inputs,
-                websocket=self.active_connections[client_id],
+                client_id=client_id,
                 session_id=self.connection_ids[client_id],
             )
             self.set_cache(client_id, langchain_object)
@@ -200,11 +202,11 @@ class ChatService(Service):
 
             while True:
                 json_payload = await websocket.receive_json()
-                try:
+                if isinstance(json_payload, str):
                     payload = orjson.loads(json_payload)
-                except Exception:
+                elif isinstance(json_payload, dict):
                     payload = json_payload
-                if "clear_history" in payload:
+                if "clear_history" in payload and payload["clear_history"]:
                     self.chat_history.history[client_id] = []
                     continue
 
@@ -216,23 +218,29 @@ class ChatService(Service):
 
                     else:
                         raise RuntimeError(
-                            f"Could not find a LangChain object for client_id {client_id}"
+                            f"Could not find a build result for client_id {client_id}"
                         )
         except Exception as exc:
             # Handle any exceptions that might occur
-            logger.error(f"Error handling websocket: {exc}")
-            await self.close_connection(
-                client_id=client_id,
-                code=status.WS_1011_INTERNAL_ERROR,
-                reason=str(exc)[:120],
-            )
-        finally:
-            try:
+            logger.exception(f"Error handling websocket: {exc}")
+            if websocket.client_state == WebSocketState.CONNECTED:
                 await self.close_connection(
                     client_id=client_id,
-                    code=status.WS_1000_NORMAL_CLOSURE,
-                    reason="Client disconnected",
+                    code=status.WS_1011_INTERNAL_ERROR,
+                    reason=str(exc)[:120],
                 )
+            elif websocket.client_state == WebSocketState.DISCONNECTED:
+                self.disconnect(client_id)
+
+        finally:
+            try:
+                # first check if the connection is still open
+                if websocket.client_state == WebSocketState.CONNECTED:
+                    await self.close_connection(
+                        client_id=client_id,
+                        code=status.WS_1000_NORMAL_CLOSURE,
+                        reason="Client disconnected",
+                    )
             except Exception as exc:
                 logger.error(f"Error closing connection: {exc}")
             self.disconnect(client_id)

src/backend/langflow/services/chat/utils.py

@@ -1,4 +1,3 @@
-from fastapi import WebSocket
 from langflow.api.v1.schemas import ChatMessage
 from langflow.processing.base import get_result_and_steps
 from langflow.interface.utils import try_setting_streaming_options
@@ -8,10 +7,10 @@ from loguru import logger
 async def process_graph(
     langchain_object,
     chat_inputs: ChatMessage,
-    websocket: WebSocket,
+    client_id: str,
     session_id: str,
 ):
-    langchain_object = try_setting_streaming_options(langchain_object, websocket)
+    langchain_object = try_setting_streaming_options(langchain_object)
     logger.debug("Loaded langchain object")
 
     if langchain_object is None:
@@ -30,7 +29,7 @@ async def process_graph(
         result, intermediate_steps = await get_result_and_steps(
             langchain_object,
             chat_inputs.message,
-            websocket=websocket,
+            client_id=client_id,
             session_id=session_id,
         )
         logger.debug("Generated result and intermediate_steps")

src/backend/langflow/services/database/manager.py

@@ -6,6 +6,7 @@ from langflow.services.database.utils import Result, TableResults
 from langflow.services.getters import get_settings_service
 from sqlalchemy import inspect
 import sqlalchemy as sa
+from sqlalchemy.exc import OperationalError
 from sqlmodel import SQLModel, Session, create_engine
 from loguru import logger
 from alembic.config import Config
@@ -58,6 +59,27 @@ class DatabaseService(Service):
         with Session(self.engine) as session:
             yield session
 
+    def migrate_flows_if_auto_login(self):
+        # if auto_login is enabled, we need to migrate the flows
+        # to the default superuser if they don't have a user id
+        # associated with them
+        settings_service = get_settings_service()
+        if settings_service.auth_settings.AUTO_LOGIN:
+            with Session(self.engine) as session:
+                flows = (
+                    session.query(models.Flow)
+                    .filter(models.Flow.user_id == None)  # noqa
+                    .all()
+                )
+                if flows:
+                    logger.debug("Migrating flows to default superuser")
+                    username = settings_service.auth_settings.SUPERUSER
+                    user = get_user_by_username(session, username)
+                    for flow in flows:
+                        flow.user_id = user.id
+                    session.commit()
+                    logger.debug("Flows migrated successfully")
+
     def check_schema_health(self) -> bool:
         inspector = inspect(self.engine)
 
@@ -93,7 +115,35 @@ class DatabaseService(Service):
 
         return True
 
+    def init_alembic(self):
+        logger.info("Initializing alembic")
+        alembic_cfg = Config()
+        alembic_cfg.set_main_option("script_location", str(self.script_location))
+        alembic_cfg.set_main_option("sqlalchemy.url", self.database_url)
+        command.stamp(alembic_cfg, "head")
+        logger.info("Alembic initialized")
+
     def run_migrations(self):
+        # First we need to check if alembic has been initialized
+        # If not, we need to initialize it
+        # if not self.script_location.exists(): # this is not the correct way to check if alembic has been initialized
+        # We need to check if the alembic_version table exists
+        # if not, we need to initialize alembic
+        with Session(self.engine) as session:
+            # If the table does not exist it throws an error
+            # so we need to catch it
+            try:
+                session.execute("SELECT * FROM alembic_version")
+            except Exception:
+                logger.info("Alembic not initialized")
+                try:
+                    self.init_alembic()
+                except Exception as exc:
+                    logger.error(f"Error initializing alembic: {exc}")
+                    raise RuntimeError("Error initializing alembic") from exc
+            else:
+                logger.info("Alembic already initialized")
+
         logger.info(f"Running DB migrations in {self.script_location}")
         alembic_cfg = Config()
         alembic_cfg.set_main_option("script_location", str(self.script_location))
@@ -133,19 +183,31 @@ class DatabaseService(Service):
         return results
 
     def create_db_and_tables(self):
-        logger.debug("Creating database and tables")
-        try:
-            SQLModel.metadata.create_all(self.engine)
-        except Exception as exc:
-            logger.error(f"Error creating database and tables: {exc}")
-            raise RuntimeError("Error creating database and tables") from exc
-
-        # Now check if the table "flow" exists, if not, something went wrong
-        # and we need to create the tables again.
         from sqlalchemy import inspect
 
         inspector = inspect(self.engine)
+        table_names = inspector.get_table_names()
         current_tables = ["flow", "user", "apikey"]
+
+        if table_names and all(table in table_names for table in current_tables):
+            logger.debug("Database and tables already exist")
+            return
+
+        logger.debug("Creating database and tables")
+
+        for table in SQLModel.metadata.sorted_tables:
+            try:
+                table.create(self.engine, checkfirst=True)
+            except OperationalError as oe:
+                logger.warning(
+                    f"Table {table} already exists, skipping. Exception: {oe}"
+                )
+            except Exception as exc:
+                logger.error(f"Error creating table {table}: {exc}")
+                raise RuntimeError(f"Error creating table {table}") from exc
+
+        # Now check if the required tables exist, if not, something went wrong.
+        inspector = inspect(self.engine)
         table_names = inspector.get_table_names()
         for table in current_tables:
             if table not in table_names:

src/backend/langflow/services/database/models/api_key/api_key.py

@@ -12,7 +12,7 @@ if TYPE_CHECKING:
 class ApiKeyBase(SQLModelSerializable):
     name: Optional[str] = Field(index=True)
     created_at: datetime = Field(default_factory=datetime.utcnow)
-    last_used_at: Optional[datetime] = Field(default=None)
+    last_used_at: Optional[datetime] = Field(default=None, nullable=True)
     total_uses: int = Field(default=0)
     is_active: bool = Field(default=True)
 

src/backend/langflow/services/database/models/api_key/crud.py

@@ -22,7 +22,7 @@ def create_api_key(
     session: Session, api_key_create: ApiKeyCreate, user_id: UUID
 ) -> UnmaskedApiKeyRead:
     # Generate a random API key with 32 bytes of randomness
-    generated_api_key = f"lf-{secrets.token_urlsafe(32)}"
+    generated_api_key = f"sk-{secrets.token_urlsafe(32)}"
 
     api_key = ApiKey(
         api_key=generated_api_key,

src/backend/langflow/services/database/models/flow/flow.py

@@ -2,6 +2,7 @@
 
 from langflow.services.database.models.base import SQLModelSerializable
 from pydantic import validator
+
 from sqlmodel import Field, JSON, Column, Relationship
 from uuid import UUID, uuid4
 from typing import Dict, Optional, TYPE_CHECKING
@@ -12,8 +13,8 @@ if TYPE_CHECKING:
 
 class FlowBase(SQLModelSerializable):
     name: str = Field(index=True)
-    description: Optional[str] = Field(index=True, default="")
-    data: Optional[Dict] = Field(default=None)
+    description: Optional[str] = Field(index=True)
+    data: Optional[Dict] = Field(default=None, nullable=True)
 
     @validator("data")
     def validate_json(v):

src/backend/langflow/services/database/models/user/user.py

@@ -15,7 +15,7 @@ class User(SQLModelSerializable, table=True):
     id: UUID = Field(default_factory=uuid4, primary_key=True, unique=True)
     username: str = Field(index=True, unique=True)
     password: str = Field()
-    profile_image: Optional[str] = Field(default=None)
+    profile_image: Optional[str] = Field(default=None, nullable=True)
     is_active: bool = Field(default=False)
     is_superuser: bool = Field(default=False)
     create_at: datetime = Field(default_factory=datetime.utcnow)

src/backend/langflow/services/database/utils.py

@@ -13,7 +13,17 @@ def initialize_database():
     logger.debug("Initializing database")
     from langflow.services import service_manager, ServiceType
 
-    database_service = service_manager.get(ServiceType.DATABASE_SERVICE)
+    database_service: "DatabaseService" = service_manager.get(
+        ServiceType.DATABASE_SERVICE
+    )
+    try:
+        database_service.create_db_and_tables()
+    except Exception as exc:
+        # if the exception involves tables already existing
+        # we can ignore it
+        if "already exists" not in str(exc):
+            logger.error(f"Error creating DB and tables: {exc}")
+            raise RuntimeError("Error creating DB and tables") from exc
     try:
         database_service.check_schema_health()
     except Exception as exc:
@@ -22,7 +32,11 @@ def initialize_database():
     try:
         database_service.run_migrations()
     except CommandError as exc:
-        if "Can't locate revision identified by" not in str(exc):
+        # if "overlaps with other requested revisions" or "Can't locate revision identified by"
+        # are not in the exception, we can't handle it
+        if "overlaps with other requested revisions" not in str(
+            exc
+        ) and "Can't locate revision identified by" not in str(exc):
             raise exc
         # This means there's wrong revision in the DB
         # We need to delete the alembic_version table
@@ -39,7 +53,6 @@ def initialize_database():
         if "already exists" not in str(exc):
             logger.error(f"Error running migrations: {exc}")
             raise RuntimeError("Error running migrations") from exc
-    database_service.create_db_and_tables()
     logger.debug("Database initialized")
 
 

src/backend/langflow/services/manager.py

@@ -90,7 +90,10 @@ class ServiceManager:
             if service is None:
                 continue
             logger.debug(f"Teardown service {service.name}")
-            service.teardown()
+            try:
+                service.teardown()
+            except Exception as exc:
+                logger.exception(exc)
         self.services = {}
         self.factories = {}
         self.dependencies = {}
@@ -99,51 +102,6 @@ class ServiceManager:
 service_manager = ServiceManager()
 
 
-def initialize_services():
-    """
-    Initialize all the services needed.
-    """
-    from langflow.services.database import factory as database_factory
-    from langflow.services.cache import factory as cache_factory
-    from langflow.services.chat import factory as chat_factory
-    from langflow.services.settings import factory as settings_factory
-    from langflow.services.session import factory as session_service_factory
-    from langflow.services.auth import factory as auth_factory
-    from langflow.services.task import factory as task_factory
-
-    service_manager.register_factory(settings_factory.SettingsServiceFactory())
-    service_manager.register_factory(
-        database_factory.DatabaseServiceFactory(),
-        dependencies=[ServiceType.SETTINGS_SERVICE],
-    )
-    service_manager.register_factory(
-        cache_factory.CacheServiceFactory(), dependencies=[ServiceType.SETTINGS_SERVICE]
-    )
-
-    service_manager.register_factory(
-        auth_factory.AuthServiceFactory(), dependencies=[ServiceType.SETTINGS_SERVICE]
-    )
-
-    service_manager.register_factory(chat_factory.ChatServiceFactory())
-    service_manager.register_factory(
-        session_service_factory.SessionServiceFactory(),
-        dependencies=[ServiceType.CACHE_SERVICE],
-    )
-    service_manager.register_factory(
-        task_factory.TaskServiceFactory(),
-    )
-
-    # Test cache connection
-    service_manager.get(ServiceType.CACHE_SERVICE)
-    # Test database connection
-    service_manager.get(ServiceType.DATABASE_SERVICE)
-
-    # Test cache connection
-    service_manager.get(ServiceType.CACHE_SERVICE)
-    # Test database connection
-    service_manager.get(ServiceType.DATABASE_SERVICE)
-
-
 def reinitialize_services():
     """
     Reinitialize all the services needed.
@@ -194,10 +152,3 @@ def initialize_session_service():
         session_service_factory.SessionServiceFactory(),
         dependencies=[ServiceType.CACHE_SERVICE],
     )
-
-
-def teardown_services():
-    """
-    Teardown all the services.
-    """
-    service_manager.teardown()

src/backend/langflow/services/settings/auth.py

@@ -35,7 +35,7 @@ class AuthSettings(BaseSettings):
 
     # If AUTO_LOGIN = True
     # > The application does not request login and logs in automatically as a super user.
-    AUTO_LOGIN: bool = False
+    AUTO_LOGIN: bool = True
     NEW_USER_IS_ACTIVE: bool = False
     SUPERUSER: str = DEFAULT_SUPERUSER
     SUPERUSER_PASSWORD: str = DEFAULT_SUPERUSER_PASSWORD

src/backend/langflow/services/task/backends/anyio.py

@@ -34,6 +34,8 @@ class AnyIOTaskResult:
 
 
 class AnyIOBackend(TaskBackend):
+    name = "anyio"
+
     def __init__(self):
         self.tasks = {}
 

src/backend/langflow/services/task/backends/celery.py

@@ -5,6 +5,8 @@ from langflow.worker import celery_app
 
 
 class CeleryBackend(TaskBackend):
+    name = "celery"
+
     def __init__(self):
         self.celery_app = celery_app
 

src/backend/langflow/services/task/manager.py

@@ -35,6 +35,10 @@ class TaskService(Service):
         self.backend = self.get_backend()
         self.use_celery = USE_CELERY
 
+    @property
+    def backend_name(self) -> str:
+        return self.backend.name
+
     def get_backend(self) -> TaskBackend:
         if USE_CELERY:
             from langflow.services.task.backends.celery import CeleryBackend

src/backend/langflow/services/utils.py

@@ -1,4 +1,4 @@
-from langflow.services.auth.utils import create_super_user
+from langflow.services.auth.utils import create_super_user, verify_password
 from langflow.services.database.utils import initialize_database
 from langflow.services.manager import service_manager
 from langflow.services.schema import ServiceType
@@ -6,50 +6,121 @@ from langflow.services.settings.constants import (
     DEFAULT_SUPERUSER,
     DEFAULT_SUPERUSER_PASSWORD,
 )
-from .getters import get_session, get_settings_service
+from sqlmodel import Session
+from .getters import get_db_service, get_session, get_settings_service
 from loguru import logger
 
 
-def setup_superuser(settings_service, session):
-    """
-    Setup the superuser.
-    """
-    # We will use the SUPERUSER and SUPERUSER_PASSWORD
-    # vars on settings_manager.auth_settings to create the superuser
-    # if it does not exist.
+def get_factories_and_deps():
+    from langflow.services.database import factory as database_factory
+    from langflow.services.cache import factory as cache_factory
+    from langflow.services.chat import factory as chat_factory
+    from langflow.services.settings import factory as settings_factory
+    from langflow.services.auth import factory as auth_factory
+    from langflow.services.task import factory as task_factory
+    from langflow.services.session import factory as session_service_factory  # type: ignore
+
+    return [
+        (settings_factory.SettingsServiceFactory(), []),
+        (
+            auth_factory.AuthServiceFactory(),
+            [ServiceType.SETTINGS_SERVICE],
+        ),
+        (
+            database_factory.DatabaseServiceFactory(),
+            [ServiceType.SETTINGS_SERVICE],
+        ),
+        (
+            cache_factory.CacheServiceFactory(),
+            [ServiceType.SETTINGS_SERVICE],
+        ),
+        (chat_factory.ChatServiceFactory(), []),
+        (task_factory.TaskServiceFactory(), []),
+        (
+            session_service_factory.SessionServiceFactory(),
+            [ServiceType.CACHE_SERVICE],
+        ),
+    ]
+
+
+def get_or_create_super_user(session: Session, username, password, is_default):
+    from langflow.services.database.models.user.user import User
+
+    user = session.query(User).filter(User.username == username).first()
+
+    if user and user.is_superuser:
+        return None  # Superuser already exists
+
+    if user and is_default:
+        if user.is_superuser:
+            if verify_password(password, user.password):
+                return None
+            else:
+                # Superuser exists but password is incorrect
+                # which means that the user has changed the
+                # base superuser credentials.
+                # This means that the user has already created
+                # a superuser and changed the password in the UI
+                # so we don't need to do anything.
+                logger.debug(
+                    "Superuser exists but password is incorrect. "
+                    "This means that the user has changed the "
+                    "base superuser credentials."
+                )
+                return None
+        else:
+            logger.debug(
+                "User with superuser credentials exists but is not a superuser."
+            )
+            return None
+
+    if user:
+        if verify_password(password, user.password):
+            raise ValueError(
+                "User with superuser credentials exists but is not a superuser."
+            )
+        else:
+            raise ValueError("Incorrect superuser credentials")
+
+    if is_default:
+        logger.debug("Creating default superuser.")
+    else:
+        logger.debug("Creating superuser.")
+    try:
+        return create_super_user(username, password, db=session)
+    except Exception as exc:
+        if "UNIQUE constraint failed: user.username" in str(exc):
+            # This is to deal with workers running this
+            # at startup and trying to create the superuser
+            # at the same time.
+            logger.debug("Superuser already exists.")
+            return None
+
+
+def setup_superuser(settings_service, session: Session):
     if settings_service.auth_settings.AUTO_LOGIN:
         logger.debug("AUTO_LOGIN is set to True. Creating default superuser.")
 
     username = settings_service.auth_settings.SUPERUSER
     password = settings_service.auth_settings.SUPERUSER_PASSWORD
-    if username == DEFAULT_SUPERUSER and password == DEFAULT_SUPERUSER_PASSWORD:
-        logger.debug("Default superuser credentials detected.")
-        logger.debug("Creating default superuser.")
-    else:
-        logger.debug("Creating superuser.")
+
+    is_default = (username == DEFAULT_SUPERUSER) and (
+        password == DEFAULT_SUPERUSER_PASSWORD
+    )
 
     try:
-        from langflow.services.database.models.user.user import User
-
-        user = session.query(User).filter(User.username == username).first()
-        if user and user.is_superuser is True:
-            return
+        user = get_or_create_super_user(
+            session=session, username=username, password=password, is_default=is_default
+        )
+        if user is not None:
+            logger.debug("Superuser created successfully.")
     except Exception as exc:
         logger.exception(exc)
         raise RuntimeError(
             "Could not create superuser. Please create a superuser manually."
         ) from exc
-    try:
-        # create superuser
-        create_super_user(db=session, username=username, password=password)
-    except Exception as exc:
-        logger.exception(exc)
-        raise RuntimeError(
-            "Could not create superuser. Please create a superuser manually."
-        ) from exc
-    # reset superuser credentials
-    settings_service.auth_settings.reset_credentials()
-    logger.debug("Superuser created successfully.")
+    finally:
+        settings_service.auth_settings.reset_credentials()
 
 
 def teardown_superuser(settings_service, session):
@@ -60,17 +131,21 @@ def teardown_superuser(settings_service, session):
     # from the database.
 
     if settings_service.auth_settings.AUTO_LOGIN:
-        logger.debug("AUTO_LOGIN is set to True. Removing default superuser.")
-        username = settings_service.auth_settings.SUPERUSER
-        from langflow.services.database.models.user.user import User
+        try:
+            logger.debug("AUTO_LOGIN is set to True. Removing default superuser.")
+            username = settings_service.auth_settings.SUPERUSER
+            from langflow.services.database.models.user.user import User
 
-        user = session.query(User).filter(User.username == username).first()
-        if user and user.is_superuser:
-            session.delete(user)
-            session.commit()
-            logger.debug("Default superuser removed successfully.")
-        else:
-            logger.debug("Default superuser not found.")
+            user = session.query(User).filter(User.username == username).first()
+            if user and user.is_superuser:
+                session.delete(user)
+                session.commit()
+                logger.debug("Default superuser removed successfully.")
+            else:
+                logger.debug("Default superuser not found.")
+        except Exception as exc:
+            logger.exception(exc)
+            raise RuntimeError("Could not remove default superuser.") from exc
 
 
 def teardown_services():
@@ -79,6 +154,9 @@ def teardown_services():
     """
     try:
         teardown_superuser(get_settings_service(), next(get_session()))
+    except Exception as exc:
+        logger.exception(exc)
+    try:
         service_manager.teardown()
     except Exception as exc:
         logger.exception(exc)
@@ -116,38 +194,24 @@ def initialize_services():
     """
     Initialize all the services needed.
     """
-    from langflow.services.database import factory as database_factory
-    from langflow.services.cache import factory as cache_factory
-    from langflow.services.chat import factory as chat_factory
-    from langflow.services.settings import factory as settings_factory
-    from langflow.services.auth import factory as auth_factory
-    from langflow.services.task import factory as task_factory
-    from langflow.services.session import factory as session_service_factory  # type: ignore
+    for factory, dependencies in get_factories_and_deps():
+        try:
+            service_manager.register_factory(factory, dependencies=dependencies)
+        except Exception as exc:
+            logger.exception(exc)
+            raise RuntimeError(
+                "Could not initialize services. Please check your settings."
+            ) from exc
 
-    service_manager.register_factory(settings_factory.SettingsServiceFactory())
-    service_manager.register_factory(
-        auth_factory.AuthServiceFactory(), dependencies=[ServiceType.SETTINGS_SERVICE]
-    )
-    service_manager.register_factory(
-        database_factory.DatabaseServiceFactory(),
-        dependencies=[ServiceType.SETTINGS_SERVICE],
-    )
-    service_manager.register_factory(
-        cache_factory.CacheServiceFactory(), dependencies=[ServiceType.SETTINGS_SERVICE]
-    )
-    service_manager.register_factory(chat_factory.ChatServiceFactory())
-
-    service_manager.register_factory(task_factory.TaskServiceFactory())
-
-    service_manager.register_factory(
-        session_service_factory.SessionServiceFactory(),
-        dependencies=[ServiceType.CACHE_SERVICE],
-    )
     # Test cache connection
     service_manager.get(ServiceType.CACHE_SERVICE)
-    # Test database connection
-    service_manager.get(ServiceType.DATABASE_SERVICE)
     # Setup the superuser
     initialize_database()
-    session = next(get_session())
-    setup_superuser(service_manager.get(ServiceType.SETTINGS_SERVICE), session)
+    setup_superuser(
+        service_manager.get(ServiceType.SETTINGS_SERVICE), next(get_session())
+    )
+    try:
+        get_db_service().migrate_flows_if_auto_login()
+    except Exception as exc:
+        logger.error(f"Error migrating flows: {exc}")
+        raise RuntimeError("Error migrating flows") from exc

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

@@ -189,7 +189,7 @@ class InitializeAgentNode(FrontendNode):
             ),
             TemplateField(
                 field_type="Tool",
-                required=False,
+                required=True,
                 show=True,
                 name="tools",
                 is_list=True,

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

@@ -44,7 +44,7 @@ class FieldFormatters(BaseModel):
 
 class FrontendNode(BaseModel):
     template: Template
-    description: str
+    description: Optional[str] = None
     base_classes: List[str]
     name: str = ""
     display_name: str = ""
@@ -164,7 +164,7 @@ class FrontendNode(BaseModel):
     ) -> None:
         """Handles specific field values for certain fields."""
         if key == "headers":
-            field.value = """{'Authorization': 'Bearer <token>'}"""
+            field.value = """{"Authorization": "Bearer <token>"}"""
         FrontendNode._handle_model_specific_field_values(field, key, name)
         FrontendNode._handle_api_key_specific_field_values(field, key, name)
 
@@ -249,4 +249,4 @@ class FrontendNode(BaseModel):
         if "default" in value:
             field.value = value["default"]
         if key == "headers":
-            field.value = """{'Authorization': 'Bearer <token>'}"""
+            field.value = """{"Authorization": "Bearer <token>"}"""

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

@@ -65,4 +65,11 @@ INPUT_KEY_INFO = """The variable to be used as Chat Input when more than one var
 OUTPUT_KEY_INFO = """The variable to be used as Chat Output (e.g. answer in a ConversationalRetrievalChain)"""
 
 
-CLASSES_TO_REMOVE = ["Serializable", "BaseModel", "object", "Runnable", "Generic"]
+CLASSES_TO_REMOVE = [
+    "RunnableSerializable",
+    "Serializable",
+    "BaseModel",
+    "object",
+    "Runnable",
+    "Generic",
+]

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

@@ -2,6 +2,7 @@ from langflow.template.field.base import TemplateField
 from langflow.template.frontend_node.base import FrontendNode
 from langflow.template.template.base import Template
 from langflow.interface.custom.constants import DEFAULT_CUSTOM_COMPONENT_CODE
+from typing import Optional
 
 
 class CustomComponentFrontendNode(FrontendNode):
@@ -24,7 +25,7 @@ class CustomComponentFrontendNode(FrontendNode):
             )
         ],
     )
-    description: str = "Create any custom component you want!"
+    description: Optional[str] = None
     base_classes: list[str] = []
 
     def to_dict(self):

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

@@ -145,7 +145,7 @@ class HeadersDefaultValueFormatter(FieldFormatter):
     def format(self, field: TemplateField, name: Optional[str] = None) -> None:
         key = field.name
         if key == "headers":
-            field.value = """{'Authorization': 'Bearer <token>'}"""
+            field.value = """{"Authorization": "Bearer <token>"}"""
 
 
 class DictCodeFileFormatter(FieldFormatter):

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

@@ -44,6 +44,7 @@ class PromptFrontendNode(FrontendNode):
 
         # All prompt fields should be password=False
         field.password = False
+        field.dynamic = True
 
 
 class PromptTemplateNode(FrontendNode):

src/backend/langflow/utils/util.py

@@ -11,6 +11,10 @@ from langflow.utils import constants
 from langchain.schema import Document
 
 
+def remove_ansi_escape_codes(text):
+    return re.sub(r"\x1b\[[0-9;]*[a-zA-Z]", "", text)
+
+
 def build_template_from_function(
     name: str, type_to_loader_dict: Dict, add_function: bool = False
 ):
@@ -187,7 +191,9 @@ def get_base_classes(cls):
     """Get the base classes of a class.
     These are used to determine the output of the nodes.
     """
-    if bases := cls.__bases__:
+
+    if hasattr(cls, "__bases__") and cls.__bases__:
+        bases = cls.__bases__
         result = []
         for base in bases:
             if any(type in base.__module__ for type in ["pydantic", "abc"]):
@@ -428,7 +434,7 @@ def set_headers_value(value: Dict[str, Any]) -> None:
     """
     Sets the value for the 'headers' key.
     """
-    value["value"] = """{'Authorization': 'Bearer <token>'}"""
+    value["value"] = """{"Authorization": "Bearer <token>"}"""
 
 
 def add_options_to_field(

src/frontend/.gitignore

@@ -22,5 +22,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 /test-results/
-/playwright-report/
+/playwright-report/*/
 /playwright/.cache/

src/frontend/package.json

@@ -54,7 +54,7 @@
     "react-tabs": "^6.0.2",
     "react-tooltip": "^5.21.1",
     "react18-json-view": "^0.2.3",
-    "reactflow": "^11.8.3",
+    "reactflow": "^11.9.2",
     "rehype-mathjax": "^4.0.3",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",

src/frontend/playwright-report/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <ul>
+        <li>
+            <a href="./e2e/index.html">e2e report</a> 
+        </li>
+        <li>
+            <a href="./onlyFront/index.html">frontEnd Only report</a>
+        </li>
+    </ul>
+</body>
+</html>

src/frontend/playwright.config.ts

@@ -20,11 +20,13 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: "html",
+  reporter: [
+    ["html", { open: "never", outputFolder: "playwright-report/test-results" }],
+  ],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
+    // baseURL: "http://127.0.0.1:3000",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
@@ -69,9 +71,16 @@ export default defineConfig({
   ],
 
   /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
+  // webServer: [
+  //   {
+  //     command: "npm run backend",
+  //     reuseExistingServer: !process.env.CI,
+  //     timeout: 120 * 1000,
+  //   },
+  //   {
+  //     command: "npm run start",
+  //     url: "http://127.0.0.1:3000",
+  //     reuseExistingServer: !process.env.CI,
+  //   },
+  // ],
 });

src/frontend/run-tests.sh

@@ -0,0 +1,78 @@
+#!/bin/bash
+
+# Default value for the --ui flag
+ui=false
+
+# Parse command-line arguments
+while [[ $# -gt 0 ]]; do
+    key="$1"
+    case $key in
+        --ui)
+            ui=true
+            shift
+            ;;
+        *)
+            echo "Unknown option: $key"
+            exit 1
+            ;;
+    esac
+    shift
+done
+
+# Function to forcibly terminate a process by port
+terminate_process_by_port() {
+    port="$1"
+    echo "Terminating process on port: $port"
+    fuser -k -n tcp "$port"  # Forcefully terminate processes using the specified port
+    echo "Process terminated."
+}
+
+# Trap signals to ensure cleanup on script termination
+trap 'terminate_process_by_port 7860; terminate_process_by_port 3000' EXIT
+
+# install playwright if there is not installed yet
+npx playwright install
+
+# Navigate to the project root directory (where the Makefile is located)
+cd ../../
+
+# Start the frontend using 'make frontend' in the background
+make frontend &
+
+# Give some time for the frontend to start (adjust sleep duration as needed)
+sleep 10
+
+# Navigate to the test directory
+cd src/frontend
+
+# Run frontend only Playwright tests with or without UI based on the --ui flag
+if [ "$ui" = true ]; then
+    PLAYWRIGHT_HTML_REPORT=playwright-report/onlyFront npx playwright test tests/onlyFront --ui --project=chromium
+else
+    PLAYWRIGHT_HTML_REPORT=playwright-report/onlyFront npx playwright test tests/onlyFront --project=chromium
+fi
+
+# Navigate back to the project root directory
+cd ../../
+
+# Start the backend using 'make backend' in the background
+make backend &
+
+# Give some time for the backend to start (adjust sleep duration as needed)
+sleep 25
+
+# Navigate back to the test directory
+cd src/frontend
+
+# Run Playwright tests with or without UI based on the --ui flag
+if [ "$ui" = true ]; then
+    PLAYWRIGHT_HTML_REPORT=playwright-report/e2e npx playwright test tests/end-to-end --ui --project=chromium
+else
+    PLAYWRIGHT_HTML_REPORT=playwright-report/e2e npx playwright test tests/end-to-end --project=chromium
+fi
+
+npx playwright show-report
+
+# After the tests are finished, you can add cleanup or teardown logic here if needed
+
+# The trap will automatically terminate processes by port on script exit

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

@@ -32,6 +32,7 @@ import {
   convertValuesToNumbers,
   hasDuplicateKeys,
   isValidConnection,
+  scapedJSONStringfy,
 } from "../../../../utils/reactflowUtils";
 import {
   nodeColors,
@@ -53,14 +54,16 @@ export default function ParameterComponent({
   required = false,
   optionalHandle = null,
   info = "",
+  proxy,
   showNode,
+  index = "",
 }: ParameterComponentType): JSX.Element {
   const ref = useRef<HTMLDivElement>(null);
   const refHtml = useRef<HTMLDivElement & ReactNode>(null);
   const infoHtml = useRef<HTMLDivElement & ReactNode>(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
-  const { setTabsState, tabId, save, flows } = useContext(TabsContext);
+  const { setTabsState, tabId, flows } = useContext(TabsContext);
 
   const flow = flows.find((flow) => flow.id === tabId)?.data?.nodes ?? null;
 
@@ -80,8 +83,9 @@ export default function ParameterComponent({
 
   const { reactFlowInstance, setFilterEdge } = useContext(typesContext);
   let disabled =
-    reactFlowInstance?.getEdges().some((edge) => edge.targetHandle === id) ??
-    false;
+    reactFlowInstance
+      ?.getEdges()
+      .some((edge) => edge.targetHandle === scapedJSONStringfy(id)) ?? false;
 
   const { data: myData } = useContext(typesContext);
 
@@ -112,7 +116,6 @@ export default function ParameterComponent({
   const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
 
   useEffect(() => {
-    if (name === "openai_api_base") console.log(info);
     // @ts-ignore
     infoHtml.current = (
       <div className="h-full w-full break-words">
@@ -136,7 +139,7 @@ export default function ParameterComponent({
           nodeIconsLucide[item.family] ?? nodeIconsLucide["unknown"];
 
         return (
-          <>
+          <div key={index}>
             {index === 0 && (
               <span>
                 {left
@@ -183,7 +186,7 @@ export default function ParameterComponent({
                 </span>
               </span>
             </span>
-          </>
+          </div>
         );
       });
     } else {
@@ -204,33 +207,46 @@ export default function ParameterComponent({
       type === "code" ||
       type === "prompt" ||
       type === "file" ||
-      type === "int") &&
+      type === "int" ||
+      type === "dict" ||
+      type === "NestedDict") &&
     !optionalHandle ? (
       <></>
     ) : (
-      <ShadTooltip
-        styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
-        delayDuration={0}
-        content={refHtml.current}
-        side={left ? "left" : "right"}
-      >
-        <Handle
-          type={left ? "target" : "source"}
-          position={left ? Position.Left : Position.Right}
-          id={id}
-          isValidConnection={(connection) =>
-            isValidConnection(connection, reactFlowInstance!)
-          }
-          className={classNames(
-            left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
-            "h-3 w-3 rounded-full border-2 bg-background"
-          )}
-          style={{
-            borderColor: color,
-            top: position,
-          }}
-        ></Handle>
-      </ShadTooltip>
+      <Button className="h-7 truncate bg-muted p-0 text-sm font-normal text-black hover:bg-muted">
+        <div className="flex">
+          <ShadTooltip
+            styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
+            delayDuration={0}
+            content={refHtml.current}
+            side={left ? "left" : "right"}
+          >
+            <Handle
+              type={left ? "target" : "source"}
+              position={left ? Position.Left : Position.Right}
+              id={
+                proxy
+                  ? scapedJSONStringfy({ ...id, proxy })
+                  : scapedJSONStringfy(id)
+              }
+              isValidConnection={(connection) =>
+                isValidConnection(connection, reactFlowInstance!)
+              }
+              className={classNames(
+                left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
+                "h-3 w-3 rounded-full border-2 bg-background"
+              )}
+              style={{
+                borderColor: color,
+                top: position,
+              }}
+              onClick={() => {
+                setFilterEdge(groupedEdge.current);
+              }}
+            ></Handle>
+          </ShadTooltip>
+        </div>
+      </Button>
     )
   ) : (
     <div
@@ -245,7 +261,13 @@ export default function ParameterComponent({
             (info !== "" ? " flex items-center" : "")
           }
         >
-          {title}
+          {proxy ? (
+            <ShadTooltip content={<span>{proxy.id}</span>}>
+              <span>{title}</span>
+            </ShadTooltip>
+          ) : (
+            title
+          )}
           <span className="text-status-red">{required ? " *" : ""}</span>
           <div className="">
             {info !== "" && (
@@ -285,7 +307,11 @@ export default function ParameterComponent({
                 <Handle
                   type={left ? "target" : "source"}
                   position={left ? Position.Left : Position.Right}
-                  id={id}
+                  id={
+                    proxy
+                      ? scapedJSONStringfy({ ...id, proxy })
+                      : scapedJSONStringfy(id)
+                  }
                   isValidConnection={(connection) =>
                     isValidConnection(connection, reactFlowInstance!)
                   }
@@ -326,9 +352,11 @@ export default function ParameterComponent({
                 disabled={disabled}
                 value={data.node.template[name].value ?? ""}
                 onChange={handleOnNewValue}
+                id={"textarea-" + index}
               />
             ) : (
               <InputComponent
+                id={"input-" + index}
                 disabled={disabled}
                 password={data.node?.template[name].password ?? false}
                 value={data.node?.template[name].value ?? ""}
@@ -339,6 +367,7 @@ export default function ParameterComponent({
         ) : left === true && type === "bool" ? (
           <div className="mt-2 w-full">
             <ToggleShadComponent
+              id={"toggle-" + index}
               disabled={disabled}
               enabled={data.node?.template[name].value ?? false}
               setEnabled={(isEnabled) => {
@@ -368,6 +397,11 @@ export default function ParameterComponent({
         ) : left === true && type === "code" ? (
           <div className="mt-2 w-full">
             <CodeAreaComponent
+              readonly={
+                data.node?.flow && data.node.template[name].dynamic
+                  ? true
+                  : false
+              }
               dynamic={data.node?.template[name].dynamic ?? false}
               setNodeClass={(nodeClass) => {
                 data.node = nodeClass;
@@ -376,6 +410,7 @@ export default function ParameterComponent({
               disabled={disabled}
               value={data.node?.template[name].value ?? ""}
               onChange={handleOnNewValue}
+              id={"code-input-" + index}
             />
           </div>
         ) : left === true && type === "file" ? (
@@ -388,7 +423,6 @@ export default function ParameterComponent({
               suffixes={data.node?.template[name].suffixes}
               onFileChange={(filePath: string) => {
                 data.node!.template[name].file_path = filePath;
-                save();
               }}
             ></InputFileComponent>
           </div>
@@ -398,11 +432,13 @@ export default function ParameterComponent({
               disabled={disabled}
               value={data.node?.template[name].value ?? ""}
               onChange={handleOnNewValue}
+              id={"int-input-" + index}
             />
           </div>
         ) : left === true && type === "prompt" ? (
           <div className="mt-2 w-full">
             <PromptAreaComponent
+              readonly={data.node?.flow ? true : false}
               field_name={name}
               setNodeClass={(nodeClass) => {
                 data.node = nodeClass;
@@ -416,6 +452,7 @@ export default function ParameterComponent({
               onChange={(e) => {
                 handleOnNewValue(e);
               }}
+              id={"prompt-input-" + index}
             />
           </div>
         ) : left === true && type === "NestedDict" ? (
@@ -424,7 +461,8 @@ export default function ParameterComponent({
               disabled={disabled}
               editNode={false}
               value={
-                data.node!.template[name].value.toString() === "{}"
+                !data.node!.template[name].value ||
+                data.node!.template[name].value?.toString() === "{}"
                   ? {
                       yourkey: "value",
                     }

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

@@ -4,23 +4,33 @@ import { NodeToolbar, useUpdateNodeInternals } from "reactflow";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import Tooltip from "../../components/TooltipComponent";
 import IconComponent from "../../components/genericIconComponent";
+import InputComponent from "../../components/inputComponent";
+import { Textarea } from "../../components/ui/textarea";
 import { useSSE } from "../../contexts/SSEContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { typesContext } from "../../contexts/typesContext";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
 import { validationStatusType } from "../../types/components";
 import { NodeDataType } from "../../types/flow";
-import { cleanEdges } from "../../utils/reactflowUtils";
+import {
+  cleanEdges,
+  handleKeyDown,
+  scapedJSONStringfy,
+} from "../../utils/reactflowUtils";
 import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
 import { classNames, toTitleCase } from "../../utils/utils";
 import ParameterComponent from "./components/parameterComponent";
 
 export default function GenericNode({
   data: olddata,
+  xPos,
+  yPos,
   selected,
 }: {
   data: NodeDataType;
   selected: boolean;
+  xPos: number;
+  yPos: number;
 }): JSX.Element {
   const [data, setData] = useState(olddata);
   const { updateFlow, flows, tabId } = useContext(TabsContext);
@@ -28,6 +38,12 @@ export default function GenericNode({
   const { types, deleteNode, reactFlowInstance, setFilterEdge, getFilterEdge } =
     useContext(typesContext);
   const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
+  const [inputName, setInputName] = useState(true);
+  const [nodeName, setNodeName] = useState(data.node!.display_name);
+  const [inputDescription, setInputDescription] = useState(false);
+  const [nodeDescription, setNodeDescription] = useState(
+    data.node?.description!
+  );
   const [validationStatus, setValidationStatus] =
     useState<validationStatusType | null>(null);
   const [showNode, setShowNode] = useState<boolean>(true);
@@ -111,6 +127,7 @@ export default function GenericNode({
     <>
       <NodeToolbar>
         <NodeToolbarComponent
+          position={{ x: xPos, y: yPos }}
           data={data}
           setData={setData}
           deleteNode={deleteNode}
@@ -151,7 +168,7 @@ export default function GenericNode({
               }
             >
               <IconComponent
-                name={name}
+                name={data.node?.flow ? "Ungroup" : name}
                 className={
                   "generic-node-icon " +
                   (!showNode && "absolute inset-x-6 h-12 w-12")
@@ -160,11 +177,35 @@ export default function GenericNode({
               />
               {showNode && (
                 <div className="generic-node-tooltip-div">
-                  <ShadTooltip content={data.node?.display_name}>
-                    <div className="generic-node-tooltip-div text-primary">
-                      {data.node?.display_name}
+                  {data.node?.flow && inputName ? (
+                    <div>
+                      <InputComponent
+                        autoFocus
+                        onBlur={() => {
+                          setInputName(false);
+                          if (nodeName.trim() !== "") {
+                            setNodeName(nodeName);
+                            data.node!.display_name = nodeName;
+                          } else {
+                            setNodeName(data.node!.display_name);
+                          }
+                        }}
+                        value={nodeName}
+                        onChange={setNodeName}
+                        password={false}
+                        blurOnEnter={true}
+                      />
                     </div>
-                  </ShadTooltip>
+                  ) : (
+                    <ShadTooltip content={data.node?.display_name}>
+                      <div
+                        className="generic-node-tooltip-div text-primary"
+                        onDoubleClick={() => setInputName(true)}
+                      >
+                        {data.node?.display_name}
+                      </div>
+                    </ShadTooltip>
+                  )}
                 </div>
               )}
             </div>
@@ -178,16 +219,15 @@ export default function GenericNode({
                         data.node!.template[templateField].show &&
                         !data.node!.template[templateField].advanced && (
                           <ParameterComponent
-                            key={
-                              (data.node!.template[
-                                templateField
-                              ].input_types?.join(";") ??
-                                data.node!.template[templateField].type) +
-                              "|" +
-                              templateField +
-                              "|" +
-                              data.id
-                            }
+                            index={idx.toString()}
+                            key={scapedJSONStringfy({
+                              inputTypes:
+                                data.node!.template[templateField].input_types,
+                              type: data.node!.template[templateField].type,
+                              id: data.id,
+                              fieldName: templateField,
+                              proxy: data.node!.template[templateField].proxy,
+                            })}
                             data={data}
                             setData={setData}
                             color={
@@ -217,31 +257,31 @@ export default function GenericNode({
                               data.node?.template[templateField].type
                             }
                             required={
-                              data.node?.template[templateField].required
-                            }
-                            id={
-                              (data.node?.template[
-                                templateField
-                              ].input_types?.join(";") ??
-                                data.node?.template[templateField].type) +
-                              "|" +
-                              templateField +
-                              "|" +
-                              data.id
+                              data.node!.template[templateField].required
                             }
+                            id={{
+                              inputTypes:
+                                data.node!.template[templateField].input_types,
+                              type: data.node!.template[templateField].type,
+                              id: data.id,
+                              fieldName: templateField,
+                            }}
                             left={true}
                             type={data.node?.template[templateField].type}
                             optionalHandle={
                               data.node?.template[templateField].input_types
                             }
+                            proxy={data.node?.template[templateField].proxy}
                             showNode={showNode}
                           />
                         )
                     )}
                   <ParameterComponent
-                    key={[data.type, data.id, ...data.node!.base_classes].join(
-                      "|"
-                    )}
+                    key={scapedJSONStringfy({
+                      baseClasses: data.node!.base_classes,
+                      id: data.id,
+                      dataType: data.type,
+                    })}
                     data={data}
                     setData={setData}
                     color={nodeColors[types[data.type]] ?? nodeColors.unknown}
@@ -252,9 +292,11 @@ export default function GenericNode({
                         : data.type
                     }
                     tooltipTitle={data.node?.base_classes.join("\n")}
-                    id={[data.type, data.id, ...data.node!.base_classes].join(
-                      "|"
-                    )}
+                    id={{
+                      baseClasses: data.node!.base_classes,
+                      id: data.id,
+                      dataType: data.type,
+                    }}
                     type={data.node?.base_classes.join("|")}
                     left={false}
                     showNode={showNode}
@@ -330,33 +372,71 @@ export default function GenericNode({
             className={
               showNode
                 ? "generic-node-desc " +
-                  (data.node?.description !== "" && showNode ? "py-5" : "pb-5")
+                  (data.node?.description !== "" ? "py-5" : "pb-5")
                 : ""
             }
           >
-            {data.node?.description !== "" && showNode && (
-              <div className="generic-node-desc-text">
+            {data.node?.description !== "" &&
+            showNode &&
+            data.node?.flow &&
+            inputDescription ? (
+              <Textarea
+                autoFocus
+                onBlur={() => {
+                  setInputDescription(false);
+                  if (nodeDescription.trim() !== "") {
+                    setNodeDescription(nodeDescription);
+                    data.node!.description = nodeDescription;
+                  } else {
+                    setNodeDescription(data.node!.description);
+                  }
+                }}
+                value={nodeDescription}
+                onChange={(e) => setNodeDescription(e.target.value)}
+                onKeyDown={(e) => {
+                  handleKeyDown(e, nodeDescription, "");
+                  if (
+                    e.key === "Enter" &&
+                    e.shiftKey === false &&
+                    e.ctrlKey === false &&
+                    e.altKey === false
+                  ) {
+                    setInputDescription(false);
+                    if (nodeDescription.trim() !== "") {
+                      setNodeDescription(nodeDescription);
+                      data.node!.description = nodeDescription;
+                    } else {
+                      setNodeDescription(data.node!.description);
+                    }
+                  }
+                }}
+              />
+            ) : (
+              <div
+                className="generic-node-desc-text"
+                onDoubleClick={() => setInputDescription(true)}
+              >
                 {data.node?.description}
               </div>
             )}
-
             <>
               {Object.keys(data.node!.template)
                 .filter((templateField) => templateField.charAt(0) !== "_")
+                .sort()
                 .map((templateField: string, idx) => (
                   <div key={idx}>
                     {data.node!.template[templateField].show &&
                     !data.node!.template[templateField].advanced ? (
                       <ParameterComponent
-                        key={
-                          (data.node!.template[templateField].input_types?.join(
-                            ";"
-                          ) ?? data.node!.template[templateField].type) +
-                          "|" +
-                          templateField +
-                          "|" +
-                          data.id
-                        }
+                        index={idx.toString()}
+                        key={scapedJSONStringfy({
+                          inputTypes:
+                            data.node!.template[templateField].input_types,
+                          type: data.node!.template[templateField].type,
+                          id: data.id,
+                          fieldName: templateField,
+                          proxy: data.node!.template[templateField].proxy,
+                        })}
                         data={data}
                         setData={setData}
                         color={
@@ -384,21 +464,20 @@ export default function GenericNode({
                             "\n"
                           ) ?? data.node?.template[templateField].type
                         }
-                        required={data.node?.template[templateField].required}
-                        id={
-                          (data.node?.template[templateField].input_types?.join(
-                            ";"
-                          ) ?? data.node?.template[templateField].type) +
-                          "|" +
-                          templateField +
-                          "|" +
-                          data.id
-                        }
+                        required={data.node!.template[templateField].required}
+                        id={{
+                          inputTypes:
+                            data.node!.template[templateField].input_types,
+                          type: data.node!.template[templateField].type,
+                          id: data.id,
+                          fieldName: templateField,
+                        }}
                         left={true}
                         type={data.node?.template[templateField].type}
                         optionalHandle={
                           data.node?.template[templateField].input_types
                         }
+                        proxy={data.node?.template[templateField].proxy}
                         showNode={showNode}
                       />
                     ) : (
@@ -415,7 +494,11 @@ export default function GenericNode({
                 {" "}
               </div>
               <ParameterComponent
-                key={[data.type, data.id, ...data.node!.base_classes].join("|")}
+                key={scapedJSONStringfy({
+                  baseClasses: data.node!.base_classes,
+                  id: data.id,
+                  dataType: data.type,
+                })}
                 data={data}
                 setData={setData}
                 color={nodeColors[types[data.type]] ?? nodeColors.unknown}
@@ -425,7 +508,11 @@ export default function GenericNode({
                     : data.type
                 }
                 tooltipTitle={data.node?.base_classes.join("\n")}
-                id={[data.type, data.id, ...data.node!.base_classes].join("|")}
+                id={{
+                  baseClasses: data.node!.base_classes,
+                  id: data.id,
+                  dataType: data.type,
+                }}
                 type={data.node?.base_classes.join("|")}
                 left={false}
                 showNode={showNode}

src/frontend/src/components/DropdownButtonComponent/index.tsx

@@ -21,6 +21,7 @@ export default function DropdownButton({
       <DropdownMenu open={showOptions}>
         <DropdownMenuTrigger asChild>
           <Button
+            id="new-project-btn"
             variant="primary"
             className="relative pr-10"
             onClick={(event) => {

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

@@ -67,12 +67,12 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           )}
         </div>
         <Input
-          className="nopan nodrag noundo nocopy mt-2 font-normal"
+          className="nopan nodelete nodrag noundo nocopy mt-2 font-normal"
           onChange={handleNameChange}
           type="text"
           name="name"
           value={name ?? ""}
-          placeholder="File name"
+          placeholder="Flow name"
           id="name"
           maxLength={maxLength}
         />
@@ -86,7 +86,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           name="description"
           id="description"
           onChange={handleDescriptionChange}
-          value={description}
+          value={description!}
           placeholder="Flow description"
           className="mt-2 max-h-[100px] font-normal"
           rows={3}

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

@@ -80,61 +80,54 @@ export default function BuildTrigger({
     const { flowId } = response.data;
     // Step 2: Use the session ID to establish an SSE connection using EventSource
     let validationResults: boolean[] = [];
-    let finished = false;
     const apiUrl = `/api/v1/build/stream/${flowId}`;
-    const eventSource = new EventSource(apiUrl);
+    return new Promise<boolean>((resolve, reject) => {
+      const eventSource = new EventSource(apiUrl);
 
-    eventSource.onmessage = (event) => {
-      // If the event is parseable, return
-      if (!event.data) {
-        return;
-      }
-      const parsedData = JSON.parse(event.data);
-      // if the event is the end of the stream, close the connection
-      if (parsedData.end_of_stream) {
-        // Close the connection and finish
-        finished = true;
+      eventSource.onmessage = (event) => {
+        // If the event is parseable, return
+        if (!event.data) {
+          return;
+        }
+        const parsedData = JSON.parse(event.data);
+        // if the event is the end of the stream, close the connection
+        if (parsedData.end_of_stream) {
+          eventSource.close();
+          resolve(validationResults.every((result) => result));
+        } else if (parsedData.log) {
+          // If the event is a log, log it
+          setSuccessData({ title: parsedData.log });
+        } else if (parsedData.input_keys !== undefined) {
+          //@ts-ignore
+          setTabsState((old: TabsState) => {
+            return {
+              ...old,
+              [flowId]: {
+                ...old[flowId],
+                formKeysData: parsedData,
+              },
+            };
+          });
+        } else {
+          // Otherwise, process the data
+          const isValid = processStreamResult(parsedData);
+          setProgress(parsedData.progress);
+          validationResults.push(isValid);
+        }
+      };
+
+      eventSource.onerror = (error: any) => {
+        console.error("EventSource failed:", error);
+
+        if (error.data) {
+          const parsedData = JSON.parse(error.data);
+          setErrorData({ title: parsedData.error });
+          setIsBuilding(false);
+        }
         eventSource.close();
-
-        return;
-      } else if (parsedData.log) {
-        // If the event is a log, log it
-        setSuccessData({ title: parsedData.log });
-      } else if (parsedData.input_keys !== undefined) {
-        //@ts-ignore
-        setTabsState((old: TabsState) => {
-          return {
-            ...old,
-            [flowId]: {
-              ...old[flowId],
-              formKeysData: parsedData,
-            },
-          };
-        });
-      } else {
-        // Otherwise, process the data
-        const isValid = processStreamResult(parsedData);
-        setProgress(parsedData.progress);
-        validationResults.push(isValid);
-      }
-    };
-
-    eventSource.onerror = (error: any) => {
-      console.error("EventSource failed:", error);
-      eventSource.close();
-      if (error.data) {
-        const parsedData = JSON.parse(error.data);
-        setErrorData({ title: parsedData.error });
-        setIsBuilding(false);
-      }
-    };
-    // Step 3: Wait for the stream to finish
-    while (!finished) {
-      await new Promise((resolve) => setTimeout(resolve, 100));
-      finished = validationResults.length === flow.data!.nodes.length;
-    }
-    // Step 4: Return true if all nodes are valid, false otherwise
-    return validationResults.every((result) => result);
+        reject(new Error("Streaming failed"));
+      };
+    });
   }
 
   function processStreamResult(parsedData: parsedDataType) {

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

@@ -12,6 +12,8 @@ export default function CodeAreaComponent({
   nodeClass,
   dynamic,
   setNodeClass,
+  id = "",
+  readonly = false,
 }: CodeAreaComponentType) {
   const [myValue, setMyValue] = useState(
     typeof value == "string" ? value : JSON.stringify(value)
@@ -30,6 +32,7 @@ export default function CodeAreaComponent({
   return (
     <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
       <CodeAreaModal
+        readonly={readonly}
         dynamic={dynamic}
         value={myValue}
         nodeClass={nodeClass}
@@ -41,6 +44,7 @@ export default function CodeAreaComponent({
       >
         <div className="flex w-full items-center">
           <span
+            id={id}
             className={
               editNode
                 ? "input-edit-node input-dialog"

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -63,7 +63,7 @@ export default function CodeTabsComponent({
   }, [flow]);
 
   useEffect(() => {
-    if (tweaks) {
+    if (tweaks && data) {
       unselectAllNodes({
         data,
         updateNodes: (nodes) => {
@@ -604,6 +604,14 @@ export default function CodeTabsComponent({
                                               ].type === "prompt" ? (
                                               <div className="mx-auto">
                                                 <PromptAreaComponent
+                                                  readonly={
+                                                    node.data.node?.flow &&
+                                                    node.data.node.template[
+                                                      templateField
+                                                    ].dynamic
+                                                      ? true
+                                                      : false
+                                                  }
                                                   editNode={true}
                                                   disabled={false}
                                                   value={
@@ -646,6 +654,14 @@ export default function CodeTabsComponent({
                                                 <CodeAreaComponent
                                                   disabled={false}
                                                   editNode={true}
+                                                  readonly={
+                                                    node.data.node?.flow &&
+                                                    node.data.node.template[
+                                                      templateField
+                                                    ].dynamic
+                                                      ? true
+                                                      : false
+                                                  }
                                                   value={
                                                     !node.data.node.template[
                                                       templateField
@@ -682,7 +698,7 @@ export default function CodeTabsComponent({
                                             ) : node.data.node.template[
                                                 templateField
                                               ].type === "dict" ? (
-                                              <div className="mx-auto max-h-48 overflow-auto custom-scroll">
+                                              <div className="mx-auto overflow-auto custom-scroll">
                                                 <KeypairListComponent
                                                   disabled={false}
                                                   editNode={true}

src/frontend/src/components/dictComponent/index.tsx

@@ -22,7 +22,6 @@ export default function DictComponent({
   }, [value]);
 
   const ref = useRef(value);
-
   return (
     <div
       className={classNames(

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

@@ -23,6 +23,7 @@ export default function FloatComponent({
   return (
     <div className="w-full">
       <Input
+        id="float-input"
         type="number"
         step={step}
         min={min}

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

@@ -26,7 +26,7 @@ export const MenuBar = ({ flows, tabId }: menuBarPropsType): JSX.Element => {
 
   function handleAddFlow() {
     try {
-      addFlow(undefined, true).then((id) => {
+      addFlow(true).then((id) => {
         navigate("/flow/" + id);
       });
       // saveFlowStyleInDataBase();

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

@@ -1,11 +1,13 @@
 import * as Form from "@radix-ui/react-form";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { InputComponentType } from "../../types/components";
 import { handleKeyDown } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
 import { Input } from "../ui/input";
 
 export default function InputComponent({
+  autoFocus = false,
+  onBlur,
   value,
   onChange,
   disabled,
@@ -15,9 +17,11 @@ export default function InputComponent({
   editNode = false,
   placeholder = "Type something...",
   className,
+  id = "",
+  blurOnEnter = false,
 }: InputComponentType): JSX.Element {
   const [pwdVisible, setPwdVisible] = useState(false);
-
+  const refInput = useRef<HTMLInputElement>(null);
   // Clear component state
   useEffect(() => {
     if (disabled) {
@@ -30,6 +34,10 @@ export default function InputComponent({
       {isForm ? (
         <Form.Control asChild>
           <Input
+            id={"form-" + id}
+            ref={refInput}
+            onBlur={onBlur}
+            autoFocus={autoFocus}
             type={password && !pwdVisible ? "password" : "text"}
             value={value}
             disabled={disabled}
@@ -49,13 +57,18 @@ export default function InputComponent({
             }}
             onKeyDown={(e) => {
               handleKeyDown(e, value, "");
+              if (blurOnEnter && e.key === "Enter") refInput.current?.blur();
             }}
           />
         </Form.Control>
       ) : (
         <Input
+          id={id}
+          ref={refInput}
           type="text"
+          onBlur={onBlur}
           value={value}
+          autoFocus={autoFocus}
           disabled={disabled}
           required={required}
           className={classNames(
@@ -73,6 +86,7 @@ export default function InputComponent({
           }}
           onKeyDown={(e) => {
             handleKeyDown(e, value, "");
+            if (blurOnEnter && e.key === "Enter") refInput.current?.blur();
           }}
         />
       )}

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

@@ -8,6 +8,7 @@ export default function IntComponent({
   onChange,
   disabled,
   editNode = false,
+  id = "",
 }: FloatComponentType): JSX.Element {
   const min = 0;
 
@@ -21,6 +22,7 @@ export default function IntComponent({
   return (
     <div className="w-full">
       <Input
+        id={id}
         onKeyDown={(event) => {
           if (
             event.key !== "Backspace" &&

src/frontend/src/components/keypairListComponent/index.tsx

@@ -12,6 +12,8 @@ export default function KeypairListComponent({
   disabled,
   editNode = false,
   duplicateKey,
+  advanced = false,
+  dataValue,
 }: KeyPairListComponentType): JSX.Element {
   useEffect(() => {
     if (disabled) {
@@ -29,32 +31,31 @@ export default function KeypairListComponent({
   }, [value]);
 
   const handleChangeKey = (event, idx) => {
-    const newInputList = _.cloneDeep(ref.current);
-    const oldKey = Object.keys(newInputList[idx])[0];
-    const updatedObj = { [event.target.value]: newInputList[idx][oldKey] };
-    newInputList[idx] = updatedObj;
-    onChange(newInputList);
+    const oldKey = Object.keys(ref.current[idx])[0];
+    const updatedObj = { [event.target.value]: ref.current[idx][oldKey] };
+    ref.current[idx] = updatedObj;
+    onChange(ref.current);
   };
 
   const handleChangeValue = (newValue, idx) => {
-    const newInputList = _.cloneDeep(ref.current);
-    const key = Object.keys(newInputList[idx])[0];
-    newInputList[idx][key] = newValue;
-    onChange(newInputList);
+    const key = Object.keys(ref.current[idx])[0];
+    ref.current[idx][key] = newValue;
+    onChange(ref.current);
   };
 
   return (
     <div
       className={classNames(
-        ref.current?.length > 1 && editNode ? "my-1" : "",
+        ref.current?.length > 1 && editNode ? "mx-2 my-1" : "",
         "flex h-full flex-col gap-3"
       )}
     >
       {ref.current?.map((obj, index) => {
         return Object.keys(obj).map((key, idx) => {
           return (
-            <div key={idx} className="flex w-full gap-3">
+            <div key={idx} className="flex w-full gap-2">
               <Input
+                id={"keypair" + index}
                 type="text"
                 value={key.trim()}
                 className={classNames(
@@ -72,6 +73,7 @@ export default function KeypairListComponent({
               />
 
               <Input
+                id={"keypair" + (index + 100).toString()}
                 type="text"
                 value={obj[key]}
                 className={editNode ? "input-edit-node" : ""}
@@ -88,6 +90,7 @@ export default function KeypairListComponent({
                     newInputList.push({ "": "" });
                     onChange(newInputList);
                   }}
+                  id={"plusbtn" + index.toString()}
                 >
                   <IconComponent
                     name="Plus"
@@ -101,6 +104,7 @@ export default function KeypairListComponent({
                     newInputList.splice(index, 1);
                     onChange(newInputList);
                   }}
+                  id={"minusbtn" + index.toString()}
                 >
                   <IconComponent
                     name="X"

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

@@ -14,7 +14,9 @@ export default function PromptAreaComponent({
   onChange,
   disabled,
   editNode = false,
-}: PromptAreaComponentType) {
+  id = "",
+  readonly = false,
+}: PromptAreaComponentType): JSX.Element {
   useEffect(() => {
     if (disabled) {
       onChange("");
@@ -22,7 +24,8 @@ export default function PromptAreaComponent({
   }, [disabled]);
 
   useEffect(() => {
-    if (value !== "" && !editNode) {
+    //prevent update from prompt template after group node if prompt is wrongly marked as not dynamic
+    if (value !== "" && !editNode && !readonly && !nodeClass?.flow) {
       postValidatePrompt(field_name!, value, nodeClass!).then((apiReturn) => {
         if (apiReturn.data) {
           setNodeClass!(apiReturn.data.frontend_node);
@@ -35,6 +38,8 @@ export default function PromptAreaComponent({
   return (
     <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
       <GenericModal
+        id={id}
+        readonly={readonly}
         type={TypeModal.PROMPT}
         value={value}
         buttonText="Check & Save"
@@ -47,6 +52,7 @@ export default function PromptAreaComponent({
       >
         <div className="flex w-full items-center">
           <span
+            id={id}
             className={
               editNode
                 ? "input-edit-node input-dialog"

src/frontend/src/components/skeletonCardComponent/index.tsx

@@ -5,11 +5,11 @@ export const SkeletonCardComponent = (): JSX.Element => {
     <div className="skeleton-card">
       <div className="skeleton-card-wrapper">
         <Skeleton className="h-8 w-8 rounded-full" />
-        <Skeleton className="h-4 w-[120px]" />
+        <Skeleton className="h-4 w-[40%]" />
       </div>
       <div className="skeleton-card-text">
-        <Skeleton className="h-3 w-[250px]" />
-        <Skeleton className="h-3 w-[200px]" />
+        <Skeleton className="h-3 w-[90%]" />
+        <Skeleton className="h-3 w-[80%]" />
       </div>
     </div>
   );

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

@@ -10,6 +10,7 @@ export default function TextAreaComponent({
   onChange,
   disabled,
   editNode = false,
+  id = "",
 }: TextAreaComponentType): JSX.Element {
   // Clear text area
   useEffect(() => {
@@ -21,6 +22,7 @@ export default function TextAreaComponent({
   return (
     <div className="flex w-full items-center">
       <Input
+        id={id}
         value={value}
         disabled={disabled}
         className={editNode ? "input-edit-node" : ""}

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

@@ -6,6 +6,7 @@ export default function ToggleShadComponent({
   setEnabled,
   disabled,
   size,
+  id = "",
 }: ToggleComponentType): JSX.Element {
   let scaleX, scaleY;
   switch (size) {
@@ -29,6 +30,7 @@ export default function ToggleShadComponent({
   return (
     <div className={disabled ? "pointer-events-none cursor-not-allowed " : ""}>
       <Switch
+        id={id}
         style={{
           transform: `scaleX(${scaleX}) scaleY(${scaleY})`,
         }}

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

@@ -8,12 +8,11 @@ const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 
 const DialogPortal = ({
-  className,
   children,
   ...props
 }: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal className={cn(className)} {...props}>
-    <div className="nopan nodrag noundo nocopy fixed inset-0 z-50 flex items-start justify-center sm:items-center">
+  <DialogPrimitive.Portal {...props}>
+    <div className="nopan nodelete nodrag noundo nocopy fixed inset-0 z-50 flex items-start justify-center sm:items-center">
       {children}
     </div>
   </DialogPrimitive.Portal>
@@ -27,7 +26,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "nopan nodrag noundo nocopy fixed inset-0 bottom-0 left-0 right-0 top-0 z-50 overflow-auto bg-blur-shared backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "nopan nodelete nodrag noundo nocopy fixed inset-0 bottom-0 left-0 right-0 top-0 z-50 overflow-auto bg-blur-shared backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}

src/frontend/src/components/ui/input.tsx

@@ -9,7 +9,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <input
         type={type}
-        className={cn("nopan nodrag noundo nocopy primary-input", className)}
+        className={cn(
+          "nopan nodelete nodrag noundo nocopy primary-input",
+          className
+        )}
         ref={ref}
         {...props}
       />

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

@@ -57,7 +57,7 @@ export default function RenameLabel(props) {
           ref={inputRef}
           onInput={resizeInput}
           className={cn(
-            "nopan nodrag noundo nocopy rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline",
+            "nopan nodelete nodrag noundo nocopy rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline",
             props.className
           )}
           onBlur={() => {

src/frontend/src/components/ui/textarea.tsx

@@ -8,7 +8,10 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
     return (
       <textarea
-        className={cn("nopan nodrag noundo nocopy textarea-primary", className)}
+        className={cn(
+          "nopan nodelete nodrag noundo nocopy textarea-primary",
+          className
+        )}
         ref={ref}
         {...props}
       />

src/frontend/src/components/ui/tooltip.tsx

@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+        "z-50 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
         className
       )}
       {...props}

src/frontend/src/constants/constants.ts

@@ -529,7 +529,13 @@ export const URL_EXCLUDED_FROM_ERROR_RETRIES = [
   "http://localhost:7860/login",
 ];
 
-export const skipNodeUpdate = ["CustomComponent"];
+export const skipNodeUpdate = [
+  "CustomComponent",
+  "PromptTemplate",
+  "ChatMessagePromptTemplate",
+  "SystemMessagePromptTemplate",
+  "HumanMessagePromptTemplate",
+];
 
 export const CONTROL_INPUT_STATE = {
   password: "",

src/frontend/src/contexts/authContext.tsx

@@ -66,7 +66,10 @@ export function AuthProvider({ children }): React.ReactElement {
               const isSuperUser = user!.is_superuser;
               setIsAdmin(isSuperUser);
             })
-            .catch((error) => {});
+            .catch((error) => {
+              console.log("auth context");
+              setLoading(false);
+            });
         } else {
           setLoading(false);
         }

src/frontend/src/contexts/tabsContext.tsx

@@ -21,10 +21,20 @@ import {
 } from "../controllers/API";
 import { APIClassType, APITemplateType } from "../types/api";
 import { tweakType } from "../types/components";
-import { FlowType, NodeDataType, NodeType } from "../types/flow";
+import {
+  FlowType,
+  NodeDataType,
+  NodeType,
+  sourceHandleType,
+  targetHandleType,
+} from "../types/flow";
 import { TabsContextType, TabsState } from "../types/tabs";
 import {
   addVersionToDuplicates,
+  checkOldEdgesHandles,
+  scapeJSONParse,
+  scapedJSONStringfy,
+  updateEdgesHandleIds,
   updateIds,
   updateTemplate,
 } from "../utils/reactflowUtils";
@@ -36,13 +46,12 @@ import { typesContext } from "./typesContext";
 const uid = new ShortUniqueId({ length: 5 });
 
 const TabsContextInitialValue: TabsContextType = {
-  save: () => {},
   tabId: "",
   setTabId: (index: string) => {},
   isLoading: true,
   flows: [],
   removeFlow: (id: string) => {},
-  addFlow: async (flowData?: any) => "",
+  addFlow: async (newProject: boolean, flowData?: FlowType) => "",
   updateFlow: (newFlow: FlowType) => {},
   incrementNodeId: () => uid(),
   downloadFlow: (flow: FlowType) => {},
@@ -101,29 +110,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     return newNodeId.current;
   }
 
-  function save() {
-    // added clone deep to avoid mutating the original object
-    let Saveflows = _.cloneDeep(flows);
-    if (Saveflows.length !== 0) {
-      Saveflows.forEach((flow) => {
-        if (flow.data && flow.data?.nodes)
-          flow.data?.nodes.forEach((node) => {
-            //looking for file fields to prevent saving the content and breaking the flow for exceeding the the data limite for local storage
-            Object.keys(node.data.node.template).forEach((key) => {
-              if (node.data.node.template[key].type === "file") {
-                node.data.node.template[key].content = null;
-                node.data.node.template[key].value = "";
-              }
-            });
-          });
-      });
-      window.localStorage.setItem(
-        "tabsData",
-        JSON.stringify({ tabId, flows: Saveflows, id })
-      );
-    }
-  }
-
   function refreshFlows() {
     setIsLoading(true);
     getTabsDataFromDB().then((DbData) => {
@@ -158,14 +144,18 @@ export function TabsProvider({ children }: { children: ReactNode }) {
         if (!flow.data) {
           return;
         }
-        processFlowEdges(flow);
-        processFlowNodes(flow);
+        processDataFromFlow(flow, false);
       } catch (e) {}
     });
   }
 
   function processFlowEdges(flow: FlowType) {
     if (!flow.data || !flow.data.edges) return;
+    if (checkOldEdgesHandles(flow.data.edges)) {
+      const newEdges = updateEdgesHandleIds(flow.data);
+      flow.data.edges = newEdges;
+    }
+    //update edges colors
     flow.data.edges.forEach((edge) => {
       edge.className = "";
       edge.style = { stroke: "#555" };
@@ -183,6 +173,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   function processFlowNodes(flow: FlowType) {
     if (!flow.data || !flow.data.nodes) return;
     flow.data.nodes.forEach((node: NodeType) => {
+      if (node.data.node?.flow) return;
       if (skipNodeUpdate.includes(node.data.type)) return;
       const template = templates[node.data.type];
       if (!template) {
@@ -192,6 +183,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       if (Object.keys(template["template"]).length > 0) {
         updateDisplay_name(node, template);
         updateNodeBaseClasses(node, template);
+        //update baseclasses in edges
         updateNodeEdges(flow, node, template);
         updateNodeDescription(node, template);
         updateNodeTemplate(node, template);
@@ -211,11 +203,12 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   ) {
     flow.data!.edges.forEach((edge) => {
       if (edge.source === node.id) {
-        edge.sourceHandle = edge.sourceHandle
-          ?.split("|")
-          .slice(0, 2)
-          .concat(template["base_classes"])
-          .join("|");
+        let sourceHandleObject: sourceHandleType = scapeJSONParse(
+          edge.sourceHandle!
+        );
+        sourceHandleObject.baseClasses = template["base_classes"];
+        edge.data.sourceHandle = sourceHandleObject;
+        edge.sourceHandle = scapedJSONStringfy(sourceHandleObject);
       }
     });
   }
@@ -267,9 +260,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 
     // simulate a click on the link element to trigger the download
     link.click();
-    setNoticeData({
-      title: "Warning: Critical data, JSON file may include API keys.",
-    });
   }
 
   function downloadFlows() {
@@ -298,16 +288,22 @@ export function TabsProvider({ children }: { children: ReactNode }) {
    * The resulting JSON object is passed to the addFlow function.
    */
   async function uploadFlow(
-    newProject?: boolean,
+    newProject: boolean,
     file?: File
   ): Promise<String | undefined> {
     let id;
     if (file) {
       let text = await file.text();
+      let fileData = JSON.parse(text);
+      if (fileData.flows) {
+        fileData.flows.forEach((flow: FlowType) => {
+          id = addFlow(newProject, flow);
+        });
+      }
       // parse the text into a JSON object
       let flow: FlowType = JSON.parse(text);
 
-      id = await addFlow(flow, newProject);
+      id = await addFlow(newProject, flow);
     } else {
       // create a file input
       const input = document.createElement("input");
@@ -322,7 +318,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
             const currentfile = (e.target as HTMLInputElement).files![0];
             let text = await currentfile.text();
             let flow: FlowType = JSON.parse(text);
-            const flowId = await addFlow(flow, newProject);
+            const flowId = await addFlow(newProject, flow);
             resolve(flowId);
           }
         };
@@ -373,7 +369,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
    * Add a new flow to the list of flows.
    * @param flow Optional flow to add.
    */
-
   function paste(
     selectionInstance: { nodes: Node[]; edges: Edge[] },
     position: { x: number; y: number; paneX?: number; paneY?: number }
@@ -422,19 +417,27 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     });
     reactFlowInstance!.setNodes(nodes);
 
-    selectionInstance.edges.forEach((edge) => {
+    selectionInstance.edges.forEach((edge: Edge) => {
       let source = idsMap[edge.source];
       let target = idsMap[edge.target];
-      let sourceHandleSplitted = edge.sourceHandle!.split("|");
-      let sourceHandle =
-        sourceHandleSplitted[0] +
-        "|" +
-        source +
-        "|" +
-        sourceHandleSplitted.slice(2).join("|");
-      let targetHandleSplitted = edge.targetHandle!.split("|");
-      let targetHandle =
-        targetHandleSplitted.slice(0, -1).join("|") + "|" + target;
+      const sourceHandleObject: sourceHandleType = scapeJSONParse(
+        edge.sourceHandle!
+      );
+      let sourceHandle = scapedJSONStringfy({
+        ...sourceHandleObject,
+        id: source,
+      });
+      sourceHandleObject.id = source;
+      edge.data.sourceHandle = sourceHandleObject;
+      const targetHandleObject: targetHandleType = scapeJSONParse(
+        edge.targetHandle!
+      );
+      let targetHandle = scapedJSONStringfy({
+        ...targetHandleObject,
+        id: target,
+      });
+      targetHandleObject.id = target;
+      edge.data.targetHandle = targetHandleObject;
       let id =
         "reactflow__edge-" +
         source +
@@ -451,10 +454,10 @@ export function TabsProvider({ children }: { children: ReactNode }) {
           id,
           style: { stroke: "#555" },
           className:
-            targetHandle.split("|")[0] === "Text"
+            targetHandleObject.type === "Text"
               ? "stroke-gray-800 "
               : "stroke-gray-900 ",
-          animated: targetHandle.split("|")[0] === "Text",
+          animated: targetHandleObject.type === "Text",
           selected: false,
         },
         edges.map((edge) => ({ ...edge, selected: false }))
@@ -464,19 +467,16 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   }
 
   const addFlow = async (
-    flow?: FlowType,
-    newProject?: Boolean
+    newProject: Boolean,
+    flow?: FlowType
   ): Promise<String | undefined> => {
     if (newProject) {
-      let flowData = extractDataFromFlow(flow!);
-      if (flowData.description == "") {
-        flowData.description = getRandomDescription();
-      }
+      let flowData = flow
+        ? processDataFromFlow(flow)
+        : { nodes: [], edges: [], viewport: { zoom: 1, x: 0, y: 0 } };
 
       // Create a new flow with a default name if no flow is provided.
       const newFlow = createNewFlow(flowData, flow!);
-      processFlowEdges(newFlow);
-      processFlowNodes(newFlow);
 
       const flowName = addVersionToDuplicates(newFlow, flows);
 
@@ -504,31 +504,36 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     }
   };
 
-  const extractDataFromFlow = (flow: FlowType) => {
+  const processDataFromFlow = (flow: FlowType, refreshIds = true) => {
     let data = flow?.data ? flow.data : null;
-    const description = flow?.description ? flow.description : "";
-
     if (data) {
+      processFlowEdges(flow);
+      processFlowNodes(flow);
+      //add animation to text type edges
       updateEdges(data.edges);
-      updateNodes(data.nodes, data.edges);
-      updateIds(data, getNodeId); // Assuming updateIds is defined elsewhere
+      // updateNodes(data.nodes, data.edges);
+      if (refreshIds) updateIds(data, getNodeId); // Assuming updateIds is defined elsewhere
     }
 
-    return { data, description };
+    return data;
   };
 
   const updateEdges = (edges: Edge[]) => {
     edges.forEach((edge) => {
+      const targetHandleObject: targetHandleType = scapeJSONParse(
+        edge.targetHandle!
+      );
       edge.className =
-        (edge.targetHandle!.split("|")[0] === "Text"
+        (targetHandleObject.type === "Text"
           ? "stroke-gray-800 "
           : "stroke-gray-900 ") + " stroke-connection";
-      edge.animated = edge.targetHandle!.split("|")[0] === "Text";
+      edge.animated = targetHandleObject.type === "Text";
     });
   };
 
   const updateNodes = (nodes: Node[], edges: Edge[]) => {
     nodes.forEach((node) => {
+      if (node.data.node?.flow) return;
       if (skipNodeUpdate.includes(node.data.type)) return;
       const template = templates[node.data.type];
       if (!template) {
@@ -538,12 +543,13 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       if (Object.keys(template["template"]).length > 0) {
         node.data.node.base_classes = template["base_classes"];
         edges.forEach((edge) => {
+          let sourceHandleObject: sourceHandleType = scapeJSONParse(
+            edge.sourceHandle!
+          );
           if (edge.source === node.id) {
-            edge.sourceHandle = edge
-              .sourceHandle!.split("|")
-              .slice(0, 2)
-              .concat(template["base_classes"])
-              .join("|");
+            let newSourceHandle = sourceHandleObject;
+            newSourceHandle.baseClasses.concat(template["base_classes"]);
+            edge.sourceHandle = scapedJSONStringfy(newSourceHandle);
           }
         });
         node.data.node.description = template["description"];
@@ -556,12 +562,12 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   };
 
   const createNewFlow = (
-    flowData: { data: ReactFlowJsonObject | null; description: string },
+    flowData: ReactFlowJsonObject | null,
     flow: FlowType
   ) => ({
-    description: flowData.description,
+    description: flow?.description ?? getRandomDescription(),
     name: flow?.name ?? getRandomName(),
-    data: flowData.data,
+    data: flowData,
     id: "",
   });
 
@@ -640,7 +646,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
         tabId,
         setTabId,
         flows,
-        save,
         incrementNodeId,
         removeFlow,
         addFlow,

src/frontend/src/contexts/typesContext.tsx

@@ -5,7 +5,7 @@ import {
   useEffect,
   useState,
 } from "react";
-import { Node, ReactFlowInstance } from "reactflow";
+import { Edge, Node, ReactFlowInstance } from "reactflow";
 import { getAll, getHealth } from "../controllers/API";
 import { APIKindType } from "../types/api";
 import { typesContextType } from "../types/typesContext";
@@ -28,6 +28,7 @@ const initialValue: typesContextType = {
   fetchError: false,
   setFilterEdge: (filter) => {},
   getFilterEdge: [],
+  deleteEdge: () => {},
 };
 
 export const typesContext = createContext<typesContextType>(initialValue);
@@ -92,19 +93,38 @@ export function TypesProvider({ children }: { children: ReactNode }) {
     }
   }
 
-  function deleteNode(idx: string) {
+  function deleteNode(idx: string | Array<string>) {
     reactFlowInstance!.setNodes(
-      reactFlowInstance!.getNodes().filter((node: Node) => node.id !== idx)
+      reactFlowInstance!
+        .getNodes()
+        .filter((node: Node) =>
+          typeof idx === "string" ? node.id !== idx : !idx.includes(node.id)
+        )
     );
     reactFlowInstance!.setEdges(
       reactFlowInstance!
         .getEdges()
-        .filter((edge) => edge.source !== idx && edge.target !== idx)
+        .filter((edge) =>
+          typeof idx === "string"
+            ? edge.source !== idx && edge.target !== idx
+            : !idx.includes(edge.source) && !idx.includes(edge.target)
+        )
     );
   }
+  function deleteEdge(idx: string | Array<string>) {
+    reactFlowInstance!.setEdges(
+      reactFlowInstance!
+        .getEdges()
+        .filter((edge: Edge) =>
+          typeof idx === "string" ? edge.id !== idx : !idx.includes(edge.id)
+        )
+    );
+  }
+
   return (
     <typesContext.Provider
       value={{
+        deleteEdge,
         types,
         setTypes,
         reactFlowInstance,

src/frontend/src/controllers/API/api.tsx

@@ -31,13 +31,11 @@ function ApiInterceptor() {
               logout();
               navigate("/login");
             }
-
-            const res = await renewAccessToken(refreshToken);
-            if (res?.data?.access_token && res?.data?.refresh_token) {
-              login(res?.data?.access_token, res?.data?.refresh_token);
-            }
-
             try {
+              const res = await renewAccessToken(refreshToken);
+              if (res?.data?.access_token && res?.data?.refresh_token) {
+                login(res?.data?.access_token, res?.data?.refresh_token);
+              }
               if (error?.config?.headers) {
                 delete error.config.headers["Authorization"];
                 error.config.headers["Authorization"] = `Bearer ${cookies.get(
@@ -50,6 +48,10 @@ function ApiInterceptor() {
               if (axios.isAxiosError(error) && error.response?.status === 401) {
                 logout();
                 navigate("/login");
+              } else {
+                console.error(error);
+                logout();
+                navigate("/login");
               }
             }
           }

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

@@ -146,8 +146,8 @@ export async function updateFlowInDatabase(
       description: updatedFlow.description,
     });
 
-    if (response.status !== 200) {
-      throw new Error(`HTTP error! status: ${response.status}`);
+    if (response?.status !== 200) {
+      throw new Error(`HTTP error! status: ${response?.status}`);
     }
     return response.data;
   } catch (error) {
@@ -399,7 +399,6 @@ export async function renewAccessToken(token: string) {
       return await api.post(`${BASE_URL_API}refresh?token=${token}`);
     }
   } catch (error) {
-    console.log("Error:", error);
     throw error;
   }
 }

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -7,6 +7,8 @@ import {
   useRef,
   useState,
 } from "react";
+import { useUpdateNodeInternals } from "reactflow";
+import ShadTooltip from "../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../components/codeAreaComponent";
 import DictComponent from "../../components/dictComponent";
 import Dropdown from "../../components/dropdownComponent";
@@ -63,6 +65,7 @@ const EditNodeModal = forwardRef(
     ref
   ) => {
     const [modalOpen, setModalOpen] = useState(open ?? false);
+    const updateNodeInternals = useUpdateNodeInternals();
 
     const myData = useRef(data);
 
@@ -76,21 +79,29 @@ const EditNodeModal = forwardRef(
     function changeAdvanced(n) {
       myData.current.node!.template[n].advanced =
         !myData.current.node!.template[n].advanced;
+      setAdv(!adv);
     }
 
     const handleOnNewValue = (newValue: any, name) => {
       myData.current.node!.template[name].value = newValue;
+      setDataValue(newValue);
+      updateNodeInternals(data.id);
     };
 
     useEffect(() => {
-      myData.current = data; // reset data to what it is on node when opening modal
-      onClose!(modalOpen);
+      if (modalOpen) {
+        myData.current = data; // reset data to what it is on node when opening modal
+        onClose!(modalOpen);
+      }
     }, [modalOpen]);
 
     const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
+    const [adv, setAdv] = useState<boolean | null>(null);
+    const [dataValue, setDataValue] = useState(data);
 
     return (
       <BaseModal
+        key={data.id}
         size="large-h-full"
         open={modalOpen}
         setOpen={setModalOpen}
@@ -161,11 +172,27 @@ const EditNodeModal = forwardRef(
                         .map((templateParam, index) => (
                           <TableRow key={index} className="h-10">
                             <TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
-                              {myData.current.node?.template[templateParam].name
-                                ? myData.current.node.template[templateParam]
-                                    .name
-                                : myData.current.node?.template[templateParam]
-                                    .display_name}
+                              <ShadTooltip
+                                content={
+                                  myData.current.node?.template[templateParam]
+                                    .proxy
+                                    ? myData.current.node?.template[
+                                        templateParam
+                                      ].proxy?.id
+                                    : null
+                                }
+                              >
+                                <span>
+                                  {myData.current.node?.template[templateParam]
+                                    .display_name
+                                    ? myData.current.node.template[
+                                        templateParam
+                                      ].display_name
+                                    : myData.current.node?.template[
+                                        templateParam
+                                      ].name}
+                                </span>
+                              </ShadTooltip>
                             </TableCell>
                             <TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
                               {myData.current.node?.template[templateParam]
@@ -198,6 +225,7 @@ const EditNodeModal = forwardRef(
                                       templateParam
                                     ].multiline ? (
                                     <TextAreaComponent
+                                      id={"textarea-edit-" + index}
                                       disabled={disabled}
                                       editNode={true}
                                       value={
@@ -211,6 +239,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   ) : (
                                     <InputComponent
+                                      id={"input-" + index}
                                       editNode={true}
                                       disabled={disabled}
                                       password={
@@ -256,8 +285,18 @@ const EditNodeModal = forwardRef(
                                 </div>
                               ) : myData.current.node?.template[templateParam]
                                   .type === "dict" ? (
-                                <div className="mt-2 max-h-48 w-full overflow-auto custom-scroll">
+                                <div
+                                  className={classNames(
+                                    "max-h-48 w-full overflow-auto custom-scroll",
+                                    myData.current.node!.template[templateParam]
+                                      .value?.length > 1
+                                      ? "my-3"
+                                      : ""
+                                  )}
+                                >
                                   <KeypairListComponent
+                                    dataValue={dataValue}
+                                    advanced={adv}
                                     disabled={disabled}
                                     editNode={true}
                                     value={
@@ -296,6 +335,7 @@ const EditNodeModal = forwardRef(
                                 <div className="ml-auto">
                                   {" "}
                                   <ToggleShadComponent
+                                    id={"toggle-edit-" + index}
                                     disabled={disabled}
                                     enabled={
                                       myData.current.node.template[
@@ -354,6 +394,7 @@ const EditNodeModal = forwardRef(
                                   .type === "int" ? (
                                 <div className="mx-auto">
                                   <IntComponent
+                                    id={"int-input-" + index}
                                     disabled={disabled}
                                     editNode={true}
                                     value={
@@ -401,6 +442,9 @@ const EditNodeModal = forwardRef(
                                   .type === "prompt" ? (
                                 <div className="mx-auto">
                                   <PromptAreaComponent
+                                    readonly={
+                                      myData.current.node?.flow ? true : false
+                                    }
                                     field_name={templateParam}
                                     editNode={true}
                                     disabled={disabled}
@@ -416,12 +460,21 @@ const EditNodeModal = forwardRef(
                                     onChange={(value: string | string[]) => {
                                       handleOnNewValue(value, templateParam);
                                     }}
+                                    id={"prompt-area-edit" + index}
                                   />
                                 </div>
                               ) : myData.current.node?.template[templateParam]
                                   .type === "code" ? (
                                 <div className="mx-auto">
                                   <CodeAreaComponent
+                                    readonly={
+                                      myData.current.node?.flow &&
+                                      myData.current.node.template[
+                                        templateParam
+                                      ].dynamic
+                                        ? true
+                                        : false
+                                    }
                                     dynamic={
                                       data.node!.template[templateParam]
                                         .dynamic ?? false
@@ -440,6 +493,7 @@ const EditNodeModal = forwardRef(
                                     onChange={(value: string | string[]) => {
                                       handleOnNewValue(value, templateParam);
                                     }}
+                                    id={"code-area-edit" + index}
                                   />
                                 </div>
                               ) : myData.current.node?.template[templateParam]
@@ -452,6 +506,11 @@ const EditNodeModal = forwardRef(
                             <TableCell className="p-0 text-right">
                               <div className="items-center text-center">
                                 <ToggleShadComponent
+                                  id={
+                                    "show" +
+                                    myData.current.node?.template[templateParam]
+                                      .name
+                                  }
                                   enabled={
                                     !myData.current.node?.template[
                                       templateParam
@@ -477,6 +536,7 @@ const EditNodeModal = forwardRef(
 
         <BaseModal.Footer>
           <Button
+            id={"saveChangesBtn"}
             className="mt-3"
             onClick={() => {
               const newData = cloneDeep(myData.current);

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -8,6 +8,7 @@ import { useContext, useEffect, useState } from "react";
 import AceEditor from "react-ace";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
 import { darkContext } from "../../contexts/darkContext";
@@ -23,6 +24,7 @@ export default function CodeAreaModal({
   setNodeClass,
   children,
   dynamic,
+  readonly = false,
 }: codeAreaModalPropsType): JSX.Element {
   const [code, setCode] = useState(value);
   const { dark } = useContext(darkContext);
@@ -143,9 +145,15 @@ export default function CodeAreaModal({
         />
       </BaseModal.Header>
       <BaseModal.Content>
+        <Input
+          value={code}
+          className="absolute left-[500%] top-[500%]"
+          id="codeValue"
+        />
         <div className="flex h-full w-full flex-col transition-all">
           <div className="h-full w-full">
             <AceEditor
+              readOnly={readonly}
               value={code}
               mode="python"
               height={height ?? "100%"}
@@ -180,7 +188,13 @@ export default function CodeAreaModal({
             </div>
           </div>
           <div className="flex h-fit w-full justify-end">
-            <Button className="mt-3" onClick={handleClick} type="submit">
+            <Button
+              className="mt-3"
+              onClick={handleClick}
+              type="submit"
+              id="checkAndSaveBtn"
+              disabled={readonly}
+            >
               Check & Save
             </Button>
           </div>

src/frontend/src/modals/dictAreaModal/index.tsx

@@ -38,7 +38,7 @@ export default function DictAreaModal({
         />
       </BaseModal.Header>
       <BaseModal.Content>
-        <div className="nopan nodrag noundo nocopy flex h-full w-full flex-col transition-all">
+        <div className="flex h-full w-full flex-col transition-all ">
           <JsonView
             theme="vscode"
             dark={true}

src/frontend/src/modals/exportModal/index.tsx

@@ -4,6 +4,7 @@ import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
 import { EXPORT_DIALOG_SUBTITLE } from "../../constants/constants";
+import { alertContext } from "../../contexts/alertContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { removeApiKeys } from "../../utils/reactflowUtils";
 import BaseModal from "../baseModal";
@@ -11,7 +12,8 @@ import BaseModal from "../baseModal";
 const ExportModal = forwardRef(
   (props: { children: ReactNode }, ref): JSX.Element => {
     const { flows, tabId, downloadFlow } = useContext(TabsContext);
-    const [checked, setChecked] = useState(false);
+    const { setNoticeData } = useContext(alertContext);
+    const [checked, setChecked] = useState(true);
     const flow = flows.find((f) => f.id === tabId);
     useEffect(() => {
       setName(flow!.name);
@@ -44,6 +46,7 @@ const ExportModal = forwardRef(
           <div className="mt-3 flex items-center space-x-2">
             <Checkbox
               id="terms"
+              checked={checked}
               onCheckedChange={(event: boolean) => {
                 setChecked(event);
               }}
@@ -52,18 +55,26 @@ const ExportModal = forwardRef(
               Save with my API keys
             </label>
           </div>
+          <span className="text-xs text-destructive">
+            Caution: Uncheck this box only removes API keys from fields
+            specifically designated for API keys.
+          </span>
         </BaseModal.Content>
 
         <BaseModal.Footer>
           <Button
             onClick={() => {
-              if (checked)
+              if (checked) {
                 downloadFlow(
                   flows.find((flow) => flow.id === tabId)!,
                   name!,
                   description
                 );
-              else
+                setNoticeData({
+                  title:
+                    "Warning: Critical data, JSON file may include API keys.",
+                });
+              } else
                 downloadFlow(
                   removeApiKeys(flows.find((flow) => flow.id === tabId)!),
                   name!,

src/frontend/src/modals/formModal/index.tsx

@@ -61,6 +61,7 @@ export default function FormModal({
   });
 
   const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
+  const template = useRef(tabsState[flow.id].formKeysData.template);
   const { reactFlowInstance } = useContext(typesContext);
   const { accessToken } = useContext(AuthContext);
   const { setErrorData } = useContext(alertContext);
@@ -125,12 +126,13 @@ export default function FormModal({
   function updateLastMessage({
     str,
     thought,
+    prompt,
     end = false,
     files,
   }: {
     str?: string;
     thought?: string;
-    // end param default is false
+    prompt?: string;
     end?: boolean;
     files?: Array<any>;
   }) {
@@ -150,12 +152,22 @@ export default function FormModal({
       if (files) {
         newChat[newChat.length - 1].files = files;
       }
+      if (prompt) {
+        newChat[newChat.length - 2].template = prompt;
+      }
       return newChat;
     });
   }
 
   function handleOnClose(event: CloseEvent): void {
     if (isOpen.current) {
+      //check if the user has been logged out, if so close the chat when the user is redirected to the login page
+      if (window.location.href.includes("login")) {
+        setOpen(false);
+        ws.current?.close();
+        return;
+      }
+
       getBuildStatus(flow.id)
         .then((response) => {
           if (response.data.built) {
@@ -194,17 +206,26 @@ export default function FormModal({
   }
 
   function handleWsMessage(data: any) {
-    console.log(data);
     if (Array.isArray(data) && data.length > 0) {
       //set chat history
       setChatHistory((_) => {
+        console.log(data);
         let newChatHistory: ChatMessageType[] = [];
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].type === "prompt" && data[i].prompt) {
+            if (data[i - 1] && !data[i - 1].is_bot) {
+              data[i - 1].prompt = data[i].prompt;
+              template.current = data[i].prompt;
+            }
+          }
+        }
+        data = data.filter((item: any) => item.type !== "prompt");
         data.forEach(
           (chatItem: {
             intermediate_steps?: string;
             is_bot: boolean;
             message: string;
-            template: string;
+            prompt?: string;
             type: string;
             chatKey: string;
             files?: Array<any>;
@@ -215,7 +236,7 @@ export default function FormModal({
                   ? {
                       isSend: !chatItem.is_bot,
                       message: chatItem.message,
-                      template: chatItem.template,
+                      template: chatItem.prompt,
                       thought: chatItem.intermediate_steps,
                       files: chatItem.files,
                       chatKey: chatItem.chatKey,
@@ -223,7 +244,7 @@ export default function FormModal({
                   : {
                       isSend: !chatItem.is_bot,
                       message: chatItem.message,
-                      template: chatItem.template,
+                      template: chatItem.prompt,
                       thought: chatItem.intermediate_steps,
                       chatKey: chatItem.chatKey,
                     }
@@ -240,7 +261,11 @@ export default function FormModal({
     }
     if (data.type === "end") {
       if (data.message) {
-        updateLastMessage({ str: data.message, end: true });
+        updateLastMessage({
+          str: data.message,
+          end: true,
+          prompt: template.current,
+        });
       }
       if (data.intermediate_steps) {
         updateLastMessage({
@@ -255,10 +280,12 @@ export default function FormModal({
           files: data.files,
         });
       }
-
       setLockChat(false);
       isStream = false;
     }
+    if (data.type == "prompt" && data.prompt) {
+      template.current = data.prompt;
+    }
     if (data.type === "stream" && isStream) {
       updateLastMessage({ str: data.message });
     }
@@ -283,18 +310,8 @@ export default function FormModal({
         handleOnClose(event);
       };
       newWs.onerror = (ev) => {
-        if (flow.id === "") {
-          connectWS();
-        } else {
-          setErrorData({
-            title: "There was an error on web connection, please: ",
-            list: [
-              "Refresh the page",
-              "Use a new flow tab",
-              "Check if the backend is up",
-            ],
-          });
-        }
+        console.log(ev);
+        connectWS();
       };
       ws.current = newWs;
     } catch (error) {
@@ -316,6 +333,15 @@ export default function FormModal({
     // do not add connectWS on dependencies array
   }, [open]);
 
+  useEffect(() => {
+    return () => {
+      if (ws.current) {
+        console.log("closing ws");
+        ws.current.close();
+      }
+    };
+  }, []);
+
   useEffect(() => {
     if (
       ws.current &&
@@ -365,18 +391,14 @@ export default function FormModal({
       let inputs = tabsState[id.current].formKeysData.input_keys;
       setChatValue("");
       const message = inputs;
-      addChatHistory(
-        message!,
-        true,
-        chatKey!,
-        tabsState[flow.id].formKeysData.template
-      );
+      addChatHistory(message!, true, chatKey!, template.current);
       sendAll({
         ...reactFlowInstance?.toObject()!,
         inputs: inputs!,
         chatHistory,
         name: flow.name,
         description: flow.description,
+        chatKey: chatKey!,
       });
       //@ts-ignore
       setTabsState((old: TabsState) => {
@@ -394,6 +416,7 @@ export default function FormModal({
   }
   function clearChat(): void {
     setChatHistory([]);
+    template.current = tabsState[id.current].formKeysData.template;
     ws.current?.send(JSON.stringify({ clear_history: true }));
     if (lockChat) setLockChat(false);
   }
@@ -407,7 +430,6 @@ export default function FormModal({
       setChatValue("");
     }
   }
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger hidden></DialogTrigger>

src/frontend/src/modals/genericModal/index.tsx

@@ -17,11 +17,7 @@ import { alertContext } from "../../contexts/alertContext";
 import { postValidatePrompt } from "../../controllers/API";
 import { genericModalPropsType } from "../../types/components";
 import { handleKeyDown } from "../../utils/reactflowUtils";
-import {
-  classNames,
-  getRandomKeyByssmm,
-  varHighlightHTML,
-} from "../../utils/utils";
+import { classNames, varHighlightHTML } from "../../utils/utils";
 import BaseModal from "../baseModal";
 
 export default function GenericModal({
@@ -34,9 +30,12 @@ export default function GenericModal({
   nodeClass,
   setNodeClass,
   children,
+  id = "",
+  readonly = false,
 }: genericModalPropsType): JSX.Element {
   const [myButtonText] = useState(buttonText);
   const [myModalTitle] = useState(modalTitle);
+  const [modalOpen, setModalOpen] = useState(false);
   const [myModalType] = useState(type);
   const [inputValue, setInputValue] = useState(value);
   const [isEdit, setIsEdit] = useState(true);
@@ -89,7 +88,7 @@ export default function GenericModal({
 
   useEffect(() => {
     setInputValue(value);
-  }, [value]);
+  }, [value, modalOpen]);
 
   const coloredContent = (inputValue || "")
     .replace(/</g, "&lt;")
@@ -97,19 +96,6 @@ export default function GenericModal({
     .replace(regexHighlight, varHighlightHTML({ name: "$1" }))
     .replace(/\n/g, "<br />");
 
-  const TextAreaContentView = (): JSX.Element => {
-    return (
-      <SanitizedHTMLWrapper
-        className={getClassByNumberLength()}
-        content={coloredContent}
-        onClick={() => {
-          setIsEdit(true);
-        }}
-        suppressWarning={true}
-      />
-    );
-  };
-
   function getClassByNumberLength(): string {
     let sumOfCaracteres: number = 0;
     wordsHighlight.forEach((element) => {
@@ -125,12 +111,17 @@ export default function GenericModal({
 
     postValidatePrompt(field_name, inputValue, nodeClass!)
       .then((apiReturn) => {
+        // if field_name is an empty string, then we need to set it
+        // to the first key of the custom_fields object
+        if (field_name === "") {
+          console.log(apiReturn.data?.frontend_node?.custom_fields);
+          field_name = Array.isArray(
+            apiReturn.data?.frontend_node?.custom_fields?.[""]
+          )
+            ? apiReturn.data?.frontend_node?.custom_fields?.[""][0] ?? ""
+            : apiReturn.data?.frontend_node?.custom_fields?.[""] ?? "";
+        }
         if (apiReturn.data) {
-          setValue(inputValue);
-          apiReturn.data.frontend_node["template"]["template"]["value"] =
-            inputValue;
-          setNodeClass!(apiReturn?.data?.frontend_node);
-
           let inputVariables = apiReturn.data.input_variables ?? [];
           if (inputVariables && inputVariables.length === 0) {
             setIsEdit(true);
@@ -138,6 +129,17 @@ export default function GenericModal({
               title: "Your template does not have any variables.",
             });
             setModalOpen(false);
+            if (
+              JSON.stringify(apiReturn.data?.frontend_node) !==
+              JSON.stringify({})
+            )
+              setNodeClass!(apiReturn.data?.frontend_node);
+            setModalOpen(closeModal);
+            setValue(inputValue);
+            if (field_name !== "") {
+              apiReturn.data.frontend_node["template"][field_name]["value"] =
+                inputValue;
+            }
           } else {
             setIsEdit(false);
             setSuccessData({
@@ -150,6 +152,10 @@ export default function GenericModal({
               setNodeClass!(apiReturn.data?.frontend_node);
             setModalOpen(closeModal);
             setValue(inputValue);
+            if (field_name !== "") {
+              apiReturn.data.frontend_node["template"][field_name]["value"] =
+                inputValue;
+            }
           }
         } else {
           setIsEdit(true);
@@ -159,16 +165,15 @@ export default function GenericModal({
         }
       })
       .catch((error) => {
+        console.log(error);
         setIsEdit(true);
         return setErrorData({
           title: "There is something wrong with this prompt, please review it",
-          list: [error?.response?.data?.detail],
+          list: [error.toString()],
         });
       });
   }
 
-  const [modalOpen, setModalOpen] = useState(false);
-
   return (
     <BaseModal
       onChangeOpenModal={(open) => {}}
@@ -205,8 +210,9 @@ export default function GenericModal({
               "flex h-full w-full"
             )}
           >
-            {type === TypeModal.PROMPT && isEdit ? (
+            {type === TypeModal.PROMPT && isEdit && !readonly ? (
               <Textarea
+                id={"modal-" + id}
                 ref={divRefPrompt}
                 className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
                 value={inputValue}
@@ -223,8 +229,15 @@ export default function GenericModal({
                   handleKeyDown(e, inputValue, "");
                 }}
               />
-            ) : type === TypeModal.PROMPT && !isEdit ? (
-              <TextAreaContentView />
+            ) : type === TypeModal.PROMPT && (!isEdit || readonly) ? (
+              <SanitizedHTMLWrapper
+                className={getClassByNumberLength()}
+                content={coloredContent}
+                onClick={() => {
+                  setIsEdit(true);
+                }}
+                suppressWarning={true}
+              />
             ) : type !== TypeModal.PROMPT ? (
               <Textarea
                 //@ts-ignore
@@ -238,6 +251,7 @@ export default function GenericModal({
                 onKeyDown={(e) => {
                   handleKeyDown(e, value, "");
                 }}
+                readOnly={readonly}
               />
             ) : (
               <></>
@@ -263,7 +277,7 @@ export default function GenericModal({
 
                       {wordsHighlight.map((word, index) => (
                         <ShadTooltip
-                          key={getRandomKeyByssmm() + index}
+                          key={index}
                           content={word.replace(/[{}]/g, "")}
                           asChild={false}
                         >
@@ -274,7 +288,7 @@ export default function GenericModal({
                             className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
                           >
                             <div className="relative bottom-[1px]">
-                              <span>
+                              <span id={"badge" + index.toString()}>
                                 {word.replace(/[{}]/g, "").length > 59
                                   ? word.replace(/[{}]/g, "").slice(0, 56) +
                                     "..."
@@ -294,6 +308,8 @@ export default function GenericModal({
               )}
             </div>
             <Button
+              id="genericModalBtnSave"
+              disabled={readonly}
               onClick={() => {
                 switch (myModalType) {
                   case TypeModal.TEXT:

src/frontend/src/modals/importModal/buttonBox/index.tsx

@@ -1,101 +0,0 @@
-import { buttonBoxPropsType } from "../../../types/components";
-import { classNames } from "../../../utils/utils";
-
-export default function ButtonBox({
-  onClick,
-  title,
-  description,
-  icon,
-  bgColor,
-  textColor,
-  deactivate,
-  size,
-}: buttonBoxPropsType): JSX.Element {
-  let bigCircle: string;
-  let smallCircle: string;
-  let titleFontSize: string;
-  let descriptionFontSize: string;
-  let padding: string;
-  let marginTop: string;
-  let height: string;
-  let width: string;
-  let textHeight: number;
-  let textWidth: number;
-  switch (size) {
-    case "small":
-      bigCircle = "h-12 w-12";
-      smallCircle = "h-8 w-8";
-      titleFontSize = "text-sm";
-      descriptionFontSize = "text-xs";
-      padding = "p-2 py-3";
-      marginTop = "mt-2";
-      height = "h-36";
-      width = "w-32";
-      break;
-    case "medium":
-      bigCircle = "h-16 w-16";
-      smallCircle = "h-12 w-12";
-      titleFontSize = "text-base";
-      descriptionFontSize = "text-sm";
-      padding = "p-4 py-5";
-      marginTop = "mt-3";
-      height = "h-44";
-      width = "w-36";
-      break;
-    case "big":
-      bigCircle = "h-20 w-20";
-      smallCircle = "h-16 w-16";
-      titleFontSize = "text-lg";
-      descriptionFontSize = "text-sm";
-      padding = "p-8 py-10";
-      marginTop = "mt-6";
-      height = "h-56";
-      width = "w-44";
-      break;
-    default:
-      bigCircle = "h-20 w-20";
-      smallCircle = "h-16 w-16";
-      titleFontSize = "text-lg";
-      descriptionFontSize = "text-sm";
-      padding = "p-8 py-10";
-      marginTop = "mt-6";
-      height = "h-56";
-      width = "w-44";
-      break;
-  }
-
-  return (
-    <button disabled={deactivate} onClick={onClick}>
-      <div
-        className={classNames(
-          "button-box-modal-div",
-          bgColor,
-          height,
-          width,
-          padding
-        )}
-      >
-        <div
-          className={`flex items-center justify-center ${bigCircle} mb-1 rounded-full bg-background/30`}
-        >
-          <div
-            className={`flex items-center justify-center ${smallCircle} rounded-full bg-background`}
-          >
-            <div className={textColor}>{icon}</div>
-          </div>
-        </div>
-        <div className="mb-auto mt-auto w-full">
-          <h3
-            className={classNames(
-              "w-full font-semibold text-background truncate-multiline word-break-break-word",
-              titleFontSize,
-              marginTop
-            )}
-          >
-            {title}
-          </h3>
-        </div>
-      </div>
-    </button>
-  );
-}

src/frontend/src/modals/importModal/index.tsx

@@ -1,190 +0,0 @@
-import {
-  ArrowLeftIcon,
-  ArrowUpTrayIcon,
-  ComputerDesktopIcon,
-  DocumentDuplicateIcon,
-} from "@heroicons/react/24/outline";
-import { useContext, useRef, useState } from "react";
-import LoadingComponent from "../../components/loadingComponent";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../../components/ui/dialog";
-import { IMPORT_DIALOG_SUBTITLE } from "../../constants/constants";
-import { alertContext } from "../../contexts/alertContext";
-import { TabsContext } from "../../contexts/tabsContext";
-import { getExamples } from "../../controllers/API";
-import { FlowType } from "../../types/flow";
-import { classNames } from "../../utils/utils";
-import ButtonBox from "./buttonBox";
-
-export default function ImportModal(): JSX.Element {
-  const [open, setOpen] = useState(true);
-  const { setErrorData } = useContext(alertContext);
-  const ref = useRef();
-  const [showExamples, setShowExamples] = useState(false);
-  const [loadingExamples, setLoadingExamples] = useState(false);
-  const [examples, setExamples] = useState<FlowType[]>([]);
-  const { uploadFlow, addFlow } = useContext(TabsContext);
-
-  function handleExamples(): void {
-    setLoadingExamples(true);
-    getExamples()
-      .then((result) => {
-        setLoadingExamples(false);
-        setExamples(result);
-      })
-      .catch((error) =>
-        setErrorData({
-          title: "there was an error loading examples, please try again",
-          list: [error.message],
-        })
-      );
-  }
-
-  const [modalOpen, setModalOpen] = useState(false);
-
-  return (
-    <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-      <DialogTrigger></DialogTrigger>
-      <DialogContent
-        className={classNames(
-          showExamples
-            ? "h-[600px] lg:max-w-[650px]"
-            : "h-[450px] lg:max-w-[650px]"
-        )}
-      >
-        <DialogHeader>
-          <DialogTitle className="flex items-center">
-            {showExamples && (
-              <>
-                <div className="dialog-header-modal-div">
-                  <button
-                    type="button"
-                    className="dialog-header-modal-button disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
-                    onClick={() => {
-                      setShowExamples(false);
-                    }}
-                  >
-                    <ArrowLeftIcon
-                      className="ml-1 h-5 w-5 text-foreground"
-                      aria-hidden="true"
-                    />
-                  </button>
-                </div>
-              </>
-            )}
-
-            <span className={classNames(showExamples ? "pl-8 pr-2" : "pr-2")}>
-              {showExamples ? "Select an example" : "Import"}
-            </span>
-            <ArrowUpTrayIcon
-              className="ml-1 h-5 w-5 text-foreground"
-              aria-hidden="true"
-            />
-          </DialogTitle>
-          <DialogDescription>{IMPORT_DIALOG_SUBTITLE}</DialogDescription>
-        </DialogHeader>
-
-        <div
-          className={classNames(
-            "dialog-modal-examples-div",
-            showExamples && !loadingExamples
-              ? "dialog-modal-example-true"
-              : "dialog-modal-example-false"
-          )}
-        >
-          {!showExamples && (
-            <div className="dialog-modal-button-box-div">
-              <ButtonBox
-                size="big"
-                bgColor="bg-medium-emerald "
-                description="Prebuilt Examples"
-                icon={<DocumentDuplicateIcon className="document-icon" />}
-                onClick={() => {
-                  setShowExamples(true);
-                  handleExamples();
-                }}
-                textColor="text-medium-emerald "
-                title="Examples"
-              ></ButtonBox>
-              <ButtonBox
-                size="big"
-                bgColor="bg-almost-dark-blue "
-                description="Import from Local"
-                icon={<ComputerDesktopIcon className="document-icon" />}
-                onClick={() => {
-                  uploadFlow();
-                  setModalOpen(false);
-                }}
-                textColor="text-almost-dark-blue "
-                title="Local File"
-              ></ButtonBox>
-            </div>
-          )}
-          {showExamples && loadingExamples && (
-            <div className="loading-component-div">
-              <LoadingComponent remSize={30} />
-            </div>
-          )}
-          {showExamples &&
-            !loadingExamples &&
-            examples.map((example, index) => {
-              return (
-                <div key={example.name} className="m-2">
-                  {" "}
-                  <ButtonBox
-                    size="small"
-                    bgColor="bg-medium-emerald "
-                    description={example.description ?? "Prebuilt Examples"}
-                    icon={
-                      <DocumentDuplicateIcon
-                        strokeWidth={1.5}
-                        className="h-6 w-6 flex-shrink-0"
-                      />
-                    }
-                    onClick={() => {
-                      addFlow(example, false);
-                      setModalOpen(false);
-                    }}
-                    textColor="text-medium-emerald "
-                    title={example.name}
-                  ></ButtonBox>
-                </div>
-              );
-            })}
-        </div>
-
-        <DialogFooter>
-          <div className="dialog-modal-footer">
-            <a
-              href="https://github.com/logspace-ai/langflow_examples"
-              target="_blank"
-              className="dialog-modal-footer-link "
-              rel="noreferrer"
-            >
-              <svg
-                width="24"
-                viewBox="0 0 98 96"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-                  fill="currentColor"
-                />
-              </svg>
-              <span className="ml-2 ">Langflow Examples</span>
-            </a>
-          </div>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

src/frontend/src/pages/AdminPage/LoginPage/index.tsx

@@ -54,7 +54,9 @@ export default function LoginAdminPage() {
           .then((user) => {
             setUserData(user);
           })
-          .catch((error) => {});
+          .catch((error) => {
+            console.log("login admin page", error);
+          });
       }, 1000);
     }
   }

src/frontend/src/pages/CommunityPage/index.tsx

@@ -94,7 +94,7 @@ export default function CommunityPage(): JSX.Element {
                     size="sm"
                     className="whitespace-nowrap "
                     onClick={() => {
-                      addFlow(flow, true).then((id) => {
+                      addFlow(true, flow).then((id) => {
                         navigate("/flow/" + id);
                       });
                     }}

src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx

@@ -14,6 +14,7 @@ export default function DisclosureComponent({
           <div>
             <Disclosure.Button className="components-disclosure-arrangement">
               <div className="flex gap-4">
+                {/* BUG ON THIS ICON */}
                 <Icon strokeWidth={1.5} size={22} className="text-primary" />
                 <span className="components-disclosure-title">{title}</span>
               </div>

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -33,11 +33,18 @@ import { TabsContext } from "../../../../contexts/tabsContext";
 import { typesContext } from "../../../../contexts/typesContext";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import { APIClassType } from "../../../../types/api";
-import { FlowType, NodeType } from "../../../../types/flow";
+import { FlowType, NodeType, targetHandleType } from "../../../../types/flow";
 import { TabsState } from "../../../../types/tabs";
-import { isValidConnection } from "../../../../utils/reactflowUtils";
-import { isWrappedWithClass } from "../../../../utils/utils";
+import {
+  generateFlow,
+  generateNodeFromFlow,
+  isValidConnection,
+  scapeJSONParse,
+  validateSelection,
+} from "../../../../utils/reactflowUtils";
+import { getRandomName, isWrappedWithClass } from "../../../../utils/utils";
 import ConnectionLineComponent from "../ConnectionLineComponent";
+import SelectionMenu from "../SelectionMenuComponent";
 import ExtraSidebar from "../extraSidebarComponent";
 
 const nodeTypes = {
@@ -70,6 +77,8 @@ export default function Page({
     setReactFlowInstance,
     templates,
     setFilterEdge,
+    deleteNode,
+    deleteEdge,
   } = useContext(typesContext);
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
 
@@ -112,6 +121,16 @@ export default function Page({
           event.preventDefault();
         }
       }
+      if (!isWrappedWithClass(event, "nodelete")) {
+        if (
+          (event.key === "Delete" || event.key === "Backspace") &&
+          lastSelection
+        ) {
+          event.preventDefault();
+          deleteNode(lastSelection.nodes.map((node) => node.id));
+          deleteEdge(lastSelection.edges.map((edge) => edge.id));
+        }
+      }
     };
     const handleMouseMove = (event) => {
       setPosition({ x: event.clientX, y: event.clientY });
@@ -226,12 +245,19 @@ export default function Page({
         addEdge(
           {
             ...params,
+            data: {
+              targetHandle: scapeJSONParse(params.targetHandle!),
+              sourceHandle: scapeJSONParse(params.sourceHandle!),
+            },
             style: { stroke: "#555" },
             className:
-              (params.targetHandle?.split("|")[0] === "Text"
+              ((scapeJSONParse(params.targetHandle!) as targetHandleType)
+                .type === "Text"
                 ? "stroke-foreground "
                 : "stroke-foreground ") + " stroke-connection",
-            animated: params.targetHandle?.split("|")[0] === "Text",
+            animated:
+              (scapeJSONParse(params.targetHandle!) as targetHandleType)
+                .type === "Text",
           },
           eds
         )
@@ -382,7 +408,7 @@ export default function Page({
     edgeUpdateSuccessful.current = true;
   }, []);
 
-  const [selectionEnded, setSelectionEnded] = useState(false);
+  const [selectionEnded, setSelectionEnded] = useState(true);
 
   const onSelectionEnd = useCallback(() => {
     setSelectionEnded(true);
@@ -422,7 +448,7 @@ export default function Page({
           <div className="h-full w-full" ref={reactFlowWrapper}>
             {Object.keys(templates).length > 0 &&
             Object.keys(types).length > 0 ? (
-              <div className="h-full w-full">
+              <div id="react-flow-id" className="h-full w-full">
                 <ReactFlow
                   nodes={nodes}
                   onMove={() => {
@@ -450,8 +476,9 @@ export default function Page({
                   connectionLineComponent={ConnectionLineComponent}
                   onDragOver={onDragOver}
                   onDrop={onDrop}
-                  onNodesDelete={onDelete}
                   onSelectionChange={onSelectionChange}
+                  onNodesDelete={onDelete}
+                  deleteKeyCode={[]}
                   className="theme-attribution"
                   minZoom={0.01}
                   maxZoom={8}
@@ -468,6 +495,50 @@ export default function Page({
                    [&>button]:border-b-border hover:[&>button]:bg-border"
                     ></Controls>
                   )}
+                  <SelectionMenu
+                    isVisible={selectionMenuVisible}
+                    nodes={lastSelection?.nodes}
+                    onClick={() => {
+                      if (
+                        validateSelection(lastSelection!, edges).length === 0
+                      ) {
+                        const { newFlow } = generateFlow(
+                          lastSelection!,
+                          reactFlowInstance!,
+                          getRandomName()
+                        );
+                        const newGroupNode = generateNodeFromFlow(
+                          newFlow,
+                          getNodeId
+                        );
+                        setNodes((oldNodes) => [
+                          ...oldNodes.filter(
+                            (oldNodes) =>
+                              !lastSelection?.nodes.some(
+                                (selectionNode) =>
+                                  selectionNode.id === oldNodes.id
+                              )
+                          ),
+                          newGroupNode,
+                        ]);
+                        setEdges((oldEdges) =>
+                          oldEdges.filter(
+                            (oldEdge) =>
+                              !lastSelection!.nodes.some(
+                                (selectionNode) =>
+                                  selectionNode.id === oldEdge.target ||
+                                  selectionNode.id === oldEdge.source
+                              )
+                          )
+                        );
+                      } else {
+                        setErrorData({
+                          title: "Invalid selection",
+                          list: validateSelection(lastSelection!, edges),
+                        });
+                      }
+                    }}
+                  />
                 </ReactFlow>
                 {!view && (
                   <Chat flow={flow} reactFlowInstance={reactFlowInstance!} />

src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+import { NodeToolbar } from "reactflow";
+import IconComponent from "../../../../components/genericIconComponent";
+export default function SelectionMenu({ onClick, nodes, isVisible }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [lastNodes, setLastNodes] = useState(nodes);
+
+  // nodes get saved to not be gone after the toolbar closes
+  useEffect(() => {
+    setLastNodes(nodes);
+  }, [isOpen]);
+
+  // transition starts after and ends before the toolbar closes
+  useEffect(() => {
+    if (isVisible) {
+      setIsOpen(true);
+      setTimeout(() => {
+        setIsTransitioning(true);
+      }, 50);
+    } else {
+      setIsTransitioning(false);
+      setTimeout(() => {
+        setIsOpen(false);
+      }, 500);
+    }
+  }, [isVisible]);
+
+  return (
+    <NodeToolbar
+      isVisible={isOpen}
+      offset={5}
+      nodeId={
+        lastNodes && lastNodes.length > 0 ? lastNodes.map((n) => n.id) : []
+      }
+    >
+      <div className="h-10 w-28 overflow-hidden">
+        <div
+          className={
+            "h-10 w-24 rounded-md border border-indigo-300 bg-white px-2.5 text-gray-700 shadow-inner transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300" +
+            (isTransitioning ? " translate-y-0" : " translate-y-10")
+          }
+        >
+          <button
+            className="flex h-full w-full items-center justify-between text-sm hover:text-indigo-500"
+            onClick={onClick}
+          >
+            <IconComponent name="Group" className="w-6" />
+            Group
+          </button>
+        </div>
+      </div>
+    </NodeToolbar>
+  );
+}