@buni.ai/chatbot-angular 1.0.27 → 1.0.29

package/dist/index.esm.js

@@ -354,12 +354,12 @@ class BuniChatWidget {
                         if (event.source === ((_j = this.chatIframe) === null || _j === void 0 ? void 0 : _j.contentWindow) &&
                             event.origin === this.getBaseUrl()) {
                             if (this.isMinimalModeEnabled()) {
-                                if (!this.state.isOpen) {
-                                    void this.openChat();
-                                }
                                 this.postMessageToWidget("minimize");
+                                this.applyMinimalContainerFrame();
                                 this.displayMode = "minimal";
                                 this.state.displayMode = "minimal";
+                                this.state.isOpen = true;
+                                this.state.isMinimized = false;
                             }
                             else {
                                 this.closeChat();
@@ -512,56 +512,47 @@ class BuniChatWidget {
     async openChatInMinimalMode() {
         if (!this.chatIframe || !this.widgetElement || !this.triggerIframe)
             return;
-        const config = this.options.config || {};
-        const isMobile = window.innerWidth <= 768;
-        const isTablet = window.innerWidth > 768 && window.innerWidth <= 1024;
-        const ensureUnits = (value, defaultValue) => {
-            if (!value)
-                return defaultValue;
-            const str = String(value);
-            if (str.match(/^[\d.]+\s*(px|em|rem|%|vh|vw)$/))
-                return str;
-            if (str.match(/^[\d.]+$/))
-                return `${str}px`;
-            return str;
-        };
-        const widthValue = ensureUnits(config.width, "350px");
-        const heightValue = ensureUnits(config.height, "650px");
-        const chatWidth = isMobile
-            ? "100vw"
-            : isTablet
-                ? "min(calc(100vw - 3rem), 370px)"
-                : widthValue;
-        const chatHeight = isMobile
-            ? "100vh"
-            : isTablet
-                ? "min(calc(100vh - 3rem), 620px)"
-                : heightValue;
-        // Size container to full chat dimensions initially (iframe needs space to render)
+        this.applyMinimalContainerFrame();
+        this.state.isMinimized = false;
+        this.state.isOpen = true;
+        this.displayMode = "minimal";
+        this.state.displayMode = "minimal";
+        // Ask the iframe to enter minimal mode; it will reply with "minimized" when ready
+        this.postMessageToWidget("minimize");
+        this.emit("minimized", { timestamp: Date.now() });
+    }
+    applyMinimalContainerFrame() {
+        var _a;
+        if (!this.widgetElement || !this.chatIframe || !this.triggerIframe)
+            return;
+        const position = ((_a = this.options.config) === null || _a === void 0 ? void 0 : _a.position) || "bottom-right";
+        // Use a conservative initial height; the iframe will report the exact
+        // rendered card height via "minimal_card_size" and we'll resize then.
+        const initialMinimalHeight = "420px";
         this.widgetElement.style.cssText = `
       position: fixed;
       pointer-events: none;
       z-index: 999999;
-      width: ${chatWidth};
-      height: ${chatHeight};
-      ${isMobile ? "max-width: 100vw; max-height: 100vh;" : ""}
+      width: min(calc(100vw - 1.5rem), 390px);
+      max-width: min(calc(100vw - 1.5rem), 390px);
+      height: ${initialMinimalHeight};
+      max-height: ${initialMinimalHeight};
       transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
-      ${this.getPositionStyles(config.position || "bottom-right", false)}
+      ${this.getPositionStyles(position, true)}
       display: block;
-      overflow: visible;
+      overflow: hidden;
+      border-radius: 16px;
+      box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.45);
       box-sizing: border-box;
     `;
-        // Hide trigger, show chat iframe
         this.triggerIframe.style.display = "none";
         this.chatIframe.style.display = "block";
         this.chatIframe.style.visibility = "visible";
-        this.state.isMinimized = false;
-        this.state.isOpen = true;
-        this.displayMode = "minimal";
-        this.state.displayMode = "minimal";
-        // Ask the iframe to enter minimal mode; it will reply with "minimized" when ready
-        this.postMessageToWidget("minimize");
-        this.emit("minimized", { timestamp: Date.now() });
+        this.chatIframe.style.width = "100%";
+        this.chatIframe.style.height = initialMinimalHeight;
+        this.chatIframe.style.maxHeight = initialMinimalHeight;
+        this.chatIframe.style.borderRadius = "0";
+        this.chatIframe.style.boxShadow = "none";
     }
     async openChat() {
         if (!this.chatIframe || !this.widgetElement || !this.triggerIframe)
@@ -612,6 +603,11 @@ class BuniChatWidget {
         this.triggerIframe.style.display = "none";
         this.chatIframe.style.display = "block";
         this.chatIframe.style.visibility = "visible";
+        // Restore full-mode iframe styles that may have been overridden in minimal mode
+        this.chatIframe.style.height = "100%";
+        this.chatIframe.style.maxHeight = "100%";
+        this.chatIframe.style.borderRadius = isMobile ? "0" : "16px";
+        this.chatIframe.style.boxShadow = isMobile ? "none" : "0 8px 32px rgba(0,0,0,0.15)";
         this.state.isMinimized = false;
         this.state.isOpen = true;
         this.displayMode = "full";
@@ -698,7 +694,7 @@ class BuniChatWidget {
     setupPostMessageAPI(iframe) {
         // Listen for messages from the iframe
         window.addEventListener("message", (event) => {
-            var _a, _b;
+            var _a;
             if (event.source !== iframe.contentWindow) {
                 return;
             }
@@ -740,45 +736,34 @@ class BuniChatWidget {
                         this.options.onNewMessage(data);
                     }
                     break;
-                case "minimized":
+                case "minimized": {
                     this.syncServerBehaviorFromData(data);
+                    const reportedDisplayMode = (data === null || data === void 0 ? void 0 : data.displayMode) === "minimal" || (data === null || data === void 0 ? void 0 : data.displayMode) === "hidden"
+                        ? data.displayMode
+                        : null;
+                    if (reportedDisplayMode === "hidden") {
+                        this.closeChat();
+                        this.displayMode = "hidden";
+                        this.state.displayMode = "hidden";
+                        break;
+                    }
                     if (this.isMinimalModeEnabled()) {
                         this.displayMode = "minimal";
                         this.state.displayMode = "minimal";
                         this.state.isOpen = true;
                         this.state.isMinimized = false;
-                        // Apply a full minimal-mode frame update to avoid stale full-mode sizing/position.
-                        if (this.widgetElement && this.chatIframe && this.triggerIframe) {
-                            const position = ((_a = this.options.config) === null || _a === void 0 ? void 0 : _a.position) || "bottom-right";
-                            this.widgetElement.style.cssText = `
-                position: fixed;
-                pointer-events: none;
-                z-index: 999999;
-                width: min(calc(100vw - 1.5rem), 390px);
-                max-width: min(calc(100vw - 1.5rem), 390px);
-                height: auto;
-                transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
-                ${this.getPositionStyles(position, true)}
-                display: block;
-                overflow: visible;
-                box-sizing: border-box;
-              `;
-                            this.triggerIframe.style.display = "none";
-                            this.chatIframe.style.display = "block";
-                            this.chatIframe.style.visibility = "visible";
-                            this.chatIframe.style.width = "100%";
-                            this.chatIframe.style.height = "min(calc(100vh - 1.5rem), 520px)";
-                        }
+                        this.applyMinimalContainerFrame();
                     }
                     else {
                         // Backward-compatible behavior.
                         this.closeChat();
                     }
                     break;
+                }
                 case "new_unread_message":
                     // Update unread count in trigger
                     this.state.unreadCount++;
-                    if ((_b = this.triggerIframe) === null || _b === void 0 ? void 0 : _b.contentWindow) {
+                    if ((_a = this.triggerIframe) === null || _a === void 0 ? void 0 : _a.contentWindow) {
                         this.triggerIframe.contentWindow.postMessage({ type: "updateUnreadCount", count: this.state.unreadCount }, window.location.origin);
                     }
                     break;
@@ -796,6 +781,25 @@ class BuniChatWidget {
                         this.options.onError(data.error);
                     }
                     break;
+                case "maximized":
+                    // The iframe has switched to full mode (e.g. user clicked expand from
+                    // minimal card). Resize the host container to the configured full size.
+                    void this.openChat();
+                    break;
+                case "minimal_card_size":
+                    // The iframe reports its rendered card height so we can shrink the
+                    // container to wrap the card tightly. Without this the host-page
+                    // box-shadow renders around the full container, appearing as padding.
+                    // Only apply when still in minimal mode to avoid overriding a pending
+                    // full-mode transition.
+                    if (this.widgetElement && this.chatIframe && (data === null || data === void 0 ? void 0 : data.height) > 0 && this.displayMode === "minimal") {
+                        const h = `${data.height}px`;
+                        this.widgetElement.style.height = h;
+                        this.widgetElement.style.maxHeight = h;
+                        this.chatIframe.style.height = h;
+                        this.chatIframe.style.maxHeight = h;
+                    }
+                    break;
             }
         });
     }