diff --git a/frontend/app/chat/page.tsx b/frontend/app/chat/page.tsx index df6743d71..d9e42ea7d 100644 --- a/frontend/app/chat/page.tsx +++ b/frontend/app/chat/page.tsx @@ -1,8 +1,8 @@ "use client"; import axios from "axios"; import { redirect } from "next/navigation"; -import { useState } from "react"; -import { MdSettings } from "react-icons/md"; +import { useEffect, useState } from "react"; +import { MdMic, MdMicOff, MdSettings } from "react-icons/md"; import Button from "../components/ui/Button"; import Card from "../components/ui/Card"; import Modal from "../components/ui/Modal"; @@ -17,14 +17,58 @@ export default function ChatPage() { const [temperature, setTemperature] = useState(0); const [maxTokens, setMaxTokens] = useState(500); const [isPending, setIsPending] = useState(false); + const [isListening, setIsListening] = useState(false); const { session } = useSupabase(); if (session === null) { redirect("/login"); } + useEffect(() => { + if (typeof window !== "undefined") { + const SpeechRecognition = + window.SpeechRecognition || window.webkitSpeechRecognition; + + const mic = new SpeechRecognition(); + + mic.continuous = true; + mic.interimResults = false; + mic.lang = "en-US"; + + mic.onstart = () => { + console.log("Mics on"); + }; + + mic.onend = () => { + console.log("Mics off"); + }; + + mic.onerror = (event: SpeechRecognitionErrorEvent) => { + console.log(event.error); + setIsListening(false); + }; + + mic.onresult = (event: SpeechRecognitionEvent) => { + const interimTranscript = + event.results[event.results.length - 1][0].transcript; + setQuestion((prevQuestion) => prevQuestion + interimTranscript); + }; + + if (isListening) { + mic.start(); + } + + return () => { + if (mic) { + mic.stop(); + } + }; + } + }, [isListening]); + const askQuestion = async () => { setHistory((hist) => [...hist, ["user", question]]); setIsPending(true); + setIsListening(false); const response = await axios.post( `${process.env.NEXT_PUBLIC_BACKEND_URL}/chat/`, { @@ -45,6 +89,10 @@ export default function ChatPage() { setIsPending(false); }; + const handleListen = () => { + setIsListening((prevIsListening) => !prevIsListening); + }; + return (
@@ -74,6 +122,19 @@ export default function ChatPage() { + {/* Mic Button */} + {/* Settings Button */}