public/elements/OverlayFrame.jsx

// public/elements/OverlayFrame.jsx
//
// Renders one of the agent's self-contained visualization HTML files (the
// interactive layer overlay, a thickness profile, a class-distribution chart,
// ...) inside an iframe. The HTML is passed whole as `props.html` and isolated
// in the iframe via `srcDoc` so its inline <script> runs without touching the
// Chainlit page.
//
// Chainlit injects component props as a global `props` object — do NOT take
// them as a function argument.
export default function OverlayFrame() {
  const html = (typeof props !== "undefined" && props && props.html) || "";
  const title = (typeof props !== "undefined" && props && props.title) || "visualization";

  if (!html) {
    return <div className="text-sm opacity-70">No visualization content.</div>;
  }

  return (
    <div style={{ width: "100%", marginTop: "8px" }}>
      <div style={{ fontSize: "12px", opacity: 0.7, marginBottom: "4px" }}>{title}</div>
      <iframe
        title={title}
        srcDoc={html}
        sandbox="allow-scripts"
        style={{
          width: "100%",
          height: "560px",
          border: 0,
          borderRadius: "8px",
          background: "#0d1117",
        }}
      />
    </div>
  );
}