# Chat Components

Chat components provide interactive interfaces for user input and AI output in the Playground.

## Chat Input

This component collects user input as `Text` strings from the chat and wraps it in a Message object that includes the input text, sender information, session ID, file attachments, and styling properties.

It can optionally store the message in a chat history.

### Inputs

| Name                   | Display Name     | Info                                                                            |
| ---------------------- | ---------------- | ------------------------------------------------------------------------------- |
| input\_value           | Text             | The Message to be passed as input.                                              |
| should\_store\_message | Store Messages   | Store the message in the history.                                               |
| sender                 | Sender Type      | The type of sender.                                                             |
| sender\_name           | Sender Name      | The name of the sender.                                                         |
| session\_id            | Session ID       | The session ID of the chat. If empty, the current session ID parameter is used. |
| files                  | Files            | The files to be sent with the message.                                          |
| background\_color      | Background Color | The background color of the icon.                                               |
| chat\_icon             | Icon             | The icon of the message.                                                        |
| text\_color            | Text Color       | The text color of the name.                                                     |

### Outputs

| Name    | Display Name | Info                                                             |
| ------- | ------------ | ---------------------------------------------------------------- |
| message | Message      | The resulting chat message object with all specified properties. |

### Message method

The `ChatInput` class provides an asynchronous method to create and store a `Message` object based on the input parameters. The `Message` object is created in the `message_response` method of the ChatInput class using the `Message.create()` factory method.

```javascript
message = await Message.create(
    text=self.input_value,
    sender=self.sender,
    sender_name=self.sender_name,
    session_id=self.session_id,
    files=self.files,
    properties={
        "background_color": background_color,
        "text_color": text_color,
        "icon": icon,
    },
)
```

## Chat Output

The **Chat Output** component creates a Message object that includes the input text, sender information, session ID, and styling properties.

### Inputs

| Name                   | Display Name     | Info                                                                                                                                           |
| ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| input\_value           | Text             | The message to be passed as output.                                                                                                            |
| should\_store\_message | Store Messages   | The flag to store the message in the history.                                                                                                  |
| sender                 | Sender Type      | The type of sender.                                                                                                                            |
| sender\_name           | Sender Name      | The name of the sender.                                                                                                                        |
| session\_id            | Session ID       | The session ID of the chat. If empty, the current session ID parameter is used.                                                                |
| data\_template         | Data Template    | The template to convert Data to Text. If the option is left empty, it is dynamically set to the Data's text key.                               |
| background\_color      | Background Color | The background color of the icon.                                                                                                              |
| chat\_icon             | Icon             | The icon of the message.                                                                                                                       |
| text\_color            | Text Color       | The text color of the name.                                                                                                                    |
| clean\_data            | Basic Clean Data | When enabled, `DataFrame` inputs are cleaned when converted to text. Cleaning removes empty rows, empty lines in cells, and multiple newlines. |

### Outputs

| Name    | Display Name | Info                                                             |
| ------- | ------------ | ---------------------------------------------------------------- |
| message | Message      | The resulting chat message object with all specified properties. |

## Chat Components Example Flow

1. To use the **Chat Input** and **Chat Output** components in a flow, connect them to components that accept or send the Message type.

For this example, connect a **Chat Input** component to an **OpenAI** model component's **Input** port, and then connect the **OpenAI** model component's **Message** port to the **Chat Output** component.

2. In the **OpenAI** model component, in the **OpenAI API Key** field, add your **OpenAI API key**.

The flow looks like this:

![Chat input and output components connected to an OpenAI model](https://2739525811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGUcjvdv7MzVy7GYqImRT%2Fuploads%2FMVeR5Det5237Xxor9XIQ%2FUntitled%20diagram%20_%20Mermaid%20Chart-2025-09-08-021245.png?alt=media\&token=a1962770-f3ce-449e-941c-b05799aea020)

3. To send a message to your flow, open the [**Playground**](https://guidenai.gitbook.io/broxi/workflows/playground), and then enter a message. The **OpenAI** model component responds. Optionally, in the **OpenAI** model component, enter a **System Message** to control the model's response.

### Send chat messages with the API

The **Chat Input** component is often the entry point for passing messages to the BroxiAI API. To send messages programmatically to your BroxiAI server, you can use the API endpoints as described in the main documentation.
