fix(Application Management): Simple applications, advanced applications, embedded assistants, and full-screen mode answers do not scroll

Author: dataeaseShu

frontend/src/views/chat/answer/ChartAnswer.vue

@@ -25,6 +25,7 @@ const emits = defineEmits([
   'finish',
   'error',
   'stop',
+  'scrollBottom',
   'update:loading',
   'update:chatList',
   'update:currentChat',
@@ -215,13 +216,18 @@ const sendMessage = async () => {
 }
 
 function getChatData(recordId?: number) {
-  chatApi.get_chart_data(recordId).then((response) => {
-    _currentChat.value.records.forEach((record) => {
-      if (record.id === recordId) {
-        record.data = response
-      }
+  chatApi
+    .get_chart_data(recordId)
+    .then((response) => {
+      _currentChat.value.records.forEach((record) => {
+        if (record.id === recordId) {
+          record.data = response
+        }
+      })
+    })
+    .finally(() => {
+      emits('scrollBottom')
     })
-  })
 }
 function stop() {
   stopFlag.value = true

frontend/src/views/chat/answer/PredictAnswer.vue

@@ -24,6 +24,7 @@ const props = withDefaults(
 const emits = defineEmits([
   'finish',
   'error',
+  'scrollBottom',
   'stop',
   'update:loading',
   'update:chatList',
@@ -215,14 +216,19 @@ function getChatPredictData(recordId?: number) {
 }
 
 function getChatData(recordId?: number) {
-  chatApi.get_chart_data(recordId).then((response) => {
-    _currentChat.value.records.forEach((record) => {
-      if (record.id === recordId) {
-        record.data = response
-        console.log(record.data)
-      }
+  chatApi
+    .get_chart_data(recordId)
+    .then((response) => {
+      _currentChat.value.records.forEach((record) => {
+        if (record.id === recordId) {
+          record.data = response
+          console.log(record.data)
+        }
+      })
+    })
+    .finally(() => {
+      emits('scrollBottom')
     })
-  })
 }
 
 function stop() {

frontend/src/views/chat/index.vue

@@ -216,6 +216,7 @@
                     :current-chat-id="currentChatId"
                     :loading="isTyping"
                     :message="message"
+                    @scrollBottom="scrollToBottom"
                     :reasoning-name="['sql_answer', 'chart_answer']"
                     @finish="onChartAnswerFinish"
                     @error="onChartAnswerError"
@@ -327,6 +328,7 @@
                     :current-chat-id="currentChatId"
                     :loading="isTyping"
                     :message="message"
+                    @scrollBottom="scrollToBottom"
                     @finish="onPredictAnswerFinish"
                     @error="onPredictAnswerError"
                     @stop="onChatStop"
@@ -421,6 +423,8 @@ import icon_send_filled from '@/assets/svg/icon_send_filled.svg'
 import { useAssistantStore } from '@/stores/assistant'
 import { onClickOutside } from '@vueuse/core'
 import { useUserStore } from '@/stores/user'
+import { debounce } from 'lodash-es'
+
 import router from '@/router'
 const userStore = useUserStore()
 const props = defineProps<{
@@ -454,14 +458,14 @@ const chatListRef = ref()
 const innerRef = ref()
 const chatCreatorRef = ref()
 
-function scrollToBottom() {
+const scrollToBottom = debounce(() => {
   nextTick(() => {
     chatListRef.value?.scrollTo({
       top: chatListRef.value.wrapRef.scrollHeight,
       behavior: 'smooth',
     })
   })
-}
+}, 300)
 
 const loading = ref<boolean>(false)
 const chatList = ref<Array<ChatInfo>>([])
@@ -726,12 +730,10 @@ const sendMessage = async ($event: any = {}) => {
 
   loading.value = true
   isTyping.value = true
-  if (isCompletePage.value) {
-    scrollTopVal = innerRef.value!.clientHeight
-    scrollTime = setInterval(() => {
-      scrollBottom()
-    }, 300)
-  }
+  scrollTopVal = innerRef.value!.clientHeight
+  scrollTime = setInterval(() => {
+    scrollBottom()
+  }, 300)
   await assistantPrepareSend()
   const currentRecord = new ChatRecord()
   currentRecord.create_time = new Date()