🐛 fix: fix model select not auto update and sort issue

next.config.ts

@@ -164,7 +164,7 @@ const nextConfig: NextConfig = {
       source: '/welcome',
     },
   ],
-  serverExternalPackages: ['@electric-sql/pglite', 'shiki/wasm', 'sharp'],
+  serverExternalPackages: ['@electric-sql/pglite', 'sharp'],
 
   transpilePackages: ['pdfjs-dist', 'mermaid'],
 

src/components/ModelSelect/index.tsx

@@ -1,5 +1,5 @@
 import { IconAvatarProps, ModelIcon, ProviderIcon } from '@lobehub/icons';
-import { Icon, Tooltip } from '@lobehub/ui';
+import { Avatar, Icon, Tooltip } from '@lobehub/ui';
 import { Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { Infinity, LucideEye, LucidePaperclip, ToyBrick } from 'lucide-react';
@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import { ModelAbilities } from '@/types/aiModel';
+import { AiProviderSourceType } from '@/types/aiProvider';
 import { ChatModelCard } from '@/types/llm';
 import { formatTokenNumber } from '@/utils/format';
 
@@ -153,16 +154,26 @@ export const ModelItemRender = memo<ModelItemRenderProps>(({ showInfoTag = true,
 });
 
 interface ProviderItemRenderProps {
+  logo?: string;
   name: string;
   provider: string;
+  source?: AiProviderSourceType;
 }
 
-export const ProviderItemRender = memo<ProviderItemRenderProps>(({ provider, name }) => (
-  <Flexbox align={'center'} gap={4} horizontal>
-    <ProviderIcon provider={provider} size={20} type={'mono'} />
-    {name}
-  </Flexbox>
-));
+export const ProviderItemRender = memo<ProviderItemRenderProps>(
+  ({ provider, name, source, logo }) => {
+    return (
+      <Flexbox align={'center'} gap={4} horizontal>
+        {source === 'custom' && !!logo ? (
+          <Avatar avatar={logo} size={20} style={{ filter: 'grayscale(1)' }} title={name} />
+        ) : (
+          <ProviderIcon provider={provider} size={20} type={'mono'} />
+        )}
+        {name}
+      </Flexbox>
+    );
+  },
+);
 
 interface LabelRendererProps {
   Icon: FC<IconAvatarProps>;

src/database/repositories/aiInfra/index.ts

@@ -62,7 +62,7 @@ export class AiInfraRepos {
     return list
       .filter((item) => item.enabled)
       .sort((a, b) => a.sort! - b.sort!)
-      .map((item) => ({ id: item.id, name: item.name, source: item.source }));
+      .map((item) => ({ id: item.id, logo: item.logo, name: item.name, source: item.source }));
   };
 
   getEnabledModels = async () => {
@@ -86,7 +86,9 @@ export class AiInfraRepos {
       { concurrency: 10 },
     );
 
-    return [...modelList.flat(), ...userEnabledModels] as EnabledAiModel[];
+    return [...modelList.flat(), ...userEnabledModels].sort(
+      (a, b) => (a?.sort || -1) - (b?.sort || -1),
+    ) as EnabledAiModel[];
   };
 
   getAiProviderModelList = async (providerId: string) => {

src/database/server/models/aiModel.ts

@@ -93,6 +93,7 @@ export class AiModelModel {
         enabled: aiModels.enabled,
         id: aiModels.id,
         providerId: aiModels.providerId,
+        sort: aiModels.sort,
         source: aiModels.source,
         type: aiModels.type,
       })

src/features/ModelSelect/index.tsx

@@ -46,7 +46,14 @@ const ModelSelect = memo<ModelSelectProps>(({ value, onChange, showAbility = tru
     }
 
     return enabledList.map((provider) => ({
-      label: <ProviderItemRender name={provider.name} provider={provider.id} />,
+      label: (
+        <ProviderItemRender
+          logo={provider.logo}
+          name={provider.name}
+          provider={provider.id}
+          source={provider.source}
+        />
+      ),
       options: getChatModels(provider),
     }));
   }, [enabledList]);

src/features/ModelSwitchPanel/index.tsx

@@ -88,7 +88,14 @@ const ModelSwitchPanel = memo<PropsWithChildren>(({ children }) => {
     return enabledList.map((provider) => ({
       children: getModelItems(provider),
       key: provider.id,
-      label: <ProviderItemRender name={provider.name} provider={provider.id} />,
+      label: (
+        <ProviderItemRender
+          logo={provider.logo}
+          name={provider.name}
+          provider={provider.id}
+          source={provider.source}
+        />
+      ),
       type: 'group',
     }));
   }, [enabledList]);

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

@@ -84,7 +84,7 @@ export const createAiProviderSlice: StateCreator<
     await get().refreshAiProviderRuntimeState();
   },
   refreshAiProviderRuntimeState: async () => {
-    await mutate(AiProviderSwrKey.fetchAiProviderRuntimeState);
+    await mutate([AiProviderSwrKey.fetchAiProviderRuntimeState, true]);
   },
   removeAiProvider: async (id) => {
     await aiProviderService.deleteAiProvider(id);
@@ -187,8 +187,8 @@ export const createAiProviderSlice: StateCreator<
 
           // 3. 组装最终数据结构
           const enabledChatModelList = data.enabledAiProviders.map((provider) => ({
+            ...provider,
             children: getModelListByType(provider.id, 'chat'),
-            id: provider.id,
             name: provider.name || provider.id,
           }));
 

src/store/user/slices/modelList/selectors/modelProvider.ts

@@ -105,6 +105,7 @@ const modelProviderListForModelSelect = (s: UserStore): EnabledProviderWithModel
           displayName: m.displayName,
           id: m.id,
         })),
+      source: 'builtin',
     }));
 
 const getModelCardById = (id: string) => (s: UserStore) => {

src/types/aiModel.ts

@@ -1,5 +1,7 @@
 import { z } from 'zod';
 
+import { AiProviderSourceType } from '@/types/aiProvider';
+
 export type ModelPriceCurrency = 'CNY' | 'USD';
 
 export const AiModelSourceEnum = {
@@ -312,5 +314,7 @@ interface AiModelForSelect {
 export interface EnabledProviderWithModels {
   children: AiModelForSelect[];
   id: string;
+  logo?: string;
   name: string;
+  source: AiProviderSourceType;
 }

src/types/aiProvider.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { AiModelConfig, AiModelSourceType, AiModelType, ModelAbilities } from '@/types/aiModel';
+import { AiModelConfig, AiModelType, ModelAbilities } from '@/types/aiModel';
 import { SmoothingParams } from '@/types/llm';
 
 export const AiProviderSourceEnum = {
@@ -182,8 +182,9 @@ export interface AiProviderSortMap {
 
 export interface EnabledProvider {
   id: string;
+  logo?: string;
   name?: string;
-  source: AiModelSourceType;
+  source: AiProviderSourceType;
 }
 
 export interface EnabledAiModel {
@@ -193,6 +194,7 @@ export interface EnabledAiModel {
   displayName?: string;
   id: string;
   providerId: string;
+  sort?: number;
   type: AiModelType;
 }