Presence & Awareness Kit

Real-time user presence indicators with typing awareness, cursor tracking, and section visibility.

Configuration

Online (5/5)

Y
YouOnline
Data Analysis
AC
Alice ChenTyping...
Recommendations
BW
Bob WilsonViewing
Data Analysis
DL
Diana LopezIdle
Introduction
AA
Agent AssistantOnline

Collaborative Document

Introduction

D

Data Analysis

B

Recommendations

A

Appendix

Bob

Presence Events (Live)

1:46:15 PMAlice Chen→ typing...in Recommendations
1:46:10 PMBob Wilson→ viewingin Data Analysis
1:44:15 PMDiana Lopez→ idlein Introduction
1:46:15 PMAgent Assistant→ online

Integration Code

import { createPresence, CursorTracker, SectionAwareness } from 'agent-tools-kit/realtime'

const presence = createPresence({
  heartbeat: 5000,
  idleTimeout: 60000,
  statuses: ['online', 'typing', 'viewing', 'idle', 'away', 'offline'],
  cursors: new CursorTracker({
    enabled: true,
    throttle: 50,      // ms between cursor updates
    smoothing: true,   // interpolate between positions
  }),
  sections: new SectionAwareness({
    enabled: true,
    selectors: ['[data-section]'],  // DOM elements to track
    threshold: 0.5,   // intersection ratio to count as "viewing"
  }),
  transport: 'websocket',  // or 'webrtc', 'sse'
})

// Connect to a session
await presence.connect({ sessionId: 'doc-123', userId: 'user-42' })

// Listen for presence changes
presence.on('change', (users) => {
  console.log('Active users:', users.filter(u => u.status !== 'offline'))
})

// Update your own status
presence.setStatus('typing')
presence.setViewingSection('Data Analysis')

// Get current participants
const participants = presence.getParticipants()
// => [{ id, name, status, cursor, viewingSection, lastSeen }]