Email Draft

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add email-draft

Usage#

Anatomy#

A sheet with the email on it: an address block, the subject, the body and the files. Under it, the actions. The root adds the summary line the draft folds into once it is sent or discarded, so you never render it yourself.

import {
  EmailDraft,
  EmailDraftContent,
  EmailDraftHeader,
  EmailDraftField,
  EmailDraftRecipients,
  EmailDraftRecipient,
  EmailDraftSubject,
  EmailDraftBody,
  EmailDraftAttachments,
  EmailDraftActions,
} from "@/components/ui/email-draft"

<EmailDraft>
  <EmailDraftContent>
    <EmailDraftHeader>
      <EmailDraftField>
        <EmailDraftRecipients>
          <EmailDraftRecipient />
        </EmailDraftRecipients>
      </EmailDraftField>
    </EmailDraftHeader>
    <EmailDraftSubject />
    <EmailDraftBody />
    <EmailDraftAttachments />
  </EmailDraftContent>
  <EmailDraftActions />
</EmailDraft>

Draft#

The resting state: the email as it will arrive. Recipients are chips with a face and a name, the address one hover away. A long Cc list caps itself with max and the rest sit behind a +N that names them on hover and opens them on click. The body keeps every line break the model wrote. Discard sits apart on the left, in the destructive ink but without a fill; Edit and Send pair up on the right.

Editing#

Edit turns the subject into an Input and the body into an autosizing Textarea, drawn around the words where they already are: the fields grow out into the margin, so not a letter moves. The body takes focus with the caret at the end. Edit and Send roll into Cancel and Done; Escape cancels and puts the text back, Done (or ⌘ Enter) keeps it.

Sending#

Return a promise from onSend and the draft waits on it: Send holds a spinner at its own width, Edit and Discard step back, and the root is aria-busy. A rejected promise drops back to the draft, with the edits intact.

Sent#

Once it goes, the draft folds into one line on the same clock as the actions leave: who it went to, and when. View opens the email again where it was, read only, and Hide folds it back. The time is stamped when it sends; pass sentAt to show your server's instead.

Discarded#

Discard folds the draft the same way, into a muted line with an Undo, so a slip costs one click rather than a new prompt.

Attachments#

EmailDraftAttachments lays out Koala's Attachment under the body, so a file in a draft looks exactly like a file in the composer or a sent message. Give each one an onOpen or an href to make it open.

With Tool approval#

When the email is a tool call waiting for a yes, drop EmailDraftActions and let the Tool's approval row decide. Use variant="plain" so the sheet sits in the Tool's frame like any other input, drive editing from the approval's Edit, and map the call's status: running is sending, done is sent, rejected is discarded.

Variants#

card sets the sheet into a tinted frame with the actions on the frame, the same inset look as Tool and Approval. plain is the sheet alone, for a surface that already frames it.

Density#

Density tunes the sheet's vertical rhythm only. The side margin stays at 16px in both, because that is the room the edit fields grow into.

API reference#

FAQ#