# Proposal: 在AI调解实时看板增加通话记录查看功能

## Change ID
`add-call-record-viewer`

## Summary
在AI调解实时看板的每条调解记录中增加"通话记录"查看功能，允许调解员查看AI调解员与当事人（申请人/被申请人）的外呼通话详情，包括录音播放和文字对话记录。

## Why
当前AI调解实时看板仅展示调解记录的文字摘要，调解员无法了解AI调解员与当事人之间具体的通话内容和沟通过程。通过增加通话记录查看功能，调解员可以：
- 回顾AI调解员与当事人的完整对话过程
- 了解当事人的真实诉求和态度变化
- 为后续人工介入调解提供更全面的背景信息
- 作为调解过程的重要证据留存

## What Changes
- **前端UI变更**
  - 在每条调解记录的角色名称后增加"通话记录"胶囊按钮
  - 新增通话记录详情弹窗组件
  - 弹窗顶部显示录音文件播放器
  - 弹窗中间区域展示双方对话记录（类似微信聊天界面）

- **API集成**
  - 调用 `OutboundBotAPIService.getConversationLog` 获取通话记录
  - 处理多种外呼状态的展示逻辑

- **交互逻辑**
  - 已接通状态：显示完整通话记录和录音播放
  - 未接通状态：显示提示信息"未接通，无通话记录"

## Impact
- **受影响的规格**
  - 新增能力：`call-record-viewer`（通话记录查看）

- **受影响的代码**
  - `web-app/src/components/dashboard/TabContainer.jsx` - MediationBoard组件增加通话记录按钮和弹窗
  - `web-app/src/services/OutboundBotAPIService.js` - 确认getConversationLog接口参数
  - `web-app/src/components/dashboard/TabContainer.css` - 新增通话记录弹窗样式

## Stakeholders
- 调解员：主要使用者，需要通过通话记录了解调解过程细节
- 系统管理员：关注通话记录数据的安全性和准确性
- 产品负责人：确保功能符合业务需求

## Success Criteria
- 每条调解记录后正确显示"通话记录"胶囊按钮
- 点击按钮能正确弹出通话记录详情弹窗
- 弹窗标题正确显示"AI调解员与xxx（角色名）的通话"
- 已接通状态能正确播放录音和展示对话记录
- 未接通状态显示正确的提示信息
- 对话记录以类似微信聊天的样式展示，能区分双方
- API调用失败时有合理的错误提示

## Risks & Mitigations
- **风险**：录音文件加载失败或格式不支持
  - **缓解**：提供明确的错误提示，支持用户手动重试
- **风险**：大量通话记录数据导致加载缓慢
  - **缓解**：按需加载，仅在点击按钮时请求数据
- **风险**：不同浏览器音频播放兼容性
  - **缓解**：使用HTML5标准audio标签，提供格式兼容性检测

## Dependencies
- 已存在的 `OutboundBotAPIService.getConversationLog` API
- `ProcessAPIService.getProcessRecords` 返回的调解记录数据结构（需包含person_id和job_id）
- 案件数据Context中的caseId

## Timeline
预计开发时间：2个工作日
- UI设计与开发：1天
- API集成与联调：0.5天
- 测试与优化：0.5天

## Alternatives Considered
1. **在外呼气泡组件中查看通话记录**：与调解记录脱节，用户体验不连贯
2. **跳转到独立的通话记录页面**：增加页面跳转复杂度，不符合快速查看的场景
3. **仅在已接通记录显示按钮**：未接通状态用户无法了解情况，信息不完整

选择在调解记录卡片内直接查看的方式，保持用户操作的连贯性和上下文关联。