From 7b549f84445ef158b97d0270143a88c623d89ab7 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Fri, 1 May 2026 03:38:21 +0530
Subject: [PATCH] refactor(chat): enhance ChatViewport with auto-scroll and top
 fade effect for improved user experience

---
 .../components/assistant-ui/chat-viewport.tsx | 40 +++++++++++--------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/chat-viewport.tsx b/surfsense_web/components/assistant-ui/chat-viewport.tsx
index a1534df01..d3d664ace 100644
--- a/surfsense_web/components/assistant-ui/chat-viewport.tsx
+++ b/surfsense_web/components/assistant-ui/chat-viewport.tsx
@@ -23,24 +23,30 @@ export interface ChatViewportProps {
 }
 
 export const ChatViewport: FC<ChatViewportProps> = ({ children, footer }) => (
-	<>
-		<ThreadPrimitive.Viewport
-			scrollToBottomOnRunStart
-			scrollToBottomOnInitialize
-			scrollToBottomOnThreadSwitch
-			className="aui-thread-viewport relative flex flex-1 min-h-0 flex-col overflow-y-auto px-4 pt-4"
-			style={{ scrollbarGutter: "stable" }}
-		>
-			{children}
-		</ThreadPrimitive.Viewport>
+	<ThreadPrimitive.Viewport
+		turnAnchor="top"
+		autoScroll
+		scrollToBottomOnRunStart
+		scrollToBottomOnInitialize
+		scrollToBottomOnThreadSwitch
+		className="aui-thread-viewport relative flex flex-1 min-h-0 flex-col overflow-y-auto px-4 [scroll-behavior:smooth]"
+		style={{ scrollbarGutter: "stable" }}
+	>
+		<div
+			aria-hidden
+			className="aui-chat-viewport-top-fade pointer-events-none sticky top-0 z-10 -mx-4 h-2 shrink-0 bg-gradient-to-b from-main-panel from-20% to-transparent"
+		/>
+		{children}
 		{footer ? (
-			<div
-				className="aui-chat-composer-area relative mx-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible bg-main-panel px-4 pt-2 pb-4 md:pb-6"
-				style={{ paddingBottom: "max(1rem, env(safe-area-inset-bottom))" }}
+			<ThreadPrimitive.ViewportFooter
+				className="aui-chat-composer-footer sticky bottom-0 z-20 -mx-4 flex flex-col items-stretch bg-gradient-to-t from-main-panel from-60% to-transparent px-4 pt-6"
+				style={{ paddingBottom: "max(0.5rem, env(safe-area-inset-bottom))" }}
 			>
-				<ChatScrollToBottom />
-				{footer}
-			</div>
+				<div className="aui-chat-composer-area relative mx-auto flex w-full max-w-(--thread-max-width) flex-col gap-3 overflow-visible">
+					<ChatScrollToBottom />
+					{footer}
+				</div>
+			</ThreadPrimitive.ViewportFooter>
 		) : null}
-	</>
+	</ThreadPrimitive.Viewport>
 );