@skippr/live-agent-sdk 0.44.0 → 0.45.0
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/esm/lib-exports.js +633 -438
- package/dist/skippr-sdk.css +1 -1
- package/dist/skippr-sdk.js +140 -140
- package/dist/types/components/AdoptionBubble.d.ts +8 -0
- package/dist/types/context/LiveAgentContext.d.ts +13 -0
- package/dist/types/hooks/useAdoptionGoals.d.ts +14 -0
- package/dist/types/hooks/useSession.d.ts +2 -1
- package/dist/types/lib/navigation.d.ts +3 -0
- package/package.json +1 -1
package/dist/esm/lib-exports.js
CHANGED
|
@@ -8,15 +8,123 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
|
|
|
8
8
|
|
|
9
9
|
// src/components/LiveAgent.tsx
|
|
10
10
|
import { LiveKitRoom, RoomAudioRenderer } from "@livekit/components-react";
|
|
11
|
-
import { useCallback as
|
|
11
|
+
import { useCallback as useCallback10, useMemo as useMemo5, useRef as useRef13, useState as useState15 } from "react";
|
|
12
12
|
|
|
13
13
|
// src/context/LiveAgentContext.tsx
|
|
14
14
|
import { createContext } from "react";
|
|
15
15
|
var LiveAgentContext = createContext(null);
|
|
16
16
|
|
|
17
|
-
// src/hooks/
|
|
17
|
+
// src/hooks/useAdoptionGoals.ts
|
|
18
18
|
import { useCallback, useEffect, useState } from "react";
|
|
19
|
+
|
|
20
|
+
// src/lib/navigation.ts
|
|
21
|
+
var listeners = new Set;
|
|
22
|
+
var patched = false;
|
|
23
|
+
var lastHref = "";
|
|
24
|
+
function emit() {
|
|
25
|
+
if (window.location.href === lastHref)
|
|
26
|
+
return;
|
|
27
|
+
lastHref = window.location.href;
|
|
28
|
+
for (const listener of listeners)
|
|
29
|
+
listener();
|
|
30
|
+
}
|
|
31
|
+
function ensurePatched() {
|
|
32
|
+
if (patched)
|
|
33
|
+
return;
|
|
34
|
+
patched = true;
|
|
35
|
+
lastHref = window.location.href;
|
|
36
|
+
const originalPushState = history.pushState.bind(history);
|
|
37
|
+
const originalReplaceState = history.replaceState.bind(history);
|
|
38
|
+
history.pushState = (...args) => {
|
|
39
|
+
originalPushState(...args);
|
|
40
|
+
emit();
|
|
41
|
+
};
|
|
42
|
+
history.replaceState = (...args) => {
|
|
43
|
+
originalReplaceState(...args);
|
|
44
|
+
emit();
|
|
45
|
+
};
|
|
46
|
+
window.addEventListener("popstate", emit);
|
|
47
|
+
window.addEventListener("hashchange", emit);
|
|
48
|
+
}
|
|
49
|
+
function subscribeToLocationChange(listener) {
|
|
50
|
+
ensurePatched();
|
|
51
|
+
listeners.add(listener);
|
|
52
|
+
return () => {
|
|
53
|
+
listeners.delete(listener);
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// src/hooks/useAdoptionGoals.ts
|
|
19
58
|
var API_URL = "https://specialist.skippr.ai/api";
|
|
59
|
+
var MATCH_DEBOUNCE_MS = 400;
|
|
60
|
+
function useAdoptionGoals({
|
|
61
|
+
enabled,
|
|
62
|
+
bearerToken,
|
|
63
|
+
authedFetch
|
|
64
|
+
}) {
|
|
65
|
+
const [goals, setGoals] = useState([]);
|
|
66
|
+
const match = useCallback(async () => {
|
|
67
|
+
try {
|
|
68
|
+
const resp = await authedFetch(`${API_URL}/v1/adoption/goals/match`, {
|
|
69
|
+
method: "POST",
|
|
70
|
+
headers: { "Content-Type": "application/json" },
|
|
71
|
+
body: JSON.stringify({ url: window.location.origin + window.location.pathname })
|
|
72
|
+
});
|
|
73
|
+
if (!resp.ok) {
|
|
74
|
+
setGoals([]);
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
const data = await resp.json();
|
|
78
|
+
setGoals(Array.isArray(data?.goals) ? data.goals : []);
|
|
79
|
+
} catch (e) {
|
|
80
|
+
console.warn("[Skippr] adoption match failed", e);
|
|
81
|
+
setGoals([]);
|
|
82
|
+
}
|
|
83
|
+
}, [authedFetch]);
|
|
84
|
+
useEffect(() => {
|
|
85
|
+
if (!enabled || !bearerToken) {
|
|
86
|
+
setGoals([]);
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
match();
|
|
90
|
+
let lastPath = window.location.pathname;
|
|
91
|
+
let timer;
|
|
92
|
+
const unsubscribe = subscribeToLocationChange(() => {
|
|
93
|
+
if (window.location.pathname === lastPath)
|
|
94
|
+
return;
|
|
95
|
+
lastPath = window.location.pathname;
|
|
96
|
+
if (timer)
|
|
97
|
+
clearTimeout(timer);
|
|
98
|
+
timer = setTimeout(() => {
|
|
99
|
+
match();
|
|
100
|
+
}, MATCH_DEBOUNCE_MS);
|
|
101
|
+
});
|
|
102
|
+
return () => {
|
|
103
|
+
if (timer)
|
|
104
|
+
clearTimeout(timer);
|
|
105
|
+
unsubscribe();
|
|
106
|
+
};
|
|
107
|
+
}, [enabled, bearerToken, match]);
|
|
108
|
+
const postStatus = useCallback((goalId, status) => {
|
|
109
|
+
authedFetch(`${API_URL}/v1/adoption/goals/${goalId}/status`, {
|
|
110
|
+
method: "POST",
|
|
111
|
+
headers: { "Content-Type": "application/json" },
|
|
112
|
+
body: JSON.stringify({ status })
|
|
113
|
+
}).catch((e) => console.warn("[Skippr] adoption status update failed", e));
|
|
114
|
+
}, [authedFetch]);
|
|
115
|
+
const dismissGoal = useCallback((goalId) => {
|
|
116
|
+
setGoals((prev) => prev.filter((goal) => goal.goalId !== goalId));
|
|
117
|
+
postStatus(goalId, "dismissed" /* Dismissed */);
|
|
118
|
+
}, [postStatus]);
|
|
119
|
+
const attendGoal = useCallback((goalId) => {
|
|
120
|
+
postStatus(goalId, "attended" /* Attended */);
|
|
121
|
+
}, [postStatus]);
|
|
122
|
+
return { goals, dismissGoal, attendGoal };
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// src/hooks/useAuth.ts
|
|
126
|
+
import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
|
|
127
|
+
var API_URL2 = "https://specialist.skippr.ai/api";
|
|
20
128
|
function storageKey(appKey) {
|
|
21
129
|
return `skippr_auth_${appKey}`;
|
|
22
130
|
}
|
|
@@ -42,12 +150,12 @@ function clearStoredToken(appKey) {
|
|
|
42
150
|
}
|
|
43
151
|
}
|
|
44
152
|
function useAuth({ appKey }) {
|
|
45
|
-
const [authToken, setAuthToken] =
|
|
46
|
-
const [isValidating, setIsValidating] =
|
|
47
|
-
const [isSubmitting, setIsSubmitting] =
|
|
48
|
-
const [error, setError] =
|
|
153
|
+
const [authToken, setAuthToken] = useState2(null);
|
|
154
|
+
const [isValidating, setIsValidating] = useState2(false);
|
|
155
|
+
const [isSubmitting, setIsSubmitting] = useState2(false);
|
|
156
|
+
const [error, setError] = useState2("");
|
|
49
157
|
const isAuthenticated = authToken !== null;
|
|
50
|
-
|
|
158
|
+
useEffect2(() => {
|
|
51
159
|
if (!appKey)
|
|
52
160
|
return;
|
|
53
161
|
const stored = getStoredToken(appKey);
|
|
@@ -56,7 +164,7 @@ function useAuth({ appKey }) {
|
|
|
56
164
|
async function validateStoredToken() {
|
|
57
165
|
setIsValidating(true);
|
|
58
166
|
try {
|
|
59
|
-
const res = await fetch(`${
|
|
167
|
+
const res = await fetch(`${API_URL2}/v1/auth/validate-token`, {
|
|
60
168
|
credentials: "omit",
|
|
61
169
|
headers: { Authorization: `Bearer ${stored}` }
|
|
62
170
|
});
|
|
@@ -73,7 +181,7 @@ function useAuth({ appKey }) {
|
|
|
73
181
|
}
|
|
74
182
|
validateStoredToken();
|
|
75
183
|
}, [appKey]);
|
|
76
|
-
|
|
184
|
+
useEffect2(() => {
|
|
77
185
|
function handleLogout() {
|
|
78
186
|
setAuthToken(null);
|
|
79
187
|
setError("");
|
|
@@ -81,13 +189,13 @@ function useAuth({ appKey }) {
|
|
|
81
189
|
window.addEventListener("skippr:logout", handleLogout);
|
|
82
190
|
return () => window.removeEventListener("skippr:logout", handleLogout);
|
|
83
191
|
}, []);
|
|
84
|
-
const requestOtp =
|
|
192
|
+
const requestOtp = useCallback2(async (email) => {
|
|
85
193
|
if (!appKey)
|
|
86
194
|
return false;
|
|
87
195
|
setIsSubmitting(true);
|
|
88
196
|
setError("");
|
|
89
197
|
try {
|
|
90
|
-
const resp = await fetch(`${
|
|
198
|
+
const resp = await fetch(`${API_URL2}/v1/auth/request-otp`, {
|
|
91
199
|
method: "POST",
|
|
92
200
|
credentials: "omit",
|
|
93
201
|
headers: {
|
|
@@ -108,13 +216,13 @@ function useAuth({ appKey }) {
|
|
|
108
216
|
setIsSubmitting(false);
|
|
109
217
|
}
|
|
110
218
|
}, [appKey]);
|
|
111
|
-
const verifyOtp =
|
|
219
|
+
const verifyOtp = useCallback2(async (email, code) => {
|
|
112
220
|
if (!appKey)
|
|
113
221
|
return;
|
|
114
222
|
setIsSubmitting(true);
|
|
115
223
|
setError("");
|
|
116
224
|
try {
|
|
117
|
-
const resp = await fetch(`${
|
|
225
|
+
const resp = await fetch(`${API_URL2}/v1/auth/verify-otp`, {
|
|
118
226
|
method: "POST",
|
|
119
227
|
credentials: "omit",
|
|
120
228
|
headers: {
|
|
@@ -137,7 +245,7 @@ function useAuth({ appKey }) {
|
|
|
137
245
|
setIsSubmitting(false);
|
|
138
246
|
}
|
|
139
247
|
}, [appKey]);
|
|
140
|
-
const logout =
|
|
248
|
+
const logout = useCallback2(async () => {
|
|
141
249
|
const token = authToken;
|
|
142
250
|
if (appKey)
|
|
143
251
|
clearStoredToken(appKey);
|
|
@@ -146,7 +254,7 @@ function useAuth({ appKey }) {
|
|
|
146
254
|
if (!token)
|
|
147
255
|
return;
|
|
148
256
|
try {
|
|
149
|
-
await fetch(`${
|
|
257
|
+
await fetch(`${API_URL2}/v1/auth/logout`, {
|
|
150
258
|
method: "POST",
|
|
151
259
|
credentials: "omit",
|
|
152
260
|
headers: { Authorization: `Bearer ${token}` }
|
|
@@ -168,21 +276,21 @@ function useAuth({ appKey }) {
|
|
|
168
276
|
}
|
|
169
277
|
|
|
170
278
|
// src/hooks/useAvailableModules.ts
|
|
171
|
-
import { useCallback as
|
|
172
|
-
var
|
|
279
|
+
import { useCallback as useCallback3, useEffect as useEffect3, useState as useState3 } from "react";
|
|
280
|
+
var API_URL3 = "https://specialist.skippr.ai/api";
|
|
173
281
|
function useAvailableModules({
|
|
174
282
|
enabled,
|
|
175
283
|
bearerToken,
|
|
176
284
|
authedFetch
|
|
177
285
|
}) {
|
|
178
|
-
const [modules, setModules] =
|
|
179
|
-
const [isLoading, setIsLoading] =
|
|
180
|
-
const [error, setError] =
|
|
181
|
-
const fetchModules =
|
|
286
|
+
const [modules, setModules] = useState3([]);
|
|
287
|
+
const [isLoading, setIsLoading] = useState3(false);
|
|
288
|
+
const [error, setError] = useState3(null);
|
|
289
|
+
const fetchModules = useCallback3(async () => {
|
|
182
290
|
setIsLoading(true);
|
|
183
291
|
setError(null);
|
|
184
292
|
try {
|
|
185
|
-
const resp = await authedFetch(`${
|
|
293
|
+
const resp = await authedFetch(`${API_URL3}/v1/modules/available`);
|
|
186
294
|
if (!resp.ok) {
|
|
187
295
|
const body = await resp.json().catch(() => null);
|
|
188
296
|
throw new Error(body?.detail || `Failed to load modules: ${resp.status}`);
|
|
@@ -195,7 +303,7 @@ function useAvailableModules({
|
|
|
195
303
|
setIsLoading(false);
|
|
196
304
|
}
|
|
197
305
|
}, [authedFetch]);
|
|
198
|
-
|
|
306
|
+
useEffect3(() => {
|
|
199
307
|
if (!enabled || !bearerToken)
|
|
200
308
|
return;
|
|
201
309
|
fetchModules();
|
|
@@ -209,11 +317,11 @@ function useAvailableModules({
|
|
|
209
317
|
}
|
|
210
318
|
|
|
211
319
|
// src/hooks/useSession.ts
|
|
212
|
-
import { useCallback as
|
|
213
|
-
var
|
|
320
|
+
import { useCallback as useCallback4, useEffect as useEffect4, useRef, useState as useState4 } from "react";
|
|
321
|
+
var API_URL4 = "https://specialist.skippr.ai/api";
|
|
214
322
|
async function fetchSessionMessages(sessionId, authedFetch) {
|
|
215
323
|
try {
|
|
216
|
-
const resp = await authedFetch(`${
|
|
324
|
+
const resp = await authedFetch(`${API_URL4}/v1/sessions/${sessionId}/messages`);
|
|
217
325
|
if (!resp.ok)
|
|
218
326
|
return [];
|
|
219
327
|
const { messages } = await resp.json();
|
|
@@ -243,7 +351,7 @@ function stopStream(stream) {
|
|
|
243
351
|
track.stop();
|
|
244
352
|
}
|
|
245
353
|
async function exchangeForBearerToken(appKey, userToken) {
|
|
246
|
-
const resp = await fetch(`${
|
|
354
|
+
const resp = await fetch(`${API_URL4}/v1/auth/token-exchange`, {
|
|
247
355
|
method: "POST",
|
|
248
356
|
credentials: "omit",
|
|
249
357
|
headers: {
|
|
@@ -267,26 +375,26 @@ function useSession({
|
|
|
267
375
|
onStartError,
|
|
268
376
|
onDisconnect
|
|
269
377
|
}) {
|
|
270
|
-
const [connection, setConnection] =
|
|
271
|
-
const [shouldConnect, setShouldConnect] =
|
|
272
|
-
const [isStarting, setIsStarting] =
|
|
273
|
-
const [isDisconnecting, setIsDisconnecting] =
|
|
274
|
-
const [error, setError] =
|
|
275
|
-
const [errorCode, setErrorCode] =
|
|
276
|
-
const [sessionId, setSessionId] =
|
|
277
|
-
const [bearerToken, setBearerToken] =
|
|
278
|
-
const [pendingScreenStream, setPendingScreenStream] =
|
|
279
|
-
const [isPaused, setIsPaused] =
|
|
280
|
-
const [isPausing, setIsPausing] =
|
|
281
|
-
const [historyMessages, setHistoryMessages] =
|
|
282
|
-
const [authFailed, setAuthFailed] =
|
|
378
|
+
const [connection, setConnection] = useState4(null);
|
|
379
|
+
const [shouldConnect, setShouldConnect] = useState4(false);
|
|
380
|
+
const [isStarting, setIsStarting] = useState4(false);
|
|
381
|
+
const [isDisconnecting, setIsDisconnecting] = useState4(false);
|
|
382
|
+
const [error, setError] = useState4("");
|
|
383
|
+
const [errorCode, setErrorCode] = useState4(null);
|
|
384
|
+
const [sessionId, setSessionId] = useState4(null);
|
|
385
|
+
const [bearerToken, setBearerToken] = useState4(authToken ?? null);
|
|
386
|
+
const [pendingScreenStream, setPendingScreenStream] = useState4(null);
|
|
387
|
+
const [isPaused, setIsPaused] = useState4(false);
|
|
388
|
+
const [isPausing, setIsPausing] = useState4(false);
|
|
389
|
+
const [historyMessages, setHistoryMessages] = useState4([]);
|
|
390
|
+
const [authFailed, setAuthFailed] = useState4(false);
|
|
283
391
|
const tokenRef = useRef(authToken ? { token: authToken, expiresAt: null } : null);
|
|
284
392
|
const getUserTokenRef = useRef(getUserToken);
|
|
285
393
|
getUserTokenRef.current = getUserToken ?? (userToken ? () => Promise.resolve(userToken) : undefined);
|
|
286
394
|
const failedBearerRef = useRef(null);
|
|
287
395
|
const inFlightExchangeRef = useRef(null);
|
|
288
|
-
const canExchange =
|
|
289
|
-
const reExchange =
|
|
396
|
+
const canExchange = useCallback4(() => !!appKey && !!getUserTokenRef.current, [appKey]);
|
|
397
|
+
const reExchange = useCallback4(async () => {
|
|
290
398
|
if (inFlightExchangeRef.current)
|
|
291
399
|
return inFlightExchangeRef.current;
|
|
292
400
|
const provider = getUserTokenRef.current;
|
|
@@ -306,7 +414,7 @@ function useSession({
|
|
|
306
414
|
inFlightExchangeRef.current = null;
|
|
307
415
|
}
|
|
308
416
|
}, [appKey]);
|
|
309
|
-
const getValidBearer =
|
|
417
|
+
const getValidBearer = useCallback4(async () => {
|
|
310
418
|
const current = tokenRef.current;
|
|
311
419
|
if (current) {
|
|
312
420
|
if (current.expiresAt === null)
|
|
@@ -318,7 +426,7 @@ function useSession({
|
|
|
318
426
|
return reExchange();
|
|
319
427
|
return current?.token ?? null;
|
|
320
428
|
}, [canExchange, reExchange]);
|
|
321
|
-
const authedFetch =
|
|
429
|
+
const authedFetch = useCallback4(async (input, init = {}) => {
|
|
322
430
|
const isSecretMode = canExchange();
|
|
323
431
|
const onTerminalAuthFailure = () => {
|
|
324
432
|
if (isSecretMode)
|
|
@@ -360,7 +468,7 @@ function useSession({
|
|
|
360
468
|
setAuthFailed(false);
|
|
361
469
|
return resp;
|
|
362
470
|
}, [canExchange, getValidBearer, reExchange]);
|
|
363
|
-
|
|
471
|
+
useEffect4(() => {
|
|
364
472
|
let stale = false;
|
|
365
473
|
if (authToken) {
|
|
366
474
|
tokenRef.current = { token: authToken, expiresAt: null };
|
|
@@ -381,12 +489,12 @@ function useSession({
|
|
|
381
489
|
}, [authToken, canExchange, reExchange]);
|
|
382
490
|
const pauseOnUnloadRef = useRef(null);
|
|
383
491
|
pauseOnUnloadRef.current = connection !== null && !isPaused && sessionId && bearerToken ? { sessionId, bearerToken } : null;
|
|
384
|
-
|
|
492
|
+
useEffect4(() => {
|
|
385
493
|
const onPageHide = () => {
|
|
386
494
|
const pending = pauseOnUnloadRef.current;
|
|
387
495
|
if (!pending)
|
|
388
496
|
return;
|
|
389
|
-
fetch(`${
|
|
497
|
+
fetch(`${API_URL4}/v1/sessions/${pending.sessionId}/pause`, {
|
|
390
498
|
method: "POST",
|
|
391
499
|
credentials: "omit",
|
|
392
500
|
keepalive: true,
|
|
@@ -396,7 +504,7 @@ function useSession({
|
|
|
396
504
|
window.addEventListener("pagehide", onPageHide);
|
|
397
505
|
return () => window.removeEventListener("pagehide", onPageHide);
|
|
398
506
|
}, []);
|
|
399
|
-
const startSession =
|
|
507
|
+
const startSession = useCallback4(async ({ agentId, agentControls, existingSessionId, adoptionGoalId }) => {
|
|
400
508
|
if (!bearerToken) {
|
|
401
509
|
setError("No auth token available");
|
|
402
510
|
return;
|
|
@@ -422,7 +530,7 @@ function useSession({
|
|
|
422
530
|
try {
|
|
423
531
|
let resolvedSessionId = existingSessionId;
|
|
424
532
|
if (!resolvedSessionId) {
|
|
425
|
-
const createResp = await authedFetch(`${
|
|
533
|
+
const createResp = await authedFetch(`${API_URL4}/v1/sessions`, {
|
|
426
534
|
method: "POST",
|
|
427
535
|
headers: { "Content-Type": "application/json" },
|
|
428
536
|
body: JSON.stringify({
|
|
@@ -439,10 +547,14 @@ function useSession({
|
|
|
439
547
|
const { session: session2 } = await createResp.json();
|
|
440
548
|
resolvedSessionId = session2.id;
|
|
441
549
|
}
|
|
442
|
-
const startResp = await authedFetch(`${
|
|
550
|
+
const startResp = await authedFetch(`${API_URL4}/v1/sessions/${resolvedSessionId}/start`, {
|
|
443
551
|
method: "POST",
|
|
444
552
|
headers: { "Content-Type": "application/json" },
|
|
445
|
-
body: JSON.stringify({
|
|
553
|
+
body: JSON.stringify({
|
|
554
|
+
captureMode,
|
|
555
|
+
agentControls: requestAgentControls,
|
|
556
|
+
adoptionGoalId
|
|
557
|
+
})
|
|
446
558
|
});
|
|
447
559
|
if (!startResp.ok) {
|
|
448
560
|
const body = await startResp.json().catch(() => null);
|
|
@@ -468,12 +580,12 @@ function useSession({
|
|
|
468
580
|
setIsStarting(false);
|
|
469
581
|
}
|
|
470
582
|
}, [captureMode, bearerToken, authedFetch, onStart, onStartError]);
|
|
471
|
-
const pauseSession =
|
|
583
|
+
const pauseSession = useCallback4(async () => {
|
|
472
584
|
if (!sessionId || !bearerToken)
|
|
473
585
|
return;
|
|
474
586
|
setIsPausing(true);
|
|
475
587
|
try {
|
|
476
|
-
const resp = await authedFetch(`${
|
|
588
|
+
const resp = await authedFetch(`${API_URL4}/v1/sessions/${sessionId}/pause`, {
|
|
477
589
|
method: "POST"
|
|
478
590
|
});
|
|
479
591
|
if (!resp.ok) {
|
|
@@ -494,12 +606,12 @@ function useSession({
|
|
|
494
606
|
setIsPaused(true);
|
|
495
607
|
setIsPausing(false);
|
|
496
608
|
}, [sessionId, bearerToken, authedFetch, pendingScreenStream]);
|
|
497
|
-
const disconnect =
|
|
609
|
+
const disconnect = useCallback4(async () => {
|
|
498
610
|
setIsDisconnecting(true);
|
|
499
611
|
try {
|
|
500
612
|
if (sessionId && bearerToken) {
|
|
501
613
|
try {
|
|
502
|
-
await authedFetch(`${
|
|
614
|
+
await authedFetch(`${API_URL4}/v1/sessions/${sessionId}/pause`, {
|
|
503
615
|
method: "POST"
|
|
504
616
|
});
|
|
505
617
|
} catch {}
|
|
@@ -537,6 +649,13 @@ function useSession({
|
|
|
537
649
|
};
|
|
538
650
|
}
|
|
539
651
|
|
|
652
|
+
// src/lib/agentMode.ts
|
|
653
|
+
var AGENT_MODE = {
|
|
654
|
+
Standard: "standard",
|
|
655
|
+
AlwaysOn: "always_on"
|
|
656
|
+
};
|
|
657
|
+
var AGENT_MODES = Object.values(AGENT_MODE);
|
|
658
|
+
|
|
540
659
|
// src/lib/constants.ts
|
|
541
660
|
var SIDEBAR_WIDTH = 360;
|
|
542
661
|
var WIDGET_ROOT_ID = "skippr-sdk-root";
|
|
@@ -548,13 +667,6 @@ var HIGHLIGHT_TOPIC = "skippr.highlight";
|
|
|
548
667
|
var PAGE_ACTIONS_TOPIC = "skippr.page-actions";
|
|
549
668
|
var NAME_MAX_CHARS = 80;
|
|
550
669
|
|
|
551
|
-
// src/lib/agentMode.ts
|
|
552
|
-
var AGENT_MODE = {
|
|
553
|
-
Standard: "standard",
|
|
554
|
-
AlwaysOn: "always_on"
|
|
555
|
-
};
|
|
556
|
-
var AGENT_MODES = Object.values(AGENT_MODE);
|
|
557
|
-
|
|
558
670
|
// src/lib/sessionStatus.ts
|
|
559
671
|
var SESSION_STATUS = {
|
|
560
672
|
pending: "pending",
|
|
@@ -603,12 +715,12 @@ function getModuleSessionState(currentSession, mode) {
|
|
|
603
715
|
// src/components/AutoStartMedia.tsx
|
|
604
716
|
import { useConnectionState, useLocalParticipant } from "@livekit/components-react/hooks";
|
|
605
717
|
import { ConnectionState, Track } from "livekit-client";
|
|
606
|
-
import { useEffect as
|
|
718
|
+
import { useEffect as useEffect5, useRef as useRef2 } from "react";
|
|
607
719
|
function AutoStartMedia({ pendingScreenStream }) {
|
|
608
720
|
const { localParticipant } = useLocalParticipant();
|
|
609
721
|
const connectionState = useConnectionState();
|
|
610
722
|
const didStartRef = useRef2(false);
|
|
611
|
-
|
|
723
|
+
useEffect5(() => {
|
|
612
724
|
if (didStartRef.current)
|
|
613
725
|
return;
|
|
614
726
|
if (connectionState !== ConnectionState.Connected)
|
|
@@ -633,7 +745,7 @@ function AutoStartMedia({ pendingScreenStream }) {
|
|
|
633
745
|
// src/components/DomCapture.tsx
|
|
634
746
|
import { useConnectionState as useConnectionState2, useLocalParticipant as useLocalParticipant2 } from "@livekit/components-react/hooks";
|
|
635
747
|
import { ConnectionState as ConnectionState2, ScreenSharePresets, Track as Track2 } from "livekit-client";
|
|
636
|
-
import { useEffect as
|
|
748
|
+
import { useEffect as useEffect6, useRef as useRef3 } from "react";
|
|
637
749
|
|
|
638
750
|
// src/capture/a11yUtils.ts
|
|
639
751
|
var ROLE_BY_TAG = {
|
|
@@ -1418,7 +1530,7 @@ function DomCapture() {
|
|
|
1418
1530
|
const { localParticipant } = useLocalParticipant2();
|
|
1419
1531
|
const connectionState = useConnectionState2();
|
|
1420
1532
|
const didStartRef = useRef3(false);
|
|
1421
|
-
|
|
1533
|
+
useEffect6(() => {
|
|
1422
1534
|
if (didStartRef.current)
|
|
1423
1535
|
return;
|
|
1424
1536
|
if (connectionState !== ConnectionState2.Connected)
|
|
@@ -1844,8 +1956,14 @@ var __iconNode26 = [
|
|
|
1844
1956
|
["line", { x1: "22", x2: "16", y1: "11", y2: "11", key: "1shjgl" }]
|
|
1845
1957
|
];
|
|
1846
1958
|
var UserPlus = createLucideIcon("user-plus", __iconNode26);
|
|
1959
|
+
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/x.js
|
|
1960
|
+
var __iconNode27 = [
|
|
1961
|
+
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
|
|
1962
|
+
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
|
|
1963
|
+
];
|
|
1964
|
+
var X = createLucideIcon("x", __iconNode27);
|
|
1847
1965
|
// src/components/HighlightOverlay.tsx
|
|
1848
|
-
import { useCallback as
|
|
1966
|
+
import { useCallback as useCallback5, useEffect as useEffect7, useRef as useRef4, useState as useState5 } from "react";
|
|
1849
1967
|
|
|
1850
1968
|
// src/capture/elementRef.ts
|
|
1851
1969
|
function safeGetIframeDocument(iframe) {
|
|
@@ -1953,14 +2071,14 @@ function findScrollableAncestor(el) {
|
|
|
1953
2071
|
return el.ownerDocument?.documentElement ?? document.documentElement;
|
|
1954
2072
|
}
|
|
1955
2073
|
function HighlightOverlay() {
|
|
1956
|
-
const [overlayState, setOverlayState] =
|
|
2074
|
+
const [overlayState, setOverlayState] = useState5(null);
|
|
1957
2075
|
const targetElementRef = useRef4(null);
|
|
1958
2076
|
const pendingFrameRef = useRef4(null);
|
|
1959
|
-
const clearOverlay =
|
|
2077
|
+
const clearOverlay = useCallback5(() => {
|
|
1960
2078
|
targetElementRef.current = null;
|
|
1961
2079
|
setOverlayState(null);
|
|
1962
2080
|
}, []);
|
|
1963
|
-
const recomputeRect =
|
|
2081
|
+
const recomputeRect = useCallback5(() => {
|
|
1964
2082
|
pendingFrameRef.current = null;
|
|
1965
2083
|
const target = targetElementRef.current;
|
|
1966
2084
|
if (!target)
|
|
@@ -1972,12 +2090,12 @@ function HighlightOverlay() {
|
|
|
1972
2090
|
const rect2 = getRectInTopViewport(target);
|
|
1973
2091
|
setOverlayState((prev) => prev ? { ...prev, rect: rect2 } : prev);
|
|
1974
2092
|
}, [clearOverlay]);
|
|
1975
|
-
const scheduleRecompute =
|
|
2093
|
+
const scheduleRecompute = useCallback5(() => {
|
|
1976
2094
|
if (pendingFrameRef.current !== null)
|
|
1977
2095
|
return;
|
|
1978
2096
|
pendingFrameRef.current = window.requestAnimationFrame(recomputeRect);
|
|
1979
2097
|
}, [recomputeRect]);
|
|
1980
|
-
const onHighlightMessage =
|
|
2098
|
+
const onHighlightMessage = useCallback5((msg) => {
|
|
1981
2099
|
const parsed = parseHighlightMessage(msg.payload);
|
|
1982
2100
|
if (!parsed)
|
|
1983
2101
|
return;
|
|
@@ -1998,7 +2116,7 @@ function HighlightOverlay() {
|
|
|
1998
2116
|
});
|
|
1999
2117
|
}, [clearOverlay]);
|
|
2000
2118
|
useDataChannel(HIGHLIGHT_TOPIC, onHighlightMessage);
|
|
2001
|
-
|
|
2119
|
+
useEffect7(() => {
|
|
2002
2120
|
if (!overlayState)
|
|
2003
2121
|
return;
|
|
2004
2122
|
const target = targetElementRef.current;
|
|
@@ -2080,7 +2198,7 @@ function HighlightOverlay() {
|
|
|
2080
2198
|
}
|
|
2081
2199
|
|
|
2082
2200
|
// src/components/MinimizedBubble.tsx
|
|
2083
|
-
import { useEffect as
|
|
2201
|
+
import { useContext as useContext3, useEffect as useEffect8 } from "react";
|
|
2084
2202
|
|
|
2085
2203
|
// src/hooks/useLiveAgent.ts
|
|
2086
2204
|
import { useContext as useContext2 } from "react";
|
|
@@ -2097,6 +2215,9 @@ function useLiveAgent() {
|
|
|
2097
2215
|
historyMessages,
|
|
2098
2216
|
phasesSnapshot,
|
|
2099
2217
|
setPhasesSnapshot,
|
|
2218
|
+
adoptionGoals,
|
|
2219
|
+
dismissAdoptionGoal,
|
|
2220
|
+
startAdoptionSession,
|
|
2100
2221
|
...publicValue
|
|
2101
2222
|
} = ctx;
|
|
2102
2223
|
return publicValue;
|
|
@@ -2105,7 +2226,7 @@ function useLiveAgent() {
|
|
|
2105
2226
|
// src/hooks/useMediaControls.ts
|
|
2106
2227
|
import { useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react/hooks";
|
|
2107
2228
|
import { ScreenSharePresets as ScreenSharePresets2 } from "livekit-client";
|
|
2108
|
-
import { useCallback as
|
|
2229
|
+
import { useCallback as useCallback6 } from "react";
|
|
2109
2230
|
var SCREEN_SHARE_OPTIONS = {
|
|
2110
2231
|
video: { displaySurface: "browser" },
|
|
2111
2232
|
resolution: ScreenSharePresets2.h720fps30.resolution,
|
|
@@ -2115,14 +2236,14 @@ function useMediaControls() {
|
|
|
2115
2236
|
const { localParticipant } = useLocalParticipant3();
|
|
2116
2237
|
const isMuted = !localParticipant.isMicrophoneEnabled;
|
|
2117
2238
|
const isScreenSharing = localParticipant.isScreenShareEnabled;
|
|
2118
|
-
const toggleMute =
|
|
2239
|
+
const toggleMute = useCallback6(async () => {
|
|
2119
2240
|
try {
|
|
2120
2241
|
await localParticipant.setMicrophoneEnabled(isMuted);
|
|
2121
2242
|
} catch (error) {
|
|
2122
2243
|
console.error("Failed to toggle microphone:", error);
|
|
2123
2244
|
}
|
|
2124
2245
|
}, [localParticipant, isMuted]);
|
|
2125
|
-
const toggleScreenShare =
|
|
2246
|
+
const toggleScreenShare = useCallback6(async () => {
|
|
2126
2247
|
try {
|
|
2127
2248
|
await localParticipant.setScreenShareEnabled(!isScreenSharing, SCREEN_SHARE_OPTIONS);
|
|
2128
2249
|
} catch (error) {
|
|
@@ -2139,6 +2260,31 @@ function cn(...inputs) {
|
|
|
2139
2260
|
return twMerge(clsx(inputs));
|
|
2140
2261
|
}
|
|
2141
2262
|
|
|
2263
|
+
// src/components/AdoptionBubble.tsx
|
|
2264
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
2265
|
+
function AdoptionBubble({ goal, onAttend, onDismiss }) {
|
|
2266
|
+
return /* @__PURE__ */ jsxs2("div", {
|
|
2267
|
+
className: cn("skippr:flex skippr:max-w-72 skippr:items-center skippr:gap-1.5", "skippr:rounded-full skippr:bg-bubble/95 skippr:backdrop-blur-sm", "skippr:py-1.5 skippr:pr-1.5 skippr:pl-3.5", "skippr:text-xs skippr:font-medium skippr:text-white", "skippr:shadow-[0_8px_24px_rgba(45,43,61,0.35)]", "skippr:animate-[skippr-bubble-in_0.28s_ease-out]"),
|
|
2268
|
+
children: [
|
|
2269
|
+
/* @__PURE__ */ jsx2("button", {
|
|
2270
|
+
type: "button",
|
|
2271
|
+
onClick: () => onAttend(goal),
|
|
2272
|
+
className: "skippr:min-w-0 skippr:flex-1 skippr:cursor-pointer skippr:truncate skippr:rounded-full skippr:text-left skippr:transition-opacity skippr:hover:opacity-90 skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-inset skippr:focus-visible:ring-white/70",
|
|
2273
|
+
children: goal.displayMessage
|
|
2274
|
+
}),
|
|
2275
|
+
/* @__PURE__ */ jsx2("button", {
|
|
2276
|
+
type: "button",
|
|
2277
|
+
onClick: () => onDismiss(goal.goalId),
|
|
2278
|
+
"aria-label": "Dismiss suggestion",
|
|
2279
|
+
className: cn("skippr:flex skippr:size-5 skippr:shrink-0 skippr:items-center skippr:justify-center", "skippr:rounded-full skippr:text-white/70 skippr:cursor-pointer", "skippr:transition-colors skippr:hover:bg-white/15 skippr:hover:text-white", "skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-white/70"),
|
|
2280
|
+
children: /* @__PURE__ */ jsx2(X, {
|
|
2281
|
+
className: "skippr:size-3.5"
|
|
2282
|
+
})
|
|
2283
|
+
})
|
|
2284
|
+
]
|
|
2285
|
+
});
|
|
2286
|
+
}
|
|
2287
|
+
|
|
2142
2288
|
// src/hooks/useAgentVoiceState.ts
|
|
2143
2289
|
import { useVoiceAssistant } from "@livekit/components-react/hooks";
|
|
2144
2290
|
function useAgentVoiceState() {
|
|
@@ -2151,7 +2297,7 @@ function useAgentVoiceState() {
|
|
|
2151
2297
|
}
|
|
2152
2298
|
|
|
2153
2299
|
// src/components/LauncherStatusPill.tsx
|
|
2154
|
-
import { jsx as
|
|
2300
|
+
import { jsx as jsx3, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
|
|
2155
2301
|
function pillStatusFromAgent(state, canSeePage) {
|
|
2156
2302
|
if (state === "speaking")
|
|
2157
2303
|
return "talking";
|
|
@@ -2188,58 +2334,58 @@ function LauncherStatusPill() {
|
|
|
2188
2334
|
setSidebarTab("chat");
|
|
2189
2335
|
expandPanel();
|
|
2190
2336
|
};
|
|
2191
|
-
return /* @__PURE__ */
|
|
2337
|
+
return /* @__PURE__ */ jsx3("button", {
|
|
2192
2338
|
type: "button",
|
|
2193
2339
|
onClick: handleClick,
|
|
2194
2340
|
className: cn("skippr:fixed skippr:bottom-20 skippr:z-[9999]", "skippr:flex skippr:items-center skippr:gap-2", "skippr:rounded-full skippr:bg-bubble/95 skippr:backdrop-blur-sm", "skippr:px-3 skippr:py-1.5", "skippr:text-xs skippr:font-medium skippr:text-white", "skippr:shadow-[0_8px_24px_rgba(45,43,61,0.35)]", "skippr:cursor-pointer skippr:transition-colors skippr:hover:bg-bubble", "skippr:animate-[skippr-bubble-in_0.28s_ease-out]", position === "right" ? "skippr:right-6" : "skippr:left-6"),
|
|
2195
2341
|
"aria-label": ariaLabel,
|
|
2196
|
-
children: /* @__PURE__ */
|
|
2342
|
+
children: /* @__PURE__ */ jsxs3("span", {
|
|
2197
2343
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:animate-[skippr-pill-content_0.22s_ease-out]",
|
|
2198
2344
|
children: [
|
|
2199
|
-
status === "standing-by" && /* @__PURE__ */
|
|
2345
|
+
status === "standing-by" && /* @__PURE__ */ jsxs3(Fragment, {
|
|
2200
2346
|
children: [
|
|
2201
|
-
/* @__PURE__ */
|
|
2347
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2202
2348
|
children: "Standing by"
|
|
2203
2349
|
}),
|
|
2204
|
-
/* @__PURE__ */
|
|
2350
|
+
/* @__PURE__ */ jsx3(ThinkingDots, {})
|
|
2205
2351
|
]
|
|
2206
2352
|
}),
|
|
2207
|
-
status === "observing" && /* @__PURE__ */
|
|
2353
|
+
status === "observing" && /* @__PURE__ */ jsxs3(Fragment, {
|
|
2208
2354
|
children: [
|
|
2209
|
-
/* @__PURE__ */
|
|
2210
|
-
/* @__PURE__ */
|
|
2355
|
+
/* @__PURE__ */ jsx3(ObservingIcon, {}),
|
|
2356
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2211
2357
|
children: "Skippr is observing"
|
|
2212
2358
|
})
|
|
2213
2359
|
]
|
|
2214
2360
|
}),
|
|
2215
|
-
status === "connected" && /* @__PURE__ */
|
|
2361
|
+
status === "connected" && /* @__PURE__ */ jsxs3(Fragment, {
|
|
2216
2362
|
children: [
|
|
2217
|
-
/* @__PURE__ */
|
|
2218
|
-
/* @__PURE__ */
|
|
2363
|
+
/* @__PURE__ */ jsx3(ConnectedDot, {}),
|
|
2364
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2219
2365
|
children: "Skippr is connected"
|
|
2220
2366
|
})
|
|
2221
2367
|
]
|
|
2222
2368
|
}),
|
|
2223
|
-
status === "talking" && /* @__PURE__ */
|
|
2369
|
+
status === "talking" && /* @__PURE__ */ jsxs3(Fragment, {
|
|
2224
2370
|
children: [
|
|
2225
|
-
/* @__PURE__ */
|
|
2226
|
-
/* @__PURE__ */
|
|
2371
|
+
/* @__PURE__ */ jsx3(SpeakingBars, {}),
|
|
2372
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2227
2373
|
children: "Skippr is talking"
|
|
2228
2374
|
})
|
|
2229
2375
|
]
|
|
2230
2376
|
}),
|
|
2231
|
-
status === "thinking" && /* @__PURE__ */
|
|
2377
|
+
status === "thinking" && /* @__PURE__ */ jsxs3(Fragment, {
|
|
2232
2378
|
children: [
|
|
2233
|
-
/* @__PURE__ */
|
|
2234
|
-
/* @__PURE__ */
|
|
2379
|
+
/* @__PURE__ */ jsx3(ThinkingDots, {}),
|
|
2380
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2235
2381
|
children: "Skippr is thinking"
|
|
2236
2382
|
})
|
|
2237
2383
|
]
|
|
2238
2384
|
}),
|
|
2239
|
-
status === "paused" && /* @__PURE__ */
|
|
2385
|
+
status === "paused" && /* @__PURE__ */ jsxs3(Fragment, {
|
|
2240
2386
|
children: [
|
|
2241
|
-
/* @__PURE__ */
|
|
2242
|
-
/* @__PURE__ */
|
|
2387
|
+
/* @__PURE__ */ jsx3(PausedDot, {}),
|
|
2388
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2243
2389
|
children: "Session paused"
|
|
2244
2390
|
})
|
|
2245
2391
|
]
|
|
@@ -2249,25 +2395,25 @@ function LauncherStatusPill() {
|
|
|
2249
2395
|
});
|
|
2250
2396
|
}
|
|
2251
2397
|
function ConnectedDot() {
|
|
2252
|
-
return /* @__PURE__ */
|
|
2398
|
+
return /* @__PURE__ */ jsxs3("span", {
|
|
2253
2399
|
className: "skippr:relative skippr:flex skippr:size-2",
|
|
2254
2400
|
children: [
|
|
2255
|
-
/* @__PURE__ */
|
|
2401
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2256
2402
|
className: "skippr:absolute skippr:inline-flex skippr:size-full skippr:animate-ping skippr:rounded-full skippr:bg-emerald-400 skippr:opacity-75"
|
|
2257
2403
|
}),
|
|
2258
|
-
/* @__PURE__ */
|
|
2404
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2259
2405
|
className: "skippr:relative skippr:inline-flex skippr:size-2 skippr:rounded-full skippr:bg-emerald-400"
|
|
2260
2406
|
})
|
|
2261
2407
|
]
|
|
2262
2408
|
});
|
|
2263
2409
|
}
|
|
2264
2410
|
function PausedDot() {
|
|
2265
|
-
return /* @__PURE__ */
|
|
2411
|
+
return /* @__PURE__ */ jsx3("span", {
|
|
2266
2412
|
className: "skippr:inline-flex skippr:size-2 skippr:rounded-full skippr:bg-amber-400"
|
|
2267
2413
|
});
|
|
2268
2414
|
}
|
|
2269
2415
|
function ObservingIcon() {
|
|
2270
|
-
return /* @__PURE__ */
|
|
2416
|
+
return /* @__PURE__ */ jsxs3("svg", {
|
|
2271
2417
|
viewBox: "0 0 24 24",
|
|
2272
2418
|
className: "skippr:size-3.5",
|
|
2273
2419
|
fill: "none",
|
|
@@ -2277,10 +2423,10 @@ function ObservingIcon() {
|
|
|
2277
2423
|
strokeLinejoin: "round",
|
|
2278
2424
|
"aria-hidden": "true",
|
|
2279
2425
|
children: [
|
|
2280
|
-
/* @__PURE__ */
|
|
2426
|
+
/* @__PURE__ */ jsx3("path", {
|
|
2281
2427
|
d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
|
|
2282
2428
|
}),
|
|
2283
|
-
/* @__PURE__ */
|
|
2429
|
+
/* @__PURE__ */ jsx3("circle", {
|
|
2284
2430
|
cx: "12",
|
|
2285
2431
|
cy: "12",
|
|
2286
2432
|
r: "3",
|
|
@@ -2292,38 +2438,38 @@ function ObservingIcon() {
|
|
|
2292
2438
|
});
|
|
2293
2439
|
}
|
|
2294
2440
|
function SpeakingBars() {
|
|
2295
|
-
return /* @__PURE__ */
|
|
2441
|
+
return /* @__PURE__ */ jsxs3("span", {
|
|
2296
2442
|
className: "skippr:flex skippr:items-center skippr:gap-[2px] skippr:h-3.5",
|
|
2297
2443
|
children: [
|
|
2298
|
-
/* @__PURE__ */
|
|
2444
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2299
2445
|
className: "skippr:w-[2px] skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_infinite] skippr:h-1.5"
|
|
2300
2446
|
}),
|
|
2301
|
-
/* @__PURE__ */
|
|
2447
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2302
2448
|
className: "skippr:w-[2px] skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_0.15s_infinite] skippr:h-3"
|
|
2303
2449
|
}),
|
|
2304
|
-
/* @__PURE__ */
|
|
2450
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2305
2451
|
className: "skippr:w-[2px] skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_0.3s_infinite] skippr:h-2"
|
|
2306
2452
|
}),
|
|
2307
|
-
/* @__PURE__ */
|
|
2453
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2308
2454
|
className: "skippr:w-[2px] skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_0.45s_infinite] skippr:h-3.5"
|
|
2309
2455
|
}),
|
|
2310
|
-
/* @__PURE__ */
|
|
2456
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2311
2457
|
className: "skippr:w-[2px] skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_0.6s_infinite] skippr:h-1"
|
|
2312
2458
|
})
|
|
2313
2459
|
]
|
|
2314
2460
|
});
|
|
2315
2461
|
}
|
|
2316
2462
|
function ThinkingDots() {
|
|
2317
|
-
return /* @__PURE__ */
|
|
2463
|
+
return /* @__PURE__ */ jsxs3("span", {
|
|
2318
2464
|
className: "skippr:flex skippr:items-center skippr:gap-[3px]",
|
|
2319
2465
|
children: [
|
|
2320
|
-
/* @__PURE__ */
|
|
2466
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2321
2467
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
2322
2468
|
}),
|
|
2323
|
-
/* @__PURE__ */
|
|
2469
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2324
2470
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
2325
2471
|
}),
|
|
2326
|
-
/* @__PURE__ */
|
|
2472
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2327
2473
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
2328
2474
|
})
|
|
2329
2475
|
]
|
|
@@ -2331,9 +2477,9 @@ function ThinkingDots() {
|
|
|
2331
2477
|
}
|
|
2332
2478
|
|
|
2333
2479
|
// src/components/Logo.tsx
|
|
2334
|
-
import { jsx as
|
|
2480
|
+
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
2335
2481
|
function Logo({ className }) {
|
|
2336
|
-
return /* @__PURE__ */
|
|
2482
|
+
return /* @__PURE__ */ jsxs4("svg", {
|
|
2337
2483
|
width: "1em",
|
|
2338
2484
|
height: "1em",
|
|
2339
2485
|
viewBox: "0 0 200 200",
|
|
@@ -2343,20 +2489,20 @@ function Logo({ className }) {
|
|
|
2343
2489
|
"aria-label": "Skippr",
|
|
2344
2490
|
className,
|
|
2345
2491
|
children: [
|
|
2346
|
-
/* @__PURE__ */
|
|
2492
|
+
/* @__PURE__ */ jsx4("rect", {
|
|
2347
2493
|
width: "200",
|
|
2348
2494
|
height: "200",
|
|
2349
2495
|
rx: "40",
|
|
2350
2496
|
fill: "#2D2D3F"
|
|
2351
2497
|
}),
|
|
2352
|
-
/* @__PURE__ */
|
|
2498
|
+
/* @__PURE__ */ jsxs4("g", {
|
|
2353
2499
|
transform: "translate(100 100) scale(0.8) translate(-100 -100)",
|
|
2354
2500
|
children: [
|
|
2355
|
-
/* @__PURE__ */
|
|
2501
|
+
/* @__PURE__ */ jsx4("path", {
|
|
2356
2502
|
d: "M144.497 59C149.193 59 153 62.8071 153 67.5033V116.397C153 118.034 152.536 119.562 151.735 120.859L114.894 92.4811L114.894 92.4804C105.42 85.1648 91.2971 91.7058 91.297 104.015V124.901H54.5033C49.8071 124.901 46 121.094 46 116.397V67.5033C46 62.8071 49.8071 59 54.5033 59H144.497ZM101.272 104.015C101.272 100.172 105.736 98.0111 108.798 100.375L140.637 124.901H101.272V104.015Z",
|
|
2357
2503
|
fill: "white"
|
|
2358
2504
|
}),
|
|
2359
|
-
/* @__PURE__ */
|
|
2505
|
+
/* @__PURE__ */ jsx4("path", {
|
|
2360
2506
|
d: "M108.798 99.8856C105.736 97.5211 101.271 99.6824 101.271 103.525V155.892C101.271 160.27 106.852 162.191 109.594 158.755L122.619 142.437C123.1 141.836 123.712 141.35 124.409 141.016C125.106 140.683 125.871 140.51 126.645 140.51H147.946C152.386 140.51 154.316 134.944 150.81 132.247L108.798 99.8856Z",
|
|
2361
2507
|
fill: "#2BC0AE"
|
|
2362
2508
|
})
|
|
@@ -2367,7 +2513,7 @@ function Logo({ className }) {
|
|
|
2367
2513
|
}
|
|
2368
2514
|
|
|
2369
2515
|
// src/components/MinimizedBubble.tsx
|
|
2370
|
-
import { jsx as
|
|
2516
|
+
import { jsx as jsx5, jsxs as jsxs5, Fragment as Fragment2 } from "react/jsx-runtime";
|
|
2371
2517
|
var CONTROL_BUTTON = "skippr:flex skippr:size-12 skippr:items-center skippr:justify-center skippr:rounded-[14px] skippr:cursor-pointer skippr:transition-all skippr:hover:-translate-y-0.5 skippr:active:translate-y-0";
|
|
2372
2518
|
var CONTROL_SHADOW = "skippr:shadow-[0_4px_16px_rgba(0,0,0,0.15),0_2px_4px_rgba(0,0,0,0.1)]";
|
|
2373
2519
|
function ConnectedLauncher() {
|
|
@@ -2388,61 +2534,61 @@ function ConnectedLauncher() {
|
|
|
2388
2534
|
setSidebarTab("chat");
|
|
2389
2535
|
expandPanel();
|
|
2390
2536
|
};
|
|
2391
|
-
return /* @__PURE__ */
|
|
2537
|
+
return /* @__PURE__ */ jsxs5(Fragment2, {
|
|
2392
2538
|
children: [
|
|
2393
|
-
!showPaused && /* @__PURE__ */
|
|
2539
|
+
!showPaused && /* @__PURE__ */ jsxs5(Fragment2, {
|
|
2394
2540
|
children: [
|
|
2395
|
-
/* @__PURE__ */
|
|
2541
|
+
/* @__PURE__ */ jsx5("button", {
|
|
2396
2542
|
type: "button",
|
|
2397
2543
|
onClick: toggleMute,
|
|
2398
2544
|
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
2399
2545
|
className: cn(CONTROL_BUTTON, CONTROL_SHADOW, isMuted ? "skippr:bg-destructive/10 skippr:text-destructive skippr:hover:bg-destructive/20" : "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted"),
|
|
2400
|
-
children: isMuted ? /* @__PURE__ */
|
|
2546
|
+
children: isMuted ? /* @__PURE__ */ jsx5(MicOff, {
|
|
2401
2547
|
className: "skippr:size-5"
|
|
2402
|
-
}) : /* @__PURE__ */
|
|
2548
|
+
}) : /* @__PURE__ */ jsx5(Mic, {
|
|
2403
2549
|
className: "skippr:size-5"
|
|
2404
2550
|
})
|
|
2405
2551
|
}),
|
|
2406
|
-
showScreenShareToggle && /* @__PURE__ */
|
|
2552
|
+
showScreenShareToggle && /* @__PURE__ */ jsx5("button", {
|
|
2407
2553
|
type: "button",
|
|
2408
2554
|
onClick: toggleScreenShare,
|
|
2409
2555
|
"aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
|
|
2410
2556
|
className: cn(CONTROL_BUTTON, CONTROL_SHADOW, isScreenSharing ? "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90" : "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted"),
|
|
2411
|
-
children: isScreenSharing ? /* @__PURE__ */
|
|
2557
|
+
children: isScreenSharing ? /* @__PURE__ */ jsx5(MonitorOff, {
|
|
2412
2558
|
className: "skippr:size-5"
|
|
2413
|
-
}) : /* @__PURE__ */
|
|
2559
|
+
}) : /* @__PURE__ */ jsx5(Monitor, {
|
|
2414
2560
|
className: "skippr:size-5"
|
|
2415
2561
|
})
|
|
2416
2562
|
})
|
|
2417
2563
|
]
|
|
2418
2564
|
}),
|
|
2419
|
-
/* @__PURE__ */
|
|
2565
|
+
/* @__PURE__ */ jsx5("button", {
|
|
2420
2566
|
type: "button",
|
|
2421
2567
|
onClick: () => isPaused ? resumeSession() : pauseSession(),
|
|
2422
2568
|
disabled: isPausing,
|
|
2423
2569
|
"aria-label": showPaused ? "Resume session" : "Pause session",
|
|
2424
2570
|
className: cn(CONTROL_BUTTON, CONTROL_SHADOW, "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted skippr:disabled:opacity-60"),
|
|
2425
|
-
children: showPaused ? /* @__PURE__ */
|
|
2571
|
+
children: showPaused ? /* @__PURE__ */ jsx5(Play, {
|
|
2426
2572
|
className: "skippr:size-5"
|
|
2427
|
-
}) : /* @__PURE__ */
|
|
2573
|
+
}) : /* @__PURE__ */ jsx5(Pause, {
|
|
2428
2574
|
className: "skippr:size-5"
|
|
2429
2575
|
})
|
|
2430
2576
|
}),
|
|
2431
|
-
/* @__PURE__ */
|
|
2577
|
+
/* @__PURE__ */ jsx5("button", {
|
|
2432
2578
|
type: "button",
|
|
2433
2579
|
onClick: () => disconnect(),
|
|
2434
2580
|
"aria-label": "End session",
|
|
2435
2581
|
className: cn(CONTROL_BUTTON, "skippr:bg-destructive skippr:text-destructive-foreground skippr:hover:bg-destructive/90", "skippr:shadow-[0_4px_16px_rgba(217,79,79,0.45),0_2px_4px_rgba(0,0,0,0.1)]"),
|
|
2436
|
-
children: /* @__PURE__ */
|
|
2582
|
+
children: /* @__PURE__ */ jsx5(PhoneOff, {
|
|
2437
2583
|
className: "skippr:size-5"
|
|
2438
2584
|
})
|
|
2439
2585
|
}),
|
|
2440
|
-
!showPaused && /* @__PURE__ */
|
|
2586
|
+
!showPaused && /* @__PURE__ */ jsx5("button", {
|
|
2441
2587
|
type: "button",
|
|
2442
2588
|
onClick: openChat,
|
|
2443
2589
|
"aria-label": "Open chat",
|
|
2444
2590
|
className: cn(CONTROL_BUTTON, "skippr:bg-bubble skippr:text-white skippr:overflow-hidden", "skippr:shadow-[0_4px_16px_rgba(45,43,61,0.45),0_2px_4px_rgba(0,0,0,0.1)]", "skippr:hover:shadow-[0_6px_24px_rgba(45,43,61,0.55),0_4px_8px_rgba(0,0,0,0.1)]"),
|
|
2445
|
-
children: /* @__PURE__ */
|
|
2591
|
+
children: /* @__PURE__ */ jsx5(MessageSquare, {
|
|
2446
2592
|
className: "skippr:size-5"
|
|
2447
2593
|
})
|
|
2448
2594
|
})
|
|
@@ -2451,12 +2597,12 @@ function ConnectedLauncher() {
|
|
|
2451
2597
|
}
|
|
2452
2598
|
function IdleLauncher() {
|
|
2453
2599
|
const { expandPanel } = useLiveAgent();
|
|
2454
|
-
return /* @__PURE__ */
|
|
2600
|
+
return /* @__PURE__ */ jsx5("button", {
|
|
2455
2601
|
type: "button",
|
|
2456
2602
|
onClick: expandPanel,
|
|
2457
2603
|
"aria-label": "Skippr assistant",
|
|
2458
2604
|
className: cn("skippr:flex skippr:size-12 skippr:items-center skippr:justify-center", "skippr:rounded-[10px] skippr:overflow-hidden skippr:cursor-pointer", "skippr:shadow-[0_4px_16px_rgba(45,43,61,0.45),0_2px_4px_rgba(0,0,0,0.1)]", "skippr:transition-all skippr:hover:brightness-110 skippr:hover:-translate-y-0.5 skippr:active:translate-y-0"),
|
|
2459
|
-
children: /* @__PURE__ */
|
|
2605
|
+
children: /* @__PURE__ */ jsx5(Logo, {
|
|
2460
2606
|
className: "skippr:size-12"
|
|
2461
2607
|
})
|
|
2462
2608
|
});
|
|
@@ -2466,18 +2612,18 @@ function WelcomeBubble({
|
|
|
2466
2612
|
position,
|
|
2467
2613
|
onDismiss
|
|
2468
2614
|
}) {
|
|
2469
|
-
|
|
2615
|
+
useEffect8(() => {
|
|
2470
2616
|
const timer = setTimeout(onDismiss, 5000);
|
|
2471
2617
|
return () => clearTimeout(timer);
|
|
2472
2618
|
}, [onDismiss]);
|
|
2473
|
-
return /* @__PURE__ */
|
|
2619
|
+
return /* @__PURE__ */ jsxs5("button", {
|
|
2474
2620
|
type: "button",
|
|
2475
2621
|
className: cn("skippr:absolute skippr:bottom-full skippr:mb-3", "skippr:max-w-64 skippr:rounded-xl skippr:bg-card skippr:shadow-lg", "skippr:border skippr:border-border skippr:px-4 skippr:py-3", "skippr:text-sm skippr:text-foreground skippr:leading-relaxed skippr:text-left", "skippr:animate-[skippr-fade-in_0.3s_ease-out]", "skippr:cursor-pointer", position === "right" ? "skippr:right-0" : "skippr:left-0"),
|
|
2476
2622
|
onClick: onDismiss,
|
|
2477
2623
|
"aria-label": "Dismiss",
|
|
2478
2624
|
children: [
|
|
2479
2625
|
message,
|
|
2480
|
-
/* @__PURE__ */
|
|
2626
|
+
/* @__PURE__ */ jsx5("span", {
|
|
2481
2627
|
className: cn("skippr:absolute skippr:top-full skippr:size-2.5", "skippr:border-l skippr:border-t skippr:border-border skippr:bg-card", "skippr:rotate-[225deg]", position === "right" ? "skippr:right-5" : "skippr:left-5", "skippr:-mt-[5px]")
|
|
2482
2628
|
})
|
|
2483
2629
|
]
|
|
@@ -2488,20 +2634,41 @@ function MinimizedBubble({
|
|
|
2488
2634
|
welcomeDismissed,
|
|
2489
2635
|
onDismissWelcome
|
|
2490
2636
|
}) {
|
|
2491
|
-
const
|
|
2637
|
+
const ctx = useContext3(LiveAgentContext);
|
|
2638
|
+
if (!ctx) {
|
|
2639
|
+
throw new Error("MinimizedBubble must be used within a <LiveAgent> provider");
|
|
2640
|
+
}
|
|
2641
|
+
const {
|
|
2642
|
+
isConnected,
|
|
2643
|
+
isStarting,
|
|
2644
|
+
isPaused,
|
|
2645
|
+
isPausing,
|
|
2646
|
+
position,
|
|
2647
|
+
adoptionGoals,
|
|
2648
|
+
dismissAdoptionGoal,
|
|
2649
|
+
startAdoptionSession
|
|
2650
|
+
} = ctx;
|
|
2492
2651
|
const inSession = isConnected || isPaused || isPausing;
|
|
2493
|
-
return /* @__PURE__ */
|
|
2652
|
+
return /* @__PURE__ */ jsxs5(Fragment2, {
|
|
2494
2653
|
children: [
|
|
2495
|
-
/* @__PURE__ */
|
|
2496
|
-
/* @__PURE__ */
|
|
2654
|
+
/* @__PURE__ */ jsx5(LauncherStatusPill, {}),
|
|
2655
|
+
/* @__PURE__ */ jsxs5("div", {
|
|
2497
2656
|
className: cn("skippr:fixed skippr:bottom-6 skippr:z-[9999]", "skippr:flex skippr:items-center skippr:gap-2", position === "right" ? "skippr:right-6" : "skippr:left-6"),
|
|
2498
2657
|
children: [
|
|
2499
|
-
|
|
2658
|
+
!inSession && !isStarting && adoptionGoals.length > 0 && /* @__PURE__ */ jsx5("div", {
|
|
2659
|
+
className: cn("skippr:absolute skippr:bottom-full skippr:mb-3 skippr:flex skippr:flex-col skippr:gap-2", position === "right" ? "skippr:right-0 skippr:items-end" : "skippr:left-0 skippr:items-start"),
|
|
2660
|
+
children: adoptionGoals.map((goal) => /* @__PURE__ */ jsx5(AdoptionBubble, {
|
|
2661
|
+
goal,
|
|
2662
|
+
onAttend: startAdoptionSession,
|
|
2663
|
+
onDismiss: dismissAdoptionGoal
|
|
2664
|
+
}, goal.goalId))
|
|
2665
|
+
}),
|
|
2666
|
+
welcomeMessage && !isConnected && !isStarting && !welcomeDismissed && adoptionGoals.length === 0 && /* @__PURE__ */ jsx5(WelcomeBubble, {
|
|
2500
2667
|
message: welcomeMessage,
|
|
2501
2668
|
position,
|
|
2502
2669
|
onDismiss: onDismissWelcome
|
|
2503
2670
|
}),
|
|
2504
|
-
inSession ? /* @__PURE__ */
|
|
2671
|
+
inSession ? /* @__PURE__ */ jsx5(ConnectedLauncher, {}) : /* @__PURE__ */ jsx5(IdleLauncher, {})
|
|
2505
2672
|
]
|
|
2506
2673
|
})
|
|
2507
2674
|
]
|
|
@@ -2510,20 +2677,20 @@ function MinimizedBubble({
|
|
|
2510
2677
|
|
|
2511
2678
|
// src/components/PageActionHandler.tsx
|
|
2512
2679
|
import { useDataChannel as useDataChannel2 } from "@livekit/components-react/hooks";
|
|
2513
|
-
import { useCallback as
|
|
2680
|
+
import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef6, useState as useState7 } from "react";
|
|
2514
2681
|
|
|
2515
2682
|
// src/components/AgentActivityIndicator.tsx
|
|
2516
|
-
import { useEffect as
|
|
2517
|
-
import { jsx as
|
|
2683
|
+
import { useEffect as useEffect9, useRef as useRef5, useState as useState6 } from "react";
|
|
2684
|
+
import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
2518
2685
|
var Z_INDEX2 = 2147483646;
|
|
2519
2686
|
function centerOf(element) {
|
|
2520
2687
|
const rect = getRectInTopViewport(element);
|
|
2521
2688
|
return { left: rect.left + rect.width / 2, top: rect.top + rect.height / 2 };
|
|
2522
2689
|
}
|
|
2523
2690
|
function AgentActivityIndicator({ target }) {
|
|
2524
|
-
const [position, setPosition] =
|
|
2691
|
+
const [position, setPosition] = useState6(null);
|
|
2525
2692
|
const frameRef = useRef5(null);
|
|
2526
|
-
|
|
2693
|
+
useEffect9(() => {
|
|
2527
2694
|
if (!target || !target.element.isConnected) {
|
|
2528
2695
|
setPosition(null);
|
|
2529
2696
|
return;
|
|
@@ -2561,21 +2728,21 @@ function AgentActivityIndicator({ target }) {
|
|
|
2561
2728
|
zIndex: Z_INDEX2,
|
|
2562
2729
|
transition: "left 0.45s cubic-bezier(0.22, 1, 0.36, 1), top 0.45s cubic-bezier(0.22, 1, 0.36, 1)"
|
|
2563
2730
|
};
|
|
2564
|
-
return /* @__PURE__ */
|
|
2731
|
+
return /* @__PURE__ */ jsx6("div", {
|
|
2565
2732
|
"data-skippr-private": "true",
|
|
2566
2733
|
style: containerStyle,
|
|
2567
|
-
children: /* @__PURE__ */
|
|
2734
|
+
children: /* @__PURE__ */ jsxs6("div", {
|
|
2568
2735
|
className: "skippr:relative",
|
|
2569
2736
|
children: [
|
|
2570
|
-
/* @__PURE__ */
|
|
2737
|
+
/* @__PURE__ */ jsx6(MousePointer2, {
|
|
2571
2738
|
"aria-hidden": "true",
|
|
2572
2739
|
className: "skippr:h-5 skippr:w-5 skippr:text-cyan-500 skippr:drop-shadow-[0_1px_3px_rgba(0,0,0,0.35)] skippr:animate-skippr-press",
|
|
2573
2740
|
fill: "currentColor"
|
|
2574
2741
|
}),
|
|
2575
|
-
/* @__PURE__ */
|
|
2742
|
+
/* @__PURE__ */ jsx6("div", {
|
|
2576
2743
|
role: "status",
|
|
2577
2744
|
className: "skippr:absolute skippr:left-5 skippr:top-4 skippr:flex skippr:items-center skippr:gap-1.5 skippr:rounded-full skippr:bg-cyan-500 skippr:px-2.5 skippr:py-1 skippr:shadow-[0_4px_12px_rgba(0,0,0,0.18)]",
|
|
2578
|
-
children: /* @__PURE__ */
|
|
2745
|
+
children: /* @__PURE__ */ jsx6("span", {
|
|
2579
2746
|
className: "skippr:text-[11px] skippr:font-medium skippr:text-white skippr:whitespace-nowrap",
|
|
2580
2747
|
children: target.label
|
|
2581
2748
|
})
|
|
@@ -2586,7 +2753,7 @@ function AgentActivityIndicator({ target }) {
|
|
|
2586
2753
|
}
|
|
2587
2754
|
|
|
2588
2755
|
// src/components/PageActionHandler.tsx
|
|
2589
|
-
import { jsx as
|
|
2756
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
2590
2757
|
var INDICATOR_LINGER_MS = 1400;
|
|
2591
2758
|
var CURSOR_LEAD_BEFORE_ACTION_MS = 350;
|
|
2592
2759
|
var SETTLE_MS = 250;
|
|
@@ -2730,14 +2897,14 @@ function labelFor(action) {
|
|
|
2730
2897
|
}
|
|
2731
2898
|
}
|
|
2732
2899
|
function PageActionHandler() {
|
|
2733
|
-
const [activity, setActivity] =
|
|
2900
|
+
const [activity, setActivity] = useState7(null);
|
|
2734
2901
|
const mountedRef = useRef6(true);
|
|
2735
2902
|
const queueRef = useRef6([]);
|
|
2736
2903
|
const drainingRef = useRef6(false);
|
|
2737
2904
|
const timersRef = useRef6(new Set);
|
|
2738
2905
|
const wakesRef = useRef6(new Set);
|
|
2739
2906
|
const indicatorTimerRef = useRef6(null);
|
|
2740
|
-
const sleep =
|
|
2907
|
+
const sleep = useCallback7((ms) => {
|
|
2741
2908
|
return new Promise((resolve) => {
|
|
2742
2909
|
const wake = () => {
|
|
2743
2910
|
wakesRef.current.delete(wake);
|
|
@@ -2751,7 +2918,7 @@ function PageActionHandler() {
|
|
|
2751
2918
|
timersRef.current.add(timer);
|
|
2752
2919
|
});
|
|
2753
2920
|
}, []);
|
|
2754
|
-
const showActivity =
|
|
2921
|
+
const showActivity = useCallback7((target) => {
|
|
2755
2922
|
if (indicatorTimerRef.current) {
|
|
2756
2923
|
clearTimeout(indicatorTimerRef.current);
|
|
2757
2924
|
indicatorTimerRef.current = null;
|
|
@@ -2766,7 +2933,7 @@ function PageActionHandler() {
|
|
|
2766
2933
|
indicatorTimerRef.current = timer;
|
|
2767
2934
|
}
|
|
2768
2935
|
}, []);
|
|
2769
|
-
const processOne =
|
|
2936
|
+
const processOne = useCallback7(async (action) => {
|
|
2770
2937
|
if (action.type === "navigate") {
|
|
2771
2938
|
queueRef.current.length = 0;
|
|
2772
2939
|
if (!isSameOriginHttpUrl(action.url))
|
|
@@ -2792,7 +2959,7 @@ function PageActionHandler() {
|
|
|
2792
2959
|
runAgentAction(() => performAction(action, element));
|
|
2793
2960
|
await sleep(SETTLE_MS);
|
|
2794
2961
|
}, [showActivity, sleep]);
|
|
2795
|
-
const drain =
|
|
2962
|
+
const drain = useCallback7(async () => {
|
|
2796
2963
|
if (drainingRef.current)
|
|
2797
2964
|
return;
|
|
2798
2965
|
drainingRef.current = true;
|
|
@@ -2807,14 +2974,14 @@ function PageActionHandler() {
|
|
|
2807
2974
|
drainingRef.current = false;
|
|
2808
2975
|
}
|
|
2809
2976
|
}, [processOne]);
|
|
2810
|
-
const onMessage =
|
|
2977
|
+
const onMessage = useCallback7((msg) => {
|
|
2811
2978
|
const action = parsePageAction(msg.payload);
|
|
2812
2979
|
if (!action)
|
|
2813
2980
|
return;
|
|
2814
2981
|
queueRef.current.push(action);
|
|
2815
2982
|
drain();
|
|
2816
2983
|
}, [drain]);
|
|
2817
|
-
|
|
2984
|
+
useEffect10(() => {
|
|
2818
2985
|
mountedRef.current = true;
|
|
2819
2986
|
drainingRef.current = false;
|
|
2820
2987
|
return () => {
|
|
@@ -2833,15 +3000,15 @@ function PageActionHandler() {
|
|
|
2833
3000
|
};
|
|
2834
3001
|
}, []);
|
|
2835
3002
|
useDataChannel2(PAGE_ACTIONS_TOPIC, onMessage);
|
|
2836
|
-
return /* @__PURE__ */
|
|
3003
|
+
return /* @__PURE__ */ jsx7(AgentActivityIndicator, {
|
|
2837
3004
|
target: activity
|
|
2838
3005
|
});
|
|
2839
3006
|
}
|
|
2840
3007
|
|
|
2841
3008
|
// src/components/ShadowHost.tsx
|
|
2842
|
-
import { useLayoutEffect, useRef as useRef7, useState as
|
|
3009
|
+
import { useLayoutEffect, useRef as useRef7, useState as useState8 } from "react";
|
|
2843
3010
|
import { createPortal } from "react-dom";
|
|
2844
|
-
import { jsx as
|
|
3011
|
+
import { jsx as jsx8, Fragment as Fragment3 } from "react/jsx-runtime";
|
|
2845
3012
|
var PROPERTIES_STYLE_ID = "skippr-tw-properties";
|
|
2846
3013
|
var PROPERTY_RULE = /@property\s+[^{]+\{[^}]*\}/g;
|
|
2847
3014
|
function hoistTailwindProperties(css) {
|
|
@@ -2857,9 +3024,9 @@ function hoistTailwindProperties(css) {
|
|
|
2857
3024
|
}
|
|
2858
3025
|
function ShadowHost({ children }) {
|
|
2859
3026
|
const hostRef = useRef7(null);
|
|
2860
|
-
const [shadowRoot, setShadowRoot] =
|
|
3027
|
+
const [shadowRoot, setShadowRoot] = useState8(null);
|
|
2861
3028
|
const css = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
|
2862
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--skippr-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--skippr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--skippr-color-red-50:oklch(97.1% .013 17.38);--skippr-color-red-400:oklch(70.4% .191 22.216);--skippr-color-red-700:oklch(50.5% .213 27.518);--skippr-color-amber-400:oklch(82.8% .189 84.429);--skippr-color-emerald-400:oklch(76.5% .177 163.223);--skippr-color-cyan-400:oklch(78.9% .154 211.53);--skippr-color-cyan-500:oklch(71.5% .143 215.221);--skippr-color-cyan-900:oklch(39.8% .07 227.392);--skippr-color-white:#fff;--skippr-spacing:.25rem;--skippr-text-xs:.75rem;--skippr-text-xs--line-height:calc(1/.75);--skippr-text-sm:.875rem;--skippr-text-sm--line-height:calc(1.25/.875);--skippr-font-weight-medium:500;--skippr-font-weight-semibold:600;--skippr-tracking-wide:.025em;--skippr-tracking-wider:.05em;--skippr-leading-tight:1.25;--skippr-leading-snug:1.375;--skippr-leading-relaxed:1.625;--skippr-ease-in-out:cubic-bezier(.4,0,.2,1);--skippr-animate-spin:spin 1s linear infinite;--skippr-animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--skippr-animate-bounce:bounce 1s infinite;--skippr-blur-sm:8px;--skippr-default-transition-duration:.15s;--skippr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--skippr-default-font-family:var(--skippr-font-sans);--skippr-default-mono-font-family:var(--skippr-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--skippr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--skippr-default-font-feature-settings,normal);font-variation-settings:var(--skippr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--skippr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--skippr-default-mono-font-feature-settings,normal);font-variation-settings:var(--skippr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.skippr\\:pointer-events-none{pointer-events:none}.skippr\\:absolute{position:absolute}.skippr\\:fixed{position:fixed}.skippr\\:relative{position:relative}.skippr\\:sticky{position:sticky}.skippr\\:inset-0{inset:calc(var(--skippr-spacing)*0)}.skippr\\:top-0{top:calc(var(--skippr-spacing)*0)}.skippr\\:top-4{top:calc(var(--skippr-spacing)*4)}.skippr\\:top-full{top:100%}.skippr\\:right-0{right:calc(var(--skippr-spacing)*0)}.skippr\\:right-3{right:calc(var(--skippr-spacing)*3)}.skippr\\:right-5{right:calc(var(--skippr-spacing)*5)}.skippr\\:right-6{right:calc(var(--skippr-spacing)*6)}.skippr\\:-bottom-2{bottom:calc(var(--skippr-spacing)*-2)}.skippr\\:-bottom-9{bottom:calc(var(--skippr-spacing)*-9)}.skippr\\:bottom-0{bottom:calc(var(--skippr-spacing)*0)}.skippr\\:bottom-6{bottom:calc(var(--skippr-spacing)*6)}.skippr\\:bottom-20{bottom:calc(var(--skippr-spacing)*20)}.skippr\\:bottom-\\[88px\\]{bottom:88px}.skippr\\:bottom-full{bottom:100%}.skippr\\:left-0{left:calc(var(--skippr-spacing)*0)}.skippr\\:left-1\\/2{left:50%}.skippr\\:left-3{left:calc(var(--skippr-spacing)*3)}.skippr\\:left-5{left:calc(var(--skippr-spacing)*5)}.skippr\\:left-6{left:calc(var(--skippr-spacing)*6)}.skippr\\:z-10{z-index:10}.skippr\\:z-\\[9998\\]{z-index:9998}.skippr\\:z-\\[9999\\]{z-index:9999}.skippr\\:col-span-2{grid-column:span 2/span 2}.skippr\\:mx-auto{margin-inline:auto}.skippr\\:-mt-\\[5px\\]{margin-top:-5px}.skippr\\:mt-0\\.5{margin-top:calc(var(--skippr-spacing)*.5)}.skippr\\:mt-1{margin-top:calc(var(--skippr-spacing)*1)}.skippr\\:mt-1\\.5{margin-top:calc(var(--skippr-spacing)*1.5)}.skippr\\:mt-3{margin-top:calc(var(--skippr-spacing)*3)}.skippr\\:mb-1\\.5{margin-bottom:calc(var(--skippr-spacing)*1.5)}.skippr\\:mb-2{margin-bottom:calc(var(--skippr-spacing)*2)}.skippr\\:mb-3{margin-bottom:calc(var(--skippr-spacing)*3)}.skippr\\:mb-4{margin-bottom:calc(var(--skippr-spacing)*4)}.skippr\\:line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.skippr\\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.skippr\\:flex{display:flex}.skippr\\:grid{display:grid}.skippr\\:inline-flex{display:inline-flex}.skippr\\:size-1{width:calc(var(--skippr-spacing)*1);height:calc(var(--skippr-spacing)*1)}.skippr\\:size-1\\.5{width:calc(var(--skippr-spacing)*1.5);height:calc(var(--skippr-spacing)*1.5)}.skippr\\:size-2{width:calc(var(--skippr-spacing)*2);height:calc(var(--skippr-spacing)*2)}.skippr\\:size-2\\.5{width:calc(var(--skippr-spacing)*2.5);height:calc(var(--skippr-spacing)*2.5)}.skippr\\:size-3\\.5{width:calc(var(--skippr-spacing)*3.5);height:calc(var(--skippr-spacing)*3.5)}.skippr\\:size-4{width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}.skippr\\:size-5{width:calc(var(--skippr-spacing)*5);height:calc(var(--skippr-spacing)*5)}.skippr\\:size-6{width:calc(var(--skippr-spacing)*6);height:calc(var(--skippr-spacing)*6)}.skippr\\:size-7{width:calc(var(--skippr-spacing)*7);height:calc(var(--skippr-spacing)*7)}.skippr\\:size-8{width:calc(var(--skippr-spacing)*8);height:calc(var(--skippr-spacing)*8)}.skippr\\:size-9{width:calc(var(--skippr-spacing)*9);height:calc(var(--skippr-spacing)*9)}.skippr\\:size-10{width:calc(var(--skippr-spacing)*10);height:calc(var(--skippr-spacing)*10)}.skippr\\:size-11{width:calc(var(--skippr-spacing)*11);height:calc(var(--skippr-spacing)*11)}.skippr\\:size-12{width:calc(var(--skippr-spacing)*12);height:calc(var(--skippr-spacing)*12)}.skippr\\:size-full{width:100%;height:100%}.skippr\\:h-0{height:calc(var(--skippr-spacing)*0)}.skippr\\:h-0\\.5{height:calc(var(--skippr-spacing)*.5)}.skippr\\:h-1{height:calc(var(--skippr-spacing)*1)}.skippr\\:h-1\\.5{height:calc(var(--skippr-spacing)*1.5)}.skippr\\:h-2{height:calc(var(--skippr-spacing)*2)}.skippr\\:h-3{height:calc(var(--skippr-spacing)*3)}.skippr\\:h-3\\.5{height:calc(var(--skippr-spacing)*3.5)}.skippr\\:h-4{height:calc(var(--skippr-spacing)*4)}.skippr\\:h-5{height:calc(var(--skippr-spacing)*5)}.skippr\\:h-6{height:calc(var(--skippr-spacing)*6)}.skippr\\:h-8{height:calc(var(--skippr-spacing)*8)}.skippr\\:h-9{height:calc(var(--skippr-spacing)*9)}.skippr\\:h-10{height:calc(var(--skippr-spacing)*10)}.skippr\\:h-12{height:calc(var(--skippr-spacing)*12)}.skippr\\:h-\\[min\\(460px\\,calc\\(100vh-200px\\)\\)\\]{height:min(460px,100vh - 200px)}.skippr\\:h-full{height:100%}.skippr\\:min-h-0{min-height:calc(var(--skippr-spacing)*0)}.skippr\\:w-0{width:calc(var(--skippr-spacing)*0)}.skippr\\:w-3{width:calc(var(--skippr-spacing)*3)}.skippr\\:w-4{width:calc(var(--skippr-spacing)*4)}.skippr\\:w-5{width:calc(var(--skippr-spacing)*5)}.skippr\\:w-9{width:calc(var(--skippr-spacing)*9)}.skippr\\:w-10{width:calc(var(--skippr-spacing)*10)}.skippr\\:w-\\[2px\\]{width:2px}.skippr\\:w-full{width:100%}.skippr\\:max-w-64{max-width:calc(var(--skippr-spacing)*64)}.skippr\\:max-w-\\[80\\%\\]{max-width:80%}.skippr\\:min-w-0{min-width:calc(var(--skippr-spacing)*0)}.skippr\\:flex-1{flex:1}.skippr\\:shrink-0{flex-shrink:0}.skippr\\:origin-bottom-left{transform-origin:0 100%}.skippr\\:origin-bottom-right{transform-origin:100% 100%}.skippr\\:origin-center{transform-origin:50%}.skippr\\:-translate-x-1\\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:scale-0{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:rotate-\\[225deg\\]{rotate:225deg}.skippr\\:animate-\\[skippr-banner-look_2\\.4s_ease-in-out_infinite\\]{animation:2.4s ease-in-out infinite skippr-banner-look}.skippr\\:animate-\\[skippr-bubble-in_0\\.28s_ease-out\\]{animation:.28s ease-out skippr-bubble-in}.skippr\\:animate-\\[skippr-fade-in_0\\.3s_ease-out\\]{animation:.3s ease-out skippr-fade-in}.skippr\\:animate-\\[skippr-pill-content_0\\.22s_ease-out\\]{animation:.22s ease-out skippr-pill-content}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.3s_infinite\\]{animation:1.1s ease-in-out .3s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.6s_infinite\\]{animation:1.1s ease-in-out .6s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.15s_infinite\\]{animation:1.1s ease-in-out .15s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.45s_infinite\\]{animation:1.1s ease-in-out .45s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_infinite\\]{animation:1.1s ease-in-out infinite skippr-speak}.skippr\\:animate-bounce{animation:var(--skippr-animate-bounce)}.skippr\\:animate-ping{animation:var(--skippr-animate-ping)}.skippr\\:animate-skippr-annotation-pulse{animation:1.8s ease-in-out infinite skippr-annotation-pulse}.skippr\\:animate-skippr-press{animation:.5s ease-in-out skippr-press}.skippr\\:animate-skippr-tab-fade{animation:.2s ease-out skippr-tab-fade}.skippr\\:animate-skippr-thinking-dot{animation:1.2s ease-in-out infinite skippr-thinking-dot}.skippr\\:animate-spin{animation:var(--skippr-animate-spin)}.skippr\\:cursor-pointer{cursor:pointer}.skippr\\:resize-none{resize:none}.skippr\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.skippr\\:flex-col{flex-direction:column}.skippr\\:items-center{align-items:center}.skippr\\:items-end{align-items:flex-end}.skippr\\:items-start{align-items:flex-start}.skippr\\:justify-between{justify-content:space-between}.skippr\\:justify-center{justify-content:center}.skippr\\:justify-end{justify-content:flex-end}.skippr\\:gap-0\\.5{gap:calc(var(--skippr-spacing)*.5)}.skippr\\:gap-1{gap:calc(var(--skippr-spacing)*1)}.skippr\\:gap-1\\.5{gap:calc(var(--skippr-spacing)*1.5)}.skippr\\:gap-2{gap:calc(var(--skippr-spacing)*2)}.skippr\\:gap-2\\.5{gap:calc(var(--skippr-spacing)*2.5)}.skippr\\:gap-3{gap:calc(var(--skippr-spacing)*3)}.skippr\\:gap-\\[2px\\]{gap:2px}.skippr\\:gap-\\[3px\\]{gap:3px}:where(.skippr\\:space-y-0\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}.skippr\\:overflow-hidden{overflow:hidden}.skippr\\:overflow-y-auto{overflow-y:auto}.skippr\\:rounded-2xl{border-radius:1.125rem}.skippr\\:rounded-\\[1rem\\]{border-radius:1rem}.skippr\\:rounded-\\[10px\\]{border-radius:10px}.skippr\\:rounded-\\[14px\\]{border-radius:14px}.skippr\\:rounded-full{border-radius:3.40282e38px}.skippr\\:rounded-lg{border-radius:.625rem}.skippr\\:rounded-md{border-radius:.5rem}.skippr\\:rounded-sm{border-radius:.375rem}.skippr\\:rounded-xl{border-radius:.875rem}.skippr\\:border{border-style:var(--tw-border-style);border-width:1px}.skippr\\:border-0{border-style:var(--tw-border-style);border-width:0}.skippr\\:border-2{border-style:var(--tw-border-style);border-width:2px}.skippr\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.skippr\\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.skippr\\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.skippr\\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.skippr\\:border-border{border-color:oklch(92.3% .003 48.717)}.skippr\\:border-cyan-400{border-color:var(--skippr-color-cyan-400)}.skippr\\:border-destructive\\/20{border-color:oklab(61.4357% .15892 .0698893/.2)}.skippr\\:border-input{border-color:oklch(92.3% .003 48.717)}.skippr\\:border-primary\\/20{border-color:oklab(29.9244% .0107414 -.0305411/.2)}.skippr\\:border-r-border{border-right-color:oklch(92.3% .003 48.717)}.skippr\\:border-l-border{border-left-color:oklch(92.3% .003 48.717)}.skippr\\:bg-amber-400{background-color:var(--skippr-color-amber-400)}.skippr\\:bg-background{background-color:oklch(100% 0 0)}.skippr\\:bg-bubble{background-color:#2d2b3d}.skippr\\:bg-bubble\\/15{background-color:oklab(29.9244% .0107414 -.0305411/.15)}.skippr\\:bg-bubble\\/95{background-color:oklab(29.9244% .0107414 -.0305411/.95)}.skippr\\:bg-card{background-color:oklch(100% 0 0)}.skippr\\:bg-current{background-color:currentColor}.skippr\\:bg-cyan-400{background-color:var(--skippr-color-cyan-400)}.skippr\\:bg-cyan-500{background-color:var(--skippr-color-cyan-500)}.skippr\\:bg-destructive{background-color:#d94f4f}.skippr\\:bg-destructive\\/10{background-color:oklab(61.4357% .15892 .0698893/.1)}.skippr\\:bg-destructive\\/15{background-color:oklab(61.4357% .15892 .0698893/.15)}.skippr\\:bg-emerald-400{background-color:var(--skippr-color-emerald-400)}.skippr\\:bg-foreground{background-color:oklch(14.7% .004 49.25)}.skippr\\:bg-muted{background-color:oklch(97% .001 106.424)}.skippr\\:bg-muted-foreground\\/20{background-color:oklab(55.3% .00687528 .0110332/.2)}.skippr\\:bg-muted-foreground\\/40{background-color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:bg-muted\\/50{background-color:oklab(97% -.000282743 .000959196/.5)}.skippr\\:bg-primary{background-color:#2d2b3d}.skippr\\:bg-primary-foreground\\/15{background-color:oklab(100% 0 5.96046e-8/.15)}.skippr\\:bg-primary-foreground\\/20{background-color:oklab(100% 0 5.96046e-8/.2)}.skippr\\:bg-primary\\/10{background-color:oklab(29.9244% .0107414 -.0305411/.1)}.skippr\\:bg-red-50{background-color:var(--skippr-color-red-50)}.skippr\\:bg-red-400{background-color:var(--skippr-color-red-400)}.skippr\\:bg-secondary{background-color:#ffdfb5}.skippr\\:bg-transparent{background-color:#0000}.skippr\\:bg-white{background-color:var(--skippr-color-white)}.skippr\\:bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.skippr\\:from-background{--tw-gradient-from:oklch(100% 0 0);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.skippr\\:to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.skippr\\:fill-primary\\/30{fill:oklab(29.9244% .0107414 -.0305411/.3)}.skippr\\:p-2{padding:calc(var(--skippr-spacing)*2)}.skippr\\:p-3{padding:calc(var(--skippr-spacing)*3)}.skippr\\:p-3\\.5{padding:calc(var(--skippr-spacing)*3.5)}.skippr\\:p-4{padding:calc(var(--skippr-spacing)*4)}.skippr\\:p-6{padding:calc(var(--skippr-spacing)*6)}.skippr\\:px-1{padding-inline:calc(var(--skippr-spacing)*1)}.skippr\\:px-1\\.5{padding-inline:calc(var(--skippr-spacing)*1.5)}.skippr\\:px-2{padding-inline:calc(var(--skippr-spacing)*2)}.skippr\\:px-2\\.5{padding-inline:calc(var(--skippr-spacing)*2.5)}.skippr\\:px-3{padding-inline:calc(var(--skippr-spacing)*3)}.skippr\\:px-4{padding-inline:calc(var(--skippr-spacing)*4)}.skippr\\:px-6{padding-inline:calc(var(--skippr-spacing)*6)}.skippr\\:px-8{padding-inline:calc(var(--skippr-spacing)*8)}.skippr\\:py-0\\.5{padding-block:calc(var(--skippr-spacing)*.5)}.skippr\\:py-1{padding-block:calc(var(--skippr-spacing)*1)}.skippr\\:py-1\\.5{padding-block:calc(var(--skippr-spacing)*1.5)}.skippr\\:py-2{padding-block:calc(var(--skippr-spacing)*2)}.skippr\\:py-2\\.5{padding-block:calc(var(--skippr-spacing)*2.5)}.skippr\\:py-3{padding-block:calc(var(--skippr-spacing)*3)}.skippr\\:py-4{padding-block:calc(var(--skippr-spacing)*4)}.skippr\\:pt-3{padding-top:calc(var(--skippr-spacing)*3)}.skippr\\:pb-5{padding-bottom:calc(var(--skippr-spacing)*5)}.skippr\\:text-center{text-align:center}.skippr\\:text-left{text-align:left}.skippr\\:font-mono{font-family:var(--skippr-font-mono)}.skippr\\:text-sm{font-size:var(--skippr-text-sm);line-height:var(--tw-leading,var(--skippr-text-sm--line-height))}.skippr\\:text-xs{font-size:var(--skippr-text-xs);line-height:var(--tw-leading,var(--skippr-text-xs--line-height))}.skippr\\:text-\\[9px\\]{font-size:9px}.skippr\\:text-\\[10px\\]{font-size:10px}.skippr\\:text-\\[11px\\]{font-size:11px}.skippr\\:leading-5{--tw-leading:calc(var(--skippr-spacing)*5);line-height:calc(var(--skippr-spacing)*5)}.skippr\\:leading-relaxed{--tw-leading:var(--skippr-leading-relaxed);line-height:var(--skippr-leading-relaxed)}.skippr\\:leading-snug{--tw-leading:var(--skippr-leading-snug);line-height:var(--skippr-leading-snug)}.skippr\\:leading-tight{--tw-leading:var(--skippr-leading-tight);line-height:var(--skippr-leading-tight)}.skippr\\:font-medium{--tw-font-weight:var(--skippr-font-weight-medium);font-weight:var(--skippr-font-weight-medium)}.skippr\\:font-semibold{--tw-font-weight:var(--skippr-font-weight-semibold);font-weight:var(--skippr-font-weight-semibold)}.skippr\\:tracking-wide{--tw-tracking:var(--skippr-tracking-wide);letter-spacing:var(--skippr-tracking-wide)}.skippr\\:tracking-wider{--tw-tracking:var(--skippr-tracking-wider);letter-spacing:var(--skippr-tracking-wider)}.skippr\\:whitespace-nowrap{white-space:nowrap}.skippr\\:text-background{color:oklch(100% 0 0)}.skippr\\:text-bubble{color:#2d2b3d}.skippr\\:text-chart-3{color:oklch(66.6% .179 58.318)}.skippr\\:text-cyan-500{color:var(--skippr-color-cyan-500)}.skippr\\:text-cyan-900{color:var(--skippr-color-cyan-900)}.skippr\\:text-destructive{color:#d94f4f}.skippr\\:text-destructive-foreground{color:oklch(100% 0 0)}.skippr\\:text-foreground{color:oklch(14.7% .004 49.25)}.skippr\\:text-muted-foreground{color:oklch(55.3% .013 58.071)}.skippr\\:text-muted-foreground\\/30{color:oklab(55.3% .00687528 .0110332/.3)}.skippr\\:text-muted-foreground\\/40{color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:text-muted-foreground\\/60{color:oklab(55.3% .00687528 .0110332/.6)}.skippr\\:text-muted-foreground\\/70{color:oklab(55.3% .00687528 .0110332/.7)}.skippr\\:text-primary{color:#2d2b3d}.skippr\\:text-primary-foreground{color:#fff}.skippr\\:text-primary-foreground\\/70{color:oklab(100% 0 5.96046e-8/.7)}.skippr\\:text-red-700{color:var(--skippr-color-red-700)}.skippr\\:text-secondary-foreground{color:#613700}.skippr\\:text-white{color:var(--skippr-color-white)}.skippr\\:uppercase{text-transform:uppercase}.skippr\\:line-through{text-decoration-line:line-through}.skippr\\:placeholder-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}.skippr\\:opacity-0{opacity:0}.skippr\\:opacity-75{opacity:.75}.skippr\\:opacity-100{opacity:1}.skippr\\:shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.12\\)\\]{--tw-shadow:0 4px 12px var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 4px 12px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_16px_rgba\\(0\\,0\\,0\\,0\\.15\\)\\,0_2px_4px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow:0 4px 16px var(--tw-shadow-color,#00000026),0 2px 4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_16px_rgba\\(45\\,43\\,61\\,0\\.45\\)\\,0_2px_4px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow:0 4px 16px var(--tw-shadow-color,#2d2b3d73),0 2px 4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_16px_rgba\\(217\\,79\\,79\\,0\\.45\\)\\,0_2px_4px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow:0 4px 16px var(--tw-shadow-color,#d94f4f73),0 2px 4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_24px_rgba\\(45\\,43\\,61\\,0\\.35\\)\\]{--tw-shadow:0 8px 24px var(--tw-shadow-color,#2d2b3d59);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_30px_rgba\\(0\\,0\\,0\\,0\\.16\\)\\,0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\]{--tw-shadow:0 8px 30px var(--tw-shadow-color,#00000029),0 4px 12px var(--tw-shadow-color,#00000014);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:ring-foreground\\/10{--tw-ring-color:oklab(14.7% .00261104 .00303026/.1)}.skippr\\:ring-offset-background{--tw-ring-offset-color:oklch(100% 0 0)}.skippr\\:drop-shadow-\\[0_1px_3px_rgba\\(0\\,0\\,0\\,0\\.35\\)\\]{--tw-drop-shadow-size:drop-shadow(0 1px 3px var(--tw-drop-shadow-color,#00000059));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.skippr\\:backdrop-blur-sm{--tw-backdrop-blur:blur(var(--skippr-blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.skippr\\:transition-\\[opacity\\,transform\\]{transition-property:opacity,transform;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-\\[width\\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:duration-150{--tw-duration:.15s;transition-duration:.15s}.skippr\\:duration-300{--tw-duration:.3s;transition-duration:.3s}.skippr\\:ease-in-out{--tw-ease:var(--skippr-ease-in-out);transition-timing-function:var(--skippr-ease-in-out)}.skippr\\:outline-none{--tw-outline-style:none;outline-style:none}.skippr\\:\\[animation-delay\\:0ms\\]{animation-delay:0s}.skippr\\:\\[animation-delay\\:150ms\\]{animation-delay:.15s}.skippr\\:\\[animation-delay\\:200ms\\]{animation-delay:.2s}.skippr\\:\\[animation-delay\\:300ms\\]{animation-delay:.3s}.skippr\\:\\[animation-delay\\:400ms\\]{animation-delay:.4s}.skippr\\:group-focus-within\\:scale-100:is(:where(.skippr\\:group):focus-within *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-focus-within\\:opacity-100:is(:where(.skippr\\:group):focus-within *){opacity:1}@media (hover:hover){.skippr\\:group-hover\\:scale-100:is(:where(.skippr\\:group):hover *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-hover\\:opacity-100:is(:where(.skippr\\:group):hover *){opacity:1}}.skippr\\:placeholder\\:text-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}@media (hover:hover){.skippr\\:hover\\:-translate-y-0\\.5:hover{--tw-translate-y:calc(var(--skippr-spacing)*-.5);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:hover\\:bg-accent:hover{background-color:#e7e5e4}.skippr\\:hover\\:bg-bubble:hover{background-color:#2d2b3d}.skippr\\:hover\\:bg-destructive\\/20:hover{background-color:oklab(61.4357% .15892 .0698893/.2)}.skippr\\:hover\\:bg-destructive\\/25:hover{background-color:oklab(61.4357% .15892 .0698893/.25)}.skippr\\:hover\\:bg-destructive\\/90:hover{background-color:oklab(61.4357% .15892 .0698893/.9)}.skippr\\:hover\\:bg-muted:hover{background-color:oklch(97% .001 106.424)}.skippr\\:hover\\:bg-muted\\/50:hover{background-color:oklab(97% -.000282743 .000959196/.5)}.skippr\\:hover\\:bg-muted\\/80:hover{background-color:oklab(97% -.000282743 .000959196/.8)}.skippr\\:hover\\:bg-primary-foreground\\/10:hover{background-color:oklab(100% 0 5.96046e-8/.1)}.skippr\\:hover\\:bg-primary\\/90:hover{background-color:oklab(29.9244% .0107414 -.0305411/.9)}.skippr\\:hover\\:bg-secondary\\/80:hover{background-color:oklab(91.9963% .0175391 .0626889/.8)}.skippr\\:hover\\:text-accent-foreground:hover{color:oklch(21.6% .006 56.043)}.skippr\\:hover\\:text-foreground:hover{color:oklch(14.7% .004 49.25)}.skippr\\:hover\\:text-primary-foreground:hover{color:#fff}.skippr\\:hover\\:shadow-\\[0_6px_24px_rgba\\(45\\,43\\,61\\,0\\.55\\)\\,0_4px_8px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]:hover{--tw-shadow:0 6px 24px var(--tw-shadow-color,#2d2b3d8c),0 4px 8px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:hover\\:brightness-110:hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}.skippr\\:focus-visible\\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:focus-visible\\:ring-ring:focus-visible{--tw-ring-color:oklch(70.9% .01 56.259)}.skippr\\:focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.skippr\\:focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.skippr\\:active\\:translate-y-0:active{--tw-translate-y:calc(var(--skippr-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:disabled\\:pointer-events-none:disabled{pointer-events:none}.skippr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.skippr\\:disabled\\:opacity-50:disabled{opacity:.5}.skippr\\:disabled\\:opacity-60:disabled{opacity:.6}.skippr\\:\\[\\&_svg\\]\\:pointer-events-none svg{pointer-events:none}.skippr\\:\\[\\&_svg\\]\\:shrink-0 svg{flex-shrink:0}.skippr\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 svg:not([class*=size-]){width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}}@keyframes skippr-tap{0%{transform:scale(1)}45%{transform:scale(.7)}to{transform:scale(1)}}@keyframes skippr-press{0%{transform:scale(1)}55%{transform:scale(1)}85%{transform:scale(.68)}to{transform:scale(1)}}@keyframes skippr-tab-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-speak{0%,to{opacity:.6;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-thinking-dot{0%,80%,to{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}@keyframes skippr-pulse-ring{0%,to{box-shadow:0 0 #2d2b3d66}50%{box-shadow:0 0 0 10px #2d2b3d00}}@keyframes skippr-annotation-pulse{0%,to{box-shadow:0 0 #22d3ee73}50%{box-shadow:0 0 0 10px #22d3ee00}}@keyframes skippr-speak-ripple{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}@keyframes skippr-bar{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}@keyframes skippr-breathe{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes skippr-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-wave{0%,to{opacity:.4;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-bubble-in{0%{opacity:0;transform:translateY(12px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes skippr-pill-content{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes skippr-banner-look{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.skippr-no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.skippr-no-scrollbar::-webkit-scrollbar{display:none}:host{color:var(--color-foreground)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}`;
|
|
3029
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--skippr-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--skippr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--skippr-color-red-50:oklch(97.1% .013 17.38);--skippr-color-red-400:oklch(70.4% .191 22.216);--skippr-color-red-700:oklch(50.5% .213 27.518);--skippr-color-amber-400:oklch(82.8% .189 84.429);--skippr-color-emerald-400:oklch(76.5% .177 163.223);--skippr-color-cyan-400:oklch(78.9% .154 211.53);--skippr-color-cyan-500:oklch(71.5% .143 215.221);--skippr-color-cyan-900:oklch(39.8% .07 227.392);--skippr-color-white:#fff;--skippr-spacing:.25rem;--skippr-text-xs:.75rem;--skippr-text-xs--line-height:calc(1/.75);--skippr-text-sm:.875rem;--skippr-text-sm--line-height:calc(1.25/.875);--skippr-font-weight-medium:500;--skippr-font-weight-semibold:600;--skippr-tracking-wide:.025em;--skippr-tracking-wider:.05em;--skippr-leading-tight:1.25;--skippr-leading-snug:1.375;--skippr-leading-relaxed:1.625;--skippr-ease-in-out:cubic-bezier(.4,0,.2,1);--skippr-animate-spin:spin 1s linear infinite;--skippr-animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--skippr-animate-bounce:bounce 1s infinite;--skippr-blur-sm:8px;--skippr-default-transition-duration:.15s;--skippr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--skippr-default-font-family:var(--skippr-font-sans);--skippr-default-mono-font-family:var(--skippr-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--skippr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--skippr-default-font-feature-settings,normal);font-variation-settings:var(--skippr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--skippr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--skippr-default-mono-font-feature-settings,normal);font-variation-settings:var(--skippr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.skippr\\:pointer-events-none{pointer-events:none}.skippr\\:absolute{position:absolute}.skippr\\:fixed{position:fixed}.skippr\\:relative{position:relative}.skippr\\:sticky{position:sticky}.skippr\\:inset-0{inset:calc(var(--skippr-spacing)*0)}.skippr\\:top-0{top:calc(var(--skippr-spacing)*0)}.skippr\\:top-4{top:calc(var(--skippr-spacing)*4)}.skippr\\:top-full{top:100%}.skippr\\:right-0{right:calc(var(--skippr-spacing)*0)}.skippr\\:right-3{right:calc(var(--skippr-spacing)*3)}.skippr\\:right-5{right:calc(var(--skippr-spacing)*5)}.skippr\\:right-6{right:calc(var(--skippr-spacing)*6)}.skippr\\:-bottom-2{bottom:calc(var(--skippr-spacing)*-2)}.skippr\\:-bottom-9{bottom:calc(var(--skippr-spacing)*-9)}.skippr\\:bottom-0{bottom:calc(var(--skippr-spacing)*0)}.skippr\\:bottom-6{bottom:calc(var(--skippr-spacing)*6)}.skippr\\:bottom-20{bottom:calc(var(--skippr-spacing)*20)}.skippr\\:bottom-\\[88px\\]{bottom:88px}.skippr\\:bottom-full{bottom:100%}.skippr\\:left-0{left:calc(var(--skippr-spacing)*0)}.skippr\\:left-1\\/2{left:50%}.skippr\\:left-3{left:calc(var(--skippr-spacing)*3)}.skippr\\:left-5{left:calc(var(--skippr-spacing)*5)}.skippr\\:left-6{left:calc(var(--skippr-spacing)*6)}.skippr\\:z-10{z-index:10}.skippr\\:z-\\[9998\\]{z-index:9998}.skippr\\:z-\\[9999\\]{z-index:9999}.skippr\\:col-span-2{grid-column:span 2/span 2}.skippr\\:mx-auto{margin-inline:auto}.skippr\\:-mt-\\[5px\\]{margin-top:-5px}.skippr\\:mt-0\\.5{margin-top:calc(var(--skippr-spacing)*.5)}.skippr\\:mt-1{margin-top:calc(var(--skippr-spacing)*1)}.skippr\\:mt-1\\.5{margin-top:calc(var(--skippr-spacing)*1.5)}.skippr\\:mt-3{margin-top:calc(var(--skippr-spacing)*3)}.skippr\\:mb-1\\.5{margin-bottom:calc(var(--skippr-spacing)*1.5)}.skippr\\:mb-2{margin-bottom:calc(var(--skippr-spacing)*2)}.skippr\\:mb-3{margin-bottom:calc(var(--skippr-spacing)*3)}.skippr\\:mb-4{margin-bottom:calc(var(--skippr-spacing)*4)}.skippr\\:line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.skippr\\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.skippr\\:flex{display:flex}.skippr\\:grid{display:grid}.skippr\\:inline-flex{display:inline-flex}.skippr\\:size-1{width:calc(var(--skippr-spacing)*1);height:calc(var(--skippr-spacing)*1)}.skippr\\:size-1\\.5{width:calc(var(--skippr-spacing)*1.5);height:calc(var(--skippr-spacing)*1.5)}.skippr\\:size-2{width:calc(var(--skippr-spacing)*2);height:calc(var(--skippr-spacing)*2)}.skippr\\:size-2\\.5{width:calc(var(--skippr-spacing)*2.5);height:calc(var(--skippr-spacing)*2.5)}.skippr\\:size-3\\.5{width:calc(var(--skippr-spacing)*3.5);height:calc(var(--skippr-spacing)*3.5)}.skippr\\:size-4{width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}.skippr\\:size-5{width:calc(var(--skippr-spacing)*5);height:calc(var(--skippr-spacing)*5)}.skippr\\:size-6{width:calc(var(--skippr-spacing)*6);height:calc(var(--skippr-spacing)*6)}.skippr\\:size-7{width:calc(var(--skippr-spacing)*7);height:calc(var(--skippr-spacing)*7)}.skippr\\:size-8{width:calc(var(--skippr-spacing)*8);height:calc(var(--skippr-spacing)*8)}.skippr\\:size-9{width:calc(var(--skippr-spacing)*9);height:calc(var(--skippr-spacing)*9)}.skippr\\:size-10{width:calc(var(--skippr-spacing)*10);height:calc(var(--skippr-spacing)*10)}.skippr\\:size-11{width:calc(var(--skippr-spacing)*11);height:calc(var(--skippr-spacing)*11)}.skippr\\:size-12{width:calc(var(--skippr-spacing)*12);height:calc(var(--skippr-spacing)*12)}.skippr\\:size-full{width:100%;height:100%}.skippr\\:h-0{height:calc(var(--skippr-spacing)*0)}.skippr\\:h-0\\.5{height:calc(var(--skippr-spacing)*.5)}.skippr\\:h-1{height:calc(var(--skippr-spacing)*1)}.skippr\\:h-1\\.5{height:calc(var(--skippr-spacing)*1.5)}.skippr\\:h-2{height:calc(var(--skippr-spacing)*2)}.skippr\\:h-3{height:calc(var(--skippr-spacing)*3)}.skippr\\:h-3\\.5{height:calc(var(--skippr-spacing)*3.5)}.skippr\\:h-4{height:calc(var(--skippr-spacing)*4)}.skippr\\:h-5{height:calc(var(--skippr-spacing)*5)}.skippr\\:h-6{height:calc(var(--skippr-spacing)*6)}.skippr\\:h-8{height:calc(var(--skippr-spacing)*8)}.skippr\\:h-9{height:calc(var(--skippr-spacing)*9)}.skippr\\:h-10{height:calc(var(--skippr-spacing)*10)}.skippr\\:h-12{height:calc(var(--skippr-spacing)*12)}.skippr\\:h-\\[min\\(460px\\,calc\\(100vh-200px\\)\\)\\]{height:min(460px,100vh - 200px)}.skippr\\:h-full{height:100%}.skippr\\:min-h-0{min-height:calc(var(--skippr-spacing)*0)}.skippr\\:w-0{width:calc(var(--skippr-spacing)*0)}.skippr\\:w-3{width:calc(var(--skippr-spacing)*3)}.skippr\\:w-4{width:calc(var(--skippr-spacing)*4)}.skippr\\:w-5{width:calc(var(--skippr-spacing)*5)}.skippr\\:w-9{width:calc(var(--skippr-spacing)*9)}.skippr\\:w-10{width:calc(var(--skippr-spacing)*10)}.skippr\\:w-\\[2px\\]{width:2px}.skippr\\:w-full{width:100%}.skippr\\:max-w-64{max-width:calc(var(--skippr-spacing)*64)}.skippr\\:max-w-72{max-width:calc(var(--skippr-spacing)*72)}.skippr\\:max-w-\\[80\\%\\]{max-width:80%}.skippr\\:min-w-0{min-width:calc(var(--skippr-spacing)*0)}.skippr\\:flex-1{flex:1}.skippr\\:shrink-0{flex-shrink:0}.skippr\\:origin-bottom-left{transform-origin:0 100%}.skippr\\:origin-bottom-right{transform-origin:100% 100%}.skippr\\:origin-center{transform-origin:50%}.skippr\\:-translate-x-1\\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:scale-0{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:rotate-\\[225deg\\]{rotate:225deg}.skippr\\:animate-\\[skippr-banner-look_2\\.4s_ease-in-out_infinite\\]{animation:2.4s ease-in-out infinite skippr-banner-look}.skippr\\:animate-\\[skippr-bubble-in_0\\.28s_ease-out\\]{animation:.28s ease-out skippr-bubble-in}.skippr\\:animate-\\[skippr-fade-in_0\\.3s_ease-out\\]{animation:.3s ease-out skippr-fade-in}.skippr\\:animate-\\[skippr-pill-content_0\\.22s_ease-out\\]{animation:.22s ease-out skippr-pill-content}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.3s_infinite\\]{animation:1.1s ease-in-out .3s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.6s_infinite\\]{animation:1.1s ease-in-out .6s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.15s_infinite\\]{animation:1.1s ease-in-out .15s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.45s_infinite\\]{animation:1.1s ease-in-out .45s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_infinite\\]{animation:1.1s ease-in-out infinite skippr-speak}.skippr\\:animate-bounce{animation:var(--skippr-animate-bounce)}.skippr\\:animate-ping{animation:var(--skippr-animate-ping)}.skippr\\:animate-skippr-annotation-pulse{animation:1.8s ease-in-out infinite skippr-annotation-pulse}.skippr\\:animate-skippr-press{animation:.5s ease-in-out skippr-press}.skippr\\:animate-skippr-tab-fade{animation:.2s ease-out skippr-tab-fade}.skippr\\:animate-skippr-thinking-dot{animation:1.2s ease-in-out infinite skippr-thinking-dot}.skippr\\:animate-spin{animation:var(--skippr-animate-spin)}.skippr\\:cursor-pointer{cursor:pointer}.skippr\\:resize-none{resize:none}.skippr\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.skippr\\:flex-col{flex-direction:column}.skippr\\:items-center{align-items:center}.skippr\\:items-end{align-items:flex-end}.skippr\\:items-start{align-items:flex-start}.skippr\\:justify-between{justify-content:space-between}.skippr\\:justify-center{justify-content:center}.skippr\\:justify-end{justify-content:flex-end}.skippr\\:gap-0\\.5{gap:calc(var(--skippr-spacing)*.5)}.skippr\\:gap-1{gap:calc(var(--skippr-spacing)*1)}.skippr\\:gap-1\\.5{gap:calc(var(--skippr-spacing)*1.5)}.skippr\\:gap-2{gap:calc(var(--skippr-spacing)*2)}.skippr\\:gap-2\\.5{gap:calc(var(--skippr-spacing)*2.5)}.skippr\\:gap-3{gap:calc(var(--skippr-spacing)*3)}.skippr\\:gap-\\[2px\\]{gap:2px}.skippr\\:gap-\\[3px\\]{gap:3px}:where(.skippr\\:space-y-0\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}.skippr\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.skippr\\:overflow-hidden{overflow:hidden}.skippr\\:overflow-y-auto{overflow-y:auto}.skippr\\:rounded-2xl{border-radius:1.125rem}.skippr\\:rounded-\\[1rem\\]{border-radius:1rem}.skippr\\:rounded-\\[10px\\]{border-radius:10px}.skippr\\:rounded-\\[14px\\]{border-radius:14px}.skippr\\:rounded-full{border-radius:3.40282e38px}.skippr\\:rounded-lg{border-radius:.625rem}.skippr\\:rounded-md{border-radius:.5rem}.skippr\\:rounded-sm{border-radius:.375rem}.skippr\\:rounded-xl{border-radius:.875rem}.skippr\\:border{border-style:var(--tw-border-style);border-width:1px}.skippr\\:border-0{border-style:var(--tw-border-style);border-width:0}.skippr\\:border-2{border-style:var(--tw-border-style);border-width:2px}.skippr\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.skippr\\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.skippr\\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.skippr\\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.skippr\\:border-border{border-color:oklch(92.3% .003 48.717)}.skippr\\:border-cyan-400{border-color:var(--skippr-color-cyan-400)}.skippr\\:border-destructive\\/20{border-color:oklab(61.4357% .15892 .0698893/.2)}.skippr\\:border-input{border-color:oklch(92.3% .003 48.717)}.skippr\\:border-primary\\/20{border-color:oklab(29.9244% .0107414 -.0305411/.2)}.skippr\\:border-r-border{border-right-color:oklch(92.3% .003 48.717)}.skippr\\:border-l-border{border-left-color:oklch(92.3% .003 48.717)}.skippr\\:bg-amber-400{background-color:var(--skippr-color-amber-400)}.skippr\\:bg-background{background-color:oklch(100% 0 0)}.skippr\\:bg-bubble{background-color:#2d2b3d}.skippr\\:bg-bubble\\/15{background-color:oklab(29.9244% .0107414 -.0305411/.15)}.skippr\\:bg-bubble\\/95{background-color:oklab(29.9244% .0107414 -.0305411/.95)}.skippr\\:bg-card{background-color:oklch(100% 0 0)}.skippr\\:bg-current{background-color:currentColor}.skippr\\:bg-cyan-400{background-color:var(--skippr-color-cyan-400)}.skippr\\:bg-cyan-500{background-color:var(--skippr-color-cyan-500)}.skippr\\:bg-destructive{background-color:#d94f4f}.skippr\\:bg-destructive\\/10{background-color:oklab(61.4357% .15892 .0698893/.1)}.skippr\\:bg-destructive\\/15{background-color:oklab(61.4357% .15892 .0698893/.15)}.skippr\\:bg-emerald-400{background-color:var(--skippr-color-emerald-400)}.skippr\\:bg-foreground{background-color:oklch(14.7% .004 49.25)}.skippr\\:bg-muted{background-color:oklch(97% .001 106.424)}.skippr\\:bg-muted-foreground\\/20{background-color:oklab(55.3% .00687528 .0110332/.2)}.skippr\\:bg-muted-foreground\\/40{background-color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:bg-muted\\/50{background-color:oklab(97% -.000282743 .000959196/.5)}.skippr\\:bg-primary{background-color:#2d2b3d}.skippr\\:bg-primary-foreground\\/15{background-color:oklab(100% 0 5.96046e-8/.15)}.skippr\\:bg-primary-foreground\\/20{background-color:oklab(100% 0 5.96046e-8/.2)}.skippr\\:bg-primary\\/10{background-color:oklab(29.9244% .0107414 -.0305411/.1)}.skippr\\:bg-red-50{background-color:var(--skippr-color-red-50)}.skippr\\:bg-red-400{background-color:var(--skippr-color-red-400)}.skippr\\:bg-secondary{background-color:#ffdfb5}.skippr\\:bg-transparent{background-color:#0000}.skippr\\:bg-white{background-color:var(--skippr-color-white)}.skippr\\:bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.skippr\\:from-background{--tw-gradient-from:oklch(100% 0 0);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.skippr\\:to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.skippr\\:fill-primary\\/30{fill:oklab(29.9244% .0107414 -.0305411/.3)}.skippr\\:p-2{padding:calc(var(--skippr-spacing)*2)}.skippr\\:p-3{padding:calc(var(--skippr-spacing)*3)}.skippr\\:p-3\\.5{padding:calc(var(--skippr-spacing)*3.5)}.skippr\\:p-4{padding:calc(var(--skippr-spacing)*4)}.skippr\\:p-6{padding:calc(var(--skippr-spacing)*6)}.skippr\\:px-1{padding-inline:calc(var(--skippr-spacing)*1)}.skippr\\:px-1\\.5{padding-inline:calc(var(--skippr-spacing)*1.5)}.skippr\\:px-2{padding-inline:calc(var(--skippr-spacing)*2)}.skippr\\:px-2\\.5{padding-inline:calc(var(--skippr-spacing)*2.5)}.skippr\\:px-3{padding-inline:calc(var(--skippr-spacing)*3)}.skippr\\:px-4{padding-inline:calc(var(--skippr-spacing)*4)}.skippr\\:px-6{padding-inline:calc(var(--skippr-spacing)*6)}.skippr\\:px-8{padding-inline:calc(var(--skippr-spacing)*8)}.skippr\\:py-0\\.5{padding-block:calc(var(--skippr-spacing)*.5)}.skippr\\:py-1{padding-block:calc(var(--skippr-spacing)*1)}.skippr\\:py-1\\.5{padding-block:calc(var(--skippr-spacing)*1.5)}.skippr\\:py-2{padding-block:calc(var(--skippr-spacing)*2)}.skippr\\:py-2\\.5{padding-block:calc(var(--skippr-spacing)*2.5)}.skippr\\:py-3{padding-block:calc(var(--skippr-spacing)*3)}.skippr\\:py-4{padding-block:calc(var(--skippr-spacing)*4)}.skippr\\:pt-3{padding-top:calc(var(--skippr-spacing)*3)}.skippr\\:pr-1\\.5{padding-right:calc(var(--skippr-spacing)*1.5)}.skippr\\:pb-5{padding-bottom:calc(var(--skippr-spacing)*5)}.skippr\\:pl-3\\.5{padding-left:calc(var(--skippr-spacing)*3.5)}.skippr\\:text-center{text-align:center}.skippr\\:text-left{text-align:left}.skippr\\:font-mono{font-family:var(--skippr-font-mono)}.skippr\\:text-sm{font-size:var(--skippr-text-sm);line-height:var(--tw-leading,var(--skippr-text-sm--line-height))}.skippr\\:text-xs{font-size:var(--skippr-text-xs);line-height:var(--tw-leading,var(--skippr-text-xs--line-height))}.skippr\\:text-\\[9px\\]{font-size:9px}.skippr\\:text-\\[10px\\]{font-size:10px}.skippr\\:text-\\[11px\\]{font-size:11px}.skippr\\:leading-5{--tw-leading:calc(var(--skippr-spacing)*5);line-height:calc(var(--skippr-spacing)*5)}.skippr\\:leading-relaxed{--tw-leading:var(--skippr-leading-relaxed);line-height:var(--skippr-leading-relaxed)}.skippr\\:leading-snug{--tw-leading:var(--skippr-leading-snug);line-height:var(--skippr-leading-snug)}.skippr\\:leading-tight{--tw-leading:var(--skippr-leading-tight);line-height:var(--skippr-leading-tight)}.skippr\\:font-medium{--tw-font-weight:var(--skippr-font-weight-medium);font-weight:var(--skippr-font-weight-medium)}.skippr\\:font-semibold{--tw-font-weight:var(--skippr-font-weight-semibold);font-weight:var(--skippr-font-weight-semibold)}.skippr\\:tracking-wide{--tw-tracking:var(--skippr-tracking-wide);letter-spacing:var(--skippr-tracking-wide)}.skippr\\:tracking-wider{--tw-tracking:var(--skippr-tracking-wider);letter-spacing:var(--skippr-tracking-wider)}.skippr\\:whitespace-nowrap{white-space:nowrap}.skippr\\:text-background{color:oklch(100% 0 0)}.skippr\\:text-bubble{color:#2d2b3d}.skippr\\:text-chart-3{color:oklch(66.6% .179 58.318)}.skippr\\:text-cyan-500{color:var(--skippr-color-cyan-500)}.skippr\\:text-cyan-900{color:var(--skippr-color-cyan-900)}.skippr\\:text-destructive{color:#d94f4f}.skippr\\:text-destructive-foreground{color:oklch(100% 0 0)}.skippr\\:text-foreground{color:oklch(14.7% .004 49.25)}.skippr\\:text-muted-foreground{color:oklch(55.3% .013 58.071)}.skippr\\:text-muted-foreground\\/30{color:oklab(55.3% .00687528 .0110332/.3)}.skippr\\:text-muted-foreground\\/40{color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:text-muted-foreground\\/60{color:oklab(55.3% .00687528 .0110332/.6)}.skippr\\:text-muted-foreground\\/70{color:oklab(55.3% .00687528 .0110332/.7)}.skippr\\:text-primary{color:#2d2b3d}.skippr\\:text-primary-foreground{color:#fff}.skippr\\:text-primary-foreground\\/70{color:oklab(100% 0 5.96046e-8/.7)}.skippr\\:text-red-700{color:var(--skippr-color-red-700)}.skippr\\:text-secondary-foreground{color:#613700}.skippr\\:text-white,.skippr\\:text-white\\/70{color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:text-white\\/70{color:color-mix(in oklab,var(--skippr-color-white)70%,transparent)}}.skippr\\:uppercase{text-transform:uppercase}.skippr\\:line-through{text-decoration-line:line-through}.skippr\\:placeholder-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}.skippr\\:opacity-0{opacity:0}.skippr\\:opacity-75{opacity:.75}.skippr\\:opacity-100{opacity:1}.skippr\\:shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.12\\)\\]{--tw-shadow:0 4px 12px var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 4px 12px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_16px_rgba\\(0\\,0\\,0\\,0\\.15\\)\\,0_2px_4px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow:0 4px 16px var(--tw-shadow-color,#00000026),0 2px 4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_16px_rgba\\(45\\,43\\,61\\,0\\.45\\)\\,0_2px_4px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow:0 4px 16px var(--tw-shadow-color,#2d2b3d73),0 2px 4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_16px_rgba\\(217\\,79\\,79\\,0\\.45\\)\\,0_2px_4px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow:0 4px 16px var(--tw-shadow-color,#d94f4f73),0 2px 4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_24px_rgba\\(45\\,43\\,61\\,0\\.35\\)\\]{--tw-shadow:0 8px 24px var(--tw-shadow-color,#2d2b3d59);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_30px_rgba\\(0\\,0\\,0\\,0\\.16\\)\\,0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\]{--tw-shadow:0 8px 30px var(--tw-shadow-color,#00000029),0 4px 12px var(--tw-shadow-color,#00000014);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:ring-foreground\\/10{--tw-ring-color:oklab(14.7% .00261104 .00303026/.1)}.skippr\\:ring-offset-background{--tw-ring-offset-color:oklch(100% 0 0)}.skippr\\:drop-shadow-\\[0_1px_3px_rgba\\(0\\,0\\,0\\,0\\.35\\)\\]{--tw-drop-shadow-size:drop-shadow(0 1px 3px var(--tw-drop-shadow-color,#00000059));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.skippr\\:backdrop-blur-sm{--tw-backdrop-blur:blur(var(--skippr-blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.skippr\\:transition-\\[opacity\\,transform\\]{transition-property:opacity,transform;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-\\[width\\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:duration-150{--tw-duration:.15s;transition-duration:.15s}.skippr\\:duration-300{--tw-duration:.3s;transition-duration:.3s}.skippr\\:ease-in-out{--tw-ease:var(--skippr-ease-in-out);transition-timing-function:var(--skippr-ease-in-out)}.skippr\\:outline-none{--tw-outline-style:none;outline-style:none}.skippr\\:\\[animation-delay\\:0ms\\]{animation-delay:0s}.skippr\\:\\[animation-delay\\:150ms\\]{animation-delay:.15s}.skippr\\:\\[animation-delay\\:200ms\\]{animation-delay:.2s}.skippr\\:\\[animation-delay\\:300ms\\]{animation-delay:.3s}.skippr\\:\\[animation-delay\\:400ms\\]{animation-delay:.4s}.skippr\\:group-focus-within\\:scale-100:is(:where(.skippr\\:group):focus-within *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-focus-within\\:opacity-100:is(:where(.skippr\\:group):focus-within *){opacity:1}@media (hover:hover){.skippr\\:group-hover\\:scale-100:is(:where(.skippr\\:group):hover *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-hover\\:opacity-100:is(:where(.skippr\\:group):hover *){opacity:1}}.skippr\\:placeholder\\:text-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}@media (hover:hover){.skippr\\:hover\\:-translate-y-0\\.5:hover{--tw-translate-y:calc(var(--skippr-spacing)*-.5);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:hover\\:bg-accent:hover{background-color:#e7e5e4}.skippr\\:hover\\:bg-bubble:hover{background-color:#2d2b3d}.skippr\\:hover\\:bg-destructive\\/20:hover{background-color:oklab(61.4357% .15892 .0698893/.2)}.skippr\\:hover\\:bg-destructive\\/25:hover{background-color:oklab(61.4357% .15892 .0698893/.25)}.skippr\\:hover\\:bg-destructive\\/90:hover{background-color:oklab(61.4357% .15892 .0698893/.9)}.skippr\\:hover\\:bg-muted:hover{background-color:oklch(97% .001 106.424)}.skippr\\:hover\\:bg-muted\\/50:hover{background-color:oklab(97% -.000282743 .000959196/.5)}.skippr\\:hover\\:bg-muted\\/80:hover{background-color:oklab(97% -.000282743 .000959196/.8)}.skippr\\:hover\\:bg-primary-foreground\\/10:hover{background-color:oklab(100% 0 5.96046e-8/.1)}.skippr\\:hover\\:bg-primary\\/90:hover{background-color:oklab(29.9244% .0107414 -.0305411/.9)}.skippr\\:hover\\:bg-secondary\\/80:hover{background-color:oklab(91.9963% .0175391 .0626889/.8)}.skippr\\:hover\\:bg-white\\/15:hover{background-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:hover\\:bg-white\\/15:hover{background-color:color-mix(in oklab,var(--skippr-color-white)15%,transparent)}}.skippr\\:hover\\:text-accent-foreground:hover{color:oklch(21.6% .006 56.043)}.skippr\\:hover\\:text-foreground:hover{color:oklch(14.7% .004 49.25)}.skippr\\:hover\\:text-primary-foreground:hover{color:#fff}.skippr\\:hover\\:text-white:hover{color:var(--skippr-color-white)}.skippr\\:hover\\:opacity-90:hover{opacity:.9}.skippr\\:hover\\:shadow-\\[0_6px_24px_rgba\\(45\\,43\\,61\\,0\\.55\\)\\,0_4px_8px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]:hover{--tw-shadow:0 6px 24px var(--tw-shadow-color,#2d2b3d8c),0 4px 8px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:hover\\:brightness-110:hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}.skippr\\:focus-visible\\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:focus-visible\\:ring-ring:focus-visible{--tw-ring-color:oklch(70.9% .01 56.259)}.skippr\\:focus-visible\\:ring-white\\/70:focus-visible{--tw-ring-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:focus-visible\\:ring-white\\/70:focus-visible{--tw-ring-color:color-mix(in oklab,var(--skippr-color-white)70%,transparent)}}.skippr\\:focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.skippr\\:focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.skippr\\:focus-visible\\:ring-inset:focus-visible{--tw-ring-inset:inset}.skippr\\:active\\:translate-y-0:active{--tw-translate-y:calc(var(--skippr-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:disabled\\:pointer-events-none:disabled{pointer-events:none}.skippr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.skippr\\:disabled\\:opacity-50:disabled{opacity:.5}.skippr\\:disabled\\:opacity-60:disabled{opacity:.6}.skippr\\:\\[\\&_svg\\]\\:pointer-events-none svg{pointer-events:none}.skippr\\:\\[\\&_svg\\]\\:shrink-0 svg{flex-shrink:0}.skippr\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 svg:not([class*=size-]){width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}}@keyframes skippr-tap{0%{transform:scale(1)}45%{transform:scale(.7)}to{transform:scale(1)}}@keyframes skippr-press{0%{transform:scale(1)}55%{transform:scale(1)}85%{transform:scale(.68)}to{transform:scale(1)}}@keyframes skippr-tab-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-speak{0%,to{opacity:.6;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-thinking-dot{0%,80%,to{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}@keyframes skippr-pulse-ring{0%,to{box-shadow:0 0 #2d2b3d66}50%{box-shadow:0 0 0 10px #2d2b3d00}}@keyframes skippr-annotation-pulse{0%,to{box-shadow:0 0 #22d3ee73}50%{box-shadow:0 0 0 10px #22d3ee00}}@keyframes skippr-speak-ripple{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}@keyframes skippr-bar{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}@keyframes skippr-breathe{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes skippr-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-wave{0%,to{opacity:.4;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-bubble-in{0%{opacity:0;transform:translateY(12px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes skippr-pill-content{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes skippr-banner-look{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.skippr-no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.skippr-no-scrollbar::-webkit-scrollbar{display:none}:host{color:var(--color-foreground)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}`;
|
|
2863
3030
|
useLayoutEffect(() => {
|
|
2864
3031
|
const host = hostRef.current;
|
|
2865
3032
|
if (!host || !css)
|
|
@@ -2874,20 +3041,20 @@ function ShadowHost({ children }) {
|
|
|
2874
3041
|
setShadowRoot(root);
|
|
2875
3042
|
}, [css]);
|
|
2876
3043
|
if (!css)
|
|
2877
|
-
return /* @__PURE__ */
|
|
3044
|
+
return /* @__PURE__ */ jsx8(Fragment3, {
|
|
2878
3045
|
children
|
|
2879
3046
|
});
|
|
2880
|
-
return /* @__PURE__ */
|
|
3047
|
+
return /* @__PURE__ */ jsx8("div", {
|
|
2881
3048
|
ref: hostRef,
|
|
2882
3049
|
children: shadowRoot && createPortal(children, shadowRoot)
|
|
2883
3050
|
});
|
|
2884
3051
|
}
|
|
2885
3052
|
|
|
2886
3053
|
// src/components/Sidebar.tsx
|
|
2887
|
-
import { useContext as
|
|
3054
|
+
import { useContext as useContext6, useEffect as useEffect19 } from "react";
|
|
2888
3055
|
|
|
2889
3056
|
// src/hooks/useCombinedMessages.ts
|
|
2890
|
-
import { useContext as
|
|
3057
|
+
import { useContext as useContext4, useMemo as useMemo4 } from "react";
|
|
2891
3058
|
|
|
2892
3059
|
// src/hooks/useChatMessages.ts
|
|
2893
3060
|
import { useChat, useLocalParticipant as useLocalParticipant4 } from "@livekit/components-react/hooks";
|
|
@@ -2955,7 +3122,7 @@ function useCombinedMessages() {
|
|
|
2955
3122
|
const { transcriptMessages } = useStreamingTranscript();
|
|
2956
3123
|
const { chatMessages, sendChatMessage, isSendingChat } = useChatMessages();
|
|
2957
3124
|
const { state: agentState } = useAgentVoiceState();
|
|
2958
|
-
const historyMessages =
|
|
3125
|
+
const historyMessages = useContext4(LiveAgentContext)?.historyMessages ?? [];
|
|
2959
3126
|
const liveMessages = useMemo4(() => {
|
|
2960
3127
|
if (chatMessages.length === 0)
|
|
2961
3128
|
return transcriptMessages;
|
|
@@ -2973,15 +3140,15 @@ function useCombinedMessages() {
|
|
|
2973
3140
|
}
|
|
2974
3141
|
|
|
2975
3142
|
// src/hooks/usePhaseUpdates.ts
|
|
2976
|
-
import { useCallback as
|
|
3143
|
+
import { useCallback as useCallback8, useContext as useContext5, useEffect as useEffect12 } from "react";
|
|
2977
3144
|
|
|
2978
3145
|
// src/hooks/useAgentState.ts
|
|
2979
3146
|
import { useRemoteParticipants } from "@livekit/components-react/hooks";
|
|
2980
|
-
import { useEffect as
|
|
3147
|
+
import { useEffect as useEffect11, useState as useState9 } from "react";
|
|
2981
3148
|
function useAgentState(attributeKey, parse, initial) {
|
|
2982
|
-
const [value, setValue] =
|
|
3149
|
+
const [value, setValue] = useState9(initial);
|
|
2983
3150
|
const remoteParticipants = useRemoteParticipants();
|
|
2984
|
-
|
|
3151
|
+
useEffect11(() => {
|
|
2985
3152
|
const agentParticipant = remoteParticipants.find((p) => p.attributes?.[attributeKey]);
|
|
2986
3153
|
if (agentParticipant) {
|
|
2987
3154
|
const attr = agentParticipant.attributes?.[attributeKey];
|
|
@@ -3027,10 +3194,10 @@ function parsePhases(json) {
|
|
|
3027
3194
|
return null;
|
|
3028
3195
|
}
|
|
3029
3196
|
function usePhaseUpdates() {
|
|
3030
|
-
const parse =
|
|
3197
|
+
const parse = useCallback8(parsePhases, []);
|
|
3031
3198
|
const livePhases = useAgentState("phases", parse, []);
|
|
3032
|
-
const ctx =
|
|
3033
|
-
|
|
3199
|
+
const ctx = useContext5(LiveAgentContext);
|
|
3200
|
+
useEffect12(() => {
|
|
3034
3201
|
if (livePhases.length > 0)
|
|
3035
3202
|
ctx?.setPhasesSnapshot(livePhases);
|
|
3036
3203
|
}, [livePhases, ctx?.setPhasesSnapshot]);
|
|
@@ -3039,7 +3206,7 @@ function usePhaseUpdates() {
|
|
|
3039
3206
|
}
|
|
3040
3207
|
|
|
3041
3208
|
// src/hooks/useSessionRemaining.ts
|
|
3042
|
-
import { useEffect as
|
|
3209
|
+
import { useEffect as useEffect13, useRef as useRef8, useState as useState10 } from "react";
|
|
3043
3210
|
|
|
3044
3211
|
// src/lib/format.ts
|
|
3045
3212
|
function formatTime(seconds) {
|
|
@@ -3056,8 +3223,8 @@ function parseNumber(s) {
|
|
|
3056
3223
|
function useSessionRemaining() {
|
|
3057
3224
|
const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
|
|
3058
3225
|
const endTimeRef = useRef8(null);
|
|
3059
|
-
const [remaining, setRemaining] =
|
|
3060
|
-
|
|
3226
|
+
const [remaining, setRemaining] = useState10(null);
|
|
3227
|
+
useEffect13(() => {
|
|
3061
3228
|
if (maxCallDuration === null || endTimeRef.current !== null)
|
|
3062
3229
|
return;
|
|
3063
3230
|
const endTime = Date.now() + maxCallDuration * 1000;
|
|
@@ -3074,10 +3241,10 @@ function useSessionRemaining() {
|
|
|
3074
3241
|
}
|
|
3075
3242
|
|
|
3076
3243
|
// src/hooks/useElapsedSeconds.ts
|
|
3077
|
-
import { useEffect as
|
|
3244
|
+
import { useEffect as useEffect14, useState as useState11 } from "react";
|
|
3078
3245
|
function useElapsedSeconds(isRunning) {
|
|
3079
|
-
const [elapsed, setElapsed] =
|
|
3080
|
-
|
|
3246
|
+
const [elapsed, setElapsed] = useState11(0);
|
|
3247
|
+
useEffect14(() => {
|
|
3081
3248
|
if (!isRunning) {
|
|
3082
3249
|
setElapsed(0);
|
|
3083
3250
|
return;
|
|
@@ -3093,50 +3260,50 @@ function useElapsedSeconds(isRunning) {
|
|
|
3093
3260
|
}
|
|
3094
3261
|
|
|
3095
3262
|
// src/components/ChatHeader.tsx
|
|
3096
|
-
import { jsx as
|
|
3263
|
+
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
3097
3264
|
function ChatHeader() {
|
|
3098
3265
|
const { isConnected, minimizePanel, minimizable } = useLiveAgent();
|
|
3099
3266
|
const elapsed = useElapsedSeconds(isConnected);
|
|
3100
|
-
return /* @__PURE__ */
|
|
3267
|
+
return /* @__PURE__ */ jsxs7("header", {
|
|
3101
3268
|
className: "skippr:sticky skippr:top-0 skippr:z-10 skippr:flex skippr:shrink-0 skippr:items-center skippr:justify-between skippr:border-b skippr:border-border skippr:bg-primary skippr:px-4 skippr:py-3",
|
|
3102
3269
|
children: [
|
|
3103
|
-
/* @__PURE__ */
|
|
3270
|
+
/* @__PURE__ */ jsx9("p", {
|
|
3104
3271
|
className: "skippr:text-sm skippr:font-semibold skippr:text-primary-foreground",
|
|
3105
3272
|
children: "Skippr"
|
|
3106
3273
|
}),
|
|
3107
|
-
/* @__PURE__ */
|
|
3274
|
+
/* @__PURE__ */ jsxs7("div", {
|
|
3108
3275
|
className: "skippr:flex skippr:items-center skippr:gap-2",
|
|
3109
3276
|
children: [
|
|
3110
|
-
isConnected && /* @__PURE__ */
|
|
3277
|
+
isConnected && /* @__PURE__ */ jsxs7("div", {
|
|
3111
3278
|
className: "skippr:flex skippr:items-center skippr:gap-1.5 skippr:rounded-full skippr:bg-primary-foreground/20 skippr:px-2.5 skippr:py-1",
|
|
3112
3279
|
children: [
|
|
3113
|
-
/* @__PURE__ */
|
|
3280
|
+
/* @__PURE__ */ jsxs7("span", {
|
|
3114
3281
|
className: "skippr:relative skippr:flex skippr:size-1.5",
|
|
3115
3282
|
children: [
|
|
3116
|
-
/* @__PURE__ */
|
|
3283
|
+
/* @__PURE__ */ jsx9("span", {
|
|
3117
3284
|
className: "skippr:absolute skippr:inline-flex skippr:h-full skippr:w-full skippr:animate-ping skippr:rounded-full skippr:bg-red-400 skippr:opacity-75"
|
|
3118
3285
|
}),
|
|
3119
|
-
/* @__PURE__ */
|
|
3286
|
+
/* @__PURE__ */ jsx9("span", {
|
|
3120
3287
|
className: "skippr:relative skippr:inline-flex skippr:size-1.5 skippr:rounded-full skippr:bg-red-400"
|
|
3121
3288
|
})
|
|
3122
3289
|
]
|
|
3123
3290
|
}),
|
|
3124
|
-
/* @__PURE__ */
|
|
3291
|
+
/* @__PURE__ */ jsx9("span", {
|
|
3125
3292
|
className: "skippr:text-[10px] skippr:font-medium skippr:text-primary-foreground",
|
|
3126
3293
|
children: "REC"
|
|
3127
3294
|
}),
|
|
3128
|
-
/* @__PURE__ */
|
|
3295
|
+
/* @__PURE__ */ jsx9("span", {
|
|
3129
3296
|
className: "skippr:text-[10px] skippr:font-mono skippr:text-primary-foreground",
|
|
3130
3297
|
children: formatTime(elapsed)
|
|
3131
3298
|
})
|
|
3132
3299
|
]
|
|
3133
3300
|
}),
|
|
3134
|
-
minimizable && /* @__PURE__ */
|
|
3301
|
+
minimizable && /* @__PURE__ */ jsx9("button", {
|
|
3135
3302
|
type: "button",
|
|
3136
3303
|
onClick: minimizePanel,
|
|
3137
3304
|
"aria-label": "Minimize",
|
|
3138
3305
|
className: "skippr:flex skippr:size-6 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-md skippr:text-primary-foreground/70 skippr:transition-colors skippr:hover:bg-primary-foreground/10 skippr:hover:text-primary-foreground",
|
|
3139
|
-
children: /* @__PURE__ */
|
|
3306
|
+
children: /* @__PURE__ */ jsx9(Minimize2, {
|
|
3140
3307
|
className: "skippr:size-3.5"
|
|
3141
3308
|
})
|
|
3142
3309
|
})
|
|
@@ -3147,26 +3314,26 @@ function ChatHeader() {
|
|
|
3147
3314
|
}
|
|
3148
3315
|
|
|
3149
3316
|
// src/components/LoadingDots.tsx
|
|
3150
|
-
import { jsx as
|
|
3317
|
+
import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
3151
3318
|
function LoadingDots({ label }) {
|
|
3152
|
-
return /* @__PURE__ */
|
|
3319
|
+
return /* @__PURE__ */ jsxs8("div", {
|
|
3153
3320
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:py-4",
|
|
3154
3321
|
children: [
|
|
3155
|
-
/* @__PURE__ */
|
|
3322
|
+
/* @__PURE__ */ jsxs8("div", {
|
|
3156
3323
|
className: "skippr:flex skippr:gap-1",
|
|
3157
3324
|
children: [
|
|
3158
|
-
/* @__PURE__ */
|
|
3325
|
+
/* @__PURE__ */ jsx10("span", {
|
|
3159
3326
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
3160
3327
|
}),
|
|
3161
|
-
/* @__PURE__ */
|
|
3328
|
+
/* @__PURE__ */ jsx10("span", {
|
|
3162
3329
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
3163
3330
|
}),
|
|
3164
|
-
/* @__PURE__ */
|
|
3331
|
+
/* @__PURE__ */ jsx10("span", {
|
|
3165
3332
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
3166
3333
|
})
|
|
3167
3334
|
]
|
|
3168
3335
|
}),
|
|
3169
|
-
/* @__PURE__ */
|
|
3336
|
+
/* @__PURE__ */ jsx10("p", {
|
|
3170
3337
|
className: "skippr:text-xs skippr:text-muted-foreground",
|
|
3171
3338
|
children: label
|
|
3172
3339
|
})
|
|
@@ -3175,11 +3342,11 @@ function LoadingDots({ label }) {
|
|
|
3175
3342
|
}
|
|
3176
3343
|
|
|
3177
3344
|
// src/components/LoginFlow.tsx
|
|
3178
|
-
import { useCallback as
|
|
3345
|
+
import { useCallback as useCallback9, useEffect as useEffect15, useRef as useRef9, useState as useState12 } from "react";
|
|
3179
3346
|
|
|
3180
3347
|
// src/components/ui/button.tsx
|
|
3181
3348
|
import { forwardRef as forwardRef3 } from "react";
|
|
3182
|
-
import { jsx as
|
|
3349
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
3183
3350
|
var variantClasses = {
|
|
3184
3351
|
default: "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90",
|
|
3185
3352
|
destructive: "skippr:bg-destructive skippr:text-white skippr:hover:bg-destructive/90",
|
|
@@ -3198,7 +3365,7 @@ var sizeClasses = {
|
|
|
3198
3365
|
"icon-lg": "skippr:size-10"
|
|
3199
3366
|
};
|
|
3200
3367
|
var Button = forwardRef3(({ className, variant = "default", size = "default", ...props }, ref) => {
|
|
3201
|
-
return /* @__PURE__ */
|
|
3368
|
+
return /* @__PURE__ */ jsx11("button", {
|
|
3202
3369
|
className: cn("skippr:inline-flex skippr:items-center skippr:justify-center skippr:gap-2 skippr:whitespace-nowrap skippr:rounded-md skippr:text-sm skippr:font-medium skippr:ring-offset-background skippr:transition-all skippr:cursor-pointer skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-ring skippr:focus-visible:ring-offset-2 skippr:disabled:pointer-events-none skippr:disabled:opacity-50 skippr:shrink-0 skippr:[&_svg]:pointer-events-none skippr:[&_svg:not([class*='size-'])]:size-4 skippr:[&_svg]:shrink-0", variantClasses[variant], sizeClasses[size], className),
|
|
3203
3370
|
ref,
|
|
3204
3371
|
...props
|
|
@@ -3207,28 +3374,28 @@ var Button = forwardRef3(({ className, variant = "default", size = "default", ..
|
|
|
3207
3374
|
Button.displayName = "Button";
|
|
3208
3375
|
|
|
3209
3376
|
// src/components/LoginFlow.tsx
|
|
3210
|
-
import { jsx as
|
|
3377
|
+
import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
3211
3378
|
var OTP_LENGTH = 6;
|
|
3212
3379
|
var DIGIT_KEYS = ["d0", "d1", "d2", "d3", "d4", "d5"];
|
|
3213
3380
|
function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
3214
|
-
const [step, setStep] =
|
|
3215
|
-
const [email, setEmail] =
|
|
3216
|
-
const handleRequestOtp =
|
|
3381
|
+
const [step, setStep] = useState12("email");
|
|
3382
|
+
const [email, setEmail] = useState12("");
|
|
3383
|
+
const handleRequestOtp = useCallback9(async (emailValue) => {
|
|
3217
3384
|
const success = await requestOtp(emailValue);
|
|
3218
3385
|
if (success)
|
|
3219
3386
|
setStep("otp");
|
|
3220
3387
|
}, [requestOtp]);
|
|
3221
|
-
const handleVerifyOtp =
|
|
3388
|
+
const handleVerifyOtp = useCallback9(async (code) => {
|
|
3222
3389
|
await verifyOtp(email, code);
|
|
3223
3390
|
}, [verifyOtp, email]);
|
|
3224
|
-
const handleBack =
|
|
3391
|
+
const handleBack = useCallback9(() => {
|
|
3225
3392
|
setStep("email");
|
|
3226
3393
|
}, []);
|
|
3227
|
-
const handleResend =
|
|
3394
|
+
const handleResend = useCallback9(async () => {
|
|
3228
3395
|
await requestOtp(email);
|
|
3229
3396
|
}, [requestOtp, email]);
|
|
3230
3397
|
if (step === "otp") {
|
|
3231
|
-
return /* @__PURE__ */
|
|
3398
|
+
return /* @__PURE__ */ jsx12(OtpStep, {
|
|
3232
3399
|
email,
|
|
3233
3400
|
onSubmit: handleVerifyOtp,
|
|
3234
3401
|
onResend: handleResend,
|
|
@@ -3237,7 +3404,7 @@ function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
|
3237
3404
|
isSubmitting
|
|
3238
3405
|
});
|
|
3239
3406
|
}
|
|
3240
|
-
return /* @__PURE__ */
|
|
3407
|
+
return /* @__PURE__ */ jsx12(EmailStep, {
|
|
3241
3408
|
email,
|
|
3242
3409
|
onEmailChange: setEmail,
|
|
3243
3410
|
onSubmit: handleRequestOtp,
|
|
@@ -3251,30 +3418,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
3251
3418
|
if (email.trim())
|
|
3252
3419
|
onSubmit(email.trim());
|
|
3253
3420
|
}
|
|
3254
|
-
return /* @__PURE__ */
|
|
3421
|
+
return /* @__PURE__ */ jsxs9("div", {
|
|
3255
3422
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
|
|
3256
3423
|
children: [
|
|
3257
|
-
/* @__PURE__ */
|
|
3424
|
+
/* @__PURE__ */ jsxs9("div", {
|
|
3258
3425
|
className: "skippr:mb-4 skippr:text-center",
|
|
3259
3426
|
children: [
|
|
3260
|
-
/* @__PURE__ */
|
|
3427
|
+
/* @__PURE__ */ jsx12(Mail, {
|
|
3261
3428
|
className: "skippr:mx-auto skippr:mb-2 skippr:size-6 skippr:text-primary"
|
|
3262
3429
|
}),
|
|
3263
|
-
/* @__PURE__ */
|
|
3430
|
+
/* @__PURE__ */ jsx12("p", {
|
|
3264
3431
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
3265
3432
|
children: "Sign in to continue"
|
|
3266
3433
|
}),
|
|
3267
|
-
/* @__PURE__ */
|
|
3434
|
+
/* @__PURE__ */ jsx12("p", {
|
|
3268
3435
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
3269
3436
|
children: "Your email will be used to identify you across sessions"
|
|
3270
3437
|
})
|
|
3271
3438
|
]
|
|
3272
3439
|
}),
|
|
3273
|
-
/* @__PURE__ */
|
|
3440
|
+
/* @__PURE__ */ jsxs9("form", {
|
|
3274
3441
|
onSubmit: handleSubmit,
|
|
3275
3442
|
className: "skippr:flex skippr:flex-col skippr:gap-3",
|
|
3276
3443
|
children: [
|
|
3277
|
-
/* @__PURE__ */
|
|
3444
|
+
/* @__PURE__ */ jsx12("input", {
|
|
3278
3445
|
type: "email",
|
|
3279
3446
|
placeholder: "you@example.com",
|
|
3280
3447
|
value: email,
|
|
@@ -3283,15 +3450,15 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
3283
3450
|
required: true,
|
|
3284
3451
|
className: "skippr:w-full skippr:rounded-md skippr:border skippr:border-border skippr:bg-background skippr:px-3 skippr:py-2 skippr:text-sm skippr:text-foreground skippr:placeholder-muted-foreground skippr:outline-none focus:skippr:ring-2 focus:skippr:ring-primary/30 focus:skippr:border-primary disabled:skippr:opacity-50"
|
|
3285
3452
|
}),
|
|
3286
|
-
/* @__PURE__ */
|
|
3453
|
+
/* @__PURE__ */ jsx12(Button, {
|
|
3287
3454
|
type: "submit",
|
|
3288
3455
|
disabled: isSubmitting || !email.trim(),
|
|
3289
3456
|
className: "skippr:w-full",
|
|
3290
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
3457
|
+
children: isSubmitting ? /* @__PURE__ */ jsx12(LoaderCircle, {
|
|
3291
3458
|
className: "skippr:size-4 skippr:animate-spin"
|
|
3292
3459
|
}) : "Continue"
|
|
3293
3460
|
}),
|
|
3294
|
-
error && /* @__PURE__ */
|
|
3461
|
+
error && /* @__PURE__ */ jsx12("p", {
|
|
3295
3462
|
className: "skippr:text-xs skippr:text-center skippr:text-destructive",
|
|
3296
3463
|
children: error
|
|
3297
3464
|
})
|
|
@@ -3301,30 +3468,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
3301
3468
|
});
|
|
3302
3469
|
}
|
|
3303
3470
|
function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
3304
|
-
const [digits, setDigits] =
|
|
3305
|
-
const [resendCooldown, setResendCooldown] =
|
|
3471
|
+
const [digits, setDigits] = useState12(Array(OTP_LENGTH).fill(""));
|
|
3472
|
+
const [resendCooldown, setResendCooldown] = useState12(0);
|
|
3306
3473
|
const inputRefs = useRef9([]);
|
|
3307
3474
|
const submittedRef = useRef9(false);
|
|
3308
|
-
|
|
3475
|
+
useEffect15(() => {
|
|
3309
3476
|
inputRefs.current[0]?.focus();
|
|
3310
3477
|
}, []);
|
|
3311
|
-
|
|
3478
|
+
useEffect15(() => {
|
|
3312
3479
|
if (error)
|
|
3313
3480
|
submittedRef.current = false;
|
|
3314
3481
|
}, [error]);
|
|
3315
|
-
|
|
3482
|
+
useEffect15(() => {
|
|
3316
3483
|
if (resendCooldown <= 0)
|
|
3317
3484
|
return;
|
|
3318
3485
|
const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
|
|
3319
3486
|
return () => clearTimeout(timer);
|
|
3320
3487
|
}, [resendCooldown]);
|
|
3321
|
-
const submitCode =
|
|
3488
|
+
const submitCode = useCallback9((code) => {
|
|
3322
3489
|
if (submittedRef.current || isSubmitting)
|
|
3323
3490
|
return;
|
|
3324
3491
|
submittedRef.current = true;
|
|
3325
3492
|
onSubmit(code);
|
|
3326
3493
|
}, [onSubmit, isSubmitting]);
|
|
3327
|
-
const handleDigitChange =
|
|
3494
|
+
const handleDigitChange = useCallback9((index2, value) => {
|
|
3328
3495
|
const digit = value.replace(/\D/g, "").slice(-1);
|
|
3329
3496
|
const newDigits = [...digits];
|
|
3330
3497
|
newDigits[index2] = digit;
|
|
@@ -3338,12 +3505,12 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3338
3505
|
submitCode(code);
|
|
3339
3506
|
}
|
|
3340
3507
|
}, [digits, submitCode]);
|
|
3341
|
-
const handleKeyDown =
|
|
3508
|
+
const handleKeyDown = useCallback9((index2, e) => {
|
|
3342
3509
|
if (e.key === "Backspace" && !digits[index2] && index2 > 0) {
|
|
3343
3510
|
inputRefs.current[index2 - 1]?.focus();
|
|
3344
3511
|
}
|
|
3345
3512
|
}, [digits]);
|
|
3346
|
-
const handlePaste =
|
|
3513
|
+
const handlePaste = useCallback9((e) => {
|
|
3347
3514
|
e.preventDefault();
|
|
3348
3515
|
const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, OTP_LENGTH);
|
|
3349
3516
|
if (pasted.length > 0) {
|
|
@@ -3371,22 +3538,22 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3371
3538
|
submittedRef.current = false;
|
|
3372
3539
|
inputRefs.current[0]?.focus();
|
|
3373
3540
|
}
|
|
3374
|
-
return /* @__PURE__ */
|
|
3541
|
+
return /* @__PURE__ */ jsxs9("div", {
|
|
3375
3542
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
|
|
3376
3543
|
children: [
|
|
3377
|
-
/* @__PURE__ */
|
|
3544
|
+
/* @__PURE__ */ jsxs9("div", {
|
|
3378
3545
|
className: "skippr:mb-4 skippr:text-center",
|
|
3379
3546
|
children: [
|
|
3380
|
-
/* @__PURE__ */
|
|
3547
|
+
/* @__PURE__ */ jsx12("p", {
|
|
3381
3548
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
3382
3549
|
children: "Enter verification code"
|
|
3383
3550
|
}),
|
|
3384
|
-
/* @__PURE__ */
|
|
3551
|
+
/* @__PURE__ */ jsxs9("p", {
|
|
3385
3552
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
3386
3553
|
children: [
|
|
3387
3554
|
"We sent a 6-digit code to",
|
|
3388
3555
|
" ",
|
|
3389
|
-
/* @__PURE__ */
|
|
3556
|
+
/* @__PURE__ */ jsx12("span", {
|
|
3390
3557
|
className: "skippr:font-medium skippr:text-foreground",
|
|
3391
3558
|
children: email
|
|
3392
3559
|
})
|
|
@@ -3394,13 +3561,13 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3394
3561
|
})
|
|
3395
3562
|
]
|
|
3396
3563
|
}),
|
|
3397
|
-
/* @__PURE__ */
|
|
3564
|
+
/* @__PURE__ */ jsxs9("form", {
|
|
3398
3565
|
onSubmit: handleSubmit,
|
|
3399
3566
|
className: "skippr:flex skippr:flex-col skippr:gap-3",
|
|
3400
3567
|
children: [
|
|
3401
|
-
/* @__PURE__ */
|
|
3568
|
+
/* @__PURE__ */ jsx12("div", {
|
|
3402
3569
|
className: "skippr:flex skippr:justify-center skippr:gap-1.5",
|
|
3403
|
-
children: digits.map((digit, index2) => /* @__PURE__ */
|
|
3570
|
+
children: digits.map((digit, index2) => /* @__PURE__ */ jsx12("input", {
|
|
3404
3571
|
ref: (el) => {
|
|
3405
3572
|
inputRefs.current[index2] = el;
|
|
3406
3573
|
},
|
|
@@ -3415,29 +3582,29 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3415
3582
|
className: "skippr:h-10 skippr:w-10 skippr:rounded-md skippr:border skippr:border-border skippr:bg-background skippr:text-center skippr:text-sm skippr:font-semibold skippr:text-foreground skippr:outline-none focus:skippr:ring-2 focus:skippr:ring-primary/30 focus:skippr:border-primary disabled:skippr:opacity-50"
|
|
3416
3583
|
}, DIGIT_KEYS[index2]))
|
|
3417
3584
|
}),
|
|
3418
|
-
error && /* @__PURE__ */
|
|
3585
|
+
error && /* @__PURE__ */ jsx12("p", {
|
|
3419
3586
|
className: "skippr:text-xs skippr:text-center skippr:text-destructive",
|
|
3420
3587
|
children: error
|
|
3421
3588
|
}),
|
|
3422
|
-
/* @__PURE__ */
|
|
3589
|
+
/* @__PURE__ */ jsx12(Button, {
|
|
3423
3590
|
type: "submit",
|
|
3424
3591
|
disabled: isSubmitting || digits.join("").length !== OTP_LENGTH,
|
|
3425
3592
|
className: "skippr:w-full",
|
|
3426
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
3593
|
+
children: isSubmitting ? /* @__PURE__ */ jsx12(LoaderCircle, {
|
|
3427
3594
|
className: "skippr:size-4 skippr:animate-spin"
|
|
3428
3595
|
}) : "Verify"
|
|
3429
3596
|
}),
|
|
3430
|
-
/* @__PURE__ */
|
|
3597
|
+
/* @__PURE__ */ jsxs9("div", {
|
|
3431
3598
|
className: "skippr:flex skippr:items-center skippr:justify-between skippr:text-xs",
|
|
3432
3599
|
children: [
|
|
3433
|
-
/* @__PURE__ */
|
|
3600
|
+
/* @__PURE__ */ jsx12("button", {
|
|
3434
3601
|
type: "button",
|
|
3435
3602
|
onClick: onBack,
|
|
3436
3603
|
disabled: isSubmitting,
|
|
3437
3604
|
className: "skippr:text-muted-foreground hover:skippr:text-foreground skippr:transition-colors disabled:skippr:opacity-50",
|
|
3438
3605
|
children: "Change email"
|
|
3439
3606
|
}),
|
|
3440
|
-
/* @__PURE__ */
|
|
3607
|
+
/* @__PURE__ */ jsx12("button", {
|
|
3441
3608
|
type: "button",
|
|
3442
3609
|
onClick: handleResend,
|
|
3443
3610
|
disabled: isSubmitting || resendCooldown > 0,
|
|
@@ -3453,7 +3620,7 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3453
3620
|
}
|
|
3454
3621
|
|
|
3455
3622
|
// src/components/MeetingControls.tsx
|
|
3456
|
-
import { jsx as
|
|
3623
|
+
import { jsx as jsx13, jsxs as jsxs10, Fragment as Fragment4 } from "react/jsx-runtime";
|
|
3457
3624
|
var CONTROL_BUTTON2 = "skippr:flex skippr:size-11 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-full skippr:transition-colors skippr:disabled:cursor-not-allowed skippr:disabled:opacity-60";
|
|
3458
3625
|
var MUTED_BUTTON = "skippr:bg-muted skippr:text-foreground skippr:hover:bg-muted/80";
|
|
3459
3626
|
function MeetingControls({
|
|
@@ -3466,68 +3633,68 @@ function MeetingControls({
|
|
|
3466
3633
|
}) {
|
|
3467
3634
|
const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
|
|
3468
3635
|
const showPaused = isPaused || isPausing;
|
|
3469
|
-
return /* @__PURE__ */
|
|
3636
|
+
return /* @__PURE__ */ jsxs10("div", {
|
|
3470
3637
|
className: "skippr:shrink-0 skippr:border-t skippr:border-border skippr:bg-background skippr:px-4 skippr:py-4",
|
|
3471
3638
|
children: [
|
|
3472
|
-
/* @__PURE__ */
|
|
3639
|
+
/* @__PURE__ */ jsxs10("div", {
|
|
3473
3640
|
className: "skippr:flex skippr:items-center skippr:justify-center skippr:gap-3",
|
|
3474
3641
|
children: [
|
|
3475
|
-
!showPaused && /* @__PURE__ */
|
|
3642
|
+
!showPaused && /* @__PURE__ */ jsxs10(Fragment4, {
|
|
3476
3643
|
children: [
|
|
3477
|
-
/* @__PURE__ */
|
|
3644
|
+
/* @__PURE__ */ jsx13("button", {
|
|
3478
3645
|
type: "button",
|
|
3479
3646
|
onClick: toggleMute,
|
|
3480
3647
|
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
3481
3648
|
className: cn(CONTROL_BUTTON2, isMuted ? "skippr:bg-destructive/15 skippr:text-destructive skippr:hover:bg-destructive/25" : MUTED_BUTTON),
|
|
3482
|
-
children: isMuted ? /* @__PURE__ */
|
|
3649
|
+
children: isMuted ? /* @__PURE__ */ jsx13(MicOff, {
|
|
3483
3650
|
className: "skippr:size-5"
|
|
3484
|
-
}) : /* @__PURE__ */
|
|
3651
|
+
}) : /* @__PURE__ */ jsx13(Mic, {
|
|
3485
3652
|
className: "skippr:size-5"
|
|
3486
3653
|
})
|
|
3487
3654
|
}),
|
|
3488
|
-
showScreenShareToggle && /* @__PURE__ */
|
|
3655
|
+
showScreenShareToggle && /* @__PURE__ */ jsx13("button", {
|
|
3489
3656
|
type: "button",
|
|
3490
3657
|
onClick: toggleScreenShare,
|
|
3491
3658
|
"aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
|
|
3492
3659
|
className: cn(CONTROL_BUTTON2, isScreenSharing ? "skippr:bg-bubble skippr:text-white skippr:hover:brightness-110" : MUTED_BUTTON),
|
|
3493
|
-
children: isScreenSharing ? /* @__PURE__ */
|
|
3660
|
+
children: isScreenSharing ? /* @__PURE__ */ jsx13(MonitorOff, {
|
|
3494
3661
|
className: "skippr:size-5"
|
|
3495
|
-
}) : /* @__PURE__ */
|
|
3662
|
+
}) : /* @__PURE__ */ jsx13(Monitor, {
|
|
3496
3663
|
className: "skippr:size-5"
|
|
3497
3664
|
})
|
|
3498
3665
|
})
|
|
3499
3666
|
]
|
|
3500
3667
|
}),
|
|
3501
|
-
showPaused ? onResume && /* @__PURE__ */
|
|
3668
|
+
showPaused ? onResume && /* @__PURE__ */ jsx13("button", {
|
|
3502
3669
|
type: "button",
|
|
3503
3670
|
onClick: onResume,
|
|
3504
3671
|
disabled: isPausing,
|
|
3505
3672
|
"aria-label": "Resume session",
|
|
3506
3673
|
className: cn(CONTROL_BUTTON2, MUTED_BUTTON),
|
|
3507
|
-
children: /* @__PURE__ */
|
|
3674
|
+
children: /* @__PURE__ */ jsx13(Play, {
|
|
3508
3675
|
className: "skippr:size-5"
|
|
3509
3676
|
})
|
|
3510
|
-
}) : onPause && /* @__PURE__ */
|
|
3677
|
+
}) : onPause && /* @__PURE__ */ jsx13("button", {
|
|
3511
3678
|
type: "button",
|
|
3512
3679
|
onClick: onPause,
|
|
3513
3680
|
"aria-label": "Pause session",
|
|
3514
3681
|
className: cn(CONTROL_BUTTON2, MUTED_BUTTON),
|
|
3515
|
-
children: /* @__PURE__ */
|
|
3682
|
+
children: /* @__PURE__ */ jsx13(Pause, {
|
|
3516
3683
|
className: "skippr:size-5"
|
|
3517
3684
|
})
|
|
3518
3685
|
}),
|
|
3519
|
-
/* @__PURE__ */
|
|
3686
|
+
/* @__PURE__ */ jsx13("button", {
|
|
3520
3687
|
type: "button",
|
|
3521
3688
|
onClick: onHangUp,
|
|
3522
3689
|
"aria-label": "End session",
|
|
3523
3690
|
className: cn(CONTROL_BUTTON2, "skippr:bg-destructive skippr:text-destructive-foreground skippr:hover:bg-destructive/90"),
|
|
3524
|
-
children: /* @__PURE__ */
|
|
3691
|
+
children: /* @__PURE__ */ jsx13(PhoneOff, {
|
|
3525
3692
|
className: "skippr:size-5"
|
|
3526
3693
|
})
|
|
3527
3694
|
})
|
|
3528
3695
|
]
|
|
3529
3696
|
}),
|
|
3530
|
-
/* @__PURE__ */
|
|
3697
|
+
/* @__PURE__ */ jsx13("p", {
|
|
3531
3698
|
className: "skippr:mt-3 skippr:text-center skippr:text-[10px] skippr:text-muted-foreground",
|
|
3532
3699
|
children: "Powered by Skippr"
|
|
3533
3700
|
})
|
|
@@ -3536,17 +3703,17 @@ function MeetingControls({
|
|
|
3536
3703
|
}
|
|
3537
3704
|
|
|
3538
3705
|
// src/components/MessageList.tsx
|
|
3539
|
-
import { useEffect as
|
|
3706
|
+
import { useEffect as useEffect17, useRef as useRef11 } from "react";
|
|
3540
3707
|
|
|
3541
3708
|
// src/components/ChatInput.tsx
|
|
3542
|
-
import { useEffect as
|
|
3543
|
-
import { jsx as
|
|
3709
|
+
import { useEffect as useEffect16, useRef as useRef10, useState as useState13 } from "react";
|
|
3710
|
+
import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
3544
3711
|
var MAX_INPUT_HEIGHT = 60;
|
|
3545
3712
|
function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
3546
|
-
const [inputText, setInputText] =
|
|
3713
|
+
const [inputText, setInputText] = useState13("");
|
|
3547
3714
|
const textareaRef = useRef10(null);
|
|
3548
3715
|
const canSend = inputText.trim().length > 0 && !isSendingChat;
|
|
3549
|
-
|
|
3716
|
+
useEffect16(() => {
|
|
3550
3717
|
if (autoFocus)
|
|
3551
3718
|
textareaRef.current?.focus();
|
|
3552
3719
|
}, [autoFocus]);
|
|
@@ -3577,13 +3744,13 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
3577
3744
|
handleSubmit(e);
|
|
3578
3745
|
}
|
|
3579
3746
|
}
|
|
3580
|
-
return /* @__PURE__ */
|
|
3747
|
+
return /* @__PURE__ */ jsx14("form", {
|
|
3581
3748
|
onSubmit: handleSubmit,
|
|
3582
3749
|
className: "skippr:border-t skippr:border-border skippr:p-3",
|
|
3583
|
-
children: /* @__PURE__ */
|
|
3750
|
+
children: /* @__PURE__ */ jsxs11("div", {
|
|
3584
3751
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:rounded-xl skippr:bg-background skippr:ring-1 skippr:ring-foreground/10 skippr:px-3 skippr:py-2",
|
|
3585
3752
|
children: [
|
|
3586
|
-
/* @__PURE__ */
|
|
3753
|
+
/* @__PURE__ */ jsx14("textarea", {
|
|
3587
3754
|
ref: textareaRef,
|
|
3588
3755
|
rows: 1,
|
|
3589
3756
|
value: inputText,
|
|
@@ -3593,12 +3760,12 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
3593
3760
|
className: "skippr:flex-1 skippr:resize-none skippr:overflow-y-auto skippr:bg-transparent skippr:text-sm skippr:leading-5 skippr:text-foreground skippr:placeholder:text-muted-foreground skippr:outline-none",
|
|
3594
3761
|
style: { maxHeight: `${MAX_INPUT_HEIGHT}px` }
|
|
3595
3762
|
}),
|
|
3596
|
-
/* @__PURE__ */
|
|
3763
|
+
/* @__PURE__ */ jsx14("button", {
|
|
3597
3764
|
type: "submit",
|
|
3598
3765
|
disabled: !canSend,
|
|
3599
3766
|
"aria-label": "Send message",
|
|
3600
3767
|
className: cn("skippr:flex skippr:size-8 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-lg skippr:transition-colors", canSend ? "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90" : "skippr:bg-muted-foreground/20 skippr:text-muted-foreground/60"),
|
|
3601
|
-
children: /* @__PURE__ */
|
|
3768
|
+
children: /* @__PURE__ */ jsx14(Send, {
|
|
3602
3769
|
className: "skippr:size-3.5"
|
|
3603
3770
|
})
|
|
3604
3771
|
})
|
|
@@ -3608,7 +3775,7 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
3608
3775
|
}
|
|
3609
3776
|
|
|
3610
3777
|
// src/components/ChatMessage.tsx
|
|
3611
|
-
import { jsx as
|
|
3778
|
+
import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
3612
3779
|
function formatTimestamp(ts) {
|
|
3613
3780
|
return new Date(ts).toLocaleTimeString("en-US", {
|
|
3614
3781
|
hour: "numeric",
|
|
@@ -3618,23 +3785,23 @@ function formatTimestamp(ts) {
|
|
|
3618
3785
|
}
|
|
3619
3786
|
function ChatMessage({ message }) {
|
|
3620
3787
|
const isAgent = message.role === "assistant";
|
|
3621
|
-
return /* @__PURE__ */
|
|
3788
|
+
return /* @__PURE__ */ jsxs12("div", {
|
|
3622
3789
|
className: cn("skippr:flex skippr:gap-2", isAgent ? "skippr:items-start" : "skippr:justify-end"),
|
|
3623
3790
|
children: [
|
|
3624
|
-
isAgent && /* @__PURE__ */
|
|
3791
|
+
isAgent && /* @__PURE__ */ jsx15("div", {
|
|
3625
3792
|
className: "skippr:mt-0.5 skippr:flex skippr:size-7 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-md skippr:bg-primary",
|
|
3626
|
-
children: /* @__PURE__ */
|
|
3793
|
+
children: /* @__PURE__ */ jsx15(Sparkles, {
|
|
3627
3794
|
className: "skippr:size-3.5 skippr:text-primary-foreground"
|
|
3628
3795
|
})
|
|
3629
3796
|
}),
|
|
3630
|
-
/* @__PURE__ */
|
|
3797
|
+
/* @__PURE__ */ jsxs12("div", {
|
|
3631
3798
|
className: cn("skippr:flex skippr:max-w-[80%] skippr:flex-col", isAgent ? "skippr:items-start" : "skippr:items-end"),
|
|
3632
3799
|
children: [
|
|
3633
|
-
/* @__PURE__ */
|
|
3800
|
+
/* @__PURE__ */ jsx15("div", {
|
|
3634
3801
|
className: cn("skippr:rounded-2xl skippr:px-4 skippr:py-2.5 skippr:text-sm skippr:leading-relaxed", isAgent ? "skippr:border skippr:border-border skippr:bg-card skippr:text-foreground" : "skippr:bg-primary skippr:text-primary-foreground"),
|
|
3635
3802
|
children: message.content
|
|
3636
3803
|
}),
|
|
3637
|
-
message.timestamp && /* @__PURE__ */
|
|
3804
|
+
message.timestamp && /* @__PURE__ */ jsx15("span", {
|
|
3638
3805
|
className: "skippr:mt-1 skippr:px-1 skippr:text-[10px] skippr:text-muted-foreground/60",
|
|
3639
3806
|
children: formatTimestamp(message.timestamp)
|
|
3640
3807
|
})
|
|
@@ -3645,33 +3812,33 @@ function ChatMessage({ message }) {
|
|
|
3645
3812
|
}
|
|
3646
3813
|
|
|
3647
3814
|
// src/components/TypingIndicator.tsx
|
|
3648
|
-
import { jsx as
|
|
3815
|
+
import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
3649
3816
|
function TypingIndicator() {
|
|
3650
|
-
return /* @__PURE__ */
|
|
3817
|
+
return /* @__PURE__ */ jsxs13("div", {
|
|
3651
3818
|
className: "skippr:flex skippr:items-start skippr:gap-2 skippr:animate-skippr-tab-fade",
|
|
3652
3819
|
children: [
|
|
3653
|
-
/* @__PURE__ */
|
|
3820
|
+
/* @__PURE__ */ jsx16("div", {
|
|
3654
3821
|
className: "skippr:mt-0.5 skippr:flex skippr:size-7 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-md skippr:bg-primary",
|
|
3655
|
-
children: /* @__PURE__ */
|
|
3822
|
+
children: /* @__PURE__ */ jsx16(Sparkles, {
|
|
3656
3823
|
className: "skippr:size-3.5 skippr:text-primary-foreground"
|
|
3657
3824
|
})
|
|
3658
3825
|
}),
|
|
3659
|
-
/* @__PURE__ */
|
|
3826
|
+
/* @__PURE__ */ jsxs13("div", {
|
|
3660
3827
|
className: "skippr:inline-flex skippr:items-center skippr:gap-1 skippr:rounded-2xl skippr:border skippr:border-primary/20 skippr:bg-primary/10 skippr:px-4 skippr:py-2 skippr:text-xs skippr:text-primary",
|
|
3661
3828
|
children: [
|
|
3662
|
-
/* @__PURE__ */
|
|
3829
|
+
/* @__PURE__ */ jsx16("span", {
|
|
3663
3830
|
children: "Agent is analyzing your screen"
|
|
3664
3831
|
}),
|
|
3665
|
-
/* @__PURE__ */
|
|
3832
|
+
/* @__PURE__ */ jsxs13("span", {
|
|
3666
3833
|
className: "skippr:inline-flex skippr:items-center skippr:gap-[2px]",
|
|
3667
3834
|
children: [
|
|
3668
|
-
/* @__PURE__ */
|
|
3835
|
+
/* @__PURE__ */ jsx16("span", {
|
|
3669
3836
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:0ms]"
|
|
3670
3837
|
}),
|
|
3671
|
-
/* @__PURE__ */
|
|
3838
|
+
/* @__PURE__ */ jsx16("span", {
|
|
3672
3839
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:200ms]"
|
|
3673
3840
|
}),
|
|
3674
|
-
/* @__PURE__ */
|
|
3841
|
+
/* @__PURE__ */ jsx16("span", {
|
|
3675
3842
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:400ms]"
|
|
3676
3843
|
})
|
|
3677
3844
|
]
|
|
@@ -3683,7 +3850,7 @@ function TypingIndicator() {
|
|
|
3683
3850
|
}
|
|
3684
3851
|
|
|
3685
3852
|
// src/components/MessageList.tsx
|
|
3686
|
-
import { jsx as
|
|
3853
|
+
import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
3687
3854
|
function MessageList({
|
|
3688
3855
|
messages,
|
|
3689
3856
|
isStreaming,
|
|
@@ -3693,29 +3860,29 @@ function MessageList({
|
|
|
3693
3860
|
}) {
|
|
3694
3861
|
const scrollRef = useRef11(null);
|
|
3695
3862
|
const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
|
|
3696
|
-
|
|
3863
|
+
useEffect17(() => {
|
|
3697
3864
|
scrollRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
3698
3865
|
}, [messages.length, lastMessage?.content]);
|
|
3699
3866
|
const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
|
|
3700
|
-
return /* @__PURE__ */
|
|
3867
|
+
return /* @__PURE__ */ jsxs14("div", {
|
|
3701
3868
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
3702
3869
|
children: [
|
|
3703
|
-
/* @__PURE__ */
|
|
3870
|
+
/* @__PURE__ */ jsxs14("div", {
|
|
3704
3871
|
className: "skippr:min-h-0 skippr:flex-1 skippr:space-y-4 skippr:overflow-y-auto skippr:p-4",
|
|
3705
3872
|
children: [
|
|
3706
|
-
messages.length === 0 && !showTyping && /* @__PURE__ */
|
|
3873
|
+
messages.length === 0 && !showTyping && /* @__PURE__ */ jsx17(LoadingDots, {
|
|
3707
3874
|
label: "Waiting for conversation to begin..."
|
|
3708
3875
|
}),
|
|
3709
|
-
messages.map((message) => /* @__PURE__ */
|
|
3876
|
+
messages.map((message) => /* @__PURE__ */ jsx17(ChatMessage, {
|
|
3710
3877
|
message
|
|
3711
3878
|
}, message.id)),
|
|
3712
|
-
showTyping && /* @__PURE__ */
|
|
3713
|
-
/* @__PURE__ */
|
|
3879
|
+
showTyping && /* @__PURE__ */ jsx17(TypingIndicator, {}),
|
|
3880
|
+
/* @__PURE__ */ jsx17("div", {
|
|
3714
3881
|
ref: scrollRef
|
|
3715
3882
|
})
|
|
3716
3883
|
]
|
|
3717
3884
|
}),
|
|
3718
|
-
/* @__PURE__ */
|
|
3885
|
+
/* @__PURE__ */ jsx17(ChatInput, {
|
|
3719
3886
|
sendChatMessage,
|
|
3720
3887
|
isSendingChat,
|
|
3721
3888
|
autoFocus
|
|
@@ -3725,8 +3892,8 @@ function MessageList({
|
|
|
3725
3892
|
}
|
|
3726
3893
|
|
|
3727
3894
|
// src/components/ModuleSelector.tsx
|
|
3728
|
-
import { useEffect as
|
|
3729
|
-
import { jsx as
|
|
3895
|
+
import { useEffect as useEffect18, useRef as useRef12, useState as useState14 } from "react";
|
|
3896
|
+
import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
3730
3897
|
var AGENT_TYPE_ICONS = {
|
|
3731
3898
|
onboarding: UserPlus,
|
|
3732
3899
|
demo: Rocket,
|
|
@@ -3749,9 +3916,9 @@ function ModuleSelector() {
|
|
|
3749
3916
|
} = useLiveAgent();
|
|
3750
3917
|
const isBusy = isStarting || isDisconnecting;
|
|
3751
3918
|
const scrollRef = useRef12(null);
|
|
3752
|
-
const [showScrollHint, setShowScrollHint] =
|
|
3753
|
-
const [isScrolled, setIsScrolled] =
|
|
3754
|
-
|
|
3919
|
+
const [showScrollHint, setShowScrollHint] = useState14(false);
|
|
3920
|
+
const [isScrolled, setIsScrolled] = useState14(false);
|
|
3921
|
+
useEffect18(() => {
|
|
3755
3922
|
const el = scrollRef.current;
|
|
3756
3923
|
if (!el)
|
|
3757
3924
|
return;
|
|
@@ -3773,26 +3940,26 @@ function ModuleSelector() {
|
|
|
3773
3940
|
};
|
|
3774
3941
|
}, []);
|
|
3775
3942
|
if (isLoadingModules && availableModules.length === 0) {
|
|
3776
|
-
return /* @__PURE__ */
|
|
3943
|
+
return /* @__PURE__ */ jsx18("div", {
|
|
3777
3944
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center skippr:p-6",
|
|
3778
|
-
children: /* @__PURE__ */
|
|
3945
|
+
children: /* @__PURE__ */ jsx18(LoadingDots, {
|
|
3779
3946
|
label: "Loading modules..."
|
|
3780
3947
|
})
|
|
3781
3948
|
});
|
|
3782
3949
|
}
|
|
3783
3950
|
if (modulesError) {
|
|
3784
|
-
return /* @__PURE__ */
|
|
3951
|
+
return /* @__PURE__ */ jsxs15("div", {
|
|
3785
3952
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:p-6 skippr:text-center",
|
|
3786
3953
|
children: [
|
|
3787
|
-
/* @__PURE__ */
|
|
3954
|
+
/* @__PURE__ */ jsx18("p", {
|
|
3788
3955
|
className: "skippr:text-sm skippr:text-foreground",
|
|
3789
3956
|
children: "Couldn't load modules."
|
|
3790
3957
|
}),
|
|
3791
|
-
/* @__PURE__ */
|
|
3958
|
+
/* @__PURE__ */ jsx18("p", {
|
|
3792
3959
|
className: "skippr:text-xs skippr:text-muted-foreground",
|
|
3793
3960
|
children: modulesError
|
|
3794
3961
|
}),
|
|
3795
|
-
/* @__PURE__ */
|
|
3962
|
+
/* @__PURE__ */ jsx18("button", {
|
|
3796
3963
|
type: "button",
|
|
3797
3964
|
onClick: () => void refetchModules(),
|
|
3798
3965
|
className: "skippr:cursor-pointer skippr:rounded-lg skippr:bg-foreground skippr:px-3 skippr:py-1.5 skippr:text-xs skippr:font-medium skippr:text-background",
|
|
@@ -3802,34 +3969,34 @@ function ModuleSelector() {
|
|
|
3802
3969
|
});
|
|
3803
3970
|
}
|
|
3804
3971
|
if (availableModules.length === 0) {
|
|
3805
|
-
return /* @__PURE__ */
|
|
3972
|
+
return /* @__PURE__ */ jsx18("div", {
|
|
3806
3973
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center skippr:p-6 skippr:text-center",
|
|
3807
|
-
children: /* @__PURE__ */
|
|
3974
|
+
children: /* @__PURE__ */ jsx18("p", {
|
|
3808
3975
|
className: "skippr:text-sm skippr:text-muted-foreground",
|
|
3809
3976
|
children: "No experts available."
|
|
3810
3977
|
})
|
|
3811
3978
|
});
|
|
3812
3979
|
}
|
|
3813
|
-
return /* @__PURE__ */
|
|
3980
|
+
return /* @__PURE__ */ jsxs15("div", {
|
|
3814
3981
|
className: "skippr:relative skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
3815
3982
|
children: [
|
|
3816
|
-
/* @__PURE__ */
|
|
3983
|
+
/* @__PURE__ */ jsxs15("div", {
|
|
3817
3984
|
ref: scrollRef,
|
|
3818
3985
|
className: "skippr-no-scrollbar skippr:flex-1 skippr:overflow-y-auto",
|
|
3819
3986
|
children: [
|
|
3820
|
-
/* @__PURE__ */
|
|
3987
|
+
/* @__PURE__ */ jsx18("h3", {
|
|
3821
3988
|
className: `skippr:sticky skippr:top-0 skippr:z-10 skippr:bg-background skippr:px-4 skippr:py-3 skippr:text-xs skippr:font-medium skippr:uppercase skippr:tracking-wider skippr:text-muted-foreground skippr:transition-shadow ${isScrolled ? "skippr:border-b skippr:border-border" : ""}`,
|
|
3822
3989
|
children: "Choose an agent"
|
|
3823
3990
|
}),
|
|
3824
|
-
/* @__PURE__ */
|
|
3991
|
+
/* @__PURE__ */ jsxs15("div", {
|
|
3825
3992
|
className: "skippr:px-4 skippr:pt-3 skippr:pb-5",
|
|
3826
3993
|
children: [
|
|
3827
|
-
error && /* @__PURE__ */
|
|
3994
|
+
error && /* @__PURE__ */ jsx18("div", {
|
|
3828
3995
|
role: "alert",
|
|
3829
3996
|
className: "skippr:mb-3 skippr:rounded-lg skippr:border skippr:border-destructive/20 skippr:bg-destructive/10 skippr:px-3 skippr:py-2 skippr:text-xs skippr:text-destructive",
|
|
3830
3997
|
children: error
|
|
3831
3998
|
}),
|
|
3832
|
-
/* @__PURE__ */
|
|
3999
|
+
/* @__PURE__ */ jsx18("div", {
|
|
3833
4000
|
className: "skippr:grid skippr:grid-cols-2 skippr:gap-2.5",
|
|
3834
4001
|
children: availableModules.map((module, index2) => {
|
|
3835
4002
|
const isFeatured = index2 === 0;
|
|
@@ -3841,50 +4008,50 @@ function ModuleSelector() {
|
|
|
3841
4008
|
const layout = isWide ? "skippr:items-center skippr:p-3.5 skippr:pb-5" : "skippr:flex-col skippr:items-start skippr:p-3.5";
|
|
3842
4009
|
const variant = isFeatured ? "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90" : "skippr:bg-background skippr:ring-1 skippr:ring-foreground/10 skippr:hover:bg-muted/50";
|
|
3843
4010
|
const span = isWide ? "skippr:col-span-2" : "";
|
|
3844
|
-
return /* @__PURE__ */
|
|
4011
|
+
return /* @__PURE__ */ jsxs15("button", {
|
|
3845
4012
|
type: "button",
|
|
3846
4013
|
disabled: isBusy || isTerminal,
|
|
3847
4014
|
onClick: () => selectModule(module.id),
|
|
3848
4015
|
className: `${base} ${layout} ${variant} ${span}`,
|
|
3849
4016
|
children: [
|
|
3850
|
-
/* @__PURE__ */
|
|
4017
|
+
/* @__PURE__ */ jsx18("div", {
|
|
3851
4018
|
className: isFeatured ? "skippr:flex skippr:h-9 skippr:w-9 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-lg skippr:bg-primary-foreground/15" : "skippr:flex skippr:h-9 skippr:w-9 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-lg skippr:bg-muted",
|
|
3852
|
-
children: /* @__PURE__ */
|
|
4019
|
+
children: /* @__PURE__ */ jsx18(Icon2, {
|
|
3853
4020
|
className: isFeatured ? "skippr:h-4 skippr:w-4" : "skippr:h-4 skippr:w-4 skippr:text-muted-foreground"
|
|
3854
4021
|
})
|
|
3855
4022
|
}),
|
|
3856
|
-
/* @__PURE__ */
|
|
4023
|
+
/* @__PURE__ */ jsxs15("div", {
|
|
3857
4024
|
className: "skippr:min-w-0 skippr:w-full skippr:space-y-0.5",
|
|
3858
4025
|
children: [
|
|
3859
|
-
/* @__PURE__ */
|
|
4026
|
+
/* @__PURE__ */ jsxs15("div", {
|
|
3860
4027
|
className: "skippr:flex skippr:items-center skippr:gap-1.5",
|
|
3861
4028
|
children: [
|
|
3862
|
-
/* @__PURE__ */
|
|
4029
|
+
/* @__PURE__ */ jsx18("p", {
|
|
3863
4030
|
className: "skippr:line-clamp-1 skippr:text-sm skippr:font-semibold",
|
|
3864
4031
|
children: module.name
|
|
3865
4032
|
}),
|
|
3866
|
-
sessionState === "resume" && /* @__PURE__ */
|
|
4033
|
+
sessionState === "resume" && /* @__PURE__ */ jsxs15("span", {
|
|
3867
4034
|
className: `skippr:inline-flex skippr:shrink-0 skippr:items-center skippr:gap-0.5 skippr:rounded-full skippr:px-1.5 skippr:py-0.5 skippr:text-[9px] skippr:font-medium skippr:uppercase skippr:tracking-wide ${isFeatured ? "skippr:bg-primary-foreground/20 skippr:text-primary-foreground" : "skippr:bg-bubble/15 skippr:text-bubble"}`,
|
|
3868
4035
|
children: [
|
|
3869
|
-
/* @__PURE__ */
|
|
4036
|
+
/* @__PURE__ */ jsx18(Play, {
|
|
3870
4037
|
className: "skippr:size-2.5"
|
|
3871
4038
|
}),
|
|
3872
4039
|
"Resume"
|
|
3873
4040
|
]
|
|
3874
4041
|
}),
|
|
3875
|
-
sessionState === "completed" && /* @__PURE__ */
|
|
4042
|
+
sessionState === "completed" && /* @__PURE__ */ jsxs15("span", {
|
|
3876
4043
|
className: "skippr:inline-flex skippr:shrink-0 skippr:items-center skippr:gap-0.5 skippr:rounded-full skippr:bg-muted skippr:px-1.5 skippr:py-0.5 skippr:text-[9px] skippr:font-medium skippr:uppercase skippr:tracking-wide skippr:text-muted-foreground",
|
|
3877
4044
|
children: [
|
|
3878
|
-
/* @__PURE__ */
|
|
4045
|
+
/* @__PURE__ */ jsx18(CircleCheck, {
|
|
3879
4046
|
className: "skippr:size-2.5"
|
|
3880
4047
|
}),
|
|
3881
4048
|
"Completed"
|
|
3882
4049
|
]
|
|
3883
4050
|
}),
|
|
3884
|
-
sessionState === "expired" && /* @__PURE__ */
|
|
4051
|
+
sessionState === "expired" && /* @__PURE__ */ jsxs15("span", {
|
|
3885
4052
|
className: "skippr:inline-flex skippr:shrink-0 skippr:items-center skippr:gap-0.5 skippr:rounded-full skippr:bg-muted skippr:px-1.5 skippr:py-0.5 skippr:text-[9px] skippr:font-medium skippr:uppercase skippr:tracking-wide skippr:text-muted-foreground",
|
|
3886
4053
|
children: [
|
|
3887
|
-
/* @__PURE__ */
|
|
4054
|
+
/* @__PURE__ */ jsx18(Clock, {
|
|
3888
4055
|
className: "skippr:size-2.5"
|
|
3889
4056
|
}),
|
|
3890
4057
|
"Expired"
|
|
@@ -3892,7 +4059,7 @@ function ModuleSelector() {
|
|
|
3892
4059
|
})
|
|
3893
4060
|
]
|
|
3894
4061
|
}),
|
|
3895
|
-
module.description && /* @__PURE__ */
|
|
4062
|
+
module.description && /* @__PURE__ */ jsx18("p", {
|
|
3896
4063
|
className: isFeatured ? "skippr:line-clamp-2 skippr:text-[11px] skippr:leading-snug skippr:text-primary-foreground/70" : "skippr:line-clamp-2 skippr:text-[11px] skippr:leading-snug skippr:text-muted-foreground",
|
|
3897
4064
|
children: module.description
|
|
3898
4065
|
})
|
|
@@ -3906,7 +4073,7 @@ function ModuleSelector() {
|
|
|
3906
4073
|
})
|
|
3907
4074
|
]
|
|
3908
4075
|
}),
|
|
3909
|
-
showScrollHint && /* @__PURE__ */
|
|
4076
|
+
showScrollHint && /* @__PURE__ */ jsx18("div", {
|
|
3910
4077
|
className: "skippr:pointer-events-none skippr:absolute skippr:bottom-0 skippr:left-0 skippr:right-0 skippr:h-12 skippr:bg-gradient-to-t skippr:from-background skippr:to-transparent"
|
|
3911
4078
|
})
|
|
3912
4079
|
]
|
|
@@ -3914,49 +4081,49 @@ function ModuleSelector() {
|
|
|
3914
4081
|
}
|
|
3915
4082
|
|
|
3916
4083
|
// src/components/SessionAgenda.tsx
|
|
3917
|
-
import { jsx as
|
|
4084
|
+
import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
3918
4085
|
function SessionAgenda({ phases, hasStarted }) {
|
|
3919
4086
|
if (phases.length === 0 || !hasStarted) {
|
|
3920
|
-
return /* @__PURE__ */
|
|
4087
|
+
return /* @__PURE__ */ jsx19("div", {
|
|
3921
4088
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
3922
|
-
children: /* @__PURE__ */
|
|
4089
|
+
children: /* @__PURE__ */ jsx19(LoadingDots, {
|
|
3923
4090
|
label: "Waiting for agenda to load..."
|
|
3924
4091
|
})
|
|
3925
4092
|
});
|
|
3926
4093
|
}
|
|
3927
|
-
return /* @__PURE__ */
|
|
4094
|
+
return /* @__PURE__ */ jsx19("div", {
|
|
3928
4095
|
className: "skippr:flex-1 skippr:overflow-y-auto skippr:px-4 skippr:py-4",
|
|
3929
|
-
children: /* @__PURE__ */
|
|
4096
|
+
children: /* @__PURE__ */ jsx19("div", {
|
|
3930
4097
|
className: "skippr:space-y-1",
|
|
3931
4098
|
children: phases.map((phase) => {
|
|
3932
4099
|
const isActive = phase.status === "active";
|
|
3933
4100
|
const isCompleted = phase.status === "completed";
|
|
3934
|
-
return /* @__PURE__ */
|
|
4101
|
+
return /* @__PURE__ */ jsxs16("div", {
|
|
3935
4102
|
className: cn("skippr:flex skippr:items-start skippr:gap-2.5 skippr:rounded-lg skippr:p-2 skippr:transition-colors", isActive && "skippr:bg-primary/10"),
|
|
3936
4103
|
children: [
|
|
3937
|
-
/* @__PURE__ */
|
|
4104
|
+
/* @__PURE__ */ jsx19("div", {
|
|
3938
4105
|
className: "skippr:mt-0.5",
|
|
3939
|
-
children: isCompleted ? /* @__PURE__ */
|
|
4106
|
+
children: isCompleted ? /* @__PURE__ */ jsx19(CircleCheck, {
|
|
3940
4107
|
className: "skippr:size-4 skippr:text-chart-3"
|
|
3941
|
-
}) : isActive ? /* @__PURE__ */
|
|
4108
|
+
}) : isActive ? /* @__PURE__ */ jsx19(Circle, {
|
|
3942
4109
|
className: "skippr:size-4 skippr:fill-primary/30 skippr:text-primary"
|
|
3943
|
-
}) : /* @__PURE__ */
|
|
4110
|
+
}) : /* @__PURE__ */ jsx19(Circle, {
|
|
3944
4111
|
className: "skippr:size-4 skippr:text-muted-foreground/30"
|
|
3945
4112
|
})
|
|
3946
4113
|
}),
|
|
3947
|
-
/* @__PURE__ */
|
|
4114
|
+
/* @__PURE__ */ jsxs16("div", {
|
|
3948
4115
|
className: "skippr:min-w-0 skippr:flex-1",
|
|
3949
4116
|
children: [
|
|
3950
|
-
/* @__PURE__ */
|
|
4117
|
+
/* @__PURE__ */ jsx19("p", {
|
|
3951
4118
|
className: cn("skippr:text-sm", isCompleted && "skippr:text-muted-foreground skippr:line-through", isActive && "skippr:font-medium skippr:text-foreground", phase.status === "pending" && "skippr:text-muted-foreground"),
|
|
3952
4119
|
children: phase.name
|
|
3953
4120
|
}),
|
|
3954
|
-
phase.highlights.length > 0 && /* @__PURE__ */
|
|
4121
|
+
phase.highlights.length > 0 && /* @__PURE__ */ jsx19("ul", {
|
|
3955
4122
|
className: "skippr:mt-1 skippr:space-y-0.5",
|
|
3956
|
-
children: phase.highlights.map((text) => /* @__PURE__ */
|
|
4123
|
+
children: phase.highlights.map((text) => /* @__PURE__ */ jsxs16("li", {
|
|
3957
4124
|
className: cn("skippr:flex skippr:items-center skippr:gap-1.5 skippr:text-[11px] skippr:leading-tight", isCompleted ? "skippr:text-muted-foreground/40 skippr:line-through" : "skippr:text-muted-foreground/70"),
|
|
3958
4125
|
children: [
|
|
3959
|
-
/* @__PURE__ */
|
|
4126
|
+
/* @__PURE__ */ jsx19("span", {
|
|
3960
4127
|
className: "skippr:size-1 skippr:shrink-0 skippr:rounded-full skippr:bg-current"
|
|
3961
4128
|
}),
|
|
3962
4129
|
text
|
|
@@ -3973,12 +4140,12 @@ function SessionAgenda({ phases, hasStarted }) {
|
|
|
3973
4140
|
}
|
|
3974
4141
|
|
|
3975
4142
|
// src/components/SessionWarningBanner.tsx
|
|
3976
|
-
import { jsx as
|
|
4143
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
3977
4144
|
var SESSION_WARNING_THRESHOLD_SECS = 60;
|
|
3978
4145
|
function SessionWarningBanner({ remaining }) {
|
|
3979
4146
|
if (remaining === null || remaining <= 0 || remaining > SESSION_WARNING_THRESHOLD_SECS)
|
|
3980
4147
|
return null;
|
|
3981
|
-
return /* @__PURE__ */
|
|
4148
|
+
return /* @__PURE__ */ jsx20("div", {
|
|
3982
4149
|
"data-testid": "session-warning-banner",
|
|
3983
4150
|
className: "skippr:bg-red-50 skippr:px-4 skippr:py-1.5 skippr:text-center skippr:text-xs skippr:font-medium skippr:text-red-700",
|
|
3984
4151
|
children: "Session ending soon"
|
|
@@ -3986,7 +4153,7 @@ function SessionWarningBanner({ remaining }) {
|
|
|
3986
4153
|
}
|
|
3987
4154
|
|
|
3988
4155
|
// src/components/StartSessionPrompt.tsx
|
|
3989
|
-
import { jsx as
|
|
4156
|
+
import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
3990
4157
|
var PROMPT_BUTTON = "skippr:cursor-pointer skippr:rounded-xl skippr:bg-primary skippr:px-8 skippr:py-3 skippr:text-sm skippr:font-medium skippr:text-primary-foreground skippr:transition-all skippr:hover:bg-primary/90 skippr:disabled:cursor-not-allowed skippr:disabled:opacity-60";
|
|
3991
4158
|
function StartSessionPrompt({
|
|
3992
4159
|
onStartSession,
|
|
@@ -3998,16 +4165,16 @@ function StartSessionPrompt({
|
|
|
3998
4165
|
canResume = false,
|
|
3999
4166
|
onResume
|
|
4000
4167
|
}) {
|
|
4001
|
-
return /* @__PURE__ */
|
|
4168
|
+
return /* @__PURE__ */ jsxs17("div", {
|
|
4002
4169
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:px-4",
|
|
4003
4170
|
children: [
|
|
4004
|
-
canResume && onResume ? /* @__PURE__ */
|
|
4171
|
+
canResume && onResume ? /* @__PURE__ */ jsx21("button", {
|
|
4005
4172
|
type: "button",
|
|
4006
4173
|
onClick: onResume,
|
|
4007
4174
|
disabled: isStarting,
|
|
4008
4175
|
className: PROMPT_BUTTON,
|
|
4009
4176
|
children: isStarting ? "Resuming..." : "Resume session"
|
|
4010
|
-
}) : /* @__PURE__ */
|
|
4177
|
+
}) : /* @__PURE__ */ jsx21("button", {
|
|
4011
4178
|
type: "button",
|
|
4012
4179
|
onClick: () => {
|
|
4013
4180
|
if (!agentId)
|
|
@@ -4018,7 +4185,7 @@ function StartSessionPrompt({
|
|
|
4018
4185
|
className: PROMPT_BUTTON,
|
|
4019
4186
|
children: isStarting ? "Starting..." : label
|
|
4020
4187
|
}),
|
|
4021
|
-
error && /* @__PURE__ */
|
|
4188
|
+
error && /* @__PURE__ */ jsx21("p", {
|
|
4022
4189
|
className: "skippr:text-xs skippr:text-destructive",
|
|
4023
4190
|
children: error
|
|
4024
4191
|
})
|
|
@@ -4027,7 +4194,7 @@ function StartSessionPrompt({
|
|
|
4027
4194
|
}
|
|
4028
4195
|
|
|
4029
4196
|
// src/components/Sidebar.tsx
|
|
4030
|
-
import { jsx as
|
|
4197
|
+
import { jsx as jsx22, jsxs as jsxs18, Fragment as Fragment5 } from "react/jsx-runtime";
|
|
4031
4198
|
function Sidebar({
|
|
4032
4199
|
hideControls = false,
|
|
4033
4200
|
hideHeader = false,
|
|
@@ -4063,13 +4230,13 @@ function Sidebar({
|
|
|
4063
4230
|
agentMode,
|
|
4064
4231
|
agentControls
|
|
4065
4232
|
} = useLiveAgent();
|
|
4066
|
-
const internalCtx =
|
|
4233
|
+
const internalCtx = useContext6(LiveAgentContext);
|
|
4067
4234
|
const usesHostAuth = internalCtx?.usesHostAuth ?? false;
|
|
4068
4235
|
const authFailed = internalCtx?.authFailed ?? false;
|
|
4069
4236
|
const showAgenda = agentMode !== AGENT_MODE.AlwaysOn;
|
|
4070
4237
|
const isFloating = variant === "floating";
|
|
4071
4238
|
const isSidebar = variant === "sidebar";
|
|
4072
|
-
|
|
4239
|
+
useEffect19(() => {
|
|
4073
4240
|
if (!isSidebar)
|
|
4074
4241
|
return;
|
|
4075
4242
|
const prop = position === "right" ? "marginRight" : "marginLeft";
|
|
@@ -4083,12 +4250,12 @@ function Sidebar({
|
|
|
4083
4250
|
document.body.style.transition = "";
|
|
4084
4251
|
};
|
|
4085
4252
|
}, [isSidebar, isPanelOpen, position]);
|
|
4086
|
-
return /* @__PURE__ */
|
|
4253
|
+
return /* @__PURE__ */ jsxs18("div", {
|
|
4087
4254
|
className: cn("skippr:fixed skippr:z-[9999]", "skippr:bg-card", "skippr:flex skippr:flex-col", "skippr:overflow-hidden", isFloating && "skippr:border skippr:border-border skippr:bottom-[88px] skippr:h-[min(460px,calc(100vh-200px))] skippr:rounded-2xl skippr:shadow-[0_8px_30px_rgba(0,0,0,0.16),0_4px_12px_rgba(0,0,0,0.08)]", isFloating && (position === "right" ? "skippr:right-6" : "skippr:left-6"), isFloating && "skippr:transition-[opacity,transform] skippr:duration-300 skippr:ease-in-out", isFloating && (position === "right" ? "skippr:origin-bottom-right" : "skippr:origin-bottom-left"), isFloating && !isPanelOpen && "skippr:scale-0 skippr:opacity-0 skippr:pointer-events-none", isFloating && isPanelOpen && "skippr:scale-100 skippr:opacity-100", isSidebar && "skippr:top-0 skippr:h-full", isSidebar && "skippr:transition-[width] skippr:duration-300 skippr:ease-in-out", isSidebar && position === "right" && "skippr:right-0 skippr:border-l skippr:border-l-border", isSidebar && position === "left" && "skippr:left-0 skippr:border-r skippr:border-r-border", isSidebar && !isPanelOpen && "skippr:w-0 skippr:border-0"),
|
|
4088
4255
|
style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined },
|
|
4089
4256
|
children: [
|
|
4090
|
-
!hideHeader && /* @__PURE__ */
|
|
4091
|
-
authFailed ? /* @__PURE__ */
|
|
4257
|
+
!hideHeader && /* @__PURE__ */ jsx22(ChatHeader, {}),
|
|
4258
|
+
authFailed ? /* @__PURE__ */ jsx22(AuthError, {}) : isAuthenticated ? /* @__PURE__ */ jsx22(AuthenticatedContent, {
|
|
4092
4259
|
isConnected,
|
|
4093
4260
|
isPaused,
|
|
4094
4261
|
isPausing,
|
|
@@ -4110,12 +4277,12 @@ function Sidebar({
|
|
|
4110
4277
|
agentId,
|
|
4111
4278
|
agentControls,
|
|
4112
4279
|
showAgenda
|
|
4113
|
-
}) : usesHostAuth || isValidating ? /* @__PURE__ */
|
|
4280
|
+
}) : usesHostAuth || isValidating ? /* @__PURE__ */ jsx22("div", {
|
|
4114
4281
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
4115
|
-
children: /* @__PURE__ */
|
|
4282
|
+
children: /* @__PURE__ */ jsx22(LoadingDots, {
|
|
4116
4283
|
label: "Loading..."
|
|
4117
4284
|
})
|
|
4118
|
-
}) : /* @__PURE__ */
|
|
4285
|
+
}) : /* @__PURE__ */ jsx22(LoginFlow, {
|
|
4119
4286
|
requestOtp,
|
|
4120
4287
|
verifyOtp,
|
|
4121
4288
|
error: authError,
|
|
@@ -4159,63 +4326,63 @@ function AuthenticatedContent({
|
|
|
4159
4326
|
} else if (isPaused) {
|
|
4160
4327
|
transitionLabel = "Paused";
|
|
4161
4328
|
}
|
|
4162
|
-
return /* @__PURE__ */
|
|
4329
|
+
return /* @__PURE__ */ jsxs18(Fragment5, {
|
|
4163
4330
|
children: [
|
|
4164
|
-
isConnected && /* @__PURE__ */
|
|
4165
|
-
showTabBar && /* @__PURE__ */
|
|
4331
|
+
isConnected && /* @__PURE__ */ jsx22(ConnectedBanner, {}),
|
|
4332
|
+
showTabBar && /* @__PURE__ */ jsxs18("div", {
|
|
4166
4333
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-2",
|
|
4167
4334
|
children: [
|
|
4168
|
-
/* @__PURE__ */
|
|
4335
|
+
/* @__PURE__ */ jsxs18("button", {
|
|
4169
4336
|
type: "button",
|
|
4170
4337
|
className: cn("skippr:relative skippr:inline-flex skippr:cursor-pointer skippr:items-center skippr:gap-1.5 skippr:rounded-lg skippr:px-3 skippr:py-2 skippr:text-sm skippr:font-medium skippr:transition-all", activeTab === "chat" ? "skippr:text-foreground" : "skippr:text-muted-foreground skippr:hover:text-foreground"),
|
|
4171
4338
|
onClick: () => onTabChange("chat"),
|
|
4172
4339
|
children: [
|
|
4173
|
-
/* @__PURE__ */
|
|
4340
|
+
/* @__PURE__ */ jsx22(MessageCircle, {
|
|
4174
4341
|
className: "skippr:size-3.5"
|
|
4175
4342
|
}),
|
|
4176
4343
|
"Chat",
|
|
4177
|
-
activeTab === "chat" && /* @__PURE__ */
|
|
4344
|
+
activeTab === "chat" && /* @__PURE__ */ jsx22("span", {
|
|
4178
4345
|
className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
4179
4346
|
})
|
|
4180
4347
|
]
|
|
4181
4348
|
}),
|
|
4182
|
-
showAgenda && /* @__PURE__ */
|
|
4349
|
+
showAgenda && /* @__PURE__ */ jsxs18("button", {
|
|
4183
4350
|
type: "button",
|
|
4184
4351
|
className: cn("skippr:relative skippr:inline-flex skippr:cursor-pointer skippr:items-center skippr:gap-1.5 skippr:rounded-lg skippr:px-3 skippr:py-2 skippr:text-sm skippr:font-medium skippr:transition-all", activeTab === "agenda" ? "skippr:text-foreground" : "skippr:text-muted-foreground skippr:hover:text-foreground"),
|
|
4185
4352
|
onClick: () => onTabChange("agenda"),
|
|
4186
4353
|
children: [
|
|
4187
|
-
/* @__PURE__ */
|
|
4354
|
+
/* @__PURE__ */ jsx22(Calendar, {
|
|
4188
4355
|
className: "skippr:size-3.5"
|
|
4189
4356
|
}),
|
|
4190
4357
|
"Agenda",
|
|
4191
|
-
activeTab === "agenda" && /* @__PURE__ */
|
|
4358
|
+
activeTab === "agenda" && /* @__PURE__ */ jsx22("span", {
|
|
4192
4359
|
className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
4193
4360
|
})
|
|
4194
4361
|
]
|
|
4195
4362
|
})
|
|
4196
4363
|
]
|
|
4197
4364
|
}),
|
|
4198
|
-
/* @__PURE__ */
|
|
4365
|
+
/* @__PURE__ */ jsx22("div", {
|
|
4199
4366
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
4200
|
-
children: isDisconnecting ? /* @__PURE__ */
|
|
4367
|
+
children: isDisconnecting ? /* @__PURE__ */ jsx22("div", {
|
|
4201
4368
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
4202
|
-
children: /* @__PURE__ */
|
|
4369
|
+
children: /* @__PURE__ */ jsx22(LoadingDots, {
|
|
4203
4370
|
label: "Ending session..."
|
|
4204
4371
|
})
|
|
4205
|
-
}) : showSelectorAsPrompt ? /* @__PURE__ */
|
|
4372
|
+
}) : showSelectorAsPrompt ? /* @__PURE__ */ jsx22(ModuleSelector, {}) : inSession ? /* @__PURE__ */ jsxs18(Fragment5, {
|
|
4206
4373
|
children: [
|
|
4207
|
-
transitionLabel && /* @__PURE__ */
|
|
4374
|
+
transitionLabel && /* @__PURE__ */ jsx22("div", {
|
|
4208
4375
|
className: "skippr:shrink-0 skippr:border-b skippr:border-border skippr:bg-muted/50 skippr:px-3 skippr:py-1.5 skippr:text-center skippr:text-xs skippr:text-muted-foreground",
|
|
4209
4376
|
children: transitionLabel
|
|
4210
4377
|
}),
|
|
4211
|
-
/* @__PURE__ */
|
|
4378
|
+
/* @__PURE__ */ jsx22(ConnectedBody, {
|
|
4212
4379
|
activeTab: effectiveTab,
|
|
4213
4380
|
autoFocusChat
|
|
4214
4381
|
})
|
|
4215
4382
|
]
|
|
4216
|
-
}) : /* @__PURE__ */
|
|
4383
|
+
}) : /* @__PURE__ */ jsx22("div", {
|
|
4217
4384
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
|
|
4218
|
-
children: /* @__PURE__ */
|
|
4385
|
+
children: /* @__PURE__ */ jsx22(StartSessionPrompt, {
|
|
4219
4386
|
onStartSession,
|
|
4220
4387
|
agentId,
|
|
4221
4388
|
agentControls,
|
|
@@ -4227,7 +4394,7 @@ function AuthenticatedContent({
|
|
|
4227
4394
|
})
|
|
4228
4395
|
}, `${activeTab}-empty`)
|
|
4229
4396
|
}),
|
|
4230
|
-
(isConnected || isPaused) && !isDisconnecting && !hideControls && /* @__PURE__ */
|
|
4397
|
+
(isConnected || isPaused) && !isDisconnecting && !hideControls && /* @__PURE__ */ jsx22(MeetingControls, {
|
|
4231
4398
|
onHangUp: onDisconnect,
|
|
4232
4399
|
onPause,
|
|
4233
4400
|
onResume,
|
|
@@ -4239,17 +4406,17 @@ function AuthenticatedContent({
|
|
|
4239
4406
|
});
|
|
4240
4407
|
}
|
|
4241
4408
|
function AuthError() {
|
|
4242
|
-
return /* @__PURE__ */
|
|
4409
|
+
return /* @__PURE__ */ jsxs18("div", {
|
|
4243
4410
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:px-6 skippr:py-4 skippr:text-center",
|
|
4244
4411
|
children: [
|
|
4245
|
-
/* @__PURE__ */
|
|
4412
|
+
/* @__PURE__ */ jsx22(CircleAlert, {
|
|
4246
4413
|
className: "skippr:mb-3 skippr:size-7 skippr:text-destructive"
|
|
4247
4414
|
}),
|
|
4248
|
-
/* @__PURE__ */
|
|
4415
|
+
/* @__PURE__ */ jsx22("p", {
|
|
4249
4416
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
4250
4417
|
children: "We couldn't verify your session"
|
|
4251
4418
|
}),
|
|
4252
|
-
/* @__PURE__ */
|
|
4419
|
+
/* @__PURE__ */ jsx22("p", {
|
|
4253
4420
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
4254
4421
|
children: "Please contact administrator."
|
|
4255
4422
|
})
|
|
@@ -4258,7 +4425,7 @@ function AuthError() {
|
|
|
4258
4425
|
}
|
|
4259
4426
|
function ConnectedBanner() {
|
|
4260
4427
|
const remaining = useSessionRemaining();
|
|
4261
|
-
return /* @__PURE__ */
|
|
4428
|
+
return /* @__PURE__ */ jsx22(SessionWarningBanner, {
|
|
4262
4429
|
remaining
|
|
4263
4430
|
});
|
|
4264
4431
|
}
|
|
@@ -4269,17 +4436,17 @@ function ConnectedBody({
|
|
|
4269
4436
|
const { allMessages, agentState, sendChatMessage, isSendingChat } = useCombinedMessages();
|
|
4270
4437
|
const { phases } = usePhaseUpdates();
|
|
4271
4438
|
if (activeTab === "agenda") {
|
|
4272
|
-
return /* @__PURE__ */
|
|
4439
|
+
return /* @__PURE__ */ jsx22("div", {
|
|
4273
4440
|
className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto skippr:animate-skippr-tab-fade",
|
|
4274
|
-
children: /* @__PURE__ */
|
|
4441
|
+
children: /* @__PURE__ */ jsx22(SessionAgenda, {
|
|
4275
4442
|
phases,
|
|
4276
4443
|
hasStarted: allMessages.length > 0 || agentState === "speaking"
|
|
4277
4444
|
})
|
|
4278
4445
|
}, "agenda");
|
|
4279
4446
|
}
|
|
4280
|
-
return /* @__PURE__ */
|
|
4447
|
+
return /* @__PURE__ */ jsx22("div", {
|
|
4281
4448
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
|
|
4282
|
-
children: /* @__PURE__ */
|
|
4449
|
+
children: /* @__PURE__ */ jsx22(MessageList, {
|
|
4283
4450
|
messages: allMessages,
|
|
4284
4451
|
isStreaming: agentState === "speaking",
|
|
4285
4452
|
sendChatMessage,
|
|
@@ -4290,28 +4457,28 @@ function ConnectedBody({
|
|
|
4290
4457
|
}
|
|
4291
4458
|
|
|
4292
4459
|
// src/components/SidebarTrigger.tsx
|
|
4293
|
-
import { jsx as
|
|
4460
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
4294
4461
|
function SidebarTrigger() {
|
|
4295
4462
|
const { isPanelOpen, togglePanel, minimizePanel, minimizable, position, isMinimized } = useLiveAgent();
|
|
4296
4463
|
if (isMinimized)
|
|
4297
4464
|
return null;
|
|
4298
4465
|
const handleClick = isPanelOpen && minimizable ? minimizePanel : togglePanel;
|
|
4299
|
-
return /* @__PURE__ */
|
|
4466
|
+
return /* @__PURE__ */ jsx23("button", {
|
|
4300
4467
|
type: "button",
|
|
4301
4468
|
onClick: handleClick,
|
|
4302
4469
|
title: isPanelOpen ? "Close chat" : "Open chat",
|
|
4303
4470
|
"aria-label": isPanelOpen ? "Close chat" : "Open chat",
|
|
4304
4471
|
className: cn("skippr:fixed skippr:bottom-6 skippr:z-[9998]", "skippr:flex skippr:size-12 skippr:items-center skippr:justify-center", "skippr:shadow-[0_4px_16px_rgba(45,43,61,0.45),0_2px_4px_rgba(0,0,0,0.1)] skippr:transition-all", "skippr:cursor-pointer skippr:hover:brightness-110 skippr:hover:-translate-y-0.5 skippr:active:translate-y-0", isPanelOpen ? "skippr:rounded-[14px] skippr:bg-bubble skippr:text-white" : "skippr:rounded-[10px] skippr:overflow-hidden", position === "right" ? "skippr:right-6" : "skippr:left-6"),
|
|
4305
|
-
children: isPanelOpen ? /* @__PURE__ */
|
|
4472
|
+
children: isPanelOpen ? /* @__PURE__ */ jsx23(ChevronDown, {
|
|
4306
4473
|
className: "skippr:size-5"
|
|
4307
|
-
}) : /* @__PURE__ */
|
|
4474
|
+
}) : /* @__PURE__ */ jsx23(Logo, {
|
|
4308
4475
|
className: "skippr:size-12"
|
|
4309
4476
|
})
|
|
4310
4477
|
});
|
|
4311
4478
|
}
|
|
4312
4479
|
|
|
4313
4480
|
// src/components/LiveAgent.tsx
|
|
4314
|
-
import { jsx as
|
|
4481
|
+
import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
4315
4482
|
function LiveAgent(props) {
|
|
4316
4483
|
const {
|
|
4317
4484
|
agentId: hostAgentId,
|
|
@@ -4343,24 +4510,24 @@ function LiveAgent(props) {
|
|
|
4343
4510
|
const usesHostAuth = !!getUserToken || !!userToken || !!authTokenProp;
|
|
4344
4511
|
const effectiveAuthToken = usesHostAuth ? authTokenProp : auth.authToken ?? undefined;
|
|
4345
4512
|
const hasModuleSelector = !hostAgentId;
|
|
4346
|
-
const [activeModule, setActiveModule] =
|
|
4513
|
+
const [activeModule, setActiveModule] = useState15(null);
|
|
4347
4514
|
const agentId = hasModuleSelector ? activeModule?.id ?? null : hostAgentId;
|
|
4348
4515
|
const agentControls = hasModuleSelector ? activeModule?.controls : hostAgentControls;
|
|
4349
|
-
const minimizeOnSessionStart =
|
|
4516
|
+
const minimizeOnSessionStart = useCallback10(() => {
|
|
4350
4517
|
if (minimizable) {
|
|
4351
4518
|
setIsMinimized(true);
|
|
4352
4519
|
setIsPanelOpen(false);
|
|
4353
4520
|
}
|
|
4354
4521
|
}, [minimizable]);
|
|
4355
|
-
const expandOnSessionStartError =
|
|
4522
|
+
const expandOnSessionStartError = useCallback10(() => {
|
|
4356
4523
|
setIsMinimized(false);
|
|
4357
4524
|
setIsPanelOpen(true);
|
|
4358
4525
|
}, []);
|
|
4359
|
-
const minimizeOnSessionDisconnect =
|
|
4526
|
+
const minimizeOnSessionDisconnect = useCallback10(() => {
|
|
4360
4527
|
if (hasModuleSelector) {
|
|
4361
4528
|
setActiveModule(null);
|
|
4362
4529
|
}
|
|
4363
|
-
if (minimizable
|
|
4530
|
+
if (minimizable) {
|
|
4364
4531
|
setIsMinimized(true);
|
|
4365
4532
|
setIsPanelOpen(false);
|
|
4366
4533
|
}
|
|
@@ -4394,22 +4561,33 @@ function LiveAgent(props) {
|
|
|
4394
4561
|
});
|
|
4395
4562
|
const teardownInFlightRef = useRef13(false);
|
|
4396
4563
|
teardownInFlightRef.current = isPaused || isPausing || isDisconnecting;
|
|
4397
|
-
const handleRoomDisconnected =
|
|
4564
|
+
const handleRoomDisconnected = useCallback10(() => {
|
|
4398
4565
|
if (teardownInFlightRef.current)
|
|
4399
4566
|
return;
|
|
4400
4567
|
disconnect();
|
|
4401
4568
|
}, [disconnect]);
|
|
4402
|
-
const
|
|
4403
|
-
const [
|
|
4404
|
-
const [
|
|
4405
|
-
const [
|
|
4569
|
+
const inSession = connection !== null || isStarting || isPaused || isPausing || isDisconnecting;
|
|
4570
|
+
const [isPanelOpen, setIsPanelOpen] = useState15(defaultOpen);
|
|
4571
|
+
const [isMinimized, setIsMinimized] = useState15(minimizable && !defaultOpen);
|
|
4572
|
+
const [sidebarTab, setSidebarTab] = useState15("agenda");
|
|
4573
|
+
const [phasesSnapshot, setPhasesSnapshot] = useState15([]);
|
|
4406
4574
|
const {
|
|
4407
4575
|
modules: availableModules,
|
|
4408
4576
|
isLoading: isLoadingModules,
|
|
4409
4577
|
error: modulesError,
|
|
4410
4578
|
refetch: refetchModules
|
|
4411
4579
|
} = useAvailableModules({
|
|
4412
|
-
enabled:
|
|
4580
|
+
enabled: !inSession,
|
|
4581
|
+
bearerToken,
|
|
4582
|
+
authedFetch
|
|
4583
|
+
});
|
|
4584
|
+
const hasAlwaysOnModule = availableModules.some((m) => m.mode === AGENT_MODE.AlwaysOn);
|
|
4585
|
+
const {
|
|
4586
|
+
goals: adoptionGoals,
|
|
4587
|
+
dismissGoal: dismissAdoptionGoal,
|
|
4588
|
+
attendGoal
|
|
4589
|
+
} = useAdoptionGoals({
|
|
4590
|
+
enabled: !inSession && hasAlwaysOnModule,
|
|
4413
4591
|
bearerToken,
|
|
4414
4592
|
authedFetch
|
|
4415
4593
|
});
|
|
@@ -4422,7 +4600,7 @@ function LiveAgent(props) {
|
|
|
4422
4600
|
}, [activeModule, hostAgentId, availableModules]);
|
|
4423
4601
|
const agentMode = activeModuleForAgent?.mode ?? null;
|
|
4424
4602
|
const resumableSession = useMemo5(() => getResumableSession(activeModuleForAgent), [activeModuleForAgent]);
|
|
4425
|
-
const resumeSession =
|
|
4603
|
+
const resumeSession = useCallback10(async () => {
|
|
4426
4604
|
if (!resumableSession)
|
|
4427
4605
|
return;
|
|
4428
4606
|
await startSession({
|
|
@@ -4431,7 +4609,7 @@ function LiveAgent(props) {
|
|
|
4431
4609
|
existingSessionId: resumableSession.id
|
|
4432
4610
|
});
|
|
4433
4611
|
}, [resumableSession, startSession, agentControls]);
|
|
4434
|
-
const selectModule =
|
|
4612
|
+
const selectModule = useCallback10((moduleId) => {
|
|
4435
4613
|
const found = availableModules.find((m) => m.id === moduleId);
|
|
4436
4614
|
if (!found)
|
|
4437
4615
|
return;
|
|
@@ -4442,9 +4620,20 @@ function LiveAgent(props) {
|
|
|
4442
4620
|
existingSessionId: getResumableSessionId(found.currentSession, found.mode)
|
|
4443
4621
|
});
|
|
4444
4622
|
}, [availableModules, startSession]);
|
|
4445
|
-
const
|
|
4446
|
-
|
|
4447
|
-
|
|
4623
|
+
const startAdoptionSession = useCallback10((goal) => {
|
|
4624
|
+
attendGoal(goal.goalId);
|
|
4625
|
+
const found = availableModules.find((m) => m.id === goal.agentId);
|
|
4626
|
+
if (found)
|
|
4627
|
+
setActiveModule(found);
|
|
4628
|
+
startSession({
|
|
4629
|
+
agentId: goal.agentId,
|
|
4630
|
+
agentControls: found?.controls,
|
|
4631
|
+
adoptionGoalId: goal.goalId
|
|
4632
|
+
});
|
|
4633
|
+
}, [attendGoal, availableModules, startSession]);
|
|
4634
|
+
const [welcomeDismissed, setWelcomeDismissed] = useState15(false);
|
|
4635
|
+
const dismissWelcome = useCallback10(() => setWelcomeDismissed(true), []);
|
|
4636
|
+
const [currentPosition, setCurrentPosition] = useState15(() => {
|
|
4448
4637
|
try {
|
|
4449
4638
|
const saved = localStorage.getItem("skippr_widget_position");
|
|
4450
4639
|
if (saved === "left" || saved === "right")
|
|
@@ -4452,20 +4641,20 @@ function LiveAgent(props) {
|
|
|
4452
4641
|
} catch {}
|
|
4453
4642
|
return position;
|
|
4454
4643
|
});
|
|
4455
|
-
const setPositionWithPersist =
|
|
4644
|
+
const setPositionWithPersist = useCallback10((pos) => {
|
|
4456
4645
|
setCurrentPosition(pos);
|
|
4457
4646
|
try {
|
|
4458
4647
|
localStorage.setItem("skippr_widget_position", pos);
|
|
4459
4648
|
} catch {}
|
|
4460
4649
|
}, []);
|
|
4461
|
-
const openPanel =
|
|
4462
|
-
const closePanel =
|
|
4463
|
-
const togglePanel =
|
|
4464
|
-
const expandPanel =
|
|
4650
|
+
const openPanel = useCallback10(() => setIsPanelOpen(true), []);
|
|
4651
|
+
const closePanel = useCallback10(() => setIsPanelOpen(false), []);
|
|
4652
|
+
const togglePanel = useCallback10(() => setIsPanelOpen((prev) => !prev), []);
|
|
4653
|
+
const expandPanel = useCallback10(() => {
|
|
4465
4654
|
setIsMinimized(false);
|
|
4466
4655
|
setIsPanelOpen(true);
|
|
4467
4656
|
}, []);
|
|
4468
|
-
const minimizePanel =
|
|
4657
|
+
const minimizePanel = useCallback10(() => {
|
|
4469
4658
|
if (!minimizable)
|
|
4470
4659
|
return;
|
|
4471
4660
|
setIsMinimized(true);
|
|
@@ -4524,7 +4713,10 @@ function LiveAgent(props) {
|
|
|
4524
4713
|
isLoadingModules,
|
|
4525
4714
|
modulesError,
|
|
4526
4715
|
refetchModules,
|
|
4527
|
-
selectModule
|
|
4716
|
+
selectModule,
|
|
4717
|
+
adoptionGoals,
|
|
4718
|
+
dismissAdoptionGoal,
|
|
4719
|
+
startAdoptionSession
|
|
4528
4720
|
}), [
|
|
4529
4721
|
connection,
|
|
4530
4722
|
shouldConnect,
|
|
@@ -4574,36 +4766,39 @@ function LiveAgent(props) {
|
|
|
4574
4766
|
isLoadingModules,
|
|
4575
4767
|
modulesError,
|
|
4576
4768
|
refetchModules,
|
|
4577
|
-
selectModule
|
|
4769
|
+
selectModule,
|
|
4770
|
+
adoptionGoals,
|
|
4771
|
+
dismissAdoptionGoal,
|
|
4772
|
+
startAdoptionSession
|
|
4578
4773
|
]);
|
|
4579
|
-
return /* @__PURE__ */
|
|
4774
|
+
return /* @__PURE__ */ jsx24(LiveAgentContext.Provider, {
|
|
4580
4775
|
value: ctx,
|
|
4581
|
-
children: /* @__PURE__ */
|
|
4776
|
+
children: /* @__PURE__ */ jsxs19(LiveKitRoom, {
|
|
4582
4777
|
serverUrl: connection?.livekitUrl,
|
|
4583
4778
|
token: connection?.token,
|
|
4584
4779
|
connect: shouldConnect,
|
|
4585
4780
|
audio: true,
|
|
4586
4781
|
onDisconnected: handleRoomDisconnected,
|
|
4587
4782
|
children: [
|
|
4588
|
-
connection && /* @__PURE__ */
|
|
4589
|
-
connection && captureMode === "screenshare" && /* @__PURE__ */
|
|
4783
|
+
connection && /* @__PURE__ */ jsx24(RoomAudioRenderer, {}),
|
|
4784
|
+
connection && captureMode === "screenshare" && /* @__PURE__ */ jsx24(AutoStartMedia, {
|
|
4590
4785
|
pendingScreenStream
|
|
4591
4786
|
}),
|
|
4592
|
-
connection && captureMode === "auto" && /* @__PURE__ */
|
|
4593
|
-
/* @__PURE__ */
|
|
4787
|
+
connection && captureMode === "auto" && /* @__PURE__ */ jsx24(DomCapture, {}),
|
|
4788
|
+
/* @__PURE__ */ jsxs19(ShadowHost, {
|
|
4594
4789
|
children: [
|
|
4595
|
-
connection && captureMode === "auto" && agentControls?.highlight && /* @__PURE__ */
|
|
4596
|
-
connection && captureMode === "auto" && agentControls?.actions && /* @__PURE__ */
|
|
4597
|
-
/* @__PURE__ */
|
|
4790
|
+
connection && captureMode === "auto" && agentControls?.highlight && /* @__PURE__ */ jsx24(HighlightOverlay, {}),
|
|
4791
|
+
connection && captureMode === "auto" && agentControls?.actions && /* @__PURE__ */ jsx24(PageActionHandler, {}),
|
|
4792
|
+
/* @__PURE__ */ jsxs19("div", {
|
|
4598
4793
|
id: WIDGET_ROOT_ID,
|
|
4599
4794
|
children: [
|
|
4600
|
-
isMinimized && /* @__PURE__ */
|
|
4795
|
+
isMinimized && /* @__PURE__ */ jsx24(MinimizedBubble, {
|
|
4601
4796
|
welcomeMessage,
|
|
4602
4797
|
welcomeDismissed,
|
|
4603
4798
|
onDismissWelcome: dismissWelcome
|
|
4604
4799
|
}),
|
|
4605
|
-
/* @__PURE__ */
|
|
4606
|
-
/* @__PURE__ */
|
|
4800
|
+
/* @__PURE__ */ jsx24(SidebarTrigger, {}),
|
|
4801
|
+
/* @__PURE__ */ jsx24(Sidebar, {
|
|
4607
4802
|
hideControls,
|
|
4608
4803
|
hideHeader,
|
|
4609
4804
|
startSessionLabel
|