@blueking/chat-x 0.0.48-beta.1 → 0.0.49-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/dist/ag-ui/types/constants.d.ts +1 -0
  2. package/dist/ag-ui/types/file.d.ts +23 -0
  3. package/dist/ag-ui/types/index.d.ts +1 -0
  4. package/dist/ag-ui/types/messages.d.ts +2 -0
  5. package/dist/components/chat-message/assistant-message/assistant-message.vue.d.ts +12 -1
  6. package/dist/components/chat-message/assistant-message/message-artifacts/artifact-file-card.vue.d.ts +12 -0
  7. package/dist/components/chat-message/assistant-message/message-artifacts/artifact-preview/artifact-preview-host.vue.d.ts +7 -0
  8. package/dist/components/chat-message/assistant-message/message-artifacts/artifact-preview/preview-strategy.d.ts +9 -0
  9. package/dist/components/chat-message/assistant-message/message-artifacts/artifact-preview/renderers/html-preview.vue.d.ts +6 -0
  10. package/dist/components/chat-message/assistant-message/message-artifacts/artifact-preview/renderers/markdown-preview.vue.d.ts +6 -0
  11. package/dist/components/chat-message/assistant-message/message-artifacts/artifact-preview/renderers/txt-preview.vue.d.ts +6 -0
  12. package/dist/components/chat-message/assistant-message/message-artifacts/artifact-preview/renderers/url-iframe-preview.vue.d.ts +6 -0
  13. package/dist/components/chat-message/assistant-message/message-artifacts/artifact-preview/use-artifact-preview-loader.d.ts +23 -0
  14. package/dist/components/chat-message/assistant-message/message-artifacts/file-artifact-panel.vue.d.ts +12 -0
  15. package/dist/components/chat-message/assistant-message/message-artifacts/file-icon.d.ts +29 -0
  16. package/dist/components/chat-message/assistant-message/message-artifacts/message-artifacts.vue.d.ts +9 -0
  17. package/dist/components/chat-message/interrupt-message/user-question/use-user-question.d.ts +7 -2
  18. package/dist/components/chat-message/user-message/user-message.vue.d.ts +14 -2
  19. package/dist/composables/index.d.ts +1 -0
  20. package/dist/composables/use-artifact-preview.d.ts +56 -0
  21. package/dist/composables/use-custom-tab.d.ts +2 -0
  22. package/dist/composables/use-message-group.d.ts +433 -0
  23. package/dist/icons/file.d.ts +24 -0
  24. package/dist/icons/index.d.ts +1 -0
  25. package/dist/index.css +1 -1
  26. package/dist/index.js +2217 -1689
  27. package/dist/index.js.map +1 -1
  28. package/dist/lang/lang.d.ts +8 -1
  29. package/dist/mcp/generated/docs/activity-message.md +122 -97
  30. package/dist/mcp/generated/docs/assistant-message.md +125 -62
  31. package/dist/mcp/generated/docs/chat-container.md +97 -18
  32. package/dist/mcp/generated/docs/chat-input.md +2 -10
  33. package/dist/mcp/generated/docs/constants.md +3 -1
  34. package/dist/mcp/generated/docs/content-render.md +2 -10
  35. package/dist/mcp/generated/docs/file-artifact-panel.md +275 -0
  36. package/dist/mcp/generated/docs/info-message.md +29 -12
  37. package/dist/mcp/generated/docs/interrupt.md +1 -0
  38. package/dist/mcp/generated/docs/loading-message.md +36 -17
  39. package/dist/mcp/generated/docs/message-container.md +4 -21
  40. package/dist/mcp/generated/docs/message-render.md +47 -59
  41. package/dist/mcp/generated/docs/messages.md +5 -0
  42. package/dist/mcp/generated/docs/reasoning-message.md +17 -20
  43. package/dist/mcp/generated/docs/tool-message.md +61 -45
  44. package/dist/mcp/generated/docs/toolcall-render.md +8 -8
  45. package/dist/mcp/generated/docs/use-artifact-preview.md +232 -0
  46. package/dist/mcp/generated/docs/use-custom-tab.md +18 -5
  47. package/dist/mcp/generated/docs/use-message-group.md +29 -0
  48. package/dist/mcp/generated/docs/user-message.md +185 -121
  49. package/dist/mcp/generated/docs/user-question-card.md +6 -3
  50. package/dist/mcp/generated/index.json +83 -13
  51. package/dist/mcp/index.js +0 -0
  52. package/package.json +20 -21
@@ -1,26 +1,28 @@
1
1
  <!-- AI SUMMARY -->
2
2
  ## 快速了解
3
3
 
4
- 渲染用户消息,支持文本、键值、Markdown、引用、文件和编辑态输入。 源码位置:src/components/chat-message/user-message/user-message.vue。
4
+ 渲染用户消息:纯文本(非 Markdown)、键值引用、二进制附件与编辑态 ChatInput / ShortcutRender; 工具栏含 copy / cite / edit / delete。源码位置:src/components/chat-message/user-message/user-message.vue。
5
5
 
6
6
  ### 关联组件
7
7
  - **message-render** — 由 MessageRender 在 role 为 user 时创建
8
8
  - **message-tools** — 消息工具栏交互与状态由 MessageTools 体系承载
9
9
  - **message-container** — 嵌入列表时由 MessageContainer 管理分组与多选
10
+ - **chat-input** — 编辑态普通消息使用 ChatInput
10
11
 
11
12
  ---
12
13
  <!-- FULL DOC -->
13
14
 
14
15
  # UserMessage 用户消息
16
+
15
17
  ## 源码事实
16
18
 
17
19
  - **源码位置**:`src/components/chat-message/user-message/user-message.vue`
18
20
  - **能力域**:消息系统
19
- - **能力说明**:渲染用户消息,支持文本、键值、Markdown、引用、文件和编辑态输入。
21
+ - **能力说明**:渲染用户消息:纯文本、键值引用、文件附件与编辑态输入(**不**渲染 Markdown)。
20
22
 
21
- > **能力域**:消息系统
23
+ > **导出说明**:`UserMessage` **未**从 `@blueking/chat-x` 包入口导出(入口同名是 TS interface)。消费方请用 `MessageRender` / `MessageContainer`。下文 `UserMessageComp` 为文档站内部相对路径示例。
22
24
 
23
- 用户消息展示组件,右对齐显示用户发送的消息内容。支持纯文本、多媒体(图片/文件)、文本引用、结构化引用、快捷指令等多种内容形式,以及消息的内联编辑功能。
25
+ 用户消息展示组件,右对齐。支持纯文本、多媒体(图片/文件)、文本引用、结构化引用、快捷指令,以及内联编辑。
24
26
 
25
27
  ## 组件结构
26
28
 
@@ -44,7 +46,7 @@
44
46
  └── MessageTools(.ai-user-message-tools)
45
47
  v-if: messageToolsStatus !== 'hidden'
46
48
  visibility: hidden(默认)→ visible(:hover 时)
47
- tools: [copy, cite, edit],updateTools: []
49
+ tools: [copy, cite, edit, delete],updateTools: []
48
50
  ```
49
51
 
50
52
  **编辑模式**(点击 `edit` 按钮后 `isEdit=true`)
@@ -67,28 +69,35 @@
67
69
 
68
70
  ## 基础用法
69
71
 
70
- `content` 为字符串时,通过 `TextContent` 渲染(内部使用 `MarkdownContent`,支持 Markdown 语法)。
72
+ `content` 为字符串时,通过 `TextContent` 以**纯文本**插值渲染(`{{ content }}`),**不**走 Markdown
71
73
 
72
74
  ```vue
73
75
  <template>
74
- <UserMessage
75
- :content="content"
76
+ <MessageRender
77
+ :message="message"
76
78
  :on-action="handleAction"
77
79
  />
78
80
  </template>
79
81
 
80
82
  <script setup lang="ts">
81
- import { UserMessage, type IToolBtn } from '@blueking/chat-x';
82
-
83
- const content = '你好,请帮我分析以下这段 Python 代码的性能瓶颈。';
83
+ import { MessageRender, MessageRole, MessageStatus, type IToolBtn } from '@blueking/chat-x';
84
+
85
+ const message = {
86
+ id: '1',
87
+ messageId: '1',
88
+ role: MessageRole.User,
89
+ content: '你好,请帮我分析以下这段 Python 代码的性能瓶颈。',
90
+ status: MessageStatus.Complete,
91
+ };
84
92
 
85
93
  const handleAction = async (tool: IToolBtn) => {
94
+ // copy / edit 有内置行为;cite / delete 需业务侧处理
86
95
  console.log('工具操作:', tool.id);
87
96
  };
88
97
  </script>
89
98
  ```
90
99
 
91
- > **工具栏**:鼠标悬停时,消息下方出现「复制」「引用」「编辑」三个操作按钮(CSS `visibility` 切换,始终占位)。
100
+ > **工具栏**:悬停时显示「复制」「引用」「编辑」「删除」(CSS `visibility`,始终占位)。
92
101
 
93
102
  ## 多媒体消息
94
103
 
@@ -101,20 +110,26 @@
101
110
 
102
111
  ```vue
103
112
  <script setup lang="ts">
104
- import { UserMessage, MessageContentType } from '@blueking/chat-x';
105
-
106
- const content = [
107
- {
108
- type: MessageContentType.Binary, // 'binary'
109
- url: 'https://example.com/screenshot.png',
110
- mimeType: 'image/png',
111
- filename: 'screenshot.png',
112
- },
113
- {
114
- type: MessageContentType.Text, // 'text'
115
- text: '请帮我分析这张架构图,指出其中的问题。',
116
- },
117
- ];
113
+ import { MessageRender, MessageContentType, MessageRole, MessageStatus } from '@blueking/chat-x';
114
+
115
+ const message = {
116
+ id: '1',
117
+ messageId: '1',
118
+ role: MessageRole.User,
119
+ status: MessageStatus.Complete,
120
+ content: [
121
+ {
122
+ type: MessageContentType.Binary,
123
+ url: 'https://example.com/screenshot.png',
124
+ mimeType: 'image/png',
125
+ filename: 'screenshot.png',
126
+ },
127
+ {
128
+ type: MessageContentType.Text,
129
+ text: '请帮我分析这张架构图,指出其中的问题。',
130
+ },
131
+ ],
132
+ };
118
133
  </script>
119
134
  ```
120
135
 
@@ -133,12 +148,14 @@
133
148
 
134
149
  ```vue
135
150
  <script setup lang="ts">
136
- import { UserMessage } from '@blueking/chat-x';
137
-
138
- const content = '这段代码每次循环都发起请求,应该如何优化?';
139
- const property = {
140
- extra: {
141
- cite: '// 原始代码\nfor (let i = 0; i < arr.length; i++) {\n fetch(`/api/${arr[i]}`)\n}',
151
+ // 消费方将 property 挂在 message 上,经 MessageRender 透传
152
+ const message = {
153
+ role: 'user',
154
+ content: '这段代码每次循环都发起请求,应该如何优化?',
155
+ property: {
156
+ extra: {
157
+ cite: '// 原始代码\nfor (let i = 0; i < arr.length; i++) {\n fetch(`/api/${arr[i]}`)\n}',
158
+ },
142
159
  },
143
160
  };
144
161
  </script>
@@ -150,18 +167,20 @@
150
167
 
151
168
  ```vue
152
169
  <script setup lang="ts">
153
- import { UserMessage } from '@blueking/chat-x';
154
-
155
- const content = '请帮我分析这份报表的数据趋势。';
156
- const property = {
157
- extra: {
158
- cite: {
159
- title: '销售数据分析',
160
- data: [
161
- { key: '报表名称', value: '2024 年 Q4 销售报表' },
162
- { key: '时间范围', value: '2024年10月 - 12月' },
163
- { key: '数据量', value: '12,580 条' },
164
- ],
170
+ const message = {
171
+ role: 'user',
172
+ content: '请帮我分析这份报表的数据趋势。',
173
+ property: {
174
+ extra: {
175
+ cite: {
176
+ title: '销售数据分析',
177
+ type: 'structured',
178
+ data: [
179
+ { key: '报表名称', value: '2024 Q4 销售报表' },
180
+ { key: '时间范围', value: '2024年10月 - 12' },
181
+ { key: '数据量', value: '12,580 条' },
182
+ ],
183
+ },
165
184
  },
166
185
  },
167
186
  };
@@ -182,34 +201,35 @@
182
201
 
183
202
  ```vue
184
203
  <script setup lang="ts">
185
- import { UserMessage } from '@blueking/chat-x';
186
-
187
- const content = '请帮我翻译这段文字';
188
- const property = {
189
- extra: {
190
- shortcut: {
191
- id: 'translate',
192
- name: '翻译',
193
- components: [
194
- {
195
- type: 'select',
196
- key: 'targetLang',
197
- name: '目标语言',
198
- default: 'en',
199
- options: [
200
- { label: '英文', value: 'en' },
201
- { label: '中文', value: 'zh' },
202
- ],
203
- },
204
- {
205
- type: 'textarea',
206
- key: 'content',
207
- name: '翻译内容',
208
- fillBack: true,
209
- default: '请帮我翻译这段文字',
210
- },
211
- ],
212
- formModel: { targetLang: 'en', content: '请帮我翻译这段文字' },
204
+ const message = {
205
+ role: 'user',
206
+ content: '请帮我翻译这段文字',
207
+ property: {
208
+ extra: {
209
+ shortcut: {
210
+ id: 'translate',
211
+ name: '翻译',
212
+ components: [
213
+ {
214
+ type: 'select',
215
+ key: 'targetLang',
216
+ name: '目标语言',
217
+ default: 'en',
218
+ options: [
219
+ { label: '英文', value: 'en' },
220
+ { label: '中文', value: 'zh' },
221
+ ],
222
+ },
223
+ {
224
+ type: 'textarea',
225
+ key: 'content',
226
+ name: '翻译内容',
227
+ fillBack: true,
228
+ default: '请帮我翻译这段文字',
229
+ },
230
+ ],
231
+ formModel: { targetLang: 'en', content: '请帮我翻译这段文字' },
232
+ },
213
233
  },
214
234
  },
215
235
  };
@@ -236,8 +256,8 @@ binaryFiles 有值 → 进入编辑模式(editContent 可为空)
236
256
 
237
257
  ```vue
238
258
  <template>
239
- <UserMessage
240
- :content="content"
259
+ <MessageRender
260
+ :message="message"
241
261
  :on-action="handleAction"
242
262
  :on-input-confirm="handleInputConfirm"
243
263
  :on-shortcut-confirm="handleShortcutConfirm"
@@ -245,25 +265,35 @@ binaryFiles 有值 → 进入编辑模式(editContent 可为空)
245
265
  </template>
246
266
 
247
267
  <script setup lang="ts">
248
- import { UserMessage, type IToolBtn, type TagSchema } from '@blueking/chat-x';
249
-
250
- const content = '请帮我优化这段代码';
268
+ import {
269
+ MessageRender,
270
+ MessageRole,
271
+ MessageStatus,
272
+ type IToolBtn,
273
+ type TagSchema,
274
+ type UserMessage,
275
+ } from '@blueking/chat-x';
276
+
277
+ const message = {
278
+ id: '1',
279
+ messageId: '1',
280
+ role: MessageRole.User,
281
+ content: '请帮我优化这段代码',
282
+ status: MessageStatus.Complete,
283
+ };
251
284
 
252
285
  const handleAction = async (tool: IToolBtn) => {
253
- // tool.id === 'edit' 组件内部自动切换编辑模式
254
- // tool.id === 'copy' 自动复制(字符串直接复制,数组 JSON.stringify 后复制)
255
- // tool.id === 'cite' → 由外部 onAction 处理(组件内无内置行为)
286
+ // edit 组件内切编辑态;copy 组件内复制
287
+ // cite / delete 无内置行为,业务侧处理(如删除会话消息)
256
288
  console.log('工具:', tool.id);
257
289
  };
258
290
 
259
- const handleInputConfirm = async (content: string | InputContent[], docSchema: TagSchema) => {
260
- console.log('编辑后内容:', content);
261
- // 重新发送消息
291
+ const handleInputConfirm = async (content: UserMessage['content'], docSchema: TagSchema) => {
292
+ console.log('编辑后内容:', content, docSchema);
262
293
  };
263
294
 
264
295
  const handleShortcutConfirm = async (formModel: Record<string, unknown>) => {
265
296
  console.log('快捷指令表单:', formModel);
266
- // 重新发送快捷指令
267
297
  };
268
298
  </script>
269
299
  ```
@@ -274,50 +304,85 @@ binaryFiles 有值 → 进入编辑模式(editContent 可为空)
274
304
 
275
305
  **内置工具列表(`CONST_USER_MESSAGE_TOOLS`)**
276
306
 
277
- | 工具 ID | 名称 | 内置行为 |
278
- | ------- | ---- | -------------------------------------------- |
279
- | `copy` | 复制 | 字符串直接复制;数组 `JSON.stringify` 后复制 |
280
- | `cite` | 引用 | 无内置行为,需通过 `onAction` 外部处理 |
281
- | `edit` | 编辑 | 切换 `isEdit=true`,进入编辑模式 |
307
+ | 工具 ID | 名称 | 内置行为 |
308
+ | -------- | ---- | -------------------------------------------- |
309
+ | `copy` | 复制 | 字符串直接复制;数组 `JSON.stringify` 后复制 |
310
+ | `cite` | 引用 | 无内置行为,需通过 `onAction` 外部处理 |
311
+ | `edit` | 编辑 | 切换 `isEdit=true`,进入编辑模式 |
312
+ | `delete` | 删除 | 无内置行为,需通过 `onAction` 外部处理 |
282
313
 
283
314
  ```vue
284
- <!-- 隐藏工具按钮(从 DOM 移除,不占位) -->
285
- <UserMessage :content="content" message-tools-status="hidden" />
315
+ <!-- MessageRender 控制工具栏状态 -->
316
+ <MessageRender
317
+ :message="message"
318
+ message-tools-status="hidden"
319
+ />
320
+ <MessageRender
321
+ :message="message"
322
+ message-tools-status="disabled"
323
+ />
324
+ ```
286
325
 
287
- <!-- 禁用工具按钮(保留占位,不可点击,无 hover 效果) -->
288
- <UserMessage :content="content" message-tools-status="disabled" />
326
+ ## supportUpload 透传
327
+
328
+ 编辑态 `ChatInput` 的上传能力来自 `injectGlobalConfig().supportUpload`(通常由 `ChatContainer` 的 `supportUpload` prop 注册)。自定义 `#message` 插槽时须把同一配置链路保留,否则编辑态会与主输入区不一致。
329
+
330
+ ```vue
331
+ <template>
332
+ <ChatContainer
333
+ :messages="messages"
334
+ :support-upload="true"
335
+ :on-agent-action="handleAgentAction"
336
+ :on-user-action="handleUserAction"
337
+ >
338
+ <template #message="{ message, messageToolsStatus, onInterruptResume }">
339
+ <MessageRender
340
+ :message="message"
341
+ :message-tools-status="messageToolsStatus"
342
+ :on-action="handleUserAction"
343
+ :on-input-confirm="(content, docSchema) => handleUserInputConfirm(message, content, docSchema)"
344
+ :on-shortcut-confirm="formModel => handleUserShortcutConfirm(message, formModel)"
345
+ :on-interrupt-resume="onInterruptResume"
346
+ />
347
+ </template>
348
+ </ChatContainer>
349
+ </template>
289
350
  ```
290
351
 
291
352
  ## API
292
353
 
293
354
  ### Props
294
355
 
295
- | 属性名 | 类型 | 说明 |
296
- | ------------------ | ---------------------------------------------------------------------------- | --------------------------------------------------------- |
297
- | content | `string \| InputContent[]` | 消息内容,字符串或含 text/binary 的数组 |
298
- | property | `{ extra?: MessageExtra }` | 消息附加属性,包含引用、快捷指令、context 等信息 |
299
- | messageToolsStatus | `MessageToolsStatus` | 工具按钮状态,`disabled` 禁用、`hidden` 从 DOM 移除 |
300
- | onAction | `(tool: IToolBtn) => Promise<void>` | 工具按钮回调;`copy`/`edit` 有内置行为,`cite` 需外部处理 |
301
- | onInputConfirm | `(content: string \| InputContent[], docSchema: TagSchema) => Promise<void>` | 普通消息编辑确认回调 |
302
- | onShortcutConfirm | `(formModel: Record<string, unknown>) => Promise<void>` | 快捷指令消息编辑确认回调 |
303
- | tippyOptions | `Partial<Omit<TippyOptions, 'getReferenceClientRect' \| 'triggerTarget'>>` | 自定义工具栏 Tippy 配置,透传给内部 `MessageTools` 组件 |
356
+ | 属性名 | 类型 | 说明 |
357
+ | ------------------ | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
358
+ | content | `string \| InputContent[]` | 消息内容,字符串或含 text/binary 的数组 |
359
+ | property | `{ extra?: MessageExtra; artifacts?: AIFileInfo[] }` | 附加属性;本组件消费 `extra.cite` / `shortcut` / `context` |
360
+ | messageToolsStatus | `MessageToolsStatus` | 工具按钮状态,`disabled` 禁用、`hidden` 从 DOM 移除 |
361
+ | onAction | `MessageToolsProps['onAction']` | 工具回调;`copy`/`edit` 有内置行为,`cite`/`delete` 需外部处理 |
362
+ | onInputConfirm | `(content: UserMessage['content'], docSchema: TagSchema) => Promise<void>` | 普通消息编辑确认回调 |
363
+ | onShortcutConfirm | `(formModel: Record<string, unknown>) => Promise<void>` | 快捷指令消息编辑确认回调 |
364
+ | tippyOptions | `Partial<Omit<TippyOptions, 'getReferenceClientRect' \| 'triggerTarget'>>` | 自定义工具栏 Tippy 配置,透传给内部 `MessageTools` |
365
+
366
+ ### Events / Slots / Expose
367
+
368
+ 无。
304
369
 
305
370
  ### 全局配置依赖
306
371
 
307
- 编辑模式下的 `ChatInput` 会通过 `injectGlobalConfig()` 获取全局配置中的 `supportUpload` 值。需要确保祖先组件(通常是 `ChatContainer`)已调用 `useGlobalConfig()` 注册配置。
372
+ 编辑态 `ChatInput` 通过 `injectGlobalConfig()` 读取 `supportUpload`。祖先需已 `useGlobalConfig()`(通常由 `ChatContainer` 注册)。
308
373
 
309
374
  ## 类型定义
310
375
 
311
376
  ```typescript
312
377
  // 文本内容项
313
378
  interface TextInputContent {
314
- type: 'text'; // MessageContentType.Text
379
+ type: 'text';
315
380
  text: string;
316
381
  }
317
382
 
318
383
  // 二进制内容项(图片、文件)
319
384
  interface BinaryContent {
320
- type: 'binary'; // MessageContentType.Binary
385
+ type: 'binary';
321
386
  url?: string;
322
387
  mimeType?: string;
323
388
  filename?: string;
@@ -325,28 +390,27 @@ interface BinaryContent {
325
390
 
326
391
  type InputContent = TextInputContent | BinaryContent;
327
392
 
328
- // 消息附加属性
329
- interface MessageExtra {
330
- // 文本引用(字符串):渲染在气泡外 CiteContent
331
- cite?: string;
332
-
333
- // 结构化引用(对象):渲染在气泡内 KeyValueContent;与 context 配合可重建 ShortcutRender
334
- cite?: {
335
- title?: string;
336
- data: Array<{ key: string; value: string }>;
337
- };
338
-
339
- // 快捷指令:编辑时渲染 ShortcutRender(优先于 cite+context 路径)
340
- shortcut?: Shortcut;
341
-
342
- // 上下文变量:与结构化 cite 配合,在编辑模式下动态构建 ShortcutComponent[]
393
+ // property.extra(与源码 BaseMessage.property.extra 对齐)
394
+ type MessageExtra = {
395
+ // 文本引用 或 结构化引用(互斥 union,不是两个同名字段)
396
+ cite?:
397
+ | string
398
+ | {
399
+ title: string;
400
+ type: 'structured';
401
+ data: Array<{ key: string; value: string }>;
402
+ };
403
+ command?: string;
404
+ pause?: boolean;
405
+ shortcut?: Partial<Shortcut>;
343
406
  context?: Array<{
344
407
  __key: string;
345
408
  __label: string;
346
409
  __value: string;
347
410
  fillBack?: boolean;
411
+ context_type?: string;
348
412
  }>;
349
- }
413
+ };
350
414
  ```
351
415
 
352
416
  ## 关联组件
@@ -1,7 +1,7 @@
1
1
  <!-- AI SUMMARY -->
2
2
  ## 快速了解
3
3
 
4
- 渲染 UserQuestion 中断的待回答面板,支持单选、多选、Others 与跳过。 源码位置:src/components/chat-message/interrupt-message/user-question/user-question-card.vue。
4
+ 渲染 UserQuestion 中断的待回答面板:一次只展示一题,标题栏提供题号切换, Footer 展示已完成进度;支持单选自动跳下一题、多选/Others、完成与跳过。 源码位置:src/components/chat-message/interrupt-message/user-question/user-question-card.vue。
5
5
 
6
6
  ### 关联组件
7
7
  - **interrupt-message** — outcome.success 时挂载 UserQuestionAnsweredCard 回显回答
@@ -16,7 +16,7 @@
16
16
 
17
17
  - **源码位置**:`src/components/chat-message/interrupt-message/user-question/user-question-card.vue`
18
18
  - **能力域**:Agent 能力
19
- - **能力说明**:渲染 UserQuestion 中断的待回答面板,支持单选、多选、Others 与跳过。
19
+ - **能力说明**:渲染 UserQuestion 中断的待回答面板;一次一题分页切换,支持单选/多选、Others、跳过与已完成进度。
20
20
 
21
21
  > **能力域**:Agent 能力
22
22
 
@@ -24,6 +24,9 @@
24
24
 
25
25
  ## 交互能力
26
26
 
27
+ - **一次一题**:正文只展示当前题;标题栏右侧提供 `< 当前题 / 总题数 >` 切换定位(单题为 `1 / 1`),首末题对应箭头禁用。
28
+ - **自动跳转**:单选预设选项从未答变为有效答时,自动跳到下一题(最后一题停留);多选与 Others 不自动跳,靠箭头切换。
29
+ - **已完成进度**:Footer 左侧展示「已完成 N 题」;右侧为「跳过」+「完成」。
27
30
  - **单选 / 多选**:每道题通过 `multiSelect` 控制选择行为;未传时不展示单选/多选标签,默认仍按单选处理。
28
31
  - **Others 自由输入**:默认 [UserQuestionChoice](/components/agent/user-question-choice) 为每道题追加 `label: 'others'` 输入项,输入文本写入 `answer[].description`。
29
32
  - **自定义作答形态**:通过 `#question` slot 可替换默认选择题,渲染任意表单;作答有效时调用 `setAnswer` 回传 `UserQuestionAnswerItem`,无效时传 `undefined`。
@@ -142,7 +145,7 @@ const payload = {
142
145
  />
143
146
  ```
144
147
 
145
- - 卡片内「完成 / 跳过」→ `onInterruptResume(payload, interrupt)`
148
+ - 卡片内「跳过 / 完成」→ `onInterruptResume(payload, interrupt)`(Footer 右置,跳过在前、完成在后)
146
149
  - 输入框直接发送 → `onSendMessage(content, docSchema, { interrupt, payload })`,其中 `payload` 由 `buildSkipResumePayload(interrupt)` 生成(`status: 'cancelled'`)
147
150
 
148
151
  ## 工具函数 buildSkipResumePayload