Message

The Message component lays out a single row in a conversation. It handles the avatar, alignment, header, and footer around the message surface. Render the visible surface inside it with Bubble; for the scroll container around a conversation, use MessageScroller.

Usage

import { Bubble, BubbleContent } from '@epilot/spark-ui/bubble'
import {
  Message,
  MessageAvatar,
  MessageContent,
} from '@epilot/spark-ui/message'

<Message>
  <MessageAvatar>{/* avatar */}</MessageAvatar>
  <MessageContent>
    <Bubble>
      <BubbleContent>How can I help you today?</BubbleContent>
    </Bubble>
  </MessageContent>
</Message>

Note: Message owns the row layout: avatar, alignment, header, and footer. Render the visible message surface inside it with Bubble.

Composition

Message
├── MessageAvatar
└── MessageContent
    ├── MessageHeader
    ├── Bubble
    └── MessageFooter

Use MessageGroup to stack consecutive messages from the same sender:

MessageGroup
├── Message
└── Message

Examples

Avatar

Use MessageAvatar to render an avatar next to the message. Set align="end" to align the row (and its avatar) to the end of the conversation.

Group

Use MessageGroup to stack consecutive messages from the same sender. Render an empty MessageAvatar on the earlier messages to keep them aligned with the avatar on the last one.

Header and footer

Use MessageHeader for a sender name and MessageFooter for metadata such as a delivery status or message-level actions.

Accessibility

Message is a presentational layout wrapper; accessibility comes from the content you place inside it.

• Label icon-only actions. Action buttons in MessageFooter are usually icon-only, so give each one an aria-label.
• Status updates. For in-progress messages, use a Marker with role="status" so assistive tech announces the update as it appears.

API Reference

Message

MessageGroup / MessageAvatar / MessageContent / MessageHeader / MessageFooter

MessageAvatar anchors to the bottom of the message and shifts up to stay aligned with the surface when a MessageFooter is present. MessageHeader stays aligned to the start regardless of align; MessageFooter follows the message side.