Chat

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.

Overview

Real-time messaging

Send and receive messages instantly with streaming support

AI agent integration

Connect to workflows powered by AI agents

Session management

Automatic session handling and persistence across page refreshes

Customizable UI

Themeable components with independent styling for agent and user messages

Adding to a UI Flow

Navigate to UI Flows

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

Select or create a UI Flow

Select an existing UI flow or create a new one.

Open UI Assets panel

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

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)

Settings by sub-component

Chat (root)

Property	Description
Workflow	Select the workflow handling chat interactions
Welcome Message	Initial greeting (supports variables: `${customerName}`)
Thinking Message	Text shown during processing

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

Chat History

Property	Description
Title	Heading displayed on the chat history panel

Searching past conversationsEnd 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.

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.

Agent Message

Property	Description
Show Avatar	Toggle agent avatar visibility

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`

For runtime behavior (recording limits, playback rules) see 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 conditionSelect 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 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.

Available on Web and Android. The iOS renderer does not evaluate the Disabled condition yet, so on iOS the input stays enabled.

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.

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	—

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

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

Display modes

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

You can change the display mode after creation if needed.

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`

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

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.

Advanced documentation

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

Chat component - Full reference

Complete technical documentation in AI Platform section

Chat interface concepts

High-level chat integration patterns

AI Triggers

Launch chat-driven workflows with structured trigger messages

Knowledge bases

Ground AI responses in your data

AI in FlowX

AI capabilities overview

Getting Started

Concepts

FlowX.AI Designer

Building projects

Building blocks

Platform deep dive