app/hooks/useSpeechRecognition.ts

"use client";

import { useState, useEffect, useCallback } from "react";
import { useTranscriber } from "./useTranscriber";

const useSpeechRecognition = () => {
    const [recognizedText, setRecognizedText] = useState('');
    const transcriber = useTranscriber();

    const startListening = useCallback((audioData: any) => {
        if (!transcriber.isBusy && !transcriber.isModelLoading) {
            transcriber.start(audioData);
        }
    }, [transcriber]);

    const stopListening = useCallback(() => {
        console.log("Stopped listening...", recognizedText);
    }, [recognizedText]); // Updated dependency array

    useEffect(() => {
        if (transcriber.output && !transcriber.isBusy) {
            setRecognizedText(transcriber.output.text);
        }
    }, [transcriber.output, transcriber.isBusy]);

    return { startListening, stopListening, recognizedText };
};

export default useSpeechRecognition;