@alumbwe/anvil 1.0.0 → 1.0.2

package/src/components/message-block.tsx

@@ -1,346 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-import { memo, useState } from 'react'
-
-import { BlocksRenderer } from './blocks/blocks-renderer'
-import { UserContentWithCopyButton } from './blocks/user-content-copy'
-import { Button } from './button'
-import { FileAttachmentCard } from './file-attachment-card'
-import { ImageCard } from './image-card'
-import { MessageFooter } from './message-footer'
-import { TextAttachmentCard } from './text-attachment-card'
-import { UserErrorBanner } from './user-error-banner'
-import { ValidationErrorPopover } from './validation-error-popover'
-import { useTheme } from '../hooks/use-theme'
-import { useWhyDidYouUpdateById } from '../hooks/use-why-did-you-update'
-import { getCliEnv } from '../utils/env'
-import { type MarkdownPalette } from '../utils/markdown-renderer'
-import { formatCwd } from '../utils/path-helpers'
-
-import type { FeedbackCategory } from '@anvil/common/constants/feedback'
-
-import type {
-  ContentBlock,
-  FileAttachment,
-  ImageAttachment,
-  TextAttachment,
-  ChatMessageMetadata,
-} from '../types/chat'
-import type { ThemeColor } from '../types/theme-system'
-
-interface MessageBlockProps {
-  messageId: string
-  blocks?: ContentBlock[]
-  content: string
-  isUser: boolean
-  isAi: boolean
-  isLoading: boolean
-  timestamp: string
-  isComplete?: boolean
-  completionTime?: string
-  credits?: number
-  timerStartTime: number | null
-  textColor?: ThemeColor
-  timestampColor: string
-  markdownOptions: { codeBlockWidth: number; palette: MarkdownPalette }
-  availableWidth: number
-  markdownPalette: MarkdownPalette
-  onToggleCollapsed: (id: string) => void
-  onBuildFast: () => void
-  onBuildMax: () => void
-  onBuildLite: () => void
-  onFeedback?: (messageId: string) => void
-  onCloseFeedback?: () => void
-  validationErrors?: Array<{ id: string; message: string }>
-  /** Runtime error to display in UI but NOT send to LLM */
-  userError?: string
-  onOpenFeedback?: (options?: {
-    category?: FeedbackCategory
-    footerMessage?: string
-    errors?: Array<{ id: string; message: string }>
-  }) => void
-  attachments?: ImageAttachment[]
-  textAttachments?: TextAttachment[]
-  fileAttachments?: FileAttachment[]
-  metadata?: ChatMessageMetadata
-  isLastMessage?: boolean
-}
-
-const MessageAttachments = memo(({
-  imageAttachments,
-  textAttachments,
-  fileAttachments,
-}: {
-  imageAttachments: ImageAttachment[]
-  textAttachments: TextAttachment[]
-  fileAttachments: FileAttachment[]
-}) => {
-  if (imageAttachments.length === 0 && textAttachments.length === 0 && fileAttachments.length === 0) {
-    return null
-  }
-
-  return (
-    <box
-      style={{
-        flexDirection: 'row',
-        gap: 1,
-        flexWrap: 'wrap',
-      }}
-    >
-      {imageAttachments.map((attachment) => (
-        <ImageCard
-          key={attachment.path}
-          image={attachment}
-          showRemoveButton={false}
-        />
-      ))}
-      {textAttachments.map((attachment) => (
-        <TextAttachmentCard
-          key={attachment.id}
-          attachment={attachment}
-          showRemoveButton={false}
-        />
-      ))}
-      {fileAttachments.map((attachment) => (
-        <FileAttachmentCard
-          key={attachment.path}
-          attachment={attachment}
-          showRemoveButton={false}
-        />
-      ))}
-    </box>
-  )
-})
-
-export const MessageBlock = memo(({
-  messageId,
-  blocks,
-  content,
-  isUser,
-  isAi,
-  isLoading,
-  timestamp,
-  isComplete,
-  completionTime,
-  credits,
-  timerStartTime,
-  textColor,
-  timestampColor,
-  markdownOptions,
-  availableWidth,
-  markdownPalette,
-  onToggleCollapsed,
-  onBuildFast,
-  onBuildMax,
-  onBuildLite,
-  onFeedback,
-  onCloseFeedback,
-  validationErrors,
-  userError,
-  onOpenFeedback,
-  attachments,
-  textAttachments,
-  fileAttachments,
-  metadata,
-  isLastMessage,
-}: MessageBlockProps) => {
-  const [showValidationPopover, setShowValidationPopover] = useState(false)
-
-  const bashCwd = metadata?.bashCwd ? formatCwd(metadata.bashCwd) : undefined
-
-  useWhyDidYouUpdateById(
-    'MessageBlock',
-    messageId,
-    {
-      messageId,
-      blocks,
-      content,
-      isUser,
-      isAi,
-      isLoading,
-      timestamp,
-      isComplete,
-      completionTime,
-      credits,
-      timerStartTime,
-      textColor,
-      timestampColor,
-      markdownOptions,
-      availableWidth,
-      markdownPalette,
-      onToggleCollapsed,
-      onBuildFast,
-      onBuildMax,
-      onBuildLite,
-      onFeedback,
-      onCloseFeedback,
-      validationErrors,
-      onOpenFeedback,
-      metadata,
-      isLastMessage,
-    },
-    {
-      logLevel: 'debug',
-      enabled: getCliEnv().ANVIL_PERF_TEST === 'true',
-    },
-  )
-
-  const theme = useTheme()
-  const resolvedTextColor = textColor ?? theme.foreground
-
-  return (
-    <box
-      style={{
-        flexDirection: 'column',
-        width: '100%',
-      }}
-    >
-      {/* User message timestamp with error indicator (non-bash commands) */}
-      {isUser && !bashCwd && (
-        <box style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
-          <text
-            attributes={TextAttributes.DIM}
-            style={{
-              wrapMode: 'none',
-              fg: timestampColor,
-            }}
-          >
-            {`[${timestamp}]`}
-          </text>
-
-          {validationErrors && validationErrors.length > 0 && (
-            <Button
-              onClick={() => setShowValidationPopover(!showValidationPopover)}
-            >
-              <text
-                style={{
-                  fg: theme.error,
-                  wrapMode: 'none',
-                }}
-              >
-                [!]
-              </text>
-            </Button>
-          )}
-        </box>
-      )}
-
-      {/* Bash command metadata header (timestamp + cwd) - copy button moved inline */}
-      {bashCwd && (
-        <box style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
-          <text
-            attributes={TextAttributes.DIM}
-            style={{
-              wrapMode: 'none',
-              fg: timestampColor,
-            }}
-          >
-            {`[${timestamp}]`}
-          </text>
-          <text
-            attributes={TextAttributes.DIM}
-            style={{
-              wrapMode: 'none',
-              fg: theme.muted,
-            }}
-          >
-            •
-          </text>
-          <text
-            attributes={TextAttributes.DIM}
-            style={{
-              wrapMode: 'word',
-              fg: theme.muted,
-            }}
-          >
-            {bashCwd}
-          </text>
-        </box>
-      )}
-
-      {/* Show validation popover below timestamp when expanded */}
-      {isUser &&
-        !bashCwd &&
-        validationErrors &&
-        validationErrors.length > 0 &&
-        showValidationPopover && (
-          <box style={{ paddingTop: 1, paddingBottom: 1 }}>
-            <ValidationErrorPopover
-              errors={validationErrors}
-              onOpenFeedback={onOpenFeedback}
-              onClose={() => setShowValidationPopover(false)}
-            />
-          </box>
-        )}
-
-      <box style={{ flexDirection: 'column', gap: 1, width: '100%' }}>
-        {blocks ? (
-          <box
-            style={{
-              flexDirection: 'column',
-              gap: 1,
-              width: '100%',
-            }}
-          >
-            <BlocksRenderer
-              sourceBlocks={blocks}
-              messageId={messageId}
-              isLoading={isLoading}
-              isComplete={isComplete}
-              isUser={isUser}
-              textColor={resolvedTextColor}
-              availableWidth={availableWidth}
-              markdownPalette={markdownPalette}
-              onToggleCollapsed={onToggleCollapsed}
-              onBuildFast={onBuildFast}
-              onBuildMax={onBuildMax}
-              onBuildLite={onBuildLite}
-              isLastMessage={isLastMessage}
-              contentToCopy={isUser ? content : undefined}
-            />
-          </box>
-        ) : (
-          <UserContentWithCopyButton
-            content={content}
-            messageId={messageId}
-            isLoading={isLoading}
-            isComplete={isComplete}
-            isUser={isUser}
-            textColor={resolvedTextColor}
-            codeBlockWidth={markdownOptions.codeBlockWidth}
-            palette={markdownOptions.palette}
-            showCopyButton={isUser}
-          />
-        )}
-        {/* Show attachments for user messages */}
-        {isUser &&
-          ((attachments && attachments.length > 0) ||
-            (textAttachments && textAttachments.length > 0) ||
-            (fileAttachments && fileAttachments.length > 0)) && (
-            <MessageAttachments
-              imageAttachments={attachments ?? []}
-              textAttachments={textAttachments ?? []}
-              fileAttachments={fileAttachments ?? []}
-            />
-          )}
-      </box>
-
-      {/* Display runtime error banner for AI messages */}
-      {isAi && userError && <UserErrorBanner error={userError} />}
-
-      {isAi && (
-        <MessageFooter
-          messageId={messageId}
-          blocks={blocks}
-          content={content}
-          isLoading={isLoading}
-          isComplete={isComplete}
-          completionTime={completionTime}
-          credits={credits}
-          timerStartTime={timerStartTime}
-          onFeedback={onFeedback}
-          onCloseFeedback={onCloseFeedback}
-        />
-      )}
-    </box>
-  )
-})

package/src/components/message-footer.tsx

@@ -1,258 +0,0 @@
-import { SUBSCRIPTION_DISPLAY_NAME } from '@anvil/common/constants/subscription-plans'
-import { IS_FREEBUFF } from '../utils/constants'
-import { pluralize } from '@anvil/common/util/string'
-import { TextAttributes } from '@opentui/core'
-import React, { useCallback, useMemo } from 'react'
-
-import { CopyButton } from './copy-button'
-import { ElapsedTimer } from './elapsed-timer'
-import { FeedbackIconButton } from './feedback-icon-button'
-import { useSubscriptionQuery } from '../hooks/use-subscription-query'
-import {
-  getBlockPercentRemaining,
-  isCoveredBySubscription,
-} from '../utils/subscription'
-import { useTheme } from '../hooks/use-theme'
-import {
-  useFeedbackStore,
-  selectIsFeedbackOpenForMessage,
-  selectHasSubmittedFeedback,
-  selectMessageFeedbackCategory,
-} from '../state/feedback-store'
-
-import type { ContentBlock, TextContentBlock } from '../types/chat'
-
-interface MessageFooterProps {
-  messageId: string
-  blocks?: ContentBlock[]
-  content: string
-  isLoading: boolean
-  isComplete?: boolean
-  completionTime?: string
-  credits?: number
-  timerStartTime: number | null
-  onFeedback?: (messageId: string) => void
-  onCloseFeedback?: () => void
-}
-
-export const MessageFooter: React.FC<MessageFooterProps> = ({
-  messageId,
-  blocks,
-  content,
-  isLoading,
-  isComplete,
-  completionTime,
-  credits,
-  timerStartTime,
-  onFeedback,
-  onCloseFeedback,
-}) => {
-  const theme = useTheme()
-
-  // Memoize selectors to prevent new function references on every render
-  const selectIsFeedbackOpenMemo = useMemo(
-    () => selectIsFeedbackOpenForMessage(messageId),
-    [messageId],
-  )
-  const selectHasSubmittedFeedbackMemo = useMemo(
-    () => selectHasSubmittedFeedback(messageId),
-    [messageId],
-  )
-  const selectMessageFeedbackCategoryMemo = useMemo(
-    () => selectMessageFeedbackCategory(messageId),
-    [messageId],
-  )
-
-  const isFeedbackOpen = useFeedbackStore(selectIsFeedbackOpenMemo)
-  const hasSubmittedFeedback = useFeedbackStore(selectHasSubmittedFeedbackMemo)
-  const selectedFeedbackCategory = useFeedbackStore(
-    selectMessageFeedbackCategoryMemo,
-  )
-
-  const shouldShowLoadingTimer = isLoading && !isComplete
-  const shouldShowCompletionFooter = isComplete
-  const canRequestFeedback = shouldShowCompletionFooter && !hasSubmittedFeedback
-  const isGoodOrBadSelection =
-    selectedFeedbackCategory === 'good_result' ||
-    selectedFeedbackCategory === 'bad_result'
-  const shouldShowSubmittedFeedbackState =
-    shouldShowCompletionFooter && hasSubmittedFeedback && isGoodOrBadSelection
-  const shouldRenderFeedbackButton =
-    Boolean(onFeedback) &&
-    (canRequestFeedback || shouldShowSubmittedFeedbackState)
-
-  const handleFeedbackOpen = useCallback(() => {
-    if (!canRequestFeedback || !onFeedback) return
-    onFeedback(messageId)
-  }, [canRequestFeedback, onFeedback, messageId])
-
-  const handleFeedbackClose = useCallback(() => {
-    if (!canRequestFeedback) return
-    onCloseFeedback?.()
-  }, [canRequestFeedback, onCloseFeedback])
-
-  // Build text from content and text blocks for copy button
-  const textToCopy = [
-    content,
-    ...(blocks || [])
-      .filter((b): b is TextContentBlock => b.type === 'text')
-      .map((b) => b.content),
-  ]
-    .filter(Boolean)
-    .join('\n\n')
-    .trim()
-
-  // Loading timer
-  if (shouldShowLoadingTimer) {
-    return (
-      <text
-        attributes={TextAttributes.DIM}
-        style={{
-          wrapMode: 'none',
-          marginTop: 0,
-          marginBottom: 0,
-          alignSelf: 'flex-end',
-        }}
-      >
-        <ElapsedTimer
-          startTime={timerStartTime}
-          attributes={TextAttributes.DIM}
-        />
-      </text>
-    )
-  }
-
-  // Completion footer
-  if (!shouldShowCompletionFooter) {
-    return null
-  }
-
-  const footerItems: { key: string; node: React.ReactNode }[] = []
-
-  // Add copy button first if there's content to copy
-  if (textToCopy.length > 0) {
-    footerItems.push({
-      key: 'copy',
-      node: (
-        <CopyButton
-          textToCopy={textToCopy}
-          leadingSpace={false}
-          style={{ wrapMode: 'none' }}
-        />
-      ),
-    })
-  }
-
-  if (completionTime) {
-    footerItems.push({
-      key: 'time',
-      node: (
-        <text
-          attributes={TextAttributes.DIM}
-          style={{
-            wrapMode: 'none',
-            fg: theme.secondary,
-            marginTop: 0,
-            marginBottom: 0,
-          }}
-        >
-          worked for {completionTime}
-        </text>
-      ),
-    })
-  }
-  if (typeof credits === 'number' && credits > 0 && !IS_FREEBUFF) {
-    footerItems.push({
-      key: 'credits',
-      node: <CreditsOrSubscriptionIndicator credits={credits} />,
-    })
-  }
-  if (shouldRenderFeedbackButton) {
-    footerItems.push({
-      key: 'feedback',
-      node: (
-        <FeedbackIconButton
-          onClick={handleFeedbackOpen}
-          onClose={handleFeedbackClose}
-          isOpen={canRequestFeedback ? isFeedbackOpen : false}
-          messageId={messageId}
-          selectedCategory={selectedFeedbackCategory}
-          hasSubmittedFeedback={hasSubmittedFeedback}
-        />
-      ),
-    })
-  }
-
-  if (footerItems.length === 0) {
-    return null
-  }
-
-  return (
-    <box
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        alignSelf: 'flex-end',
-        gap: 1,
-      }}
-    >
-      {footerItems.map((item, idx) => (
-        <React.Fragment key={item.key}>
-          {idx > 0 && (
-            <text
-              attributes={TextAttributes.DIM}
-              style={{
-                wrapMode: 'none',
-                fg: theme.muted,
-                marginTop: 0,
-                marginBottom: 0,
-              }}
-            >
-              •
-            </text>
-          )}
-          {item.node}
-        </React.Fragment>
-      ))}
-    </box>
-  )
-}
-
-const CreditsOrSubscriptionIndicator: React.FC<{ credits: number }> = ({ credits }) => {
-  const theme = useTheme()
-  const { data: subscriptionData } = useSubscriptionQuery({
-    refetchInterval: false,
-    refetchOnActivity: false,
-    pauseWhenIdle: false,
-  })
-
-  const blockPercentRemaining = useMemo(
-    () => getBlockPercentRemaining(subscriptionData),
-    [subscriptionData],
-  )
-
-  const showSubscriptionIndicator = isCoveredBySubscription(subscriptionData)
-
-  if (showSubscriptionIndicator) {
-    const label = (blockPercentRemaining ?? 0) < 20
-      ? `✓ ${SUBSCRIPTION_DISPLAY_NAME} (${blockPercentRemaining}% left)`
-      : `✓ ${SUBSCRIPTION_DISPLAY_NAME}`
-    return (
-      <text
-        attributes={TextAttributes.DIM}
-        style={{ wrapMode: 'none', fg: theme.success, marginTop: 0, marginBottom: 0 }}
-      >
-        {label}
-      </text>
-    )
-  }
-
-  return (
-    <text
-      attributes={TextAttributes.DIM}
-      style={{ wrapMode: 'none', fg: theme.secondary, marginTop: 0, marginBottom: 0 }}
-    >
-      {pluralize(credits, 'credit')}
-    </text>
-  )
-}