@lookalike/widget 1.2.0 → 1.2.3

package/dist/README.md

@@ -73,8 +73,8 @@ A lightweight, self-contained widget for embedding Lookalike conversational AI a
 
 ## File Sizes
 
-- **Minified**: ~11KB
-- **Gzipped**: ~3KB (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.3';
 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') {
@@ -40,7 +44,15 @@ class LookalikeWidget extends HTMLElement {
   }
 
   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();
@@ -56,30 +68,66 @@ class LookalikeWidget extends HTMLElement {
   }
 
   detectWixEmbed() {
+    console.log('🔍 Starting Wix embed detection...');
+    console.log('🔗 Current URL:', window.location.href);
+    console.log('🔗 Search params:', window.location.search);
+    
+    // Check for force mode FIRST
+    const forceWixMode = window.location.search.includes('force-wix-mode') || 
+                        window.location.href.includes('force-wix-mode') ||
+                        document.querySelector('script[src*="force-wix-mode"]');
+    
+    if (forceWixMode) {
+      console.log('🧪 FORCE WIX MODE DETECTED - overriding all detection');
+      this.isInWixEmbed = true;
+      return;
+    }
+    
     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 hasWixIndicators = 
-        window.location.hostname.includes('wix.com') ||
-        window.location.hostname.includes('wixsite.com') ||
-        window.location.search.includes('wix') ||
-        document.referrer.includes('wix') ||
-        (inIframe && (
-          window.innerWidth < 500 || // Typical small embed size
-          window.innerHeight < 300
-        ));
+      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}`,
+        referrer: document.referrer,
+        parentAccessible: this.canAccessParent()
+      });
+      
+      const hasWixIndicators = wixHostname || wixSearch || wixReferrer || (inIframe && smallDimensions);
 
       this.isInWixEmbed = inIframe && hasWixIndicators;
       
       if (this.isInWixEmbed) {
-        console.log('🔍 Detected Wix embed environment - using full-screen overlay mode');
+        console.log('✅ Wix embed environment DETECTED - using full-screen overlay mode');
+      } else {
+        console.log('❌ Standard environment detected - using normal positioning');
       }
+      
     } 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');
+      console.log('🔒 Cross-origin iframe detected - using full-screen overlay mode');
+    }
+  }
+
+  canAccessParent() {
+    try {
+      return !!window.parent.location.href;
+    } catch (e) {
+      return false;
     }
   }
 
@@ -163,7 +211,7 @@ class LookalikeWidget extends HTMLElement {
     console.log('📱 Initializing Wix embed mode with full-screen overlay');
     
     // Make the host element a full-screen transparent overlay
-    this.style.cssText = `
+    const overlayStyles = `
       position: fixed;
       top: 0;
       left: 0;
@@ -176,8 +224,20 @@ class LookalikeWidget extends HTMLElement {
       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() {
@@ -240,6 +300,25 @@ class LookalikeWidget extends HTMLElement {
         pointer-events: auto;
       }
 
+      /* Debug info overlay */
+      .debug-info {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 6px 8px;
+        border-radius: 4px;
+        font-size: 10px;
+        font-family: monospace;
+        z-index: 10000;
+        max-width: 200px;
+        pointer-events: none;
+        white-space: pre-line;
+        opacity: 0.7;
+        transform: translateY(0);
+      }
+
       :host(.wix-embed.collapsed) .wix-widget-container {
         height: 60px;
       }
@@ -369,6 +448,11 @@ 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');
     
@@ -387,6 +471,21 @@ class LookalikeWidget extends HTMLElement {
     this.shadow.appendChild(container);
   }
 
+  addDebugInfo() {
+    const debugDiv = document.createElement('div');
+    debugDiv.className = 'debug-info';
+    
+    const info = `v${WIDGET_VERSION} | ${this.isInWixEmbed ? 'Wix' : 'Std'}
+${window.innerWidth}x${window.innerHeight}
+iframe: ${window !== window.parent}
+classes: ${this.className}`;
+    
+    debugDiv.textContent = info;
+    this.shadow.appendChild(debugDiv);
+    
+    console.log('🐛 Debug info added to widget (top-right corner)');
+  }
+
   buildIframeSrc() {
     if (!this.config.storyfileUuid) {
       console.error('❌ No storyfile UUID configured');
@@ -418,11 +517,29 @@ class LookalikeWidget extends HTMLElement {
   }
 
   injectIframe() {
-    const container = this.shadow.querySelector(this.isInWixEmbed ? '.wix-widget-container' : '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) {
@@ -430,6 +547,8 @@ class LookalikeWidget extends HTMLElement {
       return;
     }
 
+    console.log('🔗 Creating iframe with src:', iframeSrc);
+
     const iframe = document.createElement('iframe');
     iframe.className = 'loading';
     iframe.src = iframeSrc;
@@ -437,19 +556,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) {
@@ -459,6 +581,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') {
@@ -470,7 +594,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);
           }
         };
 
@@ -483,6 +618,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,this.isInWixEmbed=!1}connectedCallback(){console.log("🚀 Lookalike Widget initializing..."),this.detectWixEmbed(),this.shadow=this.attachShadow({mode:"closed"}),this.loadConfiguration(),this.initLive()}detectWixEmbed(){try{const e=window!==window.parent,n=window.location.hostname.includes("wix.com")||window.location.hostname.includes("wixsite.com")||window.location.search.includes("wix")||document.referrer.includes("wix")||e&&(window.innerWidth<500||window.innerHeight<300);this.isInWixEmbed=e&&n,this.isInWixEmbed&&console.log("🔍 Detected Wix embed environment - using full-screen overlay mode")}catch(e){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"),this.style.cssText="\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.className="collapsed wix-embed"}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      :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);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)}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.shadow.querySelector(this.isInWixEmbed?".wix-widget-container":"div:last-child"),n=e.querySelector("iframe");n&&n.remove();const i=this.buildIframeSrc();if(!i)return void this.showConfigurationError(e);const t=document.createElement("iframe");t.className="loading",t.src=i,t.allow="microphone; camera",t.loading="lazy",t.setAttribute("sandbox","allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"),t.onerror=()=>{console.error("❌ Failed to load widget iframe"),this.showLoadingError(e)},t.onload=()=>{console.log("✅ Iframe loaded successfully"),t.classList.remove("loading")},this.currentIframe=t,this.setupMessageHandling(t),e.appendChild(t)}setupMessageHandling(e){this.messageHandler&&window.removeEventListener("message",this.messageHandler),this.messageHandler=n=>{if(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}`),this.className=n}},e.contentWindow.postMessage({type:"lookalike-init-channel"},BASE_URL,[n.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.3",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.3 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.3 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(){if(console.log("🔍 Starting Wix embed detection..."),console.log("🔗 Current URL:",window.location.href),console.log("🔗 Search params:",window.location.search),window.location.search.includes("force-wix-mode")||window.location.href.includes("force-wix-mode")||document.querySelector('script[src*="force-wix-mode"]'))return console.log("🧪 FORCE WIX MODE DETECTED - overriding all detection"),void(this.isInWixEmbed=!0);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}`,referrer:document.referrer,parentAccessible:this.canAccessParent()});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")}catch(e){console.log("⚠️ Cross-origin iframe error:",e.message),this.isInWixEmbed=!0,console.log("🔒 Cross-origin iframe detected - using full-screen overlay mode")}}canAccessParent(){try{return!!window.parent.location.href}catch(e){return!1}}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        right: 10px;\n        background: rgba(0, 0, 0, 0.8);\n        color: white;\n        padding: 6px 8px;\n        border-radius: 4px;\n        font-size: 10px;\n        font-family: monospace;\n        z-index: 10000;\n        max-width: 200px;\n        pointer-events: none;\n        white-space: pre-line;\n        opacity: 0.7;\n        transform: translateY(0);\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=`v1.2.3 | ${this.isInWixEmbed?"Wix":"Std"}\n${window.innerWidth}x${window.innerHeight}\niframe: ${window!==window.parent}\nclasses: ${this.className}`;e.textContent=n,this.shadow.appendChild(e),console.log("🐛 Debug info added to widget (top-right corner)")}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.2.0",
+  "version": "1.2.3",
   "description": "Lookalike conversational AI widget for easy embedding",
   "main": "dist/lookalike-widget.js",
   "module": "dist/lookalike-widget.js",