@vibe-forge/client 3.0.0-alpha.5 → 3.0.0-alpha.7

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

@@ -1,143 +0,0 @@
-import type { TFunction } from 'i18next'
-import type { ChangeEvent, RefObject } from 'react'
-import { useEffect, useState } from 'react'
-
-import type { MessageInstance } from 'antd/es/message/interface'
-
-import type { AskUserQuestionParams } from '@vibe-forge/core'
-
-import type { PendingContextFile, PendingImage } from '#~/components/chat/sender/@types/sender-composer'
-import type { SenderInitialContent } from '#~/components/chat/sender/@types/sender-types'
-import { readFileAsDataUrl } from '#~/components/chat/sender/@utils/sender-utils'
-
-interface ClipboardPasteEvent {
-  clipboardData?: DataTransfer | null
-  preventDefault: () => void
-}
-
-export const useSenderAttachments = ({
-  initialContent,
-  isBusy,
-  isInlineEdit,
-  modelUnavailable,
-  interactionRequest,
-  message,
-  t,
-  fileInputRef,
-  setPendingImages,
-  setPendingFiles
-}: {
-  initialContent: SenderInitialContent
-  isBusy: boolean
-  isInlineEdit: boolean
-  modelUnavailable?: boolean
-  interactionRequest?: { id: string; payload: AskUserQuestionParams } | null
-  message: MessageInstance
-  t: TFunction
-  fileInputRef: RefObject<HTMLInputElement>
-  setPendingImages: React.Dispatch<React.SetStateAction<PendingImage[]>>
-  setPendingFiles: React.Dispatch<React.SetStateAction<PendingContextFile[]>>
-}) => {
-  const [showContextPicker, setShowContextPicker] = useState(false)
-
-  useEffect(() => {
-    resetAttachmentUi()
-  }, [initialContent])
-
-  const resetAttachmentUi = () => {
-    setShowContextPicker(false)
-  }
-
-  const addImageFiles = async (files: File[]) => {
-    const maxSize = 5 * 1024 * 1024
-    for (const file of files) {
-      if (!file.type.startsWith('image/')) {
-        continue
-      }
-      if (file.size > maxSize) {
-        void message.error(t('chat.imageTooLarge'))
-        continue
-      }
-      try {
-        const url = await readFileAsDataUrl(file)
-        if (url === '') {
-          void message.error(t('chat.imageReadFailed'))
-          continue
-        }
-        setPendingImages(prev => [...prev, {
-          id: globalThis.crypto?.randomUUID
-            ? globalThis.crypto.randomUUID()
-            : `img-${Date.now()}-${Math.random().toString(16).slice(2)}`,
-          url,
-          name: file.name,
-          size: file.size,
-          mimeType: file.type
-        }])
-      } catch {
-        void message.error(t('chat.imageReadFailed'))
-      }
-    }
-  }
-
-  const handleImageUpload = () => {
-    if (isBusy) {
-      return
-    }
-    if (!isInlineEdit && modelUnavailable) {
-      void message.warning(t('chat.modelConfigRequired'))
-      return
-    }
-    if (!isInlineEdit && interactionRequest != null) {
-      void message.warning(t('chat.imageNotSupportedInInteraction'))
-      return
-    }
-    fileInputRef.current?.click()
-  }
-
-  const handleImageFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
-    const fileList = Array.from(event.target.files ?? [])
-    if (fileList.length === 0) {
-      return
-    }
-    await addImageFiles(fileList)
-    event.target.value = ''
-  }
-
-  const handleOpenContextPicker = () => {
-    if (isBusy || isInlineEdit) {
-      return
-    }
-    if (!isInlineEdit && modelUnavailable) {
-      void message.warning(t('chat.modelConfigRequired'))
-      return
-    }
-    if (!isInlineEdit && interactionRequest != null) {
-      void message.warning(t('chat.fileNotSupportedInInteraction'))
-      return
-    }
-    setShowContextPicker(true)
-  }
-
-  return {
-    showContextPicker,
-    setShowContextPicker,
-    resetAttachmentUi,
-    handleImageUpload,
-    handleImageFileChange,
-    handleOpenContextPicker,
-    handleContextPickerConfirm: (files: Array<{ path: string; name?: string; size?: number }>) => {
-      setPendingFiles(files)
-      setShowContextPicker(false)
-    },
-    handlePaste: async (event: ClipboardPasteEvent) => {
-      const files = Array.from(event.clipboardData?.items ?? [])
-        .filter(item => item.kind === 'file' && item.type.startsWith('image/'))
-        .map(item => item.getAsFile())
-        .filter((file): file is File => file != null)
-      if (files.length > 0) {
-        event.preventDefault()
-        await addImageFiles(files)
-      }
-    }
-  }
-}

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

@@ -1,34 +0,0 @@
-import type { RefObject } from 'react'
-import { useEffect } from 'react'
-
-import type { SenderEditorHandle } from '#~/components/chat/sender/@types/sender-editor'
-
-export const useSenderAutofocus = ({
-  autoFocus,
-  editorRef
-}: {
-  autoFocus: boolean
-  editorRef: RefObject<SenderEditorHandle | null>
-}) => {
-  useEffect(() => {
-    if (!autoFocus) {
-      return
-    }
-
-    const frame = window.requestAnimationFrame(() => {
-      const editor = editorRef.current
-
-      if (editor == null) {
-        return
-      }
-
-      const length = editor.getValue().length
-      editor.focus()
-      editor.setSelection({ start: length, end: length })
-    })
-
-    return () => {
-      window.cancelAnimationFrame(frame)
-    }
-  }, [autoFocus, editorRef])
-}

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

@@ -1,62 +0,0 @@
-import type { RefObject } from 'react'
-import { useCallback, useEffect, useState } from 'react'
-
-import type { SessionInfo } from '@vibe-forge/types'
-
-import type { SenderEditorHandle } from '#~/components/chat/sender/@types/sender-editor'
-import type { SenderInitialContent } from '#~/components/chat/sender/@types/sender-types'
-import {
-  resolveSenderCompletionMatch,
-  resolveSenderTokenDecorations
-} from '#~/components/chat/sender/@utils/sender-completion'
-
-export const useSenderCompletion = ({
-  initialContent,
-  input,
-  setInput,
-  sessionInfo,
-  editorRef
-}: {
-  initialContent: SenderInitialContent
-  input: string
-  setInput: (value: string) => void
-  sessionInfo?: SessionInfo | null
-  editorRef: RefObject<SenderEditorHandle | null>
-}) => {
-  const [showCompletion, setShowCompletion] = useState(false)
-
-  const resetCompletion = useCallback(() => {
-    setShowCompletion(false)
-  }, [])
-
-  useEffect(() => {
-    resetCompletion()
-  }, [initialContent, resetCompletion])
-
-  const syncCompletionState = useCallback((value: string, cursorPosition: number | null) => {
-    const resolvedCursorPosition = cursorPosition ??
-      editorRef.current?.getSelection()?.end ??
-      value.length
-    const nextMatch = resolveSenderCompletionMatch(value, resolvedCursorPosition, sessionInfo)
-
-    setShowCompletion((nextMatch?.items.length ?? 0) > 0)
-  }, [editorRef, sessionInfo])
-
-  const handleInputChange = useCallback((value: string, cursorPosition: number | null) => {
-    setInput(value)
-    syncCompletionState(value, cursorPosition)
-  }, [setInput, syncCompletionState])
-
-  const handleCursorChange = useCallback((cursorPosition: number | null) => {
-    syncCompletionState(input, cursorPosition)
-  }, [input, syncCompletionState])
-
-  return {
-    showCompletion,
-    resetCompletion,
-    handleInputChange,
-    handleCursorChange,
-    resolveCompletionMatch: resolveSenderCompletionMatch,
-    resolveTokenDecorations: resolveSenderTokenDecorations
-  }
-}

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

@@ -1,34 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import { getInitialComposerState } from '#~/components/chat/sender/@core/content-attachments'
-import type { SenderInitialContent } from '#~/components/chat/sender/@types/sender-types'
-
-export const useSenderComposerState = (initialContent: SenderInitialContent) => {
-  const initialState = getInitialComposerState(initialContent)
-  const [input, setInput] = useState(() => initialState.input)
-  const [pendingImages, setPendingImages] = useState(() => initialState.pendingImages)
-  const [pendingFiles, setPendingFiles] = useState(() => initialState.pendingFiles)
-
-  useEffect(() => {
-    const nextState = getInitialComposerState(initialContent)
-    setInput(nextState.input)
-    setPendingImages(nextState.pendingImages)
-    setPendingFiles(nextState.pendingFiles)
-  }, [initialContent])
-
-  const resetComposerContent = () => {
-    setInput('')
-    setPendingImages([])
-    setPendingFiles([])
-  }
-
-  return {
-    input,
-    setInput,
-    pendingImages,
-    setPendingImages,
-    pendingFiles,
-    setPendingFiles,
-    resetComposerContent
-  }
-}

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

@@ -1,291 +0,0 @@
-/* eslint-disable max-lines */
-import { App } from 'antd'
-import { useEffect, useRef } from 'react'
-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'
-
-const mergePendingContextFiles = <T extends { path: string }>(current: T[], incoming: T[]) => {
-  const nextByPath = new Map(current.map(file => [file.path, file]))
-  for (const file of incoming) {
-    if (file.path.trim() === '') {
-      continue
-    }
-    nextByPath.set(file.path, file)
-  }
-  return Array.from(nextByPath.values())
-}
-
-export const useSenderController = (props: SenderProps) => {
-  const { t } = useTranslation()
-  const { message } = App.useApp()
-  const { editorRef, fileInputRef, modelSelectRef, effortSelectRef } = useSenderRefs()
-  const handledContextReferenceRequestIdRef = useRef<number | null>(null)
-  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 isPermissionInteraction = !isInlineEdit && props.interactionRequest?.payload.kind === 'permission'
-  const showConfirmInteractionAction = isPermissionInteraction &&
-    (props.interactionOptionNavigation?.optionCount ?? 0) > 0
-  const sendBlockedTooltip = isPermissionInteraction ? t('chat.permissionSendBlockedTooltip') : undefined
-  const { clearInputShortcut, composerControlShortcuts, resolvedSendShortcut, queuedMessageShortcuts } =
-    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,
-    allowWhileBusy: isThinking,
-    isInlineEdit,
-    modelUnavailable: props.modelUnavailable,
-    interactionRequest: props.interactionRequest,
-    onInteractionResponse: props.onInteractionResponse,
-    onSend: props.onSend,
-    onSendContent: props.onSendContent,
-    message,
-    t,
-    resetComposer
-  })
-  const handleBlockedSendAttempt = () => {
-    void message.error({
-      content: t('chat.permissionSendBlockedError'),
-      key: 'chat-permission-send-blocked'
-    })
-  }
-  const triggerSend = (mode?: 'steer' | 'next') => {
-    if (props.hideSubmitAction === true) {
-      return
-    }
-    if (isPermissionInteraction) {
-      handleBlockedSendAttempt()
-      return
-    }
-
-    void handleSend(mode)
-  }
-
-  useEffect(() => {
-    const request = props.contextReferenceRequest
-    if (request == null || request.files.length === 0 || isInlineEdit) {
-      return
-    }
-    if (handledContextReferenceRequestIdRef.current === request.id) {
-      return
-    }
-    handledContextReferenceRequestIdRef.current = request.id
-    if (props.modelUnavailable) {
-      void message.warning(t('chat.modelConfigRequired'))
-      return
-    }
-    if (props.interactionRequest != null) {
-      void message.warning(t('chat.fileNotSupportedInInteraction'))
-      return
-    }
-
-    composer.setPendingFiles(current => mergePendingContextFiles(current, request.files))
-    focusRestore.queueEditorFocusRestore()
-  }, [
-    focusRestore,
-    isInlineEdit,
-    message,
-    composer.setPendingFiles,
-    props.contextReferenceRequest,
-    props.interactionRequest,
-    props.modelUnavailable,
-    t
-  ])
-
-  useSenderAutofocus({ autoFocus: props.autoFocus === true, editorRef })
-  useSenderReferenceFocusRestore({ focusRestore, referenceActions })
-
-  const handleKeyDown = useSenderKeydown({
-    editorRef,
-    isMac,
-    clearInputShortcut,
-    isInlineEdit,
-    isThinking,
-    input: composer.input,
-    pendingImageCount: composer.pendingImages.length,
-    pendingFileCount: composer.pendingFiles.length,
-    interactionOptionCount: props.interactionOptionNavigation?.optionCount ?? 0,
-    onCancel: props.onCancel,
-    onClear: props.onClear,
-    onInteractionOptionMove: props.interactionOptionNavigation?.onMove,
-    onInteractionOptionSubmit: props.interactionOptionNavigation?.onSubmit,
-    onInterrupt: props.onInterrupt,
-    onInterruptHint: () => {
-      void message.open({
-        type: 'info',
-        content: t('chat.queue.stopShortcutConfirm'),
-        duration: 1.6,
-        key: 'chat-stop-shortcut-confirm'
-      })
-    },
-    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,
-    sendBlocked: isPermissionInteraction,
-    sendBlockedTooltip,
-    showConfirmInteractionAction,
-    confirmInteractionLabel: showConfirmInteractionAction ? t('chat.permissionConfirmOption') : undefined,
-    onConfirmInteractionOption: showConfirmInteractionAction ? props.interactionOptionNavigation?.onSubmit : undefined,
-    message,
-    props,
-    refs: { fileInputRef, modelSelectRef, effortSelectRef },
-    referenceActions,
-    queuedMessageShortcuts,
-    resolvedSendShortcut,
-    selectOverlays,
-    supportsEffort,
-    t
-  })
-
-  const controller = buildSenderControllerResult({
-    attachments,
-    completion,
-    composer,
-    focusRestore,
-    handleKeyDown,
-    hideSender,
-    interactionRequest: props.interactionRequest,
-    interactionResponse: props.onInteractionResponse,
-    isBusy,
-    isInlineEdit,
-    isThinking,
-    modelUnavailable: props.modelUnavailable,
-    permissionContext,
-    editorRef,
-    placeholder: props.placeholder ?? props.interactionRequest?.payload.question ?? t('chat.inputPlaceholder'),
-    secondarySendShortcut: isThinking && !isPermissionInteraction ? queuedMessageShortcuts.queueNext : undefined,
-    onSecondarySendShortcut: isThinking && !isPermissionInteraction
-      ? () => {
-        void handleSend('next')
-      }
-      : undefined,
-    toolbar
-  })
-
-  return {
-    ...controller,
-    onInputChange: (value: string, cursorOffset: number | null) => {
-      controller.onInputChange(value, cursorOffset)
-      props.onInputChange?.(value)
-    }
-  }
-}

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

@@ -1,72 +0,0 @@
-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
-  }
-}