releasebird-javascript-sdk 1.0.89 → 1.0.91

package/src/RbirdAutomationManager.js

@@ -1,19 +1,22 @@
 import RbirdSessionManager from "./RbirdSessionManager";
+import RbirdWebsiteWidget from "./RbirdWebsiteWidget";
 import { RbirdBannerManager } from "./RbirdBannerManager";
 import { RbirdFormManager } from "./RbirdFormManager";
 import { RbirdSurveyManager } from "./RbirdSurveyManager";
 
 /**
- * Manages automations and their execution in the SDK.
- * Automations are event-driven workflows that can trigger actions
- * like showing banners, forms, surveys, or sending chat messages.
+ * Manages automations by sending events to the backend and executing commands.
+ * The actual workflow execution happens on the backend - this manager handles:
+ * - Sending events to the backend
+ * - Polling for pending commands
+ * - Executing UI commands (show banner, form, survey, send chat)
  */
 export class RbirdAutomationManager {
     static instance = null;
-    automations = [];
     apiKey = null;
     firstSeenTimestamp = null;
-    executedAutomations = new Set(); // Track which automations have been executed
+    pollingInterval = null;
+    isPolling = false;
 
     static getInstance() {
         if (!this.instance) {
@@ -30,14 +33,18 @@ export class RbirdAutomationManager {
         this.apiKey = apiKey;
         this.firstSeenTimestamp = this.getFirstSeenTimestamp();
 
-        // Load automations from backend
-        await this.loadAutomations();
-
         // Register event handlers
         this.registerEventHandlers();
 
-        // Check for first_seen triggers immediately
-        this.checkFirstSeenTriggers();
+        // Start command polling
+        this.startCommandPolling();
+
+        // Send first_seen event
+        await this.sendEvent('first_seen', {
+            timeSinceFirstSeen: (Date.now() - this.firstSeenTimestamp) / 1000
+        });
+
+        console.log('[Rbird] Automation manager initialized');
     }
 
     /**
@@ -53,297 +60,251 @@ export class RbirdAutomationManager {
         return now;
     }
 
-    /**
-     * Load active automations from the backend
-     */
-    async loadAutomations() {
-        try {
-            const sessionManager = RbirdSessionManager.getInstance();
-            const baseUrl = sessionManager.apiUrl || 'https://api.releasebird.com';
-
-            const response = await fetch(`${baseUrl}/papi/ewidget/automations`, {
-                method: 'GET',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'apiKey': this.apiKey,
-                    'languageCode': navigator.language?.split('-')[0] || 'en',
-                },
-            });
-
-            if (response.ok) {
-                this.automations = await response.json();
-                console.log('[Rbird] Loaded automations:', this.automations.length);
-            }
-        } catch (error) {
-            console.error('[Rbird] Error loading automations:', error);
-        }
-    }
-
     /**
      * Register event handlers for automation triggers
      */
     registerEventHandlers() {
-        // Listen for page visits
-        window.addEventListener('popstate', () => this.handleEvent('page_visit'));
+        // Listen for page visits (navigation)
+        window.addEventListener('popstate', () => this.sendPageVisitEvents());
+
+        // Also track initial page load
+        this.sendPageVisitEvents();
 
         // Listen for identify events
         document.addEventListener('rbird:identify', (e) => {
-            this.handleEvent('user_identified', e.detail);
+            this.sendEvent('user_identified', e.detail);
+            // Also send user_page_visit when user is identified
+            this.sendEvent('user_page_visit');
         });
 
         // Listen for form submissions
         document.addEventListener('rbird:form_submitted', (e) => {
-            this.handleEvent('form_submitted', e.detail);
+            this.sendEvent('form_submitted', e.detail);
         });
 
         // Listen for survey completions
         document.addEventListener('rbird:survey_completed', (e) => {
-            this.handleEvent('survey_completed', e.detail);
+            this.sendEvent('survey_completed', e.detail);
         });
 
         // Listen for custom events
         document.addEventListener('rbird:track', (e) => {
-            this.handleEvent(e.detail?.eventName, e.detail?.data);
+            this.sendEvent(e.detail?.eventName, e.detail?.data);
         });
     }
 
     /**
-     * Check for first_seen triggers on initialization
+     * Send page visit events based on user identification status.
+     * Sends:
+     * - page_visit: always (for backward compatibility)
+     * - visitor_page_visit: if user is NOT identified (anonymous)
+     * - user_page_visit: if user IS identified
      */
-    checkFirstSeenTriggers() {
-        const timeSinceFirstSeen = (Date.now() - this.firstSeenTimestamp) / 1000; // in seconds
-
-        this.automations.forEach((automation) => {
-            const triggerNode = this.findTriggerNode(automation);
-            if (triggerNode && triggerNode.data?.eventType === 'first_seen') {
-                this.evaluateAndExecute(automation, triggerNode, { timeSinceFirstSeen });
-            }
-        });
+    sendPageVisitEvents() {
+        // Always send generic page_visit for backward compatibility
+        this.sendEvent('page_visit');
+
+        // Send specific event based on identification status
+        const peopleId = this.getPeopleId();
+        if (peopleId) {
+            this.sendEvent('user_page_visit');
+        } else {
+            this.sendEvent('visitor_page_visit');
+        }
     }
 
     /**
-     * Handle an event and check for matching automations
+     * Send an event to the backend
      * @param {string} eventType - The type of event
      * @param {Object} eventData - Additional event data
      */
-    handleEvent(eventType, eventData = {}) {
-        this.automations.forEach((automation) => {
-            const triggerNode = this.findTriggerNode(automation);
-            if (triggerNode && triggerNode.data?.eventType === eventType) {
-                this.evaluateAndExecute(automation, triggerNode, eventData);
+    async sendEvent(eventType, eventData = {}) {
+        if (!eventType) return;
+
+        try {
+            const response = await fetch(`${API}/ewidget/events`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'apiKey': this.apiKey,
+                    'peopleId': this.getPeopleId() || '',
+                    'anonymousId': this.getAnonymousId() || ''
+                },
+                body: JSON.stringify({
+                    eventType,
+                    context: {
+                        ...eventData,
+                        pageUrl: window.location.href,
+                        pagePath: window.location.pathname
+                    },
+                    firstSeenTimestamp: this.firstSeenTimestamp
+                })
+            });
+
+            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);
+        }
     }
 
     /**
-     * Find the trigger node in an automation
-     * @param {Object} automation - The automation object
-     * @returns {Object|null} The trigger node or null
+     * Get the current people ID from session
      */
-    findTriggerNode(automation) {
-        return automation.nodes?.find((node) => node.type === 'trigger');
+    getPeopleId() {
+        return RbirdSessionManager.getInstance().getState()?.identify?.peopleId;
     }
 
     /**
-     * Evaluate trigger conditions and execute the automation
-     * @param {Object} automation - The automation object
-     * @param {Object} triggerNode - The trigger node
-     * @param {Object} context - The event context
+     * Get the anonymous ID from session
      */
-    evaluateAndExecute(automation, triggerNode, context) {
-        // Check if automation was already executed (for once-only automations)
-        if (this.executedAutomations.has(automation.id)) {
-            return;
-        }
-
-        // Evaluate trigger conditions
-        if (!this.evaluateTriggerConditions(triggerNode, context)) {
-            return;
-        }
-
-        // Mark as executed
-        this.executedAutomations.add(automation.id);
-
-        // Execute the workflow starting from the trigger node
-        this.executeWorkflow(automation, triggerNode.id, context);
+    getAnonymousId() {
+        return RbirdSessionManager.getInstance().getState()?.identify?.anonymousId ||
+               localStorage.getItem('rbird_anonymous_id') ||
+               this.generateAnonymousId();
     }
 
     /**
-     * Evaluate trigger conditions
-     * @param {Object} triggerNode - The trigger node
-     * @param {Object} context - The event context
-     * @returns {boolean} Whether conditions are met
+     * Generate and store an anonymous ID
      */
-    evaluateTriggerConditions(triggerNode, context) {
-        const conditions = triggerNode.data?.conditions || [];
-
-        for (const condition of conditions) {
-            const value = this.getContextValue(condition.property, context);
-
-            switch (condition.operator) {
-                case 'less_than':
-                    if (!(parseFloat(value) < parseFloat(condition.value))) return false;
-                    break;
-                case 'greater_than':
-                    if (!(parseFloat(value) > parseFloat(condition.value))) return false;
-                    break;
-                case 'equals':
-                    if (value !== condition.value) return false;
-                    break;
-                case 'contains':
-                    if (!String(value).includes(condition.value)) return false;
-                    break;
-            }
-        }
-
-        return true;
+    generateAnonymousId() {
+        const id = 'anon_' + Math.random().toString(36).substr(2, 9);
+        localStorage.setItem('rbird_anonymous_id', id);
+        return id;
     }
 
     /**
-     * Get a value from the context
-     * @param {string} property - The property path
-     * @param {Object} context - The context object
-     * @returns {any} The value
+     * Start polling for pending commands
      */
-    getContextValue(property, context) {
-        if (property === 'time_since_first_seen' || property === 'timeSinceFirstSeen') {
-            return context.timeSinceFirstSeen || (Date.now() - this.firstSeenTimestamp) / 1000;
+    startCommandPolling() {
+        if (this.pollingInterval) {
+            return; // Already polling
         }
 
-        // Navigate nested properties like "user.language"
-        const parts = property.split('.');
-        let value = context;
-        for (const part of parts) {
-            value = value?.[part];
-        }
-        return value;
+        // Poll immediately once
+        this.pollCommands();
+
+        // Then poll every 3 seconds
+        this.pollingInterval = setInterval(() => this.pollCommands(), 3000);
     }
 
     /**
-     * Execute a workflow from a starting node
-     * @param {Object} automation - The automation object
-     * @param {string} startNodeId - The ID of the starting node
-     * @param {Object} context - The execution context
+     * Stop command polling
      */
-    executeWorkflow(automation, startNodeId, context) {
-        // Find next nodes to execute
-        const nextEdges = automation.edges?.filter((edge) => edge.source === startNodeId) || [];
-
-        for (const edge of nextEdges) {
-            const targetNode = automation.nodes?.find((node) => node.id === edge.target);
-            if (!targetNode) continue;
-
-            if (targetNode.type === 'condition') {
-                // Evaluate condition and follow appropriate path
-                const conditionResult = this.evaluateCondition(targetNode, context);
-                const handleToFollow = conditionResult ? 'true' : 'false';
-
-                // Find edges from this condition with matching handle
-                const conditionEdges = automation.edges?.filter(
-                    (e) => e.source === targetNode.id && e.sourceHandle === handleToFollow
-                ) || [];
-
-                for (const condEdge of conditionEdges) {
-                    this.executeWorkflow(automation, condEdge.source, context);
-                }
-            } else if (targetNode.type === 'action') {
-                // Execute the action
-                this.executeAction(targetNode, context);
-
-                // Continue to next nodes if any
-                this.executeWorkflow(automation, targetNode.id, context);
-            }
+    stopCommandPolling() {
+        if (this.pollingInterval) {
+            clearInterval(this.pollingInterval);
+            this.pollingInterval = null;
         }
     }
 
     /**
-     * Evaluate a condition node
-     * @param {Object} conditionNode - The condition node
-     * @param {Object} context - The execution context
-     * @returns {boolean} The result of the condition
+     * Poll for pending commands from the backend
      */
-    evaluateCondition(conditionNode, context) {
-        const { property, operator, value } = conditionNode.data || {};
-
-        let actualValue;
-
-        // Get the value to compare
-        if (property?.startsWith('user.')) {
-            const userProp = property.replace('user.', '');
-            actualValue = RbirdSessionManager.getInstance().getUser()?.[userProp];
-        } else if (property?.startsWith('page.')) {
-            const pageProp = property.replace('page.', '');
-            if (pageProp === 'url') {
-                actualValue = window.location.href;
-            } else if (pageProp === 'path') {
-                actualValue = window.location.pathname;
+    async pollCommands() {
+        if (this.isPolling) return; // Prevent concurrent polls
+        this.isPolling = true;
+
+        try {
+            const response = await fetch(`${API}/ewidget/commands`, {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'apiKey': this.apiKey,
+                    'peopleId': this.getPeopleId() || '',
+                    'anonymousId': this.getAnonymousId() || ''
+                }
+            });
+
+            if (!response.ok) {
+                return;
             }
-        } else {
-            actualValue = context[property];
-        }
 
-        switch (operator) {
-            case 'equals':
-                return actualValue === value;
-            case 'not_equals':
-                return actualValue !== value;
-            case 'contains':
-                return String(actualValue).includes(value);
-            case 'starts_with':
-                return String(actualValue).startsWith(value);
-            default:
-                return false;
+            const commands = await response.json();
+
+            // Execute each command
+            for (const cmd of commands) {
+                await this.executeCommand(cmd);
+                await this.markDelivered(cmd.id);
+            }
+        } catch (error) {
+            // Silently fail - polling will retry
+        } finally {
+            this.isPolling = false;
         }
     }
 
     /**
-     * Execute an action node
-     * @param {Object} actionNode - The action node
-     * @param {Object} context - The execution context
+     * Execute a command from the backend
+     * @param {Object} cmd - The command to execute
      */
-    executeAction(actionNode, context) {
-        const { actionType, config } = actionNode.data || {};
-
-        console.log('[Rbird] Executing action:', actionType, config);
+    async executeCommand(cmd) {
+        console.log('[Rbird] Executing command:', cmd.type);
 
-        switch (actionType) {
-            case 'send_chat':
-                this.executeSendChat(config?.message, context);
-                break;
+        switch (cmd.type) {
             case 'show_banner':
-                this.executeShowBanner(config?.bannerId);
+                this.executeShowBanner(cmd.targetId);
                 break;
             case 'show_form':
-                this.executeShowForm(config?.formId);
+                this.executeShowForm(cmd.targetId);
                 break;
             case 'show_survey':
-                this.executeShowSurvey(config?.surveyId);
+                this.executeShowSurvey(cmd.targetId);
                 break;
-            case 'webhook':
-                this.executeWebhook(config?.webhookUrl, config?.webhookMethod || 'POST', context);
+            case 'send_chat':
+                this.executeSendChat(cmd.message, cmd.config);
                 break;
+            default:
+                console.warn('[Rbird] Unknown command type:', cmd.type);
+        }
+    }
+
+    /**
+     * Mark a command as delivered
+     * @param {string} commandId - The command ID
+     */
+    async markDelivered(commandId) {
+        try {
+            await fetch(`${API}/ewidget/commands/${commandId}/delivered`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'apiKey': this.apiKey
+                }
+            });
+        } catch (error) {
+            console.warn('[Rbird] Failed to mark command as delivered:', error);
         }
     }
 
     /**
-     * Execute send_chat action
+     * Execute send_chat command
      */
-    executeSendChat(message, context) {
+    executeSendChat(message, config) {
         if (!message) return;
 
-        // Replace placeholders in message
-        const processedMessage = this.processMessage(message, context);
+        console.log('[Rbird] Chat message triggered:', message);
 
-        // Dispatch event for the chat widget to handle
-        document.dispatchEvent(new CustomEvent('rbird:automation_chat', {
-            detail: { message: processedMessage }
-        }));
+        // Open the widget and send the message
+        const widget = RbirdWebsiteWidget.getInstance();
+        widget.openWebsiteWidget();
 
-        console.log('[Rbird] Chat message triggered:', processedMessage);
+        // 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
     }
 
     /**
-     * Execute show_banner action
+     * Execute show_banner command
      */
     executeShowBanner(bannerId) {
         if (!bannerId) return;
@@ -351,7 +312,7 @@ export class RbirdAutomationManager {
     }
 
     /**
-     * Execute show_form action
+     * Execute show_form command
      */
     executeShowForm(formId) {
         if (!formId) return;
@@ -359,48 +320,13 @@ export class RbirdAutomationManager {
     }
 
     /**
-     * Execute show_survey action
+     * Execute show_survey command
      */
     executeShowSurvey(surveyId) {
         if (!surveyId) return;
         RbirdSurveyManager.getInstance().showSurvey(surveyId, {});
     }
 
-    /**
-     * Execute webhook action
-     */
-    async executeWebhook(url, method, context) {
-        if (!url) return;
-
-        try {
-            const options = {
-                method: method,
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            };
-
-            if (method === 'POST') {
-                options.body = JSON.stringify(context);
-            }
-
-            await fetch(url, options);
-            console.log('[Rbird] Webhook executed:', url);
-        } catch (error) {
-            console.error('[Rbird] Webhook error:', error);
-        }
-    }
-
-    /**
-     * Process message placeholders
-     */
-    processMessage(message, context) {
-        return message
-            .replace(/\{\{user\.name\}\}/g, RbirdSessionManager.getInstance().getUser()?.name || '')
-            .replace(/\{\{user\.email\}\}/g, RbirdSessionManager.getInstance().getUser()?.email || '')
-            .replace(/\{\{page\.url\}\}/g, window.location.href);
-    }
-
     /**
      * Track a custom event
      * @param {string} eventName - The name of the event
@@ -411,6 +337,13 @@ export class RbirdAutomationManager {
             detail: { eventName, data }
         }));
     }
+
+    /**
+     * Cleanup when manager is destroyed
+     */
+    destroy() {
+        this.stopCommandPolling();
+    }
 }
 
 export default RbirdAutomationManager;

package/src/RbirdWebsiteWidget.js

@@ -990,6 +990,12 @@ export default class RbirdWebsiteWidget {
             }, 50);
             return true;
         }
+
+        // Even without saved position, update hide button position after DOM is ready
+        setTimeout(() => {
+            this.updateRelatedElementsPosition();
+        }, 50);
+
         return false;
     }
 
@@ -1001,27 +1007,20 @@ export default class RbirdWebsiteWidget {
 
         const buttonRect = this.websiteWidget.getBoundingClientRect();
 
-        // Check if we have a custom position (not default)
-        const savedPosition = this.loadWidgetPosition();
-        if (!savedPosition) return; // Use default CSS positioning
-
-        // Update badge position
-        if (this.countBadge) {
-            this.countBadge.style.left = `${buttonRect.right - 10}px`;
-            this.countBadge.style.right = 'unset';
-            this.countBadge.style.bottom = `${window.innerHeight - buttonRect.top - 15}px`;
-        }
-
         // Update hide button position (top right of bubble)
-        // Match CSS: bottom = spaceBottom + 45 = buttonRect.bottom + 45 - buttonRect.height
-        // Since buttonRect.top = window.innerHeight - buttonRect.bottom, and bubble height is ~50px
-        // bottom = window.innerHeight - buttonRect.top - 5 should equal spaceBottom + 45
         if (this.hideWidgetButton) {
             this.hideWidgetButton.style.left = `${buttonRect.right - 5}px`;
             this.hideWidgetButton.style.right = 'unset';
             this.hideWidgetButton.style.bottom = `${window.innerHeight - buttonRect.bottom + 55}px`;
         }
 
+        // Always update badge position based on current button position
+        if (this.countBadge) {
+            this.countBadge.style.left = `${buttonRect.right - 10}px`;
+            this.countBadge.style.right = 'unset';
+            this.countBadge.style.bottom = `${window.innerHeight - buttonRect.top - 15}px`;
+        }
+
         // Update message bubbles container position
         if (this.messageBubblesContainer) {
             this.positionMessageBubbles();