channel / components / channel-timeline

ChannelTimeline

The simplest way to think about it: one scrolling conversation, no matter where people wrote from. A whatsapp message, a supplier email and a slack approval show up in the same list, in order, each wearing its platform badge.

Preview

Jun 24, 2026

+54 9 11 5555-0147whatsapp04:31 PM

Hola! Necesito cotizar 200 cascos certificados.

agentwhatsappdelivered04:33 PM

Tomo el pedido: 200 cascos IRAM 3620. ¿Fecha límite?

ventas@acme.comemailsent04:49 PM

Subject: RFQ — 200 cascos certificados Solicitamos cotización por 200 unidades.

ventas@acme.comemail05:07 PM

Cotizamos USD 11.40/u, entrega 10 días hábiles.

laura (compras)slack05:16 PM

Aprobado 👍 generá la OC.

Install

terminal

pnpm dlx shadcn@latest add https://registry.ekairos.dev/r/channel-timeline.json

Start simple: a list of messages

Give it an array of canonical messages and it renders the conversation with day separators. No backend, no config — useful for demos, tests and server snapshots:

basic

import { ChannelTimeline } from "@/components/ekairos/channel/channel-timeline";

<ChannelTimeline messages={messages} />

Then: filter by channel

Pass channels to focus the view — here, toggling platforms live:

Jun 24, 2026

ventas@acme.comemailsent04:49 PM

Subject: RFQ — 200 cascos certificados Solicitamos cotización por 200 unidades.

ventas@acme.comemail05:07 PM

Cotizamos USD 11.40/u, entrega 10 días hábiles.

Finally: make it live

This is the real mode. Hand it your InstantDB react client and a context id and the timeline becomes a reactive query over channel_messages — a whatsapp reply appears the moment the webhook persists it. The demo on this site runs exactly this against your temporary database:

live (plug & play)

"use client";
import { db } from "@/lib/db.client"; // InstantDB react client

<ChannelTimeline db={db} contextId={thread.contextId} />

Provide db from the first render (a stable client instance) — the component decides its data source at mount.

Props