BOT user session is getting overlapped in web channel - html

Question

BOT user session is getting overlapped in web channel. we are using https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js
Issue: we are passing country, user unique id and email address from UI to BOT via webchat channel. user are seeing other user's data when they query for their detail i.e. my details. Is this due to using cdn reference? what could be the reason, how to resolve this?
below is the webchat code-
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous" />
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script src="https://askadamwebappdev.azurewebsites.net/AskAdam/babelpolyfill7.4.4.js"></script>
<style>
.chat-box {
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: 4px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
border: 4px solid #12abdb;
margin: 0px;
display: none;
flex-direction: column;
box-sizing: border-box;
min-width: 320px;
min-height: 300px;
position: absolute;
height: 65%;
width: 400px;
bottom: 5px;
left: 5px;
z-index: 99999999;
}
#media only screen and (max-width: 700px) {
.chat-box {
width: 100%;
height: 100%;
transform: none;
margin: 0px;
}
.chat-box header .bot-name {
margin-left: 53px !important;
}
.chat-box header .logo {
margin-top: -4px !important;
width: 60px !important;
height: 60px !important;
}
}
button.chat-box-maximize {
background-color: #E7E7E7;
border-radius: 50%;
border: 2px solid #12abdb;
bottom: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
color: White;
font-size: 30px;
height: 96px;
outline: 0;
padding: 0px;
position: fixed;
left: 20px;
width: 96px;
}
button.chat-box-maximize:focus:not(:active),
button.chat-box-maximize:focus:not(:active) {
background-color: #2a6fa8;
border-color: #2a6fa8;
}
button.chat-box-maximize:active {
background-color: White;
color: #39c;
}
button.chat-box-maximize img {
border-radius: 50%;
margin-top: 5px;
}
.chat-box header {
background-color: #12abdb;
flex-shrink: 0;
display: flex;
cursor: move;
flex-basis: 53px;
}
.chat-box header button {
width: 40px;
height: 40px;
background-color: Transparent;
border: 0;
color: White;
outline: 0;
margin-top: 9px;
cursor: default;
}
.chat-box header button.minimize {
margin-top: 3px;
}
.chat-box header button:focus:not(:active),
.chat-box header button:hover:not(:active) {
color: rgba(255, 255, 255, 0.6);
}
.chat-box header button:focus:active {
color: rgba(255, 255, 255, 0.4);
}
.chat-box header .bot-name {
font-size: 21px;
margin-left: 107px;
font-weight: bold;
color: white;
width: 142px;
}
.chat-box header .bot-title {
font-size: 15px;
margin-left: -121px;
margin-top: 27px;
color: white;
word-break: keep-all;
white-space: nowrap;
}
.chat-box header .logo {
z-index: 1;
width: 120px;
height: 120px;
position: absolute;
margin-top: -61px;
margin-left: -2px;
background-size: contain;
background-repeat: no-repeat;
background-image: url(/image/responsive/ask-adam-virtual-agent-avatar.png);
}
.chat-box header .filler {
flex: 0 10000 100%;
}
.css-1dgbgmu>.image {
background-image: url(/image/responsive/ask-adam-virtual-agent-avatar.png);
background-size: contain;
}
.css-1m1alj7 {
background-color: #12abdb !important;
}
.css-1dgbgmu {
background-color: white !important;
}
.css-1vieo9r .ac-pushButton {
color: #12abdb !important;
}
.css-1vieo9r .ac-pushButton:active {
border-color: #12abdb !important;
}
.css-1vieo9r .ac-pushButton:focus {
outline: 0;
}
.css-14x775w {
display: none;
}
.chat-box ::-moz-selection {
background: #12abdb;
}
.chat-box ::selection {
background: #12abdb;
}
.web-chat {
overflow: hidden;
width: 100%;
height: 100%;
}
.connect-spinner {
display: flex;
margin: auto;
text-align: center;
}
.connect-spinner .content {
margin: auto;
}
.connect-spinner .content .icon {
font-size: 64px;
}
.chat-box-header img {
width: 100%;
}
.chat-box {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.chat-box code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}
.resizable .resizers {
width: 100%;
height: 100%;
box-sizing: border-box;
position: absolute;
}
.resizable .resizer {
width: 10px;
height: 10px;
position: absolute;
z-index: 999999;
}
.resizable .resizer.top-left {
position: absolute;
left: -5px;
top: -5px;
cursor: nwse-resize;
}
.resizable .resizer.top-right {
position: absolute;
right: -5px;
top: -5px;
cursor: nesw-resize;
}
.resizable .resizer.bottom-left {
position: absolute;
left: -5px;
bottom: -5px;
cursor: nesw-resize;
}
.resizable .resizer.bottom-right {
position: absolute;
right: -5px;
bottom: -5px;
cursor: nwse-resize;
}
</style>
<div id="chat-box-container" class="chat-box resizable">
<div class="resizer top-left"></div>
<div class="resizer top-right"></div>
<div class="resizer bottom-left"></div>
<div class="resizer bottom-right"></div>
<header id="chat-box-header" class="chat-header">
<div class="logo"></div>
<div class="bot-name">Ask Adam</div>
<div class="bot-title">Virtual Assistant</div>
<div class="filler"></div>
<button onclick="minimizeConversation()" class="minimize">
<i class="far fa-window-minimize fa-lg"></i>
</button>
<button onclick="restartConversation()" class="restart-conversation">
<i class="fas fa-times fa-lg"></i>
</button>
</header>
<div class="web-chat" id="webchat" role="main"></div>
</div>
<button onclick="minimizeConversation()" class="chat-box-maximize">
<!--i class="far fa-comment-alt"></i-->
<img src="/image/responsive/ask-adam-virtual-agent-avatar.png" />
</button>
<script type="text/javascript">
"use strict";
function makeResizableDiv(div) {
const element = document.querySelector(div);
const resizers = document.querySelectorAll(div + " .resizer");
const minimum_size = 320;
let original_width = 0;
let original_height = 0;
let original_x = 0;
let original_y = 0;
let original_mouse_x = 0;
let original_mouse_y = 0;
for (let i = 0; i < resizers.length; i++) {
const currentResizer = resizers[i];
currentResizer.addEventListener("mousedown", function(e) {
e.preventDefault();
original_width = parseFloat(
getComputedStyle(element, null)
.getPropertyValue("width")
.replace("px", "")
);
original_height = parseFloat(
getComputedStyle(element, null)
.getPropertyValue("height")
.replace("px", "")
);
original_x = element.getBoundingClientRect().left;
original_y = element.getBoundingClientRect().top;
original_mouse_x = e.pageX;
original_mouse_y = e.pageY;
window.addEventListener("mousemove", resize);
window.addEventListener("mouseup", stopResize);
});
function resize(e) {
if (currentResizer.classList.contains("bottom-right")) {
const width = original_width + (e.pageX - original_mouse_x);
const height = original_height + (e.pageY - original_mouse_y);
if (width > minimum_size) {
element.style.width = width + "px";
}
if (height > minimum_size) {
element.style.height = height + "px";
}
} else if (currentResizer.classList.contains("bottom-left")) {
const height = original_height + (e.pageY - original_mouse_y);
const width = original_width - (e.pageX - original_mouse_x);
if (height > minimum_size) {
element.style.height = height + "px";
}
if (width > minimum_size) {
const left = original_x + (e.pageX - original_mouse_x);
element.style.width = width + "px";
element.style.left =
original_x + (e.pageX - original_mouse_x) + "px";
}
} else if (currentResizer.classList.contains("top-right")) {
const width = original_width + (e.pageX - original_mouse_x);
const height = original_height - (e.pageY - original_mouse_y);
if (width > minimum_size) {
element.style.width = width + "px";
}
if (height > minimum_size) {
element.style.height = height + "px";
const top = original_y + (e.pageY - original_mouse_y);
element.style.top = top + "px";
}
} else {
const width = original_width - (e.pageX - original_mouse_x);
const height = original_height - (e.pageY - original_mouse_y);
if (width > minimum_size) {
element.style.width = width + "px";
element.style.left =
original_x + (e.pageX - original_mouse_x) + "px";
}
if (height > minimum_size) {
element.style.height = height + "px";
const top = original_y + (e.pageY - original_mouse_y);
element.style.top = top + "px";
}
}
}
function stopResize() {
window.removeEventListener("mousemove", resize);
}
}
}
makeResizableDiv(".resizable");
(function() {
dragElement(document.getElementById("chat-box-container"));
function dragElement(elmnt) {
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
if (document.getElementById("chat-box-header")) {
document.getElementById(
"chat-box-header"
).onmousedown = dragMouseDown;
} else {
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = elmnt.offsetTop - pos2 + "px";
elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
})();
var minimized = true;
var store;
var directLine;
var token = "this_is_bot_secret";
(function() {
botInit();
})();
var usr_country = "india";
var usr_mail = "this_is_username#accenture.com";
var usr_login_id = "this_is_userloginId_unique_Across_org";
function botInit() {
var styleOptions = {
botAvatarImage: "/image/responsive/ask-adam-virtual-agent-avatar.png"
};
store = window.WebChat.createStore({}, function(_ref) {
var dispatch = _ref.dispatch;
return function(next) {
return function(action) {
if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
dispatch({
type: "WEB_CHAT/SEND_EVENT",
payload: {
name: "USER",
value: {
"COUNTRY": usr_country,
"ID": usr_login_id,
"MAIL": usr_mail,
"Service_Now": "true"
}
}
});
} else if (action.type === "DIRECT_LINE/DISCONNECT_FULFILLED") {
return;
}
return next(action);
};
};
});
directLine = window.WebChat.createDirectLine({
token: token
});
window.WebChat.renderWebChat({
directLine: directLine,
store: store,
styleOptions: styleOptions
},
document.getElementById("webchat")
);
document.querySelector("#webchat > *").focus();
}
function minimizeConversation() {
var maximizeButton = document.getElementsByClassName(
"chat-box-maximize"
)[0];
var chatBox = document.getElementsByClassName("chat-box")[0];
if (minimized) {
maximizeButton.style.display = "none";
chatBox.style.display = "flex";
minimized = false;
} else {
maximizeButton.style.display = "inline";
chatBox.style.display = "none";
minimized = true;
}
}
function restartConversation() {
minimizeConversation();
const element = document.getElementById("chat-box-container");
element.removeAttribute("style")
var messages = document.getElementsByClassName("css-1qyo5rb");
while (messages.length > 0)
messages[0].parentNode.removeChild(messages[0]);
botInit();
}
</script>

Answer 1

It doesn't look like you're specifying a user ID in the props or the token. Have a look at this documentation.
Specify a userID. There are two ways to specify the userID: in props, or in the token when generating the token call (createDirectLine()). If both methods are used to specify the userID, the token userID property will be used, and a console.warn will appear during runtime. If the userID is provided via props but is prefixed with 'dl', e.g. 'dl_1234', the value will be thrown and a new ID generated. If userID is not specified, it will default to a random user ID. Multiple users sharing the same user ID is not recommended; their user state will be shared, which creates a security risk when authenticating.