From 5df3e3f5e5f9c41add86ee69d05001adebcbbdef Mon Sep 17 00:00:00 2001
From: silentoplayz <jacwoo21@outlook.com>
Date: Thu, 4 Jun 2026 05:54:50 -0400
Subject: [PATCH] feat(ui): add TTS voice suggestions dropdown to model editor

---
 .../components/workspace/Models/ModelEditor.svelte | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/lib/components/workspace/Models/ModelEditor.svelte b/src/lib/components/workspace/Models/ModelEditor.svelte
index 75c42ac713..16947a7c47 100644
--- a/src/lib/components/workspace/Models/ModelEditor.svelte
+++ b/src/lib/components/workspace/Models/ModelEditor.svelte
@@ -9,6 +9,7 @@
 	import { getSkills } from '$lib/apis/skills';
 	import { getFunctions } from '$lib/apis/functions';
 	import { getModelsDefaults } from '$lib/apis/configs';
+	import { getVoices } from '$lib/apis/audio';
 
 	import AdvancedParams from '$lib/components/chat/Settings/Advanced/AdvancedParams.svelte';
 	import Tags from '$lib/components/common/Tags.svelte';
@@ -108,6 +109,7 @@
 	let terminalId = '';
 	let tts = { voice: '' };
 	let suggestionTags = [];
+	let voices = [];
 
 	const submitHandler = async () => {
 		loading = true;
@@ -263,6 +265,11 @@
 			suggestionTags = modelTags.map((t) => ({ name: t }));
 		}
 
+		const voicesRes = await getVoices(localStorage.token).catch(() => null);
+		if (voicesRes) {
+			voices = voicesRes.voices;
+		}
+
 		// Fetch admin-configured default model metadata so the editor
 		// reflects the actual defaults rather than hardcoded values
 		const modelsConfig = await getModelsDefaults(localStorage.token).catch(() => null);
@@ -854,8 +861,15 @@
 							class="w-full text-sm bg-transparent outline-hidden"
 							type="text"
 							bind:value={tts.voice}
+							list="tts-voice-list"
 							placeholder={$i18n.t('e.g. alloy, echo, shimmer')}
 						/>
+
+						<datalist id="tts-voice-list">
+							{#each voices as v}
+								<option value={v.id}>{v.name}</option>
+							{/each}
+						</datalist>
 					</div>
 
 					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-4" />