@skippr/live-agent-sdk 0.27.0 → 0.28.0

package/dist/esm/lib-exports.js

@@ -1,6 +1,14 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
 // src/components/LiveAgent.tsx
 import { LiveKitRoom, RoomAudioRenderer } from "@livekit/components-react";
-import { useCallback as useCallback6, useEffect as useEffect12, useMemo as useMemo5, useRef as useRef6, useState as useState8 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect13, useMemo as useMemo5, useRef as useRef7, useState as useState8 } from "react";
 
 // src/context/LiveAgentContext.tsx
 import { createContext } from "react";
@@ -165,7 +173,13 @@ async function exchangeForBearerToken(appKey, userToken) {
   const { token } = await resp.json();
   return token;
 }
-function useSession({ agentId, authToken, appKey, userToken }) {
+function useSession({
+  agentId,
+  captureMode = "screenshare",
+  authToken,
+  appKey,
+  userToken
+}) {
   const [connection, setConnection] = useState2(null);
   const [shouldConnect, setShouldConnect] = useState2(false);
   const [isStarting, setIsStarting] = useState2(false);
@@ -202,12 +216,14 @@ function useSession({ agentId, authToken, appKey, userToken }) {
     setError("");
     setErrorCode(null);
     let screenStream = null;
-    try {
-      screenStream = await navigator.mediaDevices.getDisplayMedia({
-        video: { displaySurface: "browser" }
-      });
-    } catch {
-      screenStream = null;
+    if (captureMode === "screenshare") {
+      try {
+        screenStream = await navigator.mediaDevices.getDisplayMedia({
+          video: { displaySurface: "browser" }
+        });
+      } catch {
+        screenStream = null;
+      }
     }
     const headers = { Authorization: `Bearer ${bearerToken}` };
     try {
@@ -215,7 +231,7 @@ function useSession({ agentId, authToken, appKey, userToken }) {
         method: "POST",
         credentials: "omit",
         headers: { "Content-Type": "application/json", ...headers },
-        body: JSON.stringify({ agentId })
+        body: JSON.stringify({ agentId, captureMode })
       });
       if (!createResp.ok) {
         const body = await createResp.json().catch(() => null);
@@ -250,7 +266,7 @@ function useSession({ agentId, authToken, appKey, userToken }) {
     } finally {
       setIsStarting(false);
     }
-  }, [agentId, bearerToken]);
+  }, [agentId, captureMode, bearerToken]);
   const disconnect = useCallback2(async () => {
     if (sessionId && bearerToken) {
       try {
@@ -283,6 +299,15 @@ function useSession({ agentId, authToken, appKey, userToken }) {
     pendingScreenStream
   };
 }
+
+// src/lib/constants.ts
+var SIDEBAR_WIDTH = 360;
+var WIDGET_ROOT_ID = "skippr-sdk-root";
+var REF_ATTR = "data-skippr-ref";
+var PRIVATE_ATTR = "data-skippr-private";
+var DOM_SNAPSHOT_TOPIC = "skippr.dom-snapshot";
+var DOM_EVENTS_TOPIC = "skippr.dom-events";
+var NAME_MAX_CHARS = 80;
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/createLucideIcon.js
 import { forwardRef as forwardRef2, createElement as createElement3 } from "react";
 
@@ -513,7 +538,7 @@ var __iconNode16 = [
 ];
 var Send = createLucideIcon("send", __iconNode16);
 // src/hooks/useAgentVoiceState.ts
-import { useVoiceAssistant } from "@livekit/components-react";
+import { useVoiceAssistant } from "@livekit/components-react/hooks";
 function useAgentVoiceState() {
   const { state } = useVoiceAssistant();
   return {
@@ -535,7 +560,7 @@ function useLiveAgent() {
 }
 
 // src/hooks/useMediaControls.ts
-import { useLocalParticipant } from "@livekit/components-react";
+import { useLocalParticipant } from "@livekit/components-react/hooks";
 import { ScreenSharePresets } from "livekit-client";
 import { useCallback as useCallback3 } from "react";
 var SCREEN_SHARE_OPTIONS = {
@@ -682,7 +707,7 @@ function SpeakingBars() {
 }
 
 // src/components/AutoStartMedia.tsx
-import { useConnectionState, useLocalParticipant as useLocalParticipant2 } from "@livekit/components-react";
+import { useConnectionState, useLocalParticipant as useLocalParticipant2 } from "@livekit/components-react/hooks";
 import { ConnectionState, Track } from "livekit-client";
 import { useEffect as useEffect3, useRef } from "react";
 function AutoStartMedia({ pendingScreenStream }) {
@@ -711,8 +736,853 @@ function AutoStartMedia({ pendingScreenStream }) {
   return null;
 }
 
+// src/components/DomCapture.tsx
+import { useConnectionState as useConnectionState2, useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react/hooks";
+import { ConnectionState as ConnectionState2, ScreenSharePresets as ScreenSharePresets2, Track as Track2 } from "livekit-client";
+import { useEffect as useEffect4, useRef as useRef2 } from "react";
+
+// src/capture/a11yUtils.ts
+var ROLE_BY_TAG = {
+  a: "link",
+  button: "button",
+  input: "input",
+  select: "select",
+  textarea: "textarea",
+  label: "label",
+  nav: "navigation",
+  main: "main",
+  header: "header",
+  footer: "footer",
+  aside: "complementary",
+  form: "form",
+  h1: "heading",
+  h2: "heading",
+  h3: "heading",
+  h4: "heading",
+  h5: "heading",
+  h6: "heading",
+  img: "image",
+  ul: "list",
+  ol: "list",
+  li: "listitem",
+  table: "table",
+  tr: "row",
+  td: "cell",
+  th: "columnheader",
+  video: "video",
+  iframe: "iframe",
+  canvas: "canvas",
+  audio: "audio",
+  embed: "embed",
+  object: "object"
+};
+function inferRole(element) {
+  const explicitRole = element.getAttribute("role");
+  if (explicitRole)
+    return explicitRole;
+  const tagName = element.tagName.toLowerCase();
+  if (tagName === "input") {
+    const inputType = element.type;
+    if (inputType === "checkbox")
+      return "checkbox";
+    if (inputType === "radio")
+      return "radio";
+    if (inputType === "submit" || inputType === "button")
+      return "button";
+    return "input";
+  }
+  return ROLE_BY_TAG[tagName] ?? null;
+}
+function accessibleName(element, options = {}) {
+  const ariaLabel = element.getAttribute("aria-label");
+  if (ariaLabel)
+    return ariaLabel.trim().slice(0, NAME_MAX_CHARS);
+  if (!options.quick) {
+    const labelledBy = element.getAttribute("aria-labelledby");
+    if (labelledBy) {
+      const labelElement = document.getElementById(labelledBy);
+      if (labelElement)
+        return (labelElement.textContent || "").trim().slice(0, NAME_MAX_CHARS);
+    }
+    if (element.tagName === "INPUT" || element.tagName === "SELECT" || element.tagName === "TEXTAREA") {
+      const elementId = element.id;
+      if (elementId) {
+        const associatedLabel = document.querySelector(`label[for="${CSS.escape(elementId)}"]`);
+        if (associatedLabel?.textContent) {
+          return associatedLabel.textContent.trim().slice(0, NAME_MAX_CHARS);
+        }
+      }
+      const placeholder = element.getAttribute("placeholder");
+      if (placeholder)
+        return placeholder.trim().slice(0, NAME_MAX_CHARS);
+    }
+  }
+  if (element.tagName === "IMG") {
+    const altText = element.getAttribute("alt");
+    if (altText)
+      return altText.trim().slice(0, NAME_MAX_CHARS);
+  }
+  const titleAttr = element.getAttribute("title");
+  if (titleAttr)
+    return titleAttr.trim().slice(0, NAME_MAX_CHARS);
+  const textContent = (element.textContent || "").replace(/\s+/g, " ").trim();
+  if (textContent)
+    return textContent.slice(0, NAME_MAX_CHARS);
+  return "";
+}
+
+// src/capture/a11yTree.ts
+var REF_PREFIX = "r-";
+var VALUE_MAX_CHARS = 80;
+var HREF_MAX_CHARS = 60;
+var PAGE_CONTENT_MAX_BYTES = 14000;
+var NODE_LIMIT = 1500;
+var SENSITIVE_IFRAME_HOSTS = [
+  "js.stripe.com",
+  "checkout.stripe.com",
+  "connect.stripe.com",
+  "plaid.com",
+  "production.plaid.com",
+  "cdn.plaid.com",
+  "auth0.com",
+  "login.auth0.com",
+  "recaptcha.net",
+  "www.google.com",
+  "hcaptcha.com",
+  "newassets.hcaptcha.com",
+  "challenges.cloudflare.com"
+];
+var MASK_AUTOCOMPLETE_VALUES = new Set([
+  "cc-number",
+  "cc-exp",
+  "cc-exp-month",
+  "cc-exp-year",
+  "cc-csc",
+  "cc-name",
+  "cc-given-name",
+  "cc-family-name",
+  "current-password",
+  "new-password",
+  "one-time-code"
+]);
+var MASK_INPUT_TYPES = new Set(["password", "hidden"]);
+var MASK_NAME_PATTERN = /password|secret|token|api[_-]?key|ssn|tax[_-]?id|social[_-]?security|cvv|cvc|pin/i;
+var refCounter = 0;
+function generateNextRef() {
+  refCounter += 1;
+  return `${REF_PREFIX}${refCounter}`;
+}
+function advanceCounterPastExisting(ref) {
+  const parsedRefNumber = Number.parseInt(ref.slice(REF_PREFIX.length), 10);
+  if (Number.isFinite(parsedRefNumber) && parsedRefNumber > refCounter) {
+    refCounter = parsedRefNumber;
+  }
+}
+function intersectsViewport(rect, viewportWidth, viewportHeight) {
+  if (rect.width <= 0 || rect.height <= 0)
+    return false;
+  if (rect.bottom <= 0 || rect.top >= viewportHeight)
+    return false;
+  if (rect.right <= 0 || rect.left >= viewportWidth)
+    return false;
+  return true;
+}
+function isVisible(element, rect) {
+  if (!intersectsViewport(rect, window.innerWidth, window.innerHeight))
+    return false;
+  const style = window.getComputedStyle(element);
+  if (style.visibility === "hidden" || style.display === "none")
+    return false;
+  if (Number.parseFloat(style.opacity || "1") <= 0.01)
+    return false;
+  return true;
+}
+function isInteractive(element, role) {
+  if (role && role !== "heading" && role !== "image" && role !== "list" && role !== "listitem") {
+    const interactiveRoles = [
+      "button",
+      "link",
+      "input",
+      "select",
+      "textarea",
+      "checkbox",
+      "radio",
+      "tab",
+      "menuitem",
+      "option",
+      "switch",
+      "slider"
+    ];
+    if (interactiveRoles.includes(role))
+      return true;
+  }
+  if (element.tabIndex >= 0)
+    return true;
+  if (element.hasAttribute("onclick") || element.hasAttribute("contenteditable"))
+    return true;
+  return false;
+}
+function isBlindRegion(role) {
+  return role === "video" || role === "iframe" || role === "canvas" || role === "audio" || role === "embed" || role === "object";
+}
+function getIframeHost(element) {
+  const src = element.getAttribute("src");
+  if (!src)
+    return null;
+  try {
+    return new URL(src, window.location.href).host;
+  } catch {
+    return null;
+  }
+}
+function isSensitiveIframe(element) {
+  const host = getIframeHost(element);
+  if (!host)
+    return false;
+  return SENSITIVE_IFRAME_HOSTS.some((sensitiveHost) => host === sensitiveHost || host.endsWith(`.${sensitiveHost}`));
+}
+function isSameOriginIframe(element) {
+  const src = element.getAttribute("src");
+  if (!src)
+    return true;
+  try {
+    return new URL(src, window.location.href).origin === window.location.origin;
+  } catch {
+    return false;
+  }
+}
+function nearestHeadingText(element) {
+  let currentNode = element;
+  while (currentNode && currentNode !== document.body) {
+    let previousSibling = currentNode.previousElementSibling;
+    while (previousSibling) {
+      if (/^H[1-6]$/.test(previousSibling.tagName) && previousSibling.textContent) {
+        return previousSibling.textContent.trim().slice(0, NAME_MAX_CHARS);
+      }
+      previousSibling = previousSibling.previousElementSibling;
+    }
+    currentNode = currentNode.parentElement;
+  }
+  return null;
+}
+function shouldMaskValue(input) {
+  if (input.tagName === "INPUT") {
+    const inputElement = input;
+    if (MASK_INPUT_TYPES.has(inputElement.type))
+      return true;
+    const autocompleteAttr = (inputElement.getAttribute("autocomplete") || "").toLowerCase().trim();
+    if (MASK_AUTOCOMPLETE_VALUES.has(autocompleteAttr))
+      return true;
+  }
+  const fieldName = (input.getAttribute("name") || "").trim();
+  const fieldId = (input.getAttribute("id") || "").trim();
+  if (MASK_NAME_PATTERN.test(fieldName) || MASK_NAME_PATTERN.test(fieldId))
+    return true;
+  return false;
+}
+function escapeAttributeValue(value) {
+  return value.replace(/\\/g, "\\\\").replace(/"/g, "\\\"").replace(/[\r\n]+/g, " ");
+}
+function extractAttrs(element, role) {
+  const attributes = [];
+  if (role === "link") {
+    const href = element.getAttribute("href");
+    if (href)
+      attributes.push(`href="${escapeAttributeValue(href.slice(0, HREF_MAX_CHARS))}"`);
+  }
+  if (role === "input" || role === "checkbox" || role === "radio") {
+    const input = element;
+    if (input.type && input.type !== "text")
+      attributes.push(`type="${input.type}"`);
+    if (shouldMaskValue(input)) {
+      attributes.push("valueMasked");
+    } else if (input.value && role === "input") {
+      attributes.push(`value="${escapeAttributeValue(input.value.slice(0, VALUE_MAX_CHARS))}"`);
+    }
+    if (input.checked)
+      attributes.push("checked");
+  }
+  if (role === "textarea") {
+    const textarea = element;
+    if (shouldMaskValue(textarea)) {
+      attributes.push("valueMasked");
+    } else if (textarea.value) {
+      attributes.push(`value="${escapeAttributeValue(textarea.value.slice(0, VALUE_MAX_CHARS))}"`);
+    }
+  }
+  if (role === "select") {
+    const select = element;
+    const selectedOption = select.options[select.selectedIndex];
+    if (selectedOption?.value?.trim()) {
+      attributes.push(`selected="${escapeAttributeValue(selectedOption.value.slice(0, VALUE_MAX_CHARS))}"`);
+    }
+  }
+  if (role === "heading") {
+    const headingLevel = element.tagName.match(/^H([1-6])$/)?.[1];
+    if (headingLevel)
+      attributes.push(`level="${headingLevel}"`);
+  }
+  if (role === "video" || role === "audio") {
+    const mediaElement = element;
+    try {
+      if (Number.isFinite(mediaElement.currentTime)) {
+        attributes.push(`currentTime="${mediaElement.currentTime.toFixed(1)}"`);
+      }
+      if (Number.isFinite(mediaElement.duration) && mediaElement.duration > 0) {
+        attributes.push(`duration="${mediaElement.duration.toFixed(1)}"`);
+      }
+      attributes.push(mediaElement.paused ? "paused" : "playing");
+      if (mediaElement.muted)
+        attributes.push("muted");
+      const mediaSrc = mediaElement.currentSrc || mediaElement.getAttribute("src");
+      if (mediaSrc) {
+        try {
+          attributes.push(`srcHost="${new URL(mediaSrc, window.location.href).host}"`);
+        } catch {}
+      }
+    } catch {}
+  }
+  if (role === "iframe") {
+    const host = getIframeHost(element);
+    if (host)
+      attributes.push(`srcHost="${host}"`);
+    if (isSensitiveIframe(element)) {
+      attributes.push("sensitive");
+    } else if (!isSameOriginIframe(element)) {
+      attributes.push("cross-origin");
+    }
+    const iframeRect = element.getBoundingClientRect();
+    attributes.push(`size="${Math.round(iframeRect.width)}x${Math.round(iframeRect.height)}"`);
+  }
+  if (role === "canvas") {
+    const canvas = element;
+    attributes.push(`size="${canvas.width}x${canvas.height}"`);
+    const heading = nearestHeadingText(element);
+    if (heading)
+      attributes.push(`nearestHeading="${escapeAttributeValue(heading)}"`);
+  }
+  if (role === "image") {
+    const image = element;
+    const imageSrc = image.getAttribute("src") || "";
+    if (/\.gif(\?|$)/i.test(imageSrc))
+      attributes.push("animated");
+  }
+  const isNativelyDisabled = "disabled" in element && element.disabled === true;
+  if (isNativelyDisabled || element.getAttribute("aria-disabled") === "true") {
+    attributes.push("disabled");
+  }
+  return attributes;
+}
+function ensureStableRef(element) {
+  const existingRef = element.getAttribute(REF_ATTR);
+  if (existingRef) {
+    advanceCounterPastExisting(existingRef);
+    return existingRef;
+  }
+  const newRef = generateNextRef();
+  element.setAttribute(REF_ATTR, newRef);
+  return newRef;
+}
+function formatNodeAsLine(entry) {
+  const indent = "  ".repeat(entry.depth);
+  const namePart = entry.name ? ` "${escapeAttributeValue(entry.name)}"` : "";
+  const attrsPart = entry.attrs.length > 0 ? ` ${entry.attrs.join(" ")}` : "";
+  return `${indent}${entry.role}${namePart} ${entry.ref}${attrsPart}`;
+}
+function shouldSkipSubtree(element) {
+  if (element.id === WIDGET_ROOT_ID)
+    return true;
+  if (element.hasAttribute(PRIVATE_ATTR))
+    return true;
+  const tagName = element.tagName;
+  if (tagName === "SCRIPT" || tagName === "STYLE" || tagName === "NOSCRIPT")
+    return true;
+  return false;
+}
+function shouldEmitElement(element, role) {
+  if (role === null)
+    return false;
+  return isInteractive(element, role) || role === "heading" || role === "image" || role === "label" || isBlindRegion(role);
+}
+function getSameOriginIframeBody(element) {
+  if (element.tagName !== "IFRAME")
+    return null;
+  if (!isSameOriginIframe(element) || isSensitiveIframe(element))
+    return null;
+  try {
+    return element.contentDocument?.body ?? null;
+  } catch {
+    return null;
+  }
+}
+function walkAndCollect(element, depth, entries) {
+  if (shouldSkipSubtree(element))
+    return;
+  const rect = element.getBoundingClientRect();
+  const role = inferRole(element);
+  const isVisibleAndEmittable = role !== null && isVisible(element, rect) && shouldEmitElement(element, role);
+  let childDepth = depth;
+  if (isVisibleAndEmittable && role) {
+    const ref = ensureStableRef(element);
+    entries.push({
+      depth,
+      role,
+      name: accessibleName(element),
+      ref,
+      attrs: extractAttrs(element, role),
+      area: rect.width * rect.height
+    });
+    childDepth = depth + 1;
+  }
+  if (role === "iframe") {
+    const iframeBody = getSameOriginIframeBody(element);
+    if (iframeBody) {
+      for (const child of Array.from(iframeBody.children)) {
+        walkAndCollect(child, childDepth, entries);
+      }
+    }
+    return;
+  }
+  if (role && isBlindRegion(role))
+    return;
+  for (const child of Array.from(element.children)) {
+    walkAndCollect(child, childDepth, entries);
+  }
+}
+function dropSmallestAreaEntriesUntilUnderLimit(entries) {
+  if (entries.length <= NODE_LIMIT)
+    return entries;
+  const indexedEntries = entries.map((entry, index2) => ({ entry, index: index2 }));
+  const entriesByAreaAscending = indexedEntries.slice(1).sort((a, b) => a.entry.area - b.entry.area);
+  const indicesToDrop = new Set(entriesByAreaAscending.slice(0, entries.length - NODE_LIMIT).map((indexed) => indexed.index));
+  const keptEntries = [];
+  for (let i = 0;i < entries.length; i++) {
+    if (!indicesToDrop.has(i))
+      keptEntries.push(entries[i]);
+  }
+  return keptEntries;
+}
+function buildAccessibilityTree() {
+  const collectedEntries = [];
+  const pageTitle = document.title || window.location.pathname;
+  collectedEntries.push({
+    depth: 0,
+    role: "page",
+    name: pageTitle.slice(0, NAME_MAX_CHARS),
+    ref: `${REF_PREFIX}0`,
+    attrs: [],
+    area: window.innerWidth * window.innerHeight
+  });
+  if (document.body) {
+    for (const child of Array.from(document.body.children)) {
+      walkAndCollect(child, 1, collectedEntries);
+    }
+  }
+  const exceededNodeLimit = collectedEntries.length > NODE_LIMIT;
+  const finalEntries = exceededNodeLimit ? dropSmallestAreaEntriesUntilUnderLimit(collectedEntries) : collectedEntries;
+  const treeLines = finalEntries.map(formatNodeAsLine);
+  let pageContent = treeLines.join(`
+`);
+  const exceededByteLimit = pageContent.length > PAGE_CONTENT_MAX_BYTES;
+  if (exceededByteLimit) {
+    pageContent = `${pageContent.slice(0, PAGE_CONTENT_MAX_BYTES)}
+<!-- truncated -->`;
+  }
+  return {
+    pageContent,
+    viewport: { width: window.innerWidth, height: window.innerHeight },
+    refCount: finalEntries.length - 1,
+    truncated: exceededNodeLimit || exceededByteLimit
+  };
+}
+
+// src/capture/domEvents.ts
+var MUTATION_DEBOUNCE_MS = 250;
+var textEncoder = new TextEncoder;
+function isInsideWidget(target) {
+  if (!(target instanceof Node))
+    return false;
+  let node = target;
+  while (node) {
+    if (node instanceof Element && node.id === WIDGET_ROOT_ID)
+      return true;
+    node = node.parentNode;
+  }
+  return false;
+}
+function findNearestRef(element) {
+  let currentNode = element;
+  while (currentNode) {
+    const ref = currentNode.getAttribute(REF_ATTR);
+    if (ref)
+      return { ref, node: currentNode };
+    currentNode = currentNode.parentElement;
+  }
+  return null;
+}
+function installDomEventListeners(localParticipant, options = {}) {
+  const { onTriggerEvent } = options;
+  function publishDomEvent(event) {
+    try {
+      localParticipant.publishData(textEncoder.encode(JSON.stringify(event)), {
+        reliable: true,
+        topic: DOM_EVENTS_TOPIC
+      }).catch(() => {
+        return;
+      });
+    } catch {}
+    if (onTriggerEvent) {
+      try {
+        onTriggerEvent();
+      } catch {}
+    }
+  }
+  const onClick = (event) => {
+    if (isInsideWidget(event.target))
+      return;
+    if (!(event.target instanceof Element))
+      return;
+    const matchedRef = findNearestRef(event.target);
+    const targetElement = matchedRef?.node ?? event.target;
+    publishDomEvent({
+      type: "click",
+      ref: matchedRef?.ref ?? null,
+      role: inferRole(targetElement) ?? targetElement.tagName.toLowerCase(),
+      name: accessibleName(targetElement, { quick: true }),
+      timestamp: Date.now()
+    });
+  };
+  document.addEventListener("click", onClick, true);
+  const onSubmit = (event) => {
+    if (isInsideWidget(event.target))
+      return;
+    if (!(event.target instanceof HTMLFormElement))
+      return;
+    const submittedForm = event.target;
+    publishDomEvent({
+      type: "submit",
+      ref: submittedForm.getAttribute(REF_ATTR),
+      formName: (submittedForm.name || submittedForm.id || "").slice(0, NAME_MAX_CHARS),
+      action: (submittedForm.action || "").slice(0, NAME_MAX_CHARS),
+      timestamp: Date.now()
+    });
+  };
+  document.addEventListener("submit", onSubmit, true);
+  const originalPushState = history.pushState;
+  const originalReplaceState = history.replaceState;
+  let previousUrl = window.location.href;
+  const emitNavigationIfChanged = () => {
+    const nextUrl = window.location.href;
+    if (nextUrl === previousUrl)
+      return;
+    publishDomEvent({
+      type: "navigation",
+      from: previousUrl,
+      to: nextUrl,
+      title: document.title.slice(0, NAME_MAX_CHARS),
+      timestamp: Date.now()
+    });
+    previousUrl = nextUrl;
+  };
+  history.pushState = function patchedPushState(...args) {
+    originalPushState.apply(this, args);
+    queueMicrotask(emitNavigationIfChanged);
+  };
+  history.replaceState = function patchedReplaceState(...args) {
+    originalReplaceState.apply(this, args);
+    queueMicrotask(emitNavigationIfChanged);
+  };
+  const onPopState = () => emitNavigationIfChanged();
+  const onHashChange = () => emitNavigationIfChanged();
+  window.addEventListener("popstate", onPopState);
+  window.addEventListener("hashchange", onHashChange);
+  let pendingAddedRefs = new Set;
+  let pendingRemovedRefs = new Set;
+  let pendingMutationCount = 0;
+  let mutationFlushTimer = null;
+  const flushPendingMutations = () => {
+    mutationFlushTimer = null;
+    if (pendingMutationCount === 0)
+      return;
+    publishDomEvent({
+      type: "mutation",
+      summary: `${pendingMutationCount} subtree changes`,
+      addedRefs: Array.from(pendingAddedRefs),
+      removedRefs: Array.from(pendingRemovedRefs),
+      timestamp: Date.now()
+    });
+    pendingAddedRefs = new Set;
+    pendingRemovedRefs = new Set;
+    pendingMutationCount = 0;
+  };
+  const collectDescendantRefs = (node, targetSet) => {
+    if (!(node instanceof Element))
+      return;
+    if (node.id === WIDGET_ROOT_ID)
+      return;
+    const ref = node.getAttribute(REF_ATTR);
+    if (ref)
+      targetSet.add(ref);
+    for (const child of Array.from(node.children))
+      collectDescendantRefs(child, targetSet);
+  };
+  const observer = new MutationObserver((mutations) => {
+    let observedCount = 0;
+    for (const mutation of mutations) {
+      if (mutation.type !== "childList")
+        continue;
+      if (mutation.target instanceof Element && isInsideWidget(mutation.target))
+        continue;
+      if (mutation.addedNodes.length === 0 && mutation.removedNodes.length === 0)
+        continue;
+      for (const added of Array.from(mutation.addedNodes)) {
+        collectDescendantRefs(added, pendingAddedRefs);
+      }
+      for (const removed of Array.from(mutation.removedNodes)) {
+        collectDescendantRefs(removed, pendingRemovedRefs);
+      }
+      observedCount += 1;
+    }
+    if (observedCount === 0)
+      return;
+    pendingMutationCount += observedCount;
+    if (mutationFlushTimer)
+      clearTimeout(mutationFlushTimer);
+    mutationFlushTimer = setTimeout(flushPendingMutations, MUTATION_DEBOUNCE_MS);
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+  return () => {
+    document.removeEventListener("click", onClick, true);
+    document.removeEventListener("submit", onSubmit, true);
+    window.removeEventListener("popstate", onPopState);
+    window.removeEventListener("hashchange", onHashChange);
+    history.pushState = originalPushState;
+    history.replaceState = originalReplaceState;
+    if (mutationFlushTimer)
+      clearTimeout(mutationFlushTimer);
+    observer.disconnect();
+  };
+}
+
+// src/capture/snapdom.ts
+var cachedSnapdomModule = null;
+function loadSnapdom() {
+  if (!cachedSnapdomModule)
+    cachedSnapdomModule = import("@zumer/snapdom");
+  return cachedSnapdomModule;
+}
+async function snapToCanvas(element, options = {}) {
+  const snapdomModule = await loadSnapdom();
+  return snapdomModule.snapdom.toCanvas(element, options);
+}
+
+// src/components/DomCapture.tsx
+var SNAPSHOT_INTERVAL_MS = 2000;
+var A11Y_PUBLISH_INTERVAL_MS = 2000;
+var CAPTURE_PRESET = ScreenSharePresets2.h1080fps30;
+var CAPTURE_FPS = CAPTURE_PRESET.encoding.maxFramerate ?? 30;
+var CAPTURE_BITRATE = 4000000;
+var DOM_SNAPSHOT_GZIP_THRESHOLD_BYTES = 14000;
+var MAX_CANVAS_DPR = 1.5;
+var CONSECUTIVE_FAILURES_BEFORE_REPORT = 3;
+var textEncoder2 = new TextEncoder;
+function shouldIncludeInSnapshot(element) {
+  if (!(element instanceof Element))
+    return true;
+  if (element.id === WIDGET_ROOT_ID)
+    return false;
+  if (element.hasAttribute?.(PRIVATE_ATTR))
+    return false;
+  return true;
+}
+function createPublishingCanvas() {
+  const dprBoost = Math.min(window.devicePixelRatio || 1, MAX_CANVAS_DPR);
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.round(CAPTURE_PRESET.width * dprBoost);
+  canvas.height = Math.round(CAPTURE_PRESET.height * dprBoost);
+  const ctx = canvas.getContext("2d");
+  if (!ctx)
+    return null;
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  return { canvas, ctx };
+}
+function getCanvasCaptureStream(canvas, fps) {
+  const captureStreamFn = canvas.captureStream;
+  if (typeof captureStreamFn !== "function") {
+    console.error("canvas.captureStream is not supported in this browser");
+    return null;
+  }
+  return captureStreamFn.call(canvas, fps);
+}
+async function paintViewportSnapshot(canvas, ctx) {
+  const dpr = window.devicePixelRatio || 1;
+  const snapshotCanvas = await snapToCanvas(document.documentElement, {
+    filter: shouldIncludeInSnapshot,
+    filterMode: "remove",
+    backgroundColor: "#ffffff",
+    fast: true,
+    dpr
+  });
+  const sourceX = window.scrollX * dpr;
+  const sourceY = window.scrollY * dpr;
+  const sourceWidth = window.innerWidth * dpr;
+  const sourceHeight = window.innerHeight * dpr;
+  const fitScale = Math.min(canvas.width / sourceWidth, canvas.height / sourceHeight);
+  const destWidth = sourceWidth * fitScale;
+  const destHeight = sourceHeight * fitScale;
+  const destX = (canvas.width - destWidth) / 2;
+  const destY = (canvas.height - destHeight) / 2;
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(snapshotCanvas, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
+}
+async function gzipIfBeneficial(snapshotBytes) {
+  if (typeof CompressionStream === "undefined" || snapshotBytes.byteLength <= DOM_SNAPSHOT_GZIP_THRESHOLD_BYTES) {
+    return { bytes: snapshotBytes, compressionFlag: 0 };
+  }
+  try {
+    const blob = new Blob([new Uint8Array(snapshotBytes)]);
+    const stream = blob.stream().pipeThrough(new CompressionStream("gzip"));
+    const compressedBytes = new Uint8Array(await new Response(stream).arrayBuffer());
+    return { bytes: compressedBytes, compressionFlag: 1 };
+  } catch {
+    return { bytes: snapshotBytes, compressionFlag: 0 };
+  }
+}
+async function buildDomSnapshotFrame() {
+  const a11yTree = buildAccessibilityTree();
+  const snapshotJson = JSON.stringify({
+    pageContent: a11yTree.pageContent,
+    viewport: a11yTree.viewport,
+    truncated: a11yTree.truncated,
+    url: window.location.href,
+    title: document.title,
+    capturedAt: new Date().toISOString()
+  });
+  const snapshotBytes = textEncoder2.encode(snapshotJson);
+  const { bytes, compressionFlag } = await gzipIfBeneficial(snapshotBytes);
+  const frame = new Uint8Array(bytes.byteLength + 1);
+  frame[0] = compressionFlag;
+  frame.set(bytes, 1);
+  return frame;
+}
+function reportCaptureError(localParticipant) {
+  try {
+    localParticipant.publishData(textEncoder2.encode(JSON.stringify({ type: "capture_error" })), {
+      reliable: true,
+      topic: DOM_SNAPSHOT_TOPIC
+    }).catch(() => {
+      return;
+    });
+  } catch {}
+}
+async function unpublishAndStopTrack(localParticipant, videoTrack) {
+  try {
+    await localParticipant.unpublishTrack(videoTrack);
+  } catch {}
+  videoTrack.stop();
+}
+function DomCapture() {
+  const { localParticipant } = useLocalParticipant3();
+  const connectionState = useConnectionState2();
+  const didStartRef = useRef2(false);
+  useEffect4(() => {
+    if (didStartRef.current)
+      return;
+    if (connectionState !== ConnectionState2.Connected)
+      return;
+    const canvasAndCtx = createPublishingCanvas();
+    if (!canvasAndCtx)
+      return;
+    const { canvas, ctx } = canvasAndCtx;
+    const canvasStream = getCanvasCaptureStream(canvas, CAPTURE_FPS);
+    if (!canvasStream)
+      return;
+    const videoTrack = canvasStream.getVideoTracks()[0] ?? null;
+    if (!videoTrack)
+      return;
+    videoTrack.contentHint = "text";
+    didStartRef.current = true;
+    let cancelled = false;
+    let snapshotInFlight = false;
+    let a11yPublishInFlight = false;
+    let consecutiveCaptureFailures = 0;
+    localParticipant.setMicrophoneEnabled(true).catch((error) => console.error("Failed to enable microphone:", error));
+    localParticipant.publishTrack(videoTrack, {
+      source: Track2.Source.ScreenShare,
+      videoEncoding: {
+        maxBitrate: CAPTURE_BITRATE,
+        maxFramerate: CAPTURE_FPS
+      },
+      simulcast: false
+    }).catch((error) => {
+      console.error("Failed to publish DOM capture track:", error);
+      for (const track of canvasStream.getTracks())
+        track.stop();
+    });
+    const tickSnapshot = async () => {
+      if (cancelled || snapshotInFlight)
+        return;
+      snapshotInFlight = true;
+      try {
+        await paintViewportSnapshot(canvas, ctx);
+        if (cancelled)
+          return;
+        consecutiveCaptureFailures = 0;
+      } catch {
+        if (cancelled)
+          return;
+        consecutiveCaptureFailures += 1;
+        if (consecutiveCaptureFailures === CONSECUTIVE_FAILURES_BEFORE_REPORT) {
+          reportCaptureError(localParticipant);
+        }
+      } finally {
+        snapshotInFlight = false;
+      }
+    };
+    const tickA11yPublish = async () => {
+      if (cancelled || a11yPublishInFlight)
+        return;
+      a11yPublishInFlight = true;
+      try {
+        const frame = await buildDomSnapshotFrame();
+        if (cancelled)
+          return;
+        await localParticipant.publishData(frame, {
+          reliable: true,
+          topic: DOM_SNAPSHOT_TOPIC
+        });
+      } catch {} finally {
+        a11yPublishInFlight = false;
+      }
+    };
+    const cleanupDomEventListeners = installDomEventListeners(localParticipant, {
+      onTriggerEvent: () => {
+        tickA11yPublish();
+        tickSnapshot();
+      }
+    });
+    tickSnapshot();
+    tickA11yPublish();
+    const snapshotTimer = setInterval(tickSnapshot, SNAPSHOT_INTERVAL_MS);
+    const a11yPublishTimer = setInterval(tickA11yPublish, A11Y_PUBLISH_INTERVAL_MS);
+    return () => {
+      cancelled = true;
+      didStartRef.current = false;
+      clearInterval(snapshotTimer);
+      clearInterval(a11yPublishTimer);
+      cleanupDomEventListeners();
+      unpublishAndStopTrack(localParticipant, videoTrack);
+      for (const track of canvasStream.getTracks())
+        track.stop();
+    };
+  }, [connectionState, localParticipant]);
+  return null;
+}
+
 // src/components/MinimizedBubble.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
@@ -828,9 +1698,10 @@ function Tooltip({ label, children, position = "top", align = "center" }) {
 import { jsx as jsx4, jsxs as jsxs4, Fragment as Fragment2 } from "react/jsx-runtime";
 var BUBBLE_BUTTON = "skippr:flex skippr:size-12 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-[14px] skippr:shadow-[0_4px_16px_rgba(45,43,61,0.45),0_2px_4px_rgba(0,0,0,0.1)] skippr:transition-all skippr:hover:-translate-y-0.5 skippr:active:translate-y-0";
 function ConnectedBubbleContent() {
-  const { expandPanel, disconnect, position } = useLiveAgent();
+  const { expandPanel, disconnect, position, captureMode } = useLiveAgent();
   const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
   const tooltipAlign = position === "right" ? "end" : "start";
+  const showScreenShareToggle = captureMode === "screenshare";
   return /* @__PURE__ */ jsxs4(Fragment2, {
     children: [
       /* @__PURE__ */ jsx4(Tooltip, {
@@ -848,7 +1719,7 @@ function ConnectedBubbleContent() {
           })
         })
       }),
-      /* @__PURE__ */ jsx4(Tooltip, {
+      showScreenShareToggle && /* @__PURE__ */ jsx4(Tooltip, {
         label: isScreenSharing ? "Stop sharing" : "Share screen",
         align: tooltipAlign,
         children: /* @__PURE__ */ jsx4("button", {
@@ -919,7 +1790,7 @@ function WelcomeBubble({
   position,
   onDismiss
 }) {
-  useEffect4(() => {
+  useEffect5(() => {
     const timer = setTimeout(onDismiss, 5000);
     return () => clearTimeout(timer);
   }, [onDismiss]);
@@ -957,13 +1828,13 @@ function MinimizedBubble({
 }
 
 // src/components/Sidebar.tsx
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect12 } from "react";
 
 // src/hooks/useCombinedMessages.ts
 import { useMemo as useMemo4 } from "react";
 
 // src/hooks/useChatMessages.ts
-import { useChat, useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react";
+import { useChat, useLocalParticipant as useLocalParticipant4 } from "@livekit/components-react/hooks";
 import { useMemo as useMemo2 } from "react";
 
 // src/lib/filterSystemMessages.ts
@@ -975,7 +1846,7 @@ function filterSystemMessages(messages) {
 // src/hooks/useChatMessages.ts
 function useChatMessages() {
   const { chatMessages: rawMessages, send, isSending } = useChat();
-  const { localParticipant } = useLocalParticipant3();
+  const { localParticipant } = useLocalParticipant4();
   const localIdentity = localParticipant.identity;
   const chatMessages = useMemo2(() => {
     const sortedMessages = rawMessages.map((msg) => ({
@@ -991,11 +1862,11 @@ function useChatMessages() {
 }
 
 // src/hooks/useStreamingTranscript.ts
-import { useLocalParticipant as useLocalParticipant4, useTranscriptions } from "@livekit/components-react";
+import { useLocalParticipant as useLocalParticipant5, useTranscriptions } from "@livekit/components-react/hooks";
 import { useMemo as useMemo3 } from "react";
 function useStreamingTranscript() {
   const transcriptions = useTranscriptions();
-  const { localParticipant } = useLocalParticipant4();
+  const { localParticipant } = useLocalParticipant5();
   const localIdentity = localParticipant.identity;
   const transcriptMessages = useMemo3(() => filterSystemMessages(transcriptions.filter((stream) => stream.text.trim().length > 0).map((stream) => ({
     id: stream.streamInfo.id,
@@ -1042,12 +1913,12 @@ function useCombinedMessages() {
 import { useCallback as useCallback4 } from "react";
 
 // src/hooks/useAgentState.ts
-import { useRemoteParticipants } from "@livekit/components-react";
-import { useEffect as useEffect5, useState as useState3 } from "react";
+import { useRemoteParticipants } from "@livekit/components-react/hooks";
+import { useEffect as useEffect6, useState as useState3 } from "react";
 function useAgentState(attributeKey, parse, initial) {
   const [value, setValue] = useState3(initial);
   const remoteParticipants = useRemoteParticipants();
-  useEffect5(() => {
+  useEffect6(() => {
     const agentParticipant = remoteParticipants.find((p) => p.attributes?.[attributeKey]);
     if (agentParticipant) {
       const attr = agentParticipant.attributes?.[attributeKey];
@@ -1099,7 +1970,7 @@ function usePhaseUpdates() {
 }
 
 // src/hooks/useSessionRemaining.ts
-import { useEffect as useEffect6, useRef as useRef2, useState as useState4 } from "react";
+import { useEffect as useEffect7, useRef as useRef3, useState as useState4 } from "react";
 
 // src/lib/format.ts
 function formatTime(seconds) {
@@ -1115,9 +1986,9 @@ function parseNumber(s) {
 // src/hooks/useSessionRemaining.ts
 function useSessionRemaining() {
   const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
-  const endTimeRef = useRef2(null);
+  const endTimeRef = useRef3(null);
   const [remaining, setRemaining] = useState4(null);
-  useEffect6(() => {
+  useEffect7(() => {
     if (maxCallDuration === null || endTimeRef.current !== null)
       return;
     const endTime = Date.now() + maxCallDuration * 1000;
@@ -1133,14 +2004,11 @@ function useSessionRemaining() {
   return remaining;
 }
 
-// src/lib/constants.ts
-var SIDEBAR_WIDTH = 360;
-
 // src/hooks/useElapsedSeconds.ts
-import { useEffect as useEffect7, useState as useState5 } from "react";
+import { useEffect as useEffect8, useState as useState5 } from "react";
 function useElapsedSeconds(isRunning) {
   const [elapsed, setElapsed] = useState5(0);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!isRunning) {
       setElapsed(0);
       return;
@@ -1238,7 +2106,7 @@ function LoadingDots({ label }) {
 }
 
 // src/components/LoginFlow.tsx
-import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef3, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect9, useRef as useRef4, useState as useState6 } from "react";
 
 // src/components/ui/button.tsx
 import { forwardRef as forwardRef3 } from "react";
@@ -1366,16 +2234,16 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
 function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
   const [digits, setDigits] = useState6(Array(OTP_LENGTH).fill(""));
   const [resendCooldown, setResendCooldown] = useState6(0);
-  const inputRefs = useRef3([]);
-  const submittedRef = useRef3(false);
-  useEffect8(() => {
+  const inputRefs = useRef4([]);
+  const submittedRef = useRef4(false);
+  useEffect9(() => {
     inputRefs.current[0]?.focus();
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     if (error)
       submittedRef.current = false;
   }, [error]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (resendCooldown <= 0)
       return;
     const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
@@ -1518,7 +2386,7 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
 // src/components/MeetingControls.tsx
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var CONTROL_BUTTON = "skippr:flex skippr:size-11 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-full skippr:transition-colors";
-function MeetingControls({ onHangUp }) {
+function MeetingControls({ onHangUp, showScreenShareToggle = true }) {
   const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
   return /* @__PURE__ */ jsxs8("div", {
     className: "skippr:shrink-0 skippr:border-t skippr:border-border skippr:bg-background skippr:px-4 skippr:py-4",
@@ -1537,7 +2405,7 @@ function MeetingControls({ onHangUp }) {
               className: "skippr:size-5"
             })
           }),
-          /* @__PURE__ */ jsx9("button", {
+          showScreenShareToggle && /* @__PURE__ */ jsx9("button", {
             type: "button",
             onClick: toggleScreenShare,
             "aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
@@ -1568,17 +2436,17 @@ function MeetingControls({ onHangUp }) {
 }
 
 // src/components/MessageList.tsx
-import { useEffect as useEffect10, useRef as useRef5 } from "react";
+import { useEffect as useEffect11, useRef as useRef6 } from "react";
 
 // src/components/ChatInput.tsx
-import { useEffect as useEffect9, useRef as useRef4, useState as useState7 } from "react";
+import { useEffect as useEffect10, useRef as useRef5, useState as useState7 } from "react";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var MAX_INPUT_HEIGHT = 60;
 function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
   const [inputText, setInputText] = useState7("");
-  const textareaRef = useRef4(null);
+  const textareaRef = useRef5(null);
   const canSend = inputText.trim().length > 0 && !isSendingChat;
-  useEffect9(() => {
+  useEffect10(() => {
     if (autoFocus)
       textareaRef.current?.focus();
   }, [autoFocus]);
@@ -1723,9 +2591,9 @@ function MessageList({
   isSendingChat,
   autoFocus = false
 }) {
-  const scrollRef = useRef5(null);
+  const scrollRef = useRef6(null);
   const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
-  useEffect10(() => {
+  useEffect11(() => {
     scrollRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages.length, lastMessage?.content]);
   const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
@@ -1878,11 +2746,12 @@ function Sidebar({
     isAuthSubmitting,
     sidebarTab: activeTab,
     setSidebarTab: setActiveTab,
-    autoFocusChat
+    autoFocusChat,
+    captureMode
   } = useLiveAgent();
   const isFloating = variant === "floating";
   const isSidebar = variant === "sidebar";
-  useEffect11(() => {
+  useEffect12(() => {
     if (!isSidebar)
       return;
     const prop = position === "right" ? "marginRight" : "marginLeft";
@@ -1921,7 +2790,8 @@ function Sidebar({
         onTabChange: setActiveTab,
         hideControls,
         startSessionLabel,
-        autoFocusChat
+        autoFocusChat,
+        showScreenShareToggle: captureMode === "screenshare"
       })
     ]
   });
@@ -1936,7 +2806,8 @@ function AuthenticatedContent({
   onTabChange,
   hideControls,
   startSessionLabel,
-  autoFocusChat
+  autoFocusChat,
+  showScreenShareToggle
 }) {
   return /* @__PURE__ */ jsxs15(Fragment3, {
     children: [
@@ -1990,7 +2861,8 @@ function AuthenticatedContent({
         }, `${activeTab}-empty`)
       }),
       isConnected && !hideControls && /* @__PURE__ */ jsx17(MeetingControls, {
-        onHangUp: onDisconnect
+        onHangUp: onDisconnect,
+        showScreenShareToggle
       })
     ]
   });
@@ -2066,6 +2938,7 @@ function LiveAgent({
   startSessionLabel = "Talk to Skippr",
   autoFocusChat = true,
   showAgentStateBanner = true,
+  captureMode = "screenshare",
   children
 }) {
   const auth = useAuth({ appKey });
@@ -2081,6 +2954,7 @@ function LiveAgent({
     pendingScreenStream
   } = useSession({
     agentId,
+    captureMode,
     authToken: effectiveAuthToken,
     appKey,
     userToken
@@ -2119,8 +2993,8 @@ function LiveAgent({
   }, [minimizable]);
   const isConnected = connection !== null;
   const isAuthenticated = !!userToken || !!authTokenProp || auth.isAuthenticated;
-  const prevConnectionRef = useRef6(connection);
-  useEffect12(() => {
+  const prevConnectionRef = useRef7(connection);
+  useEffect13(() => {
     const connectionChanged = prevConnectionRef.current !== connection;
     prevConnectionRef.current = connection;
     if (connectionChanged && minimizable) {
@@ -2157,7 +3031,8 @@ function LiveAgent({
     isAuthSubmitting: auth.isSubmitting,
     sidebarTab,
     setSidebarTab,
-    autoFocusChat
+    autoFocusChat,
+    captureMode
   }), [
     connection,
     shouldConnect,
@@ -2186,7 +3061,8 @@ function LiveAgent({
     auth.logout,
     auth.isSubmitting,
     sidebarTab,
-    autoFocusChat
+    autoFocusChat,
+    captureMode
   ]);
   return /* @__PURE__ */ jsx19(LiveAgentContext.Provider, {
     value: ctx,
@@ -2198,20 +3074,26 @@ function LiveAgent({
       onDisconnected: disconnect,
       children: [
         connection && /* @__PURE__ */ jsx19(RoomAudioRenderer, {}),
-        showAgentStateBanner && /* @__PURE__ */ jsx19(AgentStateBanner, {}),
-        connection && /* @__PURE__ */ jsx19(AutoStartMedia, {
+        connection && captureMode === "screenshare" && /* @__PURE__ */ jsx19(AutoStartMedia, {
           pendingScreenStream
         }),
-        isMinimized && /* @__PURE__ */ jsx19(MinimizedBubble, {
-          welcomeMessage,
-          welcomeDismissed,
-          onDismissWelcome: dismissWelcome
-        }),
-        /* @__PURE__ */ jsx19(SidebarTrigger, {}),
-        /* @__PURE__ */ jsx19(Sidebar, {
-          hideControls,
-          hideHeader,
-          startSessionLabel
+        connection && captureMode === "auto" && /* @__PURE__ */ jsx19(DomCapture, {}),
+        /* @__PURE__ */ jsxs16("div", {
+          id: WIDGET_ROOT_ID,
+          children: [
+            showAgentStateBanner && /* @__PURE__ */ jsx19(AgentStateBanner, {}),
+            isMinimized && /* @__PURE__ */ jsx19(MinimizedBubble, {
+              welcomeMessage,
+              welcomeDismissed,
+              onDismissWelcome: dismissWelcome
+            }),
+            /* @__PURE__ */ jsx19(SidebarTrigger, {}),
+            /* @__PURE__ */ jsx19(Sidebar, {
+              hideControls,
+              hideHeader,
+              startSessionLabel
+            })
+          ]
         }),
         children
       ]
@@ -2219,9 +3101,9 @@ function LiveAgent({
   });
 }
 // src/hooks/useIsLocalSpeaking.ts
-import { useIsSpeaking, useLocalParticipant as useLocalParticipant5 } from "@livekit/components-react";
+import { useIsSpeaking, useLocalParticipant as useLocalParticipant6 } from "@livekit/components-react/hooks";
 function useIsLocalSpeaking() {
-  const { localParticipant } = useLocalParticipant5();
+  const { localParticipant } = useLocalParticipant6();
   return useIsSpeaking(localParticipant);
 }
 export {