@lobehub/chat 1.36.34 → 1.36.35

package/src/app/loading/{Redirect.tsx → Server/Redirect.tsx}

@@ -3,12 +3,10 @@
 import { useRouter } from 'next/navigation';
 import { memo, useEffect } from 'react';
 
-import { useGlobalStore } from '@/store/global';
-import { systemStatusSelectors } from '@/store/global/selectors';
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
 
-import { AppLoadingStage } from './type';
+import { AppLoadingStage } from '../stage';
 
 interface RedirectProps {
   setLoadingStage: (value: AppLoadingStage) => void;
@@ -22,7 +20,6 @@ const Redirect = memo<RedirectProps>(({ setLoadingStage }) => {
     s.isUserStateInit,
     s.isOnboard,
   ]);
-  const isPgliteNotEnabled = useGlobalStore(systemStatusSelectors.isPgliteNotEnabled);
 
   const navToChat = () => {
     setLoadingStage(AppLoadingStage.GoToChat);
@@ -30,12 +27,6 @@ const Redirect = memo<RedirectProps>(({ setLoadingStage }) => {
   };
 
   useEffect(() => {
-    // if pglite is not enabled, redirect to chat
-    if (isPgliteNotEnabled) {
-      navToChat();
-      return;
-    }
-
     // if user auth state is not ready, wait for loading
     if (!isLoaded) {
       setLoadingStage(AppLoadingStage.InitAuth);
@@ -60,9 +51,9 @@ const Redirect = memo<RedirectProps>(({ setLoadingStage }) => {
       return;
     }
 
-    // finally check the conversation status
+    // finally go to chat
     navToChat();
-  }, [isUserStateInit, isLoaded, isOnboard, isLogin, isPgliteNotEnabled]);
+  }, [isUserStateInit, isLoaded, isOnboard, isLogin]);
 
   return null;
 });

package/src/app/loading/Server/index.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useState } from 'react';
+
+import { AppLoadingStage } from '../stage';
+import Content from './Content';
+import Redirect from './Redirect';
+
+const ServerMode = () => {
+  const [loadingStage, setLoadingStage] = useState(AppLoadingStage.Initializing);
+
+  return (
+    <>
+      <Content loadingStage={loadingStage} />
+      <Redirect setLoadingStage={setLoadingStage} />
+    </>
+  );
+};
+
+ServerMode.displayName = 'ServerMode';
+
+export default ServerMode;

package/src/app/loading/index.tsx

@@ -1,21 +1,9 @@
-'use client';
+import { isServerMode } from '@/const/version';
 
-import { useState } from 'react';
+import Client from './Client';
+import Server from './Server';
 
-import { AppLoadingStage } from '@/app/loading/type';
-
-import Client from './Content';
-import Redirect from './Redirect';
-
-const ScreenLoading = () => {
-  const [loadingStage, setLoadingStage] = useState(AppLoadingStage.Initializing);
-  return (
-    <>
-      <Client loadingStage={loadingStage} />
-      <Redirect setLoadingStage={setLoadingStage} />
-    </>
-  );
-};
+const ScreenLoading = () => (isServerMode ? <Server /> : <Client />);
 
 ScreenLoading.displayName = 'ScreenLoading';
 

package/src/app/loading/stage.ts

@@ -0,0 +1,22 @@
+export enum AppLoadingStage {
+  GoToChat = 'goToChat',
+  Idle = 'appIdle',
+  InitAuth = 'initAuth',
+  InitUser = 'initUser',
+  Initializing = 'appInitializing',
+}
+
+export const SERVER_LOADING_STAGES = [
+  AppLoadingStage.Idle,
+  AppLoadingStage.Initializing,
+  AppLoadingStage.InitAuth,
+  AppLoadingStage.InitUser,
+  AppLoadingStage.GoToChat,
+];
+
+export const CLIENT_LOADING_STAGES = [
+  AppLoadingStage.Idle,
+  AppLoadingStage.Initializing,
+  AppLoadingStage.InitUser,
+  AppLoadingStage.GoToChat,
+] as string[];

package/src/components/FullscreenLoading/index.tsx

@@ -1,19 +1,20 @@
-import { Icon } from '@lobehub/ui';
-import { Loader2 } from 'lucide-react';
-import { ReactNode, memo } from 'react';
+import React, { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import { ProductLogo } from '@/components/Branding';
+import InitProgress, { StageItem } from '@/components/InitProgress';
 
-const FullscreenLoading = memo<{ title?: ReactNode }>(({ title }) => {
+interface FullscreenLoadingProps {
+  activeStage: number;
+  stages: StageItem[];
+}
+
+const FullscreenLoading = memo<FullscreenLoadingProps>(({ activeStage, stages }) => {
   return (
     <Flexbox height={'100%'} style={{ position: 'relative', userSelect: 'none' }} width={'100%'}>
       <Center flex={1} gap={16} width={'100%'}>
         <ProductLogo size={48} type={'combine'} />
-        <Center gap={12} horizontal style={{ fontSize: 15, lineHeight: 1.5, opacity: 0.66 }}>
-          <Icon icon={Loader2} size={{ fontSize: 16 }} spin />
-          {title}
-        </Center>
+        <InitProgress activeStage={activeStage} stages={stages} />
       </Center>
     </Flexbox>
   );

package/src/components/InitProgress/index.tsx

@@ -0,0 +1,42 @@
+import { Icon } from '@lobehub/ui';
+import { Progress, Typography } from 'antd';
+import { useTheme } from 'antd-style';
+import { Loader2 } from 'lucide-react';
+import { ReactNode, memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+export interface StageObjectItem {
+  icon?: ReactNode;
+  text: string;
+}
+export type StageItem = string | StageObjectItem;
+
+interface InitingProps {
+  activeStage: number;
+  stages: StageItem[];
+}
+
+const InitProgress = memo<InitingProps>(({ activeStage, stages }) => {
+  const theme = useTheme();
+
+  const outStage = stages[activeStage];
+  const percent = (activeStage / (stages.length - 1)) * 100;
+
+  const stage = typeof outStage === 'string' ? { text: outStage } : outStage;
+
+  return (
+    <Center gap={8} width={180}>
+      <Progress
+        percent={parseInt(percent.toFixed(0))}
+        showInfo={false}
+        strokeColor={theme.colorPrimary}
+      />
+      <Flexbox align={'center'} gap={4} horizontal>
+        {stage?.icon ? stage?.icon : <Icon icon={Loader2} spin />}
+        <Typography.Text type={'secondary'}>{stage?.text}</Typography.Text>
+      </Flexbox>
+    </Center>
+  );
+});
+
+export default InitProgress;

package/src/features/MobileSwitchLoading/index.tsx

@@ -1,13 +1,26 @@
-'use client';
-
+import { Icon } from '@lobehub/ui';
+import { Loader2 } from 'lucide-react';
+import { DynamicOptions } from 'next/dist/shared/lib/dynamic';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
 
-import FullscreenLoading from '@/components/FullscreenLoading';
+import { ProductLogo } from '@/components/Branding';
 
-const MobileSwitchLoading = () => {
+// @ts-expect-error
+const MobileSwitchLoading: DynamicOptions['loading'] = memo(() => {
   const { t } = useTranslation('common');
-
-  return <FullscreenLoading title={t('layoutInitializing')} />;
-};
+  return (
+    <Flexbox height={'100%'} style={{ position: 'relative', userSelect: 'none' }} width={'100%'}>
+      <Center flex={1} gap={16} width={'100%'}>
+        <ProductLogo size={48} type={'combine'} />
+        <Center gap={12} horizontal style={{ fontSize: 15, lineHeight: 1.5, opacity: 0.66 }}>
+          <Icon icon={Loader2} size={{ fontSize: 16 }} spin />
+          {t('layoutInitializing')}
+        </Center>
+      </Center>
+    </Flexbox>
+  );
+});
 
 export default MobileSwitchLoading;

package/src/layout/AuthProvider/NextAuth/UserUpdater.tsx

@@ -10,6 +10,8 @@ import { LobeUser } from '@/types/user';
 // update the user data into the context
 const UserUpdater = memo(() => {
   const { data: session, status } = useSession();
+  const isLoaded = status !== 'loading';
+
   const isSignedIn = (status === 'authenticated' && session && !!session.user) || false;
 
   const nextUser = session?.user;
@@ -22,7 +24,7 @@ const UserUpdater = memo(() => {
     id: nextUser?.id,
   } as LobeUser;
 
-  useStoreUpdater('isLoaded', true);
+  useStoreUpdater('isLoaded', isLoaded);
   useStoreUpdater('user', lobeUser);
   useStoreUpdater('isSignedIn', isSignedIn);
 

package/src/locales/default/common.ts

@@ -11,10 +11,17 @@ export default {
     },
   },
   appLoading: {
-    goToChat: '(4/4) 对话页面加载中...',
-    initAuth: '(2/4) 鉴权服务初始化...',
-    initUser: '(3/4) 用户状态初始化...',
-    initializing: '(1/4) 应用启动中...',
+    appIdle: '准备启动',
+    appInitializing: '应用启动中...',
+    finished: '数据库初始化完成',
+    goToChat: '对话页面加载中...',
+    initAuth: '鉴权服务初始化...',
+    initUser: '用户状态初始化...',
+    initializing: 'PGlite 数据库初始化...',
+    loadingDependencies: '初始化依赖...',
+    loadingWasm: '加载 WASM 模块...',
+    migrating: '执行数据表迁移...',
+    ready: '数据库已就绪',
   },
   autoGenerate: '自动补全',
   autoGenerateTooltip: '基于提示词自动补全助手描述',
@@ -40,14 +47,28 @@ export default {
       error: '发生错误，请重试',
       idle: '等待初始化...',
       initializing: '正在初始化...',
-      loadingDependencies: `加载依赖中({{progress}}%)...`,
-      loadingWasmModule: '加载 WASM 模块中({{progress}}%)...',
-      migrating: '正在迁移数据...',
+      loadingDependencies: '加载依赖中...',
+      loadingWasmModule: '加载 WASM 模块中...',
+      migrating: '执行数据表迁移...',
       ready: '数据库已就绪',
     },
     modal: {
-      desc: '启用 PGlite 客户端数据库，在你的浏览器中持久存储聊天数据，并使用知识库等进阶特性',
+      desc: '立即启用下一代客户端数据库。在你的浏览器中持久存储聊天数据，并使用知识库等进阶特性。',
       enable: '立即启用',
+      features: {
+        knowledgeBase: {
+          desc: '沉淀你的个人知识库，并与你的助手轻松开启知识库对话（即将上线）',
+          title: '支持知识库对话，开启第二大脑',
+        },
+        localFirst: {
+          desc: '聊天数据完全存储在浏览器中，你的数据始终在你的掌握。',
+          title: '本地优先，隐私至上',
+        },
+        pglite: {
+          desc: '基于 PGlite 构建，原生支持 AI Native 高阶特性（向量检索）',
+          title: '新一代客户端存储架构',
+        },
+      },
       init: {
         desc: '正在初始化数据库，视网络差异可能会用时 5~30 秒不等',
         title: '正在初始化 PGlite 数据库',

package/src/app/loading/type.ts

@@ -1,6 +0,0 @@
-export enum AppLoadingStage {
-  GoToChat = 'goToChat',
-  InitAuth = 'initAuth',
-  InitUser = 'initUser',
-  Initializing = 'initializing',
-}