1.6 KiB
1.6 KiB
AiChatComposer 输入框
对话输入框采用上下布局：整行文本域下方提供新开会话、添加附件和发送或停止操作。
基础用法
:::preview 基础用法 || 发送后进入生成态，2 秒后自动恢复，可观察按钮的三种形态
demo-preview=../demos/ai-chat-composer/basic.vue
:::
何时使用
需要单独摆放输入框时使用。多数情况下直接用 AiChatPanel 更省事。
输入区与操作按钮
文本域占满整行并随内容自动增高。下一行左侧是新开会话（chat-add）和添加附件（file-add），右侧根据状态显示纯文本发送或停止按钮。
| 状态 | 按钮 |
|---|---|
| 空闲且未禁用 | 新开会话、添加附件、发送（sendText） |
isGenerating 为真 |
停止（stopText，危险色） |
有 lastError 且 canRetry |
错误条 + 重试（retryText） |
生成中或 disabled 为真时输入框不可编辑，新开会话、添加附件和 send 事件不会触发。
事件
send：抛出去除首尾空白后的内容，抛完自动清空输入框；空内容不抛stop：点停止按钮retry：点错误条上的重试new-conversation：清空输入框并请求业务侧开始一个新会话add-attachment：请求业务侧添加附件
输入框内容用 v-model 绑定，maxLength 默认 2000。
自定义插槽
send、stop、error 三个插槽可以替换对应区域的渲染，都带作用域参数（disabled、onSend、onStop、error、canRetry）。