fix: scroll bottom when switch thread (#4152)

web/containers/ListContainer/index.tsx

@@ -2,10 +2,29 @@ import { PropsWithChildren, useCallback, useEffect, useRef } from 'react'
 
 import { ScrollArea } from '@janhq/joi'
 
+import { useAtomValue } from 'jotai'
+
+import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
+
 const ListContainer = ({ children }: PropsWithChildren) => {
   const listRef = useRef<HTMLDivElement>(null)
   const prevScrollTop = useRef(0)
   const isUserManuallyScrollingUp = useRef(false)
+  const activeThread = useAtomValue(activeThreadAtom)
+  const prevActiveThread = useRef(activeThread)
+
+  // Handle active thread changes
+  useEffect(() => {
+    if (prevActiveThread.current?.id !== activeThread?.id) {
+      isUserManuallyScrollingUp.current = false
+      const scrollHeight = listRef.current?.scrollHeight ?? 0
+      listRef.current?.scrollTo({
+        top: scrollHeight,
+        behavior: 'instant',
+      })
+      prevActiveThread.current = activeThread // Update the previous active thread reference
+    }
+  }, [activeThread])
 
   const handleScroll = useCallback((event: React.UIEvent<HTMLElement>) => {
     const currentScrollTop = event.currentTarget.scrollTop