releasebird-javascript-sdk 1.0.72 → 1.0.73

package/src/RbirdWebsiteWidget.js

@@ -40,6 +40,10 @@ export default class RbirdWebsiteWidget {
     countNotificationsTimer = null;
     countNotificationsDelay = 1000; // 1 second
 
+    // Message bubbles
+    messageBubblesContainer = null;
+    dismissedBubbles = new Set(); // Track dismissed bubbles by chatId
+
     static getInstance() {
         if (!this.instance) {
             this.instance = new RbirdWebsiteWidget();
@@ -110,6 +114,9 @@ export default class RbirdWebsiteWidget {
         // Disable scrolling on the main page
         document.body.style.overflow = 'hidden';
 
+        // Hide message bubbles when widget is open
+        this.hideMessageBubbles();
+
         this.registerListeners();
         if (this.hideWidgetButton) {
             this.hideWidgetButton.style.display = "none";
@@ -264,6 +271,10 @@ export default class RbirdWebsiteWidget {
 
         this.websiteWidget.onclick = () => this.openWebsiteWidget();
         this.unregisterListeners();
+
+        // Reload message bubbles when widget is closed
+        this.dismissedBubbles.clear(); // Reset dismissed bubbles
+        this.fetchUnreadMessages();
     }
 
     initButton() {
@@ -301,7 +312,9 @@ export default class RbirdWebsiteWidget {
 
         if (e.data === 'newMessageArrived') {
             this.countNotifications();
+            // Also refresh message bubbles when new message arrives
             if (!RbirdUtils.hasClass(this.widgetContent, 'cta__modal--visible')) {
+                this.fetchUnreadMessages();
                 if (this.iframe) {
                     this.iframe.contentWindow?.postMessage({
                         type: 'showMessageTab',
@@ -347,6 +360,7 @@ export default class RbirdWebsiteWidget {
         window.onmessage = (e) => this.handleEvent(e, this);
 
         this.countNotifications();
+        this.fetchUnreadMessages();
     }
 
     updateIframe(iframeSrc) {
@@ -378,5 +392,230 @@ export default class RbirdWebsiteWidget {
         document.addEventListener("keydown", this.escListener);
     }
 
+    /**
+     * Fetch unread messages and display as bubbles above the widget button
+     */
+    fetchUnreadMessages() {
+        if (typeof window === 'undefined') return;
+        if (!RbirdSessionManager.getInstance().identify?.people && !RbirdSessionManager.getInstance().anonymousIdentifier) {
+            return;
+        }
+
+        const http = new XMLHttpRequest();
+        http.open("GET", `${API}/ewidget/unread/messages`);
+        http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+        http.setRequestHeader("apiKey", RbirdSessionManager.getInstance().apiKey);
+        if (RbirdSessionManager.getInstance().identify?.people) {
+            http.setRequestHeader("peopleId", RbirdSessionManager.getInstance().identify.people);
+        }
+        if (RbirdSessionManager.getInstance().anonymousIdentifier) {
+            http.setRequestHeader("ai", RbirdSessionManager.getInstance().anonymousIdentifier);
+        }
+
+        const that = this;
+        http.onerror = function () {
+            console.error('[RbirdWidget] Failed to fetch unread messages');
+        };
+        http.onreadystatechange = function () {
+            if (http.readyState === XMLHttpRequest.DONE) {
+                console.log('[RbirdWidget] Unread messages response:', http.status, http.responseText);
+                if (http.status === 200 || http.status === 201) {
+                    try {
+                        const messages = JSON.parse(http.responseText);
+                        console.log('[RbirdWidget] Parsed messages:', messages);
+                        that.renderMessageBubbles(messages);
+                    } catch (e) {
+                        console.error('[RbirdWidget] Error parsing unread messages:', e);
+                    }
+                }
+            }
+        };
+        http.send();
+    }
+
+    /**
+     * Render message bubbles above the widget button
+     * @param {Array} messages - Array of unread messages (one per chat, max 5)
+     */
+    renderMessageBubbles(messages) {
+        console.log('[RbirdWidget] renderMessageBubbles called with:', messages);
+        if (typeof window === 'undefined' || typeof document === 'undefined') return;
+
+        // Don't show bubbles if widget is open
+        if (this.isOpen()) {
+            console.log('[RbirdWidget] Widget is open, hiding bubbles');
+            this.hideMessageBubbles();
+            return;
+        }
+
+        // Filter out dismissed bubbles and limit to 5
+        const filteredMessages = messages
+            .filter(msg => !this.dismissedBubbles.has(msg.chatId))
+            .slice(0, 5);
+
+        console.log('[RbirdWidget] Filtered messages:', filteredMessages);
+
+        if (filteredMessages.length === 0) {
+            console.log('[RbirdWidget] No messages to display');
+            this.hideMessageBubbles();
+            return;
+        }
+
+        // Create or get container
+        if (!this.messageBubblesContainer) {
+            this.messageBubblesContainer = document.createElement('div');
+            this.messageBubblesContainer.className = 'rbird-message-bubbles-container';
+            document.body.appendChild(this.messageBubblesContainer);
+        }
+
+        // Clear existing bubbles
+        this.messageBubblesContainer.innerHTML = '';
+
+        // Render each bubble
+        filteredMessages.forEach(msg => {
+            const bubble = this.createMessageBubble(msg);
+            this.messageBubblesContainer.appendChild(bubble);
+        });
+
+        this.messageBubblesContainer.style.display = 'flex';
+    }
+
+    /**
+     * Create a single message bubble element
+     * @param {Object} msg - Message object with chatId, text, senderName, senderAvatar, timestamp
+     */
+    createMessageBubble(msg) {
+        const bubble = document.createElement('div');
+        bubble.className = 'rbird-message-bubble';
+        bubble.setAttribute('data-chat-id', msg.chatId);
+
+        // Avatar
+        const avatarDiv = document.createElement('div');
+        avatarDiv.className = 'rbird-message-bubble-avatar';
+        if (msg.senderAvatar) {
+            const avatarImg = document.createElement('img');
+            avatarImg.src = msg.senderAvatar;
+            avatarImg.alt = msg.senderName || 'Avatar';
+            avatarDiv.appendChild(avatarImg);
+        } else {
+            // Show initials
+            const initials = (msg.senderName || 'U').charAt(0).toUpperCase();
+            avatarDiv.textContent = initials;
+        }
+
+        // Content
+        const contentDiv = document.createElement('div');
+        contentDiv.className = 'rbird-message-bubble-content';
+
+        const textP = document.createElement('p');
+        textP.className = 'rbird-message-bubble-text';
+        textP.textContent = msg.text || '';
+
+        const metaDiv = document.createElement('div');
+        metaDiv.className = 'rbird-message-bubble-meta';
+
+        const senderSpan = document.createElement('span');
+        senderSpan.className = 'rbird-message-bubble-sender';
+        senderSpan.textContent = msg.senderName || 'Support';
+
+        const dotSpan = document.createElement('span');
+        dotSpan.textContent = '·';
+
+        const timeSpan = document.createElement('span');
+        timeSpan.className = 'rbird-message-bubble-time';
+        timeSpan.textContent = this.formatMessageTime(msg.timestamp);
+
+        metaDiv.appendChild(senderSpan);
+        metaDiv.appendChild(dotSpan);
+        metaDiv.appendChild(timeSpan);
+
+        contentDiv.appendChild(textP);
+        contentDiv.appendChild(metaDiv);
+
+        // Close button
+        const closeBtn = document.createElement('button');
+        closeBtn.className = 'rbird-message-bubble-close';
+        closeBtn.innerHTML = '×';
+        closeBtn.onclick = (e) => {
+            e.stopPropagation();
+            this.dismissMessageBubble(msg.chatId, bubble);
+        };
+
+        bubble.appendChild(avatarDiv);
+        bubble.appendChild(contentDiv);
+        bubble.appendChild(closeBtn);
+
+        // Click on bubble opens widget
+        bubble.onclick = () => {
+            this.hideMessageBubbles();
+            this.openWebsiteWidget();
+            // Send message to iframe to open the specific chat
+            if (this.iframe) {
+                this.iframe.contentWindow?.postMessage({
+                    type: 'openChat',
+                    chatId: msg.chatId
+                }, '*');
+            }
+        };
+
+        return bubble;
+    }
+
+    /**
+     * Format timestamp to relative time (e.g., "Just now", "5 min ago")
+     */
+    formatMessageTime(timestamp) {
+        if (!timestamp) return '';
+
+        const now = new Date();
+        const msgDate = new Date(timestamp);
+        const diffMs = now - msgDate;
+        const diffSec = Math.floor(diffMs / 1000);
+        const diffMin = Math.floor(diffSec / 60);
+        const diffHour = Math.floor(diffMin / 60);
+        const diffDay = Math.floor(diffHour / 24);
+
+        if (diffSec < 60) {
+            return 'Just now';
+        } else if (diffMin < 60) {
+            return `${diffMin} min ago`;
+        } else if (diffHour < 24) {
+            return `${diffHour}h ago`;
+        } else if (diffDay === 1) {
+            return 'Yesterday';
+        } else if (diffDay < 7) {
+            return `${diffDay}d ago`;
+        } else {
+            return msgDate.toLocaleDateString();
+        }
+    }
+
+    /**
+     * Dismiss a single message bubble
+     */
+    dismissMessageBubble(chatId, bubbleElement) {
+        this.dismissedBubbles.add(chatId);
+
+        if (bubbleElement) {
+            bubbleElement.style.animation = 'rbird-bubble-slide-out 0.2s ease-in forwards';
+            setTimeout(() => {
+                bubbleElement.remove();
+                // Hide container if no more bubbles
+                if (this.messageBubblesContainer && this.messageBubblesContainer.children.length === 0) {
+                    this.messageBubblesContainer.style.display = 'none';
+                }
+            }, 200);
+        }
+    }
+
+    /**
+     * Hide all message bubbles
+     */
+    hideMessageBubbles() {
+        if (this.messageBubblesContainer) {
+            this.messageBubblesContainer.style.display = 'none';
+            this.messageBubblesContainer.innerHTML = '';
+        }
+    }
 
 }

package/src/Styles.js

@@ -381,6 +381,148 @@ background: transparent
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }
+
+/* Message Bubbles - Unread messages preview */
+.rbird-message-bubbles-container {
+    position: fixed;
+    bottom: ${spaceBottom + 70}px;
+    ${launcherPosition === 'right' ? `right: ${spaceLeftRight}px;` : `left: ${spaceLeftRight}px;`}
+    z-index: 9999999;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    max-width: 320px;
+    pointer-events: none;
+}
+
+.rbird-message-bubble {
+    background: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    padding: 12px 14px;
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    cursor: pointer;
+    pointer-events: auto;
+    animation: rbird-bubble-slide-in 0.3s ease-out;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    position: relative;
+}
+
+.rbird-message-bubble:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
+}
+
+.rbird-message-bubble-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background-color: #e0e0e0;
+    flex-shrink: 0;
+    object-fit: cover;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: 600;
+    color: #666;
+}
+
+.rbird-message-bubble-avatar img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.rbird-message-bubble-content {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.rbird-message-bubble-text {
+    font-size: 14px;
+    line-height: 1.4;
+    color: #1a1a1a;
+    margin: 0 0 4px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+}
+
+.rbird-message-bubble-meta {
+    font-size: 12px;
+    color: #888;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.rbird-message-bubble-sender {
+    font-weight: 500;
+    color: #666;
+}
+
+.rbird-message-bubble-time {
+    color: #999;
+}
+
+.rbird-message-bubble-close {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 18px;
+    height: 18px;
+    border: none;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: #666;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    padding: 0;
+    line-height: 1;
+}
+
+.rbird-message-bubble:hover .rbird-message-bubble-close {
+    opacity: 1;
+}
+
+.rbird-message-bubble-close:hover {
+    background: rgba(0, 0, 0, 0.2);
+}
+
+@keyframes rbird-bubble-slide-in {
+    from {
+        opacity: 0;
+        transform: translateY(20px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes rbird-bubble-slide-out {
+    from {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(20px) scale(0.95);
+    }
+}
     }`
 
     const oldNode = document.querySelector(".rbird-styles");