280 lines
7.5 KiB
Markdown
280 lines
7.5 KiB
Markdown
# Chat-box
|
||
|
||
## 一、产品概述
|
||
|
||
### 1.1 项目背景
|
||
|
||
随着人工智能技术的发展，AI 对话系统在客服、教学、咨询等场景中越来越常见。本项目旨在开发一个**简易 AI 对话助手系统**，用于实现基础的自然语言交互、历史对话记忆、外部工具调用、以及结构化输出对话报告功能，为后续扩展和深度使用打下基础。
|
||
|
||
### 1.2 产品目标
|
||
|
||
本系统旨在提供以下核心功能：
|
||
|
||
- 实现用户与 AI 的自然语言对话
|
||
- 支持对话记忆，保持上下文连续性
|
||
- 支持调用外部工具（如计算器、天气查询等）
|
||
- 将对话内容结构化输出为报告（如 JSON、Markdown 或 PDF）
|
||
|
||
### 1.3 应用场景
|
||
|
||
- 教育应用中与 AI 的问答互动
|
||
- 快速查询工具调用支持
|
||
- 生成对话记录报告用于审计或分析
|
||
|
||
---
|
||
|
||
## 二、功能需求
|
||
|
||
### 2.1 核心功能
|
||
|
||
| 功能模块 | 描述 |
|
||
|----------|------|
|
||
| 用户登录 | 支持用户注册与登录，保存对话记录 |
|
||
| AI对话 | 用户与 AI 之间的自然语言交互 |
|
||
| 对话记忆 | 保存用户与 AI 之间的历史对话内容，用于上下文理解 |
|
||
| 工具调用 | 调用外部工具（如天气、计算器）帮助用户完成任务 |
|
||
| 对话报告生成 | 将对话记录以结构化格式（如 JSON、Markdown）输出 |
|
||
|
||
### 2.2 详细功能说明
|
||
|
||
#### 2.2.1 用户登录（可选模块，支持权限管理）
|
||
|
||
- 用户注册：邮箱注册，密码加密存储
|
||
- 用户登录：验证用户身份，记录登录状态
|
||
- 持久化用户信息：包括用户名、ID、对话历史等
|
||
|
||
#### 2.2.2 AI 对话功能
|
||
|
||
- 用户输入文本后，AI 回复相应内容
|
||
- 支持多轮对话，记忆对话上下文
|
||
- AI 回复内容可包含自然语言、结构化数据、甚至代码片段（可选）
|
||
|
||
#### 2.2.3 对话记忆（Context Memory）
|
||
|
||
- 保存用户与 AI 的对话历史，格式如 `[{"role": "user", "content": "..."}, {"role": "assistant", "content": "..."}, ...]`
|
||
- 在每次用户提问时，将先前对话历史一并传给 AI 模型，用于上下文理解
|
||
- 可设置最大对话长度（如 10 轮）
|
||
|
||
#### 2.2.4 工具调用（Tool Invocation）
|
||
|
||
- 支持预定义工具如天气查询、计算、时间查询等
|
||
- 在 AI 对话中识别用户意图，主动调用工具
|
||
- 工具调用结果可被 AI 使用，生成最终回答
|
||
- 例如：用户输入“10+20”，AI 识别为计算器调用请求，返回“30”
|
||
|
||
#### 2.2.5 对话报告结构化输出（Report Generation）
|
||
|
||
- 用户可导出当前对话内容为结构化格式（JSON、Markdown）
|
||
- 报告内容包括用户和 AI 的所有对话记录
|
||
- 可支持时间戳、对话 ID 等元信息
|
||
- 可拓展为 PDF 报告格式（可选）
|
||
|
||
---
|
||
|
||
## 三、非功能需求
|
||
|
||
| 类别 | 描述 |
|
||
|------|------|
|
||
| 可靠性 | 系统应具备自动重试机制、错误日志打印 |
|
||
| 用户体验 | 对话界面清晰友好，支持流式输出和自动滚动 |
|
||
| 兼容性 | 支持主流浏览器和移动端访问 |
|
||
|
||
---
|
||
|
||
## 四、用户界面设计（前端部分）
|
||
|
||
### 4.1 页面布局
|
||
|
||
```plaintext
|
||
+------------------------------+
|
||
| Chat Box |
|
||
+------------------------------+
|
||
| 用户登录 / 注册 |
|
||
| 对话历史列表 |
|
||
+------------------------------+
|
||
| [用户] 你好！ |
|
||
| [AI] 你好！ |
|
||
| [用户] 今天天气如何？ |
|
||
| [AI] 今天天气晴朗，气温20℃ |
|
||
+------------------------------+
|
||
| 输入框： | [发送] [导出报告]
|
||
| |
|
||
| <工具调用按钮> |
|
||
+------------------------------+
|
||
```
|
||
|
||
### 4.2 交互逻辑
|
||
|
||
- 用户输入文字，点击“发送”或按 Enter，触发 AI 回复
|
||
- AI 回复内容展示在对话框中
|
||
- 点击“导出报告”，总结对话内容，可选择保存为 JSON 或 Markdown
|
||
|
||
### 4.3 可选功能
|
||
|
||
- 支持快速切换聊天对话（支持多个会话）
|
||
|
||
---
|
||
|
||
## 五、技术实现说明
|
||
|
||
### 5.1 后端（Spring Boot + Spring AI）
|
||
|
||
#### 技术栈：
|
||
|
||
- Spring Boot 3.x
|
||
- Spring AI
|
||
- Spring Security（用户认证）
|
||
- MyBatisPlus（对话记录存储）
|
||
- Spring Web（REST API）
|
||
- JSON（数据转换）
|
||
- Lombok（简化代码）
|
||
- Logging（日志记录）
|
||
|
||
#### 模块结构：
|
||
|
||
1. **User Module**
|
||
- 注册、登录、用户信息管理
|
||
- 使用 JWT 实现权限控制
|
||
|
||
2. **Chat Module**
|
||
- WebSocket 或 REST API 接收用户输入
|
||
- 生成 AI 回复，使用 Spring AI 中的 `AiService` 接口
|
||
|
||
3. **History Module**
|
||
- 保存对话记录（历史上下文）
|
||
- 使用数据库存储，支持会话 ID 分组管理
|
||
|
||
4. **Tool Module**
|
||
- 支持调用外部工具（如 `WeatherTool`, `CalculatorTool`）
|
||
- 使用 `ToolLauncher` 或 `FunctionCalling` 机制
|
||
|
||
5. **Report Module**
|
||
- 收集对话内容，生成 JSON 或 Markdown 格式报告
|
||
- 支持导出为文件（HTTP Response 返回文件）
|
||
|
||
#### 示例代码片段（Spring AI）：
|
||
|
||
```java
|
||
import org.springframework.ai.chat.client.ChatClient;
|
||
import org.springframework.ai.chat.message.Message;
|
||
import org.springframework.ai.chat.model.ChatResponse;
|
||
import org.springframework.ai.chat.prompt.Prompt;
|
||
import org.springframework.stereotype.Service;
|
||
|
||
@Service
|
||
public class AiService {
|
||
|
||
private final ChatClient chatClient;
|
||
|
||
public AiService(ChatClient chatClient) {
|
||
this.chatClient = chatClient;
|
||
}
|
||
|
||
public String sendMessage(String content, List<Message> history) {
|
||
Prompt prompt = new Prompt(content, history);
|
||
ChatResponse response = chatClient.call(prompt);
|
||
return response.getResult().getOutput().getContent();
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 5.2 前端（Vue 3 + Element Plus）
|
||
|
||
#### 技术栈：
|
||
|
||
- Vue 3 + Vue Router + Vuex / Pinia（状态管理）
|
||
- Element Plus（UI 组件）
|
||
- Axios（HTTP 请求）
|
||
- WebSocket 或 REST API 与后端通信
|
||
- Markdown 解析器（如 `marked`）处理结构化输出
|
||
- 文件导出库（如 `file-saver`）用于导出 JSON/Markdown
|
||
|
||
#### 功能实现：
|
||
|
||
- 对话框组件：展示历史消息
|
||
- 输入框组件：支持文字输入或语音输入
|
||
- 工具调用按钮：点击弹出工具选项，调用后显示结果
|
||
- 导出按钮：触发前端导出逻辑，生成并下载报告
|
||
|
||
#### 示例代码片段（Vue 组件）：
|
||
|
||
```vue
|
||
<template>
|
||
<div class="chat-box">
|
||
<div v-for="msg in messages" :key="msg.id">
|
||
<div class="message" :class="{'user': msg.role === 'user'}">
|
||
{{ msg.content }}
|
||
</div>
|
||
</div>
|
||
<el-input v-model="input" @keyup.enter="sendMessage" />
|
||
<el-button @click="sendMessage">发送</el-button>
|
||
<el-button @click="exportChat">导出报告</el-button>
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
---
|
||
|
||
## 六、数据结构设计
|
||
|
||
### 6.1 对话记录数据模型（后端实体）
|
||
|
||
```java
|
||
@Entity
|
||
public class ChatMessage {
|
||
@Id
|
||
@GeneratedValue(strategy = GenerationType.IDENTITY)
|
||
private Long id;
|
||
|
||
private String userId;
|
||
|
||
private String role; // user / assistant
|
||
|
||
private String content;
|
||
|
||
private LocalDateTime timestamp;
|
||
|
||
private String conversationId;
|
||
|
||
// getters and setters
|
||
}
|
||
```
|
||
|
||
### 6.2 对话报告格式（结构化输出）
|
||
|
||
```json
|
||
{
|
||
"conversationId": "123456",
|
||
"userId": "user_123",
|
||
"generateTime": "time",
|
||
"summary": {
|
||
"title": "title",
|
||
"content": "content"
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 七、测试需求（可选）
|
||
|
||
- **单元测试**：对于 AI 服务、工具调用模块、用户管理模块进行测试
|
||
- **集成测试**：测试与 AI 模型的对接、工具调用逻辑、会话处理
|
||
|
||
---
|
||
|
||
|
||
---
|
||
|
||
## 九、附录
|
||
|
||
### 9.1 推荐的 AI 模型
|
||
|
||
|
||
### 9.2 工具示例（可扩展）
|
||
|
||
- 天气查询接口
|
||
- 时间查询
|