@modelnex/sdk 0.1.2 → 0.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +114 -12
- package/dist/aom-HDYNCIOY.mjs +10 -0
- package/dist/{aom-J6NYMGDW.mjs → chunk-N65UEB6X.mjs} +3 -2
- package/dist/index.d.mts +125 -54
- package/dist/index.d.ts +125 -54
- package/dist/index.js +6354 -3537
- package/dist/index.mjs +6400 -3595
- package/package.json +11 -2
- package/dist/aom-GA6W42DG.mjs +0 -71
- package/dist/chunk-6DZX6EAA.mjs +0 -37
- package/dist/dom-sync-Y7Z7TOU6.mjs +0 -57
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @modelnex/sdk
|
|
2
2
|
|
|
3
|
-
React SDK for ModelNex agent chat, tours, and
|
|
3
|
+
React SDK for ModelNex agent chat, tours, and workflows.
|
|
4
4
|
|
|
5
5
|
## Install
|
|
6
6
|
|
|
@@ -8,10 +8,21 @@ React SDK for ModelNex agent chat, tours, and guided onboarding.
|
|
|
8
8
|
npm install @modelnex/sdk react react-dom zod
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
+
## Unit Tests
|
|
12
|
+
|
|
13
|
+
Run the SDK unit tests from the `sdk` package directory:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
cd sdk
|
|
17
|
+
npm test
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
The SDK test script builds `dist/` first, then runs the unit tests.
|
|
21
|
+
|
|
11
22
|
## Quick Start
|
|
12
23
|
|
|
13
24
|
```tsx
|
|
14
|
-
import { ModelNexProvider, ModelNexChatBubble
|
|
25
|
+
import { ModelNexProvider, ModelNexChatBubble } from '@modelnex/sdk';
|
|
15
26
|
|
|
16
27
|
export default function AppShell() {
|
|
17
28
|
return (
|
|
@@ -28,25 +39,42 @@ export default function AppShell() {
|
|
|
28
39
|
>
|
|
29
40
|
<App />
|
|
30
41
|
<ModelNexChatBubble appName="My Product" />
|
|
31
|
-
<ModelNexOnboardingPanel appName="My Product" />
|
|
32
42
|
</ModelNexProvider>
|
|
33
43
|
);
|
|
34
44
|
}
|
|
35
45
|
```
|
|
36
46
|
|
|
37
|
-
`websiteId` identifies the integration. `userProfile` is used for tour/
|
|
47
|
+
`websiteId` identifies the integration. `userProfile` is used for tour/workflow targeting and completion tracking. `tourFacts.features` is used for `feature_unlocked` experiences.
|
|
48
|
+
|
|
49
|
+
## Tour Start Model
|
|
50
|
+
|
|
51
|
+
ModelNex currently supports these automatic trigger types:
|
|
52
|
+
|
|
53
|
+
- `first_visit`
|
|
54
|
+
- `feature_unlocked`
|
|
55
|
+
- `manual`
|
|
56
|
+
|
|
57
|
+
Each tour or workflow can also configure:
|
|
58
|
+
|
|
59
|
+
- `startPolicy`: `immediate_start` | `prompt_only` | `manual_only`
|
|
60
|
+
- `notificationType`: `bubble_card` | `modal`
|
|
61
|
+
|
|
62
|
+
Current behavior:
|
|
63
|
+
|
|
64
|
+
- `prompt_only + bubble_card` shows an in-bubble prompt
|
|
65
|
+
- `prompt_only + modal` shows a centered modal
|
|
66
|
+
- `immediate_start` starts playback immediately
|
|
67
|
+
- `manual_only` never auto-surfaces
|
|
38
68
|
|
|
39
69
|
## Main Exports
|
|
40
70
|
|
|
41
71
|
| Export | Purpose |
|
|
42
72
|
|--------|---------|
|
|
43
|
-
| `ModelNexProvider` | Root provider for server connection, chat state, dev tools, tours, and
|
|
44
|
-
| `ModelNexChatBubble` |
|
|
45
|
-
| `ModelNexOnboardingPanel` | Dedicated customer-facing UI for `type: 'onboarding'` flows |
|
|
73
|
+
| `ModelNexProvider` | Root provider for server connection, chat state, dev tools, tours, and workflows |
|
|
74
|
+
| `ModelNexChatBubble` | Unified assistant UI for chat, voice tours, and workflows |
|
|
46
75
|
| `useRunCommand` | Run agent commands from custom UI |
|
|
47
|
-
| `useRegisterAction` | Register app actions the agent can execute |
|
|
48
76
|
| `useTourPlayback` | Low-level playback hook for tours and shared experience runtime |
|
|
49
|
-
| `useOnboardingPlayback` | Playback hook preconfigured for
|
|
77
|
+
| `useOnboardingPlayback` | Playback hook preconfigured for workflow playback |
|
|
50
78
|
| `useExperiencePlayback` | Alias over the shared playback hook |
|
|
51
79
|
| `useRecordingMode` | Low-level recorder hook for custom authoring UI |
|
|
52
80
|
| `useActionHighlight` | Highlight actions currently being executed |
|
|
@@ -60,9 +88,9 @@ export default function AppShell() {
|
|
|
60
88
|
| `serverUrl` | ModelNex server base URL. Defaults to `https://api.modelnex.io` |
|
|
61
89
|
| `commandUrl` | Optional same-origin command proxy base |
|
|
62
90
|
| `websiteId` | Tenant/integration identifier |
|
|
63
|
-
| `userProfile` | End-user targeting data for tours/
|
|
91
|
+
| `userProfile` | End-user targeting data for tours/workflows |
|
|
64
92
|
| `tourFacts` | Additional facts, currently used for feature-based eligibility |
|
|
65
|
-
| `toursApiBase` | Same-origin API base for tour/
|
|
93
|
+
| `toursApiBase` | Same-origin API base for tour/workflow fetches and test URLs |
|
|
66
94
|
| `devMode` | Enables recording/studio tooling for your internal users |
|
|
67
95
|
|
|
68
96
|
## Chat Bubble Props
|
|
@@ -73,14 +101,88 @@ export default function AppShell() {
|
|
|
73
101
|
| `defaultCommand` | Fallback command when the input is empty |
|
|
74
102
|
| `welcomeMessage` | Empty-state greeting |
|
|
75
103
|
| `appName` | Product name used in narration and UI copy |
|
|
104
|
+
| `agentName` | Name of the AI agent displayed in the header |
|
|
76
105
|
| `onCommand` | Custom backend override for agent command handling |
|
|
77
106
|
| `recordingExperienceType` | Save recordings as `'tour'` or `'onboarding'` |
|
|
78
107
|
| `className` | Additional class name for the container |
|
|
108
|
+
| `theme` | Custom theme overrides for the chat bubble and panel (`accentColor`, `panelWidth`, etc.) |
|
|
109
|
+
|
|
110
|
+
## Configuration Examples
|
|
111
|
+
|
|
112
|
+
Here are some real-world examples of how to configure the SDK.
|
|
113
|
+
|
|
114
|
+
### Fully Customized Provider
|
|
115
|
+
|
|
116
|
+
```tsx
|
|
117
|
+
import { ModelNexProvider } from '@modelnex/sdk';
|
|
118
|
+
|
|
119
|
+
export function AppShell({ children, currentUser }) {
|
|
120
|
+
return (
|
|
121
|
+
<ModelNexProvider
|
|
122
|
+
// Basic Setup
|
|
123
|
+
serverUrl="https://api.yourdomain.com/modelnex"
|
|
124
|
+
websiteId="prod_site_123"
|
|
125
|
+
|
|
126
|
+
// Development and Proxy setup
|
|
127
|
+
devMode={process.env.NODE_ENV === 'development'}
|
|
128
|
+
commandUrl="/api/modelnex/command" // Proxies commands through your own API
|
|
129
|
+
toursApiBase="/api/tours" // Proxies tour fetches to avoid CORS
|
|
130
|
+
|
|
131
|
+
// User Targeting for Tours & Workflows
|
|
132
|
+
userProfile={{
|
|
133
|
+
userId: currentUser.id,
|
|
134
|
+
isNewUser: currentUser.createdAt > Date.now() - 86400000 * 7, // 7 days
|
|
135
|
+
type: currentUser.role, // e.g. "admin", "viewer"
|
|
136
|
+
}}
|
|
137
|
+
|
|
138
|
+
// Additional facts for Feature-Gated Tours
|
|
139
|
+
tourFacts={{
|
|
140
|
+
features: currentUser.enabledFeatures, // e.g. ["billing", "advanced_reporting"]
|
|
141
|
+
}}
|
|
142
|
+
>
|
|
143
|
+
{children}
|
|
144
|
+
</ModelNexProvider>
|
|
145
|
+
);
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
### Themed Chat Bubble
|
|
150
|
+
|
|
151
|
+
```tsx
|
|
152
|
+
import { ModelNexChatBubble } from '@modelnex/sdk';
|
|
153
|
+
|
|
154
|
+
export function ChatIntegration() {
|
|
155
|
+
return (
|
|
156
|
+
<ModelNexChatBubble
|
|
157
|
+
// Branding & Copy
|
|
158
|
+
appName="Acme Corp Dashboard"
|
|
159
|
+
agentName="Acme Assistant"
|
|
160
|
+
welcomeMessage="Hi there! Ask me to navigate to a page or help you with your account."
|
|
161
|
+
placeholder="Type a command or ask a question..."
|
|
162
|
+
defaultCommand="Show me my recent activity"
|
|
163
|
+
|
|
164
|
+
// Recording defaults
|
|
165
|
+
recordingExperienceType="onboarding" // Default is 'tour'
|
|
166
|
+
|
|
167
|
+
// Visual Theme Customization
|
|
168
|
+
theme={{
|
|
169
|
+
accentColor: "#f59e0b", // Amber accent
|
|
170
|
+
accentForeground: "#ffffff",
|
|
171
|
+
panelWidth: "400px", // Wider panel
|
|
172
|
+
panelMaxHeight: "700px",
|
|
173
|
+
bubbleSize: "64px", // Larger bubble
|
|
174
|
+
borderRadius: "24px",
|
|
175
|
+
zIndex: 9999
|
|
176
|
+
}}
|
|
177
|
+
/>
|
|
178
|
+
);
|
|
179
|
+
}
|
|
180
|
+
```
|
|
79
181
|
|
|
80
182
|
## Testing Flows
|
|
81
183
|
|
|
82
184
|
- Force a tour with `?modelnex_test_tour=TOUR_ID`
|
|
83
|
-
- Force
|
|
185
|
+
- Force a workflow with `?modelnex_test_workflow=FLOW_ID`
|
|
84
186
|
- If you use a same-origin proxy, set `toursApiBase` so test fetches avoid CORS issues
|
|
85
187
|
|
|
86
188
|
## Custom UI
|
package/dist/index.d.mts
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import React$1 from 'react';
|
|
2
|
-
import { z } from 'zod';
|
|
3
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
3
|
|
|
5
4
|
type ExperienceType = 'tour' | 'onboarding';
|
|
6
|
-
type TourStepType = 'narrate' | 'act' | 'ask_and_fill' | 'user_input' | 'ask_or_fill';
|
|
5
|
+
type TourStepType = 'narrate' | 'act' | 'input' | 'ask_and_fill' | 'user_input' | 'ask_or_fill' | 'wait_then_act';
|
|
7
6
|
type TourUserActionEvent = 'click' | 'input' | 'change' | 'blur';
|
|
8
7
|
interface TourActionTarget {
|
|
9
8
|
uid?: string;
|
|
@@ -58,7 +57,7 @@ interface TourRecordedClick {
|
|
|
58
57
|
/** Visible text or placeholder captured at record time */
|
|
59
58
|
textContaining: string;
|
|
60
59
|
}
|
|
61
|
-
type TourCaptureEventType = 'session_start' | 'route' | 'click' | 'input' | 'note';
|
|
60
|
+
type TourCaptureEventType = 'session_start' | 'route' | 'hover' | 'click' | 'input' | 'note';
|
|
62
61
|
interface TourCaptureEvent {
|
|
63
62
|
id: string;
|
|
64
63
|
type: TourCaptureEventType;
|
|
@@ -134,7 +133,7 @@ interface TourStep {
|
|
|
134
133
|
/** Optional onboarding-specific step metadata */
|
|
135
134
|
onboarding?: OnboardingStepMetadata;
|
|
136
135
|
}
|
|
137
|
-
type TourTrigger = 'first_visit' | '
|
|
136
|
+
type TourTrigger = 'first_visit' | 'feature_launch' | 'feature_unlocked' | 'feature_unlock' | 'new_feature' | 'manual';
|
|
138
137
|
type TourStartPolicy = 'immediate_start' | 'prompt_only' | 'manual_only';
|
|
139
138
|
type TourNotificationType = 'bubble_card' | 'modal';
|
|
140
139
|
interface TourVoiceConfig {
|
|
@@ -142,13 +141,21 @@ interface TourVoiceConfig {
|
|
|
142
141
|
ttsVoice?: string;
|
|
143
142
|
ttsPrefetchLeadMs?: number;
|
|
144
143
|
}
|
|
144
|
+
interface ExperienceModalConfig {
|
|
145
|
+
title?: string;
|
|
146
|
+
description?: string;
|
|
147
|
+
buttonText?: string;
|
|
148
|
+
cancelButtonText?: string;
|
|
149
|
+
backgroundColor?: string;
|
|
150
|
+
textColor?: string;
|
|
151
|
+
}
|
|
145
152
|
interface ExperiencePresentation {
|
|
146
|
-
launcher?: 'tour_bubble' | 'onboarding_bubble' | 'checklist' | 'none';
|
|
147
153
|
theme?: {
|
|
148
154
|
tone?: 'guide' | 'coach' | 'operator';
|
|
149
155
|
accentColor?: string;
|
|
150
156
|
icon?: string;
|
|
151
157
|
};
|
|
158
|
+
modalConfig?: ExperienceModalConfig;
|
|
152
159
|
}
|
|
153
160
|
interface ExperienceGoal {
|
|
154
161
|
primaryAction?: string;
|
|
@@ -171,6 +178,11 @@ interface Tour {
|
|
|
171
178
|
goal?: ExperienceGoal;
|
|
172
179
|
capture?: {
|
|
173
180
|
experienceType?: ExperienceType;
|
|
181
|
+
instructions?: {
|
|
182
|
+
transcript?: string;
|
|
183
|
+
noteEvents?: TourCaptureEvent[];
|
|
184
|
+
};
|
|
185
|
+
notes?: RecordingStep[];
|
|
174
186
|
onboardingHints?: {
|
|
175
187
|
inferredWaitTargets?: number;
|
|
176
188
|
inferredCompletionSignals?: number;
|
|
@@ -191,12 +203,8 @@ interface UserProfile {
|
|
|
191
203
|
/** User ID for per-user completion state */
|
|
192
204
|
userId?: string;
|
|
193
205
|
}
|
|
194
|
-
interface TourFacts {
|
|
195
|
-
/** Feature keys currently available to the user, used for feature_unlocked tours */
|
|
196
|
-
features?: string[];
|
|
197
|
-
}
|
|
198
206
|
/** Playback state machine states */
|
|
199
|
-
type TourPlaybackState = 'idle' | 'intro' | 'executing' | 'thinking' | 'waiting_voice' | 'waiting_input' | 'complete';
|
|
207
|
+
type TourPlaybackState = 'idle' | 'intro' | 'executing' | 'thinking' | 'waiting_voice' | 'waiting_input' | 'paused' | 'complete';
|
|
200
208
|
/** Internal recording step being built */
|
|
201
209
|
interface RecordingStep {
|
|
202
210
|
order: number;
|
|
@@ -389,22 +397,6 @@ interface ChatMessage {
|
|
|
389
397
|
debug?: AgentDebug;
|
|
390
398
|
}
|
|
391
399
|
|
|
392
|
-
interface UseRegisterActionOptions<T extends z.ZodTypeAny = z.ZodTypeAny> {
|
|
393
|
-
id: string;
|
|
394
|
-
description: string;
|
|
395
|
-
schema: T;
|
|
396
|
-
execute: (params: z.infer<T>) => unknown | Promise<unknown>;
|
|
397
|
-
}
|
|
398
|
-
/**
|
|
399
|
-
* Register a custom action with the ModelNex agent.
|
|
400
|
-
* Use this to add app-specific actions (e.g. navigation, domain operations).
|
|
401
|
-
* The action is synced to the server with built-in actions and can be invoked by the agent.
|
|
402
|
-
*
|
|
403
|
-
* Must be used within ModelNexProvider.
|
|
404
|
-
* Memoize schema (define outside component) and execute (useCallback) to avoid unnecessary re-registration.
|
|
405
|
-
*/
|
|
406
|
-
declare function useRegisterAction<T extends z.ZodTypeAny = z.ZodTypeAny>(action: UseRegisterActionOptions<T>): void;
|
|
407
|
-
|
|
408
400
|
interface UIStateProviderProps {
|
|
409
401
|
children: React$1.ReactNode;
|
|
410
402
|
/** Agent context id (default: "agent-ui-state") */
|
|
@@ -458,33 +450,36 @@ interface ModelNexChatBubbleProps {
|
|
|
458
450
|
defaultCommand?: string;
|
|
459
451
|
/** Additional class names for the container */
|
|
460
452
|
className?: string;
|
|
461
|
-
/** Custom fetch - use your own inference/backend. Omit to use agent server from Provider. */
|
|
462
|
-
onCommand?: (command: string) => Promise<{
|
|
463
|
-
actionsExecuted?: number;
|
|
464
|
-
summary?: string;
|
|
465
|
-
nextSteps?: string[];
|
|
466
|
-
debug?: AgentDebug;
|
|
467
|
-
[key: string]: unknown;
|
|
468
|
-
}>;
|
|
469
453
|
/** Welcome message when chat is empty */
|
|
470
454
|
welcomeMessage?: string;
|
|
455
|
+
/** Name of the AI agent displayed in the header */
|
|
456
|
+
agentName?: string;
|
|
471
457
|
/** Display name of the app — used in tour intro narration */
|
|
472
458
|
appName?: string;
|
|
473
|
-
/**
|
|
474
|
-
|
|
459
|
+
/** Custom theme overrides */
|
|
460
|
+
theme?: {
|
|
461
|
+
accentColor?: string;
|
|
462
|
+
accentForeground?: string;
|
|
463
|
+
panelWidth?: string;
|
|
464
|
+
panelMaxHeight?: string;
|
|
465
|
+
bubbleSize?: string;
|
|
466
|
+
bubbleIconSize?: string;
|
|
467
|
+
borderRadius?: string;
|
|
468
|
+
zIndex?: number;
|
|
469
|
+
};
|
|
475
470
|
}
|
|
476
471
|
/**
|
|
477
472
|
* Chat interface for natural language commands.
|
|
478
473
|
* Shows conversation history; on exit, the agent summarizes what it did and suggests next steps.
|
|
479
474
|
* Use within ModelNexProvider. Omit to use your own UI with useRunCommand.
|
|
480
475
|
*/
|
|
481
|
-
declare function ModelNexChatBubble({ placeholder, defaultCommand, className,
|
|
476
|
+
declare function ModelNexChatBubble({ placeholder, defaultCommand, className, welcomeMessage, agentName, appName, theme, }: ModelNexChatBubbleProps): React$1.ReactPortal | null;
|
|
482
477
|
|
|
483
478
|
interface ModelNexOnboardingPanelProps {
|
|
484
479
|
appName?: string;
|
|
485
480
|
title?: string;
|
|
486
481
|
}
|
|
487
|
-
declare function ModelNexOnboardingPanel({ appName, title, }: ModelNexOnboardingPanelProps): react_jsx_runtime.JSX.Element
|
|
482
|
+
declare function ModelNexOnboardingPanel({ appName, title, }: ModelNexOnboardingPanelProps): react_jsx_runtime.JSX.Element;
|
|
488
483
|
|
|
489
484
|
/**
|
|
490
485
|
* Toggle and read the action-highlight overlay state.
|
|
@@ -543,10 +538,14 @@ declare global {
|
|
|
543
538
|
}
|
|
544
539
|
}
|
|
545
540
|
interface VoiceHook {
|
|
546
|
-
/** Speak text via Deepgram TTS (proxied through server). Uses WebRTC loopback for AEC when available.
|
|
541
|
+
/** Speak text via Deepgram TTS (proxied through server). Uses WebRTC loopback for AEC when available.
|
|
542
|
+
* The returned promise always settles when the scheduled playback settles; callers can choose whether to await it.
|
|
543
|
+
*/
|
|
547
544
|
speak: (text: string, voiceId?: string, options?: {
|
|
548
545
|
onNearEnd?: () => void;
|
|
549
546
|
prefetchLeadMs?: number;
|
|
547
|
+
waitForCompletion?: boolean;
|
|
548
|
+
interrupt?: boolean;
|
|
550
549
|
}) => Promise<void>;
|
|
551
550
|
/** Stop any in-progress TTS playback immediately */
|
|
552
551
|
stopSpeaking: () => void;
|
|
@@ -556,6 +555,8 @@ interface VoiceHook {
|
|
|
556
555
|
startListening: (onResult: (transcript: string) => void, onInterruption?: (transcript: string) => void, onError?: (err: string) => void, options?: {
|
|
557
556
|
continuous?: boolean;
|
|
558
557
|
lang?: string;
|
|
558
|
+
onSpeechStarted?: () => void;
|
|
559
|
+
onInterimResult?: (transcript: string) => void;
|
|
559
560
|
}) => void;
|
|
560
561
|
/** Stop STT listening */
|
|
561
562
|
stopListening: () => void;
|
|
@@ -569,6 +570,10 @@ interface VoiceHook {
|
|
|
569
570
|
}
|
|
570
571
|
declare function useVoice(serverUrl: string): VoiceHook;
|
|
571
572
|
|
|
573
|
+
interface StartTourOptions {
|
|
574
|
+
reviewMode?: boolean;
|
|
575
|
+
reviewMetadata?: Record<string, unknown>;
|
|
576
|
+
}
|
|
572
577
|
interface TourPlaybackHook {
|
|
573
578
|
/** Whether a tour is currently running */
|
|
574
579
|
isActive: boolean;
|
|
@@ -590,8 +595,10 @@ interface TourPlaybackHook {
|
|
|
590
595
|
reviewStatusMessage: string | null;
|
|
591
596
|
/** Prompted tour awaiting user confirmation */
|
|
592
597
|
pendingTour: Tour | null;
|
|
598
|
+
/** Latest server-authored state snapshot for this experience */
|
|
599
|
+
serverState: TourServerState | null;
|
|
593
600
|
/** Start a specific tour manually */
|
|
594
|
-
startTour: (tour: Tour) => void;
|
|
601
|
+
startTour: (tour: Tour, options?: StartTourOptions) => void;
|
|
595
602
|
/** Accept the currently pending prompt and start playback */
|
|
596
603
|
acceptPendingTour: () => void;
|
|
597
604
|
/** Dismiss the currently pending prompt */
|
|
@@ -600,6 +607,10 @@ interface TourPlaybackHook {
|
|
|
600
607
|
advanceStep: () => void;
|
|
601
608
|
/** Skip the entire tour */
|
|
602
609
|
skipTour: () => void;
|
|
610
|
+
/** Explicitly pause the tour agent (for feedback/review) */
|
|
611
|
+
pauseTour: () => void;
|
|
612
|
+
/** Resume the tour agent after a pause */
|
|
613
|
+
resumeTour: () => void;
|
|
603
614
|
/** Repeat current step narration */
|
|
604
615
|
repeatStep: () => void;
|
|
605
616
|
/** Handle a voice input during the tour */
|
|
@@ -609,6 +620,23 @@ interface TourPlaybackHook {
|
|
|
609
620
|
/** Save a correction against the current preview step */
|
|
610
621
|
submitReviewFeedback: (utterance: string, apply?: boolean) => Promise<void>;
|
|
611
622
|
}
|
|
623
|
+
interface TourServerState {
|
|
624
|
+
runId: number | null;
|
|
625
|
+
turnId: string | null;
|
|
626
|
+
stepIndex: number;
|
|
627
|
+
phase: string;
|
|
628
|
+
isActive: boolean;
|
|
629
|
+
isPaused: boolean;
|
|
630
|
+
awaitingUserInput: boolean;
|
|
631
|
+
pendingCommandId: string | null;
|
|
632
|
+
pendingCommandBatch: {
|
|
633
|
+
commandBatchId: string | null;
|
|
634
|
+
stepIndex: number | null;
|
|
635
|
+
turnId: string | null;
|
|
636
|
+
} | null;
|
|
637
|
+
currentUrl?: string | null;
|
|
638
|
+
reason?: string;
|
|
639
|
+
}
|
|
612
640
|
interface UseTourPlaybackOptions {
|
|
613
641
|
serverUrl: string;
|
|
614
642
|
/** Base URL for agent commands (e.g. /api/modelnex for same-origin). Default: serverUrl */
|
|
@@ -619,7 +647,6 @@ interface UseTourPlaybackOptions {
|
|
|
619
647
|
socketId?: string | null;
|
|
620
648
|
websiteId?: string;
|
|
621
649
|
userProfile?: UserProfile;
|
|
622
|
-
tourFacts?: TourFacts;
|
|
623
650
|
voice: VoiceHook;
|
|
624
651
|
appName?: string;
|
|
625
652
|
/** Pass the page's current state to the LLM agent */
|
|
@@ -634,8 +661,12 @@ interface UseTourPlaybackOptions {
|
|
|
634
661
|
disabled?: boolean;
|
|
635
662
|
/** Shared runtime, but allow a distinct product surface such as onboarding */
|
|
636
663
|
experienceType?: ExperienceType;
|
|
664
|
+
/** Whether to show global floating captions (usually true when bubble is minimized, false when expanded) */
|
|
665
|
+
showCaptions?: boolean;
|
|
666
|
+
/** Disable internal pending prompt/query discovery when a higher-level controller owns it */
|
|
667
|
+
enableAutoDiscovery?: boolean;
|
|
637
668
|
}
|
|
638
|
-
declare function useTourPlayback({ serverUrl, commandUrl, toursApiBase, socketId, websiteId, userProfile,
|
|
669
|
+
declare function useTourPlayback({ serverUrl, commandUrl, toursApiBase, socketId, websiteId, userProfile, voice, appName, extractedElements, tagStore, onStepChange, onTourEnd, disabled, experienceType, showCaptions, enableAutoDiscovery, }: UseTourPlaybackOptions): TourPlaybackHook;
|
|
639
670
|
|
|
640
671
|
type ExperiencePlaybackHook = TourPlaybackHook;
|
|
641
672
|
declare function useExperiencePlayback(...args: Parameters<typeof useTourPlayback>): TourPlaybackHook;
|
|
@@ -680,6 +711,7 @@ interface RecordingModeHook {
|
|
|
680
711
|
continueRecording: () => void;
|
|
681
712
|
undoLastStep: () => void;
|
|
682
713
|
previewSteps: () => void;
|
|
714
|
+
prepareToStopRecording: () => void;
|
|
683
715
|
stopRecording: (tourName: string, targetUserTypes: string[]) => Promise<string | null>;
|
|
684
716
|
toggleVoiceCapture: () => void;
|
|
685
717
|
/** Abandon recording — discard all steps and exit recording mode */
|
|
@@ -694,6 +726,27 @@ interface UseRecordingModeOptions {
|
|
|
694
726
|
onPreview?: (steps: RecordingStep[]) => void;
|
|
695
727
|
experienceType?: ExperienceType;
|
|
696
728
|
}
|
|
729
|
+
declare function buildRecordingCapturePayload({ experienceType, steps, captureEvents, capturedTranscript, }: {
|
|
730
|
+
experienceType?: ExperienceType;
|
|
731
|
+
steps?: RecordingStep[];
|
|
732
|
+
captureEvents?: TourCaptureEvent[];
|
|
733
|
+
capturedTranscript?: string;
|
|
734
|
+
}): {
|
|
735
|
+
generation: {
|
|
736
|
+
mode: "capture_v1";
|
|
737
|
+
generatedAt: string;
|
|
738
|
+
eventCount: number;
|
|
739
|
+
noteCount: number;
|
|
740
|
+
generatedStepCount: number;
|
|
741
|
+
};
|
|
742
|
+
instructions?: {
|
|
743
|
+
noteEvents?: TourCaptureEvent[] | undefined;
|
|
744
|
+
transcript?: string | undefined;
|
|
745
|
+
} | undefined;
|
|
746
|
+
experienceType: ExperienceType;
|
|
747
|
+
events: TourCaptureEvent[];
|
|
748
|
+
notes: RecordingStep[];
|
|
749
|
+
};
|
|
697
750
|
declare function useRecordingMode({ serverUrl, toursApiBase, websiteId, voice, onPreview, experienceType, }: UseRecordingModeOptions): RecordingModeHook;
|
|
698
751
|
|
|
699
752
|
interface TourProgressPanelProps {
|
|
@@ -734,11 +787,36 @@ interface RecordingOverlayProps {
|
|
|
734
787
|
}
|
|
735
788
|
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;
|
|
736
789
|
|
|
790
|
+
declare function isAskDrivenInputStepType(stepType?: string | null): boolean;
|
|
791
|
+
declare function isInteractiveInputStepType(stepType?: string | null): boolean;
|
|
792
|
+
declare function isManualOnboardingStep(step?: Pick<TourStep, 'type' | 'onboarding'> | null): boolean;
|
|
793
|
+
declare function buildRecordingStepGoal(stepType: TourStepType, selectedElement: {
|
|
794
|
+
label?: string;
|
|
795
|
+
textContaining?: string;
|
|
796
|
+
} | null, recordedClicks?: Array<{
|
|
797
|
+
label?: string;
|
|
798
|
+
}>): string | undefined;
|
|
799
|
+
declare function inferOnboardingMetadataForStep(step: Pick<TourStep, 'type' | 'element' | 'goal' | 'ask'>): OnboardingStepMetadata | undefined;
|
|
800
|
+
|
|
801
|
+
declare function shouldShowRecordingOverlay(phase: RecordingPhase): boolean;
|
|
802
|
+
declare function isRecordingDraftGenerating(phase: RecordingPhase): boolean;
|
|
803
|
+
declare function getRecordingDraftActionLabel(phase: RecordingPhase): string;
|
|
804
|
+
declare function getRecordingDraftStatusMessage(phase: RecordingPhase, experienceType: ExperienceType): string;
|
|
805
|
+
|
|
806
|
+
interface SavedDraftPreview {
|
|
807
|
+
id: string;
|
|
808
|
+
experienceType: ExperienceType;
|
|
809
|
+
}
|
|
810
|
+
type PreviewLaunchSource = 'standard' | 'query_param';
|
|
811
|
+
declare function getPreviewQueryParamName(experienceType: ExperienceType): 'modelnex_test_tour' | 'modelnex_test_workflow';
|
|
812
|
+
declare function buildDraftPreviewUrl(currentUrl: string, draft: SavedDraftPreview): string;
|
|
813
|
+
declare function shouldPromptForPreviewStart(notificationType: TourNotificationType | undefined, _source: PreviewLaunchSource): boolean;
|
|
814
|
+
declare function persistActiveDraftPreview(draft: SavedDraftPreview): void;
|
|
815
|
+
declare function readActiveDraftPreview(): SavedDraftPreview | null;
|
|
816
|
+
declare function clearActiveDraftPreview(experienceType?: ExperienceType): void;
|
|
817
|
+
|
|
737
818
|
interface ModelNexProviderProps {
|
|
738
|
-
children
|
|
739
|
-
serverUrl?: string;
|
|
740
|
-
/** Base URL for agent commands. Use same-origin path (e.g. /api/modelnex) to avoid CORS. Default: serverUrl */
|
|
741
|
-
commandUrl?: string;
|
|
819
|
+
children?: unknown;
|
|
742
820
|
/** Identifier for the integrated website, for multi-tenancy */
|
|
743
821
|
websiteId?: string;
|
|
744
822
|
/**
|
|
@@ -748,13 +826,6 @@ interface ModelNexProviderProps {
|
|
|
748
826
|
* userId — used for per-user tour completion state
|
|
749
827
|
*/
|
|
750
828
|
userProfile?: UserProfile;
|
|
751
|
-
/** Optional product facts used for feature-triggered tours */
|
|
752
|
-
tourFacts?: TourFacts;
|
|
753
|
-
/**
|
|
754
|
-
* Same-origin base for tour API (e.g. /api/modelnex/api).
|
|
755
|
-
* When set, ?modelnex_test_tour= fetches via this path to avoid CORS.
|
|
756
|
-
*/
|
|
757
|
-
toursApiBase?: string;
|
|
758
829
|
/**
|
|
759
830
|
* Enable SDK dev tools unconditionally (tour recording, studio mode)
|
|
760
831
|
*/
|
|
@@ -762,4 +833,4 @@ interface ModelNexProviderProps {
|
|
|
762
833
|
}
|
|
763
834
|
declare const ModelNexProvider: React$1.FC<ModelNexProviderProps>;
|
|
764
835
|
|
|
765
|
-
export { type AgentDebug, type AgentTraceLlmInput, type AgentTraceStep, type ChatMessage, type ExperienceGoal, type ExperiencePlaybackHook, type ExperiencePresentation, type ExperienceType, type ExtractedElement, ModelNexChatBubble, type ModelNexChatBubbleProps, ModelNexOnboardingPanel, type ModelNexOnboardingPanelProps, ModelNexProvider, type ModelNexProviderProps, type OnboardingPlaybackHook, type OnboardingStepMetadata, type RecordingModeHook, RecordingOverlay, type RunCommandResult, StudioOverlay, type TagData, type TagStore, type Tour, type
|
|
836
|
+
export { type AgentDebug, type AgentTraceLlmInput, type AgentTraceStep, type ChatMessage, type ExperienceGoal, type ExperiencePlaybackHook, type ExperiencePresentation, type ExperienceType, type ExtractedElement, ModelNexChatBubble, type ModelNexChatBubbleProps, ModelNexOnboardingPanel, type ModelNexOnboardingPanelProps, ModelNexProvider, type ModelNexProviderProps, type OnboardingPlaybackHook, type OnboardingStepMetadata, type PreviewLaunchSource, type RecordingModeHook, RecordingOverlay, type RunCommandResult, type SavedDraftPreview, StudioOverlay, type TagData, type TagStore, type Tour, type TourNotificationType, type TourPlaybackHook, type TourPlaybackState, TourProgressPanel, type TourStartPolicy, type TourStep, type TourStepType, type TourTrigger, UIStateProvider, type UserProfile, type VoiceHook, buildDraftPreviewUrl, buildRecordingCapturePayload, buildRecordingStepGoal, clearActiveDraftPreview, extractInteractiveElements, generateFingerprint, getPreviewQueryParamName, getRecordingDraftActionLabel, getRecordingDraftStatusMessage, inferOnboardingMetadataForStep, isAskDrivenInputStepType, isInteractiveInputStepType, isManualOnboardingStep, isRecordingDraftGenerating, persistActiveDraftPreview, readActiveDraftPreview, shouldPromptForPreviewStart, shouldShowRecordingOverlay, useActionHighlight, useAgentViewport, useAutoExtract, useExperiencePlayback, useOnboardingPlayback, useRecordingMode, useRunCommand, useTagStore, useTourPlayback, useUIState, useViewportTrack, useVisibleIds, useVoice };
|