i18n(html): sync html language with i18n language

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}

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;