@salesforcedevs/dx-components 1.31.7 → 1.31.8-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.31.7",
+    "version": "1.31.8-alpha.1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "ef557a5501d2ffae9c2a6316a63bc976776263d5"
+    "gitHead": "603ae2f74f050fb351c48981ce44926b8dedb4f9"
 }

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

@@ -58,6 +58,10 @@ function loadMiawUiScript(): Promise<void> {
 }
 
 export default class AgentMiawUi extends LightningElement {
+    private static readonly SIDEBAR_OPEN_ATTR = "data-xsf-agent-sidebar-open";
+    private static readonly AGENT_ROOT_SELECTOR = '[data-testid="agent-root"]';
+    private static readonly SIDEBAR_OPEN_CLASS = "view-sidebar";
+
     /** Salesforce org id (15- or 18-character Id). */
     @api orgId!: string;
     /** Messaging endpoint host URL (e.g. https://org62.my.salesforce-scrt.com). */
@@ -76,6 +80,8 @@ export default class AgentMiawUi extends LightningElement {
 
     /** After first mount attempt is scheduled, we do not run it again for this instance. */
     private hasRendered = false;
+    private sidebarStateObserver: MutationObserver | null = null;
+    private sidebarStateTargetSelector = "#main-content";
 
     renderedCallback(): void {
         if (!this.hasRendered) {
@@ -84,6 +90,11 @@ export default class AgentMiawUi extends LightningElement {
         }
     }
 
+    disconnectedCallback(): void {
+        this.sidebarStateObserver?.disconnect();
+        this.sidebarStateObserver = null;
+    }
+
     private async mountMiawHost(): Promise<void> {
         try {
             await loadMiawUiScript();
@@ -114,8 +125,43 @@ export default class AgentMiawUi extends LightningElement {
                 el.setAttribute("welcome-text", this.welcomeText);
             }
             container.appendChild(el);
+            this.bridgeSidebarState(el);
         } catch (e) {
             console.error(e);
         }
     }
+
+    private setSidebarOpenState(isOpen: boolean): void {
+        const targets = document.querySelectorAll(this.sidebarStateTargetSelector);
+        targets.forEach((target) => {
+            target.setAttribute(
+                AgentMiawUi.SIDEBAR_OPEN_ATTR,
+                isOpen ? "true" : "false"
+            );
+        });
+    }
+
+    private bridgeSidebarState(el: Element): void {
+        const host = el as HTMLElement;
+        const root = host.shadowRoot?.querySelector(
+            AgentMiawUi.AGENT_ROOT_SELECTOR
+        ) as HTMLElement | null;
+        if (!root) {
+            window.requestAnimationFrame(() => this.bridgeSidebarState(el));
+            return;
+        }
+
+        const isOpen = () =>
+            root.classList.contains(AgentMiawUi.SIDEBAR_OPEN_CLASS);
+        this.setSidebarOpenState(isOpen());
+
+        this.sidebarStateObserver?.disconnect();
+        this.sidebarStateObserver = new MutationObserver(() => {
+            this.setSidebarOpenState(isOpen());
+        });
+        this.sidebarStateObserver.observe(root, {
+            attributes: true,
+            attributeFilter: ["class"]
+        });
+    }
 }