Skill: zmy1006-sudo/stream-ai-answer (version 1.0.0)

--- name: stream-ai-answer description: > 通用流式AI检索问答技能 — 为任意行业应用提供四步流式分析交互界面。 触发场景：用户输入关键词 → AI自动执行：理解意图 → 检索知识库 → 流式生成 → 来源标记 → 完整回答。 当需要实现以下任意场景时激活： (1) AI搜索框 / 智能咨询组件重构 (2) 知识库问答（医疗/法律/金融/教育等垂直领域） (3) 流式回答 + 分步思考过程可视化 (4) 带来源引用的AI回答（PubMed/DOI/文档/数据库） (5) DeepSeek风格四步分析卡片 (6) 任何需要"边想边说"透明AI过程的项目 适用行业：医疗、法律、金融、教育、能源、政务、制造等 适配项目类型：React H5/WebApp、企业知识库、客服系统、问诊平台、科普中心、CRM/ERP 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：设计步骤配置 ```typescript // 通用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） 1. 复制 `assets/AIAnalysisCard.tsx` → `src/components/common/` 2. 修改 `references/frontend-pattern.md` 中的API端点 3. 在目标页面引入并替换原有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）


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)