feat: integrate useAutoScroll hook with ReportEditor for streaming content

- Add useAutoScroll hook to ReportEditor component
- Configure auto-scroll to be enabled only when isStreaming is true
- Add ref forwarding to EditorContainer for scroll container access
- Hook observes DOM mutations from StreamContentPlugin updates
- Maintains user scroll interaction handling (disable when scrolling up)

Co-Authored-By: nate@buster.so <nate@buster.so>

apps/web/src/components/ui/report/EditorContainer.tsx

@@ -1,6 +1,7 @@
 import { cn } from '@/lib/utils';
 import { PlateContainer } from 'platejs/react';
 import { cva, type VariantProps } from 'class-variance-authority';
+import React from 'react';
 
 interface EditorContainerProps {
   className?: string;
@@ -38,23 +39,27 @@ const editorContainerVariants = cva(
   }
 );
 
-export function EditorContainer({
-  className,
-  variant,
-  disabled,
-  readonly,
-  ...props
-}: React.ComponentProps<'div'> &
-  VariantProps<typeof editorContainerVariants> &
-  EditorContainerProps) {
+export const EditorContainer = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> &
+    VariantProps<typeof editorContainerVariants> &
+    EditorContainerProps
+>(({ className, variant, disabled, readonly, children, ...htmlProps }, ref) => {
   return (
-    <PlateContainer
+    <div
+      ref={ref}
       className={cn(
         'ignore-click-outside/toolbar',
         editorContainerVariants({ variant, readonly }),
         className
       )}
-      {...props}
-    />
+      {...htmlProps}
+    >
+      <PlateContainer>
+        {children}
+      </PlateContainer>
+    </div>
   );
-}
+});
+
+EditorContainer.displayName = 'EditorContainer';

apps/web/src/components/ui/report/ReportEditor.tsx

@@ -4,6 +4,7 @@ import type { Value, AnyPluginConfig } from 'platejs';
 import { Plate, type TPlateEditor } from 'platejs/react';
 import React, { useImperativeHandle, useRef } from 'react';
 import { useDebounceFn, useMemoizedFn } from '@/hooks';
+import { useAutoScroll } from '@/hooks/useAutoScroll';
 import { cn } from '@/lib/utils';
 import { Editor } from './Editor';
 import { EditorContainer } from './EditorContainer';
@@ -65,6 +66,13 @@ export const ReportEditor = React.memo(
     ) => {
       // Initialize the editor instance using the custom useEditor hook
       const isReady = useRef(false);
+      const editorContainerRef = useRef<HTMLDivElement>(null);
+
+      const { isAutoScrollEnabled } = useAutoScroll(editorContainerRef, {
+        enabled: isStreaming,
+        bottomThreshold: 50,
+        observeSubTree: true
+      });
 
       // readOnly = true;
       // isStreaming = true;
@@ -128,6 +136,7 @@ export const ReportEditor = React.memo(
           readOnly={readOnly || isStreaming}
           onValueChange={onValueChangeDebounced}>
           <EditorContainer
+            ref={editorContainerRef}
             variant={variant}
             readonly={readOnly}
             disabled={disabled}