cuoral-ionic 0.0.8 → 0.1.0

package/dist/modal.js

@@ -3,10 +3,11 @@
  * Handles full-screen modal display with floating button
  */
 export class CuoralModal {
-    constructor(widgetUrl, showFloatingButton = true) {
+    constructor(widgetUrl, showFloatingButton = true, primaryColor = '#007AFF') {
         this.isOpen = false;
         this.widgetUrl = widgetUrl;
         this.showFloatingButton = showFloatingButton;
+        this.primaryColor = primaryColor;
     }
     /**
      * Update the widget URL (e.g., to include new session_id)
@@ -74,12 +75,12 @@ export class CuoralModal {
             width: '56px',
             height: '56px',
             borderRadius: '50%',
-            backgroundColor: '#007AFF',
+            backgroundColor: this.primaryColor,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             cursor: 'pointer',
-            boxShadow: '0 4px 12px rgba(0, 122, 255, 0.4)',
+            boxShadow: `0 4px 12px ${this.primaryColor}66`, // 40% opacity
             zIndex: '999999',
             transition: 'transform 0.2s, box-shadow 0.2s'
         });
@@ -87,13 +88,13 @@ export class CuoralModal {
         this.floatingButton.addEventListener('mouseenter', () => {
             if (this.floatingButton) {
                 this.floatingButton.style.transform = 'scale(1.1)';
-                this.floatingButton.style.boxShadow = '0 6px 16px rgba(0, 122, 255, 0.5)';
+                this.floatingButton.style.boxShadow = `0 6px 16px ${this.primaryColor}80`; // 50% opacity
             }
         });
         this.floatingButton.addEventListener('mouseleave', () => {
             if (this.floatingButton) {
                 this.floatingButton.style.transform = 'scale(1)';
-                this.floatingButton.style.boxShadow = '0 4px 12px rgba(0, 122, 255, 0.4)';
+                this.floatingButton.style.boxShadow = `0 4px 12px ${this.primaryColor}66`; // 40% opacity
             }
         });
         // Click to open modal

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cuoral-ionic",
-  "version": "0.0.8",
-  "description": "Cuoral Ionic Framework Library - Proactive customer success platform with support ticketing, customer intelligence, screen recording, and engagement tools",
+  "version": "0.1.0",
+  "description": "Cuoral Ionic Framework Library - silent churn prevention platform for Ionic apps. Provides screen recording, user interaction capture, and support widget integration for enhanced customer support experiences.",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -12,6 +12,7 @@
     "assets",
     "ios",
     "android",
+    "CuoralIonic.podspec",
     "README.md"
   ],
   "scripts": {

package/src/cuoral.ts

@@ -14,10 +14,14 @@ export interface CuoralOptions {
   widgetBaseUrl?: string; // Allow custom widget URL
   showFloatingButton?: boolean; // Show floating chat button (default: true)
   useModal?: boolean; // Use modal display mode (default: true)
+  primaryColor?: string; // Custom primary color (fetched from backend if not provided)
 }
 
 interface SessionConfiguration {
   customer_intelligence?: boolean;
+  color?: string; // Organization's primary brand color
+  config_name?: string;
+  support_name?: string;
   [key: string]: any;
 }
 
@@ -77,10 +81,7 @@ export class Cuoral {
     
     const widgetUrl = `${baseUrl}?${params.toString()}`;
     
-    // Initialize modal if enabled
-    if (this.options.useModal) {
-      this.modal = new CuoralModal(widgetUrl, this.options.showFloatingButton);
-    }
+    // Note: Modal will be created in initialize() after fetching primary color from backend
     
     // Initialize bridge and recorder
     this.bridge = new CuoralBridge({
@@ -106,6 +107,7 @@ export class Cuoral {
    */
   public async initialize(): Promise<void> {
     // Fetch session configuration and initialize intelligence if enabled by backend
+    // This also fetches the organization's primary color
     await this.initializeIntelligence();
     
     console.log('[Cuoral] Initialize - Session ID:', localStorage.getItem('__x_loadID'));
@@ -118,7 +120,7 @@ export class Cuoral {
     // Recreate modal if it was destroyed (e.g., after clearSession)
     if (this.options.useModal && !this.modal) {
       const widgetUrl = this.getWidgetUrl();
-      this.modal = new CuoralModal(widgetUrl, this.options.showFloatingButton);
+      this.modal = new CuoralModal(widgetUrl, this.options.showFloatingButton, this.options.primaryColor);
     }
     
     // Update modal URL with session ID
@@ -148,6 +150,15 @@ export class Cuoral {
       // Fetch session configuration
       const config = await this.fetchSessionConfiguration(sessionId);
       
+      // Extract organization's primary color from config if available
+      if (!this.options.primaryColor && config?.color) {
+        this.options.primaryColor = config.color;
+        console.log('[Cuoral] Using organization primary color:', this.options.primaryColor);
+      } else if (!this.options.primaryColor) {
+        this.options.primaryColor = '#007AFF';
+        console.log('[Cuoral] Using default primary color');
+      }
+      
       // If session was invalid/expired, try to initiate a new one
       if (!config && !localStorage.getItem('__x_loadID')) {
         sessionId = await this.initiateSession();

package/src/intelligence.ts

@@ -107,11 +107,13 @@ export class CuoralIntelligence {
   // Session replay state
   private rrwebStopFn: any = null;
   private rrwebEvents: any[] = [];
+  private rrwebEmit: ((event: any) => void) | null = null; // Store emit function for custom events
   private customEvents: CustomEventData[] = [];
   private sessionReplayTimer: any = null;
   private clickTimestamps: Map<string, number[]> = new Map();
   private rageClickThreshold = 5; // 5 rapid clicks
   private rageClickWindowMs = 2000; // Within 2 seconds
+  private shadowDOMNodeMap: Map<Element, number> = new Map(); // Map elements to unique IDs
 
   constructor(sessionId: string) {
     this.sessionId = sessionId;
@@ -677,6 +679,7 @@ export class CuoralIntelligence {
 
   /**
    * Setup session replay with rrweb
+   * Captures everything for maximum replay fidelity
    */
   private setupSessionReplay(): void {
     if (!this.sessionId) {
@@ -684,22 +687,67 @@ export class CuoralIntelligence {
       return;
     }
 
-    // Start rrweb recording
+    // Start rrweb recording with aggressive capture settings
     this.rrwebStopFn = rrweb.record({
       emit: (event) => {
         this.rrwebEvents.push(event);
+        this.rrwebEmit = this.rrwebEmit || ((e: any) => this.rrwebEvents.push(e)); // Store emit reference
       },
-      checkoutEveryNms: 60000, // Full snapshot every minute
+      
+      // Take full snapshots more frequently to catch dynamic content
+      checkoutEveryNms: 30000, // Every 30 seconds (was 60s)
+      
+      // Capture everything - minimize sampling throttling
       sampling: {
-        scroll: 150, // Throttle scroll events
-        media: 800,
-        input: 'last', // Only record final input value (privacy)
+        scroll: 50, // Capture scroll very frequently (was 150)
+        media: 200, // Capture media interactions frequently (was 800)
+        input: 'last', // Only record final input value (privacy for passwords)
+        mousemove: true, // Capture all mouse movements
+        mouseInteraction: true, // Capture all mouse interactions
+      },
+      
+      // Privacy: Only mask sensitive inputs (passwords, credit cards)
+      // Everything else is captured for maximum replay fidelity
+      maskAllInputs: false, // Don't mask all inputs
+      maskInputOptions: {
+        password: true, // Mask password fields
+        email: false, // Capture emails
+        text: false, // Capture text inputs
+        textarea: false, // Capture textareas
+        select: false, // Capture select dropdowns
+        // Mask credit card patterns
+      },
+      
+      // Capture all content types
+      recordCanvas: true, // Capture canvas elements (charts, games, etc.)
+      
+      // Inline everything for perfect replay
+      inlineStylesheet: true, // Inline all external stylesheets
+      inlineImages: true, // Inline images as base64 (larger but more reliable)
+      collectFonts: true, // Capture custom fonts
+      
+      // Block/ignore classes - customers can add these to sensitive elements
+      blockClass: 'cuoral-block', // Add to elements that should be blocked (replaced with placeholder)
+      ignoreClass: 'cuoral-ignore', // Add to elements that should be ignored (not captured)
+      
+      // Capture mutations aggressively
+      slimDOMOptions: {
+        // Don't slim anything - capture full fidelity
+        script: false, // Keep scripts
+        comment: false, // Keep comments
+        headFavicon: false, // Keep favicons
+        headWhitespace: false, // Keep whitespace
+        headMetaSocial: false, // Keep meta tags
+        headMetaRobots: false, // Keep robots meta
+        headMetaHttpEquiv: false, // Keep http-equiv
+        headMetaAuthorship: false, // Keep authorship
+        headMetaDescKeywords: false, // Keep description/keywords
       },
-      maskAllInputs: true, // Mask sensitive inputs (privacy)
-      blockClass: 'cuoral-block',
-      ignoreClass: 'cuoral-ignore',
     });
 
+    // Setup Shadow DOM observer to capture Ionic components
+    this.setupShadowDOMObserver();
+
     // Setup custom event tracking
     this.setupClickTracking();
     this.setupScrollTracking();
@@ -873,6 +921,181 @@ export class CuoralIntelligence {
     });
   }
 
+  /**
+   * Setup Shadow DOM observer to capture Ionic component content
+   * Emits custom rrweb events with Shadow DOM snapshots for viewer reconstruction
+   */
+  private setupShadowDOMObserver(): void {
+    let shadowNodeIdCounter = 1;
+    let captureTimeout: any = null;
+    
+    const captureShadowDOM = (immediate = false) => {
+      // Debounce rapid calls (e.g., during scroll)
+      if (!immediate && captureTimeout) {
+        clearTimeout(captureTimeout);
+      }
+      
+      const doCapture = () => {
+        if (!this.rrwebEmit) return;
+        
+        const shadowDOMData: any[] = [];
+        const elementsWithShadowDOM = document.querySelectorAll('*');
+        
+        elementsWithShadowDOM.forEach((element) => {
+          if (element.shadowRoot) {
+            try {
+              // Assign unique ID to element if it doesn't have one
+              if (!this.shadowDOMNodeMap.has(element)) {
+                this.shadowDOMNodeMap.set(element, shadowNodeIdCounter++);
+              }
+              
+              const nodeId = this.shadowDOMNodeMap.get(element);
+              const tagName = element.tagName.toLowerCase();
+              
+              // Capture Shadow DOM HTML
+              const shadowHTML = element.shadowRoot.innerHTML;
+              
+              // Capture ALL styles from Shadow DOM
+              const styleSheets: string[] = [];
+              
+              // 1. Capture inline <style> tags
+              const shadowStyles = element.shadowRoot.querySelectorAll('style');
+              shadowStyles.forEach((styleEl) => {
+                if (styleEl.textContent) {
+                  styleSheets.push(styleEl.textContent);
+                }
+              });
+              
+              // 2. Capture adoptedStyleSheets (modern CSS API)
+              if ((element.shadowRoot as any).adoptedStyleSheets) {
+                try {
+                  (element.shadowRoot as any).adoptedStyleSheets.forEach((sheet: CSSStyleSheet) => {
+                    try {
+                      const rules = Array.from(sheet.cssRules).map(rule => rule.cssText).join('\n');
+                      if (rules) styleSheets.push(rules);
+                    } catch (e) {
+                      // CORS blocked stylesheet
+                    }
+                  });
+                } catch (e) {
+                  // Browser doesn't support adoptedStyleSheets
+                }
+              }
+              
+              // 3. Capture external <link> stylesheets in Shadow DOM
+              const shadowLinks = element.shadowRoot.querySelectorAll('link[rel="stylesheet"]');
+              shadowLinks.forEach((linkEl) => {
+                const href = (linkEl as HTMLLinkElement).href;
+                if (href) {
+                  // Store link href so dashboard can also load it
+                  styleSheets.push(`/* @import url("${href}"); */`);
+                }
+              });
+              
+              // 4. Capture CSS custom properties from host element
+              // Ionic components use CSS variables extensively (--ion-color-*, etc.)
+              const computedStyle = window.getComputedStyle(element);
+              const cssVariables: string[] = [];
+              
+              // Get all CSS custom properties from host
+              for (let i = 0; i < computedStyle.length; i++) {
+                const propertyName = computedStyle[i];
+                if (propertyName.startsWith('--')) {
+                  const propertyValue = computedStyle.getPropertyValue(propertyName).trim();
+                  if (propertyValue) {
+                    cssVariables.push(`${propertyName}: ${propertyValue};`);
+                  }
+                }
+              }
+              
+              // Add CSS variables as a :host rule
+              if (cssVariables.length > 0) {
+                styleSheets.push(`:host { ${cssVariables.join(' ')} }`);
+              }
+              
+              // Get element's CSS selector for reconstruction
+              const selector = this.getElementSelector(element as HTMLElement);
+              
+              // Capture element attributes (Ionic uses color="primary", mode="ios", etc.)
+              const attributes: Record<string, string> = {};
+              for (let i = 0; i < element.attributes.length; i++) {
+                const attr = element.attributes[i];
+                // Skip internal attributes
+                if (!attr.name.startsWith('data-cuoral') && !attr.name.startsWith('ng-')) {
+                  attributes[attr.name] = attr.value;
+                }
+              }
+              
+              // Create Shadow DOM snapshot
+              shadowDOMData.push({
+                nodeId,
+                tagName,
+                selector,
+                attributes, // NEW: Include element attributes
+                shadowHTML,
+                styleSheets,
+                timestamp: Date.now(),
+              });
+              
+              // Also set data attribute as fallback
+              element.setAttribute('data-cuoral-shadow-id', String(nodeId));
+              
+            } catch (error) {
+              // Shadow DOM might be closed
+              console.warn('[Cuoral Intelligence] Failed to capture Shadow DOM:', error);
+            }
+          }
+        });
+        
+        // Emit custom event with Shadow DOM data
+        if (shadowDOMData.length > 0 && this.rrwebEmit) {
+          this.rrwebEmit({
+            type: 5, // CustomEvent type in rrweb
+            data: {
+              tag: 'cuoral-shadow-dom',
+              payload: {
+                shadows: shadowDOMData,
+                url: window.location.href,
+              },
+            },
+            timestamp: Date.now(),
+          });
+          
+          console.log(`[Cuoral Intelligence] Captured ${shadowDOMData.length} Shadow DOM elements`);
+        }
+      };
+      
+      if (immediate) {
+        doCapture();
+      } else {
+        // Debounce: wait 500ms after last call
+        captureTimeout = setTimeout(doCapture, 500);
+      }
+    };
+
+    // Run immediately on init
+    captureShadowDOM(true);
+
+    // Observe DOM mutations to catch dynamically added Shadow DOM elements
+    const observer = new MutationObserver(() => {
+      captureShadowDOM(false); // Debounced
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+
+    // Capture on scroll events (debounced)
+    window.addEventListener('scroll', () => captureShadowDOM(false), { passive: true });
+    
+    // Also listen for Ionic scroll events
+    document.addEventListener('ionScroll', () => captureShadowDOM(false), { passive: true });
+
+    // Periodic capture as fallback (every 5 seconds now, since we have scroll capture)
+    setInterval(() => captureShadowDOM(true), 5000);
+  }
+
   /**
    * Track custom business events (flows, features, etc.)
    */

package/src/modal.ts

@@ -9,11 +9,13 @@ export class CuoralModal {
   private isOpen = false;
   private widgetUrl: string;
   private showFloatingButton: boolean;
+  private primaryColor: string;
   private lastLoadedUrl?: string;
 
-  constructor(widgetUrl: string, showFloatingButton = true) {
+  constructor(widgetUrl: string, showFloatingButton = true, primaryColor = '#007AFF') {
     this.widgetUrl = widgetUrl;
     this.showFloatingButton = showFloatingButton;
+    this.primaryColor = primaryColor;
   }
 
   /**
@@ -94,12 +96,12 @@ export class CuoralModal {
       width: '56px',
       height: '56px',
       borderRadius: '50%',
-      backgroundColor: '#007AFF',
+      backgroundColor: this.primaryColor,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
       cursor: 'pointer',
-      boxShadow: '0 4px 12px rgba(0, 122, 255, 0.4)',
+      boxShadow: `0 4px 12px ${this.primaryColor}66`, // 40% opacity
       zIndex: '999999',
       transition: 'transform 0.2s, box-shadow 0.2s'
     });
@@ -108,14 +110,14 @@ export class CuoralModal {
     this.floatingButton.addEventListener('mouseenter', () => {
       if (this.floatingButton) {
         this.floatingButton.style.transform = 'scale(1.1)';
-        this.floatingButton.style.boxShadow = '0 6px 16px rgba(0, 122, 255, 0.5)';
+        this.floatingButton.style.boxShadow = `0 6px 16px ${this.primaryColor}80`; // 50% opacity
       }
     });
 
     this.floatingButton.addEventListener('mouseleave', () => {
       if (this.floatingButton) {
         this.floatingButton.style.transform = 'scale(1)';
-        this.floatingButton.style.boxShadow = '0 4px 12px rgba(0, 122, 255, 0.4)';
+        this.floatingButton.style.boxShadow = `0 4px 12px ${this.primaryColor}66`; // 40% opacity
       }
     });