@alumbwe/anvil 1.0.0

package/src/hooks/use-chat-keyboard.ts

@@ -0,0 +1,321 @@
+import { statSync } from 'fs'
+
+import { useKeyboard } from '@opentui/react'
+import { useCallback, useRef } from 'react'
+
+import { getProjectRoot } from '../project-files'
+import { reportActivity } from '../utils/activity-tracker'
+import { hasClipboardImage, readClipboardText, readClipboardFilePath, getImageFilePathFromText } from '../utils/clipboard-image'
+import { isImageFile } from '../utils/image-handler'
+import {
+  resolveChatKeyboardAction,
+  type ChatKeyboardState,
+  type ChatKeyboardAction,
+} from '../utils/keyboard-actions'
+import { markReturnKeySeenForKey } from '../utils/terminal-enter-detection'
+
+import type { KeyEvent } from '@opentui/core'
+
+// Throttle interval for keyboard activity reporting (ms)
+const KEYBOARD_ACTIVITY_THROTTLE_MS = 1000
+
+/**
+ * Handlers for chat keyboard actions.
+ * Each handler corresponds to a ChatKeyboardAction type.
+ */
+export type ChatKeyboardHandlers = {
+  // Mode handlers
+  onExitInputMode: () => void
+  onExitFeedbackMode: () => void
+  onClearFeedbackInput: () => void
+
+  // Input handlers
+  onClearInput: () => void
+  onBackspaceExitMode: () => void
+
+  // Stream handlers
+  onInterruptStream: () => void
+
+  // Slash menu handlers
+  onSlashMenuDown: () => void
+  onSlashMenuUp: () => void
+  onSlashMenuSelect: () => Promise<void> | void
+  onSlashMenuComplete: () => void
+
+  // Mention menu handlers
+  onMentionMenuDown: () => void
+  onMentionMenuUp: () => void
+  onMentionMenuTab: () => void
+  onMentionMenuShiftTab: () => void
+  onMentionMenuSelect: () => void
+  onMentionMenuComplete: () => void
+
+  // File menu handler
+  onOpenFileMenuWithTab: () => boolean // Returns true if menu was opened
+
+  // History handlers
+  onHistoryUp: () => void
+  onHistoryDown: () => void
+
+  // Agent handlers
+  onToggleAgentMode: () => void
+  onUnfocusAgent: () => void
+
+  // Queue handlers
+  onClearQueue: () => void
+  onOpenQueuePanel: () => void
+
+  // Exit handlers
+  onExitAppWarning: () => void
+  onExitApp: () => void
+
+  // Bash history handlers
+  onBashHistoryUp: () => void
+  onBashHistoryDown: () => void
+
+  // Clipboard handlers
+  onPasteImage: () => void
+  onPasteImagePath: (imagePath: string) => void
+  onPasteFilePath: (filePath: string, isDirectory: boolean) => void
+  onPasteText: (text: string) => void
+
+  // Scroll handlers
+  onScrollUp: () => void
+  onScrollDown: () => void
+
+  // Toggle all handler
+  onToggleAll: () => void
+
+  // Out of credits handler
+  onOpenBuyCredits: () => void
+}
+
+/**
+ * Options for the useChatKeyboard hook.
+ */
+export type UseChatKeyboardOptions = {
+  /** Current keyboard state extracted from stores */
+  state: ChatKeyboardState
+  /** Handlers for keyboard actions */
+  handlers: ChatKeyboardHandlers
+  /** Whether keyboard handling is disabled (e.g., during ask-user) */
+  disabled?: boolean
+}
+
+/**
+ * Dispatches a keyboard action to the appropriate handler.
+ */
+function assertNever(action: never): never {
+  throw new Error(`Unhandled chat keyboard action: ${String(action)}`)
+}
+
+function dispatchAction(
+  action: ChatKeyboardAction,
+  handlers: ChatKeyboardHandlers,
+): boolean {
+  switch (action.type) {
+    case 'exit-input-mode':
+      handlers.onExitInputMode()
+      return true
+    case 'exit-feedback-mode':
+      handlers.onExitFeedbackMode()
+      return true
+    case 'clear-feedback-input':
+      handlers.onClearFeedbackInput()
+      return true
+    case 'clear-input':
+      handlers.onClearInput()
+      return true
+    case 'backspace-exit-mode':
+      handlers.onBackspaceExitMode()
+      return true
+    case 'interrupt-stream':
+      handlers.onInterruptStream()
+      return true
+    case 'slash-menu-down':
+      handlers.onSlashMenuDown()
+      return true
+    case 'slash-menu-up':
+      handlers.onSlashMenuUp()
+      return true
+    case 'slash-menu-select':
+      handlers.onSlashMenuSelect()
+      return true
+    case 'slash-menu-complete':
+      handlers.onSlashMenuComplete()
+      return true
+    case 'mention-menu-down':
+      handlers.onMentionMenuDown()
+      return true
+    case 'mention-menu-up':
+      handlers.onMentionMenuUp()
+      return true
+    case 'mention-menu-tab':
+      handlers.onMentionMenuTab()
+      return true
+    case 'mention-menu-shift-tab':
+      handlers.onMentionMenuShiftTab()
+      return true
+    case 'mention-menu-select':
+      handlers.onMentionMenuSelect()
+      return true
+    case 'mention-menu-complete':
+      handlers.onMentionMenuComplete()
+      return true
+    case 'open-file-menu-with-tab': {
+      const opened = handlers.onOpenFileMenuWithTab()
+      if (!opened) {
+        handlers.onToggleAgentMode()
+      }
+      return true
+    }
+    case 'history-up':
+      handlers.onHistoryUp()
+      return true
+    case 'history-down':
+      handlers.onHistoryDown()
+      return true
+    case 'toggle-agent-mode':
+      handlers.onToggleAgentMode()
+      return true
+    case 'unfocus-agent':
+      handlers.onUnfocusAgent()
+      return true
+    case 'clear-queue':
+      handlers.onClearQueue()
+      return true
+    case 'open-queue-panel':
+      handlers.onOpenQueuePanel()
+      return true
+    case 'exit-app-warning':
+      handlers.onExitAppWarning()
+      return true
+    case 'exit-app':
+      handlers.onExitApp()
+      return true
+    case 'bash-history-up':
+      handlers.onBashHistoryUp()
+      return true
+    case 'bash-history-down':
+      handlers.onBashHistoryDown()
+      return true
+    case 'paste': {
+      const cwd = getProjectRoot() ?? process.cwd()
+      
+      // First, check if clipboard contains a copied file (e.g., from Finder)
+      // This is different from text - it's when you Cmd+C a file in Finder
+      const copiedFilePath = readClipboardFilePath()
+      if (copiedFilePath) {
+        if (isImageFile(copiedFilePath)) {
+          handlers.onPasteImagePath(copiedFilePath)
+          return true
+        }
+        // Non-image file or directory
+        try {
+          const fileStats = statSync(copiedFilePath)
+          handlers.onPasteFilePath(copiedFilePath, fileStats.isDirectory())
+          return true
+        } catch {
+          // Fall through to other paste handlers
+        }
+      }
+      
+      // Next, read clipboard text to check if it's a file path
+      // This handles the case where a file is dragged/dropped - we want to use
+      // the file path, not any stale image data that might be in the clipboard
+      const rawText = readClipboardText()
+      const text = rawText ? Bun.stripANSI(rawText) : null
+      if (text) {
+        // Check if the text is a path to an image file
+        const imagePath = getImageFilePathFromText(text, cwd)
+        if (imagePath) {
+          handlers.onPasteImagePath(imagePath)
+          return true
+        }
+      }
+      
+      // Check for actual image data in clipboard (screenshots, copied images)
+      // This comes AFTER the file path check so dragged files take priority
+      if (hasClipboardImage()) {
+        handlers.onPasteImage()
+        return true
+      }
+      
+      // Regular text paste
+      if (text) {
+        handlers.onPasteText(text)
+        return true
+      }
+      return true
+    }
+    case 'scroll-up':
+      handlers.onScrollUp()
+      return true
+    case 'scroll-down':
+      handlers.onScrollDown()
+      return true
+    case 'toggle-all':
+      handlers.onToggleAll()
+      return true
+    case 'open-buy-credits':
+      handlers.onOpenBuyCredits()
+      return true
+    case 'none':
+      return false
+  }
+
+  return assertNever(action)
+}
+
+/**
+ * Hook for handling keyboard input in chat text input contexts.
+ * Integrates priority-based action resolution with handlers.
+ *
+ * This hook handles:
+ * - Mode switching (bash, etc.)
+ * - Stream interruption
+ * - Suggestion menu navigation (slash and mention menus)
+ * - History navigation
+ * - Agent mode toggle
+ * - Exit handling
+ *
+ * For feedback mode, the hook respects the feedbackMode state and routes
+ * escape/ctrl-c appropriately.
+ */
+export function useChatKeyboard({
+  state,
+  handlers,
+  disabled = false,
+}: UseChatKeyboardOptions): void {
+  const lastKeyboardActivityRef = useRef<number>(0)
+
+  useKeyboard(
+    useCallback(
+      (key: KeyEvent) => {
+        if (disabled) return
+
+        // Report keyboard activity for activity-aware features (throttled)
+        const now = Date.now()
+        if (now - lastKeyboardActivityRef.current > KEYBOARD_ACTIVITY_THROTTLE_MS) {
+          lastKeyboardActivityRef.current = now
+          reportActivity()
+        }
+
+        markReturnKeySeenForKey(key)
+
+        const action = resolveChatKeyboardAction(key, state)
+        const handled = dispatchAction(action, handlers)
+
+        // Prevent default for handled actions
+        if (
+          handled &&
+          'preventDefault' in key &&
+          typeof key.preventDefault === 'function'
+        ) {
+          key.preventDefault()
+        }
+      },
+      [state, handlers, disabled],
+    ),
+  )
+}

package/src/hooks/use-chat-messages.ts

@@ -0,0 +1,254 @@
+/**
+ * Extracted chat messages hook.
+ * Handles message tree building, pagination, and collapse state management.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import { setAllBlocksCollapsedState, hasAnyExpandedBlocks } from '../utils/collapse-helpers'
+import { buildMessageTree } from '../utils/message-tree-utils'
+
+import type { ChatMessage, ContentBlock } from '../types/chat'
+
+/** Batch size for message pagination */
+const MESSAGE_BATCH_SIZE = 15
+
+/**
+ * Options for useChatMessages hook.
+ */
+export interface UseChatMessagesOptions {
+  /** Current messages array from store */
+  messages: ChatMessage[]
+  /** Setter for messages */
+  setMessages: (
+    value: ChatMessage[] | ((prev: ChatMessage[]) => ChatMessage[]),
+  ) => void
+}
+
+/**
+ * Return type for useChatMessages hook.
+ */
+export interface UseChatMessagesReturn {
+  /** Map of parent ID to child messages */
+  messageTree: Map<string, ChatMessage[]>
+  /** Messages without a parent (root level) */
+  topLevelMessages: ChatMessage[]
+  /** Paginated visible messages from top level */
+  visibleTopLevelMessages: ChatMessage[]
+  /** Count of hidden messages due to pagination */
+  hiddenMessageCount: number
+  /** Handler to toggle collapsed state of a block */
+  handleCollapseToggle: (id: string) => void
+  /** Returns true if user is currently collapsing (to prevent auto-scroll) */
+  isUserCollapsing: () => boolean
+  /** Handler to load more previous messages */
+  handleLoadPreviousMessages: () => void
+  /** Handler to toggle all collapsed/expanded state in all AI responses */
+  handleToggleAll: () => void
+}
+
+/**
+ * Custom hook that encapsulates message handling logic.
+ * Extracts message tree building, pagination, and collapse management.
+ *
+ * @param options - Messages array and setter from store
+ * @returns Message tree, pagination state, and handlers
+ */
+export function useChatMessages({
+  messages,
+  setMessages,
+}: UseChatMessagesOptions): UseChatMessagesReturn {
+  // Message pagination state
+  const [visibleMessageCount, setVisibleMessageCount] =
+    useState(MESSAGE_BATCH_SIZE)
+
+  // Reset visible message count when messages are cleared or conversation changes
+  useEffect(() => {
+    if (messages.length <= MESSAGE_BATCH_SIZE) {
+      setVisibleMessageCount(MESSAGE_BATCH_SIZE)
+    }
+  }, [messages.length])
+
+  // Ref to track user-initiated collapse (prevents auto-scroll during collapse)
+  const isUserCollapsingRef = useRef<boolean>(false)
+
+  /**
+   * Returns true if user is currently collapsing.
+   * Used by scroll management to prevent auto-scroll during collapse.
+   */
+  const isUserCollapsing = useCallback(() => {
+    return isUserCollapsingRef.current
+  }, [])
+
+  /**
+   * Toggles the collapsed state of a block or agent message.
+   * Handles both top-level agent messages and nested content blocks.
+   */
+  const handleCollapseToggle = useCallback(
+    (id: string) => {
+      // Set flag to prevent auto-scroll during user-initiated collapse
+      isUserCollapsingRef.current = true
+
+      // Find and toggle the block's isCollapsed property
+      setMessages((prevMessages) => {
+        return prevMessages.map((message) => {
+          // Handle agent variant messages
+          if (message.variant === 'agent' && message.id === id) {
+            const wasCollapsed = message.metadata?.isCollapsed ?? false
+            return {
+              ...message,
+              metadata: {
+                ...message.metadata,
+                isCollapsed: !wasCollapsed,
+                userOpened: wasCollapsed, // Mark as user-opened if expanding
+              },
+            }
+          }
+
+          // Handle blocks within messages
+          if (!message.blocks) return message
+
+          const updateBlocksRecursively = (
+            blocks: ContentBlock[],
+          ): ContentBlock[] => {
+            let foundTarget = false
+            const result = blocks.map((block) => {
+              // Handle thinking blocks - just match by thinkingId
+              if (block.type === 'text' && block.thinkingId === id) {
+                foundTarget = true
+                const isExpanded = block.thinkingCollapseState === 'expanded'
+                return {
+                  ...block,
+                  thinkingCollapseState: isExpanded ? 'preview' as const : 'expanded' as const,
+                  userOpened: !isExpanded, // Mark as user-opened if expanding
+                }
+              }
+
+              // Handle agent blocks
+              if (block.type === 'agent' && block.agentId === id) {
+                foundTarget = true
+                const wasCollapsed = block.isCollapsed ?? false
+                return {
+                  ...block,
+                  isCollapsed: !wasCollapsed,
+                  userOpened: wasCollapsed, // Mark as user-opened if expanding
+                }
+              }
+
+              // Handle tool blocks
+              if (block.type === 'tool' && block.toolCallId === id) {
+                foundTarget = true
+                const wasCollapsed = block.isCollapsed ?? false
+                return {
+                  ...block,
+                  isCollapsed: !wasCollapsed,
+                  userOpened: wasCollapsed, // Mark as user-opened if expanding
+                }
+              }
+
+              // Handle agent-list blocks
+              if (block.type === 'agent-list' && block.id === id) {
+                foundTarget = true
+                const wasCollapsed = block.isCollapsed ?? false
+                return {
+                  ...block,
+                  isCollapsed: !wasCollapsed,
+                  userOpened: wasCollapsed, // Mark as user-opened if expanding
+                }
+              }
+
+              // Recursively update nested blocks inside agent blocks
+              if (block.type === 'agent' && block.blocks) {
+                const updatedBlocks = updateBlocksRecursively(block.blocks)
+                // Only create new block if nested blocks actually changed
+                if (updatedBlocks !== block.blocks) {
+                  foundTarget = true
+                  return {
+                    ...block,
+                    blocks: updatedBlocks,
+                  }
+                }
+              }
+
+              return block
+            })
+
+            // Return original array reference if nothing changed
+            return foundTarget ? result : blocks
+          }
+
+          return {
+            ...message,
+            blocks: updateBlocksRecursively(message.blocks),
+          }
+        })
+      })
+
+      // Reset flag after state update completes.
+      // Uses setTimeout(0) to defer until after React's batched state updates
+      // have been applied, ensuring the flag stays true during the render cycle.
+      setTimeout(() => {
+        isUserCollapsingRef.current = false
+      }, 0)
+    },
+    [setMessages],
+  )
+
+  /**
+   * Loads more previous messages by increasing the visible count.
+   */
+  const handleLoadPreviousMessages = useCallback(() => {
+    setVisibleMessageCount((prev) => prev + MESSAGE_BATCH_SIZE)
+  }, [])
+
+  /**
+   * Toggles all collapsible blocks in all AI responses.
+   * Primary action is to collapse all. Only expands if everything is already collapsed.
+   */
+  const handleToggleAll = useCallback(() => {
+    isUserCollapsingRef.current = true
+
+    setMessages((prevMessages) => {
+      // Primary action: collapse all open blocks
+      // Only expand if everything is already collapsed
+      const allCollapsed = !hasAnyExpandedBlocks(prevMessages)
+      const shouldCollapse = !allCollapsed
+      return setAllBlocksCollapsedState(prevMessages, shouldCollapse)
+    })
+
+    // Reset flag after state update completes.
+    // Uses setTimeout(0) to defer until after React's batched state updates
+    // have been applied, ensuring the flag stays true during the render cycle.
+    setTimeout(() => {
+      isUserCollapsingRef.current = false
+    }, 0)
+  }, [setMessages])
+
+  // Build message tree from flat messages array
+  const { tree: messageTree, topLevelMessages } = useMemo(
+    () => buildMessageTree(messages),
+    [messages],
+  )
+
+  // Compute visible messages slice (from the end)
+  const visibleTopLevelMessages = useMemo(() => {
+    if (topLevelMessages.length <= visibleMessageCount) {
+      return topLevelMessages
+    }
+    return topLevelMessages.slice(-visibleMessageCount)
+  }, [topLevelMessages, visibleMessageCount])
+
+  const hiddenMessageCount =
+    topLevelMessages.length - visibleTopLevelMessages.length
+
+  return {
+    messageTree,
+    topLevelMessages,
+    visibleTopLevelMessages,
+    hiddenMessageCount,
+    handleCollapseToggle,
+    isUserCollapsing,
+    handleLoadPreviousMessages,
+    handleToggleAll,
+  }
+}