SDK Messaging

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

// Send a text message
conversation.sendMessage('Hello, world!');

// Text message (default)
conversation.sendMessage('Hello!', 'text');

// System message
conversation.sendMessage('User joined the conversation', 'system');

// Send with custom metadata
conversation.sendMessage('Check out this product!', 'text', {
  productId: 'prod-123',
  productName: 'Widget Pro',
  price: 99.99
});

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

conversation.on('message', (message) => {
  // Message properties
  console.log('ID:', message.id);
  console.log('Content:', message.content);
  console.log('Sender:', message.senderId);
  console.log('Type:', message.messageType);
  console.log('Sent at:', message.sentAt);
  console.log('Receipt state:', message.receiptState);
  
  // Check if optimistic (not yet confirmed by server)
  if (message.isOptimistic) {
    console.log('Message pending confirmation...');
  }
});

interface Message {
  id: string;                    // Unique message ID (UUID)
  conversationId: string;        // Conversation this message belongs to
  content: string;               // Message content
  senderId: string;              // ID of the sender
  senderType: string;            // 'sdk' | 'api' | 'bot' | 'agent'
  messageType: 'text' | 'system'; // Type of message
  sentAt: Date;                  // When the message was sent
  isOptimistic: boolean;         // True if awaiting server confirmation
  receiptState: ReceiptState;    // 'sent' | 'delivered' | 'read'
  metadata?: Record<string, unknown>; // Custom metadata
}

conversation.on('message', (message) => {
  if (message.isOptimistic) {
    // Show message with "sending..." indicator
    displayMessage(message, { status: 'sending' });
  } else {
    // Message confirmed by server
    displayMessage(message, { status: 'sent' });
  }
});

// Send message - triggers immediate optimistic event
conversation.sendMessage('Hello!');

conversation.on('receipt', (event) => {
  console.log('Message:', event.messageId);
  console.log('State:', event.state); // 'delivered' | 'read'
  console.log('User:', event.userId);
  
  // Update UI
  updateMessageStatus(event.messageId, event.state);
});

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

class ChatUI {
  private client: Vocantly;
  private conversation: Conversation;
  private messages: Map<string, Message> = new Map();

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

    await this.client.connect();
    await this.client.conversations.join(conversationId);
    
    this.conversation = this.client.conversations.get(conversationId);
    this.setupEventHandlers();
  }

  private setupEventHandlers() {
    // Handle incoming messages
    this.conversation.on('message', (message) => {
      this.messages.set(message.id, message);
      this.renderMessage(message);
    });

    // Handle receipt updates
    this.conversation.on('receipt', (event) => {
      const message = this.messages.get(event.messageId);
      if (message) {
        this.updateMessageStatus(event.messageId, event.state);
      }
    });

    // Handle errors
    this.conversation.on('error', (error) => {
      console.error('Chat error:', error);
      this.showError(error.message);
    });
  }

  sendMessage(content: string) {
    if (!content.trim()) return;
    
    // Stop typing indicator
    this.conversation.stopTyping();
    
    // Send message
    this.conversation.sendMessage(content);
  }

  private renderMessage(message: Message) {
    const status = message.isOptimistic ? 'sending' : message.receiptState;
    console.log(`[${status}] ${message.senderId}: ${message.content}`);
  }

  private updateMessageStatus(messageId: string, status: string) {
    console.log(`Message ${messageId} is now: ${status}`);
  }

  private showError(message: string) {
    console.error('Error:', message);
  }
}

// Usage
const chat = new ChatUI();
await chat.initialize('your-token', 'conversation-id');
chat.sendMessage('Hello, world!');

import { useState, useEffect, useCallback } from 'react';
import { Vocantly, Message, Conversation } from '@vocantly/sdk';

function useMessages(client: Vocantly, conversationId: string) {
  const [messages, setMessages] = useState<Message[]>([]);
  const [conversation, setConversation] = useState<Conversation | null>(null);

  useEffect(() => {
    async function setup() {
      await client.conversations.join(conversationId);
      const conv = client.conversations.get(conversationId);
      setConversation(conv);

      conv.on('message', (message) => {
        setMessages(prev => {
          // Update or add message
          const exists = prev.find(m => m.id === message.id);
          if (exists) {
            return prev.map(m => m.id === message.id ? message : m);
          }
          return [...prev, message];
        });
      });
    }

    setup();

    return () => {
      client.conversations.leave(conversationId);
    };
  }, [client, conversationId]);

  const sendMessage = useCallback((content: string) => {
    conversation?.sendMessage(content);
  }, [conversation]);

  return { messages, sendMessage };
}

function ChatRoom({ client, conversationId }) {
  const { messages, sendMessage } = useMessages(client, conversationId);
  const [input, setInput] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (input.trim()) {
      sendMessage(input);
      setInput('');
    }
  };

  return (
    <div>
      <div className="messages">
        {messages.map(msg => (
          <div key={msg.id} className={msg.isOptimistic ? 'pending' : 'sent'}>
            <strong>{msg.senderId}:</strong> {msg.content}
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Type a message..."
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}