@skippr/live-agent-sdk 0.113.0 → 0.115.0

package/dist/esm/lib-exports.js

@@ -7177,9 +7177,15 @@ function DomCapture({ pushOrTapMicMode = false, startMuted = false }) {
 }
 
 // src/components/HighlightOverlay.tsx
-import { useDataChannel } from "@livekit/components-react/hooks";
+import { useDataChannel, useLocalParticipant as useLocalParticipant6 } from "@livekit/components-react/hooks";
 import { useCallback as useCallback18, useEffect as useEffect25, useRef as useRef19 } from "react";
-var HIGHLIGHT_AUTO_CLEAR_MS = 25000;
+var HIGHLIGHT_AUTO_CLEAR_MS = 30000;
+var PAGE_CHECK_MS = 250;
+var ACTED_REASON = "acted";
+var NAVIGATED_REASON = "navigated";
+var EXPIRED_REASON = "expired";
+var ELEMENT_GONE_REASON = "element-gone";
+var textEncoder5 = new TextEncoder;
 var textDecoder = new TextDecoder;
 function parseHighlightMessage(payload) {
   try {
@@ -7201,16 +7207,28 @@ function parseHighlightMessage(payload) {
   }
 }
 function HighlightOverlay() {
+  const { localParticipant } = useLocalParticipant6();
   const targetRef = useRef19(null);
+  const shownRef = useRef19(null);
+  const shownUrlRef = useRef19(null);
   const autoClearRef = useRef19(null);
   const clear = useCallback18(() => {
     if (autoClearRef.current)
       clearTimeout(autoClearRef.current);
     autoClearRef.current = null;
     targetRef.current = null;
+    shownRef.current = null;
+    shownUrlRef.current = null;
     clearCursorTarget("guide");
     setHighlightActive(false);
   }, []);
+  const clearAndReport = useCallback18((reason) => {
+    clear();
+    localParticipant.publishData(textEncoder5.encode(JSON.stringify({ type: "cleared", reason })), {
+      reliable: true,
+      topic: HIGHLIGHT_TOPIC
+    }).catch((error) => console.error("Failed to report highlight clear:", error));
+  }, [clear, localParticipant]);
   const onHighlightMessage = useCallback18((msg) => {
     const parsed = parseHighlightMessage(msg.payload);
     if (!parsed)
@@ -7221,32 +7239,67 @@ function HighlightOverlay() {
     }
     const element = findElementByRef(parsed.ref);
     if (!element) {
-      clear();
+      clearAndReport(ELEMENT_GONE_REASON);
       return;
     }
     if (autoClearRef.current)
       clearTimeout(autoClearRef.current);
     targetRef.current = element;
+    shownRef.current = parsed;
+    shownUrlRef.current = window.location.href;
     setCursorTarget("guide", {
       element,
       label: parsed.message || "Click here",
       mode: "guide"
     });
     setHighlightActive(true);
-    autoClearRef.current = setTimeout(clear, HIGHLIGHT_AUTO_CLEAR_MS);
-  }, [clear]);
+    autoClearRef.current = setTimeout(() => clearAndReport(EXPIRED_REASON), HIGHLIGHT_AUTO_CLEAR_MS);
+  }, [clear, clearAndReport]);
   useDataChannel(HIGHLIGHT_TOPIC, onHighlightMessage);
   useEffect25(() => onHighlightCleared(clear), [clear]);
   useEffect25(() => {
     const onClick = (event) => {
       const target = targetRef.current;
-      const node = event.target;
-      if (target && node && target.contains(node))
-        clear();
+      if (!target)
+        return;
+      const node = event.composedPath()[0];
+      if (!(node instanceof Node))
+        return;
+      if (!target.contains(node))
+        return;
+      if (isAgentActionInProgress())
+        return;
+      clearAndReport(ACTED_REASON);
     };
     document.addEventListener("click", onClick, { capture: true });
     return () => document.removeEventListener("click", onClick, { capture: true });
-  }, [clear]);
+  }, [clearAndReport]);
+  useEffect25(() => {
+    const interval = setInterval(() => {
+      const shown = shownRef.current;
+      const target = targetRef.current;
+      if (!shown || !target)
+        return;
+      if (shownUrlRef.current !== window.location.href) {
+        clearAndReport(NAVIGATED_REASON);
+        return;
+      }
+      if (target.isConnected)
+        return;
+      const replacement = findElementByRef(shown.ref);
+      if (!replacement) {
+        clearAndReport(ELEMENT_GONE_REASON);
+        return;
+      }
+      targetRef.current = replacement;
+      setCursorTarget("guide", {
+        element: replacement,
+        label: shown.message || "Click here",
+        mode: "guide"
+      });
+    }, PAGE_CHECK_MS);
+    return () => clearInterval(interval);
+  }, [clearAndReport]);
   useEffect25(() => clear, [clear]);
   return null;
 }
@@ -8183,11 +8236,11 @@ function PageActionHandler() {
 import { useCallback as useCallback22, useContext as useContext11, useEffect as useEffect32, useState as useState24 } from "react";
 
 // src/hooks/useActionControl.ts
-import { useLocalParticipant as useLocalParticipant6 } from "@livekit/components-react/hooks";
+import { useLocalParticipant as useLocalParticipant7 } from "@livekit/components-react/hooks";
 import { useCallback as useCallback20, useEffect as useEffect29, useState as useState22 } from "react";
-var textEncoder5 = new TextEncoder;
+var textEncoder6 = new TextEncoder;
 function useActionControl() {
-  const { localParticipant } = useLocalParticipant6();
+  const { localParticipant } = useLocalParticipant7();
   const plan = usePlanUpdates();
   const [busy, setBusy] = useState22(isActionsBusy);
   useEffect29(() => subscribeActionsBusy(setBusy), []);
@@ -8195,7 +8248,7 @@ function useActionControl() {
   const requestStop = useCallback20(async () => {
     stopActions();
     try {
-      await localParticipant.publishData(textEncoder5.encode(JSON.stringify({ type: "abort" })), {
+      await localParticipant.publishData(textEncoder6.encode(JSON.stringify({ type: "abort" })), {
         reliable: true,
         topic: ACTION_CONTROL_TOPIC
       });
@@ -8300,11 +8353,11 @@ function useIdleAutoPause({
 }
 
 // src/hooks/useLiveUserTranscript.ts
-import { useLocalParticipant as useLocalParticipant7 } from "@livekit/components-react/hooks";
+import { useLocalParticipant as useLocalParticipant8 } from "@livekit/components-react/hooks";
 import { useRef as useRef25 } from "react";
 function useLiveUserTranscript(active) {
   const transcriptions = useSharedTranscriptions();
-  const { localParticipant } = useLocalParticipant7();
+  const { localParticipant } = useLocalParticipant8();
   const localIdentity = localParticipant.identity;
   const priorStreamIdsRef = useRef25(new Set);
   const wasActiveRef = useRef25(false);
@@ -8319,13 +8372,13 @@ function useLiveUserTranscript(active) {
 }
 
 // src/hooks/useMicLevel.ts
-import { useLocalParticipant as useLocalParticipant8 } from "@livekit/components-react/hooks";
+import { useLocalParticipant as useLocalParticipant9 } from "@livekit/components-react/hooks";
 var MIC_BARS = 5;
 var IDLE_BAR_HEIGHT_PX = 5;
 var MAX_BAR_GROWTH_PX = 17;
 var MIC_NOISE_GATE = 0.15;
 function useMicLevel(enabled) {
-  const { microphoneTrack } = useLocalParticipant8();
+  const { microphoneTrack } = useLocalParticipant9();
   const mediaStreamTrack = microphoneTrack?.track?.mediaStreamTrack;
   return useAudioLevelBars(enabled ? mediaStreamTrack : undefined, {
     barCount: MIC_BARS,
@@ -8989,7 +9042,7 @@ import { useCallback as useCallback28, useContext as useContext18, useEffect as
 import { useContext as useContext12, useMemo as useMemo8 } from "react";
 
 // src/hooks/useChatMessages.ts
-import { useChat, useLocalParticipant as useLocalParticipant9 } from "@livekit/components-react/hooks";
+import { useChat, useLocalParticipant as useLocalParticipant10 } from "@livekit/components-react/hooks";
 import { useMemo as useMemo6 } from "react";
 
 // src/lib/filterSystemMessages.ts
@@ -9001,7 +9054,7 @@ function filterSystemMessages(messages) {
 // src/hooks/useChatMessages.ts
 function useChatMessages() {
   const { chatMessages: rawMessages, send, isSending } = useChat();
-  const { localParticipant } = useLocalParticipant9();
+  const { localParticipant } = useLocalParticipant10();
   const localIdentity = localParticipant.identity;
   const chatMessages = useMemo6(() => {
     const sortedMessages = rawMessages.map((msg) => ({
@@ -9017,11 +9070,11 @@ function useChatMessages() {
 }
 
 // src/hooks/useStreamingTranscript.ts
-import { useLocalParticipant as useLocalParticipant10 } from "@livekit/components-react/hooks";
+import { useLocalParticipant as useLocalParticipant11 } from "@livekit/components-react/hooks";
 import { useMemo as useMemo7, useRef as useRef27 } from "react";
 function useStreamingTranscript() {
   const transcriptions = useSharedTranscriptions();
-  const { localParticipant } = useLocalParticipant10();
+  const { localParticipant } = useLocalParticipant11();
   const { isCapturingSpeech } = useVoiceTurnContext();
   const localIdentity = localParticipant.identity;
   const priorUserStreamIdsRef = useRef27(new Set);
@@ -9246,16 +9299,16 @@ function panelTransformOrigin(popsDown, isLeftAligned) {
 import { useContext as useContext15 } from "react";
 
 // src/hooks/useTextMode.ts
-import { useLocalParticipant as useLocalParticipant11 } from "@livekit/components-react/hooks";
+import { useLocalParticipant as useLocalParticipant12 } from "@livekit/components-react/hooks";
 import { useCallback as useCallback25, useContext as useContext14, useRef as useRef29 } from "react";
-var textEncoder6 = new TextEncoder;
+var textEncoder7 = new TextEncoder;
 function useTextMode() {
   const ctx = useContext14(LiveAgentContext);
   if (!ctx) {
     throw new Error("useTextMode must be used within a <LiveAgent> provider");
   }
   const { textMode, setTextModeState, sidebarTab, setSidebarTab } = ctx;
-  const { localParticipant } = useLocalParticipant11();
+  const { localParticipant } = useLocalParticipant12();
   const confirmedTextModeRef = useRef29(false);
   const toggleTextMode = useCallback25(async () => {
     const next = !textMode;
@@ -9264,7 +9317,7 @@ function useTextMode() {
       setSidebarTab("chat");
     }
     try {
-      await localParticipant.publishData(textEncoder6.encode(JSON.stringify({ textMode: next })), {
+      await localParticipant.publishData(textEncoder7.encode(JSON.stringify({ textMode: next })), {
         reliable: true,
         topic: TEXT_MODE_TOPIC
       });
@@ -11446,7 +11499,7 @@ function useBarNotifications() {
 }
 
 // src/components/VoiceBarFrame.tsx
-import { useIsSpeaking, useLocalParticipant as useLocalParticipant12 } from "@livekit/components-react/hooks";
+import { useIsSpeaking, useLocalParticipant as useLocalParticipant13 } from "@livekit/components-react/hooks";
 import { useCallback as useCallback34, useContext as useContext26, useEffect as useEffect47, useRef as useRef42, useState as useState38 } from "react";
 
 // src/hooks/useKeyboardStop.ts
@@ -12197,7 +12250,7 @@ var MIC_LEVEL_IDLE_PX = 3;
 var MIC_LEVEL_GROWTH_PX = 8;
 var MIC_LEVEL_NOISE_GATE = 0.15;
 function MicLevelGlyph({ muted }) {
-  const { microphoneTrack } = useLocalParticipant12();
+  const { microphoneTrack } = useLocalParticipant13();
   const { barRefs, isTalking } = useAudioLevelBars(muted ? undefined : microphoneTrack?.track?.mediaStreamTrack, {
     barCount: MIC_LEVEL_BARS,
     idleHeightPx: MIC_LEVEL_IDLE_PX,
@@ -12383,7 +12436,7 @@ function VoiceBarFrame({
   const dropAtBarWidth = useCallback34((next) => onDrop(next, barWidthRef.current), [onDrop]);
   const { wasDraggedRef } = useVoiceBarDrag(containerRef, dropAtBarWidth, dragFollowers, setDragging);
   const { isMuted, toggleMute } = useMediaControls();
-  const { localParticipant } = useLocalParticipant12();
+  const { localParticipant } = useLocalParticipant13();
   const isUserSpeaking = useIsSpeaking(localParticipant);
   const { state } = useAgentVoiceState();
   const { isCapturingSpeech, toggle: toggleTapToTalk, start, commit } = useVoiceTurnContext();
@@ -14263,9 +14316,9 @@ function SplashScreenCard({
   });
 }
 // src/hooks/useIsLocalSpeaking.ts
-import { useIsSpeaking as useIsSpeaking2, useLocalParticipant as useLocalParticipant13 } from "@livekit/components-react/hooks";
+import { useIsSpeaking as useIsSpeaking2, useLocalParticipant as useLocalParticipant14 } from "@livekit/components-react/hooks";
 function useIsLocalSpeaking() {
-  const { localParticipant } = useLocalParticipant13();
+  const { localParticipant } = useLocalParticipant14();
   return useIsSpeaking2(localParticipant);
 }
 // src/hooks/useIsSessionHeld.ts