@cuekit-ai/react 1.2.3 → 1.3.1

package/dist/{chunk-UD3LZUJ2.mjs → chunk-PLOG3DEN.mjs}

@@ -22668,11 +22668,459 @@ var setWebRTCConnectionState = (state) => {
 };
 
 // src/constants/index.ts
-var WEBRTC_BACKEND_SERVER_URL = "https://api-webrtc.cuekit.ai";
+var WEBRTC_BACKEND_SERVER_URL = "https://api-webrtc-dev.ansyr.ai";
+
+// src/utils/jsx-encoder.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/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 index = store.allElementsData.findIndex((e2) => e2.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((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(path, params) {
+  const safeParams = params || {};
+  const absolutePath = path.startsWith("/") ? path : `/${path}`;
+  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 = (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 (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 element of allElements) {
+        if (element instanceof HTMLElement) {
+          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 = getElementPath2(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;
+          }
+          const elementHashValue = hash.toString(36);
+          if (elementHashValue === elementHash) {
+            elementToClick = element;
+            break;
+          }
+        }
+      }
+      if (elementToClick) {
+        elementToClick.click();
+        observer2.disconnect();
+      }
+    }, 100);
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+};
+function getElementPath2(element) {
+  if (element.id) {
+    return `id(${element.id})`;
+  }
+  const path = [];
+  let current = element;
+  while (current && current !== document.body) {
+    let index = 1;
+    let sibling = current.previousElementSibling;
+    while (sibling) {
+      if (sibling.tagName === current.tagName) {
+        index++;
+      }
+      sibling = sibling.previousElementSibling;
+    }
+    path.unshift(`${current.tagName.toLowerCase()}[${index}]`);
+    current = current.parentElement;
+  }
+  return path.join("/");
+}
+
+// src/utils/element-service.ts
+var INTERACTIVE_ELEMENT_SELECTOR = 'a, button, input, textarea, select, [role="button"], [onclick]';
+function getInteractiveElements() {
+  return document.querySelectorAll(INTERACTIVE_ELEMENT_SELECTOR);
+}
+function getImmediateText(element) {
+  let text = "";
+  if (element.childNodes) {
+    for (const node of Array.from(element.childNodes)) {
+      if (node.nodeType === 3) {
+        text += node.textContent || "";
+      }
+    }
+  }
+  return text.trim();
+}
+function captureFullDOMStructure() {
+  console.log("\u{1F333} Capturing full DOM structure...");
+  const components = [];
+  const interactiveElements = getInteractiveElements();
+  interactiveElements.forEach((element) => {
+    if (element instanceof HTMLElement && !element.closest("[data-cuekit-ignore]")) {
+      const nodeData = buildFlatDOMNode(element);
+      if (nodeData) {
+        components.push(nodeData);
+      }
+    }
+  });
+  const result = { components };
+  console.log("\u{1F333} Full DOM structure captured:", result);
+  return result;
+}
+function buildFlatDOMNode(element) {
+  if (element.tagName.toLowerCase() === "script" || element.hasAttribute("data-cuekit-ignore") || element.style.display === "none" || element.style.visibility === "hidden") {
+    return null;
+  }
+  const hash = generateStableDOMId(element);
+  const text = getImmediateText(element).substring(0, 100);
+  const isClickable = isElementClickable(element);
+  const componentType = element.tagName.toLowerCase();
+  return {
+    hash,
+    text,
+    isClickable,
+    componentType,
+    children: []
+    // No children in a flat structure
+  };
+}
+function isElementClickable(element) {
+  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 (element.matches(selector)) {
+      return true;
+    }
+  }
+  const hasClickEvents = element.onclick !== null || element.getAttribute("onclick") !== null;
+  const hasInteractiveEvents = element.ontouchstart !== null || element.getAttribute("ontouchstart") !== null || element.ontouchend !== null || element.getAttribute("ontouchend") !== null || element.onkeydown !== null || element.getAttribute("onkeydown") !== null || element.onkeyup !== null || element.getAttribute("onkeyup") !== null || element.onkeypress !== null || element.getAttribute("onkeypress") !== null;
+  const hasPointerCursor = element.style.cursor === "pointer" || getComputedStyle(element).cursor === "pointer";
+  const hasTabIndex = element.hasAttribute("tabindex") && parseInt(element.getAttribute("tabindex") || "0") >= 0;
+  const hasInteractiveDataAttrs = element.hasAttribute("data-clickable") || element.hasAttribute("data-interactive") || element.hasAttribute("data-action") || element.hasAttribute("data-handler");
+  const hasInteractiveAria = element.hasAttribute("aria-pressed") || element.hasAttribute("aria-expanded") || element.hasAttribute("aria-selected") || element.hasAttribute("aria-checked");
+  return hasClickEvents || hasInteractiveEvents || hasPointerCursor || hasTabIndex || hasInteractiveDataAttrs || hasInteractiveAria;
+}
+function executeAction(action) {
+  console.log("\u{1F3AF} Executing element action:", action);
+  const { action_type, target_element, target } = action;
+  switch (action_type) {
+    case "click":
+      return clickElement(target_element);
+    case "navigate":
+      return navigateToElement(target_element || target);
+    case "input":
+    case "focus":
+      return focusElement(target_element);
+    case "toggle":
+      return toggleElement(target_element);
+    default:
+      console.warn(`\u26A0\uFE0F Unknown action type: ${action_type}`);
+      return false;
+  }
+}
+function getFullDOMStructure() {
+  console.log("\u{1F333} ElementService: Getting full DOM structure...");
+  return captureFullDOMStructure();
+}
+function clickElement(elementId) {
+  if (!elementId) {
+    console.warn("\u26A0\uFE0F No element ID provided for click action");
+    return false;
+  }
+  const domStructure = getFullDOMStructure();
+  const elementToClick = findElementById(domStructure, elementId);
+  if (elementToClick) {
+    console.log(`\u{1F3AF} Clicking element: ${elementId}`);
+    const domElement = findDOMElementById(elementId);
+    if (domElement) {
+      domElement.click();
+      return true;
+    }
+  } else {
+    console.warn(`\u26A0\uFE0F Element not found: ${elementId}`);
+  }
+  return false;
+}
+function navigateToElement(target) {
+  if (!target) {
+    console.warn("\u26A0\uFE0F No target provided for navigation action");
+    return false;
+  }
+  console.log(`\u{1F9ED} Navigating to: ${target}`);
+  if (target.includes("/") || target.startsWith("http")) {
+    safeNavigate(target, {});
+  } else {
+    handleNavigationAndClick(target, target);
+  }
+  return true;
+}
+function focusElement(elementId) {
+  if (!elementId) {
+    console.warn("\u26A0\uFE0F No element ID provided for focus action");
+    return false;
+  }
+  const domElement = findDOMElementById(elementId);
+  if (domElement instanceof HTMLInputElement || domElement instanceof HTMLTextAreaElement || domElement instanceof HTMLSelectElement) {
+    console.log(`\u{1F4DD} Focusing element: ${elementId}`);
+    domElement.focus();
+    return true;
+  } else {
+    console.warn(`\u26A0\uFE0F Focusable element not found: ${elementId}`);
+    return false;
+  }
+}
+function toggleElement(elementId) {
+  if (!elementId) {
+    console.warn("\u26A0\uFE0F No element ID provided for toggle action");
+    return false;
+  }
+  const domElement = findDOMElementById(elementId);
+  if (domElement instanceof HTMLElement) {
+    console.log(`\u{1F504} Toggling element: ${elementId}`);
+    if (domElement instanceof HTMLInputElement) {
+      if (domElement.type === "checkbox") {
+        domElement.checked = !domElement.checked;
+      } else if (domElement.type === "radio") {
+        domElement.checked = true;
+      }
+      domElement.dispatchEvent(new Event("change", { bubbles: true }));
+    } else {
+      domElement.click();
+    }
+    return true;
+  } else {
+    console.warn(`\u26A0\uFE0F Toggleable element not found: ${elementId}`);
+    return false;
+  }
+}
+function findElementById(domStructure, elementId) {
+  const searchInComponents = (components) => {
+    for (const component of components) {
+      if (component.hash === elementId) {
+        return component;
+      }
+      if (component.children.length > 0) {
+        const found = searchInComponents(component.children);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+  return searchInComponents(domStructure.components);
+}
+function findDOMElementById(elementId) {
+  const interactiveElements = getInteractiveElements();
+  for (const element of interactiveElements) {
+    if (element instanceof HTMLElement) {
+      console.log("\u{1F50D} Checking element:", element);
+      const hash = generateStableDOMId(element);
+      console.log("\u{1F50D} Generated hash:", hash);
+      if (hash === elementId) {
+        console.log("\u{1F50D} Found element:", element);
+        return element;
+      }
+    }
+  }
+  return null;
+}
 
 // src/utils/webrtc-service.ts
 var room = null;
-var eventSource = null;
 var reconnectTimeout = null;
 var serverUrl = WEBRTC_BACKEND_SERVER_URL || "https://bdd4c945f073.ngrok-free.app";
 var callbacks = {};
@@ -22792,19 +23240,19 @@ function setupEventListeners() {
   }).on(RoomEvent.TrackUnsubscribed, (track) => {
     track.detach().forEach((element) => element.remove());
   }).on(RoomEvent.DataReceived, (payload, participant) => {
-    handleDataReceived(payload, participant);
+    console.log("\u{1F4E1} LiveKit data received:", new TextDecoder().decode(payload));
+    try {
+      const message = JSON.parse(new TextDecoder().decode(payload));
+      console.log("\u{1F4E1} LiveKit data received:", message);
+      callbacks.onNavigationCommand?.(message);
+    } catch (error) {
+      const message = new TextDecoder().decode(payload);
+      callbacks.onNavigationCommand?.({ type: "raw_text", data: message });
+    }
   }).on(RoomEvent.Disconnected, () => {
     setWebRTCConnectionState({ isConnected: false, isConnecting: false });
   });
 }
-function handleDataReceived(payload, participant) {
-  try {
-    const message = JSON.parse(new TextDecoder().decode(payload));
-    callbacks.onNavigationCommand?.(message);
-  } catch (error) {
-    console.error("\u{1F3A4} WebRTCService: Error parsing data:", error);
-  }
-}
 function updateParticipantsList() {
   if (!room) return;
   const participants = [
@@ -22817,7 +23265,10 @@ function updateParticipantsList() {
 async function sendData(data, reliable = true) {
   if (!room) throw new Error("Not connected to room");
   try {
-    await room.localParticipant.publishData(new TextEncoder().encode(JSON.stringify(data)), {
+    console.log("\u{1F4E1} LiveKit data sending:", data);
+    const encoder = new TextEncoder();
+    const encodedData = encoder.encode(data);
+    await room.localParticipant.publishData(encodedData, {
       reliable
     });
   } catch (error) {
@@ -22848,14 +23299,30 @@ function getParticipants() {
 }
 async function sendUserCommand(command) {
   if (!room) return;
-  const userCommand = {
-    type: "user_command",
-    data: {
-      command,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    }
-  };
-  await sendData(userCommand);
+  console.log(`\u{1F4AC} Sending user command: "${command}"`);
+  await sendData(command);
+}
+async function sendRuntimeData() {
+  if (!room) {
+    console.error("\u274C Cannot send runtime data without a room connection");
+    return;
+  }
+  try {
+    const domStructure = captureFullDOMStructure();
+    const screenName = getCurrentScreenName();
+    const response = {
+      type: "runtime_data_response",
+      data: {
+        components: domStructure.components,
+        current_screen: screenName
+      }
+    };
+    console.log("\u{1F4E6} Sending runtime data response");
+    await sendData(JSON.stringify(response));
+    console.log("\u{1F4E6} Runtime data sent successfully");
+  } catch (error) {
+    console.error("\u274C Failed to send runtime data:", error);
+  }
 }
 async function sendStaticData(componentData, appId = "default") {
   try {
@@ -22886,10 +23353,6 @@ async function disconnectFromRoom() {
     await room.disconnect();
     room = null;
   }
-  if (eventSource) {
-    eventSource.close();
-    eventSource = null;
-  }
   if (reconnectTimeout) {
     clearTimeout(reconnectTimeout);
     reconnectTimeout = null;
@@ -22913,6 +23376,9 @@ export {
   setApiKey,
   setAppId,
   setWebRTCConfig,
+  GlobalStore,
+  setNavigationHandler,
+  onStateChange,
   WEBRTC_BACKEND_SERVER_URL,
   RoomEvent,
   ParticipantEvent,
@@ -22920,6 +23386,9 @@ export {
   createAudioAnalyser,
   Participant,
   ConnectionState,
+  captureFullDOMStructure,
+  executeAction,
+  getFullDOMStructure,
   setServerUrl,
   setAudioContainer,
   setWebRTCCallbacks,
@@ -22931,6 +23400,7 @@ export {
   getRoomName,
   getParticipants,
   sendUserCommand,
+  sendRuntimeData,
   sendStaticData,
   disconnectFromRoom,
   getRoom