图文引用增强 copylee711/dsh-better-display

dsh-better-display

让 DeepSeek Harness Web 的回答图文并茂，并为联网搜索内容加上 GPT 式引用角标。

中文 · English

| 回答末尾的来源面板 | 公式、表格、代码高亮 |
| 来源面板：展开后列出编号与标题 | 同一条回答里的 LaTeX 公式、表格和 Python 代码块 |

为什么需要它

用 @copylee/dsh-free-search 等插件联网搜索时，搜到的网页、图片墙只显示在工具调用面板里，调用结束后面板通常会被折叠。最终回答只剩一段纯文字：

- 看不到搜到的图片，除非手动展开工具面板；
- 不知道哪句话出自哪个网页，没法一键跳转核对。

dsh-better-display 解决这两件事：

| 能力 | 效果 |
| 引用角标 | 模型把引用写成 1，渲染为上标小圆角标；悬停显示站点图标、域名和标题，点击在新标签页打开来源 |
| 来源面板 | 回答结束后在末尾汇总所有被引用的网页（按 URL 去重、按首次出现排序），可展开为卡片列表 |
| 正文配图 | 模型把 image_search / page_images / 网页结果中的相关图片以 说明 嵌入正文，渲染为带说明文字的图片；也支持 save_images 存到工作区后的本地路径 |
| 图集 | 同一行的 2 张以上图片自动排成网格图集 |
| 大图预览 | 点击图片全屏查看，可跳转原图，Esc 关闭 |
| 加载失败兜底 | 图片失效时退化为可点击的说明链接，不留破图 |
| 完整 Markdown | 基于 dsh-better-markdown 的 markstream-react 流式渲染：Shiki 代码高亮、Mermaid、KaTeX、表格、任务列表等全部保留 |

工作原理

插件分两半，不修改 Harness 源码：

宿主端 (lib/index.js)
systemPrompt.section("better-display:rich-answer")
└─ 告诉模型：引用写成 n，相关图片写成 说明

浏览器端 (lib/client.js)
conversation.chat.node / assistant-step
|- priority -110: dsh-better-display (active)
| markstream-react
| |- link n → 引用角标 + 悬停卡片
| |- image → 带说明的图片 / 图集 / 大图预览
| - code → stream-markdown + Shiki
| + 回答结束后的「来源」面板
|- priority -100: dsh-better-markdown (若已安装，被覆盖)
- priority 0: Harness 内置渲染 (fallback)

为什么由模型写入 Markdown，而不是直接读取工具结果？DSH 的 assistant 渲染器只能拿到本条消息的 text / reasoning / tool-call(name,args)，工具结果在另一种节点里。让模型把引用和图片写进正文，是最稳定、与搜索插件解耦的方式，任何带 URL 的工具结果（内置 web_search、web_fetch 或其它搜索插件）都能用。

与 dsh-free-search 联动（推荐）

两者分工：
- @copylee/dsh-free-search 负责找：19 个搜索引擎、multi_search / advanced_search / platform_search、image_search / page_images 搜图取图。结果带编号和直链，方便模型引用。
- dsh-better-display 负责展示：把模型引用的来源渲染成角标和来源面板，把挑选出的图片放进正文。

安装两者：

dsh plugin --profile web add @copylee/dsh-free-search
dsh plugin --profile web add @copylee/dsh-better-display
dsh --profile web

建议在 dsh-free-search 设置页打开搜图工具（image_search / page_images），然后直接这样问：

- 「介绍一下埃菲尔铁塔，配几张图，并标注信息来源」
- 「最近一周 DeepSeek 有什么新闻？每条注明出处」
- 「对比 iPhone 17 和 Pixel 10 的外观，附图」

回答里会出现上标角标 ¹ ² ³、正文图片 / 图集，末尾有「来源 · N」面板。

与 dsh-image-gen 联动

装上 @copylee/dsh-image-gen 后，智能体生成的图片会直接显示在回复正文里，而不是只给一个文件：

- 生图工具的结果带有 genimg:<任务 ID> 引用，本插件会在工具结果和系统提示里要求模型写成 说明。
- 图片按生成时的原始宽高比显示，不裁切；点击可放大。
- 后台生图（background: true，例如"讲讲高斯定理，配一张示意图"）期间显示同比例的"生成中"占位，文字照常流式输出；回复结束后图片才完成也没关系，占位会自动换成图片。失败时占位显示失败原因。
- 多张图并排成图集时也保持各自比例，不再裁成统一高度。

选中引用与旁问

在回答里选中文字或图片，会弹出一个小工具条：

- 添加到对话：把选中内容作为引用卡片贴到输入框上方，类似 ChatGPT 的引用。
- 公式、粗体、列表、表格、代码都按 Markdown 源码还原，卡片里正常渲染，不会变成乱码。
- 卡片可以展开、编辑（直接改 Markdown）或移除；输入框里只留一个小标签，发送时自动换成规整的 > 引用块。
- 选中内容里的图片（包括 dsh-image-gen 生成的图）以缩略图嵌在卡片里原来的位置，发送时作为图片附件交给模型；移除卡片时图片一并移除。单独点开图片预览「添加到对话」仍是普通附件。
- 旁问：针对选中内容问一个一次性问题（例如「解释一下」）。由一个不能使用工具的分支智能体在当前会话的上下文里回答，答案以气泡显示在输入框上方，支持公式和 Markdown，不会写进主对话。

这两个功能取代了 dsh-btw，两者同时安装会出现两个工具条，建议卸载 dsh-btw。设置里的「选中工具条」可以整体关闭。

重点框线

像 ChatGPT 那样，模型会用方框（$$\boxed{…}$$）突出关键公式、最终结果和核心结论，每条回答通常一到三处。设置里的「重点框线」可以关闭。

我的消息也渲染

- 自己发出的消息气泡按 Markdown 显示：公式、引用块、列表、代码都能正常渲染。纯文字消息保持原样；带 @文件、/技能 引用的消息仍用原生气泡显示。设置里的「渲染我的消息」可以关闭。
- 输入框里写了公式或 Markdown 时，上方会出现「预览格式」按钮，点开能看到渲染效果。

安装

本插件是 dsh-better-markdown 的超集，并以更低的 slot priority 覆盖它。安装本插件后建议移除 dsh-better-markdown，避免多打包一份：

dsh plugin --profile web remove dsh-better-markdown

与 dsh-genui 同样互斥：二者都替换 assistant 渲染器，只会生效一个（本插件优先级更高）。

从 npm 安装（推荐）

dsh plugin --profile web add @copylee/dsh-better-display
dsh --profile web --dump-config
dsh --profile web

从源码安装

需要 Node.js 20+、pnpm 10+：

git clone https://github.com/copylee711/dsh-better-display.git
cd dsh-better-display
pnpm install
pnpm run check
pnpm run build
dsh plugin --profile web add "$(pwd)"
dsh --profile web

Windows PowerShell 将 "$(pwd)" 替换为 (Get-Location).Path。

配置输出应包含：

== @copylee/dsh-better-display
- id: better-display
name: "@copylee/dsh-better-display"
config:
citations: true
inlineImages: true
maxImages: 4

移除

dsh plugin --profile web remove @copylee/dsh-better-display

卸载会同时撤下 prompt section 与 slot 覆盖，Harness 内置渲染器随即恢复。

配置

在 DSH 左侧栏「插件」页打开 @copylee/dsh-better-display，点组件行的配置按钮即可调整，保存后下一条回答就生效，不用重启：

| 选项 | 默认 | 说明 |
| 引用角标 citations | 开 | 让模型用 n 标注联网来源，显示为上标角标并汇总「来源」面板 |
| 正文配图 inlineImages | 开 | 让模型把搜到的相关图片嵌入回答 |
| 配图数量 imageCount | 由 AI 决定 | auto：模型按内容需要决定配几张（纯文字/代码类不配，外观对比、地点介绍等多配）；limit：限制每条回答最多张数 |
| 最多张数 maxImages | 8 | 1–20，仅在「限制最多」时生效 |

同样的字段也可以直接写在 profile 的 cordis.patch.yml 的 better-display 条目里（另有高级项 sectionOrder，默认 600，控制 system prompt 段落的排序）。两个开关都关闭时不注入任何 prompt，只保留增强渲染（已有的 1 链接和图片仍按新样式显示）。

安全

- 原始 HTML 一律转义（htmlPolicy="escape"）。
- 角标、链接、图片只接受 http(s) 地址；javascript:、相对路径等保持为不可点击文本。
- 图片与站点图标使用 referrerPolicy="no-referrer"，懒加载。
- system prompt 要求模型只引用本对话工具结果中真实出现过的 URL，不得编造；搜索结果本身仍由 dsh-free-search 标记为不可信内容。

开发

pnpm install
pnpm run check # tsc + vitest
pnpm run build
pnpm pack --dry-run

主要文件：

- src/index.ts：宿主端，注册「引用 / 配图」system prompt section，并在设置变更时即时刷新
- src/client/index.ts：注册 Markstream 组件与 assistant slot 覆盖
- src/client/renderer.tsx：assistant 渲染、引用角标、图片 / 图集 / 大图预览、来源面板
- src/client/citations.ts：引用解析（纯函数）
- src/client/settings.tsx：插件页里的设置表单（写回 profile 配置）
- src/client/workspace.ts：工作区图片路径解析（与 DSH 内置规则一致）
- src/client/styles.css：基于 DSH --dsw-* token 的样式，自动适配深浅色
- tests/：流式渲染、安全策略、引用 / 图片 / 来源面板、prompt section 测试

浏览器端分成三个文件：lib/client.js 随 DSH 启动加载；Mermaid（lib/client.mermaid.js）和代码高亮（lib/client.code.js）体积较大，在回答里第一次出现流程图或代码块时才由宿主按需加载。

兼容性

- DeepSeek Harness 0.2.0-rc.2 及以上。0.1.7 至 0.2.0-rc.1 请用 0.3.8，更早的版本请用 0.1.0
- React 18+

0.4.2 修复了附件栏的槽位委托问题（#1）：仅在有效的下层组件就绪后接管，跟随其注册和卸载，不再因找不到内置附件栏而抛错。无法安全复用的组件继续由宿主渲染；这种情况下，引用图片可能同时出现在引用卡片和原生附件栏中。

致谢

- dsh-better-markdown（MIT, © duskzhen）：Markstream 渲染管线、构建配置与样式基础
- dsh-genui：system prompt section + 自定义 assistant 渲染的思路
- markstream-react、DeepSeek Harness

许可证

MIT