Composer

The message box under a chat: it grows with the text, sends on Enter, attaches files by button, paste or drop, and turns into a stop button while the agent answers. Pick CommentForm for longer Markdown posts.

Composer

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, Composer

Nothing sent yet.

Dark theme, Composer

Nothing sent yet.

High contrast theme, Composer

Nothing sent yet.

UsageLink to the section Usage

tsx

import { Composer } from '@skribly/ui/conversation'

tsx

<Composer
  label="Message to Claude Code"
  sendLabel="Send"
  onSubmit={send}
  isBusy={busy}
  stop={{ label: 'Stop', onStop: stop }}
  attach={{ label: 'Attach files', dropLabel: 'Drop to attach', onFiles: add }}
  attachments={<AttachmentChips … />}
/>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The text area has a label, hidden on screen unless showLabel, and the hint and error are linked with aria-describedby.
Enter sends unless an input method is composing; Shift+Enter adds a line.
Every button has a name.
Dropping files is an extra: the attach button and paste do the same by keyboard.

This demo runs through axe in all three themes on every test run. See what the tests check.