Draft Email Card
A controlled email drafting card for conversational and agent interfaces.
Draft Email Card is a rich card for AI agent responses: when an assistant drafts an email in a conversation, the reply renders as an editable email form — the generative UI pattern — rather than a wall of quoted text. It is a controlled React component built with shadcn/ui and Tailwind CSS, so your agent fills the draft and your application decides what sending means.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | DraftEmail | — | Provides the controlled sender, recipient, subject, and body values. |
onValueChange | (value: DraftEmail) => void | — | Receives the complete draft whenever an editable field changes. |
onSend | (value: DraftEmail) => void | — | Receives the current draft after the native required-field checks pass. |
onDiscard | () => void | — | Runs when the Discard button is selected. |
DraftEmailCard also accepts standard form props except children and
onSubmit. The component owns form submission so that it can run native
validation before calling onSend.
DraftEmail
| Prop | Type | Default | Description |
|---|---|---|---|
from | string | — | Displays the read-only sender address. |
to | string | — | Provides the required recipient value. |
subject | string | — | Provides the required subject value. |
body | string | — | Provides the required message body. |
Behavior
The card is fully controlled. It does not keep a second copy of the draft,
send network requests, or manage loading, success, and error states. Editing
To, Subject, or Body calls onValueChange with the complete next value. From
remains plain read-only text by default. Because the installed component is
source code, you can replace that text with the same Textarea pattern used
by the other fields when your product allows the sender to change.
Submitting the form calls onSend only after the browser accepts the three
required editable fields. The component does not validate email formats or
other product-specific rules. Connect onSend and onDiscard to the transport
and reset behavior owned by your application.
The editable fields grow with their content. Long addresses and subjects wrap inside the card, and the action row can wrap when the available width is limited.
Credits
The information architecture and visual hierarchy are inspired by the ChatKit Draft Email gallery example. This implementation is independently composed with shadcn primitives and Vivid Layer design tokens. No ChatKit source code, runtime code, or assets are copied into the component, and Vivid Layer is not affiliated with or endorsed by OpenAI.