ConversationPanel
Active conversation panel between chat sidebar and panel stack.
Controls
import {
ConversationPanelBody,
ConversationPanelContent,
ConversationPanelFooter,
ConversationPanelRoot,
ConversationPanelTabs,
PanelActions,
PanelHeader,
PanelHeaderContent,
PanelHeaderIcon,
PanelHeading,
PanelMeta,
PanelStatus,
PanelTitle,
} from "raft-ui";
<ConversationPanelRoot edge="inset">
<PanelHeader>
{/* Sticks to the top on mobile by default. */}
{/* optional caller-owned identity */}
<PanelHeaderIcon />
<PanelHeaderContent>
{/* use Heading when Title and Status form one group */}
<PanelHeading>
<PanelTitle />
{/* optional */}
<PanelStatus />
</PanelHeading>
{/* optional */}
<PanelMeta />
</PanelHeaderContent>
{/* optional caller-owned actions */}
<PanelActions>
{/* PanelAction / PanelToggleAction */}
</PanelActions>
</PanelHeader>
{/* optional caller-owned state layer, e.g. Banner */}
<ConversationPanelContent>
{/* optional caller-owned tabs */}
<ConversationPanelTabs />
<ConversationPanelBody>
{/* caller-owned scroll content and overlays, e.g. MessageList */}
</ConversationPanelBody>
{/* optional caller-owned footer */}
<ConversationPanelFooter>
{/* e.g. ComposerRoot */}
</ConversationPanelFooter>
</ConversationPanelContent>
</ConversationPanelRoot>import {
ConversationPanelEmptyState,
ConversationPanelEmptyStateBrand,
ConversationPanelEmptyStateBrandMark,
ConversationPanelRoot,
} from "raft-ui";
<ConversationPanelRoot>
<ConversationPanelEmptyState>
<ConversationPanelEmptyStateBrand>
<ConversationPanelEmptyStateBrandMark />
</ConversationPanelEmptyStateBrand>
<span>Select a conversation</span>
</ConversationPanelEmptyState>
</ConversationPanelRoot>ConversationPanel owns the active-conversation layout: tabs, the message scroll boundary, and an optional composer footer. Compose its identity and action row with PanelHeader and its parts; that shared API is documented on the Panel page. Member and agent details use the separate ProfilePanel specialization. This page documents the conversation-specific parts and keeps the complete message-list and composer assembly in the executable composition above.
API#WIP
| Prop | Type | Default | Description |
|---|---|---|---|
edge | "inset" | "attached" | "inset" | Controls the conversation panel's own edge treatment without relying on its AppShell slot. |
...props | section props | — | Full-height active conversation surface between sidebar and panel stack. Product shells own responsive placement and scroll behavior. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Toggle button props | — | Controlled pressed action for binary panel state. Pass pressed and onPressedChange; the caller owns the icon and accessible label for each state. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | div props | — | Single content region below the header, containing tabs, body, and footer. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | div props | — | Optional tab-chrome region. The caller provides the tab primitive and labels. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | div props | — | Scroll boundary for caller-owned message or task content. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | div props | — | Centered inactive-panel state. The caller owns its icon and copy. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | div props | — | Optional brand wrapper for the empty state. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | div props | — | Optional inner mark frame for caller-owned brand artwork. |