如何从UI关闭并重新启动机器人对话

Question

我已经使用示例https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/12.customization-minimizable-web-chat创建了机器人界面，但是我想做的是创建带有关闭聊天窗口的按钮并重新开始对话。有谁知道如何在Bot Framework v4中实现此功能？

Answer 1

您需要执行几个步骤才能重新开始对话。首先，您需要在父组件的状态下保存对话的DirectLine和Store对象，并将其作为道具传递给Web Chat组件。然后，您需要使用onClick处理程序向屏幕添加按钮，该处理程序将调度事件以断开DirectLine对象与会话的连接。然后，在商店的中间件中，您需要侦听要断开的连接并重新初始化DirectLine和商店对象。这将清除对话历史记录并开始新的对话。有关示例，请参见下面的代码段。

代码段

import React, { useState, useEffect } from 'react';
import ReactWebChat, { createDirectLine, createStore } from 'botframework-webchat';
import directLineDisconnect from 'botframework-webchat-core/lib/actions/disconnect';

const initializeDirectLine = async setDirectLine => {
  const res = await fetch('http://localhost:3978/directline/token', { method: 'POST' });
  const { token } = await res.json();
  setDirectLine(createDirectLine({ token }));
};

const WebChat = props => {
  const { directLine } = props;

  return directLine
    ? <ReactWebChat className={'chat'} {...props} />
    : "Connecting..."
}

export default () => {
  const [directLine, setDirectLine] = useState();
  useEffect(() => {
    initializeDirectLine(setDirectLine);
  }, []);

  const storeMiddleware = () => next => action => {
    if (action.type === 'DIRECT_LINE/DISCONNECT_FULFILLED') {
      setDirectLine(null);
      setStore(createStore({}, storeMiddleware));
      initializeDirectLine(setDirectLine);
    }
    return next(action)
  };

  const [store, setStore] = useState(createStore({}, storeMiddleware));

  const disconnect = () => store.dispatch(directLineDisconnect());

  return (
    <div className={app}>
      <div className='details'>
        <button onClick={disconnect}>Disconnect</button>
      </div>
      <div className='wrapper'>
        <WebChat directLine={directLine} store={store}/>
      </div>
    </div>
  )
};

屏幕截图

希望这会有所帮助！