arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add:setting main chatbot

Browse Source 
fix:chatbot ui
This commit is contained in:
@jamaludinarifrohman6661
2025-03-04 14:46:29 +07:00
parent 9ea7e96af1
commit 572b86299c
11 changed files with 606 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
resources/js/chatbot-pimpinan/index.js Normal file
View File

@@ -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.";
}
}
});

221
resources/js/chatbot/index.js
View File

@@ -1,6 +1,32 @@
import GlobalConfig from "../global-config.js";
document.addEventListener("DOMContentLoaded", function () {
const tabs = document.querySelectorAll(".nav-link");
const timeElements = document.querySelectorAll(".sending-message-time p");
timeElements.forEach((element) => {
element.textContent = getCurrentTime();
});
function activateTab(tab) {
tabs.forEach(btn => {
btn.classList.remove("border-3", "bg-primary", "text-white"); // Reset semua tab
});
tab.classList.add("border-3", "bg-primary", "text-white"); // Tambahkan warna pada tab aktif
}
tabs.forEach(tab => {
tab.addEventListener("click", function () {
activateTab(this);
});
});
// Set warna awal untuk tab aktif (jika ada)
const initialActiveTab = document.querySelector(".nav-link.active");
if (initialActiveTab) {
activateTab(initialActiveTab);
}
document.querySelectorAll(".nav-link").forEach(tab => {
tab.addEventListener("click", function () {
setTimeout(() => {
@@ -28,13 +54,20 @@ document.addEventListener("DOMContentLoaded", function () {
addMessage(userText, "user");
// Tambahkan pesan bot sementara dengan "Loading..."
const botMessageElement = addMessage('<div class="loader w-auto"></div>', "bot");
const botMessageElement = addMessage('<div class="bot-message-text">...</div>', "bot");
// Panggil API untuk mendapatkan response dari bot
const messageTextContainer = botMessageElement.querySelector(".bot-message-text");
if (messageTextContainer) {
messageTextContainer.innerHTML = '<div class="loader ms-3"></div>';
}
// Panggil API untuk mendapatkan respons dari bot
const botResponse = await getBotResponse(currentTab, userText);
// Perbarui pesan bot dengan respons yang sebenarnya
botMessageElement.innerHTML = botResponse;;
if (messageTextContainer) {
messageTextContainer.innerHTML = botResponse;
}
}
}
@@ -49,102 +82,136 @@ document.addEventListener("DOMContentLoaded", function () {
}
});
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 getCurrentTime() {
const now = new Date();
return now.getHours().toString().padStart(2, "0") + ":" + now.getMinutes().toString().padStart(2, "0");
}
// function addMessage(text, sender) {
// const messageRow = document.createElement("div");
// messageRow.classList.add("row", "flex-grow", "overflow-auto");
// // Atur posisi berdasarkan sender (user -> end, bot -> start)
// messageRow.classList.add("row", "flex-grow", "overflow-auto", sender === "user" ? "justify-content-end" : "justify-content-start");
// const messageCol = document.createElement("div");
// messageCol.classList.add("col-9", "w-auto");
// // Atur lebar maksimum berdasarkan sender
// messageCol.style.maxWidth = sender === "user" ? "50%" : "75%";
// const messageContainer = document.createElement("div");
// messageContainer.classList.add("p-2", "rounded", "mb-2", "d-flex", "align-items-center");
// if (sender === "user") {
// messageCol.classList.add("ms-auto"); // Geser ke kanan untuk user
// messageContainer.classList.add("user-response", "bg-primary", "text-white", "ms-auto");
// } else {
// messageContainer.classList.add("bot-response", "bg-light");
// }
// 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
// if (sender !== "user") {
// const avatarSpan = document.createElement("span");
// avatarSpan.classList.add("d-flex", "align-items-center", "mb-1");
// avatarSpan.classList.add("d-flex", "align-self-start", "mb-1");
// const avatarImg = document.createElement("img");
// avatarImg.classList.add("rounded-circle");
// avatarImg.width = 32;
// avatarImg.width = 45;
// avatarImg.src = "/images/iconchatbot.jpeg";
// avatarImg.alt = "bot-avatar";
// avatarSpan.appendChild(avatarImg);
// messageCol.appendChild(avatarSpan);
// messageContainer.appendChild(avatarSpan);
// }
// // Menyisipkan konten HTML langsung (bisa berupa teks atau loader)
// messageDiv.innerHTML = text;
// messageCol.appendChild(messageDiv);
// const messageContentWrapper = document.createElement("div");
// messageContentWrapper.classList.add("d-flex", "flex-column", "ms-2");
// const messageContent = document.createElement("div");
// messageContent.classList.add("row");
// messageContent.innerHTML = `<p class="fw-bolder ${sender === "user" ? "text-start" : "text-start"} mb-1">${sender === "user" ? "You" : "Neng Bedas"}</p><div class="bot-message-text mb-0 text-start">${text}</div>`;
// const messageTime = document.createElement("div");
// messageTime.classList.add("sending-message-time");
// messageTime.innerHTML = `<p class="small mb-0 ${sender === "user" ? "text-end text-white" : "text-end text-muted"}">${getCurrentTime()}</p>`;
// messageContentWrapper.appendChild(messageContent);
// messageContentWrapper.appendChild(messageTime);
// messageContainer.appendChild(messageContentWrapper);
// messageCol.appendChild(messageContainer);
// 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
// return messageContainer;
// }
function addMessage(text, sender) {
const messageRow = document.createElement("div");
// Atur posisi berdasarkan sender (user -> end, bot -> start)
messageRow.classList.add("row", "flex-grow", "overflow-auto", sender === "user" ? "justify-content-end" : "justify-content-start");
const messageCol = document.createElement("div");
messageCol.classList.add("col-9", "w-auto");
// Atur lebar maksimum berdasarkan sender
messageCol.style.maxWidth = sender === "user" ? "50%" : "75%";
// Container untuk menyimpan nama dan bubble chat
const messageWrapper = document.createElement("div");
messageWrapper.classList.add("d-flex", "flex-column");
// Tambahkan Nama di luar bubble chat
const messageName = document.createElement("p");
messageName.classList.add("fw-bolder", sender === "user" ? "text-end" : "text-start", "mb-1");
messageName.textContent = sender === "user" ? "You" : "Neng Bedas";
// Bubble Chat
const messageContainer = document.createElement("div");
messageContainer.classList.add("p-2", "rounded", "mb-2", "d-inline-block");
if (sender === "user") {
messageContainer.classList.add("user-response", "bg-primary", "text-white");
} else {
messageContainer.classList.add("bot-response", "bg-light");
}
const messageContent = document.createElement("div");
messageContent.classList.add("bot-message-text", "mb-0", "text-start");
messageContent.textContent = text;
// Waktu di dalam bubble chat
const messageTime = document.createElement("div");
messageTime.classList.add("sending-message-time", "text-end", "mt-1");
messageTime.innerHTML = `<p class="small mb-0 ${sender === "user" ? "text-white text-start" : "text-muted"}">${getCurrentTime()}</p>`;
messageContainer.appendChild(messageContent);
messageContainer.appendChild(messageTime);
// Jika pengirim adalah bot, tambahkan avatar
if (sender !== "user") {
const avatarContainer = document.createElement("div");
avatarContainer.classList.add("col-auto", "pe-0");
const avatarImg = document.createElement("img");
avatarImg.classList.add("rounded-circle");
avatarImg.width = 45;
avatarImg.src = "/images/iconchatbot.jpeg";
avatarImg.alt = "bot-avatar";
avatarContainer.appendChild(avatarImg);
messageRow.appendChild(avatarContainer);
}
// Masukkan nama dan bubble ke dalam wrapper
messageWrapper.appendChild(messageName);
messageWrapper.appendChild(messageContainer);
messageCol.appendChild(messageWrapper);
messageRow.appendChild(messageCol);
conversationArea.appendChild(messageRow);
conversationArea.scrollTop = conversationArea.scrollHeight;
return messageContainer;
}
// Fungsi untuk memanggil API
async function getBotResponse(tab_active, userText) {

69
resources/views/chatbot-pimpinan/index.blade.php Normal file
View File

@@ -0,0 +1,69 @@
@extends('layouts.vertical', ['subtitle' => 'Main Chatbot'])
@section('css')
@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
<style>
#user-message {
height: 60px; /* Menambah tinggi textarea */
font-size: 1.1rem; /* Memperbesar font */
padding: 10px; /* Menambah ruang di dalam textarea */
resize: none; /* Mencegah resize manual */
}
.loader {
width: 10px;
aspect-ratio: 1;
border-radius: 50%;
animation: l5 1s infinite linear alternate;
}
@keyframes l5 {
0% {box-shadow: 10px 0 #000, -10px 0 #0002; background: #000 }
33% {box-shadow: 10px 0 #000, -10px 0 #0002; background: #0002}
66% {box-shadow: 10px 0 #0002, -10px 0 #000; background: #0002}
100%{box-shadow: 10px 0 #0002, -10px 0 #000; background: #000 }
}
</style>
@endsection
@section('content')
@include('layouts.partials/page-title', ['title' => 'Main Chatbot', 'subtitle' => 'Main Chatbot'])
<div class="card">
<div class="card-body d-flex flex-column" style="height: 700px;">
<!-- Conversation Area -->
<!-- Bot Response -->
<div class="row flex-grow overflow-auto">
<div class="col-9 w-auto">
<span class="d-flex align-items-center mb-1">
<img class="rounded-circle" width="32" src="/images/iconchatbot.jpeg" alt="avatar-3">
</span>
<div class="bot-response p-2 bg-light rounded mb-2">
<p>Halo! Ada yang bisa saya bantu?</p>
</div>
</div>
</div>
<!-- Input & Button (Selalu di Bawah) -->
<div class="row mt-auto">
<div class="col-xl-12 d-flex align-items-end gap-1">
<textarea class="form-control" id="user-message"></textarea>
<button id="send" class="btn btn-primary btn-lg rounded-pill">
<i class='bx bx-send'></i>
</button>
</div>
{{-- <div class="col-xl-2 d-flex justify-content-end">
</div> --}}
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
@vite(['resources/js/chatbot-pimpinan/index.js'])
@endsection

99
resources/views/chatbot/index.blade.php
View File

@@ -30,58 +30,85 @@
@include('layouts.partials/page-title', ['title' => 'Chatbot', 'subtitle' => 'Chatbot'])
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<button id="count-retribusi" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
<span class="d-block d-sm-none"><i class="bx bx-home"></i></span>
<span class="d-none d-sm-block">Perhitungan Retribusi</span>
</button>
</li>
<li class="nav-item">
<button id="document-validation" data-bs-toggle="tab" aria-expanded="true"
class="nav-link active">
<span class="d-block d-sm-none"><i class="bx bx-user"></i></span>
<span class="d-none d-sm-block">Validasi Dokumen PBG</span>
</button>
</li>
<li class="nav-item">
<button id="data-information" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
<span class="d-block d-sm-none"><i class="bx bx-envelope"></i></span>
<span class="d-none d-sm-block">Pengumpulan Data PBG</span>
</button>
</li>
</ul>
</div>
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<button id="count-retribusi" data-bs-toggle="tab" aria-expanded="false" class="nav-link active">
<span class="d-block d-sm-none"><i class="bx bx-home"></i></span>
<span class="d-none d-sm-block fs-4">Perhitungan Retribusi</span>
</button>
</li>
<li class="nav-item">
<button id="document-validation" data-bs-toggle="tab" aria-expanded="true" class="nav-link">
<span class="d-block d-sm-none"><i class="bx bx-user"></i></span>
<span class="d-none d-sm-block fs-4">Validasi Dokumen PBG</span>
</button>
</li>
<li class="nav-item">
<button id="data-information" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
<span class="d-block d-sm-none"><i class="bx bx-envelope"></i></span>
<span class="d-none d-sm-block fs-4">Pengumpulan Data PBG</span>
</button>
</li>
</ul>
{{-- <div class="card-header">
</div> --}}
<div class="card-body d-flex flex-column" style="height: 700px;">
<!-- Conversation Area -->
<!-- Bot Response -->
{{-- <!-- Bot Response -->
<div class="row flex-grow overflow-auto">
<div class="col-9 w-auto">
<span class="d-flex align-items-center mb-1">
<img class="rounded-circle" width="32" src="/images/iconchatbot.jpeg" alt="avatar-3">
</span>
<div class="bot-response p-2 bg-light rounded mb-2">
<p>Halo! Ada yang bisa saya bantu?</p>
<div class="bot-response p-2 bg-light rounded mb-2 d-flex align-items-center">
<span class="d-flex align-items-center mb-1">
<img class="rounded-circle" width="45" src="/images/iconchatbot.jpeg" alt="avatar-3">
</span>
<div class="d-flex flex-column ms-2">
<div class="row">
<p class="fw-bolder mb-1">Neng Bedas</p>
<p class="mb-0">Halo! Ada yang bisa saya bantu?</p>
</div>
<div class="sending-message-time">
<p class="text-muted small mb-0 text-end">Now</p>
</div>
</div>
</div>
</div>
</div> --}}
<!-- Bot Response -->
<div class="row flex-grow overflow-auto align-items-start">
<!-- Avatar -->
<div class="col-auto alignpe-0">
<img class="rounded-circle" width="45" src="/images/iconchatbot.jpeg" alt="avatar-3">
</div>
<!-- Nama dan Bubble Chat -->
<div class="col-9 w-auto">
<!-- Nama Bot -->
<p class="fw-bolder mb-1">Neng Bedas</p>
<!-- Bubble Chat -->
<div class="bot-response p-2 bg-light rounded mb-2 d-inline-block">
<p class="mb-0">Halo! Ada yang bisa saya bantu?</p>
<!-- Waktu (Tetap di Dalam Bubble Chat) -->
<div class="sending-message-time text-end mt-1">
<p class="text-muted small mb-0">Now</p>
</div>
</div>
</div>
</div>
<!-- Input & Button (Selalu di Bawah) -->
<div class="row mt-auto">
<div class="col-xl-12 d-flex align-items-end gap-1">
<textarea class="form-control" id="user-message"></textarea>
<button id="send" class="btn btn-primary btn-lg rounded-pill">
<button id="send" class="btn btn-primary btn-lg h-100 d-flex align-items-center">
<i class='bx bx-send'></i>
</button>
</div>
{{-- <div class="col-xl-2 d-flex justify-content-end">
</div> --}}
</div>
</div>
</div>
</div>

2
resources/views/layouts/vertical.blade.php
View File

@@ -61,7 +61,7 @@
{{-- <div class="floating-icon">
</div> --}}
@if (!Request::is('chatbot'))
@if (!Request::is('chatbot') && !Request::is('main-chatbot'))
<a href="{{ route('chatbot.index') }}" class="floating-icon">
</a>