迁移 Bot Framework 3- 4：document.getElementsByClassName("wc-header") 不再工作

Question

我将我的代码从 webchat 3 更改为 webchat 4，还更改了样式选项等一些其他内容。一切正常....只是 web-chat 渲染造成了问题。这是我的代码：

(async function() {
            const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', { 
            headers: {
              Authorization: `Bearer [MYBEARER]`,
            },
            method: 'POST'
          });
          const { token } = await res.json();
         

            const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
                //console.log(action);
                if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                    dispatch({
                        type: 'WEB_CHAT/SEND_EVENT',
                        payload: {
                            name: 'webchat/join',
                            value: { language: window.navigator.language }
                        }
                    });
                }

                return next(action);
            });
            const styleOptions = {
                botAvatarInitials: 'EY',
                userAvatarInitials: 'YOU'
            };
            const {
                    createCognitiveServicesSpeechServicesPonyfillFactory,
                    createDirectLine,
                    renderWebChat
                  } = window.WebChat;

            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; background-color:#252525; border:1px solid #252525;'><div  id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer; background-color:#FFE600;'></div></div>";
            
            window.WebChat.renderWebChat({
                directLine: window.WebChat.createDirectLine({ token }),
                webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory(),
                store,
                userID: `You`,
                username: 'Web Chat User',
                locale: 'en-US',
                language: 'en-US',
                styleOptions
            }, document.getElementById('botDiv'));
            document.querySelector('#botDiv > *').focus();
            

            
            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";
            })
        }()).catch(err => console.error(err));;

我的 header 中也有所有 js 和 css 链接：

<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/css/botchatey.css">
    <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
    <script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

问题来了： 当我删除“window.WebChat.renderWebChat”函数时，整个布局运行完美。我可以最大化和最小化我在 div-outerHTML.

中创建的聊天窗口

当我添加 renderWebChat 函数时，id 为“botTitleBar”的封装 DIV 似乎被吃掉了并且没有显示出来。如果我在运行解决方案中按 F12，我在代码运行中看不到这个 DIV。我现在花了几个小时在这上面。非常欢迎任何帮助！请！

Answer 1

我自己解决了这个问题。花了我一些时间，但我认为这对其他人来说很有趣，你也可以从 webchat 3 更改为 webchat 4。我的 web-side 上有一个图标，我想在网站打开时显示该图标。当我单击该图标时，网络聊天 window 打开。当我点击网络聊天 window 的 header 时，window 崩溃并再次显示该图标。这是我需要的代码部分。样式部分：

<style>
    html,
    body {
        height: 100%;
        width: 100%;
    }

    body {
        margin: 0;
    }

    #botDiv {
        width: 400px;
        height: 0px;
        margin: 10px;
        position: fixed;
        bottom: 0;
        right: 0;
        z-index: 1000;
        border: 1px solid #252525;
        display: none;
    }

    #botDiv>* {
        height: 100%;
        width: 100%;
    }

    #webchat>* {
        height: 100%;
        width: 100%;
    }
    
    #botTitleBar {
        cursor: pointer;
        background-color: #252525;
        height: 20px;
        width: auto;
        color: #252525;
    }

    #ContainerDiv {
      margin: auto;
      position: sticky;
      left: 0;
      bottom: 0;
      width: 100%;
    } 
</style>

图标的 div 和我放在页脚中的 chat-window：

<div id="botDiv">
        <div id="botTitleBar">Click here to close chat window!</div>
        <div id="webchat"></div>
</div>
<div class="ContainerDiv" id="ContainerDiv">
        <img id="chaticon" src="@Url.Content("/images/chat.png")"  style="float: right;" role="main"/>
</div>

最后是 javascript 函数：

(async function() {
        
        const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', { 
            headers: {
              Authorization: `Bearer <YOUR DIRECTLINE SECRET HERE>`,
            },
            method: 'POST'
        });
        const { token } = await res.json();


        const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
            //console.log(action);
            if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                dispatch({
                    type: 'WEB_CHAT/SEND_EVENT',
                    payload: {
                        name: 'webchat/join',
                        value: { language: window.navigator.language }
                    }
                });
            }

            return next(action);
        });
        const styleOptions = {
            botAvatarInitials: 'EY',
            userAvatarInitials: 'YOU',
            hideUploadButton: true,
            backgroundColor: '#252525',
            userAvatarBackgroundColor: '#FFE600',
            botAvatarBackgroundColor: 'FFE600',
            sendBoxBackground: 'Black',
            sendBoxTextColor: 'White'

        };
        const {
                createCognitiveServicesSpeechServicesPonyfillFactory,
                createDirectLine,
                renderWebChat
              } = window.WebChat;

       

        window.WebChat.renderWebChat({
            directLine: window.WebChat.createDirectLine({ token }),
            webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory(),
            store,
            userID: `You`,
            username: 'Web Chat User',
            locale: 'en-US',
            language: 'en-US',
            styleOptions
        }, document.querySelector("#botDiv #webchat")
        );

        document.querySelector('#webchat > *').focus();
        
        document.querySelector( 'body' ).addEventListener( 'click', function (e) {
            const botDiv = document.getElementById("botDiv");
            const webchat = document.getElementById("webchat" );
            const chaticon = document.getElementById("chaticon" );
            const botTitleBar = document.getElementById("botTitleBar");
            e.target.matches = e.target.matches || e.target.msMatchesSelector;
            const parent = e.srcElement.parentElement;
            if (parent.matches( '#botDiv' ) && e.target.matches( '#botTitleBar' ) ) {
                botDiv.style.height = '0px';
                botDiv.style.display = "none";
                chaticon.style.display = "initial";
            }
            else if ( e.target.matches( '#chaticon') ) {
                document.getElementById( "botDiv" ).style.height = '500px';
                botDiv.style.display = "block";
                botDiv.appendChild( webchat );
                botTitleBar.style.backgroundColor = "#FFE600";
                chaticon.style.display = "none";
            };
        });

       
    }()).catch(err => console.error(err));

我知道直线密码不应该直接在代码中，但由于我的页面只是一个演示页面，所以我让它变得简单了。当我一直在寻找解决方案时，我认为如果您遇到同样的问题，这可能会对您有所帮助。

迁移 Bot Framework 3- 4：document.getElementsByClassName("wc-header") 不再工作

Migration Bot Framework 3- 4: document.getElementsByClassName("wc-header") not working anymore

javascript

botframework

bots

razor-pages

web-chat