Fluxo UIFluxo UIv0.4.93

Chat Conversations

A two-pane inbox layout. The left pane is a searchable, sortable list of conversations; the right pane renders whatever you put inside (typically a ChatWindow). Pin, archive, badge, count unread, group, sort — all driven by your own data shape.

Live Demo

Multi-Conversation Inbox

A working inbox with multiple conversations. Click any thread on the left to switch — the right pane updates instantly. Each conversation gets its own theme to make context-switching obvious.

Inbox
<ChatConversations
    conversations={conversations}
    activeId={activeId}
    onSelect={setActiveId}
    title="Inbox"
>
    <ChatWindow messages={messagesFor(activeId)} onSendMessage={handleSend} />
</ChatConversations>

Import

import { ChatConversations, ChatWindow } from 'fluxo-ui';

import type { ChatConversationItem, ChatConversationsProps } from 'fluxo-ui';

ChatConversations Props

conversationsreq
ChatConversationItem[]

List of conversations to render in the sidebar.

activeId
string

ID of the currently active conversation; highlighted in the list.

onSelect
(id: string) => void

Fires when a conversation row is clicked.

onSearch
(query: string) => void

Fires when the search input changes. Internal filtering still runs in addition to this.

onPin
(id: string, pinned: boolean) => void

Fires when an item is pinned/unpinned (consumer-triggered actions).

onArchive
(id: string, archived: boolean) => void

Fires when an item is archived/unarchived.

onDelete
(id: string) => void

Fires when an item is deleted.

searchable
boolean"true"

Show the built-in search input above the list.

sidebarWidth
number | string"'280px'"

Initial width of the sidebar panel.

minSidebarWidth
number"200"

Minimum sidebar panel width.

maxSidebarWidth
number"480"

Maximum sidebar panel width.

hideArchived
boolean

Filter archived conversations out of the visible list.

emptyState
ReactNode

Content rendered when no conversations match.

renderItem
(item: ChatConversationItem, ctx) => ReactNode

Custom row renderer.

children
ReactNode

Right-side content. Typically a <ChatWindow /> for the active conversation.

className
string

Extra class on the root container.

style
CSSProperties

Extra inline styles on the root container.

placeholder
string"'Search conversations…'"

Search input placeholder.

title
ReactNode

Optional title shown above the search input.