Inbox

JD
John Doe 10:42 AM
Hey, are we still fast for the meeting?
AS
Alice Smith Yesterday
Thanks for sharing that document!
MT
Michael Turner 2 days ago
Please check the attached proposal when you can.
JD
John Doe
Hi Chandi, how is the project coming along?
Hey John! It's going great. Just finishing up the final designs.
That's awesome to hear. Can we review it later today?
Sure, I'm free at 2 PM.
Perfect. unexpected change: Hey, are we still fast for the meeting?
{ id: 1, name: 'John Doe', initials: 'JD', color: '#00695C', bg: '#E0F2F1', messages: [ { type: 'received', text: 'Hi Chandi, how is the project coming along?' }, { type: 'sent', text: "Hey John! It's going great. Just finishing up the final designs." }, { type: 'received', text: "That's awesome to hear. Can we review it later today?" }, { type: 'sent', text: 'Sure, I\'m free at 2 PM.' }, { type: 'received', text: 'Perfect. See you then!' } ] }, { id: 2, name: 'Alice Smith', initials: 'AS', color: '#6A1B9A', bg: '#F3E5F5', messages: [ { type: 'received', text: 'Thanks for sharing that document!' }, { type: 'sent', text: 'No problem, Alice. Let me know if you need anything else.' }, { type: 'received', text: 'Will do. Have a great weekend!' } ] }, { id: 3, name: 'Michael Turner', initials: 'MT', color: '#1565C0', bg: '#E3F2FD', messages: [ { type: 'received', text: 'Please check the attached proposal when you can.' }, { type: 'sent', text: 'I received it. I will take a look tonight.' }, { type: 'received', text: 'Great, I appreciate it.' } ] } ]; // Interaction Logic document.querySelectorAll('.conversation-item').forEach((item, index) => { item.addEventListener('click', () => { // 1. Update Active State document.querySelectorAll('.conversation-item').forEach(i => i.classList.remove('active')); item.classList.add('active'); // 2. Get Data const data = conversations[index]; // 3. Update Header const headerAvatar = document.querySelector('.chat-header .avatar-circle'); headerAvatar.textContent = data.initials; headerAvatar.style.backgroundColor = data.bg; headerAvatar.style.color = data.color; document.querySelector('.chat-header span').textContent = data.name; // 4. Update Messages const chatContainer = document.querySelector('.chat-messages'); chatContainer.innerHTML = ''; // Clear current data.messages.forEach(msg => { const bubble = document.createElement('div'); bubble.className = `message-bubble message-${msg.type}`; bubble.textContent = msg.text; chatContainer.appendChild(bubble); }); }); }); // Search Logic const searchInput = document.querySelector('.search-box input'); searchInput.addEventListener('input', (e) => { const searchTerm = e.target.value.toLowerCase(); const items = document.querySelectorAll('.conversation-item'); items.forEach(item => { // Get name text (excluding time which is in a span, but innerText gets all) // To be precise we can select the text node or just search the whole innerText which is fine const name = item.querySelector('.conversation-name').textContent.toLowerCase(); const preview = item.querySelector('.conversation-preview').textContent.toLowerCase(); if (name.includes(searchTerm) || preview.includes(searchTerm)) { item.style.display = 'flex'; } else { item.style.display = 'none'; } }); });