improvement(chat): reuse shared overflow fades on scroll edges (#8390)

Author: waleedlatif1

apps/sim/app/o/[organizationId]/search/search-results-view.tsx

@@ -1,5 +1,11 @@
 import { type ReactNode, useRef } from 'react'
-import { cn, scrollFadeAttributes, scrollFadeClass, useScrollEdges } from '@sim/emcn'
+import {
+  cn,
+  overflowFadeSizeClass,
+  scrollFadeAttributes,
+  scrollFadeClass,
+  useScrollEdges,
+} from '@sim/emcn'
 import { HEADER_ACTION_CLUSTER, PAGE_HEADER_BAR } from '@/components/page-header-bar'
 import type { WorkspaceSearchFilters } from '@/lib/api/contracts/knowledge'
 import type { SearchResource } from '@/lib/mothership/generated/resources'
@@ -51,6 +57,7 @@ export function SearchResultsView({
               SIDEBAR_DIVIDER_PAD_BELOW_CLASS,
               SIDEBAR_DIVIDER_PAD_ABOVE_CLASS,
               scrollFadeClass,
+              overflowFadeSizeClass,
               'min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable_both-edges]'
             )}
             {...scrollFadeAttributes(scrollEdges)}

apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx

@@ -12,7 +12,14 @@ import {
   useRef,
   useState,
 } from 'react'
-import { type ClipboardContent, cn } from '@sim/emcn'
+import {
+  type ClipboardContent,
+  cn,
+  overflowFadeSizeClass,
+  scrollFadeAttributes,
+  scrollFadeClass,
+  useScrollEdges,
+} from '@sim/emcn'
 import { useQueryClient } from '@tanstack/react-query'
 import { defaultRangeExtractor, type Range, useVirtualizer } from '@tanstack/react-virtual'
 import { SMOOTH_CHASE_RATE } from '@/lib/core/utils/smooth-bottom-chase'
@@ -529,6 +536,10 @@ export function MothershipChat({
   })
 
   const hasMessages = messages.length > 0
+  const scrollEdges = useScrollEdges(scrollElementRef, {
+    contentRef: sizerRef,
+    enabled: !isLoading || hasMessages,
+  })
 
   /**
    * Keep a bottom-pinned transcript pinned when the scroll container resizes.
@@ -851,7 +862,12 @@ export function MothershipChat({
             inputRef={find.inputRef}
           />
         )}
-        <div ref={setScrollElement} className={styles.scrollContainer} onCopy={handleCopy}>
+        <div
+          ref={setScrollElement}
+          className={cn(styles.scrollContainer, scrollFadeClass, overflowFadeSizeClass)}
+          {...scrollFadeAttributes(scrollEdges)}
+          onCopy={handleCopy}
+        >
           {isLoading && !hasMessages ? (
             <MothershipChatSkeleton layout={layout} />
           ) : (