@vibe-forge/client 0.9.0 → 0.10.1

package/src/components/chat/sender/@core/sender-toolbar-bindings.ts

@@ -0,0 +1,155 @@
+import type { ReactNode } from 'react'
+
+import type { ChatEffort } from '#~/hooks/chat/use-chat-effort'
+import type { ModelSelectMenuGroup, ModelSelectOption } from '#~/hooks/chat/use-chat-model-adapter-selection'
+import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
+
+import type {
+  SenderToolbarData,
+  SenderToolbarHandlers,
+  SenderToolbarRefs,
+  SenderToolbarState
+} from '../@types/sender-toolbar-types'
+
+import { createSenderToolbarHandlers } from './create-sender-toolbar-handlers'
+
+export const createSenderToolbarBindings = ({
+  attachments,
+  callbacks,
+  composer,
+  resources,
+  selection,
+  ui
+}: {
+  attachments: {
+    handleImageFileChange: SenderToolbarHandlers['onImageFileChange']
+    handleImageUpload: () => void
+    handleOpenContextPicker: () => void
+  }
+  callbacks: {
+    onAdapterChange?: (adapter: string) => void
+    onEffortChange?: (effort: ChatEffort) => void
+    onInterrupt: () => void
+    onModelChange?: (model: string) => void
+    onToggleRecommendedModel?: (option: ModelSelectOption) => void | Promise<void>
+    onPermissionModeChange?: (mode: PermissionMode) => void
+    onCancel?: () => void
+    onSend: () => void
+  }
+  composer: { input: string; pendingImageCount: number; pendingFileCount: number }
+  resources: { message: { warning: (content: ReactNode) => unknown }; t: (key: string) => string }
+  selection: {
+    adapterOptions?: Array<{ value: string; label: ReactNode }>
+    effort: ChatEffort
+    effortOptions: SenderToolbarData['effortOptions']
+    modelMenuGroups?: ModelSelectMenuGroup[]
+    modelSearchOptions?: ModelSelectOption[]
+    permissionMode: PermissionMode
+    permissionModeOptions: SenderToolbarData['permissionModeOptions']
+    recommendedModelOptions?: ModelSelectOption[]
+    servicePreviewModelOptions?: ModelSelectOption[]
+    resolvedSendShortcut: string
+    selectedAdapter?: string
+    selectedModel?: string
+    updatingRecommendedModelValue?: string
+  }
+  ui: {
+    adapterLocked: boolean
+    canOpenReferenceActions: boolean
+    composerControlShortcuts: SenderToolbarData['composerControlShortcuts']
+    focusRestore: { queueEditorFocusRestore: () => void }
+    isInlineEdit: boolean
+    isMac: boolean
+    isThinking: boolean
+    modelUnavailable?: boolean
+    referenceActions: {
+      showReferenceActions: boolean
+      showPermissionActions: boolean
+      setShowReferenceActions: (nextOpen: boolean) => void
+      setShowPermissionActions: (nextOpen: boolean) => void
+      closeReferenceActions: (options?: { restoreFocus?: boolean }) => void
+      handleReferenceMenuKeyDown: SenderToolbarHandlers['onReferenceMenuKeyDown']
+      handlePermissionMenuKeyDown: SenderToolbarHandlers['onPermissionMenuKeyDown']
+      referenceMenuNavigation: SenderToolbarRefs['referenceMenuNavigation']
+      permissionMenuNavigation: SenderToolbarRefs['permissionMenuNavigation']
+    }
+    refs: Pick<SenderToolbarRefs, 'effortSelectRef' | 'fileInputRef' | 'modelSelectRef'>
+    selectOverlays: {
+      showModelSelect: boolean
+      setShowModelSelect: (nextOpen: boolean) => void
+      showEffortSelect: boolean
+      setShowEffortSelect: (nextOpen: boolean) => void
+      modelSearchValue: string
+      setModelSearchValue: (value: string) => void
+      openModelSelector: () => boolean
+      openEffortSelector: () => boolean
+    }
+    submitLabel?: string
+    submitLoading: boolean
+    supportsEffort: boolean
+  }
+}) => {
+  const toolbarState: SenderToolbarState = {
+    isInlineEdit: ui.isInlineEdit,
+    isThinking: ui.isThinking,
+    modelUnavailable: Boolean(ui.modelUnavailable),
+    adapterLocked: ui.adapterLocked,
+    submitLoading: ui.submitLoading,
+    supportsEffort: ui.supportsEffort,
+    canOpenReferenceActions: ui.canOpenReferenceActions,
+    showModelSelect: ui.selectOverlays.showModelSelect,
+    showEffortSelect: ui.selectOverlays.showEffortSelect,
+    showReferenceActions: ui.referenceActions.showReferenceActions,
+    showPermissionActions: ui.referenceActions.showPermissionActions,
+    modelSearchValue: ui.selectOverlays.modelSearchValue,
+    selectedModel: selection.selectedModel,
+    effort: selection.effort,
+    permissionMode: selection.permissionMode,
+    selectedAdapter: selection.selectedAdapter,
+    isMac: ui.isMac,
+    resolvedSendShortcut: selection.resolvedSendShortcut,
+    hasComposerContent: composer.input.trim() !== '' || composer.pendingImageCount > 0 || composer.pendingFileCount > 0,
+    hasSendText: composer.input.trim() !== ''
+  }
+
+  const toolbarData: SenderToolbarData = {
+    modelMenuGroups: selection.modelMenuGroups,
+    modelSearchOptions: selection.modelSearchOptions,
+    recommendedModelOptions: selection.recommendedModelOptions,
+    servicePreviewModelOptions: selection.servicePreviewModelOptions,
+    updatingRecommendedModelValue: selection.updatingRecommendedModelValue,
+    effortOptions: selection.effortOptions,
+    permissionModeOptions: selection.permissionModeOptions,
+    adapterOptions: selection.adapterOptions,
+    composerControlShortcuts: ui.composerControlShortcuts,
+    submitLabel: ui.submitLabel
+  }
+
+  const toolbarRefs: SenderToolbarRefs = {
+    ...ui.refs,
+    referenceMenuNavigation: ui.referenceActions.referenceMenuNavigation,
+    permissionMenuNavigation: ui.referenceActions.permissionMenuNavigation
+  }
+
+  const toolbarHandlers = createSenderToolbarHandlers({
+    attachments,
+    canOpenReferenceActions: ui.canOpenReferenceActions,
+    focusRestore: ui.focusRestore,
+    isInlineEdit: ui.isInlineEdit,
+    message: resources.message,
+    modelUnavailable: ui.modelUnavailable,
+    onAdapterChange: callbacks.onAdapterChange,
+    onEffortChange: callbacks.onEffortChange,
+    onInterrupt: callbacks.onInterrupt,
+    onModelChange: callbacks.onModelChange,
+    onToggleRecommendedModel: callbacks.onToggleRecommendedModel,
+    onPermissionModeChange: callbacks.onPermissionModeChange,
+    onCancel: callbacks.onCancel,
+    onSend: callbacks.onSend,
+    referenceActions: ui.referenceActions,
+    selectOverlays: ui.selectOverlays,
+    t: resources.t
+  })
+
+  return { toolbarState, toolbarData, toolbarRefs, toolbarHandlers }
+}

package/src/components/chat/sender/@hooks/use-model-select-browser.tsx

@@ -0,0 +1,189 @@
+import { Menu, Tooltip } from 'antd'
+import type { MenuProps } from 'antd'
+import { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { ModelSelectMenuGroup, ModelSelectOption } from '#~/hooks/chat/use-chat-model-adapter-selection'
+
+import { ModelSelectOptionLabel } from '../@components/model-select/ModelSelectOptionLabel'
+
+export const useModelSelectBrowser = ({
+  hasModelSearchQuery,
+  modelMenuGroups,
+  onToggleRecommendedModel,
+  recommendedModelOptions,
+  servicePreviewModelOptions,
+  selectedModel,
+  updatingRecommendedModelValue,
+  onSelectModel
+}: {
+  hasModelSearchQuery: boolean
+  modelMenuGroups?: ModelSelectMenuGroup[]
+  onToggleRecommendedModel?: (option: ModelSelectOption) => void | Promise<void>
+  recommendedModelOptions?: ModelSelectOption[]
+  servicePreviewModelOptions?: ModelSelectOption[]
+  selectedModel?: string
+  updatingRecommendedModelValue?: string
+  onSelectModel: (value: string) => void
+}) => {
+  const { t } = useTranslation()
+
+  const renderCompactModelMenuLabel = useCallback((option: ModelSelectOption) => {
+    return (
+      <ModelSelectOptionLabel
+        option={option}
+        showServicePrefix
+        onToggleRecommendedModel={onToggleRecommendedModel}
+        updatingRecommendedModelValue={updatingRecommendedModelValue}
+      />
+    )
+  }, [onToggleRecommendedModel, updatingRecommendedModelValue])
+
+  const renderModelMenuGroupLabel = useCallback((group: ModelSelectMenuGroup) => {
+    const label = (
+      <span className='model-menu-group-label'>
+        <span className='model-menu-group-title'>{group.title}</span>
+      </span>
+    )
+
+    if (!group.description) {
+      return label
+    }
+
+    return (
+      <Tooltip
+        title={group.description}
+        placement='left'
+        classNames={{ root: 'model-menu-tooltip' }}
+        mouseEnterDelay={.35}
+        destroyOnHidden
+      >
+        {label}
+      </Tooltip>
+    )
+  }, [])
+
+  const modelMenuItems = useMemo<MenuProps['items']>(() => {
+    const servicePreviewItems = (servicePreviewModelOptions ?? []).map(option => ({
+      key: `service-preview:${option.value}`,
+      label: renderCompactModelMenuLabel(option),
+      className: 'model-select-menu-item'
+    }))
+
+    const recommendedItems = (recommendedModelOptions ?? []).map(option => ({
+      key: `recommended:${option.value}`,
+      label: renderCompactModelMenuLabel(option),
+      className: 'model-select-menu-item'
+    }))
+
+    const moreModelChildren = (modelMenuGroups ?? [])
+      .filter(group => group.options.length > 0)
+      .map(group => ({
+        key: group.key,
+        label: renderModelMenuGroupLabel(group),
+        popupClassName: 'model-select-submenu-popup',
+        children: group.options.map(option => ({
+          key: option.value,
+          label: (
+            <ModelSelectOptionLabel
+              option={option}
+              onToggleRecommendedModel={onToggleRecommendedModel}
+              updatingRecommendedModelValue={updatingRecommendedModelValue}
+            />
+          ),
+          className: 'model-select-menu-item'
+        }))
+      }))
+
+    if (moreModelChildren.length === 0) {
+      if (recommendedItems.length === 0) {
+        return servicePreviewItems
+      }
+
+      return [
+        ...servicePreviewItems,
+        {
+          type: 'group',
+          key: 'recommended-group',
+          label: <span className='model-select-section-label'>{t('chat.modelGroupRecommended')}</span>,
+          children: recommendedItems
+        }
+      ]
+    }
+
+    return [
+      ...servicePreviewItems,
+      ...(recommendedItems.length > 0
+        ? [{
+          type: 'group' as const,
+          key: 'recommended-group',
+          label: <span className='model-select-section-label'>{t('chat.modelGroupRecommended')}</span>,
+          children: recommendedItems
+        }]
+        : []),
+      {
+        key: 'more-models',
+        label: <span className='model-more-menu-label'>{t('chat.modelMoreModels')}</span>,
+        popupClassName: 'model-select-submenu-popup',
+        children: moreModelChildren
+      }
+    ]
+  }, [
+    modelMenuGroups,
+    onToggleRecommendedModel,
+    recommendedModelOptions,
+    renderCompactModelMenuLabel,
+    renderModelMenuGroupLabel,
+    servicePreviewModelOptions,
+    t,
+    updatingRecommendedModelValue
+  ])
+
+  const handleModelMenuClick: MenuProps['onClick'] = ({ key, domEvent }) => {
+    domEvent.preventDefault()
+    if (typeof key !== 'string' || key === 'more-models') {
+      return
+    }
+    onSelectModel(key.replace(/^(service-preview:|recommended:)/, ''))
+  }
+
+  const selectedModelMenuKeys = useMemo(() => {
+    if (!selectedModel) return []
+
+    return [
+      selectedModel,
+      `service-preview:${selectedModel}`,
+      `recommended:${selectedModel}`
+    ]
+  }, [selectedModel])
+
+  const renderModelPopup = useCallback((menu: React.ReactElement) => {
+    if (hasModelSearchQuery || modelMenuItems == null || modelMenuItems.length === 0) {
+      return menu
+    }
+
+    return (
+      <div
+        className='model-select-browser'
+        onMouseDown={(event) => {
+          event.preventDefault()
+          event.stopPropagation()
+        }}
+      >
+        <Menu
+          className='model-select-menu'
+          mode='vertical'
+          selectable
+          selectedKeys={selectedModelMenuKeys}
+          triggerSubMenuAction='hover'
+          items={modelMenuItems}
+          onClick={handleModelMenuClick}
+        />
+      </div>
+    )
+  }, [hasModelSearchQuery, handleModelMenuClick, modelMenuItems, selectedModelMenuKeys])
+
+  return {
+    renderModelPopup
+  }
+}

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

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

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

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

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