chat-box/PRD.md

# 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 工具示例（可扩展）

- 天气查询接口
- 时间查询