典籍知识问答模块AI问答功能前端实现二——AI对话（暂未涉及前端界面设计）

本功能于4.14实现

一、对话流程

1.新建对话：用户可以点击“新建对话”按钮创建一个新的对话会话。系统会自动为新会话分配一个唯一的ID，并初始化对话内容。

const startNewSession = async () => {
  const response = await axios.post('/api/qa/sessions', null, {
    params: { classicId: classicId.value, userId: 1 }
  });
  sessions.value.push(response.data);
  currentSessionId.value = response.data.id;
  currentMessages.value = [];
};

2.发送消息：用户在输入区域输入问题或消息，点击“发送”按钮后，系统会将消息发送到服务器，并获取AI的回复。回复内容会显示在消息区域中。

const sendMessage = async () => {
  if (!newMessage.value.trim()) return;
  const messageRequest = {
    sessionId: currentSessionId.value,
    content: newMessage.value,
    role: 'user',
    parentId: null
  };
  const response = await axios.post('/api/qa/messages', messageRequest);
  currentMessages.value.push(response.data);
  newMessage.value = '';
  scrollToBottom();
};

二、功能特点

1.文本选中与提问：用户可以在典籍内容区域选中任意文本，系统会在选中文本的位置显示一个提问按钮。用户点击按钮后，系统会根据选中的文本生成一个提问模板，方便用户进行提问。

const askAboutSelection = async () => {
  if (!currentSessionId.value) await startNewSession();
  const message = `关于选中的内容："${selectedText.content}"，我的问题是：`;
  newMessage.value = message;
  selectedText.content = '';
};

2.多轮对话支持：系统支持多轮对话，用户可以根据AI的回复继续提问或深入探讨，实现更加自然的对话体验。

const aiMessageRequest = {
  sessionId: currentSessionId.value,
  content: `关于《${classic.value.title}》的问题：${newMessage.value}`,
  role: 'assistant',
  parentId: response.data.id
};
const aiResponse = await axios.post('/api/qa/messages', aiMessageRequest);
currentMessages.value.push(aiResponse.data);

3.消息反馈：用户可以对AI的回复进行反馈，通过点赞或点踩的方式表达对回复的满意度。系统可以根据反馈数据优化AI模型，提高回复质量。

const rateResponse = async (messageId, feedback) => {
  await axios.post('/api/qa/feedback', null, {
    params: { messageId, feedback }
  });
};

4.重新生成回答：如果用户对AI的回复不满意，可以点击“重新生成”按钮，系统会重新生成一个回答，为用户提供更满意的解决方案。

const regenerate = async (messageId) => {
  const response = await axios.post('/api/qa/regenerate', null, {
    params: { messageId }
  });
  currentMessages.value.push(response.data);
  scrollToBottom();
};

三、技术实现

1.使用Axios发送HTTP请求，与后端API进行交互，实现消息的发送和接收。

2.通过Vue的响应式数据绑定，实现消息列表的动态更新，确保用户能够实时看到最新的对话内容。

3.利用Vuex或Pinia进行状态管理，存储当前会话ID、消息列表等状态信息，方便在不同组件之间共享和使用。