@buni.ai/chatbot-angular 1.0.27 → 1.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.esm.js +71 -67
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +71 -67
  4. package/dist/index.js.map +1 -1
  5. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -356,12 +356,12 @@ class BuniChatWidget {
356
356
  if (event.source === ((_j = this.chatIframe) === null || _j === void 0 ? void 0 : _j.contentWindow) &&
357
357
  event.origin === this.getBaseUrl()) {
358
358
  if (this.isMinimalModeEnabled()) {
359
- if (!this.state.isOpen) {
360
- void this.openChat();
361
- }
362
359
  this.postMessageToWidget("minimize");
360
+ this.applyMinimalContainerFrame();
363
361
  this.displayMode = "minimal";
364
362
  this.state.displayMode = "minimal";
363
+ this.state.isOpen = true;
364
+ this.state.isMinimized = false;
365
365
  }
366
366
  else {
367
367
  this.closeChat();
@@ -514,56 +514,47 @@ class BuniChatWidget {
514
514
  async openChatInMinimalMode() {
515
515
  if (!this.chatIframe || !this.widgetElement || !this.triggerIframe)
516
516
  return;
517
- const config = this.options.config || {};
518
- const isMobile = window.innerWidth <= 768;
519
- const isTablet = window.innerWidth > 768 && window.innerWidth <= 1024;
520
- const ensureUnits = (value, defaultValue) => {
521
- if (!value)
522
- return defaultValue;
523
- const str = String(value);
524
- if (str.match(/^[\d.]+\s*(px|em|rem|%|vh|vw)$/))
525
- return str;
526
- if (str.match(/^[\d.]+$/))
527
- return `${str}px`;
528
- return str;
529
- };
530
- const widthValue = ensureUnits(config.width, "350px");
531
- const heightValue = ensureUnits(config.height, "650px");
532
- const chatWidth = isMobile
533
- ? "100vw"
534
- : isTablet
535
- ? "min(calc(100vw - 3rem), 370px)"
536
- : widthValue;
537
- const chatHeight = isMobile
538
- ? "100vh"
539
- : isTablet
540
- ? "min(calc(100vh - 3rem), 620px)"
541
- : heightValue;
542
- // Size container to full chat dimensions initially (iframe needs space to render)
517
+ this.applyMinimalContainerFrame();
518
+ this.state.isMinimized = false;
519
+ this.state.isOpen = true;
520
+ this.displayMode = "minimal";
521
+ this.state.displayMode = "minimal";
522
+ // Ask the iframe to enter minimal mode; it will reply with "minimized" when ready
523
+ this.postMessageToWidget("minimize");
524
+ this.emit("minimized", { timestamp: Date.now() });
525
+ }
526
+ applyMinimalContainerFrame() {
527
+ var _a;
528
+ if (!this.widgetElement || !this.chatIframe || !this.triggerIframe)
529
+ return;
530
+ const position = ((_a = this.options.config) === null || _a === void 0 ? void 0 : _a.position) || "bottom-right";
531
+ // Use a conservative initial height; the iframe will report the exact
532
+ // rendered card height via "minimal_card_size" and we'll resize then.
533
+ const initialMinimalHeight = "420px";
543
534
  this.widgetElement.style.cssText = `
544
535
  position: fixed;
545
536
  pointer-events: none;
546
537
  z-index: 999999;
547
- width: ${chatWidth};
548
- height: ${chatHeight};
549
- ${isMobile ? "max-width: 100vw; max-height: 100vh;" : ""}
538
+ width: min(calc(100vw - 1.5rem), 390px);
539
+ max-width: min(calc(100vw - 1.5rem), 390px);
540
+ height: ${initialMinimalHeight};
541
+ max-height: ${initialMinimalHeight};
550
542
  transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
551
- ${this.getPositionStyles(config.position || "bottom-right", false)}
543
+ ${this.getPositionStyles(position, true)}
552
544
  display: block;
553
- overflow: visible;
545
+ overflow: hidden;
546
+ border-radius: 16px;
547
+ box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.45);
554
548
  box-sizing: border-box;
555
549
  `;
556
- // Hide trigger, show chat iframe
557
550
  this.triggerIframe.style.display = "none";
558
551
  this.chatIframe.style.display = "block";
559
552
  this.chatIframe.style.visibility = "visible";
560
- this.state.isMinimized = false;
561
- this.state.isOpen = true;
562
- this.displayMode = "minimal";
563
- this.state.displayMode = "minimal";
564
- // Ask the iframe to enter minimal mode; it will reply with "minimized" when ready
565
- this.postMessageToWidget("minimize");
566
- this.emit("minimized", { timestamp: Date.now() });
553
+ this.chatIframe.style.width = "100%";
554
+ this.chatIframe.style.height = initialMinimalHeight;
555
+ this.chatIframe.style.maxHeight = initialMinimalHeight;
556
+ this.chatIframe.style.borderRadius = "0";
557
+ this.chatIframe.style.boxShadow = "none";
567
558
  }
568
559
  async openChat() {
569
560
  if (!this.chatIframe || !this.widgetElement || !this.triggerIframe)
@@ -614,6 +605,11 @@ class BuniChatWidget {
614
605
  this.triggerIframe.style.display = "none";
615
606
  this.chatIframe.style.display = "block";
616
607
  this.chatIframe.style.visibility = "visible";
608
+ // Restore full-mode iframe styles that may have been overridden in minimal mode
609
+ this.chatIframe.style.height = "100%";
610
+ this.chatIframe.style.maxHeight = "100%";
611
+ this.chatIframe.style.borderRadius = isMobile ? "0" : "16px";
612
+ this.chatIframe.style.boxShadow = isMobile ? "none" : "0 8px 32px rgba(0,0,0,0.15)";
617
613
  this.state.isMinimized = false;
618
614
  this.state.isOpen = true;
619
615
  this.displayMode = "full";
@@ -700,7 +696,7 @@ class BuniChatWidget {
700
696
  setupPostMessageAPI(iframe) {
701
697
  // Listen for messages from the iframe
702
698
  window.addEventListener("message", (event) => {
703
- var _a, _b;
699
+ var _a;
704
700
  if (event.source !== iframe.contentWindow) {
705
701
  return;
706
702
  }
@@ -742,45 +738,34 @@ class BuniChatWidget {
742
738
  this.options.onNewMessage(data);
743
739
  }
744
740
  break;
745
- case "minimized":
741
+ case "minimized": {
746
742
  this.syncServerBehaviorFromData(data);
743
+ const reportedDisplayMode = (data === null || data === void 0 ? void 0 : data.displayMode) === "minimal" || (data === null || data === void 0 ? void 0 : data.displayMode) === "hidden"
744
+ ? data.displayMode
745
+ : null;
746
+ if (reportedDisplayMode === "hidden") {
747
+ this.closeChat();
748
+ this.displayMode = "hidden";
749
+ this.state.displayMode = "hidden";
750
+ break;
751
+ }
747
752
  if (this.isMinimalModeEnabled()) {
748
753
  this.displayMode = "minimal";
749
754
  this.state.displayMode = "minimal";
750
755
  this.state.isOpen = true;
751
756
  this.state.isMinimized = false;
752
- // Apply a full minimal-mode frame update to avoid stale full-mode sizing/position.
753
- if (this.widgetElement && this.chatIframe && this.triggerIframe) {
754
- const position = ((_a = this.options.config) === null || _a === void 0 ? void 0 : _a.position) || "bottom-right";
755
- this.widgetElement.style.cssText = `
756
- position: fixed;
757
- pointer-events: none;
758
- z-index: 999999;
759
- width: min(calc(100vw - 1.5rem), 390px);
760
- max-width: min(calc(100vw - 1.5rem), 390px);
761
- height: auto;
762
- transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
763
- ${this.getPositionStyles(position, true)}
764
- display: block;
765
- overflow: visible;
766
- box-sizing: border-box;
767
- `;
768
- this.triggerIframe.style.display = "none";
769
- this.chatIframe.style.display = "block";
770
- this.chatIframe.style.visibility = "visible";
771
- this.chatIframe.style.width = "100%";
772
- this.chatIframe.style.height = "min(calc(100vh - 1.5rem), 520px)";
773
- }
757
+ this.applyMinimalContainerFrame();
774
758
  }
775
759
  else {
776
760
  // Backward-compatible behavior.
777
761
  this.closeChat();
778
762
  }
779
763
  break;
764
+ }
780
765
  case "new_unread_message":
781
766
  // Update unread count in trigger
782
767
  this.state.unreadCount++;
783
- if ((_b = this.triggerIframe) === null || _b === void 0 ? void 0 : _b.contentWindow) {
768
+ if ((_a = this.triggerIframe) === null || _a === void 0 ? void 0 : _a.contentWindow) {
784
769
  this.triggerIframe.contentWindow.postMessage({ type: "updateUnreadCount", count: this.state.unreadCount }, window.location.origin);
785
770
  }
786
771
  break;
@@ -798,6 +783,25 @@ class BuniChatWidget {
798
783
  this.options.onError(data.error);
799
784
  }
800
785
  break;
786
+ case "maximized":
787
+ // The iframe has switched to full mode (e.g. user clicked expand from
788
+ // minimal card). Resize the host container to the configured full size.
789
+ void this.openChat();
790
+ break;
791
+ case "minimal_card_size":
792
+ // The iframe reports its rendered card height so we can shrink the
793
+ // container to wrap the card tightly. Without this the host-page
794
+ // box-shadow renders around the full container, appearing as padding.
795
+ // Only apply when still in minimal mode to avoid overriding a pending
796
+ // full-mode transition.
797
+ if (this.widgetElement && this.chatIframe && (data === null || data === void 0 ? void 0 : data.height) > 0 && this.displayMode === "minimal") {
798
+ const h = `${data.height}px`;
799
+ this.widgetElement.style.height = h;
800
+ this.widgetElement.style.maxHeight = h;
801
+ this.chatIframe.style.height = h;
802
+ this.chatIframe.style.maxHeight = h;
803
+ }
804
+ break;
801
805
  }
802
806
  });
803
807
  }