✨ feat: refactor to support azure openai provider

src/app/api/config/route.test.ts

@@ -1,7 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { OllamaProvider, OpenRouterProvider, TogetherAIProvider } from '@/config/modelProviders';
-import { getServerConfig } from '@/config/server';
 import { GlobalServerConfig } from '@/types/settings';
 
 import { GET } from './route';

src/app/api/config/route.ts

@@ -1,4 +1,8 @@
-import { OllamaProvider, OpenRouterProvider, TogetherAIProvider } from '@/config/modelProviders';
+import {
+  OllamaProviderCard,
+  OpenRouterProviderCard,
+  TogetherAIProviderCard,
+} from '@/config/modelProviders';
 import { getServerConfig } from '@/config/server';
 import { GlobalServerConfig } from '@/types/settings';
 import { transformToChatModelCards } from '@/utils/parseModels';
@@ -54,7 +58,10 @@ export const GET = async () => {
 
       ollama: {
         enabled: ENABLE_OLLAMA,
-        serverModelCards: transformToChatModelCards(OLLAMA_MODEL_LIST, OllamaProvider.chatModels),
+        serverModelCards: transformToChatModelCards(
+          OLLAMA_MODEL_LIST,
+          OllamaProviderCard.chatModels,
+        ),
       },
       openai: {
         serverModelCards: transformToChatModelCards(OPENAI_MODEL_LIST),
@@ -63,7 +70,7 @@ export const GET = async () => {
         enabled: ENABLED_OPENROUTER,
         serverModelCards: transformToChatModelCards(
           OPENROUTER_MODEL_LIST,
-          OpenRouterProvider.chatModels,
+          OpenRouterProviderCard.chatModels,
         ),
       },
       perplexity: { enabled: ENABLED_PERPLEXITY },
@@ -72,7 +79,7 @@ export const GET = async () => {
         enabled: ENABLED_TOGETHERAI,
         serverModelCards: transformToChatModelCards(
           TOGETHERAI_MODEL_LIST,
-          TogetherAIProvider.chatModels,
+          TogetherAIProviderCard.chatModels,
         ),
       },
 

src/app/settings/llm/Azure/index.tsx

@@ -7,6 +7,8 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { ModelProvider } from '@/libs/agent-runtime';
+import { useGlobalStore } from '@/store/global';
+import { modelConfigSelectors } from '@/store/global/selectors';
 
 import ProviderConfig from '../components/ProviderConfig';
 import { LLMProviderApiTokenKey, LLMProviderBaseUrlKey, LLMProviderConfigKey } from '../const';
@@ -30,6 +32,17 @@ const AzureOpenAIProvider = memo(() => {
 
   const { styles } = useStyles();
 
+  // Get the first model card's deployment name as the check model
+  const checkModel = useGlobalStore((s) => {
+    const chatModelCards = modelConfigSelectors.providerModelCards(providerKey)(s);
+
+    if (chatModelCards.length > 0) {
+      return chatModelCards[0].deploymentName;
+    }
+
+    return 'gpt-35-turbo';
+  });
+
   return (
     <ProviderConfig
       apiKeyItems={[
@@ -73,9 +86,10 @@ const AzureOpenAIProvider = memo(() => {
           name: [LLMProviderConfigKey, providerKey, 'apiVersion'],
         },
       ]}
-      checkModel={'gpt-3.5-turbo'}
+      checkModel={checkModel}
       modelList={{
         azureDeployName: true,
+        notFoundContent: t('llm.azure.empty'),
         placeholder: t('llm.azure.modelListPlaceholder'),
       }}
       provider={providerKey}

src/app/settings/llm/components/ProviderModelList/CustomModelOption.tsx

@@ -1,7 +1,7 @@
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, Icon } from '@lobehub/ui';
 import { App, Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { LucideSettings, LucideTrash2 } from 'lucide-react';
+import { LucideArrowRight, LucideSettings, LucideTrash2 } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -43,7 +43,15 @@ const CustomModelOption = memo<CustomModelOptionProps>(({ id, provider }) => {
             <ModelInfoTags id={id} {...modelCard} isCustom />
           </Flexbox>
           <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
-            {id}
+            <Flexbox gap={2} horizontal>
+              {id}
+              {!!modelCard?.deploymentName && (
+                <>
+                  <Icon icon={LucideArrowRight} />
+                  {modelCard?.deploymentName}
+                </>
+              )}
+            </Flexbox>
           </Typography.Text>
         </Flexbox>
       </Flexbox>

src/app/settings/llm/components/ProviderModelList/ModelConfigModal.tsx

@@ -69,13 +69,18 @@ const ModelConfigModal = memo<ModelConfigModalProps>(({ showAzureDeployName, pro
           style={{ marginTop: 16 }}
           wrapperCol={{ offset: 1, span: 18 }}
         >
-          <Form.Item label={t('llm.customModelCards.modelConfig.id.title')} name={'id'}>
+          <Form.Item
+            extra={t('llm.customModelCards.modelConfig.id.extra')}
+            label={t('llm.customModelCards.modelConfig.id.title')}
+            name={'id'}
+          >
             <Input placeholder={t('llm.customModelCards.modelConfig.id.placeholder')} />
           </Form.Item>
           {showAzureDeployName && (
             <Form.Item
+              extra={t('llm.customModelCards.modelConfig.azureDeployName.extra')}
               label={t('llm.customModelCards.modelConfig.azureDeployName.title')}
-              name={'deployName'}
+              name={'deploymentName'}
             >
               <Input
                 placeholder={t('llm.customModelCards.modelConfig.azureDeployName.placeholder')}

src/config/modelProviders/azure.ts

@@ -20,58 +20,21 @@ const Azure: ModelProviderCard = {
       tokens: 16_384,
     },
     {
-      deploymentName: 'gpt-4',
-      displayName: 'GPT-4 Turbo Preview',
+      deploymentName: 'gpt-4-turbo',
+      displayName: 'GPT-4 Turbo',
       enabled: true,
       functionCall: true,
       id: 'gpt-4',
       tokens: 128_000,
     },
     {
+      deploymentName: 'gpt-4-vision',
       description: 'GPT-4 视觉预览版，支持视觉任务',
       displayName: 'GPT-4 Turbo with Vision Preview',
       id: 'gpt-4-vision-preview',
       tokens: 128_000,
       vision: true,
     },
-    {
-      displayName: 'GPT-4 Turbo Preview (1106)',
-      functionCall: true,
-      id: 'gpt-4-1106-preview',
-      tokens: 128_000,
-    },
-    {
-      displayName: 'GPT-4',
-      functionCall: true,
-      id: 'gpt-4',
-      tokens: 8192,
-    },
-    {
-      displayName: 'GPT-4 (0613)',
-      functionCall: true,
-      id: 'gpt-4-0613',
-      tokens: 8192,
-    },
-    {
-      displayName: 'GPT-4 32K',
-      functionCall: true,
-      id: 'gpt-4-32k',
-      tokens: 32_768,
-    },
-    {
-      displayName: 'GPT-4 32K (0613)',
-      functionCall: true,
-      id: 'gpt-4-32k-0613',
-      tokens: 32_768,
-    },
-    {
-      displayName: 'GPT-4 ALL',
-      files: true,
-      functionCall: true,
-      id: 'gpt-4-all',
-      tokens: 32_768,
-      vision: true,
-    },
   ],
   id: 'azure',
 };

src/config/modelProviders/index.ts

@@ -34,16 +34,17 @@ export const filterEnabledModels = (provider: ModelProviderCard) => {
   return provider.chatModels.filter((v) => v.enabled).map((m) => m.id);
 };
 
-export { default as AnthropicProvider } from './anthropic';
-export { default as BedrockProvider } from './bedrock';
-export { default as GoogleProvider } from './google';
-export { default as GroqProvider } from './groq';
-export { default as MistralProvider } from './mistral';
-export { default as MoonshotProvider } from './moonshot';
-export { default as OllamaProvider } from './ollama';
-export { default as OpenAIProvider } from './openai';
-export { default as OpenRouterProvider } from './openrouter';
-export { default as PerplexityProvider } from './perplexity';
-export { default as TogetherAIProvider } from './togetherai';
-export { default as ZeroOneProvider } from './zeroone';
-export { default as ZhiPuProvider } from './zhipu';
+export { default as AnthropicProviderCard } from './anthropic';
+export { default as AzureProviderCard } from './azure';
+export { default as BedrockProviderCard } from './bedrock';
+export { default as GoogleProviderCard } from './google';
+export { default as GroqProviderCard } from './groq';
+export { default as MistralProviderCard } from './mistral';
+export { default as MoonshotProviderCard } from './moonshot';
+export { default as OllamaProviderCard } from './ollama';
+export { default as OpenAIProviderCard } from './openai';
+export { default as OpenRouterProviderCard } from './openrouter';
+export { default as PerplexityProviderCard } from './perplexity';
+export { default as TogetherAIProviderCard } from './togetherai';
+export { default as ZeroOneProviderCard } from './zeroone';
+export { default as ZhiPuProviderCard } from './zhipu';

src/const/settings/index.ts

@@ -1,17 +1,17 @@
 import {
-  AnthropicProvider,
-  BedrockProvider,
-  GoogleProvider,
-  GroqProvider,
-  MistralProvider,
-  MoonshotProvider,
-  OllamaProvider,
-  OpenAIProvider,
-  OpenRouterProvider,
-  PerplexityProvider,
-  TogetherAIProvider,
-  ZeroOneProvider,
-  ZhiPuProvider,
+  AnthropicProviderCard,
+  BedrockProviderCard,
+  GoogleProviderCard,
+  GroqProviderCard,
+  MistralProviderCard,
+  MoonshotProviderCard,
+  OllamaProviderCard,
+  OpenAIProviderCard,
+  OpenRouterProviderCard,
+  PerplexityProviderCard,
+  TogetherAIProviderCard,
+  ZeroOneProviderCard,
+  ZhiPuProviderCard,
   filterEnabledModels,
 } from '@/config/modelProviders';
 import { DEFAULT_AGENT_META } from '@/const/meta';
@@ -66,75 +66,74 @@ export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
   anthropic: {
     apiKey: '',
     enabled: false,
-    enabledModels: filterEnabledModels(AnthropicProvider),
+    enabledModels: filterEnabledModels(AnthropicProviderCard),
   },
   azure: {
     apiKey: '',
-    deployments: '',
     enabled: false,
     endpoint: '',
   },
   bedrock: {
     accessKeyId: '',
     enabled: false,
-    enabledModels: filterEnabledModels(BedrockProvider),
+    enabledModels: filterEnabledModels(BedrockProviderCard),
     region: 'us-east-1',
     secretAccessKey: '',
   },
   google: {
     apiKey: '',
     enabled: false,
-    enabledModels: filterEnabledModels(GoogleProvider),
+    enabledModels: filterEnabledModels(GoogleProviderCard),
   },
   groq: {
     apiKey: '',
     enabled: false,
-    enabledModels: filterEnabledModels(GroqProvider),
+    enabledModels: filterEnabledModels(GroqProviderCard),
   },
   mistral: {
     apiKey: '',
     enabled: false,
-    enabledModels: filterEnabledModels(MistralProvider),
+    enabledModels: filterEnabledModels(MistralProviderCard),
   },
   moonshot: {
     apiKey: '',
     enabled: false,
-    enabledModels: filterEnabledModels(MoonshotProvider),
+    enabledModels: filterEnabledModels(MoonshotProviderCard),
   },
   ollama: {
     enabled: false,
-    enabledModels: filterEnabledModels(OllamaProvider),
+    enabledModels: filterEnabledModels(OllamaProviderCard),
     endpoint: '',
   },
   openai: {
     apiKey: '',
     enabled: true,
-    enabledModels: filterEnabledModels(OpenAIProvider),
+    enabledModels: filterEnabledModels(OpenAIProviderCard),
   },
   openrouter: {
     apiKey: '',
     enabled: false,
-    enabledModels: filterEnabledModels(OpenRouterProvider),
+    enabledModels: filterEnabledModels(OpenRouterProviderCard),
   },
   perplexity: {
     apiKey: '',
     enabled: false,
-    enabledModels: filterEnabledModels(PerplexityProvider),
+    enabledModels: filterEnabledModels(PerplexityProviderCard),
   },
   togetherai: {
     apiKey: '',
     enabled: false,
-    enabledModels: filterEnabledModels(TogetherAIProvider),
+    enabledModels: filterEnabledModels(TogetherAIProviderCard),
   },
   zeroone: {
     apiKey: '',
     enabled: false,
-    enabledModels: filterEnabledModels(ZeroOneProvider),
+    enabledModels: filterEnabledModels(ZeroOneProviderCard),
   },
   zhipu: {
     apiKey: '',
     enabled: false,
-    enabledModels: filterEnabledModels(ZhiPuProvider),
+    enabledModels: filterEnabledModels(ZhiPuProviderCard),
   },
 };
 

src/locales/default/setting.ts

@@ -50,12 +50,13 @@ export default {
         fetch: '获取列表',
         title: 'Azure Api Version',
       },
+      empty: '请输入模型 ID 添加第一个模型',
       endpoint: {
         desc: '从 Azure 门户检查资源时，可在“密钥和终结点”部分中找到此值',
         placeholder: 'https://docs-test-001.openai.azure.com',
         title: 'Azure API 地址',
       },
-      modelListPlaceholder: '请选择或添加你的部署模型',
+      modelListPlaceholder: '请选择或添加你部署的 OpenAI 模型',
       title: 'Azure OpenAI',
       token: {
         desc: '从 Azure 门户检查资源时，可在“密钥和终结点”部分中找到此值。 可以使用 KEY1 或 KEY2',
@@ -96,6 +97,7 @@ export default {
       confirmDelete: '即将删除该自定义模型，删除后将不可恢复，请谨慎操作。',
       modelConfig: {
         azureDeployName: {
+          extra: '在 Azure OpenAI 中实际请求的字段',
           placeholder: '请输入 Azure 中的模型部署名称',
           title: '模型部署名称',
         },
@@ -114,6 +116,7 @@ export default {
           title: '支持函数调用',
         },
         id: {
+          extra: '将作为模型标签进行展示',
           placeholder: '请输入模型id，例如 gpt-4-turbo-preview 或 claude-2.1',
           title: '模型 ID',
         },