sibedas/resources/js/chatbot/index.js

import GlobalConfig from "../global-config.js";

document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".nav-link").forEach(tab => {
        tab.addEventListener("click", function () {
            setTimeout(() => {
                const tab_active = getActiveTabId();
                console.log("Active Tab ID:", tab_active);
            }, 100); // Timeout untuk memastikan class `active` sudah diperbarui
        });
    });

    const textarea = document.getElementById("user-message");
    const sendButton = document.getElementById("send");
    const conversationArea = document.querySelector(".row.flex-grow");

    // Fungsi untuk mengirim pesan
    async function sendMessage() {
        const userText = textarea.value.trim();
        if (userText !== "") {
            // Kosongkan textarea setelah mengirim
            textarea.value = "";

            // Ambil tab aktif saat ini
            const currentTab = getActiveTabId();

            // Tambahkan pesan user ke UI
            addMessage(userText, "user");

            // Tambahkan pesan bot sementara dengan "Loading..."
            const botMessageElement = addMessage('<div class="loader w-auto"></div>', "bot");

            // Panggil API untuk mendapatkan response dari bot
            const botResponse = await getBotResponse(currentTab, userText);

            // Perbarui pesan bot dengan respons yang sebenarnya
            botMessageElement.innerHTML = botResponse;;
        }
    }

    // Event listener untuk klik tombol
    sendButton.addEventListener("click", sendMessage);

    // Event listener untuk menekan Enter di textarea
    textarea.addEventListener("keydown", function (event) {
        if (event.key === "Enter" && !event.shiftKey) {
            event.preventDefault(); // Mencegah newline di textarea
            sendMessage(); // Panggil fungsi kirim pesan
        }
    });

    function addMessage(text, sender) {
        const messageRow = document.createElement("div");
        messageRow.classList.add("row", "flex-grow", "overflow-auto");
    
        const messageCol = document.createElement("div");
        messageCol.classList.add("w-auto", "d-inline-block"); // Menyesuaikan lebar konten
    
        if (sender === "user") {
            messageCol.classList.add("ms-auto", "max-w-50"); // Rata kanan, max 50% (setara col-6)
        } else {
            messageCol.classList.add("max-w-75"); // Max 75% (setara col-9)
    
            // Tambahkan avatar hanya untuk bot
            const avatarSpan = document.createElement("span");
            avatarSpan.classList.add("d-flex", "align-items-center", "mb-1");
    
            const avatarImg = document.createElement("img");
            avatarImg.classList.add("rounded-circle");
            avatarImg.width = 32;
            avatarImg.src = "/images/iconchatbot.jpeg";
            avatarImg.alt = "bot-avatar";
    
            avatarSpan.appendChild(avatarImg);
            messageCol.appendChild(avatarSpan);
        }
    
        const messageDiv = document.createElement("div");
        messageDiv.classList.add("p-2", "rounded", "mb-2");
    
        if (sender === "user") {
            messageDiv.classList.add("user-response", "bg-primary", "text-white");
        } else {
            messageDiv.classList.add("bot-response", "bg-light");
        }
    
        // Menyisipkan konten HTML langsung (bisa berupa teks atau loader)
        messageDiv.innerHTML = text;
        messageCol.appendChild(messageDiv);
        messageRow.appendChild(messageCol);
    
        // Tambahkan ke area percakapan
        conversationArea.appendChild(messageRow);
    
        // Scroll otomatis ke bawah
        conversationArea.scrollTop = conversationArea.scrollHeight;
    
        return messageDiv; // Mengembalikan elemen agar bisa diperbarui nanti
    }
    

    // function addMessage(text, sender) {
    //     const messageRow = document.createElement("div");
    //     messageRow.classList.add("row", "flex-grow", "overflow-auto");
    
    //     const messageCol = document.createElement("div");
    //     messageCol.classList.add("col-9", "w-auto");
    
    //     if (sender === "user") {
    //         messageCol.classList.add("ms-auto"); // Geser ke kanan untuk user
    //     }
    
    //     const messageDiv = document.createElement("div");
    //     messageDiv.classList.add("p-2", "rounded", "mb-2");
    
    //     if (sender === "user") {
    //         messageDiv.classList.add("user-response", "bg-primary", "text-white");
    //     } else {
    //         messageDiv.classList.add("bot-response", "bg-light");
    
    //         // Tambahkan avatar hanya untuk bot
    //         const avatarSpan = document.createElement("span");
    //         avatarSpan.classList.add("d-flex", "align-items-center", "mb-1");
    
    //         const avatarImg = document.createElement("img");
    //         avatarImg.classList.add("rounded-circle");
    //         avatarImg.width = 32;
    //         avatarImg.src = "/images/iconchatbot.jpeg";
    //         avatarImg.alt = "bot-avatar";
    
    //         avatarSpan.appendChild(avatarImg);
    //         messageCol.appendChild(avatarSpan);
    //     }
    
    //     // Menyisipkan konten HTML langsung (bisa berupa teks atau loader)
    //     messageDiv.innerHTML = text;
    //     messageCol.appendChild(messageDiv);
    //     messageRow.appendChild(messageCol);
    
    //     // Tambahkan ke area percakapan
    //     conversationArea.appendChild(messageRow);
    
    //     // Scroll otomatis ke bawah
    //     conversationArea.scrollTop = conversationArea.scrollHeight;
    
    //     return messageDiv; // Mengembalikan elemen agar bisa diperbarui nanti
    // }

    // Fungsi untuk memanggil API
    async function getBotResponse(tab_active, userText) {
        try {
            const url = `${GlobalConfig.apiHost}/api/generate-text`;
            const response = await fetch(url, {
                method: "POST",
                body: JSON.stringify({tab_active:tab_active, prompt: userText }),
                headers: {
                    Authorization: `Bearer ${document
                        .querySelector('meta[name="api-token"]')
                        .getAttribute("content")}`,
                    "Content-Type": "application/json",
                },
            });

            const data = await response.json();
            return data.response || "Maaf, saya tidak mengerti.";
        } catch (error) {
            console.error("Error fetching bot response:", error);
            return "Terjadi kesalahan, coba lagi nanti.";
        }
    }
});

function getActiveTabId() {
    const activeTab = document.querySelector(".nav-link.active");
    return activeTab ? activeTab.id : null;
}