BotFramework-WebChat v4：将活动发布到从 UI 到机器人的直线

Question

我的 WebChat 代码基于 React minimizable-web-chat v4。

我想在用户单击位置按钮时向机器人发送消息。

handleLocationButtonClick 函数被调用并将纬度和经度发送给机器人。

这是我的代码：

import React from 'react';
import { createStore, createStyleSet } from 'botframework-webchat';

import WebChat from './WebChat';
import './fabric-icons-inline.css';
import './MinimizableWebChat.css';

export default class extends React.Component{

constructor(props) {
    super(props);

    this.handleFetchToken = this.handleFetchToken.bind(this);
    this.handleMaximizeButtonClick = this.handleMaximizeButtonClick.bind(this);
    this.handleMinimizeButtonClick = this.handleMinimizeButtonClick.bind(this);
    this.handleSwitchButtonClick = this.handleSwitchButtonClick.bind(this);
    this.handleLocationButtonClick = this.handleLocationButtonClick.bind(this);

    const store = createStore({}, ({ dispatch }) => next => action => {
      if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
        dispatch({
          type: 'WEB_CHAT/SEND_EVENT',
          payload: {
            name: 'webchat/join',
          }
        });
      }
      else if(action.type === 'DIRECT_LINE/INCOMING_ACTIVITY'){
        if (action.payload.activity.name === 'locationRequest') {
          this.setState(() => ({
            locationRequested: true
          }));
        }
      }
      return next(action);
    });

    this.state = {
      minimized: true,
      newMessage: false,
      locationRequested:false,
      side: 'right',
      store,
      styleSet: createStyleSet({
        backgroundColor: 'Transparent'
      }),
      token: 'token'
    };
  }

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

      this.setState(() => ({ token }));
    }
  }

  handleMaximizeButtonClick() {
    this.setState(() => ({
      minimized: false,
      newMessage: false
    }));
  }

  handleMinimizeButtonClick() {
    this.setState(() => ({
      minimized: true,
      newMessage: false
    }));
  }

  handleSwitchButtonClick() {
    this.setState(({ side }) => ({
      side: side === 'left' ? 'right' : 'left'
    }));
  }

  handleLocationButtonClick(){
    var x = document.getElementById("display");
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);

      this.setState(() => ({
        locationRequested: false
      }));

    }
    else 
    {
      x.innerHTML = "Geolocation API is not supported by this browser.";
    }

    function showPosition(position) {
        x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;

        this.store.dispatch({
          type: 'WEB_CHAT/SEND_MESSAGE',
          payload: { text: 'latitude:'+position.coords.latitude+'longitude:'+position.coords.longitude }
        });
    }
  }

render() {
    const { state: {
      minimized,
      newMessage,
      locationRequested,
      side,
      store,
      styleSet,
      token
    } } = this;

    return (
      <div className="minimizable-web-chat">
        {
          minimized ?
            <button
              className="maximize"
              onClick={ this.handleMaximizeButtonClick }
            >
              <span className={ token ? 'ms-Icon ms-Icon--MessageFill' : 'ms-Icon ms-Icon--Message' } />
              {
                newMessage &&
                  <span className="ms-Icon ms-Icon--CircleShapeSolid red-dot" />
              }
            </button>
          :
            <div
              className={ side === 'left' ? 'chat-box left' : 'chat-box right' }
            >
              <header>
                <div className="filler" />
                <button
                  className="switch"
                  onClick={ this.handleSwitchButtonClick }
                >
                  <span className="ms-Icon ms-Icon--Switch" />
                </button>
                <button
                  className="minimize"
                  onClick={ this.handleMinimizeButtonClick }
                >
                  <span className="ms-Icon ms-Icon--ChromeMinimize" />
                </button>
              </header>
              <WebChat
                className="react-web-chat"
                onFetchToken={ this.handleFetchToken }
                store={ store }
                styleSet={ styleSet }
                token={ token }
              />
              {
                locationRequested ?
                <div>
                  <p id="display"></p>
                  <button onClick={this.handleLocationButtonClick}>
                    Gélolocation
                  </button>
                </div>
              :
              <div></div>
              }
            </div>
        }
      </div>
    );
  }
}

当我点击按钮时，我有这个错误：

在控制台中：

怎么了？？

Answer 1

首先，a.minimizable-web-chat 示例的一些更新值得关注。但是，请参阅代码，因为 README.md 文件尚未完全更新以反映更改。

至于您的问题，请尝试以下更改。经过测试，它对我来说成功。将组件更改为函数，并通过useMem0() 定义store。

import React, { useCallback, useMemo, useState } from 'react';

const MinimizableWebChat = () => {
  const store = useMemo(
    () =>
      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
              }
            }
          });
        } else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
          if (action.payload.activity.from.role === 'bot') {
            setNewMessage(true);
          }
        }

        return next(action);
      }),
    []
  );

  [...]

  return (
    [...]
    <WebChat
      [...]
      store={store}
  );
}

export default MinimizableWebChat;

鉴于此文件中实施的更改，它可能会影响其他文件如何使用它。我的建议是进行大规模更新，以使您的项目与当前示例保持一致。真的只是这个文件，WebChat.js，可能还有App.js。如果没有，可以下载支持的 CSS 文件等。

希望有帮助！