src/components/speech-prompt/speech-prompt.js

import { jsx as _jsx } from "react/jsx-runtime";
import classNames from "classnames";
import { FaMicrophone } from "react-icons/fa";
import SpeechRecognition, { useSpeechRecognition, } from "react-speech-recognition";
import { useUpdateEffect } from "react-use";
function SpeechPrompt({ setPrompt, }) {
    const { transcript, listening, browserSupportsSpeechRecognition, resetTranscript, } = useSpeechRecognition();
    const startListening = () => SpeechRecognition.startListening({ continuous: true });
    useUpdateEffect(() => {
        if (transcript)
            setPrompt(transcript);
    }, [transcript]);
    useUpdateEffect(() => {
        if (!listening)
            resetTranscript();
    }, [listening]);
    if (!browserSupportsSpeechRecognition) {
        return null;
    }
    return (_jsx("button", { className: classNames("flex cursor-pointer flex-none items-center justify-center rounded-full text-sm font-semibold size-8 text-center bg-gray-800 hover:bg-gray-700 text-white shadow-sm dark:shadow-highlight/20 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300", {
            "animate-pulse !bg-orange-500": listening,
        }), onTouchStart: startListening, onMouseDown: startListening, onTouchEnd: SpeechRecognition.stopListening, onMouseUp: SpeechRecognition.stopListening, children: _jsx(FaMicrophone, { className: "text-base" }) }));
}
export default SpeechPrompt;