@xpert-ai/chatkit-web-component 0.3.0 → 0.3.2

package/dist/xpert-chatkit.umd.cjs

@@ -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, _framePetOptionsOverride, _petClosedByContextMenu, _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, 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());
@@ -1141,8 +1141,10 @@ 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_OVERLAY_COPY = {
     "en-US": {
+      closePetMenuItem: "Close pet",
       hideMessage: "Hide message",
       expandMessage: "Expand message",
       collapseMessage: "Collapse message",
@@ -1154,6 +1156,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       sendFailed: "Failed to send"
     },
     "zh-CN": {
+      closePetMenuItem: "关闭宠物",
       hideMessage: "隐藏消息",
       expandMessage: "展开消息",
       collapseMessage: "收起消息",
@@ -1301,6 +1304,7 @@ 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;
@@ -1341,6 +1345,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       this.mediaQuery = null;
       this.connected = false;
       this.handleViewportChange = () => {
+        this.closeContextMenu();
         this.render();
       };
       this.handleReducedMotionChange = () => {
@@ -1361,6 +1366,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();
@@ -1428,7 +1463,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();
@@ -1504,6 +1543,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();
@@ -1518,6 +1558,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       this.render();
     }
     setOptions(pet) {
+      this.closeContextMenu();
       const nextOptions = normalizePetOptions(pet);
       this.options = nextOptions;
       if (!nextOptions) {
@@ -1565,6 +1606,7 @@ 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) {
@@ -1630,8 +1672,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;
@@ -1682,6 +1730,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);
@@ -1692,6 +1741,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",
@@ -1701,7 +1751,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;
@@ -1865,7 +1922,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(() => {
@@ -1917,7 +1977,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;
@@ -2162,6 +2225,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) {
@@ -2262,13 +2414,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;
@@ -2344,9 +2499,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       __privateAdd(this, _launcherCloseButton);
       __privateAdd(this, _launcherOpen, 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)
       }));
@@ -2669,6 +2826,9 @@ 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));
         }
@@ -2706,6 +2866,7 @@ 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));
       if (__privateGet(this, _initialized)) {
@@ -2788,6 +2949,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   _launcherCloseButton = new WeakMap();
   _launcherOpen = new WeakMap();
   _framePetOptionsOverride = new WeakMap();
+  _petClosedByContextMenu = new WeakMap();
   _shadow = new WeakMap();
   _petOverlay = new WeakMap();
   _resolveLoaded = new WeakMap();
@@ -2819,6 +2981,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     return options.pet ?? null;
   };
   getOverlayPetOptions_fn = function() {
+    if (__privateGet(this, _petClosedByContextMenu)) {
+      return null;
+    }
     let pet = __privateGet(this, _framePetOptionsOverride) !== void 0 ? __privateGet(this, _framePetOptionsOverride) : __privateMethod(this, _ChatKitElementBase_instances, getConfiguredPetOptions_fn).call(this);
     if (__privateMethod(this, _ChatKitElementBase_instances, getDisplayMode_fn).call(this) === "pet" && !normalizePetOptions(pet ?? null)) {
       pet = true;
@@ -2880,6 +3045,16 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     __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, 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 });
   };