@vibe-forge/client 0.5.0 → 0.6.0

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 { AdapterBuiltinModel, 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 {
@@ -71,87 +79,69 @@ export function useChatModels({
 
   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 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 })
-      }
-    }
-    return list
-  }, [modelServiceEntries])
-
-  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 || builtinModelSet.size > 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
-    // 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])
+    return resolveChatModelSelection({
+      value: model,
+      builtinModels: activeBuiltinModelValues,
+      serviceModels: availableServiceModels,
+      defaultModelService
+    })
+  }, [activeBuiltinModelValues, availableServiceModels, defaultModelService])
   const resolvedDefaultModel = useMemo(() => {
-    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]
-    }
-    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
+    return resolveDefaultChatModelSelection({
+      defaultModel,
+      defaultModelService,
+      builtinModels: activeBuiltinModelValues,
+      serviceModels: availableServiceModels
+    })
   }, [
-    activeBuiltinModels,
     activeBuiltinModelValues,
-    availableModelSet,
-    availableModelValues,
-    builtinModelSet,
+    availableServiceModels,
     defaultModel,
-    defaultModelService,
-    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) {
-        const isValid = availableModelSet.has(prev) || builtinModelSet.has(prev)
-        if (isValid) return prev
-      }
-      return resolvedDefaultModel
-    })
-  }, [availableModelSet, builtinModelSet, hasAvailableModels, resolvedDefaultModel, selectedAdapter])
+    setSelectedModel((prev) => resolveSelectableModel(prev))
+  }, [hasAvailableModels, resolveSelectableModel, selectedAdapter])
 
   useEffect(() => {
     try {
@@ -191,7 +181,8 @@ export function useChatModels({
       return {
         value: params.value,
         label,
-        searchText
+        searchText,
+        displayLabel: params.title
       }
     }
 
@@ -212,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,
@@ -241,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
@@ -255,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,
@@ -290,18 +292,21 @@ export function useChatModels({
             <div className='model-group-title'>{adapterTitle}</div>
           </div>
         ),
-        options: models.map(m => buildOption({
-          value: m.value,
-          title: m.title,
-          description: m.description
-        }))
+        options: models.map(m =>
+          buildOption({
+            value: m.value,
+            title: m.title,
+            description: m.description
+          })
+        )
       })
     }
 
     return [...groups, ...serviceGroups]
   }, [
     activeBuiltinModels,
-    availableModelSet,
+    availableServiceModels,
+    defaultModelService,
     modelToService,
     mergedModelServices,
     modelServiceEntries,
@@ -312,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,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { useSWRConfig } from 'swr'
 
-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'
@@ -32,10 +32,10 @@ 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) {
@@ -55,18 +55,20 @@ 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,
@@ -81,10 +83,10 @@ 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) {
@@ -104,19 +106,20 @@ 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,

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

@@ -1,5 +1,6 @@
 import { App } from 'antd'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useSWRConfig } from 'swr'
 
 import { getSessionMessages } from '#~/api.js'
@@ -47,20 +48,32 @@ export function useChatSessionMessages({
   adapter?: string
   setInteractionRequest: (value: { id: string; payload: AskUserQuestionParams } | null) => void
 }) {
-  const { message } = App.useApp()
+  const { t } = useTranslation()
   const { mutate } = useSWRConfig()
   const [messages, setMessages] = useState<ChatMessage[]>([])
   const [sessionInfo, setSessionInfo] = useState<SessionInfo | null>(null)
   const [isReady, setIsReady] = useState(false)
+  const [connectionError, setConnectionError] = useState<string | null>(null)
+  const [retryCount, setRetryCount] = useState(0)
   const isInitialLoadRef = useRef<boolean>(true)
   const lastConnectedModelRef = useRef<string | undefined>(undefined)
   const lastConnectedPermissionModeRef = useRef<string | undefined>(undefined)
   const lastConnectedAdapterRef = useRef<string | undefined>(undefined)
+  const expectedCloseRef = useRef(false)
+
+  const retryConnection = useCallback(() => {
+    if (session?.id == null || session.id === '') return
+    expectedCloseRef.current = true
+    setConnectionError(null)
+    connectionManager.close(session.id)
+    setRetryCount((count) => count + 1)
+  }, [session?.id])
 
   useEffect(() => {
     setMessages([])
     setSessionInfo(null)
     setIsReady(false)
+    setConnectionError(null)
     setInteractionRequest(null)
     isInitialLoadRef.current = true
 
@@ -68,6 +81,7 @@ export function useChatSessionMessages({
       setIsReady(true)
       lastConnectedModelRef.current = undefined
       lastConnectedPermissionModeRef.current = undefined
+      lastConnectedAdapterRef.current = undefined
       return
     }
 
@@ -150,6 +164,8 @@ export function useChatSessionMessages({
       normalizedAdapter !== lastConnectedAdapterRef.current &&
       session?.status !== 'running'
     if (modelChanged || permissionModeChanged || adapterChanged) {
+      expectedCloseRef.current = true
+      setConnectionError(null)
       connectionManager.send(session.id, { type: 'terminate_session' })
       connectionManager.close(session.id)
     }
@@ -173,11 +189,13 @@ export function useChatSessionMessages({
 
       cleanup = connectionManager.connect(session.id, {
         onOpen() {
+          expectedCloseRef.current = false
+          setConnectionError(null)
         },
         onMessage(data: WSEvent) {
           if (isDisposed) return
           if (data.type === 'error') {
-            void message.error(data.message)
+            setConnectionError(data.message)
             return
           }
 
@@ -241,22 +259,44 @@ export function useChatSessionMessages({
             setInteractionRequest({ id: data.id, payload: data.payload })
           }
         },
+        onError() {
+          if (isDisposed) return
+          setConnectionError(t('chat.connectionError'))
+        },
         onClose() {
+          if (isDisposed) return
+          if (expectedCloseRef.current) {
+            expectedCloseRef.current = false
+            return
+          }
+          setConnectionError((current) => current ?? t('chat.connectionClosed'))
         }
       }, Object.keys(connectionParams).length > 0 ? connectionParams : undefined)
-    }, modelChanged ? 200 : 100)
+    }, (modelChanged || permissionModeChanged || adapterChanged) ? 200 : 100)
 
     return () => {
       isDisposed = true
       clearTimeout(timer)
       cleanup?.()
     }
-  }, [adapter, message, modelForQuery, mutate, permissionMode, session?.id, session?.status, setInteractionRequest])
+  }, [
+    adapter,
+    modelForQuery,
+    mutate,
+    permissionMode,
+    retryCount,
+    session?.id,
+    session?.status,
+    setInteractionRequest,
+    t
+  ])
 
   return {
     messages,
     setMessages,
     sessionInfo,
-    isReady
+    isReady,
+    connectionError,
+    retryConnection
   }
 }

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

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { Session } from '@vibe-forge/core'
@@ -27,20 +28,60 @@ export function useChatSession({
   const { interactionRequest, setInteractionRequest, handleInteractionResponse } = useChatInteraction({
     sessionId: session?.id
   })
-  const { messages, setMessages, sessionInfo, isReady } = useChatSessionMessages({
+  const { messages, setMessages, sessionInfo, isReady, connectionError, retryConnection } = useChatSessionMessages({
     session,
     modelForQuery: selectedModelWithService,
     permissionMode,
     adapter: selectedAdapter,
     setInteractionRequest
   })
+  const lastObservedSessionRef = useRef<Pick<Session, 'id' | 'model' | 'permissionMode' | 'adapter'> | null>(null)
   const isThinking = session?.status === 'running'
 
+  useEffect(() => {
+    if (session?.id == null || session.id === '') {
+      lastObservedSessionRef.current = null
+      return
+    }
+
+    const previous = lastObservedSessionRef.current
+    const sessionChanged = previous?.id !== session.id
+
+    if (sessionChanged || previous?.model !== session.model) {
+      setSelectedModel(session.model)
+    }
+
+    if (sessionChanged || previous?.permissionMode !== session.permissionMode) {
+      setPermissionMode(session.permissionMode)
+    }
+
+    if (sessionChanged || previous?.adapter !== session.adapter) {
+      setSelectedAdapter(session.adapter)
+    }
+
+    lastObservedSessionRef.current = {
+      id: session.id,
+      model: session.model,
+      permissionMode: session.permissionMode,
+      adapter: session.adapter
+    }
+  }, [
+    session?.adapter,
+    session?.id,
+    session?.model,
+    session?.permissionMode,
+    setPermissionMode,
+    setSelectedAdapter,
+    setSelectedModel
+  ])
+
   return {
     messages,
     sessionInfo,
     interactionRequest,
     isReady,
+    connectionError,
+    retryConnection,
     isThinking,
     activeView,
     setActiveView,

package/src/hooks/use-app-preferences.ts

@@ -0,0 +1,41 @@
+import { theme } from 'antd'
+import { useAtomValue } from 'jotai'
+import { useEffect, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+
+import type { ConfigResponse } from '@vibe-forge/core'
+
+import { getConfig } from '#~/api'
+import { themeAtom } from '#~/store'
+
+export function useAppPreferences() {
+  const { i18n } = useTranslation()
+  const themeMode = useAtomValue(themeAtom)
+  const { data: configRes } = useSWR<ConfigResponse>('/api/config', getConfig)
+  const interfaceLanguage = configRes?.sources?.merged?.general?.interfaceLanguage
+  const isDarkMode = themeMode === 'dark'
+    || (themeMode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', isDarkMode)
+  }, [isDarkMode])
+
+  useEffect(() => {
+    if (interfaceLanguage && i18n.language !== interfaceLanguage) {
+      void i18n.changeLanguage(interfaceLanguage)
+    }
+  }, [i18n, interfaceLanguage])
+
+  const themeConfig = useMemo(() => ({
+    algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
+    token: {
+      colorPrimary: isDarkMode ? '#3b82f6' : '#000000'
+    }
+  }), [isDarkMode])
+
+  return {
+    isDarkMode,
+    themeConfig
+  }
+}