<div x-data="{
    has_speech_recognition: !!(window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition),
    speech_recognition: null,
    speech_transcript: '',
    speech_listening: false,
    init() {
        if (this.has_speech_recognition) {
            this.speech_recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)()
            this.speech_recognition.addEventListener('result', (event) => {
               this.speech_transcript = event.results[0][0].transcript
               this.speech_listening = false
            })
        }
    },
    start_listening() {
        if (this.speech_recognition) {
            this.speech_recognition.start()
            this.speech_listening = true
        }
    },
    stop_listening() {
        if (this.speech_recognition) {
            this.speech_recognition.stop()
            this.speech_listening = false
        }
    }
}" class="row h-100 {{ speech_recognition_class }}">
    <div class="col h-100">
        {% block speech_recognition_content %}
        {% endblock %}
    </div>
</div>
