Realtime

import { createStreams } from '@sylphx/sdk/server'

const streams = createStreams()

// Get the last 50 messages
const recent = await streams.history('chat:room-1', {
  limit: 50,
})

// Get messages after a specific ID (for pagination)
const older = await streams.history('chat:room-1', {
  start: '1706886400000-0',
  limit: 100,
})

// Get messages in a time range
const range = await streams.history('chat:room-1', {
  start: '1706886400000-0',
  end: '1706890000000-0',
  limit: 200,
})

// Each message has the StreamMessage shape
for (const msg of recent) {
  console.log(msg.id)        // "1706886400123-0"
  console.log(msg.event)     // "message"
  console.log(msg.channel)   // "chat:room-1"
  console.log(msg.data)      // { text: "Hello!", userId: "123" }
  console.log(msg.timestamp) // 1706886400123
}

'use client'

import { useRealtime } from '@sylphx/sdk/react'
import type { RealtimeStatus } from '@sylphx/sdk/react'

function LiveDashboard() {
  const {
    messages,
    status,    // 'connecting' | 'connected' | 'reconnecting' | 'disconnected'
    connect,   // Manually connect
    disconnect,// Manually disconnect
    clear,     // Clear local message buffer
    emit,      // Send events
  } = useRealtime('dashboard:metrics', {
    enabled: true,  // Auto-connect on mount (default: true)
    onConnect: (channel) => {
      console.log(`Connected to ${channel}`)
    },
    onReconnect: () => {
      console.log('Reconnecting...')
    },
    onError: (error) => {
      console.error('Connection error:', error)
    },
  })

  // Status indicator
  const statusColor: Record<RealtimeStatus, string> = {
    connected: 'bg-green-500',
    connecting: 'bg-yellow-500',
    reconnecting: 'bg-yellow-500',
    disconnected: 'bg-red-500',
  }

  return (
    <div>
      <div className="flex items-center gap-2">
        <div className={`w-2 h-2 rounded-full ${statusColor[status]}`} />
        <span>{status}</span>
      </div>

      <button onClick={disconnect}>Pause</button>
      <button onClick={connect}>Resume</button>
      <button onClick={clear}>Clear Messages</button>

      <div>{messages.length} messages</div>
    </div>
  )
}

import { createStreams } from '@sylphx/sdk/server'

const streams = createStreams()

// Create a channel helper — scopes emit() and history()
const room = streams.channel('chat:room-1')

// Emit without repeating the channel name
await room.emit('message', { text: 'Hello!', userId: '123' })
await room.emit('typing', { userId: '123', active: true })
await room.emit('reaction', { messageId: 'msg_1', emoji: '👍' })

// Get history for this channel
const history = await room.history({ limit: 100 })

// Compare with the top-level API
// These two calls are equivalent:
await streams.emit('chat:room-1', 'message', { text: 'Hi' })
await room.emit('message', { text: 'Hi' })

'use client'

import { useRealtimeChannels } from '@sylphx/sdk/react'

interface ChatMessage {
  text: string
  userId: string
}

function TeamChat({ teamRooms }: { teamRooms: string[] }) {
  const { messages, emit, status, clear } = useRealtimeChannels<ChatMessage>(
    teamRooms.map((room) => `chat:${room}`),
    {
      events: ['message'],
      history: 20,
      onMessage: (msg) => {
        // msg.channel tells you which channel it came from
        console.log(`[${msg.channel}] ${msg.data.text}`)
      },
    }
  )

  // Emit to the first channel by default
  const sendToGeneral = () => emit('message', { text: 'Hello team!', userId: 'me' })

  // Group messages by channel for display
  const byChannel = messages.reduce<Record<string, typeof messages>>(
    (acc, msg) => {
      const ch = msg.channel
      if (!acc[ch]) acc[ch] = []
      acc[ch].push(msg)
      return acc
    },
    {}
  )

  return (
    <div>
      <span>Status: {status}</span>
      {Object.entries(byChannel).map(([channel, msgs]) => (
        <div key={channel}>
          <h3>{channel}</h3>
          {msgs.map((msg) => (
            <p key={msg.id}>{msg.data.text}</p>
          ))}
        </div>
      ))}
    </div>
  )
}