Merge branch 'chat-scroll-behaiviour'

src/app/chat/_components/ChatInterface.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { useChat } from '@ai-sdk/react'
 import { DefaultChatTransport, type UIMessage } from 'ai'
 import { Button } from '~/components/ui/button'
@@ -83,14 +83,21 @@ function AuthenticatedChatInterface({ dbMessages, sessionId }: ChatInterfaceProp
 		sendMessage({ text })
 	}
 	const gsapContext = useGsapContext()
+	const didInitialScroll = useRef(false)
 	useEffect(() => {
-		let scroller = gsapContext?.getScroller()
+		const scroller = gsapContext?.getScroller()
-		if (scroller instanceof Window) {
+		if (!scroller || scroller instanceof Window) {
-			return;
+			return
 		}
-		console.log(scroller?.scrollHeight)
+		// Jump instantly on first open so the chat starts pinned to the bottom;
-		scroller?.scrollTo({ behavior: 'smooth', top: scroller.scrollHeight })
+		// animate subsequent updates. Defer a frame so the messages have laid out
-	}, [messages])
+		// (and any streaming content has grown) before we measure scrollHeight.
+		const behavior: ScrollBehavior = didInitialScroll.current ? 'smooth' : 'auto'
+		didInitialScroll.current = true
+		requestAnimationFrame(() => {
+			scroller.scrollTo({ behavior, top: scroller.scrollHeight })
+		})
+	}, [messages, status])
 	return (
 		<div className="flex flex-col h-full">
 			{messages &&