@blueking/chat-x 0.0.45-beta.4 → 0.0.45-beta.6

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 (135) hide show
  1. package/README.md +1 -1
  2. package/dist/ag-ui/types/constants.d.ts +0 -16
  3. package/dist/ag-ui/types/contents.d.ts +0 -2
  4. package/dist/ag-ui/types/index.d.ts +0 -2
  5. package/dist/ag-ui/types/messages.d.ts +0 -2
  6. package/dist/components/chat-content/flow-agent-content/flow-agent-content.vue.d.ts +0 -3
  7. package/dist/components/chat-content/flow-agent-content/use-flow-agent.d.ts +0 -4
  8. package/dist/components/chat-input/chat-input.vue.d.ts +6 -9
  9. package/dist/components/chat-input/input-attachment/input-attachment.vue.d.ts +0 -1
  10. package/dist/components/chat-message/activity-message/activity-message.vue.d.ts +1 -4
  11. package/dist/components/chat-message/assistant-message/assistant-message.vue.d.ts +1 -1
  12. package/dist/components/chat-message/message-container/message-container.vue.d.ts +7 -14
  13. package/dist/components/chat-message/message-render/message-render.vue.d.ts +0 -4
  14. package/dist/components/index.d.ts +2 -3
  15. package/dist/composables/use-global-config.d.ts +0 -3
  16. package/dist/composables/use-message-group.d.ts +823 -2609
  17. package/dist/icons/index.d.ts +0 -1
  18. package/dist/index.css +1 -1
  19. package/dist/index.js +1935 -2564
  20. package/dist/index.js.map +1 -1
  21. package/dist/lang/lang.d.ts +2 -34
  22. package/dist/mcp/generated/docs/activity-message.md +7 -21
  23. package/dist/mcp/generated/docs/ai-image.md +4 -9
  24. package/dist/mcp/generated/docs/ai-loading.md +6 -11
  25. package/dist/mcp/generated/docs/ai-selection.md +5 -10
  26. package/dist/mcp/generated/docs/animation-text.md +4 -9
  27. package/dist/mcp/generated/docs/assistant-message.md +5 -10
  28. package/dist/mcp/generated/docs/chat-container.md +19 -153
  29. package/dist/mcp/generated/docs/chat-input.md +9 -45
  30. package/dist/mcp/generated/docs/cite-content.md +3 -8
  31. package/dist/mcp/generated/docs/code-content.md +4 -9
  32. package/dist/mcp/generated/docs/common-error-content.md +5 -10
  33. package/dist/mcp/generated/docs/constants.md +3 -68
  34. package/dist/mcp/generated/docs/content-render.md +5 -10
  35. package/dist/mcp/generated/docs/delete-tool.md +4 -9
  36. package/dist/mcp/generated/docs/desc-panel.md +4 -9
  37. package/dist/mcp/generated/docs/execution-summary.md +5 -10
  38. package/dist/mcp/generated/docs/file-content.md +4 -9
  39. package/dist/mcp/generated/docs/file-upload-btn.md +5 -10
  40. package/dist/mcp/generated/docs/highlight-keyword.md +5 -10
  41. package/dist/mcp/generated/docs/image-content.md +4 -9
  42. package/dist/mcp/generated/docs/image-preview-group.md +4 -9
  43. package/dist/mcp/generated/docs/image-preview.md +5 -10
  44. package/dist/mcp/generated/docs/info-message.md +2 -7
  45. package/dist/mcp/generated/docs/key-value-content.md +4 -9
  46. package/dist/mcp/generated/docs/latex-content.md +4 -9
  47. package/dist/mcp/generated/docs/loading-message.md +6 -11
  48. package/dist/mcp/generated/docs/markdown-container.md +1 -1
  49. package/dist/mcp/generated/docs/markdown-content.md +8 -13
  50. package/dist/mcp/generated/docs/markdown-latex.md +3 -3
  51. package/dist/mcp/generated/docs/markdown-mermaid.md +3 -3
  52. package/dist/mcp/generated/docs/mermaid-content.md +4 -9
  53. package/dist/mcp/generated/docs/message-container.md +11 -69
  54. package/dist/mcp/generated/docs/message-render.md +11 -23
  55. package/dist/mcp/generated/docs/message-tools.md +5 -10
  56. package/dist/mcp/generated/docs/messages.md +11 -75
  57. package/dist/mcp/generated/docs/overflow-tips.md +4 -4
  58. package/dist/mcp/generated/docs/reasoning-message.md +5 -10
  59. package/dist/mcp/generated/docs/reference-content.md +5 -10
  60. package/dist/mcp/generated/docs/scroll-btn.md +3 -8
  61. package/dist/mcp/generated/docs/selection-footer.md +4 -9
  62. package/dist/mcp/generated/docs/shortcut-btn.md +5 -10
  63. package/dist/mcp/generated/docs/shortcut-btns.md +5 -10
  64. package/dist/mcp/generated/docs/shortcut-render.md +5 -10
  65. package/dist/mcp/generated/docs/text-content.md +4 -9
  66. package/dist/mcp/generated/docs/theme.md +4 -50
  67. package/dist/mcp/generated/docs/tool-btn.md +4 -9
  68. package/dist/mcp/generated/docs/tool-message.md +5 -10
  69. package/dist/mcp/generated/docs/toolcall-render.md +5 -10
  70. package/dist/mcp/generated/docs/use-animation-text.md +4 -4
  71. package/dist/mcp/generated/docs/use-clipboard.md +3 -3
  72. package/dist/mcp/generated/docs/use-command-selection.md +1 -1
  73. package/dist/mcp/generated/docs/use-custom-tab.md +1 -1
  74. package/dist/mcp/generated/docs/use-full-screen.md +3 -3
  75. package/dist/mcp/generated/docs/use-global-config.md +5 -20
  76. package/dist/mcp/generated/docs/use-menu-keydown.md +1 -1
  77. package/dist/mcp/generated/docs/use-message-group.md +9 -40
  78. package/dist/mcp/generated/docs/use-observer-visible-list.md +1 -1
  79. package/dist/mcp/generated/docs/user-feedback.md +3 -8
  80. package/dist/mcp/generated/docs/user-message.md +5 -10
  81. package/dist/mcp/generated/index.json +560 -1103
  82. package/dist/mcp/index.js +0 -0
  83. package/dist/mcp/server.js +1 -1
  84. package/dist/mcp/server.js.map +1 -1
  85. package/dist/mcp/tools/list-components.d.ts +6 -7
  86. package/dist/mcp/tools/list-components.js +29 -23
  87. package/dist/mcp/tools/list-components.js.map +1 -1
  88. package/dist/mcp/tools/search-docs.js +1 -1
  89. package/dist/mcp/tools/search-docs.js.map +1 -1
  90. package/dist/mcp/utils/doc-loader.d.ts +1 -1
  91. package/package.json +21 -23
  92. package/dist/ag-ui/types/interrupt.d.ts +0 -137
  93. package/dist/ag-ui/types/schema.d.ts +0 -42
  94. package/dist/components/ai-questions/questions-container.vue.d.ts +0 -3
  95. package/dist/components/ai-questions/selection-question.vue.d.ts +0 -3
  96. package/dist/components/chat-content/flow-agent-content/use-flow-node-actions.d.ts +0 -32
  97. package/dist/components/chat-content/index.d.ts +0 -2
  98. package/dist/components/chat-input/input-info-alert.vue.d.ts +0 -6
  99. package/dist/components/chat-message/interrupt-message/index.d.ts +0 -2
  100. package/dist/components/chat-message/interrupt-message/interrupt-message.vue.d.ts +0 -17
  101. package/dist/components/chat-message/interrupt-message/tool-approval-card.vue.d.ts +0 -8
  102. package/dist/components/chat-message/interrupt-message/user-question/index.d.ts +0 -5
  103. package/dist/components/chat-message/interrupt-message/user-question/use-user-question.d.ts +0 -35
  104. package/dist/components/chat-message/interrupt-message/user-question/user-question-answered-card.vue.d.ts +0 -25
  105. package/dist/components/chat-message/interrupt-message/user-question/user-question-card.vue.d.ts +0 -25
  106. package/dist/components/chat-message/interrupt-message/user-question/user-question-choice.vue.d.ts +0 -13
  107. package/dist/components/chat-message/interrupt-message/user-question/user-question-option.vue.d.ts +0 -17
  108. package/dist/icons/interrupt.d.ts +0 -24
  109. package/dist/mcp/generated/docs/activity-layout.md +0 -138
  110. package/dist/mcp/generated/docs/ai-prompt-list.md +0 -42
  111. package/dist/mcp/generated/docs/ai-slash-editor.md +0 -43
  112. package/dist/mcp/generated/docs/ai-slash-input.md +0 -43
  113. package/dist/mcp/generated/docs/ai-slash-menu.md +0 -42
  114. package/dist/mcp/generated/docs/detail-section.md +0 -93
  115. package/dist/mcp/generated/docs/flow-agent-content.md +0 -252
  116. package/dist/mcp/generated/docs/flow-agent-node-detail.md +0 -240
  117. package/dist/mcp/generated/docs/input-attachment.md +0 -43
  118. package/dist/mcp/generated/docs/input-info-alert.md +0 -42
  119. package/dist/mcp/generated/docs/interrupt-message.md +0 -204
  120. package/dist/mcp/generated/docs/interrupt.md +0 -354
  121. package/dist/mcp/generated/docs/knowledge-rag-content.md +0 -126
  122. package/dist/mcp/generated/docs/message-loading.md +0 -120
  123. package/dist/mcp/generated/docs/preview-toolbar.md +0 -42
  124. package/dist/mcp/generated/docs/questions-container.md +0 -88
  125. package/dist/mcp/generated/docs/reference-doc-content.md +0 -112
  126. package/dist/mcp/generated/docs/schema.md +0 -93
  127. package/dist/mcp/generated/docs/selection-question.md +0 -91
  128. package/dist/mcp/generated/docs/simple-table.md +0 -103
  129. package/dist/mcp/generated/docs/tool-approval-card.md +0 -148
  130. package/dist/mcp/generated/docs/use-flow-node-actions.md +0 -124
  131. package/dist/mcp/generated/docs/user-question-answered-card.md +0 -106
  132. package/dist/mcp/generated/docs/user-question-card.md +0 -211
  133. package/dist/mcp/generated/docs/user-question-choice.md +0 -108
  134. package/dist/mcp/generated/docs/user-question-option.md +0 -42
  135. package/dist/mcp/generated/docs/vnode-renderer.md +0 -126
@@ -1,252 +0,0 @@
1
- <!-- AI SUMMARY -->
2
- ## 快速了解
3
-
4
- 渲染 FlowAgent 任务/节点执行状态、耗时、详情入口和自定义 Tab 联动。 源码位置:src/components/chat-content/flow-agent-content/flow-agent-content.vue。
5
-
6
- ### 关联组件
7
- - **flow-agent-node-detail** — 详情入口点击后挂载到自定义 Tab 渲染
8
- - **activity-layout** — 提供可折叠的活动容器外壳
9
- - **chat-container** — 通过自定义 Tab 在侧栏展示节点详情
10
-
11
- ---
12
- <!-- FULL DOC -->
13
-
14
- # FlowAgentContent FlowAgent 执行内容
15
-
16
- > **能力域**:Agent 能力
17
-
18
- 渲染 FlowAgent(标准运维 / 流程编排)执行过程的活动组件,以「任务 → 节点」两级结构展示执行状态、耗时统计与详情入口。组件内部消费 `useCustomTabConsumer`,点击节点「详情」会向侧栏的自定义 Tab 注入 `FlowAgentNodeDetail` 渲染节点输入输出。
19
-
20
- 通常不需要直接使用,`MessageRender` 会根据消息 `content.type === flow_agent` 自动渲染。
21
-
22
- ## 源码事实
23
-
24
- - **源码位置**:`src/components/chat-content/flow-agent-content/flow-agent-content.vue`
25
- - **能力说明**:渲染 FlowAgent 任务/节点执行状态、耗时、详情入口和自定义 Tab 联动。
26
-
27
- ## 核心能力
28
-
29
- - **状态聚合统计**:汇总所有任务的 `statistics.state_counts`,在标题栏按「执行中 / 成功 / 失败 / 挂起 / 待执行」分类展示带颜色的计数(超过 99 显示 `99+`)
30
- - **两级折叠**:任务整体由 `ActivityLayout` 折叠;每个任务节点列表可单独展开/收起
31
- - **耗时格式化**:节点耗时与任务总耗时按 `d/h/m/s` 紧凑展示,小于 1 秒显示 `<1s`
32
- - **节点行尾操作**:hover 失败节点行显示「重试 / 跳过 / 详情」按钮组(间距 12px);成功 / 运行中等非失败节点仅显示「详情」。重试 / 跳过依赖节点 `retryable` / `skippable` 能力位,通过 `onInterruptResume` 回传 Agent
33
- - **详情入口联动**:「详情」按钮点击后通过自定义 Tab 挂载 `FlowAgentNodeDetail`
34
- - **分享态降级**:`RenderMode.Share` 下隐藏耗时与行尾操作按钮,仅保留只读的执行状态
35
-
36
- ## 状态映射
37
-
38
- 组件将后端原始 `state` / `task_state` 归一为 5 类收敛状态(`getConvergedState`),用于图标、颜色与统计分类:
39
-
40
- | 收敛状态 | 颜色 | 原始状态 |
41
- | ----------- | ----------- | --------------------------------------------------------------------------------- |
42
- | `success` | `#18B456` | `FINISHED` |
43
- | `failed` | `#EA3636` | `FAILED`、`REVOKED`、`ROLL_BACK_FAILED` |
44
- | `suspended` | `#F59500` | `SUSPENDED` |
45
- | `pending` | `#4D4F56` | `PENDING` |
46
- | `running` | `#3A84FF` | `CREATED`、`LOOP_READY`、`READY`、`RUNNING`、`BLOCKED`、`ROLLING_BACK`、`ROLL_BACK_SUCCESS` 及未知状态(兜底) |
47
-
48
- ## 基础用法
49
-
50
- `content` 为任务数组 `BkFlowTask[]`;传入单个对象时组件会自动包装为单元素数组。
51
-
52
- ```vue
53
- <template>
54
- <FlowAgentContent
55
- :content="flowContent"
56
- :message-uid="messageUid"
57
- :on-interrupt-resume="handleInterruptResume"
58
- :status="status"
59
- />
60
- </template>
61
-
62
- <script setup lang="ts">
63
- import { FlowAgentContent } from '@blueking/chat-x';
64
- import type { BkFlowMessageContent, OnInterruptResume } from '@blueking/chat-x';
65
-
66
- const messageUid = 'flow-msg-1';
67
- const status = 'success';
68
- const handleInterruptResume: OnInterruptResume = async payload => {
69
- console.log('flow node resume:', payload);
70
- };
71
- const flowContent: BkFlowMessageContent = [
72
- {
73
- task_id: 100,
74
- task_name: '主机巡检流程',
75
- task_state: 'FINISHED',
76
- task_outputs: { result: 'ok' },
77
- statistics: { state_counts: { FINISHED: 2, FAILED: 1 }, total: 3 },
78
- nodes: {
79
- n1: { id: 'n1', name: '采集主机指标', state: 'FINISHED', elapsed_time: 12, type: 'task', loop: 0, retry: 0, skip: false, start_time: '', finish_time: '' },
80
- n2: { id: 'n2', name: '分析异常项', state: 'FINISHED', elapsed_time: 65, type: 'task', loop: 0, retry: 0, skip: false, start_time: '', finish_time: '' },
81
- n3: { id: 'n3', name: '推送告警', state: 'FAILED', elapsed_time: 3, type: 'task', loop: 0, retry: 1, skip: false, retryable: true, skippable: true, start_time: '', finish_time: '' },
82
- },
83
- },
84
- ];
85
- </script>
86
- ```
87
-
88
- **渲染效果**(hover 失败节点行可看到「重试 / 跳过 / 详情」按钮组;点击「详情」会向侧栏自定义 Tab 注入节点详情)
89
-
90
- ## 执行中状态
91
-
92
- `status` 为 `pending` / `streaming` 时,标题栏图标显示为加载动画;运行中的节点显示旋转 Loading,待执行 / 挂起节点显示对应颜色的状态点。
93
-
94
- ## 失败节点重试 / 跳过
95
-
96
- 失败节点(`convergedState === 'failed'`)且具备对应能力位时,hover 行尾展示「重试」或「跳过」按钮。点击后调用 `onInterruptResume`,**不传** `interrupt` 参数:
97
-
98
- ```typescript
99
- // 重试
100
- onInterruptResume?.({
101
- operation: InterruptResumeOperation.FlowNodeRetry,
102
- payload: { node_id: node.id, task_id: task.task_id },
103
- });
104
-
105
- // 跳过
106
- onInterruptResume?.({
107
- operation: InterruptResumeOperation.FlowNodeSkip,
108
- payload: { node_id: node.id, task_id: task.task_id },
109
- });
110
- ```
111
-
112
- | 按钮 | 显隐条件 | `operation` |
113
- | ---- | ------------------------------------- | ---------------------- |
114
- | 重试 | 失败态且 `node.retryable === true` | `flow_node_retry` |
115
- | 跳过 | 失败态且 `node.skippable === true` | `flow_node_skip` |
116
- | 详情 | 始终展示(Share 模式除外) | —(打开侧栏 Tab,不走 resume) |
117
-
118
- 行尾操作由内部 composable [`useFlowNodeActions`](/composables/use-flow-node-actions) 聚合为声明式列表,组件层仅遍历渲染。
119
-
120
- ## 节点详情联动
121
-
122
- 点击节点「详情」按钮时,组件调用 `addCustomTab` 注入一个以 `${task_id}|${node.id}|${node.name}` 为唯一 `name` 的 Tab,渲染组件为 `FlowAgentNodeDetail`:
123
-
124
- ```ts
125
- addCustomTab?.({
126
- label: node.name,
127
- name: `${task.task_id}|${node.id}|${node.name}`,
128
- data: {
129
- component: BkFlowNodeDetail,
130
- messageUid: props.messageUid,
131
- props: {
132
- loading: true,
133
- node_id: node.id,
134
- node_name: node.name,
135
- task_id: task.task_id,
136
- task_name: task.task_name,
137
- data: {},
138
- },
139
- },
140
- });
141
- ```
142
-
143
- > 实际节点详情数据由应用层在 `ChatContainer` 的 `onCustomTabChange` 中异步拉取后回填,组件本身只负责挂载占位与传参。组件卸载时(在消息容器滚动上下文中)会自动调用 `removeCustomTab` 清理对应 Tab。
144
-
145
- ## 组件结构
146
-
147
- ```
148
- ActivityLayout(activity-type=flow_agent,v-model:collapsed)
149
- ├── #title(执行情况统计栏)
150
- │ ├── AiLoading / ArrowRightIcon(加载态 / 折叠箭头)
151
- │ └── flow-agent-stat-item × N(按收敛状态分类的计数)
152
- └── flow-agent-task-group × N(任务)
153
- ├── flow-agent-task-header(点击折叠当前任务)
154
- │ ├── task-arrow(任务展开箭头)
155
- │ ├── task-state-icon(Loading / 状态图标)
156
- │ ├── task-name(HighlightKeyword + 溢出提示)
157
- │ └── task-time(任务总耗时 = 各节点耗时累加)
158
- └── flow-agent-task-nodes(v-show 折叠)
159
- └── flow-agent-node-item × N(节点)
160
- ├── node-status(Loading / 状态圆点)
161
- ├── node-name(HighlightKeyword + 溢出提示)
162
- └── node-trailing(非 Share 态)
163
- ├── node-time(节点耗时,hover 时隐藏)
164
- └── node-actions(hover 时显示按钮组,间距 12px)
165
- ├── node-action-btn「重试」(失败 + retryable)
166
- ├── node-action-btn「跳过」(失败 + skippable)
167
- └── node-action-btn「详情」(始终,点击挂载详情 Tab)
168
- ```
169
-
170
- ## API
171
-
172
- ### Props
173
-
174
- | 属性名 | 类型 | 必填 | 默认值 | 说明 |
175
- | ---------- | ------------------------ | ---- | ----------- | -------------------------------------------------------------------------- |
176
- | content | `BkFlowMessageContent` | 否 | `[{}]` | 任务数组;传入单个 `BkFlowTask` 时自动包装为单元素数组 |
177
- | messageUid | `string` | 否 | — | 所属消息唯一标识,注入到节点详情 Tab 的 `data.messageUid`,用于异步回填数据 |
178
- | onInterruptResume | `OnInterruptResume` | 否 | — | 节点「重试 / 跳过」与第三方审批取消复用同一回调,按 `payload.operation` 分流;流程节点操作时不传 `interrupt` |
179
- | status | `MessageStatus` | 否 | — | 消息状态;`pending` / `streaming` 时标题栏显示加载动画 |
180
-
181
- ### Emits
182
-
183
- - 无。
184
-
185
- ### Slots
186
-
187
- - 无。
188
-
189
- ### Expose
190
-
191
- - 无。
192
-
193
- ## 类型定义
194
-
195
- ```typescript
196
- // 来自 @blueking/chat-x 导出
197
- type BkFlowMessageContent = BkFlowTask[];
198
-
199
- interface BkFlowTask {
200
- task_id: number;
201
- task_name: string;
202
- task_state: string; // 原始任务状态,经 getConvergedState 归一
203
- task_outputs: unknown; // 任务输出(当前展示区块已注释,不渲染)
204
- statistics: {
205
- state_counts: Record<string, number>; // 原始状态 → 数量,用于标题统计聚合
206
- total: number;
207
- };
208
- nodes: Record<string, BkFlowNode>; // key 为节点 id
209
- }
210
-
211
- interface BkFlowNode {
212
- id: string;
213
- name: string;
214
- state: string; // 原始节点状态
215
- elapsed_time: number; // 耗时(秒)
216
- type: string;
217
- loop: number;
218
- retry: number;
219
- retryable?: boolean; // 是否可重试(失败节点「重试」按钮显隐)
220
- skip: boolean;
221
- skippable?: boolean; // 是否可跳过(失败节点「跳过」按钮显隐)
222
- start_time: string;
223
- finish_time: string;
224
- }
225
- ```
226
-
227
- ## 组件依赖
228
-
229
- - `AiLoading` — 标题栏流式加载动画
230
- - `ActivityLayout` — 可折叠活动容器外壳
231
- - `BkFlowNodeDetail` — 节点详情面板(经自定义 Tab 挂载)
232
- - `Loading`(bkui-vue) — 运行中状态的旋转指示
233
- - `HighlightKeyword` — 任务 / 节点名称的搜索关键词高亮
234
-
235
- ## 注意事项
236
-
237
- 1. **依赖自定义 Tab 上下文**:组件内部使用 `useCustomTabConsumer()!`,必须存在 `useCustomTabProvider` 提供者(`ChatContainer` 已内置)。脱离上下文直接使用需自行提供,否则详情入口会报错。
238
- 2. **统计来自 `statistics.state_counts` 而非节点遍历**:标题栏计数直接读取后端下发的统计,不会实时统计 `nodes`;两者不一致时以 `state_counts` 为准。
239
- 3. **任务总耗时为节点累加**:`task-time` 由各节点 `elapsed_time` 求和得到,并非任务级独立字段。
240
- 4. **`task_outputs` 暂不渲染**:模板中任务输出展示区块已注释,传入也不会显示。
241
- 5. **未知状态兜底为 `running`**:`getConvergedState` 对未识别的原始状态统一归为运行中。
242
- 6. **Share 模式降级**:`RenderMode.Share` 下不渲染节点耗时与行尾操作按钮(重试 / 跳过 / 详情),仅保留只读执行状态。
243
- 7. **`onInterruptResume` 透传链路**:`MessageRender` → `ActivityMessage` → `FlowAgentContent`;未传入时重试 / 跳过按钮仍展示但点击无回调。
244
-
245
- ## 关联组件
246
-
247
- - [FlowAgentNodeDetail](/components/agent/flow-agent-node-detail) — 节点详情面板
248
- - [ActivityLayout](/components/helper/activity-layout) — 可折叠活动容器
249
- - [ChatContainer](/components/setup/chat-container) — 侧栏自定义 Tab 挂载场景
250
- - [useFlowNodeActions](/composables/use-flow-node-actions) — 节点行尾操作聚合 composable
251
- - [中断类型 Interrupt](/types/interrupt) — `InterruptResumeOperation`、`FlowNodeResume`、`OnInterruptResume`
252
- - [使用建议] 优先通过上层组合组件(`MessageRender`)使用;直接使用前请确认 `content` 数据结构来自对应类型定义。
@@ -1,240 +0,0 @@
1
- <!-- AI SUMMARY -->
2
- ## 快速了解
3
-
4
- 展示 FlowAgent 节点输入、输出、异常、耗时等详情。 源码位置:src/components/chat-content/flow-agent-content/flow-agent-node-detail.vue。
5
-
6
- ### 关联组件
7
- - **flow-agent-content** — 节点详情入口由 FlowAgentContent 挂载到自定义 Tab
8
- - **detail-section** — 详情页内部分段容器
9
- - **simple-table** — 展示输入参数、插件输出定义与结构化输出
10
- - **chat-container** — 应用层通过 onCustomTabChange 拉取节点详情并回填
11
-
12
- ---
13
- <!-- FULL DOC -->
14
-
15
- # FlowAgentNodeDetail FlowAgent 节点详情
16
-
17
- > **能力域**:Agent 能力
18
-
19
- `FlowAgentNodeDetail` 用于展示 FlowAgent 单个节点的配置与输出详情。它通常被 `FlowAgentContent` 通过自定义 Tab 挂载到侧栏,应用层再根据 `messageUid`、`task_id`、`node_id` 拉取真实节点详情并回填到 `data`。
20
-
21
- 组件自身只负责详情展示,不负责接口请求、Tab 生命周期或消息定位逻辑。
22
-
23
- ## 源码事实
24
-
25
- - **源码位置**:`src/components/chat-content/flow-agent-content/flow-agent-node-detail.vue`
26
- - **能力说明**:展示 FlowAgent 节点输入、输出、异常、耗时等详情。
27
-
28
- ## 核心能力
29
-
30
- - **双 Tab 展示**:内置“节点配置”和“节点输出”两个页签,默认展示“节点配置”
31
- - **配置详情**:展示流程模板、节点名称、步骤名称、是否可选、失败处理和超时控制
32
- - **参数表格**:使用 `SimpleTable` 展示输入参数、插件输出定义和结构化输出
33
- - **加载骨架屏**:`loading` 为 `true` 时展示标题和内容骨架,不渲染真实数据
34
- - **定位插槽**:提供 `locateButton` 插槽,允许侧栏注入“在对话中定位”等操作按钮
35
- - **值格式化**:`null` / `undefined` 显示为 `--`,对象值通过 `JSON.stringify` 转为字符串
36
-
37
- ## 基础用法
38
-
39
- ```vue
40
- <template>
41
- <FlowAgentNodeDetail
42
- :data="nodeDetailData"
43
- :loading="false"
44
- node_id="n1"
45
- node_name="采集主机指标"
46
- :task_id="100"
47
- task_name="主机巡检流程"
48
- >
49
- <template #locateButton>
50
- <button type="button">定位</button>
51
- </template>
52
- </FlowAgentNodeDetail>
53
- </template>
54
-
55
- <script setup lang="ts">
56
- import FlowAgentNodeDetail from '@blueking/chat-x/src/components/chat-content/flow-agent-content/flow-agent-node-detail.vue';
57
- import type { NodeDetailData } from '@blueking/chat-x';
58
-
59
- const nodeDetailData: Partial<NodeDetailData> = {
60
- basic_info: {
61
- node_name: '采集主机指标',
62
- template_name: '主机巡检流程',
63
- stage_name: '巡检准备',
64
- optional: false,
65
- skippable: true,
66
- retryable: true,
67
- error_ignorable: false,
68
- auto_retry: { enable: true, interval: 30, times: 2 },
69
- timeout_config: { enable: true, seconds: 300, action: 'forced_fail' },
70
- },
71
- inputs: {
72
- bk_host_id: 10001,
73
- collect_items: ['cpu', 'memory', 'disk'],
74
- },
75
- plugin_output: [
76
- {
77
- key: '${cpu_usage}',
78
- name: 'CPU 使用率',
79
- type: 'number',
80
- schema: { description: '当前主机 CPU 使用率', enum: [], type: 'number' },
81
- },
82
- ],
83
- outputs: [{ key: 'cpu_usage', preset: false, value: 23.5 }],
84
- };
85
- </script>
86
- ```
87
-
88
- **渲染效果**
89
-
90
- ## 加载态
91
-
92
- `loading` 为 `true` 时,组件展示骨架屏,标题中的节点名和内容区均不会读取 `data` 展示。
93
-
94
- ## 空数据
95
-
96
- 当输入参数、插件输出定义或结构化输出为空时,对应 `SimpleTable` 渲染 `--` 占位行。
97
-
98
- ## Tab 内容
99
-
100
- | Tab | 内容 |
101
- | ---------- | ------------------------------------------------------------ |
102
- | 节点配置 | 基础信息、失败处理、超时控制、输入参数、插件输出定义 |
103
- | 节点输出 | 结构化输出,来自 `data.outputs` |
104
-
105
- `activeTab` 是组件内部状态,不通过 prop 或 expose 暴露。
106
-
107
- ## 字段展示规则
108
-
109
- | 区域 | 数据来源 | 展示规则 |
110
- | ------------ | -------------------------------- | --------------------------------------------- |
111
- | 流程模板 | `data.basic_info.template_name` | 空值显示 `--` |
112
- | 节点名称 | `data.basic_info.node_name` | 空值显示 `--` |
113
- | 步骤名称 | `data.basic_info.stage_name` | 空值显示 `--` |
114
- | 是否可选 | `data.basic_info.optional` | `true` 显示“是”,否则显示“否” |
115
- | 失败处理 | `skippable` / `auto_retry.enable` | 支持“手动跳过”和“自动重试”;均无时显示 `--` |
116
- | 超时控制 | `timeout_config` | 未启用时显示 `--`;`forced_fail` 显示“强制失败” |
117
- | 输入参数 | `data.inputs` | 对象条目转为 `{ key, value }` 表格 |
118
- | 插件输出定义 | `data.plugin_output` | 展示名称、变量说明和 KEY |
119
- | 结构化输出 | `data.outputs` | 展示输出 key 与格式化后的 value |
120
-
121
- ## 自定义 Tab 联动
122
-
123
- `FlowAgentContent` 点击节点“详情”时,会将本组件挂载到自定义 Tab,并先传入 `loading: true` 和节点定位参数:
124
-
125
- ```typescript
126
- addCustomTab?.({
127
- label: node.name,
128
- name: `${task.task_id}|${node.id}|${node.name}`,
129
- data: {
130
- component: BkFlowNodeDetail,
131
- messageUid: props.messageUid,
132
- props: {
133
- loading: true,
134
- node_id: node.id,
135
- node_name: node.name,
136
- task_id: task.task_id,
137
- task_name: task.task_name,
138
- data: {},
139
- },
140
- },
141
- });
142
- ```
143
-
144
- 应用层通常在 `ChatContainer` 的 `onCustomTabChange` 中读取这些参数,请求节点详情后返回新的 `props.data` 和 `props.loading`。
145
-
146
- ## API
147
-
148
- ### Props
149
-
150
- | 属性名 | 类型 | 必填 | 默认值 | 说明 |
151
- | --------- | -------------------------- | ---- | ------ | ---------------------------- |
152
- | data | `Partial<NodeDetailData>` | 是 | — | 节点详情数据 |
153
- | loading | `boolean` | 否 | — | 是否显示骨架屏 |
154
- | node_id | `string` | 否 | — | 节点 ID,来自自定义 Tab 参数 |
155
- | node_name | `string` | 否 | — | 节点名称 |
156
- | task_id | `number` | 否 | — | 任务 ID |
157
- | task_name | `string` | 否 | — | 任务名称 |
158
-
159
- > Props 类型来自 `CustomBkFlowTabData['props'] & { data: Partial<NodeDetailData> }`。
160
-
161
- ### Emits
162
-
163
- - 无。
164
-
165
- ### Slots
166
-
167
- | 插槽名 | 说明 |
168
- | ------------ | ---------------------------- |
169
- | locateButton | 标题栏右侧操作区,如定位按钮 |
170
-
171
- ### Expose
172
-
173
- - 无。
174
-
175
- ## 类型定义
176
-
177
- ```typescript
178
- export type CustomBkFlowTabData = CustomTabData<{
179
- data?: Partial<NodeDetailData>;
180
- loading?: boolean;
181
- node_id?: string;
182
- node_name?: string;
183
- task_id?: number;
184
- task_name?: string;
185
- }>;
186
-
187
- export interface NodeDetailData {
188
- inputs: Record<string, unknown>;
189
- node_id: string;
190
- task_id: number;
191
- basic_info: {
192
- auto_retry: {
193
- enable: boolean;
194
- interval: number;
195
- times: number;
196
- };
197
- error_ignorable: boolean;
198
- node_name: string;
199
- optional: boolean;
200
- retryable: boolean;
201
- skippable: boolean;
202
- stage_name: string;
203
- template_name: string;
204
- timeout_config: {
205
- action: string;
206
- enable: boolean;
207
- seconds: number;
208
- };
209
- };
210
- outputs: Array<{
211
- key: string;
212
- preset: boolean;
213
- value: unknown;
214
- }>;
215
- plugin_output: Array<{
216
- key: string;
217
- name: string;
218
- schema: {
219
- description: string;
220
- enum: unknown[];
221
- properties?: Record<string, unknown>;
222
- type: string;
223
- };
224
- type: string;
225
- }>;
226
- }
227
- ```
228
-
229
- ## 使用建议
230
-
231
- - 优先由 [FlowAgentContent](./flow-agent-content.md) 通过自定义 Tab 挂载,不建议业务组件手动拼装 Tab 生命周期。
232
- - 接口请求与数据回填应放在应用层 `ChatContainer` 的 `onCustomTabChange` 链路中处理。
233
- - `data` 可传 `Partial<NodeDetailData>`,但真实展示依赖 `basic_info`、`inputs`、`plugin_output`、`outputs` 等字段;缺字段时对应区域会降级为空表格或 `--`。
234
-
235
- ## 关联组件
236
-
237
- - [FlowAgentContent](./flow-agent-content.md) — 节点详情入口。
238
- - [DetailSection](./detail-section.md) — 详情分段容器。
239
- - [SimpleTable](./simple-table.md) — 详情表格。
240
- - [ChatContainer](../setup/chat-container.md) — 自定义 Tab 数据回填入口。
@@ -1,43 +0,0 @@
1
- <!-- AI SUMMARY -->
2
- ## 快速了解
3
-
4
- ChatInput 底部附件区布局,承载快捷按钮、文件与发送图标。 源码位置:src/components/chat-input/input-attachment/input-attachment.vue。
5
-
6
- ---
7
- <!-- FULL DOC -->
8
-
9
- # InputAttachment 输入附件区
10
-
11
- > **能力域**:输入交互
12
-
13
- ## 源码事实
14
-
15
- - **源码位置**:`src/components/chat-input/input-attachment/input-attachment.vue`
16
- - **能力说明**:ChatInput 底部附件区布局,承载快捷按钮、文件与发送图标。
17
-
18
- ## API 摘要
19
-
20
- ### Props
21
-
22
- - `{ messageState?: MessageStatus; sendDisabledTip?: string; tippyOptions?: AITippyProps; }`
23
-
24
- ### Emits
25
-
26
- - `{ (e: 'sendMessage'): void; (e: 'stopSending'): void; }`
27
-
28
- ### Slots
29
-
30
- - `default`
31
- - `send-icon`
32
-
33
- ### Expose
34
-
35
- - 无。
36
-
37
- ## 组件依赖
38
-
39
- - 无组件依赖或仅依赖基础库。
40
-
41
- ## 使用建议
42
-
43
- - 优先通过上层组合组件使用;直接使用前请确认 props 数据结构来自对应类型定义。
@@ -1,42 +0,0 @@
1
- <!-- AI SUMMARY -->
2
- ## 快速了解
3
-
4
- ChatInput 上方的信息提示条。 源码位置:src/components/chat-input/input-info-alert.vue。
5
-
6
- ---
7
- <!-- FULL DOC -->
8
-
9
- # InputInfoAlert 输入提示条
10
-
11
- > **能力域**:输入交互
12
-
13
- ## 源码事实
14
-
15
- - **源码位置**:`src/components/chat-input/input-info-alert.vue`
16
- - **能力说明**:ChatInput 上方的信息提示条。
17
-
18
- ## API 摘要
19
-
20
- ### Props
21
-
22
- - `{ content: string; }`
23
-
24
- ### Emits
25
-
26
- - 无。
27
-
28
- ### Slots
29
-
30
- - 无。
31
-
32
- ### Expose
33
-
34
- - 无。
35
-
36
- ## 组件依赖
37
-
38
- - 无组件依赖或仅依赖基础库。
39
-
40
- ## 使用建议
41
-
42
- - 优先通过上层组合组件使用;直接使用前请确认 props 数据结构来自对应类型定义。