Compose box
Where the operator addresses the agent. Multi-line input with attachments, skills, model, keyboard hint, and stateful submit/stop. Enter sends; Shift+Enter inserts a newline.
Included in the single kansho full pack. Components are not offered as separate installs.
Demo event: No action yet
Idle — empty
With mode picker
Plan / Build — rendered left of the model slotMod-Enter to send
submitKey='mod-enter' — Enter inserts a newline, ⌘/Ctrl+Enter sendsTyping — with content
Streaming — Stop replaces Send
Compose while streaming — queue
With onQueue wired, submit parks the next message instead of being disabled; the chip holds it until dismissedSubmitting
Disabled — agent unavailable
With attachments
Pinned to a viewport bottom
Imagine a conversation scrolling here…
…the compose box stays planted at the bottom.
Component documentation
Compose Box
components/agent/compose-box.tsxPurpose
Provides a controlled chat composer with attachments, contextual pickers, sending, stopping, and optional streaming queueing.
Appropriate use
Use at the message-entry boundary where the host owns the draft and agent lifecycle.
Example
components/agent/compose-box.tsx has a representative live example in the "Typing — with content" section on /components/compose-box.
States
States are idle, typing, submitting, streaming, and disabled; streaming may be stop-only or queue-enabled, and attachments can be removed.
API and props
ComposeBox accepts value, state, attachments, model, skill, mode, submitKey, labels/hints, and callbacks for draft, submit, stop, queue, attachment, mention, and pickers.
Dependencies
Direct imports are React, Lucide icons, Spinner, IconButton, Tag, and cn.
Accessibility
The textarea and available icon controls have accessible names; callback-less picker values are text, unavailable actions are omitted or disabled, and Enter versus Mod-Enter behavior is explicit.
Limitations
It does not persist drafts, upload attachments, execute picker menus, or run the agent; submit, stop, attachment, mention, and picker actions require their matching callbacks, and callers must surface failures.
Source
Source: components/agent/compose-box.tsx.
Full pack
components/agent/compose-box.tsx is documented at /components/compose-box and installs only through the single Kansho full pack; no individual component install is offered.