PromptInput

Composer: autosizing textarea, Enter to send, Shift+Enter for a new line, attachments slot and a stop button while a response streams.

Import

import { PromptInput } from "@jcsoftdev/ui/ai";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/ai/prompt-input.

Usage

<PromptInput
  placeholder="Pregunta por turnos, clientes o ingresos…"
  hint="Enter envía · Shift+Enter agrega una línea"
  streaming={false}
  disabled={false}
  maxRows={6}
  actions={attach}
/>

Props

Prop	Type	Default	Description
value	string
defaultValue	string	""
onValueChange	((value: string) => void)
onSubmit	((value: string) => void)		Called with the trimmed text on Enter or send. Never called when empty.
streaming	boolean		While true the send button becomes a stop button.
onStop	(() => void)
placeholder	string	"Escribe un mensaje…"
label	string	"Mensaje"	Accessible name of the textarea.
disabled	boolean
maxRows	number	6	Rows after which the textarea scrolls instead of growing.
attachments	ReactNode		Row above the text (Attachment chips).
actions	ReactNode		Left of the send button (attach button, model picker…).
hint	ReactNode		Hint line under the field.
className	string

* marks a required prop.

Storybook stories

• Default
• With Attachments
• Streaming
• Echo
• Narrow
• Preset Brutal

Source

packages/ui/src/ai/prompt-input/prompt-input.tsx