Prompt Input 2

A prompt bar for composing agent requests with model selection and quick actions - auto-growing textarea, plus menu, and send / stop.

Default

Compose a prompt with quick actions, model select, and send / stop. Submitting briefly enters the loading state.

Loading…

Installation

CLI

npx @sonojs/ui@latest add prompt-input-2

Also needs

npx @sonojs/ui@latest add button popover select

npm i lucide-react motion

Usage

prompt-input-2.tsx

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

export function Example() {
  return (
    <PromptInput2
      models={[
        { value: "sono-fast", label: "Sono Fast" },
        { value: "sono-pro", label: "Sono Pro" },
      ]}
      actions={[
        { value: "attach", label: "Attach file" },
      ]}
      onSubmit={(value, model) => {
        console.log(value, model)
      }}
    />
  )
}

Props

Prop	Type	Default	Description
value / defaultValue	string	""	Controlled or uncontrolled prompt text.
onValueChange	(value: string) => void	-	Fires when the textarea value changes.
models	PromptModel[]	[]	Optional model options for the select.
model / defaultModel	string	-	Controlled or uncontrolled selected model value.
onModelChange	(model: string) => void	-	Fires when the selected model changes.
actions	PromptAction[]	[]	Quick actions shown in the plus popover.
onAction	(action: string) => void	-	Fires when a quick action is chosen.
onSubmit	(value: string, model?: string) => void	-	Fires on Enter (without Shift) or send click.
loading	boolean	false	Shows the stop control instead of send.
onStop	() => void	-	Called when the stop control is pressed.
minRows / maxRows	number	2 / 8	Auto-grow bounds for the textarea height.
leadingAction	ReactNode	-	Optional control rendered after the actions menu.
className	string	-	Optional class names on the form root.