重置 webCaht 中的对话 UI

Question

我使用 WebChat 作为我的机器人的 Web 界面，我想在用户单击重置按钮时重置对话。我按照这个但是商店没有重置 UI 只有直线正在重新连接。我有这个错误：在 forkPut TypeError 未被捕获：无法读取属性 'error' of undefined

我的代码

import React, { useState, useEffect } from 'react';
import ReactWebChat, { createDirectLine, createStore } from 'botframework-webchat';
import directLineDisconnect from 'botframework-webchat-core/lib/actions/disconnect';
import './fabric-icons-inline.css';
import './MinimizableWebChat.css';


const initializeDirectLine = async setDirectLine => {
  setDirectLine(createDirectLine({ token }));
};

const WebChat = props => {
  const { directLine, store } = props;
  console.log('DL : '); console.log(directLine);
  return directLine
    ? <ReactWebChat className={'react-web-chat'} {...props} />
    : "Connecting..."
};

export default () => {
  console.log('DL create req ');
  const [directLine, setDirectLine] = useState();
  useEffect(() => {
    initializeDirectLine(setDirectLine);
  }, []);

  const storeMiddleware = () => next => action => {
    console.log(action.type);
    if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
      store.dispatch({
        type: 'WEB_CHAT/SEND_EVENT',
        payload: {
          name: 'webchat/NewConnect',
          value: {
            language: document.documentElement.lang || window.navigator.language
          }
        }
      });
    }
    else if (action.type === 'DIRECT_LINE/DISCONNECT_FULFILLED') {
      console.log("---> DIRECT_LINE/DISCONNECT_FULFILLED");
      setDirectLine(null);
      console.log("---> 1");
      setStore(createStore({}, storeMiddleware));
      console.log("---> 2");
      initializeDirectLine(setDirectLine);
      console.log("---> 3");
    }
    return next(action);
  };

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

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

  return (
    <div className="minimizable-web-chat">
      <div className='chat-box right bottom'>
        <button onClick={disconnect}>Disconnect</button>
        <WebChat className='react-web-chat'
          directLine={directLine} store={store} />
      </div>
    </div>
  )
};

Answer 1

查看 Clear After Idle 网络聊天示例。它展示了如何清除转录历史记录并与机器人创建新对话。请注意，您必须使用最新版本的 Web Chat（版本 4.6.0）才能使此示例正常工作。旧版本有一个错误，不允许您在没有 'forkPut' 类型错误的情况下更改商店。

重置 webCaht 中的对话 UI

Reset conversation in webCaht UI

javascript

reactjs

web-chat