Thread

One conversation's message history with delivery states on every outbound message, MMS previews, opt-out handling, and a composer wired to reply in place.

Installation

npx shadcn@latest add @handset/thread

Installs composer as a dependency.

Usage

import { Thread } from "@/components/handset/thread";

<Thread conversationId={conversationId} />

Sends are optimistic: the bubble appears instantly at 70% opacity, then resolves to the real message when the API accepts it — or flips to a failed state (it never silently disappears). Delivery ticks: clock = sending, single check = sent, double check = delivered, red alert = failed. If the contact texted STOP, the composer disables and a notice explains why.

Props

Props
PropTypeDefaultDescription
conversationIdstring | nullWhich conversation to show. null renders an empty state.
hideComposerbooleanfalseHide the built-in composer to render your own.
pollMsnumber3000Refresh interval. 0 disables polling.
limitnumber100Max messages fetched per poll.
classNamestringMerged onto the root column.