feat: disable speaker button while speaking

2 files changed, 40 insertions, 30 deletions

diff --git a/apps/web/app/(dash)/chat/chatWindow.tsx b/apps/web/app/(dash)/chat/chatWindow.tsx
index 662c7217..00d18fe3 100644
--- a/apps/web/app/(dash)/chat/chatWindow.tsx
+++ b/apps/web/app/(dash)/chat/chatWindow.tsx
@@ -51,6 +51,7 @@ function ChatWindow({
 }) {
 	const [layout, setLayout] = useState<"chat" | "initial">("chat");
 	const [chatHistory, setChatHistory] = useState<ChatHistory[]>(initialChat);
+	const [isSpeaking, setIsSpeaking] = useState(false);
 
 	const removeJustificationFromText = (text: string) => {
 		// remove everything after the first "<justification>" word
@@ -66,6 +67,20 @@ function ChatWindow({
 		return text;
 	};
 
+	const handleTTS = (text: string) => {
+		if (!text) return;
+		const utterThis: SpeechSynthesisUtterance = new SpeechSynthesisUtterance(
+			text,
+		);
+		const speechSynth: SpeechSynthesis = window.speechSynthesis;
+		utterThis.lang = "en-US";
+		speechSynth.speak(utterThis);
+		setIsSpeaking(true);
+		utterThis.onend = () => {
+			setIsSpeaking(false);
+		};
+	};
+
 	const router = useRouter();
 
 	const getAnswer = async (
@@ -305,25 +320,6 @@ function ChatWindow({
 													</Markdown>
 
 													<div className="mt-3 relative -left-2 flex items-center gap-1">
-														{/* speak response */}
-														<button
-															onClick={() => {
-																const utterThis: SpeechSynthesisUtterance =
-																	new SpeechSynthesisUtterance(
-																		chat.answer.parts
-																			.map((part) => part.text)
-																			.join(""),
-																	);
-																const speechSynth: SpeechSynthesis =
-																	window.speechSynthesis;
-																utterThis.lang = "en-US";
-																utterThis.rate = 1;
-																speechSynth.speak(utterThis);
-															}}
-															className="group h-8 w-8 flex justify-center items-center active:scale-75 duration-200"
-														>
-															<SpeakerWaveIcon className="size-[18px] group-hover:text-primary" />
-														</button>
 														{/* copy response */}
 														<button
 															onClick={() =>
@@ -337,6 +333,20 @@ function ChatWindow({
 														>
 															<ClipboardIcon className="size-[18px] group-hover:text-primary" />
 														</button>
+														{/* speak response */}
+														<button
+															disabled={isSpeaking}
+															onClick={() => {
+																handleTTS(
+																	chat.answer.parts
+																		.map((part) => part.text)
+																		.join(""),
+																);
+															}}
+															className="group h-8 w-8 flex justify-center items-center active:scale-75 duration-200 disabled:opacity-30"
+														>
+															<SpeakerWaveIcon className="size-[18px] group-hover:text-primary group-disabled:group-hover:text-gray-600" />
+														</button>
 													</div>
 												</div>
 											</div>
diff --git a/apps/web/wrangler.toml b/apps/web/wrangler.toml
index 7f3fa047..675038c6 100644
--- a/apps/web/wrangler.toml
+++ b/apps/web/wrangler.toml
@@ -5,13 +5,13 @@ pages_build_output_dir = ".vercel/output/static"
 
 
 kv_namespaces = [
-	{ binding = "CANVAS_SNAPS", id = "6df98c892b3744ccb0c631d9f60d6697" },
-	{ binding = "RECOMMENDATIONS", id = "83bc7055226c4657948141c2ff9a5425" }
+	{ binding = "CANVAS_SNAPS", id = "24c7048fa9064e7787dd58760b21dc8d" },
+	{ binding = "RECOMMENDATIONS", id = "abfd16f09b0b4300908115a5a177429e" }
 ]
 
 env.production.kv_namespaces = [
-	{ binding = "CANVAS_SNAPS", id = "6df98c892b3744ccb0c631d9f60d6697" },
-	{ binding = "RECOMMENDATIONS", id = "83bc7055226c4657948141c2ff9a5425" }
+	{ binding = "CANVAS_SNAPS", id = "24c7048fa9064e7787dd58760b21dc8d" },
+	{ binding = "RECOMMENDATIONS", id = "abfd16f09b0b4300908115a5a177429e" }
 ]
 
 [ai]
@@ -22,26 +22,26 @@ mode = "smart"
 
 [[r2_buckets]]
 binding = "STORAGE"
-bucket_name = "dev-r2-anycontext"
+bucket_name = "supermemory-r2"
 
 [[d1_databases]]
 binding = "DATABASE"
-database_name = "dev-d1-anycontext"
-database_id = "fc562605-157a-4f60-b439-2a24ffed5b4c"
+database_name = "supermemory-db-preview"
+database_id = "b09e126c-8179-4927-876a-6a03ee94334b"
 
 
 [[env.production.d1_databases]]
 binding = "DATABASE"
-database_name = "prod-d1-supermemory"
-database_id = "f527a727-c472-41d4-8eaf-3d7ba0f2f395"
+database_name = "supermemory-db-prod"
+database_id = "0dea4084-3629-4aea-938c-da478a32f5cd"
 
 [env.preview.ai]
 binding = "AI"
 
 [[env.preview.d1_databases]]
 binding = "DATABASE"
-database_name = "dev-d1-anycontext"
-database_id = "fc562605-157a-4f60-b439-2a24ffed5b4c"
+database_name = "supermemory-db-preview"
+database_id = "b09e126c-8179-4927-876a-6a03ee94334b"
 
 [env.production.ai]
 binding = "AI"
\ No newline at end of file