@lobehub/chat 0.54.0 → 0.54.1

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.54.1](https://github.com/lobehub/lobe-chat/compare/v0.54.0...v0.54.1)
+
+<sup>Released on **2023-08-16**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: 修正 i18n 失效的问题.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: 修正 i18n 失效的问题, closes [#80](https://github.com/lobehub/lobe-chat/issues/80) ([b8d957b](https://github.com/lobehub/lobe-chat/commit/b8d957b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.54.0](https://github.com/lobehub/lobe-chat/compare/v0.53.0...v0.54.0)
 
 <sup>Released on **2023-08-15**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.54.0",
+  "version": "0.54.1",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/layout/index.tsx

@@ -3,22 +3,26 @@ import { App, ConfigProvider } from 'antd';
 import { useThemeMode } from 'antd-style';
 import 'antd/dist/reset.css';
 import Zh_CN from 'antd/locale/zh_CN';
+import { changeLanguage } from 'i18next';
 import { PropsWithChildren, memo, useCallback, useEffect } from 'react';
 
-import { useGlobalStore } from '@/store/global';
+import { createI18nNext } from '@/locales/create';
+import { useGlobalStore, useOnFinishHydrationGlobal } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { GlobalStyle } from '@/styles';
 
-import i18n from '../locales';
 import { useStyles } from './style';
 
+const i18n = createI18nNext();
+
 const Layout = memo<PropsWithChildren>(({ children }) => {
   const { styles } = useStyles();
 
-  useEffect(() => {
-    // 用一种比较奇怪的方式import 了 18n
-    i18n.finally(() => {});
-  }, []);
+  useOnFinishHydrationGlobal((state) => {
+    i18n.then(() => {
+      changeLanguage(state.settings.language);
+    });
+  });
 
   return (
     <ConfigProvider locale={Zh_CN}>

package/src/locales/create.ts

@@ -7,12 +7,13 @@ import type { Namespaces } from '@/types/locale';
 
 import resources from './resources';
 
-export const createI18nNext = (namespace?: Namespaces[] | Namespaces) => {
-  const ns: Namespaces[] = namespace
-    ? isArray(namespace)
-      ? ['error', 'common', ...namespace]
-      : ['error', 'common', namespace]
-    : ['error', 'common'];
+export const createI18nNext = (params: { namespace?: Namespaces[] | Namespaces } = {}) => {
+  const { namespace } = params;
+
+  const ns: Namespaces[] = isArray(namespace)
+    ? ['error', 'common', ...namespace]
+    : (['error', 'common', namespace].filter(Boolean) as Namespaces[]);
+
   return (
     i18n
       // detect user language
@@ -23,9 +24,12 @@ export const createI18nNext = (namespace?: Namespaces[] | Namespaces) => {
       // init i18next
       // for all options read: https://www.i18next.com/overview/configuration-options
       .init({
-        // @ts-ignore
         debug: process.env.NODE_ENV === 'development',
         defaultNS: ns,
+        // LanguageDetector config, refs: https://github.com/i18next/i18next-browser-languageDetector
+        detection: {
+          caches: [],
+        },
         fallbackLng: 'zh-CN',
         interpolation: {
           escapeValue: false, // not needed for react as it escapes by default

package/src/locales/resources/en_US.ts

@@ -1,3 +1,15 @@
-const resources = {} as const;
+import common from '../../../locales/en_US/common.json';
+import empty from '../../../locales/en_US/empty.json';
+import error from '../../../locales/en_US/error.json';
+import plugin from '../../../locales/en_US/plugin.json';
+import setting from '../../../locales/en_US/setting.json';
+
+const resources = {
+  common,
+  empty,
+  error,
+  plugin,
+  setting,
+} as const;
 
 export default resources;

package/src/pages/settings/layout.tsx

@@ -1,25 +1,25 @@
 import Head from 'next/head';
-import { ReactNode, memo, useEffect } from 'react';
+import { ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import SideBar from '@/features/SideBar';
 import { createI18nNext } from '@/locales/create';
-import { useSwitchSideBarOnInit } from '@/store/global';
+import { useOnFinishHydrationGlobal, useSwitchSideBarOnInit } from '@/store/global';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
-const initI18n = createI18nNext('setting');
+const initI18n = createI18nNext({ namespace: 'setting' });
 
 const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
   const { t } = useTranslation('setting');
   const pageTitle = genSiteHeadTitle(t('header.global'));
 
-  useEffect(() => {
-    initI18n.finally();
-  }, []);
-
   useSwitchSideBarOnInit('settings');
 
+  useOnFinishHydrationGlobal(() => {
+    initI18n.then(() => {});
+  });
+
   return (
     <>
       <Head>

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

@@ -1,2 +1,3 @@
 export * from './useHydrated';
+export * from './useOnFinishHydrationGlobal';
 export * from './useSwitchSideBarOnInit';

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

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 import { useGlobalStore } from '../store';
 
-export const useSettingsHydrated = () => {
+export const useGlobalHydrated = () => {
   // 根据 sessions 是否有值来判断是否已经初始化
   const hasInited = !!Object.values(useGlobalStore.getState().settings).length;
 

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

@@ -1,18 +1,18 @@
 import { useEffect } from 'react';
 
-import { useGlobalStore } from '../store';
+import { GlobalStore, useGlobalStore } from '../store';
 
 /**
  * 当 Session 水合完毕后才会执行的 useEffect
  * @param fn
  * @param deps
  */
-export const useOnFinishHydrationGlobal = (fn: () => void, deps: any[] = []) => {
+export const useOnFinishHydrationGlobal = (fn: (state: GlobalStore) => void, deps: any[] = []) => {
   useEffect(() => {
     const hasRehydrated = useGlobalStore.persist.hasHydrated();
     // 只有当水合完毕后再开始做操作
     if (!hasRehydrated) return;
 
-    fn();
+    fn(useGlobalStore.getState());
   }, deps);
 };

package/src/locales/index.ts

@@ -1,5 +0,0 @@
-import { createI18nNext } from './create';
-
-const initI18n = createI18nNext();
-
-export default initI18n;