# AiChatComposer 输入框

对话输入框采用上下布局：整行文本域下方提供新开会话、添加附件和发送或停止操作。

## 基础用法

:::preview 基础用法 || 发送后进入生成态，2 秒后自动恢复，可观察按钮的三种形态

demo-preview=../demos/ai-chat-composer/basic.vue

:::

## 何时使用

需要单独摆放输入框时使用。多数情况下直接用 [AiChatPanel](/components/ai-chat-panel) 更省事。

## 输入区与操作按钮

文本域占满整行并随内容自动增高。下一行左侧是新开会话（`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`）。

## API

<api-table name="AiChatComposer" />