Fluxo UIFluxo UIv0.4.93

Chat Window

A complete, fully-controlled chat surface. Bring your own messages and backend; the component handles rendering, the composer, theming, attachments, reactions, replies, accessibility, and a whole lot more.

Basic Usage

Type any message — the bot will stream a few canned replies back to mimic a real conversation.

Basic Chat Window

A fully working chat window. Type a message — the bot will reply with a stream of canned responses to give you a real chat feel.

import { ChatWindow } from 'fluxo-ui';
import { useState } from 'react';

function MyChat() {
    const [messages, setMessages] = useState([
        { id: '1', role: 'assistant', type: 'text', content: 'Hello! How can I help?' },
    ]);

    const handleSend = (data) => {
        setMessages((prev) => [
            ...prev,
            { id: String(Date.now()), role: 'user', type: 'text', content: data.text },
        ]);
        // …call your backend, then push the assistant reply back into messages
    };

    return (
        <ChatWindow
            messages={messages}
            onSendMessage={handleSend}
            header={{ title: 'Support', subtitle: 'Online' }}
            theme="modern"
            showAvatars
            showTime
        />
    );
}

Live Theme Switcher

Switch between any of the 9 built-in themes and the color mode (auto/light/dark) on a running chat. Every surface, bubble, and gradient updates instantly.

Live Theme Switcher

Switch between any of the 9 built-in themes on a running chat — colors, gradients, bubble shapes, and surfaces update instantly. Try sending a message to feel the theme in motion.

Theme:
Mode:
const [theme, setTheme] = useState('classic');
const [colorMode, setColorMode] = useState('auto');

<ChatWindow
    theme={theme}
    colorMode={colorMode}
    messages={messages}
    onSendMessage={handleSend}
/>

Rich Features

Reactions, replies, the actions menu, feedback, emoji picker, and drag-drop attachments — all enabled at once. Hover or long-press a message to interact.

Rich Features

Reactions, replies, message actions, feedback (👍/👎), emoji picker, attachments — all enabled. Hover any message to see the action bar.

<ChatWindow
    messages={messages}
    onSendMessage={handleSend}
    showAvatars
    showTime
    reactions={{ enabled: true, onReact: (id, emoji) => mutateReaction(id, emoji) }}
    feedback={{ enabled: true, onFeedback: (id, value) => recordFeedback(id, value) }}
    reply={{ enabled: true, style: 'pinned' }}
    messageActions={{
        enabled: true,
        items: [
            { id: 'copy', label: 'Copy', onClick: copyToClipboard },
            { id: 'delete', label: 'Delete', onClick: deleteMessage, appliesTo: 'user' },
        ],
    }}
    emoji={{ enabled: true, shortcodes: true }}
    attachments={{ enabled: true, maxFiles: 5, maxSize: 10 * 1024 * 1024 }}
/>

Import

import { ChatWindow } from 'fluxo-ui';

import type {
  ChatWindowProps,
  ChatMessage,
  ChatRole,
  ChatTheme,
  ChatColorMode,
  ChatSendPayload,
} from 'fluxo-ui';

ChatWindow Props

messagesreq
ChatMessage[]

Controlled messages array. Consumer is fully responsible for maintaining and mutating this list.

onSendMessage
(data: ChatSendPayload) => void

Fired when the user sends a message via the composer. Includes text, attachments, and inReplyTo when relevant.

onUserAction
(event: UserActionEvent) => void

Generic callback for in-message user actions (option click, custom plugin actions, etc.).

composerText
string

Controlled composer value. If undefined, the component manages composer state internally.

onComposerTextChange
(text: string) => void

Fires whenever composer text changes (typing, emoji insert, shortcode replacement).

composerPlaceholder
string"'Type your message...'"

Placeholder shown in the composer textarea.

composerDisabled
boolean

Disables the composer.

renderComposer
(ctx: ComposerCtx) => ReactNode

Replaces the entire composer with a custom render. Built-in actions are skipped.

showSendButton
boolean"true"

Show the send button in the composer.

sendOnEnter
boolean"true"

Send when Enter is pressed (Shift+Enter inserts newline).

showMic
boolean

Show the mic button. Defaults to true if onMicClick is set.

onMicClick
() => void

Callback when the mic button is clicked. Voice handling is delegated entirely to the consumer.

isMicActive
boolean

When true, the mic button shows a pulsing animation.

emoji
EmojiConfig

Enable + configure the emoji picker, categories, custom emojis, and shortcode replacement.

attachments
AttachmentDisplayConfig

Enable + configure attachments: file types, max files, max size, display mode in completed messages, onAttach callback.

header
ChatHeaderConfig

Header config: title, subtitle, logo, colors, button visibility flags, menu items.

renderHeader
(ctx: HeaderCtx) => ReactNode

Replace the entire header with a custom render.

icons
ChatIcons

Override every built-in icon (minimize, close, restart, menu, send, mic, attach, emoji, bot, user, status icons).

tooltips
ChatTooltips

Tooltip text for every built-in icon button.

onMinimize
() => boolean | Promise<boolean>

Fires when minimize is clicked. Return false to cancel.

onClose
() => boolean | Promise<boolean>

Fires when close is clicked. Return false to cancel. Consumer is expected to unmount.

onRestart
() => boolean | Promise<boolean>

Fires when restart is clicked. Return false to cancel.

isMinimized
boolean

Controlled minimized state. When true, the window does not render.

headerSlot
ReactNode

Custom content rendered between the header and message body.

aboveComposerSlot
ReactNode

Custom content rendered above the composer (suggestion chips, etc.).

belowComposerSlot
ReactNode

Custom content rendered below the composer (disclaimer, branding).

showTime
boolean

Show time under each message.

showAvatars
boolean"true"

Show avatar circles next to messages.

customMessageTypes
Record<string, ComponentType>

Plug-in custom message renderers keyed by type. Merged into the built-in template map.

messageActions
MessageActionsConfig

Per-message action bar shown on hover/long-press. Consumer-driven items array.

reactions
ReactionsConfig

Emoji reactions on messages. Consumer maintains reactions on each message and gets onReact.

feedback
FeedbackConfig

Thumbs up/down feedback on assistant messages. Optional askForComment flag.

reply
ReplyConfig

Enable replies. Style: pinned (chip in composer only), quoted (embedded in new message), both.

typingUsers
TypingUser[]

List of users currently typing. Empty / undefined hides indicator.

showLoader
boolean

Force-show the typing dots loader (legacy single-bot mode).

onRetryMessage
(messageId: string) => void

Fires when the user clicks the failed-status icon to retry.

draggable
boolean

Enable dragging the window by the header. Disabled on mobile.

resizable
boolean

Enable resizing from any edge or corner. Disabled on mobile.

persist
boolean | 'session'

true uses localStorage, 'session' uses sessionStorage, false/undefined disables persistence.

persistKey
string"'fluxo-chat-window'"

Storage key for persisted position and size.

defaultPosition
{ x?: number; y?: number }

Initial drag offset (only applies when draggable).

defaultSize
{ width?: number; height?: number }

Initial size in pixels (only applies when resizable).

minWidth
number"320"

Minimum window width in pixels.

minHeight
number"420"

Minimum window height in pixels.

maxWidth
number | string"'95vw'"

Maximum window width.

maxHeight
number | string"'95vh'"

Maximum window height.

theme
ChatTheme"'classic'"

Visual theme: classic, modern, iris, dusk, mist, ember, canvas, prism, aurora.

colorMode
'light' | 'dark' | 'auto'

Force light or dark mode. Auto follows OS / theme defaults.

cssVars
Record<string, string>

Override --euic-* CSS variables for primary, fonts, surfaces, etc.

className
string

Extra class on the root container.

style
CSSProperties

Extra inline styles on the root container.

align
'bottomRight' | 'bottomLeft'"'bottomRight'"

Anchor side when not draggable.

spacingCorner
string"'5px'"

Distance from the anchored corner edge.

spacingBottom
string"'5px'"

Distance from the anchored bottom edge.

ariaLabel
string"'Chat'"

ARIA label for the window dialog.

announcements
boolean"true"

Live-region announcements for new assistant messages.

trapFocus
boolean

Trap focus inside the window. Defaults to true in fullscreen mode.

shortcutsHelp
boolean"true"

Enable Ctrl+/ shortcuts help dialog.

fullscreen
boolean

Render the window full-viewport.

noShadow
boolean

Remove window shadow.

noAnimation
boolean

Disable open/close animations.

fontFamily
string

Override the body font family.

width
number | string

Explicit width when not resizable.

height
number | string

Explicit height when not resizable.

Capabilities

Fully Controlled

You own the messages array. Send/receive/update is just state.

9 Themes Built-In

Classic, modern, iris, dusk, mist, ember, canvas, prism, aurora.

Light & Dark

Auto, light, or dark color mode — every theme adapts cleanly.

Reactions & Replies

Emoji reactions, threaded replies (pinned/quoted), message actions.

Attachments

Drag-and-drop files, accept filters, max size, custom display modes.

Emoji + Shortcodes

Built-in picker, recents, and live `:smile:` → 😄 replacement.

Drag & Resize

Move and resize the floating window; persist position to local/session storage.

Custom Templates

Plug in any message type via `customMessageTypes` keyed by `type`.

Accessibility

Trap-focus, ARIA labels, keyboard shortcuts, live announcements.