agentscope-ai / agentscope-ai/QwenPaw

[Feature] 智能体办公室加入对话和会话切换功能

Offen
#5,327 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
enhancement
Vorherrschende Sprache
TypeScript
Sterne
35k
Forks
3.1k
Ø Merge
1 T. 13 Std.
Gemergte PRs (30 T.)
228

Beschreibung

## 功能描述

在「智能体办公室」页面中,每个 agent 卡片上增加「💬 对话」按钮,点击后可以直接与该 agent 进行对话,并支持在不同 session 之间切换。

## 当前痛点

智能体办公室页面目前只能查看各 agent 的运行状态(idle/running/disabled),但无法直接与 agent 交互。要和某个 agent 对话,必须:
1. 切换到对应的 agent 视图
2. 或者使用 CLI 命令

这在管理多个 agent 时非常不便,尤其是在监控 agent 状态时发现异常想立即介入时。

## 期望行为

### 核心功能
1. **对话按钮** — 每个 agent 卡片上增加「💬 对话」按钮
2. **聊天抽屉** — 点击后弹出侧边聊天面板(复用现有 `SessionDrawer` 组件)
3. **会话列表** — 显示该 agent 的所有 session,支持切换
4. **消息收发** — 在抽屉中直接发送消息、查看回复

### 交互细节
- 点击「💬 对话」按钮 → 从右侧滑出聊天面板
- 面板顶部显示 agent 名称和头像
- 面板左侧显示 session 列表(可折叠)
- 选择 session 后加载历史消息
- 底部输入框支持发送消息
- 支持新建 session(「+ 新建对话」按钮)
- 支持关闭面板(× 按钮)

### UI 参考
类似现有的「对话」页面的 `SessionDrawer` 组件,但以 overlay/drawer 形式嵌入到智能体办公室页面中。

## 后端支持

后端 API 已经具备完整支持,无需新增后端接口:

| 接口 | 方法 | 说明 |
|------|------|------|
| `/api/agents/{agentId}/chats` | GET | 列出 agent 的所有会话 |
| `/api/agents/{agentId}/chats` | POST | 新建会话 |
| `/api/agents/{agentId}/chats/{chatId}/send` | POST | 发送消息 |
| `/api/agents/{agentId}/chats/{chatId}/history` | GET | 获取历史消息 |
| `/api/agents/{agentId}/status` | GET | 获取 agent 状态 |

## 技术方案

### 前端改动
1. 在 `console/src/pages/` 的智能体办公室页面组件中:
- 为每个 agent 卡片添加「💬 对话」按钮
- 点击按钮时打开一个 `Drawer` 组件

2. 复用现有的聊天组件:
- `SessionDrawer` — 会话列表和聊天界面
- `useChats` hook — 管理会话状态
- `useSendChatMessage` hook — 发送消息

3. 状态管理:
- 当前选中的 agent ID
- 当前选中的 session ID
- 聊天消息列表

### 代码结构建议
```
console/src/pages/
AgentOffice/
index.tsx # 主页面
AgentCard.tsx # agent 卡片(新增对话按钮)
ChatDrawer.tsx # 聊天抽屉(新增组件)
```

## 影响范围

- **UI 变更**:智能体办公室页面新增交互元素
- **后端变更**:无
- **API 变更**:无(复用现有 API)
- **兼容性**:不影响现有功能

## 优先级

**中等** — 不影响核心功能,但显著提升多 agent 管理体验。

## 替代方案

用户目前可以通过以下方式与 agent 对话:
1. 切换到对应 agent 的视图
2. 使用 CLI 命令 `qwenpaw agents chat`
3. 通过 Discord/钉钉等频道

但这些方式都不够直观,尤其在需要快速介入时。

## 截图/原型

建议的交互流程:
```
[智能体办公室页面]
┌─────────────────────────────────────┐
│ 🤖 助理 (idle) [💬对话] [⚙️设置] │
│ 📋 项目总监 (running) [💬对话] [⚙️] │
│ 🎨 策划师 (idle) [💬对话] [⚙️设置] │
│ 💻 主程序 (running) [💬对话] [⚙️设置] │
└─────────────────────────────────────┘

点击「💬对话」后:
┌──────────────────────────┬────────────┐
│ │ 💬 项目总监 │
│ [智能体办公室] │ ┌──────────┤
│ │ │ Session1 │
│ │ │ Session2 │
│ │ │ Session3 │
│ │ ├──────────┤
│ │ │ 消息内容 │
│ │ │ │
│ │ │ │
│ │ ├──────────┤
│ │ │ 输入框 │
│ │ └──────────┘
└──────────────────────────┴────────────┘
```

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Start with console/src/pages/AgentOffice/index.tsx and AgentCard.tsx, then inspect the existing SessionDrawer, useChats, and useSendChatMessage implementations. Connect the agent card button to the drawer and existing chat APIs, including session selection, history, sending, and new sessions. Done means each card opens the correct agent chat without backend changes and the office page continues to work.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
typescript
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Ruhig
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
62/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.