@salesforcedevs/dx-components 1.32.1-alpha.2 → 1.32.1-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.32.1-alpha.2",
+    "version": "1.32.1-alpha.4",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "4288b70a2675c017c7107686bace5802189e9d44"
+    "gitHead": "e64bce535a62d5e89c1c3bfe226c424e99d28379"
 }

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

@@ -1,37 +1,18 @@
 /* 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 miawInitPromise: Promise<void> | null = null;
-
-function waitUntilHostedMiawUiDefined(): Promise<void> {
-    const 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.";
-
-    return new Promise((resolve, reject) => {
-        const timeoutId = window.setTimeout(() => {
-            reject(new Error(message));
-        }, DEFINE_TIMEOUT_MS);
-
-        customElements.whenDefined(HOSTED_MIAW_UI_TAG).then(
-            () => {
-                window.clearTimeout(timeoutId);
-                resolve();
-            },
-            (err: unknown) => {
-                window.clearTimeout(timeoutId);
-                reject(err);
-            }
-        );
-    });
-}
+let scriptLoaded: Promise<void> | null = null;
 
 async function ensureMiawScriptAndDefinition(): Promise<void> {
     if (customElements.get(HOSTED_MIAW_UI_TAG)) {
@@ -43,7 +24,11 @@ async function ensureMiawScriptAndDefinition(): Promise<void> {
     ) as HTMLScriptElement | null;
 
     if (script) {
-        await waitUntilHostedMiawUiDefined();
+        await waitUntilResolved(
+            customElements.whenDefined(HOSTED_MIAW_UI_TAG),
+            DEFINE_TIMEOUT_MS,
+            WHEN_DEFINED_TIMEOUT_MESSAGE
+        );
         return;
     }
 
@@ -66,20 +51,19 @@ async function ensureMiawScriptAndDefinition(): Promise<void> {
         document.head.appendChild(script!);
     });
 
-    await waitUntilHostedMiawUiDefined();
+    await waitUntilResolved(
+        customElements.whenDefined(HOSTED_MIAW_UI_TAG),
+        DEFINE_TIMEOUT_MS,
+        WHEN_DEFINED_TIMEOUT_MESSAGE
+    );
 }
 
-function loadMiawUi(): Promise<void> {
-    if (miawInitPromise) {
-        return miawInitPromise;
+/** 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();
     }
-
-    miawInitPromise = ensureMiawScriptAndDefinition().catch((e) => {
-        miawInitPromise = null;
-        throw e;
-    });
-
-    return miawInitPromise;
+    return scriptLoaded;
 }
 
 export default class AgentMiawUi extends LightningElement {
@@ -90,92 +74,81 @@ export default class AgentMiawUi extends LightningElement {
     @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;
     /**
      * When set, bar gradient start (CSS color); sets `--wes-color-af-bar-gradient-from` on the
-     * `.miaw-host` container and on the embed when present (LWC may reset `this.style` on the host).
+     * hosted `page-builder-miaw-ui` element when it exists.
      */
     @api gradientFrom?: string;
     /**
-     * When set, bar gradient end (CSS color); sets `--wes-color-af-bar-gradient-to` the same way.
+     * When set, bar gradient end (CSS color); sets `--wes-color-af-bar-gradient-to` on that element.
      */
     @api gradientTo?: string;
 
+    /** After first mount attempt is scheduled, we do not run it again for this instance. */
+    private hasRendered = false;
+
     renderedCallback(): void {
-        this.syncGradientToMiawSubtree();
+        if (!this.hasRendered) {
+            this.hasRendered = true;
+            this.mountMiawHost();
+        }
     }
 
-    /** Applies gradient custom properties where the embed can see them (not on `this` — LWC can clear host inline styles). */
-    private syncGradientToMiawSubtree(): void {
+    private setGradientColors(element: HTMLElement | null): void {
         const from = this.gradientFrom?.trim();
         const to = this.gradientTo?.trim();
-        if (!from && !to) {
-            return;
-        }
 
-        const container = this.template.querySelector(
-            ".miaw-host"
-        ) as HTMLElement | null;
-        if (!container) {
-            return;
+        if (from) {
+            element?.style?.setProperty(
+                "--wes-color-af-bar-gradient-from",
+                from!
+            );
         }
-
-        const embed = container.querySelector(
-            HOSTED_MIAW_UI_TAG
-        ) as HTMLElement | null;
-        const targets = embed ? [container, embed] : [container];
-
-        for (const node of targets) {
-            if (from) {
-                node.style.setProperty(
-                    "--wes-color-af-bar-gradient-from",
-                    from
-                );
-            }
-            if (to) {
-                node.style.setProperty("--wes-color-af-bar-gradient-to", to);
-            }
+        if (to) {
+            element?.style?.setProperty("--wes-color-af-bar-gradient-to", to!);
         }
     }
 
-    connectedCallback(): void {
-        // Past the connect flush so `this.template` includes `.miaw-host`; parent supplies `@api` in markup.
-        queueMicrotask(() => {
-            this.mountMiawHost();
-        });
-    }
-
-    private mountMiawHost(): void {
-        if (!this.orgId || !this.messagingUrl) {
-            return;
-        }
-        (async () => {
-            try {
-                await loadMiawUi();
-                const container = this.template.querySelector(".miaw-host");
-                if (!container || container.querySelector(HOSTED_MIAW_UI_TAG)) {
-                    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");
+    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(
-                    "rich-component-version",
-                    this.richComponentVersion
+                    "routing-attributes",
+                    this.routingAttributes
                 );
-                if (this.routingAttributes) {
-                    el.setAttribute(
-                        "routing-attributes",
-                        this.routingAttributes
-                    );
-                }
-                container.appendChild(el);
-                this.syncGradientToMiawSubtree();
-            } catch (e) {
-                console.error(e);
             }
-        })();
+            if (this.prompts) {
+                el.setAttribute("prompts", this.prompts);
+            }
+            if (this.welcomeText) {
+                el.setAttribute("welcome-text", this.welcomeText);
+            }
+            container.appendChild(el);
+            this.setGradientColors(el);
+        } catch (e) {
+            console.error(e);
+        }
     }
 }

package/src/modules/dx/footer/footer.ts

@@ -8,7 +8,7 @@ class Footer extends LightningElement {
     private _variant: FooterVariant = "small-signup";
     private isSlotEmpty = true;
     private signupUrl =
-        "https://www.salesforce.com/form/other/role-based-newsletter/?Developer=true";
+        "https://www.salesforce.com/company/newsletter-subscribe/?topics=Developer";
 
     @api
     mfeHomeHref: string = `/${window.location.host}`; // ugly hack: ideally this wouldn't be necessary, but the only way to remove the "See all ways to contact us" link from the footer MFE is to set this to a non-empty value other than "us"; and given the way that the footer works, the non-empty value needs to be something that can be appended to `/` and work correctly
@@ -151,7 +151,10 @@ function augmentWithNonMFEFooterFunctionality(FooterClass: typeof Footer) {
         private buildFooterConfigLookupTables(config: any[]) {
             config.forEach((item: any) => {
                 // attr_title is preferable to title because it is not language-specific
-                this.configItemTitleToItemLookup.set(item.attr_title || item.title, item);
+                this.configItemTitleToItemLookup.set(
+                    item.attr_title || item.title,
+                    item
+                );
                 if (item.menu_item_parent) {
                     const parentId = parseInt(item.menu_item_parent, 10);
                     const children =
@@ -188,26 +191,26 @@ function augmentWithNonMFEFooterFunctionality(FooterClass: typeof Footer) {
                 return;
             }
 
-            this.socialLinks =
-                socialLinksItems.map((child: any) => {
-                    const childTitle: string = child.attr_title || child.title || ""; // attr_title is preferable to title because it is not language-specific
-                    const iconSymbol =
-                        childTitle === "LinkedIn"
-                            ? "linked-in"
-                            : childTitle.toLocaleLowerCase();
-                    const iconUrlHash =
-                        iconSymbol === "twitter"
-                            ? "#twitter-x"
-                            : `#themed-${iconSymbol}`;
-
-                    return {
-                        href: child.url,
-                        iconSprite: "brand",
-                        iconURL: `${baseSocialIconUrl}${iconUrlHash}`,
-                        label: child.title,
-                        iconSymbol
-                    };
-                });
+            this.socialLinks = socialLinksItems.map((child: any) => {
+                const childTitle: string =
+                    child.attr_title || child.title || ""; // attr_title is preferable to title because it is not language-specific
+                const iconSymbol =
+                    childTitle === "LinkedIn"
+                        ? "linked-in"
+                        : childTitle.toLocaleLowerCase();
+                const iconUrlHash =
+                    iconSymbol === "twitter"
+                        ? "#twitter-x"
+                        : `#themed-${iconSymbol}`;
+
+                return {
+                    href: child.url,
+                    iconSprite: "brand",
+                    iconURL: `${baseSocialIconUrl}${iconUrlHash}`,
+                    label: child.title,
+                    iconSymbol
+                };
+            });
         }
 
         private setGeneralLinks() {
@@ -234,10 +237,14 @@ function augmentWithNonMFEFooterFunctionality(FooterClass: typeof Footer) {
 
             const generalLinks: any[] = [];
             generalLinksHeadingsItems.forEach((item: any) => {
-                const childrenItems = this.configItemParentToChildrenLookup.get(item.ID);
+                const childrenItems = this.configItemParentToChildrenLookup.get(
+                    item.ID
+                );
 
                 if (!childrenItems) {
-                    console.error(`General links children items not found for item with title "${item.title}"`);
+                    console.error(
+                        `General links children items not found for item with title "${item.title}"`
+                    );
                     return;
                 }
 
@@ -260,16 +267,24 @@ function augmentWithNonMFEFooterFunctionality(FooterClass: typeof Footer) {
         }
 
         private setLegalFooter() {
-            const copyrightNoticeItem = this.configItemTitleToItemLookup.get("All rights reserved");
+            const copyrightNoticeItem = this.configItemTitleToItemLookup.get(
+                "All rights reserved"
+            );
 
             if (!copyrightNoticeItem) {
-                console.error("All rights reserved item not found in footer config");
+                console.error(
+                    "All rights reserved item not found in footer config"
+                );
                 return;
             }
 
             const { url, description } = copyrightNoticeItem;
-            const copyrightNoticeInnerHtml = description.replace("{{All rights reserved}}", `<a href="${url}">All rights reserved</a>`);
-            const copyrightNoticeEl = this.template.querySelector(".copyright-notice")!;
+            const copyrightNoticeInnerHtml = description.replace(
+                "{{All rights reserved}}",
+                `<a href="${url}">All rights reserved</a>`
+            );
+            const copyrightNoticeEl =
+                this.template.querySelector(".copyright-notice")!;
             copyrightNoticeEl.innerHTML = copyrightNoticeInnerHtml;
             const copyrightLink = copyrightNoticeEl.querySelector("a");
             if (copyrightLink) {
@@ -278,10 +293,14 @@ function augmentWithNonMFEFooterFunctionality(FooterClass: typeof Footer) {
                 );
             }
 
-            const legalLinksItems = this.configItemParentToChildrenLookup.get(copyrightNoticeItem.ID);
+            const legalLinksItems = this.configItemParentToChildrenLookup.get(
+                copyrightNoticeItem.ID
+            );
 
             if (!legalLinksItems) {
-                console.error("Legal links children items not found in footer config");
+                console.error(
+                    "Legal links children items not found in footer config"
+                );
                 return;
             }
 
@@ -298,7 +317,8 @@ function augmentWithNonMFEFooterFunctionality(FooterClass: typeof Footer) {
                     link.href = "#";
                     link.onclick = this.handleCookiePreferencesClick;
                 } else if (itemTitle === "Your Privacy Choices") {
-                    link.img = "https://developer.salesforce.com/ns-assets/privacyoptions.svg";
+                    link.img =
+                        "https://developer.salesforce.com/ns-assets/privacyoptions.svg";
                 }
 
                 return link;
@@ -306,7 +326,10 @@ function augmentWithNonMFEFooterFunctionality(FooterClass: typeof Footer) {
         }
 
         private openOneTrustInfoDisplay() {
-            if ((window as any).OneTrust && (window as any).OneTrust.ToggleInfoDisplay) {
+            if (
+                (window as any).OneTrust &&
+                (window as any).OneTrust.ToggleInfoDisplay
+            ) {
                 (window as any).OneTrust.ToggleInfoDisplay();
             }
         }

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);
+            }
+        );
+    });
+}