@lobehub/chat 1.51.3 → 1.51.5

package/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 # Changelog
 
+### [Version 1.51.5](https://github.com/lobehub/lobe-chat/compare/v1.51.4...v1.51.5)
+
+<sup>Released on **2025-02-06**</sup>
+
+#### 💄 Styles
+
+- **misc**: Add siliconcloud models.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Add siliconcloud models, closes [#5725](https://github.com/lobehub/lobe-chat/issues/5725) ([e84853c](https://github.com/lobehub/lobe-chat/commit/e84853c))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [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>

package/changelog/v1.json

@@ -1,4 +1,18 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Add siliconcloud models."
+      ]
+    },
+    "date": "2025-02-06",
+    "version": "1.51.5"
+  },
+  {
+    "children": {},
+    "date": "2025-02-06",
+    "version": "1.51.4"
+  },
   {
     "children": {
       "improvements": [

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.3",
+  "version": "1.51.5",
   "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",
@@ -317,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}

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

@@ -7,7 +7,7 @@ import { metadataModule } from '@/server/metadata';
 import { DiscoverService } from '@/server/services/discover';
 import { translation } from '@/server/translation';
 import { DiscoverPageProps, DiscoverPlugintem } from '@/types/discover';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import DetailLayout from '../../features/DetailLayout';
 import Actions from './features/Actions';
@@ -62,7 +62,7 @@ const Page = async (props: DiscoverPageProps) => {
 
   const { slug: identifier } = params;
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = await isMobileDevice();
+  const mobile = await RouteVariants.getIsMobile(props);
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getAssistantById(locale, identifier);

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

@@ -9,7 +9,7 @@ import { DiscoverService } from '@/server/services/discover';
 import { translation } from '@/server/translation';
 import { DiscoverProviderItem } from '@/types/discover';
 import { PageProps } from '@/types/next';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import DetailLayout from '../../features/DetailLayout';
 import Actions from './features/Actions';
@@ -18,7 +18,7 @@ import InfoSidebar from './features/InfoSidebar';
 import ParameterList from './features/ParameterList';
 import ProviderList from './features/ProviderList';
 
-type Props = PageProps<{ slugs: string[] }, { hl?: Locales }>;
+type Props = PageProps<{ slugs: string[]; variants: string }, { hl?: Locales }>;
 
 export const generateMetadata = async (props: Props) => {
   const params = await props.params;
@@ -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 = await isMobileDevice();
+  const mobile = await RouteVariants.getIsMobile(props);
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getModelById(locale, identifier);

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

@@ -7,7 +7,7 @@ import { metadataModule } from '@/server/metadata';
 import { DiscoverService } from '@/server/services/discover';
 import { translation } from '@/server/translation';
 import { DiscoverPageProps } from '@/types/discover';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import DetailLayout from '../../features/DetailLayout';
 import Actions from './features/Actions';
@@ -64,7 +64,7 @@ const Page = async (props: DiscoverPageProps) => {
 
   const { slug: identifier } = params;
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = await isMobileDevice();
+  const mobile = await RouteVariants.getIsMobile(props);
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getPluginById(locale, identifier, true);

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

@@ -9,7 +9,7 @@ import { DiscoverService } from '@/server/services/discover';
 import { DocService } from '@/server/services/doc';
 import { translation } from '@/server/translation';
 import { DiscoverModelItem, DiscoverPageProps } from '@/types/discover';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import DetailLayout from '../../features/DetailLayout';
 import Actions from './features/Actions';
@@ -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 = await isMobileDevice();
+  const mobile = await RouteVariants.getIsMobile(props);
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getProviderById(locale, identifier);

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

@@ -4,14 +4,19 @@ import { ldModule } from '@/server/ld';
 import { metadataModule } from '@/server/metadata';
 import { DiscoverService } from '@/server/services/discover';
 import { translation } from '@/server/translation';
+import { DynamicLayoutProps } from '@/types/next';
+import { parsePageLocale } from '@/utils/locale';
 
 import Client from './Client';
 
-type Props = { searchParams: Promise<{ hl?: Locales }> };
+interface Props extends DynamicLayoutProps {
+  searchParams: Promise<{ hl?: Locales }>;
+}
 
 export const generateMetadata = async (props: Props) => {
   const searchParams = await props.searchParams;
-  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const { t } = await translation('metadata', searchParams?.hl);
+  const locale = await parsePageLocale(props);
   return metadataModule.generate({
     alternate: true,
     description: t('discover.description'),
@@ -23,7 +28,9 @@ 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 { t } = await translation('metadata', searchParams?.hl);
+  const locale = await parsePageLocale(props);
+
   const ld = ldModule.generate({
     description: t('discover.description'),
     title: t('discover.title'),