browser-adapter.js

const API_BASE = "http://localhost:8000";
const API_KEY = "esplive_demo_adapter_local";

async function signRequest(secret, timestamp, body) {
  const encoder = new TextEncoder();
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(secret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"]
  );

  const signature = await crypto.subtle.sign(
    "HMAC",
    key,
    encoder.encode(`${timestamp}.${body}`)
  );

  return Array.from(new Uint8Array(signature))
    .map((value) => value.toString(16).padStart(2, "0"))
    .join("");
}

async function registerSession() {
  const payload = {
    platform: "web-chat",
    tenant_id: "tenant-acme",
    bot_id: "sales-bot",
    capabilities: ["read", "send"]
  };

  const body = JSON.stringify(payload);
  const timestamp = String(Math.floor(Date.now() / 1000));
  const signature = await signRequest(API_KEY, timestamp, body);

  const response = await fetch(`${API_BASE}/api/adapter/sessions/register`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-E-SPower-API-Key": API_KEY,
      "X-E-SPower-Timestamp": timestamp,
      "X-E-SPower-Signature": signature
    },
    body
  });

  if (!response.ok) {
    throw new Error(`register failed: ${response.status}`);
  }

  return response.json();
}

async function bootAdapter() {
  const session = await registerSession();
  const socket = new WebSocket(session.websocket_url);

  socket.addEventListener("open", () => {
    console.log("adapter connected", session.connection_id);

    window.setInterval(() => {
      socket.send(
        JSON.stringify({
          org_id: "org_demo",
          app_id: "app_demo",
          platform: "web-chat",
          tenant_id: "tenant-acme",
          bot_id: "sales-bot",
          connection_id: session.connection_id,
          event_type: "session.heartbeat",
          direction: "internal",
          payload: { source: "browser-adapter-example" }
        })
      );
    }, 20000);
  });

  socket.addEventListener("message", (event) => {
    const payload = JSON.parse(event.data);
    console.log("gateway event", payload);
  });

  document.addEventListener("click", (event) => {
    const target = event.target;
    if (!(target instanceof HTMLElement)) {
      return;
    }
    if (!target.matches("[data-espl-demo-send]")) {
      return;
    }

    socket.send(
      JSON.stringify({
        org_id: "org_demo",
        app_id: "app_demo",
        platform: "web-chat",
        tenant_id: "tenant-acme",
        bot_id: "sales-bot",
        connection_id: session.connection_id,
        event_type: "message.received",
        direction: "inbound",
        payload: {
          text: target.getAttribute("data-espl-demo-send") ?? "demo message",
          page_url: location.href
        }
      })
    );
  });
}

bootAdapter().catch((error) => {
  console.error("adapter bootstrap failed", error);
});