fix: stop auto scroll if user manually scrolling up (#2874)

Co-authored-by: James <[email protected]>
janhq · Van-QA · May 16, 2024 · Apr 25, 2024 · Apr 25, 2024 · May 2, 2024
commit 0406b516156e6a50f8e4e7060675c51a288cfc14
diff --git a/web/containers/ListContainer/index.tsx b/web/containers/ListContainer/index.tsx
@@ -1,25 1,49 @@
-import { ReactNode, useEffect, useRef } from 'react'
 import { ReactNode, useCallback, useEffect, useRef } from 'react'
 
 type Props = {
  children: ReactNode
 }
 
 const ListContainer: React.FC<Props> = ({ children }) => {
  const listRef = useRef<HTMLDivElement>(null)
  const prevScrollTop = useRef(0)
  const isUserManuallyScrollingUp = useRef(false)
 
  const handleScroll = useCallback((event: React.UIEvent<HTMLElement>) => {
  const currentScrollTop = event.currentTarget.scrollTop
 
  if (prevScrollTop.current > currentScrollTop) {
  console.debug('User is manually scrolling up')
  isUserManuallyScrollingUp.current = true
  } else {
  const currentScrollTop = event.currentTarget.scrollTop
  const scrollHeight = event.currentTarget.scrollHeight
  const clientHeight = event.currentTarget.clientHeight
 
  if (currentScrollTop clientHeight >= scrollHeight) {
  console.debug('Scrolled to the bottom')
  isUserManuallyScrollingUp.current = false
  }
  }
 
  prevScrollTop.current = currentScrollTop
  }, [])
 
  useEffect(() => {
- const scrollHeight = listRef.current?.scrollHeight ?? 0
  if (isUserManuallyScrollingUp.current === true) return
 
  const scrollHeight = listRef.current?.scrollHeight ?? 0
  listRef.current?.scrollTo({
  top: scrollHeight,
  behavior: 'instant',
  })
- })
  }, [listRef.current?.scrollHeight, isUserManuallyScrollingUp])
 
  return (
  <div
  ref={listRef}
  className="flex h-full w-full flex-col overflow-y-scroll"
  onScroll={handleScroll}
  >
  {children}
  </div>

diff --git a/web/screens/Chat/ChatBody/index.tsx b/web/screens/Chat/ChatBody/index.tsx
@@ -22,8 22,8 @@ const ChatBody: React.FC = () => {
  const downloadedModels = useAtomValue(downloadedModelsAtom)
  const loadModelError = useAtomValue(loadModelErrorAtom)
 
- if (downloadedModels.length === 0) return <EmptyModel />
- if (messages.length === 0) return <EmptyThread />
  if (!downloadedModels.length) return <EmptyModel />
  if (!messages.length) return <EmptyThread />
 
  return (
  <ListContainer>