newosinadjango/osinaweb/static/js/osichat/conversation.js

const chat_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
const domain = "osina.ositcom.com";
let osichatSocket;
let isOpen = false;
let chatLoaded = false;


function scrollBottom() {
    const conversationContainer = document.getElementById('conversation');
    if (conversationContainer) {
        conversationContainer.scrollTop = conversationContainer.scrollHeight;
    }
}


// FUNCTION TO FETCH THE SESSION ID
async function fetchSessionID() {
    let session_id = 'Unknown';
    while (session_id === 'Unknown') {
        try {
            const response = await fetch('https://ositcom.com/get-client-session/');
            const data = await response.json();
            if (data.session_id) {
                session_id = data.session_id;
            }
        } catch (error) {
            console.error('Error fetching session ID:', error);
        }
    }
    return session_id;
}

// FUNCTIONS TO SHOW & HIDE THE LOADER
function showLoader() {
    const osichatLoader = document.getElementById('osichatLoader');
    if (osichatLoader) {
        osichatLoader.classList.remove('hidden');
    }
}

function hideLoader() {
    const osichatLoader = document.getElementById('osichatLoader');
    if (osichatLoader) {
        osichatLoader.classList.add('hidden');
    }
}

// FUNCTION TO APPEND THE TEXTAREA SCRIPT
function appendTextAreaScript(domain, chatDiv) {
    const textareaScript = document.createElement('script');
    textareaScript.type = 'text/javascript';
    textareaScript.src = `https://${domain}/static/js/osichat/textarea.js`;
    chatDiv.appendChild(textareaScript);
}

// FUNCTION TO HANDLE FORM SUBMISSION
function handleFormSubmission(form, eventType, osichatSocket) {
    form.addEventListener('submit', function (event) {
        event.preventDefault();

        const formData = new FormData(form);
        const eventMessage = { 'event_type': eventType };

        formData.forEach((value, key) => {
            eventMessage[key] = value;
        });
        if (eventType === 'start_conversation') {
            showLoader(); 
        }
        osichatSocket.send(JSON.stringify(eventMessage));
        form.reset();
    });
}

// FUNCTION TO HANDLE LOAD CHAT EVENT
function handleLoadChatEvent(data, osichatSocket) {
    chatLoaded = true;
    hideLoader();
    let chatDiv = document.getElementById('roomContainer'); // CASE WHERE WIDGET IS ALREADY LOADED, DISPLAY THE CHAT PAGES(START/CONVERSATION) IN ROOM CONTAINER
    if (!chatDiv) {
        chatDiv = document.getElementById('osichat'); // CASE WHERE WIDGET IS NOT LOADED, DISPLAY THE WHOLE CHATWIDGET IN OSICHAT
    }

    chatDiv.innerHTML = data.html;
    scrollBottom();

    if (isOpen) { // If chat widget isOpen (declared in chat-toggle.js) mark all messages as read by guest else just return number of unread messages
        osichatSocket.send(JSON.stringify({ 'event_type': 'update_read_messages', 'chat_state': 'open' }));
    } else {
        osichatSocket.send(JSON.stringify({ 'event_type': 'update_read_messages', 'chat_state': 'closed' }));
    }


    if (!document.querySelector('script[src="https://' + domain + '/static/js/osichat/chat-toggle.js"]')) {
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = `https://${domain}/static/js/osichat/chat-toggle.js`;
        chatDiv.appendChild(script);
    }
    
    const startChatContainer = document.getElementById('startChat'); //Case where returned is start-conversation.html
    if (startChatContainer) {
        handleFormSubmission(startChatContainer, 'start_conversation', osichatSocket);
    }

    const sendMessageContainer = document.getElementById('sendMessage'); //Case where returned is chat-room.html
    if (sendMessageContainer) {
        appendTextAreaScript(domain, chatDiv);
        handleFormSubmission(sendMessageContainer, 'send_message', osichatSocket);

        const uploadScript = document.createElement('script');
        uploadScript.type = 'text/javascript';
        uploadScript.src = `https://${domain}/static/js/osichat/upload-file.js`;
        chatDiv.appendChild(uploadScript);

        const endChatScript = document.createElement('script');
        endChatScript.type = 'text/javascript';
        endChatScript.src = `https://${domain}/static/js/osichat/end-chat.js`;
        chatDiv.appendChild(endChatScript);

        const endChatButton = document.getElementById('endChat');
        endChatButton.classList.remove('hidden')
    }

    const sendReviewContainer = document.getElementById('reviewContainer');  //Case where returned is ended-chat.html
    if (sendReviewContainer) {
        const sendReviewScript = document.createElement('script');
        sendReviewScript.type = 'text/javascript';
        sendReviewScript.src = `https://${domain}/static/js/osichat/send-review.js`;
        chatDiv.appendChild(sendReviewScript);
    }
}


// FUNCTION TO INITIALIZE WEB SOCKET CONNECTION
async function initializeChatWebSocket() {
    const session_id = await fetchSessionID();
    let osichatSocketUrl = `${chat_ws_scheme}://${domain}/ws/osichat/${session_id}/`;
    osichatSocket = new WebSocket(osichatSocketUrl);

    osichatSocket.onopen = () => {
        if(!chatLoaded){
            osichatSocket.send(JSON.stringify({ 'event_type': 'load_chat', 'client_type': 'website_guest', 'reconnecting': 'False'}));
        }else{
            osichatSocket.send(JSON.stringify({ 'event_type': 'load_chat', 'client_type': 'website_guest', 'reconnecting': 'True'}));
        }
    };

    osichatSocket.onmessage = function (e) {
        const data = JSON.parse(e.data);
        const typingDiv = document.getElementById('typing');
        switch (data.event_type) {
            case 'load_chat':
                handleLoadChatEvent(data, osichatSocket);
                break;
            case 'start_conversation':
                handleLoadChatEvent(data, osichatSocket);
                break;
            case 'typing': 
                typingDiv.classList.remove('hidden');
                typingDiv.innerHTML = data.html;
                break;
            case 'stopped_typing':
                typingDiv.classList.add('hidden');
                break;
            case 'send_message':
                if (isOpen) { // If chat widget isOpen (declared in chat-toggle.js) mark all messages as read by guest else just return number of unread messages
                    osichatSocket.send(JSON.stringify({ 'event_type': 'update_read_messages', 'chat_state': 'open' }));
                } else {
                    osichatSocket.send(JSON.stringify({ 'event_type': 'update_read_messages', 'chat_state': 'closed' }));
                }
                const messagesDiv = document.getElementById('messages');
                messagesDiv.insertAdjacentHTML('beforeend', data.html);
                if (data.user) { // If it is sent by an Osina user play a notification sound for the guest
                    const notificationSound = document.getElementById('notification-sound');
                    notificationSound.play();
                }
                break;
            case 'uploaded_file':
                if (isOpen) { 
                    osichatSocket.send(JSON.stringify({ 'event_type': 'update_read_messages', 'chat_state': 'open' }));
                } else {
                    osichatSocket.send(JSON.stringify({ 'event_type': 'update_read_messages', 'chat_state': 'closed' }));
                }
                const uploadingDiv = document.getElementById(`uploading-${data.file_name}`);
                if (uploadingDiv) {
                    uploadingDiv.outerHTML = data.html;
                    scrollBottom();
                }
                else{
                    document.getElementById('messages').insertAdjacentHTML('beforeend', data.html);
                    scrollBottom();
                }
                if (data.user) { // If it is sent by an Osina user play a notification sound for the guest
                    const notificationSound = document.getElementById('notification-sound');
                    notificationSound.play();
                }
                break;
            case 'update_read_messages':  
                const unreadMessages = document.getElementById(`unreadMessages`);
                if (!isOpen) {   
                    unreadMessages.classList.remove('hidden');
                    unreadMessages.innerHTML = data.html;
                    const script = document.createElement('script');
                    script.src = `https://${domain}/static/js/osichat/chat-toggle.js`; 
                    document.body.appendChild(script);
                } else {
                    unreadMessages.classList.add('hidden');
                }
                break;
            case 'ended_chat':
                const currentChat = document.getElementById(`roomContainer`);
                if (currentChat) {
                    currentChat.innerHTML = data.html;
                    scrollBottom();
                }
                document.getElementById(`endChatConfirmationContainer`).classList.add('hidden');
                document.getElementById(`endChat`).classList.add('hidden');
                const sendReviewScript = document.createElement('script');
                sendReviewScript.type = 'text/javascript';
                sendReviewScript.src = `https://${domain}/static/js/osichat/send-review.js`;
                currentChat.appendChild(sendReviewScript);
                break;
            case 'submit_review':
                const submitReview = document.getElementById(`reviewContainer`);
                if (submitReview) {
                    submitReview.innerHTML = data.html;
                }
                const reviewScript = document.createElement('script');
                reviewScript.type = 'text/javascript';
                reviewScript.src = `https://${domain}/static/js/osichat/send-review.js`;
                submitReview.appendChild(reviewScript);
                break;
            default:
                console.log('Unknown event type:', data.event_type);
        }
    };

    osichatSocket.onclose = () => {
        console.log('WebSocket connection to osichat closed');
        showLoader();
        setTimeout(() => {
            console.log('Attempting to reconnect to WebSocket...');
            initializeChatWebSocket();
        }, 2000);
    };

    osichatSocket.onerror = (error) => {
        console.log('WebSocket error:', error);
        showLoader();
    };
}


window.addEventListener('offline', () => {
    showLoader();
    if (osichatSocket) {
        osichatSocket.close();
    }
});

// INITIALIZE CHAT WEB SOCKET
initializeChatWebSocket();