dsh-chat-gutter: Dual-sided Marker Bands and Quick Navigation in the Chat Area

前言

在 DSH 里跑长对话时,工具调用、思考过程和用户提问往往混在同一条时间线里。靠肉眼扫正文找「这一回合从哪开始、答过哪些问、工具堆在哪」很费时间;官方滚动容器能翻页,但缺少按类型汇总的一键跳转。若只在脑子里记回合号,窗口一窄或过程组一折叠,锚点更容易丢。

下面介绍社区客户端插件 dsh-chat-gutter(维护者 lin114514-desng):在聊天列两侧空白带画标记,并在输入区提供两列「快速移动」面板。纯客户端,只读 DOM,不改官方聊天结构。

这是什么

dsh-chat-gutter 是 DeepSeek Harness 的 Web 客户端插件,当前包版本 0.2.29(MIT)。它解决两类问题:在长会话里快速识别回合与过程类型,以及从输入区附近跳到指定提问、工具小结、AI 回答或用户消息。

插件分类为客户端;实现上仅 require('react'),不依赖桌宠、图片素材或第三方模块。宿主需满足 dsh.engines.dsh = ">=0.2.1-rc.2"(README 以 DSH 桌面端 0.2.1-rc.2 为环境说明)。社区目录页:SkillHub 插件页;源码与说明:GitHub 仓库。

四条标记(双侧标识带)

标识带画在 document.body 下两层 position: fixed、宽 92px 的覆盖层里,pointer-events: none,不修改官方聊天 DOM。裁剪窗优先认 [data-conversation-scroll],再按 overflow-y 向上查找;空白不足约 104px 时整条带隐藏,面板与高亮仍可用的部分不受影响。

回合编号路标(右侧)

每个回合一枚 #1、#2… 纯文字路标,锚定用户自己发的那条消息,细竖线串成时间线,随滚动实时跟随。

过程徽标(左侧)

按回合聚合成一枚,文案形如 ⚙️工具数 ⌨️命令数 🧐思考数,没有的类不写。锚点优先官方回合汇总条,再退过程组头,最后退回该回合第一个工具行。另有 🤔提问(等待作答的提问卡)与 📦上下文压缩;已答提问在过程组「向用户提出了问题」一行留一枚 🤔。

回答段弧线与 ▶答

AI 完成工作后的整段正文左侧画花瓣形弧线,颜色取 --dsw-specific-accent;长度等于段落真实长度(两端各外延 4px),滚动时只随内容上下移动。▶答 徽标钉在弧线垂直中点,中点滚出可视区时贴到可见边缘,整段出窗时与弧线一起消失。

快速移动面板

输入区左侧有「快速移动」按钮,按钮上方(空间不够时翻到下方)弹出宽 340px、最高 320px 的两列浮层,挂在 document.body 下,不参与输入区排版。

打开方式有三种:

  1. 悬停:停约 0.12 秒弹出;移开按钮和面板约 0.35 秒后收起。
  2. 左键:点开再点收起;钉住时移开不收。
  3. 右键:打开并钉住。

点分类或条目后面板同样钉住,直到点面板外、按 Esc 或再点按钮。触屏无悬停,点按打开即可。

  • 左列:🤔 AI 提问、⚙️ 工具、▶️ AI 回答、💬 你的消息,每类后跟条数;空类变淡,右列显示「这一类还没有」。
  • 右列:1 · 摘要(摘要约 20 字);点编号跳到目标处并收起面板。跳转直接写聊天滚动容器的 scrollTop,目标行停在正文上沿下方 96px。
  • 底部:存在更早历史时出现 ⬆️ 加载更早,行为等同官方顶部按钮;无更早历史时不显示。

收起的过程组仍算面板里的一条;点编号会先展开该回合(官方 beforematch),再滚动;失败则退回该回合汇总行。「AI 提问」摘要从 React 内部数据读题干,尽量不展开折叠行以免页面跳动。

配置

侧栏「插件」→ dsh-chat-gutter 包详情 → 行 dsh-chat-gutter 的「配置」:

项 说明
启用左侧标识带 总开关;关闭会移除覆盖层、全部标记与正文高亮属性
回合编号路标 右侧路标开关
行级徽标 左侧过程徽标等
回答起点高亮 关闭 / 干完活后 / 总是

点「保存」写入宿主配置并立即生效。宿主解析不到 @deepseek-ai/schemastery 时,浏览器半边可按内置默认(三项全开、回答弧线「干完活后」)运行。

安装与启用

README 写明安装、启用、停用、重启见仓库内 INSTALL-PLAN.md,由用户在应用界面操作;资料中未给出 CLI 形式的 dsh plugin add … 命令,此处不臆造安装语句。

安装前建议阅读源码与 MIT 许可证,并确认插件以当前 DSH 进程权限在客户端注入运行;插件不读取会话数据、不发网络请求、不写 localStorage。

典型用法

  1. 启用插件并保存配置后,在长会话中观察右侧 #n 与用户消息对齐的时间线。
  2. 需要跳转到某次工具小结或 AI 回答时,打开「快速移动」,选左列类别,在右列点编号。
  3. 待答提问用左侧 🤔 或面板「AI 提问」定位;界面语言非中文时,「AI 提问」归类可能落到「工具」(README 已知边界)。
  4. 开发自检可在插件目录执行:
cd dsh-chat-gutter
node --check lib/client.js && node --check lib/index.js
pnpm test

适用场景与注意

适合:经常在 DSH Web/桌面聊天里处理多回合、多工具、长正文,需要侧栏路标和分类跳转的开发者。

注意:

  • 锚点依赖官方属性如 [data-chat-turn]、[data-chat-flow-kind] 等;官方 DOM 改版后需更新 lib/client.js 选择器。
  • 同一页面多个聊天流容器时,只跟随第一个可见容器。
  • 窗口过窄时标识带自动隐藏;快速移动与回答高亮逻辑仍按 README 说明工作。

结尾

dsh-chat-gutter 把回合编号、过程计数、回答段弧线和输入区两列跳转收进纯客户端一层,方便在长对话里定位而不改官方结构。进一步了解可访问 SkillHub 目录页 与 GitHub 仓库。DSH 社区插件目录为独立站点,与 DeepSeek / 幻方无官方从属关系。

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

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

Xiaoye