Read Receipts

1. User sends message → 'sent'
2. Recipient's device receives → 'delivered'
3. Recipient opens/views message → 'read'

const conversation = client.conversations.get('conv-id');

conversation.on('receipt', (event) => {
  console.log(`Message ${event.messageId}: ${event.state}`);
  updateMessageStatus(event.messageId, event.state);
});

conversation.on('message', (message) => {
  console.log('Current receipt state:', message.receiptState);
  // 'sent', 'delivered', or 'read'
});

function getStatusIcon(status: string): { icon: string; color: string } {
  switch (status) {
    case 'sending':
      return { icon: '⏳', color: 'gray' };
    case 'sent':
      return { icon: '✓', color: 'gray' };
    case 'delivered':
      return { icon: '✓✓', color: 'gray' };
    case 'read':
      return { icon: '✓✓', color: '#3b82f6' }; // Blue
    default:
      return { icon: '', color: 'gray' };
  }
}

import { Vocantly, Message } from '@vocantly/sdk';

interface MessageWithStatus {
  id: string;
  content: string;
  senderId: string;
  status: 'sending' | 'sent' | 'delivered' | 'read';
}

class MessageManager {
  private client: Vocantly;
  private messages: Map<string, MessageWithStatus> = new Map();
  private onUpdate: (messageId: string, message: MessageWithStatus) => void;

  constructor(client: Vocantly, onUpdate: (id: string, msg: MessageWithStatus) => void) {
    this.client = client;
    this.onUpdate = onUpdate;
  }

  async joinConversation(conversationId: string) {
    await this.client.conversations.join(conversationId);
    const conversation = this.client.conversations.get(conversationId);

    // Handle messages
    conversation.on('message', (message) => {
      const status = message.isOptimistic ? 'sending' : 'sent';
      const msgWithStatus: MessageWithStatus = {
        id: message.id,
        content: message.content,
        senderId: message.senderId,
        status
      };
      
      this.messages.set(message.id, msgWithStatus);
      this.onUpdate(message.id, msgWithStatus);
    });

    // Handle receipts
    conversation.on('receipt', (event) => {
      const message = this.messages.get(event.messageId);
      if (message) {
        message.status = event.state as 'delivered' | 'read';
        this.onUpdate(event.messageId, message);
      }
    });

    return conversation;
  }

  sendMessage(conversationId: string, content: string) {
    const conversation = this.client.conversations.get(conversationId);
    conversation.sendMessage(content);
  }

  getMessages(): MessageWithStatus[] {
    return Array.from(this.messages.values());
  }
}

// Usage
const client = new Vocantly({
  wsUrl: 'wss://ws.dev.vocantly.com/ws',
  token: 'your-token'
});

await client.connect();

const manager = new MessageManager(client, (id, msg) => {
  console.log(`[${msg.status}] ${msg.senderId}: ${msg.content}`);
  // Update UI
});

const conversation = await manager.joinConversation('conv-123');