@floe-ai/sdk 0.1.0-dev.11 → 0.1.0-dev.13

package/dist-sdk/floe-sdk.es.js

@@ -16223,6 +16223,9 @@ class th {
     // Scroll tracking for Fast Execution System
     O(this, "scrollHandler", null);
     O(this, "scrollDebounceTimer", null);
+    // URL tracking for SPAs
+    O(this, "urlCheckInterval", null);
+    O(this, "popstateHandler", null);
     this.sdk = e, this.lastUrl = window.location.href;
   }
   /**
@@ -16344,18 +16347,21 @@ class th {
    * Stop tracking page events
    */
   stop() {
-    this.isTracking && (this.isTracking = !1, this.clickHandler && (document.removeEventListener("click", this.clickHandler, !0), this.clickHandler = null), this.focusHandler && (document.removeEventListener("focus", this.focusHandler, !0), this.focusHandler = null), this.blurHandler && (document.removeEventListener("blur", this.blurHandler, !0), this.blurHandler = null), this.inputHandler && (document.removeEventListener("input", this.inputHandler, !0), this.inputHandler = null), this.keydownHandler && (document.removeEventListener("keydown", this.keydownHandler, !0), this.keydownHandler = null), this.scrollHandler && (window.removeEventListener("scroll", this.scrollHandler), this.scrollHandler = null), this.scrollDebounceTimer && (clearTimeout(this.scrollDebounceTimer), this.scrollDebounceTimer = null), this.inputDebounceTimers.forEach((e) => clearTimeout(e)), this.inputDebounceTimers.clear(), console.log("[PageTracker] Stopped tracking"));
+    this.isTracking && (this.isTracking = !1, this.clickHandler && (document.removeEventListener("click", this.clickHandler, !0), this.clickHandler = null), this.focusHandler && (document.removeEventListener("focus", this.focusHandler, !0), this.focusHandler = null), this.blurHandler && (document.removeEventListener("blur", this.blurHandler, !0), this.blurHandler = null), this.inputHandler && (document.removeEventListener("input", this.inputHandler, !0), this.inputHandler = null), this.keydownHandler && (document.removeEventListener("keydown", this.keydownHandler, !0), this.keydownHandler = null), this.scrollHandler && (window.removeEventListener("scroll", this.scrollHandler), this.scrollHandler = null), this.scrollDebounceTimer && (clearTimeout(this.scrollDebounceTimer), this.scrollDebounceTimer = null), this.urlCheckInterval && (clearInterval(this.urlCheckInterval), this.urlCheckInterval = null), this.popstateHandler && (window.removeEventListener("popstate", this.popstateHandler), this.popstateHandler = null), this.inputDebounceTimers.forEach((e) => clearTimeout(e)), this.inputDebounceTimers.clear(), console.log("[PageTracker] Stopped tracking"));
   }
   /**
    * Setup URL change tracking for SPAs
    */
   setupUrlTracking() {
-    setInterval(() => {
+    this.urlCheckInterval || (this.urlCheckInterval = setInterval(() => {
       const e = window.location.href;
       e !== this.lastUrl && (this.lastUrl = e, this.sendPageMetadata());
-    }, 1e3), window.addEventListener("popstate", () => {
-      setTimeout(() => this.sendPageMetadata(), 100);
-    });
+    }, 1e3), this.popstateHandler = () => {
+      setTimeout(() => {
+        const e = window.location.href;
+        e !== this.lastUrl && (this.lastUrl = e, this.sendPageMetadata());
+      }, 100);
+    }, window.addEventListener("popstate", this.popstateHandler));
   }
   /**
    * Send current page metadata
@@ -16810,6 +16816,8 @@ class ec extends Yd {
     // Audio analyzer for user mic FFT
     O(this, "userMicStream", null);
     // User's mic stream for analysis
+    O(this, "userMicStreamRequestId", 0);
+    // Guards async getUserMedia against disconnect races
     O(this, "audioElements", []);
     O(this, "pageTracker");
     O(this, "screenShareEnabled", !1);
@@ -16938,18 +16946,24 @@ class ec extends Yd {
    * Setup user microphone analysis for waveform visualization
    */
   async setupUserMicAnalysis() {
+    const t = ++this.userMicStreamRequestId;
     try {
-      this.userMicStream = await navigator.mediaDevices.getUserMedia({
+      const r = await navigator.mediaDevices.getUserMedia({
         audio: {
           echoCancellation: !0,
           noiseSuppression: !0,
           autoGainControl: !0
         }
-      }), console.log("[OnboardingSDK] 🎤 User mic stream captured for visualization"), this.userAudioAnalyzer && this.userMicStream && this.userAudioAnalyzer.start(this.userMicStream, (t) => {
-        this.userIsSpeaking && (this.audioLevels = t, this.renderReactUI());
       });
-    } catch (t) {
-      console.warn("[OnboardingSDK] Could not capture mic for visualization:", t);
+      if (t !== this.userMicStreamRequestId || !this.userAudioAnalyzer) {
+        console.log("[OnboardingSDK] 🎤 Mic stream request invalidated (disconnect/reconnect occurred), stopping tracks"), r.getTracks().forEach((i) => i.stop());
+        return;
+      }
+      this.userMicStream && this.userMicStream.getTracks().forEach((i) => i.stop()), this.userMicStream = r, console.log("[OnboardingSDK] 🎤 User mic stream captured for visualization"), this.userAudioAnalyzer && this.userAudioAnalyzer.start(r, (i) => {
+        this.userIsSpeaking && (this.audioLevels = i, this.renderReactUI());
+      });
+    } catch (r) {
+      console.warn("[OnboardingSDK] Could not capture mic for visualization:", r);
     }
   }
   /**
@@ -17053,9 +17067,9 @@ class ec extends Yd {
    * Disconnect and minimize the UI (instead of removing it)
    */
   async disconnectAndMinimize() {
-    this.pageTracker.stop(), this.domIntrospector.stopCapturing(), this.navigationCompleteDetector && this.navigationCompleteDetector.stop(), this.pipecatClient && (await this.pipecatClient.disconnect(), this.pipecatClient = null), this.transport && (this.transport = null), this.audioElements && (this.audioElements.forEach((t) => {
+    this.pageTracker.stop(), this.domIntrospector.stopCapturing(), this.navigationCompleteDetector && this.navigationCompleteDetector.stop(), this.overlay.clearHighlight(), this.pipecatClient && (await this.pipecatClient.disconnect(), this.pipecatClient = null), this.transport && (this.transport = null), this.audioElements && (this.audioElements.forEach((t) => {
       t.pause(), t.remove();
-    }), this.audioElements = []), this.botAudioAnalyzer && (this.botAudioAnalyzer.destroy(), this.botAudioAnalyzer = null), this.userAudioAnalyzer && (this.userAudioAnalyzer.destroy(), this.userAudioAnalyzer = null), this.userMicStream && (this.userMicStream.getTracks().forEach((t) => t.stop()), this.userMicStream = null), this.audioLevels = [], this.isConnected = !1, this.agentState = "idle", this._isMinimized = !0, this.botTranscript = "", this.userTranscript = "", this.renderReactUI(), console.log("[OnboardingSDK] Disconnected and minimized"), this.emit("disconnected"), this.emit("minimized");
+    }), this.audioElements = []), this.botAudioAnalyzer && (this.botAudioAnalyzer.destroy(), this.botAudioAnalyzer = null), this.userAudioAnalyzer && (this.userAudioAnalyzer.destroy(), this.userAudioAnalyzer = null), this.userMicStreamRequestId++, this.userMicStream && (this.userMicStream.getTracks().forEach((t) => t.stop()), this.userMicStream = null), this.audioLevels = [], this.isConnected = !1, this.agentState = "idle", this._isMinimized = !0, this.botTranscript = "", this.userTranscript = "", this.renderReactUI(), console.log("[OnboardingSDK] Disconnected and minimized"), this.emit("disconnected"), this.emit("minimized");
   }
   /**
    * Connect with progress stages for better UX.
@@ -17120,7 +17134,9 @@ class ec extends Yd {
         console.log("[OnboardingSDK] Connected to Pipecat"), this.isConnected = !0, this.agentState = "listening", this.micEnabled = ((t = this.pipecatClient) == null ? void 0 : t.isMicEnabled) ?? this.config.enableAudio !== !1, console.log("[OnboardingSDK] 🎤 Mic state on connect:", this.micEnabled ? "ON" : "MUTED"), this.clearConnectionProgress(), this.renderReactUI(), this.emit("connected");
       },
       onDisconnected: () => {
-        console.log("[OnboardingSDK] Disconnected from Pipecat"), this.isConnected = !1, this.agentState = "idle", this.renderReactUI(), this.emit("disconnected"), this.pageTracker.stop();
+        console.log("[OnboardingSDK] Disconnected from Pipecat"), this.isConnected = !1, this.agentState = "idle", this.pageTracker.stop(), this.domIntrospector.stopCapturing(), this.navigationCompleteDetector && this.navigationCompleteDetector.stop(), this.overlay.clearHighlight(), this.audioElements && (this.audioElements.forEach((t) => {
+          t.pause(), t.remove();
+        }), this.audioElements = []), this.botAudioAnalyzer && (this.botAudioAnalyzer.destroy(), this.botAudioAnalyzer = null), this.userAudioAnalyzer && (this.userAudioAnalyzer.destroy(), this.userAudioAnalyzer = null), this.userMicStreamRequestId++, this.userMicStream && (console.log("[OnboardingSDK] 🎤 Stopping user microphone stream"), this.userMicStream.getTracks().forEach((t) => t.stop()), this.userMicStream = null), this.audioLevels = [], this.renderReactUI(), this.emit("disconnected");
       },
       onBotReady: () => {
         var t;
@@ -17169,7 +17185,7 @@ class ec extends Yd {
         }), console.log("[OnboardingSDK] 📝 Added assistant message to history:", this.botTranscript.substring(0, 50) + "...")), this.botTranscript = "", this.renderReactUI(), this.emit("botSpeaking", !1);
       },
       onServerMessage: (t) => {
-        console.log("[OnboardingSDK] Server message:", t), this.handleServerMessage(t), t.type === "session_paused" && (console.log("[OnboardingSDK] Session paused:", t), this.agentState = "paused", this.pausedSessionId = t.session_id || null, this.renderReactUI(), this.emit("sessionPaused", t));
+        console.log("[OnboardingSDK] Server message:", t), this.handleServerMessage(t);
       },
       onError: (t) => {
         console.error("[OnboardingSDK] Error:", t), this.emit("error", t);
@@ -17279,7 +17295,7 @@ class ec extends Yd {
       console.log("[OnboardingSDK] 🎯 Received direct hybrid action:", r.action), this.handleHybridAction(r);
       return;
     }
-    r.type === "highlight" ? (console.log("[OnboardingSDK] Handling highlight command"), r.target ? this.overlay.highlightTarget(r.target, r.options) : r.selector && this.overlay.highlight(r.selector, r.options)) : r.type === "tooltip" && r.text ? this.overlay.showTooltip(r.text, r.options) : r.type === "action" ? r.target ? this.handleHybridAction(r) : this.actionExecutor.executeWithConsent(r.action) : r.type === "clear_highlight" ? this.overlay.clearHighlight() : r.type === "batched_navigation" ? this.handleBatchedNavigation(r) : r.type === "fast_action" ? this.executeActionFast(r) : r.type === "session_paused" ? (console.log("[OnboardingSDK] Session paused:", r), this.agentState = "paused", this.pausedSessionId = r.session_id || null, this.renderReactUI(), this.emit("sessionPaused", r)) : console.log("[OnboardingSDK] Unhandled server message type:", r.type || "unknown");
+    r.type === "highlight" ? (console.log("[OnboardingSDK] Handling highlight command"), r.target ? this.overlay.highlightTarget(r.target, r.options) : r.selector && this.overlay.highlight(r.selector, r.options)) : r.type === "tooltip" && r.text ? this.overlay.showTooltip(r.text, r.options) : r.type === "action" ? r.target ? this.handleHybridAction(r) : this.actionExecutor.executeWithConsent(r.action) : r.type === "clear_highlight" ? this.overlay.clearHighlight() : r.type === "batched_navigation" ? this.handleBatchedNavigation(r) : r.type === "fast_action" ? this.executeActionFast(r) : r.type === "session_paused" ? (console.log("[OnboardingSDK] Session paused:", r), this.agentState = "paused", this.pausedSessionId = r.session_id || null, this.overlay.clearHighlight(), this.renderReactUI(), this.emit("sessionPaused", r)) : console.log("[OnboardingSDK] Unhandled server message type:", r.type || "unknown");
   }
   /**
    * Handle hybrid UI action from bot
@@ -18396,95 +18412,145 @@ class ec extends Yd {
           }
         </style>
         
-        <!-- Icon -->
+        <!-- Icon with live indicator -->
         <div style="display: flex; justify-content: center; margin-bottom: 24px;">
-          <div style="
-            width: 64px;
-            height: 64px;
-            border-radius: 16px;
-            background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
-            border: 1px solid rgba(139, 92, 246, 0.3);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
-          ">
-            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M12 2L2 7l10 5 10-5-10-5z"/>
-              <path d="M2 17l10 5 10-5"/>
-              <path d="M2 12l10 5 10-5"/>
-            </svg>
+          <div style="position: relative;">
+            <div style="
+              width: 64px;
+              height: 64px;
+              border-radius: 16px;
+              background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
+              border: 1px solid rgba(139, 92, 246, 0.3);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
+            ">
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="url(#welcomeIconGradient)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                <defs>
+                  <linearGradient id="welcomeIconGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop offset="0%" stop-color="#818cf8" />
+                    <stop offset="100%" stop-color="#a78bfa" />
+                  </linearGradient>
+                </defs>
+                <!-- Headset/support icon -->
+                <path d="M3 18v-6a9 9 0 0 1 18 0v6"/>
+                <path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3v5z"/>
+                <path d="M3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3v5z"/>
+              </svg>
+            </div>
+            <!-- Live pulse indicator -->
+            <div style="
+              position: absolute;
+              top: -2px;
+              right: -2px;
+              width: 14px;
+              height: 14px;
+              background: #10b981;
+              border-radius: 50%;
+              border: 2px solid rgba(24, 24, 28, 0.99);
+              animation: livePulse 2s ease-in-out infinite;
+            "></div>
           </div>
         </div>
         
+        <style>
+          @keyframes livePulse {
+            0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
+            50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
+          }
+          #floe-start-guided, #floe-skip-guided {
+            cursor: pointer !important;
+          }
+          #floe-start-guided:hover, #floe-skip-guided:hover {
+            cursor: pointer !important;
+          }
+        </style>
+        
         <!-- Title -->
         <h2 style="margin: 0 0 12px 0; font-size: 20px; font-weight: 600; color: rgba(255, 255, 255, 0.95); text-align: center; letter-spacing: -0.02em;">
-          Let's personalize your setup
+          Your AI guide is ready
         </h2>
         
         <!-- Description -->
-        <p style="margin: 0 0 20px 0; color: rgba(255, 255, 255, 0.6); font-size: 14px; line-height: 1.6; text-align: center;">
-          I'll ask a few quick questions to understand your needs, then guide you through the perfect setup for your use case.
+        <p style="margin: 0 0 8px 0; color: rgba(255, 255, 255, 0.6); font-size: 14px; line-height: 1.6; text-align: center;">
+          Start a live voice conversation to get personalized help setting up your account.
         </p>
         
-        <!-- Benefits -->
-        <div style="background: rgba(255, 255, 255, 0.03); border-radius: 10px; padding: 14px; margin-bottom: 24px; border: 1px solid rgba(255, 255, 255, 0.05);">
-          <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
-            <span style="font-size: 14px;">⚡</span>
-            <span style="font-size: 13px; color: rgba(255, 255, 255, 0.7);">Takes less than a minute</span>
-          </div>
-          <div style="display: flex; align-items: center; gap: 10px;">
-            <span style="font-size: 14px;">🎯</span>
-            <span style="font-size: 13px; color: rgba(255, 255, 255, 0.7);">Get a customized walkthrough</span>
+        <!-- Live badge -->
+        <div style="display: flex; justify-content: center; margin-bottom: 28px;">
+          <div style="
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 6px 12px;
+            background: rgba(16, 185, 129, 0.1);
+            border: 1px solid rgba(16, 185, 129, 0.2);
+            border-radius: 20px;
+          ">
+            <div style="width: 6px; height: 6px; background: #10b981; border-radius: 50%;"></div>
+            <span style="font-size: 12px; font-weight: 500; color: #10b981;">Live voice assistant</span>
           </div>
         </div>
         
         <!-- Buttons -->
-        <div style="display: flex; flex-direction: column; gap: 12px;">
+        <div style="display: flex; gap: 12px;">
           <button id="floe-start-guided" style="
-            width: 100%;
+            flex: 1;
             padding: 14px 20px;
             border-radius: 12px;
             font-size: 14px;
             font-weight: 600;
-            cursor: pointer;
+            cursor: pointer !important;
             border: none;
-            background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(139, 92, 246, 0.9) 100%);
+            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
             color: white;
             transition: all 0.2s ease;
-            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
-          ">
-            🚀 Let's Get Started
-          </button>
-          <button id="floe-skip-guided" style="
-            width: 100%;
-            padding: 14px 20px;
-            border-radius: 12px;
-            font-size: 14px;
-            font-weight: 500;
-            cursor: pointer;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            background: rgba(255, 255, 255, 0.05);
-            color: rgba(255, 255, 255, 0.7);
-            transition: all 0.2s ease;
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
           ">
-            Skip — I'll explore on my own
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
+              <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+              <line x1="12" y1="19" x2="12" y2="23"/>
+              <line x1="8" y1="23" x2="16" y2="23"/>
+            </svg>
+            Start Conversation
           </button>
         </div>
+        
+        <button id="floe-skip-guided" style="
+          width: 100%;
+          margin-top: 12px;
+          padding: 12px 20px;
+          border-radius: 12px;
+          font-size: 14px;
+          font-weight: 500;
+          cursor: pointer !important;
+          border: none;
+          background: transparent;
+          color: rgba(255, 255, 255, 0.4);
+          transition: all 0.2s ease;
+        ">
+          I'll explore on my own
+        </button>
       `, r.appendChild(i), document.body.appendChild(r);
       const o = r.querySelector("#floe-start-guided"), s = r.querySelector("#floe-skip-guided");
       o && (o.onmouseenter = () => {
-        o.style.transform = "translateY(-2px)", o.style.boxShadow = "0 8px 20px rgba(99, 102, 241, 0.4)";
+        o.style.background = "linear-gradient(135deg, #818cf8 0%, #a78bfa 100%)", o.style.transform = "translateY(-1px)", o.style.boxShadow = "0 8px 24px rgba(99, 102, 241, 0.4)";
       }, o.onmouseleave = () => {
-        o.style.transform = "translateY(0)", o.style.boxShadow = "0 4px 12px rgba(99, 102, 241, 0.3)";
+        o.style.background = "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)", o.style.transform = "translateY(0)", o.style.boxShadow = "0 4px 12px rgba(99, 102, 241, 0.25)";
       }, o.onclick = () => {
         r.style.animation = "welcomeFadeOut 0.2s ease", setTimeout(() => {
           r.remove(), t(!0);
         }, 200);
       }), s && (s.onmouseenter = () => {
-        s.style.background = "rgba(255, 255, 255, 0.1)", s.style.color = "rgba(255, 255, 255, 0.9)";
+        s.style.color = "rgba(255, 255, 255, 0.8)";
       }, s.onmouseleave = () => {
-        s.style.background = "rgba(255, 255, 255, 0.05)", s.style.color = "rgba(255, 255, 255, 0.7)";
+        s.style.color = "rgba(255, 255, 255, 0.4)";
       }, s.onclick = () => {
         r.style.animation = "welcomeFadeOut 0.2s ease", setTimeout(() => {
           r.remove(), t(!1);
@@ -18588,9 +18654,9 @@ class ec extends Yd {
    * Disconnect and cleanup
    */
   async disconnect() {
-    this.pageTracker.stop(), this.domIntrospector.stopCapturing(), this.navigationCompleteDetector && this.navigationCompleteDetector.stop(), this.pipecatClient && (await this.pipecatClient.disconnect(), this.pipecatClient = null), this.transport && (this.transport = null), this.audioElements && (this.audioElements.forEach((t) => {
+    this.pageTracker.stop(), this.domIntrospector.stopCapturing(), this.navigationCompleteDetector && this.navigationCompleteDetector.stop(), this.overlay.clearHighlight(), this.pipecatClient && (await this.pipecatClient.disconnect(), this.pipecatClient = null), this.transport && (this.transport = null), this.audioElements && (this.audioElements.forEach((t) => {
       t.pause(), t.remove();
-    }), this.audioElements = []), this.botAudioAnalyzer && (this.botAudioAnalyzer.destroy(), this.botAudioAnalyzer = null), this.userAudioAnalyzer && (this.userAudioAnalyzer.destroy(), this.userAudioAnalyzer = null), this.userMicStream && (this.userMicStream.getTracks().forEach((t) => t.stop()), this.userMicStream = null), this.audioLevels = [], this.reactRoot && (this.reactRoot.unmount(), this.reactRoot = null), this.reactContainer && (this.reactContainer.remove(), this.reactContainer = null), this.overlay.remove(), this.isInitialized = !1, this.isConnected = !1, this.agentState = "idle", console.log("[OnboardingSDK] Disconnected"), this.emit("disconnected");
+    }), this.audioElements = []), this.botAudioAnalyzer && (this.botAudioAnalyzer.destroy(), this.botAudioAnalyzer = null), this.userAudioAnalyzer && (this.userAudioAnalyzer.destroy(), this.userAudioAnalyzer = null), this.userMicStreamRequestId++, this.userMicStream && (this.userMicStream.getTracks().forEach((t) => t.stop()), this.userMicStream = null), this.audioLevels = [], this.reactRoot && (this.reactRoot.unmount(), this.reactRoot = null), this.reactContainer && (this.reactContainer.remove(), this.reactContainer = null), this.overlay.remove(), this.isInitialized = !1, this.isConnected = !1, this.agentState = "idle", console.log("[OnboardingSDK] Disconnected"), this.emit("disconnected");
   }
 }
 typeof window < "u" && (window.OnboardingSDK = ec);