From 5eff0e5f61d405b2b167b7bd69db0c7b97d9894c Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 9 Feb 2024 16:00:39 -0800
Subject: [PATCH] feat: tts automatic playback

---
 .../chat/Messages/ResponseMessage.svelte      |  1 +
 .../components/chat/Settings/Interface.svelte | 32 +------
 src/lib/components/chat/Settings/Voice.svelte | 90 +++++++++++++++----
 src/routes/(app)/+page.svelte                 |  8 ++
 src/routes/(app)/c/[id]/+page.svelte          |  8 ++
 5 files changed, 93 insertions(+), 46 deletions(-)

diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 0568630b..b1c0c817 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -458,6 +458,7 @@
 										</button>
 
 										<button
+											id="speak-button-{message.id}"
 											class="{isLastMessage
 												? 'visible'
 												: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white transition"
diff --git a/src/lib/components/chat/Settings/Interface.svelte b/src/lib/components/chat/Settings/Interface.svelte
index a30e5eac..3d831d5e 100644
--- a/src/lib/components/chat/Settings/Interface.svelte
+++ b/src/lib/components/chat/Settings/Interface.svelte
@@ -10,7 +10,6 @@
 
 	// Addons
 	let titleAutoGenerate = true;
-	let speechAutoSend = false;
 	let responseAutoCopy = false;
 	let titleAutoGenerateModel = '';
 
@@ -23,12 +22,6 @@
 		saveSettings({ showUsername: showUsername });
 	};
 
-
-	const toggleSpeechAutoSend = async () => {
-		speechAutoSend = !speechAutoSend;
-		saveSettings({ speechAutoSend: speechAutoSend });
-	};
-
 	const toggleTitleAutoGenerate = async () => {
 		titleAutoGenerate = !titleAutoGenerate;
 		saveSettings({ titleAutoGenerate: titleAutoGenerate });
@@ -107,26 +100,6 @@
 				</div>
 			</div>
 
-			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">Voice Input Auto-Send</div>
-
-					<button
-						class="p-1 px-3 text-xs flex rounded transition"
-						on:click={() => {
-							toggleSpeechAutoSend();
-						}}
-						type="button"
-					>
-						{#if speechAutoSend === true}
-							<span class="ml-2 self-center">On</span>
-						{:else}
-							<span class="ml-2 self-center">Off</span>
-						{/if}
-					</button>
-				</div>
-			</div>
-
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
 					<div class=" self-center text-xs font-medium">Response AutoCopy to Clipboard</div>
@@ -146,9 +119,12 @@
 					</button>
 				</div>
 			</div>
+
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">Display the username instead of "You" in the Chat</div>
+					<div class=" self-center text-xs font-medium">
+						Display the username instead of "You" in the Chat
+					</div>
 
 					<button
 						class="p-1 px-3 text-xs flex rounded transition"
diff --git a/src/lib/components/chat/Settings/Voice.svelte b/src/lib/components/chat/Settings/Voice.svelte
index fe994176..2656626b 100644
--- a/src/lib/components/chat/Settings/Voice.svelte
+++ b/src/lib/components/chat/Settings/Voice.svelte
@@ -5,6 +5,10 @@
 	export let saveSettings: Function;
 
 	// Voice
+
+	let speechAutoSend = false;
+	let responseAutoPlayback = false;
+
 	let engines = ['', 'openai'];
 	let engine = '';
 
@@ -33,6 +37,16 @@
 		}, 100);
 	};
 
+	const toggleResponseAutoPlayback = async () => {
+		responseAutoPlayback = !responseAutoPlayback;
+		saveSettings({ responseAutoPlayback: responseAutoPlayback });
+	};
+
+	const toggleSpeechAutoSend = async () => {
+		speechAutoSend = !speechAutoSend;
+		saveSettings({ speechAutoSend: speechAutoSend });
+	};
+
 	onMount(async () => {
 		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
 
@@ -60,26 +74,66 @@
 	}}
 >
 	<div class=" space-y-3">
-		<div class=" py-0.5 flex w-full justify-between">
-			<div class=" self-center text-sm font-medium">Speech Engine</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"
-					bind:value={engine}
-					placeholder="Select a mode"
-					on:change={(e) => {
-						if (e.target.value === 'openai') {
-							getOpenAIVoices();
-							speaker = 'alloy';
-						} else {
-							getWebAPIVoices();
-							speaker = '';
-						}
+		<div>
+			<div class=" mb-1 text-sm font-medium">TTS Settings</div>
+
+			<div class=" py-0.5 flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">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"
+						bind:value={engine}
+						placeholder="Select a mode"
+						on:change={(e) => {
+							if (e.target.value === 'openai') {
+								getOpenAIVoices();
+								speaker = 'alloy';
+							} else {
+								getWebAPIVoices();
+								speaker = '';
+							}
+						}}
+					>
+						<option value="">Default (Web API)</option>
+						<option value="openai">Open AI</option>
+					</select>
+				</div>
+			</div>
+
+			<div class=" py-0.5 flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">Voice Input Auto-Send</div>
+
+				<button
+					class="p-1 px-3 text-xs flex rounded transition"
+					on:click={() => {
+						toggleSpeechAutoSend();
 					}}
+					type="button"
 				>
-					<option value="">Default (Web API)</option>
-					<option value="openai">Open AI</option>
-				</select>
+					{#if speechAutoSend === true}
+						<span class="ml-2 self-center">On</span>
+					{:else}
+						<span class="ml-2 self-center">Off</span>
+					{/if}
+				</button>
+			</div>
+
+			<div class=" py-0.5 flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">TTS Automatic Playback</div>
+
+				<button
+					class="p-1 px-3 text-xs flex rounded transition"
+					on:click={() => {
+						toggleResponseAutoPlayback();
+					}}
+					type="button"
+				>
+					{#if responseAutoPlayback === true}
+						<span class="ml-2 self-center">On</span>
+					{:else}
+						<span class="ml-2 self-center">Off</span>
+					{/if}
+				</button>
 			</div>
 		</div>
 
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 8b16ade0..b213a5d4 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -448,6 +448,10 @@
 									if ($settings.responseAutoCopy) {
 										copyToClipboard(responseMessage.content);
 									}
+
+									if ($settings.responseAutoPlayback) {
+										document.getElementById(`speak-button-${responseMessage.id}`)?.click();
+									}
 								}
 							}
 						}
@@ -633,6 +637,10 @@
 					copyToClipboard(responseMessage.content);
 				}
 
+				if ($settings.responseAutoPlayback) {
+					document.getElementById(`speak-button-${responseMessage.id}`)?.click();
+				}
+
 				if (autoScroll) {
 					window.scrollTo({ top: document.body.scrollHeight });
 				}
diff --git a/src/routes/(app)/c/[id]/+page.svelte b/src/routes/(app)/c/[id]/+page.svelte
index 60eb7cec..58fbc046 100644
--- a/src/routes/(app)/c/[id]/+page.svelte
+++ b/src/routes/(app)/c/[id]/+page.svelte
@@ -462,6 +462,10 @@
 									if ($settings.responseAutoCopy) {
 										copyToClipboard(responseMessage.content);
 									}
+
+									if ($settings.responseAutoPlayback) {
+										document.getElementById(`speak-button-${responseMessage.id}`)?.click();
+									}
 								}
 							}
 						}
@@ -647,6 +651,10 @@
 					copyToClipboard(responseMessage.content);
 				}
 
+				if ($settings.responseAutoPlayback) {
+					document.getElementById(`speak-button-${responseMessage.id}`)?.click();
+				}
+
 				if (autoScroll) {
 					window.scrollTo({ top: document.body.scrollHeight });
 				}