前言¶

DSH Web UI 的对话流里，助手消息默认不带头像和名字，聊天记录一长，读起来不容易分清每条消息的来源。想在界面上补上这一块，直接改 DOM 的做法在 React 重渲染后容易失效。DSH 的理念是「一切皆插件」，界面定制同样可以交给插件来做。下面介绍的 dsh-whale-avatar 走的就是这条路：纯 CSS 注入，重渲染不会丢效果。

这是什么¶

dsh-whale-avatar 是一个面向 DSH Web UI 的纯 client 插件，由 lhjlol 维护，代码托管在 GitHub（地址见文末）。它只做一件事：给每条助手消息加上头像与名字——头像是 App 图标，配上「吃白饭的蓝色大肥鱼」的形象。

按仓库 package.json 的信息，当前版本为 0.1.0，private: true，平台为 web。

实现方式¶

插件的实现可以拆成四点：

1、目标元素是官方 web 应用的助手消息节点，选择器为 [data-chat-flow-kind="assistant-step"]；
2、注入方式是往页面放一个 style 标签，里面只有一条 CSS 规则，用 ::before 伪元素渲染「头像 + 名字」，不做任何 DOM 改动；
3、因为只动 CSS，React 重渲染后效果依然在，样式跟随日间/夜间主题令牌；
4、头像是 56px 的 PNG 包进 28×28 SVG 的 data URI，Retina 屏下依然清晰。

不碰 DOM 结构，意味着安装和卸载都干净：卸载时 CSS 移除，界面即恢复原样。

安装与启用¶

两种方式：通过 Oh-DSH Desktop 插件市场安装，或者用命令行：

dsh plugin --profile <name> add github:lhjlol/dsh-whale-avatar

命令里的 <name> 是资料原文中的占位符，替换成你自己的 profile 名即可。安装完成后运行时会自动重启，重启结束即生效。

卸载¶

从市场的插件列表里卸载即可，注入的 CSS 会随之移除，不需要手动清理。

插件结构¶

想读源码的话，仓库结构很直接：

• lib/client.js：浏览器半，__ModuleLoader__ 格式，全部逻辑在这里；
• lib/index.mjs：Node 半，空 apply，也就是说这是纯 client 插件；
• cordis.patch.yml：bundle patch，负责向组合插入本插件行。

package.json 中与注入相关的配置如下：

{
  "dsh": {
    "bundle": {
      "patch": "./cordis.patch.yml"
    },
    "client": {
      "inject": [
        "@deepseek-ai/dsh-client-connection",
        "@deepseek-ai/dsh-client-runtime",
        "@deepseek-ai/dsh-api-remotes"
      ],
      "platform": "web"
    }
  },
  "peerDependencies": {
    "cordis": "^4.0.0-rc.7"
  }
}

也就是 client 侧注入目标为 @deepseek-ai/dsh-client-connection、@deepseek-ai/dsh-client-runtime、@deepseek-ai/dsh-api-remotes 三个包，peer 依赖为 cordis ^4.0.0-rc.7。

适用场景与注意¶

适合想让 DSH Web UI 的助手消息带上头像和名字、又不想修改前端源码的用户：装上生效，卸掉还原。

安装前有两点提醒：

1、插件以当前 dsh 进程的权限运行，client 部分的代码会跑在你的浏览器里，建议先通读一遍仓库源码再决定是否安装；
2、资料中未提及许可证，使用前请到仓库自行确认授权条款。

小结¶

dsh-whale-avatar 用一条 CSS 规则解决了助手消息没有头像和名字的问题：实现轻、可逆、重渲染不丢。代码与说明见 GitHub 仓库：https://github.com/lhjlol/dsh-whale-avatar ，也可以在 Oh-DSH Desktop 插件市场中查找安装。