zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 消息输出时的滚动优化

Browse Source
This commit is contained in:
zoujing
2026-04-06 15:10:57 +08:00
parent 8884529b91
commit 605183e8dc
1 changed files with 289 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

389
src/pages/index/components/chat/ChatMainList/index.vue
View File

@@ -2,55 +2,130 @@
<view class="flex flex-col h-screen"> <view class="flex flex-col h-screen">
<!-- 顶部自定义导航栏 --> <!-- 顶部自定义导航栏 -->
<view class="header" :style="{ paddingTop: statusBarHeight + 'px' }"> <view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
<ChatTopNavBar ref="topNavBarRef" :mainPageDataModel="mainPageDataModel" /> <ChatTopNavBar
ref="topNavBarRef"
:mainPageDataModel="mainPageDataModel"
/>
</view> </view>
<!-- 消息列表（可滚动区域） --> <!-- 消息列表（可滚动区域） -->
<scroll-view class="main flex-full overflow-hidden scroll-y" scroll-y :scroll-top="scrollTop" <scroll-view
:scroll-with-animation="true" @scroll="handleScroll" @scrolltolower="handleScrollToLower"> class="main flex-full overflow-hidden scroll-y"
scroll-y
:scroll-top="scrollTop"
:scroll-with-animation="true"
@scroll="handleScroll"
@scrolltolower="handleScrollToLower"
>
<!-- welcome栏 --> <!-- welcome栏 -->
<ChatTopWelcome ref="welcomeRef" :mainPageDataModel="mainPageDataModel" /> <ChatTopWelcome ref="welcomeRef" :mainPageDataModel="mainPageDataModel" />
<NoticeMessage v-if="notitceConent" :noticeContent="notitceConent"></NoticeMessage> <NoticeMessage
v-if="notitceConent"
:noticeContent="notitceConent"
></NoticeMessage>
<view class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId"> <view
class="area-msg-list-content"
v-for="item in chatMsgList"
:key="item.msgId"
:id="item.msgId"
>
<template v-if="item.msgType === MessageRole.AI"> <template v-if="item.msgType === MessageRole.AI">
<ChatCardAI class="flex flex-justify-start" :key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`" <ChatCardAI
:text="item.componentName && item.componentName === CompName.longTextCard ? '' : item.msg || ''" :isLoading="item.isLoading"> class="flex flex-justify-start"
<template #content v-if="item.toolCall || item.componentName && item.componentName === CompName.longTextCard"> :key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`"
<AnswerComponent v-if=" item.componentName === CompName.longTextCard :text="
" :text="(item.componentMsg || item.msg)" :title="item.title" :finish="item.finish" /> item.componentName && item.componentName === CompName.longTextCard
<QuickBookingComponent v-if=" ? ''
item.toolCall && item.toolCall.componentName === CompName.quickBookingCard : item.msg || ''
" /> "
<DiscoveryCardComponent v-else-if=" :isLoading="item.isLoading"
item.toolCall && item.toolCall.componentName === CompName.discoveryCard >
" /> <template
<CreateServiceOrder v-else-if=" #content
item.toolCall && item.toolCall.componentName === CompName.callServiceCard v-if="
" :toolCall="item.toolCall" /> item.toolCall ||
<OpenMapComponent v-else-if=" (item.componentName &&
item.toolCall && item.toolCall.componentName === CompName.mapCard item.componentName === CompName.longTextCard)
" /> "
<GeneratorPhotoComponent v-else-if=" >
item.toolCall && item.toolCall.componentName === CompName.aigcPhotoGeneratorCard <AnswerComponent
" :toolCall="item.toolCall"/> v-if="item.componentName === CompName.longTextCard"
<Feedback v-else-if=" :text="item.componentMsg || item.msg"
item.toolCall && item.toolCall.componentName === CompName.feedbackCard :title="item.title"
" :toolCall="item.toolCall" /> :finish="item.finish"
<DetailCardCompontent v-else-if=" />
item.toolCall && item.toolCall.componentName === CompName.pictureAndCommodityCard <QuickBookingComponent
" :toolCall="item.toolCall" /> v-if="
<AddCarCrad v-else-if=" item.toolCall &&
item.toolCall && item.toolCall.componentName === CompName.enterLicensePlateCard item.toolCall.componentName === CompName.quickBookingCard
" :toolCall="item.toolCall" /> "
<SurveyQuestionnaire v-else-if=" />
item.toolCall && item.toolCall.componentName === CompName.callSurveyQuestionnaire <DiscoveryCardComponent
" :toolCall="item.toolCall" /> v-else-if="
item.toolCall &&
item.toolCall.componentName === CompName.discoveryCard
"
/>
<CreateServiceOrder
v-else-if="
item.toolCall &&
item.toolCall.componentName === CompName.callServiceCard
"
:toolCall="item.toolCall"
/>
<OpenMapComponent
v-else-if="
item.toolCall &&
item.toolCall.componentName === CompName.mapCard
"
/>
<GeneratorPhotoComponent
v-else-if="
item.toolCall &&
item.toolCall.componentName ===
CompName.aigcPhotoGeneratorCard
"
:toolCall="item.toolCall"
/>
<Feedback
v-else-if="
item.toolCall &&
item.toolCall.componentName === CompName.feedbackCard
"
:toolCall="item.toolCall"
/>
<DetailCardCompontent
v-else-if="
item.toolCall &&
item.toolCall.componentName ===
CompName.pictureAndCommodityCard
"
:toolCall="item.toolCall"
/>
<AddCarCrad
v-else-if="
item.toolCall &&
item.toolCall.componentName === CompName.enterLicensePlateCard
"
:toolCall="item.toolCall"
/>
<SurveyQuestionnaire
v-else-if="
item.toolCall &&
item.toolCall.componentName ===
CompName.callSurveyQuestionnaire
"
:toolCall="item.toolCall"
/>
</template> </template>
<template #footer> <template #footer>
<!-- 这个是底部 --> <!-- 这个是底部 -->
<AttachListComponent v-if="item.question" :question="item.question" /> <AttachListComponent
v-if="item.question"
:question="item.question"
/>
</template> </template>
</ChatCardAI> </ChatCardAI>
</template> </template>
@@ -61,15 +136,21 @@
<template v-else> <template v-else>
<ChatCardOther class="flex flex-justify-center" :text="item.msg"> <ChatCardOther class="flex flex-justify-center" :text="item.msg">
<ActivityListComponent v-if=" <ActivityListComponent
v-if="
mainPageDataModel.activityList && mainPageDataModel.activityList &&
mainPageDataModel.activityList.length > 0 mainPageDataModel.activityList.length > 0
" :activityList="mainPageDataModel.activityList" /> "
:activityList="mainPageDataModel.activityList"
/>
<RecommendPostsComponent v-if=" <RecommendPostsComponent
v-if="
mainPageDataModel.recommendTheme && mainPageDataModel.recommendTheme &&
mainPageDataModel.recommendTheme.length > 0 mainPageDataModel.recommendTheme.length > 0
" :recommendThemeList="mainPageDataModel.recommendTheme" /> "
:recommendThemeList="mainPageDataModel.recommendTheme"
/>
</ChatCardOther> </ChatCardOther>
</template> </template>
</view> </view>
@@ -78,9 +159,17 @@
<!-- 输入框区域 --> <!-- 输入框区域 -->
<view class="pb-safe-area"> <view class="pb-safe-area">
<ChatQuickAccess /> <ChatQuickAccess />
<ChatInputArea ref="inputAreaRef" v-model="inputMessage" :holdKeyboard="holdKeyboard" <ChatInputArea
:is-session-active="isSessionActive" :stop-request="stopRequest" @send="sendMessageAction" ref="inputAreaRef"
@noHideKeyboard="handleNoHideKeyboard" @keyboardShow="handleKeyboardShow" @keyboardHide="handleKeyboardHide" /> v-model="inputMessage"
:holdKeyboard="holdKeyboard"
:is-session-active="isSessionActive"
:stop-request="stopRequest"
@send="sendMessageAction"
@noHideKeyboard="handleNoHideKeyboard"
@keyboardShow="handleKeyboardShow"
@keyboardHide="handleKeyboardHide"
/>
</view> </view>
</view> </view>
</template> </template>
@@ -137,7 +226,6 @@ const topNavBarRef = ref();
const welcomeRef = ref(); const welcomeRef = ref();
const notitceConent = ref(null); const notitceConent = ref(null);
const holdKeyboardTimer = ref(null); const holdKeyboardTimer = ref(null);
/// focus时，点击页面的时候不收起键盘 /// focus时，点击页面的时候不收起键盘
const holdKeyboard = ref(false); const holdKeyboard = ref(false);
@@ -151,9 +239,12 @@ const scrollTop = ref(99999);
/// 会话列表 /// 会话列表
const chatMsgList = ref([]); const chatMsgList = ref([]);
/// 输入口的输入消息 /// 输入框的输入消息
const inputMessage = ref(""); const inputMessage = ref("");
/// 是否自动滚动到底部 (人工手动向上滚动时设为false)
const isAutoScroll = ref(true);
/// agentId 首页接口中获取 /// agentId 首页接口中获取
const agentId = ref("1"); const agentId = ref("1");
/// 会话ID 历史数据接口中获取 /// 会话ID 历史数据接口中获取
@@ -169,7 +260,12 @@ let messageCommonType = "";
// WebSocket 相关 // WebSocket 相关
let webSocketManager = null; let webSocketManager = null;
/// 使用统一的连接状态判断函数，避免状态不同步 /// 使用统一的连接状态判断函数，避免状态不同步
const isWsConnected = () => !!(webSocketManager && typeof webSocketManager.isConnected === "function" && webSocketManager.isConnected()); const isWsConnected = () =>
!!(
webSocketManager &&
typeof webSocketManager.isConnected === "function" &&
webSocketManager.isConnected()
);
// pendingMap: messageId -> msgIndex // pendingMap: messageId -> msgIndex
const pendingMap = new Map(); const pendingMap = new Map();
@@ -208,7 +304,7 @@ const handleKeyboardShow = () => {
holdKeyboard.value = true; holdKeyboard.value = true;
// 键盘弹起时调整聊天内容的底部边距并滚动到底部 // 键盘弹起时调整聊天内容的底部边距并滚动到底部
setTimeout(() => { setTimeout(() => {
scrollToBottom(); scrollToBottom(true);
}, 150); }, 150);
}; };
@@ -220,45 +316,66 @@ const handleKeyboardHide = () => {
// 处理用户滚动事件 // 处理用户滚动事件
const welcomeHeight = ref(0); const welcomeHeight = ref(0);
const handleScroll = ThrottleUtils.createThrottle(({ detail }) => { let lastScrollTop = 0;
const handleScroll = (e) => {
const detail = e.detail;
topNavBarRef.value.show = parseInt(detail.scrollTop) > welcomeHeight.value; topNavBarRef.value.show = parseInt(detail.scrollTop) > welcomeHeight.value;
}, 50);
const currentScrollTop = detail.scrollTop;
// 如果向上滚动 (当前位置小于上一次记录的位置)
if (currentScrollTop < lastScrollTop - 2) {
// 增加 2px 阈值防止抖动
isAutoScroll.value = false;
}
lastScrollTop = currentScrollTop;
};
// 处理滚动到底部事件 // 处理滚动到底部事件
const handleScrollToLower = () => { }; const handleScrollToLower = () => {
// 当用户滚动到底部时，明确开启自动滚动
isAutoScroll.value = true;
};
// 滚动到底部 - 优化版本，确保打字机效果始终可见 // 滚动到底部 - 优化版本，确保打字机效果始终可见
const scrollToBottom = () => { const scrollToBottom = (force = false) => {
// 如果当前不是自动滚动模式且非强制触发，则不执行滚动
if (!isAutoScroll.value && !force) {
console.log("暂停自动滚动，当前位置:", scrollTop.value);
return;
}
nextTick(() => { nextTick(() => {
// 使用更大的值确保滚动到真正的底部 // 使用更大的值确保滚动到真正的底部
scrollTop.value = 99999; const targetScrollTop = 99999 + Math.random();
// 强制触发滚动更新，增加延迟确保DOM更新完成 scrollTop.value = targetScrollTop;
setTimeout(() => {
scrollTop.value = scrollTop.value + Math.random();
}, 10);
}); });
}; };
// 延时滚动 // 延时滚动
const setTimeoutScrollToBottom = () => setTimeout(() => scrollToBottom(), 100); const setTimeoutScrollToBottom = (force = false) =>
setTimeout(() => scrollToBottom(force), 100);
// 发送普通消息 // 发送普通消息
const handleReplyText = (text) => { const handleReplyText = (text) => {
// 发送消息时，强制开启自动滚动
isAutoScroll.value = true;
// 重置消息状态，准备接收新的AI回复 // 重置消息状态，准备接收新的AI回复
resetMessageState(); resetMessageState();
sendMessage(text); sendMessage(text);
setTimeoutScrollToBottom(); setTimeoutScrollToBottom(true);
}; };
// 是发送指令消息 // 是发送指令消息
const handleReplyInstruct = async (item) => { const handleReplyInstruct = async (item) => {
await checkToken(); await checkToken();
// 发送消息时，强制开启自动滚动
isAutoScroll.value = true;
messageCommonType = item.type; messageCommonType = item.type;
// 重置消息状态，准备接收新的AI回复 // 重置消息状态，准备接收新的AI回复
resetMessageState(); resetMessageState();
sendMessage(item.title, true); sendMessage(item.title, true);
setTimeoutScrollToBottom(); setTimeoutScrollToBottom(true);
}; };
// 输入区的发送消息事件 // 输入区的发送消息事件
@@ -267,6 +384,8 @@ const sendMessageAction = (inputText) => {
if (!inputText.trim()) return; if (!inputText.trim()) return;
handleNoHideKeyboard(); handleNoHideKeyboard();
// 发送消息时，强制开启自动滚动
isAutoScroll.value = true;
// 重置消息状态，准备接收新的AI回复 // 重置消息状态，准备接收新的AI回复
resetMessageState(); resetMessageState();
@@ -278,7 +397,7 @@ const sendMessageAction = (inputText) => {
}, 100); }, 100);
} }
setTimeoutScrollToBottom(); setTimeoutScrollToBottom(true);
}; };
/// 添加通知 /// 添加通知
@@ -295,7 +414,7 @@ const addNoticeListener = () => {
uni.$on(SCROLL_TO_BOTTOM, () => { uni.$on(SCROLL_TO_BOTTOM, () => {
setTimeout(() => { setTimeout(() => {
scrollToBottom(); scrollToBottom(true);
}, 200); }, 200);
}); });
@@ -425,11 +544,14 @@ const initWebSocket = async () => {
// 连接成功后发送 welcome 消息 (messageType=4) // 连接成功后发送 welcome 消息 (messageType=4)
try { try {
// fire-and-forget, sendWebSocketMessage 会处理重连与队列 // fire-and-forget, sendWebSocketMessage 会处理重连与队列
sendWebSocketMessage(MessageType.notice, Command.messageInit, { tryReconnect: true, messageId:IdUtils.generateMessageId() }).catch((e) => { sendWebSocketMessage(MessageType.notice, Command.messageInit, {
console.warn('发送 Command.messageInit 消息失败:', e); tryReconnect: true,
messageId: IdUtils.generateMessageId(),
}).catch((e) => {
console.warn("发送 Command.messageInit 消息失败:", e);
}); });
} catch (e) { } catch (e) {
console.warn('发送 Command.messageInit 消息时异常:', e); console.warn("发送 Command.messageInit 消息时异常:", e);
} }
}, },
@@ -487,7 +609,7 @@ const handleWebSocketMessage = (data) => {
return; return;
} }
if (data.messageType && data.messageType === 'broadcast') { if (data.messageType && data.messageType === "broadcast") {
console.log("收到 welcome 类型消息:", data); console.log("收到 welcome 类型消息:", data);
if (data.content) { if (data.content) {
notitceConent.value = data.content; notitceConent.value = data.content;
@@ -501,26 +623,39 @@ const handleWebSocketMessage = (data) => {
// 1) Try to find an existing AI message that already has the same replyMessageId // 1) Try to find an existing AI message that already has the same replyMessageId
for (let i = chatMsgList.value.length - 1; i >= 0; i--) { for (let i = chatMsgList.value.length - 1; i >= 0; i--) {
const it = chatMsgList.value[i]; const it = chatMsgList.value[i];
if (it && it.msgType === MessageRole.AI && it.replyMessageId === data.replyMessageId) { if (
it &&
it.msgType === MessageRole.AI &&
it.replyMessageId === data.replyMessageId
) {
aiMsgIndex = i; aiMsgIndex = i;
break; break;
} }
} }
// 2) If not found, check pendingMap for currentSessionMessageId // 2) If not found, check pendingMap for currentSessionMessageId
if (aiMsgIndex === -1 && currentSessionMessageId && pendingMap.has(currentSessionMessageId)) { if (
aiMsgIndex === -1 &&
currentSessionMessageId &&
pendingMap.has(currentSessionMessageId)
) {
const idx = pendingMap.get(currentSessionMessageId); const idx = pendingMap.get(currentSessionMessageId);
if (idx >= 0 && idx < chatMsgList.value.length) { if (idx >= 0 && idx < chatMsgList.value.length) {
const item = chatMsgList.value[idx]; const item = chatMsgList.value[idx];
// If the pending item already has a different non-empty replyMessageId, create a new AI entry // If the pending item already has a different non-empty replyMessageId, create a new AI entry
if (item && item.msgType === MessageRole.AI && item.replyMessageId && item.replyMessageId !== data.replyMessageId) { if (
item &&
item.msgType === MessageRole.AI &&
item.replyMessageId &&
item.replyMessageId !== data.replyMessageId
) {
const aiMsg = { const aiMsg = {
msgId: `msg_${chatMsgList.value.length}`, msgId: `msg_${chatMsgList.value.length}`,
msgType: MessageRole.AI, msgType: MessageRole.AI,
msg: "", msg: "",
isLoading: false, isLoading: false,
messageId: currentSessionMessageId, messageId: currentSessionMessageId,
replyMessageId: data.replyMessageId || '', replyMessageId: data.replyMessageId || "",
componentName: "", componentName: "",
title: "", title: "",
finish: false, finish: false,
@@ -542,7 +677,7 @@ const handleWebSocketMessage = (data) => {
msg: "", msg: "",
isLoading: false, isLoading: false,
messageId: currentSessionMessageId, messageId: currentSessionMessageId,
replyMessageId: data.replyMessageId || '', replyMessageId: data.replyMessageId || "",
componentName: "", componentName: "",
title: "", title: "",
finish: false, finish: false,
@@ -553,7 +688,10 @@ const handleWebSocketMessage = (data) => {
} else { } else {
// No replyMessageId: fall back to most recent AI message // No replyMessageId: fall back to most recent AI message
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].msgType === MessageRole.AI) { if (
chatMsgList.value[i] &&
chatMsgList.value[i].msgType === MessageRole.AI
) {
aiMsgIndex = i; aiMsgIndex = i;
break; break;
} }
@@ -566,12 +704,12 @@ const handleWebSocketMessage = (data) => {
// 防护：确保 aiMsgIndex 有效 // 防护：确保 aiMsgIndex 有效
if (aiMsgIndex < 0 || aiMsgIndex >= chatMsgList.value.length) { if (aiMsgIndex < 0 || aiMsgIndex >= chatMsgList.value.length) {
console.error('无效的 aiMsgIndex:', aiMsgIndex); console.error("无效的 aiMsgIndex:", aiMsgIndex);
return; return;
} }
// replyMessageId // replyMessageId
if(data.replyMessageId) { if (data.replyMessageId) {
chatMsgList.value[aiMsgIndex].replyMessageId = data.replyMessageId; chatMsgList.value[aiMsgIndex].replyMessageId = data.replyMessageId;
} }
@@ -599,7 +737,9 @@ const handleWebSocketMessage = (data) => {
// 直接拼接内容到对应 AI 消息 // 直接拼接内容到对应 AI 消息
if (data.content) { if (data.content) {
// 如果该条消息属于 longTextCard，使用 componentMsg 存储内容并保持 ChatCardAI 的 text 为空 // 如果该条消息属于 longTextCard，使用 componentMsg 存储内容并保持 ChatCardAI 的 text 为空
const isLongText = aiItem.componentName === CompName.longTextCard || data.componentName === CompName.longTextCard; const isLongText =
aiItem.componentName === CompName.longTextCard ||
data.componentName === CompName.longTextCard;
if (isLongText) { if (isLongText) {
if (aiItem.isLoading) { if (aiItem.isLoading) {
aiItem.componentMsg = (aiItem.componentMsg || "") + data.content; aiItem.componentMsg = (aiItem.componentMsg || "") + data.content;
@@ -703,7 +843,7 @@ const sendMessage = async (message, isInstruct = false) => {
try { try {
await initWebSocket(); await initWebSocket();
// 等待短暂时间确保连接建立 // 等待短暂时间确保连接建立
await new Promise(resolve => setTimeout(resolve, 1000)); await new Promise((resolve) => setTimeout(resolve, 1000));
// 检查连接是否成功建立 // 检查连接是否成功建立
if (!isWsConnected()) { if (!isWsConnected()) {
@@ -742,13 +882,17 @@ const sendMessage = async (message, isInstruct = false) => {
chatMsgList.value.push(newMsg); chatMsgList.value.push(newMsg);
inputMessage.value = ""; inputMessage.value = "";
// 发送消息后滚动到底部 // 发送消息后滚动到底部
setTimeoutScrollToBottom(); setTimeoutScrollToBottom(true);
sendChat(message, isInstruct); sendChat(message, isInstruct);
console.log("发送的新消息：", JSON.stringify(newMsg)); console.log("发送的新消息：", JSON.stringify(newMsg));
}; };
// 通用WebSocket消息发送函数 -> 返回 Promise<boolean> // 通用WebSocket消息发送函数 -> 返回 Promise<boolean>
const sendWebSocketMessage = async (messageType, messageContent, options = {}) => { const sendWebSocketMessage = async (
messageType,
messageContent,
options = {},
) => {
const args = { const args = {
conversationId: conversationId.value, conversationId: conversationId.value,
agentId: agentId.value, agentId: agentId.value,
@@ -757,9 +901,11 @@ const sendWebSocketMessage = async (messageType, messageContent, options = {}) =
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 =
const maxDelay = typeof options.maxDelay === 'number' ? options.maxDelay : 5000; // ms typeof options.baseDelay === "number" ? options.baseDelay : 300; // ms
const maxDelay =
typeof options.maxDelay === "number" ? options.maxDelay : 5000; // ms
for (let attempt = 0; attempt <= maxRetries; attempt++) { for (let attempt = 0; attempt <= maxRetries; attempt++) {
// 确保连接 // 确保连接
@@ -768,13 +914,13 @@ const sendWebSocketMessage = async (messageType, messageContent, options = {}) =
try { try {
await initWebSocket(); await initWebSocket();
} catch (e) { } catch (e) {
console.error('reconnect failed in sendWebSocketMessage:', e); console.error("reconnect failed in sendWebSocketMessage:", e);
} }
} }
} }
if (!isWsConnected()) { if (!isWsConnected()) {
if (!options.silent) console.warn('WebSocket 未连接，无法发送消息', args); if (!options.silent) console.warn("WebSocket 未连接，无法发送消息", args);
// 如果还有重试机会，进行等待后重试 // 如果还有重试机会，进行等待后重试
if (attempt < maxRetries) { if (attempt < maxRetries) {
const delay = Math.min(maxDelay, baseDelay * Math.pow(2, attempt)); const delay = Math.min(maxDelay, baseDelay * Math.pow(2, attempt));
@@ -796,25 +942,41 @@ const sendWebSocketMessage = async (messageType, messageContent, options = {}) =
// 若返回 false，消息可能已经被 manager 入队并触发连接流程。 // 若返回 false，消息可能已经被 manager 入队并触发连接流程。
// 在这种情况下避免立即当作失败处理，而是等待短暂时间以观察连接是否建立并由 manager 发送队列。 // 在这种情况下避免立即当作失败处理，而是等待短暂时间以观察连接是否建立并由 manager 发送队列。
console.warn('webSocketManager.sendMessage 返回 false，等待连接或队列发送...', { attempt, args }); console.warn(
const waitForConnectMs = typeof options.waitForConnectMs === 'number' ? options.waitForConnectMs : 5000; "webSocketManager.sendMessage 返回 false，等待连接或队列发送...",
if (webSocketManager && typeof webSocketManager.isConnected === 'function' && !webSocketManager.isConnected()) { { attempt, args },
);
const waitForConnectMs =
typeof options.waitForConnectMs === "number"
? options.waitForConnectMs
: 5000;
if (
webSocketManager &&
typeof webSocketManager.isConnected === "function" &&
!webSocketManager.isConnected()
) {
const startTs = Date.now(); const startTs = Date.now();
while (Date.now() - startTs < waitForConnectMs) { while (Date.now() - startTs < waitForConnectMs) {
await sleep(200); await sleep(200);
if (webSocketManager.isConnected()) { if (webSocketManager.isConnected()) {
// 给 manager 一点时间处理队列并发送 // 给 manager 一点时间处理队列并发送
await sleep(150); await sleep(150);
console.log('检测到 manager 已连接，假定队列消息已发送', args); console.log("检测到 manager 已连接，假定队列消息已发送", args);
return true; return true;
} }
} }
console.warn('等待 manager 建连超时，进入重试逻辑', { waitForConnectMs, args }); console.warn("等待 manager 建连超时，进入重试逻辑", {
waitForConnectMs,
args,
});
} else { } else {
console.warn('sendMessage 返回 false 但 manager 看起来已连接或不可用，继续重试', { args }); console.warn(
"sendMessage 返回 false 但 manager 看起来已连接或不可用，继续重试",
{ args },
);
} }
} catch (error) { } catch (error) {
console.error('发送WebSocket消息异常:', error, args); console.error("发送WebSocket消息异常:", error, args);
} }
// 失败且还有重试机会，等待指数退避 // 失败且还有重试机会，等待指数退避
@@ -845,8 +1007,13 @@ const sendChat = async (message, isInstruct = false) => {
isSessionActive.value = connected; isSessionActive.value = connected;
// 更新AI消息状态 // 更新AI消息状态
const aiMsgIndex = chatMsgList.value.length - 1; const aiMsgIndex = chatMsgList.value.length - 1;
if (aiMsgIndex >= 0 && chatMsgList.value[aiMsgIndex].msgType === MessageRole.AI) { if (
chatMsgList.value[aiMsgIndex].msg = connected ? "" : "发送消息失败，请重试"; aiMsgIndex >= 0 &&
chatMsgList.value[aiMsgIndex].msgType === MessageRole.AI
) {
chatMsgList.value[aiMsgIndex].msg = connected
? ""
: "发送消息失败，请重试";
chatMsgList.value[aiMsgIndex].isLoading = connected; chatMsgList.value[aiMsgIndex].isLoading = connected;
} }
if (connected) { if (connected) {
@@ -871,14 +1038,14 @@ const sendChat = async (message, isInstruct = false) => {
msg: "思考中", msg: "思考中",
isLoading: true, isLoading: true,
messageId: currentSessionMessageId, messageId: currentSessionMessageId,
replyMessageId: '', replyMessageId: "",
componentName: "", componentName: "",
title: "", title: "",
finish: false, finish: false,
}; };
chatMsgList.value.push(aiMsg); chatMsgList.value.push(aiMsg);
// 添加AI消息后滚动到底部 // 添加AI消息后滚动到底部
setTimeoutScrollToBottom(); setTimeoutScrollToBottom(true);
const aiMsgIndex = chatMsgList.value.length - 1; const aiMsgIndex = chatMsgList.value.length - 1;
// 记录 pendingMap // 记录 pendingMap
@@ -887,19 +1054,26 @@ const sendChat = async (message, 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].msg = "请求超时，请重试";
chatMsgList.value[idx].isLoading = false; chatMsgList.value[idx].isLoading = false;
pendingMap.delete(currentSessionMessageId); pendingMap.delete(currentSessionMessageId);
pendingTimeouts.delete(currentSessionMessageId); pendingTimeouts.delete(currentSessionMessageId);
isSessionActive.value = false; isSessionActive.value = false;
setTimeoutScrollToBottom(); setTimeoutScrollToBottom(true);
} }
}, MESSAGE_TIMEOUT); }, MESSAGE_TIMEOUT);
pendingTimeouts.set(currentSessionMessageId, timeoutId); pendingTimeouts.set(currentSessionMessageId, timeoutId);
// 发送消息，支持重连尝试 // 发送消息，支持重连尝试
const success = await sendWebSocketMessage(messageType, messageContent, { messageId: currentSessionMessageId, tryReconnect: true }); const success = await sendWebSocketMessage(messageType, messageContent, {
messageId: currentSessionMessageId,
tryReconnect: true,
});
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]) {
@@ -922,7 +1096,10 @@ const stopRequest = async () => {
// 发送中断消息给服务器 (messageType=2)，带上当前 messageId // 发送中断消息给服务器 (messageType=2)，带上当前 messageId
try { try {
await sendWebSocketMessage(MessageType.stop, "stop_request", { messageId: currentSessionMessageId, silent: true }); await sendWebSocketMessage(MessageType.stop, "stop_request", {
messageId: currentSessionMessageId,
silent: true,
});
} catch (e) { } catch (e) {
console.warn("stopRequest send failed:", e); console.warn("stopRequest send failed:", e);
} }
@@ -935,12 +1112,16 @@ const stopRequest = async () => {
aiMsgIndex = chatMsgList.value.length - 1; aiMsgIndex = chatMsgList.value.length - 1;
} }
if (chatMsgList.value[aiMsgIndex] && if (
chatMsgList.value[aiMsgIndex].msgType === MessageRole.AI) { chatMsgList.value[aiMsgIndex] &&
chatMsgList.value[aiMsgIndex].msgType === MessageRole.AI
) {
chatMsgList.value[aiMsgIndex].isLoading = false; chatMsgList.value[aiMsgIndex].isLoading = false;
if (chatMsgList.value[aiMsgIndex].msg && if (
chatMsgList.value[aiMsgIndex].msg &&
chatMsgList.value[aiMsgIndex].msg.trim() && chatMsgList.value[aiMsgIndex].msg.trim() &&
!chatMsgList.value[aiMsgIndex].msg.startsWith("思考中")) { !chatMsgList.value[aiMsgIndex].msg.startsWith("思考中")
) {
// 保留已显示内容 // 保留已显示内容
} else { } else {
chatMsgList.value[aiMsgIndex].msg = "请求已停止"; chatMsgList.value[aiMsgIndex].msg = "请求已停止";
@@ -958,7 +1139,7 @@ const stopRequest = async () => {
// 重置会话状态 // 重置会话状态
isSessionActive.value = false; isSessionActive.value = false;
setTimeoutScrollToBottom(); setTimeoutScrollToBottom(true);
}; };
// 组件销毁时清理资源 // 组件销毁时清理资源