fix(chat): clarify activity spacing and unify overflow fades (#8271)

* fix(chat): clarify activity spacing and unify overflow fades

* fix(chat): retain response-sized activity text

* chore(chat): cover interaction spacing boundaries

Author: waleedlatif1

apps/sim/app/(interfaces)/chat/components/message/message.test.tsx

@@ -154,7 +154,7 @@ describe('ClientChatMessage thinking chrome (Step 6)', () => {
     })
     mounts.push(unmount)
 
-    expect(container.textContent).toContain('Thinking…')
+    expect(container.textContent).toContain('Thinking')
     expect(container.textContent).toContain('Internal reasoning')
     expect(container.textContent).toContain('Answer text')
   })

apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-loop.test.tsx

@@ -139,7 +139,7 @@ describe('HeroChatLoop production thinking handoff', () => {
   })
 
   it.each([
-    ['thinking', 'Thinking…'],
+    ['thinking', 'Thinking'],
     ['dispatching', 'Dispatching…'],
   ] as const)('shows the production activity indicator alone during %s', (phase, label) => {
     renderPhase(phase)

apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-loop.tsx

@@ -208,7 +208,7 @@ export function HeroChatLoop({
           )}
         >
           {showThinking && (
-            <PendingTagIndicator label={phase === 'dispatching' ? 'Dispatching…' : 'Thinking…'} />
+            <PendingTagIndicator label={phase === 'dispatching' ? 'Dispatching…' : 'Thinking'} />
           )}
           {showBuilding && (
             <AgentGroupView

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-viewport.tsx

@@ -1,7 +1,13 @@
 'use client'
 
 import { type ReactNode, useEffect, useLayoutEffect, useRef } from 'react'
-import { cn, scrollFadeAttributes, scrollFadeClass, useScrollEdges } from '@sim/emcn'
+import {
+  cn,
+  overflowFadeSizeClass,
+  scrollFadeAttributes,
+  scrollFadeClass,
+  useScrollEdges,
+} from '@sim/emcn'
 
 interface ActivityViewportProps {
   children: ReactNode
@@ -85,7 +91,8 @@ export function ActivityViewport({
       className={cn(
         'pr-2',
         !unbounded && 'scrollbar-hide max-h-[110px] overflow-y-auto',
-        scrollFadeClass
+        scrollFadeClass,
+        overflowFadeSizeClass
       )}
       {...scrollFadeAttributes(edges)}
     >

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view.tsx

@@ -280,7 +280,9 @@ export function AgentGroupView({
       liveToolId={liveCall?.id}
     />
   ) : (
-    <div className='flex min-w-0 flex-col gap-2'>{items.map(renderItem)}</div>
+    <div className='flex min-w-0 flex-col gap-2 [&>*:has(+[data-interaction-card])]:mb-2 [&>[data-interaction-card]:not(:last-child)]:mb-2'>
+      {items.map(renderItem)}
+    </div>
   )
   const headerText = error
     ? agentLabel

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/main-agent-activity.tsx

@@ -49,5 +49,9 @@ export function MainAgentActivity({
     )
   })
 
-  return <div className='flex min-w-0 flex-col gap-2'>{activity}</div>
+  return (
+    <div className='flex min-w-0 flex-col gap-2 [&>*:has(+[data-interaction-card])]:mb-2 [&>[data-interaction-card]:not(:last-child)]:mb-2'>
+      {activity}
+    </div>
+  )
 }

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/search-activity-results.tsx

@@ -5,6 +5,7 @@ import {
   chipRadiusClass,
   cn,
   OverflowText,
+  overflowFadeSizeClass,
   scrollFadeAttributes,
   scrollFadeClass,
   useScrollEdges,
@@ -40,7 +41,11 @@ export function SearchActivityResults({ sources, label }: SearchActivityResultsP
         ref={scrollRef}
         role='region'
         aria-label={label}
-        className={cn('max-h-[152px] overflow-y-auto overscroll-contain p-1', scrollFadeClass)}
+        className={cn(
+          'max-h-[152px] overflow-y-auto overscroll-contain p-1',
+          scrollFadeClass,
+          overflowFadeSizeClass
+        )}
         {...scrollFadeAttributes(edges)}
       >
         <ul className='m-0 list-none p-0'>

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

@@ -28,6 +28,7 @@ import {
   cn,
   Lightbox,
   languages,
+  overflowFadeSizeClass,
   highlight as prismHighlight,
   scrollFadeAttributes,
   scrollFadeXClass,
@@ -287,7 +288,8 @@ function MarkdownTable({ children }: MarkdownTableProps) {
       tabIndex={isOverflowing ? 0 : undefined}
       className={cn(
         'not-prose my-4 w-full overflow-x-auto [&_strong]:font-semibold',
-        scrollFadeXClass
+        scrollFadeXClass,
+        overflowFadeSizeClass
       )}
       {...scrollFadeAttributes(edges)}
     >
@@ -754,7 +756,7 @@ function ChatContentInner({
         <WorkspaceRefsContext.Provider
           value={{ resources: workspaceRefs, onSelect: onWorkspaceResourceSelect }}
         >
-          <div className={cn('space-y-3', inter.className)}>
+          <div className={cn('space-y-4', inter.className)}>
             {groups.map((group, i) => {
               if (group.kind === 'inline') {
                 return (

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/interaction-card.tsx

@@ -27,6 +27,7 @@ interface InteractionCardProps {
 export function InteractionCard({ children, title, actions, className }: InteractionCardProps) {
   return (
     <div
+      data-interaction-card
       className={cn(
         'rounded-2xl border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]',
         className

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/watch-activity/watch-activity.tsx

@@ -48,7 +48,11 @@ export function WatchActivity({ task: recorded }: WatchActivityProps) {
       : recorded
   const pending = task.status === undefined || task.status === 'pending'
   return (
-    <div aria-busy={pending} title={[task.summary, task.note].filter(Boolean).join('\n')}>
+    <div
+      data-chat-activity
+      aria-busy={pending}
+      title={[task.summary, task.note].filter(Boolean).join('\n')}
+    >
       <ActivityStatus label={watchLabel(task, params?.workspaceId)} isActive={pending} />
     </div>
   )