Preface¶

In the conversation flow of DSH Web UI, assistant messages by default do not have avatars and names. When the chat history gets long, it is difficult to distinguish the source of each message. To fill in this gap on the interface, directly modifying the DOM is prone to failure after React re-renders. DSH’s philosophy is “everything is a plugin,” and interface customization can be similarly delegated to plugins. The dsh-whale-avatar introduced below follows this path: pure CSS injection, and the effect remains after re-renders.

What is this¶

dsh-whale-avatar is a pure client plugin for DSH Web UI, maintained by lhjlol, with code hosted on GitHub (see the address at the end of the article). It does one thing only: adds avatars and names to every assistant message—the avatar is the App icon, paired with the image of the “blue whale that eats for free.”

According to the repository’s package.json information, the current version is 0.1.0, private: true, and the platform is web.

Implementation¶

The plugin’s implementation can be broken down into four points:

The target element is the assistant message node in the official web application, with the selector [data-chat-flow-kind="assistant-step"];
The injection method is placing a style tag on the page containing only one CSS rule, using the ::before pseudo-element to render “avatar + name,” without making any DOM changes;
Since only CSS is modified, the effect persists after React re-renders, and the styles follow the light/dark theme tokens;
The avatar is a 56px PNG embedded in a 28×28 SVG data URI, remaining clear on Retina screens.

Not touching the DOM structure means installation and uninstallation are clean: when uninstalling, the CSS is removed, and the interface returns to its original state.

Installation and Activation¶

There are two ways: install via the Oh-DSH Desktop plugin marketplace, or use the command line:

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

The <name> in the command is a placeholder from the original text; replace it with your own profile name. After installation, the runtime will automatically restart, and the changes take effect once the restart is complete.

Uninstallation¶

Simply uninstall it from the plugin list in the marketplace; the injected CSS will be removed along with it, so no manual cleanup is needed.

Plugin Structure¶

If you want to read the source code, the repository structure is quite straightforward:

lib/client.js: Browser side, __ModuleLoader__ format, all logic is here;
lib/index.mjs: Node side, empty apply, meaning this is a pure client plugin;
cordis.patch.yml: bundle patch, responsible for inserting this plugin into the composition.

The configuration related to injection in package.json is as follows:

{
  "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"
  }
}

That is, the client-side injection targets are the three packages @deepseek-ai/dsh-client-connection, @deepseek-ai/dsh-client-runtime, and @deepseek-ai/dsh-api-remotes, with cordis ^4.0.0-rc.7 as the peer dependency.

Applicable Scenarios and Notes¶

Suitable for users who want assistant messages in DSH Web UI to have avatars and names but do not want to modify the frontend source code: install to activate, uninstall to revert.

There are two reminders before installation:

The plugin runs with the permissions of the current DSH process; the client-side code runs in your browser. It is recommended to read through the repository source code first before deciding whether to install;
The license is not mentioned in the documentation. Please check the repository yourself before use to confirm the license terms.

Summary¶

dsh-whale-avatar solves the problem of assistant messages lacking avatars and names with a single CSS rule: lightweight implementation, reversible, and no loss of effect after re-renders. For code and documentation, see the GitHub repository: https://github.com/lhjlol/dsh-whale-avatar , or search for and install it in the Oh-DSH Desktop plugin marketplace.

dsh-whale-avatar: Add avatars and names to DSH Web UI assistant messages