Prompt Input

An AI prompt bar for chat interfaces — morphing expand, model and effort controls, image attachments, and voice input.

Default

Collapsed prompt that expands on focus — model select, effort cycle, image attachments, and mic / send.

Loading…

Installation

CLI

npx @sonojs/ui@latest add prompt-input

Usage

prompt-input.tsx

import { PromptInput } from "@/components/sonojs/prompt-input"

export function Example() {
  return (
    <PromptInput
      onSubmit={(value, meta) => {
        console.log(value, meta.model, meta.effort, meta.attachments)
      }}
    />
  )
}

Props

Prop	Type	Default	Description
value / defaultValue	string	""	Controlled or uncontrolled prompt text.
onChange	(value: string) => void	—	Fires when the textarea value changes.
onSubmit	(value, meta) => void	—	Fires on send with `{ model, effort, attachments }`.
placeholder	string	"Ask anything"	Collapsed and expanded placeholder copy.
models	string[]	GPT / Opus / Gemini / …	Model labels shown in the morphing select.
efforts	string[]	Low / Medium / Max Effort	Cycled effort levels next to the model control.
maxAttachments	number	6	Maximum image attachments allowed.
className	string	—	Optional class names on the outer wrapper.