@lobehub/chat 0.82.8 → 0.83.0

package/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 # Changelog
 
+## [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>
+
+<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.82.8](https://github.com/lobehub/lobe-chat/compare/v0.82.7...v0.82.8)
 
 <sup>Released on **2023-09-30**</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.8",
+  "version": "0.83.0",
   "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/{features/Header → (desktop)/features/ChatHeader}/Desktop.tsx

@@ -12,8 +12,8 @@ import { useSessionChatInit, useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
-import PluginTag from './PluginTag';
-import ShareButton from './ShareButton';
+import PluginTag from '../../../components/ChatHeader/PluginTag';
+import ShareButton from '../../../components/ChatHeader/ShareButton';
 
 const Header = memo(() => {
   const init = useSessionChatInit();

package/src/app/chat/{features/Header → (desktop)/features/ChatHeader}/index.tsx

@@ -1,8 +1,8 @@
 import { useResponsive } from 'antd-style';
 import { memo } from 'react';
 
+import Mobile from '../../../components/ChatHeader/Mobile';
 import Desktop from './Desktop';
-import Mobile from './Mobile';
 
 const Header = memo(() => {
   const { mobile } = useResponsive();

package/src/app/chat/(desktop)/features/ChatInput/index.tsx

@@ -0,0 +1,22 @@
+import { useResponsive } from 'antd-style';
+import { memo, useState } from 'react';
+
+import { ChatInputContent } from '../../../components/ChatInput';
+import Mobile from '../../../components/ChatInput/Mobile';
+import Desktop from './Desktop';
+
+const ChatInput = () => {
+  const [expand, setExpand] = useState<boolean>(false);
+
+  const { mobile } = useResponsive();
+
+  const Render = mobile ? Mobile : Desktop;
+
+  return (
+    <Render expand={expand}>
+      <ChatInputContent expand={expand} onExpandChange={setExpand} />
+    </Render>
+  );
+};
+
+export default memo(ChatInput);

package/src/app/chat/{features/SessionList/Header → (desktop)/features/SessionHeader}/Desktop.tsx

@@ -7,7 +7,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useSessionStore } from '@/store/session';
 
-import SessionSearchBar from '../../SessionSearchBar';
+import SessionSearchBar from '../../../features/SessionSearchBar';
 
 export const useStyles = createStyles(({ css, token }) => ({
   logo: css`

package/src/app/chat/{features/SessionList/Header → (desktop)/features/SessionHeader}/index.tsx

@@ -1,8 +1,8 @@
 import { useResponsive } from 'antd-style';
 import { memo } from 'react';
 
+import Mobile from '../../../(mobile)/features/SessionHeader';
 import Desktop from './Desktop';
-import Mobile from './Mobile';
 
 const Header = memo(() => {
   const { mobile } = useResponsive();

package/src/app/chat/{features → (desktop)/features}/SessionList/Desktop.tsx

@@ -4,7 +4,7 @@ import { ReactNode, memo } from 'react';
 
 import FolderPanel from '@/features/FolderPanel';
 
-import Header from './Header';
+import Header from '../SessionHeader';
 
 const useStyles = createStyles(({ stylish }) => stylish.noScrollbar);
 

package/src/app/chat/(desktop)/features/SessionList/index.tsx

@@ -0,0 +1,20 @@
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+
+import { SessionListContent } from '../../../components/SessionList';
+import Mobile from '../../../components/SessionList/Mobile';
+import Desktop from './Desktop';
+
+const ResponsiveSessionList = memo(() => {
+  const { mobile } = useResponsive();
+
+  const Wrapper = mobile ? Mobile : Desktop;
+
+  return (
+    <Wrapper>
+      <SessionListContent />
+    </Wrapper>
+  );
+});
+
+export default ResponsiveSessionList;

package/src/app/chat/{features/Sidebar → (desktop)/features/SideBar}/Desktop.tsx

@@ -6,9 +6,9 @@ import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/slices/session/selectors';
+import { sessionSelectors } from '@/store/session/selectors';
 
-import SystemRole from './SystemRole';
+import SystemRole from '../../../components/Inspector/SystemRole';
 
 const useStyles = createStyles(({ css, token }) => ({
   content: css`
@@ -23,7 +23,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const SideBar = memo<{ children: ReactNode }>(({ children }) => {
+const Desktop = memo<{ children: ReactNode }>(({ children }) => {
   const { styles } = useStyles();
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
@@ -55,4 +55,4 @@ const SideBar = memo<{ children: ReactNode }>(({ children }) => {
   );
 });
 
-export default SideBar;
+export default Desktop;

package/src/app/chat/(desktop)/features/SideBar/index.tsx

@@ -0,0 +1,20 @@
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+
+import { InspectorContent } from '../../../components/Inspector';
+import Mobile from '../../../components/Inspector/Mobile';
+import Desktop from './Desktop';
+
+const SideBar = memo(() => {
+  const { mobile } = useResponsive();
+
+  const Render = mobile ? Mobile : Desktop;
+
+  return (
+    <Render>
+      <InspectorContent />
+    </Render>
+  );
+});
+
+export default SideBar;

package/src/app/chat/(desktop)/index.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Conversation from '../features/Conversation';
+import PageTitle from '../features/PageTitle';
+import ChatHeader from './features/ChatHeader';
+import ChatInput from './features/ChatInput';
+import SideBar from './features/SideBar';
+
+const DesktopPage = memo(() => {
+  return (
+    <>
+      <PageTitle />
+      <ChatHeader />
+      <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
+        <Conversation chatInput={<ChatInput />} />
+        <SideBar />
+      </Flexbox>
+    </>
+  );
+});
+export default DesktopPage;

package/src/app/chat/{layout.desktop.tsx → (desktop)/layout/Desktop.tsx}

@@ -5,14 +5,14 @@ import AppLayout from '@/layout/AppLayout';
 import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
-import { Sessions } from './features/SessionList';
+import ResponsiveSessionList from '../features/SessionList';
 
-const ChatLayout = memo<PropsWithChildren>(({ children }) => {
+const Desktop = memo<PropsWithChildren>(({ children }) => {
   useSwitchSideBarOnInit(SidebarTabKey.Chat);
 
   return (
     <AppLayout>
-      <Sessions />
+      <ResponsiveSessionList />
       <Flexbox
         flex={1}
         height={'100vh'}
@@ -25,4 +25,4 @@ const ChatLayout = memo<PropsWithChildren>(({ children }) => {
   );
 });
 
-export default ChatLayout;
+export default Desktop;

package/src/app/chat/(desktop)/layout/index.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { useResponsive } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+
+import { useEffectAfterSessionHydrated } from '@/store/session/hooks';
+
+import MobileLayout from '../../(mobile)/layout';
+import DesktopLayout from './Desktop';
+
+const Chat = memo<PropsWithChildren>(({ children }) => {
+  const { mobile } = useResponsive();
+
+  const RenderLayout = mobile ? MobileLayout : DesktopLayout;
+
+  useEffectAfterSessionHydrated(
+    (store) => {
+      store.setState({ isMobile: mobile });
+    },
+    [mobile],
+  );
+
+  return <RenderLayout>{children}</RenderLayout>;
+});
+export default Chat;

package/src/app/chat/(mobile)/features/ChatHeader.tsx

@@ -0,0 +1 @@
+export { default } from '../../components/ChatHeader/Mobile';

package/src/app/chat/(mobile)/features/ChatInput.tsx

@@ -0,0 +1,14 @@
+import { memo } from 'react';
+
+import { ChatInputContent } from '../../components/ChatInput';
+import Mobile from '../../components/ChatInput/Mobile';
+
+const ChatInput = () => {
+  return (
+    <Mobile>
+      <ChatInputContent mobile />
+    </Mobile>
+  );
+};
+
+export default memo(ChatInput);

package/src/app/chat/(mobile)/features/SessionList.tsx

@@ -0,0 +1,12 @@
+import { memo } from 'react';
+
+import { SessionListContent } from '../../components/SessionList';
+import Wrapper from '../../components/SessionList/Mobile';
+
+const SessionList = memo(() => (
+  <Wrapper>
+    <SessionListContent />
+  </Wrapper>
+));
+
+export default SessionList;

package/src/app/chat/(mobile)/features/Topics.tsx

@@ -0,0 +1,12 @@
+import { memo } from 'react';
+
+import { InspectorContent } from '../../components/Inspector';
+import Mobile from '../../components/Inspector/Mobile';
+
+const Topics = memo(() => (
+  <Mobile>
+    <InspectorContent />
+  </Mobile>
+));
+
+export default Topics;

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

@@ -0,0 +1,20 @@
+'use client';
+
+import { memo } from 'react';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+
+import PageTitle from '../features/PageTitle';
+import SessionHeader from './features/SessionHeader';
+import SessionList from './features/SessionList';
+
+const ChatMobilePage = memo(() => {
+  return (
+    <AppMobileLayout navBar={<SessionHeader />} showTabBar>
+      <PageTitle />
+      <SessionList />
+    </AppMobileLayout>
+  );
+});
+
+export default ChatMobilePage;

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

@@ -0,0 +1,15 @@
+'use client';
+
+import { PropsWithChildren, memo } from 'react';
+
+import { useEffectAfterSessionHydrated } from '@/store/session';
+
+const ChatMobileLayout = memo<PropsWithChildren>(({ children }) => {
+  useEffectAfterSessionHydrated((store) => {
+    store.setState({ isMobile: true });
+  }, []);
+
+  return children;
+});
+
+export default ChatMobileLayout;

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

@@ -0,0 +1,21 @@
+'use client';
+
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+
+import Conversation from '../../features/Conversation';
+import Header from '../features/ChatHeader';
+import ChatInput from '../features/ChatInput';
+import Topics from '../features/Topics';
+
+const Chat = memo(() => (
+  <AppMobileLayout navBar={<Header />}>
+    <Flexbox height={'calc(100vh - 44px)'} horizontal>
+      <Conversation chatInput={<ChatInput />} mobile />
+      <Topics />
+    </Flexbox>
+  </AppMobileLayout>
+));
+export default Chat;

package/src/app/chat/{features/Header → components/ChatHeader}/Mobile.tsx

@@ -4,13 +4,14 @@ import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import ShareButton from '@/app/chat/features/Header/ShareButton';
 import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
+import ShareButton from './ShareButton';
+
 const MobileHeader = memo(() => {
   const { t } = useTranslation('common');
   const router = useRouter();

package/src/app/chat/{features/Header → components/ChatHeader}/ShareButton/Preview.tsx

@@ -6,14 +6,14 @@ import { toJpeg, toPng, toSvg } from 'html-to-image';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import ChatList from 'src/app/chat/features/Conversation/ChatList';
 
-import pkg from '@/../package.json';
-import ChatList from '@/app/chat/features/Conversation/ChatList';
-import PluginTag from '@/app/chat/features/Header/PluginTag';
+import PluginTag from '@/app/chat/components/ChatHeader/PluginTag';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/slices/agentConfig';
 import { sessionSelectors } from '@/store/session/slices/session/selectors';
 
+import pkg from '../../../../../../package.json';
 import { useStyles } from './style';
 
 export enum ImageType {

package/src/app/chat/{features/Conversation/Input → components/ChatInput}/index.tsx

@@ -9,28 +9,32 @@ import { useSessionStore } from '@/store/session';
 
 import ActionLeft from './ActionBar/ActionLeft';
 import ActionsRight from './ActionBar/ActionRight';
-import Desktop from './Desktop';
 import Footer from './Footer';
-import Mobile from './Mobile';
 
 const Token = dynamic(() => import('./ActionBar/Token'), { ssr: false });
 
-const ChatInput = () => {
-  const { t } = useTranslation('common');
-  const [expand, setExpand] = useState<boolean>(false);
-  const [message, setMessage] = useState('');
-  const { mobile } = useResponsive();
+interface ChatContentProps {
+  expand?: boolean;
+  mobile?: boolean;
+  onExpandChange?: (expand: boolean) => void;
+}
 
-  const [isLoading, sendMessage, stopGenerateMessage] = useSessionStore((s) => [
-    !!s.chatLoadingId,
-    s.sendMessage,
-    s.stopGenerateMessage,
-  ]);
+export const ChatInputContent = memo<ChatContentProps>(
+  ({ expand, onExpandChange, mobile: defaultMobile }) => {
+    const { t } = useTranslation('common');
 
-  const Render = mobile ? Mobile : Desktop;
+    const [message, setMessage] = useState('');
+    const { mobile: runtimeMobile } = useResponsive();
 
-  return (
-    <Render expand={expand}>
+    const mobile = runtimeMobile || defaultMobile;
+
+    const [isLoading, sendMessage, stopGenerateMessage] = useSessionStore((s) => [
+      !!s.chatLoadingId,
+      s.sendMessage,
+      s.stopGenerateMessage,
+    ]);
+
+    return (
       <ChatInputArea
         actions={
           <>
@@ -45,7 +49,7 @@ const ChatInput = () => {
         footer={<Footer />}
         loading={isLoading}
         minHeight={mobile ? 0 : CHAT_TEXTAREA_HEIGHT}
-        onExpandChange={setExpand}
+        onExpandChange={onExpandChange}
         onInputChange={setMessage}
         onSend={sendMessage}
         onStop={stopGenerateMessage}
@@ -56,8 +60,6 @@ const ChatInput = () => {
         }}
         value={message}
       />
-    </Render>
-  );
-};
-
-export default memo(ChatInput);
+    );
+  },
+);