我如何将此代码从 v3# 转换为 v4#？

Question

我在 Whosebug 的 sdk3 版本中找到了这段很棒的代码，但该版本已更新为 sdk4 版本。有谁知道如何升级它？

我尝试了一些东西，但主要在 header

中给了我一些错误

我在 git 中找到了一些示例，但我需要在其中使用 React。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
   <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <style>
        #mychat {
            margin: 10px;
            position: fixed;
            bottom: 30px;
            right: 10px;
            z-index: 1000000;
        }
    </style>
</head>

</html>
<script>
    (function () {
        var div = document.createElement("div");
        document.getElementsByTagName('body')[0].appendChild(div);
        div.outerHTML = "<div id='botDiv' style='width: 400px; height: 0px; margin:10px; position: fixed; bottom: 0; right:0; z-index: 1000;><div  id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer;'></div></div>";
        BotChat.App({  // change to window.WebChat.renderWebChat
            directLine: { secret: 'myAppSecret' },
            userID: 'YOUR_USER_ID',

        }, document.getElementById("botDiv"));

        document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
        document.querySelector('body').addEventListener('click', function (e) {
            e.target.matches = e.target.matches || e.target.msMatchesSelector;
            if (e.target.matches('#chatbotheader')) {
                var botDiv = document.querySelector('#botDiv');

                botDiv.style.height = "0px";

                document.getElementById("mychat").style.display = "block";
            };
        });

        document.getElementById("mychat").addEventListener("click", function (e) {

            document.getElementById("botDiv").style.height = '500px';

            e.target.style.display = "none";
        })
    }());
</script>

Answer 1

看代码，我建议看一下这个Minimizable Web Chat Sample。它有点复杂，因为它是用 React 编写的，但可以完成您想要做的事情。

如果您仍然对将问题中的代码移植到 Web Chat 感兴趣，我建议您查看 Web Chat 的自述文件中的 Migrating from Web Chat v3 to v4 部分。

或者，您可以将 Facebook Messenger 添加为您的机器人的渠道，并在您的网站上使用他们的 Chat Plugin。

希望对您有所帮助。

我如何将此代码从 v3# 转换为 v4#？

How do i convert this code from v3# to v4#?

javascript

botframework

azure-bot-service