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

// Fungsi untuk mengirim pesan
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
        
        // 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);
    }
}

// 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', () => {
    // 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);
    
// 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;
        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)