@alumbwe/anvil 1.0.0 → 1.0.2

package/src/components/message-with-agents.tsx

@@ -1,506 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-import { memo, useCallback, useMemo, type ReactNode } from 'react'
-import React from 'react'
-import { useShallow } from 'zustand/react/shallow'
-
-import { Button } from './button'
-import { ErrorBoundary } from './error-boundary'
-import { GridLayout } from './grid-layout'
-import { MessageBlock } from './message-block'
-import { ModeDivider } from './mode-divider'
-import { useChatStore } from '../state/chat-store'
-import { useMessageBlockStore } from '../state/message-block-store'
-import { splitByAgentSize } from '../utils/block-processor'
-import { getCliEnv } from '../utils/env'
-import {
-  AGENT_CONTENT_HORIZONTAL_PADDING,
-  MAX_AGENT_DEPTH,
-} from '../utils/layout-helpers'
-import {
-  renderMarkdown,
-  hasMarkdown,
-  type MarkdownPalette,
-} from '../utils/markdown-renderer'
-
-import type { ChatMessage } from '../types/chat'
-import type { FeedbackCategory } from '@anvil/common/constants/feedback'
-
-interface AgentChildrenGridProps {
-  agentChildren: ChatMessage[]
-  depth: number
-  availableWidth: number
-}
-
-const AgentChildrenGrid = memo(
-  ({ agentChildren, depth, availableWidth }: AgentChildrenGridProps) => {
-    const theme = useMessageBlockStore((state) => state.context.theme)
-
-    const getItemKey = useCallback((agent: ChatMessage) => agent.id, [])
-
-    const renderAgentChild = useCallback(
-      (agent: ChatMessage, _idx: number, columnWidth: number) => (
-        <MessageWithAgents
-          message={agent}
-          depth={depth + 1}
-          isLastMessage={false}
-          availableWidth={columnWidth}
-        />
-      ),
-      [depth],
-    )
-
-    const subGroups = useMemo(
-      () => splitByAgentSize(agentChildren, (m) => m.agent?.agentType ?? ''),
-      [agentChildren],
-    )
-
-    if (agentChildren.length === 0) return null
-
-    if (depth >= MAX_AGENT_DEPTH) {
-      if (getCliEnv().NODE_ENV === 'development') {
-        console.warn(
-          `[AgentChildrenGrid] Depth limit (${MAX_AGENT_DEPTH}) reached, truncating agent tree`,
-        )
-      }
-      return (
-        <text fg={theme?.muted} attributes={TextAttributes.ITALIC}>
-          {`${agentChildren.length} nested agent${
-            agentChildren.length > 1 ? 's' : ''
-          } not shown (depth limit)`}
-        </text>
-      )
-    }
-
-    const errorFallback = (
-      <text fg={theme?.error}>Error rendering agent children</text>
-    )
-
-    return (
-      <ErrorBoundary fallback={errorFallback} componentName="AgentChildrenGrid">
-        <box style={{ flexDirection: 'column', gap: 0, width: '100%' }}>
-          {subGroups.map((group) => (
-            <GridLayout
-              key={getItemKey(group[0])}
-              items={group}
-              availableWidth={availableWidth}
-              getItemKey={getItemKey}
-              renderItem={renderAgentChild}
-            />
-          ))}
-        </box>
-      </ErrorBoundary>
-    )
-  },
-)
-
-interface MessageWithAgentsProps {
-  message: ChatMessage
-  depth: number
-  isLastMessage: boolean
-  availableWidth: number
-}
-
-export const MessageWithAgents = memo(
-  ({ message, depth, isLastMessage, availableWidth }: MessageWithAgentsProps): ReactNode => {
-    const SIDE_GUTTER = 1
-    const isAgent = message.variant === 'agent'
-
-    // Use useShallow for grouped selectors to prevent unnecessary re-renders
-    const { theme, markdownPalette, messageTree, isWaitingForResponse, timerStartTime } =
-      useMessageBlockStore(
-        useShallow((state) => ({
-          theme: state.context.theme,
-          markdownPalette: state.context.markdownPalette,
-          messageTree: state.context.messageTree,
-          isWaitingForResponse: state.context.isWaitingForResponse,
-          timerStartTime: state.context.timerStartTime,
-        })),
-      )
-
-    const { onToggleCollapsed, onBuildFast, onBuildMax, onBuildLite, onFeedback, onCloseFeedback } =
-      useMessageBlockStore(
-        useShallow((state) => ({
-          onToggleCollapsed: state.callbacks.onToggleCollapsed,
-          onBuildFast: state.callbacks.onBuildFast,
-          onBuildMax: state.callbacks.onBuildMax,
-          onBuildLite: state.callbacks.onBuildLite,
-          onFeedback: state.callbacks.onFeedback,
-          onCloseFeedback: state.callbacks.onCloseFeedback,
-        })),
-      )
-
-    // Memoize onOpenFeedback to prevent unnecessary re-renders
-    const onOpenFeedback = useCallback(
-      (options?: {
-        category?: FeedbackCategory
-        footerMessage?: string
-        errors?: Array<{ id: string; message: string }>
-      }) => {
-        onFeedback(message.id, options)
-      },
-      [onFeedback, message.id],
-    )
-
-    const contentBoxStyle = useMemo(
-      () => ({
-        backgroundColor: theme?.background,
-        padding: 0,
-        paddingLeft: SIDE_GUTTER,
-        paddingRight: SIDE_GUTTER,
-        paddingTop: 0,
-        paddingBottom: 0,
-        gap: 0,
-        width: '100%' as const,
-        flexGrow: 1,
-        justifyContent: 'center' as const,
-      }),
-      [theme?.background],
-    )
-
-    if (isAgent) {
-      return <AgentMessage message={message} depth={depth} availableWidth={availableWidth} />
-    }
-
-    const isAi = message.variant === 'ai'
-    const isUser = message.variant === 'user'
-    const isError = message.variant === 'error'
-
-    if (
-      message.blocks &&
-      message.blocks.length === 1 &&
-      message.blocks[0].type === 'mode-divider'
-    ) {
-      const dividerBlock = message.blocks[0]
-      return (
-        <ModeDivider
-          key={message.id}
-          mode={dividerBlock.mode}
-          width={availableWidth}
-        />
-      )
-    }
-
-    const lineColor = isError
-      ? 'red'
-      : isAi
-        ? theme?.aiLine ?? 'white'
-        : theme?.userLine ?? 'white'
-    const textColor = theme?.foreground ?? 'white'
-    const timestampColor = isError
-      ? 'red'
-      : isAi
-        ? theme?.muted ?? 'white'
-        : theme?.muted ?? 'white'
-
-    const estimatedMessageWidth = availableWidth
-    const codeBlockWidth = Math.max(10, estimatedMessageWidth - 8)
-
-    const paletteForMessage: MarkdownPalette | undefined = useMemo(
-      () => markdownPalette ? {
-        ...markdownPalette,
-        codeTextFg: textColor,
-      } : undefined,
-      [markdownPalette, textColor],
-    )
-
-    const markdownOptions = useMemo(
-      () => ({ codeBlockWidth, palette: paletteForMessage! }),
-      [codeBlockWidth, paletteForMessage],
-    )
-
-    const isLoading =
-      isAi && message.content === '' && !message.blocks && isWaitingForResponse
-
-    const agentChildren = messageTree?.get(message.id) ?? []
-    const hasAgentChildren = agentChildren.length > 0
-    // Show vertical line for user messages (including bash commands which are now user messages)
-    const showVerticalLine = isUser
-
-    return (
-      <box
-        key={message.id}
-        style={{
-          width: '100%',
-          flexDirection: 'column',
-          gap: 0,
-          paddingBottom: isLastMessage ? 0 : 1,
-        }}
-      >
-        <box
-          style={{
-            width: '100%',
-            flexDirection: 'row',
-          }}
-        >
-          {showVerticalLine ? (
-            <box
-              style={{
-                flexDirection: 'row',
-                gap: 0,
-                alignItems: 'stretch',
-                width: '100%',
-                flexGrow: 1,
-              }}
-            >
-              <box
-                style={{
-                  width: 1,
-                  backgroundColor: lineColor,
-                  marginTop: 0,
-                  marginBottom: 0,
-                }}
-              />
-              <box style={contentBoxStyle}>
-                <MessageBlock
-                  messageId={message.id}
-                  blocks={message.blocks}
-                  content={message.content}
-                  isUser={isUser}
-                  isAi={isAi}
-                  isLoading={isLoading}
-                  timestamp={message.timestamp}
-                  isComplete={message.isComplete}
-                  completionTime={message.completionTime}
-                  credits={message.credits}
-                  timerStartTime={timerStartTime}
-                  textColor={textColor}
-                  timestampColor={timestampColor}
-                  markdownOptions={markdownOptions}
-                  availableWidth={availableWidth}
-                  markdownPalette={markdownPalette!}
-                  onToggleCollapsed={onToggleCollapsed}
-                  onBuildFast={onBuildFast}
-                  onBuildMax={onBuildMax}
-                  onBuildLite={onBuildLite}
-                  onFeedback={onFeedback}
-                  onCloseFeedback={onCloseFeedback}
-                  validationErrors={message.validationErrors}
-                  userError={message.userError}
-                  onOpenFeedback={onOpenFeedback}
-                  attachments={message.attachments}
-                  textAttachments={message.textAttachments}
-                  fileAttachments={message.fileAttachments}
-                  metadata={message.metadata}
-                  isLastMessage={isLastMessage}
-                />
-              </box>
-            </box>
-          ) : (
-            <box style={contentBoxStyle}>
-              <MessageBlock
-                messageId={message.id}
-                blocks={message.blocks}
-                content={message.content}
-                isUser={isUser}
-                isAi={isAi}
-                isLoading={isLoading}
-                timestamp={message.timestamp}
-                isComplete={message.isComplete}
-                completionTime={message.completionTime}
-                credits={message.credits}
-                timerStartTime={timerStartTime}
-                textColor={textColor}
-                timestampColor={timestampColor}
-                markdownOptions={markdownOptions}
-                availableWidth={availableWidth}
-                markdownPalette={markdownPalette!}
-                onToggleCollapsed={onToggleCollapsed}
-                onBuildFast={onBuildFast}
-                onBuildMax={onBuildMax}
-                onBuildLite={onBuildLite}
-                onFeedback={onFeedback}
-                onCloseFeedback={onCloseFeedback}
-                validationErrors={message.validationErrors}
-                userError={message.userError}
-                onOpenFeedback={onOpenFeedback}
-                attachments={message.attachments}
-                textAttachments={message.textAttachments}
-                fileAttachments={message.fileAttachments}
-                metadata={message.metadata}
-                isLastMessage={isLastMessage}
-              />
-            </box>
-          )}
-        </box>
-
-        {hasAgentChildren && (
-          <AgentChildrenGrid
-            agentChildren={agentChildren}
-            depth={depth}
-            availableWidth={availableWidth}
-          />
-        )}
-      </box>
-    )
-  },
-)
-
-interface AgentMessageProps {
-  message: ChatMessage
-  depth: number
-  availableWidth: number
-}
-
-const AgentMessage = memo(
-  ({ message, depth, availableWidth }: AgentMessageProps): ReactNode => {
-    // Use useShallow for grouped selectors to prevent unnecessary re-renders
-    const { theme, markdownPalette, messageTree, onToggleCollapsed } = useMessageBlockStore(
-      useShallow((state) => ({
-        theme: state.context.theme,
-        markdownPalette: state.context.markdownPalette,
-        messageTree: state.context.messageTree,
-        onToggleCollapsed: state.callbacks.onToggleCollapsed,
-      })),
-    )
-
-    // Derive streaming boolean for this specific message to avoid re-renders when other agents change
-    const isStreaming = useChatStore((state) => state.streamingAgents.has(message.id))
-    const setFocusedAgentId = useChatStore((state) => state.setFocusedAgentId)
-
-    // Guard against missing agent info (should not happen for agent variant messages)
-    if (!message.agent) {
-      return (
-        <text fg={theme?.error}>
-          Error: Missing agent info for agent message
-        </text>
-      )
-    }
-    const agentInfo = message.agent
-
-    // Get or initialize collapse state from message metadata
-    const isCollapsed = message.metadata?.isCollapsed ?? false
-
-    const agentChildren = messageTree?.get(message.id) ?? []
-
-    const bulletChar = '• '
-    const fullPrefix = bulletChar
-
-    const lines = message.content.split('\n').filter((line) => line.trim())
-    const firstLine = lines[0] || ''
-    const lastLine = lines[lines.length - 1] || firstLine
-    const rawDisplayContent = isCollapsed ? lastLine : message.content
-
-    const streamingPreview = isStreaming
-      ? firstLine.replace(/[#*_`~\[\]()]/g, '').trim() + '...'
-      : ''
-
-    const finishedPreview =
-      !isStreaming && isCollapsed
-        ? lastLine.replace(/[#*_`~\[\]()]/g, '').trim()
-        : ''
-
-    const agentCodeBlockWidth = Math.max(
-      10,
-      availableWidth - AGENT_CONTENT_HORIZONTAL_PADDING,
-    )
-    const agentPalette: MarkdownPalette | undefined = markdownPalette ? {
-      ...markdownPalette,
-      codeTextFg: theme?.foreground ?? markdownPalette.codeTextFg,
-    } : undefined
-    const agentMarkdownOptions = {
-      codeBlockWidth: agentCodeBlockWidth,
-      palette: agentPalette!,
-    }
-    const displayContent = hasMarkdown(rawDisplayContent)
-      ? renderMarkdown(rawDisplayContent, agentMarkdownOptions)
-      : rawDisplayContent
-
-    const handleTitleClick = (): void => {
-      onToggleCollapsed(message.id)
-      setFocusedAgentId(message.id)
-    }
-
-    const handleContentClick = (): void => {
-      if (!isCollapsed) {
-        return
-      }
-
-      onToggleCollapsed(message.id)
-      setFocusedAgentId(message.id)
-    }
-
-    return (
-      <box
-        key={message.id}
-        style={{
-          flexDirection: 'column',
-          gap: 0,
-          flexShrink: 0,
-        }}
-      >
-        <box
-          style={{
-            flexDirection: 'row',
-            flexShrink: 0,
-          }}
-        >
-          <text style={{ wrapMode: 'none' }}>
-            <span fg={theme?.success}>{fullPrefix}</span>
-          </text>
-          <box
-            style={{
-              flexDirection: 'column',
-              gap: 0,
-              flexShrink: 1,
-              flexGrow: 1,
-            }}
-          >
-            <Button
-              style={{
-                flexDirection: 'row',
-                alignSelf: 'flex-start',
-                backgroundColor: isCollapsed ? theme?.muted : theme?.success,
-                paddingLeft: 1,
-                paddingRight: 1,
-              }}
-              onClick={handleTitleClick}
-            >
-              <text style={{ wrapMode: 'word' }}>
-                <span fg={theme?.foreground}>{isCollapsed ? '▸ ' : '▾ '}</span>
-                <span fg={theme?.foreground} attributes={TextAttributes.BOLD}>
-                  {agentInfo.agentName}
-                </span>
-              </text>
-            </Button>
-            <Button
-              style={{ flexShrink: 1, paddingBottom: isCollapsed ? 1 : 0 }}
-              onClick={handleContentClick}
-            >
-              {isStreaming && isCollapsed && streamingPreview && (
-                <text
-                  style={{ wrapMode: 'word', fg: theme?.foreground }}
-                  attributes={TextAttributes.ITALIC}
-                >
-                  {streamingPreview}
-                </text>
-              )}
-              {!isStreaming && isCollapsed && finishedPreview && (
-                <text
-                  style={{ wrapMode: 'word', fg: theme?.muted }}
-                  attributes={TextAttributes.ITALIC}
-                >
-                  {finishedPreview}
-                </text>
-              )}
-              {!isCollapsed && (
-                <text
-                  key={`agent-content-${message.id}`}
-                  style={{ wrapMode: 'word', fg: theme?.foreground }}
-                >
-                  {displayContent}
-                </text>
-              )}
-            </Button>
-          </box>
-        </box>
-        {agentChildren.length > 0 && (
-          <AgentChildrenGrid
-            agentChildren={agentChildren}
-            depth={depth}
-            availableWidth={availableWidth}
-          />
-        )}
-      </box>
-    )
-  },
-)

package/src/components/mode-divider.tsx

@@ -1,43 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-import React from 'react'
-import stringWidth from 'string-width'
-
-import { useTheme } from '../hooks/use-theme'
-import { IS_FREEBUFF } from '../utils/constants'
-
-interface ModeDividerProps {
-  mode: string
-  width: number
-}
-
-export const ModeDivider = ({ mode, width }: ModeDividerProps) => {
-  if (IS_FREEBUFF) return null
-
-  const theme = useTheme()
-
-  const label = ` ${mode} `
-  const labelWidth = stringWidth(label)
-  const lineWidth = Math.max(0, Math.floor((width - labelWidth) / 2))
-  const leftLine = '─'.repeat(lineWidth)
-  const rightLine = '─'.repeat(Math.max(0, width - lineWidth - labelWidth))
-
-  return (
-    <box
-      style={{
-        width: '100%',
-        flexDirection: 'row',
-        justifyContent: 'center',
-        paddingTop: 1,
-        paddingBottom: 1,
-      }}
-    >
-      <text style={{ wrapMode: 'none' }}>
-        <span fg={theme.border}>{leftLine}</span>
-        <span fg={theme.foreground} attributes={TextAttributes.BOLD}>
-          {label}
-        </span>
-        <span fg={theme.border}>{rightLine}</span>
-      </text>
-    </box>
-  )
-}