diff --git a/src/views/chat/hooks/useScroll.ts b/src/views/chat/hooks/useScroll.ts index 009698883e..9edddbf53b 100644 --- a/src/views/chat/hooks/useScroll.ts +++ b/src/views/chat/hooks/useScroll.ts @@ -7,6 +7,7 @@ interface ScrollReturn { scrollRef: Ref scrollToBottom: () => Promise scrollToTop: () => Promise + scrollToBottomIfAtBottom: () => Promise } 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, } } diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue index 9930a12c9c..b837a2ffd7 100644 --- a/src/views/chat/index.vue +++ b/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')