@lobehub/chat 1.108.1 → 1.109.0

package/src/store/aiInfra/slices/aiProvider/action.ts

@@ -2,12 +2,11 @@ import { uniqBy } from 'lodash-es';
 import { SWRResponse, mutate } from 'swr';
 import { StateCreator } from 'zustand/vanilla';
 
-import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
 import { isDeprecatedEdition, isDesktop, isUsePgliteDB } from '@/const/version';
 import { useClientDataSWR } from '@/libs/swr';
 import { aiProviderService } from '@/services/aiProvider';
 import { AiInfraStore } from '@/store/aiInfra/store';
-import { AIImageModelCard, ModelAbilities } from '@/types/aiModel';
+import { AIImageModelCard, LobeDefaultAiModelListItem, ModelAbilities } from '@/types/aiModel';
 import {
   AiProviderDetailItem,
   AiProviderListItem,
@@ -21,12 +20,37 @@ import {
 } from '@/types/aiProvider';
 import { getModelPropertyWithFallback } from '@/utils/getFallbackModelProperty';
 
+/**
+ * Get models by provider ID and type, with proper formatting and deduplication
+ */
+export const getModelListByType = (enabledAiModels: any[], providerId: string, type: string) => {
+  const models = enabledAiModels
+    .filter((model) => model.providerId === providerId && model.type === type)
+    .map((model) => ({
+      abilities: (model.abilities || {}) as ModelAbilities,
+      contextWindowTokens: model.contextWindowTokens,
+      displayName: model.displayName ?? '',
+      id: model.id,
+      ...(model.type === 'image' && {
+        parameters:
+          (model as AIImageModelCard).parameters ||
+          getModelPropertyWithFallback(model.id, 'parameters'),
+      }),
+    }));
+
+  return uniqBy(models, 'id');
+};
+
 enum AiProviderSwrKey {
   fetchAiProviderItem = 'FETCH_AI_PROVIDER_ITEM',
   fetchAiProviderList = 'FETCH_AI_PROVIDER',
   fetchAiProviderRuntimeState = 'FETCH_AI_PROVIDER_RUNTIME_STATE',
 }
 
+type AiProviderRuntimeStateWithBuiltinModels = AiProviderRuntimeState & {
+  builtinAiModelList: LobeDefaultAiModelListItem[];
+};
+
 export interface AiProviderAction {
   createNewAiProvider: (params: CreateAiProviderParams) => Promise<void>;
   deleteAiProvider: (id: string) => Promise<void>;
@@ -49,7 +73,7 @@ export interface AiProviderAction {
    */
   useFetchAiProviderRuntimeState: (
     isLoginOnInit: boolean | undefined,
-  ) => SWRResponse<AiProviderRuntimeState | undefined>;
+  ) => SWRResponse<AiProviderRuntimeStateWithBuiltinModels | undefined>;
 }
 
 export const createAiProviderSlice: StateCreator<
@@ -171,27 +195,35 @@ export const createAiProviderSlice: StateCreator<
     ),
 
   useFetchAiProviderRuntimeState: (isLogin) =>
-    useClientDataSWR<AiProviderRuntimeState | undefined>(
+    useClientDataSWR<AiProviderRuntimeStateWithBuiltinModels | undefined>(
       !isDeprecatedEdition ? [AiProviderSwrKey.fetchAiProviderRuntimeState, isLogin] : null,
       async ([, isLogin]) => {
-        if (isLogin) return aiProviderService.getAiProviderRuntimeState();
+        const [{ LOBE_DEFAULT_MODEL_LIST: builtinAiModelList }, { DEFAULT_MODEL_PROVIDER_LIST }] =
+          await Promise.all([import('@/config/aiModels'), import('@/config/modelProviders')]);
+
+        if (isLogin) {
+          const data = await aiProviderService.getAiProviderRuntimeState();
+          return {
+            ...data,
+            builtinAiModelList,
+          };
+        }
 
-        const { LOBE_DEFAULT_MODEL_LIST } = await import('@/config/aiModels');
         const enabledAiProviders: EnabledProvider[] = DEFAULT_MODEL_PROVIDER_LIST.filter(
           (provider) => provider.enabled,
         ).map((item) => ({ id: item.id, name: item.name, source: 'builtin' }));
-        const allModels = LOBE_DEFAULT_MODEL_LIST;
         return {
-          enabledAiModels: allModels.filter((m) => m.enabled),
+          builtinAiModelList,
+          enabledAiModels: builtinAiModelList.filter((m) => m.enabled),
           enabledAiProviders: enabledAiProviders,
           enabledChatAiProviders: enabledAiProviders.filter((provider) => {
-            return allModels.some(
+            return builtinAiModelList.some(
               (model) => model.providerId === provider.id && model.type === 'chat',
             );
           }),
           enabledImageAiProviders: enabledAiProviders
             .filter((provider) => {
-              return allModels.some(
+              return builtinAiModelList.some(
                 (model) => model.providerId === provider.id && model.type === 'image',
               );
             })
@@ -201,46 +233,25 @@ export const createAiProviderSlice: StateCreator<
       },
       {
         focusThrottleInterval: isDesktop || isUsePgliteDB ? 100 : undefined,
-        onSuccess: async (data) => {
+        onSuccess: (data) => {
           if (!data) return;
 
-          const { LOBE_DEFAULT_MODEL_LIST } = await import('@/config/aiModels');
-
-          const getModelListByType = (providerId: string, type: string) => {
-            const models = data.enabledAiModels
-              .filter((model) => model.providerId === providerId && model.type === type)
-              .map((model) => ({
-                abilities: (model.abilities || {}) as ModelAbilities,
-                contextWindowTokens: model.contextWindowTokens,
-                displayName: model.displayName ?? '',
-                id: model.id,
-                ...(model.type === 'image' && {
-                  parameters:
-                    (model as AIImageModelCard).parameters ||
-                    getModelPropertyWithFallback(model.id, 'parameters'),
-                }),
-              }));
-
-            return uniqBy(models, 'id');
-          };
-
-          // 3. 组装最终数据结构
           const enabledChatModelList = data.enabledChatAiProviders.map((provider) => ({
             ...provider,
-            children: getModelListByType(provider.id, 'chat'),
+            children: getModelListByType(data.enabledAiModels, provider.id, 'chat'),
             name: provider.name || provider.id,
           }));
 
           const enabledImageModelList = data.enabledImageAiProviders.map((provider) => ({
             ...provider,
-            children: getModelListByType(provider.id, 'image'),
+            children: getModelListByType(data.enabledAiModels, provider.id, 'image'),
             name: provider.name || provider.id,
           }));
 
           set(
             {
               aiProviderRuntimeConfig: data.runtimeConfig,
-              builtinAiModelList: LOBE_DEFAULT_MODEL_LIST,
+              builtinAiModelList: data.builtinAiModelList,
               enabledAiModels: data.enabledAiModels,
               enabledAiProviders: data.enabledAiProviders,
               enabledChatModelList,

package/src/store/user/slices/modelList/action.test.ts

@@ -70,8 +70,8 @@ describe('LLMSettingsSliceAction', () => {
         });
       });
 
-      act(() => {
-        result.current.refreshDefaultModelProviderList();
+      await act(async () => {
+        await result.current.refreshDefaultModelProviderList();
       });
 
       // Assert that setModelProviderConfig was not called
@@ -79,7 +79,7 @@ describe('LLMSettingsSliceAction', () => {
       expect(azure?.chatModels).toEqual([{ id: 'abc', deploymentName: 'abc' }]);
     });
 
-    it('openai', () => {
+    it('openai', async () => {
       const { result } = renderHook(() => useUserStore());
       act(() => {
         useUserStore.setState({
@@ -109,8 +109,8 @@ describe('LLMSettingsSliceAction', () => {
         });
       });
 
-      act(() => {
-        result.current.refreshDefaultModelProviderList();
+      await act(async () => {
+        await result.current.refreshDefaultModelProviderList();
       });
 
       // Assert that setModelProviderConfig was not called

package/src/store/user/slices/modelList/action.ts

@@ -2,7 +2,6 @@ import { produce } from 'immer';
 import useSWR, { SWRResponse } from 'swr';
 import type { StateCreator } from 'zustand/vanilla';
 
-import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
 import { ModelProvider } from '@/libs/model-runtime';
 import { UserStore } from '@/store/user';
 import type { ChatModelCard, ModelProviderCard } from '@/types/llm';
@@ -28,7 +27,7 @@ export interface ModelListAction {
   /**
    * make sure the default model provider list is sync to latest state
    */
-  refreshDefaultModelProviderList: (params?: { trigger?: string }) => void;
+  refreshDefaultModelProviderList: (params?: { trigger?: string }) => Promise<void>;
   refreshModelProviderList: (params?: { trigger?: string }) => void;
   removeEnabledModels: (provider: GlobalLLMProviderKey, model: string) => Promise<void>;
   setModelProviderConfig: <T extends GlobalLLMProviderKey>(
@@ -69,7 +68,7 @@ export const createModelListSlice: StateCreator<
       remoteModelCards: [],
     });
 
-    get().refreshDefaultModelProviderList();
+    await get().refreshDefaultModelProviderList();
   },
   dispatchCustomModelCards: async (provider, payload) => {
     const prevState = settingsSelectors.providerConfig(provider)(get());
@@ -80,7 +79,7 @@ export const createModelListSlice: StateCreator<
 
     await get().setModelProviderConfig(provider, { customModelCards: nextState });
   },
-  refreshDefaultModelProviderList: (params) => {
+  refreshDefaultModelProviderList: async (params) => {
     /**
      * Because we have several model cards sources, we need to merge the model cards
      * the priority is below:
@@ -106,6 +105,7 @@ export const createModelListSlice: StateCreator<
       return providerCard.chatModels;
     };
 
+    const { DEFAULT_MODEL_PROVIDER_LIST } = await import('@/config/modelProviders');
     const defaultModelProviderList = produce(DEFAULT_MODEL_PROVIDER_LIST, (draft) => {
       Object.values(ModelProvider).forEach((id) => {
         const provider = draft.find((d) => d.id === id);

package/src/utils/getFallbackModelProperty.test.ts

@@ -56,36 +56,36 @@ vi.mock('@/config/aiModels', () => ({
 
 describe('getModelPropertyWithFallback', () => {
   describe('when providerId is specified', () => {
-    it('should return exact match value when model exists with specified provider', () => {
-      const result = getModelPropertyWithFallback('gpt-4', 'displayName', 'openai');
+    it('should return exact match value when model exists with specified provider', async () => {
+      const result = await getModelPropertyWithFallback('gpt-4', 'displayName', 'openai');
       expect(result).toBe('GPT-4');
     });
 
-    it('should return exact match type when model exists with specified provider', () => {
-      const result = getModelPropertyWithFallback('gpt-4', 'type', 'openai');
+    it('should return exact match type when model exists with specified provider', async () => {
+      const result = await getModelPropertyWithFallback('gpt-4', 'type', 'openai');
       expect(result).toBe('chat');
     });
 
-    it('should return exact match contextWindowTokens when model exists with specified provider', () => {
-      const result = getModelPropertyWithFallback('gpt-4', 'contextWindowTokens', 'azure');
+    it('should return exact match contextWindowTokens when model exists with specified provider', async () => {
+      const result = await getModelPropertyWithFallback('gpt-4', 'contextWindowTokens', 'azure');
       expect(result).toBe(8192);
     });
 
-    it('should fall back to other provider when exact provider match not found', () => {
-      const result = getModelPropertyWithFallback('gpt-4', 'displayName', 'fake-provider');
+    it('should fall back to other provider when exact provider match not found', async () => {
+      const result = await getModelPropertyWithFallback('gpt-4', 'displayName', 'fake-provider');
       expect(result).toBe('GPT-4'); // Falls back to openai provider
     });
 
-    it('should return nested property like abilities', () => {
-      const result = getModelPropertyWithFallback('gpt-4', 'abilities', 'openai');
+    it('should return nested property like abilities', async () => {
+      const result = await getModelPropertyWithFallback('gpt-4', 'abilities', 'openai');
       expect(result).toEqual({
         functionCall: true,
         vision: true,
       });
     });
 
-    it('should return parameters property correctly', () => {
-      const result = getModelPropertyWithFallback('dall-e-3', 'parameters', 'openai');
+    it('should return parameters property correctly', async () => {
+      const result = await getModelPropertyWithFallback('dall-e-3', 'parameters', 'openai');
       expect(result).toEqual({
         size: '1024x1024',
         quality: 'standard',
@@ -94,99 +94,106 @@ describe('getModelPropertyWithFallback', () => {
   });
 
   describe('when providerId is not specified', () => {
-    it('should return fallback match value when model exists', () => {
-      const result = getModelPropertyWithFallback('claude-3', 'displayName');
+    it('should return fallback match value when model exists', async () => {
+      const result = await getModelPropertyWithFallback('claude-3', 'displayName');
       expect(result).toBe('Claude 3');
     });
 
-    it('should return fallback match type when model exists', () => {
-      const result = getModelPropertyWithFallback('claude-3', 'type');
+    it('should return fallback match type when model exists', async () => {
+      const result = await getModelPropertyWithFallback('claude-3', 'type');
       expect(result).toBe('chat');
     });
 
-    it('should return fallback match enabled property', () => {
-      const result = getModelPropertyWithFallback('claude-3', 'enabled');
+    it('should return fallback match enabled property', async () => {
+      const result = await getModelPropertyWithFallback('claude-3', 'enabled');
       expect(result).toBe(false);
     });
   });
 
   describe('when model is not found', () => {
-    it('should return default value "chat" for type property', () => {
-      const result = getModelPropertyWithFallback('non-existent-model', 'type');
+    it('should return default value "chat" for type property', async () => {
+      const result = await getModelPropertyWithFallback('non-existent-model', 'type');
       expect(result).toBe('chat');
     });
 
-    it('should return default value "chat" for type property even with providerId', () => {
-      const result = getModelPropertyWithFallback('non-existent-model', 'type', 'fake-provider');
+    it('should return default value "chat" for type property even with providerId', async () => {
+      const result = await getModelPropertyWithFallback(
+        'non-existent-model',
+        'type',
+        'fake-provider',
+      );
       expect(result).toBe('chat');
     });
 
-    it('should return undefined for non-type properties when model not found', () => {
-      const result = getModelPropertyWithFallback('non-existent-model', 'displayName');
+    it('should return undefined for non-type properties when model not found', async () => {
+      const result = await getModelPropertyWithFallback('non-existent-model', 'displayName');
       expect(result).toBeUndefined();
     });
 
-    it('should return undefined for contextWindowTokens when model not found', () => {
-      const result = getModelPropertyWithFallback('non-existent-model', 'contextWindowTokens');
+    it('should return undefined for contextWindowTokens when model not found', async () => {
+      const result = await getModelPropertyWithFallback(
+        'non-existent-model',
+        'contextWindowTokens',
+      );
       expect(result).toBeUndefined();
     });
 
-    it('should return undefined for enabled property when model not found', () => {
-      const result = getModelPropertyWithFallback('non-existent-model', 'enabled');
+    it('should return undefined for enabled property when model not found', async () => {
+      const result = await getModelPropertyWithFallback('non-existent-model', 'enabled');
       expect(result).toBeUndefined();
     });
   });
 
   describe('provider precedence logic', () => {
-    it('should prioritize exact provider match over general match', () => {
+    it('should prioritize exact provider match over general match', async () => {
       // gpt-4 exists in both openai and azure providers with different displayNames
-      const openaiResult = getModelPropertyWithFallback('gpt-4', 'displayName', 'openai');
-      const azureResult = getModelPropertyWithFallback('gpt-4', 'displayName', 'azure');
+      const openaiResult = await getModelPropertyWithFallback('gpt-4', 'displayName', 'openai');
+      const azureResult = await getModelPropertyWithFallback('gpt-4', 'displayName', 'azure');
 
       expect(openaiResult).toBe('GPT-4');
       expect(azureResult).toBe('GPT-4 Azure');
     });
 
-    it('should fall back to first match when specified provider not found', () => {
+    it('should fall back to first match when specified provider not found', async () => {
       // When asking for 'fake-provider', should fall back to first match (openai)
-      const result = getModelPropertyWithFallback('gpt-4', 'displayName', 'fake-provider');
+      const result = await getModelPropertyWithFallback('gpt-4', 'displayName', 'fake-provider');
       expect(result).toBe('GPT-4');
     });
   });
 
   describe('property existence handling', () => {
-    it('should handle undefined properties gracefully', () => {
+    it('should handle undefined properties gracefully', async () => {
       // claude-3 doesn't have abilities property defined
-      const result = getModelPropertyWithFallback('claude-3', 'abilities');
+      const result = await getModelPropertyWithFallback('claude-3', 'abilities');
       expect(result).toBeUndefined();
     });
 
-    it('should handle properties that exist but have falsy values', () => {
+    it('should handle properties that exist but have falsy values', async () => {
       // claude-3 has enabled: false
-      const result = getModelPropertyWithFallback('claude-3', 'enabled');
+      const result = await getModelPropertyWithFallback('claude-3', 'enabled');
       expect(result).toBe(false);
     });
 
-    it('should distinguish between undefined and null values', () => {
+    it('should distinguish between undefined and null values', async () => {
       // Testing that we check for undefined specifically, not just falsy values
-      const result = getModelPropertyWithFallback('claude-3', 'contextWindowTokens');
+      const result = await getModelPropertyWithFallback('claude-3', 'contextWindowTokens');
       expect(result).toBe(200000); // Should find the defined value
     });
   });
 
   describe('edge cases', () => {
-    it('should handle empty string modelId', () => {
-      const result = getModelPropertyWithFallback('', 'type');
+    it('should handle empty string modelId', async () => {
+      const result = await getModelPropertyWithFallback('', 'type');
       expect(result).toBe('chat'); // Should fall back to default
     });
 
-    it('should handle empty string providerId', () => {
-      const result = getModelPropertyWithFallback('gpt-4', 'type', '');
+    it('should handle empty string providerId', async () => {
+      const result = await getModelPropertyWithFallback('gpt-4', 'type', '');
       expect(result).toBe('chat'); // Should still find the model via fallback
     });
 
-    it('should handle case-sensitive modelId correctly', () => {
-      const result = getModelPropertyWithFallback('GPT-4', 'type'); // Wrong case
+    it('should handle case-sensitive modelId correctly', async () => {
+      const result = await getModelPropertyWithFallback('GPT-4', 'type'); // Wrong case
       expect(result).toBe('chat'); // Should fall back to default since no match
     });
   });

package/src/utils/getFallbackModelProperty.ts

@@ -1,4 +1,3 @@
-import { LOBE_DEFAULT_MODEL_LIST } from '@/config/aiModels';
 import { AiFullModelCard } from '@/types/aiModel';
 
 /**
@@ -8,11 +7,13 @@ import { AiFullModelCard } from '@/types/aiModel';
  * @param providerId Optional provider ID for an exact match.
  * @returns The property value or a default value.
  */
-export const getModelPropertyWithFallback = <T>(
+export const getModelPropertyWithFallback = async <T>(
   modelId: string,
   propertyName: keyof AiFullModelCard,
   providerId?: string,
-): T => {
+): Promise<T> => {
+  const { LOBE_DEFAULT_MODEL_LIST } = await import('@/config/aiModels');
+
   // Step 1: If providerId is provided, prioritize an exact match (same provider + same id)
   if (providerId) {
     const exactMatch = LOBE_DEFAULT_MODEL_LIST.find(