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 @@
-
J
+
M
-

John Doe

+

Maya

Virtual Assistant - Bake Shop
@@ -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 @@
+