[pull] main from lobehub:main

CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.47.5](https://github.com/lobehub/lobe-chat/compare/v1.47.4...v1.47.5)
+
+<sup>Released on **2025-01-20**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Improve ai provider code.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Improve ai provider code, closes [#5514](https://github.com/lobehub/lobe-chat/issues/5514) ([92789cd](https://github.com/lobehub/lobe-chat/commit/92789cd))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.47.4](https://github.com/lobehub/lobe-chat/compare/v1.47.3...v1.47.4)
 
 <sup>Released on **2025-01-18**</sup>

changelog/v1.json

@@ -1,4 +1,11 @@
 [
+  {
+    "children": {
+      "improvements": ["Improve ai provider code."]
+    },
+    "date": "2025-01-20",
+    "version": "1.47.5"
+  },
   {
     "children": {},
     "date": "2025-01-18",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.47.4",
+  "version": "1.47.5",
   "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",

src/app/(main)/settings/provider/ProviderMenu/Item.tsx

@@ -5,7 +5,7 @@ import { createStyles } from 'antd-style';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Center, Flexbox } from 'react-layout-kit';
 
 import { AiProviderListItem, AiProviderSourceEnum } from '@/types/aiProvider';
 
@@ -62,7 +62,16 @@ const ProviderItem = memo<AiProviderListItem>(({ id, name, source, enabled, logo
         )}
         {name}
       </Flexbox>
-      {enabled && <Badge status="success" />}
+      <Flexbox horizontal>
+        {enabled && (
+          <Center width={24}>
+            <Badge status="success" />
+          </Center>
+        )}
+        {/* cloud slot */}
+
+        {/* cloud slot */}
+      </Flexbox>
     </Link>
   );
 });

src/app/(main)/settings/provider/features/ProviderConfig/EnableSwitch.tsx

@@ -0,0 +1,46 @@
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { FC } from 'react';
+
+import InstantSwitch from '@/components/InstantSwitch';
+import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
+
+const useStyles = createStyles(({ css }) => ({
+  switchLoading: css`
+    width: 44px !important;
+    min-width: 44px !important;
+    height: 22px !important;
+    border-radius: 12px !important;
+  `,
+}));
+
+interface SwitchProps {
+  Component?: FC<{ id: string }>;
+  id: string;
+}
+
+const Switch = ({ id, Component }: SwitchProps) => {
+  const { styles } = useStyles();
+
+  const [toggleProviderEnabled, enabled, isLoading] = useAiInfraStore((s) => [
+    s.toggleProviderEnabled,
+    aiProviderSelectors.isProviderEnabled(id)(s),
+    aiProviderSelectors.isAiProviderConfigLoading(id)(s),
+  ]);
+
+  if (isLoading) return <Skeleton.Button active className={styles.switchLoading} />;
+
+  // slot for cloud
+  if (Component) return <Component id={id} />;
+
+  return (
+    <InstantSwitch
+      enabled={enabled}
+      onChange={async (enabled) => {
+        await toggleProviderEnabled(id as any, enabled);
+      }}
+    />
+  );
+};
+
+export default Switch;

src/app/(main)/settings/provider/features/ProviderConfig/index.tsx

@@ -12,7 +12,6 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import InstantSwitch from '@/components/InstantSwitch';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { AES_GCM_URL, BASE_PROVIDER_DOC_URL } from '@/const/url';
 import { isServerMode } from '@/const/version';
@@ -26,6 +25,7 @@ import {
 import { KeyVaultsConfigKey, LLMProviderApiTokenKey, LLMProviderBaseUrlKey } from '../../const';
 import Checker from './Checker';
 import { SkeletonInput } from './SkeletonInput';
+import EnableSwitch from './EnableSwitch';
 import UpdateProviderInfo from './UpdateProviderInfo';
 
 const useStyles = createStyles(({ css, prefixCls, responsive, token }) => ({
@@ -131,7 +131,6 @@ const ProviderConfig = memo<ProviderConfigProps>(
     const { cx, styles, theme } = useStyles();
 
     const [
-      toggleProviderEnabled,
       useFetchAiProviderItem,
       updateAiProviderConfig,
       enabled,
@@ -141,7 +140,6 @@ const ProviderConfig = memo<ProviderConfigProps>(
       isProviderEndpointNotEmpty,
       isProviderApiKeyNotEmpty,
     ] = useAiInfraStore((s) => [
-      s.toggleProviderEnabled,
       s.useFetchAiProviderItem,
       s.updateAiProviderConfig,
       aiProviderSelectors.isProviderEnabled(id)(s),
@@ -285,16 +283,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
           {extra}
 
           {isCustom && <UpdateProviderInfo />}
-          {isLoading ? (
-            <Skeleton.Button active className={styles.switchLoading} />
-          ) : (
-            <InstantSwitch
-              enabled={enabled}
-              onChange={async (enabled) => {
-                await toggleProviderEnabled(id as any, enabled);
-              }}
-            />
-          )}
+          <EnableSwitch id={id} />
         </Flexbox>
       ),
       title: (