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

const chat_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
const domain = "192.168.1.111:8000";

// FUNCTION TO FETCH THE SESSION ID
async function fetchSessionID() {
    let session_id = 'Unknown';
    while (session_id === 'Unknown') {
        try {
            const response = await fetch('http://192.168.1.111:3000/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;
}


// FUNCTION TO APPEND THE TEXTAREA SCRIPT
function appendTextAreaScript(domain, chatDiv) {
    const textareaScript = document.createElement('script');
    textareaScript.type = 'text/javascript';
    textareaScript.src = `http://${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;
        });

        osichatSocket.send(JSON.stringify(eventMessage));
        form.reset();
    });
}


// FUNCTION TO HANDLE LOAD CHAT EVENT
function handleLoadChatEvent(data, osichatSocket) {
    
    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;

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

    const sendMessageContainer = document.getElementById('sendMessage');
    if (sendMessageContainer) {
        appendTextAreaScript(domain, chatDiv);
        handleFormSubmission(sendMessageContainer, 'send_message', osichatSocket);

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


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

    osichatSocket.onopen = () => {
        console.log('WebSocket connection to osichat established');
        osichatSocket.send(JSON.stringify({ 'event_type': 'load_chat', 'client_type': 'website_guest' }));
    };

    osichatSocket.onmessage = function (e) {
        const data = JSON.parse(e.data);
        switch (data.event_type) {
            case 'load_chat':
                handleLoadChatEvent(data, osichatSocket);
                break;
            case 'start_conversation':
                handleLoadChatEvent(data, osichatSocket);
                break;
            case 'send_message':
                const messagesDiv = document.getElementById('messages');
                messagesDiv.insertAdjacentHTML('beforeend', data.html);
                break;
            default:
                console.log('Unknown event type:', data.event_type);
        }
    };

    osichatSocket.onclose = () => {
        console.log('WebSocket connection to osichat closed');
    };

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

initializeChatWebSocket();