@lobehub/chat 1.51.3 → 1.51.4

package/src/hooks/useActiveTabKey.ts

@@ -1,5 +1,4 @@
 import { usePathname } from 'next/navigation';
-import { useQueryState } from 'nuqs';
 
 import { ProfileTabs, SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
 
@@ -17,14 +16,11 @@ export const useActiveTabKey = () => {
  */
 export const useActiveSettingsKey = () => {
   const pathname = usePathname();
-  const [tab] = useQueryState('tab');
 
   const tabs = pathname.split('/').at(-1);
 
   if (tabs === 'settings') return SettingsTabs.Common;
 
-  if (tabs === 'modal') return tab as SettingsTabs;
-
   return tabs as SettingsTabs;
 };
 
@@ -33,13 +29,10 @@ export const useActiveSettingsKey = () => {
  */
 export const useActiveProfileKey = () => {
   const pathname = usePathname();
-  const [tab] = useQueryState('tab');
 
   const tabs = pathname.split('/').at(-1);
 
   if (tabs === 'profile') return ProfileTabs.Profile;
 
-  if (tabs === 'modal') return tab as ProfileTabs;
-
   return tabs as ProfileTabs;
 };

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

@@ -44,7 +44,6 @@ const Clerk = memo(({ children }: PropsWithChildren) => {
   return (
     <ClerkProvider
       appearance={updatedAppearance}
-      dynamic
       localization={localization}
       signUpUrl={!enableClerkSignUp ? '/login' : '/signup'} // Redirect sign-up to sign-in if disabled
     >

package/src/layout/GlobalProvider/ReactScan.tsx

@@ -1,15 +1,13 @@
 'use client';
 
-import { useSearchParams } from 'next/navigation';
 import Script from 'next/script';
+import { useQueryState } from 'nuqs';
 import React, { memo } from 'react';
 
 import { withSuspense } from '@/components/withSuspense';
 
 const ReactScan = memo(() => {
-  const searchParams = useSearchParams();
-
-  const debug = searchParams.get('debug');
+  const [debug] = useQueryState('debug', { clearOnDefault: true, defaultValue: '' });
 
   return !!debug && <Script src="https://unpkg.com/react-scan/dist/auto.global.js" />;
 });

package/src/layout/GlobalProvider/StoreInitialization.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
+import { useQueryState } from 'nuqs';
 import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createStoreUpdater } from 'zustand-utils';
@@ -81,7 +82,11 @@ const StoreInitialization = memo(() => {
   useStoreUpdater('router', router);
 
   // Import settings from the url
-  const searchParam = useSearchParams().get(LOBE_URL_IMPORT_NAME);
+  const [searchParam] = useQueryState(LOBE_URL_IMPORT_NAME, {
+    clearOnDefault: true,
+    defaultValue: '',
+  });
+
   useEffect(() => {
     // Why use `usUserStateInit`,
     // see: https://github.com/lobehub/lobe-chat/pull/4072

package/src/layout/GlobalProvider/index.tsx

@@ -1,19 +1,11 @@
-import { cookies, headers } from 'next/headers';
-import { PropsWithChildren, Suspense } from 'react';
+import { ReactNode, Suspense } from 'react';
 
 import { appEnv } from '@/config/app';
 import { getServerFeatureFlagsValue } from '@/config/featureFlags';
-import { LOBE_LOCALE_COOKIE } from '@/const/locale';
-import {
-  LOBE_THEME_APPEARANCE,
-  LOBE_THEME_NEUTRAL_COLOR,
-  LOBE_THEME_PRIMARY_COLOR,
-} from '@/const/theme';
 import DevPanel from '@/features/DevPanel';
 import { getServerGlobalConfig } from '@/server/globalConfig';
 import { ServerConfigStoreProvider } from '@/store/serverConfig';
-import { getAntdLocale, parseBrowserLanguage } from '@/utils/locale';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { getAntdLocale } from '@/utils/locale';
 
 import AntdV5MonkeyPatch from './AntdV5MonkeyPatch';
 import AppTheme from './AppTheme';
@@ -23,37 +15,37 @@ import ReactScan from './ReactScan';
 import StoreInitialization from './StoreInitialization';
 import StyleRegistry from './StyleRegistry';
 
-const GlobalLayout = async ({ children }: PropsWithChildren) => {
-  // get default theme config to use with ssr
-  const cookieStore = await cookies();
-  const appearance = cookieStore.get(LOBE_THEME_APPEARANCE);
-  const neutralColor = cookieStore.get(LOBE_THEME_NEUTRAL_COLOR);
-  const primaryColor = cookieStore.get(LOBE_THEME_PRIMARY_COLOR);
-
-  // get default locale config to use with ssr
-  const defaultLang = cookieStore.get(LOBE_LOCALE_COOKIE);
-  const header = await headers();
-  const fallbackLang = parseBrowserLanguage(header);
-
-  // if it's a new user, there's no cookie
-  // So we need to use the fallback language parsed by accept-language
-  const userLocale = defaultLang?.value || fallbackLang;
+interface GlobalLayoutProps {
+  appearance: string;
+  children: ReactNode;
+  isMobile: boolean;
+  locale: string;
+  neutralColor?: string;
+  primaryColor?: string;
+}
 
+const GlobalLayout = async ({
+  children,
+  neutralColor,
+  primaryColor,
+  locale: userLocale,
+  appearance,
+  isMobile,
+}: GlobalLayoutProps) => {
   const antdLocale = await getAntdLocale(userLocale);
 
   // get default feature flags to use with ssr
   const serverFeatureFlags = getServerFeatureFlagsValue();
   const serverConfig = getServerGlobalConfig();
-  const isMobile = await isMobileDevice();
   return (
     <StyleRegistry>
       <Locale antdLocale={antdLocale} defaultLang={userLocale}>
         <AppTheme
           customFontFamily={appEnv.CUSTOM_FONT_FAMILY}
           customFontURL={appEnv.CUSTOM_FONT_URL}
-          defaultAppearance={appearance?.value}
-          defaultNeutralColor={neutralColor?.value as any}
-          defaultPrimaryColor={primaryColor?.value as any}
+          defaultAppearance={appearance}
+          defaultNeutralColor={neutralColor as any}
+          defaultPrimaryColor={primaryColor as any}
           globalCDN={appEnv.CDN_USE_GLOBAL}
         >
           <ServerConfigStoreProvider

package/src/locales/create.ts

@@ -5,8 +5,7 @@ import { initReactI18next } from 'react-i18next';
 import { isRtlLang } from 'rtl-detect';
 
 import { getDebugConfig } from '@/config/debug';
-import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
-import { COOKIE_CACHE_DAYS } from '@/const/settings';
+import { DEFAULT_LANG } from '@/const/locale';
 import { normalizeLocale } from '@/locales/resources';
 import { isDev, isOnServerSide } from '@/utils/env';
 
@@ -36,20 +35,20 @@ export const createI18nNext = (lang?: string) => {
       instance.init({
         debug: debugMode,
         defaultNS: ['error', 'common', 'chat'],
-        detection: {
-          caches: ['cookie'],
-          cookieMinutes: 60 * 24 * COOKIE_CACHE_DAYS,
-          /**
-             Set `sameSite` to `lax` so that the i18n cookie can be passed to the
-             server side when returning from the OAuth authorization website.
-             ref: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value
-             discussion: https://github.com/lobehub/lobe-chat/pull/1474
-          */
-          cookieOptions: {
-            sameSite: 'lax',
-          },
-          lookupCookie: LOBE_LOCALE_COOKIE,
-        },
+        // detection: {
+        //   caches: ['cookie'],
+        //   cookieMinutes: 60 * 24 * COOKIE_CACHE_DAYS,
+        //   /**
+        //      Set `sameSite` to `lax` so that the i18n cookie can be passed to the
+        //      server side when returning from the OAuth authorization website.
+        //      ref: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value
+        //      discussion: https://github.com/lobehub/lobe-chat/pull/1474
+        //   */
+        //   cookieOptions: {
+        //     sameSite: 'lax',
+        //   },
+        //   lookupCookie: LOBE_LOCALE_COOKIE,
+        // },
         fallbackLng: DEFAULT_LANG,
         interpolation: {
           escapeValue: false,

package/src/middleware.ts

@@ -1,8 +1,13 @@
 import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
-import { NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from 'next/server';
+import { UAParser } from 'ua-parser-js';
+import urlJoin from 'url-join';
 
 import { authEnv } from '@/config/auth';
+import { LOBE_THEME_APPEARANCE } from '@/const/theme';
 import NextAuthEdge from '@/libs/next-auth/edge';
+import { parseBrowserLanguage } from '@/utils/locale';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import { OAUTH_AUTHORIZED } from './const/auth';
 
@@ -16,20 +21,86 @@ export const config = {
     '/discover(.*)',
     '/chat',
     '/chat(.*)',
+    '/changelog(.*)',
     '/settings(.*)',
     '/files',
     '/files(.*)',
     '/repos(.*)',
+    '/profile(.*)',
+    '/me',
+    '/me(.*)',
+
+    '/login(.*)',
+    '/signup(.*)',
+    '/next-auth/error',
     // ↓ cloud ↓
   ],
 };
 
-const defaultMiddleware = () => NextResponse.next();
+const parseDefaultThemeFromTime = (request: NextRequest) => {
+  // 获取经度信息，Next.js 会自动解析 geo 信息到请求对象中
+  const longitude = 'geo' in request && (request.geo as any)?.longitude;
+
+  if (typeof longitude === 'number') {
+    // 计算时区偏移（每15度经度对应1小时）
+    // 东经为正，西经为负
+    const offsetHours = Math.round(longitude / 15);
+
+    // 计算当地时间
+    const localHour = (new Date().getUTCHours() + offsetHours + 24) % 24;
+    console.log(`[theme] localHour: ${localHour}`);
+
+    // 6点到18点之间返回 light 主题
+    return localHour >= 6 && localHour < 18 ? 'light' : 'dark';
+  }
+
+  return 'light';
+};
+
+const defaultMiddleware = (request: NextRequest) => {
+  // 1. 从 cookie 中读取用户偏好
+  const theme =
+    request.cookies.get(LOBE_THEME_APPEARANCE)?.value || parseDefaultThemeFromTime(request);
+
+  // if it's a new user, there's no cookie
+  // So we need to use the fallback language parsed by accept-language
+  const locale = parseBrowserLanguage(request.headers);
+  // const locale =
+  // request.cookies.get(LOBE_LOCALE_COOKIE)?.value ||
+  // browserLanguage;
+
+  const ua = request.headers.get('user-agent');
+
+  const device = new UAParser(ua || '').getDevice();
+
+  // 2. 创建规范化的偏好值
+  const route = RouteVariants.serializeVariants({
+    isMobile: device.type === 'mobile',
+    locale,
+    theme,
+  });
+
+  const url = new URL(request.url);
+  if (['/api', '/trpc', '/webapi'].some((path) => url.pathname.startsWith(path)))
+    return NextResponse.next();
+
+  // 处理 URL 重写
+  // 构建新路径: /${route}${originalPathname}
+  // 只对 GET 请求进行 URL 重写，确保其他类型的请求（包括 OPTIONS）不受影响
+  const nextPathname = `/${urlJoin(route, url.pathname)}`;
+  console.log(`[rewrite] ${url.pathname} -> ${nextPathname}`);
+  url.pathname = nextPathname;
+
+  return NextResponse.rewrite(url);
+};
+
+const publicRoute = ['/', '/discover'];
 
 // Initialize an Edge compatible NextAuth middleware
 const nextAuthMiddleware = NextAuthEdge.auth((req) => {
+  const response = defaultMiddleware(req);
   // skip the '/' route
-  if (req.nextUrl.pathname === '/') return NextResponse.next();
+  if (publicRoute.some((url) => req.nextUrl.pathname.startsWith(url))) return response;
 
   // Just check if session exists
   const session = req.auth;
@@ -39,35 +110,37 @@ const nextAuthMiddleware = NextAuthEdge.auth((req) => {
   const isLoggedIn = !!session?.expires;
 
   // Remove & amend OAuth authorized header
-  const requestHeaders = new Headers(req.headers);
-  requestHeaders.delete(OAUTH_AUTHORIZED);
-  if (isLoggedIn) requestHeaders.set(OAUTH_AUTHORIZED, 'true');
-
-  return NextResponse.next({
-    request: {
-      headers: requestHeaders,
-    },
-  });
+  response.headers.delete(OAUTH_AUTHORIZED);
+  if (isLoggedIn) {
+    response.headers.set(OAUTH_AUTHORIZED, 'true');
+  }
+
+  return response;
 });
 
 const isProtectedRoute = createRouteMatcher([
   '/settings(.*)',
   '/files(.*)',
+  '/onboard(.*)',
   // ↓ cloud ↓
 ]);
 
+const clerkAuthMiddleware = clerkMiddleware(
+  async (auth, req) => {
+    if (isProtectedRoute(req)) await auth.protect();
+
+    return defaultMiddleware(req);
+  },
+  {
+    // https://github.com/lobehub/lobe-chat/pull/3084
+    clockSkewInMs: 60 * 60 * 1000,
+    signInUrl: '/login',
+    signUpUrl: '/signup',
+  },
+);
+
 export default authEnv.NEXT_PUBLIC_ENABLE_CLERK_AUTH
-  ? clerkMiddleware(
-      async (auth, req) => {
-        if (isProtectedRoute(req)) await auth.protect();
-      },
-      {
-        // https://github.com/lobehub/lobe-chat/pull/3084
-        clockSkewInMs: 60 * 60 * 1000,
-        signInUrl: '/login',
-        signUpUrl: '/signup',
-      },
-    )
+  ? clerkAuthMiddleware
   : authEnv.NEXT_PUBLIC_ENABLE_NEXT_AUTH
     ? nextAuthMiddleware
     : defaultMiddleware;

package/src/server/translation.test.ts

@@ -53,13 +53,6 @@ describe('getLocale', () => {
     expect(normalizeLocale).toHaveBeenCalledWith('fr-FR');
   });
 
-  it('should return the locale from cookie if available', async () => {
-    mockCookieStore.get.mockReturnValue({ value: 'de-DE' });
-    const result = await getLocale();
-    expect(result).toBe('de-DE');
-    expect(mockCookieStore.get).toHaveBeenCalledWith(LOBE_LOCALE_COOKIE);
-  });
-
   it('should return DEFAULT_LANG if no cookie is set', async () => {
     mockCookieStore.get.mockReturnValue(undefined);
     const result = await getLocale();

package/src/server/translation.ts

@@ -1,19 +1,16 @@
 'use server';
 
 import { get } from 'lodash-es';
-import { cookies } from 'next/headers';
 import { existsSync, readFileSync } from 'node:fs';
 import { join } from 'node:path';
 
-import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
+import { DEFAULT_LANG } from '@/const/locale';
 import { Locales, NS, normalizeLocale } from '@/locales/resources';
 import { isDev } from '@/utils/env';
 
 export const getLocale = async (hl?: string): Promise<Locales> => {
   if (hl) return normalizeLocale(hl) as Locales;
-  const cookieStore = await cookies();
-  const defaultLang = cookieStore.get(LOBE_LOCALE_COOKIE);
-  return (defaultLang?.value || DEFAULT_LANG) as Locales;
+  return DEFAULT_LANG as Locales;
 };
 
 export const translation = async (ns: NS = 'common', hl?: string) => {

package/src/types/discover.ts

@@ -7,7 +7,10 @@ import { MetaData } from '@/types/meta';
 import { PageProps } from '@/types/next';
 import { LobeAgentSettings } from '@/types/session';
 
-export type DiscoverPageProps<T = string> = PageProps<{ slug: T }, { hl?: Locales }>;
+export type DiscoverPageProps<T = string> = PageProps<
+  { slug: T; variants: string },
+  { hl?: Locales }
+>;
 
 export enum AssistantCategory {
   Academic = 'academic',

package/src/types/next.ts

@@ -4,3 +4,7 @@ export interface PageProps<Params, SearchParams = undefined> {
 }
 
 export type PagePropsWithId = PageProps<{ id: string }>;
+
+export interface DynamicLayoutProps {
+  params: Promise<{ variants: string }>;
+}

package/src/utils/locale.ts

@@ -1,7 +1,8 @@
 import { resolveAcceptLanguage } from 'resolve-accept-language';
 
 import { DEFAULT_LANG } from '@/const/locale';
-import { locales, normalizeLocale } from '@/locales/resources';
+import { Locales, locales, normalizeLocale } from '@/locales/resources';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 export const getAntdLocale = async (lang?: string) => {
   let normalLang = normalizeLocale(lang);
@@ -32,14 +33,29 @@ export const parseBrowserLanguage = (headers: Headers, defaultLang: string = DEF
    * 2) The available locales (they must contain the default locale).
    * 3) The default locale.
    */
-  let fallbackLang: string = resolveAcceptLanguage(
+  let browserLang: string = resolveAcceptLanguage(
     headers.get('accept-language') || '',
     //  Invalid locale identifier 'ar'. A valid locale should follow the BCP 47 'language-country' format.
     locales.map((locale) => (locale === 'ar' ? 'ar-EG' : locale)),
     defaultLang,
   );
+
   // if match the ar-EG then fallback to ar
-  if (fallbackLang === 'ar-EG') fallbackLang = 'ar';
+  if (browserLang === 'ar-EG') browserLang = 'ar';
+
+  return browserLang;
+};
 
-  return fallbackLang;
+/**
+ * Parse the page locale from the URL and search params
+ * @param props
+ */
+export const parsePageLocale = async (props: {
+  params: Promise<{ variants: string }>;
+  searchParams: Promise<any>;
+}) => {
+  const searchParams = await props.searchParams;
+
+  const browserLocale = await RouteVariants.getLocale(props);
+  return normalizeLocale(searchParams?.hl || browserLocale) as Locales;
 };

package/src/utils/server/routeVariants.ts

@@ -0,0 +1,80 @@
+// 定义主题类型
+import { ThemeAppearance } from 'antd-style/lib/types/appearance';
+
+import { DEFAULT_LANG } from '@/const/locale';
+import { locales } from '@/locales/resources';
+import { DynamicLayoutProps } from '@/types/next';
+
+// 定义变体接口
+export interface IRouteVariants {
+  isMobile: boolean;
+  locale: string;
+  neutralColor?: string;
+  primaryColor?: string;
+  theme: ThemeAppearance;
+}
+
+// 支持的主题
+const SUPPORTED_THEMES = ['dark', 'light'] as const;
+
+// 默认变体配置
+export const DEFAULT_VARIANTS: IRouteVariants = {
+  isMobile: false,
+  locale: DEFAULT_LANG,
+  theme: 'light',
+};
+
+const SPLITTER = '__';
+
+export class RouteVariants {
+  static serializeVariants = (variants: IRouteVariants): string => {
+    // 使用紧凑的格式: locale_isMobile_theme
+    // 例如: "en-US_0_dark" 表示 英文_非移动端_深色主题
+    return [variants.locale, Number(variants.isMobile), variants.theme].join(SPLITTER);
+  };
+
+  static deserializeVariants = (serialized: string): IRouteVariants => {
+    try {
+      const [locale, isMobile, theme] = serialized.split(SPLITTER);
+
+      // 验证并返回变体
+      return {
+        isMobile: isMobile === '1',
+        locale: this.isValidLocale(locale) ? locale : DEFAULT_VARIANTS.locale,
+        theme: this.isValidTheme(theme) ? theme : DEFAULT_VARIANTS.theme,
+      };
+    } catch {
+      // 解析失败时返回默认值
+      return { ...DEFAULT_VARIANTS };
+    }
+  };
+
+  static getVariantsFromProps = async (props: DynamicLayoutProps) => {
+    const { variants } = await props.params;
+    return RouteVariants.deserializeVariants(variants);
+  };
+
+  static getIsMobile = async (props: DynamicLayoutProps) => {
+    const { variants } = await props.params;
+    const { isMobile } = RouteVariants.deserializeVariants(variants);
+    return isMobile;
+  };
+
+  static getLocale = async (props: DynamicLayoutProps) => {
+    const { variants } = await props.params;
+    const { locale } = RouteVariants.deserializeVariants(variants);
+    return locale;
+  };
+
+  // 工具函数：创建变体
+
+  static createVariants = (options: Partial<IRouteVariants> = {}): IRouteVariants => ({
+    ...DEFAULT_VARIANTS,
+    ...options,
+  });
+
+  // 验证函数
+  private static isValidLocale = (locale: string): boolean => locales.includes(locale as any);
+
+  private static isValidTheme = (theme: string): boolean => SUPPORTED_THEMES.includes(theme as any);
+}

package/src/app/layout.tsx

@@ -1,67 +0,0 @@
-import { SpeedInsights } from '@vercel/speed-insights/next';
-import { ResolvingViewport } from 'next';
-import { cookies } from 'next/headers';
-import { ReactNode } from 'react';
-import { isRtlLang } from 'rtl-detect';
-
-import Analytics from '@/components/Analytics';
-import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
-import PWAInstall from '@/features/PWAInstall';
-import AuthProvider from '@/layout/AuthProvider';
-import GlobalProvider from '@/layout/GlobalProvider';
-import { isMobileDevice } from '@/utils/server/responsive';
-
-const inVercel = process.env.VERCEL === '1';
-
-type RootLayoutProps = {
-  children: ReactNode;
-  modal: ReactNode;
-};
-
-const RootLayout = async ({ children, modal }: RootLayoutProps) => {
-  const cookieStore = await cookies();
-
-  const lang = cookieStore.get(LOBE_LOCALE_COOKIE);
-  const locale = lang?.value || DEFAULT_LANG;
-
-  const direction = isRtlLang(locale) ? 'rtl' : 'ltr';
-  const mobile = await isMobileDevice();
-
-  return (
-    <html dir={direction} lang={locale} suppressHydrationWarning>
-      <body>
-        <GlobalProvider>
-          <AuthProvider>
-            {children}
-            {!mobile && modal}
-          </AuthProvider>
-          <PWAInstall />
-        </GlobalProvider>
-        <Analytics />
-        {inVercel && <SpeedInsights />}
-      </body>
-    </html>
-  );
-};
-
-export default RootLayout;
-
-export { generateMetadata } from './metadata';
-
-export const generateViewport = async (): ResolvingViewport => {
-  const isMobile = await isMobileDevice();
-
-  const dynamicScale = isMobile ? { maximumScale: 1, userScalable: false } : {};
-
-  return {
-    ...dynamicScale,
-    initialScale: 1,
-    minimumScale: 1,
-    themeColor: [
-      { color: '#f8f8f8', media: '(prefers-color-scheme: light)' },
-      { color: '#000', media: '(prefers-color-scheme: dark)' },
-    ],
-    viewportFit: 'cover',
-    width: 'device-width',
-  };
-};

package/src/hooks/useSettingsTab.ts

@@ -1,12 +0,0 @@
-import { useQueryState } from 'nuqs';
-
-import { SettingsTabs } from '@/store/global/initialState';
-
-export const useSettingsTab = () => {
-  const [type] = useQueryState('tab', {
-    clearOnDefault: true,
-    defaultValue: SettingsTabs.Common,
-  });
-
-  return type as SettingsTabs;
-};