@lobehub/chat 0.147.15 → 0.147.17

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.147.17](https://github.com/lobehub/lobe-chat/compare/v0.147.16...v0.147.17)
+
+<sup>Released on **2024-04-16**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor service to a uniform interface.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor service to a uniform interface, closes [#2062](https://github.com/lobehub/lobe-chat/issues/2062) ([86779e2](https://github.com/lobehub/lobe-chat/commit/86779e2))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.147.16](https://github.com/lobehub/lobe-chat/compare/v0.147.15...v0.147.16)
+
+<sup>Released on **2024-04-14**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor the auth.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor the auth, closes [#2043](https://github.com/lobehub/lobe-chat/issues/2043) ([37ecb41](https://github.com/lobehub/lobe-chat/commit/37ecb41))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.147.15](https://github.com/lobehub/lobe-chat/compare/v0.147.14...v0.147.15)
 
 <sup>Released on **2024-04-14**</sup>

package/contributing/Basic/Feature-Development.md

@@ -231,7 +231,7 @@ This requirement involves upgrading the Sessions feature to transform it from a
 
 To handle these groups, we need to refactor the implementation logic of `useFetchSessions`. Here are the key changes:
 
-1. Use the `sessionService.getSessionsWithGroup` method to call the backend API and retrieve the grouped session data.
+1. Use the `sessionService.getGroupedSessions` method to call the backend API and retrieve the grouped session data.
 2. Save the retrieved data into three different state fields: `pinnedSessions`, `customSessionGroups`, and `defaultSessions`.
 
 #### `useFetchSessions` Method
@@ -247,7 +247,7 @@ export const createSessionSlice: StateCreator<
 > = (set, get) => ({
   // ... other methods
   useFetchSessions: () =>
-    useSWR<ChatSessionList>(FETCH_SESSIONS_KEY, sessionService.getSessionsWithGroup, {
+    useSWR<ChatSessionList>(FETCH_SESSIONS_KEY, sessionService.getGroupedSessions, {
       onSuccess: (data) => {
         set(
           {
@@ -267,15 +267,15 @@ export const createSessionSlice: StateCreator<
 
 After successfully retrieving the data, we use the `set` method to update the `customSessionGroups`, `defaultSessions`, `pinnedSessions`, and `sessions` states. This ensures that the states are synchronized with the latest session data.
 
-#### `sessionService.getSessionsWithGroup` Method
+#### `sessionService.getGroupedSessions` Method
 
-The `sessionService.getSessionsWithGroup` method is responsible for calling the backend API `SessionModel.queryWithGroups()`.
+The `sessionService.getGroupedSessions` method is responsible for calling the backend API `SessionModel.queryWithGroups()`.
 
 ```typescript
 class SessionService {
   // ... other SessionGroup related implementations
 
-  async getSessionsWithGroup(): Promise<ChatSessionList> {
+  async getGroupedSessions(): Promise<ChatSessionList> {
     return SessionModel.queryWithGroups();
   }
 }
@@ -283,7 +283,7 @@ class SessionService {
 
 #### `SessionModel.queryWithGroups` Method
 
-This method is the core method called by `sessionService.getSessionsWithGroup`, and it is responsible for querying and organizing session data. The code is as follows:
+This method is the core method called by `sessionService.getGroupedSessions`, and it is responsible for querying and organizing session data. The code is as follows:
 
 ```typescript
 class _SessionModel extends BaseModel {
@@ -617,7 +617,7 @@ class ConfigService {
   // ... Other code omitted
 
   exportSessions = async () => {
-    const sessions = await sessionService.getSessions();
+    const sessions = await sessionService.getAllSessions();
 +   const sessionGroups = await sessionService.getSessionGroups();
     const messages = await messageService.getAllMessages();
     const topics = await topicService.getAllTopics();

package/contributing/Basic/Feature-Development.zh-CN.md

@@ -231,7 +231,7 @@ export const createSessionGroupSlice: StateCreator<
 
 为了处理这些分组，我们需要改造 `useFetchSessions` 的实现逻辑。以下是关键的改动点：
 
-1. 使用 `sessionService.getSessionsWithGroup` 方法负责调用后端接口来获取分组后的会话数据；
+1. 使用 `sessionService.getGroupedSessions` 方法负责调用后端接口来获取分组后的会话数据；
 2. 将获取后的数据保存为三到不同的状态字段中：`pinnedSessions`、`customSessionGroups` 和 `defaultSessions`；
 
 #### `useFetchSessions` 方法
@@ -247,7 +247,7 @@ export const createSessionSlice: StateCreator<
 > = (set, get) => ({
   // ... 其他方法
   useFetchSessions: () =>
-    useSWR<ChatSessionList>(FETCH_SESSIONS_KEY, sessionService.getSessionsWithGroup, {
+    useSWR<ChatSessionList>(FETCH_SESSIONS_KEY, sessionService.getGroupedSessions, {
       onSuccess: (data) => {
         set(
           {
@@ -267,15 +267,15 @@ export const createSessionSlice: StateCreator<
 
 在成功获取数据后，我们使用 `set` 方法来更新 `customSessionGroups`、`defaultSessions`、`pinnedSessions` 和 `sessions` 状态。这将保证状态与最新的会话数据同步。
 
-#### getSessionsWithGroup
+#### getGroupedSessions
 
-使用 `sessionService.getSessionsWithGroup` 方法负责调用后端接口 `SessionModel.queryWithGroups()`
+使用 `sessionService.getGroupedSessions` 方法负责调用后端接口 `SessionModel.queryWithGroups()`
 
 ```typescript
 class SessionService {
   // ... 其他 SessionGroup 相关的实现
 
-  async getSessionsWithGroup(): Promise<ChatSessionList> {
+  async getGroupedSessions(): Promise<ChatSessionList> {
     return SessionModel.queryWithGroups();
   }
 }
@@ -283,7 +283,7 @@ class SessionService {
 
 #### `SessionModel.queryWithGroups` 方法
 
-此方法是 `sessionService.getSessionsWithGroup` 调用的核心方法，它负责查询和组织会话数据，代码如下：
+此方法是 `sessionService.getGroupedSessions` 调用的核心方法，它负责查询和组织会话数据，代码如下：
 
 ```typescript
 class _SessionModel extends BaseModel {
@@ -611,7 +611,7 @@ class ConfigService {
   // ... 省略其他
 
   exportSessions = async () => {
-    const sessions = await sessionService.getSessions();
+    const sessions = await sessionService.getAllSessions();
 +   const sessionGroups = await sessionService.getSessionGroups();
     const messages = await messageService.getAllMessages();
     const topics = await topicService.getAllTopics();

package/next.config.mjs

@@ -1,5 +1,6 @@
 import nextPWA from '@ducanh2912/next-pwa';
 import analyzer from '@next/bundle-analyzer';
+import { withSentryConfig } from '@sentry/nextjs';
 
 const isProd = process.env.NODE_ENV === 'production';
 const buildWithDocker = process.env.DOCKER === 'true';
@@ -9,18 +10,6 @@ const API_PROXY_ENDPOINT = process.env.API_PROXY_ENDPOINT || '';
 
 const basePath = process.env.NEXT_PUBLIC_BASE_PATH;
 
-const withBundleAnalyzer = analyzer({
-  enabled: process.env.ANALYZE === 'true',
-});
-
-const withPWA = nextPWA({
-  dest: 'public',
-  register: true,
-  workboxOptions: {
-    skipWaiting: true,
-  },
-});
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   compress: isProd,
@@ -67,4 +56,63 @@ const nextConfig = {
   },
 };
 
-export default isProd ? withBundleAnalyzer(withPWA(nextConfig)) : nextConfig;
+const noWrapper = (config) => config;
+
+const withBundleAnalyzer = process.env.ANALYZE === 'true' ? analyzer() : noWrapper;
+
+const withPWA = isProd
+  ? nextPWA({
+      dest: 'public',
+      register: true,
+      workboxOptions: {
+        skipWaiting: true,
+      },
+    })
+  : noWrapper;
+
+const hasSentry = !!process.env.NEXT_PUBLIC_SENTRY_DSN;
+const withSentry =
+  isProd && hasSentry
+    ? (c) =>
+        withSentryConfig(
+          c,
+          {
+            // For all available options, see:
+            // https://github.com/getsentry/sentry-webpack-plugin#options
+
+            // Suppresses source map uploading logs during build
+            silent: true,
+            org: process.env.SENTRY_ORG,
+            project: process.env.SENTRY_PROJECT,
+          },
+          {
+            // For all available options, see:
+            // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+            // Upload a larger set of source maps for prettier stack traces (increases build time)
+            widenClientFileUpload: true,
+
+            // Transpiles SDK to be compatible with IE11 (increases bundle size)
+            transpileClientSDK: true,
+
+            // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers. (increases server load)
+            // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+            // side errors will fail.
+            tunnelRoute: '/monitoring',
+
+            // Hides source maps from generated client bundles
+            hideSourceMaps: true,
+
+            // Automatically tree-shake Sentry logger statements to reduce bundle size
+            disableLogger: true,
+
+            // Enables automatic instrumentation of Vercel Cron Monitors.
+            // See the following for more information:
+            // https://docs.sentry.io/product/crons/
+            // https://vercel.com/docs/cron-jobs
+            automaticVercelMonitors: true,
+          },
+        )
+    : noWrapper;
+
+export default withBundleAnalyzer(withPWA(withSentry(nextConfig)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.147.15",
+  "version": "0.147.17",
   "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",
@@ -94,6 +94,7 @@
     "@lobehub/tts": "latest",
     "@lobehub/ui": "^1.137.7",
     "@next/third-parties": "^14.1.4",
+    "@sentry/nextjs": "^7.105.0",
     "@vercel/analytics": "^1.2.2",
     "@vercel/speed-insights": "^1.0.10",
     "ahooks": "^3.7.11",

package/sentry.client.config.ts

@@ -0,0 +1,30 @@
+// This file configures the initialization of Sentry on the client.
+// The config you add here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+import * as Sentry from '@sentry/nextjs';
+
+if (!!process.env.NEXT_PUBLIC_SENTRY_DSN) {
+  Sentry.init({
+    // Setting this option to true will print useful information to the console while you're setting up Sentry.
+    debug: false,
+
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+    // You can remove this option if you're not planning to use the Sentry Session Replay feature:
+    integrations: [
+      Sentry.replayIntegration({
+        blockAllMedia: true,
+        // Additional Replay configuration goes in here, for example:
+        maskAllText: true,
+      }),
+    ],
+
+    replaysOnErrorSampleRate: 1,
+
+    // This sets the sample rate to be 10%. You may want this to be 100% while
+    // in development and sample at a lower rate in production
+    replaysSessionSampleRate: 0.1,
+
+    // Adjust this value in production, or use tracesSampler for greater control
+    tracesSampleRate: 1,
+  });
+}

package/sentry.edge.config.ts

@@ -0,0 +1,17 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+import * as Sentry from '@sentry/nextjs';
+
+if (!!process.env.NEXT_PUBLIC_SENTRY_DSN) {
+  Sentry.init({
+    // Setting this option to true will print useful information to the console while you're setting up Sentry.
+    debug: false,
+
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+    // Adjust this value in production, or use tracesSampler for greater control
+    tracesSampleRate: 1,
+  });
+}

package/sentry.server.config.ts

@@ -0,0 +1,19 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+import * as Sentry from '@sentry/nextjs';
+
+if (!!process.env.NEXT_PUBLIC_SENTRY_DSN) {
+  Sentry.init({
+    // Setting this option to true will print useful information to the console while you're setting up Sentry.
+    debug: false,
+
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+    // Adjust this value in production, or use tracesSampler for greater control
+    tracesSampleRate: 1,
+
+    // uncomment the line below to enable Spotlight (https://spotlightjs.com)
+    // spotlight: process.env.NODE_ENV === 'development',
+  });
+}

package/src/app/api/auth/[...nextauth]/route.ts

@@ -1,3 +1,3 @@
-export { GET, POST } from '../next-auth';
+export { GET, POST } from '@/libs/next-auth';
 
 export const runtime = 'edge'; // optional

package/src/app/chat/(desktop)/features/ChatInput/Footer/index.tsx

@@ -56,7 +56,11 @@ const useStyles = createStyles(({ css, prefixCls, token }) => {
 
 const isMac = isMacOS();
 
-const Footer = memo<{ setExpand?: (expand: boolean) => void }>(({ setExpand }) => {
+interface FooterProps {
+  setExpand?: (expand: boolean) => void;
+}
+
+const Footer = memo<FooterProps>(({ setExpand }) => {
   const { t } = useTranslation('chat');
 
   const { theme, styles } = useStyles();
@@ -193,4 +197,6 @@ const Footer = memo<{ setExpand?: (expand: boolean) => void }>(({ setExpand }) =
   );
 });
 
+Footer.displayName = 'Footer';
+
 export default Footer;

package/src/app/chat/(desktop)/features/ChatInput/TextArea.tsx

@@ -31,7 +31,11 @@ const useStyles = createStyles(({ css }) => {
   };
 });
 
-const InputArea = memo<{ setExpand?: (expand: boolean) => void }>(({ setExpand }) => {
+interface InputAreaProps {
+  setExpand?: (expand: boolean) => void;
+}
+
+const InputArea = memo<InputAreaProps>(({ setExpand }) => {
   const { t } = useTranslation('chat');
   const { styles } = useStyles();
   const ref = useRef<TextAreaRef>(null);
@@ -119,4 +123,6 @@ const InputArea = memo<{ setExpand?: (expand: boolean) => void }>(({ setExpand }
   );
 });
 
+InputArea.displayName = 'InputArea';
+
 export default InputArea;

package/src/app/home/Redirect.tsx

@@ -8,8 +8,8 @@ import { sessionService } from '@/services/session';
 
 const checkHasConversation = async () => {
   const hasMessages = await messageService.hasMessages();
-  const hasAgents = await sessionService.hasSessions();
-  return hasMessages || hasAgents;
+  const hasAgents = await sessionService.countSessions();
+  return hasMessages || hasAgents === 0;
 };
 
 const Redirect = memo(() => {

package/src/app/layout.tsx

@@ -7,8 +7,8 @@ import { isRtlLang } from 'rtl-detect';
 import Analytics from '@/components/Analytics';
 import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
 import AuthProvider from '@/layout/AuthProvider';
-import GlobalLayout from '@/layout/GlobalLayout';
 import GlobalProvider from '@/layout/GlobalProvider';
+import LayoutRoutes from '@/layout/routes';
 import { isMobileDevice } from '@/utils/responsive';
 
 const RootLayout = async ({ children }: PropsWithChildren) => {
@@ -22,7 +22,7 @@ const RootLayout = async ({ children }: PropsWithChildren) => {
       <body>
         <GlobalProvider>
           <AuthProvider>
-            <GlobalLayout>{children}</GlobalLayout>
+            <LayoutRoutes>{children}</LayoutRoutes>
           </AuthProvider>
         </GlobalProvider>
         <Analytics />

package/src/config/server/app.ts

@@ -57,24 +57,6 @@ export const getAppConfig = () => {
 
     PLUGIN_SETTINGS: process.env.PLUGIN_SETTINGS,
 
-    ENABLE_OAUTH_SSO: !!process.env.ENABLE_OAUTH_SSO,
-    SSO_PROVIDERS: process.env.SSO_PROVIDERS || 'auth0',
-    AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID || '',
-    AUTH0_CLIENT_SECRET: process.env.AUTH0_CLIENT_SECRET || '',
-    AUTH0_ISSUER: process.env.AUTH0_ISSUER || '',
-    GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID || '',
-    GITHUB_CLIENT_SECRET: process.env.GITHUB_CLIENT_SECRET || '',
-    AZURE_AD_CLIENT_ID: process.env.AZURE_AD_CLIENT_ID || '',
-    AZURE_AD_CLIENT_SECRET: process.env.AZURE_AD_CLIENT_SECRET || '',
-    AZURE_AD_TENANT_ID: process.env.AZURE_AD_TENANT_ID || '',
-    AUTHENTIK_CLIENT_ID: process.env.AUTHENTIK_CLIENT_ID || '',
-    AUTHENTIK_CLIENT_SECRET: process.env.AUTHENTIK_CLIENT_SECRET || '',
-    AUTHENTIK_ISSUER: process.env.AUTHENTIK_ISSUER || '',
-    ZITADEL_CLIENT_ID: process.env.ZITADEL_CLIENT_ID || '',
-    ZITADEL_CLIENT_SECRET: process.env.ZITADEL_CLIENT_SECRET || '',
-    ZITADEL_ISSUER: process.env.ZITADEL_ISSUER || '',
-    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET || '',
-
     ENABLE_LANGFUSE: process.env.ENABLE_LANGFUSE === '1',
     LANGFUSE_SECRET_KEY: process.env.LANGFUSE_SECRET_KEY || '',
     LANGFUSE_PUBLIC_KEY: process.env.LANGFUSE_PUBLIC_KEY || '',

package/src/config/server/auth.ts

@@ -0,0 +1,71 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix , typescript-sort-keys/interface */
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace NodeJS {
+    interface ProcessEnv {
+      ENABLE_OAUTH_SSO?: string;
+      SSO_PROVIDERS?: string;
+
+      AUTH0_CLIENT_ID?: string;
+      AUTH0_CLIENT_SECRET?: string;
+      AUTH0_ISSUER?: string;
+
+      // Github
+      GITHUB_CLIENT_ID?: string;
+      GITHUB_CLIENT_SECRET?: string;
+
+      // Azure AD
+      AZURE_AD_CLIENT_ID?: string;
+      AZURE_AD_CLIENT_SECRET?: string;
+      AZURE_AD_TENANT_ID?: string;
+
+      // AUTHENTIK
+      AUTHENTIK_CLIENT_ID?: string;
+      AUTHENTIK_CLIENT_SECRET?: string;
+      AUTHENTIK_ISSUER?: string;
+
+      // ZITADEL
+      ZITADEL_CLIENT_ID?: string;
+      ZITADEL_CLIENT_SECRET?: string;
+      ZITADEL_ISSUER?: string;
+      NEXTAUTH_SECRET?: string;
+    }
+  }
+}
+
+export const getAuthConfig = () => {
+  if (typeof process === 'undefined') {
+    throw new Error('[Server Config] you are importing a server-only module outside of server');
+  }
+
+  return {
+    ENABLE_OAUTH_SSO: !!process.env.ENABLE_OAUTH_SSO,
+    SSO_PROVIDERS: process.env.SSO_PROVIDERS || 'auth0',
+
+    // Auth0
+    AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID || '',
+    AUTH0_CLIENT_SECRET: process.env.AUTH0_CLIENT_SECRET || '',
+    AUTH0_ISSUER: process.env.AUTH0_ISSUER || '',
+
+    // Github
+    GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID || '',
+    GITHUB_CLIENT_SECRET: process.env.GITHUB_CLIENT_SECRET || '',
+
+    // Azure AD
+    AZURE_AD_CLIENT_ID: process.env.AZURE_AD_CLIENT_ID || '',
+    AZURE_AD_CLIENT_SECRET: process.env.AZURE_AD_CLIENT_SECRET || '',
+    AZURE_AD_TENANT_ID: process.env.AZURE_AD_TENANT_ID || '',
+
+    // AUTHENTIK
+    AUTHENTIK_CLIENT_ID: process.env.AUTHENTIK_CLIENT_ID || '',
+    AUTHENTIK_CLIENT_SECRET: process.env.AUTHENTIK_CLIENT_SECRET || '',
+    AUTHENTIK_ISSUER: process.env.AUTHENTIK_ISSUER || '',
+
+    // ZITADEL
+    ZITADEL_CLIENT_ID: process.env.ZITADEL_CLIENT_ID || '',
+    ZITADEL_CLIENT_SECRET: process.env.ZITADEL_CLIENT_SECRET || '',
+    ZITADEL_ISSUER: process.env.ZITADEL_ISSUER || '',
+    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET || '',
+  };
+};

package/src/config/server/index.ts

@@ -1,5 +1,6 @@
 import { getAnalyticsConfig } from './analytics';
 import { getAppConfig } from './app';
+import { getAuthConfig } from './auth';
 import { getProviderConfig } from './provider';
 
 export const getServerConfig = () => {
@@ -9,7 +10,8 @@ export const getServerConfig = () => {
 
   const provider = getProviderConfig();
   const app = getAppConfig();
+  const auth = getAuthConfig();
   const analytics = getAnalyticsConfig();
 
-  return { ...provider, ...app, ...analytics };
+  return { ...provider, ...app, ...analytics, ...auth };
 };

package/src/database/client/models/__tests__/session.test.ts

@@ -111,12 +111,10 @@ describe('SessionModel', () => {
 
       expect(updatedSession).toHaveProperty('group', 'newGroup');
     });
-  });
 
-  describe('updatePinned', () => {
     it('should update pinned status of a session', async () => {
       const createdSession = await SessionModel.create('agent', sessionData);
-      await SessionModel.updatePinned(createdSession.id, true);
+      await SessionModel.update(createdSession.id, { pinned: 1 });
       const updatedSession = await SessionModel.findById(createdSession.id);
       expect(updatedSession).toHaveProperty('pinned', 1);
     });

package/src/database/client/models/session.ts

@@ -171,6 +171,10 @@ class _SessionModel extends BaseModel {
     return (await this.table.count()) === 0;
   }
 
+  async count() {
+    return this.table.count();
+  }
+
   // **************** Create *************** //
 
   async create(type: 'agent' | 'group', defaultValue: Partial<LobeAgentSession>, id = uuid()) {
@@ -238,10 +242,6 @@ class _SessionModel extends BaseModel {
     return super._updateWithSync(id, data);
   }
 
-  async updatePinned(id: string, pinned: boolean) {
-    return this.update(id, { pinned: pinned ? 1 : 0 });
-  }
-
   async updateConfig(id: string, data: DeepPartial<LobeAgentConfig>) {
     const session = await this.findById(id);
     if (!session) return;

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

@@ -0,0 +1,10 @@
+import { SessionProvider } from 'next-auth/react';
+import { PropsWithChildren } from 'react';
+
+import { API_ENDPOINTS } from '@/services/_url';
+
+const NextAuth = ({ children }: PropsWithChildren) => {
+  return <SessionProvider basePath={API_ENDPOINTS.oauth}>{children}</SessionProvider>;
+};
+
+export default NextAuth;

package/src/layout/AuthProvider/index.tsx

@@ -1,16 +1,12 @@
-import { SessionProvider } from 'next-auth/react';
 import { PropsWithChildren } from 'react';
 
 import { getServerConfig } from '@/config/server';
-import { API_ENDPOINTS } from '@/services/_url';
+
+import NextAuth from './NextAuth';
 
 const { ENABLE_OAUTH_SSO = false } = getServerConfig();
 
 const AuthProvider = ({ children }: PropsWithChildren) =>
-  ENABLE_OAUTH_SSO ? (
-    <SessionProvider basePath={API_ENDPOINTS.oauth}>{children}</SessionProvider>
-  ) : (
-    children
-  );
+  ENABLE_OAUTH_SSO ? <NextAuth>{children}</NextAuth> : children;
 
 export default AuthProvider;

package/src/layout/DefaultLayout/Desktop/SideBar/Avatar.tsx

@@ -0,0 +1,11 @@
+import { memo } from 'react';
+
+import AvatarWithUpload from '@/features/AvatarWithUpload';
+
+const Avatar = memo(() => {
+  return <AvatarWithUpload id={'avatar'} />;
+});
+
+Avatar.displayName = 'Avatar';
+
+export default Avatar;

package/src/layout/{GlobalLayout → DefaultLayout}/Desktop/SideBar/index.tsx

@@ -1,9 +1,9 @@
 import { SideNav } from '@lobehub/ui';
 import { memo } from 'react';
 
-import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { SidebarTabKey } from '@/store/global/initialState';
 
+import Avatar from './Avatar';
 import BottomActions from './BottomActions';
 import TopActions from './TopActions';
 
@@ -14,7 +14,7 @@ interface Props {
 export default memo<Props>(({ sidebarKey }) => {
   return (
     <SideNav
-      avatar={<AvatarWithUpload id={'avatar'} />}
+      avatar={<Avatar />}
       bottomActions={<BottomActions tab={sidebarKey} />}
       style={{ height: '100%' }}
       topActions={<TopActions tab={sidebarKey} />}

package/src/layout/{GlobalLayout/Mobile/Client.tsx → DefaultLayout/Mobile/index.tsx}

@@ -1,3 +1,5 @@
+'use client';
+
 import { type MobileNavBarTitleProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import dynamic from 'next/dynamic';

package/src/layout/DefaultLayout/index.ts

@@ -0,0 +1,2 @@
+export { default as DefaultLayoutDesktop } from './Desktop';
+export { default as DefaultLayoutMobile } from './Mobile';