Default language will be given according to the browse setting and also can be configured #801 (#823)

### What problem does this PR solve?

Default language will be given according to the browse setting and also
can be configured #801
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/package-lock.json

@@ -17,6 +17,7 @@
         "dayjs": "^1.11.10",
         "eventsource-parser": "^1.1.2",
         "i18next": "^23.7.16",
+        "i18next-browser-languagedetector": "^8.0.0",
         "js-base64": "^3.7.5",
         "jsencrypt": "^3.3.2",
         "lodash": "^4.17.21",
@@ -11732,6 +11733,14 @@
         "@babel/runtime": "^7.23.2"
       }
     },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.0.tgz",
+      "integrity": "sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",

web/package.json

@@ -21,6 +21,7 @@
     "dayjs": "^1.11.10",
     "eventsource-parser": "^1.1.2",
     "i18next": "^23.7.16",
+    "i18next-browser-languagedetector": "^8.0.0",
     "js-base64": "^3.7.5",
     "jsencrypt": "^3.3.2",
     "lodash": "^4.17.21",

web/src/locales/config.ts

@@ -1,4 +1,5 @@
 import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 
 import translation_en from './en';
@@ -11,13 +12,19 @@ const resources = {
   'zh-TRADITIONAL': translation_zh_traditional,
 };
 
-i18n.use(initReactI18next).init({
-  resources,
-  lng: 'en',
-  fallbackLng: 'en',
-  interpolation: {
-    escapeValue: false,
-  },
-});
+i18n
+  .use(initReactI18next)
+  .use(LanguageDetector)
+  .init({
+    detection: {
+      lookupLocalStorage: 'lng',
+    },
+    supportedLngs: ['en', 'zh', 'zh-TRADITIONAL'],
+    resources,
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false,
+    },
+  });
 
 export default i18n;