@salesforcedevs/dx-components 1.31.2 → 1.31.4

package/lwc.config.json

@@ -6,6 +6,7 @@
     ],
     "expose": [
         "dx/agenda",
+        "dx/agentMiawUi",
         "dx/alert",
         "dx/audio",
         "dx/banner",

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.31.2",
+    "version": "1.31.4",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
-        "node": "20.x"
+        "node": "22.x"
     },
     "publishConfig": {
         "access": "public"
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "c9d5f51d2ff55d5879b966fdfe4d2c6b49870f67"
+    "gitHead": "e07990b3a28e027251ddb123cc36599ca9a983da"
 }

package/src/modules/dx/agentMiawUi/agentMiawUi.css

@@ -0,0 +1,4 @@
+:host {
+    position: relative;
+    z-index: 2147483000;
+}

package/src/modules/dx/agentMiawUi/agentMiawUi.html

@@ -0,0 +1,3 @@
+<template>
+    <div lwc:dom="manual" class="miaw-host"></div>
+</template>

package/src/modules/dx/agentMiawUi/agentMiawUi.ts

@@ -0,0 +1,120 @@
+/* eslint-disable @lwc/lwc/no-document-query */
+import { LightningElement, api } from "lwc";
+import { waitUntilResolved } from "dxUtils/async";
+
+const HOSTED_MIAW_UI_TAG = "page-builder-miaw-ui";
+const SCRIPT_SRC =
+    "https://a.sfdcstatic.com/digital/@sfdc-www-emu/page-builder-miaw-ui/v1-stable/page-builder-miaw-ui.js";
+const DEFINE_TIMEOUT_MS = 60000;
+const WHEN_DEFINED_TIMEOUT_MESSAGE =
+    `MIAW UI embed (${HOSTED_MIAW_UI_TAG}) did not register within ${
+        DEFINE_TIMEOUT_MS / 1000
+    }s. ` +
+    "Confirm the script loads (network tab), your origin is allowed, and CSP permits this script.";
+
+let scriptLoaded: Promise<void> | null = null;
+
+async function ensureMiawScriptAndDefinition(): Promise<void> {
+    if (customElements.get(HOSTED_MIAW_UI_TAG)) {
+        return;
+    }
+
+    let script = document.querySelector(
+        `script[src="${SCRIPT_SRC}"]`
+    ) as HTMLScriptElement | null;
+
+    if (!script) {
+        script = document.createElement("script");
+        script.type = "module";
+        script.src = SCRIPT_SRC;
+        await new Promise<void>((resolve, reject) => {
+            script!.addEventListener("load", () => resolve(), { once: true });
+            script!.addEventListener(
+                "error",
+                () =>
+                    reject(
+                        new Error(
+                            `Failed to load MIAW UI embed script (${SCRIPT_SRC}). Check status code and referrer rules.`
+                        )
+                    ),
+                { once: true }
+            );
+            document.head.appendChild(script!);
+        });
+    }
+    await waitUntilResolved(
+        customElements.whenDefined(HOSTED_MIAW_UI_TAG),
+        DEFINE_TIMEOUT_MS,
+        WHEN_DEFINED_TIMEOUT_MESSAGE
+    );
+}
+
+/** Loads the MIAW UI script if it is not already loaded. This occurs only once per module instance. */
+function loadMiawUiScript(): Promise<void> {
+    if (!scriptLoaded) {
+        scriptLoaded = ensureMiawScriptAndDefinition();
+    }
+    return scriptLoaded;
+}
+
+export default class AgentMiawUi extends LightningElement {
+    /** Salesforce org id (15- or 18-character Id). */
+    @api orgId!: string;
+    /** Messaging endpoint host URL (e.g. https://org62.my.salesforce-scrt.com). */
+    @api messagingUrl!: string;
+    @api deploymentDevName = "page_builder_miaw_ui";
+    @api richComponentVersion = "v1-stable";
+    @api routingAttributes?: string;
+    /**
+     * JSON array of suggested prompt strings for the MIAW UI (e.g.
+     * `["Show me an Agentforce demo","Help me build a business case"]`); forwarded as `prompts` on the embed.
+     */
+    @api prompts?: string;
+    /** When set, forwarded to the embed as `welcome-text` (greeting / headline copy). */
+    @api welcomeText?: string;
+
+    /** After first mount attempt is scheduled, we do not run it again for this instance. */
+    private hasRendered = false;
+
+    renderedCallback(): void {
+        if (!this.hasRendered) {
+            this.hasRendered = true;
+            this.mountMiawHost();
+        }
+    }
+
+    private async mountMiawHost(): Promise<void> {
+        try {
+            await loadMiawUiScript();
+            const container = this.template.querySelector(".miaw-host");
+            if (!container) {
+                return;
+            }
+            const el = document.createElement(HOSTED_MIAW_UI_TAG);
+            el.setAttribute("org-id", this.orgId);
+            el.setAttribute("messaging-url", this.messagingUrl);
+            el.setAttribute("deployment-dev-name", this.deploymentDevName);
+            el.setAttribute("input-variant", "mini-sidebar");
+            el.setAttribute("is-on-digital-domain", "false");
+            el.setAttribute(
+                "rich-component-version",
+                this.richComponentVersion
+            );
+            if (this.routingAttributes) {
+                el.setAttribute(
+                    "routing-attributes",
+                    this.routingAttributes
+                );
+            }
+            if (this.prompts) {
+                el.setAttribute("prompts", this.prompts);
+            }
+            if (this.welcomeText) {
+                el.setAttribute("welcome-text", this.welcomeText);
+            }
+            container.appendChild(el);
+        } catch (e) {
+            console.error(e);
+        }
+    }
+}

package/src/modules/dxUtils/async/async.ts

@@ -43,3 +43,35 @@ export function pollUntil(
         }
     });
 }
+
+/**
+ * Returns the same settled value or rejection as `promise`, or rejects after `forMaximumMs`
+ * if it does not settle in time. When `forMaximumMs` is omitted or non-positive, returns
+ * `promise` unchanged. Clears the timeout when `promise` settles first.
+ */
+export function waitUntilResolved<T>(
+    promise: Promise<T>,
+    forMaximumMs?: number,
+    timeoutMessage = "Timed out waiting for promise to settle."
+): Promise<T> {
+    if (forMaximumMs == null || forMaximumMs <= 0) {
+        return promise;
+    }
+
+    return new Promise<T>((resolve, reject) => {
+        const timeoutId = setTimeout(() => {
+            reject(new Error(timeoutMessage));
+        }, forMaximumMs);
+
+        promise.then(
+            (value) => {
+                clearTimeout(timeoutId);
+                resolve(value);
+            },
+            (reason: unknown) => {
+                clearTimeout(timeoutId);
+                reject(reason);
+            }
+        );
+    });
+}