如何添加一个可以关闭网络聊天页面的按钮？

Question

我正在使用网络聊天 V3 和机器人框架 V3。是否可以向用户发送一个可以关闭网络聊天页面的按钮？

Answer 1

我认为这在 Web Chat v3 中是不可能的；但是，在 Web Chat v4 中，您可以使用卡片操作中间件来更改操作的默认行为。然后你可以从机器人发送一张带有按钮的卡片来关闭 window.

网络聊天 v4

const cardActionMiddleware = () => next => card => {
  const { cardAction: { value }} = card;
  if (value === 'close') {
    window.close();
  }
  next(card);
}

window.WebChat.renderWebChat({
  cardActionMiddleware,
  directLine
}, document.getElementById('webchat'));

机器人框架 SDK v4（节点）

const card = CardFactory.heroCard(
  'Close Window',
  null,
  CardFactory.actions([
    {
      type: 'imBack',
      title: 'close',
      value: 'Close'
    }])
);

await context.sendActivity({ attachments: [card] });

请注意，Web Chat v3 目前处于停用状态，不再受支持，但 Web Chat v4 与 v3 机器人兼容。查看 Migration 文档了解更多详情。

希望对您有所帮助！

Answer 2

应要求，这里是v3解决方案。关键元素是 .filter 和 .subscribe。过滤器侦听从机器人到页面的传入活动。订阅监听页面上的活动和事件，允许您在将数据发送到机器人之前对其进行操作。

这个例子是"using"TJ的'imBack'英雄牌。或者，如果您不希望机器人向用户发送显示选择的文本，您可以发送 'postBack'。在这种情况下，不会显示该值，并且需要您过滤略有不同的 activity 属性（channelData 和 value）。

请注意，为了简单起见，我在这里通过包含秘密来实例化直线。在生产环境中，您需要用您的秘密交换令牌以缓解任何安全问题。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>Bot Chat</title>

  <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />

  <style>
    #botchat {
      border: 1px solid #333;
      float: left;
      height: 600px;
      position: relative;
      width: 460px;
    }

  </style>
</head>

<body>
  <div id="botchat"></div>

  <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>

  <script>
    const params = BotChat.queryParams(location.search);

    const user = {
      id: params['userid'] || 'userid',
      name: params['username'] || 'username'
    };

    const bot = {
      id: 'bot',
      name: 'bot'
    };

    window['botchatDebug'] = params['debug'] && params['debug'] === 'true';

    const botConnection = new BotChat.DirectLine({
      secret: 'xxxxxxx'
    });

    BotChat.App({
      bot: bot,
      botConnection: botConnection,
      user: user
    }, document.getElementById('botchat'));

    botConnection.activity$
      .filter(function (activity) {
        if (activity.type === 'message' && activity.text === 'close' ) {
          window.close();
        }
      })
      .subscribe(function (activity) {
        // Make function calls and track activity/events from the page to the bot
      });

  </script>
</body>

</html>

希望得到帮助！

如何添加一个可以关闭网络聊天页面的按钮？

How to add a button which can close webchat page?

web-chat

botframework