@lobehub/chat 1.36.37 → 1.36.39

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 1.36.39](https://github.com/lobehub/lobe-chat/compare/v1.36.38...v1.36.39)
+
+<sup>Released on **2024-12-20**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor to use async `headers()`.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor to use async `headers()`, closes [#5097](https://github.com/lobehub/lobe-chat/issues/5097) ([e368f38](https://github.com/lobehub/lobe-chat/commit/e368f38))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 1.36.38](https://github.com/lobehub/lobe-chat/compare/v1.36.37...v1.36.38)
+
+<sup>Released on **2024-12-20**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor layout props.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor layout props, closes [#5093](https://github.com/lobehub/lobe-chat/issues/5093) ([2990b5a](https://github.com/lobehub/lobe-chat/commit/2990b5a))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.36.37](https://github.com/lobehub/lobe-chat/compare/v1.36.36...v1.36.37)
 
 <sup>Released on **2024-12-19**</sup>

package/changelog/v1.json

@@ -1,4 +1,22 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Refactor to use async headers()."
+      ]
+    },
+    "date": "2024-12-20",
+    "version": "1.36.39"
+  },
+  {
+    "children": {
+      "improvements": [
+        "Refactor layout props."
+      ]
+    },
+    "date": "2024-12-20",
+    "version": "1.36.38"
+  },
   {
     "children": {},
     "date": "2024-12-19",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.36.37",
+  "version": "1.36.39",
   "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",
@@ -202,7 +202,7 @@
     "react-i18next": "14.0.2",
     "react-layout-kit": "^1.9.0",
     "react-lazy-load": "^4.0.1",
-    "react-pdf": "^9.1.1",
+    "react-pdf": "^9.2.1",
     "react-scan": "^0.0.46",
     "react-virtuoso": "^4.12.0",
     "react-wrap-balancer": "^1.1.1",

package/src/app/(main)/(mobile)/me/(home)/page.tsx

@@ -17,8 +17,8 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = () => {
-  const mobile = isMobileDevice();
+const Page = async () => {
+  const mobile = await isMobileDevice();
 
   if (!mobile) return redirect('/chat');
 

package/src/app/(main)/(mobile)/me/data/page.tsx

@@ -14,8 +14,8 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = () => {
-  const mobile = isMobileDevice();
+const Page = async () => {
+  const mobile = await isMobileDevice();
 
   if (!mobile) return redirect('/chat');
 

package/src/app/(main)/(mobile)/me/profile/page.tsx

@@ -15,8 +15,8 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = () => {
-  const mobile = isMobileDevice();
+const Page = async () => {
+  const mobile = await isMobileDevice();
 
   if (!mobile) return redirect('/profile');
 

package/src/app/(main)/(mobile)/me/settings/page.tsx

@@ -15,8 +15,8 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = () => {
-  const mobile = isMobileDevice();
+const Page = async () => {
+  const mobile = await isMobileDevice();
 
   if (!mobile) return redirect('/settings/common');
 

package/src/app/(main)/chat/(workspace)/@conversation/default.tsx

@@ -6,14 +6,14 @@ import ChatList from './features/ChatList';
 import ThreadHydration from './features/ThreadHydration';
 import ZenModeToast from './features/ZenModeToast';
 
-const ChatConversation = () => {
-  const mobile = isMobileDevice();
+const ChatConversation = async () => {
+  const mobile = await isMobileDevice();
 
   return (
     <>
       <ZenModeToast />
       <ChatList mobile={mobile} />
-      <ChatInput />
+      <ChatInput mobile={mobile} />
       <ChatHydration />
       <ThreadHydration />
     </>

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/index.tsx

@@ -1,10 +1,8 @@
 import MobileChatInput from '@/features/ChatInput/Mobile';
-import { isMobileDevice } from '@/utils/server/responsive';
 
 import DesktopChatInput from './Desktop';
 
-const ChatInput = () => {
-  const mobile = isMobileDevice();
+const ChatInput = ({ mobile }: { mobile: boolean }) => {
   const Input = mobile ? MobileChatInput : DesktopChatInput;
 
   return <Input />;

package/src/app/(main)/chat/(workspace)/@portal/default.tsx

@@ -8,8 +8,8 @@ import Mobile from './_layout/Mobile';
 
 const PortalBody = lazy(() => import('@/features/Portal/router'));
 
-const Inspector = () => {
-  const mobile = isMobileDevice();
+const Inspector = async () => {
+  const mobile = await isMobileDevice();
 
   const Layout = mobile ? Mobile : Desktop;
 

package/src/app/(main)/chat/(workspace)/@topic/default.tsx

@@ -10,8 +10,8 @@ import SystemRole from './features/SystemRole';
 
 const TopicContent = lazy(() => import('./features/TopicListContent'));
 
-const Topic = () => {
-  const mobile = isMobileDevice();
+const Topic = async () => {
+  const mobile = await isMobileDevice();
 
   const Layout = mobile ? Mobile : Desktop;
 

package/src/app/(main)/chat/(workspace)/page.tsx

@@ -18,7 +18,7 @@ export const generateMetadata = async () => {
 };
 
 const Page = async () => {
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
   const { t } = await translation('metadata');
   const ld = ldModule.generate({
     description: t('chat.title', { appName: BRANDING_NAME }),

package/src/app/(main)/discover/(detail)/assistant/[slug]/page.tsx

@@ -62,7 +62,7 @@ const Page = async (props: DiscoverPageProps) => {
 
   const { slug: identifier } = params;
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getAssistantById(locale, identifier);

package/src/app/(main)/discover/(detail)/model/[...slugs]/page.tsx

@@ -72,7 +72,7 @@ const Page = async (props: Props) => {
   const identifier = decodeURIComponent(slugs.join('/'));
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('models', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getModelById(locale, identifier);

package/src/app/(main)/discover/(detail)/plugin/[slug]/page.tsx

@@ -64,7 +64,7 @@ const Page = async (props: DiscoverPageProps) => {
 
   const { slug: identifier } = params;
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getPluginById(locale, identifier, true);

package/src/app/(main)/discover/(detail)/provider/[slug]/page.tsx

@@ -62,7 +62,7 @@ const Page = async (props: DiscoverPageProps) => {
   const { slug: identifier } = params;
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('models', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getProviderById(locale, identifier);

package/src/app/(main)/discover/(list)/assistants/[slug]/page.tsx

@@ -32,7 +32,7 @@ const Page = async (props: DiscoverPageProps<AssistantCategory>) => {
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('discover', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getAssistantCategory(locale, params.slug);

package/src/app/(main)/discover/(list)/assistants/page.tsx

@@ -25,7 +25,7 @@ export const generateMetadata = async (props: Props) => {
 const Page = async (props: Props) => {
   const searchParams = await props.searchParams;
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getAssistantList(locale);

package/src/app/(main)/discover/(list)/models/[slug]/page.tsx

@@ -35,7 +35,7 @@ const Page = async (props: DiscoverPageProps) => {
   const searchParams = await props.searchParams;
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const list = await discoverService.getProviderList(locale);

package/src/app/(main)/discover/(list)/models/page.tsx

@@ -29,7 +29,7 @@ const Page = async (props: Props) => {
   const searchParams = await props.searchParams;
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getModelList(locale);

package/src/app/(main)/discover/(list)/plugins/[slug]/page.tsx

@@ -32,7 +32,7 @@ const Page = async (props: DiscoverPageProps<PluginCategory>) => {
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('discover', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getPluginCategory(locale, params.slug);

package/src/app/(main)/discover/(list)/plugins/page.tsx

@@ -26,7 +26,7 @@ export const generateMetadata = async (props: Props) => {
 const Page = async (props: Props) => {
   const searchParams = await props.searchParams;
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getPluginList(locale);

package/src/app/(main)/discover/(list)/providers/page.tsx

@@ -26,7 +26,7 @@ export const generateMetadata = async (props: Props) => {
 const Page = async (props: Props) => {
   const searchParams = await props.searchParams;
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getProviderList(locale);

package/src/app/(main)/discover/search/page.tsx

@@ -56,7 +56,7 @@ const Page = async (props: Props) => {
   const keywords = decodeURIComponent(q);
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const ld = ldModule.generate({
     description: t('discover.description'),

package/src/app/(main)/profile/[[...slugs]]/page.tsx

@@ -13,8 +13,9 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = () => {
-  const mobile = isMobileDevice();
+const Page = async () => {
+  const mobile = await isMobileDevice();
+
   return <Client mobile={mobile} />;
 };
 

package/src/app/(main)/profile/layout.tsx

@@ -6,10 +6,11 @@ import { isMobileDevice } from '@/utils/server/responsive';
 
 import MobileLayout from './_layout/Mobile';
 
-const Layout = ({ children }: PropsWithChildren) => {
+const Layout = async ({ children }: PropsWithChildren) => {
   if (!enableClerk) return notFound();
 
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
+
   if (mobile) return <MobileLayout>{children}</MobileLayout>;
 
   return children;

package/src/app/(main)/profile/loading.tsx

@@ -3,8 +3,8 @@ import { Flexbox } from 'react-layout-kit';
 import SkeletonLoading from '@/components/SkeletonLoading';
 import { isMobileDevice } from '@/utils/server/responsive';
 
-const Loading = () => {
-  const mobile = isMobileDevice();
+const Loading = async () => {
+  const mobile = await isMobileDevice();
   if (mobile) return <SkeletonLoading paragraph={{ rows: 8 }} />;
   return (
     <Flexbox horizontal style={{ position: 'relative' }} width={'100%'}>

package/src/app/(main)/repos/[id]/evals/evaluation/page.tsx

@@ -12,7 +12,7 @@ interface Params {
   id: string;
 }
 
-type Props = { params: Params };
+type Props = { params: Params & Promise<Params> };
 
 const Evaluation = ({ params }: Props) => {
   const knowledgeBaseId = params.id;

package/src/app/(main)/repos/[id]/evals/layout.tsx

@@ -1,14 +1,18 @@
 import { notFound } from 'next/navigation';
-import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { serverFeatureFlags } from '@/config/featureFlags';
-import { PagePropsWithId } from '@/types/next';
 
 import Container from './components/Container';
 import { Tabs } from './components/Tabs';
 
-export default async (props: PropsWithChildren<PagePropsWithId>) => {
+interface LayoutProps {
+  children: ReactNode;
+  params: Promise<{ id: string }>;
+}
+
+const Layout = async (props: LayoutProps) => {
   const enableRAGEval = serverFeatureFlags().enableRAGEval;
   const params = await props.params;
 
@@ -21,3 +25,5 @@ export default async (props: PropsWithChildren<PagePropsWithId>) => {
     </Flexbox>
   );
 };
+
+export default Layout;

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

@@ -13,8 +13,8 @@ export const generateMetadata = async () => {
   });
 };
 
-export default () => {
-  const isMobile = isMobileDevice();
+export default async () => {
+  const isMobile = await isMobileDevice();
 
   return <Page mobile={isMobile} />;
 };

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

@@ -15,12 +15,12 @@ export const generateMetadata = async () => {
     url: '/settings/sync',
   });
 };
-export default () => {
+export default async () => {
   const enableWebrtc = serverFeatureFlags().enableWebrtc;
   if (!enableWebrtc) return notFound();
 
-  const isMobile = isMobileDevice();
-  const { os, browser } = gerServerDeviceInfo();
+  const isMobile = await isMobileDevice();
+  const { os, browser } = await gerServerDeviceInfo();
 
   return <Page browser={browser} mobile={isMobile} os={os} />;
 };

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

@@ -7,9 +7,9 @@ import SettingsModal from './index';
  * @refs: https://github.com/lobehub/lobe-chat/discussions/2295#discussioncomment-9290942
  */
 
-const Page = () => {
-  const isMobile = isMobileDevice();
-  const { os, browser } = gerServerDeviceInfo();
+const Page = async () => {
+  const isMobile = await isMobileDevice();
+  const { os, browser } = await gerServerDeviceInfo();
 
   return <SettingsModal browser={browser} mobile={isMobile} os={os} />;
 };

package/src/app/layout.tsx

@@ -25,7 +25,7 @@ const RootLayout = async ({ children, modal }: RootLayoutProps) => {
   const locale = lang?.value || DEFAULT_LANG;
 
   const direction = isRtlLang(locale) ? 'rtl' : 'ltr';
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   return (
     <html dir={direction} lang={locale} suppressHydrationWarning>
@@ -49,7 +49,7 @@ export default RootLayout;
 export { generateMetadata } from './metadata';
 
 export const generateViewport = async (): ResolvingViewport => {
-  const isMobile = isMobileDevice();
+  const isMobile = await isMobileDevice();
 
   const dynamicScale = isMobile ? { maximumScale: 1, userScalable: false } : {};
 

package/src/components/server/ServerLayout.tsx

@@ -9,8 +9,8 @@ interface ServerLayoutProps<T> {
 
 const ServerLayout =
   <T extends PropsWithChildren>({ Desktop, Mobile }: ServerLayoutProps<T>): FC<T> =>
-  (props: T) => {
-    const mobile = isMobileDevice();
+  async (props: T) => {
+    const mobile = await isMobileDevice();
     return mobile ? <Mobile {...props} /> : <Desktop {...props} />;
   };
 

package/src/layout/GlobalProvider/index.tsx

@@ -68,7 +68,7 @@ const GlobalLayout = async ({ children }: PropsWithChildren) => {
   // get default feature flags to use with ssr
   const serverFeatureFlags = getServerFeatureFlagsValue();
   const serverConfig = getServerGlobalConfig();
-  const isMobile = isMobileDevice();
+  const isMobile = await isMobileDevice();
   return (
     <StyleRegistry>
       <Locale antdLocale={antdLocale} defaultLang={userLocale}>

package/src/utils/server/responsive.ts

@@ -4,12 +4,12 @@ import { UAParser } from 'ua-parser-js';
 /**
  * check mobile device in server
  */
-export const isMobileDevice = () => {
+export const isMobileDevice = async () => {
   if (typeof process === 'undefined') {
     throw new Error('[Server method] you are importing a server-only module outside of server');
   }
 
-  const { get } = headers();
+  const { get } = await headers();
   const ua = get('user-agent');
 
   // console.debug(ua);
@@ -21,15 +21,14 @@ export const isMobileDevice = () => {
 /**
  * check mobile device in server
  */
-export const gerServerDeviceInfo = () => {
+export const gerServerDeviceInfo = async () => {
   if (typeof process === 'undefined') {
     throw new Error('[Server method] you are importing a server-only module outside of server');
   }
 
-  const { get } = headers();
+  const { get } = await headers();
   const ua = get('user-agent');
 
-  // console.debug(ua);
   const parser = new UAParser(ua || '');
 
   return {