DSH 群聊风格视图

将 DSH 的 AI 对话呈现为类似微信群聊的界面。每个角色有独立头像和气泡颜色，工具调用可折叠，子 Agent 以嵌套群聊展示，点击头像可查看模型参数和 Token 用量。

截图

欢迎贡献截图！安装后在群聊视图截图替换此处。

安装

方式一：从 GitHub 安装（推荐）

dsh plugin add github:tang-zhilei/dsh-group-chat-view

首次安装时 pnpm 会要求授权构建脚本（prepare 脚本会自动编译 TypeScript）。 DSH 会提示你将以下内容添加到 profile 的 pnpm-workspace.yaml 中：

allowBuilds:
  dsh-group-chat-view: true

然后重新执行 dsh plugin add 即可。

方式二：从本地路径安装

# 克隆仓库
git clone https://github.com/tang-zhilei/dsh-group-chat-view.git
cd dsh-group-chat-view

# 安装依赖并构建
pnpm install
pnpm bundle

# 安装到 DSH
dsh plugin add .

安装后

重启 DSH，在会话视图顶部会看到 「群聊」 标签，点击即可切换到群聊风格视图。

dsh web

功能

• 群聊风格：每个角色有独特的头像、昵称和气泡颜色
• 聊天气泡：消息以气泡形式展示，支持 Markdown 渲染（标题、代码块、表格等）
• 工具折叠：工具调用可折叠/展开，输入参数与输出结果自动合并为一张卡片
• 子 Agent 嵌套：子 Agent 任务以嵌套群聊形式展示，支持展开查看实时消息流
• 元数据查看：点击头像查看消息详细元数据（模型名、温度、Token 用量、耗时等）
• 深色模式：跟随 DSH 主题自动切换
• 国际化：支持中文 / 英文
• 自动滚动：滚动到底部后，新消息和流式内容自动跟随；离开底部时右下角出现「回到底部」按钮
• 自动折叠：顶部按钮可一键折叠所有工具消息或思考内容

角色映射

DSH 角色	群聊身份	说明
System	系统公告	黄色警告条，居中显示
Assistant	DeepSeek	浅灰色气泡，左侧
Tool	工具人	浅蓝色气泡，左侧，可折叠
User	我	绿色气泡，右侧
Reasoning	思考中	半透明紫色气泡，左侧
SubAgent	子 Agent	浅紫色气泡，嵌套展示

要求

• DSH（DeepSeek Harness）已安装
• Node.js >= 22.19.0 或 >= 24.0.0

已知限制

• 子 Agent 状态只有「运行中 / 完成」两档（DSH 目录无失败状态位）
• 元数据弹窗字段取决于 DSH 快照实际提供的数据，轨迹插件未加载时部分字段可能缺失

开发

# 克隆仓库
git clone https://github.com/tang-zhilei/dsh-group-chat-view.git
cd dsh-group-chat-view

# 安装依赖（需要 DSH 源码在同级目录，用于类型检查）
pnpm install

# 构建
pnpm bundle

# 类型检查
npx tsc --noEmit

# 开发模式（watch）
pnpm watch

开发模式下，构建产物替换到 ~/.dsh/profiles/web/node_modules/dsh-group-chat-view/lib/client.js 后，DSH 的 client-hmr 会自动加载新版本，无需刷新页面。

项目结构

src/
├── index.ts                    # 服务端入口
└── client/
    ├── index.ts                # 客户端入口，注册视图
    ├── GroupChatView.tsx       # 主视图组件
    ├── components/             # UI 组件
    │   ├── MessageList.tsx     # 消息列表 + 滚动逻辑
    │   ├── MessageBubble.tsx   # 消息气泡
    │   ├── MessageContent.tsx  # Markdown 渲染
    │   ├── ToolCallCard.tsx    # 工具调用卡片
    │   ├── SubAgentPanel.tsx   # 子 Agent 任务面板
    │   ├── SubAgentChat.tsx    # 子 Agent 嵌套群聊
    │   ├── MetadataPopup.tsx   # 元数据弹窗
    │   ├── Avatar.tsx          # 头像
    │   └── SystemNotice.tsx    # 系统公告
    ├── hooks/                  # React Hooks
    ├── utils/                  # 消息解析、元数据提取
    ├── config/                 # 头像配置
    ├── locales/                # 中英文翻译
    └── styles/                 # 样式（CSS Modules + 变量）

许可证

MIT License