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

A messaging conversation that types outgoing messages, shows typing indicators, and pops in incoming replies with reactions

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

A composition scene that renders a full chat conversation — a contact header, a message thread, and a composer input. Outgoing messages type themselves into the input field then send; incoming replies are preceded by a typing indicator that swaps to the reply bubble; reaction emojis pop in after each reply lands.

## Installation

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

> **Note**
>
> Installing `chat-flow` automatically installs the shared `remocn-ui` core and all composed primitives via `registryDependencies`: `caret`, `message-bubble`, and `typing-indicator`. You do not need to install them separately.

## Composed primitives

- **MessageBubble** — state-driven speech bubble with incoming/outgoing variants and optional reaction badges, styled to match the shadcn `Bubble`
- **TypingIndicator** — bouncing dots that play inside an incoming bubble before the reply text appears
- **Caret** — blinking caret in the composer; the outgoing message reveals character by character into a shadcn-style textarea before sending

The layout is a mobile-width column — a contact header, the message thread, and a textarea composer with a `+` action and a send button.

## Timeline narrative

The scene opens with the composer focused. The first outgoing message ("Hey — ready for the demo?") types into the input, then sends — the bubble enters from below and settles into the thread. The contact's typing indicator appears inside an incoming bubble; after a beat the indicator swaps to the reply text ("Yep, pushing it live now") and the 🔥 reaction badge pops in. The second outgoing message types and sends ("Perfect, sending the link over"), and its 👍 reaction badge follows. `chatFlowDuration` returns the total frame count for the default script at a given speed; `chatFlowSchedule` exposes the per-message frame offsets for synchronisation with other scene elements.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `messages` | `ChatMessage[]` | — | Array of messages to animate. Each item has {from: 'me' \| 'them', text: string, reaction?: string}. Defaults to the built-in three-message demo script. |
| `contact` | `{ name: string; avatar?: string }` | — | Display name and optional avatar URL shown in the contact header above the thread. |
| `accentColor` | `string` | — | Override for the outgoing bubble color. 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
- A scene needs a messaging conversation that carries your own brand tokens instead of a real platform's chrome.
- The whole beat should be scripted from a `messages` array — outgoing text types into the composer, dots precede replies, reactions pop in.
- Other scene elements must sync to the conversation — `chatFlowSchedule` and `chatFlowDuration` expose the per-message frame offsets.

## Don't use when
- The video must read as Telegram — use `telegram-chat-flow`, which owns the tailed bubbles, in-bubble timestamps, and double-check marks.
- The video must read as iMessage — use `imessage-chat-flow`, which owns the gray/blue tailed bubbles, the Delivered label, and tapback badges.
- You only need one message landing on a beat you time yourself — use `message-bubble` with `useMessageBubbleTransition`.