@xpert-ai/chatkit-web-component 0.3.3 → 0.3.5

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, _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, 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, _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());
@@ -1142,6 +1142,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   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",
@@ -1233,6 +1234,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";
   }
@@ -1268,6 +1328,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 };
@@ -1309,6 +1375,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       this.summaryToggleElement = null;
       this.mediaElement = null;
       this.options = null;
+      this.theme = null;
       this.resolved = null;
       this.summary = null;
       this.summaryRenderKey = null;
@@ -1557,10 +1624,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       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;
@@ -1610,8 +1678,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       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;
@@ -1906,10 +1974,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",
@@ -1934,6 +1998,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           }, 0);
         }
       }
+      this.updateSummaryBubbleContent(summary);
       this.positionSummaryBubble(position, size);
     }
     renderCollapsedSummary(position, size) {
@@ -1954,7 +2019,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,
@@ -2000,6 +2065,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);
@@ -2010,19 +2076,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(
@@ -2040,7 +2105,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(
@@ -2055,7 +2121,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";
@@ -2067,6 +2133,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(
@@ -2083,7 +2150,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;
@@ -2099,18 +2189,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";
@@ -2122,7 +2215,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 = "!";
@@ -2134,8 +2227,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)";
@@ -2143,6 +2236,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;
@@ -2152,14 +2246,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) {
@@ -2498,6 +2592,7 @@ 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" }));
@@ -2634,6 +2729,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;
@@ -2744,6 +2842,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;
       }
@@ -2830,7 +2933,17 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             __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", () => {
@@ -2868,7 +2981,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       __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(() => {
@@ -2948,6 +3061,7 @@ 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();
@@ -3069,7 +3183,32 @@ 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;
     }
@@ -3079,6 +3218,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   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") {