javascript - 重构 BotFramework WebChat UI

问题描述

我们的网站上有一个网络聊天窗口，可以最小化/重新打开（这将保持相同的令牌，如果仍然有效）或关闭/重新打开（这确保我们检索新令牌）。当我们向机器人发送特定事件时，机器人应该向我们致意，例如：Welcome Event Example。但是，当遵循特定模式时，网络聊天会卡在“WEB_CHAT/SET_REFERENCE_GRAMMAR_ID”操作上，并且我们的机器人不会用我们的欢迎消息向我们打招呼。

有人可以帮我理解为什么网络聊天会冻结这个动作吗？

下面的示例方法对于使用 javascript 重构 UI 是否可行？

重现步骤：

使用下面的代码，创建一个 html 文件。- 一定要更新秘密
在 Chrome 中打开文件
点击“打开聊天”
点击“最小化聊天”
点击“打开聊天”
点击“关闭聊天”
打开开发者控制台
点击“打开聊天”

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Web Chat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
        }

        #webchat {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div style="width: 100%;">
        <div style="width: 200px; float: left;">
            <input type="button" onclick="openChat()" id="btnOpen" value="Open Chat" />
        </div>
        <div style="width: 200px; float: left;">
            <input type="button" onclick="closeChat()" id="btnClose" value="Close Chat" />
        </div>
        <div style="width: 200px; float: left;">
            <input type="button" onclick="minimizeChat()" id="btnMin" value="Minimize Chat" />
        </div>
        <div style="clear: both" id="webchat" role="main"></div>
    </div>
    <script>

        const styleOptions = {
            bubbleBackground: 'rgba(0, 0, 255, .1)',
            bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
            hideSendBox: false,
            hideUploadButton: true, // default false
            microphoneButtonColorOnDictate: '#F33',
            sendBoxBackground: 'White',
            sendBoxButtonColor: undefined, // defaults to subtle
            sendBoxButtonColorOnDisabled: '#CCC',
            sendBoxButtonColorOnFocus: '#333',
            sendBoxButtonColorOnHover: '#999', // default '#333'
            sendBoxDisabledTextColor: undefined, // defaults to subtle
            sendBoxHeight: 40,
            sendBoxMaxHeight: 200,
            sendBoxTextColor: 'Black',
            sendBoxBorderBottom: '',
            sendBoxBorderLeft: '',
            sendBoxBorderRight: '',
            sendBoxBorderTop: 'solid 1px #E6E6E6',
            sendBoxPlaceholderColor: undefined, // defaults to subtle
            sendBoxTextWrap: true,
        };

        var secret = 'YOUR SECRET HERE';
        var res = "";

        var token = "";

        const storeMiddleware = () => next => action => {
                console.log(">>> HTML DISPATCH action: " + action.type);
                if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                    sendEvent();
                }
		if (action.type === 'DIRECT_LINE/DISCONNECT_FULFILLED'){
		    setDirectLine(null);
		    setStore();
		}
                return next(action);
            };

        var newT = false;

	var store = window.WebChat.createStore({}, storeMiddleware);

        var wc = document.getElementById('webchat');

        async function getRes() {
            res = await fetch(
                'https://directline.botframework.com/v3/directline/tokens/generate',
                {
                    headers: {
                        Authorization: `Bearer ${secret}`,
                        'Content-type': 'application/json'
                    },
                    method: 'POST'
                }
            );
        }

        async function openChat() {
            wc.style.display = "";

            if (token == "") {
                newT = true;
                await getRes();
                token = await res.json();
            }
            else {
                newT = false;
            }

            window.WebChat.renderWebChat(
                {
                    directLine: window.WebChat.createDirectLine({ "token": token.token }), store,
                    styleOptions
                },
                wc);

            document.querySelector('#webchat > *').focus();
        }

        function sendEvent() {
            if (newT) {
                store.dispatch({
                    type: 'WEB_CHAT/SEND_EVENT',
                    payload: { name: 'webchat/join' }
                });
            }
        }

        function minimizeChat() {
            wc.style.display = "none";
        }

        function closeChat() {
            minimizeChat();
            store.dispatch({type: 'DIRECT_LINE/DISCONNECT'});
	    token ="";
        }

	function setDirectLine(dl){
	    window.WebChat.directLine = dl;
	}
	
	function setStore(){
	    store = window.WebChat.createStore({}, storeMiddleware);
	}

    </script>
</body>
</html>

预期行为

您不会受到欢迎，在开发者控制台中，最后写入的操作是 >>> HTML DISPATCH 操作：WEB_CHAT/SET_REFERENCE_GRAMMAR_ID"

附加上下文

如果您将以下代码行从“closeChat”函数移动到“minimizeChat”函数，机器人将正确地迎接我们。

store.dispatch({type: 'DIRECT_LINE/DISCONNECT'});

标签： javascriptbotframeworkdirect-line-botframework

当我尝试时，您的代码有效。只有两个区别。

首先，我通过

res = await fetch('http://localhost:3500/directline/token', { method: 'POST' });

代替您的 await fetch()。我在为开发目的运行的“令牌服务器”中单独生成一个令牌。我使用请求并发布选项，但选项基本相同，这让我...

二、我通过

json: { user: { ID: 'dl_123' } }

需要通过哪条直线。该值是静态的，因为我不需要它是动态的进行测试。如果我使用你的 fetch() 调用，它会失败。试试看。

javascript - 重构 BotFramework WebChat UI - javascript

问题描述

解决方案

推荐阅读