# QA 页面接入 AI 逻辑 + Markdown 渲染 + 图片处理计划

## 现状分析

| 模块 | 状态 | 说明 |
|------|------|------|
| 后端 `/api/chat` | ✅ 已实现 | 完整的 DashScope SSE 代理 |
| 前端 `qa.ts` sendMessage | ❌ Mock | setTimeout 模拟 |
| Markdown 渲染 | ❌ 无 | 当前纯文本，没有 Markdown |
| 图片处理 | ❌ 无 | demo 中有 MCP 图片提取逻辑 |
| `marked` 库 | ✅ 已安装 | 但未在 QA 页面使用 |

## 实现方案

### 第一步：Markdown 渲染
使用 `ngx-markdown` 库（npm install ngx-markdown），通过 `<markdown>` 组件或 `| markdown` pipe 渲染。
- `provideMarkdown()` 在 app.config.ts 全局配置
- QA 页面的 AI 消息用 `[data]` 绑定渲染 Markdown
- 高亮代码使用 `highlight.js`（已安装）

### 第二步：图片处理
从 demo 迁移 MCP 图片提取逻辑：
- 解析 `output.thoughts` 中的 `action_type === 'mcp'` 节点
- 从 `observation.content[].text` 中提取 image URLs（`results[]` 数组）
- **不直接渲染图片**，而是在 Markdown 渲染后将 `![alt](url)` 替换为 `<img>` 标签，统一添加样式类、懒加载、点击放大等

### 第三步：AI 流式逻辑
从 demo 迁移到 Angular：
- `ai-chat.service.ts` — SSE 流式请求 + 图片提取
- `qa.ts` — 替换 sendMessage，接入真实流式逻辑
- `QAMessage` 模型扩展 — 添加 `thoughts`、`images` 字段

### 第四步：后端 .env
基于 `.env.example` 创建 `.env` 文件

---

## 需要修改的文件

| 文件 | 操作 | 说明 |
|------|------|------|
| `frontend/package.json` | 添加依赖 | `ngx-markdown` |
| `frontend/src/app/app.config.ts` | 更新 | 添加 `provideMarkdown()` |
| `frontend/src/app/core/services/ai-chat.service.ts` | **新建** | SSE 流 + 图片提取 |
| `frontend/src/app/core/models/qa.model.ts` | 更新 | 扩展 QAMessage 接口 |
| `frontend/src/app/features/qa/qa/qa.ts` | 重写 | 接入 AI 流式 + Markdown |
| `frontend/src/app/features/qa/qa/qa.html` | 更新 | 使用 `<markdown>` 组件 |
| `backend/.env` | 新建 | 基于 .env.example |

## 图片处理策略

demo 中的图片提取逻辑：
```javascript
// thought.action_type === 'mcp'
// → observation.content[].type === 'text'
// → JSON.parse(item.text).results[] → 图片 URL 数组
```

Angular 中：
1. 在 `ai-chat.service.ts` 中提取 imageUrls
2. API 返回 `{ text, thoughts, images }` 给组件
3. 组件将 images 拼接到 Markdown 内容末尾（用 `![图片](url)` 格式）
4. `ngx-markdown` 自动渲染为 `<img>`，配合 CSS 控制样式

## 数据流

```
用户输入 → qa.ts sendMessage()
  → aiChatService.stream(prompt, sessionId)
    → fetch('/api/chat')
      → SSE 逐帧解析
        → output.text → 追加到 Markdown 内容
        → output.thoughts[].thought → 思考过程
        → output.thoughts[].mcp → 提取图片 URLs
        → output.session_id → 保存会话
          → qa.ts 实时更新 messages signal
            → <markdown> 组件渲染
            → 图片自动生成 <img> 标签
```

## 关键实现

1. **ngx-markdown 配置**：需要 `provideHttpClient()`（已提供）+ `provideMarkdown()`
2. **安全渲染**：使用 `[data]` 绑定而非 `[src]` 加载外部文件
3. **图片样式**：CSS 统一控制 `.qa-markdown img { max-width: 100%; border-radius: 8px; }`
4. **流式更新**：发送时插入空 AI 消息，收到 chunk 后更新 content 字段，ngx-markdown 自动重新渲染