Playground (#1824)

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

@@ -201,7 +201,7 @@ def format_elapsed_time(elapsed_time: float) -> str:
         return f"{minutes} {minutes_unit}, {seconds} {seconds_unit}"
 
 
-async def build_and_cache_graph(
+async def build_and_cache_graph_from_db(
     flow_id: str,
     session: Session,
     chat_service: "ChatService",
@@ -220,6 +220,17 @@ async def build_and_cache_graph(
     return graph
 
 
+async def build_and_cache_graph_from_data(
+    flow_id: str,
+    chat_service: "ChatService",
+    graph_data: dict,
+):  # -> Graph | Any:
+    """Build and cache the graph."""
+    graph = Graph.from_payload(graph_data, flow_id)
+    await chat_service.set_cache(flow_id, graph)
+    return graph
+
+
 def format_syntax_error_message(exc: SyntaxError) -> str:
     """Format a SyntaxError message for returning to the frontend."""
     if exc.text is None:

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

@@ -8,13 +8,15 @@ from fastapi.responses import StreamingResponse
 from loguru import logger
 
 from langflow.api.utils import (
-    build_and_cache_graph,
+    build_and_cache_graph_from_data,
+    build_and_cache_graph_from_db,
     format_elapsed_time,
     format_exception_message,
     get_top_level_vertices,
     parse_exception,
 )
 from langflow.api.v1.schemas import (
+    FlowDataRequest,
     InputValueRequest,
     ResultDataResponse,
     StreamData,
@@ -49,9 +51,10 @@ async def try_running_celery_task(vertex, user_id):
     return vertex
 
 
-@router.get("/build/{flow_id}/vertices", response_model=VerticesOrderResponse)
-async def get_vertices(
+@router.post("/build/{flow_id}/vertices", response_model=VerticesOrderResponse)
+async def retrieve_vertices_order(
     flow_id: str,
+    data: Annotated[Optional[FlowDataRequest], Body(embed=True)] = None,
     stop_component_id: Optional[str] = None,
     start_component_id: Optional[str] = None,
     chat_service: "ChatService" = Depends(get_chat_service),
@@ -62,6 +65,7 @@ async def get_vertices(
 
     Args:
         flow_id (str): The ID of the flow.
+        data (Optional[FlowDataRequest], optional): The flow data. Defaults to None.
         stop_component_id (str, optional): The ID of the stop component. Defaults to None.
         start_component_id (str, optional): The ID of the start component. Defaults to None.
         chat_service (ChatService, optional): The chat service dependency. Defaults to Depends(get_chat_service).
@@ -76,9 +80,16 @@ async def get_vertices(
     try:
         # First, we need to check if the flow_id is in the cache
         graph = None
-        if cache := await chat_service.get_cache(flow_id):
-            graph = cache.get("result")
-        graph = await build_and_cache_graph(flow_id, session, chat_service, graph)
+        if not data:
+            if cache := await chat_service.get_cache(flow_id):
+                graph = cache.get("result")
+            graph = await build_and_cache_graph_from_db(
+                flow_id=flow_id, session=session, chat_service=chat_service, graph=graph
+            )
+        else:
+            graph = await build_and_cache_graph_from_data(
+                flow_id=flow_id, graph_data=data.model_dump(), chat_service=chat_service
+            )
         if stop_component_id or start_component_id:
             try:
                 first_layer = graph.sort_vertices(stop_component_id, start_component_id)
@@ -144,7 +155,9 @@ async def build_vertex(
         if not cache:
             # If there's no cache
             logger.warning(f"No cache found for {flow_id}. Building graph starting at {vertex_id}")
-            graph = await build_and_cache_graph(flow_id=flow_id, session=next(get_session()), chat_service=chat_service)
+            graph = await build_and_cache_graph_from_db(
+                flow_id=flow_id, session=next(get_session()), chat_service=chat_service
+            )
         else:
             graph = cache.get("result")
         result_data_response = ResultDataResponse(results={})

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

@@ -294,3 +294,15 @@ class SimplifiedAPIRequest(BaseModel):
     )
     tweaks: Optional[Tweaks] = Field(default=None, description="The tweaks")
     session_id: Optional[str] = Field(default=None, description="The session id")
+
+
+# (alias) type ReactFlowJsonObject<NodeData = any, EdgeData = any> = {
+#     nodes: Node<NodeData>[];
+#     edges: Edge<EdgeData>[];
+#     viewport: Viewport;
+# }
+# import ReactFlowJsonObject
+class FlowDataRequest(BaseModel):
+    nodes: List[dict]
+    edges: List[dict]
+    viewport: Optional[dict] = None

src/backend/base/langflow/components/inputs/ChatInput.py

@@ -7,7 +7,7 @@ from langflow.schema import Record
 
 class ChatInput(ChatComponent):
     display_name = "Chat Input"
-    description = "Get chat inputs from the Interaction Panel."
+    description = "Get chat inputs from the Playground."
     icon = "ChatInput"
 
     def build_config(self):

src/backend/base/langflow/components/inputs/FileInput.py

@@ -0,0 +1,48 @@
+from pathlib import Path
+from typing import Any, Dict
+
+from langflow.base.data.utils import TEXT_FILE_TYPES, parse_text_file_to_record
+from langflow.interface.custom.custom_component import CustomComponent
+from langflow.schema import Record
+
+
+class FileInput(CustomComponent):
+    display_name = "File Input"
+    description = "A generic file input."
+    icon = "file-text"
+
+    def build_config(self) -> Dict[str, Any]:
+        return {
+            "path": {
+                "display_name": "Path",
+                "field_type": "file",
+                "file_types": TEXT_FILE_TYPES,
+                "info": f"Supported file types: {', '.join(TEXT_FILE_TYPES)}",
+            },
+            "silent_errors": {
+                "display_name": "Silent Errors",
+                "advanced": True,
+                "info": "If true, errors will not raise an exception.",
+            },
+        }
+
+    def load_file(self, path: str, silent_errors: bool = False) -> Record:
+        resolved_path = self.resolve_path(path)
+        path_obj = Path(resolved_path)
+        extension = path_obj.suffix[1:].lower()
+        if extension == "doc":
+            raise ValueError("doc files are not supported. Please save as .docx")
+        if extension not in TEXT_FILE_TYPES:
+            raise ValueError(f"Unsupported file type: {extension}")
+        record = parse_text_file_to_record(resolved_path, silent_errors)
+        self.status = record if record else "No data"
+        return record or Record()
+
+    def build(
+        self,
+        path: str,
+        silent_errors: bool = False,
+    ) -> Record:
+        record = self.load_file(path, silent_errors)
+        self.status = record
+        return record

src/backend/base/langflow/components/inputs/JsonInput.py

@@ -0,0 +1,17 @@
+from langflow.base.io.text import TextComponent
+from langflow.field_typing.constants import Data, NestedDict
+
+class JsonInput(TextComponent):
+    display_name = "JSON Input"  
+    description = "JSON Input."
+
+    def build_config(self):
+        return {
+            "input_value": {
+                "display_name": "JSON",
+                "field_type": "NestedDict"
+            }
+        }
+
+    def build(self, input_value: NestedDict) -> NestedDict:
+        return input_value

src/backend/base/langflow/components/inputs/KeyPairInput.py

@@ -0,0 +1,19 @@
+from langflow.base.io.text import TextComponent
+from langflow.field_typing.constants import Data
+
+
+class KeyPairInput(TextComponent):
+    display_name = "Dictionary Input"  
+    description = "Dictionary Input."
+
+    def build_config(self):
+        return {
+            "input_value": {
+                "display_name": "Dictionaries",
+                "field_type": "dict",
+                "list": True
+            }
+        }
+
+    def build(self, input_value: dict) -> dict:
+        return input_value

src/backend/base/langflow/components/inputs/StringListInput.py

@@ -0,0 +1,13 @@
+# from langflow.field_typing import Data
+from langflow.schema import Record
+from langflow.interface.custom.custom_component import CustomComponent
+
+
+class StringListInput(CustomComponent):
+    display_name = "String List Input"
+
+    def build_config(self):
+        return {"input_value": {"display_name": "String List Input", "field_type": "str", "list": True}}
+
+    def build(self, input_value: list) -> Record:
+        return Record(data=input_value)

src/backend/base/langflow/components/inputs/TextInput.py

@@ -6,7 +6,7 @@ from langflow.field_typing import Text
 
 class TextInput(TextComponent):
     display_name = "Text Input"
-    description = "Get text inputs from the Interaction Panel."
+    description = "Get text inputs from the Playground."
     icon = "type"
 
     def build_config(self):

src/backend/base/langflow/components/outputs/CSVOutput.py

@@ -0,0 +1,17 @@
+from typing import Optional
+
+from langflow.base.io.text import TextComponent
+from langflow.field_typing import Text, Data
+
+
+class CSVOutput(TextComponent):
+    display_name = "CSV Output"
+    description = "Used view csv files"
+
+    field_config = {
+        "input_value": {"display_name": "csv","info":"A csv blob","input_types":["Data"]},
+        "separator": {"display_name": "separator","info":"The separator used in the csv file","input_types":["Text"], "field_type":"Text","default_value":";","options":[";", ",", "|"]},
+    }
+
+    def build(self, input_value: Data, separator) -> Data:
+        return {"data": input_value, "separator": separator}

src/backend/base/langflow/components/outputs/ChatOutput.py

@@ -7,7 +7,7 @@ from langflow.schema import Record
 
 class ChatOutput(ChatComponent):
     display_name = "Chat Output"
-    description = "Display a chat message in the Interaction Panel."
+    description = "Display a chat message in the Playground."
     icon = "ChatOutput"
 
     def build(

src/backend/base/langflow/components/outputs/ImageOutput.py

@@ -0,0 +1,15 @@
+from typing import Optional
+
+from langflow.base.io.text import TextComponent
+from langflow.field_typing import Text
+
+class ImageOutput(TextComponent):
+    display_name = "Image Output"
+    description = "Used view image files"
+
+    field_config = {
+        "input_value": {"display_name": "image","info":"A image url","input_types":["Text"]},
+    }
+
+    def build(self, input_value: Text) -> Text:
+        return input_value

src/backend/base/langflow/components/outputs/JsonOutput.py

@@ -0,0 +1,17 @@
+from langflow.base.io.text import TextComponent
+from langflow.field_typing.constants import Data, NestedDict
+
+class JsonOutput(TextComponent):
+    display_name = "JSON Output"  
+    description = "JSON Output."
+
+    def build_config(self):
+        return {
+            "input_value": {
+                "display_name": "JSON",
+                "field_type": "NestedDict"
+            }
+        }
+
+    def build(self, input_value: NestedDict) -> NestedDict:
+        return input_value

src/backend/base/langflow/components/outputs/KeyPairOutput.py

@@ -0,0 +1,19 @@
+from langflow.base.io.text import TextComponent
+from langflow.field_typing.constants import Data
+
+
+class KeyPairOutput(TextComponent):
+    display_name = "Dictionary Output"  
+    description = "Dictionary Output."
+
+    def build_config(self):
+        return {
+            "input_value": {
+                "display_name": "Dictionaries",
+                "field_type": "dict",
+                "list": True
+            }
+        }
+
+    def build(self, input_value: dict) -> dict:
+        return input_value

src/backend/base/langflow/components/outputs/PDFOutput.py

@@ -0,0 +1,16 @@
+from typing import Optional
+
+from langflow.base.io.text import TextComponent
+from langflow.field_typing import Text
+
+
+class PDFOutput(TextComponent):
+    display_name = "PDF Output"
+    description = "Used view pdf files"
+
+    field_config = {
+        "input_value": {"display_name": "pdf","info":"A pdf url","input_types":["Text"]},
+    }
+
+    def build(self, input_value: Text) -> Text:
+        return input_value

src/backend/base/langflow/components/outputs/StringListOutput.py

@@ -0,0 +1,13 @@
+# from langflow.field_typing import Data
+from langflow.schema import Record
+from langflow.interface.custom.custom_component import CustomComponent
+
+
+class StringListOutput(CustomComponent):
+    display_name = "String List Output"
+
+    def build_config(self):
+        return {"input_value": {"display_name": "String List Output", "field_type": "str", "list": True}}
+
+    def build(self, input_value: list) -> Record:
+        return Record(data=input_value)

src/backend/base/langflow/components/outputs/TextOutput.py

@@ -6,7 +6,7 @@ from langflow.field_typing import Text
 
 class TextOutput(TextComponent):
     display_name = "Text Output"
-    description = "Display a text output in the Interaction Panel."
+    description = "Display a text output in the Playground."
     icon = "type"
 
     def build_config(self):

src/backend/base/langflow/initial_setup/starter_projects/Basic Prompting (Hello, world!).json

@@ -421,7 +421,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Interaction Panel.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Playground.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -565,7 +565,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a chat message in the Interaction Panel.",
+            "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
             "base_classes": [
               "Record",
@@ -621,7 +621,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Interaction Panel.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Playground.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -742,7 +742,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Get chat inputs from the Interaction Panel.",
+            "description": "Get chat inputs from the Playground.",
             "icon": "ChatInput",
             "base_classes": [
               "object",

src/backend/base/langflow/initial_setup/starter_projects/Langflow Blog Writter.json

@@ -278,7 +278,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Interaction Panel.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Playground.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -422,7 +422,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a chat message in the Interaction Panel.",
+            "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
             "base_classes": [
               "Text",
@@ -836,7 +836,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextInput(TextComponent):\n    display_name = \"Text Input\"\n    description = \"Get text inputs from the Interaction Panel.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as input.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Optional[str] = \"\",\n        record_template: Optional[str] = \"\",\n    ) -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
+                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextInput(TextComponent):\n    display_name = \"Text Input\"\n    description = \"Get text inputs from the Playground.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as input.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Optional[str] = \"\",\n        record_template: Optional[str] = \"\",\n    ) -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -894,7 +894,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Get text inputs from the Interaction Panel.",
+            "description": "Get text inputs from the Playground.",
             "icon": "type",
             "base_classes": [
               "object",

src/backend/base/langflow/initial_setup/starter_projects/Langflow Document QA.json

@@ -277,7 +277,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Interaction Panel.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Playground.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -398,7 +398,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Get chat inputs from the Interaction Panel.",
+            "description": "Get chat inputs from the Playground.",
             "icon": "ChatInput",
             "base_classes": [
               "str",
@@ -453,7 +453,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Interaction Panel.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Playground.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -575,7 +575,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a chat message in the Interaction Panel.",
+            "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
             "base_classes": [
               "str",

src/backend/base/langflow/initial_setup/starter_projects/Langflow Memory Conversation.json

@@ -22,7 +22,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Interaction Panel.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Playground.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -144,7 +144,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Get chat inputs from the Interaction Panel.",
+            "description": "Get chat inputs from the Playground.",
             "icon": "ChatInput",
             "base_classes": [
               "Text",
@@ -199,7 +199,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Interaction Panel.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Playground.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -322,7 +322,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a chat message in the Interaction Panel.",
+            "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
             "base_classes": [
               "Text",
@@ -1032,7 +1032,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextOutput(TextComponent):\n    display_name = \"Text Output\"\n    description = \"Display a text output in the Interaction Panel.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as output.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(self, input_value: Optional[Text] = \"\", record_template: str = \"\") -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
+                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextOutput(TextComponent):\n    display_name = \"Text Output\"\n    description = \"Display a text output in the Playground.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as output.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(self, input_value: Optional[Text] = \"\", record_template: str = \"\") -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -1067,7 +1067,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a text output in the Interaction Panel.",
+            "description": "Display a text output in the Playground.",
             "icon": "type",
             "base_classes": [
               "str",

src/backend/base/langflow/initial_setup/starter_projects/Langflow Prompt Chaining.json

@@ -256,7 +256,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Interaction Panel.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Playground.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -400,7 +400,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a chat message in the Interaction Panel.",
+            "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
             "base_classes": [
               "object",
@@ -452,7 +452,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Interaction Panel.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Playground.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -596,7 +596,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a chat message in the Interaction Panel.",
+            "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
             "base_classes": [
               "object",
@@ -647,7 +647,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextInput(TextComponent):\n    display_name = \"Text Input\"\n    description = \"Get text inputs from the Interaction Panel.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as input.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Optional[Text] = \"\",\n        record_template: Optional[str] = \"\",\n    ) -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
+                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextInput(TextComponent):\n    display_name = \"Text Input\"\n    description = \"Get text inputs from the Playground.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as input.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Optional[Text] = \"\",\n        record_template: Optional[str] = \"\",\n    ) -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -705,7 +705,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Get text inputs from the Interaction Panel.",
+            "description": "Get text inputs from the Playground.",
             "icon": "type",
             "base_classes": [
               "str",
@@ -778,7 +778,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextOutput(TextComponent):\n    display_name = \"Text Output\"\n    description = \"Display a text output in the Interaction Panel.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as output.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(self, input_value: Optional[Text] = \"\", record_template: str = \"\") -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
+                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextOutput(TextComponent):\n    display_name = \"Text Output\"\n    description = \"Display a text output in the Playground.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as output.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(self, input_value: Optional[Text] = \"\", record_template: str = \"\") -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -813,7 +813,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a text output in the Interaction Panel.",
+            "description": "Display a text output in the Playground.",
             "icon": "type",
             "base_classes": [
               "str",
@@ -1165,7 +1165,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextOutput(TextComponent):\n    display_name = \"Text Output\"\n    description = \"Display a text output in the Interaction Panel.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as output.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(self, input_value: Optional[Text] = \"\", record_template: str = \"\") -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
+                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextOutput(TextComponent):\n    display_name = \"Text Output\"\n    description = \"Display a text output in the Playground.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as output.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(self, input_value: Optional[Text] = \"\", record_template: str = \"\") -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -1200,7 +1200,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a text output in the Interaction Panel.",
+            "description": "Display a text output in the Playground.",
             "icon": "type",
             "base_classes": [
               "str",

src/backend/base/langflow/initial_setup/starter_projects/VectorStore-RAG-Flows.json

@@ -20,7 +20,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Interaction Panel.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Playground.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -141,7 +141,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Get chat inputs from the Interaction Panel.",
+            "description": "Get chat inputs from the Playground.",
             "icon": "ChatInput",
             "base_classes": [
               "Text",
@@ -214,7 +214,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextOutput(TextComponent):\n    display_name = \"Text Output\"\n    description = \"Display a text output in the Interaction Panel.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as output.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(self, input_value: Optional[Text] = \"\", record_template: str = \"\") -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
+                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextOutput(TextComponent):\n    display_name = \"Text Output\"\n    description = \"Display a text output in the Playground.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as output.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(self, input_value: Optional[Text] = \"\", record_template: str = \"\") -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -249,7 +249,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a text output in the Interaction Panel.",
+            "description": "Display a text output in the Playground.",
             "icon": "type",
             "base_classes": [
               "object",
@@ -1256,7 +1256,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Interaction Panel.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Playground.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -1400,7 +1400,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a chat message in the Interaction Panel.",
+            "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
             "base_classes": [
               "object",

src/backend/base/langflow/services/store/service.py

@@ -49,6 +49,27 @@ async def user_data_context(store_service: "StoreService", api_key: Optional[str
         user_data_var.set(None)
 
 
+def get_id_from_search_string(search_string: str) -> Optional[str]:
+    """
+    Extracts the ID from a search string.
+
+    Args:
+        search_string (str): The search string to extract the ID from.
+
+    Returns:
+        Optional[str]: The extracted ID, or None if no ID is found.
+    """
+    possible_id = search_string
+    if "www.langflow.store/store/" in search_string:
+        possible_id = search_string.split("/")[-1]
+
+    try:
+        possible_id = str(UUID(search_string))
+    except ValueError:
+        possible_id = None
+    return possible_id
+
+
 class StoreService(Service):
     """This is a service that integrates langflow with the store which
     is a Directus instance. It allows to search, get and post components to
@@ -183,7 +204,10 @@ class StoreService(Service):
     ):
         filter_conditions = []
 
-        if search is not None:
+        if component_id is None:
+            component_id = get_id_from_search_string(search) if search else None
+
+        if search is not None and component_id is None:
             search_conditions = self.build_search_filter_conditions(search)
             filter_conditions.append(search_conditions)
 

src/frontend/src/App.css

@@ -96,6 +96,18 @@ body {
 }
 
 .custom-hover:hover {
-  background-color: rgba(99, 102, 241, 0.1); /* Medium indigo color with 20% opacity */
+  background-color: rgba(
+    99,
+    102,
+    241,
+    0.1
+  ); /* Medium indigo color with 20% opacity */
 }
 
+.json-view-playground .json-view {
+  background-color: #fff !important;
+}
+
+.json-view-flow .json-view {
+  background-color: #bbb !important;
+}

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

@@ -618,7 +618,7 @@ export default function ParameterComponent({
             <FloatComponent
               disabled={disabled}
               value={data.node?.template[name].value ?? ""}
-              rangeSpec={data.node?.template[name].rangeSpec}
+              rangeSpec={data.node?.template[name]?.rangeSpec}
               onChange={handleOnNewValue}
             />
           </div>

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

@@ -1,7 +1,9 @@
 import { useEffect, useState } from "react";
 import { getComponent, postLikeComponent } from "../../controllers/API";
 import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
+import IOModal from "../../modals/IOModal";
 import useAlertStore from "../../stores/alertStore";
+import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { storeComponent } from "../../types/store";
@@ -18,24 +20,30 @@ import {
   CardHeader,
   CardTitle,
 } from "../ui/card";
+import Loading from "../ui/loading";
 
 export default function CollectionCardComponent({
   data,
   authorized = true,
   disabled = false,
   button,
+  onClick,
   onDelete,
+  playground,
 }: {
   data: storeComponent;
   authorized?: boolean;
   disabled?: boolean;
+  onClick?: () => void;
   button?: JSX.Element;
+  playground?: boolean;
   onDelete?: () => void;
 }) {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setValidApiKey = useStoreStore((state) => state.updateValidApiKey);
+  const cleanFlowPool = useFlowStore((state) => state.CleanFlowPool);
   const isStore = false;
   const [loading, setLoading] = useState(false);
   const [loadingLike, setLoadingLike] = useState(false);
@@ -46,9 +54,39 @@ export default function CollectionCardComponent({
   const [downloads_count, setDownloads_count] = useState(
     data?.downloads_count ?? 0
   );
+  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
+  const getFlowById = useFlowsManagerStore((state) => state.getFlowById);
+  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
+  const setNodes = useFlowStore((state) => state.setNodes);
+  const setEdges = useFlowStore((state) => state.setEdges);
+  const [openPlayground, setOpenPlayground] = useState(false);
+  const setCurrentFlowId = useFlowsManagerStore(
+    (state) => state.setCurrentFlowId
+  );
+  const [loadingPlayground, setLoadingPlayground] = useState(false);
 
   const name = data.is_component ? "Component" : "Flow";
 
+  async function getFlowData() {
+    const res = await getComponent(data.id);
+    const newFlow = cloneFLowWithParent(res, res.id, data.is_component, true);
+    return newFlow;
+  }
+
+  useEffect(() => {
+    if (currentFlowId && playground) {
+      if (openPlayground) {
+        setNodes(currentFlow?.data?.nodes ?? [], true);
+        setEdges(currentFlow?.data?.edges ?? [], true);
+      } else {
+        setNodes([], true);
+        setEdges([], true);
+        cleanFlowPool();
+      }
+    }
+  }, [openPlayground]);
+
   useEffect(() => {
     if (data) {
       setLiked_by_user(data?.liked_by_user ?? false);
@@ -128,226 +166,325 @@ export default function CollectionCardComponent({
   }
 
   return (
-    <Card
-      className={cn(
-        "group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:shadow-md",
-        disabled ? "pointer-events-none opacity-50" : ""
-      )}
-    >
-      <div>
-        <CardHeader>
-          <div>
-            <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
-              <IconComponent
-                className={cn(
-                  "flex-shrink-0",
-                  data.is_component
-                    ? "mx-0.5 h-6 w-6 text-component-icon"
-                    : "h-7 w-7 flex-shrink-0 text-flow-icon"
-                )}
-                name={data.is_component ? "ToyBrick" : "Group"}
-              />
-              <ShadTooltip content={data.name}>
-                <div className="w-full truncate">{data.name}</div>
-              </ShadTooltip>
-              {data?.metadata !== undefined && (
-                <div className="flex gap-3">
-                  {data.private && (
-                    <ShadTooltip content="Private">
-                      <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                        <IconComponent name="Lock" className="h-4 w-4" />
-                      </span>
-                    </ShadTooltip>
+    <>
+      <Card
+        className={cn(
+          "group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:shadow-md",
+          disabled ? "pointer-events-none opacity-50" : "",
+          onClick ? "cursor-pointer" : ""
+        )}
+        onClick={onClick}
+      >
+        <div>
+          <CardHeader>
+            <div>
+              <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
+                <IconComponent
+                  className={cn(
+                    "flex-shrink-0",
+                    data.is_component
+                      ? "mx-0.5 h-6 w-6 text-component-icon"
+                      : "h-7 w-7 flex-shrink-0 text-flow-icon"
                   )}
-                  {!data.is_component && (
-                    <ShadTooltip content="Components">
+                  name={data.is_component ? "ToyBrick" : "Group"}
+                />
+                <ShadTooltip content={data.name}>
+                  <div className="w-full truncate">{data.name}</div>
+                </ShadTooltip>
+                {data?.metadata !== undefined && (
+                  <div className="flex gap-3">
+                    {data.private && (
+                      <ShadTooltip content="Private">
+                        <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                          <IconComponent name="Lock" className="h-4 w-4" />
+                        </span>
+                      </ShadTooltip>
+                    )}
+                    {!data.is_component && (
+                      <ShadTooltip content="Components">
+                        <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                          <IconComponent name="ToyBrick" className="h-4 w-4" />
+                          <span data-testid={`total-${data.name}`}>
+                            {data?.metadata?.total ?? 0}
+                          </span>
+                        </span>
+                      </ShadTooltip>
+                    )}
+                    <ShadTooltip content="Likes">
                       <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                        <IconComponent name="ToyBrick" className="h-4 w-4" />
-                        <span data-testid={`total-${data.name}`}>
-                          {data?.metadata?.total ?? 0}
+                        <IconComponent
+                          name="Heart"
+                          className={cn("h-4 w-4 ")}
+                        />
+                        <span data-testid={`likes-${data.name}`}>
+                          {likes_count ?? 0}
                         </span>
                       </span>
                     </ShadTooltip>
-                  )}
-                  <ShadTooltip content="Likes">
-                    <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                      <IconComponent name="Heart" className={cn("h-4 w-4 ")} />
-                      <span data-testid={`likes-${data.name}`}>
-                        {likes_count ?? 0}
+                    <ShadTooltip content="Downloads">
+                      <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                        <IconComponent
+                          name="DownloadCloud"
+                          className="h-4 w-4"
+                        />
+                        <span data-testid={`downloads-${data.name}`}>
+                          {downloads_count ?? 0}
+                        </span>
                       </span>
-                    </span>
-                  </ShadTooltip>
-                  <ShadTooltip content="Downloads">
-                    <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                      <IconComponent name="DownloadCloud" className="h-4 w-4" />
-                      <span data-testid={`downloads-${data.name}`}>
-                        {downloads_count ?? 0}
-                      </span>
-                    </span>
-                  </ShadTooltip>
-                </div>
-              )}
+                    </ShadTooltip>
+                  </div>
+                )}
 
-              {onDelete && data?.metadata === undefined && (
-                <DeleteConfirmationModal
-                  onConfirm={() => {
-                    onDelete();
+                {onDelete && data?.metadata === undefined && (
+                  <DeleteConfirmationModal
+                    onConfirm={() => {
+                      onDelete();
+                    }}
+                  >
+                    <IconComponent
+                      name="Trash2"
+                      className="h-5 w-5 text-primary opacity-0 transition-all hover:text-destructive group-hover:opacity-100"
+                    />
+                  </DeleteConfirmationModal>
+                )}
+              </CardTitle>
+            </div>
+            <div className="flex gap-2">
+              {data.user_created && data.user_created.username && (
+                <span className="text-sm text-primary">
+                  by <b>{data.user_created.username}</b>
+                  {data.last_tested_version && (
+                    <>
+                      {" "}
+                      |{" "}
+                      <span className="text-xs">
+                        {" "}
+                        ⛓︎ v{data.last_tested_version}
+                      </span>
+                    </>
+                  )}
+                </span>
+              )}
+              <div className="flex w-full flex-1 flex-wrap gap-2">
+                {data.tags &&
+                  data.tags.length > 0 &&
+                  data.tags.map((tag, index) => (
+                    <Badge
+                      key={index}
+                      variant="outline"
+                      size="xq"
+                      className="text-muted-foreground"
+                    >
+                      {tag.name}
+                    </Badge>
+                  ))}
+              </div>
+            </div>
+
+            <CardDescription className="pb-2 pt-2">
+              <div className="truncate-doubleline">{data.description}</div>
+            </CardDescription>
+          </CardHeader>
+        </div>
+
+        <CardFooter>
+          <div className="flex w-full items-center justify-between gap-2">
+            <div className="flex w-full flex-wrap items-end justify-between gap-2">
+              {playground && data?.metadata !== undefined ? (
+                <Button
+                  disabled={loadingPlayground}
+                  key={data.id}
+                  tabIndex={-1}
+                  variant="outline"
+                  size="sm"
+                  className="gap-2 whitespace-nowrap"
+                  data-testid={"playground-flow-button-" + data.id}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setLoadingPlayground(true);
+                    if (getFlowById(data.id)) {
+                      setCurrentFlowId(data.id);
+                      setOpenPlayground(true);
+                      setLoadingPlayground(false);
+                    } else {
+                      getFlowData().then((res) => {
+                        setCurrentFlow(res);
+                        setOpenPlayground(true);
+                        setLoadingPlayground(false);
+                      });
+                    }
                   }}
                 >
-                  <IconComponent
-                    name="Trash2"
-                    className="h-5 w-5 text-primary opacity-0 transition-all hover:text-destructive group-hover:opacity-100"
-                  />
-                </DeleteConfirmationModal>
+                  {!loadingPlayground ? (
+                    <IconComponent
+                      name="BotMessageSquareIcon"
+                      className="h-4 w-4 select-none"
+                    />
+                  ) : (
+                    <Loading className="h-4 w-4 text-medium-indigo" />
+                  )}
+                  Playground
+                </Button>
+              ) : (
+                <div></div>
               )}
-            </CardTitle>
-          </div>
-          {data.user_created && data.user_created.username && (
-            <span className="text-sm text-primary">
-              by <b>{data.user_created.username}</b>
-              {data.last_tested_version && (
-                <>
-                  {" "}
-                  |{" "}
-                  <span className="text-xs">
-                    {" "}
-                    ⛓︎ v{data.last_tested_version}
-                  </span>
-                </>
-              )}
-            </span>
-          )}
-
-          <CardDescription className="pb-2 pt-2">
-            <div className="truncate-doubleline">{data.description}</div>
-          </CardDescription>
-        </CardHeader>
-      </div>
-
-      <CardFooter>
-        <div className="flex w-full items-center justify-between gap-2">
-          <div className="flex w-full flex-wrap items-end justify-between gap-2">
-            <div className="flex w-full flex-1 flex-wrap gap-2">
-              {data.tags &&
-                data.tags.length > 0 &&
-                data.tags.map((tag, index) => (
-                  <Badge
-                    key={index}
-                    variant="outline"
-                    size="xq"
-                    className="text-muted-foreground"
-                  >
-                    {tag.name}
-                  </Badge>
-                ))}
-            </div>
-            {data.liked_by_count != undefined && (
-              <div className="flex gap-0.5">
-                {onDelete && data?.metadata !== undefined ? (
-                  <ShadTooltip
-                    content={
-                      authorized ? "Delete" : "Please review your API key."
-                    }
-                  >
-                    <DeleteConfirmationModal
-                      onConfirm={() => {
-                        onDelete();
-                      }}
+              {data.liked_by_count != undefined && (
+                <div className="flex gap-0.5">
+                  {onDelete && data?.metadata !== undefined ? (
+                    <ShadTooltip
+                      content={
+                        authorized ? "Delete" : "Please review your API key."
+                      }
+                    >
+                      <DeleteConfirmationModal
+                        onConfirm={() => {
+                          onDelete();
+                        }}
+                      >
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className={
+                            "whitespace-nowrap" +
+                            (!authorized ? " cursor-not-allowed" : "")
+                          }
+                        >
+                          <IconComponent
+                            name="Trash2"
+                            className={cn(
+                              "h-5 w-5",
+                              !authorized ? " text-ring" : ""
+                            )}
+                          />
+                        </Button>
+                      </DeleteConfirmationModal>
+                    </ShadTooltip>
+                  ) : (
+                    <ShadTooltip
+                      content={
+                        authorized ? "Like" : "Please review your API key."
+                      }
                     >
                       <Button
+                        disabled={loadingLike}
                         variant="ghost"
                         size="icon"
                         className={
                           "whitespace-nowrap" +
                           (!authorized ? " cursor-not-allowed" : "")
                         }
+                        onClick={() => {
+                          if (!authorized) {
+                            return;
+                          }
+                          handleLike();
+                        }}
+                        data-testid={`like-${data.name}`}
                       >
                         <IconComponent
-                          name="Trash2"
+                          name="Heart"
                           className={cn(
                             "h-5 w-5",
+                            liked_by_user
+                              ? "fill-destructive stroke-destructive"
+                              : "",
                             !authorized ? " text-ring" : ""
                           )}
                         />
                       </Button>
-                    </DeleteConfirmationModal>
-                  </ShadTooltip>
-                ) : (
+                    </ShadTooltip>
+                  )}
                   <ShadTooltip
                     content={
-                      authorized ? "Like" : "Please review your API key."
+                      authorized
+                        ? isStore
+                          ? "Download"
+                          : "Install Locally"
+                        : "Please review your API key."
                     }
                   >
                     <Button
-                      disabled={loadingLike}
+                      disabled={loading}
                       variant="ghost"
                       size="icon"
                       className={
                         "whitespace-nowrap" +
-                        (!authorized ? " cursor-not-allowed" : "")
+                        (!authorized ? " cursor-not-allowed" : "") +
+                        (!loading ? " p-0.5" : "")
                       }
                       onClick={() => {
-                        if (!authorized) {
+                        if (loading || !authorized) {
                           return;
                         }
-                        handleLike();
+                        handleInstall();
                       }}
-                      data-testid={`like-${data.name}`}
+                      data-testid={`install-${data.name}`}
                     >
                       <IconComponent
-                        name="Heart"
+                        name={
+                          loading ? "Loader2" : isStore ? "Download" : "Plus"
+                        }
                         className={cn(
-                          "h-5 w-5",
-                          liked_by_user
-                            ? "fill-destructive stroke-destructive"
-                            : "",
+                          loading ? "h-5 w-5 animate-spin" : "h-5 w-5",
                           !authorized ? " text-ring" : ""
                         )}
                       />
                     </Button>
                   </ShadTooltip>
-                )}
-                <ShadTooltip
-                  content={
-                    authorized
-                      ? isStore
-                        ? "Download"
-                        : "Install Locally"
-                      : "Please review your API key."
-                  }
-                >
-                  <Button
-                    disabled={loading}
-                    variant="ghost"
-                    size="icon"
-                    className={
-                      "whitespace-nowrap" +
-                      (!authorized ? " cursor-not-allowed" : "") +
-                      (!loading ? " p-0.5" : "")
+                </div>
+              )}
+              {button && button}
+              {playground && data?.metadata === undefined && (
+                <Button
+                  disabled={loadingPlayground}
+                  key={data.id}
+                  tabIndex={-1}
+                  variant="outline"
+                  size="sm"
+                  className="gap-2 whitespace-nowrap"
+                  data-testid={"playground-flow-button-" + data.id}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setLoadingPlayground(true);
+                    if (getFlowById(data.id)) {
+                      setCurrentFlowId(data.id);
+                      setOpenPlayground(true);
+                      setLoadingPlayground(false);
+                    } else {
+                      getFlowData().then((res) => {
+                        setCurrentFlow(res);
+                        setOpenPlayground(true);
+                        setLoadingPlayground(false);
+                      });
                     }
-                    onClick={() => {
-                      if (loading || !authorized) {
-                        return;
-                      }
-                      handleInstall();
-                    }}
-                    data-testid={`install-${data.name}`}
-                  >
+                  }}
+                >
+                  {!loadingPlayground ? (
                     <IconComponent
-                      name={loading ? "Loader2" : isStore ? "Download" : "Plus"}
-                      className={cn(
-                        loading ? "h-5 w-5 animate-spin" : "h-5 w-5",
-                        !authorized ? " text-ring" : ""
-                      )}
+                      name="BotMessageSquareIcon"
+                      className="h-4 w-4 select-none"
                     />
-                  </Button>
-                </ShadTooltip>
-              </div>
-            )}
-            {button && button}
+                  ) : (
+                    <Loading className="h-4 w-4 text-medium-indigo" />
+                  )}
+                  Playground
+                </Button>
+              )}
+            </div>
           </div>
-        </div>
-      </CardFooter>
-    </Card>
+        </CardFooter>
+      </Card>
+      {openPlayground && (
+        <IOModal
+          cleanOnClose={true}
+          open={openPlayground}
+          setOpen={setOpenPlayground}
+        >
+          <></>
+        </IOModal>
+      )}
+    </>
   );
 }

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

@@ -87,15 +87,15 @@ export default function FlowToolbar(): JSX.Element {
           }
         >
           <div className="flex">
-            <div className="flex h-full w-full  gap-1 rounded-sm text-medium-indigo transition-all">
+            <div className="flex h-full w-full  gap-1 rounded-sm transition-all">
               {hasIO ? (
                 <IOModal open={open} setOpen={setOpen} disable={!hasIO}>
-                  <div className="relative inline-flex w-full items-center justify-center   gap-1 px-5 py-3 text-sm font-semibold text-medium-indigo transition-all transition-all duration-500 ease-in-out ease-in-out hover:bg-hover">
+                  <div className="relative inline-flex w-full items-center justify-center   gap-1 px-5 py-3 text-sm font-semibold transition-all duration-500 ease-in-out hover:bg-hover">
                     <ForwardedIconComponent
-                      name="Zap"
-                      className={"message-button-icon h-5 w-5 transition-all"}
+                      name="BotMessageSquareIcon"
+                      className={" h-5 w-5 transition-all"}
                     />
-                    Run
+                    Playground
                   </div>
                 </IOModal>
               ) : (

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

@@ -267,7 +267,7 @@ export default function CodeTabsComponent({
                                               <div className="mx-auto">
                                                 {node.data.node.template[
                                                   templateField
-                                                ].list ? (
+                                                ]?.list ? (
                                                   <InputListComponent
                                                     componentName={
                                                       templateField
@@ -733,7 +733,7 @@ export default function CodeTabsComponent({
                                                   isList={
                                                     node.data.node!.template[
                                                       templateField
-                                                    ].list ?? false
+                                                    ]?.list ?? false
                                                   }
                                                 />
                                               </div>

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

@@ -12,6 +12,7 @@ export default function InputListComponent({
   disabled,
   editNode = false,
   componentName,
+  playgroundDisabled,
 }: InputListComponentType): JSX.Element {
   useEffect(() => {
     if (disabled && value.length > 0 && value[0] !== "") {
@@ -24,7 +25,7 @@ export default function InputListComponent({
     value = [value];
   }
 
-  if (!value.length) value = [""];
+  if (!value?.length) value = [""];
 
   return (
     <div
@@ -37,7 +38,7 @@ export default function InputListComponent({
         return (
           <div key={idx} className="flex w-full gap-3">
             <Input
-              disabled={disabled}
+              disabled={disabled || playgroundDisabled}
               type="text"
               value={singleValue}
               className={editNode ? "input-edit-node" : ""}
@@ -64,6 +65,7 @@ export default function InputListComponent({
                     editNode ? "-edit" : ""
                   }_${componentName}-` + idx
                 }
+                disabled={disabled || playgroundDisabled}
               >
                 <IconComponent
                   name="Plus"
@@ -82,10 +84,15 @@ export default function InputListComponent({
                   newInputList.splice(idx, 1);
                   onChange(newInputList);
                 }}
+                disabled={disabled || playgroundDisabled}
               >
                 <IconComponent
                   name="X"
-                  className="h-4 w-4 hover:text-status-red"
+                  className={`h-4 w-4 ${
+                    disabled || playgroundDisabled
+                      ? ""
+                      : "hover:text-accent-foreground"
+                  }`}
                 />
               </button>
             )}

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

@@ -20,7 +20,13 @@ export default function KeypairListComponent({
     }
   }, [disabled]);
 
-  const ref = useRef(value.length === 0 ? [{ "": "" }] : value);
+  const checkValueType = (value) => {
+    return Array.isArray(value) ? value : [value];
+  };
+
+  const ref = useRef<any>([]);
+  ref.current =
+    !value || value?.length === 0 ? [{ "": "" }] : checkValueType(value);
 
   useEffect(() => {
     if (JSON.stringify(value) !== JSON.stringify(ref.current)) {

src/frontend/src/constants/constants.ts

@@ -711,13 +711,22 @@ export const LANGFLOW_SUPPORTED_TYPES = new Set([
 
 export const priorityFields = new Set(["code", "template"]);
 
-export const INPUT_TYPES = new Set(["ChatInput", "TextInput", "KeyPairInput"]);
+export const INPUT_TYPES = new Set([
+  "ChatInput",
+  "TextInput",
+  "KeyPairInput",
+  "JsonInput",
+  "StringListInput",
+]);
 export const OUTPUT_TYPES = new Set([
   "ChatOutput",
   "TextOutput",
   "PDFOutput",
   "ImageOutput",
   "CSVOutput",
+  "JsonOutput",
+  "KeyPairOutput",
+  "StringListOutput",
 ]);
 
 export const CHAT_FIRST_INITIAL_TEXT =

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

@@ -1,5 +1,5 @@
-import { AxiosResponse } from "axios";
-import { ReactFlowJsonObject } from "reactflow";
+import { AxiosRequestConfig, AxiosResponse } from "axios";
+import { Edge, ReactFlowJsonObject,Node } from "reactflow";
 import { BASE_URL_API } from "../../constants/constants";
 import { api } from "../../controllers/API/api";
 import {
@@ -908,17 +908,26 @@ export async function updateGlobalVariable(
 export async function getVerticesOrder(
   flowId: string,
   startNodeId?: string | null,
-  stopNodeId?: string | null
+  stopNodeId?: string | null,
+  nodes?:Node[],
+  Edges?:Edge[]
 ): Promise<AxiosResponse<VerticesOrderTypeAPI>> {
   // nodeId is optional and is a query parameter
   // if nodeId is not provided, the API will return all vertices
-  const config = {};
+  const config:AxiosRequestConfig<any> = {};
   if (stopNodeId) {
     config["params"] = { stop_component_id: stopNodeId };
   } else if (startNodeId) {
     config["params"] = { start_component_id: startNodeId };
   }
-  return await api.get(`${BASE_URL_API}build/${flowId}/vertices`, config);
+  const data = {
+    data:{}
+  }
+  if(nodes && Edges){
+    data["data"]["nodes"] = nodes
+    data["data"]["edges"] = Edges
+  }
+  return await api.post(`${BASE_URL_API}build/${flowId}/vertices`,data, config);
 }
 
 export async function postBuildVertex(

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

@@ -203,7 +203,7 @@ const EditNodeModal = forwardRef(
                                 !myData.node.template[templateParam].options ? (
                                   <div className="mx-auto">
                                     {myData.node.template[templateParam]
-                                      .list ? (
+                                      ?.list ? (
                                       <InputListComponent
                                         componentName={templateParam}
                                         editNode={true}
@@ -345,7 +345,7 @@ const EditNodeModal = forwardRef(
                                       }}
                                       isList={
                                         data.node?.template[templateParam]
-                                          .list ?? false
+                                          ?.list ?? false
                                       }
                                     />
                                   </div>
@@ -420,6 +420,10 @@ const EditNodeModal = forwardRef(
                                     .type === "int" ? (
                                   <div className="mx-auto">
                                     <IntComponent
+                                      rangeSpec={
+                                        data.node?.template[templateParam]
+                                          ?.rangeSpec
+                                      }
                                       id={
                                         "edit-int-input-" +
                                         myData.node.template[templateParam].name

src/frontend/src/modals/IOModal/components/IOFieldView/components/JSONInput/index.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from "react";
+import JsonView from "react18-json-view";
+import { useDarkStore } from "../../../../../../stores/darkStore";
+import { DictComponentType } from "../../../../../../types/components";
+
+export default function IoJsonInput({
+  value = [],
+  onChange,
+  left,
+  output,
+}: DictComponentType): JSX.Element {
+  useEffect(() => {
+    if (value) onChange(value);
+  }, [value]);
+  const isDark = useDarkStore((state) => state.dark);
+
+  const ref = useRef<any>(null);
+  ref.current = value;
+
+  const getClassNames = () => {
+    if (!isDark && !left) return "json-view-playground-white";
+    if (!isDark && left) return "json-view-playground-white-left";
+    if (isDark && left) return "json-view-playground-dark-left";
+    if (isDark && !left) return "json-view-playground-dark";
+  };
+
+  return (
+    <div className="w-full">
+      <JsonView
+        className={getClassNames()}
+        theme="vscode"
+        dark={isDark}
+        editable={!output}
+        enableClipboard
+        onEdit={(edit) => {
+          ref.current = edit["src"];
+        }}
+        onChange={(edit) => {
+          ref.current = edit["src"];
+        }}
+        src={ref.current}
+      />
+    </div>
+  );
+}

src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx

@@ -0,0 +1,107 @@
+import _ from "lodash";
+import { useRef } from "react";
+import IconComponent from "../../../../../../components/genericIconComponent";
+import { Input } from "../../../../../../components/ui/input";
+import { classNames } from "../../../../../../utils/utils";
+
+export type IOKeyPairInputProps = {
+  value: any;
+  onChange: (value: any) => void;
+  duplicateKey: boolean;
+  isList: boolean;
+  isInputField?: boolean;
+};
+
+const IOKeyPairInput = ({
+  value,
+  onChange,
+  duplicateKey,
+  isList = true,
+  isInputField,
+}: IOKeyPairInputProps) => {
+  const checkValueType = (value) => {
+    return Array.isArray(value) ? value : [value];
+  };
+
+  const ref = useRef<any>([]);
+  ref.current =
+    !value || value?.length === 0 ? [{ "": "" }] : checkValueType(value);
+
+  const handleChangeKey = (event, idx) => {
+    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 key = Object.keys(ref.current[idx])[0];
+    ref.current[idx][key] = newValue;
+    onChange(ref.current);
+  };
+
+  return (
+    <>
+      <div className={classNames("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-2">
+                <Input
+                  type="text"
+                  value={key.trim()}
+                  className={classNames(duplicateKey ? "input-invalid" : "")}
+                  placeholder="Type key..."
+                  onChange={(event) => handleChangeKey(event, index)}
+                  disabled={!isInputField}
+                />
+
+                <Input
+                  type="text"
+                  value={obj[key]}
+                  placeholder="Type a value..."
+                  onChange={(event) =>
+                    handleChangeValue(event.target.value, index)
+                  }
+                  disabled={!isInputField}
+                />
+
+                {isList && isInputField && index === ref.current.length - 1 ? (
+                  <button
+                    onClick={() => {
+                      let newInputList = _.cloneDeep(ref.current);
+                      newInputList.push({ "": "" });
+                      onChange(newInputList);
+                    }}
+                  >
+                    <IconComponent
+                      name="Plus"
+                      className={"h-4 w-4 hover:text-accent-foreground"}
+                    />
+                  </button>
+                ) : isList && isInputField ? (
+                  <button
+                    onClick={() => {
+                      let newInputList = _.cloneDeep(ref.current);
+                      newInputList.splice(index, 1);
+                      onChange(newInputList);
+                    }}
+                  >
+                    <IconComponent
+                      name="X"
+                      className="h-4 w-4 hover:text-status-red"
+                    />
+                  </button>
+                ) : (
+                  ""
+                )}
+              </div>
+            );
+          });
+        })}
+      </div>
+    </>
+  );
+};
+
+export default IOKeyPairInput;

src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx

@@ -1,6 +1,8 @@
 import { cloneDeep } from "lodash";
+import { useState } from "react";
 import ImageViewer from "../../../../components/ImageViewer";
 import CsvOutputComponent from "../../../../components/csvOutputComponent";
+import InputListComponent from "../../../../components/inputListComponent";
 import PdfViewer from "../../../../components/pdfViewer";
 import {
   Select,
@@ -15,7 +17,13 @@ import { PDFViewConstant } from "../../../../constants/constants";
 import { InputOutput } from "../../../../constants/enums";
 import useFlowStore from "../../../../stores/flowStore";
 import { IOFieldViewProps } from "../../../../types/components";
+import {
+  convertValuesToNumbers,
+  hasDuplicateKeys,
+} from "../../../../utils/reactflowUtils";
 import IOFileInput from "./components/FileInput";
+import IoJsonInput from "./components/JSONInput";
+import IOKeyPairInput from "./components/keyPairInput";
 
 export default function IOFieldView({
   type,
@@ -39,6 +47,7 @@ export default function IOFieldView({
       }
     }
   };
+  const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
 
   function handleOutputType() {
     if (!node) return <>"No node found!"</>;
@@ -78,6 +87,57 @@ export default function IOFieldView({
               />
             );
 
+          case "KeyPairInput":
+            return (
+              <IOKeyPairInput
+                value={node.data.node!.template["input_value"]?.value}
+                onChange={(e) => {
+                  if (node) {
+                    let newNode = cloneDeep(node);
+                    newNode.data.node!.template["input_value"].value = e;
+                    setNode(node.id, newNode);
+                  }
+                  const valueToNumbers = convertValuesToNumbers(e);
+                  setErrorDuplicateKey(hasDuplicateKeys(valueToNumbers));
+                }}
+                duplicateKey={errorDuplicateKey}
+                isList={node.data.node!.template["input_value"]?.list ?? false}
+                isInputField
+              />
+            );
+
+          case "JsonInput":
+            return (
+              <IoJsonInput
+                value={node.data.node!.template["input_value"]?.value}
+                onChange={(e) => {
+                  if (node) {
+                    let newNode = cloneDeep(node);
+                    newNode.data.node!.template["input_value"].value = e;
+                    setNode(node.id, newNode);
+                  }
+                }}
+                left={left}
+              />
+            );
+
+          case "StringListInput":
+            return (
+              <>
+                <InputListComponent
+                  value={node.data.node!.template["input_value"]?.value}
+                  onChange={(e) => {
+                    if (node) {
+                      let newNode = cloneDeep(node);
+                      newNode.data.node!.template["input_value"].value = e;
+                      setNode(node.id, newNode);
+                    }
+                  }}
+                  disabled={false}
+                />
+              </>
+            );
+
           default:
             return (
               <Textarea
@@ -169,6 +229,58 @@ export default function IOFieldView({
               />
             );
 
+          case "JsonOutput":
+            return (
+              <IoJsonInput
+                value={node.data.node!.template["input_value"]?.value}
+                onChange={(e) => {
+                  if (node) {
+                    let newNode = cloneDeep(node);
+                    newNode.data.node!.template["input_value"].value = e;
+                    setNode(node.id, newNode);
+                  }
+                }}
+                left={left}
+                output
+              />
+            );
+
+          case "KeyPairOutput":
+            return (
+              <IOKeyPairInput
+                value={node.data.node!.template["input_value"]?.value}
+                onChange={(e) => {
+                  if (node) {
+                    let newNode = cloneDeep(node);
+                    newNode.data.node!.template["input_value"].value = e;
+                    setNode(node.id, newNode);
+                  }
+                  const valueToNumbers = convertValuesToNumbers(e);
+                  setErrorDuplicateKey(hasDuplicateKeys(valueToNumbers));
+                }}
+                duplicateKey={errorDuplicateKey}
+                isList={node.data.node!.template["input_value"]?.list ?? false}
+              />
+            );
+
+          case "StringListOutput":
+            return (
+              <>
+                <InputListComponent
+                  value={node.data.node!.template["input_value"]?.value}
+                  onChange={(e) => {
+                    if (node) {
+                      let newNode = cloneDeep(node);
+                      newNode.data.node!.template["input_value"].value = e;
+                      setNode(node.id, newNode);
+                    }
+                  }}
+                  playgroundDisabled
+                  disabled={false}
+                />
+              </>
+            );
+
           default:
             return (
               <Textarea

src/frontend/src/modals/IOModal/index.tsx

@@ -83,12 +83,6 @@ export default function IOModal({
     return updateVerticesOrder(currentFlow!.id, null);
   }
 
-  useEffect(() => {
-    if (open) {
-      updateVertices();
-    }
-  }, [open, currentFlow]);
-
   async function sendMessage(count = 1): Promise<void> {
     if (isBuilding) return;
     setIsBuilding(true);
@@ -132,9 +126,9 @@ export default function IOModal({
       {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
       <BaseModal.Header description={CHAT_FORM_DIALOG_SUBTITLE}>
         <div className="flex items-center">
-          <span className="pr-2">Interaction Panel</span>
+          <span className="pr-2">Playground</span>
           <IconComponent
-            name="prompts"
+            name="BotMessageSquareIcon"
             className="h-6 w-6 pl-1 text-foreground"
             aria-hidden="true"
           />

src/frontend/src/modals/StoreApiKeyModal/index.tsx

@@ -86,6 +86,7 @@ export default function StoreApiKeyModal({
         <Form.Root
           onSubmit={(event) => {
             event.preventDefault();
+            handleSaveKey();
           }}
         >
           <div className="grid gap-5">
@@ -131,9 +132,6 @@ export default function StoreApiKeyModal({
                 <Button
                   data-testid="api-key-save-button-store"
                   className="mt-8"
-                  onClick={() => {
-                    handleSaveKey();
-                  }}
                 >
                   Save
                 </Button>

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

@@ -11,6 +11,7 @@ import "react18-json-view/src/style.css";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { CODE_DICT_DIALOG_SUBTITLE } from "../../constants/constants";
+import { useDarkStore } from "../../stores/darkStore";
 import BaseModal from "../baseModal";
 
 export default function DictAreaModal({
@@ -19,7 +20,7 @@ export default function DictAreaModal({
   value,
 }): JSX.Element {
   const [open, setOpen] = useState(false);
-
+  const isDark = useDarkStore((state) => state.dark);
   const ref = useRef(value);
 
   useEffect(() => {
@@ -41,7 +42,8 @@ export default function DictAreaModal({
         <div className="flex h-full w-full flex-col transition-all ">
           <JsonView
             theme="vscode"
-            dark={true}
+            dark={isDark}
+            className={!isDark ? "json-view-white" : "json-view-dark"}
             editable
             enableClipboard
             onEdit={(edit) => {

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

@@ -6,18 +6,25 @@ import { useDarkStore } from "../../stores/darkStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import Page from "./components/PageComponent";
 import ExtraSidebar from "./components/extraSidebarComponent";
+import useFlowStore from "../../stores/flowStore";
 
 export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId
   );
   const version = useDarkStore((state) => state.version);
+  const setOnFlowPage = useFlowStore((state) => state.setOnFlowPage);
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const { id } = useParams();
 
   // Set flow tab id
   useEffect(() => {
     setCurrentFlowId(id!);
+    setOnFlowPage(true);
+    
+    return () => {
+      setOnFlowPage(false);
+    };
   }, [id]);
   return (
     <>

src/frontend/src/pages/MainPage/components/components/index.tsx

@@ -14,7 +14,6 @@ import {
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { FlowType } from "../../../../types/flow";
-
 export default function ComponentsComponent({
   is_component = true,
 }: {
@@ -144,6 +143,7 @@ export default function ComponentsComponent({
                     key={idx}
                     data={{ is_component: item.is_component ?? false, ...item }}
                     disabled={isLoading}
+                    data-testid={"edit-flow-button-" + item.id + "-" + idx}
                     button={
                       !is_component ? (
                         <Link to={"/flow/" + item.id}>
@@ -167,6 +167,14 @@ export default function ComponentsComponent({
                         <></>
                       )
                     }
+                    onClick={
+                      !is_component
+                        ? () => {
+                            navigate("/flow/" + item.id);
+                          }
+                        : undefined
+                    }
+                    playground={!is_component}
                   />
                 ))
               ) : (

src/frontend/src/pages/Playground/index.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { getComponent } from "../../controllers/API";
+import cloneFLowWithParent from "../../utils/storeUtils";
+import LoadingComponent from "../../components/loadingComponent";
+import useFlowStore from "../../stores/flowStore";
+import IOModal from "../../modals/IOModal";
+
+export default function PlaygroundPage() {
+    const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+    const getFlowById = useFlowsManagerStore((state) => state.getFlowById);
+    const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
+    const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
+    const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
+    const setNodes = useFlowStore((state) => state.setNodes);
+    const setEdges = useFlowStore((state) => state.setEdges);
+    const cleanFlowPool = useFlowStore((state) => state.CleanFlowPool);
+
+    const { id } = useParams();
+    const [loading, setLoading] = useState(true);
+    async function getFlowData() {
+        const res = await getComponent(id!);
+        const newFlow = cloneFLowWithParent(res, res.id, false, true);
+        return newFlow;
+    }
+
+    // Set flow tab id
+    useEffect(() => {
+        console.log("id", id);
+        if (getFlowById(id!)) {
+            setCurrentFlowId(id!);
+        }
+        else {
+            getFlowData().then((flow) => {
+                setCurrentFlow(flow);
+            });
+        }
+    }, [id]);
+
+    useEffect(() => {
+        if (currentFlow) {
+            setNodes(currentFlow?.data?.nodes ?? [], true);
+            setEdges(currentFlow?.data?.edges ?? [], true);
+            cleanFlowPool();
+            setLoading(false);
+        }
+        return () => {
+            setNodes([], true);
+            setEdges([], true);
+            cleanFlowPool();
+        };
+    }, [currentFlow]);
+
+
+    return (
+        <div className="w-full h-full flex flex-col align-middle items-center justify-center">
+            {loading ? <div><LoadingComponent remSize={24}></LoadingComponent></div> :
+                <IOModal open={true}setOpen={()=>{}} isPlayground>
+                    <></>
+                </IOModal>}
+        </div>
+    )
+}

src/frontend/src/pages/StorePage/index.tsx

@@ -9,7 +9,7 @@ import { SkeletonCardComponent } from "../../components/skeletonCardComponent";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 
-import { Link, useParams } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 import { TagsSelector } from "../../components/tagsSelectorComponent";
 import { Badge } from "../../components/ui/badge";
 import {
@@ -65,6 +65,8 @@ export default function StorePage(): JSX.Element {
   const [searchNow, setSearchNow] = useState("");
   const [selectFilter, setSelectFilter] = useState("all");
 
+  const navigate = useNavigate();
+
   useEffect(() => {
     if (!loadingApiKey) {
       if (!hasApiKey) {
@@ -371,6 +373,10 @@ export default function StorePage(): JSX.Element {
                       data={item}
                       authorized={validApiKey}
                       disabled={loading}
+                      playground={
+                        item.last_tested_version?.includes("1.0.0") &&
+                        !item.is_component
+                      }
                     />
                   </>
                 );

src/frontend/src/routes.tsx

@@ -16,6 +16,7 @@ import ViewPage from "./pages/ViewPage";
 import DeleteAccountPage from "./pages/deleteAccountPage";
 import LoginPage from "./pages/loginPage";
 import SignUp from "./pages/signUpPage";
+import PlaygroundPage from "./pages/Playground";
 
 const Router = () => {
   return (
@@ -58,7 +59,13 @@ const Router = () => {
           </ProtectedRoute>
         }
       />
-
+      <Route path="/playground/:id/">
+        element={
+          <Route path="" element={<ProtectedRoute>
+            <PlaygroundPage />
+          </ProtectedRoute>} />
+        }
+      </Route>
       <Route path="/flow/:id/">
         <Route
           path=""

src/frontend/src/stores/flowStore.ts

@@ -44,9 +44,12 @@ import { getInputsAndOutputs } from "../utils/storeUtils";
 import useAlertStore from "./alertStore";
 import { useDarkStore } from "./darkStore";
 import useFlowsManagerStore from "./flowsManagerStore";
+import FlowPage from "../pages/FlowPage";
 
 // this is our useStore hook that we can use in our components to get parts of the store and call actions
 const useFlowStore = create<FlowStoreType>((set, get) => ({
+  onFlowPage: false,
+  setOnFlowPage:(FlowPage=>set({onFlowPage:FlowPage})),
   flowState: undefined,
   flowBuildStatus: {},
   nodes: [],
@@ -149,7 +152,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       edges: applyEdgeChanges(changes, get().edges),
     });
   },
-  setNodes: (change) => {
+  setNodes: (change,skipSave=false) => {
     let newChange = typeof change === "function" ? change(get().nodes) : change;
     let newEdges = cleanEdges(newChange, get().edges);
     const { inputs, outputs } = getInputsAndOutputs(newChange);
@@ -164,7 +167,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     });
 
     const flowsManager = useFlowsManagerStore.getState();
-    if (!get().isBuilding) {
+    if (!get().isBuilding && !skipSave && get().onFlowPage) {
       flowsManager.autoSaveCurrentFlow(
         newChange,
         newEdges,
@@ -172,7 +175,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       );
     }
   },
-  setEdges: (change) => {
+  setEdges: (change,skipSave=false) => {
     let newChange = typeof change === "function" ? change(get().edges) : change;
     set({
       edges: newChange,
@@ -180,7 +183,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     });
 
     const flowsManager = useFlowsManagerStore.getState();
-    if (!get().isBuilding) {
+    if (!get().isBuilding && !skipSave && get().onFlowPage) {
       flowsManager.autoSaveCurrentFlow(
         get().nodes,
         newChange,
@@ -565,6 +568,8 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
         useFlowStore.getState().updateBuildStatus(idList, BuildStatus.BUILDING);
       },
       onValidateNodes: validateSubgraph,
+      nodes: !get().onFlowPage ? get().nodes : undefined,
+      edges: !get().onFlowPage ? get().edges : undefined,
     });
     get().setIsBuilding(false);
     get().revertBuiltStatusFromBuilding();

src/frontend/src/stores/flowsManagerStore.ts

@@ -46,6 +46,16 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     set({ examples });
   },
   currentFlowId: "",
+  setCurrentFlow: (flow: FlowType) => {
+    set((state) => ({
+      currentFlow: flow,
+      currentFlowId: flow.id,
+    }));
+  
+  },
+  getFlowById: (id: string) => {
+    return get().flows.find((flow) => flow.id === id);
+  },
   setCurrentFlowId: (currentFlowId: string) => {
     set((state) => ({
       currentFlowId,

src/frontend/src/style/classes.css

@@ -68,3 +68,31 @@ select:-webkit-autofill:focus {
   background-color: #bbb;
   border-radius: 999px;
 }
+
+.json-view-playground-white-left {
+  background-color: #fff !important;
+  height: fit-content !important;
+}
+
+.json-view-playground-dark {
+  background-color: #141924 !important;
+  height: fit-content !important;
+}
+
+.json-view-playground-white {
+  background-color: #f8fafc !important;
+  height: fit-content !important;
+}
+
+.json-view-playground-dark-left {
+  background-color: #0c101a !important;
+  height: fit-content !important;
+}
+
+.json-view-white {
+  background-color: #f8fafc !important;
+}
+
+.json-view-dark {
+  background-color: #141924 !important;
+}

src/frontend/src/types/components/index.ts

@@ -69,15 +69,7 @@ export type InputListComponentType = {
   disabled: boolean;
   editNode?: boolean;
   componentName?: string;
-};
-
-export type InputGlobalComponentType = {
-  disabled: boolean;
-  onChange: (value: string) => void;
-  setDb: (value: boolean) => void;
-  name: string;
-  data: NodeDataType;
-  editNode?: boolean;
+  playgroundDisabled?: boolean;
 };
 
 export type InputGlobalComponentType = {
@@ -102,9 +94,11 @@ export type KeyPairListComponentType = {
 export type DictComponentType = {
   value: any;
   onChange: (value) => void;
-  disabled: boolean;
+  disabled?: boolean;
   editNode?: boolean;
   id?: string;
+  left?: boolean;
+  output?: boolean;
 };
 
 export type TextAreaComponentType = {
@@ -601,6 +595,8 @@ export type IOModalPropsType = {
   open: boolean;
   setOpen: (open: boolean) => void;
   disable?: boolean;
+  isPlayground?: boolean;
+  cleanOnClose?: boolean;
 };
 
 export type buttonBoxPropsType = {

src/frontend/src/types/zustand/flow/index.ts

@@ -45,6 +45,8 @@ export type FlowPoolType = {
 };
 
 export type FlowStoreType = {
+  onFlowPage: boolean;
+  setOnFlowPage: (onFlowPage: boolean) => void;
   flowPool: FlowPoolType;
   inputs: Array<{ type: string; id: string; displayName: string }>;
   outputs: Array<{ type: string; id: string; displayName: string }>;
@@ -74,8 +76,8 @@ export type FlowStoreType = {
   edges: Edge[];
   onNodesChange: OnNodesChange;
   onEdgesChange: OnEdgesChange;
-  setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void;
-  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void;
+  setNodes: (update: Node[] | ((oldState: Node[]) => Node[]),skipSave?:boolean) => void;
+  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[]),skipSave?:boolean) => void;
   setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void;
   getNode: (id: string) => Node | undefined;
   deleteNode: (nodeId: string | Array<string>) => void;

src/frontend/src/types/zustand/flowsManager/index.ts

@@ -2,6 +2,7 @@ import { Edge, Node, Viewport, XYPosition } from "reactflow";
 import { FlowType } from "../../flow";
 
 export type FlowsManagerStoreType = {
+  getFlowById: (id: string) => FlowType | undefined;
   flows: Array<FlowType>;
   setFlows: (flows: FlowType[]) => void;
   currentFlow: FlowType | undefined;
@@ -50,6 +51,7 @@ export type FlowsManagerStoreType = {
   takeSnapshot: () => void;
   examples: Array<FlowType>;
   setExamples: (examples: FlowType[]) => void;
+  setCurrentFlow: (flow: FlowType) => void;
 };
 
 export type UseUndoRedoOptions = {

src/frontend/src/utils/buildUtils.ts

@@ -5,6 +5,7 @@ import useAlertStore from "../stores/alertStore";
 import useFlowStore from "../stores/flowStore";
 import { VertexBuildTypeAPI } from "../types/api";
 import { VertexLayerElementType } from "../types/zustand/flow";
+import { Edge, Node } from "reactflow";
 
 type BuildVerticesParams = {
   flowId: string; // Assuming FlowType is the type for your flow
@@ -21,6 +22,8 @@ type BuildVerticesParams = {
   onBuildError?: (title, list, idList: VertexLayerElementType[]) => void;
   onBuildStart?: (idList: VertexLayerElementType[]) => void;
   onValidateNodes?: (nodes: string[]) => void;
+  nodes?: Node[];
+  edges?: Edge[];
 };
 
 function getInactiveVertexData(vertexId: string): VertexBuildTypeAPI {
@@ -48,7 +51,9 @@ function getInactiveVertexData(vertexId: string): VertexBuildTypeAPI {
 export async function updateVerticesOrder(
   flowId: string,
   startNodeId?: string | null,
-  stopNodeId?: string | null
+  stopNodeId?: string | null,
+  nodes?:Node[],
+  edges?:Edge[]
 ): Promise<{
   verticesLayers: VertexLayerElementType[][];
   verticesIds: string[];
@@ -59,7 +64,7 @@ export async function updateVerticesOrder(
     const setErrorData = useAlertStore.getState().setErrorData;
     let orderResponse;
     try {
-      orderResponse = await getVerticesOrder(flowId, startNodeId, stopNodeId);
+      orderResponse = await getVerticesOrder(flowId, startNodeId, stopNodeId, nodes, edges);
     } catch (error: any) {
       setErrorData({
         title: "Oops! Looks like you missed something",
@@ -101,6 +106,8 @@ export async function buildVertices({
   onBuildError,
   onBuildStart,
   onValidateNodes,
+  nodes,
+  edges,
 }: BuildVerticesParams) {
   let verticesBuild = useFlowStore.getState().verticesBuild;
   // if startNodeId and stopNodeId are provided
@@ -113,7 +120,9 @@ export async function buildVertices({
     let verticesOrderResponse = await updateVerticesOrder(
       flowId,
       startNodeId,
-      stopNodeId
+      stopNodeId,
+      nodes,
+      edges
     );
     if (onValidateNodes) {
       try {

src/frontend/src/utils/storeUtils.ts

@@ -1,4 +1,4 @@
-import { cloneDeep } from "lodash";
+import { cloneDeep, uniqueId } from "lodash";
 import { Node } from "reactflow";
 import { FlowType, NodeDataType } from "../types/flow";
 import { isInputNode, isOutputNode } from "./reactflowUtils";
@@ -6,11 +6,17 @@ import { isInputNode, isOutputNode } from "./reactflowUtils";
 export default function cloneFLowWithParent(
   flow: FlowType,
   parent: string,
-  is_component: boolean
+  is_component: boolean,
+  keepId=false
 ) {
   let childFLow = cloneDeep(flow);
   childFLow.parent = parent;
-  childFLow.id = "";
+  if(!keepId){
+    childFLow.id = "";
+  }
+  else{
+    childFLow.id = uniqueId()+"-"+childFLow.id;
+  }
   childFLow.is_component = is_component;
   return childFLow;
 }

src/frontend/src/utils/styleUtils.ts

@@ -136,6 +136,7 @@ import {
   X,
   XCircle,
   Zap,
+  PlaySquare
 } from "lucide-react";
 import { FaApple, FaGithub } from "react-icons/fa";
 import { AWSIcon } from "../icons/AWS";
@@ -144,7 +145,7 @@ import { AnthropicIcon } from "../icons/Anthropic";
 import { AstraDBIcon } from "../icons/AstraDB";
 import { AzureIcon } from "../icons/Azure";
 import { BingIcon } from "../icons/Bing";
-import { BotMessageSquareIcon } from "../icons/BotMessageSquare";
+import { BotMessageSquareIcon} from "../icons/BotMessageSquare";
 import { ChromaIcon } from "../icons/ChromaIcon";
 import { CohereIcon } from "../icons/Cohere";
 import { ElasticsearchIcon } from "../icons/ElasticsearchStore";
@@ -292,7 +293,8 @@ export const nodeIconsLucide: iconsType = {
   ListFlows: Group,
   ClearMessageHistory: FileClock,
   Python: PythonIcon,
-  ChatOutput: BotMessageSquareIcon,
+  ChatOutput: MessagesSquare,
+  BotMessageSquareIcon,
   ChatInput: MessagesSquare,
   inputs: Download,
   outputs: Upload,

src/frontend/tests/end-to-end/assets/ChatTest.json

@@ -5,7 +5,10 @@
       {
         "id": "ChatOutput-xPeM1",
         "type": "genericNode",
-        "position": { "x": 231.45405028405742, "y": -109.00715949940081 },
+        "position": {
+          "x": 231.45405028405742,
+          "y": -109.00715949940081
+        },
         "data": {
           "type": "ChatOutput",
           "node": {
@@ -17,7 +20,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Interaction Panel.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Playground.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -41,7 +44,9 @@
                 "name": "input_value",
                 "display_name": "Message",
                 "advanced": false,
-                "input_types": ["Text"],
+                "input_types": [
+                  "Text"
+                ],
                 "dynamic": false,
                 "info": "",
                 "load_from_db": false,
@@ -65,7 +70,9 @@
                 "info": "In case of Message being a Record, this template will be used to convert it to text.",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": ["Text"]
+                "input_types": [
+                  "Text"
+                ]
               },
               "return_record": {
                 "type": "bool",
@@ -97,7 +104,10 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                "options": ["Machine", "User"],
+                "options": [
+                  "Machine",
+                  "User"
+                ],
                 "name": "sender",
                 "display_name": "Sender Type",
                 "advanced": true,
@@ -105,7 +115,9 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": ["Text"]
+                "input_types": [
+                  "Text"
+                ]
               },
               "sender_name": {
                 "type": "str",
@@ -125,7 +137,9 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": ["Text"]
+                "input_types": [
+                  "Text"
+                ]
               },
               "session_id": {
                 "type": "str",
@@ -144,13 +158,20 @@
                 "info": "If provided, the message will be stored in the memory.",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": ["Text"]
+                "input_types": [
+                  "Text"
+                ]
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a chat message in the Interaction Panel.",
+            "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
-            "base_classes": ["object", "Record", "str", "Text"],
+            "base_classes": [
+              "object",
+              "Record",
+              "str",
+              "Text"
+            ],
             "display_name": "Chat Output",
             "documentation": "",
             "custom_fields": {
@@ -161,7 +182,10 @@
               "return_record": null,
               "record_template": null
             },
-            "output_types": ["Text", "Record"],
+            "output_types": [
+              "Text",
+              "Record"
+            ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -181,7 +205,10 @@
       {
         "id": "ChatInput-XYvUc",
         "type": "genericNode",
-        "position": { "x": -389.67919096408036, "y": 10.79598792234681 },
+        "position": {
+          "x": -389.67919096408036,
+          "y": 10.79598792234681
+        },
         "data": {
           "type": "ChatInput",
           "node": {
@@ -193,7 +220,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Interaction Panel.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Playground.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -253,7 +280,10 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                "options": ["Machine", "User"],
+                "options": [
+                  "Machine",
+                  "User"
+                ],
                 "name": "sender",
                 "display_name": "Sender Type",
                 "advanced": true,
@@ -261,7 +291,9 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": ["Text"]
+                "input_types": [
+                  "Text"
+                ]
               },
               "sender_name": {
                 "type": "str",
@@ -281,7 +313,9 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": ["Text"]
+                "input_types": [
+                  "Text"
+                ]
               },
               "session_id": {
                 "type": "str",
@@ -300,13 +334,20 @@
                 "info": "If provided, the message will be stored in the memory.",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": ["Text"]
+                "input_types": [
+                  "Text"
+                ]
               },
               "_type": "CustomComponent"
             },
-            "description": "Get chat inputs from the Interaction Panel.",
+            "description": "Get chat inputs from the Playground.",
             "icon": "ChatInput",
-            "base_classes": ["object", "Record", "str", "Text"],
+            "base_classes": [
+              "object",
+              "Record",
+              "str",
+              "Text"
+            ],
             "display_name": "Chat Input",
             "documentation": "",
             "custom_fields": {
@@ -316,7 +357,10 @@
               "session_id": null,
               "return_record": null
             },
-            "output_types": ["Text", "Record"],
+            "output_types": [
+              "Text",
+              "Record"
+            ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -339,16 +383,25 @@
           "targetHandle": {
             "fieldName": "input_value",
             "id": "ChatOutput-xPeM1",
-            "inputTypes": ["Text"],
+            "inputTypes": [
+              "Text"
+            ],
             "type": "str"
           },
           "sourceHandle": {
-            "baseClasses": ["object", "Record", "str", "Text"],
+            "baseClasses": [
+              "object",
+              "Record",
+              "str",
+              "Text"
+            ],
             "dataType": "ChatInput",
             "id": "ChatInput-XYvUc"
           }
         },
-        "style": { "stroke": "#555" },
+        "style": {
+          "stroke": "#555"
+        },
         "className": "stroke-gray-900 stroke-connection",
         "id": "reactflow__edge-ChatInput-XYvUc{œbaseClassesœ:[œobjectœ,œRecordœ,œstrœ,œTextœ],œdataTypeœ:œChatInputœ,œidœ:œChatInput-XYvUcœ}-ChatOutput-xPeM1{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-xPeM1œ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}"
       }
@@ -363,4 +416,4 @@
   "name": "ChatTest",
   "last_tested_version": "1.0.0a14",
   "is_component": false
-}
+}