import * as React from 'react'; import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'; type ScrollBehavior = 'auto' | 'smooth'; import { cn } from '../../utils'; export interface ScrollAreaHandle { scrollToBottom: () => void; scrollToPosition: (options: { top: number; behavior?: ScrollBehavior }) => void; isAtBottom: () => boolean; isFollowing: boolean; viewportRef: React.RefObject; } interface ScrollAreaProps extends React.ComponentPropsWithoutRef { autoScroll?: boolean; onScrollChange?: (isAtBottom: boolean) => void; /* padding needs to be passed into the container inside ScrollArea to avoid pushing the scrollbar out */ paddingX?: number; paddingY?: number; handleScroll?: (viewport: HTMLDivElement) => void; } const ScrollArea = React.forwardRef( ( { className, children, autoScroll = false, onScrollChange, paddingX, paddingY, handleScroll: handleScrollProp, ...props }, ref ) => { const rootRef = React.useRef>(null); const viewportRef = React.useRef(null); const viewportEndRef = React.useRef(null); const [isFollowing, setIsFollowing] = React.useState(true); const [isScrolled, setIsScrolled] = React.useState(false); const userScrolledUpRef = React.useRef(false); const lastScrollHeightRef = React.useRef(0); const isActivelyScrollingRef = React.useRef(false); const scrollTimeoutRef = React.useRef(null); const BOTTOM_SCROLL_THRESHOLD = 200; const isAtBottom = React.useCallback(() => { if (!viewportRef.current) return false; const viewport = viewportRef.current; const { scrollHeight, scrollTop, clientHeight } = viewport; const distanceFromBottom = scrollHeight - scrollTop - clientHeight; return distanceFromBottom <= BOTTOM_SCROLL_THRESHOLD; }, []); const scrollToBottom = React.useCallback(() => { if (viewportRef.current) { viewportRef.current.scrollTo({ top: viewportRef.current.scrollHeight, behavior: 'smooth', }); // When explicitly scrolling to bottom, reset the following state setIsFollowing(true); userScrolledUpRef.current = false; onScrollChange?.(true); } }, [onScrollChange]); const scrollToPosition = React.useCallback( ({ top, behavior = 'smooth' }: { top: number; behavior?: ScrollBehavior }) => { if (viewportRef.current) { viewportRef.current.scrollTo({ top, behavior, }); } }, [] ); // Expose the scroll methods to parent components React.useImperativeHandle( ref, () => ({ scrollToBottom, scrollToPosition, isAtBottom, isFollowing, viewportRef, }), [scrollToBottom, scrollToPosition, isAtBottom, isFollowing] ); // track last scroll position to detect user-initiated scrolling const lastScrollTopRef = React.useRef(0); // Handle scroll events to update isFollowing state const handleScroll = React.useCallback(() => { if (!viewportRef.current) return; const viewport = viewportRef.current; const { scrollTop } = viewport; const currentIsAtBottom = isAtBottom(); // detect if this is a user-initiated scroll (position changed from last known position) const scrollDelta = Math.abs(scrollTop - lastScrollTopRef.current); if (scrollDelta > 0) { // Mark that user is actively scrolling immediately isActivelyScrollingRef.current = true; // clear any existing timeout and set a new one if (scrollTimeoutRef.current) { clearTimeout(scrollTimeoutRef.current); } // mark as not actively scrolling scrollTimeoutRef.current = window.setTimeout(() => { isActivelyScrollingRef.current = false; }, 100); } lastScrollTopRef.current = scrollTop; // Detect if user manually scrolled up from the bottom if (!currentIsAtBottom && isFollowing) { // user scrolled up, disabling auto-scroll userScrolledUpRef.current = true; setIsFollowing(false); onScrollChange?.(false); } else if (currentIsAtBottom && userScrolledUpRef.current) { // user scrolled back to bottom userScrolledUpRef.current = false; setIsFollowing(true); onScrollChange?.(true); } setIsScrolled(scrollTop > 0); if (handleScrollProp) { handleScrollProp(viewport); } }, [isAtBottom, isFollowing, onScrollChange, handleScrollProp]); // Auto-scroll when content changes and user is following React.useEffect(() => { if (!autoScroll || !viewportRef.current) return; const viewport = viewportRef.current; const currentScrollHeight = viewport.scrollHeight; // Only auto-scroll if: // 1. Content has actually grown (new content added) // 2. User was following (at the bottom) // 3. User hasn't manually scrolled up // 4. User is not actively scrolling if ( currentScrollHeight > lastScrollHeightRef.current && isFollowing && !userScrolledUpRef.current && !isActivelyScrollingRef.current ) { // Use requestAnimationFrame to ensure DOM has updated requestAnimationFrame(() => { if (viewportRef.current && !isActivelyScrollingRef.current) { viewportRef.current.scrollTo({ top: viewportRef.current.scrollHeight, behavior: 'smooth', }); } }); } lastScrollHeightRef.current = currentScrollHeight; }, [children, autoScroll, isFollowing]); // Add scroll event listener React.useEffect(() => { const viewport = viewportRef.current; if (!viewport) return; viewport.addEventListener('scroll', handleScroll, { passive: true }); return () => { viewport.removeEventListener('scroll', handleScroll); if (scrollTimeoutRef.current) { clearTimeout(scrollTimeoutRef.current); } }; }, [handleScroll]); return (

{children} {autoScroll &&

}

); } ); ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName; const ScrollBar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = 'vertical', ...props }, ref) => ( )); ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName; export { ScrollArea, ScrollBar };