feat: 优化打字机模式显示新内容的逻辑 (Chanzhaoyu#394)

* 添加为打字机模式优化的滚动至底部函数

* feat: 优化打字机模式始终显示最新内容的逻辑

* feat: 内容输出结束时也根据滚动条位置判断是否滚动至底部

src/views/chat/hooks/useScroll.ts

@@ -7,6 +7,7 @@ interface ScrollReturn {
  scrollRef: Ref<ScrollElement>
  scrollToBottom: () => Promise<void>
  scrollToTop: () => Promise<void>
+ scrollToBottomIfAtBottom: () => Promise<void>
 }
 
 export function useScroll(): ScrollReturn {
@@ -24,9 +25,21 @@ export function useScroll(): ScrollReturn {
  scrollRef.value.scrollTop = 0
  }
 
+ const scrollToBottomIfAtBottom = async () => {
+ await nextTick()
+ if (scrollRef.value) {
+ const threshold = 50 // 阈值，表示滚动条到底部的距离阈值
+ const distanceToBottom = scrollRef.value.scrollHeight - scrollRef.value.scrollTop - scrollRef.value.clientHeight
+ if (distanceToBottom <= threshold) {
+ scrollRef.value.scrollTop = scrollRef.value.scrollHeight
+ }
+ }
+ }
+
  return {
  scrollRef,
  scrollToBottom,
  scrollToTop,
+ scrollToBottomIfAtBottom,
  }
 }

src/views/chat/index.vue

@@ -24,7 +24,7 @@ const chatStore = useChatStore()
 useCopyCode()
 const { isMobile } = useBasicLayout()
 const { addChat, updateChat, updateChatSome, getChatByUuidAndIndex } = useChat()
-const { scrollRef, scrollToBottom } = useScroll()
+const { scrollRef, scrollToBottom, scrollToBottomIfAtBottom } = useScroll()
 
 const { uuid } = route.params as { uuid: string }
 
@@ -113,14 +113,14 @@ async function onConversation() {
  requestOptions: { prompt: message, options: { ...options } },
  },
  )
- scrollToBottom()
+ scrollToBottomIfAtBottom()
  }
  catch (error) {
  //
  }
  },
  })
- scrollToBottom()
+ scrollToBottomIfAtBottom()
  }
  catch (error: any) {
  const errorMessage = error?.message ?? t('common.wrong')