feat: implement LanguageSelector component and integrate language detection

Author: Irozuku

DashAI/front/src/components/LanguageSelector.jsx

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { FormControl, Select, MenuItem, Box } from "@mui/material";
+import LanguageIcon from "@mui/icons-material/Language";
+
+export default function LanguageSelector() {
+  const { i18n } = useTranslation();
+  const [language, setLanguage] = useState(i18n.language);
+
+  const handleLanguageChange = (event) => {
+    const newLanguage = event.target.value;
+    i18n.changeLanguage(newLanguage);
+    setLanguage(newLanguage);
+  };
+
+  return (
+    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+      <LanguageIcon sx={{ color: "text.secondary" }} />
+      <FormControl size="small" sx={{ minWidth: 120 }}>
+        <Select
+          value={language}
+          onChange={handleLanguageChange}
+          displayEmpty
+          sx={{
+            "& .MuiSelect-select": {
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+            },
+          }}
+        >
+          <MenuItem value="es">
+            <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+              <span>🇪🇸</span>
+              <span>Español</span>
+            </Box>
+          </MenuItem>
+          <MenuItem value="en">
+            <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+              <span>🇬🇧</span>
+              <span>English</span>
+            </Box>
+          </MenuItem>
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}

DashAI/front/src/components/ResponsiveAppBar.jsx

@@ -14,6 +14,7 @@ import { Link as RouterLink, useLocation } from "react-router-dom";
 import { useTheme } from "@mui/material/styles";
 import HomeIcon from "@mui/icons-material/HomeOutlined";
 import { useTranslation } from "react-i18next";
+import LanguageSelector from "./LanguageSelector";
 
 function ResponsiveAppBar() {
   const theme = useTheme();
@@ -124,6 +125,7 @@ function ResponsiveAppBar() {
               </Button>
             ))}
           </Box>
+          <LanguageSelector />
         </Toolbar>
       </Container>
     </AppBar>

DashAI/front/src/utils/i18n/index.js

@@ -1,5 +1,6 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
 import configurableObjectEN from "./locales/en/configurableObject.json";
 import configurableObjectES from "./locales/es/configurableObject.json";
 import commonEN from "./locales/en/common.json";
@@ -71,34 +72,36 @@ const resources = {
   },
 };
 
-i18n.use(initReactI18next).init({
-  resources,
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    supportedLngs: ["en", "es"],
+    fallbackLng: "en",
 
-  lng: "en",
-  fallbackLng: "en",
+    ns: [
+      "common",
+      "custom",
+      "configurableObject",
+      "experiments",
+      "explainers",
+      "generative",
+      "models",
+      "datasets",
+      "prediction",
+      "home",
+      "homeTour",
+      "datasetsTour",
+      "notebookTour",
+      "modelsTour",
+      "modelsSessionTour",
+    ],
+    defaultNS: "common",
 
-  ns: [
-    "common",
-    "custom",
-    "configurableObject",
-    "experiments",
-    "explainers",
-    "generative",
-    "models",
-    "datasets",
-    "prediction",
-    "home",
-    "homeTour",
-    "datasetsTour",
-    "notebookTour",
-    "modelsTour",
-    "modelsSessionTour",
-  ],
-  defaultNS: "common",
-
-  interpolation: {
-    escapeValue: false,
-  },
-});
+    interpolation: {
+      escapeValue: false,
+    },
+  });
 
 export default i18n;