SDK Tiempo Real y Canales Nuevo

const channel = dypai.realtime.channel('orders-updates')

channel
  .on('postgres_changes', { event: '*', table: 'orders' }, (payload) => {
    console.log('Evento:', payload.eventType) // INSERT, UPDATE o DELETE
    console.log('Nuevos datos:', payload.new)
    console.log('Datos anteriores:', payload.old)
  })
  .subscribe()

// Solo pedidos nuevos
channel.on('postgres_changes', { event: 'INSERT', table: 'orders' }, callback)

// Solo cambios de estado
channel.on('postgres_changes', {
  event: 'UPDATE',
  table: 'orders',
  filter: 'status=eq.completed'
}, callback)

const channel = dypai.realtime.channel('room-1')

// Escuchar
channel.on('broadcast', { event: 'typing' }, (payload) => {
  console.log(`${payload.user} está escribiendo...`)
})

channel.subscribe()

// Enviar
channel.send('typing', { user: 'Juan' })

const channel = dypai.realtime.channel('room-1')

channel.on('presence', { event: 'sync' }, () => {
  const users = channel.presenceState()
  console.log('Online:', Object.keys(users))
})

channel.subscribe()

// Anunciar tu presencia
channel.track({ user_id: '123', name: 'Juan' })

import { useRealtime } from '@dypai-ai/client-sdk/react'

function ListaPedidos() {
  const { data: pedidos, refetch } = useEndpoint('listar_pedidos')

  useRealtime('pedidos', {
    onInsert: () => refetch(),
    onUpdate: () => refetch(),
    onDelete: () => refetch(),
  })

  return <ul>{pedidos?.map(p => <li key={p.id}>{p.estado}</li>)}</ul>
}

import { useChannel } from '@dypai-ai/client-sdk/react'

function Editor() {
  const { presences, broadcast, memberCount } = useChannel('doc:abc', {
    presence: { name: 'Alicia' },
    onBroadcast: (msg) => {
      if (msg.event === 'cursor') actualizarCursor(msg.sender, msg.payload)
    },
  })

  return <span>{memberCount} online</span>
}

import { useChannelMessages } from '@dypai-ai/client-sdk/react'

function ChatEquipo({ channelId }) {
  const { messages, send, isLoading, isConnected } = useChannelMessages(channelId)

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          <b>{m.sender_email}</b>: {m.content}
        </div>
      ))}
      <input onKeyDown={e => {
        if (e.key === 'Enter') { send(e.target.value); e.target.value = '' }
      }} />
    </div>
  )
}

import { useChannels } from '@dypai-ai/client-sdk/react'

function ListaCanales() {
  const { channels, createChannel } = useChannels()

  return (
    <div>
      {channels.map(ch => <div key={ch.id}>{ch.name} ({ch.member_count})</div>)}
      <button onClick={() => createChannel('General', [], 'public')}>Nuevo</button>
    </div>
  )
}

// DM — llamar dos veces con los mismos usuarios devuelve el canal existente
const dm = await createChannel('Alicia ↔ Roberto', ['roberto-user-id'], 'dm')

import {
  DypaiProvider, useAuth, useChannelMessages, useChannels, useChannel
} from '@dypai-ai/client-sdk/react'
import { dypai } from './lib/dypai'

function App() {
  return (
    <DypaiProvider client={dypai}>
      <Chat />
    </DypaiProvider>
  )
}

function Chat() {
  const { user } = useAuth()
  const miNombre = user?.email?.split('@')[0] || 'anónimo'
  const { channels, createChannel } = useChannels()
  const [activeId, setActiveId] = useState(channels[0]?.id)

  return (
    <div className="flex">
      <aside className="w-56">
        {channels.map(ch => (
          <button key={ch.id} onClick={() => setActiveId(ch.id)}>
            # {ch.name}
          </button>
        ))}
        <button onClick={() => createChannel('Nuevo Canal')}>+</button>
      </aside>
      {activeId && <ChatRoom channelId={activeId} myName={miNombre} />}
    </div>
  )
}

function ChatRoom({ channelId, myName }) {
  const { messages, send, isLoading, isConnected } = useChannelMessages(channelId)
  const { presences } = useChannel(`channel:${channelId}`, {
    presence: { name: myName },
  })

  // Indicador de escritura
  const [escribiendo, setEscribiendo] = useState(new Set())
  const { broadcast } = useChannel(`channel:${channelId}:typing`, {
    onBroadcast: (msg) => {
      if (msg.event === 'typing' && msg.payload.name !== myName) {
        setEscribiendo(prev => new Set(prev).add(msg.payload.name))
        setTimeout(() => setEscribiendo(prev => {
          const next = new Set(prev); next.delete(msg.payload.name); return next
        }), 2000)
      }
    },
  })

  const [input, setInput] = useState('')

  return (
    <div className="flex-1 flex flex-col">
      <div className="p-2 border-b flex justify-between">
        <span>{isConnected ? '● En vivo' : '○ Desconectado'}</span>
        <span>{Object.values(presences).map(p => p.data?.name).join(', ')}</span>
      </div>

      <div className="flex-1 overflow-y-auto p-4 space-y-2">
        {isLoading && <p>Cargando...</p>}
        {messages.map(m => (
          <div key={m.id}>
            <b>{m.sender_email}</b>: {m.content}
          </div>
        ))}
        {escribiendo.size > 0 && (
          <p className="text-sm italic">{[...escribiendo].join(', ')} escribiendo...</p>
        )}
      </div>

      <div className="p-3 border-t">
        <input
          value={input}
          onChange={e => { setInput(e.target.value); broadcast('typing', { name: myName }) }}
          onKeyDown={e => { if (e.key === 'Enter') { send(input); setInput('') } }}
          placeholder="Escribe un mensaje..."
          className="w-full border rounded px-3 py-2"
        />
      </div>
    </div>
  )
}

// Desuscribirse de un canal específico
channel.unsubscribe()

// Eliminar todas las suscripciones
dypai.realtime.removeAllChannels()