add:setting main chatbot

fix:chatbot ui

resources/js/chatbot-pimpinan/index.js

@@ -0,0 +1,111 @@
+import GlobalConfig from "../global-config.js";
+
+document.addEventListener("DOMContentLoaded", function () {
+    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 = "";
+
+            // 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(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
+    }
+
+    // Fungsi untuk memanggil API
+    async function getBotResponse(userText) {
+        try {
+            const url = `${GlobalConfig.apiHost}/api/main-generate-text`;
+            const response = await fetch(url, {
+                method: "POST",
+                body: JSON.stringify({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.";
+        }
+    }
+});