鲸鱼对话视图 0nlyLetter/dsh-whale-dialog

Whale Dialog

为 DeepSeek Harness（DSH）Web GUI 打造的蓝色视觉小说对话视图。它把普通的聊天记录换成单个对话框、一张会随对话做出反应的鲸鱼少女立绘，以及框内输入区，同时保留对话的记忆。

作者：0nlyLetter。

| 待机 | 思考 | 说话 | 开心 | 难过 |

中文说明

功能

- 一次只显示一条回复 —— 最新的助手回合显示在视觉小说框里；更早的内容只是视觉上被替换，并没有从对话中删除。
- 海底舞台 —— 分层水光、丁达尔光柱、漂游的鲸鱼剪影、一小群鱼、气泡、海床剪影和海带，外加框后一层柔和光晕。CSS 动画节奏缓慢，并带有 reduced-motion 回退。
- 蓝白相间的边框 —— 斜切双线框、缎带蝴蝶结、蕾丝花边、铆钉、纸鲸水印，以及立绘下方居中的名牌。
- 五种表情 —— 待机、思考、说话、开心、难过。前三种跟随回合生命周期（等待 / 回复中 / 空闲）；开心和难过由最新一条用户消息选出，用一套简单的关键词加 emoji 情感启发式判断，然后在回复落定后显示几秒。
- 打字机式逐字显示 —— 点击（或点击文字）立即显示整条回复；开启 reduced-motion 的用户直接看到全文。
- 轻柔提示音 —— 新的助手回合到来时播放一段简短的 Web Audio 提示音；可在设置中关闭。
- 框内输入区 —— 文本加发送、附件、模型选择器、推理强度滑块和权限切换，全程不用离开对话框。
- 设置页 —— 上传立绘、修改名字、把立绘移到任意一侧、调整框宽和字号、开关提示音。

环境要求

- 已安装 DSH，并带有 Web GUI 和客户端插件包（conversation.view / settings.section 插槽）。
- Node.js 18+，用于构建和测试。插件本身没有运行时依赖。
- 用于 Web GUI 的现代 Chromium 内核浏览器。

快速开始

git clone https://github.com/0nlyLetter/dsh-whale-dialog.git
cd dsh-whale-dialog
npm run build
npm test

构建会读取 tools/client.template.js 和 assets/ 里的五张 JPEG，把它们嵌入为 data URL，写出单文件客户端包 client.js。不需要打包器，也不用安装依赖。

选择目标对话

默认情况下，视图在每个对话里都可用：启用插件，打开一个对话，从视图切换器里选 鲸鱼对话。无需改动源码。
要把视图锁定到一个会话，在 tools/client.template.js 里设置它的 id：

const TARGET_SESSION = 'session-...'

然后用 npm run build 重新构建。插件会为这个会话预置视图偏好，其他会话仍保留正常的聊天界面，只多出一张小巧的提示卡片。

会话 id 就是 DSH 在会话偏好键里用的那个 id（dsh.conversation.<sessionId>）；你可以从 Web GUI 的本地存储里读取，也可以从会话 URL 里读取。想快速试用的话，把目标留空即可——这个仓库里没有 API key，也没有账号凭据。

作为本地 DSH 插件安装

这个包是 DSH 客户端插件 bundle。把仓库文件夹放到你的 DSH 配置档能解析包名 @local/dsh-whale-dialog 的位置（链接或复制到配置档的本地包目录即可），然后注册 cordis.patch.yml 里附带的 bundle 行：

- insert:
- id: whale-dialog
name: '@local/dsh-whale-dialog'

在配置档里启用它，再重新加载 Web GUI。插件会在视图切换器里注册一个 鲸鱼对话 入口。在任意会话里选中它即可；如果想让某个会话默认选中、其他会话隐藏，就设置 TARGET_SESSION。

也可以通过 DSH 的 Plugins → Add plugin 对话框从 Git 仓库安装这个插件（选 Git 仓库选项，粘贴仓库 URL），装完再启用。默认构建在安装时不需要编译步骤。

使用输入区

框内工具栏对应官方 DSH 输入区的关键部分：

- 附件 —— 图片和文件走与官方输入区相同的草稿附件流程。它们在后台上传；上传就绪前发送按钮保持禁用，上传失败的附件会在标签上标出。
- 模型 —— 按服务商分组列出当前会话可用的模型，用的是与官方输入区相同的按会话模型目录。选择结果作用于下一次请求。
- 推理强度 —— 磁吸滑块：滑块跟随指针连续移动，松手后滑到最近的可用强度档位。点击刻度或用方向键可以逐档移动。
- 权限 —— 通过官方 /permission 命令切换当前会话。可选 Read Only / Workspace Write / Full access；选 Full access 会先要求二次确认。

设置

打开视图右上角的齿轮（或插件的设置区）：

- 上传头像，支持预览和确认
- 名牌文字（默认 deepseek）
- 头像在左或在右
- 边框宽度和对话字号
- 提示音开关

设置存在 localStorage 的 dsh.whale-dialog.settings 下；配置了目标会话时，头像和名字使用按会话的键。

项目结构

.
├─ client.js generated single-file client bundle (committed)
├─ cordis.patch.yml bundle patch that inserts the plugin row
├─ index.js 宿主部分（不含宿主行为） ├─ icon.svg ├─ locale/{en,zh}.json ├─ assets/ 五张方形角色肖像 JPEG ├─ tools/ │ ├─ client.template.js 客户端插件的唯一来源 │ ├─ build.mjs 内嵌肖像并写出 client.js │ ├─ test_client.mjs 渲染 / 肖像 / 设置检查 │ ├─ test_send.mjs 发送路径与框内设置检查 │ ├─ test_typing.mjs 打字机逐字显示检查 │ ├─ test_emotion.mjs 情绪反应检查 │ └─ check_css.mjs CSS 结构检查 └─ package.json

开发说明

- npm run build 是幂等的：每次都从模板和资源重新生成 client.js。
- npm test 用极简的假 React 测试框架跑生成的产物，不需要浏览器。
- 客户端是单个 ES 模块，通过 window.__ModuleLoader__.load(...) 加载。它注册两项：
- conversation.view（id whale-dialog，order 20）—— 视觉小说视图；
- settings.section（id whale-dialog，order 40）—— 设置页。
- 角色立绘放在 assets/；替换这五张 JPEG（最好用方形）后重新构建，就能换成你自己的角色。
- 输入栏控件依赖 DSH 客户端服务（modelDirectories、conversation）和 /permission 命令。它们刻意做得很薄；如果未来 DSH 版本改了这些内部实现，文本/发送路径和视图仍能工作，但某个控件可能需要更新。

安全与隐私

本仓库不含任何 API key、token 或凭据。插件完全运行在 Web GUI 里，使用宿主已有的认证；它从不读取或存储服务商凭据。偏好设置和肖像保存在浏览器的 localStorage 中。

情绪检测器是本地关键词/emoji 启发式规则。它不调用模型，也不把你的消息发到任何地方。

已知限制

- 默认每个会话都显示该视图；设置 TARGET_SESSION 可限制为单个会话。没有多会话仪表盘。
- 开心/难过反应是近似判断，且刻意保守；中性消息保持待机肖像。
- 框内输入栏只用了官方输入栏的子集（框内没有斜杠命令面板、队列控件、停止按钮或图片预览）。需要这些功能时，下方仍可使用官方输入栏。
- 已在 Windows 上配合 DSH Web GUI 的 Chromium 运行时测试；其他平台应该可用，但未验证。
- 推理强度滑块只在所选模型声明支持强度等级时出现。

许可证

源代码以 MIT License 发布。

assets/ 中的角色美术由项目作者提供，用于本项目的演示。它不在 MIT 许可证覆盖范围内；在其他地方复用这些美术前，请先询问作者。

中文说明

这是一个给 DeepSeek Harness Web GUI 用的蓝色视觉小说对话框插件：把普通聊天记录换成一屏一句的对话框、右侧角色立绘和框内输入栏，同时保留完整对话记忆。
- 海底舞台：水面光、光柱、远处的鲸鱼、鱼群、气泡、海床与海草
- 蓝白双层框体：蝴蝶结、蕾丝边、铆钉、纸鲸鱼水印、立绘下方的居中名字牌
- 五套表情：待机、思考、说话、开心、难过；开心/难过按你最近一句话的情绪粗略判断
- 逐字浮现，点击立即显示全文；新回复有轻提示音
- 框内输入栏：附件、模型、推理强度滑条（跟随鼠标、松手吸附）、权限
- 设置页可换立绘、改名字、立绘左右、框体宽度、字号、提示音

安装：npm run build 生成 client.js，把仓库目录作为本地包 @local/dsh-whale-dialog 接入 DSH profile，启用 cordis.patch.yml 里的插件行。默认所有对话都能用，从视图菜单选「鲸鱼对话」即可；如果只想限定某个会话，再把 tools/client.template.js 里的 TARGET_SESSION 换成会话 id 并重新 build。

代码使用 MIT 协议；assets/ 中的角色图片仅用于本项目展示，不在 MIT 授权范围内。