@vibe-forge/client 0.8.4 → 0.10.0

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

@@ -0,0 +1,83 @@
+import type { RefObject } from 'react'
+import { useEffect, useState } from 'react'
+
+import type { RefSelectProps } from 'antd'
+
+import type { SenderInitialContent } from '#~/components/chat/sender/@types/sender-types'
+
+export const useSenderSelectOverlays = ({
+  initialContent,
+  isInlineEdit,
+  isThinking,
+  modelUnavailable,
+  supportsEffort,
+  modelSelectRef,
+  effortSelectRef
+}: {
+  initialContent: SenderInitialContent
+  isInlineEdit: boolean
+  isThinking: boolean
+  modelUnavailable?: boolean
+  supportsEffort: boolean
+  modelSelectRef: RefObject<RefSelectProps>
+  effortSelectRef: RefObject<RefSelectProps>
+}) => {
+  const [showModelSelect, setShowModelSelect] = useState(false)
+  const [showEffortSelect, setShowEffortSelect] = useState(false)
+  const [modelSearchValue, setModelSearchValue] = useState('')
+
+  useEffect(() => {
+    resetSelectOverlays()
+  }, [initialContent])
+
+  const resetSelectOverlays = () => {
+    setShowModelSelect(false)
+    setShowEffortSelect(false)
+    setModelSearchValue('')
+  }
+
+  useEffect(() => {
+    if (!showModelSelect && modelSearchValue !== '') {
+      setModelSearchValue('')
+    }
+  }, [modelSearchValue, showModelSelect])
+
+  const focusSelect = (selectRef: RefObject<RefSelectProps>) => {
+    window.requestAnimationFrame(() => {
+      selectRef.current?.focus?.()
+    })
+  }
+
+  const openModelSelector = () => {
+    if (isInlineEdit || modelUnavailable || isThinking) {
+      return false
+    }
+    setShowEffortSelect(false)
+    setModelSearchValue('')
+    setShowModelSelect(true)
+    focusSelect(modelSelectRef)
+    return true
+  }
+
+  const openEffortSelector = () => {
+    if (isInlineEdit || modelUnavailable || isThinking || !supportsEffort) {
+      return false
+    }
+    setShowModelSelect(false)
+    setShowEffortSelect(true)
+    focusSelect(effortSelectRef)
+    return true
+  }
+
+  return {
+    showModelSelect,
+    setShowModelSelect,
+    showEffortSelect,
+    setShowEffortSelect,
+    modelSearchValue,
+    setModelSearchValue,
+    resetSelectOverlays,
+    openModelSelector,
+    openEffortSelector
+  }
+}

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

@@ -0,0 +1,78 @@
+import type { ReactNode } from 'react'
+
+import useSWR from 'swr'
+
+import type { ConfigResponse } from '@vibe-forge/types'
+
+import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
+import { useComposerControlShortcuts } from '#~/hooks/chat/use-composer-control-shortcuts'
+import { resolveSendShortcut } from '#~/utils/shortcutUtils'
+
+export const useSenderShortcuts = ({
+  enabled,
+  isInlineEdit,
+  isMac,
+  isThinking,
+  modelUnavailable,
+  permissionModeOptions,
+  referenceActions,
+  selectOverlays
+}: {
+  enabled: boolean
+  isInlineEdit: boolean
+  isMac: boolean
+  isThinking: boolean
+  modelUnavailable?: boolean
+  permissionModeOptions: Array<{ value: PermissionMode; label: ReactNode }>
+  referenceActions: {
+    closeReferenceActions: (options?: { restoreFocus?: boolean }) => void
+    openPermissionShortcutMenu: () => void
+  }
+  selectOverlays: {
+    openModelSelector: () => boolean
+    openEffortSelector: () => boolean
+    setShowModelSelect: (nextOpen: boolean) => void
+    setShowEffortSelect: (nextOpen: boolean) => void
+  }
+}) => {
+  const { data: configRes } = useSWR<ConfigResponse>('/api/config')
+  const mergedShortcuts = configRes?.sources?.merged?.shortcuts
+  const resolvedSendShortcut = resolveSendShortcut(mergedShortcuts?.sendMessage, isMac)
+
+  const composerControlShortcuts = useComposerControlShortcuts({
+    enabled,
+    isMac,
+    shortcuts: mergedShortcuts,
+    onSwitchModel: (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      if (selectOverlays.openModelSelector()) {
+        referenceActions.closeReferenceActions()
+      }
+    },
+    onSwitchEffort: (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      if (selectOverlays.openEffortSelector()) {
+        referenceActions.closeReferenceActions()
+      }
+    },
+    onSwitchPermissionMode: (event) => {
+      if (isInlineEdit || modelUnavailable || isThinking || permissionModeOptions.length === 0) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+      selectOverlays.setShowModelSelect(false)
+      selectOverlays.setShowEffortSelect(false)
+      referenceActions.openPermissionShortcutMenu()
+    }
+  })
+
+  return {
+    clearInputShortcut: mergedShortcuts?.clearInput,
+    composerControlShortcuts,
+    resolvedSendShortcut
+  }
+}

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

@@ -0,0 +1,81 @@
+import type { TFunction } from 'i18next'
+
+import type { MessageInstance } from 'antd/es/message/interface'
+
+import { buildMessageContent } from '#~/components/chat/sender/@core/content-attachments'
+import type { SenderSubmitResult } from '#~/components/chat/sender/@types/sender-types'
+import { saveChatHistoryEntry } from '#~/components/chat/sender/@utils/sender-utils'
+
+export const useSenderSubmit = ({
+  getInput,
+  pendingImages,
+  pendingFiles,
+  isBusy,
+  isInlineEdit,
+  modelUnavailable,
+  interactionRequest,
+  onInteractionResponse,
+  onSend,
+  onSendContent,
+  message,
+  t,
+  resetComposer
+}: {
+  getInput: () => string
+  pendingImages: Parameters<typeof buildMessageContent>[1]
+  pendingFiles: Parameters<typeof buildMessageContent>[2]
+  isBusy: boolean
+  isInlineEdit: boolean
+  modelUnavailable?: boolean
+  interactionRequest?: { id: string } | null
+  onInteractionResponse?: (id: string, data: string | string[]) => void
+  onSend: (text: string) => SenderSubmitResult | Promise<SenderSubmitResult>
+  onSendContent: (content: ReturnType<typeof buildMessageContent>) => SenderSubmitResult | Promise<SenderSubmitResult>
+  message: MessageInstance
+  t: TFunction
+  resetComposer: () => void
+}) => {
+  return async () => {
+    const input = getInput()
+
+    if (isBusy || (input.trim() === '' && pendingImages.length === 0 && pendingFiles.length === 0)) {
+      return
+    }
+    if (!isInlineEdit && modelUnavailable) {
+      void message.warning(t('chat.modelConfigRequired'))
+      return
+    }
+    if (!isInlineEdit && interactionRequest != null && onInteractionResponse != null) {
+      if (pendingImages.length > 0 || pendingFiles.length > 0) {
+        void message.warning(
+          pendingImages.length > 0 ? t('chat.imageNotSupportedInInteraction') : t('chat.fileNotSupportedInInteraction')
+        )
+        return
+      }
+      onInteractionResponse(interactionRequest.id, input.trim())
+      resetComposer()
+      return
+    }
+
+    let didSubmit = true
+    if (pendingImages.length > 0 || pendingFiles.length > 0) {
+      const content = buildMessageContent(input, pendingImages, pendingFiles)
+      if (isInlineEdit) {
+        didSubmit = (await onSendContent(content)) !== false
+      } else {
+        void onSendContent(content)
+      }
+    } else if (isInlineEdit) {
+      didSubmit = (await onSend(input)) !== false
+    } else {
+      void onSend(input)
+    }
+
+    if (!didSubmit) {
+      return
+    }
+
+    saveChatHistoryEntry(input)
+    resetComposer()
+  }
+}

package/src/components/chat/sender/@types/sender-composer.ts

@@ -0,0 +1,19 @@
+export interface PendingImage {
+  id: string
+  url: string
+  name?: string
+  size?: number
+  mimeType?: string
+}
+
+export interface PendingContextFile {
+  path: string
+  name?: string
+  size?: number
+}
+
+export interface SenderComposerState {
+  input: string
+  pendingImages: PendingImage[]
+  pendingFiles: PendingContextFile[]
+}

package/src/components/chat/sender/@types/sender-editor.ts

@@ -0,0 +1,12 @@
+export interface SenderEditorSelection {
+  start: number
+  end: number
+}
+
+export interface SenderEditorHandle {
+  focus: () => void
+  setSelection: (selection: SenderEditorSelection) => void
+  getSelection: () => SenderEditorSelection | null
+  getValue: () => string
+  isDisabled: () => boolean
+}

package/src/components/chat/sender/@types/sender-props.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react'
+
+import type { AskUserQuestionParams, ChatMessageContent, SessionStatus } from '@vibe-forge/core'
+import type { SessionInfo } from '@vibe-forge/types'
+
+import type { ChatErrorBannerState } from '#~/hooks/chat/interaction-state'
+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 { SenderInitialContent, SenderSubmitResult, SenderVariant } from './sender-types'
+
+export interface SenderProps {
+  onSend: (text: string) => SenderSubmitResult | Promise<SenderSubmitResult>
+  onSendContent: (content: ChatMessageContent[]) => SenderSubmitResult | Promise<SenderSubmitResult>
+  variant?: SenderVariant
+  adapterLocked?: boolean
+  sessionStatus?: SessionStatus
+  onInterrupt: () => void
+  onClear?: () => void
+  sessionInfo?: SessionInfo | null
+  errorBanner?: ChatErrorBannerState | null
+  onRetryConnection?: () => void
+  interactionRequest?: { id: string; payload: AskUserQuestionParams } | null
+  onInteractionResponse?: (id: string, data: string | string[]) => void
+  placeholder?: string
+  initialContent?: SenderInitialContent
+  onCancel?: () => void
+  submitLabel?: string
+  submitLoading?: boolean
+  autoFocus?: boolean
+  modelMenuGroups?: ModelSelectMenuGroup[]
+  modelSearchOptions?: ModelSelectOption[]
+  recommendedModelOptions?: ModelSelectOption[]
+  servicePreviewModelOptions?: ModelSelectOption[]
+  onToggleRecommendedModel?: (option: ModelSelectOption) => void | Promise<void>
+  updatingRecommendedModelValue?: string
+  selectedModel?: string
+  onModelChange?: (model: string) => void
+  effort?: ChatEffort
+  effortOptions?: Array<{ value: ChatEffort; label: ReactNode }>
+  onEffortChange?: (effort: ChatEffort) => void
+  permissionMode?: PermissionMode
+  permissionModeOptions?: Array<{ value: PermissionMode; label: ReactNode }>
+  onPermissionModeChange?: (mode: PermissionMode) => void
+  selectedAdapter?: string
+  adapterOptions?: Array<{ value: string; label: ReactNode }>
+  onAdapterChange?: (adapter: string) => void
+  modelUnavailable?: boolean
+}

package/src/components/chat/sender/@types/sender-toolbar-types.ts

@@ -0,0 +1,83 @@
+import type { ChangeEvent, KeyboardEvent, ReactNode, RefObject } from 'react'
+
+import type { RefSelectProps } from 'antd'
+
+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 { ReferenceMenuKey, RovingFocusNavigation } from './sender-types'
+
+export interface SenderToolbarShortcuts {
+  switchModel: string
+  switchEffort: string
+  switchPermissionMode: string
+}
+
+export interface SenderToolbarState {
+  isInlineEdit: boolean
+  isThinking: boolean
+  modelUnavailable: boolean
+  adapterLocked: boolean
+  submitLoading: boolean
+  supportsEffort: boolean
+  canOpenReferenceActions: boolean
+  showModelSelect: boolean
+  showEffortSelect: boolean
+  showReferenceActions: boolean
+  showPermissionActions: boolean
+  modelSearchValue: string
+  selectedModel?: string
+  effort: ChatEffort
+  permissionMode: PermissionMode
+  selectedAdapter?: string
+  isMac: boolean
+  resolvedSendShortcut: string
+  hasComposerContent: boolean
+  hasSendText: boolean
+}
+
+export interface SenderToolbarData {
+  modelMenuGroups?: ModelSelectMenuGroup[]
+  modelSearchOptions?: ModelSelectOption[]
+  recommendedModelOptions?: ModelSelectOption[]
+  servicePreviewModelOptions?: ModelSelectOption[]
+  updatingRecommendedModelValue?: string
+  effortOptions: Array<{ value: ChatEffort; label: ReactNode }>
+  permissionModeOptions: Array<{ value: PermissionMode; label: ReactNode }>
+  adapterOptions?: Array<{ value: string; label: ReactNode }>
+  composerControlShortcuts: SenderToolbarShortcuts
+  submitLabel?: string
+}
+
+export interface SenderToolbarRefs {
+  fileInputRef: RefObject<HTMLInputElement>
+  modelSelectRef: RefObject<RefSelectProps>
+  effortSelectRef: RefObject<RefSelectProps>
+  referenceMenuNavigation: RovingFocusNavigation<ReferenceMenuKey>
+  permissionMenuNavigation: RovingFocusNavigation<PermissionMode>
+}
+
+export interface SenderToolbarHandlers {
+  onImageFileChange: (event: ChangeEvent<HTMLInputElement>) => void
+  onReferenceOpenChange: (nextOpen: boolean) => void
+  onShowModelSelectChange: (nextOpen: boolean) => void
+  onShowEffortSelectChange: (nextOpen: boolean) => void
+  onShowPermissionActionsChange: (nextOpen: boolean) => void
+  onModelSearchValueChange: (value: string) => void
+  onOpenContextPicker: () => void
+  onReferenceImageSelect: () => void
+  onSelectPermissionMode: (mode: PermissionMode) => void
+  onReferenceMenuKeyDown: (event: KeyboardEvent<HTMLButtonElement>, key: ReferenceMenuKey) => void
+  onPermissionMenuKeyDown: (event: KeyboardEvent<HTMLButtonElement>, key: PermissionMode) => void
+  onOpenModelSelector: () => void
+  onOpenEffortSelector: () => void
+  onQueueTextareaFocusRestore: () => void
+  onCloseReferenceActions: () => void
+  onModelChange?: (model: string) => void
+  onToggleRecommendedModel?: (option: ModelSelectOption) => void | Promise<void>
+  onEffortChange?: (effort: ChatEffort) => void
+  onAdapterChange?: (adapter: string) => void
+  onSend: () => void
+  onInterrupt: () => void
+  onCancel?: () => void
+}

package/src/components/chat/sender/@types/sender-types.ts

@@ -0,0 +1,21 @@
+import type { ChatMessageContent } from '@vibe-forge/core'
+
+export type SenderVariant = 'default' | 'inline-edit'
+
+export type SenderInitialContent = string | ChatMessageContent[] | undefined
+
+export type SenderSubmitResult = boolean | void
+
+export type ReferenceMenuKey = 'image' | 'file' | 'permission'
+
+export type MenuFocusTarget = 'reference' | 'permission' | null
+
+export interface RovingFocusNavigation<T extends string> {
+  activeKey: T | null
+  setActiveKey: (key: T | null) => void
+  registerItem: (key: T) => (node: HTMLElement | null) => void
+  focusKey: (key: T | null) => void
+  moveFocus: (delta: number, fromKey?: T | null) => T | null
+  focusFirst: () => T | null
+  focusLast: () => T | null
+}

package/src/components/chat/sender/@utils/sender-completion.ts

@@ -0,0 +1,164 @@
+import type { SessionInfo } from '@vibe-forge/types'
+
+export type SenderCompletionTrigger = '/' | '@' | '#'
+
+export type SenderCompletionKind = 'command' | 'agent' | 'tool'
+
+export interface SenderCompletionItem {
+  kind: SenderCompletionKind
+  label: string
+  value: string
+}
+
+export interface SenderCompletionMatch {
+  trigger: SenderCompletionTrigger
+  kind: SenderCompletionKind
+  query: string
+  replaceStart: number
+  cursorOffset: number
+  items: SenderCompletionItem[]
+}
+
+export interface SenderTokenDecoration {
+  start: number
+  end: number
+  className: string
+}
+
+interface CompletionSource {
+  trigger: SenderCompletionTrigger
+  kind: SenderCompletionKind
+  values: string[]
+}
+
+const COMPLETION_MATCHER = /(^|\s)([@/#])([^\s@/#]*)$/
+
+const TOKEN_MATCHER = /(^|\s)([@/#])([^\s@/#]+)/g
+
+const DEMO_COMPLETION_SOURCES: CompletionSource[] = [
+  {
+    trigger: '/',
+    kind: 'command',
+    values: ['plan', 'summarize', 'review', 'fix', 'explain']
+  },
+  {
+    trigger: '@',
+    kind: 'agent',
+    values: ['solution-analyst', 'dev-planner', 'dev-implementer', 'dev-reviewer']
+  },
+  {
+    trigger: '#',
+    kind: 'tool',
+    values: ['ChromeDevtools', 'Bash', 'Read', 'Edit', 'Search']
+  }
+]
+
+const getCompletionSources = (sessionInfo?: SessionInfo | null): CompletionSource[] => {
+  if (sessionInfo?.type !== 'init') {
+    return DEMO_COMPLETION_SOURCES
+  }
+
+  const runtimeSources = [
+    { trigger: '/', kind: 'command', values: sessionInfo.slashCommands ?? [] },
+    { trigger: '@', kind: 'agent', values: sessionInfo.agents ?? [] },
+    { trigger: '#', kind: 'tool', values: sessionInfo.tools ?? [] }
+  ] satisfies CompletionSource[]
+
+  const hasRuntimeValues = runtimeSources.some(source => source.values.length > 0)
+
+  return hasRuntimeValues ? runtimeSources : DEMO_COMPLETION_SOURCES
+}
+
+const getDecorationClassName = (trigger: SenderCompletionTrigger) => {
+  if (trigger === '@') {
+    return 'chat-input-monaco__token--agent'
+  }
+
+  if (trigger === '#') {
+    return 'chat-input-monaco__token--tool'
+  }
+
+  return 'chat-input-monaco__token--command'
+}
+
+const sortCompletionItems = (items: SenderCompletionItem[], query: string) => {
+  const normalizedQuery = query.toLowerCase()
+
+  return items.toSorted((left, right) => {
+    const leftStartsWith = left.value.toLowerCase().startsWith(normalizedQuery)
+    const rightStartsWith = right.value.toLowerCase().startsWith(normalizedQuery)
+
+    if (leftStartsWith !== rightStartsWith) {
+      return leftStartsWith ? -1 : 1
+    }
+
+    return left.value.localeCompare(right.value)
+  })
+}
+
+export const resolveSenderCompletionMatch = (
+  value: string,
+  cursorOffset: number | null,
+  sessionInfo?: SessionInfo | null
+): SenderCompletionMatch | null => {
+  const resolvedCursorOffset = cursorOffset ?? value.length
+  const textBeforeCursor = value.slice(0, resolvedCursorOffset)
+  const match = COMPLETION_MATCHER.exec(textBeforeCursor)
+
+  if (match == null) {
+    return null
+  }
+
+  const trigger = match[2] as SenderCompletionTrigger
+  const query = match[3] ?? ''
+  const replaceStart = resolvedCursorOffset - query.length
+  const normalizedQuery = query.toLowerCase()
+  const source = getCompletionSources(sessionInfo).find(item => item.trigger === trigger)
+
+  if (source == null) {
+    return null
+  }
+
+  const items = source.values
+    .filter(item => normalizedQuery === '' || item.toLowerCase().includes(normalizedQuery))
+    .map(item => ({
+      kind: source.kind,
+      label: `${trigger}${item}`,
+      value: item
+    }))
+
+  return {
+    trigger,
+    kind: source.kind,
+    query,
+    replaceStart,
+    cursorOffset: resolvedCursorOffset,
+    items: sortCompletionItems(items, query)
+  }
+}
+
+export const resolveSenderTokenDecorations = (value: string): SenderTokenDecoration[] => {
+  const decorations: SenderTokenDecoration[] = []
+
+  for (const match of value.matchAll(TOKEN_MATCHER)) {
+    const leadingWhitespace = match[1] ?? ''
+    const trigger = match[2] as SenderCompletionTrigger | undefined
+    const token = match[3] ?? ''
+    const matchIndex = match.index
+
+    if (trigger == null || matchIndex == null || token === '') {
+      continue
+    }
+
+    const start = matchIndex + leadingWhitespace.length
+    const end = start + 1 + token.length
+
+    decorations.push({
+      start,
+      end,
+      className: getDecorationClassName(trigger)
+    })
+  }
+
+  return decorations
+}

package/src/components/chat/sender/@utils/sender-constants.ts

@@ -0,0 +1,18 @@
+import type { ChatEffort } from '#~/hooks/chat/use-chat-effort'
+import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
+
+export const effortIconMap: Record<ChatEffort, string> = {
+  default: 'auto_awesome',
+  low: 'signal_cellular_alt_1_bar',
+  medium: 'signal_cellular_alt_2_bar',
+  high: 'signal_cellular_alt',
+  max: 'bolt'
+}
+
+export const permissionModeIconMap: Record<PermissionMode, string> = {
+  default: 'tune',
+  acceptEdits: 'edit_note',
+  plan: 'checklist',
+  dontAsk: 'verified_user',
+  bypassPermissions: 'shield_lock'
+}

package/src/components/chat/sender/@utils/sender-utils.ts

@@ -0,0 +1,45 @@
+const CHAT_HISTORY_STORAGE_KEY = 'vf_chat_history'
+
+const reportHistoryError = (action: 'read' | 'write', error: unknown) => {
+  console.error(`Failed to ${action} chat history`, error)
+}
+
+export const isActivationKey = (key: string) => key === 'Enter' || key === ' '
+
+export const readFileAsDataUrl = (file: File) => {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      resolve(typeof reader.result === 'string' ? reader.result : '')
+    }
+    reader.onerror = () => {
+      reject(new Error('read_failed'))
+    }
+    reader.readAsDataURL(file)
+  })
+}
+
+export const loadChatHistory = () => {
+  try {
+    const rawHistory = localStorage.getItem(CHAT_HISTORY_STORAGE_KEY)
+    const parsedHistory = rawHistory != null ? JSON.parse(rawHistory) : []
+    if (!Array.isArray(parsedHistory)) {
+      return []
+    }
+
+    return parsedHistory.filter((item): item is string => typeof item === 'string')
+  } catch (error) {
+    reportHistoryError('read', error)
+    return []
+  }
+}
+
+export const saveChatHistoryEntry = (input: string) => {
+  try {
+    const history = loadChatHistory()
+    const nextHistory = [input, ...history.filter(entry => entry !== input)].slice(0, 50)
+    localStorage.setItem(CHAT_HISTORY_STORAGE_KEY, JSON.stringify(nextHistory))
+  } catch (error) {
+    reportHistoryError('write', error)
+  }
+}