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

package/dist/xpert-chatkit.umd.cjs

@@ -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) {
@@ -3099,8 +3193,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
   };
   syncPetOverlayOptions_fn = function() {
+    var _a2;
     const overlayPetOptions = __privateMethod(this, _ChatKitElementBase_instances, getOverlayPetOptions_fn).call(this);
-    __privateGet(this, _petOverlay).setOptions(overlayPetOptions);
+    __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);
     }