chat

Pexip chat

Pexip's chat is signaling-channel chat, not a separate WebSocket. Messages flow through the same event source as everything else — which means they share the same retry/queue/reconnect machinery. This is good (chat survives ICE restart automatically) but introduces edge cases (server may dedup, queue, or drop messages during reconnect).

Webapp3 handles these correctly with optimistic UI + retry-queue reconciliation. This skill captures that pattern.

Sending: optimistic add, then reconcile

The pattern: add the message immediately as pending: true, then resolve it once the server confirms — possibly later via the retry queue.

import {v4 as uuid} from 'uuid';
import {toTime} from '@pexip/media-components';

const sendMessage = async (message: string, toParticipantUuid?: ParticipantID) => {
    const me = infinity.getMe();
    if (!me) return;

    const chatMessage = {
        displayName: me.displayName || 'User',
        id: uuid(),                    // client-generated id, used for dedup
        message,
        timestamp: toTime(new Date()),
        type: 'user-message',
        userId: me.uuid,
    } as const;

    // 1. Optimistic add
    const isDirectMessage = !!toParticipantUuid;
    if (isDirectMessage) {
        addDirectChatMessage(toParticipantUuid, {...chatMessage, pending: true});
    } else {
        updateChatMessages([...chatMessages, {...chatMessage, pending: true}]);
    }

    // 2. Send via the SDK
    const result = await infinity.sendMessage({
        payload: message,
        participantUuid: toParticipantUuid,
    });

    const setMsgSuccess = () => {
        // Replace the pending message with the confirmed one
        if (isDirectMessage) {
            deleteDirectChatMessage(toParticipantUuid, chatMessage.id);
            addDirectChatMessage(toParticipantUuid, chatMessage); // no `pending`
        } else {
            const filtered = chatMessages.filter(({id}) => id !== chatMessage.id);
            updateChatMessages([...filtered, chatMessage]);
        }
    };

    // 3. Reconcile
    if (result) {
        setMsgSuccess(); // Sent immediately
    } else {
        // Got queued — wait for the SDK's retry queue to flush, then mark sent
        infinityClientSignals.onRetryQueueFlushed.addOnce(() => setMsgSuccess());
    }
};