网络聊天是否有可用的“重置”按钮？答案

【问题标题】：Is There a “Reset” Button Available for the Web Chat?网络聊天是否有可用的“重置”按钮？
【发布时间】：2020-09-22 20:40:46
【问题描述】：

开箱即用，网络聊天的默认按钮集是“发送”按钮和“上传文件”按钮。网络聊天是否有可用的“重置”按钮，可以结束当前对话并为同一用户从头开始新对话？是否需要打开一些配置或样式选项才能直观地看到“重置”按钮。

聊天/对话历史记录需要保持不变。它不应该清除。

我目前正在使用 JavaScript 设置网络聊天并使用直线频道与我的机器人交谈。我使用 botframework-webchat 样式选项进行了一些 UI 自定义。请注意，网络聊天不涉及 iframe。

Screenshot

var directLineObj = window.WebChat.createDirectLine({

    token: "..."
});

// For additional style options:
// https://github.com/Microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/defaultStyleOptions.js
const styleOptions = {

    ...
};

var options = {

    directLine: directLineObj,
    styleOptions: styleOptions
};

var containerObj = document.getElementById("chatContainer");

var webChatObj = window.WebChat.renderWebChat(options, containerObj);

&lt;div id="chatContainer" class="..."&gt;&lt;/div&gt;

【问题讨论】：

您的意思是希望用户能够重新开始对话吗？如果是这样，您将需要您的机器人代码中的逻辑（以及从接口到您的机器人代码的事件来启动它）
嗨@Hessel，所以我没有开箱即用的东西可以打开网络聊天用户界面上的哪个位置，我会看到一个“重置”按钮，对吗？
不幸的是，没有开箱即用的东西。所以是的，您需要为此实现一个自定义功能。

标签： botframework direct-line-botframework web-chat

【解决方案1】：

您可以通过使用按钮（或您选择的实现）以及通过网络聊天发送活动以及13.core-bot 示例的cancel / interrupt component dialog 来执行此操作（下面的示例使用 JS SDK，但在其他示例中可用SDK）。

网络聊天：当点击button 时，网络聊天会发送WEB_CHAT/SEND_ACTIVITY，其中包含“reset”文本。

<!DOCTYPE html>
<html>

<head>
  <script src="https://unpkg.com/markdown-it@8.4.2/dist/markdown-it.min.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/regenerator-runtime@0.13.3/runtime.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/react-redux@7.1.0/dist/react-redux.min.js"></script>
  <script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
  <style>
    html,
    body {
      height: 100%
    }

    body {
      margin: 0
    }

    #webchat {
      height: 100%;
      width: 100%s;
    }

  </style>
</head>

<body>
  <div id="webchat" role="main"></div>
  <button id='resetBtn' type="button">Reset Dialog</button>

  <script type="text/babel" data-presets="es2015,react,stage-3">
    ( async function () {
      // 'use strict';
      const { ReactDOM: { render }, WebChat: { ReactWebChat } } = window;

      const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => action => {
        return next( action );
      } );

      const res = await fetch( 'http://localhost:3500/directline/token', { method: 'POST' } );
      let { token } = await res.json();

      await render(
        <ReactWebChat
          directLine={await window.WebChat.createDirectLine( {token} )}
          store={store}
        />,
        document.getElementById( 'webchat' )
      );
      document.querySelector( '#webchat > *' ).focus();

      const resetBtn = document.getElementById( 'resetBtn' );
      resetBtn.addEventListener( 'click', ( e ) => {
        e.preventDefault();
        store.dispatch( {
          type: 'WEB_CHAT/SEND_MESSAGE',
          payload: {
            text: `Reset`
          }
        } )
      } )

    } )().catch( err => console.error( err ) );     
  </script>
</body>

</html>

cancelAndHelpDialog.js：当机器人接收到“重置”活动时，它会调用cancelAllDialogs(true) 清除堆栈并将机器人返回到初始对话框。

async interrupt(innerDc) {
  if (innerDc.context && innerDc.context.activity) {
    const { activity } = innerDc.context;
    if (activity.text) {
      const text = activity.text;
      const activityText = text.toLowerCase();
      let message = '';

      switch (activityText) {
        case 'reset': {
          message = 'Request approved: resetting dialog';
          const resetMessage = MessageFactory.text(message, message, InputHints.IgnoringInput);
          resetMessage.channelData = { action: 'dialog_reset' };
          await innerDc.context.sendActivity(resetMessage);
          return await innerDc.cancelAllDialogs(true);
        }
        case 'help':
          case '?': {
            message = 'Show help here';
            await innerDc.context.sendActivity(message, message, InputHints.ExpectingInput);
            return { status: DialogTurnStatus.waiting };
        }
        case 'cancel':
        case 'quit': {
          message = 'Cancelling...';
          await innerDc.context.sendActivity(message, message, InputHints.IgnoringInput);
          return await innerDc.beginDialog(EXIT_DIALOG);
        }
      }
    }
  }
}

这是相当简单的，可能需要进行一些“清理”以满足您的需求，包括显示对话框正在重新启动的某种响应。

希望有帮助！

【讨论】：