dsh-user-message-jump:在 DSH Web 会话左侧显示用户消息跳转竖带

前言

在 DSH 的 Web 客户端里,一条长会话往往由多段模型输出和用户消息交错组成。想回看「我当时问了什么」,只能一路向上滚动,消息越多这件事越费时。Codex 的会话界面在左侧提供了一条目录导航,点一下就能跳到对应消息,这个做法可以借鉴。

dsh-user-message-jump 把类似的能力带进 DSH Web 客户端:在会话区左缘显示一条竖带,每条短横线代表一条用户消息,悬停可预览,点击即跳转。下面介绍它的功能、安装方式和注意事项。

这是什么

dsh-user-message-jump 是一个 DSH Web 客户端插件,由 jiangnan-awa 维护,当前版本 0.1.0,许可证为 MIT(README 与 package.json 均有声明)。

它解决的是一个具体问题:长会话中快速定位用户消息。插件不改动会话内容,只在客户端界面上加一条导航竖带。

核心功能

按 README 描述,插件行为如下:

  • 竖带与横线:会话区左缘出现约 14px 宽的竖带,每条短横线代表一条用户消息,既包括普通 user 消息,也包括运行中插入的 steering 消息,从上到下按时间排列。
  • 悬停预览:横线平滑变长(12px → 36px)并变为品牌色,右侧弹出气泡,显示消息文本预览(最多 3 行)与发送时间。
  • 点击跳转:会话滚动到对应消息,顶部留 12px 空隙;该消息行以品牌色描边高亮约 1.2 秒,对应横线保持高亮标记。
  • 命中区与穿透:横线之间为无缝命中区(每个命中区 8px 高),鼠标在相邻横线间移动不会「选空」;竖带空白处点击穿透,不遮挡会话内容。
  • 自动隐藏:没有用户消息时竖带自动隐藏。
  • 键盘操作:Tab 聚焦后按 Enter 或 Space 跳转。
  • 主题跟随:样式仅使用 DSH 主题 token(如 --dsw-alias-bg-overlay--dsw-alias-brand-primary),跟随亮/暗主题。

安装与启用

先构建。仓库已提交 lib/client.js,可直接使用;如需修改源码,改完后再构建一次:

npm run build

再通过 DSH 官方安装命令把插件装进 profile 的 bundle 栈。本包声明了 dsh.bundle(即 cordis.patch.yml 包级补丁层),所以可以直接装:

dsh plugin --profile <name> add dsh-user-message-jump

这条命令等价于在 profile 的 cordis.patch.yml 中手工挂载:

- insert:
    - id: user-message-jump
      name: dsh-user-message-jump

注意:如果 profile 里已经有上面这段手工挂载行,改用 bundle 通道前要先删掉它,避免双挂载。

经过上面的步骤,重启 DSH。Web 端会通过 dsh.client 扫描把本包编入启动图(路径形如 /plugins/<name>/client.js?rev=<hash>),刷新页面后生效。

环境要求

  • DSH 版本需支持 web 客户端模块系统(dsh.client / window.__ModuleLoader__);
  • 运行环境需包含 react(seed 模块,peerDependencies 为 ^18.2.0)与声明了 conversation.session.header.actions 槽位的会话 UI 包(DSH 自带);
  • Node >= 18。

源码与二次开发

仓库结构如下:

├── package.json        # dsh.bundle 声明 + dsh.client 声明 + exports["./client"]
├── cordis.patch.yml    # dsh.bundle.patch 包级补丁层(一行 insert)
├── src/
   ├── client.js       # 插件源码(纯 JS,createPlugin(React) 工厂)
   └── style.css       # 竖带样式(仅使用 DSH 主题 token)
├── scripts/
   └── build.mjs       # 打包为 window.__ModuleLoader__.load 格式
├── lib/
   └── client.js       # 构建产物(已提交,扫描时需要存在)
└── README.md

修改源码后执行 npm run build,会重新生成 lib/client.js,产物带内容哈希 rev,页面会自动取新包。

另外,同一功能也可以作为动态 Cordis 插件免安装临时加载。代码形态略有差异:CSS 用 styles.insert,定时器走 ctx.timerinject: ['timer']),无需 __ModuleLoader__ 包装,具体见 DSH 的 cordis 插件开发文档。

适用场景与注意事项

适合两类人:经常在 DSH Web 客户端跑长会话、需要回溯自己消息的使用者;想在 DSH 客户端上做类似导航能力的开发者,可以把它当作一个可参考的完整样例——从 dsh.bundle 声明到客户端模块打包、再到主题 token 的使用,仓库里都有对应文件。

安装前请注意:插件以当前 dsh 进程的权限运行,装进 profile 前应先检查源码与许可证。本插件的许可证为 MIT,源码在 GitHub 上可查。此外确认 profile 里没有重复的手工挂载行,运行环境满足上文列出的版本要求。

小结

dsh-user-message-jump 做的事情小而具体:把用户消息变成一条可点击的目录竖带,省掉长会话里来回滚动的时间。它的打包与挂载方式也符合 DSH「一切皆插件」的思路,想写自己的客户端插件,可以直接参考这个仓库。

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye