@callembed/elements 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,528 @@
+import { CallEmbed, CallEmbedError } from '@callembed/sdk';
+import { resolveCopy, friendlyErrorMessage } from '@callembed/sdk/ui';
+export { enCopy, friendlyErrorMessage, resolveCopy, zhTwCopy } from '@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 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 ?? 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 {
+      CallEmbed.init({
+        publishableKey,
+        apiBaseUrl,
+        locale,
+        branding,
+        debug
+      });
+      const runtime = 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 ?? 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 CallEmbedError(
+          "invalid_queue",
+          "queue is required (set the queue attribute)."
+        );
+      }
+      this.#error = null;
+      this.#muted = false;
+      const call = await 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 CallEmbedError) throw err;
+      throw new CallEmbedError("call_failed", state.message);
+    }
+  }
+  async #end() {
+    const call = this.#call ?? 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 = resolveCopy(runtimeForCopy(this.#locale));
+    const ui = this.uiState;
+    const inCall = ui === "ringing" || ui === "connected";
+    const labelAttr = this.getAttribute("label");
+    const buttonLabel = inCall ? copy.hangup : labelAttr ?? copy.launchDefault;
+    const statusText = ui === "error" && this.#error ? friendlyErrorMessage(copy, this.#error.code, this.#error.message) : statusLabel(copy, ui, this.#status);
+    const tone = ui === "error" ? "error" : ui === "connected" ? "ok" : void 0;
+    this.#root.replaceChildren();
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "ce-el-button";
+    btn.dataset.state = ui;
+    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;
+      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;
+}
+
+// src/index.ts
+defineCallEmbedButton();
+
+export { TAG as CALLEMBED_BUTTON_TAG, CallEmbedButtonElement, defineCallEmbedButton, statusLabel, toUiState };

package/package.json

@@ -1,6 +1,83 @@
 {
   "name": "@callembed/elements",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Framework-agnostic CallEmbed Web Component (thin wrapper over @callembed/sdk)",
+  "license": "MIT",
+  "author": "Sealby",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/callembed-elements.iife.js",
+  "jsdelivr": "./dist/callembed-elements.iife.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "./dist/index.js",
+    "./dist/index.cjs",
+    "./dist/callembed-elements.iife.js"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup && node ./scripts/build-iife.mjs",
+    "prepack": "npm run build",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "pack:verify": "node ./scripts/pack-verify.mjs"
+  },
+  "homepage": "https://callembed.sealby.me",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TonyFeng1203/CallEmbed.git",
+    "directory": "packages/elements"
+  },
+  "bugs": {
+    "url": "https://github.com/TonyFeng1203/CallEmbed/issues"
+  },
+  "keywords": [
+    "callembed",
+    "web-components",
+    "custom-elements",
+    "voice",
+    "webrtc",
+    "livekit",
+    "customer-support"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@callembed/sdk": "^0.1.0",
+    "livekit-client": "^2.13.0"
+  },
+  "peerDependenciesMeta": {
+    "livekit-client": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@callembed/sdk": "^0.1.0",
+    "esbuild": "0.25.4",
+    "jsdom": "26.1.0",
+    "livekit-client": "^2.13.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.3",
+    "vitest": "3.2.7"
+  }
+}