@skippr/live-agent-sdk 0.57.0 → 0.59.0

package/dist/esm/lib-exports.js

@@ -732,6 +732,7 @@ var NAME_MAX_CHARS = 80;
 // src/lib/launcher.ts
 var DEFAULT_LAUNCHER_BOTTOM_PX = 48;
 var LAUNCHER_HEIGHT_PX = 50;
+var WIDGET_EDGE_MARGIN_PX = 12;
 var SESSION_BAR_CLEARANCE_PX = 76;
 var TRIGGER_HEIGHT_PX = 48;
 var IDLE_TRIGGER_CLEARANCE_PX = TRIGGER_HEIGHT_PX + 16;
@@ -1060,7 +1061,7 @@ var __iconNode21 = [
 ];
 var X = createLucideIcon("x", __iconNode21);
 // src/components/AgentCursor.tsx
-import { useEffect as useEffect6, useLayoutEffect, useRef as useRef2, useState as useState6 } from "react";
+import { useContext as useContext2, useEffect as useEffect6, useLayoutEffect, useRef as useRef2, useState as useState6 } from "react";
 
 // src/capture/elementRef.ts
 function safeGetIframeDocument(iframe) {
@@ -1212,9 +1213,6 @@ var BASIC_ACT_DELAY_MS = 150;
 var TRACK_GLIDE_MS = 90;
 var GESTURE_GLIDE_MS = 500;
 var GESTURE_ACT_DELAY_MS = 200;
-function cursorEntryPoint() {
-  return { x: window.innerWidth - 72, y: window.innerHeight - 80 };
-}
 function gesturePoint(direction) {
   return {
     x: window.innerWidth / 2,
@@ -1224,6 +1222,13 @@ function gesturePoint(direction) {
 function centerOf(rect) {
   return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
 }
+function launcherCenter(position, launcherBottomPx) {
+  const edge = WIDGET_EDGE_MARGIN_PX + LAUNCHER_HEIGHT_PX / 2;
+  return {
+    x: position === "left" ? edge : window.innerWidth - edge,
+    y: window.innerHeight - launcherBottomPx - LAUNCHER_HEIGHT_PX / 2
+  };
+}
 function ringTopLeft(rect) {
   return { x: rect.left - RING_PAD + 1 + ringRadius(rect), y: rect.top - RING_PAD + 1 };
 }
@@ -1238,6 +1243,7 @@ function AgentCursor({
   target,
   animated = false
 }) {
+  const ctx = useContext2(LiveAgentContext);
   const [cursor, setCursor] = useState6(null);
   const [glideMs, setGlideMs] = useState6(0);
   const [phase, setPhase] = useState6("idle");
@@ -1307,7 +1313,8 @@ function AgentCursor({
       setPhase("done");
       setRingBox(null);
       const destination = gesturePoint(target.gesture.direction);
-      startGlide(prevCursorRef.current ?? cursorEntryPoint(), destination, GESTURE_GLIDE_MS, () => {
+      const from2 = prevCursorRef.current ?? launcherCenter(ctx?.position ?? "right", ctx?.launcherBottomPx ?? 0);
+      startGlide(from2, destination, GESTURE_GLIDE_MS, () => {
         if (target.mode === "act") {
           after(GESTURE_ACT_DELAY_MS, () => target.onAct?.());
         }
@@ -1345,7 +1352,7 @@ function AgentCursor({
       return cancelAnimation;
     }
     setPhase("travel");
-    const from = prevCursorRef.current ?? cursorEntryPoint();
+    const from = prevCursorRef.current ?? launcherCenter(ctx?.position ?? "right", ctx?.launcherBottomPx ?? 0);
     const start = ringTopLeft(rect);
     startGlide(from, start, glideDuration(from, start), () => {
       after(DRAW_START_DELAY_MS, () => {
@@ -1800,7 +1807,47 @@ function isActionBlocked(element) {
 function escapeAttributeValue(value) {
   return value.replace(/\\/g, "\\\\").replace(/"/g, "\\\"").replace(/[\r\n]+/g, " ");
 }
-function extractAttrs(element, role) {
+var GENERIC_ICON_NAMES = new Set(["icon", "icons", "image", "img", "sprite", "sprites", "asset"]);
+function sanitizeIconName(src) {
+  if (!src || src.startsWith("data:"))
+    return null;
+  const withoutQuery = src.split(/[?#]/)[0] ?? "";
+  const basename = withoutQuery.slice(withoutQuery.lastIndexOf("/") + 1);
+  const core = basename.split(".")[0] ?? "";
+  const cleaned = core.replace(/^(?:icon[-_]?|ic[-_]|svg[-_])/i, "").replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[-_]+/g, " ").replace(/\s+/g, " ").trim().toLowerCase().replace(/\s*\bicons?$/, "").trim();
+  if (!cleaned)
+    return null;
+  if (/^[0-9a-f]{8,}$/i.test(cleaned))
+    return null;
+  if (/^\d+$/.test(cleaned))
+    return null;
+  if (GENERIC_ICON_NAMES.has(cleaned))
+    return null;
+  if (cleaned.split(" ").length > 3)
+    return null;
+  return cleaned.slice(0, NAME_MAX_CHARS);
+}
+function hasInteractiveAncestorWithin(image, boundary) {
+  let node = image.parentElement;
+  while (node && node !== boundary) {
+    if (isInteractive(node, inferRole(node)))
+      return true;
+    node = node.parentElement;
+  }
+  return false;
+}
+function iconNameHint(element) {
+  if (element.tagName === "IMG") {
+    return sanitizeIconName(element.getAttribute("src") || "");
+  }
+  const image = element.querySelector("img[src]");
+  if (!image)
+    return null;
+  if (hasInteractiveAncestorWithin(image, element))
+    return null;
+  return sanitizeIconName(image.getAttribute("src") || "");
+}
+function extractAttrs(element, role, name) {
   const attributes = [];
   if (role === "link") {
     const href = element.getAttribute("href");
@@ -1884,6 +1931,11 @@ function extractAttrs(element, role) {
     if (/\.gif(\?|$)/i.test(imageSrc))
       attributes.push("animated");
   }
+  if (!name && isInteractive(element, role)) {
+    const hint = iconNameHint(element);
+    if (hint)
+      attributes.push(`iconName="${escapeAttributeValue(hint)}"`);
+  }
   if (isScrollableContainer(element, role))
     attributes.push("scrollable");
   const isNativelyDisabled = "disabled" in element && element.disabled === true;
@@ -1943,12 +1995,13 @@ function walkAndCollect(element, depth, entries) {
   let childDepth = depth;
   if (isVisibleAndEmittable && role) {
     const ref = ensureStableRef(element);
+    const name = accessibleName(element);
     entries.push({
       depth,
       role,
-      name: accessibleName(element),
+      name,
       ref,
-      attrs: extractAttrs(element, role),
+      attrs: extractAttrs(element, role, name),
       area: rect.width * rect.height
     });
     childDepth = depth + 1;
@@ -2501,7 +2554,7 @@ function HighlightOverlay() {
 }
 
 // src/components/MinimizedBubble.tsx
-import { useContext as useContext2, useEffect as useEffect11, useRef as useRef7, useState as useState7 } from "react";
+import { useContext as useContext3, useEffect as useEffect11, useRef as useRef7, useState as useState7 } from "react";
 
 // src/hooks/useLauncherDrag.ts
 import { useEffect as useEffect10, useRef as useRef6 } from "react";
@@ -2788,7 +2841,7 @@ function MinimizedBubble({
   welcomeDismissed,
   onDismissWelcome
 }) {
-  const ctx = useContext2(LiveAgentContext);
+  const ctx = useContext3(LiveAgentContext);
   if (!ctx) {
     throw new Error("MinimizedBubble must be used within a <LiveAgent> provider");
   }
@@ -3281,7 +3334,7 @@ function PageActionHandler() {
 }
 
 // src/components/SessionControlBar.tsx
-import { useContext as useContext5, useRef as useRef10 } from "react";
+import { useContext as useContext6, useRef as useRef10 } from "react";
 
 // src/hooks/useAgentVoiceState.ts
 import { useVoiceAssistant } from "@livekit/components-react/hooks";
@@ -3353,9 +3406,9 @@ function useAudioLevelBars(mediaStreamTrack, { barCount, idleHeightPx, maxGrowth
 }
 
 // src/hooks/useLiveAgent.ts
-import { useContext as useContext3 } from "react";
+import { useContext as useContext4 } from "react";
 function useLiveAgent() {
-  const ctx = useContext3(LiveAgentContext);
+  const ctx = useContext4(LiveAgentContext);
   if (!ctx) {
     throw new Error("useLiveAgent must be used within a <LiveAgent> provider");
   }
@@ -3428,7 +3481,7 @@ function useMicLevel(enabled) {
 }
 
 // src/hooks/usePhaseUpdates.ts
-import { useCallback as useCallback8, useContext as useContext4, useEffect as useEffect15 } from "react";
+import { useCallback as useCallback8, useContext as useContext5, useEffect as useEffect15 } from "react";
 
 // src/hooks/useAgentState.ts
 import { useRemoteParticipants } from "@livekit/components-react/hooks";
@@ -3484,7 +3537,7 @@ function parsePhases(json) {
 function usePhaseUpdates() {
   const parse = useCallback8(parsePhases, []);
   const livePhases = useAgentState("phases", parse, []);
-  const ctx = useContext4(LiveAgentContext);
+  const ctx = useContext5(LiveAgentContext);
   useEffect15(() => {
     if (livePhases.length > 0)
       ctx?.setPhasesSnapshot(livePhases);
@@ -3584,7 +3637,7 @@ function SessionControlBar() {
     position,
     variant
   } = useLiveAgent();
-  const internalCtx = useContext5(LiveAgentContext);
+  const internalCtx = useContext6(LiveAgentContext);
   const textMode = internalCtx?.textMode ?? false;
   const launcherBottomPx = internalCtx?.launcherBottomPx ?? DEFAULT_LAUNCHER_BOTTOM_PX;
   const popsDown = internalCtx?.popsDown ?? false;
@@ -3827,10 +3880,10 @@ function ShadowHost({ children }) {
 }
 
 // src/components/Sidebar.tsx
-import { useContext as useContext9, useEffect as useEffect20 } from "react";
+import { useContext as useContext10, useEffect as useEffect20 } from "react";
 
 // src/hooks/useCombinedMessages.ts
-import { useContext as useContext6, useMemo as useMemo5 } from "react";
+import { useContext as useContext7, useMemo as useMemo5 } from "react";
 
 // src/hooks/useChatMessages.ts
 import { useChat, useLocalParticipant as useLocalParticipant5 } from "@livekit/components-react/hooks";
@@ -3898,7 +3951,7 @@ function useCombinedMessages() {
   const { transcriptMessages } = useStreamingTranscript();
   const { chatMessages, sendChatMessage, isSendingChat } = useChatMessages();
   const { state: agentState } = useAgentVoiceState();
-  const historyMessages = useContext6(LiveAgentContext)?.historyMessages ?? [];
+  const historyMessages = useContext7(LiveAgentContext)?.historyMessages ?? [];
   const liveMessages = useMemo5(() => {
     if (chatMessages.length === 0)
       return transcriptMessages;
@@ -3952,10 +4005,10 @@ function useSessionRemaining() {
 
 // src/hooks/useTextMode.ts
 import { useLocalParticipant as useLocalParticipant7 } from "@livekit/components-react/hooks";
-import { useCallback as useCallback9, useContext as useContext7, useRef as useRef13 } from "react";
+import { useCallback as useCallback9, useContext as useContext8, useRef as useRef13 } from "react";
 var textEncoder3 = new TextEncoder;
 function useTextMode() {
-  const ctx = useContext7(LiveAgentContext);
+  const ctx = useContext8(LiveAgentContext);
   if (!ctx) {
     throw new Error("useTextMode must be used within a <LiveAgent> provider");
   }
@@ -3984,7 +4037,7 @@ function useTextMode() {
 }
 
 // src/components/ChatHeader.tsx
-import { useContext as useContext8 } from "react";
+import { useContext as useContext9 } from "react";
 
 // src/hooks/useElapsedSeconds.ts
 import { useEffect as useEffect17, useState as useState12 } from "react";
@@ -4009,7 +4062,7 @@ function useElapsedSeconds(isRunning) {
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function ChatHeader() {
   const { isConnected, variant } = useLiveAgent();
-  const internalCtx = useContext8(LiveAgentContext);
+  const internalCtx = useContext9(LiveAgentContext);
   const panelExpanded = internalCtx?.panelExpanded ?? false;
   const togglePanelExpanded = internalCtx?.togglePanelExpanded ?? (() => {});
   const elapsed = useElapsedSeconds(isConnected);
@@ -4723,7 +4776,7 @@ function Sidebar({
     agentMode,
     agentControls
   } = useLiveAgent();
-  const internalCtx = useContext9(LiveAgentContext);
+  const internalCtx = useContext10(LiveAgentContext);
   const usesHostAuth = internalCtx?.usesHostAuth ?? false;
   const authFailed = internalCtx?.authFailed ?? false;
   const launcherBottomPx = internalCtx?.launcherBottomPx ?? DEFAULT_LAUNCHER_BOTTOM_PX;
@@ -4983,7 +5036,7 @@ function ConnectedBody({
 }
 
 // src/components/SidebarTrigger.tsx
-import { useContext as useContext10 } from "react";
+import { useContext as useContext11 } from "react";
 
 // src/components/Logo.tsx
 import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
@@ -5035,7 +5088,7 @@ function SidebarTrigger() {
     isStarting,
     isPausing
   } = useLiveAgent();
-  const internalCtx = useContext10(LiveAgentContext);
+  const internalCtx = useContext11(LiveAgentContext);
   const launcherBottomPx = internalCtx?.launcherBottomPx ?? DEFAULT_LAUNCHER_BOTTOM_PX;
   const popsDown = internalCtx?.popsDown ?? false;
   if (isMinimized || isConnected || isStarting || isPausing)