@floe-ai/sdk 0.1.0-dev.12 → 0.1.0-dev.14

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

@@ -18412,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);