@matterfact/embed 0.16.0 → 0.18.0

package/dist/react.cjs

@@ -22,6 +22,191 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// 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"() {
+    "use strict";
+    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";
@@ -1618,7 +1803,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 +2025,7 @@ function dockBox(g, vw, _vh) {
 }
 
 // src/loader.ts
+var EMBED_VERSION = "0.18.0";
 function devRequested() {
   try {
     if (new URLSearchParams(location.search).get("mfdev") === "1") return true;
@@ -1927,6 +2113,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 +2158,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 +2171,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
@@ -2406,6 +2606,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());
   }
 };
@@ -2518,10 +2721,32 @@ function toolDescriptorKey(artifacts, resolve, tools) {
     }))
   });
 }
+var KNOWN_AGENT_PROPS = [
+  "publishableKey",
+  "widgetOrigin",
+  "surface",
+  "shareDeeplinkFormat",
+  "theme",
+  "getAuthToken",
+  "getPageContext",
+  "inline",
+  "className",
+  "style",
+  "pageContext",
+  "dev",
+  "actions",
+  "sitemap",
+  "artifacts",
+  "resolve",
+  "tools",
+  "onToolEvent",
+  "onEvent"
+];
 function MatterfactAgent({
   publishableKey: publishableKeyProp,
   widgetOrigin: widgetOriginProp,
   surface = "",
+  shareDeeplinkFormat,
   theme: themeProp,
   getAuthToken: getAuthTokenProp,
   getPageContext,
@@ -2536,8 +2761,20 @@ function MatterfactAgent({
   resolve,
   tools,
   onToolEvent,
-  onEvent
+  onEvent,
+  ...unknownProps
 }) {
+  (0, import_react2.useEffect)(() => {
+    if (process.env.NODE_ENV === "production") return;
+    for (const key of Object.keys(unknownProps)) {
+      const meant = KNOWN_AGENT_PROPS.find(
+        (k) => k.toLowerCase() === key.toLowerCase()
+      );
+      console.warn(
+        `[mf-embed] unknown prop "${key}" on <MatterfactAgent>` + (meant ? ` \u2014 did you mean "${meant}"?` : "")
+      );
+    }
+  }, []);
   const ctx = useMatterfactConfig();
   const publishableKey = publishableKeyProp ?? ctx?.publishableKey;
   if (!publishableKey) {
@@ -2583,7 +2820,8 @@ function MatterfactAgent({
       pageContextProvider: async () => await pageContextRef.current?.() ?? null,
       container: inline ? slot.current : null,
       pageContext,
-      dev
+      dev,
+      shareDeeplinkFormat
     };
     let host = null;
     try {
@@ -2603,6 +2841,7 @@ function MatterfactAgent({
     publishableKey,
     widgetOrigin2,
     surface,
+    shareDeeplinkFormat,
     theme,
     inline,
     pageContext,
@@ -2713,11 +2952,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",