如何从 UI 关闭和重新启动机器人对话答案

【问题标题】：How to close and restart bot conversation from UI如何从 UI 关闭和重新启动机器人对话
【发布时间】：2019-07-03 16:55:44
【问题描述】：

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

【问题讨论】：

标签： reactjs botframework

【解决方案1】：

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

代码片段

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

屏幕截图

希望这会有所帮助！

【讨论】：

@tdurnford 我喜欢这个 sn-p，但我在努力实现它。我正在使用最小化的网络聊天示例，并希望在标题中添加一个重新启动对话按钮。我需要将此 sn-p 实现为单独的组件还是应该将其合并到 webchat 或最小化 webchat 组件中？
我可能会将商店中间件和初始化 Direct Line 代码添加到最小化的网络聊天示例中