Message draftPro

A text or team chat message the assistant drafted, drawn as the thing it will become. Edit it in place, see how a text will split, and send with a few seconds to take it back.

Markdown

On this page

ProA text about the kiln, drafted as the bubble it will become, edited in place and sent with five seconds to undo.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/message-draft

Usage

tsx

import { MessageDraft } from "@/components/ui/chatcn/pro/message-draft"

<MessageDraft
  to={{ name: "Tomás Ferreira", detail: "+351 912 408 663" }}
  value={draft}
  onValueChange={setDraft}
  onSend={(body) => sendText(body)}
/>

channel="sms" draws the outgoing bubble; channel="chat" draws your row in a team chat with @mentions picked out. Tap the message to edit it in the same footprint; Escape or Done puts it back.

The SMS counter knows the GSM alphabet: past 160 characters a text splits at 153, and one character outside it (an accent, a check mark) drops every part to 70. The counter names that character so people can choose to swap it. Chat counts against maxLength.

Send starts an undo window drawn as a hairline that drains across the footer. Once it closes onSend runs; return a promise to show sending, and a rejection keeps the draft with the reason and a retry. Set undoSeconds={0} to send at once.

Examples

Chat, long texts, sent, failed, loading and error

ProTeam chat with a mention, a long text that splits, special characters, sent, a failed send, empty, loading, an error and disabled.

Props

Prop	Type	Notes
`to`	`{ name, detail?, avatar? }`	The person or channel
`channel`	`"sms" \| "chat"`	Default `sms`
`from`, `context`		Your name for the chat row, and where it posts
`value`, `defaultValue`, `onValueChange`	`string`	Controlled or not
`onSend`	`(body) => unknown \| Promise`	Runs when the undo window closes
`undoSeconds`	`number`	Default 5. `0` sends at once
`onOpenInApp`, `appName`		Shows Open in with the app's name
`maxLength`	`number`	Chat limit. Default 4000
`status`	`"ready" \| "drafting" \| "loading" \| "sent" \| "error"`	`drafting` shows a caret while the text streams in
`sentAt`, `sendError`, `onRetry`		The sent time, a send failure and retry
`disabled`, `locale`
`labels`	`Partial<MessageDraftLabels>`	Every string, including the counters

Keyboard

Key	Action
`Enter` or `Space` on the message	Edit it in place
`Cmd Enter`, `Ctrl Enter`	Send from the editor
`Escape`	Stop editing and return focus to the message

Accessibility

The message is a button that names itself and is described by the counter, so people hear how it will send before they edit.
The undo countdown is a polite status. Sending, failure and delivery are announced once each.
IME composition never sends.

Motion

The undo line drains linearly across the footer, because it is progress. Undo stops it where it is.
Edit and read swap in place with no movement. Reduced motion: the line is still drawn, the countdown still reads.