使用 React 的 Bot Framework 语音到文本集成问题答案

【问题标题】：Bot Framework speech-to-text integration issue using React使用 React 的 Bot Framework 语音到文本集成问题
【发布时间】：2019-06-04 06:51:44
【问题描述】：

我需要集成 Azure bot 框架，我这样做并使用styleOptions 参数制作了一些样式，但是当我尝试通过 webSpeechPonyFillFactory param 时，我没有得到麦克风图标或任何更改。

这是我的代码：

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 集成时:(

【问题讨论】：

标签： reactjs azure botframework microsoft-cognitive

【解决方案1】：

您应该将 DirectLine Connection 和 Web Speech Ponyfill 添加到组件的状态，并将默认值设置为 null。然后在 componentDidMount 方法中，创建 DirectLine 和 Web Speech Ponyfill 对象并更新它们的状态值。最后，在渲染方法中，在渲染 ReactWebChat 之前检查以确保 DirectLine 和 Web Speech Ponyfill 对象不为空。如果任一值未正确定义，网络聊天将不会按预期呈现。看看下面的代码sn-ps。

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

希望这会有所帮助！

【讨论】：