From e3ae30f04f2d7132bbc636af77b8bd5214be789d Mon Sep 17 00:00:00 2001 From: Leon Guo Date: Wed, 8 May 2024 20:37:30 +0800 Subject: [PATCH] FEAT: Add i18n Multi-language support --- frontend/package.json | 4 +- frontend/public/locales/en/settings.json | 23 ++ frontend/public/locales/zh/settings.json | 23 ++ frontend/src/App.jsx | 1 + .../src/components/SettingsSidebar/index.jsx | 33 ++- .../Appearance/Language/index.jsx | 34 +++ .../GeneralSettings/Appearance/index.jsx | 8 +- .../src/pages/GeneralSettings/Chats/index.jsx | 4 +- .../EmbeddingPreference/index.jsx | 5 +- .../GeneralSettings/LLMPreference/index.jsx | 272 +++++++++--------- .../pages/GeneralSettings/Security/index.jsx | 13 +- frontend/src/utils/locale/i18n.ts | 20 ++ frontend/src/utils/locale/i18next.d.ts | 8 + frontend/src/utils/locale/resources.ts | 27 ++ frontend/yarn.lock | 34 +++ 15 files changed, 349 insertions(+), 160 deletions(-) create mode 100644 frontend/public/locales/en/settings.json create mode 100644 frontend/public/locales/zh/settings.json create mode 100644 frontend/src/pages/GeneralSettings/Appearance/Language/index.jsx create mode 100644 frontend/src/utils/locale/i18n.ts create mode 100644 frontend/src/utils/locale/i18next.d.ts create mode 100644 frontend/src/utils/locale/resources.ts diff --git a/frontend/package.json b/frontend/package.json index ded06aa9c77..855e1ef2052 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -31,11 +31,13 @@ "react-tag-input-component": "^2.0.2", "react-toastify": "^9.1.3", "react-tooltip": "^5.25.2", + "react-i18next": "13.0.3", "recharts": "^2.12.5", "recharts-to-png": "^2.3.1", "text-case": "^1.0.9", "truncate": "^3.0.0", - "uuid": "^9.0.0" + "uuid": "^9.0.0", + "i18next": "23.4.2" }, "devDependencies": { "@esbuild-plugins/node-globals-polyfill": "^0.1.1", diff --git a/frontend/public/locales/en/settings.json b/frontend/public/locales/en/settings.json new file mode 100644 index 00000000000..d69fcd9d2a3 --- /dev/null +++ b/frontend/public/locales/en/settings.json @@ -0,0 +1,23 @@ +{ + "title":"Instance Settings", + "WorkspaceChat": "Workspace Chat", + "Appearance": { + "menu-title":"Appearance", + "page-title":"Appearance" + }, + "APIKeys": "API Keys", + "LLMPreference": "LLM Preference", + "TranscriptionModel": "Transcription Model", + "EmbedderPreferences": "Embedding Preferences", + "VectorDatabase": "Vector Database", + "EmbeddedChat": "Embedded Chat", + "EmbeddedChatHistory": "Embedded Chat History", + "Security": { + "menu-title": "Security", + "page-title": "Multi-User Mode", + "Enable_Multi-User_Mode": "Enable Multi-User Mode", + "PasswordProtection": "Password Protection" + }, + "EventLogs": "Event Logs", + "PrivacyData": "Privacy & Data" +} \ No newline at end of file diff --git a/frontend/public/locales/zh/settings.json b/frontend/public/locales/zh/settings.json new file mode 100644 index 00000000000..8d019c5150c --- /dev/null +++ b/frontend/public/locales/zh/settings.json @@ -0,0 +1,23 @@ +{ + "title":"设置", + "WorkspaceChat": "对话工作区", + "Appearance": { + "menu-title":"外观", + "page-title":"外观设置" + }, + "APIKeys": "API 密钥", + "LLMPreference": "LLM 首选项", + "TranscriptionModel": "Transcription 模型", + "EmbedderPreferences": "Embedder 首选项", + "VectorDatabase": "向量数据库", + "EmbeddedChat": "嵌入式对话", + "EmbeddedChatHistory": "嵌入式对话历史", + "Security": { + "menu-title": "用户与安全", + "page-title": "多用户模式", + "Enable_Multi-User_Mode": "启用多用户模式", + "PasswordProtection": "密码保护" + }, + "EventLogs": "事件日志", + "PrivacyData": "隐私与数据" +} \ No newline at end of file diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 0a5ed65fc85..2a87dd7ab63 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -50,6 +50,7 @@ const EmbedChats = lazy(() => import("@/pages/GeneralSettings/EmbedChats")); const PrivacyAndData = lazy( () => import("@/pages/GeneralSettings/PrivacyAndData") ); +import "./utils/locale/i18n" export default function App() { return ( diff --git a/frontend/src/components/SettingsSidebar/index.jsx b/frontend/src/components/SettingsSidebar/index.jsx index 67797d26619..a6aa05bd4fb 100644 --- a/frontend/src/components/SettingsSidebar/index.jsx +++ b/frontend/src/components/SettingsSidebar/index.jsx @@ -27,6 +27,7 @@ import { USER_BACKGROUND_COLOR } from "@/utils/constants"; import { isMobile } from "react-device-detect"; import Footer from "../Footer"; import { Link } from "react-router-dom"; +import { useTranslation } from "react-i18next"; export default function SettingsSidebar() { const { logo } = useLogo(); @@ -35,6 +36,8 @@ export default function SettingsSidebar() { const [showSidebar, setShowSidebar] = useState(false); const [showBgOverlay, setShowBgOverlay] = useState(false); + const { t } = useTranslation(["settings"]); + useEffect(() => { function handleBg() { if (showSidebar) { @@ -143,12 +146,12 @@ export default function SettingsSidebar() { >
- Instance Settings + {t("title")}
- +
@@ -218,7 +221,7 @@ const Option = ({ ); }; -const SidebarOptions = ({ user = null }) => ( +const SidebarOptions = ({ user = null,t=null }) => ( <>
- )} -
- ); +
setHasChanges(true)} + className="mt-4 flex flex-col gap-y-1" + > + {selectedLLM && + AVAILABLE_LLM_PROVIDERS.find( + (llm) => llm.value === selectedLLM + )?.options?.(settings)} +
+
+ + + )} + +); } diff --git a/frontend/src/pages/GeneralSettings/Security/index.jsx b/frontend/src/pages/GeneralSettings/Security/index.jsx index 7d60aadadaf..f88767637ca 100644 --- a/frontend/src/pages/GeneralSettings/Security/index.jsx +++ b/frontend/src/pages/GeneralSettings/Security/index.jsx @@ -7,6 +7,8 @@ import paths from "@/utils/paths"; import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants"; import PreLoader from "@/components/Preloader"; import CTAButton from "@/components/lib/CTAButton"; +import { useTranslation } from "react-i18next"; + export default function GeneralSecurity() { return ( @@ -30,6 +32,8 @@ function MultiUserMode() { const [multiUserModeEnabled, setMultiUserModeEnabled] = useState(false); const [loading, setLoading] = useState(true); + const { t } = useTranslation(["settings"]); + const handleSubmit = async (e) => { e.preventDefault(); setSaving(true); @@ -90,7 +94,7 @@ function MultiUserMode() {

- Multi-User Mode + {t("Security.page-title")}

@@ -116,8 +120,8 @@ function MultiUserMode() {