# Conversation

Canonical: https://socra.design/composed-components/conversation

A complete conversation with message actions, reactions, replies, and composing.

Compose the same message anatomy and controls used by Cortex. Shared components own appearance, actions, scrolling, and composing; products supply people, content, and delivery.

Status: ready. The interactive specimen renders the real shared exports and local example data.

Library: @socra/web-ui

## Anatomy

- AppBar identifies the conversation and keeps contextual actions available.
- MessageScroller owns the live edge and preserves the reading position.
- MessageList and MessageEntry retain Cortex identity, content, time, and action geometry.
- MessageActionButton, MessageReactions, and MessageReply expose shared conversation actions.
- ComposerDock and ComposerInput retain the draft and provide the send or retry action.

## States

- **Rest:** The conversation shows identity, content, time, reactions, and replies.
- **Hover:** Message actions reveal without moving the message.
- **Focus:** Keyboard focus reveals the same actions and remains visible in menus.
- **Pressed:** Commands use the shared pressed treatment and activate once.
- **Selected:** A selected reaction exposes its pressed state and current count.
- **Disabled:** An empty or unavailable composer cannot submit.
- **Loading:** Loading keeps the conversation frame and disables submission.
- **Error:** An inline send failure preserves the draft until retry succeeds.

## Motion

Actions use the shared reveal. Passive updates preserve reading anchors; explicit sending or returning to latest resumes following.

## Usage

- Supply ordered message IDs and trusted own-send classification. The shared scroller derives unread messages and preserves reading position. An authoritative server count can override the local count.
- Retain drafts until submission accepts ownership. A recoverable failure must preserve the work the person typed.

## Avoid


## Tokens

- `designTokens.color[mode].color.brand.primary`: Primary action role.
- `designTokens.color[mode].color.surface.secondary`: Working surface role.
- `designTokens.color[mode].color.content.primary`: Primary content role.
- `designTokens.spacing.role.contentGap`: Spacing relationship.
- `designTokens.shape.role.control`: Shape relationship.

## Example

```tsx
import { MessageList, MessageEntry } from '@socra/web-ui/message';
import { MessageScroller } from '@socra/web-ui/message-scroller';

<MessageScroller
  aria-label="Conversation messages"
  conversationKey="design-review"
  entries={[{ id: "message-1", ownSend: false }]}
>
  <MessageList>
      <MessageEntry anchorId="message-1" author="Maya Chen" at="2026-09-07T15:30:00Z" timeLabel="10:30 AM">
        The review notes are ready.
      </MessageEntry>
  </MessageList>
</MessageScroller>
```