Skip to main content
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

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
3

Open UI Assets panel

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

Add and configure

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

​
Configuration

​
Required settings

PropertyDescription
WorkflowThe agent workflow that handles chat interactions (required)
Welcome MessageInitial greeting shown when chat opens
Thinking MessageText 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)
Chat Component Anatomy

​
Settings by sub-component

PropertyDescription
WorkflowSelect the workflow handling chat interactions
Welcome MessageInitial greeting (supports variables: ${customerName})
Thinking MessageText shown during processing
Chat Component
PropertyDescription
Button Label”New chat” button text
TitleMain header text
SubtitleSecondary text below title
Show Chat IconToggle avatar icon visibility
Show SeparatorToggle separator line
Header
Available starting with FlowX.AI 5.6.0
PropertyDescription
TitleHeading displayed on the chat history panel
PropertyDescription
Show AvatarToggle agent avatar visibility
Agent Message
PropertyDescription
PlaceholderHint text (e.g., “Ask me anything…”)
Input
Available starting with FlowX.AI 5.6.0
Displays pre-configured prompt suggestions before the user types. Child of Messages (alongside Agent Message and User Message).
PropertyTypeDefaultDescription
Titlestring"Suggested Prompts"Heading text displayed above the suggestions
Promptsstring[]—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.

​
Styling

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

​
Themeable elements

ElementKey properties
Chat containerPadding, border, background, shadow
HeaderTitle/subtitle text styles, separator
Messages areaPadding, gap between messages
Agent MessageAvatar icon, text style, background
User MessageBubble border, radius, background, text
Suggested PromptsTitle text style, prompt chip appearance, hover state
Input areaBorder, background, send icon
All styling can be configured in Theme Admin for consistent branding. Changes preview in real-time.

​
Display modes

Updated in FlowX.AI 5.6.0The Chat component now supports four display modes. Mobile chat support and per-mode theme configuration were also added in this release.
When adding a Chat component, you select a display mode that controls how the chat renders and where it can be placed.
Display modeDescriptionPlacement
InlineRenders in place within the page layout (default)Child of any container or card
OverlayPositioned overlay panel with minimize and expand controlsChild of Page or Root Zone
FullScreenTakes over the full viewportChild of Page or Root Zone
FloatingFloating 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 modeDefault widthDefault heightNotes
InlineFill (parent)Fill (parent)Supports Fill or Fixed sizing
OverlayConfigurableConfigurablePositioned over content
FullScreenFull viewportFull viewportNo sizing controls
Floating420px (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:
PropertyDefaultDescription
Width56pxFAB button width
Height56pxFAB button height
PositionRight: 24px, Bottom: 24pxFixed 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.

​
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
Last modified on March 30, 2026