Question

我有我的机器人的图像，但未在网络聊天中显示。有什么办法可以使它像此链接（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>

Answer 1

我建议您不要使用网络聊天频道iFrame选项，而应使用BotFramework-WebChat工具。网络聊天频道适用于简单的部署，但并非过于健壮。

如果您查看04.b.display-user-bot-images-styling中的示例BotFramework-WebChat repo，则会确切地看到如何影响漫游器/用户的化身。

简而言之，您将把网络聊天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调用并入到现有的bot中。重新创建等效的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');
        }
    });
});

希望有帮助！

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

1 个答案: