@xpert-ai/chatkit-ui5 0.3.0 → 0.3.1

package/dist/chatkit.ui5.js

@@ -51,7 +51,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 
-  var _a, _b, _setTrainingOptOut_dec, _hideHistory_dec, _showHistory_dec, _sendCustomAction_dec, _shareThread_dec, _setThreadId_dec, _setComposerValue_dec, _sendUserMessage_dec, _fetchUpdates_dec, _focusComposer_dec, _c, _opts, _frameUrl, _frame, _wrapper, _launcherCloseButton, _launcherOpen, _framePetOptionsOverride, _shadow, _petOverlay, _resolveLoaded, _loaded, _messenger, _ChatKitElementBase_instances, emitAndThrow_fn, setOptionsDataAttributes_fn, getDisplayMode_fn, getConfiguredPetOptions_fn, getOverlayPetOptions_fn, resolvePetAssetUrl_fn, resolveOverlayPetOptions_fn, getFrameOptions_fn, setLauncherOpen_fn, handlePetActivate_fn, handlePetReply_fn, handlePetThreadSummaryActivate_fn, _handleLauncherClose, getFrameUrl_fn, setFrameUrl_fn, consumeFrameUrl_fn, _handleFrameLoad, _initialized, maybeInit_fn, _init;
+  var _a, _b, _setTrainingOptOut_dec, _hideHistory_dec, _showHistory_dec, _sendCustomAction_dec, _shareThread_dec, _setThreadId_dec, _setComposerValue_dec, _sendUserMessage_dec, _fetchUpdates_dec, _focusComposer_dec, _c, _opts, _frameUrl, _frame, _wrapper, _launcherCloseButton, _launcherOpen, _chatMinimizedToPet, _framePetOptionsOverride, _petClosedByContextMenu, _shadow, _petOverlay, _resolveLoaded, _loaded, _messenger, _ChatKitElementBase_instances, emitAndThrow_fn, setOptionsDataAttributes_fn, getDisplayMode_fn, getConfiguredPetOptions_fn, mergeConfiguredPetPositionDefaults_fn, getOverlayPetOptions_fn, resolvePetAssetUrl_fn, resolveOverlayPetOptions_fn, getFrameOptions_fn, setLauncherOpen_fn, setChatMinimizedToPet_fn, syncPetOverlayOptions_fn, handlePetActivate_fn, handlePetClose_fn, handlePetReply_fn, handlePetThreadSummaryActivate_fn, _handleLauncherClose, getFrameUrl_fn, setFrameUrl_fn, consumeFrameUrl_fn, _handleFrameLoad, _initialized, maybeInit_fn, _init;
   class EventEmitter {
     constructor() {
       __publicField(this, "callbacks", /* @__PURE__ */ new Map());
@@ -895,8 +895,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   const PET_SUMMARY_GAP = 12;
   const PET_SUMMARY_WIDTH = 320;
   const PET_SUMMARY_MARGIN = 12;
+  const PET_CONTEXT_MENU_MARGIN = 8;
+  const PET_SUMMARY_FONT_FAMILY = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
   const PET_OVERLAY_COPY = {
     "en-US": {
+      closePetMenuItem: "Close pet",
       hideMessage: "Hide message",
       expandMessage: "Expand message",
       collapseMessage: "Collapse message",
@@ -908,6 +911,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       sendFailed: "Failed to send"
     },
     "zh-CN": {
+      closePetMenuItem: "关闭宠物",
       hideMessage: "隐藏消息",
       expandMessage: "展开消息",
       collapseMessage: "收起消息",
@@ -984,6 +988,65 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     return "en-US";
   }
+  function getSummaryDensityMetrics(density) {
+    switch (density) {
+      case "compact":
+        return {
+          padding: "8px 10px",
+          gap: 6,
+          marginTop: 3,
+          toggleSize: 30,
+          actionSize: 22
+        };
+      case "spacious":
+        return {
+          padding: "14px 16px",
+          gap: 10,
+          marginTop: 6,
+          toggleSize: 38,
+          actionSize: 28
+        };
+      case "normal":
+      default:
+        return {
+          padding: "12px 14px",
+          gap: 8,
+          marginTop: 4,
+          toggleSize: 34,
+          actionSize: 26
+        };
+    }
+  }
+  function getSummaryRadius(radius) {
+    switch (radius) {
+      case "pill":
+        return 24;
+      case "round":
+        return 16;
+      case "sharp":
+        return 0;
+      case "soft":
+      default:
+        return 12;
+    }
+  }
+  function getSummaryThemeMetrics(theme) {
+    var _a2, _b2;
+    const themeObject = typeof theme === "string" ? null : theme;
+    const baseSize = ((_a2 = themeObject == null ? void 0 : themeObject.typography) == null ? void 0 : _a2.baseSize) ?? 16;
+    const density = (themeObject == null ? void 0 : themeObject.density) ?? "normal";
+    const densityOffset = density === "compact" ? -1 : density === "spacious" ? 1 : 0;
+    const bodySize = clampNumber(baseSize - 2 + densityOffset, 11, 17);
+    const densityMetrics = getSummaryDensityMetrics(density);
+    return {
+      ...densityMetrics,
+      bodySize,
+      titleSize: bodySize + 1,
+      iconSize: clampNumber(bodySize + 2, 13, 19),
+      radius: getSummaryRadius(themeObject == null ? void 0 : themeObject.radius),
+      fontFamily: ((_b2 = themeObject == null ? void 0 : themeObject.typography) == null ? void 0 : _b2.fontFamily) ?? PET_SUMMARY_FONT_FAMILY
+    };
+  }
   function isPetState(value) {
     return value === "idle" || value === "running-right" || value === "running-left" || value === "waving" || value === "jumping" || value === "failed" || value === "waiting" || value === "running" || value === "review";
   }
@@ -1019,6 +1082,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       summary.messageId || summary.updatedAt || summary.message
     ].join(":");
   }
+  function getThreadSummaryInteractionKey(summary) {
+    if (!summary) {
+      return null;
+    }
+    return [summary.threadId, summary.messageId ?? ""].join(":");
+  }
   function parseThreadSummaryPayload(value) {
     if (value === null) {
       return { summary: null };
@@ -1055,10 +1124,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     constructor(root, options) {
       this.overlayElement = null;
       this.petElement = null;
+      this.contextMenuElement = null;
       this.summaryElement = null;
       this.summaryToggleElement = null;
       this.mediaElement = null;
       this.options = null;
+      this.theme = null;
       this.resolved = null;
       this.summary = null;
       this.summaryRenderKey = null;
@@ -1095,6 +1166,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       this.mediaQuery = null;
       this.connected = false;
       this.handleViewportChange = () => {
+        this.closeContextMenu();
         this.render();
       };
       this.handleReducedMotionChange = () => {
@@ -1115,6 +1187,36 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           this.enterRestingAfterDelay();
         }
       };
+      this.handleContextMenu = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.openContextMenu({ x: event.clientX, y: event.clientY });
+      };
+      this.handleContextMenuEvent = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      };
+      this.handleContextMenuOutsidePointerDown = (event) => {
+        const menu = this.contextMenuElement;
+        if (menu && event.composedPath().includes(menu)) {
+          return;
+        }
+        this.closeContextMenu();
+      };
+      this.handleContextMenuKeyDown = (event) => {
+        if (event.key !== "Escape") {
+          return;
+        }
+        event.preventDefault();
+        this.closeContextMenu();
+      };
+      this.handleClosePetMenuItemClick = (event) => {
+        var _a2;
+        event.preventDefault();
+        event.stopPropagation();
+        this.closeContextMenu();
+        (_a2 = this.onClose) == null ? void 0 : _a2.call(this);
+      };
       this.handleSummaryPointerEnter = () => {
         this.isSummaryHovering = true;
         this.render();
@@ -1182,7 +1284,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       };
       this.handlePointerDown = (event) => {
         var _a2, _b2;
-        if (!((_a2 = this.options) == null ? void 0 : _a2.position.draggable) || event.button !== 0) {
+        if (event.button !== 0 || event.ctrlKey) {
+          return;
+        }
+        this.closeContextMenu();
+        if (!((_a2 = this.options) == null ? void 0 : _a2.position.draggable)) {
           return;
         }
         event.preventDefault();
@@ -1258,6 +1364,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       };
       this.root = root;
       this.onActivate = options == null ? void 0 : options.onActivate;
+      this.onClose = options == null ? void 0 : options.onClose;
       this.onReply = options == null ? void 0 : options.onReply;
       this.onThreadSummaryActivate = options == null ? void 0 : options.onThreadSummaryActivate;
       this.connect();
@@ -1271,9 +1378,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       this.installReducedMotionListener();
       this.render();
     }
-    setOptions(pet) {
+    setOptions(pet, theme) {
+      this.closeContextMenu();
       const nextOptions = chatkitTypes.normalizePetOptions(pet);
       this.options = nextOptions;
+      this.theme = theme ?? null;
       if (!nextOptions) {
         this.isDragging = false;
         this.isHovering = false;
@@ -1319,11 +1428,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       this.copyLocale = nextLocale;
       this.copy = PET_OVERLAY_COPY[nextLocale];
       this.summaryRenderKey = null;
+      this.closeContextMenu();
       this.render();
     }
     setThreadSummary(summary) {
-      const previousKey = getThreadSummaryKey(this.summary);
-      const nextKey = getThreadSummaryKey(summary);
+      const previousKey = getThreadSummaryInteractionKey(this.summary);
+      const nextKey = getThreadSummaryInteractionKey(summary);
       this.summary = summary;
       if (!summary) {
         this.isSummaryCollapsed = false;
@@ -1384,8 +1494,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     installViewportListeners() {
       var _a2, _b2;
       window.addEventListener("resize", this.handleViewportChange);
-      (_a2 = window.visualViewport) == null ? void 0 : _a2.addEventListener("resize", this.handleViewportChange);
-      (_b2 = window.visualViewport) == null ? void 0 : _b2.addEventListener("scroll", this.handleViewportChange);
+      (_a2 = window.visualViewport) == null ? void 0 : _a2.addEventListener(
+        "resize",
+        this.handleViewportChange
+      );
+      (_b2 = window.visualViewport) == null ? void 0 : _b2.addEventListener(
+        "scroll",
+        this.handleViewportChange
+      );
     }
     installReducedMotionListener() {
       var _a2, _b2;
@@ -1436,6 +1552,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       pet.addEventListener("pointerenter", this.handlePointerEnter);
       pet.addEventListener("pointerleave", this.handlePointerLeave);
       pet.addEventListener("pointerdown", this.handlePointerDown);
+      pet.addEventListener("contextmenu", this.handleContextMenu);
       pet.addEventListener("click", this.handleClick);
       overlay.append(style, pet);
       this.root.append(overlay);
@@ -1446,6 +1563,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       var _a2;
       this.clearRestingDelayTimer();
       this.clearTimers();
+      this.closeContextMenu();
       if (this.petElement) {
         this.petElement.removeEventListener(
           "pointerenter",
@@ -1455,7 +1573,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           "pointerleave",
           this.handlePointerLeave
         );
-        this.petElement.removeEventListener("pointerdown", this.handlePointerDown);
+        this.petElement.removeEventListener(
+          "pointerdown",
+          this.handlePointerDown
+        );
+        this.petElement.removeEventListener(
+          "contextmenu",
+          this.handleContextMenu
+        );
         this.petElement.removeEventListener("click", this.handleClick);
       }
       this.isHovering = false;
@@ -1603,10 +1728,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         return;
       }
       const nextRenderKey = [
-        summaryKey,
-        summary.title,
-        summary.message,
-        summary.status,
         this.copyLocale,
         this.isSummaryExpanded ? "expanded" : "compact",
         this.isSummaryHovering ? "hover" : "rest",
@@ -1619,7 +1740,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         (_b2 = this.summaryToggleElement) == null ? void 0 : _b2.remove();
         this.summaryElement = this.createSummaryBubble(summary);
         this.summaryToggleElement = this.createSummaryToggleButton("v");
-        (_c2 = this.overlayElement) == null ? void 0 : _c2.append(this.summaryElement, this.summaryToggleElement);
+        (_c2 = this.overlayElement) == null ? void 0 : _c2.append(
+          this.summaryElement,
+          this.summaryToggleElement
+        );
         this.summaryRenderKey = nextRenderKey;
         if (this.isReplyOpen && !this.isReplySubmitting) {
           window.setTimeout(() => {
@@ -1628,6 +1752,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           }, 0);
         }
       }
+      this.updateSummaryBubbleContent(summary);
       this.positionSummaryBubble(position, size);
     }
     renderCollapsedSummary(position, size) {
@@ -1648,7 +1773,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         return;
       }
       const viewport = getViewportSize();
-      const badgeSize = 34;
+      const badgeSize = getSummaryThemeMetrics(this.theme).toggleSize;
       const x = clampNumber(
         position.x + size.width - badgeSize * 0.35,
         PET_SUMMARY_MARGIN,
@@ -1671,7 +1796,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         return;
       }
       const viewport = getViewportSize();
-      const width = Math.min(PET_SUMMARY_WIDTH, viewport.width - PET_SUMMARY_MARGIN * 2);
+      const width = Math.min(
+        PET_SUMMARY_WIDTH,
+        viewport.width - PET_SUMMARY_MARGIN * 2
+      );
       bubble.style.width = `${width}px`;
       const bubbleHeight = bubble.offsetHeight || 96;
       const aboveY = position.y - bubbleHeight - PET_SUMMARY_GAP;
@@ -1691,6 +1819,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     createSummaryBubble(summary) {
       const shouldShowReplyButton = this.isSummaryHovering && !this.isReplyOpen;
+      const metrics = getSummaryThemeMetrics(this.theme);
       const bubble = document.createElement("div");
       bubble.setAttribute("data-chatkit-pet-summary", "");
       bubble.addEventListener("pointerenter", this.handleSummaryPointerEnter);
@@ -1701,19 +1830,18 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       bubble.style.left = "0";
       bubble.style.boxSizing = "border-box";
       bubble.style.pointerEvents = "auto";
-      bubble.style.padding = "12px 14px";
-      bubble.style.paddingBottom = "12px";
+      bubble.style.padding = metrics.padding;
       bubble.style.border = "1px solid rgba(148, 163, 184, 0.22)";
-      bubble.style.borderRadius = "22px";
+      bubble.style.borderRadius = `${metrics.radius}px`;
       bubble.style.background = "rgba(255, 255, 255, 0.94)";
       bubble.style.color = "#1f2937";
       bubble.style.boxShadow = "0 8px 24px rgba(15, 23, 42, 0.1)";
-      bubble.style.font = '500 14px/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+      bubble.style.font = `500 ${metrics.bodySize}px/1.35 ${metrics.fontFamily}`;
       bubble.style.backdropFilter = "blur(10px)";
       const header = document.createElement("div");
       header.style.display = "flex";
       header.style.alignItems = "center";
-      header.style.gap = "8px";
+      header.style.gap = `${metrics.gap}px`;
       if (this.isSummaryHovering || this.isReplyOpen) {
         header.append(
           this.createSummaryActionButton(
@@ -1731,7 +1859,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       title.style.textOverflow = "ellipsis";
       title.style.whiteSpace = "nowrap";
       title.style.fontWeight = "700";
-      title.style.fontSize = "15px";
+      title.style.fontSize = `${metrics.titleSize}px`;
+      title.dataset.chatkitPetSummaryTitle = "";
       header.append(title);
       if (this.isSummaryHovering || this.isReplyOpen) {
         header.append(
@@ -1746,7 +1875,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       }
       const message = document.createElement("div");
       message.textContent = summary.message;
-      message.style.marginTop = "4px";
+      message.style.marginTop = `${metrics.marginTop}px`;
       message.style.fontWeight = "400";
       message.style.color = "#374151";
       message.style.overflow = "hidden";
@@ -1758,6 +1887,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         message.style.setProperty("-webkit-line-clamp", "2");
         message.style.setProperty("-webkit-box-orient", "vertical");
       }
+      message.dataset.chatkitPetSummaryMessage = "";
       bubble.append(header, message);
       if (shouldShowReplyButton) {
         const reply = this.createTextButton(
@@ -1774,7 +1904,30 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       }
       return bubble;
     }
+    updateSummaryBubbleContent(summary) {
+      var _a2, _b2, _c2;
+      const title = (_a2 = this.summaryElement) == null ? void 0 : _a2.querySelector(
+        "[data-chatkit-pet-summary-title]"
+      );
+      if (title && title.textContent !== summary.title) {
+        title.textContent = summary.title;
+      }
+      const message = (_b2 = this.summaryElement) == null ? void 0 : _b2.querySelector(
+        "[data-chatkit-pet-summary-message]"
+      );
+      if (message && message.textContent !== summary.message) {
+        message.textContent = summary.message;
+      }
+      const statusIcon = (_c2 = this.summaryElement) == null ? void 0 : _c2.querySelector(
+        "[data-chatkit-pet-summary-status]"
+      );
+      if (statusIcon && statusIcon.dataset.chatkitPetSummaryStatus !== summary.status) {
+        const nextIcon = this.createStatusIcon(summary.status);
+        statusIcon.replaceWith(nextIcon);
+      }
+    }
     createSummaryToggleButton(label) {
+      const metrics = getSummaryThemeMetrics(this.theme);
       const button = document.createElement("button");
       button.type = "button";
       button.textContent = label;
@@ -1790,18 +1943,21 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       button.style.color = "#475569";
       button.style.boxShadow = "0 6px 18px rgba(15, 23, 42, 0.1)";
       button.style.cursor = "pointer";
-      button.style.font = '600 15px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+      button.style.font = `600 ${metrics.titleSize}px/1 ${metrics.fontFamily}`;
       button.style.display = "flex";
       button.style.alignItems = "center";
       button.style.justifyContent = "center";
       return button;
     }
     createStatusIcon(status) {
+      const metrics = getSummaryThemeMetrics(this.theme);
+      const iconSize = metrics.iconSize;
       const icon = document.createElement("span");
       icon.setAttribute("aria-hidden", "true");
+      icon.dataset.chatkitPetSummaryStatus = status;
       icon.style.display = "inline-flex";
-      icon.style.width = "16px";
-      icon.style.height = "16px";
+      icon.style.width = `${iconSize}px`;
+      icon.style.height = `${iconSize}px`;
       icon.style.alignItems = "center";
       icon.style.justifyContent = "center";
       icon.style.flex = "0 0 auto";
@@ -1813,7 +1969,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         return icon;
       }
       icon.style.borderRadius = "999px";
-      icon.style.fontSize = "12px";
+      icon.style.fontSize = `${Math.max(10, iconSize - 4)}px`;
       icon.style.fontWeight = "700";
       if (status === "failed") {
         icon.textContent = "!";
@@ -1825,8 +1981,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       icon.style.border = "2px solid #22c55e";
       icon.style.position = "relative";
       const check = document.createElement("span");
-      check.style.width = "7px";
-      check.style.height = "4px";
+      check.style.width = `${Math.round(iconSize * 0.44)}px`;
+      check.style.height = `${Math.round(iconSize * 0.25)}px`;
       check.style.borderLeft = "2px solid #22c55e";
       check.style.borderBottom = "2px solid #22c55e";
       check.style.transform = "rotate(-45deg) translate(1px, -1px)";
@@ -1834,6 +1990,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       return icon;
     }
     createSummaryActionButton(label, title, onClick) {
+      const metrics = getSummaryThemeMetrics(this.theme);
       const button = document.createElement("button");
       button.type = "button";
       button.textContent = label;
@@ -1843,14 +2000,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         event.stopPropagation();
         onClick();
       });
-      button.style.width = "26px";
-      button.style.height = "26px";
+      button.style.width = `${metrics.actionSize}px`;
+      button.style.height = `${metrics.actionSize}px`;
       button.style.border = "0";
       button.style.borderRadius = "999px";
       button.style.background = "rgba(241, 245, 249, 0.96)";
       button.style.color = "#475569";
       button.style.cursor = "pointer";
-      button.style.font = '600 15px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+      button.style.font = `600 ${metrics.titleSize}px/1 ${metrics.fontFamily}`;
       return button;
     }
     createTextButton(label, onClick) {
@@ -1916,6 +2073,95 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       }
       return form;
     }
+    createContextMenu() {
+      const menu = document.createElement("div");
+      menu.setAttribute("data-chatkit-pet-context-menu", "");
+      menu.setAttribute("role", "menu");
+      menu.addEventListener("contextmenu", this.handleContextMenuEvent);
+      menu.addEventListener("pointerdown", stopEventPropagation);
+      menu.addEventListener("click", stopEventPropagation);
+      menu.style.position = "absolute";
+      menu.style.top = "0";
+      menu.style.left = "0";
+      menu.style.boxSizing = "border-box";
+      menu.style.minWidth = "132px";
+      menu.style.padding = "4px";
+      menu.style.pointerEvents = "auto";
+      menu.style.border = "1px solid rgba(148, 163, 184, 0.28)";
+      menu.style.borderRadius = "10px";
+      menu.style.background = "rgba(255, 255, 255, 0.96)";
+      menu.style.color = "#1f2937";
+      menu.style.boxShadow = "0 12px 28px rgba(15, 23, 42, 0.16)";
+      menu.style.font = '500 13px/1.3 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+      menu.style.backdropFilter = "blur(10px)";
+      const closeItem = document.createElement("button");
+      closeItem.type = "button";
+      closeItem.textContent = this.copy.closePetMenuItem;
+      closeItem.setAttribute("role", "menuitem");
+      closeItem.addEventListener("click", this.handleClosePetMenuItemClick);
+      closeItem.style.display = "block";
+      closeItem.style.width = "100%";
+      closeItem.style.border = "0";
+      closeItem.style.borderRadius = "7px";
+      closeItem.style.background = "transparent";
+      closeItem.style.color = "inherit";
+      closeItem.style.cursor = "pointer";
+      closeItem.style.padding = "7px 10px";
+      closeItem.style.textAlign = "left";
+      closeItem.style.font = "inherit";
+      menu.append(closeItem);
+      return menu;
+    }
+    openContextMenu(position) {
+      var _a2;
+      const overlay = this.overlayElement;
+      if (!overlay) {
+        return;
+      }
+      this.closeContextMenu();
+      const menu = this.createContextMenu();
+      overlay.append(menu);
+      this.contextMenuElement = menu;
+      this.positionContextMenu(position);
+      (_a2 = menu.querySelector("button")) == null ? void 0 : _a2.focus({ preventScroll: true });
+      window.addEventListener(
+        "pointerdown",
+        this.handleContextMenuOutsidePointerDown,
+        true
+      );
+      window.addEventListener("keydown", this.handleContextMenuKeyDown);
+    }
+    closeContextMenu() {
+      var _a2;
+      (_a2 = this.contextMenuElement) == null ? void 0 : _a2.remove();
+      this.contextMenuElement = null;
+      window.removeEventListener(
+        "pointerdown",
+        this.handleContextMenuOutsidePointerDown,
+        true
+      );
+      window.removeEventListener("keydown", this.handleContextMenuKeyDown);
+    }
+    positionContextMenu(position) {
+      const menu = this.contextMenuElement;
+      if (!menu) {
+        return;
+      }
+      const viewport = getViewportSize();
+      const width = menu.offsetWidth || 132;
+      const height = menu.offsetHeight || 40;
+      const maxX = Math.max(
+        PET_CONTEXT_MENU_MARGIN,
+        viewport.width - width - PET_CONTEXT_MENU_MARGIN
+      );
+      const maxY = Math.max(
+        PET_CONTEXT_MENU_MARGIN,
+        viewport.height - height - PET_CONTEXT_MENU_MARGIN
+      );
+      const x = clampNumber(position.x, PET_CONTEXT_MENU_MARGIN, maxX);
+      const y = clampNumber(position.y, PET_CONTEXT_MENU_MARGIN, maxY);
+      menu.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+    }
     renderAtlas(animationName, animationMode) {
       var _a2;
       if (!this.petElement || ((_a2 = this.resolved) == null ? void 0 : _a2.kind) !== "atlas" || !this.options) {
@@ -2016,13 +2262,16 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         this.rescheduleAnimation();
       }, PET_RESTING_DELAY_MS);
     }
-    isPointerOverPet(event) {
+    isPointOverPet(clientX, clientY) {
       var _a2;
       const rect = (_a2 = this.petElement) == null ? void 0 : _a2.getBoundingClientRect();
       if (!rect) {
         return false;
       }
-      return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
+      return clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+    }
+    isPointerOverPet(event) {
+      return this.isPointOverPet(event.clientX, event.clientY);
     }
     async submitReply() {
       var _a2;
@@ -2097,10 +2346,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       __privateAdd(this, _wrapper);
       __privateAdd(this, _launcherCloseButton);
       __privateAdd(this, _launcherOpen, false);
+      __privateAdd(this, _chatMinimizedToPet, false);
       __privateAdd(this, _framePetOptionsOverride);
+      __privateAdd(this, _petClosedByContextMenu, false);
       __privateAdd(this, _shadow, this.attachShadow({ mode: "open" }));
       __privateAdd(this, _petOverlay, new PetOverlay(__privateGet(this, _shadow), {
         onActivate: () => __privateMethod(this, _ChatKitElementBase_instances, handlePetActivate_fn).call(this),
+        onClose: () => __privateMethod(this, _ChatKitElementBase_instances, handlePetClose_fn).call(this),
         onReply: (text) => __privateMethod(this, _ChatKitElementBase_instances, handlePetReply_fn).call(this, text),
         onThreadSummaryActivate: (threadId) => void __privateMethod(this, _ChatKitElementBase_instances, handlePetThreadSummaryActivate_fn).call(this, threadId)
       }));
@@ -2231,6 +2483,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       :host([data-display-mode="pet"]) {
         display: contents;
       }
+      :host([data-chat-minimized-to-pet="true"]) {
+        display: contents;
+      }
       .ck-iframe {
         border: none;
         position: absolute;
@@ -2341,6 +2596,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       :host([data-loaded="true"]) .ck-wrapper {
         opacity: 1;
       }
+      :host([data-chat-minimized-to-pet="true"]) .ck-wrapper {
+        opacity: 0;
+        pointer-events: none;
+        visibility: hidden;
+      }
       :host([data-display-mode="pet"]:not([data-chat-open="true"])) .ck-wrapper {
         opacity: 0;
       }
@@ -2423,8 +2683,21 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       __privateGet(this, _messenger).on("pet_options_change", (data) => {
         const payload = parsePetOptionsChangePayload(data);
         if (payload) {
+          if (!__privateGet(this, _petClosedByContextMenu) || payload.pet === null) {
+            __privateSet(this, _petClosedByContextMenu, false);
+          }
           __privateSet(this, _framePetOptionsOverride, payload.pet);
-          __privateGet(this, _petOverlay).setOptions(__privateMethod(this, _ChatKitElementBase_instances, getOverlayPetOptions_fn).call(this));
+          __privateMethod(this, _ChatKitElementBase_instances, syncPetOverlayOptions_fn).call(this);
+        }
+      });
+      __privateGet(this, _messenger).on("chat_minimize_change", (data) => {
+        const minimized = typeof data === "object" && data !== null && "minimized" in data && data.minimized === true;
+        if (minimized && !__privateMethod(this, _ChatKitElementBase_instances, getOverlayPetOptions_fn).call(this)) {
+          return;
+        }
+        __privateMethod(this, _ChatKitElementBase_instances, setChatMinimizedToPet_fn).call(this, minimized);
+        if (minimized) {
+          __privateMethod(this, _ChatKitElementBase_instances, setLauncherOpen_fn).call(this, false);
         }
       });
       __privateGet(this, _messenger).on("unmount", () => {
@@ -2460,8 +2733,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     applySanitizedOptions(newOptions) {
       __privateSet(this, _opts, newOptions);
+      __privateSet(this, _petClosedByContextMenu, false);
       __privateGet(this, _petOverlay).setLocale(newOptions.locale);
-      __privateGet(this, _petOverlay).setOptions(__privateMethod(this, _ChatKitElementBase_instances, getOverlayPetOptions_fn).call(this));
+      __privateMethod(this, _ChatKitElementBase_instances, syncPetOverlayOptions_fn).call(this);
       if (__privateGet(this, _initialized)) {
         __privateMethod(this, _ChatKitElementBase_instances, setOptionsDataAttributes_fn).call(this, __privateGet(this, _opts));
         __privateGet(this, _loaded).then(() => {
@@ -2541,7 +2815,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   _wrapper = new WeakMap();
   _launcherCloseButton = new WeakMap();
   _launcherOpen = new WeakMap();
+  _chatMinimizedToPet = new WeakMap();
   _framePetOptionsOverride = new WeakMap();
+  _petClosedByContextMenu = new WeakMap();
   _shadow = new WeakMap();
   _petOverlay = new WeakMap();
   _resolveLoaded = new WeakMap();
@@ -2572,8 +2848,42 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     return options.pet ?? null;
   };
+  mergeConfiguredPetPositionDefaults_fn = function(pet) {
+    if (!pet) {
+      return pet;
+    }
+    const configured = chatkitTypes.normalizePetOptions(
+      __privateMethod(this, _ChatKitElementBase_instances, getConfiguredPetOptions_fn).call(this) ?? null
+    );
+    if (!configured) {
+      return pet;
+    }
+    if (pet === true) {
+      return { position: configured.position };
+    }
+    if (!pet.position) {
+      return { ...pet, position: configured.position };
+    }
+    return {
+      ...pet,
+      position: {
+        ...configured.position,
+        ...pet.position,
+        boundsPadding: pet.position.boundsPadding ?? configured.position.boundsPadding,
+        pin: "pin" in pet.position ? pet.position.pin : configured.position.pin
+      }
+    };
+  };
   getOverlayPetOptions_fn = function() {
-    let pet = __privateGet(this, _framePetOptionsOverride) !== void 0 ? __privateGet(this, _framePetOptionsOverride) : __privateMethod(this, _ChatKitElementBase_instances, getConfiguredPetOptions_fn).call(this);
+    if (__privateGet(this, _petClosedByContextMenu)) {
+      return null;
+    }
+    let pet;
+    if (__privateGet(this, _framePetOptionsOverride) !== void 0) {
+      pet = __privateMethod(this, _ChatKitElementBase_instances, mergeConfiguredPetPositionDefaults_fn).call(this, __privateGet(this, _framePetOptionsOverride));
+    } else {
+      pet = __privateMethod(this, _ChatKitElementBase_instances, getConfiguredPetOptions_fn).call(this);
+    }
     if (__privateMethod(this, _ChatKitElementBase_instances, getDisplayMode_fn).call(this) === "pet" && !chatkitTypes.normalizePetOptions(pet ?? null)) {
       pet = true;
     }
@@ -2627,13 +2937,49 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       delete this.dataset.chatOpen;
     }
   };
+  setChatMinimizedToPet_fn = function(minimized) {
+    const next = minimized && Boolean(__privateMethod(this, _ChatKitElementBase_instances, getOverlayPetOptions_fn).call(this));
+    __privateSet(this, _chatMinimizedToPet, next);
+    if (next) {
+      this.dataset.chatMinimizedToPet = "true";
+    } else {
+      delete this.dataset.chatMinimizedToPet;
+    }
+  };
+  syncPetOverlayOptions_fn = function() {
+    var _a2;
+    const overlayPetOptions = __privateMethod(this, _ChatKitElementBase_instances, getOverlayPetOptions_fn).call(this);
+    __privateGet(this, _petOverlay).setOptions(overlayPetOptions, (_a2 = __privateGet(this, _opts)) == null ? void 0 : _a2.theme);
+    if (!overlayPetOptions) {
+      __privateMethod(this, _ChatKitElementBase_instances, setChatMinimizedToPet_fn).call(this, false);
+    }
+  };
   handlePetActivate_fn = function() {
+    if (__privateGet(this, _chatMinimizedToPet)) {
+      __privateMethod(this, _ChatKitElementBase_instances, setChatMinimizedToPet_fn).call(this, false);
+      if (__privateMethod(this, _ChatKitElementBase_instances, getDisplayMode_fn).call(this) === "pet") {
+        __privateMethod(this, _ChatKitElementBase_instances, setLauncherOpen_fn).call(this, true);
+      }
+      __privateGet(this, _loaded).then(() => this.focusComposer()).catch(() => void 0);
+      return;
+    }
     if (__privateMethod(this, _ChatKitElementBase_instances, getDisplayMode_fn).call(this) !== "pet") {
       return;
     }
     __privateMethod(this, _ChatKitElementBase_instances, setLauncherOpen_fn).call(this, true);
     __privateGet(this, _loaded).then(() => this.focusComposer()).catch(() => void 0);
   };
+  handlePetClose_fn = function() {
+    __privateSet(this, _petClosedByContextMenu, true);
+    __privateSet(this, _framePetOptionsOverride, null);
+    __privateMethod(this, _ChatKitElementBase_instances, setChatMinimizedToPet_fn).call(this, false);
+    __privateMethod(this, _ChatKitElementBase_instances, setLauncherOpen_fn).call(this, false);
+    __privateGet(this, _petOverlay).setOptions(null);
+    if (__privateMethod(this, _ChatKitElementBase_instances, getDisplayMode_fn).call(this) === "pet") {
+      return;
+    }
+    __privateGet(this, _loaded).then(() => __privateGet(this, _messenger).commands.setPetEnabled({ enabled: false })).catch(() => void 0);
+  };
   handlePetReply_fn = async function(text) {
     await this.sendUserMessage({ text });
   };