网络聊天是否有“重置”按钮?

2023-12-14

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

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

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

截屏

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);
<div id="chatContainer" class="..."></div>

您可以通过使用按钮(或您选择的实现)并通过网络聊天发送活动来完成此操作取消/中断组件对话框 of the 13.核心机器人示例(下面的示例使用 JS SDK,但在其他 SDK 中也可用)。

网络聊天:当。。。的时候button单击后,网络聊天将发送WEB_CHAT/SEND_ACTIVITY其中包括文本“重置”。

<!DOCTYPE html>
<html>

<head>
  <script src="https://unpkg.com/[email protected]/dist/markdown-it.min.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/runtime.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/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);
        }
      }
    }
  }
}

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

希望得到帮助!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

网络聊天是否有“重置”按钮? 的相关文章

随机推荐