@lobehub/chat 1.51.2 → 1.51.4

package/CHANGELOG.md

@@ -2,6 +2,64 @@
 
 # Changelog
 
+### [Version 1.51.4](https://github.com/lobehub/lobe-chat/compare/v1.51.3...v1.51.4)
+
+<sup>Released on **2025-02-06**</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.51.3](https://github.com/lobehub/lobe-chat/compare/v1.51.2...v1.51.3)
+
+<sup>Released on **2025-02-05**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor Wenxin with LobeOpenAICompatibleFactory.
+
+#### 🐛 Bug Fixes
+
+- **misc**: Artifact Parsing and Rendering Bug Fix for Gemini 2.0 Flash.
+
+#### 💄 Styles
+
+- **misc**: Add Cache, Metadata, FeatureFlag Viewer to DevPanel.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor Wenxin with LobeOpenAICompatibleFactory, closes [#5729](https://github.com/lobehub/lobe-chat/issues/5729) ([a90a75e](https://github.com/lobehub/lobe-chat/commit/a90a75e))
+
+#### What's fixed
+
+- **misc**: Artifact Parsing and Rendering Bug Fix for Gemini 2.0 Flash, closes [#5633](https://github.com/lobehub/lobe-chat/issues/5633) ([7d782b1](https://github.com/lobehub/lobe-chat/commit/7d782b1))
+
+#### Styles
+
+- **misc**: Add Cache, Metadata, FeatureFlag Viewer to DevPanel, closes [#5764](https://github.com/lobehub/lobe-chat/issues/5764) ([db4e9c7](https://github.com/lobehub/lobe-chat/commit/db4e9c7))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.51.2](https://github.com/lobehub/lobe-chat/compare/v1.51.1...v1.51.2)
 
 <sup>Released on **2025-02-05**</sup>

package/Dockerfile

@@ -212,7 +212,7 @@ ENV \
     # Upstage
     UPSTAGE_API_KEY="" UPSTAGE_MODEL_LIST="" \
     # Wenxin
-    WENXIN_ACCESS_KEY="" WENXIN_SECRET_KEY="" WENXIN_MODEL_LIST="" \
+    WENXIN_API_KEY="" WENXIN_MODEL_LIST="" \
     # xAI
     XAI_API_KEY="" XAI_MODEL_LIST="" XAI_PROXY_URL="" \
     # 01.AI

package/Dockerfile.database

@@ -247,7 +247,7 @@ ENV \
     # Upstage
     UPSTAGE_API_KEY="" UPSTAGE_MODEL_LIST="" \
     # Wenxin
-    WENXIN_ACCESS_KEY="" WENXIN_SECRET_KEY="" WENXIN_MODEL_LIST="" \
+    WENXIN_API_KEY="" WENXIN_MODEL_LIST="" \
     # xAI
     XAI_API_KEY="" XAI_MODEL_LIST="" XAI_PROXY_URL="" \
     # 01.AI

package/changelog/v1.json

@@ -1,4 +1,21 @@
 [
+  {
+    "children": {},
+    "date": "2025-02-06",
+    "version": "1.51.4"
+  },
+  {
+    "children": {
+      "improvements": [
+        "Add Cache, Metadata, FeatureFlag Viewer to DevPanel."
+      ],
+      "fixes": [
+        "Artifact Parsing and Rendering Bug Fix for Gemini 2.0 Flash."
+      ]
+    },
+    "date": "2025-02-05",
+    "version": "1.51.3"
+  },
   {
     "children": {
       "improvements": [

package/docs/usage/providers/wenxin.mdx

@@ -22,27 +22,30 @@ This article will guide you on how to use Wenxin Qianfan in LobeChat.
 <Steps>
   ### Step 1: Obtain the Wenxin Qianfan API Key
 
-  - Register and log in to the [Baidu Intelligent Cloud Console](https://console.bce.baidu.com/)
-  - Navigate to `Baidu Intelligent Cloud Qianfan ModelBuilder`
-  - Choose `Application Access` from the left-side menu
-  - Create an application
+  - Register and log in to the [Baidu AI Cloud Console](https://console.bce.baidu.com/)
+  - Navigate to `Baidu AI Cloud Qianfan ModelBuilder`
+  - Select `API Key` from the left menu
 
-  <Image alt={'Create Application'} inStep src={'https://github.com/user-attachments/assets/927b1040-e23f-4919-92e2-80a400db8327'} />
+  <Image alt={'API Key'} inStep src={'https://github.com/user-attachments/assets/6234428d-5633-4b2f-be22-1a1772a69a55'} />
 
-  - Enter the `Security Authentication` -> `Access Key` management page from the user account menu
-  - Copy the `Access Key` and `Secret Key`, and store them safely
+  - Click `Create API Key`
+  - In `Service`, select `Qianfan ModelBuilder`
+  - In `Resource`, choose `All Resources`
+  - Click the `Confirm` button
+  - Copy the `API Key` and keep it safe
 
-  <Image alt={'Save Keys'} inStep src={'https://github.com/user-attachments/assets/bb9dadd3-7e9c-45fd-8c56-553ab7287453'} />
+  <Image alt={'Create API Key'} inStep src={'https://github.com/user-attachments/assets/6d068fe0-8100-4b43-b0c3-7934f54e688f'} />
+  <Image alt={'Copy API Key'} inStep src={'https://github.com/user-attachments/assets/629adf4e-e9e1-40dc-b9e5-d7b908878170'} />
 
   ### Step 2: Configure Wenxin Qianfan in LobeChat
 
-  - Go to the `Settings` interface in LobeChat
-  - Locate the settings for `Wenxin Qianfan` under `Language Model`
+  - Go to the `Settings` page of LobeChat
+  - Under `Language Models`, find the `Wenxin Qianfan` settings
 
-  <Image alt={'Enter API Keys'} inStep src={'https://github.com/user-attachments/assets/e3995de7-38d9-489b-80a2-434477018469'} />
+  <Image alt={'Enter API Key'} inStep src={'https://github.com/user-attachments/assets/d7666e2a-0202-4b45-8338-9806ddffa44e'} />
 
-  - Enter the obtained `Access Key` and `Secret Key`
-  - Select a Wenxin Qianfan model for your AI assistant to start interacting
+  - Enter the obtained `API Key`
+  - Select a Wenxin Qianfan model for your AI assistant, and you're ready to start chatting!
 
   <Image alt={'Select Wenxin Qianfan Model and Start Chat'} inStep src={'https://github.com/user-attachments/assets/b6e6a3eb-13c6-46f0-9c7c-69a20deae30f'} />
 

package/docs/usage/providers/wenxin.zh-CN.mdx

@@ -22,24 +22,27 @@ tags:
 
   - 注册并登录 [百度智能云控制台](https://console.bce.baidu.com/)
   - 进入 `百度智能云千帆 ModelBuilder`
-  - 在左侧菜单中选择`应用接入`
-  - 创建一个应用
+  - 在左侧菜单中选择 `API Key`
 
-  <Image alt={'创建应用'} inStep src={'https://github.com/user-attachments/assets/927b1040-e23f-4919-92e2-80a400db8327'} />
+  <Image alt={'API Key'} inStep src={'https://github.com/user-attachments/assets/6234428d-5633-4b2f-be22-1a1772a69a55'} />
 
-  - 在用户账号菜单进入 `安全认证` -> `Access Key` 管理页面
-  - 复制 `Access Key` 和 `Secret Key`，并妥善保存
+  - 点击创建 API Key
+  - 在 `服务` 中选择 `千帆ModelBuilder`
+  - 在 `资源` 中选择 `所有资源`
+  - 点击 `确定` 按钮
+  - 复制 `API Key` 并妥善保存
 
-  <Image alt={'保存密钥'} inStep src={'https://github.com/user-attachments/assets/bb9dadd3-7e9c-45fd-8c56-553ab7287453'} />
+  <Image alt={'创建密钥'} inStep src={'https://github.com/user-attachments/assets/6d068fe0-8100-4b43-b0c3-7934f54e688f'} />
+  <Image alt={'复制密钥'} inStep src={'https://github.com/user-attachments/assets/629adf4e-e9e1-40dc-b9e5-d7b908878170'} />
 
   ### 步骤二：在 LobeChat 中配置文心千帆
 
   - 访问 LobeChat 的`设置`界面
   - 在`语言模型`下找到 `文心千帆` 的设置项
 
-  <Image alt={'填入 API 密钥'} inStep src={'https://github.com/user-attachments/assets/e3995de7-38d9-489b-80a2-434477018469'} />
+  <Image alt={'填入 API 密钥'} inStep src={'https://github.com/user-attachments/assets/d7666e2a-0202-4b45-8338-9806ddffa44e'} />
 
-  - 填入获得的 `Access Key` 和 `Secret Key`
+  - 填入获得的 `API Key`
   - 为你的 AI 助手选择一个文心千帆的模型即可开始对话
 
   <Image alt={'选择文心千帆模型并开始对话'} inStep src={'https://github.com/user-attachments/assets/b6e6a3eb-13c6-46f0-9c7c-69a20deae30f'} />

package/next.config.ts

@@ -176,6 +176,11 @@ const nextConfig: NextConfig = {
       permanent: false,
       source: '/repos',
     },
+    {
+      destination: '/files',
+      permanent: false,
+      source: '/repos',
+    },
   ],
   // when external packages in dev mode with turbopack, this config will lead to bundle error
   serverExternalPackages: isProd ? ['@electric-sql/pglite'] : undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.51.2",
+  "version": "1.51.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",
@@ -111,7 +111,6 @@
     "@aws-sdk/s3-request-presigner": "^3.723.0",
     "@azure/core-rest-pipeline": "1.16.0",
     "@azure/openai": "1.0.0-beta.12",
-    "@baiducloud/qianfan": "^0.1.9",
     "@cfworker/json-schema": "^4.1.0",
     "@clerk/localizations": "^3.9.6",
     "@clerk/nextjs": "^6.10.6",
@@ -318,7 +317,7 @@
     "vitest": "~1.2.2",
     "vitest-canvas-mock": "^0.3.3"
   },
-  "packageManager": "pnpm@9.15.4",
+  "packageManager": "pnpm@10.2.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"

package/src/app/{(main) → [variants]/(main)}/(mobile)/me/(home)/page.tsx

@@ -4,7 +4,8 @@ import { Center } from 'react-layout-kit';
 import BrandWatermark from '@/components/BrandWatermark';
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import Category from './features/Category';
 import UserBanner from './features/UserBanner';
@@ -17,10 +18,10 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = async () => {
-  const mobile = await isMobileDevice();
+const Page = async (props: DynamicLayoutProps) => {
+  const isMobile = await RouteVariants.getIsMobile(props);
 
-  if (!mobile) return redirect('/chat');
+  if (!isMobile) return redirect('/chat');
 
   return (
     <>
@@ -36,3 +37,5 @@ const Page = async () => {
 Page.displayName = 'Me';
 
 export default Page;
+
+export const dynamic = 'force-static';

package/src/app/{(main) → [variants]/(main)}/(mobile)/me/profile/features/Category.tsx

@@ -9,7 +9,7 @@ import Cell, { CellProps } from '@/components/Cell';
 import { isDeprecatedEdition } from '@/const/version';
 import { ProfileTabs } from '@/store/global/initialState';
 import { useUserStore } from '@/store/user';
-import { authSelectors } from '@/store/user/slices/auth/selectors';
+import { authSelectors } from '@/store/user/selectors';
 
 const Category = memo(() => {
   const [isLogin, enableAuth, isLoginWithClerk, signOut] = useUserStore((s) => [

package/src/app/{(main) → [variants]/(main)}/(mobile)/me/profile/page.tsx

@@ -2,7 +2,8 @@ import { redirect } from 'next/navigation';
 
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import Category from './features/Category';
 
@@ -15,10 +16,10 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = async () => {
-  const mobile = await isMobileDevice();
+const Page = async (props: DynamicLayoutProps) => {
+  const isMobile = await RouteVariants.getIsMobile(props);
 
-  if (!mobile) return redirect('/profile');
+  if (!isMobile) return redirect('/profile');
 
   return <Category />;
 };
@@ -26,3 +27,5 @@ const Page = async () => {
 Page.displayName = 'MeProfile';
 
 export default Page;
+
+export const dynamic = 'force-static';

package/src/app/{(main) → [variants]/(main)}/(mobile)/me/settings/page.tsx

@@ -2,7 +2,8 @@ import { redirect } from 'next/navigation';
 
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import Category from './features/Category';
 
@@ -15,10 +16,10 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = async () => {
-  const mobile = await isMobileDevice();
+const Page = async (props: DynamicLayoutProps) => {
+  const isMobile = await RouteVariants.getIsMobile(props);
 
-  if (!mobile) return redirect('/settings/common');
+  if (!isMobile) return redirect('/settings/common');
 
   return <Category />;
 };
@@ -26,3 +27,5 @@ const Page = async () => {
 Page.displayName = 'MeSettings';
 
 export default Page;
+
+export const dynamic = 'force-static';

package/src/app/{(main) → [variants]/(main)}/_layout/Desktop/SideBar/index.tsx

@@ -2,7 +2,7 @@
 
 import { SideNav } from '@lobehub/ui';
 import { parseAsBoolean, useQueryState } from 'nuqs';
-import { memo } from 'react';
+import { Suspense, memo } from 'react';
 
 import { useActiveTabKey } from '@/hooks/useActiveTabKey';
 import { useGlobalStore } from '@/store/global';
@@ -14,11 +14,16 @@ import BottomActions from './BottomActions';
 import PinList from './PinList';
 import TopActions from './TopActions';
 
-const Nav = memo(() => {
+const Top = () => {
+  const [isPinned] = useQueryState('pinned', parseAsBoolean);
   const sidebarKey = useActiveTabKey();
+
+  return <TopActions isPinned={isPinned} tab={sidebarKey} />;
+};
+
+const Nav = memo(() => {
   const inZenMode = useGlobalStore(systemStatusSelectors.inZenMode);
   const { showPinList } = useServerConfigStore(featureFlagsSelectors);
-  const [isPinned] = useQueryState('pinned', parseAsBoolean);
 
   return (
     !inZenMode && (
@@ -27,10 +32,10 @@ const Nav = memo(() => {
         bottomActions={<BottomActions />}
         style={{ height: '100%', zIndex: 100 }}
         topActions={
-          <>
-            <TopActions isPinned={isPinned} tab={sidebarKey} />
+          <Suspense>
+            <Top />
             {showPinList && <PinList />}
-          </>
+          </Suspense>
         }
       />
     )

package/src/app/{(main) → [variants]/(main)}/_layout/Mobile/index.tsx

@@ -2,9 +2,9 @@
 
 import dynamic from 'next/dynamic';
 import { usePathname } from 'next/navigation';
-import qs from 'query-string';
 import { PropsWithChildren, memo } from 'react';
 
+import { withSuspense } from '@/components/withSuspense';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
@@ -24,8 +24,7 @@ const MOBILE_NAV_ROUTES = new Set([
 const Layout = memo(({ children }: PropsWithChildren) => {
   const showMobileWorkspace = useShowMobileWorkspace();
   const pathname = usePathname();
-  const { url } = qs.parseUrl(pathname);
-  const showNav = !showMobileWorkspace && MOBILE_NAV_ROUTES.has(url);
+  const showNav = !showMobileWorkspace && MOBILE_NAV_ROUTES.has(pathname);
 
   const { showCloudPromotion } = useServerConfigStore(featureFlagsSelectors);
 
@@ -40,4 +39,4 @@ const Layout = memo(({ children }: PropsWithChildren) => {
 
 Layout.displayName = 'MobileMainLayout';
 
-export default Layout;
+export default withSuspense(Layout);

package/src/app/{(main) → [variants]/(main)}/changelog/modal/page.tsx

@@ -2,6 +2,7 @@
 
 import { useLayoutEffect } from 'react';
 
+import { withSuspense } from '@/components/withSuspense';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 
 /**
@@ -10,7 +11,7 @@ import { useQueryRoute } from '@/hooks/useQueryRoute';
  * @refs: https://github.com/lobehub/lobe-chat/discussions/2295#discussioncomment-9290942
  */
 
-const ChangelogModalFallback = () => {
+const ChangelogModal = () => {
   const router = useQueryRoute();
 
   useLayoutEffect(() => {
@@ -20,4 +21,4 @@ const ChangelogModalFallback = () => {
   return null;
 };
 
-export default ChangelogModalFallback;
+export default withSuspense(ChangelogModal);

package/src/app/{(main) → [variants]/(main)}/changelog/page.tsx

@@ -4,7 +4,7 @@ import { Fragment, Suspense } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import Pagination from '@/app/@modal/(.)changelog/modal/features/Pagination';
+import Pagination from '@/app/[variants]/@modal/(.)changelog/modal/features/Pagination';
 import StructuredData from '@/components/StructuredData';
 import { serverFeatureFlags } from '@/config/featureFlags';
 import { BRANDING_NAME } from '@/const/branding';
@@ -13,7 +13,8 @@ import { ldModule } from '@/server/ld';
 import { metadataModule } from '@/server/metadata';
 import { ChangelogService } from '@/server/services/changelog';
 import { translation } from '@/server/translation';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import GridLayout from './features/GridLayout';
 import Post from './features/Post';
@@ -28,12 +29,12 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = async () => {
+const Page = async (props: DynamicLayoutProps) => {
   const hideDocs = serverFeatureFlags().hideDocs;
 
   if (hideDocs) return notFound();
 
-  const mobile = await isMobileDevice();
+  const isMobile = await RouteVariants.getIsMobile(props);
   const { t, locale } = await translation('metadata');
   const changelogService = new ChangelogService();
   const data = await changelogService.getChangelogIndex();
@@ -49,7 +50,7 @@ const Page = async () => {
   return (
     <>
       <StructuredData ld={ld} />
-      <Flexbox gap={mobile ? 16 : 48}>
+      <Flexbox gap={isMobile ? 16 : 48}>
         {data?.map((item) => (
           <Fragment key={item.id}>
             <Suspense
@@ -60,7 +61,7 @@ const Page = async () => {
                 </GridLayout>
               }
             >
-              <Post locale={locale} mobile={mobile} {...item} />
+              <Post locale={locale} mobile={isMobile} {...item} />
             </Suspense>
           </Fragment>
         ))}

package/src/app/{(main) → [variants]/(main)}/chat/(workspace)/@conversation/default.tsx

@@ -1,4 +1,5 @@
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import ChatHydration from './features/ChatHydration';
 import ChatInput from './features/ChatInput';
@@ -6,14 +7,14 @@ import ChatList from './features/ChatList';
 import ThreadHydration from './features/ThreadHydration';
 import ZenModeToast from './features/ZenModeToast';
 
-const ChatConversation = async () => {
-  const mobile = await isMobileDevice();
+const ChatConversation = async (props: DynamicLayoutProps) => {
+  const isMobile = await RouteVariants.getIsMobile(props);
 
   return (
     <>
       <ZenModeToast />
-      <ChatList mobile={mobile} />
-      <ChatInput mobile={mobile} />
+      <ChatList mobile={isMobile} />
+      <ChatInput mobile={isMobile} />
       <ChatHydration />
       <ThreadHydration />
     </>

package/src/app/{(main) → [variants]/(main)}/chat/(workspace)/@portal/default.tsx

@@ -1,17 +1,18 @@
 import React, { Suspense, lazy } from 'react';
 
 import Loading from '@/components/Loading/BrandTextLoading';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import Desktop from './_layout/Desktop';
 import Mobile from './_layout/Mobile';
 
 const PortalBody = lazy(() => import('@/features/Portal/router'));
 
-const Inspector = async () => {
-  const mobile = await isMobileDevice();
+const Inspector = async (props: DynamicLayoutProps) => {
+  const isMobile = await RouteVariants.getIsMobile(props);
 
-  const Layout = mobile ? Mobile : Desktop;
+  const Layout = isMobile ? Mobile : Desktop;
 
   return (
     <Suspense fallback={<Loading />}>

package/src/app/{(main) → [variants]/(main)}/chat/(workspace)/@topic/default.tsx

@@ -1,7 +1,8 @@
 // import TopicListContent from './features/TopicListContent';
 import React, { Suspense, lazy } from 'react';
 
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import Desktop from './_layout/Desktop';
 import Mobile from './_layout/Mobile';
@@ -10,14 +11,14 @@ import SystemRole from './features/SystemRole';
 
 const TopicContent = lazy(() => import('./features/TopicListContent'));
 
-const Topic = async () => {
-  const mobile = await isMobileDevice();
+const Topic = async (props: DynamicLayoutProps) => {
+  const isMobile = await RouteVariants.getIsMobile(props);
 
-  const Layout = mobile ? Mobile : Desktop;
+  const Layout = isMobile ? Mobile : Desktop;
 
   return (
     <>
-      {!mobile && <SystemRole />}
+      {!isMobile && <SystemRole />}
       <Layout>
         <Suspense fallback={<SkeletonList />}>
           <TopicContent />

package/src/app/{(main) → [variants]/(main)}/chat/(workspace)/_layout/Mobile/ChatHeader/index.tsx

@@ -3,7 +3,7 @@
 import { MobileNavBar } from '@lobehub/ui/mobile';
 import { memo, useState } from 'react';
 
-import { useInitAgentConfig } from '@/app/(main)/chat/(workspace)/_layout/useInitAgentConfig';
+import { useInitAgentConfig } from '@/app/[variants]/(main)/chat/(workspace)/_layout/useInitAgentConfig';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';

package/src/app/{(main) → [variants]/(main)}/chat/(workspace)/page.tsx

@@ -6,7 +6,8 @@ import { BRANDING_NAME } from '@/const/branding';
 import { ldModule } from '@/server/ld';
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import PageTitle from '../features/PageTitle';
 import Changelog from './features/ChangelogModal';
@@ -21,9 +22,9 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = async () => {
+const Page = async (props: DynamicLayoutProps) => {
   const { hideDocs, showChangelog } = serverFeatureFlags();
-  const mobile = await isMobileDevice();
+  const mobile = await RouteVariants.getIsMobile(props);
   const { t } = await translation('metadata');
   const ld = ldModule.generate({
     description: t('chat.description', { appName: BRANDING_NAME }),

package/src/app/{(main) → [variants]/(main)}/chat/@session/default.tsx

@@ -2,6 +2,7 @@ import { Suspense, lazy } from 'react';
 
 import CircleLoading from '@/components/Loading/CircleLoading';
 import ServerLayout from '@/components/server/ServerLayout';
+import { DynamicLayoutProps } from '@/types/next';
 
 import Desktop from './_layout/Desktop';
 import Mobile from './_layout/Mobile';
@@ -12,10 +13,10 @@ const SessionListContent = lazy(() => import('./features/SessionListContent'));
 
 const Layout = ServerLayout({ Desktop, Mobile });
 
-const Session = () => {
+const Session = (props: DynamicLayoutProps) => {
   return (
     <Suspense fallback={<CircleLoading />}>
-      <Layout>
+      <Layout {...props}>
         <Suspense fallback={<SkeletonList />}>
           <SessionListContent />
         </Suspense>

package/src/app/{(main) → [variants]/(main)}/chat/layout.ts

@@ -9,3 +9,5 @@ const Layout = ServerLayout<LayoutProps>({ Desktop, Mobile });
 Layout.displayName = 'ChatLayout';
 
 export default Layout;
+
+export const dynamic = 'force-static';

package/src/app/{(main) → [variants]/(main)}/chat/settings/layout.tsx

@@ -9,11 +9,11 @@ import Mobile from './_layout/Mobile';
 
 const SessionSettingsLayout = ServerLayout({ Desktop, Mobile });
 
-const Layout = ({ children }: PropsWithChildren) => {
+const Layout = ({ children, ...res }: PropsWithChildren) => {
   const isAgentEditable = serverFeatureFlags().isAgentEditable;
   if (!isAgentEditable) return notFound();
 
-  return <SessionSettingsLayout>{children}</SessionSettingsLayout>;
+  return <SessionSettingsLayout {...res}>{children}</SessionSettingsLayout>;
 };
 
 Layout.displayName = 'SessionSettingsLayout';

package/src/app/{(main) → [variants]/(main)}/discover/(detail)/assistant/[slug]/features/InfoSidebar/SuggestionItem.tsx

@@ -33,13 +33,13 @@ export interface SuggestionItemProps
   extends Omit<DiscoverAssistantItem, 'suggestions' | 'socialData' | 'category' | 'config'>,
     FlexboxProps {}
 
-const SuggestionItem = memo<SuggestionItemProps>(({ className, meta, identifier, ...rest }) => {
+const SuggestionItem = memo<SuggestionItemProps>(({ className, meta, identifier }) => {
   const { avatar, title, description, backgroundColor } = meta;
 
   const { cx, styles, theme } = useStyles();
 
   return (
-    <Flexbox className={cx(styles.container, className)} gap={12} key={identifier} {...rest}>
+    <Flexbox className={cx(styles.container, className)} gap={12} key={identifier}>
       <Flexbox align={'center'} gap={12} horizontal width={'100%'}>
         <Avatar
           alt={title}