Using rasa-webchat with react-speech-recognition

Hi, Is there currently any way to create a wrapper component around the rasa-webchat widget with react-speech-recognition that can send a payload to the widget on button press?

This is my WebChat component:

class WebChat extends Component
{
    constructor(props){
        super();
    }
    
    render(){
        return (
            <Widget
              initPayload={""}
              socketUrl={"http://localhost:5005"}
              socketPath={"/socket.io/"}
              inputTextFieldHint={"Enter a valid command"}
              customData={{"language": "en"}} // arbitrary custom data. Stay minimal as this will be added to the socket
              title={"Virtual Assistant"}
              showFullScreenButton={"true"}
              embedded={"true"}
              hideWhenNotConnected = {"false"}
              params={{"storage": "session"}}
            />
          );
    }
}
export default WebChat;

And here is my wrapper:

const ChatboxSpeech = () => {
  const { transcript, resetTranscript } = useSpeechRecognition()

  return (
    <div className = "chatroom">
      <WebChat/>
      <button onClick={SpeechRecognition.startListening}>Start</button>
      <button onClick={SpeechRecognition.stopListening}>Stop</button>
      <button onClick={resetTranscript}>Reset</button>
      <p>{transcript}</p>
    </div>
  )
}
export default ChatboxSpeech;

Just not sure on how to send the transcript to the Widget. Any help appreciated.

[andrewlu0]

import React, {useRef, useEffect} from 'react';
import {Widget} from 'rasa-webchat';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faMicrophone } from '@fortawesome/free-solid-svg-icons'

var listening = false;

function MyComponent() {
    const webchatRef = useRef(null);
    const { transcript, interimTranscript, finalTranscript, resetTranscript} = useSpeechRecognition()

    useEffect(() => {
      if (finalTranscript !== '') {
        callback();
        resetTranscript();
        stopListening();
        listening = false;
      }}
    );

    function handleListen(){
      if (!listening){
        listening = true;
        SpeechRecognition.startListening();
        isListening();
        setTimeout(() => { 
          if (finalTranscript === ''){
            SpeechRecognition.stopListening();
            stopListening();
            listening = false;
          }
        }, 5000);
      }
    }

    function isListening(){
      Array.from(document.querySelectorAll('.speech-button')).map(function(button) {
                 button.style.color="#6495ED";
                 button.style.border="1px solid white";
      })
    }

    function stopListening(){
      Array.from(document.querySelectorAll('.speech-button')).map(function(button) {
        button.style.color="white";
        button.style.border="1px solid grey";
      })
    }
    
    function callback() {
        if (webchatRef.current && webchatRef.current.sendMessage) {
          webchatRef.current.sendMessage(finalTranscript, finalTranscript);
        }
    }
    
    return (<div class = "chatroom">
      <Widget 
        initPayload={""}
        socketUrl={"http://localhost:5005"}
        socketPath={"/socket.io/"}
        inputTextFieldHint={"Enter a valid command"}
        customData={{"language": "en"}} // arbitrary custom data. Stay minimal as this will be added to the socket
        title={"Virtual Assistant"}
        showFullScreenButton={"true"}
        embedded={"true"}
        hideWhenNotConnected = {"false"}
        params={{"storage": "session"}}
      ref={webchatRef}/>
      <button class = "speech-button" onClick={handleListen}><FontAwesomeIcon icon={faMicrophone} /></button>
    </div>)
}

Here is a full example if you are interested

[hadisd5]

import React, {useRef, useEffect} from 'react';
import {Widget} from 'rasa-webchat';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faMicrophone } from '@fortawesome/free-solid-svg-icons'

var listening = false;

function MyComponent() {
    const webchatRef = useRef(null);
    const { transcript, interimTranscript, finalTranscript, resetTranscript} = useSpeechRecognition()

    useEffect(() => {
      if (finalTranscript !== '') {
        callback();
        resetTranscript();
        stopListening();
        listening = false;
      }}
    );

    function handleListen(){
      if (!listening){
        listening = true;
        SpeechRecognition.startListening();
        isListening();
        setTimeout(() => { 
          if (finalTranscript === ''){
            SpeechRecognition.stopListening();
            stopListening();
            listening = false;
          }
        }, 5000);
      }
    }

    function isListening(){
      Array.from(document.querySelectorAll('.speech-button')).map(function(button) {
                 button.style.color="#6495ED";
                 button.style.border="1px solid white";
      })
    }

    function stopListening(){
      Array.from(document.querySelectorAll('.speech-button')).map(function(button) {
        button.style.color="white";
        button.style.border="1px solid grey";
      })
    }
    
    function callback() {
        if (webchatRef.current && webchatRef.current.sendMessage) {
          webchatRef.current.sendMessage(finalTranscript, finalTranscript);
        }
    }
    
    return (<div class = "chatroom">
      <Widget 
        initPayload={""}
        socketUrl={"http://localhost:5005"}
        socketPath={"/socket.io/"}
        inputTextFieldHint={"Enter a valid command"}
        customData={{"language": "en"}} // arbitrary custom data. Stay minimal as this will be added to the socket
        title={"Virtual Assistant"}
        showFullScreenButton={"true"}
        embedded={"true"}
        hideWhenNotConnected = {"false"}
        params={{"storage": "session"}}
      ref={webchatRef}/>
      <button class = "speech-button" onClick={handleListen}><FontAwesomeIcon icon={faMicrophone} /></button>
    </div>)
}

Here is a full example if you are interested

Thanks so much for sharing Is it possible to share the css file related to the chatroom class?