@lobehub/chat 0.82.9 → 0.83.1

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.83.1](https://github.com/lobehub/lobe-chat/compare/v0.83.0...v0.83.1)
+
+<sup>Released on **2023-10-06**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor settings page entry.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor settings page entry ([e86aff2](https://github.com/lobehub/lobe-chat/commit/e86aff2))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.83.0](https://github.com/lobehub/lobe-chat/compare/v0.82.9...v0.83.0)
+
+<sup>Released on **2023-10-06**</sup>
+
+#### ✨ Features
+
+- **misc**: Upgrade locale with SSR.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Upgrade locale with SSR, closes [#268](https://github.com/lobehub/lobe-chat/issues/268) ([2fdea52](https://github.com/lobehub/lobe-chat/commit/2fdea52))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.82.9](https://github.com/lobehub/lobe-chat/compare/v0.82.8...v0.82.9)
 
 <sup>Released on **2023-10-05**</sup>

package/locales/en_US/error.json

@@ -36,6 +36,7 @@
     "password": {
       "description": "The application encryption has been enabled by the administrator. Enter the application password to unlock the application. The password only needs to be filled in once.",
       "title": "Enter Password to Unlock Application"
-    }
+    },
+    "closeMessage": "Close message"
   }
 }

package/locales/en_US/plugin.json

@@ -115,6 +115,7 @@
     "updateAt": "Last Updated"
   },
   "responseData": "Response Data",
+  "setting": "Plugin Settings",
   "settings": {
     "indexUrl": {
       "title": "Marketplace Index",

package/locales/en_US/setting.json

@@ -211,7 +211,8 @@
       "title": "Font Size"
     },
     "lang": {
-      "title": "Language Settings"
+      "title": "Language Settings",
+      "autoMode": "Follow System"
     },
     "neutralColor": {
       "desc": "Custom grayscale for different color tendencies",

package/locales/ru_RU/error.json

@@ -36,6 +36,7 @@
     "password": {
       "description": "Шифрование приложения включено администратором. Введите пароль приложения, чтобы разблокировать приложение. Пароль необходимо ввести только один раз.",
       "title": "Введите пароль для разблокировки приложения"
-    }
+    },
+    "closeMessage": "Закрыть сообщение"
   }
 }

package/locales/ru_RU/plugin.json

@@ -95,6 +95,7 @@
   "plugins": {
     "unknown": "Проверка плагинов..."
   },
+  "setting": "Настройки плагина",
   "settings": {
     "indexUrl": {
       "title": "Индекс рынка",

package/locales/ru_RU/setting.json

@@ -211,7 +211,8 @@
       "title": "Размер шрифта"
     },
     "lang": {
-      "title": "Языковые настройки"
+      "title": "Языковые настройки",
+      "autoMode": "Следовать за системой"
     },
     "neutralColor": {
       "desc": "Пользовательская шкала серого для различных цветовых тенденций",

package/locales/zh_CN/error.json

@@ -32,6 +32,7 @@
       "description": "输入你的 OpenAI API Key 即可绕过密码验证。应用不会记录你的 API Key",
       "title": "使用自定义 API Key"
     },
+    "closeMessage": "关闭提示",
     "confirm": "确认并重试",
     "password": {
       "description": "管理员已开启应用加密，输入应用密码后即可解锁应用。密码只需填写一次",

package/locales/zh_CN/plugin.json

@@ -95,10 +95,11 @@
   "plugins": {
     "unknown": "插件检测中..."
   },
+  "setting": "插件设置",
   "settings": {
     "indexUrl": {
       "title": "市场索引",
-      "tooltip": "暂不支持编辑"
+      "tooltip": "暂不支持在线编辑，请通过部署时环境变量进行设置"
     },
     "modalDesc": "配置插件市场的地址后，可以使用自定义的插件市场",
     "title": "设置插件市场"

package/locales/zh_CN/setting.json

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

package/locales/zh_TW/error.json

@@ -36,6 +36,7 @@
     "password": {
       "description": "管理員已啟用應用程式加密，輸入應用程式密碼後即可解鎖應用程式。密碼只需填寫一次。",
       "title": "輸入密碼解鎖應用程式"
-    }
+    },
+    "closeMessage": "關閉提示"
   }
 }

package/locales/zh_TW/plugin.json

@@ -115,6 +115,7 @@
     "updateAt": "最後更新時間"
   },
   "responseData": "回應資料",
+  "setting": "插件設置",
   "settings": {
     "indexUrl": {
       "title": "外掛市集索引",

package/locales/zh_TW/setting.json

@@ -211,7 +211,8 @@
       "title": "字型大小"
     },
     "lang": {
-      "title": "語言設定"
+      "title": "語言設定",
+      "autoMode": "跟隨系統"
     },
     "neutralColor": {
       "desc": "不同色彩傾向的灰階自訂",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.82.9",
+  "version": "0.83.1",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",
@@ -76,7 +76,7 @@
     "ahooks": "^3",
     "ai": "^2",
     "antd": "^5",
-    "antd-style": "^3",
+    "antd-style": "^3.5",
     "brotli-wasm": "^1",
     "chroma-js": "^2",
     "dayjs": "^1",
@@ -85,6 +85,9 @@
     "gpt-tokenizer": "^2",
     "html-to-image": "^1",
     "i18next": "^23",
+    "i18next-browser-languagedetector": "^7",
+    "i18next-resources-for-ts": "^1",
+    "i18next-resources-to-backend": "^1",
     "idb-keyval": "^6",
     "immer": "^10",
     "lodash-es": "^4",
@@ -92,7 +95,7 @@
     "mixpanel-browser": "^2",
     "nanoid": "^5",
     "next": "^13.5.3",
-    "openai": "~4.10.0",
+    "openai": "^4.10.0",
     "polished": "^4",
     "posthog-js": "^1",
     "react": "^18",
@@ -139,8 +142,6 @@
     "dpdm": "^3",
     "eslint": "^8",
     "husky": "^8",
-    "i18next-browser-languagedetector": "^7",
-    "i18next-resources-for-ts": "^1",
     "jsdom": "^22",
     "lint-staged": "^14",
     "next-pwa": "^5",

package/src/app/chat/components/SessionList/List/Item/index.tsx

@@ -6,7 +6,7 @@ import { memo, useMemo, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import { globalSelectors, useGlobalStore } from '@/store/global';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 
@@ -36,7 +36,7 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   const isHovering = useHover(ref);
   const { mobile } = useResponsive();
   const { styles } = useStyles();
-  const [defaultModel] = useGlobalStore((s) => [globalSelectors.defaultAgentConfig(s).model]);
+  const [defaultModel] = useGlobalStore((s) => [settingsSelectors.defaultAgentConfig(s).model]);
 
   const [
     active,

package/src/app/home/index.tsx

@@ -1,20 +1,24 @@
 'use client';
 
 import { Icon, Logo } from '@lobehub/ui';
-import { t } from 'i18next';
 import { Loader2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
-const Loading = () => (
-  <Flexbox height={'100vh'} width={'100%'}>
-    <Center flex={1} gap={12} width={'100%'}>
-      <Logo extra={'Chat'} size={48} type={'combine'} />
-      <Center gap={16} horizontal>
-        <Icon icon={Loader2} spin />
-        {t('appInitializing', { ns: 'common' })}
+const Loading = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Flexbox height={'100vh'} width={'100%'}>
+      <Center flex={1} gap={12} width={'100%'}>
+        <Logo extra={'Chat'} size={48} type={'combine'} />
+        <Center gap={16} horizontal>
+          <Icon icon={Loader2} spin />
+          {t('appInitializing', { ns: 'common' })}
+        </Center>
       </Center>
-    </Center>
-  </Flexbox>
-);
+    </Flexbox>
+  );
+};
 
 export default Loading;

package/src/app/layout.tsx

@@ -2,6 +2,7 @@ import { cookies } from 'next/headers';
 import { PropsWithChildren } from 'react';
 
 import Analytics from '@/components/Analytics';
+import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
 import {
   LOBE_THEME_APPEARANCE,
   LOBE_THEME_NEUTRAL_COLOR,
@@ -17,13 +18,15 @@ const RootLayout = ({ children }: PropsWithChildren) => {
   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);
 
   return (
-    <html lang="en-US">
+    <html lang={lang?.value || DEFAULT_LANG}>
       <body>
         <StyleRegistry>
           <Layout
             defaultAppearance={appearance?.value}
+            defaultLang={lang?.value}
             defaultNeutralColor={neutralColor?.value as any}
             defaultPrimaryColor={primaryColor?.value as any}
           >

package/src/app/settings/agent/Agent.tsx

@@ -2,11 +2,11 @@ import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 
 import AgentSetting from '@/features/AgentSetting';
-import { globalSelectors, useGlobalStore } from '@/store/global';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 
 const Agent = memo(() => {
-  const config = useGlobalStore(globalSelectors.defaultAgentConfig, isEqual);
-  const meta = useGlobalStore(globalSelectors.defaultAgentMeta, isEqual);
+  const config = useGlobalStore(settingsSelectors.defaultAgentConfig, isEqual);
+  const meta = useGlobalStore(settingsSelectors.defaultAgentMeta, isEqual);
   const [updateAgent] = useGlobalStore((s) => [s.updateDefaultAgent]);
 
   return (

package/src/app/settings/agent/page.tsx

@@ -1,7 +1,21 @@
-import Page from './index';
+'use client';
 
-const Index = () => {
-  return <Page />;
-};
+import { memo } from 'react';
 
-export default Index;
+import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
+import { SettingsTabs } from '@/store/global/initialState';
+
+import Layout from '../index';
+import Agent from './Agent';
+
+const AgentSetting = memo(() => {
+  useSwitchSideBarOnInit(SettingsTabs.Agent);
+
+  return (
+    <Layout>
+      <Agent />
+    </Layout>
+  );
+});
+
+export default AgentSetting;

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/common/page.tsx

@@ -1,7 +1,20 @@
-import Page from './index';
+'use client';
 
-const Index = () => {
-  return <Page />;
-};
+import { memo } from 'react';
 
-export default Index;
+import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
+import { SettingsTabs } from '@/store/global/initialState';
+
+import Layout from '../index';
+import Common from './Common';
+
+const CommonSetting = memo(() => {
+  useSwitchSideBarOnInit(SettingsTabs.Common);
+  return (
+    <Layout>
+      <Common />
+    </Layout>
+  );
+});
+
+export default CommonSetting;