> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Chat

> Enable interactive AI agent conversations with end-users through a conversational interface in FlowX applications.

The Chat component provides a conversational interface for AI-powered interactions. It enables real-time messaging between users and AI agents within your FlowX applications.

<video controls autoPlay muted loop src="https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/5.x/chat_comp.mp4" />

## Overview

> [card] Real-time messaging
>
> Send and receive messages instantly with streaming support

> [card] AI agent integration
>
> Connect to workflows powered by AI agents

> [card] Session management
>
> Automatic session handling and persistence across page refreshes

> [card] Customizable UI
>
> Themeable components with independent styling for agent and user messages

## Adding to a UI Flow

**1. Navigate to UI Flows**

Open your project and go to **UI Flows** from the left navigation menu.

**2. Select or create a UI Flow**

Select an existing UI flow or create a new one.

![UI Flows](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/5.x/chat1.png)

**3. Open UI Assets panel**

In the left sidebar, expand the **UI Assets** panel. Find Chat alongside Table, Collection, and other components.

![UI Assets](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/5.x/chat2.png)

**4. Add and configure**

Drag **Chat** onto the canvas, then configure properties in the right panel.

***

## Configuration

### Required settings

| Property | Description |
| - | - |
| **Workflow** | The agent workflow that handles chat interactions (required) |
| **Welcome Message** | Initial greeting shown when chat opens |
| **Thinking Message** | Text displayed while agent processes (default: "Thinking...") |

### Component hierarchy

The Chat component has configurable sub-components:

```
📁 Chat
  ├── 📄 Header (title, subtitle, new chat button)
  ├── 📁 Messages
  │     ├── 💬 Agent Message (avatar, text styling)
  │     ├── 💬 User Message (bubble styling)
  │     ├── 📎 Attached Files (files sent with a user message)
  │     │     └── 📄 File Item (one row per sent file)
  │     └── 💡 Suggested Prompts (pre-configured prompt suggestions)
  └── ⌨️ Input (placeholder, send button)
        └── 📎 File Attachments (accepted types, limits, error messages)
              └── 📄 File Item (one row per pending file)
```

![Chat Component Anatomy](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/5.x/chat_anatomy.png)

### Settings by sub-component

> [accordion] Chat (root)
>
> | Property | Description |
> | - | - |
> | **Workflow** | Select the workflow handling chat interactions |
> | **Welcome Message** | Initial greeting (supports variables: `${customerName}`) |
> | **Thinking Message** | Text shown during processing |
>
> ![Chat Component](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/5.x/chat_props.png)

> [accordion] Header
>
> | Property | Description |
> | - | - |
> | **Button Label** | "New chat" button text |
> | **Title** | Main header text |
> | **Subtitle** | Secondary text below title |
> | **Show Chat Icon** | Toggle avatar icon visibility |
> | **Show Separator** | Toggle separator line |
>
> ![Header](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/5.x/chat_header.png)

> [accordion] Chat History
>
> | Property | Description |
> | - | - |
> | **Title** | Heading displayed on the chat history panel |
>
> **Searching past conversations**
>
> End users can search the conversation list from the history panel. Searching starts once the query reaches a minimum length, so a single character does not trigger a lookup, and results replace the list while the query is active.
>
> > [!NOTE]
> >
> > Conversation previews in the list can show raw Markdown characters such as `#` and `*` when an agent reply contains them. Rendering Markdown in the preview line is not yet supported.

> [accordion] Agent Message
>
> | Property | Description |
> | - | - |
> | **Show Avatar** | Toggle agent avatar visibility |
>
> ![Agent Message](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/5.x/agent_message.png)

> [accordion] Input
>
> | Property | Description | Default |
> | - | - | - |
> | **Placeholder** | Hint text (e.g., "Ask me anything...") | — |
> | **Enable Voice Input** | Show the microphone button so users can send voice messages. | `Off` |
> | **Enable File Attachments** | Show the attach button so users can send files together with a message. | `Off` |
>
> ![Input](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/5.x/input_message.png)
>
> For runtime behavior (recording limits, playback rules) see [Voice input](https://docs.flowx.ai/6.x/ai-platform/chat-component.md#voice-input) in the Chat component reference. Turning on **Enable File Attachments** activates the **File Attachments** sub-component below.
>
> **Turning off the input on a business condition**
>
> Select the chat **Input**, then open **Settings** → **Expressions** → **Disabled condition** and write a JavaScript condition. When it evaluates true, users can still read the conversation but cannot send a new message. The **Expressions** section also holds the **Hide condition** field, which works the same way but removes the input entirely. See [Hide and disabled conditions](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-designer.md#hide-and-disabled-conditions) for how both fields behave across components.
>
> Use it to close a conversation once a journey reaches a terminal state, for example after a case is submitted or a decision is returned, while keeping the transcript readable.
>
> > [!WARNING]
> >
> > Available on Web and Android. The iOS renderer does not evaluate the **Disabled condition** yet, so on iOS the input stays enabled.

> [accordion] Suggested Prompts
>
> Displays pre-configured prompt suggestions before the user types. Child of **Messages** (alongside Agent Message and User Message).
>
> | Property | Type | Default | Description |
> | - | - | - | - |
> | **Title** | string | `"Suggested Prompts"` | Heading text displayed above the suggestions |
> | **Prompts** | string\[] | — | List of prompt strings shown as clickable suggestions |
>
> Clicking a suggestion sends it as the user's message. Long prompts are truncated and revealed via tooltip.

> [accordion] File Attachments
>
> Lets end users send files together with a text message. Turn on **Enable File Attachments** on the **Input** sub-component to activate it, then configure the accepted files and the error copy here.
>
> Hierarchy is **Chat** → **Input** → **File Attachments** → **File Item**. Files the user has already sent appear under **Messages** → **Attached Files** → **File Item**.
>
> | Property | Description | Default |
> | - | - | - |
> | **Accepted file types** | File types the picker accepts, for example `png, jpg, pdf` | All types |
> | **Invalid file message** | Shown on a file whose type is not accepted | — |
> | **Max number of files** | Maximum files per message. The Designer rejects any value above 10 | `10` |
> | **Max files error message** | Shown when the file count is exceeded | — |
> | **Max files size (in bytes)** | Maximum total upload size, for example `5000000` | `5000000` |
> | **Files size error message** | Shown when the size limit is exceeded | — |
>
> > [!WARNING]
> >
> > All six fields are required once file attachments are turned on. The defaults above are the runtime fallbacks the renderer applies when a field is left empty, not values the Designer fills in for you.
>
> **File Item** has no properties of its own. It is the per-file row, and it carries its own default and error styling.
>
> For upload behavior, error handling, and how uploaded files reach the agent, see [File attachments](https://docs.flowx.ai/6.x/ai-platform/chat-component.md#file-attachments) in the Chat component reference.

***

## Styling

Configure visual styling through **Theme Admin** (Design Assets → Themes → Components → Chat).

### Themeable elements

| Element | Key properties |
| - | - |
| **Chat container** | Padding, border, background, shadow |
| **Header** | Title/subtitle text styles, separator |
| **Messages area** | Padding, gap between messages |
| **Agent Message** | Avatar icon, text style, background |
| **User Message** | Bubble border, radius, background, text |
| **Suggested Prompts** | Title text style, prompt chip appearance, hover state |
| **Input area** | Border, background, send icon, attach icon |
| **File Attachments / File Item** | Padding, border, radius, background, file name and file info text, delete and download icons, plus an error state on File Item |

> [!TIP]
>
> All styling can be configured in Theme Admin for consistent branding. Changes preview in real-time.

***

## Display modes

> [!NOTE]
>
> The Chat component supports four display modes, including mobile chat and per-mode theme configuration.

When adding a Chat component, you select a display mode that controls how the chat renders and where it can be placed.

| Display mode | Description | Placement |
| - | - | - |
| **Inline** | Renders in place within the page layout (default) | Child of any container or card |
| **Overlay** | Positioned overlay panel with minimize and expand controls | Child of Page or Root Zone |
| **FullScreen** | Takes over the full viewport | Child of Page or Root Zone |
| **Floating** | Floating panel triggered by a FAB (Floating Action Button) | Child of Page or Root Zone |

> [!NOTE]
>
> You can change the display mode after creation if needed.

> [!WARNING]
>
> **Placement constraints:** Inline is only available when the parent is a **Container** or **Card**. Overlay, FullScreen, and Floating are only available when the parent is a **Page** or **Root Zone**. Unavailable options are disabled in the selection dialog.

### Sizing defaults

| Display mode | Default width | Default height | Notes |
| - | - | - | - |
| **Inline** | Fill (parent) | Fill (parent) | Supports Fill or Fixed sizing |
| **Overlay** | Configurable | Configurable | Positioned over content |
| **FullScreen** | Full viewport | Full viewport | No sizing controls |
| **Floating** | `420px` (fixed) | `640px` (fixed) | FAB at `right: 24px`, `bottom: 24px` |

> [!TIP]
>
> For Inline, you can switch between **Fill** and **Fixed** sizing for both width and height. For Floating, width and height are fixed values you can customize in the style panel.

### Floating action button (FAB)

Floating and FullScreen modes include a **Floating Action Button** that triggers the chat. The FAB is configurable in the style panel:

| Property | Default | Description |
| - | - | - |
| **Width** | `56px` | FAB button width |
| **Height** | `56px` | FAB button height |
| **Position** | Right: `24px`, Bottom: `24px` | Fixed position on screen |

#### Notification dot

When an agent replies while the chat is collapsed, a notification dot appears on the floating action button so users see there is something to read. It clears when the user opens the chat.

Style it in the **Notification Dot** section of the chat style panel. The values apply to both Floating and FullScreen modes.

| Property | Default | Description |
| - | - | - |
| **Height** | `22px` | Dot diameter |
| **Offset X** | `0` | Horizontal offset from its anchor on the button |
| **Offset Y** | `0` | Vertical offset from its anchor on the button |

> [!NOTE]
>
> The dot does not survive a page refresh. If a user reloads the page before opening the chat, the dot clears even though the agent reply is still unread.

### Theming per display mode

Theme values are configured independently per display mode and per platform (Web, Android, iOS) through **Design Assets → Themes → Components → Chat**. Supported properties include padding and margin for each mode.

For complete runtime details, see the [Chat component reference](https://docs.flowx.ai/6.x/ai-platform/chat-component.md#display-modes).

***

## Advanced documentation

For comprehensive documentation including runtime behavior, session management, custom persistence workflows, SDK integration, and troubleshooting:

> [card] [Chat component - Full reference](https://docs.flowx.ai/6.x/ai-platform/chat-component.md)
>
> Complete technical documentation in AI Platform section

## Related resources

> [card] [Chat interface concepts](https://docs.flowx.ai/6.x/ai-platform/using-agents/chat-interface.md)
>
> High-level chat integration patterns

> [card] [AI Triggers](https://docs.flowx.ai/6.x/ai-platform/chat-driven-workflows.md#ai-triggers)
>
> Launch chat-driven workflows with structured trigger messages

> [card] [Knowledge bases](https://docs.flowx.ai/6.x/docs/platform-deep-dive/integrations/knowledge-base-integration/knowledge-base-overview.md)
>
> Ground AI responses in your data

> [card] [AI in FlowX](https://docs.flowx.ai/6.x/ai-platform/ai-in-flowx.md)
>
> AI capabilities overview


## Related topics

- [Chat component](https://docs.flowx.ai/6.x/ai-platform/chat-component.md)
- [Chat interface](https://docs.flowx.ai/6.x/ai-platform/using-agents/chat-interface.md)
- [Chat-driven workflows](https://docs.flowx.ai/6.x/ai-platform/chat-driven-workflows.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.