Chat - Thread-only

A single-pane chat surface with no conversation sidebar — ideal for embedded copilots and focused AI assistants.

When no conversations or initialConversations are provided, ChatBox automatically hides the left panel and renders the thread full-width.

Thread-only layout — no conversation list pane
Minimal props: just an adapter and a container size
Automatic layout adaptation based on whether conversations are present

No messages yet

Type a message to get started

Edit code

<ChatBox
  adapter={adapter}
  members={demoMembers}
  sx={{
    height: 460,
    border: '1px solid',
    borderColor: 'divider',
    borderRadius: 1,
  }}
/>

<ChatBox
  adapter={adapter}
  members={demoMembers}
  sx={{
    height: 460,
    border: '1px solid',
    borderColor: 'divider',
    borderRadius: 1,
  }}
/>

Press Enter to start editing

When to use this layout

Use the thread-only mode when:

Building an embedded copilot or AI assistant inside a dashboard or panel
The product has a single chat thread per user (no inbox)
You want a compact, focused chat surface without a sidebar

Use the two-pane layout (Multi-conversation) when users need to switch between multiple conversations.

ChatBox checks whether any conversations (or initialConversations) are present. If none are provided, the conversation list component is not rendered, and ChatLayout collapses the left pane automatically — the thread fills the full width.

To restore the sidebar at any time, pass at least one conversation:

<ChatBox
  adapter={adapter}
  initialConversations={[{ id: 'main', title: 'Support' }]}
  initialActiveConversationId="main"
/>

API

ChatRoot

Chat - Thread-only

When to use this layout

How it works

See also

API