@alumbwe/anvil 1.0.0

package/src/components/blocks/blocks-renderer.tsx

@@ -0,0 +1,289 @@
+import React, { memo, useEffect, useMemo, useRef } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+
+import { AgentBlockGrid } from './agent-block-grid'
+import { AgentBranchWrapper } from './agent-branch-wrapper'
+import { ImageBlock } from './image-block'
+import { ImplementorGroup } from './implementor-row'
+import { SingleBlock } from './single-block'
+import { ThinkingBlock } from './thinking-block'
+import { ToolBlockGroup } from './tool-block-group'
+import { AdCard } from '../ad-banner'
+import { useMessageBlockStore } from '../../state/message-block-store'
+import { processBlocks, type BlockProcessorHandlers } from '../../utils/block-processor'
+import {
+  getResponseAdForSlot,
+  responseAdDisplayCount,
+} from '../../utils/lazy-response-ads'
+import {
+  responseAdNodePositions,
+  responseAdSlotCount,
+} from '../../utils/response-ad-positions'
+
+import type { ReactNode } from 'react'
+import type { ContentBlock } from '../../types/chat'
+import type { MarkdownPalette } from '../../utils/markdown-renderer'
+
+// `availableWidth` is terminalWidth - 2, but message content is clipped
+// tighter: the transcript scrollbox pads its content (1 left + 2 right) and
+// the message adds a 1-col side gutter each side, for a net 3 columns less.
+// Size interspersed ad cards to the clipped interior so their right border
+// stays visible.
+const RESPONSE_AD_WIDTH_INSET = 3
+
+interface BlocksRendererProps {
+  sourceBlocks: ContentBlock[]
+  messageId: string
+  isLoading: boolean
+  isComplete?: boolean
+  isUser: boolean
+  textColor: string
+  availableWidth: number
+  markdownPalette: MarkdownPalette
+  onToggleCollapsed: (id: string) => void
+  onBuildFast: () => void
+  onBuildMax: () => void
+  onBuildLite: () => void
+  isLastMessage?: boolean
+  contentToCopy?: string
+}
+
+/** Props stored in ref for stable handler access */
+interface BlocksRendererPropsRef {
+  sourceBlocks: ContentBlock[]
+  messageId: string
+  isLoading: boolean
+  isComplete?: boolean
+  isUser: boolean
+  textColor: string
+  availableWidth: number
+  markdownPalette: MarkdownPalette
+  onToggleCollapsed: (id: string) => void
+  onBuildFast: () => void
+  onBuildMax: () => void
+  onBuildLite: () => void
+  isLastMessage?: boolean
+  contentToCopy?: string
+  lastTextBlockIndex: number
+}
+
+export const BlocksRenderer = memo(
+  ({
+    sourceBlocks,
+    messageId,
+    isLoading,
+    isComplete,
+    isUser,
+    textColor,
+    availableWidth,
+    markdownPalette,
+    onToggleCollapsed,
+    onBuildFast,
+    onBuildMax,
+    onBuildLite,
+    isLastMessage,
+    contentToCopy,
+  }: BlocksRendererProps) => {
+    const lastTextBlockIndex = contentToCopy
+      ? sourceBlocks.reduceRight(
+          (acc, block, idx) =>
+            acc === -1 && block.type === 'text' ? idx : acc,
+          -1,
+        )
+      : -1
+
+    // Store props in ref for stable handler access (avoids 17 useMemo dependencies)
+    const propsRef = useRef<BlocksRendererPropsRef>(null!)
+    propsRef.current = {
+      sourceBlocks,
+      messageId,
+      isLoading,
+      isComplete,
+      isUser,
+      textColor,
+      availableWidth,
+      markdownPalette,
+      onToggleCollapsed,
+      onBuildFast,
+      onBuildMax,
+      onBuildLite,
+      isLastMessage,
+      contentToCopy,
+      lastTextBlockIndex,
+    }
+
+    // Handlers are stable (empty deps) and read latest props from ref
+    const handlers: BlockProcessorHandlers = useMemo(
+      () => ({
+        onReasoningGroup: (reasoningBlocks, startIndex) => {
+          const p = propsRef.current
+          return (
+            <ThinkingBlock
+              key={reasoningBlocks[0]?.thinkingId ?? `${p.messageId}-thinking-${startIndex}`}
+              blocks={reasoningBlocks}
+              onToggleCollapsed={p.onToggleCollapsed}
+              availableWidth={p.availableWidth}
+              isNested={false}
+              isMessageComplete={p.isComplete ?? false}
+            />
+          )
+        },
+
+        onImageBlock: (block, index) => {
+          const p = propsRef.current
+          return (
+            <ImageBlock
+              key={`${p.messageId}-image-${index}`}
+              block={block}
+              availableWidth={p.availableWidth}
+            />
+          )
+        },
+
+        onToolGroup: (toolBlocks, startIndex, nextIndex) => {
+          const p = propsRef.current
+          return (
+            <ToolBlockGroup
+              key={`${p.messageId}-tool-group-${startIndex}`}
+              toolBlocks={toolBlocks}
+              keyPrefix={p.messageId}
+              startIndex={startIndex}
+              nextIndex={nextIndex}
+              siblingBlocks={p.sourceBlocks}
+              availableWidth={p.availableWidth}
+              onToggleCollapsed={p.onToggleCollapsed}
+              markdownPalette={p.markdownPalette}
+            />
+          )
+        },
+
+        onImplementorGroup: (implementors, startIndex) => {
+          const p = propsRef.current
+          return (
+            <ImplementorGroup
+              key={`${p.messageId}-implementor-group-${startIndex}`}
+              implementors={implementors}
+              siblingBlocks={p.sourceBlocks}
+              availableWidth={p.availableWidth}
+            />
+          )
+        },
+
+        onAgentGroup: (agentBlocks, startIndex) => {
+          const p = propsRef.current
+          return (
+            <AgentBlockGrid
+              key={`${p.messageId}-agent-grid-${startIndex}`}
+              agentBlocks={agentBlocks}
+              keyPrefix={`${p.messageId}-agent-grid-${startIndex}`}
+              availableWidth={p.availableWidth}
+              renderAgentBranch={(agentBlock, prefix, width) => (
+                <AgentBranchWrapper
+                  agentBlock={agentBlock}
+                  keyPrefix={prefix}
+                  availableWidth={width}
+                  markdownPalette={p.markdownPalette}
+                  onToggleCollapsed={p.onToggleCollapsed}
+                  onBuildFast={p.onBuildFast}
+                  onBuildMax={p.onBuildMax}
+                  onBuildLite={p.onBuildLite}
+                  siblingBlocks={p.sourceBlocks}
+                  isLastMessage={p.isLastMessage}
+                />
+              )}
+            />
+          )
+        },
+
+        onSingleBlock: (block, index) => {
+          const p = propsRef.current
+          return (
+            <SingleBlock
+              key={`${p.messageId}-block-${index}`}
+              block={block}
+              idx={index}
+              messageId={p.messageId}
+              blocks={p.sourceBlocks}
+              isLoading={p.isLoading}
+              isComplete={p.isComplete}
+              isUser={p.isUser}
+              textColor={p.textColor}
+              availableWidth={p.availableWidth}
+              markdownPalette={p.markdownPalette}
+              onToggleCollapsed={p.onToggleCollapsed}
+              onBuildFast={p.onBuildFast}
+              onBuildMax={p.onBuildMax}
+              onBuildLite={p.onBuildLite}
+              isLastMessage={p.isLastMessage}
+              contentToCopy={index === p.lastTextBlockIndex ? p.contentToCopy : undefined}
+            />
+          )
+        },
+      }),
+      [], // Empty deps - handlers read from propsRef.current
+    )
+
+    // Ads assigned to this assistant response by the ads hook (via chat.tsx).
+    // Only top-level streamed answers ever get an entry, so this is undefined
+    // for user messages, agent branches, and system notices.
+    const responseAds = useMessageBlockStore(
+      (state) => state.context.responseAds[messageId],
+    )
+    const { onAdClick, onAdImpression, onResponseAdsNeeded } =
+      useMessageBlockStore(
+        useShallow((state) => ({
+          onAdClick: state.callbacks.onAdClick,
+          onAdImpression: state.callbacks.onAdImpression,
+          onResponseAdsNeeded: state.callbacks.onResponseAdsNeeded,
+        })),
+      )
+
+    const nodes = processBlocks(sourceBlocks, handlers)
+    const eligibleAdCount = responseAdSlotCount({ nodeCount: nodes.length })
+
+    useEffect(() => {
+      if (eligibleAdCount > 0) {
+        onResponseAdsNeeded(messageId, eligibleAdCount)
+      }
+    }, [eligibleAdCount, messageId, onResponseAdsNeeded])
+
+    if (!responseAds || responseAds.length === 0) {
+      return <>{nodes}</>
+    }
+
+    // Intersperse ads between rendered nodes. Positions depend only on the
+    // node count (nodes are append-only while streaming), so each ad stays put
+    // once its slot has a following node.
+    const displayAdCount = responseAdDisplayCount({
+      eligibleCount: eligibleAdCount,
+      poolSize: responseAds.length,
+    })
+    const positions = responseAdNodePositions({
+      nodeCount: nodes.length,
+      adCount: displayAdCount,
+    })
+    const children: ReactNode[] = []
+    let nextAd = 0
+    nodes.forEach((node, i) => {
+      children.push(node)
+      if (nextAd < positions.length && positions[nextAd] === i) {
+        const ad = getResponseAdForSlot(responseAds, nextAd)
+        if (ad) {
+          children.push(
+            <AdCard
+              key={`response-ad-${messageId}-${nextAd}`}
+              ad={ad}
+              width={Math.max(20, availableWidth - RESPONSE_AD_WIDTH_INSET)}
+              variant="inline"
+              onClick={onAdClick}
+              onImpression={onAdImpression}
+            />,
+          )
+        }
+        nextAd++
+      }
+    })
+
+    return <>{children}</>
+  },
+)

package/src/components/blocks/content-with-markdown.tsx

@@ -0,0 +1,33 @@
+import { memo } from 'react'
+
+import {
+  renderMarkdown,
+  renderStreamingMarkdown,
+  hasMarkdown,
+  type MarkdownPalette,
+} from '../../utils/markdown-renderer'
+
+interface ContentWithMarkdownProps {
+  content: string
+  isStreaming: boolean
+  codeBlockWidth: number
+  palette: MarkdownPalette
+}
+
+export const ContentWithMarkdown = memo(
+  ({
+    content,
+    isStreaming,
+    codeBlockWidth,
+    palette,
+  }: ContentWithMarkdownProps) => {
+    if (!hasMarkdown(content)) {
+      return content
+    }
+    const options = { codeBlockWidth, palette }
+    if (isStreaming) {
+      return renderStreamingMarkdown(content, options)
+    }
+    return renderMarkdown(content, options)
+  },
+)

package/src/components/blocks/image-block.tsx

@@ -0,0 +1,128 @@
+import { TextAttributes } from '@opentui/core'
+import { memo, useMemo } from 'react'
+
+import { useTheme } from '../../hooks/use-theme'
+import { calculateDisplaySize } from '../../utils/image-display'
+import {
+  renderInlineImage,
+  supportsInlineImages,
+  getImageSupportDescription,
+} from '../../utils/terminal-images'
+
+import type { ImageContentBlock } from '../../types/chat'
+
+interface ImageBlockProps {
+  block: ImageContentBlock
+  availableWidth: number
+}
+
+export const ImageBlock = memo(({ block, availableWidth }: ImageBlockProps) => {
+  const theme = useTheme()
+
+  const { image, mediaType, filename, size, width, height } = block
+
+  // Calculate display dimensions based on actual image dimensions
+  const displaySize = useMemo(() => 
+    calculateDisplaySize({ width, height, availableWidth }),
+    [width, height, availableWidth]
+  )
+
+  // Try to render inline if supported
+  const inlineSequence = useMemo(() => {
+    if (!supportsInlineImages()) {
+      return null
+    }
+
+    return renderInlineImage(image, {
+      width: displaySize.width,
+      height: displaySize.height,
+      filename,
+    })
+  }, [image, filename, displaySize])
+
+  // Format file size
+  const formattedSize = useMemo(() => {
+    if (!size) return null
+    if (size < 1024) return `${size}B`
+    if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)}KB`
+    return `${(size / (1024 * 1024)).toFixed(1)}MB`
+  }, [size])
+
+  // Get file extension for display
+  const fileExtension = useMemo(() => {
+    if (filename) {
+      const parts = filename.split('.')
+      return parts.length > 1 ? parts[parts.length - 1].toUpperCase() : null
+    }
+    // Extract from mediaType
+    const match = mediaType.match(/image\/(\w+)/)
+    return match ? match[1].toUpperCase() : null
+  }, [filename, mediaType])
+
+  if (inlineSequence) {
+    // Render inline image using terminal escape sequence
+    return (
+      <box style={{ flexDirection: 'column', gap: 0 }}>
+        {/* Image caption/metadata */}
+        <text style={{ wrapMode: 'none', fg: theme.muted }}>
+          <span attributes={TextAttributes.DIM}>📷 </span>
+          <span>{filename || 'Image'}</span>
+          {formattedSize && (
+            <span attributes={TextAttributes.DIM}> ({formattedSize})</span>
+          )}
+        </text>
+        
+        {/* The actual inline image - rendered via escape sequence */}
+        <text style={{ wrapMode: 'none' }}>{inlineSequence}</text>
+      </box>
+    )
+  }
+
+  // Fallback: Display image metadata when inline rendering not supported
+  return (
+    <box
+      style={{
+        flexDirection: 'column',
+        gap: 0,
+        paddingLeft: 1,
+        borderStyle: 'single',
+        borderColor: theme.border,
+      }}
+    >
+      {/* Header */}
+      <text style={{ wrapMode: 'none', fg: theme.foreground }}>
+        <span attributes={TextAttributes.BOLD}>📷 Image Attachment</span>
+      </text>
+
+      {/* Filename */}
+      {filename && (
+        <text style={{ wrapMode: 'none', fg: theme.foreground }}>
+          <span attributes={TextAttributes.DIM}>Name: </span>
+          <span>{filename}</span>
+        </text>
+      )}
+
+      {/* Type */}
+      <text style={{ wrapMode: 'none', fg: theme.muted }}>
+        <span attributes={TextAttributes.DIM}>Type: </span>
+        <span>{fileExtension || mediaType}</span>
+      </text>
+
+      {/* Size */}
+      {formattedSize && (
+        <text style={{ wrapMode: 'none', fg: theme.muted }}>
+          <span attributes={TextAttributes.DIM}>Size: </span>
+          <span>{formattedSize}</span>
+        </text>
+      )}
+
+      {/* Hint about terminal support */}
+      <text
+        style={{ wrapMode: 'word', fg: theme.muted, marginTop: 1 }}
+        attributes={TextAttributes.DIM}
+      >
+        {`(${getImageSupportDescription()} - use iTerm2 or Kitty for inline display)`}
+      </text>
+    </box>
+  )
+})