diff --git a/src/frontend/src/components/core/appHeaderComponent/components/AccountMenu/index.tsx b/src/frontend/src/components/core/appHeaderComponent/components/AccountMenu/index.tsx index 44269dd11f..891f222b6e 100644 --- a/src/frontend/src/components/core/appHeaderComponent/components/AccountMenu/index.tsx +++ b/src/frontend/src/components/core/appHeaderComponent/components/AccountMenu/index.tsx @@ -23,7 +23,6 @@ import { HeaderMenuToggle, } from "../HeaderMenu"; import ThemeButtons from "../ThemeButtons"; -import LanguageSelector from "../LanguageSelector"; export const AccountMenu = () => { const { t } = useTranslation(); @@ -172,13 +171,6 @@ export const AccountMenu = () => { -
- Language -
- -
-
- {!autoLogin && (
diff --git a/src/frontend/src/locales/en.json b/src/frontend/src/locales/en.json index cda9650118..bec06e7435 100644 --- a/src/frontend/src/locales/en.json +++ b/src/frontend/src/locales/en.json @@ -173,6 +173,9 @@ "settings.passwordRequired": "Please enter your password", "settings.confirmPasswordRequired": "Please confirm your password", "settings.saveButton": "Save", + "settings.languageTitle": "Language", + "settings.languageDescription": "Choose the display language for the Langflow interface.", + "settings.languageRecommended": "Recommended", "settings.profilePictureTitle": "Profile Picture", "settings.profilePictureDescription": "Choose the image that appears as your profile picture.", "settings.apiKeysTitle": "Langflow API Keys", diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/LanguageForm/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/LanguageForm/index.tsx new file mode 100644 index 0000000000..f1810991af --- /dev/null +++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/LanguageForm/index.tsx @@ -0,0 +1,60 @@ +import { useQueryClient } from "@tanstack/react-query"; +import { useTranslation } from "react-i18next"; +import { useTypesStore } from "@/stores/typesStore"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "../../../../../../components/ui/card"; + +const LANGUAGES = [ + { code: "en", label: "English" }, + { code: "fr", label: "Français" }, + { code: "es", label: "Español" }, + { code: "de", label: "Deutsch" }, + { code: "pt", label: "Português" }, + { code: "ja", label: "日本語" }, + { code: "zh-Hans", label: "中文" }, +]; + +const LanguageFormComponent = () => { + const { t, i18n } = useTranslation(); + const queryClient = useQueryClient(); + const setTypes = useTypesStore((state) => state.setTypes); + + const handleChange = (code: string) => { + i18n.changeLanguage(code); + localStorage.setItem("languagePreference", code); + setTypes({}); + queryClient.invalidateQueries({ queryKey: ["useGetTypes"] }); + }; + + return ( + + + {t("settings.languageTitle")} + {t("settings.languageDescription")} + + + + + + ); +}; + +export default LanguageFormComponent; diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx index 73ea73c483..3091439637 100644 --- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx @@ -21,6 +21,7 @@ import type { } from "../../../../types/components"; import useScrollToElement from "../hooks/use-scroll-to-element"; import GeneralPageHeaderComponent from "./components/GeneralPageHeader"; +import LanguageFormComponent from "./components/LanguageForm"; import PasswordFormComponent from "./components/PasswordForm"; import ProfilePictureFormComponent from "./components/ProfilePictureForm"; @@ -138,6 +139,8 @@ export const GeneralPage = () => {
+ + {ENABLE_PROFILE_ICONS && (