@skippr/live-agent-sdk 0.74.0 → 0.75.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 +864 -685
- package/dist/skippr-sdk.css +1 -1
- package/dist/skippr-sdk.js +133 -133
- package/dist/types/components/MessageList.d.ts +4 -3
- package/dist/types/components/ModulePill.d.ts +1 -7
- package/dist/types/context/LiveAgentContext.d.ts +13 -0
- package/dist/types/context/SessionHoldContext.d.ts +8 -0
- package/dist/types/hooks/useAvailableModules.d.ts +4 -2
- package/dist/types/hooks/useSessionHistory.d.ts +15 -0
- package/dist/types/lib/session.d.ts +8 -0
- package/package.json +1 -1
- package/dist/types/components/StartSessionPrompt.d.ts +0 -16
package/dist/esm/lib-exports.js
CHANGED
|
@@ -8,7 +8,7 @@ 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 useCallback15, useEffect as
|
|
11
|
+
import { useCallback as useCallback15, useEffect as useEffect26, useMemo as useMemo6, useRef as useRef17, useState as useState19 } from "react";
|
|
12
12
|
|
|
13
13
|
// src/capture/useAgentCursor.ts
|
|
14
14
|
import { useEffect, useState } from "react";
|
|
@@ -74,8 +74,128 @@ var NAME_MAX_CHARS = 80;
|
|
|
74
74
|
// src/context/LiveAgentContext.tsx
|
|
75
75
|
var LiveAgentContext = createContext(null);
|
|
76
76
|
|
|
77
|
+
// src/context/SessionHoldContext.tsx
|
|
78
|
+
import { createContext as createContext2, useContext as useContext2 } from "react";
|
|
79
|
+
|
|
80
|
+
// src/hooks/useLiveAgent.ts
|
|
81
|
+
import { useContext } from "react";
|
|
82
|
+
function useLiveAgent() {
|
|
83
|
+
const ctx = useContext(LiveAgentContext);
|
|
84
|
+
if (!ctx) {
|
|
85
|
+
throw new Error("useLiveAgent must be used within a <LiveAgent> provider");
|
|
86
|
+
}
|
|
87
|
+
const {
|
|
88
|
+
usesHostAuth,
|
|
89
|
+
authFailed,
|
|
90
|
+
connection,
|
|
91
|
+
shouldConnect,
|
|
92
|
+
historyMessages,
|
|
93
|
+
phasesSnapshot,
|
|
94
|
+
setPhasesSnapshot,
|
|
95
|
+
hasResolvedModules,
|
|
96
|
+
adoptionGoals,
|
|
97
|
+
startAdoptionSession,
|
|
98
|
+
launcherBottomPx,
|
|
99
|
+
setLauncherBottomPx,
|
|
100
|
+
popsDown,
|
|
101
|
+
panelExpanded,
|
|
102
|
+
togglePanelExpanded,
|
|
103
|
+
...publicValue
|
|
104
|
+
} = ctx;
|
|
105
|
+
return publicValue;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// src/hooks/useSessionHold.ts
|
|
109
|
+
import { useLocalParticipant } from "@livekit/components-react/hooks";
|
|
110
|
+
import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
|
|
111
|
+
var textEncoder = new TextEncoder;
|
|
112
|
+
var FALLBACK_PAUSE_TIMEOUT_SECONDS = 120;
|
|
113
|
+
function useSessionHold({
|
|
114
|
+
pauseSession,
|
|
115
|
+
pauseTimeoutSeconds
|
|
116
|
+
}) {
|
|
117
|
+
const { localParticipant } = useLocalParticipant();
|
|
118
|
+
const timeoutSeconds = pauseTimeoutSeconds ?? FALLBACK_PAUSE_TIMEOUT_SECONDS;
|
|
119
|
+
const [isHeld, setIsHeld] = useState2(false);
|
|
120
|
+
const [countdown, setCountdown] = useState2(timeoutSeconds);
|
|
121
|
+
const publish = useCallback(async (type) => {
|
|
122
|
+
await localParticipant.publishData(textEncoder.encode(JSON.stringify({ type })), {
|
|
123
|
+
reliable: true,
|
|
124
|
+
topic: SESSION_HOLD_TOPIC
|
|
125
|
+
});
|
|
126
|
+
}, [localParticipant]);
|
|
127
|
+
const hold = useCallback(async () => {
|
|
128
|
+
try {
|
|
129
|
+
await localParticipant.setMicrophoneEnabled(false);
|
|
130
|
+
await publish("pause");
|
|
131
|
+
setIsHeld(true);
|
|
132
|
+
} catch (error) {
|
|
133
|
+
console.error("Failed to hold session:", error);
|
|
134
|
+
}
|
|
135
|
+
}, [localParticipant, publish]);
|
|
136
|
+
const release = useCallback(async () => {
|
|
137
|
+
try {
|
|
138
|
+
await localParticipant.setMicrophoneEnabled(true);
|
|
139
|
+
await publish("resume");
|
|
140
|
+
setIsHeld(false);
|
|
141
|
+
} catch (error) {
|
|
142
|
+
console.error("Failed to release session:", error);
|
|
143
|
+
}
|
|
144
|
+
}, [localParticipant, publish]);
|
|
145
|
+
useEffect2(() => {
|
|
146
|
+
if (!isHeld) {
|
|
147
|
+
setCountdown(timeoutSeconds);
|
|
148
|
+
return;
|
|
149
|
+
}
|
|
150
|
+
const id = setInterval(() => {
|
|
151
|
+
setCountdown((seconds) => Math.max(0, seconds - 1));
|
|
152
|
+
}, 1000);
|
|
153
|
+
return () => clearInterval(id);
|
|
154
|
+
}, [isHeld, timeoutSeconds]);
|
|
155
|
+
useEffect2(() => {
|
|
156
|
+
if (isHeld && countdown === 0) {
|
|
157
|
+
setIsHeld(false);
|
|
158
|
+
pauseSession();
|
|
159
|
+
}
|
|
160
|
+
}, [isHeld, countdown, pauseSession]);
|
|
161
|
+
const toggle = useCallback(() => {
|
|
162
|
+
if (isHeld) {
|
|
163
|
+
release();
|
|
164
|
+
} else {
|
|
165
|
+
hold();
|
|
166
|
+
}
|
|
167
|
+
}, [isHeld, hold, release]);
|
|
168
|
+
return { isHeld, countdown, toggle };
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
// src/context/SessionHoldContext.tsx
|
|
172
|
+
import { jsx } from "react/jsx-runtime";
|
|
173
|
+
var SessionHoldContext = createContext2({
|
|
174
|
+
isHeld: false,
|
|
175
|
+
countdown: 0,
|
|
176
|
+
toggle: () => {}
|
|
177
|
+
});
|
|
178
|
+
function SessionHoldProvider({ children }) {
|
|
179
|
+
const { pauseSession } = useLiveAgent();
|
|
180
|
+
const internalCtx = useContext2(LiveAgentContext);
|
|
181
|
+
if (!internalCtx) {
|
|
182
|
+
throw new Error("SessionHoldProvider must be used within a <LiveAgent> provider");
|
|
183
|
+
}
|
|
184
|
+
const hold = useSessionHold({
|
|
185
|
+
pauseSession,
|
|
186
|
+
pauseTimeoutSeconds: internalCtx.pauseTimeoutSeconds
|
|
187
|
+
});
|
|
188
|
+
return /* @__PURE__ */ jsx(SessionHoldContext.Provider, {
|
|
189
|
+
value: hold,
|
|
190
|
+
children
|
|
191
|
+
});
|
|
192
|
+
}
|
|
193
|
+
function useSessionHoldContext() {
|
|
194
|
+
return useContext2(SessionHoldContext);
|
|
195
|
+
}
|
|
196
|
+
|
|
77
197
|
// src/hooks/useAdoptionGoals.ts
|
|
78
|
-
import { useCallback, useEffect as
|
|
198
|
+
import { useCallback as useCallback2, useEffect as useEffect3, useMemo, useState as useState3 } from "react";
|
|
79
199
|
|
|
80
200
|
// src/lib/hashMatch.ts
|
|
81
201
|
function globToRegExp(pattern) {
|
|
@@ -143,9 +263,9 @@ function useAdoptionGoals({
|
|
|
143
263
|
bearerToken,
|
|
144
264
|
authedFetch
|
|
145
265
|
}) {
|
|
146
|
-
const [candidates, setCandidates] =
|
|
147
|
-
const [hash, setHash] =
|
|
148
|
-
const match =
|
|
266
|
+
const [candidates, setCandidates] = useState3([]);
|
|
267
|
+
const [hash, setHash] = useState3(window.location.hash);
|
|
268
|
+
const match = useCallback2(async () => {
|
|
149
269
|
try {
|
|
150
270
|
const resp = await authedFetch(`${API_URL}/v1/adoption/goals/match`, {
|
|
151
271
|
method: "POST",
|
|
@@ -163,7 +283,7 @@ function useAdoptionGoals({
|
|
|
163
283
|
setCandidates([]);
|
|
164
284
|
}
|
|
165
285
|
}, [authedFetch]);
|
|
166
|
-
|
|
286
|
+
useEffect3(() => {
|
|
167
287
|
if (!enabled || !bearerToken) {
|
|
168
288
|
setCandidates([]);
|
|
169
289
|
return;
|
|
@@ -195,21 +315,21 @@ function useAdoptionGoals({
|
|
|
195
315
|
return hashSpecific;
|
|
196
316
|
return candidates.filter((goal) => goal.hashPattern === null);
|
|
197
317
|
}, [candidates, hash]);
|
|
198
|
-
const postStatus =
|
|
318
|
+
const postStatus = useCallback2((goalId, status) => {
|
|
199
319
|
authedFetch(`${API_URL}/v1/adoption/goals/${goalId}/status`, {
|
|
200
320
|
method: "POST",
|
|
201
321
|
headers: { "Content-Type": "application/json" },
|
|
202
322
|
body: JSON.stringify({ status })
|
|
203
323
|
}).catch((e) => console.warn("[Skippr] adoption status update failed", e));
|
|
204
324
|
}, [authedFetch]);
|
|
205
|
-
const attendGoal =
|
|
325
|
+
const attendGoal = useCallback2((goalId) => {
|
|
206
326
|
postStatus(goalId, "attended" /* Attended */);
|
|
207
327
|
}, [postStatus]);
|
|
208
328
|
return { goals, attendGoal };
|
|
209
329
|
}
|
|
210
330
|
|
|
211
331
|
// src/hooks/useAuth.ts
|
|
212
|
-
import { useCallback as
|
|
332
|
+
import { useCallback as useCallback3, useEffect as useEffect4, useState as useState4 } from "react";
|
|
213
333
|
var API_URL2 = "https://specialist.skippr.ai/api";
|
|
214
334
|
function storageKey(appKey) {
|
|
215
335
|
return `skippr_auth_${appKey}`;
|
|
@@ -236,12 +356,12 @@ function clearStoredToken(appKey) {
|
|
|
236
356
|
}
|
|
237
357
|
}
|
|
238
358
|
function useAuth({ appKey }) {
|
|
239
|
-
const [authToken, setAuthToken] =
|
|
240
|
-
const [isValidating, setIsValidating] =
|
|
241
|
-
const [isSubmitting, setIsSubmitting] =
|
|
242
|
-
const [error, setError] =
|
|
359
|
+
const [authToken, setAuthToken] = useState4(null);
|
|
360
|
+
const [isValidating, setIsValidating] = useState4(false);
|
|
361
|
+
const [isSubmitting, setIsSubmitting] = useState4(false);
|
|
362
|
+
const [error, setError] = useState4("");
|
|
243
363
|
const isAuthenticated = authToken !== null;
|
|
244
|
-
|
|
364
|
+
useEffect4(() => {
|
|
245
365
|
if (!appKey)
|
|
246
366
|
return;
|
|
247
367
|
const stored = getStoredToken(appKey);
|
|
@@ -267,7 +387,7 @@ function useAuth({ appKey }) {
|
|
|
267
387
|
}
|
|
268
388
|
validateStoredToken();
|
|
269
389
|
}, [appKey]);
|
|
270
|
-
|
|
390
|
+
useEffect4(() => {
|
|
271
391
|
function handleLogout() {
|
|
272
392
|
setAuthToken(null);
|
|
273
393
|
setError("");
|
|
@@ -275,7 +395,7 @@ function useAuth({ appKey }) {
|
|
|
275
395
|
window.addEventListener("skippr:logout", handleLogout);
|
|
276
396
|
return () => window.removeEventListener("skippr:logout", handleLogout);
|
|
277
397
|
}, []);
|
|
278
|
-
const requestOtp =
|
|
398
|
+
const requestOtp = useCallback3(async (email) => {
|
|
279
399
|
if (!appKey)
|
|
280
400
|
return false;
|
|
281
401
|
setIsSubmitting(true);
|
|
@@ -302,7 +422,7 @@ function useAuth({ appKey }) {
|
|
|
302
422
|
setIsSubmitting(false);
|
|
303
423
|
}
|
|
304
424
|
}, [appKey]);
|
|
305
|
-
const verifyOtp =
|
|
425
|
+
const verifyOtp = useCallback3(async (email, code) => {
|
|
306
426
|
if (!appKey)
|
|
307
427
|
return;
|
|
308
428
|
setIsSubmitting(true);
|
|
@@ -331,7 +451,7 @@ function useAuth({ appKey }) {
|
|
|
331
451
|
setIsSubmitting(false);
|
|
332
452
|
}
|
|
333
453
|
}, [appKey]);
|
|
334
|
-
const logout =
|
|
454
|
+
const logout = useCallback3(async () => {
|
|
335
455
|
const token = authToken;
|
|
336
456
|
if (appKey)
|
|
337
457
|
clearStoredToken(appKey);
|
|
@@ -362,43 +482,49 @@ function useAuth({ appKey }) {
|
|
|
362
482
|
}
|
|
363
483
|
|
|
364
484
|
// src/hooks/useAvailableModules.ts
|
|
365
|
-
import { useCallback as
|
|
485
|
+
import { useCallback as useCallback4, useEffect as useEffect5, useState as useState5 } from "react";
|
|
486
|
+
var EMPTY_DEFAULT = { agentId: null, sessionId: null };
|
|
366
487
|
var API_URL3 = "https://specialist.skippr.ai/api";
|
|
367
488
|
function useAvailableModules({
|
|
368
489
|
enabled,
|
|
369
490
|
bearerToken,
|
|
370
|
-
authedFetch
|
|
491
|
+
authedFetch,
|
|
492
|
+
agentId
|
|
371
493
|
}) {
|
|
372
|
-
const [modules, setModules] =
|
|
373
|
-
const [
|
|
374
|
-
const [
|
|
375
|
-
const [
|
|
376
|
-
const
|
|
494
|
+
const [modules, setModules] = useState5([]);
|
|
495
|
+
const [defaultSelection, setDefaultSelection] = useState5(EMPTY_DEFAULT);
|
|
496
|
+
const [isLoading, setIsLoading] = useState5(false);
|
|
497
|
+
const [hasResolved, setHasResolved] = useState5(false);
|
|
498
|
+
const [error, setError] = useState5(null);
|
|
499
|
+
const fetchModules = useCallback4(async () => {
|
|
377
500
|
setIsLoading(true);
|
|
378
501
|
setHasResolved(false);
|
|
379
502
|
setError(null);
|
|
380
503
|
try {
|
|
381
|
-
const
|
|
504
|
+
const query = agentId ? `?agentId=${encodeURIComponent(agentId)}` : "";
|
|
505
|
+
const resp = await authedFetch(`${API_URL3}/v1/modules/available${query}`);
|
|
382
506
|
if (!resp.ok) {
|
|
383
507
|
const body = await resp.json().catch(() => null);
|
|
384
508
|
throw new Error(body?.detail || `Failed to load modules: ${resp.status}`);
|
|
385
509
|
}
|
|
386
510
|
const data = await resp.json();
|
|
387
511
|
setModules(Array.isArray(data?.modules) ? data.modules : []);
|
|
512
|
+
setDefaultSelection(data?.default ?? EMPTY_DEFAULT);
|
|
388
513
|
} catch (e) {
|
|
389
514
|
setError(e instanceof Error ? e.message : "Failed to load modules");
|
|
390
515
|
} finally {
|
|
391
516
|
setIsLoading(false);
|
|
392
517
|
setHasResolved(true);
|
|
393
518
|
}
|
|
394
|
-
}, [authedFetch]);
|
|
395
|
-
|
|
519
|
+
}, [authedFetch, agentId]);
|
|
520
|
+
useEffect5(() => {
|
|
396
521
|
if (!enabled || !bearerToken)
|
|
397
522
|
return;
|
|
398
523
|
fetchModules();
|
|
399
524
|
}, [enabled, bearerToken, fetchModules]);
|
|
400
525
|
return {
|
|
401
526
|
modules,
|
|
527
|
+
defaultSelection,
|
|
402
528
|
isLoading,
|
|
403
529
|
hasResolved,
|
|
404
530
|
error,
|
|
@@ -406,44 +532,16 @@ function useAvailableModules({
|
|
|
406
532
|
};
|
|
407
533
|
}
|
|
408
534
|
|
|
409
|
-
// src/hooks/useLiveAgent.ts
|
|
410
|
-
import { useContext } from "react";
|
|
411
|
-
function useLiveAgent() {
|
|
412
|
-
const ctx = useContext(LiveAgentContext);
|
|
413
|
-
if (!ctx) {
|
|
414
|
-
throw new Error("useLiveAgent must be used within a <LiveAgent> provider");
|
|
415
|
-
}
|
|
416
|
-
const {
|
|
417
|
-
usesHostAuth,
|
|
418
|
-
authFailed,
|
|
419
|
-
connection,
|
|
420
|
-
shouldConnect,
|
|
421
|
-
historyMessages,
|
|
422
|
-
phasesSnapshot,
|
|
423
|
-
setPhasesSnapshot,
|
|
424
|
-
hasResolvedModules,
|
|
425
|
-
adoptionGoals,
|
|
426
|
-
startAdoptionSession,
|
|
427
|
-
launcherBottomPx,
|
|
428
|
-
setLauncherBottomPx,
|
|
429
|
-
popsDown,
|
|
430
|
-
panelExpanded,
|
|
431
|
-
togglePanelExpanded,
|
|
432
|
-
...publicValue
|
|
433
|
-
} = ctx;
|
|
434
|
-
return publicValue;
|
|
435
|
-
}
|
|
436
|
-
|
|
437
535
|
// src/hooks/usePlanUpdates.ts
|
|
438
|
-
import { useCallback as
|
|
536
|
+
import { useCallback as useCallback5 } from "react";
|
|
439
537
|
|
|
440
538
|
// src/hooks/useAgentState.ts
|
|
441
539
|
import { useRemoteParticipants } from "@livekit/components-react/hooks";
|
|
442
|
-
import { useEffect as
|
|
540
|
+
import { useEffect as useEffect6, useState as useState6 } from "react";
|
|
443
541
|
function useAgentState(attributeKey, parse, initial) {
|
|
444
|
-
const [value, setValue] =
|
|
542
|
+
const [value, setValue] = useState6(initial);
|
|
445
543
|
const remoteParticipants = useRemoteParticipants();
|
|
446
|
-
|
|
544
|
+
useEffect6(() => {
|
|
447
545
|
const agentParticipant = remoteParticipants.find((p) => p.attributes?.[attributeKey]);
|
|
448
546
|
if (agentParticipant) {
|
|
449
547
|
const attr = agentParticipant.attributes?.[attributeKey];
|
|
@@ -489,12 +587,75 @@ function parsePlan(json) {
|
|
|
489
587
|
return null;
|
|
490
588
|
}
|
|
491
589
|
function usePlanUpdates() {
|
|
492
|
-
const parse =
|
|
590
|
+
const parse = useCallback5(parsePlan, []);
|
|
493
591
|
return useAgentState(PLAN_ATTR, parse, null);
|
|
494
592
|
}
|
|
495
593
|
|
|
496
594
|
// src/hooks/useSession.ts
|
|
497
|
-
import { useCallback as
|
|
595
|
+
import { useCallback as useCallback6, useEffect as useEffect7, useRef, useState as useState7 } from "react";
|
|
596
|
+
|
|
597
|
+
// src/lib/agentMode.ts
|
|
598
|
+
var AGENT_MODE = {
|
|
599
|
+
Standard: "standard",
|
|
600
|
+
AlwaysOn: "always_on"
|
|
601
|
+
};
|
|
602
|
+
var AGENT_MODES = Object.values(AGENT_MODE);
|
|
603
|
+
|
|
604
|
+
// src/lib/sessionStatus.ts
|
|
605
|
+
var SESSION_STATUS = {
|
|
606
|
+
pending: "pending",
|
|
607
|
+
active: "active",
|
|
608
|
+
paused: "paused",
|
|
609
|
+
completed: "completed",
|
|
610
|
+
expired: "expired"
|
|
611
|
+
};
|
|
612
|
+
var SESSION_STATUSES = Object.values(SESSION_STATUS);
|
|
613
|
+
|
|
614
|
+
// src/lib/session.ts
|
|
615
|
+
function mapApiMessages(messages) {
|
|
616
|
+
return messages.filter((message) => message.role !== "system").map((message) => ({
|
|
617
|
+
id: message.id,
|
|
618
|
+
role: message.role === "user" ? "user" : "assistant",
|
|
619
|
+
content: message.content,
|
|
620
|
+
source: "chat",
|
|
621
|
+
timestamp: new Date(message.createdAt).getTime()
|
|
622
|
+
}));
|
|
623
|
+
}
|
|
624
|
+
function getResumableSessionId(currentSession, mode) {
|
|
625
|
+
if (!currentSession)
|
|
626
|
+
return;
|
|
627
|
+
const { id, status } = currentSession;
|
|
628
|
+
if (status === SESSION_STATUS.paused || status === SESSION_STATUS.active)
|
|
629
|
+
return id;
|
|
630
|
+
if (mode === AGENT_MODE.AlwaysOn && (status === SESSION_STATUS.expired || status === SESSION_STATUS.completed))
|
|
631
|
+
return id;
|
|
632
|
+
return;
|
|
633
|
+
}
|
|
634
|
+
function canResumeSession(currentSession, mode) {
|
|
635
|
+
return getResumableSessionId(currentSession, mode) !== undefined;
|
|
636
|
+
}
|
|
637
|
+
function getResumableSession(module) {
|
|
638
|
+
if (!module)
|
|
639
|
+
return null;
|
|
640
|
+
const id = getResumableSessionId(module.currentSession, module.mode);
|
|
641
|
+
return id ? { id, agentId: module.id } : null;
|
|
642
|
+
}
|
|
643
|
+
function getModuleSessionState(currentSession, mode) {
|
|
644
|
+
if (!currentSession)
|
|
645
|
+
return null;
|
|
646
|
+
if (canResumeSession(currentSession, mode))
|
|
647
|
+
return "resume";
|
|
648
|
+
if (mode === AGENT_MODE.Standard) {
|
|
649
|
+
const { status } = currentSession;
|
|
650
|
+
if (status === SESSION_STATUS.completed)
|
|
651
|
+
return "completed";
|
|
652
|
+
if (status === SESSION_STATUS.expired)
|
|
653
|
+
return "expired";
|
|
654
|
+
}
|
|
655
|
+
return null;
|
|
656
|
+
}
|
|
657
|
+
|
|
658
|
+
// src/hooks/useSession.ts
|
|
498
659
|
var API_URL4 = "https://specialist.skippr.ai/api";
|
|
499
660
|
async function fetchSessionMessages(sessionId, authedFetch) {
|
|
500
661
|
try {
|
|
@@ -502,13 +663,7 @@ async function fetchSessionMessages(sessionId, authedFetch) {
|
|
|
502
663
|
if (!resp.ok)
|
|
503
664
|
return [];
|
|
504
665
|
const { messages } = await resp.json();
|
|
505
|
-
return messages
|
|
506
|
-
id: message.id,
|
|
507
|
-
role: message.role === "user" ? "user" : "assistant",
|
|
508
|
-
content: message.content,
|
|
509
|
-
source: "chat",
|
|
510
|
-
timestamp: new Date(message.createdAt).getTime()
|
|
511
|
-
}));
|
|
666
|
+
return mapApiMessages(messages);
|
|
512
667
|
} catch {
|
|
513
668
|
return [];
|
|
514
669
|
}
|
|
@@ -552,27 +707,27 @@ function useSession({
|
|
|
552
707
|
onStartError,
|
|
553
708
|
onDisconnect
|
|
554
709
|
}) {
|
|
555
|
-
const [connection, setConnection] =
|
|
556
|
-
const [shouldConnect, setShouldConnect] =
|
|
557
|
-
const [isStarting, setIsStarting] =
|
|
558
|
-
const [isDisconnecting, setIsDisconnecting] =
|
|
559
|
-
const [error, setError] =
|
|
560
|
-
const [errorCode, setErrorCode] =
|
|
561
|
-
const [sessionId, setSessionId] =
|
|
562
|
-
const [bearerToken, setBearerToken] =
|
|
563
|
-
const [pendingScreenStream, setPendingScreenStream] =
|
|
564
|
-
const [isPaused, setIsPaused] =
|
|
565
|
-
const [isPausing, setIsPausing] =
|
|
566
|
-
const [pauseTimeoutSeconds, setPauseTimeoutSeconds] =
|
|
567
|
-
const [historyMessages, setHistoryMessages] =
|
|
568
|
-
const [authFailed, setAuthFailed] =
|
|
710
|
+
const [connection, setConnection] = useState7(null);
|
|
711
|
+
const [shouldConnect, setShouldConnect] = useState7(false);
|
|
712
|
+
const [isStarting, setIsStarting] = useState7(false);
|
|
713
|
+
const [isDisconnecting, setIsDisconnecting] = useState7(false);
|
|
714
|
+
const [error, setError] = useState7("");
|
|
715
|
+
const [errorCode, setErrorCode] = useState7(null);
|
|
716
|
+
const [sessionId, setSessionId] = useState7(null);
|
|
717
|
+
const [bearerToken, setBearerToken] = useState7(authToken ?? null);
|
|
718
|
+
const [pendingScreenStream, setPendingScreenStream] = useState7(null);
|
|
719
|
+
const [isPaused, setIsPaused] = useState7(false);
|
|
720
|
+
const [isPausing, setIsPausing] = useState7(false);
|
|
721
|
+
const [pauseTimeoutSeconds, setPauseTimeoutSeconds] = useState7(null);
|
|
722
|
+
const [historyMessages, setHistoryMessages] = useState7([]);
|
|
723
|
+
const [authFailed, setAuthFailed] = useState7(false);
|
|
569
724
|
const tokenRef = useRef(authToken ? { token: authToken, expiresAt: null } : null);
|
|
570
725
|
const getUserTokenRef = useRef(getUserToken);
|
|
571
726
|
getUserTokenRef.current = getUserToken ?? (userToken ? () => Promise.resolve(userToken) : undefined);
|
|
572
727
|
const failedBearerRef = useRef(null);
|
|
573
728
|
const inFlightExchangeRef = useRef(null);
|
|
574
|
-
const canExchange =
|
|
575
|
-
const reExchange =
|
|
729
|
+
const canExchange = useCallback6(() => !!appKey && !!getUserTokenRef.current, [appKey]);
|
|
730
|
+
const reExchange = useCallback6(async () => {
|
|
576
731
|
if (inFlightExchangeRef.current)
|
|
577
732
|
return inFlightExchangeRef.current;
|
|
578
733
|
const provider = getUserTokenRef.current;
|
|
@@ -592,7 +747,7 @@ function useSession({
|
|
|
592
747
|
inFlightExchangeRef.current = null;
|
|
593
748
|
}
|
|
594
749
|
}, [appKey]);
|
|
595
|
-
const getValidBearer =
|
|
750
|
+
const getValidBearer = useCallback6(async () => {
|
|
596
751
|
const current = tokenRef.current;
|
|
597
752
|
if (current) {
|
|
598
753
|
if (current.expiresAt === null)
|
|
@@ -604,7 +759,7 @@ function useSession({
|
|
|
604
759
|
return reExchange();
|
|
605
760
|
return current?.token ?? null;
|
|
606
761
|
}, [canExchange, reExchange]);
|
|
607
|
-
const authedFetch =
|
|
762
|
+
const authedFetch = useCallback6(async (input, init = {}) => {
|
|
608
763
|
const isSecretMode = canExchange();
|
|
609
764
|
const onTerminalAuthFailure = () => {
|
|
610
765
|
if (isSecretMode)
|
|
@@ -646,7 +801,7 @@ function useSession({
|
|
|
646
801
|
setAuthFailed(false);
|
|
647
802
|
return resp;
|
|
648
803
|
}, [canExchange, getValidBearer, reExchange]);
|
|
649
|
-
|
|
804
|
+
useEffect7(() => {
|
|
650
805
|
let stale = false;
|
|
651
806
|
if (authToken) {
|
|
652
807
|
tokenRef.current = { token: authToken, expiresAt: null };
|
|
@@ -667,7 +822,7 @@ function useSession({
|
|
|
667
822
|
}, [authToken, canExchange, reExchange]);
|
|
668
823
|
const pauseOnUnloadRef = useRef(null);
|
|
669
824
|
pauseOnUnloadRef.current = connection !== null && !isPaused && sessionId && bearerToken ? { sessionId, bearerToken } : null;
|
|
670
|
-
|
|
825
|
+
useEffect7(() => {
|
|
671
826
|
const onPageHide = () => {
|
|
672
827
|
const pending = pauseOnUnloadRef.current;
|
|
673
828
|
if (!pending)
|
|
@@ -682,7 +837,7 @@ function useSession({
|
|
|
682
837
|
window.addEventListener("pagehide", onPageHide);
|
|
683
838
|
return () => window.removeEventListener("pagehide", onPageHide);
|
|
684
839
|
}, []);
|
|
685
|
-
const startSession =
|
|
840
|
+
const startSession = useCallback6(async ({ agentId, agentControls, existingSessionId, adoptionGoalId }) => {
|
|
686
841
|
if (!bearerToken) {
|
|
687
842
|
setError("No auth token available");
|
|
688
843
|
return;
|
|
@@ -763,7 +918,7 @@ function useSession({
|
|
|
763
918
|
setIsStarting(false);
|
|
764
919
|
}
|
|
765
920
|
}, [captureMode, bearerToken, authedFetch, onStart, onStartError]);
|
|
766
|
-
const pauseSession =
|
|
921
|
+
const pauseSession = useCallback6(async () => {
|
|
767
922
|
if (!sessionId || !bearerToken)
|
|
768
923
|
return;
|
|
769
924
|
setIsPausing(true);
|
|
@@ -789,7 +944,7 @@ function useSession({
|
|
|
789
944
|
setIsPaused(true);
|
|
790
945
|
setIsPausing(false);
|
|
791
946
|
}, [sessionId, bearerToken, authedFetch, pendingScreenStream]);
|
|
792
|
-
const disconnect =
|
|
947
|
+
const disconnect = useCallback6(async () => {
|
|
793
948
|
setIsDisconnecting(true);
|
|
794
949
|
try {
|
|
795
950
|
if (sessionId && bearerToken) {
|
|
@@ -833,6 +988,55 @@ function useSession({
|
|
|
833
988
|
};
|
|
834
989
|
}
|
|
835
990
|
|
|
991
|
+
// src/hooks/useSessionHistory.ts
|
|
992
|
+
import { useEffect as useEffect8, useState as useState8 } from "react";
|
|
993
|
+
var API_URL5 = "https://specialist.skippr.ai/api";
|
|
994
|
+
var EMPTY = { messages: [], phases: [] };
|
|
995
|
+
function useSessionHistory({
|
|
996
|
+
agentId,
|
|
997
|
+
enabled,
|
|
998
|
+
authedFetch
|
|
999
|
+
}) {
|
|
1000
|
+
const [history2, setHistory] = useState8(EMPTY);
|
|
1001
|
+
const [loadedAgentId, setLoadedAgentId] = useState8(null);
|
|
1002
|
+
const activeAgentId = enabled && agentId ? agentId : null;
|
|
1003
|
+
const isLoading = activeAgentId !== null && activeAgentId !== loadedAgentId;
|
|
1004
|
+
useEffect8(() => {
|
|
1005
|
+
if (!enabled || !agentId) {
|
|
1006
|
+
setHistory(EMPTY);
|
|
1007
|
+
setLoadedAgentId(null);
|
|
1008
|
+
return;
|
|
1009
|
+
}
|
|
1010
|
+
let stale = false;
|
|
1011
|
+
(async () => {
|
|
1012
|
+
try {
|
|
1013
|
+
const resp = await authedFetch(`${API_URL5}/v1/modules/${agentId}/history`);
|
|
1014
|
+
if (!resp.ok)
|
|
1015
|
+
throw new Error(`Failed to load agent history: ${resp.status}`);
|
|
1016
|
+
const data = await resp.json();
|
|
1017
|
+
if (stale)
|
|
1018
|
+
return;
|
|
1019
|
+
setHistory({
|
|
1020
|
+
messages: mapApiMessages(data.messages),
|
|
1021
|
+
phases: data.phases
|
|
1022
|
+
});
|
|
1023
|
+
} catch (e) {
|
|
1024
|
+
if (stale)
|
|
1025
|
+
return;
|
|
1026
|
+
console.warn("[Skippr] Failed to load session history:", e);
|
|
1027
|
+
setHistory(EMPTY);
|
|
1028
|
+
} finally {
|
|
1029
|
+
if (!stale)
|
|
1030
|
+
setLoadedAgentId(agentId);
|
|
1031
|
+
}
|
|
1032
|
+
})();
|
|
1033
|
+
return () => {
|
|
1034
|
+
stale = true;
|
|
1035
|
+
};
|
|
1036
|
+
}, [enabled, agentId, authedFetch]);
|
|
1037
|
+
return { ...history2, isLoading };
|
|
1038
|
+
}
|
|
1039
|
+
|
|
836
1040
|
// src/lib/launcher.ts
|
|
837
1041
|
var DEFAULT_LAUNCHER_BOTTOM_PX = 48;
|
|
838
1042
|
var LAUNCHER_HEIGHT_PX = 50;
|
|
@@ -863,58 +1067,6 @@ function verticalAlignToBottomPx(align) {
|
|
|
863
1067
|
function launcherPopsDown(bottomPx) {
|
|
864
1068
|
return bottomPx + LAUNCHER_HEIGHT_PX / 2 > window.innerHeight / 2;
|
|
865
1069
|
}
|
|
866
|
-
|
|
867
|
-
// src/lib/agentMode.ts
|
|
868
|
-
var AGENT_MODE = {
|
|
869
|
-
Standard: "standard",
|
|
870
|
-
AlwaysOn: "always_on"
|
|
871
|
-
};
|
|
872
|
-
var AGENT_MODES = Object.values(AGENT_MODE);
|
|
873
|
-
|
|
874
|
-
// src/lib/sessionStatus.ts
|
|
875
|
-
var SESSION_STATUS = {
|
|
876
|
-
pending: "pending",
|
|
877
|
-
active: "active",
|
|
878
|
-
paused: "paused",
|
|
879
|
-
completed: "completed",
|
|
880
|
-
expired: "expired"
|
|
881
|
-
};
|
|
882
|
-
var SESSION_STATUSES = Object.values(SESSION_STATUS);
|
|
883
|
-
|
|
884
|
-
// src/lib/session.ts
|
|
885
|
-
function getResumableSessionId(currentSession, mode) {
|
|
886
|
-
if (!currentSession)
|
|
887
|
-
return;
|
|
888
|
-
const { id, status } = currentSession;
|
|
889
|
-
if (status === SESSION_STATUS.paused || status === SESSION_STATUS.active)
|
|
890
|
-
return id;
|
|
891
|
-
if (mode === AGENT_MODE.AlwaysOn && (status === SESSION_STATUS.expired || status === SESSION_STATUS.completed))
|
|
892
|
-
return id;
|
|
893
|
-
return;
|
|
894
|
-
}
|
|
895
|
-
function canResumeSession(currentSession, mode) {
|
|
896
|
-
return getResumableSessionId(currentSession, mode) !== undefined;
|
|
897
|
-
}
|
|
898
|
-
function getResumableSession(module) {
|
|
899
|
-
if (!module)
|
|
900
|
-
return null;
|
|
901
|
-
const id = getResumableSessionId(module.currentSession, module.mode);
|
|
902
|
-
return id ? { id, agentId: module.id } : null;
|
|
903
|
-
}
|
|
904
|
-
function getModuleSessionState(currentSession, mode) {
|
|
905
|
-
if (!currentSession)
|
|
906
|
-
return null;
|
|
907
|
-
if (canResumeSession(currentSession, mode))
|
|
908
|
-
return "resume";
|
|
909
|
-
if (mode === AGENT_MODE.Standard) {
|
|
910
|
-
const { status } = currentSession;
|
|
911
|
-
if (status === SESSION_STATUS.completed)
|
|
912
|
-
return "completed";
|
|
913
|
-
if (status === SESSION_STATUS.expired)
|
|
914
|
-
return "expired";
|
|
915
|
-
}
|
|
916
|
-
return null;
|
|
917
|
-
}
|
|
918
1070
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/createLucideIcon.js
|
|
919
1071
|
import { forwardRef as forwardRef2, createElement as createElement3 } from "react";
|
|
920
1072
|
|
|
@@ -962,9 +1114,9 @@ var hasA11yProp = (props) => {
|
|
|
962
1114
|
};
|
|
963
1115
|
|
|
964
1116
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/context.js
|
|
965
|
-
import { createContext as
|
|
966
|
-
var LucideContext =
|
|
967
|
-
var useLucideContext = () =>
|
|
1117
|
+
import { createContext as createContext3, useContext as useContext3, useMemo as useMemo2, createElement } from "react";
|
|
1118
|
+
var LucideContext = createContext3({});
|
|
1119
|
+
var useLucideContext = () => useContext3(LucideContext);
|
|
968
1120
|
|
|
969
1121
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/Icon.js
|
|
970
1122
|
var Icon = forwardRef(({ color, size, strokeWidth, absoluteStrokeWidth, className = "", children, iconNode, ...rest }, ref) => {
|
|
@@ -1188,7 +1340,7 @@ var __iconNode23 = [
|
|
|
1188
1340
|
];
|
|
1189
1341
|
var X = createLucideIcon("x", __iconNode23);
|
|
1190
1342
|
// src/components/AgentCursor.tsx
|
|
1191
|
-
import { useContext as
|
|
1343
|
+
import { useContext as useContext4, useEffect as useEffect9, useLayoutEffect, useRef as useRef2, useState as useState9 } from "react";
|
|
1192
1344
|
|
|
1193
1345
|
// src/capture/elementRef.ts
|
|
1194
1346
|
function safeGetIframeDocument(iframe) {
|
|
@@ -1325,7 +1477,7 @@ function traceRing(path, durationMs, onFrame, onDone) {
|
|
|
1325
1477
|
}
|
|
1326
1478
|
|
|
1327
1479
|
// src/components/AgentCursor.tsx
|
|
1328
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
1480
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
1329
1481
|
var Z_INDEX = 2147483646;
|
|
1330
1482
|
var BRAND_TEAL = "#2bc0ae";
|
|
1331
1483
|
var GLIDE_EASE = "cubic-bezier(0.45, 0, 0.25, 1)";
|
|
@@ -1370,12 +1522,12 @@ function AgentCursor({
|
|
|
1370
1522
|
target,
|
|
1371
1523
|
animated = false
|
|
1372
1524
|
}) {
|
|
1373
|
-
const ctx =
|
|
1374
|
-
const [cursor, setCursor] =
|
|
1375
|
-
const [glideMs, setGlideMs] =
|
|
1376
|
-
const [phase, setPhase] =
|
|
1377
|
-
const [ringBox, setRingBox] =
|
|
1378
|
-
const [clickPulse, setClickPulse] =
|
|
1525
|
+
const ctx = useContext4(LiveAgentContext);
|
|
1526
|
+
const [cursor, setCursor] = useState9(null);
|
|
1527
|
+
const [glideMs, setGlideMs] = useState9(0);
|
|
1528
|
+
const [phase, setPhase] = useState9("idle");
|
|
1529
|
+
const [ringBox, setRingBox] = useState9(null);
|
|
1530
|
+
const [clickPulse, setClickPulse] = useState9(0);
|
|
1379
1531
|
const cursorElRef = useRef2(null);
|
|
1380
1532
|
const pathRef = useRef2(null);
|
|
1381
1533
|
const prevCursorRef = useRef2(null);
|
|
@@ -1498,7 +1650,7 @@ function AgentCursor({
|
|
|
1498
1650
|
});
|
|
1499
1651
|
return cancelAnimation;
|
|
1500
1652
|
}, [target, animated]);
|
|
1501
|
-
|
|
1653
|
+
useEffect9(() => {
|
|
1502
1654
|
if (!target || target.kind === "gesture" || phase === "idle")
|
|
1503
1655
|
return;
|
|
1504
1656
|
const track = () => {
|
|
@@ -1530,7 +1682,7 @@ function AgentCursor({
|
|
|
1530
1682
|
}
|
|
1531
1683
|
};
|
|
1532
1684
|
}, [target, phase]);
|
|
1533
|
-
|
|
1685
|
+
useEffect9(() => {
|
|
1534
1686
|
return () => {
|
|
1535
1687
|
traceRef.current?.cancel();
|
|
1536
1688
|
for (const t of timersRef.current)
|
|
@@ -1547,10 +1699,10 @@ function AgentCursor({
|
|
|
1547
1699
|
"data-skippr-private": "true",
|
|
1548
1700
|
"aria-hidden": "true",
|
|
1549
1701
|
children: [
|
|
1550
|
-
drawing && ringBox && /* @__PURE__ */
|
|
1702
|
+
drawing && ringBox && /* @__PURE__ */ jsx2("svg", {
|
|
1551
1703
|
"aria-hidden": "true",
|
|
1552
1704
|
style: { ...ringBoxStyle(ringBox, Z_INDEX), overflow: "visible" },
|
|
1553
|
-
children: /* @__PURE__ */
|
|
1705
|
+
children: /* @__PURE__ */ jsx2("path", {
|
|
1554
1706
|
ref: pathRef,
|
|
1555
1707
|
d: ringPathD(ringBox),
|
|
1556
1708
|
fill: "none",
|
|
@@ -1564,20 +1716,20 @@ function AgentCursor({
|
|
|
1564
1716
|
style: ringBoxStyle(ringBox, Z_INDEX),
|
|
1565
1717
|
className: "skippr:relative",
|
|
1566
1718
|
children: [
|
|
1567
|
-
/* @__PURE__ */
|
|
1719
|
+
/* @__PURE__ */ jsx2("div", {
|
|
1568
1720
|
className: "skippr:absolute skippr:inset-0 skippr:rounded-[1rem] skippr:border-2 skippr:border-[#2bc0ae] skippr:animate-skippr-annotation-pulse"
|
|
1569
1721
|
}),
|
|
1570
|
-
/* @__PURE__ */
|
|
1722
|
+
/* @__PURE__ */ jsx2("div", {
|
|
1571
1723
|
role: "status",
|
|
1572
1724
|
className: "skippr:absolute skippr:-bottom-9 skippr:left-1/2 skippr:-translate-x-1/2 skippr:flex skippr:items-center skippr:gap-1.5 skippr:rounded-full skippr:bg-[#2bc0ae] skippr:px-2.5 skippr:py-1 skippr:shadow-[0_4px_12px_rgba(0,0,0,0.12)]",
|
|
1573
|
-
children: /* @__PURE__ */
|
|
1725
|
+
children: /* @__PURE__ */ jsx2("span", {
|
|
1574
1726
|
className: "skippr:text-[11px] skippr:font-medium skippr:text-white skippr:whitespace-nowrap",
|
|
1575
1727
|
children: target.label
|
|
1576
1728
|
})
|
|
1577
1729
|
})
|
|
1578
1730
|
]
|
|
1579
1731
|
}),
|
|
1580
|
-
target.kind === "gesture" && /* @__PURE__ */
|
|
1732
|
+
target.kind === "gesture" && /* @__PURE__ */ jsx2("div", {
|
|
1581
1733
|
role: "status",
|
|
1582
1734
|
className: "skippr:fixed skippr:-translate-x-1/2 skippr:flex skippr:items-center skippr:gap-1.5 skippr:rounded-full skippr:bg-[#2bc0ae] skippr:px-2.5 skippr:py-1 skippr:shadow-[0_4px_12px_rgba(0,0,0,0.12)]",
|
|
1583
1735
|
style: {
|
|
@@ -1587,12 +1739,12 @@ function AgentCursor({
|
|
|
1587
1739
|
pointerEvents: "none",
|
|
1588
1740
|
transition: `left ${glideMs}ms ${GLIDE_EASE}, top ${glideMs}ms ${GLIDE_EASE}`
|
|
1589
1741
|
},
|
|
1590
|
-
children: /* @__PURE__ */
|
|
1742
|
+
children: /* @__PURE__ */ jsx2("span", {
|
|
1591
1743
|
className: "skippr:text-[11px] skippr:font-medium skippr:text-white skippr:whitespace-nowrap",
|
|
1592
1744
|
children: target.label
|
|
1593
1745
|
})
|
|
1594
1746
|
}),
|
|
1595
|
-
/* @__PURE__ */
|
|
1747
|
+
/* @__PURE__ */ jsx2("div", {
|
|
1596
1748
|
ref: cursorElRef,
|
|
1597
1749
|
style: {
|
|
1598
1750
|
position: "fixed",
|
|
@@ -1602,12 +1754,12 @@ function AgentCursor({
|
|
|
1602
1754
|
zIndex: Z_INDEX,
|
|
1603
1755
|
transition: `left ${glideMs}ms ${GLIDE_EASE}, top ${glideMs}ms ${GLIDE_EASE}`
|
|
1604
1756
|
},
|
|
1605
|
-
children: /* @__PURE__ */
|
|
1757
|
+
children: /* @__PURE__ */ jsx2(MousePointer2, {
|
|
1606
1758
|
className: `skippr:h-5 skippr:w-5 skippr:text-[#2bc0ae] skippr:drop-shadow-[0_2px_5px_rgba(0,0,0,0.4)] ${clickPulse > 0 ? "skippr:animate-skippr-press" : "skippr:animate-skippr-cursor-pop"}`,
|
|
1607
1759
|
fill: "currentColor"
|
|
1608
1760
|
}, clickPulse)
|
|
1609
1761
|
}),
|
|
1610
|
-
clickPulse > 0 && rippleCenter && /* @__PURE__ */
|
|
1762
|
+
clickPulse > 0 && rippleCenter && /* @__PURE__ */ jsx2("span", {
|
|
1611
1763
|
className: "skippr:fixed skippr:h-7 skippr:w-7 skippr:rounded-full skippr:bg-[#2bc0ae]/50 skippr:animate-skippr-click-ping",
|
|
1612
1764
|
style: {
|
|
1613
1765
|
left: `${rippleCenter.x}px`,
|
|
@@ -1621,14 +1773,14 @@ function AgentCursor({
|
|
|
1621
1773
|
}
|
|
1622
1774
|
|
|
1623
1775
|
// src/components/AutoStartMedia.tsx
|
|
1624
|
-
import { useConnectionState, useLocalParticipant } from "@livekit/components-react/hooks";
|
|
1776
|
+
import { useConnectionState, useLocalParticipant as useLocalParticipant2 } from "@livekit/components-react/hooks";
|
|
1625
1777
|
import { ConnectionState, Track } from "livekit-client";
|
|
1626
|
-
import { useEffect as
|
|
1778
|
+
import { useEffect as useEffect10, useRef as useRef3 } from "react";
|
|
1627
1779
|
function AutoStartMedia({ pendingScreenStream }) {
|
|
1628
|
-
const { localParticipant } =
|
|
1780
|
+
const { localParticipant } = useLocalParticipant2();
|
|
1629
1781
|
const connectionState = useConnectionState();
|
|
1630
1782
|
const didStartRef = useRef3(false);
|
|
1631
|
-
|
|
1783
|
+
useEffect10(() => {
|
|
1632
1784
|
if (didStartRef.current)
|
|
1633
1785
|
return;
|
|
1634
1786
|
if (connectionState !== ConnectionState.Connected)
|
|
@@ -1651,9 +1803,9 @@ function AutoStartMedia({ pendingScreenStream }) {
|
|
|
1651
1803
|
}
|
|
1652
1804
|
|
|
1653
1805
|
// src/components/DomCapture.tsx
|
|
1654
|
-
import { useConnectionState as useConnectionState2, useLocalParticipant as
|
|
1806
|
+
import { useConnectionState as useConnectionState2, useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react/hooks";
|
|
1655
1807
|
import { ConnectionState as ConnectionState2, ScreenSharePresets, Track as Track2 } from "livekit-client";
|
|
1656
|
-
import { useEffect as
|
|
1808
|
+
import { useEffect as useEffect11, useRef as useRef4 } from "react";
|
|
1657
1809
|
|
|
1658
1810
|
// src/capture/a11yUtils.ts
|
|
1659
1811
|
var ROLE_BY_TAG = {
|
|
@@ -2268,7 +2420,7 @@ function subscribeActionsBusy(cb) {
|
|
|
2268
2420
|
|
|
2269
2421
|
// src/capture/domEvents.ts
|
|
2270
2422
|
var MUTATION_DEBOUNCE_MS = 250;
|
|
2271
|
-
var
|
|
2423
|
+
var textEncoder2 = new TextEncoder;
|
|
2272
2424
|
function isInsideWidget(target) {
|
|
2273
2425
|
if (!(target instanceof Node))
|
|
2274
2426
|
return false;
|
|
@@ -2294,7 +2446,7 @@ function installDomEventListeners(localParticipant, options = {}) {
|
|
|
2294
2446
|
const { onTriggerEvent } = options;
|
|
2295
2447
|
function publishDomEvent(event) {
|
|
2296
2448
|
try {
|
|
2297
|
-
localParticipant.publishData(
|
|
2449
|
+
localParticipant.publishData(textEncoder2.encode(JSON.stringify(event)), {
|
|
2298
2450
|
reliable: true,
|
|
2299
2451
|
topic: DOM_EVENTS_TOPIC
|
|
2300
2452
|
}).catch(() => {
|
|
@@ -2460,7 +2612,7 @@ var CAPTURE_BITRATE = 4000000;
|
|
|
2460
2612
|
var DOM_SNAPSHOT_GZIP_THRESHOLD_BYTES = 14000;
|
|
2461
2613
|
var MAX_CANVAS_DPR = 1.5;
|
|
2462
2614
|
var CONSECUTIVE_FAILURES_BEFORE_REPORT = 3;
|
|
2463
|
-
var
|
|
2615
|
+
var textEncoder3 = new TextEncoder;
|
|
2464
2616
|
function shouldIncludeInSnapshot(element) {
|
|
2465
2617
|
if (!(element instanceof Element))
|
|
2466
2618
|
return true;
|
|
@@ -2535,7 +2687,7 @@ async function buildDomSnapshotFrame() {
|
|
|
2535
2687
|
title: document.title,
|
|
2536
2688
|
capturedAt: new Date().toISOString()
|
|
2537
2689
|
});
|
|
2538
|
-
const snapshotBytes =
|
|
2690
|
+
const snapshotBytes = textEncoder3.encode(snapshotJson);
|
|
2539
2691
|
const { bytes, compressionFlag } = await gzipIfBeneficial(snapshotBytes);
|
|
2540
2692
|
const frame = new Uint8Array(bytes.byteLength + 1);
|
|
2541
2693
|
frame[0] = compressionFlag;
|
|
@@ -2544,7 +2696,7 @@ async function buildDomSnapshotFrame() {
|
|
|
2544
2696
|
}
|
|
2545
2697
|
function reportCaptureError(localParticipant) {
|
|
2546
2698
|
try {
|
|
2547
|
-
localParticipant.publishData(
|
|
2699
|
+
localParticipant.publishData(textEncoder3.encode(JSON.stringify({ type: "capture_error" })), {
|
|
2548
2700
|
reliable: true,
|
|
2549
2701
|
topic: DOM_SNAPSHOT_TOPIC
|
|
2550
2702
|
}).catch(() => {
|
|
@@ -2559,10 +2711,10 @@ async function unpublishAndStopTrack(localParticipant, videoTrack) {
|
|
|
2559
2711
|
videoTrack.stop();
|
|
2560
2712
|
}
|
|
2561
2713
|
function DomCapture() {
|
|
2562
|
-
const { localParticipant } =
|
|
2714
|
+
const { localParticipant } = useLocalParticipant3();
|
|
2563
2715
|
const connectionState = useConnectionState2();
|
|
2564
2716
|
const didStartRef = useRef4(false);
|
|
2565
|
-
|
|
2717
|
+
useEffect11(() => {
|
|
2566
2718
|
if (didStartRef.current)
|
|
2567
2719
|
return;
|
|
2568
2720
|
if (connectionState !== ConnectionState2.Connected)
|
|
@@ -2672,7 +2824,7 @@ function DomCapture() {
|
|
|
2672
2824
|
|
|
2673
2825
|
// src/components/HighlightOverlay.tsx
|
|
2674
2826
|
import { useDataChannel } from "@livekit/components-react/hooks";
|
|
2675
|
-
import { useCallback as
|
|
2827
|
+
import { useCallback as useCallback7, useEffect as useEffect12, useRef as useRef5 } from "react";
|
|
2676
2828
|
var HIGHLIGHT_AUTO_CLEAR_MS = 1e4;
|
|
2677
2829
|
var textDecoder = new TextDecoder;
|
|
2678
2830
|
function parseHighlightMessage(payload) {
|
|
@@ -2697,14 +2849,14 @@ function parseHighlightMessage(payload) {
|
|
|
2697
2849
|
function HighlightOverlay() {
|
|
2698
2850
|
const targetRef = useRef5(null);
|
|
2699
2851
|
const autoClearRef = useRef5(null);
|
|
2700
|
-
const clear =
|
|
2852
|
+
const clear = useCallback7(() => {
|
|
2701
2853
|
if (autoClearRef.current)
|
|
2702
2854
|
clearTimeout(autoClearRef.current);
|
|
2703
2855
|
autoClearRef.current = null;
|
|
2704
2856
|
targetRef.current = null;
|
|
2705
2857
|
clearCursorTarget("guide");
|
|
2706
2858
|
}, []);
|
|
2707
|
-
const onHighlightMessage =
|
|
2859
|
+
const onHighlightMessage = useCallback7((msg) => {
|
|
2708
2860
|
const parsed = parseHighlightMessage(msg.payload);
|
|
2709
2861
|
if (!parsed)
|
|
2710
2862
|
return;
|
|
@@ -2728,7 +2880,7 @@ function HighlightOverlay() {
|
|
|
2728
2880
|
autoClearRef.current = setTimeout(clear, HIGHLIGHT_AUTO_CLEAR_MS);
|
|
2729
2881
|
}, [clear]);
|
|
2730
2882
|
useDataChannel(HIGHLIGHT_TOPIC, onHighlightMessage);
|
|
2731
|
-
|
|
2883
|
+
useEffect12(() => {
|
|
2732
2884
|
const onClick = (event) => {
|
|
2733
2885
|
const target = targetRef.current;
|
|
2734
2886
|
const node = event.target;
|
|
@@ -2738,15 +2890,15 @@ function HighlightOverlay() {
|
|
|
2738
2890
|
document.addEventListener("click", onClick, { capture: true });
|
|
2739
2891
|
return () => document.removeEventListener("click", onClick, { capture: true });
|
|
2740
2892
|
}, [clear]);
|
|
2741
|
-
|
|
2893
|
+
useEffect12(() => clear, [clear]);
|
|
2742
2894
|
return null;
|
|
2743
2895
|
}
|
|
2744
2896
|
|
|
2745
2897
|
// src/components/MinimizedBubble.tsx
|
|
2746
|
-
import { useContext as
|
|
2898
|
+
import { useContext as useContext5, useEffect as useEffect14, useRef as useRef7, useState as useState10 } from "react";
|
|
2747
2899
|
|
|
2748
2900
|
// src/hooks/useLauncherDrag.ts
|
|
2749
|
-
import { useEffect as
|
|
2901
|
+
import { useEffect as useEffect13, useRef as useRef6 } from "react";
|
|
2750
2902
|
import { flushSync } from "react-dom";
|
|
2751
2903
|
var DRAG_THRESHOLD_PX = 5;
|
|
2752
2904
|
function useLauncherDrag(containerRef, onDrop, followRefs, reportDragging) {
|
|
@@ -2757,7 +2909,7 @@ function useLauncherDrag(containerRef, onDrop, followRefs, reportDragging) {
|
|
|
2757
2909
|
followTargetsRef.current = followRefs;
|
|
2758
2910
|
const reportDraggingRef = useRef6(reportDragging);
|
|
2759
2911
|
reportDraggingRef.current = reportDragging;
|
|
2760
|
-
|
|
2912
|
+
useEffect13(() => {
|
|
2761
2913
|
const el = containerRef.current;
|
|
2762
2914
|
if (!el)
|
|
2763
2915
|
return;
|
|
@@ -2906,7 +3058,7 @@ function cn(...inputs) {
|
|
|
2906
3058
|
}
|
|
2907
3059
|
|
|
2908
3060
|
// src/components/AdoptionBubble.tsx
|
|
2909
|
-
import { jsx as
|
|
3061
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
2910
3062
|
function AdoptionBubble({
|
|
2911
3063
|
goal,
|
|
2912
3064
|
onAttend,
|
|
@@ -2914,7 +3066,7 @@ function AdoptionBubble({
|
|
|
2914
3066
|
exitDelayMs = 0,
|
|
2915
3067
|
hidden = false
|
|
2916
3068
|
}) {
|
|
2917
|
-
return /* @__PURE__ */
|
|
3069
|
+
return /* @__PURE__ */ jsx3("div", {
|
|
2918
3070
|
style: {
|
|
2919
3071
|
animationDelay: `${appearDelayMs}ms`,
|
|
2920
3072
|
transitionDelay: hidden ? `${exitDelayMs}ms` : "0ms"
|
|
@@ -2925,18 +3077,18 @@ function AdoptionBubble({
|
|
|
2925
3077
|
onClick: () => onAttend(goal),
|
|
2926
3078
|
className: cn("skippr:flex skippr:max-w-72 skippr:items-center skippr:gap-2", "skippr:rounded-[14px] skippr:bg-amber-50 skippr:py-1.5 skippr:pr-3 skippr:pl-1.5", "skippr:text-left skippr:shadow-[0_8px_24px_rgba(0,0,0,0.18)]", "skippr:transition-colors skippr:cursor-pointer skippr:hover:bg-amber-100", "skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-bubble/60"),
|
|
2927
3079
|
children: [
|
|
2928
|
-
/* @__PURE__ */
|
|
3080
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2929
3081
|
className: cn("skippr:flex skippr:h-6 skippr:w-6 skippr:shrink-0 skippr:items-center skippr:justify-center", "skippr:text-amber-700"),
|
|
2930
|
-
children: /* @__PURE__ */
|
|
3082
|
+
children: /* @__PURE__ */ jsx3(Lightbulb, {
|
|
2931
3083
|
className: "skippr:h-3.5 skippr:w-3.5",
|
|
2932
3084
|
fill: "currentColor"
|
|
2933
3085
|
})
|
|
2934
3086
|
}),
|
|
2935
|
-
/* @__PURE__ */
|
|
3087
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2936
3088
|
className: "skippr:min-w-0 skippr:truncate skippr:text-[13px] skippr:font-semibold skippr:text-amber-950",
|
|
2937
3089
|
children: goal.displayMessage
|
|
2938
3090
|
}),
|
|
2939
|
-
/* @__PURE__ */
|
|
3091
|
+
/* @__PURE__ */ jsx3(ArrowRight, {
|
|
2940
3092
|
className: "skippr:h-3.5 skippr:w-3.5 skippr:shrink-0 skippr:text-amber-700"
|
|
2941
3093
|
})
|
|
2942
3094
|
]
|
|
@@ -2945,12 +3097,12 @@ function AdoptionBubble({
|
|
|
2945
3097
|
}
|
|
2946
3098
|
|
|
2947
3099
|
// src/components/ModulePill.tsx
|
|
2948
|
-
import { jsx as
|
|
3100
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
2949
3101
|
var RING_RADIUS = 8;
|
|
2950
3102
|
var RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
|
|
2951
|
-
function ModulePill({ module, onSelect
|
|
2952
|
-
const completedPhases =
|
|
2953
|
-
const totalPhases =
|
|
3103
|
+
function ModulePill({ module, onSelect }) {
|
|
3104
|
+
const completedPhases = module.currentSession?.currentPhaseIndex ?? 0;
|
|
3105
|
+
const totalPhases = module.totalPhases;
|
|
2954
3106
|
const showProgress = module.mode !== AGENT_MODE.AlwaysOn && totalPhases > 0;
|
|
2955
3107
|
const progressFraction = showProgress ? Math.min(completedPhases / totalPhases, 1) : 0;
|
|
2956
3108
|
return /* @__PURE__ */ jsxs3("button", {
|
|
@@ -2958,16 +3110,12 @@ function ModulePill({ module, onSelect, progress, isLive = false, label }) {
|
|
|
2958
3110
|
onClick: () => onSelect(module.id),
|
|
2959
3111
|
className: cn("skippr:flex skippr:w-40 skippr:items-center skippr:gap-1.5 skippr:whitespace-nowrap", "skippr:rounded-[14px] skippr:bg-white skippr:px-3 skippr:py-1.5", "skippr:text-[13px] skippr:font-medium skippr:text-black", "skippr:shadow-[0_8px_24px_rgba(0,0,0,0.18)]", "skippr:transition-colors skippr:cursor-pointer skippr:hover:bg-neutral-100", "skippr:animate-[skippr-bubble-in_0.28s_ease-out]", "skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-bubble/60"),
|
|
2960
3112
|
children: [
|
|
2961
|
-
|
|
2962
|
-
"aria-hidden": "true",
|
|
2963
|
-
className: "skippr:size-[6px] skippr:shrink-0 skippr:rounded-full skippr:bg-emerald-500 skippr:animate-pulse skippr:motion-reduce:animate-none"
|
|
2964
|
-
}),
|
|
2965
|
-
showProgress && !isLive && /* @__PURE__ */ jsxs3("svg", {
|
|
3113
|
+
showProgress && /* @__PURE__ */ jsxs3("svg", {
|
|
2966
3114
|
viewBox: "0 0 20 20",
|
|
2967
3115
|
className: "skippr:size-4 skippr:shrink-0 skippr:-rotate-90",
|
|
2968
3116
|
"aria-hidden": "true",
|
|
2969
3117
|
children: [
|
|
2970
|
-
/* @__PURE__ */
|
|
3118
|
+
/* @__PURE__ */ jsx4("circle", {
|
|
2971
3119
|
cx: "10",
|
|
2972
3120
|
cy: "10",
|
|
2973
3121
|
r: RING_RADIUS,
|
|
@@ -2975,7 +3123,7 @@ function ModulePill({ module, onSelect, progress, isLive = false, label }) {
|
|
|
2975
3123
|
strokeWidth: "2.5",
|
|
2976
3124
|
className: "skippr:stroke-black/15"
|
|
2977
3125
|
}),
|
|
2978
|
-
/* @__PURE__ */
|
|
3126
|
+
/* @__PURE__ */ jsx4("circle", {
|
|
2979
3127
|
cx: "10",
|
|
2980
3128
|
cy: "10",
|
|
2981
3129
|
r: RING_RADIUS,
|
|
@@ -2988,9 +3136,9 @@ function ModulePill({ module, onSelect, progress, isLive = false, label }) {
|
|
|
2988
3136
|
})
|
|
2989
3137
|
]
|
|
2990
3138
|
}),
|
|
2991
|
-
/* @__PURE__ */
|
|
3139
|
+
/* @__PURE__ */ jsx4("span", {
|
|
2992
3140
|
className: "skippr:min-w-0 skippr:flex-1 skippr:truncate skippr:text-left",
|
|
2993
|
-
children:
|
|
3141
|
+
children: module.name
|
|
2994
3142
|
}),
|
|
2995
3143
|
showProgress && /* @__PURE__ */ jsxs3("span", {
|
|
2996
3144
|
className: cn("skippr:ml-0.5 skippr:inline-flex skippr:shrink-0 skippr:items-center skippr:gap-1 skippr:rounded-full", "skippr:bg-black/[0.07] skippr:px-1.5 skippr:py-0.5", "skippr:text-[10px] skippr:font-semibold"),
|
|
@@ -3005,29 +3153,86 @@ function ModulePill({ module, onSelect, progress, isLive = false, label }) {
|
|
|
3005
3153
|
}
|
|
3006
3154
|
|
|
3007
3155
|
// src/components/MinimizedBubble.tsx
|
|
3008
|
-
import { jsx as
|
|
3156
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
3009
3157
|
var GOALS_AUTO_HIDE_MS = 1e4;
|
|
3010
3158
|
var GOAL_FADE_OUT_MS = 300;
|
|
3011
3159
|
var GOAL_APPEAR_STAGGER_MS = 150;
|
|
3012
3160
|
var GOAL_EXIT_STAGGER_MS = 250;
|
|
3013
3161
|
var MAX_GOAL_BUBBLES = 3;
|
|
3014
3162
|
var MAX_MODULE_PILLS = 3;
|
|
3015
|
-
function
|
|
3016
|
-
return /* @__PURE__ */
|
|
3163
|
+
function SkipprMark({ onStart }) {
|
|
3164
|
+
return /* @__PURE__ */ jsx5("button", {
|
|
3017
3165
|
type: "button",
|
|
3018
|
-
onClick,
|
|
3166
|
+
onClick: onStart,
|
|
3019
3167
|
"aria-label": "Ask Me Anything",
|
|
3020
|
-
className:
|
|
3021
|
-
children: /* @__PURE__ */
|
|
3168
|
+
className: "skippr:flex skippr:h-[36px] skippr:w-[36px] skippr:shrink-0 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:bg-transparent skippr:p-0",
|
|
3169
|
+
children: /* @__PURE__ */ jsx5("svg", {
|
|
3022
3170
|
viewBox: "0 0 15.4044 18.4853",
|
|
3023
|
-
className:
|
|
3171
|
+
className: "skippr:h-[18.5px] skippr:w-[15.4px]",
|
|
3024
3172
|
fill: "none",
|
|
3025
3173
|
"aria-hidden": "true",
|
|
3026
|
-
children: /* @__PURE__ */
|
|
3174
|
+
children: /* @__PURE__ */ jsx5("path", {
|
|
3027
3175
|
d: "M2.25789 0.295419C1.33925 -0.413932 0 0.234459 0 1.38715V17.0972C0 18.4106 1.67407 18.987 2.49664 17.9562L6.40435 13.061C6.54853 12.8805 6.73209 12.7348 6.94126 12.6347C7.15043 12.5345 7.37978 12.4826 7.6121 12.4828H14.0025C15.3343 12.4828 15.9134 10.8128 14.8614 10.0037L2.25789 0.295419Z",
|
|
3028
3176
|
className: "skippr:fill-brand"
|
|
3029
3177
|
})
|
|
3030
|
-
})
|
|
3178
|
+
})
|
|
3179
|
+
});
|
|
3180
|
+
}
|
|
3181
|
+
function ChatButton({
|
|
3182
|
+
revealed,
|
|
3183
|
+
position,
|
|
3184
|
+
onClick
|
|
3185
|
+
}) {
|
|
3186
|
+
return /* @__PURE__ */ jsx5("button", {
|
|
3187
|
+
type: "button",
|
|
3188
|
+
onClick,
|
|
3189
|
+
"aria-label": "Open chat",
|
|
3190
|
+
tabIndex: revealed ? 0 : -1,
|
|
3191
|
+
className: cn("skippr:h-[36px] skippr:shrink-0 skippr:overflow-hidden skippr:p-0", "skippr:transition-all skippr:duration-[400ms] skippr:ease-[cubic-bezier(0.22,1,0.36,1)]", position === "right" ? "skippr:order-last" : "skippr:order-first"),
|
|
3192
|
+
style: {
|
|
3193
|
+
width: revealed ? 36 : 0,
|
|
3194
|
+
opacity: revealed ? 1 : 0,
|
|
3195
|
+
transform: revealed ? "scale(1)" : "scale(0.55)",
|
|
3196
|
+
cursor: revealed ? "pointer" : "default"
|
|
3197
|
+
},
|
|
3198
|
+
children: /* @__PURE__ */ jsx5("span", {
|
|
3199
|
+
className: "skippr:flex skippr:h-[36px] skippr:w-[36px] skippr:items-center skippr:justify-center skippr:rounded-[11px] skippr:bg-white",
|
|
3200
|
+
children: /* @__PURE__ */ jsx5("svg", {
|
|
3201
|
+
width: "18",
|
|
3202
|
+
height: "18",
|
|
3203
|
+
viewBox: "0 0 24 24",
|
|
3204
|
+
fill: "none",
|
|
3205
|
+
stroke: "#1c1f2a",
|
|
3206
|
+
strokeWidth: "2",
|
|
3207
|
+
strokeLinecap: "round",
|
|
3208
|
+
strokeLinejoin: "round",
|
|
3209
|
+
"aria-hidden": "true",
|
|
3210
|
+
children: /* @__PURE__ */ jsx5("path", {
|
|
3211
|
+
d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
|
|
3212
|
+
})
|
|
3213
|
+
})
|
|
3214
|
+
})
|
|
3215
|
+
});
|
|
3216
|
+
}
|
|
3217
|
+
function IdleLauncher({
|
|
3218
|
+
position,
|
|
3219
|
+
isHovered,
|
|
3220
|
+
onStart,
|
|
3221
|
+
onChat
|
|
3222
|
+
}) {
|
|
3223
|
+
return /* @__PURE__ */ jsxs4("div", {
|
|
3224
|
+
className: cn("skippr:flex skippr:h-[48px] skippr:items-center", "skippr:bg-launcher skippr:p-1.5 skippr:shadow-[-6px_8px_30px_rgba(15,18,26,0.32)]", "skippr:[animation:skippr-orb-in_320ms_cubic-bezier(0.34,1.3,0.64,1)]", "skippr:transition-transform skippr:duration-[400ms] skippr:ease-[cubic-bezier(0.22,1,0.36,1)]", position === "right" ? "skippr:rounded-l-[18px] skippr:origin-right" : "skippr:rounded-r-[18px] skippr:origin-left", position === "right" ? isHovered ? "skippr:translate-x-3" : "skippr:translate-x-7" : isHovered ? "skippr:-translate-x-3" : "skippr:-translate-x-7"),
|
|
3225
|
+
style: { gap: isHovered ? 8 : 0 },
|
|
3226
|
+
children: [
|
|
3227
|
+
/* @__PURE__ */ jsx5(ChatButton, {
|
|
3228
|
+
revealed: isHovered,
|
|
3229
|
+
position,
|
|
3230
|
+
onClick: onChat
|
|
3231
|
+
}),
|
|
3232
|
+
/* @__PURE__ */ jsx5(SkipprMark, {
|
|
3233
|
+
onStart
|
|
3234
|
+
})
|
|
3235
|
+
]
|
|
3031
3236
|
});
|
|
3032
3237
|
}
|
|
3033
3238
|
function WelcomeBubble({
|
|
@@ -3037,7 +3242,7 @@ function WelcomeBubble({
|
|
|
3037
3242
|
onDismiss,
|
|
3038
3243
|
onClick
|
|
3039
3244
|
}) {
|
|
3040
|
-
|
|
3245
|
+
useEffect14(() => {
|
|
3041
3246
|
const timer = setTimeout(onDismiss, 5000);
|
|
3042
3247
|
return () => clearTimeout(timer);
|
|
3043
3248
|
}, [onDismiss]);
|
|
@@ -3048,7 +3253,7 @@ function WelcomeBubble({
|
|
|
3048
3253
|
"aria-label": "Dismiss",
|
|
3049
3254
|
children: [
|
|
3050
3255
|
message,
|
|
3051
|
-
/* @__PURE__ */
|
|
3256
|
+
/* @__PURE__ */ jsx5("span", {
|
|
3052
3257
|
className: cn("skippr:absolute skippr:size-2.5", "skippr:border-l skippr:border-t skippr:border-border skippr:bg-card", popsDown ? "skippr:bottom-full skippr:rotate-45 skippr:-mb-[5px]" : "skippr:top-full skippr:rotate-[225deg] skippr:-mt-[5px]", position === "right" ? "skippr:right-5" : "skippr:left-5")
|
|
3053
3258
|
})
|
|
3054
3259
|
]
|
|
@@ -3059,7 +3264,7 @@ function MinimizedBubble({
|
|
|
3059
3264
|
welcomeDismissed,
|
|
3060
3265
|
onDismissWelcome
|
|
3061
3266
|
}) {
|
|
3062
|
-
const ctx =
|
|
3267
|
+
const ctx = useContext5(LiveAgentContext);
|
|
3063
3268
|
if (!ctx) {
|
|
3064
3269
|
throw new Error("MinimizedBubble must be used within a <LiveAgent> provider");
|
|
3065
3270
|
}
|
|
@@ -3072,19 +3277,22 @@ function MinimizedBubble({
|
|
|
3072
3277
|
startAdoptionSession,
|
|
3073
3278
|
isAuthenticated,
|
|
3074
3279
|
displayModules,
|
|
3280
|
+
defaultAgentId,
|
|
3281
|
+
startDefaultSession,
|
|
3075
3282
|
hasResolvedModules,
|
|
3076
3283
|
isLoadingModules,
|
|
3077
3284
|
selectModule,
|
|
3078
3285
|
expandPanel,
|
|
3286
|
+
setSidebarTab,
|
|
3079
3287
|
commitLauncherDrop
|
|
3080
3288
|
} = ctx;
|
|
3081
|
-
const [goalsAutoHidden, setGoalsAutoHidden] =
|
|
3082
|
-
const [isLauncherHovered, setIsLauncherHovered] =
|
|
3083
|
-
const [visitHref, setVisitHref] =
|
|
3289
|
+
const [goalsAutoHidden, setGoalsAutoHidden] = useState10(false);
|
|
3290
|
+
const [isLauncherHovered, setIsLauncherHovered] = useState10(false);
|
|
3291
|
+
const [visitHref, setVisitHref] = useState10(() => window.location.href);
|
|
3084
3292
|
const revealedHrefRef = useRef7(null);
|
|
3085
3293
|
const hoverContainerRef = useRef7(null);
|
|
3086
|
-
|
|
3087
|
-
|
|
3294
|
+
useEffect14(() => subscribeToLocationChange(() => setVisitHref(window.location.href)), []);
|
|
3295
|
+
useEffect14(() => {
|
|
3088
3296
|
const el = hoverContainerRef.current;
|
|
3089
3297
|
if (!el)
|
|
3090
3298
|
return;
|
|
@@ -3102,12 +3310,11 @@ function MinimizedBubble({
|
|
|
3102
3310
|
const state = getModuleSessionState(module.currentSession, module.mode);
|
|
3103
3311
|
return state !== "completed" && state !== "expired";
|
|
3104
3312
|
});
|
|
3105
|
-
const alwaysOnModule = actionableModules.find((module) => module.mode === AGENT_MODE.AlwaysOn);
|
|
3106
3313
|
const pillCandidates = actionableModules.filter((module) => module.mode !== AGENT_MODE.AlwaysOn);
|
|
3107
3314
|
const onboardingModule = pillCandidates.find((module) => module.type === "onboarding");
|
|
3108
3315
|
const modulePills = onboardingModule ? [onboardingModule] : pillCandidates.slice(0, MAX_MODULE_PILLS).reverse();
|
|
3109
3316
|
const goalsEligible = adoptionGoals.length > 0 && !onboardingModule && hasResolvedModules;
|
|
3110
|
-
|
|
3317
|
+
useEffect14(() => {
|
|
3111
3318
|
if (!goalsEligible)
|
|
3112
3319
|
return;
|
|
3113
3320
|
if (revealedHrefRef.current === visitHref) {
|
|
@@ -3121,8 +3328,8 @@ function MinimizedBubble({
|
|
|
3121
3328
|
}, [goalsEligible, visitHref]);
|
|
3122
3329
|
const matchedGoals = goalsEligible ? adoptionGoals.slice(0, MAX_GOAL_BUBBLES) : [];
|
|
3123
3330
|
const goalsHidden = goalsAutoHidden && !isLauncherHovered;
|
|
3124
|
-
const [goalsUnmounted, setGoalsUnmounted] =
|
|
3125
|
-
|
|
3331
|
+
const [goalsUnmounted, setGoalsUnmounted] = useState10(false);
|
|
3332
|
+
useEffect14(() => {
|
|
3126
3333
|
if (!goalsHidden) {
|
|
3127
3334
|
setGoalsUnmounted(false);
|
|
3128
3335
|
return;
|
|
@@ -3132,12 +3339,18 @@ function MinimizedBubble({
|
|
|
3132
3339
|
return () => clearTimeout(timer);
|
|
3133
3340
|
}, [goalsHidden]);
|
|
3134
3341
|
const visibleGoals = goalsUnmounted ? [] : matchedGoals;
|
|
3342
|
+
const openChat = (e) => {
|
|
3343
|
+
e.stopPropagation();
|
|
3344
|
+
if (wasDraggedRef.current)
|
|
3345
|
+
return;
|
|
3346
|
+
setSidebarTab("chat");
|
|
3347
|
+
expandPanel();
|
|
3348
|
+
};
|
|
3135
3349
|
const launchDefaultSession = () => {
|
|
3136
3350
|
if (wasDraggedRef.current || isStarting || isLoadingModules)
|
|
3137
3351
|
return;
|
|
3138
|
-
|
|
3139
|
-
|
|
3140
|
-
selectModule(target.id);
|
|
3352
|
+
if (isAuthenticated && defaultAgentId) {
|
|
3353
|
+
startDefaultSession();
|
|
3141
3354
|
} else {
|
|
3142
3355
|
expandPanel();
|
|
3143
3356
|
}
|
|
@@ -3150,7 +3363,7 @@ function MinimizedBubble({
|
|
|
3150
3363
|
(modulePills.length > 0 || visibleGoals.length > 0) && /* @__PURE__ */ jsxs4("div", {
|
|
3151
3364
|
className: cn("skippr:absolute skippr:gap-2", popsDown ? "skippr:top-full skippr:mt-3 skippr:flex skippr:flex-col-reverse" : "skippr:bottom-full skippr:mb-3 skippr:flex skippr:flex-col", position === "right" ? "skippr:right-0 skippr:items-end" : "skippr:left-0 skippr:items-start"),
|
|
3152
3365
|
children: [
|
|
3153
|
-
visibleGoals.map((goal, index2) => /* @__PURE__ */
|
|
3366
|
+
visibleGoals.map((goal, index2) => /* @__PURE__ */ jsx5(AdoptionBubble, {
|
|
3154
3367
|
goal,
|
|
3155
3368
|
onAttend: (attended) => {
|
|
3156
3369
|
if (!wasDraggedRef.current)
|
|
@@ -3160,7 +3373,7 @@ function MinimizedBubble({
|
|
|
3160
3373
|
exitDelayMs: (visibleGoals.length - 1 - index2) * GOAL_EXIT_STAGGER_MS,
|
|
3161
3374
|
hidden: goalsHidden
|
|
3162
3375
|
}, goal.goalId)),
|
|
3163
|
-
modulePills.map((module) => /* @__PURE__ */
|
|
3376
|
+
modulePills.map((module) => /* @__PURE__ */ jsx5(ModulePill, {
|
|
3164
3377
|
module,
|
|
3165
3378
|
onSelect: (id) => {
|
|
3166
3379
|
if (!wasDraggedRef.current)
|
|
@@ -3169,7 +3382,7 @@ function MinimizedBubble({
|
|
|
3169
3382
|
}, module.id))
|
|
3170
3383
|
]
|
|
3171
3384
|
}),
|
|
3172
|
-
welcomeMessage && !welcomeDismissed && adoptionGoals.length === 0 && modulePills.length === 0 && /* @__PURE__ */
|
|
3385
|
+
welcomeMessage && !welcomeDismissed && adoptionGoals.length === 0 && modulePills.length === 0 && /* @__PURE__ */ jsx5(WelcomeBubble, {
|
|
3173
3386
|
message: welcomeMessage,
|
|
3174
3387
|
position,
|
|
3175
3388
|
popsDown,
|
|
@@ -3179,9 +3392,11 @@ function MinimizedBubble({
|
|
|
3179
3392
|
onDismissWelcome();
|
|
3180
3393
|
}
|
|
3181
3394
|
}),
|
|
3182
|
-
/* @__PURE__ */
|
|
3395
|
+
/* @__PURE__ */ jsx5(IdleLauncher, {
|
|
3183
3396
|
position,
|
|
3184
|
-
|
|
3397
|
+
isHovered: isLauncherHovered,
|
|
3398
|
+
onStart: launchDefaultSession,
|
|
3399
|
+
onChat: openChat
|
|
3185
3400
|
})
|
|
3186
3401
|
]
|
|
3187
3402
|
});
|
|
@@ -3189,7 +3404,7 @@ function MinimizedBubble({
|
|
|
3189
3404
|
|
|
3190
3405
|
// src/components/PageActionHandler.tsx
|
|
3191
3406
|
import { useDataChannel as useDataChannel2 } from "@livekit/components-react/hooks";
|
|
3192
|
-
import { useCallback as
|
|
3407
|
+
import { useCallback as useCallback8, useEffect as useEffect15, useRef as useRef8 } from "react";
|
|
3193
3408
|
var STEP_MAX_WAIT_MS = 5000;
|
|
3194
3409
|
var POST_ACTION_SETTLE_SNAPSHOT_MS = 300;
|
|
3195
3410
|
var textDecoder2 = new TextDecoder;
|
|
@@ -3411,7 +3626,7 @@ function PageActionHandler() {
|
|
|
3411
3626
|
const drainingRef = useRef8(false);
|
|
3412
3627
|
const settleTimerRef = useRef8(null);
|
|
3413
3628
|
const endStepRef = useRef8(null);
|
|
3414
|
-
const runStep =
|
|
3629
|
+
const runStep = useCallback8((action) => {
|
|
3415
3630
|
return new Promise((resolve) => {
|
|
3416
3631
|
if (action.type === "scroll_page") {
|
|
3417
3632
|
let scrolled = false;
|
|
@@ -3480,7 +3695,7 @@ function PageActionHandler() {
|
|
|
3480
3695
|
});
|
|
3481
3696
|
});
|
|
3482
3697
|
}, []);
|
|
3483
|
-
const drain =
|
|
3698
|
+
const drain = useCallback8(async () => {
|
|
3484
3699
|
if (drainingRef.current)
|
|
3485
3700
|
return;
|
|
3486
3701
|
drainingRef.current = true;
|
|
@@ -3511,14 +3726,14 @@ function PageActionHandler() {
|
|
|
3511
3726
|
}
|
|
3512
3727
|
}
|
|
3513
3728
|
}, [runStep]);
|
|
3514
|
-
const onMessage =
|
|
3729
|
+
const onMessage = useCallback8((msg) => {
|
|
3515
3730
|
const action = parsePageAction(msg.payload);
|
|
3516
3731
|
if (!action)
|
|
3517
3732
|
return;
|
|
3518
3733
|
queueRef.current.push(action);
|
|
3519
3734
|
drain();
|
|
3520
3735
|
}, [drain]);
|
|
3521
|
-
|
|
3736
|
+
useEffect15(() => {
|
|
3522
3737
|
mountedRef.current = true;
|
|
3523
3738
|
drainingRef.current = false;
|
|
3524
3739
|
return () => {
|
|
@@ -3530,7 +3745,7 @@ function PageActionHandler() {
|
|
|
3530
3745
|
setActionsBusy(false);
|
|
3531
3746
|
};
|
|
3532
3747
|
}, []);
|
|
3533
|
-
|
|
3748
|
+
useEffect15(() => {
|
|
3534
3749
|
return onActionsPausedChange((paused) => {
|
|
3535
3750
|
if (paused) {
|
|
3536
3751
|
clearCursorTarget("act");
|
|
@@ -3549,22 +3764,22 @@ function PageActionHandler() {
|
|
|
3549
3764
|
import { useContext as useContext6, useEffect as useEffect18 } from "react";
|
|
3550
3765
|
|
|
3551
3766
|
// src/hooks/useActionControl.ts
|
|
3552
|
-
import { useLocalParticipant as
|
|
3553
|
-
import { useCallback as
|
|
3554
|
-
var
|
|
3767
|
+
import { useLocalParticipant as useLocalParticipant4 } from "@livekit/components-react/hooks";
|
|
3768
|
+
import { useCallback as useCallback9, useEffect as useEffect16, useState as useState11 } from "react";
|
|
3769
|
+
var textEncoder4 = new TextEncoder;
|
|
3555
3770
|
function useActionControl() {
|
|
3556
|
-
const { localParticipant } =
|
|
3771
|
+
const { localParticipant } = useLocalParticipant4();
|
|
3557
3772
|
const plan = usePlanUpdates();
|
|
3558
|
-
const [busy, setBusy] =
|
|
3559
|
-
const [actionsPaused2, setPaused] =
|
|
3560
|
-
|
|
3773
|
+
const [busy, setBusy] = useState11(isActionsBusy);
|
|
3774
|
+
const [actionsPaused2, setPaused] = useState11(false);
|
|
3775
|
+
useEffect16(() => subscribeActionsBusy(setBusy), []);
|
|
3561
3776
|
const actionsActive = busy || plan?.state === "executing";
|
|
3562
|
-
const togglePaused =
|
|
3777
|
+
const togglePaused = useCallback9(async () => {
|
|
3563
3778
|
const next = !actionsPaused2;
|
|
3564
3779
|
setPaused(next);
|
|
3565
3780
|
setActionsPaused(next);
|
|
3566
3781
|
try {
|
|
3567
|
-
await localParticipant.publishData(
|
|
3782
|
+
await localParticipant.publishData(textEncoder4.encode(JSON.stringify({ type: next ? "pause" : "resume" })), { reliable: true, topic: ACTION_CONTROL_TOPIC });
|
|
3568
3783
|
} catch (error) {
|
|
3569
3784
|
console.error("Failed to send action pause/resume:", error);
|
|
3570
3785
|
}
|
|
@@ -3585,13 +3800,13 @@ function useAgentVoiceState() {
|
|
|
3585
3800
|
}
|
|
3586
3801
|
|
|
3587
3802
|
// src/hooks/useAudioLevelBars.ts
|
|
3588
|
-
import { useEffect as
|
|
3803
|
+
import { useEffect as useEffect17, useRef as useRef9, useState as useState12 } from "react";
|
|
3589
3804
|
var TALKING_LEVEL_THRESHOLD = 0.2;
|
|
3590
3805
|
var TALKING_HOLD_MS = 400;
|
|
3591
3806
|
function useAudioLevelBars(mediaStreamTrack, { barCount, idleHeightPx, maxGrowthPx, noiseGate }) {
|
|
3592
3807
|
const barRefs = useRef9([]);
|
|
3593
|
-
const [isTalking, setIsTalking] =
|
|
3594
|
-
|
|
3808
|
+
const [isTalking, setIsTalking] = useState12(false);
|
|
3809
|
+
useEffect17(() => {
|
|
3595
3810
|
if (!mediaStreamTrack) {
|
|
3596
3811
|
for (const bar of barRefs.current) {
|
|
3597
3812
|
if (bar)
|
|
@@ -3642,26 +3857,26 @@ function useAudioLevelBars(mediaStreamTrack, { barCount, idleHeightPx, maxGrowth
|
|
|
3642
3857
|
}
|
|
3643
3858
|
|
|
3644
3859
|
// src/hooks/useMediaControls.ts
|
|
3645
|
-
import { useLocalParticipant as
|
|
3860
|
+
import { useLocalParticipant as useLocalParticipant5 } from "@livekit/components-react/hooks";
|
|
3646
3861
|
import { ScreenSharePresets as ScreenSharePresets2 } from "livekit-client";
|
|
3647
|
-
import { useCallback as
|
|
3862
|
+
import { useCallback as useCallback10 } from "react";
|
|
3648
3863
|
var SCREEN_SHARE_OPTIONS = {
|
|
3649
3864
|
video: { displaySurface: "browser" },
|
|
3650
3865
|
resolution: ScreenSharePresets2.h720fps30.resolution,
|
|
3651
3866
|
contentHint: "detail"
|
|
3652
3867
|
};
|
|
3653
3868
|
function useMediaControls() {
|
|
3654
|
-
const { localParticipant } =
|
|
3869
|
+
const { localParticipant } = useLocalParticipant5();
|
|
3655
3870
|
const isMuted = !localParticipant.isMicrophoneEnabled;
|
|
3656
3871
|
const isScreenSharing = localParticipant.isScreenShareEnabled;
|
|
3657
|
-
const toggleMute =
|
|
3872
|
+
const toggleMute = useCallback10(async () => {
|
|
3658
3873
|
try {
|
|
3659
3874
|
await localParticipant.setMicrophoneEnabled(isMuted);
|
|
3660
3875
|
} catch (error) {
|
|
3661
3876
|
console.error("Failed to toggle microphone:", error);
|
|
3662
3877
|
}
|
|
3663
3878
|
}, [localParticipant, isMuted]);
|
|
3664
|
-
const toggleScreenShare =
|
|
3879
|
+
const toggleScreenShare = useCallback10(async () => {
|
|
3665
3880
|
try {
|
|
3666
3881
|
await localParticipant.setScreenShareEnabled(!isScreenSharing, SCREEN_SHARE_OPTIONS);
|
|
3667
3882
|
} catch (error) {
|
|
@@ -3672,13 +3887,13 @@ function useMediaControls() {
|
|
|
3672
3887
|
}
|
|
3673
3888
|
|
|
3674
3889
|
// src/hooks/useMicLevel.ts
|
|
3675
|
-
import { useLocalParticipant as
|
|
3890
|
+
import { useLocalParticipant as useLocalParticipant6 } from "@livekit/components-react/hooks";
|
|
3676
3891
|
var MIC_BARS = 5;
|
|
3677
3892
|
var IDLE_BAR_HEIGHT_PX = 5;
|
|
3678
3893
|
var MAX_BAR_GROWTH_PX = 17;
|
|
3679
3894
|
var MIC_NOISE_GATE = 0.15;
|
|
3680
3895
|
function useMicLevel(enabled) {
|
|
3681
|
-
const { microphoneTrack } =
|
|
3896
|
+
const { microphoneTrack } = useLocalParticipant6();
|
|
3682
3897
|
const mediaStreamTrack = microphoneTrack?.track?.mediaStreamTrack;
|
|
3683
3898
|
return useAudioLevelBars(enabled ? mediaStreamTrack : undefined, {
|
|
3684
3899
|
barCount: MIC_BARS,
|
|
@@ -3688,92 +3903,6 @@ function useMicLevel(enabled) {
|
|
|
3688
3903
|
});
|
|
3689
3904
|
}
|
|
3690
3905
|
|
|
3691
|
-
// src/hooks/usePhaseUpdates.ts
|
|
3692
|
-
import { useCallback as useCallback10, useContext as useContext5, useEffect as useEffect16 } from "react";
|
|
3693
|
-
function parsePhases(json) {
|
|
3694
|
-
try {
|
|
3695
|
-
const data = JSON.parse(json);
|
|
3696
|
-
if (data.type === "phase_update" && Array.isArray(data.phases)) {
|
|
3697
|
-
return data.phases;
|
|
3698
|
-
}
|
|
3699
|
-
} catch {}
|
|
3700
|
-
return null;
|
|
3701
|
-
}
|
|
3702
|
-
function usePhaseUpdates() {
|
|
3703
|
-
const parse = useCallback10(parsePhases, []);
|
|
3704
|
-
const livePhases = useAgentState("phases", parse, []);
|
|
3705
|
-
const ctx = useContext5(LiveAgentContext);
|
|
3706
|
-
useEffect16(() => {
|
|
3707
|
-
if (livePhases.length > 0)
|
|
3708
|
-
ctx?.setPhasesSnapshot(livePhases);
|
|
3709
|
-
}, [livePhases, ctx?.setPhasesSnapshot]);
|
|
3710
|
-
const phases = livePhases.length > 0 ? livePhases : ctx?.phasesSnapshot ?? [];
|
|
3711
|
-
return { phases };
|
|
3712
|
-
}
|
|
3713
|
-
|
|
3714
|
-
// src/hooks/useSessionHold.ts
|
|
3715
|
-
import { useLocalParticipant as useLocalParticipant6 } from "@livekit/components-react/hooks";
|
|
3716
|
-
import { useCallback as useCallback11, useEffect as useEffect17, useState as useState11 } from "react";
|
|
3717
|
-
var textEncoder4 = new TextEncoder;
|
|
3718
|
-
var FALLBACK_PAUSE_TIMEOUT_SECONDS = 120;
|
|
3719
|
-
function useSessionHold({
|
|
3720
|
-
pauseSession,
|
|
3721
|
-
pauseTimeoutSeconds
|
|
3722
|
-
}) {
|
|
3723
|
-
const { localParticipant } = useLocalParticipant6();
|
|
3724
|
-
const timeoutSeconds = pauseTimeoutSeconds ?? FALLBACK_PAUSE_TIMEOUT_SECONDS;
|
|
3725
|
-
const [isHeld, setIsHeld] = useState11(false);
|
|
3726
|
-
const [countdown, setCountdown] = useState11(timeoutSeconds);
|
|
3727
|
-
const publish = useCallback11(async (type) => {
|
|
3728
|
-
await localParticipant.publishData(textEncoder4.encode(JSON.stringify({ type })), {
|
|
3729
|
-
reliable: true,
|
|
3730
|
-
topic: SESSION_HOLD_TOPIC
|
|
3731
|
-
});
|
|
3732
|
-
}, [localParticipant]);
|
|
3733
|
-
const hold = useCallback11(async () => {
|
|
3734
|
-
try {
|
|
3735
|
-
await localParticipant.setMicrophoneEnabled(false);
|
|
3736
|
-
await publish("pause");
|
|
3737
|
-
setIsHeld(true);
|
|
3738
|
-
} catch (error) {
|
|
3739
|
-
console.error("Failed to hold session:", error);
|
|
3740
|
-
}
|
|
3741
|
-
}, [localParticipant, publish]);
|
|
3742
|
-
const release = useCallback11(async () => {
|
|
3743
|
-
try {
|
|
3744
|
-
await localParticipant.setMicrophoneEnabled(true);
|
|
3745
|
-
await publish("resume");
|
|
3746
|
-
setIsHeld(false);
|
|
3747
|
-
} catch (error) {
|
|
3748
|
-
console.error("Failed to release session:", error);
|
|
3749
|
-
}
|
|
3750
|
-
}, [localParticipant, publish]);
|
|
3751
|
-
useEffect17(() => {
|
|
3752
|
-
if (!isHeld) {
|
|
3753
|
-
setCountdown(timeoutSeconds);
|
|
3754
|
-
return;
|
|
3755
|
-
}
|
|
3756
|
-
const id = setInterval(() => {
|
|
3757
|
-
setCountdown((seconds) => Math.max(0, seconds - 1));
|
|
3758
|
-
}, 1000);
|
|
3759
|
-
return () => clearInterval(id);
|
|
3760
|
-
}, [isHeld, timeoutSeconds]);
|
|
3761
|
-
useEffect17(() => {
|
|
3762
|
-
if (isHeld && countdown === 0) {
|
|
3763
|
-
setIsHeld(false);
|
|
3764
|
-
pauseSession();
|
|
3765
|
-
}
|
|
3766
|
-
}, [isHeld, countdown, pauseSession]);
|
|
3767
|
-
const toggle = useCallback11(() => {
|
|
3768
|
-
if (isHeld) {
|
|
3769
|
-
release();
|
|
3770
|
-
} else {
|
|
3771
|
-
hold();
|
|
3772
|
-
}
|
|
3773
|
-
}, [isHeld, hold, release]);
|
|
3774
|
-
return { isHeld, countdown, toggle };
|
|
3775
|
-
}
|
|
3776
|
-
|
|
3777
3906
|
// src/components/PausedCountdown.tsx
|
|
3778
3907
|
import { jsxs as jsxs5 } from "react/jsx-runtime";
|
|
3779
3908
|
function PausedCountdown({ secondsRemaining }) {
|
|
@@ -3798,10 +3927,10 @@ function PausedCountdown({ secondsRemaining }) {
|
|
|
3798
3927
|
}
|
|
3799
3928
|
|
|
3800
3929
|
// src/components/SessionControlBar.tsx
|
|
3801
|
-
import { jsx as
|
|
3930
|
+
import { jsx as jsx6, jsxs as jsxs6, Fragment } from "react/jsx-runtime";
|
|
3802
3931
|
var STANDBY_BAR_WIDTH = 168;
|
|
3803
3932
|
var READY_BAR_WIDTH = 238;
|
|
3804
|
-
var PAUSED_BAR_WIDTH =
|
|
3933
|
+
var PAUSED_BAR_WIDTH = 248;
|
|
3805
3934
|
var TEXT_BAR_WIDTH = 100;
|
|
3806
3935
|
var SCREEN_SHARE_EXTRA_WIDTH = 46;
|
|
3807
3936
|
var ACTION_CONTROL_EXTRA_WIDTH = 46;
|
|
@@ -3836,16 +3965,16 @@ function AgentActivity({
|
|
|
3836
3965
|
className: "skippr:flex skippr:items-center skippr:gap-1.5 skippr:text-bubble",
|
|
3837
3966
|
"aria-label": isActing ? "Agent is acting" : `Agent is ${state}`,
|
|
3838
3967
|
children: [
|
|
3839
|
-
/* @__PURE__ */
|
|
3968
|
+
/* @__PURE__ */ jsx6("span", {
|
|
3840
3969
|
className: "skippr:flex skippr:size-5 skippr:shrink-0 skippr:items-center skippr:justify-center",
|
|
3841
|
-
children: isActing ? /* @__PURE__ */
|
|
3970
|
+
children: isActing ? /* @__PURE__ */ jsx6(MousePointerClick, {
|
|
3842
3971
|
strokeWidth: 2,
|
|
3843
3972
|
className: "skippr:size-5 skippr:[animation:skippr-finger-tap_1.1s_ease-in-out_infinite]"
|
|
3844
3973
|
}) : /* @__PURE__ */ jsxs6(Fragment, {
|
|
3845
3974
|
children: [
|
|
3846
|
-
state === "speaking" && /* @__PURE__ */
|
|
3975
|
+
state === "speaking" && /* @__PURE__ */ jsx6("span", {
|
|
3847
3976
|
className: "skippr:flex skippr:h-5 skippr:items-center skippr:gap-[2px]",
|
|
3848
|
-
children: Array.from({ length: AGENT_BARS }).map((_, index2) => /* @__PURE__ */
|
|
3977
|
+
children: Array.from({ length: AGENT_BARS }).map((_, index2) => /* @__PURE__ */ jsx6("span", {
|
|
3849
3978
|
ref: (el) => {
|
|
3850
3979
|
barRefs.current[index2] = el;
|
|
3851
3980
|
},
|
|
@@ -3856,13 +3985,13 @@ function AgentActivity({
|
|
|
3856
3985
|
state === "thinking" && /* @__PURE__ */ jsxs6("span", {
|
|
3857
3986
|
className: "skippr:flex skippr:items-center skippr:gap-[3px]",
|
|
3858
3987
|
children: [
|
|
3859
|
-
/* @__PURE__ */
|
|
3988
|
+
/* @__PURE__ */ jsx6("span", {
|
|
3860
3989
|
className: "skippr:size-[5px] skippr:rounded-full skippr:bg-current skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
3861
3990
|
}),
|
|
3862
|
-
/* @__PURE__ */
|
|
3991
|
+
/* @__PURE__ */ jsx6("span", {
|
|
3863
3992
|
className: "skippr:size-[5px] skippr:rounded-full skippr:bg-current skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
3864
3993
|
}),
|
|
3865
|
-
/* @__PURE__ */
|
|
3994
|
+
/* @__PURE__ */ jsx6("span", {
|
|
3866
3995
|
className: "skippr:size-[5px] skippr:rounded-full skippr:bg-current skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
3867
3996
|
})
|
|
3868
3997
|
]
|
|
@@ -3877,10 +4006,10 @@ function AgentActivity({
|
|
|
3877
4006
|
strokeLinejoin: "round",
|
|
3878
4007
|
"aria-hidden": "true",
|
|
3879
4008
|
children: [
|
|
3880
|
-
/* @__PURE__ */
|
|
4009
|
+
/* @__PURE__ */ jsx6("path", {
|
|
3881
4010
|
d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
|
|
3882
4011
|
}),
|
|
3883
|
-
/* @__PURE__ */
|
|
4012
|
+
/* @__PURE__ */ jsx6("circle", {
|
|
3884
4013
|
cx: "12",
|
|
3885
4014
|
cy: "12",
|
|
3886
4015
|
r: "2.5",
|
|
@@ -3893,7 +4022,7 @@ function AgentActivity({
|
|
|
3893
4022
|
]
|
|
3894
4023
|
})
|
|
3895
4024
|
}),
|
|
3896
|
-
/* @__PURE__ */
|
|
4025
|
+
/* @__PURE__ */ jsx6("span", {
|
|
3897
4026
|
className: "skippr:text-[11px] skippr:font-medium skippr:capitalize",
|
|
3898
4027
|
children: label
|
|
3899
4028
|
})
|
|
@@ -3920,11 +4049,9 @@ function SessionControlBar() {
|
|
|
3920
4049
|
const {
|
|
3921
4050
|
textMode,
|
|
3922
4051
|
launcherBottomPx,
|
|
3923
|
-
popsDown,
|
|
3924
4052
|
controlBarRef,
|
|
3925
4053
|
commitLauncherDrop,
|
|
3926
4054
|
panelRef,
|
|
3927
|
-
pauseTimeoutSeconds,
|
|
3928
4055
|
isDragging,
|
|
3929
4056
|
setIsDragging
|
|
3930
4057
|
} = internalCtx;
|
|
@@ -3933,16 +4060,8 @@ function SessionControlBar() {
|
|
|
3933
4060
|
const { wasDraggedRef } = useLauncherDrag(controlBarRef, commitLauncherDrop, panelFollowers, setIsDragging);
|
|
3934
4061
|
const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
|
|
3935
4062
|
const { state, mediaStreamTrack: agentMediaStreamTrack } = useAgentVoiceState();
|
|
3936
|
-
const { phases } = usePhaseUpdates();
|
|
3937
4063
|
const { actionsActive, actionsPaused: actionsPaused2, togglePaused } = useActionControl();
|
|
3938
|
-
const {
|
|
3939
|
-
isHeld,
|
|
3940
|
-
countdown,
|
|
3941
|
-
toggle: togglePause
|
|
3942
|
-
} = useSessionHold({
|
|
3943
|
-
pauseSession,
|
|
3944
|
-
pauseTimeoutSeconds
|
|
3945
|
-
});
|
|
4064
|
+
const { isHeld, countdown, toggle: togglePause } = useSessionHoldContext();
|
|
3946
4065
|
useEffect18(() => {
|
|
3947
4066
|
if (isHeld)
|
|
3948
4067
|
minimizePanel();
|
|
@@ -3964,18 +4083,6 @@ function SessionControlBar() {
|
|
|
3964
4083
|
}
|
|
3965
4084
|
}
|
|
3966
4085
|
const agendaModule = activeModule && activeModule.mode !== AGENT_MODE.AlwaysOn && activeModule.totalPhases > 0 ? activeModule : null;
|
|
3967
|
-
const agendaProgress = phases.length > 0 ? {
|
|
3968
|
-
completed: phases.filter((phase) => phase.status === "completed").length,
|
|
3969
|
-
total: phases.length
|
|
3970
|
-
} : agendaModule ? {
|
|
3971
|
-
completed: agendaModule.currentSession?.currentPhaseIndex ?? 0,
|
|
3972
|
-
total: agendaModule.totalPhases
|
|
3973
|
-
} : null;
|
|
3974
|
-
const currentPhaseName = phases.find((phase) => phase.status === "active")?.name ?? phases.find((phase) => phase.status === "pending")?.name;
|
|
3975
|
-
const openAgenda = () => {
|
|
3976
|
-
setSidebarTab("agenda");
|
|
3977
|
-
expandPanel();
|
|
3978
|
-
};
|
|
3979
4086
|
const togglePanel = () => {
|
|
3980
4087
|
if (isPanelOpen) {
|
|
3981
4088
|
minimizePanel();
|
|
@@ -3989,21 +4096,20 @@ function SessionControlBar() {
|
|
|
3989
4096
|
return;
|
|
3990
4097
|
action();
|
|
3991
4098
|
};
|
|
4099
|
+
const panelToggleButton = /* @__PURE__ */ jsx6("button", {
|
|
4100
|
+
type: "button",
|
|
4101
|
+
onClick: ifNotDragged(togglePanel),
|
|
4102
|
+
"aria-label": isPanelOpen ? "Close panel" : agendaModule && !textMode ? "Open agenda" : "Open chat",
|
|
4103
|
+
className: cn(SQUARE_BUTTON, "skippr:text-neutral-700", textMode ? "skippr:hover:bg-neutral-100" : "skippr:bg-neutral-100 skippr:hover:bg-neutral-200"),
|
|
4104
|
+
children: /* @__PURE__ */ jsx6(MessageSquare, {
|
|
4105
|
+
className: "skippr:size-5"
|
|
4106
|
+
})
|
|
4107
|
+
});
|
|
3992
4108
|
return /* @__PURE__ */ jsxs6("div", {
|
|
3993
4109
|
ref: controlBarRef,
|
|
3994
4110
|
style: { bottom: launcherBottomPx },
|
|
3995
4111
|
className: cn("skippr:fixed skippr:z-[9999] skippr:touch-none skippr:cursor-grab", position === "right" ? "skippr:right-3" : "skippr:left-3"),
|
|
3996
4112
|
children: [
|
|
3997
|
-
!isPanelOpen && agendaModule && agendaProgress && /* @__PURE__ */ jsx5("div", {
|
|
3998
|
-
className: cn("skippr:absolute", popsDown ? "skippr:top-full skippr:mt-3" : "skippr:bottom-full skippr:mb-3", isReady ? position === "right" ? "skippr:right-7" : "skippr:left-7" : position === "right" ? "skippr:right-0" : "skippr:left-0"),
|
|
3999
|
-
children: /* @__PURE__ */ jsx5(ModulePill, {
|
|
4000
|
-
module: agendaModule,
|
|
4001
|
-
onSelect: ifNotDragged(openAgenda),
|
|
4002
|
-
progress: agendaProgress,
|
|
4003
|
-
label: currentPhaseName ?? agendaModule.name,
|
|
4004
|
-
isLive: true
|
|
4005
|
-
})
|
|
4006
|
-
}),
|
|
4007
4113
|
/* @__PURE__ */ jsxs6("div", {
|
|
4008
4114
|
style: { width: barWidth },
|
|
4009
4115
|
className: cn("skippr:group skippr:relative skippr:flex skippr:h-[54px] skippr:items-center skippr:justify-center skippr:gap-2", "skippr:rounded-[20px] skippr:bg-white skippr:p-2", "skippr:shadow-[0_10px_32px_rgba(0,0,0,0.18)] skippr:ring-1 skippr:ring-black/5", "skippr:transition-[width,margin] skippr:duration-300 skippr:ease-out", "skippr:[animation:skippr-toolset-pop_440ms_cubic-bezier(0.22,1,0.36,1)]", isReady && (position === "right" ? "skippr:mr-7" : "skippr:ml-7")),
|
|
@@ -4014,18 +4120,18 @@ function SessionControlBar() {
|
|
|
4014
4120
|
/* @__PURE__ */ jsxs6("span", {
|
|
4015
4121
|
className: "skippr:flex skippr:items-center skippr:gap-[3px]",
|
|
4016
4122
|
children: [
|
|
4017
|
-
/* @__PURE__ */
|
|
4123
|
+
/* @__PURE__ */ jsx6("span", {
|
|
4018
4124
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-bubble skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
4019
4125
|
}),
|
|
4020
|
-
/* @__PURE__ */
|
|
4126
|
+
/* @__PURE__ */ jsx6("span", {
|
|
4021
4127
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-bubble skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
4022
4128
|
}),
|
|
4023
|
-
/* @__PURE__ */
|
|
4129
|
+
/* @__PURE__ */ jsx6("span", {
|
|
4024
4130
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-bubble skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
4025
4131
|
})
|
|
4026
4132
|
]
|
|
4027
4133
|
}),
|
|
4028
|
-
/* @__PURE__ */
|
|
4134
|
+
/* @__PURE__ */ jsx6("span", {
|
|
4029
4135
|
children: "Standing by…"
|
|
4030
4136
|
})
|
|
4031
4137
|
]
|
|
@@ -4033,32 +4139,37 @@ function SessionControlBar() {
|
|
|
4033
4139
|
isReady && /* @__PURE__ */ jsxs6("div", {
|
|
4034
4140
|
className: cn("skippr:flex skippr:items-center skippr:gap-2 skippr:[animation:skippr-stage-fade_240ms_ease-out]", isHeld && "skippr:w-full skippr:justify-start"),
|
|
4035
4141
|
children: [
|
|
4036
|
-
/* @__PURE__ */
|
|
4142
|
+
/* @__PURE__ */ jsx6("button", {
|
|
4037
4143
|
type: "button",
|
|
4038
4144
|
onClick: ifNotDragged(togglePause),
|
|
4039
4145
|
"aria-label": isHeld ? "Resume" : "Pause",
|
|
4040
4146
|
title: isHeld ? "Resume" : "Pause",
|
|
4041
4147
|
className: cn(SQUARE_BUTTON, isHeld ? "skippr:bg-bubble skippr:text-white skippr:hover:bg-[#3a384b]" : "skippr:bg-neutral-100 skippr:text-neutral-700 skippr:hover:bg-neutral-200"),
|
|
4042
|
-
children: isHeld ? /* @__PURE__ */
|
|
4148
|
+
children: isHeld ? /* @__PURE__ */ jsx6(Play, {
|
|
4043
4149
|
className: "skippr:size-5",
|
|
4044
4150
|
fill: "currentColor"
|
|
4045
|
-
}) : /* @__PURE__ */
|
|
4151
|
+
}) : /* @__PURE__ */ jsx6(Pause, {
|
|
4046
4152
|
className: "skippr:size-5",
|
|
4047
4153
|
fill: "currentColor"
|
|
4048
4154
|
})
|
|
4049
4155
|
}),
|
|
4050
|
-
isHeld ? /* @__PURE__ */
|
|
4051
|
-
|
|
4156
|
+
isHeld ? /* @__PURE__ */ jsxs6(Fragment, {
|
|
4157
|
+
children: [
|
|
4158
|
+
/* @__PURE__ */ jsx6(PausedCountdown, {
|
|
4159
|
+
secondsRemaining: countdown
|
|
4160
|
+
}),
|
|
4161
|
+
panelToggleButton
|
|
4162
|
+
]
|
|
4052
4163
|
}) : /* @__PURE__ */ jsxs6(Fragment, {
|
|
4053
4164
|
children: [
|
|
4054
4165
|
!textMode && /* @__PURE__ */ jsxs6("div", {
|
|
4055
4166
|
className: "skippr:relative skippr:h-[38px]",
|
|
4056
4167
|
style: { width: MIC_REGION_WIDTH },
|
|
4057
4168
|
children: [
|
|
4058
|
-
!isTalking && /* @__PURE__ */
|
|
4169
|
+
!isTalking && /* @__PURE__ */ jsx6("span", {
|
|
4059
4170
|
className: "skippr:absolute skippr:inset-y-0 skippr:right-0 skippr:flex skippr:items-center skippr:justify-center skippr:[animation:skippr-agent-in_200ms_ease-out_240ms_both]",
|
|
4060
4171
|
style: { width: AGENT_ACTIVITY_WIDTH },
|
|
4061
|
-
children: /* @__PURE__ */
|
|
4172
|
+
children: /* @__PURE__ */ jsx6(AgentActivity, {
|
|
4062
4173
|
state,
|
|
4063
4174
|
isActing: showActionControl && !actionsPaused2,
|
|
4064
4175
|
mediaStreamTrack: agentMediaStreamTrack
|
|
@@ -4071,17 +4182,17 @@ function SessionControlBar() {
|
|
|
4071
4182
|
className: cn("skippr:group skippr:absolute skippr:top-0 skippr:left-0 skippr:z-10 skippr:flex skippr:h-[38px] skippr:items-center skippr:gap-2.5 skippr:overflow-hidden skippr:rounded-[12px] skippr:bg-bubble skippr:text-white skippr:cursor-pointer skippr:transition-[width] skippr:duration-300 skippr:ease-out", isTalking ? "skippr:justify-start skippr:pl-3.5" : "skippr:justify-center"),
|
|
4072
4183
|
style: { width: isTalking ? MIC_REGION_WIDTH : MIC_SQUARE_WIDTH },
|
|
4073
4184
|
children: [
|
|
4074
|
-
/* @__PURE__ */
|
|
4185
|
+
/* @__PURE__ */ jsx6("span", {
|
|
4075
4186
|
className: cn("skippr:flex skippr:shrink-0 skippr:items-center skippr:justify-center skippr:transition-colors", isMuted ? "skippr:text-red-400 skippr:group-hover:text-red-300" : "skippr:text-white skippr:group-hover:text-white/80"),
|
|
4076
|
-
children: isMuted ? /* @__PURE__ */
|
|
4187
|
+
children: isMuted ? /* @__PURE__ */ jsx6(MicOff, {
|
|
4077
4188
|
className: "skippr:size-5"
|
|
4078
|
-
}) : /* @__PURE__ */
|
|
4189
|
+
}) : /* @__PURE__ */ jsx6(Mic, {
|
|
4079
4190
|
className: "skippr:size-5"
|
|
4080
4191
|
})
|
|
4081
4192
|
}),
|
|
4082
|
-
/* @__PURE__ */
|
|
4193
|
+
/* @__PURE__ */ jsx6("span", {
|
|
4083
4194
|
className: cn("skippr:h-6 skippr:flex-1 skippr:items-center skippr:justify-center skippr:gap-[3px] skippr:transition-opacity skippr:duration-200", isTalking ? "skippr:flex skippr:opacity-100" : "skippr:hidden"),
|
|
4084
|
-
children: Array.from({ length: MIC_BARS }).map((_, index2) => /* @__PURE__ */
|
|
4195
|
+
children: Array.from({ length: MIC_BARS }).map((_, index2) => /* @__PURE__ */ jsx6("span", {
|
|
4085
4196
|
ref: (el) => {
|
|
4086
4197
|
barRefs.current[index2] = el;
|
|
4087
4198
|
},
|
|
@@ -4093,36 +4204,28 @@ function SessionControlBar() {
|
|
|
4093
4204
|
})
|
|
4094
4205
|
]
|
|
4095
4206
|
}),
|
|
4096
|
-
showScreenShareToggle && /* @__PURE__ */
|
|
4207
|
+
showScreenShareToggle && /* @__PURE__ */ jsx6("button", {
|
|
4097
4208
|
type: "button",
|
|
4098
4209
|
onClick: ifNotDragged(() => void toggleScreenShare()),
|
|
4099
4210
|
"aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
|
|
4100
4211
|
className: cn(SQUARE_BUTTON, isScreenSharing ? "skippr:bg-bubble skippr:text-white skippr:hover:bg-[#3a384b]" : "skippr:bg-neutral-100 skippr:text-neutral-700 skippr:hover:bg-neutral-200"),
|
|
4101
|
-
children: isScreenSharing ? /* @__PURE__ */
|
|
4212
|
+
children: isScreenSharing ? /* @__PURE__ */ jsx6(MonitorOff, {
|
|
4102
4213
|
className: "skippr:size-5"
|
|
4103
|
-
}) : /* @__PURE__ */
|
|
4104
|
-
className: "skippr:size-5"
|
|
4105
|
-
})
|
|
4106
|
-
}),
|
|
4107
|
-
/* @__PURE__ */ jsx5("button", {
|
|
4108
|
-
type: "button",
|
|
4109
|
-
onClick: ifNotDragged(togglePanel),
|
|
4110
|
-
"aria-label": isPanelOpen ? "Close panel" : agendaModule && !textMode ? "Open agenda" : "Open chat",
|
|
4111
|
-
className: cn(SQUARE_BUTTON, "skippr:text-neutral-700", textMode ? "skippr:hover:bg-neutral-100" : "skippr:bg-neutral-100 skippr:hover:bg-neutral-200"),
|
|
4112
|
-
children: /* @__PURE__ */ jsx5(MessageSquare, {
|
|
4214
|
+
}) : /* @__PURE__ */ jsx6(Monitor, {
|
|
4113
4215
|
className: "skippr:size-5"
|
|
4114
4216
|
})
|
|
4115
4217
|
}),
|
|
4116
|
-
|
|
4218
|
+
panelToggleButton,
|
|
4219
|
+
showActionControl && /* @__PURE__ */ jsx6("button", {
|
|
4117
4220
|
type: "button",
|
|
4118
4221
|
onClick: ifNotDragged(() => void togglePaused()),
|
|
4119
4222
|
"aria-label": actionsPaused2 ? "Resume actions" : "Stop actions",
|
|
4120
4223
|
title: actionsPaused2 ? "Resume" : "Stop",
|
|
4121
4224
|
className: cn(SQUARE_BUTTON, actionsPaused2 ? "skippr:bg-green-100 skippr:text-green-700 skippr:hover:bg-green-200" : "skippr:bg-red-100 skippr:text-red-600 skippr:hover:bg-red-200"),
|
|
4122
|
-
children: actionsPaused2 ? /* @__PURE__ */
|
|
4225
|
+
children: actionsPaused2 ? /* @__PURE__ */ jsx6(Play, {
|
|
4123
4226
|
className: "skippr:size-5",
|
|
4124
4227
|
fill: "currentColor"
|
|
4125
|
-
}) : /* @__PURE__ */
|
|
4228
|
+
}) : /* @__PURE__ */ jsx6(Square, {
|
|
4126
4229
|
className: "skippr:size-5",
|
|
4127
4230
|
fill: "currentColor"
|
|
4128
4231
|
})
|
|
@@ -4133,7 +4236,7 @@ function SessionControlBar() {
|
|
|
4133
4236
|
}, textMode ? "ready-text" : "ready")
|
|
4134
4237
|
]
|
|
4135
4238
|
}),
|
|
4136
|
-
isReady && !isDragging && /* @__PURE__ */
|
|
4239
|
+
isReady && !isDragging && /* @__PURE__ */ jsx6("button", {
|
|
4137
4240
|
type: "button",
|
|
4138
4241
|
onClick: ifNotDragged(() => void pauseSession()),
|
|
4139
4242
|
disabled: isPausing,
|
|
@@ -4143,7 +4246,7 @@ function SessionControlBar() {
|
|
|
4143
4246
|
children: /* @__PURE__ */ jsxs6("span", {
|
|
4144
4247
|
className: "skippr:relative skippr:flex skippr:size-5 skippr:items-center skippr:justify-center",
|
|
4145
4248
|
children: [
|
|
4146
|
-
/* @__PURE__ */
|
|
4249
|
+
/* @__PURE__ */ jsx6(X, {
|
|
4147
4250
|
className: cn("skippr:size-4 skippr:transition-opacity skippr:duration-200", isPausing && "skippr:opacity-40"),
|
|
4148
4251
|
strokeWidth: 2.5
|
|
4149
4252
|
}),
|
|
@@ -4153,7 +4256,7 @@ function SessionControlBar() {
|
|
|
4153
4256
|
"aria-hidden": "true",
|
|
4154
4257
|
className: "skippr:absolute skippr:inset-0 skippr:size-full skippr:animate-spin skippr:motion-reduce:hidden",
|
|
4155
4258
|
children: [
|
|
4156
|
-
/* @__PURE__ */
|
|
4259
|
+
/* @__PURE__ */ jsx6("circle", {
|
|
4157
4260
|
cx: "12",
|
|
4158
4261
|
cy: "12",
|
|
4159
4262
|
r: "10.5",
|
|
@@ -4161,7 +4264,7 @@ function SessionControlBar() {
|
|
|
4161
4264
|
strokeOpacity: "0.2",
|
|
4162
4265
|
strokeWidth: "1.5"
|
|
4163
4266
|
}),
|
|
4164
|
-
/* @__PURE__ */
|
|
4267
|
+
/* @__PURE__ */ jsx6("circle", {
|
|
4165
4268
|
cx: "12",
|
|
4166
4269
|
cy: "12",
|
|
4167
4270
|
r: "10.5",
|
|
@@ -4180,9 +4283,9 @@ function SessionControlBar() {
|
|
|
4180
4283
|
}
|
|
4181
4284
|
|
|
4182
4285
|
// src/components/ShadowHost.tsx
|
|
4183
|
-
import { useLayoutEffect as useLayoutEffect2, useRef as useRef10, useState as
|
|
4286
|
+
import { useLayoutEffect as useLayoutEffect2, useRef as useRef10, useState as useState13 } from "react";
|
|
4184
4287
|
import { createPortal } from "react-dom";
|
|
4185
|
-
import { jsx as
|
|
4288
|
+
import { jsx as jsx7, Fragment as Fragment2 } from "react/jsx-runtime";
|
|
4186
4289
|
var PROPERTIES_STYLE_ID = "skippr-tw-properties";
|
|
4187
4290
|
var PROPERTY_RULE = /@property\s+[^{]+\{[^}]*\}/g;
|
|
4188
4291
|
function hoistTailwindProperties(css) {
|
|
@@ -4198,9 +4301,9 @@ function hoistTailwindProperties(css) {
|
|
|
4198
4301
|
}
|
|
4199
4302
|
function ShadowHost({ children }) {
|
|
4200
4303
|
const hostRef = useRef10(null);
|
|
4201
|
-
const [shadowRoot, setShadowRoot] =
|
|
4304
|
+
const [shadowRoot, setShadowRoot] = useState13(null);
|
|
4202
4305
|
const css = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
|
4203
|
-
@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-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction: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-100:oklch(93.6% .032 17.717);--skippr-color-red-200:oklch(88.5% .062 18.334);--skippr-color-red-300:oklch(80.8% .114 19.571);--skippr-color-red-400:oklch(70.4% .191 22.216);--skippr-color-red-500:oklch(63.7% .237 25.331);--skippr-color-red-600:oklch(57.7% .245 27.325);--skippr-color-red-700:oklch(50.5% .213 27.518);--skippr-color-amber-50:oklch(98.7% .022 95.277);--skippr-color-amber-100:oklch(96.2% .059 95.617);--skippr-color-amber-400:oklch(82.8% .189 84.429);--skippr-color-amber-700:oklch(55.5% .163 48.998);--skippr-color-amber-950:oklch(27.9% .077 45.635);--skippr-color-green-100:oklch(96.2% .044 156.743);--skippr-color-green-200:oklch(92.5% .084 155.995);--skippr-color-green-700:oklch(52.7% .154 150.069);--skippr-color-emerald-400:oklch(76.5% .177 163.223);--skippr-color-emerald-500:oklch(69.6% .17 162.48);--skippr-color-neutral-100:oklch(97% 0 0);--skippr-color-neutral-200:oklch(92.2% 0 0);--skippr-color-neutral-500:oklch(55.6% 0 0);--skippr-color-neutral-700:oklch(37.1% 0 0);--skippr-color-black:#000;--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-leading-tight:1.25;--skippr-leading-snug:1.375;--skippr-leading-relaxed:1.625;--skippr-ease-out:cubic-bezier(0,0,.2,1);--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-pulse:pulse 2s cubic-bezier(.4,0,.6,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\\:inset-y-0{inset-block:calc(var(--skippr-spacing)*0)}.skippr\\:top-0{top:calc(var(--skippr-spacing)*0)}.skippr\\:top-1\\/2{top:50%}.skippr\\:top-full{top:100%}.skippr\\:-right-8{right:calc(var(--skippr-spacing)*-8)}.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\\:right-7{right:calc(var(--skippr-spacing)*7)}.skippr\\:right-\\[24px\\]{right:24px}.skippr\\:-bottom-1{bottom:calc(var(--skippr-spacing)*-1)}.skippr\\:-bottom-9{bottom:calc(var(--skippr-spacing)*-9)}.skippr\\:bottom-3{bottom:calc(var(--skippr-spacing)*3)}.skippr\\:bottom-20{bottom:calc(var(--skippr-spacing)*20)}.skippr\\:bottom-full{bottom:100%}.skippr\\:-left-8{left:calc(var(--skippr-spacing)*-8)}.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\\:left-7{left:calc(var(--skippr-spacing)*7)}.skippr\\:left-\\[24px\\]{left:24px}.skippr\\:z-10{z-index:10}.skippr\\:z-20{z-index:20}.skippr\\:z-\\[9998\\]{z-index:9998}.skippr\\:z-\\[9999\\]{z-index:9999}.skippr\\:mx-auto{margin-inline:auto}.skippr\\:-mt-\\[5px\\]{margin-top:-5px}.skippr\\:-mt-\\[27px\\]{margin-top:-27px}.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\\:mt-3\\.5{margin-top:calc(var(--skippr-spacing)*3.5)}.skippr\\:mr-7{margin-right:calc(var(--skippr-spacing)*7)}.skippr\\:-mb-\\[5px\\]{margin-bottom:-5px}.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\\:ml-0\\.5{margin-left:calc(var(--skippr-spacing)*.5)}.skippr\\:ml-1{margin-left:calc(var(--skippr-spacing)*1)}.skippr\\:ml-7{margin-left:calc(var(--skippr-spacing)*7)}.skippr\\:flex{display:flex}.skippr\\:hidden{display:none}.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{width:calc(var(--skippr-spacing)*3);height:calc(var(--skippr-spacing)*3)}.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-12{width:calc(var(--skippr-spacing)*12);height:calc(var(--skippr-spacing)*12)}.skippr\\:size-\\[5px\\]{width:5px;height:5px}.skippr\\:size-\\[6px\\]{width:6px;height:6px}.skippr\\:size-\\[38px\\]{width:38px;height:38px}.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-7{height:calc(var(--skippr-spacing)*7)}.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-\\[18\\.5px\\]{height:18.5px}.skippr\\:h-\\[38px\\]{height:38px}.skippr\\:h-\\[50px\\]{height:50px}.skippr\\:h-\\[54px\\]{height:54px}.skippr\\:h-full{height:100%}.skippr\\:min-h-0{min-height:calc(var(--skippr-spacing)*0)}.skippr\\:min-h-11{min-height:calc(var(--skippr-spacing)*11)}.skippr\\:w-0{width:calc(var(--skippr-spacing)*0)}.skippr\\:w-3\\.5{width:calc(var(--skippr-spacing)*3.5)}.skippr\\:w-4{width:calc(var(--skippr-spacing)*4)}.skippr\\:w-5{width:calc(var(--skippr-spacing)*5)}.skippr\\:w-6{width:calc(var(--skippr-spacing)*6)}.skippr\\:w-7{width:calc(var(--skippr-spacing)*7)}.skippr\\:w-8{width:calc(var(--skippr-spacing)*8)}.skippr\\:w-10{width:calc(var(--skippr-spacing)*10)}.skippr\\:w-40{width:calc(var(--skippr-spacing)*40)}.skippr\\:w-\\[2px\\]{width:2px}.skippr\\:w-\\[3px\\]{width:3px}.skippr\\:w-\\[15\\.4px\\]{width:15.4px}.skippr\\:w-\\[50px\\]{width:50px}.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\\:min-w-11{min-width:calc(var(--skippr-spacing)*11)}.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\\:origin-left{transform-origin:0}.skippr\\:origin-right{transform-origin:100%}.skippr\\:origin-top-left{transform-origin:0 0}.skippr\\:origin-top-right{transform-origin:100% 0}.skippr\\:-translate-x-1\\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:-translate-x-7{--tw-translate-x:calc(var(--skippr-spacing)*-7);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:translate-x-7{--tw-translate-x:calc(var(--skippr-spacing)*7);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:-translate-y-1\\/2{--tw-translate-y: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-90{rotate:-90deg}.skippr\\:rotate-45{rotate:45deg}.skippr\\:rotate-\\[225deg\\]{rotate:225deg}.skippr\\:\\[animation\\:skippr-agent-in_200ms_ease-out_240ms_both\\]{animation:.2s ease-out .24s both skippr-agent-in}.skippr\\:\\[animation\\:skippr-banner-look_2\\.4s_ease-in-out_infinite\\]{animation:2.4s ease-in-out infinite skippr-banner-look}.skippr\\:\\[animation\\:skippr-finger-tap_1\\.1s_ease-in-out_infinite\\]{animation:1.1s ease-in-out infinite skippr-finger-tap}.skippr\\:\\[animation\\:skippr-orb-in_320ms_cubic-bezier\\(0\\.34\\,1\\.3\\,0\\.64\\,1\\)\\]{animation:.32s cubic-bezier(.34,1.3,.64,1) skippr-orb-in}.skippr\\:\\[animation\\:skippr-stage-fade_240ms_ease-out\\]{animation:.24s ease-out skippr-stage-fade}.skippr\\:\\[animation\\:skippr-tip-in_360ms_cubic-bezier\\(0\\.34\\,1\\.3\\,0\\.64\\,1\\)_backwards\\]{animation:.36s cubic-bezier(.34,1.3,.64,1) backwards skippr-tip-in}.skippr\\:\\[animation\\:skippr-toolset-pop_280ms_cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\]{animation:.28s cubic-bezier(.22,1,.36,1) skippr-toolset-pop}.skippr\\:\\[animation\\:skippr-toolset-pop_440ms_cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\]{animation:.44s cubic-bezier(.22,1,.36,1) skippr-toolset-pop}.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-pulse{animation:var(--skippr-animate-pulse)}.skippr\\:animate-skippr-annotation-pulse{animation:1.8s ease-in-out infinite skippr-annotation-pulse}.skippr\\:animate-skippr-click-ping{animation:.5s ease-out forwards skippr-click-ping}.skippr\\:animate-skippr-cursor-pop{animation:.22s ease-out skippr-cursor-pop}.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-default{cursor:default}.skippr\\:cursor-grab{cursor:grab}.skippr\\:cursor-pointer{cursor:pointer}.skippr\\:touch-none{touch-action:none}.skippr\\:resize-none{resize:none}.skippr\\:flex-col{flex-direction:column}.skippr\\:flex-col-reverse{flex-direction:column-reverse}.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\\:justify-start{justify-content:flex-start}.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-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*2)*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-\\[12px\\]{border-radius:12px}.skippr\\:rounded-\\[14px\\]{border-radius:14px}.skippr\\:rounded-\\[16px\\]{border-radius:16px}.skippr\\:rounded-\\[20px\\]{border-radius:20px}.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\\:rounded-tl-md{border-top-left-radius:.5rem}.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-\\[\\#2bc0ae\\]{border-color:#2bc0ae}.skippr\\:border-border,.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-\\[\\#2bc0ae\\]{background-color:#2bc0ae}.skippr\\:bg-\\[\\#2bc0ae\\]\\/50{background-color:oklab(72.9347% -.121518 -.00545585/.5)}.skippr\\:bg-amber-50{background-color:var(--skippr-color-amber-50)}.skippr\\:bg-amber-400{background-color:var(--skippr-color-amber-400)}.skippr\\:bg-background{background-color:oklch(100% 0 0)}.skippr\\:bg-black\\/\\[0\\.07\\]{background-color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:bg-black\\/\\[0\\.07\\]{background-color:color-mix(in oklab,var(--skippr-color-black)7.0%,transparent)}}.skippr\\:bg-bubble{background-color:#2d2b3d}.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-destructive{background-color:#d94f4f}.skippr\\:bg-emerald-400{background-color:var(--skippr-color-emerald-400)}.skippr\\:bg-emerald-500{background-color:var(--skippr-color-emerald-500)}.skippr\\:bg-foreground{background-color:oklch(14.7% .004 49.25)}.skippr\\:bg-green-100{background-color:var(--skippr-color-green-100)}.skippr\\:bg-launcher{background-color:#2d2d3f}.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-neutral-100{background-color:var(--skippr-color-neutral-100)}.skippr\\:bg-primary{background-color:#2d2b3d}.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-100{background-color:var(--skippr-color-red-100)}.skippr\\:bg-red-400{background-color:var(--skippr-color-red-400)}.skippr\\:bg-red-500{background-color:var(--skippr-color-red-500)}.skippr\\:bg-secondary{background-color:#ffdfb5}.skippr\\:bg-transparent{background-color:#0000}.skippr\\:bg-white,.skippr\\:bg-white\\/15{background-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:bg-white\\/15{background-color:color-mix(in oklab,var(--skippr-color-white)15%,transparent)}}.skippr\\:fill-brand{fill:#2bc0ae}.skippr\\:fill-primary\\/30{fill:oklab(29.9244% .0107414 -.0305411/.3)}.skippr\\:stroke-black\\/15{stroke:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:stroke-black\\/15{stroke:color-mix(in oklab,var(--skippr-color-black)15%,transparent)}}.skippr\\:stroke-bubble{stroke:#2d2b3d}.skippr\\:p-0\\.5{padding:calc(var(--skippr-spacing)*.5)}.skippr\\:p-1\\.5{padding:calc(var(--skippr-spacing)*1.5)}.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\\: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-1\\.5{padding-top:calc(var(--skippr-spacing)*1.5)}.skippr\\:pr-2\\.5{padding-right:calc(var(--skippr-spacing)*2.5)}.skippr\\:pr-3{padding-right:calc(var(--skippr-spacing)*3)}.skippr\\:pb-2{padding-bottom:calc(var(--skippr-spacing)*2)}.skippr\\:pl-1\\.5{padding-left:calc(var(--skippr-spacing)*1.5)}.skippr\\:pl-2\\.5{padding-left:calc(var(--skippr-spacing)*2.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-\\[10px\\]{font-size:10px}.skippr\\:text-\\[11px\\]{font-size:11px}.skippr\\:text-\\[13px\\]{font-size:13px}.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\\:whitespace-nowrap{white-space:nowrap}.skippr\\:text-\\[\\#2bc0ae\\]{color:#2bc0ae}.skippr\\:text-amber-700{color:var(--skippr-color-amber-700)}.skippr\\:text-amber-950{color:var(--skippr-color-amber-950)}.skippr\\:text-background{color:oklch(100% 0 0)}.skippr\\:text-black{color:var(--skippr-color-black)}.skippr\\:text-bubble{color:#2d2b3d}.skippr\\:text-chart-3{color:oklch(66.6% .179 58.318)}.skippr\\:text-destructive{color:#d94f4f}.skippr\\:text-foreground{color:oklch(14.7% .004 49.25)}.skippr\\:text-green-700{color:var(--skippr-color-green-700)}.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-neutral-500{color:var(--skippr-color-neutral-500)}.skippr\\:text-neutral-700{color:var(--skippr-color-neutral-700)}.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-400{color:var(--skippr-color-red-400)}.skippr\\:text-red-600{color:var(--skippr-color-red-600)}.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\\:capitalize{text-transform:capitalize}.skippr\\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.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-40{opacity:.4}.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-\\[-6px_6px_22px_rgba\\(0\\,0\\,0\\,0\\.3\\)\\]{--tw-shadow:-6px 6px 22px var(--tw-shadow-color,#0000004d);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_14px_rgba\\(239\\,68\\,68\\,0\\.45\\)\\]{--tw-shadow:0 4px 14px var(--tw-shadow-color,#ef444473);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_8px_24px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 8px 24px 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_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-\\[0_10px_32px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 10px 32px 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-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-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px 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-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px 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-2{--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\\:ring-black\\/5{--tw-ring-color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:ring-black\\/5{--tw-ring-color:color-mix(in oklab,var(--skippr-color-black)5%,transparent)}}.skippr\\:ring-brand{--tw-ring-color:#2bc0ae}.skippr\\:ring-foreground\\/10{--tw-ring-color:oklab(14.7% .00261104 .00303026/.1)}.skippr\\:ring-white\\/30{--tw-ring-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:ring-white\\/30{--tw-ring-color:color-mix(in oklab,var(--skippr-color-white)30%,transparent)}}.skippr\\:ring-offset-background{--tw-ring-offset-color:oklch(100% 0 0)}.skippr\\:drop-shadow-\\[0_2px_5px_rgba\\(0\\,0\\,0\\,0\\.4\\)\\]{--tw-drop-shadow-size:drop-shadow(0 2px 5px var(--tw-drop-shadow-color,#0006));--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-\\[height\\]{transition-property:height;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\\,transform\\,height\\]{transition-property:opacity,transform,height;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\\,margin\\]{transition-property:width,margin;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-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:duration-75{--tw-duration:75ms;transition-duration:75ms}.skippr\\:duration-150{--tw-duration:.15s;transition-duration:.15s}.skippr\\:duration-200{--tw-duration:.2s;transition-duration:.2s}.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\\:ease-out{--tw-ease:var(--skippr-ease-out);transition-timing-function:var(--skippr-ease-out)}.skippr\\:outline-none{--tw-outline-style:none;outline-style:none}.skippr\\:select-none{-webkit-user-select:none;user-select: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\\:\\[overflow-anchor\\:none\\]{overflow-anchor:none}.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\\:text-red-300:is(:where(.skippr\\:group):hover *){color:var(--skippr-color-red-300)}.skippr\\:group-hover\\:text-white\\/80:is(:where(.skippr\\:group):hover *){color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:group-hover\\:text-white\\/80:is(:where(.skippr\\:group):hover *){color:color-mix(in oklab,var(--skippr-color-white)80%,transparent)}}.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\\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:hover\\:bg-\\[\\#3a384b\\]:hover{background-color:#3a384b}.skippr\\:hover\\:bg-accent:hover{background-color:#e7e5e4}.skippr\\:hover\\:bg-amber-100:hover{background-color:var(--skippr-color-amber-100)}.skippr\\:hover\\:bg-bubble:hover{background-color:#2d2b3d}.skippr\\:hover\\:bg-destructive\\/90:hover{background-color:oklab(61.4357% .15892 .0698893/.9)}.skippr\\:hover\\:bg-green-200:hover{background-color:var(--skippr-color-green-200)}.skippr\\:hover\\:bg-muted:hover{background-color:oklch(97% .001 106.424)}.skippr\\:hover\\:bg-neutral-100:hover{background-color:var(--skippr-color-neutral-100)}.skippr\\:hover\\:bg-neutral-200:hover{background-color:var(--skippr-color-neutral-200)}.skippr\\:hover\\:bg-primary\\/90:hover{background-color:oklab(29.9244% .0107414 -.0305411/.9)}.skippr\\:hover\\:bg-red-200:hover{background-color:var(--skippr-color-red-200)}.skippr\\:hover\\:bg-red-600:hover{background-color:var(--skippr-color-red-600)}.skippr\\:hover\\:bg-secondary\\/80:hover{background-color:oklab(91.9963% .0175391 .0626889/.8)}.skippr\\:hover\\:bg-white\\/10:hover{background-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:hover\\:bg-white\\/10:hover{background-color:color-mix(in oklab,var(--skippr-color-white)10%,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\\: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-brand:focus-visible{--tw-ring-color:#2bc0ae}.skippr\\:focus-visible\\:ring-bubble\\/60:focus-visible{--tw-ring-color:oklab(29.9244% .0107414 -.0305411/.6)}.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}@media (prefers-reduced-motion:reduce){.skippr\\:motion-reduce\\:hidden{display:none}.skippr\\:motion-reduce\\:animate-none{animation:none}}.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-cursor-pop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes skippr-click-ping{0%{opacity:.9;transform:translate(-50%,-50%)scale(.4)}to{opacity:0;transform:translate(-50%,-50%)scale(2.4)}}@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 #2bc0ae80}50%{box-shadow:0 0 0 6px #2bc0ae00}}@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-tip-in{0%{opacity:0;transform:translateY(14px)scale(.96)}60%{opacity:1;transform:translateY(-2px)scale(1.01)}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)}}@keyframes skippr-finger-tap{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(2px)rotate(-6deg)}}@keyframes skippr-toolset-pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes skippr-stage-fade{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes skippr-agent-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes skippr-orb-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.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-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{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 pulse{50%{opacity:.5}}@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}}`;
|
|
4306
|
+
@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-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction: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-100:oklch(93.6% .032 17.717);--skippr-color-red-200:oklch(88.5% .062 18.334);--skippr-color-red-300:oklch(80.8% .114 19.571);--skippr-color-red-400:oklch(70.4% .191 22.216);--skippr-color-red-500:oklch(63.7% .237 25.331);--skippr-color-red-600:oklch(57.7% .245 27.325);--skippr-color-red-700:oklch(50.5% .213 27.518);--skippr-color-amber-50:oklch(98.7% .022 95.277);--skippr-color-amber-100:oklch(96.2% .059 95.617);--skippr-color-amber-400:oklch(82.8% .189 84.429);--skippr-color-amber-700:oklch(55.5% .163 48.998);--skippr-color-amber-950:oklch(27.9% .077 45.635);--skippr-color-green-100:oklch(96.2% .044 156.743);--skippr-color-green-200:oklch(92.5% .084 155.995);--skippr-color-green-700:oklch(52.7% .154 150.069);--skippr-color-emerald-400:oklch(76.5% .177 163.223);--skippr-color-neutral-100:oklch(97% 0 0);--skippr-color-neutral-200:oklch(92.2% 0 0);--skippr-color-neutral-500:oklch(55.6% 0 0);--skippr-color-neutral-700:oklch(37.1% 0 0);--skippr-color-black:#000;--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-leading-tight:1.25;--skippr-leading-snug:1.375;--skippr-leading-relaxed:1.625;--skippr-ease-out:cubic-bezier(0,0,.2,1);--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\\:inset-y-0{inset-block:calc(var(--skippr-spacing)*0)}.skippr\\:top-0{top:calc(var(--skippr-spacing)*0)}.skippr\\:top-1\\/2{top:50%}.skippr\\:top-full{top:100%}.skippr\\:-right-8{right:calc(var(--skippr-spacing)*-8)}.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-1{bottom:calc(var(--skippr-spacing)*-1)}.skippr\\:-bottom-9{bottom:calc(var(--skippr-spacing)*-9)}.skippr\\:bottom-3{bottom:calc(var(--skippr-spacing)*3)}.skippr\\:bottom-20{bottom:calc(var(--skippr-spacing)*20)}.skippr\\:bottom-full{bottom:100%}.skippr\\:-left-8{left:calc(var(--skippr-spacing)*-8)}.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-20{z-index:20}.skippr\\:z-\\[9998\\]{z-index:9998}.skippr\\:z-\\[9999\\]{z-index:9999}.skippr\\:order-first{order:-9999}.skippr\\:order-last{order:9999}.skippr\\:mx-auto{margin-inline:auto}.skippr\\:-mt-\\[5px\\]{margin-top:-5px}.skippr\\:-mt-\\[27px\\]{margin-top:-27px}.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-2{margin-top:calc(var(--skippr-spacing)*2)}.skippr\\:mt-3{margin-top:calc(var(--skippr-spacing)*3)}.skippr\\:mt-3\\.5{margin-top:calc(var(--skippr-spacing)*3.5)}.skippr\\:mr-7{margin-right:calc(var(--skippr-spacing)*7)}.skippr\\:-mb-\\[5px\\]{margin-bottom:-5px}.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\\:ml-0\\.5{margin-left:calc(var(--skippr-spacing)*.5)}.skippr\\:ml-1{margin-left:calc(var(--skippr-spacing)*1)}.skippr\\:ml-7{margin-left:calc(var(--skippr-spacing)*7)}.skippr\\:flex{display:flex}.skippr\\:hidden{display:none}.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{width:calc(var(--skippr-spacing)*3);height:calc(var(--skippr-spacing)*3)}.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-12{width:calc(var(--skippr-spacing)*12);height:calc(var(--skippr-spacing)*12)}.skippr\\:size-\\[5px\\]{width:5px;height:5px}.skippr\\:size-\\[38px\\]{width:38px;height:38px}.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-7{height:calc(var(--skippr-spacing)*7)}.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-\\[18\\.5px\\]{height:18.5px}.skippr\\:h-\\[36px\\]{height:36px}.skippr\\:h-\\[38px\\]{height:38px}.skippr\\:h-\\[48px\\]{height:48px}.skippr\\:h-\\[54px\\]{height:54px}.skippr\\:h-full{height:100%}.skippr\\:min-h-0{min-height:calc(var(--skippr-spacing)*0)}.skippr\\:min-h-11{min-height:calc(var(--skippr-spacing)*11)}.skippr\\:w-0{width:calc(var(--skippr-spacing)*0)}.skippr\\:w-3\\.5{width:calc(var(--skippr-spacing)*3.5)}.skippr\\:w-4{width:calc(var(--skippr-spacing)*4)}.skippr\\:w-5{width:calc(var(--skippr-spacing)*5)}.skippr\\:w-6{width:calc(var(--skippr-spacing)*6)}.skippr\\:w-7{width:calc(var(--skippr-spacing)*7)}.skippr\\:w-8{width:calc(var(--skippr-spacing)*8)}.skippr\\:w-10{width:calc(var(--skippr-spacing)*10)}.skippr\\:w-40{width:calc(var(--skippr-spacing)*40)}.skippr\\:w-\\[2px\\]{width:2px}.skippr\\:w-\\[3px\\]{width:3px}.skippr\\:w-\\[15\\.4px\\]{width:15.4px}.skippr\\:w-\\[36px\\]{width:36px}.skippr\\:w-\\[50px\\]{width:50px}.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\\:min-w-11{min-width:calc(var(--skippr-spacing)*11)}.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\\:origin-left{transform-origin:0}.skippr\\:origin-right{transform-origin:100%}.skippr\\:origin-top-left{transform-origin:0 0}.skippr\\:origin-top-right{transform-origin:100% 0}.skippr\\:-translate-x-1\\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:-translate-x-3{--tw-translate-x:calc(var(--skippr-spacing)*-3);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:-translate-x-7{--tw-translate-x:calc(var(--skippr-spacing)*-7);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:translate-x-3{--tw-translate-x:calc(var(--skippr-spacing)*3);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:translate-x-7{--tw-translate-x:calc(var(--skippr-spacing)*7);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-90{rotate:-90deg}.skippr\\:rotate-45{rotate:45deg}.skippr\\:rotate-\\[225deg\\]{rotate:225deg}.skippr\\:\\[animation\\:skippr-agent-in_200ms_ease-out_240ms_both\\]{animation:.2s ease-out .24s both skippr-agent-in}.skippr\\:\\[animation\\:skippr-banner-look_2\\.4s_ease-in-out_infinite\\]{animation:2.4s ease-in-out infinite skippr-banner-look}.skippr\\:\\[animation\\:skippr-finger-tap_1\\.1s_ease-in-out_infinite\\]{animation:1.1s ease-in-out infinite skippr-finger-tap}.skippr\\:\\[animation\\:skippr-orb-in_320ms_cubic-bezier\\(0\\.34\\,1\\.3\\,0\\.64\\,1\\)\\]{animation:.32s cubic-bezier(.34,1.3,.64,1) skippr-orb-in}.skippr\\:\\[animation\\:skippr-stage-fade_240ms_ease-out\\]{animation:.24s ease-out skippr-stage-fade}.skippr\\:\\[animation\\:skippr-tip-in_360ms_cubic-bezier\\(0\\.34\\,1\\.3\\,0\\.64\\,1\\)_backwards\\]{animation:.36s cubic-bezier(.34,1.3,.64,1) backwards skippr-tip-in}.skippr\\:\\[animation\\:skippr-toolset-pop_280ms_cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\]{animation:.28s cubic-bezier(.22,1,.36,1) skippr-toolset-pop}.skippr\\:\\[animation\\:skippr-toolset-pop_440ms_cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\]{animation:.44s cubic-bezier(.22,1,.36,1) skippr-toolset-pop}.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-click-ping{animation:.5s ease-out forwards skippr-click-ping}.skippr\\:animate-skippr-cursor-pop{animation:.22s ease-out skippr-cursor-pop}.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-default{cursor:default}.skippr\\:cursor-grab{cursor:grab}.skippr\\:cursor-not-allowed{cursor:not-allowed}.skippr\\:cursor-pointer{cursor:pointer}.skippr\\:touch-none{touch-action:none}.skippr\\:resize-none{resize:none}.skippr\\:flex-col{flex-direction:column}.skippr\\:flex-col-reverse{flex-direction:column-reverse}.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\\:justify-start{justify-content:flex-start}.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-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*2)*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-\\[11px\\]{border-radius:11px}.skippr\\:rounded-\\[12px\\]{border-radius:12px}.skippr\\:rounded-\\[14px\\]{border-radius:14px}.skippr\\:rounded-\\[16px\\]{border-radius:16px}.skippr\\:rounded-\\[20px\\]{border-radius:20px}.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\\:rounded-l-\\[18px\\]{border-top-left-radius:18px;border-bottom-left-radius:18px}.skippr\\:rounded-tl-md{border-top-left-radius:.5rem}.skippr\\:rounded-r-\\[18px\\]{border-top-right-radius:18px;border-bottom-right-radius:18px}.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-\\[\\#2bc0ae\\]{border-color:#2bc0ae}.skippr\\:border-border,.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-\\[\\#2bc0ae\\]{background-color:#2bc0ae}.skippr\\:bg-\\[\\#2bc0ae\\]\\/50{background-color:oklab(72.9347% -.121518 -.00545585/.5)}.skippr\\:bg-amber-50{background-color:var(--skippr-color-amber-50)}.skippr\\:bg-amber-400{background-color:var(--skippr-color-amber-400)}.skippr\\:bg-background{background-color:oklch(100% 0 0)}.skippr\\:bg-black\\/\\[0\\.07\\]{background-color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:bg-black\\/\\[0\\.07\\]{background-color:color-mix(in oklab,var(--skippr-color-black)7.0%,transparent)}}.skippr\\:bg-bubble{background-color:#2d2b3d}.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-destructive{background-color:#d94f4f}.skippr\\:bg-emerald-400{background-color:var(--skippr-color-emerald-400)}.skippr\\:bg-foreground{background-color:oklch(14.7% .004 49.25)}.skippr\\:bg-green-100{background-color:var(--skippr-color-green-100)}.skippr\\:bg-launcher{background-color:#2d2d3f}.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-neutral-100{background-color:var(--skippr-color-neutral-100)}.skippr\\:bg-primary{background-color:#2d2b3d}.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-100{background-color:var(--skippr-color-red-100)}.skippr\\:bg-red-400{background-color:var(--skippr-color-red-400)}.skippr\\:bg-red-500{background-color:var(--skippr-color-red-500)}.skippr\\:bg-secondary{background-color:#ffdfb5}.skippr\\:bg-transparent{background-color:#0000}.skippr\\:bg-white,.skippr\\:bg-white\\/15{background-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:bg-white\\/15{background-color:color-mix(in oklab,var(--skippr-color-white)15%,transparent)}}.skippr\\:fill-brand{fill:#2bc0ae}.skippr\\:fill-primary\\/30{fill:oklab(29.9244% .0107414 -.0305411/.3)}.skippr\\:stroke-black\\/15{stroke:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:stroke-black\\/15{stroke:color-mix(in oklab,var(--skippr-color-black)15%,transparent)}}.skippr\\:stroke-bubble{stroke:#2d2b3d}.skippr\\:p-0{padding:calc(var(--skippr-spacing)*0)}.skippr\\:p-0\\.5{padding:calc(var(--skippr-spacing)*.5)}.skippr\\:p-1\\.5{padding:calc(var(--skippr-spacing)*1.5)}.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\\: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\\:py-6{padding-block:calc(var(--skippr-spacing)*6)}.skippr\\:pt-1\\.5{padding-top:calc(var(--skippr-spacing)*1.5)}.skippr\\:pr-2\\.5{padding-right:calc(var(--skippr-spacing)*2.5)}.skippr\\:pr-3{padding-right:calc(var(--skippr-spacing)*3)}.skippr\\:pb-2{padding-bottom:calc(var(--skippr-spacing)*2)}.skippr\\:pl-1\\.5{padding-left:calc(var(--skippr-spacing)*1.5)}.skippr\\:pl-2\\.5{padding-left:calc(var(--skippr-spacing)*2.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-\\[10px\\]{font-size:10px}.skippr\\:text-\\[11px\\]{font-size:11px}.skippr\\:text-\\[13px\\]{font-size:13px}.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\\:whitespace-nowrap{white-space:nowrap}.skippr\\:text-\\[\\#2bc0ae\\]{color:#2bc0ae}.skippr\\:text-amber-700{color:var(--skippr-color-amber-700)}.skippr\\:text-amber-950{color:var(--skippr-color-amber-950)}.skippr\\:text-background{color:oklch(100% 0 0)}.skippr\\:text-black{color:var(--skippr-color-black)}.skippr\\:text-bubble{color:#2d2b3d}.skippr\\:text-chart-3{color:oklch(66.6% .179 58.318)}.skippr\\:text-destructive{color:#d94f4f}.skippr\\:text-foreground{color:oklch(14.7% .004 49.25)}.skippr\\:text-green-700{color:var(--skippr-color-green-700)}.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-neutral-500{color:var(--skippr-color-neutral-500)}.skippr\\:text-neutral-700{color:var(--skippr-color-neutral-700)}.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-400{color:var(--skippr-color-red-400)}.skippr\\:text-red-600{color:var(--skippr-color-red-600)}.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\\:capitalize{text-transform:capitalize}.skippr\\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.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-40{opacity:.4}.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-\\[-6px_8px_30px_rgba\\(15\\,18\\,26\\,0\\.32\\)\\]{--tw-shadow:-6px 8px 30px var(--tw-shadow-color,#0f121a52);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_14px_rgba\\(239\\,68\\,68\\,0\\.45\\)\\]{--tw-shadow:0 4px 14px var(--tw-shadow-color,#ef444473);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_8px_24px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 8px 24px 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_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-\\[0_10px_32px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 10px 32px 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-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-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px 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-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px 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-2{--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\\:ring-black\\/5{--tw-ring-color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:ring-black\\/5{--tw-ring-color:color-mix(in oklab,var(--skippr-color-black)5%,transparent)}}.skippr\\:ring-brand{--tw-ring-color:#2bc0ae}.skippr\\:ring-foreground\\/10{--tw-ring-color:oklab(14.7% .00261104 .00303026/.1)}.skippr\\:ring-white\\/30{--tw-ring-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:ring-white\\/30{--tw-ring-color:color-mix(in oklab,var(--skippr-color-white)30%,transparent)}}.skippr\\:ring-offset-background{--tw-ring-offset-color:oklch(100% 0 0)}.skippr\\:drop-shadow-\\[0_2px_5px_rgba\\(0\\,0\\,0\\,0\\.4\\)\\]{--tw-drop-shadow-size:drop-shadow(0 2px 5px var(--tw-drop-shadow-color,#0006));--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-\\[height\\]{transition-property:height;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\\,transform\\,height\\]{transition-property:opacity,transform,height;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\\,margin\\]{transition-property:width,margin;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-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:duration-75{--tw-duration:75ms;transition-duration:75ms}.skippr\\:duration-150{--tw-duration:.15s;transition-duration:.15s}.skippr\\:duration-200{--tw-duration:.2s;transition-duration:.2s}.skippr\\:duration-300{--tw-duration:.3s;transition-duration:.3s}.skippr\\:duration-\\[400ms\\]{--tw-duration:.4s;transition-duration:.4s}.skippr\\:ease-\\[cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\]{--tw-ease:cubic-bezier(.22,1,.36,1);transition-timing-function:cubic-bezier(.22,1,.36,1)}.skippr\\:ease-in-out{--tw-ease:var(--skippr-ease-in-out);transition-timing-function:var(--skippr-ease-in-out)}.skippr\\:ease-out{--tw-ease:var(--skippr-ease-out);transition-timing-function:var(--skippr-ease-out)}.skippr\\:outline-none{--tw-outline-style:none;outline-style:none}.skippr\\:select-none{-webkit-user-select:none;user-select: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\\:\\[overflow-anchor\\:none\\]{overflow-anchor:none}.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\\:text-red-300:is(:where(.skippr\\:group):hover *){color:var(--skippr-color-red-300)}.skippr\\:group-hover\\:text-white\\/80:is(:where(.skippr\\:group):hover *){color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:group-hover\\:text-white\\/80:is(:where(.skippr\\:group):hover *){color:color-mix(in oklab,var(--skippr-color-white)80%,transparent)}}.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-\\[\\#3a384b\\]:hover{background-color:#3a384b}.skippr\\:hover\\:bg-accent:hover{background-color:#e7e5e4}.skippr\\:hover\\:bg-amber-100:hover{background-color:var(--skippr-color-amber-100)}.skippr\\:hover\\:bg-bubble:hover{background-color:#2d2b3d}.skippr\\:hover\\:bg-destructive\\/90:hover{background-color:oklab(61.4357% .15892 .0698893/.9)}.skippr\\:hover\\:bg-green-200:hover{background-color:var(--skippr-color-green-200)}.skippr\\:hover\\:bg-muted:hover{background-color:oklch(97% .001 106.424)}.skippr\\:hover\\:bg-neutral-100:hover{background-color:var(--skippr-color-neutral-100)}.skippr\\:hover\\:bg-neutral-200:hover{background-color:var(--skippr-color-neutral-200)}.skippr\\:hover\\:bg-primary\\/90:hover{background-color:oklab(29.9244% .0107414 -.0305411/.9)}.skippr\\:hover\\:bg-red-200:hover{background-color:var(--skippr-color-red-200)}.skippr\\:hover\\:bg-red-600:hover{background-color:var(--skippr-color-red-600)}.skippr\\:hover\\:bg-secondary\\/80:hover{background-color:oklab(91.9963% .0175391 .0626889/.8)}.skippr\\:hover\\:bg-white\\/10:hover{background-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:hover\\:bg-white\\/10:hover{background-color:color-mix(in oklab,var(--skippr-color-white)10%,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\\: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-brand:focus-visible{--tw-ring-color:#2bc0ae}.skippr\\:focus-visible\\:ring-bubble\\/60:focus-visible{--tw-ring-color:oklab(29.9244% .0107414 -.0305411/.6)}.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}@media (prefers-reduced-motion:reduce){.skippr\\:motion-reduce\\:hidden{display:none}}.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-cursor-pop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes skippr-click-ping{0%{opacity:.9;transform:translate(-50%,-50%)scale(.4)}to{opacity:0;transform:translate(-50%,-50%)scale(2.4)}}@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 #2bc0ae80}50%{box-shadow:0 0 0 6px #2bc0ae00}}@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-tip-in{0%{opacity:0;transform:translateY(14px)scale(.96)}60%{opacity:1;transform:translateY(-2px)scale(1.01)}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)}}@keyframes skippr-finger-tap{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(2px)rotate(-6deg)}}@keyframes skippr-toolset-pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes skippr-stage-fade{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes skippr-agent-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes skippr-orb-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.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-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{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}}`;
|
|
4204
4307
|
useLayoutEffect2(() => {
|
|
4205
4308
|
const host = hostRef.current;
|
|
4206
4309
|
if (!host || !css)
|
|
@@ -4215,17 +4318,17 @@ function ShadowHost({ children }) {
|
|
|
4215
4318
|
setShadowRoot(root);
|
|
4216
4319
|
}, [css]);
|
|
4217
4320
|
if (!css)
|
|
4218
|
-
return /* @__PURE__ */
|
|
4321
|
+
return /* @__PURE__ */ jsx7(Fragment2, {
|
|
4219
4322
|
children
|
|
4220
4323
|
});
|
|
4221
|
-
return /* @__PURE__ */
|
|
4324
|
+
return /* @__PURE__ */ jsx7("div", {
|
|
4222
4325
|
ref: hostRef,
|
|
4223
4326
|
children: shadowRoot && createPortal(children, shadowRoot)
|
|
4224
4327
|
});
|
|
4225
4328
|
}
|
|
4226
4329
|
|
|
4227
4330
|
// src/components/Sidebar.tsx
|
|
4228
|
-
import { useContext as
|
|
4331
|
+
import { useContext as useContext11, useEffect as useEffect25 } from "react";
|
|
4229
4332
|
|
|
4230
4333
|
// src/hooks/useCombinedMessages.ts
|
|
4231
4334
|
import { useContext as useContext7, useMemo as useMemo5 } from "react";
|
|
@@ -4313,8 +4416,31 @@ function useCombinedMessages() {
|
|
|
4313
4416
|
return { allMessages, agentState, sendChatMessage, isSendingChat };
|
|
4314
4417
|
}
|
|
4315
4418
|
|
|
4419
|
+
// src/hooks/usePhaseUpdates.ts
|
|
4420
|
+
import { useCallback as useCallback11, useContext as useContext8, useEffect as useEffect19 } from "react";
|
|
4421
|
+
function parsePhases(json) {
|
|
4422
|
+
try {
|
|
4423
|
+
const data = JSON.parse(json);
|
|
4424
|
+
if (data.type === "phase_update" && Array.isArray(data.phases)) {
|
|
4425
|
+
return data.phases;
|
|
4426
|
+
}
|
|
4427
|
+
} catch {}
|
|
4428
|
+
return null;
|
|
4429
|
+
}
|
|
4430
|
+
function usePhaseUpdates() {
|
|
4431
|
+
const parse = useCallback11(parsePhases, []);
|
|
4432
|
+
const livePhases = useAgentState("phases", parse, []);
|
|
4433
|
+
const ctx = useContext8(LiveAgentContext);
|
|
4434
|
+
useEffect19(() => {
|
|
4435
|
+
if (livePhases.length > 0)
|
|
4436
|
+
ctx?.setPhasesSnapshot(livePhases);
|
|
4437
|
+
}, [livePhases, ctx?.setPhasesSnapshot]);
|
|
4438
|
+
const phases = livePhases.length > 0 ? livePhases : ctx?.phasesSnapshot ?? [];
|
|
4439
|
+
return { phases };
|
|
4440
|
+
}
|
|
4441
|
+
|
|
4316
4442
|
// src/hooks/useSessionRemaining.ts
|
|
4317
|
-
import { useEffect as
|
|
4443
|
+
import { useEffect as useEffect20, useRef as useRef11, useState as useState14 } from "react";
|
|
4318
4444
|
|
|
4319
4445
|
// src/lib/format.ts
|
|
4320
4446
|
function formatTime(seconds) {
|
|
@@ -4331,8 +4457,8 @@ function parseNumber(s) {
|
|
|
4331
4457
|
function useSessionRemaining() {
|
|
4332
4458
|
const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
|
|
4333
4459
|
const endTimeRef = useRef11(null);
|
|
4334
|
-
const [remaining, setRemaining] =
|
|
4335
|
-
|
|
4460
|
+
const [remaining, setRemaining] = useState14(null);
|
|
4461
|
+
useEffect20(() => {
|
|
4336
4462
|
if (maxCallDuration === null || endTimeRef.current !== null)
|
|
4337
4463
|
return;
|
|
4338
4464
|
const endTime = Date.now() + maxCallDuration * 1000;
|
|
@@ -4349,13 +4475,13 @@ function useSessionRemaining() {
|
|
|
4349
4475
|
}
|
|
4350
4476
|
|
|
4351
4477
|
// src/components/ChatHeader.tsx
|
|
4352
|
-
import { useContext as
|
|
4478
|
+
import { useContext as useContext10, useRef as useRef13 } from "react";
|
|
4353
4479
|
|
|
4354
4480
|
// src/hooks/useElapsedSeconds.ts
|
|
4355
|
-
import { useEffect as
|
|
4481
|
+
import { useEffect as useEffect21, useState as useState15 } from "react";
|
|
4356
4482
|
function useElapsedSeconds(isRunning) {
|
|
4357
|
-
const [elapsed, setElapsed] =
|
|
4358
|
-
|
|
4483
|
+
const [elapsed, setElapsed] = useState15(0);
|
|
4484
|
+
useEffect21(() => {
|
|
4359
4485
|
if (!isRunning) {
|
|
4360
4486
|
setElapsed(0);
|
|
4361
4487
|
return;
|
|
@@ -4372,10 +4498,10 @@ function useElapsedSeconds(isRunning) {
|
|
|
4372
4498
|
|
|
4373
4499
|
// src/hooks/useTextMode.ts
|
|
4374
4500
|
import { useLocalParticipant as useLocalParticipant9 } from "@livekit/components-react/hooks";
|
|
4375
|
-
import { useCallback as useCallback12, useContext as
|
|
4501
|
+
import { useCallback as useCallback12, useContext as useContext9, useRef as useRef12 } from "react";
|
|
4376
4502
|
var textEncoder5 = new TextEncoder;
|
|
4377
4503
|
function useTextMode() {
|
|
4378
|
-
const ctx =
|
|
4504
|
+
const ctx = useContext9(LiveAgentContext);
|
|
4379
4505
|
if (!ctx) {
|
|
4380
4506
|
throw new Error("useTextMode must be used within a <LiveAgent> provider");
|
|
4381
4507
|
}
|
|
@@ -4404,9 +4530,9 @@ function useTextMode() {
|
|
|
4404
4530
|
}
|
|
4405
4531
|
|
|
4406
4532
|
// src/components/ChatHeader.tsx
|
|
4407
|
-
import { jsx as
|
|
4533
|
+
import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
4408
4534
|
function ChatHeader() {
|
|
4409
|
-
const ctx =
|
|
4535
|
+
const ctx = useContext10(LiveAgentContext);
|
|
4410
4536
|
if (!ctx) {
|
|
4411
4537
|
throw new Error("ChatHeader must be used within a <LiveAgent> provider");
|
|
4412
4538
|
}
|
|
@@ -4433,26 +4559,26 @@ function ChatHeader() {
|
|
|
4433
4559
|
/* @__PURE__ */ jsxs7("div", {
|
|
4434
4560
|
className: "skippr:flex skippr:items-center skippr:gap-3",
|
|
4435
4561
|
children: [
|
|
4436
|
-
isConnected && /* @__PURE__ */
|
|
4562
|
+
isConnected && /* @__PURE__ */ jsx8(HeaderModeToggle, {}),
|
|
4437
4563
|
isConnected && /* @__PURE__ */ jsxs7("div", {
|
|
4438
4564
|
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",
|
|
4439
4565
|
children: [
|
|
4440
4566
|
/* @__PURE__ */ jsxs7("span", {
|
|
4441
4567
|
className: "skippr:relative skippr:flex skippr:size-1.5",
|
|
4442
4568
|
children: [
|
|
4443
|
-
/* @__PURE__ */
|
|
4569
|
+
/* @__PURE__ */ jsx8("span", {
|
|
4444
4570
|
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"
|
|
4445
4571
|
}),
|
|
4446
|
-
/* @__PURE__ */
|
|
4572
|
+
/* @__PURE__ */ jsx8("span", {
|
|
4447
4573
|
className: "skippr:relative skippr:inline-flex skippr:size-1.5 skippr:rounded-full skippr:bg-red-400"
|
|
4448
4574
|
})
|
|
4449
4575
|
]
|
|
4450
4576
|
}),
|
|
4451
|
-
/* @__PURE__ */
|
|
4577
|
+
/* @__PURE__ */ jsx8("span", {
|
|
4452
4578
|
className: "skippr:text-[10px] skippr:font-medium skippr:text-primary-foreground",
|
|
4453
4579
|
children: "REC"
|
|
4454
4580
|
}),
|
|
4455
|
-
/* @__PURE__ */
|
|
4581
|
+
/* @__PURE__ */ jsx8("span", {
|
|
4456
4582
|
className: "skippr:text-[10px] skippr:font-mono skippr:text-primary-foreground",
|
|
4457
4583
|
children: formatTime(elapsed)
|
|
4458
4584
|
})
|
|
@@ -4460,7 +4586,7 @@ function ChatHeader() {
|
|
|
4460
4586
|
})
|
|
4461
4587
|
]
|
|
4462
4588
|
}),
|
|
4463
|
-
minimizable && /* @__PURE__ */
|
|
4589
|
+
minimizable && /* @__PURE__ */ jsx8("button", {
|
|
4464
4590
|
type: "button",
|
|
4465
4591
|
onClick: () => {
|
|
4466
4592
|
if (!wasDraggedRef.current)
|
|
@@ -4469,7 +4595,7 @@ function ChatHeader() {
|
|
|
4469
4595
|
"aria-label": "Close",
|
|
4470
4596
|
title: "Close",
|
|
4471
4597
|
className: "skippr:flex skippr:h-8 skippr:w-8 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-lg skippr:text-primary-foreground/70 skippr:transition-colors skippr:hover:bg-white/10 skippr:hover:text-primary-foreground skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-brand",
|
|
4472
|
-
children: /* @__PURE__ */
|
|
4598
|
+
children: /* @__PURE__ */ jsx8(X, {
|
|
4473
4599
|
className: "skippr:h-4 skippr:w-4"
|
|
4474
4600
|
})
|
|
4475
4601
|
})
|
|
@@ -4478,28 +4604,32 @@ function ChatHeader() {
|
|
|
4478
4604
|
}
|
|
4479
4605
|
function HeaderModeToggle() {
|
|
4480
4606
|
const { textMode, toggleTextMode } = useTextMode();
|
|
4607
|
+
const { isHeld } = useSessionHoldContext();
|
|
4481
4608
|
return /* @__PURE__ */ jsxs7("fieldset", {
|
|
4482
4609
|
"aria-label": "Response mode",
|
|
4483
|
-
|
|
4610
|
+
disabled: isHeld,
|
|
4611
|
+
className: "skippr:flex skippr:items-center skippr:gap-0.5 skippr:rounded-lg skippr:bg-white/15 skippr:p-0.5 skippr:text-xs skippr:font-medium skippr:ring-1 skippr:ring-white/30 skippr:disabled:opacity-50",
|
|
4484
4612
|
children: [
|
|
4485
|
-
/* @__PURE__ */
|
|
4613
|
+
/* @__PURE__ */ jsx8("button", {
|
|
4486
4614
|
type: "button",
|
|
4487
4615
|
"aria-pressed": !textMode,
|
|
4616
|
+
disabled: isHeld,
|
|
4488
4617
|
onClick: () => {
|
|
4489
4618
|
if (textMode)
|
|
4490
4619
|
toggleTextMode();
|
|
4491
4620
|
},
|
|
4492
|
-
className: cn("skippr:
|
|
4621
|
+
className: cn("skippr:rounded-md skippr:px-2.5 skippr:py-1 skippr:transition-colors skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-brand skippr:disabled:cursor-not-allowed", isHeld ? "skippr:cursor-not-allowed" : "skippr:cursor-pointer", textMode ? "skippr:font-semibold skippr:text-primary-foreground" : "skippr:bg-white skippr:text-primary skippr:shadow-sm"),
|
|
4493
4622
|
children: "Voice"
|
|
4494
4623
|
}),
|
|
4495
|
-
/* @__PURE__ */
|
|
4624
|
+
/* @__PURE__ */ jsx8("button", {
|
|
4496
4625
|
type: "button",
|
|
4497
4626
|
"aria-pressed": textMode,
|
|
4627
|
+
disabled: isHeld,
|
|
4498
4628
|
onClick: () => {
|
|
4499
4629
|
if (!textMode)
|
|
4500
4630
|
toggleTextMode();
|
|
4501
4631
|
},
|
|
4502
|
-
className: cn("skippr:
|
|
4632
|
+
className: cn("skippr:rounded-md skippr:px-2.5 skippr:py-1 skippr:transition-colors skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-brand skippr:disabled:cursor-not-allowed", isHeld ? "skippr:cursor-not-allowed" : "skippr:cursor-pointer", textMode ? "skippr:bg-white skippr:text-primary skippr:shadow-sm" : "skippr:font-semibold skippr:text-primary-foreground"),
|
|
4503
4633
|
children: "Text"
|
|
4504
4634
|
})
|
|
4505
4635
|
]
|
|
@@ -4507,7 +4637,7 @@ function HeaderModeToggle() {
|
|
|
4507
4637
|
}
|
|
4508
4638
|
|
|
4509
4639
|
// src/components/LoadingDots.tsx
|
|
4510
|
-
import { jsx as
|
|
4640
|
+
import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
4511
4641
|
function LoadingDots({ label }) {
|
|
4512
4642
|
return /* @__PURE__ */ jsxs8("div", {
|
|
4513
4643
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:py-4",
|
|
@@ -4515,18 +4645,18 @@ function LoadingDots({ label }) {
|
|
|
4515
4645
|
/* @__PURE__ */ jsxs8("div", {
|
|
4516
4646
|
className: "skippr:flex skippr:gap-1",
|
|
4517
4647
|
children: [
|
|
4518
|
-
/* @__PURE__ */
|
|
4648
|
+
/* @__PURE__ */ jsx9("span", {
|
|
4519
4649
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
4520
4650
|
}),
|
|
4521
|
-
/* @__PURE__ */
|
|
4651
|
+
/* @__PURE__ */ jsx9("span", {
|
|
4522
4652
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
4523
4653
|
}),
|
|
4524
|
-
/* @__PURE__ */
|
|
4654
|
+
/* @__PURE__ */ jsx9("span", {
|
|
4525
4655
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
4526
4656
|
})
|
|
4527
4657
|
]
|
|
4528
4658
|
}),
|
|
4529
|
-
/* @__PURE__ */
|
|
4659
|
+
/* @__PURE__ */ jsx9("p", {
|
|
4530
4660
|
className: "skippr:text-xs skippr:text-muted-foreground",
|
|
4531
4661
|
children: label
|
|
4532
4662
|
})
|
|
@@ -4535,11 +4665,11 @@ function LoadingDots({ label }) {
|
|
|
4535
4665
|
}
|
|
4536
4666
|
|
|
4537
4667
|
// src/components/LoginFlow.tsx
|
|
4538
|
-
import { useCallback as useCallback13, useEffect as
|
|
4668
|
+
import { useCallback as useCallback13, useEffect as useEffect22, useRef as useRef14, useState as useState16 } from "react";
|
|
4539
4669
|
|
|
4540
4670
|
// src/components/ui/button.tsx
|
|
4541
4671
|
import { forwardRef as forwardRef3 } from "react";
|
|
4542
|
-
import { jsx as
|
|
4672
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
4543
4673
|
var variantClasses = {
|
|
4544
4674
|
default: "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90",
|
|
4545
4675
|
destructive: "skippr:bg-destructive skippr:text-white skippr:hover:bg-destructive/90",
|
|
@@ -4558,7 +4688,7 @@ var sizeClasses = {
|
|
|
4558
4688
|
"icon-lg": "skippr:size-10"
|
|
4559
4689
|
};
|
|
4560
4690
|
var Button = forwardRef3(({ className, variant = "default", size = "default", ...props }, ref) => {
|
|
4561
|
-
return /* @__PURE__ */
|
|
4691
|
+
return /* @__PURE__ */ jsx10("button", {
|
|
4562
4692
|
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),
|
|
4563
4693
|
ref,
|
|
4564
4694
|
...props
|
|
@@ -4567,12 +4697,12 @@ var Button = forwardRef3(({ className, variant = "default", size = "default", ..
|
|
|
4567
4697
|
Button.displayName = "Button";
|
|
4568
4698
|
|
|
4569
4699
|
// src/components/LoginFlow.tsx
|
|
4570
|
-
import { jsx as
|
|
4700
|
+
import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
4571
4701
|
var OTP_LENGTH = 6;
|
|
4572
4702
|
var DIGIT_KEYS = ["d0", "d1", "d2", "d3", "d4", "d5"];
|
|
4573
4703
|
function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
4574
|
-
const [step, setStep] =
|
|
4575
|
-
const [email, setEmail] =
|
|
4704
|
+
const [step, setStep] = useState16("email");
|
|
4705
|
+
const [email, setEmail] = useState16("");
|
|
4576
4706
|
const handleRequestOtp = useCallback13(async (emailValue) => {
|
|
4577
4707
|
const success = await requestOtp(emailValue);
|
|
4578
4708
|
if (success)
|
|
@@ -4588,7 +4718,7 @@ function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
|
4588
4718
|
await requestOtp(email);
|
|
4589
4719
|
}, [requestOtp, email]);
|
|
4590
4720
|
if (step === "otp") {
|
|
4591
|
-
return /* @__PURE__ */
|
|
4721
|
+
return /* @__PURE__ */ jsx11(OtpStep, {
|
|
4592
4722
|
email,
|
|
4593
4723
|
onSubmit: handleVerifyOtp,
|
|
4594
4724
|
onResend: handleResend,
|
|
@@ -4597,7 +4727,7 @@ function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
|
4597
4727
|
isSubmitting
|
|
4598
4728
|
});
|
|
4599
4729
|
}
|
|
4600
|
-
return /* @__PURE__ */
|
|
4730
|
+
return /* @__PURE__ */ jsx11(EmailStep, {
|
|
4601
4731
|
email,
|
|
4602
4732
|
onEmailChange: setEmail,
|
|
4603
4733
|
onSubmit: handleRequestOtp,
|
|
@@ -4617,14 +4747,14 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
4617
4747
|
/* @__PURE__ */ jsxs9("div", {
|
|
4618
4748
|
className: "skippr:mb-4 skippr:text-center",
|
|
4619
4749
|
children: [
|
|
4620
|
-
/* @__PURE__ */
|
|
4750
|
+
/* @__PURE__ */ jsx11(Mail, {
|
|
4621
4751
|
className: "skippr:mx-auto skippr:mb-2 skippr:size-6 skippr:text-primary"
|
|
4622
4752
|
}),
|
|
4623
|
-
/* @__PURE__ */
|
|
4753
|
+
/* @__PURE__ */ jsx11("p", {
|
|
4624
4754
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
4625
4755
|
children: "Sign in to continue"
|
|
4626
4756
|
}),
|
|
4627
|
-
/* @__PURE__ */
|
|
4757
|
+
/* @__PURE__ */ jsx11("p", {
|
|
4628
4758
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
4629
4759
|
children: "Your email will be used to identify you across sessions"
|
|
4630
4760
|
})
|
|
@@ -4634,7 +4764,7 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
4634
4764
|
onSubmit: handleSubmit,
|
|
4635
4765
|
className: "skippr:flex skippr:flex-col skippr:gap-3",
|
|
4636
4766
|
children: [
|
|
4637
|
-
/* @__PURE__ */
|
|
4767
|
+
/* @__PURE__ */ jsx11("input", {
|
|
4638
4768
|
type: "email",
|
|
4639
4769
|
placeholder: "you@example.com",
|
|
4640
4770
|
value: email,
|
|
@@ -4643,15 +4773,15 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
4643
4773
|
required: true,
|
|
4644
4774
|
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"
|
|
4645
4775
|
}),
|
|
4646
|
-
/* @__PURE__ */
|
|
4776
|
+
/* @__PURE__ */ jsx11(Button, {
|
|
4647
4777
|
type: "submit",
|
|
4648
4778
|
disabled: isSubmitting || !email.trim(),
|
|
4649
4779
|
className: "skippr:w-full",
|
|
4650
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
4780
|
+
children: isSubmitting ? /* @__PURE__ */ jsx11(LoaderCircle, {
|
|
4651
4781
|
className: "skippr:size-4 skippr:animate-spin"
|
|
4652
4782
|
}) : "Continue"
|
|
4653
4783
|
}),
|
|
4654
|
-
error && /* @__PURE__ */
|
|
4784
|
+
error && /* @__PURE__ */ jsx11("p", {
|
|
4655
4785
|
className: "skippr:text-xs skippr:text-center skippr:text-destructive",
|
|
4656
4786
|
children: error
|
|
4657
4787
|
})
|
|
@@ -4661,18 +4791,18 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
4661
4791
|
});
|
|
4662
4792
|
}
|
|
4663
4793
|
function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
4664
|
-
const [digits, setDigits] =
|
|
4665
|
-
const [resendCooldown, setResendCooldown] =
|
|
4794
|
+
const [digits, setDigits] = useState16(Array(OTP_LENGTH).fill(""));
|
|
4795
|
+
const [resendCooldown, setResendCooldown] = useState16(0);
|
|
4666
4796
|
const inputRefs = useRef14([]);
|
|
4667
4797
|
const submittedRef = useRef14(false);
|
|
4668
|
-
|
|
4798
|
+
useEffect22(() => {
|
|
4669
4799
|
inputRefs.current[0]?.focus();
|
|
4670
4800
|
}, []);
|
|
4671
|
-
|
|
4801
|
+
useEffect22(() => {
|
|
4672
4802
|
if (error)
|
|
4673
4803
|
submittedRef.current = false;
|
|
4674
4804
|
}, [error]);
|
|
4675
|
-
|
|
4805
|
+
useEffect22(() => {
|
|
4676
4806
|
if (resendCooldown <= 0)
|
|
4677
4807
|
return;
|
|
4678
4808
|
const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
|
|
@@ -4737,7 +4867,7 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
4737
4867
|
/* @__PURE__ */ jsxs9("div", {
|
|
4738
4868
|
className: "skippr:mb-4 skippr:text-center",
|
|
4739
4869
|
children: [
|
|
4740
|
-
/* @__PURE__ */
|
|
4870
|
+
/* @__PURE__ */ jsx11("p", {
|
|
4741
4871
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
4742
4872
|
children: "Enter verification code"
|
|
4743
4873
|
}),
|
|
@@ -4746,7 +4876,7 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
4746
4876
|
children: [
|
|
4747
4877
|
"We sent a 6-digit code to",
|
|
4748
4878
|
" ",
|
|
4749
|
-
/* @__PURE__ */
|
|
4879
|
+
/* @__PURE__ */ jsx11("span", {
|
|
4750
4880
|
className: "skippr:font-medium skippr:text-foreground",
|
|
4751
4881
|
children: email
|
|
4752
4882
|
})
|
|
@@ -4758,9 +4888,9 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
4758
4888
|
onSubmit: handleSubmit,
|
|
4759
4889
|
className: "skippr:flex skippr:flex-col skippr:gap-3",
|
|
4760
4890
|
children: [
|
|
4761
|
-
/* @__PURE__ */
|
|
4891
|
+
/* @__PURE__ */ jsx11("div", {
|
|
4762
4892
|
className: "skippr:flex skippr:justify-center skippr:gap-1.5",
|
|
4763
|
-
children: digits.map((digit, index2) => /* @__PURE__ */
|
|
4893
|
+
children: digits.map((digit, index2) => /* @__PURE__ */ jsx11("input", {
|
|
4764
4894
|
ref: (el) => {
|
|
4765
4895
|
inputRefs.current[index2] = el;
|
|
4766
4896
|
},
|
|
@@ -4775,29 +4905,29 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
4775
4905
|
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"
|
|
4776
4906
|
}, DIGIT_KEYS[index2]))
|
|
4777
4907
|
}),
|
|
4778
|
-
error && /* @__PURE__ */
|
|
4908
|
+
error && /* @__PURE__ */ jsx11("p", {
|
|
4779
4909
|
className: "skippr:text-xs skippr:text-center skippr:text-destructive",
|
|
4780
4910
|
children: error
|
|
4781
4911
|
}),
|
|
4782
|
-
/* @__PURE__ */
|
|
4912
|
+
/* @__PURE__ */ jsx11(Button, {
|
|
4783
4913
|
type: "submit",
|
|
4784
4914
|
disabled: isSubmitting || digits.join("").length !== OTP_LENGTH,
|
|
4785
4915
|
className: "skippr:w-full",
|
|
4786
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
4916
|
+
children: isSubmitting ? /* @__PURE__ */ jsx11(LoaderCircle, {
|
|
4787
4917
|
className: "skippr:size-4 skippr:animate-spin"
|
|
4788
4918
|
}) : "Verify"
|
|
4789
4919
|
}),
|
|
4790
4920
|
/* @__PURE__ */ jsxs9("div", {
|
|
4791
4921
|
className: "skippr:flex skippr:items-center skippr:justify-between skippr:text-xs",
|
|
4792
4922
|
children: [
|
|
4793
|
-
/* @__PURE__ */
|
|
4923
|
+
/* @__PURE__ */ jsx11("button", {
|
|
4794
4924
|
type: "button",
|
|
4795
4925
|
onClick: onBack,
|
|
4796
4926
|
disabled: isSubmitting,
|
|
4797
4927
|
className: "skippr:text-muted-foreground hover:skippr:text-foreground skippr:transition-colors disabled:skippr:opacity-50",
|
|
4798
4928
|
children: "Change email"
|
|
4799
4929
|
}),
|
|
4800
|
-
/* @__PURE__ */
|
|
4930
|
+
/* @__PURE__ */ jsx11("button", {
|
|
4801
4931
|
type: "button",
|
|
4802
4932
|
onClick: handleResend,
|
|
4803
4933
|
disabled: isSubmitting || resendCooldown > 0,
|
|
@@ -4813,17 +4943,17 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
4813
4943
|
}
|
|
4814
4944
|
|
|
4815
4945
|
// src/components/MessageList.tsx
|
|
4816
|
-
import { useCallback as useCallback14, useLayoutEffect as useLayoutEffect3, useRef as useRef16, useState as
|
|
4946
|
+
import { useCallback as useCallback14, useLayoutEffect as useLayoutEffect3, useRef as useRef16, useState as useState18 } from "react";
|
|
4817
4947
|
|
|
4818
4948
|
// src/components/ChatInput.tsx
|
|
4819
|
-
import { useEffect as
|
|
4820
|
-
import { jsx as
|
|
4949
|
+
import { useEffect as useEffect23, useRef as useRef15, useState as useState17 } from "react";
|
|
4950
|
+
import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
4821
4951
|
var MAX_INPUT_HEIGHT = 60;
|
|
4822
4952
|
function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
4823
|
-
const [inputText, setInputText] =
|
|
4953
|
+
const [inputText, setInputText] = useState17("");
|
|
4824
4954
|
const textareaRef = useRef15(null);
|
|
4825
4955
|
const canSend = inputText.trim().length > 0 && !isSendingChat;
|
|
4826
|
-
|
|
4956
|
+
useEffect23(() => {
|
|
4827
4957
|
if (autoFocus)
|
|
4828
4958
|
textareaRef.current?.focus();
|
|
4829
4959
|
}, [autoFocus]);
|
|
@@ -4854,13 +4984,13 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
4854
4984
|
handleSubmit(e);
|
|
4855
4985
|
}
|
|
4856
4986
|
}
|
|
4857
|
-
return /* @__PURE__ */
|
|
4987
|
+
return /* @__PURE__ */ jsx12("form", {
|
|
4858
4988
|
onSubmit: handleSubmit,
|
|
4859
4989
|
className: "skippr:border-t skippr:border-border skippr:p-3",
|
|
4860
4990
|
children: /* @__PURE__ */ jsxs10("div", {
|
|
4861
4991
|
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",
|
|
4862
4992
|
children: [
|
|
4863
|
-
/* @__PURE__ */
|
|
4993
|
+
/* @__PURE__ */ jsx12("textarea", {
|
|
4864
4994
|
ref: textareaRef,
|
|
4865
4995
|
rows: 1,
|
|
4866
4996
|
value: inputText,
|
|
@@ -4870,12 +5000,12 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
4870
5000
|
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",
|
|
4871
5001
|
style: { maxHeight: `${MAX_INPUT_HEIGHT}px` }
|
|
4872
5002
|
}),
|
|
4873
|
-
/* @__PURE__ */
|
|
5003
|
+
/* @__PURE__ */ jsx12("button", {
|
|
4874
5004
|
type: "submit",
|
|
4875
5005
|
disabled: !canSend,
|
|
4876
5006
|
"aria-label": "Send message",
|
|
4877
5007
|
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"),
|
|
4878
|
-
children: /* @__PURE__ */
|
|
5008
|
+
children: /* @__PURE__ */ jsx12(Send, {
|
|
4879
5009
|
className: "skippr:size-3.5"
|
|
4880
5010
|
})
|
|
4881
5011
|
})
|
|
@@ -4885,7 +5015,7 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
4885
5015
|
}
|
|
4886
5016
|
|
|
4887
5017
|
// src/components/ChatMessage.tsx
|
|
4888
|
-
import { jsx as
|
|
5018
|
+
import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
4889
5019
|
function formatTimestamp(ts) {
|
|
4890
5020
|
return new Date(ts).toLocaleTimeString("en-US", {
|
|
4891
5021
|
hour: "numeric",
|
|
@@ -4895,16 +5025,16 @@ function formatTimestamp(ts) {
|
|
|
4895
5025
|
}
|
|
4896
5026
|
function ChatMessage({ message }) {
|
|
4897
5027
|
const isAgent = message.role === "assistant";
|
|
4898
|
-
return /* @__PURE__ */
|
|
5028
|
+
return /* @__PURE__ */ jsx13("div", {
|
|
4899
5029
|
className: cn("skippr:flex skippr:gap-2", isAgent ? "skippr:items-start" : "skippr:justify-end"),
|
|
4900
5030
|
children: /* @__PURE__ */ jsxs11("div", {
|
|
4901
5031
|
className: cn("skippr:flex skippr:max-w-[80%] skippr:flex-col", isAgent ? "skippr:items-start" : "skippr:items-end"),
|
|
4902
5032
|
children: [
|
|
4903
|
-
/* @__PURE__ */
|
|
5033
|
+
/* @__PURE__ */ jsx13("div", {
|
|
4904
5034
|
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"),
|
|
4905
5035
|
children: message.content
|
|
4906
5036
|
}),
|
|
4907
|
-
message.timestamp && /* @__PURE__ */
|
|
5037
|
+
message.timestamp && /* @__PURE__ */ jsx13("span", {
|
|
4908
5038
|
className: "skippr:mt-1 skippr:px-1 skippr:text-[10px] skippr:text-muted-foreground/60",
|
|
4909
5039
|
children: formatTimestamp(message.timestamp)
|
|
4910
5040
|
})
|
|
@@ -4914,34 +5044,34 @@ function ChatMessage({ message }) {
|
|
|
4914
5044
|
}
|
|
4915
5045
|
|
|
4916
5046
|
// src/components/PlanCard.tsx
|
|
4917
|
-
import { useEffect as
|
|
4918
|
-
import { jsx as
|
|
5047
|
+
import { useEffect as useEffect24 } from "react";
|
|
5048
|
+
import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
4919
5049
|
var APPROVE_MESSAGE = "Yes, go ahead.";
|
|
4920
5050
|
var CANCEL_MESSAGE = "No, cancel that.";
|
|
4921
5051
|
var COMPLETED_CARD_VISIBLE_MS = 2500;
|
|
4922
5052
|
function StepIcon({ status }) {
|
|
4923
5053
|
if (status === "done") {
|
|
4924
|
-
return /* @__PURE__ */
|
|
5054
|
+
return /* @__PURE__ */ jsx14(CircleCheck, {
|
|
4925
5055
|
className: "skippr:size-4 skippr:text-chart-3"
|
|
4926
5056
|
});
|
|
4927
5057
|
}
|
|
4928
5058
|
if (status === "failed") {
|
|
4929
|
-
return /* @__PURE__ */
|
|
5059
|
+
return /* @__PURE__ */ jsx14(CircleX, {
|
|
4930
5060
|
className: "skippr:size-4 skippr:text-destructive"
|
|
4931
5061
|
});
|
|
4932
5062
|
}
|
|
4933
5063
|
if (status === "active") {
|
|
4934
|
-
return /* @__PURE__ */
|
|
5064
|
+
return /* @__PURE__ */ jsx14(Circle, {
|
|
4935
5065
|
className: "skippr:size-4 skippr:fill-primary/30 skippr:text-primary"
|
|
4936
5066
|
});
|
|
4937
5067
|
}
|
|
4938
|
-
return /* @__PURE__ */
|
|
5068
|
+
return /* @__PURE__ */ jsx14(Circle, {
|
|
4939
5069
|
className: "skippr:size-4 skippr:text-muted-foreground/30"
|
|
4940
5070
|
});
|
|
4941
5071
|
}
|
|
4942
5072
|
function PlanCard({ plan, sendChatMessage, onDismiss }) {
|
|
4943
5073
|
const awaitingApproval = plan.state === "proposed";
|
|
4944
|
-
|
|
5074
|
+
useEffect24(() => {
|
|
4945
5075
|
if (plan.state !== "completed")
|
|
4946
5076
|
return;
|
|
4947
5077
|
const timer = setTimeout(onDismiss, COMPLETED_CARD_VISIBLE_MS);
|
|
@@ -4950,19 +5080,19 @@ function PlanCard({ plan, sendChatMessage, onDismiss }) {
|
|
|
4950
5080
|
return /* @__PURE__ */ jsxs12("div", {
|
|
4951
5081
|
className: "skippr:rounded-2xl skippr:rounded-tl-md skippr:bg-card skippr:p-3.5 skippr:ring-2 skippr:ring-brand",
|
|
4952
5082
|
children: [
|
|
4953
|
-
/* @__PURE__ */
|
|
5083
|
+
/* @__PURE__ */ jsx14("p", {
|
|
4954
5084
|
className: "skippr:mb-3 skippr:text-sm skippr:font-semibold skippr:leading-snug skippr:text-foreground",
|
|
4955
5085
|
children: "Plan"
|
|
4956
5086
|
}),
|
|
4957
|
-
/* @__PURE__ */
|
|
5087
|
+
/* @__PURE__ */ jsx14("div", {
|
|
4958
5088
|
className: "skippr:space-y-2",
|
|
4959
5089
|
children: plan.steps.map((step) => /* @__PURE__ */ jsxs12("div", {
|
|
4960
5090
|
className: "skippr:flex skippr:items-center skippr:gap-2",
|
|
4961
5091
|
children: [
|
|
4962
|
-
/* @__PURE__ */
|
|
5092
|
+
/* @__PURE__ */ jsx14(StepIcon, {
|
|
4963
5093
|
status: step.status
|
|
4964
5094
|
}),
|
|
4965
|
-
/* @__PURE__ */
|
|
5095
|
+
/* @__PURE__ */ jsx14("p", {
|
|
4966
5096
|
className: cn("skippr:text-sm skippr:leading-snug", step.status === "done" && "skippr:text-muted-foreground skippr:line-through", step.status === "active" && "skippr:font-medium skippr:text-foreground", step.status === "pending" && "skippr:text-muted-foreground", step.status === "failed" && "skippr:text-destructive"),
|
|
4967
5097
|
children: step.label
|
|
4968
5098
|
})
|
|
@@ -4972,12 +5102,12 @@ function PlanCard({ plan, sendChatMessage, onDismiss }) {
|
|
|
4972
5102
|
awaitingApproval && /* @__PURE__ */ jsxs12("div", {
|
|
4973
5103
|
className: "skippr:mt-3.5 skippr:flex skippr:gap-2",
|
|
4974
5104
|
children: [
|
|
4975
|
-
/* @__PURE__ */
|
|
5105
|
+
/* @__PURE__ */ jsx14(Button, {
|
|
4976
5106
|
className: "skippr:flex-1 skippr:py-2",
|
|
4977
5107
|
onClick: () => sendChatMessage(APPROVE_MESSAGE),
|
|
4978
5108
|
children: "Approve"
|
|
4979
5109
|
}),
|
|
4980
|
-
/* @__PURE__ */
|
|
5110
|
+
/* @__PURE__ */ jsx14(Button, {
|
|
4981
5111
|
variant: "outline",
|
|
4982
5112
|
className: "skippr:flex-1 skippr:py-2",
|
|
4983
5113
|
onClick: () => sendChatMessage(CANCEL_MESSAGE),
|
|
@@ -4990,26 +5120,26 @@ function PlanCard({ plan, sendChatMessage, onDismiss }) {
|
|
|
4990
5120
|
}
|
|
4991
5121
|
|
|
4992
5122
|
// src/components/TypingIndicator.tsx
|
|
4993
|
-
import { jsx as
|
|
5123
|
+
import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
4994
5124
|
function TypingIndicator() {
|
|
4995
|
-
return /* @__PURE__ */
|
|
5125
|
+
return /* @__PURE__ */ jsx15("div", {
|
|
4996
5126
|
className: "skippr:flex skippr:items-start skippr:gap-2 skippr:animate-skippr-tab-fade",
|
|
4997
5127
|
children: /* @__PURE__ */ jsxs13("div", {
|
|
4998
5128
|
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",
|
|
4999
5129
|
children: [
|
|
5000
|
-
/* @__PURE__ */
|
|
5130
|
+
/* @__PURE__ */ jsx15("span", {
|
|
5001
5131
|
children: "Agent is analyzing your screen"
|
|
5002
5132
|
}),
|
|
5003
5133
|
/* @__PURE__ */ jsxs13("span", {
|
|
5004
5134
|
className: "skippr:inline-flex skippr:items-center skippr:gap-[2px]",
|
|
5005
5135
|
children: [
|
|
5006
|
-
/* @__PURE__ */
|
|
5136
|
+
/* @__PURE__ */ jsx15("span", {
|
|
5007
5137
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:0ms]"
|
|
5008
5138
|
}),
|
|
5009
|
-
/* @__PURE__ */
|
|
5139
|
+
/* @__PURE__ */ jsx15("span", {
|
|
5010
5140
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:200ms]"
|
|
5011
5141
|
}),
|
|
5012
|
-
/* @__PURE__ */
|
|
5142
|
+
/* @__PURE__ */ jsx15("span", {
|
|
5013
5143
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:400ms]"
|
|
5014
5144
|
})
|
|
5015
5145
|
]
|
|
@@ -5020,7 +5150,7 @@ function TypingIndicator() {
|
|
|
5020
5150
|
}
|
|
5021
5151
|
|
|
5022
5152
|
// src/components/MessageList.tsx
|
|
5023
|
-
import { jsx as
|
|
5153
|
+
import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
5024
5154
|
var BOTTOM_THRESHOLD_PX = 32;
|
|
5025
5155
|
function isPlanVisible(plan) {
|
|
5026
5156
|
return !!plan && plan.steps.length > 0 && plan.state !== "abandoned";
|
|
@@ -5029,16 +5159,17 @@ function MessageList({
|
|
|
5029
5159
|
messages,
|
|
5030
5160
|
isStreaming,
|
|
5031
5161
|
sendChatMessage,
|
|
5032
|
-
isSendingChat,
|
|
5162
|
+
isSendingChat = false,
|
|
5033
5163
|
plan,
|
|
5034
|
-
autoFocus = false
|
|
5164
|
+
autoFocus = false,
|
|
5165
|
+
readOnly = false
|
|
5035
5166
|
}) {
|
|
5036
5167
|
const containerRef = useRef16(null);
|
|
5037
5168
|
const isPinnedToBottom = useRef16(true);
|
|
5038
5169
|
const lastSeenMessageId = useRef16(undefined);
|
|
5039
|
-
const [showJumpToLatest, setShowJumpToLatest] =
|
|
5170
|
+
const [showJumpToLatest, setShowJumpToLatest] = useState18(false);
|
|
5040
5171
|
const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
|
|
5041
|
-
const [dismissedPlanId, setDismissedPlanId] =
|
|
5172
|
+
const [dismissedPlanId, setDismissedPlanId] = useState18(null);
|
|
5042
5173
|
const dismissPlan = useCallback14(() => {
|
|
5043
5174
|
if (plan)
|
|
5044
5175
|
setDismissedPlanId(plan.planId);
|
|
@@ -5086,35 +5217,38 @@ function MessageList({
|
|
|
5086
5217
|
onScroll: handleScroll,
|
|
5087
5218
|
className: "skippr:min-h-0 skippr:flex-1 skippr:space-y-4 skippr:overflow-y-auto skippr:p-4 skippr:[overflow-anchor:none]",
|
|
5088
5219
|
children: [
|
|
5089
|
-
messages.length === 0 && !showTyping && /* @__PURE__ */
|
|
5220
|
+
messages.length === 0 && !showTyping && (readOnly ? /* @__PURE__ */ jsx16("p", {
|
|
5221
|
+
className: "skippr:px-2 skippr:py-6 skippr:text-center skippr:text-sm skippr:text-muted-foreground",
|
|
5222
|
+
children: "No messages in this conversation yet."
|
|
5223
|
+
}) : /* @__PURE__ */ jsx16(LoadingDots, {
|
|
5090
5224
|
label: "Waiting for conversation to begin..."
|
|
5091
|
-
}),
|
|
5092
|
-
messages.map((message) => /* @__PURE__ */
|
|
5225
|
+
})),
|
|
5226
|
+
messages.map((message) => /* @__PURE__ */ jsx16(ChatMessage, {
|
|
5093
5227
|
message
|
|
5094
5228
|
}, message.id)),
|
|
5095
|
-
showTyping && /* @__PURE__ */
|
|
5229
|
+
showTyping && /* @__PURE__ */ jsx16(TypingIndicator, {})
|
|
5096
5230
|
]
|
|
5097
5231
|
}),
|
|
5098
|
-
showJumpToLatest && /* @__PURE__ */
|
|
5232
|
+
showJumpToLatest && /* @__PURE__ */ jsx16("button", {
|
|
5099
5233
|
type: "button",
|
|
5100
5234
|
onClick: jumpToLatest,
|
|
5101
5235
|
"aria-label": "Jump to latest message",
|
|
5102
5236
|
className: "skippr:-translate-x-1/2 skippr:absolute skippr:bottom-3 skippr:left-1/2 skippr:flex skippr:min-h-11 skippr:min-w-11 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-full skippr:border skippr:border-border skippr:bg-background skippr:p-1.5 skippr:text-foreground skippr:shadow-md skippr:transition-colors skippr:hover:bg-muted",
|
|
5103
|
-
children: /* @__PURE__ */
|
|
5237
|
+
children: /* @__PURE__ */ jsx16(ChevronDown, {
|
|
5104
5238
|
className: "skippr:size-4"
|
|
5105
5239
|
})
|
|
5106
5240
|
})
|
|
5107
5241
|
]
|
|
5108
5242
|
}),
|
|
5109
|
-
isPlanVisible(plan) && plan.planId !== dismissedPlanId && /* @__PURE__ */
|
|
5243
|
+
sendChatMessage && isPlanVisible(plan) && plan.planId !== dismissedPlanId && /* @__PURE__ */ jsx16("div", {
|
|
5110
5244
|
className: "skippr:shrink-0 skippr:border-t skippr:border-border skippr:p-3",
|
|
5111
|
-
children: /* @__PURE__ */
|
|
5245
|
+
children: /* @__PURE__ */ jsx16(PlanCard, {
|
|
5112
5246
|
plan,
|
|
5113
5247
|
sendChatMessage,
|
|
5114
5248
|
onDismiss: dismissPlan
|
|
5115
5249
|
}, plan.planId)
|
|
5116
5250
|
}),
|
|
5117
|
-
/* @__PURE__ */
|
|
5251
|
+
!readOnly && sendChatMessage && /* @__PURE__ */ jsx16(ChatInput, {
|
|
5118
5252
|
sendChatMessage,
|
|
5119
5253
|
isSendingChat,
|
|
5120
5254
|
autoFocus
|
|
@@ -5124,19 +5258,19 @@ function MessageList({
|
|
|
5124
5258
|
}
|
|
5125
5259
|
|
|
5126
5260
|
// src/components/SessionAgenda.tsx
|
|
5127
|
-
import { jsx as
|
|
5261
|
+
import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
5128
5262
|
function SessionAgenda({ phases, hasStarted }) {
|
|
5129
5263
|
if (phases.length === 0 || !hasStarted) {
|
|
5130
|
-
return /* @__PURE__ */
|
|
5264
|
+
return /* @__PURE__ */ jsx17("div", {
|
|
5131
5265
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
5132
|
-
children: /* @__PURE__ */
|
|
5266
|
+
children: /* @__PURE__ */ jsx17(LoadingDots, {
|
|
5133
5267
|
label: "Waiting for agenda to load..."
|
|
5134
5268
|
})
|
|
5135
5269
|
});
|
|
5136
5270
|
}
|
|
5137
|
-
return /* @__PURE__ */
|
|
5271
|
+
return /* @__PURE__ */ jsx17("div", {
|
|
5138
5272
|
className: "skippr:flex-1 skippr:overflow-y-auto skippr:px-4 skippr:py-4",
|
|
5139
|
-
children: /* @__PURE__ */
|
|
5273
|
+
children: /* @__PURE__ */ jsx17("div", {
|
|
5140
5274
|
className: "skippr:space-y-1",
|
|
5141
5275
|
children: phases.map((phase) => {
|
|
5142
5276
|
const isActive = phase.status === "active";
|
|
@@ -5144,29 +5278,29 @@ function SessionAgenda({ phases, hasStarted }) {
|
|
|
5144
5278
|
return /* @__PURE__ */ jsxs15("div", {
|
|
5145
5279
|
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"),
|
|
5146
5280
|
children: [
|
|
5147
|
-
/* @__PURE__ */
|
|
5281
|
+
/* @__PURE__ */ jsx17("div", {
|
|
5148
5282
|
className: "skippr:mt-0.5",
|
|
5149
|
-
children: isCompleted ? /* @__PURE__ */
|
|
5283
|
+
children: isCompleted ? /* @__PURE__ */ jsx17(CircleCheck, {
|
|
5150
5284
|
className: "skippr:size-4 skippr:text-chart-3"
|
|
5151
|
-
}) : isActive ? /* @__PURE__ */
|
|
5285
|
+
}) : isActive ? /* @__PURE__ */ jsx17(Circle, {
|
|
5152
5286
|
className: "skippr:size-4 skippr:fill-primary/30 skippr:text-primary"
|
|
5153
|
-
}) : /* @__PURE__ */
|
|
5287
|
+
}) : /* @__PURE__ */ jsx17(Circle, {
|
|
5154
5288
|
className: "skippr:size-4 skippr:text-muted-foreground/30"
|
|
5155
5289
|
})
|
|
5156
5290
|
}),
|
|
5157
5291
|
/* @__PURE__ */ jsxs15("div", {
|
|
5158
5292
|
className: "skippr:min-w-0 skippr:flex-1",
|
|
5159
5293
|
children: [
|
|
5160
|
-
/* @__PURE__ */
|
|
5294
|
+
/* @__PURE__ */ jsx17("p", {
|
|
5161
5295
|
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"),
|
|
5162
5296
|
children: phase.name
|
|
5163
5297
|
}),
|
|
5164
|
-
phase.highlights.length > 0 && /* @__PURE__ */
|
|
5298
|
+
phase.highlights.length > 0 && /* @__PURE__ */ jsx17("ul", {
|
|
5165
5299
|
className: "skippr:mt-1 skippr:space-y-0.5",
|
|
5166
5300
|
children: phase.highlights.map((text) => /* @__PURE__ */ jsxs15("li", {
|
|
5167
5301
|
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"),
|
|
5168
5302
|
children: [
|
|
5169
|
-
/* @__PURE__ */
|
|
5303
|
+
/* @__PURE__ */ jsx17("span", {
|
|
5170
5304
|
className: "skippr:size-1 skippr:shrink-0 skippr:rounded-full skippr:bg-current"
|
|
5171
5305
|
}),
|
|
5172
5306
|
text
|
|
@@ -5183,61 +5317,20 @@ function SessionAgenda({ phases, hasStarted }) {
|
|
|
5183
5317
|
}
|
|
5184
5318
|
|
|
5185
5319
|
// src/components/SessionWarningBanner.tsx
|
|
5186
|
-
import { jsx as
|
|
5320
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
5187
5321
|
var SESSION_WARNING_THRESHOLD_SECS = 60;
|
|
5188
5322
|
function SessionWarningBanner({ remaining }) {
|
|
5189
5323
|
if (remaining === null || remaining <= 0 || remaining > SESSION_WARNING_THRESHOLD_SECS)
|
|
5190
5324
|
return null;
|
|
5191
|
-
return /* @__PURE__ */
|
|
5325
|
+
return /* @__PURE__ */ jsx18("div", {
|
|
5192
5326
|
"data-testid": "session-warning-banner",
|
|
5193
5327
|
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",
|
|
5194
5328
|
children: "Session ending soon"
|
|
5195
5329
|
});
|
|
5196
5330
|
}
|
|
5197
5331
|
|
|
5198
|
-
// src/components/StartSessionPrompt.tsx
|
|
5199
|
-
import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
5200
|
-
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";
|
|
5201
|
-
function StartSessionPrompt({
|
|
5202
|
-
onStartSession,
|
|
5203
|
-
agentId,
|
|
5204
|
-
agentControls,
|
|
5205
|
-
isStarting,
|
|
5206
|
-
error,
|
|
5207
|
-
label = "Talk to Skippr",
|
|
5208
|
-
canResume = false,
|
|
5209
|
-
onResume
|
|
5210
|
-
}) {
|
|
5211
|
-
return /* @__PURE__ */ jsxs16("div", {
|
|
5212
|
-
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:px-4",
|
|
5213
|
-
children: [
|
|
5214
|
-
canResume && onResume ? /* @__PURE__ */ jsx18("button", {
|
|
5215
|
-
type: "button",
|
|
5216
|
-
onClick: onResume,
|
|
5217
|
-
disabled: isStarting,
|
|
5218
|
-
className: PROMPT_BUTTON,
|
|
5219
|
-
children: isStarting ? "Resuming..." : "Resume session"
|
|
5220
|
-
}) : /* @__PURE__ */ jsx18("button", {
|
|
5221
|
-
type: "button",
|
|
5222
|
-
onClick: () => {
|
|
5223
|
-
if (!agentId)
|
|
5224
|
-
return;
|
|
5225
|
-
onStartSession(agentControls ? { agentId, agentControls } : { agentId });
|
|
5226
|
-
},
|
|
5227
|
-
disabled: isStarting || !agentId,
|
|
5228
|
-
className: PROMPT_BUTTON,
|
|
5229
|
-
children: isStarting ? "Starting..." : label
|
|
5230
|
-
}),
|
|
5231
|
-
error && /* @__PURE__ */ jsx18("p", {
|
|
5232
|
-
className: "skippr:text-xs skippr:text-destructive",
|
|
5233
|
-
children: error
|
|
5234
|
-
})
|
|
5235
|
-
]
|
|
5236
|
-
});
|
|
5237
|
-
}
|
|
5238
|
-
|
|
5239
5332
|
// src/components/Sidebar.tsx
|
|
5240
|
-
import { jsx as jsx19, jsxs as
|
|
5333
|
+
import { jsx as jsx19, jsxs as jsxs16, Fragment as Fragment3 } from "react/jsx-runtime";
|
|
5241
5334
|
var PANEL_GAP_PX = 12;
|
|
5242
5335
|
var PANEL_VIEWPORT_MARGIN_PX = 24;
|
|
5243
5336
|
var PANEL_MAX_HEIGHT_PX = 460;
|
|
@@ -5254,9 +5347,6 @@ function Sidebar({
|
|
|
5254
5347
|
isPausing,
|
|
5255
5348
|
isPaused,
|
|
5256
5349
|
error,
|
|
5257
|
-
startSession,
|
|
5258
|
-
resumeSession,
|
|
5259
|
-
resumableSession,
|
|
5260
5350
|
isPanelOpen,
|
|
5261
5351
|
position,
|
|
5262
5352
|
isAuthenticated,
|
|
@@ -5268,17 +5358,26 @@ function Sidebar({
|
|
|
5268
5358
|
sidebarTab: activeTab,
|
|
5269
5359
|
setSidebarTab: setActiveTab,
|
|
5270
5360
|
autoFocusChat,
|
|
5271
|
-
agentId,
|
|
5272
5361
|
agentMode,
|
|
5273
|
-
|
|
5362
|
+
displayModules
|
|
5274
5363
|
} = useLiveAgent();
|
|
5275
|
-
const internalCtx =
|
|
5364
|
+
const internalCtx = useContext11(LiveAgentContext);
|
|
5365
|
+
const defaultAgentId = internalCtx?.defaultAgentId ?? null;
|
|
5366
|
+
const startDefaultSession = internalCtx?.startDefaultSession ?? (() => {});
|
|
5367
|
+
const talkDisabled = !(internalCtx?.hasResolvedModules ?? false);
|
|
5276
5368
|
const usesHostAuth = internalCtx?.usesHostAuth ?? false;
|
|
5277
5369
|
const authFailed = internalCtx?.authFailed ?? false;
|
|
5370
|
+
const idleHistory = internalCtx?.idleHistory ?? {
|
|
5371
|
+
messages: [],
|
|
5372
|
+
phases: [],
|
|
5373
|
+
isLoading: false
|
|
5374
|
+
};
|
|
5278
5375
|
const launcherBottomPx = internalCtx?.launcherBottomPx ?? DEFAULT_LAUNCHER_BOTTOM_PX;
|
|
5279
5376
|
const popsDown = internalCtx?.popsDown ?? false;
|
|
5280
5377
|
const panelExpanded = internalCtx?.panelExpanded ?? false;
|
|
5281
|
-
const
|
|
5378
|
+
const defaultModule = displayModules.find((m) => m.id === defaultAgentId) ?? null;
|
|
5379
|
+
const displayedMode = agentMode ?? defaultModule?.mode ?? null;
|
|
5380
|
+
const showAgenda = displayedMode !== AGENT_MODE.AlwaysOn;
|
|
5282
5381
|
const isFloating = variant === "floating";
|
|
5283
5382
|
const isSidebar = variant === "sidebar";
|
|
5284
5383
|
const inSession = isConnected || isStarting || isPausing;
|
|
@@ -5291,7 +5390,7 @@ function Sidebar({
|
|
|
5291
5390
|
height: panelExpanded ? availableHeight : `min(${PANEL_MAX_HEIGHT_PX}px, ${availableHeight})`
|
|
5292
5391
|
};
|
|
5293
5392
|
}
|
|
5294
|
-
|
|
5393
|
+
useEffect25(() => {
|
|
5295
5394
|
if (!isSidebar)
|
|
5296
5395
|
return;
|
|
5297
5396
|
const prop = position === "right" ? "marginRight" : "marginLeft";
|
|
@@ -5305,7 +5404,7 @@ function Sidebar({
|
|
|
5305
5404
|
document.body.style.transition = "";
|
|
5306
5405
|
};
|
|
5307
5406
|
}, [isSidebar, isPanelOpen, position]);
|
|
5308
|
-
return /* @__PURE__ */
|
|
5407
|
+
return /* @__PURE__ */ jsxs16("div", {
|
|
5309
5408
|
ref: internalCtx?.panelRef,
|
|
5310
5409
|
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: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,height] skippr:duration-300 skippr:ease-in-out", isFloating && (popsDown ? position === "right" ? "skippr:origin-top-right" : "skippr:origin-top-left" : 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"),
|
|
5311
5410
|
style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined, ...floatingStyle },
|
|
@@ -5316,19 +5415,17 @@ function Sidebar({
|
|
|
5316
5415
|
isPaused,
|
|
5317
5416
|
isPausing,
|
|
5318
5417
|
isDisconnecting,
|
|
5319
|
-
canResume: resumableSession !== null,
|
|
5320
|
-
onStartSession: startSession,
|
|
5321
|
-
onResume: resumeSession,
|
|
5322
5418
|
isStarting,
|
|
5323
5419
|
error,
|
|
5324
5420
|
activeTab,
|
|
5325
5421
|
onTabChange: setActiveTab,
|
|
5326
5422
|
hideControls,
|
|
5327
|
-
startSessionLabel,
|
|
5328
5423
|
autoFocusChat,
|
|
5329
|
-
|
|
5330
|
-
|
|
5331
|
-
|
|
5424
|
+
showAgenda,
|
|
5425
|
+
idleHistory,
|
|
5426
|
+
onTalk: startDefaultSession,
|
|
5427
|
+
talkLabel: startSessionLabel,
|
|
5428
|
+
talkDisabled
|
|
5332
5429
|
}) : usesHostAuth || isValidating ? /* @__PURE__ */ jsx19("div", {
|
|
5333
5430
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
5334
5431
|
children: /* @__PURE__ */ jsx19(LoadingDots, {
|
|
@@ -5348,35 +5445,31 @@ function AuthenticatedContent({
|
|
|
5348
5445
|
isPaused,
|
|
5349
5446
|
isPausing,
|
|
5350
5447
|
isDisconnecting,
|
|
5351
|
-
canResume,
|
|
5352
|
-
onStartSession,
|
|
5353
|
-
onResume,
|
|
5354
5448
|
isStarting,
|
|
5355
5449
|
error,
|
|
5356
5450
|
activeTab,
|
|
5357
5451
|
onTabChange,
|
|
5358
5452
|
hideControls,
|
|
5359
|
-
startSessionLabel,
|
|
5360
5453
|
autoFocusChat,
|
|
5361
|
-
|
|
5362
|
-
|
|
5363
|
-
|
|
5454
|
+
showAgenda,
|
|
5455
|
+
idleHistory,
|
|
5456
|
+
onTalk,
|
|
5457
|
+
talkLabel,
|
|
5458
|
+
talkDisabled
|
|
5364
5459
|
}) {
|
|
5365
5460
|
const inSession = isConnected || isStarting || isPaused || isPausing;
|
|
5366
5461
|
const effectiveTab = showAgenda ? activeTab : "chat";
|
|
5367
5462
|
let transitionLabel = null;
|
|
5368
5463
|
if (isStarting && !isConnected) {
|
|
5369
5464
|
transitionLabel = "Reconnecting...";
|
|
5370
|
-
} else if (isPaused) {
|
|
5371
|
-
transitionLabel = "Paused";
|
|
5372
5465
|
}
|
|
5373
|
-
return /* @__PURE__ */
|
|
5466
|
+
return /* @__PURE__ */ jsxs16(Fragment3, {
|
|
5374
5467
|
children: [
|
|
5375
5468
|
isConnected && /* @__PURE__ */ jsx19(ConnectedBanner, {}),
|
|
5376
|
-
showAgenda && /* @__PURE__ */
|
|
5469
|
+
showAgenda && /* @__PURE__ */ jsxs16("div", {
|
|
5377
5470
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-1",
|
|
5378
5471
|
children: [
|
|
5379
|
-
/* @__PURE__ */
|
|
5472
|
+
/* @__PURE__ */ jsxs16("button", {
|
|
5380
5473
|
type: "button",
|
|
5381
5474
|
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-1.5 skippr:text-sm skippr:font-medium skippr:transition-all", activeTab === "chat" ? "skippr:text-foreground" : "skippr:text-muted-foreground skippr:hover:text-foreground"),
|
|
5382
5475
|
onClick: () => onTabChange("chat"),
|
|
@@ -5390,7 +5483,7 @@ function AuthenticatedContent({
|
|
|
5390
5483
|
})
|
|
5391
5484
|
]
|
|
5392
5485
|
}),
|
|
5393
|
-
/* @__PURE__ */
|
|
5486
|
+
/* @__PURE__ */ jsxs16("button", {
|
|
5394
5487
|
type: "button",
|
|
5395
5488
|
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-1.5 skippr:text-sm skippr:font-medium skippr:transition-all", activeTab === "agenda" ? "skippr:text-foreground" : "skippr:text-muted-foreground skippr:hover:text-foreground"),
|
|
5396
5489
|
onClick: () => onTabChange("agenda"),
|
|
@@ -5413,7 +5506,7 @@ function AuthenticatedContent({
|
|
|
5413
5506
|
children: /* @__PURE__ */ jsx19(LoadingDots, {
|
|
5414
5507
|
label: "Ending session..."
|
|
5415
5508
|
})
|
|
5416
|
-
}) : inSession ? /* @__PURE__ */
|
|
5509
|
+
}) : inSession ? /* @__PURE__ */ jsxs16(Fragment3, {
|
|
5417
5510
|
children: [
|
|
5418
5511
|
transitionLabel && /* @__PURE__ */ jsx19("div", {
|
|
5419
5512
|
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",
|
|
@@ -5424,26 +5517,21 @@ function AuthenticatedContent({
|
|
|
5424
5517
|
autoFocusChat
|
|
5425
5518
|
})
|
|
5426
5519
|
]
|
|
5427
|
-
}) : /* @__PURE__ */ jsx19(
|
|
5428
|
-
|
|
5429
|
-
|
|
5430
|
-
|
|
5431
|
-
|
|
5432
|
-
|
|
5433
|
-
|
|
5434
|
-
|
|
5435
|
-
label: startSessionLabel,
|
|
5436
|
-
canResume,
|
|
5437
|
-
onResume
|
|
5438
|
-
})
|
|
5439
|
-
}, `${activeTab}-empty`)
|
|
5520
|
+
}) : /* @__PURE__ */ jsx19(IdleHistory, {
|
|
5521
|
+
activeTab: effectiveTab,
|
|
5522
|
+
history: idleHistory,
|
|
5523
|
+
onTalk,
|
|
5524
|
+
talkLabel,
|
|
5525
|
+
talkDisabled,
|
|
5526
|
+
error
|
|
5527
|
+
})
|
|
5440
5528
|
}),
|
|
5441
5529
|
!hideControls && /* @__PURE__ */ jsx19("div", {
|
|
5442
5530
|
className: "skippr:shrink-0 skippr:border-t skippr:border-border",
|
|
5443
|
-
children: /* @__PURE__ */
|
|
5531
|
+
children: /* @__PURE__ */ jsxs16("div", {
|
|
5444
5532
|
className: "skippr:flex skippr:items-center skippr:justify-center skippr:gap-1 skippr:px-4 skippr:pt-1.5 skippr:pb-2 skippr:text-[10px] skippr:text-muted-foreground",
|
|
5445
5533
|
children: [
|
|
5446
|
-
/* @__PURE__ */
|
|
5534
|
+
/* @__PURE__ */ jsxs16("svg", {
|
|
5447
5535
|
viewBox: "21 21 109 109",
|
|
5448
5536
|
className: "skippr:size-3",
|
|
5449
5537
|
fill: "none",
|
|
@@ -5467,7 +5555,7 @@ function AuthenticatedContent({
|
|
|
5467
5555
|
});
|
|
5468
5556
|
}
|
|
5469
5557
|
function AuthError() {
|
|
5470
|
-
return /* @__PURE__ */
|
|
5558
|
+
return /* @__PURE__ */ jsxs16("div", {
|
|
5471
5559
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:px-6 skippr:py-4 skippr:text-center",
|
|
5472
5560
|
children: [
|
|
5473
5561
|
/* @__PURE__ */ jsx19(CircleAlert, {
|
|
@@ -5490,6 +5578,60 @@ function ConnectedBanner() {
|
|
|
5490
5578
|
remaining
|
|
5491
5579
|
});
|
|
5492
5580
|
}
|
|
5581
|
+
function IdleHistory({
|
|
5582
|
+
activeTab,
|
|
5583
|
+
history: history2,
|
|
5584
|
+
onTalk,
|
|
5585
|
+
talkLabel,
|
|
5586
|
+
talkDisabled,
|
|
5587
|
+
error
|
|
5588
|
+
}) {
|
|
5589
|
+
if (history2.isLoading) {
|
|
5590
|
+
return /* @__PURE__ */ jsx19("div", {
|
|
5591
|
+
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
5592
|
+
children: /* @__PURE__ */ jsx19(LoadingDots, {
|
|
5593
|
+
label: "Loading conversation..."
|
|
5594
|
+
})
|
|
5595
|
+
});
|
|
5596
|
+
}
|
|
5597
|
+
return /* @__PURE__ */ jsxs16("div", {
|
|
5598
|
+
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
|
|
5599
|
+
children: [
|
|
5600
|
+
activeTab === "agenda" ? /* @__PURE__ */ jsx19("div", {
|
|
5601
|
+
className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto",
|
|
5602
|
+
children: /* @__PURE__ */ jsx19(SessionAgenda, {
|
|
5603
|
+
phases: history2.phases,
|
|
5604
|
+
hasStarted: history2.phases.length > 0
|
|
5605
|
+
})
|
|
5606
|
+
}) : /* @__PURE__ */ jsx19(MessageList, {
|
|
5607
|
+
messages: history2.messages,
|
|
5608
|
+
isStreaming: false,
|
|
5609
|
+
readOnly: true
|
|
5610
|
+
}),
|
|
5611
|
+
/* @__PURE__ */ jsxs16("div", {
|
|
5612
|
+
className: "skippr:shrink-0 skippr:border-t skippr:border-border skippr:p-3",
|
|
5613
|
+
children: [
|
|
5614
|
+
/* @__PURE__ */ jsxs16("button", {
|
|
5615
|
+
type: "button",
|
|
5616
|
+
onClick: onTalk,
|
|
5617
|
+
disabled: talkDisabled,
|
|
5618
|
+
className: "skippr:flex skippr:w-full skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:gap-2 skippr:rounded-xl skippr:bg-primary skippr:px-4 skippr:py-3 skippr:font-semibold skippr:text-[13px] skippr:text-primary-foreground skippr:transition-colors skippr:hover:bg-primary/90 skippr:disabled:cursor-not-allowed skippr:disabled:opacity-50",
|
|
5619
|
+
children: [
|
|
5620
|
+
/* @__PURE__ */ jsx19(Mic, {
|
|
5621
|
+
className: "skippr:size-4"
|
|
5622
|
+
}),
|
|
5623
|
+
talkLabel
|
|
5624
|
+
]
|
|
5625
|
+
}),
|
|
5626
|
+
error && /* @__PURE__ */ jsx19("p", {
|
|
5627
|
+
className: "skippr:mt-2 skippr:text-center skippr:text-xs skippr:text-destructive",
|
|
5628
|
+
children: error
|
|
5629
|
+
})
|
|
5630
|
+
]
|
|
5631
|
+
})
|
|
5632
|
+
]
|
|
5633
|
+
}, `idle-${activeTab}`);
|
|
5634
|
+
}
|
|
5493
5635
|
function ConnectedBody({
|
|
5494
5636
|
activeTab,
|
|
5495
5637
|
autoFocusChat
|
|
@@ -5497,7 +5639,8 @@ function ConnectedBody({
|
|
|
5497
5639
|
const { allMessages, agentState, sendChatMessage, isSendingChat } = useCombinedMessages();
|
|
5498
5640
|
const { phases } = usePhaseUpdates();
|
|
5499
5641
|
const plan = usePlanUpdates();
|
|
5500
|
-
const { agentControls } = useLiveAgent();
|
|
5642
|
+
const { agentControls, isPaused } = useLiveAgent();
|
|
5643
|
+
const { isHeld } = useSessionHoldContext();
|
|
5501
5644
|
if (activeTab === "agenda") {
|
|
5502
5645
|
return /* @__PURE__ */ jsx19("div", {
|
|
5503
5646
|
className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto skippr:animate-skippr-tab-fade",
|
|
@@ -5515,18 +5658,19 @@ function ConnectedBody({
|
|
|
5515
5658
|
sendChatMessage,
|
|
5516
5659
|
isSendingChat,
|
|
5517
5660
|
plan: agentControls?.actions ? plan : null,
|
|
5518
|
-
autoFocus: autoFocusChat
|
|
5661
|
+
autoFocus: autoFocusChat,
|
|
5662
|
+
readOnly: isPaused || isHeld
|
|
5519
5663
|
})
|
|
5520
5664
|
}, "chat");
|
|
5521
5665
|
}
|
|
5522
5666
|
|
|
5523
5667
|
// src/components/SidebarTrigger.tsx
|
|
5524
|
-
import { useContext as
|
|
5668
|
+
import { useContext as useContext12 } from "react";
|
|
5525
5669
|
|
|
5526
5670
|
// src/components/Logo.tsx
|
|
5527
|
-
import { jsx as jsx20, jsxs as
|
|
5671
|
+
import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
5528
5672
|
function Logo({ className }) {
|
|
5529
|
-
return /* @__PURE__ */
|
|
5673
|
+
return /* @__PURE__ */ jsxs17("svg", {
|
|
5530
5674
|
width: "1em",
|
|
5531
5675
|
height: "1em",
|
|
5532
5676
|
viewBox: "0 0 200 200",
|
|
@@ -5542,7 +5686,7 @@ function Logo({ className }) {
|
|
|
5542
5686
|
rx: "40",
|
|
5543
5687
|
fill: "#2D2D3F"
|
|
5544
5688
|
}),
|
|
5545
|
-
/* @__PURE__ */
|
|
5689
|
+
/* @__PURE__ */ jsxs17("g", {
|
|
5546
5690
|
transform: "translate(100 100) scale(0.8) translate(-100 -100)",
|
|
5547
5691
|
children: [
|
|
5548
5692
|
/* @__PURE__ */ jsx20("path", {
|
|
@@ -5573,7 +5717,7 @@ function SidebarTrigger() {
|
|
|
5573
5717
|
isStarting,
|
|
5574
5718
|
isPausing
|
|
5575
5719
|
} = useLiveAgent();
|
|
5576
|
-
const internalCtx =
|
|
5720
|
+
const internalCtx = useContext12(LiveAgentContext);
|
|
5577
5721
|
const launcherBottomPx = internalCtx?.launcherBottomPx ?? DEFAULT_LAUNCHER_BOTTOM_PX;
|
|
5578
5722
|
const popsDown = internalCtx?.popsDown ?? false;
|
|
5579
5723
|
if (isMinimized || isConnected || isStarting || isPausing)
|
|
@@ -5595,7 +5739,7 @@ function SidebarTrigger() {
|
|
|
5595
5739
|
}
|
|
5596
5740
|
|
|
5597
5741
|
// src/components/LiveAgent.tsx
|
|
5598
|
-
import { jsx as jsx22, jsxs as
|
|
5742
|
+
import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
5599
5743
|
function readSavedLauncherBottom() {
|
|
5600
5744
|
try {
|
|
5601
5745
|
const saved = Number.parseInt(localStorage.getItem("skippr_widget_bottom") ?? "", 10);
|
|
@@ -5614,7 +5758,7 @@ function PlanPanelOpener() {
|
|
|
5614
5758
|
const plan = usePlanUpdates();
|
|
5615
5759
|
const { expandPanel } = useLiveAgent();
|
|
5616
5760
|
const surfacedPlanIdRef = useRef17(null);
|
|
5617
|
-
|
|
5761
|
+
useEffect26(() => {
|
|
5618
5762
|
if (plan?.state !== "proposed" || surfacedPlanIdRef.current === plan.planId)
|
|
5619
5763
|
return;
|
|
5620
5764
|
surfacedPlanIdRef.current = plan.planId;
|
|
@@ -5654,7 +5798,7 @@ function LiveAgent(props) {
|
|
|
5654
5798
|
const auth = useAuth({ appKey });
|
|
5655
5799
|
const usesHostAuth = !!getUserToken || !!userToken || !!authTokenProp;
|
|
5656
5800
|
const effectiveAuthToken = usesHostAuth ? authTokenProp : auth.authToken ?? undefined;
|
|
5657
|
-
const [activeModule, setActiveModule] =
|
|
5801
|
+
const [activeModule, setActiveModule] = useState19(null);
|
|
5658
5802
|
const minimizeOnSessionStart = useCallback15(() => {
|
|
5659
5803
|
if (minimizable) {
|
|
5660
5804
|
setIsMinimized(true);
|
|
@@ -5708,27 +5852,28 @@ function LiveAgent(props) {
|
|
|
5708
5852
|
disconnect();
|
|
5709
5853
|
}, [disconnect]);
|
|
5710
5854
|
const isSessionLive = connection !== null || isStarting || isPausing || isDisconnecting;
|
|
5711
|
-
const [isPanelOpen, setIsPanelOpen] =
|
|
5712
|
-
const [isMinimized, setIsMinimized] =
|
|
5713
|
-
const [sidebarTab, setSidebarTab] =
|
|
5714
|
-
const [phasesSnapshot, setPhasesSnapshot] =
|
|
5715
|
-
const [textMode, setTextMode] =
|
|
5716
|
-
const [panelExpanded, setPanelExpanded] =
|
|
5855
|
+
const [isPanelOpen, setIsPanelOpen] = useState19(defaultOpen);
|
|
5856
|
+
const [isMinimized, setIsMinimized] = useState19(minimizable && !defaultOpen);
|
|
5857
|
+
const [sidebarTab, setSidebarTab] = useState19("agenda");
|
|
5858
|
+
const [phasesSnapshot, setPhasesSnapshot] = useState19([]);
|
|
5859
|
+
const [textMode, setTextMode] = useState19(false);
|
|
5860
|
+
const [panelExpanded, setPanelExpanded] = useState19(false);
|
|
5717
5861
|
const togglePanelExpanded = useCallback15(() => setPanelExpanded((prev) => !prev), []);
|
|
5718
5862
|
const panelRef = useRef17(null);
|
|
5719
5863
|
const controlBarRef = useRef17(null);
|
|
5720
|
-
const [isDragging, setIsDragging] =
|
|
5864
|
+
const [isDragging, setIsDragging] = useState19(false);
|
|
5721
5865
|
const setTextModeState = useCallback15((enabled) => {
|
|
5722
5866
|
setTextMode(enabled);
|
|
5723
5867
|
}, []);
|
|
5724
5868
|
const isConnected = connection !== null;
|
|
5725
5869
|
const showControlBar = isConnected || isStarting || isPausing;
|
|
5726
|
-
|
|
5870
|
+
useEffect26(() => {
|
|
5727
5871
|
if (!isConnected)
|
|
5728
5872
|
setTextModeState(false);
|
|
5729
5873
|
}, [isConnected, setTextModeState]);
|
|
5730
5874
|
const {
|
|
5731
5875
|
modules: availableModules,
|
|
5876
|
+
defaultSelection,
|
|
5732
5877
|
isLoading: isLoadingModules,
|
|
5733
5878
|
hasResolved: hasResolvedModules,
|
|
5734
5879
|
error: modulesError,
|
|
@@ -5736,15 +5881,15 @@ function LiveAgent(props) {
|
|
|
5736
5881
|
} = useAvailableModules({
|
|
5737
5882
|
enabled: !isSessionLive,
|
|
5738
5883
|
bearerToken,
|
|
5739
|
-
authedFetch
|
|
5884
|
+
authedFetch,
|
|
5885
|
+
agentId: hostAgentId ?? undefined
|
|
5740
5886
|
});
|
|
5741
5887
|
const { goals: adoptionGoals, attendGoal } = useAdoptionGoals({
|
|
5742
5888
|
enabled: !isSessionLive,
|
|
5743
5889
|
bearerToken,
|
|
5744
5890
|
authedFetch
|
|
5745
5891
|
});
|
|
5746
|
-
const
|
|
5747
|
-
const operatingModule = activeModule ?? (hostAgentId ? displayModules[0] ?? null : null);
|
|
5892
|
+
const operatingModule = activeModule ?? (hostAgentId ? availableModules[0] ?? null : null);
|
|
5748
5893
|
const agentId = operatingModule?.id ?? null;
|
|
5749
5894
|
const agentControls = operatingModule?.controls ?? hostAgentControls;
|
|
5750
5895
|
const agentMode = operatingModule?.mode ?? null;
|
|
@@ -5781,9 +5926,9 @@ function LiveAgent(props) {
|
|
|
5781
5926
|
adoptionGoalId: goal.goalId
|
|
5782
5927
|
});
|
|
5783
5928
|
}, [attendGoal, availableModules, startSession]);
|
|
5784
|
-
const [welcomeDismissed, setWelcomeDismissed] =
|
|
5929
|
+
const [welcomeDismissed, setWelcomeDismissed] = useState19(false);
|
|
5785
5930
|
const dismissWelcome = useCallback15(() => setWelcomeDismissed(true), []);
|
|
5786
|
-
const [currentPosition, setCurrentPosition] =
|
|
5931
|
+
const [currentPosition, setCurrentPosition] = useState19(() => {
|
|
5787
5932
|
try {
|
|
5788
5933
|
const saved = localStorage.getItem("skippr_widget_position");
|
|
5789
5934
|
if (saved === "left" || saved === "right")
|
|
@@ -5800,8 +5945,8 @@ function LiveAgent(props) {
|
|
|
5800
5945
|
const savedLauncherBottom = readSavedLauncherBottom();
|
|
5801
5946
|
const hasDraggedRef = useRef17(savedLauncherBottom !== null);
|
|
5802
5947
|
const verticalAlignRef = useRef17(verticalAlign);
|
|
5803
|
-
const [launcherBottomPx, setLauncherBottomPxState] =
|
|
5804
|
-
const [popsDown, setPopsDown] =
|
|
5948
|
+
const [launcherBottomPx, setLauncherBottomPxState] = useState19(() => savedLauncherBottom !== null ? clampLauncherBottom(savedLauncherBottom) : verticalAlignToBottomPx(verticalAlign));
|
|
5949
|
+
const [popsDown, setPopsDown] = useState19(() => launcherPopsDown(launcherBottomPx));
|
|
5805
5950
|
const setLauncherBottomPx = useCallback15((px) => {
|
|
5806
5951
|
hasDraggedRef.current = true;
|
|
5807
5952
|
setLauncherBottomPxState(px);
|
|
@@ -5816,7 +5961,7 @@ function LiveAgent(props) {
|
|
|
5816
5961
|
setPositionWithPersist(side);
|
|
5817
5962
|
setLauncherBottomPx(bottomPx);
|
|
5818
5963
|
}, [setPositionWithPersist, setLauncherBottomPx]);
|
|
5819
|
-
|
|
5964
|
+
useEffect26(() => {
|
|
5820
5965
|
const syncToViewport = () => {
|
|
5821
5966
|
const next = hasDraggedRef.current ? clampLauncherBottom(launcherBottomPxRef.current) : verticalAlignToBottomPx(verticalAlignRef.current);
|
|
5822
5967
|
setLauncherBottomPxState(next);
|
|
@@ -5844,6 +5989,32 @@ function LiveAgent(props) {
|
|
|
5844
5989
|
minimizePanel();
|
|
5845
5990
|
}, [pauseSession, minimizePanel]);
|
|
5846
5991
|
const isAuthenticated = bearerToken !== null || auth.isAuthenticated;
|
|
5992
|
+
const defaultAgentId = hostAgentId ?? defaultSelection.agentId;
|
|
5993
|
+
const startDefaultSession = useCallback15(() => {
|
|
5994
|
+
const target = availableModules.find((m) => m.id === defaultAgentId);
|
|
5995
|
+
if (!target)
|
|
5996
|
+
return;
|
|
5997
|
+
startSession({
|
|
5998
|
+
agentId: target.id,
|
|
5999
|
+
agentControls: target.controls,
|
|
6000
|
+
existingSessionId: defaultSelection.sessionId ?? undefined
|
|
6001
|
+
});
|
|
6002
|
+
}, [defaultAgentId, availableModules, defaultSelection.sessionId, startSession]);
|
|
6003
|
+
const idleHistoryEnabled = !isSessionLive && !isPaused && isPanelOpen && isAuthenticated;
|
|
6004
|
+
const {
|
|
6005
|
+
messages: idleHistoryMessages,
|
|
6006
|
+
phases: idleHistoryPhases,
|
|
6007
|
+
isLoading: isLoadingHistory
|
|
6008
|
+
} = useSessionHistory({
|
|
6009
|
+
agentId: defaultAgentId ?? undefined,
|
|
6010
|
+
enabled: idleHistoryEnabled,
|
|
6011
|
+
authedFetch
|
|
6012
|
+
});
|
|
6013
|
+
const idleHistory = useMemo6(() => ({
|
|
6014
|
+
messages: idleHistoryMessages,
|
|
6015
|
+
phases: idleHistoryPhases,
|
|
6016
|
+
isLoading: isLoadingHistory
|
|
6017
|
+
}), [idleHistoryMessages, idleHistoryPhases, isLoadingHistory]);
|
|
5847
6018
|
const ctx = useMemo6(() => ({
|
|
5848
6019
|
connection,
|
|
5849
6020
|
shouldConnect,
|
|
@@ -5861,6 +6032,7 @@ function LiveAgent(props) {
|
|
|
5861
6032
|
pauseTimeoutSeconds,
|
|
5862
6033
|
resumableSession,
|
|
5863
6034
|
historyMessages,
|
|
6035
|
+
idleHistory,
|
|
5864
6036
|
phasesSnapshot,
|
|
5865
6037
|
setPhasesSnapshot,
|
|
5866
6038
|
isPanelOpen,
|
|
@@ -5902,8 +6074,10 @@ function LiveAgent(props) {
|
|
|
5902
6074
|
agentId,
|
|
5903
6075
|
agentMode,
|
|
5904
6076
|
agentControls,
|
|
5905
|
-
displayModules,
|
|
6077
|
+
displayModules: availableModules,
|
|
5906
6078
|
activeModule,
|
|
6079
|
+
defaultAgentId,
|
|
6080
|
+
startDefaultSession,
|
|
5907
6081
|
isLoadingModules,
|
|
5908
6082
|
modulesError,
|
|
5909
6083
|
refetchModules,
|
|
@@ -5928,6 +6102,7 @@ function LiveAgent(props) {
|
|
|
5928
6102
|
pauseTimeoutSeconds,
|
|
5929
6103
|
resumableSession,
|
|
5930
6104
|
historyMessages,
|
|
6105
|
+
idleHistory,
|
|
5931
6106
|
phasesSnapshot,
|
|
5932
6107
|
isPanelOpen,
|
|
5933
6108
|
openPanel,
|
|
@@ -5964,8 +6139,10 @@ function LiveAgent(props) {
|
|
|
5964
6139
|
agentId,
|
|
5965
6140
|
agentMode,
|
|
5966
6141
|
agentControls,
|
|
5967
|
-
|
|
6142
|
+
availableModules,
|
|
5968
6143
|
activeModule,
|
|
6144
|
+
defaultAgentId,
|
|
6145
|
+
startDefaultSession,
|
|
5969
6146
|
isLoadingModules,
|
|
5970
6147
|
modulesError,
|
|
5971
6148
|
refetchModules,
|
|
@@ -5976,7 +6153,7 @@ function LiveAgent(props) {
|
|
|
5976
6153
|
]);
|
|
5977
6154
|
return /* @__PURE__ */ jsx22(LiveAgentContext.Provider, {
|
|
5978
6155
|
value: ctx,
|
|
5979
|
-
children: /* @__PURE__ */
|
|
6156
|
+
children: /* @__PURE__ */ jsxs18(LiveKitRoom, {
|
|
5980
6157
|
serverUrl: connection?.livekitUrl,
|
|
5981
6158
|
token: connection?.token,
|
|
5982
6159
|
connect: shouldConnect,
|
|
@@ -5988,7 +6165,7 @@ function LiveAgent(props) {
|
|
|
5988
6165
|
pendingScreenStream
|
|
5989
6166
|
}),
|
|
5990
6167
|
connection && captureMode === CAPTURE_MODE.Auto && /* @__PURE__ */ jsx22(DomCapture, {}),
|
|
5991
|
-
/* @__PURE__ */
|
|
6168
|
+
/* @__PURE__ */ jsxs18(ShadowHost, {
|
|
5992
6169
|
children: [
|
|
5993
6170
|
connection && captureMode === CAPTURE_MODE.Auto && agentControls?.highlight && /* @__PURE__ */ jsx22(HighlightOverlay, {}),
|
|
5994
6171
|
connection && captureMode === CAPTURE_MODE.Auto && agentControls?.actions && /* @__PURE__ */ jsx22(PageActionHandler, {}),
|
|
@@ -5996,22 +6173,24 @@ function LiveAgent(props) {
|
|
|
5996
6173
|
connection && captureMode === CAPTURE_MODE.Auto && (agentControls?.highlight || agentControls?.actions) && /* @__PURE__ */ jsx22(AgentCursorMount, {
|
|
5997
6174
|
animated: shouldAnimateCursor
|
|
5998
6175
|
}),
|
|
5999
|
-
/* @__PURE__ */
|
|
6000
|
-
|
|
6001
|
-
|
|
6002
|
-
|
|
6003
|
-
|
|
6004
|
-
|
|
6005
|
-
|
|
6006
|
-
|
|
6007
|
-
|
|
6008
|
-
|
|
6009
|
-
|
|
6010
|
-
|
|
6011
|
-
|
|
6012
|
-
|
|
6013
|
-
|
|
6014
|
-
|
|
6176
|
+
/* @__PURE__ */ jsx22(SessionHoldProvider, {
|
|
6177
|
+
children: /* @__PURE__ */ jsxs18("div", {
|
|
6178
|
+
id: WIDGET_ROOT_ID,
|
|
6179
|
+
children: [
|
|
6180
|
+
isMinimized && !showControlBar && /* @__PURE__ */ jsx22(MinimizedBubble, {
|
|
6181
|
+
welcomeMessage,
|
|
6182
|
+
welcomeDismissed,
|
|
6183
|
+
onDismissWelcome: dismissWelcome
|
|
6184
|
+
}),
|
|
6185
|
+
showControlBar && !hideControls && /* @__PURE__ */ jsx22(SessionControlBar, {}),
|
|
6186
|
+
/* @__PURE__ */ jsx22(SidebarTrigger, {}),
|
|
6187
|
+
/* @__PURE__ */ jsx22(Sidebar, {
|
|
6188
|
+
hideControls,
|
|
6189
|
+
hideHeader,
|
|
6190
|
+
startSessionLabel
|
|
6191
|
+
})
|
|
6192
|
+
]
|
|
6193
|
+
})
|
|
6015
6194
|
})
|
|
6016
6195
|
]
|
|
6017
6196
|
}),
|