@matterfact/embed 0.3.0 → 0.5.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
@@ -495,7 +499,6 @@ var init_snapshot = __esm({
 var context_exports = {};
 __export(context_exports, {
   artifactIdFromPath: () => artifactIdFromPath,
-  beginAuth: () => beginAuth,
   callTool: () => callTool,
   grantsFromIframeSrcs: () => grantsFromIframeSrcs,
   isPrivate: () => isPrivate,
@@ -503,7 +506,8 @@ __export(context_exports, {
   redact: () => redact,
   sendRegion: () => sendRegion,
   sendSnapshot: () => sendSnapshot,
-  start: () => start
+  start: () => start,
+  stop: () => stop
 });
 function redact(text) {
   let out = text;
@@ -673,8 +677,11 @@ function watchNavigation() {
     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();
@@ -695,7 +702,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)),
@@ -710,6 +717,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 () => {
@@ -719,7 +731,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",
@@ -729,7 +742,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({
@@ -750,55 +764,73 @@ async function callTool(call, emit) {
     error: "Host tools are read-only in this version; no action was taken."
   });
 }
-function beginAuth(config, emit) {
-  const w = window.open(
-    `${config.origin}/embed/authorize?k=${encodeURIComponent(
-      config.publishableKey
-    )}&o=${encodeURIComponent(location.origin)}`,
-    "mf_auth",
-    "width=460,height=640"
-  );
-  if (!w) return;
-  const onMsg = (event) => {
-    if (event.origin !== config.origin) return;
-    const d = event.data;
-    if (d?.type !== "mf:embed:auth") return;
-    window.removeEventListener("message", onMsg);
-    emit({ type: "host.auth", token: d.token, expiresAt: d.expiresAt });
-  };
-  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 (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();
-  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
-  });
+  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, snapshotModule, PII, FORM_CONTROLS, ACTIONABLE, lastFocus, focusTimer, snapshotSeq;
 var init_context = __esm({
   "src/context.ts"() {
     "use strict";
@@ -808,6 +840,11 @@ var init_context = __esm({
     activitySeq = 0;
     activity = [];
     lastUrl = "";
+    pageContextOn = true;
+    navFire = null;
+    origPushState = null;
+    origReplaceState = null;
+    snapshotModule = null;
     PII = [
       /\b[\w.+-]+@[\w-]+\.[\w.]{2,}\b/g,
       // email
@@ -1027,7 +1064,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);
@@ -1097,27 +1136,26 @@ var EmbedHost = class {
    *   window.matterfact = { getEmbedAuthToken: () => getIdToken(user) };
    *
    * Read fresh at call time (not at readConfig), so a global set after the loader booted
-   * — e.g. once the host's auth is ready — is still picked up. Otherwise fall back to the
-   * hosted-login popup. `expiresAt: 0`: the widget doesn't cache it, it exchanges the
-   * token for a rotating embed session anyway.
+   * — e.g. once the host's auth is ready — is still picked up. `expiresAt: 0`: the widget
+   * doesn't cache it, it exchanges the token for a rotating embed session anyway.
+   *
+   * No provider ⇒ this does nothing. The loader never opens a sign-in popup — the widget
+   * owns interactive sign-in (inline Firebase/email, and Microsoft's own MSAL login popup
+   * for Entra, then the PKCE token exchange), so the loader must not also fire its stale
+   * `/embed/authorize?k=&o=` popup, which the deployed authorize page no longer accepts.
    */
   async provideAuth() {
     const provider = this.config.authTokenProvider ?? globalThis.matterfact?.getEmbedAuthToken;
-    if (provider) {
-      try {
-        const token = await provider();
-        if (token) {
-          this.send({ type: "host.auth", token, expiresAt: 0 });
-          return;
-        }
-      } catch {
-      }
+    if (!provider) return;
+    try {
+      const token = await provider();
+      if (token) this.send({ type: "host.auth", token, expiresAt: 0 });
+    } catch {
     }
-    void this.loadContext().then((m) => m.beginAuth(this.config, this.send));
   }
   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 });
       }
@@ -1140,6 +1178,7 @@ var EmbedHost = class {
     this.iframe = null;
     this.shadow = null;
     this.ready = false;
+    void this.context?.then((m) => m.stop());
   }
 };
 function mount(config) {
@@ -1159,7 +1198,9 @@ function MatterfactAgent({
   getAuthToken,
   inline = false,
   className,
-  style
+  style,
+  pageContext,
+  dev
 }) {
   const authRef = (0, import_react.useRef)(getAuthToken);
   authRef.current = getAuthToken;
@@ -1175,7 +1216,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 {
@@ -1184,7 +1227,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",