Add default voice setting and apply to chat

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import dayjs from 'dayjs';
 	import { marked } from 'marked';
+	import { settings, voices } from '$lib/stores';
 	import tippy from 'tippy.js';
 	import auto_render from 'katex/dist/contrib/auto-render.mjs';
 	import 'katex/dist/katex.min.css';
@@ -116,6 +117,8 @@
 		} else {
 			speaking = true;
 			const speak = new SpeechSynthesisUtterance(message.content);
+			const voice = $voices?.filter((v) => v.name === $settings?.speakVoice)?.at(0) ?? undefined;
+			speak.voice = voice;
 			speechSynthesis.speak(speak);
 		}
 	};

src/lib/components/chat/SettingsModal.svelte

@@ -20,7 +20,7 @@
 	import { createNewChat, deleteAllChats, getAllChats, getChatList } from '$lib/apis/chats';
 	import { WEB_UI_VERSION, WEBUI_API_BASE_URL } from '$lib/constants';
 
-	import { config, models, settings, user, chats } from '$lib/stores';
+	import { config, models, voices, settings, user, chats } from '$lib/stores';
 	import { splitStream, getGravatarURL, getImportOrigin, convertOpenAIChats } from '$lib/utils';
 
 	import Advanced from './Settings/Advanced.svelte';
@@ -112,6 +112,9 @@
 	let gravatarEmail = '';
 	let titleAutoGenerateModel = '';
 
+	// Voice
+	let speakVoice = '';
+
 	// Chats
 	let saveChatHistory = true;
 	let importFiles;
@@ -614,6 +617,9 @@
 		titleAutoGenerateModel = settings.titleAutoGenerateModel ?? '';
 		gravatarEmail = settings.gravatarEmail ?? '';
 
+		speakVoice = settings.speakVoice ?? '';
+		await voices.set(await speechSynthesis.getVoices());
+
 		saveChatHistory = settings.saveChatHistory ?? true;
 
 		authEnabled = settings.authHeader !== undefined ? true : false;
@@ -808,6 +814,30 @@
 					<div class=" self-center">Add-ons</div>
 				</button>
 
+				<button
+					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+					'voice'
+						? 'bg-gray-200 dark:bg-gray-700'
+						: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
+					on:click={() => {
+						selectedTab = 'voice';
+					}}
+				>
+					<div class=" self-center mr-2">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								d="M12.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"
+							/>
+						</svg>
+					</div>
+					<div class=" self-center">Voice</div>
+				</button>
+
 				<button
 					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
 					'chats'
@@ -901,7 +931,7 @@
 										toggleTheme();
 									}}
 								>
-									
+
 								</button> -->
 
 								<div class="flex items-center relative">
@@ -1755,6 +1785,49 @@
 							</button>
 						</div>
 					</form>
+				{:else if selectedTab === 'voice'}
+					<form
+						class="flex flex-col h-full justify-between space-y-3 text-sm"
+						on:submit|preventDefault={() => {
+							show = false;
+						}}
+					>
+						<div class=" space-y-3">
+							<div>
+								<div class=" mb-2.5 text-sm font-medium">Set Default Voice</div>
+								<div class="flex w-full">
+									<div class="flex-1 mr-2">
+										<select
+											class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
+											bind:value={speakVoice}
+											placeholder="Select a voice"
+										>
+											<option value="" selected>Default</option>
+											{#each $voices.filter((v) => v.localService === true) as voice}
+												<option value={voice.name} class="bg-gray-100 dark:bg-gray-700"
+													>{voice.name}</option
+												>
+											{/each}
+										</select>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div class="flex justify-end pt-3 text-sm font-medium">
+							<button
+								class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
+								on:click={() => {
+									saveSettings({
+										speakVoice: speakVoice !== '' ? speakVoice : undefined
+									});
+								}}
+								type="submit"
+							>
+								Save
+							</button>
+						</div>
+					</form>
 				{:else if selectedTab === 'chats'}
 					<div class="flex flex-col h-full justify-between space-y-3 text-sm">
 						<div class=" space-y-2">

src/lib/stores/index.ts

@@ -12,6 +12,7 @@ export const chatId = writable('');
 export const chats = writable([]);
 export const tags = writable([]);
 export const models = writable([]);
+export const voices = writable([]);
 
 export const modelfiles = writable([]);
 export const prompts = writable([]);