Botframework-webchat: Disable Text-To-Speech issue

[enriconatella]

Edited by @compulim to add what we should fix.

Description

My customer would like to enable the Speech-To-Text feature, but not the Text-To-Speech one.
I tried to set to null the properties _speechSynthesis_ and _SpeechSynthesisUtterance_ but it's not working.
This is my code:

var _botConnection = new window.WebChat.createDirectLine({
      token: '{secret}'
});    
const subscriptionKey = 'xxxxxxxxxxxxxx';

async function createPonyfillFactory() {
       const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
       region: 'westeurope',
       speechRecognitionEndpointId: 'yyyyyyyyyyyyy',
       subscriptionKey
       });

     return options => {
            const webSpeechPonyfill = webSpeechPonyfillFactory(options);
                    return {
                        SpeechGrammarList: webSpeechPonyfill.SpeechGrammarList,
                        SpeechRecognition: webSpeechPonyfill.SpeechRecognition,
                        speechSynthesis: null,
                        SpeechSynthesisUtterance: null
                    }
                };
            };

 window.WebChat.renderWebChat({
       directLine: _botConnection,
       webSpeechPonyfillFactory: await createPonyfillFactory()
       },
       document.getElementById('webchat')
 );

This is the console output:

_webchat.js:1 TypeError: i is not a constructor
    at c (webchat.js:1)
    at webchat.js:1
    at c (webchat.js:1)
    at Generator._invoke (webchat.js:1)
    at Generator.e.<computed> [as next] (webchat.js:1)
    at n (webchat.js:1)
    at s (webchat.js:1)
    at webchat.js:1
    at new Promise (<anonymous>)
    at webchat.js:1_

The first interaction works fine, but after it the microphone icon is greyed out and you cannot dictate anymore.

Could you please help me?
Thanks

What we should fix

(Will update this from time to time)

Current error:

createContext.js:25 TypeError: SpeechSynthesisUtterance is not a constructor
    at createNativeUtterance (QueuedUtterance.js:14)
    at _callee4$ (QueuedUtterance.js:58)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
    at eval (asyncToGenerator.js:32)
    at new Promise (<anonymous>)
    at eval (asyncToGenerator.js:21)

We need to prevent synthesizing if it is null/falsy. So something up this call stack need to be blocked.

[corinagum]

'How to' questions such as this one are better suited for Stack Overflow. Please feel free to post other questions you have about developing your own features over there so the community at large may help out. If you need help with a Web Chat implementation, you can post a question to the Web Chat tag. Thank you!

[tdurnford]

I was able to reproduce this with Sample 06.f. This appears to be an issue with Web Chat and not the customer's code. @compulim Any insight to what the issue might be?

Web Chat v4

async function createHybridPonyfillFactory({ authorizationToken, region }) {
  const speechServicesPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({ authorizationToken, region });
  const webSpeechPonyfillFactory = await window.WebChat.createBrowserWebSpeechPonyfillFactory();

  return options => {
    // We are using two ponyfill factories to create two concrete ponyfills.
    const speechServicesPonyfill = speechServicesPonyfillFactory(options);
    const webSpeechPonyfill = webSpeechPonyfillFactory(options);

    // And we are merging the result from two different ponyfills.
    // We use browser-supported speech for speech-to-text, and Speech Services for text-to-speech.
    return {
      SpeechGrammarList: webSpeechPonyfill.SpeechGrammarList,
      SpeechRecognition: webSpeechPonyfill.SpeechRecognition,

      speechSynthesis: null,
      SpeechSynthesisUtterance: null
    }
  };
};

Error

Related to https://github.com/Microsoft/BotFramework-WebChat/issues/1816

[marq47]

Hi,
We have similar problem. We are using Reactjs and putting speechSynthesis to null in createHybridPonyfillFactory and when we click the micro button we are getting following error message in console:

Thanks!!

[compulim]

/👀

(Looking at this now.)

[compulim]

@enriconatella @tdurnford @marq47

Seeing the problem now. If we set it undefined or remove those keys for text-to-speech, Web Chat will use the browsers default, i.e. still speaking out the activity.

I see the need to specifically disable certain browser feature. And it is correct to set it to null for "explicitly remove" it. But currently, we are seeing i is not a constructor.

Should fix this.

[compulim]

Got a fix in PR. 😄