@buni.ai/chatbot-angular 1.0.24 → 1.0.26

package/dist/index.esm.js

@@ -58,6 +58,31 @@ class BuniChatWidget {
         this.chatTargetOrigin = null;
         this.handshakeComplete = false;
         this.outboundMessageQueue = [];
+        this.displayMode = "hidden";
+        this.serverBehavior = {};
+    }
+    isMinimalModeEnabled() {
+        var _a, _b;
+        if (typeof ((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.enableMinimalMode) === "boolean") {
+            return this.options.config.enableMinimalMode;
+        }
+        return Boolean(this.serverBehavior.enableMinimalMode);
+    }
+    syncServerBehaviorFromData(data) {
+        if (!data || typeof data !== "object") {
+            return;
+        }
+        const behaviorCandidate = data.behavior && typeof data.behavior === "object"
+            ? data.behavior
+            : data;
+        if (typeof behaviorCandidate.enableMinimalMode === "boolean") {
+            this.serverBehavior.enableMinimalMode = behaviorCandidate.enableMinimalMode;
+        }
+        if (behaviorCandidate.defaultMode === "full" ||
+            behaviorCandidate.defaultMode === "minimal" ||
+            behaviorCandidate.defaultMode === "hidden") {
+            this.serverBehavior.defaultMode = behaviorCandidate.defaultMode;
+        }
     }
     async initialize(options) {
         this.options = options;
@@ -221,6 +246,15 @@ class BuniChatWidget {
                     params.set("startButtonText", config.startButtonText);
                 if (config.preChatFormFields)
                     params.set("preChatFormFields", JSON.stringify(config.preChatFormFields));
+                if (config.enableMinimalMode !== undefined) {
+                    params.set("enableMinimalMode", String(config.enableMinimalMode));
+                }
+                if (config.defaultMode) {
+                    params.set("defaultMode", config.defaultMode);
+                }
+                if (config.autoMessages && Array.isArray(config.autoMessages)) {
+                    params.set("autoMessages", JSON.stringify(config.autoMessages));
+                }
                 chatIframe.src = `${this.getBaseUrl()}/embed/chat?${params.toString()}`;
                 // Chat iframe styling - initially hidden
                 chatIframe.style.cssText = `
@@ -261,13 +295,15 @@ class BuniChatWidget {
                     this.triggerIframe = triggerIframe;
                     this.chatIframe = chatIframe;
                     this.state.isMinimized = true;
+                    this.state.displayMode = "hidden";
+                    this.displayMode = "hidden";
                     this.state.isLoaded = true;
                     resolve();
                 };
             };
             // Listen for trigger and connection events
             window.addEventListener("message", (event) => {
-                var _a, _b;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
                 const payload = event.data;
                 if (!payload || typeof payload !== "object")
                     return;
@@ -278,20 +314,62 @@ class BuniChatWidget {
                         // Check if message is from chat iframe
                         if (event.source === ((_a = this.chatIframe) === null || _a === void 0 ? void 0 : _a.contentWindow) &&
                             event.origin === this.getBaseUrl()) {
-                            // Connection is ready, show the trigger button
-                            if (container && !config.hideDefaultTrigger) {
+                            this.syncServerBehaviorFromData(payload.data);
+                            const effectiveDefaultMode = (_d = (_c = (_b = this.options.config) === null || _b === void 0 ? void 0 : _b.defaultMode) !== null && _c !== void 0 ? _c : this.serverBehavior.defaultMode) !== null && _d !== void 0 ? _d : "full";
+                            const effectiveMinimalEnabled = this.isMinimalModeEnabled();
+                            if (effectiveMinimalEnabled && effectiveDefaultMode === "minimal") {
+                                // Auto-open in minimal card mode
+                                void this.openChatInMinimalMode();
+                            }
+                            else if ((_e = this.options.config) === null || _e === void 0 ? void 0 : _e.autoOpen) {
+                                void this.openChat();
+                            }
+                            else if (container && !config.hideDefaultTrigger) {
+                                // Show the trigger button
                                 container.style.display = "block";
                             }
                             // Emit connection_ready event for consumers
-                            this.emit("connection_ready", { timestamp: Date.now() });
+                            this.emit("connection_ready", {
+                                timestamp: Date.now(),
+                                behavior: (_f = payload.data) === null || _f === void 0 ? void 0 : _f.behavior,
+                            });
                             if (this.options.onConnectionReady &&
                                 typeof this.options.onConnectionReady === "function") {
-                                this.options.onConnectionReady({ timestamp: Date.now() });
+                                this.options.onConnectionReady({
+                                    timestamp: Date.now(),
+                                    behavior: (_g = payload.data) === null || _g === void 0 ? void 0 : _g.behavior,
+                                });
+                            }
+                        }
+                        break;
+                    case "chatbot:close":
+                        if (event.source === ((_h = this.chatIframe) === null || _h === void 0 ? void 0 : _h.contentWindow) &&
+                            event.origin === this.getBaseUrl()) {
+                            this.closeChat();
+                            this.displayMode = "hidden";
+                            this.state.displayMode = "hidden";
+                        }
+                        break;
+                    case "chatbot:minimize":
+                        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.displayMode = "minimal";
+                                this.state.displayMode = "minimal";
+                            }
+                            else {
+                                this.closeChat();
+                                this.displayMode = "hidden";
+                                this.state.displayMode = "hidden";
                             }
                         }
                         break;
                     case "trigger_clicked":
-                        if (event.source === ((_b = this.triggerIframe) === null || _b === void 0 ? void 0 : _b.contentWindow) &&
+                        if (event.source === ((_k = this.triggerIframe) === null || _k === void 0 ? void 0 : _k.contentWindow) &&
                             event.origin === window.location.origin) {
                             this.openChat();
                         }
@@ -301,13 +379,11 @@ class BuniChatWidget {
             // Trigger the load event
             // if by 10 seconds the ready message is not received, we want to manually, set the container to visible
             setTimeout(() => {
-                if (!this.state.isLoaded) {
-                    if (container &&
-                        !config.hideDefaultTrigger &&
-                        container.style.display === "none" &&
-                        this.state.isOpen === false) {
-                        container.style.display = "block";
-                    }
+                if (container &&
+                    !config.hideDefaultTrigger &&
+                    container.style.display === "none" &&
+                    this.state.isOpen === false) {
+                    container.style.display = "block";
                 }
             }, 10000);
             triggerIframe.src = "about:blank";
@@ -433,11 +509,65 @@ class BuniChatWidget {
 </body>
 </html>`;
     }
+    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.widgetElement.style.cssText = `
+      position: fixed;
+      pointer-events: none;
+      z-index: 999999;
+      width: ${chatWidth};
+      height: ${chatHeight};
+      ${isMobile ? "max-width: 100vw; max-height: 100vh;" : ""}
+      transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
+      ${this.getPositionStyles(config.position || "bottom-right", false)}
+      display: block;
+      overflow: visible;
+      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() });
+    }
     async openChat() {
         if (!this.chatIframe || !this.widgetElement || !this.triggerIframe)
             return;
-        if (this.state.isOpen)
-            return; // Already open
+        if (this.state.isOpen && this.displayMode !== "minimal")
+            return; // Already open in full mode
         const config = this.options.config || {};
         const isMobile = window.innerWidth <= 768;
         const isTablet = window.innerWidth > 768 && window.innerWidth <= 1024;
@@ -484,6 +614,8 @@ class BuniChatWidget {
         this.chatIframe.style.visibility = "visible";
         this.state.isMinimized = false;
         this.state.isOpen = true;
+        this.displayMode = "full";
+        this.state.displayMode = "full";
         this.emit("maximized", { timestamp: Date.now() });
     }
     closeChat() {
@@ -516,6 +648,8 @@ class BuniChatWidget {
         this.triggerIframe.style.display = "block";
         this.state.isMinimized = true;
         this.state.isOpen = false;
+        this.displayMode = "hidden";
+        this.state.displayMode = "hidden";
         this.emit("minimized", { timestamp: Date.now() });
     }
     getPositionStyles(position, isMinimized = false) {
@@ -607,8 +741,30 @@ class BuniChatWidget {
                     }
                     break;
                 case "minimized":
-                    // User clicked minimize in chat - close chat and show trigger
-                    this.closeChat();
+                    this.syncServerBehaviorFromData(data);
+                    if (this.isMinimalModeEnabled()) {
+                        if (!this.state.isOpen) {
+                            void this.openChat();
+                        }
+                        this.displayMode = "minimal";
+                        this.state.displayMode = "minimal";
+                        // Shrink container to actual minimal card size
+                        if (this.widgetElement && this.chatIframe) {
+                            const isMobile = window.innerWidth <= 768;
+                            if (!isMobile) {
+                                this.widgetElement.style.width =
+                                    "min(calc(100vw - 1.5rem), 390px)";
+                                this.widgetElement.style.height = "auto";
+                                this.widgetElement.style.overflow = "visible";
+                                this.chatIframe.style.height = "520px";
+                                this.chatIframe.style.width = "100%";
+                            }
+                        }
+                    }
+                    else {
+                        // Backward-compatible behavior.
+                        this.closeChat();
+                    }
                     break;
                 case "new_unread_message":
                     // Update unread count in trigger
@@ -743,10 +899,21 @@ class BuniChatWidget {
         }
     }
     minimize() {
+        if (this.isMinimalModeEnabled()) {
+            if (!this.state.isOpen) {
+                void this.openChat();
+            }
+            this.postMessageToWidget("minimize");
+            this.displayMode = "minimal";
+            this.state.displayMode = "minimal";
+            return;
+        }
         this.closeChat();
     }
     maximize() {
-        this.openChat();
+        void this.openChat();
+        this.displayMode = "full";
+        this.state.displayMode = "full";
     }
     setCustomerData(data) {
         this.customerData = { ...this.customerData, ...data };
@@ -787,6 +954,8 @@ class BuniChatWidget {
     }
     close() {
         this.closeChat();
+        this.displayMode = "hidden";
+        this.state.displayMode = "hidden";
     }
     on(event, callback) {
         if (!this.eventListeners.has(event)) {
@@ -822,7 +991,10 @@ class BuniChatWidget {
         }
     }
     getState() {
-        return { ...this.state };
+        return {
+            ...this.state,
+            displayMode: this.displayMode,
+        };
     }
     isReady() {
         return this.state.isLoaded;