@lookalike/widget 1.1.0 → 1.2.1

package/dist/README.md

@@ -73,8 +73,8 @@ A lightweight, self-contained widget for embedding Lookalike conversational AI a
 
 ## File Sizes
 
-- **Minified**: ~8KB
-- **Gzipped**: ~2KB (estimated)
+- **Minified**: ~14KB
+- **Gzipped**: ~4KB (estimated)
 
 ## License
 

package/dist/lookalike-widget.js

@@ -8,9 +8,13 @@
 // Lookalike Widget - Standalone Embed Version
 // Self-contained widget for copy/paste embedding (no Wix dependencies)
 // Uses shadow DOM for complete encapsulation
+// Version 1.2.0 - Debug Enhanced
 
+const WIDGET_VERSION = '1.2.0';
 const DEFAULT_UUID = '019b4c51-7701-726a-8f59-e89a854682f3';
 
+console.log(`🚀 Lookalike Widget v${WIDGET_VERSION} loading...`);
+
 function getBaseUrl() {
   const hostname = window.location.hostname;
   if (hostname === 'localhost' || hostname === '127.0.0.1') {
@@ -36,10 +40,22 @@ class LookalikeWidget extends HTMLElement {
     this.currentIframe = null;
     this.shadow = null;
     this.messageHandler = null;
+    this.isInWixEmbed = false;
   }
 
   connectedCallback() {
-    console.log('🚀 Lookalike Widget initializing...');
+    console.log(`🚀 Lookalike Widget v${WIDGET_VERSION} initializing...`);
+    console.log('📊 Environment Info:', {
+      hostname: window.location.hostname,
+      href: window.location.href,
+      referrer: document.referrer,
+      userAgent: navigator.userAgent,
+      viewport: `${window.innerWidth}x${window.innerHeight}`,
+      inIframe: window !== window.parent
+    });
+    
+    // Detect if we're in a Wix custom code embed (or similar constrained iframe)
+    this.detectWixEmbed();
     
     // Create shadow DOM for encapsulation
     this.shadow = this.attachShadow({ mode: 'closed' });
@@ -51,6 +67,53 @@ class LookalikeWidget extends HTMLElement {
     this.initLive();
   }
 
+  detectWixEmbed() {
+    console.log('🔍 Starting Wix embed detection...');
+    
+    try {
+      // Check if we're in an iframe and can't access parent
+      const inIframe = window !== window.parent;
+      console.log('📱 In iframe:', inIframe);
+      
+      // Check for Wix-specific indicators
+      const wixHostname = window.location.hostname.includes('wix.com') || window.location.hostname.includes('wixsite.com');
+      const wixSearch = window.location.search.includes('wix');
+      const wixReferrer = document.referrer.includes('wix');
+      const smallDimensions = window.innerWidth < 500 || window.innerHeight < 300;
+      
+      console.log('🔍 Wix Detection Results:', {
+        inIframe,
+        wixHostname,
+        wixSearch, 
+        wixReferrer,
+        smallDimensions,
+        windowSize: `${window.innerWidth}x${window.innerHeight}`
+      });
+      
+      const hasWixIndicators = wixHostname || wixSearch || wixReferrer || (inIframe && smallDimensions);
+
+      this.isInWixEmbed = inIframe && hasWixIndicators;
+      
+      if (this.isInWixEmbed) {
+        console.log('✅ Wix embed environment DETECTED - using full-screen overlay mode');
+      } else {
+        console.log('❌ Standard environment detected - using normal positioning');
+      }
+      
+      // Force Wix mode for testing if URL contains debug parameter
+      if (window.location.search.includes('force-wix-mode')) {
+        console.log('🧪 FORCE WIX MODE activated via URL parameter');
+        this.isInWixEmbed = true;
+      }
+      
+    } catch (error) {
+      // If we can't access parent due to cross-origin, assume we're in an embed
+      console.log('⚠️ Cross-origin iframe error:', error.message);
+      this.isInWixEmbed = true;
+      console.log('🔒 Cross-origin iframe detected - using full-screen overlay mode');
+    }
+  }
+
   loadConfiguration() {
     // Read configuration from HTML attributes
     if (this.hasAttribute('uuid')) {
@@ -117,7 +180,53 @@ class LookalikeWidget extends HTMLElement {
   initLive() {
     console.log('🚀 Initializing live widget with config:', this.config);
     
-    // Set host element positioning and initial size
+    if (this.isInWixEmbed) {
+      this.initWixEmbedMode();
+    } else {
+      this.initStandardMode();
+    }
+    
+    this.injectShadowContent();
+    this.injectIframe();
+  }
+
+  initWixEmbedMode() {
+    console.log('📱 Initializing Wix embed mode with full-screen overlay');
+    
+    // Make the host element a full-screen transparent overlay
+    const overlayStyles = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      border: 0;
+      z-index: 9999;
+      background: transparent;
+      pointer-events: none;
+      display: block;
+    `;
+    
+    this.style.cssText = overlayStyles;
+    
+    console.log('🎨 Applied overlay styles:', overlayStyles);
+    console.log('📏 Host element computed styles:', {
+      position: getComputedStyle(this).position,
+      width: getComputedStyle(this).width,
+      height: getComputedStyle(this).height,
+      zIndex: getComputedStyle(this).zIndex,
+      pointerEvents: getComputedStyle(this).pointerEvents
+    });
+    
+    // Add collapsed class initially
+    this.className = 'collapsed wix-embed';
+    console.log('🏷️ Applied classes:', this.className);
+  }
+
+  initStandardMode() {
+    console.log('💻 Initializing standard mode');
+    
+    // Set host element positioning and initial size (original behavior)
     this.style.cssText = `
       position: fixed;
       bottom: 16px;
@@ -136,9 +245,6 @@ class LookalikeWidget extends HTMLElement {
     
     // Add collapsed class initially
     this.className = 'collapsed';
-    
-    this.injectShadowContent();
-    this.injectIframe();
   }
 
   injectShadowContent() {
@@ -151,18 +257,60 @@ class LookalikeWidget extends HTMLElement {
         font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       }
 
-      :host(.collapsed) {
+      /* Standard mode styles */
+      :host(.collapsed:not(.wix-embed)) {
         height: 60px !important;
         max-height: 60px !important;
       }
 
-      :host(.expanded) {
+      :host(.expanded:not(.wix-embed)) {
+        height: 520px;
+        max-height: calc(100vh - 32px);
+      }
+
+      /* Wix embed mode: container for positioned widget */
+      .wix-widget-container {
+        position: absolute;
+        bottom: 16px;
+        right: 16px;
+        width: 380px;
+        height: 60px;
+        max-width: calc(100vw - 32px);
+        border-radius: 16px;
+        box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        background: transparent;
+        pointer-events: auto;
+      }
+
+      /* Debug info overlay */
+      .debug-info {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 8px;
+        border-radius: 4px;
+        font-size: 11px;
+        font-family: monospace;
+        z-index: 10000;
+        max-width: 300px;
+        pointer-events: none;
+        white-space: pre-line;
+      }
+
+      :host(.wix-embed.collapsed) .wix-widget-container {
+        height: 60px;
+      }
+
+      :host(.wix-embed.expanded) .wix-widget-container {
         height: 520px;
         max-height: calc(100vh - 32px);
       }
 
       @media (max-width: 639px) {
-        :host(.expanded) {
+        :host(.expanded:not(.wix-embed)) {
           width: 100vw;
           height: 100vh;
           max-width: none;
@@ -173,13 +321,13 @@ class LookalikeWidget extends HTMLElement {
           box-shadow: none;
         }
         
-        :host {
+        :host(:not(.wix-embed)) {
           width: calc(100vw - 16px);
           right: 8px;
           bottom: 8px;
         }
         
-        :host(.collapsed) {
+        :host(.collapsed:not(.wix-embed)) {
           height: 60px !important;
           max-height: 60px !important;
           width: calc(100vw - 16px);
@@ -188,6 +336,33 @@ class LookalikeWidget extends HTMLElement {
           border-radius: 16px;
           box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
         }
+
+        /* Wix embed mobile styles */
+        :host(.wix-embed.expanded) .wix-widget-container {
+          width: 100vw;
+          height: 100vh;
+          max-width: none;
+          max-height: none;
+          bottom: 0;
+          right: 0;
+          border-radius: 0;
+          box-shadow: none;
+        }
+        
+        .wix-widget-container {
+          width: calc(100vw - 16px);
+          right: 8px;
+          bottom: 8px;
+        }
+        
+        :host(.wix-embed.collapsed) .wix-widget-container {
+          height: 60px !important;
+          width: calc(100vw - 16px);
+          right: 8px;
+          bottom: 8px;
+          border-radius: 16px;
+          box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
+        }
       }
       
       .loading {
@@ -254,17 +429,46 @@ class LookalikeWidget extends HTMLElement {
     
     this.shadow.appendChild(style);
     
+    // Add debug info if URL contains debug parameter
+    if (window.location.search.includes('debug') || window.location.search.includes('force-wix-mode')) {
+      this.addDebugInfo();
+    }
+    
     // Create container for iframe
     const container = document.createElement('div');
-    container.style.cssText = `
-      width: 100%;
-      height: 100%;
-      border-radius: inherit;
-    `;
+    
+    if (this.isInWixEmbed) {
+      // In Wix embed mode, create a positioned container within the full-screen overlay
+      container.className = 'wix-widget-container';
+    } else {
+      // In standard mode, container fills the host element
+      container.style.cssText = `
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+      `;
+    }
     
     this.shadow.appendChild(container);
   }
 
+  addDebugInfo() {
+    const debugDiv = document.createElement('div');
+    debugDiv.className = 'debug-info';
+    
+    const info = `Lookalike Widget v${WIDGET_VERSION}
+Mode: ${this.isInWixEmbed ? 'Wix Embed' : 'Standard'}
+Viewport: ${window.innerWidth}x${window.innerHeight}
+In iframe: ${window !== window.parent}
+Hostname: ${window.location.hostname}
+Classes: ${this.className}`;
+    
+    debugDiv.textContent = info;
+    this.shadow.appendChild(debugDiv);
+    
+    console.log('🐛 Debug info added to widget');
+  }
+
   buildIframeSrc() {
     if (!this.config.storyfileUuid) {
       console.error('❌ No storyfile UUID configured');
@@ -296,11 +500,29 @@ class LookalikeWidget extends HTMLElement {
   }
 
   injectIframe() {
-    const container = this.shadow.querySelector('div:last-child');
+    const containerSelector = this.isInWixEmbed ? '.wix-widget-container' : 'div:last-child';
+    const container = this.shadow.querySelector(containerSelector);
+    
+    console.log('🖼️ Injecting iframe into container:', containerSelector);
+    console.log('📦 Container found:', !!container);
+    
+    if (container) {
+      console.log('📐 Container rect:', container.getBoundingClientRect());
+      console.log('🎨 Container computed styles:', {
+        position: getComputedStyle(container).position,
+        width: getComputedStyle(container).width,
+        height: getComputedStyle(container).height,
+        bottom: getComputedStyle(container).bottom,
+        right: getComputedStyle(container).right
+      });
+    }
     
     // Remove existing iframe if present
-    const existingIframe = container.querySelector('iframe');
-    if (existingIframe) existingIframe.remove();
+    const existingIframe = container?.querySelector('iframe');
+    if (existingIframe) {
+      console.log('🗑️ Removing existing iframe');
+      existingIframe.remove();
+    }
 
     const iframeSrc = this.buildIframeSrc();
     if (!iframeSrc) {
@@ -308,6 +530,8 @@ class LookalikeWidget extends HTMLElement {
       return;
     }
 
+    console.log('🔗 Creating iframe with src:', iframeSrc);
+
     const iframe = document.createElement('iframe');
     iframe.className = 'loading';
     iframe.src = iframeSrc;
@@ -315,19 +539,22 @@ class LookalikeWidget extends HTMLElement {
     iframe.loading = 'lazy';
     iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups allow-presentation');
     
-    iframe.onerror = () => {
-      console.error('❌ Failed to load widget iframe');
+    iframe.onerror = (error) => {
+      console.error('❌ Failed to load widget iframe:', error);
       this.showLoadingError(container);
     };
     
     iframe.onload = () => {
       console.log('✅ Iframe loaded successfully');
+      console.log('📐 Iframe rect after load:', iframe.getBoundingClientRect());
       iframe.classList.remove('loading');
     };
     
     this.currentIframe = iframe;
     this.setupMessageHandling(iframe);
     container.appendChild(iframe);
+    
+    console.log('🎯 Iframe injection complete');
   }
 
   setupMessageHandling(iframe) {
@@ -337,6 +564,8 @@ class LookalikeWidget extends HTMLElement {
     }
 
     this.messageHandler = (e) => {
+      console.log('📨 Received message:', e.data, 'from:', e.origin);
+      
       if (e.source !== iframe.contentWindow) return;
 
       if (e.data?.type === 'lookalike-widget-ready') {
@@ -348,7 +577,18 @@ class LookalikeWidget extends HTMLElement {
           if (ev.data?.type === 'lookalike-widget-resize') {
             const newClass = ev.data.collapsed ? 'collapsed' : 'expanded';
             console.log(`📏 Widget resize: ${this.className} → ${newClass}`);
-            this.className = newClass;
+            console.log('📐 Before resize - Host element rect:', this.getBoundingClientRect());
+            
+            this.className = this.isInWixEmbed ? `${newClass} wix-embed` : newClass;
+            
+            // Log after resize
+            setTimeout(() => {
+              console.log('📐 After resize - Host element rect:', this.getBoundingClientRect());
+              const container = this.shadow.querySelector(this.isInWixEmbed ? '.wix-widget-container' : 'div:last-child');
+              if (container) {
+                console.log('📐 Widget container rect:', container.getBoundingClientRect());
+              }
+            }, 100);
           }
         };
 
@@ -361,6 +601,7 @@ class LookalikeWidget extends HTMLElement {
     };
 
     window.addEventListener('message', this.messageHandler);
+    console.log('👂 Message handler installed');
   }
 
   showConfigurationError(container) {

package/dist/lookalike-widget.min.js

@@ -5,4 +5,4 @@
  * Copy/paste embed widget for conversational AI avatars
  * Usage: <lookalike-widget uuid="your-uuid"></lookalike-widget>
  */
-const DEFAULT_UUID="019b4c51-7701-726a-8f59-e89a854682f3";function getBaseUrl(){const e=window.location.hostname;return"localhost"===e||"127.0.0.1"===e?(console.log("🏠 Local development detected"),"http://localhost:3000"):(console.log("🌐 Using production URL"),"https://lookalike.com")}const BASE_URL=getBaseUrl();class LookalikeWidget extends HTMLElement{constructor(){super(),this.config={storyfileUuid:null,primaryColor:"#2563eb",enableText:!0,enableVideo:!0,enableAudio:!0},this.currentIframe=null,this.shadow=null,this.messageHandler=null}connectedCallback(){console.log("🚀 Lookalike Widget initializing..."),this.shadow=this.attachShadow({mode:"closed"}),this.loadConfiguration(),this.initLive()}loadConfiguration(){this.hasAttribute("uuid")&&(this.config.storyfileUuid=this.getAttribute("uuid")),this.hasAttribute("color")&&(this.config.primaryColor=this.getAttribute("color")),this.hasAttribute("text")&&(this.config.enableText="false"!==this.getAttribute("text")),this.hasAttribute("video")&&(this.config.enableVideo="false"!==this.getAttribute("video")),this.hasAttribute("audio")&&(this.config.enableAudio="false"!==this.getAttribute("audio")),this.config.storyfileUuid||(this.config.storyfileUuid=DEFAULT_UUID,console.log("🔧 Using default UUID:",DEFAULT_UUID)),console.log("📥 Loaded config from attributes:",this.config)}static get observedAttributes(){return["uuid","color","text","video","audio"]}attributeChangedCallback(e,t,n){if(t!==n&&this.shadow){switch(console.log(`🔄 Attribute changed: ${e} = ${n}`),e){case"uuid":this.config.storyfileUuid=n;break;case"color":this.config.primaryColor=n;break;case"text":this.config.enableText="false"!==n;break;case"video":this.config.enableVideo="false"!==n;break;case"audio":this.config.enableAudio="false"!==n}console.log("🔄 Updated config after attribute change:",this.config),this.isConnected&&(this.shadow.innerHTML="",this.initLive())}}initLive(){console.log("🚀 Initializing live widget with config:",this.config),this.style.cssText="\n      position: fixed;\n      bottom: 16px;\n      right: 16px;\n      width: 380px;\n      height: 60px;\n      max-width: calc(100vw - 32px);\n      border: 0;\n      border-radius: 16px;\n      z-index: 9999;\n      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      background: transparent;\n      display: block;\n    ",this.className="collapsed",this.injectShadowContent(),this.injectIframe()}injectShadowContent(){const e=document.createElement("style");e.textContent="\n      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');\n      \n      :host {\n        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n      }\n\n      :host(.collapsed) {\n        height: 60px !important;\n        max-height: 60px !important;\n      }\n\n      :host(.expanded) {\n        height: 520px;\n        max-height: calc(100vh - 32px);\n      }\n\n      @media (max-width: 639px) {\n        :host(.expanded) {\n          width: 100vw;\n          height: 100vh;\n          max-width: none;\n          max-height: none;\n          bottom: 0;\n          right: 0;\n          border-radius: 0;\n          box-shadow: none;\n        }\n        \n        :host {\n          width: calc(100vw - 16px);\n          right: 8px;\n          bottom: 8px;\n        }\n        \n        :host(.collapsed) {\n          height: 60px !important;\n          max-height: 60px !important;\n          width: calc(100vw - 16px);\n          right: 8px;\n          bottom: 8px;\n          border-radius: 16px;\n          box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);\n        }\n      }\n      \n      .loading {\n        background: #f3f4f6;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        height: 100%;\n        border-radius: inherit;\n      }\n      \n      .loading::after {\n        content: 'Loading chat...';\n        color: #6b7280;\n        font-size: 14px;\n      }\n\n      .error-container {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        background: #f9fafb;\n        border-radius: inherit;\n        border: 2px dashed #d1d5db;\n        color: #6b7280;\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n        text-align: center;\n        padding: 20px;\n        box-sizing: border-box;\n      }\n\n      .error-icon {\n        font-size: 24px;\n        margin-bottom: 8px;\n      }\n\n      .error-title {\n        font-size: 14px;\n        font-weight: 500;\n        margin-bottom: 4px;\n      }\n\n      .error-message {\n        font-size: 12px;\n      }\n\n      .error-uuid {\n        font-size: 11px;\n        margin-top: 8px;\n        opacity: 0.7;\n      }\n\n      iframe {\n        width: 100%;\n        height: 100%;\n        border: 0;\n        border-radius: inherit;\n      }\n    ",this.shadow.appendChild(e);const t=document.createElement("div");t.style.cssText="\n      width: 100%;\n      height: 100%;\n      border-radius: inherit;\n    ",this.shadow.appendChild(t)}buildIframeSrc(){if(!this.config.storyfileUuid)return console.error("❌ No storyfile UUID configured"),null;const e=new URL(`/${this.config.storyfileUuid}/chat`,BASE_URL);e.searchParams.set("embed",""),e.searchParams.set("variant","floating"),e.searchParams.set("anchor","bottom-right");const t=[];return this.config.enableText&&t.push("text"),this.config.enableAudio&&t.push("audio"),this.config.enableVideo&&t.push("video"),t.length>0&&t.length<3&&e.searchParams.set("modes",t.join(",")),this.config.primaryColor&&"#2563eb"!==this.config.primaryColor&&e.searchParams.set("theme",`primary:${this.config.primaryColor}`),console.log("🔗 Built iframe URL:",e.toString()),e.toString()}injectIframe(){const e=this.shadow.querySelector("div:last-child"),t=e.querySelector("iframe");t&&t.remove();const n=this.buildIframeSrc();if(!n)return void this.showConfigurationError(e);const i=document.createElement("iframe");i.className="loading",i.src=n,i.allow="microphone; camera",i.loading="lazy",i.setAttribute("sandbox","allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"),i.onerror=()=>{console.error("❌ Failed to load widget iframe"),this.showLoadingError(e)},i.onload=()=>{console.log("✅ Iframe loaded successfully"),i.classList.remove("loading")},this.currentIframe=i,this.setupMessageHandling(i),e.appendChild(i)}setupMessageHandling(e){this.messageHandler&&window.removeEventListener("message",this.messageHandler),this.messageHandler=t=>{if(t.source===e.contentWindow&&"lookalike-widget-ready"===t.data?.type){console.log("🎉 Widget ready, setting up communication");const t=new MessageChannel;t.port1.onmessage=e=>{if(console.log("📏 Received resize message:",e.data),"lookalike-widget-resize"===e.data?.type){const t=e.data.collapsed?"collapsed":"expanded";console.log(`📏 Widget resize: ${this.className} → ${t}`),this.className=t}},e.contentWindow.postMessage({type:"lookalike-init-channel"},BASE_URL,[t.port2])}},window.addEventListener("message",this.messageHandler)}showConfigurationError(e){e.innerHTML='\n      <div class="error-container">\n        <div class="error-icon">⚠️</div>\n        <div class="error-title">Configuration Error</div>\n        <div class="error-message">No UUID configured. Please add a uuid attribute.</div>\n        <div class="error-uuid">Expected: &lt;lookalike-widget uuid="your-uuid"&gt;</div>\n      </div>\n    '}showLoadingError(e){e.innerHTML=`\n      <div class="error-container">\n        <div class="error-icon">⚠️</div>\n        <div class="error-title">Widget Loading Error</div>\n        <div class="error-message">Check console for details</div>\n        <div class="error-uuid">UUID: ${this.config.storyfileUuid}</div>\n      </div>\n    `}disconnectedCallback(){this.messageHandler&&(window.removeEventListener("message",this.messageHandler),this.messageHandler=null)}}customElements.define("lookalike-widget",LookalikeWidget),"undefined"!=typeof module&&module.exports&&(module.exports=LookalikeWidget);
+const WIDGET_VERSION="1.2.0",DEFAULT_UUID="019b4c51-7701-726a-8f59-e89a854682f3";function getBaseUrl(){const e=window.location.hostname;return"localhost"===e||"127.0.0.1"===e?(console.log("🏠 Local development detected"),"http://localhost:3000"):(console.log("🌐 Using production URL"),"https://lookalike.com")}console.log("🚀 Lookalike Widget v1.2.0 loading...");const BASE_URL=getBaseUrl();class LookalikeWidget extends HTMLElement{constructor(){super(),this.config={storyfileUuid:null,primaryColor:"#2563eb",enableText:!0,enableVideo:!0,enableAudio:!0},this.currentIframe=null,this.shadow=null,this.messageHandler=null,this.isInWixEmbed=!1}connectedCallback(){console.log("🚀 Lookalike Widget v1.2.0 initializing..."),console.log("📊 Environment Info:",{hostname:window.location.hostname,href:window.location.href,referrer:document.referrer,userAgent:navigator.userAgent,viewport:`${window.innerWidth}x${window.innerHeight}`,inIframe:window!==window.parent}),this.detectWixEmbed(),this.shadow=this.attachShadow({mode:"closed"}),this.loadConfiguration(),this.initLive()}detectWixEmbed(){console.log("🔍 Starting Wix embed detection...");try{const e=window!==window.parent;console.log("📱 In iframe:",e);const n=window.location.hostname.includes("wix.com")||window.location.hostname.includes("wixsite.com"),i=window.location.search.includes("wix"),t=document.referrer.includes("wix"),o=window.innerWidth<500||window.innerHeight<300;console.log("🔍 Wix Detection Results:",{inIframe:e,wixHostname:n,wixSearch:i,wixReferrer:t,smallDimensions:o,windowSize:`${window.innerWidth}x${window.innerHeight}`});const s=n||i||t||e&&o;this.isInWixEmbed=e&&s,this.isInWixEmbed?console.log("✅ Wix embed environment DETECTED - using full-screen overlay mode"):console.log("❌ Standard environment detected - using normal positioning"),window.location.search.includes("force-wix-mode")&&(console.log("🧪 FORCE WIX MODE activated via URL parameter"),this.isInWixEmbed=!0)}catch(e){console.log("⚠️ Cross-origin iframe error:",e.message),this.isInWixEmbed=!0,console.log("🔒 Cross-origin iframe detected - using full-screen overlay mode")}}loadConfiguration(){this.hasAttribute("uuid")&&(this.config.storyfileUuid=this.getAttribute("uuid")),this.hasAttribute("color")&&(this.config.primaryColor=this.getAttribute("color")),this.hasAttribute("text")&&(this.config.enableText="false"!==this.getAttribute("text")),this.hasAttribute("video")&&(this.config.enableVideo="false"!==this.getAttribute("video")),this.hasAttribute("audio")&&(this.config.enableAudio="false"!==this.getAttribute("audio")),this.config.storyfileUuid||(this.config.storyfileUuid=DEFAULT_UUID,console.log("🔧 Using default UUID:",DEFAULT_UUID)),console.log("📥 Loaded config from attributes:",this.config)}static get observedAttributes(){return["uuid","color","text","video","audio"]}attributeChangedCallback(e,n,i){if(n!==i&&this.shadow){switch(console.log(`🔄 Attribute changed: ${e} = ${i}`),e){case"uuid":this.config.storyfileUuid=i;break;case"color":this.config.primaryColor=i;break;case"text":this.config.enableText="false"!==i;break;case"video":this.config.enableVideo="false"!==i;break;case"audio":this.config.enableAudio="false"!==i}console.log("🔄 Updated config after attribute change:",this.config),this.isConnected&&(this.shadow.innerHTML="",this.initLive())}}initLive(){console.log("🚀 Initializing live widget with config:",this.config),this.isInWixEmbed?this.initWixEmbedMode():this.initStandardMode(),this.injectShadowContent(),this.injectIframe()}initWixEmbedMode(){console.log("📱 Initializing Wix embed mode with full-screen overlay");const e="\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100vw;\n      height: 100vh;\n      border: 0;\n      z-index: 9999;\n      background: transparent;\n      pointer-events: none;\n      display: block;\n    ";this.style.cssText=e,console.log("🎨 Applied overlay styles:",e),console.log("📏 Host element computed styles:",{position:getComputedStyle(this).position,width:getComputedStyle(this).width,height:getComputedStyle(this).height,zIndex:getComputedStyle(this).zIndex,pointerEvents:getComputedStyle(this).pointerEvents}),this.className="collapsed wix-embed",console.log("🏷️ Applied classes:",this.className)}initStandardMode(){console.log("💻 Initializing standard mode"),this.style.cssText="\n      position: fixed;\n      bottom: 16px;\n      right: 16px;\n      width: 380px;\n      height: 60px;\n      max-width: calc(100vw - 32px);\n      border: 0;\n      border-radius: 16px;\n      z-index: 9999;\n      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      background: transparent;\n      display: block;\n    ",this.className="collapsed"}injectShadowContent(){const e=document.createElement("style");e.textContent="\n      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');\n      \n      :host {\n        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n      }\n\n      /* Standard mode styles */\n      :host(.collapsed:not(.wix-embed)) {\n        height: 60px !important;\n        max-height: 60px !important;\n      }\n\n      :host(.expanded:not(.wix-embed)) {\n        height: 520px;\n        max-height: calc(100vh - 32px);\n      }\n\n      /* Wix embed mode: container for positioned widget */\n      .wix-widget-container {\n        position: absolute;\n        bottom: 16px;\n        right: 16px;\n        width: 380px;\n        height: 60px;\n        max-width: calc(100vw - 32px);\n        border-radius: 16px;\n        box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);\n        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n        background: transparent;\n        pointer-events: auto;\n      }\n\n      /* Debug info overlay */\n      .debug-info {\n        position: absolute;\n        top: 10px;\n        left: 10px;\n        background: rgba(0, 0, 0, 0.8);\n        color: white;\n        padding: 8px;\n        border-radius: 4px;\n        font-size: 11px;\n        font-family: monospace;\n        z-index: 10000;\n        max-width: 300px;\n        pointer-events: none;\n        white-space: pre-line;\n      }\n\n      :host(.wix-embed.collapsed) .wix-widget-container {\n        height: 60px;\n      }\n\n      :host(.wix-embed.expanded) .wix-widget-container {\n        height: 520px;\n        max-height: calc(100vh - 32px);\n      }\n\n      @media (max-width: 639px) {\n        :host(.expanded:not(.wix-embed)) {\n          width: 100vw;\n          height: 100vh;\n          max-width: none;\n          max-height: none;\n          bottom: 0;\n          right: 0;\n          border-radius: 0;\n          box-shadow: none;\n        }\n        \n        :host(:not(.wix-embed)) {\n          width: calc(100vw - 16px);\n          right: 8px;\n          bottom: 8px;\n        }\n        \n        :host(.collapsed:not(.wix-embed)) {\n          height: 60px !important;\n          max-height: 60px !important;\n          width: calc(100vw - 16px);\n          right: 8px;\n          bottom: 8px;\n          border-radius: 16px;\n          box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);\n        }\n\n        /* Wix embed mobile styles */\n        :host(.wix-embed.expanded) .wix-widget-container {\n          width: 100vw;\n          height: 100vh;\n          max-width: none;\n          max-height: none;\n          bottom: 0;\n          right: 0;\n          border-radius: 0;\n          box-shadow: none;\n        }\n        \n        .wix-widget-container {\n          width: calc(100vw - 16px);\n          right: 8px;\n          bottom: 8px;\n        }\n        \n        :host(.wix-embed.collapsed) .wix-widget-container {\n          height: 60px !important;\n          width: calc(100vw - 16px);\n          right: 8px;\n          bottom: 8px;\n          border-radius: 16px;\n          box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);\n        }\n      }\n      \n      .loading {\n        background: #f3f4f6;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        height: 100%;\n        border-radius: inherit;\n      }\n      \n      .loading::after {\n        content: 'Loading chat...';\n        color: #6b7280;\n        font-size: 14px;\n      }\n\n      .error-container {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        background: #f9fafb;\n        border-radius: inherit;\n        border: 2px dashed #d1d5db;\n        color: #6b7280;\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n        text-align: center;\n        padding: 20px;\n        box-sizing: border-box;\n      }\n\n      .error-icon {\n        font-size: 24px;\n        margin-bottom: 8px;\n      }\n\n      .error-title {\n        font-size: 14px;\n        font-weight: 500;\n        margin-bottom: 4px;\n      }\n\n      .error-message {\n        font-size: 12px;\n      }\n\n      .error-uuid {\n        font-size: 11px;\n        margin-top: 8px;\n        opacity: 0.7;\n      }\n\n      iframe {\n        width: 100%;\n        height: 100%;\n        border: 0;\n        border-radius: inherit;\n      }\n    ",this.shadow.appendChild(e),(window.location.search.includes("debug")||window.location.search.includes("force-wix-mode"))&&this.addDebugInfo();const n=document.createElement("div");this.isInWixEmbed?n.className="wix-widget-container":n.style.cssText="\n        width: 100%;\n        height: 100%;\n        border-radius: inherit;\n      ",this.shadow.appendChild(n)}addDebugInfo(){const e=document.createElement("div");e.className="debug-info";const n=`Lookalike Widget v1.2.0\nMode: ${this.isInWixEmbed?"Wix Embed":"Standard"}\nViewport: ${window.innerWidth}x${window.innerHeight}\nIn iframe: ${window!==window.parent}\nHostname: ${window.location.hostname}\nClasses: ${this.className}`;e.textContent=n,this.shadow.appendChild(e),console.log("🐛 Debug info added to widget")}buildIframeSrc(){if(!this.config.storyfileUuid)return console.error("❌ No storyfile UUID configured"),null;const e=new URL(`/${this.config.storyfileUuid}/chat`,BASE_URL);e.searchParams.set("embed",""),e.searchParams.set("variant","floating"),e.searchParams.set("anchor","bottom-right");const n=[];return this.config.enableText&&n.push("text"),this.config.enableAudio&&n.push("audio"),this.config.enableVideo&&n.push("video"),n.length>0&&n.length<3&&e.searchParams.set("modes",n.join(",")),this.config.primaryColor&&"#2563eb"!==this.config.primaryColor&&e.searchParams.set("theme",`primary:${this.config.primaryColor}`),console.log("🔗 Built iframe URL:",e.toString()),e.toString()}injectIframe(){const e=this.isInWixEmbed?".wix-widget-container":"div:last-child",n=this.shadow.querySelector(e);console.log("🖼️ Injecting iframe into container:",e),console.log("📦 Container found:",!!n),n&&(console.log("📐 Container rect:",n.getBoundingClientRect()),console.log("🎨 Container computed styles:",{position:getComputedStyle(n).position,width:getComputedStyle(n).width,height:getComputedStyle(n).height,bottom:getComputedStyle(n).bottom,right:getComputedStyle(n).right}));const i=n?.querySelector("iframe");i&&(console.log("🗑️ Removing existing iframe"),i.remove());const t=this.buildIframeSrc();if(!t)return void this.showConfigurationError(n);console.log("🔗 Creating iframe with src:",t);const o=document.createElement("iframe");o.className="loading",o.src=t,o.allow="microphone; camera",o.loading="lazy",o.setAttribute("sandbox","allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"),o.onerror=e=>{console.error("❌ Failed to load widget iframe:",e),this.showLoadingError(n)},o.onload=()=>{console.log("✅ Iframe loaded successfully"),console.log("📐 Iframe rect after load:",o.getBoundingClientRect()),o.classList.remove("loading")},this.currentIframe=o,this.setupMessageHandling(o),n.appendChild(o),console.log("🎯 Iframe injection complete")}setupMessageHandling(e){this.messageHandler&&window.removeEventListener("message",this.messageHandler),this.messageHandler=n=>{if(console.log("📨 Received message:",n.data,"from:",n.origin),n.source===e.contentWindow&&"lookalike-widget-ready"===n.data?.type){console.log("🎉 Widget ready, setting up communication");const n=new MessageChannel;n.port1.onmessage=e=>{if(console.log("📏 Received resize message:",e.data),"lookalike-widget-resize"===e.data?.type){const n=e.data.collapsed?"collapsed":"expanded";console.log(`📏 Widget resize: ${this.className} → ${n}`),console.log("📐 Before resize - Host element rect:",this.getBoundingClientRect()),this.className=this.isInWixEmbed?`${n} wix-embed`:n,setTimeout(()=>{console.log("📐 After resize - Host element rect:",this.getBoundingClientRect());const e=this.shadow.querySelector(this.isInWixEmbed?".wix-widget-container":"div:last-child");e&&console.log("📐 Widget container rect:",e.getBoundingClientRect())},100)}},e.contentWindow.postMessage({type:"lookalike-init-channel"},BASE_URL,[n.port2])}},window.addEventListener("message",this.messageHandler),console.log("👂 Message handler installed")}showConfigurationError(e){e.innerHTML='\n      <div class="error-container">\n        <div class="error-icon">⚠️</div>\n        <div class="error-title">Configuration Error</div>\n        <div class="error-message">No UUID configured. Please add a uuid attribute.</div>\n        <div class="error-uuid">Expected: &lt;lookalike-widget uuid="your-uuid"&gt;</div>\n      </div>\n    '}showLoadingError(e){e.innerHTML=`\n      <div class="error-container">\n        <div class="error-icon">⚠️</div>\n        <div class="error-title">Widget Loading Error</div>\n        <div class="error-message">Check console for details</div>\n        <div class="error-uuid">UUID: ${this.config.storyfileUuid}</div>\n      </div>\n    `}disconnectedCallback(){this.messageHandler&&(window.removeEventListener("message",this.messageHandler),this.messageHandler=null)}}customElements.define("lookalike-widget",LookalikeWidget),"undefined"!=typeof module&&module.exports&&(module.exports=LookalikeWidget);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookalike/widget",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Lookalike conversational AI widget for easy embedding",
   "main": "dist/lookalike-widget.js",
   "module": "dist/lookalike-widget.js",