improvement(chat): unify expandable inline tool activity

Author: waleedlatif1

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

@@ -3,6 +3,7 @@ import { SlackIcon } from '@/components/icons'
 import { ActivityStatus } from '@/components/ui/activity-status'
 import { getToolStatusDisplayTitle } from '@/lib/copilot/tools/tool-display'
 import type { ToolCallItemProps } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item'
+import { getToolIcon } from '@/app/workspace/[workspaceId]/home/components/message-content/utils'
 
 /** Demo fixtures have known brands, so the landing page never loads the block registry. */
 export function HeroToolCallItem({
@@ -16,7 +17,7 @@ export function HeroToolCallItem({
       ? SlackIcon
       : toolCallId === 'hero-read-table'
         ? Table
-        : undefined
+        : getToolIcon(toolName)
   return (
     <ActivityStatus
       label={getToolStatusDisplayTitle(displayTitle, status, toolName)}

apps/sim/app/workspace/[workspaceId]/home/components/knowledge-search-results/knowledge-search-results.tsx

@@ -3,7 +3,7 @@
 import { useMemo } from 'react'
 import { Chip, ChipLink } from '@sim/emcn'
 import { useQueryStates } from 'nuqs'
-import { ShimmerText } from '@/components/ui/shimmer-text'
+import { ActivityStatus } from '@/components/ui/activity-status'
 import type {
   WorkspaceKnowledgeSearchResult,
   WorkspaceSearchFilters,
@@ -190,9 +190,9 @@ export function KnowledgeSearchResults({
   }
   if (isPending || (isFetching && !results)) {
     return (
-      <p role='status' className='px-2 py-2 text-[var(--text-muted)] text-caption'>
-        <ShimmerText className='[--shimmer-rest:var(--text-muted)]'>Searching…</ShimmerText>
-      </p>
+      <div className='px-2 py-2'>
+        <ActivityStatus label='Searching…' isActive />
+      </div>
     )
   }
 

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

@@ -0,0 +1,112 @@
+'use client'
+
+import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { cn } from '@sim/emcn'
+
+interface ActivityViewportProps {
+  children: ReactNode
+  isStreaming: boolean
+  /** A nested blocking interaction must not be clipped by this ancestor's log viewport. */
+  unbounded?: boolean
+}
+
+const BOTTOM_STICK_THRESHOLD_PX = 8
+
+export function ActivityViewport({
+  children,
+  isStreaming,
+  unbounded = false,
+}: ActivityViewportProps) {
+  const ref = useRef<HTMLDivElement>(null)
+  const rafRef = useRef<number | null>(null)
+  const stickToBottomRef = useRef(true)
+  const prevScrollTopRef = useRef(0)
+  const [hasOverflow, setHasOverflow] = useState(false)
+
+  useEffect(() => {
+    if (unbounded) {
+      stickToBottomRef.current = true
+      return
+    }
+    const el = ref.current
+    if (!el) return
+    // Upward user input detaches auto-stick; a downward scroll reaching the
+    // bottom re-attaches it (a small upward flick can't re-stick itself).
+    const handleWheel = (e: WheelEvent) => {
+      if (e.deltaY < 0) stickToBottomRef.current = false
+    }
+    const handleScroll = () => {
+      const distance = el.scrollHeight - el.scrollTop - el.clientHeight
+      if (distance < BOTTOM_STICK_THRESHOLD_PX && el.scrollTop > prevScrollTopRef.current) {
+        stickToBottomRef.current = true
+      }
+      prevScrollTopRef.current = el.scrollTop
+    }
+    el.addEventListener('wheel', handleWheel, { passive: true })
+    el.addEventListener('scroll', handleScroll, { passive: true })
+    return () => {
+      el.removeEventListener('wheel', handleWheel)
+      el.removeEventListener('scroll', handleScroll)
+    }
+  }, [unbounded])
+
+  useLayoutEffect(() => {
+    const el = ref.current
+    if (rafRef.current !== null) {
+      window.cancelAnimationFrame(rafRef.current)
+      rafRef.current = null
+    }
+    if (unbounded) {
+      setHasOverflow(false)
+      return
+    }
+    if (el) {
+      const next = el.scrollHeight > el.clientHeight
+      setHasOverflow((prev) => (prev === next ? prev : next))
+    }
+    if (!isStreaming) return
+    const tick = () => {
+      const node = ref.current
+      if (!node || !stickToBottomRef.current) {
+        rafRef.current = null
+        return
+      }
+      const target = node.scrollHeight - node.clientHeight
+      const gap = target - node.scrollTop
+      if (gap < 1) {
+        rafRef.current = null
+        return
+      }
+      node.scrollTop = node.scrollTop + Math.max(1, gap * 0.18)
+      rafRef.current = window.requestAnimationFrame(tick)
+    }
+    rafRef.current = window.requestAnimationFrame(tick)
+    return () => {
+      if (rafRef.current !== null) {
+        window.cancelAnimationFrame(rafRef.current)
+        rafRef.current = null
+      }
+    }
+  })
+
+  return (
+    <div className='relative'>
+      <div
+        ref={ref}
+        className={cn(
+          'pr-2',
+          !unbounded && 'scrollbar-hide max-h-[110px] overflow-y-auto',
+          hasOverflow && 'py-1'
+        )}
+      >
+        {children}
+      </div>
+      {!unbounded && hasOverflow && (
+        <>
+          <div className='pointer-events-none absolute top-0 right-2 left-0 h-3 bg-linear-to-b from-[var(--bg)] to-transparent' />
+          <div className='pointer-events-none absolute right-2 bottom-0 left-0 h-3 bg-linear-to-t from-[var(--bg)] to-transparent' />
+        </>
+      )}
+    </div>
+  )
+}