如何从UI关闭并重新启动机器人对话 [英] How to close and restart bot conversation from UI

问题描述

我已使用此示例

I have created bot UI with this example https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/12.customization-minimizable-web-chat, but what I would like to do is create button with close chat window and restart conversation. Does anyone know how to implement this feature with bot framework v4?

推荐答案

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

There are a couple of steps you need to do to restart the conversation. First, you need to save your DirectLine and Store objects for the conversation in the parent component's state and pass them as props to the Web Chat component. Then you need to add a button to the screen with an onClick handler that dispatches an event to disconnect the DirectLine Object from the conversation. Then in the store's middleware you need to listen for the connection to be disconnected and reinitialize the DirectLine and Store Objects. This will clear the conversation history and start a new conversation. See the code snippet below for an example.

代码段

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

屏幕截图

希望这会有所帮助！

这篇关于如何从UI关闭并重新启动机器人对话的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！