feat: stop tts button added

This commit is contained in:
kraken 2024-08-03 01:54:14 +05:30
parent 521daee8a6
commit eefea19888

View file

@ -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>