Merge pull request #1313 from asedmammad/feat/i18n-navigator-config

feat: Configurable i18n default translation language

backend/data/config.json

 {
     "version": 0,
     "ui": {
+	"default_locale": "en-US",
         "prompt_suggestions": [
             {
                 "title": [

backend/main.py

@@ -32,6 +32,7 @@ from utils.utils import get_admin_user
 from apps.rag.utils import rag_messages
 
 from config import (
+    CONFIG_DATA,
     WEBUI_NAME,
     ENV,
     VERSION,
@@ -88,7 +89,6 @@ class RAGMiddleware(BaseHTTPMiddleware):
             # Example: Add a new key-value pair or modify existing ones
             # data["modified"] = True  # Example modification
             if "docs" in data:
-
                 data = {**data}
                 data["messages"] = rag_messages(
                     data["docs"],
@@ -163,11 +163,11 @@ app.mount("/rag/api/v1", rag_app)
 
 @app.get("/api/config")
 async def get_app_config():
-
     return {
         "status": True,
         "name": WEBUI_NAME,
         "version": VERSION,
+        "default_locale": CONFIG_DATA["ui"]["default_locale"],
         "images": images_app.state.ENABLED,
         "default_models": webui_app.state.DEFAULT_MODELS,
         "default_prompt_suggestions": webui_app.state.DEFAULT_PROMPT_SUGGESTIONS,
@@ -191,7 +191,6 @@ class ModelFilterConfigForm(BaseModel):
 async def update_model_filter_config(
     form_data: ModelFilterConfigForm, user=Depends(get_admin_user)
 ):
-
     app.state.MODEL_FILTER_ENABLED = form_data.enabled
     app.state.MODEL_FILTER_LIST = form_data.models
 
@@ -231,7 +230,6 @@ async def update_webhook_url(form_data: UrlForm, user=Depends(get_admin_user)):
 
 @app.get("/api/version")
 async def get_app_config():
-
     return {
         "version": VERSION,
     }

src/lib/i18n/index.ts

@@ -37,23 +37,28 @@ const createIsLoadingStore = (i18n: i18nType) => {
 	return isLoading;
 };
 
-i18next
-	.use(
-		resourcesToBackend(
-			(language: string, namespace: string) => import(`./locales/${language}/${namespace}.json`)
-		)
-	)
+export const initI18n = (defaultLocale: string) => {
+	let detectionOrder = defaultLocale
+		? ['querystring', 'localStorage']
+		: ['querystring', 'localStorage', 'navigator'];
+	let fallbackDefaultLocale = defaultLocale ? [defaultLocale] : ['en-US'];
+
+	const loadResource = (language: string, namespace: string) =>
+		import(`./locales/${language}/${namespace}.json`);
+
+	i18next
+		.use(resourcesToBackend(loadResource))
 		.use(LanguageDetector)
 		.init({
 			debug: false,
 			detection: {
-			order: ['querystring', 'localStorage', 'navigator'],
+				order: detectionOrder,
 				caches: ['localStorage'],
 				lookupQuerystring: 'lang',
 				lookupLocalStorage: 'locale'
 			},
 			fallbackLng: {
-			default: ['en-US']
+				default: fallbackDefaultLocale
 			},
 			ns: 'translation',
 			returnEmptyString: false,
@@ -61,6 +66,7 @@ i18next
 				escapeValue: false // not needed for svelte as it escapes by default
 			}
 		});
+};
 
 const i18n = createI18nStore(i18next);
 const isLoadingStore = createIsLoadingStore(i18next);

src/routes/+layout.svelte

@@ -11,7 +11,7 @@
 	import '../tailwind.css';
 	import 'tippy.js/dist/tippy.css';
 	import { WEBUI_BASE_URL } from '$lib/constants';
-	import i18n from '$lib/i18n';
+	import i18n, { initI18n } from '$lib/i18n';
 
 	setContext('i18n', i18n);
 
@@ -25,6 +25,11 @@
 		if (backendConfig) {
 			// Save Backend Status to Store
 			await config.set(backendConfig);
+			if ($config.default_locale) {
+				initI18n($config.default_locale);
+			} else {
+				initI18n();
+			}
 
 			await WEBUI_NAME.set(backendConfig.name);
 			console.log(backendConfig);