@skippr/live-agent-sdk 0.93.0 → 0.95.0

package/dist/esm/lib-exports.js

@@ -8,7 +8,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 
 // src/components/LiveAgent.tsx
 import { LiveKitRoom, RoomAudioRenderer } from "@livekit/components-react";
-import { useCallback as useCallback32, useEffect as useEffect49, useMemo as useMemo7, useRef as useRef42, useState as useState39 } from "react";
+import { Fragment as Fragment7, useCallback as useCallback32, useEffect as useEffect49, useMemo as useMemo8, useRef as useRef42, useState as useState39 } from "react";
 // ../../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";
 
@@ -2944,6 +2944,7 @@ import { useEffect as useEffect10, useState as useState8 } from "react";
 var targetListeners = new Set;
 var currentTarget = null;
 var currentTargetOwner = null;
+var currentTargetSetAt = 0;
 function notifyTargetListeners() {
   for (const listener of targetListeners)
     listener(currentTarget);
@@ -2951,6 +2952,7 @@ function notifyTargetListeners() {
 function setCursorTarget(owner, target) {
   currentTarget = target;
   currentTargetOwner = owner;
+  currentTargetSetAt = Date.now();
   notifyTargetListeners();
 }
 function clearCursorTarget(owner) {
@@ -2960,6 +2962,14 @@ function clearCursorTarget(owner) {
   currentTargetOwner = null;
   notifyTargetListeners();
 }
+function getCursorTarget() {
+  return currentTarget;
+}
+function cursorTargetElapsedMs() {
+  if (!currentTarget)
+    return 0;
+  return Date.now() - currentTargetSetAt;
+}
 function subscribeCursorTarget(listener) {
   targetListeners.add(listener);
   listener(currentTarget);
@@ -4857,7 +4867,7 @@ function AutoStartMedia({
 // src/components/DomCapture.tsx
 import { useConnectionState as useConnectionState2, useLocalParticipant as useLocalParticipant5 } from "@livekit/components-react/hooks";
 import { ConnectionState as ConnectionState2, ScreenSharePresets as ScreenSharePresets2, Track as Track3 } from "livekit-client";
-import { useEffect as useEffect22, useRef as useRef17 } from "react";
+import { useContext as useContext9, useEffect as useEffect22, useMemo as useMemo4, useRef as useRef17 } from "react";
 
 // src/capture/a11yUtils.ts
 var ROLE_BY_TAG = {
@@ -5635,6 +5645,137 @@ function installDomEventListeners(localParticipant, options = {}) {
   };
 }
 
+// src/lib/brandForeground.ts
+var DARK_FOREGROUND = "#2d2b3d";
+var LIGHT_FOREGROUND = "#ffffff";
+var LUMINANCE_THRESHOLD = 0.179;
+var HEX_COLOR = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+function isHexColor(value) {
+  return HEX_COLOR.test(value);
+}
+function linearChannel(hex, offset) {
+  const channel = Number.parseInt(hex.slice(offset, offset + 2), 16) / 255;
+  return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+}
+function brandForeground(accentColor) {
+  const hex = accentColor.replace("#", "");
+  const fullHex = hex.length === 3 ? hex.split("").map((char) => char + char).join("") : hex;
+  const luminance = 0.2126 * linearChannel(fullHex, 0) + 0.7152 * linearChannel(fullHex, 2) + 0.0722 * linearChannel(fullHex, 4);
+  return luminance > LUMINANCE_THRESHOLD ? DARK_FOREGROUND : LIGHT_FOREGROUND;
+}
+
+// src/capture/paintCursorOverlay.ts
+var DEFAULT_BRAND_COLOR = "#2bc0ae";
+var DEFAULT_BRAND_FOREGROUND = "#ffffff";
+var RING_INK_IN_DURATION_MS = 900;
+var POINTER_SIZE_PX = 16;
+var LABEL_FONT_SIZE_PX = 11;
+var LABEL_PADDING_X_PX = 10;
+var LABEL_PADDING_Y_PX = 5;
+var LABEL_GAP_BELOW_RING_PX = 6;
+var GESTURE_EDGE_INSET_PX = 96;
+var GESTURE_LABEL_GAP_PX = 18;
+var DEFAULT_BRAND_PALETTE = {
+  color: DEFAULT_BRAND_COLOR,
+  foreground: DEFAULT_BRAND_FOREGROUND
+};
+function resolveBrandPalette(accentColor) {
+  if (!accentColor || !isHexColor(accentColor))
+    return DEFAULT_BRAND_PALETTE;
+  return { color: accentColor, foreground: brandForeground(accentColor) };
+}
+function easeInOut2(progress) {
+  return progress < 0.5 ? 2 * progress * progress : 1 - (-2 * progress + 2) ** 2 / 2;
+}
+function tracePillPath(ctx, x, y, width, height, radius) {
+  const clampedRadius = Math.min(radius, width / 2, height / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + clampedRadius, y);
+  ctx.arcTo(x + width, y, x + width, y + height, clampedRadius);
+  ctx.arcTo(x + width, y + height, x, y + height, clampedRadius);
+  ctx.arcTo(x, y + height, x, y, clampedRadius);
+  ctx.arcTo(x, y, x + width, y, clampedRadius);
+  ctx.closePath();
+}
+function ringPerimeter(rect) {
+  const width = rect.width + RING_PAD * 2 - 2;
+  const height = rect.height + RING_PAD * 2 - 2;
+  const radius = ringRadius(rect);
+  return 2 * (width - 2 * radius) + 2 * (height - 2 * radius) + 2 * Math.PI * radius;
+}
+function drawRingInkingIn(ctx, rect, transform, elapsedMs, brand) {
+  const x = (rect.left - RING_PAD) * transform.scale + transform.offsetX;
+  const y = (rect.top - RING_PAD) * transform.scale + transform.offsetY;
+  tracePillPath(ctx, x, y, (rect.width + RING_PAD * 2) * transform.scale, (rect.height + RING_PAD * 2) * transform.scale, ringRadius(rect) * transform.scale);
+  const dashLength = ringPerimeter(rect) * transform.scale;
+  const inkedFraction = easeInOut2(Math.min(1, elapsedMs / RING_INK_IN_DURATION_MS));
+  ctx.lineWidth = 2 * transform.scale;
+  ctx.strokeStyle = brand.color;
+  ctx.setLineDash([dashLength]);
+  ctx.lineDashOffset = dashLength * (1 - inkedFraction);
+  ctx.stroke();
+  ctx.setLineDash([]);
+  ctx.lineDashOffset = 0;
+}
+function drawLabelPill(ctx, label, centerX, topY, transform, brand) {
+  const fontSize = LABEL_FONT_SIZE_PX * transform.scale;
+  const paddingX = LABEL_PADDING_X_PX * transform.scale;
+  const paddingY = LABEL_PADDING_Y_PX * transform.scale;
+  ctx.font = `500 ${fontSize}px system-ui, sans-serif`;
+  const pillWidth = ctx.measureText(label).width + paddingX * 2;
+  const pillHeight = fontSize + paddingY * 2;
+  tracePillPath(ctx, centerX - pillWidth / 2, topY, pillWidth, pillHeight, pillHeight / 2);
+  ctx.fillStyle = brand.color;
+  ctx.fill();
+  ctx.fillStyle = brand.foreground;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(label, centerX, topY + pillHeight / 2);
+}
+function drawPointer(ctx, x, y, scale, brand) {
+  const size = POINTER_SIZE_PX * scale;
+  ctx.beginPath();
+  ctx.moveTo(x, y);
+  ctx.lineTo(x, y + size);
+  ctx.lineTo(x + size * 0.28, y + size * 0.72);
+  ctx.lineTo(x + size * 0.62, y + size * 0.66);
+  ctx.closePath();
+  ctx.fillStyle = brand.color;
+  ctx.fill();
+  ctx.lineWidth = 1 * scale;
+  ctx.strokeStyle = "#ffffff";
+  ctx.stroke();
+}
+function paintCursorOverlay(ctx, transform, brand = DEFAULT_BRAND_PALETTE) {
+  const target = getCursorTarget();
+  if (!target)
+    return;
+  const elapsedMs = cursorTargetElapsedMs();
+  ctx.save();
+  if (target.kind === "gesture" && target.gesture) {
+    const pointerX = window.innerWidth / 2 * transform.scale + transform.offsetX;
+    const edgeY = target.gesture.direction === "down" ? window.innerHeight - GESTURE_EDGE_INSET_PX : GESTURE_EDGE_INSET_PX;
+    const pointerY = edgeY * transform.scale + transform.offsetY;
+    drawPointer(ctx, pointerX, pointerY, transform.scale, brand);
+    drawLabelPill(ctx, target.label, pointerX, pointerY + GESTURE_LABEL_GAP_PX * transform.scale, transform, brand);
+    ctx.restore();
+    return;
+  }
+  const element = target.element;
+  if (!element?.isConnected) {
+    ctx.restore();
+    return;
+  }
+  const rect = getRectInTopViewport(element);
+  drawRingInkingIn(ctx, rect, transform, elapsedMs, brand);
+  const ringCenterX = (rect.left + rect.width / 2) * transform.scale + transform.offsetX;
+  const labelTopY = (rect.bottom + RING_PAD + LABEL_GAP_BELOW_RING_PX) * transform.scale + transform.offsetY;
+  drawLabelPill(ctx, target.label, ringCenterX, labelTopY, transform, brand);
+  const ringCenterY = (rect.top + rect.height / 2) * transform.scale + transform.offsetY;
+  drawPointer(ctx, ringCenterX, ringCenterY, transform.scale, brand);
+  ctx.restore();
+}
+
 // src/capture/snapdom.ts
 var cachedSnapdomModule = null;
 function loadSnapdom() {
@@ -5687,7 +5828,7 @@ function getCanvasCaptureStream(canvas, fps) {
   }
   return captureStreamFn.call(canvas, fps);
 }
-async function paintViewportSnapshot(canvas, ctx, isStillWanted) {
+async function rasterizeViewportToPageLayer(width, height) {
   const dpr = window.devicePixelRatio || 1;
   const snapshotCanvas = await snapToCanvas(document.documentElement, {
     filter: shouldIncludeInSnapshot,
@@ -5696,20 +5837,36 @@ async function paintViewportSnapshot(canvas, ctx, isStillWanted) {
     fast: false,
     dpr
   });
-  if (!isStillWanted())
-    return;
   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 fitScale = Math.min(width / sourceWidth, height / sourceHeight);
   const destWidth = sourceWidth * fitScale;
   const destHeight = sourceHeight * fitScale;
-  const destX = (canvas.width - destWidth) / 2;
-  const destY = (canvas.height - destHeight) / 2;
+  const destX = (width - destWidth) / 2;
+  const destY = (height - destHeight) / 2;
+  const layer = document.createElement("canvas");
+  layer.width = width;
+  layer.height = height;
+  const layerCtx = layer.getContext("2d");
+  if (!layerCtx)
+    throw new Error("Failed to get 2D context for page layer");
+  layerCtx.fillStyle = "#ffffff";
+  layerCtx.fillRect(0, 0, width, height);
+  layerCtx.drawImage(snapshotCanvas, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
+  return {
+    canvas: layer,
+    viewportToCanvas: { scale: dpr * fitScale, offsetX: destX, offsetY: destY }
+  };
+}
+function compositePageAndCursorOverlay(ctx, canvas, cachedPage, brand) {
   ctx.fillStyle = "#ffffff";
   ctx.fillRect(0, 0, canvas.width, canvas.height);
-  ctx.drawImage(snapshotCanvas, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
+  if (!cachedPage)
+    return;
+  ctx.drawImage(cachedPage.canvas, 0, 0);
+  paintCursorOverlay(ctx, cachedPage.viewportToCanvas, brand);
 }
 async function gzipIfBeneficial(snapshotBytes) {
   if (typeof CompressionStream === "undefined" || snapshotBytes.byteLength <= DOM_SNAPSHOT_GZIP_THRESHOLD_BYTES) {
@@ -5761,6 +5918,10 @@ function DomCapture({ pushOrTapMicMode = false }) {
   const { localParticipant } = useLocalParticipant5();
   const connectionState = useConnectionState2();
   const { isHeld } = useSessionHoldContext();
+  const accentColor = useContext9(LiveAgentContext)?.appearance?.accentColor ?? null;
+  const brand = useMemo4(() => resolveBrandPalette(accentColor), [accentColor]);
+  const brandRef = useRef17(brand);
+  brandRef.current = brand;
   const didStartRef = useRef17(false);
   const pausedRef = useRef17(false);
   const freezeCaptureRef = useRef17(null);
@@ -5787,6 +5948,7 @@ function DomCapture({ pushOrTapMicMode = false }) {
     let a11yPublishInFlight = false;
     let a11yPublishPending = false;
     let consecutiveCaptureFailures = 0;
+    let cachedPage = null;
     if (!pushOrTapMicMode && !localParticipant.isMicrophoneEnabled) {
       localParticipant.setMicrophoneEnabled(true).catch((error) => console.error("Failed to enable microphone:", error));
     }
@@ -5802,14 +5964,15 @@ function DomCapture({ pushOrTapMicMode = false }) {
       for (const track of canvasStream.getTracks())
         track.stop();
     });
-    const tickSnapshot = async () => {
+    const refreshPageAndComposite = async () => {
       if (cancelled || snapshotInFlight || pausedRef.current)
         return;
       snapshotInFlight = true;
       try {
-        await paintViewportSnapshot(canvas, ctx, () => !cancelled && !pausedRef.current);
-        if (cancelled)
+        cachedPage = await rasterizeViewportToPageLayer(canvas.width, canvas.height);
+        if (cancelled || pausedRef.current)
           return;
+        compositePageAndCursorOverlay(ctx, canvas, cachedPage, brandRef.current);
         consecutiveCaptureFailures = 0;
       } catch {
         if (cancelled)
@@ -5822,6 +5985,37 @@ function DomCapture({ pushOrTapMicMode = false }) {
         snapshotInFlight = false;
       }
     };
+    let overlayAnimationFrame = null;
+    const animateOverlayOverCachedPage = () => {
+      if (cancelled)
+        return;
+      if (!pausedRef.current)
+        compositePageAndCursorOverlay(ctx, canvas, cachedPage, brandRef.current);
+      if (cursorTargetElapsedMs() >= RING_INK_IN_DURATION_MS) {
+        overlayAnimationFrame = null;
+        return;
+      }
+      overlayAnimationFrame = requestAnimationFrame(animateOverlayOverCachedPage);
+    };
+    const startOverlayAnimation = () => {
+      if (overlayAnimationFrame === null) {
+        overlayAnimationFrame = requestAnimationFrame(animateOverlayOverCachedPage);
+      }
+    };
+    const stopOverlayAnimation = () => {
+      if (overlayAnimationFrame !== null) {
+        cancelAnimationFrame(overlayAnimationFrame);
+        overlayAnimationFrame = null;
+      }
+      if (!pausedRef.current)
+        compositePageAndCursorOverlay(ctx, canvas, cachedPage, brandRef.current);
+    };
+    const cleanupCursorSubscription = subscribeCursorTarget((target) => {
+      if (target)
+        startOverlayAnimation();
+      else
+        stopOverlayAnimation();
+    });
     const tickA11yPublish = async () => {
       if (cancelled || pausedRef.current)
         return;
@@ -5849,19 +6043,19 @@ function DomCapture({ pushOrTapMicMode = false }) {
     const cleanupDomEventListeners = installDomEventListeners(localParticipant, {
       onTriggerEvent: () => {
         tickA11yPublish();
-        tickSnapshot();
+        refreshPageAndComposite();
       }
     });
     const cleanupSnapshotRequest = onSnapshotRequest(() => {
       tickA11yPublish();
-      tickSnapshot();
+      refreshPageAndComposite();
     });
     let snapshotTimer = null;
     const scheduleNextSnapshot = (delay) => {
       if (cancelled)
         return;
       snapshotTimer = setTimeout(async () => {
-        await tickSnapshot();
+        await refreshPageAndComposite();
         scheduleNextSnapshot(SNAPSHOT_INTERVAL_MS);
       }, delay);
     };
@@ -5875,7 +6069,7 @@ function DomCapture({ pushOrTapMicMode = false }) {
     resumeCaptureRef.current = () => {
       pausedRef.current = false;
       tickA11yPublish();
-      tickSnapshot();
+      refreshPageAndComposite();
     };
     return () => {
       cancelled = true;
@@ -5885,6 +6079,9 @@ function DomCapture({ pushOrTapMicMode = false }) {
       if (snapshotTimer)
         clearTimeout(snapshotTimer);
       clearInterval(a11yPublishTimer);
+      if (overlayAnimationFrame !== null)
+        cancelAnimationFrame(overlayAnimationFrame);
+      cleanupCursorSubscription();
       cleanupDomEventListeners();
       cleanupSnapshotRequest();
       unpublishAndStopTrack(localParticipant, videoTrack);
@@ -6011,7 +6208,7 @@ function HighlightOverlay() {
 }
 
 // src/components/MinimizedBubble.tsx
-import { useContext as useContext9, useEffect as useEffect25, useRef as useRef20, useState as useState18 } from "react";
+import { useContext as useContext10, useEffect as useEffect25, useRef as useRef20, useState as useState18 } from "react";
 
 // src/hooks/useLauncherDrag.ts
 import { useEffect as useEffect24, useRef as useRef19 } from "react";
@@ -6381,7 +6578,7 @@ function MinimizedBubble({
   welcomeDismissed,
   onDismissWelcome
 }) {
-  const ctx = useContext9(LiveAgentContext);
+  const ctx = useContext10(LiveAgentContext);
   if (!ctx) {
     throw new Error("MinimizedBubble must be used within a <LiveAgent> provider");
   }
@@ -6877,7 +7074,7 @@ function PageActionHandler() {
 }
 
 // src/components/SessionControlBar.tsx
-import { useCallback as useCallback20, useContext as useContext10, useEffect as useEffect30, useState as useState21 } from "react";
+import { useCallback as useCallback20, useContext as useContext11, useEffect as useEffect30, useState as useState21 } from "react";
 
 // src/hooks/useActionControl.ts
 import { useLocalParticipant as useLocalParticipant6 } from "@livekit/components-react/hooks";
@@ -7318,7 +7515,7 @@ function SessionControlBar() {
     variant,
     agentControls
   } = useLiveAgent();
-  const internalCtx = useContext10(LiveAgentContext);
+  const internalCtx = useContext11(LiveAgentContext);
   if (!internalCtx) {
     throw new Error("SessionControlBar must be used within a <LiveAgent> provider");
   }
@@ -7626,27 +7823,6 @@ function SessionControlBar() {
 // src/components/ShadowHost.tsx
 import { useLayoutEffect as useLayoutEffect2, useRef as useRef25, useState as useState22 } from "react";
 import { createPortal } from "react-dom";
-
-// src/lib/brandForeground.ts
-var DARK_FOREGROUND = "#2d2b3d";
-var LIGHT_FOREGROUND = "#ffffff";
-var LUMINANCE_THRESHOLD = 0.179;
-var HEX_COLOR = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
-function isHexColor(value) {
-  return HEX_COLOR.test(value);
-}
-function linearChannel(hex, offset) {
-  const channel = Number.parseInt(hex.slice(offset, offset + 2), 16) / 255;
-  return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
-}
-function brandForeground(accentColor) {
-  const hex = accentColor.replace("#", "");
-  const fullHex = hex.length === 3 ? hex.split("").map((char) => char + char).join("") : hex;
-  const luminance = 0.2126 * linearChannel(fullHex, 0) + 0.7152 * linearChannel(fullHex, 2) + 0.0722 * linearChannel(fullHex, 4);
-  return luminance > LUMINANCE_THRESHOLD ? DARK_FOREGROUND : LIGHT_FOREGROUND;
-}
-
-// src/components/ShadowHost.tsx
 import { jsx as jsx25, Fragment as Fragment3 } from "react/jsx-runtime";
 var PROPERTIES_STYLE_ID = "skippr-tw-properties";
 var PROPERTY_RULE = /@property\s+[^{]+\{[^}]*\}/g;
@@ -7698,14 +7874,14 @@ function ShadowHost({
 }
 
 // src/components/Sidebar.tsx
-import { useContext as useContext17, useEffect as useEffect36 } from "react";
+import { useContext as useContext18, useEffect as useEffect36 } from "react";
 
 // src/hooks/useCombinedMessages.ts
-import { useContext as useContext11, useMemo as useMemo6 } from "react";
+import { useContext as useContext12, useMemo as useMemo7 } from "react";
 
 // src/hooks/useChatMessages.ts
 import { useChat, useLocalParticipant as useLocalParticipant9 } from "@livekit/components-react/hooks";
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 
 // src/lib/filterSystemMessages.ts
 var SYSTEM_MESSAGE_PATTERN = /^\[\w+\]$/;
@@ -7718,7 +7894,7 @@ function useChatMessages() {
   const { chatMessages: rawMessages, send, isSending } = useChat();
   const { localParticipant } = useLocalParticipant9();
   const localIdentity = localParticipant.identity;
-  const chatMessages = useMemo4(() => {
+  const chatMessages = useMemo5(() => {
     const sortedMessages = rawMessages.map((msg) => ({
       id: msg.id,
       role: msg.from?.identity === localIdentity ? "user" : "assistant",
@@ -7733,7 +7909,7 @@ function useChatMessages() {
 
 // src/hooks/useStreamingTranscript.ts
 import { useLocalParticipant as useLocalParticipant10 } from "@livekit/components-react/hooks";
-import { useMemo as useMemo5, useRef as useRef26 } from "react";
+import { useMemo as useMemo6, useRef as useRef26 } from "react";
 function useStreamingTranscript() {
   const transcriptions = useSharedTranscriptions();
   const { localParticipant } = useLocalParticipant10();
@@ -7745,7 +7921,7 @@ function useStreamingTranscript() {
     priorUserStreamIdsRef.current = new Set(transcriptions.filter((stream) => stream.participantInfo.identity === localIdentity).map((stream) => stream.streamInfo.id));
   }
   wasCapturingSpeechRef.current = isCapturingSpeech;
-  const transcriptMessages = useMemo5(() => filterSystemMessages(transcriptions.filter((stream) => stream.text.trim().length > 0).filter((stream) => {
+  const transcriptMessages = useMemo6(() => filterSystemMessages(transcriptions.filter((stream) => stream.text.trim().length > 0).filter((stream) => {
     if (!isCapturingSpeech)
       return true;
     const isUser = stream.participantInfo.identity === localIdentity;
@@ -7783,15 +7959,15 @@ function useCombinedMessages() {
   const { transcriptMessages } = useStreamingTranscript();
   const { chatMessages, sendChatMessage, isSendingChat } = useChatMessages();
   const { state: agentState } = useAgentVoiceState();
-  const historyMessages = useContext11(LiveAgentContext)?.historyMessages ?? [];
-  const liveMessages = useMemo6(() => {
+  const historyMessages = useContext12(LiveAgentContext)?.historyMessages ?? [];
+  const liveMessages = useMemo7(() => {
     if (chatMessages.length === 0)
       return transcriptMessages;
     if (transcriptMessages.length === 0)
       return chatMessages;
     return mergeChatsIntoTranscripts(transcriptMessages, chatMessages);
   }, [transcriptMessages, chatMessages]);
-  const allMessages = useMemo6(() => {
+  const allMessages = useMemo7(() => {
     if (historyMessages.length === 0)
       return liveMessages;
     const seenIds = new Set(liveMessages.map((message) => message.id));
@@ -7831,7 +8007,7 @@ function useLinkCard() {
 }
 
 // src/hooks/usePhaseUpdates.ts
-import { useCallback as useCallback22, useContext as useContext12, useEffect as useEffect31 } from "react";
+import { useCallback as useCallback22, useContext as useContext13, useEffect as useEffect31 } from "react";
 function parsePhases(json) {
   try {
     const data = JSON.parse(json);
@@ -7844,7 +8020,7 @@ function parsePhases(json) {
 function usePhaseUpdates() {
   const parse = useCallback22(parsePhases, []);
   const livePhases = useAgentState("phases", parse, []);
-  const ctx = useContext12(LiveAgentContext);
+  const ctx = useContext13(LiveAgentContext);
   useEffect31(() => {
     if (livePhases.length > 0)
       ctx?.setPhasesSnapshot(livePhases);
@@ -7889,14 +8065,14 @@ function useSessionRemaining() {
 }
 
 // src/components/ChatHeader.tsx
-import { useContext as useContext14, useRef as useRef29 } from "react";
+import { useContext as useContext15, useRef as useRef29 } from "react";
 
 // src/hooks/useTextMode.ts
 import { useLocalParticipant as useLocalParticipant11 } from "@livekit/components-react/hooks";
-import { useCallback as useCallback23, useContext as useContext13, useRef as useRef28 } from "react";
+import { useCallback as useCallback23, useContext as useContext14, useRef as useRef28 } from "react";
 var textEncoder6 = new TextEncoder;
 function useTextMode() {
-  const ctx = useContext13(LiveAgentContext);
+  const ctx = useContext14(LiveAgentContext);
   if (!ctx) {
     throw new Error("useTextMode must be used within a <LiveAgent> provider");
   }
@@ -7929,7 +8105,7 @@ import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 var TABS_PILL_BASE = "skippr:cursor-pointer skippr:rounded-full skippr:border-none skippr:bg-transparent skippr:px-[9px] skippr:py-[3px] skippr:text-[11.5px] skippr:font-semibold skippr:text-[#8b877f] skippr:transition-colors";
 var TABS_PILL_ACTIVE = "skippr:bg-white skippr:text-[#2D2D3F] skippr:shadow-[0_1px_2px_rgba(45,45,63,0.08)]";
 function ChatHeader() {
-  const ctx = useContext14(LiveAgentContext);
+  const ctx = useContext15(LiveAgentContext);
   if (!ctx) {
     throw new Error("ChatHeader must be used within a <LiveAgent> provider");
   }
@@ -8060,11 +8236,11 @@ function LoadingDots({ label }) {
 import { useCallback as useCallback25, useLayoutEffect as useLayoutEffect3, useRef as useRef32, useState as useState27 } from "react";
 
 // src/components/ChatInput.tsx
-import { useContext as useContext15, useEffect as useEffect33, useRef as useRef30, useState as useState24 } from "react";
+import { useContext as useContext16, useEffect as useEffect33, useRef as useRef30, useState as useState24 } from "react";
 import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 var MAX_INPUT_HEIGHT = 60;
 function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
-  const ctx = useContext15(LiveAgentContext);
+  const ctx = useContext16(LiveAgentContext);
   const reportChatActivity = ctx?.reportChatActivity;
   const isPanelOpen = ctx?.isPanelOpen;
   const [localDraft, setLocalDraft] = useState24("");
@@ -8517,10 +8693,10 @@ function MessageList({
 }
 
 // src/components/SessionAgenda.tsx
-import { useContext as useContext16 } from "react";
+import { useContext as useContext17 } from "react";
 import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
 function SessionAgenda({ phases, hasStarted }) {
-  const ctx = useContext16(LiveAgentContext);
+  const ctx = useContext17(LiveAgentContext);
   const title = ctx?.activeModule?.name ?? "Agenda";
   if (phases.length === 0 || !hasStarted) {
     return /* @__PURE__ */ jsx34("div", {
@@ -8649,7 +8825,7 @@ function Sidebar({
     agentMode,
     displayModules
   } = useLiveAgent();
-  const internalCtx = useContext17(LiveAgentContext);
+  const internalCtx = useContext18(LiveAgentContext);
   const defaultAgentId = internalCtx?.defaultAgentId ?? null;
   const startDefaultSession = internalCtx?.startDefaultSession ?? (() => {});
   const talkDisabled = !(internalCtx?.hasResolvedModules ?? false);
@@ -8930,7 +9106,7 @@ function ConnectedBody({
 }
 
 // src/components/SidebarTrigger.tsx
-import { useContext as useContext18 } from "react";
+import { useContext as useContext19 } from "react";
 
 // src/components/Logo.tsx
 import { jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
@@ -8982,7 +9158,7 @@ function SidebarTrigger() {
     isStarting,
     isPausing
   } = useLiveAgent();
-  const internalCtx = useContext18(LiveAgentContext);
+  const internalCtx = useContext19(LiveAgentContext);
   const launcherBottomPx = internalCtx?.launcherBottomPx ?? DEFAULT_LAUNCHER_BOTTOM_PX;
   const popsDown = internalCtx?.popsDown ?? false;
   const logoUrl = internalCtx?.appearance?.logoUrl ?? null;
@@ -9009,15 +9185,15 @@ function SidebarTrigger() {
 }
 
 // src/components/VoiceBar.tsx
-import { useCallback as useCallback31, useContext as useContext23, useState as useState38 } from "react";
+import { useCallback as useCallback31, useContext as useContext24, useState as useState38 } from "react";
 
 // src/hooks/useBarNotifications.ts
-import { useContext as useContext20 } from "react";
+import { useContext as useContext21 } from "react";
 
 // src/hooks/useAdoptionTips.ts
-import { useContext as useContext19 } from "react";
+import { useContext as useContext20 } from "react";
 function useAdoptionTips() {
-  const ctx = useContext19(LiveAgentContext);
+  const ctx = useContext20(LiveAgentContext);
   if (!ctx) {
     throw new Error("useAdoptionTips must be used within a <LiveAgent> provider");
   }
@@ -9039,7 +9215,7 @@ function useAdoptionTips() {
 
 // src/hooks/useBarNotifications.ts
 function useBarNotifications() {
-  const ctx = useContext20(LiveAgentContext);
+  const ctx = useContext21(LiveAgentContext);
   if (!ctx) {
     throw new Error("useBarNotifications must be used within a <LiveAgent> provider");
   }
@@ -9082,7 +9258,7 @@ function useBarNotifications() {
 
 // src/components/VoiceBarFrame.tsx
 import { useIsSpeaking, useLocalParticipant as useLocalParticipant13 } from "@livekit/components-react/hooks";
-import { useCallback as useCallback29, useContext as useContext22, useEffect as useEffect46, useRef as useRef39, useState as useState35 } from "react";
+import { useCallback as useCallback29, useContext as useContext23, useEffect as useEffect46, useRef as useRef39, useState as useState35 } from "react";
 
 // src/hooks/useHighlightControl.ts
 import { useLocalParticipant as useLocalParticipant12 } from "@livekit/components-react/hooks";
@@ -9356,7 +9532,7 @@ function useVoiceBarDrag(containerRef, onDrop, followRefs, reportDragging) {
 }
 
 // src/components/VoiceBarChatLine.tsx
-import { useCallback as useCallback27, useContext as useContext21, useEffect as useEffect42, useRef as useRef36, useState as useState31 } from "react";
+import { useCallback as useCallback27, useContext as useContext22, useEffect as useEffect42, useRef as useRef36, useState as useState31 } from "react";
 import { jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
 var IDLE_HIDE_MS = 6000;
 function VoiceBarChatLine({
@@ -9366,7 +9542,7 @@ function VoiceBarChatLine({
   embedded = false
 }) {
   const { sendChatMessage, isSendingChat } = useChatMessages();
-  const ctx = useContext21(LiveAgentContext);
+  const ctx = useContext22(LiveAgentContext);
   const reportChatActivity = ctx?.reportChatActivity;
   const [localDraft, setLocalDraft] = useState31("");
   const text = ctx?.chatDraft ?? localDraft;
@@ -10001,7 +10177,7 @@ function VoiceBarFrame({
   onDrop,
   setDragging
 }) {
-  const ctx = useContext22(LiveAgentContext);
+  const ctx = useContext23(LiveAgentContext);
   if (!ctx) {
     throw new Error("VoiceBarFrame must be used within a <LiveAgent> provider");
   }
@@ -11013,7 +11189,7 @@ function VoiceBarLauncher({
 // src/components/VoiceBar.tsx
 import { jsx as jsx46 } from "react/jsx-runtime";
 function VoiceBar({ revealed }) {
-  const ctx = useContext23(LiveAgentContext);
+  const ctx = useContext24(LiveAgentContext);
   if (!ctx) {
     throw new Error("VoiceBar must be used within a <LiveAgent> provider");
   }
@@ -11083,7 +11259,7 @@ function VoiceBar({ revealed }) {
 }
 
 // src/components/LiveAgent.tsx
-import { jsx as jsx47, jsxs as jsxs39, Fragment as Fragment7 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs39, Fragment as Fragment8 } from "react/jsx-runtime";
 function readSavedPosition() {
   try {
     const saved = localStorage.getItem("skippr_widget_position");
@@ -11263,7 +11439,7 @@ function LiveAgent(props) {
   const agentMode = sessionAgentMode ?? operatingModule?.mode ?? null;
   const shouldAnimateCursor = operatingModule?.uiPreferences?.animateCursor ?? animateAgentCursor;
   const buddyDefaultMissing = buddyActive && hasResolvedModules && !modulesError && !defaultModule && !isSessionLive;
-  const resumableSession = useMemo7(() => getResumableSession(operatingModule), [operatingModule]);
+  const resumableSession = useMemo8(() => getResumableSession(operatingModule), [operatingModule]);
   const resumeSession = useCallback32(async () => {
     if (!resumableSession)
       return;
@@ -11431,12 +11607,12 @@ function LiveAgent(props) {
     enabled: idleHistoryEnabled,
     authedFetch
   });
-  const idleHistory = useMemo7(() => ({
+  const idleHistory = useMemo8(() => ({
     messages: idleHistoryMessages,
     phases: idleHistoryPhases,
     isLoading: isLoadingHistory
   }), [idleHistoryMessages, idleHistoryPhases, isLoadingHistory]);
-  const ctx = useMemo7(() => ({
+  const ctx = useMemo8(() => ({
     connection,
     shouldConnect,
     isConnected,
@@ -11607,68 +11783,72 @@ function LiveAgent(props) {
       audio: true,
       onDisconnected: handleRoomDisconnected,
       children: [
-        connection && !textMode && /* @__PURE__ */ jsx47(RoomAudioRenderer, {}),
-        /* @__PURE__ */ jsxs39(SessionHoldProvider, {
+        /* @__PURE__ */ jsxs39(Fragment7, {
           children: [
-            connection && captureMode === CAPTURE_MODE.Screenshare && /* @__PURE__ */ jsx47(AutoStartMedia, {
-              pendingScreenStream,
-              pushOrTapMicMode: isRequestResponseMicMode(agentControls?.micMode)
-            }),
-            connection && captureMode === CAPTURE_MODE.Auto && /* @__PURE__ */ jsx47(DomCapture, {
-              pushOrTapMicMode: isRequestResponseMicMode(agentControls?.micMode)
-            }),
-            /* @__PURE__ */ jsxs39(ShadowHost, {
-              accentColor: appearance?.accentColor ?? null,
+            connection && !textMode && /* @__PURE__ */ jsx47(RoomAudioRenderer, {}),
+            /* @__PURE__ */ jsxs39(SessionHoldProvider, {
               children: [
-                connection && captureMode === CAPTURE_MODE.Auto && agentControls?.highlight && /* @__PURE__ */ jsx47(HighlightOverlay, {}),
-                connection && captureMode === CAPTURE_MODE.Auto && agentControls?.actions && /* @__PURE__ */ jsx47(PageActionHandler, {}),
-                connection && captureMode === CAPTURE_MODE.Auto && agentControls?.actions && /* @__PURE__ */ jsx47(PlanPanelOpener, {}),
-                connection && captureMode === CAPTURE_MODE.Auto && (agentControls?.highlight || agentControls?.actions) && /* @__PURE__ */ jsx47(AgentCursorMount, {
-                  animated: shouldAnimateCursor
+                connection && captureMode === CAPTURE_MODE.Screenshare && /* @__PURE__ */ jsx47(AutoStartMedia, {
+                  pendingScreenStream,
+                  pushOrTapMicMode: isRequestResponseMicMode(agentControls?.micMode)
                 }),
-                /* @__PURE__ */ jsx47(VoiceTurnProvider, {
-                  children: /* @__PURE__ */ jsx47(TranscriptionsProvider, {
-                    children: /* @__PURE__ */ jsx47("div", {
-                      id: WIDGET_ROOT_ID,
-                      children: variant === "sidebar" ? /* @__PURE__ */ jsxs39(Fragment7, {
-                        children: [
-                          isMinimized && !showControlBar && isLauncherRevealed && /* @__PURE__ */ jsx47(MinimizedBubble, {
-                            welcomeMessage,
-                            welcomeDismissed,
-                            onDismissWelcome: dismissWelcome
-                          }),
-                          showControlBar && !hideControls && /* @__PURE__ */ jsx47(SessionControlBar, {}),
-                          /* @__PURE__ */ jsx47(SidebarTrigger, {}),
-                          /* @__PURE__ */ jsx47(Sidebar, {
-                            hideControls,
-                            hideHeader,
-                            startSessionLabel
-                          })
-                        ]
-                      }) : !isLauncherRevealed ? null : buddyActive ? /* @__PURE__ */ jsx47(BuddyVoiceBar, {
-                        revealed: isLauncherRevealed
-                      }) : /* @__PURE__ */ jsxs39(Fragment7, {
-                        children: [
-                          /* @__PURE__ */ jsx47(VoiceBar, {
+                connection && captureMode === CAPTURE_MODE.Auto && /* @__PURE__ */ jsx47(DomCapture, {
+                  pushOrTapMicMode: isRequestResponseMicMode(agentControls?.micMode)
+                }),
+                /* @__PURE__ */ jsxs39(ShadowHost, {
+                  accentColor: appearance?.accentColor ?? null,
+                  children: [
+                    connection && captureMode === CAPTURE_MODE.Auto && agentControls?.highlight && /* @__PURE__ */ jsx47(HighlightOverlay, {}),
+                    connection && captureMode === CAPTURE_MODE.Auto && agentControls?.actions && /* @__PURE__ */ jsx47(PageActionHandler, {}),
+                    connection && captureMode === CAPTURE_MODE.Auto && agentControls?.actions && /* @__PURE__ */ jsx47(PlanPanelOpener, {}),
+                    connection && captureMode === CAPTURE_MODE.Auto && (agentControls?.highlight || agentControls?.actions) && /* @__PURE__ */ jsx47(AgentCursorMount, {
+                      animated: shouldAnimateCursor
+                    }),
+                    /* @__PURE__ */ jsx47(VoiceTurnProvider, {
+                      children: /* @__PURE__ */ jsx47(TranscriptionsProvider, {
+                        children: /* @__PURE__ */ jsx47("div", {
+                          id: WIDGET_ROOT_ID,
+                          children: variant === "sidebar" ? /* @__PURE__ */ jsxs39(Fragment8, {
+                            children: [
+                              isMinimized && !showControlBar && isLauncherRevealed && /* @__PURE__ */ jsx47(MinimizedBubble, {
+                                welcomeMessage,
+                                welcomeDismissed,
+                                onDismissWelcome: dismissWelcome
+                              }),
+                              showControlBar && !hideControls && /* @__PURE__ */ jsx47(SessionControlBar, {}),
+                              /* @__PURE__ */ jsx47(SidebarTrigger, {}),
+                              /* @__PURE__ */ jsx47(Sidebar, {
+                                hideControls,
+                                hideHeader,
+                                startSessionLabel
+                              })
+                            ]
+                          }) : !isLauncherRevealed ? null : buddyActive ? /* @__PURE__ */ jsx47(BuddyVoiceBar, {
                             revealed: isLauncherRevealed
-                          }),
-                          (agentControls?.chat ?? DEFAULT_CHAT_SURFACE) === CHAT_SURFACE.Room && /* @__PURE__ */ jsx47(Sidebar, {
-                            hideControls,
-                            hideHeader,
-                            startSessionLabel
+                          }) : /* @__PURE__ */ jsxs39(Fragment8, {
+                            children: [
+                              /* @__PURE__ */ jsx47(VoiceBar, {
+                                revealed: isLauncherRevealed
+                              }),
+                              (agentControls?.chat ?? DEFAULT_CHAT_SURFACE) === CHAT_SURFACE.Room && /* @__PURE__ */ jsx47(Sidebar, {
+                                hideControls,
+                                hideHeader,
+                                startSessionLabel
+                              })
+                            ]
                           })
-                        ]
+                        })
                       })
                     })
-                  })
+                  ]
                 })
               ]
-            }),
-            children
+            })
           ]
-        })
+        }, connection?.token),
+        children
       ]
-    }, connection?.token)
+    })
   });
 }
 // src/hooks/useIsLocalSpeaking.ts