SDK Presence

// Listen for presence updates at the SDK level
client.on('presence', (event) => {
  console.log('User:', event.userId);
  console.log('State:', event.state); // 'online' | 'offline'
  
  if (event.state === 'online') {
    // Show user as online
    markUserOnline(event.userId);
  } else {
    // Show user as offline
    markUserOffline(event.userId);
  }
});

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

conversation.on('presence', (event) => {
  console.log('User:', event.userId);
  console.log('State:', event.state);
});

interface PresenceEvent {
  userId: string;
  state: 'online' | 'offline';
}

// Connect - presence automatically set to 'online'
await client.connect();

// Disconnect - presence automatically set to 'offline'
await client.disconnect();

const onlineUsers = new Map<string, boolean>();

client.on('presence', (event) => {
  if (event.state === 'online') {
    onlineUsers.set(event.userId, true);
  } else {
    onlineUsers.delete(event.userId);
  }
  
  updateOnlineUsersList();
});

function isUserOnline(userId: string): boolean {
  return onlineUsers.has(userId);
}

function updateOnlineUsersList() {
  console.log('Online users:', Array.from(onlineUsers.keys()));
}

import { useState, useEffect } from 'react';
import { Vocantly, PresenceEvent } from '@vocantly/sdk';

function usePresence(client: Vocantly) {
  const [onlineUsers, setOnlineUsers] = useState<Set<string>>(new Set());

  useEffect(() => {
    const handlePresence = (event: PresenceEvent) => {
      setOnlineUsers(prev => {
        const next = new Set(prev);
        if (event.state === 'online') {
          next.add(event.userId);
        } else {
          next.delete(event.userId);
        }
        return next;
      });
    };

    client.on('presence', handlePresence);

    return () => {
      client.off('presence', handlePresence);
    };
  }, [client]);

  const isOnline = (userId: string) => onlineUsers.has(userId);

  return { onlineUsers, isOnline };
}

// Usage
function UserList({ client, users }) {
  const { isOnline } = usePresence(client);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          <span className={isOnline(user.id) ? 'online' : 'offline'}>
            {isOnline(user.id) ? '🟢' : '⚫'}
          </span>
          {user.name}
        </li>
      ))}
    </ul>
  );
}

class ChatUI {
  private client: Vocantly;
  private onlineUsers: Map<string, boolean> = new Map();

  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.set(event.userId, true);
      } else {
        this.onlineUsers.delete(event.userId);
      }
      this.updatePresenceUI();
    });

    await this.client.connect();
  }

  private updatePresenceUI() {
    // Update UI to show online/offline status
    document.querySelectorAll('[data-user-id]').forEach(el => {
      const userId = el.getAttribute('data-user-id');
      const isOnline = this.onlineUsers.has(userId!);
      el.classList.toggle('online', isOnline);
      el.classList.toggle('offline', !isOnline);
    });
  }

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

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

class PresenceManager {
  private client: Vocantly;
  private presenceState: Map<string, 'online' | 'offline'> = new Map();
  private listeners: Array<(userId: string, state: 'online' | 'offline') => void> = [];

  constructor(client: Vocantly) {
    this.client = client;
    
    // Listen for presence events
    this.client.on('presence', this.handlePresence.bind(this));
  }

  private handlePresence(event: PresenceEvent) {
    this.presenceState.set(event.userId, event.state);
    
    // Notify listeners
    this.listeners.forEach(listener => {
      listener(event.userId, event.state);
    });
  }

  getPresence(userId: string): 'online' | 'offline' | 'unknown' {
    return this.presenceState.get(userId) ?? 'unknown';
  }

  isOnline(userId: string): boolean {
    return this.presenceState.get(userId) === 'online';
  }

  getOnlineUsers(): string[] {
    return Array.from(this.presenceState.entries())
      .filter(([_, state]) => state === 'online')
      .map(([userId]) => userId);
  }

  onPresenceChange(listener: (userId: string, state: 'online' | 'offline') => void) {
    this.listeners.push(listener);
    return () => {
      this.listeners = this.listeners.filter(l => l !== listener);
    };
  }
}

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

await client.connect();

const presenceManager = new PresenceManager(client);

// Subscribe to changes
const unsubscribe = presenceManager.onPresenceChange((userId, state) => {
  console.log(`${userId} is now ${state}`);
});

// Check presence
console.log('Is user online?', presenceManager.isOnline('user-123'));
console.log('Online users:', presenceManager.getOnlineUsers());

// Cleanup
unsubscribe();