use auto scroll with radix

web/src/components/ui/scroll-area/ScrollArea.tsx

@@ -7,13 +7,16 @@ import { cn } from '@/lib/utils';
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+    viewportRef?: React.RefObject<HTMLDivElement>;
+  }
+>(({ className, children, viewportRef, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
     className={cn('relative overflow-hidden', className)}
     {...props}>
     <ScrollAreaPrimitive.Viewport
+      ref={viewportRef}
       className="h-full w-full rounded-[inherit] [&>div]:!block"
       id="scroll-area-viewport">
       {children}

web/src/hooks/useAutoScroll.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useRef, useState, useCallback, useEffect } from 'react';
 import { useAutoScroll } from './useAutoScroll';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { faker } from '@faker-js/faker';
 
 interface Message {
   id: number;
@@ -186,3 +188,115 @@ export default meta;
 type Story = StoryObj<typeof AutoScrollDemo>;
 
 export const Default: Story = {};
+
+export const ScrollAreaComponentWithAutoScroll: Story = {
+  render: () => {
+    const generateCard = (index: number) => ({
+      id: index,
+      title: faker.company.name() + ' ' + index,
+      color: faker.color.rgb(),
+      sentences: faker.lorem.sentences(2)
+    });
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [cards, setCards] = useState(() =>
+      Array.from({ length: 9 }, (_, i) => generateCard(i + 1))
+    );
+    const [isAutoAddEnabled, setIsAutoAddEnabled] = useState(false);
+    const intervalRef = useRef<NodeJS.Timeout>();
+    const {
+      isAutoScrollEnabled,
+      scrollToBottom,
+      scrollToTop,
+      enableAutoScroll,
+      disableAutoScroll
+    } = useAutoScroll(containerRef, { observeDeepChanges: true });
+
+    const addCard = useCallback(() => {
+      setCards((prev) => [...prev, generateCard(prev.length + 1)]);
+    }, []);
+
+    const toggleAutoAdd = useCallback(() => {
+      if (isAutoAddEnabled) {
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current);
+          intervalRef.current = undefined;
+        }
+        setIsAutoAddEnabled(false);
+      } else {
+        intervalRef.current = setInterval(addCard, 2000);
+        setIsAutoAddEnabled(true);
+        enableAutoScroll(); // Enable auto-scroll when auto-adding cards
+      }
+    }, [isAutoAddEnabled, addCard, enableAutoScroll]);
+
+    // Cleanup interval on unmount
+    useEffect(() => {
+      return () => {
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current);
+        }
+      };
+    }, []);
+
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-4">
+          <h3 className="text-lg font-semibold">Scrollable Grid Layout</h3>
+          <div className="flex gap-2">
+            <button
+              onClick={addCard}
+              className="rounded bg-blue-500 px-3 py-1 text-sm text-white hover:bg-blue-600">
+              Add Card
+            </button>
+            <button
+              onClick={toggleAutoAdd}
+              className={`rounded px-3 py-1 text-sm text-white ${
+                isAutoAddEnabled
+                  ? 'bg-purple-500 hover:bg-purple-600'
+                  : 'bg-purple-400 hover:bg-purple-500'
+              }`}>
+              Auto Add {isAutoAddEnabled ? 'ON' : 'OFF'}
+            </button>
+            <button
+              onClick={isAutoScrollEnabled ? disableAutoScroll : enableAutoScroll}
+              className={`rounded px-3 py-1 text-sm text-white ${
+                isAutoScrollEnabled
+                  ? 'bg-green-500 hover:bg-green-600'
+                  : 'bg-red-500 hover:bg-red-600'
+              }`}>
+              Auto-scroll {isAutoScrollEnabled ? 'ON' : 'OFF'}
+            </button>
+            <button
+              onClick={() => scrollToTop('smooth')}
+              className="rounded bg-gray-500 px-3 py-1 text-sm text-white hover:bg-gray-600">
+              To Top
+            </button>
+            <button
+              onClick={() => scrollToBottom('smooth')}
+              className="rounded bg-gray-500 px-3 py-1 text-sm text-white hover:bg-gray-600">
+              To Bottom
+            </button>
+          </div>
+        </div>
+        <ScrollArea
+          viewportRef={containerRef}
+          className="h-[600px] w-[800px] rounded-lg border border-gray-200 p-4">
+          <div className="grid grid-cols-2 gap-4">
+            {cards.map((card) => (
+              <div
+                key={card.id}
+                className="flex flex-col rounded-lg p-4 shadow-sm transition-all hover:shadow-md"
+                style={{ backgroundColor: card.color }}>
+                <h4 className="mb-2 text-lg font-medium text-white">{card.title}</h4>
+                <div className="flex-1">
+                  <p className="text-sm text-white/90">{card.sentences}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
+    );
+  }
+};

web/src/hooks/useAutoScroll.ts

@@ -8,6 +8,8 @@ interface UseAutoScrollOptions {
   scrollBehavior?: ScrollBehavior;
   /** Whether the auto-scroll functionality is enabled */
   enabled?: boolean;
+  /** Whether to observe deep changes */
+  observeDeepChanges?: boolean;
 }
 
 interface UseAutoScrollReturn {
@@ -35,7 +37,12 @@ export const useAutoScroll = (
   containerRef: React.RefObject<HTMLElement>,
   options: UseAutoScrollOptions = {}
 ): UseAutoScrollReturn => {
-  const { debounceDelay = 150, scrollBehavior = 'smooth', enabled = true } = options;
+  const {
+    debounceDelay = 150,
+    scrollBehavior = 'smooth',
+    enabled = true,
+    observeDeepChanges = true
+  } = options;
 
   const [isAutoScrollEnabled, setIsAutoScrollEnabled] = useState(enabled);
   const wasAtBottom = useRef(true);
@@ -179,10 +186,14 @@ export const useAutoScroll = (
   // Handle content changes
   useEffect(() => {
     const container = containerRef.current;
-    if (!container || !enabled) return;
+
+    if (!container || !enabled || !isAutoScrollEnabled) return;
+
+    let numberOfMutations = 0;
 
     // Debounced mutation handler to prevent rapid scroll updates
     const handleMutation = () => {
+      numberOfMutations++;
       if (mutationDebounceRef.current) {
         window.cancelAnimationFrame(mutationDebounceRef.current);
       }
@@ -198,8 +209,9 @@ export const useAutoScroll = (
 
     observer.observe(container, {
       childList: true, // Only observe direct children changes
-      subtree: false, // Don't observe deep changes
-      characterData: false // Don't observe text changes
+      subtree: observeDeepChanges, // Don't observe deep changes
+      characterData: false, // Don't observe text changes,
+      attributes: false
     });
 
     return () => {

web/src/lib/metrics/files/MyYamlEditor.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { MyYamlEditor } from './validateMetricYaml';
 
 const meta: Meta<typeof MyYamlEditor> = {
-  title: 'Metrics/Files/MyYamlEditor',
+  title: 'Lib/Files/MyYamlEditorWithValidation',
   component: MyYamlEditor,
   tags: ['autodocs'],
   parameters: {