Components
Reply composer
Prepare a thoughtful reply with explicit sender, recipients and optional draft assistance.
On this page
Purpose and composition
Prepare a thoughtful reply with explicit sender, recipients and optional draft assistance.
Compose only in active conversations; inactive threads must be reopened/restored first.
Anatomy
| Part | Responsibility |
|---|---|
| Envelope | From/To plus optional Cc/Bcc |
| Body | Auto-growing textarea, minimum 176px |
| Tools | AI draft, formatting and attachment affordances |
| Footer | Local draft status and Send reply |
Configuration and variants
| Input / variant | Contract |
|---|---|
| conversation | Seeds inbox/contact and internal recipients |
| onSend | Receives body + OutgoingEnvelope |
| onDraftWithAi | Promise<string>; failure shows alert |
| send gate | Nonblank body, sender identity and at least one To |
States and feedback
| State | Visible / behavioral result |
|---|---|
| Empty | Send disabled; AI enabled |
| Drafting | AI disabled and label changes |
| Saving/saved | 500ms fingerprint comparison |
| Attachment | Fixed migration-checklist.pdf placeholder |
| Error | role=alert with retry guidance |
Interaction and responsive behavior
- AI only drafts on explicit action and refuses to overwrite a nonempty body.
- Textarea height recomputes on body/resize.
- Send emits callback then clears body/attachment.
- Toolbar wraps on phone.
Accessibility contract
- Reply message hidden label names textarea.
- AI error has role=alert.
- Send button has visible text.
- The displayed ⌘ + Enter hint has no implemented key handler.
Known implementation limits
Draft saved is not durable storage. Formatting/link tools have no handlers; attachment is a fixed placeholder; default AI uses canned content.
Composition example
<Composer conversation={thread} onSend={sendLocalReply} onDraftWithAi={draftForReview} />Source references
| File | Responsibility |
|---|---|
| components/inbox/composer.tsx | Composer |
| components/helpdesk-app.tsx | Local reply creation |
Examples from the app
Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0