У нас есть окно веб-чата на нашем веб-сайте, которое можно свернуть / открыть повторно (оно сохраняет тот же токен, если он все еще действует) или закрыть / открыть (это гарантирует, что мы получим новый токен). Наш бот должен приветствовать нас, когда мы отправляем ему указанное событие c, как в следующем примере: Пример приветствия . Однако, следуя указанному шаблону c, веб-чат застревает в действии "WEB_CHAT / SET_REFERENCE_GRAMMAR_ID", и наш бот не приветствует нас нашим приветственным сообщением.
Может кто-нибудь помочь мне понять, почему webchat зависает на этом действии?
Можно ли с помощью приведенного ниже примера подхода перекомпоновать пользовательский интерфейс, используя javascript?
Шаги для воспроизведения:
- Используя приведенный ниже код, создайте 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 action: WEB_CHAT / SET_REFERENCE_GRAMMAR_ID "
Дополнительный контекст
Если вы переместите строку кода ниже из функции" closeChat "в функцию" minimalChat ", бот будет правильно нас приветствовать.
store.dispatch({type: 'DIRECT_LINE/DISCONNECT'});