@cuekit-ai/react 1.1.0 → 1.1.2

package/dist/index.mjs

@@ -174,10 +174,22 @@ var ttsManager = new TtsManager();
 
 // src/core/navigation.ts
 var navigation;
+var navigationHandler = null;
 var setNavigator = (navigator2) => {
   navigation = navigator2;
 };
+var setNavigationHandler = (handler) => {
+  navigationHandler = handler;
+};
 var navigate = (path, params) => {
+  if (navigationHandler) {
+    try {
+      navigationHandler(path, params);
+      return;
+    } catch (error) {
+      console.error("[CueKit] navigation handler failed, falling back to default:", error);
+    }
+  }
   let fullPath = path;
   if (params) {
     const searchParams = new URLSearchParams(params).toString();
@@ -188,16 +200,17 @@ var navigate = (path, params) => {
   if (navigation) {
     navigation.push(fullPath);
   } else {
-    window.location.href = fullPath;
+    if (typeof window !== "undefined") {
+      window.location.href = fullPath;
+    }
   }
 };
 var getCurrentPath = () => {
+  if (typeof window === "undefined") return "";
   return window.location.pathname;
 };
 var getSearchParams = () => {
-  if (navigation) {
-    return navigation.query;
-  }
+  if (typeof window === "undefined") return new URLSearchParams();
   return new URLSearchParams(window.location.search);
 };
 var safeNavigate = (name, params = {}) => {
@@ -245,6 +258,7 @@ function onStateChange() {
 }
 var handleNavigationAndClick = (routeName, elementHash) => {
   safeNavigate(routeName);
+  if (typeof MutationObserver === "undefined" || typeof document === "undefined") return;
   const observer = new MutationObserver((mutationsList, observer2) => {
     const elements = flushCapturedElements();
     const elementToClick = elements.find((el) => el.elementId === elementHash);
@@ -292,17 +306,14 @@ var processVoice = async (transcript, apiKey, appId, deviceId) => {
     };
     console.log("body", body);
     try {
-      const response = await fetch(
-        `http://ec2-15-207-222-65.ap-south-1.compute.amazonaws.com/components/app/${appId}/app-intents`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            "X-API-Key": apiKey ?? ""
-          },
-          body: JSON.stringify(body)
-        }
-      );
+      const response = await fetch(`https://api.cuekit.ai/components/app/${appId}/app-intents`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-API-Key": apiKey ?? ""
+        },
+        body: JSON.stringify(body)
+      });
       const data = await response.json();
       if (!response.ok) {
         console.log("Response Status:", response.status);
@@ -377,11 +388,8 @@ var _apiKey = "";
 var setApiKey = (key) => _apiKey = key;
 
 // src/core/init.ts
-function InitCuekit(apiKey, navigator2) {
+function InitCuekit(apiKey) {
   setApiKey(apiKey);
-  if (navigator2) {
-    setNavigator(navigator2);
-  }
 }
 
 // src/Provider/CuekitProvider.tsx
@@ -403,27 +411,40 @@ var QubeContext = createContext({
   appId: ""
 });
 var getUniqueId = () => {
-  let id = localStorage.getItem("cuekit_device_id");
-  if (!id) {
-    id = Date.now().toString(36) + Math.random().toString(36).substring(2);
-    localStorage.setItem("cuekit_device_id", id);
+  if (typeof window === "undefined") {
+    return "server-" + Date.now().toString(36);
+  }
+  try {
+    let id = localStorage.getItem("cuekit_device_id");
+    if (!id) {
+      id = Date.now().toString(36) + Math.random().toString(36).substring(2);
+      localStorage.setItem("cuekit_device_id", id);
+    }
+    return id;
+  } catch {
+    return "anon-" + Date.now().toString(36);
   }
-  return id;
 };
 var CuekitProvider = ({
   apiKey,
   deviceId = "",
   appId,
   children,
-  navigator: navigator2
+  navigationHandler: navigationHandler2
 }) => {
   const [internalDeviceId, setInternalDeviceId] = useState(deviceId);
   useEffect(() => {
-    InitCuekit(apiKey, navigator2);
-  }, [apiKey, navigator2]);
+    InitCuekit(apiKey);
+  }, [apiKey]);
+  useEffect(() => {
+    setNavigationHandler(navigationHandler2 ?? null);
+    return () => {
+      setNavigationHandler(null);
+    };
+  }, [navigationHandler2]);
   useEffect(() => {
     const updateGlobalStore = (id) => {
-      if (globalThis.CuekitStore) {
+      if (typeof window !== "undefined" && globalThis.CuekitStore) {
         globalThis.CuekitStore.update({
           apiKey,
           appId,
@@ -454,16 +475,24 @@ var CuekitProvider = ({
         GlobalStore.clearData("transcript");
       }
     };
-    window.addEventListener("popstate", handleRouteChange);
-    const originalPushState = history.pushState;
-    history.pushState = function(...args) {
-      originalPushState.apply(this, args);
-      handleRouteChange();
-    };
+    if (typeof window !== "undefined") {
+      window.addEventListener("popstate", handleRouteChange);
+    }
+    const originalPushState = typeof history !== "undefined" ? history.pushState : void 0;
+    if (originalPushState) {
+      history.pushState = function(...args) {
+        originalPushState.apply(this, args);
+        handleRouteChange();
+      };
+    }
     handleRouteChange();
     return () => {
-      window.removeEventListener("popstate", handleRouteChange);
-      history.pushState = originalPushState;
+      if (typeof window !== "undefined") {
+        window.removeEventListener("popstate", handleRouteChange);
+      }
+      if (originalPushState) {
+        history.pushState = originalPushState;
+      }
     };
   }, [apiKey, appId, internalDeviceId]);
   return /* @__PURE__ */ React.createElement(
@@ -547,8 +576,8 @@ import { useState as useState3, useCallback as useCallback3 } from "react";
 
 // src/hook/useVoiceRecognition.ts
 import { useState as useState2, useEffect as useEffect3, useCallback as useCallback2, useRef as useRef2 } from "react";
-var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-var recognition = SpeechRecognition ? new SpeechRecognition() : null;
+var SpeechRecognitionCtor = typeof window !== "undefined" ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
+var recognition = SpeechRecognitionCtor ? new SpeechRecognitionCtor() : null;
 if (recognition) {
   recognition.continuous = true;
   recognition.interimResults = true;
@@ -655,10 +684,14 @@ var TtsManager2 = class {
       return;
     }
     console.log("\u{1F508} Speaking:", text);
-    window.speechSynthesis.cancel();
+    if (typeof window !== "undefined") {
+      window.speechSynthesis.cancel();
+    }
     this.utterance.text = text;
     this.onEndCallback = onEnd || null;
-    window.speechSynthesis.speak(this.utterance);
+    if (typeof window !== "undefined") {
+      window.speechSynthesis.speak(this.utterance);
+    }
   }
   stop() {
     if (typeof window !== "undefined" && "speechSynthesis" in window) {
@@ -719,7 +752,140 @@ import { Mic, Loader2, Volume2, X, Sparkles } from "lucide-react";
 import React2 from "react";
 var BorderGlow = ({ isActive }) => {
   if (!isActive) return null;
-  return /* @__PURE__ */ React2.createElement("div", { className: "fixed inset-0 pointer-events-none z-[10000] overflow-hidden" }, /* @__PURE__ */ React2.createElement("div", { className: "absolute top-0 right-0 bottom-0 w-1 bg-gradient-to-b from-cyan-500 via-primary to-blue-600 animate-pulse opacity-80" }), /* @__PURE__ */ React2.createElement("div", { className: "absolute top-0 right-0 bottom-0 w-2 bg-gradient-to-b from-cyan-400 via-primary to-blue-500 blur-sm animate-pulse opacity-60" }), /* @__PURE__ */ React2.createElement("div", { className: "absolute top-0 right-0 bottom-0 w-4 bg-gradient-to-b from-cyan-300 via-primary to-blue-400 blur-md animate-pulse opacity-40" }), /* @__PURE__ */ React2.createElement("div", { className: "absolute top-0 bottom-0 left-0 w-1 bg-gradient-to-b from-accent via-primary to-blue-600 animate-pulse opacity-80" }), /* @__PURE__ */ React2.createElement("div", { className: "absolute top-0 bottom-0 left-0 w-2 bg-gradient-to-b from-accent via-primary to-blue-500 blur-sm animate-pulse opacity-60" }), /* @__PURE__ */ React2.createElement("div", { className: "absolute top-0 bottom-0 left-0 w-4 bg-gradient-to-b from-accent via-primary to-blue-400 blur-md animate-pulse opacity-40" }), /* @__PURE__ */ React2.createElement("div", { className: "absolute top-0 left-0 w-8 h-8 bg-accent rounded-br-full blur-lg animate-pulse opacity-60" }), /* @__PURE__ */ React2.createElement("div", { className: "absolute top-0 right-0 w-8 h-8 bg-cyan-500 rounded-bl-full blur-lg animate-pulse opacity-60" }), /* @__PURE__ */ React2.createElement("div", { className: "absolute bottom-0 right-0 w-8 h-8 bg-primary rounded-tl-full blur-lg animate-pulse opacity-60" }), /* @__PURE__ */ React2.createElement("div", { className: "absolute bottom-0 left-0 w-8 h-8 bg-blue-600 rounded-tr-full blur-lg animate-pulse opacity-60" }));
+  const styles = {
+    container: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      pointerEvents: "none",
+      zIndex: 1e4,
+      overflow: "hidden"
+    },
+    rightBorder1: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: "4px",
+      background: "linear-gradient(to bottom, #06b6d4, #3b82f6, #2563eb)",
+      animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+      opacity: 0.8
+    },
+    rightBorder2: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: "8px",
+      background: "linear-gradient(to bottom, #22d3ee, #3b82f6, #3b82f6)",
+      filter: "blur(4px)",
+      animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+      opacity: 0.6
+    },
+    rightBorder3: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: "16px",
+      background: "linear-gradient(to bottom, #67e8f9, #3b82f6, #60a5fa)",
+      filter: "blur(12px)",
+      animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+      opacity: 0.4
+    },
+    leftBorder1: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      bottom: 0,
+      width: "4px",
+      background: "linear-gradient(to bottom, #f59e0b, #3b82f6, #2563eb)",
+      animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+      opacity: 0.8
+    },
+    leftBorder2: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      bottom: 0,
+      width: "8px",
+      background: "linear-gradient(to bottom, #f59e0b, #3b82f6, #3b82f6)",
+      filter: "blur(4px)",
+      animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+      opacity: 0.6
+    },
+    leftBorder3: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      bottom: 0,
+      width: "16px",
+      background: "linear-gradient(to bottom, #f59e0b, #3b82f6, #60a5fa)",
+      filter: "blur(12px)",
+      animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+      opacity: 0.4
+    },
+    cornerTopLeft: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "32px",
+      height: "32px",
+      background: "#f59e0b",
+      borderBottomRightRadius: "50%",
+      filter: "blur(16px)",
+      animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+      opacity: 0.6
+    },
+    cornerTopRight: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      width: "32px",
+      height: "32px",
+      background: "#06b6d4",
+      borderBottomLeftRadius: "50%",
+      filter: "blur(16px)",
+      animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+      opacity: 0.6
+    },
+    cornerBottomRight: {
+      position: "absolute",
+      bottom: 0,
+      right: 0,
+      width: "32px",
+      height: "32px",
+      background: "#3b82f6",
+      borderTopLeftRadius: "50%",
+      filter: "blur(16px)",
+      animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+      opacity: 0.6
+    },
+    cornerBottomLeft: {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      width: "32px",
+      height: "32px",
+      background: "#2563eb",
+      borderTopRightRadius: "50%",
+      filter: "blur(16px)",
+      animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+      opacity: 0.6
+    }
+  };
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("style", null, `
+          @keyframes borderPulse {
+            0%, 100% {
+              opacity: 1;
+            }
+            50% {
+              opacity: 0.5;
+            }
+          }
+        `), /* @__PURE__ */ React2.createElement("div", { style: styles.container }, /* @__PURE__ */ React2.createElement("div", { style: styles.rightBorder1 }), /* @__PURE__ */ React2.createElement("div", { style: styles.rightBorder2 }), /* @__PURE__ */ React2.createElement("div", { style: styles.rightBorder3 }), /* @__PURE__ */ React2.createElement("div", { style: styles.leftBorder1 }), /* @__PURE__ */ React2.createElement("div", { style: styles.leftBorder2 }), /* @__PURE__ */ React2.createElement("div", { style: styles.leftBorder3 }), /* @__PURE__ */ React2.createElement("div", { style: styles.cornerTopLeft }), /* @__PURE__ */ React2.createElement("div", { style: styles.cornerTopRight }), /* @__PURE__ */ React2.createElement("div", { style: styles.cornerBottomRight }), /* @__PURE__ */ React2.createElement("div", { style: styles.cornerBottomLeft })));
 };
 var BorderGlow_default = BorderGlow;
 
@@ -746,6 +912,10 @@ if (typeof document !== "undefined") {
       0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
       50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
     }
+    @keyframes spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
   `;
   if (!document.head.querySelector("style[data-mic-button-animations]")) {
     style.setAttribute("data-mic-button-animations", "true");
@@ -753,34 +923,69 @@ if (typeof document !== "undefined") {
   }
 }
 var WaveAnimation = () => {
-  return /* @__PURE__ */ React3.createElement("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none" }, /* @__PURE__ */ React3.createElement("div", { className: "absolute inset-0 flex items-center justify-center" }, /* @__PURE__ */ React3.createElement(
-    "div",
-    {
-      className: "absolute w-24 h-24 rounded-full border-2 border-blue-500 opacity-40",
-      style: {
-        animationDelay: "0s",
-        animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
-      }
-    }
-  ), /* @__PURE__ */ React3.createElement(
-    "div",
-    {
-      className: "absolute w-32 h-32 rounded-full border-2 border-cyan-400 opacity-30",
-      style: {
-        animationDelay: "0.5s",
-        animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
-      }
-    }
-  ), /* @__PURE__ */ React3.createElement(
-    "div",
-    {
-      className: "absolute w-40 h-40 rounded-full border-2 border-purple-400 opacity-20",
-      style: {
-        animationDelay: "1s",
-        animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
-      }
+  const waveStyles = {
+    container: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      pointerEvents: "none"
+    },
+    innerContainer: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    wave1: {
+      position: "absolute",
+      width: "96px",
+      // w-24
+      height: "96px",
+      // h-24
+      borderRadius: "50%",
+      border: "2px solid #3b82f6",
+      // border-blue-500
+      opacity: 0.4,
+      animationDelay: "0s",
+      animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+    },
+    wave2: {
+      position: "absolute",
+      width: "128px",
+      // w-32
+      height: "128px",
+      // h-32
+      borderRadius: "50%",
+      border: "2px solid #22d3ee",
+      // border-cyan-400
+      opacity: 0.3,
+      animationDelay: "0.5s",
+      animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+    },
+    wave3: {
+      position: "absolute",
+      width: "160px",
+      // w-40
+      height: "160px",
+      // h-40
+      borderRadius: "50%",
+      border: "2px solid #c084fc",
+      // border-purple-400
+      opacity: 0.2,
+      animationDelay: "1s",
+      animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
     }
-  )));
+  };
+  return /* @__PURE__ */ React3.createElement("div", { style: waveStyles.container }, /* @__PURE__ */ React3.createElement("div", { style: waveStyles.innerContainer }, /* @__PURE__ */ React3.createElement("div", { style: waveStyles.wave1 }), /* @__PURE__ */ React3.createElement("div", { style: waveStyles.wave2 }), /* @__PURE__ */ React3.createElement("div", { style: waveStyles.wave3 })));
 };
 var UnifiedModal = ({
   text,
@@ -826,87 +1031,318 @@ var UnifiedModal = ({
   if (!isVisible) return null;
   const isSpeechMode = mode === "speech";
   const isComplete = currentWordIndex >= (text?.split(" ").length || 0) - 1;
-  return /* @__PURE__ */ React3.createElement("div", { className: "fixed inset-x-0 bottom-0 z-[500000] flex items-end justify-center" }, /* @__PURE__ */ React3.createElement("div", { className: "fixed inset-0 bg-black/20", onClick: onClose }), /* @__PURE__ */ React3.createElement(
+  const modalStyles = {
+    container: {
+      position: "fixed",
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 5e5,
+      display: "flex",
+      alignItems: "flex-end",
+      justifyContent: "center"
+    },
+    overlay: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.2)",
+      cursor: "pointer"
+    },
+    modalContainer: {
+      position: "relative",
+      width: "100%",
+      maxWidth: "384px",
+      // max-w-sm
+      margin: "0 auto",
+      height: "30vh",
+      animation: "slideUp 0.3s ease-out forwards",
+      transform: "translateY(100%)"
+    },
+    orbTop: {
+      position: "absolute",
+      top: "-16px",
+      right: "-16px",
+      width: "64px",
+      // w-16
+      height: "64px",
+      // h-16
+      background: "linear-gradient(to bottom right, rgba(59, 130, 246, 0.4), rgba(59, 130, 246, 0.2))",
+      borderRadius: "50%",
+      filter: "blur(24px)",
+      // blur-xl
+      animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+    },
+    orbBottom: {
+      position: "absolute",
+      bottom: "-16px",
+      left: "-16px",
+      width: "48px",
+      // w-12
+      height: "48px",
+      // h-12
+      background: "linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.1))",
+      borderRadius: "50%",
+      filter: "blur(16px)",
+      // blur-lg
+      animationDelay: "1s",
+      animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+    }
+  };
+  return /* @__PURE__ */ React3.createElement("div", { style: modalStyles.container }, /* @__PURE__ */ React3.createElement("div", { style: modalStyles.overlay, onClick: onClose }), /* @__PURE__ */ React3.createElement("div", { style: modalStyles.modalContainer }, /* @__PURE__ */ React3.createElement("div", { style: modalStyles.orbTop }), /* @__PURE__ */ React3.createElement("div", { style: modalStyles.orbBottom }), /* @__PURE__ */ React3.createElement(
     "div",
     {
-      className: "relative w-full max-w-sm mx-auto",
       style: {
-        height: "30vh",
-        animation: "slideUp 0.3s ease-out forwards",
-        transform: "translateY(100%)"
+        position: "relative",
+        backgroundColor: "white",
+        borderTopLeftRadius: "24px",
+        borderTopRightRadius: "24px",
+        borderTop: "1px solid rgba(59, 130, 246, 0.3)",
+        borderLeft: "1px solid rgba(59, 130, 246, 0.3)",
+        borderRight: "1px solid rgba(59, 130, 246, 0.3)",
+        boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
       }
     },
     /* @__PURE__ */ React3.createElement(
       "div",
       {
-        className: "absolute -top-4 -right-4 w-16 h-16 bg-gradient-to-br from-blue-500/40 to-blue-500/20 rounded-full blur-xl",
-        style: { animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" }
-      }
-    ),
-    /* @__PURE__ */ React3.createElement(
-      "div",
-      {
-        className: "absolute -bottom-4 -left-4 w-12 h-12 bg-gradient-to-br from-blue-500/30 to-blue-500/10 rounded-full blur-lg",
         style: {
-          animationDelay: "1s",
-          animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+          position: "relative",
+          background: "linear-gradient(to right, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05), rgba(59, 130, 246, 0.1))",
+          padding: "16px",
+          borderBottom: "1px solid rgba(59, 130, 246, 0.2)",
+          flexShrink: 0
         }
-      }
+      },
+      /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" } }, /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ React3.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React3.createElement(
+        "div",
+        {
+          style: {
+            width: "32px",
+            height: "32px",
+            background: "linear-gradient(to bottom right, #3b82f6, #3b82f6)",
+            borderRadius: "12px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
+          }
+        },
+        isSpeechMode ? /* @__PURE__ */ React3.createElement(Mic, { style: { width: "16px", height: "16px", color: "white" } }) : /* @__PURE__ */ React3.createElement(Sparkles, { style: { width: "16px", height: "16px", color: "white" } })
+      ), /* @__PURE__ */ React3.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: "-4px",
+            left: "-4px",
+            right: "-4px",
+            bottom: "-4px",
+            background: "linear-gradient(to bottom right, #3b82f6, #3b82f6)",
+            borderRadius: "12px",
+            opacity: 0.3,
+            animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+          }
+        }
+      )), /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement(
+        "h3",
+        {
+          style: {
+            fontSize: "16px",
+            fontWeight: "600",
+            color: "#1f2937",
+            margin: 0
+          }
+        },
+        isSpeechMode ? "Voice Input" : "AI Assistant"
+      ), /* @__PURE__ */ React3.createElement(
+        "div",
+        {
+          style: { display: "flex", alignItems: "center", gap: "8px", marginTop: "2px" }
+        },
+        isSpeechMode ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", gap: "4px" } }, /* @__PURE__ */ React3.createElement(
+          "div",
+          {
+            style: {
+              width: "4px",
+              height: "4px",
+              backgroundColor: "#3b82f6",
+              borderRadius: "50%",
+              animationDelay: "0ms",
+              animation: "bounce 1s infinite"
+            }
+          }
+        ), /* @__PURE__ */ React3.createElement(
+          "div",
+          {
+            style: {
+              width: "4px",
+              height: "4px",
+              backgroundColor: "#3b82f6",
+              borderRadius: "50%",
+              animationDelay: "150ms",
+              animation: "bounce 1s infinite"
+            }
+          }
+        ), /* @__PURE__ */ React3.createElement(
+          "div",
+          {
+            style: {
+              width: "4px",
+              height: "4px",
+              backgroundColor: "#3b82f6",
+              borderRadius: "50%",
+              animationDelay: "300ms",
+              animation: "bounce 1s infinite"
+            }
+          }
+        )), /* @__PURE__ */ React3.createElement("span", { style: { fontSize: "12px", color: "#4b5563" } }, "Listening...")) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Volume2, { style: { width: "12px", height: "12px", color: "#3b82f6" } }), /* @__PURE__ */ React3.createElement("span", { style: { fontSize: "12px", color: "#4b5563" } }, "Speaking..."))
+      ))), /* @__PURE__ */ React3.createElement(
+        "button",
+        {
+          onClick: onClose,
+          style: {
+            width: "32px",
+            height: "32px",
+            borderRadius: "12px",
+            backgroundColor: "rgba(255, 255, 255, 0.1)",
+            border: "none",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transition: "all 0.2s",
+            cursor: "pointer"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+            e.currentTarget.style.transform = "scale(1.05)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
+            e.currentTarget.style.transform = "scale(1)";
+          }
+        },
+        /* @__PURE__ */ React3.createElement(X, { style: { width: "16px", height: "16px", color: "#4b5563" } })
+      ))
     ),
-    /* @__PURE__ */ React3.createElement("div", { className: "relative bg-white rounded-t-3xl border-t border-x border-blue-500/30 shadow-2xl h-full flex flex-col overflow-hidden" }, /* @__PURE__ */ React3.createElement("div", { className: "relative bg-gradient-to-r from-blue-500/10 via-blue-500/5 to-blue-500/10 p-4 border-b border-blue-500/20 flex-shrink-0" }, /* @__PURE__ */ React3.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React3.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React3.createElement("div", { className: "relative" }, /* @__PURE__ */ React3.createElement("div", { className: "w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-500 rounded-xl flex items-center justify-center shadow-lg" }, isSpeechMode ? /* @__PURE__ */ React3.createElement(Mic, { className: "w-4 h-4 text-white" }) : /* @__PURE__ */ React3.createElement(Sparkles, { className: "w-4 h-4 text-white" })), /* @__PURE__ */ React3.createElement(
-      "div",
-      {
-        className: "absolute -inset-1 bg-gradient-to-br from-blue-500 to-blue-500 rounded-xl opacity-30",
-        style: { animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" }
-      }
-    )), /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("h3", { className: "text-base font-semibold text-gray-800" }, isSpeechMode ? "Voice Input" : "AI Assistant"), /* @__PURE__ */ React3.createElement("div", { className: "flex items-center gap-2 mt-0.5" }, isSpeechMode ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", { className: "flex gap-1" }, /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React3.createElement(
       "div",
       {
-        className: "w-1 h-1 bg-blue-500 rounded-full",
         style: {
-          animationDelay: "0ms",
-          animation: "bounce 1s infinite"
+          flex: 1,
+          padding: "16px",
+          overflowY: "auto"
         }
-      }
-    ), /* @__PURE__ */ React3.createElement(
+      },
+      /* @__PURE__ */ React3.createElement(
+        "div",
+        {
+          style: {
+            minHeight: "80px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }
+        },
+        displayedText ? /* @__PURE__ */ React3.createElement("div", { style: { width: "100%", textAlign: "center" } }, /* @__PURE__ */ React3.createElement(
+          "p",
+          {
+            style: {
+              fontSize: "14px",
+              lineHeight: "1.625",
+              fontWeight: "300",
+              letterSpacing: "0.025em",
+              color: "#1f2937",
+              margin: 0
+            }
+          },
+          displayedText,
+          !isComplete && /* @__PURE__ */ React3.createElement(
+            "span",
+            {
+              style: {
+                display: "inline-block",
+                width: "2px",
+                height: "20px",
+                background: "linear-gradient(to top, #3b82f6, #3b82f6)",
+                marginLeft: "8px",
+                verticalAlign: "text-bottom",
+                borderRadius: "9999px",
+                animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+              }
+            }
+          )
+        )) : /* @__PURE__ */ React3.createElement("div", { style: { width: "100%", textAlign: "center" } }, /* @__PURE__ */ React3.createElement(
+          "p",
+          {
+            style: {
+              fontSize: "14px",
+              color: "#4b5563",
+              fontWeight: "300",
+              fontStyle: "italic",
+              margin: 0
+            }
+          },
+          isSpeechMode ? "Start speaking..." : "Generating response..."
+        ))
+      )
+    ),
+    /* @__PURE__ */ React3.createElement(
       "div",
       {
-        className: "w-1 h-1 bg-blue-500 rounded-full",
         style: {
-          animationDelay: "150ms",
-          animation: "bounce 1s infinite"
+          paddingLeft: "16px",
+          paddingRight: "16px",
+          paddingBottom: "16px",
+          flexShrink: 0
         }
-      }
-    ), /* @__PURE__ */ React3.createElement(
+      },
+      /* @__PURE__ */ React3.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            fontSize: "12px",
+            color: "#6b7280"
+          }
+        },
+        /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React3.createElement(
+          "div",
+          {
+            style: {
+              width: "8px",
+              height: "8px",
+              backgroundColor: "#3b82f6",
+              borderRadius: "50%",
+              animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+            }
+          }
+        ), /* @__PURE__ */ React3.createElement("span", null, isSpeechMode ? "Listening for input..." : "Response delivered")),
+        /* @__PURE__ */ React3.createElement("span", null, (/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }))
+      )
+    ),
+    /* @__PURE__ */ React3.createElement(
       "div",
       {
-        className: "w-1 h-1 bg-blue-500 rounded-full",
         style: {
-          animationDelay: "300ms",
-          animation: "bounce 1s infinite"
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: "1px",
+          background: "linear-gradient(to right, transparent, rgba(59, 130, 246, 0.5), transparent)"
         }
       }
-    )), /* @__PURE__ */ React3.createElement("span", { className: "text-xs text-gray-600" }, "Listening...")) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Volume2, { className: "w-3 h-3 text-blue-500" }), /* @__PURE__ */ React3.createElement("span", { className: "text-xs text-gray-600" }, "Speaking..."))))), /* @__PURE__ */ React3.createElement(
-      "button",
-      {
-        onClick: onClose,
-        className: "w-8 h-8 rounded-xl bg-white/10 hover:bg-white/20 flex items-center justify-center transition-all duration-200 hover:scale-105"
-      },
-      /* @__PURE__ */ React3.createElement(X, { className: "w-4 h-4 text-gray-600" })
-    ))), /* @__PURE__ */ React3.createElement("div", { className: "flex-1 p-4 overflow-y-auto" }, /* @__PURE__ */ React3.createElement("div", { className: "min-h-[80px] flex items-center justify-center" }, displayedText ? /* @__PURE__ */ React3.createElement("div", { className: "w-full text-center" }, /* @__PURE__ */ React3.createElement("p", { className: "text-sm leading-relaxed font-light tracking-wide text-gray-800" }, displayedText, !isComplete && /* @__PURE__ */ React3.createElement(
-      "span",
-      {
-        className: "inline-block w-0.5 h-5 bg-gradient-to-t from-blue-500 to-blue-500 ml-2 align-text-bottom rounded-full",
-        style: { animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" }
-      }
-    ))) : /* @__PURE__ */ React3.createElement("div", { className: "w-full text-center" }, /* @__PURE__ */ React3.createElement("p", { className: "text-sm text-gray-600 font-light italic" }, isSpeechMode ? "Start speaking..." : "Generating response...")))), /* @__PURE__ */ React3.createElement("div", { className: "px-4 pb-4 flex-shrink-0" }, /* @__PURE__ */ React3.createElement("div", { className: "flex items-center justify-between text-xs text-gray-500" }, /* @__PURE__ */ React3.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React3.createElement(
-      "div",
-      {
-        className: "w-2 h-2 bg-blue-500 rounded-full",
-        style: { animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" }
-      }
-    ), /* @__PURE__ */ React3.createElement("span", null, isSpeechMode ? "Listening for input..." : "Response delivered")), /* @__PURE__ */ React3.createElement("span", null, (/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })))), /* @__PURE__ */ React3.createElement("div", { className: "absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-500/50 to-transparent" }))
-  ));
+    )
+  )));
 };
 var MicButton = ({
   hasText = false,
@@ -916,7 +1352,8 @@ var MicButton = ({
   imageStyle,
   buttonStyle,
   screenPosition = "bottom-right",
-  buttonSize = 60
+  bottomSpace = 20,
+  buttonSize = 64
 }) => {
   const { isListening, start, stop, transcript } = useVoice();
   const [micState, setMicState] = useState4("idle");
@@ -998,27 +1435,36 @@ var MicButton = ({
     }
   }, [isListening, transcript]);
   const getIcon = () => {
-    switch (micState) {
-      case "listening":
-        return /* @__PURE__ */ React3.createElement(Mic, { className: "w-7 h-7 text-white drop-shadow-lg" });
-      case "thinking":
-        return /* @__PURE__ */ React3.createElement(Loader2, { className: "w-7 h-7 text-white drop-shadow-lg animate-spin" });
-      case "replying":
-        return /* @__PURE__ */ React3.createElement(Volume2, { className: "w-7 h-7 text-white drop-shadow-lg animate-pulse" });
-      default:
-        return /* @__PURE__ */ React3.createElement(Mic, { className: "w-7 h-7 text-white drop-shadow-lg" });
+    if (imageSource) {
+      const baseImageStyle = {
+        width: `${buttonSize * 0.4375}px`,
+        height: `${buttonSize * 0.4375}px`,
+        objectFit: "contain",
+        filter: "drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1))",
+        ...imageStyle
+      };
+      const animatedImageStyle = micState === "thinking" ? { ...baseImageStyle, animation: "spin 1s linear infinite" } : micState === "replying" ? { ...baseImageStyle, animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" } : baseImageStyle;
+      return /* @__PURE__ */ React3.createElement("img", { src: imageSource, alt: "Voice Assistant", style: animatedImageStyle });
     }
-  };
-  const getButtonClasses = () => {
+    const iconStyle = {
+      width: `${buttonSize * 0.4375}px`,
+      height: `${buttonSize * 0.4375}px`,
+      color: "white",
+      filter: "drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1))"
+    };
     switch (micState) {
-      case "listening":
-        return "scale-110 shadow-2xl shadow-blue-500/60";
       case "thinking":
-        return "scale-105 shadow-xl shadow-purple-400/40 animate-pulse";
+        return /* @__PURE__ */ React3.createElement(Loader2, { style: { ...iconStyle, animation: "spin 1s linear infinite" } });
       case "replying":
-        return "scale-105 shadow-xl shadow-cyan-400/40";
+        return /* @__PURE__ */ React3.createElement(
+          Volume2,
+          {
+            style: { ...iconStyle, animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" }
+          }
+        );
+      case "listening":
       default:
-        return "hover:scale-105 shadow-lg shadow-blue-500/30 hover:shadow-xl hover:shadow-blue-500/40";
+        return /* @__PURE__ */ React3.createElement(Mic, { style: iconStyle });
     }
   };
   const shouldShowWaves = micState === "listening" || micState === "replying";
@@ -1026,7 +1472,7 @@ var MicButton = ({
     const positionStyles = {
       position: "fixed",
       // <-- Ensure button is fixed to the viewport
-      bottom: 20,
+      bottom: bottomSpace,
       zIndex: 9999
     };
     switch (screenPosition) {
@@ -1049,32 +1495,134 @@ var MicButton = ({
         };
     }
   };
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", { className: "relative flex items-center justify-center", style: getPositionStyle() }, shouldShowWaves && /* @__PURE__ */ React3.createElement(WaveAnimation, null), /* @__PURE__ */ React3.createElement(
+  const buttonStyles = {
+    container: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    button: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: `${buttonSize}px`,
+      height: `${buttonSize}px`,
+      borderRadius: "50%",
+      background: "linear-gradient(to bottom right, #3b82f6, #22d3ee, #c084fc)",
+      // from-blue-500 via-cyan-400 to-purple-400
+      transition: "all 0.5s",
+      border: "none",
+      boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+      // shadow-2xl
+      cursor: "pointer",
+      transform: "scale(1)",
+      ...buttonStyle
+    },
+    iconContainer: {
+      position: "relative",
+      zIndex: 10
+    },
+    listeningGlow: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: "50%",
+      backgroundColor: "#3b82f6",
+      opacity: 0.3,
+      animation: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"
+    },
+    thinkingRing: {
+      position: "absolute",
+      top: "-2px",
+      left: "-2px",
+      right: "-2px",
+      bottom: "-2px",
+      borderRadius: "50%",
+      border: "2px solid rgba(59, 130, 246, 0.6)",
+      animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+    },
+    replyingGlow: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: "50%",
+      backgroundColor: "#3b82f6",
+      opacity: 0.25,
+      animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+    }
+  };
+  const getDynamicButtonStyle = () => {
+    const baseStyle = { ...buttonStyles.button };
+    switch (micState) {
+      case "listening":
+        baseStyle.transform = "scale(1.1)";
+        baseStyle.boxShadow = "0 25px 50px -12px rgba(59, 130, 246, 0.6)";
+        break;
+      case "thinking":
+        baseStyle.transform = "scale(1.05)";
+        baseStyle.boxShadow = "0 20px 25px -5px rgba(196, 132, 252, 0.4)";
+        baseStyle.animation = "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite";
+        break;
+      case "replying":
+        baseStyle.transform = "scale(1.05)";
+        baseStyle.boxShadow = "0 20px 25px -5px rgba(34, 211, 238, 0.4)";
+        break;
+      default:
+        baseStyle.boxShadow = "0 10px 15px -3px rgba(59, 130, 246, 0.3)";
+        break;
+    }
+    return baseStyle;
+  };
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", { style: { ...buttonStyles.container, ...getPositionStyle() } }, shouldShowWaves && /* @__PURE__ */ React3.createElement(WaveAnimation, null), /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React3.createElement(
     "button",
     {
       "data-testid": "ignore",
       onClick: handlePress,
       disabled: micState === "thinking" || micState === "replying",
-      className: `relative flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 via-cyan-400 to-purple-400 transition-all duration-500 border-0 shadow-2xl transform hover:scale-105 ${getButtonClasses()}`,
-      style: {
-        ...buttonStyle
+      style: getDynamicButtonStyle(),
+      onMouseEnter: (e) => {
+        if (micState === "idle") {
+          e.currentTarget.style.transform = "scale(1.05)";
+          e.currentTarget.style.boxShadow = "0 20px 25px -5px rgba(59, 130, 246, 0.4)";
+        }
+      },
+      onMouseLeave: (e) => {
+        if (micState === "idle") {
+          e.currentTarget.style.transform = "scale(1)";
+          e.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(59, 130, 246, 0.3)";
+        }
       },
       "aria-label": micState === "thinking" ? "Processing..." : micState === "replying" ? "AI is responding..." : isListening ? "Stop listening" : "Start listening"
     },
-    /* @__PURE__ */ React3.createElement("div", { className: "relative z-10" }, getIcon()),
-    micState === "listening" && /* @__PURE__ */ React3.createElement("div", { className: "absolute inset-0 rounded-full bg-blue-500 opacity-30 animate-ping" }),
-    micState === "thinking" && /* @__PURE__ */ React3.createElement(
-      "div",
-      {
-        className: "absolute inset-[-2px] rounded-full border-2 animate-pulse",
-        style: {
-          borderColor: "rgba(59, 130, 246, 0.6)",
-          animationDuration: "2s"
-        }
+    /* @__PURE__ */ React3.createElement("div", { style: buttonStyles.iconContainer }, getIcon()),
+    micState === "listening" && /* @__PURE__ */ React3.createElement("div", { style: buttonStyles.listeningGlow }),
+    micState === "thinking" && /* @__PURE__ */ React3.createElement("div", { style: buttonStyles.thinkingRing }),
+    micState === "replying" && /* @__PURE__ */ React3.createElement("div", { style: buttonStyles.replyingGlow })
+  ), hasText && text && /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      style: {
+        fontSize: "12px",
+        color: "#6b7280",
+        fontWeight: "500",
+        textAlign: "center",
+        background: "rgba(255, 255, 255, 0.9)",
+        padding: "4px 8px",
+        borderRadius: "6px",
+        backdropFilter: "blur(8px)",
+        border: "1px solid rgba(59, 130, 246, 0.2)",
+        boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+        ...textStyle
       }
-    ),
-    micState === "replying" && /* @__PURE__ */ React3.createElement("div", { className: "absolute inset-0 rounded-full bg-blue-500 opacity-25 animate-pulse" })
-  )), showModal && typeof document !== "undefined" && createPortal(
+    },
+    text
+  ))), showModal && typeof document !== "undefined" && createPortal(
     /* @__PURE__ */ React3.createElement(
       UnifiedModal,
       {
@@ -1103,8 +1651,12 @@ export {
   CuekitProvider,
   InitCuekit,
   MicButton,
+  navigate,
   onStateChange,
   processVoice,
+  safeNavigate,
+  setNavigationHandler,
+  setNavigator,
   useAudioController,
   useVoiceRecognition
 };