@vibe-forge/client 0.9.0 → 0.10.1

package/src/components/chat/sender/@hooks/use-sender-controller.ts

@@ -0,0 +1,193 @@
+import { App } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import { buildSenderControllerResult } from '#~/components/chat/sender/@core/build-sender-controller-result'
+import { buildSenderToolbar } from '#~/components/chat/sender/@core/build-sender-toolbar'
+import { getSenderInteractionState } from '#~/components/chat/sender/@core/get-sender-interaction-state'
+import { getSenderRuntimeState } from '#~/components/chat/sender/@core/get-sender-runtime-state'
+import type { SenderProps } from '#~/components/chat/sender/@types/sender-props'
+
+import { useSenderAttachments } from './use-sender-attachments'
+import { useSenderAutofocus } from './use-sender-autofocus'
+import { useSenderCompletion } from './use-sender-completion'
+import { useSenderComposerState } from './use-sender-composer-state'
+import { useSenderFocusRestore } from './use-sender-focus-restore'
+import { useSenderHistory } from './use-sender-history'
+import { useSenderKeydown } from './use-sender-keydown'
+import { useSenderReferenceActions } from './use-sender-reference-actions'
+import { useSenderReferenceFocusRestore } from './use-sender-reference-focus-restore'
+import { useSenderRefs } from './use-sender-refs'
+import { useSenderSelectOverlays } from './use-sender-select-overlays'
+import { useSenderShortcuts } from './use-sender-shortcuts'
+import { useSenderSubmit } from './use-sender-submit'
+
+export const useSenderController = (props: SenderProps) => {
+  const { t } = useTranslation()
+  const { message } = App.useApp()
+  const { editorRef, fileInputRef, modelSelectRef, effortSelectRef } = useSenderRefs()
+  const { isInlineEdit, isMac, isThinking, isBusy, supportsEffort } = getSenderRuntimeState(props)
+  const composer = useSenderComposerState(props.initialContent)
+  const completion = useSenderCompletion({
+    initialContent: props.initialContent,
+    input: composer.input,
+    setInput: composer.setInput,
+    sessionInfo: props.sessionInfo,
+    editorRef
+  })
+  const history = useSenderHistory({
+    initialContent: props.initialContent,
+    input: composer.input,
+    setInput: composer.setInput,
+    editorRef
+  })
+  const attachments = useSenderAttachments({
+    initialContent: props.initialContent,
+    isBusy,
+    isInlineEdit,
+    modelUnavailable: props.modelUnavailable,
+    interactionRequest: props.interactionRequest,
+    message,
+    t,
+    fileInputRef,
+    setPendingImages: composer.setPendingImages,
+    setPendingFiles: composer.setPendingFiles
+  })
+  const referenceActions = useSenderReferenceActions({
+    initialContent: props.initialContent,
+    isInlineEdit,
+    permissionMode: props.permissionMode ?? 'default',
+    permissionModeValues: (props.permissionModeOptions ?? []).map(option => option.value),
+    onPermissionSelect: (mode) => props.onPermissionModeChange?.(mode),
+    onReferenceImageSelect: attachments.handleImageUpload,
+    onOpenContextPicker: attachments.handleOpenContextPicker
+  })
+  const selectOverlays = useSenderSelectOverlays({
+    initialContent: props.initialContent,
+    isInlineEdit,
+    isThinking,
+    modelUnavailable: props.modelUnavailable,
+    supportsEffort,
+    modelSelectRef,
+    effortSelectRef
+  })
+  const focusRestore = useSenderFocusRestore({
+    editorRef,
+    suspended: selectOverlays.showModelSelect || selectOverlays.showEffortSelect ||
+      referenceActions.showReferenceActions || attachments.showContextPicker
+  })
+  const { hideSender, permissionContext } = getSenderInteractionState({
+    interactionRequest: props.interactionRequest,
+    isInlineEdit
+  })
+  const { clearInputShortcut, composerControlShortcuts, resolvedSendShortcut } = useSenderShortcuts({
+    enabled: !hideSender && !attachments.showContextPicker && !isInlineEdit,
+    isInlineEdit,
+    isMac,
+    isThinking,
+    modelUnavailable: props.modelUnavailable,
+    permissionModeOptions: props.permissionModeOptions ?? [],
+    referenceActions,
+    selectOverlays
+  })
+
+  const resetComposer = () => {
+    composer.resetComposerContent()
+    completion.resetCompletion()
+    history.resetHistory()
+    attachments.resetAttachmentUi()
+    selectOverlays.resetSelectOverlays()
+    referenceActions.resetReferenceActions()
+  }
+  const handleSend = useSenderSubmit({
+    getInput: () => editorRef.current?.getValue() ?? composer.input,
+    pendingImages: composer.pendingImages,
+    pendingFiles: composer.pendingFiles,
+    isBusy,
+    isInlineEdit,
+    modelUnavailable: props.modelUnavailable,
+    interactionRequest: props.interactionRequest,
+    onInteractionResponse: props.onInteractionResponse,
+    onSend: props.onSend,
+    onSendContent: props.onSendContent,
+    message,
+    t,
+    resetComposer
+  })
+  const triggerSend = () => void handleSend()
+
+  useSenderAutofocus({ autoFocus: props.autoFocus === true, editorRef })
+  useSenderReferenceFocusRestore({ focusRestore, referenceActions })
+
+  const handleKeyDown = useSenderKeydown({
+    editorRef,
+    isMac,
+    clearInputShortcut,
+    isInlineEdit,
+    input: composer.input,
+    pendingImageCount: composer.pendingImages.length,
+    pendingFileCount: composer.pendingFiles.length,
+    onCancel: props.onCancel,
+    onClear: props.onClear,
+    onResetComposer: resetComposer,
+    showReferenceActions: referenceActions.showReferenceActions,
+    onCloseReferenceActions: () => referenceActions.closeReferenceActions({ restoreFocus: true }),
+    showModelSelect: selectOverlays.showModelSelect,
+    onCloseModelSelect: () => {
+      selectOverlays.setShowModelSelect(false)
+      focusRestore.queueEditorFocusRestore()
+    },
+    showEffortSelect: selectOverlays.showEffortSelect,
+    onCloseEffortSelect: () => {
+      selectOverlays.setShowEffortSelect(false)
+      focusRestore.queueEditorFocusRestore()
+    },
+    showCompletion: completion.showCompletion,
+    historyIndex: history.historyIndex,
+    onHistoryNavigate: history.handleHistoryNavigation,
+    onInputClear: history.clearInputValue
+  })
+  const toolbar = buildSenderToolbar({
+    attachments,
+    callbacks: { onSend: triggerSend },
+    composer: {
+      input: composer.input,
+      pendingImageCount: composer.pendingImages.length,
+      pendingFileCount: composer.pendingFiles.length
+    },
+    composerControlShortcuts,
+    focusRestore,
+    isBusy,
+    isInlineEdit,
+    isMac,
+    isThinking,
+    message,
+    props,
+    refs: { fileInputRef, modelSelectRef, effortSelectRef },
+    referenceActions,
+    resolvedSendShortcut,
+    selectOverlays,
+    supportsEffort,
+    t
+  })
+
+  return buildSenderControllerResult({
+    attachments,
+    completion,
+    composer,
+    errorBanner: props.errorBanner,
+    focusRestore,
+    handleKeyDown,
+    hideSender,
+    interactionRequest: props.interactionRequest,
+    interactionResponse: props.onInteractionResponse,
+    isBusy,
+    isInlineEdit,
+    isThinking,
+    modelUnavailable: props.modelUnavailable,
+    onRetryConnection: props.onRetryConnection,
+    permissionContext,
+    editorRef,
+    placeholder: props.placeholder ?? props.interactionRequest?.payload.question ?? t('chat.inputPlaceholder'),
+    toolbar
+  })
+}

package/src/components/chat/sender/@hooks/use-sender-focus-restore.ts

@@ -0,0 +1,72 @@
+import type { RefObject } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import type { SenderEditorHandle } from '#~/components/chat/sender/@types/sender-editor'
+
+export const useSenderFocusRestore = ({
+  editorRef,
+  suspended = false
+}: {
+  editorRef: RefObject<SenderEditorHandle | null>
+  suspended?: boolean
+}) => {
+  const [shouldRestoreFocus, setShouldRestoreFocus] = useState(false)
+  const focusRestoreTimeoutRef = useRef<number | null>(null)
+
+  const focusEditor = useCallback(() => {
+    if (focusRestoreTimeoutRef.current != null) {
+      window.clearTimeout(focusRestoreTimeoutRef.current)
+    }
+
+    focusRestoreTimeoutRef.current = window.setTimeout(() => {
+      window.requestAnimationFrame(() => {
+        const editor = editorRef.current
+
+        if (editor == null || editor.isDisabled()) {
+          return
+        }
+
+        const length = editor.getValue().length
+        editor.focus()
+        editor.setSelection({ start: length, end: length })
+      })
+    }, 80)
+  }, [editorRef])
+
+  const queueEditorFocusRestore = useCallback(() => {
+    setShouldRestoreFocus(true)
+  }, [])
+
+  const clearQueuedEditorFocusRestore = useCallback(() => {
+    setShouldRestoreFocus(false)
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      if (focusRestoreTimeoutRef.current != null) {
+        window.clearTimeout(focusRestoreTimeoutRef.current)
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!shouldRestoreFocus || suspended) {
+      return
+    }
+
+    const timer = window.setTimeout(() => {
+      focusEditor()
+      setShouldRestoreFocus(false)
+    }, 0)
+
+    return () => {
+      window.clearTimeout(timer)
+    }
+  }, [focusEditor, shouldRestoreFocus, suspended])
+
+  return {
+    focusEditor,
+    queueEditorFocusRestore,
+    clearQueuedEditorFocusRestore
+  }
+}

package/src/components/chat/sender/@hooks/use-sender-history.ts

@@ -0,0 +1,79 @@
+import type { RefObject } from 'react'
+import { useEffect, useState } from 'react'
+
+import type { SenderEditorHandle } from '#~/components/chat/sender/@types/sender-editor'
+import type { SenderInitialContent } from '#~/components/chat/sender/@types/sender-types'
+import { loadChatHistory } from '#~/components/chat/sender/@utils/sender-utils'
+
+export const useSenderHistory = ({
+  initialContent,
+  input,
+  setInput,
+  editorRef
+}: {
+  initialContent: SenderInitialContent
+  input: string
+  setInput: (value: string) => void
+  editorRef: RefObject<SenderEditorHandle | null>
+}) => {
+  const [historyIndex, setHistoryIndex] = useState(-1)
+  const [draft, setDraft] = useState('')
+
+  useEffect(() => {
+    resetHistory()
+  }, [initialContent])
+
+  const resetHistory = () => {
+    setHistoryIndex(-1)
+    setDraft('')
+  }
+
+  const clearInputValue = () => {
+    if (input === '') {
+      return
+    }
+    setInput('')
+    setHistoryIndex(-1)
+  }
+
+  const handleHistoryNavigation = (direction: 'up' | 'down') => {
+    const history = loadChatHistory()
+    if (history.length === 0) {
+      return
+    }
+
+    const nextIndex = direction === 'up'
+      ? Math.min(historyIndex + 1, history.length - 1)
+      : Math.max(historyIndex - 1, -1)
+    if (nextIndex === historyIndex) {
+      return
+    }
+
+    if (historyIndex === -1) {
+      setDraft(input)
+    }
+
+    const nextValue = nextIndex === -1 ? draft : history[nextIndex]
+    setHistoryIndex(nextIndex)
+    setInput(nextValue)
+
+    setTimeout(() => {
+      const editor = editorRef.current
+
+      if (editor == null) {
+        return
+      }
+
+      const length = nextValue.length
+      editor.setSelection({ start: length, end: length })
+      editor.focus()
+    }, 0)
+  }
+
+  return {
+    historyIndex,
+    resetHistory,
+    clearInputValue,
+    handleHistoryNavigation
+  }
+}

package/src/components/chat/sender/@hooks/use-sender-keydown.ts

@@ -0,0 +1,113 @@
+import type { RefObject } from 'react'
+
+import type { SenderEditorHandle } from '#~/components/chat/sender/@types/sender-editor'
+import { loadChatHistory } from '#~/components/chat/sender/@utils/sender-utils'
+import { isShortcutMatch } from '#~/utils/shortcutUtils'
+
+export const useSenderKeydown = ({
+  editorRef,
+  isMac,
+  clearInputShortcut,
+  isInlineEdit,
+  input,
+  pendingImageCount,
+  pendingFileCount,
+  onCancel,
+  onClear,
+  onResetComposer,
+  showReferenceActions,
+  onCloseReferenceActions,
+  showModelSelect,
+  onCloseModelSelect,
+  showEffortSelect,
+  onCloseEffortSelect,
+  showCompletion,
+  historyIndex,
+  onHistoryNavigate,
+  onInputClear
+}: {
+  editorRef: RefObject<SenderEditorHandle | null>
+  isMac: boolean
+  clearInputShortcut?: string
+  isInlineEdit: boolean
+  input: string
+  pendingImageCount: number
+  pendingFileCount: number
+  onCancel?: () => void
+  onClear?: () => void
+  onResetComposer: () => void
+  showReferenceActions: boolean
+  onCloseReferenceActions: () => void
+  showModelSelect: boolean
+  onCloseModelSelect: () => void
+  showEffortSelect: boolean
+  onCloseEffortSelect: () => void
+  showCompletion: boolean
+  historyIndex: number
+  onHistoryNavigate: (direction: 'up' | 'down') => void
+  onInputClear: () => void
+}) => {
+  return (event: KeyboardEvent) => {
+    if (showReferenceActions && event.key === 'Escape') {
+      event.preventDefault()
+      onCloseReferenceActions()
+      return
+    }
+    if (showModelSelect && event.key === 'Escape') {
+      event.preventDefault()
+      onCloseModelSelect()
+      return
+    }
+    if (showEffortSelect && event.key === 'Escape') {
+      event.preventDefault()
+      onCloseEffortSelect()
+      return
+    }
+    if (showCompletion && ['ArrowDown', 'ArrowUp', 'Enter', 'Escape', 'Tab'].includes(event.key)) {
+      return
+    }
+    if (clearInputShortcut?.trim() && isShortcutMatch(event, clearInputShortcut, isMac)) {
+      event.preventDefault()
+      onInputClear()
+      return
+    }
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      const selection = editorRef.current?.getSelection()
+      const history = loadChatHistory()
+      const currentHistoryValue = historyIndex === -1 ? null : history[historyIndex]
+      const textSegment = event.key === 'ArrowUp'
+        ? input.substring(0, selection?.start ?? input.length)
+        : input.substring(selection?.end ?? input.length)
+      if (!textSegment.includes('\n')) {
+        const canMoveUp = event.key === 'ArrowUp' && (input.trim() === '' || input === currentHistoryValue)
+        const canMoveDown = event.key === 'ArrowDown' && (historyIndex !== -1 || input === currentHistoryValue)
+        if (canMoveUp || canMoveDown) {
+          event.preventDefault()
+          onHistoryNavigate(event.key === 'ArrowUp' ? 'up' : 'down')
+          return
+        }
+      }
+    }
+    if (event.key === 'Escape') {
+      if (isInlineEdit && input === '' && pendingImageCount === 0 && pendingFileCount === 0 && onCancel != null) {
+        event.preventDefault()
+        onCancel()
+        return
+      }
+      if (input !== '') {
+        event.preventDefault()
+        onInputClear()
+      }
+      return
+    }
+    if (event.key === 'l' && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault()
+      if (isInlineEdit) {
+        onResetComposer()
+        return
+      }
+      onInputClear()
+      onClear?.()
+    }
+  }
+}

package/src/components/chat/sender/@hooks/use-sender-reference-actions.ts

@@ -0,0 +1,191 @@
+import { useEffect, useMemo, useState } from 'react'
+
+import type {
+  MenuFocusTarget,
+  ReferenceMenuKey,
+  SenderInitialContent
+} from '#~/components/chat/sender/@types/sender-types'
+import { isActivationKey } from '#~/components/chat/sender/@utils/sender-utils'
+import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
+import { useRovingFocusList } from '#~/hooks/use-roving-focus-list'
+
+export const useSenderReferenceActions = ({
+  initialContent,
+  isInlineEdit,
+  permissionMode,
+  permissionModeValues,
+  onPermissionSelect,
+  onReferenceImageSelect,
+  onOpenContextPicker
+}: {
+  initialContent: SenderInitialContent
+  isInlineEdit: boolean
+  permissionMode: PermissionMode
+  permissionModeValues: PermissionMode[]
+  onPermissionSelect: (mode: PermissionMode) => void
+  onReferenceImageSelect: () => void
+  onOpenContextPicker: () => void
+}) => {
+  const [showReferenceActions, setShowReferenceActions] = useState(false)
+  const [showPermissionActions, setShowPermissionActions] = useState(false)
+  const [menuFocusTarget, setMenuFocusTarget] = useState<MenuFocusTarget>(null)
+  const [shouldRestoreFocus, setShouldRestoreFocus] = useState(false)
+  const referenceMenuKeys = useMemo<ReferenceMenuKey[]>(() => {
+    const keys: ReferenceMenuKey[] = ['image']
+    if (!isInlineEdit) {
+      keys.push('file')
+    }
+    if (!isInlineEdit && permissionModeValues.length > 0) {
+      keys.push('permission')
+    }
+    return keys
+  }, [isInlineEdit, permissionModeValues.length])
+  const referenceMenuNavigation = useRovingFocusList(referenceMenuKeys, 'image')
+  const permissionMenuNavigation = useRovingFocusList(permissionModeValues, permissionMode)
+
+  useEffect(() => {
+    resetReferenceActions()
+  }, [initialContent])
+
+  useEffect(() => {
+    if (permissionModeValues.includes(permissionMode)) {
+      permissionMenuNavigation.setActiveKey(permissionMode)
+    }
+  }, [permissionMenuNavigation, permissionMode, permissionModeValues])
+
+  useEffect(() => {
+    if (menuFocusTarget !== 'reference' || !showReferenceActions || showPermissionActions) {
+      return
+    }
+    const frame = window.requestAnimationFrame(() => {
+      referenceMenuNavigation.focusKey(referenceMenuNavigation.activeKey ?? referenceMenuKeys[0] ?? null)
+      setMenuFocusTarget(null)
+    })
+    return () => window.cancelAnimationFrame(frame)
+  }, [menuFocusTarget, referenceMenuKeys, referenceMenuNavigation, showPermissionActions, showReferenceActions])
+
+  useEffect(() => {
+    if (menuFocusTarget !== 'permission' || !showReferenceActions || !showPermissionActions) {
+      return
+    }
+    const frame = window.requestAnimationFrame(() => {
+      permissionMenuNavigation.focusKey(permissionMenuNavigation.activeKey ?? permissionMode)
+      setMenuFocusTarget(null)
+    })
+    return () => window.cancelAnimationFrame(frame)
+  }, [menuFocusTarget, permissionMenuNavigation, permissionMode, showPermissionActions, showReferenceActions])
+
+  const closeReferenceActions = ({ restoreFocus = false }: { restoreFocus?: boolean } = {}) => {
+    resetReferenceActions()
+    setShouldRestoreFocus(restoreFocus)
+  }
+
+  const resetReferenceActions = () => {
+    setShowReferenceActions(false)
+    setShowPermissionActions(false)
+    setMenuFocusTarget(null)
+    setShouldRestoreFocus(false)
+  }
+
+  return {
+    showReferenceActions,
+    setShowReferenceActions,
+    showPermissionActions,
+    setShowPermissionActions,
+    shouldRestoreFocus,
+    clearReferenceFocusRestore: () => setShouldRestoreFocus(false),
+    referenceMenuNavigation,
+    permissionMenuNavigation,
+    resetReferenceActions,
+    closeReferenceActions,
+    openPermissionShortcutMenu: () => {
+      setShowReferenceActions(true)
+      setShowPermissionActions(true)
+      referenceMenuNavigation.setActiveKey('permission')
+      permissionMenuNavigation.setActiveKey(permissionMode)
+      setMenuFocusTarget('permission')
+    },
+    handleReferenceMenuKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>, key: ReferenceMenuKey) => {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        if (key !== 'permission') {
+          setShowPermissionActions(false)
+        }
+        referenceMenuNavigation.moveFocus(1, key)
+        return
+      }
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        if (key !== 'permission') {
+          setShowPermissionActions(false)
+        }
+        referenceMenuNavigation.moveFocus(-1, key)
+        return
+      }
+      if (event.key === 'ArrowRight' && key === 'permission' && permissionModeValues.length > 0) {
+        event.preventDefault()
+        setShowPermissionActions(true)
+        permissionMenuNavigation.setActiveKey(permissionMode)
+        setMenuFocusTarget('permission')
+        return
+      }
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        closeReferenceActions({ restoreFocus: true })
+        return
+      }
+      if (!isActivationKey(event.key)) {
+        return
+      }
+      event.preventDefault()
+      if (key === 'image') {
+        closeReferenceActions()
+        onReferenceImageSelect()
+        return
+      }
+      if (key === 'file') {
+        closeReferenceActions()
+        onOpenContextPicker()
+        return
+      }
+      setShowPermissionActions(prev => {
+        const nextOpen = !prev
+        if (nextOpen) {
+          permissionMenuNavigation.setActiveKey(permissionMode)
+          setMenuFocusTarget('permission')
+        }
+        return nextOpen
+      })
+    },
+    handlePermissionMenuKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>, key: PermissionMode) => {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        permissionMenuNavigation.moveFocus(1, key)
+        return
+      }
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        permissionMenuNavigation.moveFocus(-1, key)
+        return
+      }
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault()
+        setShowPermissionActions(false)
+        referenceMenuNavigation.setActiveKey('permission')
+        setMenuFocusTarget('reference')
+        return
+      }
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        closeReferenceActions({ restoreFocus: true })
+        return
+      }
+      if (!isActivationKey(event.key)) {
+        return
+      }
+      event.preventDefault()
+      onPermissionSelect(key)
+      closeReferenceActions({ restoreFocus: true })
+    }
+  }
+}

package/src/components/chat/sender/@hooks/use-sender-reference-focus-restore.ts

@@ -0,0 +1,21 @@
+import { useEffect } from 'react'
+
+export const useSenderReferenceFocusRestore = ({
+  focusRestore,
+  referenceActions
+}: {
+  focusRestore: { queueEditorFocusRestore: () => void }
+  referenceActions: {
+    shouldRestoreFocus: boolean
+    clearReferenceFocusRestore: () => void
+  }
+}) => {
+  useEffect(() => {
+    if (!referenceActions.shouldRestoreFocus) {
+      return
+    }
+
+    focusRestore.queueEditorFocusRestore()
+    referenceActions.clearReferenceFocusRestore()
+  }, [focusRestore, referenceActions])
+}

package/src/components/chat/sender/@hooks/use-sender-refs.ts

@@ -0,0 +1,19 @@
+import { useRef } from 'react'
+
+import type { RefSelectProps } from 'antd'
+
+import type { SenderEditorHandle } from '#~/components/chat/sender/@types/sender-editor'
+
+export const useSenderRefs = () => {
+  const editorRef = useRef<SenderEditorHandle | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const modelSelectRef = useRef<RefSelectProps>(null)
+  const effortSelectRef = useRef<RefSelectProps>(null)
+
+  return {
+    editorRef,
+    fileInputRef,
+    modelSelectRef,
+    effortSelectRef
+  }
+}