feat: Migrate hardcoded strings to i18n calls

src/lib/components/ChangelogModal.svelte

 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 	import { Confetti } from 'svelte-confetti';
 
 	import { WEBUI_NAME, config } from '$lib/stores';
@@ -9,6 +9,8 @@
 
 	import Modal from './common/Modal.svelte';
 
+	const i18n = getContext('i18n');
+
 	export let show = false;
 
 	let changelog = null;
@@ -45,7 +47,7 @@
 			</button>
 		</div>
 		<div class="flex items-center mt-1">
-			<div class="text-sm dark:text-gray-200">Release Notes</div>
+			<div class="text-sm dark:text-gray-200">{$i18n.t('Release Notes')}</div>
 			<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" />
 			<div class="text-sm dark:text-gray-200">
 				v{WEBUI_VERSION}
@@ -108,7 +110,7 @@
 				}}
 				class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
 			>
-				<span class="relative">Okay, Let's Go!</span>
+				<span class="relative">{$i18n.t("Okay, Let's Go!")}</span>
 			</button>
 		</div>
 	</div>

src/lib/components/admin/EditUserModal.svelte

@@ -2,11 +2,12 @@
 	import { toast } from 'svelte-sonner';
 	import dayjs from 'dayjs';
 	import { createEventDispatcher } from 'svelte';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 
 	import { updateUserById } from '$lib/apis/users';
 	import Modal from '../common/Modal.svelte';
 
+	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
 
 	export let show = false;
@@ -42,7 +43,7 @@
 <Modal size="sm" bind:show>
 	<div>
 		<div class=" flex justify-between dark:text-gray-300 px-5 py-4">
-			<div class=" text-lg font-medium self-center">Edit User</div>
+			<div class=" text-lg font-medium self-center">{$i18n.t('Edit User')}</div>
 			<button
 				class="self-center"
 				on:click={() => {
@@ -93,7 +94,7 @@
 
 					<div class=" flex flex-col space-y-1.5">
 						<div class="flex flex-col w-full">
-							<div class=" mb-1 text-xs text-gray-500">Email</div>
+							<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Email')}</div>
 
 							<div class="flex-1">
 								<input
@@ -108,7 +109,7 @@
 						</div>
 
 						<div class="flex flex-col w-full">
-							<div class=" mb-1 text-xs text-gray-500">Name</div>
+							<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Name')}</div>
 
 							<div class="flex-1">
 								<input
@@ -122,7 +123,7 @@
 						</div>
 
 						<div class="flex flex-col w-full">
-							<div class=" mb-1 text-xs text-gray-500">New Password</div>
+							<div class=" mb-1 text-xs text-gray-500">{$i18n.t('New Password')}</div>
 
 							<div class="flex-1">
 								<input

src/lib/components/admin/Settings/Database.svelte

 <script lang="ts">
 	import { downloadDatabase } from '$lib/apis/utils';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
 
 	export let saveHandler: Function;
 
@@ -17,10 +19,10 @@
 >
 	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
 		<div>
-			<div class=" mb-2 text-sm font-medium">Database</div>
+			<div class=" mb-2 text-sm font-medium">{$i18n.t('Database')}</div>
 
 			<div class="  flex w-full justify-between">
-				<!-- <div class=" self-center text-xs font-medium">Allow Chat Deletion</div> -->
+				<!-- <div class=" self-center text-xs font-medium">{$i18n.t('Allow Chat Deletion')}</div> -->
 
 				<button
 					class=" flex rounded-md py-1.5 px-3 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
@@ -46,7 +48,7 @@
 							/>
 						</svg>
 					</div>
-					<div class=" self-center text-sm font-medium">Download Database</div>
+					<div class=" self-center text-sm font-medium">{$i18n.t('Download Database')}</div>
 				</button>
 			</div>
 		</div>

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

@@ -7,7 +7,9 @@
 		updateDefaultUserRole,
 		updateJWTExpiresDuration
 	} from '$lib/apis/auths';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
 
 	export let saveHandler: Function;
 	let signUpEnabled = true;
@@ -43,10 +45,10 @@
 >
 	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
 		<div>
-			<div class=" mb-2 text-sm font-medium">General Settings</div>
+			<div class=" mb-2 text-sm font-medium">{$i18n.t('General Settings')}</div>
 
 			<div class="  flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Enable New Sign Ups</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('Enable New Sign Ups')}</div>
 
 				<button
 					class="p-1 px-3 text-xs flex rounded transition"
@@ -66,7 +68,7 @@
 								d="M11.5 1A3.5 3.5 0 0 0 8 4.5V7H2.5A1.5 1.5 0 0 0 1 8.5v5A1.5 1.5 0 0 0 2.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 9.5 7V4.5a2 2 0 1 1 4 0v1.75a.75.75 0 0 0 1.5 0V4.5A3.5 3.5 0 0 0 11.5 1Z"
 							/>
 						</svg>
-						<span class="ml-2 self-center">Enabled</span>
+						<span class="ml-2 self-center">{$i18n.t('Enabled')}</span>
 					{:else}
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -81,13 +83,13 @@
 							/>
 						</svg>
 
-						<span class="ml-2 self-center">Disabled</span>
+						<span class="ml-2 self-center">{$i18n.t('Disabled')}</span>
 					{/if}
 				</button>
 			</div>
 
 			<div class=" flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Default User Role</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('Default User Role')}</div>
 				<div class="flex items-center relative">
 					<select
 						class="w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
@@ -97,9 +99,9 @@
 							updateDefaultUserRoleHandler(e.target.value);
 						}}
 					>
-						<option value="pending">Pending</option>
-						<option value="user">User</option>
-						<option value="admin">Admin</option>
+						<option value="pending">{$i18n.t('Pending')}</option>
+						<option value="user">{$i18n.t('User')}</option>
+						<option value="admin">{$i18n.t('Admin')}</option>
 					</select>
 				</div>
 			</div>
@@ -108,7 +110,7 @@
 
 			<div class=" w-full justify-between">
 				<div class="flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">JWT Expiration</div>
+					<div class=" self-center text-xs font-medium">{$i18n.t('JWT Expiration')}</div>
 				</div>
 
 				<div class="flex mt-2 space-x-2">

src/lib/components/admin/Settings/Users.svelte

 <script lang="ts">
 	import { getSignUpEnabledStatus, toggleSignUpEnabledStatus } from '$lib/apis/auths';
 	import { getUserPermissions, updateUserPermissions } from '$lib/apis/users';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
 
 	export let saveHandler: Function;
 
@@ -26,10 +28,10 @@
 >
 	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
 		<div>
-			<div class=" mb-2 text-sm font-medium">User Permissions</div>
+			<div class=" mb-2 text-sm font-medium">{$i18n.t('User Permissions')}</div>
 
 			<div class="  flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Allow Chat Deletion</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('Allow Chat Deletion')}</div>
 
 				<button
 					class="p-1 px-3 text-xs flex rounded transition"
@@ -49,7 +51,7 @@
 								d="M11.5 1A3.5 3.5 0 0 0 8 4.5V7H2.5A1.5 1.5 0 0 0 1 8.5v5A1.5 1.5 0 0 0 2.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 9.5 7V4.5a2 2 0 1 1 4 0v1.75a.75.75 0 0 0 1.5 0V4.5A3.5 3.5 0 0 0 11.5 1Z"
 							/>
 						</svg>
-						<span class="ml-2 self-center">Allow</span>
+						<span class="ml-2 self-center">{$i18n.t('Allow')}</span>
 					{:else}
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -64,7 +66,7 @@
 							/>
 						</svg>
 
-						<span class="ml-2 self-center">Don't Allow</span>
+						<span class="ml-2 self-center">{$i18n.t("Don't Allow")}</span>
 					{/if}
 				</button>
 			</div>

src/lib/components/admin/SettingsModal.svelte

 <script>
+	import { getContext } from 'svelte';
 	import Modal from '../common/Modal.svelte';
 	import Database from './Settings/Database.svelte';
 
 	import General from './Settings/General.svelte';
 	import Users from './Settings/Users.svelte';
 
+	const i18n = getContext('i18n');
+
 	export let show = false;
 
 	let selectedTab = 'general';
@@ -13,7 +16,7 @@
 <Modal bind:show>
 	<div>
 		<div class=" flex justify-between dark:text-gray-300 px-5 py-4">
-			<div class=" text-lg font-medium self-center">Admin Settings</div>
+			<div class=" text-lg font-medium self-center">{$i18n.t('Admin Settings')}</div>
 			<button
 				class="self-center"
 				on:click={() => {
@@ -61,7 +64,7 @@
 							/>
 						</svg>
 					</div>
-					<div class=" self-center">General</div>
+					<div class=" self-center">{$i18n.t('General')}</div>
 				</button>
 
 				<button
@@ -85,7 +88,7 @@
 							/>
 						</svg>
 					</div>
-					<div class=" self-center">Users</div>
+					<div class=" self-center">{$i18n.t('Users')}</div>
 				</button>
 
 				<button
@@ -113,7 +116,7 @@
 							/>
 						</svg>
 					</div>
-					<div class=" self-center">Database</div>
+					<div class=" self-center">{$i18n.t('Database')}</div>
 				</button>
 			</div>
 			<div class="flex-1 md:min-h-[380px]">

src/lib/components/chat/MessageInput.svelte

@@ -220,7 +220,7 @@
 						isRecording = false;
 					};
 				} else {
-					toast.error('SpeechRecognition API is not supported in this browser.');
+					toast.error($i18n.t('SpeechRecognition API is not supported in this browser.'));
 				}
 			}
 		}
@@ -341,12 +341,15 @@
 						uploadDoc(file);
 					} else {
 						toast.error(
-							`Unknown File Type '${file['type']}', but accepting and treating as plain text`
+							$i18n.t(
+								`Unknown File Type '{{file_type}}', but accepting and treating as plain text`,
+								{ file_type: file['type'] }
+							)
 						);
 						uploadDoc(file);
 					}
 				} else {
-					toast.error(`File not found.`);
+					toast.error($i18n.t(`File not found.`));
 				}
 			}
 
@@ -485,13 +488,16 @@
 								filesInputElement.value = '';
 							} else {
 								toast.error(
-									`Unknown File Type '${file['type']}', but accepting and treating as plain text`
+									$i18n.t(
+										`Unknown File Type '{{file_type}}', but accepting and treating as plain text`,
+										{ file_type: file['type'] }
+									)
 								);
 								uploadDoc(file);
 								filesInputElement.value = '';
 							}
 						} else {
-							toast.error(`File not found.`);
+							toast.error($i18n.t(`File not found.`));
 						}
 					}}
 				/>
@@ -578,7 +584,7 @@
 													{file.name}
 												</div>
 
-												<div class=" text-gray-500 text-sm">Document</div>
+												<div class=" text-gray-500 text-sm">{$i18n.t('Document')}</div>
 											</div>
 										</div>
 									{:else if file.type === 'collection'}
@@ -606,7 +612,7 @@
 													{file?.title ?? `#${file.name}`}
 												</div>
 
-												<div class=" text-gray-500 text-sm">Collection</div>
+												<div class=" text-gray-500 text-sm">{$i18n.t('Collection')}</div>
 											</div>
 										</div>
 									{/if}
@@ -640,7 +646,7 @@
 					<div class=" flex">
 						{#if fileUploadEnabled}
 							<div class=" self-end mb-2 ml-1">
-								<Tooltip content="Upload files">
+								<Tooltip content={$i18n.t('Upload files')}>
 									<button
 										class="bg-gray-50 hover:bg-gray-100 text-gray-800 dark:bg-gray-850 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5"
 										type="button"
@@ -811,7 +817,7 @@
 
 						<div class="self-end mb-2 flex space-x-1 mr-1">
 							{#if messages.length == 0 || messages.at(-1).done == true}
-								<Tooltip content="Record voice">
+								<Tooltip content={$i18n.t('Record voice')}>
 									{#if speechRecognitionEnabled}
 										<button
 											id="voice-input-button"
@@ -880,7 +886,7 @@
 									{/if}
 								</Tooltip>
 
-								<Tooltip content="Send message">
+								<Tooltip content={$i18n.t('Send message')}>
 									<button
 										class="{prompt !== ''
 											? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
@@ -926,7 +932,7 @@
 				</form>
 
 				<div class="mt-1.5 text-xs text-gray-500 text-center">
-					LLMs can make mistakes. Verify important information.
+					{$i18n.t('LLMs can make mistakes. Verify important information.')}
 				</div>
 			</div>
 		</div>

src/lib/components/chat/MessageInput/Documents.svelte

@@ -3,9 +3,11 @@
 
 	import { documents } from '$lib/stores';
 	import { removeFirstHashWord, isValidHttpUrl } from '$lib/utils';
-	import { tick } from 'svelte';
+	import { tick, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
+	const i18n = getContext('i18n');
+
 	export let prompt = '';
 
 	const dispatch = createEventDispatcher();
@@ -117,7 +119,7 @@
 									{doc?.title ?? `#${doc.name}`}
 								</div>
 
-								<div class=" text-xs text-gray-600 line-clamp-1">Collection</div>
+								<div class=" text-xs text-gray-600 line-clamp-1">{$i18n.t('Collection')}</div>
 							{:else}
 								<div class=" font-medium text-black line-clamp-1">
 									#{doc.name} ({doc.filename})
@@ -140,7 +142,9 @@
 									confirmSelectWeb(url);
 								} else {
 									toast.error(
-										'Oops! Looks like the URL is invalid. Please double-check and try again.'
+										$i18n.t(
+											'Oops! Looks like the URL is invalid. Please double-check and try again.'
+										)
 									);
 								}
 							}}
@@ -149,7 +153,7 @@
 								{prompt.split(' ')?.at(0)?.substring(1)}
 							</div>
 
-							<div class=" text-xs text-gray-600 line-clamp-1">Web</div>
+							<div class=" text-xs text-gray-600 line-clamp-1">{$i18n.t('Web')}</div>
 						</button>
 					{/if}
 				</div>

src/lib/components/chat/MessageInput/Models.svelte

@@ -43,7 +43,7 @@
 		user = JSON.parse(JSON.stringify(model.name));
 		await tick();
 
-		chatInputPlaceholder = `'${model.name}' is thinking...`;
+		chatInputPlaceholder = $i18n.t('{{modelName}} is thinking...', { modelName: model.name });
 
 		const chatInputElement = document.getElementById('chat-textarea');
 
@@ -111,7 +111,7 @@
 					toast.error(error.error);
 				}
 			} else {
-				toast.error(`Uh-oh! There was an issue connecting to Ollama.`);
+				toast.error($i18n.t('Uh-oh! There was an issue connecting to llama.'));
 			}
 		}
 

src/lib/components/chat/MessageInput/PromptCommands.svelte

 <script lang="ts">
 	import { prompts } from '$lib/stores';
 	import { findWordIndices } from '$lib/utils';
-	import { tick } from 'svelte';
+	import { tick, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
+	const i18n = getContext('i18n');
+
 	export let prompt = '';
 	let selectedCommandIdx = 0;
 	let filteredPromptCommands = [];
@@ -29,7 +31,7 @@
 
 		if (command.content.includes('{{CLIPBOARD}}')) {
 			const clipboardText = await navigator.clipboard.readText().catch((err) => {
-				toast.error('Failed to read clipboard contents');
+				toast.error($i18n.t('Failed to read clipboard contents'));
 				return '{{CLIPBOARD}}';
 			});
 
@@ -113,8 +115,9 @@
 					</div>
 
 					<div class="line-clamp-1">
-						Tip: Update multiple variable slots consecutively by pressing the tab key in the chat
-						input after each replacement.
+						{$i18n.t(
+							'Tip: Update multiple variable slots consecutively by pressing the tab key in the chat input after each replacement.'
+						)}
 					</div>
 				</div>
 			</div>

src/lib/components/chat/Messages.svelte

@@ -2,7 +2,7 @@
 	import { v4 as uuidv4 } from 'uuid';
 
 	import { chats, config, modelfiles, settings, user } from '$lib/stores';
-	import { tick } from 'svelte';
+	import { tick, getContext } from 'svelte';
 
 	import { toast } from 'svelte-sonner';
 	import { getChatList, updateChatById } from '$lib/apis/chats';
@@ -13,6 +13,8 @@
 	import Spinner from '../common/Spinner.svelte';
 	import { imageGenerations } from '$lib/apis/images';
 
+	const i18n = getContext('i18n');
+
 	export let chatId = '';
 	export let sendPrompt: Function;
 	export let continueGeneration: Function;
@@ -67,7 +69,7 @@
 		navigator.clipboard.writeText(text).then(
 			function () {
 				console.log('Async: Copying to clipboard was successful!');
-				toast.success('Copying to clipboard was successful!');
+				toast.success($i18n.t('Copying to clipboard was successful!'));
 			},
 			function (err) {
 				console.error('Async: Could not copy text: ', err);

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -7,7 +7,9 @@
 	import 'katex/dist/katex.min.css';
 
 	import { createEventDispatcher } from 'svelte';
-	import { onMount, tick } from 'svelte';
+	import { onMount, tick, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
 
 	const dispatch = createEventDispatcher();
 
@@ -355,7 +357,7 @@
 											editMessageConfirmHandler();
 										}}
 									>
-										Save
+										{$i18n.t('Save')}
 									</button>
 
 									<button
@@ -364,7 +366,7 @@
 											cancelEditMessage();
 										}}
 									>
-										Cancel
+										{$i18n.t('Cancel')}
 									</button>
 								</div>
 							</div>

src/lib/components/chat/Messages/UserMessage.svelte

 <script lang="ts">
 	import dayjs from 'dayjs';
 
-	import { tick, createEventDispatcher } from 'svelte';
+	import { tick, createEventDispatcher, getContext } from 'svelte';
 	import Name from './Name.svelte';
 	import ProfileImage from './ProfileImage.svelte';
 	import { modelfiles, settings } from '$lib/stores';
 
+	const i18n = getContext('i18n');
+
 	const dispatch = createEventDispatcher();
 
 	export let user;
@@ -123,7 +125,7 @@
 											{file.name}
 										</div>
 
-										<div class=" text-gray-500 text-sm">Document</div>
+										<div class=" text-gray-500 text-sm">{$i18n.t('Document')}</div>
 									</div>
 								</button>
 							{:else if file.type === 'collection'}
@@ -152,7 +154,7 @@
 											{file?.title ?? `#${file.name}`}
 										</div>
 
-										<div class=" text-gray-500 text-sm">Collection</div>
+										<div class=" text-gray-500 text-sm">{$i18n.t('Collection')}</div>
 									</div>
 								</button>
 							{/if}
@@ -179,7 +181,7 @@
 								editMessageConfirmHandler();
 							}}
 						>
-							Save & Submit
+							{$i18n.t('Save & Submit')}
 						</button>
 
 						<button
@@ -188,7 +190,7 @@
 								cancelEditMessage();
 							}}
 						>
-							Cancel
+							{$i18n.t('Cancel')}
 						</button>
 					</div>
 				</div>

src/lib/components/chat/ModelSelector.svelte

@@ -12,7 +12,7 @@
 	const saveDefaultModel = async () => {
 		const hasEmptyModel = selectedModels.filter((it) => it === '');
 		if (hasEmptyModel.length) {
-			toast.error('Choose a model before saving...');
+			toast.error($i18n.t('Choose a model before saving...'));
 			return;
 		}
 		settings.set({ ...$settings, models: selectedModels });
@@ -22,7 +22,7 @@
 			console.log('setting default models globally');
 			await setDefaultModels(localStorage.token, selectedModels.join(','));
 		}
-		toast.success('Default model updated');
+		toast.success($i18n.t('Default model updated'));
 	};
 
 	$: if (selectedModels.length > 0 && $models.length > 0) {

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

@@ -4,7 +4,9 @@
 	import { WEBUI_VERSION } from '$lib/constants';
 	import { WEBUI_NAME, config, showChangelog } from '$lib/stores';
 	import { compareVersion } from '$lib/utils';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
 
 	let ollamaVersion = '';
 
@@ -88,7 +90,7 @@
 			<hr class=" dark:border-gray-700" />
 
 			<div>
-				<div class=" mb-2.5 text-sm font-medium">Ollama Version</div>
+				<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Ollama Version')}</div>
 				<div class="flex w-full">
 					<div class="flex-1 text-xs text-gray-700 dark:text-gray-200">
 						{ollamaVersion ?? 'N/A'}

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

 <script lang="ts">
 	import { toast } from 'svelte-sonner';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 
 	import { user } from '$lib/stores';
 	import { updateUserProfile } from '$lib/apis/auths';
@@ -9,6 +9,8 @@
 	import { getGravatarUrl } from '$lib/apis/utils';
 	import { copyToClipboard } from '$lib/utils';
 
+	const i18n = getContext('i18n');
+
 	export let saveHandler: Function;
 
 	let profileImageUrl = '';
@@ -99,7 +101,7 @@
 			}}
 		/>
 
-		<div class=" mb-2.5 text-sm font-medium">Profile</div>
+		<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Profile')}</div>
 
 		<div class="flex space-x-5">
 			<div class="flex flex-col">
@@ -147,7 +149,7 @@
 
 			<div class="flex-1">
 				<div class="flex flex-col w-full">
-					<div class=" mb-1 text-xs text-gray-500">Name</div>
+					<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Name')}</div>
 
 					<div class="flex-1">
 						<input
@@ -168,7 +170,7 @@
 
 		<div class=" w-full justify-between">
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">JWT Token</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('JWT Token')}</div>
 			</div>
 
 			<div class="flex mt-2">

src/lib/components/chat/Settings/Account/UpdatePassword.svelte

 <script lang="ts">
+	import { getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 	import { updateUserPassword } from '$lib/apis/auths';
 
+	const i18n = getContext('i18n');
+
 	let show = false;
 	let currentPassword = '';
 	let newPassword = '';
@@ -17,7 +20,7 @@
 			);
 
 			if (res) {
-				toast.success('Successfully updated.');
+				toast.success($i18n.t('Successfully updated.'));
 			}
 
 			currentPassword = '';
@@ -40,7 +43,7 @@
 	}}
 >
 	<div class="flex justify-between items-center text-sm">
-		<div class="  font-medium">Change Password</div>
+		<div class="  font-medium">{$i18n.t('Change Password')}</div>
 		<button
 			class=" text-xs font-medium text-gray-500"
 			type="button"
@@ -53,7 +56,7 @@
 	{#if show}
 		<div class=" py-2.5 space-y-1.5">
 			<div class="flex flex-col w-full">
-				<div class=" mb-1 text-xs text-gray-500">Current Password</div>
+				<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Current Password')}</div>
 
 				<div class="flex-1">
 					<input
@@ -67,7 +70,7 @@
 			</div>
 
 			<div class="flex flex-col w-full">
-				<div class=" mb-1 text-xs text-gray-500">New Password</div>
+				<div class=" mb-1 text-xs text-gray-500">{$i18n.t('New Password')}</div>
 
 				<div class="flex-1">
 					<input
@@ -81,7 +84,7 @@
 			</div>
 
 			<div class="flex flex-col w-full">
-				<div class=" mb-1 text-xs text-gray-500">Confirm Password</div>
+				<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Confirm Password')}</div>
 
 				<div class="flex-1">
 					<input

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

 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { createEventDispatcher, onMount, getContext } from 'svelte';
+	import AdvancedParams from './Advanced/AdvancedParams.svelte';
+
+	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
 
-	import AdvancedParams from './Advanced/AdvancedParams.svelte';
 	export let saveSettings: Function;
 
 	// Advanced
@@ -55,14 +57,14 @@
 
 <div class="flex flex-col h-full justify-between text-sm">
 	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
-		<div class=" text-sm font-medium">Parameters</div>
+		<div class=" text-sm font-medium">{$i18n.t('Parameters')}</div>
 
 		<AdvancedParams bind:options />
 		<hr class=" dark:border-gray-700" />
 
 		<div class=" py-1 w-full justify-between">
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Keep Alive</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('Keep Alive')}</div>
 
 				<button
 					class="p-1 px-3 text-xs flex rounded transition"
@@ -72,9 +74,9 @@
 					}}
 				>
 					{#if keepAlive === null}
-						<span class="ml-2 self-center"> Default </span>
+						<span class="ml-2 self-center">{$i18n.t(' Default ')}</span>
 					{:else}
-						<span class="ml-2 self-center"> Custom </span>
+						<span class="ml-2 self-center">{$i18n.t(' Custom ')}</span>
 					{/if}
 				</button>
 			</div>
@@ -93,7 +95,7 @@
 
 		<div>
 			<div class=" py-1 flex w-full justify-between">
-				<div class=" self-center text-sm font-medium">Request Mode</div>
+				<div class=" self-center text-sm font-medium">{$i18n.t('Request Mode')}</div>
 
 				<button
 					class="p-1 px-3 text-xs flex rounded transition"
@@ -102,7 +104,7 @@
 					}}
 				>
 					{#if requestFormat === ''}
-						<span class="ml-2 self-center"> Default </span>
+						<span class="ml-2 self-center">{$i18n.t(' Default ')}</span>
 					{:else if requestFormat === 'json'}
 						<!-- <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -114,7 +116,7 @@
                                 d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"
                             />
                         </svg> -->
-						<span class="ml-2 self-center"> JSON </span>
+						<span class="ml-2 self-center">{$i18n.t(' JSON ')}</span>
 					{/if}
 				</button>
 			</div>

src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte

 <script lang="ts">
+	import { getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
+
 	export let options = {
 		// Advanced
 		seed: 0,
@@ -20,7 +24,7 @@
 <div class=" space-y-3 text-xs">
 	<div>
 		<div class=" py-0.5 flex w-full justify-between">
-			<div class=" w-20 text-xs font-medium self-center">Seed</div>
+			<div class=" w-20 text-xs font-medium self-center">{$i18n.t('Seed')}</div>
 			<div class=" flex-1 self-center">
 				<input
 					class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
@@ -36,7 +40,7 @@
 
 	<div>
 		<div class=" py-0.5 flex w-full justify-between">
-			<div class=" w-20 text-xs font-medium self-center">Stop Sequence</div>
+			<div class=" w-20 text-xs font-medium self-center">{$i18n.t('Stop Sequence')}</div>
 			<div class=" flex-1 self-center">
 				<input
 					class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
@@ -51,7 +55,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Temperature</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Temperature')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -61,9 +65,9 @@
 				}}
 			>
 				{#if options.temperature === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center"> {$i18n.t('Default')} </span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
 				{/if}
 			</button>
 		</div>
@@ -97,7 +101,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Mirostat</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Mirostat')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -107,9 +111,9 @@
 				}}
 			>
 				{#if options.mirostat === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t(' Default ')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t(' Custom ')}</span>
 				{/if}
 			</button>
 		</div>
@@ -143,7 +147,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Mirostat Eta</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Mirostat Eta')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -153,9 +157,9 @@
 				}}
 			>
 				{#if options.mirostat_eta === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t(' Default ')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t(' Custom ')}</span>
 				{/if}
 			</button>
 		</div>
@@ -189,7 +193,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Mirostat Tau</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Mirostat Tau')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -199,9 +203,9 @@
 				}}
 			>
 				{#if options.mirostat_tau === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t(' Default ')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t(' Custom ')}</span>
 				{/if}
 			</button>
 		</div>
@@ -235,7 +239,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Top K</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Top K')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -245,9 +249,9 @@
 				}}
 			>
 				{#if options.top_k === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t(' Default ')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t(' Custom ')}</span>
 				{/if}
 			</button>
 		</div>
@@ -281,7 +285,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Top P</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Top P')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -291,9 +295,9 @@
 				}}
 			>
 				{#if options.top_p === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t(' Default ')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t(' Custom ')}</span>
 				{/if}
 			</button>
 		</div>
@@ -327,7 +331,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Repeat Penalty</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Repeat Penalty')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -337,9 +341,9 @@
 				}}
 			>
 				{#if options.repeat_penalty === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t(' Default ')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t(' Custom ')}</span>
 				{/if}
 			</button>
 		</div>
@@ -373,7 +377,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Repeat Last N</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Repeat Last N')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -383,9 +387,9 @@
 				}}
 			>
 				{#if options.repeat_last_n === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t(' Default ')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t(' Custom ')}</span>
 				{/if}
 			</button>
 		</div>
@@ -419,7 +423,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Tfs Z</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Tfs Z')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -429,9 +433,9 @@
 				}}
 			>
 				{#if options.tfs_z === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t(' Default ')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t(' Custom ')}</span>
 				{/if}
 			</button>
 		</div>
@@ -465,7 +469,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Context Length</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Context Length')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -475,9 +479,9 @@
 				}}
 			>
 				{#if options.num_ctx === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t(' Default ')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t(' Custom ')}</span>
 				{/if}
 			</button>
 		</div>
@@ -510,7 +514,7 @@
 	</div>
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Max Tokens</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Max Tokens')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -520,9 +524,9 @@
 				}}
 			>
 				{#if options.num_predict === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t(' Default ')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t(' Custom ')}</span>
 				{/if}
 			</button>
 		</div>

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

 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { createEventDispatcher, onMount, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 	const dispatch = createEventDispatcher();
 
+	const i18n = getContext('i18n');
+
 	export let saveSettings: Function;
 
 	// Audio
@@ -101,10 +103,10 @@
 >
 	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
 		<div>
-			<div class=" mb-1 text-sm font-medium">STT Settings</div>
+			<div class=" mb-1 text-sm font-medium">{$i18n.t('STT Settings')}</div>
 
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Speech-to-Text Engine</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('Speech-to-Text Engine')}</div>
 				<div class="flex items-center relative">
 					<select
 						class="w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
@@ -119,14 +121,14 @@
 							}
 						}}
 					>
-						<option value="">Default (Web API)</option>
-						<option value="whisper-local">Whisper (Local)</option>
+						<option value="">{$i18n.t('Default (Web API)')}</option>
+						<option value="whisper-local">{$i18n.t('Whisper (Local)')}</option>
 					</select>
 				</div>
 			</div>
 
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Conversation Mode</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('Conversation Mode')}</div>
 
 				<button
 					class="p-1 px-3 text-xs flex rounded transition"
@@ -136,15 +138,17 @@
 					type="button"
 				>
 					{#if conversationMode === true}
-						<span class="ml-2 self-center">On</span>
+						<span class="ml-2 self-center">{$i18n.t('On')}</span>
 					{:else}
-						<span class="ml-2 self-center">Off</span>
+						<span class="ml-2 self-center">{$i18n.t('Off')}</span>
 					{/if}
 				</button>
 			</div>
 
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Auto-send input after 3 sec.</div>
+				<div class=" self-center text-xs font-medium">
+					{$i18n.t('Auto-send input after 3 sec.')}
+				</div>
 
 				<button
 					class="p-1 px-3 text-xs flex rounded transition"
@@ -154,19 +158,19 @@
 					type="button"
 				>
 					{#if speechAutoSend === true}
-						<span class="ml-2 self-center">On</span>
+						<span class="ml-2 self-center">{$i18n.t('On')}</span>
 					{:else}
-						<span class="ml-2 self-center">Off</span>
+						<span class="ml-2 self-center">{$i18n.t('Off')}</span>
 					{/if}
 				</button>
 			</div>
 		</div>
 
 		<div>
-			<div class=" mb-1 text-sm font-medium">TTS Settings</div>
+			<div class=" mb-1 text-sm font-medium">{$i18n.t('TTS Settings')}</div>
 
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Text-to-Speech Engine</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('Text-to-Speech Engine')}</div>
 				<div class="flex items-center relative">
 					<select
 						class="w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
@@ -182,14 +186,14 @@
 							}
 						}}
 					>
-						<option value="">Default (Web API)</option>
-						<option value="openai">Open AI</option>
+						<option value="">{$i18n.t('Default (Web API)')}</option>
+						<option value="openai">{$i18n.t('Open AI')}</option>
 					</select>
 				</div>
 			</div>
 
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Auto-playback response</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('Auto-playback response')}</div>
 
 				<button
 					class="p-1 px-3 text-xs flex rounded transition"
@@ -199,9 +203,9 @@
 					type="button"
 				>
 					{#if responseAutoPlayback === true}
-						<span class="ml-2 self-center">On</span>
+						<span class="ml-2 self-center">{$i18n.t('On')}</span>
 					{:else}
-						<span class="ml-2 self-center">Off</span>
+						<span class="ml-2 self-center">{$i18n.t('Off')}</span>
 					{/if}
 				</button>
 			</div>
@@ -211,7 +215,7 @@
 
 		{#if TTSEngine === ''}
 			<div>
-				<div class=" mb-2.5 text-sm font-medium">Set Voice</div>
+				<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Voice')}</div>
 				<div class="flex w-full">
 					<div class="flex-1">
 						<select
@@ -230,7 +234,7 @@
 			</div>
 		{:else if TTSEngine === 'openai'}
 			<div>
-				<div class=" mb-2.5 text-sm font-medium">Set Voice</div>
+				<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Voice')}</div>
 				<div class="flex w-full">
 					<div class="flex-1">
 						<select