@lobehub/chat 1.42.3 → 1.42.4

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.42.4](https://github.com/lobehub/lobe-chat/compare/v1.42.3...v1.42.4)
+
+<sup>Released on **2025-01-02**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor provider info and improve settings side bar loading.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor provider info and improve settings side bar loading, closes [#5268](https://github.com/lobehub/lobe-chat/issues/5268) ([b82a41e](https://github.com/lobehub/lobe-chat/commit/b82a41e))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.42.3](https://github.com/lobehub/lobe-chat/compare/v1.42.2...v1.42.3)
 
 <sup>Released on **2025-01-01**</sup>

package/README.zh-CN.md

@@ -148,7 +148,7 @@ LobeChat 支持文件上传与知识库功能，你可以上传文件、图片
 - **[Anthropic](https://lobechat.com/discover/provider/anthropic)**: Anthropic 是一家专注于人工智能研究和开发的公司，提供了一系列先进的语言模型，如 Claude 3.5 Sonnet、Claude 3 Sonnet、Claude 3 Opus 和 Claude 3 Haiku。这些模型在智能、速度和成本之间取得了理想的平衡，适用于从企业级工作负载到快速响应的各种应用场景。Claude 3.5 Sonnet 作为其最新模型，在多项评估中表现优异，同时保持了较高的性价比。
 - **[Bedrock](https://lobechat.com/discover/provider/bedrock)**: Bedrock 是亚马逊 AWS 提供的一项服务，专注于为企业提供先进的 AI 语言模型和视觉模型。其模型家族包括 Anthropic 的 Claude 系列、Meta 的 Llama 3.1 系列等，涵盖从轻量级到高性能的多种选择，支持文本生成、对话、图像处理等多种任务，适用于不同规模和需求的企业应用。
 - **[Google](https://lobechat.com/discover/provider/google)**: Google 的 Gemini 系列是其最先进、通用的 AI 模型，由 Google DeepMind 打造，专为多模态设计，支持文本、代码、图像、音频和视频的无缝理解与处理。适用于从数据中心到移动设备的多种环境，极大提升了 AI 模型的效率与应用广泛性。
-- **[DeepSeek](https://lobechat.com/discover/provider/deepseek)**: DeepSeek 是一家专注于人工智能技术研究和应用的公司，其最新模型 DeepSeek-V2.5 融合了通用对话和代码处理能力，并在人类偏好对齐、写作任务和指令跟随等方面实现了显著提升。
+- **[DeepSeek](https://lobechat.com/discover/provider/deepseek)**: DeepSeek 是一家专注于人工智能技术研究和应用的公司，其最新模型 DeepSeek-V3 多项评测成绩超越 Qwen2.5-72B 和 Llama-3.1-405B 等开源模型，性能对齐领军闭源模型 GPT-4o 与 Claude-3.5-Sonnet。
 - **[HuggingFace](https://lobechat.com/discover/provider/huggingface)**: HuggingFace Inference API 提供了一种快速且免费的方式，让您可以探索成千上万种模型，适用于各种任务。无论您是在为新应用程序进行原型设计，还是在尝试机器学习的功能，这个 API 都能让您即时访问多个领域的高性能模型。
 - **[OpenRouter](https://lobechat.com/discover/provider/openrouter)**: OpenRouter 是一个提供多种前沿大模型接口的服务平台，支持 OpenAI、Anthropic、LLaMA 及更多，适合多样化的开发和应用需求。用户可根据自身需求灵活选择最优的模型和价格，助力 AI 体验的提升。
 - **[Cloudflare Workers AI](https://lobechat.com/discover/provider/cloudflare)**: 在 Cloudflare 的全球网络上运行由无服务器 GPU 驱动的机器学习模型。

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Refactor provider info and improve settings side bar loading."
+      ]
+    },
+    "date": "2025-01-02",
+    "version": "1.42.4"
+  },
   {
     "children": {},
     "date": "2025-01-01",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.42.3",
+  "version": "1.42.4",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -129,7 +129,7 @@
     "@lobehub/chat-plugins-gateway": "^1.9.0",
     "@lobehub/icons": "^1.56.0",
     "@lobehub/tts": "^1.25.1",
-    "@lobehub/ui": "^1.155.7",
+    "@lobehub/ui": "^1.155.8",
     "@neondatabase/serverless": "^0.10.1",
     "@next/third-parties": "^15.0.0",
     "@react-spring/web": "^9.7.5",

package/src/app/(main)/settings/_layout/Desktop/SideBar.tsx

@@ -1,10 +1,12 @@
 'use client';
 
 import { createStyles } from 'antd-style';
+import { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
 import BrandWatermark from '@/components/BrandWatermark';
+import CircleLoading from '@/components/Loading/CircleLoading';
 import PanelTitle from '@/components/PanelTitle';
 
 const useStyles = createStyles(({ token, css }) => ({
@@ -33,7 +35,9 @@ const SidebarLayout = ({ children, className, title, desc, ...rest }: SidebarLay
       {...rest}
     >
       <PanelTitle desc={desc || t('header.desc')} title={title || t('header.title')} />
-      <Flexbox flex={1}>{children}</Flexbox>
+      <Flexbox flex={1}>
+        <Suspense fallback={<CircleLoading />}>{children}</Suspense>
+      </Flexbox>
       <BrandWatermark paddingInline={12} />
     </Flexbox>
   );

package/src/config/modelProviders/ai21.ts

@@ -32,6 +32,10 @@ const Ai21: ModelProviderCard = {
   modelList: { showModelFetcher: true },
   modelsUrl: 'https://docs.ai21.com/reference',
   name: 'Ai21Labs',
+  settings: {
+    sdkType: 'openai',
+    showModelFetcher: true,
+  },
   url: 'https://studio.ai21.com',
 };
 

package/src/config/modelProviders/ai360.ts

@@ -69,6 +69,11 @@ const Ai360: ModelProviderCard = {
   modelList: { showModelFetcher: true },
   modelsUrl: 'https://ai.360.cn/platform/docs/overview',
   name: '360 AI',
+  settings: {
+    disableBrowserRequest: true,
+    sdkType: 'openai',
+    showModelFetcher: true,
+  },
   url: 'https://ai.360.com',
 };
 

package/src/config/modelProviders/anthropic.ts

@@ -137,6 +137,17 @@ const Anthropic: ModelProviderCard = {
   proxyUrl: {
     placeholder: 'https://api.anthropic.com',
   },
+  settings: {
+    proxyUrl: {
+      placeholder: 'https://api.anthropic.com',
+    },
+    sdkType: 'anthropic',
+    showModelFetcher: true,
+    smoothing: {
+      speed: 5,
+      text: true,
+    },
+  },
   smoothing: {
     speed: 5,
     text: true,

package/src/config/modelProviders/azure.ts

@@ -59,6 +59,10 @@ const Azure: ModelProviderCard = {
   id: 'azure',
   modelsUrl: 'https://learn.microsoft.com/azure/ai-services/openai/concepts/models',
   name: 'Azure',
+  settings: {
+    defaultShowBrowserRequest: true,
+    sdkType: 'azure',
+  },
   url: 'https://azure.microsoft.com',
 };
 

package/src/config/modelProviders/baichuan.ts

@@ -96,6 +96,14 @@ const Baichuan: ModelProviderCard = {
   modelList: { showModelFetcher: true },
   modelsUrl: 'https://platform.baichuan-ai.com/price',
   name: 'Baichuan',
+  settings: {
+    sdkType: 'openai',
+    showModelFetcher: true,
+    smoothing: {
+      speed: 2,
+      text: true,
+    },
+  },
   smoothing: {
     speed: 2,
     text: true,

package/src/config/modelProviders/bedrock.ts

@@ -309,6 +309,7 @@ const Bedrock: ModelProviderCard = {
   id: 'bedrock',
   modelsUrl: 'https://docs.aws.amazon.com/bedrock/latest/userguide/model-ids.html',
   name: 'Bedrock',
+  settings: { sdkType: 'bedrock' },
   url: 'https://docs.aws.amazon.com/bedrock/latest/userguide/what-is-bedrock.html',
 };
 

package/src/config/modelProviders/cloudflare.ts

@@ -84,6 +84,11 @@ const Cloudflare: ModelProviderCard = {
     showModelFetcher: true,
   },
   name: 'Cloudflare Workers AI',
+  settings: {
+    disableBrowserRequest: true,
+    sdkType: 'cloudflare',
+    showModelFetcher: true,
+  },
   url: 'https://developers.cloudflare.com/workers-ai/models',
 };
 

package/src/config/modelProviders/deepseek.ts

@@ -27,6 +27,10 @@ const DeepSeek: ModelProviderCard = {
   modelList: { showModelFetcher: true },
   modelsUrl: 'https://platform.deepseek.com/api-docs/zh-cn/quick_start/pricing',
   name: 'DeepSeek',
+  settings: {
+    sdkType: 'openai',
+    showModelFetcher: true,
+  },
   url: 'https://deepseek.com',
 };
 

package/src/config/modelProviders/fireworksai.ts

@@ -218,6 +218,10 @@ const FireworksAI: ModelProviderCard = {
   modelList: { showModelFetcher: true },
   modelsUrl: 'https://fireworks.ai/models?show=Serverless',
   name: 'Fireworks AI',
+  settings: {
+    sdkType: 'openai',
+    showModelFetcher: true,
+  },
   url: 'https://fireworks.ai',
 };
 

package/src/config/modelProviders/giteeai.ts

@@ -118,6 +118,11 @@ const GiteeAI: ModelProviderCard = {
   modelList: { showModelFetcher: true },
   modelsUrl: 'https://ai.gitee.com/docs/openapi/v1#tag/serverless/POST/chat/completions',
   name: 'Gitee AI',
+  settings: {
+    disableBrowserRequest: true,
+    sdkType: 'openai',
+    showModelFetcher: true,
+  },
   url: 'https://ai.gitee.com',
 };
 

package/src/config/modelProviders/github.ts

@@ -229,8 +229,13 @@ const Github: ModelProviderCard = {
   description: '通过GitHub模型，开发人员可以成为AI工程师，并使用行业领先的AI模型进行构建。',
   enabled: true,
   id: 'github',
-  modelList: { showModelFetcher: true }, // I'm not sure if it is good to show the model fetcher, as remote list is not complete.
+  modelList: { showModelFetcher: true },
+  // I'm not sure if it is good to show the model fetcher, as remote list is not complete.
   name: 'GitHub',
+  settings: {
+    sdkType: 'azure',
+    showModelFetcher: true,
+  },
   url: 'https://github.com/marketplace/models',
 };
 

package/src/config/modelProviders/google.ts

@@ -277,6 +277,16 @@ const Google: ModelProviderCard = {
   proxyUrl: {
     placeholder: 'https://generativelanguage.googleapis.com',
   },
+  settings: {
+    proxyUrl: {
+      placeholder: 'https://generativelanguage.googleapis.com',
+    },
+    sdkType: 'google',
+    smoothing: {
+      speed: 2,
+      text: true,
+    },
+  },
   smoothing: {
     speed: 2,
     text: true,

package/src/config/modelProviders/groq.ts

@@ -179,6 +179,13 @@ const Groq: ModelProviderCard = {
   proxyUrl: {
     placeholder: 'https://api.groq.com/openai/v1',
   },
+  settings: {
+    proxyUrl: {
+      placeholder: 'https://api.groq.com/openai/v1',
+    },
+    sdkType: 'openai',
+    showModelFetcher: true,
+  },
   url: 'https://groq.com',
 };
 

package/src/config/modelProviders/higress.ts

@@ -2476,6 +2476,15 @@ const Higress: ModelProviderCard = {
     placeholder: 'https://127.0.0.1:8080/v1',
     title: 'AI Gateway地址',
   },
+  settings: {
+    proxyUrl: {
+      desc: '输入Higress AI Gateway的访问地址',
+      placeholder: 'https://127.0.0.1:8080/v1',
+      title: 'AI Gateway地址',
+    },
+    sdkType: 'openai',
+    showModelFetcher: true,
+  },
   url: 'https://apig.console.aliyun.com/',
 };
 

package/src/config/modelProviders/huggingface.ts

@@ -52,6 +52,11 @@ const HuggingFace: ModelProviderCard = {
   modelList: { showModelFetcher: true },
   modelsUrl: 'https://huggingface.co/docs/api-inference/en/supported-models',
   name: 'HuggingFace',
+  settings: {
+    disableBrowserRequest: true,
+    sdkType: 'huggingface',
+    showModelFetcher: true,
+  },
   url: 'https://huggingface.co',
 };
 

package/src/config/modelProviders/hunyuan.ts

@@ -138,6 +138,11 @@ const Hunyuan: ModelProviderCard = {
   modelList: { showModelFetcher: true },
   modelsUrl: 'https://cloud.tencent.com/document/product/1729/104753',
   name: 'Hunyuan',
+  settings: {
+    disableBrowserRequest: true,
+    sdkType: 'openai',
+    showModelFetcher: true,
+  },
   url: 'https://hunyuan.tencent.com',
 };
 

package/src/config/modelProviders/internlm.ts

@@ -38,6 +38,11 @@ const InternLM: ModelProviderCard = {
   modelsUrl:
     'https://internlm.intern-ai.org.cn/doc/docs/Models#%E8%8E%B7%E5%8F%96%E6%A8%A1%E5%9E%8B%E5%88%97%E8%A1%A8',
   name: 'InternLM',
+  settings: {
+    disableBrowserRequest: true,
+    sdkType: 'openai',
+    showModelFetcher: true,
+  },
   url: 'https://internlm.intern-ai.org.cn',
 };
 

package/src/config/modelProviders/minimax.ts

@@ -46,6 +46,13 @@ const Minimax: ModelProviderCard = {
   id: 'minimax',
   modelsUrl: 'https://platform.minimaxi.com/document/Models',
   name: 'Minimax',
+  settings: {
+    sdkType: 'openai',
+    smoothing: {
+      speed: 2,
+      text: true,
+    },
+  },
   smoothing: {
     speed: 2,
     text: true,

package/src/config/modelProviders/mistral.ts

@@ -152,6 +152,9 @@ const Mistral: ModelProviderCard = {
   id: 'mistral',
   modelsUrl: 'https://docs.mistral.ai/getting-started/models',
   name: 'Mistral',
+  settings: {
+    sdkType: 'openai',
+  },
   url: 'https://mistral.ai',
 };
 

package/src/config/modelProviders/moonshot.ts

@@ -40,6 +40,16 @@ const Moonshot: ModelProviderCard = {
   proxyUrl: {
     placeholder: 'https://api.moonshot.cn/v1',
   },
+  settings: {
+    proxyUrl: {
+      placeholder: 'https://api.moonshot.cn/v1',
+    },
+    sdkType: 'openai',
+    smoothing: {
+      speed: 2,
+      text: true,
+    },
+  },
   smoothing: {
     speed: 2,
     text: true,

package/src/config/modelProviders/novita.ts

@@ -115,6 +115,11 @@ const Novita: ModelProviderCard = {
   modelList: { showModelFetcher: true },
   modelsUrl: 'https://novita.ai/model-api/product/llm-api',
   name: 'Novita',
+  settings: {
+    disableBrowserRequest: true,
+    sdkType: 'openai',
+    showModelFetcher: true,
+  },
   url: 'https://novita.ai',
 };
 

package/src/config/modelProviders/ollama.ts

@@ -89,14 +89,6 @@ const Ollama: ModelProviderCard = {
       displayName: 'Qwen2.5 72B',
       id: 'qwen2.5:72b',
     },
-    {
-      contextWindowTokens: 128_000,
-      description: 'Qwen2.5 是阿里巴巴的新一代大规模语言模型，以优异的性能支持多元化的应用需求。',
-      displayName: 'Qwen2.5 7B',
-      enabled: true,
-      functionCall: true,
-      id: 'qwen2.5',
-    },
     {
       contextWindowTokens: 65_536,
       description: 'CodeQwen1.5 是基于大量代码数据训练的大型语言模型，专为解决复杂编程任务。',
@@ -341,6 +333,12 @@ const Ollama: ModelProviderCard = {
   modelList: { showModelFetcher: true },
   modelsUrl: 'https://ollama.com/library',
   name: 'Ollama',
+  settings: {
+    disableBrowserRequest: true,
+    sdkType: 'ollama',
+    showApiKey: false,
+    showModelFetcher: true,
+  },
   showApiKey: false,
   url: 'https://ollama.com',
 };

package/src/config/modelProviders/openai.ts

@@ -299,6 +299,9 @@ const OpenAI: ModelProviderCard = {
   modelList: { showModelFetcher: true },
   modelsUrl: 'https://platform.openai.com/docs/models',
   name: 'OpenAI',
+  settings: {
+    showModelFetcher: true,
+  },
   url: 'https://openai.com',
 };
 

package/src/config/modelProviders/openrouter.ts

@@ -41,7 +41,7 @@ const OpenRouter: ModelProviderCard = {
       },
       releasedAt: '2024-12-17',
       vision: true,
-    },    
+    },
     {
       contextWindowTokens: 128_000,
       description:
@@ -236,6 +236,10 @@ const OpenRouter: ModelProviderCard = {
   modelList: { showModelFetcher: true },
   modelsUrl: 'https://openrouter.ai/models',
   name: 'OpenRouter',
+  settings: {
+    sdkType: 'openai',
+    showModelFetcher: true,
+  },
   url: 'https://openrouter.ai',
 };
 

package/src/config/modelProviders/perplexity.ts

@@ -65,6 +65,12 @@ const Perplexity: ModelProviderCard = {
   proxyUrl: {
     placeholder: 'https://api.perplexity.ai',
   },
+  settings: {
+    proxyUrl: {
+      placeholder: 'https://api.perplexity.ai',
+    },
+    sdkType: 'openai',
+  },
   url: 'https://www.perplexity.ai',
 };
 

package/src/config/modelProviders/qwen.ts

@@ -266,6 +266,18 @@ const Qwen: ModelProviderCard = {
   proxyUrl: {
     placeholder: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
   },
+  settings: {
+    disableBrowserRequest: true,
+    proxyUrl: {
+      placeholder: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+    },
+    sdkType: 'openai',
+    showModelFetcher: true,
+    smoothing: {
+      speed: 2,
+      text: true,
+    },
+  },
   smoothing: {
     speed: 2,
     text: true,

package/src/config/modelProviders/sensenova.ts

@@ -124,6 +124,11 @@ const SenseNova: ModelProviderCard = {
   modelList: { showModelFetcher: true },
   modelsUrl: 'https://platform.sensenova.cn/pricing',
   name: 'SenseNova',
+  settings: {
+    disableBrowserRequest: true,
+    sdkType: 'openai',
+    showModelFetcher: true,
+  },
   url: 'https://platform.sensenova.cn/home',
 };
 

package/src/config/modelProviders/siliconcloud.ts

@@ -598,6 +598,13 @@ const SiliconCloud: ModelProviderCard = {
   proxyUrl: {
     placeholder: 'https://api.siliconflow.cn/v1',
   },
+  settings: {
+    proxyUrl: {
+      placeholder: 'https://api.siliconflow.cn/v1',
+    },
+    sdkType: 'openai',
+    showModelFetcher: true,
+  },
   url: 'https://siliconflow.cn/zh-cn/siliconcloud',
 };
 

package/src/config/modelProviders/spark.ts

@@ -69,6 +69,14 @@ const Spark: ModelProviderCard = {
   modelList: { showModelFetcher: true },
   modelsUrl: 'https://xinghuo.xfyun.cn/spark',
   name: 'Spark',
+  settings: {
+    sdkType: 'openai',
+    showModelFetcher: true,
+    smoothing: {
+      speed: 2,
+      text: true,
+    },
+  },
   smoothing: {
     speed: 2,
     text: true,

package/src/config/modelProviders/stepfun.ts

@@ -133,6 +133,15 @@ const Stepfun: ModelProviderCard = {
   modelList: { showModelFetcher: true },
   modelsUrl: 'https://platform.stepfun.com/docs/llm/text',
   name: 'Stepfun',
+  settings: {
+    disableBrowserRequest: true,
+    sdkType: 'openai',
+    showModelFetcher: true,
+    smoothing: {
+      speed: 2,
+      text: true,
+    },
+  },
   smoothing: {
     speed: 2,
     text: true,

package/src/config/modelProviders/taichu.ts

@@ -30,6 +30,10 @@ const Taichu: ModelProviderCard = {
   modelList: { showModelFetcher: true },
   modelsUrl: 'https://ai-maas.wair.ac.cn/#/doc',
   name: 'Taichu',
+  settings: {
+    sdkType: 'openai',
+    showModelFetcher: true,
+  },
   url: 'https://ai-maas.wair.ac.cn',
 };
 

package/src/config/modelProviders/togetherai.ts

@@ -284,6 +284,10 @@ const TogetherAI: ModelProviderCard = {
   modelList: { showModelFetcher: true },
   modelsUrl: 'https://docs.together.ai/docs/chat-models',
   name: 'Together AI',
+  settings: {
+    sdkType: 'openai',
+    showModelFetcher: true,
+  },
   url: 'https://www.together.ai',
 };
 

package/src/config/modelProviders/upstage.ts

@@ -37,6 +37,10 @@ const Upstage: ModelProviderCard = {
   modelList: { showModelFetcher: true },
   modelsUrl: 'https://developers.upstage.ai/docs/getting-started/models',
   name: 'Upstage',
+  settings: {
+    sdkType: 'openai',
+    showModelFetcher: true,
+  },
   url: 'https://upstage.ai',
 };
 

package/src/config/modelProviders/wenxin.ts

@@ -162,6 +162,14 @@ const BaiduWenxin: ModelProviderCard = {
   id: 'wenxin',
   modelsUrl: 'https://cloud.baidu.com/doc/WENXINWORKSHOP/s/Nlks5zkzu#%E5%AF%B9%E8%AF%9Dchat',
   name: 'Wenxin',
+  settings: {
+    disableBrowserRequest: true,
+    sdkType: 'wenxin',
+    smoothing: {
+      speed: 2,
+      text: true,
+    },
+  },
   smoothing: {
     speed: 2,
     text: true,

package/src/config/modelProviders/xai.ts

@@ -66,6 +66,13 @@ const XAI: ModelProviderCard = {
   proxyUrl: {
     placeholder: 'https://api.x.ai/v1',
   },
+  settings: {
+    proxyUrl: {
+      placeholder: 'https://api.x.ai/v1',
+    },
+    sdkType: 'openai',
+    showModelFetcher: true,
+  },
   url: 'https://x.ai/api',
 };
 

package/src/config/modelProviders/zeroone.ts

@@ -143,6 +143,7 @@ const ZeroOne: ModelProviderCard = {
   id: 'zeroone',
   modelsUrl: 'https://platform.lingyiwanwu.com/docs#模型与计费',
   name: '01.AI',
+  settings: { sdkType: 'openai' },
   url: 'https://www.lingyiwanwu.com/',
 };
 

package/src/config/modelProviders/zhipu.ts

@@ -201,6 +201,7 @@ const ZhiPu: ModelProviderCard = {
   id: 'zhipu',
   modelsUrl: 'https://open.bigmodel.cn/dev/howuse/model',
   name: 'ZhiPu',
+  settings: { sdkType: 'openai' },
   url: 'https://zhipuai.cn',
 };
 

package/src/features/ModelSelect/index.tsx

@@ -1,12 +1,10 @@
 import { Select, SelectProps } from 'antd';
 import { createStyles } from 'antd-style';
-import isEqual from 'fast-deep-equal';
 import { memo, useMemo } from 'react';
 
 import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
-import { useUserStore } from '@/store/user';
-import { modelProviderSelectors } from '@/store/user/selectors';
-import { ModelProviderCard } from '@/types/llm';
+import { useEnabledChatModels } from '@/hooks/useEnabledChatModels';
+import { EnabledProviderWithModels } from '@/types/aiModel';
 
 const useStyles = createStyles(({ css, prefixCls }) => ({
   select: css`
@@ -29,14 +27,14 @@ interface ModelSelectProps {
 }
 
 const ModelSelect = memo<ModelSelectProps>(({ value, onChange, showAbility = true }) => {
-  const enabledList = useUserStore(modelProviderSelectors.modelProviderListForModelSelect, isEqual);
+  const enabledList = useEnabledChatModels();
 
   const { styles } = useStyles();
 
   const options = useMemo<SelectProps['options']>(() => {
-    const getChatModels = (provider: ModelProviderCard) =>
-      provider.chatModels.map((model) => ({
-        label: <ModelItemRender {...model} showInfoTag={showAbility} />,
+    const getChatModels = (provider: EnabledProviderWithModels) =>
+      provider.children.map((model) => ({
+        label: <ModelItemRender {...model} {...model.abilities} showInfoTag={showAbility} />,
         provider: provider.id,
         value: `${provider.id}/${model.id}`,
       }));

package/src/features/ModelSwitchPanel/index.tsx

@@ -2,7 +2,6 @@ import { Icon } from '@lobehub/ui';
 import { Dropdown } from 'antd';
 import { createStyles } from 'antd-style';
 import type { ItemType } from 'antd/es/menu/interface';
-import isEqual from 'fast-deep-equal';
 import { LucideArrowRight } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { PropsWithChildren, memo, useMemo } from 'react';
@@ -10,12 +9,11 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
+import { useEnabledChatModels } from '@/hooks/useEnabledChatModels';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
-import { useUserStore } from '@/store/user';
-import { modelProviderSelectors } from '@/store/user/selectors';
-import { ModelProviderCard } from '@/types/llm';
+import { EnabledProviderWithModels } from '@/types/aiModel';
 import { withBasePath } from '@/utils/basePath';
 
 const useStyles = createStyles(({ css, prefixCls }) => ({
@@ -54,13 +52,13 @@ const ModelSwitchPanel = memo<PropsWithChildren>(({ children }) => {
 
   const router = useRouter();
 
-  const enabledList = useUserStore(modelProviderSelectors.modelProviderListForModelSelect, isEqual);
+  const enabledList = useEnabledChatModels();
 
   const items = useMemo<ItemType[]>(() => {
-    const getModelItems = (provider: ModelProviderCard) => {
-      const items = provider.chatModels.map((model) => ({
+    const getModelItems = (provider: EnabledProviderWithModels) => {
+      const items = provider.children.map((model) => ({
         key: menuKey(provider.id, model.id),
-        label: <ModelItemRender {...model} />,
+        label: <ModelItemRender {...model} {...model.abilities} />,
         onClick: () => {
           updateAgentConfig({ model: model.id, provider: provider.id });
         },

package/src/hooks/useEnabledChatModels.ts

@@ -0,0 +1,9 @@
+import isEqual from 'fast-deep-equal';
+
+import { useUserStore } from '@/store/user';
+import { modelProviderSelectors } from '@/store/user/selectors';
+import { EnabledProviderWithModels } from '@/types/aiModel';
+
+export const useEnabledChatModels = (): EnabledProviderWithModels[] => {
+  return useUserStore(modelProviderSelectors.modelProviderListForModelSelect, isEqual);
+};

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

@@ -1,6 +1,7 @@
 import { uniqBy } from 'lodash-es';
 
 import { filterEnabledModels } from '@/config/modelProviders';
+import { EnabledProviderWithModels } from '@/types/aiModel';
 import { ChatModelCard, ModelProviderCard } from '@/types/llm';
 import { ServerModelProviderConfig } from '@/types/serverConfig';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
@@ -88,12 +89,22 @@ const getEnableModelsById = (provider: string) => (s: UserStore) => {
 
 const modelProviderList = (s: UserStore): ModelProviderCard[] => s.modelProviderList;
 
-const modelProviderListForModelSelect = (s: UserStore): ModelProviderCard[] =>
+const modelProviderListForModelSelect = (s: UserStore): EnabledProviderWithModels[] =>
   modelProviderList(s)
     .filter((s) => s.enabled)
     .map((provider) => ({
       ...provider,
-      chatModels: provider.chatModels.filter((model) => model.enabled),
+      children: provider.chatModels
+        .filter((model) => model.enabled)
+        .map((m) => ({
+          abilities: {
+            functionCall: m.functionCall,
+            vision: m.vision,
+          },
+          contextWindowTokens: m.contextWindowTokens,
+          displayName: m.displayName,
+          id: m.id,
+        })),
     }));
 
 const getModelCardById = (id: string) => (s: UserStore) => {

package/src/types/aiModel.ts

@@ -273,3 +273,18 @@ export const ToggleAiModelEnableSchema = z.object({
 });
 
 export type ToggleAiModelEnableParams = z.infer<typeof ToggleAiModelEnableSchema>;
+
+//
+
+interface AiModelForSelect {
+  abilities: ModelAbilities;
+  contextWindowTokens?: number;
+  displayName?: string;
+  id: string;
+}
+
+export interface EnabledProviderWithModels {
+  children: AiModelForSelect[];
+  id: string;
+  name: string;
+}

package/src/types/aiProvider.ts

@@ -1,7 +1,32 @@
 import { z } from 'zod';
 
+import { AiModelSourceType, AiModelType, ModelAbilities } from '@/types/aiModel';
 import { SmoothingParams } from '@/types/llm';
 
+export const AiProviderSourceEnum = {
+  Builtin: 'builtin',
+  Custom: 'custom',
+} as const;
+export type AiProviderSourceType = (typeof AiProviderSourceEnum)[keyof typeof AiProviderSourceEnum];
+
+/**
+ * only when provider use different sdk
+ * we will add a type
+ */
+export const AiProviderSDKEnum = {
+  Anthropic: 'anthropic',
+  Azure: 'azure',
+  Bedrock: 'bedrock',
+  Cloudflare: 'cloudflare',
+  Google: 'google',
+  Huggingface: 'huggingface',
+  Ollama: 'ollama',
+  Openai: 'openai',
+  Wenxin: 'wenxin',
+} as const;
+
+export type AiProviderSDKType = (typeof AiProviderSDKEnum)[keyof typeof AiProviderSDKEnum];
+
 // create
 export const CreateAiProviderSchema = z.object({
   config: z.object({}).passthrough().optional(),
@@ -11,6 +36,7 @@ export const CreateAiProviderSchema = z.object({
   logo: z.string().optional(),
   name: z.string(),
   sdkType: z.enum(['openai', 'anthropic']).optional(),
+  source: z.enum(['builtin', 'custom']),
   // checkModel: z.string().optional(),
   // homeUrl: z.string().optional(),
   // modelsUrl: z.string().optional(),
@@ -27,12 +53,12 @@ export interface AiProviderListItem {
   logo?: string;
   name?: string;
   sort?: number;
-  source: 'builtin' | 'custom';
+  source: AiProviderSourceType;
 }
 
 // Detail Query
 
-interface AiProviderConfig {
+export interface AiProviderSettings {
   /**
    * whether provider show browser request option by default
    *
@@ -54,12 +80,16 @@ interface AiProviderConfig {
       }
     | false;
 
+  /**
+   * default openai
+   */
+  sdkType?: AiProviderSDKType;
+
   /**
    * whether show api key in the provider config
    * so provider like ollama don't need api key field
    */
   showApiKey?: boolean;
-
   /**
    * whether show checker in the provider config
    */
@@ -72,12 +102,12 @@ interface AiProviderConfig {
   smoothing?: SmoothingParams;
 }
 
-export interface AiProviderItem {
+export interface AiProviderCard {
   /**
    * the default model that used for connection check
    */
   checkModel?: string;
-  config: AiProviderConfig;
+  config: AiProviderSettings;
   description?: string;
   enabled: boolean;
   enabledChatModels: string[];
@@ -95,11 +125,6 @@ export interface AiProviderItem {
    * the name show for end user
    */
   name: string;
-  /**
-   * default openai
-   */
-  sdkType?: 'openai' | 'anthropic';
-  source: 'builtin' | 'custom';
 }
 
 export interface AiProviderDetailItem {
@@ -107,7 +132,6 @@ export interface AiProviderDetailItem {
    * the default model that used for connection check
    */
   checkModel?: string;
-  config: AiProviderConfig;
   description?: string;
   enabled: boolean;
   fetchOnClient?: boolean;
@@ -126,14 +150,21 @@ export interface AiProviderDetailItem {
    * the name show for end user
    */
   name: string;
-  /**
-   * default openai
-   */
-  sdkType?: 'openai' | 'anthropic';
-  source: 'builtin' | 'custom';
+  settings: AiProviderSettings;
+  source: AiProviderSourceType;
 }
 
 // Update
+export const UpdateAiProviderSchema = z.object({
+  config: z.object({}).passthrough().optional(),
+  description: z.string().optional(),
+  logo: z.string().optional(),
+  name: z.string(),
+  sdkType: z.enum(['openai', 'anthropic']).optional(),
+});
+
+export type UpdateAiProviderParams = z.infer<typeof UpdateAiProviderSchema>;
+
 export const UpdateAiProviderConfigSchema = z.object({
   checkModel: z.string().optional(),
   fetchOnClient: z.boolean().optional(),
@@ -146,3 +177,26 @@ export interface AiProviderSortMap {
   id: string;
   sort: number;
 }
+
+// --------
+
+export interface EnabledProvider {
+  id: string;
+  name?: string;
+  source: AiModelSourceType;
+}
+
+export interface EnabledAiModel {
+  abilities: ModelAbilities;
+  contextWindowTokens?: number;
+  displayName?: string;
+  id: string;
+  providerId: string;
+  type: AiModelType;
+}
+
+export interface AiProviderInitState {
+  enabledAiModels: EnabledAiModel[];
+  enabledAiProviders: EnabledProvider[];
+  keyVaults: Record<string, object>;
+}

package/src/types/llm.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 
 import { ChatModelPricing } from '@/types/aiModel';
+import { AiProviderSettings } from '@/types/aiProvider';
 
 export type ModelPriceCurrency = 'CNY' | 'USD';
 
@@ -56,6 +57,9 @@ export interface SmoothingParams {
 }
 
 export interface ModelProviderCard {
+  /**
+   * @deprecated
+   */
   chatModels: ChatModelCard[];
   /**
    * the default model that used for connection check
@@ -63,7 +67,7 @@ export interface ModelProviderCard {
   checkModel?: string;
   /**
    * whether provider show browser request option by default
-   *
+   * @deprecated
    * @default false
    */
   defaultShowBrowserRequest?: boolean;
@@ -71,7 +75,7 @@ export interface ModelProviderCard {
   /**
    * some provider server like stepfun and aliyun don't support browser request,
    * So we should disable it
-   *
+   * @deprecated
    * @default false
    */
   disableBrowserRequest?: boolean;
@@ -80,6 +84,9 @@ export interface ModelProviderCard {
    */
   enabled?: boolean;
   id: string;
+  /**
+   * @deprecated
+   */
   modelList?: {
     azureDeployName?: boolean;
     notFoundContent?: ReactNode;
@@ -94,6 +101,9 @@ export interface ModelProviderCard {
    * the name show for end user
    */
   name: string;
+  /**
+   * @deprecated
+   */
   proxyUrl?:
     | {
         desc?: string;
@@ -102,20 +112,25 @@ export interface ModelProviderCard {
       }
     | false;
 
+  settings: AiProviderSettings;
   /**
    * whether show api key in the provider config
    * so provider like ollama don't need api key field
+   * @deprecated
    */
   showApiKey?: boolean;
+
   /**
    * whether show checker in the provider config
+   * @deprecated
    */
   showChecker?: boolean;
+
   /**
    * whether to smoothing the output
+   * @deprecated
    */
   smoothing?: SmoothingParams;
-
   /**
    * provider's website url
    */