1、问答前端发音

2、ai对话自动滚到底部

src/views/AIQuestions.vue

@@ -41,7 +41,7 @@
           <!-- AI对话框 -->
           <div class="chat-dialog">
             <!-- 对话消息列表 -->
-            <div class="message-list">
+            <div class="message-list" ref="messageListRef">
               <div v-for="(item, index) in messageList" :key="index">
                 <!-- AI消息 -->
                 <div class="ai-message" v-if="item.type !== 'user'">
@@ -80,7 +80,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed,watch } from "vue";
+import {ref, onMounted, computed, watch, nextTick} from "vue";
 import { CreateDialogue, sendChatMessageStream } from "@/api/questions.js";
 import { useRouter, useRoute } from "vue-router";
 import { saveRecord } from '@/api/personalized/index.js'
@@ -179,6 +179,8 @@ const enableContext = ref(true); // 是否开启上下文
 // 接收 Stream 消息
 const receiveMessageFullText = ref("");
 const receiveMessageDisplayedText = ref("");
+const messageListRef = ref(null);
+
 
 // =========== 【聊天对话】相关 ===========
 
@@ -355,12 +357,11 @@ const doSendMessageStream = async (userMessage) => {
         // 根据事件类型处理
         if (data.eventType === 'TEXT') {
 
-          console.log(receiveMessageFullText.value,"========",data.receive.content);
           // 处理文本消息
           receiveMessageFullText.value += data.receive.content;
+
           // 首次返回需要添加一个 message 到页面，后面的都是更新
           if (isFirstChunk) {
-            console.log("000000000000000000000000000000000")
             isFirstChunk = false;
             // 弹出两个假数据
             activeMessageList.value.pop();
@@ -423,10 +424,11 @@ const messageList = computed(() => {
 // ============== 【消息滚动】相关 =============
 
 /** 滚动到 message 底部 */
-const scrollToBottom = async (isIgnore) => {
-  // if (messageRef.value) {
-  // messageRef.value.scrollToBottom(isIgnore)
-  // }
+const scrollToBottom = async (isIgnore = false) => {
+  await nextTick();
+  if (messageListRef.value) {
+    messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
+  }
 };
 
 /** 自提滚动效果 */