releasebird-javascript-sdk 1.0.92 → 1.0.94

package/src/RbirdAutomationManager.js

@@ -31,7 +31,8 @@ export class RbirdAutomationManager {
      */
     async init(apiKey) {
         this.apiKey = apiKey;
-        this.firstSeenTimestamp = this.getFirstSeenTimestamp();
+        const { timestamp, isFirstVisit } = this.getFirstSeenTimestamp();
+        this.firstSeenTimestamp = timestamp;
 
         // Register event handlers
         this.registerEventHandlers();
@@ -42,12 +43,13 @@ export class RbirdAutomationManager {
         // Start command polling (reduced frequency - WebSocket is primary)
         this.startCommandPolling();
 
-        // Send first_seen event
-        await this.sendEvent('first_seen', {
-            timeSinceFirstSeen: (Date.now() - this.firstSeenTimestamp) / 1000
-        });
+        // Send first_seen event only if this is truly the first visit
+        if (isFirstVisit) {
+            await this.sendEvent('first_seen', {
+                timeSinceFirstSeen: 0
+            });
+        }
 
-        console.log('[Rbird] Automation manager initialized');
     }
 
     /**
@@ -58,7 +60,6 @@ export class RbirdAutomationManager {
         window.addEventListener('message', (event) => {
             // Handle automation command notification from widget
             if (event.data === 'automationCommand') {
-                console.log('[Rbird] Received WebSocket automation notification');
                 // Immediately fetch and execute pending commands
                 this.pollCommands();
             }
@@ -67,15 +68,16 @@ export class RbirdAutomationManager {
 
     /**
      * Get or set the first_seen timestamp
+     * @returns {{ timestamp: number, isFirstVisit: boolean }}
      */
     getFirstSeenTimestamp() {
         const stored = localStorage.getItem('rbird_first_seen');
         if (stored) {
-            return parseInt(stored, 10);
+            return { timestamp: parseInt(stored, 10), isFirstVisit: false };
         }
         const now = Date.now();
         localStorage.setItem('rbird_first_seen', now.toString());
-        return now;
+        return { timestamp: now, isFirstVisit: true };
     }
 
     /**
@@ -162,7 +164,6 @@ export class RbirdAutomationManager {
             if (!response.ok) {
                 console.warn('[Rbird] Failed to send event:', response.status);
             } else {
-                console.log('[Rbird] Event sent:', eventType);
             }
         } catch (error) {
             console.error('[Rbird] Error sending event:', error);
@@ -177,20 +178,37 @@ export class RbirdAutomationManager {
     }
 
     /**
-     * Get the anonymous ID from session
+     * Get the anonymous ID from session.
+     * Uses the same anonymousIdentifier as RbirdSessionManager (stored in 'Rbird_I')
+     * to ensure consistency between automation and widget.
      */
     getAnonymousId() {
-        return RbirdSessionManager.getInstance().getState()?.identify?.anonymousId ||
-               localStorage.getItem('rbird_anonymous_id') ||
-               this.generateAnonymousId();
+        // First check if there's an identified user with anonymousId
+        const identifyAnonymousId = RbirdSessionManager.getInstance().getState()?.identify?.anonymousId;
+        if (identifyAnonymousId) {
+            return identifyAnonymousId;
+        }
+
+        // Use the same anonymousIdentifier as RbirdSessionManager
+        const sessionAnonymousId = RbirdSessionManager.getInstance().anonymousIdentifier;
+        if (sessionAnonymousId) {
+            return sessionAnonymousId;
+        }
+
+        // Fallback: read from the same localStorage key as RbirdSessionManager
+        return localStorage.getItem('Rbird_I') || this.generateAnonymousId();
     }
 
     /**
-     * Generate and store an anonymous ID
+     * Generate and store an anonymous ID (using same key as RbirdSessionManager)
      */
     generateAnonymousId() {
-        const id = 'anon_' + Math.random().toString(36).substr(2, 9);
-        localStorage.setItem('rbird_anonymous_id', id);
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        let id = '';
+        for (let i = 0; i < 60; i++) {
+            id += characters.charAt(Math.floor(Math.random() * characters.length));
+        }
+        localStorage.setItem('Rbird_I', id);
         return id;
     }
 
@@ -262,7 +280,6 @@ export class RbirdAutomationManager {
      * @param {Object} cmd - The command to execute
      */
     async executeCommand(cmd) {
-        console.log('[Rbird] Executing command:', cmd.type);
 
         switch (cmd.type) {
             case 'show_banner':
@@ -277,6 +294,9 @@ export class RbirdAutomationManager {
             case 'send_chat':
                 this.executeSendChat(cmd.message, cmd.config);
                 break;
+            case 'send_booking':
+                this.executeSendBooking(cmd.targetId, cmd.message, cmd.config);
+                break;
             default:
                 console.warn('[Rbird] Unknown command type:', cmd.type);
         }
@@ -302,25 +322,65 @@ export class RbirdAutomationManager {
 
     /**
      * Execute send_chat command
+     * @param {string} message - The chat message
+     * @param {Object} config - Config including chatId, openWidget flag, senderName, senderAvatar
      */
     executeSendChat(message, config) {
         if (!message) return;
 
-        console.log('[Rbird] Chat message triggered:', message);
+        const widget = RbirdWebsiteWidget.getInstance();
+        const shouldOpenWidget = config?.openWidget !== false; // Default to true
+
+        if (shouldOpenWidget) {
+            // Open the widget and send the message
+            widget.openWebsiteWidget();
+
+            // Send message to iframe to display automation message
+            setTimeout(() => {
+                if (widget.iframe) {
+                    widget.iframe.contentWindow?.postMessage({
+                        type: 'automationMessage',
+                        message: message,
+                        chatId: config?.chatId
+                    }, '*');
+                }
+            }, 500); // Small delay to ensure iframe is ready
+        } else {
+            // Just show a message bubble without opening the widget
+            widget.showMessageBubble(message, config?.chatId, null, config?.senderName, config?.senderAvatar);
+        }
+    }
 
-        // Open the widget and send the message
+    /**
+     * Execute send_booking command - sends a booking request message
+     * @param {string} appointmentTypeId - The appointment type ID
+     * @param {string} message - Optional custom message
+     * @param {Object} config - Additional config (chatId, openWidget flag, senderName, senderAvatar)
+     */
+    executeSendBooking(appointmentTypeId, message, config) {
         const widget = RbirdWebsiteWidget.getInstance();
-        widget.openWebsiteWidget();
-
-        // Send message to iframe to display automation message
-        setTimeout(() => {
-            if (widget.iframe) {
-                widget.iframe.contentWindow?.postMessage({
-                    type: 'automationMessage',
-                    message: message
-                }, '*');
-            }
-        }, 500); // Small delay to ensure iframe is ready
+        const shouldOpenWidget = config?.openWidget !== false; // Default to true
+
+        if (shouldOpenWidget) {
+            // Open the widget and send the booking request
+            widget.openWebsiteWidget();
+
+            // Send message to iframe to display booking request
+            setTimeout(() => {
+                if (widget.iframe) {
+                    widget.iframe.contentWindow?.postMessage({
+                        type: 'automationBooking',
+                        appointmentTypeId: appointmentTypeId,
+                        message: message,
+                        chatId: config?.chatId
+                    }, '*');
+                }
+            }, 500); // Small delay to ensure iframe is ready
+        } else {
+            // Just show a message bubble without opening the widget
+            const displayMessage = message || 'Book an appointment';
+            widget.showMessageBubble(displayMessage, config?.chatId, appointmentTypeId, config?.senderName, config?.senderAvatar);
+        }
     }
 
     /**

package/src/RbirdBookingManager.js

@@ -9,6 +9,7 @@ export class RbirdBookingManager {
     constructor() {
         this.apiKey = null;
         this.isOpen = false;
+        this.embeddedInstances = new Map(); // Track embedded instances by target selector
     }
 
     static getInstance() {
@@ -27,6 +28,7 @@ export class RbirdBookingManager {
     /**
      * Show the booking modal
      * @param {Object} options - Optional configuration
+     * @param {string} options.appointmentTypeId - Pre-select a specific appointment type
      * @param {Function} options.onSuccess - Callback when booking is completed
      * @param {Function} options.onClose - Callback when modal is closed
      */
@@ -56,6 +58,9 @@ export class RbirdBookingManager {
         if (sessionManager.anonymousIdentifier) {
             iframeUrl += `&ai=${sessionManager.anonymousIdentifier}`;
         }
+        if (options.appointmentTypeId) {
+            iframeUrl += `&appointmentTypeId=${encodeURIComponent(options.appointmentTypeId)}`;
+        }
 
         this.createModal(iframeUrl, options);
         this.isOpen = true;
@@ -150,6 +155,133 @@ export class RbirdBookingManager {
         }
     }
 
+    /**
+     * Embed the booking form into a container element
+     * @param {Object} options - Configuration options
+     * @param {string} options.target - CSS selector for the container element (required)
+     * @param {string} options.appointmentTypeId - Pre-select a specific appointment type
+     * @param {string} options.height - Height of the embedded form (default: '600px')
+     * @param {Function} options.onSuccess - Callback when booking is completed
+     * @param {Function} options.onError - Callback when an error occurs
+     */
+    embedBooking(options = {}) {
+        if (typeof window === 'undefined') return;
+        if (!this.apiKey) {
+            console.error('[RbirdBookingManager] SDK not initialized. Call Rbird.initialize() first.');
+            return;
+        }
+        if (!options.target) {
+            console.error('[RbirdBookingManager] Target selector is required for embedBooking().');
+            return;
+        }
+
+        const container = document.querySelector(options.target);
+        if (!container) {
+            console.error(`[RbirdBookingManager] Container not found: ${options.target}`);
+            return;
+        }
+
+        // Check if already embedded in this container
+        if (this.embeddedInstances.has(options.target)) {
+            console.warn(`[RbirdBookingManager] Booking form already embedded in ${options.target}. Call destroyEmbeddedBooking() first to re-embed.`);
+            return;
+        }
+
+        const sessionManager = RbirdSessionManager.getInstance();
+        const state = sessionManager.getState();
+
+        // Build iframe URL with embedded mode
+        let iframeUrl = `${CONTENT_URL}/widget?apiKey=${this.apiKey}&view=BOOKING&embedded=true`;
+
+        if (state?.identify?.people) {
+            iframeUrl += `&people=${state.identify.people}`;
+        }
+        if (state?.identify?.hash) {
+            iframeUrl += `&hash=${state.identify.hash}`;
+        }
+        if (sessionManager.anonymousIdentifier) {
+            iframeUrl += `&ai=${sessionManager.anonymousIdentifier}`;
+        }
+        if (options.appointmentTypeId) {
+            iframeUrl += `&appointmentTypeId=${encodeURIComponent(options.appointmentTypeId)}`;
+        }
+
+        // Create wrapper div for styling
+        const wrapper = document.createElement('div');
+        wrapper.className = 'rbird-booking-embedded-wrapper';
+        wrapper.style.cssText = `
+            width: 100%;
+            height: ${options.height || '600px'};
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        `;
+
+        // Create iframe
+        const iframe = document.createElement('iframe');
+        iframe.className = 'rbird-booking-embedded-iframe';
+        iframe.src = iframeUrl;
+        iframe.allow = 'clipboard-write';
+        iframe.style.cssText = `
+            width: 100%;
+            height: 100%;
+            border: none;
+        `;
+
+        wrapper.appendChild(iframe);
+        container.appendChild(wrapper);
+
+        // Handle messages from iframe
+        const messageHandler = (e) => {
+            if (e.data === 'bookingSuccess') {
+                if (options.onSuccess) {
+                    options.onSuccess();
+                }
+            }
+            if (e.data === 'bookingError') {
+                if (options.onError) {
+                    options.onError(e.data.error);
+                }
+            }
+        };
+        window.addEventListener('message', messageHandler);
+
+        // Store instance info for cleanup
+        this.embeddedInstances.set(options.target, {
+            wrapper,
+            messageHandler
+        });
+
+        return {
+            destroy: () => this.destroyEmbeddedBooking(options.target)
+        };
+    }
+
+    /**
+     * Remove an embedded booking form
+     * @param {string} target - CSS selector for the container element
+     */
+    destroyEmbeddedBooking(target) {
+        if (!this.embeddedInstances.has(target)) {
+            console.warn(`[RbirdBookingManager] No embedded booking found for ${target}`);
+            return;
+        }
+
+        const instance = this.embeddedInstances.get(target);
+
+        // Remove event listener
+        if (instance.messageHandler) {
+            window.removeEventListener('message', instance.messageHandler);
+        }
+
+        // Remove DOM element
+        if (instance.wrapper && instance.wrapper.parentNode) {
+            instance.wrapper.parentNode.removeChild(instance.wrapper);
+        }
+
+        this.embeddedInstances.delete(target);
+    }
+
     injectStyles() {
         if (typeof window === 'undefined' || document.getElementById('rbird-booking-styles')) return;
 

package/src/RbirdScreenshotManager.js

@@ -107,8 +107,6 @@ export default class RbirdScreenshotManager {
 
         // Wait a moment for the loader to render, then hide our UI elements
         setTimeout(() => {
-            console.log('[Screenshot] Starting HTML export method...');
-
             // Hide the close button and toolbar
             const closeButton = document.getElementById('screenshotCloseButton');
             const toolbar = document.querySelector('.menu'); // SVGEditor toolbar
@@ -131,15 +129,12 @@ export default class RbirdScreenshotManager {
                     // Export HTML with inline styles (now async!)
                     const htmlData = await that.exportHTML();
 
-                    console.log('[Screenshot] HTML exported, sending to backend...');
-
                     // Restore loader visibility while waiting for backend
                     loader.style.visibility = 'visible';
 
                     // Send HTML to backend for rendering
                     that.renderScreenshotOnBackend(htmlData)
                         .then((screenshotDataUrl) => {
-                            console.log('[Screenshot] Screenshot received from backend!');
                             screenshotCompleted = true;
                             clearTimeout(timeoutId);
 
@@ -207,7 +202,6 @@ export default class RbirdScreenshotManager {
      * Returns complete HTML document with minimal modifications
      */
     async exportHTML() {
-        console.log('[Screenshot] Exporting HTML with inline resources...');
 
         // Capture scroll positions BEFORE cloning
         this.captureScrollPositions();
@@ -246,7 +240,6 @@ export default class RbirdScreenshotManager {
         const doctype = '<!DOCTYPE html>';
         const html = doctype + clone.outerHTML;
 
-        console.log(`[Screenshot] Exported HTML: ${html.length} bytes`);
         return html;
     }
 
@@ -255,7 +248,6 @@ export default class RbirdScreenshotManager {
      * This allows the backend to restore scroll positions before taking the screenshot
      */
     captureScrollPositions() {
-        console.log('[Screenshot] Capturing scroll positions...');
         let scrollableCount = 0;
 
         // Find all elements that might be scrollable
@@ -289,7 +281,6 @@ export default class RbirdScreenshotManager {
                 }
 
                 scrollableCount++;
-                console.log(`[Screenshot] Captured scroll position for element: scrollLeft=${scrollLeft}, scrollTop=${scrollTop}`);
             }
         });
 
@@ -304,7 +295,6 @@ export default class RbirdScreenshotManager {
             document.body.setAttribute('data-rbird-scroll-top', docScrollTop.toString());
         }
 
-        console.log(`[Screenshot] Captured scroll positions for ${scrollableCount} elements`);
     }
 
     /**
@@ -346,7 +336,6 @@ export default class RbirdScreenshotManager {
 
         if (totalOriginalSize > 0) {
             const reduction = Math.round((1 - totalResizedSize / totalOriginalSize) * 100);
-            console.log(`[Screenshot] Image optimization: ${totalOriginalSize} -> ${totalResizedSize} bytes (${reduction}% reduction)`);
         }
     }
 
@@ -454,7 +443,6 @@ export default class RbirdScreenshotManager {
      * Download all CSS and inline with data URLs
      */
     async downloadAllCSS(clone) {
-        console.log(`[Screenshot] Processing ${document.styleSheets.length} stylesheets...`);
         const processedStylesheets = [];
         const googleFontsLinks = [];
 
@@ -491,7 +479,6 @@ export default class RbirdScreenshotManager {
                     styleSheet.href.includes('icon.css') ||
                     styleSheet.href.includes('icons.css')
                 )) {
-                    console.log(`[Screenshot] Skipping font/icon service stylesheet: ${styleSheet.href}`);
                     googleFontsLinks.push(styleSheet.href);
                     continue;
                 }
@@ -504,16 +491,13 @@ export default class RbirdScreenshotManager {
                         for (let j = 0; j < styleSheet.cssRules.length; j++) {
                             cssText += styleSheet.cssRules[j].cssText + '\n';
                         }
-                        console.log(`[Screenshot] Extracted ${styleSheet.cssRules.length} rules from stylesheet ${i}`);
                     }
                 } catch (corsError) {
                     // CORS blocked - try to fetch the stylesheet if it has an href
                     if (styleSheet.href) {
-                        console.log(`[Screenshot] CORS blocked stylesheet ${i}, fetching: ${styleSheet.href}`);
                         try {
                             const response = await fetch(styleSheet.href);
                             cssText = await response.text();
-                            console.log(`[Screenshot] Fetched ${cssText.length} bytes from ${styleSheet.href}`);
                         } catch (fetchError) {
                             console.warn('[Screenshot] Failed to fetch CORS-blocked stylesheet:', styleSheet.href, fetchError);
                         }
@@ -544,11 +528,8 @@ export default class RbirdScreenshotManager {
             }
         }
 
-        console.log(`[Screenshot] Successfully processed ${processedStylesheets.length} stylesheets`);
-
         // Remove original link tags except Google Fonts and icon fonts
         const links = clone.querySelectorAll('link[rel="stylesheet"]');
-        console.log(`[Screenshot] Removing ${links.length} original link tags (keeping font/icon services)`);
         links.forEach(link => {
             const href = link.getAttribute('href');
             // Keep Google Fonts, icon fonts, and other font service links
@@ -627,15 +608,12 @@ export default class RbirdScreenshotManager {
                     fullURL = new URL(url, basePath + '/').href;
                 }
 
-                console.log(`[Screenshot] Processing CSS resource: ${fullURL} (font: ${isFont}, image: ${isImage})`);
-
                 const dataURL = await this.fetchResourceAsDataURL(fullURL);
 
                 if (dataURL) {
                     if (isFont) {
                         // Don't resize fonts - use as-is
                         cssText = cssText.split(match[0]).join(`url(${dataURL})`);
-                        console.log(`[Screenshot] Embedded font: ${url}`);
                     } else if (isImage) {
                         // Resize images to reduce payload
                         try {
@@ -735,7 +713,6 @@ export default class RbirdScreenshotManager {
 
                 // Convert to base64 in chunks to avoid call stack issues
                 const base64 = this.arrayBufferToBase64(compressed);
-                console.log(`[Screenshot] Compression: ${data.length} -> ${compressed.length} bytes (${Math.round(compressed.length / data.length * 100)}%)`);
                 return base64;
             } else {
                 // Fallback: no compression available
@@ -773,17 +750,11 @@ export default class RbirdScreenshotManager {
      */
     async renderScreenshotOnBackend(html) {
         const htmlSizeBytes = html.length;
-        const htmlSizeMB = (htmlSizeBytes / (1024 * 1024)).toFixed(2);
-
-        console.log('[Screenshot] Sending HTML to backend...');
-        console.log(`[Screenshot] Original HTML size: ${htmlSizeBytes} bytes (${htmlSizeMB} MB)`);
 
         // If HTML > 800KB, use S3 upload to bypass ALB 1MB limit
         if (htmlSizeBytes > 800 * 1024) {
-            console.log('[Screenshot] HTML > 800KB, using S3 upload...');
             return this.renderViaS3(html);
         } else {
-            console.log('[Screenshot] HTML < 800KB, using direct upload...');
             return this.renderDirect(html);
         }
     }
@@ -794,8 +765,6 @@ export default class RbirdScreenshotManager {
     async renderViaS3(html) {
         return new Promise(async (resolve, reject) => {
             try {
-                console.log('[Screenshot] Step 1: Requesting presigned URL...');
-
                 const widgetInstance = this.getRbirdWebsiteWidget().getInstance();
 
                 // Create abort controller for timeout
@@ -824,7 +793,6 @@ export default class RbirdScreenshotManager {
                 }
 
                 const { uploadUrl, key } = await urlResponse.json();
-                console.log(`[Screenshot] Step 2: Uploading HTML to S3 (key: ${key})...`);
 
                 // 2. Upload HTML directly to S3
                 const controller2 = new AbortController();
@@ -850,8 +818,6 @@ export default class RbirdScreenshotManager {
                     throw new Error(`Failed to upload to S3: ${s3Response.status}`);
                 }
 
-                console.log('[Screenshot] Step 3: Requesting screenshot render from backend...');
-
                 // 3. Request screenshot render via backend
                 const controller3 = new AbortController();
                 const timeout3 = setTimeout(() => controller3.abort(), 20000); // 20s timeout
@@ -884,7 +850,6 @@ export default class RbirdScreenshotManager {
                 }
 
                 const result = await renderResponse.json();
-                console.log('[Screenshot] Screenshot received successfully via S3!');
                 resolve(result.screenshot);
 
             } catch (error) {
@@ -956,7 +921,6 @@ export default class RbirdScreenshotManager {
             }
 
             const payload = JSON.stringify(requestData);
-            console.log(`[Screenshot] Final payload size: ${payload.length} bytes`);
 
             http.send(payload);
         });

package/src/RbirdWebsiteWidget.js

@@ -767,6 +767,78 @@ export default class RbirdWebsiteWidget {
         }
     }
 
+    /**
+     * Show a single message bubble for automation messages (without opening the widget)
+     * @param {string} message - The message text to display
+     * @param {string} chatId - The chat ID to open when clicked
+     * @param {string} appointmentTypeId - Optional appointment type ID for booking messages
+     * @param {string} senderName - Optional sender name (from selected user)
+     * @param {string} senderAvatar - Optional sender avatar URL (from selected user)
+     */
+    showMessageBubble(message, chatId, appointmentTypeId = null, senderName = null, senderAvatar = null) {
+
+        if (!message) {
+            return;
+        }
+
+        // Ensure widget button exists for positioning
+        if (!this.websiteWidget) {
+            // Retry after widget is initialized
+            setTimeout(() => this.showMessageBubble(message, chatId, appointmentTypeId, senderName, senderAvatar), 500);
+            return;
+        }
+
+        // Create message object in the format expected by createMessageBubble
+        // Use provided sender info, or fall back to 'Support' with no avatar
+        const msg = {
+            chatId: chatId || 'automation-' + Date.now(),
+            text: message,
+            senderName: senderName || 'Support',
+            senderAvatar: senderAvatar || null,
+            timestamp: new Date().toISOString(),
+            appointmentTypeId: appointmentTypeId
+        };
+
+        // Ensure bubble container exists
+        if (!this.messageBubblesContainer) {
+            this.messageBubblesContainer = document.createElement('div');
+            this.messageBubblesContainer.className = 'rbird-message-bubbles-container';
+            // Set critical styles directly to ensure visibility
+            this.messageBubblesContainer.style.position = 'fixed';
+            this.messageBubblesContainer.style.zIndex = '9999999';
+            this.messageBubblesContainer.style.display = 'flex';
+            this.messageBubblesContainer.style.flexDirection = 'column';
+            this.messageBubblesContainer.style.gap = '10px';
+            this.messageBubblesContainer.style.maxWidth = '320px';
+            document.body.appendChild(this.messageBubblesContainer);
+        }
+
+        // Create and add the bubble
+        const bubble = this.createMessageBubble(msg);
+
+        // Override click handler for automation bubbles - open widget and show the chat
+        bubble.onclick = () => {
+            this.hideMessageBubbles();
+            this.openWebsiteWidget();
+            // Send message to iframe to open the specific chat
+            if (this.iframe && chatId) {
+                this.iframe.contentWindow?.postMessage({
+                    type: 'openChat',
+                    chatId: chatId
+                }, '*');
+            }
+        };
+
+        this.messageBubblesContainer.appendChild(bubble);
+        this.messageBubblesContainer.style.display = 'flex';
+
+        // Position bubbles
+        this.positionMessageBubbles();
+
+        // Play notification sound
+        this.playNotificationSound();
+    }
+
     /**
      * Create the drag handle element (6-dot grip pattern)
      */