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 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 initialize WebSocket 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');
        const eventMessage = {
            'event_type': 'load_chat',
        };
        osichatSocket.send(JSON.stringify(eventMessage));
    };

    osichatSocket.onmessage = function (e) {
        const data = JSON.parse(e.data);
        if (data.event_type === 'load_chat') {
            const chatDiv = document.getElementById('osichat');
            const html = data.html;
            chatDiv.innerHTML = html;

            // Append the toggle tag
            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 this container exists then the template returned was start-conversation.html, no conversation yet.
            if (startChatContainer) {
                startChatContainer.addEventListener('submit', function (event) {
                    event.preventDefault();

                    const guestName = event.target.elements.guest_name.value;
                    const guestMobileNumber = event.target.elements.guest_mobile_number.value;

                    const eventMessage = {
                        'event_type': 'start_conversation',
                        'guest_name': guestName,
                        'guest_mobile_number': guestMobileNumber,
                    };

                    osichatSocket.send(JSON.stringify(eventMessage));

                    event.target.reset();
                });
            }

            const sendMessageContainer = document.getElementById('sendMessage');

            if (sendMessageContainer) {
                const textareaScript = document.createElement('script');
                textareaScript.type = 'text/javascript';
                textareaScript.src = `http://${domain}/static/js/osichat/textarea.js`;
                chatDiv.appendChild(textareaScript);

                sendMessageContainer.addEventListener('submit', function (event) {
                    event.preventDefault();

                    const message = event.target.elements.message.value;

                    const eventMessage = {
                        'event_type': 'send_message',
                        'message': message,
                    };

                    osichatSocket.send(JSON.stringify(eventMessage));

                    event.target.reset();
                });
            }

        } else if (data.event_type === 'start_conversation') {
            const chatDiv = document.getElementById('osichat');
            const html = data.html;
            chatDiv.innerHTML = html;
            const textareaScript = document.createElement('script');
            textareaScript.type = 'text/javascript';
            textareaScript.src = `http://${domain}/static/js/osichat/textarea.js`;
            chatDiv.appendChild(textareaScript);
            const sendMessageContainer = document.getElementById('sendMessage');
            sendMessageContainer.addEventListener('submit', function (event) {
                event.preventDefault();

                const message = event.target.elements.message.value;

                const eventMessage = {
                    'event_type': 'send_message',
                    'message': message,
                };

                osichatSocket.send(JSON.stringify(eventMessage));

                event.target.reset();
            });

            

        } else if (data.event_type === 'send_message') {
            const messagesDiv = document.getElementById('messages');
            const html = data.html;
            messagesDiv.insertAdjacentHTML('beforeend', html);
        }
    };

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

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

initializeChatWebSocket();