重组BotFramework WebChat UI-javascript

问题描述 投票:1回答:1

我们在我们的网站上有一个网聊窗口,可以最小化/重新打开它(如果仍然有效,则保留相同的令牌),也可以关闭/重新打开(这确保我们检索到一个新的令牌)。当我们向机器人分配特定事件时,我们的机器人应向我们致意,例如以下示例:Welcome Event Example。但是,当遵循特定模式时,网络聊天将停留在“ WEB_CHAT / SET_REFERENCE_GRAMMAR_ID”操作上,并且我们的漫游器不会向我们发出欢迎消息。

[有人可以帮我了解为什么网络聊天无法执行此操作吗?

下面的这种示例方法对于使用javascript重组UI看起来可行吗?

复制步骤:

  1. 使用下面的代码,创建一个html文件。 -请务必更新秘密
  2. 在Chrome中打开文件
  3. 单击“打开聊天”
  4. 单击“最小化聊天”
  5. 单击“打开聊天”
  6. 点击“关闭聊天”
  7. 打开开发人员控制台
  8. 单击“打开聊天”

<!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'});
javascript botframework direct-line-botframework
1个回答
0
投票

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

首先,我通过

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

代替您的等待fetch()。我在出于开发目的而运行的“令牌服务器”中分别生成令牌。我使用request并发布选项,但是选项基本相同,这使我进入...

两个,我通过

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

哪个直通线需要通过。该值是静态的,因为我不需要为测试而动态。如果我使用您的fetch()调用,它将失败。试试吧。

© www.soinside.com 2019 - 2024. All rights reserved.