@blueking/chat-x 0.0.51-beta.2 → 0.0.51-beta.3
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.
- package/dist/components/chat-content/file-content/upload-image-item.vue.d.ts +2 -0
- package/dist/components/chat-content/file-content/upload-spinner.vue.d.ts +3 -0
- package/dist/components/chat-input/chat-input.vue.d.ts +3 -0
- package/dist/index.css +1 -1
- package/dist/index.js +745 -712
- package/dist/index.js.map +1 -1
- package/dist/lang/lang.d.ts +4 -1
- package/dist/mcp/generated/docs/chat-container.md +1 -1
- package/dist/mcp/generated/docs/chat-input.md +3 -2
- package/dist/mcp/generated/docs/file-content.md +27 -10
- package/dist/mcp/generated/index.json +3 -3
- package/dist/mcp/index.js +0 -0
- package/package.json +21 -23
- package/skills/blueking-chat-x/SKILL.md +0 -139
- package/skills/blueking-chat-x/references/_index.md +0 -131
- package/skills/blueking-chat-x/references/components/activity-layout.md +0 -134
- package/skills/blueking-chat-x/references/components/activity-message.md +0 -486
- package/skills/blueking-chat-x/references/components/ai-image.md +0 -230
- package/skills/blueking-chat-x/references/components/ai-loading.md +0 -131
- package/skills/blueking-chat-x/references/components/ai-prompt-list.md +0 -44
- package/skills/blueking-chat-x/references/components/ai-selection.md +0 -439
- package/skills/blueking-chat-x/references/components/ai-skill-list.md +0 -73
- package/skills/blueking-chat-x/references/components/ai-slash-editor.md +0 -43
- package/skills/blueking-chat-x/references/components/ai-slash-input.md +0 -56
- package/skills/blueking-chat-x/references/components/ai-slash-menu.md +0 -42
- package/skills/blueking-chat-x/references/components/animation-text.md +0 -202
- package/skills/blueking-chat-x/references/components/assistant-message.md +0 -498
- package/skills/blueking-chat-x/references/components/chat-container.md +0 -869
- package/skills/blueking-chat-x/references/components/chat-input.md +0 -769
- package/skills/blueking-chat-x/references/components/cite-content.md +0 -142
- package/skills/blueking-chat-x/references/components/code-content.md +0 -211
- package/skills/blueking-chat-x/references/components/common-error-content.md +0 -73
- package/skills/blueking-chat-x/references/components/content-render.md +0 -233
- package/skills/blueking-chat-x/references/components/delete-tool.md +0 -191
- package/skills/blueking-chat-x/references/components/desc-panel.md +0 -162
- package/skills/blueking-chat-x/references/components/detail-section.md +0 -91
- package/skills/blueking-chat-x/references/components/execution-summary.md +0 -128
- package/skills/blueking-chat-x/references/components/file-artifact-panel.md +0 -289
- package/skills/blueking-chat-x/references/components/file-content.md +0 -319
- package/skills/blueking-chat-x/references/components/file-icon.md +0 -109
- package/skills/blueking-chat-x/references/components/file-upload-btn.md +0 -159
- package/skills/blueking-chat-x/references/components/flow-agent-content.md +0 -264
- package/skills/blueking-chat-x/references/components/flow-agent-node-detail.md +0 -236
- package/skills/blueking-chat-x/references/components/highlight-keyword.md +0 -146
- package/skills/blueking-chat-x/references/components/image-content.md +0 -182
- package/skills/blueking-chat-x/references/components/image-preview-group.md +0 -184
- package/skills/blueking-chat-x/references/components/image-preview.md +0 -226
- package/skills/blueking-chat-x/references/components/info-message.md +0 -144
- package/skills/blueking-chat-x/references/components/input-attachment.md +0 -49
- package/skills/blueking-chat-x/references/components/input-info-alert.md +0 -42
- package/skills/blueking-chat-x/references/components/interrupt-message.md +0 -212
- package/skills/blueking-chat-x/references/components/key-value-content.md +0 -128
- package/skills/blueking-chat-x/references/components/knowledge-rag-content.md +0 -122
- package/skills/blueking-chat-x/references/components/latex-content.md +0 -200
- package/skills/blueking-chat-x/references/components/loading-message.md +0 -192
- package/skills/blueking-chat-x/references/components/markdown-content.md +0 -232
- package/skills/blueking-chat-x/references/components/mermaid-content.md +0 -189
- package/skills/blueking-chat-x/references/components/message-container.md +0 -645
- package/skills/blueking-chat-x/references/components/message-loading.md +0 -118
- package/skills/blueking-chat-x/references/components/message-render.md +0 -327
- package/skills/blueking-chat-x/references/components/message-time.md +0 -177
- package/skills/blueking-chat-x/references/components/message-tools.md +0 -416
- package/skills/blueking-chat-x/references/components/model-selector.md +0 -155
- package/skills/blueking-chat-x/references/components/preview-toolbar.md +0 -42
- package/skills/blueking-chat-x/references/components/questions-container.md +0 -85
- package/skills/blueking-chat-x/references/components/reasoning-message.md +0 -232
- package/skills/blueking-chat-x/references/components/reference-content.md +0 -135
- package/skills/blueking-chat-x/references/components/reference-doc-content.md +0 -109
- package/skills/blueking-chat-x/references/components/scroll-btn.md +0 -159
- package/skills/blueking-chat-x/references/components/selection-footer.md +0 -78
- package/skills/blueking-chat-x/references/components/selection-question.md +0 -88
- package/skills/blueking-chat-x/references/components/shortcut-btn.md +0 -204
- package/skills/blueking-chat-x/references/components/shortcut-btns.md +0 -266
- package/skills/blueking-chat-x/references/components/shortcut-render.md +0 -424
- package/skills/blueking-chat-x/references/components/simple-table.md +0 -101
- package/skills/blueking-chat-x/references/components/text-content.md +0 -77
- package/skills/blueking-chat-x/references/components/tool-approval-card.md +0 -183
- package/skills/blueking-chat-x/references/components/tool-btn.md +0 -317
- package/skills/blueking-chat-x/references/components/tool-message.md +0 -235
- package/skills/blueking-chat-x/references/components/toolcall-render.md +0 -348
- package/skills/blueking-chat-x/references/components/user-feedback.md +0 -233
- package/skills/blueking-chat-x/references/components/user-message.md +0 -424
- package/skills/blueking-chat-x/references/components/user-question-answered-card.md +0 -104
- package/skills/blueking-chat-x/references/components/user-question-card.md +0 -231
- package/skills/blueking-chat-x/references/components/user-question-choice.md +0 -105
- package/skills/blueking-chat-x/references/components/user-question-option.md +0 -42
- package/skills/blueking-chat-x/references/components/vnode-renderer.md +0 -122
- package/skills/blueking-chat-x/references/composables/use-animation-text.md +0 -196
- package/skills/blueking-chat-x/references/composables/use-artifact-preview.md +0 -231
- package/skills/blueking-chat-x/references/composables/use-clipboard.md +0 -203
- package/skills/blueking-chat-x/references/composables/use-command-selection.md +0 -150
- package/skills/blueking-chat-x/references/composables/use-container-scroll.md +0 -57
- package/skills/blueking-chat-x/references/composables/use-custom-tab.md +0 -158
- package/skills/blueking-chat-x/references/composables/use-flow-node-actions.md +0 -157
- package/skills/blueking-chat-x/references/composables/use-full-screen.md +0 -112
- package/skills/blueking-chat-x/references/composables/use-global-config.md +0 -148
- package/skills/blueking-chat-x/references/composables/use-menu-keydown.md +0 -163
- package/skills/blueking-chat-x/references/composables/use-message-group.md +0 -247
- package/skills/blueking-chat-x/references/composables/use-observer-visible-list.md +0 -188
- package/skills/blueking-chat-x/references/composables/use-parent-scrolling.md +0 -46
- package/skills/blueking-chat-x/references/theme/theme.md +0 -431
- package/skills/blueking-chat-x/references/types/constants.md +0 -307
- package/skills/blueking-chat-x/references/types/interrupt.md +0 -379
- package/skills/blueking-chat-x/references/types/messages.md +0 -553
- package/skills/blueking-chat-x/references/types/schema.md +0 -91
- package/skills/blueking-chat-x/scripts/generate-references.mjs +0 -314
package/dist/lang/lang.d.ts
CHANGED
|
@@ -156,5 +156,8 @@ export declare const lang: {
|
|
|
156
156
|
readonly 搜索文件关键字: "Search file keyword";
|
|
157
157
|
readonly 预览加载失败: "Failed to load preview";
|
|
158
158
|
readonly 暂无可预览的文件: "No file to preview";
|
|
159
|
+
readonly '\u6587\u4EF6\u4E0A\u4F20\u4E2D\uFF0C\u8BF7\u7A0D\u5019': "Uploading files, please wait";
|
|
160
|
+
readonly '\u5B58\u5728\u4E0A\u4F20\u5931\u8D25\u7684\u6587\u4EF6\uFF0C\u8BF7\u5220\u9664\u540E\u91CD\u8BD5': "Remove failed uploads before sending";
|
|
161
|
+
readonly 上传失败: "Upload failed";
|
|
159
162
|
};
|
|
160
|
-
export declare const t: (key: keyof typeof lang) => "Send" | "Stop" | "Ask AI" | "Copy" | "Share" | "Like" | "Unsatisfied" | "Delete" | "Quote" | "Regenerate" | "Regenerating will clear the content below" | "Submit" | "Cancel" | "Preview Content" | "Jump to Detail" | "Call Tool" | "Read Skill" | "Calling" | "Reading" | "Tell us your thoughts" | "What makes you satisfied?" | "What makes you dissatisfied?" | "Return Content" | "Edit" | "Deep Thinking" | "Quick Thinking" | "Image to Text" | "Loading image..." | "Failed to load image" | "Thinking..." | "Thinking Completed" | "Thinking Failed" | "Copy Success" | "Copy Failed" | "Return to bottom" | "Stop generating" | "Stopping" | "Duration" | "Yesterday" | "Parameters" | "Description" | "Execution Status" | "Running" | "Success" | "Failed" | "Pending" | "To Be Executed" | "Details" | "Retry" | "Retrying" | "Skipping" | "The task is retrying and cannot be skipped" | "The task is skipping and cannot be retried" | "Node" | "Node Config" | "Node Output" | "Basic Info" | "Flow Template" | "Node Name" | "Step Name" | "Execution Plan" | "Optional" | "Failure Handler" | "Timeout Control" | "Yes" | "No" | "Input Params" | "Output Params" | "Param Name" | "Param Value" | "Name" | "Structured Output" | "Manual Skip" | "No Data" | "Call MCP" | "More" | "Algorithm Plan Review Ticket" | "Reviewing" | "Approving" | "Abandoned" | "Approved" | "Cancelled" | "Expired" | "Rejected" | "Revoked" | "Ticket No." | "Submitted At" | "Current Handler" | "None" | "View Ticket Detail" | "Copy Ticket" | "Copy Ticket Link" | "Cancel Approval" | "Approval Cancelled" | "Refresh Ticket Status" | "This ticket has been rejected and cannot be cancelled" | "This ticket has been approved and cannot be cancelled" | "This ticket has been cancelled, no need to click again" | "Approval cannot be cancelled in the current status" | "There are {count} pending approval tickets in the current conversation. To continue, cancel approval first." | "Unsupported interrupt message" | "Searching" | "Search Completed" | "Upload File" | "Select model" | "Search models" | "Requesting..." | "Cancel satisfied" | "Cancel dissatisfied" | "Confirm delete this answer?" | "This operation cannot be undone. Please proceed with caution!" | "Preview" | "Zoom Out" | "Zoom In" | "Rotate" | "Download" | "Sorry, image loading failed. Please try reloading." | "Reset" | "Reload" | "W" | "H" | "Upload Image" | "Search keyword" | "Select date" | "Locate in Chat" | "Select All" | "Confirm" | "Upload file, up to {count} files, max {size}MB each" | "Hello, I am BlueKing AI Bot" | "Clear Search" | "Search Result is Empty" | "Valid Evidence" | "Full Screen" | "Exit Full Screen" | "Please choose to continue" | "Continue" | "Received: " | "Done" | "Skip" | "Single" | "Multiple" | "Others" | "Completed" | "question(s)" | "Answers" | "Replied" | "Please enter..." | "File Artifacts" | "File List" | "Search file keyword" | "Failed to load preview" | "No file to preview" | "发送" | "停止" | "问问小鲸" | "复制" | "分享" | "点赞" | "不满意" | "删除" | "引用" | "重新生成" | "重新生成将清空下文内容" | "提交" | "取消" | "预览内容" | "跳转详情" | "调用工具" | "读取 Skill" | "正在调用" | "正在读取" | "说出您的想法" | "什么原因让你满意?" | "什么原因让你不满意?" | "返回内容" | "编辑" | "深度思考" | "快速思考" | "图生文" | "图片加载中..." | "图片加载失败" | "思考中" | "已思考完成" | "思考失败" | "复制成功" | "复制失败" | "返回底部" | "停止生成" | "正在停止" | "耗时" | "昨天" | "参数" | "描述" | "执行情况" | "执行中" | "成功" | "失败" | "挂起" | "待执行" | "详情" | "重试" | "重试中" | "跳过中" | "任务正在重试中,不可跳过" | "任务正在跳过中,不可重试" | "节点" | "节点配置" | "节点输出" | "基础信息" | "流程模板" | "节点名称" | "步骤名称" | "执行方案" | "是否可选" | "失败处理" | "超时控制" | "是" | "否" | "输入参数" | "输出参数" | "参数名" | "参数值" | "名称" | "变量说明" | "结构化输出" | "手动跳过" | "暂无数据" | "调用 MCP" | "更多" | "算法方案评审单" | "评审中" | "审批中" | "已废弃" | "已批准" | "已通过" | "已取消" | "已过期" | "已拒绝" | "已撤销" | "单据编号" | "提交时间" | "当前处理人" | "无" | "查看单据详情" | "复制单据" | "复制单据链接" | "取消审批" | "已取消审批" | "刷新单据状态" | "单据已取消审批" | "该单据已被拒绝,无法取消" | "该单据已通过,无法取消" | "单据已取消,无需重复点击" | "当前状态无法取消审批" | "当前会话有 {count} 个待审批单,如需继续,请先取消审批" | "暂不支持的中断消息" | "检索中" | "检索完成" | "上传文件" | "选择模型" | "搜索模型关键字" | "请求中..." | "取消满意" | "取消不满意" | "确认删除该回答?" | "删除操作无法撤回,请谨慎操作!" | "预览" | "缩小" | "放大" | "旋转" | "下载" | "抱歉,图片加载失败,可尝试重新加载" | "重置" | "重新加载" | "宽" | "高" | "上传图片" | "搜索 关键字" | "选择日期" | "在对话中定位" | "全选" | "确定" | "上传文件,最多支持 {count} 个,单个最大 {size}MB" | "你好,我是小鲸" | "清空搜索" | "搜索结果为空" | "有效证据" | "全屏" | "退出全屏" | "请选择以继续" | "继续" | "收到信息:" | "待审批" | "已审批" | "完成" | "跳过" | "单选" | "多选" | "其他" | "已完成" | "题" | "回答内容" | "已回复" | "请输入..." | "文件产物" | "文件列表" | "搜索文件关键字" | "预览加载失败" | "暂无可预览的文件";
|
|
163
|
+
export declare const t: (key: keyof typeof lang) => "Send" | "Stop" | "Ask AI" | "Copy" | "Share" | "Like" | "Unsatisfied" | "Delete" | "Quote" | "Regenerate" | "Regenerating will clear the content below" | "Submit" | "Cancel" | "Preview Content" | "Jump to Detail" | "Call Tool" | "Read Skill" | "Calling" | "Reading" | "Tell us your thoughts" | "What makes you satisfied?" | "What makes you dissatisfied?" | "Return Content" | "Edit" | "Deep Thinking" | "Quick Thinking" | "Image to Text" | "Loading image..." | "Failed to load image" | "Thinking..." | "Thinking Completed" | "Thinking Failed" | "Copy Success" | "Copy Failed" | "Return to bottom" | "Stop generating" | "Stopping" | "Duration" | "Yesterday" | "Parameters" | "Description" | "Execution Status" | "Running" | "Success" | "Failed" | "Pending" | "To Be Executed" | "Details" | "Retry" | "Retrying" | "Skipping" | "The task is retrying and cannot be skipped" | "The task is skipping and cannot be retried" | "Node" | "Node Config" | "Node Output" | "Basic Info" | "Flow Template" | "Node Name" | "Step Name" | "Execution Plan" | "Optional" | "Failure Handler" | "Timeout Control" | "Yes" | "No" | "Input Params" | "Output Params" | "Param Name" | "Param Value" | "Name" | "Structured Output" | "Manual Skip" | "No Data" | "Call MCP" | "More" | "Algorithm Plan Review Ticket" | "Reviewing" | "Approving" | "Abandoned" | "Approved" | "Cancelled" | "Expired" | "Rejected" | "Revoked" | "Ticket No." | "Submitted At" | "Current Handler" | "None" | "View Ticket Detail" | "Copy Ticket" | "Copy Ticket Link" | "Cancel Approval" | "Approval Cancelled" | "Refresh Ticket Status" | "This ticket has been rejected and cannot be cancelled" | "This ticket has been approved and cannot be cancelled" | "This ticket has been cancelled, no need to click again" | "Approval cannot be cancelled in the current status" | "There are {count} pending approval tickets in the current conversation. To continue, cancel approval first." | "Unsupported interrupt message" | "Searching" | "Search Completed" | "Upload File" | "Select model" | "Search models" | "Requesting..." | "Cancel satisfied" | "Cancel dissatisfied" | "Confirm delete this answer?" | "This operation cannot be undone. Please proceed with caution!" | "Preview" | "Zoom Out" | "Zoom In" | "Rotate" | "Download" | "Sorry, image loading failed. Please try reloading." | "Reset" | "Reload" | "W" | "H" | "Upload Image" | "Search keyword" | "Select date" | "Locate in Chat" | "Select All" | "Confirm" | "Upload file, up to {count} files, max {size}MB each" | "Hello, I am BlueKing AI Bot" | "Clear Search" | "Search Result is Empty" | "Valid Evidence" | "Full Screen" | "Exit Full Screen" | "Please choose to continue" | "Continue" | "Received: " | "Done" | "Skip" | "Single" | "Multiple" | "Others" | "Completed" | "question(s)" | "Answers" | "Replied" | "Please enter..." | "File Artifacts" | "File List" | "Search file keyword" | "Failed to load preview" | "No file to preview" | "Uploading files, please wait" | "Remove failed uploads before sending" | "Upload failed" | "发送" | "停止" | "问问小鲸" | "复制" | "分享" | "点赞" | "不满意" | "删除" | "引用" | "重新生成" | "重新生成将清空下文内容" | "提交" | "取消" | "预览内容" | "跳转详情" | "调用工具" | "读取 Skill" | "正在调用" | "正在读取" | "说出您的想法" | "什么原因让你满意?" | "什么原因让你不满意?" | "返回内容" | "编辑" | "深度思考" | "快速思考" | "图生文" | "图片加载中..." | "图片加载失败" | "思考中" | "已思考完成" | "思考失败" | "复制成功" | "复制失败" | "返回底部" | "停止生成" | "正在停止" | "耗时" | "昨天" | "参数" | "描述" | "执行情况" | "执行中" | "成功" | "失败" | "挂起" | "待执行" | "详情" | "重试" | "重试中" | "跳过中" | "任务正在重试中,不可跳过" | "任务正在跳过中,不可重试" | "节点" | "节点配置" | "节点输出" | "基础信息" | "流程模板" | "节点名称" | "步骤名称" | "执行方案" | "是否可选" | "失败处理" | "超时控制" | "是" | "否" | "输入参数" | "输出参数" | "参数名" | "参数值" | "名称" | "变量说明" | "结构化输出" | "手动跳过" | "暂无数据" | "调用 MCP" | "更多" | "算法方案评审单" | "评审中" | "审批中" | "已废弃" | "已批准" | "已通过" | "已取消" | "已过期" | "已拒绝" | "已撤销" | "单据编号" | "提交时间" | "当前处理人" | "无" | "查看单据详情" | "复制单据" | "复制单据链接" | "取消审批" | "已取消审批" | "刷新单据状态" | "单据已取消审批" | "该单据已被拒绝,无法取消" | "该单据已通过,无法取消" | "单据已取消,无需重复点击" | "当前状态无法取消审批" | "当前会话有 {count} 个待审批单,如需继续,请先取消审批" | "暂不支持的中断消息" | "检索中" | "检索完成" | "上传文件" | "选择模型" | "搜索模型关键字" | "请求中..." | "取消满意" | "取消不满意" | "确认删除该回答?" | "删除操作无法撤回,请谨慎操作!" | "预览" | "缩小" | "放大" | "旋转" | "下载" | "抱歉,图片加载失败,可尝试重新加载" | "重置" | "重新加载" | "宽" | "高" | "上传图片" | "搜索 关键字" | "选择日期" | "在对话中定位" | "全选" | "确定" | "上传文件,最多支持 {count} 个,单个最大 {size}MB" | "你好,我是小鲸" | "清空搜索" | "搜索结果为空" | "有效证据" | "全屏" | "退出全屏" | "请选择以继续" | "继续" | "收到信息:" | "待审批" | "已审批" | "完成" | "跳过" | "单选" | "多选" | "其他" | "已完成" | "题" | "回答内容" | "已回复" | "请输入..." | "文件产物" | "文件列表" | "搜索文件关键字" | "预览加载失败" | "暂无可预览的文件" | "文件上传中,请稍候" | "存在上传失败的文件,请删除后重试" | "上传失败";
|
|
@@ -703,7 +703,7 @@ ChatContainer 的 Props 继承自 `ChatInputProps` 和 `MessageContainerProps`
|
|
|
703
703
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
704
704
|
| ------------------------- | ---------------------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
|
705
705
|
| chatLoading | `boolean` | — | 整体加载状态,`true` 时显示 Loading 遮罩 |
|
|
706
|
-
| commonTippyOptions | `AITippyProps` | — | 通用 Tippy 配置,注入到所有使用 `v-overflow-tips`
|
|
706
|
+
| commonTippyOptions | `AITippyProps` | — | 通用 Tippy 配置,注入到所有使用 `v-overflow-tips` 的子组件。原样透传,仅全屏态强制把 `appendTo` 改为全屏容器;未传 `appendTo` 时不注入该字段,各浮层沿用自身默认挂载点 |
|
|
707
707
|
| executionTabVisible | `boolean` | `true` | 「执行情况」Tab 是否展示;为 `false` 时从 Tab 栏隐藏,若正被选中则切到首个可见 Tab |
|
|
708
708
|
| getSideRenderComponent | `(h, props?) => VNode \| undefined` | — | 自定义侧栏内容区渲染;未返回时使用 `selectedTab.data.component` |
|
|
709
709
|
| getSideTabRenderComponent | `(h, tab, { removeCustomTab }) => VNode \| undefined` | — | 自定义侧栏 Tab 标签渲染;未返回时使用默认图标 + 文案 + 关闭按钮 |
|
|
@@ -325,8 +325,9 @@ const handleSendMessage = async (
|
|
|
325
325
|
|
|
326
326
|
- 底部工具栏出现文件上传按钮(在快捷指令左侧)
|
|
327
327
|
- 支持**点击选择**、**拖拽上传**、**粘贴上传**(Ctrl+V)
|
|
328
|
-
- `onUpload` 每次传入**单个** `File`,返回 `{ download_url?: string }`
|
|
328
|
+
- `onUpload` 每次传入**单个** `File`,返回 `{ download_url?: string; id?: string; status?: 'failed' | 'success' }`
|
|
329
329
|
- 文件自动去重(基于 `name + size + lastModified` 复合键),不会重复上传
|
|
330
|
+
- **上传中或存在失败附件时禁止发送**(点击、Enter、`triggerSendMessage` 均拦截)。失败附件需用户删除后才能再发;不要把附件 Pending 映射成 `MessageStatus.Pending`
|
|
330
331
|
- 发送成功后,`uploadFiles` 自动清空
|
|
331
332
|
|
|
332
333
|
**个数与大小校验(与 `FileUploadBtn` 分工)**:
|
|
@@ -604,7 +605,7 @@ const handleSendMessage = async (
|
|
|
604
605
|
| tippyOptions | `AITippyProps` | — | - | 透传给 FileUploadBtn 和 InputAttachment 的 tooltip 配置 |
|
|
605
606
|
| onSendMessage | `(content: UserMessage['content'], docSchema: TagSchema, options?: { interrupt?: Interrupt; payload?: InterruptResume }) => Promise<void>` | - | - | 发送消息回调,无文件时 content 为字符串,有文件时为数组;经 [ChatContainer](/components/setup/chat-container) 使用时,存在待回答 UserQuestion 会传入第三参数 `options` |
|
|
606
607
|
| onStopSending | `() => Promise<void>` | - | - | 停止发送回调,点击停止按钮时触发 |
|
|
607
|
-
| onUpload | `(file: File) => Promise<{ download_url?: string }>`
|
|
608
|
+
| onUpload | `(file: File) => Promise<{ download_url?: string; error?: string; id?: string; status?: 'failed' \| 'success' }>` | - | - | 文件上传回调(每次单文件);上传中/失败附件会阻塞发送 |
|
|
608
609
|
|
|
609
610
|
### 默认占位符
|
|
610
611
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
渲染文件附件,支持图片预览、上传中/失败态和下载事件。 源码位置:src/components/chat-content/file-content/file-content.vue。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **image-preview** — 点击图片缩略图打开全屏预览
|
|
@@ -15,18 +15,19 @@
|
|
|
15
15
|
|
|
16
16
|
- **源码位置**:`src/components/chat-content/file-content/file-content.vue`
|
|
17
17
|
- **能力域**:媒体文件
|
|
18
|
-
-
|
|
18
|
+
- **能力说明**:渲染文件附件,支持图片预览、上传中/失败态和下载事件。
|
|
19
19
|
|
|
20
20
|
> **能力域**:媒体文件
|
|
21
21
|
|
|
22
|
-
文件列表展示组件,支持图片缩略图预览、点击图片全屏预览(`ImagePreview`)、文件卡片展示(类型图标 / 文件名 /
|
|
22
|
+
文件列表展示组件,支持图片缩略图预览、点击图片全屏预览(`ImagePreview`)、文件卡片展示(类型图标 / 文件名 / 文件大小)、上传中/失败态、图片加载失败占位和删除操作。
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
内部由三个子组件承载单项渲染:
|
|
25
25
|
|
|
26
26
|
| 子组件 | 源码位置 | 职责 |
|
|
27
27
|
| ------------------ | ------------------------------------------------------------------- | --------------------------------------------- |
|
|
28
|
-
| `UploadImageItem` | `src/components/chat-content/file-content/upload-image-item.vue` |
|
|
29
|
-
| `UploadFileItem` | `src/components/chat-content/file-content/upload-file-item.vue` | 180px 文件卡片(`FileIcon` + 文件名 +
|
|
28
|
+
| `UploadImageItem` | `src/components/chat-content/file-content/upload-image-item.vue` | 图片缩略图、上传中遮罩、失败占位、hover 删除徽标 |
|
|
29
|
+
| `UploadFileItem` | `src/components/chat-content/file-content/upload-file-item.vue` | 180px 文件卡片(`FileIcon` + 文件名 + 大小 / 失败文案) |
|
|
30
|
+
| `UploadSpinner` | `src/components/chat-content/file-content/upload-spinner.vue` | 16px 白色环形 loading,文件与图片共用 |
|
|
30
31
|
|
|
31
32
|
## 渲染决策逻辑
|
|
32
33
|
|
|
@@ -37,9 +38,12 @@ splitUploadFiles(files) // 单次遍历
|
|
|
37
38
|
├── 图片组(.ai-files-content-row.is-images)
|
|
38
39
|
│ 判定依据:mimeType 或 file.file?.type 以 'image/' 开头
|
|
39
40
|
│ src:file.url 优先,否则用本地 File 的 blob URL(按 key 缓存,移除 / 卸载时 revoke)
|
|
40
|
-
│
|
|
41
|
+
│ 加载失败或 status=error → 错误占位(粉色背景 + 红色边框 + 灰色图标),且不进入预览列表
|
|
42
|
+
│ status=pending → 半透明遮罩 + 16px 环形 loading,禁止点击预览
|
|
41
43
|
└── 文件组(.ai-files-content-row.is-files)
|
|
42
44
|
文件卡片:类型图标(FileIcon,按文件名解析扩展名)+ 文件名 + 文件大小
|
|
45
|
+
status=pending → 半透明遮罩 + 16px 环形 loading
|
|
46
|
+
status=error → 浅红底 + 红边框,第二行展示「上传失败」
|
|
43
47
|
```
|
|
44
48
|
|
|
45
49
|
> **是否为图片只看 MIME,不看 `url`。** 解除上传类型限制后,任意文件上传成功都会拿到 `url`,若按 `url` 判断会把 PDF / DOC 渲染成破图。因此 `url` 只决定 `<img src>` 从哪里来,不参与图片判定。
|
|
@@ -124,9 +128,21 @@ MIME 为 `image/*` 时渲染为图片缩略图(`cursor: zoom-in`)。点击
|
|
|
124
128
|
|
|
125
129
|
> **预览行为**:组件内部自动维护 `ImagePreview` 实例,无需外部管理预览状态。只有加载成功的图片才会进入预览列表,加载失败的图片被自动过滤。
|
|
126
130
|
|
|
131
|
+
## 上传中 / 上传失败
|
|
132
|
+
|
|
133
|
+
`FileContent` 消费每项的 `status`(`UploadStatus`)。尺寸不变:文件卡片仍是 180×48,图片仍是定高 48、宽 48~120。loading 用共享的 `UploadSpinner`(16px 白环),不要用 `AiLoading`。删除徽标始终叠在遮罩之上。
|
|
134
|
+
|
|
135
|
+
| status | 文件卡片 | 图片缩略图 |
|
|
136
|
+
| --------- | -------- | ---------- |
|
|
137
|
+
| `pending` | `rgba(0,0,0,0.3)` 遮罩 + spinner | 保留预览图 + `rgba(0,0,0,0.5)` 遮罩 + spinner,点击不打开预览 |
|
|
138
|
+
| `error` | 背景 `#fff0f0`、边框 `#ea3636`,第二行「上传失败」 | 与加载失败相同的破图占位(18px `ImageErrorIcon`) |
|
|
139
|
+
| `success` / 未设置 | 正常卡片 | 正常缩略图,可预览 |
|
|
140
|
+
|
|
141
|
+
上传中与上传失败的图片都不会进入 `ImagePreview` 列表。`ChatInput` 在存在 `pending` / `error` 附件时会拦截发送(见 [ChatInput](/components/input/chat-input))。
|
|
142
|
+
|
|
127
143
|
## 图片加载失败
|
|
128
144
|
|
|
129
|
-
`<img>` 触发 `onerror` 时,切换为粉色背景 +
|
|
145
|
+
`<img>` 触发 `onerror` 时,切换为粉色背景 + 红色边框的错误占位(与 `status=error` 同一套 UI):
|
|
130
146
|
|
|
131
147
|
## 混合文件(图片 + 文件)
|
|
132
148
|
|
|
@@ -238,6 +254,7 @@ MIME 为 `image/*` 时渲染为图片缩略图(`cursor: zoom-in`)。点击
|
|
|
238
254
|
| `file.url` 有值 | `file.url` | 打开全屏预览 |
|
|
239
255
|
| 无 url、有 `File` | `URL.createObjectURL(file.file)`(按 key 缓存) | 打开全屏预览 |
|
|
240
256
|
| 图片加载失败 | 错误占位 | 不进入预览列表 |
|
|
257
|
+
| `status` 为 pending / error | 遮罩 loading 或错误占位 | 不进入预览列表 |
|
|
241
258
|
|
|
242
259
|
blob URL 按附件 key 缓存,同一文件重复渲染不会重复创建;文件被移除或组件卸载时统一 `revokeObjectURL`。
|
|
243
260
|
|
|
@@ -254,7 +271,7 @@ blob URL 按附件 key 缓存,同一文件重复渲染不会重复创建;文
|
|
|
254
271
|
```typescript
|
|
255
272
|
import type { UploadFile, BinaryInputContent } from '@blueking/chat-x';
|
|
256
273
|
|
|
257
|
-
//
|
|
274
|
+
// 上传状态:ChatInput 写入,FileContent 消费以渲染 pending / error
|
|
258
275
|
enum UploadStatus {
|
|
259
276
|
Pending = 'pending', // 上传中
|
|
260
277
|
Success = 'success', // 上传成功
|
|
@@ -264,7 +281,7 @@ enum UploadStatus {
|
|
|
264
281
|
// 上传文件(FileContent 的 files 数组中每一项)
|
|
265
282
|
type UploadFile = BinaryInputContent & {
|
|
266
283
|
file?: File; // 原始 File 对象,无则文件大小不显示
|
|
267
|
-
status?: UploadStatus; // 上传状态(
|
|
284
|
+
status?: UploadStatus; // 上传状态(pending 遮罩 loading,error 失败样式)
|
|
268
285
|
};
|
|
269
286
|
|
|
270
287
|
// 二进制内容基础类型
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": "2.0.0",
|
|
3
|
-
"generatedAt": "2026-09-
|
|
3
|
+
"generatedAt": "2026-09-02T02:31:02.404Z",
|
|
4
4
|
"domains": {
|
|
5
5
|
"setup": {
|
|
6
6
|
"label": "对话搭建",
|
|
@@ -1018,8 +1018,8 @@
|
|
|
1018
1018
|
"name": "FileContent 文件内容",
|
|
1019
1019
|
"slug": "file-content",
|
|
1020
1020
|
"kind": "component",
|
|
1021
|
-
"description": "
|
|
1022
|
-
"aiSummary": "
|
|
1021
|
+
"description": "渲染文件附件,支持图片预览、上传中/失败态和下载事件。",
|
|
1022
|
+
"aiSummary": "渲染文件附件,支持图片预览、上传中/失败态和下载事件。 源码位置:src/components/chat-content/file-content/file-content.vue。",
|
|
1023
1023
|
"relatedComponents": [
|
|
1024
1024
|
{
|
|
1025
1025
|
"slug": "image-preview",
|
package/dist/mcp/index.js
CHANGED
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,26 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blueking/chat-x",
|
|
3
|
-
"version": "0.0.51-beta.
|
|
3
|
+
"version": "0.0.51-beta.3",
|
|
4
4
|
"description": "蓝鲸智云 AI Chat 组件库 —— 遵循 AG-UI,为 AI Agent 和人类开发者共同设计的对话 UI 组件库。",
|
|
5
5
|
"main": "index.js",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"prepublishOnly": "vite --config vite.config.ts build && pnpm dts && pnpm mcp:build",
|
|
8
|
-
"dev": "vite --config vite.config.ts",
|
|
9
|
-
"dts": "vue-tsc --project tsconfig.dts.json",
|
|
10
|
-
"build": "vitest && vite --config vite.config.ts build && pnpm dts",
|
|
11
|
-
"preview": "vite --config vite.config.ts build --mode preview && pnpm dts",
|
|
12
|
-
"lint:script": "eslint . --ext .vue,.ts --fix",
|
|
13
|
-
"lint:style": "stylelint \"**/*.{scss,css,vue}\" --fix",
|
|
14
|
-
"lint:all": "pnpm lint:script && pnpm lint:style",
|
|
15
|
-
"test": "vitest",
|
|
16
|
-
"test:coverage": "vitest run --coverage",
|
|
17
|
-
"wiki:dev": "vitepress dev wikis",
|
|
18
|
-
"wiki:build": "vitepress build wikis",
|
|
19
|
-
"mcp:build:index": "tsx mcp/scripts/build-index.ts",
|
|
20
|
-
"mcp:build": "tsc -p mcp/tsconfig.json && pnpm mcp:build:index",
|
|
21
|
-
"mcp:start": "node dist/mcp/index.js",
|
|
22
|
-
"mcp:dev": "tsx mcp/src/index.ts"
|
|
23
|
-
},
|
|
24
6
|
"bin": {
|
|
25
7
|
"chat-x-mcp": "dist/mcp/index.js"
|
|
26
8
|
},
|
|
@@ -38,8 +20,7 @@
|
|
|
38
20
|
"types": "dist/index.d.ts",
|
|
39
21
|
"files": [
|
|
40
22
|
"dist",
|
|
41
|
-
"README.md"
|
|
42
|
-
"skills"
|
|
23
|
+
"README.md"
|
|
43
24
|
],
|
|
44
25
|
"keywords": [],
|
|
45
26
|
"author": "Tencent BlueKing",
|
|
@@ -69,7 +50,6 @@
|
|
|
69
50
|
"zod": "^4.3.6"
|
|
70
51
|
},
|
|
71
52
|
"devDependencies": {
|
|
72
|
-
"@blueking/chat-helper": "workspace:*",
|
|
73
53
|
"@types/katex": "^0.16.7",
|
|
74
54
|
"@types/lodash": "^4.17.23",
|
|
75
55
|
"@types/markdown-it": "^14.1.2",
|
|
@@ -98,6 +78,24 @@
|
|
|
98
78
|
"vite-bundle-analyzer": "^1.3.2",
|
|
99
79
|
"vitepress": "2.0.0-alpha.16",
|
|
100
80
|
"vitest": "^4.0.18",
|
|
101
|
-
"vue-tsc": "^3.1.4"
|
|
81
|
+
"vue-tsc": "^3.1.4",
|
|
82
|
+
"@blueking/chat-helper": "0.0.12-beta.29"
|
|
83
|
+
},
|
|
84
|
+
"scripts": {
|
|
85
|
+
"dev": "vite --config vite.config.ts",
|
|
86
|
+
"dts": "vue-tsc --project tsconfig.dts.json",
|
|
87
|
+
"build": "vitest && vite --config vite.config.ts build && pnpm dts",
|
|
88
|
+
"preview": "vite --config vite.config.ts build --mode preview && pnpm dts",
|
|
89
|
+
"lint:script": "eslint . --ext .vue,.ts --fix",
|
|
90
|
+
"lint:style": "stylelint \"**/*.{scss,css,vue}\" --fix",
|
|
91
|
+
"lint:all": "pnpm lint:script && pnpm lint:style",
|
|
92
|
+
"test": "vitest",
|
|
93
|
+
"test:coverage": "vitest run --coverage",
|
|
94
|
+
"wiki:dev": "vitepress dev wikis",
|
|
95
|
+
"wiki:build": "vitepress build wikis",
|
|
96
|
+
"mcp:build:index": "tsx mcp/scripts/build-index.ts",
|
|
97
|
+
"mcp:build": "tsc -p mcp/tsconfig.json && pnpm mcp:build:index",
|
|
98
|
+
"mcp:start": "node dist/mcp/index.js",
|
|
99
|
+
"mcp:dev": "tsx mcp/src/index.ts"
|
|
102
100
|
}
|
|
103
101
|
}
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: blueking-chat-x
|
|
3
|
-
description: >-
|
|
4
|
-
Use when 在消费方项目中接入 / 使用 @blueking/chat-x 对话组件库(已 npm 安装、非改库源码),
|
|
5
|
-
涉及「某组件怎么用、有哪些 props / events / slots / expose / v-model、怎么搭 AI 对话界面、
|
|
6
|
-
流式输出、停止生成、工具调用 ToolCall、快捷指令、文件上传、@ 资源、自定义消息或侧栏 Tab、
|
|
7
|
-
分享多选、HITL 中断审批、Markdown / 代码 / 公式 / 图表渲染、字号与主题 CSS 变量、
|
|
8
|
-
消息时间 MessageTime / timezone」等问题时优先使用。
|
|
9
|
-
若是在 packages/chat-x/src 内改库源码(写组件 / composable / 样式 / 测试),改用 chat-x-dev skill。
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# 使用 @blueking/chat-x
|
|
13
|
-
|
|
14
|
-
帮助**消费方项目**(已 `npm i @blueking/chat-x`)快速理解组件库、查清每个组件的用法与 API,并写出正确的接入代码。
|
|
15
|
-
|
|
16
|
-
本 skill 的组件资料在 `references/` 下,由 `scripts/generate-references.mjs` 从库的 `wikis/` 文档自动生成(剥离演示噪音、保留完整 API 与示例)。**它就是组件 API 的真相源**——不要凭记忆臆测 props/事件/插槽名。
|
|
17
|
-
|
|
18
|
-
## 信息源优先级(先查再写)
|
|
19
|
-
|
|
20
|
-
| 想知道什么 | 去哪里查(按优先级) |
|
|
21
|
-
| --- | --- |
|
|
22
|
-
| 某组件的 Props / Events / Slots / Expose / v-model / 用法 | ① `references/_index.md` 定位 slug → ② `references/components/<slug>.md`;③ 若项目装了 chat-x MCP,可用 `get_component_doc` / `search_docs` 交叉验证 |
|
|
23
|
-
| 有哪些组件、按能力域怎么选 | `references/_index.md`(能力地图) |
|
|
24
|
-
| composable / 类型 / 主题(字号、CSS 变量) | `references/composables/*`、`references/types/*`、`references/theme/*` |
|
|
25
|
-
| 最小接入怎么写 | 本文「快速接入」一节 |
|
|
26
|
-
|
|
27
|
-
> references 缺失或过期时,按本文「再生成 references」一节重新生成。
|
|
28
|
-
|
|
29
|
-
## 心智模型(一句话)
|
|
30
|
-
|
|
31
|
-
**消息驱动 + 角色分发**:业务维护一份 `Message[]` → `ChatContainer`(或 `useMessageGroup`)分组 → `MessageRender` 按 `message.role` 分发到具体消息组件 → `ContentRender` 按内容类型分发 → `MarkdownContent` 按 token 分发。
|
|
32
|
-
|
|
33
|
-
接入心智:**你只负责维护 `messages` 数组和实现 `onSendMessage` 等回调**,组件负责渲染与交互。
|
|
34
|
-
|
|
35
|
-
## 快速接入(ChatContainer 一站式,推荐入口)
|
|
36
|
-
|
|
37
|
-
```vue
|
|
38
|
-
<template>
|
|
39
|
-
<ChatContainer
|
|
40
|
-
v-model="input"
|
|
41
|
-
:messages="messages"
|
|
42
|
-
:message-status="messageStatus"
|
|
43
|
-
:on-send-message="handleSendMessage"
|
|
44
|
-
:on-stop-sending="handleStopSending"
|
|
45
|
-
@stop-streaming="handleStopStreaming"
|
|
46
|
-
/>
|
|
47
|
-
</template>
|
|
48
|
-
|
|
49
|
-
<script setup lang="ts">
|
|
50
|
-
import { ref } from 'vue';
|
|
51
|
-
import { ChatContainer, MessageRole, MessageStatus, type Message, type TagSchema, type UserMessage } from '@blueking/chat-x';
|
|
52
|
-
|
|
53
|
-
const input = ref('');
|
|
54
|
-
const messages = ref<Message[]>([]);
|
|
55
|
-
const messageStatus = ref(MessageStatus.Complete);
|
|
56
|
-
|
|
57
|
-
const handleSendMessage = async (content: UserMessage['content'], docSchema: TagSchema) => {
|
|
58
|
-
messages.value.push({ id: `u_${Date.now()}`, messageId: `u_${Date.now()}`, role: MessageRole.User, content, status: MessageStatus.Complete });
|
|
59
|
-
const ai: Message = { id: `a_${Date.now()}`, messageId: `a_${Date.now()}`, role: MessageRole.Assistant, content: '', status: MessageStatus.Streaming };
|
|
60
|
-
messages.value.push(ai);
|
|
61
|
-
messageStatus.value = MessageStatus.Streaming;
|
|
62
|
-
// 接你的 SSE / WebSocket,把增量写入 ai.content
|
|
63
|
-
ai.status = MessageStatus.Complete;
|
|
64
|
-
messageStatus.value = MessageStatus.Complete;
|
|
65
|
-
};
|
|
66
|
-
const handleStopSending = async () => { messageStatus.value = MessageStatus.Stop; };
|
|
67
|
-
const handleStopStreaming = () => { messageStatus.value = MessageStatus.Stop; };
|
|
68
|
-
</script>
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
前置依赖:`vue >= 3.5`、`bkui-vue 2.x`;样式随导入自动加载,无需手动引入。
|
|
72
|
-
需要完全控制布局时改用「`MessageContainer` + `ChatInput` + `useMessageGroup`」组合——细节查 `references/components/message-container.md` 与 `chat-input.md`。
|
|
73
|
-
|
|
74
|
-
## 怎么查一个组件(标准流程)
|
|
75
|
-
|
|
76
|
-
1. 在 `references/_index.md` 里按名称/能力域找到组件,拿到它的 `path`。
|
|
77
|
-
2. 读 `references/components/<slug>.md`:顶部是能力域 + 导入符号 + 概述 + 关联组件,正文含「核心能力 / 基础用法 / API(Props/Events/Slots/Expose/v-model)/ 类型定义」。
|
|
78
|
-
3. 按 API 表格落地代码,需要的类型与常量从 `@blueking/chat-x` 具名导入。
|
|
79
|
-
|
|
80
|
-
> 接入逻辑常跨多个组件(如 `ChatContainer` 透传 `ChatInput` / `MessageContainer` 的 props,自定义 `#message` 插槽需透传 `onAction` 等回调)。遇到「透传到底要带哪些参数」时,连同关联组件文档一起读。
|
|
81
|
-
|
|
82
|
-
## 常见坑(消费方高频,先看再调)
|
|
83
|
-
|
|
84
|
-
| 症状 | 原因 / 修法 |
|
|
85
|
-
| --- | --- |
|
|
86
|
-
| 自定义 `#message` 插槽后,用户消息的工具(删除/编辑/复制/引用)全失效,但 AI 消息工具正常 | 自定义 `#message` 渲染 `MessageRender` 时漏透传 `on-action` / `on-input-confirm` / `on-shortcut-confirm` / `tippy-options`;AI 消息工具在 `MessageContainer` 内部渲染不经过该插槽,故不受影响 |
|
|
87
|
-
| 用户消息编辑态的 `ChatInput` 上传配置与主输入区不一致 | `supportUpload` 需全链路透传 `ChatContainer → MessageContainer → MessageRender → UserMessage`,否则回退默认 `true` |
|
|
88
|
-
| 想自定义代码块头部动作(插入/应用代码)无从下手 | 用 `codeHeader` 插槽,参数为 `{ language, token }`(`AIBlueking/ChatBot` 已支持透传) |
|
|
89
|
-
| `requestOptions.data` 不知道进 body 还是 query | POST/PUT/PATCH/DELETE 合并进 body;GET/HEAD/OPTIONS 合并进 query(params) |
|
|
90
|
-
|
|
91
|
-
## 常见任务 → 入口
|
|
92
|
-
|
|
93
|
-
| 任务 | 入口组件 / 文档 |
|
|
94
|
-
| --- | --- |
|
|
95
|
-
| 搭完整对话界面 | `components/chat-container.md` |
|
|
96
|
-
| 自定义布局(自己拼消息列表 + 输入框) | `components/message-container.md` + `components/chat-input.md` + `composables/use-message-group.md` |
|
|
97
|
-
| `/` Prompt、`@` 资源、文件上传 | `components/chat-input.md` |
|
|
98
|
-
| 流式输出 / 停止生成 | `components/chat-container.md`(`messageStatus` + `@stop-streaming`) |
|
|
99
|
-
| 工具调用 / ToolCall 渲染 | `components/toolcall-render.md`、`components/tool-message.md` |
|
|
100
|
-
| HITL 中断 / 工具审批 / 用户提问 | `components/interrupt-message.md`、`components/tool-approval-card.md`、`components/user-question-card.md` |
|
|
101
|
-
| FlowAgent 执行 / 知识召回展示 | `components/flow-agent-content.md`、`components/knowledge-rag-content.md` |
|
|
102
|
-
| 渲染 Markdown / 代码 / 公式 / 图表 | `components/content-render.md`、`components/markdown-content.md`、`components/code-content.md` |
|
|
103
|
-
| 图片预览 / 文件展示 | `components/ai-image.md`、`components/image-preview-group.md`、`components/file-content.md` |
|
|
104
|
-
| 快捷指令表单 | `components/shortcut-render.md`、`components/chat-input.md` |
|
|
105
|
-
| 分享 / 多选 | `components/chat-container.md`、`components/selection-footer.md` |
|
|
106
|
-
| 自定义消息类型 / 侧栏 Tab | `composables/use-custom-tab.md` + `components/chat-container.md` |
|
|
107
|
-
| 字号 / 主题 CSS 变量 | `theme/theme.md` |
|
|
108
|
-
| 消息时间 / 时区 | `ChatContainer` 的 `timezone` prop;组件 `MessageTime`(wikis `components/feedback/message-time.md`)。四档:今天 `12:00` / 昨天 / 今年内 `3-12 12:00` / 跨年;无 `createdAt` 不渲染 |
|
|
109
|
-
|
|
110
|
-
## 类型与常量速查
|
|
111
|
-
|
|
112
|
-
```typescript
|
|
113
|
-
// 类型按需具名导入
|
|
114
|
-
import type { Message, UserMessage, AssistantMessage, ToolMessage, IToolBtn, Shortcut, TagSchema } from '@blueking/chat-x';
|
|
115
|
-
|
|
116
|
-
// 枚举 / 预置工具
|
|
117
|
-
import {
|
|
118
|
-
MessageRole, MessageStatus, MessageContentType,
|
|
119
|
-
CONST_MESSAGE_TOOLS, // AI 消息默认工具:复制 / 引用 / 重新生成 / 分享
|
|
120
|
-
CONST_USER_MESSAGE_TOOLS, // 用户消息默认工具:复制 / 引用 / 编辑 / 删除
|
|
121
|
-
} from '@blueking/chat-x';
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
更全的类型/常量定义查 `references/types/*`。
|
|
125
|
-
|
|
126
|
-
## 再生成 references
|
|
127
|
-
|
|
128
|
-
references 由脚本从 `wikis/` 生成。当库升级、wikis 更新,或 references 缺失/过期时重新生成(**运行脚本前需经用户同意**):
|
|
129
|
-
|
|
130
|
-
```bash
|
|
131
|
-
# 在 packages/chat-x 下执行(依赖 glob / gray-matter 已在 devDependencies)
|
|
132
|
-
node skills/blueking-chat-x/scripts/generate-references.mjs
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
脚本会全量重建 `references/`:`glob wikis` → `gray-matter` 解析 frontmatter → 清洗正文(去 VitePress demo `<script>` / `<div class="demo">` / 内联 style,保留代码围栏与 API 表格)→ 按组件能力域 + composables/types/theme 写出 + 生成 `_index.md`。
|
|
136
|
-
|
|
137
|
-
## 通用项目规则
|
|
138
|
-
|
|
139
|
-
中文回复、不擅自处理 eslint/格式、运行脚本需先经同意、git 提交禁用 `--no-verify`、不确定先问——见仓库 `AGENTS.md` 与 `.cursor/rules/project.mdc`。
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
# @blueking/chat-x 能力地图(自动生成)
|
|
2
|
-
|
|
3
|
-
> 由 `scripts/generate-references.mjs` 从 `wikis/` 生成,请勿手改。
|
|
4
|
-
> 查某个能力时:先在本索引定位 slug,再读对应 `path` 的 reference 文档。
|
|
5
|
-
|
|
6
|
-
> 生成时间:2026-09-01T03:51:31.378Z
|
|
7
|
-
|
|
8
|
-
## 组件(按能力域)
|
|
9
|
-
|
|
10
|
-
### 对话搭建
|
|
11
|
-
|
|
12
|
-
- **ChatContainer 聊天容器** — 完整对话容器,组合消息列表、输入区、模型选择、快捷指令、执行摘要、分享选择和自定义 Tab。 → `components/chat-container.md`
|
|
13
|
-
- **MessageContainer 消息列表容器** — 负责消息分组渲染、滚动控制、工具栏和消息插槽透传。 → `components/message-container.md`
|
|
14
|
-
|
|
15
|
-
### 消息系统
|
|
16
|
-
|
|
17
|
-
- **ActivityMessage 活动消息** — 按 activityType 分发 FlowAgent、知识召回、引用文档等活动内容。 → `components/activity-message.md`
|
|
18
|
-
- **AssistantMessage AI 助手消息** — 渲染助手消息主体、工具调用与文件产物,默认插槽可覆盖正文渲染。 → `components/assistant-message.md`
|
|
19
|
-
- **FileArtifactPanel 文件产物预览** — 汇总当前会话全部文件产物,支持搜索、选中与分类型预览,挂载在 ChatContainer 侧栏「文件产物」Tab。 → `components/file-artifact-panel.md`
|
|
20
|
-
- **InfoMessage 信息消息** — 渲染居中的系统信息提示。 → `components/info-message.md`
|
|
21
|
-
- **LoadingMessage 加载消息** — 消息列表中的加载占位,默认使用 AiLoading,也支持默认插槽覆盖。 → `components/loading-message.md`
|
|
22
|
-
- **MessageRender 消息渲染器** — 按 message.role 分发到用户、助手、工具、推理、活动、中断等消息组件。 → `components/message-render.md`
|
|
23
|
-
- **ReasoningMessage 推理消息** — 渲染推理过程,覆盖加载、错误与 Markdown 内容展示。 → `components/reasoning-message.md`
|
|
24
|
-
- **ToolMessage 工具消息** — 渲染工具返回内容,JSON 场景交给 DescPanel + HighlightKeyword 展示。 → `components/tool-message.md`
|
|
25
|
-
- **UserMessage 用户消息** — 渲染用户消息,支持纯文本、键值引用、文件附件和编辑态输入。 → `components/user-message.md`
|
|
26
|
-
|
|
27
|
-
### 内容渲染
|
|
28
|
-
|
|
29
|
-
- **AnimationText 动画文本** — 按文本增量播放流式动画。 → `components/animation-text.md`
|
|
30
|
-
- **CiteContent 引用内容** — 渲染输入或消息中的引用片段。 → `components/cite-content.md`
|
|
31
|
-
- **CodeContent 代码块** — 渲染 Markdown 代码块,支持高亮、复制和 header 插槽。 → `components/code-content.md`
|
|
32
|
-
- **CommonErrorContent 错误内容** — 展示统一错误提示内容。 → `components/common-error-content.md`
|
|
33
|
-
- **ContentRender 内容渲染器** — 按 MessageContentType 分发 Markdown、文本、引用、键值、图片等内容。 → `components/content-render.md`
|
|
34
|
-
- **DescPanel 描述面板** — 将文本或 JSON 内容降级为可读描述面板。 → `components/desc-panel.md`
|
|
35
|
-
- **KeyValueContent 键值内容** — 以键值列表展示结构化内容。 → `components/key-value-content.md`
|
|
36
|
-
- **LatexContent LaTeX 公式** — 使用 KaTeX 渲染 LaTeX 公式内容。 → `components/latex-content.md`
|
|
37
|
-
- **MarkdownContent Markdown 内容渲染** — Markdown 主渲染器,集成代码块、公式、错误降级和 codeHeader 插槽。 → `components/markdown-content.md`
|
|
38
|
-
- **MermaidContent Mermaid 图表** — 渲染 Mermaid 图表并处理渲染事件。 → `components/mermaid-content.md`
|
|
39
|
-
- **ReferenceContent 引用来源** — 渲染引用文档/来源列表。 → `components/reference-content.md`
|
|
40
|
-
- **TextContent 文本内容** — 渲染纯文本内容。 → `components/text-content.md`
|
|
41
|
-
|
|
42
|
-
### 媒体文件
|
|
43
|
-
|
|
44
|
-
- **AiImage 图片展示** — 图片展示组件,组合加载、错误、预览和 extra 插槽。 → `components/ai-image.md`
|
|
45
|
-
- **FileContent 文件内容** — 渲染文件附件,支持图片预览和下载事件。 → `components/file-content.md`
|
|
46
|
-
- **ImageContent 图片内容** — 渲染 Markdown 图片 token。 → `components/image-content.md`
|
|
47
|
-
- **ImagePreview 图片预览** — 图片全屏预览容器,支持缩放、旋转、下载工具栏。 → `components/image-preview.md`
|
|
48
|
-
- **ImagePreviewGroup 图片预览组** — 通过 provide/inject 管理同组图片预览。 → `components/image-preview-group.md`
|
|
49
|
-
- **PreviewToolbar 图片预览工具栏** — 图片预览的缩放、旋转、下载等工具按钮。 → `components/preview-toolbar.md`
|
|
50
|
-
|
|
51
|
-
### 输入交互
|
|
52
|
-
|
|
53
|
-
- **AiPromptList Prompt 列表** — \ Prompt 选择列表,供 AiSlashInput 插入模板文本。 → `components/ai-prompt-list.md`
|
|
54
|
-
- **AiSelection 划词选择** — 监听选中文本并展示快捷操作浮窗。 → `components/ai-selection.md`
|
|
55
|
-
- **AiSkillList Skill 列表** — / Skill 选择列表,供 AiSlashInput 插入 Skill 标签。 → `components/ai-skill-list.md`
|
|
56
|
-
- **AiSlashEditor 富文本编辑器** — 旧版富文本编辑器实现,封装 command selection 与提示菜单。 → `components/ai-slash-editor.md`
|
|
57
|
-
- **AiSlashInput 富文本命令输入** — ChatInput 内部富文本输入,支持 / Skill、\ Prompt 与 @ 资源标签。 → `components/ai-slash-input.md`
|
|
58
|
-
- **AiSlashMenu 资源菜单** — @ 资源选择菜单,展示资源项供 AiSlashInput 插入标签。 → `components/ai-slash-menu.md`
|
|
59
|
-
- **ChatInput 聊天输入框** — 聊天输入区,组合富文本输入、快捷指令、附件、引用、发送/停止等交互。 → `components/chat-input.md`
|
|
60
|
-
- **FileUploadBtn 文件上传按钮** — 文件选择按钮,封装 input[type=file] 并输出选择事件。 → `components/file-upload-btn.md`
|
|
61
|
-
- **InputAttachment 输入附件区** — ChatInput 底部附件区布局,承载快捷按钮、文件与发送图标。 → `components/input-attachment.md`
|
|
62
|
-
- **InputInfoAlert 输入提示条** — ChatInput 上方的信息提示条。 → `components/input-info-alert.md`
|
|
63
|
-
- **ModelSelector 模型选择器** — 聊天输入区的模型下拉选择器,支持搜索过滤、能力标签与键盘导航。 → `components/model-selector.md`
|
|
64
|
-
- **SelectionFooter 多选操作栏** — 消息多选/分享模式下的底部操作栏。 → `components/selection-footer.md`
|
|
65
|
-
- **ShortcutBtn 快捷指令按钮** — 单个快捷指令按钮,支持默认/append 插槽和 expose focus。 → `components/shortcut-btn.md`
|
|
66
|
-
- **ShortcutBtns 快捷指令按钮组** — 快捷指令列表入口,内部组合多个 ShortcutBtn。 → `components/shortcut-btns.md`
|
|
67
|
-
- **ShortcutRender 快捷指令表单** — 渲染快捷指令 components 表单并回传确认数据。 → `components/shortcut-render.md`
|
|
68
|
-
|
|
69
|
-
### Agent 能力
|
|
70
|
-
|
|
71
|
-
- **DetailSection 详情分段** — FlowAgent 节点详情中的标题/内容分段容器。 → `components/detail-section.md`
|
|
72
|
-
- **ExecutionSummary 执行摘要** — 按消息流提取执行摘要,支持关键词定位和消息渲染。 → `components/execution-summary.md`
|
|
73
|
-
- **FlowAgentContent FlowAgent 执行内容** — 渲染 FlowAgent 任务/节点执行状态、耗时、详情入口和自定义 Tab 联动。 → `components/flow-agent-content.md`
|
|
74
|
-
- **FlowAgentNodeDetail FlowAgent 节点详情** — 展示 FlowAgent 节点输入、输出、异常、耗时等详情。 → `components/flow-agent-node-detail.md`
|
|
75
|
-
- **InterruptMessage 中断消息** — 渲染 human-in-the-loop 中断消息,分发工具审批,并按 reason 回显 resume 结果。 → `components/interrupt-message.md`
|
|
76
|
-
- **KnowledgeRagContent 知识召回内容** — 渲染知识召回活动,包含加载态、Markdown 内容与引用来源。 → `components/knowledge-rag-content.md`
|
|
77
|
-
- **ReferenceDocContent 引用文档活动** — 渲染引用文档类活动内容,复用 ActivityLayout 与 ReferenceContent。 → `components/reference-doc-content.md`
|
|
78
|
-
- **SimpleTable 简易表格** — FlowAgent 节点详情中的轻量表格展示组件。 → `components/simple-table.md`
|
|
79
|
-
- **ToolApprovalCard 工具审批卡片** — 渲染 AIDevToolApproval 中断的审批信息与取消/刷新操作,readonly prop 支持纯只读展示。 → `components/tool-approval-card.md`
|
|
80
|
-
- **ToolcallRender 工具调用渲染器** — 渲染 assistant toolCalls,展示工具调用状态、参数和结果。 → `components/toolcall-render.md`
|
|
81
|
-
- **UserQuestionAnsweredCard 用户问题回答回显** — 在 UserQuestion resume 成功后回显用户回答或取消状态。 → `components/user-question-answered-card.md`
|
|
82
|
-
- **UserQuestionCard 用户问题中断** — 渲染 UserQuestion 中断的待回答面板;一次一题分页切换,支持单选/多选、Others、跳过与已完成进度。 → `components/user-question-card.md`
|
|
83
|
-
- **UserQuestionChoice 用户问题选择题** — UserQuestionCard 默认的选择题渲染组件,封装单选/多选、Others 输入与答案组装。 → `components/user-question-choice.md`
|
|
84
|
-
- **UserQuestionOption 用户问题选项** — UserQuestionChoice 内部选项行,处理单选/多选状态和 Others 输入。 → `components/user-question-option.md`
|
|
85
|
-
|
|
86
|
-
### 工具与反馈
|
|
87
|
-
|
|
88
|
-
- **DeleteTool 删除确认按钮** — 消息删除二次确认工具。 → `components/delete-tool.md`
|
|
89
|
-
- **MessageTime 消息时间** — 按「今天 / 昨天 / 今年内 / 跨年」四档格式展示消息创建时间。 → `components/message-time.md`
|
|
90
|
-
- **MessageTools 消息工具栏** — 消息悬浮工具栏,组合复制、删除、反馈等工具按钮。 → `components/message-tools.md`
|
|
91
|
-
- **ScrollBtn 滚动按钮** — 停止生成或返回底部等滚动/状态按钮。 → `components/scroll-btn.md`
|
|
92
|
-
- **ToolBtn 工具按钮** — 工具栏图标按钮。 → `components/tool-btn.md`
|
|
93
|
-
- **UserFeedback 用户反馈** — 用户反馈弹层,提交踩/反馈原因。 → `components/user-feedback.md`
|
|
94
|
-
|
|
95
|
-
### 辅助能力
|
|
96
|
-
|
|
97
|
-
- **ActivityLayout 活动布局** — 活动消息的折叠布局容器,提供 title/default 插槽。 → `components/activity-layout.md`
|
|
98
|
-
- **AiLoading 三点加载** — 小尺寸 AI 加载动效。 → `components/ai-loading.md`
|
|
99
|
-
- **FileIcon 文件类型图标** — 按文件扩展名渲染对应类型图标,尺寸随外层 font-size 自适应。 → `components/file-icon.md`
|
|
100
|
-
- **HighlightKeyword 关键词高亮** — 根据注入关键词高亮文本片段。 → `components/highlight-keyword.md`
|
|
101
|
-
- **MessageLoading 品牌加载** — 带品牌图标和逐字渐变动画的加载组件。 → `components/message-loading.md`
|
|
102
|
-
- **QuestionsContainer 问题容器占位** — 源码为空文件,没有 props、emits、slots 或渲染能力;不建议作为功能组件使用。 → `components/questions-container.md`
|
|
103
|
-
- **SelectionQuestion 选择问题占位** — 源码为空文件,没有 props、emits、slots 或渲染能力;不建议作为功能组件使用。 → `components/selection-question.md`
|
|
104
|
-
- **VNodeRenderer VNode 渲染器** — 将 Markdown token 转成 VNode 的内部渲染桥。 → `components/vnode-renderer.md`
|
|
105
|
-
|
|
106
|
-
## Composables 组合式函数
|
|
107
|
-
|
|
108
|
-
- **useAnimationText** — 文本淡入动画的组合式函数。将响应式文本按**增量**拆分为独立 chunk,每个新增 chunk 对应一次淡入动画,适用于 AI 流式输出的逐段渐显效果。 → `composables/use-animation-text.md`
|
|
109
|
-
- **useArtifactPreview** — Provider/Consumer 模式的文件产物预览状态管理,用于 ChatContainer 侧栏「文件产物」Tab 的命中与切换。 Provider 在 ChatContainer 中创建,Consumer 在深层文件卡片中注入使用。 → `composables/use-artifact-preview.md`
|
|
110
|
-
- **useClipboard** — 复制文本到剪贴板的组合式函数。内置两级降级策略,并自动通过 bkui-vue `Message` 提示复制结果,调用方无需关心成功/失败处理。 → `composables/use-clipboard.md`
|
|
111
|
-
- **useCommandSelection** — 为 `edix` 富文本编辑器提供光标位置追踪能力的组合式函数。内部封装一个 `EditorCommand`,由编辑器调用后将光标的行列信息存入响应式变量,供后续编辑命令(如插入 tag、删除关键词)精确定位。 → `composables/use-command-selection.md`
|
|
112
|
-
- **useContainerScroll** — 为消息容器提供滚动控制的组合式函数对,通过 **Provider/Consumer** 模式在父子组件间共享滚动状态。 → `composables/use-container-scroll.md`
|
|
113
|
-
- **useCustomTab** — Provider/Consumer 模式的自定义 Tab 管理,用于 `ChatContainer` 侧边栏的 Tab 动态管理。Provider 在 `ChatContainer` 中创建,Consumer 在任意后代组件中注入使用。 → `composables/use-custom-tab.md`
|
|
114
|
-
- **useFlowNodeActions** — 聚合 FlowAgent 节点行尾操作(详情 / 重试 / 跳过)为声明式视图模型列表,显隐与 resume 回调收敛于此。 → `composables/use-flow-node-actions.md`
|
|
115
|
-
- **useFullScreen** — 基于浏览器原生 Fullscreen API 的全屏控制组合式函数,自动嗅探标准与 WebKit 前缀,状态与 ESC 退出保持同步。 → `composables/use-full-screen.md`
|
|
116
|
-
- **useGlobalConfig** — 在聊天根容器与子组件之间通过 provide/inject 共享全局展示配置(字号主题档位、是否支持上传、消息时间时区等)。 → `composables/use-global-config.md`
|
|
117
|
-
- **useMenuKeydown** — 为弹出菜单提供键盘导航能力的组合式函数。在 `onMounted` 时于 **`window` 捕获阶段**注册 `keydown` 监听,在 `onScopeDispose` 时自动移除,通过 `menuRef.offsetParent` 检测菜单可见性来决定是否响应按键。 → `composables/use-menu-keydown.md`
|
|
118
|
-
- **useMessageGroup** — 核心消息分组逻辑,将原始 `Message[]` 数组转换为结构化的 `MessageGroup[]`。处理 Tool 消息合并、Loading 自动注入、执行摘要过滤和消息多选/分享等逻辑。 → `composables/use-message-group.md`
|
|
119
|
-
- **useObserverVisibleList** — 基于 `ResizeObserver` 的容器宽度感知组合式函数:遍历列表项的实际 `offsetWidth`,使用贪心算法计算在容器中能完整显示的项目子集,并为"更多"按钮动态预留空间。 → `composables/use-observer-visible-list.md`
|
|
120
|
-
- **useParentScrolling** — 向上递归查找**最近可滚动祖先**,监听其 `scroll` / `scrollend` 事件,提供 `isScrolling` 状态。常用于滚动时自动关闭浮层、禁用交互等场景。 → `composables/use-parent-scrolling.md`
|
|
121
|
-
|
|
122
|
-
## 类型定义
|
|
123
|
-
|
|
124
|
-
- **常量枚举** — `@blueking/chat-x` 导出的常量和枚举类型。 → `types/constants.md`
|
|
125
|
-
- **中断类型 Interrupt** — AG-UI human-in-the-loop 中断相关类型,含 Interrupt、UserQuestion、InterruptMessage 与 resume 回调。 → `types/interrupt.md`
|
|
126
|
-
- **消息类型** — `@blueking/chat-x` 提供了完整的消息类型定义,用于构建 AI 对话消息。 → `types/messages.md`
|
|
127
|
-
- **用户问题 Schema** — 历史 human-in-the-loop 用户问题 JSON Schema 工具;新 UserQuestion 中断协议以 Interrupt 文档为准。 → `types/schema.md`
|
|
128
|
-
|
|
129
|
-
## 主题
|
|
130
|
-
|
|
131
|
-
- **主题配置** — `@blueking/chat-x` 使用 SCSS 变量和 CSS 类来控制样式,支持通过覆盖变量或样式来自定义主题。 → `theme/theme.md`
|