@skippr/live-agent-sdk 0.44.0 → 0.46.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 +666 -442
- package/dist/skippr-sdk.css +1 -1
- package/dist/skippr-sdk.js +142 -142
- package/dist/types/components/AdoptionBubble.d.ts +8 -0
- package/dist/types/context/LiveAgentContext.d.ts +20 -0
- package/dist/types/hooks/useAdoptionGoals.d.ts +14 -0
- package/dist/types/hooks/useSession.d.ts +2 -1
- package/dist/types/lib/hashMatch.d.ts +2 -0
- package/dist/types/lib/navigation.d.ts +3 -0
- package/package.json +1 -1
package/dist/esm/lib-exports.js
CHANGED
|
@@ -8,15 +8,153 @@ 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 useMemo6, 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/
|
|
18
|
-
import { useCallback, useEffect, useState } from "react";
|
|
17
|
+
// src/hooks/useAdoptionGoals.ts
|
|
18
|
+
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
19
|
+
|
|
20
|
+
// src/lib/hashMatch.ts
|
|
21
|
+
function globToRegExp(pattern) {
|
|
22
|
+
const escaped = pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&").replace(/\\\*\\\*/g, ".*").replace(/\\\*/g, "[^/]*");
|
|
23
|
+
return new RegExp(`^${escaped}$`);
|
|
24
|
+
}
|
|
25
|
+
function normalizeHash(rawHash) {
|
|
26
|
+
return rawHash.replace(/^#/, "").toLowerCase();
|
|
27
|
+
}
|
|
28
|
+
function matchesHash(rawHash, matchType, hashPattern) {
|
|
29
|
+
const hash = normalizeHash(rawHash);
|
|
30
|
+
const pattern = hashPattern.toLowerCase();
|
|
31
|
+
switch (matchType) {
|
|
32
|
+
case "exact" /* Exact */:
|
|
33
|
+
return hash === pattern;
|
|
34
|
+
case "prefix" /* Prefix */:
|
|
35
|
+
return hash.startsWith(pattern);
|
|
36
|
+
case "glob" /* Glob */:
|
|
37
|
+
return globToRegExp(pattern).test(hash);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// src/lib/navigation.ts
|
|
42
|
+
var listeners = new Set;
|
|
43
|
+
var patched = false;
|
|
44
|
+
var lastHref = "";
|
|
45
|
+
function emit() {
|
|
46
|
+
if (window.location.href === lastHref)
|
|
47
|
+
return;
|
|
48
|
+
lastHref = window.location.href;
|
|
49
|
+
for (const listener of listeners)
|
|
50
|
+
listener();
|
|
51
|
+
}
|
|
52
|
+
function ensurePatched() {
|
|
53
|
+
if (patched)
|
|
54
|
+
return;
|
|
55
|
+
patched = true;
|
|
56
|
+
lastHref = window.location.href;
|
|
57
|
+
const originalPushState = history.pushState.bind(history);
|
|
58
|
+
const originalReplaceState = history.replaceState.bind(history);
|
|
59
|
+
history.pushState = (...args) => {
|
|
60
|
+
originalPushState(...args);
|
|
61
|
+
emit();
|
|
62
|
+
};
|
|
63
|
+
history.replaceState = (...args) => {
|
|
64
|
+
originalReplaceState(...args);
|
|
65
|
+
emit();
|
|
66
|
+
};
|
|
67
|
+
window.addEventListener("popstate", emit);
|
|
68
|
+
window.addEventListener("hashchange", emit);
|
|
69
|
+
}
|
|
70
|
+
function subscribeToLocationChange(listener) {
|
|
71
|
+
ensurePatched();
|
|
72
|
+
listeners.add(listener);
|
|
73
|
+
return () => {
|
|
74
|
+
listeners.delete(listener);
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// src/hooks/useAdoptionGoals.ts
|
|
19
79
|
var API_URL = "https://specialist.skippr.ai/api";
|
|
80
|
+
var MATCH_DEBOUNCE_MS = 400;
|
|
81
|
+
function useAdoptionGoals({
|
|
82
|
+
enabled,
|
|
83
|
+
bearerToken,
|
|
84
|
+
authedFetch
|
|
85
|
+
}) {
|
|
86
|
+
const [candidates, setCandidates] = useState([]);
|
|
87
|
+
const [hash, setHash] = useState(window.location.hash);
|
|
88
|
+
const match = useCallback(async () => {
|
|
89
|
+
try {
|
|
90
|
+
const resp = await authedFetch(`${API_URL}/v1/adoption/goals/match`, {
|
|
91
|
+
method: "POST",
|
|
92
|
+
headers: { "Content-Type": "application/json" },
|
|
93
|
+
body: JSON.stringify({ url: window.location.origin + window.location.pathname })
|
|
94
|
+
});
|
|
95
|
+
if (!resp.ok) {
|
|
96
|
+
setCandidates([]);
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
const data = await resp.json();
|
|
100
|
+
setCandidates(Array.isArray(data?.goals) ? data.goals : []);
|
|
101
|
+
} catch (e) {
|
|
102
|
+
console.warn("[Skippr] adoption match failed", e);
|
|
103
|
+
setCandidates([]);
|
|
104
|
+
}
|
|
105
|
+
}, [authedFetch]);
|
|
106
|
+
useEffect(() => {
|
|
107
|
+
if (!enabled || !bearerToken) {
|
|
108
|
+
setCandidates([]);
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
111
|
+
match();
|
|
112
|
+
let lastPath = window.location.pathname;
|
|
113
|
+
let timer;
|
|
114
|
+
const unsubscribe = subscribeToLocationChange(() => {
|
|
115
|
+
setHash(window.location.hash);
|
|
116
|
+
if (window.location.pathname === lastPath)
|
|
117
|
+
return;
|
|
118
|
+
lastPath = window.location.pathname;
|
|
119
|
+
setCandidates([]);
|
|
120
|
+
if (timer)
|
|
121
|
+
clearTimeout(timer);
|
|
122
|
+
timer = setTimeout(() => {
|
|
123
|
+
match();
|
|
124
|
+
}, MATCH_DEBOUNCE_MS);
|
|
125
|
+
});
|
|
126
|
+
return () => {
|
|
127
|
+
if (timer)
|
|
128
|
+
clearTimeout(timer);
|
|
129
|
+
unsubscribe();
|
|
130
|
+
};
|
|
131
|
+
}, [enabled, bearerToken, match]);
|
|
132
|
+
const goals = useMemo(() => {
|
|
133
|
+
const hashSpecific = candidates.filter((goal) => goal.hashPattern !== null && matchesHash(hash, goal.matchType, goal.hashPattern));
|
|
134
|
+
if (hashSpecific.length > 0)
|
|
135
|
+
return hashSpecific;
|
|
136
|
+
return candidates.filter((goal) => goal.hashPattern === null);
|
|
137
|
+
}, [candidates, hash]);
|
|
138
|
+
const postStatus = useCallback((goalId, status) => {
|
|
139
|
+
authedFetch(`${API_URL}/v1/adoption/goals/${goalId}/status`, {
|
|
140
|
+
method: "POST",
|
|
141
|
+
headers: { "Content-Type": "application/json" },
|
|
142
|
+
body: JSON.stringify({ status })
|
|
143
|
+
}).catch((e) => console.warn("[Skippr] adoption status update failed", e));
|
|
144
|
+
}, [authedFetch]);
|
|
145
|
+
const dismissGoal = useCallback((goalId) => {
|
|
146
|
+
setCandidates((prev) => prev.filter((goal) => goal.goalId !== goalId));
|
|
147
|
+
postStatus(goalId, "dismissed" /* Dismissed */);
|
|
148
|
+
}, [postStatus]);
|
|
149
|
+
const attendGoal = useCallback((goalId) => {
|
|
150
|
+
postStatus(goalId, "attended" /* Attended */);
|
|
151
|
+
}, [postStatus]);
|
|
152
|
+
return { goals, dismissGoal, attendGoal };
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
// src/hooks/useAuth.ts
|
|
156
|
+
import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
|
|
157
|
+
var API_URL2 = "https://specialist.skippr.ai/api";
|
|
20
158
|
function storageKey(appKey) {
|
|
21
159
|
return `skippr_auth_${appKey}`;
|
|
22
160
|
}
|
|
@@ -42,12 +180,12 @@ function clearStoredToken(appKey) {
|
|
|
42
180
|
}
|
|
43
181
|
}
|
|
44
182
|
function useAuth({ appKey }) {
|
|
45
|
-
const [authToken, setAuthToken] =
|
|
46
|
-
const [isValidating, setIsValidating] =
|
|
47
|
-
const [isSubmitting, setIsSubmitting] =
|
|
48
|
-
const [error, setError] =
|
|
183
|
+
const [authToken, setAuthToken] = useState2(null);
|
|
184
|
+
const [isValidating, setIsValidating] = useState2(false);
|
|
185
|
+
const [isSubmitting, setIsSubmitting] = useState2(false);
|
|
186
|
+
const [error, setError] = useState2("");
|
|
49
187
|
const isAuthenticated = authToken !== null;
|
|
50
|
-
|
|
188
|
+
useEffect2(() => {
|
|
51
189
|
if (!appKey)
|
|
52
190
|
return;
|
|
53
191
|
const stored = getStoredToken(appKey);
|
|
@@ -56,7 +194,7 @@ function useAuth({ appKey }) {
|
|
|
56
194
|
async function validateStoredToken() {
|
|
57
195
|
setIsValidating(true);
|
|
58
196
|
try {
|
|
59
|
-
const res = await fetch(`${
|
|
197
|
+
const res = await fetch(`${API_URL2}/v1/auth/validate-token`, {
|
|
60
198
|
credentials: "omit",
|
|
61
199
|
headers: { Authorization: `Bearer ${stored}` }
|
|
62
200
|
});
|
|
@@ -73,7 +211,7 @@ function useAuth({ appKey }) {
|
|
|
73
211
|
}
|
|
74
212
|
validateStoredToken();
|
|
75
213
|
}, [appKey]);
|
|
76
|
-
|
|
214
|
+
useEffect2(() => {
|
|
77
215
|
function handleLogout() {
|
|
78
216
|
setAuthToken(null);
|
|
79
217
|
setError("");
|
|
@@ -81,13 +219,13 @@ function useAuth({ appKey }) {
|
|
|
81
219
|
window.addEventListener("skippr:logout", handleLogout);
|
|
82
220
|
return () => window.removeEventListener("skippr:logout", handleLogout);
|
|
83
221
|
}, []);
|
|
84
|
-
const requestOtp =
|
|
222
|
+
const requestOtp = useCallback2(async (email) => {
|
|
85
223
|
if (!appKey)
|
|
86
224
|
return false;
|
|
87
225
|
setIsSubmitting(true);
|
|
88
226
|
setError("");
|
|
89
227
|
try {
|
|
90
|
-
const resp = await fetch(`${
|
|
228
|
+
const resp = await fetch(`${API_URL2}/v1/auth/request-otp`, {
|
|
91
229
|
method: "POST",
|
|
92
230
|
credentials: "omit",
|
|
93
231
|
headers: {
|
|
@@ -108,13 +246,13 @@ function useAuth({ appKey }) {
|
|
|
108
246
|
setIsSubmitting(false);
|
|
109
247
|
}
|
|
110
248
|
}, [appKey]);
|
|
111
|
-
const verifyOtp =
|
|
249
|
+
const verifyOtp = useCallback2(async (email, code) => {
|
|
112
250
|
if (!appKey)
|
|
113
251
|
return;
|
|
114
252
|
setIsSubmitting(true);
|
|
115
253
|
setError("");
|
|
116
254
|
try {
|
|
117
|
-
const resp = await fetch(`${
|
|
255
|
+
const resp = await fetch(`${API_URL2}/v1/auth/verify-otp`, {
|
|
118
256
|
method: "POST",
|
|
119
257
|
credentials: "omit",
|
|
120
258
|
headers: {
|
|
@@ -137,7 +275,7 @@ function useAuth({ appKey }) {
|
|
|
137
275
|
setIsSubmitting(false);
|
|
138
276
|
}
|
|
139
277
|
}, [appKey]);
|
|
140
|
-
const logout =
|
|
278
|
+
const logout = useCallback2(async () => {
|
|
141
279
|
const token = authToken;
|
|
142
280
|
if (appKey)
|
|
143
281
|
clearStoredToken(appKey);
|
|
@@ -146,7 +284,7 @@ function useAuth({ appKey }) {
|
|
|
146
284
|
if (!token)
|
|
147
285
|
return;
|
|
148
286
|
try {
|
|
149
|
-
await fetch(`${
|
|
287
|
+
await fetch(`${API_URL2}/v1/auth/logout`, {
|
|
150
288
|
method: "POST",
|
|
151
289
|
credentials: "omit",
|
|
152
290
|
headers: { Authorization: `Bearer ${token}` }
|
|
@@ -168,21 +306,21 @@ function useAuth({ appKey }) {
|
|
|
168
306
|
}
|
|
169
307
|
|
|
170
308
|
// src/hooks/useAvailableModules.ts
|
|
171
|
-
import { useCallback as
|
|
172
|
-
var
|
|
309
|
+
import { useCallback as useCallback3, useEffect as useEffect3, useState as useState3 } from "react";
|
|
310
|
+
var API_URL3 = "https://specialist.skippr.ai/api";
|
|
173
311
|
function useAvailableModules({
|
|
174
312
|
enabled,
|
|
175
313
|
bearerToken,
|
|
176
314
|
authedFetch
|
|
177
315
|
}) {
|
|
178
|
-
const [modules, setModules] =
|
|
179
|
-
const [isLoading, setIsLoading] =
|
|
180
|
-
const [error, setError] =
|
|
181
|
-
const fetchModules =
|
|
316
|
+
const [modules, setModules] = useState3([]);
|
|
317
|
+
const [isLoading, setIsLoading] = useState3(false);
|
|
318
|
+
const [error, setError] = useState3(null);
|
|
319
|
+
const fetchModules = useCallback3(async () => {
|
|
182
320
|
setIsLoading(true);
|
|
183
321
|
setError(null);
|
|
184
322
|
try {
|
|
185
|
-
const resp = await authedFetch(`${
|
|
323
|
+
const resp = await authedFetch(`${API_URL3}/v1/modules/available`);
|
|
186
324
|
if (!resp.ok) {
|
|
187
325
|
const body = await resp.json().catch(() => null);
|
|
188
326
|
throw new Error(body?.detail || `Failed to load modules: ${resp.status}`);
|
|
@@ -195,7 +333,7 @@ function useAvailableModules({
|
|
|
195
333
|
setIsLoading(false);
|
|
196
334
|
}
|
|
197
335
|
}, [authedFetch]);
|
|
198
|
-
|
|
336
|
+
useEffect3(() => {
|
|
199
337
|
if (!enabled || !bearerToken)
|
|
200
338
|
return;
|
|
201
339
|
fetchModules();
|
|
@@ -209,11 +347,11 @@ function useAvailableModules({
|
|
|
209
347
|
}
|
|
210
348
|
|
|
211
349
|
// src/hooks/useSession.ts
|
|
212
|
-
import { useCallback as
|
|
213
|
-
var
|
|
350
|
+
import { useCallback as useCallback4, useEffect as useEffect4, useRef, useState as useState4 } from "react";
|
|
351
|
+
var API_URL4 = "https://specialist.skippr.ai/api";
|
|
214
352
|
async function fetchSessionMessages(sessionId, authedFetch) {
|
|
215
353
|
try {
|
|
216
|
-
const resp = await authedFetch(`${
|
|
354
|
+
const resp = await authedFetch(`${API_URL4}/v1/sessions/${sessionId}/messages`);
|
|
217
355
|
if (!resp.ok)
|
|
218
356
|
return [];
|
|
219
357
|
const { messages } = await resp.json();
|
|
@@ -243,7 +381,7 @@ function stopStream(stream) {
|
|
|
243
381
|
track.stop();
|
|
244
382
|
}
|
|
245
383
|
async function exchangeForBearerToken(appKey, userToken) {
|
|
246
|
-
const resp = await fetch(`${
|
|
384
|
+
const resp = await fetch(`${API_URL4}/v1/auth/token-exchange`, {
|
|
247
385
|
method: "POST",
|
|
248
386
|
credentials: "omit",
|
|
249
387
|
headers: {
|
|
@@ -267,26 +405,26 @@ function useSession({
|
|
|
267
405
|
onStartError,
|
|
268
406
|
onDisconnect
|
|
269
407
|
}) {
|
|
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] =
|
|
408
|
+
const [connection, setConnection] = useState4(null);
|
|
409
|
+
const [shouldConnect, setShouldConnect] = useState4(false);
|
|
410
|
+
const [isStarting, setIsStarting] = useState4(false);
|
|
411
|
+
const [isDisconnecting, setIsDisconnecting] = useState4(false);
|
|
412
|
+
const [error, setError] = useState4("");
|
|
413
|
+
const [errorCode, setErrorCode] = useState4(null);
|
|
414
|
+
const [sessionId, setSessionId] = useState4(null);
|
|
415
|
+
const [bearerToken, setBearerToken] = useState4(authToken ?? null);
|
|
416
|
+
const [pendingScreenStream, setPendingScreenStream] = useState4(null);
|
|
417
|
+
const [isPaused, setIsPaused] = useState4(false);
|
|
418
|
+
const [isPausing, setIsPausing] = useState4(false);
|
|
419
|
+
const [historyMessages, setHistoryMessages] = useState4([]);
|
|
420
|
+
const [authFailed, setAuthFailed] = useState4(false);
|
|
283
421
|
const tokenRef = useRef(authToken ? { token: authToken, expiresAt: null } : null);
|
|
284
422
|
const getUserTokenRef = useRef(getUserToken);
|
|
285
423
|
getUserTokenRef.current = getUserToken ?? (userToken ? () => Promise.resolve(userToken) : undefined);
|
|
286
424
|
const failedBearerRef = useRef(null);
|
|
287
425
|
const inFlightExchangeRef = useRef(null);
|
|
288
|
-
const canExchange =
|
|
289
|
-
const reExchange =
|
|
426
|
+
const canExchange = useCallback4(() => !!appKey && !!getUserTokenRef.current, [appKey]);
|
|
427
|
+
const reExchange = useCallback4(async () => {
|
|
290
428
|
if (inFlightExchangeRef.current)
|
|
291
429
|
return inFlightExchangeRef.current;
|
|
292
430
|
const provider = getUserTokenRef.current;
|
|
@@ -306,7 +444,7 @@ function useSession({
|
|
|
306
444
|
inFlightExchangeRef.current = null;
|
|
307
445
|
}
|
|
308
446
|
}, [appKey]);
|
|
309
|
-
const getValidBearer =
|
|
447
|
+
const getValidBearer = useCallback4(async () => {
|
|
310
448
|
const current = tokenRef.current;
|
|
311
449
|
if (current) {
|
|
312
450
|
if (current.expiresAt === null)
|
|
@@ -318,7 +456,7 @@ function useSession({
|
|
|
318
456
|
return reExchange();
|
|
319
457
|
return current?.token ?? null;
|
|
320
458
|
}, [canExchange, reExchange]);
|
|
321
|
-
const authedFetch =
|
|
459
|
+
const authedFetch = useCallback4(async (input, init = {}) => {
|
|
322
460
|
const isSecretMode = canExchange();
|
|
323
461
|
const onTerminalAuthFailure = () => {
|
|
324
462
|
if (isSecretMode)
|
|
@@ -360,7 +498,7 @@ function useSession({
|
|
|
360
498
|
setAuthFailed(false);
|
|
361
499
|
return resp;
|
|
362
500
|
}, [canExchange, getValidBearer, reExchange]);
|
|
363
|
-
|
|
501
|
+
useEffect4(() => {
|
|
364
502
|
let stale = false;
|
|
365
503
|
if (authToken) {
|
|
366
504
|
tokenRef.current = { token: authToken, expiresAt: null };
|
|
@@ -381,12 +519,12 @@ function useSession({
|
|
|
381
519
|
}, [authToken, canExchange, reExchange]);
|
|
382
520
|
const pauseOnUnloadRef = useRef(null);
|
|
383
521
|
pauseOnUnloadRef.current = connection !== null && !isPaused && sessionId && bearerToken ? { sessionId, bearerToken } : null;
|
|
384
|
-
|
|
522
|
+
useEffect4(() => {
|
|
385
523
|
const onPageHide = () => {
|
|
386
524
|
const pending = pauseOnUnloadRef.current;
|
|
387
525
|
if (!pending)
|
|
388
526
|
return;
|
|
389
|
-
fetch(`${
|
|
527
|
+
fetch(`${API_URL4}/v1/sessions/${pending.sessionId}/pause`, {
|
|
390
528
|
method: "POST",
|
|
391
529
|
credentials: "omit",
|
|
392
530
|
keepalive: true,
|
|
@@ -396,7 +534,7 @@ function useSession({
|
|
|
396
534
|
window.addEventListener("pagehide", onPageHide);
|
|
397
535
|
return () => window.removeEventListener("pagehide", onPageHide);
|
|
398
536
|
}, []);
|
|
399
|
-
const startSession =
|
|
537
|
+
const startSession = useCallback4(async ({ agentId, agentControls, existingSessionId, adoptionGoalId }) => {
|
|
400
538
|
if (!bearerToken) {
|
|
401
539
|
setError("No auth token available");
|
|
402
540
|
return;
|
|
@@ -422,7 +560,7 @@ function useSession({
|
|
|
422
560
|
try {
|
|
423
561
|
let resolvedSessionId = existingSessionId;
|
|
424
562
|
if (!resolvedSessionId) {
|
|
425
|
-
const createResp = await authedFetch(`${
|
|
563
|
+
const createResp = await authedFetch(`${API_URL4}/v1/sessions`, {
|
|
426
564
|
method: "POST",
|
|
427
565
|
headers: { "Content-Type": "application/json" },
|
|
428
566
|
body: JSON.stringify({
|
|
@@ -439,10 +577,14 @@ function useSession({
|
|
|
439
577
|
const { session: session2 } = await createResp.json();
|
|
440
578
|
resolvedSessionId = session2.id;
|
|
441
579
|
}
|
|
442
|
-
const startResp = await authedFetch(`${
|
|
580
|
+
const startResp = await authedFetch(`${API_URL4}/v1/sessions/${resolvedSessionId}/start`, {
|
|
443
581
|
method: "POST",
|
|
444
582
|
headers: { "Content-Type": "application/json" },
|
|
445
|
-
body: JSON.stringify({
|
|
583
|
+
body: JSON.stringify({
|
|
584
|
+
captureMode,
|
|
585
|
+
agentControls: requestAgentControls,
|
|
586
|
+
adoptionGoalId
|
|
587
|
+
})
|
|
446
588
|
});
|
|
447
589
|
if (!startResp.ok) {
|
|
448
590
|
const body = await startResp.json().catch(() => null);
|
|
@@ -468,12 +610,12 @@ function useSession({
|
|
|
468
610
|
setIsStarting(false);
|
|
469
611
|
}
|
|
470
612
|
}, [captureMode, bearerToken, authedFetch, onStart, onStartError]);
|
|
471
|
-
const pauseSession =
|
|
613
|
+
const pauseSession = useCallback4(async () => {
|
|
472
614
|
if (!sessionId || !bearerToken)
|
|
473
615
|
return;
|
|
474
616
|
setIsPausing(true);
|
|
475
617
|
try {
|
|
476
|
-
const resp = await authedFetch(`${
|
|
618
|
+
const resp = await authedFetch(`${API_URL4}/v1/sessions/${sessionId}/pause`, {
|
|
477
619
|
method: "POST"
|
|
478
620
|
});
|
|
479
621
|
if (!resp.ok) {
|
|
@@ -494,12 +636,12 @@ function useSession({
|
|
|
494
636
|
setIsPaused(true);
|
|
495
637
|
setIsPausing(false);
|
|
496
638
|
}, [sessionId, bearerToken, authedFetch, pendingScreenStream]);
|
|
497
|
-
const disconnect =
|
|
639
|
+
const disconnect = useCallback4(async () => {
|
|
498
640
|
setIsDisconnecting(true);
|
|
499
641
|
try {
|
|
500
642
|
if (sessionId && bearerToken) {
|
|
501
643
|
try {
|
|
502
|
-
await authedFetch(`${
|
|
644
|
+
await authedFetch(`${API_URL4}/v1/sessions/${sessionId}/pause`, {
|
|
503
645
|
method: "POST"
|
|
504
646
|
});
|
|
505
647
|
} catch {}
|
|
@@ -603,12 +745,12 @@ function getModuleSessionState(currentSession, mode) {
|
|
|
603
745
|
// src/components/AutoStartMedia.tsx
|
|
604
746
|
import { useConnectionState, useLocalParticipant } from "@livekit/components-react/hooks";
|
|
605
747
|
import { ConnectionState, Track } from "livekit-client";
|
|
606
|
-
import { useEffect as
|
|
748
|
+
import { useEffect as useEffect5, useRef as useRef2 } from "react";
|
|
607
749
|
function AutoStartMedia({ pendingScreenStream }) {
|
|
608
750
|
const { localParticipant } = useLocalParticipant();
|
|
609
751
|
const connectionState = useConnectionState();
|
|
610
752
|
const didStartRef = useRef2(false);
|
|
611
|
-
|
|
753
|
+
useEffect5(() => {
|
|
612
754
|
if (didStartRef.current)
|
|
613
755
|
return;
|
|
614
756
|
if (connectionState !== ConnectionState.Connected)
|
|
@@ -633,7 +775,7 @@ function AutoStartMedia({ pendingScreenStream }) {
|
|
|
633
775
|
// src/components/DomCapture.tsx
|
|
634
776
|
import { useConnectionState as useConnectionState2, useLocalParticipant as useLocalParticipant2 } from "@livekit/components-react/hooks";
|
|
635
777
|
import { ConnectionState as ConnectionState2, ScreenSharePresets, Track as Track2 } from "livekit-client";
|
|
636
|
-
import { useEffect as
|
|
778
|
+
import { useEffect as useEffect6, useRef as useRef3 } from "react";
|
|
637
779
|
|
|
638
780
|
// src/capture/a11yUtils.ts
|
|
639
781
|
var ROLE_BY_TAG = {
|
|
@@ -1418,7 +1560,7 @@ function DomCapture() {
|
|
|
1418
1560
|
const { localParticipant } = useLocalParticipant2();
|
|
1419
1561
|
const connectionState = useConnectionState2();
|
|
1420
1562
|
const didStartRef = useRef3(false);
|
|
1421
|
-
|
|
1563
|
+
useEffect6(() => {
|
|
1422
1564
|
if (didStartRef.current)
|
|
1423
1565
|
return;
|
|
1424
1566
|
if (connectionState !== ConnectionState2.Connected)
|
|
@@ -1561,7 +1703,7 @@ var hasA11yProp = (props) => {
|
|
|
1561
1703
|
};
|
|
1562
1704
|
|
|
1563
1705
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/context.js
|
|
1564
|
-
import { createContext as createContext2, useContext, useMemo, createElement } from "react";
|
|
1706
|
+
import { createContext as createContext2, useContext, useMemo as useMemo2, createElement } from "react";
|
|
1565
1707
|
var LucideContext = createContext2({});
|
|
1566
1708
|
var useLucideContext = () => useContext(LucideContext);
|
|
1567
1709
|
|
|
@@ -1844,8 +1986,14 @@ var __iconNode26 = [
|
|
|
1844
1986
|
["line", { x1: "22", x2: "16", y1: "11", y2: "11", key: "1shjgl" }]
|
|
1845
1987
|
];
|
|
1846
1988
|
var UserPlus = createLucideIcon("user-plus", __iconNode26);
|
|
1989
|
+
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/x.js
|
|
1990
|
+
var __iconNode27 = [
|
|
1991
|
+
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
|
|
1992
|
+
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
|
|
1993
|
+
];
|
|
1994
|
+
var X = createLucideIcon("x", __iconNode27);
|
|
1847
1995
|
// src/components/HighlightOverlay.tsx
|
|
1848
|
-
import { useCallback as
|
|
1996
|
+
import { useCallback as useCallback5, useEffect as useEffect7, useRef as useRef4, useState as useState5 } from "react";
|
|
1849
1997
|
|
|
1850
1998
|
// src/capture/elementRef.ts
|
|
1851
1999
|
function safeGetIframeDocument(iframe) {
|
|
@@ -1953,14 +2101,14 @@ function findScrollableAncestor(el) {
|
|
|
1953
2101
|
return el.ownerDocument?.documentElement ?? document.documentElement;
|
|
1954
2102
|
}
|
|
1955
2103
|
function HighlightOverlay() {
|
|
1956
|
-
const [overlayState, setOverlayState] =
|
|
2104
|
+
const [overlayState, setOverlayState] = useState5(null);
|
|
1957
2105
|
const targetElementRef = useRef4(null);
|
|
1958
2106
|
const pendingFrameRef = useRef4(null);
|
|
1959
|
-
const clearOverlay =
|
|
2107
|
+
const clearOverlay = useCallback5(() => {
|
|
1960
2108
|
targetElementRef.current = null;
|
|
1961
2109
|
setOverlayState(null);
|
|
1962
2110
|
}, []);
|
|
1963
|
-
const recomputeRect =
|
|
2111
|
+
const recomputeRect = useCallback5(() => {
|
|
1964
2112
|
pendingFrameRef.current = null;
|
|
1965
2113
|
const target = targetElementRef.current;
|
|
1966
2114
|
if (!target)
|
|
@@ -1972,12 +2120,12 @@ function HighlightOverlay() {
|
|
|
1972
2120
|
const rect2 = getRectInTopViewport(target);
|
|
1973
2121
|
setOverlayState((prev) => prev ? { ...prev, rect: rect2 } : prev);
|
|
1974
2122
|
}, [clearOverlay]);
|
|
1975
|
-
const scheduleRecompute =
|
|
2123
|
+
const scheduleRecompute = useCallback5(() => {
|
|
1976
2124
|
if (pendingFrameRef.current !== null)
|
|
1977
2125
|
return;
|
|
1978
2126
|
pendingFrameRef.current = window.requestAnimationFrame(recomputeRect);
|
|
1979
2127
|
}, [recomputeRect]);
|
|
1980
|
-
const onHighlightMessage =
|
|
2128
|
+
const onHighlightMessage = useCallback5((msg) => {
|
|
1981
2129
|
const parsed = parseHighlightMessage(msg.payload);
|
|
1982
2130
|
if (!parsed)
|
|
1983
2131
|
return;
|
|
@@ -1998,7 +2146,7 @@ function HighlightOverlay() {
|
|
|
1998
2146
|
});
|
|
1999
2147
|
}, [clearOverlay]);
|
|
2000
2148
|
useDataChannel(HIGHLIGHT_TOPIC, onHighlightMessage);
|
|
2001
|
-
|
|
2149
|
+
useEffect7(() => {
|
|
2002
2150
|
if (!overlayState)
|
|
2003
2151
|
return;
|
|
2004
2152
|
const target = targetElementRef.current;
|
|
@@ -2080,7 +2228,7 @@ function HighlightOverlay() {
|
|
|
2080
2228
|
}
|
|
2081
2229
|
|
|
2082
2230
|
// src/components/MinimizedBubble.tsx
|
|
2083
|
-
import { useEffect as
|
|
2231
|
+
import { useContext as useContext3, useEffect as useEffect8 } from "react";
|
|
2084
2232
|
|
|
2085
2233
|
// src/hooks/useLiveAgent.ts
|
|
2086
2234
|
import { useContext as useContext2 } from "react";
|
|
@@ -2097,6 +2245,9 @@ function useLiveAgent() {
|
|
|
2097
2245
|
historyMessages,
|
|
2098
2246
|
phasesSnapshot,
|
|
2099
2247
|
setPhasesSnapshot,
|
|
2248
|
+
adoptionGoals,
|
|
2249
|
+
dismissAdoptionGoal,
|
|
2250
|
+
startAdoptionSession,
|
|
2100
2251
|
...publicValue
|
|
2101
2252
|
} = ctx;
|
|
2102
2253
|
return publicValue;
|
|
@@ -2105,7 +2256,7 @@ function useLiveAgent() {
|
|
|
2105
2256
|
// src/hooks/useMediaControls.ts
|
|
2106
2257
|
import { useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react/hooks";
|
|
2107
2258
|
import { ScreenSharePresets as ScreenSharePresets2 } from "livekit-client";
|
|
2108
|
-
import { useCallback as
|
|
2259
|
+
import { useCallback as useCallback6 } from "react";
|
|
2109
2260
|
var SCREEN_SHARE_OPTIONS = {
|
|
2110
2261
|
video: { displaySurface: "browser" },
|
|
2111
2262
|
resolution: ScreenSharePresets2.h720fps30.resolution,
|
|
@@ -2115,14 +2266,14 @@ function useMediaControls() {
|
|
|
2115
2266
|
const { localParticipant } = useLocalParticipant3();
|
|
2116
2267
|
const isMuted = !localParticipant.isMicrophoneEnabled;
|
|
2117
2268
|
const isScreenSharing = localParticipant.isScreenShareEnabled;
|
|
2118
|
-
const toggleMute =
|
|
2269
|
+
const toggleMute = useCallback6(async () => {
|
|
2119
2270
|
try {
|
|
2120
2271
|
await localParticipant.setMicrophoneEnabled(isMuted);
|
|
2121
2272
|
} catch (error) {
|
|
2122
2273
|
console.error("Failed to toggle microphone:", error);
|
|
2123
2274
|
}
|
|
2124
2275
|
}, [localParticipant, isMuted]);
|
|
2125
|
-
const toggleScreenShare =
|
|
2276
|
+
const toggleScreenShare = useCallback6(async () => {
|
|
2126
2277
|
try {
|
|
2127
2278
|
await localParticipant.setScreenShareEnabled(!isScreenSharing, SCREEN_SHARE_OPTIONS);
|
|
2128
2279
|
} catch (error) {
|
|
@@ -2139,6 +2290,31 @@ function cn(...inputs) {
|
|
|
2139
2290
|
return twMerge(clsx(inputs));
|
|
2140
2291
|
}
|
|
2141
2292
|
|
|
2293
|
+
// src/components/AdoptionBubble.tsx
|
|
2294
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
2295
|
+
function AdoptionBubble({ goal, onAttend, onDismiss }) {
|
|
2296
|
+
return /* @__PURE__ */ jsxs2("div", {
|
|
2297
|
+
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]"),
|
|
2298
|
+
children: [
|
|
2299
|
+
/* @__PURE__ */ jsx2("button", {
|
|
2300
|
+
type: "button",
|
|
2301
|
+
onClick: () => onAttend(goal),
|
|
2302
|
+
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",
|
|
2303
|
+
children: goal.displayMessage
|
|
2304
|
+
}),
|
|
2305
|
+
/* @__PURE__ */ jsx2("button", {
|
|
2306
|
+
type: "button",
|
|
2307
|
+
onClick: () => onDismiss(goal.goalId),
|
|
2308
|
+
"aria-label": "Dismiss suggestion",
|
|
2309
|
+
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"),
|
|
2310
|
+
children: /* @__PURE__ */ jsx2(X, {
|
|
2311
|
+
className: "skippr:size-3.5"
|
|
2312
|
+
})
|
|
2313
|
+
})
|
|
2314
|
+
]
|
|
2315
|
+
});
|
|
2316
|
+
}
|
|
2317
|
+
|
|
2142
2318
|
// src/hooks/useAgentVoiceState.ts
|
|
2143
2319
|
import { useVoiceAssistant } from "@livekit/components-react/hooks";
|
|
2144
2320
|
function useAgentVoiceState() {
|
|
@@ -2151,7 +2327,7 @@ function useAgentVoiceState() {
|
|
|
2151
2327
|
}
|
|
2152
2328
|
|
|
2153
2329
|
// src/components/LauncherStatusPill.tsx
|
|
2154
|
-
import { jsx as
|
|
2330
|
+
import { jsx as jsx3, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
|
|
2155
2331
|
function pillStatusFromAgent(state, canSeePage) {
|
|
2156
2332
|
if (state === "speaking")
|
|
2157
2333
|
return "talking";
|
|
@@ -2188,58 +2364,58 @@ function LauncherStatusPill() {
|
|
|
2188
2364
|
setSidebarTab("chat");
|
|
2189
2365
|
expandPanel();
|
|
2190
2366
|
};
|
|
2191
|
-
return /* @__PURE__ */
|
|
2367
|
+
return /* @__PURE__ */ jsx3("button", {
|
|
2192
2368
|
type: "button",
|
|
2193
2369
|
onClick: handleClick,
|
|
2194
2370
|
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
2371
|
"aria-label": ariaLabel,
|
|
2196
|
-
children: /* @__PURE__ */
|
|
2372
|
+
children: /* @__PURE__ */ jsxs3("span", {
|
|
2197
2373
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:animate-[skippr-pill-content_0.22s_ease-out]",
|
|
2198
2374
|
children: [
|
|
2199
|
-
status === "standing-by" && /* @__PURE__ */
|
|
2375
|
+
status === "standing-by" && /* @__PURE__ */ jsxs3(Fragment, {
|
|
2200
2376
|
children: [
|
|
2201
|
-
/* @__PURE__ */
|
|
2377
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2202
2378
|
children: "Standing by"
|
|
2203
2379
|
}),
|
|
2204
|
-
/* @__PURE__ */
|
|
2380
|
+
/* @__PURE__ */ jsx3(ThinkingDots, {})
|
|
2205
2381
|
]
|
|
2206
2382
|
}),
|
|
2207
|
-
status === "observing" && /* @__PURE__ */
|
|
2383
|
+
status === "observing" && /* @__PURE__ */ jsxs3(Fragment, {
|
|
2208
2384
|
children: [
|
|
2209
|
-
/* @__PURE__ */
|
|
2210
|
-
/* @__PURE__ */
|
|
2385
|
+
/* @__PURE__ */ jsx3(ObservingIcon, {}),
|
|
2386
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2211
2387
|
children: "Skippr is observing"
|
|
2212
2388
|
})
|
|
2213
2389
|
]
|
|
2214
2390
|
}),
|
|
2215
|
-
status === "connected" && /* @__PURE__ */
|
|
2391
|
+
status === "connected" && /* @__PURE__ */ jsxs3(Fragment, {
|
|
2216
2392
|
children: [
|
|
2217
|
-
/* @__PURE__ */
|
|
2218
|
-
/* @__PURE__ */
|
|
2393
|
+
/* @__PURE__ */ jsx3(ConnectedDot, {}),
|
|
2394
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2219
2395
|
children: "Skippr is connected"
|
|
2220
2396
|
})
|
|
2221
2397
|
]
|
|
2222
2398
|
}),
|
|
2223
|
-
status === "talking" && /* @__PURE__ */
|
|
2399
|
+
status === "talking" && /* @__PURE__ */ jsxs3(Fragment, {
|
|
2224
2400
|
children: [
|
|
2225
|
-
/* @__PURE__ */
|
|
2226
|
-
/* @__PURE__ */
|
|
2401
|
+
/* @__PURE__ */ jsx3(SpeakingBars, {}),
|
|
2402
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2227
2403
|
children: "Skippr is talking"
|
|
2228
2404
|
})
|
|
2229
2405
|
]
|
|
2230
2406
|
}),
|
|
2231
|
-
status === "thinking" && /* @__PURE__ */
|
|
2407
|
+
status === "thinking" && /* @__PURE__ */ jsxs3(Fragment, {
|
|
2232
2408
|
children: [
|
|
2233
|
-
/* @__PURE__ */
|
|
2234
|
-
/* @__PURE__ */
|
|
2409
|
+
/* @__PURE__ */ jsx3(ThinkingDots, {}),
|
|
2410
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2235
2411
|
children: "Skippr is thinking"
|
|
2236
2412
|
})
|
|
2237
2413
|
]
|
|
2238
2414
|
}),
|
|
2239
|
-
status === "paused" && /* @__PURE__ */
|
|
2415
|
+
status === "paused" && /* @__PURE__ */ jsxs3(Fragment, {
|
|
2240
2416
|
children: [
|
|
2241
|
-
/* @__PURE__ */
|
|
2242
|
-
/* @__PURE__ */
|
|
2417
|
+
/* @__PURE__ */ jsx3(PausedDot, {}),
|
|
2418
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2243
2419
|
children: "Session paused"
|
|
2244
2420
|
})
|
|
2245
2421
|
]
|
|
@@ -2249,25 +2425,25 @@ function LauncherStatusPill() {
|
|
|
2249
2425
|
});
|
|
2250
2426
|
}
|
|
2251
2427
|
function ConnectedDot() {
|
|
2252
|
-
return /* @__PURE__ */
|
|
2428
|
+
return /* @__PURE__ */ jsxs3("span", {
|
|
2253
2429
|
className: "skippr:relative skippr:flex skippr:size-2",
|
|
2254
2430
|
children: [
|
|
2255
|
-
/* @__PURE__ */
|
|
2431
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2256
2432
|
className: "skippr:absolute skippr:inline-flex skippr:size-full skippr:animate-ping skippr:rounded-full skippr:bg-emerald-400 skippr:opacity-75"
|
|
2257
2433
|
}),
|
|
2258
|
-
/* @__PURE__ */
|
|
2434
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2259
2435
|
className: "skippr:relative skippr:inline-flex skippr:size-2 skippr:rounded-full skippr:bg-emerald-400"
|
|
2260
2436
|
})
|
|
2261
2437
|
]
|
|
2262
2438
|
});
|
|
2263
2439
|
}
|
|
2264
2440
|
function PausedDot() {
|
|
2265
|
-
return /* @__PURE__ */
|
|
2441
|
+
return /* @__PURE__ */ jsx3("span", {
|
|
2266
2442
|
className: "skippr:inline-flex skippr:size-2 skippr:rounded-full skippr:bg-amber-400"
|
|
2267
2443
|
});
|
|
2268
2444
|
}
|
|
2269
2445
|
function ObservingIcon() {
|
|
2270
|
-
return /* @__PURE__ */
|
|
2446
|
+
return /* @__PURE__ */ jsxs3("svg", {
|
|
2271
2447
|
viewBox: "0 0 24 24",
|
|
2272
2448
|
className: "skippr:size-3.5",
|
|
2273
2449
|
fill: "none",
|
|
@@ -2277,10 +2453,10 @@ function ObservingIcon() {
|
|
|
2277
2453
|
strokeLinejoin: "round",
|
|
2278
2454
|
"aria-hidden": "true",
|
|
2279
2455
|
children: [
|
|
2280
|
-
/* @__PURE__ */
|
|
2456
|
+
/* @__PURE__ */ jsx3("path", {
|
|
2281
2457
|
d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
|
|
2282
2458
|
}),
|
|
2283
|
-
/* @__PURE__ */
|
|
2459
|
+
/* @__PURE__ */ jsx3("circle", {
|
|
2284
2460
|
cx: "12",
|
|
2285
2461
|
cy: "12",
|
|
2286
2462
|
r: "3",
|
|
@@ -2292,38 +2468,38 @@ function ObservingIcon() {
|
|
|
2292
2468
|
});
|
|
2293
2469
|
}
|
|
2294
2470
|
function SpeakingBars() {
|
|
2295
|
-
return /* @__PURE__ */
|
|
2471
|
+
return /* @__PURE__ */ jsxs3("span", {
|
|
2296
2472
|
className: "skippr:flex skippr:items-center skippr:gap-[2px] skippr:h-3.5",
|
|
2297
2473
|
children: [
|
|
2298
|
-
/* @__PURE__ */
|
|
2474
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2299
2475
|
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
2476
|
}),
|
|
2301
|
-
/* @__PURE__ */
|
|
2477
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2302
2478
|
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
2479
|
}),
|
|
2304
|
-
/* @__PURE__ */
|
|
2480
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2305
2481
|
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
2482
|
}),
|
|
2307
|
-
/* @__PURE__ */
|
|
2483
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2308
2484
|
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
2485
|
}),
|
|
2310
|
-
/* @__PURE__ */
|
|
2486
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2311
2487
|
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
2488
|
})
|
|
2313
2489
|
]
|
|
2314
2490
|
});
|
|
2315
2491
|
}
|
|
2316
2492
|
function ThinkingDots() {
|
|
2317
|
-
return /* @__PURE__ */
|
|
2493
|
+
return /* @__PURE__ */ jsxs3("span", {
|
|
2318
2494
|
className: "skippr:flex skippr:items-center skippr:gap-[3px]",
|
|
2319
2495
|
children: [
|
|
2320
|
-
/* @__PURE__ */
|
|
2496
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2321
2497
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
2322
2498
|
}),
|
|
2323
|
-
/* @__PURE__ */
|
|
2499
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2324
2500
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
2325
2501
|
}),
|
|
2326
|
-
/* @__PURE__ */
|
|
2502
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2327
2503
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
2328
2504
|
})
|
|
2329
2505
|
]
|
|
@@ -2331,9 +2507,9 @@ function ThinkingDots() {
|
|
|
2331
2507
|
}
|
|
2332
2508
|
|
|
2333
2509
|
// src/components/Logo.tsx
|
|
2334
|
-
import { jsx as
|
|
2510
|
+
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
2335
2511
|
function Logo({ className }) {
|
|
2336
|
-
return /* @__PURE__ */
|
|
2512
|
+
return /* @__PURE__ */ jsxs4("svg", {
|
|
2337
2513
|
width: "1em",
|
|
2338
2514
|
height: "1em",
|
|
2339
2515
|
viewBox: "0 0 200 200",
|
|
@@ -2343,20 +2519,20 @@ function Logo({ className }) {
|
|
|
2343
2519
|
"aria-label": "Skippr",
|
|
2344
2520
|
className,
|
|
2345
2521
|
children: [
|
|
2346
|
-
/* @__PURE__ */
|
|
2522
|
+
/* @__PURE__ */ jsx4("rect", {
|
|
2347
2523
|
width: "200",
|
|
2348
2524
|
height: "200",
|
|
2349
2525
|
rx: "40",
|
|
2350
2526
|
fill: "#2D2D3F"
|
|
2351
2527
|
}),
|
|
2352
|
-
/* @__PURE__ */
|
|
2528
|
+
/* @__PURE__ */ jsxs4("g", {
|
|
2353
2529
|
transform: "translate(100 100) scale(0.8) translate(-100 -100)",
|
|
2354
2530
|
children: [
|
|
2355
|
-
/* @__PURE__ */
|
|
2531
|
+
/* @__PURE__ */ jsx4("path", {
|
|
2356
2532
|
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
2533
|
fill: "white"
|
|
2358
2534
|
}),
|
|
2359
|
-
/* @__PURE__ */
|
|
2535
|
+
/* @__PURE__ */ jsx4("path", {
|
|
2360
2536
|
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
2537
|
fill: "#2BC0AE"
|
|
2362
2538
|
})
|
|
@@ -2367,7 +2543,7 @@ function Logo({ className }) {
|
|
|
2367
2543
|
}
|
|
2368
2544
|
|
|
2369
2545
|
// src/components/MinimizedBubble.tsx
|
|
2370
|
-
import { jsx as
|
|
2546
|
+
import { jsx as jsx5, jsxs as jsxs5, Fragment as Fragment2 } from "react/jsx-runtime";
|
|
2371
2547
|
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
2548
|
var CONTROL_SHADOW = "skippr:shadow-[0_4px_16px_rgba(0,0,0,0.15),0_2px_4px_rgba(0,0,0,0.1)]";
|
|
2373
2549
|
function ConnectedLauncher() {
|
|
@@ -2388,61 +2564,61 @@ function ConnectedLauncher() {
|
|
|
2388
2564
|
setSidebarTab("chat");
|
|
2389
2565
|
expandPanel();
|
|
2390
2566
|
};
|
|
2391
|
-
return /* @__PURE__ */
|
|
2567
|
+
return /* @__PURE__ */ jsxs5(Fragment2, {
|
|
2392
2568
|
children: [
|
|
2393
|
-
!showPaused && /* @__PURE__ */
|
|
2569
|
+
!showPaused && /* @__PURE__ */ jsxs5(Fragment2, {
|
|
2394
2570
|
children: [
|
|
2395
|
-
/* @__PURE__ */
|
|
2571
|
+
/* @__PURE__ */ jsx5("button", {
|
|
2396
2572
|
type: "button",
|
|
2397
2573
|
onClick: toggleMute,
|
|
2398
2574
|
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
2399
2575
|
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__ */
|
|
2576
|
+
children: isMuted ? /* @__PURE__ */ jsx5(MicOff, {
|
|
2401
2577
|
className: "skippr:size-5"
|
|
2402
|
-
}) : /* @__PURE__ */
|
|
2578
|
+
}) : /* @__PURE__ */ jsx5(Mic, {
|
|
2403
2579
|
className: "skippr:size-5"
|
|
2404
2580
|
})
|
|
2405
2581
|
}),
|
|
2406
|
-
showScreenShareToggle && /* @__PURE__ */
|
|
2582
|
+
showScreenShareToggle && /* @__PURE__ */ jsx5("button", {
|
|
2407
2583
|
type: "button",
|
|
2408
2584
|
onClick: toggleScreenShare,
|
|
2409
2585
|
"aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
|
|
2410
2586
|
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__ */
|
|
2587
|
+
children: isScreenSharing ? /* @__PURE__ */ jsx5(MonitorOff, {
|
|
2412
2588
|
className: "skippr:size-5"
|
|
2413
|
-
}) : /* @__PURE__ */
|
|
2589
|
+
}) : /* @__PURE__ */ jsx5(Monitor, {
|
|
2414
2590
|
className: "skippr:size-5"
|
|
2415
2591
|
})
|
|
2416
2592
|
})
|
|
2417
2593
|
]
|
|
2418
2594
|
}),
|
|
2419
|
-
/* @__PURE__ */
|
|
2595
|
+
/* @__PURE__ */ jsx5("button", {
|
|
2420
2596
|
type: "button",
|
|
2421
2597
|
onClick: () => isPaused ? resumeSession() : pauseSession(),
|
|
2422
2598
|
disabled: isPausing,
|
|
2423
2599
|
"aria-label": showPaused ? "Resume session" : "Pause session",
|
|
2424
2600
|
className: cn(CONTROL_BUTTON, CONTROL_SHADOW, "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted skippr:disabled:opacity-60"),
|
|
2425
|
-
children: showPaused ? /* @__PURE__ */
|
|
2601
|
+
children: showPaused ? /* @__PURE__ */ jsx5(Play, {
|
|
2426
2602
|
className: "skippr:size-5"
|
|
2427
|
-
}) : /* @__PURE__ */
|
|
2603
|
+
}) : /* @__PURE__ */ jsx5(Pause, {
|
|
2428
2604
|
className: "skippr:size-5"
|
|
2429
2605
|
})
|
|
2430
2606
|
}),
|
|
2431
|
-
/* @__PURE__ */
|
|
2607
|
+
/* @__PURE__ */ jsx5("button", {
|
|
2432
2608
|
type: "button",
|
|
2433
2609
|
onClick: () => disconnect(),
|
|
2434
2610
|
"aria-label": "End session",
|
|
2435
2611
|
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__ */
|
|
2612
|
+
children: /* @__PURE__ */ jsx5(PhoneOff, {
|
|
2437
2613
|
className: "skippr:size-5"
|
|
2438
2614
|
})
|
|
2439
2615
|
}),
|
|
2440
|
-
!showPaused && /* @__PURE__ */
|
|
2616
|
+
!showPaused && /* @__PURE__ */ jsx5("button", {
|
|
2441
2617
|
type: "button",
|
|
2442
2618
|
onClick: openChat,
|
|
2443
2619
|
"aria-label": "Open chat",
|
|
2444
2620
|
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__ */
|
|
2621
|
+
children: /* @__PURE__ */ jsx5(MessageSquare, {
|
|
2446
2622
|
className: "skippr:size-5"
|
|
2447
2623
|
})
|
|
2448
2624
|
})
|
|
@@ -2451,12 +2627,12 @@ function ConnectedLauncher() {
|
|
|
2451
2627
|
}
|
|
2452
2628
|
function IdleLauncher() {
|
|
2453
2629
|
const { expandPanel } = useLiveAgent();
|
|
2454
|
-
return /* @__PURE__ */
|
|
2630
|
+
return /* @__PURE__ */ jsx5("button", {
|
|
2455
2631
|
type: "button",
|
|
2456
2632
|
onClick: expandPanel,
|
|
2457
2633
|
"aria-label": "Skippr assistant",
|
|
2458
2634
|
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__ */
|
|
2635
|
+
children: /* @__PURE__ */ jsx5(Logo, {
|
|
2460
2636
|
className: "skippr:size-12"
|
|
2461
2637
|
})
|
|
2462
2638
|
});
|
|
@@ -2466,18 +2642,18 @@ function WelcomeBubble({
|
|
|
2466
2642
|
position,
|
|
2467
2643
|
onDismiss
|
|
2468
2644
|
}) {
|
|
2469
|
-
|
|
2645
|
+
useEffect8(() => {
|
|
2470
2646
|
const timer = setTimeout(onDismiss, 5000);
|
|
2471
2647
|
return () => clearTimeout(timer);
|
|
2472
2648
|
}, [onDismiss]);
|
|
2473
|
-
return /* @__PURE__ */
|
|
2649
|
+
return /* @__PURE__ */ jsxs5("button", {
|
|
2474
2650
|
type: "button",
|
|
2475
2651
|
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
2652
|
onClick: onDismiss,
|
|
2477
2653
|
"aria-label": "Dismiss",
|
|
2478
2654
|
children: [
|
|
2479
2655
|
message,
|
|
2480
|
-
/* @__PURE__ */
|
|
2656
|
+
/* @__PURE__ */ jsx5("span", {
|
|
2481
2657
|
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
2658
|
})
|
|
2483
2659
|
]
|
|
@@ -2488,20 +2664,41 @@ function MinimizedBubble({
|
|
|
2488
2664
|
welcomeDismissed,
|
|
2489
2665
|
onDismissWelcome
|
|
2490
2666
|
}) {
|
|
2491
|
-
const
|
|
2667
|
+
const ctx = useContext3(LiveAgentContext);
|
|
2668
|
+
if (!ctx) {
|
|
2669
|
+
throw new Error("MinimizedBubble must be used within a <LiveAgent> provider");
|
|
2670
|
+
}
|
|
2671
|
+
const {
|
|
2672
|
+
isConnected,
|
|
2673
|
+
isStarting,
|
|
2674
|
+
isPaused,
|
|
2675
|
+
isPausing,
|
|
2676
|
+
position,
|
|
2677
|
+
adoptionGoals,
|
|
2678
|
+
dismissAdoptionGoal,
|
|
2679
|
+
startAdoptionSession
|
|
2680
|
+
} = ctx;
|
|
2492
2681
|
const inSession = isConnected || isPaused || isPausing;
|
|
2493
|
-
return /* @__PURE__ */
|
|
2682
|
+
return /* @__PURE__ */ jsxs5(Fragment2, {
|
|
2494
2683
|
children: [
|
|
2495
|
-
/* @__PURE__ */
|
|
2496
|
-
/* @__PURE__ */
|
|
2684
|
+
/* @__PURE__ */ jsx5(LauncherStatusPill, {}),
|
|
2685
|
+
/* @__PURE__ */ jsxs5("div", {
|
|
2497
2686
|
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
2687
|
children: [
|
|
2499
|
-
|
|
2688
|
+
!inSession && !isStarting && adoptionGoals.length > 0 && /* @__PURE__ */ jsx5("div", {
|
|
2689
|
+
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"),
|
|
2690
|
+
children: adoptionGoals.map((goal) => /* @__PURE__ */ jsx5(AdoptionBubble, {
|
|
2691
|
+
goal,
|
|
2692
|
+
onAttend: startAdoptionSession,
|
|
2693
|
+
onDismiss: dismissAdoptionGoal
|
|
2694
|
+
}, goal.goalId))
|
|
2695
|
+
}),
|
|
2696
|
+
welcomeMessage && !isConnected && !isStarting && !welcomeDismissed && adoptionGoals.length === 0 && /* @__PURE__ */ jsx5(WelcomeBubble, {
|
|
2500
2697
|
message: welcomeMessage,
|
|
2501
2698
|
position,
|
|
2502
2699
|
onDismiss: onDismissWelcome
|
|
2503
2700
|
}),
|
|
2504
|
-
inSession ? /* @__PURE__ */
|
|
2701
|
+
inSession ? /* @__PURE__ */ jsx5(ConnectedLauncher, {}) : /* @__PURE__ */ jsx5(IdleLauncher, {})
|
|
2505
2702
|
]
|
|
2506
2703
|
})
|
|
2507
2704
|
]
|
|
@@ -2510,20 +2707,20 @@ function MinimizedBubble({
|
|
|
2510
2707
|
|
|
2511
2708
|
// src/components/PageActionHandler.tsx
|
|
2512
2709
|
import { useDataChannel as useDataChannel2 } from "@livekit/components-react/hooks";
|
|
2513
|
-
import { useCallback as
|
|
2710
|
+
import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef6, useState as useState7 } from "react";
|
|
2514
2711
|
|
|
2515
2712
|
// src/components/AgentActivityIndicator.tsx
|
|
2516
|
-
import { useEffect as
|
|
2517
|
-
import { jsx as
|
|
2713
|
+
import { useEffect as useEffect9, useRef as useRef5, useState as useState6 } from "react";
|
|
2714
|
+
import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
2518
2715
|
var Z_INDEX2 = 2147483646;
|
|
2519
2716
|
function centerOf(element) {
|
|
2520
2717
|
const rect = getRectInTopViewport(element);
|
|
2521
2718
|
return { left: rect.left + rect.width / 2, top: rect.top + rect.height / 2 };
|
|
2522
2719
|
}
|
|
2523
2720
|
function AgentActivityIndicator({ target }) {
|
|
2524
|
-
const [position, setPosition] =
|
|
2721
|
+
const [position, setPosition] = useState6(null);
|
|
2525
2722
|
const frameRef = useRef5(null);
|
|
2526
|
-
|
|
2723
|
+
useEffect9(() => {
|
|
2527
2724
|
if (!target || !target.element.isConnected) {
|
|
2528
2725
|
setPosition(null);
|
|
2529
2726
|
return;
|
|
@@ -2561,21 +2758,21 @@ function AgentActivityIndicator({ target }) {
|
|
|
2561
2758
|
zIndex: Z_INDEX2,
|
|
2562
2759
|
transition: "left 0.45s cubic-bezier(0.22, 1, 0.36, 1), top 0.45s cubic-bezier(0.22, 1, 0.36, 1)"
|
|
2563
2760
|
};
|
|
2564
|
-
return /* @__PURE__ */
|
|
2761
|
+
return /* @__PURE__ */ jsx6("div", {
|
|
2565
2762
|
"data-skippr-private": "true",
|
|
2566
2763
|
style: containerStyle,
|
|
2567
|
-
children: /* @__PURE__ */
|
|
2764
|
+
children: /* @__PURE__ */ jsxs6("div", {
|
|
2568
2765
|
className: "skippr:relative",
|
|
2569
2766
|
children: [
|
|
2570
|
-
/* @__PURE__ */
|
|
2767
|
+
/* @__PURE__ */ jsx6(MousePointer2, {
|
|
2571
2768
|
"aria-hidden": "true",
|
|
2572
2769
|
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
2770
|
fill: "currentColor"
|
|
2574
2771
|
}),
|
|
2575
|
-
/* @__PURE__ */
|
|
2772
|
+
/* @__PURE__ */ jsx6("div", {
|
|
2576
2773
|
role: "status",
|
|
2577
2774
|
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__ */
|
|
2775
|
+
children: /* @__PURE__ */ jsx6("span", {
|
|
2579
2776
|
className: "skippr:text-[11px] skippr:font-medium skippr:text-white skippr:whitespace-nowrap",
|
|
2580
2777
|
children: target.label
|
|
2581
2778
|
})
|
|
@@ -2586,7 +2783,7 @@ function AgentActivityIndicator({ target }) {
|
|
|
2586
2783
|
}
|
|
2587
2784
|
|
|
2588
2785
|
// src/components/PageActionHandler.tsx
|
|
2589
|
-
import { jsx as
|
|
2786
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
2590
2787
|
var INDICATOR_LINGER_MS = 1400;
|
|
2591
2788
|
var CURSOR_LEAD_BEFORE_ACTION_MS = 350;
|
|
2592
2789
|
var SETTLE_MS = 250;
|
|
@@ -2730,14 +2927,14 @@ function labelFor(action) {
|
|
|
2730
2927
|
}
|
|
2731
2928
|
}
|
|
2732
2929
|
function PageActionHandler() {
|
|
2733
|
-
const [activity, setActivity] =
|
|
2930
|
+
const [activity, setActivity] = useState7(null);
|
|
2734
2931
|
const mountedRef = useRef6(true);
|
|
2735
2932
|
const queueRef = useRef6([]);
|
|
2736
2933
|
const drainingRef = useRef6(false);
|
|
2737
2934
|
const timersRef = useRef6(new Set);
|
|
2738
2935
|
const wakesRef = useRef6(new Set);
|
|
2739
2936
|
const indicatorTimerRef = useRef6(null);
|
|
2740
|
-
const sleep =
|
|
2937
|
+
const sleep = useCallback7((ms) => {
|
|
2741
2938
|
return new Promise((resolve) => {
|
|
2742
2939
|
const wake = () => {
|
|
2743
2940
|
wakesRef.current.delete(wake);
|
|
@@ -2751,7 +2948,7 @@ function PageActionHandler() {
|
|
|
2751
2948
|
timersRef.current.add(timer);
|
|
2752
2949
|
});
|
|
2753
2950
|
}, []);
|
|
2754
|
-
const showActivity =
|
|
2951
|
+
const showActivity = useCallback7((target) => {
|
|
2755
2952
|
if (indicatorTimerRef.current) {
|
|
2756
2953
|
clearTimeout(indicatorTimerRef.current);
|
|
2757
2954
|
indicatorTimerRef.current = null;
|
|
@@ -2766,7 +2963,7 @@ function PageActionHandler() {
|
|
|
2766
2963
|
indicatorTimerRef.current = timer;
|
|
2767
2964
|
}
|
|
2768
2965
|
}, []);
|
|
2769
|
-
const processOne =
|
|
2966
|
+
const processOne = useCallback7(async (action) => {
|
|
2770
2967
|
if (action.type === "navigate") {
|
|
2771
2968
|
queueRef.current.length = 0;
|
|
2772
2969
|
if (!isSameOriginHttpUrl(action.url))
|
|
@@ -2792,7 +2989,7 @@ function PageActionHandler() {
|
|
|
2792
2989
|
runAgentAction(() => performAction(action, element));
|
|
2793
2990
|
await sleep(SETTLE_MS);
|
|
2794
2991
|
}, [showActivity, sleep]);
|
|
2795
|
-
const drain =
|
|
2992
|
+
const drain = useCallback7(async () => {
|
|
2796
2993
|
if (drainingRef.current)
|
|
2797
2994
|
return;
|
|
2798
2995
|
drainingRef.current = true;
|
|
@@ -2807,14 +3004,14 @@ function PageActionHandler() {
|
|
|
2807
3004
|
drainingRef.current = false;
|
|
2808
3005
|
}
|
|
2809
3006
|
}, [processOne]);
|
|
2810
|
-
const onMessage =
|
|
3007
|
+
const onMessage = useCallback7((msg) => {
|
|
2811
3008
|
const action = parsePageAction(msg.payload);
|
|
2812
3009
|
if (!action)
|
|
2813
3010
|
return;
|
|
2814
3011
|
queueRef.current.push(action);
|
|
2815
3012
|
drain();
|
|
2816
3013
|
}, [drain]);
|
|
2817
|
-
|
|
3014
|
+
useEffect10(() => {
|
|
2818
3015
|
mountedRef.current = true;
|
|
2819
3016
|
drainingRef.current = false;
|
|
2820
3017
|
return () => {
|
|
@@ -2833,15 +3030,15 @@ function PageActionHandler() {
|
|
|
2833
3030
|
};
|
|
2834
3031
|
}, []);
|
|
2835
3032
|
useDataChannel2(PAGE_ACTIONS_TOPIC, onMessage);
|
|
2836
|
-
return /* @__PURE__ */
|
|
3033
|
+
return /* @__PURE__ */ jsx7(AgentActivityIndicator, {
|
|
2837
3034
|
target: activity
|
|
2838
3035
|
});
|
|
2839
3036
|
}
|
|
2840
3037
|
|
|
2841
3038
|
// src/components/ShadowHost.tsx
|
|
2842
|
-
import { useLayoutEffect, useRef as useRef7, useState as
|
|
3039
|
+
import { useLayoutEffect, useRef as useRef7, useState as useState8 } from "react";
|
|
2843
3040
|
import { createPortal } from "react-dom";
|
|
2844
|
-
import { jsx as
|
|
3041
|
+
import { jsx as jsx8, Fragment as Fragment3 } from "react/jsx-runtime";
|
|
2845
3042
|
var PROPERTIES_STYLE_ID = "skippr-tw-properties";
|
|
2846
3043
|
var PROPERTY_RULE = /@property\s+[^{]+\{[^}]*\}/g;
|
|
2847
3044
|
function hoistTailwindProperties(css) {
|
|
@@ -2857,9 +3054,9 @@ function hoistTailwindProperties(css) {
|
|
|
2857
3054
|
}
|
|
2858
3055
|
function ShadowHost({ children }) {
|
|
2859
3056
|
const hostRef = useRef7(null);
|
|
2860
|
-
const [shadowRoot, setShadowRoot] =
|
|
3057
|
+
const [shadowRoot, setShadowRoot] = useState8(null);
|
|
2861
3058
|
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}}`;
|
|
3059
|
+
@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
3060
|
useLayoutEffect(() => {
|
|
2864
3061
|
const host = hostRef.current;
|
|
2865
3062
|
if (!host || !css)
|
|
@@ -2874,24 +3071,24 @@ function ShadowHost({ children }) {
|
|
|
2874
3071
|
setShadowRoot(root);
|
|
2875
3072
|
}, [css]);
|
|
2876
3073
|
if (!css)
|
|
2877
|
-
return /* @__PURE__ */
|
|
3074
|
+
return /* @__PURE__ */ jsx8(Fragment3, {
|
|
2878
3075
|
children
|
|
2879
3076
|
});
|
|
2880
|
-
return /* @__PURE__ */
|
|
3077
|
+
return /* @__PURE__ */ jsx8("div", {
|
|
2881
3078
|
ref: hostRef,
|
|
2882
3079
|
children: shadowRoot && createPortal(children, shadowRoot)
|
|
2883
3080
|
});
|
|
2884
3081
|
}
|
|
2885
3082
|
|
|
2886
3083
|
// src/components/Sidebar.tsx
|
|
2887
|
-
import { useContext as
|
|
3084
|
+
import { useContext as useContext6, useEffect as useEffect19 } from "react";
|
|
2888
3085
|
|
|
2889
3086
|
// src/hooks/useCombinedMessages.ts
|
|
2890
|
-
import { useContext as
|
|
3087
|
+
import { useContext as useContext4, useMemo as useMemo5 } from "react";
|
|
2891
3088
|
|
|
2892
3089
|
// src/hooks/useChatMessages.ts
|
|
2893
3090
|
import { useChat, useLocalParticipant as useLocalParticipant4 } from "@livekit/components-react/hooks";
|
|
2894
|
-
import { useMemo as
|
|
3091
|
+
import { useMemo as useMemo3 } from "react";
|
|
2895
3092
|
|
|
2896
3093
|
// src/lib/filterSystemMessages.ts
|
|
2897
3094
|
var SYSTEM_MESSAGE_PATTERN = /^\[\w+\]$/;
|
|
@@ -2904,7 +3101,7 @@ function useChatMessages() {
|
|
|
2904
3101
|
const { chatMessages: rawMessages, send, isSending } = useChat();
|
|
2905
3102
|
const { localParticipant } = useLocalParticipant4();
|
|
2906
3103
|
const localIdentity = localParticipant.identity;
|
|
2907
|
-
const chatMessages =
|
|
3104
|
+
const chatMessages = useMemo3(() => {
|
|
2908
3105
|
const sortedMessages = rawMessages.map((msg) => ({
|
|
2909
3106
|
id: msg.id,
|
|
2910
3107
|
role: msg.from?.identity === localIdentity ? "user" : "assistant",
|
|
@@ -2919,12 +3116,12 @@ function useChatMessages() {
|
|
|
2919
3116
|
|
|
2920
3117
|
// src/hooks/useStreamingTranscript.ts
|
|
2921
3118
|
import { useLocalParticipant as useLocalParticipant5, useTranscriptions } from "@livekit/components-react/hooks";
|
|
2922
|
-
import { useMemo as
|
|
3119
|
+
import { useMemo as useMemo4 } from "react";
|
|
2923
3120
|
function useStreamingTranscript() {
|
|
2924
3121
|
const transcriptions = useTranscriptions();
|
|
2925
3122
|
const { localParticipant } = useLocalParticipant5();
|
|
2926
3123
|
const localIdentity = localParticipant.identity;
|
|
2927
|
-
const transcriptMessages =
|
|
3124
|
+
const transcriptMessages = useMemo4(() => filterSystemMessages(transcriptions.filter((stream) => stream.text.trim().length > 0).map((stream) => ({
|
|
2928
3125
|
id: stream.streamInfo.id,
|
|
2929
3126
|
role: stream.participantInfo.identity === localIdentity ? "user" : "assistant",
|
|
2930
3127
|
content: stream.text,
|
|
@@ -2955,15 +3152,15 @@ function useCombinedMessages() {
|
|
|
2955
3152
|
const { transcriptMessages } = useStreamingTranscript();
|
|
2956
3153
|
const { chatMessages, sendChatMessage, isSendingChat } = useChatMessages();
|
|
2957
3154
|
const { state: agentState } = useAgentVoiceState();
|
|
2958
|
-
const historyMessages =
|
|
2959
|
-
const liveMessages =
|
|
3155
|
+
const historyMessages = useContext4(LiveAgentContext)?.historyMessages ?? [];
|
|
3156
|
+
const liveMessages = useMemo5(() => {
|
|
2960
3157
|
if (chatMessages.length === 0)
|
|
2961
3158
|
return transcriptMessages;
|
|
2962
3159
|
if (transcriptMessages.length === 0)
|
|
2963
3160
|
return chatMessages;
|
|
2964
3161
|
return mergeChatsIntoTranscripts(transcriptMessages, chatMessages);
|
|
2965
3162
|
}, [transcriptMessages, chatMessages]);
|
|
2966
|
-
const allMessages =
|
|
3163
|
+
const allMessages = useMemo5(() => {
|
|
2967
3164
|
if (historyMessages.length === 0)
|
|
2968
3165
|
return liveMessages;
|
|
2969
3166
|
const seenIds = new Set(liveMessages.map((message) => message.id));
|
|
@@ -2973,15 +3170,15 @@ function useCombinedMessages() {
|
|
|
2973
3170
|
}
|
|
2974
3171
|
|
|
2975
3172
|
// src/hooks/usePhaseUpdates.ts
|
|
2976
|
-
import { useCallback as
|
|
3173
|
+
import { useCallback as useCallback8, useContext as useContext5, useEffect as useEffect12 } from "react";
|
|
2977
3174
|
|
|
2978
3175
|
// src/hooks/useAgentState.ts
|
|
2979
3176
|
import { useRemoteParticipants } from "@livekit/components-react/hooks";
|
|
2980
|
-
import { useEffect as
|
|
3177
|
+
import { useEffect as useEffect11, useState as useState9 } from "react";
|
|
2981
3178
|
function useAgentState(attributeKey, parse, initial) {
|
|
2982
|
-
const [value, setValue] =
|
|
3179
|
+
const [value, setValue] = useState9(initial);
|
|
2983
3180
|
const remoteParticipants = useRemoteParticipants();
|
|
2984
|
-
|
|
3181
|
+
useEffect11(() => {
|
|
2985
3182
|
const agentParticipant = remoteParticipants.find((p) => p.attributes?.[attributeKey]);
|
|
2986
3183
|
if (agentParticipant) {
|
|
2987
3184
|
const attr = agentParticipant.attributes?.[attributeKey];
|
|
@@ -3027,10 +3224,10 @@ function parsePhases(json) {
|
|
|
3027
3224
|
return null;
|
|
3028
3225
|
}
|
|
3029
3226
|
function usePhaseUpdates() {
|
|
3030
|
-
const parse =
|
|
3227
|
+
const parse = useCallback8(parsePhases, []);
|
|
3031
3228
|
const livePhases = useAgentState("phases", parse, []);
|
|
3032
|
-
const ctx =
|
|
3033
|
-
|
|
3229
|
+
const ctx = useContext5(LiveAgentContext);
|
|
3230
|
+
useEffect12(() => {
|
|
3034
3231
|
if (livePhases.length > 0)
|
|
3035
3232
|
ctx?.setPhasesSnapshot(livePhases);
|
|
3036
3233
|
}, [livePhases, ctx?.setPhasesSnapshot]);
|
|
@@ -3039,7 +3236,7 @@ function usePhaseUpdates() {
|
|
|
3039
3236
|
}
|
|
3040
3237
|
|
|
3041
3238
|
// src/hooks/useSessionRemaining.ts
|
|
3042
|
-
import { useEffect as
|
|
3239
|
+
import { useEffect as useEffect13, useRef as useRef8, useState as useState10 } from "react";
|
|
3043
3240
|
|
|
3044
3241
|
// src/lib/format.ts
|
|
3045
3242
|
function formatTime(seconds) {
|
|
@@ -3056,8 +3253,8 @@ function parseNumber(s) {
|
|
|
3056
3253
|
function useSessionRemaining() {
|
|
3057
3254
|
const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
|
|
3058
3255
|
const endTimeRef = useRef8(null);
|
|
3059
|
-
const [remaining, setRemaining] =
|
|
3060
|
-
|
|
3256
|
+
const [remaining, setRemaining] = useState10(null);
|
|
3257
|
+
useEffect13(() => {
|
|
3061
3258
|
if (maxCallDuration === null || endTimeRef.current !== null)
|
|
3062
3259
|
return;
|
|
3063
3260
|
const endTime = Date.now() + maxCallDuration * 1000;
|
|
@@ -3074,10 +3271,10 @@ function useSessionRemaining() {
|
|
|
3074
3271
|
}
|
|
3075
3272
|
|
|
3076
3273
|
// src/hooks/useElapsedSeconds.ts
|
|
3077
|
-
import { useEffect as
|
|
3274
|
+
import { useEffect as useEffect14, useState as useState11 } from "react";
|
|
3078
3275
|
function useElapsedSeconds(isRunning) {
|
|
3079
|
-
const [elapsed, setElapsed] =
|
|
3080
|
-
|
|
3276
|
+
const [elapsed, setElapsed] = useState11(0);
|
|
3277
|
+
useEffect14(() => {
|
|
3081
3278
|
if (!isRunning) {
|
|
3082
3279
|
setElapsed(0);
|
|
3083
3280
|
return;
|
|
@@ -3093,50 +3290,50 @@ function useElapsedSeconds(isRunning) {
|
|
|
3093
3290
|
}
|
|
3094
3291
|
|
|
3095
3292
|
// src/components/ChatHeader.tsx
|
|
3096
|
-
import { jsx as
|
|
3293
|
+
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
3097
3294
|
function ChatHeader() {
|
|
3098
3295
|
const { isConnected, minimizePanel, minimizable } = useLiveAgent();
|
|
3099
3296
|
const elapsed = useElapsedSeconds(isConnected);
|
|
3100
|
-
return /* @__PURE__ */
|
|
3297
|
+
return /* @__PURE__ */ jsxs7("header", {
|
|
3101
3298
|
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
3299
|
children: [
|
|
3103
|
-
/* @__PURE__ */
|
|
3300
|
+
/* @__PURE__ */ jsx9("p", {
|
|
3104
3301
|
className: "skippr:text-sm skippr:font-semibold skippr:text-primary-foreground",
|
|
3105
3302
|
children: "Skippr"
|
|
3106
3303
|
}),
|
|
3107
|
-
/* @__PURE__ */
|
|
3304
|
+
/* @__PURE__ */ jsxs7("div", {
|
|
3108
3305
|
className: "skippr:flex skippr:items-center skippr:gap-2",
|
|
3109
3306
|
children: [
|
|
3110
|
-
isConnected && /* @__PURE__ */
|
|
3307
|
+
isConnected && /* @__PURE__ */ jsxs7("div", {
|
|
3111
3308
|
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
3309
|
children: [
|
|
3113
|
-
/* @__PURE__ */
|
|
3310
|
+
/* @__PURE__ */ jsxs7("span", {
|
|
3114
3311
|
className: "skippr:relative skippr:flex skippr:size-1.5",
|
|
3115
3312
|
children: [
|
|
3116
|
-
/* @__PURE__ */
|
|
3313
|
+
/* @__PURE__ */ jsx9("span", {
|
|
3117
3314
|
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
3315
|
}),
|
|
3119
|
-
/* @__PURE__ */
|
|
3316
|
+
/* @__PURE__ */ jsx9("span", {
|
|
3120
3317
|
className: "skippr:relative skippr:inline-flex skippr:size-1.5 skippr:rounded-full skippr:bg-red-400"
|
|
3121
3318
|
})
|
|
3122
3319
|
]
|
|
3123
3320
|
}),
|
|
3124
|
-
/* @__PURE__ */
|
|
3321
|
+
/* @__PURE__ */ jsx9("span", {
|
|
3125
3322
|
className: "skippr:text-[10px] skippr:font-medium skippr:text-primary-foreground",
|
|
3126
3323
|
children: "REC"
|
|
3127
3324
|
}),
|
|
3128
|
-
/* @__PURE__ */
|
|
3325
|
+
/* @__PURE__ */ jsx9("span", {
|
|
3129
3326
|
className: "skippr:text-[10px] skippr:font-mono skippr:text-primary-foreground",
|
|
3130
3327
|
children: formatTime(elapsed)
|
|
3131
3328
|
})
|
|
3132
3329
|
]
|
|
3133
3330
|
}),
|
|
3134
|
-
minimizable && /* @__PURE__ */
|
|
3331
|
+
minimizable && /* @__PURE__ */ jsx9("button", {
|
|
3135
3332
|
type: "button",
|
|
3136
3333
|
onClick: minimizePanel,
|
|
3137
3334
|
"aria-label": "Minimize",
|
|
3138
3335
|
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__ */
|
|
3336
|
+
children: /* @__PURE__ */ jsx9(Minimize2, {
|
|
3140
3337
|
className: "skippr:size-3.5"
|
|
3141
3338
|
})
|
|
3142
3339
|
})
|
|
@@ -3147,26 +3344,26 @@ function ChatHeader() {
|
|
|
3147
3344
|
}
|
|
3148
3345
|
|
|
3149
3346
|
// src/components/LoadingDots.tsx
|
|
3150
|
-
import { jsx as
|
|
3347
|
+
import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
3151
3348
|
function LoadingDots({ label }) {
|
|
3152
|
-
return /* @__PURE__ */
|
|
3349
|
+
return /* @__PURE__ */ jsxs8("div", {
|
|
3153
3350
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:py-4",
|
|
3154
3351
|
children: [
|
|
3155
|
-
/* @__PURE__ */
|
|
3352
|
+
/* @__PURE__ */ jsxs8("div", {
|
|
3156
3353
|
className: "skippr:flex skippr:gap-1",
|
|
3157
3354
|
children: [
|
|
3158
|
-
/* @__PURE__ */
|
|
3355
|
+
/* @__PURE__ */ jsx10("span", {
|
|
3159
3356
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
3160
3357
|
}),
|
|
3161
|
-
/* @__PURE__ */
|
|
3358
|
+
/* @__PURE__ */ jsx10("span", {
|
|
3162
3359
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
3163
3360
|
}),
|
|
3164
|
-
/* @__PURE__ */
|
|
3361
|
+
/* @__PURE__ */ jsx10("span", {
|
|
3165
3362
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
3166
3363
|
})
|
|
3167
3364
|
]
|
|
3168
3365
|
}),
|
|
3169
|
-
/* @__PURE__ */
|
|
3366
|
+
/* @__PURE__ */ jsx10("p", {
|
|
3170
3367
|
className: "skippr:text-xs skippr:text-muted-foreground",
|
|
3171
3368
|
children: label
|
|
3172
3369
|
})
|
|
@@ -3175,11 +3372,11 @@ function LoadingDots({ label }) {
|
|
|
3175
3372
|
}
|
|
3176
3373
|
|
|
3177
3374
|
// src/components/LoginFlow.tsx
|
|
3178
|
-
import { useCallback as
|
|
3375
|
+
import { useCallback as useCallback9, useEffect as useEffect15, useRef as useRef9, useState as useState12 } from "react";
|
|
3179
3376
|
|
|
3180
3377
|
// src/components/ui/button.tsx
|
|
3181
3378
|
import { forwardRef as forwardRef3 } from "react";
|
|
3182
|
-
import { jsx as
|
|
3379
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
3183
3380
|
var variantClasses = {
|
|
3184
3381
|
default: "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90",
|
|
3185
3382
|
destructive: "skippr:bg-destructive skippr:text-white skippr:hover:bg-destructive/90",
|
|
@@ -3198,7 +3395,7 @@ var sizeClasses = {
|
|
|
3198
3395
|
"icon-lg": "skippr:size-10"
|
|
3199
3396
|
};
|
|
3200
3397
|
var Button = forwardRef3(({ className, variant = "default", size = "default", ...props }, ref) => {
|
|
3201
|
-
return /* @__PURE__ */
|
|
3398
|
+
return /* @__PURE__ */ jsx11("button", {
|
|
3202
3399
|
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
3400
|
ref,
|
|
3204
3401
|
...props
|
|
@@ -3207,28 +3404,28 @@ var Button = forwardRef3(({ className, variant = "default", size = "default", ..
|
|
|
3207
3404
|
Button.displayName = "Button";
|
|
3208
3405
|
|
|
3209
3406
|
// src/components/LoginFlow.tsx
|
|
3210
|
-
import { jsx as
|
|
3407
|
+
import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
3211
3408
|
var OTP_LENGTH = 6;
|
|
3212
3409
|
var DIGIT_KEYS = ["d0", "d1", "d2", "d3", "d4", "d5"];
|
|
3213
3410
|
function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
3214
|
-
const [step, setStep] =
|
|
3215
|
-
const [email, setEmail] =
|
|
3216
|
-
const handleRequestOtp =
|
|
3411
|
+
const [step, setStep] = useState12("email");
|
|
3412
|
+
const [email, setEmail] = useState12("");
|
|
3413
|
+
const handleRequestOtp = useCallback9(async (emailValue) => {
|
|
3217
3414
|
const success = await requestOtp(emailValue);
|
|
3218
3415
|
if (success)
|
|
3219
3416
|
setStep("otp");
|
|
3220
3417
|
}, [requestOtp]);
|
|
3221
|
-
const handleVerifyOtp =
|
|
3418
|
+
const handleVerifyOtp = useCallback9(async (code) => {
|
|
3222
3419
|
await verifyOtp(email, code);
|
|
3223
3420
|
}, [verifyOtp, email]);
|
|
3224
|
-
const handleBack =
|
|
3421
|
+
const handleBack = useCallback9(() => {
|
|
3225
3422
|
setStep("email");
|
|
3226
3423
|
}, []);
|
|
3227
|
-
const handleResend =
|
|
3424
|
+
const handleResend = useCallback9(async () => {
|
|
3228
3425
|
await requestOtp(email);
|
|
3229
3426
|
}, [requestOtp, email]);
|
|
3230
3427
|
if (step === "otp") {
|
|
3231
|
-
return /* @__PURE__ */
|
|
3428
|
+
return /* @__PURE__ */ jsx12(OtpStep, {
|
|
3232
3429
|
email,
|
|
3233
3430
|
onSubmit: handleVerifyOtp,
|
|
3234
3431
|
onResend: handleResend,
|
|
@@ -3237,7 +3434,7 @@ function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
|
3237
3434
|
isSubmitting
|
|
3238
3435
|
});
|
|
3239
3436
|
}
|
|
3240
|
-
return /* @__PURE__ */
|
|
3437
|
+
return /* @__PURE__ */ jsx12(EmailStep, {
|
|
3241
3438
|
email,
|
|
3242
3439
|
onEmailChange: setEmail,
|
|
3243
3440
|
onSubmit: handleRequestOtp,
|
|
@@ -3251,30 +3448,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
3251
3448
|
if (email.trim())
|
|
3252
3449
|
onSubmit(email.trim());
|
|
3253
3450
|
}
|
|
3254
|
-
return /* @__PURE__ */
|
|
3451
|
+
return /* @__PURE__ */ jsxs9("div", {
|
|
3255
3452
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
|
|
3256
3453
|
children: [
|
|
3257
|
-
/* @__PURE__ */
|
|
3454
|
+
/* @__PURE__ */ jsxs9("div", {
|
|
3258
3455
|
className: "skippr:mb-4 skippr:text-center",
|
|
3259
3456
|
children: [
|
|
3260
|
-
/* @__PURE__ */
|
|
3457
|
+
/* @__PURE__ */ jsx12(Mail, {
|
|
3261
3458
|
className: "skippr:mx-auto skippr:mb-2 skippr:size-6 skippr:text-primary"
|
|
3262
3459
|
}),
|
|
3263
|
-
/* @__PURE__ */
|
|
3460
|
+
/* @__PURE__ */ jsx12("p", {
|
|
3264
3461
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
3265
3462
|
children: "Sign in to continue"
|
|
3266
3463
|
}),
|
|
3267
|
-
/* @__PURE__ */
|
|
3464
|
+
/* @__PURE__ */ jsx12("p", {
|
|
3268
3465
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
3269
3466
|
children: "Your email will be used to identify you across sessions"
|
|
3270
3467
|
})
|
|
3271
3468
|
]
|
|
3272
3469
|
}),
|
|
3273
|
-
/* @__PURE__ */
|
|
3470
|
+
/* @__PURE__ */ jsxs9("form", {
|
|
3274
3471
|
onSubmit: handleSubmit,
|
|
3275
3472
|
className: "skippr:flex skippr:flex-col skippr:gap-3",
|
|
3276
3473
|
children: [
|
|
3277
|
-
/* @__PURE__ */
|
|
3474
|
+
/* @__PURE__ */ jsx12("input", {
|
|
3278
3475
|
type: "email",
|
|
3279
3476
|
placeholder: "you@example.com",
|
|
3280
3477
|
value: email,
|
|
@@ -3283,15 +3480,15 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
3283
3480
|
required: true,
|
|
3284
3481
|
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
3482
|
}),
|
|
3286
|
-
/* @__PURE__ */
|
|
3483
|
+
/* @__PURE__ */ jsx12(Button, {
|
|
3287
3484
|
type: "submit",
|
|
3288
3485
|
disabled: isSubmitting || !email.trim(),
|
|
3289
3486
|
className: "skippr:w-full",
|
|
3290
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
3487
|
+
children: isSubmitting ? /* @__PURE__ */ jsx12(LoaderCircle, {
|
|
3291
3488
|
className: "skippr:size-4 skippr:animate-spin"
|
|
3292
3489
|
}) : "Continue"
|
|
3293
3490
|
}),
|
|
3294
|
-
error && /* @__PURE__ */
|
|
3491
|
+
error && /* @__PURE__ */ jsx12("p", {
|
|
3295
3492
|
className: "skippr:text-xs skippr:text-center skippr:text-destructive",
|
|
3296
3493
|
children: error
|
|
3297
3494
|
})
|
|
@@ -3301,30 +3498,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
3301
3498
|
});
|
|
3302
3499
|
}
|
|
3303
3500
|
function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
3304
|
-
const [digits, setDigits] =
|
|
3305
|
-
const [resendCooldown, setResendCooldown] =
|
|
3501
|
+
const [digits, setDigits] = useState12(Array(OTP_LENGTH).fill(""));
|
|
3502
|
+
const [resendCooldown, setResendCooldown] = useState12(0);
|
|
3306
3503
|
const inputRefs = useRef9([]);
|
|
3307
3504
|
const submittedRef = useRef9(false);
|
|
3308
|
-
|
|
3505
|
+
useEffect15(() => {
|
|
3309
3506
|
inputRefs.current[0]?.focus();
|
|
3310
3507
|
}, []);
|
|
3311
|
-
|
|
3508
|
+
useEffect15(() => {
|
|
3312
3509
|
if (error)
|
|
3313
3510
|
submittedRef.current = false;
|
|
3314
3511
|
}, [error]);
|
|
3315
|
-
|
|
3512
|
+
useEffect15(() => {
|
|
3316
3513
|
if (resendCooldown <= 0)
|
|
3317
3514
|
return;
|
|
3318
3515
|
const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
|
|
3319
3516
|
return () => clearTimeout(timer);
|
|
3320
3517
|
}, [resendCooldown]);
|
|
3321
|
-
const submitCode =
|
|
3518
|
+
const submitCode = useCallback9((code) => {
|
|
3322
3519
|
if (submittedRef.current || isSubmitting)
|
|
3323
3520
|
return;
|
|
3324
3521
|
submittedRef.current = true;
|
|
3325
3522
|
onSubmit(code);
|
|
3326
3523
|
}, [onSubmit, isSubmitting]);
|
|
3327
|
-
const handleDigitChange =
|
|
3524
|
+
const handleDigitChange = useCallback9((index2, value) => {
|
|
3328
3525
|
const digit = value.replace(/\D/g, "").slice(-1);
|
|
3329
3526
|
const newDigits = [...digits];
|
|
3330
3527
|
newDigits[index2] = digit;
|
|
@@ -3338,12 +3535,12 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3338
3535
|
submitCode(code);
|
|
3339
3536
|
}
|
|
3340
3537
|
}, [digits, submitCode]);
|
|
3341
|
-
const handleKeyDown =
|
|
3538
|
+
const handleKeyDown = useCallback9((index2, e) => {
|
|
3342
3539
|
if (e.key === "Backspace" && !digits[index2] && index2 > 0) {
|
|
3343
3540
|
inputRefs.current[index2 - 1]?.focus();
|
|
3344
3541
|
}
|
|
3345
3542
|
}, [digits]);
|
|
3346
|
-
const handlePaste =
|
|
3543
|
+
const handlePaste = useCallback9((e) => {
|
|
3347
3544
|
e.preventDefault();
|
|
3348
3545
|
const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, OTP_LENGTH);
|
|
3349
3546
|
if (pasted.length > 0) {
|
|
@@ -3371,22 +3568,22 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3371
3568
|
submittedRef.current = false;
|
|
3372
3569
|
inputRefs.current[0]?.focus();
|
|
3373
3570
|
}
|
|
3374
|
-
return /* @__PURE__ */
|
|
3571
|
+
return /* @__PURE__ */ jsxs9("div", {
|
|
3375
3572
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
|
|
3376
3573
|
children: [
|
|
3377
|
-
/* @__PURE__ */
|
|
3574
|
+
/* @__PURE__ */ jsxs9("div", {
|
|
3378
3575
|
className: "skippr:mb-4 skippr:text-center",
|
|
3379
3576
|
children: [
|
|
3380
|
-
/* @__PURE__ */
|
|
3577
|
+
/* @__PURE__ */ jsx12("p", {
|
|
3381
3578
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
3382
3579
|
children: "Enter verification code"
|
|
3383
3580
|
}),
|
|
3384
|
-
/* @__PURE__ */
|
|
3581
|
+
/* @__PURE__ */ jsxs9("p", {
|
|
3385
3582
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
3386
3583
|
children: [
|
|
3387
3584
|
"We sent a 6-digit code to",
|
|
3388
3585
|
" ",
|
|
3389
|
-
/* @__PURE__ */
|
|
3586
|
+
/* @__PURE__ */ jsx12("span", {
|
|
3390
3587
|
className: "skippr:font-medium skippr:text-foreground",
|
|
3391
3588
|
children: email
|
|
3392
3589
|
})
|
|
@@ -3394,13 +3591,13 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3394
3591
|
})
|
|
3395
3592
|
]
|
|
3396
3593
|
}),
|
|
3397
|
-
/* @__PURE__ */
|
|
3594
|
+
/* @__PURE__ */ jsxs9("form", {
|
|
3398
3595
|
onSubmit: handleSubmit,
|
|
3399
3596
|
className: "skippr:flex skippr:flex-col skippr:gap-3",
|
|
3400
3597
|
children: [
|
|
3401
|
-
/* @__PURE__ */
|
|
3598
|
+
/* @__PURE__ */ jsx12("div", {
|
|
3402
3599
|
className: "skippr:flex skippr:justify-center skippr:gap-1.5",
|
|
3403
|
-
children: digits.map((digit, index2) => /* @__PURE__ */
|
|
3600
|
+
children: digits.map((digit, index2) => /* @__PURE__ */ jsx12("input", {
|
|
3404
3601
|
ref: (el) => {
|
|
3405
3602
|
inputRefs.current[index2] = el;
|
|
3406
3603
|
},
|
|
@@ -3415,29 +3612,29 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3415
3612
|
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
3613
|
}, DIGIT_KEYS[index2]))
|
|
3417
3614
|
}),
|
|
3418
|
-
error && /* @__PURE__ */
|
|
3615
|
+
error && /* @__PURE__ */ jsx12("p", {
|
|
3419
3616
|
className: "skippr:text-xs skippr:text-center skippr:text-destructive",
|
|
3420
3617
|
children: error
|
|
3421
3618
|
}),
|
|
3422
|
-
/* @__PURE__ */
|
|
3619
|
+
/* @__PURE__ */ jsx12(Button, {
|
|
3423
3620
|
type: "submit",
|
|
3424
3621
|
disabled: isSubmitting || digits.join("").length !== OTP_LENGTH,
|
|
3425
3622
|
className: "skippr:w-full",
|
|
3426
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
3623
|
+
children: isSubmitting ? /* @__PURE__ */ jsx12(LoaderCircle, {
|
|
3427
3624
|
className: "skippr:size-4 skippr:animate-spin"
|
|
3428
3625
|
}) : "Verify"
|
|
3429
3626
|
}),
|
|
3430
|
-
/* @__PURE__ */
|
|
3627
|
+
/* @__PURE__ */ jsxs9("div", {
|
|
3431
3628
|
className: "skippr:flex skippr:items-center skippr:justify-between skippr:text-xs",
|
|
3432
3629
|
children: [
|
|
3433
|
-
/* @__PURE__ */
|
|
3630
|
+
/* @__PURE__ */ jsx12("button", {
|
|
3434
3631
|
type: "button",
|
|
3435
3632
|
onClick: onBack,
|
|
3436
3633
|
disabled: isSubmitting,
|
|
3437
3634
|
className: "skippr:text-muted-foreground hover:skippr:text-foreground skippr:transition-colors disabled:skippr:opacity-50",
|
|
3438
3635
|
children: "Change email"
|
|
3439
3636
|
}),
|
|
3440
|
-
/* @__PURE__ */
|
|
3637
|
+
/* @__PURE__ */ jsx12("button", {
|
|
3441
3638
|
type: "button",
|
|
3442
3639
|
onClick: handleResend,
|
|
3443
3640
|
disabled: isSubmitting || resendCooldown > 0,
|
|
@@ -3453,7 +3650,7 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3453
3650
|
}
|
|
3454
3651
|
|
|
3455
3652
|
// src/components/MeetingControls.tsx
|
|
3456
|
-
import { jsx as
|
|
3653
|
+
import { jsx as jsx13, jsxs as jsxs10, Fragment as Fragment4 } from "react/jsx-runtime";
|
|
3457
3654
|
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
3655
|
var MUTED_BUTTON = "skippr:bg-muted skippr:text-foreground skippr:hover:bg-muted/80";
|
|
3459
3656
|
function MeetingControls({
|
|
@@ -3466,68 +3663,68 @@ function MeetingControls({
|
|
|
3466
3663
|
}) {
|
|
3467
3664
|
const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
|
|
3468
3665
|
const showPaused = isPaused || isPausing;
|
|
3469
|
-
return /* @__PURE__ */
|
|
3666
|
+
return /* @__PURE__ */ jsxs10("div", {
|
|
3470
3667
|
className: "skippr:shrink-0 skippr:border-t skippr:border-border skippr:bg-background skippr:px-4 skippr:py-4",
|
|
3471
3668
|
children: [
|
|
3472
|
-
/* @__PURE__ */
|
|
3669
|
+
/* @__PURE__ */ jsxs10("div", {
|
|
3473
3670
|
className: "skippr:flex skippr:items-center skippr:justify-center skippr:gap-3",
|
|
3474
3671
|
children: [
|
|
3475
|
-
!showPaused && /* @__PURE__ */
|
|
3672
|
+
!showPaused && /* @__PURE__ */ jsxs10(Fragment4, {
|
|
3476
3673
|
children: [
|
|
3477
|
-
/* @__PURE__ */
|
|
3674
|
+
/* @__PURE__ */ jsx13("button", {
|
|
3478
3675
|
type: "button",
|
|
3479
3676
|
onClick: toggleMute,
|
|
3480
3677
|
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
3481
3678
|
className: cn(CONTROL_BUTTON2, isMuted ? "skippr:bg-destructive/15 skippr:text-destructive skippr:hover:bg-destructive/25" : MUTED_BUTTON),
|
|
3482
|
-
children: isMuted ? /* @__PURE__ */
|
|
3679
|
+
children: isMuted ? /* @__PURE__ */ jsx13(MicOff, {
|
|
3483
3680
|
className: "skippr:size-5"
|
|
3484
|
-
}) : /* @__PURE__ */
|
|
3681
|
+
}) : /* @__PURE__ */ jsx13(Mic, {
|
|
3485
3682
|
className: "skippr:size-5"
|
|
3486
3683
|
})
|
|
3487
3684
|
}),
|
|
3488
|
-
showScreenShareToggle && /* @__PURE__ */
|
|
3685
|
+
showScreenShareToggle && /* @__PURE__ */ jsx13("button", {
|
|
3489
3686
|
type: "button",
|
|
3490
3687
|
onClick: toggleScreenShare,
|
|
3491
3688
|
"aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
|
|
3492
3689
|
className: cn(CONTROL_BUTTON2, isScreenSharing ? "skippr:bg-bubble skippr:text-white skippr:hover:brightness-110" : MUTED_BUTTON),
|
|
3493
|
-
children: isScreenSharing ? /* @__PURE__ */
|
|
3690
|
+
children: isScreenSharing ? /* @__PURE__ */ jsx13(MonitorOff, {
|
|
3494
3691
|
className: "skippr:size-5"
|
|
3495
|
-
}) : /* @__PURE__ */
|
|
3692
|
+
}) : /* @__PURE__ */ jsx13(Monitor, {
|
|
3496
3693
|
className: "skippr:size-5"
|
|
3497
3694
|
})
|
|
3498
3695
|
})
|
|
3499
3696
|
]
|
|
3500
3697
|
}),
|
|
3501
|
-
showPaused ? onResume && /* @__PURE__ */
|
|
3698
|
+
showPaused ? onResume && /* @__PURE__ */ jsx13("button", {
|
|
3502
3699
|
type: "button",
|
|
3503
3700
|
onClick: onResume,
|
|
3504
3701
|
disabled: isPausing,
|
|
3505
3702
|
"aria-label": "Resume session",
|
|
3506
3703
|
className: cn(CONTROL_BUTTON2, MUTED_BUTTON),
|
|
3507
|
-
children: /* @__PURE__ */
|
|
3704
|
+
children: /* @__PURE__ */ jsx13(Play, {
|
|
3508
3705
|
className: "skippr:size-5"
|
|
3509
3706
|
})
|
|
3510
|
-
}) : onPause && /* @__PURE__ */
|
|
3707
|
+
}) : onPause && /* @__PURE__ */ jsx13("button", {
|
|
3511
3708
|
type: "button",
|
|
3512
3709
|
onClick: onPause,
|
|
3513
3710
|
"aria-label": "Pause session",
|
|
3514
3711
|
className: cn(CONTROL_BUTTON2, MUTED_BUTTON),
|
|
3515
|
-
children: /* @__PURE__ */
|
|
3712
|
+
children: /* @__PURE__ */ jsx13(Pause, {
|
|
3516
3713
|
className: "skippr:size-5"
|
|
3517
3714
|
})
|
|
3518
3715
|
}),
|
|
3519
|
-
/* @__PURE__ */
|
|
3716
|
+
/* @__PURE__ */ jsx13("button", {
|
|
3520
3717
|
type: "button",
|
|
3521
3718
|
onClick: onHangUp,
|
|
3522
3719
|
"aria-label": "End session",
|
|
3523
3720
|
className: cn(CONTROL_BUTTON2, "skippr:bg-destructive skippr:text-destructive-foreground skippr:hover:bg-destructive/90"),
|
|
3524
|
-
children: /* @__PURE__ */
|
|
3721
|
+
children: /* @__PURE__ */ jsx13(PhoneOff, {
|
|
3525
3722
|
className: "skippr:size-5"
|
|
3526
3723
|
})
|
|
3527
3724
|
})
|
|
3528
3725
|
]
|
|
3529
3726
|
}),
|
|
3530
|
-
/* @__PURE__ */
|
|
3727
|
+
/* @__PURE__ */ jsx13("p", {
|
|
3531
3728
|
className: "skippr:mt-3 skippr:text-center skippr:text-[10px] skippr:text-muted-foreground",
|
|
3532
3729
|
children: "Powered by Skippr"
|
|
3533
3730
|
})
|
|
@@ -3536,17 +3733,17 @@ function MeetingControls({
|
|
|
3536
3733
|
}
|
|
3537
3734
|
|
|
3538
3735
|
// src/components/MessageList.tsx
|
|
3539
|
-
import { useEffect as
|
|
3736
|
+
import { useEffect as useEffect17, useRef as useRef11 } from "react";
|
|
3540
3737
|
|
|
3541
3738
|
// src/components/ChatInput.tsx
|
|
3542
|
-
import { useEffect as
|
|
3543
|
-
import { jsx as
|
|
3739
|
+
import { useEffect as useEffect16, useRef as useRef10, useState as useState13 } from "react";
|
|
3740
|
+
import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
3544
3741
|
var MAX_INPUT_HEIGHT = 60;
|
|
3545
3742
|
function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
3546
|
-
const [inputText, setInputText] =
|
|
3743
|
+
const [inputText, setInputText] = useState13("");
|
|
3547
3744
|
const textareaRef = useRef10(null);
|
|
3548
3745
|
const canSend = inputText.trim().length > 0 && !isSendingChat;
|
|
3549
|
-
|
|
3746
|
+
useEffect16(() => {
|
|
3550
3747
|
if (autoFocus)
|
|
3551
3748
|
textareaRef.current?.focus();
|
|
3552
3749
|
}, [autoFocus]);
|
|
@@ -3577,13 +3774,13 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
3577
3774
|
handleSubmit(e);
|
|
3578
3775
|
}
|
|
3579
3776
|
}
|
|
3580
|
-
return /* @__PURE__ */
|
|
3777
|
+
return /* @__PURE__ */ jsx14("form", {
|
|
3581
3778
|
onSubmit: handleSubmit,
|
|
3582
3779
|
className: "skippr:border-t skippr:border-border skippr:p-3",
|
|
3583
|
-
children: /* @__PURE__ */
|
|
3780
|
+
children: /* @__PURE__ */ jsxs11("div", {
|
|
3584
3781
|
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
3782
|
children: [
|
|
3586
|
-
/* @__PURE__ */
|
|
3783
|
+
/* @__PURE__ */ jsx14("textarea", {
|
|
3587
3784
|
ref: textareaRef,
|
|
3588
3785
|
rows: 1,
|
|
3589
3786
|
value: inputText,
|
|
@@ -3593,12 +3790,12 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
3593
3790
|
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
3791
|
style: { maxHeight: `${MAX_INPUT_HEIGHT}px` }
|
|
3595
3792
|
}),
|
|
3596
|
-
/* @__PURE__ */
|
|
3793
|
+
/* @__PURE__ */ jsx14("button", {
|
|
3597
3794
|
type: "submit",
|
|
3598
3795
|
disabled: !canSend,
|
|
3599
3796
|
"aria-label": "Send message",
|
|
3600
3797
|
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__ */
|
|
3798
|
+
children: /* @__PURE__ */ jsx14(Send, {
|
|
3602
3799
|
className: "skippr:size-3.5"
|
|
3603
3800
|
})
|
|
3604
3801
|
})
|
|
@@ -3608,7 +3805,7 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
3608
3805
|
}
|
|
3609
3806
|
|
|
3610
3807
|
// src/components/ChatMessage.tsx
|
|
3611
|
-
import { jsx as
|
|
3808
|
+
import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
3612
3809
|
function formatTimestamp(ts) {
|
|
3613
3810
|
return new Date(ts).toLocaleTimeString("en-US", {
|
|
3614
3811
|
hour: "numeric",
|
|
@@ -3618,23 +3815,23 @@ function formatTimestamp(ts) {
|
|
|
3618
3815
|
}
|
|
3619
3816
|
function ChatMessage({ message }) {
|
|
3620
3817
|
const isAgent = message.role === "assistant";
|
|
3621
|
-
return /* @__PURE__ */
|
|
3818
|
+
return /* @__PURE__ */ jsxs12("div", {
|
|
3622
3819
|
className: cn("skippr:flex skippr:gap-2", isAgent ? "skippr:items-start" : "skippr:justify-end"),
|
|
3623
3820
|
children: [
|
|
3624
|
-
isAgent && /* @__PURE__ */
|
|
3821
|
+
isAgent && /* @__PURE__ */ jsx15("div", {
|
|
3625
3822
|
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__ */
|
|
3823
|
+
children: /* @__PURE__ */ jsx15(Sparkles, {
|
|
3627
3824
|
className: "skippr:size-3.5 skippr:text-primary-foreground"
|
|
3628
3825
|
})
|
|
3629
3826
|
}),
|
|
3630
|
-
/* @__PURE__ */
|
|
3827
|
+
/* @__PURE__ */ jsxs12("div", {
|
|
3631
3828
|
className: cn("skippr:flex skippr:max-w-[80%] skippr:flex-col", isAgent ? "skippr:items-start" : "skippr:items-end"),
|
|
3632
3829
|
children: [
|
|
3633
|
-
/* @__PURE__ */
|
|
3830
|
+
/* @__PURE__ */ jsx15("div", {
|
|
3634
3831
|
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
3832
|
children: message.content
|
|
3636
3833
|
}),
|
|
3637
|
-
message.timestamp && /* @__PURE__ */
|
|
3834
|
+
message.timestamp && /* @__PURE__ */ jsx15("span", {
|
|
3638
3835
|
className: "skippr:mt-1 skippr:px-1 skippr:text-[10px] skippr:text-muted-foreground/60",
|
|
3639
3836
|
children: formatTimestamp(message.timestamp)
|
|
3640
3837
|
})
|
|
@@ -3645,33 +3842,33 @@ function ChatMessage({ message }) {
|
|
|
3645
3842
|
}
|
|
3646
3843
|
|
|
3647
3844
|
// src/components/TypingIndicator.tsx
|
|
3648
|
-
import { jsx as
|
|
3845
|
+
import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
3649
3846
|
function TypingIndicator() {
|
|
3650
|
-
return /* @__PURE__ */
|
|
3847
|
+
return /* @__PURE__ */ jsxs13("div", {
|
|
3651
3848
|
className: "skippr:flex skippr:items-start skippr:gap-2 skippr:animate-skippr-tab-fade",
|
|
3652
3849
|
children: [
|
|
3653
|
-
/* @__PURE__ */
|
|
3850
|
+
/* @__PURE__ */ jsx16("div", {
|
|
3654
3851
|
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__ */
|
|
3852
|
+
children: /* @__PURE__ */ jsx16(Sparkles, {
|
|
3656
3853
|
className: "skippr:size-3.5 skippr:text-primary-foreground"
|
|
3657
3854
|
})
|
|
3658
3855
|
}),
|
|
3659
|
-
/* @__PURE__ */
|
|
3856
|
+
/* @__PURE__ */ jsxs13("div", {
|
|
3660
3857
|
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
3858
|
children: [
|
|
3662
|
-
/* @__PURE__ */
|
|
3859
|
+
/* @__PURE__ */ jsx16("span", {
|
|
3663
3860
|
children: "Agent is analyzing your screen"
|
|
3664
3861
|
}),
|
|
3665
|
-
/* @__PURE__ */
|
|
3862
|
+
/* @__PURE__ */ jsxs13("span", {
|
|
3666
3863
|
className: "skippr:inline-flex skippr:items-center skippr:gap-[2px]",
|
|
3667
3864
|
children: [
|
|
3668
|
-
/* @__PURE__ */
|
|
3865
|
+
/* @__PURE__ */ jsx16("span", {
|
|
3669
3866
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:0ms]"
|
|
3670
3867
|
}),
|
|
3671
|
-
/* @__PURE__ */
|
|
3868
|
+
/* @__PURE__ */ jsx16("span", {
|
|
3672
3869
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:200ms]"
|
|
3673
3870
|
}),
|
|
3674
|
-
/* @__PURE__ */
|
|
3871
|
+
/* @__PURE__ */ jsx16("span", {
|
|
3675
3872
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:400ms]"
|
|
3676
3873
|
})
|
|
3677
3874
|
]
|
|
@@ -3683,7 +3880,7 @@ function TypingIndicator() {
|
|
|
3683
3880
|
}
|
|
3684
3881
|
|
|
3685
3882
|
// src/components/MessageList.tsx
|
|
3686
|
-
import { jsx as
|
|
3883
|
+
import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
3687
3884
|
function MessageList({
|
|
3688
3885
|
messages,
|
|
3689
3886
|
isStreaming,
|
|
@@ -3693,29 +3890,29 @@ function MessageList({
|
|
|
3693
3890
|
}) {
|
|
3694
3891
|
const scrollRef = useRef11(null);
|
|
3695
3892
|
const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
|
|
3696
|
-
|
|
3893
|
+
useEffect17(() => {
|
|
3697
3894
|
scrollRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
3698
3895
|
}, [messages.length, lastMessage?.content]);
|
|
3699
3896
|
const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
|
|
3700
|
-
return /* @__PURE__ */
|
|
3897
|
+
return /* @__PURE__ */ jsxs14("div", {
|
|
3701
3898
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
3702
3899
|
children: [
|
|
3703
|
-
/* @__PURE__ */
|
|
3900
|
+
/* @__PURE__ */ jsxs14("div", {
|
|
3704
3901
|
className: "skippr:min-h-0 skippr:flex-1 skippr:space-y-4 skippr:overflow-y-auto skippr:p-4",
|
|
3705
3902
|
children: [
|
|
3706
|
-
messages.length === 0 && !showTyping && /* @__PURE__ */
|
|
3903
|
+
messages.length === 0 && !showTyping && /* @__PURE__ */ jsx17(LoadingDots, {
|
|
3707
3904
|
label: "Waiting for conversation to begin..."
|
|
3708
3905
|
}),
|
|
3709
|
-
messages.map((message) => /* @__PURE__ */
|
|
3906
|
+
messages.map((message) => /* @__PURE__ */ jsx17(ChatMessage, {
|
|
3710
3907
|
message
|
|
3711
3908
|
}, message.id)),
|
|
3712
|
-
showTyping && /* @__PURE__ */
|
|
3713
|
-
/* @__PURE__ */
|
|
3909
|
+
showTyping && /* @__PURE__ */ jsx17(TypingIndicator, {}),
|
|
3910
|
+
/* @__PURE__ */ jsx17("div", {
|
|
3714
3911
|
ref: scrollRef
|
|
3715
3912
|
})
|
|
3716
3913
|
]
|
|
3717
3914
|
}),
|
|
3718
|
-
/* @__PURE__ */
|
|
3915
|
+
/* @__PURE__ */ jsx17(ChatInput, {
|
|
3719
3916
|
sendChatMessage,
|
|
3720
3917
|
isSendingChat,
|
|
3721
3918
|
autoFocus
|
|
@@ -3725,8 +3922,8 @@ function MessageList({
|
|
|
3725
3922
|
}
|
|
3726
3923
|
|
|
3727
3924
|
// src/components/ModuleSelector.tsx
|
|
3728
|
-
import { useEffect as
|
|
3729
|
-
import { jsx as
|
|
3925
|
+
import { useEffect as useEffect18, useRef as useRef12, useState as useState14 } from "react";
|
|
3926
|
+
import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
3730
3927
|
var AGENT_TYPE_ICONS = {
|
|
3731
3928
|
onboarding: UserPlus,
|
|
3732
3929
|
demo: Rocket,
|
|
@@ -3749,9 +3946,9 @@ function ModuleSelector() {
|
|
|
3749
3946
|
} = useLiveAgent();
|
|
3750
3947
|
const isBusy = isStarting || isDisconnecting;
|
|
3751
3948
|
const scrollRef = useRef12(null);
|
|
3752
|
-
const [showScrollHint, setShowScrollHint] =
|
|
3753
|
-
const [isScrolled, setIsScrolled] =
|
|
3754
|
-
|
|
3949
|
+
const [showScrollHint, setShowScrollHint] = useState14(false);
|
|
3950
|
+
const [isScrolled, setIsScrolled] = useState14(false);
|
|
3951
|
+
useEffect18(() => {
|
|
3755
3952
|
const el = scrollRef.current;
|
|
3756
3953
|
if (!el)
|
|
3757
3954
|
return;
|
|
@@ -3773,26 +3970,26 @@ function ModuleSelector() {
|
|
|
3773
3970
|
};
|
|
3774
3971
|
}, []);
|
|
3775
3972
|
if (isLoadingModules && availableModules.length === 0) {
|
|
3776
|
-
return /* @__PURE__ */
|
|
3973
|
+
return /* @__PURE__ */ jsx18("div", {
|
|
3777
3974
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center skippr:p-6",
|
|
3778
|
-
children: /* @__PURE__ */
|
|
3975
|
+
children: /* @__PURE__ */ jsx18(LoadingDots, {
|
|
3779
3976
|
label: "Loading modules..."
|
|
3780
3977
|
})
|
|
3781
3978
|
});
|
|
3782
3979
|
}
|
|
3783
3980
|
if (modulesError) {
|
|
3784
|
-
return /* @__PURE__ */
|
|
3981
|
+
return /* @__PURE__ */ jsxs15("div", {
|
|
3785
3982
|
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
3983
|
children: [
|
|
3787
|
-
/* @__PURE__ */
|
|
3984
|
+
/* @__PURE__ */ jsx18("p", {
|
|
3788
3985
|
className: "skippr:text-sm skippr:text-foreground",
|
|
3789
3986
|
children: "Couldn't load modules."
|
|
3790
3987
|
}),
|
|
3791
|
-
/* @__PURE__ */
|
|
3988
|
+
/* @__PURE__ */ jsx18("p", {
|
|
3792
3989
|
className: "skippr:text-xs skippr:text-muted-foreground",
|
|
3793
3990
|
children: modulesError
|
|
3794
3991
|
}),
|
|
3795
|
-
/* @__PURE__ */
|
|
3992
|
+
/* @__PURE__ */ jsx18("button", {
|
|
3796
3993
|
type: "button",
|
|
3797
3994
|
onClick: () => void refetchModules(),
|
|
3798
3995
|
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 +3999,34 @@ function ModuleSelector() {
|
|
|
3802
3999
|
});
|
|
3803
4000
|
}
|
|
3804
4001
|
if (availableModules.length === 0) {
|
|
3805
|
-
return /* @__PURE__ */
|
|
4002
|
+
return /* @__PURE__ */ jsx18("div", {
|
|
3806
4003
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center skippr:p-6 skippr:text-center",
|
|
3807
|
-
children: /* @__PURE__ */
|
|
4004
|
+
children: /* @__PURE__ */ jsx18("p", {
|
|
3808
4005
|
className: "skippr:text-sm skippr:text-muted-foreground",
|
|
3809
4006
|
children: "No experts available."
|
|
3810
4007
|
})
|
|
3811
4008
|
});
|
|
3812
4009
|
}
|
|
3813
|
-
return /* @__PURE__ */
|
|
4010
|
+
return /* @__PURE__ */ jsxs15("div", {
|
|
3814
4011
|
className: "skippr:relative skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
3815
4012
|
children: [
|
|
3816
|
-
/* @__PURE__ */
|
|
4013
|
+
/* @__PURE__ */ jsxs15("div", {
|
|
3817
4014
|
ref: scrollRef,
|
|
3818
4015
|
className: "skippr-no-scrollbar skippr:flex-1 skippr:overflow-y-auto",
|
|
3819
4016
|
children: [
|
|
3820
|
-
/* @__PURE__ */
|
|
4017
|
+
/* @__PURE__ */ jsx18("h3", {
|
|
3821
4018
|
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
4019
|
children: "Choose an agent"
|
|
3823
4020
|
}),
|
|
3824
|
-
/* @__PURE__ */
|
|
4021
|
+
/* @__PURE__ */ jsxs15("div", {
|
|
3825
4022
|
className: "skippr:px-4 skippr:pt-3 skippr:pb-5",
|
|
3826
4023
|
children: [
|
|
3827
|
-
error && /* @__PURE__ */
|
|
4024
|
+
error && /* @__PURE__ */ jsx18("div", {
|
|
3828
4025
|
role: "alert",
|
|
3829
4026
|
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
4027
|
children: error
|
|
3831
4028
|
}),
|
|
3832
|
-
/* @__PURE__ */
|
|
4029
|
+
/* @__PURE__ */ jsx18("div", {
|
|
3833
4030
|
className: "skippr:grid skippr:grid-cols-2 skippr:gap-2.5",
|
|
3834
4031
|
children: availableModules.map((module, index2) => {
|
|
3835
4032
|
const isFeatured = index2 === 0;
|
|
@@ -3841,50 +4038,50 @@ function ModuleSelector() {
|
|
|
3841
4038
|
const layout = isWide ? "skippr:items-center skippr:p-3.5 skippr:pb-5" : "skippr:flex-col skippr:items-start skippr:p-3.5";
|
|
3842
4039
|
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
4040
|
const span = isWide ? "skippr:col-span-2" : "";
|
|
3844
|
-
return /* @__PURE__ */
|
|
4041
|
+
return /* @__PURE__ */ jsxs15("button", {
|
|
3845
4042
|
type: "button",
|
|
3846
4043
|
disabled: isBusy || isTerminal,
|
|
3847
4044
|
onClick: () => selectModule(module.id),
|
|
3848
4045
|
className: `${base} ${layout} ${variant} ${span}`,
|
|
3849
4046
|
children: [
|
|
3850
|
-
/* @__PURE__ */
|
|
4047
|
+
/* @__PURE__ */ jsx18("div", {
|
|
3851
4048
|
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__ */
|
|
4049
|
+
children: /* @__PURE__ */ jsx18(Icon2, {
|
|
3853
4050
|
className: isFeatured ? "skippr:h-4 skippr:w-4" : "skippr:h-4 skippr:w-4 skippr:text-muted-foreground"
|
|
3854
4051
|
})
|
|
3855
4052
|
}),
|
|
3856
|
-
/* @__PURE__ */
|
|
4053
|
+
/* @__PURE__ */ jsxs15("div", {
|
|
3857
4054
|
className: "skippr:min-w-0 skippr:w-full skippr:space-y-0.5",
|
|
3858
4055
|
children: [
|
|
3859
|
-
/* @__PURE__ */
|
|
4056
|
+
/* @__PURE__ */ jsxs15("div", {
|
|
3860
4057
|
className: "skippr:flex skippr:items-center skippr:gap-1.5",
|
|
3861
4058
|
children: [
|
|
3862
|
-
/* @__PURE__ */
|
|
4059
|
+
/* @__PURE__ */ jsx18("p", {
|
|
3863
4060
|
className: "skippr:line-clamp-1 skippr:text-sm skippr:font-semibold",
|
|
3864
4061
|
children: module.name
|
|
3865
4062
|
}),
|
|
3866
|
-
sessionState === "resume" && /* @__PURE__ */
|
|
4063
|
+
sessionState === "resume" && /* @__PURE__ */ jsxs15("span", {
|
|
3867
4064
|
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
4065
|
children: [
|
|
3869
|
-
/* @__PURE__ */
|
|
4066
|
+
/* @__PURE__ */ jsx18(Play, {
|
|
3870
4067
|
className: "skippr:size-2.5"
|
|
3871
4068
|
}),
|
|
3872
4069
|
"Resume"
|
|
3873
4070
|
]
|
|
3874
4071
|
}),
|
|
3875
|
-
sessionState === "completed" && /* @__PURE__ */
|
|
4072
|
+
sessionState === "completed" && /* @__PURE__ */ jsxs15("span", {
|
|
3876
4073
|
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
4074
|
children: [
|
|
3878
|
-
/* @__PURE__ */
|
|
4075
|
+
/* @__PURE__ */ jsx18(CircleCheck, {
|
|
3879
4076
|
className: "skippr:size-2.5"
|
|
3880
4077
|
}),
|
|
3881
4078
|
"Completed"
|
|
3882
4079
|
]
|
|
3883
4080
|
}),
|
|
3884
|
-
sessionState === "expired" && /* @__PURE__ */
|
|
4081
|
+
sessionState === "expired" && /* @__PURE__ */ jsxs15("span", {
|
|
3885
4082
|
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
4083
|
children: [
|
|
3887
|
-
/* @__PURE__ */
|
|
4084
|
+
/* @__PURE__ */ jsx18(Clock, {
|
|
3888
4085
|
className: "skippr:size-2.5"
|
|
3889
4086
|
}),
|
|
3890
4087
|
"Expired"
|
|
@@ -3892,7 +4089,7 @@ function ModuleSelector() {
|
|
|
3892
4089
|
})
|
|
3893
4090
|
]
|
|
3894
4091
|
}),
|
|
3895
|
-
module.description && /* @__PURE__ */
|
|
4092
|
+
module.description && /* @__PURE__ */ jsx18("p", {
|
|
3896
4093
|
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
4094
|
children: module.description
|
|
3898
4095
|
})
|
|
@@ -3906,7 +4103,7 @@ function ModuleSelector() {
|
|
|
3906
4103
|
})
|
|
3907
4104
|
]
|
|
3908
4105
|
}),
|
|
3909
|
-
showScrollHint && /* @__PURE__ */
|
|
4106
|
+
showScrollHint && /* @__PURE__ */ jsx18("div", {
|
|
3910
4107
|
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
4108
|
})
|
|
3912
4109
|
]
|
|
@@ -3914,49 +4111,49 @@ function ModuleSelector() {
|
|
|
3914
4111
|
}
|
|
3915
4112
|
|
|
3916
4113
|
// src/components/SessionAgenda.tsx
|
|
3917
|
-
import { jsx as
|
|
4114
|
+
import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
3918
4115
|
function SessionAgenda({ phases, hasStarted }) {
|
|
3919
4116
|
if (phases.length === 0 || !hasStarted) {
|
|
3920
|
-
return /* @__PURE__ */
|
|
4117
|
+
return /* @__PURE__ */ jsx19("div", {
|
|
3921
4118
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
3922
|
-
children: /* @__PURE__ */
|
|
4119
|
+
children: /* @__PURE__ */ jsx19(LoadingDots, {
|
|
3923
4120
|
label: "Waiting for agenda to load..."
|
|
3924
4121
|
})
|
|
3925
4122
|
});
|
|
3926
4123
|
}
|
|
3927
|
-
return /* @__PURE__ */
|
|
4124
|
+
return /* @__PURE__ */ jsx19("div", {
|
|
3928
4125
|
className: "skippr:flex-1 skippr:overflow-y-auto skippr:px-4 skippr:py-4",
|
|
3929
|
-
children: /* @__PURE__ */
|
|
4126
|
+
children: /* @__PURE__ */ jsx19("div", {
|
|
3930
4127
|
className: "skippr:space-y-1",
|
|
3931
4128
|
children: phases.map((phase) => {
|
|
3932
4129
|
const isActive = phase.status === "active";
|
|
3933
4130
|
const isCompleted = phase.status === "completed";
|
|
3934
|
-
return /* @__PURE__ */
|
|
4131
|
+
return /* @__PURE__ */ jsxs16("div", {
|
|
3935
4132
|
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
4133
|
children: [
|
|
3937
|
-
/* @__PURE__ */
|
|
4134
|
+
/* @__PURE__ */ jsx19("div", {
|
|
3938
4135
|
className: "skippr:mt-0.5",
|
|
3939
|
-
children: isCompleted ? /* @__PURE__ */
|
|
4136
|
+
children: isCompleted ? /* @__PURE__ */ jsx19(CircleCheck, {
|
|
3940
4137
|
className: "skippr:size-4 skippr:text-chart-3"
|
|
3941
|
-
}) : isActive ? /* @__PURE__ */
|
|
4138
|
+
}) : isActive ? /* @__PURE__ */ jsx19(Circle, {
|
|
3942
4139
|
className: "skippr:size-4 skippr:fill-primary/30 skippr:text-primary"
|
|
3943
|
-
}) : /* @__PURE__ */
|
|
4140
|
+
}) : /* @__PURE__ */ jsx19(Circle, {
|
|
3944
4141
|
className: "skippr:size-4 skippr:text-muted-foreground/30"
|
|
3945
4142
|
})
|
|
3946
4143
|
}),
|
|
3947
|
-
/* @__PURE__ */
|
|
4144
|
+
/* @__PURE__ */ jsxs16("div", {
|
|
3948
4145
|
className: "skippr:min-w-0 skippr:flex-1",
|
|
3949
4146
|
children: [
|
|
3950
|
-
/* @__PURE__ */
|
|
4147
|
+
/* @__PURE__ */ jsx19("p", {
|
|
3951
4148
|
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
4149
|
children: phase.name
|
|
3953
4150
|
}),
|
|
3954
|
-
phase.highlights.length > 0 && /* @__PURE__ */
|
|
4151
|
+
phase.highlights.length > 0 && /* @__PURE__ */ jsx19("ul", {
|
|
3955
4152
|
className: "skippr:mt-1 skippr:space-y-0.5",
|
|
3956
|
-
children: phase.highlights.map((text) => /* @__PURE__ */
|
|
4153
|
+
children: phase.highlights.map((text) => /* @__PURE__ */ jsxs16("li", {
|
|
3957
4154
|
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
4155
|
children: [
|
|
3959
|
-
/* @__PURE__ */
|
|
4156
|
+
/* @__PURE__ */ jsx19("span", {
|
|
3960
4157
|
className: "skippr:size-1 skippr:shrink-0 skippr:rounded-full skippr:bg-current"
|
|
3961
4158
|
}),
|
|
3962
4159
|
text
|
|
@@ -3973,12 +4170,12 @@ function SessionAgenda({ phases, hasStarted }) {
|
|
|
3973
4170
|
}
|
|
3974
4171
|
|
|
3975
4172
|
// src/components/SessionWarningBanner.tsx
|
|
3976
|
-
import { jsx as
|
|
4173
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
3977
4174
|
var SESSION_WARNING_THRESHOLD_SECS = 60;
|
|
3978
4175
|
function SessionWarningBanner({ remaining }) {
|
|
3979
4176
|
if (remaining === null || remaining <= 0 || remaining > SESSION_WARNING_THRESHOLD_SECS)
|
|
3980
4177
|
return null;
|
|
3981
|
-
return /* @__PURE__ */
|
|
4178
|
+
return /* @__PURE__ */ jsx20("div", {
|
|
3982
4179
|
"data-testid": "session-warning-banner",
|
|
3983
4180
|
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
4181
|
children: "Session ending soon"
|
|
@@ -3986,7 +4183,7 @@ function SessionWarningBanner({ remaining }) {
|
|
|
3986
4183
|
}
|
|
3987
4184
|
|
|
3988
4185
|
// src/components/StartSessionPrompt.tsx
|
|
3989
|
-
import { jsx as
|
|
4186
|
+
import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
3990
4187
|
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
4188
|
function StartSessionPrompt({
|
|
3992
4189
|
onStartSession,
|
|
@@ -3998,16 +4195,16 @@ function StartSessionPrompt({
|
|
|
3998
4195
|
canResume = false,
|
|
3999
4196
|
onResume
|
|
4000
4197
|
}) {
|
|
4001
|
-
return /* @__PURE__ */
|
|
4198
|
+
return /* @__PURE__ */ jsxs17("div", {
|
|
4002
4199
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:px-4",
|
|
4003
4200
|
children: [
|
|
4004
|
-
canResume && onResume ? /* @__PURE__ */
|
|
4201
|
+
canResume && onResume ? /* @__PURE__ */ jsx21("button", {
|
|
4005
4202
|
type: "button",
|
|
4006
4203
|
onClick: onResume,
|
|
4007
4204
|
disabled: isStarting,
|
|
4008
4205
|
className: PROMPT_BUTTON,
|
|
4009
4206
|
children: isStarting ? "Resuming..." : "Resume session"
|
|
4010
|
-
}) : /* @__PURE__ */
|
|
4207
|
+
}) : /* @__PURE__ */ jsx21("button", {
|
|
4011
4208
|
type: "button",
|
|
4012
4209
|
onClick: () => {
|
|
4013
4210
|
if (!agentId)
|
|
@@ -4018,7 +4215,7 @@ function StartSessionPrompt({
|
|
|
4018
4215
|
className: PROMPT_BUTTON,
|
|
4019
4216
|
children: isStarting ? "Starting..." : label
|
|
4020
4217
|
}),
|
|
4021
|
-
error && /* @__PURE__ */
|
|
4218
|
+
error && /* @__PURE__ */ jsx21("p", {
|
|
4022
4219
|
className: "skippr:text-xs skippr:text-destructive",
|
|
4023
4220
|
children: error
|
|
4024
4221
|
})
|
|
@@ -4027,7 +4224,7 @@ function StartSessionPrompt({
|
|
|
4027
4224
|
}
|
|
4028
4225
|
|
|
4029
4226
|
// src/components/Sidebar.tsx
|
|
4030
|
-
import { jsx as
|
|
4227
|
+
import { jsx as jsx22, jsxs as jsxs18, Fragment as Fragment5 } from "react/jsx-runtime";
|
|
4031
4228
|
function Sidebar({
|
|
4032
4229
|
hideControls = false,
|
|
4033
4230
|
hideHeader = false,
|
|
@@ -4063,13 +4260,13 @@ function Sidebar({
|
|
|
4063
4260
|
agentMode,
|
|
4064
4261
|
agentControls
|
|
4065
4262
|
} = useLiveAgent();
|
|
4066
|
-
const internalCtx =
|
|
4263
|
+
const internalCtx = useContext6(LiveAgentContext);
|
|
4067
4264
|
const usesHostAuth = internalCtx?.usesHostAuth ?? false;
|
|
4068
4265
|
const authFailed = internalCtx?.authFailed ?? false;
|
|
4069
4266
|
const showAgenda = agentMode !== AGENT_MODE.AlwaysOn;
|
|
4070
4267
|
const isFloating = variant === "floating";
|
|
4071
4268
|
const isSidebar = variant === "sidebar";
|
|
4072
|
-
|
|
4269
|
+
useEffect19(() => {
|
|
4073
4270
|
if (!isSidebar)
|
|
4074
4271
|
return;
|
|
4075
4272
|
const prop = position === "right" ? "marginRight" : "marginLeft";
|
|
@@ -4083,12 +4280,12 @@ function Sidebar({
|
|
|
4083
4280
|
document.body.style.transition = "";
|
|
4084
4281
|
};
|
|
4085
4282
|
}, [isSidebar, isPanelOpen, position]);
|
|
4086
|
-
return /* @__PURE__ */
|
|
4283
|
+
return /* @__PURE__ */ jsxs18("div", {
|
|
4087
4284
|
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
4285
|
style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined },
|
|
4089
4286
|
children: [
|
|
4090
|
-
!hideHeader && /* @__PURE__ */
|
|
4091
|
-
authFailed ? /* @__PURE__ */
|
|
4287
|
+
!hideHeader && /* @__PURE__ */ jsx22(ChatHeader, {}),
|
|
4288
|
+
authFailed ? /* @__PURE__ */ jsx22(AuthError, {}) : isAuthenticated ? /* @__PURE__ */ jsx22(AuthenticatedContent, {
|
|
4092
4289
|
isConnected,
|
|
4093
4290
|
isPaused,
|
|
4094
4291
|
isPausing,
|
|
@@ -4110,12 +4307,12 @@ function Sidebar({
|
|
|
4110
4307
|
agentId,
|
|
4111
4308
|
agentControls,
|
|
4112
4309
|
showAgenda
|
|
4113
|
-
}) : usesHostAuth || isValidating ? /* @__PURE__ */
|
|
4310
|
+
}) : usesHostAuth || isValidating ? /* @__PURE__ */ jsx22("div", {
|
|
4114
4311
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
4115
|
-
children: /* @__PURE__ */
|
|
4312
|
+
children: /* @__PURE__ */ jsx22(LoadingDots, {
|
|
4116
4313
|
label: "Loading..."
|
|
4117
4314
|
})
|
|
4118
|
-
}) : /* @__PURE__ */
|
|
4315
|
+
}) : /* @__PURE__ */ jsx22(LoginFlow, {
|
|
4119
4316
|
requestOtp,
|
|
4120
4317
|
verifyOtp,
|
|
4121
4318
|
error: authError,
|
|
@@ -4159,63 +4356,63 @@ function AuthenticatedContent({
|
|
|
4159
4356
|
} else if (isPaused) {
|
|
4160
4357
|
transitionLabel = "Paused";
|
|
4161
4358
|
}
|
|
4162
|
-
return /* @__PURE__ */
|
|
4359
|
+
return /* @__PURE__ */ jsxs18(Fragment5, {
|
|
4163
4360
|
children: [
|
|
4164
|
-
isConnected && /* @__PURE__ */
|
|
4165
|
-
showTabBar && /* @__PURE__ */
|
|
4361
|
+
isConnected && /* @__PURE__ */ jsx22(ConnectedBanner, {}),
|
|
4362
|
+
showTabBar && /* @__PURE__ */ jsxs18("div", {
|
|
4166
4363
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-2",
|
|
4167
4364
|
children: [
|
|
4168
|
-
/* @__PURE__ */
|
|
4365
|
+
/* @__PURE__ */ jsxs18("button", {
|
|
4169
4366
|
type: "button",
|
|
4170
4367
|
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
4368
|
onClick: () => onTabChange("chat"),
|
|
4172
4369
|
children: [
|
|
4173
|
-
/* @__PURE__ */
|
|
4370
|
+
/* @__PURE__ */ jsx22(MessageCircle, {
|
|
4174
4371
|
className: "skippr:size-3.5"
|
|
4175
4372
|
}),
|
|
4176
4373
|
"Chat",
|
|
4177
|
-
activeTab === "chat" && /* @__PURE__ */
|
|
4374
|
+
activeTab === "chat" && /* @__PURE__ */ jsx22("span", {
|
|
4178
4375
|
className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
4179
4376
|
})
|
|
4180
4377
|
]
|
|
4181
4378
|
}),
|
|
4182
|
-
showAgenda && /* @__PURE__ */
|
|
4379
|
+
showAgenda && /* @__PURE__ */ jsxs18("button", {
|
|
4183
4380
|
type: "button",
|
|
4184
4381
|
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
4382
|
onClick: () => onTabChange("agenda"),
|
|
4186
4383
|
children: [
|
|
4187
|
-
/* @__PURE__ */
|
|
4384
|
+
/* @__PURE__ */ jsx22(Calendar, {
|
|
4188
4385
|
className: "skippr:size-3.5"
|
|
4189
4386
|
}),
|
|
4190
4387
|
"Agenda",
|
|
4191
|
-
activeTab === "agenda" && /* @__PURE__ */
|
|
4388
|
+
activeTab === "agenda" && /* @__PURE__ */ jsx22("span", {
|
|
4192
4389
|
className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
4193
4390
|
})
|
|
4194
4391
|
]
|
|
4195
4392
|
})
|
|
4196
4393
|
]
|
|
4197
4394
|
}),
|
|
4198
|
-
/* @__PURE__ */
|
|
4395
|
+
/* @__PURE__ */ jsx22("div", {
|
|
4199
4396
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
4200
|
-
children: isDisconnecting ? /* @__PURE__ */
|
|
4397
|
+
children: isDisconnecting ? /* @__PURE__ */ jsx22("div", {
|
|
4201
4398
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
4202
|
-
children: /* @__PURE__ */
|
|
4399
|
+
children: /* @__PURE__ */ jsx22(LoadingDots, {
|
|
4203
4400
|
label: "Ending session..."
|
|
4204
4401
|
})
|
|
4205
|
-
}) : showSelectorAsPrompt ? /* @__PURE__ */
|
|
4402
|
+
}) : showSelectorAsPrompt ? /* @__PURE__ */ jsx22(ModuleSelector, {}) : inSession ? /* @__PURE__ */ jsxs18(Fragment5, {
|
|
4206
4403
|
children: [
|
|
4207
|
-
transitionLabel && /* @__PURE__ */
|
|
4404
|
+
transitionLabel && /* @__PURE__ */ jsx22("div", {
|
|
4208
4405
|
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
4406
|
children: transitionLabel
|
|
4210
4407
|
}),
|
|
4211
|
-
/* @__PURE__ */
|
|
4408
|
+
/* @__PURE__ */ jsx22(ConnectedBody, {
|
|
4212
4409
|
activeTab: effectiveTab,
|
|
4213
4410
|
autoFocusChat
|
|
4214
4411
|
})
|
|
4215
4412
|
]
|
|
4216
|
-
}) : /* @__PURE__ */
|
|
4413
|
+
}) : /* @__PURE__ */ jsx22("div", {
|
|
4217
4414
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
|
|
4218
|
-
children: /* @__PURE__ */
|
|
4415
|
+
children: /* @__PURE__ */ jsx22(StartSessionPrompt, {
|
|
4219
4416
|
onStartSession,
|
|
4220
4417
|
agentId,
|
|
4221
4418
|
agentControls,
|
|
@@ -4227,7 +4424,7 @@ function AuthenticatedContent({
|
|
|
4227
4424
|
})
|
|
4228
4425
|
}, `${activeTab}-empty`)
|
|
4229
4426
|
}),
|
|
4230
|
-
(isConnected || isPaused) && !isDisconnecting && !hideControls && /* @__PURE__ */
|
|
4427
|
+
(isConnected || isPaused) && !isDisconnecting && !hideControls && /* @__PURE__ */ jsx22(MeetingControls, {
|
|
4231
4428
|
onHangUp: onDisconnect,
|
|
4232
4429
|
onPause,
|
|
4233
4430
|
onResume,
|
|
@@ -4239,17 +4436,17 @@ function AuthenticatedContent({
|
|
|
4239
4436
|
});
|
|
4240
4437
|
}
|
|
4241
4438
|
function AuthError() {
|
|
4242
|
-
return /* @__PURE__ */
|
|
4439
|
+
return /* @__PURE__ */ jsxs18("div", {
|
|
4243
4440
|
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
4441
|
children: [
|
|
4245
|
-
/* @__PURE__ */
|
|
4442
|
+
/* @__PURE__ */ jsx22(CircleAlert, {
|
|
4246
4443
|
className: "skippr:mb-3 skippr:size-7 skippr:text-destructive"
|
|
4247
4444
|
}),
|
|
4248
|
-
/* @__PURE__ */
|
|
4445
|
+
/* @__PURE__ */ jsx22("p", {
|
|
4249
4446
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
4250
4447
|
children: "We couldn't verify your session"
|
|
4251
4448
|
}),
|
|
4252
|
-
/* @__PURE__ */
|
|
4449
|
+
/* @__PURE__ */ jsx22("p", {
|
|
4253
4450
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
4254
4451
|
children: "Please contact administrator."
|
|
4255
4452
|
})
|
|
@@ -4258,7 +4455,7 @@ function AuthError() {
|
|
|
4258
4455
|
}
|
|
4259
4456
|
function ConnectedBanner() {
|
|
4260
4457
|
const remaining = useSessionRemaining();
|
|
4261
|
-
return /* @__PURE__ */
|
|
4458
|
+
return /* @__PURE__ */ jsx22(SessionWarningBanner, {
|
|
4262
4459
|
remaining
|
|
4263
4460
|
});
|
|
4264
4461
|
}
|
|
@@ -4269,17 +4466,17 @@ function ConnectedBody({
|
|
|
4269
4466
|
const { allMessages, agentState, sendChatMessage, isSendingChat } = useCombinedMessages();
|
|
4270
4467
|
const { phases } = usePhaseUpdates();
|
|
4271
4468
|
if (activeTab === "agenda") {
|
|
4272
|
-
return /* @__PURE__ */
|
|
4469
|
+
return /* @__PURE__ */ jsx22("div", {
|
|
4273
4470
|
className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto skippr:animate-skippr-tab-fade",
|
|
4274
|
-
children: /* @__PURE__ */
|
|
4471
|
+
children: /* @__PURE__ */ jsx22(SessionAgenda, {
|
|
4275
4472
|
phases,
|
|
4276
4473
|
hasStarted: allMessages.length > 0 || agentState === "speaking"
|
|
4277
4474
|
})
|
|
4278
4475
|
}, "agenda");
|
|
4279
4476
|
}
|
|
4280
|
-
return /* @__PURE__ */
|
|
4477
|
+
return /* @__PURE__ */ jsx22("div", {
|
|
4281
4478
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
|
|
4282
|
-
children: /* @__PURE__ */
|
|
4479
|
+
children: /* @__PURE__ */ jsx22(MessageList, {
|
|
4283
4480
|
messages: allMessages,
|
|
4284
4481
|
isStreaming: agentState === "speaking",
|
|
4285
4482
|
sendChatMessage,
|
|
@@ -4290,28 +4487,28 @@ function ConnectedBody({
|
|
|
4290
4487
|
}
|
|
4291
4488
|
|
|
4292
4489
|
// src/components/SidebarTrigger.tsx
|
|
4293
|
-
import { jsx as
|
|
4490
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
4294
4491
|
function SidebarTrigger() {
|
|
4295
4492
|
const { isPanelOpen, togglePanel, minimizePanel, minimizable, position, isMinimized } = useLiveAgent();
|
|
4296
4493
|
if (isMinimized)
|
|
4297
4494
|
return null;
|
|
4298
4495
|
const handleClick = isPanelOpen && minimizable ? minimizePanel : togglePanel;
|
|
4299
|
-
return /* @__PURE__ */
|
|
4496
|
+
return /* @__PURE__ */ jsx23("button", {
|
|
4300
4497
|
type: "button",
|
|
4301
4498
|
onClick: handleClick,
|
|
4302
4499
|
title: isPanelOpen ? "Close chat" : "Open chat",
|
|
4303
4500
|
"aria-label": isPanelOpen ? "Close chat" : "Open chat",
|
|
4304
4501
|
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__ */
|
|
4502
|
+
children: isPanelOpen ? /* @__PURE__ */ jsx23(ChevronDown, {
|
|
4306
4503
|
className: "skippr:size-5"
|
|
4307
|
-
}) : /* @__PURE__ */
|
|
4504
|
+
}) : /* @__PURE__ */ jsx23(Logo, {
|
|
4308
4505
|
className: "skippr:size-12"
|
|
4309
4506
|
})
|
|
4310
4507
|
});
|
|
4311
4508
|
}
|
|
4312
4509
|
|
|
4313
4510
|
// src/components/LiveAgent.tsx
|
|
4314
|
-
import { jsx as
|
|
4511
|
+
import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
4315
4512
|
function LiveAgent(props) {
|
|
4316
4513
|
const {
|
|
4317
4514
|
agentId: hostAgentId,
|
|
@@ -4343,24 +4540,24 @@ function LiveAgent(props) {
|
|
|
4343
4540
|
const usesHostAuth = !!getUserToken || !!userToken || !!authTokenProp;
|
|
4344
4541
|
const effectiveAuthToken = usesHostAuth ? authTokenProp : auth.authToken ?? undefined;
|
|
4345
4542
|
const hasModuleSelector = !hostAgentId;
|
|
4346
|
-
const [activeModule, setActiveModule] =
|
|
4543
|
+
const [activeModule, setActiveModule] = useState15(null);
|
|
4347
4544
|
const agentId = hasModuleSelector ? activeModule?.id ?? null : hostAgentId;
|
|
4348
4545
|
const agentControls = hasModuleSelector ? activeModule?.controls : hostAgentControls;
|
|
4349
|
-
const minimizeOnSessionStart =
|
|
4546
|
+
const minimizeOnSessionStart = useCallback10(() => {
|
|
4350
4547
|
if (minimizable) {
|
|
4351
4548
|
setIsMinimized(true);
|
|
4352
4549
|
setIsPanelOpen(false);
|
|
4353
4550
|
}
|
|
4354
4551
|
}, [minimizable]);
|
|
4355
|
-
const expandOnSessionStartError =
|
|
4552
|
+
const expandOnSessionStartError = useCallback10(() => {
|
|
4356
4553
|
setIsMinimized(false);
|
|
4357
4554
|
setIsPanelOpen(true);
|
|
4358
4555
|
}, []);
|
|
4359
|
-
const minimizeOnSessionDisconnect =
|
|
4556
|
+
const minimizeOnSessionDisconnect = useCallback10(() => {
|
|
4360
4557
|
if (hasModuleSelector) {
|
|
4361
4558
|
setActiveModule(null);
|
|
4362
4559
|
}
|
|
4363
|
-
if (minimizable
|
|
4560
|
+
if (minimizable) {
|
|
4364
4561
|
setIsMinimized(true);
|
|
4365
4562
|
setIsPanelOpen(false);
|
|
4366
4563
|
}
|
|
@@ -4394,26 +4591,36 @@ function LiveAgent(props) {
|
|
|
4394
4591
|
});
|
|
4395
4592
|
const teardownInFlightRef = useRef13(false);
|
|
4396
4593
|
teardownInFlightRef.current = isPaused || isPausing || isDisconnecting;
|
|
4397
|
-
const handleRoomDisconnected =
|
|
4594
|
+
const handleRoomDisconnected = useCallback10(() => {
|
|
4398
4595
|
if (teardownInFlightRef.current)
|
|
4399
4596
|
return;
|
|
4400
4597
|
disconnect();
|
|
4401
4598
|
}, [disconnect]);
|
|
4402
|
-
const
|
|
4403
|
-
const [
|
|
4404
|
-
const [
|
|
4405
|
-
const [
|
|
4599
|
+
const inSession = connection !== null || isStarting || isPaused || isPausing || isDisconnecting;
|
|
4600
|
+
const [isPanelOpen, setIsPanelOpen] = useState15(defaultOpen);
|
|
4601
|
+
const [isMinimized, setIsMinimized] = useState15(minimizable && !defaultOpen);
|
|
4602
|
+
const [sidebarTab, setSidebarTab] = useState15("agenda");
|
|
4603
|
+
const [phasesSnapshot, setPhasesSnapshot] = useState15([]);
|
|
4406
4604
|
const {
|
|
4407
4605
|
modules: availableModules,
|
|
4408
4606
|
isLoading: isLoadingModules,
|
|
4409
4607
|
error: modulesError,
|
|
4410
4608
|
refetch: refetchModules
|
|
4411
4609
|
} = useAvailableModules({
|
|
4412
|
-
enabled:
|
|
4610
|
+
enabled: !inSession,
|
|
4413
4611
|
bearerToken,
|
|
4414
4612
|
authedFetch
|
|
4415
4613
|
});
|
|
4416
|
-
const
|
|
4614
|
+
const {
|
|
4615
|
+
goals: adoptionGoals,
|
|
4616
|
+
dismissGoal: dismissAdoptionGoal,
|
|
4617
|
+
attendGoal
|
|
4618
|
+
} = useAdoptionGoals({
|
|
4619
|
+
enabled: !inSession,
|
|
4620
|
+
bearerToken,
|
|
4621
|
+
authedFetch
|
|
4622
|
+
});
|
|
4623
|
+
const activeModuleForAgent = useMemo6(() => {
|
|
4417
4624
|
if (activeModule)
|
|
4418
4625
|
return activeModule;
|
|
4419
4626
|
if (!hostAgentId)
|
|
@@ -4421,8 +4628,8 @@ function LiveAgent(props) {
|
|
|
4421
4628
|
return availableModules.find((m) => m.id === hostAgentId) ?? null;
|
|
4422
4629
|
}, [activeModule, hostAgentId, availableModules]);
|
|
4423
4630
|
const agentMode = activeModuleForAgent?.mode ?? null;
|
|
4424
|
-
const resumableSession =
|
|
4425
|
-
const resumeSession =
|
|
4631
|
+
const resumableSession = useMemo6(() => getResumableSession(activeModuleForAgent), [activeModuleForAgent]);
|
|
4632
|
+
const resumeSession = useCallback10(async () => {
|
|
4426
4633
|
if (!resumableSession)
|
|
4427
4634
|
return;
|
|
4428
4635
|
await startSession({
|
|
@@ -4431,7 +4638,7 @@ function LiveAgent(props) {
|
|
|
4431
4638
|
existingSessionId: resumableSession.id
|
|
4432
4639
|
});
|
|
4433
4640
|
}, [resumableSession, startSession, agentControls]);
|
|
4434
|
-
const selectModule =
|
|
4641
|
+
const selectModule = useCallback10((moduleId) => {
|
|
4435
4642
|
const found = availableModules.find((m) => m.id === moduleId);
|
|
4436
4643
|
if (!found)
|
|
4437
4644
|
return;
|
|
@@ -4442,9 +4649,20 @@ function LiveAgent(props) {
|
|
|
4442
4649
|
existingSessionId: getResumableSessionId(found.currentSession, found.mode)
|
|
4443
4650
|
});
|
|
4444
4651
|
}, [availableModules, startSession]);
|
|
4445
|
-
const
|
|
4446
|
-
|
|
4447
|
-
|
|
4652
|
+
const startAdoptionSession = useCallback10((goal) => {
|
|
4653
|
+
attendGoal(goal.goalId);
|
|
4654
|
+
const found = availableModules.find((m) => m.id === goal.agentId);
|
|
4655
|
+
if (found)
|
|
4656
|
+
setActiveModule(found);
|
|
4657
|
+
startSession({
|
|
4658
|
+
agentId: goal.agentId,
|
|
4659
|
+
agentControls: found?.controls,
|
|
4660
|
+
adoptionGoalId: goal.goalId
|
|
4661
|
+
});
|
|
4662
|
+
}, [attendGoal, availableModules, startSession]);
|
|
4663
|
+
const [welcomeDismissed, setWelcomeDismissed] = useState15(false);
|
|
4664
|
+
const dismissWelcome = useCallback10(() => setWelcomeDismissed(true), []);
|
|
4665
|
+
const [currentPosition, setCurrentPosition] = useState15(() => {
|
|
4448
4666
|
try {
|
|
4449
4667
|
const saved = localStorage.getItem("skippr_widget_position");
|
|
4450
4668
|
if (saved === "left" || saved === "right")
|
|
@@ -4452,20 +4670,20 @@ function LiveAgent(props) {
|
|
|
4452
4670
|
} catch {}
|
|
4453
4671
|
return position;
|
|
4454
4672
|
});
|
|
4455
|
-
const setPositionWithPersist =
|
|
4673
|
+
const setPositionWithPersist = useCallback10((pos) => {
|
|
4456
4674
|
setCurrentPosition(pos);
|
|
4457
4675
|
try {
|
|
4458
4676
|
localStorage.setItem("skippr_widget_position", pos);
|
|
4459
4677
|
} catch {}
|
|
4460
4678
|
}, []);
|
|
4461
|
-
const openPanel =
|
|
4462
|
-
const closePanel =
|
|
4463
|
-
const togglePanel =
|
|
4464
|
-
const expandPanel =
|
|
4679
|
+
const openPanel = useCallback10(() => setIsPanelOpen(true), []);
|
|
4680
|
+
const closePanel = useCallback10(() => setIsPanelOpen(false), []);
|
|
4681
|
+
const togglePanel = useCallback10(() => setIsPanelOpen((prev) => !prev), []);
|
|
4682
|
+
const expandPanel = useCallback10(() => {
|
|
4465
4683
|
setIsMinimized(false);
|
|
4466
4684
|
setIsPanelOpen(true);
|
|
4467
4685
|
}, []);
|
|
4468
|
-
const minimizePanel =
|
|
4686
|
+
const minimizePanel = useCallback10(() => {
|
|
4469
4687
|
if (!minimizable)
|
|
4470
4688
|
return;
|
|
4471
4689
|
setIsMinimized(true);
|
|
@@ -4473,7 +4691,7 @@ function LiveAgent(props) {
|
|
|
4473
4691
|
}, [minimizable]);
|
|
4474
4692
|
const isConnected = connection !== null;
|
|
4475
4693
|
const isAuthenticated = bearerToken !== null || auth.isAuthenticated;
|
|
4476
|
-
const ctx =
|
|
4694
|
+
const ctx = useMemo6(() => ({
|
|
4477
4695
|
connection,
|
|
4478
4696
|
shouldConnect,
|
|
4479
4697
|
isConnected,
|
|
@@ -4524,7 +4742,10 @@ function LiveAgent(props) {
|
|
|
4524
4742
|
isLoadingModules,
|
|
4525
4743
|
modulesError,
|
|
4526
4744
|
refetchModules,
|
|
4527
|
-
selectModule
|
|
4745
|
+
selectModule,
|
|
4746
|
+
adoptionGoals,
|
|
4747
|
+
dismissAdoptionGoal,
|
|
4748
|
+
startAdoptionSession
|
|
4528
4749
|
}), [
|
|
4529
4750
|
connection,
|
|
4530
4751
|
shouldConnect,
|
|
@@ -4574,36 +4795,39 @@ function LiveAgent(props) {
|
|
|
4574
4795
|
isLoadingModules,
|
|
4575
4796
|
modulesError,
|
|
4576
4797
|
refetchModules,
|
|
4577
|
-
selectModule
|
|
4798
|
+
selectModule,
|
|
4799
|
+
adoptionGoals,
|
|
4800
|
+
dismissAdoptionGoal,
|
|
4801
|
+
startAdoptionSession
|
|
4578
4802
|
]);
|
|
4579
|
-
return /* @__PURE__ */
|
|
4803
|
+
return /* @__PURE__ */ jsx24(LiveAgentContext.Provider, {
|
|
4580
4804
|
value: ctx,
|
|
4581
|
-
children: /* @__PURE__ */
|
|
4805
|
+
children: /* @__PURE__ */ jsxs19(LiveKitRoom, {
|
|
4582
4806
|
serverUrl: connection?.livekitUrl,
|
|
4583
4807
|
token: connection?.token,
|
|
4584
4808
|
connect: shouldConnect,
|
|
4585
4809
|
audio: true,
|
|
4586
4810
|
onDisconnected: handleRoomDisconnected,
|
|
4587
4811
|
children: [
|
|
4588
|
-
connection && /* @__PURE__ */
|
|
4589
|
-
connection && captureMode === "screenshare" && /* @__PURE__ */
|
|
4812
|
+
connection && /* @__PURE__ */ jsx24(RoomAudioRenderer, {}),
|
|
4813
|
+
connection && captureMode === "screenshare" && /* @__PURE__ */ jsx24(AutoStartMedia, {
|
|
4590
4814
|
pendingScreenStream
|
|
4591
4815
|
}),
|
|
4592
|
-
connection && captureMode === "auto" && /* @__PURE__ */
|
|
4593
|
-
/* @__PURE__ */
|
|
4816
|
+
connection && captureMode === "auto" && /* @__PURE__ */ jsx24(DomCapture, {}),
|
|
4817
|
+
/* @__PURE__ */ jsxs19(ShadowHost, {
|
|
4594
4818
|
children: [
|
|
4595
|
-
connection && captureMode === "auto" && agentControls?.highlight && /* @__PURE__ */
|
|
4596
|
-
connection && captureMode === "auto" && agentControls?.actions && /* @__PURE__ */
|
|
4597
|
-
/* @__PURE__ */
|
|
4819
|
+
connection && captureMode === "auto" && agentControls?.highlight && /* @__PURE__ */ jsx24(HighlightOverlay, {}),
|
|
4820
|
+
connection && captureMode === "auto" && agentControls?.actions && /* @__PURE__ */ jsx24(PageActionHandler, {}),
|
|
4821
|
+
/* @__PURE__ */ jsxs19("div", {
|
|
4598
4822
|
id: WIDGET_ROOT_ID,
|
|
4599
4823
|
children: [
|
|
4600
|
-
isMinimized && /* @__PURE__ */
|
|
4824
|
+
isMinimized && /* @__PURE__ */ jsx24(MinimizedBubble, {
|
|
4601
4825
|
welcomeMessage,
|
|
4602
4826
|
welcomeDismissed,
|
|
4603
4827
|
onDismissWelcome: dismissWelcome
|
|
4604
4828
|
}),
|
|
4605
|
-
/* @__PURE__ */
|
|
4606
|
-
/* @__PURE__ */
|
|
4829
|
+
/* @__PURE__ */ jsx24(SidebarTrigger, {}),
|
|
4830
|
+
/* @__PURE__ */ jsx24(Sidebar, {
|
|
4607
4831
|
hideControls,
|
|
4608
4832
|
hideHeader,
|
|
4609
4833
|
startSessionLabel
|