fix(tarko): improve scroll-to-bottom indicator edge case handling (#1429)

Author: ulivz

multimodal/tarko/agent-web-ui/src/standalone/chat/components/ScrollToBottomButton.tsx

@@ -42,6 +42,7 @@ export const ScrollToBottomButton: React.FC<ScrollToBottomButtonProps> = ({ show
               w-8 h-8 
               bg-white/70 dark:bg-gray-900/70
               hover:bg-white/80 dark:hover:bg-gray-900/80
+              border border-[#F2F3F5]/60 dark:border-gray-900/60
               rounded-full 
               shadow-lg hover:shadow-xl
               backdrop-blur-md

multimodal/tarko/agent-web-ui/src/standalone/chat/hooks/useScrollToBottom.ts

@@ -1,10 +1,10 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useRef, useEffect, useState, useCallback } from 'react';
 import { useAtomValue } from 'jotai';
 import { replayStateAtom } from '@/common/state/atoms/replay';
 
 // Constants
 const SCROLL_CHECK_DELAY = 100; // ms - delay for DOM updates
-const SCROLL_ANIMATION_DELAY = 300; // ms - delay to account for smooth scroll animation
 const REPLAY_AUTO_SCROLL_DELAY = 50; // ms - delay for auto-scroll in replay mode
 
 interface UseScrollToBottomOptions {
@@ -24,7 +24,7 @@ interface UseScrollToBottomReturn {
 
 /**
  * Custom hook for managing scroll-to-bottom indicator in chat
- * 
+ *
  * Features:
  * - Shows scroll-to-bottom indicator when user has scrolled up
  * - Manual scroll to bottom functionality
@@ -41,72 +41,37 @@ export const useScrollToBottom = ({
   const messagesContainerRef = useRef<HTMLDivElement>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const [showScrollToBottom, setShowScrollToBottom] = useState(false);
-  const isScrollingRef = useRef(false);
   const lastSessionIdRef = useRef<string | undefined>(sessionId);
   const replayState = useAtomValue(replayStateAtom);
   const lastEventIndexRef = useRef<number>(-1);
   const lastMessageCountRef = useRef<number>(0);
   const lastUserMessageIdRef = useRef<string | null>(null);
 
-  // Check if container is at bottom
-  const checkIsAtBottom = useCallback(() => {
-    const container = messagesContainerRef.current;
-    if (!container) return false;
-    
-    const { scrollTop, scrollHeight, clientHeight } = container;
-    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-    
-    // Account for sub-pixel differences and rounding errors
-    return distanceFromBottom <= Math.max(threshold, 3);
-  }, [threshold]);
-
   // Handle scroll events
   const handleScroll = useCallback(() => {
     const container = messagesContainerRef.current;
     if (!container) return;
-    
-    // Don't update state during programmatic scrolling to prevent flickering
-    if (isScrollingRef.current) return;
-    
+
     const { scrollTop, scrollHeight, clientHeight } = container;
     const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-    
-    // More robust bottom detection with better tolerance for rounding errors
-    const atBottom = distanceFromBottom <= Math.max(threshold, 3);
-    
-    // Only show button when:
-    // 1. NOT at bottom
-    // 2. There's scrollable content (scrollHeight > clientHeight)
-    // 3. User has actually scrolled up (not just a minor difference)
-    const hasScrollableContent = scrollHeight > clientHeight + 5;
-    const hasScrolledUp = distanceFromBottom > 10; // Must be meaningfully away from bottom
-    const shouldShow = !atBottom && hasScrollableContent && hasScrolledUp;
-    
-    setShowScrollToBottom(shouldShow);
+
+    // Simple, robust bottom detection
+    const atBottom = distanceFromBottom <= threshold;
+    const hasScrollableContent = scrollHeight > clientHeight + 10;
+
+    setShowScrollToBottom(!atBottom && hasScrollableContent);
   }, [threshold]);
 
-  // Smooth scroll to bottom
-  const scrollToBottom = useCallback((forceCheck = true) => {
+  // Scroll to bottom
+  const scrollToBottom = useCallback(() => {
     const container = messagesContainerRef.current;
     if (!container) return;
-    
-    isScrollingRef.current = true;
-    
+
     container.scrollTo({
       top: container.scrollHeight,
-      behavior: 'smooth'
+      behavior: 'smooth',
     });
-    
-    // Reset scrolling flag after animation completes
-    setTimeout(() => {
-      isScrollingRef.current = false;
-      // Force check scroll position to ensure button hides when at bottom
-      if (forceCheck) handleScroll();
-    }, SCROLL_ANIMATION_DELAY);
-  }, [handleScroll]);
-
-  // Auto-scroll to bottom (reuse scrollToBottom without force check)
-  const autoScrollToBottom = useCallback(() => scrollToBottom(false), [scrollToBottom]);
+  }, []);
 
   // Delayed scroll check helper
   const scheduleScrollCheck = useCallback(() => {
@@ -121,13 +86,12 @@ export const useScrollToBottom = ({
     if (sessionId !== lastSessionIdRef.current) {
       lastSessionIdRef.current = sessionId;
       setShowScrollToBottom(false);
-      isScrollingRef.current = false;
-      
+
       // Schedule a check after session content loads
       const timer = setTimeout(() => {
         handleScroll();
       }, SCROLL_CHECK_DELAY * 2);
-      
+
       return () => clearTimeout(timer);
     }
   }, [sessionId, handleScroll]);
@@ -136,12 +100,12 @@ export const useScrollToBottom = ({
   useEffect(() => {
     const container = messagesContainerRef.current;
     if (!container) return;
-    
+
     container.addEventListener('scroll', handleScroll, { passive: true });
-    
+
     // Initial check
     const timer = scheduleScrollCheck();
-    
+
     return () => {
       container.removeEventListener('scroll', handleScroll);
       clearTimeout(timer);
@@ -165,15 +129,15 @@ export const useScrollToBottom = ({
     // This covers both sequential playback and manual jumps/seeks
     if (replayState.currentEventIndex !== lastEventIndexRef.current) {
       lastEventIndexRef.current = replayState.currentEventIndex;
-      
+
       // Schedule auto-scroll after DOM updates
       const timer = setTimeout(() => {
-        autoScrollToBottom();
+        scrollToBottom();
       }, REPLAY_AUTO_SCROLL_DELAY);
-      
+
       return () => clearTimeout(timer);
     }
-  }, [isReplayMode, replayState.isActive, replayState.currentEventIndex, autoScrollToBottom]);
+  }, [isReplayMode, replayState.isActive, replayState.currentEventIndex, scrollToBottom]);
 
   // Auto-scroll for user messages in normal mode
   useEffect(() => {
@@ -183,7 +147,7 @@ export const useScrollToBottom = ({
 
     const messages = dependencies[0] as any[];
     const currentMessageCount = messages.length;
-    
+
     // Only check for new user messages when message count increases
     if (currentMessageCount <= lastMessageCountRef.current) {
       lastMessageCountRef.current = currentMessageCount;
@@ -194,29 +158,31 @@ export const useScrollToBottom = ({
     const allUserMessages = messages
       .flatMap((group: any) => group?.messages || [group])
       .filter((msg: any) => msg?.role === 'user');
-    
+
     const latestUserMessage = allUserMessages[allUserMessages.length - 1];
-    
+
     // Auto-scroll ONLY if:
     // 1. We have a new user message
     // 2. It's the LAST user message (most recent one)
     // 3. It has the isLocalMessage flag (indicating it was just sent by user)
-    if (latestUserMessage?.id && 
-        latestUserMessage.id !== lastUserMessageIdRef.current &&
-        latestUserMessage.isLocalMessage) {
+    if (
+      latestUserMessage?.id &&
+      latestUserMessage.id !== lastUserMessageIdRef.current &&
+      latestUserMessage.isLocalMessage
+    ) {
       lastUserMessageIdRef.current = latestUserMessage.id;
-      
-      const timer = setTimeout(autoScrollToBottom, SCROLL_CHECK_DELAY);
+
+      const timer = setTimeout(scrollToBottom, SCROLL_CHECK_DELAY);
       return () => clearTimeout(timer);
     }
-    
+
     lastMessageCountRef.current = currentMessageCount;
-  }, [autoScrollOnUserMessage, isReplayMode, autoScrollToBottom, ...dependencies]);
+  }, [autoScrollOnUserMessage, isReplayMode, scrollToBottom, ...dependencies]);
 
   return {
     messagesContainerRef,
     messagesEndRef,
     showScrollToBottom,
-    scrollToBottom: () => scrollToBottom(),
+    scrollToBottom,
   };
 };