@vibe-forge/client 0.4.0 → 0.6.0

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

@@ -0,0 +1,93 @@
+import { type ReactNode, createElement } from 'react'
+import { useEffect, useMemo, useState } from 'react'
+import useSWR from 'swr'
+
+import { getConfig } from '#~/api.js'
+import { getAdapterDisplay } from '#~/resources/adapters.js'
+import type { ConfigResponse } from '@vibe-forge/core'
+
+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 resolveAdapter = (value?: string) => {
+    const normalizedValue = typeof value === 'string' ? value.trim() : ''
+    const keys = Object.keys(mergedAdapters)
+    if (keys.length === 0) return undefined
+    if (normalizedValue !== '' && keys.includes(normalizedValue)) return normalizedValue
+    if (defaultAdapter && keys.includes(defaultAdapter as string)) return defaultAdapter as string
+    return keys[0]
+  }
+
+  const updateSelectedAdapter = (value?: string) => {
+    setSelectedAdapter((prev) => {
+      const nextValue = resolveAdapter(value)
+      return nextValue === prev ? prev : nextValue
+    })
+  }
+
+  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) => resolveAdapter(prev))
+  }, [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: updateSelectedAdapter,
+    adapterOptions
+  }
+}

package/src/hooks/chat/use-chat-models.tsx

@@ -2,13 +2,21 @@ 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.js'
+import type { AdapterBuiltinModel, ConfigResponse, ModelServiceConfig, RecommendedModelConfig } from '@vibe-forge/core'
+import {
+  buildServiceModelSelector,
+  listServiceModels,
+  resolveChatModelSelection,
+  resolveDefaultChatModelSelection,
+  resolveServiceModelSelector
+} from './model-selector'
 
 export interface ModelSelectOption {
   value: string
   label: React.ReactNode
   searchText: string
+  displayLabel: string
 }
 
 export interface ModelSelectGroup {
@@ -16,7 +24,11 @@ export interface ModelSelectGroup {
   options: ModelSelectOption[]
 }
 
-export function useChatModels() {
+export function useChatModels({
+  selectedAdapter
+}: {
+  selectedAdapter?: string
+} = {}) {
   const { t } = useTranslation()
   const [selectedModel, setSelectedModel] = useState<string | undefined>(() => {
     try {
@@ -41,76 +53,95 @@ export function useChatModels() {
     ))
   }, [configRes?.sources?.merged?.general?.recommendedModels])
 
-  const modelServiceEntries = useMemo(() => Object.entries(mergedModelServices), [mergedModelServices])
+  const adapterBuiltinModels = useMemo(() => {
+    const raw = configRes?.sources?.merged?.adapterBuiltinModels
+    return (raw ?? {}) as Record<string, AdapterBuiltinModel[]>
+  }, [configRes?.sources?.merged?.adapterBuiltinModels])
 
-  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 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) {
-        list.push({ model, serviceKey, serviceTitle })
-      }
+  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 list
-  }, [modelServiceEntries])
+    return set
+  }, [activeBuiltinModels])
+
+  const modelServiceEntries = useMemo(() => Object.entries(mergedModelServices), [mergedModelServices])
 
-  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 availableServiceModels = useMemo(() => listServiceModels(mergedModelServices), [mergedModelServices])
+  const hasAvailableModels = availableServiceModels.length > 0 || builtinModelSet.size > 0
   const modelToService = useMemo(() => {
     const map = new Map<string, { key: string; title: string }>()
-    for (const entry of availableModels) {
+    for (const entry of availableServiceModels) {
+      const serviceValue = mergedModelServices[entry.serviceKey]
+      const serviceTitle = serviceValue?.title?.trim() !== '' ? serviceValue?.title ?? '' : entry.serviceKey
       if (!map.has(entry.model)) {
-        map.set(entry.model, { key: entry.serviceKey, title: entry.serviceTitle })
+        map.set(entry.model, { key: entry.serviceKey, title: serviceTitle })
       }
     }
     return map
-  }, [availableModels])
+  }, [availableServiceModels, mergedModelServices])
   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
-    if (normalizedModel.includes(',')) return normalizedModel
-    const resolvedService = modelToService.get(normalizedModel)?.key ?? defaultModelService
-    return resolvedService ? `${resolvedService},${normalizedModel}` : normalizedModel
-  }, [defaultModelService, modelToService])
+    return resolveChatModelSelection({
+      value: model,
+      builtinModels: activeBuiltinModelValues,
+      serviceModels: availableServiceModels,
+      defaultModelService
+    })
+  }, [activeBuiltinModelValues, availableServiceModels, defaultModelService])
   const resolvedDefaultModel = useMemo(() => {
-    if (!hasAvailableModels) return undefined
-    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]
+    return resolveDefaultChatModelSelection({
+      defaultModel,
+      defaultModelService,
+      builtinModels: activeBuiltinModelValues,
+      serviceModels: availableServiceModels
+    })
   }, [
-    availableModelSet,
-    availableModelValues,
+    activeBuiltinModelValues,
+    availableServiceModels,
     defaultModel,
-    defaultModelService,
-    hasAvailableModels,
-    mergedModelServices
+    defaultModelService
   ])
   const selectedModelWithService = useMemo(() => (
-    formatModelWithService(selectedModel)
-  ), [formatModelWithService, selectedModel])
+    formatModelWithService(selectedModel) ?? resolvedDefaultModel
+  ), [formatModelWithService, resolvedDefaultModel, selectedModel])
+
+  const resolveSelectableModel = useCallback((value?: string) => {
+    return resolveChatModelSelection({
+      value,
+      builtinModels: activeBuiltinModelValues,
+      serviceModels: availableServiceModels,
+      defaultModelService
+    }) ?? resolvedDefaultModel
+  }, [activeBuiltinModelValues, availableServiceModels, defaultModelService, resolvedDefaultModel])
+
+  const updateSelectedModel = useCallback((value?: string) => {
+    setSelectedModel((prev) => {
+      const nextValue = resolveSelectableModel(value)
+      return nextValue === prev ? prev : nextValue
+    })
+  }, [resolveSelectableModel])
 
   useEffect(() => {
     if (!hasAvailableModels) {
       setSelectedModel(undefined)
       return
     }
-    setSelectedModel((prev) => {
-      if (prev != null && availableModelSet.has(prev)) return prev
-      return resolvedDefaultModel
-    })
-  }, [availableModelSet, hasAvailableModels, resolvedDefaultModel])
+    setSelectedModel((prev) => resolveSelectableModel(prev))
+  }, [hasAvailableModels, resolveSelectableModel, selectedAdapter])
 
   useEffect(() => {
     try {
@@ -150,7 +181,8 @@ export function useChatModels() {
       return {
         value: params.value,
         label,
-        searchText
+        searchText,
+        displayLabel: params.title
       }
     }
 
@@ -171,14 +203,16 @@ export function useChatModels() {
         const serviceTitle = service?.title?.trim() !== '' ? service?.title ?? '' : serviceKey
         const groupTitle = serviceTitle?.trim() !== '' ? serviceTitle : serviceKey
         const serviceDescription = service?.description
-        const models = Array.isArray(service?.models) ? service?.models.filter(item => typeof item === 'string') : []
+        const models = Array.isArray(service?.models)
+          ? service.models.filter((item): item is string => typeof item === 'string')
+          : []
         if (models.length === 0) return null
-        const options = models.map((model) => {
+        const options = models.map((model: string) => {
           const alias = resolveFirstAlias(service?.modelsAlias as Record<string, string[]> | undefined, model)
           const title = alias ?? model
           const description = alias ? model : serviceTitle
           return buildOption({
-            value: model,
+            value: buildServiceModelSelector(serviceKey, model),
             title,
             description,
             serviceKey,
@@ -200,7 +234,11 @@ export function useChatModels() {
     const recommendedOptions = recommendedModels
       .filter((item) => {
         if (item.placement && item.placement !== 'modelSelector') return false
-        return availableModelSet.has(item.model)
+        return resolveServiceModelSelector({
+          value: item.service ? buildServiceModelSelector(item.service, item.model) : item.model,
+          serviceModels: availableServiceModels,
+          preferredServiceKey: item.service ?? defaultModelService
+        }) != null
       })
       .map((item) => {
         const serviceInfo = item.service ? mergedModelServices[item.service] : undefined
@@ -214,8 +252,13 @@ export function useChatModels() {
         const description = item.description?.trim() !== ''
           ? item.description
           : serviceTitle
+        const value = resolveServiceModelSelector({
+          value: item.service ? buildServiceModelSelector(item.service, item.model) : item.model,
+          serviceModels: availableServiceModels,
+          preferredServiceKey: item.service ?? defaultModelService
+        }) ?? item.model
         return buildOption({
-          value: item.model,
+          value,
           title,
           description,
           serviceKey: item.service ?? modelToService.get(item.model)?.key,
@@ -235,9 +278,35 @@ 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,
+    activeBuiltinModels,
+    availableServiceModels,
+    defaultModelService,
     modelToService,
     mergedModelServices,
     modelServiceEntries,
@@ -248,7 +317,7 @@ export function useChatModels() {
   return {
     selectedModel,
     selectedModelWithService,
-    setSelectedModel,
+    setSelectedModel: updateSelectedModel,
     modelOptions,
     hasAvailableModels
   }

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

@@ -5,22 +5,26 @@ export type PermissionMode = 'default' | 'acceptEdits' | 'plan' | 'dontAsk' | 'b
 
 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 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')
 
+  const updatePermissionMode = (value?: string) => {
+    setPermissionMode(isPermissionMode(value ?? '') ? value : 'default')
+  }
+
   useEffect(() => {
     try {
       const raw = localStorage.getItem(PERMISSION_MODE_STORAGE_KEY)
       if (raw && isPermissionMode(raw)) {
-        setPermissionMode(raw)
+        updatePermissionMode(raw)
       }
     } catch {}
   }, [])
@@ -31,17 +35,17 @@ export function useChatPermissionMode() {
     } catch {}
   }, [permissionMode])
 
-  const permissionModeOptions = useMemo<Array<{ value: PermissionMode; label: ReactNode }>>(() => ([
+  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,
+    setPermissionMode: updatePermissionMode,
     permissionModeOptions
   }
 }

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

@@ -4,9 +4,9 @@ import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { useSWRConfig } from 'swr'
 
-import type { ChatMessageContent, Session } from '@vibe-forge/core'
-import { createSession } from '#~/api.js'
+import { createSession, getApiErrorMessage } 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({
@@ -14,12 +14,14 @@ export function useChatSessionActions({
   modelForQuery,
   hasAvailableModels,
   permissionMode,
+  adapter,
   onClearMessages
 }: {
   session?: Session
   modelForQuery?: string
   hasAvailableModels: boolean
   permissionMode: PermissionMode
+  adapter?: string
   onClearMessages: () => void
 }) {
   const { message } = App.useApp()
@@ -30,17 +32,18 @@ export function useChatSessionActions({
   const isThinking = isCreating || session?.status === 'running'
 
   const send = useCallback(async (text: string) => {
-    if (text.trim() === '' || isThinking) return
+    if (text.trim() === '' || isThinking) return false
     if (!hasAvailableModels) {
       void message.warning(t('chat.modelConfigRequired'))
-      return
+      return false
     }
 
     if (!session?.id) {
       setIsCreating(true)
       try {
         const { session: newSession } = await createSession(undefined, text.trim(), undefined, modelForQuery, {
-          permissionMode
+          permissionMode,
+          adapter
         })
 
         await mutate('/api/sessions', (prev: { sessions: Session[] } | undefined) => {
@@ -52,19 +55,22 @@ export function useChatSessionActions({
         }, false)
 
         void navigate(`/session/${newSession.id}`)
+        return true
       } catch (err) {
         console.error(err)
         setIsCreating(false)
-        void message.error('Failed to create session')
+        void message.error(getApiErrorMessage(err, 'Failed to create session'))
+        return false
       }
-      return
     }
 
     connectionManager.send(session.id, {
       type: 'user_message',
       text: text.trim()
     })
+    return true
   }, [
+    adapter,
     hasAvailableModels,
     isThinking,
     message,
@@ -77,17 +83,18 @@ export function useChatSessionActions({
   ])
 
   const sendContent = useCallback(async (content: ChatMessageContent[]) => {
-    if (content.length === 0 || isThinking) return
+    if (content.length === 0 || isThinking) return false
     if (!hasAvailableModels) {
       void message.warning(t('chat.modelConfigRequired'))
-      return
+      return false
     }
 
     if (!session?.id) {
       setIsCreating(true)
       try {
         const { session: newSession } = await createSession(undefined, undefined, content, modelForQuery, {
-          permissionMode
+          permissionMode,
+          adapter
         })
 
         await mutate('/api/sessions', (prev: { sessions: Session[] } | undefined) => {
@@ -99,20 +106,22 @@ export function useChatSessionActions({
         }, false)
 
         void navigate(`/session/${newSession.id}`)
-        setIsCreating(false)
+        return true
       } catch (err) {
         console.error(err)
         setIsCreating(false)
-        void message.error('Failed to create session')
+        void message.error(getApiErrorMessage(err, 'Failed to create session'))
+        return false
       }
-      return
     }
 
     connectionManager.send(session.id, {
       type: 'user_message',
       content
     })
+    return true
   }, [
+    adapter,
     hasAvailableModels,
     isThinking,
     message,