fix: resume autoscroll behaviour on message sent (#296)

Author: thomasyuill-livekit

components/app/session-view.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { motion } from 'motion/react';
 import type { AppConfig } from '@/app-config';
 import { ChatTranscript } from '@/components/app/chat-transcript';
@@ -71,6 +71,7 @@ export const SessionView = ({
 
   const messages = useChatMessages();
   const [chatOpen, setChatOpen] = useState(false);
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
 
   const controls: ControlBarControls = {
     leave: true,
@@ -80,6 +81,15 @@ export const SessionView = ({
     screenShare: appConfig.supportsVideoInput,
   };
 
+  useEffect(() => {
+    const lastMessage = messages.at(-1);
+    const lastMessageIsLocal = lastMessage?.from?.isLocal === true;
+
+    if (scrollAreaRef.current && lastMessageIsLocal) {
+      scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight;
+    }
+  }, [messages]);
+
   return (
     <section className="bg-background relative z-10 h-full w-full overflow-hidden" {...props}>
       {/* Chat Transcript */}
@@ -90,7 +100,7 @@ export const SessionView = ({
         )}
       >
         <Fade top className="absolute inset-x-4 top-0 h-40" />
-        <ScrollArea className="px-4 pt-40 pb-[150px] md:px-6 md:pb-[180px]">
+        <ScrollArea ref={scrollAreaRef} className="px-4 pt-40 pb-[150px] md:px-6 md:pb-[180px]">
           <ChatTranscript
             hidden={!chatOpen}
             messages={messages}

components/livekit/scroll-area/hooks/useAutoScroll.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-const AUTO_SCROLL_THRESHOLD_PX = 50;
+const AUTO_SCROLL_THRESHOLD_PX = 100;
 
 export function useAutoScroll(scrollContentContainer?: Element | null) {
   useEffect(() => {

components/livekit/scroll-area/scroll-area.tsx

@@ -1,24 +1,38 @@
 'use client';
 
-import { useRef } from 'react';
+import { forwardRef, useCallback, useRef } from 'react';
 import { useAutoScroll } from '@/components/livekit/scroll-area/hooks/useAutoScroll';
 import { cn } from '@/lib/utils';
 
 interface ScrollAreaProps {
   children?: React.ReactNode;
+  className?: string;
 }
 
-export function ScrollArea({
-  className,
-  children,
-}: ScrollAreaProps & React.HTMLAttributes<HTMLDivElement>) {
+export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(function ScrollArea(
+  { className, children },
+  ref
+) {
   const scrollContentRef = useRef<HTMLDivElement>(null);
 
   useAutoScroll(scrollContentRef.current);
 
+  const mergedRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      scrollContentRef.current = node;
+
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+
   return (
-    <div ref={scrollContentRef} className={cn('overflow-y-scroll scroll-smooth', className)}>
+    <div ref={mergedRef} className={cn('overflow-y-scroll scroll-smooth', className)}>
       <div>{children}</div>
     </div>
   );
-}
+});