Как закрыть и перезапустить разговор бота из пользовательского интерфейса

Question

Я создал пользовательский интерфейс бота с этим примером https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/12.customization-minimizable-web-chat,, но я хотел бы создать кнопку с окном чата и перезапустить разговор. Кто-нибудь знает, как реализовать эту функцию с Bot Framework v4?

Answer 1

Для возобновления разговора необходимо выполнить несколько шагов.Во-первых, вам необходимо сохранить объекты DirectLine и Store для диалога в состоянии родительского компонента и передать их в качестве реквизитов в компонент веб-чата.Затем вам нужно добавить кнопку на экран с обработчиком onClick, который отправляет событие, чтобы отключить объект DirectLine от диалога.Затем в промежуточном программном обеспечении магазина необходимо прослушать разрыв соединения и повторно инициализировать объекты DirectLine и Store.Это очистит историю разговора и начнет новый разговор.См. Пример кода ниже для примера.

Фрагмент кода

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

Снимок экрана

Надеюсь, это поможет!