如何在网络聊天中显示机器人图标？答案

【问题标题】：How to show the bot icon in the webchat?如何在网络聊天中显示机器人图标？
【发布时间】：2019-06-06 08:46:04
【问题描述】：

我有我的机器人的图像，但它没有显示在网络聊天中。有没有办法让它像这个链接（https://cloud.githubusercontent.com/assets/979837/19395693/cbdf6ac2-91f3-11e6-8a48-ba533bf91dca.png）中的图片一样发生？

我的机器人脚本是：

<script>

    //Scrip for the webchat window
    (function () {
        var div = document.createElement("div");
        document.getElementsByTagName('body')[0].appendChild(div);
        div.outerHTML = "<div id='botDiv' style='height: 38px; position: fixed; bottom: 0; right: 1%; z-index: 1000; background-color: #fff'><div id='botTitleBar' style='height: 38px; width: 350px; position:fixed; cursor: pointer;'></div><iframe width='400px' height='600px' src='https://webchat.botframework.com/embed/xxx'></iframe></div>";

        document.querySelector('body').addEventListener('click', function (e) {
            e.target.matches = e.target.matches || e.target.msMatchesSelector;
            if (e.target.matches('#botTitleBar')) {
                var botDiv = document.querySelector('#botDiv');
                botDiv.style.height = botDiv.style.height == '600px' ? '38px' : '600px';
            };
        });
    }());



</script>

【问题讨论】：

请发布您正在使用的代码并描述您尝试过的可能解决方案。
我正在使用 iframe，我会将脚本放在答案中。我在 azure 门户中更改了机器人的名称和徽标，但在网页中仅更改了名称。
您是否为此使用网络聊天频道？
是的，我正在使用网络聊天

标签： botframework

【解决方案1】：

我建议您放弃网络聊天频道 iFrame 选项，转而使用 BotFramework-WebChat 工具。网络聊天频道适用于简单的部署，但它并不是非常强大的机器人外。

如果您查看来自BotFramework-WebChat repo 的示例04.b.display-user-bot-images-styling，您将准确地看到如何影响机器人/用户头像。

简而言之，您会将网络聊天 CDN 包含到您的 html 文件中，为网络聊天 div 分配一些基本样式，然后是连接到并生成实际网络聊天体验的脚本。

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Web Chat: Avatar with images and initials</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--
      For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js".
      When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js",
      or lock down on a specific version with the following format: "/4.1.0/webchat.js".
    -->
    <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>
    <style>
      html, body { height: 100% }
      body { margin: 0 }

      #webchat {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="webchat" role="main"></div>
    <script>
      (async function () {
        // In this demo, we are using Direct Line token from MockBot.
        // To talk to your bot, you should use the token exchanged using your Direct Line secret.
        // You should never put the Direct Line secret in the browser or client app.
        // https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication

        const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
        const { token } = await res.json();

        const styleOptions = {
          botAvatarImage: 'https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0',
          botAvatarInitials: 'BF',
          userAvatarImage: 'https://github.com/compulim.png?size=64',
          userAvatarInitials: 'WC'
        };

        window.WebChat.renderWebChat({
          directLine: window.WebChat.createDirectLine({ token }),
          styleOptions
        }, document.getElementById('webchat'));

        document.querySelector('#webchat > *').focus();
      })().catch(err => console.error(err));
    </script>
  </body>
</html>

此选项确实需要生成直接线路标记。这是通过将您的直线密码传递给直线 /tokens/generate api 并接收回一个令牌来完成的。生成的令牌与特定会话相关联，因此提供了一定级别的安全性。请不要在此设置中使用您的密码。

以下是一个 node.js 示例，可以作为独立应用程序运行，也可以在加载 html 页面/网络聊天时作为单独的 api 调用合并到现有机器人中。重新创建等效的 dotnet 版本并不难。

server.post('/directline/token', (req, res) => {
    // userId must start with `dl_`
    const userId = (req.body && req.body.id) ? req.body.id : `dl_${Date.now() + Math.random().toString(36) }`;
    const options = {
        method: 'POST',
        uri: 'https://directline.botframework.com/v3/directline/tokens/generate',
        headers: {
            'Authorization': `Bearer ${process.env.directLineSecret}`
        },
        json: {
            User: {
                Id: userId
            }
        }
    };
    request.post(options, (error, response, body) => {
        if (!error && response.statusCode < 300) {
            res.send({
                token: body.token
            });
        } else {
            res.status(500).send('Call to retrieve token from DirectLine failed');
        }
    });
});

希望有帮助！

【讨论】：