# ChatBubble

> One message in a conversation, sent or received.

- **Level**: molecule · **Status**: experimental (R15: may change or be removed; J-11) · **Role**: content
- **Import**: `import { ChatBubble } from "@rrios-forge/ui/molecules/chat-bubble";`
- **Source**: `packages/ui/src/molecules/chat-bubble`

A single directional message. `side` encodes authorship and drives both alignment and tone. The optional footer carries a consumer-localized timestamp and delivery label — the molecule bakes no language. Use ChatBubble for DM / chat surfaces; use CommentItem for threaded comments. Patterns consulted: Patterns/Visual Priority · StatusHierarchy, Patterns/Information Architecture · MetadataAndActions.

## Use it for

- Chat message / reactions → `ChatBubble` / `ReactionBar`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `side` | — | `mine` `theirs` `system` | `theirs` | Which side something belongs to. |
| `position` | — | `single` `first` `middle` `last` | `single` | Placement of a docked element. |

## Stories

- [Playground](/?path=/story/components-molecules-chatbubble--playground) · frame: `/iframe.html?id=components-molecules-chatbubble--playground&viewMode=story`
- [Conversation](/?path=/story/components-molecules-chatbubble--conversation) · frame: `/iframe.html?id=components-molecules-chatbubble--conversation&viewMode=story`
- [Sides](/?path=/story/components-molecules-chatbubble--sides) · frame: `/iframe.html?id=components-molecules-chatbubble--sides&viewMode=story`

## Decisions that name it

- ADR-043 — The default theme is monochrome

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).