@matterfact/embed 0.13.0 → 0.16.0

package/dist/react.js

@@ -2,7 +2,7 @@
 "use client";
 
 // src/react.tsx
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect as useEffect2, useRef } from "react";
 
 // src/protocol.ts
 var PROTOCOL_VERSION = 3;
@@ -806,9 +806,63 @@ function mount(config) {
   return host;
 }
 
-// src/react.tsx
+// src/react-context.tsx
+import { createContext, useContext, useEffect, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 var DEFAULT_ORIGIN = "https://app.matterfact.com";
+var MatterfactAuthContext = createContext(null);
+function useMatterfactConfig() {
+  return useContext(MatterfactAuthContext);
+}
+function MatterfactAuthProvider({
+  publishableKey,
+  widgetOrigin,
+  getAuthToken,
+  theme,
+  onEvent,
+  children
+}) {
+  const resolvedWidgetOrigin = widgetOrigin || DEFAULT_ORIGIN;
+  const value = useMemo(
+    () => ({
+      publishableKey,
+      widgetOrigin: resolvedWidgetOrigin,
+      getAuthToken,
+      theme: theme || "auto",
+      onEvent
+    }),
+    [publishableKey, resolvedWidgetOrigin, getAuthToken, theme, onEvent]
+  );
+  useEffect(() => {
+    if (typeof window === "undefined" || !getAuthToken) return;
+    let inflight = null;
+    const onMessage = (e) => {
+      if (e.origin !== resolvedWidgetOrigin) return;
+      if (!e.data || e.data.type !== "mf.hostAuth.request") return;
+      const source = e.source;
+      if (!source) return;
+      try {
+        inflight = inflight ?? Promise.resolve(getAuthToken()).catch(() => null);
+      } catch {
+        return;
+      }
+      const p = inflight;
+      void p.then((token) => {
+        if (p === inflight) inflight = null;
+        if (typeof token === "string" && token) {
+          source.postMessage({ type: "mf.hostAuth.grant", token }, resolvedWidgetOrigin);
+        }
+      });
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [getAuthToken, resolvedWidgetOrigin]);
+  return /* @__PURE__ */ jsx(MatterfactAuthContext.Provider, { value, children });
+}
+
+// src/react.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DEFAULT_ORIGIN2 = "https://app.matterfact.com";
 function writeActionsGlobal(actions) {
   if (typeof window === "undefined") return;
   const w = window;
@@ -852,11 +906,11 @@ function toolDescriptorKey(artifacts, resolve, tools) {
   });
 }
 function MatterfactAgent({
-  publishableKey,
-  widgetOrigin,
+  publishableKey: publishableKeyProp,
+  widgetOrigin: widgetOriginProp,
   surface = "",
-  theme = "auto",
-  getAuthToken,
+  theme: themeProp,
+  getAuthToken: getAuthTokenProp,
   getPageContext,
   inline = false,
   className,
@@ -871,6 +925,16 @@ function MatterfactAgent({
   onToolEvent,
   onEvent
 }) {
+  const ctx = useMatterfactConfig();
+  const publishableKey = publishableKeyProp ?? ctx?.publishableKey;
+  if (!publishableKey) {
+    throw new Error(
+      "MatterfactAgent requires publishableKey (as a prop or via MatterfactAuthProvider)"
+    );
+  }
+  const widgetOrigin = widgetOriginProp ?? ctx?.widgetOrigin ?? DEFAULT_ORIGIN2;
+  const getAuthToken = getAuthTokenProp ?? ctx?.getAuthToken;
+  const theme = themeProp ?? ctx?.theme ?? "auto";
   const authRef = useRef(getAuthToken);
   authRef.current = getAuthToken;
   const pageContextRef = useRef(getPageContext);
@@ -880,21 +944,22 @@ function MatterfactAgent({
   const actionsKey = JSON.stringify(actions ?? null);
   const slot = useRef(null);
   const sitemapKey = JSON.stringify(sitemap ?? null);
-  useEffect(() => {
+  useEffect2(() => {
     writeSitemapGlobal(sitemap);
   }, [sitemapKey]);
-  useEffect(() => {
+  useEffect2(() => {
     writeToolGlobals(artifacts, resolve, tools, onToolEvent, onEvent);
   });
   const toolsKey = toolDescriptorKey(artifacts, resolve, tools);
-  useEffect(() => {
+  useEffect2(() => {
     if (typeof window === "undefined") return;
     if (inline && !slot.current) return;
     writeActionsGlobal(actionsRef.current);
     writeToolGlobals(artifacts, resolve, tools, onToolEvent, onEvent);
     const config = {
       publishableKey,
-      origin: widgetOrigin || DEFAULT_ORIGIN,
+      // Already fully resolved above (prop ?? context ?? DEFAULT_ORIGIN).
+      origin: widgetOrigin,
       theme,
       surface,
       // Always present; a null return (no getAuthToken supplied) makes the core fall
@@ -936,7 +1001,7 @@ function MatterfactAgent({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   ]);
   if (!inline) return null;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       ref: slot,
@@ -946,30 +1011,210 @@ function MatterfactAgent({
   );
 }
 var DEFAULT_ARTIFACT_ORIGIN = "https://app.matterfact.com";
+function snapshot(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,
   owner,
   token,
-  widgetOrigin,
-  theme = "auto",
+  widgetOrigin: widgetOriginProp,
+  theme: themeProp,
   className,
-  style
+  style,
+  params,
+  onParamsChange
 }) {
-  const origin = widgetOrigin || DEFAULT_ARTIFACT_ORIGIN;
-  const src = `${origin}/embed/artifacts/${encodeURIComponent(slug)}?owner=${encodeURIComponent(owner)}&t=${encodeURIComponent(token)}&theme=${theme}`;
-  return /* @__PURE__ */ jsx(
+  const ctx = useMatterfactConfig();
+  const artifactName = nameProp ?? slug;
+  if (!artifactName) {
+    throw new Error(
+      "MatterfactArtifact requires name (or its deprecated alias, slug)"
+    );
+  }
+  const origin = widgetOriginProp ?? ctx?.widgetOrigin ?? DEFAULT_ARTIFACT_ORIGIN;
+  const theme = themeProp ?? ctx?.theme ?? "auto";
+  const frame = useRef(null);
+  const changeRef = useRef(onParamsChange);
+  changeRef.current = onParamsChange;
+  const paramsRef = useRef(params);
+  paramsRef.current = params;
+  const posted = useRef(/* @__PURE__ */ new Map());
+  const post = useCallback(
+    (values) => {
+      if (Object.keys(values).length === 0) return;
+      frame.current?.contentWindow?.postMessage(
+        { type: "host.artifactParams", params: values },
+        origin
+      );
+    },
+    [origin]
+  );
+  const postAll = useCallback(() => {
+    posted.current = snapshot(paramsRef.current);
+    post({ ...paramsRef.current });
+  }, [post]);
+  const onLoad = useCallback(() => postAll(), [postAll]);
+  useEffect2(() => {
+    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 = useRef(false);
+  useEffect2(() => {
+    const next = snapshot(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) {
+    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 {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className,
+        style: {
+          width: "100%",
+          height: 600,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          ...style
+        },
+        children: /* @__PURE__ */ jsx2("p", { children: "This embedded artifact link is incomplete." })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
     "iframe",
     {
+      ref: frame,
       src,
-      title: `matterfact artifact ${slug}`,
+      onLoad,
+      title: `matterfact artifact ${artifactName}`,
       className,
       style: { width: "100%", height: 600, border: 0, ...style },
       sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads"
     }
   );
 }
+var DEFAULT_DOC_ORIGIN = "https://app.matterfact.com";
+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;
+    changed[key] = value;
+    sent.set(key, snapshot2);
+  }
+  return changed;
+}
+function MatterfactDoc({
+  docKey,
+  ticker = "",
+  version = "latest",
+  theme: themeProp,
+  params,
+  className,
+  style
+}) {
+  const ctx = useMatterfactConfig();
+  const iframeRef = useRef(null);
+  const sentParamsRef = useRef(/* @__PURE__ */ new Map());
+  const origin = ctx?.widgetOrigin ?? DEFAULT_DOC_ORIGIN;
+  const paramsKey = JSON.stringify(params ?? null);
+  const pushParams = (force) => {
+    if (!params) return;
+    const win = iframeRef.current?.contentWindow;
+    if (!win) return;
+    if (force) sentParamsRef.current.clear();
+    const changed = diffDocParams(params, sentParamsRef.current);
+    if (Object.keys(changed).length === 0) return;
+    win.postMessage({ type: "host.docParams", params: changed }, origin);
+  };
+  useEffect2(() => {
+    pushParams(false);
+  }, [paramsKey]);
+  if (!docKey) {
+    throw new Error("MatterfactDoc requires docKey");
+  }
+  if (!ctx || !ctx.publishableKey) {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className,
+        style: {
+          width: "100%",
+          height: 600,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          ...style
+        },
+        children: /* @__PURE__ */ jsx2("p", { children: "This embedded document link is incomplete." })
+      }
+    );
+  }
+  const theme = themeProp ?? ctx.theme ?? "auto";
+  const hostOrigin = typeof window === "undefined" ? "" : window.location.origin;
+  const src = `${origin}/embed/document?k=${encodeURIComponent(ctx.publishableKey)}&o=${encodeURIComponent(hostOrigin)}&key=${encodeURIComponent(docKey)}&ticker=${encodeURIComponent(ticker)}&version=${encodeURIComponent(version)}&theme=${theme}`;
+  return /* @__PURE__ */ jsx2(
+    "iframe",
+    {
+      ref: iframeRef,
+      src,
+      title: `matterfact document ${docKey}`,
+      className,
+      style: { width: "100%", height: 600, border: 0, ...style },
+      sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads",
+      onLoad: () => pushParams(true)
+    }
+  );
+}
 export {
   MatterfactAgent,
-  MatterfactArtifact
+  MatterfactArtifact,
+  MatterfactAuthProvider,
+  MatterfactDoc
 };
 //# sourceMappingURL=react.js.map