# Message

> Chat rows with avatar, bubble, and metadata.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/message.json`

## Install

```tsx
import { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup } from "@aspyn-io/kit";
```

### Chat thread

Message is the full row: avatar + content (Bubble). align="end" flips it for the current user.

```tsx
<MessageGroup>
  <Message>
    <MessageAvatar><Avatar>…</Avatar></MessageAvatar>
    <MessageContent>
      <Bubble variant="secondary"><BubbleContent>How can I help?</BubbleContent></Bubble>
    </MessageContent>
  </Message>
  <Message align="end">
    <MessageAvatar><Avatar>…</Avatar></MessageAvatar>
    <MessageContent>
      <Bubble><BubbleContent>Summarize the registry diff.</BubbleContent></Bubble>
      <MessageFooter>Read 2:14 PM</MessageFooter>
    </MessageContent>
  </Message>
</MessageGroup>
```

## Notes

- Message owns row-level layout and alignment; Bubble owns the message surface. Put avatars, names, timestamps, and actions in MessageHeader/MessageFooter.
- Set align on both Message and its Bubble so the row and the surface agree (Message flips the row; Bubble self-aligns its content).