Merge branch 'zustand/io/migration' into globalVariables

.github/workflows/lint.yml

@@ -31,12 +31,15 @@ jobs:
           pipx install poetry==$POETRY_VERSION
       - name: Set up Python ${{ matrix.python-version }}
         uses: actions/setup-python@v5
+        id: setup-python
         with:
           python-version: ${{ matrix.python-version }}
           cache: poetry
-      - name: Install dependencies
+      - name: Install Python dependencies
         run: |
+          poetry env use ${{ matrix.python-version }}
           poetry install
+        if: ${{ steps.setup-python.outputs.cache-hit != 'true' }}
       - name: Analysing the code with our lint
         run: |
           make lint

.github/workflows/python_test.yml

@@ -0,0 +1,47 @@
+name: test
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - "poetry.lock"
+      - "pyproject.toml"
+      - "src/backend/**"
+  pull_request:
+    branches: [dev]
+    paths:
+      - "poetry.lock"
+      - "pyproject.toml"
+      - "src/backend/**"
+
+env:
+  POETRY_VERSION: "1.8.2"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        python-version:
+          - "3.10"
+          - "3.11"
+    env:
+      OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install poetry
+        run: pipx install poetry==$POETRY_VERSION
+      - name: Set up Python ${{ matrix.python-version }}
+        uses: actions/setup-python@v5
+        id: setup-python
+        with:
+          python-version: ${{ matrix.python-version }}
+          cache: "poetry"
+      - name: Install Python dependencies
+        run: |
+          poetry env use ${{ matrix.python-version }}
+          poetry install
+        if: ${{ steps.setup-python.outputs.cache-hit != 'true' }}
+      - name: Run unit tests
+        run: |
+          make tests

.github/workflows/typescript_test.yml

@@ -0,0 +1,149 @@
+name: Run Frontend Tests
+
+on:
+  pull_request:
+    paths:
+      - "src/frontend/**"
+
+env:
+  POETRY_VERSION: "1.8.2"
+  NODE_VERSION: "21"
+  PYTHON_VERSION: "3.10"
+  # Define the directory where Playwright browsers will be installed.
+  # Adjust if your project uses a different path.
+  PLAYWRIGHT_BROWSERS_PATH: "ms-playwright"
+
+jobs:
+  setup-and-test:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        id: setup-node
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "npm"
+
+      - name: Install Node.js dependencies
+        run: |
+          cd src/frontend
+          npm ci
+        if: ${{ steps.setup-node.outputs.cache-hit != 'true' }}
+
+      # Attempt to restore the correct Playwright browser binaries based on the
+      # currently installed version of Playwright (The browser binary versions
+      # may change with Playwright versions).
+      # Note: Playwright's cache directory is hard coded because that's what it
+      # says to do in the docs. There doesn't appear to be a command that prints
+      # it out for us.
+      # - uses: actions/cache@v4
+      #   id: playwright-cache
+      #   with:
+      #     path: ${{ env.PLAYWRIGHT_BROWSERS_PATH }}
+      #     key: "${{ runner.os }}-playwright-${{ hashFiles('src/frontend/package-lock.json') }}"
+      #     # As a fallback, if the Playwright version has changed, try use the
+      #     # most recently cached version. There's a good chance that at least one
+      #     # of the browser binary versions haven't been updated, so Playwright can
+      #     # skip installing that in the next step.
+      #     # Note: When falling back to an old cache, `cache-hit` (used below)
+      #     # will be `false`. This allows us to restore the potentially out of
+      #     # date cache, but still let Playwright decide if it needs to download
+      #     # new binaries or not.
+      #     restore-keys: |
+      #       ${{ runner.os }}-playwright-
+      - name: Cache playwright binaries
+        uses: actions/cache@v4
+        id: playwright-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('src/frontend/package-lock.json') }}
+      - name: Install Frontend dependencies
+        run: |
+          cd src/frontend
+          npm ci
+
+      - name: Install Playwright's browser binaries
+        run: |
+          cd src/frontend
+          npx playwright install --with-deps
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+      - name: Install Playwright's dependencies
+        run: |
+          cd src/frontend
+          npx playwright install-deps
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+      # If the Playwright browser binaries weren't able to be restored, we tell
+      # paywright to install everything for us.
+      # - name: Install Playwright's dependencies
+      #   if: steps.playwright-cache.outputs.cache-hit != 'true'
+      #   run: npx playwright install --with-deps
+
+      - name: Install Poetry
+        run: pipx install "poetry==${{ env.POETRY_VERSION }}"
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        id: setup-python
+        with:
+          python-version: ${{ env.PYTHON_VERSION }}
+          cache: "poetry"
+
+      - name: Install Python dependencies
+        run: |
+          poetry env use ${{ env.PYTHON_VERSION }}
+          poetry install
+        if: ${{ steps.setup-python.outputs.cache-hit != 'true' }}
+
+      - name: Run Playwright Tests
+        run: |
+          cd src/frontend
+          npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+
+      - name: Upload blob report to GitHub Actions Artifacts
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: blob-report-${{ matrix.shardIndex }}
+          path: src/frontend/blob-report
+          retention-days: 1
+
+  merge-reports:
+    needs: setup-and-test
+    runs-on: ubuntu-latest
+    if: always()
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Download blob reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: all-blob-reports
+          pattern: blob-report-*
+          merge-multiple: true
+
+      - name: Merge into HTML Report
+        run: |
+          npx playwright merge-reports --reporter html ./all-blob-reports
+
+      - name: Upload HTML report
+        uses: actions/upload-artifact@v4
+        with:
+          name: html-report--attempt-${{ github.run_attempt }}
+          path: playwright-report
+          retention-days: 14

.gitignore

@@ -262,3 +262,5 @@ src/backend/base/langflow/frontend/
 .docker
 scratchpad*
 chroma*/*
+stuff/*
+src/frontend/playwright-report/index.html

Makefile

@@ -6,6 +6,20 @@ setup_poetry:
 	pipx install poetry
 	poetry self add poetry-monorepo-dependency-plugin
 
+add:
+	@echo 'Adding dependencies'
+ifdef devel
+	cd src/backend/base && poetry add --group dev $(devel)
+endif
+
+ifdef main
+	poetry add $(main)
+endif
+
+ifdef base
+	cd src/backend/base && poetry add $(base)
+endif
+
 init:
 	@echo 'Installing backend dependencies'
 	make install_backend
@@ -47,9 +61,9 @@ run_frontend:
 
 tests_frontend:
 ifeq ($(UI), true)
-		cd src/frontend && ./run-tests.sh --ui
+		cd src/frontend && npx playwright test --ui --project=chromium
 else
-		cd src/frontend && ./run-tests.sh
+		cd src/frontend && npx playwright test --project=chromium
 endif
 
 run_cli:
@@ -59,11 +73,12 @@ run_cli:
 	@make build_frontend > /dev/null
 	@echo 'Install backend dependencies'
 	@make install_backend > /dev/null
-	ifdef env
-		poetry run langflow run --path src/frontend/build --host $(host) --port $(port) --env-file $(env)
-	else
-		poetry run langflow run --path src/frontend/build --host $(host) --port $(port) --env-file .env
-	endif
+ifdef env
+	poetry run langflow run --path src/frontend/build --host $(host) --port $(port) --env-file $(env)
+else
+	poetry run langflow run --path src/frontend/build --host $(host) --port $(port) --env-file .env
+endif
+
 
 run_cli_debug:
 	@echo 'Running the CLI in debug mode'
@@ -72,11 +87,11 @@ run_cli_debug:
 	@make build_frontend > /dev/null
 	@echo 'Install backend dependencies'
 	@make install_backend > /dev/null
-	ifdef env
-		poetry run langflow run --path src/frontend/build --log-level debug --host $(host) --port $(port) --env-file $(env)
-	else
-		poetry run langflow run --path src/frontend/build --log-level debug --host $(host) --port $(port) --env-file .env
-	endif
+ifdef env
+	poetry run langflow run --path src/frontend/build --log-level debug --host $(host) --port $(port) --env-file $(env)
+else
+	poetry run langflow run --path src/frontend/build --log-level debug --host $(host) --port $(port) --env-file .env
+endif
 
 setup_devcontainer:
 	make init

docs/docs/components/experimental.mdx

@@ -0,0 +1,250 @@
+import Admonition from '@theme/Admonition';
+
+# Experimental
+
+Experimental are components that are currently in a beta phase. This means they have undergone initial development and testing but have not yet reached a stable or fully supported status. Users are encouraged to explore these components, provide feedback, and report any issues encountered during their usage. 
+
+### Clear Message History Component
+
+This component is designed to clear the message history associated with a specific session ID.
+
+**Beta:** This component is currently in beta.
+
+**Parameters**
+
+- **Session ID:**
+  - **Display Name:** Session ID
+  - **Info:** The session ID to clear the message history.
+
+**Usage**
+
+To use this component, provide the session ID for which you want to clear the message history.
+
+---
+
+### Extract Key From Record
+
+This component extracts specified keys from a record.
+
+**Parameters**
+
+- **Record:**
+  - **Display Name:** Record
+  - **Info:** The record from which to extract the keys.
+
+- **Keys:**
+  - **Display Name:** Keys
+  - **Info:** The keys to extract from the record.
+
+- **Silent Errors:**
+  - **Display Name:** Silent Errors
+  - **Info:** If True, errors will not be raised.
+  - **Advanced:** True
+
+**Usage**
+
+To use this component, provide the record from which you want to extract keys, specify the keys to extract, and optionally set whether to raise errors for missing keys.
+
+---
+
+### Flow as Tool
+
+This component constructs a Tool from a function that runs the loaded Flow.
+
+**Parameters**
+
+- **Flow Name:**
+  - **Display Name:** Flow Name
+  - **Info:** The name of the flow to run.
+  - **Options:** List of available flow names.
+  - **Real-time Refresh:** True
+  - **Refresh Button:** True
+
+- **Name:**
+  - **Display Name:** Name
+  - **Description:** The name of the tool.
+
+- **Description:**
+  - **Display Name:** Description
+  - **Description:** The description of the tool.
+
+- **Return Direct:**
+  - **Display Name:** Return Direct
+  - **Description:** Return the result directly from the Tool.
+  - **Advanced:** True
+
+**Usage**
+
+To use this component, select the desired flow from the available options, provide a name and description for the tool, and specify whether to return the result directly from the tool.
+
+---
+
+### Listen
+
+This component listens for a notification.
+
+**Parameters**
+
+- **Name:**
+  - **Display Name:** Name
+  - **Info:** The name of the notification to listen for.
+
+**Usage**
+
+To use this component, specify the name of the notification to listen for.
+
+---
+
+### List Flows
+
+This component lists all available flows.
+
+**Usage**
+
+To use this component, simply call it without any parameters.
+
+---
+
+### Merge Records
+
+**Parameters**
+
+- **Records:**
+  - **Display Name:** Records
+
+**Usage**
+
+To use this component, provide a list of records to merge.
+
+---
+
+### Notify
+
+This component generates a notification to the Get Notified component.
+
+**Parameters**
+
+- **Name:**
+  - **Display Name:** Name
+  - **Info:** The name of the notification.
+
+- **Record:**
+  - **Display Name:** Record
+  - **Info:** The record to store.
+
+- **Append:**
+  - **Display Name:** Append
+  - **Info:** If True, the record will be appended to the notification.
+
+**Usage**
+
+To use this component, specify the name of the notification, provide an optional record to store, and indicate whether to append the record to the notification.
+
+---
+
+### Run Flow
+
+This component runs a flow.
+
+**Parameters**
+
+- **Input Value:**
+  - **Display Name:** Input Value
+  - **Multiline:** True
+
+- **Flow Name:**
+  - **Display Name:** Flow Name
+  - **Info:** The name of the flow to run.
+  - **Options:** List of available flow names.
+  - **Refresh Button:** True
+
+- **Tweaks:**
+  - **Display Name:** Tweaks
+  - **Info:** Tweaks to apply to the flow.
+
+**Usage**
+
+To use this component, provide the input value, specify the flow name to run, and optionally provide tweaks to apply to the flow.
+
+---
+
+### Runnable Executor
+
+This component executes a runnable.
+
+**Parameters**
+
+- **Input Key:**
+  - **Display Name:** Input Key
+  - **Info:** The key to use for the input.
+
+- **Inputs:**
+  - **Display Name:** Inputs
+  - **Info:** The inputs to pass to the runnable.
+
+- **Runnable:**
+  - **Display Name:** Runnable
+  - **Info:** The runnable to execute.
+
+- **Output Key:**
+  - **Display Name:** Output Key
+  - **Info:** The key to use for the output.
+
+**Usage**
+
+To use this component, specify the input key, provide the inputs to pass to the runnable, select the runnable to execute, and optionally specify the output key.
+
+---
+
+### SQL Executor
+
+ This component executes an SQL query.
+
+**Parameters**
+
+- **Database URL:**
+  - **Display Name:** Database URL
+  - **Info:** The URL of the database.
+
+- **Include Columns:**
+  - **Display Name:** Include Columns
+  - **Info:** Include columns in the result.
+
+- **Passthrough:**
+  - **Display Name:** Passthrough
+  - **Info:** If an error occurs, return the query instead of raising an exception.
+
+- **Add Error:**
+  - **Display Name:** Add Error
+  - **Info:** Add the error to the result.
+
+**Usage**
+
+To use this component, provide the SQL query, specify the database URL, and optionally configure include columns, passthrough, and add error settings.
+
+---
+
+### SubFlow
+
+This component dynamically generates a component from a flow. The output is a list of records with keys 'result' and 'message'.
+
+**Parameters**
+
+- **Input Value:**
+  - **Display Name:** Input Value
+  - **Multiline:** True
+
+- **Flow Name:**
+  - **Display Name:** Flow Name
+  - **Info:** The name of the flow to run.
+  - **Options:** List of available flow names.
+  - **Real Time Refresh:** True
+  - **Refresh Button:** True
+
+- **Tweaks:**
+  - **Display Name:** Tweaks
+  - **Info:** Tweaks to apply to the flow.
+
+**Usage**
+
+To use this component, specify the flow name and provide any necessary tweaks to apply to the flow.

docs/docs/components/helpers.mdx

@@ -0,0 +1,173 @@
+import Admonition from '@theme/Admonition';
+
+# Helpers
+
+### Custom Component
+
+This component serves as a template for creating your own custom components.
+
+**Params**
+
+- **Display Name:** Parameter
+
+**Usage**
+
+To use this component, provide the required parameter as specified.
+
+Learn more about [Custom Component](http://docs.langflow.org/components/custom).
+
+---
+
+### Documents to Records
+
+This component converts documents to records.
+
+**Params**
+
+- **Documents:**
+  - **Display Name:** Documents
+
+**Usage**
+
+To use this component, provide a list of documents to be converted into records.
+
+---
+
+### Unique ID Generator
+
+This component generates a unique ID.
+
+**Params**
+
+- **Value:**
+  - **Display Name:** Value
+  - **Real Time Refresh:** True
+
+**Usage**
+
+To use this component, simply retrieve the generated unique ID from the provided value parameter.
+
+---
+
+### Message History
+
+This component is used to retrieve stored messages from the message history.
+
+**Params**
+
+- **Sender Type:**
+  - **Display Name:** Sender Type
+  - **Options:** Machine, User, Machine and User
+
+- **Sender Name:**
+  - **Display Name:** Sender Name
+
+- **Number of Messages:**
+  - **Display Name:** Number of Messages
+  - **Info:** Number of messages to retrieve.
+
+- **Session ID:**
+  - **Display Name:** Session ID
+  - **Info:** Session ID of the chat history.
+  - **Input Types:** Text
+
+**Usage**
+
+To use this component, configure the parameters as needed to retrieve messages from the message history.
+
+---
+
+### Python Function
+
+**Params**
+
+- **Code:**
+  - **Display Name:** Code
+  - **Info:** The code for the function.
+  - **Show:** True
+
+**Usage**
+
+To use this component, provide the Python code for the function you want to define.
+
+---
+
+### Records to Text
+
+This component converts records into a single piece of text using a template.
+
+**Params**
+
+- **Records:**
+  - **Display Name:** Records
+  - **Info:** The records to convert to text.
+
+- **Template:**
+  - **Display Name:** Template
+    - **Info:** The template to use for formatting the records. It can contain the keys `{text}`, `{data}` or any other key in the Record.
+
+**Usage**
+
+To use this component, provide the records you want to convert to text along with a template for formatting.
+
+---
+
+### SearchApi
+
+This component provides access to the real-time search engine results API.
+
+**Params**
+
+- **Engine:**
+  - **Display Name:** Engine
+  - **Info:** The search engine to use.
+
+- **Parameters:**
+  - **Display Name:** Parameters
+  - **Info:** The parameters to send with the request.
+
+- **API Key:**
+  - **Display Name:** API Key
+  - **Info:** The API key to use SearchApi.
+  - **Required:** True
+  - **Password:** True
+
+Learn more about [SearchApi Documentation](https://www.searchapi.io/docs/google).
+
+---
+
+### Text to Record
+
+This component enables the creation of a record from text data.
+
+**Params**
+
+- **Data:**
+  - **Display Name:** Data
+  - **Info:** The data to convert to a record.
+  - **Input Types:** Text
+
+**Usage**
+
+To use this component, provide the text data to convert into a record.
+
+---
+
+### Update Record
+
+This component updates a record with new data.
+
+**Params**
+
+- **Record:**
+  - **Display Name:** Record
+  - **Info:** The record to update.
+
+- **New Data:**
+  - **Display Name:** New Data
+  - **Info:** The new data to update the record with.
+  - **Input Types:** Text
+
+**Usage**
+
+To use this component, provide the record to be updated along with the new data.

docs/docs/guides/inputs-and-outputs.mdx

@@ -1,32 +0,0 @@
-# Inputs and Outputs
-
-TL;DR: Inputs and Outputs are a category of components that are used to define where data comes in and out of your flow. They also
-dynamically change the Interaction Panel and can be renamed to make it easier to build and maintain your flows.
-
-## Introduction
-
-Langflow 1.0 introduces new categories of components called Inputs and Outputs. They are used to make it easier to understand and interact with your flows.
-
-Let's take a look at the what they are and how they work.
-
-## Inputs
-
-Some Input components output Text, others Record, and others both (you pick). They can be used to input data into any field that accepts Text or Record data.
-
-{/* Show pictures of Chat Input into Prompt and Chat Input into File Path in a file loader component */}
-
-As with all components, they can be renamed to help you identify them more easily in the Interaction Panel and while using the API.
-
-{/* Show picture of renaming a Chat Input component and the Interaction Panel */}
-
-The difference between Chat Input and other Input components is the format of the output, the number of configurable fields, and the way they are displayed in the Interaction Panel.
-
-Chat Input components can output Text or Record. When you want to pass the sender name, or sender to the next component, you can use the Record output, and when you want to pass the message only you can use the Text output. This is useful when saving the message to a database or a memory system like Zep.
-
-You can find out more about it and the other Inputs [here](../components/inputs).
-
-## Outputs
-
-Some Output components output Text, others Record, and others both (you pick), just like the Inputs. They can be used to output data from any field that outputs Text or Record data.
-
-{/* Show pictures of Prompt into Chat Output and File Path in a file loader component into Chat Output */}

docs/docs/guides/superuser.mdx

@@ -1,7 +0,0 @@
-import ThemedImage from "@theme/ThemedImage";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import ZoomableImage from "/src/theme/ZoomableImage.js";
-import ReactPlayer from "react-player";
-
-Now, we need to explain what are the permissions the superuser gets. Once logged in, they can activate new users,
-edit them,

docs/docs/migration/compatibility.mdx

@@ -0,0 +1,44 @@
+import Admonition from '@theme/Admonition';
+
+# Compatibility with Previous Versions
+
+
+## TLDR;
+
+- You'll need to add a few components to your flow to make it compatible with the new version of Langflow.
+- Add a Runnable Executor, connect it to the last component (a Chain or an Agent) in your flow, and connect a Chat Input and a Chat Output to the Runnable Executor. This should work *most of the time*.
+- You might also need to update the Chain or Agent component to the latest version.
+- Most Components will work as they are, but you'll need to add an Input and an Output to your flow.
+- You can use the Runnable Executor to run a LangChain runnable (which is the output of many components before 1.0)
+- We need your feedback on this, so please let us know how it goes and what you think.
+
+## Introduction
+
+Langflow now works best with a flow that has an Input and an Output and that is mostly what you'll need to add to your existing flows.
+
+Hopefully, you'll find that even though you still can work with your current flows, updating all your components to the new version of Langflow will be worth it.
+
+We've tried to make it as easy as possible for you to adapt your existing flows to work seamlessly in the new version of Langflow.
+
+## How to Adapt Your Existing Flows
+
+
+The steps to take are few but not always simple. Here's how you can adapt your existing flows to work seamlessly in the new version of Langflow:
+
+<Admonition type="caution">
+    <p>**Caution:**</p>
+    <p>While this should work most of the time, it might not work for all flows. You might need to update the Chain or Agent component to the latest version. Please let us know if you encounter any issues.</p>
+</Admonition>
+
+1. **Check if your flow ends with a Chain or Agent component**.
+    - If it does not, it *should* work as it is because it probably was not a chat flow.
+2. **Add a Runnable Executor**.
+    - Add a Runnable Executor to the end of your flow.
+    - Connect the last component (a Chain or an Agent) in your flow to the Runnable Executor.
+3. **Add a Chat Input and a Chat Output**.
+    - Add a Chat Input and a Chat Output to your flow.
+    - Connect the Chat Input to the Runnable Executor.
+    - Connect the Chat Output to the Runnable Executor.
+
+{/* Add picture of the flow */}
+

docs/docs/migration/inputs-and-outputs.mdx

@@ -0,0 +1,36 @@
+# Inputs and Outputs
+
+TL;DR: Inputs and Outputs are a category of components that are used to define where data comes in and out of your flow. They also
+dynamically change the Interaction Panel and can be renamed to make it easier to build and maintain your flows.
+
+## Introduction
+
+Langflow 1.0 introduces new categories of components called Inputs and Outputs. They are used to make it easier to understand and interact with your flows.
+
+Let's start with what they have in common:
+
+- Components in these categories connect to components that have Text or Record inputs or outputs. Some can connect to both but you have to pick what type of data you want to output or input.
+- They can be renamed to help you identify them more easily in the Interaction Panel and while using the API.
+- They dynamically change the Interaction Panel to make it easier to understand and interact with your flows.
+
+Native Langflow Components were created to be powerful tools that work around Langflow's features. They are designed to be easy to use and understand, and to help you build your flows faster.
+
+Let's dive into Inputs and Outputs.
+
+## Inputs
+
+Inputs are components that are used to define where data comes into your flow. They can be used to receive data from the user, from a database, or from any other source that can be converted to Text or Record.
+
+The difference between Chat Input and other Input components is the format of the output, the number of configurable fields, and the way they are displayed in the Interaction Panel.
+
+Chat Input components can output Text or Record. When you want to pass the sender name, or sender to the next component, you can use the Record output, and when you want to pass the message only you can use the Text output. This is useful when saving the message to a database or a memory system like Zep.
+
+You can find out more about it and the other Inputs [here](../components/inputs).
+
+## Outputs
+
+Outputs are components that are used to define where data comes out of your flow. They can be used to send data to the user, to the Interaction Panel, or to define how the data will be displayed in the Interaction Panel.
+
+The Chat Output works similarly to the Chat Input but does not have a field that allows for written input. It is used as an Output definition and can be used to send data to the user.
+
+You can find out more about it and the other Outputs [here](../components/outputs).