CODEWITHSUNDEEP
reactjsazurebotframeworkazure-cognitive-services
Sridhar Paiya
Sridhar Paiya

Reputation: 478

Bot Framework speech-to-text integration issue using React

I need to integrate Azure bot framework, that I did and made some style also using styleOptions parameter, But when I try passing webSpeechPonyFillFactory param , I am not getting Microphone icon or any changes.

here is my code:

import { DirectLine } from 'botframework-directlinejs';
import React, { Component } from 'react';
import ReactWebChat,{ Components, createDirectLine, createCognitiveServicesSpeechServicesPonyfillFactory } from 'botframework-webchat';
import './chat.css'

class Chat extends Component {


  constructor(props) {
    super(props);
    this.state = {
      options: {},
      webSpeechPonyfillFactory: {
        region: 'westus',
        subscriptionKey: "242a*88**************a70b2",
        textNormalization: 'lexical'
      }
    };

    this.directLine = new DirectLine({ token: 'hyyw*********************c' });
  }
  async componentDidMount(){
    this.setState({webSpeechPonyfillFactory : await createCognitiveServicesSpeechServicesPonyfillFactory( { region: 'westus', subscriptionKey: '242a**************0b2',textNormalization: 'lexical' })});
  }

  render() {


    return (
      <div className="chat">
      <ReactWebChat directLine={this.directLine} userID="" webSpeechPonyFillFactory={this.state.webSpeechPonyfillFactory}
        styleOptions={{
          backgroundColor: '#fff',
          bubbleBackground: '#FFFFFF',
          bubbleBorder: 'solid 0px #fff',
          bubbleBorderRadius: 20
        }} />
</div>
    );

  }
}export default Chat;

When I implement in JS, It was working, but When I tried to integrate with React :(

Upvotes: 0

Views: 710

Answers (1)

tdurnford
tdurnford

Reputation: 3712

You should add the DirectLine Connection and the Web Speech Ponyfill to the component's state and set the default value to null. Then in the componentDidMount method, create the DirectLine and Web Speech Ponyfill objects and update their state values. Finally, in the render method, check to make sure the DirectLine and Web Speech Ponyfill objects are not null before you render ReactWebChat. Web Chat will not render as expected if either value is not defined properly. Take a look at the code snippets below. 

import React from 'react';

import ReactWebChat, { createDirectLine } from 'botframework-webchat';

export default class extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      directLine: null,
      webSpeechPonyfill: null
    };
  }

  componentDidMount() {
    this.fetchToken();
    this.fetchSpeechPonyfill();
  }

  async fetchSpeechPonyfill() {
    this.setState({ webSpeechPonyfill: await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({ 
      subscriptionKey: '<SPEECH_SUBSCRIPTION_KEY>', region: 'westus', textNormalization: 'lexical' }) });
  }

  async fetchToken() {
    const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
    const { token } = await res.json();

    this.setState(() => ({
      directLine: createDirectLine({ token })
    }));
  }

  render() {
    return (
      this.state.directLine && this.state.webSpeechPonyfill?
        <ReactWebChat
          className="chat"
          directLine={ this.state.directLine }
          webSpeechPonyfillFactory={ this.state.webSpeechPonyfill }
          { ...this.props }
        />
      :
        <div>Connecting to bot&hellip;</div>
    );
  }
}

Hope this helps!

Upvotes: 1

Related Questions