优化
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import request from '@/utils/ai_request'
|
import request from '@/utils/request'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取聊天历史记录
|
* 获取聊天历史记录
|
||||||
|
|||||||
@@ -1,54 +1,54 @@
|
|||||||
import axios from 'axios'
|
import axios from "axios";
|
||||||
import { getTokenKeySessionStorage } from './auth'
|
import { getTokenKeySessionStorage } from "./auth";
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from "vue-router";
|
||||||
import { showToast } from '@/utils/toast' // 请替换为你的Toast组件
|
import { showToast } from "@/utils/toast"; // 请替换为你的Toast组件
|
||||||
|
|
||||||
// 创建axios实例
|
// 创建axios实例
|
||||||
const service = axios.create({
|
const service = axios.create({
|
||||||
baseURL: process.env.VUE_APP_API_BASE_URL || 'http://localhost:8088',
|
baseURL: process.env.VUE_APP_API_BASE_URL || 'http://localhost:8088',
|
||||||
timeout: 15000,
|
timeout: 15000,
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json'
|
"Content-Type": "application/json",
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
// 请求拦截器
|
// 请求拦截器
|
||||||
service.interceptors.request.use(
|
service.interceptors.request.use(
|
||||||
config => {
|
(config) => {
|
||||||
// 从本地存储获取token
|
// 从本地存储获取token
|
||||||
const token = getTokenKeySessionStorage()
|
const token = getTokenKeySessionStorage();
|
||||||
if (token) {
|
if (token) {
|
||||||
config.headers.Authorization = `Bearer ${token}`
|
config.headers.Authorization = `Bearer ${token}`;
|
||||||
}
|
|
||||||
return config
|
|
||||||
},
|
|
||||||
error => {
|
|
||||||
return Promise.reject(error)
|
|
||||||
}
|
}
|
||||||
)
|
return config;
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// 响应拦截器
|
// 响应拦截器
|
||||||
service.interceptors.response.use(
|
service.interceptors.response.use(
|
||||||
response => {
|
(response) => {
|
||||||
// 对响应数据做处理
|
// 对响应数据做处理
|
||||||
return response.data
|
return response.data;
|
||||||
},
|
},
|
||||||
error => {
|
(error) => {
|
||||||
const router = useRouter()
|
const router = useRouter();
|
||||||
|
|
||||||
// 处理401未授权
|
// 处理401未授权
|
||||||
if (error.response?.status === 401) {
|
if (error.response?.status === 401) {
|
||||||
showToast('登录已过期，请重新登录', 'error')
|
showToast("登录已过期，请重新登录", "error");
|
||||||
router.push('/login')
|
router.push("/login");
|
||||||
}
|
|
||||||
|
|
||||||
// 处理其他错误状态码
|
|
||||||
if (error.response?.status === 500) {
|
|
||||||
showToast('服务器错误，请稍后再试', 'error')
|
|
||||||
}
|
|
||||||
|
|
||||||
return Promise.reject(error)
|
|
||||||
}
|
}
|
||||||
)
|
|
||||||
|
|
||||||
export default service
|
// 处理其他错误状态码
|
||||||
|
if (error.response?.status === 500) {
|
||||||
|
showToast("服务器错误，请稍后再试", "error");
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export default service;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { getTokenKeySessionStorage } from "@/utils/auth";
|
import { getTokenKeySessionStorage } from "@/utils/auth";
|
||||||
|
|
||||||
// 使用环境变量配置基础URL
|
// 使用环境变量配置基础URL
|
||||||
const BASE_URL = process.env.VUE_APP_API_BASE_URL || "http://localhost:8088";
|
const BASE_URL = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 创建聊天流式连接
|
* 创建聊天流式连接
|
||||||
@@ -16,7 +16,7 @@ export function createChatStream(params) {
|
|||||||
const requestId = `req-${Date.now()}-${Math.random()
|
const requestId = `req-${Date.now()}-${Math.random()
|
||||||
.toString(36)
|
.toString(36)
|
||||||
.slice(2, 8)}`;
|
.slice(2, 8)}`;
|
||||||
const url = `${BASE_URL}/aitutor/aichat/stream`;
|
const url = `${process.env.VUE_APP_BASE_API}/aitutor/aichat/stream`;
|
||||||
const token = getTokenKeySessionStorage();
|
const token = getTokenKeySessionStorage();
|
||||||
|
|
||||||
if (!token) {
|
if (!token) {
|
||||||
|
|||||||
@@ -1,671 +0,0 @@
|
|||||||
<!-- src/views/tool/ai-chat/index.vue -->
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="ai-chat-container">
|
|
||||||
<h3>AI 聊天助手</h3>
|
|
||||||
<div class="conversation-controls">
|
|
||||||
<el-button @click="toggleConversationList">
|
|
||||||
{{ showConversationList ? '隐藏会话列表' : '显示会话列表' }}
|
|
||||||
</el-button>
|
|
||||||
<el-button @click="fetchHistoryMessages" :disabled="!conversationId || historyLoaded">获取历史消息</el-button>
|
|
||||||
<el-button @click="createNewConversation" type="primary">新建会话</el-button>
|
|
||||||
<el-button @click="fetchFeedbacks">获取反馈列表</el-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 会话列表 -->
|
|
||||||
<div v-if="showConversationList" class="conversation-list">
|
|
||||||
<h4>会话列表</h4>
|
|
||||||
<el-scrollbar max-height="200px">
|
|
||||||
<div v-for="conv in conversationList" :key="conv.id" class="conversation-item" :class="{ 'active': conv.id === conversationId }" @click="switchConversation(conv.id)">
|
|
||||||
<div class="conv-title">{{ conv.title || '未命名会话' }}</div>
|
|
||||||
<div class="conv-time">{{ formatDate(conv.updated_at) }}</div>
|
|
||||||
<div class="conv-preview">{{ conv.preview || '无消息' }}</div>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
<el-button @click="fetchHistoryMessages" :disabled="!conversationId">获取历史消息</el-button>
|
|
||||||
<div class="chat-box" ref="chatBox">
|
|
||||||
<div v-for="(msg, index) in messages" :key="index" class="message-item">
|
|
||||||
<!-- 用户消息 -->
|
|
||||||
<div v-if="msg.type === 'user'" class="user-message">
|
|
||||||
<el-avatar :size="30" style="background-color: #1890ff;">U</el-avatar>
|
|
||||||
<div class="message-content user">{{ msg.content }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- AI 消息（带点赞/点踩） -->
|
|
||||||
<div v-else class="ai-message">
|
|
||||||
<el-avatar :size="30" style="background-color: #52c41a;">AI</el-avatar>
|
|
||||||
<div class="message-content ai" v-html="msg.content"></div>
|
|
||||||
|
|
||||||
<!-- 引用和归属分段列表 -->
|
|
||||||
<div v-if="msg.references && msg.references.length > 0" class="references-section">
|
|
||||||
<h4 class="references-title">引用来源：</h4>
|
|
||||||
<ul class="references-list">
|
|
||||||
<li v-for="(ref, refIndex) in msg.references" :key="refIndex" class="reference-item">
|
|
||||||
<span class="reference-source">{{ ref.source }}：</span>
|
|
||||||
<span class="reference-content">{{ ref.content }}</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 👍 点赞 / 👎 点踩 按钮 -->
|
|
||||||
<div class="feedback-actions" v-if="msg.message_id">
|
|
||||||
<el-button
|
|
||||||
size="mini"
|
|
||||||
:type="msg.feedback === 'like' ? 'primary' : 'default'"
|
|
||||||
icon="el-icon-thumb"
|
|
||||||
@click="submitFeedback(msg, 'like')"
|
|
||||||
:loading="msg.feedbackLoading"
|
|
||||||
>点赞</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
size="mini"
|
|
||||||
:type="msg.feedback === 'dislike' ? 'danger' : 'default'"
|
|
||||||
icon="el-icon-minus"
|
|
||||||
@click="submitFeedback(msg, 'dislike')"
|
|
||||||
:loading="msg.feedbackLoading"
|
|
||||||
>点踩</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 流式输出中 -->
|
|
||||||
<div v-if="isStreaming" class="ai-message">
|
|
||||||
<el-avatar :size="30" style="background-color: #52c41a;">AI</el-avatar>
|
|
||||||
<div class="message-content ai" v-html="currentText"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-area">
|
|
||||||
<el-input
|
|
||||||
v-model="inputText"
|
|
||||||
placeholder="请输入你的问题... (回车发送)"
|
|
||||||
@keyup.enter.native="send"
|
|
||||||
@keydown.enter.native="handleEnterKey"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
<el-button type="primary" @click="send" :loading="isStreaming">发送</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { getConversationList, submitFeedback, getFeedbacks, getHistoryMessages } from "@/api/aitutor/chat";
|
|
||||||
import { getTokenKeySessionStorage } from "@/utils/auth";
|
|
||||||
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "AiChat",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
inputText: "",
|
|
||||||
messages: [],
|
|
||||||
currentText: "",
|
|
||||||
isStreaming: false,
|
|
||||||
abortController: null,
|
|
||||||
conversationId: null,
|
|
||||||
userId: 2023429112,
|
|
||||||
userName: "当前用户", // 添加用户名
|
|
||||||
userRole: "我是学生", // 添加用户角色
|
|
||||||
//userToken: getTokenKeySessionStorage(),
|
|
||||||
userToken: "123",
|
|
||||||
showConversationList: false,
|
|
||||||
conversationList: [],
|
|
||||||
loadingConversations: false,
|
|
||||||
historyLoaded: false, // 新增：标记历史消息是否已加载
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
// 组件挂载时获取会话列表
|
|
||||||
this.fetchConversationList();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 处理回车键事件
|
|
||||||
handleEnterKey(event) {
|
|
||||||
// 阻止默认行为，避免表单提交
|
|
||||||
event.preventDefault();
|
|
||||||
this.send();
|
|
||||||
},
|
|
||||||
// 切换会话列表显示状态并获取数据
|
|
||||||
toggleConversationList() {
|
|
||||||
this.showConversationList = !this.showConversationList;
|
|
||||||
this.fetchConversationList();
|
|
||||||
},
|
|
||||||
|
|
||||||
// 获取会话列表
|
|
||||||
async fetchConversationList() {
|
|
||||||
if (this.loadingConversations) return;
|
|
||||||
|
|
||||||
this.loadingConversations = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const result = await getConversationList({ user: this.userId });
|
|
||||||
|
|
||||||
this.conversationList = result.data || [];
|
|
||||||
console.log('会话列表接口返回数据:', result.data);
|
|
||||||
// 自动选中第一个会话（如果有）
|
|
||||||
if (this.conversationList.length > 0 && !this.conversationId) {
|
|
||||||
this.switchConversation(this.conversationList[0].id);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
this.$message.error("网络错误：" + err.message);
|
|
||||||
} finally {
|
|
||||||
this.loadingConversations = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 切换会话
|
|
||||||
switchConversation(conversationId) {
|
|
||||||
this.conversationId = conversationId;
|
|
||||||
this.messages = []; // 清空当前消息
|
|
||||||
this.historyLoaded = false; // 重置历史消息加载标志
|
|
||||||
this.fetchHistoryMessages(); // 获取选中会话的历史消息
|
|
||||||
},
|
|
||||||
|
|
||||||
// 新建会话
|
|
||||||
createNewConversation() {
|
|
||||||
this.conversationId = null;
|
|
||||||
this.messages = [];
|
|
||||||
this.currentText = "";
|
|
||||||
this.historyLoaded = false;
|
|
||||||
this.showConversationList = false;
|
|
||||||
this.$message.info("已创建新会话，请先发送消息开始对话");
|
|
||||||
},
|
|
||||||
|
|
||||||
// 格式化日期
|
|
||||||
formatDate(dateString) {
|
|
||||||
if (!dateString) return '';
|
|
||||||
const date = new Date(dateString);
|
|
||||||
return date.toLocaleString();
|
|
||||||
},
|
|
||||||
|
|
||||||
async send() {
|
|
||||||
const query = this.inputText.trim();
|
|
||||||
if (!query || this.isStreaming) return;
|
|
||||||
|
|
||||||
this.messages.push({
|
|
||||||
type: "user",
|
|
||||||
content: query,
|
|
||||||
});
|
|
||||||
|
|
||||||
this.currentText = "";
|
|
||||||
this.isStreaming = true;
|
|
||||||
this.inputText = "";
|
|
||||||
|
|
||||||
// 确保有会话ID
|
|
||||||
if (!this.conversationId) {
|
|
||||||
console.log('发送消息时conversationId为null，尝试创建新会话');
|
|
||||||
if (this.conversationList.length > 0) {
|
|
||||||
this.switchConversation(this.conversationList[0].id);
|
|
||||||
} else {
|
|
||||||
console.log('没有现有会话，将发送消息以创建新会话');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
console.log('发送消息时的conversationId:', this.conversationId);
|
|
||||||
|
|
||||||
// 创建请求体
|
|
||||||
const requestBody = {
|
|
||||||
query: query,
|
|
||||||
conversation_id: this.conversationId || undefined,
|
|
||||||
user: this.userId,
|
|
||||||
user_id: this.userId,
|
|
||||||
user_name: this.userName,
|
|
||||||
user_role: this.userRole,
|
|
||||||
user_token: this.userToken
|
|
||||||
};
|
|
||||||
|
|
||||||
// 创建AbortController以支持取消请求
|
|
||||||
this.abortController = new AbortController();
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 对于SSE请求，使用原生fetch而不是axios封装
|
|
||||||
// Use the base API URL from environment configuration
|
|
||||||
const baseUrl = process.env.VUE_APP_BASE_API || '';
|
|
||||||
const response = await fetch(`${baseUrl}/aitutor/aichat/stream`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'text/event-stream',
|
|
||||||
'Authorization': `Bearer ${getTokenKeySessionStorage()}`
|
|
||||||
},
|
|
||||||
body: JSON.stringify(requestBody),
|
|
||||||
signal: this.abortController.signal
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
|
||||||
if (!response.body) throw new Error("No response body");
|
|
||||||
|
|
||||||
const reader = response.body.getReader();
|
|
||||||
const decoder = new TextDecoder();
|
|
||||||
let buffer = "";
|
|
||||||
|
|
||||||
while (true) {
|
|
||||||
const { done, value } = await reader.read();
|
|
||||||
if (done) break;
|
|
||||||
|
|
||||||
buffer += decoder.decode(value, { stream: true });
|
|
||||||
const lines = buffer.split("\n");
|
|
||||||
buffer = lines.pop();
|
|
||||||
|
|
||||||
for (const line of lines) {
|
|
||||||
if (line.startsWith("data:")) {
|
|
||||||
const data = line.slice(5).trim();
|
|
||||||
if (data === "[DONE]") {
|
|
||||||
await this.finalizeResponse();
|
|
||||||
return;
|
|
||||||
} else {
|
|
||||||
try {
|
|
||||||
const json = JSON.parse(data);
|
|
||||||
const eventType = json.event;
|
|
||||||
|
|
||||||
switch (eventType) {
|
|
||||||
case "message":
|
|
||||||
this.currentText += json.answer || "";
|
|
||||||
break;
|
|
||||||
case "message_end":
|
|
||||||
// ✅ 保存 conversation_id 和 message_id
|
|
||||||
if (json.conversation_id) {
|
|
||||||
this.conversationId = json.conversation_id;
|
|
||||||
console.log("Conversation ID set to:", this.conversationId); // 添加调试信息
|
|
||||||
}
|
|
||||||
// 给最后一条 AI 消息添加 message_id 和引用数据
|
|
||||||
// 处理引用数据 - 根据Dify文档，引用数据在retriever_resources字段中
|
|
||||||
let refs = [];
|
|
||||||
if (json.retriever_resources && Array.isArray(json.retriever_resources)) {
|
|
||||||
refs = json.retriever_resources;
|
|
||||||
console.log('引用数据来自retriever_resources字段:', refs);
|
|
||||||
} else if (json.references && Array.isArray(json.references)) {
|
|
||||||
refs = json.references;
|
|
||||||
console.log('引用数据来自references字段:', refs);
|
|
||||||
} else if (json.sources && Array.isArray(json.sources)) {
|
|
||||||
refs = json.sources;
|
|
||||||
console.log('引用数据来自sources字段:', refs);
|
|
||||||
} else {
|
|
||||||
console.log('未找到引用数据或格式不正确:', json);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.messages.push({
|
|
||||||
type: "ai",
|
|
||||||
content: this.currentText,
|
|
||||||
message_id: json.id, // Dify 返回的消息 ID
|
|
||||||
references: refs, // 引用数据
|
|
||||||
feedback: null, // 初始无反馈
|
|
||||||
feedbackLoading: false,
|
|
||||||
});
|
|
||||||
this.currentText = "";
|
|
||||||
break;
|
|
||||||
case "error":
|
|
||||||
this.currentText += `<span style=\"color:red\">[AI错误] ${json.message || "未知错误"}</span>`;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
this.currentText += data;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
await this.finalizeResponse();
|
|
||||||
} catch (err) {
|
|
||||||
if (err.name !== "AbortError") {
|
|
||||||
console.error("SSE Error:", err);
|
|
||||||
this.$message.error("连接失败: " + err.message + ", 请检查后端服务是否正常运行");
|
|
||||||
}
|
|
||||||
this.isStreaming = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async finalizeResponse() {
|
|
||||||
this.isStreaming = false;
|
|
||||||
this.abortController = null;
|
|
||||||
},
|
|
||||||
|
|
||||||
// ==================== 新增：提交点赞/点踩 ====================
|
|
||||||
async submitFeedback(msg, rating) {
|
|
||||||
// 防止重复提交
|
|
||||||
if (msg.feedbackLoading) return;
|
|
||||||
|
|
||||||
// 构造请求体
|
|
||||||
const payload = {
|
|
||||||
message_id: msg.message_id,
|
|
||||||
user_id: this.userId,
|
|
||||||
user: this.userId, // 添加user参数，与user_id保持一致
|
|
||||||
rating: rating, // 'like' 或 'dislike'
|
|
||||||
content: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
// 更新 UI 状态
|
|
||||||
msg.feedbackLoading = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const result = await submitFeedback(payload);
|
|
||||||
console.log("提交反馈响应:", result);
|
|
||||||
if (result.code === 200) {
|
|
||||||
// 更新反馈状态（如果再次点击则撤销）
|
|
||||||
if (msg.feedback === rating) {
|
|
||||||
msg.feedback = null;
|
|
||||||
this.$message.success("已撤销");
|
|
||||||
} else {
|
|
||||||
msg.feedback = rating;
|
|
||||||
this.$message.success(rating === "like" ? "感谢点赞！" : "已提交点踩");
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.$message.error("提交失败：" + (result.msg || result.message));
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
this.$message.error("网络错误：" + err.message);
|
|
||||||
} finally {
|
|
||||||
msg.feedbackLoading = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 获取反馈列表
|
|
||||||
async fetchFeedbacks() {
|
|
||||||
/* if (!this.conversationId) {
|
|
||||||
this.$message.error("当前会话ID不存在，请先选择一个会话。");
|
|
||||||
return;
|
|
||||||
} */
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 调用API函数
|
|
||||||
const data = await getFeedbacks({
|
|
||||||
conversation_id: this.conversationId,
|
|
||||||
user_id: this.userId
|
|
||||||
});
|
|
||||||
|
|
||||||
// 处理响应数据
|
|
||||||
if (data.code === 200) {
|
|
||||||
// 检查data是否是数组，如果不是则尝试获取其content属性
|
|
||||||
const feedbacks = Array.isArray(data.data) ? data.data : (data.data?.content || []);
|
|
||||||
|
|
||||||
// 创建一个反馈映射，方便快速查找
|
|
||||||
const feedbackMap = {};
|
|
||||||
feedbacks.forEach(feedback => {
|
|
||||||
feedbackMap[feedback.message_id] = feedback.rating;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 更新消息列表中的反馈状态
|
|
||||||
this.messages = this.messages.map(msg => {
|
|
||||||
if (feedbackMap[msg.message_id] !== undefined) {
|
|
||||||
return {
|
|
||||||
...msg,
|
|
||||||
feedback: feedbackMap[msg.message_id],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return msg;
|
|
||||||
});
|
|
||||||
this.$message.success("获取反馈列表成功");
|
|
||||||
} else {
|
|
||||||
console.error('获取反馈失败: 响应格式不正确', data);
|
|
||||||
this.$message.error("获取反馈列表失败：" + (data.msg || data.message));
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取反馈失败:', error);
|
|
||||||
this.$message.error("网络错误：" + error.message);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// ==================== 新增：获取历史消息 ====================
|
|
||||||
async fetchHistoryMessages() {
|
|
||||||
if (!this.conversationId) {
|
|
||||||
// 如果会话列表不为空但没有选中会话，自动选中第一个
|
|
||||||
if (this.conversationList.length > 0) {
|
|
||||||
this.switchConversation(this.conversationList[0].id);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.$message.error("当前会话ID不存在，请先发起一次对话。");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果历史消息已加载，则不再重复加载
|
|
||||||
if (this.historyLoaded) {
|
|
||||||
this.$message.info("历史消息已加载");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 调用API函数
|
|
||||||
// 确保user参数是字符串类型并正确传递
|
|
||||||
const data = await getHistoryMessages({
|
|
||||||
conversation_id: this.conversationId,
|
|
||||||
user_id: this.userId,
|
|
||||||
user: String(this.userId)
|
|
||||||
});
|
|
||||||
|
|
||||||
// 处理响应数据
|
|
||||||
if (data.code === 200) {
|
|
||||||
let historyData;
|
|
||||||
try {
|
|
||||||
// 尝试解析数据（如果是字符串形式的JSON）
|
|
||||||
historyData = typeof data.data === 'string' ? JSON.parse(data.data) : data.data;
|
|
||||||
} catch (e) {
|
|
||||||
historyData = data.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(historyData)) {
|
|
||||||
// 格式化历史消息
|
|
||||||
const historyMessages = [];
|
|
||||||
historyData.forEach(msg => {
|
|
||||||
// 如果有query字段，添加用户消息
|
|
||||||
if (msg.query) {
|
|
||||||
historyMessages.push({
|
|
||||||
type: 'user',
|
|
||||||
content: msg.query,
|
|
||||||
message_id: msg.id + '-user', // 添加后缀以确保唯一性
|
|
||||||
feedback: null,
|
|
||||||
feedbackLoading: false,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果有answer字段，添加AI消息
|
|
||||||
if (msg.answer) {
|
|
||||||
historyMessages.push({
|
|
||||||
type: 'ai',
|
|
||||||
content: msg.answer,
|
|
||||||
message_id: msg.id,
|
|
||||||
references: msg.references || msg.sources || [], // 引用数据，适配不同字段名
|
|
||||||
feedback: msg.feedback || null,
|
|
||||||
feedbackLoading: false,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// 将历史消息添加到现有消息列表的开头
|
|
||||||
this.messages = [...historyMessages, ...this.messages];
|
|
||||||
this.historyLoaded = true; // 标记历史消息已加载
|
|
||||||
} else if (historyData && Array.isArray(historyData.messages)) {
|
|
||||||
// 格式化历史消息
|
|
||||||
const historyMessages = [];
|
|
||||||
historyData.messages.forEach(msg => {
|
|
||||||
if (msg.role === 'user') {
|
|
||||||
historyMessages.push({
|
|
||||||
type: 'user',
|
|
||||||
content: msg.content,
|
|
||||||
message_id: msg.id + '-user',
|
|
||||||
feedback: null,
|
|
||||||
feedbackLoading: false,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
historyMessages.push({
|
|
||||||
type: 'ai',
|
|
||||||
content: msg.content,
|
|
||||||
message_id: msg.id,
|
|
||||||
references: msg.references || [],
|
|
||||||
feedback: null,
|
|
||||||
feedbackLoading: false,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.messages = [...historyMessages, ...this.messages];
|
|
||||||
this.historyLoaded = true; // 标记历史消息已加载
|
|
||||||
} else {
|
|
||||||
console.error('获取历史消息失败: 响应格式不正确', historyData);
|
|
||||||
this.$message.error("获取历史消息失败：响应格式不正确");
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.error('获取历史消息失败:', data);
|
|
||||||
this.$message.error("获取历史消息失败：" + (data.msg || data.message));
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取历史消息失败:', error);
|
|
||||||
this.$message.error("网络错误：" + error.message);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeUnmount() {
|
|
||||||
if (this.abortController) {
|
|
||||||
this.abortController.abort();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.ai-chat-container {
|
|
||||||
padding: 20px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
height: calc(100vh - 100px);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-box {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid #ebeef5;
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: white;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-item {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-content {
|
|
||||||
max-width: 80%;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 18px;
|
|
||||||
margin-left: 8px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-message .message-content {
|
|
||||||
background-color: #1890ff;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ai-message .message-content {
|
|
||||||
background-color: #f0f2f5;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.references-section {
|
|
||||||
margin-left: 40px;
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.references-title {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.references-list {
|
|
||||||
list-style-type: none;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reference-item {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
border-bottom: 1px dashed #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reference-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
margin-bottom: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reference-source {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reference-content {
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 点赞/点踩按钮样式 */
|
|
||||||
.feedback-actions {
|
|
||||||
margin-left: 40px;
|
|
||||||
margin-top: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feedback-actions .el-button {
|
|
||||||
padding: 4px 8px;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.conversation-controls {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.conversation-list {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid #ebeef5;
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.conversation-item {
|
|
||||||
padding: 10px;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.conversation-item:hover {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.conversation-item.active {
|
|
||||||
background-color: #e6f7ff;
|
|
||||||
border-left: 3px solid #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.conv-title {
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.conv-time {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.conv-preview {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #666;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
8
src/views/aitutor/chatwarning/index.vue
Normal file
8
src/views/aitutor/chatwarning/index.vue
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<template>
|
||||||
|
<div class="cmd">你好
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {};
|
||||||
|
</script>
|
||||||
|
<style></style>
|
||||||
Reference in New Issue
Block a user