@uptrademedia/site-kit 1.0.1 → 1.0.4
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/dist/SetupWizard-Cki06kB0.d.mts +12 -0
- package/dist/SetupWizard-Cki06kB0.d.ts +12 -0
- package/dist/analytics/index.d.mts +87 -0
- package/dist/analytics/index.d.ts +87 -0
- package/dist/blog/index.d.mts +24 -0
- package/dist/blog/index.d.ts +24 -0
- package/dist/blog/index.js.map +1 -1
- package/dist/blog/index.mjs.map +1 -1
- package/dist/chunk-2IHTEKHU.mjs +332 -0
- package/dist/chunk-2IHTEKHU.mjs.map +1 -0
- package/dist/chunk-5R4R3WDP.js +1451 -0
- package/dist/chunk-5R4R3WDP.js.map +1 -0
- package/dist/{chunk-RV7H3I6J.js → chunk-ADHVEFWD.js} +68 -2
- package/dist/chunk-ADHVEFWD.js.map +1 -0
- package/dist/chunk-BGJLOJ7T.mjs +605 -0
- package/dist/chunk-BGJLOJ7T.mjs.map +1 -0
- package/dist/chunk-BZBJVG5Y.js +88 -0
- package/dist/chunk-BZBJVG5Y.js.map +1 -0
- package/dist/{chunk-COI6GOX2.mjs → chunk-DOHML47I.mjs} +3 -3
- package/dist/chunk-DOHML47I.mjs.map +1 -0
- package/dist/chunk-DRFTRTKV.js +809 -0
- package/dist/chunk-DRFTRTKV.js.map +1 -0
- package/dist/chunk-EL5QTAA3.mjs +805 -0
- package/dist/chunk-EL5QTAA3.mjs.map +1 -0
- package/dist/chunk-GAJLEDRD.js +334 -0
- package/dist/chunk-GAJLEDRD.js.map +1 -0
- package/dist/{chunk-3MUOUXHV.js → chunk-K2HWVOEO.js} +3 -3
- package/dist/chunk-K2HWVOEO.js.map +1 -0
- package/dist/chunk-O2OHHBUD.js +997 -0
- package/dist/chunk-O2OHHBUD.js.map +1 -0
- package/dist/chunk-QAYJV4KK.js +608 -0
- package/dist/chunk-QAYJV4KK.js.map +1 -0
- package/dist/{chunk-FEBYQGY4 2.mjs → chunk-SMUFNQLM.mjs} +67 -3
- package/dist/chunk-SMUFNQLM.mjs.map +1 -0
- package/dist/chunk-VDMZZL2O.mjs +83 -0
- package/dist/chunk-VDMZZL2O.mjs.map +1 -0
- package/dist/chunk-XFRPT5ZX.mjs +1449 -0
- package/dist/chunk-XFRPT5ZX.mjs.map +1 -0
- package/dist/chunk-XQJX252G.mjs +981 -0
- package/dist/chunk-XQJX252G.mjs.map +1 -0
- package/dist/commerce/index.d.mts +168 -0
- package/dist/commerce/index.d.ts +168 -0
- package/dist/commerce/index.js +38 -38
- package/dist/commerce/index.mjs +1 -1
- package/dist/commerce/server.d.mts +98 -0
- package/dist/commerce/server.d.ts +98 -0
- package/dist/engage/index.d.mts +27 -0
- package/dist/engage/index.d.ts +27 -0
- package/dist/engage/index.js +7 -40
- package/dist/engage/index.js.map +1 -1
- package/dist/engage/index.mjs +1 -41
- package/dist/engage/index.mjs.map +1 -1
- package/dist/forms/index.d.mts +437 -0
- package/dist/forms/index.d.ts +437 -0
- package/dist/forms/index.js +13 -5
- package/dist/forms/index.js.map +1 -1
- package/dist/forms/index.mjs +2 -2
- package/dist/forms/index.mjs.map +1 -1
- package/dist/{generators-7Y5ABRYV 2.mjs → generators-TO2FKJR6.mjs} +134 -3
- package/dist/generators-TO2FKJR6.mjs.map +1 -0
- package/dist/{generators-GWIYCA5M.js → generators-YZWIGHCO.js} +135 -2
- package/dist/generators-YZWIGHCO.js.map +1 -0
- package/dist/images/index.d.mts +133 -0
- package/dist/images/index.d.ts +133 -0
- package/dist/images/index.js +41 -0
- package/dist/images/index.js.map +1 -0
- package/dist/images/index.mjs +8 -0
- package/dist/images/index.mjs.map +1 -0
- package/dist/index.d.mts +649 -0
- package/dist/index.d.ts +649 -0
- package/dist/index.js +1355 -104
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1242 -76
- package/dist/index.mjs.map +1 -1
- package/dist/redirects/index.d.mts +72 -0
- package/dist/redirects/index.d.ts +72 -0
- package/dist/redirects/index.js +25 -0
- package/dist/redirects/index.js.map +1 -0
- package/dist/redirects/index.mjs +4 -0
- package/dist/redirects/index.mjs.map +1 -0
- package/dist/routing-BWjUF7lp.d.ts +105 -0
- package/dist/routing-CgmRi9tD.d.mts +105 -0
- package/dist/{scanner-MF7P3CDE 2.mjs → scanner-AZV5I6US.mjs} +123 -4
- package/dist/scanner-AZV5I6US.mjs.map +1 -0
- package/dist/{scanner-NT6YG4TD 2.js → scanner-ETJAMIT7.js} +124 -3
- package/dist/scanner-ETJAMIT7.js.map +1 -0
- package/dist/seo/index.d.mts +273 -0
- package/dist/seo/index.d.ts +273 -0
- package/dist/seo/server.d.mts +89 -0
- package/dist/seo/server.d.ts +89 -0
- package/dist/setup/client.d.mts +60 -0
- package/dist/setup/client.d.ts +60 -0
- package/dist/setup/client.js +30 -0
- package/dist/setup/client.js.map +1 -0
- package/dist/setup/client.mjs +5 -0
- package/dist/setup/client.mjs.map +1 -0
- package/dist/setup/index.d.mts +5 -0
- package/dist/setup/index.d.ts +5 -0
- package/dist/setup/index.js +28 -1043
- package/dist/setup/index.js.map +1 -1
- package/dist/setup/index.mjs +3 -1043
- package/dist/setup/index.mjs.map +1 -1
- package/dist/setup/server.d.mts +14 -0
- package/dist/setup/server.d.ts +14 -0
- package/dist/setup/server.js +13 -0
- package/dist/setup/server.js.map +1 -0
- package/dist/setup/server.mjs +4 -0
- package/dist/setup/server.mjs.map +1 -0
- package/dist/sitemap/index.d.mts +78 -0
- package/dist/sitemap/index.d.ts +78 -0
- package/dist/types-BDojCvvL.d.mts +156 -0
- package/dist/types-BDojCvvL.d.ts +156 -0
- package/dist/types-BmzutFwy.d.mts +227 -0
- package/dist/types-BmzutFwy.d.ts +227 -0
- package/dist/types-C0pJGfbH.d.mts +155 -0
- package/dist/types-C0pJGfbH.d.ts +155 -0
- package/dist/types-DA_Kocle.d.mts +127 -0
- package/dist/types-DA_Kocle.d.ts +127 -0
- package/dist/types-lFLKKn0G.d.mts +163 -0
- package/dist/types-lFLKKn0G.d.ts +163 -0
- package/dist/types-nB206tPK.d.mts +309 -0
- package/dist/types-nB206tPK.d.ts +309 -0
- package/dist/useEventModal-6U1pF3_g.d.mts +209 -0
- package/dist/useEventModal-BA8g-1-P.d.ts +209 -0
- package/package.json +21 -1
- package/dist/chunk-3MUOUXHV.js.map +0 -1
- package/dist/chunk-4HVYXYQL 2.mjs +0 -255
- package/dist/chunk-4HVYXYQL.mjs +0 -255
- package/dist/chunk-4HVYXYQL.mjs.map +0 -1
- package/dist/chunk-COI6GOX2.mjs.map +0 -1
- package/dist/chunk-EQCVQC35.js 2.map +0 -1
- package/dist/chunk-FEBYQGY4.mjs +0 -251
- package/dist/chunk-FEBYQGY4.mjs.map +0 -1
- package/dist/chunk-NYKRE2FL 2.mjs +0 -31
- package/dist/chunk-NYKRE2FL.mjs 2.map +0 -1
- package/dist/chunk-RV7H3I6J.js 2.map +0 -1
- package/dist/chunk-RV7H3I6J.js.map +0 -1
- package/dist/chunk-TUKGA3UK.js +0 -257
- package/dist/chunk-TUKGA3UK.js 2.map +0 -1
- package/dist/chunk-TUKGA3UK.js.map +0 -1
- package/dist/generators-7Y5ABRYV.mjs +0 -161
- package/dist/generators-7Y5ABRYV.mjs 2.map +0 -1
- package/dist/generators-7Y5ABRYV.mjs.map +0 -1
- package/dist/generators-GWIYCA5M.js 2.map +0 -1
- package/dist/generators-GWIYCA5M.js.map +0 -1
- package/dist/index 2.mjs +0 -74
- package/dist/index.js 2.map +0 -1
- package/dist/migrator-V6KS75EA 2.mjs +0 -265
- package/dist/migrator-V6KS75EA.mjs 2.map +0 -1
- package/dist/migrator-XKM7YQCY.js 2.map +0 -1
- package/dist/scanner-MF7P3CDE.mjs +0 -14386
- package/dist/scanner-MF7P3CDE.mjs 2.map +0 -1
- package/dist/scanner-MF7P3CDE.mjs.map +0 -1
- package/dist/scanner-NT6YG4TD.js +0 -14397
- package/dist/scanner-NT6YG4TD.js 2.map +0 -1
- package/dist/scanner-NT6YG4TD.js.map +0 -1
- package/dist/web-vitals-BH55V7EJ.js 2.map +0 -1
- package/dist/web-vitals-RJYPWAR3 2.mjs +0 -241
- package/dist/web-vitals-RJYPWAR3.mjs 2.map +0 -1
package/dist/index.mjs
CHANGED
|
@@ -1,81 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
export { SetupWizard } from './chunk-XFRPT5ZX.mjs';
|
|
2
|
+
export { clearRedirectCache, fetchRedirectRules, generateNextRedirects, handleManagedRedirects } from './chunk-VDMZZL2O.mjs';
|
|
3
|
+
import { useSignalExperiment, useSignalEvent } from './chunk-XQJX252G.mjs';
|
|
4
|
+
export { ManagedImage, SignalBridge, SiteKitProvider, assignImageToSlot, clearImageSlot, fetchManagedImage, fetchManagedImages, listImageFiles, uploadImage, useSignal, useSignalConfig, useSignalEvent, useSignalExperiment, useSignalOutcome, useSiteKit } from './chunk-XQJX252G.mjs';
|
|
5
|
+
import './chunk-WPSRS352.mjs';
|
|
6
|
+
import './chunk-FKVJOT2F.mjs';
|
|
7
|
+
import './chunk-BGJLOJ7T.mjs';
|
|
8
|
+
import './chunk-SMUFNQLM.mjs';
|
|
9
|
+
export { CalendarView, CheckoutForm, EventCalendar, EventEmbed, EventModal, EventTile, OfferingCard, OfferingList, ProductEmbed, RegistrationForm, UpcomingEvents, createCheckoutSession, fetchNextEvent, fetchOffering, fetchOfferings, fetchProducts, fetchServices, fetchUpcomingEvents, formatDate, formatDateTime, formatPrice, getOfferingUrl, registerForEvent, useEventModal } from './chunk-DOHML47I.mjs';
|
|
6
10
|
import './chunk-NYKRE2FL.mjs';
|
|
7
|
-
import {
|
|
11
|
+
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
8
12
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
9
13
|
|
|
10
|
-
var SiteKitContext = createContext(null);
|
|
11
|
-
function useSiteKit() {
|
|
12
|
-
const context = useContext(SiteKitContext);
|
|
13
|
-
if (!context) {
|
|
14
|
-
throw new Error("useSiteKit must be used within a SiteKitProvider");
|
|
15
|
-
}
|
|
16
|
-
return context;
|
|
17
|
-
}
|
|
18
|
-
function SiteKitProvider({
|
|
19
|
-
children,
|
|
20
|
-
apiUrl = "https://api.uptrademedia.com",
|
|
21
|
-
apiKey,
|
|
22
|
-
analytics,
|
|
23
|
-
engage,
|
|
24
|
-
forms,
|
|
25
|
-
debug = false
|
|
26
|
-
}) {
|
|
27
|
-
useEffect(() => {
|
|
28
|
-
if (typeof window !== "undefined") {
|
|
29
|
-
window.__SITE_KIT_API_URL__ = apiUrl;
|
|
30
|
-
window.__SITE_KIT_API_KEY__ = apiKey;
|
|
31
|
-
window.__SITE_KIT_DEBUG__ = debug;
|
|
32
|
-
}
|
|
33
|
-
configureFormsApi({
|
|
34
|
-
baseUrl: apiUrl,
|
|
35
|
-
apiKey
|
|
36
|
-
});
|
|
37
|
-
}, [apiUrl, apiKey, debug]);
|
|
38
|
-
const contextValue = useMemo(
|
|
39
|
-
() => ({
|
|
40
|
-
apiUrl,
|
|
41
|
-
apiKey,
|
|
42
|
-
analytics,
|
|
43
|
-
engage,
|
|
44
|
-
forms,
|
|
45
|
-
debug,
|
|
46
|
-
isReady: true
|
|
47
|
-
}),
|
|
48
|
-
[apiUrl, apiKey, analytics, engage, forms, debug]
|
|
49
|
-
);
|
|
50
|
-
let content = /* @__PURE__ */ jsx(Fragment, { children });
|
|
51
|
-
if (analytics?.enabled) {
|
|
52
|
-
content = /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
|
|
53
|
-
AnalyticsProvider,
|
|
54
|
-
{
|
|
55
|
-
apiUrl,
|
|
56
|
-
apiKey,
|
|
57
|
-
trackPageViews: analytics.trackPageViews !== false,
|
|
58
|
-
trackWebVitals: analytics.trackWebVitals !== false,
|
|
59
|
-
trackScrollDepth: analytics.trackScrollDepth !== false,
|
|
60
|
-
trackClicks: analytics.trackClicks !== false,
|
|
61
|
-
debug,
|
|
62
|
-
children: content
|
|
63
|
-
}
|
|
64
|
-
) });
|
|
65
|
-
}
|
|
66
|
-
if (engage?.enabled) {
|
|
67
|
-
content = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
68
|
-
content,
|
|
69
|
-
/* @__PURE__ */ jsx(EngageWidget, { apiUrl, apiKey })
|
|
70
|
-
] });
|
|
71
|
-
}
|
|
72
|
-
content = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
73
|
-
content,
|
|
74
|
-
/* @__PURE__ */ jsx(SitemapSync, { debug })
|
|
75
|
-
] });
|
|
76
|
-
return /* @__PURE__ */ jsx(SiteKitContext.Provider, { value: contextValue, children: content });
|
|
77
|
-
}
|
|
78
|
-
|
|
79
14
|
// src/affiliates/api.ts
|
|
80
15
|
function getApiConfig() {
|
|
81
16
|
const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.uptrademedia.com" : "https://api.uptrademedia.com";
|
|
@@ -216,7 +151,1238 @@ function AffiliatesWidget({
|
|
|
216
151
|
)
|
|
217
152
|
) });
|
|
218
153
|
}
|
|
154
|
+
function SignalExperiment({
|
|
155
|
+
experimentId,
|
|
156
|
+
variants,
|
|
157
|
+
fallback,
|
|
158
|
+
trackImpression = true,
|
|
159
|
+
children
|
|
160
|
+
}) {
|
|
161
|
+
const { assignment, variant, isControl } = useSignalExperiment(experimentId);
|
|
162
|
+
const trackEvent = useSignalEvent();
|
|
163
|
+
useEffect(() => {
|
|
164
|
+
if (trackImpression && variant) {
|
|
165
|
+
trackEvent({
|
|
166
|
+
event_type: "experiment",
|
|
167
|
+
event_name: "impression",
|
|
168
|
+
event_data: {
|
|
169
|
+
experiment_id: experimentId,
|
|
170
|
+
variant_key: variant
|
|
171
|
+
}
|
|
172
|
+
});
|
|
173
|
+
}
|
|
174
|
+
}, [experimentId, variant, trackImpression, trackEvent]);
|
|
175
|
+
if (children) {
|
|
176
|
+
return /* @__PURE__ */ jsx(Fragment, { children: children({ variant: variant || "control", isControl }) });
|
|
177
|
+
}
|
|
178
|
+
const selectedVariant = variant || "control";
|
|
179
|
+
const content = variants[selectedVariant];
|
|
180
|
+
if (content !== void 0) {
|
|
181
|
+
return /* @__PURE__ */ jsx(Fragment, { children: content });
|
|
182
|
+
}
|
|
183
|
+
if (fallback) {
|
|
184
|
+
return /* @__PURE__ */ jsx(Fragment, { children: fallback });
|
|
185
|
+
}
|
|
186
|
+
return /* @__PURE__ */ jsx(Fragment, { children: variants.control || null });
|
|
187
|
+
}
|
|
188
|
+
function useExperimentVariant(experimentId) {
|
|
189
|
+
return useSignalExperiment(experimentId);
|
|
190
|
+
}
|
|
191
|
+
function ExperimentConversion({
|
|
192
|
+
experimentId,
|
|
193
|
+
outcomeType = "click",
|
|
194
|
+
value,
|
|
195
|
+
children
|
|
196
|
+
}) {
|
|
197
|
+
const trackEvent = useSignalEvent();
|
|
198
|
+
const { variant } = useSignalExperiment(experimentId);
|
|
199
|
+
const handleInteraction = () => {
|
|
200
|
+
trackEvent({
|
|
201
|
+
event_type: "experiment",
|
|
202
|
+
event_name: "conversion",
|
|
203
|
+
event_data: {
|
|
204
|
+
experiment_id: experimentId,
|
|
205
|
+
variant_key: variant,
|
|
206
|
+
outcome_type: outcomeType,
|
|
207
|
+
value
|
|
208
|
+
}
|
|
209
|
+
});
|
|
210
|
+
};
|
|
211
|
+
return React.cloneElement(children, {
|
|
212
|
+
onClick: (e) => {
|
|
213
|
+
handleInteraction();
|
|
214
|
+
if (children.props.onClick) {
|
|
215
|
+
children.props.onClick(e);
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
});
|
|
219
|
+
}
|
|
220
|
+
var styles = {
|
|
221
|
+
container: {
|
|
222
|
+
display: "flex",
|
|
223
|
+
flexDirection: "column",
|
|
224
|
+
height: "100vh",
|
|
225
|
+
maxWidth: "800px",
|
|
226
|
+
margin: "0 auto",
|
|
227
|
+
padding: "1rem",
|
|
228
|
+
fontFamily: "system-ui, -apple-system, sans-serif"
|
|
229
|
+
},
|
|
230
|
+
header: {
|
|
231
|
+
display: "flex",
|
|
232
|
+
alignItems: "center",
|
|
233
|
+
gap: "0.75rem",
|
|
234
|
+
padding: "1rem 0",
|
|
235
|
+
borderBottom: "1px solid #e5e7eb"
|
|
236
|
+
},
|
|
237
|
+
logo: {
|
|
238
|
+
width: "32px",
|
|
239
|
+
height: "32px",
|
|
240
|
+
borderRadius: "8px",
|
|
241
|
+
background: "linear-gradient(135deg, #3b82f6, #8b5cf6)",
|
|
242
|
+
display: "flex",
|
|
243
|
+
alignItems: "center",
|
|
244
|
+
justifyContent: "center",
|
|
245
|
+
color: "white",
|
|
246
|
+
fontWeight: "bold"
|
|
247
|
+
},
|
|
248
|
+
title: {
|
|
249
|
+
fontSize: "1.25rem",
|
|
250
|
+
fontWeight: "600",
|
|
251
|
+
color: "#111827"
|
|
252
|
+
},
|
|
253
|
+
subtitle: {
|
|
254
|
+
fontSize: "0.875rem",
|
|
255
|
+
color: "#6b7280"
|
|
256
|
+
},
|
|
257
|
+
messages: {
|
|
258
|
+
flex: 1,
|
|
259
|
+
overflowY: "auto",
|
|
260
|
+
padding: "1rem 0",
|
|
261
|
+
display: "flex",
|
|
262
|
+
flexDirection: "column",
|
|
263
|
+
gap: "1rem"
|
|
264
|
+
},
|
|
265
|
+
message: {
|
|
266
|
+
display: "flex",
|
|
267
|
+
gap: "0.75rem",
|
|
268
|
+
maxWidth: "85%"
|
|
269
|
+
},
|
|
270
|
+
messageAssistant: {
|
|
271
|
+
alignSelf: "flex-start"
|
|
272
|
+
},
|
|
273
|
+
messageUser: {
|
|
274
|
+
alignSelf: "flex-end",
|
|
275
|
+
flexDirection: "row-reverse"
|
|
276
|
+
},
|
|
277
|
+
avatar: {
|
|
278
|
+
width: "32px",
|
|
279
|
+
height: "32px",
|
|
280
|
+
borderRadius: "50%",
|
|
281
|
+
display: "flex",
|
|
282
|
+
alignItems: "center",
|
|
283
|
+
justifyContent: "center",
|
|
284
|
+
fontSize: "0.875rem",
|
|
285
|
+
flexShrink: 0
|
|
286
|
+
},
|
|
287
|
+
avatarAssistant: {
|
|
288
|
+
background: "linear-gradient(135deg, #3b82f6, #8b5cf6)",
|
|
289
|
+
color: "white"
|
|
290
|
+
},
|
|
291
|
+
avatarUser: {
|
|
292
|
+
background: "#e5e7eb",
|
|
293
|
+
color: "#374151"
|
|
294
|
+
},
|
|
295
|
+
bubble: {
|
|
296
|
+
padding: "0.75rem 1rem",
|
|
297
|
+
borderRadius: "1rem",
|
|
298
|
+
fontSize: "0.9375rem",
|
|
299
|
+
lineHeight: "1.5"
|
|
300
|
+
},
|
|
301
|
+
bubbleAssistant: {
|
|
302
|
+
background: "#f3f4f6",
|
|
303
|
+
color: "#111827",
|
|
304
|
+
borderTopLeftRadius: "4px"
|
|
305
|
+
},
|
|
306
|
+
bubbleUser: {
|
|
307
|
+
background: "#3b82f6",
|
|
308
|
+
color: "white",
|
|
309
|
+
borderTopRightRadius: "4px"
|
|
310
|
+
},
|
|
311
|
+
actions: {
|
|
312
|
+
display: "flex",
|
|
313
|
+
flexWrap: "wrap",
|
|
314
|
+
gap: "0.5rem",
|
|
315
|
+
marginTop: "0.75rem"
|
|
316
|
+
},
|
|
317
|
+
actionButton: {
|
|
318
|
+
padding: "0.5rem 1rem",
|
|
319
|
+
borderRadius: "0.5rem",
|
|
320
|
+
fontSize: "0.875rem",
|
|
321
|
+
fontWeight: "500",
|
|
322
|
+
cursor: "pointer",
|
|
323
|
+
border: "none",
|
|
324
|
+
transition: "all 0.15s"
|
|
325
|
+
},
|
|
326
|
+
actionPrimary: {
|
|
327
|
+
background: "#3b82f6",
|
|
328
|
+
color: "white"
|
|
329
|
+
},
|
|
330
|
+
actionSecondary: {
|
|
331
|
+
background: "#e5e7eb",
|
|
332
|
+
color: "#374151"
|
|
333
|
+
},
|
|
334
|
+
actionOutline: {
|
|
335
|
+
background: "transparent",
|
|
336
|
+
color: "#3b82f6",
|
|
337
|
+
border: "1px solid #3b82f6"
|
|
338
|
+
},
|
|
339
|
+
inputContainer: {
|
|
340
|
+
display: "flex",
|
|
341
|
+
gap: "0.5rem",
|
|
342
|
+
padding: "1rem 0",
|
|
343
|
+
borderTop: "1px solid #e5e7eb"
|
|
344
|
+
},
|
|
345
|
+
input: {
|
|
346
|
+
flex: 1,
|
|
347
|
+
padding: "0.75rem 1rem",
|
|
348
|
+
borderRadius: "0.75rem",
|
|
349
|
+
border: "1px solid #d1d5db",
|
|
350
|
+
fontSize: "0.9375rem",
|
|
351
|
+
outline: "none"
|
|
352
|
+
},
|
|
353
|
+
sendButton: {
|
|
354
|
+
padding: "0.75rem 1.5rem",
|
|
355
|
+
borderRadius: "0.75rem",
|
|
356
|
+
background: "#3b82f6",
|
|
357
|
+
color: "white",
|
|
358
|
+
border: "none",
|
|
359
|
+
fontWeight: "500",
|
|
360
|
+
cursor: "pointer"
|
|
361
|
+
},
|
|
362
|
+
typing: {
|
|
363
|
+
display: "flex",
|
|
364
|
+
gap: "4px",
|
|
365
|
+
padding: "0.75rem 1rem",
|
|
366
|
+
background: "#f3f4f6",
|
|
367
|
+
borderRadius: "1rem",
|
|
368
|
+
width: "fit-content"
|
|
369
|
+
},
|
|
370
|
+
typingDot: {
|
|
371
|
+
width: "8px",
|
|
372
|
+
height: "8px",
|
|
373
|
+
borderRadius: "50%",
|
|
374
|
+
background: "#9ca3af",
|
|
375
|
+
animation: "typing 1.4s infinite"
|
|
376
|
+
},
|
|
377
|
+
moduleCard: {
|
|
378
|
+
display: "flex",
|
|
379
|
+
alignItems: "center",
|
|
380
|
+
gap: "0.75rem",
|
|
381
|
+
padding: "0.75rem",
|
|
382
|
+
background: "white",
|
|
383
|
+
border: "1px solid #e5e7eb",
|
|
384
|
+
borderRadius: "0.5rem",
|
|
385
|
+
cursor: "pointer",
|
|
386
|
+
transition: "all 0.15s"
|
|
387
|
+
},
|
|
388
|
+
moduleCardSelected: {
|
|
389
|
+
borderColor: "#3b82f6",
|
|
390
|
+
background: "#eff6ff"
|
|
391
|
+
},
|
|
392
|
+
moduleIcon: {
|
|
393
|
+
fontSize: "1.5rem"
|
|
394
|
+
},
|
|
395
|
+
moduleInfo: {
|
|
396
|
+
flex: 1
|
|
397
|
+
},
|
|
398
|
+
moduleName: {
|
|
399
|
+
fontWeight: "500",
|
|
400
|
+
color: "#111827"
|
|
401
|
+
},
|
|
402
|
+
moduleDesc: {
|
|
403
|
+
fontSize: "0.75rem",
|
|
404
|
+
color: "#6b7280"
|
|
405
|
+
},
|
|
406
|
+
checkbox: {
|
|
407
|
+
width: "20px",
|
|
408
|
+
height: "20px",
|
|
409
|
+
accentColor: "#3b82f6"
|
|
410
|
+
}
|
|
411
|
+
};
|
|
412
|
+
var MODULES = [
|
|
413
|
+
{ id: "analytics", name: "Analytics", icon: "\u{1F4CA}", description: "Page views, events, sessions, web vitals", recommended: true },
|
|
414
|
+
{ id: "seo", name: "SEO", icon: "\u{1F50D}", description: "Managed FAQs, meta tags, schema markup", recommended: true },
|
|
415
|
+
{ id: "forms", name: "Forms", icon: "\u{1F4DD}", description: "Portal-managed forms with submissions", recommended: true },
|
|
416
|
+
{ id: "engage", name: "Engage", icon: "\u{1F4AC}", description: "Live chat, popups, nudges, banners", recommended: false },
|
|
417
|
+
{ id: "commerce", name: "Commerce", icon: "\u{1F6D2}", description: "Products, services, checkout", recommended: false },
|
|
418
|
+
{ id: "signal", name: "Signal AI", icon: "\u{1F916}", description: "Autonomous optimization & A/B testing", recommended: false }
|
|
419
|
+
];
|
|
420
|
+
function SetupAssistant({
|
|
421
|
+
apiUrl = "https://api.uptrademedia.com",
|
|
422
|
+
signalUrl = "https://signal.uptrademedia.com",
|
|
423
|
+
supabaseUrl,
|
|
424
|
+
supabaseKey,
|
|
425
|
+
projectId,
|
|
426
|
+
orgId,
|
|
427
|
+
authToken,
|
|
428
|
+
onComplete,
|
|
429
|
+
welcomeMessage
|
|
430
|
+
}) {
|
|
431
|
+
const [messages, setMessages] = useState([]);
|
|
432
|
+
const [input, setInput] = useState("");
|
|
433
|
+
const [isTyping, setIsTyping] = useState(false);
|
|
434
|
+
const [isExtracting, setIsExtracting] = useState(false);
|
|
435
|
+
const [state, setState] = useState({
|
|
436
|
+
step: "welcome",
|
|
437
|
+
isAuthenticated: !!authToken,
|
|
438
|
+
selectedModules: ["analytics", "seo", "forms"],
|
|
439
|
+
config: {},
|
|
440
|
+
errors: [],
|
|
441
|
+
context: {
|
|
442
|
+
flow: null,
|
|
443
|
+
step: "welcome",
|
|
444
|
+
project_id: projectId,
|
|
445
|
+
org_id: orgId
|
|
446
|
+
}
|
|
447
|
+
});
|
|
448
|
+
const messagesEndRef = useRef(null);
|
|
449
|
+
const inputRef = useRef(null);
|
|
450
|
+
const streamingMessageRef = useRef(null);
|
|
451
|
+
const sendToSignalStreaming = useCallback(async (message, context, onToken, onComplete2) => {
|
|
452
|
+
try {
|
|
453
|
+
const response = await fetch(`${signalUrl}/api/skills/setup/chat/stream`, {
|
|
454
|
+
method: "POST",
|
|
455
|
+
headers: {
|
|
456
|
+
"Content-Type": "application/json",
|
|
457
|
+
...authToken ? { Authorization: `Bearer ${authToken}` } : {}
|
|
458
|
+
},
|
|
459
|
+
body: JSON.stringify({
|
|
460
|
+
message,
|
|
461
|
+
context,
|
|
462
|
+
project_id: projectId,
|
|
463
|
+
org_id: orgId
|
|
464
|
+
})
|
|
465
|
+
});
|
|
466
|
+
if (!response.ok) {
|
|
467
|
+
throw new Error("Signal API error");
|
|
468
|
+
}
|
|
469
|
+
const reader = response.body?.getReader();
|
|
470
|
+
if (!reader) throw new Error("No response body");
|
|
471
|
+
const decoder = new TextDecoder();
|
|
472
|
+
let buffer = "";
|
|
473
|
+
let actions = [];
|
|
474
|
+
let updatedContext = {};
|
|
475
|
+
while (true) {
|
|
476
|
+
const { done, value } = await reader.read();
|
|
477
|
+
if (done) break;
|
|
478
|
+
buffer += decoder.decode(value, { stream: true });
|
|
479
|
+
const lines = buffer.split("\n");
|
|
480
|
+
buffer = lines.pop() || "";
|
|
481
|
+
for (const line of lines) {
|
|
482
|
+
if (line.startsWith("data: ")) {
|
|
483
|
+
const data = line.slice(6);
|
|
484
|
+
if (data === "[DONE]") continue;
|
|
485
|
+
try {
|
|
486
|
+
const event = JSON.parse(data);
|
|
487
|
+
if (event.type === "token") {
|
|
488
|
+
onToken(event.content);
|
|
489
|
+
} else if (event.type === "actions") {
|
|
490
|
+
actions = event.actions;
|
|
491
|
+
} else if (event.type === "context") {
|
|
492
|
+
updatedContext = event.context;
|
|
493
|
+
}
|
|
494
|
+
} catch {
|
|
495
|
+
onToken(data);
|
|
496
|
+
}
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
}
|
|
500
|
+
onComplete2({ actions, updated_context: updatedContext });
|
|
501
|
+
} catch (error) {
|
|
502
|
+
console.error("Signal streaming error:", error);
|
|
503
|
+
const result = await sendToSignal(message, context);
|
|
504
|
+
onToken(result.response);
|
|
505
|
+
onComplete2({ actions: result.actions, updated_context: result.updated_context });
|
|
506
|
+
}
|
|
507
|
+
}, [signalUrl, authToken, projectId, orgId]);
|
|
508
|
+
const sendToSignal = useCallback(async (message, context) => {
|
|
509
|
+
try {
|
|
510
|
+
const response = await fetch(`${signalUrl}/api/skills/setup/chat`, {
|
|
511
|
+
method: "POST",
|
|
512
|
+
headers: {
|
|
513
|
+
"Content-Type": "application/json",
|
|
514
|
+
...authToken ? { Authorization: `Bearer ${authToken}` } : {}
|
|
515
|
+
},
|
|
516
|
+
body: JSON.stringify({
|
|
517
|
+
message,
|
|
518
|
+
context,
|
|
519
|
+
project_id: projectId,
|
|
520
|
+
org_id: orgId
|
|
521
|
+
})
|
|
522
|
+
});
|
|
523
|
+
if (!response.ok) {
|
|
524
|
+
throw new Error("Signal API error");
|
|
525
|
+
}
|
|
526
|
+
return await response.json();
|
|
527
|
+
} catch (error) {
|
|
528
|
+
console.error("Signal API error:", error);
|
|
529
|
+
return {
|
|
530
|
+
response: "I had trouble connecting to Signal. Let me help you locally.",
|
|
531
|
+
actions: [
|
|
532
|
+
{ id: "1", label: "Continue", action: "continue_local", variant: "primary" }
|
|
533
|
+
]
|
|
534
|
+
};
|
|
535
|
+
}
|
|
536
|
+
}, [signalUrl, authToken, projectId, orgId]);
|
|
537
|
+
const extractBrandFromDomain = useCallback(async (domain) => {
|
|
538
|
+
setIsExtracting(true);
|
|
539
|
+
try {
|
|
540
|
+
const response = await fetch(`${apiUrl}/site-scrape/brand-only`, {
|
|
541
|
+
method: "POST",
|
|
542
|
+
headers: {
|
|
543
|
+
"Content-Type": "application/json",
|
|
544
|
+
...authToken ? { Authorization: `Bearer ${authToken}` } : {}
|
|
545
|
+
},
|
|
546
|
+
body: JSON.stringify({ domain })
|
|
547
|
+
});
|
|
548
|
+
if (!response.ok) {
|
|
549
|
+
throw new Error("Brand extraction failed");
|
|
550
|
+
}
|
|
551
|
+
const data = await response.json();
|
|
552
|
+
return {
|
|
553
|
+
business_name: data.business_name,
|
|
554
|
+
tagline: data.tagline,
|
|
555
|
+
primary_color: data.primary_color,
|
|
556
|
+
secondary_color: data.secondary_color,
|
|
557
|
+
logo_url: data.logo_url,
|
|
558
|
+
phone_numbers: data.phone_numbers,
|
|
559
|
+
email_addresses: data.email_addresses,
|
|
560
|
+
social_profiles: data.social_profiles
|
|
561
|
+
};
|
|
562
|
+
} catch (error) {
|
|
563
|
+
console.error("Brand extraction error:", error);
|
|
564
|
+
return null;
|
|
565
|
+
} finally {
|
|
566
|
+
setIsExtracting(false);
|
|
567
|
+
}
|
|
568
|
+
}, [apiUrl, authToken]);
|
|
569
|
+
const addMessage = useCallback((message) => {
|
|
570
|
+
const newMessage = {
|
|
571
|
+
...message,
|
|
572
|
+
id: crypto.randomUUID(),
|
|
573
|
+
timestamp: /* @__PURE__ */ new Date()
|
|
574
|
+
};
|
|
575
|
+
setMessages((prev) => [...prev, newMessage]);
|
|
576
|
+
return newMessage;
|
|
577
|
+
}, []);
|
|
578
|
+
useCallback((id, update) => {
|
|
579
|
+
setMessages((prev) => prev.map(
|
|
580
|
+
(m) => m.id === id ? { ...m, ...update } : m
|
|
581
|
+
));
|
|
582
|
+
}, []);
|
|
583
|
+
const addStreamingMessage = useCallback(() => {
|
|
584
|
+
const id = crypto.randomUUID();
|
|
585
|
+
const newMessage = {
|
|
586
|
+
id,
|
|
587
|
+
role: "assistant",
|
|
588
|
+
content: "",
|
|
589
|
+
timestamp: /* @__PURE__ */ new Date(),
|
|
590
|
+
isStreaming: true
|
|
591
|
+
};
|
|
592
|
+
setMessages((prev) => [...prev, newMessage]);
|
|
593
|
+
streamingMessageRef.current = id;
|
|
594
|
+
return id;
|
|
595
|
+
}, []);
|
|
596
|
+
const appendToStreamingMessage = useCallback((token) => {
|
|
597
|
+
const id = streamingMessageRef.current;
|
|
598
|
+
if (!id) return;
|
|
599
|
+
setMessages((prev) => prev.map(
|
|
600
|
+
(m) => m.id === id ? { ...m, content: m.content + token } : m
|
|
601
|
+
));
|
|
602
|
+
}, []);
|
|
603
|
+
const finalizeStreamingMessage = useCallback((actions) => {
|
|
604
|
+
const id = streamingMessageRef.current;
|
|
605
|
+
if (!id) return;
|
|
606
|
+
setMessages((prev) => prev.map(
|
|
607
|
+
(m) => m.id === id ? { ...m, isStreaming: false, actions } : m
|
|
608
|
+
));
|
|
609
|
+
streamingMessageRef.current = null;
|
|
610
|
+
}, []);
|
|
611
|
+
const addAssistantMessage = useCallback((content, actions, component) => {
|
|
612
|
+
setIsTyping(true);
|
|
613
|
+
setTimeout(() => {
|
|
614
|
+
setIsTyping(false);
|
|
615
|
+
addMessage({ role: "assistant", content, actions, component });
|
|
616
|
+
}, 500 + Math.random() * 500);
|
|
617
|
+
}, [addMessage]);
|
|
618
|
+
const scrollToBottom = useCallback(() => {
|
|
619
|
+
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
620
|
+
}, []);
|
|
621
|
+
useEffect(() => {
|
|
622
|
+
scrollToBottom();
|
|
623
|
+
}, [messages, isTyping, scrollToBottom]);
|
|
624
|
+
useEffect(() => {
|
|
625
|
+
const welcome = welcomeMessage || `Hey! \u{1F44B} I'm Signal, your AI setup assistant.
|
|
626
|
+
|
|
627
|
+
I'll help you integrate Uptrade Site-Kit into your project. What are we working with today?`;
|
|
628
|
+
setTimeout(() => {
|
|
629
|
+
addAssistantMessage(welcome, [
|
|
630
|
+
{ id: "1", label: "\u{1F195} New Site", action: "set_flow_new", variant: "primary" },
|
|
631
|
+
{ id: "2", label: "\u{1F4C1} Existing Project", action: "set_flow_existing", variant: "secondary" },
|
|
632
|
+
{ id: "3", label: "\u{1F504} Rebuild from Live Site", action: "set_flow_rebuild", variant: "outline" }
|
|
633
|
+
]);
|
|
634
|
+
}, 500);
|
|
635
|
+
}, []);
|
|
636
|
+
const handleAction = useCallback(async (action, data) => {
|
|
637
|
+
switch (action) {
|
|
638
|
+
case "start":
|
|
639
|
+
addMessage({ role: "user", content: "Let's do it!" });
|
|
640
|
+
setState((prev) => ({ ...prev, step: "auth" }));
|
|
641
|
+
addAssistantMessage(
|
|
642
|
+
`Great! First, let's connect to your Uptrade Portal account.
|
|
643
|
+
|
|
644
|
+
You can sign in with your existing Portal credentials:`,
|
|
645
|
+
[
|
|
646
|
+
{ id: "1", label: "Sign in with Email", action: "auth_email", variant: "primary" },
|
|
647
|
+
{ id: "2", label: "Sign in with Google", action: "auth_google", variant: "secondary" },
|
|
648
|
+
{ id: "3", label: "I don't have an account", action: "auth_signup", variant: "outline" }
|
|
649
|
+
]
|
|
650
|
+
);
|
|
651
|
+
break;
|
|
652
|
+
case "explain":
|
|
653
|
+
addMessage({ role: "user", content: "Tell me more first" });
|
|
654
|
+
addAssistantMessage(
|
|
655
|
+
`Uptrade Site-Kit is a lightweight package that connects your site to the Uptrade Portal.
|
|
656
|
+
|
|
657
|
+
Here's what you can enable:
|
|
658
|
+
|
|
659
|
+
\u{1F4CA} **Analytics** - Track page views, events, and Core Web Vitals
|
|
660
|
+
\u{1F50D} **SEO** - Managed meta tags, FAQs, and schema markup
|
|
661
|
+
\u{1F4DD} **Forms** - Portal-managed forms with spam protection
|
|
662
|
+
\u{1F4AC} **Engage** - Live chat, popups, and nudges
|
|
663
|
+
\u{1F6D2} **Commerce** - Products, services, and checkout
|
|
664
|
+
\u{1F916} **Signal AI** - Autonomous optimization and A/B testing
|
|
665
|
+
|
|
666
|
+
You only pay for what you use, and everything is managed from your Portal dashboard.`,
|
|
667
|
+
[
|
|
668
|
+
{ id: "1", label: "Sounds good, let's set it up", action: "start", variant: "primary" }
|
|
669
|
+
]
|
|
670
|
+
);
|
|
671
|
+
break;
|
|
672
|
+
case "auth_email":
|
|
673
|
+
addMessage({ role: "user", content: "Sign in with Email" });
|
|
674
|
+
addAssistantMessage(
|
|
675
|
+
`What's your Portal email address?`
|
|
676
|
+
);
|
|
677
|
+
setState((prev) => ({ ...prev, step: "auth" }));
|
|
678
|
+
setTimeout(() => inputRef.current?.focus(), 600);
|
|
679
|
+
break;
|
|
680
|
+
case "auth_google":
|
|
681
|
+
addMessage({ role: "user", content: "Sign in with Google" });
|
|
682
|
+
addAssistantMessage(
|
|
683
|
+
`Opening Google sign-in... (In a real implementation, this would trigger OAuth)`
|
|
684
|
+
);
|
|
685
|
+
setTimeout(() => {
|
|
686
|
+
setState((prev) => ({
|
|
687
|
+
...prev,
|
|
688
|
+
step: "project",
|
|
689
|
+
isAuthenticated: true,
|
|
690
|
+
userEmail: "user@example.com"
|
|
691
|
+
}));
|
|
692
|
+
handleAuthSuccess("user@example.com");
|
|
693
|
+
}, 1500);
|
|
694
|
+
break;
|
|
695
|
+
case "select_project":
|
|
696
|
+
addMessage({ role: "user", content: `Selected: ${data?.name}` });
|
|
697
|
+
setState((prev) => ({
|
|
698
|
+
...prev,
|
|
699
|
+
step: "modules",
|
|
700
|
+
selectedProject: data
|
|
701
|
+
}));
|
|
702
|
+
showModuleSelection();
|
|
703
|
+
break;
|
|
704
|
+
case "confirm_modules":
|
|
705
|
+
addMessage({ role: "user", content: `Selected ${state.selectedModules.length} modules` });
|
|
706
|
+
setState((prev) => ({ ...prev, step: "config" }));
|
|
707
|
+
showConfigGeneration();
|
|
708
|
+
break;
|
|
709
|
+
case "copy_code":
|
|
710
|
+
addMessage({ role: "user", content: "Copy integration code" });
|
|
711
|
+
addAssistantMessage(
|
|
712
|
+
`\u2705 Code copied to clipboard!
|
|
713
|
+
|
|
714
|
+
Paste this in your root layout file (e.g., \`app/layout.tsx\` or \`pages/_app.tsx\`).
|
|
715
|
+
|
|
716
|
+
Want me to help you verify the integration?`,
|
|
717
|
+
[
|
|
718
|
+
{ id: "1", label: "Yes, verify my setup", action: "verify", variant: "primary" },
|
|
719
|
+
{ id: "2", label: "I'm all set, thanks!", action: "complete", variant: "outline" }
|
|
720
|
+
]
|
|
721
|
+
);
|
|
722
|
+
break;
|
|
723
|
+
case "verify":
|
|
724
|
+
addMessage({ role: "user", content: "Verify my setup" });
|
|
725
|
+
setState((prev) => ({ ...prev, step: "verify" }));
|
|
726
|
+
addAssistantMessage(
|
|
727
|
+
`To verify your setup, start your dev server and visit any page.
|
|
728
|
+
|
|
729
|
+
I'll check for:
|
|
730
|
+
\u2022 \u2713 SiteKitProvider is loading
|
|
731
|
+
\u2022 \u2713 API key is valid
|
|
732
|
+
\u2022 \u2713 Analytics events are sending
|
|
733
|
+
\u2022 \u2713 Modules are initializing
|
|
734
|
+
|
|
735
|
+
Run \`npm run dev\` and let me know when you're ready:`,
|
|
736
|
+
[
|
|
737
|
+
{ id: "1", label: "My dev server is running", action: "check_connection", variant: "primary" }
|
|
738
|
+
]
|
|
739
|
+
);
|
|
740
|
+
break;
|
|
741
|
+
case "check_connection":
|
|
742
|
+
addMessage({ role: "user", content: "My dev server is running" });
|
|
743
|
+
setIsTyping(true);
|
|
744
|
+
setTimeout(() => {
|
|
745
|
+
setIsTyping(false);
|
|
746
|
+
addAssistantMessage(
|
|
747
|
+
`\u{1F389} **Everything looks great!**
|
|
748
|
+
|
|
749
|
+
I detected your site at \`localhost:3000\` and verified:
|
|
750
|
+
|
|
751
|
+
\u2705 SiteKitProvider initialized
|
|
752
|
+
\u2705 API key authenticated
|
|
753
|
+
\u2705 Analytics tracking active
|
|
754
|
+
\u2705 SEO components ready
|
|
755
|
+
|
|
756
|
+
You're all set! Your data will start appearing in your Portal dashboard within a few minutes.`,
|
|
757
|
+
[
|
|
758
|
+
{ id: "1", label: "Open Portal Dashboard", action: "open_dashboard", variant: "primary" },
|
|
759
|
+
{ id: "2", label: "Enable Signal AI", action: "enable_signal", variant: "secondary" }
|
|
760
|
+
]
|
|
761
|
+
);
|
|
762
|
+
setState((prev) => ({ ...prev, step: "complete" }));
|
|
763
|
+
}, 2e3);
|
|
764
|
+
break;
|
|
765
|
+
case "complete":
|
|
766
|
+
addMessage({ role: "user", content: "I'm all set, thanks!" });
|
|
767
|
+
addAssistantMessage(
|
|
768
|
+
`Awesome! \u{1F680}
|
|
769
|
+
|
|
770
|
+
Your site-kit integration is ready. Here's what happens next:
|
|
771
|
+
|
|
772
|
+
\u2022 Analytics data will appear in Portal within ~5 minutes
|
|
773
|
+
\u2022 You can manage SEO, forms, and engage from the dashboard
|
|
774
|
+
\u2022 If you enabled Signal, it'll start learning from your traffic
|
|
775
|
+
|
|
776
|
+
Need help anytime? Just come back to \`/_uptrade/setup\` or ping us in Portal.
|
|
777
|
+
|
|
778
|
+
Happy building! \u{1F3A8}`
|
|
779
|
+
);
|
|
780
|
+
onComplete?.(state);
|
|
781
|
+
break;
|
|
782
|
+
case "enable_signal":
|
|
783
|
+
addMessage({ role: "user", content: "Enable Signal AI" });
|
|
784
|
+
addAssistantMessage(
|
|
785
|
+
`Great choice! \u{1F916}
|
|
786
|
+
|
|
787
|
+
Signal AI will:
|
|
788
|
+
\u2022 Monitor your site for SEO issues
|
|
789
|
+
\u2022 Run A/B tests on CTAs and content
|
|
790
|
+
\u2022 Optimize popups and engagement timing
|
|
791
|
+
\u2022 Learn from user behavior to improve conversions
|
|
792
|
+
|
|
793
|
+
To enable Signal, add \`signal={{ enabled: true }}\` to your SiteKitProvider:
|
|
794
|
+
|
|
795
|
+
\`\`\`tsx
|
|
796
|
+
<SiteKitProvider
|
|
797
|
+
apiKey={process.env.NEXT_PUBLIC_UPTRADE_API_KEY!}
|
|
798
|
+
analytics={{ enabled: true }}
|
|
799
|
+
signal={{ enabled: true }} // Add this
|
|
800
|
+
>
|
|
801
|
+
\`\`\`
|
|
802
|
+
|
|
803
|
+
Signal requires the Business plan. Want me to check your plan?`,
|
|
804
|
+
[
|
|
805
|
+
{ id: "1", label: "Check my plan", action: "check_plan", variant: "primary" },
|
|
806
|
+
{ id: "2", label: "I'll do this later", action: "complete", variant: "outline" }
|
|
807
|
+
]
|
|
808
|
+
);
|
|
809
|
+
break;
|
|
810
|
+
case "confirm_brand":
|
|
811
|
+
addMessage({ role: "user", content: "Brand info confirmed" });
|
|
812
|
+
setState((prev) => ({ ...prev, step: "modules" }));
|
|
813
|
+
showModuleSelectionWithRecommendations();
|
|
814
|
+
break;
|
|
815
|
+
case "edit_brand":
|
|
816
|
+
addMessage({ role: "user", content: "Edit brand info" });
|
|
817
|
+
addAssistantMessage(
|
|
818
|
+
`No problem! Let me know what to change:
|
|
819
|
+
|
|
820
|
+
\u2022 Business name
|
|
821
|
+
\u2022 Primary color (hex like #3b82f6)
|
|
822
|
+
\u2022 Tagline
|
|
823
|
+
|
|
824
|
+
Just type what you'd like to update.`
|
|
825
|
+
);
|
|
826
|
+
break;
|
|
827
|
+
case "manual_brand":
|
|
828
|
+
addMessage({ role: "user", content: "Enter brand manually" });
|
|
829
|
+
addAssistantMessage(
|
|
830
|
+
`Sure! What's your business name?`
|
|
831
|
+
);
|
|
832
|
+
setState((prev) => ({
|
|
833
|
+
...prev,
|
|
834
|
+
context: { ...prev.context, step: "brand_manual" }
|
|
835
|
+
}));
|
|
836
|
+
break;
|
|
837
|
+
case "skip_brand":
|
|
838
|
+
addMessage({ role: "user", content: "Skip brand for now" });
|
|
839
|
+
setState((prev) => ({ ...prev, step: "modules" }));
|
|
840
|
+
showModuleSelection();
|
|
841
|
+
break;
|
|
842
|
+
case "extract_brand":
|
|
843
|
+
addMessage({ role: "user", content: "Extract from website" });
|
|
844
|
+
addAssistantMessage(
|
|
845
|
+
`What's the website URL? I'll extract the brand colors, name, and logo.`
|
|
846
|
+
);
|
|
847
|
+
break;
|
|
848
|
+
case "set_flow_new":
|
|
849
|
+
addMessage({ role: "user", content: "New Site" });
|
|
850
|
+
setState((prev) => ({
|
|
851
|
+
...prev,
|
|
852
|
+
context: { ...prev.context, flow: "new", step: "brand" }
|
|
853
|
+
}));
|
|
854
|
+
addAssistantMessage(
|
|
855
|
+
`Great! For a new site, I'll help you:
|
|
856
|
+
|
|
857
|
+
1. Set up your brand (colors, name)
|
|
858
|
+
2. Choose which modules to enable
|
|
859
|
+
3. Generate integration code
|
|
860
|
+
|
|
861
|
+
Do you have an existing website I can extract brand info from? Or would you prefer to enter it manually?`,
|
|
862
|
+
[
|
|
863
|
+
{ id: "1", label: "Extract from website", action: "extract_brand", variant: "primary" },
|
|
864
|
+
{ id: "2", label: "Enter manually", action: "manual_brand", variant: "outline" },
|
|
865
|
+
{ id: "3", label: "Skip for now", action: "skip_brand", variant: "outline" }
|
|
866
|
+
]
|
|
867
|
+
);
|
|
868
|
+
break;
|
|
869
|
+
case "set_flow_existing":
|
|
870
|
+
addMessage({ role: "user", content: "Existing Project" });
|
|
871
|
+
setState((prev) => ({
|
|
872
|
+
...prev,
|
|
873
|
+
context: { ...prev.context, flow: "existing", step: "scan" }
|
|
874
|
+
}));
|
|
875
|
+
addAssistantMessage(
|
|
876
|
+
`For an existing project, I can scan your codebase to find:
|
|
877
|
+
|
|
878
|
+
\u2022 Forms to migrate (contact forms, newsletter signups)
|
|
879
|
+
\u2022 Chat widgets to replace (Intercom, Crisp, etc.)
|
|
880
|
+
\u2022 Metadata patterns to enhance
|
|
881
|
+
\u2022 Sitemap configuration
|
|
882
|
+
|
|
883
|
+
Run this in your project root:
|
|
884
|
+
|
|
885
|
+
\`\`\`bash
|
|
886
|
+
npx @uptrade/site-kit scan
|
|
887
|
+
\`\`\`
|
|
888
|
+
|
|
889
|
+
Then paste the output here, or tell me about your project.`,
|
|
890
|
+
[
|
|
891
|
+
{ id: "1", label: "I ran the scan", action: "show_scan_results", variant: "primary" },
|
|
892
|
+
{ id: "2", label: "Skip scan", action: "skip_scan", variant: "outline" }
|
|
893
|
+
]
|
|
894
|
+
);
|
|
895
|
+
break;
|
|
896
|
+
case "set_flow_rebuild":
|
|
897
|
+
addMessage({ role: "user", content: "Rebuild from Live Site" });
|
|
898
|
+
setState((prev) => ({
|
|
899
|
+
...prev,
|
|
900
|
+
context: { ...prev.context, flow: "rebuild", step: "scrape" }
|
|
901
|
+
}));
|
|
902
|
+
addAssistantMessage(
|
|
903
|
+
`I'll help you rebuild with site-kit. Enter the live site URL and I'll:
|
|
904
|
+
|
|
905
|
+
\u2022 Extract brand colors and business info
|
|
906
|
+
\u2022 Import FAQs with schema markup
|
|
907
|
+
\u2022 Suggest redirect mappings
|
|
908
|
+
\u2022 Generate copilot-instructions.md
|
|
909
|
+
|
|
910
|
+
What's the website URL?`
|
|
911
|
+
);
|
|
912
|
+
break;
|
|
913
|
+
case "show_scan_results":
|
|
914
|
+
addMessage({ role: "user", content: "I ran the scan" });
|
|
915
|
+
addAssistantMessage(
|
|
916
|
+
`Great! Paste the scan output here, or describe what you found.
|
|
917
|
+
|
|
918
|
+
I'll analyze the results and recommend a migration plan.`
|
|
919
|
+
);
|
|
920
|
+
break;
|
|
921
|
+
case "skip_scan":
|
|
922
|
+
addMessage({ role: "user", content: "Skip scan" });
|
|
923
|
+
setState((prev) => ({ ...prev, step: "modules" }));
|
|
924
|
+
showModuleSelection();
|
|
925
|
+
break;
|
|
926
|
+
case "generate_redirects":
|
|
927
|
+
addMessage({ role: "user", content: "Generate redirects" });
|
|
928
|
+
if (state.context.scrape_results?.routes) {
|
|
929
|
+
addStreamingMessage();
|
|
930
|
+
await sendToSignalStreaming(
|
|
931
|
+
`Generate SEO-optimized redirects for these routes: ${JSON.stringify(state.context.scrape_results.routes)}`,
|
|
932
|
+
state.context,
|
|
933
|
+
(token) => appendToStreamingMessage(token),
|
|
934
|
+
(result) => finalizeStreamingMessage(result.actions)
|
|
935
|
+
);
|
|
936
|
+
} else {
|
|
937
|
+
addAssistantMessage(
|
|
938
|
+
`I need a list of routes to generate redirects. Would you like to:
|
|
939
|
+
|
|
940
|
+
1. Scrape a website for routes
|
|
941
|
+
2. Paste a list of URLs
|
|
942
|
+
|
|
943
|
+
What's easier?`,
|
|
944
|
+
[
|
|
945
|
+
{ id: "1", label: "Scrape website", action: "set_flow_rebuild", variant: "primary" },
|
|
946
|
+
{ id: "2", label: "Paste URLs", action: "paste_urls", variant: "outline" }
|
|
947
|
+
]
|
|
948
|
+
);
|
|
949
|
+
}
|
|
950
|
+
break;
|
|
951
|
+
case "generate_copilot_instructions":
|
|
952
|
+
addMessage({ role: "user", content: "Generate Copilot instructions" });
|
|
953
|
+
addStreamingMessage();
|
|
954
|
+
await sendToSignalStreaming(
|
|
955
|
+
`Generate copilot-instructions.md for project with modules: ${state.selectedModules.join(", ")} and brand: ${state.context.brand?.business_name || "Unknown"}`,
|
|
956
|
+
state.context,
|
|
957
|
+
(token) => appendToStreamingMessage(token),
|
|
958
|
+
(result) => {
|
|
959
|
+
finalizeStreamingMessage([
|
|
960
|
+
{ id: "1", label: "\u{1F4CB} Copy to clipboard", action: "copy_copilot_instructions", variant: "primary" },
|
|
961
|
+
{ id: "2", label: "Continue", action: "complete", variant: "outline" }
|
|
962
|
+
]);
|
|
963
|
+
}
|
|
964
|
+
);
|
|
965
|
+
break;
|
|
966
|
+
case "verify_now":
|
|
967
|
+
addMessage({ role: "user", content: "Verify integration" });
|
|
968
|
+
verifyIntegration();
|
|
969
|
+
break;
|
|
970
|
+
}
|
|
971
|
+
}, [addMessage, addAssistantMessage, addStreamingMessage, appendToStreamingMessage, finalizeStreamingMessage, sendToSignalStreaming, state, onComplete]);
|
|
972
|
+
const handleAuthSuccess = useCallback((email) => {
|
|
973
|
+
addAssistantMessage(
|
|
974
|
+
`Welcome back, ${email.split("@")[0]}! \u{1F44B}
|
|
975
|
+
|
|
976
|
+
I found these projects in your account. Which one are we setting up?`,
|
|
977
|
+
[
|
|
978
|
+
{ id: "1", label: "MyCompany.com", action: "select_project", variant: "secondary", data: { id: "1", name: "MyCompany.com", domain: "mycompany.com" } },
|
|
979
|
+
{ id: "2", label: "Blog Project", action: "select_project", variant: "secondary", data: { id: "2", name: "Blog Project", domain: "blog.mycompany.com" } },
|
|
980
|
+
{ id: "3", label: "+ Create new project", action: "create_project", variant: "outline" }
|
|
981
|
+
]
|
|
982
|
+
);
|
|
983
|
+
}, [addAssistantMessage]);
|
|
984
|
+
const verifyIntegration = useCallback(async () => {
|
|
985
|
+
setState((prev) => ({ ...prev, step: "verify" }));
|
|
986
|
+
setIsTyping(true);
|
|
987
|
+
try {
|
|
988
|
+
const response = await fetch(`${signalUrl}/api/skills/setup/verify`, {
|
|
989
|
+
method: "POST",
|
|
990
|
+
headers: {
|
|
991
|
+
"Content-Type": "application/json",
|
|
992
|
+
...authToken ? { Authorization: `Bearer ${authToken}` } : {}
|
|
993
|
+
},
|
|
994
|
+
body: JSON.stringify({
|
|
995
|
+
project_id: projectId || state.context.project_id,
|
|
996
|
+
dev_url: "http://localhost:3000"
|
|
997
|
+
})
|
|
998
|
+
});
|
|
999
|
+
setIsTyping(false);
|
|
1000
|
+
if (!response.ok) {
|
|
1001
|
+
throw new Error("Verification failed");
|
|
1002
|
+
}
|
|
1003
|
+
const result = await response.json();
|
|
1004
|
+
if (result.overall_status === "success") {
|
|
1005
|
+
const checkList = result.checks.map(
|
|
1006
|
+
(c) => `${c.passed ? "\u2705" : "\u274C"} ${c.check.replace(/_/g, " ")}`
|
|
1007
|
+
).join("\n");
|
|
1008
|
+
addAssistantMessage(
|
|
1009
|
+
`\u{1F389} **Integration Verified!**
|
|
1010
|
+
|
|
1011
|
+
${checkList}
|
|
1012
|
+
|
|
1013
|
+
Your site-kit integration is working perfectly. Data will start appearing in Portal shortly.`,
|
|
1014
|
+
[
|
|
1015
|
+
{ id: "1", label: "Open Portal Dashboard", action: "open_dashboard", variant: "primary" },
|
|
1016
|
+
{ id: "2", label: "Generate Copilot Instructions", action: "generate_copilot_instructions", variant: "secondary" }
|
|
1017
|
+
]
|
|
1018
|
+
);
|
|
1019
|
+
setState((prev) => ({ ...prev, step: "complete" }));
|
|
1020
|
+
} else {
|
|
1021
|
+
const issues = result.issues?.join("\n\u2022 ") || "Unknown issue";
|
|
1022
|
+
addAssistantMessage(
|
|
1023
|
+
`\u26A0\uFE0F **Verification Found Issues**
|
|
1024
|
+
|
|
1025
|
+
\u2022 ${issues}
|
|
1026
|
+
|
|
1027
|
+
Would you like help troubleshooting?`,
|
|
1028
|
+
[
|
|
1029
|
+
{ id: "1", label: "Help me fix this", action: "troubleshoot", variant: "primary" },
|
|
1030
|
+
{ id: "2", label: "Skip for now", action: "complete", variant: "outline" }
|
|
1031
|
+
]
|
|
1032
|
+
);
|
|
1033
|
+
}
|
|
1034
|
+
} catch (error) {
|
|
1035
|
+
setIsTyping(false);
|
|
1036
|
+
addAssistantMessage(
|
|
1037
|
+
`I couldn't verify the integration automatically. Make sure your dev server is running.
|
|
1038
|
+
|
|
1039
|
+
You can manually verify by:
|
|
1040
|
+
1. Opening your site in the browser
|
|
1041
|
+
2. Checking the Network tab for requests to api.uptrademedia.com
|
|
1042
|
+
3. Looking for analytics events in your Portal dashboard`,
|
|
1043
|
+
[
|
|
1044
|
+
{ id: "1", label: "Try again", action: "verify_now", variant: "primary" },
|
|
1045
|
+
{ id: "2", label: "Continue anyway", action: "complete", variant: "outline" }
|
|
1046
|
+
]
|
|
1047
|
+
);
|
|
1048
|
+
}
|
|
1049
|
+
}, [signalUrl, authToken, projectId, state.context.project_id, addAssistantMessage]);
|
|
1050
|
+
const showModuleSelectionWithRecommendations = useCallback(async () => {
|
|
1051
|
+
const { brand, business_type, scan_results } = state.context;
|
|
1052
|
+
if (brand || business_type) {
|
|
1053
|
+
try {
|
|
1054
|
+
const result = await sendToSignal(
|
|
1055
|
+
`Recommend modules for: ${brand?.business_name || "Unknown"}, type: ${business_type || "general"}`,
|
|
1056
|
+
{ ...state.context, step: "recommend_modules" }
|
|
1057
|
+
);
|
|
1058
|
+
addAssistantMessage(
|
|
1059
|
+
result.response,
|
|
1060
|
+
void 0,
|
|
1061
|
+
/* @__PURE__ */ jsx(
|
|
1062
|
+
ModuleSelector,
|
|
1063
|
+
{
|
|
1064
|
+
modules: MODULES,
|
|
1065
|
+
selected: state.selectedModules,
|
|
1066
|
+
onChange: (modules) => setState((prev) => ({ ...prev, selectedModules: modules })),
|
|
1067
|
+
onConfirm: () => handleAction("confirm_modules")
|
|
1068
|
+
}
|
|
1069
|
+
)
|
|
1070
|
+
);
|
|
1071
|
+
return;
|
|
1072
|
+
} catch (error) {
|
|
1073
|
+
}
|
|
1074
|
+
}
|
|
1075
|
+
showModuleSelection();
|
|
1076
|
+
}, [state.context, state.selectedModules, sendToSignal, handleAction]);
|
|
1077
|
+
const showModuleSelection = useCallback(() => {
|
|
1078
|
+
addAssistantMessage(
|
|
1079
|
+
`Perfect! Now let's choose which features to enable.
|
|
1080
|
+
|
|
1081
|
+
I've pre-selected the essentials, but you can customize:`,
|
|
1082
|
+
void 0,
|
|
1083
|
+
/* @__PURE__ */ jsx(
|
|
1084
|
+
ModuleSelector,
|
|
1085
|
+
{
|
|
1086
|
+
modules: MODULES,
|
|
1087
|
+
selected: state.selectedModules,
|
|
1088
|
+
onChange: (modules) => setState((prev) => ({ ...prev, selectedModules: modules })),
|
|
1089
|
+
onConfirm: () => handleAction("confirm_modules")
|
|
1090
|
+
}
|
|
1091
|
+
)
|
|
1092
|
+
);
|
|
1093
|
+
}, [addAssistantMessage, state.selectedModules, handleAction]);
|
|
1094
|
+
const showConfigGeneration = useCallback(() => {
|
|
1095
|
+
const code = generateIntegrationCode(state);
|
|
1096
|
+
addAssistantMessage(
|
|
1097
|
+
`Here's your integration code! \u{1F389}
|
|
1098
|
+
|
|
1099
|
+
Add this to your root layout:`,
|
|
1100
|
+
[
|
|
1101
|
+
{ id: "1", label: "\u{1F4CB} Copy Code", action: "copy_code", variant: "primary" }
|
|
1102
|
+
],
|
|
1103
|
+
/* @__PURE__ */ jsx(CodeBlock, { code })
|
|
1104
|
+
);
|
|
1105
|
+
}, [addAssistantMessage, state]);
|
|
1106
|
+
const handleSubmit = useCallback(async (e) => {
|
|
1107
|
+
e.preventDefault();
|
|
1108
|
+
if (!input.trim()) return;
|
|
1109
|
+
const userInput = input.trim();
|
|
1110
|
+
setInput("");
|
|
1111
|
+
addMessage({ role: "user", content: userInput });
|
|
1112
|
+
if (state.step === "auth" && userInput.includes("@")) {
|
|
1113
|
+
setState((prev) => ({
|
|
1114
|
+
...prev,
|
|
1115
|
+
isAuthenticated: true,
|
|
1116
|
+
userEmail: userInput,
|
|
1117
|
+
step: "project"
|
|
1118
|
+
}));
|
|
1119
|
+
addAssistantMessage(
|
|
1120
|
+
`Sending magic link to ${userInput}...
|
|
1121
|
+
|
|
1122
|
+
(In production, you'd receive an email. For now, I'll simulate a successful login.)`
|
|
1123
|
+
);
|
|
1124
|
+
setTimeout(() => handleAuthSuccess(userInput), 1500);
|
|
1125
|
+
} else if (userInput.toLowerCase().includes("http") || userInput.match(/^[\w.-]+\.[a-z]{2,}$/i)) {
|
|
1126
|
+
const domain = userInput.replace(/^https?:\/\//, "").split("/")[0];
|
|
1127
|
+
setIsTyping(true);
|
|
1128
|
+
addAssistantMessage(`Analyzing ${domain} to extract brand information...`);
|
|
1129
|
+
const brand = await extractBrandFromDomain(domain);
|
|
1130
|
+
setIsTyping(false);
|
|
1131
|
+
if (brand) {
|
|
1132
|
+
setState((prev) => ({
|
|
1133
|
+
...prev,
|
|
1134
|
+
context: { ...prev.context, brand, domain }
|
|
1135
|
+
}));
|
|
1136
|
+
const brandSummary = [
|
|
1137
|
+
brand.business_name && `**Business:** ${brand.business_name}`,
|
|
1138
|
+
brand.tagline && `**Tagline:** ${brand.tagline}`,
|
|
1139
|
+
brand.primary_color && `**Primary Color:** ${brand.primary_color}`,
|
|
1140
|
+
brand.phone_numbers?.length && `**Phone:** ${brand.phone_numbers[0]}`
|
|
1141
|
+
].filter(Boolean).join("\n");
|
|
1142
|
+
addAssistantMessage(
|
|
1143
|
+
`Found brand information:
|
|
1144
|
+
|
|
1145
|
+
${brandSummary}
|
|
1146
|
+
|
|
1147
|
+
Does this look right?`,
|
|
1148
|
+
[
|
|
1149
|
+
{ id: "1", label: "Yes, looks good!", action: "confirm_brand", variant: "primary" },
|
|
1150
|
+
{ id: "2", label: "Edit brand info", action: "edit_brand", variant: "outline" }
|
|
1151
|
+
]
|
|
1152
|
+
);
|
|
1153
|
+
} else {
|
|
1154
|
+
addAssistantMessage(
|
|
1155
|
+
`I couldn't extract brand info from ${domain}. You can enter it manually, or we can continue without it.`,
|
|
1156
|
+
[
|
|
1157
|
+
{ id: "1", label: "Enter manually", action: "manual_brand", variant: "primary" },
|
|
1158
|
+
{ id: "2", label: "Skip for now", action: "skip_brand", variant: "outline" }
|
|
1159
|
+
]
|
|
1160
|
+
);
|
|
1161
|
+
}
|
|
1162
|
+
} else {
|
|
1163
|
+
addStreamingMessage();
|
|
1164
|
+
try {
|
|
1165
|
+
await sendToSignalStreaming(
|
|
1166
|
+
userInput,
|
|
1167
|
+
state.context,
|
|
1168
|
+
(token) => appendToStreamingMessage(token),
|
|
1169
|
+
(result) => {
|
|
1170
|
+
if (result.updated_context) {
|
|
1171
|
+
setState((prev) => ({
|
|
1172
|
+
...prev,
|
|
1173
|
+
context: { ...prev.context, ...result.updated_context }
|
|
1174
|
+
}));
|
|
1175
|
+
}
|
|
1176
|
+
finalizeStreamingMessage(result.actions);
|
|
1177
|
+
}
|
|
1178
|
+
);
|
|
1179
|
+
} catch (error) {
|
|
1180
|
+
finalizeStreamingMessage();
|
|
1181
|
+
addAssistantMessage(
|
|
1182
|
+
`I understand you said: "${userInput}"
|
|
1183
|
+
|
|
1184
|
+
Let me help you with that. What would you like to do?`,
|
|
1185
|
+
[
|
|
1186
|
+
{ id: "1", label: "Continue setup", action: "start", variant: "primary" },
|
|
1187
|
+
{ id: "2", label: "Ask a question", action: "help", variant: "outline" }
|
|
1188
|
+
]
|
|
1189
|
+
);
|
|
1190
|
+
}
|
|
1191
|
+
}
|
|
1192
|
+
}, [input, state.step, state.context, addMessage, addAssistantMessage, handleAuthSuccess, sendToSignalStreaming, appendToStreamingMessage, finalizeStreamingMessage, addStreamingMessage, extractBrandFromDomain]);
|
|
1193
|
+
return /* @__PURE__ */ jsxs("div", { style: styles.container, children: [
|
|
1194
|
+
/* @__PURE__ */ jsxs("div", { style: styles.header, children: [
|
|
1195
|
+
/* @__PURE__ */ jsx("div", { style: styles.logo, children: "U" }),
|
|
1196
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
1197
|
+
/* @__PURE__ */ jsx("div", { style: styles.title, children: "Uptrade Setup" }),
|
|
1198
|
+
/* @__PURE__ */ jsx("div", { style: styles.subtitle, children: "Site-Kit Integration Wizard" })
|
|
1199
|
+
] })
|
|
1200
|
+
] }),
|
|
1201
|
+
/* @__PURE__ */ jsxs("div", { style: styles.messages, children: [
|
|
1202
|
+
messages.map((message) => /* @__PURE__ */ jsxs(
|
|
1203
|
+
"div",
|
|
1204
|
+
{
|
|
1205
|
+
style: {
|
|
1206
|
+
...styles.message,
|
|
1207
|
+
...message.role === "assistant" ? styles.messageAssistant : styles.messageUser
|
|
1208
|
+
},
|
|
1209
|
+
children: [
|
|
1210
|
+
/* @__PURE__ */ jsx(
|
|
1211
|
+
"div",
|
|
1212
|
+
{
|
|
1213
|
+
style: {
|
|
1214
|
+
...styles.avatar,
|
|
1215
|
+
...message.role === "assistant" ? styles.avatarAssistant : styles.avatarUser
|
|
1216
|
+
},
|
|
1217
|
+
children: message.role === "assistant" ? "\u2728" : "\u{1F464}"
|
|
1218
|
+
}
|
|
1219
|
+
),
|
|
1220
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
1221
|
+
/* @__PURE__ */ jsx(
|
|
1222
|
+
"div",
|
|
1223
|
+
{
|
|
1224
|
+
style: {
|
|
1225
|
+
...styles.bubble,
|
|
1226
|
+
...message.role === "assistant" ? styles.bubbleAssistant : styles.bubbleUser
|
|
1227
|
+
},
|
|
1228
|
+
children: message.content.split("\n").map((line, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
|
|
1229
|
+
line,
|
|
1230
|
+
i < message.content.split("\n").length - 1 && /* @__PURE__ */ jsx("br", {})
|
|
1231
|
+
] }, i))
|
|
1232
|
+
}
|
|
1233
|
+
),
|
|
1234
|
+
message.component,
|
|
1235
|
+
message.actions && /* @__PURE__ */ jsx("div", { style: styles.actions, children: message.actions.map((action) => /* @__PURE__ */ jsx(
|
|
1236
|
+
"button",
|
|
1237
|
+
{
|
|
1238
|
+
onClick: () => handleAction(action.action, action.data),
|
|
1239
|
+
style: {
|
|
1240
|
+
...styles.actionButton,
|
|
1241
|
+
...action.variant === "primary" ? styles.actionPrimary : action.variant === "outline" ? styles.actionOutline : styles.actionSecondary
|
|
1242
|
+
},
|
|
1243
|
+
children: action.label
|
|
1244
|
+
},
|
|
1245
|
+
action.id
|
|
1246
|
+
)) })
|
|
1247
|
+
] })
|
|
1248
|
+
]
|
|
1249
|
+
},
|
|
1250
|
+
message.id
|
|
1251
|
+
)),
|
|
1252
|
+
isTyping && /* @__PURE__ */ jsxs("div", { style: { ...styles.message, ...styles.messageAssistant }, children: [
|
|
1253
|
+
/* @__PURE__ */ jsx("div", { style: { ...styles.avatar, ...styles.avatarAssistant }, children: "\u2728" }),
|
|
1254
|
+
/* @__PURE__ */ jsxs("div", { style: styles.typing, children: [
|
|
1255
|
+
/* @__PURE__ */ jsx("div", { style: { ...styles.typingDot, animationDelay: "0s" } }),
|
|
1256
|
+
/* @__PURE__ */ jsx("div", { style: { ...styles.typingDot, animationDelay: "0.2s" } }),
|
|
1257
|
+
/* @__PURE__ */ jsx("div", { style: { ...styles.typingDot, animationDelay: "0.4s" } })
|
|
1258
|
+
] })
|
|
1259
|
+
] }),
|
|
1260
|
+
/* @__PURE__ */ jsx("div", { ref: messagesEndRef })
|
|
1261
|
+
] }),
|
|
1262
|
+
/* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: styles.inputContainer, children: [
|
|
1263
|
+
/* @__PURE__ */ jsx(
|
|
1264
|
+
"input",
|
|
1265
|
+
{
|
|
1266
|
+
ref: inputRef,
|
|
1267
|
+
type: "text",
|
|
1268
|
+
value: input,
|
|
1269
|
+
onChange: (e) => setInput(e.target.value),
|
|
1270
|
+
placeholder: "Type a message...",
|
|
1271
|
+
style: styles.input
|
|
1272
|
+
}
|
|
1273
|
+
),
|
|
1274
|
+
/* @__PURE__ */ jsx("button", { type: "submit", style: styles.sendButton, children: "Send" })
|
|
1275
|
+
] }),
|
|
1276
|
+
/* @__PURE__ */ jsx("style", { children: `
|
|
1277
|
+
@keyframes typing {
|
|
1278
|
+
0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
|
|
1279
|
+
30% { transform: translateY(-4px); opacity: 1; }
|
|
1280
|
+
}
|
|
1281
|
+
` })
|
|
1282
|
+
] });
|
|
1283
|
+
}
|
|
1284
|
+
function ModuleSelector({
|
|
1285
|
+
modules,
|
|
1286
|
+
selected,
|
|
1287
|
+
onChange,
|
|
1288
|
+
onConfirm
|
|
1289
|
+
}) {
|
|
1290
|
+
const toggle = (id) => {
|
|
1291
|
+
onChange(
|
|
1292
|
+
selected.includes(id) ? selected.filter((m) => m !== id) : [...selected, id]
|
|
1293
|
+
);
|
|
1294
|
+
};
|
|
1295
|
+
return /* @__PURE__ */ jsxs("div", { style: { marginTop: "0.75rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
1296
|
+
modules.map((module) => /* @__PURE__ */ jsxs(
|
|
1297
|
+
"div",
|
|
1298
|
+
{
|
|
1299
|
+
onClick: () => toggle(module.id),
|
|
1300
|
+
style: {
|
|
1301
|
+
...styles.moduleCard,
|
|
1302
|
+
...selected.includes(module.id) ? styles.moduleCardSelected : {}
|
|
1303
|
+
},
|
|
1304
|
+
children: [
|
|
1305
|
+
/* @__PURE__ */ jsx("span", { style: styles.moduleIcon, children: module.icon }),
|
|
1306
|
+
/* @__PURE__ */ jsxs("div", { style: styles.moduleInfo, children: [
|
|
1307
|
+
/* @__PURE__ */ jsxs("div", { style: styles.moduleName, children: [
|
|
1308
|
+
module.name,
|
|
1309
|
+
module.recommended && /* @__PURE__ */ jsx("span", { style: { marginLeft: "0.5rem", fontSize: "0.625rem", background: "#dbeafe", color: "#1d4ed8", padding: "2px 6px", borderRadius: "4px" }, children: "Recommended" })
|
|
1310
|
+
] }),
|
|
1311
|
+
/* @__PURE__ */ jsx("div", { style: styles.moduleDesc, children: module.description })
|
|
1312
|
+
] }),
|
|
1313
|
+
/* @__PURE__ */ jsx(
|
|
1314
|
+
"input",
|
|
1315
|
+
{
|
|
1316
|
+
type: "checkbox",
|
|
1317
|
+
checked: selected.includes(module.id),
|
|
1318
|
+
onChange: () => toggle(module.id),
|
|
1319
|
+
style: styles.checkbox
|
|
1320
|
+
}
|
|
1321
|
+
)
|
|
1322
|
+
]
|
|
1323
|
+
},
|
|
1324
|
+
module.id
|
|
1325
|
+
)),
|
|
1326
|
+
/* @__PURE__ */ jsxs(
|
|
1327
|
+
"button",
|
|
1328
|
+
{
|
|
1329
|
+
onClick: onConfirm,
|
|
1330
|
+
style: { ...styles.actionButton, ...styles.actionPrimary, marginTop: "0.5rem" },
|
|
1331
|
+
children: [
|
|
1332
|
+
"Continue with ",
|
|
1333
|
+
selected.length,
|
|
1334
|
+
" modules"
|
|
1335
|
+
]
|
|
1336
|
+
}
|
|
1337
|
+
)
|
|
1338
|
+
] });
|
|
1339
|
+
}
|
|
1340
|
+
function CodeBlock({ code }) {
|
|
1341
|
+
return /* @__PURE__ */ jsx("pre", { style: {
|
|
1342
|
+
marginTop: "0.75rem",
|
|
1343
|
+
padding: "1rem",
|
|
1344
|
+
background: "#1f2937",
|
|
1345
|
+
color: "#e5e7eb",
|
|
1346
|
+
borderRadius: "0.5rem",
|
|
1347
|
+
fontSize: "0.8125rem",
|
|
1348
|
+
overflowX: "auto",
|
|
1349
|
+
fontFamily: "monospace"
|
|
1350
|
+
}, children: code });
|
|
1351
|
+
}
|
|
1352
|
+
function generateIntegrationCode(state) {
|
|
1353
|
+
const { selectedModules } = state;
|
|
1354
|
+
const moduleConfigs = [];
|
|
1355
|
+
if (selectedModules.includes("analytics")) {
|
|
1356
|
+
moduleConfigs.push(` analytics={{ enabled: true }}`);
|
|
1357
|
+
}
|
|
1358
|
+
if (selectedModules.includes("engage")) {
|
|
1359
|
+
moduleConfigs.push(` engage={{ enabled: true }}`);
|
|
1360
|
+
}
|
|
1361
|
+
if (selectedModules.includes("forms")) {
|
|
1362
|
+
moduleConfigs.push(` forms={{ enabled: true }}`);
|
|
1363
|
+
}
|
|
1364
|
+
if (selectedModules.includes("signal")) {
|
|
1365
|
+
moduleConfigs.push(` signal={{ enabled: true, realtime: true }}`);
|
|
1366
|
+
}
|
|
1367
|
+
return `// app/layout.tsx (or pages/_app.tsx)
|
|
1368
|
+
import { SiteKitProvider } from '@uptrade/site-kit'
|
|
1369
|
+
|
|
1370
|
+
export default function RootLayout({ children }) {
|
|
1371
|
+
return (
|
|
1372
|
+
<html>
|
|
1373
|
+
<body>
|
|
1374
|
+
<SiteKitProvider
|
|
1375
|
+
apiKey={process.env.NEXT_PUBLIC_UPTRADE_API_KEY!}
|
|
1376
|
+
${moduleConfigs.join("\n")}
|
|
1377
|
+
>
|
|
1378
|
+
{children}
|
|
1379
|
+
</SiteKitProvider>
|
|
1380
|
+
</body>
|
|
1381
|
+
</html>
|
|
1382
|
+
)
|
|
1383
|
+
}`;
|
|
1384
|
+
}
|
|
219
1385
|
|
|
220
|
-
export { AffiliateCard, AffiliatesWidget,
|
|
1386
|
+
export { AffiliateCard, AffiliatesWidget, ExperimentConversion, SetupAssistant, SignalExperiment, fetchAffiliates, getTrackingUrl, useAffiliates, useExperimentVariant };
|
|
221
1387
|
//# sourceMappingURL=index.mjs.map
|
|
222
1388
|
//# sourceMappingURL=index.mjs.map
|