{messages.map(msg => (
))}
);
}
```
**第4步：实现流式输出**
参考LobeChat的实现，使用Server-Sent Events (SSE)：
```typescript
// 前端：接收流式数据
async function streamChat(message: string) {
const response = await fetch('/api/chat/stream', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message, projectId, agentId })
});
const reader = response.body?.getReader();
const decoder = new TextDecoder();
let accumulatedText = '';
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value);
const lines = chunk.split('\n');
for (const line of lines) {
if (line.startsWith('data: ')) {
const data = JSON.parse(line.slice(6));
if (data.type === 'token') {
accumulatedText += data.content;
setMessages(prev => [...prev.slice(0, -1), {
...prev[prev.length - 1],
content: accumulatedText
}]);
}
}
}
}
}
// 后端：发送流式数据
app.post('/api/chat/stream', async (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
const stream = await llmAdapter.chatStream({
messages: contextMessages,
temperature: 0.7
});
for await (const chunk of stream) {
res.write(`data: ${JSON.stringify({
type: 'token',
content: chunk
})}\n\n`);
}
res.write(`data: ${JSON.stringify({ type: 'done' })}\n\n`);
res.end();
});
```
### 预计节省时间
| 功能模块 | 从零开发 | 复用LobeChat | 节省 |
|---------|---------|-------------|------|
| 基础聊天UI | 5天 | 1天 | 4天 |
| 流式输出 | 3天 | 0.5天 | 2.5天 |
| Markdown渲染 | 2天 | 0.5天 | 1.5天 |
| 代码高亮 | 1天 | 0.5天 | 0.5天 |
| 文件上传UI | 2天 | 1天 | 1天 |
| **总计** | **13天** | **3.5天** | **9.5天** ⭐ |
---
## 🔧 技术实现关键点
### 1. 智能体配置管理（简化版 - 配置文件方式）
**为什么选择配置文件而非数据库管理？**
- ✅ 降低开发成本（无需开发后台管理界面）
- ✅ 版本控制友好（Git管理配置变更）
- ✅ 部署简单（无需数据库迁移）
- ✅ 易于调试（直接修改配置文件）
**配置文件结构**
```yaml
# config/agents.yaml
agents:
- id: agent-topic-evaluation
name: 选题评价
description: 从创新性、临床价值、科学性和可行性等维度评价临床问题
category: 选题阶段
icon: lightbulb
# Prompt配置
system_prompt_file: prompts/topic_evaluation_system.txt
user_prompt_template_file: prompts/topic_evaluation_user.txt
# 模型配置
models:
deepseek-v3:
temperature: 0.4
max_tokens: 2000
top_p: 0.9
qwen3-72b:
temperature: 0.5
max_tokens: 2000
# 功能开关
rag_enabled: true # 是否支持知识库检索
file_upload_enabled: false # 是否支持文件上传
# 输出格式
output_format: structured # text | structured | document
# 状态
status: active # active | inactive
- id: agent-picos
name: PICOS构建
description: 结构化地定义临床研究的核心要素
category: 研究设计
icon: construction
system_prompt_file: prompts/picos_system.txt
user_prompt_template_file: prompts/picos_user.txt
models:
deepseek-v3:
temperature: 0.3
max_tokens: 2500
rag_enabled: true
file_upload_enabled: false
output_format: structured
status: active
# ... 其他10个智能体配置
```
**Prompt文件管理**
```
backend/prompts/
├── topic_evaluation_system.txt
├── topic_evaluation_user.txt
├── picos_system.txt
├── picos_user.txt
├── crf_system.txt
├── sample_size_system.txt
└── ...
```
**示例Prompt文件**
```txt
# prompts/picos_system.txt
你是一位经验丰富的临床研究方法学专家，擅长帮助研究者构建科学严谨的PICOS框架。
## 你的任务
根据用户提供的研究想法，帮助其完善以下要素：
- P (Population): 研究人群的精确定义
- I (Intervention): 干预措施的详细描述
- C (Comparison): 对照组的设计
- O (Outcome): 主要和次要观察指标
- S (Study Design): 研究设计类型
## 输出要求
1. 使用结构化的表格或清单形式输出
2. 每个要素都要具体、可操作、可测量
3. 指出潜在的方法学问题
4. 提供改进建议
## 注意事项
- 确保研究人群的纳入排除标准明确
- 干预措施要具有可重复性
- 观察指标要符合临床意义和统计学要求
- 研究设计要匹配研究目的
```
**加载配置的代码实现**
```typescript
// backend/src/config/agent-loader.ts
import fs from 'fs';
import yaml from 'yaml';
import path from 'path';
interface AgentConfig {
id: string;
name: string;
description: string;
category: string;
icon: string;
system_prompt_file: string;
user_prompt_template_file: string;
models: Record