From eefea19888b0fa1d7e8c13186200af7458d88613 Mon Sep 17 00:00:00 2001
From: kraken <solodarken@gmail.com>
Date: Sat, 3 Aug 2024 01:54:14 +0530
Subject: [PATCH] feat: stop tts button added

---
 apps/web/app/(dash)/chat/chatWindow.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/web/app/(dash)/chat/chatWindow.tsx b/apps/web/app/(dash)/chat/chatWindow.tsx
index 00d18fe3..eaa62b80 100644
--- a/apps/web/app/(dash)/chat/chatWindow.tsx
+++ b/apps/web/app/(dash)/chat/chatWindow.tsx
@@ -24,6 +24,7 @@ import { toast } from "sonner";
 import Link from "next/link";
 import { createChatObject } from "@/app/actions/doers";
 import { ClipboardIcon, SpeakerWaveIcon } from "@heroicons/react/24/outline";
+import { SpeakerOffIcon } from "@radix-ui/react-icons";
 
 function ChatWindow({
 	q,
@@ -68,6 +69,7 @@ function ChatWindow({
 	};
 
 	const handleTTS = (text: string) => {
+		if (isSpeaking) return stopTTS();
 		if (!text) return;
 		const utterThis: SpeechSynthesisUtterance = new SpeechSynthesisUtterance(
 			text,
@@ -81,6 +83,14 @@ function ChatWindow({
 		};
 	};
 
+	const stopTTS = () => {
+		if (isSpeaking) {
+			const speechSynth: SpeechSynthesis = window.speechSynthesis;
+			speechSynth.cancel();
+			setIsSpeaking(false);
+		}
+	};
+
 	const router = useRouter();
 
 	const getAnswer = async (
@@ -335,7 +345,6 @@ function ChatWindow({
 														</button>
 														{/* speak response */}
 														<button
-															disabled={isSpeaking}
 															onClick={() => {
 																handleTTS(
 																	chat.answer.parts
@@ -343,9 +352,13 @@ function ChatWindow({
 																		.join(""),
 																);
 															}}
-															className="group h-8 w-8 flex justify-center items-center active:scale-75 duration-200 disabled:opacity-30"
+															className="group h-8 w-8 flex justify-center items-center active:scale-75 duration-200 "
 														>
-															<SpeakerWaveIcon className="size-[18px] group-hover:text-primary group-disabled:group-hover:text-gray-600" />
+															{isSpeaking ? (
+																<SpeakerOffIcon />
+															) : (
+																<SpeakerWaveIcon className="size-[18px] group-hover:text-primary" />
+															)}
 														</button>
 													</div>
 												</div>