@lobehub/chat 0.142.0 → 0.142.2

package/.env.example

@@ -98,6 +98,7 @@ OPENAI_API_KEY=sk-xxxxxxxxx
 ########################################
 
 #OPENROUTER_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+#OPENROUTER_CUSTOM_MODELS=model1,model2,model3
 
 ########################################
 ######### 01.AI Service ##########

package/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 # Changelog
 
+### [Version 0.142.2](https://github.com/lobehub/lobe-chat/compare/v0.142.1...v0.142.2)
+
+<sup>Released on **2024-03-25**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Support openrouter custom models env.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Support openrouter custom models env, closes [#1647](https://github.com/lobehub/lobe-chat/issues/1647) ([78baa16](https://github.com/lobehub/lobe-chat/commit/78baa16))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.142.1](https://github.com/lobehub/lobe-chat/compare/v0.142.0...v0.142.1)
+
+<sup>Released on **2024-03-25**</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 0.142.0](https://github.com/lobehub/lobe-chat/compare/v0.141.2...v0.142.0)
 
 <sup>Released on **2024-03-25**</sup>

package/Dockerfile

@@ -94,6 +94,7 @@ ENV MISTRAL_API_KEY ""
 
 # OpenRouter
 ENV OPENROUTER_API_KEY ""
+ENV OPENROUTER_CUSTOM_MODELS ""
 
 # 01.AI
 ENV ZEROONE_API_KEY ""

package/docs/self-hosting/environment-variables/model-provider.mdx

@@ -188,5 +188,12 @@ When using the `turn` mode, the API Keys will be retrieved in a round-robin mann
 - Default: -
 - Example: `sk-or-v1-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx=`
 
+### `OPENROUTER_CUSTOM_MODELS`
+
+- Type: Optional
+- Description: Used to control the model list, use `+` to add a model, use `-` to hide a model, use `model_name=display_name` to customize the display name of a model, separated by commas.
+- Default: `-`
+- Example: `-all,+01-ai/yi-34b-chat,+huggingfaceh4/zephyr-7b-beta`
+
 
 [azure-api-verion-url]: https://docs.microsoft.com/zh-cn/azure/developer/javascript/api-reference/es-modules/azure-sdk/ai-translation/translationconfiguration?view=azure-node-latest#api-version

package/docs/self-hosting/environment-variables/model-provider.zh-CN.mdx

@@ -186,6 +186,13 @@ LobeChat 在部署时提供了丰富的模型服务商相关的环境变量，
 - 默认值：-
 - 示例：`sk-or-v1-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx=`
 
+### `OPENROUTER_CUSTOM_MODELS`
+
+- 类型：可选
+- 描述：用来控制模型列表，使用 `+` 增加一个模型，使用 `-` 来隐藏一个模型，使用 `模型名=展示名` 来自定义模型的展示名，用英文逗号隔开。
+- 默认值：`-`
+- 示例：`-all,+01-ai/yi-34b-chat,+huggingfaceh4/zephyr-7b-beta`
+
 ## 01 AI
 
 ### `ZEROONE_API_KEY`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.142.0",
+  "version": "0.142.2",
   "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",

package/src/app/api/config/route.ts

@@ -26,6 +26,7 @@ export const GET = async () => {
     ENABLED_ZEROONE,
     DEFAULT_AGENT_CONFIG,
     OLLAMA_CUSTOM_MODELS,
+    OPENROUTER_CUSTOM_MODELS,
   } = getServerConfig();
 
   const config: GlobalServerConfig = {
@@ -43,7 +44,7 @@ export const GET = async () => {
       mistral: { enabled: ENABLED_MISTRAL },
       moonshot: { enabled: ENABLED_MOONSHOT },
       ollama: { customModelName: OLLAMA_CUSTOM_MODELS, enabled: ENABLE_OLLAMA },
-      openrouter: { enabled: ENABLED_OPENROUTER },
+      openrouter: { customModelName: OPENROUTER_CUSTOM_MODELS, enabled: ENABLED_OPENROUTER },
       perplexity: { enabled: ENABLED_PERPLEXITY },
       zeroone: { enabled: ENABLED_ZEROONE },
       zhipu: { enabled: ENABLED_ZHIPU },

package/src/app/layout.tsx

@@ -1,5 +1,6 @@
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import { ResolvingViewport } from 'next';
+import { SessionProvider } from 'next-auth/react';
 import { cookies } from 'next/headers';
 import { PropsWithChildren } from 'react';
 import { isRtlLang } from 'rtl-detect';
@@ -7,41 +8,28 @@ import { isRtlLang } from 'rtl-detect';
 import Analytics from '@/components/Analytics';
 import { getServerConfig } from '@/config/server';
 import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
-import {
-  LOBE_THEME_APPEARANCE,
-  LOBE_THEME_NEUTRAL_COLOR,
-  LOBE_THEME_PRIMARY_COLOR,
-} from '@/const/theme';
-import Layout from '@/layout/GlobalLayout';
+import GlobalProvider from '@/layout/GlobalProvider';
+import { API_ENDPOINTS } from '@/services/_url';
 import { isMobileDevice } from '@/utils/responsive';
 
-import StyleRegistry from './StyleRegistry';
+const { ENABLE_OAUTH_SSO = false } = getServerConfig();
 
-const { ENABLE_OAUTH_SSO } = getServerConfig();
-
-const RootLayout = ({ children }: PropsWithChildren) => {
-  // get default theme config to use with ssr
+const RootLayout = async ({ children }: PropsWithChildren) => {
   const cookieStore = cookies();
-  const appearance = cookieStore.get(LOBE_THEME_APPEARANCE);
-  const neutralColor = cookieStore.get(LOBE_THEME_NEUTRAL_COLOR);
-  const primaryColor = cookieStore.get(LOBE_THEME_PRIMARY_COLOR);
+
   const lang = cookieStore.get(LOBE_LOCALE_COOKIE);
   const direction = isRtlLang(lang?.value || DEFAULT_LANG) ? 'rtl' : 'ltr';
 
+  const content = ENABLE_OAUTH_SSO ? (
+    <SessionProvider basePath={API_ENDPOINTS.oauth}>{children}</SessionProvider>
+  ) : (
+    children
+  );
+
   return (
     <html dir={direction} lang={lang?.value || DEFAULT_LANG} suppressHydrationWarning>
       <body>
-        <StyleRegistry>
-          <Layout
-            defaultAppearance={appearance?.value}
-            defaultLang={lang?.value}
-            defaultNeutralColor={neutralColor?.value as any}
-            defaultPrimaryColor={primaryColor?.value as any}
-            enableOAuthSSO={ENABLE_OAUTH_SSO}
-          >
-            {children}
-          </Layout>
-        </StyleRegistry>
+        <GlobalProvider>{content}</GlobalProvider>
         <Analytics />
         <SpeedInsights />
       </body>

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

@@ -12,7 +12,7 @@ import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { localeOptions } from '@/locales/resources';
 import { useGlobalStore } from '@/store/global';
 import { settingsSelectors } from '@/store/global/selectors';
-import { switchLang } from '@/utils/switchLang';
+import { switchLang } from '@/utils/client/switchLang';
 
 import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from '../features/ThemeSwatches';
 

package/src/config/server/provider.ts

@@ -45,6 +45,7 @@ declare global {
 
       // OpenRouter Provider
       OPENROUTER_API_KEY?: string;
+      OPENROUTER_CUSTOM_MODELS?: string;
 
       // ZeroOne Provider
       ZEROONE_API_KEY?: string;
@@ -118,6 +119,7 @@ export const getProviderConfig = () => {
 
     ENABLED_OPENROUTER: !!OPENROUTER_API_KEY,
     OPENROUTER_API_KEY,
+    OPENROUTER_CUSTOM_MODELS: process.env.OPENROUTER_CUSTOM_MODELS,
 
     ENABLED_MOONSHOT: !!MOONSHOT_API_KEY,
     MOONSHOT_API_KEY,

package/src/features/DebugUI/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Icon } from '@lobehub/ui';
 import { App, FloatButton, Spin } from 'antd';
 import { DatabaseIcon, Loader2 } from 'lucide-react';

package/src/layout/{GlobalLayout → GlobalProvider}/AppTheme.tsx

@@ -1,7 +1,11 @@
+'use client';
+
 import { ConfigProvider, NeutralColors, PrimaryColors, ThemeProvider } from '@lobehub/ui';
-import { ThemeAppearance } from 'antd-style';
+import { App } from 'antd';
+import { ThemeAppearance, createStyles } from 'antd-style';
+import 'antd/dist/reset.css';
 import Image from 'next/image';
-import { ReactNode, memo, useEffect } from 'react';
+import { PropsWithChildren, ReactNode, memo, useEffect } from 'react';
 
 import {
   LOBE_THEME_APPEARANCE,
@@ -13,6 +17,25 @@ import { settingsSelectors } from '@/store/global/selectors';
 import { GlobalStyle } from '@/styles';
 import { setCookie } from '@/utils/cookie';
 
+const useStyles = createStyles(({ css, token }) => ({
+  bg: css`
+    overflow-y: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    height: 100%;
+
+    background: ${token.colorBgLayout};
+  `,
+}));
+
+const Container = memo<PropsWithChildren>(({ children }) => {
+  const { styles } = useStyles();
+
+  return <App className={styles.bg}>{children}</App>;
+});
+
 export interface AppThemeProps {
   children?: ReactNode;
   defaultAppearance?: ThemeAppearance;
@@ -53,7 +76,9 @@ const AppTheme = memo<AppThemeProps>(
         themeMode={themeMode}
       >
         <GlobalStyle />
-        <ConfigProvider config={{ imgAs: Image } as any}>{children}</ConfigProvider>
+        <ConfigProvider config={{ imgAs: Image } as any}>
+          <Container>{children}</Container>
+        </ConfigProvider>
       </ThemeProvider>
     );
   },

package/src/layout/{GlobalLayout → GlobalProvider}/Locale.tsx

@@ -1,39 +1,22 @@
+'use client';
+
 import { ConfigProvider } from 'antd';
 import { PropsWithChildren, memo, useEffect, useState } from 'react';
 import { isRtlLang } from 'rtl-detect';
-import useSWR from 'swr';
 
 import { createI18nNext } from '@/locales/create';
-import { normalizeLocale } from '@/locales/resources';
 import { isOnServerSide } from '@/utils/env';
-
-const getAntdLocale = async (lang?: string) => {
-  let normalLang = normalizeLocale(lang);
-
-  // due to antd only have ar-EG locale, we need to convert ar to ar-EG
-  // refs: https://ant.design/docs/react/i18n
-
-  // And we don't want to handle it in `normalizeLocale` function
-  // because of other locale files are all `ar` not `ar-EG`
-  if (normalLang === 'ar') normalLang = 'ar-EG';
-
-  const { default: locale } = await import(`antd/locale/${normalLang.replace('-', '_')}.js`);
-
-  return locale;
-};
+import { getAntdLocale } from '@/utils/locale';
 
 interface LocaleLayoutProps extends PropsWithChildren {
+  antdLocale?: any;
   defaultLang?: string;
 }
 
-const Locale = memo<LocaleLayoutProps>(({ children, defaultLang }) => {
+const Locale = memo<LocaleLayoutProps>(({ children, defaultLang, antdLocale }) => {
   const [i18n] = useState(createI18nNext(defaultLang));
   const [lang, setLang] = useState(defaultLang);
-
-  const { data: locale } = useSWR(['antd-locale', lang], ([, key]) => getAntdLocale(key), {
-    dedupingInterval: 0,
-    revalidateOnFocus: false,
-  });
+  const [locale, setLocale] = useState(antdLocale);
 
   // if run on server side, init i18n instance everytime
   if (isOnServerSide) {
@@ -49,15 +32,20 @@ const Locale = memo<LocaleLayoutProps>(({ children, defaultLang }) => {
 
   // handle i18n instance language change
   useEffect(() => {
-    const handleLang = (e: string) => {
-      setLang(e);
+    const handleLang = async (lng: string) => {
+      setLang(lng);
+
+      if (lang === lng) return;
+
+      const newLocale = await getAntdLocale(lng);
+      setLocale(newLocale);
     };
 
     i18n.instance.on('languageChanged', handleLang);
     return () => {
       i18n.instance.off('languageChanged', handleLang);
     };
-  }, [i18n]);
+  }, [i18n, lang]);
 
   // detect document direction
   const documentDir = isRtlLang(lang!) ? 'rtl' : 'ltr';
@@ -69,4 +57,6 @@ const Locale = memo<LocaleLayoutProps>(({ children, defaultLang }) => {
   );
 });
 
+Locale.displayName = 'Locale';
+
 export default Locale;

package/src/layout/{GlobalLayout → GlobalProvider}/StoreHydration.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useResponsive } from 'antd-style';
 import { useRouter } from 'next/navigation';
 import { memo, useEffect } from 'react';

package/src/layout/GlobalProvider/index.tsx

@@ -0,0 +1,62 @@
+import dynamic from 'next/dynamic';
+import { cookies } from 'next/headers';
+import { FC, ReactNode } from 'react';
+
+import { getClientConfig } from '@/config/client';
+import { LOBE_LOCALE_COOKIE } from '@/const/locale';
+import {
+  LOBE_THEME_APPEARANCE,
+  LOBE_THEME_NEUTRAL_COLOR,
+  LOBE_THEME_PRIMARY_COLOR,
+} from '@/const/theme';
+import { getAntdLocale } from '@/utils/locale';
+
+import AppTheme from './AppTheme';
+import Locale from './Locale';
+import StoreHydration from './StoreHydration';
+import StyleRegistry from './StyleRegistry';
+
+let DebugUI: FC = () => null;
+
+// we need use Constant Folding to remove code below in production
+// refs: https://webpack.js.org/plugins/internal-plugins/#constplugin
+if (process.env.NODE_ENV === 'development') {
+  // eslint-disable-next-line unicorn/no-lonely-if
+  if (getClientConfig().DEBUG_MODE) {
+    DebugUI = dynamic(() => import('@/features/DebugUI'), { ssr: false }) as FC;
+  }
+}
+
+interface GlobalLayoutProps {
+  children: ReactNode;
+}
+
+const GlobalLayout = async ({ children }: GlobalLayoutProps) => {
+  // get default theme config to use with ssr
+  const cookieStore = 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 antdLocale = await getAntdLocale(defaultLang?.value);
+
+  return (
+    <StyleRegistry>
+      <AppTheme
+        defaultAppearance={appearance?.value}
+        defaultNeutralColor={neutralColor?.value as any}
+        defaultPrimaryColor={primaryColor?.value as any}
+      >
+        <Locale antdLocale={antdLocale} defaultLang={defaultLang?.value}>
+          <StoreHydration />
+          {children}
+          <DebugUI />
+        </Locale>
+      </AppTheme>
+    </StyleRegistry>
+  );
+};
+
+export default GlobalLayout;

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

@@ -7,11 +7,11 @@ import { globalService } from '@/services/global';
 import { userService } from '@/services/user';
 import { useGlobalStore } from '@/store/global';
 import { GlobalServerConfig } from '@/types/settings';
-import { switchLang } from '@/utils/switchLang';
+import { switchLang } from '@/utils/client/switchLang';
 
 vi.mock('zustand/traditional');
 
-vi.mock('@/utils/switchLang', () => ({
+vi.mock('@/utils/client/switchLang', () => ({
   switchLang: vi.fn(),
 }));
 

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

@@ -12,10 +12,10 @@ import { UserConfig, userService } from '@/services/user';
 import type { GlobalStore } from '@/store/global';
 import type { GlobalServerConfig, GlobalSettings } from '@/types/settings';
 import { OnSyncEvent, PeerSyncStatus } from '@/types/sync';
+import { switchLang } from '@/utils/client/switchLang';
 import { merge } from '@/utils/merge';
 import { browserInfo } from '@/utils/platform';
 import { setNamespace } from '@/utils/storeDebug';
-import { switchLang } from '@/utils/switchLang';
 
 import { preferenceSelectors } from '../preference/selectors';
 import { settingsSelectors, syncSettingsSelectors } from '../settings/selectors';

package/src/store/global/slices/settings/selectors/__snapshots__/modelProvider.test.ts.snap

@@ -86,3 +86,145 @@ exports[`modelProviderSelectors > CUSTOM_MODELS > should work correct with gpt-4
   },
 ]
 `;
+
+exports[`modelProviderSelectors > OPENROUTER_CUSTOM_MODELS > custom deletion, addition, and renaming of models 1`] = `
+[
+  {
+    "chatModels": [
+      {
+        "description": "GPT 3.5 Turbo，适用于各种文本生成和理解任务",
+        "displayName": "GPT-3.5 Turbo",
+        "functionCall": true,
+        "id": "gpt-3.5-turbo",
+        "tokens": 16385,
+      },
+      {
+        "displayName": "GPT-3.5 Turbo (0125)",
+        "functionCall": true,
+        "hidden": true,
+        "id": "gpt-3.5-turbo-0125",
+        "tokens": 16385,
+      },
+      {
+        "displayName": "GPT-3.5 Turbo (1106)",
+        "functionCall": true,
+        "hidden": true,
+        "id": "gpt-3.5-turbo-1106",
+        "tokens": 16385,
+      },
+      {
+        "displayName": "GPT-3.5 Turbo Instruct",
+        "hidden": true,
+        "id": "gpt-3.5-turbo-instruct",
+        "tokens": 4096,
+      },
+      {
+        "displayName": "GPT-3.5 Turbo 16K",
+        "hidden": true,
+        "id": "gpt-3.5-turbo-16k",
+        "tokens": 16385,
+      },
+      {
+        "displayName": "GPT-3.5 Turbo (0613)",
+        "hidden": true,
+        "id": "gpt-3.5-turbo-0613",
+        "legacy": true,
+        "tokens": 4096,
+      },
+      {
+        "displayName": "GPT-3.5 Turbo 16K (0613)",
+        "hidden": true,
+        "id": "gpt-3.5-turbo-16k-0613",
+        "legacy": true,
+        "tokens": 4096,
+      },
+      {
+        "displayName": "GPT-4 Turbo Preview",
+        "functionCall": true,
+        "id": "gpt-4-turbo-preview",
+        "tokens": 128000,
+      },
+      {
+        "displayName": "GPT-4 Turbo Preview (0125)",
+        "functionCall": true,
+        "hidden": true,
+        "id": "gpt-4-0125-preview",
+        "tokens": 128000,
+      },
+      {
+        "description": "GPT-4 视觉预览版，支持视觉任务",
+        "displayName": "GPT-4 Turbo Vision Preview",
+        "id": "gpt-4-vision-preview",
+        "tokens": 128000,
+        "vision": true,
+      },
+      {
+        "displayName": "GPT-4 Turbo Preview (1106)",
+        "functionCall": true,
+        "hidden": true,
+        "id": "gpt-4-1106-preview",
+        "tokens": 128000,
+      },
+      {
+        "displayName": "GPT-4",
+        "functionCall": true,
+        "hidden": true,
+        "id": "gpt-4",
+        "tokens": 8192,
+      },
+      {
+        "displayName": "GPT-4 (0613)",
+        "functionCall": true,
+        "hidden": true,
+        "id": "gpt-4-0613",
+        "tokens": 8192,
+      },
+      {
+        "displayName": "GPT-4 32K",
+        "functionCall": true,
+        "hidden": true,
+        "id": "gpt-4-32k",
+        "tokens": 32768,
+      },
+      {
+        "displayName": "GPT-4 32K (0613)",
+        "functionCall": true,
+        "hidden": true,
+        "id": "gpt-4-32k-0613",
+        "tokens": 32768,
+      },
+      {
+        "displayName": "GPT-4 ALL",
+        "files": true,
+        "functionCall": true,
+        "hidden": true,
+        "id": "gpt-4-all",
+        "tokens": 32768,
+        "vision": true,
+      },
+    ],
+    "enabled": true,
+    "id": "openai",
+  },
+  {
+    "chatModels": [
+      {
+        "displayName": "google/gemma-7b-it",
+        "functionCall": true,
+        "id": "google/gemma-7b-it",
+        "isCustom": true,
+        "vision": true,
+      },
+      {
+        "displayName": "Mistral-7B-Instruct",
+        "functionCall": true,
+        "id": "mistralai/mistral-7b-instruct",
+        "isCustom": true,
+        "vision": true,
+      },
+    ],
+    "enabled": true,
+    "id": "openrouter",
+  },
+]
+`;

package/src/store/global/slices/settings/selectors/modelProvider.test.ts

@@ -131,6 +131,32 @@ describe('modelProviderSelectors', () => {
     });
   });
 
+  describe('OPENROUTER_CUSTOM_MODELS', () => {
+    it('custom deletion, addition, and renaming of models', () => {
+      const s = merge(initialSettingsState, {
+        settings: {
+          languageModel: {
+            openrouter: {
+              enabled: true,
+            },
+          }
+        },
+        serverConfig: {
+          languageModel: {
+            openrouter: {
+              apiKey: 'test-openrouter-api-key',
+              customModelName:
+                '-all,+google/gemma-7b-it,+mistralai/mistral-7b-instruct=Mistral-7B-Instruct',
+            },
+          }
+        },
+      }) as unknown as GlobalStore;
+
+      const result = modelProviderSelectors.modelSelectList(s).filter((r) => r.enabled);
+      expect(result).toMatchSnapshot();
+    });
+  });
+
   describe('modelEnabledVision', () => {
     it('should return true if the model has vision ability', () => {
       const hasAbility = modelProviderSelectors.modelEnabledVision('gpt-4-vision-preview')(

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

@@ -149,9 +149,15 @@ const modelSelectList = (s: GlobalStore): ModelProviderCard[] => {
 
   const ollamaChatModels = processChatModels(ollamaModelConfig, OllamaProvider.chatModels);
 
-  const openrouterModelConfig = parseModelString(
-    currentSettings(s).languageModel.openrouter.customModelName,
-  )
+  const openrouterModelString = [
+    s.serverConfig.languageModel?.openrouter?.customModelName,
+    currentSettings(s).languageModel.openrouter.customModelName
+  ]
+    .filter(Boolean)
+    .join(',');
+  
+  const openrouterModelConfig = parseModelString(openrouterModelString);
+  
   const openrouterChatModels = processChatModels(openrouterModelConfig, OpenRouterProvider.chatModels);
 
   return [

package/src/utils/locale.ts

@@ -0,0 +1,16 @@
+import { normalizeLocale } from '@/locales/resources';
+
+export const getAntdLocale = async (lang?: string) => {
+  let normalLang = normalizeLocale(lang);
+
+  // due to antd only have ar-EG locale, we need to convert ar to ar-EG
+  // refs: https://ant.design/docs/react/i18n
+
+  // And we don't want to handle it in `normalizeLocale` function
+  // because of other locale files are all `ar` not `ar-EG`
+  if (normalLang === 'ar') normalLang = 'ar-EG';
+
+  const { default: locale } = await import(`antd/locale/${normalLang.replace('-', '_')}.js`);
+
+  return locale;
+};

package/src/layout/GlobalLayout/index.tsx

@@ -1,75 +0,0 @@
-'use client';
-
-import { App } from 'antd';
-import { createStyles } from 'antd-style';
-import 'antd/dist/reset.css';
-import { SessionProvider } from 'next-auth/react';
-import dynamic from 'next/dynamic';
-import { FC, PropsWithChildren, memo } from 'react';
-
-import { getClientConfig } from '@/config/client';
-import { API_ENDPOINTS } from '@/services/_url';
-
-import AppTheme, { AppThemeProps } from './AppTheme';
-import Locale from './Locale';
-import StoreHydration from './StoreHydration';
-
-let DebugUI: FC = () => null;
-
-// we need use Constant Folding to remove code below in production
-// refs: https://webpack.js.org/plugins/internal-plugins/#constplugin
-if (process.env.NODE_ENV === 'development') {
-  // eslint-disable-next-line unicorn/no-lonely-if
-  if (getClientConfig().DEBUG_MODE) {
-    DebugUI = dynamic(() => import('@/features/DebugUI'), { ssr: false }) as FC;
-  }
-}
-
-const useStyles = createStyles(({ css, token }) => ({
-  bg: css`
-    overflow-y: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    height: 100%;
-
-    background: ${token.colorBgLayout};
-  `,
-}));
-
-const Container = memo<PropsWithChildren>(({ children }) => {
-  const { styles } = useStyles();
-
-  return <App className={styles.bg}>{children}</App>;
-});
-
-interface GlobalLayoutProps extends AppThemeProps {
-  defaultLang?: string;
-  enableOAuthSSO?: boolean;
-}
-
-const GlobalLayout = ({
-  children,
-  defaultLang,
-  enableOAuthSSO = false,
-  ...theme
-}: GlobalLayoutProps) => {
-  const content = (
-    <AppTheme {...theme}>
-      <Locale defaultLang={defaultLang}>
-        <StoreHydration />
-        <Container>{children}</Container>
-        <DebugUI />
-      </Locale>
-    </AppTheme>
-  );
-
-  return enableOAuthSSO ? (
-    <SessionProvider basePath={API_ENDPOINTS.oauth}>{content}</SessionProvider>
-  ) : (
-    content
-  );
-};
-
-export default GlobalLayout;