Exemplos de Frontend

// MessageBubble.tsx — renderiza o envelope canônico (igual em Baileys/WABA/IG)
import type { MessageReceivedEvent } from '@paulorbj/wpp-gateway-sdk';

export function MessageBubble({ msg, mine }: { msg: MessageReceivedEvent; mine: boolean }) {
  return (
    <div className={mine ? 'bubble bubble--mine' : 'bubble'}>
      {msg.quotedMessageId && <QuotedPreview messageId={msg.quotedMessageId} />}
      <Content msg={msg} />
      <time className="bubble__time">{new Date(msg.timestamp).toLocaleTimeString()}</time>
    </div>
  );
}

function Content({ msg }: { msg: MessageReceivedEvent }) {
  const c = msg.content as any;
  switch (msg.type) {
    case 'text':
      return <p>{c.text}</p>;

    case 'image':
      // mídia vem no evento media:available (downloadUrl); ou GET /v1/media/:id
      return <img className="bubble__img" src={msg.media?.downloadUrl} alt={c.caption ?? ''} />;

    case 'audio':
      return <audio controls src={msg.media?.downloadUrl} />;

    case 'document':
      return <a href={msg.media?.downloadUrl} download>{c.filename ?? 'documento'}</a>;

    case 'location':
      return <a href={`https://maps.google.com/?q=${c.latitude},${c.longitude}`}>📍 {c.name ?? 'Localização'}</a>;

    case 'contact':
      return <div className="vcard">{c.contacts?.map((ct: any) => ct.name).join(', ')}</div>;

    case 'reaction':
      return <span className="reaction">{c.emoji}</span>; // reagiu a c.targetMessageId

    case 'button_reply':
    case 'list_reply':
      return <p className="reply-chip">↳ {c.text}</p>; // usuário tocou um botão/item

    default:
      return <em>[mensagem não suportada]</em>;
  }
}

// MessageActions.tsx — menu de contexto por messageId do gateway
import { WppGateway } from '@paulorbj/wpp-gateway-sdk';
const gw = new WppGateway({ baseUrl, apiKey });

export function MessageActions({ phoneId, messageId, mine }: Props) {
  return (
    <Menu>
      {/* Reagir — qualquer mensagem */}
      <MenuItem onClick={() => gw.messages.react(messageId, { phoneId, emoji: '❤️' })}>
        Reagir ❤️
      </MenuItem>

      {/* Responder com citação — manda nova msg referenciando este messageId */}
      <MenuItem onClick={() => onReply(messageId)}>Responder</MenuItem>

      {/* Encaminhar — envia o conteúdo pra outro contato */}
      <MenuItem onClick={() => onForward(messageId)}>Encaminhar</MenuItem>

      {/* Editar — só mensagens que VOCÊ enviou (Baileys) */}
      {mine && (
        <MenuItem onClick={() => gw.messages.edit(messageId, { phoneId, text: 'Texto corrigido' })}>
          Editar
        </MenuItem>
      )}

      {/* Apagar pra todos */}
      {mine && (
        <MenuItem danger onClick={() => gw.messages.delete(messageId, phoneId)}>
          Apagar
        </MenuItem>
      )}
    </Menu>
  );
}

// Responder com citação = enviar nova mensagem com quotedMessageId
async function onReply(quotedMessageId: string) {
  await gw.messages.send({
    phoneId, to, type: 'text',
    content: { text: 'Claro!' },
    quotedMessageId, // o messageId do gateway que você recebeu
  });
}

// QrConnect.tsx — renderiza o QR e faz polling do status (hooks do SDK)
import { useQrCode, useChannelStatus } from '@paulorbj/wpp-gateway-react';

export function QrConnect({ phoneId }: { phoneId: string }) {
  const { dataUrl } = useQrCode(phoneId);          // poll GET /v1/phones/:id/qrcode (PNG base64)
  const { status } = useChannelStatus(phoneId);    // poll do status; para em CONNECTED/FAILED

  if (status === 'CONNECTED') return <p>✅ Conectado!</p>;

  return (
    <div>
      {!dataUrl && <Spinner />}
      {dataUrl && <img src={dataUrl} alt="Escaneie no WhatsApp" width={264} height={264} />}
      <p>Abra o WhatsApp › Aparelhos conectados › Conectar aparelho</p>
      <small>Status: {status}</small>
    </div>
  );
}

// Sem o SDK React? O dataUrl já vem pronto pra <img>:
const { dataUrl } = await fetch(`${baseUrl}/v1/phones/${phoneId}/qrcode`, {
  headers: { 'X-API-Key': apiKey },
}).then((r) => r.json());
// document.querySelector('img').src = dataUrl

// Pairing code (alternativa ao QR):
const { code } = await fetch(`${baseUrl}/v1/phones/${phoneId}/pairing-code`, {
  method: 'POST',
  headers: { 'X-API-Key': apiKey, 'Content-Type': 'application/json' },
  body: JSON.stringify({ phoneNumber: '5511999998888' }),
}).then((r) => r.json()); // ex: "XXXX-XXXX"

import {
  WppGatewayProvider, usePhones, useChannelStatus,
  useGatewayClient, PhoneList, StatusBadge, Spinner,
} from '@paulorbj/wpp-gateway-react';

// 1) Provider no topo do app (uma vez só)
function App() {
  return (
    <WppGatewayProvider baseUrl="https://wpp.ogmma.com.br" apiKey={apiKey}>
      <Channels />
    </WppGatewayProvider>
  );
}

// 2) Componente pronto: lista + status + remover
function Channels() {
  return <PhoneList allowDelete filterTypes={['BAILEYS', 'WABA']} />;
}

// 3) Ou monte do seu jeito com os hooks + client
function CustomPanel() {
  const client = useGatewayClient();
  const { phones, loading, refresh } = usePhones({ autoload: true });

  const newBaileys = async () => {
    const phone = await client.createPhone({ type: 'BAILEYS', label: 'Atendimento' });
    refresh(); // phone.status === 'PENDING_QR' -> mostre o QR (receita acima)
  };

  if (loading) return <Spinner />;
  return (
    <div>
      <button onClick={newBaileys}>+ Canal Baileys</button>
      {phones.map((p) => (
        <Row key={p.id} phone={p} onDelete={() => client.deletePhone(p.id).then(refresh)} />
      ))}
    </div>
  );
}

// 4) Status ao vivo de um canal (poll a cada 3s; para em CONNECTED/FAILED)
function Row({ phone, onDelete }) {
  const client = useGatewayClient();
  const { status } = useChannelStatus(phone.id);
  return (
    <div className="row">
      <span>{phone.label}</span>
      <StatusBadge status={status ?? phone.status} />
      <button onClick={() => client.reconnect(phone.id)}>Reconectar</button>
      <button onClick={onDelete}>Remover</button>
    </div>
  );
}

// Jeito fácil — componente pronto abre o popup oficial da Meta
import { WabaEmbeddedSignup } from '@paulorbj/wpp-gateway-react';

<WabaEmbeddedSignup
  defaultLabel="Minha Empresa"
  onConnected={(phone) => router.push(`/canais/${phone.id}`)} // já vem CONNECTED
/>;

// Por baixo: o fluxo manual (se quiser controlar a UI você mesmo)
const client = useGatewayClient();

// 1) Config pública (appId, configId, graphVersion) — sem segredos
const cfg = await client.getEmbeddedSignupConfig();

// 2) Carregue o Meta JS SDK e abra o popup com o configId
FB.login((res) => onMetaResponse(res), {
  config_id: cfg.configId,
  response_type: 'code',
  override_default_response_type: true,
});

// 3) A Meta devolve { code, phone_number_id, waba_id }. Finalize no gateway:
const phone = await client.finishEmbeddedSignup({
  code, phoneNumberId, wabaId,
  label: 'Minha Empresa',
  webhook: {
    url: 'https://api.seuapp.com/wpp',
    secret: 'segredo-de-16+-chars',
    events: ['message:received', 'message:status'],
  },
});
// phone.status === 'CONNECTED' — pronto pra enviar