AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-14 09:05:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

prevent auto scrolling down to bottom when user already scrolled up (#2813)

Browse Source
This commit is contained in:
Rozstone 2024-03-15 13:19:06 +08:00 committed by GitHub
parent 156345cb4b
commit 8a4015722d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/app/components/base/chat/chat/index.tsx
View File

@ -4,6 +4,7 @@ import type {
} from 'react' } from 'react'
import { import {
memo, memo,
useCallback,
useEffect, useEffect,
useRef, useRef,
} from 'react' } from 'react'
@ -76,19 +77,20 @@ const Chat: FC<ChatProps> = ({
const chatContainerInnerRef = useRef<HTMLDivElement>(null) const chatContainerInnerRef = useRef<HTMLDivElement>(null)
const chatFooterRef = useRef<HTMLDivElement>(null) const chatFooterRef = useRef<HTMLDivElement>(null)
const chatFooterInnerRef = useRef<HTMLDivElement>(null) const chatFooterInnerRef = useRef<HTMLDivElement>(null)
const userScrolledRef = useRef(false)
const handleScrolltoBottom = () => { const handleScrolltoBottom = useCallback(() => {
if (chatContainerRef.current) if (chatContainerRef.current && !userScrolledRef.current)
chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight
} }, [])
const handleWindowResize = () => { const handleWindowResize = useCallback(() => {
if (chatContainerRef.current && chatFooterRef.current) if (chatContainerRef.current && chatFooterRef.current)
chatFooterRef.current.style.width = `${chatContainerRef.current.clientWidth}px` chatFooterRef.current.style.width = `${chatContainerRef.current.clientWidth}px`
if (chatContainerInnerRef.current && chatFooterInnerRef.current) if (chatContainerInnerRef.current && chatFooterInnerRef.current)
chatFooterInnerRef.current.style.width = `${chatContainerInnerRef.current.clientWidth}px` chatFooterInnerRef.current.style.width = `${chatContainerInnerRef.current.clientWidth}px`
} }, [])
useThrottleEffect(() => { useThrottleEffect(() => {
handleScrolltoBottom() handleScrolltoBottom()
@ -98,7 +100,7 @@ const Chat: FC<ChatProps> = ({
useEffect(() => { useEffect(() => {
window.addEventListener('resize', debounce(handleWindowResize)) window.addEventListener('resize', debounce(handleWindowResize))
return () => window.removeEventListener('resize', handleWindowResize) return () => window.removeEventListener('resize', handleWindowResize)
}, []) }, [handleWindowResize])
useEffect(() => { useEffect(() => {
if (chatFooterRef.current && chatContainerRef.current) { if (chatFooterRef.current && chatContainerRef.current) {
@ -117,7 +119,19 @@ const Chat: FC<ChatProps> = ({
resizeObserver.disconnect() resizeObserver.disconnect()
} }
} }
}, [chatFooterRef, chatContainerRef]) }, [handleScrolltoBottom])
useEffect(() => {
const chatContainer = chatContainerRef.current
if (chatContainer) {
const setUserScrolled = () => {
if (chatContainer)
userScrolledRef.current = chatContainer.scrollHeight - chatContainer.scrollTop >= chatContainer.clientHeight + 300
}
chatContainer.addEventListener('scroll', setUserScrolled)
return () => chatContainer.removeEventListener('scroll', setUserScrolled)
}
}, [])
const hasTryToAsk = config?.suggested_questions_after_answer?.enabled && !!suggestedQuestions?.length && onSend const hasTryToAsk = config?.suggested_questions_after_answer?.enabled && !!suggestedQuestions?.length && onSend