@a-type/ui 2.0.6 → 2.0.8

package/src/components/scrollArea/ScrollArea.tsx

@@ -1,6 +1,7 @@
 import * as Primitive from '@radix-ui/react-scroll-area';
 import { Ref } from 'react';
 import { withClassName } from '../../hooks.js';
+import { useStayScrolledToBottom } from '../../hooks/useStayScrolledToBottom.js';
 
 const ScrollAreaRootImpl = withClassName(Primitive.Root, 'overflow-hidden');
 
@@ -56,6 +57,7 @@ export interface ScrollAreaProps extends Primitive.ScrollAreaProps {
 	background?: ScrollAreaRootProps['background'];
 	orientation?: 'vertical' | 'both';
 	ref?: Ref<HTMLDivElement>;
+	stickToBottom?: boolean;
 }
 
 export const ScrollArea = Object.assign(
@@ -63,11 +65,20 @@ export const ScrollArea = Object.assign(
 		ref,
 		children,
 		orientation,
+		stickToBottom,
 		...props
 	}: ScrollAreaProps) {
+		const { ref: stickRef, onScroll } = useStayScrolledToBottom(stickToBottom);
+
 		return (
-			<ScrollAreaRoot ref={ref} {...props}>
-				<ScrollAreaViewport>{children}</ScrollAreaViewport>
+			<ScrollAreaRoot data-scroll-root ref={ref} {...props}>
+				<ScrollAreaViewport
+					data-scroll-viewport
+					ref={stickRef}
+					onScroll={onScroll}
+				>
+					{children}
+				</ScrollAreaViewport>
 				<ScrollAreaScrollbar />
 				{orientation === 'both' && (
 					<ScrollAreaScrollbar orientation="horizontal" />

package/src/hooks/useStayScrolledToBottom.ts

@@ -0,0 +1,46 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export function useStayScrolledToBottom(enabled = true) {
+	const ref = useRef<HTMLDivElement>(null);
+	// if the div was already scrolled to the bottom,
+	// keep it at the bottom when new messages come in
+	const [isScrolledToBottom, setIsScrolledToBottom] = useState(true);
+
+	useEffect(() => {
+		if (!ref.current || !enabled) return;
+		if (isScrolledToBottom) {
+			ref.current.scrollTop = ref.current.scrollHeight;
+		}
+		const observer = new MutationObserver(() => {
+			if (!ref.current) return;
+			if (isScrolledToBottom) {
+				console.log('scrolling to bottom');
+				ref.current.scrollTop = ref.current.scrollHeight;
+			}
+		});
+		observer.observe(ref.current, { childList: true, subtree: true });
+		return () => {
+			observer.disconnect();
+		};
+	}, [isScrolledToBottom, ref, enabled]);
+
+	const onScroll = useCallback(() => {
+		if (!ref.current) return;
+		const isScrolledToBottom =
+			ref.current.scrollTop + ref.current.clientHeight >=
+			ref.current.scrollHeight - 10;
+		console.log(
+			'onScroll',
+			ref.current.scrollTop,
+			ref.current.clientHeight,
+			ref.current.scrollHeight,
+			isScrolledToBottom,
+		);
+		setIsScrolledToBottom(isScrolledToBottom);
+	}, []);
+
+	return {
+		ref,
+		onScroll,
+	};
+}