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

package/dist/xpert-chatkit.js

@@ -1138,6 +1138,7 @@ const PET_SUMMARY_GAP = 12;
 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",
@@ -1229,6 +1230,65 @@ function resolveCopyLocale(locale) {
   }
   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";
 }
@@ -1264,6 +1324,12 @@ function getThreadSummaryKey(summary) {
     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 };
@@ -1305,6 +1371,7 @@ class PetOverlay {
     this.summaryToggleElement = null;
     this.mediaElement = null;
     this.options = null;
+    this.theme = null;
     this.resolved = null;
     this.summary = null;
     this.summaryRenderKey = null;
@@ -1553,10 +1620,11 @@ class PetOverlay {
     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;
@@ -1606,8 +1674,8 @@ class PetOverlay {
     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;
@@ -1902,10 +1970,6 @@ class PetOverlay {
       return;
     }
     const nextRenderKey = [
-      summaryKey,
-      summary.title,
-      summary.message,
-      summary.status,
       this.copyLocale,
       this.isSummaryExpanded ? "expanded" : "compact",
       this.isSummaryHovering ? "hover" : "rest",
@@ -1930,6 +1994,7 @@ class PetOverlay {
         }, 0);
       }
     }
+    this.updateSummaryBubbleContent(summary);
     this.positionSummaryBubble(position, size);
   }
   renderCollapsedSummary(position, size) {
@@ -1950,7 +2015,7 @@ class PetOverlay {
       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,
@@ -1996,6 +2061,7 @@ class PetOverlay {
   }
   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);
@@ -2006,19 +2072,18 @@ class PetOverlay {
     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(
@@ -2036,7 +2101,8 @@ class PetOverlay {
     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(
@@ -2051,7 +2117,7 @@ class PetOverlay {
     }
     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";
@@ -2063,6 +2129,7 @@ class PetOverlay {
       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(
@@ -2079,7 +2146,30 @@ class PetOverlay {
     }
     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;
@@ -2095,18 +2185,21 @@ class PetOverlay {
     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";
@@ -2118,7 +2211,7 @@ class PetOverlay {
       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 = "!";
@@ -2130,8 +2223,8 @@ class PetOverlay {
     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)";
@@ -2139,6 +2232,7 @@ class PetOverlay {
     return icon;
   }
   createSummaryActionButton(label, title, onClick) {
+    const metrics = getSummaryThemeMetrics(this.theme);
     const button = document.createElement("button");
     button.type = "button";
     button.textContent = label;
@@ -2148,14 +2242,14 @@ class PetOverlay {
       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) {
@@ -3095,8 +3189,9 @@ setChatMinimizedToPet_fn = function(minimized) {
   }
 };
 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);
   }