@swarmclawai/swarmclaw 0.8.4 → 0.8.7

package/src/components/chat/message-list.tsx

@@ -1,13 +1,14 @@
 'use client'
 
 import { DEFAULT_HEARTBEAT_SHOW_ALERTS, DEFAULT_HEARTBEAT_SHOW_OK } from '@/lib/heartbeat-defaults'
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import type { Message } from '@/types'
 import { useChatStore } from '@/stores/use-chat-store'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
 import { shouldHidePersistedStreamingAssistantMessage } from '@/lib/chat-streaming-state'
 import { dedupeMessagesForDisplay } from '@/lib/chat-display'
+import { errorMessage } from '@/lib/shared-utils'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { MessageBubble } from './message-bubble'
 import { StreamingBubble } from './streaming-bubble'
@@ -71,12 +72,63 @@ interface Props {
   loading?: boolean
 }
 
+interface LiveStreamLaneProps {
+  streaming: boolean
+  hasVisiblePersistedStreamingMessage: boolean
+  assistantName?: string
+  agentAvatarSeed?: string
+  agentAvatarUrl?: string | null
+  agentName?: string
+}
+
+const LiveStreamLane = memo(function LiveStreamLane({
+  streaming,
+  hasVisiblePersistedStreamingMessage,
+  assistantName,
+  agentAvatarSeed,
+  agentAvatarUrl,
+  agentName,
+}: LiveStreamLaneProps) {
+  const displayText = useChatStore((s) => s.displayText)
+  const hasToolEvents = useChatStore((s) => s.toolEvents.length > 0)
+
+  if (!streaming) return null
+
+  if (!displayText && !hasToolEvents) {
+    if (hasVisiblePersistedStreamingMessage) return null
+    return (
+      <ThinkingIndicator
+        assistantName={assistantName}
+        agentAvatarSeed={agentAvatarSeed}
+        agentAvatarUrl={agentAvatarUrl}
+        agentName={agentName}
+      />
+    )
+  }
+
+  return (
+    <StreamingBubble
+      text={displayText}
+      assistantName={assistantName}
+      agentAvatarSeed={agentAvatarSeed}
+      agentAvatarUrl={agentAvatarUrl}
+      agentName={agentName}
+    />
+  )
+})
+
 export function MessageList({ messages, streaming, connectorFilter = null, loading = false }: Props) {
   const scrollRef = useRef<HTMLDivElement>(null)
   const [showScrollToBottom, setShowScrollToBottom] = useState(false)
+  const settledCountRef = useRef(0)
   const snapUntilRef = useRef(0)
   const prevSessionIdRef = useRef<string | null>(null)
-  const displayText = useChatStore((s) => s.displayText)
+  const hasLiveText = useChatStore((s) => s.displayText.trim().length > 0)
+  const hasLiveArtifacts = useChatStore((s) => (
+    s.displayText.trim().length > 0
+    || s.toolEvents.length > 0
+    || s.thinkingText.trim().length > 0
+  ))
   const setMessages = useChatStore((s) => s.setMessages)
   const retryLastMessage = useChatStore((s) => s.retryLastMessage)
   const editAndResend = useChatStore((s) => s.editAndResend)
@@ -152,33 +204,41 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
 
   // Connector filtering is handled via connectorFilter prop from chat-area
 
+  // Use refs for callbacks so transcriptNodes memo doesn't bust on every messages change
+  const messagesCallbackRef = useRef(messages)
+  messagesCallbackRef.current = messages
+  const sessionIdRef = useRef(sessionId)
+  sessionIdRef.current = sessionId
+
   const toggleBookmark = useCallback(async (index: number) => {
-    if (!sessionId) return
-    const msg = messages[index]
+    const sid = sessionIdRef.current
+    const msgs = messagesCallbackRef.current
+    if (!sid) return
+    const msg = msgs[index]
     if (!msg) return
     const next = !msg.bookmarked
     try {
-      await api('PUT', `/chats/${sessionId}/messages`, { messageIndex: index, bookmarked: next })
-      const updated = [...messages]
+      await api('PUT', `/chats/${sid}/messages`, { messageIndex: index, bookmarked: next })
+      const updated = [...msgs]
       updated[index] = { ...updated[index], bookmarked: next }
       setMessages(updated)
     } catch (err: unknown) {
-      console.error('Failed to toggle bookmark:', err instanceof Error ? err.message : String(err))
+      console.error('Failed to toggle bookmark:', errorMessage(err))
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sessionId, messages])
+  }, [])
 
   const handleEditResend = useCallback(async (index: number, newText: string) => {
-    if (!sessionId || !editAndResend) return
+    if (!sessionIdRef.current || !editAndResend) return
     await editAndResend(index, newText)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sessionId])
+  }, [])
 
   const handleFork = useCallback(async (index: number) => {
-    if (!sessionId || !forkSession) return
-    await forkSession(sessionId, index)
+    if (!sessionIdRef.current || !forkSession) return
+    await forkSession(sessionIdRef.current, index)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sessionId])
+  }, [])
 
   // In-thread search
   const [searchOpen, setSearchOpen] = useState(false)
@@ -195,36 +255,43 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
   const isHeartbeatOk = (msg: Message) =>
     msg.suppressed === true || (msg.kind === 'heartbeat' && (/^\s*HEARTBEAT_OK\b/i.test(msg.text || '') || /^\s*NO_MESSAGE\b/i.test(msg.text || '')))
 
-  const displayedMessages: Message[] = []
-  for (const msg of messages) {
-    if (shouldHidePersistedStreamingAssistantMessage(msg, { localStreaming: streaming, displayText })) continue
-    const isHeartbeat = isHeartbeatMessage(msg)
+  const dedupedDisplayedMessages = useMemo(() => {
+    const displayedMessages: Message[] = []
+    for (const msg of messages) {
+      if (shouldHidePersistedStreamingAssistantMessage(msg, { localStreaming: streaming, hasLiveArtifacts })) continue
+      const isHeartbeat = isHeartbeatMessage(msg)
 
-    // Visibility filtering based on settings
-    if (isHeartbeat) {
-      if (!showAlerts) continue // Hide all heartbeat messages
-      if (!showOk && isHeartbeatOk(msg)) continue // Hide OK messages
-    }
+      if (isHeartbeat) {
+        if (!showAlerts) continue
+        if (!showOk && isHeartbeatOk(msg)) continue
+      }
 
-    const last = displayedMessages[displayedMessages.length - 1]
-    const lastIsHeartbeat = !!last && isHeartbeatMessage(last)
-    if (isHeartbeat && lastIsHeartbeat) {
-      displayedMessages[displayedMessages.length - 1] = msg
-    } else {
-      displayedMessages.push(msg)
+      const last = displayedMessages[displayedMessages.length - 1]
+      const lastIsHeartbeat = !!last && isHeartbeatMessage(last)
+      if (isHeartbeat && lastIsHeartbeat) {
+        displayedMessages[displayedMessages.length - 1] = msg
+      } else {
+        displayedMessages.push(msg)
+      }
     }
-  }
 
-  const dedupedDisplayedMessages = dedupeMessagesForDisplay(displayedMessages)
+    return dedupeMessagesForDisplay(displayedMessages)
+  }, [hasLiveArtifacts, messages, showAlerts, showOk, streaming])
 
-  // Apply bookmark + connector filter
-  let filteredMessages = bookmarkFilter
-    ? dedupedDisplayedMessages.filter((msg) => msg.bookmarked)
-    : dedupedDisplayedMessages
-  if (connectorFilter) {
-    filteredMessages = filteredMessages.filter((msg) => msg.source?.connectorId === connectorFilter)
-  }
-  const hasVisiblePersistedStreamingMessage = filteredMessages.some((msg) => msg.role === 'assistant' && msg.streaming === true)
+  const filteredMessages = useMemo(() => {
+    let nextMessages = bookmarkFilter
+      ? dedupedDisplayedMessages.filter((msg) => msg.bookmarked)
+      : dedupedDisplayedMessages
+    if (connectorFilter) {
+      nextMessages = nextMessages.filter((msg) => msg.source?.connectorId === connectorFilter)
+    }
+    return nextMessages
+  }, [bookmarkFilter, connectorFilter, dedupedDisplayedMessages])
+
+  const hasVisiblePersistedStreamingMessage = useMemo(
+    () => filteredMessages.some((msg) => msg.role === 'assistant' && msg.streaming === true),
+    [filteredMessages],
+  )
 
   // Search matches
   const searchMatches = useMemo(() => {
@@ -234,6 +301,158 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
       .map((msg, i) => ({ msg, i }))
       .filter(({ msg }) => msg.text.toLowerCase().includes(normalizedQuery))
   }, [filteredMessages, searchQuery])
+  const searchMatchSet = useMemo(() => new Set(searchMatches.map((match) => match.i)), [searchMatches])
+  const currentSearchMatchIndex = searchQuery ? (searchMatches[searchIdx]?.i ?? null) : null
+  const originalIndexMap = useMemo(() => {
+    const indexMap = new Map<Message, number>()
+    messages.forEach((msg, index) => {
+      indexMap.set(msg, index)
+    })
+    return indexMap
+  }, [messages])
+
+  const handleDeleteMessage = useCallback(async (messageIndex: number) => {
+    const sid = sessionIdRef.current
+    const msgs = messagesCallbackRef.current
+    if (!sid || messageIndex < 0) return
+    try {
+      await api('DELETE', `/chats/${sid}/messages`, { messageIndex })
+      setMessages(msgs.filter((_: Message, idx: number) => idx !== messageIndex))
+    } catch {
+      // best-effort
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Snapshot the settled count at memo time so it's captured in the closure.
+  // Messages up to this count appear instantly; only new ones get entrance animations.
+  const settledSnapshot = settledCountRef.current
+
+  const transcriptNodes = useMemo(() => {
+    let lastAssistantIndex = -1
+    if (!streaming) {
+      for (let i = filteredMessages.length - 1; i >= 0; i--) {
+        if (filteredMessages[i].role === 'assistant') {
+          lastAssistantIndex = i
+          break
+        }
+      }
+    }
+
+    return filteredMessages.map((msg, i) => {
+      if (msg.kind === 'context-clear') {
+        const originalIndex = originalIndexMap.get(msg) ?? -1
+        return (
+          <div key={`ctx-clear-${msg.time}-${i}`} className="group/ctx flex items-center gap-4 py-3">
+            <div className="flex-1 h-px bg-amber-400/20" />
+            <span className="flex items-center gap-1.5 text-[10px] font-600 text-amber-400/60 uppercase tracking-[0.1em]">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="shrink-0">
+                <line x1="2" y1="12" x2="22" y2="12" />
+                <polyline points="8 8 4 12 8 16" />
+                <polyline points="16 8 20 12 16 16" />
+              </svg>
+              New context
+              {msg.time ? ` · ${new Date(msg.time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}` : ''}
+            </span>
+            {sessionId && originalIndex >= 0 && (
+              <button
+                type="button"
+                onClick={() => void handleDeleteMessage(originalIndex)}
+                className="opacity-0 group-hover/ctx:opacity-100 text-[10px] font-600 text-amber-400/60 hover:text-amber-400 bg-transparent border-none cursor-pointer transition-all px-1.5 py-0.5 rounded-[4px] hover:bg-amber-400/10"
+                title="Undo — restore full context"
+              >
+                Undo
+              </button>
+            )}
+            <div className="flex-1 h-px bg-amber-400/20" />
+          </div>
+        )
+      }
+
+      const originalIndex = originalIndexMap.get(msg) ?? -1
+      const isLastAssistant = i === lastAssistantIndex
+      const isSearchMatch = !!searchQuery && searchMatchSet.has(i)
+      const isCurrentMatch = currentSearchMatchIndex === i
+      const prevMsg = i > 0 ? filteredMessages[i - 1] : null
+      const showDateSep = msg.time && (!prevMsg?.time || new Date(msg.time).toDateString() !== new Date(prevMsg.time).toDateString())
+
+      let momentOverlay: React.ReactNode = null
+      if (isLastAssistant && currentMoment && !streaming) {
+        if (currentMoment.kind === 'heartbeat') {
+          momentOverlay = <HeartbeatMoment onDismiss={() => setCurrentMoment(null)} />
+        } else {
+          momentOverlay = (
+            <ActivityMoment
+              key={currentMoment.key}
+              toolName={currentMoment.name}
+              toolInput={currentMoment.input}
+              onDismiss={() => setCurrentMoment(null)}
+            />
+          )
+        }
+      }
+
+      // Only animate genuinely new messages (arrived after the batch load).
+      // Settled messages (loaded on session switch) appear instantly.
+      const isSettled = i < settledSnapshot
+      const animStyle = isSettled
+        ? undefined
+        : {
+            animation: `${msg.role === 'user' ? 'msg-in-right' : 'msg-in-left'} 0.4s var(--ease-spring) both`,
+            animationDelay: `${Math.min((i - settledSnapshot) * 0.05, 0.4)}s`,
+          }
+
+      return (
+        <div
+          key={`${sessionId}-${msg.role}-${originalIndex >= 0 ? originalIndex : i}`}
+          data-message-index={i}
+          style={animStyle}
+        >
+          {showDateSep && (
+            <div className="flex items-center gap-4 py-2 mb-2">
+              <div className="flex-1 h-px bg-white/[0.06]" />
+              <span className="text-[10px] font-600 text-text-3/50 uppercase tracking-[0.1em]">
+                {dateSeparator(msg.time)}
+              </span>
+              <div className="flex-1 h-px bg-white/[0.06]" />
+            </div>
+          )}
+          <div className={isCurrentMatch ? 'ring-1 ring-amber-400/50 rounded-[16px] bg-amber-400/[0.04]' : isSearchMatch ? 'bg-white/[0.02] rounded-[16px]' : ''}>
+            <MessageBubble
+              message={msg}
+              assistantName={assistantName}
+              agentAvatarSeed={agent?.avatarSeed}
+              agentAvatarUrl={agent?.avatarUrl}
+              agentName={agent?.name}
+              isLast={isLastAssistant}
+              onRetry={isLastAssistant ? retryLastMessage : undefined}
+              messageIndex={originalIndex >= 0 ? originalIndex : undefined}
+              onToggleBookmark={toggleBookmark}
+              onEditResend={handleEditResend}
+              onFork={handleFork}
+              momentOverlay={momentOverlay}
+            />
+          </div>
+        </div>
+      )
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    agent?.avatarSeed,
+    agent?.avatarUrl,
+    agent?.name,
+    assistantName,
+    currentMoment,
+    currentSearchMatchIndex,
+    filteredMessages,
+    originalIndexMap,
+    retryLastMessage,
+    searchMatchSet,
+    searchQuery,
+    sessionId,
+    settledSnapshot,
+    streaming,
+  ])
 
   // Track whether user is at/near bottom so we know whether to auto-scroll on new content
   const wasAtBottomRef = useRef(true)
@@ -275,8 +494,15 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
       prevSessionIdRef.current = sessionId
       wasAtBottomRef.current = true
       snapUntilRef.current = Date.now() + 2000
+      // Mark all messages as settled — new messages loaded for this session
+      // will also be settled (see below).
+      settledCountRef.current = 0
+    } else if (Date.now() < snapUntilRef.current) {
+      // Still in the snap window (messages just loaded for this session).
+      // Treat the new batch as settled so they appear without stagger.
+      settledCountRef.current = messages.length
     }
-  }, [sessionId])
+  }, [messages.length, sessionId])
 
   // Position scroll before paint — no setState here to avoid cascading renders.
   // The onScroll handler and the state-update effect below handle UI state.
@@ -290,14 +516,14 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
       el.scrollTop = el.scrollHeight
       wasAtBottomRef.current = true
     }
-  }, [messages.length, displayText])
+  }, [hasLiveText, messages.length])
 
   // Update scroll-related UI state after render (separate from layoutEffect to avoid cascading)
   useEffect(() => {
     const el = scrollRef.current
     if (!el || messages.length === 0) return
     updateScrollState()
-  }, [messages.length, displayText, updateScrollState])
+  }, [hasLiveText, messages.length, updateScrollState])
 
   // Re-snap when content resizes during snap window (lazy images increasing scrollHeight)
   useEffect(() => {
@@ -379,7 +605,7 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
   }, [searchOpen])
 
   return (
-    <div className="relative flex-1 min-h-0 min-w-0 flex flex-col overflow-hidden">
+    <div className="relative flex-1 min-h-0 min-w-0 flex flex-col overflow-hidden" data-testid="message-list">
       <div className="shrink-0 px-4 md:px-12 lg:px-16 pt-3">
         <div className="flex flex-wrap items-center gap-2 rounded-[14px] border border-white/[0.06] bg-surface/55 px-3 py-2 backdrop-blur-sm">
           <button
@@ -519,6 +745,9 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
       <div
         ref={scrollRef}
         onScroll={updateScrollState}
+        role="log"
+        aria-label="Conversation transcript"
+        data-testid="chat-thread"
         className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden px-4 md:px-12 lg:px-16 pt-4 pb-[120px] md:pb-10 fade-up"
       >
         <div className="flex flex-col gap-6 relative">
@@ -603,110 +832,16 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
               </div>
             )
           )}
-          {filteredMessages.map((msg, i) => {
-            // Context-clear divider — render a visual separator instead of a bubble
-            if (msg.kind === 'context-clear') {
-              const originalIndex = messages.indexOf(msg)
-              return (
-                <div key={`ctx-clear-${msg.time}-${i}`} className="group/ctx flex items-center gap-4 py-3">
-                  <div className="flex-1 h-px bg-amber-400/20" />
-                  <span className="flex items-center gap-1.5 text-[10px] font-600 text-amber-400/60 uppercase tracking-[0.1em]">
-                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="shrink-0">
-                      <line x1="2" y1="12" x2="22" y2="12" />
-                      <polyline points="8 8 4 12 8 16" />
-                      <polyline points="16 8 20 12 16 16" />
-                    </svg>
-                    New context
-                    {msg.time ? ` · ${new Date(msg.time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}` : ''}
-                  </span>
-                  {sessionId && originalIndex >= 0 && (
-                    <button
-                      type="button"
-                      onClick={async () => {
-                        try {
-                          await api('DELETE', `/chats/${sessionId}/messages`, { messageIndex: originalIndex })
-                          setMessages(messages.filter((_: Message, idx: number) => idx !== originalIndex))
-                        } catch { /* best-effort */ }
-                      }}
-                      className="opacity-0 group-hover/ctx:opacity-100 text-[10px] font-600 text-amber-400/60 hover:text-amber-400 bg-transparent border-none cursor-pointer transition-all px-1.5 py-0.5 rounded-[4px] hover:bg-amber-400/10"
-                      title="Undo — restore full context"
-                    >
-                      Undo
-                    </button>
-                  )}
-                  <div className="flex-1 h-px bg-amber-400/20" />
-                </div>
-              )
-            }
-
-            // Find original index in the full messages array for API calls
-            const originalIndex = messages.indexOf(msg)
-            const isLastAssistant = msg.role === 'assistant' && !streaming
-              && filteredMessages.slice(i + 1).every((m) => m.role !== 'assistant')
-            const isSearchMatch = searchQuery && searchMatches.some((m) => m.i === i)
-            const isCurrentMatch = searchQuery && searchMatches[searchIdx]?.i === i
-
-            // Date separator
-            const prevMsg = i > 0 ? filteredMessages[i - 1] : null
-            const showDateSep = msg.time && (!prevMsg?.time || new Date(msg.time).toDateString() !== new Date(prevMsg.time).toDateString())
-
-            // Moment overlay — only on the last assistant message
-            let momentOverlay: React.ReactNode = null
-            if (isLastAssistant && currentMoment && !streaming) {
-              if (currentMoment.kind === 'heartbeat') {
-                momentOverlay = <HeartbeatMoment onDismiss={() => setCurrentMoment(null)} />
-              } else {
-                momentOverlay = (
-                  <ActivityMoment
-                    key={currentMoment.key}
-                    toolName={currentMoment.name}
-                    toolInput={currentMoment.input}
-                    onDismiss={() => setCurrentMoment(null)}
-                  />
-                )
-              }
-            }
-
-            return (
-              <div
-                key={`${sessionId}-${msg.role}-${originalIndex >= 0 ? originalIndex : i}`}
-                data-message-index={i}
-                style={{
-                  animation: `${msg.role === 'user' ? 'msg-in-right' : 'msg-in-left'} 0.4s var(--ease-spring) both`,
-                  animationDelay: `${Math.min(i * 0.05, 0.4)}s`
-                }}
-              >
-                {showDateSep && (
-                  <div className="flex items-center gap-4 py-2 mb-2">
-                    <div className="flex-1 h-px bg-white/[0.06]" />
-                    <span className="text-[10px] font-600 text-text-3/50 uppercase tracking-[0.1em]">
-                      {dateSeparator(msg.time)}
-                    </span>
-                    <div className="flex-1 h-px bg-white/[0.06]" />
-                  </div>
-                )}
-                <div className={isCurrentMatch ? 'ring-1 ring-amber-400/50 rounded-[16px] bg-amber-400/[0.04]' : isSearchMatch ? 'bg-white/[0.02] rounded-[16px]' : ''}>
-                  <MessageBubble
-                    message={msg}
-                    assistantName={assistantName}
-                    agentAvatarSeed={agent?.avatarSeed}
-                    agentAvatarUrl={agent?.avatarUrl}
-                    agentName={agent?.name}
-                    isLast={isLastAssistant}
-                    onRetry={isLastAssistant ? retryLastMessage : undefined}
-                    messageIndex={originalIndex >= 0 ? originalIndex : undefined}
-                    onToggleBookmark={toggleBookmark}
-                    onEditResend={handleEditResend}
-                    onFork={handleFork}
-                    momentOverlay={momentOverlay}
-                  />
-                </div>
-              </div>
-            )
-          })}
+          {transcriptNodes}
           <ApprovalCards agentId={agent?.id} />
-          {streaming && !displayText && !hasVisiblePersistedStreamingMessage && <ThinkingIndicator assistantName={assistantName} agentAvatarSeed={agent?.avatarSeed} agentAvatarUrl={agent?.avatarUrl} agentName={agent?.name} />}
-          {streaming && displayText && <StreamingBubble text={displayText} assistantName={assistantName} agentAvatarSeed={agent?.avatarSeed} agentAvatarUrl={agent?.avatarUrl} agentName={agent?.name} />}
+          <LiveStreamLane
+            streaming={streaming}
+            hasVisiblePersistedStreamingMessage={hasVisiblePersistedStreamingMessage}
+            assistantName={assistantName}
+            agentAvatarSeed={agent?.avatarSeed}
+            agentAvatarUrl={agent?.avatarUrl}
+            agentName={agent?.name}
+          />
           {appSettings.suggestionsEnabled === true && !streaming && filteredMessages.length > 0 && filteredMessages[filteredMessages.length - 1]?.role === 'assistant' && (
             <SuggestionsBar lastMessage={filteredMessages[filteredMessages.length - 1]} onSend={sendMessage} />
           )}