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 页面布局

+------------------------------+
|  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）：

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 组件）：

<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 对话记录数据模型（后端实体）

@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 对话报告格式（结构化输出）

{
  "conversationId": "123456",
  "userId": "user_123",
  "generateTime": "time",
  "summary": {
    "title": "title",
    "content": "content"
    } 
}

---

七、测试需求（可选）

• 单元测试：对于 AI 服务、工具调用模块、用户管理模块进行测试
• 集成测试：测试与 AI 模型的对接、工具调用逻辑、会话处理

---

---

九、附录

9.1 推荐的 AI 模型

9.2 工具示例（可扩展）

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