AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-14 05:36:02 +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'
import {
memo,
useCallback,
useEffect,
useRef,
} from 'react'
@ -76,19 +77,20 @@ const Chat: FC<ChatProps> = ({
const chatContainerInnerRef = useRef<HTMLDivElement>(null)
const chatFooterRef = useRef<HTMLDivElement>(null)
const chatFooterInnerRef = useRef<HTMLDivElement>(null)
const userScrolledRef = useRef(false)
const handleScrolltoBottom = () => {
if (chatContainerRef.current)
const handleScrolltoBottom = useCallback(() => {
if (chatContainerRef.current && !userScrolledRef.current)
chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight
}
}, [])
const handleWindowResize = () => {
const handleWindowResize = useCallback(() => {
if (chatContainerRef.current && chatFooterRef.current)
chatFooterRef.current.style.width = `${chatContainerRef.current.clientWidth}px`
if (chatContainerInnerRef.current && chatFooterInnerRef.current)
chatFooterInnerRef.current.style.width = `${chatContainerInnerRef.current.clientWidth}px`
}
}, [])
useThrottleEffect(() => {
handleScrolltoBottom()
@ -98,7 +100,7 @@ const Chat: FC<ChatProps> = ({
useEffect(() => {
window.addEventListener('resize', debounce(handleWindowResize))
return () => window.removeEventListener('resize', handleWindowResize)
}, [])
}, [handleWindowResize])
useEffect(() => {
if (chatFooterRef.current && chatContainerRef.current) {
@ -117,7 +119,19 @@ const Chat: FC<ChatProps> = ({
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