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'}`;
    
    // 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();
    }
}

// Setup Intersection Observer untuk efek fade-out
function setupMessageObserver() {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (!entry.isIntersecting) {
                // Ketika elemen keluar dari viewport
                entry.target.style.opacity = '0.3';
                entry.target.style.transform = 'translateY(10px)';
            } else {
                // Ketika elemen masuk ke viewport
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, {
        threshold: 0.1 // Trigger ketika 10% elemen masih terlihat
    });

    // Terapkan observer ke semua pesan
    document.querySelectorAll('.message').forEach(message => {
        observer.observe(message);
    });
}

// Fungsi untuk mengirim pesan
function sendMessage() {
    const input = document.querySelector('.message-input');
    const message = input.value.trim();
    
    if (message) {
        addMessage(message, true);
        input.value = '';
        
        // Simulasikan balasan otomatis setelah 2 detik
        setTimeout(() => {
            const typingIndicator = showTypingIndicator();
            
            // Setelah 3 detik, sembunyikan indikator dan tampilkan balasan
            setTimeout(() => {
                hideTypingIndicator(typingIndicator);
                addMessage('Pesan Anda sudah saya terima. Terima kasih!', false);
            }, 3000);
        }, 2000);
    }
}

// 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();
    }
});

// Inisialisasi chat setelah DOM selesai dimuat
document.addEventListener('DOMContentLoaded', () => {
    // Tampilkan indikator mengetik saat halaman pertama dimuat
    const initialTyping = showTypingIndicator();
    
    // Setelah 3 detik, tampilkan pesan sapaan
    setTimeout(() => {
        hideTypingIndicator(initialTyping);
        addMessage('Hai, ada yang bisa saya bantu?', false);
    }, 3000);
    
    setupMessageObserver();
});