@skippr/live-agent-sdk 0.72.0 → 0.74.0

package/dist/esm/lib-exports.js

@@ -50,6 +50,28 @@ function useAgentCursor() {
 
 // src/context/LiveAgentContext.tsx
 import { createContext } from "react";
+
+// src/lib/constants.ts
+var SIDEBAR_WIDTH = 280;
+var CAPTURE_MODE = {
+  Screenshare: "screenshare",
+  Auto: "auto"
+};
+var DEFAULT_CAPTURE_MODE = CAPTURE_MODE.Auto;
+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 HIGHLIGHT_TOPIC = "skippr.highlight";
+var PAGE_ACTIONS_TOPIC = "skippr.page-actions";
+var TEXT_MODE_TOPIC = "skippr.text-mode";
+var ACTION_CONTROL_TOPIC = "skippr.action-control";
+var SESSION_HOLD_TOPIC = "skippr.session-hold";
+var PLAN_ATTR = "skippr.action-plan";
+var NAME_MAX_CHARS = 80;
+
+// src/context/LiveAgentContext.tsx
 var LiveAgentContext = createContext(null);
 
 // src/hooks/useAdoptionGoals.ts
@@ -415,21 +437,6 @@ function useLiveAgent() {
 // src/hooks/usePlanUpdates.ts
 import { useCallback as useCallback4 } from "react";
 
-// src/lib/constants.ts
-var SIDEBAR_WIDTH = 280;
-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 HIGHLIGHT_TOPIC = "skippr.highlight";
-var PAGE_ACTIONS_TOPIC = "skippr.page-actions";
-var TEXT_MODE_TOPIC = "skippr.text-mode";
-var ACTION_CONTROL_TOPIC = "skippr.action-control";
-var SESSION_HOLD_TOPIC = "skippr.session-hold";
-var PLAN_ATTR = "skippr.action-plan";
-var NAME_MAX_CHARS = 80;
-
 // src/hooks/useAgentState.ts
 import { useRemoteParticipants } from "@livekit/components-react/hooks";
 import { useEffect as useEffect5, useState as useState5 } from "react";
@@ -536,7 +543,7 @@ async function exchangeForBearerToken(appKey, userToken) {
   return { token, expiresAt: new Date(expiresAt).getTime() };
 }
 function useSession({
-  captureMode = "screenshare",
+  captureMode = DEFAULT_CAPTURE_MODE,
   authToken,
   appKey,
   getUserToken,
@@ -689,7 +696,7 @@ function useSession({
     setErrorCode(null);
     onStart?.();
     let screenStream = null;
-    if (captureMode === "screenshare") {
+    if (captureMode === CAPTURE_MODE.Screenshare) {
       screenStream = await requestScreenShare();
     }
     const enabledControls = {};
@@ -844,6 +851,15 @@ function clampLauncherBottom(px) {
   const maxBottom = window.innerHeight - LAUNCHER_HEIGHT_PX - VIEWPORT_MARGIN_PX;
   return Math.round(Math.min(Math.max(px, VIEWPORT_MARGIN_PX), maxBottom));
 }
+function verticalAlignToBottomPx(align) {
+  if (align === "top") {
+    return clampLauncherBottom(window.innerHeight - LAUNCHER_HEIGHT_PX - DEFAULT_LAUNCHER_BOTTOM_PX);
+  }
+  if (align === "middle") {
+    return clampLauncherBottom(window.innerHeight / 2 - LAUNCHER_HEIGHT_PX / 2);
+  }
+  return clampLauncherBottom(DEFAULT_LAUNCHER_BOTTOM_PX);
+}
 function launcherPopsDown(bottomPx) {
   return bottomPx + LAUNCHER_HEIGHT_PX / 2 > window.innerHeight / 2;
 }
@@ -3933,8 +3949,8 @@ function SessionControlBar() {
   }, [isHeld, minimizePanel]);
   const isReady = state === "listening" || state === "thinking" || state === "speaking";
   const { barRefs, isTalking } = useMicLevel(isReady && !isMuted && !textMode && !isHeld);
-  const showScreenShareToggle = captureMode === "screenshare";
-  const showActionControl = captureMode === "auto" && actionsActive;
+  const showScreenShareToggle = captureMode === CAPTURE_MODE.Screenshare;
+  const showActionControl = captureMode === CAPTURE_MODE.Auto && actionsActive;
   const screenShareExtra = showScreenShareToggle ? SCREEN_SHARE_EXTRA_WIDTH : 0;
   const actionControlExtra = showActionControl ? ACTION_CONTROL_EXTRA_WIDTH : 0;
   let barWidth = STANDBY_BAR_WIDTH;
@@ -5580,6 +5596,14 @@ function SidebarTrigger() {
 
 // src/components/LiveAgent.tsx
 import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+function readSavedLauncherBottom() {
+  try {
+    const saved = Number.parseInt(localStorage.getItem("skippr_widget_bottom") ?? "", 10);
+    return Number.isFinite(saved) && saved > 0 ? saved : null;
+  } catch {
+    return null;
+  }
+}
 function AgentCursorMount({ animated }) {
   return /* @__PURE__ */ jsx22(AgentCursor, {
     target: useAgentCursor(),
@@ -5606,6 +5630,7 @@ function LiveAgent(props) {
     getUserToken,
     userToken,
     position = "right",
+    verticalAlign = "bottom",
     variant = "floating",
     minimizable = true,
     defaultOpen = false,
@@ -5617,10 +5642,10 @@ function LiveAgent(props) {
     animateAgentCursor = false,
     children
   } = props;
-  const captureMode = props.captureMode ?? "screenshare";
+  const captureMode = props.captureMode ?? DEFAULT_CAPTURE_MODE;
   let hostAgentControls;
   if ("agentControls" in props && props.agentControls) {
-    if (captureMode === "auto") {
+    if (captureMode === CAPTURE_MODE.Auto) {
       hostAgentControls = props.agentControls;
     } else {
       console.warn('[Skippr] agentControls requires captureMode: "auto"');
@@ -5772,16 +5797,13 @@ function LiveAgent(props) {
       localStorage.setItem("skippr_widget_position", pos);
     } catch {}
   }, []);
-  const [launcherBottomPx, setLauncherBottomPxState] = useState18(() => {
-    try {
-      const saved = Number.parseInt(localStorage.getItem("skippr_widget_bottom") ?? "", 10);
-      if (Number.isFinite(saved) && saved > 0)
-        return clampLauncherBottom(saved);
-    } catch {}
-    return DEFAULT_LAUNCHER_BOTTOM_PX;
-  });
+  const savedLauncherBottom = readSavedLauncherBottom();
+  const hasDraggedRef = useRef17(savedLauncherBottom !== null);
+  const verticalAlignRef = useRef17(verticalAlign);
+  const [launcherBottomPx, setLauncherBottomPxState] = useState18(() => savedLauncherBottom !== null ? clampLauncherBottom(savedLauncherBottom) : verticalAlignToBottomPx(verticalAlign));
   const [popsDown, setPopsDown] = useState18(() => launcherPopsDown(launcherBottomPx));
   const setLauncherBottomPx = useCallback15((px) => {
+    hasDraggedRef.current = true;
     setLauncherBottomPxState(px);
     setPopsDown(launcherPopsDown(px));
     try {
@@ -5796,9 +5818,9 @@ function LiveAgent(props) {
   }, [setPositionWithPersist, setLauncherBottomPx]);
   useEffect25(() => {
     const syncToViewport = () => {
-      const clamped = clampLauncherBottom(launcherBottomPxRef.current);
-      setLauncherBottomPxState(clamped);
-      setPopsDown(launcherPopsDown(clamped));
+      const next = hasDraggedRef.current ? clampLauncherBottom(launcherBottomPxRef.current) : verticalAlignToBottomPx(verticalAlignRef.current);
+      setLauncherBottomPxState(next);
+      setPopsDown(launcherPopsDown(next));
     };
     syncToViewport();
     window.addEventListener("resize", syncToViewport);
@@ -5962,16 +5984,16 @@ function LiveAgent(props) {
       onDisconnected: handleRoomDisconnected,
       children: [
         connection && !textMode && /* @__PURE__ */ jsx22(RoomAudioRenderer, {}),
-        connection && captureMode === "screenshare" && /* @__PURE__ */ jsx22(AutoStartMedia, {
+        connection && captureMode === CAPTURE_MODE.Screenshare && /* @__PURE__ */ jsx22(AutoStartMedia, {
           pendingScreenStream
         }),
-        connection && captureMode === "auto" && /* @__PURE__ */ jsx22(DomCapture, {}),
+        connection && captureMode === CAPTURE_MODE.Auto && /* @__PURE__ */ jsx22(DomCapture, {}),
         /* @__PURE__ */ jsxs19(ShadowHost, {
           children: [
-            connection && captureMode === "auto" && agentControls?.highlight && /* @__PURE__ */ jsx22(HighlightOverlay, {}),
-            connection && captureMode === "auto" && agentControls?.actions && /* @__PURE__ */ jsx22(PageActionHandler, {}),
-            connection && captureMode === "auto" && agentControls?.actions && /* @__PURE__ */ jsx22(PlanPanelOpener, {}),
-            connection && captureMode === "auto" && (agentControls?.highlight || agentControls?.actions) && /* @__PURE__ */ jsx22(AgentCursorMount, {
+            connection && captureMode === CAPTURE_MODE.Auto && agentControls?.highlight && /* @__PURE__ */ jsx22(HighlightOverlay, {}),
+            connection && captureMode === CAPTURE_MODE.Auto && agentControls?.actions && /* @__PURE__ */ jsx22(PageActionHandler, {}),
+            connection && captureMode === CAPTURE_MODE.Auto && agentControls?.actions && /* @__PURE__ */ jsx22(PlanPanelOpener, {}),
+            connection && captureMode === CAPTURE_MODE.Auto && (agentControls?.highlight || agentControls?.actions) && /* @__PURE__ */ jsx22(AgentCursorMount, {
               animated: shouldAnimateCursor
             }),
             /* @__PURE__ */ jsxs19("div", {