🐛 fix: Effectively interrupt auto scrolling

src/features/Conversation/components/AutoScroll.tsx

@@ -7,14 +7,15 @@ import BackBottom from './BackBottom';
 
 interface AutoScrollProps {
   atBottom: boolean;
+  isScrolling: boolean;
   onScrollToBottom: (type: 'auto' | 'click') => void;
 }
-const AutoScroll = memo<AutoScrollProps>(({ atBottom, onScrollToBottom }) => {
+const AutoScroll = memo<AutoScrollProps>(({ atBottom, isScrolling, onScrollToBottom }) => {
   const trackVisibility = useChatStore((s) => !!s.chatLoadingId);
   const str = useChatStore(chatSelectors.chatsMessageString);
 
   useEffect(() => {
-    if (atBottom && trackVisibility) {
+    if (atBottom && trackVisibility && !isScrolling) {
       onScrollToBottom?.('auto');
     }
   }, [atBottom, trackVisibility, str]);

src/features/Conversation/components/VirtualizedList/index.tsx

@@ -20,12 +20,10 @@ const itemContent = (index: number, id: string) => {
   );
 };
 
-interface VirtualizedListProps {
-  mobile?: boolean;
-}
-const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
+const VirtualizedList = memo(() => {
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const [atBottom, setAtBottom] = useState(true);
+  const [isScrolling, setIsScrolling] = useState(false);
 
   const data = useChatStore(
     (s) => ['empty', ...chatSelectors.currentChatIDsWithGuideMessage(s)],
@@ -40,7 +38,7 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
     if (virtuosoRef.current) {
       virtuosoRef.current.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' });
     }
-  }, [id]);
+  }, [id, data.length]);
 
   // overscan should be 1.5 times the height of the window
   const overscan = typeof window !== 'undefined' ? window.innerHeight * 1.5 : 0;
@@ -49,17 +47,20 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
     <Flexbox height={'100%'}>
       <Virtuoso
         atBottomStateChange={setAtBottom}
-        atBottomThreshold={60 * (mobile ? 2 : 1)}
+        atBottomThreshold={50}
         computeItemKey={(_, item) => item}
         data={data}
-        followOutput={'auto'}
+        // followOutput={'auto'}
+        // increaseViewportBy={overscan}
         initialTopMostItemIndex={data?.length - 1}
+        isScrolling={setIsScrolling}
         itemContent={itemContent}
-        overscan={overscan}
+        overscan={{ main: overscan, reverse: overscan / 2 }}
         ref={virtuosoRef}
       />
       <AutoScroll
         atBottom={atBottom}
+        isScrolling={isScrolling}
         onScrollToBottom={(type) => {
           const virtuoso = virtuosoRef.current;
           switch (type) {

src/features/Conversation/index.tsx

@@ -40,9 +40,7 @@ const Conversation = memo<ConversationProps>(({ chatInput, mobile }) => {
       // `relative` is required, ChatInput's absolute position needs it
       style={{ position: 'relative' }}
     >
-      <div className={styles}>
-        {messagesInit ? <ChatList mobile={mobile} /> : <SkeletonList mobile={mobile} />}
-      </div>
+      <div className={styles}>{messagesInit ? <ChatList /> : <SkeletonList mobile={mobile} />}</div>
       {chatInput}
       <ChatHydration />
     </Flexbox>