@matterfact/embed 0.2.2 → 0.4.0

package/dist/react.cjs

@@ -238,6 +238,9 @@ function resolveRef(ref) {
   if (!entry || entry.id !== ref || entry.gen !== generation) return null;
   return el;
 }
+function clearRefs() {
+  registry.clear();
+}
 var counter, generation, entries, registry;
 var init_refs = __esm({
   "src/dom/refs.ts"() {
@@ -252,6 +255,7 @@ var init_refs = __esm({
 // src/dom/snapshot.ts
 var snapshot_exports = {};
 __export(snapshot_exports, {
+  clearRefs: () => clearRefs,
   resolveRef: () => resolveRef,
   snapshot: () => snapshot,
   snapshotRegion: () => snapshotRegion
@@ -494,14 +498,17 @@ var init_snapshot = __esm({
 // src/context.ts
 var context_exports = {};
 __export(context_exports, {
+  artifactIdFromPath: () => artifactIdFromPath,
   beginAuth: () => beginAuth,
   callTool: () => callTool,
+  grantsFromIframeSrcs: () => grantsFromIframeSrcs,
   isPrivate: () => isPrivate,
   readPageContext: () => readPageContext,
   redact: () => redact,
   sendRegion: () => sendRegion,
   sendSnapshot: () => sendSnapshot,
-  start: () => start
+  start: () => start,
+  stop: () => stop
 });
 function redact(text) {
   let out = text;
@@ -517,6 +524,10 @@ function isPrivate(el) {
   }
   return false;
 }
+function artifactIdFromPath(pathname) {
+  const m = pathname.match(/^\/(?:embed\/)?artifacts\/(.+?)\/?$/);
+  return m ? decodeURIComponent(m[1]) : null;
+}
 function embeddedMatterfactEntities() {
   if (!widgetOrigin) return [];
   const out = [];
@@ -528,10 +539,9 @@ function embeddedMatterfactEntities() {
       continue;
     }
     if (u.origin !== widgetOrigin) continue;
-    const m = u.pathname.match(/^\/artifacts\/(.+?)\/?$/);
-    if (!m) continue;
-    const id = decodeURIComponent(m[1]);
-    if (!id || out.some((e) => e.id === id)) continue;
+    const id = artifactIdFromPath(u.pathname);
+    if (!id) continue;
+    if (out.some((e) => e.id === id)) continue;
     out.push({
       kind: "artifact",
       id,
@@ -575,6 +585,36 @@ function readPageContext() {
 function publishContext() {
   send?.({ type: "host.context", context: readPageContext() });
 }
+function grantsFromIframeSrcs(srcs, origin) {
+  const out = [];
+  for (const raw of srcs) {
+    let u;
+    try {
+      u = new URL(raw || "", location.href);
+    } catch {
+      continue;
+    }
+    if (u.origin !== origin) continue;
+    const id = artifactIdFromPath(u.pathname);
+    if (!id) continue;
+    const owner = u.searchParams.get("owner") || "";
+    const token = u.searchParams.get("t") || "";
+    if (!owner || !token) continue;
+    if (out.some((g) => g.id === id)) continue;
+    out.push({ id, owner, token });
+  }
+  return out;
+}
+function readArtifactGrants() {
+  if (!widgetOrigin) return [];
+  const srcs = Array.from(document.querySelectorAll("iframe")).map(
+    (f) => f.getAttribute("src") || ""
+  );
+  return grantsFromIframeSrcs(srcs, widgetOrigin);
+}
+function publishArtifactGrants() {
+  send?.({ type: "host.artifactGrants", grants: readArtifactGrants() });
+}
 function pushActivity(e) {
   activity.push({ ...e, seq: ++activitySeq, ts: Date.now() });
   if (activity.length > MAX_ACTIVITY) activity.shift();
@@ -636,9 +676,13 @@ function watchNavigation() {
     lastUrl = url;
     pushActivity({ type: "nav", summary: `navigated to ${url}` });
     publishContext();
+    publishArtifactGrants();
   };
+  navFire = fire;
   for (const name of ["pushState", "replaceState"]) {
     const orig = history[name];
+    if (name === "pushState") origPushState = orig;
+    else origReplaceState = orig;
     history[name] = function(...args) {
       const r = orig.apply(this, args);
       fire();
@@ -659,7 +703,7 @@ async function readFocus() {
   }
   const active = document.activeElement;
   if (active && active !== document.body && !isPrivate(active) && !active.closest("[data-mf-private]")) {
-    const { snapshot: snapshot2 } = await Promise.resolve().then(() => (init_snapshot(), snapshot_exports));
+    const { snapshot: snapshot2 } = await loadSnapshotModule();
     void snapshot2;
     focus.focused = {
       label: redact(describeControl(active)),
@@ -674,6 +718,11 @@ async function readFocus() {
 function describeControl(el) {
   return describe(el);
 }
+async function loadSnapshotModule() {
+  const m = await Promise.resolve().then(() => (init_snapshot(), snapshot_exports));
+  snapshotModule = m;
+  return m;
+}
 function scheduleFocus() {
   if (focusTimer) return;
   focusTimer = setTimeout(async () => {
@@ -683,7 +732,8 @@ function scheduleFocus() {
   }, 250);
 }
 async function sendSnapshot(emit) {
-  const { snapshot: snapshot2 } = await Promise.resolve().then(() => (init_snapshot(), snapshot_exports));
+  if (!pageContextOn) return;
+  const { snapshot: snapshot2 } = await loadSnapshotModule();
   const { yaml, truncated, visibleRefs } = snapshot2();
   emit({
     type: "host.snapshot",
@@ -693,7 +743,8 @@ async function sendSnapshot(emit) {
   emit({ type: "host.focus", focus: lastFocus });
 }
 async function sendRegion(ref, emit) {
-  const { snapshotRegion: snapshotRegion2, resolveRef: resolveRef2 } = await Promise.resolve().then(() => (init_snapshot(), snapshot_exports));
+  if (!pageContextOn) return;
+  const { snapshotRegion: snapshotRegion2, resolveRef: resolveRef2 } = await loadSnapshotModule();
   const el = resolveRef2(ref);
   if (!el) {
     emit({
@@ -723,45 +774,86 @@ function beginAuth(config, emit) {
     "width=460,height=640"
   );
   if (!w) return;
+  if (pendingAuthListener) window.removeEventListener("message", pendingAuthListener);
   const onMsg = (event) => {
     if (event.origin !== config.origin) return;
     const d = event.data;
     if (d?.type !== "mf:embed:auth") return;
     window.removeEventListener("message", onMsg);
+    pendingAuthListener = null;
     emit({ type: "host.auth", token: d.token, expiresAt: d.expiresAt });
   };
+  pendingAuthListener = onMsg;
   window.addEventListener("message", onMsg);
 }
-function start(emit, origin) {
+function stop() {
+  document.removeEventListener("click", onClick, { capture: true });
+  document.removeEventListener("submit", onSubmit, { capture: true });
+  document.removeEventListener("change", onChange, { capture: true });
+  document.removeEventListener("selectionchange", scheduleFocus);
+  document.removeEventListener("focusin", scheduleFocus, { capture: true });
+  window.removeEventListener("scroll", scheduleFocus, { capture: true });
+  if (navFire) {
+    window.removeEventListener("popstate", navFire);
+    navFire = null;
+  }
+  if (origPushState) {
+    history.pushState = origPushState;
+    origPushState = null;
+  }
+  if (origReplaceState) {
+    history.replaceState = origReplaceState;
+    origReplaceState = null;
+  }
+  if (pendingAuthListener) {
+    window.removeEventListener("message", pendingAuthListener);
+    pendingAuthListener = null;
+  }
+  if (focusTimer) {
+    clearTimeout(focusTimer);
+    focusTimer = null;
+  }
+  send = null;
+  activity.length = 0;
+  lastFocus = {};
+  widgetOrigin = "";
+  snapshotModule?.clearRefs();
+}
+function start(emit, origin, pageContext = true) {
+  stop();
   send = emit;
   widgetOrigin = origin || "";
   lastUrl = location.pathname;
-  publishContext();
-  watchNavigation();
-  document.addEventListener("click", onClick, { capture: true, passive: true });
-  document.addEventListener("submit", onSubmit, {
-    capture: true,
-    passive: true
-  });
-  document.addEventListener("change", onChange, {
-    capture: true,
-    passive: true
-  });
-  document.addEventListener("selectionchange", scheduleFocus, {
-    passive: true
-  });
-  document.addEventListener("focusin", scheduleFocus, {
-    capture: true,
-    passive: true
-  });
-  window.addEventListener("scroll", scheduleFocus, {
-    capture: true,
-    passive: true
-  });
+  pageContextOn = pageContext;
+  if (pageContextOn) {
+    publishContext();
+    publishArtifactGrants();
+    watchNavigation();
+    document.addEventListener("click", onClick, { capture: true, passive: true });
+    document.addEventListener("submit", onSubmit, {
+      capture: true,
+      passive: true
+    });
+    document.addEventListener("change", onChange, {
+      capture: true,
+      passive: true
+    });
+    document.addEventListener("selectionchange", scheduleFocus, {
+      passive: true
+    });
+    document.addEventListener("focusin", scheduleFocus, {
+      capture: true,
+      passive: true
+    });
+    window.addEventListener("scroll", scheduleFocus, {
+      capture: true,
+      passive: true
+    });
+  }
   const theme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   emit({ type: "host.theme", mode: theme });
 }
-var widgetOrigin, MAX_ACTIVITY, send, activitySeq, activity, lastUrl, PII, FORM_CONTROLS, ACTIONABLE, lastFocus, focusTimer, snapshotSeq;
+var widgetOrigin, MAX_ACTIVITY, send, activitySeq, activity, lastUrl, pageContextOn, navFire, origPushState, origReplaceState, pendingAuthListener, snapshotModule, PII, FORM_CONTROLS, ACTIONABLE, lastFocus, focusTimer, snapshotSeq;
 var init_context = __esm({
   "src/context.ts"() {
     "use strict";
@@ -771,6 +863,12 @@ var init_context = __esm({
     activitySeq = 0;
     activity = [];
     lastUrl = "";
+    pageContextOn = true;
+    navFire = null;
+    origPushState = null;
+    origReplaceState = null;
+    pendingAuthListener = null;
+    snapshotModule = null;
     PII = [
       /\b[\w.+-]+@[\w-]+\.[\w.]{2,}\b/g,
       // email
@@ -798,7 +896,8 @@ var init_context = __esm({
 // src/react.tsx
 var react_exports = {};
 __export(react_exports, {
-  MatterfactAgent: () => MatterfactAgent
+  MatterfactAgent: () => MatterfactAgent,
+  MatterfactArtifact: () => MatterfactArtifact
 });
 module.exports = __toCommonJS(react_exports);
 var import_react = require("react");
@@ -989,7 +1088,9 @@ var EmbedHost = class {
     iframe.setAttribute("allow", "microphone");
     iframe.src = `${this.config.origin}/embed/chat?k=${encodeURIComponent(
       this.config.publishableKey
-    )}&o=${encodeURIComponent(location.origin)}` + (this.config.surface ? `&s=${encodeURIComponent(this.config.surface)}` : "") + (devRequested() ? "&dev=1" : "") + (this.inline ? "&inline=1" : "");
+    )}&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
+    // programmatic `dev` (the React prop). See both doc comments above.
+    (devRequested() || this.config.dev ? "&dev=1" : "") + (this.inline ? "&inline=1" : "");
     this.iframe = iframe;
     this.shadow.appendChild(iframe);
     window.addEventListener("message", this.onMessage);
@@ -1079,7 +1180,7 @@ var EmbedHost = class {
   }
   loadContext() {
     this.context ?? (this.context = Promise.resolve().then(() => (init_context(), context_exports)).then((m) => {
-      m.start(this.send, this.config.origin);
+      m.start(this.send, this.config.origin, this.config.pageContext);
       if (this.config.theme !== "auto") {
         this.send({ type: "host.theme", mode: this.config.theme });
       }
@@ -1102,6 +1203,7 @@ var EmbedHost = class {
     this.iframe = null;
     this.shadow = null;
     this.ready = false;
+    void this.context?.then((m) => m.stop());
   }
 };
 function mount(config) {
@@ -1121,7 +1223,9 @@ function MatterfactAgent({
   getAuthToken,
   inline = false,
   className,
-  style
+  style,
+  pageContext,
+  dev
 }) {
   const authRef = (0, import_react.useRef)(getAuthToken);
   authRef.current = getAuthToken;
@@ -1137,7 +1241,9 @@ function MatterfactAgent({
       // Always present; a null return (no getAuthToken supplied) makes the core fall
       // back to the popup/inline sign-in, so this is safe either way.
       authTokenProvider: async () => await authRef.current?.() ?? null,
-      container: inline ? slot.current : null
+      container: inline ? slot.current : null,
+      pageContext,
+      dev
     };
     let host = null;
     try {
@@ -1146,7 +1252,7 @@ function MatterfactAgent({
       console.error("[matterfact] failed to mount the embed widget", e);
     }
     return () => host?.destroy();
-  }, [publishableKey, widgetOrigin2, surface, theme, inline]);
+  }, [publishableKey, widgetOrigin2, surface, theme, inline, pageContext, dev]);
   if (!inline) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
@@ -1157,8 +1263,32 @@ function MatterfactAgent({
     }
   );
 }
+var DEFAULT_ARTIFACT_ORIGIN = "https://app.matterfact.com";
+function MatterfactArtifact({
+  slug,
+  owner,
+  token,
+  widgetOrigin: widgetOrigin2,
+  theme = "auto",
+  className,
+  style
+}) {
+  const origin = widgetOrigin2 || DEFAULT_ARTIFACT_ORIGIN;
+  const src = `${origin}/embed/artifacts/${encodeURIComponent(slug)}?owner=${encodeURIComponent(owner)}&t=${encodeURIComponent(token)}&theme=${theme}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "iframe",
+    {
+      src,
+      title: `matterfact artifact ${slug}`,
+      className,
+      style: { width: "100%", height: 600, border: 0, ...style },
+      sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  MatterfactAgent
+  MatterfactAgent,
+  MatterfactArtifact
 });
 //# sourceMappingURL=react.cjs.map