From 26cfd0a49cc1dc45539e3c70ed2e6dbc982cfdf8 Mon Sep 17 00:00:00 2001
From: Nahiyan Khan <nahiyan.khan@gmail.com>
Date: Tue, 25 Mar 2025 13:49:35 -0400
Subject: [PATCH] styles: chat scroll interaction (#1837)

---
 ui/desktop/src/components/ui/scroll-area.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/ui/desktop/src/components/ui/scroll-area.tsx b/ui/desktop/src/components/ui/scroll-area.tsx
index 22e19f5d..ed618280 100644
--- a/ui/desktop/src/components/ui/scroll-area.tsx
+++ b/ui/desktop/src/components/ui/scroll-area.tsx
@@ -17,6 +17,7 @@ const ScrollArea = React.forwardRef<ScrollAreaHandle, ScrollAreaProps>(
     const viewportRef = React.useRef<HTMLDivElement>(null);
     const viewportEndRef = React.useRef<HTMLDivElement>(null);
     const [isFollowing, setIsFollowing] = React.useState(true);
+    const [isScrolled, setIsScrolled] = React.useState(false);
 
     const scrollToBottom = React.useCallback(() => {
       if (viewportEndRef.current) {
@@ -48,6 +49,9 @@ const ScrollArea = React.forwardRef<ScrollAreaHandle, ScrollAreaProps>(
       const scrollBottom = scrollTop + clientHeight;
       const newIsFollowing = scrollHeight === scrollBottom;
 
+      // Check if scrolled from top
+      setIsScrolled(scrollTop > 0);
+
       // react will internally optimize this to not re-store the same values
       setIsFollowing(newIsFollowing);
     }, []);
@@ -71,8 +75,15 @@ const ScrollArea = React.forwardRef<ScrollAreaHandle, ScrollAreaProps>(
       <ScrollAreaPrimitive.Root
         ref={rootRef}
         className={cn('relative overflow-hidden', className)}
+        data-scrolled={isScrolled}
         {...props}
       >
+        <div
+          className={cn(
+            'absolute top-0 left-0 right-0 z-10 transition-all duration-200',
+            isScrolled ? 'border-t border-borderSubtle' : 'border-t border-transparent'
+          )}
+        />
         <ScrollAreaPrimitive.Viewport
           ref={viewportRef}
           className="h-full w-full rounded-[inherit] [&>div]:!block"