> ## 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.

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

## Overview

<CardGroup cols={2}>
  <Card title="Real-time messaging" icon="bolt">
    Send and receive messages instantly with streaming support
  </Card>

  <Card title="AI agent integration" icon="robot">
    Connect to workflows powered by AI agents
  </Card>

  <Card title="Session management" icon="id-badge">
    Automatic session handling and persistence across page refreshes
  </Card>

  <Card title="Customizable UI" icon="palette">
    Themeable components with independent styling for agent and user messages
  </Card>
</CardGroup>

## Adding to a UI Flow

<Steps>
  <Step title="Navigate to UI Flows">
    Open your project and go to **UI Flows** from the left navigation menu.
  </Step>

  <Step title="Select or create a UI Flow">
    Select an existing UI flow or create a new one.

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

  <Step title="Open UI Assets panel">
    In the left sidebar, expand the **UI Assets** panel. Find Chat alongside Table, Collection, and other components.

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

  <Step title="Add and configure">
    Drag **Chat** onto the canvas, then configure properties in the right panel.
  </Step>
</Steps>

***

## 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)
  │     └── 💡 Suggested Prompts (pre-configured prompt suggestions)
  └── ⌨️ Input (placeholder, send button)
```

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

### Settings by sub-component

<AccordionGroup>
  <Accordion title="Chat (root)" icon="comments">
    | Property             | Description                                              |
    | -------------------- | -------------------------------------------------------- |
    | **Workflow**         | Select the workflow handling chat interactions           |
    | **Welcome Message**  | Initial greeting (supports variables: `${customerName}`) |
    | **Thinking Message** | Text shown during processing                             |

    <Frame>
      ![Chat Component](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/5.x/chat_props.png)
    </Frame>
  </Accordion>

  <Accordion title="Header" icon="window-maximize">
    | 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         |

    <Frame>
      ![Header](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/5.x/chat_header.png)
    </Frame>
  </Accordion>

  <Accordion title="Chat History" icon="clock-rotate-left">
    | Property  | Description                                 |
    | --------- | ------------------------------------------- |
    | **Title** | Heading displayed on the chat history panel |
  </Accordion>

  <Accordion title="Agent Message" icon="robot">
    | Property        | Description                    |
    | --------------- | ------------------------------ |
    | **Show Avatar** | Toggle agent avatar visibility |

    <Frame>
      ![Agent Message](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/5.x/agent_message.png)
    </Frame>
  </Accordion>

  <Accordion title="Input" icon="keyboard">
    | 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`   |

    <Frame>
      ![Input](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/5.x/input_message.png)
    </Frame>

    For runtime behavior (recording limits, playback rules) see [Voice input](/5.9/ai-platform/chat-component#voice-input) in the Chat component reference.
  </Accordion>

  <Accordion title="Suggested Prompts" icon="lightbulb">
    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>
</AccordionGroup>

***

## 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                         |

<Tip>
  All styling can be configured in Theme Admin for consistent branding. Changes preview in real-time.
</Tip>

***

## Display modes

<Info>
  The Chat component supports four display modes, including mobile chat and per-mode theme configuration.
</Info>

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     |

<Info>
  You can change the display mode after creation if needed.
</Info>

<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.
</Warning>

### 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.
</Tip>

### 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 |

### 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](/5.9/ai-platform/chat-component#display-modes).

***

## Advanced documentation

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

<Card title="Chat component - Full reference" icon="book" href="/5.9/ai-platform/chat-component">
  Complete technical documentation in AI Platform section
</Card>

## Related resources

<CardGroup cols={2}>
  <Card title="Chat interface concepts" href="/5.9/ai-platform/using-agents/chat-interface" icon="comments">
    High-level chat integration patterns
  </Card>

  <Card title="AI Triggers" href="/5.9/ai-platform/conversational-workflows#ai-triggers" icon="bullseye">
    Launch conversational workflows with structured trigger messages
  </Card>

  <Card title="Knowledge bases" href="/5.9/docs/platform-deep-dive/integrations/knowledge-base-integration/knowledge-base-overview" icon="database">
    Ground AI responses in your data
  </Card>

  <Card title="AI in FlowX" href="/5.9/ai-platform/ai-in-flowx" icon="robot">
    AI capabilities overview
  </Card>
</CardGroup>