i18n(html): sync html language with i18n language

This commit is contained in:
Timothy Jaeryang Baek 2025-02-28 16:06:28 -08:00
parent 88c02d5a14
commit fe44e4d344
3 changed files with 12 additions and 4 deletions

View File

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { createEventDispatcher, onMount, getContext } from 'svelte'; import { createEventDispatcher, onMount, getContext } from 'svelte';
import { getLanguages } from '$lib/i18n'; import { getLanguages, changeLanguage } from '$lib/i18n';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
import { models, settings, theme, user } from '$lib/stores'; import { models, settings, theme, user } from '$lib/stores';
@ -198,7 +198,7 @@
bind:value={lang} bind:value={lang}
placeholder="Select a language" placeholder="Select a language"
on:change={(e) => { on:change={(e) => {
$i18n.changeLanguage(lang); changeLanguage(lang);
}} }}
> >
{#each languages as language} {#each languages as language}

View File

@ -66,6 +66,9 @@ export const initI18n = (defaultLocale: string | undefined) => {
escapeValue: false // not needed for svelte as it escapes by default 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); const i18n = createI18nStore(i18next);
@ -75,5 +78,10 @@ export const getLanguages = async () => {
const languages = (await import(`./locales/languages.json`)).default; const languages = (await import(`./locales/languages.json`)).default;
return languages; return languages;
}; };
export const changeLanguage = (lang: string) => {
document.documentElement.setAttribute('lang', lang);
i18next.changeLanguage(lang);
};
export default i18n; export default i18n;
export const isLoading = isLoadingStore; export const isLoading = isLoadingStore;

View File

@ -40,7 +40,7 @@
import 'tippy.js/dist/tippy.css'; import 'tippy.js/dist/tippy.css';
import { WEBUI_BASE_URL, WEBUI_HOSTNAME } from '$lib/constants'; 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 { bestMatchingLanguage } from '$lib/utils';
import { getAllTags, getChatList } from '$lib/apis/chats'; import { getAllTags, getChatList } from '$lib/apis/chats';
import NotificationToast from '$lib/components/NotificationToast.svelte'; import NotificationToast from '$lib/components/NotificationToast.svelte';
@ -472,7 +472,7 @@
const lang = backendConfig.default_locale const lang = backendConfig.default_locale
? backendConfig.default_locale ? backendConfig.default_locale
: bestMatchingLanguage(languages, browserLanguages, 'en-US'); : bestMatchingLanguage(languages, browserLanguages, 'en-US');
$i18n.changeLanguage(lang); changeLanguage(lang);
} }
if (backendConfig) { if (backendConfig) {