@lobehub/chat 1.47.2 → 1.47.4

package/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 # Changelog
 
+### [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>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix hydration error.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix hydration error, closes [#5502](https://github.com/lobehub/lobe-chat/issues/5502) ([cbe469a](https://github.com/lobehub/lobe-chat/commit/cbe469a))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.47.2](https://github.com/lobehub/lobe-chat/compare/v1.47.1...v1.47.2)
 
 <sup>Released on **2025-01-17**</sup>

package/changelog/v1.json

@@ -1,4 +1,18 @@
 [
+  {
+    "children": {},
+    "date": "2025-01-18",
+    "version": "1.47.4"
+  },
+  {
+    "children": {
+      "fixes": [
+        "Fix hydration error."
+      ]
+    },
+    "date": "2025-01-18",
+    "version": "1.47.3"
+  },
   {
     "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.2",
+  "version": "1.47.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",
@@ -39,7 +39,7 @@
     "db:push-test": "NODE_ENV=test drizzle-kit push",
     "db:studio": "drizzle-kit studio",
     "db:z-pull": "drizzle-kit introspect",
-    "dev": "next dev --turbo -p 3010",
+    "dev": "next dev --turbopack -p 3010",
     "docs:i18n": "lobe-i18n md && npm run lint:md && npm run lint:mdx",
     "docs:seo": "lobe-seo && npm run lint:mdx",
     "i18n": "npm run workflow:i18n && lobe-i18n",

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;
+}

package/src/hooks/useInterceptingRoutes.ts

@@ -4,8 +4,7 @@ import urlJoin from 'url-join';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
-import { useGlobalStore } from '@/store/global';
-import { ChatSettingsTabs, SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
+import { ChatSettingsTabs, SettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 
 export const useOpenChatSettings = (tab: ChatSettingsTabs = ChatSettingsTabs.Meta) => {
@@ -15,9 +14,6 @@ export const useOpenChatSettings = (tab: ChatSettingsTabs = ChatSettingsTabs.Met
 
   return useMemo(() => {
     if (activeId === INBOX_SESSION_ID) {
-      useGlobalStore.setState({
-        sidebarKey: SidebarTabKey.Setting,
-      });
       return () => router.push(urlJoin('/settings', SettingsTabs.Agent));
     }
     if (mobile) {

package/src/libs/trpc/client/lambda.ts

@@ -2,8 +2,6 @@ import { createTRPCClient, httpBatchLink } from '@trpc/client';
 import { createTRPCReact } from '@trpc/react-query';
 import superjson from 'superjson';
 
-import { fetchErrorNotification } from '@/components/Error/fetchErrorNotification';
-import { loginRequired } from '@/components/Error/loginRequiredNotification';
 import { ModelProvider } from '@/libs/agent-runtime';
 import type { LambdaRouter } from '@/server/routers/lambda';
 
@@ -17,6 +15,9 @@ const links = [
 
       const errorRes: ErrorResponse = await response.clone().json();
 
+      const { loginRequired } = await import('@/components/Error/loginRequiredNotification');
+      const { fetchErrorNotification } = await import('@/components/Error/fetchErrorNotification');
+
       errorRes.forEach((item) => {
         const errorData = item.error.json;