@modelnex/sdk 0.5.38 → 0.5.40

package/dist/index.js

@@ -3305,6 +3305,22 @@ function createTourSocketPool({
 }
 var tourSocketPool = createTourSocketPool();
 
+// src/utils/reviewModeToggle.ts
+function isReviewModeEnabled(devMode, requestedReviewMode) {
+  return Boolean(devMode && requestedReviewMode);
+}
+function getReviewModeToggleConfig(playbackState) {
+  const isPaused = playbackState === "paused";
+  return {
+    icon: isPaused ? "\u25B6" : "\u23F8",
+    label: isPaused ? "Continue Workflow" : "Pause for Feedback",
+    shouldResume: isPaused
+  };
+}
+function shouldCaptureReviewDraft(isReviewMode, playbackState) {
+  return isReviewMode && playbackState === "paused";
+}
+
 // src/utils/tourTransport.ts
 function compactCaptureEventForTransport(event) {
   return {
@@ -3726,6 +3742,20 @@ function isValueBearingElement(element) {
     element && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement)
   );
 }
+var DEFAULT_TEXT_INPUT_IDLE_COMMIT_MS = 700;
+var DEFAULT_SELECTION_INPUT_IDLE_COMMIT_MS = 250;
+function getManualInputCommitPolicy(target) {
+  const tagName = String(target.tagName || "").toLowerCase();
+  const role = String(target.role || "").toLowerCase();
+  const inputType = String(target.type || "").toLowerCase();
+  const isContentEditable = Boolean(target.isContentEditable);
+  const isSelectionLike = tagName === "select" || role === "combobox" || ["checkbox", "radio", "range", "color", "date", "datetime-local", "month", "time", "week"].includes(inputType);
+  return {
+    idleCommitMs: isSelectionLike ? DEFAULT_SELECTION_INPUT_IDLE_COMMIT_MS : DEFAULT_TEXT_INPUT_IDLE_COMMIT_MS,
+    commitOnBlur: !isSelectionLike || tagName === "select" || role === "combobox" || isContentEditable,
+    commitOnChange: true
+  };
+}
 function resolveWaitTargetElement(element) {
   if (isValueBearingElement(element) || element.isContentEditable) {
     return element;
@@ -3745,9 +3775,40 @@ function readWaitTargetValue(element) {
   if (isValueBearingElement(element)) {
     return element.value.trim();
   }
+  const genericValue = element.value;
+  if (typeof genericValue === "string") {
+    return genericValue.trim();
+  }
+  if (typeof genericValue === "number" && Number.isFinite(genericValue)) {
+    return String(genericValue).trim();
+  }
   if (element.isContentEditable) {
     return (element.textContent || "").trim();
   }
+  const ariaValueText = element.getAttribute("aria-valuetext");
+  if (typeof ariaValueText === "string" && ariaValueText.trim()) {
+    return ariaValueText.trim();
+  }
+  const ariaValueNow = element.getAttribute("aria-valuenow");
+  if (typeof ariaValueNow === "string" && ariaValueNow.trim()) {
+    return ariaValueNow.trim();
+  }
+  if (element.getAttribute("role") === "textbox" || element.getAttribute("role") === "combobox") {
+    const nestedControl = element.querySelector(
+      'input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled]), [contenteditable="true"], [role="textbox"], [role="combobox"]'
+    );
+    if (nestedControl && nestedControl !== element) {
+      const nestedValue = readWaitTargetValue(nestedControl);
+      if (nestedValue) {
+        return nestedValue;
+      }
+    }
+    return (element.textContent || "").trim();
+  }
+  const shadowInput = findInputInShadowRoot(element);
+  if (shadowInput) {
+    return shadowInput.value.trim();
+  }
   return "";
 }
 function buildManualCompletionTranscript(step, eventName) {
@@ -3769,6 +3830,12 @@ function createManualWaitForTarget(rawTarget, eventName, step) {
   const target = resolveWaitTargetElement(rawTarget);
   const completionTranscript = buildManualCompletionTranscript(step, eventName);
   const isInputLikeEvent = isInputLikeWait(eventName, step);
+  const commitPolicy = getManualInputCommitPolicy({
+    tagName: target.tagName,
+    role: target.getAttribute("role"),
+    type: target.type ?? null,
+    isContentEditable: target.isContentEditable
+  });
   if (isInputLikeEvent && readWaitTargetValue(target)) {
     const initialValue = readWaitTargetValue(target);
     return {
@@ -3780,6 +3847,8 @@ function createManualWaitForTarget(rawTarget, eventName, step) {
   let cleanup = () => void 0;
   const promise = new Promise((resolve) => {
     const listeners2 = [];
+    let observer = null;
+    let idleTimer = null;
     let settled = false;
     const finish = () => {
       if (settled) return;
@@ -3792,20 +3861,61 @@ function createManualWaitForTarget(rawTarget, eventName, step) {
       listeners2.push({ node, type, handler });
     };
     if (isInputLikeEvent) {
-      const handleInputLikeEvent = () => {
+      const clearIdleCommit = () => {
+        if (idleTimer) {
+          clearTimeout(idleTimer);
+          idleTimer = null;
+        }
+      };
+      const scheduleIdleCommit = () => {
+        const currentValue = readWaitTargetValue(target);
+        if (!currentValue) {
+          clearIdleCommit();
+          return;
+        }
+        clearIdleCommit();
+        idleTimer = setTimeout(() => {
+          idleTimer = null;
+          finish();
+        }, commitPolicy.idleCommitMs);
+      };
+      const handleImmediateCommitEvent = () => {
         const currentValue = readWaitTargetValue(target);
         if (currentValue) {
+          clearIdleCommit();
           finish();
         }
       };
-      addListener(target, "input", handleInputLikeEvent);
-      addListener(target, "change", handleInputLikeEvent);
-      addListener(target, "blur", handleInputLikeEvent);
+      addListener(target, "input", scheduleIdleCommit);
+      if (commitPolicy.commitOnChange) {
+        addListener(target, "change", handleImmediateCommitEvent);
+      }
+      if (commitPolicy.commitOnBlur) {
+        addListener(target, "blur", handleImmediateCommitEvent);
+      }
+      if (typeof MutationObserver !== "undefined") {
+        observer = new MutationObserver(() => {
+          scheduleIdleCommit();
+        });
+        observer.observe(target, {
+          subtree: true,
+          childList: true,
+          characterData: true,
+          attributes: true,
+          attributeFilter: ["value", "aria-valuetext", "aria-valuenow", "aria-activedescendant"]
+        });
+      }
     } else {
       const handleActionEvent = () => finish();
       addListener(target, eventName, handleActionEvent);
     }
     cleanup = () => {
+      if (idleTimer) {
+        clearTimeout(idleTimer);
+        idleTimer = null;
+      }
+      observer?.disconnect();
+      observer = null;
       listeners2.forEach(({ node, type, handler }) => node.removeEventListener(type, handler));
       listeners2.length = 0;
     };
@@ -4826,7 +4936,7 @@ function useTourPlayback({
     }
     claimedPlaybackOwnerKeyRef.current = ownerKey;
     startRequestedRef.current = true;
-    const shouldReview = Boolean(options?.reviewMode);
+    const shouldReview = isReviewModeEnabled(devModeRef.current, Boolean(options?.reviewMode));
     resetCaptionSuppression();
     setReviewStatusMessage(null);
     setIsReviewMode(shouldReview);
@@ -8804,19 +8914,6 @@ function isTourListeningSessionActive(state) {
   return state.isTourActive || state.isOnboardingActive || Boolean(state.startingExperienceType);
 }
 
-// src/utils/reviewModeToggle.ts
-function getReviewModeToggleConfig(playbackState) {
-  const isPaused = playbackState === "paused";
-  return {
-    icon: isPaused ? "\u25B6" : "\u23F8",
-    label: isPaused ? "Continue Workflow" : "Pause for Feedback",
-    shouldResume: isPaused
-  };
-}
-function shouldCaptureReviewDraft(isReviewMode, playbackState) {
-  return isReviewMode && playbackState === "paused";
-}
-
 // src/utils/reviewVoiceRouting.ts
 function resolveSinglePlaybackTranscriptTarget(snapshot) {
   return shouldCaptureReviewDraft(snapshot.isReviewMode, snapshot.playbackState) ? "review_draft" : "playback";
@@ -9613,6 +9710,7 @@ function ModelNexChatBubble({
   const tourPlayback = (0, import_react18.useMemo)(() => createPlaybackView("tour"), [createPlaybackView]);
   const onboardingPlayback = (0, import_react18.useMemo)(() => createPlaybackView("onboarding"), [createPlaybackView]);
   const tourReviewToggle = getReviewModeToggleConfig(tourPlayback.playbackState);
+  const tourReviewModeEnabled = isReviewModeEnabled(devMode, tourPlayback.isReviewMode);
   const lastAutoTaggedUrlRef = (0, import_react18.useRef)(null);
   const handleAutoTag = (0, import_react18.useCallback)(async () => {
     if (!ctx) return;
@@ -9660,6 +9758,7 @@ function ModelNexChatBubble({
     }
   }, [authoringMode, handleAutoTag, ctx?.extractedElements.length, window.location.pathname]);
   const onboardingReviewToggle = getReviewModeToggleConfig(onboardingPlayback.playbackState);
+  const onboardingReviewModeEnabled = isReviewModeEnabled(devMode, onboardingPlayback.isReviewMode);
   const pendingPrompt = playbackController.pendingPrompt;
   const pendingNotificationType = (onboardingPlayback.pendingTour || tourPlayback.pendingTour)?.notificationType ?? "bubble_card";
   const isPlaybackActive = tourPlayback.isActive || onboardingPlayback.isActive;
@@ -10429,7 +10528,7 @@ function ModelNexChatBubble({
               ]
             }
           ) }),
-          tourPlayback.isActive && tourPlayback.isReviewMode && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          tourPlayback.isActive && tourReviewModeEnabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             "div",
             {
               style: {
@@ -10724,7 +10823,7 @@ function ModelNexChatBubble({
                       ] })
                     ] })
                   ] }),
-                  onboardingPlayback.isReviewMode && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                  onboardingReviewModeEnabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                     "div",
                     {
                       style: {
@@ -10830,7 +10929,7 @@ function ModelNexChatBubble({
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
-                    !onboardingPlayback.isReviewMode && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    !onboardingReviewModeEnabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       "button",
                       {
                         onClick: onboardingPlayback.repeatStep,
@@ -10842,7 +10941,7 @@ function ModelNexChatBubble({
                       "button",
                       {
                         onClick: onboardingPlayback.skipTour,
-                        style: { flex: onboardingPlayback.isReviewMode ? 1 : 0.6, borderRadius: "12px", border: "1px solid rgba(220,38,38,0.18)", background: "#fff5f5", color: "#b91c1c", padding: "11px 14px", cursor: "pointer", fontWeight: 700, fontSize: "13px" },
+                        style: { flex: onboardingReviewModeEnabled ? 1 : 0.6, borderRadius: "12px", border: "1px solid rgba(220,38,38,0.18)", background: "#fff5f5", color: "#b91c1c", padding: "11px 14px", cursor: "pointer", fontWeight: 700, fontSize: "13px" },
                         children: "Exit"
                       }
                     )
@@ -10883,7 +10982,7 @@ function ModelNexChatBubble({
                     ) })
                   ] }),
                   tourCurrentStep && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { borderRadius: "14px", background: TOUR_THEME.card, border: `1px solid ${TOUR_THEME.cardBorder}`, padding: "14px" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "15px", lineHeight: 1.55 }, children: tourCurrentStep.ask || tourCurrentStep.narration || tourCurrentStep.goal }) }),
-                  tourPlayback.isReviewMode && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                  tourReviewModeEnabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                     "div",
                     {
                       style: {
@@ -11337,6 +11436,7 @@ function ModelNexOnboardingPanel({
 }) {
   const ctx = (0, import_react19.useContext)(ModelNexContext);
   const serverUrl = ctx?.serverUrl ?? DEFAULT_MODELNEX_SERVER_URL;
+  const devMode = ctx?.devMode ?? false;
   const voice = useVoice(serverUrl);
   const audioLevels = useAudioLevel(voice.isListening);
   const [input, setInput] = (0, import_react19.useState)("");
@@ -11372,6 +11472,7 @@ function ModelNexOnboardingPanel({
     handleVoiceInput: playback.handleVoiceInput
   });
   const reviewToggle = getReviewModeToggleConfig(playback.playbackState);
+  const reviewModeEnabled = isReviewModeEnabled(devMode, playback.isReviewMode);
   (0, import_react19.useEffect)(() => {
     playbackVoiceRoutingRef.current = {
       isReviewMode: playback.isReviewMode,
@@ -11796,7 +11897,7 @@ function ModelNexOnboardingPanel({
             ] })
           ] }),
           sttError === "not-allowed" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "12px", color: "#b45309", lineHeight: 1.4, padding: "8px 12px", borderRadius: "10px", background: "#fef3c7" }, children: "Microphone blocked. Allow access in your browser to use voice commands." }),
-          playback.isReviewMode && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          reviewModeEnabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             "div",
             {
               style: {
@@ -11907,7 +12008,7 @@ function ModelNexOnboardingPanel({
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { padding: "0 18px 18px", display: "flex", gap: "8px" }, children: [
-          playback.isReviewMode && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          reviewModeEnabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             "button",
             {
               type: "button",
@@ -11934,7 +12035,7 @@ function ModelNexOnboardingPanel({
             "button",
             {
               onClick: playback.repeatStep,
-              style: { flex: playback.isReviewMode ? 0.6 : 1, borderRadius: "12px", border: "1px solid rgba(15,23,42,0.12)", background: "#fff", padding: "11px 14px", cursor: "pointer", fontWeight: 600 },
+              style: { flex: reviewModeEnabled ? 0.6 : 1, borderRadius: "12px", border: "1px solid rgba(15,23,42,0.12)", background: "#fff", padding: "11px 14px", cursor: "pointer", fontWeight: 600 },
               children: "Repeat"
             }
           ),

package/dist/index.mjs

@@ -3094,6 +3094,22 @@ function createTourSocketPool({
 }
 var tourSocketPool = createTourSocketPool();
 
+// src/utils/reviewModeToggle.ts
+function isReviewModeEnabled(devMode, requestedReviewMode) {
+  return Boolean(devMode && requestedReviewMode);
+}
+function getReviewModeToggleConfig(playbackState) {
+  const isPaused = playbackState === "paused";
+  return {
+    icon: isPaused ? "\u25B6" : "\u23F8",
+    label: isPaused ? "Continue Workflow" : "Pause for Feedback",
+    shouldResume: isPaused
+  };
+}
+function shouldCaptureReviewDraft(isReviewMode, playbackState) {
+  return isReviewMode && playbackState === "paused";
+}
+
 // src/utils/tourTransport.ts
 function compactCaptureEventForTransport(event) {
   return {
@@ -3515,6 +3531,20 @@ function isValueBearingElement(element) {
     element && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement)
   );
 }
+var DEFAULT_TEXT_INPUT_IDLE_COMMIT_MS = 700;
+var DEFAULT_SELECTION_INPUT_IDLE_COMMIT_MS = 250;
+function getManualInputCommitPolicy(target) {
+  const tagName = String(target.tagName || "").toLowerCase();
+  const role = String(target.role || "").toLowerCase();
+  const inputType = String(target.type || "").toLowerCase();
+  const isContentEditable = Boolean(target.isContentEditable);
+  const isSelectionLike = tagName === "select" || role === "combobox" || ["checkbox", "radio", "range", "color", "date", "datetime-local", "month", "time", "week"].includes(inputType);
+  return {
+    idleCommitMs: isSelectionLike ? DEFAULT_SELECTION_INPUT_IDLE_COMMIT_MS : DEFAULT_TEXT_INPUT_IDLE_COMMIT_MS,
+    commitOnBlur: !isSelectionLike || tagName === "select" || role === "combobox" || isContentEditable,
+    commitOnChange: true
+  };
+}
 function resolveWaitTargetElement(element) {
   if (isValueBearingElement(element) || element.isContentEditable) {
     return element;
@@ -3534,9 +3564,40 @@ function readWaitTargetValue(element) {
   if (isValueBearingElement(element)) {
     return element.value.trim();
   }
+  const genericValue = element.value;
+  if (typeof genericValue === "string") {
+    return genericValue.trim();
+  }
+  if (typeof genericValue === "number" && Number.isFinite(genericValue)) {
+    return String(genericValue).trim();
+  }
   if (element.isContentEditable) {
     return (element.textContent || "").trim();
   }
+  const ariaValueText = element.getAttribute("aria-valuetext");
+  if (typeof ariaValueText === "string" && ariaValueText.trim()) {
+    return ariaValueText.trim();
+  }
+  const ariaValueNow = element.getAttribute("aria-valuenow");
+  if (typeof ariaValueNow === "string" && ariaValueNow.trim()) {
+    return ariaValueNow.trim();
+  }
+  if (element.getAttribute("role") === "textbox" || element.getAttribute("role") === "combobox") {
+    const nestedControl = element.querySelector(
+      'input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled]), [contenteditable="true"], [role="textbox"], [role="combobox"]'
+    );
+    if (nestedControl && nestedControl !== element) {
+      const nestedValue = readWaitTargetValue(nestedControl);
+      if (nestedValue) {
+        return nestedValue;
+      }
+    }
+    return (element.textContent || "").trim();
+  }
+  const shadowInput = findInputInShadowRoot(element);
+  if (shadowInput) {
+    return shadowInput.value.trim();
+  }
   return "";
 }
 function buildManualCompletionTranscript(step, eventName) {
@@ -3558,6 +3619,12 @@ function createManualWaitForTarget(rawTarget, eventName, step) {
   const target = resolveWaitTargetElement(rawTarget);
   const completionTranscript = buildManualCompletionTranscript(step, eventName);
   const isInputLikeEvent = isInputLikeWait(eventName, step);
+  const commitPolicy = getManualInputCommitPolicy({
+    tagName: target.tagName,
+    role: target.getAttribute("role"),
+    type: target.type ?? null,
+    isContentEditable: target.isContentEditable
+  });
   if (isInputLikeEvent && readWaitTargetValue(target)) {
     const initialValue = readWaitTargetValue(target);
     return {
@@ -3569,6 +3636,8 @@ function createManualWaitForTarget(rawTarget, eventName, step) {
   let cleanup = () => void 0;
   const promise = new Promise((resolve) => {
     const listeners2 = [];
+    let observer = null;
+    let idleTimer = null;
     let settled = false;
     const finish = () => {
       if (settled) return;
@@ -3581,20 +3650,61 @@ function createManualWaitForTarget(rawTarget, eventName, step) {
       listeners2.push({ node, type, handler });
     };
     if (isInputLikeEvent) {
-      const handleInputLikeEvent = () => {
+      const clearIdleCommit = () => {
+        if (idleTimer) {
+          clearTimeout(idleTimer);
+          idleTimer = null;
+        }
+      };
+      const scheduleIdleCommit = () => {
+        const currentValue = readWaitTargetValue(target);
+        if (!currentValue) {
+          clearIdleCommit();
+          return;
+        }
+        clearIdleCommit();
+        idleTimer = setTimeout(() => {
+          idleTimer = null;
+          finish();
+        }, commitPolicy.idleCommitMs);
+      };
+      const handleImmediateCommitEvent = () => {
         const currentValue = readWaitTargetValue(target);
         if (currentValue) {
+          clearIdleCommit();
           finish();
         }
       };
-      addListener(target, "input", handleInputLikeEvent);
-      addListener(target, "change", handleInputLikeEvent);
-      addListener(target, "blur", handleInputLikeEvent);
+      addListener(target, "input", scheduleIdleCommit);
+      if (commitPolicy.commitOnChange) {
+        addListener(target, "change", handleImmediateCommitEvent);
+      }
+      if (commitPolicy.commitOnBlur) {
+        addListener(target, "blur", handleImmediateCommitEvent);
+      }
+      if (typeof MutationObserver !== "undefined") {
+        observer = new MutationObserver(() => {
+          scheduleIdleCommit();
+        });
+        observer.observe(target, {
+          subtree: true,
+          childList: true,
+          characterData: true,
+          attributes: true,
+          attributeFilter: ["value", "aria-valuetext", "aria-valuenow", "aria-activedescendant"]
+        });
+      }
     } else {
       const handleActionEvent = () => finish();
       addListener(target, eventName, handleActionEvent);
     }
     cleanup = () => {
+      if (idleTimer) {
+        clearTimeout(idleTimer);
+        idleTimer = null;
+      }
+      observer?.disconnect();
+      observer = null;
       listeners2.forEach(({ node, type, handler }) => node.removeEventListener(type, handler));
       listeners2.length = 0;
     };
@@ -4615,7 +4725,7 @@ function useTourPlayback({
     }
     claimedPlaybackOwnerKeyRef.current = ownerKey;
     startRequestedRef.current = true;
-    const shouldReview = Boolean(options?.reviewMode);
+    const shouldReview = isReviewModeEnabled(devModeRef.current, Boolean(options?.reviewMode));
     resetCaptionSuppression();
     setReviewStatusMessage(null);
     setIsReviewMode(shouldReview);
@@ -8592,19 +8702,6 @@ function isTourListeningSessionActive(state) {
   return state.isTourActive || state.isOnboardingActive || Boolean(state.startingExperienceType);
 }
 
-// src/utils/reviewModeToggle.ts
-function getReviewModeToggleConfig(playbackState) {
-  const isPaused = playbackState === "paused";
-  return {
-    icon: isPaused ? "\u25B6" : "\u23F8",
-    label: isPaused ? "Continue Workflow" : "Pause for Feedback",
-    shouldResume: isPaused
-  };
-}
-function shouldCaptureReviewDraft(isReviewMode, playbackState) {
-  return isReviewMode && playbackState === "paused";
-}
-
 // src/utils/reviewVoiceRouting.ts
 function resolveSinglePlaybackTranscriptTarget(snapshot) {
   return shouldCaptureReviewDraft(snapshot.isReviewMode, snapshot.playbackState) ? "review_draft" : "playback";
@@ -9401,6 +9498,7 @@ function ModelNexChatBubble({
   const tourPlayback = useMemo3(() => createPlaybackView("tour"), [createPlaybackView]);
   const onboardingPlayback = useMemo3(() => createPlaybackView("onboarding"), [createPlaybackView]);
   const tourReviewToggle = getReviewModeToggleConfig(tourPlayback.playbackState);
+  const tourReviewModeEnabled = isReviewModeEnabled(devMode, tourPlayback.isReviewMode);
   const lastAutoTaggedUrlRef = useRef13(null);
   const handleAutoTag = useCallback12(async () => {
     if (!ctx) return;
@@ -9448,6 +9546,7 @@ function ModelNexChatBubble({
     }
   }, [authoringMode, handleAutoTag, ctx?.extractedElements.length, window.location.pathname]);
   const onboardingReviewToggle = getReviewModeToggleConfig(onboardingPlayback.playbackState);
+  const onboardingReviewModeEnabled = isReviewModeEnabled(devMode, onboardingPlayback.isReviewMode);
   const pendingPrompt = playbackController.pendingPrompt;
   const pendingNotificationType = (onboardingPlayback.pendingTour || tourPlayback.pendingTour)?.notificationType ?? "bubble_card";
   const isPlaybackActive = tourPlayback.isActive || onboardingPlayback.isActive;
@@ -10217,7 +10316,7 @@ function ModelNexChatBubble({
               ]
             }
           ) }),
-          tourPlayback.isActive && tourPlayback.isReviewMode && /* @__PURE__ */ jsxs3(
+          tourPlayback.isActive && tourReviewModeEnabled && /* @__PURE__ */ jsxs3(
             "div",
             {
               style: {
@@ -10512,7 +10611,7 @@ function ModelNexChatBubble({
                       ] })
                     ] })
                   ] }),
-                  onboardingPlayback.isReviewMode && /* @__PURE__ */ jsxs3(
+                  onboardingReviewModeEnabled && /* @__PURE__ */ jsxs3(
                     "div",
                     {
                       style: {
@@ -10618,7 +10717,7 @@ function ModelNexChatBubble({
                     }
                   ),
                   /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "8px" }, children: [
-                    !onboardingPlayback.isReviewMode && /* @__PURE__ */ jsx4(
+                    !onboardingReviewModeEnabled && /* @__PURE__ */ jsx4(
                       "button",
                       {
                         onClick: onboardingPlayback.repeatStep,
@@ -10630,7 +10729,7 @@ function ModelNexChatBubble({
                       "button",
                       {
                         onClick: onboardingPlayback.skipTour,
-                        style: { flex: onboardingPlayback.isReviewMode ? 1 : 0.6, borderRadius: "12px", border: "1px solid rgba(220,38,38,0.18)", background: "#fff5f5", color: "#b91c1c", padding: "11px 14px", cursor: "pointer", fontWeight: 700, fontSize: "13px" },
+                        style: { flex: onboardingReviewModeEnabled ? 1 : 0.6, borderRadius: "12px", border: "1px solid rgba(220,38,38,0.18)", background: "#fff5f5", color: "#b91c1c", padding: "11px 14px", cursor: "pointer", fontWeight: 700, fontSize: "13px" },
                         children: "Exit"
                       }
                     )
@@ -10671,7 +10770,7 @@ function ModelNexChatBubble({
                     ) })
                   ] }),
                   tourCurrentStep && /* @__PURE__ */ jsx4("div", { style: { borderRadius: "14px", background: TOUR_THEME.card, border: `1px solid ${TOUR_THEME.cardBorder}`, padding: "14px" }, children: /* @__PURE__ */ jsx4("div", { style: { fontSize: "15px", lineHeight: 1.55 }, children: tourCurrentStep.ask || tourCurrentStep.narration || tourCurrentStep.goal }) }),
-                  tourPlayback.isReviewMode && /* @__PURE__ */ jsxs3(
+                  tourReviewModeEnabled && /* @__PURE__ */ jsxs3(
                     "div",
                     {
                       style: {
@@ -11125,6 +11224,7 @@ function ModelNexOnboardingPanel({
 }) {
   const ctx = useContext6(ModelNexContext);
   const serverUrl = ctx?.serverUrl ?? DEFAULT_MODELNEX_SERVER_URL;
+  const devMode = ctx?.devMode ?? false;
   const voice = useVoice(serverUrl);
   const audioLevels = useAudioLevel(voice.isListening);
   const [input, setInput] = useState14("");
@@ -11160,6 +11260,7 @@ function ModelNexOnboardingPanel({
     handleVoiceInput: playback.handleVoiceInput
   });
   const reviewToggle = getReviewModeToggleConfig(playback.playbackState);
+  const reviewModeEnabled = isReviewModeEnabled(devMode, playback.isReviewMode);
   useEffect18(() => {
     playbackVoiceRoutingRef.current = {
       isReviewMode: playback.isReviewMode,
@@ -11584,7 +11685,7 @@ function ModelNexOnboardingPanel({
             ] })
           ] }),
           sttError === "not-allowed" && /* @__PURE__ */ jsx5("div", { style: { fontSize: "12px", color: "#b45309", lineHeight: 1.4, padding: "8px 12px", borderRadius: "10px", background: "#fef3c7" }, children: "Microphone blocked. Allow access in your browser to use voice commands." }),
-          playback.isReviewMode && /* @__PURE__ */ jsxs4(
+          reviewModeEnabled && /* @__PURE__ */ jsxs4(
             "div",
             {
               style: {
@@ -11695,7 +11796,7 @@ function ModelNexOnboardingPanel({
           ] })
         ] }),
         /* @__PURE__ */ jsxs4("div", { style: { padding: "0 18px 18px", display: "flex", gap: "8px" }, children: [
-          playback.isReviewMode && /* @__PURE__ */ jsxs4(
+          reviewModeEnabled && /* @__PURE__ */ jsxs4(
             "button",
             {
               type: "button",
@@ -11722,7 +11823,7 @@ function ModelNexOnboardingPanel({
             "button",
             {
               onClick: playback.repeatStep,
-              style: { flex: playback.isReviewMode ? 0.6 : 1, borderRadius: "12px", border: "1px solid rgba(15,23,42,0.12)", background: "#fff", padding: "11px 14px", cursor: "pointer", fontWeight: 600 },
+              style: { flex: reviewModeEnabled ? 0.6 : 1, borderRadius: "12px", border: "1px solid rgba(15,23,42,0.12)", background: "#fff", padding: "11px 14px", cursor: "pointer", fontWeight: 600 },
               children: "Repeat"
             }
           ),

package/package.json

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