EVOLUTION-NINJA

Edit File: chat.js

$(document).ready(function () {
    // Load chat history from local storage
    if (localStorage.getItem("chatHistory")) {
        $("#chat-box").html(localStorage.getItem("chatHistory"));
    }

// Function to update local storage with new message
    function updateLocalStorage() {
        localStorage.setItem("chatHistory", $("#chat-box").html());
    }

// Send Text Message
    $("#send-text").click(function () {
        let message = $("#text-message").val();
        if (message) {
            let messageHtml = `<div class="message text-message">${message}</div>`;
            $("#chat-box").append(messageHtml);
            $("#text-message").val("");
            updateLocalStorage();
        }
    });

// Send Image Message
    $("#send-image").click(function () {
        let fileInput = $("#image-message")[0];
        if (fileInput.files && fileInput.files[0]) {
            let reader = new FileReader();
            reader.onload = function (e) {
                let messageHtml = `<div class="message image-message"><img src="${e.target.result}" alt="Image"></div>`;
                $("#chat-box").append(messageHtml);
                updateLocalStorage();
            };
            reader.readAsDataURL(fileInput.files[0]);
            fileInput.value = "";  // Clear the file input
        }
    });

// Send Voice Message
    $("#send-voice").click(function () {
        let fileInput = $("#voice-message")[0];
        if (fileInput.files && fileInput.files[0]) {
            let reader = new FileReader();
            reader.onload = function (e) {
                let messageHtml = `<div class="message voice-message"><audio controls><source src="${e.target.result}" type="audio/mpeg">Your browser does not support the audio element.</audio></div>`;
                $("#chat-box").append(messageHtml);
                updateLocalStorage();
            };
            reader.readAsDataURL(fileInput.files[0]);
            fileInput.value = "";  // Clear the file input
        }
    });

// Auto-scroll to the bottom of the chat box when a new message is added
    $("#chat-box").on("DOMNodeInserted", function () {
        $(this).animate({ scrollTop: this.scrollHeight }, 500);
    });
});