我们在我们的网站上有一个网聊窗口,可以最小化/重新打开它(如果仍然有效,则保留相同的令牌),也可以关闭/重新打开(这确保我们检索到一个新的令牌)。当我们向机器人分配特定事件时,我们的机器人应向我们致意,例如以下示例:Welcome Event Example。但是,当遵循特定模式时,网络聊天将停留在“ WEB_CHAT / SET_REFERENCE_GRAMMAR_ID”操作上,并且我们的漫游器不会向我们发出欢迎消息。
[有人可以帮我了解为什么网络聊天无法执行此操作吗?
下面的这种示例方法对于使用javascript重组UI看起来可行吗?
复制步骤:
<!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 = await fetch('http://localhost:3500/directline/token', { method: 'POST' });
代替您的等待fetch()。我在出于开发目的而运行的“令牌服务器”中分别生成令牌。我使用request并发布选项,但是选项基本相同,这使我进入...
两个,我通过
json: { user: { ID: 'dl_123' } }
哪个直通线需要通过。该值是静态的,因为我不需要为测试而动态。如果我使用您的fetch()调用,它将失败。试试吧。