Просмотр исходного кода

fix(aiChat): 修复AI聊天加载状态和快捷操作相关问题

1. 注释掉多余的批量工具加载状态样式判断
2. 新增快捷操作选项lang.ssAiChatQuickAction4
3. 发送消息时重置快捷选择状态
4. 添加加载动画定时器管理,修复内存泄漏
5. 为批量工具请求添加动态加载圆点动画
6. 在批量生成完成后清理加载定时器
lsc 1 день назад
Родитель
Сommit
750437dec4
1 измененных файлов с 22 добавлено и 5 удалено
  1. 22 5
      src/components/CollapsibleToolbar/componets/aiChat.vue

+ 22 - 5
src/components/CollapsibleToolbar/componets/aiChat.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
   <div class="ai-chat-container">
     <div class="message-quick-box">
       <div class="message-quick-box-item" :class="{ 'active': isQuickActions.includes('quick') }">
@@ -101,12 +101,13 @@
             </div>
           </div>
         </div>
-        <div class="message-content ai-message chat" :class="{'loading-state': message.chatloading && message.jsonData?.gType === 'trigger_batch_tool'}" v-if="message.aiContent || message.chatloading">
-          <div class="submenu-icon loading-icon" v-show="message.chatloading && message.jsonData?.gType === 'trigger_batch_tool'">
+         <!-- :class="{'loading-state': message.chatloading && message.jsonData?.gType === 'trigger_batch_tool'}" -->
+        <div class="message-content ai-message chat" v-if="message.aiContent || message.chatloading">
+          <!-- <div class="submenu-icon loading-icon" v-show="message.chatloading && message.jsonData?.gType === 'trigger_batch_tool'">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="spin">
               <circle cx="12" cy="12" r="10" stroke-dasharray="32" stroke-dashoffset="12"></circle>
             </svg>
-          </div>
+          </div> -->
           <div v-if="message.aiContent" v-html="message.aiContent"></div>
           <svg v-else xmlns="http://www.w3.org/2000/svg" width="32" height="32"
             viewBox="0 0 24 24"><!-- Icon from SVG Spinners by Utkarsh Verma - https://github.com/n3r4zzurr0/svg-spinners/blob/main/LICENSE -->
@@ -290,6 +291,7 @@ const quickActions = [
   lang.ssAiChatQuickAction2,
   lang.ssAiChatQuickAction6,
   lang.ssAiChatQuickAction7,
+  lang.ssAiChatQuickAction4,
 ]
 
 // 监听输入变化,当输入"/"时显示快捷操作
@@ -314,6 +316,7 @@ const sendMessage = () => {
     return
   }
   if (inputText.value.trim() || files.value.length > 0) {
+    isQuickActions.value = []
     // 添加用户消息
     messages.value.push({
       role: 'user',
@@ -357,6 +360,10 @@ const stopMessage = () => {
     messages.value.at(-1).chatloading = false
     messages.value.at(-1).loading = false
   }
+  if (loadingInterval.value) {
+    clearInterval(loadingInterval.value)
+    loadingInterval.value = null
+  }
 }
 
 // 处理文件上传
@@ -437,7 +444,8 @@ const session_name = ref('')
 const slidesStore = useSlidesStore()
 const mainStore = useMainStore()
 const gType = ref('chat')
-
+const loadingDots = ref('...')
+const loadingInterval = ref(null)
 
 const sendAction = async (action: string) => {
   const md = new MarkdownIt()
@@ -659,6 +667,13 @@ const sendAction = async (action: string) => {
   }
 
   if (gType.value === 'trigger_batch_tool') {
+    loadingInterval.value = setInterval(() => {
+      messages.value.at(-1).aiContent = messages.value.at(-1).aiContent.replace(/\./g, '')
+      messages.value.at(-1).aiContent += loadingDots.value
+      loadingDots.value = loadingDots.value === '...' ? '......' : '...'
+      console.log('loadingDots.value', loadingDots.value)
+      console.log('messages.value.at(-1).aiContent', messages.value.at(-1).aiContent)
+    }, 500)
     const result = chat_no_stream(prompt, agentid, props.userid || '', lang.lang)
     streamController.value = result
     console.log(result)
@@ -863,6 +878,8 @@ const generate = (message: ChatMessage) => {
       console.log('批量生成工具', JSON.parse(res))
       gType.value = 'chat'
       messages.value.at(-1).chatloading = false
+      clearInterval(loadingInterval.value)
+      loadingInterval.value = null
       messages.value.push({
         role: 'ai',
         aiContent: lang.ssBatchInteractiveWebDesc2,