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

Telegram-styled conversation with tailed bubbles, delivery checks, typing status, and reaction chips

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

A Telegram-skinned composition scene — a tailed-bubble message thread, a Telegram-style composer pill, and a contact header that flips to "typing…" while the other side replies. Outgoing messages type into the composer then send with blue double-check delivery marks; incoming replies are preceded by a "typing…" status in the header before the bubble arrives; reaction chips pop in after each message lands.

## Installation

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

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

## Composed primitives

- **Caret** — blinking caret inside the Telegram composer pill; outgoing text reveals character by character before sending

The block is otherwise self-contained: it owns its tailed bubble layout, in-bubble timestamps, delivery-check marks, reaction chips, the composer pill (emoji + text field + attach icon + blue circular send button), and the contact header with avatar and typing-status logic.

## Timeline narrative

The scene opens with a focused Telegram composer. The first outgoing message types into the input pill, then sends — a blue tailed bubble enters from below and settles into the thread, its timestamp and double-check marks visible inside the bubble. The contact header switches to "typing…"; after a beat the reply bubble arrives (white, left-tailed) and a reaction chip pops in beneath it. The second outgoing message follows the same pattern, sending with delivery checks and its own reaction. The composer returns to idle.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `messages` | `TelegramMessage[]` | — | Array of messages to animate. Each item has {from: 'me' \| 'them', text: string, reaction?: string, time?: 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 Telegram 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 Telegram — blue tailed bubbles, in-bubble timestamps, and double-check delivery marks.
- You want the reply beat announced as an italic "typing…" status in the header rather than a bubble of dots.
- The demo needs the Telegram composer pill, where the mic button swaps to a paper plane the moment text is typed.

## Don't use when
- The scene must read as iMessage — use `imessage-chat-flow` for gray incoming bubbles, the Delivered label, and tapback badges.
- The conversation has to follow your brand tokens — use `chat-flow`; this block's chrome is a fixed light Telegram skin and only `accentColor` is overridable.
- You only need a single bubble or the dots on their own — use `message-bubble` or `typing-indicator`.