feature: chatbot
This commit is contained in:
176
resources/js/chatbot/index.js
Normal file
176
resources/js/chatbot/index.js
Normal file
@@ -0,0 +1,176 @@
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user