📝 docs(story): add Agora real-time speech transcription frontend component integration story

- create story for Agora STT React component integration
- define acceptance criteria for component functionality
- outline development tasks and subtasks
- document technical requirements and integration points
- specify testing strategy and quality standards

docs/stories/005.001.story.md

@@ -0,0 +1,162 @@
+# Story 005.001: Agora实时语音转录翻译前端组件集成
+
+**父史诗**: 史诗005 - Agora实时语音转录翻译集成
+docs/prd/epic-005-agora-real-time-speech-transcription.md
+
+## Status
+Ready for Development
+
+## Priority
+High - 新功能实现，增强用户体验
+
+## Story
+**As a** 前端开发者
+**I want** 集成Agora实时语音转文字前端组件
+**so that** 我可以在管理后台中提供语音输入转文字功能，增强用户体验和多媒体处理能力
+
+## Acceptance Criteria
+1. 实现Agora STT React组件 - 组件功能完整，支持加入/离开频道操作
+2. 集成WebSocket实时转录 - 实时接收和显示语音转文字结果
+3. 麦克风权限管理 - 浏览器麦克风权限申请和状态管理
+4. 错误处理和用户体验 - 完整的错误提示和用户反馈机制
+5. 测试覆盖和性能验证 - 组件测试覆盖率>80%，响应延迟<2秒
+
+## Tasks / Subtasks
+- [ ] 创建Agora STT React组件 (AC: #1)
+  - [ ] 实现组件基础结构和状态管理
+  - [ ] 集成Agora配置参数和认证信息
+  - [ ] 实现加入/离开频道功能
+- [ ] 集成WebSocket实时转录功能 (AC: #2)
+  - [ ] 实现WebSocket连接管理
+  - [ ] 处理实时转录结果推送
+  - [ ] 区分临时结果和最终结果展示
+- [ ] 实现麦克风权限管理 (AC: #3)
+  - [ ] 浏览器麦克风权限申请
+  - [ ] 媒体录制和音频流处理
+  - [ ] 麦克风状态指示器
+- [ ] 完善错误处理和用户体验 (AC: #4)
+  - [ ] 实现错误提示和用户反馈
+  - [ ] 添加加载状态和进度指示
+  - [ ] 优化界面交互和响应性
+- [ ] 实现组件测试和性能验证 (AC: #5)
+  - [ ] 编写单元测试和集成测试
+  - [ ] 验证转录延迟和准确率
+  - [ ] 性能基准测试和优化
+
+## Dev Notes
+
+### 技术栈和框架 [Source: architecture/tech-stack.md]
+- **前端框架**: React 19.1.0 + TypeScript
+- **UI组件库**: shadcn/ui + Tailwind CSS
+- **WebSocket**: 浏览器原生WebSocket API
+- **音频处理**: MediaRecorder API
+- **测试框架**: Vitest + Testing Library
+
+### 项目结构指导 [Source: architecture/source-tree.md]
+- **组件位置**: `src/client/components/agora-stt/`
+- **测试位置**: `src/client/components/agora-stt/__tests__/`
+- **类型定义**: `src/client/types/agora-stt.ts`
+- **工具函数**: `src/client/utils/agora-stt.ts`
+
+### Agora配置参数 [Source: docs/agora实时语音转录翻译参考文档.md]
+```typescript
+const AGORA_CONFIG = {
+  appId: 'f6ef0878d92340f88cff5c3e3d73bad2',
+  primaryCert: 'd16304cc8bb34bccbae589835141926f',
+  token: '007eJxTYKiOPOI+4+KN+V72elnHrV+a3WC++OCfrvXy1+x/6w7tPuypwGCWZm5ulmRmmWacZm6SbGZkkWJumJacaG5gYmGempiU6mp+NqMhkJHhtWEyAyMUgvjMDIZGxgwMAL7vIE0=',
+  channel: '123',
+  key: 'e40d60014fb7457aa6052c964a746adf',
+  secret: '8efd206266f541488725499165b78983',
+  sttJoinUrl: 'https://api.agora.io/v7/rtm/stt/join',
+  sttWsUrl: 'wss://api.agora.io/v7/rtm/stt/connect'
+};
+```
+
+### 核心功能流程
+1. **初始化阶段**: 组件挂载，准备Agora配置
+2. **加入频道**: 调用Agora STT API加入语音转文字频道
+3. **WebSocket连接**: 建立WebSocket连接接收实时转录结果
+4. **麦克风激活**: 申请浏览器麦克风权限并开始录制
+5. **实时转录**: 发送音频流，接收并显示转录结果
+6. **离开频道**: 清理资源，关闭连接
+
+### 技术约束和要求
+- **兼容性**: 支持Chrome、Edge等现代浏览器
+- **HTTPS要求**: 生产环境需要HTTPS协议
+- **性能要求**: 转录延迟<2秒，准确率>90%
+- **用户体验**: 响应式设计，支持移动端
+
+### 集成点
+- **现有UI系统**: 集成到shadcn/ui组件库
+- **认证系统**: 使用现有JWT认证机制
+- **状态管理**: 与现有React状态管理集成
+- **错误处理**: 统一错误处理机制
+
+## Testing
+
+### 测试策略 [Source: docs/architecture/testing-strategy.md]
+- **单元测试**: 组件逻辑和工具函数测试
+- **集成测试**: WebSocket连接和音频流处理测试
+- **E2E测试**: 完整语音转文字流程测试
+
+### 测试覆盖目标
+- **组件功能**: 100%覆盖核心功能
+- **错误处理**: 所有错误场景测试
+- **性能基准**: 转录延迟和准确率验证
+- **浏览器兼容性**: 主流浏览器测试
+
+### 测试数据
+- **模拟音频流**: 使用测试音频文件
+- **模拟转录结果**: 预定义的转录文本
+- **错误场景**: 网络异常、权限拒绝等
+
+### 测试工具
+- **Vitest**: 单元测试框架
+- **Testing Library**: React组件测试
+- **Mock Service Worker**: API模拟
+- **Playwright**: E2E测试
+
+## Change Log
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-09-23 | 1.0 | 初始故事创建 | John (PM) |
+
+## Dev Agent Record
+
+### Agent Model Used
+
+### Debug Log References
+
+### Completion Notes List
+
+### File List
+- `src/client/components/agora-stt/AgoraSTTComponent.tsx` - 主组件文件
+- `src/client/components/agora-stt/__tests__/AgoraSTTComponent.test.tsx` - 组件测试
+- `src/client/types/agora-stt.ts` - 类型定义
+- `src/client/utils/agora-stt.ts` - 工具函数
+- `src/client/hooks/useAgoraSTT.ts` - 自定义Hook
+- `src/client/components/agora-stt/index.ts` - 组件导出文件
+
+## QA Results
+
+### Review Date: 2025-09-23
+
+### Reviewed By:
+
+### Code Quality Assessment
+
+### Refactoring Performed
+
+### Compliance Check
+
+### Improvements Checklist
+
+### Security Review
+
+### Performance Considerations
+
+### Files Modified During Review
+
+### Gate Status
+
+### Recommended Status