Build a modern chat interface that displays messages in real-time, shows typing indicators, and includes features like message reactions and user status.

Project Checklist

• Create a chat message list with scrollable container
• Design message input area with send button
• Implement message bubbles with timestamps and sender names
• Add auto-scroll to latest message functionality
• Style messages differently for sent vs received messages
• Add typing indicator when users are typing

Bonus Project Checklist Items

• Implement emoji picker for reactions
• Add message editing and deletion features
• Create user presence indicators (online, offline, away)
• Add file/image upload and preview functionality
• Implement message search and filtering
• Add dark mode support

Inspiration (Any companies/libraries similar)

• Slack
• Discord
• WhatsApp Web

Hint/Code snippet to start

To get started, you can use the following code snippet to structure messages:

function addMessage(text, sender, timestamp) {
  const messageDiv = document.createElement('div');
  messageDiv.className = `message ${sender === 'me' ? 'sent' : 'received'}`;
  messageDiv.innerHTML = `
    <div class="message-content">${text}</div>
    <div class="message-time">${formatTime(timestamp)}</div>
  `;
  document.getElementById('chat-messages').appendChild(messageDiv);
  scrollToBottom();
}