PPT/openspec/changes/dialogue-chat-engine/proposal.md

Why

当前 DialogueChatView.vue 的对话逻辑全部基于硬编码的 mock 脚本，没有真实的录音采集、LLM 对话、发音评估能力。要实现完整的英语口语对话功能，需要：

• 前端：将对话引擎从 UI 层解耦，建立三层架构，处理录音 → 上传 → 流式回复的完整 pipeline
• 后端：新建独立编排服务 cococlass-english-speaking-api，串联 ASR、LLM、发音评估

What Changes

前端

• 新增 llmService.ts：API 通信层，封装 fetch + ReadableStream 实现流式 SSE 读取
• 新增 useDialogueEngine.ts：Vue composable，管理对话状态机（loading / done / error）
• 新增 useAudioRecorder.ts：Vue composable，封装 MediaRecorder API 实现录音采集
• 重构 DialogueChatView.vue：移除所有 mock 逻辑，改为纯 UI 层
• 扩展 PreviewChatMessage 类型：新增 status（loading/done/error）、error、audioBlob 字段
• 新增 TTS：AI 消息完成后调用 Web Speech API 朗读（v1）
• 新增倒计时：支持限制对话时间，时间到后让当前轮完成再自动结束（纯前端，不影响后端）

后端（cococlass-english-speaking-api）

• POST /session：创建对话 + AI 开场白
• POST /speak：接收音频 → ASR 转录 → LLM 流式回复（SSE）→ 后台静默发音评估
• GET /report：返回完整对话历史 + 评估结果
• init.sql：3 张表建表脚本（DialogueSession / DialogueMessage / PronunciationEvaluation），git 管理，手动执行

Capabilities

New Capabilities

• dialogue-engine: 对话引擎核心——消息状态机、轮次控制、重试、流式输出
• audio-recording: 录音采集——MediaRecorder 封装、权限处理
• llm-streaming: LLM 流式通信——fetch + ReadableStream SSE 解析、超时控制、错误处理

Modified Capabilities

(无已有 specs 需要修改)

Impact

• 前端受影响文件：
  • src/views/Editor/EnglishSpeaking/preview/DialogueChatView.vue（重构）
  • src/types/englishSpeaking.ts（扩展类型）
  • src/views/Editor/EnglishSpeaking/preview/TopicDiscussionPreview.vue（适配）
• 前端新增文件：
  • src/views/Editor/EnglishSpeaking/composables/useDialogueEngine.ts
  • src/views/Editor/EnglishSpeaking/composables/useAudioRecorder.ts
  • src/views/Editor/EnglishSpeaking/services/llmService.ts
• 前端依赖：无新增 npm 依赖，使用浏览器原生 API
• 后端项目：cococlass-english-speaking-api（独立 repo）