feat: create an IO Category (#8229)

* create an IO bundle

* Update styleUtils.ts

* [autofix.ci] apply automated fixes

* change folder names

* [autofix.ci] apply automated fixes

* Update test_endpoints.py

* refactor: update test IDs for input/output components in specs

* test: update test IDs for chat input/output components in decisionFlow.spec.ts

* test: update test IDs for input/output components in generalBugs-shard-5.spec.ts

* Update styleUtils.ts

* 🐛 (typescript_test.yml): increase the maximum shard count to 40 to improve test distribution and efficiency

* fix FE Tests Input output component Ids

* [autofix.ci] apply automated fixes

* ✅ (filterEdge-shard-1.spec.ts): update test to log error message when element is not visible before asserting visibility

* ✅ (notifications.spec.ts): update test selectors for better clarity and consistency in the notifications feature test suite

* 🐛 (typescript_test.yml): adjust the maximum shard count to 10 to prevent exceeding the limit and optimize test execution.

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: deon-sanchez <deon.sanchez@datastax.com>
Co-authored-by: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>

src/backend/base/langflow/components/input_output/__init__.py

@@ -0,0 +1,6 @@
+from .chat import ChatInput
+from .chat_output import ChatOutput
+from .text import TextInputComponent
+from .text_output import TextOutputComponent
+
+__all__ = ["ChatInput", "ChatOutput", "TextInputComponent", "TextOutputComponent"]

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

@@ -1,4 +0,0 @@
-from .chat import ChatInput
-from .text import TextInputComponent
-
-__all__ = ["ChatInput", "TextInputComponent"]

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

@@ -1,4 +0,0 @@
-from .chat import ChatOutput
-from .text import TextOutputComponent
-
-__all__ = ["ChatOutput", "TextOutputComponent"]

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

@@ -158,8 +158,8 @@ def create_state_model(model_name: str = "State", *, validate: bool = True, **kw
         ValueError: If the provided field value is invalid or cannot be processed.
 
     Examples:
-        >>> from langflow.components.inputs import ChatInput
-        >>> from langflow.components.outputs.ChatOutput import ChatOutput
+        >>> from langflow.components.io import ChatInput
+        >>> from langflow.components.io.ChatOutput import ChatOutput
         >>> from pydantic import Field
         >>>
         >>> chat_input = ChatInput()

src/backend/base/langflow/initial_setup/starter_projects/basic_prompting.py

@@ -1,6 +1,5 @@
-from langflow.components.inputs import ChatInput
+from langflow.components.input_output import ChatInput, ChatOutput
 from langflow.components.languagemodels import OpenAIModelComponent
-from langflow.components.outputs import ChatOutput
 from langflow.components.prompts import PromptComponent
 from langflow.graph import Graph
 

src/backend/base/langflow/initial_setup/starter_projects/blog_writer.py

@@ -1,9 +1,8 @@
 from textwrap import dedent
 
 from langflow.components.data import URLComponent
-from langflow.components.inputs import TextInputComponent
+from langflow.components.input_output import ChatOutput, TextInputComponent
 from langflow.components.languagemodels import OpenAIModelComponent
-from langflow.components.outputs import ChatOutput
 from langflow.components.processing import ParseDataComponent
 from langflow.components.prompts import PromptComponent
 from langflow.graph import Graph

src/backend/base/langflow/initial_setup/starter_projects/complex_agent.py

@@ -1,9 +1,8 @@
 from langflow.components.crewai.crewai import CrewAIAgentComponent
 from langflow.components.crewai.hierarchical_crew import HierarchicalCrewComponent
 from langflow.components.crewai.hierarchical_task import HierarchicalTaskComponent
-from langflow.components.inputs import ChatInput
+from langflow.components.input_output import ChatInput, ChatOutput
 from langflow.components.languagemodels import OpenAIModelComponent
-from langflow.components.outputs import ChatOutput
 from langflow.components.prompts import PromptComponent
 from langflow.components.tools import SearchAPIComponent, YfinanceToolComponent
 from langflow.graph import Graph

src/backend/base/langflow/initial_setup/starter_projects/document_qa.py

@@ -1,7 +1,6 @@
 from langflow.components.data import FileComponent
-from langflow.components.inputs import ChatInput
+from langflow.components.input_output import ChatInput, ChatOutput
 from langflow.components.languagemodels import OpenAIModelComponent
-from langflow.components.outputs import ChatOutput
 from langflow.components.processing import ParseDataComponent
 from langflow.components.prompts import PromptComponent
 from langflow.graph import Graph

src/backend/base/langflow/initial_setup/starter_projects/hierarchical_tasks_agent.py

@@ -1,9 +1,8 @@
 from langflow.components.crewai.crewai import CrewAIAgentComponent
 from langflow.components.crewai.hierarchical_crew import HierarchicalCrewComponent
 from langflow.components.crewai.hierarchical_task import HierarchicalTaskComponent
-from langflow.components.inputs import ChatInput
+from langflow.components.input_output import ChatInput, ChatOutput
 from langflow.components.languagemodels import OpenAIModelComponent
-from langflow.components.outputs import ChatOutput
 from langflow.components.prompts import PromptComponent
 from langflow.components.tools import SearchAPIComponent
 from langflow.graph import Graph

src/backend/base/langflow/initial_setup/starter_projects/memory_chatbot.py

@@ -1,7 +1,6 @@
 from langflow.components.helpers.memory import MemoryComponent
-from langflow.components.inputs import ChatInput
+from langflow.components.input_output import ChatInput, ChatOutput
 from langflow.components.languagemodels import OpenAIModelComponent
-from langflow.components.outputs import ChatOutput
 from langflow.components.prompts import PromptComponent
 from langflow.graph import Graph
 

src/backend/base/langflow/initial_setup/starter_projects/sequential_tasks_agent.py

@@ -1,8 +1,7 @@
 from langflow.components.crewai.sequential_crew import SequentialCrewComponent
 from langflow.components.crewai.sequential_task_agent import SequentialTaskAgentComponent
-from langflow.components.inputs import TextInputComponent
+from langflow.components.input_output import ChatOutput, TextInputComponent
 from langflow.components.languagemodels import OpenAIModelComponent
-from langflow.components.outputs import ChatOutput
 from langflow.components.prompts import PromptComponent
 from langflow.components.tools import SearchAPIComponent
 from langflow.graph import Graph

src/backend/base/langflow/initial_setup/starter_projects/vector_store_rag.py

@@ -2,9 +2,8 @@ from textwrap import dedent
 
 from langflow.components.data import FileComponent
 from langflow.components.embeddings import OpenAIEmbeddingsComponent
-from langflow.components.inputs import ChatInput
+from langflow.components.input_output import ChatInput, ChatOutput
 from langflow.components.languagemodels import OpenAIModelComponent
-from langflow.components.outputs import ChatOutput
 from langflow.components.processing import ParseDataComponent
 from langflow.components.processing.split_text import SplitTextComponent
 from langflow.components.prompts import PromptComponent

src/backend/tests/conftest.py

@@ -17,7 +17,7 @@ from blockbuster import blockbuster_ctx
 from dotenv import load_dotenv
 from fastapi.testclient import TestClient
 from httpx import ASGITransport, AsyncClient
-from langflow.components.inputs import ChatInput
+from langflow.components.input_output import ChatInput
 from langflow.graph import Graph
 from langflow.initial_setup.constants import STARTER_FOLDER_NAME
 from langflow.main import create_app

src/backend/tests/integration/components/helpers/test_parse_json_data.py

@@ -1,4 +1,4 @@
-from langflow.components.inputs import ChatInput
+from langflow.components.input_output import ChatInput
 from langflow.components.processing.parse_json_data import ParseJSONDataComponent
 from langflow.schema import Data
 

src/backend/tests/integration/components/inputs/test_chat_input.py

@@ -1,4 +1,4 @@
-from langflow.components.inputs import ChatInput
+from langflow.components.input_output import ChatInput
 from langflow.memory import aget_messages
 from langflow.schema.message import Message
 

src/backend/tests/integration/components/inputs/test_text_input.py

@@ -1,4 +1,4 @@
-from langflow.components.inputs import TextInputComponent
+from langflow.components.input_output import TextInputComponent
 from langflow.schema.message import Message
 
 from tests.integration.utils import run_single_component

src/backend/tests/integration/components/outputs/test_chat_output.py

@@ -1,4 +1,4 @@
-from langflow.components.outputs import ChatOutput
+from langflow.components.input_output import ChatOutput
 from langflow.memory import aget_messages
 from langflow.schema.message import Message
 

src/backend/tests/integration/components/outputs/test_text_output.py

@@ -1,4 +1,4 @@
-from langflow.components.outputs import TextOutputComponent
+from langflow.components.input_output import TextOutputComponent
 from langflow.schema.message import Message
 
 from tests.integration.utils import run_single_component

src/backend/tests/integration/flows/test_basic_prompting.py

@@ -1,5 +1,4 @@
-from langflow.components.inputs import ChatInput
-from langflow.components.outputs import ChatOutput
+from langflow.components.input_output import ChatInput, ChatOutput
 from langflow.components.prompts import PromptComponent
 from langflow.graph import Graph
 from langflow.schema.message import Message

src/backend/tests/unit/base/tools/test_component_toolkit.py

@@ -2,9 +2,9 @@ import os
 
 import pytest
 from langflow.base.tools.component_tool import ComponentToolkit
+from langflow.components.input_output.chat_output import ChatOutput
 from langflow.components.langchain_utilities import ToolCallingAgentComponent
 from langflow.components.languagemodels import OpenAIModelComponent
-from langflow.components.outputs.chat import ChatOutput
 from langflow.components.tools.calculator import CalculatorToolComponent
 from langflow.graph import Graph
 from langflow.schema.data import Data

src/backend/tests/unit/components/inputs/test_input_components.py

@@ -1,6 +1,6 @@
 import pytest
 from anyio import Path
-from langflow.components.inputs import ChatInput, TextInputComponent
+from langflow.components.input_output import ChatInput, TextInputComponent
 from langflow.schema.message import Message
 from langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER, MESSAGE_SENDER_USER
 

src/backend/tests/unit/components/outputs/test_chat_output_component.py

@@ -1,5 +1,5 @@
 import pytest
-from langflow.components.outputs import ChatOutput
+from langflow.components.input_output import ChatOutput
 from langflow.schema.data import Data
 from langflow.schema.dataframe import DataFrame
 from langflow.schema.message import Message

src/backend/tests/unit/components/outputs/test_output_components.py

@@ -1,5 +1,5 @@
 import pytest
-from langflow.components.outputs import TextOutputComponent
+from langflow.components.input_output import TextOutputComponent
 
 from tests.base import ComponentTestBaseWithoutClient
 

src/backend/tests/unit/custom/component/test_component_instance_attributes.py

@@ -1,5 +1,5 @@
 import pytest
-from langflow.components.inputs.chat import ChatInput
+from langflow.components.input_output.chat import ChatInput
 from langflow.schema.message import Message
 
 

src/backend/tests/unit/custom/custom_component/test_component.py

@@ -3,8 +3,7 @@ from typing import Any
 import pytest
 from langflow.components.crewai import CrewAIAgentComponent, SequentialTaskComponent
 from langflow.components.custom_component import CustomComponent
-from langflow.components.inputs import ChatInput
-from langflow.components.outputs import ChatOutput
+from langflow.components.input_output import ChatInput, ChatOutput
 from langflow.custom.utils import update_component_build_config
 from langflow.schema import dotdict
 from langflow.template import Output

src/backend/tests/unit/graph/edge/test_edge_base.py

@@ -1,9 +1,8 @@
 import re
 
 import pytest
-from langflow.components.inputs import ChatInput
+from langflow.components.input_output import ChatInput, ChatOutput
 from langflow.components.languagemodels import OpenAIModelComponent
-from langflow.components.outputs import ChatOutput
 from langflow.components.prompts import PromptComponent
 from langflow.graph import Graph
 

src/backend/tests/unit/graph/graph/state/test_state_model.py

@@ -1,6 +1,5 @@
 import pytest
-from langflow.components.inputs import ChatInput
-from langflow.components.outputs import ChatOutput
+from langflow.components.input_output import ChatInput, ChatOutput
 from langflow.graph import Graph
 from langflow.graph.graph.constants import Finish
 from langflow.graph.state.model import create_state_model

src/backend/tests/unit/graph/graph/test_base.py

@@ -2,9 +2,8 @@ import logging
 from collections import deque
 
 import pytest
-from langflow.components.inputs import ChatInput
+from langflow.components.input_output import ChatInput, ChatOutput, TextOutputComponent
 from langflow.components.langchain_utilities import ToolCallingAgentComponent
-from langflow.components.outputs import ChatOutput, TextOutputComponent
 from langflow.components.tools import YfinanceToolComponent
 from langflow.graph import Graph
 from langflow.graph.graph.constants import Finish

src/backend/tests/unit/graph/graph/test_callback_graph.py

@@ -1,7 +1,7 @@
 import asyncio
 
 import pytest
-from langflow.components.outputs import ChatOutput
+from langflow.components.input_output import ChatOutput
 from langflow.custom import Component
 from langflow.events.event_manager import EventManager
 from langflow.graph import Graph

src/backend/tests/unit/graph/graph/test_cycles.py

@@ -1,11 +1,10 @@
 import os
 
 import pytest
-from langflow.components.inputs import ChatInput
-from langflow.components.inputs.text import TextInputComponent
+from langflow.components.input_output import ChatInput, ChatOutput, TextOutputComponent
+from langflow.components.input_output.text import TextInputComponent
 from langflow.components.languagemodels import OpenAIModelComponent
 from langflow.components.logic.conditional_router import ConditionalRouterComponent
-from langflow.components.outputs import ChatOutput, TextOutputComponent
 from langflow.components.prompts import PromptComponent
 from langflow.custom import Component
 from langflow.graph import Graph

src/backend/tests/unit/graph/graph/test_graph_state_model.py

@@ -2,9 +2,8 @@ from typing import TYPE_CHECKING
 
 import pytest
 from langflow.components.helpers.memory import MemoryComponent
-from langflow.components.inputs import ChatInput
+from langflow.components.input_output import ChatInput, ChatOutput
 from langflow.components.languagemodels import OpenAIModelComponent
-from langflow.components.outputs import ChatOutput
 from langflow.components.prompts import PromptComponent
 from langflow.graph import Graph
 from langflow.graph.graph.constants import Finish

src/backend/tests/unit/initial_setup/starter_projects/test_memory_chatbot.py

@@ -4,9 +4,8 @@ from typing import TYPE_CHECKING
 
 import pytest
 from langflow.components.helpers.memory import MemoryComponent
-from langflow.components.inputs import ChatInput
+from langflow.components.input_output import ChatInput, ChatOutput
 from langflow.components.languagemodels import OpenAIModelComponent
-from langflow.components.outputs import ChatOutput
 from langflow.components.prompts import PromptComponent
 from langflow.graph import Graph
 from langflow.graph.graph.constants import Finish

src/backend/tests/unit/initial_setup/starter_projects/test_vector_store_rag.py

@@ -5,9 +5,8 @@ from textwrap import dedent
 import pytest
 from langflow.components.data import FileComponent
 from langflow.components.embeddings import OpenAIEmbeddingsComponent
-from langflow.components.inputs import ChatInput
+from langflow.components.input_output import ChatInput, ChatOutput
 from langflow.components.languagemodels import OpenAIModelComponent
-from langflow.components.outputs import ChatOutput
 from langflow.components.processing import ParseDataComponent
 from langflow.components.processing.split_text import SplitTextComponent
 from langflow.components.prompts import PromptComponent

src/backend/tests/unit/io/test_io_schema.py

@@ -1,7 +1,7 @@
 from typing import TYPE_CHECKING, Literal
 
 import pytest
-from langflow.components.inputs import ChatInput
+from langflow.components.input_output import ChatInput
 from langflow.inputs.inputs import DropdownInput, FileInput, IntInput, NestedDictInput, StrInput
 from langflow.io.schema import create_input_schema
 

src/backend/tests/unit/test_endpoints.py

@@ -123,9 +123,9 @@ async def test_get_all(client: AsyncClient, logged_in_headers):
     assert len(all_names) <= len(
         files
     )  # Less or equal because we might have some files that don't have the dependencies installed
-    assert "ChatInput" in json_response["inputs"]
+    assert "ChatInput" in json_response["input_output"]
     assert "Prompt" in json_response["prompts"]
-    assert "ChatOutput" in json_response["outputs"]
+    assert "ChatOutput" in json_response["input_output"]
 
 
 @pytest.mark.usefixtures("active_user")

src/frontend/src/utils/styleUtils.ts

@@ -205,6 +205,7 @@ export const FILE_ICONS = {
 
 export const SIDEBAR_CATEGORIES = [
   { display_name: "Saved", name: "saved_components", icon: "GradientSave" },
+  { display_name: "I/O", name: "input_output", icon: "Cable" },
   { display_name: "Inputs", name: "inputs", icon: "Download" },
   { display_name: "Outputs", name: "outputs", icon: "Upload" },
   { display_name: "Prompts", name: "prompts", icon: "TerminalSquare" },
@@ -284,6 +285,7 @@ export const SIDEBAR_BUNDLES = [
 
 export const categoryIcons: Record<string, string> = {
   saved_components: "GradientSave",
+  input_output: "Cable",
   inputs: "Download",
   outputs: "Upload",
   prompts: "TerminalSquare",
@@ -311,6 +313,7 @@ export const categoryIcons: Record<string, string> = {
 
 export const nodeIconToDisplayIconMap: Record<string, string> = {
   //Category Icons
+  input_output: "Cable",
   inputs: "Download",
   outputs: "Upload",
   prompts: "TerminalSquare",

src/frontend/tests/core/features/componentHoverAdd.spec.ts

@@ -19,11 +19,11 @@ test(
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("chat input");
 
-    await page.waitForSelector('[data-testid="inputsChat Input"]', {
+    await page.waitForSelector('[data-testid="input_outputChat Input"]', {
       timeout: 2000,
     });
     // Hover over the component and verify plus icon
-    const componentLocator = page.getByTestId("inputsChat Input");
+    const componentLocator = page.getByTestId("input_outputChat Input");
     // Find the plus icon within the specific component container
     const plusIcon = componentLocator.getByTestId("icon-Plus");
 

src/frontend/tests/core/features/filterSidebar.spec.ts

@@ -56,8 +56,7 @@ test(
           .isVisible();
       });
 
-    await expect(page.getByTestId("disclosure-inputs")).toBeVisible();
-    await expect(page.getByTestId("disclosure-outputs")).toBeVisible();
+    await expect(page.getByTestId("disclosure-i/o")).toBeVisible();
     await expect(page.getByTestId("disclosure-prompts")).toBeVisible();
     await expect(page.getByTestId("disclosure-models")).toBeVisible();
     await expect(page.getByTestId("disclosure-helpers")).toBeVisible();
@@ -72,8 +71,8 @@ test(
 
     await expect(page.getByTestId("disclosure-prototypes")).toBeVisible();
 
-    await expect(page.getByTestId("inputsChat Input")).toBeVisible();
-    await expect(page.getByTestId("outputsChat Output")).toBeVisible();
+    await expect(page.getByTestId("input_outputChat Input")).toBeVisible();
+    await expect(page.getByTestId("input_outputChat Output")).toBeVisible();
     await expect(page.getByTestId("promptsPrompt")).toBeVisible();
     await expect(page.getByTestId("helpersMessage History")).toBeVisible();
     await expect(page.getByTestId("langchain_utilitiesCSVAgent")).toBeVisible();
@@ -97,8 +96,8 @@ test(
 
     await page.getByTestId("sidebar-filter-reset").click();
 
-    await expect(page.getByTestId("inputsChat Input")).not.toBeVisible();
-    await expect(page.getByTestId("outputsChat Output")).not.toBeVisible();
+    await expect(page.getByTestId("input_outputChat Input")).not.toBeVisible();
+    await expect(page.getByTestId("input_outputChat Output")).not.toBeVisible();
     await expect(page.getByTestId("promptsPrompt")).not.toBeVisible();
     await expect(page.getByTestId("helpersMessage History")).not.toBeVisible();
     await expect(

src/frontend/tests/core/features/freeze.spec.ts

@@ -17,14 +17,14 @@ test(
     //first component
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("text input");
-    await page.waitForSelector('[data-testid="inputsText Input"]', {
+    await page.waitForSelector('[data-testid="input_outputText Input"]', {
       timeout: 1000,
     });
 
     await zoomOut(page, 3);
 
     await page
-      .getByTestId("inputsText Input")
+      .getByTestId("input_outputText Input")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 100, y: 100 },
       });
@@ -75,12 +75,12 @@ test(
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("chat output");
-    await page.waitForSelector('[data-testid="outputsChat Output"]', {
+    await page.waitForSelector('[data-testid="input_outputChat Output"]', {
       timeout: 1000,
     });
 
     await page
-      .getByTestId("outputsChat Output")
+      .getByTestId("input_outputChat Output")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 600, y: 200 },
       });

src/frontend/tests/core/features/keyboardComponentSearch.spec.ts

@@ -22,25 +22,25 @@ test(
     await expect(page.getByTestId("sidebar-search-input")).toBeFocused({
       timeout: 1000,
     });
-    await expect(page.getByTestId("inputsChat Input")).not.toBeVisible();
+    await expect(page.getByTestId("input_outputChat Input")).not.toBeVisible();
 
     // Type "chat" to search for chat components
     await page.keyboard.type("chat");
 
-    await expect(page.getByTestId("inputsChat Input")).toBeVisible({
+    await expect(page.getByTestId("input_outputChat Input")).toBeVisible({
       timeout: 1000,
     });
 
     // Verify disclosures open when search has content
-    await expect(page.getByTestId("inputsChat Input")).toBeVisible();
+    await expect(page.getByTestId("input_outputChat Input")).toBeVisible();
 
     // Press Tab to focus first result
     await page.keyboard.press("Tab");
     await page.keyboard.press("Tab");
 
     // Verify some expected chat-related components are visible
-    await expect(page.getByTestId("inputsChat Input")).toBeVisible();
-    await expect(page.getByTestId("outputsChat Output")).toBeVisible();
+    await expect(page.getByTestId("input_outputChat Input")).toBeVisible();
+    await expect(page.getByTestId("input_outputChat Output")).toBeVisible();
 
     // Press Space to select the component
     await page.keyboard.press("Space");
@@ -51,7 +51,7 @@ test(
 
     // Clear search input and verify disclosures are closed
     await page.getByTestId("sidebar-search-input").clear();
-    await expect(page.getByTestId("inputsChat Input")).not.toBeVisible();
+    await expect(page.getByTestId("input_outputChat Input")).not.toBeVisible();
 
     // Test Enter key selection
     await page.keyboard.press("/");
@@ -72,11 +72,11 @@ test(
     await page.keyboard.press("/");
     await page.getByTestId("sidebar-search-input").clear();
     await expect(page.getByTestId("sidebar-search-input")).toHaveValue("");
-    await expect(page.getByTestId("inputsChat Input")).not.toBeVisible();
+    await expect(page.getByTestId("input_outputChat Input")).not.toBeVisible();
 
     await expect(page.getByTestId("sidebar-search-input")).toBeFocused();
     await page.keyboard.press("Escape");
     await expect(page.getByTestId("sidebar-search-input")).not.toBeFocused();
-    await expect(page.getByTestId("inputsChat Input")).not.toBeVisible();
+    await expect(page.getByTestId("input_outputChat Input")).not.toBeVisible();
   },
 );

src/frontend/tests/core/features/playground.spec.ts

@@ -22,12 +22,12 @@ test(
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("chat output");
-    await page.waitForSelector('[data-testid="outputsChat Output"]', {
+    await page.waitForSelector('[data-testid="input_outputChat Output"]', {
       timeout: 100000,
     });
 
     await page
-      .getByTestId("outputsChat Output")
+      .getByTestId("input_outputChat Output")
       .hover()
       .then(async () => {
         await page.getByTestId("add-component-button-chat-output").click();
@@ -38,24 +38,24 @@ test(
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("chat input");
-    await page.waitForSelector('[data-testid="inputsChat Input"]', {
+    await page.waitForSelector('[data-testid="input_outputChat Input"]', {
       timeout: 100000,
     });
 
     await page
-      .getByTestId("inputsChat Input")
+      .getByTestId("input_outputChat Input")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 100, y: 100 },
       });
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("text output");
-    await page.waitForSelector('[data-testid="outputsText Output"]', {
+    await page.waitForSelector('[data-testid="input_outputText Output"]', {
       timeout: 100000,
     });
 
     await page
-      .getByTestId("outputsText Output")
+      .getByTestId("input_outputText Output")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 300, y: 300 },
       });

src/frontend/tests/core/features/publish-flow.spec.ts

@@ -20,12 +20,12 @@ test(
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("chat input");
 
-    await page.waitForSelector('[data-testid="inputsChat Input"]', {
+    await page.waitForSelector('[data-testid="input_outputChat Input"]', {
       timeout: 3000,
     });
 
     await page
-      .getByTestId("inputsChat Input")
+      .getByTestId("input_outputChat Input")
       .hover({ timeout: 3000 })
       .then(async () => {
         await page

src/frontend/tests/core/features/stop-building.spec.ts

@@ -20,7 +20,7 @@ test(
     await page.getByTestId("sidebar-search-input").fill("text input");
 
     await page
-      .getByTestId("inputsText Input")
+      .getByTestId("input_outputText Input")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 0, y: 0 },
       });
@@ -66,7 +66,7 @@ test(
     await page.getByTestId("sidebar-search-input").fill("chat output");
 
     await page
-      .getByTestId("outputsChat Output")
+      .getByTestId("input_outputChat Output")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 600, y: 300 },
       });

src/frontend/tests/core/integrations/decisionFlow.spec.ts

@@ -29,14 +29,14 @@ test(
     //---------------------------------- CHAT INPUT
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("chat input");
-    await page.waitForSelector('[data-testid="inputsChat Input"]', {
+    await page.waitForSelector('[data-testid="input_outputChat Input"]', {
       timeout: 2000,
     });
 
     await zoomOut(page, 6);
 
     await page
-      .getByTestId("inputsChat Input")
+      .getByTestId("input_outputChat Input")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 100, y: 100 },
       });
@@ -190,29 +190,29 @@ test(
     //---------------------------------- CHAT OUTPUT
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("chat output");
-    await page.waitForSelector('[data-testid="outputsChat Output"]', {
+    await page.waitForSelector('[data-testid="input_outputChat Output"]', {
       timeout: 2000,
     });
     await page
-      .getByTestId("outputsChat Output")
+      .getByTestId("input_outputChat Output")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 800, y: 300 },
       });
-    await page.waitForSelector('[data-testid="outputsChat Output"]', {
+    await page.waitForSelector('[data-testid="input_outputChat Output"]', {
       timeout: 2000,
     });
     //---------------------------------- CHAT OUTPUT
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("chat output");
-    await page.waitForSelector('[data-testid="outputsChat Output"]', {
+    await page.waitForSelector('[data-testid="input_outputChat Output"]', {
       timeout: 2000,
     });
     await page
-      .getByTestId("outputsChat Output")
+      .getByTestId("input_outputChat Output")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 800, y: 400 },
       });
-    await page.waitForSelector('[data-testid="outputsChat Output"]', {
+    await page.waitForSelector('[data-testid="input_outputChat Output"]', {
       timeout: 2000,
     });
     //----------------------------------

src/frontend/tests/core/integrations/similarity.spec.ts

@@ -92,7 +92,7 @@ test(
     });
 
     await page
-      .getByTestId("outputsText Output")
+      .getByTestId("input_outputText Output")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 500, y: 100 },
       });

src/frontend/tests/core/integrations/textInputOutput.spec.ts

@@ -26,7 +26,7 @@ test.skip(
     await page.getByTestId("sidebar-search-input").fill("text input");
     await page.waitForTimeout(1000);
     await page
-      .getByTestId("inputsText Input")
+      .getByTestId("input_outputText Input")
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();
@@ -72,7 +72,7 @@ test.skip(
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("text output");
     await page
-      .getByTestId("outputsText Output")
+      .getByTestId("input_outputText Output")
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();

src/frontend/tests/core/regression/generalBugs-shard-5.spec.ts

@@ -19,12 +19,12 @@ test(
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("text input");
-    await page.waitForSelector('[data-testid="inputsText Input"]', {
+    await page.waitForSelector('[data-testid="input_outputText Input"]', {
       timeout: 3000,
     });
 
     await page
-      .getByTestId("inputsText Input")
+      .getByTestId("input_outputText Input")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {});
 
     await zoomOut(page, 4);
@@ -32,7 +32,7 @@ test(
     await page.waitForTimeout(500);
 
     await page
-      .getByTestId("inputsText Input")
+      .getByTestId("input_outputText Input")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 500, y: 150 },
       });
@@ -40,7 +40,7 @@ test(
     await page.waitForTimeout(500);
 
     await page
-      .getByTestId("inputsText Input")
+      .getByTestId("input_outputText Input")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 670, y: 200 },
       });
@@ -75,12 +75,12 @@ test(
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("text");
 
-    await page.waitForSelector('[data-testid="outputsText Output"]', {
+    await page.waitForSelector('[data-testid="input_outputText Output"]', {
       timeout: 3000,
     });
 
     await page
-      .getByTestId("outputsText Output")
+      .getByTestId("input_outputText Output")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 10, y: 400 },
       });

src/frontend/tests/core/unit/chatInputOutput.spec.ts

@@ -14,12 +14,12 @@ test("chat_io_teste", { tag: ["@release", "@workspace"] }, async ({ page }) => {
   });
   await page.getByTestId("sidebar-search-input").click();
   await page.getByTestId("sidebar-search-input").fill("chat output");
-  await page.waitForSelector('[data-testid="outputsChat Output"]', {
+  await page.waitForSelector('[data-testid="input_outputChat Output"]', {
     timeout: 2000,
   });
 
   await page
-    .getByTestId("outputsChat Output")
+    .getByTestId("input_outputChat Output")
     .hover()
     .then(async () => {
       await page.getByTestId("add-component-button-chat-output").click();
@@ -27,12 +27,12 @@ test("chat_io_teste", { tag: ["@release", "@workspace"] }, async ({ page }) => {
 
   await page.getByTestId("sidebar-search-input").click();
   await page.getByTestId("sidebar-search-input").fill("chat input");
-  await page.waitForSelector('[data-testid="inputsChat Input"]', {
+  await page.waitForSelector('[data-testid="input_outputChat Input"]', {
     timeout: 2000,
   });
 
   await page
-    .getByTestId("inputsChat Input")
+    .getByTestId("input_outputChat Input")
     .dragTo(page.locator('//*[@id="react-flow-id"]'), {
       targetPosition: { x: 100, y: 100 },
     });

src/frontend/tests/core/unit/fileUploadComponent.spec.ts

@@ -242,7 +242,7 @@ test(
     await page.getByTestId("sidebar-search-input").fill("chat output");
 
     await page
-      .getByTestId("outputsChat Output")
+      .getByTestId("input_outputChat Output")
       .first()
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 0, y: 0 },

src/frontend/tests/extended/features/filterEdge-shard-1.spec.ts

@@ -56,8 +56,7 @@ test(
     });
 
     const disclosureTestIds = [
-      "disclosure-inputs",
-      "disclosure-outputs",
+      "disclosure-i/o",
       "disclosure-data",
       "disclosure-models",
       "disclosure-helpers",
@@ -72,7 +71,7 @@ test(
     ];
 
     const elementTestIds = [
-      "outputsChat Output",
+      "input_outputChat Output",
       "dataAPI Request",
       "vectorstoresAstra DB",
       "langchain_utilitiesTool Calling Agent",
@@ -84,7 +83,12 @@ test(
     ];
 
     await Promise.all(
-      disclosureTestIds.map((id) => expect(page.getByTestId(id)).toBeVisible()),
+      disclosureTestIds.map((id) => {
+        if (!expect(page.getByTestId(id)).toBeVisible()) {
+          console.error(`${id} is not visible`);
+        }
+        return expect(page.getByTestId(id)).toBeVisible();
+      }),
     );
 
     await Promise.all(
@@ -118,9 +122,12 @@ test(
     ];
 
     await Promise.all(
-      visibleModelSpecsTestIds.map((id) =>
-        expect(page.getByTestId(id)).toBeVisible(),
-      ),
+      visibleModelSpecsTestIds.map((id) => {
+        if (!expect(page.getByTestId(id)).toBeVisible()) {
+          console.error(`${id} is not visible`);
+        }
+        return expect(page.getByTestId(id)).toBeVisible();
+      }),
     );
 
     const chainInputElements1 = await page

src/frontend/tests/extended/features/loop-component.spec.ts

@@ -105,7 +105,7 @@ test(
     await page.waitForTimeout(1000);
 
     await page
-      .getByTestId("outputsChat Output")
+      .getByTestId("input_outputChat Output")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 940, y: 100 },
       });

src/frontend/tests/extended/features/minimize.spec.ts

@@ -13,12 +13,12 @@ test(
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("text input");
-    await page.waitForSelector("data-testid=inputsText Input", {
+    await page.waitForSelector("data-testid=input_outputText Input", {
       timeout: 3000,
     });
 
     await page
-      .getByTestId("inputsText Input")
+      .getByTestId("input_outputText Input")
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
     await page.getByTestId("zoom_out").click();

src/frontend/tests/extended/features/notifications.spec.ts

@@ -7,18 +7,18 @@ test(
   async ({ page }) => {
     await awaitBootstrapTest(page);
     await page.getByTestId("blank-flow").click();
-    await page.waitForSelector('[data-testid="disclosure-inputs"]', {
+    await page.waitForSelector('[data-testid="disclosure-i/o"]', {
       timeout: 3000,
       state: "visible",
     });
 
-    await page.getByTestId("disclosure-inputs").click();
-    await page.waitForSelector('[data-testid="inputsText Input"]', {
+    await page.getByTestId("disclosure-i/o").click();
+    await page.waitForSelector('[data-testid="input_outputText Input"]', {
       timeout: 3000,
       state: "visible",
     });
     await page
-      .getByTestId("inputsText Input")
+      .getByTestId("input_outputText Input")
       .hover()
       .then(async () => {
         await page.getByTestId("add-component-button-text-input").click();

src/frontend/tests/extended/features/stop-button-playground.spec.ts

@@ -29,12 +29,12 @@ test(
     await page.getByTestId("sidebar-search-input").fill("chat output");
     await page.waitForTimeout(500);
 
-    await page.waitForSelector('[data-testid="outputsChat Output"]', {
+    await page.waitForSelector('[data-testid="input_outputChat Output"]', {
       timeout: 3000,
     });
 
     await page
-      .getByTestId("outputsChat Output")
+      .getByTestId("input_outputChat Output")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 400, y: 400 },
       });

src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts

@@ -74,18 +74,18 @@ test(
     // Add two chat outputs
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("chat output");
-    await page.waitForSelector('[data-testid="outputsChat Output"]', {
+    await page.waitForSelector('[data-testid="input_outputChat Output"]', {
       timeout: 1000,
     });
 
     await page
-      .getByTestId("outputsChat Output")
+      .getByTestId("input_outputChat Output")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 700, y: 200 },
       });
 
     await page
-      .getByTestId("outputsChat Output")
+      .getByTestId("input_outputChat Output")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 700, y: 400 },
       });

src/frontend/tests/extended/regression/general-bugs-minimize-state-error.spec.ts

@@ -24,7 +24,7 @@ test(
     await page.getByTestId("sidebar-search-input").fill("text output");
 
     await page
-      .getByTestId("outputsText Output")
+      .getByTestId("input_outputText Output")
       .hover()
       .then(async () => {
         await page.getByTestId("add-component-button-text-output").click();

src/frontend/tests/extended/regression/general-bugs-save-changes-on-node.spec.ts

@@ -61,7 +61,9 @@ test(
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("text output");
 
-    await page.getByTestId("outputsText Output").waitFor({ state: "visible" });
+    await page
+      .getByTestId("input_outputText Output")
+      .waitFor({ state: "visible" });
     await page.getByTestId("add-component-button-text-output").click();
 
     await page.waitForSelector('[data-testid="title-Text Output"]', {

src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts

@@ -33,20 +33,20 @@ test(
     await page.getByTestId("sidebar-search-input").fill("chat output");
 
     await page
-      .getByTestId("outputsChat Output")
+      .getByTestId("input_outputChat Output")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 0, y: 0 },
       });
 
     await page
-      .getByTestId("outputsChat Output")
+      .getByTestId("input_outputChat Output")
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("chat input");
 
     await page
-      .getByTestId("inputsChat Input")
+      .getByTestId("input_outputChat Input")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 100, y: 100 },
       });
@@ -137,11 +137,11 @@ test(
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("chat output");
 
-    await page.waitForSelector('[data-testid="outputsChat Output"]', {
+    await page.waitForSelector('[data-testid="input_outputChat Output"]', {
       timeout: 30000,
     });
     await page
-      .locator('//*[@id="outputsChat Output"]')
+      .locator('//*[@id="input_outputChat Output"]')
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();