Prompt Composer

Prompt field with attachments. Pro · AI chat and agents › Prompts and models

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add prompt-composer

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { PromptComposer } from 'valyro-ui-pro';

Props

Prop	Type	Default
`value`	`string`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`string`	`''`	Initial `value` when uncontrolled.
`onValueChange`	`(value: string) => void`		Called with the new `value` when it changes.
`onSend`	`(message: PromptSubmission) => void`		Enter (without Shift) or the send button. The composer clears itself afterwards.
`loading`	`boolean`	`false`	A reply is generating: Enter is ignored and the send button becomes Stop.
`onStop`	`() => void`		Called by the Stop button while `loading`; without it Stop is disabled.
`placeholder`	`string`	`'Ask anything…'`	Hint text in the empty message field.
`disabled`	`boolean`	`false`	Blocks typing, attaching and sending.
`allowAttachments`	`boolean`	`true`	Attach files with the paperclip, paste or drag-and-drop. Default true.
`accept`	`string`		File types for the picker, paste and drop — same syntax as `<input accept>`.
`defaultFiles`	`File[]`		Files attached on the first render, e.g. a restored draft; later changes are ignored.
`onReject`	`(files: File[], reason: PromptRejectReason) => void`		Files that were picked, pasted or dropped but turned away; the composer also shows an inline message.
`toolbar`	`ReactNode`		Controls beside the attach button, e.g. a ModelSelector.
`maxLength`	`number`		Character limit; shows a counter.
`hint`	`ReactNode`		Small note next to the send button, e.g. a token estimate.
`textareaRef`	`Ref<HTMLTextAreaElement>`		Ref to the inner message `<textarea>`, e.g. to focus it from outside.
`autoFocus`	`boolean`		Focuses the message field on mount.
`locale`	`string`		BCP 47 locale for attachment sizes and the character counter; defaults to the ThemeProvider's.
`labels`	`Partial<PromptComposerLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Inline Suggestion — Inline autocomplete suggestion
Model Selector — AI model picker
Model Comparison — Side-by-side answers from several models
Prompt Library — Prompt library with variables
AI Chat Window — AI chat window
Chat Message — Messages with streaming output
Message Branches — Message versions and a conversation branch tree
Streaming Text — Smooth token streaming
Markdown Preview — Rendered Markdown
Response Feedback — Answer rating and a rubric for reviewers
Chain of Thought — Model reasoning steps
Tool Call — Tool call with approval

Previous: Response Feedback · Next: Inline Suggestion · All AI chat and agents