@modelnex/sdk 0.5.34 → 0.5.36

package/dist/index.d.mts

@@ -779,7 +779,6 @@ interface RecordingOverlayProps {
     pendingNarration: string;
     polishedNarration: string;
     isListening: boolean;
-    onMarkStep: () => void;
     onToggleVoiceCapture: () => void;
     onElementSelected: (recorded: RecordedElement) => void;
     onPageLevelStep: () => void;
@@ -795,7 +794,7 @@ interface RecordingOverlayProps {
     onCancelRecording: () => void;
     onStopRecording: () => void;
 }
-declare function RecordingOverlay({ stepIndex, stepCount, captureEventCount, capturedTranscript, isVoiceCaptureActive, phase, pendingNarration, polishedNarration, isListening, onMarkStep, onToggleVoiceCapture, onElementSelected, onPageLevelStep, onStepTypeConfirmed, onStartNarration, onSubmitTextNarration, onNarrationApprove, onNarrationRedo, onNarrationEdit, onAddNextStep, onDoneRecording, onCancel, onCancelRecording, onStopRecording, }: RecordingOverlayProps): react_jsx_runtime.JSX.Element;
+declare function RecordingOverlay({ stepIndex, stepCount, captureEventCount, capturedTranscript, isVoiceCaptureActive, phase, pendingNarration, polishedNarration, isListening, onToggleVoiceCapture, onElementSelected, onPageLevelStep, onStepTypeConfirmed, onStartNarration, onSubmitTextNarration, onNarrationApprove, onNarrationRedo, onNarrationEdit, onAddNextStep, onDoneRecording, onCancel, onCancelRecording, onStopRecording, }: RecordingOverlayProps): react_jsx_runtime.JSX.Element;
 
 declare function isAskDrivenInputStepType(stepType?: string | null): boolean;
 declare function isInteractiveInputStepType(stepType?: string | null): boolean;

package/dist/index.d.ts

@@ -779,7 +779,6 @@ interface RecordingOverlayProps {
     pendingNarration: string;
     polishedNarration: string;
     isListening: boolean;
-    onMarkStep: () => void;
     onToggleVoiceCapture: () => void;
     onElementSelected: (recorded: RecordedElement) => void;
     onPageLevelStep: () => void;
@@ -795,7 +794,7 @@ interface RecordingOverlayProps {
     onCancelRecording: () => void;
     onStopRecording: () => void;
 }
-declare function RecordingOverlay({ stepIndex, stepCount, captureEventCount, capturedTranscript, isVoiceCaptureActive, phase, pendingNarration, polishedNarration, isListening, onMarkStep, onToggleVoiceCapture, onElementSelected, onPageLevelStep, onStepTypeConfirmed, onStartNarration, onSubmitTextNarration, onNarrationApprove, onNarrationRedo, onNarrationEdit, onAddNextStep, onDoneRecording, onCancel, onCancelRecording, onStopRecording, }: RecordingOverlayProps): react_jsx_runtime.JSX.Element;
+declare function RecordingOverlay({ stepIndex, stepCount, captureEventCount, capturedTranscript, isVoiceCaptureActive, phase, pendingNarration, polishedNarration, isListening, onToggleVoiceCapture, onElementSelected, onPageLevelStep, onStepTypeConfirmed, onStartNarration, onSubmitTextNarration, onNarrationApprove, onNarrationRedo, onNarrationEdit, onAddNextStep, onDoneRecording, onCancel, onCancelRecording, onStopRecording, }: RecordingOverlayProps): react_jsx_runtime.JSX.Element;
 
 declare function isAskDrivenInputStepType(stepType?: string | null): boolean;
 declare function isInteractiveInputStepType(stepType?: string | null): boolean;

package/dist/index.js

@@ -3167,6 +3167,12 @@ function readPreviewSessionSuppression() {
   }
 }
 
+// src/utils/locationSignature.ts
+function getLocationSignature(locationLike) {
+  if (!locationLike) return "";
+  return `${locationLike.pathname ?? ""}${locationLike.search ?? ""}${locationLike.hash ?? ""}`;
+}
+
 // src/hooks/useTourPlayback.ts
 var import_react12 = require("react");
 
@@ -3799,6 +3805,7 @@ function useTourPlayback({
   showCaptions = true,
   enableAutoDiscovery = true
 }) {
+  const locationSignature = typeof window === "undefined" ? "" : getLocationSignature(window.location);
   const [isActive, setIsActive] = (0, import_react12.useState)(false);
   const [currentStepIndex, setCurrentStepIndex] = (0, import_react12.useState)(0);
   const [totalSteps, setTotalSteps] = (0, import_react12.useState)(0);
@@ -4842,7 +4849,7 @@ function useTourPlayback({
     return () => {
       cancelled = true;
     };
-  }, [serverUrl, toursApiBase, disabled, websiteId, experienceType, enableAutoDiscovery]);
+  }, [serverUrl, toursApiBase, disabled, websiteId, experienceType, enableAutoDiscovery, locationSignature]);
   (0, import_react12.useEffect)(() => {
     if (!shouldRunTourAutoDiscovery({
       enableAutoDiscovery,
@@ -4889,7 +4896,7 @@ function useTourPlayback({
       cancelled = true;
       clearTimeout(timer);
     };
-  }, [websiteId, serverUrl, toursApiBase, disabled, experienceType, userProfile?.userId, userProfile?.type, userProfile?.isNewUser, enableAutoDiscovery]);
+  }, [websiteId, serverUrl, toursApiBase, disabled, experienceType, userProfile?.userId, userProfile?.type, userProfile?.isNewUser, enableAutoDiscovery, locationSignature]);
   (0, import_react12.useEffect)(() => {
     if (!disabled || !isActiveRef.current) return;
     stopTour();
@@ -5107,6 +5114,7 @@ function useExperiencePlaybackController({
   showCaptions = true,
   initialExperienceType = "tour"
 }) {
+  const locationSignature = typeof window === "undefined" ? "" : getLocationSignature(window.location);
   const [activeExperienceType, setActiveExperienceType] = (0, import_react13.useState)(initialExperienceType);
   const [startingExperienceType, setStartingExperienceType] = (0, import_react13.useState)(null);
   const [pendingPrompt, setPendingPrompt] = (0, import_react13.useState)(null);
@@ -5302,7 +5310,7 @@ function useExperiencePlaybackController({
       cancelled = true;
       previewDiscoveryInFlightRef.current = false;
     };
-  }, [disabled, playback.isActive, queueExperienceStart, serverUrl, startingExperienceType, toursApiBase, websiteId]);
+  }, [disabled, playback.isActive, queueExperienceStart, serverUrl, startingExperienceType, toursApiBase, websiteId, locationSignature]);
   (0, import_react13.useEffect)(() => {
     if (!shouldDiscoverEligibleTours({
       disabled,
@@ -5353,7 +5361,7 @@ function useExperiencePlaybackController({
       cancelled = true;
       clearTimeout(timer);
     };
-  }, [disabled, playback.isActive, queueExperienceStart, serverUrl, startingExperienceType, toursApiBase, userProfile, websiteId]);
+  }, [disabled, playback.isActive, queueExperienceStart, serverUrl, startingExperienceType, toursApiBase, userProfile, websiteId, locationSignature]);
   return {
     activeExperienceType,
     startingExperienceType,
@@ -7588,7 +7596,14 @@ var panelBase = {
   fontSize: "13px",
   color: "#18181b"
 };
-function ActiveHUD({ stepCount, captureEventCount, isVoiceCaptureActive, minimized, onMarkStep, onToggleVoiceCapture, onToggleMinimized, onStop, onCancel }) {
+function ActiveHUD({ stepCount, captureEventCount, isVoiceCaptureActive, minimized, onToggleVoiceCapture, onToggleMinimized, onStop, onCancel }) {
+  const [hasActivatedVoiceCapture, setHasActivatedVoiceCapture] = (0, import_react17.useState)(isVoiceCaptureActive);
+  (0, import_react17.useEffect)(() => {
+    if (isVoiceCaptureActive) {
+      setHasActivatedVoiceCapture(true);
+    }
+  }, [isVoiceCaptureActive]);
+  const voiceCaptureLabel = isVoiceCaptureActive ? "Pause" : hasActivatedVoiceCapture ? "Continue" : "Start";
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
@@ -7648,44 +7663,23 @@ function ActiveHUD({ stepCount, captureEventCount, isVoiceCaptureActive, minimiz
         ),
         !minimized && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: "#d4d4d8", fontSize: "12px", whiteSpace: "nowrap", fontWeight: 500 }, children: captureEventCount <= 1 ? "Perform the workflow, then press Start to capture voice" : `${captureEventCount - 1} interactions \u2022 ${stepCount} note${stepCount !== 1 ? "s" : ""}` }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "button",
-            {
-              onClick: onMarkStep,
-              style: {
-                padding: "8px 16px",
-                background: "linear-gradient(135deg, #3b82f6, #2563eb)",
-                color: "#fff",
-                border: "none",
-                borderRadius: "10px",
-                cursor: "pointer",
-                fontSize: "13px",
-                fontWeight: 700,
-                whiteSpace: "nowrap",
-                boxShadow: "0 4px 12px rgba(59, 130, 246, 0.3)",
-                transition: "transform 0.1s"
-              },
-              onMouseDown: (e) => e.currentTarget.style.transform = "scale(0.95)",
-              onMouseUp: (e) => e.currentTarget.style.transform = "scale(1)",
-              children: "+ Add note"
-            }
-          ),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "button",
             {
               onClick: onToggleVoiceCapture,
               style: {
                 padding: "7px 12px",
-                background: isVoiceCaptureActive ? "rgba(59,130,246,0.2)" : "rgba(255,255,255,0.1)",
-                color: isVoiceCaptureActive ? "#93c5fd" : "#e4e4e7",
-                border: "1px solid rgba(255,255,255,0.12)",
+                background: isVoiceCaptureActive ? "linear-gradient(135deg, rgba(251, 191, 36, 0.28), rgba(245, 158, 11, 0.22))" : "linear-gradient(135deg, #34d399, #059669)",
+                color: isVoiceCaptureActive ? "#fef3c7" : "#f0fdf4",
+                border: isVoiceCaptureActive ? "1px solid rgba(251,191,36,0.35)" : "1px solid rgba(16,185,129,0.45)",
                 borderRadius: "8px",
                 cursor: "pointer",
                 fontSize: "12px",
                 fontWeight: 600,
+                boxShadow: isVoiceCaptureActive ? "0 0 0 1px rgba(251,191,36,0.08), 0 6px 16px rgba(245,158,11,0.18)" : "0 6px 16px rgba(5,150,105,0.28)",
                 transition: "all 0.2s"
               },
-              children: isVoiceCaptureActive ? "Pause" : "Start"
+              children: voiceCaptureLabel
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -8442,7 +8436,6 @@ function RecordingOverlay({
   pendingNarration,
   polishedNarration,
   isListening,
-  onMarkStep,
   onToggleVoiceCapture,
   onElementSelected,
   onPageLevelStep,
@@ -8535,7 +8528,6 @@ function RecordingOverlay({
         captureEventCount,
         isVoiceCaptureActive,
         minimized: hudMinimized,
-        onMarkStep,
         onToggleVoiceCapture,
         onToggleMinimized: () => setHudMinimized((value) => !value),
         onStop: onDoneRecording,
@@ -11206,7 +11198,6 @@ function ModelNexChatBubble({
           pendingNarration: recording.pendingNarration,
           polishedNarration: recording.polishedNarration,
           isListening: voice.isListening,
-          onMarkStep: () => recording.markStep(),
           onToggleVoiceCapture: () => recording.toggleVoiceCapture(),
           onElementSelected: (recorded) => recording.selectElement(recorded),
           onPageLevelStep: () => recording.selectPageLevel(),

package/dist/index.mjs

@@ -2958,6 +2958,12 @@ function readPreviewSessionSuppression() {
   }
 }
 
+// src/utils/locationSignature.ts
+function getLocationSignature(locationLike) {
+  if (!locationLike) return "";
+  return `${locationLike.pathname ?? ""}${locationLike.search ?? ""}${locationLike.hash ?? ""}`;
+}
+
 // src/hooks/useTourPlayback.ts
 import { useState as useState7, useRef as useRef8, useCallback as useCallback7, useEffect as useEffect11, useContext as useContext4 } from "react";
 
@@ -3590,6 +3596,7 @@ function useTourPlayback({
   showCaptions = true,
   enableAutoDiscovery = true
 }) {
+  const locationSignature = typeof window === "undefined" ? "" : getLocationSignature(window.location);
   const [isActive, setIsActive] = useState7(false);
   const [currentStepIndex, setCurrentStepIndex] = useState7(0);
   const [totalSteps, setTotalSteps] = useState7(0);
@@ -4633,7 +4640,7 @@ function useTourPlayback({
     return () => {
       cancelled = true;
     };
-  }, [serverUrl, toursApiBase, disabled, websiteId, experienceType, enableAutoDiscovery]);
+  }, [serverUrl, toursApiBase, disabled, websiteId, experienceType, enableAutoDiscovery, locationSignature]);
   useEffect11(() => {
     if (!shouldRunTourAutoDiscovery({
       enableAutoDiscovery,
@@ -4680,7 +4687,7 @@ function useTourPlayback({
       cancelled = true;
       clearTimeout(timer);
     };
-  }, [websiteId, serverUrl, toursApiBase, disabled, experienceType, userProfile?.userId, userProfile?.type, userProfile?.isNewUser, enableAutoDiscovery]);
+  }, [websiteId, serverUrl, toursApiBase, disabled, experienceType, userProfile?.userId, userProfile?.type, userProfile?.isNewUser, enableAutoDiscovery, locationSignature]);
   useEffect11(() => {
     if (!disabled || !isActiveRef.current) return;
     stopTour();
@@ -4898,6 +4905,7 @@ function useExperiencePlaybackController({
   showCaptions = true,
   initialExperienceType = "tour"
 }) {
+  const locationSignature = typeof window === "undefined" ? "" : getLocationSignature(window.location);
   const [activeExperienceType, setActiveExperienceType] = useState8(initialExperienceType);
   const [startingExperienceType, setStartingExperienceType] = useState8(null);
   const [pendingPrompt, setPendingPrompt] = useState8(null);
@@ -5093,7 +5101,7 @@ function useExperiencePlaybackController({
       cancelled = true;
       previewDiscoveryInFlightRef.current = false;
     };
-  }, [disabled, playback.isActive, queueExperienceStart, serverUrl, startingExperienceType, toursApiBase, websiteId]);
+  }, [disabled, playback.isActive, queueExperienceStart, serverUrl, startingExperienceType, toursApiBase, websiteId, locationSignature]);
   useEffect12(() => {
     if (!shouldDiscoverEligibleTours({
       disabled,
@@ -5144,7 +5152,7 @@ function useExperiencePlaybackController({
       cancelled = true;
       clearTimeout(timer);
     };
-  }, [disabled, playback.isActive, queueExperienceStart, serverUrl, startingExperienceType, toursApiBase, userProfile, websiteId]);
+  }, [disabled, playback.isActive, queueExperienceStart, serverUrl, startingExperienceType, toursApiBase, userProfile, websiteId, locationSignature]);
   return {
     activeExperienceType,
     startingExperienceType,
@@ -7378,7 +7386,14 @@ var panelBase = {
   fontSize: "13px",
   color: "#18181b"
 };
-function ActiveHUD({ stepCount, captureEventCount, isVoiceCaptureActive, minimized, onMarkStep, onToggleVoiceCapture, onToggleMinimized, onStop, onCancel }) {
+function ActiveHUD({ stepCount, captureEventCount, isVoiceCaptureActive, minimized, onToggleVoiceCapture, onToggleMinimized, onStop, onCancel }) {
+  const [hasActivatedVoiceCapture, setHasActivatedVoiceCapture] = useState12(isVoiceCaptureActive);
+  useEffect16(() => {
+    if (isVoiceCaptureActive) {
+      setHasActivatedVoiceCapture(true);
+    }
+  }, [isVoiceCaptureActive]);
+  const voiceCaptureLabel = isVoiceCaptureActive ? "Pause" : hasActivatedVoiceCapture ? "Continue" : "Start";
   return /* @__PURE__ */ jsxs2(
     "div",
     {
@@ -7438,44 +7453,23 @@ function ActiveHUD({ stepCount, captureEventCount, isVoiceCaptureActive, minimiz
         ),
         !minimized && /* @__PURE__ */ jsxs2(Fragment, { children: [
           /* @__PURE__ */ jsx3("span", { style: { color: "#d4d4d8", fontSize: "12px", whiteSpace: "nowrap", fontWeight: 500 }, children: captureEventCount <= 1 ? "Perform the workflow, then press Start to capture voice" : `${captureEventCount - 1} interactions \u2022 ${stepCount} note${stepCount !== 1 ? "s" : ""}` }),
-          /* @__PURE__ */ jsx3(
-            "button",
-            {
-              onClick: onMarkStep,
-              style: {
-                padding: "8px 16px",
-                background: "linear-gradient(135deg, #3b82f6, #2563eb)",
-                color: "#fff",
-                border: "none",
-                borderRadius: "10px",
-                cursor: "pointer",
-                fontSize: "13px",
-                fontWeight: 700,
-                whiteSpace: "nowrap",
-                boxShadow: "0 4px 12px rgba(59, 130, 246, 0.3)",
-                transition: "transform 0.1s"
-              },
-              onMouseDown: (e) => e.currentTarget.style.transform = "scale(0.95)",
-              onMouseUp: (e) => e.currentTarget.style.transform = "scale(1)",
-              children: "+ Add note"
-            }
-          ),
           /* @__PURE__ */ jsx3(
             "button",
             {
               onClick: onToggleVoiceCapture,
               style: {
                 padding: "7px 12px",
-                background: isVoiceCaptureActive ? "rgba(59,130,246,0.2)" : "rgba(255,255,255,0.1)",
-                color: isVoiceCaptureActive ? "#93c5fd" : "#e4e4e7",
-                border: "1px solid rgba(255,255,255,0.12)",
+                background: isVoiceCaptureActive ? "linear-gradient(135deg, rgba(251, 191, 36, 0.28), rgba(245, 158, 11, 0.22))" : "linear-gradient(135deg, #34d399, #059669)",
+                color: isVoiceCaptureActive ? "#fef3c7" : "#f0fdf4",
+                border: isVoiceCaptureActive ? "1px solid rgba(251,191,36,0.35)" : "1px solid rgba(16,185,129,0.45)",
                 borderRadius: "8px",
                 cursor: "pointer",
                 fontSize: "12px",
                 fontWeight: 600,
+                boxShadow: isVoiceCaptureActive ? "0 0 0 1px rgba(251,191,36,0.08), 0 6px 16px rgba(245,158,11,0.18)" : "0 6px 16px rgba(5,150,105,0.28)",
                 transition: "all 0.2s"
               },
-              children: isVoiceCaptureActive ? "Pause" : "Start"
+              children: voiceCaptureLabel
             }
           ),
           /* @__PURE__ */ jsx3(
@@ -8232,7 +8226,6 @@ function RecordingOverlay({
   pendingNarration,
   polishedNarration,
   isListening,
-  onMarkStep,
   onToggleVoiceCapture,
   onElementSelected,
   onPageLevelStep,
@@ -8325,7 +8318,6 @@ function RecordingOverlay({
         captureEventCount,
         isVoiceCaptureActive,
         minimized: hudMinimized,
-        onMarkStep,
         onToggleVoiceCapture,
         onToggleMinimized: () => setHudMinimized((value) => !value),
         onStop: onDoneRecording,
@@ -10996,7 +10988,6 @@ function ModelNexChatBubble({
           pendingNarration: recording.pendingNarration,
           polishedNarration: recording.polishedNarration,
           isListening: voice.isListening,
-          onMarkStep: () => recording.markStep(),
           onToggleVoiceCapture: () => recording.toggleVoiceCapture(),
           onElementSelected: (recorded) => recording.selectElement(recorded),
           onPageLevelStep: () => recording.selectPageLevel(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelnex/sdk",
-  "version": "0.5.34",
+  "version": "0.5.36",
   "description": "React SDK for natural language control of web apps via AI agents",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",