javascript - 重构 BotFramework WebChat UI

javascript - 重构 BotFramework WebChat UI - javascript

转载作者：行者123 更新时间：2023-11-28 03:11:02

26

4

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

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

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

重现步骤:

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

最佳答案

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

首先，我传入

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++中的实现

文章推荐： html - 缩放浏览器时如何使 div 按比例流动？

CoffeeScript 重构
是否有任何特定于 CoffeeScript 的技巧可以使这看起来更整洁: index = (-> if segment == 'index' return
If语句的C#重构
我正在试验 C# 的不同领域并重构最佳实践/模式。可以看出，下面的 Validate 方法有 3 个子验证方法。有没有办法重新设计/重构此方法，以便删除 if 语句？ (可能使用委托(delega
Ruby 重构
我正在制作一个简单的 Rails 站点，它将存储一些日期并执行基本的条件检查。我在下面写了一些方法，并被告知我可以使它们更有效率。我一直挠头，我不知道该怎么做。我应该让 entry.find 全局化吗
JavaScript 重构
有没有更好的方法来编写这个函数？我继承了一些 javascript 代码，如果可能的话，我想让它更简洁。此外，我可能会添加更多“主题”元素，并且不想一遍又一遍地复制和粘贴。 function imag
重构：banner中logo聚合分散动画
1. 效果展示在线查看 2. 开始前说明效果实现参考源码： Logo 聚集与散开原效果代码基于 react jsx 类组件实现。依赖旧，代码冗余。
java - 重构:删除构造函数中的重复项
我似乎缺乏足够的咖啡来让我清楚地看到以下问题。假设我有一个包含两个构造函数和多个字段的类。一个构造函数是无参数构造函数，一个字段依赖于另一个字段。另一个构造函数为其其中一个字段获取注入(inject
java - 修改此代码的更好方法是什么[重构]
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎是题外话，因为它缺乏足够的信息来诊断问题。更详细地描述您的问题或include a min
java - 重构 if 语句以使用适当的模式
我有一个枚举，里面有一些状态: enum State { A, B, C, D } 以及具有相应状态的对象: class MyObject { State st
Ant exec 重构
我的 build.xml 中有这段代码:
delphi - 重构 - 如何防止重构选项卡显示？
在Delphi XE中，我经常使用重命名变量重构(Ctrl+Shift+E)，通过给出更有意义的变量名称来使我的代码更容易理解，例如: 这一切都很好，但是当我使用它时，我在工作空间方面遇到了一个小问题
javascript - 计算State数量——重构
我实现了一个逻辑来通过data变量计算剩余数量和成本。它循环遍历每个产品，并通过计算已返回数量状态的数量来计算剩余数量，并减去产品数量。有没有办法重构这段代码，使其看起来更干净、易于理解/可维护？我
haskell - 重构 where 子句
我正在学习 Haskell，所以这可能是一些非常微不足道的事情，但我希望得到一些关于如何重写它以及它如何工作的指示。我有以下工作代码(使用的包: HTF 、 Parsec 和 Flow ): {-#
JavaScript 重构。处理重复代码
我有以下代码: switch(equipmentAttachment.AttachmentPosition) { case 'AttachFront': { if(
java - Eclipse 重构
我正在尝试将代码从 Java Utility Logging 更改为 Log4J2。要更改代码，我想在 Eclipse 中使用代码重构。例如更改:导入 java.util.logging.Logger
excel - 重构 - 本例中使用哪种模式？
我有一个处理 Excel 文件中的行的函数。在这个函数中，我有一个 for 循环。现在，一旦提取一行，我们就会检查各种条件。如果任何条件为假，我们继续下一步row.可以使用模式使这段代码更加结构化吗？
java - 重构、嵌套方法调用
我正在重构一个有很多嵌套调用的程序，例如 ServiceManagement.getGlobalizationService() .createExportCo
java - 重构 JTextField
我在 JTabbedPane 上重构了许多字段以减少冗余。但是，当我为字段数量设置常量大小时，出现空指针异常。我不太确定为什么会发生这种情况。我做错了什么，更重要的是有人可以解释发生了什么事吗？ pu
java - 重构——结合PolygonClickListener和MarkerClickListener
我试图通过删除 map.setOnPolygonClickListener 和 map.setOnMarkerClickListener 中的重复项来重构以下方法。两个监听器执行完全相同的操作，我想
java - 重构/重新设计大型系统
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 6 年前。 Improve this ques
ios - 重构 Storyboard时如何交换标签栏项目的位置
当我在这张照片中重构 Storyboard时 link . 我找不到在哪里可以交换标签栏项目的位置。例如，我想将主菜单更改为索引 0。这是我的storyboard . 最佳答案您可以通过拖放标签

首页

博学

6Ren·AI

商城

javascript - 重构 BotFramework WebChat UI - javascript