From 84c7cbd8ce7adeaccfe4f94fcee73f6114727c0f Mon Sep 17 00:00:00 2001 From: "emmanuel.rizky" Date: Mon, 21 Jul 2025 14:44:06 +0700 Subject: [PATCH] feat(chat): Integrate chatbot API for dynamic responses This commit replaces the static, simulated chat functionality with a live integration to a chatbot backend API. The chat page now sends user messages to a webhook endpoint using the `fetch` API. It implements session management by generating and storing a `sessionId` in `localStorage` to maintain conversation context between requests. Key changes: - Implement `async` `sendMessage` function to post to the chatbot API. - Add session ID generation and persistence. - Dynamically render text and image responses from the API. - Remove hardcoded example messages from the HTML. - Update the virtual assistant's name to "Maya". - Fix navigation links from the dashboard to the chat page. --- chat-page/index.html | 19 +----- chat-page/script.js | 107 ++++++++++++++++++++++++--------- dashboard-page/index.html | 35 +++++------ dashboard-page/scripts/main.js | 4 +- dashboard-page/styles/main.css | 73 +++++++++++++++++----- 5 files changed, 158 insertions(+), 80 deletions(-) diff --git a/chat-page/index.html b/chat-page/index.html index 7dd77e1..857fb1c 100644 --- a/chat-page/index.html +++ b/chat-page/index.html @@ -27,9 +27,9 @@
@@ -37,21 +37,6 @@
- -
-
- Hai, ada kabar terbaru? -
-
10:00
-
- - -
-
- Iya, proyek baru sudah selesai! -
-
10:01
-
diff --git a/chat-page/script.js b/chat-page/script.js index 33b9702..d6dbdfb 100644 --- a/chat-page/script.js +++ b/chat-page/script.js @@ -6,17 +6,17 @@ function addMessage(content, isSent) { const message = document.createElement('div'); message.className = `message ${isSent ? 'sent' : 'received'}`; -// Ambil inisial dari nama di header -const userName = document.querySelector('.user-details h2').textContent; -const userInitial = userName.split(' ').map(n => n[0]).join('').substring(0, 1); // Ambil huruf pertama saja + // Ambil inisial dari nama di header + const userName = document.querySelector('.user-details h2').textContent; + const userInitial = userName.split(' ').map(n => n[0]).join('').substring(0, 1); // Ambil huruf pertama saja -// Tambahkan avatar kecil untuk pesan masuk -if (!isSent) { - const smallAvatar = document.createElement('div'); - smallAvatar.className = 'small-avatar'; - smallAvatar.textContent = userInitial; // Gunakan inisial dari nama - message.appendChild(smallAvatar); -} else { + // Tambahkan avatar kecil untuk pesan masuk + if (!isSent) { + const smallAvatar = document.createElement('div'); + smallAvatar.className = 'small-avatar'; + smallAvatar.textContent = userInitial; // Gunakan inisial dari nama + message.appendChild(smallAvatar); + } else { // Tambahkan ikon person untuk pesan keluar (dikirim oleh pengguna) const personIcon = document.createElement('i'); personIcon.className = 'bi bi-person sent-user-icon'; @@ -72,8 +72,13 @@ function hideTypingIndicator(indicator) { } } +// Generate unique session ID +function generateSessionId() { + return 'session-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9); +} + // Fungsi untuk mengirim pesan -function sendMessage() { +async function sendMessage() { const input = document.querySelector('.message-input'); const message = input.value.trim(); @@ -82,16 +87,47 @@ function sendMessage() { input.value = ''; toggleAttachmentIcons(true); // Tampilkan kembali ikon setelah mengirim - // Simulasikan balasan otomatis setelah 2 detik - setTimeout(() => { - const typingIndicator = showTypingIndicator(); + const typingIndicator = showTypingIndicator(); + + try { + // Get or create session ID + let sessionId = localStorage.getItem('chatSessionId'); + if (!sessionId) { + sessionId = generateSessionId(); + localStorage.setItem('chatSessionId', sessionId); + } - // Setelah 3 detik, sembunyikan indikator dan tampilkan balasan - setTimeout(() => { - hideTypingIndicator(typingIndicator); - addMessage('Pesan Anda sudah saya terima. Terima kasih!', false); - }, 3000); - }, 2000); + const response = await fetch('https://bot.kediritechnopark.com/webhook/e4559efb-e624-478b-8d40-c287c7c203e7', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + text: message, + sessionId: sessionId + }) + }); + + hideTypingIndicator(typingIndicator); + + if (!response.ok) { + throw new Error('Network response was not ok'); + } + + const data = await response.json(); + + // Cek apakah ada balasan dari bot + if (data && data.output) { + addMessage(data.output, false); + } else { + addMessage('Maaf, terjadi kesalahan saat memproses balasan.', false); + } + + } catch (error) { + hideTypingIndicator(typingIndicator); + console.error('Error sending message:', error); + addMessage('Maaf, tidak dapat terhubung ke server. Silakan coba lagi nanti.', false); + } } } @@ -134,17 +170,29 @@ document.addEventListener('DOMContentLoaded', () => { // Inisialisasi chat setelah DOM selesai dimuat document.addEventListener('DOMContentLoaded', () => { - // Tampilkan indikator mengetik saat halaman pertama dimuat - const initialTyping = showTypingIndicator(); + // Simulate explanatory demo conversation + const simulateConversation = async () => { + await new Promise(resolve => setTimeout(resolve, 1500)); + addMessage('Halo, saya tertarik dengan layanan Mayagen. Bisa jelaskan apa saja fiturnya?', true); + + await new Promise(resolve => setTimeout(resolve, 2500)); + addMessage('Tentu! Senang Anda tertarik. Mayagen adalah asisten AI yang dirancang untuk mengotomatisasi interaksi pelanggan dan meningkatkan efisiensi bisnis Anda 24/7.', false); + + await new Promise(resolve => setTimeout(resolve, 2500)); + addMessage('Sangat menarik. Apakah Mayagen hanya berfungsi di webchat seperti yang saya gunakan sekarang?', true); + + await new Promise(resolve => setTimeout(resolve, 3500)); + addMessage('Pertanyaan yang sangat bagus! Webchat ini hanyalah salah satu contoh platform yang bisa saya layani. Kekuatan utama Mayagen adalah kemampuan untuk menjawab pesan secara otomatis di berbagai channel populer secara terpisah.', false); + + await new Promise(resolve => setTimeout(resolve, 3500)); + addMessage('Saya bisa membalas DM di Instagram, merespons chat di WhatsApp, dan berinteraksi dengan pelanggan Anda di Telegram. Semua fitur ini berjalan independen di masing-masing platform, memberikan pengalaman terbaik bagi pelanggan Anda.', false); + + await new Promise(resolve => setTimeout(resolve, 2500)); + addMessage('Apakah ada fitur atau channel spesifik yang ingin Anda ketahui lebih lanjut?', false); + }; - // Setelah 3 detik, tampilkan pesan sapaan - setTimeout(() => { - hideTypingIndicator(initialTyping); - addMessage('Hai, ada yang bisa saya bantu?', false); - }, 3000); + simulateConversation(); -// Update avatar utama dengan inisial dari nama saat halaman dimuat -document.addEventListener('DOMContentLoaded', () => { // Handle viewport height for mobile browsers const setVh = () => { const vh = window.innerHeight * 0.01; @@ -158,7 +206,6 @@ document.addEventListener('DOMContentLoaded', () => { const userInitial = userName.split(' ').map(n => n[0]).join('').substring(0, 1); document.querySelector('.avatar').textContent = userInitial; }); -}); // Pastikan animasi mengetik muncul sebelum pesan sambutan // (Sudah diimplementasikan di atas) diff --git a/dashboard-page/index.html b/dashboard-page/index.html index 3a151e7..e5ae8c1 100644 --- a/dashboard-page/index.html +++ b/dashboard-page/index.html @@ -16,31 +16,31 @@ -
-
+ +
-
+

Chatbot Performance Overview

@@ -229,6 +229,7 @@
+