@cuekit-ai/react 1.2.2 → 1.3.0

package/dist/index.mjs

@@ -1,5 +1,6 @@
 import {
   ConnectionState,
+  GlobalStore,
   Participant,
   ParticipantEvent,
   RoomEvent,
@@ -11,23 +12,29 @@ import {
   _apiKey,
   _appId,
   authenticate,
+  captureFullDOMStructure,
   connectToRoom,
   createAudioAnalyser,
   disconnectFromRoom,
   getParticipants,
   getRoom,
   getRoomName,
+  handleNavigationAndClick,
+  onStateChange,
+  safeNavigate,
   sendData,
+  sendRuntimeData,
   sendScreenStatus,
   sendStaticData,
   sendUserCommand,
   setApiKey,
   setAppId,
   setAudioContainer,
+  setNavigationHandler,
   setServerUrl,
   setWebRTCCallbacks,
   setWebRTCConfig
-} from "./chunk-UD3LZUJ2.mjs";
+} from "./chunk-6TG2XY2P.mjs";
 
 // node_modules/inline-style-parser/index.js
 var require_inline_style_parser = __commonJS({
@@ -377,205 +384,6 @@ function InitCuekit(config) {
   setWebRTCConfig(webRTCConfig);
 }
 
-// src/core/intent-store.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 index2 = store.allElementsData.findIndex((e2) => e2.elementId === elementData.elementId);
-    if (index2 >= 0) {
-      console.log("Updating existing element");
-      store.allElementsData[index2] = elementData;
-    } else {
-      console.log("Adding new element");
-      store.allElementsData.push(elementData);
-    }
-  },
-  getElementById(elementId) {
-    const match = store.allElementsData.find((e2) => e2.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((e2) => e2.elementId !== id);
-  },
-  clearAllElements() {
-    store.allElementsData = [];
-  }
-};
-
-// src/core/navigation.ts
-var navigation;
-var navigationHandler = null;
-function setNavigationHandler(handler) {
-  navigationHandler = handler;
-}
-function navigate(path2, params) {
-  const safeParams = params || {};
-  const absolutePath = path2.startsWith("/") ? path2 : `/${path2}`;
-  if (navigationHandler) {
-    try {
-      navigationHandler(absolutePath, safeParams);
-    } catch (error) {
-      console.error("[CueKit] navigation handler failed, falling back to default:", error);
-    }
-    return;
-  }
-  let fullPath = absolutePath;
-  if (safeParams) {
-    const searchParams = new URLSearchParams(safeParams).toString();
-    if (searchParams) {
-      fullPath += `?${searchParams}`;
-    }
-  }
-  if (navigation) {
-    navigation.push(fullPath);
-  } else {
-    if (typeof window !== "undefined") {
-      window.location.href = fullPath;
-    }
-  }
-}
-var getCurrentPath = () => {
-  if (typeof window === "undefined") return "";
-  return window.location.pathname;
-};
-var getSearchParams = () => {
-  if (typeof window === "undefined") return new URLSearchParams();
-  return new URLSearchParams(window.location.search);
-};
-var safeNavigate = (name2, params = {}) => {
-  if (name2) {
-    navigate(name2, params);
-  } else {
-    console.warn("[CueKit] route name not provided");
-  }
-};
-function getCurrentScreenName() {
-  try {
-    const path2 = getCurrentPath();
-    return path2 || "UnknownScreen";
-  } catch (e2) {
-    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 (e2) {
-    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);
-  if (typeof MutationObserver === "undefined" || typeof document === "undefined") return;
-  const observer = new MutationObserver((mutationsList, observer2) => {
-    setTimeout(() => {
-      const allElements = document.querySelectorAll("*");
-      let elementToClick = null;
-      for (const element3 of allElements) {
-        if (element3 instanceof HTMLElement) {
-          const tagName = element3.tagName.toLowerCase();
-          const text7 = (element3.textContent || "").trim().substring(0, 50);
-          let sibling = element3.previousElementSibling;
-          let position3 = 1;
-          while (sibling) {
-            if (sibling.tagName === element3.tagName) {
-              position3++;
-            }
-            sibling = sibling.previousElementSibling;
-          }
-          const path2 = getElementPath(element3);
-          const idString = `${tagName}[${position3}]_(${text7})_${path2}`;
-          let hash = 0;
-          for (let i2 = 0; i2 < idString.length; i2++) {
-            const char = idString.charCodeAt(i2);
-            hash = (hash << 5) - hash + char;
-            hash |= 0;
-          }
-          const elementHashValue = hash.toString(36);
-          if (elementHashValue === elementHash) {
-            elementToClick = element3;
-            break;
-          }
-        }
-      }
-      if (elementToClick) {
-        elementToClick.click();
-        observer2.disconnect();
-      }
-    }, 100);
-  });
-  observer.observe(document.body, { childList: true, subtree: true });
-};
-function getElementPath(element3) {
-  if (element3.id) {
-    return `id(${element3.id})`;
-  }
-  const path2 = [];
-  let current = element3;
-  while (current && current !== document.body) {
-    let index2 = 1;
-    let sibling = current.previousElementSibling;
-    while (sibling) {
-      if (sibling.tagName === current.tagName) {
-        index2++;
-      }
-      sibling = sibling.previousElementSibling;
-    }
-    path2.unshift(`${current.tagName.toLowerCase()}[${index2}]`);
-    current = current.parentElement;
-  }
-  return path2.join("/");
-}
-
 // src/utils/webrtc-config.ts
 var configureWebRTCServer = (config) => {
   if (!config.apiKey) {
@@ -654,7 +462,7 @@ var CuekitProvider = ({
   deviceId = "",
   appId,
   children,
-  navigationHandler: navigationHandler2,
+  navigationHandler,
   onConnectionStateChange,
   onParticipantUpdate
 }) => {
@@ -678,13 +486,13 @@ var CuekitProvider = ({
     }
   }, [apiKey]);
   useEffect(() => {
-    setNavigationHandler(navigationHandler2 ?? null);
+    setNavigationHandler(navigationHandler ?? null);
     return () => {
       setNavigationHandler(null);
     };
-  }, [navigationHandler2]);
+  }, [navigationHandler]);
   useEffect(() => {
-    import("./webrtc-service-UYILN4PB.mjs").then(({ setWebRTCCallbacks: setWebRTCCallbacks2 }) => {
+    import("./webrtc-service-O4JWXTIF.mjs").then(({ setWebRTCCallbacks: setWebRTCCallbacks2 }) => {
       setWebRTCCallbacks2({
         onNavigationCommand: (command) => {
           console.log("\u{1F9ED} Processing navigation command:", command);
@@ -696,8 +504,8 @@ var CuekitProvider = ({
               console.log("\u{1F3AF} AI Intent:", command.text, "->", command.actionType);
               if (command.actionType === "navigate" && command.current_page) {
                 console.log(`\u{1F9ED} Navigating to: ${command.current_page}`);
-                if (navigationHandler2) {
-                  navigationHandler2(command.current_page, {
+                if (navigationHandler) {
+                  navigationHandler(command.current_page, {
                     intent: command.intent,
                     text: command.text,
                     confidence: command.confidence
@@ -727,7 +535,7 @@ var CuekitProvider = ({
         }
       });
     });
-  }, [onConnectionStateChange, onParticipantUpdate, navigationHandler2]);
+  }, [onConnectionStateChange, onParticipantUpdate, navigationHandler]);
   useEffect(() => {
     const updateGlobalStore = (id) => {
       if (typeof window !== "undefined" && globalThis.CuekitStore) {
@@ -793,16 +601,15 @@ var CuekitProvider = ({
 };
 
 // src/components/mic-button.tsx
-import React5, { useState as useState10, useEffect as useEffect10, useCallback as useCallback5, useRef as useRef7 } from "react";
-import { Mic, Loader2 } from "lucide-react";
+import React11, { useState as useState10, useEffect as useEffect10, useCallback as useCallback5, useRef as useRef7 } from "react";
 
 // src/hooks/use-cuekit.ts
-import { useState as useState3, useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useState as useState3, useCallback as useCallback2, useRef as useRef2 } from "react";
 
 // src/hooks/use-webrtc.ts
 import { useState as useState2, useEffect as useEffect2, useCallback, useRef, useMemo } from "react";
 var useWebRTC = (options) => {
-  const [isConnected3, setIsConnected] = useState2(false);
+  const [isConnected2, setIsConnected] = useState2(false);
   const [isConnecting, setIsConnecting] = useState2(false);
   const [connectionState, setConnectionState] = useState2(null);
   const [participants, setParticipants] = useState2([]);
@@ -866,7 +673,7 @@ var useWebRTC = (options) => {
     return getParticipants().map((p) => p.identity);
   }, [participants]);
   return {
-    isConnected: isConnected3,
+    isConnected: isConnected2,
     isConnecting,
     connectionState,
     room,
@@ -883,330 +690,6 @@ var useWebRTC = (options) => {
   };
 };
 
-// src/utils/jsx-encoder.ts
-function generateStableDOMId(element3) {
-  const tagName = element3.tagName.toLowerCase();
-  const text7 = (element3.textContent || "").trim().substring(0, 50);
-  let sibling = element3.previousElementSibling;
-  let position3 = 1;
-  while (sibling) {
-    if (sibling.tagName === element3.tagName) {
-      position3++;
-    }
-    sibling = sibling.previousElementSibling;
-  }
-  const path2 = getElementPath2(element3);
-  const idString = `${tagName}[${position3}]_(${text7})_${path2}`;
-  let hash = 0;
-  for (let i2 = 0; i2 < idString.length; i2++) {
-    const char = idString.charCodeAt(i2);
-    hash = (hash << 5) - hash + char;
-    hash |= 0;
-  }
-  return hash.toString(36);
-}
-function getElementPath2(element3) {
-  if (element3.id) {
-    return `id(${element3.id})`;
-  }
-  if (element3.tagName.toLowerCase() === "body") {
-    return "/body";
-  }
-  let ix = 0;
-  const siblings = element3.parentNode?.children || new HTMLCollection();
-  for (let i2 = 0; i2 < siblings.length; i2++) {
-    const sibling = siblings[i2];
-    if (sibling === element3) {
-      return `${getElementPath2(element3.parentNode)}/${element3.tagName}[${ix + 1}]`;
-    }
-    if (sibling.nodeType === 1 && sibling.tagName === element3.tagName) {
-      ix++;
-    }
-  }
-  return "not_found";
-}
-
-// src/utils/patch-react.ts
-function getImmediateText(element3) {
-  let text7 = "";
-  if (element3.childNodes) {
-    for (const node2 of Array.from(element3.childNodes)) {
-      if (node2.nodeType === 3) {
-        text7 += node2.textContent || "";
-      }
-    }
-  }
-  return text7.trim();
-}
-function captureFullDOMStructure() {
-  console.log("\u{1F333} Capturing full DOM structure...");
-  const components = [];
-  const interactiveElements = document.querySelectorAll(
-    'a, button, input, textarea, select, [role="button"], [onclick]'
-  );
-  interactiveElements.forEach((element3) => {
-    if (element3 instanceof HTMLElement && !element3.closest("[data-cuekit-ignore]")) {
-      const nodeData = buildFlatDOMNode(element3);
-      if (nodeData) {
-        components.push(nodeData);
-      }
-    }
-  });
-  const result = { components };
-  console.log("\u{1F333} Full DOM structure captured:", result);
-  return result;
-}
-function buildFlatDOMNode(element3) {
-  if (element3.tagName.toLowerCase() === "script" || element3.hasAttribute("data-cuekit-ignore") || element3.style.display === "none" || element3.style.visibility === "hidden") {
-    return null;
-  }
-  const hash = generateStableDOMId(element3);
-  const text7 = getImmediateText(element3).substring(0, 100);
-  const isClickable = isElementClickable(element3);
-  const componentType = element3.tagName.toLowerCase();
-  return {
-    hash,
-    text: text7,
-    isClickable,
-    componentType,
-    children: []
-    // No children in a flat structure
-  };
-}
-function isElementClickable(element3) {
-  const interactiveSelectors = [
-    "button",
-    "a",
-    "input",
-    "select",
-    "textarea",
-    '[role="button"]',
-    '[role="link"]',
-    '[role="tab"]',
-    "[data-onclick-id]",
-    "[data-on-press-id]",
-    "[onclick]",
-    "[onmousedown]",
-    "[onmouseup]",
-    "[ontouchstart]",
-    "[ontouchend]",
-    "[onkeydown]",
-    "[onkeyup]",
-    "[onkeypress]"
-  ];
-  for (const selector of interactiveSelectors) {
-    if (element3.matches(selector)) {
-      return true;
-    }
-  }
-  const hasClickEvents = element3.onclick !== null || element3.getAttribute("onclick") !== null;
-  const hasInteractiveEvents = element3.ontouchstart !== null || element3.getAttribute("ontouchstart") !== null || element3.ontouchend !== null || element3.getAttribute("ontouchend") !== null || element3.onkeydown !== null || element3.getAttribute("onkeydown") !== null || element3.onkeyup !== null || element3.getAttribute("onkeyup") !== null || element3.onkeypress !== null || element3.getAttribute("onkeypress") !== null;
-  const hasPointerCursor = element3.style.cursor === "pointer" || getComputedStyle(element3).cursor === "pointer";
-  const hasTabIndex = element3.hasAttribute("tabindex") && parseInt(element3.getAttribute("tabindex") || "0") >= 0;
-  const hasInteractiveDataAttrs = element3.hasAttribute("data-clickable") || element3.hasAttribute("data-interactive") || element3.hasAttribute("data-action") || element3.hasAttribute("data-handler");
-  const hasInteractiveAria = element3.hasAttribute("aria-pressed") || element3.hasAttribute("aria-expanded") || element3.hasAttribute("aria-selected") || element3.hasAttribute("aria-checked");
-  return hasClickEvents || hasInteractiveEvents || hasPointerCursor || hasTabIndex || hasInteractiveDataAttrs || hasInteractiveAria;
-}
-
-// src/utils/sse-service.ts
-var eventSource = null;
-var isConnected2 = false;
-var serverUrl = WEBRTC_BACKEND_SERVER_URL || "https://bdd4c945f073.ngrok-free.app";
-var callbacks = {};
-var sessionId = null;
-function setSSECallbacks(newCallbacks) {
-  callbacks = newCallbacks;
-}
-async function connectSSE(newSessionId) {
-  if (eventSource) {
-    eventSource.close();
-  }
-  if (typeof EventSource === "undefined") {
-    console.warn("\u{1F527} EventSource not available, SSE functionality disabled");
-    callbacks.onError?.("EventSource not available");
-    return;
-  }
-  try {
-    const url = `${serverUrl}/navigation/stream?session_id=${newSessionId}`;
-    eventSource = new EventSource(url);
-    sessionId = newSessionId;
-    eventSource.onopen = () => {
-      console.log("\u{1F517} SSE connection opened");
-      isConnected2 = true;
-      callbacks.onConnectionChange?.(true);
-    };
-    eventSource.onmessage = (event) => {
-      console.log("\u{1F4E1} SSE MESSAGE RECEIVED:", event.data);
-      try {
-        const data = JSON.parse(event.data);
-        console.log("\u{1F4E1} SSE MESSAGE PARSED:", data);
-        handleSSEMessage(data);
-      } catch (error) {
-        console.error("\u274C Failed to parse SSE message:", error);
-      }
-    };
-    eventSource.onerror = (error) => {
-      console.error("\u274C SSE connection error:", error);
-      isConnected2 = false;
-      callbacks.onConnectionChange?.(false);
-      callbacks.onError?.("SSE connection failed");
-    };
-  } catch (error) {
-    console.error("\u274C Failed to create SSE connection:", error);
-    callbacks.onError?.("Failed to create SSE connection");
-  }
-}
-function handleSSEMessage(data) {
-  console.log("\u{1F50D} Processing SSE message type:", data.type);
-  console.log("\u{1F50D} Full SSE data:", data);
-  console.log("\u{1F50D} SSE data.data:", data.data);
-  const actionEvent = data;
-  console.log("\u{1F50D} Created action event:", actionEvent);
-  callbacks.onActionEvent?.(actionEvent);
-  switch (actionEvent.type) {
-    case "static_data_ready":
-      console.log("\u{1F4E6} Handling static_data_ready event");
-      callbacks.onStaticDataUpdate?.(actionEvent.data);
-      break;
-    case "ai_intent":
-      console.log("\u{1F3AF} Handling ai_intent event");
-      callbacks.onIntentUpdate?.(actionEvent.data);
-      break;
-    case "request_runtime_data":
-      console.log("\u{1F4E6} Handling request_runtime_data event");
-      sendRuntimeData();
-      break;
-    case "user_speech_chunk":
-      console.log("\u{1F464} Handling user_speech_chunk event");
-      const userSpeechEntry = {
-        speaker: "user",
-        text: actionEvent.data?.text_chunk,
-        is_final: actionEvent.data?.is_final
-      };
-      callbacks.onConversationUpdate?.(userSpeechEntry);
-      break;
-    case "ai_speech_chunk":
-      console.log("\u{1F916} Handling ai_speech_chunk event");
-      callbacks.onConversationUpdate?.({
-        speaker: "ai",
-        text: actionEvent.data?.text_chunk,
-        is_final: actionEvent.data?.is_final
-      });
-      break;
-    case "ai_interrupted":
-      console.log("\u{1F507} Handling ai_interrupted event");
-      break;
-    case "tool_log":
-      console.log("\u{1F527} Handling tool_log event");
-      callbacks.onToolStatusUpdate?.(actionEvent.data);
-      break;
-    case "connection":
-      console.log("\u{1F517} Handling connection event");
-      break;
-    case "keepalive":
-      console.log("\u{1F493} Handling keepalive event");
-      break;
-    default:
-      console.log("\u{1F50D} Unknown SSE message type:", data.type);
-  }
-}
-async function sendRuntimeData() {
-  if (!sessionId) {
-    console.error("\u274C Cannot send runtime data without a session ID");
-    return;
-  }
-  try {
-    const domStructure = captureFullDOMStructure();
-    const screenName = getCurrentScreenName();
-    const response = await fetch(`${serverUrl}/api/runtime/data/${sessionId}`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${_apiKey}`
-      },
-      body: JSON.stringify({
-        session_id: sessionId,
-        components: domStructure.components,
-        screen: screenName
-      })
-    });
-    if (!response.ok) {
-      const errorData = await response.json();
-      throw new Error(errorData.detail || "Failed to send runtime data");
-    }
-    console.log("\u{1F4E6} Runtime data sent successfully");
-  } catch (error) {
-    console.error("\u274C Failed to send runtime data:", error);
-    callbacks.onError?.("Failed to send runtime data");
-  }
-}
-async function sendDashboardData(dashboardData) {
-  try {
-    console.log("\u{1F4E4} SSEService: Sending dashboard data...");
-    const response = await fetch(`${serverUrl}/ai/data`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({
-        type: "dashboard_data",
-        data: dashboardData
-      })
-    });
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-    }
-    console.log("\u2705 SSEService: Dashboard data sent successfully");
-  } catch (error) {
-    console.error("\u274C SSEService: Failed to send dashboard data:", error);
-  }
-}
-async function sendElementData(appId = "default") {
-  try {
-    console.log("\u{1F4E4} SSEService: Sending element data...");
-    const domStructure = captureFullDOMStructure();
-    const currentPage = getCurrentScreenName();
-    const elementData = {
-      app_id: appId,
-      current_page: currentPage,
-      dom_structure: domStructure,
-      timestamp: Date.now()
-    };
-    const response = await fetch(`${serverUrl}/ai/data`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(elementData)
-    });
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-    }
-    console.log("\u2705 SSEService: Element data sent successfully");
-    return elementData;
-  } catch (error) {
-    console.error("\u274C SSEService: Failed to send element data:", error);
-    throw error;
-  }
-}
-function disconnectSSE() {
-  console.log("\u{1F50C} SSEService: Disconnecting SSE...");
-  if (eventSource) {
-    eventSource.close();
-    eventSource = null;
-  }
-  isConnected2 = false;
-  callbacks.onConnectionChange?.(false);
-}
-function getSSEConnectionStatus() {
-  return isConnected2 && eventSource?.readyState === EventSource.OPEN;
-}
-function getSSEConnectionState() {
-  if (isConnected2 && eventSource?.readyState === EventSource.OPEN) return "connected";
-  if (eventSource?.readyState === EventSource.CONNECTING) return "connecting";
-  return "disconnected";
-}
-
 // src/utils/element-service.ts
 function executeAction(action) {
   console.log("\u{1F3AF} Executing element action:", action);
@@ -1392,89 +875,83 @@ var useCuekit = (options) => {
   }, []);
   const [micState, setMicState] = useState3("idle");
   const [status, setStatus] = useState3("");
-  const [isSseConnected, setIsSseConnected] = useState3(false);
-  const [lastActionEvent, setLastActionEvent] = useState3(null);
-  useEffect3(() => {
-    setSSECallbacks({
-      onActionEvent: (event) => {
-        setLastActionEvent(event);
-        switch (event.type) {
-          case "user_speech_chunk":
-          case "ai_speech_chunk": {
-            const role = event.type === "user_speech_chunk" ? "user" : "ai";
-            if (role === "user" && currentAIMessageRef.current) {
-              const finalMessageId = currentAIMessageRef.current.id;
-              setMessages(
-                (prev) => prev.map((m) => m.id === finalMessageId ? { ...m, isFinal: true } : m)
-              );
-              currentAIMessageRef.current = null;
-            }
-            if (role === "ai" && currentUserMessageRef.current) {
-              const finalMessageId = currentUserMessageRef.current.id;
-              setMessages(
-                (prev) => prev.map((m) => m.id === finalMessageId ? { ...m, isFinal: true } : m)
-              );
-              currentUserMessageRef.current = null;
-            }
-            const entry = {
-              speaker: role,
-              text: event.data.text_chunk,
-              is_final: event.data.is_final,
-              timestamp: new Date(event.timestamp || Date.now()).toISOString()
-            };
-            handleMessageChunk(entry.text, entry.speaker, entry.is_final);
-            if (entry.is_final) {
-              if (entry.speaker === "user") {
-                setMicState("thinking");
-              } else if (entry.speaker === "ai") {
-                setTimeout(() => setMicState("listening"), 1e3);
-              }
-            }
-            break;
-          }
-          case "ai_intent": {
-            const intent = event.data;
-            if (intent.actionType === "click" && intent.actionMetadata.elementId) {
-              executeAction({
-                action_type: "click",
-                target_element: intent.actionMetadata.elementId
-              });
-            } else if (intent.actionType === "navigate" && intent.actionMetadata.routeName) {
-              executeAction({
-                action_type: "navigate",
-                target_element: intent.actionMetadata.routeName
-              });
-            }
-            break;
-          }
-          case "ai_interrupted": {
-            handleAIInterruption();
-            break;
-          }
-          case "keepalive": {
-            if (currentUserMessageRef.current) {
-              const finalMessageId = currentUserMessageRef.current.id;
-              setMessages(
-                (prev) => prev.map((m) => m.id === finalMessageId ? { ...m, isFinal: true } : m)
-              );
-              currentUserMessageRef.current = null;
-            }
-            if (currentAIMessageRef.current) {
-              const finalMessageId = currentAIMessageRef.current.id;
-              setMessages(
-                (prev) => prev.map((m) => m.id === finalMessageId ? { ...m, isFinal: true } : m)
-              );
-              currentAIMessageRef.current = null;
-            }
-            break;
+  const handleNavigationCommand = (event) => {
+    switch (event.type) {
+      case "user_speech_chunk":
+      case "ai_speech_chunk": {
+        const role = event.type === "user_speech_chunk" ? "user" : "ai";
+        if (role === "user" && currentAIMessageRef.current) {
+          const finalMessageId = currentAIMessageRef.current.id;
+          setMessages(
+            (prev) => prev.map((m) => m.id === finalMessageId ? { ...m, isFinal: true } : m)
+          );
+          currentAIMessageRef.current = null;
+        }
+        if (role === "ai" && currentUserMessageRef.current) {
+          const finalMessageId = currentUserMessageRef.current.id;
+          setMessages(
+            (prev) => prev.map((m) => m.id === finalMessageId ? { ...m, isFinal: true } : m)
+          );
+          currentUserMessageRef.current = null;
+        }
+        const entry = {
+          speaker: role,
+          text: event.data.text_chunk,
+          is_final: event.data.is_final,
+          timestamp: new Date(event.timestamp || Date.now()).toISOString()
+        };
+        handleMessageChunk(entry.text, entry.speaker, entry.is_final);
+        if (entry.is_final) {
+          if (entry.speaker === "user") {
+            setMicState("thinking");
+          } else if (entry.speaker === "ai") {
+            setTimeout(() => setMicState("listening"), 1e3);
           }
         }
-      },
-      onConnectionChange: (isConnected3) => {
-        setIsSseConnected(isConnected3);
+        break;
       }
-    });
-  }, [handleMessageChunk, handleAIInterruption]);
+      case "ai_intent": {
+        const intent = event.data;
+        if (intent.actionType === "click" && intent.actionMetadata.elementId) {
+          executeAction({
+            action_type: "click",
+            target_element: intent.actionMetadata.elementId
+          });
+        } else if (intent.actionType === "navigate" && intent.actionMetadata.routeName) {
+          executeAction({
+            action_type: "navigate",
+            target_element: intent.actionMetadata.routeName
+          });
+        }
+        break;
+      }
+      case "request_runtime_data": {
+        sendRuntimeData();
+        break;
+      }
+      case "ai_interrupted": {
+        handleAIInterruption();
+        break;
+      }
+      case "keepalive": {
+        if (currentUserMessageRef.current) {
+          const finalMessageId = currentUserMessageRef.current.id;
+          setMessages(
+            (prev) => prev.map((m) => m.id === finalMessageId ? { ...m, isFinal: true } : m)
+          );
+          currentUserMessageRef.current = null;
+        }
+        if (currentAIMessageRef.current) {
+          const finalMessageId = currentAIMessageRef.current.id;
+          setMessages(
+            (prev) => prev.map((m) => m.id === finalMessageId ? { ...m, isFinal: true } : m)
+          );
+          currentAIMessageRef.current = null;
+        }
+        break;
+      }
+    }
+  };
   const handleConnectionStateChange = (state) => {
     switch (state) {
       case "connecting":
@@ -1498,32 +975,22 @@ var useCuekit = (options) => {
   };
   const webrtc = useWebRTC({
     ...options,
-    onConnectionStateChange: handleConnectionStateChange
+    onConnectionStateChange: handleConnectionStateChange,
+    onNavigationCommand: handleNavigationCommand
   });
   const connect = useCallback2(
     async (identity, apiKey, appId) => {
-      const authData = await webrtc.connect(identity, apiKey, appId);
-      if (authData?.session_id) {
-        connectSSE(authData.session_id);
-      }
+      await webrtc.connect(identity, apiKey, appId);
     },
     [webrtc]
   );
   const disconnect = useCallback2(async () => {
     await webrtc.disconnect();
-    disconnectSSE();
     clearMessages();
     setMicState("idle");
   }, [webrtc, clearMessages]);
-  useEffect3(() => {
-    if (lastActionEvent?.type === "ai_interrupted") {
-      handleAIInterruption();
-    }
-  }, [lastActionEvent, handleAIInterruption]);
   return {
     ...webrtc,
-    isSseConnected,
-    lastActionEvent,
     messages,
     micState,
     setMicState,
@@ -1535,8 +1002,7 @@ var useCuekit = (options) => {
 };
 
 // src/components/chat-popup.tsx
-import React2, { useState as useState5, useEffect as useEffect5, useRef as useRef3 } from "react";
-import { X, Sun, Moon, PhoneOff } from "lucide-react";
+import React6, { useState as useState5, useEffect as useEffect5, useRef as useRef3 } from "react";
 
 // node_modules/devlop/lib/default.js
 function ok() {
@@ -7265,7 +6731,7 @@ function createTokenizer(parser, initialize, from) {
       function handleConstruct(construct) {
         return start2;
         function start2(code4) {
-          info = store2();
+          info = store();
           currentConstruct = construct;
           if (!construct.partial) {
             context.currentConstruct = construct;
@@ -7310,7 +6776,7 @@ function createTokenizer(parser, initialize, from) {
       context.events = construct.resolveTo(context.events, context);
     }
   }
-  function store2() {
+  function store() {
     const startPoint = now();
     const startPrevious = context.previous;
     const startCurrentConstruct = context.currentConstruct;
@@ -14177,6 +13643,109 @@ function remarkGfm(options) {
   toMarkdownExtensions.push(gfmToMarkdown(settings));
 }
 
+// src/components/svgs/sun.tsx
+import React2 from "react";
+var SunIcon = ({ width = 24, height = 24, className, ...props }) => {
+  return /* @__PURE__ */ React2.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React2.createElement("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ React2.createElement("path", { d: "M12 2v2" }),
+    /* @__PURE__ */ React2.createElement("path", { d: "M12 20v2" }),
+    /* @__PURE__ */ React2.createElement("path", { d: "m4.93 4.93 1.41 1.41" }),
+    /* @__PURE__ */ React2.createElement("path", { d: "m17.66 17.66 1.41 1.41" }),
+    /* @__PURE__ */ React2.createElement("path", { d: "M2 12h2" }),
+    /* @__PURE__ */ React2.createElement("path", { d: "M20 12h2" }),
+    /* @__PURE__ */ React2.createElement("path", { d: "m6.34 17.66-1.41 1.41" }),
+    /* @__PURE__ */ React2.createElement("path", { d: "m19.07 4.93-1.41 1.41" })
+  );
+};
+var sun_default = SunIcon;
+
+// src/components/svgs/moon.tsx
+import React3 from "react";
+var MoonIcon = ({ width = 24, height = 24, className, ...props }) => {
+  return /* @__PURE__ */ React3.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React3.createElement("path", { d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" })
+  );
+};
+var moon_default = MoonIcon;
+
+// src/components/svgs/close.tsx
+import React4 from "react";
+var CloseIcon = ({ width = 24, height = 24, className, ...props }) => {
+  return /* @__PURE__ */ React4.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React4.createElement("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ React4.createElement("path", { d: "m6 6 12 12" })
+  );
+};
+var close_default = CloseIcon;
+
+// src/components/svgs/phone-off.tsx
+import React5 from "react";
+var PhoneOffIcon = ({ width = 24, height = 24, className, ...props }) => {
+  return /* @__PURE__ */ React5.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React5.createElement("path", { d: "M10.1 13.9a14 14 0 0 0 3.732 2.668 1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2 18 18 0 0 1-12.728-5.272" }),
+    /* @__PURE__ */ React5.createElement("path", { d: "M22 2 2 22" }),
+    /* @__PURE__ */ React5.createElement("path", { d: "M4.76 13.582A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 .244.473" })
+  );
+};
+var phone_off_default = PhoneOffIcon;
+
 // src/components/chat-popup.tsx
 var ChatPopup = ({
   isOpen,
@@ -14187,7 +13756,7 @@ var ChatPopup = ({
   onSendText,
   onEndCall,
   messages,
-  isConnected: isConnected3,
+  isConnected: isConnected2,
   micState,
   error,
   currentTheme = "dark",
@@ -14263,7 +13832,7 @@ var ChatPopup = ({
     }
   };
   const positionStyle = getPositionStyle();
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React6.createElement(
     "div",
     {
       "data-cuekit-ignore": true,
@@ -14286,7 +13855,7 @@ var ChatPopup = ({
         ...positionStyle
       }
     },
-    /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React6.createElement(
       "div",
       {
         style: {
@@ -14297,14 +13866,14 @@ var ChatPopup = ({
           justifyContent: "space-between"
         }
       },
-      /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", alignItems: "center", gap: 0 } }, /* @__PURE__ */ React2.createElement(
+      /* @__PURE__ */ React6.createElement("div", { style: { display: "flex", alignItems: "center", gap: 0 } }, /* @__PURE__ */ React6.createElement(
         "img",
         {
           src: "https://dashboard.cuekit.ai/_next/image?url=%2Fimages%2Fcuekit-logo-2.png&w=256&q=100",
           alt: "Cuekit AI",
           style: { width: 58, objectFit: "cover" }
         }
-      ), /* @__PURE__ */ React2.createElement(
+      ), /* @__PURE__ */ React6.createElement(
         "div",
         {
           style: {
@@ -14315,7 +13884,7 @@ var ChatPopup = ({
             justifyContent: "center"
           }
         },
-        /* @__PURE__ */ React2.createElement(
+        /* @__PURE__ */ React6.createElement(
           "span",
           {
             style: {
@@ -14332,7 +13901,7 @@ var ChatPopup = ({
           },
           "Cuekit.ai"
         ),
-        /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 4 } }, /* @__PURE__ */ React2.createElement(
+        /* @__PURE__ */ React6.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 4 } }, /* @__PURE__ */ React6.createElement(
           "div",
           {
             style: {
@@ -14348,7 +13917,7 @@ var ChatPopup = ({
               fontWeight: "500"
             }
           },
-          /* @__PURE__ */ React2.createElement(
+          /* @__PURE__ */ React6.createElement(
             "span",
             {
               style: {
@@ -14359,8 +13928,8 @@ var ChatPopup = ({
           )
         ))
       )),
-      /* @__PURE__ */ React2.createElement("div", { style: { minWidth: 100, textAlign: "center" } }),
-      /* @__PURE__ */ React2.createElement(
+      /* @__PURE__ */ React6.createElement("div", { style: { minWidth: 100, textAlign: "center" } }),
+      /* @__PURE__ */ React6.createElement(
         "div",
         {
           style: {
@@ -14372,7 +13941,7 @@ var ChatPopup = ({
             top: 16
           }
         },
-        onThemeToggle && /* @__PURE__ */ React2.createElement(
+        onThemeToggle && /* @__PURE__ */ React6.createElement(
           "button",
           {
             onClick: () => {
@@ -14402,8 +13971,8 @@ var ChatPopup = ({
             "aria-label": "Toggle theme",
             title: `Switch to ${currentTheme === "dark" ? "light" : "dark"} mode`
           },
-          currentTheme === "dark" ? /* @__PURE__ */ React2.createElement(
-            Sun,
+          currentTheme === "dark" ? /* @__PURE__ */ React6.createElement(
+            sun_default,
             {
               style: {
                 width: 16,
@@ -14412,8 +13981,8 @@ var ChatPopup = ({
                 animation: "themeToggleEnter 0.3s ease-in-out"
               }
             }
-          ) : /* @__PURE__ */ React2.createElement(
-            Moon,
+          ) : /* @__PURE__ */ React6.createElement(
+            moon_default,
             {
               style: {
                 width: 16,
@@ -14424,7 +13993,7 @@ var ChatPopup = ({
             }
           )
         ),
-        /* @__PURE__ */ React2.createElement(
+        /* @__PURE__ */ React6.createElement(
           "button",
           {
             onClick: onMinimize,
@@ -14451,11 +14020,11 @@ var ChatPopup = ({
             "aria-label": "Minimize",
             title: "Minimize chat"
           },
-          /* @__PURE__ */ React2.createElement(X, { style: { width: 16, height: 16, color: "hsl(var(--voice-text-muted))" } })
+          /* @__PURE__ */ React6.createElement(close_default, { style: { width: 16, height: 16, color: "hsl(var(--voice-text-muted))" } })
         )
       )
     ),
-    /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React6.createElement(
       "div",
       {
         style: {
@@ -14468,7 +14037,7 @@ var ChatPopup = ({
           color: "hsl(var(--voice-text))"
         }
       },
-      messages.length === 0 ? /* @__PURE__ */ React2.createElement(
+      messages.length === 0 ? /* @__PURE__ */ React6.createElement(
         "div",
         {
           style: {
@@ -14478,7 +14047,7 @@ var ChatPopup = ({
           }
         },
         "Start a conversation with CueKit AI"
-      ) : messages.map((message, index2) => /* @__PURE__ */ React2.createElement(
+      ) : messages.map((message, index2) => /* @__PURE__ */ React6.createElement(
         "div",
         {
           key: index2,
@@ -14492,7 +14061,7 @@ var ChatPopup = ({
             justifyContent: message.sender === "user" ? "flex-end" : "flex-start"
           }
         },
-        message.sender === "assistant" && /* @__PURE__ */ React2.createElement(
+        message.sender === "assistant" && /* @__PURE__ */ React6.createElement(
           "div",
           {
             style: {
@@ -14507,7 +14076,7 @@ var ChatPopup = ({
               overflow: "hidden"
             }
           },
-          /* @__PURE__ */ React2.createElement(
+          /* @__PURE__ */ React6.createElement(
             "img",
             {
               src: "https://dashboard.cuekit.ai/_next/image?url=%2Fimages%2Fcuekit-logo-2.png&w=256&q=100",
@@ -14521,7 +14090,7 @@ var ChatPopup = ({
             }
           )
         ),
-        /* @__PURE__ */ React2.createElement(
+        /* @__PURE__ */ React6.createElement(
           "div",
           {
             style: {
@@ -14532,7 +14101,7 @@ var ChatPopup = ({
               flex: 1
             }
           },
-          /* @__PURE__ */ React2.createElement(
+          /* @__PURE__ */ React6.createElement(
             "div",
             {
               style: {
@@ -14550,12 +14119,12 @@ var ChatPopup = ({
                 marginLeft: message.sender === "user" ? "auto" : 0
               }
             },
-            /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(
+            /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement(
               Markdown,
               {
                 remarkPlugins: [remarkGfm],
                 components: {
-                  p: ({ children }) => /* @__PURE__ */ React2.createElement(
+                  p: ({ children }) => /* @__PURE__ */ React6.createElement(
                     "p",
                     {
                       style: {
@@ -14566,7 +14135,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  h1: ({ children }) => /* @__PURE__ */ React2.createElement(
+                  h1: ({ children }) => /* @__PURE__ */ React6.createElement(
                     "h1",
                     {
                       style: {
@@ -14578,7 +14147,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  h2: ({ children }) => /* @__PURE__ */ React2.createElement(
+                  h2: ({ children }) => /* @__PURE__ */ React6.createElement(
                     "h2",
                     {
                       style: {
@@ -14590,7 +14159,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  h3: ({ children }) => /* @__PURE__ */ React2.createElement(
+                  h3: ({ children }) => /* @__PURE__ */ React6.createElement(
                     "h3",
                     {
                       style: {
@@ -14602,7 +14171,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  ul: ({ children }) => /* @__PURE__ */ React2.createElement(
+                  ul: ({ children }) => /* @__PURE__ */ React6.createElement(
                     "ul",
                     {
                       style: {
@@ -14614,7 +14183,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  ol: ({ children }) => /* @__PURE__ */ React2.createElement(
+                  ol: ({ children }) => /* @__PURE__ */ React6.createElement(
                     "ol",
                     {
                       style: {
@@ -14626,7 +14195,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  li: ({ children }) => /* @__PURE__ */ React2.createElement(
+                  li: ({ children }) => /* @__PURE__ */ React6.createElement(
                     "li",
                     {
                       style: {
@@ -14637,7 +14206,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  strong: ({ children }) => /* @__PURE__ */ React2.createElement(
+                  strong: ({ children }) => /* @__PURE__ */ React6.createElement(
                     "strong",
                     {
                       style: {
@@ -14648,7 +14217,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  em: ({ children }) => /* @__PURE__ */ React2.createElement(
+                  em: ({ children }) => /* @__PURE__ */ React6.createElement(
                     "em",
                     {
                       style: {
@@ -14659,7 +14228,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  code: ({ children }) => /* @__PURE__ */ React2.createElement(
+                  code: ({ children }) => /* @__PURE__ */ React6.createElement(
                     "code",
                     {
                       style: {
@@ -14672,7 +14241,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  pre: ({ children }) => /* @__PURE__ */ React2.createElement(
+                  pre: ({ children }) => /* @__PURE__ */ React6.createElement(
                     "pre",
                     {
                       style: {
@@ -14687,7 +14256,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  blockquote: ({ children }) => /* @__PURE__ */ React2.createElement(
+                  blockquote: ({ children }) => /* @__PURE__ */ React6.createElement(
                     "blockquote",
                     {
                       style: {
@@ -14706,7 +14275,7 @@ var ChatPopup = ({
               message.text
             ))
           ),
-          message.sender === "user" && /* @__PURE__ */ React2.createElement(
+          message.sender === "user" && /* @__PURE__ */ React6.createElement(
             "div",
             {
               style: {
@@ -14727,9 +14296,9 @@ var ChatPopup = ({
           )
         )
       )),
-      /* @__PURE__ */ React2.createElement("div", { ref: messagesEndRef })
+      /* @__PURE__ */ React6.createElement("div", { ref: messagesEndRef })
     ),
-    /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React6.createElement(
       "div",
       {
         style: {
@@ -14738,7 +14307,7 @@ var ChatPopup = ({
           background: "hsl(var(--voice-bg))"
         }
       },
-      /* @__PURE__ */ React2.createElement(
+      /* @__PURE__ */ React6.createElement(
         "form",
         {
           onSubmit: (e2) => {
@@ -14747,7 +14316,7 @@ var ChatPopup = ({
           },
           style: { display: "flex", alignItems: "center", gap: 8, margin: 0 }
         },
-        /* @__PURE__ */ React2.createElement(
+        /* @__PURE__ */ React6.createElement(
           "input",
           {
             type: "text",
@@ -14774,7 +14343,7 @@ var ChatPopup = ({
             }
           }
         ),
-        isConnected3 && onEndCall && /* @__PURE__ */ React2.createElement(
+        isConnected2 && onEndCall && /* @__PURE__ */ React6.createElement(
           "button",
           {
             type: "submit",
@@ -14793,7 +14362,7 @@ var ChatPopup = ({
               cursor: "pointer"
             }
           },
-          /* @__PURE__ */ React2.createElement(PhoneOff, { size: 16 })
+          /* @__PURE__ */ React6.createElement(phone_off_default, { style: { width: 16, height: 16 } })
         )
       )
     )
@@ -14801,7 +14370,7 @@ var ChatPopup = ({
 };
 
 // src/components/border-glow.tsx
-import React3 from "react";
+import React7 from "react";
 var BorderGlow = ({ isActive }) => {
   if (!isActive) return null;
   const styles = {
@@ -14928,7 +14497,7 @@ var BorderGlow = ({ isActive }) => {
       opacity: 0.6
     }
   };
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("style", null, `
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("style", null, `
           @keyframes borderPulse {
             0%, 100% {
               opacity: 1;
@@ -14937,12 +14506,12 @@ var BorderGlow = ({ isActive }) => {
               opacity: 0.5;
             }
           }
-        `), /* @__PURE__ */ React3.createElement("div", { style: styles.container }, /* @__PURE__ */ React3.createElement("div", { style: styles.rightBorder1 }), /* @__PURE__ */ React3.createElement("div", { style: styles.rightBorder2 }), /* @__PURE__ */ React3.createElement("div", { style: styles.rightBorder3 }), /* @__PURE__ */ React3.createElement("div", { style: styles.leftBorder1 }), /* @__PURE__ */ React3.createElement("div", { style: styles.leftBorder2 }), /* @__PURE__ */ React3.createElement("div", { style: styles.leftBorder3 }), /* @__PURE__ */ React3.createElement("div", { style: styles.cornerTopLeft }), /* @__PURE__ */ React3.createElement("div", { style: styles.cornerTopRight }), /* @__PURE__ */ React3.createElement("div", { style: styles.cornerBottomRight }), /* @__PURE__ */ React3.createElement("div", { style: styles.cornerBottomLeft })));
+        `), /* @__PURE__ */ React7.createElement("div", { style: styles.container }, /* @__PURE__ */ React7.createElement("div", { style: styles.rightBorder1 }), /* @__PURE__ */ React7.createElement("div", { style: styles.rightBorder2 }), /* @__PURE__ */ React7.createElement("div", { style: styles.rightBorder3 }), /* @__PURE__ */ React7.createElement("div", { style: styles.leftBorder1 }), /* @__PURE__ */ React7.createElement("div", { style: styles.leftBorder2 }), /* @__PURE__ */ React7.createElement("div", { style: styles.leftBorder3 }), /* @__PURE__ */ React7.createElement("div", { style: styles.cornerTopLeft }), /* @__PURE__ */ React7.createElement("div", { style: styles.cornerTopRight }), /* @__PURE__ */ React7.createElement("div", { style: styles.cornerBottomRight }), /* @__PURE__ */ React7.createElement("div", { style: styles.cornerBottomLeft })));
 };
 var border_glow_default = BorderGlow;
 
 // src/components/voice-intensity-visualizer.tsx
-import React4, { useEffect as useEffect9, useState as useState9 } from "react";
+import React8, { useEffect as useEffect9, useState as useState9 } from "react";
 
 // node_modules/@livekit/components-react/dist/hooks-C2Bp5v2q.mjs
 import * as r from "react";
@@ -16772,7 +16341,7 @@ var VoiceIntensityWithRoom = (props) => {
   if (!room) {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement(Wn.Provider, { value: room }, /* @__PURE__ */ React4.createElement(VoiceIntensityBars, { ...props }));
+  return /* @__PURE__ */ React8.createElement(Wn.Provider, { value: room }, /* @__PURE__ */ React8.createElement(VoiceIntensityBars, { ...props }));
 };
 var VoiceIntensityBars = ({
   isActive,
@@ -16835,7 +16404,7 @@ var VoiceIntensityBars = ({
   if (!trackRef) {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React8.createElement(
     "div",
     {
       className: `voice-intensity-visualizer ${className}`,
@@ -16852,28 +16421,81 @@ var VoiceIntensityBars = ({
         pointerEvents: "none"
       }
     },
-    /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React8.createElement(
       Xt,
       {
         barCount,
         state: "speaking",
         options: { minHeight },
         trackRef,
-        className: "flex items-center justify-center gap-1"
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "0.25rem"
+        }
       },
-      /* @__PURE__ */ React4.createElement("span", { className: "bg-muted min-h-4 w-4 rounded-full origin-center transition-colors duration-250 ease-linear data-[lk-highlighted=true]:bg-foreground data-[lk-muted=true]:bg-muted" })
+      /* @__PURE__ */ React8.createElement("span", { className: "cuekit-voice-intensity-bar" })
     )
   );
 };
 var VoiceIntensityVisualizer = VoiceIntensityWithRoom;
 
+// src/components/svgs/mic.tsx
+import React9 from "react";
+var MicIcon = ({ width = 24, height = 24, className, ...props }) => {
+  return /* @__PURE__ */ React9.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width,
+      height,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React9.createElement("path", { d: "M12 19v3" }),
+    /* @__PURE__ */ React9.createElement("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+    /* @__PURE__ */ React9.createElement("rect", { x: "9", y: "2", width: "6", height: "13", rx: "3" })
+  );
+};
+var mic_default = MicIcon;
+
+// src/components/svgs/loader.tsx
+import React10 from "react";
+var LoaderIcon = ({ width = 24, height = 24, className, ...props }) => {
+  return /* @__PURE__ */ React10.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React10.createElement("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+  );
+};
+var loader_default = LoaderIcon;
+
 // src/components/mic-button.tsx
 var chatState = {
   isOpen: false,
   isMinimized: false
 };
 var VoiceIntensityWrapper = ({ active, buttonSize }) => {
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React11.createElement(
     VoiceIntensityVisualizer,
     {
       isActive: active,
@@ -16911,13 +16533,12 @@ var MicButton = ({
   const aiSpeechTimeoutRef = useRef7(null);
   const activeAITracksRef = useRef7(/* @__PURE__ */ new Set());
   const {
-    isConnected: isConnected3,
+    isConnected: isConnected2,
     isConnecting,
     error: voiceError,
     connect: voiceConnect,
     disconnect: voiceDisconnect,
     sendUserCommand: sendUserCommand2,
-    lastActionEvent,
     messages: messageManagerMessages,
     micState,
     setMicState,
@@ -16997,8 +16618,8 @@ var MicButton = ({
       console.log("\u{1F3A4} MicButton: Current active AI tracks:", Array.from(activeAITracksRef.current));
       console.log("\u{1F3A4} MicButton: Current status:", status);
       console.log("\u{1F3A4} MicButton: Current mic state:", micState);
-      console.log("\u{1F3A4} MicButton: Is listening:", isConnected3);
-      console.log("\u{1F3A4} MicButton: Is connected:", isConnected3);
+      console.log("\u{1F3A4} MicButton: Is listening:", isConnected2);
+      console.log("\u{1F3A4} MicButton: Is connected:", isConnected2);
       if (isSpeaking && trackId) {
         console.log("\u{1F3A4} MicButton: ===== AI SPEECH START =====");
         console.log("\u{1F3A4} MicButton: Adding track to active set:", trackId);
@@ -17053,7 +16674,7 @@ var MicButton = ({
       console.log("\u{1F3A4} MicButton: - Status:", status);
       console.log("\u{1F3A4} MicButton: ================================");
     },
-    [status, micState, isConnected3]
+    [status, micState, isConnected2]
   );
   useEffect10(() => {
     if (audioContainerRef.current) {
@@ -17066,10 +16687,9 @@ var MicButton = ({
       }
     };
   }, [handleAISpeech]);
-  const isListening = isConnected3;
-  const transcript = (lastActionEvent?.type === "user_speech_chunk" || lastActionEvent?.type === "ai_speech_chunk") && lastActionEvent?.data?.text_chunk ? lastActionEvent.data.text_chunk : "";
-  const getUserFriendlyStatus = (micState2, isConnected4) => {
-    if (!isConnected4) {
+  const isListening = isConnected2;
+  const getUserFriendlyStatus = (micState2, isConnected3) => {
+    if (!isConnected3) {
       return "Connecting...";
     }
     if (status && !status.includes("error") && !status.includes("failed") && !status.includes("Connection error") && !status.includes("Unable to")) {
@@ -17079,28 +16699,28 @@ var MicButton = ({
     if (micState2 === "thinking") return "Thinking...";
     if (micState2 === "replying") return "Responding...";
     if (micState2 === "idle") {
-      if (isConnected4) return "Listening...";
+      if (isConnected3) return "Listening...";
       return "Connecting...";
     }
-    return isConnected4 ? "Ready" : "Connecting...";
+    return isConnected3 ? "Ready" : "Connecting...";
   };
   useEffect10(() => {
-    if (isConnected3) {
+    if (isConnected2) {
       console.log("\u{1F3A4} MicButton: WebRTC and SSE connections established - ready for commands");
     } else {
       console.log("\u{1F3A4} MicButton: WebRTC not yet connected - ignoring speech");
     }
-  }, [isConnected3]);
+  }, [isConnected2]);
   useEffect10(() => {
     console.log("\u{1F3A4} MicButton: Auto-open check:", {
-      isConnected: isConnected3,
+      isConnected: isConnected2,
       chatIsOpen: isChatOpen
     });
-    if (isConnected3 && !isChatOpen) {
+    if (isConnected2 && !isChatOpen) {
       console.log("\u{1F3A4} MicButton: Auto-opening chat popup");
       openChat();
     }
-  }, [isConnected3, isChatOpen, openChat]);
+  }, [isConnected2, isChatOpen, openChat]);
   useEffect10(() => {
     if (messageManagerMessages.length > 0 && !isChatOpen) {
       console.log("\u{1F3A4} MicButton: Auto-opening chat popup due to messages");
@@ -17108,7 +16728,7 @@ var MicButton = ({
     }
   }, [messageManagerMessages.length, isChatOpen, openChat]);
   const handleMicClick = useCallback5(() => {
-    const shouldStop = micState === "listening" && isConnected3;
+    const shouldStop = micState === "listening" && isConnected2;
     if (shouldStop) {
       console.log("\u{1F3A4} MicButton: User wants to stop - closing everything");
       voiceDisconnect().then(() => {
@@ -17133,7 +16753,7 @@ var MicButton = ({
     }
   }, [
     micState,
-    isConnected3,
+    isConnected2,
     voiceDisconnect,
     voiceConnect,
     apiKey,
@@ -17141,19 +16761,6 @@ var MicButton = ({
     openChat,
     showBorderGlow
   ]);
-  useEffect10(() => {
-    if (!isConnected3) {
-      return;
-    }
-    if (transcript && transcript.trim() && !aiSpeakingRef.current) {
-      console.log("\u{1F3A4} MicButton: Processing new transcript:", transcript);
-      sendUserCommand2(transcript).then(() => {
-        console.log("\u{1F3A4} MicButton: User command sent successfully");
-      }).catch((error) => {
-        console.error("\u{1F3A4} MicButton: Failed to send user command:", error);
-      });
-    }
-  }, [transcript, isConnected3, sendUserCommand2]);
   const handleSendText = async (textToSend) => {
     console.log("\u{1F3A4} MicButton: handleSendText called with:", textToSend);
     setMicState("thinking");
@@ -17161,7 +16768,7 @@ var MicButton = ({
     if (!isChatOpen) {
       openChat();
     }
-    if (isConnected3) {
+    if (isConnected2) {
       console.log("\u{1F3A4} MicButton: Sending via WebRTC");
       try {
         await sendUserCommand2(textToSend);
@@ -17204,7 +16811,7 @@ var MicButton = ({
         ...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__ */ React5.createElement("img", { src: imageSource, alt: "Voice Assistant", style: animatedImageStyle });
+      return /* @__PURE__ */ React11.createElement("img", { src: imageSource, alt: "Voice Assistant", style: animatedImageStyle });
     }
     const iconStyle = {
       width: `100%`,
@@ -17214,13 +16821,13 @@ var MicButton = ({
     };
     switch (micState) {
       case "thinking":
-        return /* @__PURE__ */ React5.createElement(Loader2, { style: { ...iconStyle, animation: "spin 1s linear infinite" } });
+        return /* @__PURE__ */ React11.createElement(loader_default, { style: { ...iconStyle, animation: "spin 1s linear infinite" } });
       case "replying":
-        return /* @__PURE__ */ React5.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
+        return /* @__PURE__ */ React11.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
       case "listening":
-        return /* @__PURE__ */ React5.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
+        return /* @__PURE__ */ React11.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
       default:
-        return /* @__PURE__ */ React5.createElement(Mic, { style: iconStyle });
+        return /* @__PURE__ */ React11.createElement(mic_default, { style: iconStyle });
     }
   };
   const getPositionStyle = () => {
@@ -17300,7 +16907,7 @@ var MicButton = ({
     }
     return baseStyle;
   };
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { "data-cuekit-ignore": true, style: { ...buttonStyles.container, ...getPositionStyle() } }, /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("div", { "data-cuekit-ignore": true, style: { ...buttonStyles.container, ...getPositionStyle() } }, /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React11.createElement(
     "button",
     {
       "data-testid": "ignore",
@@ -17321,8 +16928,8 @@ var MicButton = ({
       },
       "aria-label": micState === "thinking" ? "Processing..." : micState === "replying" ? "AI is responding..." : isListening ? "Stop listening" : "Start listening"
     },
-    /* @__PURE__ */ React5.createElement("div", { style: buttonStyles.iconContainer }, getIcon())
-  ), hasText && text7 && /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React11.createElement("div", { style: buttonStyles.iconContainer }, getIcon())
+  ), hasText && text7 && /* @__PURE__ */ React11.createElement(
     "div",
     {
       style: {
@@ -17343,8 +16950,8 @@ var MicButton = ({
         ...textStyle
       }
     },
-    /* @__PURE__ */ React5.createElement("span", null, text7)
-  ))), /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React11.createElement("span", null, text7)
+  ))), /* @__PURE__ */ React11.createElement(
     ChatPopup,
     {
       isOpen: isChatOpen,
@@ -17358,16 +16965,16 @@ var MicButton = ({
         text: msg.text,
         sender: msg.role === "ai" ? "assistant" : "user"
       })),
-      isConnected: isConnected3 ?? false,
+      isConnected: isConnected2 ?? false,
       micState,
       participants,
       error: voiceError,
       currentTheme,
       onThemeToggle: setCurrentTheme,
-      status: getUserFriendlyStatus(micState, isConnected3 ?? false),
+      status: getUserFriendlyStatus(micState, isConnected2 ?? false),
       anchor: { position: screenPosition, bottom: bottomSpace, size: buttonSize }
     }
-  ), isChatOpen && isChatMinimized && /* @__PURE__ */ React5.createElement(
+  ), isChatOpen && isChatMinimized && /* @__PURE__ */ React11.createElement(
     "button",
     {
       onClick: restoreChat,
@@ -17388,8 +16995,8 @@ var MicButton = ({
       className: `cuekit-voice-popup ${currentTheme === "dark" ? "cuekit-dark" : ""}`,
       "aria-label": "Open chat"
     },
-    /* @__PURE__ */ React5.createElement("span", { style: { fontSize: 12, fontWeight: 600, color: "hsl(var(--voice-text))" } }, "Open chat")
-  ), /* @__PURE__ */ React5.createElement("div", { ref: audioContainerRef, style: { display: "none" } }), showBorderGlow && showBodyGlow && /* @__PURE__ */ React5.createElement(border_glow_default, { isActive: true }));
+    /* @__PURE__ */ React11.createElement("span", { style: { fontSize: 12, fontWeight: 600, color: "hsl(var(--voice-text))" } }, "Open chat")
+  ), /* @__PURE__ */ React11.createElement("div", { ref: audioContainerRef, style: { display: "none" } }), showBorderGlow && showBodyGlow && /* @__PURE__ */ React11.createElement(border_glow_default, { isActive: true }));
 };
 export {
   border_glow_default as BorderGlow,
@@ -17400,19 +17007,11 @@ export {
   VoiceIntensityVisualizer,
   captureFullDOMStructure,
   configureWebRTCServer,
-  connectSSE,
-  disconnectSSE,
   executeAction,
   getFullDOMStructure,
-  getSSEConnectionState,
-  getSSEConnectionStatus,
   getWebRTCServerConfig,
   initWebRTC,
   initWebRTCWithDeployedBackend,
-  sendDashboardData,
-  sendElementData,
-  sendRuntimeData,
-  setSSECallbacks,
   useCuekit,
   useQubeContext,
   useWebRTC