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

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

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