@lobehub/chat 0.82.8 → 0.83.0

package/src/app/settings/common/Common.tsx

@@ -3,32 +3,27 @@ import { Form as AntForm, App, Button, Input, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { debounce } from 'lodash-es';
 import { AppWindow, Monitor, Moon, Palette, Sun } from 'lucide-react';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { localeOptions } from '@/locales/options';
-import { globalSelectors, useGlobalStore } from '@/store/global';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
-import { ConfigKeys } from '@/types/settings';
 import { switchLang } from '@/utils/switchLang';
 
 import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from '../features/ThemeSwatches';
 
-type SettingItemGroup = ItemGroup & {
-  children: {
-    name?: ConfigKeys | string;
-  }[];
-};
+type SettingItemGroup = ItemGroup;
 
 const Common = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = AntForm.useForm();
   const clearSessions = useSessionStore((s) => s.clearSessions);
 
-  const settings = useGlobalStore(globalSelectors.currentSettings, isEqual);
+  const settings = useGlobalStore(settingsSelectors.currentSettings, isEqual);
   const [setThemeMode, setSettings, resetSettings] = useGlobalStore((s) => [
     s.switchThemeMode,
     s.setSettings,
@@ -36,6 +31,7 @@ const Common = memo(() => {
   ]);
 
   const { message, modal } = App.useApp();
+
   const handleReset = useCallback(() => {
     modal.confirm({
       cancelText: t('cancel', { ns: 'common' }),
@@ -49,7 +45,6 @@ const Common = memo(() => {
       title: t('danger.reset.confirm'),
     });
   }, []);
-
   const handleClear = useCallback(() => {
     modal.confirm({
       cancelText: t('cancel', { ns: 'common' }),
@@ -66,119 +61,116 @@ const Common = memo(() => {
     });
   }, []);
 
-  const theme: SettingItemGroup = useMemo(
-    () => ({
-      children: [
-        {
-          children: <AvatarWithUpload />,
-          label: t('settingTheme.avatar.title'),
-          minWidth: undefined,
-        },
-        {
-          children: (
-            <SelectWithImg
-              defaultValue={settings.themeMode}
-              height={60}
-              onChange={setThemeMode}
-              options={[
-                {
-                  icon: Sun,
-                  img: '/images/theme_light.webp',
-                  label: t('settingTheme.themeMode.light'),
-                  value: 'light',
-                },
-                {
-                  icon: Moon,
-                  img: '/images/theme_dark.webp',
-                  label: t('settingTheme.themeMode.dark'),
-                  value: 'dark',
-                },
-                {
-                  icon: Monitor,
-                  img: '/images/theme_auto.webp',
-                  label: t('settingTheme.themeMode.auto'),
-                  value: 'auto',
-                },
-              ]}
-              width={100}
-            />
-          ),
-          label: t('settingTheme.themeMode.title'),
-          minWidth: undefined,
-        },
-        {
-          children: <Select onChange={switchLang} options={localeOptions} />,
-          label: t('settingTheme.lang.title'),
-          name: 'language',
-        },
-        {
-          children: <SliderWithInput max={18} min={12} />,
-          desc: t('settingTheme.fontSize.desc'),
-          label: t('settingTheme.fontSize.title'),
-          name: 'fontSize',
-        },
-        {
-          children: <ThemeSwatchesPrimary />,
-          desc: t('settingTheme.primaryColor.desc'),
-          label: t('settingTheme.primaryColor.title'),
-          minWidth: undefined,
-        },
-        {
-          children: <ThemeSwatchesNeutral />,
-          desc: t('settingTheme.neutralColor.desc'),
-          label: t('settingTheme.neutralColor.title'),
-          minWidth: undefined,
-        },
-      ],
-      icon: Palette,
-      title: t('settingTheme.title'),
-    }),
-    [settings],
-  );
-
-  const system: SettingItemGroup = useMemo(
-    () => ({
-      children: [
-        {
-          children: <Input.Password placeholder={t('settingSystem.accessCode.placeholder')} />,
-          desc: t('settingSystem.accessCode.desc'),
-          label: t('settingSystem.accessCode.title'),
-          name: 'password',
-        },
-        {
-          children: (
-            <Button danger onClick={handleReset} type="primary">
-              {t('danger.reset.action')}
-            </Button>
-          ),
-          desc: t('danger.reset.title'),
-          label: t('danger.reset.desc'),
-          minWidth: undefined,
-        },
-        {
-          children: (
-            <Button danger onClick={handleClear} type="primary">
-              {t('danger.clear.action')}
-            </Button>
-          ),
-          desc: t('danger.clear.title'),
-          label: t('danger.clear.desc'),
-          minWidth: undefined,
-        },
-      ],
-      icon: AppWindow,
-      title: t('settingSystem.title'),
-    }),
-    [settings],
-  );
+  const theme: SettingItemGroup = {
+    children: [
+      {
+        children: <AvatarWithUpload />,
+        label: t('settingTheme.avatar.title'),
+        minWidth: undefined,
+      },
+      {
+        children: (
+          <SelectWithImg
+            defaultValue={settings.themeMode}
+            height={60}
+            onChange={setThemeMode}
+            options={[
+              {
+                icon: Sun,
+                img: '/images/theme_light.webp',
+                label: t('settingTheme.themeMode.light'),
+                value: 'light',
+              },
+              {
+                icon: Moon,
+                img: '/images/theme_dark.webp',
+                label: t('settingTheme.themeMode.dark'),
+                value: 'dark',
+              },
+              {
+                icon: Monitor,
+                img: '/images/theme_auto.webp',
+                label: t('settingTheme.themeMode.auto'),
+                value: 'auto',
+              },
+            ]}
+            width={100}
+          />
+        ),
+        label: t('settingTheme.themeMode.title'),
+        minWidth: undefined,
+      },
+      {
+        children: (
+          <Select
+            onChange={switchLang}
+            options={[{ label: t('settingTheme.lang.autoMode'), value: 'auto' }, ...localeOptions]}
+          />
+        ),
+        label: t('settingTheme.lang.title'),
+        name: 'language',
+      },
+      {
+        children: <SliderWithInput max={18} min={12} />,
+        desc: t('settingTheme.fontSize.desc'),
+        label: t('settingTheme.fontSize.title'),
+        name: 'fontSize',
+      },
+      {
+        children: <ThemeSwatchesPrimary />,
+        desc: t('settingTheme.primaryColor.desc'),
+        label: t('settingTheme.primaryColor.title'),
+        minWidth: undefined,
+      },
+      {
+        children: <ThemeSwatchesNeutral />,
+        desc: t('settingTheme.neutralColor.desc'),
+        label: t('settingTheme.neutralColor.title'),
+        minWidth: undefined,
+      },
+    ],
+    icon: Palette,
+    title: t('settingTheme.title'),
+  };
 
-  const items = useMemo(() => [theme, system], [settings]);
+  const system: SettingItemGroup = {
+    children: [
+      {
+        children: <Input.Password placeholder={t('settingSystem.accessCode.placeholder')} />,
+        desc: t('settingSystem.accessCode.desc'),
+        label: t('settingSystem.accessCode.title'),
+        name: 'password',
+      },
+      {
+        children: (
+          <Button danger onClick={handleReset} type="primary">
+            {t('danger.reset.action')}
+          </Button>
+        ),
+        desc: t('danger.reset.title'),
+        label: t('danger.reset.desc'),
+        minWidth: undefined,
+      },
+      {
+        children: (
+          <Button danger onClick={handleClear} type="primary">
+            {t('danger.clear.action')}
+          </Button>
+        ),
+        desc: t('danger.clear.title'),
+        label: t('danger.clear.desc'),
+        minWidth: undefined,
+      },
+    ],
+    icon: AppWindow,
+    title: t('settingSystem.title'),
+  };
 
   return (
     <Form
       form={form}
       initialValues={settings}
-      items={items}
+      items={[theme, system]}
       onValuesChange={debounce(setSettings, 100)}
       {...FORM_STYLE}
     />

package/src/app/settings/features/SideBar/List.tsx

@@ -1,6 +1,6 @@
 import { useResponsive } from 'antd-style';
 import { Bot, Settings2, Webhook } from 'lucide-react';
-import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -11,9 +11,9 @@ import Item from './Item';
 
 const List = memo(() => {
   const { t } = useTranslation('setting');
-  const tab = useGlobalStore((s) => s.settingsTab);
-  const router = useRouter();
+  const [tab, switchSettingTabs] = useGlobalStore((s) => [s.settingsTab, s.switchSettingTabs]);
   const { mobile } = useResponsive();
+
   const items = [
     { icon: Settings2, label: t('tab.common'), value: SettingsTabs.Common },
     { icon: Webhook, label: t('tab.llm'), value: SettingsTabs.LLM },
@@ -21,9 +21,15 @@ const List = memo(() => {
   ];
 
   return items.map(({ value, icon, label }) => (
-    <div key={value} onClick={() => router.push(`/settings/${value}`)}>
+    <Link
+      href={`/settings/${value}`}
+      key={value}
+      onClick={() => {
+        switchSettingTabs(value);
+      }}
+    >
       <Item active={mobile ? false : tab === value} icon={icon} label={label} />
-    </div>
+    </Link>
   ));
 });
 

package/src/app/settings/llm/LLM/index.tsx

@@ -9,7 +9,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
-import { globalSelectors, useEffectAfterGlobalHydrated, useGlobalStore } from '@/store/global';
+import { settingsSelectors, useEffectAfterGlobalHydrated, useGlobalStore } from '@/store/global';
 
 import Checker from './Checker';
 
@@ -42,7 +42,7 @@ const LLM = memo(() => {
   const [setSettings] = useGlobalStore((s) => [s.setSettings]);
 
   useEffectAfterGlobalHydrated((store) => {
-    const settings = globalSelectors.currentSettings(store.getState());
+    const settings = settingsSelectors.currentSettings(store.getState());
 
     form.setFieldsValue(settings);
   }, []);

package/src/app/welcome/page.tsx

@@ -1,16 +1,12 @@
 import { t } from 'i18next';
 import { Metadata } from 'next';
 
-import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
-
 import Banner from './features/Banner';
 
 export const generateMetadata = (): Metadata => ({
-  title: genSiteHeadTitle(t('header', { ns: 'welcome' })),
+  title: t('header', { ns: 'welcome' }),
 });
 
-const Page = () => {
-  return <Banner />;
-};
+const Page = () => <Banner />;
 
 export default Page;

package/src/components/PageTitle.tsx

@@ -0,0 +1,11 @@
+import { memo, useEffect } from 'react';
+
+const PageTitle = memo<{ title: string }>(({ title }) => {
+  useEffect(() => {
+    document.title = title;
+  }, [title]);
+
+  return null;
+});
+
+export default PageTitle;

package/src/config/client.ts

@@ -21,6 +21,10 @@ declare global {
       NEXT_PUBLIC_POSTHOG_KEY: string;
       NEXT_PUBLIC_POSTHOG_HOST: string;
       NEXT_PUBLIC_POSTHOG_DEBUG: string;
+
+      NEXT_PUBLIC_I18N_DEBUG: string;
+      NEXT_PUBLIC_I18N_DEBUG_BROWSER: string;
+      NEXT_PUBLIC_I18N_DEBUG_SERVER: string;
     }
   }
 }
@@ -29,18 +33,27 @@ export const getClientConfig = () => ({
   AGENTS_INDEX_URL: process.env.AGENTS_INDEX_URL,
   PLUGINS_INDEX_URL: process.env.PLUGINS_INDEX_URL,
 
+  // Vercel Analytics
   ANALYTICS_VERCEL: process.env.NEXT_PUBLIC_ANALYTICS_VERCEL !== '0',
   VERCEL_DEBUG: process.env.NEXT_PUBLIC_VERCEL_DEBUG === '1',
 
+  // Plausible Analytics
   ANALYTICS_PLAUSIBLE: process.env.NEXT_PUBLIC_ANALYTICS_PLAUSIBLE === '1',
   PLAUSIBLE_DOMAIN: process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN,
 
+  // Mixpanel Analytics
   ANALYTICS_MIXPANEL: process.env.NEXT_PUBLIC_ANALYTICS_MIXPANEL === '1',
   MIXPANEL_PROJECT_TOKEN: process.env.NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN,
   MIXPANEL_DEBUG: process.env.NEXT_PUBLIC_MIXPANEL_DEBUG === '1',
 
+  // Posthog Analytics
   ANALYTICS_POSTHOG: process.env.NEXT_PUBLIC_ANALYTICS_POSTHOG === '1',
   POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
   POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST,
   POSTHOG_DEBUG: process.env.NEXT_PUBLIC_POSTHOG_DEBUG === '1',
+
+  // i18n debug mode
+  I18N_DEBUG: process.env.NEXT_PUBLIC_I18N_DEBUG === '1',
+  I18N_DEBUG_BROWSER: process.env.NEXT_PUBLIC_I18N_DEBUG_BROWSER === '1',
+  I18N_DEBUG_SERVER: process.env.NEXT_PUBLIC_I18N_DEBUG_SERVER === '1',
 });

package/src/const/locale.ts

@@ -0,0 +1,9 @@
+import { localeOptions } from '@/locales/options';
+import { Locales } from '@/locales/resources';
+
+export const DEFAULT_LANG = 'en-US';
+export const LOBE_LOCALE_COOKIE = 'LOBE_LOCALE';
+
+export const checkLang = (lang: Locales) => {
+  return lang === DEFAULT_LANG || !localeOptions.map((o) => o.value).includes(lang);
+};

package/src/const/settings.ts

@@ -12,7 +12,7 @@ import {
 export const DEFAULT_BASE_SETTINGS: GlobalBaseSettings = {
   avatar: '',
   fontSize: 14,
-  language: 'en-US',
+  language: 'auto',
   password: '',
   themeMode: 'auto',
 };

package/src/const/url.ts

@@ -1,10 +1,10 @@
 import urlJoin from 'url-join';
 
 import { getClientConfig } from '@/config/client';
-import { localeOptions } from '@/locales/options';
 import { Locales } from '@/locales/resources';
 
 import pkg from '../../package.json';
+import { DEFAULT_LANG, checkLang } from './locale';
 import { INBOX_SESSION_ID } from './session';
 
 export const GITHUB = pkg.homepage;
@@ -16,11 +16,6 @@ export const DISCORD = 'https://discord.gg/AYFPHvv2jT';
 export const PLUGINS_INDEX_URL =
   getClientConfig().PLUGINS_INDEX_URL ?? 'https://chat-plugins.lobehub.com';
 
-export const DEFAULT_LANG = 'en-US';
-
-export const checkLang = (lang: Locales) => {
-  return lang === DEFAULT_LANG || !localeOptions.map((o) => o.value).includes(lang);
-};
 export const getPluginIndexJSON = (lang: Locales = DEFAULT_LANG, baseUrl = PLUGINS_INDEX_URL) => {
   if (checkLang(lang)) return baseUrl;
 

package/src/helpers/export.ts

@@ -1,4 +1,4 @@
-import { globalSelectors, useGlobalStore } from '@/store/global';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { createConfigFile, exportConfigFile } from '@/utils/config';
@@ -6,7 +6,7 @@ import { createConfigFile, exportConfigFile } from '@/utils/config';
 const getSessions = () => sessionSelectors.exportSessions(useSessionStore.getState());
 const getSession = (id: string) => sessionSelectors.getSessionById(id)(useSessionStore.getState());
 
-const getSettings = () => globalSelectors.exportSettings(useGlobalStore.getState());
+const getSettings = () => settingsSelectors.exportSettings(useGlobalStore.getState());
 
 // =============   导出所有角色   ============= //
 

package/src/layout/AppMobileLayout.tsx

@@ -1,6 +1,5 @@
 import { type MobileNavBarTitleProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import Head from 'next/head';
 import { CSSProperties, PropsWithChildren, ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -49,29 +48,21 @@ const AppMobileLayout = memo<AppMobileLayoutProps>(
     const { styles, cx } = useStyles();
 
     return (
-      <>
-        <Head>
-          <meta
-            content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-            name="viewport"
-          />
-        </Head>
-        <Flexbox className={cx(styles.container, className)} style={style}>
-          {navBar && (
-            <>
-              <div className={styles.mobileNavBar}>{navBar}</div>
-              <SafeSpacing mobile position={'top'} />
-            </>
-          )}
-          {children}
-          {showTabBar && (
-            <>
-              <SafeSpacing mobile position={'bottom'} />
-              <MobileTabBar className={styles.mobileTabBar} />
-            </>
-          )}
-        </Flexbox>
-      </>
+      <Flexbox className={cx(styles.container, className)} style={style}>
+        {navBar && (
+          <>
+            <div className={styles.mobileNavBar}>{navBar}</div>
+            <SafeSpacing mobile position={'top'} />
+          </>
+        )}
+        {children}
+        {showTabBar && (
+          <>
+            <SafeSpacing mobile position={'bottom'} />
+            <MobileTabBar className={styles.mobileTabBar} />
+          </>
+        )}
+      </Flexbox>
     );
   },
 );

package/src/layout/GlobalLayout/Locale.tsx

@@ -0,0 +1,44 @@
+import { ConfigProvider } from 'antd';
+import Zh_CN from 'antd/locale/zh_CN';
+import { PropsWithChildren, memo, useState } from 'react';
+
+import { createI18nNext } from '@/locales/create';
+import { useOnFinishHydrationGlobal } from '@/store/global';
+import { isOnServerSide } from '@/utils/env';
+import { switchLang } from '@/utils/switchLang';
+
+interface LocaleLayoutProps extends PropsWithChildren {
+  lang?: string;
+}
+
+const InnerLocale = memo<LocaleLayoutProps>(({ children, lang }) => {
+  const [i18n] = useState(createI18nNext(lang));
+
+  // if run on server side, init i18n instance everytime
+  if (isOnServerSide) {
+    i18n.init();
+  } else {
+    // if on browser side, init i18n instance only once
+    if (!i18n.instance.isInitialized)
+      // console.log('locale', lang);
+      i18n.init().then(() => {
+        // console.log('inited.');
+      });
+  }
+
+  useOnFinishHydrationGlobal((s) => {
+    if (s.settings.language === 'auto') {
+      switchLang('auto');
+    }
+  }, []);
+
+  return <ConfigProvider locale={Zh_CN}>{children}</ConfigProvider>;
+});
+
+// const Locale = memo<LocaleLayoutProps>((props) => (
+//   <Suspense fallback={<Loading />}>
+//     <InnerLocale {...props} />
+//   </Suspense>
+// ));
+
+export default InnerLocale;

package/src/layout/GlobalLayout/LocaleLoading.tsx

@@ -0,0 +1,21 @@
+import { Icon } from '@lobehub/ui';
+import { Loader2 } from 'lucide-react';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+const Loading = memo(() => (
+  <div
+    style={{
+      backdropFilter: 'blur(3px)',
+      height: '100vh',
+      width: '100vw',
+      zIndex: 100,
+    }}
+  >
+    <Center flex={1} gap={12} width={'100%'}>
+      <Icon icon={Loader2} spin />
+    </Center>
+  </div>
+));
+
+export default Loading;

package/src/layout/GlobalLayout/StoreHydration.tsx

@@ -0,0 +1,28 @@
+import { useRouter } from 'next/navigation';
+import { memo, useEffect } from 'react';
+
+import { useGlobalStore } from '@/store/global';
+import { usePluginStore } from '@/store/plugin';
+import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
+
+const StoreHydration = memo(() => {
+  const router = useRouter();
+
+  useEffect(() => {
+    // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
+    useSessionStore.persist.rehydrate();
+    useGlobalStore.persist.rehydrate();
+    usePluginStore.persist.rehydrate();
+  }, []);
+
+  useOnFinishHydrationSession((s, store) => {
+    usePluginStore.getState().checkLocalEnabledPlugins(s.sessions);
+
+    // add router instance to store
+    store.setState({ router });
+  });
+
+  return null;
+});
+
+export default StoreHydration;