@matterfact/embed 0.16.0 → 0.17.0

package/dist/react.cjs

@@ -22,6 +22,115 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/deeplink.ts
+var deeplink_exports = {};
+__export(deeplink_exports, {
+  compileDeeplinkFormat: () => compileDeeplinkFormat,
+  installDeeplinkWatch: () => installDeeplinkWatch
+});
+function compileDeeplinkFormat(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) {
+  const match = compileDeeplinkFormat(format);
+  if (!match) return () => {
+  };
+  let last = null;
+  let stopped = false;
+  const fire = () => {
+    if (stopped) return;
+    try {
+      const token = match(location.href);
+      if (token !== last) {
+        last = token;
+        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, SENTINEL, TOKEN_RE, trimSlash;
+var init_deeplink = __esm({
+  "src/deeplink.ts"() {
+    "use strict";
+    PLACEHOLDER = "{share_token}";
+    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";
@@ -1618,7 +1727,7 @@ module.exports = __toCommonJS(react_exports);
 var import_react2 = require("react");
 
 // src/protocol.ts
-var PROTOCOL_VERSION = 3;
+var PROTOCOL_VERSION = 4;
 var CHANNEL = "mf-embed";
 function envelope(payload, id) {
   return {
@@ -1840,6 +1949,7 @@ function dockBox(g, vw, _vh) {
 }
 
 // src/loader.ts
+var EMBED_VERSION = "0.17.0";
 function devRequested() {
   try {
     if (new URLSearchParams(location.search).get("mfdev") === "1") return true;
@@ -1927,6 +2037,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";
@@ -1970,7 +2082,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
@@ -1983,6 +2095,17 @@ var EmbedHost = class {
       window.addEventListener("resize", this.onViewportResize);
       this.place();
     }
+    const fmt = this.config.shareDeeplinkFormat;
+    if (fmt) {
+      this.send({ type: "host.deeplinkFormat", format: 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 });
+        });
+      }).catch(() => {
+      });
+    }
   }
   /**
    * Test seam. The shadow root is CLOSED, so a test cannot reach the iframe to forge a
@@ -2406,6 +2529,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());
   }
 };
@@ -2522,6 +2648,7 @@ function MatterfactAgent({
   publishableKey: publishableKeyProp,
   widgetOrigin: widgetOriginProp,
   surface = "",
+  shareDeeplinkFormat,
   theme: themeProp,
   getAuthToken: getAuthTokenProp,
   getPageContext,
@@ -2583,7 +2710,8 @@ function MatterfactAgent({
       pageContextProvider: async () => await pageContextRef.current?.() ?? null,
       container: inline ? slot.current : null,
       pageContext,
-      dev
+      dev,
+      shareDeeplinkFormat
     };
     let host = null;
     try {
@@ -2603,6 +2731,7 @@ function MatterfactAgent({
     publishableKey,
     widgetOrigin2,
     surface,
+    shareDeeplinkFormat,
     theme,
     inline,
     pageContext,
@@ -2713,11 +2842,11 @@ function MatterfactArtifact({
     post(changed);
   }, [paramsKey, post]);
   let src;
-  if (token) {
-    src = `${origin}/embed/artifacts/${encodeURIComponent(artifactName)}?owner=${encodeURIComponent(owner)}&t=${encodeURIComponent(token)}&theme=${theme}`;
-  } else if (ctx) {
+  if (ctx) {
     const hostOrigin = typeof window === "undefined" ? "" : window.location.origin;
     src = `${origin}/embed/artifacts/${encodeURIComponent(artifactName)}?owner=${encodeURIComponent(owner)}&k=${encodeURIComponent(ctx.publishableKey)}&o=${encodeURIComponent(hostOrigin)}&theme=${theme}`;
+  } else if (token) {
+    src = `${origin}/embed/artifacts/${encodeURIComponent(artifactName)}?owner=${encodeURIComponent(owner)}&t=${encodeURIComponent(token)}&theme=${theme}`;
   } else {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",