Real-Time Messaging

Customer sends WhatsApp message
         ↓
WhatsApp Business API
         ↓
Your webhook endpoint
         ↓
WebSocket broadcasts to connected agents
         ↓
Message appears in agent's inbox (< 2 seconds)

Customer Side (WhatsApp):
Agent is typing... [displayed when agent types]

Agent Side (Team Inbox):
Customer is typing... [displayed when customer types]

{
  "typingIndicators": {
    "enabled": true,
    "timeout": 10, // Hide after 10 seconds
    "showToCustomer": true
  }
}

Team Status (Live)
━━━━━━━━━━━━━━━━━━━━━━━━

🟢 Sarah Johnson    Online
🟢 John Smith       Online  
🟡 Alice Brown      Away (5 min)
🔴 Bob Wilson       Offline

Last Update: Just now

Customer Profile
━━━━━━━━━━━━━━━━━━━━━━━━

John Smith
🟢 Active now
Last seen: Just now

Jane Doe
⚪ Offline
Last seen: 2 hours ago

When Alice starts typing:
  → "Alice is typing a response..."
  → Other agents see notification
  → Prevents duplicate responses

Connection Status
━━━━━━━━━━━━━━━━━━━━━━━━

⚠️ Disconnected

Attempting to reconnect...
Retry 1 of 5 (in 2 seconds)

───────────────────────────

✓ Connected

Real-time updates resumed

{
  "realtime": {
    "preferredMethod": "websocket",
    "fallback": "polling",
    "pollingInterval": 3000 // Check every 3 seconds
  }
}

Instead of:
  WebSocket update #1
  WebSocket update #2  
  WebSocket update #3
  (3 separate renders)

Batched:
  WebSocket update with 3 messages
  (1 optimized render)

{
  "lazyLoading": {
    "initialMessages": 50,
    "loadMoreIncrement": 25,
    "preloadNext": true // Preload next conversation
  }
}

// Connection established automatically
const ws = new WebSocket('wss://your-inbox.com/ws');

ws.on('connect', () => {
  console.log('Real-time updates active');
});

ws.on('message', (event) => {
  const { type, data } = JSON.parse(event.data);
  
  switch(type) {
    case 'message.new':
      displayMessage(data);
      break;
    case 'conversation.updated':
      updateConversation(data);
      break;
    case 'user.typing':
      showTypingIndicator(data);
      break;
  }
});