90. WhatsApp Chat III with Rich Layout

Build a WhatsApp Chat Interface with Rich Layout featuring user avatars, timestamps, typing indicators, smooth animations, and auto-reply functionality to create a realistic chat experience.

Requirements

1. Rich Layout

• Show user avatar/initials for each message
• Display message timestamps in readable format (e.g., "2:30 PM")
• Show "typing..." indicator when other user is responding
• Smooth animations for new messages
• Better visual hierarchy with shadows and spacing

2. Auto-Reply Functionality

• Simulate other user responses automatically
• Random delay between 1-3 seconds before reply
• Multiple response templates based on keywords
• Show typing indicator before auto-reply
• Mimic realistic conversation flow

3. Enhanced Message Structure

interface Message {
  id: number;
  text: string;
  sender: 'user' | 'other';
  timestamp: Date;
  isTyping?: boolean;
}

interface User {
  id: string;
  name: string;
  avatar?: string;
  initials: string;
}

4. Auto-Reply Logic

• Detect keywords in user messages
• Respond with contextually relevant messages
• Use predefined response templates
• Randomize response selection for variety

Example Usage

// Auto-reply templates
const autoReplyTemplates = {
  greeting: ['Hi there!', 'Hello!', 'Hey!'],
  question: ['That's a good question!', 'Let me think...', 'Interesting!'],
  default: ['Got it!', 'Okay', 'Sure thing'],
};