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

package/dist/xpert-chatkit.umd.cjs

@@ -51,7 +51,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 
-  var _a, _b, _setTrainingOptOut_dec, _hideHistory_dec, _showHistory_dec, _sendCustomAction_dec, _shareThread_dec, _setThreadId_dec, _setComposerValue_dec, _sendUserMessage_dec, _fetchUpdates_dec, _focusComposer_dec, _c, _opts, _frameUrl, _frame, _wrapper, _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());
@@ -869,6 +869,252 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       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;
@@ -887,6 +1133,1191 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     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);
   }
@@ -910,7 +2341,15 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       __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);
@@ -1005,6 +2444,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           }
         }
       }));
+      __privateAdd(this, _handleLauncherClose, () => {
+        __privateMethod(this, _ChatKitElementBase_instances, setLauncherOpen_fn).call(this, false);
+      });
       __privateAdd(this, _handleFrameLoad, () => {
         var _a2;
         this.dataset.loaded = "true";
@@ -1022,6 +2464,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       this.capabilities = getCapabilities(profile);
     }
     connectedCallback() {
+      __privateGet(this, _petOverlay).connect();
       const style = document.createElement("style");
       style.textContent = `
       :host {
@@ -1029,6 +2472,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         position: relative;
         height: 100%;
         width: 100%;
+        overflow: visible;
+      }
+      :host([data-display-mode="pet"]) {
+        display: contents;
       }
       .ck-iframe {
         border: none;
@@ -1047,12 +2494,115 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         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";
@@ -1068,6 +2618,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       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;
@@ -1078,6 +2635,18 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         (_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);
@@ -1091,6 +2660,19 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         }
         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));
@@ -1113,16 +2695,25 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       }
     }
     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);
@@ -1194,7 +2785,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   _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();
@@ -1206,7 +2801,96 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   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 IntegrationError(
@@ -1246,7 +2930,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     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
     });