fix(多模型调试): 支持上滑查看对话记录

src/views/multi-model-dialogue/components/footer-operation.vue

@@ -29,7 +29,7 @@ const emit = defineEmits<{
   addAnswerMessageItem: [messageId: string, messageItem: MessageItemInterface, index: number]
   updateMessageItem: [messageId: string, messageItem: Partial<MessageItemInterface>, index: number]
   deleteMessageItem: [messageId: string, index: number]
-  messageListScrollToBottom: []
+  messageListScrollToBottom: [autoScrollBottom?: boolean]
   clearAllMessage: []
 }>()
 
@@ -69,14 +69,18 @@ const uploadFileIcon = (type: string) => {
   return `https://gsst-poe-sit.gz.bcebos.com/icon/${type}.svg`
 }
 
-const messageListScrollToBottomThrottle = throttle(() => {
-  emit('messageListScrollToBottom')
-}, 300)
+const messageListScrollToBottomThrottle = throttle(
+  () => {
+    emit('messageListScrollToBottom')
+  },
+  50,
+  { leading: true, trailing: true },
+)
 
 watch(
   () => uploadImageList.value.length,
   () => {
-    emit('messageListScrollToBottom')
+    emit('messageListScrollToBottom', true)
   },
 )
 
@@ -123,7 +127,7 @@ function handleQuestionSubmit() {
     imageUrl: uploadImageList.value?.[0]?.url || '',
   })
 
-  emit('messageListScrollToBottom')
+  emit('messageListScrollToBottom', true)
 
   multiModelDialogueList.value.forEach((modelItem, modelIndex) => {
     const messages: QuestionMessageItem[] = []
@@ -158,7 +162,10 @@ function handleQuestionSubmit() {
       { ...messageItemFactory(), role: 'assistant', isTextContentLoading: true, isAnswerResponseLoading: true },
       modelIndex,
     )
-    emit('messageListScrollToBottom')
+
+    setTimeout(() => {
+      emit('messageListScrollToBottom', true)
+    }, 200)
 
     modelItem.controller = new AbortController()
 
@@ -234,7 +241,10 @@ function handleQuestionSubmit() {
         modelItem.isAnswerResponseWait = false
         userStore.fetchUpdateEquityInfo()
         emit('updateMessageItem', answerMessageId, { isAnswerResponseLoading: false }, modelIndex)
-        emit('messageListScrollToBottom')
+
+        setTimeout(() => {
+          emit('messageListScrollToBottom')
+        }, 100)
       },
     })
 

src/views/multi-model-dialogue/components/message-list.vue

 <script setup lang="ts">
-import { nextTick, useTemplateRef } from 'vue'
+import { useTemplateRef } from 'vue'
 import { ScrollbarInst } from 'naive-ui'
+import { useElementVisibility } from '@vueuse/core'
 import MessageItem from './message-item.vue'
 import type { MessageItemInterface } from '../types'
 
@@ -14,25 +15,28 @@ const emit = defineEmits<{
   showKnowledgeResult: [knowledgeContentResult: KnowledgeContentResultItem[]]
 }>()
 
-defineExpose({
-  scrollToBottom,
-})
-
 const scrollbarRef = useTemplateRef<ScrollbarInst | null>('scrollbarRef')
 
+const backBottomBtnFlagRef = useTemplateRef<HTMLDivElement | null>('backBottomBtnFlagRef')
+
+const isNotShowBackBottomBtn = useElementVisibility(backBottomBtnFlagRef)
+
 function scrollToBottom() {
-  nextTick(() => {
-    if (scrollbarRef.value) {
-      scrollbarRef.value.scrollTo({ top: 999999999, behavior: 'smooth' })
-    }
-  })
+  if (scrollbarRef.value) {
+    scrollbarRef.value.scrollTo({ top: 999999999, behavior: 'smooth' })
+  }
 }
+
+defineExpose({
+  scrollToBottom,
+  isNotShowBackBottomBtn,
+})
 </script>
 
 <template>
   <div class="relative flex-1 overflow-hidden overflow-y-auto py-[20px]">
     <n-scrollbar ref="scrollbarRef" class="min-h-full" content-class="min-h-full flex">
-      <div class="flex flex-col-reverse overflow-hidden">
+      <div class="relative flex flex-col-reverse overflow-hidden">
         <div class="pr-[10px]">
           <MessageItem
             v-for="[key, messageItem] in messageList"
@@ -41,7 +45,37 @@ function scrollToBottom() {
             @show-knowledge-result="emit('showKnowledgeResult', messageItem.knowledgeContentResult)"
           />
         </div>
+        <div ref="backBottomBtnFlagRef" class="-z-1 absolute bottom-0 h-[100px] w-full"></div>
       </div>
     </n-scrollbar>
+
+    <Transition name="back-bottom-btn" mode="out-in">
+      <div
+        v-show="!isNotShowBackBottomBtn"
+        class="absolute bottom-[30px] right-[30px] text-end"
+        style="translate: calc(-50% + 30px)"
+      >
+        <button
+          class="flex-center flex-center hover:text-theme-color inline-flex h-[26px] w-[26px] rounded-full border bg-white"
+          @click.stop="scrollToBottom"
+        >
+          <i class="iconfont icon-huidaodibu text-[12px]" />
+        </button>
+      </div>
+    </Transition>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.back-bottom-btn-enter-active,
+.back-bottom-btn-leave-active {
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.2s;
+  transition-property: opacity;
+}
+
+.back-bottom-btn-enter-from,
+.back-bottom-btn-leave-to {
+  opacity: 0;
+}
+</style>

src/views/multi-model-dialogue/components/model-dialogue-item.vue

@@ -38,8 +38,13 @@ const modelDialogueRef = ref<HTMLElement | null>(null)
 
 const { height } = useElementSize(modelDialogueRef)
 
+const isNotShowBackBottomBtn = computed(() => {
+  return messageListRef.value?.isNotShowBackBottomBtn || false
+})
+
 defineExpose({
   scrollToBottom,
+  isNotShowBackBottomBtn,
 })
 
 const isShowModelConfigMenu = ref(false)

src/views/multi-model-dialogue/multi-model-dialogue.vue

@@ -278,14 +278,16 @@ function handleClearAllMessage() {
 }
 
 // 滚动页面
-function handleMessageListScrollToBottom() {
+function handleMessageListScrollToBottom(autoScrollBottom?: boolean) {
   if (modelDialogueListRef.value) {
     modelDialogueListRef.value.forEach((modelDialogueItemRef, index) => {
       if (!multiModelDialogueList.value?.[index]?.isAnswerResponseWait) {
         return
       }
 
-      modelDialogueItemRef?.scrollToBottom && modelDialogueItemRef.scrollToBottom()
+      if (modelDialogueItemRef?.scrollToBottom && (modelDialogueItemRef?.isNotShowBackBottomBtn || autoScrollBottom)) {
+        modelDialogueItemRef.scrollToBottom()
+      }
     })
   }
 }