`
return agentLi
}
let conversationDiv = document.createElement("div");
conversationDiv.className = "direct-chat-messages"
conversationDiv.style.overflow = "hidden"
getDataAPI(`singlecustdata/${JSON.parse(localStorage.LiveChatCust)?.id}`).then((data) => {
if (data.nocustomerdatafound) {
chatBody(messageConversationFlow())
startRecording();
localStorage.removeItem("LiveChatCust")
return false
}
addButtonScript(data.livechatcust);
if (data.livechatcust.maintenance == 'on') {
return;
}
// To modify the size of the Live Chat icon.
if (data.livechatcust.livechatIconSize == "large") {
popupButton.classList.add("chat-popup-lg")
if (bodyElement.querySelector('.chat-popup-list')) {
bodyElement.querySelector('.chat-popup-list').classList.add('chat-popup-list-lg')
}
} else {
popupButton.classList.remove("chat-popup-lg")
if (bodyElement.querySelector('.chat-popup-list')) {
bodyElement.querySelector('.chat-popup-list').classList.remove('chat-popup-list-lg')
}
}
if (document.documentElement.getAttribute('dir') == 'rtl') {
chatMessagePopup.setAttribute('dir', 'ltr');
popupButton.setAttribute('dir', 'ltr');
}
// To Change the live Chat Position
if (data.livechatcust.livechatPosition == "left") {
mainLiveChatDiv.setAttribute('appearance', 'left');
appearance = "left";
chatMessagePopup.setAttribute('appearance', appearance)
popupButton.setAttribute('appearance', appearance)
chatMessagePopup.classList.add("chat-message-popup-right")
popupButton.classList.add("chat-popup-right")
} else {
mainLiveChatDiv.setAttribute('appearance', 'right');
appearance = "right";
chatMessagePopup.setAttribute('appearance', appearance)
popupButton.setAttribute('appearance', appearance)
chatMessagePopup.classList.remove("chat-message-popup-right")
popupButton.classList.remove("chat-popup-right")
}
if (bodyElement.querySelector('.chat-popup-list')) {
bodyElement.querySelector('.chat-popup-list').setAttribute('appearance', appearance)
}
if (data.livechatcust.banstatus == 'banned' && data.livechatcust.login_ip == localStorage.getItem('presentChatIp')) {
return
}else{
popupButton.classList.remove("d-none")
}
popupButton.style.setProperty('--primary', data.livechatcust.livechatthemecolor);
popupButton.style.setProperty('--secondary', data.livechatcust.livechatmessagecolor);
if (data.livechatcust.chaticonimage) {
popupButton.style.backgroundImage = `url(${data.livechatcust.chaticonimage})`;
if (bodyElement.querySelector('.feather.feather-message-square')) {
bodyElement.querySelector('.feather.feather-message-square').remove();
}
if (bodyElement.querySelector('.close-icon')) {
bodyElement.querySelector('.close-icon').remove();
}
}
if (data.livechatcust.chatheaderimage) {
bodyElement.querySelector('.popup-head').style.backgroundImage = `url(${data.livechatcust.chatheaderimage})`;
} else {
bodyElement.querySelector('.popup-head').style.backgroundImage = ``;
}
if (data.livechatcust.chaticondraggableswitch == 'on') {
popupButton.style.setProperty('cursor', 'grabbing')
dragElement(popupButton);
}
bodyElement.querySelector(".chat-icon-text").classList.remove('d-none');
bodyElement.querySelector(".chat-icon-text").innerText = data.livechatcust.beforechatshowdata;
if (bodyElement.querySelector(".livechatpopuptitle")) {
bodyElement.querySelector(".livechatpopuptitle").innerText = data?.livechatcust?.livechatpopuptitle;
}
if (bodyElement.querySelector(".livechatpopupsubtitle")) {
bodyElement.querySelector(".livechatpopupsubtitle").innerText = data?.livechatcust?.livechatpopupsubtitle;
}
chatMessagePopup.style.setProperty('--primary', data.livechatcust.livechatthemecolor);
chatMessagePopup.style.setProperty('--secondary', data.livechatcust.livechatmessagecolor);
// To add the FeedBack Click Event
if (data.livechatcust.engage_conversation && JSON.parse(data.livechatcust.engage_conversation).length) {
chatMessagePopup.querySelector(".feedBackBtn").classList.remove("d-none")
chatMessagePopup.querySelector(".feedBackBtn").onclick = () => {
chatMessagePopup.classList.add("rating-section-body")
feedBackForm(data.livechatcust.livechatFeedbackDropdown, data.livechatdata, data.livechatcust.LivechatCustFeedbackQuestion)
}
}
// For the Chat Flow Created Date
let currentDate = null;
// For the Chat Flow Messages
if (data.livechatcust.chat_flow_messages) {
const messageDate = formatDateString(data.livechatcust.created_at);
conversationDiv.innerHTML += `
${messageDate}
`;
currentDate = messageDate;
JSON.parse(data.livechatcust.chat_flow_messages).map((flowMes) => {
let updatedFlowMes = flowMes
updatedFlowMes.created_at = data.livechatcust.created_at
if (flowMes.authMessage == "agent") {
conversationDiv.appendChild(AgentMessage(updatedFlowMes))
} else {
conversationDiv.appendChild(customerMessage(updatedFlowMes))
}
})
}
let unreadIndexNumber = 0
// For the Messages append
data.livechatdata.map((chatdata) => {
const messageDate = formatDateString(chatdata.created_at);
if (messageDate !== currentDate) {
conversationDiv.innerHTML += `
${messageDate}
`;
// For the date of the Chat
currentDate = messageDate;
} {
if (!chatdata.livechat_cust_id && chatdata.status != "comment") {
conversationDiv.appendChild(AgentMessage(chatdata))
} else {
if (chatdata.status != "comment") {
conversationDiv.appendChild(customerMessage(chatdata))
}
}
}
// To get the get the unread index number
if (chatdata.livechat_user_id && chatdata.status != "comment" && chatdata.status != "seen") {
unreadIndexNumber = unreadIndexNumber + 1
}
})
// To add the Unread Index Number
if (unreadIndexNumber) {
popupButton.querySelector('.unreadIndexNumberPopup').innerText = unreadIndexNumber
popupButton.querySelector('.unreadIndexNumberPopup').classList.remove('d-none')
if (popupList.querySelector('.unreadIndexNumberPopup')) {
popupList.querySelector('.unreadIndexNumberPopup').innerText = unreadIndexNumber
popupList.querySelector('.unreadIndexNumberPopup').classList.remove('d-none')
}
}
// To show the LiveChat include Users informaction
if (data.livechatcust.engage_conversation) {
let livechatInfo = document.createElement('div')
livechatInfo.innerHTML = `
`
let onlineUserNames = [];
JSON.parse(data.livechatcust.engage_conversation).map((user, index) => {
let userSpan = document.createElement('span')
userSpan.className = `avatar avatar-sm brround`
userSpan.setAttribute('data-bs-toggle', 'tooltip');
userSpan.setAttribute('data-bs-custom-class', 'livechat-tooltip');
userSpan.setAttribute('data-bs-placement', 'top');
userSpan.setAttribute('data-bs-title', `${user.name}`);
userSpan.style.backgroundImage = `url('${user.profileimage}')`
if (index + 1 <= 2) {
livechatInfo.querySelector(".avatar-list-stacked").appendChild(userSpan)
}
onlineUserNames.push(user.name)
})
if (JSON.parse(data.livechatcust.engage_conversation).length > 2) {
let userSpan = document.createElement('span')
userSpan.className = `avatar brround`
userSpan.setAttribute('data-bs-toggle', 'tooltip');
userSpan.setAttribute('data-bs-custom-class', 'livechat-tooltip');
userSpan.setAttribute('data-bs-placement', 'top');
userSpan.setAttribute('data-bs-title', `${data.livechatcust.LivechatCustWelcomeMsg}`);
userSpan.innerHTML = `+${JSON.parse(data.livechatcust.engage_conversation).length - 2}`
livechatInfo.querySelector(".avatar-list-stacked").appendChild(userSpan)
}
let span = document.createElement('span');
span.classList.add('className');
span.textContent = data.livechatcust?.LivechatCustWelcomeMsg;
livechatInfo.querySelector(".main-avatar").appendChild(span)
if (bodyElement.querySelector(".before-chatstart")) {
if (bodyElement.querySelector(".onlineorofflinediv")) {
bodyElement.querySelector(".onlineorofflinediv").remove()
}
bodyElement.querySelector(".before-chatstart").innerHTML = livechatInfo.innerHTML
}
}
// For No One joined At the time to show the online users info
if (!JSON.parse(data.livechatcust.engage_conversation).length && data.livechatcust.onlineUsers && JSON.parse(data.livechatcust.onlineUsers).length) {
let livechatInfo = document.createElement('div')
livechatInfo.innerHTML = `
`
let onlineUserNames = []
JSON.parse(data.livechatcust.onlineUsers).map((user, index) => {
let userSpan = document.createElement('span')
userSpan.className = `avatar brround`
userSpan.className = `avatar brround`
userSpan.setAttribute('data-bs-toggle', 'tooltip');
userSpan.setAttribute('data-bs-custom-class', 'livechat-tooltip');
userSpan.setAttribute('data-bs-placement', 'top');
userSpan.setAttribute('data-bs-title', `${user.name}`);
userSpan.style.backgroundImage = `url('${user.profileurl}')`
if (index + 1 <= 2) {
let onlineSpan = document.createElement('span')
onlineSpan.className = "avatar-status bg-green"
userSpan.appendChild(onlineSpan)
livechatInfo.querySelector(".avatar-list-stacked").appendChild(userSpan)
}
onlineUserNames.push(user.name)
})
if (JSON.parse(data.livechatcust.onlineUsers).length > 2) {
let userSpan = document.createElement('span')
userSpan.className = `avatar brround`
userSpan.setAttribute('data-bs-toggle', 'tooltip');
userSpan.setAttribute('data-bs-custom-class', 'livechat-tooltip');
userSpan.setAttribute('data-bs-placement', 'top');
userSpan.setAttribute('data-bs-title', `${data.livechatcust.LivechatCustWelcomeMsg}`);
userSpan.innerHTML = `+${JSON.parse(data.livechatcust.onlineUsers).length - 2}`
livechatInfo.querySelector(".avatar-list-stacked").appendChild(userSpan)
}
let span = document.createElement('span');
span.classList.add('className');
span.classList.add('fs-5');
span.classList.add('ms-2');
span.textContent = data.livechatcust?.LivechatCustWelcomeMsg;
livechatInfo.querySelector(".main-avatar").appendChild(span)
if (bodyElement.querySelector(".before-chatstart")) {
if (bodyElement.querySelector(".onlineorofflinediv")) {
bodyElement.querySelector(".onlineorofflinediv").remove()
}
bodyElement.querySelector(".before-chatstart").innerHTML = livechatInfo.innerHTML
}
}
else if (JSON.parse(data.livechatcust.engage_conversation).length && data.livechatcust.onlineUsers && JSON.parse(data.livechatcust.onlineUsers).length) {
// where there was an engage agent
let livechatInfo = document.createElement('div')
livechatInfo.innerHTML = `
`
bodyElement.querySelector(".popup-messages")?.appendChild(agentLi);
// For the Option buttons
let liveChatOptionBtn = document.createElement("div")
liveChatOptionBtn.className = "d-flex flex-wrap liveChatOptionBtn"
// connections node Loop
if (data.outputs.text && data.outputs.text.connections.length > 0) {
data.outputs.text.connections.map((connection) => {
const connectedNodeData = flowChatData[connection.node];
if (connectedNodeData && connectedNodeData.data && connectedNodeData.data.text) {
AgentMessage(connectedNodeData);
}
});
}
// Process action connections (next options or actions)
if (data.outputs.act && data.outputs.act.connections.length > 0) {
data.outputs.act.connections.forEach((connection) => {
const optionNodeData = flowChatData[connection.node];
if (optionNodeData && optionNodeData.data && optionNodeData.data.optionName) {
let optionNode = document.createElement("button");
optionNode.className = "btn btn-outline-primary m-1 shadow-none";
optionNode.textContent = optionNodeData.data.optionName;
// Check if there are connections to follow before processing
if (hasConnections(optionNodeData)) {
optionNode.onclick = () => processOption(optionNodeData);
} else {
optionNode.disabled = true;
}
liveChatOptionBtn.appendChild(optionNode);
} else {
console.error("Option node data is missing or invalid:", connection.node);
}
});
}
// Append options if any
if (liveChatOptionBtn.children.length > 0) {
if (bodyElement.querySelector('.popup-messages')) {
bodyElement.querySelector('.popup-messages').appendChild(liveChatOptionBtn);
}
}
}
// Check if the node has any further connections
function hasConnections(nodeData) {
return nodeData.inputs && (nodeData.inputs.text.connections.length > 0 || nodeData.inputs.act.connections.length > 0);
}
// function createLoader(){
// let typeIndicator = document.createElement('div')
// typeIndicator.className = 'typing-indicator';
// typeIndicator.innerHTML = ``;
// }
function processOption(optionNodeData) {
let existingOptions = bodyElement.querySelector(".liveChatOptionBtn");
if (existingOptions) existingOptions.remove();
let typeIndicator = document.createElement('div')
typeIndicator.className = 'typing-indicator';
typeIndicator.innerHTML = `
`
bodyElement.querySelector('.popup-messages').appendChild(customerMessage(optionNodeData));
bodyElement.querySelector('.popup-messages').appendChild(typeIndicator);
bodyElement.querySelector(".popup-messages").scrollBy(0, bodyElement.querySelector(".popup-messages").scrollHeight)
let delay = 1000;
// Removing existing typing indicator before starting the loop
// setTimeout(() => {
// typeIndicator.classList.add('d-none')
// }, delay);
['text', 'act'].forEach(inputType => {
let typeIndicator = document.createElement('div')
typeIndicator.className = 'typing-indicator';
typeIndicator.innerHTML = `
`
if (optionNodeData.inputs[inputType] && optionNodeData.inputs[inputType].connections.length > 0) {
optionNodeData.inputs[inputType].connections.forEach((nextConnection, index) => {
// Delay each message by incrementally increasing the timeout
setTimeout(() => {
let nextNode = flowChatData[nextConnection.node];
AgentMessage(nextNode);
bodyElement.querySelector('.popup-messages .typing-indicator')?.remove();
// Scroll to the bottom of the messages container after each message is added
// if(index < 2){
// createLoader();
// }
bodyElement.querySelector(".popup-messages").scrollBy(0, bodyElement.querySelector(".popup-messages").scrollHeight);
}, delay * (index + 1) + 200); // Incrementing the delay based on the index
});
}
});
// setTimeout(() => {
// ['text', 'act'].forEach(inputType => {
// console.log(optionNodeData.inputs[inputType].connections);
// if (optionNodeData.inputs[inputType] && optionNodeData.inputs[inputType].connections.length > 0) {
// optionNodeData.inputs[inputType].connections.forEach((nextConnection) => {
// let nextNode = flowChatData[nextConnection.node];
// AgentMessage(nextNode);
// });
// }
// });
// bodyElement.querySelector('.popup-messages .typing-indicator')?.remove();
// bodyElement.querySelector(".popup-messages").scrollBy(0, bodyElement.querySelector(".popup-messages").scrollHeight)
// }, 1000);
}
// Customer div
let customerMessage = (data) => {
let custLi = document.createElement("div");
custLi.className = "direct-chat-msg right"
custLi.innerHTML = `
${data.data.optionName}
`
return custLi
}
function sanitizeHTML(input) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'/': '/', // For forward slash
'`': '`', // Backtick
'=': '=' // Equals
};
return input.replace(/[&<>"'/`=]/g, function (char) {
return map[char];
});
}
sendMessage = () => {
if (bodyElement.querySelector("#status_message").textContent.length) {
// For the Making Chat Flow Message Array
bodyElement.querySelectorAll(".popup-messages .direct-chat-msg").forEach((element) => {
if (element.classList.contains('right')) {
FlowChatConversation.push({
authMessage: 'cust',
message: element.querySelector(".direct-chat-text").innerText
})
} else {
FlowChatConversation.push({
authMessage: 'agent',
message: element.querySelector(".direct-chat-text").innerText
})
}
})
// To open The welcome Form
chatBody(welcomeForm(sanitizeHTML(bodyElement.querySelector("#status_message").textContent), OfflineMessagePermission))
bodyElement.querySelector('.popup-minimize-normal-fields')?.addEventListener('click', function () {
const targetElement = bodyElement.querySelector('.popup-fields');
if (targetElement) {
targetElement.classList.add('d-none');
chatBody(messageConversationFlow());
startRecording();
}
});
}
}
// Enter Message Send Function
handleKeyDown = (ele) => {
if (ele.key === 'Enter' && !ele.shiftKey) {
ele.preventDefault();
sendMessage()
}
}
// setTimeout(() => {
// bodyElement.querySelector('.liveChatFileUpload').onclick = () => {
// bodyElement.querySelector('#chat-file-upload').click();
// optionGridShow()
// }
// }, 1000);
return (`
`)
}
// To add the Flow Message After the 24 Hours
const basedOnTimeMessageConversationFlow = () => {
let flowChatElement = document.createElement("div")
flowChatElement.className = "basedOnTimeMessageConversationFlowDiv"
let flowChatData
// Getting the chat Flow data
getDataAPI(`flow/null`).then((data) => {
if (data.success) {
flowChatData = JSON.parse(data.success.liveChatFlow).nodes
// To shoe the first Welcome Message
if (JSON.parse(data.success.liveChatFlow).nodes['1'].name == "Welcome Message") {
AgentMessage(JSON.parse(data.success.liveChatFlow).nodes['1'])
}
}
})
// Agent Message div
let AgentMessage = (data) => {
// For the message div
let agentLi = document.createElement("div");
agentLi.className = "direct-chat-msg"
agentLi.innerHTML = `
${data.data.text}
`
// To send the Welcome Message as a message
let welcomeMessagedata = {
message: data.data.text,
username: liveChatCust.username,
id: liveChatCust.id,
customerId: liveChatCust.id,
messageType: "welcomeMessage"
}
postDataAPI(welcomeMessagedata, 'broadcast-message')
// For the Option buttons
let liveChatOptionBtn = document.createElement("div")
liveChatOptionBtn.className = "d-flex flex-wrap liveChatOptionBtn"
let typeIndicator = document.createElement('div')
typeIndicator.className = 'typing-indicator';
typeIndicator.innerHTML = `
`
// connections node Loop
data.outputs.act.connections.map((connectedNode) => {
let optionNode = document.createElement("div")
optionNode.onclick = () => {
// To remove the Options
bodyElement.querySelector(".liveChatOptionBtn").remove()
// Append the selected option as a customer message
bodyElement.querySelector(".basedOnTimeMessageConversationFlowDiv").appendChild(customerMessage(flowChatData[connectedNode.node]))
bodyElement.querySelector('.basedOnTimeMessageConversationFlowDiv').appendChild(typeIndicator)
// To send the Welcome Message as a message
let welcomeMessagedata = {
message: flowChatData[connectedNode.node].data.optionName,
username: liveChatCust.username,
id: liveChatCust.id,
customerId: liveChatCust.id,
}
setTimeout(() => {
postDataAPI(welcomeMessagedata, 'broadcast-message').then((ele) => {
// to loop the messages and options
if (flowChatData[connectedNode.node].inputs.text.connections[0]) {
AgentMessage(flowChatData[flowChatData[connectedNode.node].inputs.text.connections[0].node])
}
bodyElement.querySelector('.basedOnTimeMessageConversationFlowDiv .typing-indicator')?.remove();
})
}, 1000);
}
optionNode.innerHTML = `
`
liveChatOptionBtn.appendChild(optionNode)
bodyElement.querySelector('.basedOnTimeMessageConversationFlowDiv .typing-indicator')?.remove();
})
// For the Message
flowChatElement.appendChild(agentLi);
// For the Options
flowChatElement.appendChild(liveChatOptionBtn);
}
// Customer div
let customerMessage = (data) => {
let custLi = document.createElement("div");
custLi.className = "direct-chat-msg right"
custLi.innerHTML = `
${data.data.optionName}
`
return custLi
}
return flowChatElement
}
// For the Offline Message Indication
const OfflineMessageIndication = (message) => {
let offlineChatElement = document.createElement("div")
offlineChatElement.className = "direct-chat-msg"
// For the Corrent Time
function getCurrentTime() {
const currentDate = new Date();
let hours = currentDate.getHours();
let minutes = currentDate.getMinutes();
const ampm = hours >= 12 ? 'PM' : 'AM';
// Convert hours to 12-hour format
hours = hours % 12 || 12;
// Add leading zero to minutes if necessary
minutes = minutes < 10 ? '0' + minutes : minutes;
const currentTime = hours + ':' + minutes + ampm;
return currentTime;
}
// To post The Message
let welcomeMessagedata = {
message: message,
username: liveChatCust.username,
id: liveChatCust.id,
customerId: liveChatCust.id,
messageType: "welcomeMessage"
}
postDataAPI(welcomeMessagedata, 'broadcast-message')
offlineChatElement.innerHTML = `
`
// To Open Image In the new Tab
if (custMessage.querySelector("img")) {
custMessage.querySelector("img").onclick = () => {
window.open(custMessage.querySelector("img").getAttribute('imagesrc'));
}
}
directChatMessages?.appendChild(custMessage)
// To Scroll Down the Conversation
bodyElement.querySelector(".popup-messages")?.scrollBy(0, bodyElement.querySelector(".popup-messages").scrollHeight)
}
}
// For the Typing induction
if (!socket.message && socket.agentInfo && socket.customerId == liveChatCust?.id && socket.typingMessage) {
// To remove the Typing induction
if (bodyElement.querySelector("#typingIndication")) {
bodyElement.querySelector("#typingIndication").remove()
}
let directChatMessages = bodyElement.querySelector(".direct-chat-messages")
let custMessage = document.createElement("div");
custMessage.id = "typingIndication"
custMessage.className = "direct-chat-msg"
custMessage.innerHTML = `
Typing....
`
directChatMessages.appendChild(custMessage)
// To Scroll Down the Conversation
bodyElement.querySelector(".popup-messages").scrollBy(0, bodyElement.querySelector(".popup-messages").scrollHeight)
clearTimeout(debouncing2);
debouncing2 = setTimeout(function () {
if (bodyElement.querySelector("#typingIndication")) {
bodyElement.querySelector("#typingIndication").remove()
}
}, 5000);
}
pauseAudios();
})
};
bodyElement.appendChild(script);
}
bodyElement.appendChild(link);
// To add the Main Live Chat Div
document.body.appendChild(mainLiveChatDiv);
