@lobehub/chat 1.47.4 → 1.47.6

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 1.47.6](https://github.com/lobehub/lobe-chat/compare/v1.47.5...v1.47.6)
+
+<sup>Released on **2025-01-20**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor provider code.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor provider code, closes [#5516](https://github.com/lobehub/lobe-chat/issues/5516) ([fa1a07f](https://github.com/lobehub/lobe-chat/commit/fa1a07f))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [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>

package/changelog/v1.json

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

package/package.json

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

package/src/app/(main)/settings/provider/(detail)/[id]/index.tsx

@@ -6,10 +6,16 @@ import { Flexbox } from 'react-layout-kit';
 import ModelList from '../../features/ModelList';
 import ProviderConfig, { ProviderConfigProps } from '../../features/ProviderConfig';
 
-const ProviderDetail = memo<ProviderConfigProps>((card) => {
+interface ProviderDetailProps extends ProviderConfigProps {
+  showConfig?: boolean;
+}
+const ProviderDetail = memo<ProviderDetailProps>(({ showConfig = true, ...card }) => {
   return (
     <Flexbox gap={24} paddingBlock={8}>
-      <ProviderConfig {...card} />
+      {/* ↓ cloud slot ↓ */}
+
+      {/* ↑ cloud slot ↑ */}
+      {showConfig && <ProviderConfig {...card} />}
       <ModelList id={card.id} />
     </Flexbox>
   );

package/src/app/(main)/settings/provider/(list)/ProviderGrid/Card.tsx

@@ -1,7 +1,6 @@
 import { ProviderCombine, ProviderIcon } from '@lobehub/icons';
 import { Avatar } from '@lobehub/ui';
 import { Divider, Skeleton, Typography } from 'antd';
-import { createStyles } from 'antd-style';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,56 +10,9 @@ import InstantSwitch from '@/components/InstantSwitch';
 import { useAiInfraStore } from '@/store/aiInfra';
 import { AiProviderListItem } from '@/types/aiProvider';
 
-const { Paragraph } = Typography;
-
-const useStyles = createStyles(({ css, token, isDarkMode }) => ({
-  banner: css`
-    opacity: ${isDarkMode ? 0.9 : 0.4};
-  `,
-  container: css`
-    position: relative;
-
-    overflow: hidden;
-
-    height: 100%;
-    border-radius: 12px;
-
-    background: ${token.colorBgContainer};
-    box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary}
-      inset;
+import { useStyles } from './style';
 
-    transition: box-shadow 0.2s ${token.motionEaseInOut};
-
-    &:hover {
-      box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillSecondary : token.colorFill} inset;
-    }
-  `,
-  desc: css`
-    min-height: 44px;
-    margin-block-end: 0 !important;
-    color: ${token.colorTextDescription};
-  `,
-  tagBlue: css`
-    color: ${token.geekblue};
-    background: ${token.geekblue1};
-  `,
-  tagGreen: css`
-    color: ${token.green};
-    background: ${token.green1};
-  `,
-  time: css`
-    color: ${token.colorTextDescription};
-  `,
-  title: css`
-    zoom: 1.2;
-    margin-block-end: 0 !important;
-    font-size: 18px !important;
-    font-weight: bold;
-  `,
-  token: css`
-    font-family: ${token.fontFamilyCode};
-  `,
-}));
+const { Paragraph } = Typography;
 
 interface ProviderCardProps extends AiProviderListItem {
   loading?: boolean;
@@ -78,6 +30,10 @@ const ProviderCard = memo<ProviderCardProps>(
         </Flexbox>
       );
 
+    /* ↓ cloud slot ↓ */
+
+    /* ↑ cloud slot ↑ */
+
     return (
       <Flexbox className={cx(styles.container)} gap={24}>
         <Flexbox gap={12} padding={16} width={'100%'}>

package/src/app/(main)/settings/provider/(list)/ProviderGrid/style.ts

@@ -0,0 +1,50 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  banner: css`
+    opacity: ${isDarkMode ? 0.9 : 0.4};
+  `,
+  container: css`
+    position: relative;
+
+    overflow: hidden;
+
+    height: 100%;
+    border-radius: 12px;
+
+    background: ${token.colorBgContainer};
+    box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary}
+      inset;
+
+    transition: box-shadow 0.2s ${token.motionEaseInOut};
+
+    &:hover {
+      box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillSecondary : token.colorFill} inset;
+    }
+  `,
+  desc: css`
+    min-height: 44px;
+    margin-block-end: 0 !important;
+    color: ${token.colorTextDescription};
+  `,
+  tagBlue: css`
+    color: ${token.geekblue};
+    background: ${token.geekblue1};
+  `,
+  tagGreen: css`
+    color: ${token.green};
+    background: ${token.green1};
+  `,
+  time: css`
+    color: ${token.colorTextDescription};
+  `,
+  title: css`
+    zoom: 1.2;
+    margin-block-end: 0 !important;
+    font-size: 18px !important;
+    font-weight: bold;
+  `,
+  token: css`
+    font-family: ${token.fontFamilyCode};
+  `,
+}));

package/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>
   );
 });

package/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;

package/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: (

package/src/types/llm.ts

@@ -119,13 +119,15 @@ export interface ModelProviderCard {
    * @deprecated
    */
   showApiKey?: boolean;
-
   /**
    * whether show checker in the provider config
    * @deprecated
    */
   showChecker?: boolean;
-
+  /**
+   * whether to show the provider config
+   */
+  showConfig?: boolean;
   /**
    * whether to smoothing the output
    * @deprecated