chat.js

// Collapsible
var coll = document.getElementsByClassName("collapsible");

for (let i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function () {
        this.classList.toggle("active");

        var content = this.nextElementSibling;

        if (content.style.maxHeight) {
            content.style.maxHeight = null;
        } else {
            content.style.maxHeight = content.scrollHeight + "px";
        }

    });
}

function getTime() {
    let today = new Date();
    hours = today.getHours();
    minutes = today.getMinutes();

    if (hours < 10) {
        hours = "0" + hours;
    }

    if (minutes < 10) {
        minutes = "0" + minutes;
    }

    let time = hours + ":" + minutes;
    return time;
}

// Gets the first message
function firstBotMessage() {
    let firstMessage = "Hello, ada yang bisa saya bantu?"
    document.getElementById("botStarterMessage").innerHTML = '<p class="botText"><span>' + firstMessage + '</span></p>';

    let time = getTime();

    $("#chat-timestamp").append(time);
    document.getElementById("userInput").scrollIntoView(false);
}

firstBotMessage();

// Retrieves the response
function getHardResponse(userText) {
    if (userText == "❤️") {
        let botHtml = '<p class="botText"><span>' + "❤️" + '</span></p>';
        $("#chatbox").append(botHtml);
    } else {
        botResponses = getBotResponse(userText);
        let botResponseBERT = botResponses[0];
        let botResponseLSTM = botResponses[1];
        let botResponseBot = botResponses[2];
        const str = botResponseBot.replace("\\n", "");
        let botHtmlBERT = '<p class="botText"><span>' + "BERT: " + botResponseBERT + '</span></p>';
        $("#chatbox").append(botHtmlBERT);
    
        let botHtmlLSTM = '<p class="botText"><span>' + "LSTM: " + botResponseLSTM + '</span></p>';
        $("#chatbox").append(botHtmlLSTM);
        
        let split = str.split("<br>")
        for (i=0 ; i<split.length; i++){
            let botHtmlResponse = '<p class="botText"><span>' + "Response: " + split[i] + '</span></p>';
            $("#chatbox").append(botHtmlResponse);
        }
        responseFrom = botHtmlBERT
        if(botHtmlBERT == "Maaf, saya tidak mengerti dengan apa yang anda katakan."){
            responseFrom = botHtmlLSTM
            if (responseFrom == "Maaf, saya tidak mengerti dengan apa yang anda katakan."){
                let botHtmlResponse = '<p class="botText"><span>' + "Response: " + botHtmlBERT + '</span></p>';
                $("#chatbox").append(botHtmlResponse);
            }
        }
        else if (botResponseBERT.includes("pertemuan")){
            if (botResponseBot.includes("untuk membuat jadwal pertemuan")) {
                let botForm = '<p class="botText"><span>' + "Formulir Pertemuan" + '<br>' + "nama klien:" + '<br>' + "tanggal_pertemuan:"+ '<br>' + "jam:" + '<br>'+ "agenda_pertemuan:" + '<br>' + "no_handphone:" + '</span></p>';
                $("#chatbox").append(botForm);
            }
            else if (botResponseBot.includes("untuk membatalkan jadwal pertemuan")) {
                let botForm = '<p class="botText"><span>' + "Formulir Pembatalan Pertemuan" + '<br>' + "id_pertemuan:" + '<br>' + "nama klien:"+ '<br>' + "alasan_pembatalan:" + '</span></p>';
                $("#chatbox").append(botForm);
            }
            else if (botResponseBot.includes("untuk mengubah jadwal pertemuan")) {
                let botForm = '<p class="botText"><span>' + "Formulir Perubahan Jadwal Pertemuan" + '<br>' + "id_pertemuan:" + '<br>' + "nama_klien: "+ '<br>'+ "tanggal:"+ '<br>' + "jam:" + '<br>' + "agenda:"+ '<br>' + "nomor_handphone:"+ '<br>' +"tanggal_baru:"+ '<br>' +"jam_baru:" + '</span></p>';
                $("#chatbox").append(botForm);
            }
        }
        else if (botResponseBERT.includes("komplain")){
            if (botResponseBot.includes("apabila permasalahan masih berlanjut")) {
                let botForm = '<p class="botText"><span>' + "formulir komplain" + '<br>' + "nama klien:" + '<br>' + "nama produk:"+ '<br>' + "masalah:" + '</span></p>';
                $("#chatbox").append(botForm);
            }
        }
        else if (botResponseBERT.includes("langganan")){
            if (botResponseBot.includes("pembatalan berlangganan diperbolehkan jika dalam keadaan force majeure")) {
                let botForm = '<p class="botText"><span>' + "Formulir Pembatalan Berlangganan" + '<br>' + "id_berlangganan:" + '<br>' + "nama_klien:"+ '<br>' + "alasan_pembatalan:" + '</span></p>';
                $("#chatbox").append(botForm);
            }
            else if (botResponseBot.includes("menyediakan free trial")) {
                let botForm = '<p class="botText"><span>' + "Formulir Free Trial" + '<br>' + "nama_klien:" + '<br>' + "no_handphone:"+ '<br>' + "nama_produk:" + '</span></p>';
                $("#chatbox").append(botForm);
            }
            else if (botResponseBot.includes("untuk berlangganan")) {
                let botForm = '<p class="botText"><span>' + "Formulir Berlangganan" + '<br>' + "nama_klien:" + '<br>' + "nomor_telepon:"+ '<br>' + "nama_produk:" + '<br>' + "durasi_berlangganan:"+ '</span></p>';
                $("#chatbox").append(botForm);
            }
            else if (botResponseBot.includes("menambah durasi langganan silakan")) {
                let botForm = '<p class="botText"><span>' + "Formulir Tambah Billing" + '<br>' + "id_berlangganan:" + '<br>' + "nama_klien:" + '<br>' + "no_handphone:" + '<br>' + "produk:"+ '<br>' + "durasi:" + '</span></p>';
                $("#chatbox").append(botForm);
            } 
        }
    }
    document.getElementById("chat-bar-bottom").scrollIntoView(true);
}
//Gets the text text from the input box and processes it
function getResponse() {
    let userText = $("#textInput").val();
    let split = userText.split("\n")
    console.log("ini split "+ split[0])
    i=0;
    let str='';
    while(i<split.length){
        str += split[i]
        str += '<br>'
        i++
    }
    if (userText != "") {
        let userHtml = '<p class="userText"><span>' + str + '</span></p>';
        $("#textInput").val('');
        $("#chatbox").append(userHtml);
        document.getElementById("chat-bar-bottom").scrollIntoView(true);
    
        setTimeout(() => {
            getHardResponse(userText);
        }, 1000)
    }
}

// Handles sending text via button clicks
function buttonSendText(sampleText) {
    let userHtml = '<p class="userText"><span>' + sampleText + '</span></p>';

    $("#textInput").val("");
    $("#chatbox").append(userHtml);
    document.getElementById("chat-bar-bottom").scrollIntoView(true);

    //Uncomment this if you want the bot to respond to this buttonSendText event
    setTimeout(() => {
        getHardResponse(sampleText);
    }, 1000)
}

function sendButton() {
    getResponse();
}

function heartButton() {
    buttonSendText("❤️")
}

// Press enter to send a message
$("#textInput").keypress(function (e) {
    if (e.keyCode == 13 && !e.shiftKey) {
        getResponse();
        e.preventDefault();
    }
});