Presence & Typing

// Listen for presence at SDK level
client.on('presence', (event) => {
  console.log(`${event.userId} is ${event.state}`);
});

// Or at conversation level
const conversation = client.conversations.get('conv-id');
conversation.on('presence', (event) => {
  console.log(`${event.userId} is ${event.state}`);
});

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

// Start typing
conversation.startTyping();

// Stop typing (or just wait for auto-expiry)
conversation.stopTyping();

// Listen for typing events
conversation.on('typing', (event) => {
  if (event.state === 'start') {
    console.log(`${event.userId} is typing...`);
  } else {
    console.log(`${event.userId} stopped typing`);
  }
});

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

class ChatWithPresenceAndTyping {
  private client: Vocantly;
  private onlineUsers = new Set<string>();
  private typingUsers = new Map<string, Set<string>>();
  private typingTimeout: NodeJS.Timeout | null = null;

  async initialize(token: string) {
    this.client = new Vocantly({
      wsUrl: 'wss://ws.dev.vocantly.com/ws',
      token
    });

    // Track presence
    this.client.on('presence', (event) => {
      if (event.state === 'online') {
        this.onlineUsers.add(event.userId);
      } else {
        this.onlineUsers.delete(event.userId);
      }
      this.updatePresenceUI();
    });

    await this.client.connect();
  }

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

    // Track typing for this conversation
    conversation.on('typing', (event) => {
      let users = this.typingUsers.get(conversationId);
      if (!users) {
        users = new Set();
        this.typingUsers.set(conversationId, users);
      }

      if (event.state === 'start') {
        users.add(event.userId);
      } else {
        users.delete(event.userId);
      }
      this.updateTypingUI(conversationId);
    });

    return conversation;
  }

  // Call on input change
  handleTyping(conversationId: string) {
    const conversation = this.client.conversations.get(conversationId);
    conversation.startTyping();

    // Auto-stop after 2 seconds of inactivity
    if (this.typingTimeout) {
      clearTimeout(this.typingTimeout);
    }
    this.typingTimeout = setTimeout(() => {
      conversation.stopTyping();
    }, 2000);
  }

  // Call before sending message
  sendMessage(conversationId: string, content: string) {
    const conversation = this.client.conversations.get(conversationId);
    
    // Stop typing
    if (this.typingTimeout) {
      clearTimeout(this.typingTimeout);
    }
    conversation.stopTyping();
    
    // Send message
    conversation.sendMessage(content);
  }

  isOnline(userId: string): boolean {
    return this.onlineUsers.has(userId);
  }

  getTypingUsers(conversationId: string): string[] {
    const users = this.typingUsers.get(conversationId);
    return users ? Array.from(users) : [];
  }

  private updatePresenceUI() {
    console.log('Online users:', Array.from(this.onlineUsers));
  }

  private updateTypingUI(conversationId: string) {
    const users = this.getTypingUsers(conversationId);
    if (users.length > 0) {
      console.log(`${users.join(', ')} typing in ${conversationId}`);
    }
  }
}