[feat][ai聊天][自动滚动到底部]

src/views/xjc-integratedmachine/common/ai/chat.vue

@@ -13,8 +13,8 @@
             </div>
         </div>
         <div class="main-content">
-            <div v-loading="loadingHistoryRecord" class="chat-container" ref="chatContainerRef">
-                <div class="message-list">
+            <div v-loading="loadingHistoryRecord" class="chat-container">
+                <div class="message-list" ref="chatContainerRef">
                     <div v-for="(item, index) in chatRecordList" :key="item.id">
                         <div v-if="item.isUser == 1" class="user-message">
                             <img src="@/assets/images/common/ai/user.png" alt="icon" style="margin-left: 4px"/>
@@ -133,6 +133,9 @@
         aiChatRecordList(queryForm).then(resp =>{
             chatRecordList.value = resp.rows;
             loadingHistoryRecord.value = false
+            setInterval(()=>{
+                scrollToBottom();
+            }, 100);
         })
     }
 
@@ -221,7 +224,8 @@
             streamHtmlData.value = htmlData;
             lastMsg.content = marked(streamMarkdownData.value)
             lastMsg.isTyping = false
-            // list()
+            // 组件挂载后自动滚动到底部
+            scrollToBottom();
         }
     }
 
@@ -519,19 +523,12 @@
     /*语音合成 ↑*/
 
     let chatContainerRef = ref(null)
-    let chatContainerRefObj = useTemplateRef(chatContainerRef)
-
-
-    const scrollToBottom = () => {
-        nextTick(() => {
-            chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight;
-        });
-    };
+    function scrollToBottom(){
+        chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight+20;
+    }
 
     onMounted(()=>{
         nextTick(()=>{
-            // 组件挂载后自动滚动到底部
-            scrollToBottom();
             initSpeechRecognition();
             initSpeechsynthesis();
             sendMessage()