Composer
A draft box that knows SMS: live segment counting, unicode detection, Enter-to-send, and error recovery that gives the user their text back.
Type past 160 characters — or paste an emoji — and watch the counter.
Installation
npx shadcn@latest add @handset/composerUsage
import { Composer } from "@/components/handset/composer";
// Inside a thread (the usual case — Thread does this for you):
<Composer send={thread.send} disabled={conversation?.opted_out} />
// Anywhere else: hand it any (input) => Promise<Message>
<Composer send={({ body }) => sendCampaignMessage(body)} />The segment counter runs the real GSM-7/UCS-2 math from @handset/react's countSegments — one emoji flips a 160-char message to 70-char unicode segments, and your users see that before they hit send, not on the invoice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| send | (input: SendInput) => Promise<Message> | — | Where drafts go. Usually useThread(...).send. |
| disabled | boolean | false | Disables input and send (e.g. opted-out contact). |
| placeholder | string | "Type a message…" | Textarea placeholder. |
| className | string | — | Merged onto the wrapper. |