@opengeni/react 1.0.1 → 1.0.2-canary.37202341988001

package/src/components/artifacts/published-html-artifact-frame.tsx

@@ -1,4 +1,25 @@
-import type { CSSProperties } from "react";
+import {
+  OPENGENI_SITE_BRIDGE_BOOTSTRAP_GLOBAL,
+  OPENGENI_SITE_BRIDGE_READY,
+  OPENGENI_SITE_BRIDGE_RESPONSE,
+  OPENGENI_SITE_BRIDGE_VERSION,
+  isOpenGeniSiteBridgeCancelMessage,
+  isOpenGeniSiteBridgeConnectMessage,
+  isOpenGeniSiteBridgeRequestMessage,
+  sanitizeOpenGeniSiteToolCallRequest,
+  isSiteHttpRequest,
+  serveSiteHttp,
+  type SiteHttpRequest,
+  type OpenGeniSiteBridgeResponseMessage,
+  type OpenGeniSiteToolCatalog,
+} from "@opengeni/sdk/site";
+import type {
+  ToolGatewayCallRequest,
+  ToolGatewayCallResponse,
+  ToolGatewayDeclarationsResponse,
+} from "@opengeni/sdk";
+import { useEffect, useRef, useState, type CSSProperties } from "react";
+import { resolveSiteClientScript } from "@opengeni/sdk/site-document";
 
 export const PUBLISHED_HTML_ARTIFACT_IFRAME_SANDBOX = [
   "allow-downloads",
@@ -14,25 +35,337 @@ export const PUBLISHED_HTML_ARTIFACT_IFRAME_SANDBOX = [
 
 export type PublishedHtmlArtifactFrameProps = {
   html: string;
+  autoHeight?: boolean;
+  theme?: "light" | "dark";
   title: string;
   className?: string;
   style?: CSSProperties;
+  toolBridge?: PublishedHtmlArtifactToolBridge;
 };
 
+export type PublishedHtmlArtifactToolBridge = {
+  fetch?: (request: SiteHttpRequest, signal: AbortSignal) => Promise<Response>;
+  catalog: (options: { signal: AbortSignal }) => Promise<OpenGeniSiteToolCatalog>;
+  call: (
+    request: ToolGatewayCallRequest,
+    options: { signal: AbortSignal },
+  ) => Promise<ToolGatewayCallResponse>;
+  declarations?: (options: { signal: AbortSignal }) => Promise<ToolGatewayDeclarationsResponse>;
+};
+
+const SITE_BRIDGE_BOOTSTRAP_SCRIPT = `<script>(()=>{const key=${JSON.stringify(
+  OPENGENI_SITE_BRIDGE_BOOTSTRAP_GLOBAL,
+)};const parentWindow=window.parent;if(parentWindow===window)return;window.addEventListener("message",event=>{const data=event.data;if(event.source!==parentWindow||!data||data.type!==${JSON.stringify(
+  OPENGENI_SITE_BRIDGE_READY,
+)}||data.version!==${OPENGENI_SITE_BRIDGE_VERSION}||event.ports.length!==1)return;const port=event.ports[0];const previous=window[key]?.port;if(previous&&previous!==port)previous.close();Object.defineProperty(window,key,{configurable:true,value:{port}});port.start();});})();</script>`;
+
+export function publishedHtmlArtifactDocument(html: string, toolBridgeEnabled: boolean): string {
+  if (!toolBridgeEnabled) return html;
+  html = resolveSiteClientScript(html);
+  const doctypeEnd = leadingDoctypeEnd(html);
+  if (doctypeEnd >= 0) {
+    return `${html.slice(0, doctypeEnd + 1)}${SITE_BRIDGE_BOOTSTRAP_SCRIPT}${html.slice(doctypeEnd + 1)}`;
+  }
+  return `${SITE_BRIDGE_BOOTSTRAP_SCRIPT}${html}`;
+}
+
+function leadingDoctypeEnd(html: string): number {
+  const lower = html.toLowerCase();
+  let cursor = html.charCodeAt(0) === 0xfeff ? 1 : 0;
+  while (cursor < html.length) {
+    while (/\s/.test(html[cursor] ?? "")) cursor += 1;
+    if (!html.startsWith("<!--", cursor)) break;
+    const commentEnd = html.indexOf("-->", cursor + 4);
+    if (commentEnd < 0) return -1;
+    cursor = commentEnd + 3;
+  }
+  if (!lower.startsWith("<!doctype", cursor)) return -1;
+  return html.indexOf(">", cursor + 9);
+}
+
 /**
  * Render exact published HTML in an opaque-origin iframe. Artifact scripts,
- * external resources, forms, popups, and downloads work without granting
- * parent-origin authority, shared cookies/storage, or top-level navigation.
+ * external resources, forms, popups, downloads, and the host-filtered tool
+ * bridge work without granting parent-origin authority, shared cookies/storage,
+ * or top-level navigation.
  */
 export function PublishedHtmlArtifactFrame(props: PublishedHtmlArtifactFrameProps) {
+  const frameRef = useRef<HTMLIFrameElement | null>(null);
+  const [height, setHeight] = useState<number>();
+  useEffect(() => {
+    if (!props.autoHeight) return;
+    const receive = (event: MessageEvent) => {
+      if (
+        event.source !== frameRef.current?.contentWindow ||
+        event.data?.type !== "opengeni.preview.height"
+      )
+        return;
+      const value = event.data.height;
+      if (typeof value === "number" && Number.isFinite(value))
+        setHeight(Math.min(1200, Math.max(80, value)));
+    };
+    window.addEventListener("message", receive);
+    return () => window.removeEventListener("message", receive);
+  }, [props.autoHeight]);
+  useEffect(() => {
+    frameRef.current?.contentWindow?.postMessage(
+      { type: "opengeni.preview.theme", theme: props.theme },
+      "*",
+    );
+  }, [props.theme]);
+  const bridgeRef = useRef(props.toolBridge);
+  const onFrameLoadRef = useRef<() => void>(() => undefined);
+  const frameLoadPendingRef = useRef(false);
+  const toolBridgeEnabled = props.toolBridge !== undefined;
+  useEffect(() => {
+    bridgeRef.current = props.toolBridge;
+  }, [props.toolBridge]);
+  useEffect(() => {
+    if (!toolBridgeEnabled || typeof window === "undefined") return;
+    const requests = new SiteBridgeRequestRegistry();
+    const attachToolPort = (data: unknown, ports: readonly MessagePort[]) => {
+      const port = openGeniSiteBridgePortFromBootstrap(data, ports);
+      if (!port) return;
+      requests.addPort(port);
+      port.addEventListener("message", (portEvent: MessageEvent<unknown>) => {
+        const message = portEvent.data;
+        if (isOpenGeniSiteBridgeCancelMessage(message)) {
+          requests.cancel(port, message.requestId);
+          return;
+        }
+        if (isSiteHttpRequest(message) && portEvent.ports.length === 1) {
+          const controller = requests.start(port, message.requestId);
+          if (!controller) {
+            portEvent.ports[0]!.close();
+            return;
+          }
+          void serveSiteHttp(
+            message,
+            portEvent.ports[0]!,
+            async (request, signal) => {
+              const fetch = bridgeRef.current?.fetch;
+              if (!fetch) throw new Error("This Site host does not support the session SDK");
+              return fetch(request, signal);
+            },
+            controller.signal,
+          ).finally(() => requests.complete(port, message.requestId, controller));
+          return;
+        }
+        if (!isOpenGeniSiteBridgeRequestMessage(message)) return;
+        const controller = requests.start(port, message.requestId);
+        if (!controller) {
+          port.postMessage({
+            type: OPENGENI_SITE_BRIDGE_RESPONSE,
+            version: OPENGENI_SITE_BRIDGE_VERSION,
+            requestId: message.requestId,
+            ok: false,
+            error: {
+              code: "duplicate_request_id",
+              message: "A Site tool request with this id is already running",
+              retryable: false,
+            },
+          } satisfies OpenGeniSiteBridgeResponseMessage);
+          return;
+        }
+        void handleSiteBridgeRequest(bridgeRef.current, message, controller.signal)
+          .then((value) => {
+            if (!controller.signal.aborted) {
+              port.postMessage({
+                type: OPENGENI_SITE_BRIDGE_RESPONSE,
+                version: OPENGENI_SITE_BRIDGE_VERSION,
+                requestId: message.requestId,
+                ok: true,
+                value,
+              } satisfies OpenGeniSiteBridgeResponseMessage);
+            }
+          })
+          .catch((error) => {
+            if (!controller.signal.aborted) {
+              port.postMessage({
+                type: OPENGENI_SITE_BRIDGE_RESPONSE,
+                version: OPENGENI_SITE_BRIDGE_VERSION,
+                requestId: message.requestId,
+                ok: false,
+                error: siteBridgeError(error),
+              } satisfies OpenGeniSiteBridgeResponseMessage);
+            }
+          })
+          .finally(() => requests.complete(port, message.requestId, controller));
+      });
+      port.addEventListener("messageerror", () => requests.closePort(port));
+      port.start();
+      port.postMessage({
+        type: OPENGENI_SITE_BRIDGE_READY,
+        version: OPENGENI_SITE_BRIDGE_VERSION,
+      });
+    };
+    const documentLease = new SiteBridgeDocumentLease(attachToolPort, () => requests.closeAll());
+    const onFrameLoad = () => {
+      frameLoadPendingRef.current = false;
+      const frameWindow = frameRef.current?.contentWindow ?? null;
+      if (!frameWindow) return;
+      documentLease.load(frameWindow);
+    };
+    onFrameLoadRef.current = onFrameLoad;
+    if (frameLoadPendingRef.current) {
+      frameLoadPendingRef.current = false;
+      onFrameLoad();
+    }
+    return () => {
+      onFrameLoadRef.current = () => undefined;
+      documentLease.close();
+    };
+  }, [props.html, toolBridgeEnabled]);
   return (
     <iframe
+      ref={frameRef}
       title={props.title}
       sandbox={PUBLISHED_HTML_ARTIFACT_IFRAME_SANDBOX}
       referrerPolicy="no-referrer"
-      srcDoc={props.html}
+      srcDoc={publishedHtmlArtifactDocument(props.html, toolBridgeEnabled)}
+      onLoad={() => {
+        frameRef.current?.contentWindow?.postMessage(
+          { type: "opengeni.preview.theme", theme: props.theme },
+          "*",
+        );
+        frameLoadPendingRef.current = true;
+        onFrameLoadRef.current();
+      }}
       className={props.className}
-      style={props.style}
+      style={{ ...props.style, ...(props.autoHeight && height ? { height } : {}) }}
     />
   );
 }
+
+export class SiteBridgeRequestRegistry {
+  private readonly controllersByPort = new Map<MessagePort, Map<string, AbortController>>();
+
+  addPort(port: MessagePort): void {
+    // Several SDK clients may share one document bootstrap. Document teardown,
+    // not another client connecting, revokes all of that document's ports.
+    if (!this.controllersByPort.has(port)) this.controllersByPort.set(port, new Map());
+  }
+
+  start(port: MessagePort, requestId: string): AbortController | null {
+    const controllers = this.controllersByPort.get(port);
+    if (!controllers || controllers.has(requestId)) return null;
+    const controller = new AbortController();
+    controllers.set(requestId, controller);
+    return controller;
+  }
+
+  cancel(port: MessagePort, requestId: string): void {
+    const controllers = this.controllersByPort.get(port);
+    const controller = controllers?.get(requestId);
+    if (!controller) return;
+    controller.abort(new Error("Site tool request cancelled"));
+    controllers!.delete(requestId);
+  }
+
+  complete(port: MessagePort, requestId: string, controller: AbortController): void {
+    const controllers = this.controllersByPort.get(port);
+    if (controllers?.get(requestId) === controller) controllers.delete(requestId);
+  }
+
+  closePort(port: MessagePort): void {
+    const controllers = this.controllersByPort.get(port);
+    if (!controllers) return;
+    for (const controller of controllers.values()) {
+      controller.abort(new Error("Site tool bridge port closed"));
+    }
+    controllers.clear();
+    this.controllersByPort.delete(port);
+    port.close();
+  }
+
+  closeAll(): void {
+    for (const port of [...this.controllersByPort.keys()]) this.closePort(port);
+  }
+}
+
+export class SiteBridgeDocumentLease {
+  private loaded = false;
+  private bootstrapPort: MessagePort | null = null;
+
+  constructor(
+    private readonly attachToolPort: (data: unknown, ports: readonly MessagePort[]) => void,
+    private readonly closeActivePorts: () => void,
+    private readonly createMessageChannel: () => MessageChannel = () => new MessageChannel(),
+  ) {}
+
+  load(frameWindow: Pick<Window, "postMessage">): boolean {
+    if (this.loaded) {
+      this.close();
+      return false;
+    }
+    this.loaded = true;
+    const channel = this.createMessageChannel();
+    this.bootstrapPort = channel.port1;
+    channel.port1.addEventListener("message", (event: MessageEvent<unknown>) => {
+      this.attachToolPort(event.data, event.ports);
+    });
+    channel.port1.start();
+    frameWindow.postMessage(
+      {
+        type: OPENGENI_SITE_BRIDGE_READY,
+        version: OPENGENI_SITE_BRIDGE_VERSION,
+      },
+      "*",
+      [channel.port2],
+    );
+    return true;
+  }
+
+  close(): void {
+    this.bootstrapPort?.close();
+    this.bootstrapPort = null;
+    this.closeActivePorts();
+  }
+}
+
+export function openGeniSiteBridgePortFromBootstrap(
+  data: unknown,
+  ports: readonly MessagePort[],
+): MessagePort | null {
+  if (!isOpenGeniSiteBridgeConnectMessage(data)) return null;
+  return ports.length === 1 ? ports[0]! : null;
+}
+
+async function handleSiteBridgeRequest(
+  bridge: PublishedHtmlArtifactToolBridge | undefined,
+  message: Parameters<typeof isOpenGeniSiteBridgeRequestMessage>[0] & {
+    method: "catalog" | "call" | "declarations";
+    requestId: string;
+    payload?: ToolGatewayCallRequest;
+  },
+  signal: AbortSignal,
+): Promise<OpenGeniSiteToolCatalog | ToolGatewayCallResponse | ToolGatewayDeclarationsResponse> {
+  if (!bridge) throw new Error("Site tool bridge is unavailable");
+  if (message.method === "catalog") return await bridge.catalog({ signal });
+  if (message.method === "declarations") {
+    if (!bridge.declarations) throw new Error("Site tool declarations are unavailable");
+    return await bridge.declarations({ signal });
+  }
+  return await bridge.call(sanitizeOpenGeniSiteToolCallRequest(message.payload!), { signal });
+}
+
+export function siteBridgeError(error: unknown): {
+  code: string;
+  message: string;
+  retryable: boolean;
+  outcomeUnknown: boolean;
+} {
+  const candidate = error as {
+    code?: unknown;
+    message?: unknown;
+    retryable?: unknown;
+    outcomeUnknown?: unknown;
+  };
+  return {
+    code: typeof candidate?.code === "string" ? candidate.code : "site_tool_call_failed",
+    message:
+      typeof candidate?.message === "string" ? candidate.message : "Site tool request failed",
+    retryable: candidate?.retryable === true,
+    outcomeUnknown: candidate?.outcomeUnknown === true,
+  };
+}