demo-mayagen/chat-page/script.js

// Fungsi untuk menambahkan pesan baru ke area chat
function addMessage(content, isSent) {
    const chatArea = document.querySelector('.chat-area');
    
    // Buat elemen pesan
    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

    // 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';
        message.appendChild(personIcon);
    }
    
    // Tambahkan konten pesan
    const messageContent = document.createElement('div');
    messageContent.className = 'message-content';
    messageContent.textContent = content;
    
    // Tambahkan waktu pesan
    const now = new Date();
    const time = now.getHours().toString().padStart(2, '0') + ':' + 
                now.getMinutes().toString().padStart(2, '0');
    
    const messageTime = document.createElement('div');
    messageTime.className = 'message-time';
    messageTime.textContent = time;
    
    // Gabungkan semua elemen
    message.appendChild(messageContent);
    message.appendChild(messageTime);
    
    // Tambahkan ke area chat dengan animasi
    chatArea.appendChild(message);
    
    // Scroll ke bawah untuk melihat pesan terbaru
    chatArea.scrollTop = chatArea.scrollHeight;
}

// Fungsi untuk menampilkan indikator mengetik
function showTypingIndicator() {
    const chatArea = document.querySelector('.chat-area');
    const typingIndicator = document.createElement('div');
    typingIndicator.className = 'typing-indicator';
    typingIndicator.innerHTML = `
        <div class="typing-dots">
            <span></span>
            <span></span>
            <span></span>
        </div>
    `;
    chatArea.appendChild(typingIndicator);
    chatArea.scrollTop = chatArea.scrollHeight;
    return typingIndicator;
}

// Fungsi untuk menyembunyikan indikator mengetik
function hideTypingIndicator(indicator) {
    if (indicator) {
        indicator.remove();
    }
}

// Generate unique session ID
function generateSessionId() {
    return 'session-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
}

// Fungsi untuk mengirim pesan
async function sendMessage() {
    const input = document.querySelector('.message-input');
    const message = input.value.trim();
    
    if (message) {
        addMessage(message, true);
        input.value = '';
        toggleAttachmentIcons(true); // Tampilkan kembali ikon setelah mengirim
        
        const typingIndicator = showTypingIndicator();
        
        try {
            // Get or create session ID
            let sessionId = localStorage.getItem('chatSessionId');
            if (!sessionId) {
                sessionId = generateSessionId();
                localStorage.setItem('chatSessionId', sessionId);
            }
            
            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);
        }
    }
}

// Function to toggle attachment icons visibility
function toggleAttachmentIcons(show) {
    const icons = document.querySelector('.attachment-icons');
    if (show) {
        icons.style.opacity = '1';
        icons.style.transform = 'translateY(-50%)';
    } else {
        icons.style.opacity = '0';
        icons.style.transform = 'translateY(-50%) translateX(20px)';
    }
}

// Event listener untuk tombol kirim
document.querySelector('.send-btn').addEventListener('click', sendMessage);

// Event listener untuk tombol Enter
document.querySelector('.message-input').addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        sendMessage();
    }
});

// Event listener untuk input text
const messageInput = document.querySelector('.message-input');
messageInput.addEventListener('input', function() {
    if (this.value.trim() !== '') {
        toggleAttachmentIcons(false);
    } else {
        toggleAttachmentIcons(true);
    }
});

// Initialize attachment icons
document.addEventListener('DOMContentLoaded', () => {
    toggleAttachmentIcons(true);
});

// Inisialisasi chat setelah DOM selesai dimuat
document.addEventListener('DOMContentLoaded', () => {
    // 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);
    };
    
    simulateConversation();
    
    // Handle viewport height for mobile browsers
    const setVh = () => {
        const vh = window.innerHeight * 0.01;
        document.documentElement.style.setProperty('--vh', `${vh}px`);
    };
    setVh();
    window.addEventListener('resize', setVh);
    window.addEventListener('load', setVh);
    
    const userName = document.querySelector('.user-details h2').textContent;
    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)