Skip to content

Azure Bot Framework Web Chat in Nodejs: Not able to recognize prompts while converting text to speech #4052

@Kratii13

Description

@Kratii13

Below is my code for one of the waterfall steps in webchat code in Nodejs. I am able to enable voice option in webchat but while it converts from text to speech it is not able to recognize prompts, though it is able to recognise simple text. Please help me in enabling speech option for prompts as well.

Also added code for html file where speech option is enabled.

Solution needed : In text to speech it should be able to recognize prompts also, currently it is able to recognise the text messages.

Waterfall Prompt:

async financeFirstStep(step) {
    console.log("Inside financeFirstStep::");
    return await step.prompt(CHOICE_PROMPT, {
        prompt: 'Please select a option to which your query is related to-',
        size:'Medium',
        choices: ChoiceFactory.toChoices(['Account Statement', 'Credit Limit','Credit Term','Status of Claim','Home']),
        style: ListStyle.heroCard,
        retryPrompt: 'Invalid value entered. \r\nPlease select from the available options-'
    });
}

HTML Code:

<!DOCTYPE html>
<html>

<head>
  <script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
  <style>
    html,
    body {
      height: 100%;
    }
    
    body {
      margin: 0;
    }
    
    #webchat {
      height: 75%;
      width: 75%;
    }
  </style>
</head>

<body>
  <div id="webchat" role="main"></div>
  <script src="https://aka.ms/csspeech/jsbrowserpackageraw"></script>

  <script>
    const styleOptions = {
      botAvatarImage: 'https://i.ibb.co/HVzy48h/Stu.png',
      userAvatarImage: 'https://github.com/compulim.png?size=64',
      bubbleBackground: 'rgb(240,248,255)',
      bubbleFromUserBackground: 'rgb(30,144,255)'
    };


    (async function() {

      // We are using a customized store to add hooks to connect event
      const store = window.WebChat.createStore({}, ({
        dispatch
      }) => next => action => {
        if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
          dispatch({
            type: 'WEB_CHAT/SEND_EVENT',
            payload: {
              name: 'webchat/join',
              value: {
                language: window.navigator.language
              }
            }
          });
        }
        return next(action);
      });

      // Create directline Object
      window.WebChat.renderWebChat({
        // Secret is permanent while token is only valid per conversation
        directLine: window.WebChat.createDirectLine({
          secret: 'SECRET',
          watermark: 10
        }),
        //directLine: window.WebChat.createDirectLine({ token }),
        userID: "USERID",
        styleOptions,
        store,
        webSpeechPonyfillFactory: await createCognitiveServicesSpeechServicesPonyfillFactory({
          credentials: {
            region: 'eastus',
            subscriptionKey: 'subscriptionKey'
          }
        })
      }, document.getElementById('webchat'));
      document.querySelector('#webchat > *').focus();
    })().catch(err => console.error(err));
  </script>
</body>

</html>

Metadata

Metadata

Assignees

Labels

Bot ServicesRequired for internal Azure reporting. Do not delete. Do not change color.customer-replied-toRequired for internal reporting. Do not delete.customer-reportedRequired for internal Azure reporting. Do not delete.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions