src/lib/components/chat/Settings/General.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
 	import { createEventDispatcher, onMount, getContext } from 'svelte';
+	import { languages } from '$lib/i18n';
 	const dispatch = createEventDispatcher();
 
 	import { models, user } from '$lib/stores';
@@ -16,7 +17,6 @@
 	let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light'];
 	let theme = 'dark';
 	// TODO: Get these dynamically from the i18n module
-	let languages = ['en', 'fa', 'fr', 'de', 'ua'];
 	let lang = $i18n.language;
 	let notificationEnabled = false;
 	let system = '';
@@ -134,12 +134,11 @@
 						bind:value={lang}
 						placeholder="Select a language"
 						on:change={(e) => {
-							console.log($i18n);
 							$i18n.changeLanguage(lang);
 						}}
 					>
-						{#each languages as value}
-							<option {value}>{value}</option>
+						{#each languages as language}
+							<option value={language['code']}>{language['title']}</option>
 						{/each}
 					</select>
 				</div>

src/lib/i18n/index.ts

@@ -50,13 +50,16 @@ i18next
 			lookupQuerystring: 'lang',
 			lookupLocalStorage: 'locale'
 		},
-		fallbackLng: 'en',
-		ns: 'common',
+		fallbackLng: {
+			default: ['en-US']
+		},
+		ns: 'translation',
 		interpolation: {
 			escapeValue: false // not needed for svelte as it escapes by default
 		}
 	});
 
+export const languages = (await import(`./locales/languages.json`)).default;
 const i18n = createI18nStore(i18next);
 const isLoadingStore = createIsLoadingStore(i18next);
 export default i18n;

src/lib/i18n/locales/languages.json

@@ -0,0 +1,22 @@
+[
+	{
+		"title": "English",
+		"code": "en-US"
+	},
+	{
+		"title": "فارسی",
+		"code": "fa"
+	},
+	{
+		"title": "Deutsch",
+		"code": "de"
+	},
+	{
+		"title": "French",
+		"code": "fr"
+	},
+	{
+		"title": "Ukrainian",
+		"code": "uk"
+	}
+]