@alumbwe/anvil 1.0.18 → 1.0.20

package/src/components/image-card.tsx

@@ -0,0 +1,167 @@
+import fs from 'fs'
+
+import { useEffect, useState } from 'react'
+
+import { AttachmentCard } from './attachment-card'
+import { ImageThumbnail } from './image-thumbnail'
+import { useTheme } from '../hooks/use-theme'
+import {
+  supportsInlineImages,
+  renderInlineImage,
+} from '../utils/terminal-images'
+
+// Image card display constants
+const MAX_FILENAME_LENGTH = 16
+const IMAGE_CARD_WIDTH = 18
+const THUMBNAIL_WIDTH = 14
+const THUMBNAIL_HEIGHT = 3
+const INLINE_IMAGE_WIDTH = 4
+const INLINE_IMAGE_HEIGHT = 3
+
+const truncateFilename = (filename: string): string => {
+  if (filename.length <= MAX_FILENAME_LENGTH) {
+    return filename
+  }
+  const lastDot = filename.lastIndexOf('.')
+  const ext = lastDot !== -1 ? filename.slice(lastDot) : ''
+  const baseName = lastDot !== -1 ? filename.slice(0, lastDot) : filename
+  const maxBaseLength = MAX_FILENAME_LENGTH - ext.length - 1 // -1 for ellipsis
+  return baseName.slice(0, maxBaseLength) + '…' + ext
+}
+
+export interface ImageCardImage {
+  path: string
+  filename: string
+  status?: 'processing' | 'ready' | 'error' // Defaults to 'ready' if not provided
+  note?: string // Display note: 'compressed' | error message
+  processedImage?: {
+    base64: string
+    mediaType: string
+  }
+}
+
+interface ImageCardProps {
+  image: ImageCardImage
+  onRemove?: () => void
+  showRemoveButton?: boolean
+}
+
+export const ImageCard = ({
+  image,
+  onRemove,
+  showRemoveButton = true,
+}: ImageCardProps) => {
+  const theme = useTheme()
+  const [thumbnailSequence, setThumbnailSequence] = useState<string | null>(
+    null,
+  )
+  const canShowInlineImages = supportsInlineImages()
+
+  // Load thumbnail if terminal supports inline images (iTerm2/Kitty)
+  useEffect(() => {
+    if (!canShowInlineImages) return
+    // Skip loading while image is processing or has error to avoid race condition and unnecessary failed reads
+    if ((image.status ?? 'ready') !== 'ready') return
+
+    let cancelled = false
+
+    const loadThumbnail = async () => {
+      try {
+        let base64Data: string | undefined
+
+        if (image.processedImage) {
+          base64Data = image.processedImage.base64
+        } else if (!image.path.startsWith('clipboard:')) {
+          const imageData = fs.readFileSync(image.path)
+          base64Data = imageData.toString('base64')
+        }
+
+        if (base64Data) {
+          const sequence = renderInlineImage(base64Data, {
+            width: INLINE_IMAGE_WIDTH,
+            height: INLINE_IMAGE_HEIGHT,
+            filename: image.filename,
+          })
+          if (!cancelled) {
+            setThumbnailSequence(sequence)
+          }
+        } else {
+          if (!cancelled) {
+            setThumbnailSequence(null)
+          }
+        }
+      } catch {
+        // Failed to load image, will show icon fallback
+        if (!cancelled) {
+          setThumbnailSequence(null)
+        }
+      }
+    }
+
+    loadThumbnail()
+
+    return () => {
+      cancelled = true
+    }
+  }, [image, image.filename, canShowInlineImages])
+
+  const truncatedName = truncateFilename(image.filename)
+
+  return (
+    <AttachmentCard
+      width={IMAGE_CARD_WIDTH}
+      onRemove={onRemove}
+      showRemoveButton={showRemoveButton}
+    >
+      {/* Thumbnail or icon area */}
+      <box
+        style={{
+          height: THUMBNAIL_HEIGHT,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        {thumbnailSequence ? (
+          <text>{thumbnailSequence}</text>
+        ) : (
+          <ImageThumbnail
+            image={image}
+            width={THUMBNAIL_WIDTH}
+            height={THUMBNAIL_HEIGHT}
+            fallback={<text style={{ fg: theme.info }}>🖼️</text>}
+          />
+        )}
+      </box>
+
+      {/* Filename - full width */}
+      <box
+        style={{
+          paddingLeft: 1,
+          paddingRight: 1,
+          flexDirection: 'column',
+        }}
+      >
+        <text
+          style={{
+            fg: theme.foreground,
+            wrapMode: 'none',
+          }}
+        >
+          {truncatedName}
+        </text>
+        {((image.status ?? 'ready') === 'processing' || image.note) && (
+          <text
+            style={{
+              fg: theme.muted,
+              wrapMode: 'none',
+            }}
+          >
+            {(image.status ?? 'ready') === 'processing'
+              ? 'processing…'
+              : image.note}
+          </text>
+        )}
+      </box>
+    </AttachmentCard>
+  )
+}

package/src/components/image-thumbnail.tsx

@@ -0,0 +1,114 @@
+/**
+ * Image Thumbnail Component
+ * Renders a small image preview using colored Unicode half-blocks
+ * Uses OpenTUI's native fg/backgroundColor styling instead of ANSI escape sequences
+ */
+
+import React, { useEffect, useState, memo } from 'react'
+
+import { type ImageCardImage } from './image-card'
+import {
+  extractThumbnailColors,
+  rgbToHex,
+  type ThumbnailData,
+} from '../utils/image-thumbnail'
+
+interface ImageThumbnailProps {
+  image: ImageCardImage
+  width: number // Width in cells
+  height: number // Height in rows (each row uses half-blocks for 2 pixel rows)
+  fallback?: React.ReactNode
+}
+
+/**
+ * Renders an image as colored blocks using Unicode half-blocks (▀)
+ * Each character cell displays 2 vertical pixels by using:
+ * - Foreground color for top pixel
+ * - Background color for bottom pixel
+ * - ▀ (upper half block) character
+ */
+export const ImageThumbnail = memo(({
+  image,
+  width,
+  height,
+  fallback,
+}: ImageThumbnailProps) => {
+  const [thumbnailData, setThumbnailData] = useState<ThumbnailData | null>(null)
+
+  useEffect(() => {
+    // Skip loading while image is processing or has error to avoid race condition and unnecessary failed reads
+    if ((image.status ?? 'ready') !== 'ready') return
+
+    let cancelled = false
+
+    const loadThumbnail = async () => {
+      let data: ThumbnailData | null = null
+      try {
+        if (image.processedImage) {
+          const imageBuffer = Buffer.from(image.processedImage.base64, 'base64')
+          data = await extractThumbnailColors(imageBuffer, width, height)
+        } else if (!image.path.startsWith('clipboard:')) {
+          data = await extractThumbnailColors(image.path, width, height)
+        }
+      } catch {
+        // Ignore errors, will show fallback
+      }
+
+      if (!cancelled) {
+        setThumbnailData(data)
+      }
+    }
+
+    loadThumbnail()
+
+    return () => {
+      cancelled = true
+    }
+  }, [image, width, height])
+
+  if (!thumbnailData) {
+    return <>{fallback}</>
+  }
+
+  // Render the thumbnail using half-blocks
+  // Each row of our output combines 2 pixel rows from the image
+  const rows: React.ReactNode[] = []
+  
+  for (let rowIndex = 0; rowIndex < thumbnailData.height; rowIndex += 2) {
+    const topRow = thumbnailData.pixels[rowIndex]
+    const bottomRow = thumbnailData.pixels[rowIndex + 1] || topRow // Use top row if no bottom
+    
+    const cells: React.ReactNode[] = []
+    
+    for (let col = 0; col < thumbnailData.width; col++) {
+      const topPixel = topRow[col]
+      const bottomPixel = bottomRow[col]
+      
+      const fgColor = rgbToHex(topPixel.r, topPixel.g, topPixel.b)
+      const bgColor = rgbToHex(bottomPixel.r, bottomPixel.g, bottomPixel.b)
+      
+      cells.push(
+        <box
+          key={col}
+          style={{
+            backgroundColor: bgColor,
+          }}
+        >
+          <text style={{ fg: fgColor }}>▀</text>
+        </box>
+      )
+    }
+    
+    rows.push(
+      <box key={rowIndex} style={{ flexDirection: 'row' }}>
+        {cells}
+      </box>
+    )
+  }
+
+  return (
+    <box style={{ flexDirection: 'column' }}>
+      {rows}
+    </box>
+  )
+})

package/src/components/input-cursor.tsx

@@ -0,0 +1,77 @@
+import { TextAttributes } from '@opentui/core'
+import React, { useEffect, useRef, useState } from 'react'
+
+interface InputCursorProps {
+  visible: boolean
+  focused: boolean
+  shouldBlink?: boolean
+  char?: string
+  color?: string
+  blinkDelay?: number
+  blinkInterval?: number
+  bold?: boolean
+}
+
+export const InputCursor: React.FC<InputCursorProps> = ({
+  visible,
+  focused,
+  shouldBlink = true,
+  char = '▍',
+  color,
+  blinkDelay = 500,
+  blinkInterval = 500,  // Faster blinking
+  bold = true,
+}) => {
+  // false = normal/visible, true = invisible
+  const [isInvisible, setIsInvisible] = useState(false)
+  const blinkIntervalRef = useRef<NodeJS.Timeout | null>(null)
+
+  // Handle blinking (toggle visible/invisible) when idle
+  useEffect(() => {
+    // Clear any existing interval
+    if (blinkIntervalRef.current) {
+      clearInterval(blinkIntervalRef.current)
+      blinkIntervalRef.current = null
+    }
+
+    // Reset cursor to visible
+    setIsInvisible(false)
+
+    // Only blink if shouldBlink is enabled, focused, and visible
+    if (!shouldBlink || !focused || !visible) return
+
+    // Set up idle detection
+    const idleTimer = setTimeout(() => {
+      // Start blinking interval (toggle between visible and invisible)
+      blinkIntervalRef.current = setInterval(() => {
+        setIsInvisible((prev) => !prev)
+      }, blinkInterval)
+    }, blinkDelay)
+
+    return () => {
+      clearTimeout(idleTimer)
+      if (blinkIntervalRef.current) {
+        clearInterval(blinkIntervalRef.current)
+        blinkIntervalRef.current = null
+      }
+    }
+  }, [visible, focused, shouldBlink, blinkDelay, blinkInterval])
+
+  if (!visible || !focused) {
+    return null
+  }
+
+  // When invisible, return a space to maintain layout
+  if (isInvisible) {
+    return <span> </span>
+  }
+
+  return (
+    <span
+      {...(color ? { fg: color } : undefined)}
+      {...(bold ? { attributes: TextAttributes.BOLD } : undefined)}
+    >
+      {char}
+    </span>
+  )
+}

package/src/components/input-mode-banner.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { IS_ANVIL } from '../utils/constants'
+
+import { HelpBanner } from './help-banner'
+import { PendingAttachmentsBanner } from './pending-attachments-banner'
+import { SubscriptionLimitBanner } from './subscription-limit-banner'
+import { UsageBanner } from './usage-banner'
+import { useChatStore } from '../state/chat-store'
+
+/**
+ * Registry mapping input modes to their banner components.
+ *
+ * To add a new banner:
+ * 1. Create the banner component using BottomBanner
+ * 2. Add an entry here mapping the input mode to a render function
+ *
+ * Render functions receive context (like showTime) and return the component.
+ */
+const BANNER_REGISTRY: Record<
+  string,
+  (ctx: { showTime: number }) => React.ReactNode
+> = {
+  default: () => <PendingAttachmentsBanner />,
+  image: () => <PendingAttachmentsBanner />,
+  ...(IS_ANVIL ? {} : { usage: ({ showTime }: { showTime: number }) => <UsageBanner showTime={showTime} /> }),
+  help: () => <HelpBanner />,
+  ...(IS_ANVIL ? {} : { subscriptionLimit: () => <SubscriptionLimitBanner /> }),
+}
+
+/**
+ * Banner component that shows contextual information below the input box.
+ * Shows mode-specific banners based on the current input mode.
+ *
+ * Uses a registry pattern for easy extensibility - add new banners by
+ * updating BANNER_REGISTRY above.
+ */
+export const InputModeBanner = () => {
+  const inputMode = useChatStore((state) => state.inputMode)
+
+  const [usageBannerShowTime, setUsageBannerShowTime] = React.useState(() =>
+    Date.now(),
+  )
+
+  React.useEffect(() => {
+    if (inputMode === 'usage') {
+      setUsageBannerShowTime(Date.now())
+    }
+  }, [inputMode])
+
+  const renderBanner = BANNER_REGISTRY[inputMode]
+
+  if (!renderBanner) {
+    return null
+  }
+
+  return <>{renderBanner({ showTime: usageBannerShowTime })}</>
+}

package/src/components/load-previous-button.tsx

@@ -0,0 +1,48 @@
+import { memo, useState } from 'react'
+
+import { Button } from './button'
+import { useTheme } from '../hooks/use-theme'
+import { BORDER_CHARS } from '../utils/ui-constants'
+
+interface LoadPreviousButtonProps {
+  hiddenCount: number
+  onLoadMore: () => void
+}
+
+export const LoadPreviousButton = memo(
+  ({ hiddenCount, onLoadMore }: LoadPreviousButtonProps) => {
+    const theme = useTheme()
+    const [isHovered, setIsHovered] = useState(false)
+
+    return (
+      <box
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'center',
+          paddingTop: 1,
+          paddingBottom: 1,
+          width: '100%',
+        }}
+      >
+        <Button
+          onClick={onLoadMore}
+          onMouseOver={() => setIsHovered(true)}
+          onMouseOut={() => setIsHovered(false)}
+          border
+          borderStyle="single"
+          borderColor={isHovered ? theme.foreground : theme.border}
+          customBorderChars={BORDER_CHARS}
+          style={{
+            paddingLeft: 2,
+            paddingRight: 2,
+            backgroundColor: 'transparent',
+          }}
+        >
+          <text style={{ fg: isHovered ? theme.foreground : theme.muted }}>
+            ↑ Load previous messages
+          </text>
+        </Button>
+      </box>
+    )
+  },
+)