# iMessage Chat Flow
URL: https://remocn.dev/docs/ui/blocks/imessage-chat-flow

iMessage-styled conversation with gray incoming and blue outgoing bubbles, typing indicator, Delivered label, and tapback reactions

- Install: `npx shadcn@latest add @remocn/imessage-chat-flow`
- Vibe: social
- Natural length: 360f @ 30fps

An iMessage-skinned composition scene — a tailed-bubble message thread, a native-feeling composer bar, and a contact header with FaceTime video icon. Outgoing messages type into the composer then send as blue tailed bubbles with a "Delivered" label underneath; incoming replies are preceded by a gray typing bubble (three bouncing dots) that swaps to the reply text; tapback reaction badges pop in at the top outer corner of their parent bubble.

## Installation

```bash
npx shadcn@latest add @remocn/imessage-chat-flow
```

> **Note**
>
> Installing `imessage-chat-flow` automatically installs the shared `remocn-ui` core and all composed primitives via `registryDependencies`: `caret`, and `typing-indicator`. You do not need to install them separately. The block also pulls `lucide-react` for chrome icons (back chevron, FaceTime video button, composer apps-plus, and up-arrow send button).

## Composed primitives

- **Caret** — blinking caret inside the composer text field; outgoing text reveals character by character before sending
- **TypingIndicator** — three bouncing dots rendered inside a gray incoming bubble before the reply text arrives

The block is otherwise self-contained: it owns its tailed bubble layout (gray `#e9e9eb` for incoming, iMessage blue for outgoing), the "Delivered" delivery label under the last outgoing bubble, tapback reaction badges at the top outer corner of each bubble, the composer bar (apps-plus icon + text field + circular up-arrow send button), and the contact header with avatar, display name, and lucide-react chrome icons.

## Timeline narrative

The scene opens with a focused iMessage composer. The first outgoing message types into the input field, then sends — a blue tailed bubble enters from below and settles into the thread with a "Delivered" label underneath. A gray typing bubble with three bouncing dots appears on the incoming side; after a beat the dots swap to the reply text and the tapback reaction badge pops in at the top outer corner. Subsequent outgoing messages follow the same pattern — typing, sending, Delivered — each reply preceded by the typing bubble. The composer returns to idle at the end.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `messages` | `ImessageMessage[]` | — | Array of messages to animate. Each item has {from: 'me' \| 'them', text: string, reaction?: string}. Defaults to the built-in demo script. |
| `contact` | `{ name: string; avatar?: string }` | — | Display name and optional avatar URL shown in the contact header. |
| `accentColor` | `string` | — | Override for the outgoing bubble color and send button. Defaults to iMessage blue. Accepts any concrete color value (oklch, hex, rgb). |
| `speed` | `number` | `1` | Multiplier on the overall animation speed. Values above 1 speed up the whole conversation; below 1 slow it down. |
| `theme` | `RemocnTheme` | — | Optional theme override (concrete oklch/hex/rgb values). |

## Use when
- The scene must read as iMessage — gray incoming and blue outgoing tailed bubbles with tapback badges at the outer top corner.
- You want the reply preceded by a gray bubble of bouncing dots rather than a status line in the header.
- An Apple-audience demo needs the native composer bar and a "Delivered" label under the closing outgoing message.

## Don't use when
- The scene must read as Telegram — use `telegram-chat-flow` for in-bubble timestamps, double-check marks, and reaction chips.
- The thread has to follow your brand tokens — use `chat-flow`; this block's palette is a fixed iMessage skin apart from `accentColor`.
- You only need the bouncing dots on their own — use `typing-indicator`, which this block composes.