import React, { useEffect, useState } from "react";
import { createRoot } from "react-dom/client";
import { AgentNativeExtensionSlot } from "./extensions/AgentNativeExtensionFrame.js";
import { startSessionReplay, stopSessionReplay } from "./session-replay.js";
const extension = {
id: "session-replay-extension",
name: "Session replay extension",
content: `
Inside recorded extension
`,
manifest: { slots: ["session-replay.test"] },
};
declare global {
interface Window {
__sessionReplayIframeE2E?: {
done: boolean;
error?: string;
};
}
}
function Host() {
const [recording, setRecording] = useState(false);
useEffect(() => {
let disposed = false;
void startSessionReplay({
publicKey: "anpk_iframe_e2e",
endpoint: "/__session-replay-iframe-upload",
requireSignedInUser: false,
flushIntervalMs: 100_000,
maxEventsPerBatch: 500,
}).then((result) => {
if (disposed) return;
if (!result.started) {
window.__sessionReplayIframeE2E = {
done: true,
error: `Recorder did not start: ${result.reason ?? "unknown"}`,
};
return;
}
setRecording(true);
});
const onMessage = (event: MessageEvent) => {
if (event.data?.type !== "session-replay-iframe-e2e.done") return;
void stopSessionReplay("manual").then(() => {
window.__sessionReplayIframeE2E = { done: true };
});
};
window.addEventListener("message", onMessage);
return () => {
disposed = true;
window.removeEventListener("message", onMessage);
void stopSessionReplay("manual");
};
}, []);
return recording ? (
<>