@xpert-ai/chatkit-web-component 0.5.0 → 0.5.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, _setRuntimeCapabilities_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;
+  var _a, _b, _setTrainingOptOut_dec, _hideHistory_dec, _showHistory_dec, _sendCustomAction_dec, _shareThread_dec, _setThreadId_dec, _setRuntimeCapabilities_dec, _setComposerValue_dec, _sendUserMessage_dec, _fetchUpdates_dec, _focusComposer_dec, _c, _opts, _frameUrl, _frame, _wrapper, _launcherCloseButton, _launcherOpen, _chatMinimizedToPet, _framePetOptionsOverride, _petClosedByContextMenu, _shadow, _petOverlay, _resolveLoaded, _loaded, _channelId, _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());
@@ -370,7 +370,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       }
     });
   };
-  function safeRandomUUID() {
+  function createSecureChannelId() {
     const cryptoRef = globalThis.crypto;
     if (typeof (cryptoRef == null ? void 0 : cryptoRef.randomUUID) === "function") {
       return cryptoRef.randomUUID();
@@ -382,7 +382,30 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       bytes[8] = bytes[8] & 63 | 128;
       return [...bytes].map((byte) => byte.toString(16).padStart(2, "0")).join("").replace(/^(.{8})(.{4})(.{4})(.{4})(.{12})$/, "$1-$2-$3-$4-$5");
     }
-    return `ck_${Date.now()}_${Math.random().toString(16).slice(2)}`;
+    return null;
+  }
+  function safeRandomUUID() {
+    return createSecureChannelId() ?? `ck_${Date.now()}_${Math.random().toString(16).slice(2)}`;
+  }
+  function isTrustedChatKitMessageEvent(event, { channelId, expectedOrigin, expectedSource }) {
+    const payload = event.data;
+    if (!payload || typeof payload !== "object" || !("__xpaiChatKit" in payload)) {
+      return false;
+    }
+    if (payload.__xpaiChatKit !== true) {
+      return false;
+    }
+    if (expectedOrigin !== "*" && event.origin !== expectedOrigin) {
+      return false;
+    }
+    if (event.source === expectedSource) {
+      return true;
+    }
+    const normalizedChannelId = channelId == null ? void 0 : channelId.trim();
+    if (normalizedChannelId) {
+      return "channelId" in payload && payload.channelId === normalizedChannelId;
+    }
+    return false;
   }
   let IntegrationError$1 = class IntegrationError2 extends Error {
     constructor(message) {
@@ -416,10 +439,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       handlers,
       target,
       targetOrigin,
+      channelId,
       fetch: fetch2 = window.fetch
     }) {
       __publicField(this, "targetOrigin");
       __publicField(this, "target");
+      __publicField(this, "channelId");
       __publicField(this, "commandHandlers");
       __publicField(this, "_fetch");
       __publicField(this, "emitter", new EventEmitter());
@@ -450,7 +475,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       ));
       __publicField(this, "handleMessage", async (event) => {
         var _a2, _b2, _c2, _d;
-        if (!event.data || event.data.__xpaiChatKit !== true || event.origin !== this.targetOrigin || event.source !== this.target()) {
+        if (!isTrustedChatKitMessageEvent(event, {
+          channelId: this.channelId,
+          expectedOrigin: this.targetOrigin,
+          expectedSource: this.target()
+        })) {
           return;
         }
         const data = event.data;
@@ -591,6 +620,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       this.commandHandlers = handlers;
       this.target = target;
       this.targetOrigin = targetOrigin;
+      this.channelId = (channelId == null ? void 0 : channelId.trim()) || void 0;
       this._fetch = (...args) => fetch2(...args);
     }
     setTargetOrigin(targetOrigin) {
@@ -600,6 +630,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       var _a2;
       const message = {
         __xpaiChatKit: true,
+        ...this.channelId ? { channelId: this.channelId } : {},
         ...data
       };
       (_a2 = this.target()) == null ? void 0 : _a2.postMessage(message, this.targetOrigin, transfer);
@@ -1400,6 +1431,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       this.lastDragPosition = null;
       this.lastDragClientX = null;
       this.dragAnimation = null;
+      this.activePointerId = null;
       this.isDragging = false;
       this.isHovering = false;
       this.movedDuringDrag = false;
@@ -1531,7 +1563,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       };
       this.handlePointerDown = (event) => {
         var _a2, _b2;
-        if (event.button !== 0 || event.ctrlKey) {
+        if (event.button !== 0 || event.ctrlKey || this.isDragging) {
           return;
         }
         this.closeContextMenu();
@@ -1557,12 +1589,17 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         this.movedDuringDrag = false;
         this.dragPosition = nextPosition;
         this.isDragging = true;
+        this.activePointerId = event.pointerId;
         this.clearRestingDelayTimer();
         this.isHovering = true;
+        this.captureActivePointer();
         this.installDragListeners();
         this.rescheduleAnimation();
       };
       this.handlePointerMove = (event) => {
+        if (!this.isActiveDragPointer(event)) {
+          return;
+        }
         const nextPosition = this.getNextDragPosition(event);
         const last = this.lastDragPosition;
         if (last && (Math.abs(last.x - nextPosition.x) > DRAG_DIRECTION_THRESHOLD_PX || Math.abs(last.y - nextPosition.y) > DRAG_DIRECTION_THRESHOLD_PX)) {
@@ -1582,20 +1619,18 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         this.render();
       };
       this.handlePointerUp = (event) => {
+        if (!this.isActiveDragPointer(event)) {
+          return;
+        }
         const finalPosition = this.lastDragPosition ?? this.getNextDragPosition(event);
-        this.isDragging = false;
-        this.dragPosition = null;
-        this.dragAnimation = null;
-        this.lastDragClientX = null;
-        this.removeDragListeners();
-        this.persistPosition(finalPosition);
-        if (event.pointerType === "mouse" && this.isPointerOverPet(event)) {
-          this.isHovering = true;
-          this.rescheduleAnimation();
-        } else {
-          this.enterRestingAfterDelay();
-          this.rescheduleAnimation();
+        this.finishDrag(finalPosition, event);
+      };
+      this.handleLostPointerCapture = (event) => {
+        if (!this.isActiveDragPointer(event)) {
+          return;
         }
+        const finalPosition = this.lastDragPosition ?? this.getNextDragPosition(event);
+        this.finishDrag(finalPosition, event);
       };
       this.handleClick = () => {
         var _a2;
@@ -1799,6 +1834,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("lostpointercapture", this.handleLostPointerCapture);
       pet.addEventListener("contextmenu", this.handleContextMenu);
       pet.addEventListener("click", this.handleClick);
       overlay.append(style, pet);
@@ -1808,6 +1844,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     removeOverlay() {
       var _a2;
+      this.cancelActiveDrag();
       this.clearRestingDelayTimer();
       this.clearTimers();
       this.closeContextMenu();
@@ -1824,6 +1861,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           "pointerdown",
           this.handlePointerDown
         );
+        this.petElement.removeEventListener(
+          "lostpointercapture",
+          this.handleLostPointerCapture
+        );
         this.petElement.removeEventListener(
           "contextmenu",
           this.handleContextMenu
@@ -2541,6 +2582,34 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         this.render();
       }
     }
+    captureActivePointer() {
+      const pointerId = this.activePointerId;
+      const pet = this.petElement;
+      if (pointerId === null || typeof (pet == null ? void 0 : pet.setPointerCapture) !== "function") {
+        return;
+      }
+      try {
+        pet.setPointerCapture(pointerId);
+      } catch {
+      }
+    }
+    releaseActivePointer() {
+      const pointerId = this.activePointerId;
+      const pet = this.petElement;
+      this.activePointerId = null;
+      if (pointerId === null || typeof (pet == null ? void 0 : pet.hasPointerCapture) !== "function" || typeof pet.releasePointerCapture !== "function") {
+        return;
+      }
+      try {
+        if (pet.hasPointerCapture(pointerId)) {
+          pet.releasePointerCapture(pointerId);
+        }
+      } catch {
+      }
+    }
+    isActiveDragPointer(event) {
+      return this.isDragging && event.pointerId === this.activePointerId;
+    }
     getNextDragPosition(event) {
       if (!this.options) {
         return { x: 0, y: 0 };
@@ -2555,12 +2624,35 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         normalizeBoundsPadding(this.options.position.boundsPadding)
       );
     }
+    finishDrag(finalPosition, event) {
+      this.isDragging = false;
+      this.dragPosition = null;
+      this.dragAnimation = null;
+      this.lastDragClientX = null;
+      this.removeDragListeners();
+      this.releaseActivePointer();
+      this.persistPosition(finalPosition);
+      if (event.pointerType === "mouse" && this.isPointerOverPet(event)) {
+        this.isHovering = true;
+        this.rescheduleAnimation();
+      } else {
+        this.enterRestingAfterDelay();
+        this.rescheduleAnimation();
+      }
+    }
+    cancelActiveDrag() {
+      this.isDragging = false;
+      this.dragPosition = null;
+      this.dragAnimation = null;
+      this.lastDragPosition = null;
+      this.lastDragClientX = null;
+      this.removeDragListeners();
+      this.releaseActivePointer();
+    }
     installDragListeners() {
       window.addEventListener("pointermove", this.handlePointerMove);
-      window.addEventListener("pointerup", this.handlePointerUp, { once: true });
-      window.addEventListener("pointercancel", this.handlePointerUp, {
-        once: true
-      });
+      window.addEventListener("pointerup", this.handlePointerUp);
+      window.addEventListener("pointercancel", this.handlePointerUp);
     }
     removeDragListeners() {
       window.removeEventListener("pointermove", this.handlePointerMove);
@@ -2607,7 +2699,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       __privateAdd(this, _loaded, new Promise((resolve) => {
         __privateSet(this, _resolveLoaded, resolve);
       }));
+      __privateAdd(this, _channelId, createSecureChannelId());
       __privateAdd(this, _messenger, new ChatFrameMessenger({
+        channelId: __privateGet(this, _channelId) ?? void 0,
         fetch: (...args) => {
           var _a2;
           const customFetch = ((_a2 = __privateGet(this, _opts)) == null ? void 0 : _a2.api) && "fetch" in __privateGet(this, _opts).api && __privateGet(this, _opts).api.fetch;
@@ -3106,6 +3200,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   _petOverlay = new WeakMap();
   _resolveLoaded = new WeakMap();
   _loaded = new WeakMap();
+  _channelId = new WeakMap();
   _messenger = new WeakMap();
   _ChatKitElementBase_instances = new WeakSet();
   emitAndThrow_fn = function(error) {
@@ -3316,7 +3411,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     frameURL.hash = encodeBase64({
       options: getInnerOptions(__privateMethod(this, _ChatKitElementBase_instances, getFrameOptions_fn).call(this, __privateGet(this, _opts))),
       referrer: window.location.origin,
-      profile: this.profile
+      profile: this.profile,
+      ...__privateGet(this, _channelId) ? { channelId: __privateGet(this, _channelId) } : {}
     });
     __privateGet(this, _messenger).connect();
     __privateGet(this, _frame).src = frameURL.toString();