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

package/dist/xpert-chatkit.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, _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());
@@ -1137,8 +1137,10 @@ 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_OVERLAY_COPY = {
   "en-US": {
+    closePetMenuItem: "Close pet",
     hideMessage: "Hide message",
     expandMessage: "Expand message",
     collapseMessage: "Collapse message",
@@ -1150,6 +1152,7 @@ const PET_OVERLAY_COPY = {
     sendFailed: "Failed to send"
   },
   "zh-CN": {
+    closePetMenuItem: "关闭宠物",
     hideMessage: "隐藏消息",
     expandMessage: "展开消息",
     collapseMessage: "收起消息",
@@ -1297,6 +1300,7 @@ class PetOverlay {
   constructor(root, options) {
     this.overlayElement = null;
     this.petElement = null;
+    this.contextMenuElement = null;
     this.summaryElement = null;
     this.summaryToggleElement = null;
     this.mediaElement = null;
@@ -1337,6 +1341,7 @@ class PetOverlay {
     this.mediaQuery = null;
     this.connected = false;
     this.handleViewportChange = () => {
+      this.closeContextMenu();
       this.render();
     };
     this.handleReducedMotionChange = () => {
@@ -1357,6 +1362,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();
@@ -1424,7 +1459,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();
@@ -1500,6 +1539,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();
@@ -1514,6 +1554,7 @@ class PetOverlay {
     this.render();
   }
   setOptions(pet) {
+    this.closeContextMenu();
     const nextOptions = normalizePetOptions(pet);
     this.options = nextOptions;
     if (!nextOptions) {
@@ -1561,6 +1602,7 @@ class PetOverlay {
     this.copyLocale = nextLocale;
     this.copy = PET_OVERLAY_COPY[nextLocale];
     this.summaryRenderKey = null;
+    this.closeContextMenu();
     this.render();
   }
   setThreadSummary(summary) {
@@ -1626,8 +1668,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;
@@ -1678,6 +1726,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);
@@ -1688,6 +1737,7 @@ class PetOverlay {
     var _a2;
     this.clearRestingDelayTimer();
     this.clearTimers();
+    this.closeContextMenu();
     if (this.petElement) {
       this.petElement.removeEventListener(
         "pointerenter",
@@ -1697,7 +1747,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;
@@ -1861,7 +1918,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(() => {
@@ -1913,7 +1973,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;
@@ -2158,6 +2221,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) {
@@ -2258,13 +2410,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;
@@ -2340,9 +2495,11 @@ class ChatKitElementBase extends (_c = HTMLElement, _focusComposer_dec = [requir
     __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)
     }));
@@ -2665,6 +2822,9 @@ 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));
       }
@@ -2702,6 +2862,7 @@ 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));
     if (__privateGet(this, _initialized)) {
@@ -2784,6 +2945,7 @@ _wrapper = new WeakMap();
 _launcherCloseButton = new WeakMap();
 _launcherOpen = new WeakMap();
 _framePetOptionsOverride = new WeakMap();
+_petClosedByContextMenu = new WeakMap();
 _shadow = new WeakMap();
 _petOverlay = new WeakMap();
 _resolveLoaded = new WeakMap();
@@ -2815,6 +2977,9 @@ getConfiguredPetOptions_fn = function(options = __privateGet(this, _opts)) {
   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;
@@ -2876,6 +3041,16 @@ handlePetActivate_fn = function() {
   __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 });
 };