components / chat-composer

chat-composer.

the line you type into, under a chat-log. split from the log rather than bundled with it because the two have different reasons to re-render — the log repaints on every arriving message, the composer only on your own keystrokes — and because a read-only room is a real state: render the log without this and there is nothing to disable or explain. owns the draft and nothing else; onSend may be async, and a rejected send hands the sentence back rather than losing it, because losing a typed sentence to a dropped request is the one failure a chat box must not have.

sends land here. every third one fails on purpose — watch the draft come back instead of vanishing.

chat opens when the stream does.
installation
bunx @justin06lee/chrome@latest add chat-composer
props
nametypedefaultdescription
onSend *(body: string) => void | Promise<void>-called with the trimmed draft. reject (or throw) and the draft is restored alongside an inline error.
placeholderstring'say something'
maxLengthnumber500hard input cap. a live count appears once the draft passes 80% of it.
disabledbooleanfalse
disabledHintReactNode-explains the disabled state where the reader is looking — shown in place of the input when disabled.
ariaLabelstring'message'
classNamestring-