Bot Framework для интеграции речи в текст с использованием React - PullRequest
Новая
       32

Bot Framework для интеграции речи в текст с использованием React

0 голосов
/ 03 июня 2019

Мне нужно интегрировать каркас бота Azure, который я сделал и сделал какой-то стиль, также используя параметр styleOptions, но когда я пытаюсь передать параметр webSpeechPonyFillFactory, я не получаю значок микрофона или какие-либо изменения.

вот мой код: 

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;

Когда я реализовывал в JS, он работал, но когда я пытался интегрироваться с React: (

1 Ответ

1 голос
/ 03 июня 2019

Вы должны добавить DirectLine Connection и Web Speech Ponyfill в состояние компонента и установить значение по умолчанию, равное null. Затем в методе componentDidMount создайте объекты DirectLine и Web Speech Ponyfill и обновите их значения состояния. Наконец, в методе рендеринга убедитесь, что объекты DirectLine и Web Speech Ponyfill не равны NULL, прежде чем рендерить ReactWebChat. Веб-чат не будет отображаться должным образом, если какое-либо значение не определено правильно. Посмотрите на фрагменты кода ниже. 

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>
    );
  }
}

Надеюсь, это поможет!

...