PromptInput
prompt-inputComposes auto-growing prompts with submit, stop, keyboard, IME, and custom action controls.
Usage
Basic usage
Enter Submit / Shift+Enter Line break / IME No accidental touch during synthesis; onSubmit The text after receiving trim will be automatically cleared internally when it is not controlled.
<PromptInput onSubmit={(v) => send(v)} />Generating (stop key)
When loading is entered, the send key changes to the stop key and submission is blocked. Click to trigger onStop.
<PromptInput loading onStop={() => stop()} defaultValue="Generating answer..." />Disabled
disabled overall weakens and blocks input and submission.
<PromptInput disabled placeholder="Log in to send..." />Custom placeholder
placeholder overrides the default prompt text.
<PromptInput placeholder="Ask me any questions about Hulian..." />When to Use
Use it as the composer at the bottom of a chat interface. It grows with its content, submits on Enter, and shows a stop button while generating. Render the message stream with Conversation and ChatMessage; PromptInput handles composition and submission only.
Import
import { PromptInput } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | — | Controlled value (with onValueChange) |
| defaultValue | string | "" | Uncontrolled initial value |
| placeholder | string | "\u53d1\u6d88\u606f\u2026" ("Send a message...") | Placeholder prompt |
| loading | boolean | false | Generating: Send key becomes stop key, block submission |
| disabled | boolean | false | Disabled |
| maxRows | number | 8 | Maximum rows before the textarea scrolls internally |
| className | string | — | Container class name |
Events
| Event | Type | Description |
|---|---|---|
| onValueChange | (value: string) => void | Value change callback |
| onSubmit | (value: string) => void | Submit (Enter or click Send); receive the current text after trim. Automatically clear internally when not under control |
| onStop | () => void | Click to stop callback (stop button is displayed during loading) |
Slots
| Slot | Type | Description |
|---|---|---|
| actions | ReactNode | Operation slot on the left side of the bottom toolbar (switch chip for deep thinking/intelligent search, etc.) |
| trailing | ReactNode | Trailing slot on the right side of the bottom toolbar, before the send key (attachment/voice, etc. icon buttons) |
Usage Guidelines
- Choose one of controlled/uncontrolled:
valuemust be configured withonValueChangeto manage the status by itself; when it is not controlled (onlydefaultValue), it will be automatically cleared internally after submission, do not clear it externally. - While
loadingis true, submission is blocked and the send button becomes a stop button. PassonStop; otherwise the stop button has no action. - Enter to submit, Shift+Enter to change line, and IME synthesis protection has been implemented internally (Chinese input and enter word selection will not be submitted by mistake).
- Built-in Chinese UI strings are
\u53d1\u6d88\u606f\u2026("Send a message..."),\u505c\u6b62\u751f\u6210("Stop generating"), and\u53d1\u9001("Send").
Related
Conversation · ChatMessage · TypingDots · ThinkingBlock · ToolCall · AgentPlan
Playground
<PromptInput onSubmit={(v) => send(v)} />