PromptInput
prompt-input提示输入 · 自增高Textarea + 发送/停止键 + Enter提交/Shift+Enter换行/IME合成保护 + 受控非受控两用 + 左侧操作槽
用法
基础用法
Enter 提交 / Shift+Enter 换行 / IME 合成中不误触；onSubmit 收到 trim 后的文本，非受控时内部自动清空。
tsx
<PromptInput onSubmit={(v) => send(v)} />生成中（停止键）
loading 时发送键变为停止键并屏蔽提交，点击触发 onStop。
tsx
<PromptInput loading onStop={() => stop()} defaultValue="正在生成回答…" />禁用态
disabled 整体弱化并阻断输入与提交。
tsx
<PromptInput disabled placeholder="登录后即可发送…" />自定义占位
placeholder 覆盖默认提示文案。
tsx
<PromptInput placeholder="问我任何关于瑚琏的问题…" />何时用
聊天界面底部的消息输入框：自增高、Enter 提交、生成中切停止键。对话流上方的消息渲染用 Conversation + ChatMessage；这里只管输入与提交。
导入
ts
import { PromptInput } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| value | string | — | 受控值（配 onValueChange） |
| defaultValue | string | "" | 非受控初值 |
| placeholder | string | "发消息…" | 占位提示 |
| loading | boolean | false | 生成中：发送键变停止键、屏蔽提交 |
| disabled | boolean | false | 禁用 |
| maxRows | number | 8 | 自增高最大行数（超出滚动） |
| className | string | — | 容器类名 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onValueChange | (value: string) => void | 值变化回调 |
| onSubmit | (value: string) => void | 提交（Enter 或点发送）；收到 trim 后的当前文本。非受控时内部自动清空 |
| onStop | () => void | 点停止回调（loading 时显示停止键） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| actions | ReactNode | 底部工具栏左侧操作槽（深度思考 / 智能搜索等开关 chip） |
| trailing | ReactNode | 底部工具栏右侧、发送键之前的尾随槽（附件 / 语音等图标按钮） |
禁忌 / 坑
- 受控/非受控二选一：传
value必须配onValueChange自己管状态；非受控（仅defaultValue）时提交后内部自动清空，别再外部清。 loading时屏蔽提交、发送键变停止键，配套传onStop否则停止键无响应。- Enter 提交、Shift+Enter 换行，且内部已做 IME 合成保护（中文输入回车选词不会误提交）。
相关
Conversation · ChatMessage · TypingDots · ThinkingBlock · ToolCall · AgentPlan
Playground
<PromptInput onSubmit={(v) => send(v)} />