05 - 流式聊天与解读
概述
使用 React Native + Reanimated + Markdown 流式传输实现解读释义聊天。
设计约束（来自 总设计指南）
- OLED Noir 背景： 使用纯黑（#000000）。
- 排版： 高对比度、优雅的衬线体（Playfair Display）用于解读内容。
- 反 AI 美学： 在聊天背景上应用高质量噪点覆盖层，以传达"精心制作"的体验。
- 慢 UI 与防疲劳： 有意的节奏控制，作为高强度社交媒体的喘息空间。
React Native / Expo 实现
- 聊天容器： 极简风格，OLED Noir 背景。
- 流式传输： 使用
fetch配合ReadableStream流式传输 Markdown 内容。 - 打字效果： 可变速度打字机。开始时快，随着解读深入逐渐变慢，以强调厚重感。
- 用户体验： 内容流式传输时，自动滚动气泡到底部。
- 语音： 支持 TTS（ElevenLabs API 集成）。语音按钮使用流畅的液态变形动画。
AI 开发者提示
"实现 InterpretationChat 组件。使用暗色模式/OLED Noir 背景配微妙的噪点纹理覆盖层。解读文本必须使用 Playfair Display（衬线体）渲染。实现 Markdown 流式打字机效果，开始时快，随时间逐渐变慢。关键： 为语音 TTS 按钮使用自定义组件，在各状态间（空闲/录制/播放）流畅变形。聊天容器在流式传输期间必须自动滚动到底部。"