claude-code/src/components/Message.tsx

import { feature } from 'bun:bundle'
import type { BetaContentBlock } from '@anthropic-ai/sdk/resources/beta/messages/messages.mjs'
import type {
  ImageBlockParam,
  TextBlockParam,
  ThinkingBlockParam,
  ToolResultBlockParam,
  ToolUseBlockParam,
} from '@anthropic-ai/sdk/resources/index.mjs'
import * as React from 'react'
import type { Command } from '../commands.js'
import { useTerminalSize } from '../hooks/useTerminalSize.js'
import { Box } from '@anthropic/ink'
import type { Tools } from '../Tool.js'
import {
  type ConnectorTextBlock,
  isConnectorTextBlock,
} from '../types/connectorText.js'
import type {
  AssistantMessage,
  AttachmentMessage as AttachmentMessageType,
  CollapsedReadSearchGroup as CollapsedReadSearchGroupType,
  GroupedToolUseMessage as GroupedToolUseMessageType,
  NormalizedUserMessage,
  ProgressMessage,
  SystemMessage,
} from '../types/message.js'
import { type AdvisorBlock, isAdvisorBlock } from '../utils/advisor.js'
import { isFullscreenEnvEnabled } from '../utils/fullscreen.js'
import { logError } from '../utils/log.js'
import type { buildMessageLookups } from '../utils/messages.js'
import { CompactSummary } from './CompactSummary.js'
import { AdvisorMessage } from './messages/AdvisorMessage.js'
import { AssistantRedactedThinkingMessage } from './messages/AssistantRedactedThinkingMessage.js'
import { AssistantTextMessage } from './messages/AssistantTextMessage.js'
import { AssistantThinkingMessage } from './messages/AssistantThinkingMessage.js'
import { AssistantToolUseMessage } from './messages/AssistantToolUseMessage.js'
import { AttachmentMessage } from './messages/AttachmentMessage.js'
import { CollapsedReadSearchContent } from './messages/CollapsedReadSearchContent.js'
import { CompactBoundaryMessage } from './messages/CompactBoundaryMessage.js'
import { GroupedToolUseContent } from './messages/GroupedToolUseContent.js'
import { SystemTextMessage } from './messages/SystemTextMessage.js'
import { UserImageMessage } from './messages/UserImageMessage.js'
import { UserTextMessage } from './messages/UserTextMessage.js'
import { UserToolResultMessage } from './messages/UserToolResultMessage/UserToolResultMessage.js'
import { OffscreenFreeze } from './OffscreenFreeze.js'
import { ExpandShellOutputProvider } from './shell/ExpandShellOutputContext.js'

export type Props = {
  message:
    | NormalizedUserMessage
    | AssistantMessage
    | AttachmentMessageType
    | SystemMessage
    | GroupedToolUseMessageType
    | CollapsedReadSearchGroupType
  lookups: ReturnType<typeof buildMessageLookups>
  // TODO: Find a way to remove this, and leave spacing to the consumer
  /** Absolute width for the container Box. When provided, eliminates a wrapper Box in the caller. */
  containerWidth?: number
  addMargin: boolean
  tools: Tools
  commands: Command[]
  verbose: boolean
  inProgressToolUseIDs: Set<string>
  progressMessagesForMessage: ProgressMessage[]
  shouldAnimate: boolean
  shouldShowDot: boolean
  style?: 'condensed'
  width?: number | string
  isTranscriptMode: boolean
  isStatic: boolean
  onOpenRateLimitOptions?: () => void
  isActiveCollapsedGroup?: boolean
  isUserContinuation?: boolean
  /** ID of the last thinking block (uuid:index) to show, used for hiding past thinking in transcript mode */
  lastThinkingBlockId?: string | null
  /** UUID of the latest user bash output message (for auto-expanding) */
  latestBashOutputUUID?: string | null
  /** Whether to collapse diff display for this message */
  shouldCollapseDiffs?: boolean
}

function MessageImpl({
  message,
  lookups,
  containerWidth,
  addMargin,
  tools,
  commands,
  verbose,
  inProgressToolUseIDs,
  progressMessagesForMessage,
  shouldAnimate,
  shouldShowDot,
  style,
  width,
  isTranscriptMode,
  onOpenRateLimitOptions,
  isActiveCollapsedGroup,
  isUserContinuation = false,
  lastThinkingBlockId,
  latestBashOutputUUID,
  shouldCollapseDiffs,
}: Props): React.ReactNode {
  switch (message.type) {
    case 'attachment':
      return (
        <AttachmentMessage
          addMargin={addMargin}
          attachment={message.attachment as import('../utils/attachments.js').Attachment}
          verbose={verbose}
          isTranscriptMode={isTranscriptMode}
        />
      )
    case 'assistant':
      return (
        <Box flexDirection="column" width={containerWidth ?? '100%'}>
          {(message.message.content as BetaContentBlock[]).map((_, index) => (
            <AssistantMessageBlock
              key={index}
              param={_}
              addMargin={addMargin}
              tools={tools}
              commands={commands}
              verbose={verbose}
              inProgressToolUseIDs={inProgressToolUseIDs}
              progressMessagesForMessage={progressMessagesForMessage}
              shouldAnimate={shouldAnimate}
              shouldShowDot={shouldShowDot}
              width={width}
              inProgressToolCallCount={inProgressToolUseIDs.size}
              isTranscriptMode={isTranscriptMode}
              lookups={lookups}
              onOpenRateLimitOptions={onOpenRateLimitOptions}
              thinkingBlockId={`${message.uuid}:${index}`}
              lastThinkingBlockId={lastThinkingBlockId}
              advisorModel={message.advisorModel as string | undefined}
            />
          ))}
        </Box>
      )
    case 'user': {
      if (message.isCompactSummary) {
        return (
          <CompactSummary
            message={message}
            screen={isTranscriptMode ? 'transcript' : 'prompt'}
          />
        )
      }
      // Precompute the imageIndex prop for each content block. The previous
      // version incremented a counter inside the .map() callback, which
      // React Compiler bails on ("UpdateExpression to variables captured
      // within lambdas"). A plain for loop keeps the mutation out of a
      // closure so the compiler can memoize MessageImpl.
      const imageIndices: number[] = []
      let imagePosition = 0
      for (const param of message.message.content as Array<{ type: string }>) {
        if (param.type === 'image') {
          const id = message.imagePasteIds?.[imagePosition]
          imagePosition++
          imageIndices.push(id ?? imagePosition)
        } else {
          imageIndices.push(imagePosition)
        }
      }
      // Check if this message is the latest bash output - if so, wrap content
      // with provider so OutputLine can show full output via context
      const isLatestBashOutput = latestBashOutputUUID === message.uuid
      const content = (
        <Box flexDirection="column" width={containerWidth ?? '100%'}>
          {(message.message.content as Array<TextBlockParam | ImageBlockParam | ToolUseBlockParam | ToolResultBlockParam>).map((param, index) => (
            <UserMessage
              key={index}
              message={message}
              addMargin={addMargin}
              tools={tools}
              progressMessagesForMessage={progressMessagesForMessage}
              param={param}
              style={style}
              verbose={verbose}
              imageIndex={imageIndices[index]!}
              isUserContinuation={isUserContinuation}
              lookups={lookups}
              isTranscriptMode={isTranscriptMode}
              shouldCollapseDiffs={shouldCollapseDiffs}
            />
          ))}
        </Box>
      )
      return isLatestBashOutput ? (
        <ExpandShellOutputProvider>{content}</ExpandShellOutputProvider>
      ) : (
        content
      )
    }
    case 'system':
      if (message.subtype === 'compact_boundary') {
        // Fullscreen keeps pre-compact messages in the ScrollBox (REPL.tsx
        // appends instead of resetting, Messages.tsx skips the boundary
        // filter) — scroll up for history, no need for the ctrl+o hint.
        if (isFullscreenEnvEnabled()) {
          return null
        }
        return <CompactBoundaryMessage />
      }
      if (message.subtype === 'microcompact_boundary') {
        // Logged at creation time in createMicrocompactBoundaryMessage
        return null
      }
      if (feature('HISTORY_SNIP')) {
        /* eslint-disable @typescript-eslint/no-require-imports */
        const { isSnipBoundaryMessage } =
          require('../services/compact/snipProjection.js') as typeof import('../services/compact/snipProjection.js')
        const { isSnipMarkerMessage } =
          require('../services/compact/snipCompact.js') as typeof import('../services/compact/snipCompact.js')
        /* eslint-enable @typescript-eslint/no-require-imports */
        if (isSnipBoundaryMessage(message)) {
          /* eslint-disable @typescript-eslint/no-require-imports */
          const { SnipBoundaryMessage } =
            require('./messages/SnipBoundaryMessage.js') as typeof import('./messages/SnipBoundaryMessage.js')
          /* eslint-enable @typescript-eslint/no-require-imports */
          return <SnipBoundaryMessage message={message} />
        }
        if (isSnipMarkerMessage(message)) {
          // Internal registration marker — not user-facing. The boundary
          // message (above) is what shows when snips actually execute.
          return null
        }
      }
      if (message.subtype === 'local_command') {
        return (
          <UserTextMessage
            addMargin={addMargin}
            param={{ type: 'text', text: String(message.content ?? '') }}
            verbose={verbose}
            isTranscriptMode={isTranscriptMode}
          />
        )
      }
      return (
        <SystemTextMessage
          message={message}
          addMargin={addMargin}
          verbose={verbose}
          isTranscriptMode={isTranscriptMode}
        />
      )
    case 'grouped_tool_use':
      return (
        <GroupedToolUseContent
          message={message}
          tools={tools}
          lookups={lookups}
          inProgressToolUseIDs={inProgressToolUseIDs}
          shouldAnimate={shouldAnimate}
        />
      )
    case 'collapsed_read_search':
      // OffscreenFreeze: the verb flips "Reading…"→"Read" when tools complete.
      // If the group has scrolled into scrollback by then, the update triggers
      // a full terminal reset (CC-1155). This component is never marked static
      // in prompt mode (shouldRenderStatically returns false to allow live
      // updates between API turns), so the memo can't help. Freeze when
      // offscreen — scrollback shows whatever state was visible when it left.
      return (
        <OffscreenFreeze>
          <CollapsedReadSearchContent
            message={message}
            inProgressToolUseIDs={inProgressToolUseIDs}
            shouldAnimate={shouldAnimate}
            // ctrl+o transcript mode should expand the group the same way
            // --verbose does, so recalled memories + tool details are visible.
            // AttachmentMessage.tsx's standalone relevant_memories branch
            // already checks (verbose || isTranscriptMode); this aligns the
            // collapsed-group path to match.
            verbose={verbose || isTranscriptMode}
            tools={tools}
            lookups={lookups}
            isActiveGroup={isActiveCollapsedGroup}
          />
        </OffscreenFreeze>
      )
  }
}

function UserMessage({
  message,
  addMargin,
  tools,
  progressMessagesForMessage,
  param,
  style,
  verbose,
  imageIndex,
  isUserContinuation,
  lookups,
  isTranscriptMode,
  shouldCollapseDiffs,
}: {
  message: NormalizedUserMessage
  addMargin: boolean
  tools: Tools
  progressMessagesForMessage: ProgressMessage[]
  param:
    | TextBlockParam
    | ImageBlockParam
    | ToolUseBlockParam
    | ToolResultBlockParam
  style?: 'condensed'
  verbose: boolean
  imageIndex?: number
  isUserContinuation: boolean
  lookups: ReturnType<typeof buildMessageLookups>
  isTranscriptMode: boolean
  shouldCollapseDiffs?: boolean
}): React.ReactNode {
  const { columns } = useTerminalSize()
  switch (param.type) {
    case 'text':
      return (
        <UserTextMessage
          addMargin={addMargin}
          param={param}
          verbose={verbose}
          planContent={message.planContent as string | undefined}
          isTranscriptMode={isTranscriptMode}
          timestamp={message.timestamp as string | undefined}
        />
      )
    case 'image':
      // If previous message is user (text or image), this is a continuation - use connector
      // Otherwise this image starts a new user turn - use margin
      return (
        <UserImageMessage
          imageId={imageIndex}
          addMargin={addMargin && !isUserContinuation}
        />
      )
    case 'tool_result':
      return (
        <UserToolResultMessage
          param={param}
          message={message}
          lookups={lookups}
          progressMessagesForMessage={progressMessagesForMessage}
          style={style}
          tools={tools}
          verbose={verbose}
          width={columns - 5}
          isTranscriptMode={isTranscriptMode}
          shouldCollapseDiffs={shouldCollapseDiffs}
        />
      )
    default:
      return undefined
  }
}

function AssistantMessageBlock({
  param,
  addMargin,
  tools,
  commands,
  verbose,
  inProgressToolUseIDs,
  progressMessagesForMessage,
  shouldAnimate,
  shouldShowDot,
  width,
  inProgressToolCallCount,
  isTranscriptMode,
  lookups,
  onOpenRateLimitOptions,
  thinkingBlockId,
  lastThinkingBlockId,
  advisorModel,
}: {
  param:
    | BetaContentBlock
    | ConnectorTextBlock
    | AdvisorBlock
    | TextBlockParam
    | ImageBlockParam
    | ThinkingBlockParam
    | ToolUseBlockParam
    | ToolResultBlockParam
  addMargin: boolean
  tools: Tools
  commands: Command[]
  verbose: boolean
  inProgressToolUseIDs: Set<string>
  progressMessagesForMessage: ProgressMessage[]
  shouldAnimate: boolean
  shouldShowDot: boolean
  width?: number | string
  inProgressToolCallCount?: number
  isTranscriptMode: boolean
  lookups: ReturnType<typeof buildMessageLookups>
  onOpenRateLimitOptions?: () => void
  /** ID of this content block's message:index for thinking block comparison */
  thinkingBlockId: string
  /** ID of the last thinking block to show, null means show all */
  lastThinkingBlockId?: string | null
  advisorModel?: string
}): React.ReactNode {
  if (feature('CONNECTOR_TEXT')) {
    if (isConnectorTextBlock(param)) {
      return (
        <AssistantTextMessage
          param={{ type: 'text', text: param.connector_text }}
          addMargin={addMargin}
          shouldShowDot={shouldShowDot}
          verbose={verbose}
          width={width}
          onOpenRateLimitOptions={onOpenRateLimitOptions}
        />
      )
    }
  }
  switch (param.type) {
    case 'tool_use':
      return (
        <AssistantToolUseMessage
          param={param as ToolUseBlockParam}
          addMargin={addMargin}
          tools={tools}
          commands={commands}
          verbose={verbose}
          inProgressToolUseIDs={inProgressToolUseIDs}
          progressMessagesForMessage={progressMessagesForMessage}
          shouldAnimate={shouldAnimate}
          shouldShowDot={shouldShowDot}
          inProgressToolCallCount={inProgressToolCallCount}
          lookups={lookups}
          isTranscriptMode={isTranscriptMode}
        />
      )
    case 'text':
      return (
        <AssistantTextMessage
          param={param as TextBlockParam}
          addMargin={addMargin}
          shouldShowDot={shouldShowDot}
          verbose={verbose}
          width={width}
          onOpenRateLimitOptions={onOpenRateLimitOptions}
        />
      )
    case 'redacted_thinking':
      if (!isTranscriptMode && !verbose) {
        return null
      }
      return <AssistantRedactedThinkingMessage addMargin={addMargin} />
    case 'thinking': {
      if (!isTranscriptMode && !verbose) {
        return null
      }
      // In transcript mode with hidePastThinking, only show the last thinking block
      const isLastThinking =
        !lastThinkingBlockId || thinkingBlockId === lastThinkingBlockId
      return (
        <AssistantThinkingMessage
          addMargin={addMargin}
          param={param as ThinkingBlockParam | { type: 'thinking'; thinking: string }}
          isTranscriptMode={isTranscriptMode}
          verbose={verbose}
          hideInTranscript={isTranscriptMode && !isLastThinking}
        />
      )
    }
    case 'server_tool_use':
    case 'advisor_tool_result':
      if (isAdvisorBlock(param)) {
        return (
          <AdvisorMessage
            block={param}
            addMargin={addMargin}
            resolvedToolUseIDs={lookups.resolvedToolUseIDs}
            erroredToolUseIDs={lookups.erroredToolUseIDs}
            shouldAnimate={shouldAnimate}
            verbose={verbose || isTranscriptMode}
            advisorModel={advisorModel}
          />
        )
      }
      logError(new Error(`Unable to render server tool block: ${param.type}`))
      return null
    default:
      logError(new Error(`Unable to render message type: ${param.type}`))
      return null
  }
}

export function hasThinkingContent(m: {
  type: string
  message?: { content: Array<{ type: string }> }
}): boolean {
  if (m.type !== 'assistant' || !m.message) return false
  return m.message.content.some(
    b => b.type === 'thinking' || b.type === 'redacted_thinking',
  )
}

/** Exported for testing */
export function areMessagePropsEqual(prev: Props, next: Props): boolean {
  if (prev.message.uuid !== next.message.uuid) return false
  // Only re-render on lastThinkingBlockId change if this message actually
  // has thinking content — otherwise every message in scrollback re-renders
  // whenever streaming thinking starts/stops (CC-941).
  if (
    prev.lastThinkingBlockId !== next.lastThinkingBlockId &&
    hasThinkingContent(next.message as Parameters<typeof hasThinkingContent>[0])
  ) {
    return false
  }
  // Verbose toggle changes thinking block visibility/expansion
  if (prev.verbose !== next.verbose) return false
  // Only re-render if this message's "is latest bash output" status changed,
  // not when the global latestBashOutputUUID changes to a different message
  const prevIsLatest = prev.latestBashOutputUUID === prev.message.uuid
  const nextIsLatest = next.latestBashOutputUUID === next.message.uuid
  if (prevIsLatest !== nextIsLatest) return false
  if (prev.isTranscriptMode !== next.isTranscriptMode) return false
  // containerWidth is an absolute number in the no-metadata path (wrapper
  // Box is skipped). Static messages must re-render on terminal resize.
  if (prev.containerWidth !== next.containerWidth) return false
  if (prev.isStatic && next.isStatic) return true
  return false
}

export const Message = React.memo(MessageImpl, areMessagePropsEqual)