@skippr/live-agent-sdk 0.73.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 +889 -695
- package/dist/skippr-sdk.css +1 -1
- package/dist/skippr-sdk.js +125 -125
- package/dist/types/components/LiveAgent.d.ts +2 -0
- 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/launcher.d.ts +2 -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;
|
|
@@ -851,61 +1055,18 @@ function clampLauncherBottom(px) {
|
|
|
851
1055
|
const maxBottom = window.innerHeight - LAUNCHER_HEIGHT_PX - VIEWPORT_MARGIN_PX;
|
|
852
1056
|
return Math.round(Math.min(Math.max(px, VIEWPORT_MARGIN_PX), maxBottom));
|
|
853
1057
|
}
|
|
1058
|
+
function verticalAlignToBottomPx(align) {
|
|
1059
|
+
if (align === "top") {
|
|
1060
|
+
return clampLauncherBottom(window.innerHeight - LAUNCHER_HEIGHT_PX - DEFAULT_LAUNCHER_BOTTOM_PX);
|
|
1061
|
+
}
|
|
1062
|
+
if (align === "middle") {
|
|
1063
|
+
return clampLauncherBottom(window.innerHeight / 2 - LAUNCHER_HEIGHT_PX / 2);
|
|
1064
|
+
}
|
|
1065
|
+
return clampLauncherBottom(DEFAULT_LAUNCHER_BOTTOM_PX);
|
|
1066
|
+
}
|
|
854
1067
|
function launcherPopsDown(bottomPx) {
|
|
855
1068
|
return bottomPx + LAUNCHER_HEIGHT_PX / 2 > window.innerHeight / 2;
|
|
856
1069
|
}
|
|
857
|
-
|
|
858
|
-
// src/lib/agentMode.ts
|
|
859
|
-
var AGENT_MODE = {
|
|
860
|
-
Standard: "standard",
|
|
861
|
-
AlwaysOn: "always_on"
|
|
862
|
-
};
|
|
863
|
-
var AGENT_MODES = Object.values(AGENT_MODE);
|
|
864
|
-
|
|
865
|
-
// src/lib/sessionStatus.ts
|
|
866
|
-
var SESSION_STATUS = {
|
|
867
|
-
pending: "pending",
|
|
868
|
-
active: "active",
|
|
869
|
-
paused: "paused",
|
|
870
|
-
completed: "completed",
|
|
871
|
-
expired: "expired"
|
|
872
|
-
};
|
|
873
|
-
var SESSION_STATUSES = Object.values(SESSION_STATUS);
|
|
874
|
-
|
|
875
|
-
// src/lib/session.ts
|
|
876
|
-
function getResumableSessionId(currentSession, mode) {
|
|
877
|
-
if (!currentSession)
|
|
878
|
-
return;
|
|
879
|
-
const { id, status } = currentSession;
|
|
880
|
-
if (status === SESSION_STATUS.paused || status === SESSION_STATUS.active)
|
|
881
|
-
return id;
|
|
882
|
-
if (mode === AGENT_MODE.AlwaysOn && (status === SESSION_STATUS.expired || status === SESSION_STATUS.completed))
|
|
883
|
-
return id;
|
|
884
|
-
return;
|
|
885
|
-
}
|
|
886
|
-
function canResumeSession(currentSession, mode) {
|
|
887
|
-
return getResumableSessionId(currentSession, mode) !== undefined;
|
|
888
|
-
}
|
|
889
|
-
function getResumableSession(module) {
|
|
890
|
-
if (!module)
|
|
891
|
-
return null;
|
|
892
|
-
const id = getResumableSessionId(module.currentSession, module.mode);
|
|
893
|
-
return id ? { id, agentId: module.id } : null;
|
|
894
|
-
}
|
|
895
|
-
function getModuleSessionState(currentSession, mode) {
|
|
896
|
-
if (!currentSession)
|
|
897
|
-
return null;
|
|
898
|
-
if (canResumeSession(currentSession, mode))
|
|
899
|
-
return "resume";
|
|
900
|
-
if (mode === AGENT_MODE.Standard) {
|
|
901
|
-
const { status } = currentSession;
|
|
902
|
-
if (status === SESSION_STATUS.completed)
|
|
903
|
-
return "completed";
|
|
904
|
-
if (status === SESSION_STATUS.expired)
|
|
905
|
-
return "expired";
|
|
906
|
-
}
|
|
907
|
-
return null;
|
|
908
|
-
}
|
|
909
1070
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/createLucideIcon.js
|
|
910
1071
|
import { forwardRef as forwardRef2, createElement as createElement3 } from "react";
|
|
911
1072
|
|
|
@@ -953,9 +1114,9 @@ var hasA11yProp = (props) => {
|
|
|
953
1114
|
};
|
|
954
1115
|
|
|
955
1116
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/context.js
|
|
956
|
-
import { createContext as
|
|
957
|
-
var LucideContext =
|
|
958
|
-
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);
|
|
959
1120
|
|
|
960
1121
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/Icon.js
|
|
961
1122
|
var Icon = forwardRef(({ color, size, strokeWidth, absoluteStrokeWidth, className = "", children, iconNode, ...rest }, ref) => {
|
|
@@ -1179,7 +1340,7 @@ var __iconNode23 = [
|
|
|
1179
1340
|
];
|
|
1180
1341
|
var X = createLucideIcon("x", __iconNode23);
|
|
1181
1342
|
// src/components/AgentCursor.tsx
|
|
1182
|
-
import { useContext as
|
|
1343
|
+
import { useContext as useContext4, useEffect as useEffect9, useLayoutEffect, useRef as useRef2, useState as useState9 } from "react";
|
|
1183
1344
|
|
|
1184
1345
|
// src/capture/elementRef.ts
|
|
1185
1346
|
function safeGetIframeDocument(iframe) {
|
|
@@ -1316,7 +1477,7 @@ function traceRing(path, durationMs, onFrame, onDone) {
|
|
|
1316
1477
|
}
|
|
1317
1478
|
|
|
1318
1479
|
// src/components/AgentCursor.tsx
|
|
1319
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
1480
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
1320
1481
|
var Z_INDEX = 2147483646;
|
|
1321
1482
|
var BRAND_TEAL = "#2bc0ae";
|
|
1322
1483
|
var GLIDE_EASE = "cubic-bezier(0.45, 0, 0.25, 1)";
|
|
@@ -1361,12 +1522,12 @@ function AgentCursor({
|
|
|
1361
1522
|
target,
|
|
1362
1523
|
animated = false
|
|
1363
1524
|
}) {
|
|
1364
|
-
const ctx =
|
|
1365
|
-
const [cursor, setCursor] =
|
|
1366
|
-
const [glideMs, setGlideMs] =
|
|
1367
|
-
const [phase, setPhase] =
|
|
1368
|
-
const [ringBox, setRingBox] =
|
|
1369
|
-
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);
|
|
1370
1531
|
const cursorElRef = useRef2(null);
|
|
1371
1532
|
const pathRef = useRef2(null);
|
|
1372
1533
|
const prevCursorRef = useRef2(null);
|
|
@@ -1489,7 +1650,7 @@ function AgentCursor({
|
|
|
1489
1650
|
});
|
|
1490
1651
|
return cancelAnimation;
|
|
1491
1652
|
}, [target, animated]);
|
|
1492
|
-
|
|
1653
|
+
useEffect9(() => {
|
|
1493
1654
|
if (!target || target.kind === "gesture" || phase === "idle")
|
|
1494
1655
|
return;
|
|
1495
1656
|
const track = () => {
|
|
@@ -1521,7 +1682,7 @@ function AgentCursor({
|
|
|
1521
1682
|
}
|
|
1522
1683
|
};
|
|
1523
1684
|
}, [target, phase]);
|
|
1524
|
-
|
|
1685
|
+
useEffect9(() => {
|
|
1525
1686
|
return () => {
|
|
1526
1687
|
traceRef.current?.cancel();
|
|
1527
1688
|
for (const t of timersRef.current)
|
|
@@ -1538,10 +1699,10 @@ function AgentCursor({
|
|
|
1538
1699
|
"data-skippr-private": "true",
|
|
1539
1700
|
"aria-hidden": "true",
|
|
1540
1701
|
children: [
|
|
1541
|
-
drawing && ringBox && /* @__PURE__ */
|
|
1702
|
+
drawing && ringBox && /* @__PURE__ */ jsx2("svg", {
|
|
1542
1703
|
"aria-hidden": "true",
|
|
1543
1704
|
style: { ...ringBoxStyle(ringBox, Z_INDEX), overflow: "visible" },
|
|
1544
|
-
children: /* @__PURE__ */
|
|
1705
|
+
children: /* @__PURE__ */ jsx2("path", {
|
|
1545
1706
|
ref: pathRef,
|
|
1546
1707
|
d: ringPathD(ringBox),
|
|
1547
1708
|
fill: "none",
|
|
@@ -1555,20 +1716,20 @@ function AgentCursor({
|
|
|
1555
1716
|
style: ringBoxStyle(ringBox, Z_INDEX),
|
|
1556
1717
|
className: "skippr:relative",
|
|
1557
1718
|
children: [
|
|
1558
|
-
/* @__PURE__ */
|
|
1719
|
+
/* @__PURE__ */ jsx2("div", {
|
|
1559
1720
|
className: "skippr:absolute skippr:inset-0 skippr:rounded-[1rem] skippr:border-2 skippr:border-[#2bc0ae] skippr:animate-skippr-annotation-pulse"
|
|
1560
1721
|
}),
|
|
1561
|
-
/* @__PURE__ */
|
|
1722
|
+
/* @__PURE__ */ jsx2("div", {
|
|
1562
1723
|
role: "status",
|
|
1563
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)]",
|
|
1564
|
-
children: /* @__PURE__ */
|
|
1725
|
+
children: /* @__PURE__ */ jsx2("span", {
|
|
1565
1726
|
className: "skippr:text-[11px] skippr:font-medium skippr:text-white skippr:whitespace-nowrap",
|
|
1566
1727
|
children: target.label
|
|
1567
1728
|
})
|
|
1568
1729
|
})
|
|
1569
1730
|
]
|
|
1570
1731
|
}),
|
|
1571
|
-
target.kind === "gesture" && /* @__PURE__ */
|
|
1732
|
+
target.kind === "gesture" && /* @__PURE__ */ jsx2("div", {
|
|
1572
1733
|
role: "status",
|
|
1573
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)]",
|
|
1574
1735
|
style: {
|
|
@@ -1578,12 +1739,12 @@ function AgentCursor({
|
|
|
1578
1739
|
pointerEvents: "none",
|
|
1579
1740
|
transition: `left ${glideMs}ms ${GLIDE_EASE}, top ${glideMs}ms ${GLIDE_EASE}`
|
|
1580
1741
|
},
|
|
1581
|
-
children: /* @__PURE__ */
|
|
1742
|
+
children: /* @__PURE__ */ jsx2("span", {
|
|
1582
1743
|
className: "skippr:text-[11px] skippr:font-medium skippr:text-white skippr:whitespace-nowrap",
|
|
1583
1744
|
children: target.label
|
|
1584
1745
|
})
|
|
1585
1746
|
}),
|
|
1586
|
-
/* @__PURE__ */
|
|
1747
|
+
/* @__PURE__ */ jsx2("div", {
|
|
1587
1748
|
ref: cursorElRef,
|
|
1588
1749
|
style: {
|
|
1589
1750
|
position: "fixed",
|
|
@@ -1593,12 +1754,12 @@ function AgentCursor({
|
|
|
1593
1754
|
zIndex: Z_INDEX,
|
|
1594
1755
|
transition: `left ${glideMs}ms ${GLIDE_EASE}, top ${glideMs}ms ${GLIDE_EASE}`
|
|
1595
1756
|
},
|
|
1596
|
-
children: /* @__PURE__ */
|
|
1757
|
+
children: /* @__PURE__ */ jsx2(MousePointer2, {
|
|
1597
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"}`,
|
|
1598
1759
|
fill: "currentColor"
|
|
1599
1760
|
}, clickPulse)
|
|
1600
1761
|
}),
|
|
1601
|
-
clickPulse > 0 && rippleCenter && /* @__PURE__ */
|
|
1762
|
+
clickPulse > 0 && rippleCenter && /* @__PURE__ */ jsx2("span", {
|
|
1602
1763
|
className: "skippr:fixed skippr:h-7 skippr:w-7 skippr:rounded-full skippr:bg-[#2bc0ae]/50 skippr:animate-skippr-click-ping",
|
|
1603
1764
|
style: {
|
|
1604
1765
|
left: `${rippleCenter.x}px`,
|
|
@@ -1612,14 +1773,14 @@ function AgentCursor({
|
|
|
1612
1773
|
}
|
|
1613
1774
|
|
|
1614
1775
|
// src/components/AutoStartMedia.tsx
|
|
1615
|
-
import { useConnectionState, useLocalParticipant } from "@livekit/components-react/hooks";
|
|
1776
|
+
import { useConnectionState, useLocalParticipant as useLocalParticipant2 } from "@livekit/components-react/hooks";
|
|
1616
1777
|
import { ConnectionState, Track } from "livekit-client";
|
|
1617
|
-
import { useEffect as
|
|
1778
|
+
import { useEffect as useEffect10, useRef as useRef3 } from "react";
|
|
1618
1779
|
function AutoStartMedia({ pendingScreenStream }) {
|
|
1619
|
-
const { localParticipant } =
|
|
1780
|
+
const { localParticipant } = useLocalParticipant2();
|
|
1620
1781
|
const connectionState = useConnectionState();
|
|
1621
1782
|
const didStartRef = useRef3(false);
|
|
1622
|
-
|
|
1783
|
+
useEffect10(() => {
|
|
1623
1784
|
if (didStartRef.current)
|
|
1624
1785
|
return;
|
|
1625
1786
|
if (connectionState !== ConnectionState.Connected)
|
|
@@ -1642,9 +1803,9 @@ function AutoStartMedia({ pendingScreenStream }) {
|
|
|
1642
1803
|
}
|
|
1643
1804
|
|
|
1644
1805
|
// src/components/DomCapture.tsx
|
|
1645
|
-
import { useConnectionState as useConnectionState2, useLocalParticipant as
|
|
1806
|
+
import { useConnectionState as useConnectionState2, useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react/hooks";
|
|
1646
1807
|
import { ConnectionState as ConnectionState2, ScreenSharePresets, Track as Track2 } from "livekit-client";
|
|
1647
|
-
import { useEffect as
|
|
1808
|
+
import { useEffect as useEffect11, useRef as useRef4 } from "react";
|
|
1648
1809
|
|
|
1649
1810
|
// src/capture/a11yUtils.ts
|
|
1650
1811
|
var ROLE_BY_TAG = {
|
|
@@ -2259,7 +2420,7 @@ function subscribeActionsBusy(cb) {
|
|
|
2259
2420
|
|
|
2260
2421
|
// src/capture/domEvents.ts
|
|
2261
2422
|
var MUTATION_DEBOUNCE_MS = 250;
|
|
2262
|
-
var
|
|
2423
|
+
var textEncoder2 = new TextEncoder;
|
|
2263
2424
|
function isInsideWidget(target) {
|
|
2264
2425
|
if (!(target instanceof Node))
|
|
2265
2426
|
return false;
|
|
@@ -2285,7 +2446,7 @@ function installDomEventListeners(localParticipant, options = {}) {
|
|
|
2285
2446
|
const { onTriggerEvent } = options;
|
|
2286
2447
|
function publishDomEvent(event) {
|
|
2287
2448
|
try {
|
|
2288
|
-
localParticipant.publishData(
|
|
2449
|
+
localParticipant.publishData(textEncoder2.encode(JSON.stringify(event)), {
|
|
2289
2450
|
reliable: true,
|
|
2290
2451
|
topic: DOM_EVENTS_TOPIC
|
|
2291
2452
|
}).catch(() => {
|
|
@@ -2451,7 +2612,7 @@ var CAPTURE_BITRATE = 4000000;
|
|
|
2451
2612
|
var DOM_SNAPSHOT_GZIP_THRESHOLD_BYTES = 14000;
|
|
2452
2613
|
var MAX_CANVAS_DPR = 1.5;
|
|
2453
2614
|
var CONSECUTIVE_FAILURES_BEFORE_REPORT = 3;
|
|
2454
|
-
var
|
|
2615
|
+
var textEncoder3 = new TextEncoder;
|
|
2455
2616
|
function shouldIncludeInSnapshot(element) {
|
|
2456
2617
|
if (!(element instanceof Element))
|
|
2457
2618
|
return true;
|
|
@@ -2526,7 +2687,7 @@ async function buildDomSnapshotFrame() {
|
|
|
2526
2687
|
title: document.title,
|
|
2527
2688
|
capturedAt: new Date().toISOString()
|
|
2528
2689
|
});
|
|
2529
|
-
const snapshotBytes =
|
|
2690
|
+
const snapshotBytes = textEncoder3.encode(snapshotJson);
|
|
2530
2691
|
const { bytes, compressionFlag } = await gzipIfBeneficial(snapshotBytes);
|
|
2531
2692
|
const frame = new Uint8Array(bytes.byteLength + 1);
|
|
2532
2693
|
frame[0] = compressionFlag;
|
|
@@ -2535,7 +2696,7 @@ async function buildDomSnapshotFrame() {
|
|
|
2535
2696
|
}
|
|
2536
2697
|
function reportCaptureError(localParticipant) {
|
|
2537
2698
|
try {
|
|
2538
|
-
localParticipant.publishData(
|
|
2699
|
+
localParticipant.publishData(textEncoder3.encode(JSON.stringify({ type: "capture_error" })), {
|
|
2539
2700
|
reliable: true,
|
|
2540
2701
|
topic: DOM_SNAPSHOT_TOPIC
|
|
2541
2702
|
}).catch(() => {
|
|
@@ -2550,10 +2711,10 @@ async function unpublishAndStopTrack(localParticipant, videoTrack) {
|
|
|
2550
2711
|
videoTrack.stop();
|
|
2551
2712
|
}
|
|
2552
2713
|
function DomCapture() {
|
|
2553
|
-
const { localParticipant } =
|
|
2714
|
+
const { localParticipant } = useLocalParticipant3();
|
|
2554
2715
|
const connectionState = useConnectionState2();
|
|
2555
2716
|
const didStartRef = useRef4(false);
|
|
2556
|
-
|
|
2717
|
+
useEffect11(() => {
|
|
2557
2718
|
if (didStartRef.current)
|
|
2558
2719
|
return;
|
|
2559
2720
|
if (connectionState !== ConnectionState2.Connected)
|
|
@@ -2663,7 +2824,7 @@ function DomCapture() {
|
|
|
2663
2824
|
|
|
2664
2825
|
// src/components/HighlightOverlay.tsx
|
|
2665
2826
|
import { useDataChannel } from "@livekit/components-react/hooks";
|
|
2666
|
-
import { useCallback as
|
|
2827
|
+
import { useCallback as useCallback7, useEffect as useEffect12, useRef as useRef5 } from "react";
|
|
2667
2828
|
var HIGHLIGHT_AUTO_CLEAR_MS = 1e4;
|
|
2668
2829
|
var textDecoder = new TextDecoder;
|
|
2669
2830
|
function parseHighlightMessage(payload) {
|
|
@@ -2688,14 +2849,14 @@ function parseHighlightMessage(payload) {
|
|
|
2688
2849
|
function HighlightOverlay() {
|
|
2689
2850
|
const targetRef = useRef5(null);
|
|
2690
2851
|
const autoClearRef = useRef5(null);
|
|
2691
|
-
const clear =
|
|
2852
|
+
const clear = useCallback7(() => {
|
|
2692
2853
|
if (autoClearRef.current)
|
|
2693
2854
|
clearTimeout(autoClearRef.current);
|
|
2694
2855
|
autoClearRef.current = null;
|
|
2695
2856
|
targetRef.current = null;
|
|
2696
2857
|
clearCursorTarget("guide");
|
|
2697
2858
|
}, []);
|
|
2698
|
-
const onHighlightMessage =
|
|
2859
|
+
const onHighlightMessage = useCallback7((msg) => {
|
|
2699
2860
|
const parsed = parseHighlightMessage(msg.payload);
|
|
2700
2861
|
if (!parsed)
|
|
2701
2862
|
return;
|
|
@@ -2719,7 +2880,7 @@ function HighlightOverlay() {
|
|
|
2719
2880
|
autoClearRef.current = setTimeout(clear, HIGHLIGHT_AUTO_CLEAR_MS);
|
|
2720
2881
|
}, [clear]);
|
|
2721
2882
|
useDataChannel(HIGHLIGHT_TOPIC, onHighlightMessage);
|
|
2722
|
-
|
|
2883
|
+
useEffect12(() => {
|
|
2723
2884
|
const onClick = (event) => {
|
|
2724
2885
|
const target = targetRef.current;
|
|
2725
2886
|
const node = event.target;
|
|
@@ -2729,15 +2890,15 @@ function HighlightOverlay() {
|
|
|
2729
2890
|
document.addEventListener("click", onClick, { capture: true });
|
|
2730
2891
|
return () => document.removeEventListener("click", onClick, { capture: true });
|
|
2731
2892
|
}, [clear]);
|
|
2732
|
-
|
|
2893
|
+
useEffect12(() => clear, [clear]);
|
|
2733
2894
|
return null;
|
|
2734
2895
|
}
|
|
2735
2896
|
|
|
2736
2897
|
// src/components/MinimizedBubble.tsx
|
|
2737
|
-
import { useContext as
|
|
2898
|
+
import { useContext as useContext5, useEffect as useEffect14, useRef as useRef7, useState as useState10 } from "react";
|
|
2738
2899
|
|
|
2739
2900
|
// src/hooks/useLauncherDrag.ts
|
|
2740
|
-
import { useEffect as
|
|
2901
|
+
import { useEffect as useEffect13, useRef as useRef6 } from "react";
|
|
2741
2902
|
import { flushSync } from "react-dom";
|
|
2742
2903
|
var DRAG_THRESHOLD_PX = 5;
|
|
2743
2904
|
function useLauncherDrag(containerRef, onDrop, followRefs, reportDragging) {
|
|
@@ -2748,7 +2909,7 @@ function useLauncherDrag(containerRef, onDrop, followRefs, reportDragging) {
|
|
|
2748
2909
|
followTargetsRef.current = followRefs;
|
|
2749
2910
|
const reportDraggingRef = useRef6(reportDragging);
|
|
2750
2911
|
reportDraggingRef.current = reportDragging;
|
|
2751
|
-
|
|
2912
|
+
useEffect13(() => {
|
|
2752
2913
|
const el = containerRef.current;
|
|
2753
2914
|
if (!el)
|
|
2754
2915
|
return;
|
|
@@ -2897,7 +3058,7 @@ function cn(...inputs) {
|
|
|
2897
3058
|
}
|
|
2898
3059
|
|
|
2899
3060
|
// src/components/AdoptionBubble.tsx
|
|
2900
|
-
import { jsx as
|
|
3061
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
2901
3062
|
function AdoptionBubble({
|
|
2902
3063
|
goal,
|
|
2903
3064
|
onAttend,
|
|
@@ -2905,7 +3066,7 @@ function AdoptionBubble({
|
|
|
2905
3066
|
exitDelayMs = 0,
|
|
2906
3067
|
hidden = false
|
|
2907
3068
|
}) {
|
|
2908
|
-
return /* @__PURE__ */
|
|
3069
|
+
return /* @__PURE__ */ jsx3("div", {
|
|
2909
3070
|
style: {
|
|
2910
3071
|
animationDelay: `${appearDelayMs}ms`,
|
|
2911
3072
|
transitionDelay: hidden ? `${exitDelayMs}ms` : "0ms"
|
|
@@ -2916,18 +3077,18 @@ function AdoptionBubble({
|
|
|
2916
3077
|
onClick: () => onAttend(goal),
|
|
2917
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"),
|
|
2918
3079
|
children: [
|
|
2919
|
-
/* @__PURE__ */
|
|
3080
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2920
3081
|
className: cn("skippr:flex skippr:h-6 skippr:w-6 skippr:shrink-0 skippr:items-center skippr:justify-center", "skippr:text-amber-700"),
|
|
2921
|
-
children: /* @__PURE__ */
|
|
3082
|
+
children: /* @__PURE__ */ jsx3(Lightbulb, {
|
|
2922
3083
|
className: "skippr:h-3.5 skippr:w-3.5",
|
|
2923
3084
|
fill: "currentColor"
|
|
2924
3085
|
})
|
|
2925
3086
|
}),
|
|
2926
|
-
/* @__PURE__ */
|
|
3087
|
+
/* @__PURE__ */ jsx3("span", {
|
|
2927
3088
|
className: "skippr:min-w-0 skippr:truncate skippr:text-[13px] skippr:font-semibold skippr:text-amber-950",
|
|
2928
3089
|
children: goal.displayMessage
|
|
2929
3090
|
}),
|
|
2930
|
-
/* @__PURE__ */
|
|
3091
|
+
/* @__PURE__ */ jsx3(ArrowRight, {
|
|
2931
3092
|
className: "skippr:h-3.5 skippr:w-3.5 skippr:shrink-0 skippr:text-amber-700"
|
|
2932
3093
|
})
|
|
2933
3094
|
]
|
|
@@ -2936,12 +3097,12 @@ function AdoptionBubble({
|
|
|
2936
3097
|
}
|
|
2937
3098
|
|
|
2938
3099
|
// src/components/ModulePill.tsx
|
|
2939
|
-
import { jsx as
|
|
3100
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
2940
3101
|
var RING_RADIUS = 8;
|
|
2941
3102
|
var RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
|
|
2942
|
-
function ModulePill({ module, onSelect
|
|
2943
|
-
const completedPhases =
|
|
2944
|
-
const totalPhases =
|
|
3103
|
+
function ModulePill({ module, onSelect }) {
|
|
3104
|
+
const completedPhases = module.currentSession?.currentPhaseIndex ?? 0;
|
|
3105
|
+
const totalPhases = module.totalPhases;
|
|
2945
3106
|
const showProgress = module.mode !== AGENT_MODE.AlwaysOn && totalPhases > 0;
|
|
2946
3107
|
const progressFraction = showProgress ? Math.min(completedPhases / totalPhases, 1) : 0;
|
|
2947
3108
|
return /* @__PURE__ */ jsxs3("button", {
|
|
@@ -2949,16 +3110,12 @@ function ModulePill({ module, onSelect, progress, isLive = false, label }) {
|
|
|
2949
3110
|
onClick: () => onSelect(module.id),
|
|
2950
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"),
|
|
2951
3112
|
children: [
|
|
2952
|
-
|
|
2953
|
-
"aria-hidden": "true",
|
|
2954
|
-
className: "skippr:size-[6px] skippr:shrink-0 skippr:rounded-full skippr:bg-emerald-500 skippr:animate-pulse skippr:motion-reduce:animate-none"
|
|
2955
|
-
}),
|
|
2956
|
-
showProgress && !isLive && /* @__PURE__ */ jsxs3("svg", {
|
|
3113
|
+
showProgress && /* @__PURE__ */ jsxs3("svg", {
|
|
2957
3114
|
viewBox: "0 0 20 20",
|
|
2958
3115
|
className: "skippr:size-4 skippr:shrink-0 skippr:-rotate-90",
|
|
2959
3116
|
"aria-hidden": "true",
|
|
2960
3117
|
children: [
|
|
2961
|
-
/* @__PURE__ */
|
|
3118
|
+
/* @__PURE__ */ jsx4("circle", {
|
|
2962
3119
|
cx: "10",
|
|
2963
3120
|
cy: "10",
|
|
2964
3121
|
r: RING_RADIUS,
|
|
@@ -2966,7 +3123,7 @@ function ModulePill({ module, onSelect, progress, isLive = false, label }) {
|
|
|
2966
3123
|
strokeWidth: "2.5",
|
|
2967
3124
|
className: "skippr:stroke-black/15"
|
|
2968
3125
|
}),
|
|
2969
|
-
/* @__PURE__ */
|
|
3126
|
+
/* @__PURE__ */ jsx4("circle", {
|
|
2970
3127
|
cx: "10",
|
|
2971
3128
|
cy: "10",
|
|
2972
3129
|
r: RING_RADIUS,
|
|
@@ -2979,9 +3136,9 @@ function ModulePill({ module, onSelect, progress, isLive = false, label }) {
|
|
|
2979
3136
|
})
|
|
2980
3137
|
]
|
|
2981
3138
|
}),
|
|
2982
|
-
/* @__PURE__ */
|
|
3139
|
+
/* @__PURE__ */ jsx4("span", {
|
|
2983
3140
|
className: "skippr:min-w-0 skippr:flex-1 skippr:truncate skippr:text-left",
|
|
2984
|
-
children:
|
|
3141
|
+
children: module.name
|
|
2985
3142
|
}),
|
|
2986
3143
|
showProgress && /* @__PURE__ */ jsxs3("span", {
|
|
2987
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"),
|
|
@@ -2996,29 +3153,86 @@ function ModulePill({ module, onSelect, progress, isLive = false, label }) {
|
|
|
2996
3153
|
}
|
|
2997
3154
|
|
|
2998
3155
|
// src/components/MinimizedBubble.tsx
|
|
2999
|
-
import { jsx as
|
|
3156
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
3000
3157
|
var GOALS_AUTO_HIDE_MS = 1e4;
|
|
3001
3158
|
var GOAL_FADE_OUT_MS = 300;
|
|
3002
3159
|
var GOAL_APPEAR_STAGGER_MS = 150;
|
|
3003
3160
|
var GOAL_EXIT_STAGGER_MS = 250;
|
|
3004
3161
|
var MAX_GOAL_BUBBLES = 3;
|
|
3005
3162
|
var MAX_MODULE_PILLS = 3;
|
|
3006
|
-
function
|
|
3007
|
-
return /* @__PURE__ */
|
|
3163
|
+
function SkipprMark({ onStart }) {
|
|
3164
|
+
return /* @__PURE__ */ jsx5("button", {
|
|
3008
3165
|
type: "button",
|
|
3009
|
-
onClick,
|
|
3166
|
+
onClick: onStart,
|
|
3010
3167
|
"aria-label": "Ask Me Anything",
|
|
3011
|
-
className:
|
|
3012
|
-
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", {
|
|
3013
3170
|
viewBox: "0 0 15.4044 18.4853",
|
|
3014
|
-
className:
|
|
3171
|
+
className: "skippr:h-[18.5px] skippr:w-[15.4px]",
|
|
3015
3172
|
fill: "none",
|
|
3016
3173
|
"aria-hidden": "true",
|
|
3017
|
-
children: /* @__PURE__ */
|
|
3174
|
+
children: /* @__PURE__ */ jsx5("path", {
|
|
3018
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",
|
|
3019
3176
|
className: "skippr:fill-brand"
|
|
3020
3177
|
})
|
|
3021
|
-
})
|
|
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
|
+
]
|
|
3022
3236
|
});
|
|
3023
3237
|
}
|
|
3024
3238
|
function WelcomeBubble({
|
|
@@ -3028,7 +3242,7 @@ function WelcomeBubble({
|
|
|
3028
3242
|
onDismiss,
|
|
3029
3243
|
onClick
|
|
3030
3244
|
}) {
|
|
3031
|
-
|
|
3245
|
+
useEffect14(() => {
|
|
3032
3246
|
const timer = setTimeout(onDismiss, 5000);
|
|
3033
3247
|
return () => clearTimeout(timer);
|
|
3034
3248
|
}, [onDismiss]);
|
|
@@ -3039,7 +3253,7 @@ function WelcomeBubble({
|
|
|
3039
3253
|
"aria-label": "Dismiss",
|
|
3040
3254
|
children: [
|
|
3041
3255
|
message,
|
|
3042
|
-
/* @__PURE__ */
|
|
3256
|
+
/* @__PURE__ */ jsx5("span", {
|
|
3043
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")
|
|
3044
3258
|
})
|
|
3045
3259
|
]
|
|
@@ -3050,7 +3264,7 @@ function MinimizedBubble({
|
|
|
3050
3264
|
welcomeDismissed,
|
|
3051
3265
|
onDismissWelcome
|
|
3052
3266
|
}) {
|
|
3053
|
-
const ctx =
|
|
3267
|
+
const ctx = useContext5(LiveAgentContext);
|
|
3054
3268
|
if (!ctx) {
|
|
3055
3269
|
throw new Error("MinimizedBubble must be used within a <LiveAgent> provider");
|
|
3056
3270
|
}
|
|
@@ -3063,19 +3277,22 @@ function MinimizedBubble({
|
|
|
3063
3277
|
startAdoptionSession,
|
|
3064
3278
|
isAuthenticated,
|
|
3065
3279
|
displayModules,
|
|
3280
|
+
defaultAgentId,
|
|
3281
|
+
startDefaultSession,
|
|
3066
3282
|
hasResolvedModules,
|
|
3067
3283
|
isLoadingModules,
|
|
3068
3284
|
selectModule,
|
|
3069
3285
|
expandPanel,
|
|
3286
|
+
setSidebarTab,
|
|
3070
3287
|
commitLauncherDrop
|
|
3071
3288
|
} = ctx;
|
|
3072
|
-
const [goalsAutoHidden, setGoalsAutoHidden] =
|
|
3073
|
-
const [isLauncherHovered, setIsLauncherHovered] =
|
|
3074
|
-
const [visitHref, setVisitHref] =
|
|
3289
|
+
const [goalsAutoHidden, setGoalsAutoHidden] = useState10(false);
|
|
3290
|
+
const [isLauncherHovered, setIsLauncherHovered] = useState10(false);
|
|
3291
|
+
const [visitHref, setVisitHref] = useState10(() => window.location.href);
|
|
3075
3292
|
const revealedHrefRef = useRef7(null);
|
|
3076
3293
|
const hoverContainerRef = useRef7(null);
|
|
3077
|
-
|
|
3078
|
-
|
|
3294
|
+
useEffect14(() => subscribeToLocationChange(() => setVisitHref(window.location.href)), []);
|
|
3295
|
+
useEffect14(() => {
|
|
3079
3296
|
const el = hoverContainerRef.current;
|
|
3080
3297
|
if (!el)
|
|
3081
3298
|
return;
|
|
@@ -3093,12 +3310,11 @@ function MinimizedBubble({
|
|
|
3093
3310
|
const state = getModuleSessionState(module.currentSession, module.mode);
|
|
3094
3311
|
return state !== "completed" && state !== "expired";
|
|
3095
3312
|
});
|
|
3096
|
-
const alwaysOnModule = actionableModules.find((module) => module.mode === AGENT_MODE.AlwaysOn);
|
|
3097
3313
|
const pillCandidates = actionableModules.filter((module) => module.mode !== AGENT_MODE.AlwaysOn);
|
|
3098
3314
|
const onboardingModule = pillCandidates.find((module) => module.type === "onboarding");
|
|
3099
3315
|
const modulePills = onboardingModule ? [onboardingModule] : pillCandidates.slice(0, MAX_MODULE_PILLS).reverse();
|
|
3100
3316
|
const goalsEligible = adoptionGoals.length > 0 && !onboardingModule && hasResolvedModules;
|
|
3101
|
-
|
|
3317
|
+
useEffect14(() => {
|
|
3102
3318
|
if (!goalsEligible)
|
|
3103
3319
|
return;
|
|
3104
3320
|
if (revealedHrefRef.current === visitHref) {
|
|
@@ -3112,8 +3328,8 @@ function MinimizedBubble({
|
|
|
3112
3328
|
}, [goalsEligible, visitHref]);
|
|
3113
3329
|
const matchedGoals = goalsEligible ? adoptionGoals.slice(0, MAX_GOAL_BUBBLES) : [];
|
|
3114
3330
|
const goalsHidden = goalsAutoHidden && !isLauncherHovered;
|
|
3115
|
-
const [goalsUnmounted, setGoalsUnmounted] =
|
|
3116
|
-
|
|
3331
|
+
const [goalsUnmounted, setGoalsUnmounted] = useState10(false);
|
|
3332
|
+
useEffect14(() => {
|
|
3117
3333
|
if (!goalsHidden) {
|
|
3118
3334
|
setGoalsUnmounted(false);
|
|
3119
3335
|
return;
|
|
@@ -3123,12 +3339,18 @@ function MinimizedBubble({
|
|
|
3123
3339
|
return () => clearTimeout(timer);
|
|
3124
3340
|
}, [goalsHidden]);
|
|
3125
3341
|
const visibleGoals = goalsUnmounted ? [] : matchedGoals;
|
|
3342
|
+
const openChat = (e) => {
|
|
3343
|
+
e.stopPropagation();
|
|
3344
|
+
if (wasDraggedRef.current)
|
|
3345
|
+
return;
|
|
3346
|
+
setSidebarTab("chat");
|
|
3347
|
+
expandPanel();
|
|
3348
|
+
};
|
|
3126
3349
|
const launchDefaultSession = () => {
|
|
3127
3350
|
if (wasDraggedRef.current || isStarting || isLoadingModules)
|
|
3128
3351
|
return;
|
|
3129
|
-
|
|
3130
|
-
|
|
3131
|
-
selectModule(target.id);
|
|
3352
|
+
if (isAuthenticated && defaultAgentId) {
|
|
3353
|
+
startDefaultSession();
|
|
3132
3354
|
} else {
|
|
3133
3355
|
expandPanel();
|
|
3134
3356
|
}
|
|
@@ -3141,7 +3363,7 @@ function MinimizedBubble({
|
|
|
3141
3363
|
(modulePills.length > 0 || visibleGoals.length > 0) && /* @__PURE__ */ jsxs4("div", {
|
|
3142
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"),
|
|
3143
3365
|
children: [
|
|
3144
|
-
visibleGoals.map((goal, index2) => /* @__PURE__ */
|
|
3366
|
+
visibleGoals.map((goal, index2) => /* @__PURE__ */ jsx5(AdoptionBubble, {
|
|
3145
3367
|
goal,
|
|
3146
3368
|
onAttend: (attended) => {
|
|
3147
3369
|
if (!wasDraggedRef.current)
|
|
@@ -3151,7 +3373,7 @@ function MinimizedBubble({
|
|
|
3151
3373
|
exitDelayMs: (visibleGoals.length - 1 - index2) * GOAL_EXIT_STAGGER_MS,
|
|
3152
3374
|
hidden: goalsHidden
|
|
3153
3375
|
}, goal.goalId)),
|
|
3154
|
-
modulePills.map((module) => /* @__PURE__ */
|
|
3376
|
+
modulePills.map((module) => /* @__PURE__ */ jsx5(ModulePill, {
|
|
3155
3377
|
module,
|
|
3156
3378
|
onSelect: (id) => {
|
|
3157
3379
|
if (!wasDraggedRef.current)
|
|
@@ -3160,7 +3382,7 @@ function MinimizedBubble({
|
|
|
3160
3382
|
}, module.id))
|
|
3161
3383
|
]
|
|
3162
3384
|
}),
|
|
3163
|
-
welcomeMessage && !welcomeDismissed && adoptionGoals.length === 0 && modulePills.length === 0 && /* @__PURE__ */
|
|
3385
|
+
welcomeMessage && !welcomeDismissed && adoptionGoals.length === 0 && modulePills.length === 0 && /* @__PURE__ */ jsx5(WelcomeBubble, {
|
|
3164
3386
|
message: welcomeMessage,
|
|
3165
3387
|
position,
|
|
3166
3388
|
popsDown,
|
|
@@ -3170,9 +3392,11 @@ function MinimizedBubble({
|
|
|
3170
3392
|
onDismissWelcome();
|
|
3171
3393
|
}
|
|
3172
3394
|
}),
|
|
3173
|
-
/* @__PURE__ */
|
|
3395
|
+
/* @__PURE__ */ jsx5(IdleLauncher, {
|
|
3174
3396
|
position,
|
|
3175
|
-
|
|
3397
|
+
isHovered: isLauncherHovered,
|
|
3398
|
+
onStart: launchDefaultSession,
|
|
3399
|
+
onChat: openChat
|
|
3176
3400
|
})
|
|
3177
3401
|
]
|
|
3178
3402
|
});
|
|
@@ -3180,7 +3404,7 @@ function MinimizedBubble({
|
|
|
3180
3404
|
|
|
3181
3405
|
// src/components/PageActionHandler.tsx
|
|
3182
3406
|
import { useDataChannel as useDataChannel2 } from "@livekit/components-react/hooks";
|
|
3183
|
-
import { useCallback as
|
|
3407
|
+
import { useCallback as useCallback8, useEffect as useEffect15, useRef as useRef8 } from "react";
|
|
3184
3408
|
var STEP_MAX_WAIT_MS = 5000;
|
|
3185
3409
|
var POST_ACTION_SETTLE_SNAPSHOT_MS = 300;
|
|
3186
3410
|
var textDecoder2 = new TextDecoder;
|
|
@@ -3402,7 +3626,7 @@ function PageActionHandler() {
|
|
|
3402
3626
|
const drainingRef = useRef8(false);
|
|
3403
3627
|
const settleTimerRef = useRef8(null);
|
|
3404
3628
|
const endStepRef = useRef8(null);
|
|
3405
|
-
const runStep =
|
|
3629
|
+
const runStep = useCallback8((action) => {
|
|
3406
3630
|
return new Promise((resolve) => {
|
|
3407
3631
|
if (action.type === "scroll_page") {
|
|
3408
3632
|
let scrolled = false;
|
|
@@ -3471,7 +3695,7 @@ function PageActionHandler() {
|
|
|
3471
3695
|
});
|
|
3472
3696
|
});
|
|
3473
3697
|
}, []);
|
|
3474
|
-
const drain =
|
|
3698
|
+
const drain = useCallback8(async () => {
|
|
3475
3699
|
if (drainingRef.current)
|
|
3476
3700
|
return;
|
|
3477
3701
|
drainingRef.current = true;
|
|
@@ -3502,14 +3726,14 @@ function PageActionHandler() {
|
|
|
3502
3726
|
}
|
|
3503
3727
|
}
|
|
3504
3728
|
}, [runStep]);
|
|
3505
|
-
const onMessage =
|
|
3729
|
+
const onMessage = useCallback8((msg) => {
|
|
3506
3730
|
const action = parsePageAction(msg.payload);
|
|
3507
3731
|
if (!action)
|
|
3508
3732
|
return;
|
|
3509
3733
|
queueRef.current.push(action);
|
|
3510
3734
|
drain();
|
|
3511
3735
|
}, [drain]);
|
|
3512
|
-
|
|
3736
|
+
useEffect15(() => {
|
|
3513
3737
|
mountedRef.current = true;
|
|
3514
3738
|
drainingRef.current = false;
|
|
3515
3739
|
return () => {
|
|
@@ -3521,7 +3745,7 @@ function PageActionHandler() {
|
|
|
3521
3745
|
setActionsBusy(false);
|
|
3522
3746
|
};
|
|
3523
3747
|
}, []);
|
|
3524
|
-
|
|
3748
|
+
useEffect15(() => {
|
|
3525
3749
|
return onActionsPausedChange((paused) => {
|
|
3526
3750
|
if (paused) {
|
|
3527
3751
|
clearCursorTarget("act");
|
|
@@ -3540,22 +3764,22 @@ function PageActionHandler() {
|
|
|
3540
3764
|
import { useContext as useContext6, useEffect as useEffect18 } from "react";
|
|
3541
3765
|
|
|
3542
3766
|
// src/hooks/useActionControl.ts
|
|
3543
|
-
import { useLocalParticipant as
|
|
3544
|
-
import { useCallback as
|
|
3545
|
-
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;
|
|
3546
3770
|
function useActionControl() {
|
|
3547
|
-
const { localParticipant } =
|
|
3771
|
+
const { localParticipant } = useLocalParticipant4();
|
|
3548
3772
|
const plan = usePlanUpdates();
|
|
3549
|
-
const [busy, setBusy] =
|
|
3550
|
-
const [actionsPaused2, setPaused] =
|
|
3551
|
-
|
|
3773
|
+
const [busy, setBusy] = useState11(isActionsBusy);
|
|
3774
|
+
const [actionsPaused2, setPaused] = useState11(false);
|
|
3775
|
+
useEffect16(() => subscribeActionsBusy(setBusy), []);
|
|
3552
3776
|
const actionsActive = busy || plan?.state === "executing";
|
|
3553
|
-
const togglePaused =
|
|
3777
|
+
const togglePaused = useCallback9(async () => {
|
|
3554
3778
|
const next = !actionsPaused2;
|
|
3555
3779
|
setPaused(next);
|
|
3556
3780
|
setActionsPaused(next);
|
|
3557
3781
|
try {
|
|
3558
|
-
await localParticipant.publishData(
|
|
3782
|
+
await localParticipant.publishData(textEncoder4.encode(JSON.stringify({ type: next ? "pause" : "resume" })), { reliable: true, topic: ACTION_CONTROL_TOPIC });
|
|
3559
3783
|
} catch (error) {
|
|
3560
3784
|
console.error("Failed to send action pause/resume:", error);
|
|
3561
3785
|
}
|
|
@@ -3576,13 +3800,13 @@ function useAgentVoiceState() {
|
|
|
3576
3800
|
}
|
|
3577
3801
|
|
|
3578
3802
|
// src/hooks/useAudioLevelBars.ts
|
|
3579
|
-
import { useEffect as
|
|
3803
|
+
import { useEffect as useEffect17, useRef as useRef9, useState as useState12 } from "react";
|
|
3580
3804
|
var TALKING_LEVEL_THRESHOLD = 0.2;
|
|
3581
3805
|
var TALKING_HOLD_MS = 400;
|
|
3582
3806
|
function useAudioLevelBars(mediaStreamTrack, { barCount, idleHeightPx, maxGrowthPx, noiseGate }) {
|
|
3583
3807
|
const barRefs = useRef9([]);
|
|
3584
|
-
const [isTalking, setIsTalking] =
|
|
3585
|
-
|
|
3808
|
+
const [isTalking, setIsTalking] = useState12(false);
|
|
3809
|
+
useEffect17(() => {
|
|
3586
3810
|
if (!mediaStreamTrack) {
|
|
3587
3811
|
for (const bar of barRefs.current) {
|
|
3588
3812
|
if (bar)
|
|
@@ -3633,26 +3857,26 @@ function useAudioLevelBars(mediaStreamTrack, { barCount, idleHeightPx, maxGrowth
|
|
|
3633
3857
|
}
|
|
3634
3858
|
|
|
3635
3859
|
// src/hooks/useMediaControls.ts
|
|
3636
|
-
import { useLocalParticipant as
|
|
3860
|
+
import { useLocalParticipant as useLocalParticipant5 } from "@livekit/components-react/hooks";
|
|
3637
3861
|
import { ScreenSharePresets as ScreenSharePresets2 } from "livekit-client";
|
|
3638
|
-
import { useCallback as
|
|
3862
|
+
import { useCallback as useCallback10 } from "react";
|
|
3639
3863
|
var SCREEN_SHARE_OPTIONS = {
|
|
3640
3864
|
video: { displaySurface: "browser" },
|
|
3641
3865
|
resolution: ScreenSharePresets2.h720fps30.resolution,
|
|
3642
3866
|
contentHint: "detail"
|
|
3643
3867
|
};
|
|
3644
3868
|
function useMediaControls() {
|
|
3645
|
-
const { localParticipant } =
|
|
3869
|
+
const { localParticipant } = useLocalParticipant5();
|
|
3646
3870
|
const isMuted = !localParticipant.isMicrophoneEnabled;
|
|
3647
3871
|
const isScreenSharing = localParticipant.isScreenShareEnabled;
|
|
3648
|
-
const toggleMute =
|
|
3872
|
+
const toggleMute = useCallback10(async () => {
|
|
3649
3873
|
try {
|
|
3650
3874
|
await localParticipant.setMicrophoneEnabled(isMuted);
|
|
3651
3875
|
} catch (error) {
|
|
3652
3876
|
console.error("Failed to toggle microphone:", error);
|
|
3653
3877
|
}
|
|
3654
3878
|
}, [localParticipant, isMuted]);
|
|
3655
|
-
const toggleScreenShare =
|
|
3879
|
+
const toggleScreenShare = useCallback10(async () => {
|
|
3656
3880
|
try {
|
|
3657
3881
|
await localParticipant.setScreenShareEnabled(!isScreenSharing, SCREEN_SHARE_OPTIONS);
|
|
3658
3882
|
} catch (error) {
|
|
@@ -3663,13 +3887,13 @@ function useMediaControls() {
|
|
|
3663
3887
|
}
|
|
3664
3888
|
|
|
3665
3889
|
// src/hooks/useMicLevel.ts
|
|
3666
|
-
import { useLocalParticipant as
|
|
3890
|
+
import { useLocalParticipant as useLocalParticipant6 } from "@livekit/components-react/hooks";
|
|
3667
3891
|
var MIC_BARS = 5;
|
|
3668
3892
|
var IDLE_BAR_HEIGHT_PX = 5;
|
|
3669
3893
|
var MAX_BAR_GROWTH_PX = 17;
|
|
3670
3894
|
var MIC_NOISE_GATE = 0.15;
|
|
3671
3895
|
function useMicLevel(enabled) {
|
|
3672
|
-
const { microphoneTrack } =
|
|
3896
|
+
const { microphoneTrack } = useLocalParticipant6();
|
|
3673
3897
|
const mediaStreamTrack = microphoneTrack?.track?.mediaStreamTrack;
|
|
3674
3898
|
return useAudioLevelBars(enabled ? mediaStreamTrack : undefined, {
|
|
3675
3899
|
barCount: MIC_BARS,
|
|
@@ -3679,92 +3903,6 @@ function useMicLevel(enabled) {
|
|
|
3679
3903
|
});
|
|
3680
3904
|
}
|
|
3681
3905
|
|
|
3682
|
-
// src/hooks/usePhaseUpdates.ts
|
|
3683
|
-
import { useCallback as useCallback10, useContext as useContext5, useEffect as useEffect16 } from "react";
|
|
3684
|
-
function parsePhases(json) {
|
|
3685
|
-
try {
|
|
3686
|
-
const data = JSON.parse(json);
|
|
3687
|
-
if (data.type === "phase_update" && Array.isArray(data.phases)) {
|
|
3688
|
-
return data.phases;
|
|
3689
|
-
}
|
|
3690
|
-
} catch {}
|
|
3691
|
-
return null;
|
|
3692
|
-
}
|
|
3693
|
-
function usePhaseUpdates() {
|
|
3694
|
-
const parse = useCallback10(parsePhases, []);
|
|
3695
|
-
const livePhases = useAgentState("phases", parse, []);
|
|
3696
|
-
const ctx = useContext5(LiveAgentContext);
|
|
3697
|
-
useEffect16(() => {
|
|
3698
|
-
if (livePhases.length > 0)
|
|
3699
|
-
ctx?.setPhasesSnapshot(livePhases);
|
|
3700
|
-
}, [livePhases, ctx?.setPhasesSnapshot]);
|
|
3701
|
-
const phases = livePhases.length > 0 ? livePhases : ctx?.phasesSnapshot ?? [];
|
|
3702
|
-
return { phases };
|
|
3703
|
-
}
|
|
3704
|
-
|
|
3705
|
-
// src/hooks/useSessionHold.ts
|
|
3706
|
-
import { useLocalParticipant as useLocalParticipant6 } from "@livekit/components-react/hooks";
|
|
3707
|
-
import { useCallback as useCallback11, useEffect as useEffect17, useState as useState11 } from "react";
|
|
3708
|
-
var textEncoder4 = new TextEncoder;
|
|
3709
|
-
var FALLBACK_PAUSE_TIMEOUT_SECONDS = 120;
|
|
3710
|
-
function useSessionHold({
|
|
3711
|
-
pauseSession,
|
|
3712
|
-
pauseTimeoutSeconds
|
|
3713
|
-
}) {
|
|
3714
|
-
const { localParticipant } = useLocalParticipant6();
|
|
3715
|
-
const timeoutSeconds = pauseTimeoutSeconds ?? FALLBACK_PAUSE_TIMEOUT_SECONDS;
|
|
3716
|
-
const [isHeld, setIsHeld] = useState11(false);
|
|
3717
|
-
const [countdown, setCountdown] = useState11(timeoutSeconds);
|
|
3718
|
-
const publish = useCallback11(async (type) => {
|
|
3719
|
-
await localParticipant.publishData(textEncoder4.encode(JSON.stringify({ type })), {
|
|
3720
|
-
reliable: true,
|
|
3721
|
-
topic: SESSION_HOLD_TOPIC
|
|
3722
|
-
});
|
|
3723
|
-
}, [localParticipant]);
|
|
3724
|
-
const hold = useCallback11(async () => {
|
|
3725
|
-
try {
|
|
3726
|
-
await localParticipant.setMicrophoneEnabled(false);
|
|
3727
|
-
await publish("pause");
|
|
3728
|
-
setIsHeld(true);
|
|
3729
|
-
} catch (error) {
|
|
3730
|
-
console.error("Failed to hold session:", error);
|
|
3731
|
-
}
|
|
3732
|
-
}, [localParticipant, publish]);
|
|
3733
|
-
const release = useCallback11(async () => {
|
|
3734
|
-
try {
|
|
3735
|
-
await localParticipant.setMicrophoneEnabled(true);
|
|
3736
|
-
await publish("resume");
|
|
3737
|
-
setIsHeld(false);
|
|
3738
|
-
} catch (error) {
|
|
3739
|
-
console.error("Failed to release session:", error);
|
|
3740
|
-
}
|
|
3741
|
-
}, [localParticipant, publish]);
|
|
3742
|
-
useEffect17(() => {
|
|
3743
|
-
if (!isHeld) {
|
|
3744
|
-
setCountdown(timeoutSeconds);
|
|
3745
|
-
return;
|
|
3746
|
-
}
|
|
3747
|
-
const id = setInterval(() => {
|
|
3748
|
-
setCountdown((seconds) => Math.max(0, seconds - 1));
|
|
3749
|
-
}, 1000);
|
|
3750
|
-
return () => clearInterval(id);
|
|
3751
|
-
}, [isHeld, timeoutSeconds]);
|
|
3752
|
-
useEffect17(() => {
|
|
3753
|
-
if (isHeld && countdown === 0) {
|
|
3754
|
-
setIsHeld(false);
|
|
3755
|
-
pauseSession();
|
|
3756
|
-
}
|
|
3757
|
-
}, [isHeld, countdown, pauseSession]);
|
|
3758
|
-
const toggle = useCallback11(() => {
|
|
3759
|
-
if (isHeld) {
|
|
3760
|
-
release();
|
|
3761
|
-
} else {
|
|
3762
|
-
hold();
|
|
3763
|
-
}
|
|
3764
|
-
}, [isHeld, hold, release]);
|
|
3765
|
-
return { isHeld, countdown, toggle };
|
|
3766
|
-
}
|
|
3767
|
-
|
|
3768
3906
|
// src/components/PausedCountdown.tsx
|
|
3769
3907
|
import { jsxs as jsxs5 } from "react/jsx-runtime";
|
|
3770
3908
|
function PausedCountdown({ secondsRemaining }) {
|
|
@@ -3789,10 +3927,10 @@ function PausedCountdown({ secondsRemaining }) {
|
|
|
3789
3927
|
}
|
|
3790
3928
|
|
|
3791
3929
|
// src/components/SessionControlBar.tsx
|
|
3792
|
-
import { jsx as
|
|
3930
|
+
import { jsx as jsx6, jsxs as jsxs6, Fragment } from "react/jsx-runtime";
|
|
3793
3931
|
var STANDBY_BAR_WIDTH = 168;
|
|
3794
3932
|
var READY_BAR_WIDTH = 238;
|
|
3795
|
-
var PAUSED_BAR_WIDTH =
|
|
3933
|
+
var PAUSED_BAR_WIDTH = 248;
|
|
3796
3934
|
var TEXT_BAR_WIDTH = 100;
|
|
3797
3935
|
var SCREEN_SHARE_EXTRA_WIDTH = 46;
|
|
3798
3936
|
var ACTION_CONTROL_EXTRA_WIDTH = 46;
|
|
@@ -3827,16 +3965,16 @@ function AgentActivity({
|
|
|
3827
3965
|
className: "skippr:flex skippr:items-center skippr:gap-1.5 skippr:text-bubble",
|
|
3828
3966
|
"aria-label": isActing ? "Agent is acting" : `Agent is ${state}`,
|
|
3829
3967
|
children: [
|
|
3830
|
-
/* @__PURE__ */
|
|
3968
|
+
/* @__PURE__ */ jsx6("span", {
|
|
3831
3969
|
className: "skippr:flex skippr:size-5 skippr:shrink-0 skippr:items-center skippr:justify-center",
|
|
3832
|
-
children: isActing ? /* @__PURE__ */
|
|
3970
|
+
children: isActing ? /* @__PURE__ */ jsx6(MousePointerClick, {
|
|
3833
3971
|
strokeWidth: 2,
|
|
3834
3972
|
className: "skippr:size-5 skippr:[animation:skippr-finger-tap_1.1s_ease-in-out_infinite]"
|
|
3835
3973
|
}) : /* @__PURE__ */ jsxs6(Fragment, {
|
|
3836
3974
|
children: [
|
|
3837
|
-
state === "speaking" && /* @__PURE__ */
|
|
3975
|
+
state === "speaking" && /* @__PURE__ */ jsx6("span", {
|
|
3838
3976
|
className: "skippr:flex skippr:h-5 skippr:items-center skippr:gap-[2px]",
|
|
3839
|
-
children: Array.from({ length: AGENT_BARS }).map((_, index2) => /* @__PURE__ */
|
|
3977
|
+
children: Array.from({ length: AGENT_BARS }).map((_, index2) => /* @__PURE__ */ jsx6("span", {
|
|
3840
3978
|
ref: (el) => {
|
|
3841
3979
|
barRefs.current[index2] = el;
|
|
3842
3980
|
},
|
|
@@ -3847,13 +3985,13 @@ function AgentActivity({
|
|
|
3847
3985
|
state === "thinking" && /* @__PURE__ */ jsxs6("span", {
|
|
3848
3986
|
className: "skippr:flex skippr:items-center skippr:gap-[3px]",
|
|
3849
3987
|
children: [
|
|
3850
|
-
/* @__PURE__ */
|
|
3988
|
+
/* @__PURE__ */ jsx6("span", {
|
|
3851
3989
|
className: "skippr:size-[5px] skippr:rounded-full skippr:bg-current skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
3852
3990
|
}),
|
|
3853
|
-
/* @__PURE__ */
|
|
3991
|
+
/* @__PURE__ */ jsx6("span", {
|
|
3854
3992
|
className: "skippr:size-[5px] skippr:rounded-full skippr:bg-current skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
3855
3993
|
}),
|
|
3856
|
-
/* @__PURE__ */
|
|
3994
|
+
/* @__PURE__ */ jsx6("span", {
|
|
3857
3995
|
className: "skippr:size-[5px] skippr:rounded-full skippr:bg-current skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
3858
3996
|
})
|
|
3859
3997
|
]
|
|
@@ -3868,10 +4006,10 @@ function AgentActivity({
|
|
|
3868
4006
|
strokeLinejoin: "round",
|
|
3869
4007
|
"aria-hidden": "true",
|
|
3870
4008
|
children: [
|
|
3871
|
-
/* @__PURE__ */
|
|
4009
|
+
/* @__PURE__ */ jsx6("path", {
|
|
3872
4010
|
d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
|
|
3873
4011
|
}),
|
|
3874
|
-
/* @__PURE__ */
|
|
4012
|
+
/* @__PURE__ */ jsx6("circle", {
|
|
3875
4013
|
cx: "12",
|
|
3876
4014
|
cy: "12",
|
|
3877
4015
|
r: "2.5",
|
|
@@ -3884,7 +4022,7 @@ function AgentActivity({
|
|
|
3884
4022
|
]
|
|
3885
4023
|
})
|
|
3886
4024
|
}),
|
|
3887
|
-
/* @__PURE__ */
|
|
4025
|
+
/* @__PURE__ */ jsx6("span", {
|
|
3888
4026
|
className: "skippr:text-[11px] skippr:font-medium skippr:capitalize",
|
|
3889
4027
|
children: label
|
|
3890
4028
|
})
|
|
@@ -3911,11 +4049,9 @@ function SessionControlBar() {
|
|
|
3911
4049
|
const {
|
|
3912
4050
|
textMode,
|
|
3913
4051
|
launcherBottomPx,
|
|
3914
|
-
popsDown,
|
|
3915
4052
|
controlBarRef,
|
|
3916
4053
|
commitLauncherDrop,
|
|
3917
4054
|
panelRef,
|
|
3918
|
-
pauseTimeoutSeconds,
|
|
3919
4055
|
isDragging,
|
|
3920
4056
|
setIsDragging
|
|
3921
4057
|
} = internalCtx;
|
|
@@ -3924,16 +4060,8 @@ function SessionControlBar() {
|
|
|
3924
4060
|
const { wasDraggedRef } = useLauncherDrag(controlBarRef, commitLauncherDrop, panelFollowers, setIsDragging);
|
|
3925
4061
|
const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
|
|
3926
4062
|
const { state, mediaStreamTrack: agentMediaStreamTrack } = useAgentVoiceState();
|
|
3927
|
-
const { phases } = usePhaseUpdates();
|
|
3928
4063
|
const { actionsActive, actionsPaused: actionsPaused2, togglePaused } = useActionControl();
|
|
3929
|
-
const {
|
|
3930
|
-
isHeld,
|
|
3931
|
-
countdown,
|
|
3932
|
-
toggle: togglePause
|
|
3933
|
-
} = useSessionHold({
|
|
3934
|
-
pauseSession,
|
|
3935
|
-
pauseTimeoutSeconds
|
|
3936
|
-
});
|
|
4064
|
+
const { isHeld, countdown, toggle: togglePause } = useSessionHoldContext();
|
|
3937
4065
|
useEffect18(() => {
|
|
3938
4066
|
if (isHeld)
|
|
3939
4067
|
minimizePanel();
|
|
@@ -3955,18 +4083,6 @@ function SessionControlBar() {
|
|
|
3955
4083
|
}
|
|
3956
4084
|
}
|
|
3957
4085
|
const agendaModule = activeModule && activeModule.mode !== AGENT_MODE.AlwaysOn && activeModule.totalPhases > 0 ? activeModule : null;
|
|
3958
|
-
const agendaProgress = phases.length > 0 ? {
|
|
3959
|
-
completed: phases.filter((phase) => phase.status === "completed").length,
|
|
3960
|
-
total: phases.length
|
|
3961
|
-
} : agendaModule ? {
|
|
3962
|
-
completed: agendaModule.currentSession?.currentPhaseIndex ?? 0,
|
|
3963
|
-
total: agendaModule.totalPhases
|
|
3964
|
-
} : null;
|
|
3965
|
-
const currentPhaseName = phases.find((phase) => phase.status === "active")?.name ?? phases.find((phase) => phase.status === "pending")?.name;
|
|
3966
|
-
const openAgenda = () => {
|
|
3967
|
-
setSidebarTab("agenda");
|
|
3968
|
-
expandPanel();
|
|
3969
|
-
};
|
|
3970
4086
|
const togglePanel = () => {
|
|
3971
4087
|
if (isPanelOpen) {
|
|
3972
4088
|
minimizePanel();
|
|
@@ -3980,21 +4096,20 @@ function SessionControlBar() {
|
|
|
3980
4096
|
return;
|
|
3981
4097
|
action();
|
|
3982
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
|
+
});
|
|
3983
4108
|
return /* @__PURE__ */ jsxs6("div", {
|
|
3984
4109
|
ref: controlBarRef,
|
|
3985
4110
|
style: { bottom: launcherBottomPx },
|
|
3986
4111
|
className: cn("skippr:fixed skippr:z-[9999] skippr:touch-none skippr:cursor-grab", position === "right" ? "skippr:right-3" : "skippr:left-3"),
|
|
3987
4112
|
children: [
|
|
3988
|
-
!isPanelOpen && agendaModule && agendaProgress && /* @__PURE__ */ jsx5("div", {
|
|
3989
|
-
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"),
|
|
3990
|
-
children: /* @__PURE__ */ jsx5(ModulePill, {
|
|
3991
|
-
module: agendaModule,
|
|
3992
|
-
onSelect: ifNotDragged(openAgenda),
|
|
3993
|
-
progress: agendaProgress,
|
|
3994
|
-
label: currentPhaseName ?? agendaModule.name,
|
|
3995
|
-
isLive: true
|
|
3996
|
-
})
|
|
3997
|
-
}),
|
|
3998
4113
|
/* @__PURE__ */ jsxs6("div", {
|
|
3999
4114
|
style: { width: barWidth },
|
|
4000
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")),
|
|
@@ -4005,18 +4120,18 @@ function SessionControlBar() {
|
|
|
4005
4120
|
/* @__PURE__ */ jsxs6("span", {
|
|
4006
4121
|
className: "skippr:flex skippr:items-center skippr:gap-[3px]",
|
|
4007
4122
|
children: [
|
|
4008
|
-
/* @__PURE__ */
|
|
4123
|
+
/* @__PURE__ */ jsx6("span", {
|
|
4009
4124
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-bubble skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
4010
4125
|
}),
|
|
4011
|
-
/* @__PURE__ */
|
|
4126
|
+
/* @__PURE__ */ jsx6("span", {
|
|
4012
4127
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-bubble skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
4013
4128
|
}),
|
|
4014
|
-
/* @__PURE__ */
|
|
4129
|
+
/* @__PURE__ */ jsx6("span", {
|
|
4015
4130
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-bubble skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
4016
4131
|
})
|
|
4017
4132
|
]
|
|
4018
4133
|
}),
|
|
4019
|
-
/* @__PURE__ */
|
|
4134
|
+
/* @__PURE__ */ jsx6("span", {
|
|
4020
4135
|
children: "Standing by…"
|
|
4021
4136
|
})
|
|
4022
4137
|
]
|
|
@@ -4024,32 +4139,37 @@ function SessionControlBar() {
|
|
|
4024
4139
|
isReady && /* @__PURE__ */ jsxs6("div", {
|
|
4025
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"),
|
|
4026
4141
|
children: [
|
|
4027
|
-
/* @__PURE__ */
|
|
4142
|
+
/* @__PURE__ */ jsx6("button", {
|
|
4028
4143
|
type: "button",
|
|
4029
4144
|
onClick: ifNotDragged(togglePause),
|
|
4030
4145
|
"aria-label": isHeld ? "Resume" : "Pause",
|
|
4031
4146
|
title: isHeld ? "Resume" : "Pause",
|
|
4032
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"),
|
|
4033
|
-
children: isHeld ? /* @__PURE__ */
|
|
4148
|
+
children: isHeld ? /* @__PURE__ */ jsx6(Play, {
|
|
4034
4149
|
className: "skippr:size-5",
|
|
4035
4150
|
fill: "currentColor"
|
|
4036
|
-
}) : /* @__PURE__ */
|
|
4151
|
+
}) : /* @__PURE__ */ jsx6(Pause, {
|
|
4037
4152
|
className: "skippr:size-5",
|
|
4038
4153
|
fill: "currentColor"
|
|
4039
4154
|
})
|
|
4040
4155
|
}),
|
|
4041
|
-
isHeld ? /* @__PURE__ */
|
|
4042
|
-
|
|
4156
|
+
isHeld ? /* @__PURE__ */ jsxs6(Fragment, {
|
|
4157
|
+
children: [
|
|
4158
|
+
/* @__PURE__ */ jsx6(PausedCountdown, {
|
|
4159
|
+
secondsRemaining: countdown
|
|
4160
|
+
}),
|
|
4161
|
+
panelToggleButton
|
|
4162
|
+
]
|
|
4043
4163
|
}) : /* @__PURE__ */ jsxs6(Fragment, {
|
|
4044
4164
|
children: [
|
|
4045
4165
|
!textMode && /* @__PURE__ */ jsxs6("div", {
|
|
4046
4166
|
className: "skippr:relative skippr:h-[38px]",
|
|
4047
4167
|
style: { width: MIC_REGION_WIDTH },
|
|
4048
4168
|
children: [
|
|
4049
|
-
!isTalking && /* @__PURE__ */
|
|
4169
|
+
!isTalking && /* @__PURE__ */ jsx6("span", {
|
|
4050
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]",
|
|
4051
4171
|
style: { width: AGENT_ACTIVITY_WIDTH },
|
|
4052
|
-
children: /* @__PURE__ */
|
|
4172
|
+
children: /* @__PURE__ */ jsx6(AgentActivity, {
|
|
4053
4173
|
state,
|
|
4054
4174
|
isActing: showActionControl && !actionsPaused2,
|
|
4055
4175
|
mediaStreamTrack: agentMediaStreamTrack
|
|
@@ -4062,17 +4182,17 @@ function SessionControlBar() {
|
|
|
4062
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"),
|
|
4063
4183
|
style: { width: isTalking ? MIC_REGION_WIDTH : MIC_SQUARE_WIDTH },
|
|
4064
4184
|
children: [
|
|
4065
|
-
/* @__PURE__ */
|
|
4185
|
+
/* @__PURE__ */ jsx6("span", {
|
|
4066
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"),
|
|
4067
|
-
children: isMuted ? /* @__PURE__ */
|
|
4187
|
+
children: isMuted ? /* @__PURE__ */ jsx6(MicOff, {
|
|
4068
4188
|
className: "skippr:size-5"
|
|
4069
|
-
}) : /* @__PURE__ */
|
|
4189
|
+
}) : /* @__PURE__ */ jsx6(Mic, {
|
|
4070
4190
|
className: "skippr:size-5"
|
|
4071
4191
|
})
|
|
4072
4192
|
}),
|
|
4073
|
-
/* @__PURE__ */
|
|
4193
|
+
/* @__PURE__ */ jsx6("span", {
|
|
4074
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"),
|
|
4075
|
-
children: Array.from({ length: MIC_BARS }).map((_, index2) => /* @__PURE__ */
|
|
4195
|
+
children: Array.from({ length: MIC_BARS }).map((_, index2) => /* @__PURE__ */ jsx6("span", {
|
|
4076
4196
|
ref: (el) => {
|
|
4077
4197
|
barRefs.current[index2] = el;
|
|
4078
4198
|
},
|
|
@@ -4084,36 +4204,28 @@ function SessionControlBar() {
|
|
|
4084
4204
|
})
|
|
4085
4205
|
]
|
|
4086
4206
|
}),
|
|
4087
|
-
showScreenShareToggle && /* @__PURE__ */
|
|
4207
|
+
showScreenShareToggle && /* @__PURE__ */ jsx6("button", {
|
|
4088
4208
|
type: "button",
|
|
4089
4209
|
onClick: ifNotDragged(() => void toggleScreenShare()),
|
|
4090
4210
|
"aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
|
|
4091
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"),
|
|
4092
|
-
children: isScreenSharing ? /* @__PURE__ */
|
|
4212
|
+
children: isScreenSharing ? /* @__PURE__ */ jsx6(MonitorOff, {
|
|
4093
4213
|
className: "skippr:size-5"
|
|
4094
|
-
}) : /* @__PURE__ */
|
|
4095
|
-
className: "skippr:size-5"
|
|
4096
|
-
})
|
|
4097
|
-
}),
|
|
4098
|
-
/* @__PURE__ */ jsx5("button", {
|
|
4099
|
-
type: "button",
|
|
4100
|
-
onClick: ifNotDragged(togglePanel),
|
|
4101
|
-
"aria-label": isPanelOpen ? "Close panel" : agendaModule && !textMode ? "Open agenda" : "Open chat",
|
|
4102
|
-
className: cn(SQUARE_BUTTON, "skippr:text-neutral-700", textMode ? "skippr:hover:bg-neutral-100" : "skippr:bg-neutral-100 skippr:hover:bg-neutral-200"),
|
|
4103
|
-
children: /* @__PURE__ */ jsx5(MessageSquare, {
|
|
4214
|
+
}) : /* @__PURE__ */ jsx6(Monitor, {
|
|
4104
4215
|
className: "skippr:size-5"
|
|
4105
4216
|
})
|
|
4106
4217
|
}),
|
|
4107
|
-
|
|
4218
|
+
panelToggleButton,
|
|
4219
|
+
showActionControl && /* @__PURE__ */ jsx6("button", {
|
|
4108
4220
|
type: "button",
|
|
4109
4221
|
onClick: ifNotDragged(() => void togglePaused()),
|
|
4110
4222
|
"aria-label": actionsPaused2 ? "Resume actions" : "Stop actions",
|
|
4111
4223
|
title: actionsPaused2 ? "Resume" : "Stop",
|
|
4112
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"),
|
|
4113
|
-
children: actionsPaused2 ? /* @__PURE__ */
|
|
4225
|
+
children: actionsPaused2 ? /* @__PURE__ */ jsx6(Play, {
|
|
4114
4226
|
className: "skippr:size-5",
|
|
4115
4227
|
fill: "currentColor"
|
|
4116
|
-
}) : /* @__PURE__ */
|
|
4228
|
+
}) : /* @__PURE__ */ jsx6(Square, {
|
|
4117
4229
|
className: "skippr:size-5",
|
|
4118
4230
|
fill: "currentColor"
|
|
4119
4231
|
})
|
|
@@ -4124,7 +4236,7 @@ function SessionControlBar() {
|
|
|
4124
4236
|
}, textMode ? "ready-text" : "ready")
|
|
4125
4237
|
]
|
|
4126
4238
|
}),
|
|
4127
|
-
isReady && !isDragging && /* @__PURE__ */
|
|
4239
|
+
isReady && !isDragging && /* @__PURE__ */ jsx6("button", {
|
|
4128
4240
|
type: "button",
|
|
4129
4241
|
onClick: ifNotDragged(() => void pauseSession()),
|
|
4130
4242
|
disabled: isPausing,
|
|
@@ -4134,7 +4246,7 @@ function SessionControlBar() {
|
|
|
4134
4246
|
children: /* @__PURE__ */ jsxs6("span", {
|
|
4135
4247
|
className: "skippr:relative skippr:flex skippr:size-5 skippr:items-center skippr:justify-center",
|
|
4136
4248
|
children: [
|
|
4137
|
-
/* @__PURE__ */
|
|
4249
|
+
/* @__PURE__ */ jsx6(X, {
|
|
4138
4250
|
className: cn("skippr:size-4 skippr:transition-opacity skippr:duration-200", isPausing && "skippr:opacity-40"),
|
|
4139
4251
|
strokeWidth: 2.5
|
|
4140
4252
|
}),
|
|
@@ -4144,7 +4256,7 @@ function SessionControlBar() {
|
|
|
4144
4256
|
"aria-hidden": "true",
|
|
4145
4257
|
className: "skippr:absolute skippr:inset-0 skippr:size-full skippr:animate-spin skippr:motion-reduce:hidden",
|
|
4146
4258
|
children: [
|
|
4147
|
-
/* @__PURE__ */
|
|
4259
|
+
/* @__PURE__ */ jsx6("circle", {
|
|
4148
4260
|
cx: "12",
|
|
4149
4261
|
cy: "12",
|
|
4150
4262
|
r: "10.5",
|
|
@@ -4152,7 +4264,7 @@ function SessionControlBar() {
|
|
|
4152
4264
|
strokeOpacity: "0.2",
|
|
4153
4265
|
strokeWidth: "1.5"
|
|
4154
4266
|
}),
|
|
4155
|
-
/* @__PURE__ */
|
|
4267
|
+
/* @__PURE__ */ jsx6("circle", {
|
|
4156
4268
|
cx: "12",
|
|
4157
4269
|
cy: "12",
|
|
4158
4270
|
r: "10.5",
|
|
@@ -4171,9 +4283,9 @@ function SessionControlBar() {
|
|
|
4171
4283
|
}
|
|
4172
4284
|
|
|
4173
4285
|
// src/components/ShadowHost.tsx
|
|
4174
|
-
import { useLayoutEffect as useLayoutEffect2, useRef as useRef10, useState as
|
|
4286
|
+
import { useLayoutEffect as useLayoutEffect2, useRef as useRef10, useState as useState13 } from "react";
|
|
4175
4287
|
import { createPortal } from "react-dom";
|
|
4176
|
-
import { jsx as
|
|
4288
|
+
import { jsx as jsx7, Fragment as Fragment2 } from "react/jsx-runtime";
|
|
4177
4289
|
var PROPERTIES_STYLE_ID = "skippr-tw-properties";
|
|
4178
4290
|
var PROPERTY_RULE = /@property\s+[^{]+\{[^}]*\}/g;
|
|
4179
4291
|
function hoistTailwindProperties(css) {
|
|
@@ -4189,9 +4301,9 @@ function hoistTailwindProperties(css) {
|
|
|
4189
4301
|
}
|
|
4190
4302
|
function ShadowHost({ children }) {
|
|
4191
4303
|
const hostRef = useRef10(null);
|
|
4192
|
-
const [shadowRoot, setShadowRoot] =
|
|
4304
|
+
const [shadowRoot, setShadowRoot] = useState13(null);
|
|
4193
4305
|
const css = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
|
4194
|
-
@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}}`;
|
|
4195
4307
|
useLayoutEffect2(() => {
|
|
4196
4308
|
const host = hostRef.current;
|
|
4197
4309
|
if (!host || !css)
|
|
@@ -4206,17 +4318,17 @@ function ShadowHost({ children }) {
|
|
|
4206
4318
|
setShadowRoot(root);
|
|
4207
4319
|
}, [css]);
|
|
4208
4320
|
if (!css)
|
|
4209
|
-
return /* @__PURE__ */
|
|
4321
|
+
return /* @__PURE__ */ jsx7(Fragment2, {
|
|
4210
4322
|
children
|
|
4211
4323
|
});
|
|
4212
|
-
return /* @__PURE__ */
|
|
4324
|
+
return /* @__PURE__ */ jsx7("div", {
|
|
4213
4325
|
ref: hostRef,
|
|
4214
4326
|
children: shadowRoot && createPortal(children, shadowRoot)
|
|
4215
4327
|
});
|
|
4216
4328
|
}
|
|
4217
4329
|
|
|
4218
4330
|
// src/components/Sidebar.tsx
|
|
4219
|
-
import { useContext as
|
|
4331
|
+
import { useContext as useContext11, useEffect as useEffect25 } from "react";
|
|
4220
4332
|
|
|
4221
4333
|
// src/hooks/useCombinedMessages.ts
|
|
4222
4334
|
import { useContext as useContext7, useMemo as useMemo5 } from "react";
|
|
@@ -4304,8 +4416,31 @@ function useCombinedMessages() {
|
|
|
4304
4416
|
return { allMessages, agentState, sendChatMessage, isSendingChat };
|
|
4305
4417
|
}
|
|
4306
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
|
+
|
|
4307
4442
|
// src/hooks/useSessionRemaining.ts
|
|
4308
|
-
import { useEffect as
|
|
4443
|
+
import { useEffect as useEffect20, useRef as useRef11, useState as useState14 } from "react";
|
|
4309
4444
|
|
|
4310
4445
|
// src/lib/format.ts
|
|
4311
4446
|
function formatTime(seconds) {
|
|
@@ -4322,8 +4457,8 @@ function parseNumber(s) {
|
|
|
4322
4457
|
function useSessionRemaining() {
|
|
4323
4458
|
const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
|
|
4324
4459
|
const endTimeRef = useRef11(null);
|
|
4325
|
-
const [remaining, setRemaining] =
|
|
4326
|
-
|
|
4460
|
+
const [remaining, setRemaining] = useState14(null);
|
|
4461
|
+
useEffect20(() => {
|
|
4327
4462
|
if (maxCallDuration === null || endTimeRef.current !== null)
|
|
4328
4463
|
return;
|
|
4329
4464
|
const endTime = Date.now() + maxCallDuration * 1000;
|
|
@@ -4340,13 +4475,13 @@ function useSessionRemaining() {
|
|
|
4340
4475
|
}
|
|
4341
4476
|
|
|
4342
4477
|
// src/components/ChatHeader.tsx
|
|
4343
|
-
import { useContext as
|
|
4478
|
+
import { useContext as useContext10, useRef as useRef13 } from "react";
|
|
4344
4479
|
|
|
4345
4480
|
// src/hooks/useElapsedSeconds.ts
|
|
4346
|
-
import { useEffect as
|
|
4481
|
+
import { useEffect as useEffect21, useState as useState15 } from "react";
|
|
4347
4482
|
function useElapsedSeconds(isRunning) {
|
|
4348
|
-
const [elapsed, setElapsed] =
|
|
4349
|
-
|
|
4483
|
+
const [elapsed, setElapsed] = useState15(0);
|
|
4484
|
+
useEffect21(() => {
|
|
4350
4485
|
if (!isRunning) {
|
|
4351
4486
|
setElapsed(0);
|
|
4352
4487
|
return;
|
|
@@ -4363,10 +4498,10 @@ function useElapsedSeconds(isRunning) {
|
|
|
4363
4498
|
|
|
4364
4499
|
// src/hooks/useTextMode.ts
|
|
4365
4500
|
import { useLocalParticipant as useLocalParticipant9 } from "@livekit/components-react/hooks";
|
|
4366
|
-
import { useCallback as useCallback12, useContext as
|
|
4501
|
+
import { useCallback as useCallback12, useContext as useContext9, useRef as useRef12 } from "react";
|
|
4367
4502
|
var textEncoder5 = new TextEncoder;
|
|
4368
4503
|
function useTextMode() {
|
|
4369
|
-
const ctx =
|
|
4504
|
+
const ctx = useContext9(LiveAgentContext);
|
|
4370
4505
|
if (!ctx) {
|
|
4371
4506
|
throw new Error("useTextMode must be used within a <LiveAgent> provider");
|
|
4372
4507
|
}
|
|
@@ -4395,9 +4530,9 @@ function useTextMode() {
|
|
|
4395
4530
|
}
|
|
4396
4531
|
|
|
4397
4532
|
// src/components/ChatHeader.tsx
|
|
4398
|
-
import { jsx as
|
|
4533
|
+
import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
4399
4534
|
function ChatHeader() {
|
|
4400
|
-
const ctx =
|
|
4535
|
+
const ctx = useContext10(LiveAgentContext);
|
|
4401
4536
|
if (!ctx) {
|
|
4402
4537
|
throw new Error("ChatHeader must be used within a <LiveAgent> provider");
|
|
4403
4538
|
}
|
|
@@ -4424,26 +4559,26 @@ function ChatHeader() {
|
|
|
4424
4559
|
/* @__PURE__ */ jsxs7("div", {
|
|
4425
4560
|
className: "skippr:flex skippr:items-center skippr:gap-3",
|
|
4426
4561
|
children: [
|
|
4427
|
-
isConnected && /* @__PURE__ */
|
|
4562
|
+
isConnected && /* @__PURE__ */ jsx8(HeaderModeToggle, {}),
|
|
4428
4563
|
isConnected && /* @__PURE__ */ jsxs7("div", {
|
|
4429
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",
|
|
4430
4565
|
children: [
|
|
4431
4566
|
/* @__PURE__ */ jsxs7("span", {
|
|
4432
4567
|
className: "skippr:relative skippr:flex skippr:size-1.5",
|
|
4433
4568
|
children: [
|
|
4434
|
-
/* @__PURE__ */
|
|
4569
|
+
/* @__PURE__ */ jsx8("span", {
|
|
4435
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"
|
|
4436
4571
|
}),
|
|
4437
|
-
/* @__PURE__ */
|
|
4572
|
+
/* @__PURE__ */ jsx8("span", {
|
|
4438
4573
|
className: "skippr:relative skippr:inline-flex skippr:size-1.5 skippr:rounded-full skippr:bg-red-400"
|
|
4439
4574
|
})
|
|
4440
4575
|
]
|
|
4441
4576
|
}),
|
|
4442
|
-
/* @__PURE__ */
|
|
4577
|
+
/* @__PURE__ */ jsx8("span", {
|
|
4443
4578
|
className: "skippr:text-[10px] skippr:font-medium skippr:text-primary-foreground",
|
|
4444
4579
|
children: "REC"
|
|
4445
4580
|
}),
|
|
4446
|
-
/* @__PURE__ */
|
|
4581
|
+
/* @__PURE__ */ jsx8("span", {
|
|
4447
4582
|
className: "skippr:text-[10px] skippr:font-mono skippr:text-primary-foreground",
|
|
4448
4583
|
children: formatTime(elapsed)
|
|
4449
4584
|
})
|
|
@@ -4451,7 +4586,7 @@ function ChatHeader() {
|
|
|
4451
4586
|
})
|
|
4452
4587
|
]
|
|
4453
4588
|
}),
|
|
4454
|
-
minimizable && /* @__PURE__ */
|
|
4589
|
+
minimizable && /* @__PURE__ */ jsx8("button", {
|
|
4455
4590
|
type: "button",
|
|
4456
4591
|
onClick: () => {
|
|
4457
4592
|
if (!wasDraggedRef.current)
|
|
@@ -4460,7 +4595,7 @@ function ChatHeader() {
|
|
|
4460
4595
|
"aria-label": "Close",
|
|
4461
4596
|
title: "Close",
|
|
4462
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",
|
|
4463
|
-
children: /* @__PURE__ */
|
|
4598
|
+
children: /* @__PURE__ */ jsx8(X, {
|
|
4464
4599
|
className: "skippr:h-4 skippr:w-4"
|
|
4465
4600
|
})
|
|
4466
4601
|
})
|
|
@@ -4469,28 +4604,32 @@ function ChatHeader() {
|
|
|
4469
4604
|
}
|
|
4470
4605
|
function HeaderModeToggle() {
|
|
4471
4606
|
const { textMode, toggleTextMode } = useTextMode();
|
|
4607
|
+
const { isHeld } = useSessionHoldContext();
|
|
4472
4608
|
return /* @__PURE__ */ jsxs7("fieldset", {
|
|
4473
4609
|
"aria-label": "Response mode",
|
|
4474
|
-
|
|
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",
|
|
4475
4612
|
children: [
|
|
4476
|
-
/* @__PURE__ */
|
|
4613
|
+
/* @__PURE__ */ jsx8("button", {
|
|
4477
4614
|
type: "button",
|
|
4478
4615
|
"aria-pressed": !textMode,
|
|
4616
|
+
disabled: isHeld,
|
|
4479
4617
|
onClick: () => {
|
|
4480
4618
|
if (textMode)
|
|
4481
4619
|
toggleTextMode();
|
|
4482
4620
|
},
|
|
4483
|
-
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"),
|
|
4484
4622
|
children: "Voice"
|
|
4485
4623
|
}),
|
|
4486
|
-
/* @__PURE__ */
|
|
4624
|
+
/* @__PURE__ */ jsx8("button", {
|
|
4487
4625
|
type: "button",
|
|
4488
4626
|
"aria-pressed": textMode,
|
|
4627
|
+
disabled: isHeld,
|
|
4489
4628
|
onClick: () => {
|
|
4490
4629
|
if (!textMode)
|
|
4491
4630
|
toggleTextMode();
|
|
4492
4631
|
},
|
|
4493
|
-
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"),
|
|
4494
4633
|
children: "Text"
|
|
4495
4634
|
})
|
|
4496
4635
|
]
|
|
@@ -4498,7 +4637,7 @@ function HeaderModeToggle() {
|
|
|
4498
4637
|
}
|
|
4499
4638
|
|
|
4500
4639
|
// src/components/LoadingDots.tsx
|
|
4501
|
-
import { jsx as
|
|
4640
|
+
import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
4502
4641
|
function LoadingDots({ label }) {
|
|
4503
4642
|
return /* @__PURE__ */ jsxs8("div", {
|
|
4504
4643
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:py-4",
|
|
@@ -4506,18 +4645,18 @@ function LoadingDots({ label }) {
|
|
|
4506
4645
|
/* @__PURE__ */ jsxs8("div", {
|
|
4507
4646
|
className: "skippr:flex skippr:gap-1",
|
|
4508
4647
|
children: [
|
|
4509
|
-
/* @__PURE__ */
|
|
4648
|
+
/* @__PURE__ */ jsx9("span", {
|
|
4510
4649
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
4511
4650
|
}),
|
|
4512
|
-
/* @__PURE__ */
|
|
4651
|
+
/* @__PURE__ */ jsx9("span", {
|
|
4513
4652
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
4514
4653
|
}),
|
|
4515
|
-
/* @__PURE__ */
|
|
4654
|
+
/* @__PURE__ */ jsx9("span", {
|
|
4516
4655
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
4517
4656
|
})
|
|
4518
4657
|
]
|
|
4519
4658
|
}),
|
|
4520
|
-
/* @__PURE__ */
|
|
4659
|
+
/* @__PURE__ */ jsx9("p", {
|
|
4521
4660
|
className: "skippr:text-xs skippr:text-muted-foreground",
|
|
4522
4661
|
children: label
|
|
4523
4662
|
})
|
|
@@ -4526,11 +4665,11 @@ function LoadingDots({ label }) {
|
|
|
4526
4665
|
}
|
|
4527
4666
|
|
|
4528
4667
|
// src/components/LoginFlow.tsx
|
|
4529
|
-
import { useCallback as useCallback13, useEffect as
|
|
4668
|
+
import { useCallback as useCallback13, useEffect as useEffect22, useRef as useRef14, useState as useState16 } from "react";
|
|
4530
4669
|
|
|
4531
4670
|
// src/components/ui/button.tsx
|
|
4532
4671
|
import { forwardRef as forwardRef3 } from "react";
|
|
4533
|
-
import { jsx as
|
|
4672
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
4534
4673
|
var variantClasses = {
|
|
4535
4674
|
default: "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90",
|
|
4536
4675
|
destructive: "skippr:bg-destructive skippr:text-white skippr:hover:bg-destructive/90",
|
|
@@ -4549,7 +4688,7 @@ var sizeClasses = {
|
|
|
4549
4688
|
"icon-lg": "skippr:size-10"
|
|
4550
4689
|
};
|
|
4551
4690
|
var Button = forwardRef3(({ className, variant = "default", size = "default", ...props }, ref) => {
|
|
4552
|
-
return /* @__PURE__ */
|
|
4691
|
+
return /* @__PURE__ */ jsx10("button", {
|
|
4553
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),
|
|
4554
4693
|
ref,
|
|
4555
4694
|
...props
|
|
@@ -4558,12 +4697,12 @@ var Button = forwardRef3(({ className, variant = "default", size = "default", ..
|
|
|
4558
4697
|
Button.displayName = "Button";
|
|
4559
4698
|
|
|
4560
4699
|
// src/components/LoginFlow.tsx
|
|
4561
|
-
import { jsx as
|
|
4700
|
+
import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
4562
4701
|
var OTP_LENGTH = 6;
|
|
4563
4702
|
var DIGIT_KEYS = ["d0", "d1", "d2", "d3", "d4", "d5"];
|
|
4564
4703
|
function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
4565
|
-
const [step, setStep] =
|
|
4566
|
-
const [email, setEmail] =
|
|
4704
|
+
const [step, setStep] = useState16("email");
|
|
4705
|
+
const [email, setEmail] = useState16("");
|
|
4567
4706
|
const handleRequestOtp = useCallback13(async (emailValue) => {
|
|
4568
4707
|
const success = await requestOtp(emailValue);
|
|
4569
4708
|
if (success)
|
|
@@ -4579,7 +4718,7 @@ function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
|
4579
4718
|
await requestOtp(email);
|
|
4580
4719
|
}, [requestOtp, email]);
|
|
4581
4720
|
if (step === "otp") {
|
|
4582
|
-
return /* @__PURE__ */
|
|
4721
|
+
return /* @__PURE__ */ jsx11(OtpStep, {
|
|
4583
4722
|
email,
|
|
4584
4723
|
onSubmit: handleVerifyOtp,
|
|
4585
4724
|
onResend: handleResend,
|
|
@@ -4588,7 +4727,7 @@ function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
|
4588
4727
|
isSubmitting
|
|
4589
4728
|
});
|
|
4590
4729
|
}
|
|
4591
|
-
return /* @__PURE__ */
|
|
4730
|
+
return /* @__PURE__ */ jsx11(EmailStep, {
|
|
4592
4731
|
email,
|
|
4593
4732
|
onEmailChange: setEmail,
|
|
4594
4733
|
onSubmit: handleRequestOtp,
|
|
@@ -4608,14 +4747,14 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
4608
4747
|
/* @__PURE__ */ jsxs9("div", {
|
|
4609
4748
|
className: "skippr:mb-4 skippr:text-center",
|
|
4610
4749
|
children: [
|
|
4611
|
-
/* @__PURE__ */
|
|
4750
|
+
/* @__PURE__ */ jsx11(Mail, {
|
|
4612
4751
|
className: "skippr:mx-auto skippr:mb-2 skippr:size-6 skippr:text-primary"
|
|
4613
4752
|
}),
|
|
4614
|
-
/* @__PURE__ */
|
|
4753
|
+
/* @__PURE__ */ jsx11("p", {
|
|
4615
4754
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
4616
4755
|
children: "Sign in to continue"
|
|
4617
4756
|
}),
|
|
4618
|
-
/* @__PURE__ */
|
|
4757
|
+
/* @__PURE__ */ jsx11("p", {
|
|
4619
4758
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
4620
4759
|
children: "Your email will be used to identify you across sessions"
|
|
4621
4760
|
})
|
|
@@ -4625,7 +4764,7 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
4625
4764
|
onSubmit: handleSubmit,
|
|
4626
4765
|
className: "skippr:flex skippr:flex-col skippr:gap-3",
|
|
4627
4766
|
children: [
|
|
4628
|
-
/* @__PURE__ */
|
|
4767
|
+
/* @__PURE__ */ jsx11("input", {
|
|
4629
4768
|
type: "email",
|
|
4630
4769
|
placeholder: "you@example.com",
|
|
4631
4770
|
value: email,
|
|
@@ -4634,15 +4773,15 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
4634
4773
|
required: true,
|
|
4635
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"
|
|
4636
4775
|
}),
|
|
4637
|
-
/* @__PURE__ */
|
|
4776
|
+
/* @__PURE__ */ jsx11(Button, {
|
|
4638
4777
|
type: "submit",
|
|
4639
4778
|
disabled: isSubmitting || !email.trim(),
|
|
4640
4779
|
className: "skippr:w-full",
|
|
4641
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
4780
|
+
children: isSubmitting ? /* @__PURE__ */ jsx11(LoaderCircle, {
|
|
4642
4781
|
className: "skippr:size-4 skippr:animate-spin"
|
|
4643
4782
|
}) : "Continue"
|
|
4644
4783
|
}),
|
|
4645
|
-
error && /* @__PURE__ */
|
|
4784
|
+
error && /* @__PURE__ */ jsx11("p", {
|
|
4646
4785
|
className: "skippr:text-xs skippr:text-center skippr:text-destructive",
|
|
4647
4786
|
children: error
|
|
4648
4787
|
})
|
|
@@ -4652,18 +4791,18 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
4652
4791
|
});
|
|
4653
4792
|
}
|
|
4654
4793
|
function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
4655
|
-
const [digits, setDigits] =
|
|
4656
|
-
const [resendCooldown, setResendCooldown] =
|
|
4794
|
+
const [digits, setDigits] = useState16(Array(OTP_LENGTH).fill(""));
|
|
4795
|
+
const [resendCooldown, setResendCooldown] = useState16(0);
|
|
4657
4796
|
const inputRefs = useRef14([]);
|
|
4658
4797
|
const submittedRef = useRef14(false);
|
|
4659
|
-
|
|
4798
|
+
useEffect22(() => {
|
|
4660
4799
|
inputRefs.current[0]?.focus();
|
|
4661
4800
|
}, []);
|
|
4662
|
-
|
|
4801
|
+
useEffect22(() => {
|
|
4663
4802
|
if (error)
|
|
4664
4803
|
submittedRef.current = false;
|
|
4665
4804
|
}, [error]);
|
|
4666
|
-
|
|
4805
|
+
useEffect22(() => {
|
|
4667
4806
|
if (resendCooldown <= 0)
|
|
4668
4807
|
return;
|
|
4669
4808
|
const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
|
|
@@ -4728,7 +4867,7 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
4728
4867
|
/* @__PURE__ */ jsxs9("div", {
|
|
4729
4868
|
className: "skippr:mb-4 skippr:text-center",
|
|
4730
4869
|
children: [
|
|
4731
|
-
/* @__PURE__ */
|
|
4870
|
+
/* @__PURE__ */ jsx11("p", {
|
|
4732
4871
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
4733
4872
|
children: "Enter verification code"
|
|
4734
4873
|
}),
|
|
@@ -4737,7 +4876,7 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
4737
4876
|
children: [
|
|
4738
4877
|
"We sent a 6-digit code to",
|
|
4739
4878
|
" ",
|
|
4740
|
-
/* @__PURE__ */
|
|
4879
|
+
/* @__PURE__ */ jsx11("span", {
|
|
4741
4880
|
className: "skippr:font-medium skippr:text-foreground",
|
|
4742
4881
|
children: email
|
|
4743
4882
|
})
|
|
@@ -4749,9 +4888,9 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
4749
4888
|
onSubmit: handleSubmit,
|
|
4750
4889
|
className: "skippr:flex skippr:flex-col skippr:gap-3",
|
|
4751
4890
|
children: [
|
|
4752
|
-
/* @__PURE__ */
|
|
4891
|
+
/* @__PURE__ */ jsx11("div", {
|
|
4753
4892
|
className: "skippr:flex skippr:justify-center skippr:gap-1.5",
|
|
4754
|
-
children: digits.map((digit, index2) => /* @__PURE__ */
|
|
4893
|
+
children: digits.map((digit, index2) => /* @__PURE__ */ jsx11("input", {
|
|
4755
4894
|
ref: (el) => {
|
|
4756
4895
|
inputRefs.current[index2] = el;
|
|
4757
4896
|
},
|
|
@@ -4766,29 +4905,29 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
4766
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"
|
|
4767
4906
|
}, DIGIT_KEYS[index2]))
|
|
4768
4907
|
}),
|
|
4769
|
-
error && /* @__PURE__ */
|
|
4908
|
+
error && /* @__PURE__ */ jsx11("p", {
|
|
4770
4909
|
className: "skippr:text-xs skippr:text-center skippr:text-destructive",
|
|
4771
4910
|
children: error
|
|
4772
4911
|
}),
|
|
4773
|
-
/* @__PURE__ */
|
|
4912
|
+
/* @__PURE__ */ jsx11(Button, {
|
|
4774
4913
|
type: "submit",
|
|
4775
4914
|
disabled: isSubmitting || digits.join("").length !== OTP_LENGTH,
|
|
4776
4915
|
className: "skippr:w-full",
|
|
4777
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
4916
|
+
children: isSubmitting ? /* @__PURE__ */ jsx11(LoaderCircle, {
|
|
4778
4917
|
className: "skippr:size-4 skippr:animate-spin"
|
|
4779
4918
|
}) : "Verify"
|
|
4780
4919
|
}),
|
|
4781
4920
|
/* @__PURE__ */ jsxs9("div", {
|
|
4782
4921
|
className: "skippr:flex skippr:items-center skippr:justify-between skippr:text-xs",
|
|
4783
4922
|
children: [
|
|
4784
|
-
/* @__PURE__ */
|
|
4923
|
+
/* @__PURE__ */ jsx11("button", {
|
|
4785
4924
|
type: "button",
|
|
4786
4925
|
onClick: onBack,
|
|
4787
4926
|
disabled: isSubmitting,
|
|
4788
4927
|
className: "skippr:text-muted-foreground hover:skippr:text-foreground skippr:transition-colors disabled:skippr:opacity-50",
|
|
4789
4928
|
children: "Change email"
|
|
4790
4929
|
}),
|
|
4791
|
-
/* @__PURE__ */
|
|
4930
|
+
/* @__PURE__ */ jsx11("button", {
|
|
4792
4931
|
type: "button",
|
|
4793
4932
|
onClick: handleResend,
|
|
4794
4933
|
disabled: isSubmitting || resendCooldown > 0,
|
|
@@ -4804,17 +4943,17 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
4804
4943
|
}
|
|
4805
4944
|
|
|
4806
4945
|
// src/components/MessageList.tsx
|
|
4807
|
-
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";
|
|
4808
4947
|
|
|
4809
4948
|
// src/components/ChatInput.tsx
|
|
4810
|
-
import { useEffect as
|
|
4811
|
-
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";
|
|
4812
4951
|
var MAX_INPUT_HEIGHT = 60;
|
|
4813
4952
|
function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
4814
|
-
const [inputText, setInputText] =
|
|
4953
|
+
const [inputText, setInputText] = useState17("");
|
|
4815
4954
|
const textareaRef = useRef15(null);
|
|
4816
4955
|
const canSend = inputText.trim().length > 0 && !isSendingChat;
|
|
4817
|
-
|
|
4956
|
+
useEffect23(() => {
|
|
4818
4957
|
if (autoFocus)
|
|
4819
4958
|
textareaRef.current?.focus();
|
|
4820
4959
|
}, [autoFocus]);
|
|
@@ -4845,13 +4984,13 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
4845
4984
|
handleSubmit(e);
|
|
4846
4985
|
}
|
|
4847
4986
|
}
|
|
4848
|
-
return /* @__PURE__ */
|
|
4987
|
+
return /* @__PURE__ */ jsx12("form", {
|
|
4849
4988
|
onSubmit: handleSubmit,
|
|
4850
4989
|
className: "skippr:border-t skippr:border-border skippr:p-3",
|
|
4851
4990
|
children: /* @__PURE__ */ jsxs10("div", {
|
|
4852
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",
|
|
4853
4992
|
children: [
|
|
4854
|
-
/* @__PURE__ */
|
|
4993
|
+
/* @__PURE__ */ jsx12("textarea", {
|
|
4855
4994
|
ref: textareaRef,
|
|
4856
4995
|
rows: 1,
|
|
4857
4996
|
value: inputText,
|
|
@@ -4861,12 +5000,12 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
4861
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",
|
|
4862
5001
|
style: { maxHeight: `${MAX_INPUT_HEIGHT}px` }
|
|
4863
5002
|
}),
|
|
4864
|
-
/* @__PURE__ */
|
|
5003
|
+
/* @__PURE__ */ jsx12("button", {
|
|
4865
5004
|
type: "submit",
|
|
4866
5005
|
disabled: !canSend,
|
|
4867
5006
|
"aria-label": "Send message",
|
|
4868
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"),
|
|
4869
|
-
children: /* @__PURE__ */
|
|
5008
|
+
children: /* @__PURE__ */ jsx12(Send, {
|
|
4870
5009
|
className: "skippr:size-3.5"
|
|
4871
5010
|
})
|
|
4872
5011
|
})
|
|
@@ -4876,7 +5015,7 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
4876
5015
|
}
|
|
4877
5016
|
|
|
4878
5017
|
// src/components/ChatMessage.tsx
|
|
4879
|
-
import { jsx as
|
|
5018
|
+
import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
4880
5019
|
function formatTimestamp(ts) {
|
|
4881
5020
|
return new Date(ts).toLocaleTimeString("en-US", {
|
|
4882
5021
|
hour: "numeric",
|
|
@@ -4886,16 +5025,16 @@ function formatTimestamp(ts) {
|
|
|
4886
5025
|
}
|
|
4887
5026
|
function ChatMessage({ message }) {
|
|
4888
5027
|
const isAgent = message.role === "assistant";
|
|
4889
|
-
return /* @__PURE__ */
|
|
5028
|
+
return /* @__PURE__ */ jsx13("div", {
|
|
4890
5029
|
className: cn("skippr:flex skippr:gap-2", isAgent ? "skippr:items-start" : "skippr:justify-end"),
|
|
4891
5030
|
children: /* @__PURE__ */ jsxs11("div", {
|
|
4892
5031
|
className: cn("skippr:flex skippr:max-w-[80%] skippr:flex-col", isAgent ? "skippr:items-start" : "skippr:items-end"),
|
|
4893
5032
|
children: [
|
|
4894
|
-
/* @__PURE__ */
|
|
5033
|
+
/* @__PURE__ */ jsx13("div", {
|
|
4895
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"),
|
|
4896
5035
|
children: message.content
|
|
4897
5036
|
}),
|
|
4898
|
-
message.timestamp && /* @__PURE__ */
|
|
5037
|
+
message.timestamp && /* @__PURE__ */ jsx13("span", {
|
|
4899
5038
|
className: "skippr:mt-1 skippr:px-1 skippr:text-[10px] skippr:text-muted-foreground/60",
|
|
4900
5039
|
children: formatTimestamp(message.timestamp)
|
|
4901
5040
|
})
|
|
@@ -4905,34 +5044,34 @@ function ChatMessage({ message }) {
|
|
|
4905
5044
|
}
|
|
4906
5045
|
|
|
4907
5046
|
// src/components/PlanCard.tsx
|
|
4908
|
-
import { useEffect as
|
|
4909
|
-
import { jsx as
|
|
5047
|
+
import { useEffect as useEffect24 } from "react";
|
|
5048
|
+
import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
4910
5049
|
var APPROVE_MESSAGE = "Yes, go ahead.";
|
|
4911
5050
|
var CANCEL_MESSAGE = "No, cancel that.";
|
|
4912
5051
|
var COMPLETED_CARD_VISIBLE_MS = 2500;
|
|
4913
5052
|
function StepIcon({ status }) {
|
|
4914
5053
|
if (status === "done") {
|
|
4915
|
-
return /* @__PURE__ */
|
|
5054
|
+
return /* @__PURE__ */ jsx14(CircleCheck, {
|
|
4916
5055
|
className: "skippr:size-4 skippr:text-chart-3"
|
|
4917
5056
|
});
|
|
4918
5057
|
}
|
|
4919
5058
|
if (status === "failed") {
|
|
4920
|
-
return /* @__PURE__ */
|
|
5059
|
+
return /* @__PURE__ */ jsx14(CircleX, {
|
|
4921
5060
|
className: "skippr:size-4 skippr:text-destructive"
|
|
4922
5061
|
});
|
|
4923
5062
|
}
|
|
4924
5063
|
if (status === "active") {
|
|
4925
|
-
return /* @__PURE__ */
|
|
5064
|
+
return /* @__PURE__ */ jsx14(Circle, {
|
|
4926
5065
|
className: "skippr:size-4 skippr:fill-primary/30 skippr:text-primary"
|
|
4927
5066
|
});
|
|
4928
5067
|
}
|
|
4929
|
-
return /* @__PURE__ */
|
|
5068
|
+
return /* @__PURE__ */ jsx14(Circle, {
|
|
4930
5069
|
className: "skippr:size-4 skippr:text-muted-foreground/30"
|
|
4931
5070
|
});
|
|
4932
5071
|
}
|
|
4933
5072
|
function PlanCard({ plan, sendChatMessage, onDismiss }) {
|
|
4934
5073
|
const awaitingApproval = plan.state === "proposed";
|
|
4935
|
-
|
|
5074
|
+
useEffect24(() => {
|
|
4936
5075
|
if (plan.state !== "completed")
|
|
4937
5076
|
return;
|
|
4938
5077
|
const timer = setTimeout(onDismiss, COMPLETED_CARD_VISIBLE_MS);
|
|
@@ -4941,19 +5080,19 @@ function PlanCard({ plan, sendChatMessage, onDismiss }) {
|
|
|
4941
5080
|
return /* @__PURE__ */ jsxs12("div", {
|
|
4942
5081
|
className: "skippr:rounded-2xl skippr:rounded-tl-md skippr:bg-card skippr:p-3.5 skippr:ring-2 skippr:ring-brand",
|
|
4943
5082
|
children: [
|
|
4944
|
-
/* @__PURE__ */
|
|
5083
|
+
/* @__PURE__ */ jsx14("p", {
|
|
4945
5084
|
className: "skippr:mb-3 skippr:text-sm skippr:font-semibold skippr:leading-snug skippr:text-foreground",
|
|
4946
5085
|
children: "Plan"
|
|
4947
5086
|
}),
|
|
4948
|
-
/* @__PURE__ */
|
|
5087
|
+
/* @__PURE__ */ jsx14("div", {
|
|
4949
5088
|
className: "skippr:space-y-2",
|
|
4950
5089
|
children: plan.steps.map((step) => /* @__PURE__ */ jsxs12("div", {
|
|
4951
5090
|
className: "skippr:flex skippr:items-center skippr:gap-2",
|
|
4952
5091
|
children: [
|
|
4953
|
-
/* @__PURE__ */
|
|
5092
|
+
/* @__PURE__ */ jsx14(StepIcon, {
|
|
4954
5093
|
status: step.status
|
|
4955
5094
|
}),
|
|
4956
|
-
/* @__PURE__ */
|
|
5095
|
+
/* @__PURE__ */ jsx14("p", {
|
|
4957
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"),
|
|
4958
5097
|
children: step.label
|
|
4959
5098
|
})
|
|
@@ -4963,12 +5102,12 @@ function PlanCard({ plan, sendChatMessage, onDismiss }) {
|
|
|
4963
5102
|
awaitingApproval && /* @__PURE__ */ jsxs12("div", {
|
|
4964
5103
|
className: "skippr:mt-3.5 skippr:flex skippr:gap-2",
|
|
4965
5104
|
children: [
|
|
4966
|
-
/* @__PURE__ */
|
|
5105
|
+
/* @__PURE__ */ jsx14(Button, {
|
|
4967
5106
|
className: "skippr:flex-1 skippr:py-2",
|
|
4968
5107
|
onClick: () => sendChatMessage(APPROVE_MESSAGE),
|
|
4969
5108
|
children: "Approve"
|
|
4970
5109
|
}),
|
|
4971
|
-
/* @__PURE__ */
|
|
5110
|
+
/* @__PURE__ */ jsx14(Button, {
|
|
4972
5111
|
variant: "outline",
|
|
4973
5112
|
className: "skippr:flex-1 skippr:py-2",
|
|
4974
5113
|
onClick: () => sendChatMessage(CANCEL_MESSAGE),
|
|
@@ -4981,26 +5120,26 @@ function PlanCard({ plan, sendChatMessage, onDismiss }) {
|
|
|
4981
5120
|
}
|
|
4982
5121
|
|
|
4983
5122
|
// src/components/TypingIndicator.tsx
|
|
4984
|
-
import { jsx as
|
|
5123
|
+
import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
4985
5124
|
function TypingIndicator() {
|
|
4986
|
-
return /* @__PURE__ */
|
|
5125
|
+
return /* @__PURE__ */ jsx15("div", {
|
|
4987
5126
|
className: "skippr:flex skippr:items-start skippr:gap-2 skippr:animate-skippr-tab-fade",
|
|
4988
5127
|
children: /* @__PURE__ */ jsxs13("div", {
|
|
4989
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",
|
|
4990
5129
|
children: [
|
|
4991
|
-
/* @__PURE__ */
|
|
5130
|
+
/* @__PURE__ */ jsx15("span", {
|
|
4992
5131
|
children: "Agent is analyzing your screen"
|
|
4993
5132
|
}),
|
|
4994
5133
|
/* @__PURE__ */ jsxs13("span", {
|
|
4995
5134
|
className: "skippr:inline-flex skippr:items-center skippr:gap-[2px]",
|
|
4996
5135
|
children: [
|
|
4997
|
-
/* @__PURE__ */
|
|
5136
|
+
/* @__PURE__ */ jsx15("span", {
|
|
4998
5137
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:0ms]"
|
|
4999
5138
|
}),
|
|
5000
|
-
/* @__PURE__ */
|
|
5139
|
+
/* @__PURE__ */ jsx15("span", {
|
|
5001
5140
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:200ms]"
|
|
5002
5141
|
}),
|
|
5003
|
-
/* @__PURE__ */
|
|
5142
|
+
/* @__PURE__ */ jsx15("span", {
|
|
5004
5143
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:400ms]"
|
|
5005
5144
|
})
|
|
5006
5145
|
]
|
|
@@ -5011,7 +5150,7 @@ function TypingIndicator() {
|
|
|
5011
5150
|
}
|
|
5012
5151
|
|
|
5013
5152
|
// src/components/MessageList.tsx
|
|
5014
|
-
import { jsx as
|
|
5153
|
+
import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
5015
5154
|
var BOTTOM_THRESHOLD_PX = 32;
|
|
5016
5155
|
function isPlanVisible(plan) {
|
|
5017
5156
|
return !!plan && plan.steps.length > 0 && plan.state !== "abandoned";
|
|
@@ -5020,16 +5159,17 @@ function MessageList({
|
|
|
5020
5159
|
messages,
|
|
5021
5160
|
isStreaming,
|
|
5022
5161
|
sendChatMessage,
|
|
5023
|
-
isSendingChat,
|
|
5162
|
+
isSendingChat = false,
|
|
5024
5163
|
plan,
|
|
5025
|
-
autoFocus = false
|
|
5164
|
+
autoFocus = false,
|
|
5165
|
+
readOnly = false
|
|
5026
5166
|
}) {
|
|
5027
5167
|
const containerRef = useRef16(null);
|
|
5028
5168
|
const isPinnedToBottom = useRef16(true);
|
|
5029
5169
|
const lastSeenMessageId = useRef16(undefined);
|
|
5030
|
-
const [showJumpToLatest, setShowJumpToLatest] =
|
|
5170
|
+
const [showJumpToLatest, setShowJumpToLatest] = useState18(false);
|
|
5031
5171
|
const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
|
|
5032
|
-
const [dismissedPlanId, setDismissedPlanId] =
|
|
5172
|
+
const [dismissedPlanId, setDismissedPlanId] = useState18(null);
|
|
5033
5173
|
const dismissPlan = useCallback14(() => {
|
|
5034
5174
|
if (plan)
|
|
5035
5175
|
setDismissedPlanId(plan.planId);
|
|
@@ -5077,35 +5217,38 @@ function MessageList({
|
|
|
5077
5217
|
onScroll: handleScroll,
|
|
5078
5218
|
className: "skippr:min-h-0 skippr:flex-1 skippr:space-y-4 skippr:overflow-y-auto skippr:p-4 skippr:[overflow-anchor:none]",
|
|
5079
5219
|
children: [
|
|
5080
|
-
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, {
|
|
5081
5224
|
label: "Waiting for conversation to begin..."
|
|
5082
|
-
}),
|
|
5083
|
-
messages.map((message) => /* @__PURE__ */
|
|
5225
|
+
})),
|
|
5226
|
+
messages.map((message) => /* @__PURE__ */ jsx16(ChatMessage, {
|
|
5084
5227
|
message
|
|
5085
5228
|
}, message.id)),
|
|
5086
|
-
showTyping && /* @__PURE__ */
|
|
5229
|
+
showTyping && /* @__PURE__ */ jsx16(TypingIndicator, {})
|
|
5087
5230
|
]
|
|
5088
5231
|
}),
|
|
5089
|
-
showJumpToLatest && /* @__PURE__ */
|
|
5232
|
+
showJumpToLatest && /* @__PURE__ */ jsx16("button", {
|
|
5090
5233
|
type: "button",
|
|
5091
5234
|
onClick: jumpToLatest,
|
|
5092
5235
|
"aria-label": "Jump to latest message",
|
|
5093
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",
|
|
5094
|
-
children: /* @__PURE__ */
|
|
5237
|
+
children: /* @__PURE__ */ jsx16(ChevronDown, {
|
|
5095
5238
|
className: "skippr:size-4"
|
|
5096
5239
|
})
|
|
5097
5240
|
})
|
|
5098
5241
|
]
|
|
5099
5242
|
}),
|
|
5100
|
-
isPlanVisible(plan) && plan.planId !== dismissedPlanId && /* @__PURE__ */
|
|
5243
|
+
sendChatMessage && isPlanVisible(plan) && plan.planId !== dismissedPlanId && /* @__PURE__ */ jsx16("div", {
|
|
5101
5244
|
className: "skippr:shrink-0 skippr:border-t skippr:border-border skippr:p-3",
|
|
5102
|
-
children: /* @__PURE__ */
|
|
5245
|
+
children: /* @__PURE__ */ jsx16(PlanCard, {
|
|
5103
5246
|
plan,
|
|
5104
5247
|
sendChatMessage,
|
|
5105
5248
|
onDismiss: dismissPlan
|
|
5106
5249
|
}, plan.planId)
|
|
5107
5250
|
}),
|
|
5108
|
-
/* @__PURE__ */
|
|
5251
|
+
!readOnly && sendChatMessage && /* @__PURE__ */ jsx16(ChatInput, {
|
|
5109
5252
|
sendChatMessage,
|
|
5110
5253
|
isSendingChat,
|
|
5111
5254
|
autoFocus
|
|
@@ -5115,19 +5258,19 @@ function MessageList({
|
|
|
5115
5258
|
}
|
|
5116
5259
|
|
|
5117
5260
|
// src/components/SessionAgenda.tsx
|
|
5118
|
-
import { jsx as
|
|
5261
|
+
import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
5119
5262
|
function SessionAgenda({ phases, hasStarted }) {
|
|
5120
5263
|
if (phases.length === 0 || !hasStarted) {
|
|
5121
|
-
return /* @__PURE__ */
|
|
5264
|
+
return /* @__PURE__ */ jsx17("div", {
|
|
5122
5265
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
5123
|
-
children: /* @__PURE__ */
|
|
5266
|
+
children: /* @__PURE__ */ jsx17(LoadingDots, {
|
|
5124
5267
|
label: "Waiting for agenda to load..."
|
|
5125
5268
|
})
|
|
5126
5269
|
});
|
|
5127
5270
|
}
|
|
5128
|
-
return /* @__PURE__ */
|
|
5271
|
+
return /* @__PURE__ */ jsx17("div", {
|
|
5129
5272
|
className: "skippr:flex-1 skippr:overflow-y-auto skippr:px-4 skippr:py-4",
|
|
5130
|
-
children: /* @__PURE__ */
|
|
5273
|
+
children: /* @__PURE__ */ jsx17("div", {
|
|
5131
5274
|
className: "skippr:space-y-1",
|
|
5132
5275
|
children: phases.map((phase) => {
|
|
5133
5276
|
const isActive = phase.status === "active";
|
|
@@ -5135,29 +5278,29 @@ function SessionAgenda({ phases, hasStarted }) {
|
|
|
5135
5278
|
return /* @__PURE__ */ jsxs15("div", {
|
|
5136
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"),
|
|
5137
5280
|
children: [
|
|
5138
|
-
/* @__PURE__ */
|
|
5281
|
+
/* @__PURE__ */ jsx17("div", {
|
|
5139
5282
|
className: "skippr:mt-0.5",
|
|
5140
|
-
children: isCompleted ? /* @__PURE__ */
|
|
5283
|
+
children: isCompleted ? /* @__PURE__ */ jsx17(CircleCheck, {
|
|
5141
5284
|
className: "skippr:size-4 skippr:text-chart-3"
|
|
5142
|
-
}) : isActive ? /* @__PURE__ */
|
|
5285
|
+
}) : isActive ? /* @__PURE__ */ jsx17(Circle, {
|
|
5143
5286
|
className: "skippr:size-4 skippr:fill-primary/30 skippr:text-primary"
|
|
5144
|
-
}) : /* @__PURE__ */
|
|
5287
|
+
}) : /* @__PURE__ */ jsx17(Circle, {
|
|
5145
5288
|
className: "skippr:size-4 skippr:text-muted-foreground/30"
|
|
5146
5289
|
})
|
|
5147
5290
|
}),
|
|
5148
5291
|
/* @__PURE__ */ jsxs15("div", {
|
|
5149
5292
|
className: "skippr:min-w-0 skippr:flex-1",
|
|
5150
5293
|
children: [
|
|
5151
|
-
/* @__PURE__ */
|
|
5294
|
+
/* @__PURE__ */ jsx17("p", {
|
|
5152
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"),
|
|
5153
5296
|
children: phase.name
|
|
5154
5297
|
}),
|
|
5155
|
-
phase.highlights.length > 0 && /* @__PURE__ */
|
|
5298
|
+
phase.highlights.length > 0 && /* @__PURE__ */ jsx17("ul", {
|
|
5156
5299
|
className: "skippr:mt-1 skippr:space-y-0.5",
|
|
5157
5300
|
children: phase.highlights.map((text) => /* @__PURE__ */ jsxs15("li", {
|
|
5158
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"),
|
|
5159
5302
|
children: [
|
|
5160
|
-
/* @__PURE__ */
|
|
5303
|
+
/* @__PURE__ */ jsx17("span", {
|
|
5161
5304
|
className: "skippr:size-1 skippr:shrink-0 skippr:rounded-full skippr:bg-current"
|
|
5162
5305
|
}),
|
|
5163
5306
|
text
|
|
@@ -5174,61 +5317,20 @@ function SessionAgenda({ phases, hasStarted }) {
|
|
|
5174
5317
|
}
|
|
5175
5318
|
|
|
5176
5319
|
// src/components/SessionWarningBanner.tsx
|
|
5177
|
-
import { jsx as
|
|
5320
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
5178
5321
|
var SESSION_WARNING_THRESHOLD_SECS = 60;
|
|
5179
5322
|
function SessionWarningBanner({ remaining }) {
|
|
5180
5323
|
if (remaining === null || remaining <= 0 || remaining > SESSION_WARNING_THRESHOLD_SECS)
|
|
5181
5324
|
return null;
|
|
5182
|
-
return /* @__PURE__ */
|
|
5325
|
+
return /* @__PURE__ */ jsx18("div", {
|
|
5183
5326
|
"data-testid": "session-warning-banner",
|
|
5184
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",
|
|
5185
5328
|
children: "Session ending soon"
|
|
5186
5329
|
});
|
|
5187
5330
|
}
|
|
5188
5331
|
|
|
5189
|
-
// src/components/StartSessionPrompt.tsx
|
|
5190
|
-
import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
5191
|
-
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";
|
|
5192
|
-
function StartSessionPrompt({
|
|
5193
|
-
onStartSession,
|
|
5194
|
-
agentId,
|
|
5195
|
-
agentControls,
|
|
5196
|
-
isStarting,
|
|
5197
|
-
error,
|
|
5198
|
-
label = "Talk to Skippr",
|
|
5199
|
-
canResume = false,
|
|
5200
|
-
onResume
|
|
5201
|
-
}) {
|
|
5202
|
-
return /* @__PURE__ */ jsxs16("div", {
|
|
5203
|
-
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:px-4",
|
|
5204
|
-
children: [
|
|
5205
|
-
canResume && onResume ? /* @__PURE__ */ jsx18("button", {
|
|
5206
|
-
type: "button",
|
|
5207
|
-
onClick: onResume,
|
|
5208
|
-
disabled: isStarting,
|
|
5209
|
-
className: PROMPT_BUTTON,
|
|
5210
|
-
children: isStarting ? "Resuming..." : "Resume session"
|
|
5211
|
-
}) : /* @__PURE__ */ jsx18("button", {
|
|
5212
|
-
type: "button",
|
|
5213
|
-
onClick: () => {
|
|
5214
|
-
if (!agentId)
|
|
5215
|
-
return;
|
|
5216
|
-
onStartSession(agentControls ? { agentId, agentControls } : { agentId });
|
|
5217
|
-
},
|
|
5218
|
-
disabled: isStarting || !agentId,
|
|
5219
|
-
className: PROMPT_BUTTON,
|
|
5220
|
-
children: isStarting ? "Starting..." : label
|
|
5221
|
-
}),
|
|
5222
|
-
error && /* @__PURE__ */ jsx18("p", {
|
|
5223
|
-
className: "skippr:text-xs skippr:text-destructive",
|
|
5224
|
-
children: error
|
|
5225
|
-
})
|
|
5226
|
-
]
|
|
5227
|
-
});
|
|
5228
|
-
}
|
|
5229
|
-
|
|
5230
5332
|
// src/components/Sidebar.tsx
|
|
5231
|
-
import { jsx as jsx19, jsxs as
|
|
5333
|
+
import { jsx as jsx19, jsxs as jsxs16, Fragment as Fragment3 } from "react/jsx-runtime";
|
|
5232
5334
|
var PANEL_GAP_PX = 12;
|
|
5233
5335
|
var PANEL_VIEWPORT_MARGIN_PX = 24;
|
|
5234
5336
|
var PANEL_MAX_HEIGHT_PX = 460;
|
|
@@ -5245,9 +5347,6 @@ function Sidebar({
|
|
|
5245
5347
|
isPausing,
|
|
5246
5348
|
isPaused,
|
|
5247
5349
|
error,
|
|
5248
|
-
startSession,
|
|
5249
|
-
resumeSession,
|
|
5250
|
-
resumableSession,
|
|
5251
5350
|
isPanelOpen,
|
|
5252
5351
|
position,
|
|
5253
5352
|
isAuthenticated,
|
|
@@ -5259,17 +5358,26 @@ function Sidebar({
|
|
|
5259
5358
|
sidebarTab: activeTab,
|
|
5260
5359
|
setSidebarTab: setActiveTab,
|
|
5261
5360
|
autoFocusChat,
|
|
5262
|
-
agentId,
|
|
5263
5361
|
agentMode,
|
|
5264
|
-
|
|
5362
|
+
displayModules
|
|
5265
5363
|
} = useLiveAgent();
|
|
5266
|
-
const internalCtx =
|
|
5364
|
+
const internalCtx = useContext11(LiveAgentContext);
|
|
5365
|
+
const defaultAgentId = internalCtx?.defaultAgentId ?? null;
|
|
5366
|
+
const startDefaultSession = internalCtx?.startDefaultSession ?? (() => {});
|
|
5367
|
+
const talkDisabled = !(internalCtx?.hasResolvedModules ?? false);
|
|
5267
5368
|
const usesHostAuth = internalCtx?.usesHostAuth ?? false;
|
|
5268
5369
|
const authFailed = internalCtx?.authFailed ?? false;
|
|
5370
|
+
const idleHistory = internalCtx?.idleHistory ?? {
|
|
5371
|
+
messages: [],
|
|
5372
|
+
phases: [],
|
|
5373
|
+
isLoading: false
|
|
5374
|
+
};
|
|
5269
5375
|
const launcherBottomPx = internalCtx?.launcherBottomPx ?? DEFAULT_LAUNCHER_BOTTOM_PX;
|
|
5270
5376
|
const popsDown = internalCtx?.popsDown ?? false;
|
|
5271
5377
|
const panelExpanded = internalCtx?.panelExpanded ?? false;
|
|
5272
|
-
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;
|
|
5273
5381
|
const isFloating = variant === "floating";
|
|
5274
5382
|
const isSidebar = variant === "sidebar";
|
|
5275
5383
|
const inSession = isConnected || isStarting || isPausing;
|
|
@@ -5282,7 +5390,7 @@ function Sidebar({
|
|
|
5282
5390
|
height: panelExpanded ? availableHeight : `min(${PANEL_MAX_HEIGHT_PX}px, ${availableHeight})`
|
|
5283
5391
|
};
|
|
5284
5392
|
}
|
|
5285
|
-
|
|
5393
|
+
useEffect25(() => {
|
|
5286
5394
|
if (!isSidebar)
|
|
5287
5395
|
return;
|
|
5288
5396
|
const prop = position === "right" ? "marginRight" : "marginLeft";
|
|
@@ -5296,7 +5404,7 @@ function Sidebar({
|
|
|
5296
5404
|
document.body.style.transition = "";
|
|
5297
5405
|
};
|
|
5298
5406
|
}, [isSidebar, isPanelOpen, position]);
|
|
5299
|
-
return /* @__PURE__ */
|
|
5407
|
+
return /* @__PURE__ */ jsxs16("div", {
|
|
5300
5408
|
ref: internalCtx?.panelRef,
|
|
5301
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"),
|
|
5302
5410
|
style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined, ...floatingStyle },
|
|
@@ -5307,19 +5415,17 @@ function Sidebar({
|
|
|
5307
5415
|
isPaused,
|
|
5308
5416
|
isPausing,
|
|
5309
5417
|
isDisconnecting,
|
|
5310
|
-
canResume: resumableSession !== null,
|
|
5311
|
-
onStartSession: startSession,
|
|
5312
|
-
onResume: resumeSession,
|
|
5313
5418
|
isStarting,
|
|
5314
5419
|
error,
|
|
5315
5420
|
activeTab,
|
|
5316
5421
|
onTabChange: setActiveTab,
|
|
5317
5422
|
hideControls,
|
|
5318
|
-
startSessionLabel,
|
|
5319
5423
|
autoFocusChat,
|
|
5320
|
-
|
|
5321
|
-
|
|
5322
|
-
|
|
5424
|
+
showAgenda,
|
|
5425
|
+
idleHistory,
|
|
5426
|
+
onTalk: startDefaultSession,
|
|
5427
|
+
talkLabel: startSessionLabel,
|
|
5428
|
+
talkDisabled
|
|
5323
5429
|
}) : usesHostAuth || isValidating ? /* @__PURE__ */ jsx19("div", {
|
|
5324
5430
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
5325
5431
|
children: /* @__PURE__ */ jsx19(LoadingDots, {
|
|
@@ -5339,35 +5445,31 @@ function AuthenticatedContent({
|
|
|
5339
5445
|
isPaused,
|
|
5340
5446
|
isPausing,
|
|
5341
5447
|
isDisconnecting,
|
|
5342
|
-
canResume,
|
|
5343
|
-
onStartSession,
|
|
5344
|
-
onResume,
|
|
5345
5448
|
isStarting,
|
|
5346
5449
|
error,
|
|
5347
5450
|
activeTab,
|
|
5348
5451
|
onTabChange,
|
|
5349
5452
|
hideControls,
|
|
5350
|
-
startSessionLabel,
|
|
5351
5453
|
autoFocusChat,
|
|
5352
|
-
|
|
5353
|
-
|
|
5354
|
-
|
|
5454
|
+
showAgenda,
|
|
5455
|
+
idleHistory,
|
|
5456
|
+
onTalk,
|
|
5457
|
+
talkLabel,
|
|
5458
|
+
talkDisabled
|
|
5355
5459
|
}) {
|
|
5356
5460
|
const inSession = isConnected || isStarting || isPaused || isPausing;
|
|
5357
5461
|
const effectiveTab = showAgenda ? activeTab : "chat";
|
|
5358
5462
|
let transitionLabel = null;
|
|
5359
5463
|
if (isStarting && !isConnected) {
|
|
5360
5464
|
transitionLabel = "Reconnecting...";
|
|
5361
|
-
} else if (isPaused) {
|
|
5362
|
-
transitionLabel = "Paused";
|
|
5363
5465
|
}
|
|
5364
|
-
return /* @__PURE__ */
|
|
5466
|
+
return /* @__PURE__ */ jsxs16(Fragment3, {
|
|
5365
5467
|
children: [
|
|
5366
5468
|
isConnected && /* @__PURE__ */ jsx19(ConnectedBanner, {}),
|
|
5367
|
-
showAgenda && /* @__PURE__ */
|
|
5469
|
+
showAgenda && /* @__PURE__ */ jsxs16("div", {
|
|
5368
5470
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-1",
|
|
5369
5471
|
children: [
|
|
5370
|
-
/* @__PURE__ */
|
|
5472
|
+
/* @__PURE__ */ jsxs16("button", {
|
|
5371
5473
|
type: "button",
|
|
5372
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"),
|
|
5373
5475
|
onClick: () => onTabChange("chat"),
|
|
@@ -5381,7 +5483,7 @@ function AuthenticatedContent({
|
|
|
5381
5483
|
})
|
|
5382
5484
|
]
|
|
5383
5485
|
}),
|
|
5384
|
-
/* @__PURE__ */
|
|
5486
|
+
/* @__PURE__ */ jsxs16("button", {
|
|
5385
5487
|
type: "button",
|
|
5386
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"),
|
|
5387
5489
|
onClick: () => onTabChange("agenda"),
|
|
@@ -5404,7 +5506,7 @@ function AuthenticatedContent({
|
|
|
5404
5506
|
children: /* @__PURE__ */ jsx19(LoadingDots, {
|
|
5405
5507
|
label: "Ending session..."
|
|
5406
5508
|
})
|
|
5407
|
-
}) : inSession ? /* @__PURE__ */
|
|
5509
|
+
}) : inSession ? /* @__PURE__ */ jsxs16(Fragment3, {
|
|
5408
5510
|
children: [
|
|
5409
5511
|
transitionLabel && /* @__PURE__ */ jsx19("div", {
|
|
5410
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",
|
|
@@ -5415,26 +5517,21 @@ function AuthenticatedContent({
|
|
|
5415
5517
|
autoFocusChat
|
|
5416
5518
|
})
|
|
5417
5519
|
]
|
|
5418
|
-
}) : /* @__PURE__ */ jsx19(
|
|
5419
|
-
|
|
5420
|
-
|
|
5421
|
-
|
|
5422
|
-
|
|
5423
|
-
|
|
5424
|
-
|
|
5425
|
-
|
|
5426
|
-
label: startSessionLabel,
|
|
5427
|
-
canResume,
|
|
5428
|
-
onResume
|
|
5429
|
-
})
|
|
5430
|
-
}, `${activeTab}-empty`)
|
|
5520
|
+
}) : /* @__PURE__ */ jsx19(IdleHistory, {
|
|
5521
|
+
activeTab: effectiveTab,
|
|
5522
|
+
history: idleHistory,
|
|
5523
|
+
onTalk,
|
|
5524
|
+
talkLabel,
|
|
5525
|
+
talkDisabled,
|
|
5526
|
+
error
|
|
5527
|
+
})
|
|
5431
5528
|
}),
|
|
5432
5529
|
!hideControls && /* @__PURE__ */ jsx19("div", {
|
|
5433
5530
|
className: "skippr:shrink-0 skippr:border-t skippr:border-border",
|
|
5434
|
-
children: /* @__PURE__ */
|
|
5531
|
+
children: /* @__PURE__ */ jsxs16("div", {
|
|
5435
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",
|
|
5436
5533
|
children: [
|
|
5437
|
-
/* @__PURE__ */
|
|
5534
|
+
/* @__PURE__ */ jsxs16("svg", {
|
|
5438
5535
|
viewBox: "21 21 109 109",
|
|
5439
5536
|
className: "skippr:size-3",
|
|
5440
5537
|
fill: "none",
|
|
@@ -5458,7 +5555,7 @@ function AuthenticatedContent({
|
|
|
5458
5555
|
});
|
|
5459
5556
|
}
|
|
5460
5557
|
function AuthError() {
|
|
5461
|
-
return /* @__PURE__ */
|
|
5558
|
+
return /* @__PURE__ */ jsxs16("div", {
|
|
5462
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",
|
|
5463
5560
|
children: [
|
|
5464
5561
|
/* @__PURE__ */ jsx19(CircleAlert, {
|
|
@@ -5481,6 +5578,60 @@ function ConnectedBanner() {
|
|
|
5481
5578
|
remaining
|
|
5482
5579
|
});
|
|
5483
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
|
+
}
|
|
5484
5635
|
function ConnectedBody({
|
|
5485
5636
|
activeTab,
|
|
5486
5637
|
autoFocusChat
|
|
@@ -5488,7 +5639,8 @@ function ConnectedBody({
|
|
|
5488
5639
|
const { allMessages, agentState, sendChatMessage, isSendingChat } = useCombinedMessages();
|
|
5489
5640
|
const { phases } = usePhaseUpdates();
|
|
5490
5641
|
const plan = usePlanUpdates();
|
|
5491
|
-
const { agentControls } = useLiveAgent();
|
|
5642
|
+
const { agentControls, isPaused } = useLiveAgent();
|
|
5643
|
+
const { isHeld } = useSessionHoldContext();
|
|
5492
5644
|
if (activeTab === "agenda") {
|
|
5493
5645
|
return /* @__PURE__ */ jsx19("div", {
|
|
5494
5646
|
className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto skippr:animate-skippr-tab-fade",
|
|
@@ -5506,18 +5658,19 @@ function ConnectedBody({
|
|
|
5506
5658
|
sendChatMessage,
|
|
5507
5659
|
isSendingChat,
|
|
5508
5660
|
plan: agentControls?.actions ? plan : null,
|
|
5509
|
-
autoFocus: autoFocusChat
|
|
5661
|
+
autoFocus: autoFocusChat,
|
|
5662
|
+
readOnly: isPaused || isHeld
|
|
5510
5663
|
})
|
|
5511
5664
|
}, "chat");
|
|
5512
5665
|
}
|
|
5513
5666
|
|
|
5514
5667
|
// src/components/SidebarTrigger.tsx
|
|
5515
|
-
import { useContext as
|
|
5668
|
+
import { useContext as useContext12 } from "react";
|
|
5516
5669
|
|
|
5517
5670
|
// src/components/Logo.tsx
|
|
5518
|
-
import { jsx as jsx20, jsxs as
|
|
5671
|
+
import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
5519
5672
|
function Logo({ className }) {
|
|
5520
|
-
return /* @__PURE__ */
|
|
5673
|
+
return /* @__PURE__ */ jsxs17("svg", {
|
|
5521
5674
|
width: "1em",
|
|
5522
5675
|
height: "1em",
|
|
5523
5676
|
viewBox: "0 0 200 200",
|
|
@@ -5533,7 +5686,7 @@ function Logo({ className }) {
|
|
|
5533
5686
|
rx: "40",
|
|
5534
5687
|
fill: "#2D2D3F"
|
|
5535
5688
|
}),
|
|
5536
|
-
/* @__PURE__ */
|
|
5689
|
+
/* @__PURE__ */ jsxs17("g", {
|
|
5537
5690
|
transform: "translate(100 100) scale(0.8) translate(-100 -100)",
|
|
5538
5691
|
children: [
|
|
5539
5692
|
/* @__PURE__ */ jsx20("path", {
|
|
@@ -5564,7 +5717,7 @@ function SidebarTrigger() {
|
|
|
5564
5717
|
isStarting,
|
|
5565
5718
|
isPausing
|
|
5566
5719
|
} = useLiveAgent();
|
|
5567
|
-
const internalCtx =
|
|
5720
|
+
const internalCtx = useContext12(LiveAgentContext);
|
|
5568
5721
|
const launcherBottomPx = internalCtx?.launcherBottomPx ?? DEFAULT_LAUNCHER_BOTTOM_PX;
|
|
5569
5722
|
const popsDown = internalCtx?.popsDown ?? false;
|
|
5570
5723
|
if (isMinimized || isConnected || isStarting || isPausing)
|
|
@@ -5586,7 +5739,15 @@ function SidebarTrigger() {
|
|
|
5586
5739
|
}
|
|
5587
5740
|
|
|
5588
5741
|
// src/components/LiveAgent.tsx
|
|
5589
|
-
import { jsx as jsx22, jsxs as
|
|
5742
|
+
import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
5743
|
+
function readSavedLauncherBottom() {
|
|
5744
|
+
try {
|
|
5745
|
+
const saved = Number.parseInt(localStorage.getItem("skippr_widget_bottom") ?? "", 10);
|
|
5746
|
+
return Number.isFinite(saved) && saved > 0 ? saved : null;
|
|
5747
|
+
} catch {
|
|
5748
|
+
return null;
|
|
5749
|
+
}
|
|
5750
|
+
}
|
|
5590
5751
|
function AgentCursorMount({ animated }) {
|
|
5591
5752
|
return /* @__PURE__ */ jsx22(AgentCursor, {
|
|
5592
5753
|
target: useAgentCursor(),
|
|
@@ -5597,7 +5758,7 @@ function PlanPanelOpener() {
|
|
|
5597
5758
|
const plan = usePlanUpdates();
|
|
5598
5759
|
const { expandPanel } = useLiveAgent();
|
|
5599
5760
|
const surfacedPlanIdRef = useRef17(null);
|
|
5600
|
-
|
|
5761
|
+
useEffect26(() => {
|
|
5601
5762
|
if (plan?.state !== "proposed" || surfacedPlanIdRef.current === plan.planId)
|
|
5602
5763
|
return;
|
|
5603
5764
|
surfacedPlanIdRef.current = plan.planId;
|
|
@@ -5613,6 +5774,7 @@ function LiveAgent(props) {
|
|
|
5613
5774
|
getUserToken,
|
|
5614
5775
|
userToken,
|
|
5615
5776
|
position = "right",
|
|
5777
|
+
verticalAlign = "bottom",
|
|
5616
5778
|
variant = "floating",
|
|
5617
5779
|
minimizable = true,
|
|
5618
5780
|
defaultOpen = false,
|
|
@@ -5636,7 +5798,7 @@ function LiveAgent(props) {
|
|
|
5636
5798
|
const auth = useAuth({ appKey });
|
|
5637
5799
|
const usesHostAuth = !!getUserToken || !!userToken || !!authTokenProp;
|
|
5638
5800
|
const effectiveAuthToken = usesHostAuth ? authTokenProp : auth.authToken ?? undefined;
|
|
5639
|
-
const [activeModule, setActiveModule] =
|
|
5801
|
+
const [activeModule, setActiveModule] = useState19(null);
|
|
5640
5802
|
const minimizeOnSessionStart = useCallback15(() => {
|
|
5641
5803
|
if (minimizable) {
|
|
5642
5804
|
setIsMinimized(true);
|
|
@@ -5690,27 +5852,28 @@ function LiveAgent(props) {
|
|
|
5690
5852
|
disconnect();
|
|
5691
5853
|
}, [disconnect]);
|
|
5692
5854
|
const isSessionLive = connection !== null || isStarting || isPausing || isDisconnecting;
|
|
5693
|
-
const [isPanelOpen, setIsPanelOpen] =
|
|
5694
|
-
const [isMinimized, setIsMinimized] =
|
|
5695
|
-
const [sidebarTab, setSidebarTab] =
|
|
5696
|
-
const [phasesSnapshot, setPhasesSnapshot] =
|
|
5697
|
-
const [textMode, setTextMode] =
|
|
5698
|
-
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);
|
|
5699
5861
|
const togglePanelExpanded = useCallback15(() => setPanelExpanded((prev) => !prev), []);
|
|
5700
5862
|
const panelRef = useRef17(null);
|
|
5701
5863
|
const controlBarRef = useRef17(null);
|
|
5702
|
-
const [isDragging, setIsDragging] =
|
|
5864
|
+
const [isDragging, setIsDragging] = useState19(false);
|
|
5703
5865
|
const setTextModeState = useCallback15((enabled) => {
|
|
5704
5866
|
setTextMode(enabled);
|
|
5705
5867
|
}, []);
|
|
5706
5868
|
const isConnected = connection !== null;
|
|
5707
5869
|
const showControlBar = isConnected || isStarting || isPausing;
|
|
5708
|
-
|
|
5870
|
+
useEffect26(() => {
|
|
5709
5871
|
if (!isConnected)
|
|
5710
5872
|
setTextModeState(false);
|
|
5711
5873
|
}, [isConnected, setTextModeState]);
|
|
5712
5874
|
const {
|
|
5713
5875
|
modules: availableModules,
|
|
5876
|
+
defaultSelection,
|
|
5714
5877
|
isLoading: isLoadingModules,
|
|
5715
5878
|
hasResolved: hasResolvedModules,
|
|
5716
5879
|
error: modulesError,
|
|
@@ -5718,15 +5881,15 @@ function LiveAgent(props) {
|
|
|
5718
5881
|
} = useAvailableModules({
|
|
5719
5882
|
enabled: !isSessionLive,
|
|
5720
5883
|
bearerToken,
|
|
5721
|
-
authedFetch
|
|
5884
|
+
authedFetch,
|
|
5885
|
+
agentId: hostAgentId ?? undefined
|
|
5722
5886
|
});
|
|
5723
5887
|
const { goals: adoptionGoals, attendGoal } = useAdoptionGoals({
|
|
5724
5888
|
enabled: !isSessionLive,
|
|
5725
5889
|
bearerToken,
|
|
5726
5890
|
authedFetch
|
|
5727
5891
|
});
|
|
5728
|
-
const
|
|
5729
|
-
const operatingModule = activeModule ?? (hostAgentId ? displayModules[0] ?? null : null);
|
|
5892
|
+
const operatingModule = activeModule ?? (hostAgentId ? availableModules[0] ?? null : null);
|
|
5730
5893
|
const agentId = operatingModule?.id ?? null;
|
|
5731
5894
|
const agentControls = operatingModule?.controls ?? hostAgentControls;
|
|
5732
5895
|
const agentMode = operatingModule?.mode ?? null;
|
|
@@ -5763,9 +5926,9 @@ function LiveAgent(props) {
|
|
|
5763
5926
|
adoptionGoalId: goal.goalId
|
|
5764
5927
|
});
|
|
5765
5928
|
}, [attendGoal, availableModules, startSession]);
|
|
5766
|
-
const [welcomeDismissed, setWelcomeDismissed] =
|
|
5929
|
+
const [welcomeDismissed, setWelcomeDismissed] = useState19(false);
|
|
5767
5930
|
const dismissWelcome = useCallback15(() => setWelcomeDismissed(true), []);
|
|
5768
|
-
const [currentPosition, setCurrentPosition] =
|
|
5931
|
+
const [currentPosition, setCurrentPosition] = useState19(() => {
|
|
5769
5932
|
try {
|
|
5770
5933
|
const saved = localStorage.getItem("skippr_widget_position");
|
|
5771
5934
|
if (saved === "left" || saved === "right")
|
|
@@ -5779,16 +5942,13 @@ function LiveAgent(props) {
|
|
|
5779
5942
|
localStorage.setItem("skippr_widget_position", pos);
|
|
5780
5943
|
} catch {}
|
|
5781
5944
|
}, []);
|
|
5782
|
-
const
|
|
5783
|
-
|
|
5784
|
-
|
|
5785
|
-
|
|
5786
|
-
|
|
5787
|
-
} catch {}
|
|
5788
|
-
return DEFAULT_LAUNCHER_BOTTOM_PX;
|
|
5789
|
-
});
|
|
5790
|
-
const [popsDown, setPopsDown] = useState18(() => launcherPopsDown(launcherBottomPx));
|
|
5945
|
+
const savedLauncherBottom = readSavedLauncherBottom();
|
|
5946
|
+
const hasDraggedRef = useRef17(savedLauncherBottom !== null);
|
|
5947
|
+
const verticalAlignRef = useRef17(verticalAlign);
|
|
5948
|
+
const [launcherBottomPx, setLauncherBottomPxState] = useState19(() => savedLauncherBottom !== null ? clampLauncherBottom(savedLauncherBottom) : verticalAlignToBottomPx(verticalAlign));
|
|
5949
|
+
const [popsDown, setPopsDown] = useState19(() => launcherPopsDown(launcherBottomPx));
|
|
5791
5950
|
const setLauncherBottomPx = useCallback15((px) => {
|
|
5951
|
+
hasDraggedRef.current = true;
|
|
5792
5952
|
setLauncherBottomPxState(px);
|
|
5793
5953
|
setPopsDown(launcherPopsDown(px));
|
|
5794
5954
|
try {
|
|
@@ -5801,11 +5961,11 @@ function LiveAgent(props) {
|
|
|
5801
5961
|
setPositionWithPersist(side);
|
|
5802
5962
|
setLauncherBottomPx(bottomPx);
|
|
5803
5963
|
}, [setPositionWithPersist, setLauncherBottomPx]);
|
|
5804
|
-
|
|
5964
|
+
useEffect26(() => {
|
|
5805
5965
|
const syncToViewport = () => {
|
|
5806
|
-
const
|
|
5807
|
-
setLauncherBottomPxState(
|
|
5808
|
-
setPopsDown(launcherPopsDown(
|
|
5966
|
+
const next = hasDraggedRef.current ? clampLauncherBottom(launcherBottomPxRef.current) : verticalAlignToBottomPx(verticalAlignRef.current);
|
|
5967
|
+
setLauncherBottomPxState(next);
|
|
5968
|
+
setPopsDown(launcherPopsDown(next));
|
|
5809
5969
|
};
|
|
5810
5970
|
syncToViewport();
|
|
5811
5971
|
window.addEventListener("resize", syncToViewport);
|
|
@@ -5829,6 +5989,32 @@ function LiveAgent(props) {
|
|
|
5829
5989
|
minimizePanel();
|
|
5830
5990
|
}, [pauseSession, minimizePanel]);
|
|
5831
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]);
|
|
5832
6018
|
const ctx = useMemo6(() => ({
|
|
5833
6019
|
connection,
|
|
5834
6020
|
shouldConnect,
|
|
@@ -5846,6 +6032,7 @@ function LiveAgent(props) {
|
|
|
5846
6032
|
pauseTimeoutSeconds,
|
|
5847
6033
|
resumableSession,
|
|
5848
6034
|
historyMessages,
|
|
6035
|
+
idleHistory,
|
|
5849
6036
|
phasesSnapshot,
|
|
5850
6037
|
setPhasesSnapshot,
|
|
5851
6038
|
isPanelOpen,
|
|
@@ -5887,8 +6074,10 @@ function LiveAgent(props) {
|
|
|
5887
6074
|
agentId,
|
|
5888
6075
|
agentMode,
|
|
5889
6076
|
agentControls,
|
|
5890
|
-
displayModules,
|
|
6077
|
+
displayModules: availableModules,
|
|
5891
6078
|
activeModule,
|
|
6079
|
+
defaultAgentId,
|
|
6080
|
+
startDefaultSession,
|
|
5892
6081
|
isLoadingModules,
|
|
5893
6082
|
modulesError,
|
|
5894
6083
|
refetchModules,
|
|
@@ -5913,6 +6102,7 @@ function LiveAgent(props) {
|
|
|
5913
6102
|
pauseTimeoutSeconds,
|
|
5914
6103
|
resumableSession,
|
|
5915
6104
|
historyMessages,
|
|
6105
|
+
idleHistory,
|
|
5916
6106
|
phasesSnapshot,
|
|
5917
6107
|
isPanelOpen,
|
|
5918
6108
|
openPanel,
|
|
@@ -5949,8 +6139,10 @@ function LiveAgent(props) {
|
|
|
5949
6139
|
agentId,
|
|
5950
6140
|
agentMode,
|
|
5951
6141
|
agentControls,
|
|
5952
|
-
|
|
6142
|
+
availableModules,
|
|
5953
6143
|
activeModule,
|
|
6144
|
+
defaultAgentId,
|
|
6145
|
+
startDefaultSession,
|
|
5954
6146
|
isLoadingModules,
|
|
5955
6147
|
modulesError,
|
|
5956
6148
|
refetchModules,
|
|
@@ -5961,7 +6153,7 @@ function LiveAgent(props) {
|
|
|
5961
6153
|
]);
|
|
5962
6154
|
return /* @__PURE__ */ jsx22(LiveAgentContext.Provider, {
|
|
5963
6155
|
value: ctx,
|
|
5964
|
-
children: /* @__PURE__ */
|
|
6156
|
+
children: /* @__PURE__ */ jsxs18(LiveKitRoom, {
|
|
5965
6157
|
serverUrl: connection?.livekitUrl,
|
|
5966
6158
|
token: connection?.token,
|
|
5967
6159
|
connect: shouldConnect,
|
|
@@ -5973,7 +6165,7 @@ function LiveAgent(props) {
|
|
|
5973
6165
|
pendingScreenStream
|
|
5974
6166
|
}),
|
|
5975
6167
|
connection && captureMode === CAPTURE_MODE.Auto && /* @__PURE__ */ jsx22(DomCapture, {}),
|
|
5976
|
-
/* @__PURE__ */
|
|
6168
|
+
/* @__PURE__ */ jsxs18(ShadowHost, {
|
|
5977
6169
|
children: [
|
|
5978
6170
|
connection && captureMode === CAPTURE_MODE.Auto && agentControls?.highlight && /* @__PURE__ */ jsx22(HighlightOverlay, {}),
|
|
5979
6171
|
connection && captureMode === CAPTURE_MODE.Auto && agentControls?.actions && /* @__PURE__ */ jsx22(PageActionHandler, {}),
|
|
@@ -5981,22 +6173,24 @@ function LiveAgent(props) {
|
|
|
5981
6173
|
connection && captureMode === CAPTURE_MODE.Auto && (agentControls?.highlight || agentControls?.actions) && /* @__PURE__ */ jsx22(AgentCursorMount, {
|
|
5982
6174
|
animated: shouldAnimateCursor
|
|
5983
6175
|
}),
|
|
5984
|
-
/* @__PURE__ */
|
|
5985
|
-
|
|
5986
|
-
|
|
5987
|
-
|
|
5988
|
-
|
|
5989
|
-
|
|
5990
|
-
|
|
5991
|
-
|
|
5992
|
-
|
|
5993
|
-
|
|
5994
|
-
|
|
5995
|
-
|
|
5996
|
-
|
|
5997
|
-
|
|
5998
|
-
|
|
5999
|
-
|
|
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
|
+
})
|
|
6000
6194
|
})
|
|
6001
6195
|
]
|
|
6002
6196
|
}),
|