@matterfact/embed 0.15.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";
@@ -1362,8 +1471,8 @@ async function readFocus() {
   }
   const active = document.activeElement;
   if (active && active !== document.body && !isPrivate(active) && !active.closest("[data-mf-private]")) {
-    const { snapshot: snapshot2 } = await loadSnapshotModule();
-    void snapshot2;
+    const { snapshot: snapshot3 } = await loadSnapshotModule();
+    void snapshot3;
     focus.focused = {
       label: redact(describeControl(active)),
       role: active.getAttribute("role") || active.tagName.toLowerCase()
@@ -1406,9 +1515,9 @@ async function sendSnapshot(emit) {
     emit({ type: "host.focus", focus: lastFocus });
     return;
   }
-  const { snapshot: snapshot2 } = await loadSnapshotModule();
+  const { snapshot: snapshot3 } = await loadSnapshotModule();
   if (!allowsAuto(effectivePageContextMode())) return;
-  const { yaml, truncated, visibleRefs } = snapshot2();
+  const { yaml, truncated, visibleRefs } = snapshot3();
   emit({
     type: "host.snapshot",
     snapshot: { yaml: redact(yaml), seq: ++snapshotSeq, truncated }
@@ -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,
@@ -2624,6 +2753,13 @@ function MatterfactAgent({
   );
 }
 var DEFAULT_ARTIFACT_ORIGIN = "https://app.matterfact.com";
+function snapshot2(params) {
+  const out = /* @__PURE__ */ new Map();
+  for (const [key, value] of Object.entries(params ?? {})) {
+    out.set(key, JSON.stringify(value ?? null));
+  }
+  return out;
+}
 function MatterfactArtifact({
   name: nameProp,
   slug,
@@ -2632,7 +2768,9 @@ function MatterfactArtifact({
   widgetOrigin: widgetOriginProp,
   theme: themeProp,
   className: className2,
-  style
+  style,
+  params,
+  onParamsChange
 }) {
   const ctx = useMatterfactConfig();
   const artifactName = nameProp ?? slug;
@@ -2643,12 +2781,72 @@ function MatterfactArtifact({
   }
   const origin = widgetOriginProp ?? ctx?.widgetOrigin ?? DEFAULT_ARTIFACT_ORIGIN;
   const theme = themeProp ?? ctx?.theme ?? "auto";
+  const frame = (0, import_react2.useRef)(null);
+  const changeRef = (0, import_react2.useRef)(onParamsChange);
+  changeRef.current = onParamsChange;
+  const paramsRef = (0, import_react2.useRef)(params);
+  paramsRef.current = params;
+  const posted = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+  const post = (0, import_react2.useCallback)(
+    (values) => {
+      if (Object.keys(values).length === 0) return;
+      frame.current?.contentWindow?.postMessage(
+        { type: "host.artifactParams", params: values },
+        origin
+      );
+    },
+    [origin]
+  );
+  const postAll = (0, import_react2.useCallback)(() => {
+    posted.current = snapshot2(paramsRef.current);
+    post({ ...paramsRef.current });
+  }, [post]);
+  const onLoad = (0, import_react2.useCallback)(() => postAll(), [postAll]);
+  (0, import_react2.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const onMessage = (event) => {
+      if (!frame.current || event.source !== frame.current.contentWindow) return;
+      const data = event.data;
+      if (!data || typeof data !== "object") return;
+      if (data.type === "widget.artifactReady") {
+        postAll();
+        return;
+      }
+      if (data.type === "widget.artifactParams" && data.params) {
+        const source = data.source === "context" ? "context" : "user";
+        try {
+          changeRef.current?.(data.params, source);
+        } catch {
+        }
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [postAll]);
+  const paramsKey = JSON.stringify(params ?? null);
+  const settled = (0, import_react2.useRef)(false);
+  (0, import_react2.useEffect)(() => {
+    const next = snapshot2(paramsRef.current);
+    if (!settled.current) {
+      settled.current = true;
+      posted.current = next;
+      return;
+    }
+    const changed = {};
+    for (const [key, json] of next) {
+      if (posted.current.get(key) !== json) {
+        changed[key] = paramsRef.current[key];
+      }
+    }
+    posted.current = next;
+    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",
@@ -2670,7 +2868,9 @@ function MatterfactArtifact({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "iframe",
     {
+      ref: frame,
       src,
+      onLoad,
       title: `matterfact artifact ${artifactName}`,
       className: className2,
       style: { width: "100%", height: 600, border: 0, ...style },
@@ -2683,10 +2883,10 @@ function diffDocParams(params, sent) {
   const changed = {};
   for (const [key, value] of Object.entries(params)) {
     if (value === void 0) continue;
-    const snapshot2 = JSON.stringify(value);
-    if (sent.get(key) === snapshot2) continue;
+    const snapshot3 = JSON.stringify(value);
+    if (sent.get(key) === snapshot3) continue;
     changed[key] = value;
-    sent.set(key, snapshot2);
+    sent.set(key, snapshot3);
   }
   return changed;
 }