@lobehub/chat 1.47.10 → 1.47.11

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.47.11](https://github.com/lobehub/lobe-chat/compare/v1.47.10...v1.47.11)
+
+<sup>Released on **2025-01-21**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Improve code for ai provider.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Improve code for ai provider, closes [#5532](https://github.com/lobehub/lobe-chat/issues/5532) ([ea59e24](https://github.com/lobehub/lobe-chat/commit/ea59e24))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.47.10](https://github.com/lobehub/lobe-chat/compare/v1.47.9...v1.47.10)
 
 <sup>Released on **2025-01-21**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Improve code for ai provider."
+      ]
+    },
+    "date": "2025-01-21",
+    "version": "1.47.11"
+  },
   {
     "children": {
       "improvements": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.47.10",
+  "version": "1.47.11",
   "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",
@@ -316,7 +316,7 @@
     "vitest": "~1.2.2",
     "vitest-canvas-mock": "^0.3.3"
   },
-  "packageManager": "pnpm@9.15.3",
+  "packageManager": "pnpm@9.15.4",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"

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

@@ -6,10 +6,9 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import InstantSwitch from '@/components/InstantSwitch';
-import { useAiInfraStore } from '@/store/aiInfra';
 import { AiProviderListItem } from '@/types/aiProvider';
 
+import EnableSwitch from './EnableSwitch';
 import { useStyles } from './style';
 
 const { Paragraph } = Typography;
@@ -21,7 +20,6 @@ const ProviderCard = memo<ProviderCardProps>(
   ({ id, description, name, enabled, source, logo, loading }) => {
     const { t } = useTranslation('providers');
     const { cx, styles, theme } = useStyles();
-    const toggleProviderEnabled = useAiInfraStore((s) => s.toggleProviderEnabled);
 
     if (loading)
       return (
@@ -73,13 +71,7 @@ const ProviderCard = memo<ProviderCardProps>(
           <Divider style={{ margin: '4px 0' }} />
           <Flexbox horizontal justify={'space-between'} paddingBlock={'8px 0'}>
             <div />
-            <InstantSwitch
-              enabled={enabled}
-              onChange={async (checked) => {
-                await toggleProviderEnabled(id, checked);
-              }}
-              size={'small'}
-            />
+            <EnableSwitch enabled={enabled} id={id} />
           </Flexbox>
         </Flexbox>
       </Flexbox>

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

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+
+import InstantSwitch from '@/components/InstantSwitch';
+import { useAiInfraStore } from '@/store/aiInfra';
+
+interface SwitchProps {
+  Component?: FC<{ enabled: boolean, id: string; }>;
+  enabled: boolean;
+  id: string;
+}
+
+const Switch = ({ id, Component, enabled }: SwitchProps) => {
+  const [toggleProviderEnabled] = useAiInfraStore((s) => [s.toggleProviderEnabled]);
+
+  // slot for cloud
+  if (Component) return <Component enabled={enabled} id={id} />;
+
+  return (
+    <InstantSwitch
+      enabled={enabled}
+      onChange={async (checked) => {
+        await toggleProviderEnabled(id, checked);
+      }}
+      size={'small'}
+    />
+  );
+};
+
+export default Switch;

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

@@ -29,6 +29,10 @@ const useStyles = createStyles(({ css, responsive, token }) => ({
     ${responsive.desktop} {
       grid-template-columns: repeat(3, 1fr);
     }
+
+    ${responsive.md} {
+      grid-template-columns: repeat(1, 1fr);
+    }
   `,
 }));
 
@@ -51,7 +55,7 @@ const List = memo(() => {
             {t('list.title.enabled')}
           </Typography.Text>
         </Flexbox>
-        <Grid>
+        <Grid className={styles.grid}>
           {loadingArr.map((item) => (
             <Card enabled={false} id={item} key={item} loading source={'builtin'} />
           ))}

package/src/app/(main)/settings/provider/ProviderMenu/SkeletonList.tsx

@@ -50,7 +50,7 @@ export const Placeholder = memo(() => {
 });
 
 export const SkeletonList = memo(() => (
-  <Flexbox gap={4} style={{ paddingTop: 6 }}>
+  <Flexbox flex={1} gap={4} style={{ paddingTop: 6 }}>
     {Array.from({ length: 6 }).map((_, i) => (
       <Placeholder key={i} />
     ))}

package/src/app/(main)/settings/provider/ProviderMenu/index.tsx

@@ -31,7 +31,7 @@ const Layout = memo(({ children, mobile }: ProviderMenuProps) => {
 
   const width = mobile ? undefined : 260;
   return (
-    <Flexbox style={{ minWidth: width, overflow: 'scroll' }} width={width}>
+    <Flexbox style={{ minWidth: width, overflow: mobile ? undefined : 'scroll' }} width={width}>
       <Flexbox
         gap={8}
         horizontal

package/src/app/(main)/settings/modal/page.tsx

@@ -1,27 +0,0 @@
-'use client';
-
-import { useLayoutEffect } from 'react';
-import urlJoin from 'url-join';
-
-import { useQuery } from '@/hooks/useQuery';
-import { useQueryRoute } from '@/hooks/useQueryRoute';
-import { SettingsTabs } from '@/store/global/initialState';
-
-/**
- * @description: Settings Modal (intercepting routes fallback when hard refresh)
- * @example: /settings/modal?tab=common => /settings/common
- * @refs: https://github.com/lobehub/lobe-chat/discussions/2295#discussioncomment-9290942
- */
-
-const SettingsModalFallback = () => {
-  const { tab = SettingsTabs.Common } = useQuery();
-  const router = useQueryRoute();
-
-  useLayoutEffect(() => {
-    router.replace(urlJoin('/settings', tab as SettingsTabs), { query: { tab: '' } });
-  }, []);
-
-  return null;
-};
-
-export default SettingsModalFallback;