From fe44e4d3448b934c0f316390d5141dec3348d906 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 28 Feb 2025 16:06:28 -0800
Subject: [PATCH] i18n(html): sync html language with i18n language

---
 src/lib/components/chat/Settings/General.svelte | 4 ++--
 src/lib/i18n/index.ts                           | 8 ++++++++
 src/routes/+layout.svelte                       | 4 ++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index 00cf1d786..73ac662d0 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
 	import { createEventDispatcher, onMount, getContext } from 'svelte';
-	import { getLanguages } from '$lib/i18n';
+	import { getLanguages, changeLanguage } from '$lib/i18n';
 	const dispatch = createEventDispatcher();
 
 	import { models, settings, theme, user } from '$lib/stores';
@@ -198,7 +198,7 @@
 						bind:value={lang}
 						placeholder="Select a language"
 						on:change={(e) => {
-							$i18n.changeLanguage(lang);
+							changeLanguage(lang);
 						}}
 					>
 						{#each languages as language}
diff --git a/src/lib/i18n/index.ts b/src/lib/i18n/index.ts
index 172c42f91..e5e7fdef7 100644
--- a/src/lib/i18n/index.ts
+++ b/src/lib/i18n/index.ts
@@ -66,6 +66,9 @@ export const initI18n = (defaultLocale: string | undefined) => {
 				escapeValue: false // not needed for svelte as it escapes by default
 			}
 		});
+
+	const lang = i18next?.language || defaultLocale || 'en-US';
+	document.documentElement.setAttribute('lang', lang);
 };
 
 const i18n = createI18nStore(i18next);
@@ -75,5 +78,10 @@ export const getLanguages = async () => {
 	const languages = (await import(`./locales/languages.json`)).default;
 	return languages;
 };
+export const changeLanguage = (lang: string) => {
+	document.documentElement.setAttribute('lang', lang);
+	i18next.changeLanguage(lang);
+};
+
 export default i18n;
 export const isLoading = isLoadingStore;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d6383caa5..ae32a25c9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -40,7 +40,7 @@
 	import 'tippy.js/dist/tippy.css';
 
 	import { WEBUI_BASE_URL, WEBUI_HOSTNAME } from '$lib/constants';
-	import i18n, { initI18n, getLanguages } from '$lib/i18n';
+	import i18n, { initI18n, getLanguages, changeLanguage } from '$lib/i18n';
 	import { bestMatchingLanguage } from '$lib/utils';
 	import { getAllTags, getChatList } from '$lib/apis/chats';
 	import NotificationToast from '$lib/components/NotificationToast.svelte';
@@ -472,7 +472,7 @@
 			const lang = backendConfig.default_locale
 				? backendConfig.default_locale
 				: bestMatchingLanguage(languages, browserLanguages, 'en-US');
-			$i18n.changeLanguage(lang);
+			changeLanguage(lang);
 		}
 
 		if (backendConfig) {