📦 流式AI检索问答技能

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）