|
|
|
@ -2,42 +2,85 @@
|
|
|
|
function handleChatRoomClick(event) {
|
|
|
|
function handleChatRoomClick(event) {
|
|
|
|
const sessionId = event.currentTarget.getAttribute('data-session');
|
|
|
|
const sessionId = event.currentTarget.getAttribute('data-session');
|
|
|
|
const chatId = event.currentTarget.getAttribute('data-roomid');
|
|
|
|
const chatId = event.currentTarget.getAttribute('data-roomid');
|
|
|
|
if (sessionId && chatId) {
|
|
|
|
if (sessionId && chatId && chatId !== currentChatId) {
|
|
|
|
|
|
|
|
showLoader();
|
|
|
|
openConversation(sessionId, chatId);
|
|
|
|
openConversation(sessionId, chatId);
|
|
|
|
} else {
|
|
|
|
currentChatId = chatId;
|
|
|
|
console.error('Session ID not found for this chat room.');
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
document.querySelectorAll('.chat-room').forEach(div => {
|
|
|
|
document.querySelectorAll('.chat-room').forEach(div => {
|
|
|
|
div.addEventListener('click', handleChatRoomClick);
|
|
|
|
div.addEventListener('click', handleChatRoomClick);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
function appendTextAreaScript(domain, conversationContainer) {
|
|
|
|
|
|
|
|
if (!document.querySelector(`script[src="${protocol}://${admin_chat_domain}/static/js/osichat-admin/textarea.js"]`)) {
|
|
|
|
function markCurrentChatRead(chatid) {
|
|
|
|
|
|
|
|
const unreadElement = document.querySelector(`.unread[data-roomid='${chatid}']`);
|
|
|
|
|
|
|
|
if (unreadElement) {
|
|
|
|
|
|
|
|
unreadElement.classList.add('hidden');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// FUNCTIONS TO SHOW & HIDE THE LOADER
|
|
|
|
|
|
|
|
function showLoader() {
|
|
|
|
|
|
|
|
const roomLoader = document.getElementById('roomLoader');
|
|
|
|
|
|
|
|
if (roomLoader) {
|
|
|
|
|
|
|
|
roomLoader.classList.remove('hidden');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const widgetLeftSide = document.getElementById('widgetLeftSide');
|
|
|
|
|
|
|
|
widgetLeftSide.classList.remove('overflow-y-auto');
|
|
|
|
|
|
|
|
widgetLeftSide.classList.add('overflow-hidden');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function hideLoader() {
|
|
|
|
|
|
|
|
const roomLoader = document.getElementById('roomLoader');
|
|
|
|
|
|
|
|
if (roomLoader) {
|
|
|
|
|
|
|
|
roomLoader.classList.add('hidden');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const widgetLeftSide = document.getElementById('widgetLeftSide');
|
|
|
|
|
|
|
|
widgetLeftSide.classList.remove('overflow-hidden');
|
|
|
|
|
|
|
|
widgetLeftSide.classList.add('overflow-y-auto');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function appendTextAreaScript(conversationContainer) {
|
|
|
|
const textareaScript = document.createElement('script');
|
|
|
|
const textareaScript = document.createElement('script');
|
|
|
|
textareaScript.type = 'text/javascript';
|
|
|
|
textareaScript.type = 'text/javascript';
|
|
|
|
textareaScript.src = `${protocol}://${admin_chat_domain}/static/js/osichat-admin/textarea.js`;
|
|
|
|
textareaScript.src = `${protocol}://${admin_chat_domain}/static/js/osichat-admin/textarea.js`;
|
|
|
|
conversationContainer.appendChild(textareaScript);
|
|
|
|
conversationContainer.appendChild(textareaScript);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function scrollBottom() {
|
|
|
|
|
|
|
|
const conversationContainer = document.getElementById('messages_container');
|
|
|
|
|
|
|
|
if (conversationContainer) {
|
|
|
|
|
|
|
|
conversationContainer.scrollTo({
|
|
|
|
|
|
|
|
top: conversationContainer.scrollHeight,
|
|
|
|
|
|
|
|
behavior: 'smooth'
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function openConversation(sessionid, chatid) {
|
|
|
|
function openConversation(sessionId, chatId) {
|
|
|
|
if (osichatadminroomSocket && osichatadminroomSocket.readyState !== WebSocket.CLOSED) { //Close previous sockets
|
|
|
|
if (osichatadminroomSocket) {
|
|
|
|
osichatadminroomSocket.close();
|
|
|
|
osichatadminroomSocket.close();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
osichatadminroomSocket = new WebSocket(`${admin_chat_ws_scheme}://${admin_chat_domain}/ws/osichat-admin/${sessionid}/${chatid}/`);
|
|
|
|
|
|
|
|
|
|
|
|
osichatadminroomSocket = new WebSocket(`${admin_chat_ws_scheme}://${admin_chat_domain}/ws/osichat-admin/${sessionId}/${chatId}/`);
|
|
|
|
|
|
|
|
|
|
|
|
osichatadminroomSocket.onopen = function () {
|
|
|
|
osichatadminroomSocket.onopen = function () {
|
|
|
|
|
|
|
|
scrollBottom();
|
|
|
|
|
|
|
|
hideLoader();
|
|
|
|
|
|
|
|
markCurrentChatRead(chatId)
|
|
|
|
console.log('WebSocket connection to osichat established');
|
|
|
|
console.log('WebSocket connection to osichat established');
|
|
|
|
osichatadminroomSocket.send(JSON.stringify({ 'event_type': 'load_chat', 'client_type': 'website_admin' }));
|
|
|
|
osichatadminroomSocket.send(JSON.stringify({ 'event_type': 'load_chat', 'client_type': 'website_admin' }));
|
|
|
|
osichatadminroomSocket.send(JSON.stringify({ 'event_type': 'update_read_messages', 'user_id': userId, 'chat_state': 'open' }));
|
|
|
|
osichatadminroomSocket.send(JSON.stringify({ 'event_type': 'update_read_messages', 'user_id': userId, 'chat_state': 'open' }));
|
|
|
|
};
|
|
|
|
};
|
|
|
|
function handleLoadChatEvent(data, osichatadminroomSocket) {
|
|
|
|
|
|
|
|
|
|
|
|
function handleLoadChatEvent(data) {
|
|
|
|
let chatDiv = document.getElementById('widgetRightSide');
|
|
|
|
let chatDiv = document.getElementById('widgetRightSide');
|
|
|
|
chatDiv.innerHTML = data.html;
|
|
|
|
chatDiv.innerHTML = data.html;
|
|
|
|
appendTextAreaScript(admin_chat_domain, chatDiv);
|
|
|
|
appendTextAreaScript(chatDiv);
|
|
|
|
|
|
|
|
|
|
|
|
const sendMessageForm = document.querySelector('#sendMessage');
|
|
|
|
const sendMessageForm = document.querySelector('#sendMessage');
|
|
|
|
sendMessageForm.addEventListener('submit', function (event) {
|
|
|
|
sendMessageForm.addEventListener('submit', function (event) {
|
|
|
|
@ -60,10 +103,10 @@
|
|
|
|
const messagesDiv = document.getElementById('messages_container');
|
|
|
|
const messagesDiv = document.getElementById('messages_container');
|
|
|
|
switch (data.event_type) {
|
|
|
|
switch (data.event_type) {
|
|
|
|
case 'load_chat':
|
|
|
|
case 'load_chat':
|
|
|
|
handleLoadChatEvent(data, osichatadminroomSocket);
|
|
|
|
handleLoadChatEvent(data);
|
|
|
|
break;
|
|
|
|
break;
|
|
|
|
case 'typing':
|
|
|
|
case 'typing':
|
|
|
|
if(!typingDiv && data.user != userId){
|
|
|
|
if (!typingDiv && data.user != userId) {
|
|
|
|
messagesDiv.insertAdjacentHTML('beforeend', data.html);
|
|
|
|
messagesDiv.insertAdjacentHTML('beforeend', data.html);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
break;
|
|
|
|
@ -75,13 +118,10 @@
|
|
|
|
case 'send_message':
|
|
|
|
case 'send_message':
|
|
|
|
osichatadminroomSocket.send(JSON.stringify({ 'event_type': 'update_read_messages', 'user_id': userId, 'chat_state': 'open' }));
|
|
|
|
osichatadminroomSocket.send(JSON.stringify({ 'event_type': 'update_read_messages', 'user_id': userId, 'chat_state': 'open' }));
|
|
|
|
messagesDiv.insertAdjacentHTML('beforeend', data.html);
|
|
|
|
messagesDiv.insertAdjacentHTML('beforeend', data.html);
|
|
|
|
if (!data.user) { // If it is sent by a guest play a notification sound for the guest
|
|
|
|
if (!data.user){
|
|
|
|
const notificationSound = document.getElementById('notification-sound');
|
|
|
|
|
|
|
|
notificationSound.play();
|
|
|
|
|
|
|
|
if (typingDiv) {
|
|
|
|
if (typingDiv) {
|
|
|
|
typingDiv.remove();
|
|
|
|
typingDiv.remove();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
default:
|
|
|
|
@ -90,11 +130,26 @@
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
osichatadminroomSocket.onclose = function () {
|
|
|
|
osichatadminroomSocket.onclose = function () {
|
|
|
|
console.log('WebSocket connection to osichat closed');
|
|
|
|
console.log('WebSocket connection closed');
|
|
|
|
|
|
|
|
if (currentChatId === chatId) {
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
|
|
console.log('Attempting to reconnect to WebSocket...');
|
|
|
|
|
|
|
|
openConversation(sessionId, chatId);
|
|
|
|
|
|
|
|
}, 2000);
|
|
|
|
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
osichatadminroomSocket.onerror = function (error) {
|
|
|
|
osichatadminroomSocket.onerror = function (error) {
|
|
|
|
console.error('WebSocket error:', error);
|
|
|
|
console.error('WebSocket error:', error);
|
|
|
|
|
|
|
|
showLoader();
|
|
|
|
};
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
window.addEventListener('offline', () => {
|
|
|
|
|
|
|
|
showLoader();
|
|
|
|
|
|
|
|
if (osichatadminroomSocket) {
|
|
|
|
|
|
|
|
osichatadminroomSocket.close();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
})();
|
|
|
|
})();
|
emile
10 months ago