@intentai/react 1.0.2 → 2.0.1
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 +160 -315
- package/dist/index.d.mts +85 -334
- package/dist/index.d.ts +85 -334
- package/dist/index.js +1589 -2
- package/dist/index.mjs +1571 -2
- package/dist/styles.css +1047 -0
- package/package.json +22 -21
package/dist/index.d.mts
CHANGED
|
@@ -1,379 +1,130 @@
|
|
|
1
|
-
import
|
|
2
|
-
import React$1 from 'react';
|
|
1
|
+
import React from 'react';
|
|
3
2
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
interface WidgetConfig {
|
|
4
|
+
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
|
|
5
|
+
primaryColor?: string;
|
|
6
|
+
accentColor?: string;
|
|
7
|
+
theme?: 'light' | 'dark' | 'auto';
|
|
8
|
+
categories?: Category[];
|
|
9
|
+
allowVoice?: boolean;
|
|
10
|
+
allowText?: boolean;
|
|
11
|
+
allowScreenshot?: boolean;
|
|
12
|
+
maxRecordingDuration?: number;
|
|
13
|
+
onSubmit?: (feedback: FeedbackData) => Promise<void>;
|
|
14
|
+
onOpen?: () => void;
|
|
15
|
+
onClose?: () => void;
|
|
16
|
+
}
|
|
17
|
+
interface Category {
|
|
9
18
|
id: string;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
/** User display name */
|
|
13
|
-
name?: string;
|
|
14
|
-
/** User avatar URL */
|
|
15
|
-
avatar?: string;
|
|
16
|
-
/** Subscription plan */
|
|
17
|
-
plan?: string;
|
|
18
|
-
/** Company name */
|
|
19
|
-
company?: string;
|
|
20
|
-
/** Custom properties */
|
|
21
|
-
[key: string]: string | number | boolean | undefined;
|
|
19
|
+
label: string;
|
|
20
|
+
icon: string;
|
|
22
21
|
}
|
|
23
|
-
/**
|
|
24
|
-
* Widget position on screen
|
|
25
|
-
*/
|
|
26
|
-
type WidgetPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
|
|
27
|
-
/**
|
|
28
|
-
* Widget color theme
|
|
29
|
-
*/
|
|
30
|
-
type WidgetTheme = 'light' | 'dark' | 'auto';
|
|
31
|
-
/**
|
|
32
|
-
* Feedback type categories
|
|
33
|
-
*/
|
|
34
|
-
type FeedbackType = 'bug' | 'feature' | 'question' | 'praise' | 'other';
|
|
35
|
-
/**
|
|
36
|
-
* Sentiment analysis result
|
|
37
|
-
*/
|
|
38
|
-
type Sentiment = 'positive' | 'neutral' | 'negative';
|
|
39
|
-
/**
|
|
40
|
-
* Data returned when feedback is submitted
|
|
41
|
-
*/
|
|
42
22
|
interface FeedbackData {
|
|
43
|
-
|
|
44
|
-
id: string;
|
|
45
|
-
/** Type of feedback */
|
|
46
|
-
type: FeedbackType;
|
|
47
|
-
/** Text content */
|
|
23
|
+
type: 'voice' | 'text';
|
|
48
24
|
content: string;
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
25
|
+
audioBlob?: Blob;
|
|
26
|
+
transcription?: string;
|
|
27
|
+
category: string;
|
|
52
28
|
screenshot?: string;
|
|
53
|
-
|
|
54
|
-
sentiment?: Sentiment;
|
|
55
|
-
/** Submission timestamp */
|
|
56
|
-
createdAt: string;
|
|
57
|
-
}
|
|
58
|
-
/**
|
|
59
|
-
* Options for opening the widget
|
|
60
|
-
*/
|
|
61
|
-
interface OpenOptions {
|
|
62
|
-
/** Pre-select feedback type */
|
|
63
|
-
type?: FeedbackType;
|
|
64
|
-
/** Prefill text content */
|
|
65
|
-
prefill?: {
|
|
66
|
-
text?: string;
|
|
67
|
-
};
|
|
68
|
-
/** Additional metadata for this feedback */
|
|
29
|
+
sentiment?: string;
|
|
69
30
|
metadata?: Record<string, unknown>;
|
|
70
31
|
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
32
|
+
declare const PremiumVoiceWidget: React.FC<WidgetConfig>;
|
|
33
|
+
|
|
34
|
+
interface IntentAIUser {
|
|
35
|
+
id?: string;
|
|
36
|
+
email?: string;
|
|
37
|
+
name?: string;
|
|
38
|
+
}
|
|
74
39
|
interface IntentAIConfig {
|
|
75
|
-
/**
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
/**
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
*/
|
|
87
|
-
position?: WidgetPosition;
|
|
88
|
-
/**
|
|
89
|
-
* Color theme
|
|
90
|
-
* @default "auto"
|
|
91
|
-
*/
|
|
92
|
-
theme?: WidgetTheme;
|
|
93
|
-
/**
|
|
94
|
-
* Primary brand color (hex)
|
|
95
|
-
* @default "#6366f1"
|
|
96
|
-
*/
|
|
40
|
+
/** Your Intent AI API key (required) */
|
|
41
|
+
apiKey: string;
|
|
42
|
+
/** API URL for feedback submission (required for production) */
|
|
43
|
+
apiUrl: string;
|
|
44
|
+
/** Widget script URL (required for production) */
|
|
45
|
+
widgetUrl: string;
|
|
46
|
+
/** Widget position on screen */
|
|
47
|
+
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
|
|
48
|
+
/** Widget theme */
|
|
49
|
+
theme?: 'light' | 'dark';
|
|
50
|
+
/** Primary color for the widget */
|
|
97
51
|
primaryColor?: string;
|
|
98
|
-
/**
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
/**
|
|
112
|
-
* Callback when widget is ready
|
|
113
|
-
*/
|
|
114
|
-
onReady?: () => void;
|
|
115
|
-
/**
|
|
116
|
-
* Callback when widget opens
|
|
117
|
-
*/
|
|
52
|
+
/** Enable/disable voice feedback */
|
|
53
|
+
allowVoice?: boolean;
|
|
54
|
+
/** Enable/disable text feedback */
|
|
55
|
+
allowText?: boolean;
|
|
56
|
+
/** Enable/disable screenshot capture */
|
|
57
|
+
allowScreenshot?: boolean;
|
|
58
|
+
/** Custom metadata to attach to feedback */
|
|
59
|
+
customMetadata?: Record<string, any>;
|
|
60
|
+
/** User information */
|
|
61
|
+
user?: IntentAIUser;
|
|
62
|
+
}
|
|
63
|
+
interface IntentAIProps extends IntentAIConfig {
|
|
64
|
+
/** Called when widget is opened */
|
|
118
65
|
onOpen?: () => void;
|
|
119
|
-
/**
|
|
120
|
-
* Callback when widget closes
|
|
121
|
-
*/
|
|
66
|
+
/** Called when widget is closed */
|
|
122
67
|
onClose?: () => void;
|
|
123
|
-
/**
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
onSubmit?: (feedback: FeedbackData) => void;
|
|
127
|
-
/**
|
|
128
|
-
* Callback when an error occurs
|
|
129
|
-
*/
|
|
68
|
+
/** Called when feedback is submitted successfully */
|
|
69
|
+
onFeedbackSubmitted?: () => void;
|
|
70
|
+
/** Called when there's an error */
|
|
130
71
|
onError?: (error: Error) => void;
|
|
131
72
|
}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
*/
|
|
135
|
-
interface IntentAIProviderProps extends IntentAIConfig {
|
|
136
|
-
children: React.ReactNode;
|
|
137
|
-
}
|
|
138
|
-
/**
|
|
139
|
-
* Context value for IntentAI provider
|
|
140
|
-
*/
|
|
141
|
-
interface IntentAIContextValue {
|
|
142
|
-
/** Whether the widget is loaded and ready */
|
|
143
|
-
isReady: boolean;
|
|
144
|
-
/** Error if widget failed to load */
|
|
145
|
-
error: Error | null;
|
|
146
|
-
/** Open the feedback widget */
|
|
147
|
-
open: (options?: OpenOptions) => void;
|
|
148
|
-
/** Close the feedback widget */
|
|
73
|
+
interface FeedbackIQInstance {
|
|
74
|
+
open: () => void;
|
|
149
75
|
close: () => void;
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
/** Track a custom event */
|
|
153
|
-
track: (event: string, properties?: Record<string, unknown>) => void;
|
|
154
|
-
/** Set custom metadata */
|
|
155
|
-
setMetadata: (metadata: Record<string, unknown>) => void;
|
|
156
|
-
}
|
|
157
|
-
/**
|
|
158
|
-
* Intent AI widget instance methods
|
|
159
|
-
*/
|
|
160
|
-
interface IntentAIInstance {
|
|
161
|
-
open: (options?: OpenOptions) => void;
|
|
162
|
-
close: () => void;
|
|
163
|
-
identify: (user: UserIdentity) => void;
|
|
164
|
-
track: (event: string, properties?: Record<string, unknown>) => void;
|
|
165
|
-
setMetadata: (metadata: Record<string, unknown>) => void;
|
|
76
|
+
identify: (user: IntentAIUser) => void;
|
|
77
|
+
setMetadata: (metadata: Record<string, any>) => void;
|
|
166
78
|
destroy: () => void;
|
|
167
79
|
}
|
|
168
|
-
/**
|
|
169
|
-
* Window augmentation for Intent AI global
|
|
170
|
-
*/
|
|
171
80
|
declare global {
|
|
172
81
|
interface Window {
|
|
173
|
-
|
|
174
|
-
IntentAIConfig?: IntentAIConfig;
|
|
175
|
-
}
|
|
176
|
-
interface WindowEventMap {
|
|
177
|
-
'intentai:ready': CustomEvent;
|
|
178
|
-
'intentai:open': CustomEvent;
|
|
179
|
-
'intentai:close': CustomEvent;
|
|
180
|
-
'intentai:submit': CustomEvent<FeedbackData>;
|
|
181
|
-
'intentai:error': CustomEvent<Error>;
|
|
82
|
+
FeedbackIQ: new (config: IntentAIConfig) => FeedbackIQInstance;
|
|
182
83
|
}
|
|
183
84
|
}
|
|
184
|
-
|
|
185
85
|
/**
|
|
186
|
-
*
|
|
86
|
+
* Intent AI Feedback Widget for React
|
|
187
87
|
*
|
|
188
88
|
* @example
|
|
189
89
|
* ```tsx
|
|
190
|
-
* import {
|
|
90
|
+
* import { IntentAIWidget } from '@intent-ai/react';
|
|
191
91
|
*
|
|
192
92
|
* function App() {
|
|
193
93
|
* return (
|
|
194
|
-
* <
|
|
195
|
-
*
|
|
196
|
-
*
|
|
197
|
-
*
|
|
198
|
-
*
|
|
199
|
-
* ```
|
|
200
|
-
*/
|
|
201
|
-
declare function IntentAIProvider({ children, apiKey, user, position, theme, primaryColor, autoShow, metadata, onReady, onOpen, onClose, onSubmit, onError, }: IntentAIProviderProps): react_jsx_runtime.JSX.Element;
|
|
202
|
-
/**
|
|
203
|
-
* Hook to access Intent AI widget controls
|
|
204
|
-
*
|
|
205
|
-
* @example
|
|
206
|
-
* ```tsx
|
|
207
|
-
* import { useIntentAI } from '@intentai/react';
|
|
208
|
-
*
|
|
209
|
-
* function FeedbackButton() {
|
|
210
|
-
* const { open, isReady } = useIntentAI();
|
|
211
|
-
*
|
|
212
|
-
* return (
|
|
213
|
-
* <button onClick={() => open()} disabled={!isReady}>
|
|
214
|
-
* Give Feedback
|
|
215
|
-
* </button>
|
|
94
|
+
* <IntentAIWidget
|
|
95
|
+
* apiKey="your-api-key"
|
|
96
|
+
* position="bottom-right"
|
|
97
|
+
* theme="dark"
|
|
98
|
+
* />
|
|
216
99
|
* );
|
|
217
100
|
* }
|
|
218
101
|
* ```
|
|
219
102
|
*/
|
|
220
|
-
declare function
|
|
103
|
+
declare function IntentAIWidget({ apiKey, apiUrl, widgetUrl, position, theme, primaryColor, allowVoice, allowText, allowScreenshot, customMetadata, user, onOpen: _onOpen, onClose: _onClose, onFeedbackSubmitted: _onFeedbackSubmitted, onError, }: IntentAIProps): null;
|
|
221
104
|
/**
|
|
222
|
-
* Hook to
|
|
105
|
+
* Hook to control the Intent AI widget programmatically
|
|
223
106
|
*
|
|
224
107
|
* @example
|
|
225
108
|
* ```tsx
|
|
226
|
-
* import {
|
|
227
|
-
*
|
|
228
|
-
* function Profile({ user }) {
|
|
229
|
-
* useIdentify(user ? { id: user.id, email: user.email } : null);
|
|
230
|
-
* return <div>...</div>;
|
|
231
|
-
* }
|
|
232
|
-
* ```
|
|
233
|
-
*/
|
|
234
|
-
declare function useIdentify(user: UserIdentity | null | undefined): void;
|
|
235
|
-
|
|
236
|
-
/**
|
|
237
|
-
* Props for FeedbackButton component
|
|
238
|
-
*/
|
|
239
|
-
interface FeedbackButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
240
|
-
/** Options to pass when opening the widget */
|
|
241
|
-
openOptions?: OpenOptions;
|
|
242
|
-
/** Custom children to render */
|
|
243
|
-
children?: React$1.ReactNode;
|
|
244
|
-
}
|
|
245
|
-
/**
|
|
246
|
-
* Pre-built button component to open the feedback widget
|
|
247
|
-
*
|
|
248
|
-
* @example
|
|
249
|
-
* ```tsx
|
|
250
|
-
* import { FeedbackButton } from '@intentai/react';
|
|
109
|
+
* import { IntentAIWidget, useIntentAI } from '@intent-ai/react';
|
|
251
110
|
*
|
|
252
111
|
* function App() {
|
|
253
|
-
*
|
|
254
|
-
* <FeedbackButton className="my-custom-class">
|
|
255
|
-
* Send Feedback
|
|
256
|
-
* </FeedbackButton>
|
|
257
|
-
* );
|
|
258
|
-
* }
|
|
259
|
-
* ```
|
|
260
|
-
*/
|
|
261
|
-
declare const FeedbackButton: React$1.ForwardRefExoticComponent<FeedbackButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
262
|
-
/**
|
|
263
|
-
* Props for FeedbackTrigger component
|
|
264
|
-
*/
|
|
265
|
-
interface FeedbackTriggerProps {
|
|
266
|
-
/** Render function or element */
|
|
267
|
-
children: React$1.ReactElement | ((props: {
|
|
268
|
-
open: (options?: OpenOptions) => void;
|
|
269
|
-
isReady: boolean;
|
|
270
|
-
error: Error | null;
|
|
271
|
-
}) => React$1.ReactElement);
|
|
272
|
-
/** Options to pass when opening */
|
|
273
|
-
openOptions?: OpenOptions;
|
|
274
|
-
}
|
|
275
|
-
/**
|
|
276
|
-
* Headless component for custom feedback triggers
|
|
112
|
+
* const { open, close, identify } = useIntentAI();
|
|
277
113
|
*
|
|
278
|
-
* @example
|
|
279
|
-
* ```tsx
|
|
280
|
-
* import { FeedbackTrigger } from '@intentai/react';
|
|
281
|
-
*
|
|
282
|
-
* function App() {
|
|
283
114
|
* return (
|
|
284
|
-
*
|
|
285
|
-
*
|
|
286
|
-
*
|
|
287
|
-
*
|
|
288
|
-
* </MyCustomButton>
|
|
289
|
-
* )}
|
|
290
|
-
* </FeedbackTrigger>
|
|
115
|
+
* <>
|
|
116
|
+
* <IntentAIWidget apiKey="your-api-key" />
|
|
117
|
+
* <button onClick={open}>Open Feedback</button>
|
|
118
|
+
* </>
|
|
291
119
|
* );
|
|
292
120
|
* }
|
|
293
121
|
* ```
|
|
294
122
|
*/
|
|
295
|
-
declare function
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
user: UserIdentity | null | undefined;
|
|
302
|
-
/** Children to render */
|
|
303
|
-
children?: React$1.ReactNode;
|
|
304
|
-
}
|
|
305
|
-
/**
|
|
306
|
-
* Component to identify a user declaratively
|
|
307
|
-
*
|
|
308
|
-
* @example
|
|
309
|
-
* ```tsx
|
|
310
|
-
* import { IdentifyUser } from '@intentai/react';
|
|
311
|
-
*
|
|
312
|
-
* function App({ user }) {
|
|
313
|
-
* return (
|
|
314
|
-
* <IdentifyUser user={user ? { id: user.id, email: user.email } : null}>
|
|
315
|
-
* <YourApp />
|
|
316
|
-
* </IdentifyUser>
|
|
317
|
-
* );
|
|
318
|
-
* }
|
|
319
|
-
* ```
|
|
320
|
-
*/
|
|
321
|
-
declare function IdentifyUser({ user, children }: IdentifyUserProps): react_jsx_runtime.JSX.Element;
|
|
322
|
-
/**
|
|
323
|
-
* Props for SetMetadata component
|
|
324
|
-
*/
|
|
325
|
-
interface SetMetadataProps {
|
|
326
|
-
/** Metadata to set */
|
|
327
|
-
metadata: Record<string, unknown>;
|
|
328
|
-
/** Children to render */
|
|
329
|
-
children?: React$1.ReactNode;
|
|
330
|
-
}
|
|
331
|
-
/**
|
|
332
|
-
* Component to set metadata declaratively
|
|
333
|
-
*
|
|
334
|
-
* @example
|
|
335
|
-
* ```tsx
|
|
336
|
-
* import { SetMetadata } from '@intentai/react';
|
|
337
|
-
*
|
|
338
|
-
* function PricingPage() {
|
|
339
|
-
* return (
|
|
340
|
-
* <SetMetadata metadata={{ page: 'pricing', plan: 'pro' }}>
|
|
341
|
-
* <PricingContent />
|
|
342
|
-
* </SetMetadata>
|
|
343
|
-
* );
|
|
344
|
-
* }
|
|
345
|
-
* ```
|
|
346
|
-
*/
|
|
347
|
-
declare function SetMetadata({ metadata, children }: SetMetadataProps): react_jsx_runtime.JSX.Element;
|
|
348
|
-
/**
|
|
349
|
-
* Props for TrackEvent component
|
|
350
|
-
*/
|
|
351
|
-
interface TrackEventProps {
|
|
352
|
-
/** Event name to track */
|
|
353
|
-
event: string;
|
|
354
|
-
/** Event properties */
|
|
355
|
-
properties?: Record<string, unknown>;
|
|
356
|
-
/** When to track: 'mount' (default) or 'render' */
|
|
357
|
-
trigger?: 'mount' | 'render';
|
|
358
|
-
/** Children to render */
|
|
359
|
-
children?: React$1.ReactNode;
|
|
360
|
-
}
|
|
361
|
-
/**
|
|
362
|
-
* Component to track events declaratively
|
|
363
|
-
*
|
|
364
|
-
* @example
|
|
365
|
-
* ```tsx
|
|
366
|
-
* import { TrackEvent } from '@intentai/react';
|
|
367
|
-
*
|
|
368
|
-
* function CheckoutPage() {
|
|
369
|
-
* return (
|
|
370
|
-
* <TrackEvent event="checkout_viewed" properties={{ items: 3 }}>
|
|
371
|
-
* <CheckoutContent />
|
|
372
|
-
* </TrackEvent>
|
|
373
|
-
* );
|
|
374
|
-
* }
|
|
375
|
-
* ```
|
|
376
|
-
*/
|
|
377
|
-
declare function TrackEvent({ event, properties, trigger, children, }: TrackEventProps): react_jsx_runtime.JSX.Element;
|
|
123
|
+
declare function useIntentAI(): {
|
|
124
|
+
open: () => void;
|
|
125
|
+
close: () => void;
|
|
126
|
+
identify: (user: IntentAIUser) => void;
|
|
127
|
+
setMetadata: (metadata: Record<string, any>) => void;
|
|
128
|
+
};
|
|
378
129
|
|
|
379
|
-
export {
|
|
130
|
+
export { type IntentAIConfig, type IntentAIProps, type IntentAIUser, IntentAIWidget, PremiumVoiceWidget, type WidgetConfig as PremiumWidgetConfig, IntentAIWidget as default, useIntentAI };
|