stream-ai-answer — 通用流式AI检索问答技能
本skill为开发者提供一套可复用的AI检索问答交互范式，适用于任意行业的知识库产品。
核心价值
将AI搜索框从「输入→等待→结果」升级为「输入→实时思考可视化→带来源的完整回答」
用户清晰看到AI在思考什么，答案有来源可查、可点击、可信度提升。
四步流程（通用版）
| 步骤 |
状态 |
图标 |
适用场景说明 |
| ① 理解问题意图 |
🔍 |
理解意图 |
所有场景，识别用户真正想查什么 |
| ② 检索知识库/数据库 |
🗄️ |
检索内容 |
有结构化知识库时启用；无知识库可跳过 |
| ③ 深度分析 & 生成 |
🧠 |
深度分析 |
所有场景，模型推理+内容生成 |
| ④ 来源标记 & 完成 |
📚 |
来源标记 |
有外部引用时启用；无来源则标注"综合知识回答" |
组件视觉结构
┌─────────────────────────────────────────┐
│ 🤖 AI 智能回答 🔥 实时生成 │
├─────────────────────────────────────────┤
│ 🔍 理解问题意图... ✅ │
│ 🗄️ 检索知识库内容... ⏳ │ ← 根据步骤数动态显示
│ 🧠 深度分析与生成... ○ │
│ 📚 来源标记... ○ │
├─────────────────────────────────────────┤
│ ⭐ [模型名称] · 结合N条知识库内容 │ ← 底部来源统计
└─────────────────────────────────────────┘
↓ 流式展开
┌─────────────────────────────────────────┐
│ [流式生成的回答正文，带关键词高亮] │
├─────────────────────────────────────────┤
│ 📚 参考来源： │
│ ① [标题] · [来源平台] · [可点击链接] │
│ ② [标题] · [来源平台] │
└─────────────────────────────────────────┘
状态视觉规则
| 状态 |
视觉 |
CSS类 |
pending |
灰圆圈 ○ |
text-gray-400 |
active |
蓝色旋转 + 脉冲 |
text-blue-500 animate-spin |
done |
绿色勾 ✅ |
text-green-500 |
error |
红色叉 ❌ |
text-red-500 |
行业适配指南
医疗健康
- 步骤：🔍→🗄️（检索医学文献）→🧠→📚
- 来源格式：PubMed DOI / 临床指南 / NCCN / CMA
- Prompt风格：需强提醒"不作为诊断依据"
- 典型项目：患者教育平台、医生继续教育、科研助手
法律
- 步骤：🔍→🗄️（检索法规条文）→🧠→📚
- 来源格式：法律条文编号 / 判决书 / 司法解释
- Prompt风格：明确"仅供参考，不构成法律意见"
- 典型项目：法律咨询平台、企业合规助手
金融/财税
- 步骤：🔍→🗄️（检索政策文件）→🧠→📚
- 来源格式：财政部/税务局公告 / 法规链接
- Prompt风格：明确"不构成投资建议"
- 典型项目：财报解读、政策问答、理财咨询
通用企业知识库
- 步骤：🔍→🗄️（检索内部文档）→🧠
- 来源格式：内部文档名称 / Confluence链接
- Prompt风格：简洁专业，直接给答案
- 典型项目：内部问答机器人、客服辅助、CRM AI助手
实施流程
Step 1：判断场景复杂度
| 场景 |
步骤数 |
是否检索知识库 |
| 简单问答（FAQ类） |
2步（🔍→🧠） |
否，直接生成 |
| 知识库检索 |
3步（🔍→🗄️→🧠） |
是，RAG检索 |
| 专业领域（医疗/法律） |
4步（🔍→🗄️→🧠→📚） |
是，强引用 |
| 深度报告生成 |
5步（🔍→🗄️→🧠→📚→⚡） |
多源聚合 |
Step 2：设计步骤配置
// 通用3步（企业知识库）
const steps = [
{ key: 'understand', label: '理解问题意图', status: 'pending' },
{ key: 'retrieve', label: '检索知识库内容', status: 'pending' },
{ key: 'generate', label: '深度分析与生成', status: 'pending' },
];
// 专业4步（医疗/法律/金融）
const steps = [
{ key: 'understand', label: '理解问题意图', status: 'pending' },
{ key: 'retrieve', label: '检索专业数据库', status: 'pending' },
{ key: 'analyze', label: '深度分析证据', status: 'pending' },
{ key: 'generate', label: '生成回答', status: 'pending' },
];
Step 3：接入API（见 references/frontend-pattern.md）
Step 4：行业Prompt定制（见 references/prompts.md）
Step 5：来源解析配置（见 references/frontend-pattern.md）
文件说明
| 文件 |
用途 |
何时读取 |
references/frontend-pattern.md |
React组件代码 + 流式实现 |
开发时 |
references/prompts.md |
各行业系统Prompt模板 |
Prompt设计时 |
assets/AIAnalysisCard.tsx |
可直接复制的React组件 |
组件开发时 |
快速接入路径
React项目（Vite + TypeScript）
- 复制
assets/AIAnalysisCard.tsx → src/components/common/
- 修改
references/frontend-pattern.md 中的API端点
- 在目标页面引入并替换原有loading状态
非React项目
- 参考
references/frontend-pattern.md 中的纯函数封装 streamAI()
- 按UI框架（Vue/Svelte/Angular）自行实现
AIAnalysisCard
依赖要求
- React 18+（或任意UI框架）
- TypeScript（支持TSX）
- TailwindCSS（使用现有颜色变量）
- 支持
stream: true 的LLM API
- ✅ MiniMax / DeepSeek / OpenAI / Azure OpenAI / 百度千帆
- ✅ 本地模型（Ollama + SSE）
Lord1Egypt