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)
  └── ⌨️ Input (placeholder, send button)

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

Agent Message

Property	Description
Show Avatar	Toggle agent avatar visibility

Input

Property	Description
Placeholder	Hint text (e.g., “Ask me anything…”)

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
Input area	Border, background, send icon

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

Display types

When adding a Chat component, you select a display type that controls how the chat renders.

Type	Description	Placement
Fill	Renders within the parent component, filling the available space	Child of any container or card
Overlay - Floating	Floating widget or drawer rendered on top of page content	Child of Page or Root Zone
Overlay - Full Screen	Full screen chat experience rendered on top of page content	Child of Page or Root Zone

For Overlay, you can enable one or both sub-options (Floating and Full Screen). You can change the display type after creation.

Placement constraints: Fill is only available when the parent is a Container or Card. Overlay is only available when the parent is a Page or Root Zone. The unavailable option will be disabled in the selection dialog.

Sizing defaults

Display type	Default width	Default height	Position
Fill	Fill (parent width)	Fill (parent height)	Inherited from parent
Floating	`420px` (fixed)	`640px` (fixed)	Right: `24px`, Bottom: `80px`
Full Screen	Full viewport	Full viewport	N/A

For Fill, you can switch between Fill and Fixed sizing for both width and height. For Floating, width and height are fixed values that you can customize.

Floating action button (FAB)

Overlay display types (Floating and Full Screen) 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

For more details on display types and runtime behavior, 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

Chat intents

Configure intent-based routing

Knowledge bases

Ground AI responses in your data

AI in FlowX

AI capabilities overview

Getting Started

Concepts

FlowX.AI Designer

Building projects

Building blocks