@vibe-forge/client 0.3.0 → 0.5.0

package/src/hooks/chat/use-chat-adapter.ts

@@ -0,0 +1,81 @@
+import { createElement, type ReactNode } from 'react'
+import { useEffect, useMemo, useState } from 'react'
+import useSWR from 'swr'
+
+import { getConfig } from '#~/api.js'
+import type { ConfigResponse } from '@vibe-forge/core'
+import { getAdapterDisplay } from '#~/resources/adapters.js'
+
+const ADAPTER_STORAGE_KEY = 'vf_chat_adapter'
+
+export function useChatAdapter() {
+  const [selectedAdapter, setSelectedAdapter] = useState<string | undefined>(() => {
+    try {
+      const raw = localStorage.getItem(ADAPTER_STORAGE_KEY)
+      return raw == null || raw.trim() === '' ? undefined : raw
+    } catch {
+      return undefined
+    }
+  })
+
+  const { data: configRes } = useSWR<ConfigResponse>('/api/config', getConfig)
+
+  const mergedAdapters = useMemo(() => {
+    return configRes?.sources?.merged?.adapters ?? {}
+  }, [configRes?.sources?.merged?.adapters])
+
+  const defaultAdapter = configRes?.sources?.merged?.general?.defaultAdapter
+
+  const adapterOptions = useMemo<Array<{ value: string; label: ReactNode }>>(() => {
+    const keys = Object.keys(mergedAdapters)
+    return keys.map((key) => {
+      const display = getAdapterDisplay(key)
+      return {
+        value: key,
+        label: createElement('span', { className: 'adapter-option' }, [
+          display.icon != null
+            ? createElement('img', {
+              key: 'icon',
+              className: 'adapter-option__icon',
+              src: display.icon,
+              alt: '',
+              'aria-hidden': true
+            })
+            : null,
+          createElement('span', { key: 'text', className: 'adapter-option__text' }, display.title)
+        ])
+      }
+    })
+  }, [mergedAdapters])
+
+  // Auto-select: use stored value if valid, else config default, else first available
+  useEffect(() => {
+    const keys = Object.keys(mergedAdapters)
+    if (keys.length === 0) {
+      setSelectedAdapter(undefined)
+      return
+    }
+    setSelectedAdapter((prev) => {
+      if (prev != null && keys.includes(prev)) return prev
+      if (defaultAdapter && keys.includes(defaultAdapter as string)) return defaultAdapter as string
+      return keys[0]
+    })
+  }, [defaultAdapter, mergedAdapters])
+
+  // Persist to localStorage
+  useEffect(() => {
+    try {
+      if (selectedAdapter == null || selectedAdapter.trim() === '') {
+        localStorage.removeItem(ADAPTER_STORAGE_KEY)
+      } else {
+        localStorage.setItem(ADAPTER_STORAGE_KEY, selectedAdapter)
+      }
+    } catch {}
+  }, [selectedAdapter])
+
+  return {
+    selectedAdapter,
+    setSelectedAdapter,
+    adapterOptions
+  }
+}

package/src/hooks/chat/use-chat-interaction.ts

@@ -0,0 +1,26 @@
+import { useCallback, useState } from 'react'
+
+import type { AskUserQuestionParams } from '@vibe-forge/core'
+import { connectionManager } from '#~/connectionManager.js'
+
+export function useChatInteraction({ sessionId }: { sessionId?: string }) {
+  const [interactionRequest, setInteractionRequest] = useState<{ id: string; payload: AskUserQuestionParams } | null>(
+    null
+  )
+
+  const handleInteractionResponse = useCallback((id: string, data: string | string[]) => {
+    if (!sessionId) return
+    connectionManager.send(sessionId, {
+      type: 'interaction_response',
+      id,
+      data
+    })
+    setInteractionRequest(null)
+  }, [sessionId])
+
+  return {
+    interactionRequest,
+    setInteractionRequest,
+    handleInteractionResponse
+  }
+}

package/src/{components/chat/useChatModels.tsx → hooks/chat/use-chat-models.tsx}

@@ -1,22 +1,26 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
-import type { ConfigResponse, ModelServiceConfig, RecommendedModelConfig } from '@vibe-forge/core'
-import { getConfig } from '../../api'
+import type { AdapterBuiltinModel, ConfigResponse, ModelServiceConfig, RecommendedModelConfig } from '@vibe-forge/core'
+import { getConfig } from '#~/api.js'
 
-interface ModelSelectOption {
+export interface ModelSelectOption {
   value: string
   label: React.ReactNode
   searchText: string
 }
 
-interface ModelSelectGroup {
+export interface ModelSelectGroup {
   label: React.ReactNode
   options: ModelSelectOption[]
 }
 
-export function useChatModels() {
+export function useChatModels({
+  selectedAdapter
+}: {
+  selectedAdapter?: string
+} = {}) {
   const { t } = useTranslation()
   const [selectedModel, setSelectedModel] = useState<string | undefined>(() => {
     try {
@@ -41,12 +45,38 @@ export function useChatModels() {
     ))
   }, [configRes?.sources?.merged?.general?.recommendedModels])
 
+  const adapterBuiltinModels = useMemo(() => {
+    const raw = configRes?.sources?.merged?.adapterBuiltinModels
+    return (raw ?? {}) as Record<string, AdapterBuiltinModel[]>
+  }, [configRes?.sources?.merged?.adapterBuiltinModels])
+
+  const activeBuiltinModels = useMemo(() => {
+    if (selectedAdapter && adapterBuiltinModels[selectedAdapter]) {
+      return { [selectedAdapter]: adapterBuiltinModels[selectedAdapter] }
+    }
+    return adapterBuiltinModels
+  }, [adapterBuiltinModels, selectedAdapter])
+
+  const activeBuiltinModelValues = useMemo(() => (
+    Object.values(activeBuiltinModels).flat().map(model => model.value)
+  ), [activeBuiltinModels])
+
+  const builtinModelSet = useMemo(() => {
+    const set = new Set<string>()
+    for (const models of Object.values(activeBuiltinModels)) {
+      for (const m of models) set.add(m.value)
+    }
+    return set
+  }, [activeBuiltinModels])
+
   const modelServiceEntries = useMemo(() => Object.entries(mergedModelServices), [mergedModelServices])
 
   const availableModels = useMemo(() => {
     const list: Array<{ model: string; serviceKey: string; serviceTitle: string }> = []
     for (const [serviceKey, serviceValue] of modelServiceEntries) {
-      const service = (serviceValue != null && typeof serviceValue === 'object') ? serviceValue as ModelServiceConfig : undefined
+      const service = (serviceValue != null && typeof serviceValue === 'object')
+        ? serviceValue as ModelServiceConfig
+        : undefined
       const serviceTitle = service?.title?.trim() !== '' ? service?.title ?? '' : serviceKey
       const models = Array.isArray(service?.models) ? service?.models.filter(item => typeof item === 'string') : []
       for (const model of models) {
@@ -59,19 +89,55 @@ export function useChatModels() {
   const availableModelValues = useMemo(() => availableModels.map(item => item.model), [availableModels])
   const availableModelKey = useMemo(() => availableModelValues.join('|'), [availableModelValues])
   const availableModelSet = useMemo(() => new Set(availableModelValues), [availableModelKey])
-  const hasAvailableModels = availableModelValues.length > 0
+  const hasAvailableModels = availableModelValues.length > 0 || builtinModelSet.size > 0
+  const modelToService = useMemo(() => {
+    const map = new Map<string, { key: string; title: string }>()
+    for (const entry of availableModels) {
+      if (!map.has(entry.model)) {
+        map.set(entry.model, { key: entry.serviceKey, title: entry.serviceTitle })
+      }
+    }
+    return map
+  }, [availableModels])
   const defaultModelService = configRes?.sources?.merged?.general?.defaultModelService
   const defaultModel = configRes?.sources?.merged?.general?.defaultModel
+  const formatModelWithService = useCallback((model: string | undefined) => {
+    const normalizedModel = typeof model === 'string' ? model.trim() : ''
+    if (normalizedModel === '') return undefined
+    // Builtin adapter models pass through as-is (no service prefix)
+    if (builtinModelSet.has(normalizedModel)) return normalizedModel
+    if (normalizedModel.includes(',')) return normalizedModel
+    const resolvedService = modelToService.get(normalizedModel)?.key ?? defaultModelService
+    return resolvedService ? `${resolvedService},${normalizedModel}` : normalizedModel
+  }, [builtinModelSet, defaultModelService, modelToService])
   const resolvedDefaultModel = useMemo(() => {
-    if (!hasAvailableModels) return undefined
+    if (defaultModel && builtinModelSet.has(defaultModel)) return defaultModel
+    if (activeBuiltinModelValues.length > 0) {
+      return activeBuiltinModelValues[0]
+    }
     if (defaultModel && availableModelSet.has(defaultModel)) return defaultModel
     if (defaultModelService && mergedModelServices[defaultModelService]) {
       const service = mergedModelServices[defaultModelService]
       const models = Array.isArray(service?.models) ? service?.models.filter(item => typeof item === 'string') : []
       if (models.length > 0) return models[0]
     }
-    return availableModelValues[0]
-  }, [availableModelSet, availableModelValues, defaultModel, defaultModelService, hasAvailableModels, mergedModelServices])
+    if (availableModelValues.length > 0) return availableModelValues[0]
+    // Fall back to first builtin model from the active adapter
+    const firstBuiltin = Object.values(activeBuiltinModels).flat()[0]
+    return firstBuiltin?.value
+  }, [
+    activeBuiltinModels,
+    activeBuiltinModelValues,
+    availableModelSet,
+    availableModelValues,
+    builtinModelSet,
+    defaultModel,
+    defaultModelService,
+    mergedModelServices
+  ])
+  const selectedModelWithService = useMemo(() => (
+    formatModelWithService(selectedModel)
+  ), [formatModelWithService, selectedModel])
 
   useEffect(() => {
     if (!hasAvailableModels) {
@@ -79,10 +145,13 @@ export function useChatModels() {
       return
     }
     setSelectedModel((prev) => {
-      if (prev != null && availableModelSet.has(prev)) return prev
+      if (prev != null) {
+        const isValid = availableModelSet.has(prev) || builtinModelSet.has(prev)
+        if (isValid) return prev
+      }
       return resolvedDefaultModel
     })
-  }, [availableModelSet, hasAvailableModels, resolvedDefaultModel])
+  }, [availableModelSet, builtinModelSet, hasAvailableModels, resolvedDefaultModel, selectedAdapter])
 
   useEffect(() => {
     try {
@@ -126,13 +195,6 @@ export function useChatModels() {
       }
     }
 
-    const modelToService = new Map<string, { key: string; title: string }>()
-    for (const entry of availableModels) {
-      if (!modelToService.has(entry.model)) {
-        modelToService.set(entry.model, { key: entry.serviceKey, title: entry.serviceTitle })
-      }
-    }
-
     const resolveFirstAlias = (modelsAlias: Record<string, string[]> | undefined, model: string) => {
       if (!modelsAlias) return undefined
       for (const [alias, aliasModels] of Object.entries(modelsAlias)) {
@@ -144,7 +206,9 @@ export function useChatModels() {
 
     const serviceGroups = modelServiceEntries
       .map(([serviceKey, serviceValue]) => {
-        const service = (serviceValue != null && typeof serviceValue === 'object') ? serviceValue as ModelServiceConfig : undefined
+        const service = (serviceValue != null && typeof serviceValue === 'object')
+          ? serviceValue as ModelServiceConfig
+          : undefined
         const serviceTitle = service?.title?.trim() !== '' ? service?.title ?? '' : serviceKey
         const groupTitle = serviceTitle?.trim() !== '' ? serviceTitle : serviceKey
         const serviceDescription = service?.description
@@ -212,11 +276,42 @@ export function useChatModels() {
         options: recommendedOptions
       })
     }
+
+    // Adapter builtin model groups (filtered to active adapter)
+    for (const [adapterKey, models] of Object.entries(activeBuiltinModels)) {
+      if (!Array.isArray(models) || models.length === 0) continue
+      const adapterTitle = t('chat.modelGroupBuiltin', {
+        adapter: adapterKey,
+        defaultValue: `${adapterKey} (Default)`
+      })
+      groups.push({
+        label: (
+          <div className='model-group-label'>
+            <div className='model-group-title'>{adapterTitle}</div>
+          </div>
+        ),
+        options: models.map(m => buildOption({
+          value: m.value,
+          title: m.title,
+          description: m.description
+        }))
+      })
+    }
+
     return [...groups, ...serviceGroups]
-  }, [availableModelSet, availableModels, mergedModelServices, modelServiceEntries, recommendedModels, t])
+  }, [
+    activeBuiltinModels,
+    availableModelSet,
+    modelToService,
+    mergedModelServices,
+    modelServiceEntries,
+    recommendedModels,
+    t
+  ])
 
   return {
     selectedModel,
+    selectedModelWithService,
     setSelectedModel,
     modelOptions,
     hasAvailableModels

package/src/hooks/chat/use-chat-permission-mode.ts

@@ -0,0 +1,47 @@
+import { useEffect, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+
+export type PermissionMode = 'default' | 'acceptEdits' | 'plan' | 'dontAsk' | 'bypassPermissions'
+
+const PERMISSION_MODE_STORAGE_KEY = 'vf_chat_permission_mode'
+
+const isPermissionMode = (value: string): value is PermissionMode => {
+  return value === 'default'
+    || value === 'acceptEdits'
+    || value === 'plan'
+    || value === 'dontAsk'
+    || value === 'bypassPermissions'
+}
+
+export function useChatPermissionMode() {
+  const [permissionMode, setPermissionMode] = useState<PermissionMode>('default')
+
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem(PERMISSION_MODE_STORAGE_KEY)
+      if (raw && isPermissionMode(raw)) {
+        setPermissionMode(raw)
+      }
+    } catch {}
+  }, [])
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(PERMISSION_MODE_STORAGE_KEY, permissionMode)
+    } catch {}
+  }, [permissionMode])
+
+  const permissionModeOptions = useMemo<Array<{ value: PermissionMode; label: ReactNode }>>(() => ([
+    { value: 'default', label: '默认' },
+    { value: 'acceptEdits', label: '接受编辑' },
+    { value: 'plan', label: '计划' },
+    { value: 'dontAsk', label: '不询问' },
+    { value: 'bypassPermissions', label: '跳过权限' }
+  ]), [])
+
+  return {
+    permissionMode,
+    setPermissionMode,
+    permissionModeOptions
+  }
+}

package/src/hooks/chat/use-chat-scroll.ts

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+const SCROLL_THRESHOLD = 80
+
+export function useChatScroll({ messagesLength }: { messagesLength: number }) {
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const messagesContainerRef = useRef<HTMLDivElement>(null)
+  const messagesContentRef = useRef<HTMLDivElement>(null)
+  const [showScrollBottom, setShowScrollBottom] = useState(false)
+
+  const updateScrollState = useCallback(() => {
+    const container = messagesContainerRef.current
+    if (!container) return
+    const distanceToBottom = container.scrollHeight - (container.scrollTop + container.clientHeight)
+    setShowScrollBottom(distanceToBottom > SCROLL_THRESHOLD)
+  }, [])
+
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth') => {
+    setTimeout(() => {
+      if (messagesContainerRef.current) {
+        messagesContainerRef.current.scrollTo({
+          top: messagesContainerRef.current.scrollHeight,
+          behavior
+        })
+      }
+    }, 50)
+  }, [])
+
+  useEffect(() => {
+    const container = messagesContainerRef.current
+    if (!container) return
+    updateScrollState()
+    const handleScroll = () => updateScrollState()
+    container.addEventListener('scroll', handleScroll, { passive: true })
+    return () => {
+      container.removeEventListener('scroll', handleScroll)
+    }
+  }, [updateScrollState])
+
+  useEffect(() => {
+    updateScrollState()
+  }, [updateScrollState, messagesLength])
+
+  return {
+    messagesEndRef,
+    messagesContainerRef,
+    messagesContentRef,
+    showScrollBottom,
+    scrollToBottom
+  }
+}

package/src/hooks/chat/use-chat-session-actions.ts

@@ -0,0 +1,153 @@
+import { App } from 'antd'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { useSWRConfig } from 'swr'
+
+import { createSession } from '#~/api.js'
+import { connectionManager } from '#~/connectionManager.js'
+import type { ChatMessageContent, Session } from '@vibe-forge/core'
+import type { PermissionMode } from './use-chat-permission-mode'
+
+export function useChatSessionActions({
+  session,
+  modelForQuery,
+  hasAvailableModels,
+  permissionMode,
+  adapter,
+  onClearMessages
+}: {
+  session?: Session
+  modelForQuery?: string
+  hasAvailableModels: boolean
+  permissionMode: PermissionMode
+  adapter?: string
+  onClearMessages: () => void
+}) {
+  const { message } = App.useApp()
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { mutate } = useSWRConfig()
+  const [isCreating, setIsCreating] = useState(false)
+  const isThinking = isCreating || session?.status === 'running'
+
+  const send = useCallback(async (text: string) => {
+    if (text.trim() === '' || isThinking) return
+    if (!hasAvailableModels) {
+      void message.warning(t('chat.modelConfigRequired'))
+      return
+    }
+
+    if (!session?.id) {
+      setIsCreating(true)
+      try {
+        const { session: newSession } = await createSession(undefined, text.trim(), undefined, modelForQuery, {
+          permissionMode,
+          adapter
+        })
+
+        await mutate('/api/sessions', (prev: { sessions: Session[] } | undefined) => {
+          if (!prev?.sessions) return { sessions: [newSession] }
+          return {
+            ...prev,
+            sessions: [newSession, ...prev.sessions]
+          }
+        }, false)
+
+        void navigate(`/session/${newSession.id}`)
+      } catch (err) {
+        console.error(err)
+        setIsCreating(false)
+        void message.error('Failed to create session')
+      }
+      return
+    }
+
+    connectionManager.send(session.id, {
+      type: 'user_message',
+      text: text.trim()
+    })
+  }, [
+    adapter,
+    hasAvailableModels,
+    isThinking,
+    message,
+    mutate,
+    navigate,
+    permissionMode,
+    modelForQuery,
+    session?.id,
+    t
+  ])
+
+  const sendContent = useCallback(async (content: ChatMessageContent[]) => {
+    if (content.length === 0 || isThinking) return
+    if (!hasAvailableModels) {
+      void message.warning(t('chat.modelConfigRequired'))
+      return
+    }
+
+    if (!session?.id) {
+      setIsCreating(true)
+      try {
+        const { session: newSession } = await createSession(undefined, undefined, content, modelForQuery, {
+          permissionMode,
+          adapter
+        })
+
+        await mutate('/api/sessions', (prev: { sessions: Session[] } | undefined) => {
+          if (!prev?.sessions) return { sessions: [newSession] }
+          return {
+            ...prev,
+            sessions: [newSession, ...prev.sessions]
+          }
+        }, false)
+
+        void navigate(`/session/${newSession.id}`)
+        setIsCreating(false)
+      } catch (err) {
+        console.error(err)
+        setIsCreating(false)
+        void message.error('Failed to create session')
+      }
+      return
+    }
+
+    connectionManager.send(session.id, {
+      type: 'user_message',
+      content
+    })
+  }, [
+    adapter,
+    hasAvailableModels,
+    isThinking,
+    message,
+    mutate,
+    navigate,
+    permissionMode,
+    modelForQuery,
+    session?.id,
+    t
+  ])
+
+  const interrupt = useCallback(() => {
+    if (!session?.id || isThinking === false) return
+    connectionManager.send(session.id, {
+      type: 'interrupt'
+    })
+  }, [isThinking, session?.id])
+
+  const clearMessages = useCallback(() => {
+    onClearMessages()
+    void message.success('Messages cleared')
+  }, [message, onClearMessages])
+
+  return {
+    isCreating,
+    isThinking,
+    send,
+    sendContent,
+    interrupt,
+    clearMessages
+  }
+}