Mischief

12 / Agent UI

Prompt Input

The composer. Grows with the message, sends on Enter, keeps Shift+Enter for a new line, and turns into a stop button while a reply streams.

Live previewSource

Enter sends. Shift+Enter starts a new line.

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

export function Composer() {
  return (
    <PromptInput
      status={isStreaming ? "streaming" : "ready"}
      onSubmit={send}
      onStop={stop}
    />
  )
}

API

value, defaultValue, onValueChangestring, string, (value: string) => voidThe text, controlled or uncontrolled.
onSubmit(value: string) => voidRuns with the trimmed message.
status"ready" | "streaming"Swaps the send button for a stop button.
onStop() => voidRuns when the stop button is pressed.
maxRowsnumberHow far the field grows before it scrolls. Defaults to 8.
attachments, actionsReactNodeSlots above the field and beside the send button.

Accessibility

The field has a real label and the send and stop buttons have accessible names rather than only icons. Enter sends and Shift+Enter starts a new line, but Enter is left alone while an input method editor has a candidate open, so composing text in Japanese or Chinese does not send the message early. Sending is refused when the field holds only whitespace.

Dependencies

lucide-react