dsh-group-chat-view

Readme

# DSH 群聊风格视图

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

## 截图

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

## 安装

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

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

> 首次安装时 pnpm 会要求授权构建脚本（`prepare` 脚本会自动编译 TypeScript）。
> DSH 会提示你将以下内容添加到 profile 的 `pnpm-workspace.yaml` 中：
> ```yaml
> allowBuilds:
>   dsh-group-chat-view: true
> ```
> 然后重新执行 `dsh plugin add` 即可。

### 方式二：从本地路径安装

```bash
# 克隆仓库
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，在会话视图顶部会看到 **「群聊」** 标签，点击即可切换到群聊风格视图。

```bash
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 快照实际提供的数据，轨迹插件未加载时部分字段可能缺失

## 开发

```bash
# 克隆仓库
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