ConversationPanel

Active conversation panel between chat sidebar and panel stack.

Preview#

proj-uiux
Design system migration
Controls

Anatomy#

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>

Usage#

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

ConversationPanelRoot#

edgedefault: "inset"
"inset" | "attached"
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.

PanelToggleAction#

...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.

ConversationPanelContent#

...props
div props
Single content region below the header, containing tabs, body, and footer.

ConversationPanelTabs#

...props
div props
Optional tab-chrome region. The caller provides the tab primitive and labels.

ConversationPanelBody#

...props
div props
Scroll boundary for caller-owned message or task content.

ConversationPanelEmptyState#

...props
div props
Centered inactive-panel state. The caller owns its icon and copy.

ConversationPanelEmptyStateBrand#

...props
div props
Optional brand wrapper for the empty state.

ConversationPanelEmptyStateBrandMark#

...props
div props
Optional inner mark frame for caller-owned brand artwork.