@particle-academy/agent-integrations 0.28.1 → 0.28.2

package/dist/index.cjs

@@ -4905,6 +4905,23 @@ function CoBrowsePresence({ session, connectUrl, shareBaseUrl, className }) {
   ] });
 }
 CoBrowsePresence.displayName = "CoBrowsePresence";
+var CURSOR_EDGE_INSET = 24;
+var FLUID_CURSOR_SPEED_PX_PER_SECOND = 1050;
+var MIN_GLIDE_MS = 240;
+var MAX_GLIDE_MS = 1200;
+function visibleCursorPoint(rect, viewport) {
+  const x = rect.x + rect.width / 2;
+  const y = rect.y + rect.height / 2;
+  return {
+    x: Math.min(Math.max(x, CURSOR_EDGE_INSET), Math.max(CURSOR_EDGE_INSET, viewport.width - CURSOR_EDGE_INSET)),
+    y: Math.min(Math.max(y, CURSOR_EDGE_INSET), Math.max(CURSOR_EDGE_INSET, viewport.height - CURSOR_EDGE_INSET))
+  };
+}
+function fluidGlideDuration(from, to) {
+  if (!from) return 0;
+  const distance = Math.hypot(to.x - from.x, to.y - from.y);
+  return Math.round(Math.min(MAX_GLIDE_MS, Math.max(MIN_GLIDE_MS, distance / FLUID_CURSOR_SPEED_PX_PER_SECOND * 1e3)));
+}
 function CoBrowseCursorLayer({ active = true, zIndex = 2147483e3 }) {
   const { latest } = useAgentActivity(void 0, { capacity: 12 });
   const [cursor, setCursor] = react.useState(
@@ -4914,7 +4931,7 @@ function CoBrowseCursorLayer({ active = true, zIndex = 2147483e3 }) {
   react.useEffect(() => {
     if (!latest || (latest.source ?? "agent") === "user") return;
     if (latest.action === "agent_disconnected") {
-      setCursor(null);
+      setCursor((prev) => prev ? { ...prev, status: "Standing by", glideMs: 0 } : prev);
       setPulse(null);
       return;
     }
@@ -4923,11 +4940,19 @@ function CoBrowseCursorLayer({ active = true, zIndex = 2147483e3 }) {
     const status = latest.target?.label ?? latest.action;
     const rect = latest.meta?.rect;
     if (rect) {
-      setCursor({ x: rect.x + rect.width / 2, y: rect.y + rect.height / 2, name, color, status });
+      const target = visibleCursorPoint(rect, { width: window.innerWidth, height: window.innerHeight });
+      const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+      setCursor((prev) => ({
+        ...target,
+        name,
+        color,
+        status,
+        glideMs: reduceMotion ? 0 : fluidGlideDuration(prev, target)
+      }));
       setPulse({ rect, color, key: latest.timestamp });
     } else {
       setCursor(
-        (prev) => prev ? { ...prev, status, name, color } : { x: window.innerWidth / 2, y: window.innerHeight / 2, name, color, status }
+        (prev) => prev ? { ...prev, status, name, color } : { x: window.innerWidth / 2, y: window.innerHeight / 2, name, color, status, glideMs: 0 }
       );
     }
   }, [latest?.timestamp]);
@@ -4953,7 +4978,9 @@ function CoBrowseCursorLayer({ active = true, zIndex = 2147483e3 }) {
           name: cursor.name,
           color: cursor.color,
           status: cursor.status,
-          style: { transition: "left .35s cubic-bezier(.22,.61,.36,1), top .35s cubic-bezier(.22,.61,.36,1)" }
+          style: {
+            transition: cursor.glideMs ? `left ${cursor.glideMs}ms cubic-bezier(.22,.61,.36,1), top ${cursor.glideMs}ms cubic-bezier(.22,.61,.36,1)` : "none"
+          }
         }
       )
     ] }),