support attach

2026-09-26 14:20:18 +08:00
parent 2b92012c39
commit a20e051e8a
7 changed files with 140 additions and 53 deletions
@@ -1,6 +1,6 @@
 # AiChatComposer 输入框

-对话输入框，按状态在发送、停止、重试与新开会话之间切换。
+对话输入框采用上下布局：整行文本域下方提供新开会话、添加附件和发送或停止操作。

 ## 基础用法

@@ -14,16 +14,17 @@ demo-preview=../demos/ai-chat-composer/basic.vue

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

-## 三种按钮形态
+## 输入区与操作按钮
+
+文本域占满整行并随内容自动增高。下一行左侧是新开会话（`chat-add`）和添加附件（`file-add`），右侧根据状态显示纯文本发送或停止按钮。

 | 状态 | 按钮 |
 | --- | --- |
-| 空闲且未禁用 | 新开会话（`chat-add`） |
-| 默认 | 发送（`sendText`） |
+| 空闲且未禁用 | 新开会话、添加附件、发送（`sendText`） |
 | `isGenerating` 为真 | 停止（`stopText`，危险色） |
 | 有 `lastError` 且 `canRetry` | 错误条 + 重试（`retryText`） |

-生成中或 `disabled` 为真时输入框不可编辑，新开会话和 `send` 事件也不会触发。
+生成中或 `disabled` 为真时输入框不可编辑，新开会话、添加附件和 `send` 事件不会触发。

 ## 事件

@@ -31,6 +32,7 @@ demo-preview=../demos/ai-chat-composer/basic.vue
 - `stop`：点停止按钮
 - `retry`：点错误条上的重试
 - `new-conversation`：清空输入框并请求业务侧开始一个新会话
+- `add-attachment`：请求业务侧添加附件

 输入框内容用 `v-model` 绑定，`maxLength` 默认 2000。

@@ -28,6 +28,10 @@ const {
 } = useAiChat({
 	request: ({ message, signal }) => fetchReply(message, signal)
 });
+
+function selectAttachment() {
+	// 在业务侧打开文件选择器
+}
 </script>

 <template>
@@ -41,6 +45,7 @@ const {
 		@stop="stopGeneration"
 		@retry="retryLastMessage"
 		@new-conversation="resetConversation"
+		@add-attachment="selectAttachment"
 	/>
 </template>
 ```
@@ -64,7 +69,7 @@ const {

 ## 自定义

-`welcome`、`composer`、`tool-status`、`message` 等插槽可以替换对应区域。`composer` 插槽会拿到 `draft`、`on-send`、`on-stop`、`on-retry`、`on-new-conversation` 等，便于接入自定义输入框。
+`welcome`、`composer`、`tool-status`、`message` 等插槽可以替换对应区域。`composer` 插槽会拿到 `draft`、`on-send`、`on-stop`、`on-retry`、`on-new-conversation`、`on-add-attachment` 等，便于接入自定义输入框。

 ## API

@@ -9,6 +9,7 @@
 			@stop="onStop"
 			@retry="onRetry"
 			@new-conversation="onNewConversation"
+			@add-attachment="onAddAttachment"
 		/>

 		<div class="bar">
@@ -59,6 +60,10 @@ function onNewConversation() {
 	error.value = "";
 	push("new-conversation()");
 }
+
+function onAddAttachment() {
+	push("add-attachment()");
+}
 </script>

 <style lang="less" scoped>