feat(embedded-web): send wrapper init metadata before host ready

.github/workflows/release.yml

@@ -116,14 +116,14 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Build
-        run: npm run prerelease
-
       - name: Set version from tag
         run: |
           TAG_VERSION="${GITHUB_REF#refs/tags/v}"
           npm version --no-git-tag-version "$TAG_VERSION"
 
+      - name: Build
+        run: npm run prerelease
+
       - name: Publish to npm
         run: |
           if [[ ${GITHUB_REF} == *alpha* ]]; then

demo/demo.js

@@ -27,10 +27,7 @@ window.testAuthentication = async () => {
       try {
         authPayload = JSON.parse(authPayloadText);
       } catch (jsonError) {
-        window.addLogEntry(
-          `Invalid JSON in payload: ${jsonError.message}`,
-          "error",
-        );
+        window.addLogEntry(`Invalid JSON in payload: ${jsonError.message}`, "error");
         return;
       }
 
@@ -39,10 +36,7 @@ window.testAuthentication = async () => {
         "info",
       );
       const response = await component.auth(authPayload);
-      window.addLogEntry(
-        `Authentication successful: ${JSON.stringify(response)}`,
-        "success",
-      );
+      window.addLogEntry(`Authentication successful: ${JSON.stringify(response)}`, "success");
     } catch (error) {
       window.addLogEntry(`Authentication failed: ${error.message}`, "error");
     }
@@ -54,26 +48,18 @@ window.testAuthentication = async () => {
 window.showDeviceLinkQR = async () => {
   if (component?.showDeviceLinkQR) {
     try {
-      const payloadText = document.getElementById(
-        "device-link-qr-payload",
-      ).value;
+      const payloadText = document.getElementById("device-link-qr-payload").value;
       let payload;
       try {
         payload = JSON.parse(payloadText);
       } catch (jsonError) {
-        window.addLogEntry(
-          `Invalid JSON in payload: ${jsonError.message}`,
-          "error",
-        );
+        window.addLogEntry(`Invalid JSON in payload: ${jsonError.message}`, "error");
         return;
       }
 
       window.addLogEntry("Showing device-link QR", "info");
       const response = await component.showDeviceLinkQR(payload);
-      window.addLogEntry(
-        `Device-link QR finished with status: ${response.status}`,
-        "success",
-      );
+      window.addLogEntry(`Device-link QR finished with status: ${response.status}`, "success");
     } catch (error) {
       window.addLogEntry(`Device-link QR failed: ${error.message}`, "error");
     }
@@ -85,24 +71,16 @@ window.showDeviceLinkQR = async () => {
 window.configureApp = async () => {
   if (component?.configureApp) {
     try {
-      const payloadText = document.getElementById(
-        "configure-app-payload",
-      ).value;
+      const payloadText = document.getElementById("configure-app-payload").value;
       let payload;
       try {
         payload = JSON.parse(payloadText);
       } catch (jsonError) {
-        window.addLogEntry(
-          `Invalid JSON in payload: ${jsonError.message}`,
-          "error",
-        );
+        window.addLogEntry(`Invalid JSON in payload: ${jsonError.message}`, "error");
         return;
       }
 
-      window.addLogEntry(
-        `Configuring app with payload: ${JSON.stringify(payload)}`,
-        "info",
-      );
+      window.addLogEntry(`Configuring app with payload: ${JSON.stringify(payload)}`, "info");
       await component.configureApp(payload);
       window.addLogEntry("App configuration successful", "success");
     } catch (error) {
@@ -116,17 +94,12 @@ window.configureApp = async () => {
 window.setInteractionOptions = async () => {
   if (component?.setInteractionOptions) {
     try {
-      const payloadText = document.getElementById(
-        "interaction-options-payload",
-      ).value;
+      const payloadText = document.getElementById("interaction-options-payload").value;
       let payload;
       try {
         payload = JSON.parse(payloadText);
       } catch (jsonError) {
-        window.addLogEntry(
-          `Invalid JSON in payload: ${jsonError.message}`,
-          "error",
-        );
+        window.addLogEntry(`Invalid JSON in payload: ${jsonError.message}`, "error");
         return;
       }
 
@@ -137,40 +110,26 @@ window.setInteractionOptions = async () => {
       await component.setInteractionOptions(payload);
       window.addLogEntry("Interaction options set successfully", "success");
     } catch (error) {
-      window.addLogEntry(
-        `Set interaction options failed: ${error.message}`,
-        "error",
-      );
+      window.addLogEntry(`Set interaction options failed: ${error.message}`, "error");
     }
   } else {
-    window.addLogEntry(
-      "Component not ready for setInteractionOptions",
-      "error",
-    );
+    window.addLogEntry("Component not ready for setInteractionOptions", "error");
   }
 };
 
 window.configureLegacy = async () => {
   if (component?.configure) {
     try {
-      const payloadText = document.getElementById(
-        "legacy-configure-payload",
-      ).value;
+      const payloadText = document.getElementById("legacy-configure-payload").value;
       let payload;
       try {
         payload = JSON.parse(payloadText);
       } catch (jsonError) {
-        window.addLogEntry(
-          `Invalid JSON in payload: ${jsonError.message}`,
-          "error",
-        );
+        window.addLogEntry(`Invalid JSON in payload: ${jsonError.message}`, "error");
         return;
       }
 
-      window.addLogEntry(
-        `Sending legacy configure payload: ${JSON.stringify(payload)}`,
-        "info",
-      );
+      window.addLogEntry(`Sending legacy configure payload: ${JSON.stringify(payload)}`, "info");
       await component.configure(payload);
       window.addLogEntry("Legacy configure successful", "success");
     } catch (error) {
@@ -184,17 +143,12 @@ window.configureLegacy = async () => {
 window.configureSessionLegacy = async () => {
   if (component?.configureSession) {
     try {
-      const payloadText = document.getElementById(
-        "legacy-configure-session-payload",
-      ).value;
+      const payloadText = document.getElementById("legacy-configure-session-payload").value;
       let payload;
       try {
         payload = JSON.parse(payloadText);
       } catch (jsonError) {
-        window.addLogEntry(
-          `Invalid JSON in payload: ${jsonError.message}`,
-          "error",
-        );
+        window.addLogEntry(`Invalid JSON in payload: ${jsonError.message}`, "error");
         return;
       }
 
@@ -205,10 +159,7 @@ window.configureSessionLegacy = async () => {
       await component.configureSession(payload);
       window.addLogEntry("Legacy configureSession successful", "success");
     } catch (error) {
-      window.addLogEntry(
-        `Legacy configureSession failed: ${error.message}`,
-        "error",
-      );
+      window.addLogEntry(`Legacy configureSession failed: ${error.message}`, "error");
     }
   } else {
     window.addLogEntry("Component not ready for configureSession", "error");
@@ -224,17 +175,11 @@ window.addFacts = async () => {
       try {
         payload = JSON.parse(payloadText);
       } catch (jsonError) {
-        window.addLogEntry(
-          `Invalid JSON in payload: ${jsonError.message}`,
-          "error",
-        );
+        window.addLogEntry(`Invalid JSON in payload: ${jsonError.message}`, "error");
         return;
       }
 
-      window.addLogEntry(
-        `Adding facts with payload: ${JSON.stringify(payload)}`,
-        "info",
-      );
+      window.addLogEntry(`Adding facts with payload: ${JSON.stringify(payload)}`, "info");
       await component.addFacts(payload);
       window.addLogEntry("Add facts successful", "success");
     } catch (error) {
@@ -254,17 +199,11 @@ window.navigate = async () => {
       try {
         payload = JSON.parse(payloadText);
       } catch (jsonError) {
-        window.addLogEntry(
-          `Invalid JSON in payload: ${jsonError.message}`,
-          "error",
-        );
+        window.addLogEntry(`Invalid JSON in payload: ${jsonError.message}`, "error");
         return;
       }
 
-      window.addLogEntry(
-        `Navigating with payload: ${JSON.stringify(payload)}`,
-        "info",
-      );
+      window.addLogEntry(`Navigating with payload: ${JSON.stringify(payload)}`, "info");
       await component.navigate(payload);
       window.addLogEntry("Navigation successful", "success");
     } catch (error) {
@@ -279,29 +218,18 @@ window.createInteraction = async () => {
   if (component?.createInteraction) {
     try {
       // Parse the JSON from the textarea
-      const payloadText = document.getElementById(
-        "create-interaction-payload",
-      ).value;
+      const payloadText = document.getElementById("create-interaction-payload").value;
       let payload;
       try {
         payload = JSON.parse(payloadText);
       } catch (jsonError) {
-        window.addLogEntry(
-          `Invalid JSON in payload: ${jsonError.message}`,
-          "error",
-        );
+        window.addLogEntry(`Invalid JSON in payload: ${jsonError.message}`, "error");
         return;
       }
 
-      window.addLogEntry(
-        `Creating interaction with payload: ${JSON.stringify(payload)}`,
-        "info",
-      );
+      window.addLogEntry(`Creating interaction with payload: ${JSON.stringify(payload)}`, "info");
       const response = await component.createInteraction(payload);
-      window.addLogEntry(
-        `Interaction creation successful: ${JSON.stringify(response)}`,
-        "success",
-      );
+      window.addLogEntry(`Interaction creation successful: ${JSON.stringify(response)}`, "success");
       // Update navigate payload textarea with the returned interaction ID
       try {
         const interactionId = response.id || null;
@@ -337,16 +265,10 @@ window.createInteraction = async () => {
           }
         }
       } catch (updateError) {
-        window.addLogEntry(
-          `Failed to update navigate payload: ${updateError.message}`,
-          "error",
-        );
+        window.addLogEntry(`Failed to update navigate payload: ${updateError.message}`, "error");
       }
     } catch (error) {
-      window.addLogEntry(
-        `Interaction creation failed: ${error.message}`,
-        "error",
-      );
+      window.addLogEntry(`Interaction creation failed: ${error.message}`, "error");
     }
   } else {
     window.addLogEntry("Component not ready for createInteraction", "error");
@@ -372,11 +294,14 @@ window.updateStatus = () => {
 
   if (component) {
     const baseURL = component.getAttribute("baseURL");
+    const debugStatus = component.getDebugStatus?.();
 
     statusElement.innerHTML = `
             <strong>Current Status:</strong><br>
             Base URL: ${baseURL}<br>
-            Component Ready: ${component.show && component.hide ? "Yes" : "No"}<br>
+            Custom element loaded: ${component.show && component.hide ? "Yes" : "No"}<br>
+            Message bridge created: ${debugStatus?.postMessageHandlerExists ? "Yes" : "No"}<br>
+            Assistant ready for postMessage: ${debugStatus?.postMessageHandlerReady ? "Yes" : "No"}<br>
         `;
   } else {
     statusElement.innerHTML = "Status: Component not found";
@@ -386,9 +311,7 @@ window.updateStatus = () => {
 // Initialize demo when DOM is ready
 document.addEventListener("DOMContentLoaded", () => {
   // Generate random encounter ID for create interaction
-  const createInteractionPayload = document.getElementById(
-    "create-interaction-payload",
-  );
+  const createInteractionPayload = document.getElementById("create-interaction-payload");
   if (createInteractionPayload) {
     const randomId = `encounter-${Date.now()}`;
     const payload = {
@@ -406,42 +329,24 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 
   // Add event listeners to buttons
-  document
-    .getElementById("show-btn")
-    .addEventListener("click", window.showCorti);
-  document
-    .getElementById("hide-btn")
-    .addEventListener("click", window.hideCorti);
-  document
-    .getElementById("auth-btn")
-    .addEventListener("click", window.testAuthentication);
-  document
-    .getElementById("device-link-qr-btn")
-    .addEventListener("click", window.showDeviceLinkQR);
-  document
-    .getElementById("clear-log-btn")
-    .addEventListener("click", window.clearLog);
+  document.getElementById("show-btn").addEventListener("click", window.showCorti);
+  document.getElementById("hide-btn").addEventListener("click", window.hideCorti);
+  document.getElementById("auth-btn").addEventListener("click", window.testAuthentication);
+  document.getElementById("device-link-qr-btn").addEventListener("click", window.showDeviceLinkQR);
+  document.getElementById("clear-log-btn").addEventListener("click", window.clearLog);
   document
     .getElementById("create-interaction-btn")
     .addEventListener("click", window.createInteraction);
-  document
-    .getElementById("configure-app-btn")
-    .addEventListener("click", window.configureApp);
+  document.getElementById("configure-app-btn").addEventListener("click", window.configureApp);
   document
     .getElementById("set-interaction-options-btn")
     .addEventListener("click", window.setInteractionOptions);
-  document
-    .getElementById("legacy-configure-btn")
-    .addEventListener("click", window.configureLegacy);
+  document.getElementById("legacy-configure-btn").addEventListener("click", window.configureLegacy);
   document
     .getElementById("legacy-configure-session-btn")
     .addEventListener("click", window.configureSessionLegacy);
-  document
-    .getElementById("add-facts-btn")
-    .addEventListener("click", window.addFacts);
-  document
-    .getElementById("navigate-btn")
-    .addEventListener("click", window.navigate);
+  document.getElementById("add-facts-btn").addEventListener("click", window.addFacts);
+  document.getElementById("navigate-btn").addEventListener("click", window.navigate);
 
   // Update status periodically
   setInterval(window.updateStatus, 1000);
@@ -450,11 +355,11 @@ document.addEventListener("DOMContentLoaded", () => {
 // Initialize when component is defined
 customElements.whenDefined("corti-embedded").then(() => {
   window.updateStatus();
-  window.addLogEntry("Corti component loaded and ready", "success");
-  component.addEventListener("error", event => {
+  window.addLogEntry("Corti custom element loaded", "success");
+  component.addEventListener("error", (event) => {
     console.log(event.detail);
   });
-  component.addEventListener("add-facts", event => {
+  component.addEventListener("add-facts", (event) => {
     console.log(event.detail);
   });
 });