@lobehub/chat 1.47.3 → 1.47.5

package/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 # 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>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.47.3](https://github.com/lobehub/lobe-chat/compare/v1.47.2...v1.47.3)
 
 <sup>Released on **2025-01-18**</sup>

package/changelog/v1.json

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

package/next.config.ts

@@ -165,8 +165,8 @@ const nextConfig: NextConfig = {
       source: '/welcome',
     },
   ],
-  serverExternalPackages: ['@electric-sql/pglite', 'sharp'],
-
+  // when external packages in dev mode with turbopack, this config will lead to bundle error
+  serverExternalPackages: isProd ? ['@electric-sql/pglite'] : undefined,
   transpilePackages: ['pdfjs-dist', 'mermaid'],
 
   webpack(config) {

package/package.json

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

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/database/client/db.ts

@@ -1,4 +1,4 @@
-import type { PgliteDatabase } from 'drizzle-orm/pglite';
+import { PgliteDatabase, drizzle } from 'drizzle-orm/pglite';
 import { Md5 } from 'ts-md5';
 
 import { ClientDBLoadingProgress, DatabaseLoadingState } from '@/types/clientDB';
@@ -28,6 +28,12 @@ export class DatabaseManager {
   private static WASM_CDN_URL =
     'https://registry.npmmirror.com/@electric-sql/pglite/0.2.13/files/dist/postgres.wasm';
 
+  private static FSBUNDLER_CDN_URL =
+    'https://registry.npmmirror.com/@electric-sql/pglite/0.2.13/files/dist/postgres.data';
+
+  private static VECTOR_CDN_URL =
+    'https://registry.npmmirror.com/@electric-sql/pglite/0.2.13/files/dist/vector.tar.gz';
+
   private constructor() {}
 
   static getInstance() {
@@ -88,6 +94,12 @@ export class DatabaseManager {
     return WebAssembly.compile(wasmBytes);
   }
 
+  private fetchFsBundle = async () => {
+    const res = await fetch(DatabaseManager.FSBUNDLER_CDN_URL);
+
+    return await res.blob();
+  };
+
   // 异步加载 PGlite 相关依赖
   private async loadDependencies() {
     const start = Date.now();
@@ -100,7 +112,7 @@ export class DatabaseManager {
         PGlite: m.PGlite,
       })),
       import('@electric-sql/pglite/vector'),
-      import('drizzle-orm/pglite'),
+      this.fetchFsBundle(),
     ];
 
     let loaded = 0;
@@ -125,9 +137,9 @@ export class DatabaseManager {
     });
 
     // @ts-ignore
-    const [{ PGlite, IdbFs, MemoryFS }, { vector }, { drizzle }] = results;
+    const [{ PGlite, IdbFs, MemoryFS }, { vector }, fsBundle] = results;
 
-    return { IdbFs, MemoryFS, PGlite, drizzle, vector };
+    return { IdbFs, MemoryFS, PGlite, fsBundle, vector };
   }
 
   // 数据库迁移方法
@@ -177,17 +189,34 @@ export class DatabaseManager {
         this.callbacks?.onStateChange?.(DatabaseLoadingState.Initializing);
 
         // 加载依赖
-        const { PGlite, vector, drizzle, IdbFs, MemoryFS } = await this.loadDependencies();
+        const { fsBundle, PGlite, MemoryFS, IdbFs, vector } = await this.loadDependencies();
 
         // 加载并编译 WASM 模块
         const wasmModule = await this.loadWasmModule();
 
-        const db = new PGlite({
-          extensions: { vector },
-          fs: typeof window === 'undefined' ? new MemoryFS('lobechat') : new IdbFs('lobechat'),
-          relaxedDurability: true,
-          wasmModule,
-        });
+        const { initPgliteWorker } = await import('./pglite');
+
+        let db: typeof PGlite;
+
+        const dbName = 'lobechat';
+
+        // make db as web worker if worker is available
+        if (typeof Worker !== 'undefined') {
+          db = await initPgliteWorker({
+            dbName,
+            fsBundle: fsBundle as Blob,
+            vectorBundlePath: DatabaseManager.VECTOR_CDN_URL,
+            wasmModule,
+          });
+        } else {
+          // in edge runtime or test runtime, we don't have worker
+          db = new PGlite({
+            extensions: { vector },
+            fs: typeof window === 'undefined' ? new MemoryFS(dbName) : new IdbFs(dbName),
+            relaxedDurability: true,
+            wasmModule,
+          });
+        }
 
         this.dbInstance = drizzle({ client: db, schema });
 
@@ -210,6 +239,8 @@ export class DatabaseManager {
           name: error.name,
           stack: error.stack,
         });
+
+        console.error(error);
         throw error;
       }
     })();

package/src/database/client/pglite.ts

@@ -0,0 +1,17 @@
+import { PGliteWorker } from '@electric-sql/pglite/worker';
+
+import { InitMeta } from './type';
+
+export const initPgliteWorker = async (meta: InitMeta) => {
+  const worker = await PGliteWorker.create(
+    new Worker(new URL('pglite.worker.ts', import.meta.url)),
+    { meta },
+  );
+
+  // 监听 worker 状态变化
+  worker.onLeaderChange(() => {
+    console.log('Worker leader changed, isLeader:', worker?.isLeader);
+  });
+
+  return worker as PGliteWorker;
+};

package/src/database/client/pglite.worker.ts

@@ -0,0 +1,25 @@
+import { worker } from '@electric-sql/pglite/worker';
+
+import { InitMeta } from './type';
+
+worker({
+  async init(options) {
+    const { wasmModule, fsBundle, vectorBundlePath, dbName } = options.meta as InitMeta;
+    const { PGlite } = await import('@electric-sql/pglite');
+
+    return new PGlite({
+      dataDir: `idb://${dbName}`,
+      extensions: {
+        vector: {
+          name: 'pgvector',
+          setup: async (pglite, options) => {
+            return { bundlePath: new URL(vectorBundlePath), options };
+          },
+        },
+      },
+      fsBundle,
+      relaxedDurability: true,
+      wasmModule,
+    });
+  },
+});

package/src/database/client/type.ts

@@ -0,0 +1,6 @@
+export interface InitMeta {
+  dbName: string;
+  fsBundle: Blob;
+  vectorBundlePath: string;
+  wasmModule: WebAssembly.Module;
+}