Selaa lähdekoodia

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

tags/0.5.10
Rozstone 1 vuosi sitten
vanhempi
commit
8a4015722d
No account linked to committer's email address
1 muutettua tiedostoa jossa 21 lisäystä ja 7 poistoa
  1. 21
    7
      web/app/components/base/chat/chat/index.tsx

+ 21
- 7
web/app/components/base/chat/chat/index.tsx Näytä tiedosto

} from 'react' } from 'react'
import { import {
memo, memo,
useCallback,
useEffect, useEffect,
useRef, useRef,
} from 'react' } from 'react'
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 = () => {
if (chatContainerRef.current)
const handleScrolltoBottom = useCallback(() => {
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()
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) {
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



Loading…
Peruuta
Tallenna