@cuekit-ai/react 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1110 @@
+// src/utils/JsxEncoder.ts
+function generateStableDOMId(element) {
+  const tagName = element.tagName.toLowerCase();
+  const text = (element.textContent || "").trim().substring(0, 50);
+  let sibling = element.previousElementSibling;
+  let position = 1;
+  while (sibling) {
+    if (sibling.tagName === element.tagName) {
+      position++;
+    }
+    sibling = sibling.previousElementSibling;
+  }
+  const path = getElementPath(element);
+  const idString = `${tagName}[${position}]_(${text})_${path}`;
+  let hash = 0;
+  for (let i = 0; i < idString.length; i++) {
+    const char = idString.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash |= 0;
+  }
+  return hash.toString(36);
+}
+function getElementPath(element) {
+  if (element.id) {
+    return `id(${element.id})`;
+  }
+  if (element.tagName.toLowerCase() === "body") {
+    return "/body";
+  }
+  let ix = 0;
+  const siblings = element.parentNode?.children || new HTMLCollection();
+  for (let i = 0; i < siblings.length; i++) {
+    const sibling = siblings[i];
+    if (sibling === element) {
+      return `${getElementPath(element.parentNode)}/${element.tagName}[${ix + 1}]`;
+    }
+    if (sibling.nodeType === 1 && sibling.tagName === element.tagName) {
+      ix++;
+    }
+  }
+  return "not_found";
+}
+
+// src/utils/patchReact.ts
+function getInteractiveElementsFromDOM() {
+  const interactiveElements = [];
+  const elementQuery = 'button, [role="button"], a, [data-onclick-id], [data-on-press-id]';
+  document.querySelectorAll(elementQuery).forEach((element) => {
+    const textContent = element.textContent?.trim();
+    const accessibilityLabel = element.getAttribute("aria-label");
+    const testId = element.getAttribute("data-testid");
+    if ((textContent || accessibilityLabel || testId) && !element.hasAttribute("data-cuekit-ignore")) {
+      interactiveElements.push({
+        element,
+        text: textContent || accessibilityLabel || testId || "No Text",
+        type: element.tagName.toLowerCase()
+      });
+    }
+  });
+  return interactiveElements;
+}
+function flushCapturedElements() {
+  const domElements = getInteractiveElementsFromDOM();
+  const result = domElements.map(({ element, text, type }) => {
+    const elementId = generateStableDOMId(element);
+    return {
+      elementType: type,
+      childrenValue: text,
+      elementId,
+      element
+    };
+  });
+  const uniqueMap = /* @__PURE__ */ new Map();
+  for (const item of result) {
+    if (!uniqueMap.has(item.elementId)) {
+      uniqueMap.set(item.elementId, item);
+    }
+  }
+  const elements = Array.from(uniqueMap.values());
+  console.log("Cuekit Captured Elements:", elements);
+  return elements;
+}
+
+// src/core/IntentStore.ts
+var store = {
+  screenMetadata: {},
+  allElementsData: []
+};
+var GlobalStore = {
+  // 🔹 Screen Metadata Methods
+  setMetadata(screen, metadata) {
+    store.screenMetadata[screen] = metadata;
+  },
+  getMetadata(screen) {
+    return store.screenMetadata[screen];
+  },
+  clearMetadata(screen) {
+    delete store.screenMetadata[screen];
+  },
+  // 🔹 Generic Store Access Methods
+  setData(key, value) {
+    store[key] = value;
+  },
+  getData(key) {
+    return store[key];
+  },
+  clearData(key) {
+    delete store[key];
+  },
+  // 🔹 Element Data Management
+  setElement(elementData) {
+    const index = store.allElementsData.findIndex((e) => e.elementId === elementData.elementId);
+    if (index >= 0) {
+      console.log("Updating existing element");
+      store.allElementsData[index] = elementData;
+    } else {
+      console.log("Adding new element");
+      store.allElementsData.push(elementData);
+    }
+  },
+  getElementById(elementId) {
+    const match = store.allElementsData.find((e) => e.elementId === elementId);
+    if (!match) {
+      console.warn(`[GlobalStore] No element found for ID: ${elementId}`);
+      console.log("All elements in store:", store.allElementsData);
+    }
+    return match;
+  },
+  deleteElementById(id) {
+    store.allElementsData = store.allElementsData.filter((e) => e.elementId !== id);
+  },
+  clearAllElements() {
+    store.allElementsData = [];
+  }
+};
+
+// src/hook/useTtsManager.ts
+var TtsManager = class {
+  constructor() {
+    this.isSpeaking = false;
+    this.utterance = null;
+    if (typeof window !== "undefined" && "speechSynthesis" in window) {
+      this.utterance = new SpeechSynthesisUtterance();
+      this.utterance.onstart = () => {
+        this.isSpeaking = true;
+      };
+      this.utterance.onend = () => {
+        this.isSpeaking = false;
+      };
+      this.utterance.onerror = () => {
+        this.isSpeaking = false;
+      };
+    }
+  }
+  speak(text) {
+    if (!text || !this.utterance || typeof window === "undefined" || !("speechSynthesis" in window)) {
+      return;
+    }
+    console.log("\u{1F508} Speaking:", text);
+    window.speechSynthesis.cancel();
+    this.utterance.text = text;
+    window.speechSynthesis.speak(this.utterance);
+  }
+  stop() {
+    if (typeof window !== "undefined" && "speechSynthesis" in window) {
+      window.speechSynthesis.cancel();
+    }
+  }
+  getIsSpeaking() {
+    return this.isSpeaking;
+  }
+};
+var ttsManager = new TtsManager();
+
+// src/core/navigation.ts
+var navigation;
+var setNavigator = (navigator2) => {
+  navigation = navigator2;
+};
+var navigate = (path, params) => {
+  let fullPath = path;
+  if (params) {
+    const searchParams = new URLSearchParams(params).toString();
+    if (searchParams) {
+      fullPath += `?${searchParams}`;
+    }
+  }
+  if (navigation) {
+    navigation.push(fullPath);
+  } else {
+    window.location.href = fullPath;
+  }
+};
+var getCurrentPath = () => {
+  return window.location.pathname;
+};
+var getSearchParams = () => {
+  if (navigation) {
+    return navigation.query;
+  }
+  return new URLSearchParams(window.location.search);
+};
+var safeNavigate = (name, params = {}) => {
+  if (name) {
+    navigate(name, params);
+  } else {
+    console.warn("[CueKit] route name not provided");
+  }
+};
+function getCurrentScreenName() {
+  try {
+    const path = getCurrentPath();
+    return path || "UnknownScreen";
+  } catch (e) {
+    return "UnknownScreen";
+  }
+}
+function getCurrentRouteParams() {
+  try {
+    const params = {};
+    const searchParams = getSearchParams();
+    if (searchParams instanceof URLSearchParams) {
+      searchParams.forEach((value, key) => {
+        params[key] = value;
+      });
+    } else {
+      return searchParams;
+    }
+    return params;
+  } catch (e) {
+    return {};
+  }
+}
+function onStateChange() {
+  const routeName = getCurrentScreenName();
+  const params = getCurrentRouteParams();
+  if (params && params.metadata) {
+    try {
+      const metadata = JSON.parse(params.metadata);
+      GlobalStore.setMetadata(routeName, metadata);
+    } catch (error) {
+      console.error("Failed to parse metadata from URL:", error);
+    }
+  }
+}
+var handleNavigationAndClick = (routeName, elementHash) => {
+  safeNavigate(routeName);
+  const observer = new MutationObserver((mutationsList, observer2) => {
+    const elements = flushCapturedElements();
+    const elementToClick = elements.find((el) => el.elementId === elementHash);
+    if (elementToClick && elementToClick.element) {
+      ;
+      elementToClick.element.click();
+      observer2.disconnect();
+    }
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+};
+
+// src/utils/network.ts
+var isConnected = async () => {
+  return navigator.onLine;
+};
+
+// src/useVoice.ts
+var processVoice = async (transcript, apiKey, appId, deviceId) => {
+  try {
+    const elementsArray = flushCapturedElements();
+    const lowerTranscript = transcript.toLowerCase().trim();
+    const hasInternet = await isConnected();
+    if (!hasInternet) {
+      ttsManager.speak("No Internet found. Please connect to the internet.");
+      return null;
+    }
+    console.log("API CALL STARTED:", lowerTranscript);
+    const transformedArray = elementsArray.map(({ elementId, childrenValue, elementType }) => ({
+      hash: elementId,
+      text: childrenValue,
+      componentType: elementType.toLowerCase()
+    }));
+    const uniqueMap = /* @__PURE__ */ new Map();
+    transformedArray.forEach((item) => {
+      if (!uniqueMap.has(item.hash)) {
+        uniqueMap.set(item.hash, item);
+      }
+    });
+    const body = {
+      components: Array.from(uniqueMap.values()),
+      userInput: lowerTranscript,
+      deviceId,
+      screen: getCurrentScreenName()
+    };
+    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 data = await response.json();
+      if (!response.ok) {
+        console.log("Response Status:", response.status);
+        console.log("Response Error:", data);
+        throw new Error(`Request failed with status ${response.status}`);
+      }
+      const targetScreen = data?.routeName;
+      const currentScreen = getCurrentScreenName();
+      if (targetScreen && !currentScreen.toLowerCase().includes(targetScreen.toLowerCase())) {
+        GlobalStore.setData("reTrigger", true);
+        GlobalStore.setData("transcript", lowerTranscript);
+        safeNavigate(targetScreen);
+        if (data.text) {
+          ttsManager.speak(data.text);
+        }
+        return data;
+      }
+      const { actionType, component: selectedElement, claudeError, errorMessage, text } = data;
+      if (claudeError) {
+        console.log(errorMessage);
+        ttsManager.speak(errorMessage);
+        return data;
+      }
+      switch (actionType) {
+        case "navigate":
+          if (selectedElement?.hash && targetScreen) {
+            if (text) {
+              ttsManager.speak(text);
+            }
+            handleNavigationAndClick(targetScreen, selectedElement.hash);
+          } else {
+            safeNavigate(data?.routeName, {});
+            if (text) {
+              ttsManager.speak(text);
+            }
+          }
+          break;
+        case "click":
+          if (selectedElement?.hash) {
+            const res = elementsArray.find((el) => el.elementId === selectedElement?.hash);
+            if (res?.elementId === selectedElement?.hash && res?.element instanceof HTMLElement) {
+              res.element.click();
+            }
+            if (text) {
+              ttsManager.speak(text);
+            }
+          }
+          break;
+        case "audio_only":
+          if (text) {
+            ttsManager.speak(text);
+          }
+          break;
+        default:
+          break;
+      }
+      return data;
+    } catch (error) {
+      console.log("Fetch Error:", error);
+    }
+  } catch (err) {
+    console.error("Cuekit - processVoice() error:", err);
+    return null;
+  }
+};
+
+// src/Provider/CuekitProvider.tsx
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+// src/core/globals.ts
+var _apiKey = "";
+var setApiKey = (key) => _apiKey = key;
+
+// src/core/init.ts
+function InitCuekit(apiKey, navigator2) {
+  setApiKey(apiKey);
+  if (navigator2) {
+    setNavigator(navigator2);
+  }
+}
+
+// src/Provider/CuekitProvider.tsx
+if (typeof window !== "undefined" && !globalThis.CuekitStore) {
+  globalThis.CuekitStore = {
+    intent: null,
+    lastText: "",
+    lastClickedLabel: "",
+    apiKey: void 0,
+    appId: void 0,
+    deviceId: void 0,
+    update(data) {
+      Object.assign(globalThis.CuekitStore, data);
+    }
+  };
+}
+var QubeContext = createContext({
+  apiKey: "",
+  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);
+  }
+  return id;
+};
+var CuekitProvider = ({
+  apiKey,
+  deviceId = "",
+  appId,
+  children,
+  navigator: navigator2
+}) => {
+  const [internalDeviceId, setInternalDeviceId] = useState(deviceId);
+  useEffect(() => {
+    InitCuekit(apiKey, navigator2);
+  }, [apiKey, navigator2]);
+  useEffect(() => {
+    const updateGlobalStore = (id) => {
+      if (globalThis.CuekitStore) {
+        globalThis.CuekitStore.update({
+          apiKey,
+          appId,
+          deviceId: id
+        });
+      }
+    };
+    if (!internalDeviceId) {
+      const id = getUniqueId();
+      setInternalDeviceId(id);
+      updateGlobalStore(id);
+    } else {
+      updateGlobalStore(internalDeviceId);
+    }
+  }, [internalDeviceId, apiKey, appId]);
+  useEffect(() => {
+    const handleRouteChange = () => {
+      onStateChange();
+      const reTrigger = GlobalStore.getData("reTrigger");
+      if (reTrigger) {
+        const transcript = GlobalStore.getData("transcript");
+        if (typeof transcript === "string" && transcript) {
+          setTimeout(() => {
+            processVoice(transcript, apiKey, appId, internalDeviceId);
+          }, 100);
+        }
+        GlobalStore.clearData("reTrigger");
+        GlobalStore.clearData("transcript");
+      }
+    };
+    window.addEventListener("popstate", handleRouteChange);
+    const originalPushState = history.pushState;
+    history.pushState = function(...args) {
+      originalPushState.apply(this, args);
+      handleRouteChange();
+    };
+    handleRouteChange();
+    return () => {
+      window.removeEventListener("popstate", handleRouteChange);
+      history.pushState = originalPushState;
+    };
+  }, [apiKey, appId, internalDeviceId]);
+  return /* @__PURE__ */ React.createElement(
+    QubeContext.Provider,
+    {
+      value: {
+        apiKey,
+        appId
+      }
+    },
+    children
+  );
+};
+
+// src/hook/useAudioController.ts
+import { useCallback, useEffect as useEffect2, useRef } from "react";
+var AudioController = class {
+  constructor() {
+    this.audioInstance = null;
+  }
+  setAudioInstance(audio) {
+    this.audioInstance = audio;
+  }
+  stopPlayback() {
+    if (this.audioInstance) {
+      this.audioInstance.pause();
+      this.audioInstance.currentTime = 0;
+      this.audioInstance = null;
+    }
+  }
+  isPlaying() {
+    return !!this.audioInstance && !this.audioInstance.paused;
+  }
+};
+var audioController = new AudioController();
+var useAudioController = () => {
+  const audioRef = useRef(null);
+  const stop = useCallback(() => {
+    audioController.stopPlayback();
+  }, []);
+  const isPlaying = useCallback(() => audioController.isPlaying(), []);
+  const play = useCallback((url) => {
+    return new Promise((resolve, reject) => {
+      if (audioRef.current) {
+        audioController.stopPlayback();
+      }
+      const audio = new Audio(url);
+      audioRef.current = audio;
+      audioController.setAudioInstance(audio);
+      audio.oncanplaythrough = () => {
+        audio.play().catch(reject);
+      };
+      audio.onended = () => {
+        audioController.stopPlayback();
+        resolve();
+      };
+      audio.onerror = (err) => {
+        audioController.stopPlayback();
+        reject(err);
+      };
+    });
+  }, []);
+  useEffect2(() => {
+    return () => {
+      audioController.stopPlayback();
+    };
+  }, []);
+  return {
+    stop,
+    isPlaying,
+    play
+  };
+};
+
+// src/Components/MicButton.tsx
+import React3, { useState as useState4, useEffect as useEffect4 } from "react";
+import { createPortal } from "react-dom";
+
+// src/hook/useVoice.ts
+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;
+if (recognition) {
+  recognition.continuous = true;
+  recognition.interimResults = true;
+}
+var useVoiceRecognition = (lang = "en-US") => {
+  const [isListening, setIsListening] = useState2(false);
+  const [speechText, setSpeechText] = useState2("");
+  const speechTextRef = useRef2("");
+  const silenceTimerRef = useRef2(null);
+  const stopListening = useCallback2(() => {
+    return new Promise((resolve) => {
+      if (recognition) {
+        recognition.stop();
+      }
+      if (silenceTimerRef.current) {
+        clearTimeout(silenceTimerRef.current);
+      }
+      resolve();
+    });
+  }, []);
+  const startListening = useCallback2(() => {
+    return new Promise((resolve, reject) => {
+      if (!recognition) {
+        reject(new Error("Speech recognition not supported"));
+        return;
+      }
+      setSpeechText("");
+      speechTextRef.current = "";
+      recognition.lang = lang;
+      recognition.onresult = (event) => {
+        if (silenceTimerRef.current) {
+          clearTimeout(silenceTimerRef.current);
+        }
+        const transcript = Array.from(event.results).map((result) => result[0]).map((result) => result.transcript).join("");
+        setSpeechText(transcript);
+        speechTextRef.current = transcript;
+        silenceTimerRef.current = setTimeout(() => {
+          stopListening();
+        }, 1500);
+      };
+      recognition.onerror = (event) => {
+        reject(event.error);
+        setIsListening(false);
+      };
+      recognition.onend = () => {
+        setIsListening(false);
+        if (silenceTimerRef.current) {
+          clearTimeout(silenceTimerRef.current);
+        }
+        resolve(speechTextRef.current);
+      };
+      recognition.start();
+      setIsListening(true);
+    });
+  }, [lang, stopListening]);
+  useEffect3(() => {
+    return () => {
+      if (recognition) {
+        recognition.stop();
+      }
+      if (silenceTimerRef.current) {
+        clearTimeout(silenceTimerRef.current);
+      }
+    };
+  }, []);
+  return {
+    isListening,
+    startListening,
+    stopListening,
+    speechText
+  };
+};
+
+// src/ttsEngine.ts
+var TtsManager2 = class {
+  constructor() {
+    this.isSpeaking = false;
+    this.utterance = null;
+    this.onEndCallback = null;
+    if (typeof window !== "undefined" && "speechSynthesis" in window) {
+      this.utterance = new SpeechSynthesisUtterance();
+      this.utterance.onstart = () => {
+        this.isSpeaking = true;
+      };
+      this.utterance.onend = () => {
+        this.isSpeaking = false;
+        if (this.onEndCallback) {
+          this.onEndCallback();
+        }
+      };
+      this.utterance.onerror = () => {
+        this.isSpeaking = false;
+        if (this.onEndCallback) {
+          this.onEndCallback();
+        }
+      };
+    }
+  }
+  speak(text, onEnd) {
+    if (!text || !this.utterance || typeof window === "undefined" || !("speechSynthesis" in window)) {
+      if (onEnd) {
+        onEnd();
+      }
+      return;
+    }
+    console.log("\u{1F508} Speaking:", text);
+    window.speechSynthesis.cancel();
+    this.utterance.text = text;
+    this.onEndCallback = onEnd || null;
+    window.speechSynthesis.speak(this.utterance);
+  }
+  stop() {
+    if (typeof window !== "undefined" && "speechSynthesis" in window) {
+      window.speechSynthesis.cancel();
+    }
+  }
+  getIsSpeaking() {
+    return this.isSpeaking;
+  }
+};
+var ttsManager2 = new TtsManager2();
+
+// src/hook/useVoice.ts
+var useVoice = () => {
+  const [isListening, setIsListening] = useState3(false);
+  const [transcript, setTranscript] = useState3("");
+  const {
+    startListening: startRecognition,
+    stopListening: stopRecognition,
+    speechText
+  } = useVoiceRecognition();
+  const start = useCallback3(
+    async (greeting = "Hello, how can I help you?") => {
+      try {
+        ttsManager2.speak(greeting, async () => {
+          const text = await startRecognition();
+          setTranscript(text);
+          setIsListening(false);
+        });
+        setIsListening(true);
+      } catch (error) {
+        console.error("Error starting voice recognition:", error);
+        setIsListening(false);
+      }
+    },
+    [startRecognition]
+  );
+  const stop = useCallback3(async () => {
+    try {
+      await stopRecognition();
+      setIsListening(false);
+    } catch (error) {
+      console.error("Error stopping voice recognition:", error);
+    }
+  }, [stopRecognition]);
+  return {
+    isListening,
+    transcript: speechText,
+    start,
+    stop
+  };
+};
+
+// src/Components/MicButton.tsx
+import { Mic, Loader2, Volume2, X, Sparkles } from "lucide-react";
+
+// src/Components/BorderGlow.tsx
+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" }));
+};
+var BorderGlow_default = BorderGlow;
+
+// src/Components/MicButton.tsx
+if (typeof document !== "undefined") {
+  const style = document.createElement("style");
+  style.textContent = `
+    @keyframes slideUp {
+      0% { transform: translateY(100%); }
+      100% { transform: translateY(0); }
+    }
+    @keyframes slideInUp {
+      0% { transform: translateY(100%); }
+      100% { transform: translateY(0); }
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+    @keyframes ping {
+      75%, 100% { transform: scale(2); opacity: 0; }
+    }
+    @keyframes bounce {
+      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); }
+    }
+  `;
+  if (!document.head.querySelector("style[data-mic-button-animations]")) {
+    style.setAttribute("data-mic-button-animations", "true");
+    document.head.appendChild(style);
+  }
+}
+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"
+      }
+    }
+  )));
+};
+var UnifiedModal = ({
+  text,
+  isVisible,
+  onClose,
+  mode = "response"
+}) => {
+  const [displayedText, setDisplayedText] = useState4("");
+  const [currentWordIndex, setCurrentWordIndex] = useState4(0);
+  const [isAnimationComplete, setIsAnimationComplete] = useState4(false);
+  useEffect4(() => {
+    if (!isVisible || !text) {
+      setDisplayedText("");
+      setCurrentWordIndex(0);
+      setIsAnimationComplete(false);
+      return;
+    }
+    const words = text.split(" ");
+    setDisplayedText("");
+    setCurrentWordIndex(0);
+    setIsAnimationComplete(false);
+    const timer = setInterval(
+      () => {
+        setCurrentWordIndex((prev) => {
+          if (prev >= words.length - 1) {
+            clearInterval(timer);
+            setIsAnimationComplete(true);
+            return prev;
+          }
+          return prev + 1;
+        });
+      },
+      mode === "speech" ? 380 : 250
+    );
+    return () => clearInterval(timer);
+  }, [text, isVisible, mode]);
+  useEffect4(() => {
+    if (isVisible && text) {
+      const words = text.split(" ");
+      setDisplayedText(words.slice(0, currentWordIndex + 1).join(" "));
+    }
+  }, [currentWordIndex, text, isVisible]);
+  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(
+    "div",
+    {
+      className: "relative w-full max-w-sm mx-auto",
+      style: {
+        height: "30vh",
+        animation: "slideUp 0.3s ease-out forwards",
+        transform: "translateY(100%)"
+      }
+    },
+    /* @__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"
+        }
+      }
+    ),
+    /* @__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(
+      "div",
+      {
+        className: "w-1 h-1 bg-blue-500 rounded-full",
+        style: {
+          animationDelay: "0ms",
+          animation: "bounce 1s infinite"
+        }
+      }
+    ), /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        className: "w-1 h-1 bg-blue-500 rounded-full",
+        style: {
+          animationDelay: "150ms",
+          animation: "bounce 1s infinite"
+        }
+      }
+    ), /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        className: "w-1 h-1 bg-blue-500 rounded-full",
+        style: {
+          animationDelay: "300ms",
+          animation: "bounce 1s infinite"
+        }
+      }
+    )), /* @__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,
+  text = "CueKit VC",
+  textStyle,
+  imageSource,
+  imageStyle,
+  buttonStyle,
+  screenPosition = "bottom-right",
+  buttonSize = 60
+}) => {
+  const { isListening, start, stop, transcript } = useVoice();
+  const [micState, setMicState] = useState4("idle");
+  const [showModal, setShowModal] = useState4(false);
+  const [modalMode, setModalMode] = useState4("speech");
+  const [modalText, setModalText] = useState4("");
+  const [userTranscript, setUserTranscript] = useState4("");
+  const [isAudioOnlyResponse, setIsAudioOnlyResponse] = useState4(false);
+  const [showBodyGlow, setShowBodyGlow] = useState4(false);
+  const handlePress = async () => {
+    if (isListening) {
+      await stop();
+      setMicState("idle");
+      setShowModal(false);
+      setShowBodyGlow(false);
+    } else {
+      await start("Hello, how can I help you?");
+      setMicState("listening");
+      setShowModal(true);
+      setModalMode("speech");
+      setModalText("");
+      setUserTranscript("");
+      setIsAudioOnlyResponse(false);
+      setShowBodyGlow(true);
+    }
+  };
+  React3.useEffect(() => {
+    if (isListening && transcript) {
+      setUserTranscript(transcript);
+      setModalText(transcript);
+    }
+  }, [isListening, transcript]);
+  React3.useEffect(() => {
+    if (!isListening && transcript) {
+      const { apiKey, appId, deviceId } = globalThis.CuekitStore;
+      setMicState("thinking");
+      processVoice(transcript, apiKey, appId, deviceId).then((data) => {
+        if (data) {
+          setMicState("replying");
+          if (data.actionType === "audio_only") {
+            setIsAudioOnlyResponse(true);
+            setModalText(data.text || "Processing audio response...");
+            setModalMode("response");
+            setMicState("idle");
+          } else {
+            setIsAudioOnlyResponse(false);
+            setTimeout(() => {
+              setModalText(data.text || "Processing audio response...");
+              setModalMode("response");
+              setMicState("idle");
+              const words = data.text.split(" ");
+              const animationTime = words.length * 250 + 1e3;
+              setTimeout(() => {
+                setShowBodyGlow(false);
+                setShowModal(false);
+              }, animationTime);
+            }, 1500);
+          }
+        } else {
+          setMicState("replying");
+          setTimeout(() => {
+            const response = "I understand you said: " + transcript + ".";
+            setModalText(response);
+            setModalMode("response");
+            setMicState("idle");
+            const words = response.split(" ");
+            const animationTime = words.length * 250 + 1e3;
+            setTimeout(() => {
+              setShowModal(false);
+              setShowBodyGlow(false);
+            }, animationTime);
+          }, 1500);
+        }
+      }).catch((error) => {
+        console.error("Error processing voice:", error);
+        setMicState("idle");
+        setShowModal(false);
+      });
+    }
+  }, [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" });
+    }
+  };
+  const getButtonClasses = () => {
+    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";
+      case "replying":
+        return "scale-105 shadow-xl shadow-cyan-400/40";
+      default:
+        return "hover:scale-105 shadow-lg shadow-blue-500/30 hover:shadow-xl hover:shadow-blue-500/40";
+    }
+  };
+  const shouldShowWaves = micState === "listening" || micState === "replying";
+  const getPositionStyle = () => {
+    const positionStyles = {
+      position: "fixed",
+      // <-- Ensure button is fixed to the viewport
+      bottom: 20,
+      zIndex: 9999
+    };
+    switch (screenPosition) {
+      case "bottom-center":
+        return {
+          ...positionStyles,
+          left: "50%",
+          transform: "translateX(-50%)"
+        };
+      case "bottom-left":
+        return {
+          ...positionStyles,
+          left: 20
+        };
+      case "bottom-right":
+      default:
+        return {
+          ...positionStyles,
+          right: 20
+        };
+    }
+  };
+  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(
+    "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
+      },
+      "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"
+        }
+      }
+    ),
+    micState === "replying" && /* @__PURE__ */ React3.createElement("div", { className: "absolute inset-0 rounded-full bg-blue-500 opacity-25 animate-pulse" })
+  )), showModal && typeof document !== "undefined" && createPortal(
+    /* @__PURE__ */ React3.createElement(
+      UnifiedModal,
+      {
+        text: modalText,
+        isVisible: showModal,
+        mode: modalMode,
+        onClose: () => {
+          setShowBodyGlow(false);
+          if (isAudioOnlyResponse || modalMode === "speech") {
+            setShowModal(false);
+            setIsAudioOnlyResponse(false);
+            if (modalMode === "speech") {
+              stop();
+            }
+          } else {
+            setShowModal(false);
+          }
+        }
+      }
+    ),
+    document.body
+  ), showBodyGlow && typeof document !== "undefined" && createPortal(/* @__PURE__ */ React3.createElement(BorderGlow_default, { isActive: true }), document.body));
+};
+MicButton.displayName = "MicButton";
+export {
+  CuekitProvider,
+  InitCuekit,
+  MicButton,
+  onStateChange,
+  processVoice,
+  useAudioController,
+  useVoiceRecognition
+};