@blueking/chat-x 0.0.49-beta.7 → 0.0.50

package/dist/mcp/generated/docs/assistant-message.md

@@ -378,14 +378,18 @@ AI 可在一次回复中发起多个工具调用，组件依次渲染：
 
 `AIFileInfo` 仅含元信息（`name` / `outputId` / `size` / `type`）；`download_url` / `preview_url` 由容器 `onArtifactClick` 异步获取。命中唯一文件依赖 `messageUid = uid ?? String(id)` + 卡片下标 + `outputId`。
 
-侧栏预览由面板内 `ArtifactPreviewHost` 按类型分派（详见面板文档「预览机制」）：
-
-| type | 预览依赖 | 渲染 |
-| ---- | -------- | ---- |
-| `html` / `markdown` / `md` / `txt` / `json` | `download_url` | 正文直渲染（srcdoc / MarkdownContent / `<pre>`） |
-| `pdf` / `jpg` 等 | `preview_url` | iframe（一般为后台转好的 PDF） |
-
-`md` 与 `markdown` 等价（见 `AIFileType.Md` / `AIFileType.Markdown`）。预览重载、重试与取链约定见 [FileArtifactPanel 预览机制](/components/message/file-artifact-panel#预览机制)。
+侧栏预览由面板内 `ArtifactPreviewHost` 按**文件分类**分派（详见面板文档「预览机制」）：
+
+| 分类 | 典型 type | 预览依赖 | 渲染 |
+| ---- | --------- | -------- | ---- |
+| 源码 / 配置 | `py` / `ts` / `json` / `yaml` / `Dockerfile` | `download_url` | highlight.js 高亮 |
+| Markdown | `md` / `markdown` | `download_url` | MarkdownContent 富文本 |
+| HTML | `html` / `htm` | `download_url` | `<iframe srcdoc>` 真实渲染 |
+| 纯文本 | `txt` / `rst` | `download_url` | `<pre>` |
+| 图片 | `png` / `jpg` / `svg` | `preview_url` | `<img>` |
+| 其余（含未知类型） | `pdf` / `docx` / `xlsx` | `preview_url` | iframe（一般为后台转好的 PDF） |
+
+`type` 为扩展名字符串（大小写不敏感），缺省时回退文件名推断；`md` 与 `markdown` 等价。预览重载、重试与取链约定见 [FileArtifactPanel 预览机制](/components/message/file-artifact-panel#预览机制)。
 
 ```vue
 <template>

package/dist/mcp/generated/docs/file-artifact-panel.md

@@ -1,7 +1,7 @@
 <!-- AI SUMMARY -->
 ## 快速了解
 
-汇总当前会话所有 AssistantMessage 的 artifacts（按 outputId 去重），支持关键词搜索、列表选中与下载； 预览区委托 ArtifactPreviewHost：按类型走 text_from_download（html / markdown / md / txt / json） 或 preview_url_iframe（其余类型）；download_url / preview_url 经 onArtifactClick 每次异步获取（无 URL 缓存，并发去重）； 预览重载键为 outputId:type；重试再次调用 load() 重新取链。 源码位置：src/components/chat-message/assistant-message/message-artifacts/file-artifact-panel.vue。
+汇总当前会话所有 AssistantMessage 的 artifacts（按 outputId 去重），支持关键词搜索、列表选中与下载； 预览区委托 ArtifactPreviewHost：由 resolveFileKind 把扩展名归入 code / markdown / html / text / image / binary 六类， 前四类走 text_from_download 拉正文（code 交给 highlight.js 高亮），image / binary 走 preview_url； download_url / preview_url 经 onArtifactClick 每次异步获取（无 URL 缓存，并发去重）； 预览重载键为 outputId:type；重试再次调用 load() 重新取链。 源码位置：src/components/chat-message/assistant-message/message-artifacts/file-artifact-panel.vue。
 
 ### 关联组件
 - **assistant-message** — 文件产物来源于 AssistantMessage.property.artifacts
@@ -183,16 +183,25 @@ sessionArtifacts 有产物时
 
 ## 预览机制
 
-预览由内部 `getArtifactPreviewStrategy(type)` 决定 **加载方式** 与 **渲染器**；面板不直接写死类型分支。
+预览分两步：先由 `resolveFileKind(type, name)`（`src/utils/file-type.ts`）把扩展名归入六个**分类**，再由 `getArtifactPreviewStrategy` 查表得到 **加载方式** 与 **渲染器**。面板与 Host 都不写死具体扩展名分支，后台新增文件类型时只需在分类表里补一行。
 
-| 文件类型 | load | 取链字段 | renderer |
-| -------- | ---- | -------- | -------- |
-| `html` | `text_from_download` | `download_url` → `fetch` 正文 | `HtmlPreview`（`<iframe srcdoc>`） |
-| `markdown` / `md` | `text_from_download` | 同上 | `MarkdownPreview`（`MarkdownContent`） |
-| `txt` / `json` | `text_from_download` | 同上 | `TxtPreview`（`<pre>`） |
-| 其余（如 `pdf` / `jpg`） | `preview_url_iframe` | `preview_url` | `UrlIframePreview`（`<iframe src>`，一般为后台转好的 PDF） |
+| 分类 | 覆盖扩展名 | load | 取链字段 | renderer |
+| ---- | ---------- | ---- | -------- | -------- |
+| `code` | `py` `js` `mjs` `cjs` `ts` `tsx` `jsx` `vue` `go` `rs` `rb` `java` `kt` `swift` `c` `h` `cpp` `hpp` `cs` `php` `lua` `r` `scala` `dart` `sh` `bash` `zsh` `ps1` `sql` `css` `scss` `less` `json` `jsonc` `yaml` `yml` `toml` `ini` `cfg` `conf` `env` `xml` `tex` `Dockerfile` `Makefile` `gitignore` `dockerignore` `editorconfig` | `text_from_download` | `download_url` → `fetch` 正文 | `CodePreview`（highlight.js 高亮） |
+| `markdown` | `md` `markdown` | `text_from_download` | 同上 | `MarkdownPreview`（`MarkdownContent`） |
+| `html` | `html` `htm` | `text_from_download` | 同上 | `HtmlPreview`（`<iframe srcdoc>`） |
+| `text` | `txt` `rst` | `text_from_download` | 同上 | `TxtPreview`（`<pre>`） |
+| `image` | `png` `jpg` `jpeg` `svg` | `preview_url` | `preview_url` | `ImagePreview`（`<img>`，`object-fit: contain`） |
+| `binary` | `pdf` `docx` `xlsx` `xlsm` `xls` `pptx` `csv` `tsv`，以及**所有未登记的扩展名** | `preview_url` | `preview_url` | `UrlIframePreview`（`<iframe src>`，一般为后台转好的 PDF） |
 
-> `md`（`AIFileType.Md`）为后台扩展名别名，与 `markdown`（`AIFileType.Markdown`）等价，共用 Markdown 直渲染。
+关于类型解析：
+
+- `AIFileInfo.type` 为**扩展名字符串**（如 `'pdf'` / `'py'`）或无扩展名的文件名（如 `'Dockerfile'`），大小写不敏感
+- `type` 缺省时回退 `name` 推断；`报告.final.xlsx` 取 `xlsx`，`.gitignore` 取 `gitignore`
+- `md` 为后台扩展名别名，与 `markdown` 等价，共用 Markdown 直渲染
+- 未登记的扩展名一律落入 `binary` 走后台预览，前端不会因为新类型报错
+
+`CodePreview` 的语言由扩展名映射到 highlight.js（`vue → xml`、`tsx → typescript`、`env / cfg / conf → ini` 等，其余交给 hljs 自身别名表，识别不了则按 `plaintext` 转义输出）。单文件超过 300KB 时跳过高亮直接转义，避免同步解析阻塞主线程。
 
 ### 加载态
 
@@ -219,15 +228,19 @@ message-artifacts/
 ├── file-artifact-panel.vue          # 列表 + 下载头 + 挂载 Host
 └── artifact-preview/
     ├── artifact-preview-host.vue    # 状态机 UI + 分派 renderer
-    ├── preview-strategy.ts          # getArtifactPreviewStrategy
+    ├── preview-strategy.ts          # getArtifactPreviewStrategy（分类 → 策略查表）
     ├── use-artifact-preview-loader.ts
     └── renderers/
+        ├── code-preview.vue
         ├── html-preview.vue
+        ├── image-preview.vue
         ├── markdown-preview.vue
         ├── txt-preview.vue
         └── url-iframe-preview.vue
 ```
 
+分类表与扩展名归一化在 `src/utils/file-type.ts`（导出 `AIFileKind` / `resolveFileKind` / `normalizeFileExtension`），与[文件图标](/components/helper/file-icon)共用同一份解析入口。
+
 ## API
 
 ### Props
@@ -259,10 +272,13 @@ type AIFileInfo = {
   name: string;
   outputId: string;
   size: number;
-  type: AIFileType;
+  /** 扩展名（如 'pdf' / 'py'）或无扩展名文件名（如 'Dockerfile'），大小写不敏感 */
+  type: string;
 };
 ```
 
+> **破坏性变更**：原 `AIFileType` 枚举已移除，`AIFileInfo.type` 改为 `string`。此前写 `type: AIFileType.Pdf` 的代码改为 `type: 'pdf'` 即可；枚举成员的值与新字符串一一对应，运行时数据无需迁移。
+
 ## 关联 Composable
 
 预览**命中与取链**由 [useArtifactPreview](/composables/use-artifact-preview) 提供（Provider / Consumer + `ARTIFACT_PREVIEW_TOKEN`）。**正文加载与渲染**由内部 `useArtifactPreviewLoader` + `ArtifactPreviewHost` 完成，不在该 composable 内。

package/dist/mcp/generated/docs/file-icon.md

@@ -0,0 +1,111 @@
+<!-- AI SUMMARY -->
+## 快速了解
+
+按扩展名渲染文件类型图标：内联 svg，尺寸用 1em 跟随外层 font-size； 扩展名解析走 normalizeFileExtension（优先 fileType，缺省回退 fileName，大小写不敏感， 支持 Dockerfile / .gitignore 这类无扩展名或点号开头的文件）；未登记类型返回 unknown 兜底图标。 源码位置：src/components/file-icon/file-icon.vue，图标注册表在 src/icons/file-icons.ts。
+
+### 关联组件
+- **file-artifact-panel** — 文件产物列表与预览头使用该组件展示类型图标
+- **assistant-message** — 消息内的文件产物卡片使用该组件
+
+---
+<!-- FULL DOC -->
+
+# FileIcon 文件类型图标
+
+> **能力域**：辅助能力
+
+`FileIcon` 按文件扩展名渲染对应的类型图标，用于文件列表、附件卡片、产物预览头等需要「一眼看出这是什么文件」的场景。图标以内联 svg 形式打进包内，不产生额外网络请求，也不需要消费方配置静态资源路径。
+
+## 源码事实
+
+- **源码位置**：`src/components/file-icon/file-icon.vue`
+- **图标注册表**：`src/icons/file-icons.ts`（导出 `getFileIconSvg` / `UNKNOWN_FILE_ICON_SVG`）
+- **扩展名解析**：`src/utils/file-type.ts` 的 `normalizeFileExtension`
+
+## 核心能力
+
+- **扩展名驱动**：优先取 `fileType`，缺省时回退 `fileName` 推断；大小写不敏感
+- **特殊文件名**：`Dockerfile` / `Makefile` 这类无扩展名文件，以及 `.gitignore` / `.editorconfig` 这类点号开头的文件都能正确命中
+- **多扩展名共用图标**：如 `xlsx` / `xls` / `csv` / `tsv` 共用表格图标，`tsx` / `jsx` 共用 React 图标
+- **兜底不报错**：未登记的扩展名返回 `unknown` 图标，后台新增文件类型时前端不会缺图
+- **尺寸自适应**：内部 svg 固定为 `1em`，直接用外层 `font-size` 控制大小
+
+## 基础用法
+
+```vue
+<template>
+  <FileIcon file-type="pdf" />
+</template>
+
+<script setup lang="ts">
+  import { FileIcon } from '@blueking/chat-x';
+</script>
+```
+
+**渲染效果**
+
+## 从文件名推断
+
+后台未下发 `type` 时传 `fileName` 即可，组件会取最后一段扩展名：
+
+```vue
+<template>
+  <!-- 取 xlsx -->
+  <FileIcon file-name="季度报告.final.xlsx" />
+  <!-- 取 gitignore -->
+  <FileIcon file-name=".gitignore" />
+</template>
+```
+
+两者同时传入时以 `fileType` 优先。
+
+## 控制尺寸
+
+图标宽高为 `1em`，用外层 `font-size` 控制即可，无需改 svg：
+
+```vue
+<template>
+  <span style="font-size: 16px"><FileIcon file-type="py" /></span>
+  <span style="font-size: 32px"><FileIcon file-type="py" /></span>
+</template>
+```
+
+## API
+
+### Props
+
+| 属性名   | 类型     | 必填 | 默认值      | 说明                                                     |
+| -------- | -------- | ---- | ----------- | -------------------------------------------------------- |
+| fileType | `string` | 否   | `undefined` | 文件类型：扩展名（如 `pdf` / `py`）或无扩展名文件名（如 `Dockerfile`） |
+| fileName | `string` | 否   | `undefined` | 文件名，`fileType` 缺省时用于推断扩展名                    |
+
+两者都不传时渲染兜底图标。
+
+### Emits / Slots / Expose
+
+- 无。
+
+## 图标覆盖范围
+
+| 图标 | 覆盖扩展名 |
+| ---- | ---------- |
+| 文档类 | `pptx` / `docx` / `pdf` / `txt` / `rst` / `md` / `markdown` / `tex` |
+| 表格类 | `xlsx` / `xlsm` / `xls` / `csv` / `tsv` |
+| 前端 | `html` / `htm` / `css` / `scss` / `less` / `js` / `mjs` / `cjs` / `ts` / `tsx` / `jsx` / `vue` / `xml` |
+| 后端 / 系统 | `py` / `go` / `rs` / `rb` / `java` / `kt` / `swift` / `c` / `h` / `cpp` / `hpp` / `cs` / `php` / `lua` / `r` / `scala` / `dart` / `sql` / `sh` / `bash` / `zsh` / `ps1` |
+| 配置 | `json` / `jsonc` / `yaml` / `yml` / `toml` / `ini` / `cfg` / `conf` / `env` / `editorconfig` / `Makefile` |
+| 工具链 | `Dockerfile` / `dockerignore` / `gitignore` |
+| 图片 | `png` / `jpg` / `jpeg` / `svg` |
+| 兜底 | 以上之外的所有类型 |
+
+新增类型时在 `src/icons/file-icons.ts` 的 `FILE_ICON_GROUPS` 里补一行即可；对应 svg 需先放进 `src/svgs/` 并按需 `?raw` 引入（只引实际用到的，避免把整个图标库打进产物）。
+
+## 使用建议
+
+- 图标颜色由 svg 自带，不继承 `currentColor`，不要试图用 `color` 覆盖
+- 需要与文件名同行展示时，给父容器设 `display: flex` + `gap`，组件本身已是 `inline-flex` 且 `flex-shrink: 0`
+
+## 关联组件
+
+- [FileArtifactPanel](../message/file-artifact-panel.md) — 文件产物列表与预览头使用该组件。
+- [AssistantMessage](../message/assistant-message.md) — 消息内文件产物卡片的图标来源。

package/dist/mcp/generated/index.json

@@ -1,6 +1,6 @@
 {
   "version": "2.0.0",
-  "generatedAt": "2026-08-11T09:05:16.821Z",
+  "generatedAt": "2026-08-13T08:24:18.572Z",
   "domains": {
     "setup": {
       "label": "对话搭建",
@@ -98,6 +98,7 @@
       "components": [
         "activity-layout",
         "ai-loading",
+        "file-icon",
         "highlight-keyword",
         "message-loading",
         "questions-container",
@@ -555,6 +556,25 @@
       "docFile": "docs/ai-loading.md",
       "domain": "helper"
     },
+    {
+      "name": "FileIcon 文件类型图标",
+      "slug": "file-icon",
+      "kind": "component",
+      "description": "按文件扩展名渲染对应类型图标，尺寸随外层 font-size 自适应。",
+      "aiSummary": "按扩展名渲染文件类型图标：内联 svg，尺寸用 1em 跟随外层 font-size； 扩展名解析走 normalizeFileExtension（优先 fileType，缺省回退 fileName，大小写不敏感， 支持 Dockerfile / .gitignore 这类无扩展名或点号开头的文件）；未登记类型返回 unknown 兜底图标。 源码位置：src/components/file-icon/file-icon.vue，图标注册表在 src/icons/file-icons.ts。",
+      "relatedComponents": [
+        {
+          "slug": "file-artifact-panel",
+          "relation": "文件产物列表与预览头使用该组件展示类型图标"
+        },
+        {
+          "slug": "assistant-message",
+          "relation": "消息内的文件产物卡片使用该组件"
+        }
+      ],
+      "docFile": "docs/file-icon.md",
+      "domain": "helper"
+    },
     {
       "name": "HighlightKeyword 关键词高亮",
       "slug": "highlight-keyword",
@@ -1115,7 +1135,7 @@
       "slug": "file-artifact-panel",
       "kind": "component",
       "description": "汇总当前会话全部文件产物，支持搜索、选中与分类型预览，挂载在 ChatContainer 侧栏「文件产物」Tab。",
-      "aiSummary": "汇总当前会话所有 AssistantMessage 的 artifacts（按 outputId 去重），支持关键词搜索、列表选中与下载； 预览区委托 ArtifactPreviewHost：按类型走 text_from_download（html / markdown / md / txt / json） 或 preview_url_iframe（其余类型）；download_url / preview_url 经 onArtifactClick 每次异步获取（无 URL 缓存，并发去重）； 预览重载键为 outputId:type；重试再次调用 load() 重新取链。 源码位置：src/components/chat-message/assistant-message/message-artifacts/file-artifact-panel.vue。",
+      "aiSummary": "汇总当前会话所有 AssistantMessage 的 artifacts（按 outputId 去重），支持关键词搜索、列表选中与下载； 预览区委托 ArtifactPreviewHost：由 resolveFileKind 把扩展名归入 code / markdown / html / text / image / binary 六类， 前四类走 text_from_download 拉正文（code 交给 highlight.js 高亮），image / binary 走 preview_url； download_url / preview_url 经 onArtifactClick 每次异步获取（无 URL 缓存，并发去重）； 预览重载键为 outputId:type；重试再次调用 load() 重新取链。 源码位置：src/components/chat-message/assistant-message/message-artifacts/file-artifact-panel.vue。",
       "relatedComponents": [
         {
           "slug": "assistant-message",

package/dist/utils/file-type.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 文件分类：图标兜底与预览渲染策略的共同依据。
+ * - code：可交给 highlight.js 渲染的源码 / 配置文件
+ * - text：纯文本，直接按原文展示
+ * - binary：无法在前端直接解析，统一交由后端 preview_url 预览
+ */
+export type AIFileKind = 'binary' | 'code' | 'html' | 'image' | 'markdown' | 'text';
+/**
+ * 归一化文件类型标识：优先取后台下发的 type，缺省时回退文件名。
+ * 统一转小写并截取最后一段扩展名；无扩展名的文件（Dockerfile / Makefile）直接返回文件名本身。
+ */
+export declare const normalizeFileExtension: (type?: string, name?: string) => string;
+/** 解析文件分类；未登记的扩展名按 binary 兜底 */
+export declare const resolveFileKind: (type?: string, name?: string) => AIFileKind;

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './file';
+export * from './file-type';
 export * from './markdown-completer';
 export { completeMarkdownSyntax } from './stream-markdown-completer';
 export * from './utils';

package/package.json

@@ -1,8 +1,26 @@
 {
   "name": "@blueking/chat-x",
-  "version": "0.0.49-beta.7",
+  "version": "0.0.50",
   "description": "蓝鲸智云 AI Chat 组件库 —— 遵循 AG-UI，为 AI Agent 和人类开发者共同设计的对话 UI 组件库。",
   "main": "index.js",
+  "scripts": {
+    "prepublishOnly": "vite --config vite.config.ts build && pnpm dts && pnpm mcp:build",
+    "dev": "vite --config vite.config.ts",
+    "dts": "vue-tsc --project tsconfig.dts.json",
+    "build": "vitest && vite --config vite.config.ts build && pnpm dts",
+    "preview": "vite --config vite.config.ts build --mode preview && pnpm dts",
+    "lint:script": "eslint . --ext .vue,.ts --fix",
+    "lint:style": "stylelint \"**/*.{scss,css,vue}\" --fix",
+    "lint:all": "pnpm lint:script && pnpm lint:style",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "wiki:dev": "vitepress dev wikis",
+    "wiki:build": "vitepress build wikis",
+    "mcp:build:index": "tsx mcp/scripts/build-index.ts",
+    "mcp:build": "tsc -p mcp/tsconfig.json && pnpm mcp:build:index",
+    "mcp:start": "node dist/mcp/index.js",
+    "mcp:dev": "tsx mcp/src/index.ts"
+  },
   "bin": {
     "chat-x-mcp": "dist/mcp/index.js"
   },
@@ -50,6 +68,7 @@
     "zod": "^4.3.6"
   },
   "devDependencies": {
+    "@blueking/chat-helper": "workspace:*",
     "@types/katex": "^0.16.7",
     "@types/lodash": "^4.17.23",
     "@types/markdown-it": "^14.1.2",
@@ -78,24 +97,6 @@
     "vite-bundle-analyzer": "^1.3.2",
     "vitepress": "2.0.0-alpha.16",
     "vitest": "^4.0.18",
-    "vue-tsc": "^3.1.4",
-    "@blueking/chat-helper": "0.0.12-beta.19"
-  },
-  "scripts": {
-    "dev": "vite --config vite.config.ts",
-    "dts": "vue-tsc --project tsconfig.dts.json",
-    "build": "vitest && vite --config vite.config.ts build && pnpm dts",
-    "preview": "vite --config vite.config.ts build --mode preview && pnpm dts",
-    "lint:script": "eslint . --ext .vue,.ts --fix",
-    "lint:style": "stylelint \"**/*.{scss,css,vue}\" --fix",
-    "lint:all": "pnpm lint:script && pnpm lint:style",
-    "test": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "wiki:dev": "vitepress dev wikis",
-    "wiki:build": "vitepress build wikis",
-    "mcp:build:index": "tsx mcp/scripts/build-index.ts",
-    "mcp:build": "tsc -p mcp/tsconfig.json && pnpm mcp:build:index",
-    "mcp:start": "node dist/mcp/index.js",
-    "mcp:dev": "tsx mcp/src/index.ts"
+    "vue-tsc": "^3.1.4"
   }
 }

package/dist/components/chat-message/assistant-message/message-artifacts/file-icon.d.ts

@@ -1,29 +0,0 @@
-import { AIFileType } from '../../../../ag-ui/types/file';
-/** 文件类型 → 图标映射；未命中类型兜底用文本图标 */
-export declare const FILE_ICON_MAP: {
-    readonly html: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>;
-    readonly jpg: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>;
-    readonly json: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>;
-    readonly md: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>;
-    readonly markdown: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>;
-    readonly pdf: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>;
-    readonly txt: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>;
-};
-/** 图标为共享 VNode，克隆后再渲染，避免同类型多处复用同一实例 */
-export declare const getFileIcon: (type: AIFileType) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>;