@vibe-forge/client 0.8.4 → 0.10.0

package/src/components/chat/sender/@components/sender-toolbar/SenderToolbar.tsx

@@ -0,0 +1,87 @@
+import './SenderToolbar.scss'
+
+import type {
+  SenderToolbarData,
+  SenderToolbarHandlers,
+  SenderToolbarRefs,
+  SenderToolbarState
+} from '../../@types/sender-toolbar-types'
+
+import { AdapterSelectControl } from '../adapter-select/AdapterSelectControl'
+import { EffortSelectControl } from '../effort-select/EffortSelectControl'
+import { ModelSelectControl } from '../model-select/ModelSelectControl'
+import { ReferenceActionsControl } from '../reference-actions/ReferenceActionsControl'
+import { SenderSubmitAction } from '../sender-submit-action/SenderSubmitAction'
+
+export function SenderToolbar({
+  state,
+  data,
+  refs,
+  handlers
+}: {
+  state: SenderToolbarState
+  data: SenderToolbarData
+  refs: SenderToolbarRefs
+  handlers: SenderToolbarHandlers
+}) {
+  return (
+    <div className='chat-input-toolbar'>
+      <input
+        ref={refs.fileInputRef}
+        type='file'
+        accept='image/*'
+        multiple
+        onChange={handlers.onImageFileChange}
+        className='file-input-hidden'
+      />
+
+      <div className='toolbar-left'>
+        <ReferenceActionsControl
+          state={state}
+          data={data}
+          refs={refs}
+          handlers={handlers}
+        />
+
+        {!state.isInlineEdit && (
+          <ModelSelectControl
+            state={state}
+            data={data}
+            refs={refs}
+            handlers={handlers}
+          />
+        )}
+
+        {!state.isInlineEdit && state.supportsEffort && (
+          <EffortSelectControl
+            state={state}
+            data={data}
+            refs={refs}
+            handlers={handlers}
+          />
+        )}
+      </div>
+
+      <div className={`toolbar-right ${state.isInlineEdit ? 'toolbar-right--inline-edit' : ''}`.trim()}>
+        {!state.isInlineEdit && (
+          <AdapterSelectControl state={state} data={data} handlers={handlers} />
+        )}
+
+        <SenderSubmitAction
+          isInlineEdit={state.isInlineEdit}
+          submitLoading={state.submitLoading}
+          submitLabel={data.submitLabel}
+          hasComposerContent={state.hasComposerContent}
+          hasSendText={state.hasSendText}
+          modelUnavailable={state.modelUnavailable}
+          isThinking={state.isThinking}
+          resolvedSendShortcut={state.resolvedSendShortcut}
+          isMac={state.isMac}
+          onCancel={handlers.onCancel}
+          onSend={handlers.onSend}
+          onInterrupt={handlers.onInterrupt}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/chat/sender/@core/build-sender-controller-result.ts

@@ -0,0 +1,119 @@
+import type { Dispatch, MutableRefObject, SetStateAction } from 'react'
+
+import type { PendingContextFile, PendingImage } from '../@types/sender-composer'
+import type { SenderEditorHandle } from '../@types/sender-editor'
+import type { SenderProps } from '../@types/sender-props'
+import type {
+  SenderToolbarData,
+  SenderToolbarHandlers,
+  SenderToolbarRefs,
+  SenderToolbarState
+} from '../@types/sender-toolbar-types'
+import type { SenderCompletionMatch, SenderTokenDecoration } from '../@utils/sender-completion'
+
+interface SenderControllerAttachments {
+  handlePaste: (event: ClipboardEvent) => void | Promise<void>
+  showContextPicker: boolean
+  setShowContextPicker: (nextOpen: boolean) => void
+  handleContextPickerConfirm: (files: PendingContextFile[]) => void
+}
+
+interface SenderControllerCompletion {
+  showCompletion: boolean
+  handleInputChange: (value: string, cursorPosition: number | null) => void
+  handleCursorChange: (cursorPosition: number | null) => void
+  resolveCompletionMatch: (
+    value: string,
+    cursorOffset: number | null,
+    sessionInfo?: SenderProps['sessionInfo']
+  ) => SenderCompletionMatch | null
+  resolveTokenDecorations: (value: string) => SenderTokenDecoration[]
+}
+
+interface SenderControllerComposer {
+  input: string
+  pendingImages: PendingImage[]
+  pendingFiles: PendingContextFile[]
+  setPendingImages: Dispatch<SetStateAction<PendingImage[]>>
+  setPendingFiles: Dispatch<SetStateAction<PendingContextFile[]>>
+}
+
+interface SenderControllerToolbar {
+  toolbarState: SenderToolbarState
+  toolbarData: SenderToolbarData
+  toolbarRefs: SenderToolbarRefs
+  toolbarHandlers: SenderToolbarHandlers
+}
+
+export const buildSenderControllerResult = ({
+  attachments,
+  completion,
+  composer,
+  errorBanner,
+  focusRestore,
+  handleKeyDown,
+  hideSender,
+  interactionRequest,
+  interactionResponse,
+  isBusy,
+  isInlineEdit,
+  isThinking,
+  modelUnavailable,
+  onRetryConnection,
+  permissionContext,
+  placeholder,
+  editorRef,
+  toolbar
+}: {
+  attachments: SenderControllerAttachments
+  completion: SenderControllerCompletion
+  composer: SenderControllerComposer
+  errorBanner?: SenderProps['errorBanner']
+  focusRestore: { queueEditorFocusRestore: () => void }
+  handleKeyDown: (event: KeyboardEvent) => void
+  hideSender: boolean
+  interactionRequest?: SenderProps['interactionRequest']
+  interactionResponse?: SenderProps['onInteractionResponse']
+  isBusy: boolean
+  isInlineEdit: boolean
+  isThinking: boolean
+  modelUnavailable?: boolean
+  onRetryConnection?: (() => void) | undefined
+  permissionContext?: {
+    deniedTools?: string[]
+    reasons?: string[]
+  }
+  placeholder: string
+  editorRef: MutableRefObject<SenderEditorHandle | null>
+  toolbar: SenderControllerToolbar
+}) => ({
+  isInlineEdit,
+  isThinking,
+  isBusy,
+  hideSender,
+  permissionContext,
+  deniedTools: permissionContext?.deniedTools?.filter(tool => tool.trim() !== '') ?? [],
+  reasons: permissionContext?.reasons?.filter(reason => reason.trim() !== '') ?? [],
+  editorRef,
+  composer,
+  completion,
+  attachments,
+  toolbar,
+  handleKeyDown,
+  interactionRequest,
+  interactionResponse,
+  errorBanner,
+  onRetryConnection,
+  modelUnavailable,
+  placeholder,
+  onInputChange: completion.handleInputChange,
+  onCursorChange: completion.handleCursorChange,
+  onCancelContextPicker: () => {
+    attachments.setShowContextPicker(false)
+    focusRestore.queueEditorFocusRestore()
+  },
+  onConfirmContextPicker: (files: PendingContextFile[]) => {
+    attachments.handleContextPickerConfirm(files)
+    focusRestore.queueEditorFocusRestore()
+  }
+})

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

@@ -0,0 +1,122 @@
+import type { ReactNode, RefObject } from 'react'
+
+import type { RefSelectProps } from 'antd'
+
+import type { SenderProps } from '../@types/sender-props'
+import type { SenderToolbarData, SenderToolbarHandlers, SenderToolbarRefs } from '../@types/sender-toolbar-types'
+
+import { createSenderToolbarBindings } from './sender-toolbar-bindings'
+
+export const buildSenderToolbar = ({
+  attachments,
+  callbacks,
+  composer,
+  composerControlShortcuts,
+  focusRestore,
+  isBusy,
+  isInlineEdit,
+  isMac,
+  isThinking,
+  message,
+  props,
+  refs,
+  referenceActions,
+  resolvedSendShortcut,
+  selectOverlays,
+  supportsEffort,
+  t
+}: {
+  attachments: {
+    handleImageFileChange: SenderToolbarHandlers['onImageFileChange']
+    handleImageUpload: () => void
+    handleOpenContextPicker: () => void
+  }
+  callbacks: { onSend: () => void }
+  composer: { input: string; pendingImageCount: number; pendingFileCount: number }
+  composerControlShortcuts: SenderToolbarData['composerControlShortcuts']
+  focusRestore: { queueEditorFocusRestore: () => void }
+  isBusy: boolean
+  isInlineEdit: boolean
+  isMac: boolean
+  isThinking: boolean
+  message: { warning: (content: ReactNode) => unknown }
+  props: SenderProps
+  refs: {
+    fileInputRef: RefObject<HTMLInputElement>
+    modelSelectRef: RefObject<RefSelectProps>
+    effortSelectRef: RefObject<RefSelectProps>
+  }
+  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']
+  }
+  resolvedSendShortcut: string
+  selectOverlays: {
+    showModelSelect: boolean
+    setShowModelSelect: (nextOpen: boolean) => void
+    showEffortSelect: boolean
+    setShowEffortSelect: (nextOpen: boolean) => void
+    modelSearchValue: string
+    setModelSearchValue: (value: string) => void
+    openModelSelector: () => boolean
+    openEffortSelector: () => boolean
+  }
+  supportsEffort: boolean
+  t: (key: string) => string
+}) => {
+  const canOpenReferenceActions = !isBusy && (!props.modelUnavailable || isInlineEdit)
+
+  return createSenderToolbarBindings({
+    attachments,
+    callbacks: {
+      onAdapterChange: props.onAdapterChange,
+      onEffortChange: props.onEffortChange,
+      onInterrupt: props.onInterrupt,
+      onModelChange: props.onModelChange,
+      onToggleRecommendedModel: props.onToggleRecommendedModel,
+      onPermissionModeChange: props.onPermissionModeChange,
+      onCancel: props.onCancel,
+      onSend: callbacks.onSend
+    },
+    composer,
+    resources: { message, t },
+    selection: {
+      adapterOptions: props.adapterOptions,
+      effort: props.effort ?? 'default',
+      effortOptions: props.effortOptions ?? [],
+      modelMenuGroups: props.modelMenuGroups,
+      modelSearchOptions: props.modelSearchOptions,
+      permissionMode: props.permissionMode ?? 'default',
+      permissionModeOptions: props.permissionModeOptions ?? [],
+      recommendedModelOptions: props.recommendedModelOptions,
+      servicePreviewModelOptions: props.servicePreviewModelOptions,
+      resolvedSendShortcut,
+      selectedAdapter: props.selectedAdapter,
+      selectedModel: props.selectedModel,
+      updatingRecommendedModelValue: props.updatingRecommendedModelValue
+    },
+    ui: {
+      adapterLocked: props.adapterLocked ?? false,
+      canOpenReferenceActions,
+      composerControlShortcuts,
+      focusRestore,
+      isInlineEdit,
+      isMac,
+      isThinking,
+      modelUnavailable: props.modelUnavailable,
+      referenceActions,
+      refs,
+      selectOverlays,
+      submitLabel: props.submitLabel,
+      submitLoading: props.submitLoading === true,
+      supportsEffort
+    }
+  })
+}

package/src/components/chat/sender/@core/content-attachments.ts

@@ -0,0 +1,76 @@
+import type { ChatMessageContent } from '@vibe-forge/core'
+
+import type { PendingContextFile, PendingImage, SenderComposerState } from '../@types/sender-composer'
+
+export const createPendingImageId = (index: number) => `pending-image-${index}`
+
+export const getInitialComposerState = (content: string | ChatMessageContent[] | undefined): SenderComposerState => {
+  if (typeof content === 'string') {
+    return {
+      input: content,
+      pendingImages: [],
+      pendingFiles: []
+    }
+  }
+
+  if (!Array.isArray(content)) {
+    return {
+      input: '',
+      pendingImages: [],
+      pendingFiles: []
+    }
+  }
+
+  const textItems = content
+    .filter((item): item is Extract<ChatMessageContent, { type: 'text' }> => item.type === 'text')
+    .map(item => item.text)
+  const imageItems = content
+    .filter((item): item is Extract<ChatMessageContent, { type: 'image' }> => item.type === 'image')
+    .map((item, index) => ({
+      id: createPendingImageId(index),
+      url: item.url,
+      name: item.name,
+      size: item.size,
+      mimeType: item.mimeType
+    }))
+  const fileItems = content
+    .filter((item): item is Extract<ChatMessageContent, { type: 'file' }> => item.type === 'file')
+    .map(item => ({
+      path: item.path,
+      name: item.name,
+      size: item.size
+    }))
+
+  return {
+    input: textItems.join('\n\n'),
+    pendingImages: imageItems,
+    pendingFiles: fileItems
+  }
+}
+
+export const buildMessageContent = (
+  input: string,
+  pendingImages: PendingImage[],
+  pendingFiles: PendingContextFile[]
+) => {
+  const content: ChatMessageContent[] = []
+  if (input.trim() !== '') {
+    content.push({ type: 'text', text: input.trim() })
+  }
+
+  content.push(...pendingImages.map((img): ChatMessageContent => ({
+    type: 'image',
+    url: img.url,
+    name: img.name,
+    size: img.size,
+    mimeType: img.mimeType
+  })))
+  content.push(...pendingFiles.map((file): ChatMessageContent => ({
+    type: 'file',
+    path: file.path,
+    name: file.name,
+    size: file.size
+  })))
+
+  return content
+}

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

@@ -0,0 +1,115 @@
+import type { ReactNode } from 'react'
+
+import type { ChatEffort } from '#~/hooks/chat/use-chat-effort'
+import type { ModelSelectOption } from '#~/hooks/chat/use-chat-model-adapter-selection'
+import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
+
+import type { SenderToolbarHandlers } from '../@types/sender-toolbar-types'
+
+export const createSenderToolbarHandlers = ({
+  attachments,
+  canOpenReferenceActions,
+  focusRestore,
+  isInlineEdit,
+  message,
+  modelUnavailable,
+  onAdapterChange,
+  onEffortChange,
+  onInterrupt,
+  onModelChange,
+  onToggleRecommendedModel,
+  onPermissionModeChange,
+  onCancel,
+  onSend,
+  referenceActions,
+  selectOverlays,
+  t
+}: {
+  attachments: {
+    handleImageFileChange: SenderToolbarHandlers['onImageFileChange']
+    handleImageUpload: () => void
+    handleOpenContextPicker: () => void
+  }
+  canOpenReferenceActions: boolean
+  focusRestore: { queueEditorFocusRestore: () => void }
+  isInlineEdit: boolean
+  message: { warning: (content: ReactNode) => unknown }
+  modelUnavailable?: boolean
+  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
+  referenceActions: {
+    setShowReferenceActions: (nextOpen: boolean) => void
+    setShowPermissionActions: (nextOpen: boolean) => void
+    closeReferenceActions: (options?: { restoreFocus?: boolean }) => void
+    handleReferenceMenuKeyDown: SenderToolbarHandlers['onReferenceMenuKeyDown']
+    handlePermissionMenuKeyDown: SenderToolbarHandlers['onPermissionMenuKeyDown']
+  }
+  selectOverlays: {
+    setShowModelSelect: (nextOpen: boolean) => void
+    setShowEffortSelect: (nextOpen: boolean) => void
+    setModelSearchValue: (value: string) => void
+    openModelSelector: () => boolean
+    openEffortSelector: () => boolean
+  }
+  t: (key: string) => string
+}) => {
+  return {
+    onImageFileChange: attachments.handleImageFileChange,
+    onReferenceOpenChange: (nextOpen) => {
+      if (nextOpen && !canOpenReferenceActions) {
+        if (!isInlineEdit && modelUnavailable) {
+          void message.warning(t('chat.modelConfigRequired'))
+        }
+        return
+      }
+
+      selectOverlays.setShowModelSelect(false)
+      selectOverlays.setShowEffortSelect(false)
+
+      if (!nextOpen) {
+        referenceActions.closeReferenceActions({ restoreFocus: true })
+        return
+      }
+
+      referenceActions.setShowPermissionActions(false)
+      referenceActions.setShowReferenceActions(true)
+    },
+    onShowModelSelectChange: selectOverlays.setShowModelSelect,
+    onShowEffortSelectChange: selectOverlays.setShowEffortSelect,
+    onShowPermissionActionsChange: referenceActions.setShowPermissionActions,
+    onModelSearchValueChange: selectOverlays.setModelSearchValue,
+    onOpenContextPicker: attachments.handleOpenContextPicker,
+    onReferenceImageSelect: attachments.handleImageUpload,
+    onSelectPermissionMode: (mode) => {
+      onPermissionModeChange?.(mode)
+      referenceActions.closeReferenceActions({ restoreFocus: true })
+    },
+    onReferenceMenuKeyDown: referenceActions.handleReferenceMenuKeyDown,
+    onPermissionMenuKeyDown: referenceActions.handlePermissionMenuKeyDown,
+    onOpenModelSelector: () => {
+      if (selectOverlays.openModelSelector()) {
+        referenceActions.closeReferenceActions()
+      }
+    },
+    onOpenEffortSelector: () => {
+      if (selectOverlays.openEffortSelector()) {
+        referenceActions.closeReferenceActions()
+      }
+    },
+    onQueueTextareaFocusRestore: focusRestore.queueEditorFocusRestore,
+    onCloseReferenceActions: () => referenceActions.closeReferenceActions(),
+    onModelChange,
+    onToggleRecommendedModel,
+    onEffortChange,
+    onAdapterChange,
+    onSend,
+    onInterrupt,
+    onCancel
+  } satisfies SenderToolbarHandlers
+}

package/src/components/chat/sender/@core/get-sender-interaction-state.ts

@@ -0,0 +1,18 @@
+import type { SenderProps } from '../@types/sender-props'
+
+import { shouldHideSenderForInteraction } from './interaction-request'
+
+export const getSenderInteractionState = ({
+  interactionRequest,
+  isInlineEdit
+}: {
+  interactionRequest: SenderProps['interactionRequest']
+  isInlineEdit: boolean
+}) => {
+  const hideSender = isInlineEdit ? false : shouldHideSenderForInteraction(interactionRequest)
+  const permissionContext = interactionRequest?.payload.kind === 'permission'
+    ? interactionRequest.payload.permissionContext
+    : undefined
+
+  return { hideSender, permissionContext }
+}

package/src/components/chat/sender/@core/get-sender-runtime-state.ts

@@ -0,0 +1,14 @@
+import type { SenderProps } from '../@types/sender-props'
+
+export const getSenderRuntimeState = (
+  props: Pick<SenderProps, 'selectedAdapter' | 'sessionStatus' | 'submitLoading' | 'variant'>
+) => {
+  const isInlineEdit = props.variant === 'inline-edit'
+  const isMac = navigator.platform.includes('Mac')
+  const isThinking = !isInlineEdit && props.sessionStatus === 'running'
+  const isBusy = isThinking || props.submitLoading === true
+  const supportsEffort = props.selectedAdapter === 'codex' || props.selectedAdapter === 'claude-code' ||
+    props.selectedAdapter === 'opencode'
+
+  return { isInlineEdit, isMac, isThinking, isBusy, supportsEffort }
+}

package/src/components/chat/sender/@core/interaction-request.ts

@@ -0,0 +1,5 @@
+import type { AskUserQuestionParams } from '@vibe-forge/core'
+
+export const shouldHideSenderForInteraction = (
+  interactionRequest: { id: string; payload: AskUserQuestionParams } | null | undefined
+) => interactionRequest?.payload.kind === 'permission'