Chat - Realtime

Feed typing, presence, and read-state changes through the provider-owned realtime subscription.

This demo demonstrates the runtime behavior behind realtime push updates:

• the adapter's subscribe() method and its cleanup lifecycle
• typing events that update useChatStatus().typingUserIds
• presence events that update participant isOnline state
• read events that update conversation read state

Key concepts

The subscribe() adapter method

When ChatProvider mounts and the adapter implements subscribe(), the runtime calls it with an onEvent callback. The adapter pushes events through this callback and returns a cleanup function:

const adapter: ChatAdapter = {
  async sendMessage(input) {
    /* ... */
  },

  subscribe({ onEvent }) {
    const ws = new WebSocket('/api/events');

    ws.onmessage = (event) => {
      onEvent(JSON.parse(event.data));
    };

    return () => ws.close();
  },
};

Typing indicators

Push typing events to update which users are currently typing:

onEvent({
  type: 'typing',
  conversationId: 'support',
  userId: 'user-1',
  isTyping: true,
});

Read the result with useChatStatus():

const { typingUserIds } = useChatStatus();
// typingUserIds: ['user-1']

Presence updates

Push presence events to update user online status:

onEvent({
  type: 'presence',
  userId: 'user-1',
  isOnline: false,
});

Presence changes update isOnline on matching ChatUser objects inside conversation participants.

Read state

Push read events to mark conversations as read:

onEvent({
  type: 'read',
  conversationId: 'support',
  messageId: 'msg-42',
});

Key takeaways

• The runtime fully manages the subscription lifecycle — subscribe() on mount, cleanup on unmount
• Typing, presence, and read events update the store automatically
• useChatStatus().typingUserIds is the primary hook for typing indicators
• Presence and read updates surface through conversation-level selectors

See also

• Realtime for the full event type reference and store effects
• Adapters for the subscribe() method reference
• Realtime thread sync for message and conversation add/update/remove events

API

• ChatRoot