@callembed/vue 0.0.0-stage → 0.1.2

package/dist/index.js

@@ -0,0 +1,444 @@
+import { CallEmbed, CallEmbedError } from '@callembed/sdk';
+import { defineComponent, ref, computed, watch, reactive, provide, h, inject } from 'vue';
+import { resolveCopy, friendlyErrorMessage } from '@callembed/sdk/ui';
+export { enCopy, friendlyErrorMessage, resolveCopy, zhTwCopy } from '@callembed/sdk/ui';
+
+// src/provider.ts
+
+// 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";
+  }
+}
+var CALL_EMBED_KEY = /* @__PURE__ */ Symbol("callembed");
+
+// src/provider.ts
+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 bindCall(call, handlers) {
+  const offs = [
+    call.on("statusChange", ({ status }) => {
+      handlers.setStatus(status);
+      if (call.callId && call.callId !== "pending") {
+        handlers.setCallId(call.callId);
+      }
+    }),
+    call.on("muteChange", ({ muted }) => {
+      handlers.setMuted(muted);
+    }),
+    call.on("error", ({ code, message, callId }) => {
+      handlers.setError({ code, message });
+      handlers.setStatus("error");
+      if (callId && callId !== "pending") handlers.setCallId(callId);
+    }),
+    call.on("ended", ({ callId }) => {
+      handlers.setStatus("ended");
+      if (callId && callId !== "pending") handlers.setCallId(callId);
+    })
+  ];
+  return () => {
+    offs.forEach((off) => off());
+  };
+}
+var CallEmbedProvider = defineComponent({
+  name: "CallEmbedProvider",
+  props: {
+    publishableKey: { type: String, required: true },
+    apiBaseUrl: { type: String, required: true },
+    locale: { type: String, default: void 0 },
+    copy: {
+      type: Object,
+      default: void 0
+    },
+    branding: { type: Boolean, default: void 0 },
+    debug: { type: Boolean, default: void 0 },
+    queue: { type: String, default: void 0 }
+  },
+  slots: Object,
+  setup(props, { slots }) {
+    const status = ref("idle");
+    const callId = ref(null);
+    const muted = ref(false);
+    const error = ref(null);
+    const resolvedLocale = ref(props.locale ?? "en");
+    const callRef = ref(null);
+    let unbind = null;
+    const copyKey = computed(() => JSON.stringify(props.copy ?? {}));
+    const brandingValue = computed(() => props.branding !== false);
+    function hangUpActive() {
+      unbind?.();
+      unbind = null;
+      const call = callRef.value ?? CallEmbed.getActiveCall();
+      callRef.value = null;
+      if (call && isActiveStatus(call.status)) {
+        void call.hangUp();
+      }
+    }
+    function runInit() {
+      if (typeof window === "undefined") return;
+      try {
+        CallEmbed.init({
+          publishableKey: props.publishableKey,
+          apiBaseUrl: props.apiBaseUrl,
+          locale: props.locale,
+          copy: props.copy,
+          branding: props.branding,
+          debug: props.debug
+        });
+        const runtime = CallEmbed._getRuntime();
+        if (runtime) resolvedLocale.value = runtime.locale;
+      } catch (err) {
+        const state = toErrorState(err);
+        error.value = state;
+        status.value = "error";
+      }
+    }
+    watch(
+      () => [
+        props.publishableKey,
+        props.apiBaseUrl,
+        props.locale,
+        copyKey.value,
+        brandingValue.value,
+        props.debug
+      ],
+      () => {
+        runInit();
+      },
+      { immediate: true }
+    );
+    watch(
+      () => [props.publishableKey, props.apiBaseUrl],
+      (_next, _prev, onCleanup) => {
+        onCleanup(() => {
+          hangUpActive();
+        });
+      },
+      { immediate: true }
+    );
+    async function start(options = {}) {
+      try {
+        const q = options.queue ?? props.queue;
+        if (!q?.trim()) {
+          throw new CallEmbedError(
+            "invalid_queue",
+            "queue is required (pass queue on the provider, button, or start())."
+          );
+        }
+        error.value = null;
+        muted.value = false;
+        const userOn = options.on;
+        const call = await CallEmbed.startCall({
+          ...options,
+          queue: q,
+          hidePanel: true,
+          on: {
+            ...userOn,
+            statusChange: (payload) => {
+              status.value = payload.status;
+              userOn?.statusChange?.(payload);
+            },
+            muteChange: (payload) => {
+              muted.value = payload.muted;
+              userOn?.muteChange?.(payload);
+            },
+            error: (payload) => {
+              error.value = { code: payload.code, message: payload.message };
+              status.value = "error";
+              if (payload.callId && payload.callId !== "pending") {
+                callId.value = payload.callId;
+              }
+              userOn?.error?.(payload);
+            },
+            ended: (payload) => {
+              status.value = "ended";
+              if (payload.callId && payload.callId !== "pending") {
+                callId.value = payload.callId;
+              }
+              userOn?.ended?.(payload);
+            },
+            ringing: (payload) => {
+              callId.value = payload.callId;
+              userOn?.ringing?.(payload);
+            },
+            answered: (payload) => {
+              callId.value = payload.callId;
+              userOn?.answered?.(payload);
+            }
+          }
+        });
+        unbind?.();
+        callRef.value = call;
+        status.value = call.status;
+        if (call.callId !== "pending") callId.value = call.callId;
+        unbind = bindCall(call, {
+          setStatus: (s) => {
+            status.value = s;
+          },
+          setCallId: (id) => {
+            callId.value = id;
+          },
+          setMuted: (m) => {
+            muted.value = m;
+          },
+          setError: (e) => {
+            error.value = e;
+          }
+        });
+        return call;
+      } catch (err) {
+        const state = toErrorState(err);
+        error.value = state;
+        status.value = "error";
+        if (err instanceof CallEmbedError) throw err;
+        throw new CallEmbedError("call_failed", state.message);
+      }
+    }
+    async function end() {
+      const call = callRef.value ?? CallEmbed.getActiveCall();
+      if (!call) {
+        status.value = "idle";
+        return;
+      }
+      await call.hangUp();
+    }
+    async function setMuted(next) {
+      const call = callRef.value ?? CallEmbed.getActiveCall();
+      if (!call) {
+        muted.value = next;
+        return;
+      }
+      await call.setMuted(next);
+    }
+    const api = reactive({
+      get status() {
+        return status.value;
+      },
+      get uiState() {
+        return toUiState(status.value);
+      },
+      get callId() {
+        return callId.value;
+      },
+      get muted() {
+        return muted.value;
+      },
+      get error() {
+        return error.value;
+      },
+      get locale() {
+        return resolvedLocale.value;
+      },
+      start,
+      end,
+      setMuted,
+      get defaultQueue() {
+        return props.queue;
+      }
+    });
+    provide(CALL_EMBED_KEY, api);
+    return () => slots.default?.();
+  }
+});
+function useCallEmbed() {
+  const ctx = inject(CALL_EMBED_KEY, null);
+  if (!ctx) {
+    throw new Error("useCallEmbed() must be used within <CallEmbedProvider>.");
+  }
+  return ctx;
+}
+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/CallEmbedButton.ts
+var CallEmbedButton = defineComponent({
+  name: "CallEmbedButton",
+  props: {
+    /** Queue to ring. Falls back to `CallEmbedProvider` `queue`. */
+    queue: { type: String, default: void 0 },
+    /** Idle-state label; defaults to locale `launchDefault`. */
+    label: { type: String, default: void 0 },
+    /** Optional metadata forwarded to `startCall`. */
+    metadata: {
+      type: Object,
+      default: void 0
+    },
+    /** Optional caller display name. */
+    displayName: { type: String, default: void 0 },
+    /** Show a status line under the button. Default: `true`. */
+    showStatus: { type: Boolean, default: true },
+    /** Show mute control while ringing/connected. Default: `true`. */
+    showMute: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: {
+    error: (_error) => true
+  },
+  setup(props, { emit, attrs }) {
+    const embed = useCallEmbed();
+    const busy = ref(false);
+    const copy = computed(() => resolveCopy(runtimeForCopy(embed.locale)));
+    const inCall = computed(
+      () => embed.uiState === "ringing" || embed.uiState === "connected"
+    );
+    const buttonLabel = computed(
+      () => inCall.value ? copy.value.hangup : props.label ?? copy.value.launchDefault
+    );
+    const statusText = computed(() => {
+      if (embed.uiState === "error" && embed.error) {
+        return friendlyErrorMessage(
+          copy.value,
+          embed.error.code,
+          embed.error.message
+        );
+      }
+      return statusLabel(copy.value, embed.uiState, embed.status);
+    });
+    const tone = computed(
+      () => embed.uiState === "error" ? "error" : embed.uiState === "connected" ? "ok" : void 0
+    );
+    async function onClick() {
+      if (busy.value) return;
+      busy.value = true;
+      try {
+        if (inCall.value) {
+          await embed.end();
+        } else {
+          await embed.start({
+            queue: props.queue ?? embed.defaultQueue,
+            metadata: props.metadata,
+            displayName: props.displayName
+          });
+        }
+      } catch (err) {
+        const ce = err instanceof CallEmbedError ? err : new CallEmbedError(
+          "call_failed",
+          err instanceof Error ? err.message : String(err)
+        );
+        emit("error", ce);
+      } finally {
+        busy.value = false;
+      }
+    }
+    async function onMuteClick() {
+      if (busy.value) return;
+      busy.value = true;
+      try {
+        await embed.setMuted(!embed.muted);
+      } catch (err) {
+        const ce = err instanceof CallEmbedError ? err : new CallEmbedError(
+          "call_failed",
+          err instanceof Error ? err.message : String(err)
+        );
+        emit("error", ce);
+      } finally {
+        busy.value = false;
+      }
+    }
+    return () => {
+      const rootClass = ["ce-vue-root", attrs.class].filter(Boolean).join(" ");
+      const children = [
+        h(
+          "button",
+          {
+            type: "button",
+            class: "ce-vue-button",
+            "data-state": embed.uiState,
+            disabled: props.disabled || busy.value,
+            "aria-busy": busy.value || void 0,
+            onClick: () => {
+              void onClick();
+            }
+          },
+          buttonLabel.value
+        )
+      ];
+      if (props.showMute && inCall.value) {
+        children.push(
+          h(
+            "button",
+            {
+              type: "button",
+              class: "ce-vue-mute",
+              disabled: busy.value,
+              onClick: () => {
+                void onMuteClick();
+              }
+            },
+            embed.muted ? copy.value.unmute : copy.value.mute
+          )
+        );
+      }
+      if (props.showStatus) {
+        children.push(
+          h(
+            "p",
+            {
+              class: "ce-vue-status",
+              "data-tone": tone.value,
+              "data-state": embed.uiState
+            },
+            statusText.value
+          )
+        );
+      }
+      return h("div", { class: rootClass, "data-ce-vue": "" }, children);
+    };
+  }
+});
+
+// src/plugin.ts
+var CallEmbedPlugin = {
+  install(app, options = {}) {
+    app.component(options.providerName ?? "CallEmbedProvider", CallEmbedProvider);
+    app.component(options.buttonName ?? "CallEmbedButton", CallEmbedButton);
+  }
+};
+
+export { CALL_EMBED_KEY, CallEmbedButton, CallEmbedPlugin, CallEmbedProvider, statusLabel, toUiState, useCallEmbed };

package/dist/styles.css

@@ -0,0 +1,89 @@
+/**
+ * Default styles for `@callembed/vue`.
+ * Theme via `--ce-*` (same public tokens as `@callembed/sdk/ui`).
+ */
+:where(.ce-vue-button, .ce-vue-status, .ce-vue-mute) {
+  font-family: var(
+    --ce-font,
+    "Noto Sans TC",
+    "IBM Plex Sans",
+    "Segoe UI",
+    sans-serif
+  );
+  color: var(--ce-fg, #e8eef4);
+}
+
+.ce-vue-root {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.ce-vue-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-vue-button:hover {
+  border-color: var(--ce-accent, #5eb0d8);
+}
+
+.ce-vue-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ce-vue-button[data-state="ringing"],
+.ce-vue-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-vue-status {
+  margin: 0;
+  color: var(--ce-muted, #9aadb8);
+  font-size: 0.9rem;
+  line-height: 1.4;
+  min-height: 1.25em;
+}
+
+.ce-vue-status[data-tone="error"] {
+  color: var(--ce-error, #f0c4c4);
+}
+
+.ce-vue-status[data-tone="ok"] {
+  color: var(--ce-ok, #9fd6c0);
+}
+
+.ce-vue-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-vue-mute:hover {
+  border-color: var(--ce-accent, #5eb0d8);
+}
+
+.ce-vue-mute:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/package.json

@@ -1,6 +1,82 @@
 {
   "name": "@callembed/vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.2",
+  "description": "Vue 3 components and composables for CallEmbed (thin wrapper over @callembed/sdk)",
+  "license": "MIT",
+  "author": "Sealby",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "./dist/styles.css"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup && node ./scripts/copy-css.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/vue"
+  },
+  "bugs": {
+    "url": "https://github.com/TonyFeng1203/CallEmbed/issues"
+  },
+  "keywords": [
+    "callembed",
+    "vue",
+    "nuxt",
+    "voice",
+    "webrtc",
+    "livekit",
+    "customer-support"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@callembed/sdk": "^0.1.2",
+    "livekit-client": "^2.13.0",
+    "vue": "^3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "livekit-client": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@callembed/sdk": "^0.1.2",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "26.1.0",
+    "livekit-client": "^2.13.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.3",
+    "vitest": "3.2.7",
+    "vue": "^3.5.13"
+  }
+}