@xpert-ai/chatkit-ui5 0.3.0 → 0.3.1

package/dist/index.js

@@ -47,7 +47,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 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;
 import { normalizePetOptions, DEFAULT_PET_STORAGE_KEY, resolvePetCharacter, normalizeBoundsPadding, getPinnedPetPosition, clampPetPosition } from "@xpert-ai/chatkit-types";
 class EventEmitter {
   constructor() {
@@ -892,8 +892,11 @@ const PET_RESTING_DELAY_MS = 2e3;
 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",
@@ -905,6 +908,7 @@ const PET_OVERLAY_COPY = {
     sendFailed: "Failed to send"
   },
   "zh-CN": {
+    closePetMenuItem: "关闭宠物",
     hideMessage: "隐藏消息",
     expandMessage: "展开消息",
     collapseMessage: "收起消息",
@@ -981,6 +985,65 @@ function resolveCopyLocale(locale) {
   }
   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";
 }
@@ -1016,6 +1079,12 @@ function getThreadSummaryKey(summary) {
     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 };
@@ -1052,10 +1121,12 @@ class PetOverlay {
   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;
@@ -1092,6 +1163,7 @@ class PetOverlay {
     this.mediaQuery = null;
     this.connected = false;
     this.handleViewportChange = () => {
+      this.closeContextMenu();
       this.render();
     };
     this.handleReducedMotionChange = () => {
@@ -1112,6 +1184,36 @@ class PetOverlay {
         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();
@@ -1179,7 +1281,11 @@ class PetOverlay {
     };
     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();
@@ -1255,6 +1361,7 @@ class PetOverlay {
     };
     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();
@@ -1268,9 +1375,11 @@ class PetOverlay {
     this.installReducedMotionListener();
     this.render();
   }
-  setOptions(pet) {
+  setOptions(pet, theme) {
+    this.closeContextMenu();
     const nextOptions = normalizePetOptions(pet);
     this.options = nextOptions;
+    this.theme = theme ?? null;
     if (!nextOptions) {
       this.isDragging = false;
       this.isHovering = false;
@@ -1316,11 +1425,12 @@ class PetOverlay {
     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;
@@ -1381,8 +1491,14 @@ class PetOverlay {
   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;
@@ -1433,6 +1549,7 @@ class PetOverlay {
     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);
@@ -1443,6 +1560,7 @@ class PetOverlay {
     var _a2;
     this.clearRestingDelayTimer();
     this.clearTimers();
+    this.closeContextMenu();
     if (this.petElement) {
       this.petElement.removeEventListener(
         "pointerenter",
@@ -1452,7 +1570,14 @@ class PetOverlay {
         "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;
@@ -1600,10 +1725,6 @@ class PetOverlay {
       return;
     }
     const nextRenderKey = [
-      summaryKey,
-      summary.title,
-      summary.message,
-      summary.status,
       this.copyLocale,
       this.isSummaryExpanded ? "expanded" : "compact",
       this.isSummaryHovering ? "hover" : "rest",
@@ -1616,7 +1737,10 @@ class PetOverlay {
       (_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(() => {
@@ -1625,6 +1749,7 @@ class PetOverlay {
         }, 0);
       }
     }
+    this.updateSummaryBubbleContent(summary);
     this.positionSummaryBubble(position, size);
   }
   renderCollapsedSummary(position, size) {
@@ -1645,7 +1770,7 @@ class PetOverlay {
       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,
@@ -1668,7 +1793,10 @@ class PetOverlay {
       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;
@@ -1688,6 +1816,7 @@ class PetOverlay {
   }
   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);
@@ -1698,19 +1827,18 @@ class PetOverlay {
     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(
@@ -1728,7 +1856,8 @@ class PetOverlay {
     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(
@@ -1743,7 +1872,7 @@ class PetOverlay {
     }
     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";
@@ -1755,6 +1884,7 @@ class PetOverlay {
       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(
@@ -1771,7 +1901,30 @@ class PetOverlay {
     }
     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;
@@ -1787,18 +1940,21 @@ class PetOverlay {
     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";
@@ -1810,7 +1966,7 @@ class PetOverlay {
       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 = "!";
@@ -1822,8 +1978,8 @@ class PetOverlay {
     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)";
@@ -1831,6 +1987,7 @@ class PetOverlay {
     return icon;
   }
   createSummaryActionButton(label, title, onClick) {
+    const metrics = getSummaryThemeMetrics(this.theme);
     const button = document.createElement("button");
     button.type = "button";
     button.textContent = label;
@@ -1840,14 +1997,14 @@ class PetOverlay {
       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) {
@@ -1913,6 +2070,95 @@ class PetOverlay {
     }
     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) {
@@ -2013,13 +2259,16 @@ class PetOverlay {
       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;
@@ -2094,10 +2343,13 @@ class ChatKitElementBase extends (_c = HTMLElement, _focusComposer_dec = [requir
     __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)
     }));
@@ -2228,6 +2480,9 @@ class ChatKitElementBase extends (_c = HTMLElement, _focusComposer_dec = [requir
       :host([data-display-mode="pet"]) {
         display: contents;
       }
+      :host([data-chat-minimized-to-pet="true"]) {
+        display: contents;
+      }
       .ck-iframe {
         border: none;
         position: absolute;
@@ -2338,6 +2593,11 @@ class ChatKitElementBase extends (_c = HTMLElement, _focusComposer_dec = [requir
       :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;
       }
@@ -2420,8 +2680,21 @@ class ChatKitElementBase extends (_c = HTMLElement, _focusComposer_dec = [requir
     __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", () => {
@@ -2457,8 +2730,9 @@ class ChatKitElementBase extends (_c = HTMLElement, _focusComposer_dec = [requir
   }
   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(() => {
@@ -2538,7 +2812,9 @@ _frame = new WeakMap();
 _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();
@@ -2569,8 +2845,42 @@ getConfiguredPetOptions_fn = function(options = __privateGet(this, _opts)) {
   }
   return options.pet ?? null;
 };
+mergeConfiguredPetPositionDefaults_fn = function(pet) {
+  if (!pet) {
+    return pet;
+  }
+  const configured = 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" && !normalizePetOptions(pet ?? null)) {
     pet = true;
   }
@@ -2624,13 +2934,49 @@ setLauncherOpen_fn = function(open) {
     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 });
 };