@matterfact/embed 0.16.0 → 0.18.0

package/dist/index.cjs

@@ -12,6 +12,190 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
+// src/deeplink.ts
+var deeplink_exports = {};
+__export(deeplink_exports, {
+  compileDeeplink: () => compileDeeplink,
+  compileDeeplinkFormat: () => compileDeeplinkFormat,
+  installDeeplinkWatch: () => installDeeplinkWatch
+});
+function compileDeeplinkFormat(format) {
+  return compileDeeplink(format)?.match ?? null;
+}
+function compileDeeplink(format) {
+  if (format.includes(PATH_TOKEN)) return compileDynamic(format);
+  const match = compileStatic(format);
+  return match ? { match, mintFormat: () => format, dynamic: false } : null;
+}
+function compileDynamic(format) {
+  const pi = format.indexOf(PATH_TOKEN);
+  if (format.indexOf(PATH_TOKEN, pi + 1) >= 0) return null;
+  let prefix = format.slice(0, pi);
+  if (prefix.endsWith("/")) prefix = prefix.slice(0, -1);
+  const suffix = format.slice(pi + PATH_TOKEN.length);
+  let po;
+  try {
+    po = new URL(prefix);
+  } catch {
+    return null;
+  }
+  if (po.protocol !== "https:" && po.protocol !== "http:") return null;
+  if (po.origin !== prefix) return null;
+  if (!suffix.startsWith("?")) return null;
+  const c1 = suffix.indexOf(PLACEHOLDER);
+  if (c1 < 0 || suffix.indexOf(PLACEHOLDER, c1 + 1) >= 0) return null;
+  let probe;
+  try {
+    probe = new URL(prefix + "/__mfp__" + suffix.replace(PLACEHOLDER, SENTINEL));
+  } catch {
+    return null;
+  }
+  const keys = [...probe.searchParams.keys()];
+  if (new Set(keys).size !== keys.length) return null;
+  let queryKey = null;
+  for (const [k, v] of probe.searchParams) {
+    if (v === SENTINEL) queryKey = k;
+  }
+  if (!queryKey) return null;
+  const match = (href) => {
+    let u;
+    try {
+      u = new URL(href);
+    } catch {
+      return null;
+    }
+    if (u.origin !== prefix) return null;
+    for (const [k, v] of probe.searchParams) {
+      if (v === SENTINEL) continue;
+      if (u.searchParams.get(k) !== v) return null;
+    }
+    const token = u.searchParams.get(queryKey);
+    return token && TOKEN_RE.test(token) ? token : null;
+  };
+  return {
+    match,
+    mintFormat: (pathname) => prefix + pathname + suffix,
+    dynamic: true
+  };
+}
+function compileStatic(format) {
+  const first = format.indexOf(PLACEHOLDER);
+  if (first < 0 || format.indexOf(PLACEHOLDER, first + 1) >= 0) return null;
+  let f;
+  try {
+    f = new URL(format.replace(PLACEHOLDER, SENTINEL));
+  } catch {
+    return null;
+  }
+  if (f.protocol !== "https:" && f.protocol !== "http:") return null;
+  const keys = [...f.searchParams.keys()];
+  if (new Set(keys).size !== keys.length) return null;
+  const fPath = trimSlash(f.pathname);
+  const segs = fPath.split("/");
+  const segIdx = segs.indexOf(SENTINEL);
+  let queryKey = null;
+  for (const [k, v] of f.searchParams) {
+    if (v === SENTINEL) queryKey = k;
+  }
+  if (segIdx >= 0 === (queryKey !== null)) return null;
+  return (href) => {
+    let u;
+    try {
+      u = new URL(href);
+    } catch {
+      return null;
+    }
+    if (u.origin !== f.origin) return null;
+    const uPath = trimSlash(u.pathname);
+    let token;
+    if (segIdx >= 0) {
+      const us = uPath.split("/");
+      if (us.length !== segs.length) return null;
+      for (let i = 0; i < segs.length; i++) {
+        if (i !== segIdx && us[i] !== segs[i]) return null;
+      }
+      token = us[segIdx];
+      for (const [k, v] of f.searchParams) {
+        if (u.searchParams.get(k) !== v) return null;
+      }
+    } else {
+      if (uPath !== fPath) return null;
+      for (const [k, v] of f.searchParams) {
+        if (v === SENTINEL) continue;
+        if (u.searchParams.get(k) !== v) return null;
+      }
+      token = u.searchParams.get(queryKey);
+    }
+    return token && TOKEN_RE.test(token) ? token : null;
+  };
+}
+function installDeeplinkWatch(format, onChange2, onFormat) {
+  const c = compileDeeplink(format);
+  if (!c) return () => {
+  };
+  let last = null;
+  let lastTokenPath = null;
+  let lastMintPath = null;
+  let stopped = false;
+  const emitFormat = () => {
+    if (!onFormat) return;
+    const p = location.pathname;
+    if (lastMintPath === null || c.dynamic && p !== lastMintPath) {
+      lastMintPath = p;
+      onFormat(c.mintFormat(p));
+    }
+  };
+  const fire = () => {
+    if (stopped) return;
+    try {
+      emitFormat();
+      const token = c.match(location.href);
+      if (token === null && last !== null && trimSlash(location.pathname) === lastTokenPath) {
+        return;
+      }
+      if (token !== last) {
+        last = token;
+        if (token !== null) lastTokenPath = trimSlash(location.pathname);
+        onChange2(token);
+      }
+    } catch (err) {
+      console.warn("[mf-embed] deeplink match failed", err);
+    }
+  };
+  const origPush = history.pushState;
+  const origReplace = history.replaceState;
+  const ourPush = function(...args) {
+    const r = origPush.apply(this, args);
+    fire();
+    return r;
+  };
+  const ourReplace = function(...args) {
+    const r = origReplace.apply(this, args);
+    fire();
+    return r;
+  };
+  history.pushState = ourPush;
+  history.replaceState = ourReplace;
+  window.addEventListener("popstate", fire);
+  fire();
+  return () => {
+    stopped = true;
+    window.removeEventListener("popstate", fire);
+    if (history.pushState === ourPush) history.pushState = origPush;
+    if (history.replaceState === ourReplace) history.replaceState = origReplace;
+  };
+}
+var PLACEHOLDER, PATH_TOKEN, SENTINEL, TOKEN_RE, trimSlash;
+var init_deeplink = __esm({
+  "src/deeplink.ts"() {
+    PLACEHOLDER = "{share_token}";
+    PATH_TOKEN = "{path}";
+    SENTINEL = "mf-share-token-sentinel";
+    TOKEN_RE = /^[A-Za-z0-9._~-]{4,256}$/;
+    trimSlash = (path) => path.length > 1 && path.endsWith("/") ? path.slice(0, -1) : path;
+  }
+});
+
 // src/pageContextMode.ts
 function parsePageContextMode(value) {
   if (typeof value === "boolean") return value ? "full" : "off";
@@ -1583,7 +1767,7 @@ var init_context = __esm({
 });
 
 // src/protocol.ts
-var PROTOCOL_VERSION = 3;
+var PROTOCOL_VERSION = 4;
 var CHANNEL = "mf-embed";
 function envelope(payload, id) {
   return {
@@ -1806,6 +1990,7 @@ function dockBox(g, vw, _vh) {
 
 // src/loader.ts
 var DEFAULT_ORIGIN = "https://app.matterfact.com";
+var EMBED_VERSION = "0.18.0";
 function devRequested() {
   try {
     if (new URLSearchParams(location.search).get("mfdev") === "1") return true;
@@ -1850,7 +2035,10 @@ function readConfig() {
     theme: el?.dataset.theme || "auto",
     surface: el?.dataset.surface || "",
     container,
-    pageContext
+    pageContext,
+    // `data-share-deeplink-format="https://…/{share_token}"` — the script-tag twin of
+    // the React `shareDeeplinkFormat` prop.
+    shareDeeplinkFormat: el?.dataset.shareDeeplinkFormat
     // No `data-dev` — see the `dev` field's doc comment: the URL trigger is the
     // point for the script-tag path, so there is deliberately no script-tag knob here.
     // No `data-actions` either: the action policy lives entirely in the lazy chunk,
@@ -1931,6 +2119,8 @@ var EmbedHost = class {
     this.inline = !!config.container;
   }
   mount() {
+    const w = window;
+    (w.matterfact ?? (w.matterfact = {})).embedVersion = EMBED_VERSION;
     const host = document.createElement("div");
     this.hostEl = host;
     host.id = "matterfact-embed";
@@ -1974,7 +2164,7 @@ var EmbedHost = class {
       "sandbox",
       "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads"
     );
-    iframe.setAttribute("allow", "microphone; clipboard-write");
+    iframe.setAttribute("allow", "microphone; clipboard-write; web-share");
     iframe.src = `${this.config.origin}/embed/chat?k=${encodeURIComponent(
       this.config.publishableKey
     )}&o=${encodeURIComponent(location.origin)}` + (this.config.surface ? `&s=${encodeURIComponent(this.config.surface)}` : "") + // Either trigger works: the URL param (no redeploy needed) OR the config's
@@ -1987,6 +2177,18 @@ var EmbedHost = class {
       window.addEventListener("resize", this.onViewportResize);
       this.place();
     }
+    const fmt = this.config.shareDeeplinkFormat;
+    if (fmt) {
+      void Promise.resolve().then(() => (init_deeplink(), deeplink_exports)).then((m) => {
+        if (this.destroyed) return;
+        this.deeplinkStop = m.installDeeplinkWatch(
+          fmt,
+          (token) => this.send({ type: "host.openShare", token }),
+          (format) => this.send({ type: "host.deeplinkFormat", format })
+        );
+      }).catch(() => {
+      });
+    }
   }
   /**
    * Test seam. The shadow root is CLOSED, so a test cannot reach the iframe to forge a
@@ -2409,6 +2611,9 @@ var EmbedHost = class {
     this.iframe = null;
     this.shadow = null;
     this.ready = false;
+    this.destroyed = true;
+    this.deeplinkStop?.();
+    this.deeplinkStop = null;
     void this.context?.then((m) => m.stop());
   }
 };