@lookalike/widget 1.1.0 → 1.2.0

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**: ~11KB
+- **Gzipped**: ~3KB (estimated)
 
 ## License
 

package/dist/lookalike-widget.js

@@ -36,11 +36,15 @@ class LookalikeWidget extends HTMLElement {
     this.currentIframe = null;
     this.shadow = null;
     this.messageHandler = null;
+    this.isInWixEmbed = false;
   }
 
   connectedCallback() {
     console.log('🚀 Lookalike Widget initializing...');
     
+    // 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 +55,34 @@ class LookalikeWidget extends HTMLElement {
     this.initLive();
   }
 
+  detectWixEmbed() {
+    try {
+      // Check if we're in an iframe and can't access parent
+      const inIframe = window !== window.parent;
+      
+      // 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
+        ));
+
+      this.isInWixEmbed = inIframe && hasWixIndicators;
+      
+      if (this.isInWixEmbed) {
+        console.log('🔍 Detected Wix embed environment - using full-screen overlay mode');
+      }
+    } catch (error) {
+      // If we can't access parent due to cross-origin, assume we're in an embed
+      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 +149,41 @@ 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
+    this.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      border: 0;
+      z-index: 9999;
+      background: transparent;
+      pointer-events: none;
+      display: block;
+    `;
+    
+    // Add collapsed class initially
+    this.className = 'collapsed wix-embed';
+  }
+
+  initStandardMode() {
+    console.log('💻 Initializing standard mode');
+    
+    // Set host element positioning and initial size (original behavior)
     this.style.cssText = `
       position: fixed;
       bottom: 16px;
@@ -136,9 +202,6 @@ class LookalikeWidget extends HTMLElement {
     
     // Add collapsed class initially
     this.className = 'collapsed';
-    
-    this.injectShadowContent();
-    this.injectIframe();
   }
 
   injectShadowContent() {
@@ -151,18 +214,43 @@ 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;
+      }
+
+      :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 +261,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 +276,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 {
@@ -256,11 +371,18 @@ class LookalikeWidget extends HTMLElement {
     
     // 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);
   }
@@ -296,7 +418,7 @@ class LookalikeWidget extends HTMLElement {
   }
 
   injectIframe() {
-    const container = this.shadow.querySelector('div:last-child');
+    const container = this.shadow.querySelector(this.isInWixEmbed ? '.wix-widget-container' : 'div:last-child');
     
     // Remove existing iframe if present
     const existingIframe = container.querySelector('iframe');

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 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);

package/package.json

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