Add language switch

src/lib/components/layout/LanguageSelector.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	// Imports
+	import i18n, { getLanguages } from '$lib/i18n';
+	import { locale } from '$lib/stores';
+	import { onMount } from 'svelte';
+	import GlobeAlt from '../icons/GlobeAlt.svelte';
+
+	export let isLightMode = false;
+	export let isInHorizontalNavbar = false;
+	let opened = false;
+
+	const changeLanguage = (code: string) => {
+		$i18n.changeLanguage(code);
+		$locale = code;
+	};
+
+	const toggleDropdown = (e: Event) => {
+		opened = !opened;
+		e.preventDefault();
+		e.stopPropagation();
+	};
+
+	onMount(() => {
+		window.onclick = () => {
+			if (opened) opened = false;
+		};
+	});
+</script>
+
+<div
+	class="group relative flex flex-col text-gray-900 z-20 {isLightMode ? '' : 'dark:text-gray-100'}"
+>
+	{#await getLanguages() then languages}
+		<button class="text-left text-sm pl-2 flex items-center space-x-1" on:click={toggleDropdown}>
+			<GlobeAlt />
+			<span class={isInHorizontalNavbar ? 'max-sm:hidden' : ''}>
+				{(languages.find((lang) => lang.code === $i18n.language) || { title: 'Unknown' }).title}
+			</span>
+		</button>
+		<!-- Improve hitbox size -->
+		<button class="absolute top-full h-2 w-full" on:click={toggleDropdown}></button>
+		<div
+			class="absolute top-full mt-2 h-96 w-32 sm:w-56 overflow-y-auto flex-col items-start space-y-2 text-xs bg-white px-4 py-3 border rounded-lg
+            {isLightMode ? '' : 'dark:bg-gray-800 dark:border-gray-700'} 
+            {opened ? '' : 'hidden group-hover:flex'} "
+		>
+			{#each languages as lang}
+				<button
+					class="hover:bg-gray-100 w-full text-left p-1 rounded
+                    {isLightMode ? '' : 'dark:hover:bg-gray-700'}"
+					on:click={() => {
+						changeLanguage(lang.code);
+					}}
+				>
+					{lang.title}
+				</button>
+			{/each}
+		</div>
+	{/await}
+</div>

src/lib/components/layout/Sidebar.svelte

@@ -58,6 +58,7 @@
 	import ChannelItem from './Sidebar/ChannelItem.svelte';
 	import PencilSquare from '../icons/PencilSquare.svelte';
 	import ContactUs from './Overlay/ContactUs.svelte';
+	import LanguageSelector from './LanguageSelector.svelte';
 
 	const BREAKPOINT = 768;
 
@@ -484,12 +485,12 @@
 				</div>
 
 				<div>
-					<PencilSquare className=" size-5" strokeWidth="2" />
+					<PencilSquare className="size-5" strokeWidth="2" />
 				</div>
 			</a>
 
 			<button
-				class=" cursor-pointer p-[7px] flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+				class=" cursor-pointer p-[7px] pl-0 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-900 transition"
 				on:click={() => {
 					showSidebar.set(!$showSidebar);
 				}}
@@ -513,6 +514,9 @@
 			</button>
 		</div>
 
+		<div class="p-2">
+			<LanguageSelector />
+		</div>
 		<!-- {#if $user?.role === 'admin' || $user?.permissions?.workspace?.models || $user?.permissions?.workspace?.knowledge || $user?.permissions?.workspace?.prompts || $user?.permissions?.workspace?.tools}
 			<div class="px-1.5 flex justify-center text-gray-800 dark:text-gray-200">
 				<a

src/lib/i18n/locales/languages.json

@@ -1,11 +1,7 @@
 [
 	{
-		"code": "en-US",
-		"title": "English (US)"
-	},
-	{
-		"code": "en-GB",
-		"title": "English (GB)"
+		"code": "fr-FR",
+		"title": "French (France)"
 	},
 	{
 		"code": "ar-BH",
@@ -39,6 +35,14 @@
 		"code": "de-DE",
 		"title": "German (Deutsch)"
 	},
+	{
+		"code": "en-US",
+		"title": "English (US)"
+	},
+	{
+		"code": "en-GB",
+		"title": "English (GB)"
+	},
 	{
 		"code": "es-ES",
 		"title": "Spanish (Español)"
@@ -59,10 +63,6 @@
 		"code": "fr-CA",
 		"title": "French (Canada)"
 	},
-	{
-		"code": "fr-FR",
-		"title": "French (France)"
-	},
 	{
 		"code": "el-GR",
 		"title": "Greek (Ἑλλάδα)"
@@ -195,4 +195,4 @@
 		"code": "dg-DG",
 		"title": "Doge (🐶)"
 	}
-]
+]

src/lib/stores/index.ts

@@ -23,6 +23,7 @@ export const activeUserIds: Writable<null | string[]> = writable(null);
 export const USAGE_POOL: Writable<null | string[]> = writable(null);
 
 export const theme = writable('system');
+export const locale = persisted("locale", "fr-FR");
 
 export const shortCodesToEmojis = writable(
 	Object.entries(emojiShortCodes).reduce((acc, [key, value]) => {

src/routes/+layout.svelte

@@ -23,7 +23,8 @@
 		currentChatPage,
 		tags,
 		temporaryChatEnabled,
-		isLastActiveTab
+		isLastActiveTab,
+		locale
 	} from '$lib/stores';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
@@ -91,7 +92,7 @@
 			console.log('user-count', data);
 			activeUserCount.set(data.count);
 		});
-		
+
 		_socket.on('user-list', (data) => {
 			console.log('user-list', data);
 			activeUserIds.set(data.user_ids);
@@ -239,6 +240,9 @@
 			$i18n.changeLanguage(lang);
 		}
 
+		// Load language from user preferences
+		$i18n.changeLanguage($locale);
+
 		if (backendConfig) {
 			// Save Backend Status to Store
 			await config.set(backendConfig);

src/routes/auth/+page.svelte

@@ -9,7 +9,7 @@
 	import { ldapUserSignIn, getSessionUser, userSignIn, userSignUp } from '$lib/apis/auths';
 
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
-	import { WEBUI_NAME, config, user, socket, mobile, queueID } from '$lib/stores';
+	import { WEBUI_NAME, config, user, socket, mobile, queueID, locale } from '$lib/stores';
 
 	import { generateInitialsImage, canvasPixelTest } from '$lib/utils';
 
@@ -33,6 +33,10 @@
 		TimelineOppositeContent
 	} from 'svelte-vertical-timeline';
 	import ContactUs from '$lib/components/layout/Overlay/ContactUs.svelte';
+	import { getLanguages } from '$lib/i18n';
+	import { languages } from '@codemirror/language-data';
+	import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
+	import LanguageSelector from '$lib/components/layout/LanguageSelector.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -234,16 +238,19 @@
 <div
 	class="fixed w-full h-20 px-8 md:px-12 xl:px-24 2xl:px-48 flex items-center justify-between bg-white/90 border-b-[2px] backdrop-blur-md border-gray-100 z-30"
 >
-	<img
-		crossorigin="anonymous"
-		src="/assets/logos/lucie-with-text.svg"
-		class="h-full py-1"
-		alt="OpenLLM France logo"
-	/>
+	<div class="flex h-full items-center relative">
+		<img
+			crossorigin="anonymous"
+			src="/assets/logos/lucie-with-text.svg"
+			class="h-full py-1"
+			alt="OpenLLM France logo"
+		/>
+		<LanguageSelector isLightMode={true} isInHorizontalNavbar={true} />
+	</div>
 	<button
 		class="h-8 px-3 rounded-full border border-black bg-white hover:bg-gray-50 text-sm transition-all
-		md:h-12 md:px-8
-		xl:h-14 xl:px-12 xl:text-base"
+			md:h-12 md:px-8
+			xl:h-14 xl:px-12 xl:text-base"
 		on:click={() => (showContactUs = !showContactUs)}
 	>
 		{$i18n.t('Contact us')}
@@ -253,7 +260,9 @@
 <!-- Page -->
 <div class="h-screen overflow-y-scroll pt-20 text-gray-700">
 	<div class="grid xl:grid-cols-2">
-		<div class="p-8 md:p-12 xl:px-24 2xl:px-48 xl:py-24 flex flex-col justify-center space-y-6 bg-slate-100">
+		<div
+			class="p-8 md:p-12 xl:px-24 2xl:px-48 xl:py-24 flex flex-col justify-center space-y-6 bg-slate-100"
+		>
 			<span class="text-2xl xl:text-3xl 2xl:text-5xl max-xl:text-center">
 				{$i18n.t(
 					'{{WEBUI_NAME}} — The truly open source AI built on transparency, trust, and efficiency.',
@@ -282,7 +291,7 @@
 					</button>
 				{:else if queueStatus.status === 'connected'}
 					<div
-						class="max-xl:self-center h-12 xl:h-16 w-64 flex items-center justify-center gap-3 text-lg sm:text-lg text-center font-semibold dark:text-gray-200"
+						class="max-xl:self-center h-12 xl:h-16 w-64 flex items-center justify-center gap-3 text-lg sm:text-lg text-center font-semibold"
 					>
 						<div>{$i18n.t('Signing in to {{WEBUI_NAME}}', { WEBUI_NAME: $WEBUI_NAME })}</div>
 
@@ -348,7 +357,9 @@
 		</div>
 	</div>
 	<!-- Logos -->
-	<div class="px-8 md:px-12 xl:px-24 2xl:px-48 flex flex-wrap items-center justify-center gap-8 py-8">
+	<div
+		class="px-8 md:px-12 xl:px-24 2xl:px-48 flex flex-wrap items-center justify-center gap-8 py-8"
+	>
 		<img
 			crossorigin="anonymous"
 			src="/assets/logos/linagora-ai.png"
@@ -531,7 +542,9 @@
 		<div class="text-2xl xl:text-3xl mb-8 xl:mb-16">
 			{$i18n.t('{{WEBUI_NAME}} in figures', { WEBUI_NAME: $WEBUI_NAME })}
 		</div>
-		<div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8 xl:gap-16 2xl:gap-24">
+		<div
+			class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8 xl:gap-16 2xl:gap-24"
+		>
 			<div class="flex flex-col space-y-3 xl:space-y-6">
 				<span class="text-xl xl:text-3xl h-14 xl:h-20 flex items-end">
 					{$i18n.t('7 billion parameters')}