feat: 代码消息类型调整
This commit is contained in:
@@ -115,7 +115,6 @@ export class WebSocketManager {
|
|||||||
|
|
||||||
async connect(): Promise<void> {
|
async connect(): Promise<void> {
|
||||||
if (this.isConnecting || this.connectionState) return
|
if (this.isConnecting || this.connectionState) return
|
||||||
|
|
||||||
this.isConnecting = true
|
this.isConnecting = true
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -4,32 +4,32 @@
|
|||||||
|
|
||||||
<!-- 消息列表(唯一滚动区) -->
|
<!-- 消息列表(唯一滚动区) -->
|
||||||
<div ref="listRef" class="flex-1 overflow-y-auto px-6 py-6 space-y-6">
|
<div ref="listRef" class="flex-1 overflow-y-auto px-6 py-6 space-y-6">
|
||||||
<div v-for="msg in chatMsgList" :key="msg.msgId" class="flex items-start gap-3"
|
<div v-for="msg in chatMsgList" :key="msg.messageId" class="flex items-start gap-3"
|
||||||
:class="msg.msgRole === MessageRole.ME ? 'justify-end' : 'justify-start'">
|
:class="msg.messageRole === MessageRole.ME ? 'justify-end' : 'justify-start'">
|
||||||
|
|
||||||
<!-- AI avatar -->
|
<!-- AI avatar -->
|
||||||
<img v-if="msg.msgRole === MessageRole.AI" class="w-9 h-9 rounded-full shrink-0"
|
<img v-if="msg.messageRole === MessageRole.AI" class="w-9 h-9 rounded-full shrink-0"
|
||||||
src="@assets/images/login/blue_logo.png" />
|
src="@assets/images/login/blue_logo.png" />
|
||||||
|
|
||||||
<!-- 消息气泡 -->
|
<!-- 消息气泡 -->
|
||||||
<div class="max-w-[70%]">
|
<div class="max-w-[70%]">
|
||||||
<div class="flex items-start gap-2 pt-0.5 mb-2"
|
<div class="flex items-start gap-2 pt-0.5 mb-2"
|
||||||
:class="msg.msgRole === MessageRole.ME ? 'flex-row-reverse' : 'flex-row'">
|
:class="msg.messageRole === MessageRole.ME ? 'flex-row-reverse' : 'flex-row'">
|
||||||
<span class="text-xs text-[#4E5969]"> ZHINIAN</span>
|
<span class="text-xs text-[#4E5969]"> ZHINIAN</span>
|
||||||
<span class="text-xs text-[#86909C]"> 20:30</span>
|
<span class="text-xs text-[#86909C]"> 20:30</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm text-gray-700"
|
<div class="text-sm text-gray-700"
|
||||||
:class="msg.msgRole === MessageRole.ME ? 'bg-[#f7f9fc] rounded-md px-2 py-2' : ''">
|
:class="msg.messageRole === MessageRole.ME ? 'bg-[#f7f9fc] rounded-md px-2 py-2' : ''">
|
||||||
{{ msg.msg }}
|
{{ msg.messageContent }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- AI 标识 -->
|
<!-- AI 标识 -->
|
||||||
<div v-if="msg.msgRole === MessageRole.AI" class="mt-2 text-xs text-gray-400 ">
|
<div v-if="msg.messageRole === MessageRole.AI" class="mt-2 text-xs text-gray-400 ">
|
||||||
本回答由 AI 生成
|
本回答由 AI 生成
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- AI 操作按钮 -->
|
<!-- AI 操作按钮 -->
|
||||||
<div v-if="msg.msgRole === MessageRole.AI"
|
<div v-if="msg.messageRole === MessageRole.AI"
|
||||||
class="mt-4 text-gray-500 flex items-center justify-between gap-4 ">
|
class="mt-4 text-gray-500 flex items-center justify-between gap-4 ">
|
||||||
<RiFileCopyLine size="16px" @click="copyFileClick(msg)" />
|
<RiFileCopyLine size="16px" @click="copyFileClick(msg)" />
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4">
|
||||||
@@ -43,7 +43,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- User avatar -->
|
<!-- User avatar -->
|
||||||
<img v-if="msg.msgRole === MessageRole.ME" class="w-9 h-9 rounded-full shrink-0"
|
<img v-if="msg.messageRole === MessageRole.ME" class="w-9 h-9 rounded-full shrink-0"
|
||||||
src="@assets/images/login/user_icon.png" />
|
src="@assets/images/login/user_icon.png" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -82,7 +82,7 @@ import { ref } from 'vue'
|
|||||||
import { RiLink, RiSendPlaneFill, RiFileCopyLine, RiShareForwardLine, RiDownload2Line, RiThumbUpLine, RiThumbDownLine } from '@remixicon/vue'
|
import { RiLink, RiSendPlaneFill, RiFileCopyLine, RiShareForwardLine, RiDownload2Line, RiThumbUpLine, RiThumbDownLine } from '@remixicon/vue'
|
||||||
import { onMounted, nextTick, onUnmounted } from "vue";
|
import { onMounted, nextTick, onUnmounted } from "vue";
|
||||||
import { WebSocketManager } from "@common/WebSocketManager";
|
import { WebSocketManager } from "@common/WebSocketManager";
|
||||||
import { MessageRole, MessageType, ChatMessage } from "./model/ChatModel";
|
import { MessageRole, ChatMessage } from "./model/ChatModel";
|
||||||
import { ThrottleUtils, IdUtils } from "@common/index";
|
import { ThrottleUtils, IdUtils } from "@common/index";
|
||||||
|
|
||||||
import { Session } from '../../utils/storage';
|
import { Session } from '../../utils/storage';
|
||||||
@@ -108,8 +108,8 @@ const agentId = ref("1");
|
|||||||
const conversationId = ref("");
|
const conversationId = ref("");
|
||||||
// 会话进行中标志
|
// 会话进行中标志
|
||||||
const isSessionActive = ref(false);
|
const isSessionActive = ref(false);
|
||||||
/// 指令
|
/// 指令通用消息类型
|
||||||
let commonType = "";
|
let commonTypeMessage: string = "";
|
||||||
|
|
||||||
// WebSocket 相关
|
// WebSocket 相关
|
||||||
let webSocketManager: WebSocketManager | null = null;
|
let webSocketManager: WebSocketManager | null = null;
|
||||||
@@ -159,7 +159,7 @@ const handleReplyText = (text: string) => {
|
|||||||
const handleReplyInstruct = async (message: string, type: string) => {
|
const handleReplyInstruct = async (message: string, type: string) => {
|
||||||
// await checkToken();
|
// await checkToken();
|
||||||
|
|
||||||
commonType = type;
|
commonTypeMessage = type;
|
||||||
// 重置消息状态,准备接收新的AI回复
|
// 重置消息状态,准备接收新的AI回复
|
||||||
resetMessageState();
|
resetMessageState();
|
||||||
sendMessage(message, true);
|
sendMessage(message, true);
|
||||||
@@ -214,7 +214,7 @@ const initHandler = () => {
|
|||||||
|
|
||||||
const getAccessToken = () => {
|
const getAccessToken = () => {
|
||||||
// 从本地存储获取 token
|
// 从本地存储获取 token
|
||||||
return 'cLKaO8WiZfFrxFmpsHnuy6STXndBMxnCpFem1AOM3b_LDEqkbQsUw5laUYv5mnUmgZcp2bIdnfKlAs7SPb6OvGlCf-TJrt0ez9OHULDzxG5Zfv63RR12a-s4nwD0LXeX';
|
return Session.get('token') || '';
|
||||||
};
|
};
|
||||||
|
|
||||||
const checkToken = async () => {
|
const checkToken = async () => {
|
||||||
@@ -335,7 +335,7 @@ const handleWebSocketMessage = (data: any) => {
|
|||||||
} else {
|
} else {
|
||||||
// 向后搜索最近的 AI 消息
|
// 向后搜索最近的 AI 消息
|
||||||
for (let i = chatMsgList.value.length - 1; i >= 0; i--) {
|
for (let i = chatMsgList.value.length - 1; i >= 0; i--) {
|
||||||
if (chatMsgList.value[i] && chatMsgList.value[i].msgRole === MessageRole.AI) {
|
if (chatMsgList.value[i] && chatMsgList.value[i].messageRole === MessageRole.AI) {
|
||||||
aiMsgIndex = i;
|
aiMsgIndex = i;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@@ -350,23 +350,23 @@ const handleWebSocketMessage = (data: any) => {
|
|||||||
if (data.content) {
|
if (data.content) {
|
||||||
if (chatMsgList.value[aiMsgIndex].isLoading) {
|
if (chatMsgList.value[aiMsgIndex].isLoading) {
|
||||||
// 首次收到内容:替换“加载中”文案并取消 loading 状态(恢复原始渲染逻辑)
|
// 首次收到内容:替换“加载中”文案并取消 loading 状态(恢复原始渲染逻辑)
|
||||||
chatMsgList.value[aiMsgIndex].msg = data.content;
|
chatMsgList.value[aiMsgIndex].messageContent = data.content;
|
||||||
chatMsgList.value[aiMsgIndex].isLoading = false;
|
chatMsgList.value[aiMsgIndex].isLoading = false;
|
||||||
} else {
|
} else {
|
||||||
// 后续流式内容追加
|
// 后续流式内容追加
|
||||||
chatMsgList.value[aiMsgIndex].msg += data.content;
|
chatMsgList.value[aiMsgIndex].messageContent += data.content;
|
||||||
}
|
}
|
||||||
nextTick(() => scrollToBottom());
|
nextTick(() => scrollToBottom());
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理完成状态
|
// 处理完成状态
|
||||||
if (data.finish) {
|
if (data.finish) {
|
||||||
const msg = chatMsgList.value[aiMsgIndex].msg;
|
const msg = chatMsgList.value[aiMsgIndex].messageContent;
|
||||||
if (!msg || chatMsgList.value[aiMsgIndex].isLoading) {
|
if (!msg || chatMsgList.value[aiMsgIndex].isLoading) {
|
||||||
chatMsgList.value[aiMsgIndex].msg = "未获取到内容,请重试";
|
chatMsgList.value[aiMsgIndex].messageContent = "未获取到内容,请重试";
|
||||||
chatMsgList.value[aiMsgIndex].isLoading = false;
|
chatMsgList.value[aiMsgIndex].isLoading = false;
|
||||||
if (data.toolCall) {
|
if (data.toolCall) {
|
||||||
chatMsgList.value[aiMsgIndex].msg = "";
|
chatMsgList.value[aiMsgIndex].messageContent = "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -455,14 +455,9 @@ const sendMessage = async (message: string, isInstruct: boolean = false) => {
|
|||||||
}
|
}
|
||||||
isSessionActive.value = true;
|
isSessionActive.value = true;
|
||||||
const newMsg: ChatMessage = {
|
const newMsg: ChatMessage = {
|
||||||
msgId: `msg_${chatMsgList.value.length}`,
|
|
||||||
msgRole: MessageRole.ME,
|
|
||||||
msg: message,
|
|
||||||
msgContent: {
|
|
||||||
type: MessageType.TEXT,
|
|
||||||
text: message,
|
|
||||||
},
|
|
||||||
messageId: IdUtils.generateMessageId(),
|
messageId: IdUtils.generateMessageId(),
|
||||||
|
messageRole: MessageRole.ME,
|
||||||
|
messageContent: message,
|
||||||
};
|
};
|
||||||
chatMsgList.value.push(newMsg);
|
chatMsgList.value.push(newMsg);
|
||||||
inputMessage.value = "";
|
inputMessage.value = "";
|
||||||
@@ -473,7 +468,7 @@ const sendMessage = async (message: string, isInstruct: boolean = false) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 通用WebSocket消息发送函数 -> 返回 Promise<boolean>
|
// 通用WebSocket消息发送函数 -> 返回 Promise<boolean>
|
||||||
const sendWebSocketMessage = async (messageType: number, messageContent: any, options: any = {}) => {
|
const sendWebSocketMessage = async (messageType: number, messageContent: string, options: any = {}) => {
|
||||||
const args = {
|
const args = {
|
||||||
conversationId: conversationId.value,
|
conversationId: conversationId.value,
|
||||||
agentId: agentId.value,
|
agentId: agentId.value,
|
||||||
@@ -482,7 +477,7 @@ const sendWebSocketMessage = async (messageType: number, messageContent: any, op
|
|||||||
messageId: options.messageId || currentSessionMessageId,
|
messageId: options.messageId || currentSessionMessageId,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/// 重试机制参数
|
||||||
const maxRetries = typeof options.retries === 'number' ? options.retries : 3;
|
const maxRetries = typeof options.retries === 'number' ? options.retries : 3;
|
||||||
const baseDelay = typeof options.baseDelay === 'number' ? options.baseDelay : 300; // ms
|
const baseDelay = typeof options.baseDelay === 'number' ? options.baseDelay : 300; // ms
|
||||||
const maxDelay = typeof options.maxDelay === 'number' ? options.maxDelay : 5000; // ms
|
const maxDelay = typeof options.maxDelay === 'number' ? options.maxDelay : 5000; // ms
|
||||||
@@ -571,8 +566,8 @@ const sendChat = async (message: string, isInstruct = false) => {
|
|||||||
isSessionActive.value = connected || false;
|
isSessionActive.value = connected || false;
|
||||||
// 更新AI消息状态
|
// 更新AI消息状态
|
||||||
const aiMsgIndex = chatMsgList.value.length - 1;
|
const aiMsgIndex = chatMsgList.value.length - 1;
|
||||||
if (aiMsgIndex >= 0 && chatMsgList.value[aiMsgIndex].msgRole === MessageRole.AI) {
|
if (aiMsgIndex >= 0 && chatMsgList.value[aiMsgIndex].messageRole === MessageRole.AI) {
|
||||||
chatMsgList.value[aiMsgIndex].msg = connected ? "" : "发送消息失败,请重试";
|
chatMsgList.value[aiMsgIndex].messageContent = connected ? "" : "发送消息失败,请重试";
|
||||||
chatMsgList.value[aiMsgIndex].isLoading = connected || false;
|
chatMsgList.value[aiMsgIndex].isLoading = connected || false;
|
||||||
}
|
}
|
||||||
if (connected) {
|
if (connected) {
|
||||||
@@ -585,22 +580,18 @@ const sendChat = async (message: string, isInstruct = false) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// 发送消息类型 指令/对话文本
|
||||||
const messageType = isInstruct ? 1 : 0;
|
const messageType = isInstruct ? 1 : 0;
|
||||||
const messageContent = isInstruct ? commonType : message;
|
const messageContent = isInstruct ? commonTypeMessage : message;
|
||||||
// 生成 messageId 并保存到当前会话变量(stopRequest 可能使用)
|
// 生成 messageId 并保存到当前会话变量(stopRequest 可能使用)
|
||||||
currentSessionMessageId = IdUtils.generateMessageId();
|
currentSessionMessageId = IdUtils.generateMessageId();
|
||||||
|
|
||||||
// 插入AI消息,并在 pendingMap 中记录
|
// 插入AI消息,并在 pendingMap 中记录
|
||||||
const aiMsg: ChatMessage = {
|
const aiMsg: ChatMessage = {
|
||||||
msgId: `msg_${chatMsgList.value.length}`,
|
|
||||||
msgRole: MessageRole.AI,
|
|
||||||
msg: "加载中",
|
|
||||||
isLoading: true,
|
|
||||||
msgContent: {
|
|
||||||
type: MessageType.TEXT,
|
|
||||||
text: "",
|
|
||||||
},
|
|
||||||
messageId: currentSessionMessageId,
|
messageId: currentSessionMessageId,
|
||||||
|
messageRole: MessageRole.AI,
|
||||||
|
messageContent: "加载中",
|
||||||
|
isLoading: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
chatMsgList.value.push(aiMsg);
|
chatMsgList.value.push(aiMsg);
|
||||||
@@ -615,7 +606,7 @@ const sendChat = async (message: string, isInstruct = false) => {
|
|||||||
const timeoutId = setTimeout(() => {
|
const timeoutId = setTimeout(() => {
|
||||||
const idx = pendingMap.get(currentSessionMessageId);
|
const idx = pendingMap.get(currentSessionMessageId);
|
||||||
if (idx != null && chatMsgList.value[idx] && chatMsgList.value[idx].isLoading) {
|
if (idx != null && chatMsgList.value[idx] && chatMsgList.value[idx].isLoading) {
|
||||||
chatMsgList.value[idx].msg = "请求超时,请重试";
|
chatMsgList.value[idx].messageContent = "请求超时,请重试";
|
||||||
chatMsgList.value[idx].isLoading = false;
|
chatMsgList.value[idx].isLoading = false;
|
||||||
pendingMap.delete(currentSessionMessageId);
|
pendingMap.delete(currentSessionMessageId);
|
||||||
pendingTimeouts.delete(currentSessionMessageId);
|
pendingTimeouts.delete(currentSessionMessageId);
|
||||||
@@ -630,7 +621,7 @@ const sendChat = async (message: string, isInstruct = false) => {
|
|||||||
if (!success) {
|
if (!success) {
|
||||||
const idx = pendingMap.get(currentSessionMessageId);
|
const idx = pendingMap.get(currentSessionMessageId);
|
||||||
if (idx != null && chatMsgList.value[idx]) {
|
if (idx != null && chatMsgList.value[idx]) {
|
||||||
chatMsgList.value[idx].msg = "发送消息失败,请重试";
|
chatMsgList.value[idx].messageContent = "发送消息失败,请重试";
|
||||||
chatMsgList.value[idx].isLoading = false;
|
chatMsgList.value[idx].isLoading = false;
|
||||||
}
|
}
|
||||||
// 清理 pending
|
// 清理 pending
|
||||||
@@ -663,14 +654,14 @@ const stopRequest = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (chatMsgList.value[aiMsgIndex] &&
|
if (chatMsgList.value[aiMsgIndex] &&
|
||||||
chatMsgList.value[aiMsgIndex].msgRole === MessageRole.AI) {
|
chatMsgList.value[aiMsgIndex].messageRole === MessageRole.AI) {
|
||||||
chatMsgList.value[aiMsgIndex].isLoading = false;
|
chatMsgList.value[aiMsgIndex].isLoading = false;
|
||||||
if (chatMsgList.value[aiMsgIndex].msg &&
|
if (chatMsgList.value[aiMsgIndex].messageContent &&
|
||||||
chatMsgList.value[aiMsgIndex].msg.trim() &&
|
chatMsgList.value[aiMsgIndex].messageContent.trim() &&
|
||||||
!chatMsgList.value[aiMsgIndex].msg.startsWith("加载中")) {
|
!chatMsgList.value[aiMsgIndex].messageContent.startsWith("加载中")) {
|
||||||
// 保留已显示内容
|
// 保留已显示内容
|
||||||
} else {
|
} else {
|
||||||
chatMsgList.value[aiMsgIndex].msg = "请求已停止";
|
chatMsgList.value[aiMsgIndex].messageContent = "请求已停止";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { url } from "inspector";
|
/// 消息角色枚举
|
||||||
|
|
||||||
export enum MessageRole {
|
export enum MessageRole {
|
||||||
// 智能体消息
|
// 智能体消息
|
||||||
AI = "AI",
|
AI = "AI",
|
||||||
@@ -9,52 +8,32 @@ export enum MessageRole {
|
|||||||
OTHER = "OTHER",
|
OTHER = "OTHER",
|
||||||
};
|
};
|
||||||
|
|
||||||
export enum MessageType {
|
|
||||||
// 文本消息
|
|
||||||
TEXT = "TEXT",
|
|
||||||
// 图片消息
|
|
||||||
IMAGE = "IMAGE",
|
|
||||||
};
|
|
||||||
|
|
||||||
/// Chat消息模型
|
/// Chat消息模型
|
||||||
export interface ChatMessaageContent {
|
|
||||||
type: MessageType,
|
|
||||||
text: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export class ChatMessage {
|
export class ChatMessage {
|
||||||
// 消息ID
|
|
||||||
msgId: string;
|
|
||||||
// 消息类型
|
|
||||||
msgRole: MessageRole;
|
|
||||||
// 消息内容
|
|
||||||
msg: string;
|
|
||||||
// 是否加载中
|
|
||||||
isLoading?: boolean;
|
|
||||||
// 消息内容详情
|
|
||||||
msgContent: ChatMessaageContent;
|
|
||||||
// 消息唯一标识
|
// 消息唯一标识
|
||||||
messageId: string;
|
messageId: string;
|
||||||
|
// 消息类型
|
||||||
|
messageRole: MessageRole;
|
||||||
|
// 消息内容
|
||||||
|
messageContent: string;
|
||||||
|
// 是否加载中
|
||||||
|
isLoading?: boolean;
|
||||||
// 工具调用信息
|
// 工具调用信息
|
||||||
toolCall?: any;
|
toolCall?: any;
|
||||||
// 问题信息
|
// 问题信息
|
||||||
question?: any;
|
question?: any;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
msgId: string,
|
|
||||||
msgRole: MessageRole,
|
|
||||||
msg: string,
|
|
||||||
isLoading: boolean = false,
|
|
||||||
msgContent: ChatMessaageContent,
|
|
||||||
messageId: string,
|
messageId: string,
|
||||||
|
messageRole: MessageRole,
|
||||||
|
messageContent: string,
|
||||||
|
isLoading: boolean = false,
|
||||||
toolCall?: any,
|
toolCall?: any,
|
||||||
question?: any
|
question?: any
|
||||||
) {
|
) {
|
||||||
this.msgId = msgId;
|
this.messageRole = messageRole;
|
||||||
this.msgRole = msgRole;
|
this.messageContent = messageContent;
|
||||||
this.msg = msg;
|
|
||||||
this.isLoading = isLoading;
|
this.isLoading = isLoading;
|
||||||
this.msgContent = msgContent;
|
|
||||||
this.messageId = messageId;
|
this.messageId = messageId;
|
||||||
this.toolCall = toolCall;
|
this.toolCall = toolCall;
|
||||||
this.question = question;
|
this.question = question;
|
||||||
|
|||||||
Reference in New Issue
Block a user