@lobehub/chat 0.82.8 → 0.83.0

package/src/layout/GlobalLayout/index.tsx

@@ -1,56 +1,44 @@
 'use client';
 
-import { App, ConfigProvider } from 'antd';
+import { App } from 'antd';
+import { createStyles } from 'antd-style';
 import 'antd/dist/reset.css';
-import Zh_CN from 'antd/locale/zh_CN';
-import { useRouter } from 'next/navigation';
-import { PropsWithChildren, memo, useEffect } from 'react';
+import { PropsWithChildren, memo } from 'react';
 
-import AppTheme, { AppThemeProps } from '@/components/AppTheme';
-import { createI18nNext } from '@/locales/create';
-import { useGlobalStore, useOnFinishHydrationGlobal } from '@/store/global';
-import { usePluginStore } from '@/store/plugin';
-import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
-import { switchLang } from '@/utils/switchLang';
+import AppTheme, { AppThemeProps } from './AppTheme';
+import Locale from './Locale';
+import StoreHydration from './StoreHydration';
 
-import { useStyles } from './style';
+const useStyles = createStyles(({ css, token }) => ({
+  bg: css`
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
-const i18n = createI18nNext();
+    height: 100%;
 
-const Layout = memo<PropsWithChildren>(({ children }) => {
-  const { styles } = useStyles();
-
-  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();
-  }, []);
-
-  useOnFinishHydrationGlobal((state) => {
-    i18n.then(() => switchLang(state.settings.language));
-  });
+    background: ${token.colorBgLayout};
+  `,
+}));
 
-  useOnFinishHydrationSession((s, store) => {
-    usePluginStore.getState().checkLocalEnabledPlugins(s.sessions);
-
-    // add router instance to store
-    store.setState({ router });
-  });
+const Container = memo<PropsWithChildren>(({ children }) => {
+  const { styles } = useStyles();
 
-  return (
-    <ConfigProvider locale={Zh_CN}>
-      <App className={styles.bg}>{children}</App>
-    </ConfigProvider>
-  );
+  return <App className={styles.bg}>{children}</App>;
 });
 
-const ThemeWrapper = ({ children, ...theme }: AppThemeProps) => (
+interface GlobalLayoutProps extends AppThemeProps {
+  defaultLang?: string;
+}
+
+const GlobalLayout = ({ children, defaultLang, ...theme }: GlobalLayoutProps) => (
   <AppTheme {...theme}>
-    <Layout>{children}</Layout>
+    <Locale lang={defaultLang}>
+      <StoreHydration />
+      <Container>{children}</Container>
+    </Locale>
   </AppTheme>
 );
 
-export default ThemeWrapper;
+export default GlobalLayout;

package/src/locales/create.ts

@@ -1,36 +1,53 @@
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
-import { isArray } from 'lodash-es';
 import { initReactI18next } from 'react-i18next';
 
+import { getClientConfig } from '@/config/client';
+import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
+import resources from '@/locales/resources';
 import type { Namespaces } from '@/types/locale';
+import { isOnServerSide } from '@/utils/env';
 
-import resources from './resources';
+const { I18N_DEBUG, I18N_DEBUG_BROWSER, I18N_DEBUG_SERVER } = getClientConfig();
+const debugMode = I18N_DEBUG ?? isOnServerSide ? I18N_DEBUG_SERVER : I18N_DEBUG_BROWSER;
 
-const isDev = process.env.NODE_ENV === 'development';
+export const createI18nNext = (lang?: string) => {
+  const ns: Namespaces[] = [
+    'error',
+    'common',
+    'empty',
+    'error',
+    'market',
+    'plugin',
+    'setting',
+    'welcome',
+  ];
 
-export const createI18nNext = (params: { namespace?: Namespaces[] | Namespaces } = {}) => {
-  const { namespace } = params;
+  const instance = i18n.use(initReactI18next).use(LanguageDetector);
+  //  not find a good way to handle suspense loading
+  // .use(
+  //   resourcesToBackend(
+  //     isDev ? resources : (lng: string, ns: string) => import(`../../locales/${lng}/${ns}.json`),
+  //   ),
+  // )
 
-  const ns: Namespaces[] = isArray(namespace)
-    ? ['error', 'common', ...namespace]
-    : (['error', 'common', namespace].filter(Boolean) as Namespaces[]);
-
-  return i18n
-    .use(LanguageDetector)
-    .use(initReactI18next)
-    .init({
-      debug: isDev,
-      defaultNS: ns,
-      detection: {
-        caches: [],
-      },
-      fallbackLng: isDev ? 'zh-CN' : 'en-US',
-      interpolation: {
-        escapeValue: false,
-      },
-      lng: isDev ? 'zh-CN' : 'en-US',
-      ns,
-      resources,
-    });
+  return {
+    init: () =>
+      instance.init({
+        debug: debugMode,
+        defaultNS: ['error', 'common'],
+        detection: {
+          caches: ['cookie'],
+          lookupCookie: LOBE_LOCALE_COOKIE,
+        },
+        fallbackLng: DEFAULT_LANG,
+        interpolation: {
+          escapeValue: false,
+        },
+        lng: lang,
+        ns,
+        resources,
+      }),
+    instance,
+  };
 };

package/src/locales/default/setting.ts

@@ -198,7 +198,8 @@ export default {
       title: '字体大小',
     },
     lang: {
-      title: '语言设置',
+      autoMode: '跟随系统',
+      title: '语言',
     },
     neutralColor: {
       desc: '不同色彩倾向的灰阶自定义',

package/src/locales/options.ts

@@ -1,11 +1,10 @@
-import type { SelectProps } from 'antd';
 
 import type { Locales } from '@/types/locale';
 
-type LocaleOptions = SelectProps['options'] &
-  {
-    value: Locales;
-  }[];
+type LocaleOptions = {
+  label: string;
+  value: Locales;
+}[];
 
 export const localeOptions: LocaleOptions = [
   {
@@ -25,3 +24,5 @@ export const localeOptions: LocaleOptions = [
     value: 'ru-RU',
   },
 ] as LocaleOptions;
+
+export const supportLangs: string[] = localeOptions.map((i) => i.value);

package/src/services/agentMarket.ts

@@ -1,11 +1,11 @@
-import { getAgentIndexJSON, getAgentJSON } from '@/const/url';
-import { useGlobalStore } from '@/store/global';
+import { getAgentJSON } from '@/const/url';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 
 /**
  * 请求助手列表
  */
 export const getAgentList = async () => {
-  const res = await fetch(getAgentIndexJSON(useGlobalStore.getState().settings.language));
+  const res = await fetch(settingsSelectors.currentLanguage(useGlobalStore.getState()));
 
   return res.json();
 };
@@ -15,7 +15,9 @@ export const getAgentList = async () => {
  */
 export const getAgentManifest = async (identifier?: string) => {
   if (!identifier) return;
-  const res = await fetch(getAgentJSON(identifier, useGlobalStore.getState().settings.language));
+  const res = await fetch(
+    getAgentJSON(identifier, settingsSelectors.currentLanguage(useGlobalStore.getState())),
+  );
 
   return res.json();
 };

package/src/services/pluginMarket.ts

@@ -1,11 +1,11 @@
 import { getPluginIndexJSON } from '@/const/url';
-import { useGlobalStore } from '@/store/global';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 
 /**
  * fetch Plugin Market List
  */
 export const getPluginList = async () => {
-  const url = getPluginIndexJSON(useGlobalStore.getState().settings.language);
+  const url = getPluginIndexJSON(settingsSelectors.currentLanguage(useGlobalStore.getState()));
 
   const res = await fetch(url);
 

package/src/store/global/hooks/useSwitchSettingsOnInit.ts

@@ -1,9 +1,12 @@
+import { useOnFinishHydrationGlobal } from '@/store/global';
+
 import { SettingsTabs } from '../initialState';
-import { useGlobalStore } from '../store';
 
 /**
  * 切换设置侧边栏选项
  */
 export const useSwitchSideBarOnInit = (key: SettingsTabs) => {
-  useGlobalStore.getState().switchSettingTabs(key);
+  useOnFinishHydrationGlobal((store) => {
+    store.switchSettingTabs(key);
+  });
 };

package/src/store/global/{selectors.test.ts → selectors/settings.test.ts}

@@ -1,9 +1,9 @@
 import { LanguageModel } from '@/types/llm';
 
-import { globalSelectors } from './selectors';
-import { GlobalStore } from './store';
+import { GlobalStore } from '../store';
+import { settingsSelectors } from './settings';
 
-describe('globalSelectors', () => {
+describe('settingsSelectors', () => {
   describe('currentSettings', () => {
     it('should merge DEFAULT_SETTINGS and s.settings correctly', () => {
       const s = {
@@ -36,7 +36,7 @@ describe('globalSelectors', () => {
         },
       } as unknown as GlobalStore;
 
-      const result = globalSelectors.currentSettings(s);
+      const result = settingsSelectors.currentSettings(s);
 
       expect(result).toEqual({
         avatar: 'avatar.jpg',
@@ -93,7 +93,7 @@ describe('globalSelectors', () => {
   //       },
   //     };
   //
-  //     const result = globalSelectors.defaultAgent(s);
+  //     const result = settingsSelectors.defaultAgent(s);
   //
   //
   //
@@ -114,9 +114,9 @@ describe('globalSelectors', () => {
   //       },
   //     };
   //
-  //     const result = globalSelectors.defaultAgentConfig(s);
+  //     const result = settingsSelectors.defaultAgentConfig(s);
   //
-  //     const defaultAgent = globalSelectors.defaultAgent(s);
+  //     const defaultAgent = settingsSelectors.defaultAgent(s);
   //     const expected = merge({}, DEFAULT_AGENT_CONFIG, defaultAgent.config);
   //
   //     expect(result).toEqual(expected);
@@ -136,9 +136,9 @@ describe('globalSelectors', () => {
   //       },
   //     };
   //
-  //     const result = globalSelectors.defaultAgentMeta(s);
+  //     const result = settingsSelectors.defaultAgentMeta(s);
   //
-  //     const defaultAgent = globalSelectors.defaultAgent(s);
+  //     const defaultAgent = settingsSelectors.defaultAgent(s);
   //     const expected = merge({}, DEFAULT_AGENT_META, defaultAgent.meta);
   //
   //     expect(result).toEqual(expected);
@@ -183,7 +183,7 @@ describe('globalSelectors', () => {
   //       },
   //     };
   //
-  //     const result = globalSelectors.exportSettings(s);
+  //     const result = settingsSelectors.exportSettings(s);
   //
   //     const expected = {
   //       avatar: 'avatar.jpg',
@@ -255,7 +255,7 @@ describe('globalSelectors', () => {
   //       },
   //     };
   //
-  //     const result = globalSelectors.exportSettings(s);
+  //     const result = settingsSelectors.exportSettings(s);
   //
   //     expect(result).toBeInstanceOf(GlobalSettings);
   //   });

package/src/store/global/selectors/settings.ts

@@ -0,0 +1,44 @@
+import { DEFAULT_AGENT_META } from '@/const/meta';
+import { DEFAULT_AGENT, DEFAULT_AGENT_CONFIG, DEFAULT_SETTINGS } from '@/const/settings';
+import { Locales } from '@/locales/resources';
+import { GlobalSettings } from '@/types/settings';
+import { merge } from '@/utils/merge';
+
+import { GlobalStore } from '../store';
+
+const currentSettings = (s: GlobalStore) => merge(DEFAULT_SETTINGS, s.settings);
+
+const defaultAgent = (s: GlobalStore) => merge(DEFAULT_AGENT, s.settings.defaultAgent);
+
+const defaultAgentConfig = (s: GlobalStore) => merge(DEFAULT_AGENT_CONFIG, defaultAgent(s).config);
+
+const defaultAgentMeta = (s: GlobalStore) => merge(DEFAULT_AGENT_META, defaultAgent(s).meta);
+
+const openAIAPIKeySelectors = (s: GlobalStore) =>
+  s.settings.languageModel.openAI.OPENAI_API_KEY || s.settings.OPENAI_API_KEY;
+
+export const exportSettings = (s: GlobalStore) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { OPENAI_API_KEY: _, password: __, ...settings } = s.settings;
+
+  return settings as GlobalSettings;
+};
+
+const currentLanguage = (s: GlobalStore) => {
+  const locale = s.settings.language;
+  if (locale === 'auto') {
+    return navigator.language as Locales;
+  }
+
+  return locale;
+};
+
+export const settingsSelectors = {
+  currentLanguage,
+  currentSettings,
+  defaultAgent,
+  defaultAgentConfig,
+  defaultAgentMeta,
+  exportSettings,
+  openAIAPI: openAIAPIKeySelectors,
+};

package/src/store/global/selectors.ts

@@ -1,36 +1 @@
-import { DEFAULT_AGENT_META } from '@/const/meta';
-import { DEFAULT_AGENT, DEFAULT_AGENT_CONFIG, DEFAULT_SETTINGS } from '@/const/settings';
-import { GlobalSettings } from '@/types/settings';
-import { merge } from '@/utils/merge';
-
-import { GlobalStore } from './store';
-
-const currentSettings = (s: GlobalStore) => merge(DEFAULT_SETTINGS, s.settings);
-
-const defaultAgent = (s: GlobalStore) => merge(DEFAULT_AGENT, s.settings.defaultAgent);
-
-const defaultAgentConfig = (s: GlobalStore) => merge(DEFAULT_AGENT_CONFIG, defaultAgent(s).config);
-
-const defaultAgentMeta = (s: GlobalStore) => merge(DEFAULT_AGENT_META, defaultAgent(s).meta);
-
-const openAIAPIKeySelectors = (s: GlobalStore) =>
-  s.settings.languageModel.openAI.OPENAI_API_KEY || s.settings.OPENAI_API_KEY;
-
-export const exportSettings = (s: GlobalStore) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { OPENAI_API_KEY: _, password: __, ...settings } = s.settings;
-
-  return settings as GlobalSettings;
-};
-
-export const globalSelectors = {
-  currentSettings,
-  defaultAgent,
-  defaultAgentConfig,
-  defaultAgentMeta,
-  exportSettings,
-};
-
-export const settingsSelectors = {
-  openAIAPI: openAIAPIKeySelectors,
-};
+export * from './selectors/settings';

package/src/store/global/slices/common.ts

@@ -1,7 +1,7 @@
 import { produce } from 'immer';
-import { merge } from 'lodash-es';
 import type { StateCreator } from 'zustand/vanilla';
 
+import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
 
 import type { GlobalPreference, GlobalState, Guide, SidebarTabKey } from '../initialState';
@@ -47,14 +47,13 @@ export const createCommonSlice: StateCreator<
   },
   updateGuideState: (guide) => {
     const { updatePreference } = get();
-    const nextGuide = merge({}, get().preference.guide, guide);
+    const nextGuide = merge(get().preference.guide, guide);
     updatePreference({ guide: nextGuide });
   },
-
   updatePreference: (preference, action) => {
     set(
       produce((draft: GlobalState) => {
-        draft.preference = merge({}, draft.preference, preference);
+        draft.preference = merge(draft.preference, preference);
       }),
       false,
       action,

package/src/types/locale.ts

@@ -1 +1,5 @@
+import { Locales } from '@/locales/resources';
+
 export type * from '@/locales/resources';
+
+export type LocaleMode = Locales | 'auto';

package/src/types/settings.ts

@@ -1,7 +1,7 @@
 import type { NeutralColors, PrimaryColors } from '@lobehub/ui';
 import type { ThemeMode } from 'antd-style';
 
-import type { Locales } from '@/locales/resources';
+import { LocaleMode } from '@/types/locale';
 import type { LobeAgentSession } from '@/types/session';
 
 export interface GlobalBaseSettings {
@@ -36,7 +36,7 @@ export interface GlobalBaseSettings {
    * @deprecated
    */
   historyCount?: number;
-  language: Locales;
+  language: LocaleMode;
   neutralColor?: NeutralColors;
   password: string;
   primaryColor?: PrimaryColors;

package/src/utils/env.ts

@@ -1 +1,3 @@
 export const isDev = process.env.NODE_ENV === 'development';
+
+export const isOnServerSide = typeof window === 'undefined';

package/src/utils/responsive.ts

@@ -12,6 +12,7 @@ export const isMobileDevice = () => {
   const { get } = headers();
   const ua = get('user-agent');
 
+  // console.log(ua);
   const device = new UAParser(ua || '').getDevice();
 
   return device.type === 'mobile';

package/src/utils/switchLang.ts

@@ -1,6 +1,10 @@
 import { changeLanguage } from 'i18next';
 
-export const switchLang = (lang: string) => {
+import { LocaleMode } from '@/types/locale';
+
+export const switchLang = (locale: LocaleMode) => {
+  const lang = locale === 'auto' ? navigator.language : locale;
+
   changeLanguage(lang);
   document.documentElement.lang = lang;
 };

package/src/app/chat/features/Sidebar/index.tsx

@@ -1,29 +0,0 @@
-import { useResponsive } from 'antd-style';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import Desktop from './Desktop';
-import Mobile from './Mobile';
-import { Topic } from './Topic';
-import TopicSearchBar from './TopicSearchBar';
-
-const SideBar = memo(() => {
-  const { mobile } = useResponsive();
-
-  const Render = mobile ? Mobile : Desktop;
-
-  return (
-    <Render>
-      <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
-        <Flexbox padding={16}>
-          <TopicSearchBar />
-        </Flexbox>
-        <Flexbox gap={16} paddingInline={16} style={{ overflowY: 'auto', position: 'relative' }}>
-          <Topic />
-        </Flexbox>
-      </Flexbox>
-    </Render>
-  );
-});
-
-export default SideBar;

package/src/app/chat/index.tsx

@@ -1,54 +0,0 @@
-'use client';
-
-import { useResponsive } from 'antd-style';
-import Head from 'next/head';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import { useSessionStore } from '@/store/session';
-import { useEffectAfterSessionHydrated } from '@/store/session/hooks';
-import { agentSelectors } from '@/store/session/selectors';
-import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
-
-import Conversation from './features/Conversation';
-import Header from './features/Header';
-import SideBar from './features/Sidebar';
-import DesktopLayout from './layout.desktop';
-import MobileLayout from './layout.mobile';
-
-const Chat = memo(() => {
-  const { mobile } = useResponsive();
-  const [avatar, title] = useSessionStore((s) => [
-    agentSelectors.currentAgentAvatar(s),
-    agentSelectors.currentAgentTitle(s),
-  ]);
-  const pageTitle = genSiteHeadTitle([avatar, title].filter(Boolean).join(' '));
-  const RenderLayout = mobile ? MobileLayout : DesktopLayout;
-
-  useEffectAfterSessionHydrated(
-    (store) => {
-      store.setState({ isMobile: mobile });
-    },
-    [mobile],
-  );
-
-  return (
-    <>
-      <Head>
-        <title>{pageTitle}</title>
-      </Head>
-      <RenderLayout>
-        {!mobile && (
-          <>
-            <Header />
-            <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
-              <Conversation />
-              <SideBar />
-            </Flexbox>
-          </>
-        )}
-      </RenderLayout>
-    </>
-  );
-});
-export default Chat;

package/src/app/chat/layout.mobile.tsx

@@ -1,20 +0,0 @@
-import { memo } from 'react';
-
-import AppMobileLayout from '@/layout/AppMobileLayout';
-import { useSwitchSideBarOnInit } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
-
-import { Sessions } from './features/SessionList';
-import Header from './features/SessionList/Header';
-
-const ChatMobileLayout = memo(() => {
-  useSwitchSideBarOnInit(SidebarTabKey.Chat);
-
-  return (
-    <AppMobileLayout navBar={<Header />} showTabBar>
-      <Sessions />
-    </AppMobileLayout>
-  );
-});
-
-export default ChatMobileLayout;

package/src/app/chat/mobile/index.tsx

@@ -1,38 +0,0 @@
-'use client';
-
-import Head from 'next/head';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import AppMobileLayout from '@/layout/AppMobileLayout';
-import { useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/selectors';
-import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
-
-import Conversation from '../features/Conversation';
-import Header from '../features/Header';
-import SideBar from '../features/Sidebar';
-
-const Chat = memo(() => {
-  const [avatar, title] = useSessionStore((s) => [
-    agentSelectors.currentAgentAvatar(s),
-    agentSelectors.currentAgentTitle(s),
-  ]);
-
-  const pageTitle = genSiteHeadTitle([avatar, title].filter(Boolean).join(' '));
-
-  return (
-    <>
-      <Head>
-        <title>{pageTitle}</title>
-      </Head>
-      <AppMobileLayout navBar={<Header />}>
-        <Flexbox height={'calc(100vh - 44px)'} horizontal>
-          <Conversation mobile />
-          <SideBar />
-        </Flexbox>
-      </AppMobileLayout>
-    </>
-  );
-});
-export default Chat;

package/src/app/chat/mobile/page.tsx

@@ -1,7 +0,0 @@
-import Page from './index';
-
-const Index = () => {
-  return <Page />;
-};
-
-export default Index;