@callembed/elements 0.0.0-stage → 0.1.2

package/dist/index.cjs

@@ -0,0 +1,555 @@
+'use strict';
+
+var sdk = require('@callembed/sdk');
+var ui = require('@callembed/sdk/ui');
+
+// src/callembed-button.ts
+function statusLabel(copy, uiState, sdkStatus) {
+  switch (uiState) {
+    case "idle":
+      return copy.ready;
+    case "ringing":
+      return sdkStatus === "connecting" ? copy.connecting : copy.ringing;
+    case "connected":
+      return copy.answered;
+    case "ended":
+      return copy.ended;
+    case "error":
+      return copy.error;
+    default:
+      return copy.ready;
+  }
+}
+function runtimeForCopy(locale, copyOverrides = {}) {
+  return {
+    publishableKey: "",
+    apiBaseUrl: "",
+    locale,
+    copyOverrides,
+    branding: true,
+    debug: false
+  };
+}
+
+// src/styles.ts
+var ELEMENT_STYLES = `
+:where(.ce-el-button, .ce-el-status, .ce-el-mute) {
+  font-family: var(
+    --ce-font,
+    "Noto Sans TC",
+    "IBM Plex Sans",
+    "Segoe UI",
+    sans-serif
+  );
+  color: var(--ce-fg, #e8eef4);
+}
+
+.ce-el-root {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.ce-el-button {
+  appearance: none;
+  display: inline-block;
+  border: 1px solid var(--ce-border, #2a3a46);
+  border-radius: var(--ce-radius, 0);
+  background: color-mix(in srgb, var(--ce-accent, #5eb0d8) 25%, transparent);
+  color: var(--ce-fg, #e8eef4);
+  padding: 0.7rem 1.1rem;
+  font-size: inherit;
+  cursor: pointer;
+}
+
+.ce-el-button:hover {
+  border-color: var(--ce-accent, #5eb0d8);
+}
+
+.ce-el-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ce-el-button[data-state="ringing"],
+.ce-el-button[data-state="connected"] {
+  border-color: color-mix(
+    in srgb,
+    var(--ce-danger, #c44b4b) 55%,
+    var(--ce-border, #2a3a46)
+  );
+  color: var(--ce-error, #f0c4c4);
+  background: transparent;
+}
+
+.ce-el-status {
+  margin: 0;
+  color: var(--ce-muted, #9aadb8);
+  font-size: 0.9rem;
+  line-height: 1.4;
+  min-height: 1.25em;
+}
+
+.ce-el-status[data-tone="error"] {
+  color: var(--ce-error, #f0c4c4);
+}
+
+.ce-el-status[data-tone="ok"] {
+  color: var(--ce-ok, #9fd6c0);
+}
+
+.ce-el-mute {
+  appearance: none;
+  border: 1px solid var(--ce-border, #2a3a46);
+  border-radius: var(--ce-radius, 0);
+  background: transparent;
+  color: inherit;
+  padding: 0.45rem 0.75rem;
+  font: inherit;
+  cursor: pointer;
+}
+
+.ce-el-mute:hover {
+  border-color: var(--ce-accent, #5eb0d8);
+}
+
+.ce-el-mute:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+`;
+
+// src/types.ts
+function toUiState(status) {
+  switch (status) {
+    case "connecting":
+    case "ringing":
+      return "ringing";
+    case "answered":
+      return "connected";
+    case "ended":
+      return "ended";
+    case "error":
+      return "error";
+    case "idle":
+    default:
+      return "idle";
+  }
+}
+
+// src/callembed-button.ts
+var TAG = "callembed-button";
+function toErrorState(err) {
+  if (err instanceof sdk.CallEmbedError) {
+    return { code: err.code, message: err.message };
+  }
+  return {
+    code: "call_failed",
+    message: err instanceof Error ? err.message : String(err)
+  };
+}
+function isActiveStatus(status) {
+  return status === "connecting" || status === "ringing" || status === "answered";
+}
+function parseLocale(raw) {
+  if (raw === "en" || raw === "zh-TW") return raw;
+  return void 0;
+}
+var CallEmbedButtonElement = class extends HTMLElement {
+  static get observedAttributes() {
+    return [
+      "publishable-key",
+      "api-base-url",
+      "locale",
+      "queue",
+      "label",
+      "show-status",
+      "show-mute",
+      "branding",
+      "debug"
+    ];
+  }
+  #status = "idle";
+  #callId = null;
+  #muted = false;
+  #error = null;
+  #locale = "en";
+  #busy = false;
+  #call = null;
+  #unbind = null;
+  #root = null;
+  #styleEl = null;
+  #initialized = false;
+  #attrInitKey = null;
+  get uiState() {
+    return toUiState(this.#status);
+  }
+  get callStatus() {
+    return this.#status;
+  }
+  get callId() {
+    return this.#callId;
+  }
+  get muted() {
+    return this.#muted;
+  }
+  get error() {
+    return this.#error;
+  }
+  connectedCallback() {
+    this.#ensureDom();
+    this.#syncFromAttributes(
+      /* hangUpOnEndpointChange */
+      false
+    );
+    this.#render();
+  }
+  disconnectedCallback() {
+    this.#hangUpActive();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (!this.isConnected) return;
+    const endpointChanged = name === "publishable-key" || name === "api-base-url";
+    this.#syncFromAttributes(endpointChanged);
+    this.#render();
+  }
+  /** Start a queue call (customer-service ring → agent answers). */
+  async start() {
+    return this.#start();
+  }
+  /** Hang up the active call (idempotent). */
+  async end() {
+    return this.#end();
+  }
+  async setMuted(muted) {
+    const call = this.#call ?? sdk.CallEmbed.getActiveCall();
+    if (!call) {
+      this.#muted = muted;
+      this.#emitState();
+      this.#render();
+      return;
+    }
+    await call.setMuted(muted);
+  }
+  #ensureDom() {
+    if (this.#root) return;
+    this.#styleEl = document.createElement("style");
+    this.#styleEl.textContent = ELEMENT_STYLES;
+    this.appendChild(this.#styleEl);
+    this.#root = document.createElement("div");
+    this.#root.className = "ce-el-root";
+    this.#root.setAttribute("data-ce-el", "");
+    this.appendChild(this.#root);
+  }
+  #syncFromAttributes(hangUpOnEndpointChange) {
+    const publishableKey = this.getAttribute("publishable-key") ?? "";
+    const apiBaseUrl = this.getAttribute("api-base-url");
+    const locale = parseLocale(this.getAttribute("locale"));
+    const brandingAttr = this.getAttribute("branding");
+    const branding = brandingAttr !== "false";
+    const debug = this.getAttribute("debug") === "true";
+    const initKey = JSON.stringify({
+      publishableKey,
+      apiBaseUrl: apiBaseUrl ?? "",
+      locale: locale ?? null,
+      branding,
+      debug
+    });
+    if (hangUpOnEndpointChange && this.#attrInitKey !== null) {
+      const prev = JSON.parse(this.#attrInitKey);
+      if (prev.publishableKey !== publishableKey || prev.apiBaseUrl !== (apiBaseUrl ?? "")) {
+        this.#hangUpActive();
+      }
+    }
+    if (initKey === this.#attrInitKey && this.#initialized) {
+      return;
+    }
+    this.#attrInitKey = initKey;
+    if (!publishableKey || apiBaseUrl === null) {
+      return;
+    }
+    try {
+      sdk.CallEmbed.init({
+        publishableKey,
+        apiBaseUrl,
+        locale,
+        branding,
+        debug
+      });
+      const runtime = sdk.CallEmbed._getRuntime();
+      if (runtime) this.#locale = runtime.locale;
+      this.#initialized = true;
+    } catch (err) {
+      const state = toErrorState(err);
+      this.#error = state;
+      this.#status = "error";
+      this.#emitError(state);
+      this.#emitState();
+    }
+  }
+  #hangUpActive() {
+    this.#unbind?.();
+    this.#unbind = null;
+    const call = this.#call ?? sdk.CallEmbed.getActiveCall();
+    this.#call = null;
+    if (call && isActiveStatus(call.status)) {
+      void call.hangUp();
+    }
+  }
+  async #start() {
+    try {
+      const queue = this.getAttribute("queue") ?? "";
+      if (!queue.trim()) {
+        throw new sdk.CallEmbedError(
+          "invalid_queue",
+          "queue is required (set the queue attribute)."
+        );
+      }
+      this.#error = null;
+      this.#muted = false;
+      const call = await sdk.CallEmbed.startCall({
+        queue,
+        hidePanel: true,
+        on: {
+          statusChange: ({ status }) => {
+            this.#status = status;
+            this.#emitState();
+            this.#render();
+          },
+          muteChange: ({ muted }) => {
+            this.#muted = muted;
+            this.#emitState();
+            this.#render();
+          },
+          error: ({ code, message, callId }) => {
+            this.#error = { code, message };
+            this.#status = "error";
+            if (callId && callId !== "pending") this.#callId = callId;
+            this.#emitError(this.#error);
+            this.#emitState();
+            this.#render();
+          },
+          ended: ({ callId }) => {
+            this.#status = "ended";
+            if (callId && callId !== "pending") this.#callId = callId;
+            this.#emitState();
+            this.#render();
+          },
+          ringing: ({ callId }) => {
+            this.#callId = callId;
+            this.#emitState();
+          },
+          answered: ({ callId }) => {
+            this.#callId = callId;
+            this.#emitState();
+          }
+        }
+      });
+      this.#unbind?.();
+      this.#call = call;
+      this.#status = call.status;
+      if (call.callId !== "pending") this.#callId = call.callId;
+      this.#unbind = this.#bindCall(call);
+      this.#emitState();
+      this.#render();
+      return call;
+    } catch (err) {
+      const state = toErrorState(err);
+      this.#error = state;
+      this.#status = "error";
+      this.#emitError(state);
+      this.#emitState();
+      this.#render();
+      if (err instanceof sdk.CallEmbedError) throw err;
+      throw new sdk.CallEmbedError("call_failed", state.message);
+    }
+  }
+  async #end() {
+    const call = this.#call ?? sdk.CallEmbed.getActiveCall();
+    if (!call) {
+      this.#status = "idle";
+      this.#emitState();
+      this.#render();
+      return;
+    }
+    await call.hangUp();
+  }
+  #bindCall(call) {
+    const offs = [
+      call.on("statusChange", ({ status }) => {
+        this.#status = status;
+        if (call.callId && call.callId !== "pending") {
+          this.#callId = call.callId;
+        }
+        this.#emitState();
+        this.#render();
+      }),
+      call.on("muteChange", ({ muted }) => {
+        this.#muted = muted;
+        this.#emitState();
+        this.#render();
+      }),
+      call.on("error", ({ code, message, callId }) => {
+        this.#error = { code, message };
+        this.#status = "error";
+        if (callId && callId !== "pending") this.#callId = callId;
+        this.#emitError(this.#error);
+        this.#emitState();
+        this.#render();
+      }),
+      call.on("ended", ({ callId }) => {
+        this.#status = "ended";
+        if (callId && callId !== "pending") this.#callId = callId;
+        this.#emitState();
+        this.#render();
+      })
+    ];
+    return () => {
+      offs.forEach((off) => off());
+    };
+  }
+  #emitState() {
+    this.dispatchEvent(
+      new CustomEvent("callembed:state", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          uiState: this.uiState,
+          status: this.#status,
+          callId: this.#callId,
+          muted: this.#muted,
+          error: this.#error
+        }
+      })
+    );
+  }
+  #emitError(error) {
+    this.dispatchEvent(
+      new CustomEvent("callembed:error", {
+        bubbles: true,
+        composed: true,
+        detail: { code: error.code, message: error.message }
+      })
+    );
+  }
+  #showStatus() {
+    const v = this.getAttribute("show-status");
+    return v !== "false";
+  }
+  #showMute() {
+    const v = this.getAttribute("show-mute");
+    return v !== "false";
+  }
+  #render() {
+    if (!this.#root) return;
+    const copy = ui.resolveCopy(runtimeForCopy(this.#locale));
+    const ui$1 = this.uiState;
+    const inCall = ui$1 === "ringing" || ui$1 === "connected";
+    const labelAttr = this.getAttribute("label");
+    const buttonLabel = inCall ? copy.hangup : labelAttr ?? copy.launchDefault;
+    const statusText = ui$1 === "error" && this.#error ? ui.friendlyErrorMessage(copy, this.#error.code, this.#error.message) : statusLabel(copy, ui$1, this.#status);
+    const tone = ui$1 === "error" ? "error" : ui$1 === "connected" ? "ok" : void 0;
+    this.#root.replaceChildren();
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "ce-el-button";
+    btn.dataset.state = ui$1;
+    btn.disabled = this.#busy;
+    if (this.#busy) btn.setAttribute("aria-busy", "true");
+    btn.textContent = buttonLabel;
+    btn.addEventListener("click", () => {
+      void this.#onMainClick();
+    });
+    this.#root.appendChild(btn);
+    if (this.#showMute() && inCall) {
+      const muteBtn = document.createElement("button");
+      muteBtn.type = "button";
+      muteBtn.className = "ce-el-mute";
+      muteBtn.disabled = this.#busy;
+      muteBtn.textContent = this.#muted ? copy.unmute : copy.mute;
+      muteBtn.addEventListener("click", () => {
+        void this.#onMuteClick();
+      });
+      this.#root.appendChild(muteBtn);
+    }
+    if (this.#showStatus()) {
+      const statusEl = document.createElement("p");
+      statusEl.className = "ce-el-status";
+      statusEl.dataset.state = ui$1;
+      if (tone) statusEl.dataset.tone = tone;
+      statusEl.textContent = statusText;
+      this.#root.appendChild(statusEl);
+    }
+  }
+  async #onMainClick() {
+    if (this.#busy) return;
+    this.#busy = true;
+    this.#render();
+    try {
+      const ui = this.uiState;
+      if (ui === "ringing" || ui === "connected") {
+        await this.#end();
+      } else {
+        await this.#start();
+      }
+    } catch {
+    } finally {
+      this.#busy = false;
+      this.#render();
+    }
+  }
+  async #onMuteClick() {
+    if (this.#busy) return;
+    this.#busy = true;
+    this.#render();
+    try {
+      await this.setMuted(!this.#muted);
+    } catch {
+    } finally {
+      this.#busy = false;
+      this.#render();
+    }
+  }
+};
+function defineCallEmbedButton(tagName = TAG) {
+  if (typeof customElements === "undefined") {
+    return CallEmbedButtonElement;
+  }
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, CallEmbedButtonElement);
+  }
+  return CallEmbedButtonElement;
+}
+defineCallEmbedButton();
+
+Object.defineProperty(exports, "DEFAULT_HOSTED_EMBED_ORIGIN", {
+  enumerable: true,
+  get: function () { return sdk.DEFAULT_HOSTED_EMBED_ORIGIN; }
+});
+Object.defineProperty(exports, "DEFAULT_HOSTED_EMBED_URL", {
+  enumerable: true,
+  get: function () { return sdk.DEFAULT_HOSTED_EMBED_URL; }
+});
+Object.defineProperty(exports, "enCopy", {
+  enumerable: true,
+  get: function () { return ui.enCopy; }
+});
+Object.defineProperty(exports, "friendlyErrorMessage", {
+  enumerable: true,
+  get: function () { return ui.friendlyErrorMessage; }
+});
+Object.defineProperty(exports, "resolveCopy", {
+  enumerable: true,
+  get: function () { return ui.resolveCopy; }
+});
+Object.defineProperty(exports, "zhTwCopy", {
+  enumerable: true,
+  get: function () { return ui.zhTwCopy; }
+});
+exports.CALLEMBED_BUTTON_TAG = TAG;
+exports.CallEmbedButtonElement = CallEmbedButtonElement;
+exports.defineCallEmbedButton = defineCallEmbedButton;
+exports.statusLabel = statusLabel;
+exports.toUiState = toUiState;

package/dist/index.d.cts

@@ -0,0 +1,56 @@
+import { CallStatus, ActiveCall } from '@callembed/sdk';
+export { ActiveCall, CallStatus, DEFAULT_HOSTED_EMBED_ORIGIN, DEFAULT_HOSTED_EMBED_URL, InitOptions, Locale, StartCallOptions } from '@callembed/sdk';
+import { PanelCopy } from '@callembed/sdk/ui';
+export { PanelCopy, enCopy, friendlyErrorMessage, resolveCopy, zhTwCopy } from '@callembed/sdk/ui';
+
+/**
+ * Simplified UI lifecycle for `<callembed-button>`.
+ * Maps onto SDK {@link CallStatus}:
+ * - `connecting` | `ringing` → `ringing`
+ * - `answered` → `connected`
+ */
+type CallEmbedUiState = "idle" | "ringing" | "connected" | "ended" | "error";
+declare function toUiState(status: CallStatus | "idle"): CallEmbedUiState;
+interface CallEmbedErrorState {
+    code: string;
+    message: string;
+}
+
+declare const TAG = "callembed-button";
+/**
+ * Framework-agnostic `<callembed-button>` custom element.
+ *
+ * Attributes: `publishable-key`, `api-base-url`, `locale` (`en` | `zh-TW`),
+ * `queue`, `label`, `show-status`, `show-mute`, `branding`, `debug`.
+ *
+ * Events: `callembed:state` (detail: `{ uiState, status, callId, muted }`),
+ * `callembed:error` (detail: `{ code, message }`).
+ *
+ * Hangs up on `disconnectedCallback` and when `publishable-key` / `api-base-url` change.
+ */
+declare class CallEmbedButtonElement extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    get uiState(): CallEmbedUiState;
+    get callStatus(): CallStatus | "idle";
+    get callId(): string | null;
+    get muted(): boolean;
+    get error(): CallEmbedErrorState | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /** Start a queue call (customer-service ring → agent answers). */
+    start(): Promise<ActiveCall>;
+    /** Hang up the active call (idempotent). */
+    end(): Promise<void>;
+    setMuted(muted: boolean): Promise<void>;
+}
+/**
+ * Registers `<callembed-button>` when `customElements` is available.
+ * Safe to import under SSR (Node / Nuxt): no-op when `customElements` is missing.
+ */
+declare function defineCallEmbedButton(tagName?: string): typeof CallEmbedButtonElement;
+
+declare function statusLabel(copy: PanelCopy, uiState: CallEmbedUiState, sdkStatus: string): string;
+
+export { TAG as CALLEMBED_BUTTON_TAG, CallEmbedButtonElement, type CallEmbedErrorState, type CallEmbedUiState, defineCallEmbedButton, statusLabel, toUiState };

package/dist/index.d.ts

@@ -0,0 +1,56 @@
+import { CallStatus, ActiveCall } from '@callembed/sdk';
+export { ActiveCall, CallStatus, DEFAULT_HOSTED_EMBED_ORIGIN, DEFAULT_HOSTED_EMBED_URL, InitOptions, Locale, StartCallOptions } from '@callembed/sdk';
+import { PanelCopy } from '@callembed/sdk/ui';
+export { PanelCopy, enCopy, friendlyErrorMessage, resolveCopy, zhTwCopy } from '@callembed/sdk/ui';
+
+/**
+ * Simplified UI lifecycle for `<callembed-button>`.
+ * Maps onto SDK {@link CallStatus}:
+ * - `connecting` | `ringing` → `ringing`
+ * - `answered` → `connected`
+ */
+type CallEmbedUiState = "idle" | "ringing" | "connected" | "ended" | "error";
+declare function toUiState(status: CallStatus | "idle"): CallEmbedUiState;
+interface CallEmbedErrorState {
+    code: string;
+    message: string;
+}
+
+declare const TAG = "callembed-button";
+/**
+ * Framework-agnostic `<callembed-button>` custom element.
+ *
+ * Attributes: `publishable-key`, `api-base-url`, `locale` (`en` | `zh-TW`),
+ * `queue`, `label`, `show-status`, `show-mute`, `branding`, `debug`.
+ *
+ * Events: `callembed:state` (detail: `{ uiState, status, callId, muted }`),
+ * `callembed:error` (detail: `{ code, message }`).
+ *
+ * Hangs up on `disconnectedCallback` and when `publishable-key` / `api-base-url` change.
+ */
+declare class CallEmbedButtonElement extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    get uiState(): CallEmbedUiState;
+    get callStatus(): CallStatus | "idle";
+    get callId(): string | null;
+    get muted(): boolean;
+    get error(): CallEmbedErrorState | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /** Start a queue call (customer-service ring → agent answers). */
+    start(): Promise<ActiveCall>;
+    /** Hang up the active call (idempotent). */
+    end(): Promise<void>;
+    setMuted(muted: boolean): Promise<void>;
+}
+/**
+ * Registers `<callembed-button>` when `customElements` is available.
+ * Safe to import under SSR (Node / Nuxt): no-op when `customElements` is missing.
+ */
+declare function defineCallEmbedButton(tagName?: string): typeof CallEmbedButtonElement;
+
+declare function statusLabel(copy: PanelCopy, uiState: CallEmbedUiState, sdkStatus: string): string;
+
+export { TAG as CALLEMBED_BUTTON_TAG, CallEmbedButtonElement, type CallEmbedErrorState, type CallEmbedUiState, defineCallEmbedButton, statusLabel, toUiState };