@modelnex/sdk 0.5.32 → 0.5.33

package/dist/index.js

@@ -2832,6 +2832,91 @@ async function validateInjectedDevModeKey(serverUrl, websiteId, devModeKey) {
   return validationPromise;
 }
 
+// src/utils/recordingPersistence.ts
+var RECORDING_SESSION_STORAGE_KEY = "modelnex-recording-session";
+var RESTORABLE_RECORDING_PHASES = /* @__PURE__ */ new Set([
+  "active",
+  "selecting",
+  "configuring",
+  "narrating",
+  "reviewing",
+  "saved",
+  "finishing"
+]);
+var TOUR_STEP_TYPES = /* @__PURE__ */ new Set([
+  "narrate",
+  "act",
+  "input",
+  "ask_and_fill",
+  "user_input",
+  "ask_or_fill",
+  "wait_then_act"
+]);
+function canUseSessionStorage() {
+  return typeof window !== "undefined" && typeof window.sessionStorage !== "undefined";
+}
+function isExperienceType(value) {
+  return value === "tour" || value === "onboarding";
+}
+function isTourStepType(value) {
+  return typeof value === "string" && TOUR_STEP_TYPES.has(value);
+}
+function isPlainObject(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function sanitizePersistedRecordingSession(raw) {
+  if (!isPlainObject(raw)) return null;
+  if (raw.version !== 1) return null;
+  if (!isExperienceType(raw.experienceType)) return null;
+  if (typeof raw.phase !== "string" || !RESTORABLE_RECORDING_PHASES.has(raw.phase)) return null;
+  if (!Array.isArray(raw.steps) || !Array.isArray(raw.captureEvents) || !Array.isArray(raw.pendingClicks)) return null;
+  if (!isTourStepType(raw.selectedStepType)) return null;
+  return {
+    version: 1,
+    experienceType: raw.experienceType,
+    phase: raw.phase,
+    steps: raw.steps,
+    captureEvents: raw.captureEvents,
+    capturedTranscript: typeof raw.capturedTranscript === "string" ? raw.capturedTranscript : "",
+    pendingClicks: raw.pendingClicks,
+    selectedStepType: raw.selectedStepType
+  };
+}
+function readPersistedRecordingSession() {
+  if (!canUseSessionStorage()) return null;
+  try {
+    const raw = window.sessionStorage.getItem(RECORDING_SESSION_STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = sanitizePersistedRecordingSession(JSON.parse(raw));
+    if (parsed) {
+      return parsed;
+    }
+  } catch {
+  }
+  clearPersistedRecordingSession();
+  return null;
+}
+function readPersistedRecordingExperienceType() {
+  return readPersistedRecordingSession()?.experienceType ?? null;
+}
+function hasPersistedRecordingSession() {
+  return readPersistedRecordingSession() !== null;
+}
+function persistRecordingSession(session) {
+  if (!canUseSessionStorage()) return;
+  try {
+    window.sessionStorage.setItem(RECORDING_SESSION_STORAGE_KEY, JSON.stringify(session));
+  } catch {
+  }
+}
+function clearPersistedRecordingSession() {
+  if (!canUseSessionStorage()) return;
+  try {
+    window.sessionStorage.removeItem(RECORDING_SESSION_STORAGE_KEY);
+  } catch {
+  }
+}
+
 // src/hooks/useRunCommand.ts
 var import_react9 = require("react");
 function searchTaggedElementsForQuery(store, query, limit = 8) {
@@ -6768,14 +6853,20 @@ function useRecordingMode({
   onPreview,
   experienceType = "tour"
 }) {
-  const [phase, setPhase] = (0, import_react16.useState)("idle");
-  const [steps, setSteps] = (0, import_react16.useState)([]);
+  const restoredSessionRef = (0, import_react16.useRef)(void 0);
+  if (restoredSessionRef.current === void 0) {
+    restoredSessionRef.current = readPersistedRecordingSession();
+  }
+  const restoredSession = restoredSessionRef.current;
+  const restoredPhase = restoredSession ? "active" : "idle";
+  const [phase, setPhase] = (0, import_react16.useState)(restoredPhase);
+  const [steps, setSteps] = (0, import_react16.useState)(() => restoredSession?.steps ?? []);
   const [selectedElement, setSelectedElement] = (0, import_react16.useState)(null);
-  const [selectedStepType, setSelectedStepType] = (0, import_react16.useState)("ask_or_fill");
+  const [selectedStepType, setSelectedStepType] = (0, import_react16.useState)(() => restoredSession?.selectedStepType ?? "ask_or_fill");
   const [pendingNarration, setPendingNarration] = (0, import_react16.useState)("");
   const [polishedNarration, setPolishedNarration] = (0, import_react16.useState)("");
-  const [captureEvents, setCaptureEvents] = (0, import_react16.useState)([]);
-  const [capturedTranscript, setCapturedTranscript] = (0, import_react16.useState)("");
+  const [captureEvents, setCaptureEvents] = (0, import_react16.useState)(() => restoredSession?.captureEvents ?? []);
+  const [capturedTranscript, setCapturedTranscript] = (0, import_react16.useState)(() => restoredSession?.capturedTranscript ?? "");
   const [isVoiceCaptureActive, setIsVoiceCaptureActive] = (0, import_react16.useState)(false);
   const stepsRef = (0, import_react16.useRef)([]);
   stepsRef.current = steps;
@@ -6786,7 +6877,7 @@ function useRecordingMode({
     });
   }, [voice]);
   captureEventsRef.current = captureEvents;
-  const pendingClicksRef = (0, import_react16.useRef)([]);
+  const pendingClicksRef = (0, import_react16.useRef)(restoredSession?.pendingClicks ?? []);
   const shouldKeepVoiceCaptureRef = (0, import_react16.useRef)(false);
   const resumeVoiceAfterNarrationRef = (0, import_react16.useRef)(false);
   const lastAutoNoteRef = (0, import_react16.useRef)("");
@@ -7361,6 +7452,22 @@ function useRecordingMode({
       }
     }
   }, [isRecording, phase, markStep, undoLastStep, previewSteps, approveNarration, redoNarration]);
+  (0, import_react16.useEffect)(() => {
+    if (!isRecording && steps.length === 0 && captureEvents.length === 0 && !capturedTranscript.trim()) {
+      clearPersistedRecordingSession();
+      return;
+    }
+    persistRecordingSession({
+      version: 1,
+      experienceType,
+      phase,
+      steps,
+      captureEvents,
+      capturedTranscript,
+      pendingClicks: pendingClicksRef.current,
+      selectedStepType
+    });
+  }, [captureEvents, capturedTranscript, experienceType, isRecording, phase, selectedStepType, steps]);
   return {
     phase,
     steps,
@@ -9300,7 +9407,9 @@ function ModelNexChatBubble({
   const [savedDraft, setSavedDraft] = (0, import_react18.useState)(null);
   const [reviewDraft, setReviewDraft] = (0, import_react18.useState)("");
   const [tourLiveTranscript, setTourLiveTranscript] = (0, import_react18.useState)("");
-  const [activeRecordingExperienceType, setActiveRecordingExperienceType] = (0, import_react18.useState)(recordingExperienceType);
+  const [activeRecordingExperienceType, setActiveRecordingExperienceType] = (0, import_react18.useState)(
+    () => readPersistedRecordingExperienceType() ?? recordingExperienceType
+  );
   const recording = useRecordingMode({
     serverUrl,
     toursApiBase: ctx?.toursApiBase,
@@ -9310,6 +9419,16 @@ function ModelNexChatBubble({
   });
   const isGeneratingDraft = isRecordingDraftGenerating(recording.phase);
   const showRecordingOverlay = recordingMode && shouldShowRecordingOverlay(recording.phase);
+  (0, import_react18.useEffect)(() => {
+    const shouldBeRecording = recording.phase !== "idle";
+    if (shouldBeRecording && !recordingMode) {
+      setRecordingMode(true);
+      return;
+    }
+    if (!shouldBeRecording && recordingMode && !showStopModal && !savedDraft) {
+      setRecordingMode(false);
+    }
+  }, [recording.phase, recordingMode, savedDraft, setRecordingMode, showStopModal]);
   const playbackController = useExperiencePlaybackController({
     serverUrl,
     commandUrl: ctx?.commandUrl,
@@ -11815,7 +11934,7 @@ var ModelNexProvider = ({
   const [executedFields, setExecutedFields] = (0, import_react21.useState)(/* @__PURE__ */ new Set());
   const [highlightActions, setHighlightActions] = (0, import_react21.useState)(false);
   const [studioMode, setStudioMode] = (0, import_react21.useState)(false);
-  const [recordingMode, setRecordingMode] = (0, import_react21.useState)(false);
+  const [recordingMode, setRecordingMode] = (0, import_react21.useState)(() => hasPersistedRecordingSession());
   const [voiceMuted, setVoiceMuted] = (0, import_react21.useState)(false);
   const [socketId, setSocketId] = (0, import_react21.useState)(null);
   const [actions, setActions] = (0, import_react21.useState)(/* @__PURE__ */ new Map());

package/dist/index.mjs

@@ -2623,6 +2623,91 @@ async function validateInjectedDevModeKey(serverUrl, websiteId, devModeKey) {
   return validationPromise;
 }
 
+// src/utils/recordingPersistence.ts
+var RECORDING_SESSION_STORAGE_KEY = "modelnex-recording-session";
+var RESTORABLE_RECORDING_PHASES = /* @__PURE__ */ new Set([
+  "active",
+  "selecting",
+  "configuring",
+  "narrating",
+  "reviewing",
+  "saved",
+  "finishing"
+]);
+var TOUR_STEP_TYPES = /* @__PURE__ */ new Set([
+  "narrate",
+  "act",
+  "input",
+  "ask_and_fill",
+  "user_input",
+  "ask_or_fill",
+  "wait_then_act"
+]);
+function canUseSessionStorage() {
+  return typeof window !== "undefined" && typeof window.sessionStorage !== "undefined";
+}
+function isExperienceType(value) {
+  return value === "tour" || value === "onboarding";
+}
+function isTourStepType(value) {
+  return typeof value === "string" && TOUR_STEP_TYPES.has(value);
+}
+function isPlainObject(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function sanitizePersistedRecordingSession(raw) {
+  if (!isPlainObject(raw)) return null;
+  if (raw.version !== 1) return null;
+  if (!isExperienceType(raw.experienceType)) return null;
+  if (typeof raw.phase !== "string" || !RESTORABLE_RECORDING_PHASES.has(raw.phase)) return null;
+  if (!Array.isArray(raw.steps) || !Array.isArray(raw.captureEvents) || !Array.isArray(raw.pendingClicks)) return null;
+  if (!isTourStepType(raw.selectedStepType)) return null;
+  return {
+    version: 1,
+    experienceType: raw.experienceType,
+    phase: raw.phase,
+    steps: raw.steps,
+    captureEvents: raw.captureEvents,
+    capturedTranscript: typeof raw.capturedTranscript === "string" ? raw.capturedTranscript : "",
+    pendingClicks: raw.pendingClicks,
+    selectedStepType: raw.selectedStepType
+  };
+}
+function readPersistedRecordingSession() {
+  if (!canUseSessionStorage()) return null;
+  try {
+    const raw = window.sessionStorage.getItem(RECORDING_SESSION_STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = sanitizePersistedRecordingSession(JSON.parse(raw));
+    if (parsed) {
+      return parsed;
+    }
+  } catch {
+  }
+  clearPersistedRecordingSession();
+  return null;
+}
+function readPersistedRecordingExperienceType() {
+  return readPersistedRecordingSession()?.experienceType ?? null;
+}
+function hasPersistedRecordingSession() {
+  return readPersistedRecordingSession() !== null;
+}
+function persistRecordingSession(session) {
+  if (!canUseSessionStorage()) return;
+  try {
+    window.sessionStorage.setItem(RECORDING_SESSION_STORAGE_KEY, JSON.stringify(session));
+  } catch {
+  }
+}
+function clearPersistedRecordingSession() {
+  if (!canUseSessionStorage()) return;
+  try {
+    window.sessionStorage.removeItem(RECORDING_SESSION_STORAGE_KEY);
+  } catch {
+  }
+}
+
 // src/hooks/useRunCommand.ts
 import { useCallback as useCallback5, useContext as useContext2 } from "react";
 function searchTaggedElementsForQuery(store, query, limit = 8) {
@@ -6558,14 +6643,20 @@ function useRecordingMode({
   onPreview,
   experienceType = "tour"
 }) {
-  const [phase, setPhase] = useState11("idle");
-  const [steps, setSteps] = useState11([]);
+  const restoredSessionRef = useRef12(void 0);
+  if (restoredSessionRef.current === void 0) {
+    restoredSessionRef.current = readPersistedRecordingSession();
+  }
+  const restoredSession = restoredSessionRef.current;
+  const restoredPhase = restoredSession ? "active" : "idle";
+  const [phase, setPhase] = useState11(restoredPhase);
+  const [steps, setSteps] = useState11(() => restoredSession?.steps ?? []);
   const [selectedElement, setSelectedElement] = useState11(null);
-  const [selectedStepType, setSelectedStepType] = useState11("ask_or_fill");
+  const [selectedStepType, setSelectedStepType] = useState11(() => restoredSession?.selectedStepType ?? "ask_or_fill");
   const [pendingNarration, setPendingNarration] = useState11("");
   const [polishedNarration, setPolishedNarration] = useState11("");
-  const [captureEvents, setCaptureEvents] = useState11([]);
-  const [capturedTranscript, setCapturedTranscript] = useState11("");
+  const [captureEvents, setCaptureEvents] = useState11(() => restoredSession?.captureEvents ?? []);
+  const [capturedTranscript, setCapturedTranscript] = useState11(() => restoredSession?.capturedTranscript ?? "");
   const [isVoiceCaptureActive, setIsVoiceCaptureActive] = useState11(false);
   const stepsRef = useRef12([]);
   stepsRef.current = steps;
@@ -6576,7 +6667,7 @@ function useRecordingMode({
     });
   }, [voice]);
   captureEventsRef.current = captureEvents;
-  const pendingClicksRef = useRef12([]);
+  const pendingClicksRef = useRef12(restoredSession?.pendingClicks ?? []);
   const shouldKeepVoiceCaptureRef = useRef12(false);
   const resumeVoiceAfterNarrationRef = useRef12(false);
   const lastAutoNoteRef = useRef12("");
@@ -7151,6 +7242,22 @@ function useRecordingMode({
       }
     }
   }, [isRecording, phase, markStep, undoLastStep, previewSteps, approveNarration, redoNarration]);
+  useEffect15(() => {
+    if (!isRecording && steps.length === 0 && captureEvents.length === 0 && !capturedTranscript.trim()) {
+      clearPersistedRecordingSession();
+      return;
+    }
+    persistRecordingSession({
+      version: 1,
+      experienceType,
+      phase,
+      steps,
+      captureEvents,
+      capturedTranscript,
+      pendingClicks: pendingClicksRef.current,
+      selectedStepType
+    });
+  }, [captureEvents, capturedTranscript, experienceType, isRecording, phase, selectedStepType, steps]);
   return {
     phase,
     steps,
@@ -9090,7 +9197,9 @@ function ModelNexChatBubble({
   const [savedDraft, setSavedDraft] = useState13(null);
   const [reviewDraft, setReviewDraft] = useState13("");
   const [tourLiveTranscript, setTourLiveTranscript] = useState13("");
-  const [activeRecordingExperienceType, setActiveRecordingExperienceType] = useState13(recordingExperienceType);
+  const [activeRecordingExperienceType, setActiveRecordingExperienceType] = useState13(
+    () => readPersistedRecordingExperienceType() ?? recordingExperienceType
+  );
   const recording = useRecordingMode({
     serverUrl,
     toursApiBase: ctx?.toursApiBase,
@@ -9100,6 +9209,16 @@ function ModelNexChatBubble({
   });
   const isGeneratingDraft = isRecordingDraftGenerating(recording.phase);
   const showRecordingOverlay = recordingMode && shouldShowRecordingOverlay(recording.phase);
+  useEffect17(() => {
+    const shouldBeRecording = recording.phase !== "idle";
+    if (shouldBeRecording && !recordingMode) {
+      setRecordingMode(true);
+      return;
+    }
+    if (!shouldBeRecording && recordingMode && !showStopModal && !savedDraft) {
+      setRecordingMode(false);
+    }
+  }, [recording.phase, recordingMode, savedDraft, setRecordingMode, showStopModal]);
   const playbackController = useExperiencePlaybackController({
     serverUrl,
     commandUrl: ctx?.commandUrl,
@@ -11605,7 +11724,7 @@ var ModelNexProvider = ({
   const [executedFields, setExecutedFields] = useState15(/* @__PURE__ */ new Set());
   const [highlightActions, setHighlightActions] = useState15(false);
   const [studioMode, setStudioMode] = useState15(false);
-  const [recordingMode, setRecordingMode] = useState15(false);
+  const [recordingMode, setRecordingMode] = useState15(() => hasPersistedRecordingSession());
   const [voiceMuted, setVoiceMuted] = useState15(false);
   const [socketId, setSocketId] = useState15(null);
   const [actions, setActions] = useState15(/* @__PURE__ */ new Map());

package/package.json

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