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

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, _shadow, _resolveLoaded, _loaded, _messenger, _ChatKitElementBase_instances, emitAndThrow_fn, setOptionsDataAttributes_fn, 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, _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;
 class EventEmitter {
   constructor() {
     __publicField(this, "callbacks", /* @__PURE__ */ new Map());
@@ -865,6 +865,252 @@ class ChatFrameMessenger extends BaseMessenger {
     return true;
   }
 }
+const PET_ANIMATION_NAMES = [
+  "idle",
+  "running-right",
+  "running-left",
+  "waving",
+  "jumping",
+  "failed",
+  "waiting",
+  "running",
+  "review"
+];
+const petSpriteAtlas = {
+  columns: 8,
+  rows: 9,
+  cellWidth: 192,
+  cellHeight: 208,
+  animations: {
+    idle: {
+      row: 0,
+      frames: 6,
+      frameDurations: [280, 110, 110, 140, 140, 320]
+    },
+    "running-right": {
+      row: 1,
+      frames: 8,
+      frameDurations: [120, 120, 120, 120, 120, 120, 120, 220]
+    },
+    "running-left": {
+      row: 2,
+      frames: 8,
+      frameDurations: [120, 120, 120, 120, 120, 120, 120, 220]
+    },
+    waving: {
+      row: 3,
+      frames: 4,
+      frameDurations: [140, 140, 140, 280]
+    },
+    jumping: {
+      row: 4,
+      frames: 5,
+      frameDurations: [140, 140, 140, 140, 280]
+    },
+    failed: {
+      row: 5,
+      frames: 8,
+      frameDurations: [140, 140, 140, 140, 140, 140, 140, 240]
+    },
+    waiting: {
+      row: 6,
+      frames: 6,
+      frameDurations: [150, 150, 150, 150, 150, 260]
+    },
+    running: {
+      row: 7,
+      frames: 6,
+      frameDurations: [120, 120, 120, 120, 120, 220]
+    },
+    review: {
+      row: 8,
+      frames: 6,
+      frameDurations: [150, 150, 150, 150, 150, 280]
+    }
+  }
+};
+const DEFAULT_PET_BOUNDS_PADDING = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+};
+const DEFAULT_PET_STORAGE_KEY = "chatkit:pet:position:v1";
+const DEFAULT_PET_SPRITESHEET_URL = "/pets/boba/spritesheet.webp";
+const DEFAULT_PET_CHARACTER = {
+  type: "sprite-atlas",
+  src: DEFAULT_PET_SPRITESHEET_URL
+};
+const DEFAULT_POSITION = {
+  pin: "bottom-right",
+  draggable: true,
+  scale: 0.25,
+  persist: true,
+  zIndex: 40
+};
+function mergeFrameAnimation(base, override) {
+  return {
+    row: (override == null ? void 0 : override.row) ?? base.row,
+    frames: (override == null ? void 0 : override.frames) ?? base.frames,
+    frameDurations: (override == null ? void 0 : override.frameDurations) && override.frameDurations.length > 0 ? override.frameDurations : base.frameDurations
+  };
+}
+function mergePetSpriteAtlas(override) {
+  var _a2;
+  const animations = {};
+  for (const name of PET_ANIMATION_NAMES) {
+    animations[name] = mergeFrameAnimation(
+      petSpriteAtlas.animations[name],
+      (_a2 = override == null ? void 0 : override.animations) == null ? void 0 : _a2[name]
+    );
+  }
+  return {
+    columns: (override == null ? void 0 : override.columns) ?? petSpriteAtlas.columns,
+    rows: (override == null ? void 0 : override.rows) ?? petSpriteAtlas.rows,
+    cellWidth: (override == null ? void 0 : override.cellWidth) ?? petSpriteAtlas.cellWidth,
+    cellHeight: (override == null ? void 0 : override.cellHeight) ?? petSpriteAtlas.cellHeight,
+    animations
+  };
+}
+function normalizeCharacter(character) {
+  if (!character) {
+    return DEFAULT_PET_CHARACTER;
+  }
+  if (character.src) {
+    return character;
+  }
+  return DEFAULT_PET_CHARACTER;
+}
+function normalizePetOptions(pet) {
+  if (!pet) {
+    return null;
+  }
+  if (pet === true) {
+    return {
+      character: DEFAULT_PET_CHARACTER,
+      position: DEFAULT_POSITION,
+      behavior: "auto",
+      ariaLabel: "Animated pet",
+      imageRendering: "auto"
+    };
+  }
+  if (pet.enabled === false) {
+    return null;
+  }
+  return {
+    character: normalizeCharacter(pet.character),
+    position: {
+      ...DEFAULT_POSITION,
+      ...pet.position
+    },
+    behavior: pet.behavior ?? "auto",
+    ariaLabel: pet.ariaLabel ?? "Animated pet",
+    imageRendering: pet.imageRendering ?? "auto"
+  };
+}
+function resolvePetCharacter(character) {
+  if (!character.src) {
+    return null;
+  }
+  return {
+    kind: "atlas",
+    src: character.src,
+    atlas: mergePetSpriteAtlas(character.atlas)
+  };
+}
+function normalizeBoundsPadding(value) {
+  if (typeof value === "number") {
+    return {
+      top: value,
+      right: value,
+      bottom: value,
+      left: value
+    };
+  }
+  return {
+    top: (value == null ? void 0 : value.top) ?? DEFAULT_PET_BOUNDS_PADDING.top,
+    right: (value == null ? void 0 : value.right) ?? DEFAULT_PET_BOUNDS_PADDING.right,
+    bottom: (value == null ? void 0 : value.bottom) ?? DEFAULT_PET_BOUNDS_PADDING.bottom,
+    left: (value == null ? void 0 : value.left) ?? DEFAULT_PET_BOUNDS_PADDING.left
+  };
+}
+function clampPetPosition(position, size, viewport, padding) {
+  const minX = padding.left;
+  const minY = padding.top;
+  const maxX = Math.max(minX, viewport.width - size.width - padding.right);
+  const maxY = Math.max(minY, viewport.height - size.height - padding.bottom);
+  return {
+    x: Math.min(maxX, Math.max(minX, position.x)),
+    y: Math.min(maxY, Math.max(minY, position.y))
+  };
+}
+function getPinnedPetPosition(pin, size, viewport, padding) {
+  const horizontalCenter = (viewport.width - size.width) / 2;
+  const verticalCenter = (viewport.height - size.height) / 2;
+  const right = viewport.width - size.width - padding.right;
+  const bottom = viewport.height - size.height - padding.bottom;
+  switch (pin) {
+    case "top-left":
+      return clampPetPosition(
+        { x: padding.left, y: padding.top },
+        size,
+        viewport,
+        padding
+      );
+    case "top":
+      return clampPetPosition(
+        { x: horizontalCenter, y: padding.top },
+        size,
+        viewport,
+        padding
+      );
+    case "top-right":
+      return clampPetPosition(
+        { x: right, y: padding.top },
+        size,
+        viewport,
+        padding
+      );
+    case "left":
+      return clampPetPosition(
+        { x: padding.left, y: verticalCenter },
+        size,
+        viewport,
+        padding
+      );
+    case "center":
+      return clampPetPosition(
+        { x: horizontalCenter, y: verticalCenter },
+        size,
+        viewport,
+        padding
+      );
+    case "right":
+      return clampPetPosition(
+        { x: right, y: verticalCenter },
+        size,
+        viewport,
+        padding
+      );
+    case "bottom-left":
+      return clampPetPosition(
+        { x: padding.left, y: bottom },
+        size,
+        viewport,
+        padding
+      );
+    case "bottom":
+      return clampPetPosition(
+        { x: horizontalCenter, y: bottom },
+        size,
+        viewport,
+        padding
+      );
+    case "bottom-right":
+    default:
+      return clampPetPosition({ x: right, y: bottom }, size, viewport, padding);
+  }
+}
 const removeMethods = (obj, seen = /* @__PURE__ */ new WeakSet()) => {
   if (typeof obj === "function") return "[ChatKitMethod]";
   if (typeof obj !== "object" || obj === null) return obj;
@@ -883,6 +1129,1191 @@ const removeMethods = (obj, seen = /* @__PURE__ */ new WeakSet()) => {
   }
   return result;
 };
+const DRAG_DIRECTION_THRESHOLD_PX = 2;
+const PET_BASE_RENDER_SCALE = 0.5;
+const PET_FRAME_DURATION_MULTIPLIER = 1.5;
+const PET_RESTING_FRAME_DURATION_MULTIPLIER = 3;
+const PET_RESTING_DELAY_MS = 2e3;
+const PET_SUMMARY_GAP = 12;
+const PET_SUMMARY_WIDTH = 320;
+const PET_SUMMARY_MARGIN = 12;
+const PET_OVERLAY_COPY = {
+  "en-US": {
+    hideMessage: "Hide message",
+    expandMessage: "Expand message",
+    collapseMessage: "Collapse message",
+    restoreMessage: "Show message",
+    replyButton: "Reply",
+    replyPlaceholder: "Reply...",
+    sendButton: "Send",
+    sendingButton: "Sending...",
+    sendFailed: "Failed to send"
+  },
+  "zh-CN": {
+    hideMessage: "隐藏消息",
+    expandMessage: "展开消息",
+    collapseMessage: "收起消息",
+    restoreMessage: "显示消息",
+    replyButton: "回复",
+    replyPlaceholder: "输入回复...",
+    sendButton: "发送",
+    sendingButton: "发送中...",
+    sendFailed: "发送失败"
+  }
+};
+function stopEventPropagation(event) {
+  event.stopPropagation();
+}
+function getViewportSize() {
+  const visualViewport = window.visualViewport;
+  return {
+    width: (visualViewport == null ? void 0 : visualViewport.width) || window.innerWidth || 320,
+    height: (visualViewport == null ? void 0 : visualViewport.height) || window.innerHeight || 480
+  };
+}
+function readPersistedPosition(storageKey, persist) {
+  if (!persist) {
+    return null;
+  }
+  try {
+    const raw = window.localStorage.getItem(storageKey);
+    if (!raw) {
+      return null;
+    }
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object" || typeof parsed.x !== "number" || typeof parsed.y !== "number") {
+      return null;
+    }
+    return { x: parsed.x, y: parsed.y };
+  } catch {
+    return null;
+  }
+}
+function writePersistedPosition(storageKey, persist, position) {
+  if (!persist) {
+    return;
+  }
+  try {
+    window.localStorage.setItem(storageKey, JSON.stringify(position));
+  } catch {
+  }
+}
+function escapeCssUrl(value) {
+  return value.replace(/["\\]/g, "\\$&");
+}
+function getRenderScale(scale) {
+  return Math.max(0.1, scale) * PET_BASE_RENDER_SCALE;
+}
+function clampNumber(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function getDefaultLocale() {
+  if (typeof window !== "undefined") {
+    try {
+      const stored = window.localStorage.getItem("chatkit:locale");
+      if (stored) {
+        return stored;
+      }
+    } catch {
+    }
+  }
+  return typeof navigator !== "undefined" ? navigator.language : null;
+}
+function resolveCopyLocale(locale) {
+  const normalized = (locale ?? getDefaultLocale() ?? "").trim().toLowerCase();
+  if (normalized === "zh-cn" || normalized === "zh-hans" || normalized.startsWith("zh")) {
+    return "zh-CN";
+  }
+  return "en-US";
+}
+function isPetState(value) {
+  return value === "idle" || value === "running-right" || value === "running-left" || value === "waving" || value === "jumping" || value === "failed" || value === "waiting" || value === "running" || value === "review";
+}
+function parsePetStateChangePayload(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return null;
+  }
+  const payload = value;
+  return isPetState(payload.state) ? { state: payload.state } : null;
+}
+function parsePetOptionsChangePayload(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return null;
+  }
+  const payload = value;
+  if (payload.pet === null || typeof payload.pet === "boolean") {
+    return { pet: payload.pet };
+  }
+  if (payload.pet && typeof payload.pet === "object" && !Array.isArray(payload.pet)) {
+    return { pet: payload.pet };
+  }
+  return null;
+}
+function isThreadSummaryStatus(value) {
+  return value === "running" || value === "completed" || value === "failed";
+}
+function getThreadSummaryKey(summary) {
+  if (!summary) {
+    return null;
+  }
+  return [
+    summary.threadId,
+    summary.messageId || summary.updatedAt || summary.message
+  ].join(":");
+}
+function parseThreadSummaryPayload(value) {
+  if (value === null) {
+    return { summary: null };
+  }
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return null;
+  }
+  const payload = value;
+  if (typeof payload.threadId !== "string" || !payload.threadId.trim() || typeof payload.title !== "string" || !payload.title.trim() || typeof payload.message !== "string" || !payload.message.trim() || !isThreadSummaryStatus(payload.status)) {
+    return null;
+  }
+  return {
+    summary: {
+      threadId: payload.threadId,
+      title: payload.title,
+      message: payload.message,
+      status: payload.status,
+      ...typeof payload.messageId === "string" && payload.messageId.trim() ? { messageId: payload.messageId } : {},
+      ...typeof payload.updatedAt === "string" && payload.updatedAt.trim() ? { updatedAt: payload.updatedAt } : {}
+    }
+  };
+}
+function parseThreadSummaryLogPayload(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return null;
+  }
+  const payload = value;
+  if (payload.name !== "thread.summary") {
+    return null;
+  }
+  return parseThreadSummaryPayload(payload.data ?? null);
+}
+class PetOverlay {
+  constructor(root, options) {
+    this.overlayElement = null;
+    this.petElement = null;
+    this.summaryElement = null;
+    this.summaryToggleElement = null;
+    this.mediaElement = null;
+    this.options = null;
+    this.resolved = null;
+    this.summary = null;
+    this.summaryRenderKey = null;
+    this.dismissedSummaryKey = null;
+    this.isSummaryCollapsed = false;
+    this.isSummaryExpanded = false;
+    this.isSummaryHovering = false;
+    this.isReplyOpen = false;
+    this.isReplySubmitting = false;
+    this.replyError = null;
+    this.replyDraft = "";
+    this.replyInputElement = null;
+    this.copyLocale = resolveCopyLocale();
+    this.copy = PET_OVERLAY_COPY[this.copyLocale];
+    this.currentState = "waiting";
+    this.lastAutoState = "waiting";
+    this.transient = null;
+    this.position = null;
+    this.dragPosition = null;
+    this.dragOffset = { x: 0, y: 0 };
+    this.lastDragPosition = null;
+    this.lastDragClientX = null;
+    this.dragAnimation = null;
+    this.isDragging = false;
+    this.isHovering = false;
+    this.movedDuringDrag = false;
+    this.prefersReducedMotion = false;
+    this.frame = 0;
+    this.completed = false;
+    this.activeAnimationName = null;
+    this.activeAnimationMode = null;
+    this.frameTimer = null;
+    this.restingDelayTimer = null;
+    this.mediaQuery = null;
+    this.connected = false;
+    this.handleViewportChange = () => {
+      this.render();
+    };
+    this.handleReducedMotionChange = () => {
+      var _a2;
+      this.prefersReducedMotion = Boolean((_a2 = this.mediaQuery) == null ? void 0 : _a2.matches);
+      if (this.prefersReducedMotion) {
+        this.transient = null;
+      }
+      this.render();
+    };
+    this.handlePointerEnter = () => {
+      this.clearRestingDelayTimer();
+      this.isHovering = true;
+      this.rescheduleAnimation();
+    };
+    this.handlePointerLeave = () => {
+      if (!this.isDragging) {
+        this.enterRestingAfterDelay();
+      }
+    };
+    this.handleSummaryPointerEnter = () => {
+      this.isSummaryHovering = true;
+      this.render();
+    };
+    this.handleSummaryPointerLeave = () => {
+      this.isSummaryHovering = false;
+      if (!this.isReplyOpen) {
+        this.render();
+      }
+    };
+    this.handleSummaryClick = () => {
+      var _a2, _b2;
+      const threadId = (_a2 = this.summary) == null ? void 0 : _a2.threadId.trim();
+      if (!threadId) {
+        return;
+      }
+      (_b2 = this.onThreadSummaryActivate) == null ? void 0 : _b2.call(this, threadId);
+    };
+    this.handleSummaryDelete = () => {
+      const summaryKey = getThreadSummaryKey(this.summary);
+      if (summaryKey) {
+        this.dismissedSummaryKey = summaryKey;
+      }
+      this.isSummaryCollapsed = false;
+      this.isReplyOpen = false;
+      this.replyDraft = "";
+      this.replyError = null;
+      this.removeSummaryElements();
+    };
+    this.handleSummaryCollapseToggle = () => {
+      this.isSummaryCollapsed = !this.isSummaryCollapsed;
+      this.isSummaryExpanded = false;
+      this.isReplyOpen = false;
+      this.replyError = null;
+      this.render();
+    };
+    this.handleSummaryExpandToggle = () => {
+      this.isSummaryExpanded = !this.isSummaryExpanded;
+      this.render();
+    };
+    this.handleReplyOpen = () => {
+      this.isReplyOpen = true;
+      this.replyError = null;
+      this.render();
+    };
+    this.handleReplyInput = (event) => {
+      const target = event.currentTarget;
+      if (target instanceof HTMLInputElement) {
+        this.replyDraft = target.value;
+        this.replyError = null;
+      }
+    };
+    this.handleReplySubmit = (event) => {
+      event.preventDefault();
+      void this.submitReply();
+    };
+    this.handleReplyKeyDown = (event) => {
+      if (event.key !== "Escape") {
+        return;
+      }
+      event.preventDefault();
+      this.isReplyOpen = false;
+      this.replyError = null;
+      this.render();
+    };
+    this.handlePointerDown = (event) => {
+      var _a2, _b2;
+      if (!((_a2 = this.options) == null ? void 0 : _a2.position.draggable) || event.button !== 0) {
+        return;
+      }
+      event.preventDefault();
+      const rect = (_b2 = this.petElement) == null ? void 0 : _b2.getBoundingClientRect();
+      if (!rect) {
+        return;
+      }
+      const nextPosition = {
+        x: rect.left,
+        y: rect.top
+      };
+      this.dragOffset = {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top
+      };
+      this.lastDragPosition = nextPosition;
+      this.lastDragClientX = event.clientX;
+      this.dragAnimation = null;
+      this.movedDuringDrag = false;
+      this.dragPosition = nextPosition;
+      this.isDragging = true;
+      this.clearRestingDelayTimer();
+      this.isHovering = true;
+      this.installDragListeners();
+      this.rescheduleAnimation();
+    };
+    this.handlePointerMove = (event) => {
+      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)) {
+        this.movedDuringDrag = true;
+      }
+      if (this.lastDragClientX !== null) {
+        const deltaX = event.clientX - this.lastDragClientX;
+        if (deltaX > DRAG_DIRECTION_THRESHOLD_PX) {
+          this.dragAnimation = "running-right";
+        } else if (deltaX < -DRAG_DIRECTION_THRESHOLD_PX) {
+          this.dragAnimation = "running-left";
+        }
+      }
+      this.lastDragClientX = event.clientX;
+      this.lastDragPosition = nextPosition;
+      this.dragPosition = nextPosition;
+      this.render();
+    };
+    this.handlePointerUp = (event) => {
+      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.handleClick = () => {
+      var _a2;
+      if (this.movedDuringDrag) {
+        return;
+      }
+      (_a2 = this.onActivate) == null ? void 0 : _a2.call(this);
+      if (this.prefersReducedMotion) {
+        return;
+      }
+      this.transient = { name: "waving" };
+      this.render();
+    };
+    this.root = root;
+    this.onActivate = options == null ? void 0 : options.onActivate;
+    this.onReply = options == null ? void 0 : options.onReply;
+    this.onThreadSummaryActivate = options == null ? void 0 : options.onThreadSummaryActivate;
+    this.connect();
+  }
+  connect() {
+    if (this.connected) {
+      return;
+    }
+    this.connected = true;
+    this.installViewportListeners();
+    this.installReducedMotionListener();
+    this.render();
+  }
+  setOptions(pet) {
+    const nextOptions = normalizePetOptions(pet);
+    this.options = nextOptions;
+    if (!nextOptions) {
+      this.isDragging = false;
+      this.isHovering = false;
+      this.position = null;
+      this.dragPosition = null;
+      this.dragAnimation = null;
+      this.lastDragPosition = null;
+      this.lastDragClientX = null;
+      this.transient = null;
+      this.resolved = null;
+      this.clearRestingDelayTimer();
+      this.removeDragListeners();
+      this.removeOverlay();
+      return;
+    }
+    this.position = readPersistedPosition(
+      DEFAULT_PET_STORAGE_KEY,
+      nextOptions.position.persist
+    );
+    if (nextOptions.behavior === "auto" && !this.prefersReducedMotion) {
+      this.transient = { name: "waving" };
+    }
+    this.resolveCharacter();
+    this.render();
+  }
+  setState(state) {
+    var _a2;
+    const previous = this.lastAutoState;
+    this.lastAutoState = state;
+    this.currentState = state;
+    if (((_a2 = this.options) == null ? void 0 : _a2.behavior) === "auto" && !this.prefersReducedMotion && state === "idle" && (previous === "running" || previous === "review") && !this.transient) {
+      this.transient = { name: "jumping" };
+    } else if (state !== "idle") {
+      this.transient = null;
+    }
+    this.render();
+  }
+  setLocale(locale) {
+    const nextLocale = resolveCopyLocale(locale);
+    if (nextLocale === this.copyLocale) {
+      return;
+    }
+    this.copyLocale = nextLocale;
+    this.copy = PET_OVERLAY_COPY[nextLocale];
+    this.summaryRenderKey = null;
+    this.render();
+  }
+  setThreadSummary(summary) {
+    const previousKey = getThreadSummaryKey(this.summary);
+    const nextKey = getThreadSummaryKey(summary);
+    this.summary = summary;
+    if (!summary) {
+      this.isSummaryCollapsed = false;
+      this.isSummaryExpanded = false;
+      this.isSummaryHovering = false;
+      this.isReplyOpen = false;
+      this.isReplySubmitting = false;
+      this.replyError = null;
+      this.replyDraft = "";
+      this.summaryRenderKey = null;
+      this.removeSummaryElements();
+      return;
+    }
+    if (previousKey !== nextKey) {
+      this.isSummaryCollapsed = false;
+      this.isSummaryExpanded = false;
+      this.isSummaryHovering = false;
+      this.isReplyOpen = false;
+      this.isReplySubmitting = false;
+      this.replyError = null;
+      this.replyDraft = "";
+    }
+    this.render();
+  }
+  setThreadSummaryStatus(status) {
+    if (!this.summary || this.summary.status === status) {
+      return;
+    }
+    this.summary = { ...this.summary, status };
+    this.render();
+  }
+  destroy() {
+    var _a2, _b2, _c2, _d;
+    if (!this.connected) {
+      return;
+    }
+    this.connected = false;
+    this.clearRestingDelayTimer();
+    this.clearTimers();
+    this.removeDragListeners();
+    this.removeOverlay();
+    window.removeEventListener("resize", this.handleViewportChange);
+    (_a2 = window.visualViewport) == null ? void 0 : _a2.removeEventListener(
+      "resize",
+      this.handleViewportChange
+    );
+    (_b2 = window.visualViewport) == null ? void 0 : _b2.removeEventListener(
+      "scroll",
+      this.handleViewportChange
+    );
+    (_d = (_c2 = this.mediaQuery) == null ? void 0 : _c2.removeEventListener) == null ? void 0 : _d.call(
+      _c2,
+      "change",
+      this.handleReducedMotionChange
+    );
+    this.mediaQuery = null;
+  }
+  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);
+  }
+  installReducedMotionListener() {
+    var _a2, _b2;
+    if (!window.matchMedia) {
+      return;
+    }
+    this.mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    this.prefersReducedMotion = this.mediaQuery.matches;
+    (_b2 = (_a2 = this.mediaQuery).addEventListener) == null ? void 0 : _b2.call(
+      _a2,
+      "change",
+      this.handleReducedMotionChange
+    );
+  }
+  resolveCharacter() {
+    if (!this.options) {
+      this.resolved = null;
+      return;
+    }
+    const character = this.options.character;
+    this.resolved = resolvePetCharacter(character);
+  }
+  ensureOverlay() {
+    if (this.overlayElement && this.petElement) {
+      return;
+    }
+    const overlay = document.createElement("div");
+    overlay.setAttribute("data-chatkit-host-pet-layer", "");
+    overlay.style.position = "fixed";
+    overlay.style.inset = "0";
+    overlay.style.pointerEvents = "none";
+    overlay.style.overflow = "visible";
+    const style = document.createElement("style");
+    style.textContent = `
+      @keyframes chatkit-pet-summary-spin {
+        to { transform: rotate(360deg); }
+      }
+    `;
+    const pet = document.createElement("div");
+    pet.setAttribute("data-chatkit-host-pet", "");
+    pet.style.position = "absolute";
+    pet.style.top = "0";
+    pet.style.left = "0";
+    pet.style.pointerEvents = "auto";
+    pet.style.touchAction = "none";
+    pet.style.userSelect = "none";
+    pet.style.willChange = "transform";
+    pet.addEventListener("pointerenter", this.handlePointerEnter);
+    pet.addEventListener("pointerleave", this.handlePointerLeave);
+    pet.addEventListener("pointerdown", this.handlePointerDown);
+    pet.addEventListener("click", this.handleClick);
+    overlay.append(style, pet);
+    this.root.append(overlay);
+    this.overlayElement = overlay;
+    this.petElement = pet;
+  }
+  removeOverlay() {
+    var _a2;
+    this.clearRestingDelayTimer();
+    this.clearTimers();
+    if (this.petElement) {
+      this.petElement.removeEventListener(
+        "pointerenter",
+        this.handlePointerEnter
+      );
+      this.petElement.removeEventListener(
+        "pointerleave",
+        this.handlePointerLeave
+      );
+      this.petElement.removeEventListener("pointerdown", this.handlePointerDown);
+      this.petElement.removeEventListener("click", this.handleClick);
+    }
+    this.isHovering = false;
+    this.removeSummaryElements();
+    (_a2 = this.overlayElement) == null ? void 0 : _a2.remove();
+    this.overlayElement = null;
+    this.petElement = null;
+    this.mediaElement = null;
+  }
+  removeSummaryElements() {
+    var _a2, _b2;
+    (_a2 = this.summaryElement) == null ? void 0 : _a2.remove();
+    (_b2 = this.summaryToggleElement) == null ? void 0 : _b2.remove();
+    this.summaryElement = null;
+    this.summaryToggleElement = null;
+    this.replyInputElement = null;
+    this.summaryRenderKey = null;
+  }
+  getSize() {
+    if (!this.options || !this.resolved) {
+      return { width: 0, height: 0 };
+    }
+    const scale = getRenderScale(this.options.position.scale);
+    const baseSize = {
+      width: this.resolved.atlas.cellWidth,
+      height: this.resolved.atlas.cellHeight
+    };
+    return {
+      width: baseSize.width * scale,
+      height: baseSize.height * scale
+    };
+  }
+  getCurrentPosition(size) {
+    const options = this.options;
+    if (!options) {
+      return { x: 0, y: 0 };
+    }
+    const viewport = getViewportSize();
+    const padding = normalizeBoundsPadding(options.position.boundsPadding);
+    const pin = options.position.pin === void 0 ? "bottom-right" : options.position.pin;
+    const pinnedPosition = pin ? getPinnedPetPosition(pin, size, viewport, padding) : null;
+    return clampPetPosition(
+      this.dragPosition ?? this.position ?? pinnedPosition ?? { x: padding.left, y: padding.top },
+      size,
+      viewport,
+      padding
+    );
+  }
+  persistPosition(nextPosition) {
+    if (!this.options) {
+      return;
+    }
+    const size = this.getSize();
+    const clamped = clampPetPosition(
+      nextPosition,
+      size,
+      getViewportSize(),
+      normalizeBoundsPadding(this.options.position.boundsPadding)
+    );
+    this.position = clamped;
+    writePersistedPosition(
+      DEFAULT_PET_STORAGE_KEY,
+      this.options.position.persist,
+      clamped
+    );
+  }
+  getActiveAnimationName() {
+    if (!this.options) {
+      return "idle";
+    }
+    if (this.isDragging) {
+      return this.dragAnimation ?? "running";
+    }
+    if (this.transient) {
+      return this.transient.name;
+    }
+    if (this.options.behavior === "manual") {
+      return "idle";
+    }
+    return this.currentState;
+  }
+  getActiveAnimationMode() {
+    if (this.isDragging) {
+      return "loop";
+    }
+    return this.transient ? "once" : "loop";
+  }
+  resetAnimationIfNeeded(name, mode) {
+    if (this.activeAnimationName === name && this.activeAnimationMode === mode) {
+      return;
+    }
+    this.clearTimers();
+    this.activeAnimationName = name;
+    this.activeAnimationMode = mode;
+    this.frame = 0;
+    this.completed = false;
+  }
+  render() {
+    if (!this.options || !this.resolved) {
+      this.clearTimers();
+      if (this.petElement) {
+        this.petElement.replaceChildren();
+      }
+      this.removeSummaryElements();
+      this.mediaElement = null;
+      this.activeAnimationName = null;
+      this.activeAnimationMode = null;
+      this.frame = 0;
+      this.completed = false;
+      return;
+    }
+    this.ensureOverlay();
+    const overlay = this.overlayElement;
+    const pet = this.petElement;
+    if (!overlay || !pet) {
+      return;
+    }
+    const size = this.getSize();
+    const position = this.getCurrentPosition(size);
+    const animationName = this.getActiveAnimationName();
+    const animationMode = this.getActiveAnimationMode();
+    this.resetAnimationIfNeeded(animationName, animationMode);
+    overlay.style.zIndex = String(this.options.position.zIndex);
+    pet.style.width = `${size.width}px`;
+    pet.style.height = `${size.height}px`;
+    pet.style.transform = `translate3d(${position.x}px, ${position.y}px, 0)`;
+    pet.style.cursor = this.options.position.draggable ? this.isDragging ? "grabbing" : "grab" : "default";
+    pet.dataset.petAnimation = animationName;
+    pet.setAttribute("aria-label", this.options.ariaLabel);
+    pet.setAttribute("role", "img");
+    this.renderAtlas(animationName, animationMode);
+    this.renderThreadSummary(position, size);
+    this.scheduleNextFrame(animationName, animationMode);
+  }
+  renderThreadSummary(position, size) {
+    var _a2, _b2, _c2;
+    const summary = this.summary;
+    const summaryKey = getThreadSummaryKey(summary);
+    if (!summary || !summaryKey || this.dismissedSummaryKey === summaryKey) {
+      this.removeSummaryElements();
+      return;
+    }
+    if (this.isSummaryCollapsed) {
+      this.renderCollapsedSummary(position, size);
+      return;
+    }
+    const nextRenderKey = [
+      summaryKey,
+      summary.title,
+      summary.message,
+      summary.status,
+      this.copyLocale,
+      this.isSummaryExpanded ? "expanded" : "compact",
+      this.isSummaryHovering ? "hover" : "rest",
+      this.isReplyOpen ? "reply" : "closed",
+      this.isReplySubmitting ? "submitting" : "ready",
+      this.replyError ?? ""
+    ].join("|");
+    if (!this.summaryElement || this.summaryRenderKey !== nextRenderKey) {
+      (_a2 = this.summaryElement) == null ? void 0 : _a2.remove();
+      (_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);
+      this.summaryRenderKey = nextRenderKey;
+      if (this.isReplyOpen && !this.isReplySubmitting) {
+        window.setTimeout(() => {
+          var _a3;
+          return (_a3 = this.replyInputElement) == null ? void 0 : _a3.focus();
+        }, 0);
+      }
+    }
+    this.positionSummaryBubble(position, size);
+  }
+  renderCollapsedSummary(position, size) {
+    var _a2, _b2;
+    (_a2 = this.summaryElement) == null ? void 0 : _a2.remove();
+    this.summaryElement = null;
+    this.summaryRenderKey = null;
+    if (!this.summaryToggleElement) {
+      this.summaryToggleElement = this.createSummaryToggleButton("1");
+      (_b2 = this.overlayElement) == null ? void 0 : _b2.append(this.summaryToggleElement);
+    }
+    this.summaryToggleElement.textContent = "1";
+    this.positionSummaryToggleBadge(position, size);
+  }
+  positionSummaryToggleBadge(position, size) {
+    const badge = this.summaryToggleElement;
+    if (!badge) {
+      return;
+    }
+    const viewport = getViewportSize();
+    const badgeSize = 34;
+    const x = clampNumber(
+      position.x + size.width - badgeSize * 0.35,
+      PET_SUMMARY_MARGIN,
+      viewport.width - badgeSize - PET_SUMMARY_MARGIN
+    );
+    const y = clampNumber(
+      position.y - badgeSize * 0.35,
+      PET_SUMMARY_MARGIN,
+      viewport.height - badgeSize - PET_SUMMARY_MARGIN
+    );
+    badge.style.width = `${badgeSize}px`;
+    badge.style.height = `${badgeSize}px`;
+    badge.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+    badge.style.borderRadius = "999px";
+  }
+  positionSummaryBubble(position, size) {
+    const bubble = this.summaryElement;
+    const toggle = this.summaryToggleElement;
+    if (!bubble || !toggle) {
+      return;
+    }
+    const viewport = getViewportSize();
+    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;
+    const showAbove = aboveY >= PET_SUMMARY_MARGIN;
+    const y = showAbove ? aboveY : clampNumber(
+      position.y + size.height + PET_SUMMARY_GAP,
+      PET_SUMMARY_MARGIN,
+      viewport.height - bubbleHeight - PET_SUMMARY_MARGIN
+    );
+    const x = clampNumber(
+      position.x + size.width / 2 - width / 2,
+      PET_SUMMARY_MARGIN,
+      viewport.width - width - PET_SUMMARY_MARGIN
+    );
+    bubble.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+    this.positionSummaryToggleBadge(position, size);
+  }
+  createSummaryBubble(summary) {
+    const shouldShowReplyButton = this.isSummaryHovering && !this.isReplyOpen;
+    const bubble = document.createElement("div");
+    bubble.setAttribute("data-chatkit-pet-summary", "");
+    bubble.addEventListener("pointerenter", this.handleSummaryPointerEnter);
+    bubble.addEventListener("pointerleave", this.handleSummaryPointerLeave);
+    bubble.addEventListener("click", this.handleSummaryClick);
+    bubble.style.position = "absolute";
+    bubble.style.top = "0";
+    bubble.style.left = "0";
+    bubble.style.boxSizing = "border-box";
+    bubble.style.pointerEvents = "auto";
+    bubble.style.padding = "12px 14px";
+    bubble.style.paddingBottom = "12px";
+    bubble.style.border = "1px solid rgba(148, 163, 184, 0.22)";
+    bubble.style.borderRadius = "22px";
+    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.backdropFilter = "blur(10px)";
+    const header = document.createElement("div");
+    header.style.display = "flex";
+    header.style.alignItems = "center";
+    header.style.gap = "8px";
+    if (this.isSummaryHovering || this.isReplyOpen) {
+      header.append(
+        this.createSummaryActionButton(
+          "x",
+          this.copy.hideMessage,
+          this.handleSummaryDelete
+        )
+      );
+    }
+    const title = document.createElement("div");
+    title.textContent = summary.title;
+    title.style.minWidth = "0";
+    title.style.flex = "1";
+    title.style.overflow = "hidden";
+    title.style.textOverflow = "ellipsis";
+    title.style.whiteSpace = "nowrap";
+    title.style.fontWeight = "700";
+    title.style.fontSize = "15px";
+    header.append(title);
+    if (this.isSummaryHovering || this.isReplyOpen) {
+      header.append(
+        this.createSummaryActionButton(
+          this.isSummaryExpanded ? "-" : ">",
+          this.isSummaryExpanded ? this.copy.collapseMessage : this.copy.expandMessage,
+          this.handleSummaryExpandToggle
+        )
+      );
+    } else {
+      header.append(this.createStatusIcon(summary.status));
+    }
+    const message = document.createElement("div");
+    message.textContent = summary.message;
+    message.style.marginTop = "4px";
+    message.style.fontWeight = "400";
+    message.style.color = "#374151";
+    message.style.overflow = "hidden";
+    if (this.isSummaryExpanded) {
+      message.style.maxHeight = "7em";
+      message.style.overflowY = "auto";
+    } else {
+      message.style.display = "-webkit-box";
+      message.style.setProperty("-webkit-line-clamp", "2");
+      message.style.setProperty("-webkit-box-orient", "vertical");
+    }
+    bubble.append(header, message);
+    if (shouldShowReplyButton) {
+      const reply = this.createTextButton(
+        this.copy.replyButton,
+        this.handleReplyOpen
+      );
+      reply.style.position = "absolute";
+      reply.style.right = "14px";
+      reply.style.bottom = "10px";
+      bubble.append(reply);
+    }
+    if (this.isReplyOpen) {
+      bubble.append(this.createReplyForm());
+    }
+    return bubble;
+  }
+  createSummaryToggleButton(label) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = label;
+    button.title = label === "1" ? this.copy.restoreMessage : this.copy.collapseMessage;
+    button.addEventListener("click", stopEventPropagation);
+    button.addEventListener("click", this.handleSummaryCollapseToggle);
+    button.style.position = "absolute";
+    button.style.top = "0";
+    button.style.left = "0";
+    button.style.pointerEvents = "auto";
+    button.style.border = "1px solid rgba(148, 163, 184, 0.28)";
+    button.style.background = "rgba(248, 250, 252, 0.94)";
+    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.display = "flex";
+    button.style.alignItems = "center";
+    button.style.justifyContent = "center";
+    return button;
+  }
+  createStatusIcon(status) {
+    const icon = document.createElement("span");
+    icon.setAttribute("aria-hidden", "true");
+    icon.style.display = "inline-flex";
+    icon.style.width = "16px";
+    icon.style.height = "16px";
+    icon.style.alignItems = "center";
+    icon.style.justifyContent = "center";
+    icon.style.flex = "0 0 auto";
+    if (status === "running") {
+      icon.style.border = "2px solid rgba(71, 85, 105, 0.32)";
+      icon.style.borderTopColor = "#64748b";
+      icon.style.borderRadius = "999px";
+      icon.style.animation = "chatkit-pet-summary-spin 900ms linear infinite";
+      return icon;
+    }
+    icon.style.borderRadius = "999px";
+    icon.style.fontSize = "12px";
+    icon.style.fontWeight = "700";
+    if (status === "failed") {
+      icon.textContent = "!";
+      icon.style.background = "#fee2e2";
+      icon.style.color = "#b91c1c";
+      return icon;
+    }
+    icon.textContent = "";
+    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.borderLeft = "2px solid #22c55e";
+    check.style.borderBottom = "2px solid #22c55e";
+    check.style.transform = "rotate(-45deg) translate(1px, -1px)";
+    icon.append(check);
+    return icon;
+  }
+  createSummaryActionButton(label, title, onClick) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = label;
+    button.title = title;
+    button.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick();
+    });
+    button.style.width = "26px";
+    button.style.height = "26px";
+    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';
+    return button;
+  }
+  createTextButton(label, onClick) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = label;
+    button.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick();
+    });
+    button.style.border = "1px solid rgba(148, 163, 184, 0.28)";
+    button.style.borderRadius = "999px";
+    button.style.background = "rgba(248, 250, 252, 0.95)";
+    button.style.color = "#334155";
+    button.style.cursor = "pointer";
+    button.style.padding = "3px 10px";
+    button.style.font = '600 12px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+    return button;
+  }
+  createReplyForm() {
+    const form = document.createElement("form");
+    form.addEventListener("click", stopEventPropagation);
+    form.addEventListener("submit", this.handleReplySubmit);
+    form.addEventListener("keydown", this.handleReplyKeyDown);
+    form.style.display = "flex";
+    form.style.gap = "6px";
+    form.style.alignItems = "center";
+    form.style.marginTop = "8px";
+    const input = document.createElement("input");
+    input.type = "text";
+    input.value = this.replyDraft;
+    input.disabled = this.isReplySubmitting;
+    input.placeholder = this.copy.replyPlaceholder;
+    input.addEventListener("input", this.handleReplyInput);
+    input.style.minWidth = "0";
+    input.style.flex = "1";
+    input.style.border = "1px solid rgba(148, 163, 184, 0.35)";
+    input.style.borderRadius = "999px";
+    input.style.padding = "6px 10px";
+    input.style.font = '400 13px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+    this.replyInputElement = input;
+    const send = document.createElement("button");
+    send.type = "submit";
+    send.textContent = this.isReplySubmitting ? this.copy.sendingButton : this.copy.sendButton;
+    send.disabled = this.isReplySubmitting;
+    send.style.border = "0";
+    send.style.borderRadius = "999px";
+    send.style.background = "#22c55e";
+    send.style.color = "#052e16";
+    send.style.cursor = this.isReplySubmitting ? "default" : "pointer";
+    send.style.padding = "6px 10px";
+    send.style.font = '700 12px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+    form.append(input, send);
+    if (this.replyError) {
+      const error = document.createElement("div");
+      error.textContent = this.copy.sendFailed;
+      error.style.flexBasis = "100%";
+      error.style.color = "#b91c1c";
+      error.style.fontSize = "12px";
+      form.style.flexWrap = "wrap";
+      form.append(error);
+    }
+    return form;
+  }
+  renderAtlas(animationName, animationMode) {
+    var _a2;
+    if (!this.petElement || ((_a2 = this.resolved) == null ? void 0 : _a2.kind) !== "atlas" || !this.options) {
+      return;
+    }
+    if (!(this.mediaElement instanceof HTMLDivElement)) {
+      const frame = document.createElement("div");
+      frame.setAttribute("aria-hidden", "true");
+      this.petElement.replaceChildren(frame);
+      this.mediaElement = frame;
+    }
+    const frameElement = this.mediaElement;
+    const atlas = this.resolved.atlas;
+    const definition = atlas.animations[animationName] ?? atlas.animations.idle;
+    const safeFrame = animationMode === "once" && this.completed ? Math.max(0, definition.frames - 1) : Math.min(this.frame, Math.max(0, definition.frames - 1));
+    const scale = getRenderScale(this.options.position.scale);
+    const sourceWidth = atlas.cellWidth;
+    const sourceHeight = atlas.cellHeight;
+    const backgroundWidth = atlas.columns * sourceWidth;
+    const backgroundHeight = atlas.rows * sourceHeight;
+    frameElement.style.width = `${sourceWidth}px`;
+    frameElement.style.height = `${sourceHeight}px`;
+    frameElement.style.overflow = "hidden";
+    frameElement.style.transform = `scale(${scale})`;
+    frameElement.style.transformOrigin = "top left";
+    frameElement.style.pointerEvents = "none";
+    frameElement.style.backgroundImage = `url("${escapeCssUrl(
+      this.resolved.src
+    )}")`;
+    frameElement.style.backgroundRepeat = "no-repeat";
+    frameElement.style.backgroundSize = `${backgroundWidth}px ${backgroundHeight}px`;
+    frameElement.style.backgroundPosition = `${-safeFrame * sourceWidth}px ${-definition.row * sourceHeight}px`;
+    frameElement.style.imageRendering = this.options.imageRendering;
+    frameElement.dataset.petFrame = String(safeFrame);
+  }
+  scheduleNextFrame(animationName, animationMode) {
+    if (this.prefersReducedMotion || this.completed || !this.resolved) {
+      this.clearTimers();
+      return;
+    }
+    if (this.frameTimer !== null) {
+      return;
+    }
+    const atlas = this.resolved.atlas;
+    const definition = atlas.animations[animationName] ?? atlas.animations.idle;
+    const duration = definition.frameDurations[this.frame] ?? definition.frameDurations[definition.frameDurations.length - 1] ?? 150;
+    const baseDuration = duration * PET_FRAME_DURATION_MULTIPLIER;
+    const effectiveDuration = this.isHovering || this.isDragging ? baseDuration : baseDuration * PET_RESTING_FRAME_DURATION_MULTIPLIER;
+    this.frameTimer = window.setTimeout(() => {
+      this.frameTimer = null;
+      const nextFrame = this.frame + 1;
+      if (nextFrame >= definition.frames) {
+        if (animationMode === "once") {
+          this.completed = true;
+          this.frame = Math.max(0, definition.frames - 1);
+          this.finishTransient();
+          return;
+        }
+        this.frame = 0;
+        this.render();
+        return;
+      }
+      this.frame = nextFrame;
+      this.render();
+    }, effectiveDuration);
+  }
+  clearTimers() {
+    if (this.frameTimer !== null) {
+      window.clearTimeout(this.frameTimer);
+      this.frameTimer = null;
+    }
+  }
+  clearRestingDelayTimer() {
+    if (this.restingDelayTimer !== null) {
+      window.clearTimeout(this.restingDelayTimer);
+      this.restingDelayTimer = null;
+    }
+  }
+  finishTransient() {
+    this.transient = null;
+    this.activeAnimationName = null;
+    this.activeAnimationMode = null;
+    this.render();
+  }
+  rescheduleAnimation() {
+    this.clearTimers();
+    this.render();
+  }
+  enterRestingAfterDelay() {
+    this.clearRestingDelayTimer();
+    this.isHovering = true;
+    this.restingDelayTimer = window.setTimeout(() => {
+      this.restingDelayTimer = null;
+      if (this.isDragging) {
+        return;
+      }
+      this.isHovering = false;
+      this.rescheduleAnimation();
+    }, PET_RESTING_DELAY_MS);
+  }
+  isPointerOverPet(event) {
+    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;
+  }
+  async submitReply() {
+    var _a2;
+    const text = this.replyDraft.trim();
+    if (!text || this.isReplySubmitting) {
+      return;
+    }
+    this.isReplySubmitting = true;
+    this.replyError = null;
+    this.render();
+    try {
+      await ((_a2 = this.onReply) == null ? void 0 : _a2.call(this, text));
+      this.replyDraft = "";
+      this.isReplyOpen = false;
+      this.isSummaryHovering = false;
+    } catch {
+      this.replyError = "Failed to send";
+    } finally {
+      this.isReplySubmitting = false;
+      this.render();
+    }
+  }
+  getNextDragPosition(event) {
+    if (!this.options) {
+      return { x: 0, y: 0 };
+    }
+    return clampPetPosition(
+      {
+        x: event.clientX - this.dragOffset.x,
+        y: event.clientY - this.dragOffset.y
+      },
+      this.getSize(),
+      getViewportSize(),
+      normalizeBoundsPadding(this.options.position.boundsPadding)
+    );
+  }
+  installDragListeners() {
+    window.addEventListener("pointermove", this.handlePointerMove);
+    window.addEventListener("pointerup", this.handlePointerUp, { once: true });
+    window.addEventListener("pointercancel", this.handlePointerUp, {
+      once: true
+    });
+  }
+  removeDragListeners() {
+    window.removeEventListener("pointermove", this.handlePointerMove);
+    window.removeEventListener("pointerup", this.handlePointerUp);
+    window.removeEventListener("pointercancel", this.handlePointerUp);
+  }
+}
 function getInnerOptions(options) {
   return removeMethods(options);
 }
@@ -906,7 +2337,15 @@ class ChatKitElementBase extends (_c = HTMLElement, _focusComposer_dec = [requir
     __privateAdd(this, _frameUrl);
     __privateAdd(this, _frame);
     __privateAdd(this, _wrapper);
+    __privateAdd(this, _launcherCloseButton);
+    __privateAdd(this, _launcherOpen, false);
+    __privateAdd(this, _framePetOptionsOverride);
     __privateAdd(this, _shadow, this.attachShadow({ mode: "open" }));
+    __privateAdd(this, _petOverlay, new PetOverlay(__privateGet(this, _shadow), {
+      onActivate: () => __privateMethod(this, _ChatKitElementBase_instances, handlePetActivate_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)
+    }));
     __privateAdd(this, _resolveLoaded);
     __privateAdd(this, _loaded, new Promise((resolve) => {
       __privateSet(this, _resolveLoaded, resolve);
@@ -1001,6 +2440,9 @@ class ChatKitElementBase extends (_c = HTMLElement, _focusComposer_dec = [requir
         }
       }
     }));
+    __privateAdd(this, _handleLauncherClose, () => {
+      __privateMethod(this, _ChatKitElementBase_instances, setLauncherOpen_fn).call(this, false);
+    });
     __privateAdd(this, _handleFrameLoad, () => {
       var _a2;
       this.dataset.loaded = "true";
@@ -1018,6 +2460,7 @@ class ChatKitElementBase extends (_c = HTMLElement, _focusComposer_dec = [requir
     this.capabilities = getCapabilities(profile);
   }
   connectedCallback() {
+    __privateGet(this, _petOverlay).connect();
     const style = document.createElement("style");
     style.textContent = `
       :host {
@@ -1025,6 +2468,10 @@ class ChatKitElementBase extends (_c = HTMLElement, _focusComposer_dec = [requir
         position: relative;
         height: 100%;
         width: 100%;
+        overflow: visible;
+      }
+      :host([data-display-mode="pet"]) {
+        display: contents;
       }
       .ck-iframe {
         border: none;
@@ -1043,12 +2490,115 @@ class ChatKitElementBase extends (_c = HTMLElement, _focusComposer_dec = [requir
         overflow: hidden;
         opacity: 0;
       }
+      .ck-launcher-close {
+        display: none;
+      }
+      :host([data-display-mode="pet"]) .ck-wrapper {
+        position: fixed;
+        inset: auto 16px 16px auto;
+        width: min(420px, calc(100vw - 32px));
+        height: min(720px, calc(100vh - 32px));
+        max-height: calc(100vh - 32px);
+        overflow: visible;
+        border: 1px solid rgba(148, 163, 184, 0.35);
+        border-radius: 18px;
+        background: Canvas;
+        box-shadow:
+          0 24px 80px rgba(15, 23, 42, 0.22),
+          0 0 0 1px rgba(15, 23, 42, 0.04);
+        opacity: 0;
+        pointer-events: none;
+        transform: translateY(12px) scale(0.98);
+        transition:
+          opacity 160ms ease,
+          transform 160ms ease;
+        z-index: 39;
+      }
+      :host([data-display-mode="pet"][data-chat-open="true"]) .ck-wrapper {
+        opacity: 1;
+        pointer-events: auto;
+        transform: translateY(0) scale(1);
+      }
+      :host([data-display-mode="pet"]) .ck-iframe {
+        border-radius: inherit;
+      }
+      :host([data-display-mode="pet"]) .ck-launcher-close {
+        display: inline-flex;
+        position: absolute;
+        top: -10px;
+        right: -10px;
+        z-index: 2;
+        width: 28px;
+        height: 28px;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid rgba(148, 163, 184, 0.45);
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.96);
+        color: #475569;
+        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
+        cursor: pointer;
+        font: inherit;
+        font-size: 0;
+        line-height: 1;
+      }
+      :host([data-display-mode="pet"]) .ck-launcher-close::before,
+      :host([data-display-mode="pet"]) .ck-launcher-close::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 14px;
+        height: 2px;
+        border-radius: 999px;
+        background: currentColor;
+        transform: translate(-50%, -50%) rotate(45deg);
+      }
+      :host([data-display-mode="pet"]) .ck-launcher-close::after {
+        transform: translate(-50%, -50%) rotate(-45deg);
+      }
+      :host([data-display-mode="pet"]) .ck-launcher-close:hover {
+        background: #fff;
+        color: #0f172a;
+      }
       :host([data-color-scheme="dark"]) .ck-iframe {
         color-scheme: dark only;
       }
+      :host([data-color-scheme="dark"][data-display-mode="pet"]) .ck-wrapper {
+        border-color: rgba(148, 163, 184, 0.28);
+        background: #020617;
+        box-shadow:
+          0 24px 80px rgba(0, 0, 0, 0.5),
+          0 0 0 1px rgba(255, 255, 255, 0.06);
+      }
+      :host([data-color-scheme="dark"][data-display-mode="pet"]) .ck-launcher-close {
+        background: rgba(15, 23, 42, 0.88);
+        border-color: rgba(148, 163, 184, 0.32);
+        color: #cbd5e1;
+      }
+      :host([data-color-scheme="dark"][data-display-mode="pet"]) .ck-launcher-close:hover {
+        background: #1e293b;
+        color: #f8fafc;
+      }
       :host([data-loaded="true"]) .ck-wrapper {
         opacity: 1;
       }
+      :host([data-display-mode="pet"]:not([data-chat-open="true"])) .ck-wrapper {
+        opacity: 0;
+      }
+      @media (max-width: 520px) {
+        :host([data-display-mode="pet"]) .ck-wrapper {
+          inset: auto 8px 8px 8px;
+          width: auto;
+          height: min(680px, calc(100vh - 16px));
+          max-height: calc(100vh - 16px);
+          border-radius: 16px;
+        }
+        :host([data-display-mode="pet"]) .ck-launcher-close {
+          top: -8px;
+          right: 8px;
+        }
+      }
     `;
     const frame = document.createElement("iframe");
     frame.className = "ck-iframe";
@@ -1064,6 +2614,13 @@ class ChatKitElementBase extends (_c = HTMLElement, _focusComposer_dec = [requir
     wrapper.className = "ck-wrapper";
     wrapper.appendChild(frame);
     __privateSet(this, _wrapper, wrapper);
+    const closeButton = document.createElement("button");
+    closeButton.className = "ck-launcher-close";
+    closeButton.type = "button";
+    closeButton.setAttribute("aria-label", "Close chat");
+    closeButton.addEventListener("click", __privateGet(this, _handleLauncherClose));
+    wrapper.appendChild(closeButton);
+    __privateSet(this, _launcherCloseButton, closeButton);
     __privateGet(this, _shadow).append(style);
     __privateGet(this, _messenger).on("left_header_icon_click", () => {
       var _a2, _b2, _c2;
@@ -1074,6 +2631,18 @@ class ChatKitElementBase extends (_c = HTMLElement, _focusComposer_dec = [requir
       (_c2 = (_b2 = (_a2 = __privateGet(this, _opts)) == null ? void 0 : _a2.header) == null ? void 0 : _b2.rightAction) == null ? void 0 : _c2.onClick();
     });
     __privateGet(this, _messenger).on("public_event", ([event, data]) => {
+      if (event === "log") {
+        const payload = parseThreadSummaryLogPayload(data);
+        if (payload) {
+          __privateGet(this, _petOverlay).setThreadSummary(payload.summary);
+        }
+      } else if (event === "response.start") {
+        __privateGet(this, _petOverlay).setThreadSummaryStatus("running");
+      } else if (event === "response.end") {
+        __privateGet(this, _petOverlay).setThreadSummaryStatus("completed");
+      } else if (event === "response.stop") {
+        __privateGet(this, _petOverlay).setThreadSummaryStatus("completed");
+      }
       if (!this.capabilities.events.has(event)) return;
       if (event === "error" && "error" in data) {
         const error = fromPossibleFrameSafeError(data.error);
@@ -1087,6 +2656,19 @@ class ChatKitElementBase extends (_c = HTMLElement, _focusComposer_dec = [requir
       }
       this.dispatchEvent(new CustomEvent(`chatkit.${event}`, { detail: data }));
     });
+    __privateGet(this, _messenger).on("pet_state_change", (data) => {
+      const payload = parsePetStateChangePayload(data);
+      if (payload) {
+        __privateGet(this, _petOverlay).setState(payload.state);
+      }
+    });
+    __privateGet(this, _messenger).on("pet_options_change", (data) => {
+      const payload = parsePetOptionsChangePayload(data);
+      if (payload) {
+        __privateSet(this, _framePetOptionsOverride, payload.pet);
+        __privateGet(this, _petOverlay).setOptions(__privateMethod(this, _ChatKitElementBase_instances, getOverlayPetOptions_fn).call(this));
+      }
+    });
     __privateGet(this, _messenger).on("unmount", () => {
       if (__privateGet(this, _wrapper) && __privateGet(this, _shadow).contains(__privateGet(this, _wrapper))) {
         __privateGet(this, _shadow).removeChild(__privateGet(this, _wrapper));
@@ -1109,16 +2691,25 @@ class ChatKitElementBase extends (_c = HTMLElement, _focusComposer_dec = [requir
     }
   }
   disconnectedCallback() {
-    var _a2;
+    var _a2, _b2;
     (_a2 = __privateGet(this, _frame)) == null ? void 0 : _a2.removeEventListener("load", __privateGet(this, _handleFrameLoad));
+    (_b2 = __privateGet(this, _launcherCloseButton)) == null ? void 0 : _b2.removeEventListener(
+      "click",
+      __privateGet(this, _handleLauncherClose)
+    );
     __privateGet(this, _messenger).disconnect();
+    __privateGet(this, _petOverlay).destroy();
   }
   applySanitizedOptions(newOptions) {
     __privateSet(this, _opts, newOptions);
+    __privateGet(this, _petOverlay).setLocale(newOptions.locale);
+    __privateGet(this, _petOverlay).setOptions(__privateMethod(this, _ChatKitElementBase_instances, getOverlayPetOptions_fn).call(this));
     if (__privateGet(this, _initialized)) {
       __privateMethod(this, _ChatKitElementBase_instances, setOptionsDataAttributes_fn).call(this, __privateGet(this, _opts));
       __privateGet(this, _loaded).then(() => {
-        __privateGet(this, _messenger).commands.setOptions(getInnerOptions(newOptions));
+        __privateGet(this, _messenger).commands.setOptions(
+          getInnerOptions(__privateMethod(this, _ChatKitElementBase_instances, getFrameOptions_fn).call(this, newOptions))
+        );
       });
     } else {
       __privateMethod(this, _ChatKitElementBase_instances, maybeInit_fn).call(this);
@@ -1190,7 +2781,11 @@ _opts = new WeakMap();
 _frameUrl = new WeakMap();
 _frame = new WeakMap();
 _wrapper = new WeakMap();
+_launcherCloseButton = new WeakMap();
+_launcherOpen = new WeakMap();
+_framePetOptionsOverride = new WeakMap();
 _shadow = new WeakMap();
+_petOverlay = new WeakMap();
 _resolveLoaded = new WeakMap();
 _loaded = new WeakMap();
 _messenger = new WeakMap();
@@ -1202,7 +2797,96 @@ emitAndThrow_fn = function(error) {
 setOptionsDataAttributes_fn = function(options) {
   var _a2;
   this.dataset.colorScheme = typeof options.theme === "string" ? options.theme : ((_a2 = options.theme) == null ? void 0 : _a2.colorScheme) ?? "light";
+  this.dataset.displayMode = __privateMethod(this, _ChatKitElementBase_instances, getDisplayMode_fn).call(this, options);
+  if (__privateMethod(this, _ChatKitElementBase_instances, getDisplayMode_fn).call(this, options) !== "pet") {
+    __privateMethod(this, _ChatKitElementBase_instances, setLauncherOpen_fn).call(this, false);
+  }
+};
+getDisplayMode_fn = function(options = __privateGet(this, _opts)) {
+  return (options == null ? void 0 : options.displayMode) === "pet" ? "pet" : "chat";
+};
+getConfiguredPetOptions_fn = function(options = __privateGet(this, _opts)) {
+  if (!options) {
+    return null;
+  }
+  if (__privateMethod(this, _ChatKitElementBase_instances, getDisplayMode_fn).call(this, options) === "pet" && !normalizePetOptions(options.pet ?? null)) {
+    return true;
+  }
+  return options.pet ?? null;
+};
+getOverlayPetOptions_fn = function() {
+  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;
+  }
+  return __privateMethod(this, _ChatKitElementBase_instances, resolveOverlayPetOptions_fn).call(this, pet);
+};
+resolvePetAssetUrl_fn = function(src) {
+  try {
+    const base = new URL(
+      __privateGet(this, _frameUrl) ?? window.location.href,
+      window.location.origin
+    );
+    return new URL(src, base).toString();
+  } catch {
+    return src;
+  }
+};
+resolveOverlayPetOptions_fn = function(pet) {
+  const normalized = normalizePetOptions(pet ?? null);
+  if (!normalized) {
+    return null;
+  }
+  return {
+    character: {
+      ...normalized.character,
+      src: __privateMethod(this, _ChatKitElementBase_instances, resolvePetAssetUrl_fn).call(this, normalized.character.src)
+    },
+    position: normalized.position,
+    behavior: normalized.behavior,
+    ariaLabel: normalized.ariaLabel,
+    imageRendering: normalized.imageRendering
+  };
+};
+getFrameOptions_fn = function(options) {
+  const pet = __privateMethod(this, _ChatKitElementBase_instances, getConfiguredPetOptions_fn).call(this, options);
+  if (pet === (options.pet ?? null)) {
+    return options;
+  }
+  const nextOptions = { ...options };
+  if (pet === null) {
+    delete nextOptions.pet;
+  } else {
+    nextOptions.pet = pet;
+  }
+  return nextOptions;
+};
+setLauncherOpen_fn = function(open) {
+  __privateSet(this, _launcherOpen, open);
+  if (open) {
+    this.dataset.chatOpen = "true";
+  } else {
+    delete this.dataset.chatOpen;
+  }
+};
+handlePetActivate_fn = function() {
+  if (__privateMethod(this, _ChatKitElementBase_instances, getDisplayMode_fn).call(this) !== "pet") {
+    return;
+  }
+  __privateMethod(this, _ChatKitElementBase_instances, setLauncherOpen_fn).call(this, true);
+  __privateGet(this, _loaded).then(() => this.focusComposer()).catch(() => void 0);
+};
+handlePetReply_fn = async function(text) {
+  await this.sendUserMessage({ text });
+};
+handlePetThreadSummaryActivate_fn = async function(threadId) {
+  if (__privateMethod(this, _ChatKitElementBase_instances, getDisplayMode_fn).call(this) === "pet") {
+    __privateMethod(this, _ChatKitElementBase_instances, setLauncherOpen_fn).call(this, true);
+  }
+  await this.setThreadId(threadId);
+  await this.focusComposer();
 };
+_handleLauncherClose = new WeakMap();
 getFrameUrl_fn = function() {
   if (!__privateGet(this, _frameUrl)) {
     throw new IntegrationError2(
@@ -1242,7 +2926,7 @@ maybeInit_fn = function() {
   const frameURL = new URL(__privateMethod(this, _ChatKitElementBase_instances, getFrameUrl_fn).call(this), window.location.origin);
   __privateGet(this, _messenger).setTargetOrigin(frameURL.origin);
   frameURL.hash = encodeBase64({
-    options: getInnerOptions(__privateGet(this, _opts)),
+    options: getInnerOptions(__privateMethod(this, _ChatKitElementBase_instances, getFrameOptions_fn).call(this, __privateGet(this, _opts))),
     referrer: window.location.origin,
     profile: this.profile
   });