个人中心
gpt4 book ai didi

javascript - 重构 BotFramework WebChat UI - javascript

转载 作者：行者123 更新时间：2023-11-28 03:11:02 26 4
gpt4 key购买 nike

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

有人可以帮助我理解为什么网络聊天会在此操作上卡住吗？

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

重现步骤:

  1. 使用以下代码创建一个 html 文件。 - 请务必更新 secret
  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'});

最佳答案

当我尝试时，你的代码可以工作。只有两点不同。

首先，我传入

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

代替您的await fetch()。我在出于开发目的而运行的“ token 服务器”中单独生成 token 。我使用 request 并发布选项，但选项基本相同，这让我......

二，我进去了

json: { 用户: { ID: 'dl_123' } }

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

关于javascript - 重构 BotFramework WebChat UI - javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60120341/

26 4 0
文章推荐： html - 如何使用在 php 文件中分配的变量加载 phtml 文件
文章推荐： c++ - 设计模式(GoF patterns)在c++中的实现
文章推荐： c++ - 在带有 VS 2008 的 Qt 4.8.5 网络示例中找不到 ui_chatdialog.h
文章推荐： html - 缩放浏览器时如何使 div 按比例流动？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com