cevro-messenger-sdk 0.1.19 → 0.1.21

package/dist/esm/index.js

@@ -5065,10 +5065,13 @@ class MessageList {
     __publicField(this, "element", null);
     __publicField(this, "messagesContainer", null);
     __publicField(this, "messages", /* @__PURE__ */ new Map());
+    __publicField(this, "messageData", /* @__PURE__ */ new Map());
     __publicField(this, "onQuickAction", null);
     __publicField(this, "autoScroll", true);
     __publicField(this, "closedMessageElement", null);
     __publicField(this, "currentAgent", null);
+    __publicField(this, "brandLogoUrl");
+    __publicField(this, "firstAdminMessageId", null);
     __publicField(this, "lastMessageBody");
     __publicField(this, "lastMessageAt");
     __publicField(this, "onScrollTopCallback", null);
@@ -5110,6 +5113,26 @@ class MessageList {
   setAgent(agent) {
     this.currentAgent = agent;
   }
+  /**
+   * Set the brand logo shown as the avatar of the conversation's first message only
+   */
+  setBrandLogoUrl(url) {
+    this.brandLogoUrl = url;
+    this.refreshFirstAdminMessageAvatar();
+  }
+  /**
+   * Re-render the message currently holding the first-admin-message slot, e.g.
+   * after the brand logo changes mid-session. No-ops if none is tracked yet.
+   */
+  refreshFirstAdminMessageAvatar() {
+    if (!this.firstAdminMessageId) return;
+    const message = this.messageData.get(this.firstAdminMessageId);
+    const el = this.messages.get(this.firstAdminMessageId);
+    if (!message || !el) return;
+    const rebuiltEl = this.createMessageElement(message, true);
+    el.replaceWith(rebuiltEl);
+    this.messages.set(this.firstAdminMessageId, rebuiltEl);
+  }
   /**
    * Render the message list
    */
@@ -5188,7 +5211,12 @@ class MessageList {
       this.updateMessage(message);
       return;
     }
-    const messageEl = this.createMessageElement(message);
+    this.messageData.set(message.id, message);
+    const isFirst = message.inbound !== true && this.firstAdminMessageId === null;
+    if (isFirst) {
+      this.firstAdminMessageId = message.id;
+    }
+    const messageEl = this.createMessageElement(message, isFirst);
     if (animate) {
       messageEl.classList.add("cevro-message--animate");
     }
@@ -5209,11 +5237,28 @@ class MessageList {
    */
   prependMessages(messages) {
     if (!this.messagesContainer || messages.length === 0) return;
-    const anchor = this.messagesContainer.firstElementChild;
+    let anchor = this.messagesContainer.firstElementChild;
     const anchorOffset = anchor ? anchor.offsetTop - this.messagesContainer.scrollTop : 0;
+    const earliestAdminMessage = messages.find((m) => m.inbound !== true);
+    if (earliestAdminMessage && earliestAdminMessage.id !== this.firstAdminMessageId) {
+      const previousFirstId = this.firstAdminMessageId;
+      this.firstAdminMessageId = earliestAdminMessage.id;
+      const previousFirstMessage = previousFirstId ? this.messageData.get(previousFirstId) : void 0;
+      const previousFirstEl = previousFirstId ? this.messages.get(previousFirstId) : void 0;
+      if (previousFirstId && previousFirstMessage && previousFirstEl) {
+        const rebuiltEl = this.createMessageElement(previousFirstMessage, false);
+        previousFirstEl.replaceWith(rebuiltEl);
+        this.messages.set(previousFirstId, rebuiltEl);
+        if (anchor === previousFirstEl) {
+          anchor = rebuiltEl;
+        }
+      }
+    }
     for (const message of messages) {
       if (this.messages.has(message.id)) continue;
-      const messageEl = this.createMessageElement(message);
+      this.messageData.set(message.id, message);
+      const isFirst = message.id === this.firstAdminMessageId;
+      const messageEl = this.createMessageElement(message, isFirst);
       this.messagesContainer.insertBefore(messageEl, anchor);
       this.messages.set(message.id, messageEl);
     }
@@ -5240,10 +5285,16 @@ class MessageList {
     const lookupId = oldId || message.id;
     const existingEl = this.messages.get(lookupId);
     if (!existingEl || !this.messagesContainer) return;
-    const newEl = this.createMessageElement(message);
+    if (this.firstAdminMessageId === lookupId) {
+      this.firstAdminMessageId = message.id;
+    }
+    const isFirst = this.firstAdminMessageId === message.id;
+    this.messageData.set(message.id, message);
+    const newEl = this.createMessageElement(message, isFirst);
     this.messagesContainer.replaceChild(newEl, existingEl);
     if (oldId && oldId !== message.id) {
       this.messages.delete(oldId);
+      this.messageData.delete(oldId);
     }
     this.messages.set(message.id, newEl);
   }
@@ -5270,20 +5321,44 @@ class MessageList {
     if (!messageEl) return;
     messageEl.remove();
     this.messages.delete(messageId);
+    this.messageData.delete(messageId);
+    if (this.firstAdminMessageId === messageId) {
+      this.firstAdminMessageId = null;
+      this.promoteNextAdminMessageToFirst();
+    }
+  }
+  /**
+   * Give the first-message treatment to the earliest remaining admin message
+   * (by DOM position), e.g. after the previous holder is removed.
+   */
+  promoteNextAdminMessageToFirst() {
+    if (!this.messagesContainer) return;
+    for (const child of Array.from(this.messagesContainer.children)) {
+      const id = child.dataset.messageId;
+      if (!id) continue;
+      const message = this.messageData.get(id);
+      if (!message || message.inbound === true) continue;
+      this.firstAdminMessageId = id;
+      const rebuiltEl = this.createMessageElement(message, true);
+      child.replaceWith(rebuiltEl);
+      this.messages.set(id, rebuiltEl);
+      return;
+    }
   }
   /**
    * Create message element
    */
-  createMessageElement(message) {
-    var _a, _b, _c, _d, _e;
+  createMessageElement(message, isFirst = false) {
+    var _a, _b, _c, _d, _e, _f;
     const isMyMessage = message.inbound === true;
     const wrapper = createElement("div", {
       className: `cevro-message ${isMyMessage ? "cevro-message--outbound" : "cevro-message--inbound"}`,
       "data-message-id": message.id,
       "data-testid": `message-${message.id}`
     });
+    const showBrandLogo = !isMyMessage && isFirst && !!this.brandLogoUrl && isValidUrl(this.brandLogoUrl);
+    const isHuman = !isMyMessage && !showBrandLogo && message.senderType === "human";
     if (!isMyMessage) {
-      const isHuman = message.senderType === "human";
       const avatar = createElement("div", {
         className: `cevro-message__avatar${isHuman ? " cevro-message__avatar--human" : ""}`
       });
@@ -5295,22 +5370,26 @@ class MessageList {
         });
         initialsEl.textContent = initials;
         avatar.appendChild(initialsEl);
-      } else if (((_a = this.currentAgent) == null ? void 0 : _a.avatarUrl) && isValidUrl(this.currentAgent.avatarUrl)) {
-        const img = createElement("img", {
-          className: "cevro-message__avatar-img"
-        });
-        img.src = this.currentAgent.avatarUrl;
-        img.alt = this.currentAgent.name || "Agent";
-        avatar.appendChild(img);
       } else {
-        avatar.innerHTML = this.createBotAvatarSvg();
+        const validAgentAvatarUrl = ((_a = this.currentAgent) == null ? void 0 : _a.avatarUrl) && isValidUrl(this.currentAgent.avatarUrl) ? this.currentAgent.avatarUrl : null;
+        const avatarSrc = showBrandLogo ? this.brandLogoUrl : validAgentAvatarUrl;
+        if (avatarSrc) {
+          const img = createElement("img", {
+            className: "cevro-message__avatar-img",
+            src: avatarSrc,
+            alt: showBrandLogo ? "Logo" : ((_b = this.currentAgent) == null ? void 0 : _b.name) || "Agent"
+          });
+          avatar.appendChild(img);
+        } else {
+          avatar.innerHTML = this.createBotAvatarSvg();
+        }
       }
       wrapper.appendChild(avatar);
     }
     const contentWrapper = createElement("div", {
       className: "cevro-message__content-wrapper"
     });
-    if (!isMyMessage && message.senderType === "human" && message.agentName) {
+    if (isHuman && message.agentName) {
       const senderLabel = createElement("div", {
         className: "cevro-message__sender-name"
       });
@@ -5320,7 +5399,7 @@ class MessageList {
     const bubble = createElement("div", {
       className: "cevro-message__bubble"
     });
-    const isImage = message.type === "image" || ((_b = message.attachment) == null ? void 0 : _b.category) === "image";
+    const isImage = message.type === "image" || ((_c = message.attachment) == null ? void 0 : _c.category) === "image";
     if (isImage && message.mediaUrl && isValidUrl(message.mediaUrl)) {
       const imageContainer = createElement("div", {
         className: "cevro-message__image-container"
@@ -5329,7 +5408,7 @@ class MessageList {
         className: "cevro-message__image"
       });
       img.src = message.mediaUrl;
-      img.alt = ((_c = message.attachment) == null ? void 0 : _c.filename) || "Image";
+      img.alt = ((_d = message.attachment) == null ? void 0 : _d.filename) || "Image";
       img.loading = "lazy";
       imageContainer.appendChild(img);
       if (message.status === "sending") {
@@ -5361,7 +5440,7 @@ class MessageList {
       bubble.appendChild(textContent);
     }
     contentWrapper.appendChild(bubble);
-    if ((_e = (_d = message.richContent) == null ? void 0 : _d.quickActions) == null ? void 0 : _e.length) {
+    if ((_f = (_e = message.richContent) == null ? void 0 : _e.quickActions) == null ? void 0 : _f.length) {
       const actionsContainer = createElement("div", {
         className: "cevro-message__quick-actions"
       });
@@ -5628,6 +5707,8 @@ class MessageList {
       this.messagesContainer.innerHTML = "";
     }
     this.messages.clear();
+    this.messageData.clear();
+    this.firstAdminMessageId = null;
     this.lastMessageBody = void 0;
     this.lastMessageAt = void 0;
     this.autoScroll = true;
@@ -5687,6 +5768,8 @@ class MessageList {
     this.element = null;
     this.messagesContainer = null;
     this.messages.clear();
+    this.messageData.clear();
+    this.firstAdminMessageId = null;
   }
 }
 class ChatWindow {
@@ -6539,6 +6622,14 @@ class ChatWindow {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return emailRegex.test(email);
   }
+  /**
+   * Set the brand logo shown as the avatar of the conversation's first message only.
+   * Distinct from the header logo (`updateCustomLogo`) — callers decide independently
+   * whether the first-message avatar should follow the header logo.
+   */
+  setBrandLogoUrl(logoUrl) {
+    this.messageList.setBrandLogoUrl(logoUrl);
+  }
   updateCustomLogo(logoUrl) {
     this.customLogoUrl = logoUrl;
     if (!this.logoElement) return;
@@ -6878,6 +6969,19 @@ class PastConversation {
     this.avatarUrl = url;
     this.renderAvatar();
   }
+  /**
+   * Set agent info for message avatars (the AI-persona photo fallback when
+   * no brand logo applies)
+   */
+  setAgent(agent) {
+    this.messageList.setAgent(agent);
+  }
+  /**
+   * Set the brand logo shown as the avatar of the conversation's first message only
+   */
+  setBrandLogoUrl(url) {
+    this.messageList.setBrandLogoUrl(url);
+  }
   renderAvatar() {
     if (!this.avatarElement) return;
     if (this.avatarUrl) {
@@ -7173,6 +7277,7 @@ const _CevroMessenger = class _CevroMessenger {
       strings,
       this.widgetAppearance.customLogoUrl
     );
+    this.chatWindow.setBrandLogoUrl(this.firstMessageBrandLogoUrl());
     this.container.appendChild(this.chatWindow.render());
     this.createConversationList(strings);
     this.createPastConversation(strings);
@@ -7389,6 +7494,7 @@ const _CevroMessenger = class _CevroMessenger {
     );
     const el = this.pastConversation.render();
     this.pastConversation.setAvatarUrl(this.widgetAppearance.customLogoUrl);
+    this.pastConversation.setBrandLogoUrl(this.firstMessageBrandLogoUrl());
     el.style.display = "none";
     this.container.appendChild(el);
   }
@@ -7604,6 +7710,9 @@ const _CevroMessenger = class _CevroMessenger {
       if (result.agent && this.chatWindow) {
         this.chatWindow.setAgent(result.agent);
       }
+      if (result.agent && this.pastConversation) {
+        this.pastConversation.setAgent(result.agent);
+      }
       if (result.typingConfig) {
         this.typingConfig = result.typingConfig;
       }
@@ -7911,6 +8020,15 @@ const _CevroMessenger = class _CevroMessenger {
     (_a = this.launcher) == null ? void 0 : _a.setUnreadCount(count);
     this.events.emit("unread_count_change", { count });
   }
+  /**
+   * The brand logo pairs with the global, workspace-voiced welcome
+   * (`instantGreeting`) — pairing it with the personalized "Hi, I'm
+   * {agentName}" welcome would put a company avatar next to agent-attributed
+   * text.
+   */
+  firstMessageBrandLogoUrl() {
+    return this.widgetAppearance.instantGreeting ? this.widgetAppearance.customLogoUrl : void 0;
+  }
   updateAppearance(config) {
     this.widgetAppearance = {
       ...this.widgetAppearance,
@@ -7928,6 +8046,12 @@ const _CevroMessenger = class _CevroMessenger {
     if ("customLogoUrl" in config && this.chatWindow) {
       this.chatWindow.updateCustomLogo(config.customLogoUrl);
     }
+    if (("customLogoUrl" in config || "instantGreeting" in config) && this.chatWindow) {
+      this.chatWindow.setBrandLogoUrl(this.firstMessageBrandLogoUrl());
+    }
+    if (("customLogoUrl" in config || "instantGreeting" in config) && this.pastConversation) {
+      this.pastConversation.setBrandLogoUrl(this.firstMessageBrandLogoUrl());
+    }
     this.events.emit("appearance:updated", this.widgetAppearance);
   }
   /**
@@ -8056,8 +8180,10 @@ const _CevroMessenger = class _CevroMessenger {
    * @param avatarUrl - Agent avatar URL (optional)
    */
   setPreviewAgent(name, avatarUrl) {
+    var _a;
     if (!this.config.preview || !this.chatWindow) return;
     this.chatWindow.setAgent({ name, avatarUrl });
+    (_a = this.pastConversation) == null ? void 0 : _a.setAgent({ name, avatarUrl });
   }
   /**
    * Start typing indicator cycle (5s on, 5s off, repeat)