@buni.ai/chatbot-core 1.0.11 → 1.0.13

package/dist/index.js

@@ -13,7 +13,8 @@ class BuniChatWidget {
         };
         this.eventListeners = new Map();
         this.widgetElement = null;
-        this.iframe = null;
+        this.triggerIframe = null;
+        this.chatIframe = null;
         this.customerData = null;
         this.sessionVariables = null;
     }
@@ -59,160 +60,400 @@ class BuniChatWidget {
             };
             const widthValue = ensureUnits(config.width, "350px");
             const heightValue = ensureUnits(config.height, "650px");
-            // Check if widget should start minimized
-            const shouldStartMinimized = config.initialMinimized === true;
+            // Configuration
             const showTriggerText = config.showTriggerText !== false;
             const hasTriggerText = !!config.triggerText;
-            // Detect if we're on mobile
+            const primaryColor = config.primaryColor || "#795548";
+            const triggerText = config.triggerText || "";
+            const companyName = config.companyName || "Chat Support";
+            // Responsive breakpoints
             const isMobile = window.innerWidth <= 768;
-            // Calculate initial dimensions based on minimized state
-            // On mobile, enforce responsive sizing; on desktop, respect custom dimensions
-            const initialWidth = shouldStartMinimized
-                ? showTriggerText && hasTriggerText
-                    ? "auto"
-                    : "52px"
-                : isMobile
-                    ? "min(calc(100vw - 2rem), 370px)"
-                    : widthValue;
-            const initialHeight = shouldStartMinimized
-                ? "52px"
-                : isMobile
-                    ? "min(calc(100vh - 2rem), 580px)"
-                    : heightValue;
-            const initialMinWidth = shouldStartMinimized && showTriggerText && hasTriggerText ? "auto" : "";
+            // Calculate trigger dimensions
+            const triggerWidth = showTriggerText && hasTriggerText ? "auto" : "52px";
+            const triggerHeight = "52px";
+            const triggerMinWidth = showTriggerText && hasTriggerText ? "auto" : "";
+            // Container starts as trigger size
             container.style.cssText = `
         position: fixed;
         pointer-events: none;
         z-index: 999999;
-        width: ${initialWidth};
-        height: ${initialHeight};
-        ${initialMinWidth ? `min-width: ${initialMinWidth};` : ""}
-        ${isMobile ? "max-width: 370px; max-height: 580px;" : ""}
-        transition: all 0.3s ease;
-        ${this.getPositionStyles(config.position || "bottom-right")}
+        width: ${triggerWidth};
+        height: ${triggerHeight};
+        ${triggerMinWidth ? `min-width: ${triggerMinWidth};` : ""}
+        transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
+        ${this.getPositionStyles(config.position || "bottom-right", true)}
         display: ${config.hideDefaultTrigger ? "none" : "block"};
-        overflow: ${shouldStartMinimized ? "hidden" : "visible"};
+        overflow: hidden;
+        box-sizing: border-box;
       `;
-            // Create iframe for secure embedding
-            const iframe = document.createElement("iframe");
-            // Build URL with configuration parameters
-            const params = new URLSearchParams({
-                token: this.options.token,
-                embedded: "true", // Enable postMessage communication
-                source: "package",
-                framework: this.options.framework || "vanilla",
-            });
-            // Add string parameters only if provided
-            if (config.theme)
-                params.set("theme", config.theme);
-            if (config.primaryColor)
-                params.set("primaryColor", config.primaryColor);
-            if (config.secondaryColor)
-                params.set("secondaryColor", config.secondaryColor);
-            if (config.position)
-                params.set("position", config.position);
-            if (widthValue && config.width !== undefined)
-                params.set("width", widthValue);
-            if (heightValue && config.height !== undefined)
-                params.set("height", heightValue);
-            if (config.customAvatar)
-                params.set("customAvatar", config.customAvatar);
-            if (config.companyName)
-                params.set("companyName", config.companyName);
-            if (config.welcomeMessage)
-                params.set("welcomeMessage", config.welcomeMessage);
-            if (config.triggerText)
-                params.set("triggerText", config.triggerText);
-            if (config.borderRadius)
-                params.set("borderRadius", config.borderRadius);
-            if (config.avatarType)
-                params.set("avatarType", config.avatarType);
-            if (config.avatarText)
-                params.set("avatarText", config.avatarText);
-            // Boolean options - only pass if explicitly defined
-            if (config.showBranding !== undefined) {
-                params.set("showBranding", String(config.showBranding));
-            }
-            if (config.autoOpen !== undefined) {
-                params.set("autoOpen", String(config.autoOpen));
-            }
-            if (config.minimized !== undefined) {
-                params.set("minimized", String(config.minimized));
-            }
-            if (config.initialMinimized !== undefined) {
-                params.set("initialMinimized", String(config.initialMinimized));
-            }
-            if (config.allowMinimize !== undefined) {
-                params.set("allowMinimize", String(config.allowMinimize));
-            }
-            if (config.showMinimize !== undefined) {
-                params.set("showMinimize", String(config.showMinimize));
-            }
-            if (config.allowClose !== undefined) {
-                params.set("allowClose", String(config.allowClose));
-            }
-            if (config.enableFileUpload !== undefined) {
-                params.set("enableFileUpload", String(config.enableFileUpload));
-            }
-            if (config.showTimestamps !== undefined) {
-                params.set("showTimestamps", String(config.showTimestamps));
-            }
-            if (config.showTriggerText !== undefined) {
-                params.set("showTriggerText", String(config.showTriggerText));
-            }
-            if (config.hideDefaultTrigger !== undefined) {
-                params.set("hideDefaultTrigger", String(config.hideDefaultTrigger));
-            }
-            if (config.enableMobile !== undefined) {
-                params.set("enableMobile", String(config.enableMobile));
-            }
-            // Pre-chat form and start button - only pass if explicitly defined
-            if (config.showPreChatForm !== undefined) {
-                params.set("showPreChatForm", String(config.showPreChatForm));
-            }
-            if (config.showStartButton !== undefined) {
-                params.set("showStartButton", String(config.showStartButton));
-            }
-            if (config.startButtonText) {
-                params.set("startButtonText", config.startButtonText);
-            }
-            if (config.preChatFormFields) {
-                params.set("preChatFormFields", JSON.stringify(config.preChatFormFields));
-            }
-            iframe.src = `${this.getBaseUrl()}/embed/chat?${params.toString()}`;
-            // Set styles individually - iframe fills container 100%
-            iframe.style.position = "absolute";
-            iframe.style.top = "0";
-            iframe.style.left = "0";
-            iframe.style.border = "none";
-            iframe.style.width = "100%";
-            iframe.style.height = "100%";
-            // Use circular border for icon-only minimized, rounded for text button or expanded
-            iframe.style.borderRadius =
-                shouldStartMinimized && initialWidth === "52px" ? "50%" : "12px";
-            iframe.style.transition = "all 0.3s ease";
-            iframe.style.pointerEvents = "auto";
-            iframe.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)";
-            iframe.setAttribute("allow", "clipboard-write");
-            iframe.setAttribute("title", "BuniAI Chat Widget");
-            iframe.onload = () => {
+            // Create inline trigger iframe (no src)
+            const triggerIframe = document.createElement("iframe");
+            triggerIframe.id = "buni-trigger-iframe";
+            triggerIframe.style.cssText = `
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: none;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        border-radius: ${showTriggerText && hasTriggerText ? "26px" : "50%"};
+        transition: border-radius 0.3s ease, box-shadow 0.3s ease;
+        pointer-events: auto;
+      `;
+            triggerIframe.setAttribute("title", "BuniAI Chat Trigger");
+            // Inject trigger HTML content directly (no src)
+            container.appendChild(triggerIframe);
+            document.body.appendChild(container);
+            triggerIframe.onload = () => {
+                var _a;
+                const triggerDoc = triggerIframe.contentDocument ||
+                    ((_a = triggerIframe.contentWindow) === null || _a === void 0 ? void 0 : _a.document);
+                if (!triggerDoc) {
+                    reject(new Error("Failed to access trigger iframe document"));
+                    return;
+                }
+                // Build inline HTML for trigger
+                const triggerHTML = this.buildTriggerHTML(primaryColor, triggerText || companyName, showTriggerText && hasTriggerText, config.customAvatar, config.avatarType, config.avatarText);
+                triggerDoc.open();
+                triggerDoc.write(triggerHTML);
+                triggerDoc.close();
+                // Create chat iframe (initially hidden)
+                const chatIframe = document.createElement("iframe");
+                chatIframe.id = "buni-chat-iframe";
+                // Build URL with configuration parameters
+                const params = new URLSearchParams({
+                    token: this.options.token,
+                    embedded: "true",
+                    source: "package",
+                    framework: this.options.framework || "vanilla",
+                });
+                // Add all configuration parameters
+                if (config.theme)
+                    params.set("theme", config.theme);
+                if (config.primaryColor)
+                    params.set("primaryColor", config.primaryColor);
+                if (config.secondaryColor)
+                    params.set("secondaryColor", config.secondaryColor);
+                if (config.position)
+                    params.set("position", config.position);
+                if (widthValue && config.width !== undefined)
+                    params.set("width", widthValue);
+                if (heightValue && config.height !== undefined)
+                    params.set("height", heightValue);
+                if (config.customAvatar)
+                    params.set("customAvatar", config.customAvatar);
+                if (config.companyName)
+                    params.set("companyName", config.companyName);
+                if (config.welcomeMessage)
+                    params.set("welcomeMessage", config.welcomeMessage);
+                if (config.triggerText)
+                    params.set("triggerText", config.triggerText);
+                if (config.borderRadius)
+                    params.set("borderRadius", config.borderRadius);
+                if (config.avatarType)
+                    params.set("avatarType", config.avatarType);
+                if (config.avatarText)
+                    params.set("avatarText", config.avatarText);
+                // Boolean options
+                if (config.showBranding !== undefined)
+                    params.set("showBranding", String(config.showBranding));
+                if (config.autoOpen !== undefined)
+                    params.set("autoOpen", String(config.autoOpen));
+                if (config.allowMinimize !== undefined)
+                    params.set("allowMinimize", String(config.allowMinimize));
+                if (config.showMinimize !== undefined)
+                    params.set("showMinimize", String(config.showMinimize));
+                if (config.allowClose !== undefined)
+                    params.set("allowClose", String(config.allowClose));
+                if (config.enableFileUpload !== undefined)
+                    params.set("enableFileUpload", String(config.enableFileUpload));
+                if (config.showTimestamps !== undefined)
+                    params.set("showTimestamps", String(config.showTimestamps));
+                if (config.enableMobile !== undefined)
+                    params.set("enableMobile", String(config.enableMobile));
+                if (config.showPreChatForm !== undefined)
+                    params.set("showPreChatForm", String(config.showPreChatForm));
+                if (config.showStartButton !== undefined)
+                    params.set("showStartButton", String(config.showStartButton));
+                if (config.startButtonText)
+                    params.set("startButtonText", config.startButtonText);
+                if (config.preChatFormFields)
+                    params.set("preChatFormFields", JSON.stringify(config.preChatFormFields));
+                chatIframe.src = `${this.getBaseUrl()}/embed/chat?${params.toString()}`;
+                // Chat iframe styling - initially hidden
+                chatIframe.style.cssText = `
+          position: absolute;
+          top: 0;
+          left: 0;
+          border: none;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          border-radius: ${isMobile ? "0" : "16px"};
+          transition: border-radius 0.3s ease, box-shadow 0.3s ease;
+          pointer-events: auto;
+          box-shadow: ${isMobile ? "none" : "0 8px 32px rgba(0,0,0,0.15)"};
+          display: none;
+        `;
+                chatIframe.setAttribute("allow", "clipboard-write");
+                chatIframe.setAttribute("title", "BuniAI Chat Widget");
+                container.appendChild(chatIframe);
+                chatIframe.onload = () => {
+                    // Set visibility hidden after iframe loads to allow content initialization
+                    chatIframe.style.visibility = "hidden";
+                    this.setupPostMessageAPI(chatIframe);
+                };
                 this.widgetElement = container;
-                this.iframe = iframe;
-                this.state.isMinimized = shouldStartMinimized;
-                this.setupPostMessageAPI(iframe);
+                this.triggerIframe = triggerIframe;
+                this.chatIframe = chatIframe;
+                this.state.isMinimized = true;
+                this.state.isLoaded = true;
                 resolve();
             };
-            iframe.onerror = () => {
-                reject(new Error("Failed to load BuniAI widget iframe"));
-            };
-            container.appendChild(iframe);
-            document.body.appendChild(container);
+            // Trigger the load event
+            triggerIframe.src = "about:blank";
+            // Set up communication with trigger iframe
+            window.addEventListener("message", (event) => {
+                // Check if message is from trigger iframe
+                if (event.data.type === "trigger_clicked" &&
+                    event.source === triggerIframe.contentWindow) {
+                    this.openChat();
+                }
+            });
         });
     }
-    getPositionStyles(position) {
-        // Use smaller margins on mobile for better space utilization
+    buildTriggerHTML(primaryColor, text, showText, customAvatar, avatarType, avatarText) {
+        const avatarContent = customAvatar
+            ? `<img src="${customAvatar}" alt="Avatar" style="width: 32px; height: 32px; border-radius: 50%;" />`
+            : avatarType === "text" && avatarText
+                ? `<div style="width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: white;">${avatarText.substring(0, 2).toUpperCase()}</div>`
+                : `<svg width="28" height="28" viewBox="0 0 24 24" fill="white"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1 0-.9-2-2zm0 14H6l-2 2V4h16v12z"/></svg>`;
+        return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      overflow: hidden;
+    }
+    .trigger {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: ${showText ? "12px" : "0"};
+      padding: ${showText ? "10px 20px" : "10px"};
+      background: ${primaryColor};
+      color: white;
+      border-radius: ${showText ? "26px" : "50%"};
+      cursor: pointer;
+      transition: all 0.3s ease;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+      animation: pulse 2s infinite;
+      ${showText ? "" : "width: 52px; height: 52px;"}
+    }
+    .trigger:hover {
+      transform: translateY(-2px);
+      filter: brightness(1.1);
+      box-shadow: 0 6px 24px ${primaryColor}99;
+    }
+    .trigger:active {
+      transform: translateY(0);
+    }
+    .avatar {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    .text {
+      font-size: 14px;
+      font-weight: 600;
+      white-space: nowrap;
+    }
+    .badge {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      background: #f44336;
+      color: white;
+      border-radius: 10px;
+      padding: 2px 6px;
+      font-size: 11px;
+      font-weight: 600;
+      min-width: 18px;
+      text-align: center;
+      display: none;
+      animation: pulse 2s infinite;
+    }
+    .badge.show {
+      display: block;
+    }
+    @keyframes pulse {
+      0%, 100% {
+        transform: scale(1);
+        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+      }
+      50% {
+        transform: scale(1.02);
+        box-shadow: 0 6px 24px ${primaryColor}99;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div style="position: relative;">
+    <div class="trigger" onclick="handleClick()">
+      <div class="avatar">${avatarContent}</div>
+      ${showText ? `<span class="text">${text}</span>` : ""}
+    </div>
+    <div class="badge" id="badge">0</div>
+  </div>
+  <script>
+    function handleClick() {
+      window.parent.postMessage({ type: 'trigger_clicked' }, '*');
+    }
+    
+    // Listen for unread count updates
+    window.addEventListener('message', function(event) {
+      if (event.data.type === 'updateUnreadCount') {
+        const badge = document.getElementById('badge');
+        const count = event.data.count || 0;
+        badge.textContent = count;
+        if (count > 0) {
+          badge.classList.add('show');
+        } else {
+          badge.classList.remove('show');
+        }
+      }
+    });
+  </script>
+</body>
+</html>`;
+    }
+    async openChat() {
+        if (!this.chatIframe || !this.widgetElement || !this.triggerIframe)
+            return;
+        if (this.state.isOpen)
+            return; // Already open
+        const config = this.options.config || {};
         const isMobile = window.innerWidth <= 768;
-        const margin = isMobile ? "8px" : "20px";
+        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");
+        // Calculate chat dimensions
+        const chatWidth = isMobile
+            ? "100vw"
+            : isTablet
+                ? "min(calc(100vw - 3rem), 370px)"
+                : widthValue;
+        const chatHeight = isMobile
+            ? "100vh"
+            : isTablet
+                ? "min(calc(100vh - 3rem), 620px)"
+                : heightValue;
+        // Resize container for chat
+        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
+        this.triggerIframe.style.display = "none";
+        this.chatIframe.style.display = "block";
+        this.chatIframe.style.visibility = "visible";
+        this.state.isMinimized = false;
+        this.state.isOpen = true;
+        this.emit("maximized", { timestamp: Date.now() });
+    }
+    closeChat() {
+        if (!this.chatIframe || !this.widgetElement || !this.triggerIframe)
+            return;
+        const config = this.options.config || {};
+        const showTriggerText = config.showTriggerText !== false;
+        const hasTriggerText = !!config.triggerText;
+        // Hide chat iframe
+        this.chatIframe.style.display = "none";
+        this.chatIframe.style.visibility = "hidden";
+        // Resize container back to trigger size
+        const triggerWidth = showTriggerText && hasTriggerText ? "auto" : "52px";
+        const triggerHeight = "52px";
+        const triggerMinWidth = showTriggerText && hasTriggerText ? "auto" : "";
+        this.widgetElement.style.cssText = `
+      position: fixed;
+      pointer-events: none;
+      z-index: 999999;
+      width: ${triggerWidth};
+      height: ${triggerHeight};
+      ${triggerMinWidth ? `min-width: ${triggerMinWidth};` : ""}
+      transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
+      ${this.getPositionStyles(config.position || "bottom-right", true)}
+      display: block;
+      overflow: hidden;
+      box-sizing: border-box;
+    `;
+        // Show trigger again
+        this.triggerIframe.style.display = "block";
+        this.state.isMinimized = true;
+        this.state.isOpen = false;
+        this.emit("minimized", { timestamp: Date.now() });
+    }
+    getPositionStyles(position, isMinimized = false) {
+        // Responsive positioning following mobile-first best practices
+        const viewportWidth = window.innerWidth;
+        const isMobile = viewportWidth <= 768;
+        const isTablet = viewportWidth > 768 && viewportWidth <= 1024;
+        // For extra small devices (Galaxy S8+, iPhone SE, etc.), use minimal or no margins
+        // For mobile, use small margins for breathing room
+        // For tablet/desktop, use larger margins for floating appearance
+        let margin;
+        if (isMinimized) {
+            // Minimized button always needs some space from edges
+            margin = isMobile ? "12px" : "20px";
+        }
+        else if (isMobile) {
+            // Full screen on all mobile devices (no margins)
+            margin = "0";
+        }
+        else if (isTablet) {
+            // Medium margins on tablets
+            margin = "16px";
+        }
+        else {
+            // Larger margins on desktop for floating effect
+            margin = "24px";
+        }
+        // On mobile screens when not minimized, position at edges for full coverage
+        if (isMobile && !isMinimized) {
+            return `top: 0; left: 0; right: 0; bottom: 0;`;
+        }
+        // Standard positioning for larger screens or minimized state
         switch (position) {
             case "bottom-right":
                 return `bottom: ${margin}; right: ${margin};`;
@@ -229,7 +470,7 @@ class BuniChatWidget {
     setupPostMessageAPI(iframe) {
         // Listen for messages from the iframe
         window.addEventListener("message", (event) => {
-            var _a, _b;
+            var _a;
             // Verify origin for security
             if (event.origin !== this.getBaseUrl()) {
                 return;
@@ -260,60 +501,15 @@ class BuniChatWidget {
                     }
                     break;
                 case "minimized":
-                    this.state.isMinimized = true;
-                    if (this.widgetElement && data.dimensions) {
-                        // Resize container to trigger button size when minimized
-                        this.widgetElement.style.width = data.dimensions.width;
-                        this.widgetElement.style.height = data.dimensions.height;
-                        this.widgetElement.style.overflow = "hidden";
-                        if (data.dimensions.minWidth) {
-                            this.widgetElement.style.minWidth = data.dimensions.minWidth;
-                        }
-                    }
-                    if (this.iframe) {
-                        // Use circular border for icon-only, rounded for text button
-                        this.iframe.style.borderRadius =
-                            ((_a = data.dimensions) === null || _a === void 0 ? void 0 : _a.width) === ((_b = data.dimensions) === null || _b === void 0 ? void 0 : _b.height)
-                                ? "50%"
-                                : "26px";
-                    }
-                    this.emit("minimized", data);
+                    // User clicked minimize in chat - close chat and show trigger
+                    this.closeChat();
                     break;
-                case "maximized":
-                    this.state.isMinimized = false;
-                    if (this.widgetElement) {
-                        // Check if we're on mobile
-                        const isMobile = window.innerWidth <= 768;
-                        const config = this.options.config || {};
-                        if (isMobile) {
-                            // On mobile, enforce responsive sizing
-                            this.widgetElement.style.width = "min(calc(100vw - 2rem), 370px)";
-                            this.widgetElement.style.height =
-                                "min(calc(100vh - 2rem), 680px)";
-                            this.widgetElement.style.maxWidth = "370px";
-                            this.widgetElement.style.maxHeight = "680px";
-                        }
-                        else {
-                            // On desktop, respect custom dimensions
-                            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;
-                            };
-                            this.widgetElement.style.width = ensureUnits(config.width, "350px");
-                            this.widgetElement.style.height = ensureUnits(config.height, "650px");
-                        }
-                        this.widgetElement.style.overflow = "visible";
-                    }
-                    if (this.iframe) {
-                        this.iframe.style.borderRadius = "12px";
+                case "new_unread_message":
+                    // Update unread count in trigger
+                    this.state.unreadCount++;
+                    if ((_a = this.triggerIframe) === null || _a === void 0 ? void 0 : _a.contentWindow) {
+                        this.triggerIframe.contentWindow.postMessage({ type: "updateUnreadCount", count: this.state.unreadCount }, "*");
                     }
-                    this.emit("maximized", data);
                     break;
                 case "customer_data_updated":
                     this.customerData = data;
@@ -334,8 +530,8 @@ class BuniChatWidget {
     }
     postMessageToWidget(type, data) {
         var _a;
-        if (this.widgetElement && this.widgetElement instanceof HTMLIFrameElement) {
-            (_a = this.widgetElement.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({ type, data }, this.getBaseUrl());
+        if ((_a = this.chatIframe) === null || _a === void 0 ? void 0 : _a.contentWindow) {
+            this.chatIframe.contentWindow.postMessage({ type, data }, this.getBaseUrl());
         }
     }
     getBaseUrl() {
@@ -348,44 +544,49 @@ class BuniChatWidget {
             this.widgetElement.remove();
             this.widgetElement = null;
         }
+        this.triggerIframe = null;
+        this.chatIframe = null;
         this.eventListeners.clear();
         this.state.isLoaded = false;
         this.customerData = null;
         this.sessionVariables = null;
     }
     show() {
-        // Show the iframe if it was hidden (hideDefaultTrigger mode)
-        if (this.widgetElement instanceof HTMLIFrameElement) {
+        // Show the widget container if it was hidden (hideDefaultTrigger mode)
+        if (this.widgetElement) {
             this.widgetElement.style.display = "block";
         }
-        this.postMessageToWidget("show");
-        this.state.isOpen = true;
-        this.state.unreadCount = 0;
-        this.emit("visibility_changed", { visibility: "visible" });
+        // Open chat if not already open
+        if (!this.chatIframe && !this.state.isOpen) {
+            this.openChat();
+        }
     }
     hide() {
         var _a;
-        this.postMessageToWidget("hide");
-        // If hideDefaultTrigger is enabled, completely hide the iframe
-        if (((_a = this.options.config) === null || _a === void 0 ? void 0 : _a.hideDefaultTrigger) &&
-            this.widgetElement instanceof HTMLIFrameElement) {
+        // Close chat if open
+        if (this.chatIframe) {
+            this.closeChat();
+        }
+        // If hideDefaultTrigger is enabled, completely hide the container
+        if (((_a = this.options.config) === null || _a === void 0 ? void 0 : _a.hideDefaultTrigger) && this.widgetElement) {
             this.widgetElement.style.display = "none";
         }
         this.state.isOpen = false;
         this.emit("visibility_changed", { visibility: "hidden" });
     }
     toggle() {
-        this.state.isOpen ? this.hide() : this.show();
+        if (this.chatIframe || this.state.isOpen) {
+            this.closeChat();
+        }
+        else {
+            this.openChat();
+        }
     }
     minimize() {
-        this.postMessageToWidget("minimize");
-        this.state.isMinimized = true;
-        this.emit("minimized", { timestamp: Date.now() });
+        this.closeChat();
     }
     maximize() {
-        this.postMessageToWidget("maximize");
-        this.state.isMinimized = false;
-        this.emit("maximized", { timestamp: Date.now() });
+        this.openChat();
     }
     setCustomerData(data) {
         this.customerData = { ...this.customerData, ...data };