@skippr/live-agent-sdk 0.79.0 → 0.81.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 +762 -540
- package/dist/skippr-sdk.css +1 -1
- package/dist/skippr-sdk.js +133 -133
- package/dist/types/capture/agentActionSignal.d.ts +3 -5
- package/dist/types/components/AutoStartMedia.d.ts +2 -2
- package/dist/types/components/DomCapture.d.ts +2 -2
- package/dist/types/components/PushToTalkHint.d.ts +1 -0
- package/dist/types/components/PushToTalkMic.d.ts +8 -0
- package/dist/types/components/StopActionsIcon.d.ts +5 -0
- package/dist/types/context/LiveAgentContext.d.ts +3 -3
- package/dist/types/context/VoiceTurnContext.d.ts +6 -0
- package/dist/types/hooks/useActionControl.d.ts +1 -3
- package/dist/types/hooks/useKeyboardPushToTalk.d.ts +8 -0
- package/dist/types/hooks/usePlanUpdates.d.ts +1 -1
- package/dist/types/hooks/useVoiceTurn.d.ts +7 -0
- package/dist/types/lib/constants.d.ts +11 -1
- package/package.json +1 -1
- package/dist/types/context/TapToTalkContext.d.ts +0 -6
- package/dist/types/hooks/useTapToTalk.d.ts +0 -5
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
|
|
11
|
+
import { useCallback as useCallback18, useEffect as useEffect29, useMemo as useMemo7, useRef as useRef23, useState as useState21 } from "react";
|
|
12
12
|
|
|
13
13
|
// src/capture/useAgentCursor.ts
|
|
14
14
|
import { useEffect, useState } from "react";
|
|
@@ -68,7 +68,17 @@ var PAGE_ACTIONS_TOPIC = "skippr.page-actions";
|
|
|
68
68
|
var TEXT_MODE_TOPIC = "skippr.text-mode";
|
|
69
69
|
var ACTION_CONTROL_TOPIC = "skippr.action-control";
|
|
70
70
|
var SESSION_HOLD_TOPIC = "skippr.session-hold";
|
|
71
|
-
var
|
|
71
|
+
var MIC_MODE_TURN_TOPIC = "skippr.mic-mode-turn";
|
|
72
|
+
var MIC_MODE = {
|
|
73
|
+
Live: "live",
|
|
74
|
+
PushToTalk: "pushToTalk",
|
|
75
|
+
TapToTalk: "tapToTalk"
|
|
76
|
+
};
|
|
77
|
+
var DEFAULT_MIC_MODE = MIC_MODE.Live;
|
|
78
|
+
function isRequestResponseMicMode(micMode) {
|
|
79
|
+
return micMode === MIC_MODE.PushToTalk || micMode === MIC_MODE.TapToTalk;
|
|
80
|
+
}
|
|
81
|
+
var PUSH_TO_TALK_KEY = "Backquote";
|
|
72
82
|
var IDLE_AUTO_PAUSE_MS = 3 * 60 * 1000;
|
|
73
83
|
var PLAN_ATTR = "skippr.action-plan";
|
|
74
84
|
var NAME_MAX_CHARS = 80;
|
|
@@ -196,81 +206,95 @@ function useSessionHoldContext() {
|
|
|
196
206
|
return useContext2(SessionHoldContext);
|
|
197
207
|
}
|
|
198
208
|
|
|
199
|
-
// src/context/
|
|
209
|
+
// src/context/TranscriptionsContext.tsx
|
|
210
|
+
import { useTranscriptions } from "@livekit/components-react/hooks";
|
|
200
211
|
import { createContext as createContext3, useContext as useContext3 } from "react";
|
|
212
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
213
|
+
var TranscriptionsContext = createContext3([]);
|
|
214
|
+
function TranscriptionsProvider({ children }) {
|
|
215
|
+
const transcriptions = useTranscriptions();
|
|
216
|
+
return /* @__PURE__ */ jsx2(TranscriptionsContext.Provider, {
|
|
217
|
+
value: transcriptions,
|
|
218
|
+
children
|
|
219
|
+
});
|
|
220
|
+
}
|
|
221
|
+
function useSharedTranscriptions() {
|
|
222
|
+
return useContext3(TranscriptionsContext);
|
|
223
|
+
}
|
|
201
224
|
|
|
202
|
-
// src/
|
|
225
|
+
// src/context/VoiceTurnContext.tsx
|
|
226
|
+
import { createContext as createContext4, useContext as useContext4 } from "react";
|
|
227
|
+
|
|
228
|
+
// src/hooks/useVoiceTurn.ts
|
|
203
229
|
import { useLocalParticipant as useLocalParticipant2 } from "@livekit/components-react/hooks";
|
|
204
|
-
import { useCallback as useCallback2, useState as useState3 } from "react";
|
|
230
|
+
import { useCallback as useCallback2, useRef, useState as useState3 } from "react";
|
|
205
231
|
var textEncoder2 = new TextEncoder;
|
|
206
|
-
function
|
|
232
|
+
function useVoiceTurn() {
|
|
207
233
|
const { localParticipant } = useLocalParticipant2();
|
|
208
234
|
const [isCapturingSpeech, setIsCapturingSpeech] = useState3(false);
|
|
235
|
+
const capturingRef = useRef(false);
|
|
209
236
|
const publish = useCallback2(async (type) => {
|
|
210
237
|
await localParticipant.publishData(textEncoder2.encode(JSON.stringify({ type })), {
|
|
211
238
|
reliable: true,
|
|
212
|
-
topic:
|
|
239
|
+
topic: MIC_MODE_TURN_TOPIC
|
|
213
240
|
});
|
|
214
241
|
}, [localParticipant]);
|
|
215
242
|
const startRecording = useCallback2(async () => {
|
|
216
243
|
try {
|
|
217
244
|
await localParticipant.setMicrophoneEnabled(true);
|
|
218
245
|
await publish("start");
|
|
219
|
-
setIsCapturingSpeech(true);
|
|
220
246
|
} catch (error) {
|
|
221
|
-
console.error("Failed to start
|
|
247
|
+
console.error("Failed to start voice turn:", error);
|
|
222
248
|
}
|
|
223
249
|
}, [localParticipant, publish]);
|
|
224
250
|
const commitRecording = useCallback2(async () => {
|
|
225
251
|
try {
|
|
226
252
|
await localParticipant.setMicrophoneEnabled(false);
|
|
227
253
|
await publish("commit");
|
|
228
|
-
setIsCapturingSpeech(false);
|
|
229
254
|
} catch (error) {
|
|
230
|
-
console.error("Failed to commit
|
|
255
|
+
console.error("Failed to commit voice turn:", error);
|
|
231
256
|
}
|
|
232
257
|
}, [localParticipant, publish]);
|
|
258
|
+
const start = useCallback2(() => {
|
|
259
|
+
if (capturingRef.current)
|
|
260
|
+
return;
|
|
261
|
+
capturingRef.current = true;
|
|
262
|
+
setIsCapturingSpeech(true);
|
|
263
|
+
startRecording();
|
|
264
|
+
}, [startRecording]);
|
|
265
|
+
const commit = useCallback2(() => {
|
|
266
|
+
if (!capturingRef.current)
|
|
267
|
+
return;
|
|
268
|
+
capturingRef.current = false;
|
|
269
|
+
setIsCapturingSpeech(false);
|
|
270
|
+
commitRecording();
|
|
271
|
+
}, [commitRecording]);
|
|
233
272
|
const toggle = useCallback2(() => {
|
|
234
|
-
if (
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
return { isCapturingSpeech, toggle };
|
|
273
|
+
if (capturingRef.current)
|
|
274
|
+
commit();
|
|
275
|
+
else
|
|
276
|
+
start();
|
|
277
|
+
}, [start, commit]);
|
|
278
|
+
return { isCapturingSpeech, toggle, start, commit };
|
|
241
279
|
}
|
|
242
280
|
|
|
243
|
-
// src/context/
|
|
244
|
-
import { jsx as
|
|
245
|
-
var
|
|
281
|
+
// src/context/VoiceTurnContext.tsx
|
|
282
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
283
|
+
var VoiceTurnContext = createContext4({
|
|
246
284
|
isCapturingSpeech: false,
|
|
247
|
-
toggle: () => {}
|
|
285
|
+
toggle: () => {},
|
|
286
|
+
start: () => {},
|
|
287
|
+
commit: () => {}
|
|
248
288
|
});
|
|
249
|
-
function
|
|
250
|
-
const
|
|
251
|
-
return /* @__PURE__ */
|
|
252
|
-
value:
|
|
289
|
+
function VoiceTurnProvider({ children }) {
|
|
290
|
+
const voiceTurn = useVoiceTurn();
|
|
291
|
+
return /* @__PURE__ */ jsx3(VoiceTurnContext.Provider, {
|
|
292
|
+
value: voiceTurn,
|
|
253
293
|
children
|
|
254
294
|
});
|
|
255
295
|
}
|
|
256
|
-
function
|
|
257
|
-
return
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
// src/context/TranscriptionsContext.tsx
|
|
261
|
-
import { useTranscriptions } from "@livekit/components-react/hooks";
|
|
262
|
-
import { createContext as createContext4, useContext as useContext4 } from "react";
|
|
263
|
-
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
264
|
-
var TranscriptionsContext = createContext4([]);
|
|
265
|
-
function TranscriptionsProvider({ children }) {
|
|
266
|
-
const transcriptions = useTranscriptions();
|
|
267
|
-
return /* @__PURE__ */ jsx3(TranscriptionsContext.Provider, {
|
|
268
|
-
value: transcriptions,
|
|
269
|
-
children
|
|
270
|
-
});
|
|
271
|
-
}
|
|
272
|
-
function useSharedTranscriptions() {
|
|
273
|
-
return useContext4(TranscriptionsContext);
|
|
296
|
+
function useVoiceTurnContext() {
|
|
297
|
+
return useContext4(VoiceTurnContext);
|
|
274
298
|
}
|
|
275
299
|
|
|
276
300
|
// src/hooks/useAdoptionGoals.ts
|
|
@@ -561,7 +585,7 @@ function useAuth({ appKey }) {
|
|
|
561
585
|
}
|
|
562
586
|
|
|
563
587
|
// src/hooks/useAutoStart.ts
|
|
564
|
-
import { useEffect as useEffect5, useMemo as useMemo2, useRef } from "react";
|
|
588
|
+
import { useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2 } from "react";
|
|
565
589
|
|
|
566
590
|
// src/lib/agentMode.ts
|
|
567
591
|
var AGENT_MODE = {
|
|
@@ -641,7 +665,7 @@ function useAutoStart({
|
|
|
641
665
|
bearerToken,
|
|
642
666
|
selectModule
|
|
643
667
|
}) {
|
|
644
|
-
const hasAutoStartedRef =
|
|
668
|
+
const hasAutoStartedRef = useRef2(false);
|
|
645
669
|
const autoStartModule = useMemo2(() => availableModules.find((m) => {
|
|
646
670
|
if (!m.uiPreferences?.autoStart)
|
|
647
671
|
return false;
|
|
@@ -790,7 +814,7 @@ function usePlanUpdates() {
|
|
|
790
814
|
}
|
|
791
815
|
|
|
792
816
|
// src/hooks/useSession.ts
|
|
793
|
-
import { useCallback as useCallback7, useEffect as useEffect8, useRef as
|
|
817
|
+
import { useCallback as useCallback7, useEffect as useEffect8, useRef as useRef3, useState as useState8 } from "react";
|
|
794
818
|
var API_URL4 = "https://specialist.skippr.ai/api";
|
|
795
819
|
async function fetchSessionMessages(sessionId, authedFetch) {
|
|
796
820
|
try {
|
|
@@ -856,11 +880,11 @@ function useSession({
|
|
|
856
880
|
const [pauseTimeoutSeconds, setPauseTimeoutSeconds] = useState8(null);
|
|
857
881
|
const [historyMessages, setHistoryMessages] = useState8([]);
|
|
858
882
|
const [authFailed, setAuthFailed] = useState8(false);
|
|
859
|
-
const tokenRef =
|
|
860
|
-
const getUserTokenRef =
|
|
883
|
+
const tokenRef = useRef3(authToken ? { token: authToken, expiresAt: null } : null);
|
|
884
|
+
const getUserTokenRef = useRef3(getUserToken);
|
|
861
885
|
getUserTokenRef.current = getUserToken ?? (userToken ? () => Promise.resolve(userToken) : undefined);
|
|
862
|
-
const failedBearerRef =
|
|
863
|
-
const inFlightExchangeRef =
|
|
886
|
+
const failedBearerRef = useRef3(null);
|
|
887
|
+
const inFlightExchangeRef = useRef3(null);
|
|
864
888
|
const canExchange = useCallback7(() => !!appKey && !!getUserTokenRef.current, [appKey]);
|
|
865
889
|
const reExchange = useCallback7(async () => {
|
|
866
890
|
if (inFlightExchangeRef.current)
|
|
@@ -955,8 +979,8 @@ function useSession({
|
|
|
955
979
|
stale = true;
|
|
956
980
|
};
|
|
957
981
|
}, [authToken, canExchange, reExchange]);
|
|
958
|
-
const isStartingRef =
|
|
959
|
-
const pauseOnUnloadRef =
|
|
982
|
+
const isStartingRef = useRef3(false);
|
|
983
|
+
const pauseOnUnloadRef = useRef3(null);
|
|
960
984
|
pauseOnUnloadRef.current = connection !== null && !isPaused && sessionId && bearerToken ? { sessionId, bearerToken } : null;
|
|
961
985
|
useEffect8(() => {
|
|
962
986
|
const onPageHide = () => {
|
|
@@ -1004,8 +1028,9 @@ function useSession({
|
|
|
1004
1028
|
enabledControls.highlight = true;
|
|
1005
1029
|
if (agentControls?.actions === true)
|
|
1006
1030
|
enabledControls.actions = true;
|
|
1007
|
-
|
|
1008
|
-
|
|
1031
|
+
const micMode = agentControls?.micMode;
|
|
1032
|
+
if (isRequestResponseMicMode(micMode))
|
|
1033
|
+
enabledControls.micMode = micMode;
|
|
1009
1034
|
const requestAgentControls = Object.keys(enabledControls).length > 0 ? enabledControls : undefined;
|
|
1010
1035
|
try {
|
|
1011
1036
|
let resolvedSessionId = existingSessionId;
|
|
@@ -1465,8 +1490,17 @@ var __iconNode20 = [
|
|
|
1465
1490
|
]
|
|
1466
1491
|
];
|
|
1467
1492
|
var Play = createLucideIcon("play", __iconNode20);
|
|
1468
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/
|
|
1493
|
+
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/radio.js
|
|
1469
1494
|
var __iconNode21 = [
|
|
1495
|
+
["path", { d: "M16.247 7.761a6 6 0 0 1 0 8.478", key: "1fwjs5" }],
|
|
1496
|
+
["path", { d: "M19.075 4.933a10 10 0 0 1 0 14.134", key: "ehdyv1" }],
|
|
1497
|
+
["path", { d: "M4.925 19.067a10 10 0 0 1 0-14.134", key: "1q22gi" }],
|
|
1498
|
+
["path", { d: "M7.753 16.239a6 6 0 0 1 0-8.478", key: "r2q7qm" }],
|
|
1499
|
+
["circle", { cx: "12", cy: "12", r: "2", key: "1c9p78" }]
|
|
1500
|
+
];
|
|
1501
|
+
var Radio = createLucideIcon("radio", __iconNode21);
|
|
1502
|
+
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/send.js
|
|
1503
|
+
var __iconNode22 = [
|
|
1470
1504
|
[
|
|
1471
1505
|
"path",
|
|
1472
1506
|
{
|
|
@@ -1476,20 +1510,20 @@ var __iconNode21 = [
|
|
|
1476
1510
|
],
|
|
1477
1511
|
["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
|
|
1478
1512
|
];
|
|
1479
|
-
var Send = createLucideIcon("send",
|
|
1513
|
+
var Send = createLucideIcon("send", __iconNode22);
|
|
1480
1514
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/square.js
|
|
1481
|
-
var
|
|
1515
|
+
var __iconNode23 = [
|
|
1482
1516
|
["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }]
|
|
1483
1517
|
];
|
|
1484
|
-
var Square = createLucideIcon("square",
|
|
1518
|
+
var Square = createLucideIcon("square", __iconNode23);
|
|
1485
1519
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/x.js
|
|
1486
|
-
var
|
|
1520
|
+
var __iconNode24 = [
|
|
1487
1521
|
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
|
|
1488
1522
|
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
|
|
1489
1523
|
];
|
|
1490
|
-
var X = createLucideIcon("x",
|
|
1524
|
+
var X = createLucideIcon("x", __iconNode24);
|
|
1491
1525
|
// src/components/AgentCursor.tsx
|
|
1492
|
-
import { useContext as useContext6, useEffect as useEffect10, useLayoutEffect, useRef as
|
|
1526
|
+
import { useContext as useContext6, useEffect as useEffect10, useLayoutEffect, useRef as useRef4, useState as useState10 } from "react";
|
|
1493
1527
|
|
|
1494
1528
|
// src/capture/elementRef.ts
|
|
1495
1529
|
function safeGetIframeDocument(iframe) {
|
|
@@ -1677,13 +1711,13 @@ function AgentCursor({
|
|
|
1677
1711
|
const [phase, setPhase] = useState10("idle");
|
|
1678
1712
|
const [ringBox, setRingBox] = useState10(null);
|
|
1679
1713
|
const [clickPulse, setClickPulse] = useState10(0);
|
|
1680
|
-
const cursorElRef =
|
|
1681
|
-
const pathRef =
|
|
1682
|
-
const prevCursorRef =
|
|
1683
|
-
const traceRef =
|
|
1684
|
-
const timersRef =
|
|
1685
|
-
const trackFrameRef =
|
|
1686
|
-
const glideFrameRef =
|
|
1714
|
+
const cursorElRef = useRef4(null);
|
|
1715
|
+
const pathRef = useRef4(null);
|
|
1716
|
+
const prevCursorRef = useRef4(null);
|
|
1717
|
+
const traceRef = useRef4(null);
|
|
1718
|
+
const timersRef = useRef4(new Set);
|
|
1719
|
+
const trackFrameRef = useRef4(null);
|
|
1720
|
+
const glideFrameRef = useRef4(null);
|
|
1687
1721
|
const clearTimers = () => {
|
|
1688
1722
|
for (const t of timersRef.current)
|
|
1689
1723
|
clearTimeout(t);
|
|
@@ -1924,18 +1958,21 @@ function AgentCursor({
|
|
|
1924
1958
|
// src/components/AutoStartMedia.tsx
|
|
1925
1959
|
import { useConnectionState, useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react/hooks";
|
|
1926
1960
|
import { ConnectionState, Track } from "livekit-client";
|
|
1927
|
-
import { useEffect as useEffect11, useRef as
|
|
1928
|
-
function AutoStartMedia({
|
|
1961
|
+
import { useEffect as useEffect11, useRef as useRef5 } from "react";
|
|
1962
|
+
function AutoStartMedia({
|
|
1963
|
+
pendingScreenStream,
|
|
1964
|
+
pushOrTapMicMode = false
|
|
1965
|
+
}) {
|
|
1929
1966
|
const { localParticipant } = useLocalParticipant3();
|
|
1930
1967
|
const connectionState = useConnectionState();
|
|
1931
|
-
const didStartRef =
|
|
1968
|
+
const didStartRef = useRef5(false);
|
|
1932
1969
|
useEffect11(() => {
|
|
1933
1970
|
if (didStartRef.current)
|
|
1934
1971
|
return;
|
|
1935
1972
|
if (connectionState !== ConnectionState.Connected)
|
|
1936
1973
|
return;
|
|
1937
1974
|
didStartRef.current = true;
|
|
1938
|
-
if (!
|
|
1975
|
+
if (!pushOrTapMicMode) {
|
|
1939
1976
|
localParticipant.setMicrophoneEnabled(true).catch((error) => console.error("Failed to enable microphone:", error));
|
|
1940
1977
|
}
|
|
1941
1978
|
if (pendingScreenStream) {
|
|
@@ -1949,14 +1986,14 @@ function AutoStartMedia({ pendingScreenStream, tapToTalk = false }) {
|
|
|
1949
1986
|
});
|
|
1950
1987
|
}
|
|
1951
1988
|
}
|
|
1952
|
-
}, [connectionState, localParticipant, pendingScreenStream,
|
|
1989
|
+
}, [connectionState, localParticipant, pendingScreenStream, pushOrTapMicMode]);
|
|
1953
1990
|
return null;
|
|
1954
1991
|
}
|
|
1955
1992
|
|
|
1956
1993
|
// src/components/DomCapture.tsx
|
|
1957
1994
|
import { useConnectionState as useConnectionState2, useLocalParticipant as useLocalParticipant4 } from "@livekit/components-react/hooks";
|
|
1958
1995
|
import { ConnectionState as ConnectionState2, ScreenSharePresets, Track as Track2 } from "livekit-client";
|
|
1959
|
-
import { useEffect as useEffect12, useRef as
|
|
1996
|
+
import { useEffect as useEffect12, useRef as useRef6 } from "react";
|
|
1960
1997
|
|
|
1961
1998
|
// src/capture/a11yUtils.ts
|
|
1962
1999
|
var ROLE_BY_TAG = {
|
|
@@ -2532,22 +2569,15 @@ function onSnapshotRequest(handler) {
|
|
|
2532
2569
|
function requestSnapshotAfterAction() {
|
|
2533
2570
|
snapshotRequestHandler?.();
|
|
2534
2571
|
}
|
|
2535
|
-
var
|
|
2536
|
-
|
|
2537
|
-
|
|
2538
|
-
|
|
2539
|
-
return;
|
|
2540
|
-
actionsPaused = paused;
|
|
2541
|
-
for (const cb of pausedSubscribers)
|
|
2542
|
-
cb(paused);
|
|
2543
|
-
}
|
|
2544
|
-
function isActionsPaused() {
|
|
2545
|
-
return actionsPaused;
|
|
2572
|
+
var stopSubscribers = new Set;
|
|
2573
|
+
function stopActions() {
|
|
2574
|
+
for (const subscriber of stopSubscribers)
|
|
2575
|
+
subscriber();
|
|
2546
2576
|
}
|
|
2547
|
-
function
|
|
2548
|
-
|
|
2577
|
+
function onActionsStopped(subscriber) {
|
|
2578
|
+
stopSubscribers.add(subscriber);
|
|
2549
2579
|
return () => {
|
|
2550
|
-
|
|
2580
|
+
stopSubscribers.delete(subscriber);
|
|
2551
2581
|
};
|
|
2552
2582
|
}
|
|
2553
2583
|
var actionsBusy = false;
|
|
@@ -2556,16 +2586,16 @@ function setActionsBusy(busy) {
|
|
|
2556
2586
|
if (actionsBusy === busy)
|
|
2557
2587
|
return;
|
|
2558
2588
|
actionsBusy = busy;
|
|
2559
|
-
for (const
|
|
2560
|
-
|
|
2589
|
+
for (const subscriber of busySubscribers)
|
|
2590
|
+
subscriber(busy);
|
|
2561
2591
|
}
|
|
2562
2592
|
function isActionsBusy() {
|
|
2563
2593
|
return actionsBusy;
|
|
2564
2594
|
}
|
|
2565
|
-
function subscribeActionsBusy(
|
|
2566
|
-
busySubscribers.add(
|
|
2595
|
+
function subscribeActionsBusy(subscriber) {
|
|
2596
|
+
busySubscribers.add(subscriber);
|
|
2567
2597
|
return () => {
|
|
2568
|
-
busySubscribers.delete(
|
|
2598
|
+
busySubscribers.delete(subscriber);
|
|
2569
2599
|
};
|
|
2570
2600
|
}
|
|
2571
2601
|
|
|
@@ -2861,10 +2891,10 @@ async function unpublishAndStopTrack(localParticipant, videoTrack) {
|
|
|
2861
2891
|
} catch {}
|
|
2862
2892
|
videoTrack.stop();
|
|
2863
2893
|
}
|
|
2864
|
-
function DomCapture({
|
|
2894
|
+
function DomCapture({ pushOrTapMicMode = false }) {
|
|
2865
2895
|
const { localParticipant } = useLocalParticipant4();
|
|
2866
2896
|
const connectionState = useConnectionState2();
|
|
2867
|
-
const didStartRef =
|
|
2897
|
+
const didStartRef = useRef6(false);
|
|
2868
2898
|
useEffect12(() => {
|
|
2869
2899
|
if (didStartRef.current)
|
|
2870
2900
|
return;
|
|
@@ -2886,7 +2916,7 @@ function DomCapture({ tapToTalk = false }) {
|
|
|
2886
2916
|
let snapshotInFlight = false;
|
|
2887
2917
|
let a11yPublishInFlight = false;
|
|
2888
2918
|
let consecutiveCaptureFailures = 0;
|
|
2889
|
-
if (!
|
|
2919
|
+
if (!pushOrTapMicMode) {
|
|
2890
2920
|
localParticipant.setMicrophoneEnabled(true).catch((error) => console.error("Failed to enable microphone:", error));
|
|
2891
2921
|
}
|
|
2892
2922
|
localParticipant.publishTrack(videoTrack, {
|
|
@@ -2971,13 +3001,13 @@ function DomCapture({ tapToTalk = false }) {
|
|
|
2971
3001
|
for (const track of canvasStream.getTracks())
|
|
2972
3002
|
track.stop();
|
|
2973
3003
|
};
|
|
2974
|
-
}, [connectionState, localParticipant,
|
|
3004
|
+
}, [connectionState, localParticipant, pushOrTapMicMode]);
|
|
2975
3005
|
return null;
|
|
2976
3006
|
}
|
|
2977
3007
|
|
|
2978
3008
|
// src/components/HighlightOverlay.tsx
|
|
2979
3009
|
import { useDataChannel } from "@livekit/components-react/hooks";
|
|
2980
|
-
import { useCallback as useCallback8, useEffect as useEffect13, useRef as
|
|
3010
|
+
import { useCallback as useCallback8, useEffect as useEffect13, useRef as useRef7 } from "react";
|
|
2981
3011
|
var HIGHLIGHT_AUTO_CLEAR_MS = 25000;
|
|
2982
3012
|
var textDecoder = new TextDecoder;
|
|
2983
3013
|
function parseHighlightMessage(payload) {
|
|
@@ -3000,8 +3030,8 @@ function parseHighlightMessage(payload) {
|
|
|
3000
3030
|
}
|
|
3001
3031
|
}
|
|
3002
3032
|
function HighlightOverlay() {
|
|
3003
|
-
const targetRef =
|
|
3004
|
-
const autoClearRef =
|
|
3033
|
+
const targetRef = useRef7(null);
|
|
3034
|
+
const autoClearRef = useRef7(null);
|
|
3005
3035
|
const clear = useCallback8(() => {
|
|
3006
3036
|
if (autoClearRef.current)
|
|
3007
3037
|
clearTimeout(autoClearRef.current);
|
|
@@ -3048,19 +3078,19 @@ function HighlightOverlay() {
|
|
|
3048
3078
|
}
|
|
3049
3079
|
|
|
3050
3080
|
// src/components/MinimizedBubble.tsx
|
|
3051
|
-
import { useContext as useContext7, useEffect as useEffect15, useRef as
|
|
3081
|
+
import { useContext as useContext7, useEffect as useEffect15, useRef as useRef9, useState as useState11 } from "react";
|
|
3052
3082
|
|
|
3053
3083
|
// src/hooks/useLauncherDrag.ts
|
|
3054
|
-
import { useEffect as useEffect14, useRef as
|
|
3084
|
+
import { useEffect as useEffect14, useRef as useRef8 } from "react";
|
|
3055
3085
|
import { flushSync } from "react-dom";
|
|
3056
3086
|
var DRAG_THRESHOLD_PX = 5;
|
|
3057
3087
|
function useLauncherDrag(containerRef, onDrop, followRefs, reportDragging) {
|
|
3058
|
-
const wasDraggedRef =
|
|
3059
|
-
const onDropRef =
|
|
3088
|
+
const wasDraggedRef = useRef8(false);
|
|
3089
|
+
const onDropRef = useRef8(onDrop);
|
|
3060
3090
|
onDropRef.current = onDrop;
|
|
3061
|
-
const followTargetsRef =
|
|
3091
|
+
const followTargetsRef = useRef8(followRefs);
|
|
3062
3092
|
followTargetsRef.current = followRefs;
|
|
3063
|
-
const reportDraggingRef =
|
|
3093
|
+
const reportDraggingRef = useRef8(reportDragging);
|
|
3064
3094
|
reportDraggingRef.current = reportDragging;
|
|
3065
3095
|
useEffect14(() => {
|
|
3066
3096
|
const el = containerRef.current;
|
|
@@ -3442,8 +3472,8 @@ function MinimizedBubble({
|
|
|
3442
3472
|
const [goalsAutoHidden, setGoalsAutoHidden] = useState11(false);
|
|
3443
3473
|
const [isLauncherHovered, setIsLauncherHovered] = useState11(false);
|
|
3444
3474
|
const [visitHref, setVisitHref] = useState11(() => window.location.href);
|
|
3445
|
-
const revealedHrefRef =
|
|
3446
|
-
const hoverContainerRef =
|
|
3475
|
+
const revealedHrefRef = useRef9(null);
|
|
3476
|
+
const hoverContainerRef = useRef9(null);
|
|
3447
3477
|
useEffect15(() => subscribeToLocationChange(() => setVisitHref(window.location.href)), []);
|
|
3448
3478
|
useEffect15(() => {
|
|
3449
3479
|
const el = hoverContainerRef.current;
|
|
@@ -3557,9 +3587,10 @@ function MinimizedBubble({
|
|
|
3557
3587
|
|
|
3558
3588
|
// src/components/PageActionHandler.tsx
|
|
3559
3589
|
import { useDataChannel as useDataChannel2 } from "@livekit/components-react/hooks";
|
|
3560
|
-
import { useCallback as useCallback9, useEffect as useEffect16, useRef as
|
|
3590
|
+
import { useCallback as useCallback9, useEffect as useEffect16, useRef as useRef10 } from "react";
|
|
3561
3591
|
var STEP_MAX_WAIT_MS = 5000;
|
|
3562
3592
|
var POST_ACTION_SETTLE_SNAPSHOT_MS = 300;
|
|
3593
|
+
var TRAILING_ACTION_FLUSH_AFTER_STOP_MS = 1000;
|
|
3563
3594
|
var textDecoder2 = new TextDecoder;
|
|
3564
3595
|
function parseScrollDirection(value) {
|
|
3565
3596
|
return value === "down" || value === "up" || value === "top" || value === "bottom" ? value : null;
|
|
@@ -3774,11 +3805,13 @@ function labelFor(action) {
|
|
|
3774
3805
|
}
|
|
3775
3806
|
}
|
|
3776
3807
|
function PageActionHandler() {
|
|
3777
|
-
const mountedRef =
|
|
3778
|
-
const queueRef =
|
|
3779
|
-
const drainingRef =
|
|
3780
|
-
const settleTimerRef =
|
|
3781
|
-
const endStepRef =
|
|
3808
|
+
const mountedRef = useRef10(true);
|
|
3809
|
+
const queueRef = useRef10([]);
|
|
3810
|
+
const drainingRef = useRef10(false);
|
|
3811
|
+
const settleTimerRef = useRef10(null);
|
|
3812
|
+
const endStepRef = useRef10(null);
|
|
3813
|
+
const actionsStoppedRef = useRef10(false);
|
|
3814
|
+
const ignoreActionsArrivingBeforeRef = useRef10(0);
|
|
3782
3815
|
const runStep = useCallback9((action) => {
|
|
3783
3816
|
return new Promise((resolve) => {
|
|
3784
3817
|
if (action.type === "scroll_page") {
|
|
@@ -3832,7 +3865,7 @@ function PageActionHandler() {
|
|
|
3832
3865
|
onAct: () => {
|
|
3833
3866
|
clearTimeout(fallback);
|
|
3834
3867
|
const resolved = action.type === "click" ? resolveClickTarget(element) : element;
|
|
3835
|
-
if (mountedRef.current && !
|
|
3868
|
+
if (mountedRef.current && !actionsStoppedRef.current && element.isConnected && !isActionBlocked(element) && !isActionBlocked(resolved)) {
|
|
3836
3869
|
acted = true;
|
|
3837
3870
|
runAgentAction(() => performAction(action, element));
|
|
3838
3871
|
requestSnapshotAfterAction();
|
|
@@ -3852,30 +3885,20 @@ function PageActionHandler() {
|
|
|
3852
3885
|
if (drainingRef.current)
|
|
3853
3886
|
return;
|
|
3854
3887
|
drainingRef.current = true;
|
|
3888
|
+
actionsStoppedRef.current = false;
|
|
3855
3889
|
setActionsBusy(true);
|
|
3856
|
-
let pausedMidQueue = false;
|
|
3857
3890
|
try {
|
|
3858
3891
|
while (mountedRef.current && queueRef.current.length > 0) {
|
|
3859
|
-
|
|
3860
|
-
pausedMidQueue = true;
|
|
3861
|
-
break;
|
|
3862
|
-
}
|
|
3863
|
-
const action = queueRef.current[0];
|
|
3892
|
+
const action = queueRef.current.shift();
|
|
3864
3893
|
if (!action)
|
|
3865
3894
|
break;
|
|
3866
|
-
|
|
3867
|
-
if (isActionsPaused() && !acted) {
|
|
3868
|
-
pausedMidQueue = true;
|
|
3869
|
-
break;
|
|
3870
|
-
}
|
|
3871
|
-
queueRef.current.shift();
|
|
3895
|
+
await runStep(action);
|
|
3872
3896
|
}
|
|
3873
3897
|
} finally {
|
|
3874
3898
|
drainingRef.current = false;
|
|
3875
3899
|
if (mountedRef.current) {
|
|
3876
3900
|
clearCursorTarget("act");
|
|
3877
|
-
|
|
3878
|
-
setActionsBusy(false);
|
|
3901
|
+
setActionsBusy(false);
|
|
3879
3902
|
}
|
|
3880
3903
|
}
|
|
3881
3904
|
}, [runStep]);
|
|
@@ -3883,6 +3906,8 @@ function PageActionHandler() {
|
|
|
3883
3906
|
const action = parsePageAction(msg.payload);
|
|
3884
3907
|
if (!action)
|
|
3885
3908
|
return;
|
|
3909
|
+
if (Date.now() < ignoreActionsArrivingBeforeRef.current)
|
|
3910
|
+
return;
|
|
3886
3911
|
queueRef.current.push(action);
|
|
3887
3912
|
drain();
|
|
3888
3913
|
}, [drain]);
|
|
@@ -3899,22 +3924,24 @@ function PageActionHandler() {
|
|
|
3899
3924
|
};
|
|
3900
3925
|
}, []);
|
|
3901
3926
|
useEffect16(() => {
|
|
3902
|
-
return
|
|
3903
|
-
|
|
3904
|
-
|
|
3905
|
-
|
|
3906
|
-
|
|
3907
|
-
|
|
3908
|
-
|
|
3909
|
-
|
|
3927
|
+
return onActionsStopped(() => {
|
|
3928
|
+
actionsStoppedRef.current = true;
|
|
3929
|
+
ignoreActionsArrivingBeforeRef.current = Date.now() + TRAILING_ACTION_FLUSH_AFTER_STOP_MS;
|
|
3930
|
+
queueRef.current.length = 0;
|
|
3931
|
+
endStepRef.current?.();
|
|
3932
|
+
if (settleTimerRef.current)
|
|
3933
|
+
clearTimeout(settleTimerRef.current);
|
|
3934
|
+
clearCursorTarget("act");
|
|
3935
|
+
clearCursorTarget("guide");
|
|
3936
|
+
setActionsBusy(false);
|
|
3910
3937
|
});
|
|
3911
|
-
}, [
|
|
3938
|
+
}, []);
|
|
3912
3939
|
useDataChannel2(PAGE_ACTIONS_TOPIC, onMessage);
|
|
3913
3940
|
return null;
|
|
3914
3941
|
}
|
|
3915
3942
|
|
|
3916
3943
|
// src/components/SessionControlBar.tsx
|
|
3917
|
-
import { useContext as useContext8, useEffect as
|
|
3944
|
+
import { useCallback as useCallback13, useContext as useContext8, useEffect as useEffect21, useState as useState14 } from "react";
|
|
3918
3945
|
|
|
3919
3946
|
// src/hooks/useActionControl.ts
|
|
3920
3947
|
import { useLocalParticipant as useLocalParticipant5 } from "@livekit/components-react/hooks";
|
|
@@ -3924,20 +3951,20 @@ function useActionControl() {
|
|
|
3924
3951
|
const { localParticipant } = useLocalParticipant5();
|
|
3925
3952
|
const plan = usePlanUpdates();
|
|
3926
3953
|
const [busy, setBusy] = useState12(isActionsBusy);
|
|
3927
|
-
const [actionsPaused2, setPaused] = useState12(false);
|
|
3928
3954
|
useEffect17(() => subscribeActionsBusy(setBusy), []);
|
|
3929
3955
|
const actionsActive = busy || plan?.state === "executing";
|
|
3930
|
-
const
|
|
3931
|
-
|
|
3932
|
-
setPaused(next);
|
|
3933
|
-
setActionsPaused(next);
|
|
3956
|
+
const requestStop = useCallback10(async () => {
|
|
3957
|
+
stopActions();
|
|
3934
3958
|
try {
|
|
3935
|
-
await localParticipant.publishData(textEncoder5.encode(JSON.stringify({ type:
|
|
3959
|
+
await localParticipant.publishData(textEncoder5.encode(JSON.stringify({ type: "abort" })), {
|
|
3960
|
+
reliable: true,
|
|
3961
|
+
topic: ACTION_CONTROL_TOPIC
|
|
3962
|
+
});
|
|
3936
3963
|
} catch (error) {
|
|
3937
|
-
console.error("Failed to send action
|
|
3964
|
+
console.error("Failed to send action abort:", error);
|
|
3938
3965
|
}
|
|
3939
|
-
}, [
|
|
3940
|
-
return { actionsActive,
|
|
3966
|
+
}, [localParticipant]);
|
|
3967
|
+
return { actionsActive, stopActions: requestStop };
|
|
3941
3968
|
}
|
|
3942
3969
|
|
|
3943
3970
|
// src/hooks/useAgentVoiceState.ts
|
|
@@ -3953,11 +3980,11 @@ function useAgentVoiceState() {
|
|
|
3953
3980
|
}
|
|
3954
3981
|
|
|
3955
3982
|
// src/hooks/useAudioLevelBars.ts
|
|
3956
|
-
import { useEffect as useEffect18, useRef as
|
|
3983
|
+
import { useEffect as useEffect18, useRef as useRef11, useState as useState13 } from "react";
|
|
3957
3984
|
var TALKING_LEVEL_THRESHOLD = 0.2;
|
|
3958
3985
|
var TALKING_HOLD_MS = 400;
|
|
3959
3986
|
function useAudioLevelBars(mediaStreamTrack, { barCount, idleHeightPx, maxGrowthPx, noiseGate }) {
|
|
3960
|
-
const barRefs =
|
|
3987
|
+
const barRefs = useRef11([]);
|
|
3961
3988
|
const [isTalking, setIsTalking] = useState13(false);
|
|
3962
3989
|
useEffect18(() => {
|
|
3963
3990
|
if (!mediaStreamTrack) {
|
|
@@ -4010,15 +4037,15 @@ function useAudioLevelBars(mediaStreamTrack, { barCount, idleHeightPx, maxGrowth
|
|
|
4010
4037
|
}
|
|
4011
4038
|
|
|
4012
4039
|
// src/hooks/useIdleAutoPause.ts
|
|
4013
|
-
import { useCallback as useCallback11, useEffect as useEffect19, useRef as
|
|
4040
|
+
import { useCallback as useCallback11, useEffect as useEffect19, useRef as useRef12 } from "react";
|
|
4014
4041
|
function useIdleAutoPause({
|
|
4015
4042
|
enabled,
|
|
4016
4043
|
active,
|
|
4017
4044
|
isHeld,
|
|
4018
4045
|
pause
|
|
4019
4046
|
}) {
|
|
4020
|
-
const timerRef =
|
|
4021
|
-
const pauseRef =
|
|
4047
|
+
const timerRef = useRef12(null);
|
|
4048
|
+
const pauseRef = useRef12(pause);
|
|
4022
4049
|
pauseRef.current = pause;
|
|
4023
4050
|
const clearTimer = useCallback11(() => {
|
|
4024
4051
|
if (timerRef.current) {
|
|
@@ -4045,15 +4072,79 @@ function useIdleAutoPause({
|
|
|
4045
4072
|
return { reportActivity };
|
|
4046
4073
|
}
|
|
4047
4074
|
|
|
4075
|
+
// src/hooks/useKeyboardPushToTalk.ts
|
|
4076
|
+
import { useEffect as useEffect20, useRef as useRef13 } from "react";
|
|
4077
|
+
function isEditableTarget() {
|
|
4078
|
+
const el = document.activeElement;
|
|
4079
|
+
if (!el)
|
|
4080
|
+
return false;
|
|
4081
|
+
const tag = el.tagName;
|
|
4082
|
+
return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || el.isContentEditable;
|
|
4083
|
+
}
|
|
4084
|
+
function useKeyboardPushToTalk({
|
|
4085
|
+
enabled,
|
|
4086
|
+
onStart,
|
|
4087
|
+
onCommit,
|
|
4088
|
+
onKeyUsed
|
|
4089
|
+
}) {
|
|
4090
|
+
const handlers = useRef13({ onStart, onCommit, onKeyUsed });
|
|
4091
|
+
handlers.current = { onStart, onCommit, onKeyUsed };
|
|
4092
|
+
useEffect20(() => {
|
|
4093
|
+
if (!enabled)
|
|
4094
|
+
return;
|
|
4095
|
+
let keyHeld = false;
|
|
4096
|
+
const release = () => {
|
|
4097
|
+
if (!keyHeld)
|
|
4098
|
+
return;
|
|
4099
|
+
keyHeld = false;
|
|
4100
|
+
handlers.current.onCommit();
|
|
4101
|
+
};
|
|
4102
|
+
const onKeyDown = (event) => {
|
|
4103
|
+
if (event.code !== PUSH_TO_TALK_KEY || event.repeat)
|
|
4104
|
+
return;
|
|
4105
|
+
if (isEditableTarget())
|
|
4106
|
+
return;
|
|
4107
|
+
event.preventDefault();
|
|
4108
|
+
if (keyHeld)
|
|
4109
|
+
return;
|
|
4110
|
+
keyHeld = true;
|
|
4111
|
+
handlers.current.onKeyUsed?.();
|
|
4112
|
+
handlers.current.onStart();
|
|
4113
|
+
};
|
|
4114
|
+
const onKeyUp = (event) => {
|
|
4115
|
+
if (event.code !== PUSH_TO_TALK_KEY)
|
|
4116
|
+
return;
|
|
4117
|
+
event.preventDefault();
|
|
4118
|
+
release();
|
|
4119
|
+
};
|
|
4120
|
+
const onWindowBlur = () => release();
|
|
4121
|
+
const onVisibilityChange = () => {
|
|
4122
|
+
if (document.hidden)
|
|
4123
|
+
release();
|
|
4124
|
+
};
|
|
4125
|
+
document.addEventListener("keydown", onKeyDown);
|
|
4126
|
+
document.addEventListener("keyup", onKeyUp);
|
|
4127
|
+
window.addEventListener("blur", onWindowBlur);
|
|
4128
|
+
document.addEventListener("visibilitychange", onVisibilityChange);
|
|
4129
|
+
return () => {
|
|
4130
|
+
release();
|
|
4131
|
+
document.removeEventListener("keydown", onKeyDown);
|
|
4132
|
+
document.removeEventListener("keyup", onKeyUp);
|
|
4133
|
+
window.removeEventListener("blur", onWindowBlur);
|
|
4134
|
+
document.removeEventListener("visibilitychange", onVisibilityChange);
|
|
4135
|
+
};
|
|
4136
|
+
}, [enabled]);
|
|
4137
|
+
}
|
|
4138
|
+
|
|
4048
4139
|
// src/hooks/useLiveUserTranscript.ts
|
|
4049
4140
|
import { useLocalParticipant as useLocalParticipant6 } from "@livekit/components-react/hooks";
|
|
4050
|
-
import { useRef as
|
|
4141
|
+
import { useRef as useRef14 } from "react";
|
|
4051
4142
|
function useLiveUserTranscript(active) {
|
|
4052
4143
|
const transcriptions = useSharedTranscriptions();
|
|
4053
4144
|
const { localParticipant } = useLocalParticipant6();
|
|
4054
4145
|
const localIdentity = localParticipant.identity;
|
|
4055
|
-
const priorStreamIdsRef =
|
|
4056
|
-
const wasActiveRef =
|
|
4146
|
+
const priorStreamIdsRef = useRef14(new Set);
|
|
4147
|
+
const wasActiveRef = useRef14(false);
|
|
4057
4148
|
const userStreams = transcriptions.filter((stream) => stream.participantInfo.identity === localIdentity);
|
|
4058
4149
|
if (active && !wasActiveRef.current) {
|
|
4059
4150
|
priorStreamIdsRef.current = new Set(userStreams.map((s) => s.streamInfo.id));
|
|
@@ -4134,13 +4225,119 @@ function PausedCountdown({ secondsRemaining }) {
|
|
|
4134
4225
|
});
|
|
4135
4226
|
}
|
|
4136
4227
|
|
|
4137
|
-
// src/components/
|
|
4228
|
+
// src/components/PushToTalkHint.tsx
|
|
4138
4229
|
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
4230
|
+
function PushToTalkHint() {
|
|
4231
|
+
return /* @__PURE__ */ jsxs6("div", {
|
|
4232
|
+
className: cn("skippr:absolute skippr:top-full skippr:left-2 skippr:mt-2 skippr:flex skippr:w-fit skippr:items-center skippr:gap-1.5 skippr:whitespace-nowrap skippr:rounded-full skippr:bg-[#f4ecd8] skippr:px-2.5 skippr:py-1 skippr:text-[10px] skippr:font-medium skippr:text-black skippr:shadow-[0_4px_14px_rgba(0,0,0,0.12)] skippr:[animation:skippr-agent-in_200ms_ease-out]"),
|
|
4233
|
+
children: [
|
|
4234
|
+
/* @__PURE__ */ jsx8("span", {
|
|
4235
|
+
children: "Hold the"
|
|
4236
|
+
}),
|
|
4237
|
+
/* @__PURE__ */ jsxs6("kbd", {
|
|
4238
|
+
className: "skippr:flex skippr:items-center skippr:gap-0.5 skippr:rounded skippr:border skippr:border-black/25 skippr:bg-white/70 skippr:px-1.5 skippr:py-0.5 skippr:font-mono skippr:text-[11px] skippr:leading-none skippr:text-black",
|
|
4239
|
+
children: [
|
|
4240
|
+
/* @__PURE__ */ jsx8("span", {
|
|
4241
|
+
children: "~"
|
|
4242
|
+
}),
|
|
4243
|
+
/* @__PURE__ */ jsx8("span", {
|
|
4244
|
+
className: "skippr:text-black/40",
|
|
4245
|
+
children: "/"
|
|
4246
|
+
}),
|
|
4247
|
+
/* @__PURE__ */ jsx8("span", {
|
|
4248
|
+
children: "`"
|
|
4249
|
+
})
|
|
4250
|
+
]
|
|
4251
|
+
}),
|
|
4252
|
+
/* @__PURE__ */ jsx8("span", {
|
|
4253
|
+
children: "tilde / backquote key to talk"
|
|
4254
|
+
})
|
|
4255
|
+
]
|
|
4256
|
+
});
|
|
4257
|
+
}
|
|
4258
|
+
|
|
4259
|
+
// src/components/PushToTalkMic.tsx
|
|
4260
|
+
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
4261
|
+
function PushToTalkMic({
|
|
4262
|
+
isCapturingSpeech,
|
|
4263
|
+
showLabel,
|
|
4264
|
+
onStart,
|
|
4265
|
+
onCommit
|
|
4266
|
+
}) {
|
|
4267
|
+
const { barRefs, isTalking } = useMicLevel(isCapturingSpeech);
|
|
4268
|
+
const label = isCapturingSpeech ? "Release to send" : "Hold to talk";
|
|
4269
|
+
const withLabel = isCapturingSpeech || showLabel;
|
|
4270
|
+
return /* @__PURE__ */ jsxs7("button", {
|
|
4271
|
+
type: "button",
|
|
4272
|
+
onPointerDown: onStart,
|
|
4273
|
+
onPointerUp: onCommit,
|
|
4274
|
+
onPointerLeave: onCommit,
|
|
4275
|
+
onPointerCancel: onCommit,
|
|
4276
|
+
"aria-label": "Hold to talk",
|
|
4277
|
+
"aria-pressed": isCapturingSpeech,
|
|
4278
|
+
title: label,
|
|
4279
|
+
"data-holding": isCapturingSpeech,
|
|
4280
|
+
className: cn("skippr:relative skippr:flex skippr:h-[38px] skippr:shrink-0 skippr:items-center skippr:justify-center skippr:gap-2 skippr:rounded-full skippr:bg-bubble skippr:text-white skippr:cursor-pointer skippr:touch-none skippr:select-none", withLabel ? "skippr:px-3.5" : "skippr:w-[38px]", isCapturingSpeech ? "skippr:scale-[0.94] skippr:shadow-inner skippr:animate-skippr-ptt-transmit skippr:transition-transform skippr:duration-100 skippr:ease-out skippr:motion-reduce:animate-none skippr:motion-reduce:scale-100" : "skippr:shadow-[0_2px_6px_rgba(0,0,0,0.28)] skippr:ring-1 skippr:ring-white/15 skippr:transition-transform skippr:duration-200 skippr:ease-[cubic-bezier(0.34,1.56,0.64,1)] skippr:hover:bg-[#3a384b]"),
|
|
4281
|
+
children: [
|
|
4282
|
+
/* @__PURE__ */ jsx9("span", {
|
|
4283
|
+
className: "skippr:flex skippr:shrink-0 skippr:items-center skippr:justify-center",
|
|
4284
|
+
children: isCapturingSpeech ? /* @__PURE__ */ jsx9(Radio, {
|
|
4285
|
+
className: "skippr:size-5 skippr:text-brand"
|
|
4286
|
+
}) : /* @__PURE__ */ jsx9(Mic, {
|
|
4287
|
+
className: "skippr:size-5"
|
|
4288
|
+
})
|
|
4289
|
+
}),
|
|
4290
|
+
withLabel && /* @__PURE__ */ jsx9("span", {
|
|
4291
|
+
className: "skippr:whitespace-nowrap skippr:text-[13px] skippr:font-medium",
|
|
4292
|
+
children: label
|
|
4293
|
+
}),
|
|
4294
|
+
isCapturingSpeech && isTalking && /* @__PURE__ */ jsx9("span", {
|
|
4295
|
+
className: "skippr:flex skippr:h-6 skippr:shrink-0 skippr:items-center skippr:gap-[3px]",
|
|
4296
|
+
children: Array.from({ length: MIC_BARS }).map((_, index2) => /* @__PURE__ */ jsx9("span", {
|
|
4297
|
+
ref: (el) => {
|
|
4298
|
+
barRefs.current[index2] = el;
|
|
4299
|
+
},
|
|
4300
|
+
className: "skippr:w-[3px] skippr:rounded-full skippr:bg-white skippr:transition-[height] skippr:duration-75",
|
|
4301
|
+
style: { height: 5 }
|
|
4302
|
+
}, index2))
|
|
4303
|
+
})
|
|
4304
|
+
]
|
|
4305
|
+
});
|
|
4306
|
+
}
|
|
4307
|
+
|
|
4308
|
+
// src/components/StopActionsIcon.tsx
|
|
4309
|
+
import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
4310
|
+
function StopActionsIcon({ className }) {
|
|
4311
|
+
return /* @__PURE__ */ jsxs8("svg", {
|
|
4312
|
+
viewBox: "0 0 24 24",
|
|
4313
|
+
fill: "none",
|
|
4314
|
+
stroke: "currentColor",
|
|
4315
|
+
strokeWidth: "2",
|
|
4316
|
+
strokeLinecap: "round",
|
|
4317
|
+
strokeLinejoin: "round",
|
|
4318
|
+
className,
|
|
4319
|
+
"aria-hidden": "true",
|
|
4320
|
+
children: [
|
|
4321
|
+
/* @__PURE__ */ jsx10("path", {
|
|
4322
|
+
d: "m4 4 7.07 17 2.51-7.39L21 11.07Z"
|
|
4323
|
+
}),
|
|
4324
|
+
/* @__PURE__ */ jsx10("line", {
|
|
4325
|
+
x1: "3",
|
|
4326
|
+
y1: "21",
|
|
4327
|
+
x2: "21",
|
|
4328
|
+
y2: "3"
|
|
4329
|
+
})
|
|
4330
|
+
]
|
|
4331
|
+
});
|
|
4332
|
+
}
|
|
4333
|
+
|
|
4334
|
+
// src/components/TapToTalkMic.tsx
|
|
4335
|
+
import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
4139
4336
|
function TapToTalkMic({ isCapturingSpeech, showLabel, onToggle }) {
|
|
4140
4337
|
const { barRefs, isTalking } = useMicLevel(isCapturingSpeech);
|
|
4141
4338
|
const label = isCapturingSpeech ? "Tap to send" : "Tap to talk";
|
|
4142
4339
|
const withLabel = isCapturingSpeech || showLabel;
|
|
4143
|
-
return /* @__PURE__ */
|
|
4340
|
+
return /* @__PURE__ */ jsxs9("button", {
|
|
4144
4341
|
type: "button",
|
|
4145
4342
|
onClick: onToggle,
|
|
4146
4343
|
"aria-label": "Tap to talk",
|
|
@@ -4148,22 +4345,22 @@ function TapToTalkMic({ isCapturingSpeech, showLabel, onToggle }) {
|
|
|
4148
4345
|
title: label,
|
|
4149
4346
|
className: cn("skippr:flex skippr:h-[38px] skippr:shrink-0 skippr:items-center skippr:justify-center skippr:gap-2 skippr:rounded-full skippr:bg-bubble skippr:text-white skippr:cursor-pointer", withLabel ? "skippr:px-3.5" : "skippr:w-[38px]", isCapturingSpeech ? "skippr:animate-skippr-rec-ring skippr:motion-reduce:animate-none" : "skippr:hover:bg-[#3a384b]"),
|
|
4150
4347
|
children: [
|
|
4151
|
-
/* @__PURE__ */
|
|
4348
|
+
/* @__PURE__ */ jsx11("span", {
|
|
4152
4349
|
className: "skippr:flex skippr:shrink-0 skippr:items-center skippr:justify-center",
|
|
4153
|
-
children: isCapturingSpeech ? /* @__PURE__ */
|
|
4350
|
+
children: isCapturingSpeech ? /* @__PURE__ */ jsx11(Square, {
|
|
4154
4351
|
className: "skippr:size-4 skippr:text-brand",
|
|
4155
4352
|
fill: "currentColor"
|
|
4156
|
-
}) : /* @__PURE__ */
|
|
4353
|
+
}) : /* @__PURE__ */ jsx11(Mic, {
|
|
4157
4354
|
className: "skippr:size-5"
|
|
4158
4355
|
})
|
|
4159
4356
|
}),
|
|
4160
|
-
withLabel && /* @__PURE__ */
|
|
4357
|
+
withLabel && /* @__PURE__ */ jsx11("span", {
|
|
4161
4358
|
className: "skippr:whitespace-nowrap skippr:text-[13px] skippr:font-medium",
|
|
4162
4359
|
children: label
|
|
4163
4360
|
}),
|
|
4164
|
-
isCapturingSpeech && isTalking && /* @__PURE__ */
|
|
4361
|
+
isCapturingSpeech && isTalking && /* @__PURE__ */ jsx11("span", {
|
|
4165
4362
|
className: "skippr:flex skippr:h-6 skippr:shrink-0 skippr:items-center skippr:gap-[3px]",
|
|
4166
|
-
children: Array.from({ length: MIC_BARS }).map((_, index2) => /* @__PURE__ */
|
|
4363
|
+
children: Array.from({ length: MIC_BARS }).map((_, index2) => /* @__PURE__ */ jsx11("span", {
|
|
4167
4364
|
ref: (el) => {
|
|
4168
4365
|
barRefs.current[index2] = el;
|
|
4169
4366
|
},
|
|
@@ -4176,7 +4373,7 @@ function TapToTalkMic({ isCapturingSpeech, showLabel, onToggle }) {
|
|
|
4176
4373
|
}
|
|
4177
4374
|
|
|
4178
4375
|
// src/components/SessionControlBar.tsx
|
|
4179
|
-
import { jsx as
|
|
4376
|
+
import { jsx as jsx12, jsxs as jsxs10, Fragment } from "react/jsx-runtime";
|
|
4180
4377
|
var STANDBY_BAR_WIDTH = 168;
|
|
4181
4378
|
var READY_BAR_WIDTH = 238;
|
|
4182
4379
|
var PAUSED_BAR_WIDTH = 248;
|
|
@@ -4209,21 +4406,21 @@ function AgentActivity({
|
|
|
4209
4406
|
noiseGate: AGENT_NOISE_GATE
|
|
4210
4407
|
});
|
|
4211
4408
|
const label = isActing ? "Working" : AGENT_STATE_LABELS[state] ?? "";
|
|
4212
|
-
return /* @__PURE__ */
|
|
4409
|
+
return /* @__PURE__ */ jsxs10("span", {
|
|
4213
4410
|
role: "status",
|
|
4214
4411
|
className: "skippr:flex skippr:items-center skippr:gap-1.5 skippr:text-bubble",
|
|
4215
4412
|
"aria-label": isActing ? "Agent is acting" : `Agent is ${state}`,
|
|
4216
4413
|
children: [
|
|
4217
|
-
/* @__PURE__ */
|
|
4414
|
+
/* @__PURE__ */ jsx12("span", {
|
|
4218
4415
|
className: "skippr:flex skippr:size-5 skippr:shrink-0 skippr:items-center skippr:justify-center",
|
|
4219
|
-
children: isActing ? /* @__PURE__ */
|
|
4416
|
+
children: isActing ? /* @__PURE__ */ jsx12(MousePointerClick, {
|
|
4220
4417
|
strokeWidth: 2,
|
|
4221
4418
|
className: "skippr:size-5 skippr:[animation:skippr-finger-tap_1.1s_ease-in-out_infinite]"
|
|
4222
|
-
}) : /* @__PURE__ */
|
|
4419
|
+
}) : /* @__PURE__ */ jsxs10(Fragment, {
|
|
4223
4420
|
children: [
|
|
4224
|
-
state === "speaking" && /* @__PURE__ */
|
|
4421
|
+
state === "speaking" && /* @__PURE__ */ jsx12("span", {
|
|
4225
4422
|
className: "skippr:flex skippr:h-5 skippr:items-center skippr:gap-[2px]",
|
|
4226
|
-
children: Array.from({ length: AGENT_BARS }).map((_, index2) => /* @__PURE__ */
|
|
4423
|
+
children: Array.from({ length: AGENT_BARS }).map((_, index2) => /* @__PURE__ */ jsx12("span", {
|
|
4227
4424
|
ref: (el) => {
|
|
4228
4425
|
barRefs.current[index2] = el;
|
|
4229
4426
|
},
|
|
@@ -4231,21 +4428,21 @@ function AgentActivity({
|
|
|
4231
4428
|
style: { height: AGENT_BAR_IDLE_HEIGHT_PX }
|
|
4232
4429
|
}, index2))
|
|
4233
4430
|
}),
|
|
4234
|
-
state === "thinking" && /* @__PURE__ */
|
|
4431
|
+
state === "thinking" && /* @__PURE__ */ jsxs10("span", {
|
|
4235
4432
|
className: "skippr:flex skippr:items-center skippr:gap-[3px]",
|
|
4236
4433
|
children: [
|
|
4237
|
-
/* @__PURE__ */
|
|
4434
|
+
/* @__PURE__ */ jsx12("span", {
|
|
4238
4435
|
className: "skippr:size-[5px] skippr:rounded-full skippr:bg-current skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
4239
4436
|
}),
|
|
4240
|
-
/* @__PURE__ */
|
|
4437
|
+
/* @__PURE__ */ jsx12("span", {
|
|
4241
4438
|
className: "skippr:size-[5px] skippr:rounded-full skippr:bg-current skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
4242
4439
|
}),
|
|
4243
|
-
/* @__PURE__ */
|
|
4440
|
+
/* @__PURE__ */ jsx12("span", {
|
|
4244
4441
|
className: "skippr:size-[5px] skippr:rounded-full skippr:bg-current skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
4245
4442
|
})
|
|
4246
4443
|
]
|
|
4247
4444
|
}),
|
|
4248
|
-
state === "listening" && /* @__PURE__ */
|
|
4445
|
+
state === "listening" && /* @__PURE__ */ jsxs10("svg", {
|
|
4249
4446
|
viewBox: "0 0 24 24",
|
|
4250
4447
|
className: "skippr:size-5",
|
|
4251
4448
|
fill: "none",
|
|
@@ -4255,10 +4452,10 @@ function AgentActivity({
|
|
|
4255
4452
|
strokeLinejoin: "round",
|
|
4256
4453
|
"aria-hidden": "true",
|
|
4257
4454
|
children: [
|
|
4258
|
-
/* @__PURE__ */
|
|
4455
|
+
/* @__PURE__ */ jsx12("path", {
|
|
4259
4456
|
d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
|
|
4260
4457
|
}),
|
|
4261
|
-
/* @__PURE__ */
|
|
4458
|
+
/* @__PURE__ */ jsx12("circle", {
|
|
4262
4459
|
cx: "12",
|
|
4263
4460
|
cy: "12",
|
|
4264
4461
|
r: "2.5",
|
|
@@ -4271,7 +4468,7 @@ function AgentActivity({
|
|
|
4271
4468
|
]
|
|
4272
4469
|
})
|
|
4273
4470
|
}),
|
|
4274
|
-
/* @__PURE__ */
|
|
4471
|
+
/* @__PURE__ */ jsx12("span", {
|
|
4275
4472
|
className: "skippr:text-[11px] skippr:font-medium skippr:capitalize",
|
|
4276
4473
|
children: label
|
|
4277
4474
|
})
|
|
@@ -4310,14 +4507,16 @@ function SessionControlBar() {
|
|
|
4310
4507
|
const { wasDraggedRef } = useLauncherDrag(controlBarRef, commitLauncherDrop, panelFollowers, setIsDragging);
|
|
4311
4508
|
const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
|
|
4312
4509
|
const { state, mediaStreamTrack: agentMediaStreamTrack } = useAgentVoiceState();
|
|
4313
|
-
const { actionsActive,
|
|
4510
|
+
const { actionsActive, stopActions: stopActions2 } = useActionControl();
|
|
4314
4511
|
const { isHeld, countdown, toggle: togglePause } = useSessionHoldContext();
|
|
4315
|
-
const
|
|
4512
|
+
const micMode = agentControls?.micMode;
|
|
4513
|
+
const pushOrTapMicMode = isRequestResponseMicMode(micMode);
|
|
4514
|
+
const isPushToTalk = micMode === MIC_MODE.PushToTalk;
|
|
4316
4515
|
const agentActive = state === "speaking" || state === "thinking";
|
|
4317
|
-
const { isCapturingSpeech, toggle: toggleTapToTalk } =
|
|
4516
|
+
const { isCapturingSpeech, toggle: toggleTapToTalk, start, commit } = useVoiceTurnContext();
|
|
4318
4517
|
const liveUserTranscript = useLiveUserTranscript(isCapturingSpeech);
|
|
4319
4518
|
const { reportActivity } = useIdleAutoPause({
|
|
4320
|
-
enabled:
|
|
4519
|
+
enabled: pushOrTapMicMode,
|
|
4321
4520
|
active: agentActive || isCapturingSpeech,
|
|
4322
4521
|
isHeld,
|
|
4323
4522
|
pause: () => {
|
|
@@ -4325,15 +4524,34 @@ function SessionControlBar() {
|
|
|
4325
4524
|
togglePause();
|
|
4326
4525
|
}
|
|
4327
4526
|
});
|
|
4328
|
-
|
|
4527
|
+
const [pushToTalkHintSeen, setPushToTalkHintSeen] = useState14(false);
|
|
4528
|
+
const startPushToTalk = useCallback13(() => {
|
|
4529
|
+
start();
|
|
4530
|
+
reportActivity();
|
|
4531
|
+
}, [start, reportActivity]);
|
|
4532
|
+
const commitPushToTalk = useCallback13(() => {
|
|
4533
|
+
commit();
|
|
4534
|
+
reportActivity();
|
|
4535
|
+
}, [commit, reportActivity]);
|
|
4536
|
+
const dismissPushToTalkHint = useCallback13(() => {
|
|
4537
|
+
setPushToTalkHintSeen(true);
|
|
4538
|
+
}, []);
|
|
4539
|
+
useKeyboardPushToTalk({
|
|
4540
|
+
enabled: isPushToTalk,
|
|
4541
|
+
onStart: startPushToTalk,
|
|
4542
|
+
onCommit: commitPushToTalk,
|
|
4543
|
+
onKeyUsed: dismissPushToTalkHint
|
|
4544
|
+
});
|
|
4545
|
+
useEffect21(() => {
|
|
4329
4546
|
if (isHeld)
|
|
4330
4547
|
minimizePanel();
|
|
4331
4548
|
}, [isHeld, minimizePanel]);
|
|
4332
4549
|
const isReady = state === "listening" || state === "thinking" || state === "speaking";
|
|
4333
4550
|
const { barRefs, isTalking } = useMicLevel(isReady && !isMuted && !textMode && !isHeld);
|
|
4551
|
+
const showPushToTalkHint = isPushToTalk && isReady && !isHeld && !isCapturingSpeech && !isPanelOpen && !pushToTalkHintSeen;
|
|
4334
4552
|
const showScreenShareToggle = captureMode === CAPTURE_MODE.Screenshare;
|
|
4335
4553
|
const showActionControl = captureMode === CAPTURE_MODE.Auto && actionsActive;
|
|
4336
|
-
const
|
|
4554
|
+
const voiceTurnAgentBusy = agentActive || showActionControl;
|
|
4337
4555
|
const screenShareExtra = showScreenShareToggle ? SCREEN_SHARE_EXTRA_WIDTH : 0;
|
|
4338
4556
|
const actionControlExtra = showActionControl ? ACTION_CONTROL_EXTRA_WIDTH : 0;
|
|
4339
4557
|
let barWidth = STANDBY_BAR_WIDTH;
|
|
@@ -4360,131 +4578,136 @@ function SessionControlBar() {
|
|
|
4360
4578
|
return;
|
|
4361
4579
|
action();
|
|
4362
4580
|
};
|
|
4363
|
-
const panelToggleButton = /* @__PURE__ */
|
|
4581
|
+
const panelToggleButton = /* @__PURE__ */ jsx12("button", {
|
|
4364
4582
|
type: "button",
|
|
4365
4583
|
onClick: ifNotDragged(togglePanel),
|
|
4366
4584
|
"aria-label": isPanelOpen ? "Close panel" : agendaModule && !textMode ? "Open agenda" : "Open chat",
|
|
4367
4585
|
className: cn(SQUARE_BUTTON, "skippr:text-neutral-700", textMode ? "skippr:hover:bg-neutral-100" : "skippr:bg-neutral-100 skippr:hover:bg-neutral-200"),
|
|
4368
|
-
children: /* @__PURE__ */
|
|
4586
|
+
children: /* @__PURE__ */ jsx12(MessageSquare, {
|
|
4369
4587
|
className: "skippr:size-5"
|
|
4370
4588
|
})
|
|
4371
4589
|
});
|
|
4372
|
-
return /* @__PURE__ */
|
|
4590
|
+
return /* @__PURE__ */ jsxs10("div", {
|
|
4373
4591
|
ref: controlBarRef,
|
|
4374
4592
|
style: { bottom: launcherBottomPx },
|
|
4375
4593
|
className: cn("skippr:fixed skippr:z-[9999] skippr:touch-none skippr:cursor-grab", position === "right" ? "skippr:right-3" : "skippr:left-3"),
|
|
4376
4594
|
children: [
|
|
4377
|
-
isCapturingSpeech && !isPanelOpen && /* @__PURE__ */
|
|
4595
|
+
isCapturingSpeech && !isPanelOpen && /* @__PURE__ */ jsx12("div", {
|
|
4378
4596
|
className: cn("skippr:absolute skippr:bottom-full skippr:z-[10000] skippr:mb-2 skippr:max-w-[280px] skippr:rounded-[14px] skippr:bg-bubble skippr:px-3.5 skippr:py-2 skippr:text-[13px] skippr:text-white skippr:shadow-[0_10px_32px_rgba(0,0,0,0.18)] skippr:[animation:skippr-agent-in_200ms_ease-out]", position === "right" ? "skippr:right-0" : "skippr:left-0"),
|
|
4379
|
-
children: liveUserTranscript ? liveUserTranscript : /* @__PURE__ */
|
|
4597
|
+
children: liveUserTranscript ? liveUserTranscript : /* @__PURE__ */ jsx12("span", {
|
|
4380
4598
|
className: "skippr:text-white/60",
|
|
4381
4599
|
children: "Listening…"
|
|
4382
4600
|
})
|
|
4383
4601
|
}),
|
|
4384
|
-
/* @__PURE__ */
|
|
4385
|
-
style: { width: isReady &&
|
|
4602
|
+
/* @__PURE__ */ jsxs10("div", {
|
|
4603
|
+
style: { width: isReady && pushOrTapMicMode ? "auto" : barWidth },
|
|
4386
4604
|
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")),
|
|
4387
4605
|
children: [
|
|
4388
|
-
!isReady && /* @__PURE__ */
|
|
4606
|
+
!isReady && /* @__PURE__ */ jsxs10("span", {
|
|
4389
4607
|
className: "skippr:flex skippr:h-[38px] skippr:items-center skippr:justify-center skippr:gap-2 skippr:text-[13px] skippr:font-medium skippr:text-bubble skippr:[animation:skippr-stage-fade_240ms_ease-out]",
|
|
4390
4608
|
children: [
|
|
4391
|
-
/* @__PURE__ */
|
|
4609
|
+
/* @__PURE__ */ jsxs10("span", {
|
|
4392
4610
|
className: "skippr:flex skippr:items-center skippr:gap-[3px]",
|
|
4393
4611
|
children: [
|
|
4394
|
-
/* @__PURE__ */
|
|
4612
|
+
/* @__PURE__ */ jsx12("span", {
|
|
4395
4613
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-bubble skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
4396
4614
|
}),
|
|
4397
|
-
/* @__PURE__ */
|
|
4615
|
+
/* @__PURE__ */ jsx12("span", {
|
|
4398
4616
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-bubble skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
4399
4617
|
}),
|
|
4400
|
-
/* @__PURE__ */
|
|
4618
|
+
/* @__PURE__ */ jsx12("span", {
|
|
4401
4619
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-bubble skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
4402
4620
|
})
|
|
4403
4621
|
]
|
|
4404
4622
|
}),
|
|
4405
|
-
/* @__PURE__ */
|
|
4623
|
+
/* @__PURE__ */ jsx12("span", {
|
|
4406
4624
|
children: "Standing by…"
|
|
4407
4625
|
})
|
|
4408
4626
|
]
|
|
4409
4627
|
}),
|
|
4410
|
-
isReady && /* @__PURE__ */
|
|
4628
|
+
isReady && /* @__PURE__ */ jsxs10("div", {
|
|
4411
4629
|
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"),
|
|
4412
4630
|
children: [
|
|
4413
|
-
/* @__PURE__ */
|
|
4631
|
+
/* @__PURE__ */ jsx12("button", {
|
|
4414
4632
|
type: "button",
|
|
4415
4633
|
onClick: ifNotDragged(togglePause),
|
|
4416
4634
|
"aria-label": isHeld ? "Resume" : "Pause",
|
|
4417
4635
|
title: isHeld ? "Resume" : "Pause",
|
|
4418
4636
|
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"),
|
|
4419
|
-
children: isHeld ? /* @__PURE__ */
|
|
4637
|
+
children: isHeld ? /* @__PURE__ */ jsx12(Play, {
|
|
4420
4638
|
className: "skippr:size-5",
|
|
4421
4639
|
fill: "currentColor"
|
|
4422
|
-
}) : /* @__PURE__ */
|
|
4640
|
+
}) : /* @__PURE__ */ jsx12(Pause, {
|
|
4423
4641
|
className: "skippr:size-5",
|
|
4424
4642
|
fill: "currentColor"
|
|
4425
4643
|
})
|
|
4426
4644
|
}),
|
|
4427
|
-
isHeld ? /* @__PURE__ */
|
|
4645
|
+
isHeld ? /* @__PURE__ */ jsxs10(Fragment, {
|
|
4428
4646
|
children: [
|
|
4429
|
-
/* @__PURE__ */
|
|
4647
|
+
/* @__PURE__ */ jsx12(PausedCountdown, {
|
|
4430
4648
|
secondsRemaining: countdown
|
|
4431
4649
|
}),
|
|
4432
4650
|
panelToggleButton
|
|
4433
4651
|
]
|
|
4434
|
-
}) : /* @__PURE__ */
|
|
4652
|
+
}) : /* @__PURE__ */ jsxs10(Fragment, {
|
|
4435
4653
|
children: [
|
|
4436
|
-
!textMode &&
|
|
4654
|
+
!textMode && pushOrTapMicMode && /* @__PURE__ */ jsxs10("div", {
|
|
4437
4655
|
className: "skippr:flex skippr:h-[38px] skippr:items-center skippr:gap-2",
|
|
4438
4656
|
children: [
|
|
4439
|
-
/* @__PURE__ */
|
|
4657
|
+
micMode === MIC_MODE.PushToTalk ? /* @__PURE__ */ jsx12(PushToTalkMic, {
|
|
4658
|
+
isCapturingSpeech,
|
|
4659
|
+
showLabel: !voiceTurnAgentBusy,
|
|
4660
|
+
onStart: startPushToTalk,
|
|
4661
|
+
onCommit: commitPushToTalk
|
|
4662
|
+
}) : /* @__PURE__ */ jsx12(TapToTalkMic, {
|
|
4440
4663
|
isCapturingSpeech,
|
|
4441
|
-
showLabel: !
|
|
4664
|
+
showLabel: !voiceTurnAgentBusy,
|
|
4442
4665
|
onToggle: () => {
|
|
4443
4666
|
toggleTapToTalk();
|
|
4444
4667
|
reportActivity();
|
|
4445
4668
|
}
|
|
4446
4669
|
}),
|
|
4447
|
-
|
|
4670
|
+
voiceTurnAgentBusy && /* @__PURE__ */ jsx12("span", {
|
|
4448
4671
|
className: "skippr:flex skippr:items-center skippr:[animation:skippr-agent-in_200ms_ease-out_240ms_both]",
|
|
4449
|
-
children: /* @__PURE__ */
|
|
4672
|
+
children: /* @__PURE__ */ jsx12(AgentActivity, {
|
|
4450
4673
|
state,
|
|
4451
|
-
isActing: showActionControl
|
|
4674
|
+
isActing: showActionControl,
|
|
4452
4675
|
mediaStreamTrack: agentMediaStreamTrack
|
|
4453
4676
|
})
|
|
4454
4677
|
})
|
|
4455
4678
|
]
|
|
4456
4679
|
}),
|
|
4457
|
-
!textMode && !
|
|
4680
|
+
!textMode && !pushOrTapMicMode && /* @__PURE__ */ jsxs10("div", {
|
|
4458
4681
|
className: "skippr:relative skippr:h-[38px]",
|
|
4459
4682
|
style: { width: MIC_REGION_WIDTH },
|
|
4460
4683
|
children: [
|
|
4461
|
-
!isTalking && /* @__PURE__ */
|
|
4684
|
+
!isTalking && /* @__PURE__ */ jsx12("span", {
|
|
4462
4685
|
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]",
|
|
4463
4686
|
style: { width: AGENT_ACTIVITY_WIDTH },
|
|
4464
|
-
children: /* @__PURE__ */
|
|
4687
|
+
children: /* @__PURE__ */ jsx12(AgentActivity, {
|
|
4465
4688
|
state,
|
|
4466
|
-
isActing: showActionControl
|
|
4689
|
+
isActing: showActionControl,
|
|
4467
4690
|
mediaStreamTrack: agentMediaStreamTrack
|
|
4468
4691
|
})
|
|
4469
4692
|
}),
|
|
4470
|
-
/* @__PURE__ */
|
|
4693
|
+
/* @__PURE__ */ jsxs10("button", {
|
|
4471
4694
|
type: "button",
|
|
4472
4695
|
onClick: ifNotDragged(() => void toggleMute()),
|
|
4473
4696
|
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
4474
4697
|
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"),
|
|
4475
4698
|
style: { width: isTalking ? MIC_REGION_WIDTH : MIC_SQUARE_WIDTH },
|
|
4476
4699
|
children: [
|
|
4477
|
-
/* @__PURE__ */
|
|
4700
|
+
/* @__PURE__ */ jsx12("span", {
|
|
4478
4701
|
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"),
|
|
4479
|
-
children: isMuted ? /* @__PURE__ */
|
|
4702
|
+
children: isMuted ? /* @__PURE__ */ jsx12(MicOff, {
|
|
4480
4703
|
className: "skippr:size-5"
|
|
4481
|
-
}) : /* @__PURE__ */
|
|
4704
|
+
}) : /* @__PURE__ */ jsx12(Mic, {
|
|
4482
4705
|
className: "skippr:size-5"
|
|
4483
4706
|
})
|
|
4484
4707
|
}),
|
|
4485
|
-
/* @__PURE__ */
|
|
4708
|
+
/* @__PURE__ */ jsx12("span", {
|
|
4486
4709
|
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"),
|
|
4487
|
-
children: Array.from({ length: MIC_BARS }).map((_, index2) => /* @__PURE__ */
|
|
4710
|
+
children: Array.from({ length: MIC_BARS }).map((_, index2) => /* @__PURE__ */ jsx12("span", {
|
|
4488
4711
|
ref: (el) => {
|
|
4489
4712
|
barRefs.current[index2] = el;
|
|
4490
4713
|
},
|
|
@@ -4496,30 +4719,26 @@ function SessionControlBar() {
|
|
|
4496
4719
|
})
|
|
4497
4720
|
]
|
|
4498
4721
|
}),
|
|
4499
|
-
showScreenShareToggle && /* @__PURE__ */
|
|
4722
|
+
showScreenShareToggle && /* @__PURE__ */ jsx12("button", {
|
|
4500
4723
|
type: "button",
|
|
4501
4724
|
onClick: ifNotDragged(() => void toggleScreenShare()),
|
|
4502
4725
|
"aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
|
|
4503
4726
|
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"),
|
|
4504
|
-
children: isScreenSharing ? /* @__PURE__ */
|
|
4727
|
+
children: isScreenSharing ? /* @__PURE__ */ jsx12(MonitorOff, {
|
|
4505
4728
|
className: "skippr:size-5"
|
|
4506
|
-
}) : /* @__PURE__ */
|
|
4729
|
+
}) : /* @__PURE__ */ jsx12(Monitor, {
|
|
4507
4730
|
className: "skippr:size-5"
|
|
4508
4731
|
})
|
|
4509
4732
|
}),
|
|
4510
4733
|
panelToggleButton,
|
|
4511
|
-
showActionControl && /* @__PURE__ */
|
|
4734
|
+
showActionControl && /* @__PURE__ */ jsx12("button", {
|
|
4512
4735
|
type: "button",
|
|
4513
|
-
onClick: ifNotDragged(() => void
|
|
4514
|
-
"aria-label":
|
|
4515
|
-
title:
|
|
4516
|
-
className: cn(SQUARE_BUTTON,
|
|
4517
|
-
children:
|
|
4518
|
-
className: "skippr:size-5"
|
|
4519
|
-
fill: "currentColor"
|
|
4520
|
-
}) : /* @__PURE__ */ jsx9(Square, {
|
|
4521
|
-
className: "skippr:size-5",
|
|
4522
|
-
fill: "currentColor"
|
|
4736
|
+
onClick: ifNotDragged(() => void stopActions2()),
|
|
4737
|
+
"aria-label": "Stop actions",
|
|
4738
|
+
title: "Stop actions",
|
|
4739
|
+
className: cn(SQUARE_BUTTON, "skippr:bg-red-100 skippr:text-red-600 skippr:hover:bg-red-200"),
|
|
4740
|
+
children: /* @__PURE__ */ jsx12(StopActionsIcon, {
|
|
4741
|
+
className: "skippr:size-5"
|
|
4523
4742
|
})
|
|
4524
4743
|
})
|
|
4525
4744
|
]
|
|
@@ -4528,27 +4747,28 @@ function SessionControlBar() {
|
|
|
4528
4747
|
}, textMode ? "ready-text" : "ready")
|
|
4529
4748
|
]
|
|
4530
4749
|
}),
|
|
4531
|
-
|
|
4750
|
+
showPushToTalkHint && /* @__PURE__ */ jsx12(PushToTalkHint, {}),
|
|
4751
|
+
isReady && !isDragging && /* @__PURE__ */ jsx12("button", {
|
|
4532
4752
|
type: "button",
|
|
4533
4753
|
onClick: ifNotDragged(() => void pauseSession()),
|
|
4534
4754
|
disabled: isPausing,
|
|
4535
4755
|
"aria-label": "End session",
|
|
4536
4756
|
"aria-busy": isPausing,
|
|
4537
4757
|
className: cn("skippr:absolute skippr:top-1/2 skippr:z-20 skippr:flex skippr:h-[54px] skippr:w-[50px] skippr:-mt-[27px] skippr:items-center", position === "right" ? "skippr:-right-8 skippr:justify-start skippr:pl-2.5" : "skippr:-left-8 skippr:justify-end skippr:pr-2.5", "skippr:rounded-[16px] skippr:bg-red-500 skippr:text-white", "skippr:shadow-[0_4px_14px_rgba(239,68,68,0.45)]", "skippr:transition-colors skippr:duration-150", "skippr:[animation:skippr-toolset-pop_280ms_cubic-bezier(0.22,1,0.36,1)]", isPausing ? "skippr:cursor-default" : "skippr:cursor-pointer skippr:hover:bg-red-600"),
|
|
4538
|
-
children: /* @__PURE__ */
|
|
4758
|
+
children: /* @__PURE__ */ jsxs10("span", {
|
|
4539
4759
|
className: "skippr:relative skippr:flex skippr:size-5 skippr:items-center skippr:justify-center",
|
|
4540
4760
|
children: [
|
|
4541
|
-
/* @__PURE__ */
|
|
4761
|
+
/* @__PURE__ */ jsx12(X, {
|
|
4542
4762
|
className: cn("skippr:size-4 skippr:transition-opacity skippr:duration-200", isPausing && "skippr:opacity-40"),
|
|
4543
4763
|
strokeWidth: 2.5
|
|
4544
4764
|
}),
|
|
4545
|
-
isPausing && /* @__PURE__ */
|
|
4765
|
+
isPausing && /* @__PURE__ */ jsxs10("svg", {
|
|
4546
4766
|
viewBox: "0 0 24 24",
|
|
4547
4767
|
fill: "none",
|
|
4548
4768
|
"aria-hidden": "true",
|
|
4549
4769
|
className: "skippr:absolute skippr:inset-0 skippr:size-full skippr:animate-spin skippr:motion-reduce:hidden",
|
|
4550
4770
|
children: [
|
|
4551
|
-
/* @__PURE__ */
|
|
4771
|
+
/* @__PURE__ */ jsx12("circle", {
|
|
4552
4772
|
cx: "12",
|
|
4553
4773
|
cy: "12",
|
|
4554
4774
|
r: "10.5",
|
|
@@ -4556,7 +4776,7 @@ function SessionControlBar() {
|
|
|
4556
4776
|
strokeOpacity: "0.2",
|
|
4557
4777
|
strokeWidth: "1.5"
|
|
4558
4778
|
}),
|
|
4559
|
-
/* @__PURE__ */
|
|
4779
|
+
/* @__PURE__ */ jsx12("circle", {
|
|
4560
4780
|
cx: "12",
|
|
4561
4781
|
cy: "12",
|
|
4562
4782
|
r: "10.5",
|
|
@@ -4575,9 +4795,9 @@ function SessionControlBar() {
|
|
|
4575
4795
|
}
|
|
4576
4796
|
|
|
4577
4797
|
// src/components/ShadowHost.tsx
|
|
4578
|
-
import { useLayoutEffect as useLayoutEffect2, useRef as
|
|
4798
|
+
import { useLayoutEffect as useLayoutEffect2, useRef as useRef15, useState as useState15 } from "react";
|
|
4579
4799
|
import { createPortal } from "react-dom";
|
|
4580
|
-
import { jsx as
|
|
4800
|
+
import { jsx as jsx13, Fragment as Fragment2 } from "react/jsx-runtime";
|
|
4581
4801
|
var PROPERTIES_STYLE_ID = "skippr-tw-properties";
|
|
4582
4802
|
var PROPERTY_RULE = /@property\s+[^{]+\{[^}]*\}/g;
|
|
4583
4803
|
function hoistTailwindProperties(css) {
|
|
@@ -4592,10 +4812,10 @@ function hoistTailwindProperties(css) {
|
|
|
4592
4812
|
return css.replace(PROPERTY_RULE, "");
|
|
4593
4813
|
}
|
|
4594
4814
|
function ShadowHost({ children }) {
|
|
4595
|
-
const hostRef =
|
|
4596
|
-
const [shadowRoot, setShadowRoot] =
|
|
4815
|
+
const hostRef = useRef15(null);
|
|
4816
|
+
const [shadowRoot, setShadowRoot] = useState15(null);
|
|
4597
4817
|
const css = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
|
4598
|
-
@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\\:z-\\[10000\\]{z-index:10000}.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-\\[38px\\]{width:38px}.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\\:max-w-\\[280px\\]{max-width:280px}.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\\]{animation:.2s ease-out skippr-agent-in}.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-rec-ring{animation:2s ease-out infinite skippr-rec-ring}.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-3\\.5{padding-inline:calc(var(--skippr-spacing)*3.5)}.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-brand{color:#2bc0ae}.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,.skippr\\:text-white\\/60{color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:text-white\\/60{color:color-mix(in oklab,var(--skippr-color-white)60%,transparent)}}.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\\: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-rec-ring{0%{box-shadow:0 0 #2bc0ae8c}70%{box-shadow:0 0 0 11px #2bc0ae00}to{box-shadow:0 0 #2bc0ae00}}@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}}`;
|
|
4818
|
+
@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-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-2{left:calc(var(--skippr-spacing)*2)}.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\\:z-\\[10000\\]{z-index:10000}.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-\\[38px\\]{width:38px}.skippr\\:w-\\[50px\\]{width:50px}.skippr\\:w-fit{width:fit-content}.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\\:max-w-\\[280px\\]{max-width:280px}.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\\:scale-\\[0\\.94\\]{scale:.94}.skippr\\:-rotate-90{rotate:-90deg}.skippr\\:rotate-45{rotate:45deg}.skippr\\:rotate-\\[225deg\\]{rotate:225deg}.skippr\\:\\[animation\\:skippr-agent-in_200ms_ease-out\\]{animation:.2s ease-out skippr-agent-in}.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-ptt-transmit{animation:1.4s ease-out infinite skippr-ptt-transmit}.skippr\\:animate-skippr-rec-ring{animation:2s ease-out infinite skippr-rec-ring}.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{border-radius:.25rem}.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-black\\/25{border-color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:border-black\\/25{border-color:color-mix(in oklab,var(--skippr-color-black)25%,transparent)}}.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-\\[\\#f4ecd8\\]{background-color:#f4ecd8}.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-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\\:bg-white\\/70{background-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:bg-white\\/70{background-color:color-mix(in oklab,var(--skippr-color-white)70%,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-3\\.5{padding-inline:calc(var(--skippr-spacing)*3.5)}.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-none{--tw-leading:1;line-height:1}.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,.skippr\\:text-black\\/40{color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:text-black\\/40{color:color-mix(in oklab,var(--skippr-color-black)40%,transparent)}}.skippr\\:text-brand{color:#2bc0ae}.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-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,.skippr\\:text-white\\/60{color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:text-white\\/60{color:color-mix(in oklab,var(--skippr-color-white)60%,transparent)}}.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_2px_6px_rgba\\(0\\,0\\,0\\,0\\.28\\)\\]{--tw-shadow:0 2px 6px var(--tw-shadow-color,#00000047);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\\(0\\,0\\,0\\,0\\.12\\)\\]{--tw-shadow:0 4px 14px 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-inner{--tw-shadow:inset 0 2px 4px 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\\: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\\/15{--tw-ring-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:ring-white\\/15{--tw-ring-color:color-mix(in oklab,var(--skippr-color-white)15%,transparent)}}.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-100{--tw-duration:.1s;transition-duration:.1s}.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-\\[cubic-bezier\\(0\\.34\\,1\\.56\\,0\\.64\\,1\\)\\]{--tw-ease:cubic-bezier(.34,1.56,.64,1);transition-timing-function:cubic-bezier(.34,1.56,.64,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-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\\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.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-rec-ring{0%{box-shadow:0 0 #2bc0ae8c}70%{box-shadow:0 0 0 11px #2bc0ae00}to{box-shadow:0 0 #2bc0ae00}}@keyframes skippr-ptt-transmit{0%{box-shadow:0 0 #2bc0ae99,0 0 #2bc0ae59}70%{box-shadow:0 0 0 9px #2bc0ae00,0 0 0 16px #2bc0ae00}to{box-shadow:0 0 #2bc0ae00,0 0 #2bc0ae00}}@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}}`;
|
|
4599
4819
|
useLayoutEffect2(() => {
|
|
4600
4820
|
const host = hostRef.current;
|
|
4601
4821
|
if (!host || !css)
|
|
@@ -4610,17 +4830,17 @@ function ShadowHost({ children }) {
|
|
|
4610
4830
|
setShadowRoot(root);
|
|
4611
4831
|
}, [css]);
|
|
4612
4832
|
if (!css)
|
|
4613
|
-
return /* @__PURE__ */
|
|
4833
|
+
return /* @__PURE__ */ jsx13(Fragment2, {
|
|
4614
4834
|
children
|
|
4615
4835
|
});
|
|
4616
|
-
return /* @__PURE__ */
|
|
4836
|
+
return /* @__PURE__ */ jsx13("div", {
|
|
4617
4837
|
ref: hostRef,
|
|
4618
4838
|
children: shadowRoot && createPortal(children, shadowRoot)
|
|
4619
4839
|
});
|
|
4620
4840
|
}
|
|
4621
4841
|
|
|
4622
4842
|
// src/components/Sidebar.tsx
|
|
4623
|
-
import { useContext as useContext13, useEffect as
|
|
4843
|
+
import { useContext as useContext13, useEffect as useEffect28 } from "react";
|
|
4624
4844
|
|
|
4625
4845
|
// src/hooks/useCombinedMessages.ts
|
|
4626
4846
|
import { useContext as useContext9, useMemo as useMemo6 } from "react";
|
|
@@ -4655,14 +4875,14 @@ function useChatMessages() {
|
|
|
4655
4875
|
|
|
4656
4876
|
// src/hooks/useStreamingTranscript.ts
|
|
4657
4877
|
import { useLocalParticipant as useLocalParticipant10 } from "@livekit/components-react/hooks";
|
|
4658
|
-
import { useMemo as useMemo5, useRef as
|
|
4878
|
+
import { useMemo as useMemo5, useRef as useRef16 } from "react";
|
|
4659
4879
|
function useStreamingTranscript() {
|
|
4660
4880
|
const transcriptions = useSharedTranscriptions();
|
|
4661
4881
|
const { localParticipant } = useLocalParticipant10();
|
|
4662
|
-
const { isCapturingSpeech } =
|
|
4882
|
+
const { isCapturingSpeech } = useVoiceTurnContext();
|
|
4663
4883
|
const localIdentity = localParticipant.identity;
|
|
4664
|
-
const priorUserStreamIdsRef =
|
|
4665
|
-
const wasCapturingSpeechRef =
|
|
4884
|
+
const priorUserStreamIdsRef = useRef16(new Set);
|
|
4885
|
+
const wasCapturingSpeechRef = useRef16(false);
|
|
4666
4886
|
if (isCapturingSpeech && !wasCapturingSpeechRef.current) {
|
|
4667
4887
|
priorUserStreamIdsRef.current = new Set(transcriptions.filter((stream) => stream.participantInfo.identity === localIdentity).map((stream) => stream.streamInfo.id));
|
|
4668
4888
|
}
|
|
@@ -4723,7 +4943,7 @@ function useCombinedMessages() {
|
|
|
4723
4943
|
}
|
|
4724
4944
|
|
|
4725
4945
|
// src/hooks/usePhaseUpdates.ts
|
|
4726
|
-
import { useCallback as
|
|
4946
|
+
import { useCallback as useCallback14, useContext as useContext10, useEffect as useEffect22 } from "react";
|
|
4727
4947
|
function parsePhases(json) {
|
|
4728
4948
|
try {
|
|
4729
4949
|
const data = JSON.parse(json);
|
|
@@ -4734,10 +4954,10 @@ function parsePhases(json) {
|
|
|
4734
4954
|
return null;
|
|
4735
4955
|
}
|
|
4736
4956
|
function usePhaseUpdates() {
|
|
4737
|
-
const parse =
|
|
4957
|
+
const parse = useCallback14(parsePhases, []);
|
|
4738
4958
|
const livePhases = useAgentState("phases", parse, []);
|
|
4739
4959
|
const ctx = useContext10(LiveAgentContext);
|
|
4740
|
-
|
|
4960
|
+
useEffect22(() => {
|
|
4741
4961
|
if (livePhases.length > 0)
|
|
4742
4962
|
ctx?.setPhasesSnapshot(livePhases);
|
|
4743
4963
|
}, [livePhases, ctx?.setPhasesSnapshot]);
|
|
@@ -4746,7 +4966,7 @@ function usePhaseUpdates() {
|
|
|
4746
4966
|
}
|
|
4747
4967
|
|
|
4748
4968
|
// src/hooks/useSessionRemaining.ts
|
|
4749
|
-
import { useEffect as
|
|
4969
|
+
import { useEffect as useEffect23, useRef as useRef17, useState as useState16 } from "react";
|
|
4750
4970
|
|
|
4751
4971
|
// src/lib/format.ts
|
|
4752
4972
|
function formatTime(seconds) {
|
|
@@ -4762,9 +4982,9 @@ function parseNumber(s) {
|
|
|
4762
4982
|
// src/hooks/useSessionRemaining.ts
|
|
4763
4983
|
function useSessionRemaining() {
|
|
4764
4984
|
const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
|
|
4765
|
-
const endTimeRef =
|
|
4766
|
-
const [remaining, setRemaining] =
|
|
4767
|
-
|
|
4985
|
+
const endTimeRef = useRef17(null);
|
|
4986
|
+
const [remaining, setRemaining] = useState16(null);
|
|
4987
|
+
useEffect23(() => {
|
|
4768
4988
|
if (maxCallDuration === null || endTimeRef.current !== null)
|
|
4769
4989
|
return;
|
|
4770
4990
|
const endTime = Date.now() + maxCallDuration * 1000;
|
|
@@ -4781,13 +5001,13 @@ function useSessionRemaining() {
|
|
|
4781
5001
|
}
|
|
4782
5002
|
|
|
4783
5003
|
// src/components/ChatHeader.tsx
|
|
4784
|
-
import { useContext as useContext12, useRef as
|
|
5004
|
+
import { useContext as useContext12, useRef as useRef19 } from "react";
|
|
4785
5005
|
|
|
4786
5006
|
// src/hooks/useElapsedSeconds.ts
|
|
4787
|
-
import { useEffect as
|
|
5007
|
+
import { useEffect as useEffect24, useState as useState17 } from "react";
|
|
4788
5008
|
function useElapsedSeconds(isRunning) {
|
|
4789
|
-
const [elapsed, setElapsed] =
|
|
4790
|
-
|
|
5009
|
+
const [elapsed, setElapsed] = useState17(0);
|
|
5010
|
+
useEffect24(() => {
|
|
4791
5011
|
if (!isRunning) {
|
|
4792
5012
|
setElapsed(0);
|
|
4793
5013
|
return;
|
|
@@ -4804,7 +5024,7 @@ function useElapsedSeconds(isRunning) {
|
|
|
4804
5024
|
|
|
4805
5025
|
// src/hooks/useTextMode.ts
|
|
4806
5026
|
import { useLocalParticipant as useLocalParticipant11 } from "@livekit/components-react/hooks";
|
|
4807
|
-
import { useCallback as
|
|
5027
|
+
import { useCallback as useCallback15, useContext as useContext11, useRef as useRef18 } from "react";
|
|
4808
5028
|
var textEncoder6 = new TextEncoder;
|
|
4809
5029
|
function useTextMode() {
|
|
4810
5030
|
const ctx = useContext11(LiveAgentContext);
|
|
@@ -4813,8 +5033,8 @@ function useTextMode() {
|
|
|
4813
5033
|
}
|
|
4814
5034
|
const { textMode, setTextModeState, sidebarTab, setSidebarTab } = ctx;
|
|
4815
5035
|
const { localParticipant } = useLocalParticipant11();
|
|
4816
|
-
const confirmedTextModeRef =
|
|
4817
|
-
const toggleTextMode =
|
|
5036
|
+
const confirmedTextModeRef = useRef18(false);
|
|
5037
|
+
const toggleTextMode = useCallback15(async () => {
|
|
4818
5038
|
const next = !textMode;
|
|
4819
5039
|
setTextModeState(next);
|
|
4820
5040
|
if (next && sidebarTab === "agenda") {
|
|
@@ -4836,7 +5056,7 @@ function useTextMode() {
|
|
|
4836
5056
|
}
|
|
4837
5057
|
|
|
4838
5058
|
// src/components/ChatHeader.tsx
|
|
4839
|
-
import { jsx as
|
|
5059
|
+
import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
4840
5060
|
function ChatHeader() {
|
|
4841
5061
|
const ctx = useContext12(LiveAgentContext);
|
|
4842
5062
|
if (!ctx) {
|
|
@@ -4854,37 +5074,37 @@ function ChatHeader() {
|
|
|
4854
5074
|
setIsDragging
|
|
4855
5075
|
} = ctx;
|
|
4856
5076
|
const elapsed = useElapsedSeconds(isConnected);
|
|
4857
|
-
const headerRef =
|
|
5077
|
+
const headerRef = useRef19(null);
|
|
4858
5078
|
const followsPanel = variant === "floating" && isPanelOpen;
|
|
4859
5079
|
const dragFollowers = followsPanel ? [panelRef, controlBarRef] : null;
|
|
4860
5080
|
const { wasDraggedRef } = useLauncherDrag(headerRef, commitLauncherDrop, dragFollowers, setIsDragging);
|
|
4861
|
-
return /* @__PURE__ */
|
|
5081
|
+
return /* @__PURE__ */ jsxs11("header", {
|
|
4862
5082
|
ref: headerRef,
|
|
4863
5083
|
className: cn("skippr:sticky skippr:top-0 skippr:z-10 skippr:flex skippr:shrink-0 skippr:items-center skippr:justify-between skippr:border-b skippr:border-border skippr:bg-primary skippr:px-4 skippr:py-3", followsPanel && "skippr:cursor-grab skippr:touch-none skippr:select-none"),
|
|
4864
5084
|
children: [
|
|
4865
|
-
/* @__PURE__ */
|
|
5085
|
+
/* @__PURE__ */ jsxs11("div", {
|
|
4866
5086
|
className: "skippr:flex skippr:items-center skippr:gap-3",
|
|
4867
5087
|
children: [
|
|
4868
|
-
isConnected && /* @__PURE__ */
|
|
4869
|
-
isConnected && /* @__PURE__ */
|
|
5088
|
+
isConnected && /* @__PURE__ */ jsx14(HeaderModeToggle, {}),
|
|
5089
|
+
isConnected && /* @__PURE__ */ jsxs11("div", {
|
|
4870
5090
|
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",
|
|
4871
5091
|
children: [
|
|
4872
|
-
/* @__PURE__ */
|
|
5092
|
+
/* @__PURE__ */ jsxs11("span", {
|
|
4873
5093
|
className: "skippr:relative skippr:flex skippr:size-1.5",
|
|
4874
5094
|
children: [
|
|
4875
|
-
/* @__PURE__ */
|
|
5095
|
+
/* @__PURE__ */ jsx14("span", {
|
|
4876
5096
|
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"
|
|
4877
5097
|
}),
|
|
4878
|
-
/* @__PURE__ */
|
|
5098
|
+
/* @__PURE__ */ jsx14("span", {
|
|
4879
5099
|
className: "skippr:relative skippr:inline-flex skippr:size-1.5 skippr:rounded-full skippr:bg-red-400"
|
|
4880
5100
|
})
|
|
4881
5101
|
]
|
|
4882
5102
|
}),
|
|
4883
|
-
/* @__PURE__ */
|
|
5103
|
+
/* @__PURE__ */ jsx14("span", {
|
|
4884
5104
|
className: "skippr:text-[10px] skippr:font-medium skippr:text-primary-foreground",
|
|
4885
5105
|
children: "REC"
|
|
4886
5106
|
}),
|
|
4887
|
-
/* @__PURE__ */
|
|
5107
|
+
/* @__PURE__ */ jsx14("span", {
|
|
4888
5108
|
className: "skippr:text-[10px] skippr:font-mono skippr:text-primary-foreground",
|
|
4889
5109
|
children: formatTime(elapsed)
|
|
4890
5110
|
})
|
|
@@ -4892,7 +5112,7 @@ function ChatHeader() {
|
|
|
4892
5112
|
})
|
|
4893
5113
|
]
|
|
4894
5114
|
}),
|
|
4895
|
-
minimizable && /* @__PURE__ */
|
|
5115
|
+
minimizable && /* @__PURE__ */ jsx14("button", {
|
|
4896
5116
|
type: "button",
|
|
4897
5117
|
onClick: () => {
|
|
4898
5118
|
if (!wasDraggedRef.current)
|
|
@@ -4901,7 +5121,7 @@ function ChatHeader() {
|
|
|
4901
5121
|
"aria-label": "Close",
|
|
4902
5122
|
title: "Close",
|
|
4903
5123
|
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",
|
|
4904
|
-
children: /* @__PURE__ */
|
|
5124
|
+
children: /* @__PURE__ */ jsx14(X, {
|
|
4905
5125
|
className: "skippr:h-4 skippr:w-4"
|
|
4906
5126
|
})
|
|
4907
5127
|
})
|
|
@@ -4911,12 +5131,12 @@ function ChatHeader() {
|
|
|
4911
5131
|
function HeaderModeToggle() {
|
|
4912
5132
|
const { textMode, toggleTextMode } = useTextMode();
|
|
4913
5133
|
const { isHeld } = useSessionHoldContext();
|
|
4914
|
-
return /* @__PURE__ */
|
|
5134
|
+
return /* @__PURE__ */ jsxs11("fieldset", {
|
|
4915
5135
|
"aria-label": "Response mode",
|
|
4916
5136
|
disabled: isHeld,
|
|
4917
5137
|
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",
|
|
4918
5138
|
children: [
|
|
4919
|
-
/* @__PURE__ */
|
|
5139
|
+
/* @__PURE__ */ jsx14("button", {
|
|
4920
5140
|
type: "button",
|
|
4921
5141
|
"aria-pressed": !textMode,
|
|
4922
5142
|
disabled: isHeld,
|
|
@@ -4927,7 +5147,7 @@ function HeaderModeToggle() {
|
|
|
4927
5147
|
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"),
|
|
4928
5148
|
children: "Voice"
|
|
4929
5149
|
}),
|
|
4930
|
-
/* @__PURE__ */
|
|
5150
|
+
/* @__PURE__ */ jsx14("button", {
|
|
4931
5151
|
type: "button",
|
|
4932
5152
|
"aria-pressed": textMode,
|
|
4933
5153
|
disabled: isHeld,
|
|
@@ -4943,26 +5163,26 @@ function HeaderModeToggle() {
|
|
|
4943
5163
|
}
|
|
4944
5164
|
|
|
4945
5165
|
// src/components/LoadingDots.tsx
|
|
4946
|
-
import { jsx as
|
|
5166
|
+
import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
4947
5167
|
function LoadingDots({ label }) {
|
|
4948
|
-
return /* @__PURE__ */
|
|
5168
|
+
return /* @__PURE__ */ jsxs12("div", {
|
|
4949
5169
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:py-4",
|
|
4950
5170
|
children: [
|
|
4951
|
-
/* @__PURE__ */
|
|
5171
|
+
/* @__PURE__ */ jsxs12("div", {
|
|
4952
5172
|
className: "skippr:flex skippr:gap-1",
|
|
4953
5173
|
children: [
|
|
4954
|
-
/* @__PURE__ */
|
|
5174
|
+
/* @__PURE__ */ jsx15("span", {
|
|
4955
5175
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
4956
5176
|
}),
|
|
4957
|
-
/* @__PURE__ */
|
|
5177
|
+
/* @__PURE__ */ jsx15("span", {
|
|
4958
5178
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
4959
5179
|
}),
|
|
4960
|
-
/* @__PURE__ */
|
|
5180
|
+
/* @__PURE__ */ jsx15("span", {
|
|
4961
5181
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
4962
5182
|
})
|
|
4963
5183
|
]
|
|
4964
5184
|
}),
|
|
4965
|
-
/* @__PURE__ */
|
|
5185
|
+
/* @__PURE__ */ jsx15("p", {
|
|
4966
5186
|
className: "skippr:text-xs skippr:text-muted-foreground",
|
|
4967
5187
|
children: label
|
|
4968
5188
|
})
|
|
@@ -4971,11 +5191,11 @@ function LoadingDots({ label }) {
|
|
|
4971
5191
|
}
|
|
4972
5192
|
|
|
4973
5193
|
// src/components/LoginFlow.tsx
|
|
4974
|
-
import { useCallback as
|
|
5194
|
+
import { useCallback as useCallback16, useEffect as useEffect25, useRef as useRef20, useState as useState18 } from "react";
|
|
4975
5195
|
|
|
4976
5196
|
// src/components/ui/button.tsx
|
|
4977
5197
|
import { forwardRef as forwardRef3 } from "react";
|
|
4978
|
-
import { jsx as
|
|
5198
|
+
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
4979
5199
|
var variantClasses = {
|
|
4980
5200
|
default: "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90",
|
|
4981
5201
|
destructive: "skippr:bg-destructive skippr:text-white skippr:hover:bg-destructive/90",
|
|
@@ -4994,7 +5214,7 @@ var sizeClasses = {
|
|
|
4994
5214
|
"icon-lg": "skippr:size-10"
|
|
4995
5215
|
};
|
|
4996
5216
|
var Button = forwardRef3(({ className, variant = "default", size = "default", ...props }, ref) => {
|
|
4997
|
-
return /* @__PURE__ */
|
|
5217
|
+
return /* @__PURE__ */ jsx16("button", {
|
|
4998
5218
|
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),
|
|
4999
5219
|
ref,
|
|
5000
5220
|
...props
|
|
@@ -5003,28 +5223,28 @@ var Button = forwardRef3(({ className, variant = "default", size = "default", ..
|
|
|
5003
5223
|
Button.displayName = "Button";
|
|
5004
5224
|
|
|
5005
5225
|
// src/components/LoginFlow.tsx
|
|
5006
|
-
import { jsx as
|
|
5226
|
+
import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
5007
5227
|
var OTP_LENGTH = 6;
|
|
5008
5228
|
var DIGIT_KEYS = ["d0", "d1", "d2", "d3", "d4", "d5"];
|
|
5009
5229
|
function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
5010
|
-
const [step, setStep] =
|
|
5011
|
-
const [email, setEmail] =
|
|
5012
|
-
const handleRequestOtp =
|
|
5230
|
+
const [step, setStep] = useState18("email");
|
|
5231
|
+
const [email, setEmail] = useState18("");
|
|
5232
|
+
const handleRequestOtp = useCallback16(async (emailValue) => {
|
|
5013
5233
|
const success = await requestOtp(emailValue);
|
|
5014
5234
|
if (success)
|
|
5015
5235
|
setStep("otp");
|
|
5016
5236
|
}, [requestOtp]);
|
|
5017
|
-
const handleVerifyOtp =
|
|
5237
|
+
const handleVerifyOtp = useCallback16(async (code) => {
|
|
5018
5238
|
await verifyOtp(email, code);
|
|
5019
5239
|
}, [verifyOtp, email]);
|
|
5020
|
-
const handleBack =
|
|
5240
|
+
const handleBack = useCallback16(() => {
|
|
5021
5241
|
setStep("email");
|
|
5022
5242
|
}, []);
|
|
5023
|
-
const handleResend =
|
|
5243
|
+
const handleResend = useCallback16(async () => {
|
|
5024
5244
|
await requestOtp(email);
|
|
5025
5245
|
}, [requestOtp, email]);
|
|
5026
5246
|
if (step === "otp") {
|
|
5027
|
-
return /* @__PURE__ */
|
|
5247
|
+
return /* @__PURE__ */ jsx17(OtpStep, {
|
|
5028
5248
|
email,
|
|
5029
5249
|
onSubmit: handleVerifyOtp,
|
|
5030
5250
|
onResend: handleResend,
|
|
@@ -5033,7 +5253,7 @@ function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
|
5033
5253
|
isSubmitting
|
|
5034
5254
|
});
|
|
5035
5255
|
}
|
|
5036
|
-
return /* @__PURE__ */
|
|
5256
|
+
return /* @__PURE__ */ jsx17(EmailStep, {
|
|
5037
5257
|
email,
|
|
5038
5258
|
onEmailChange: setEmail,
|
|
5039
5259
|
onSubmit: handleRequestOtp,
|
|
@@ -5047,30 +5267,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
5047
5267
|
if (email.trim())
|
|
5048
5268
|
onSubmit(email.trim());
|
|
5049
5269
|
}
|
|
5050
|
-
return /* @__PURE__ */
|
|
5270
|
+
return /* @__PURE__ */ jsxs13("div", {
|
|
5051
5271
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
|
|
5052
5272
|
children: [
|
|
5053
|
-
/* @__PURE__ */
|
|
5273
|
+
/* @__PURE__ */ jsxs13("div", {
|
|
5054
5274
|
className: "skippr:mb-4 skippr:text-center",
|
|
5055
5275
|
children: [
|
|
5056
|
-
/* @__PURE__ */
|
|
5276
|
+
/* @__PURE__ */ jsx17(Mail, {
|
|
5057
5277
|
className: "skippr:mx-auto skippr:mb-2 skippr:size-6 skippr:text-primary"
|
|
5058
5278
|
}),
|
|
5059
|
-
/* @__PURE__ */
|
|
5279
|
+
/* @__PURE__ */ jsx17("p", {
|
|
5060
5280
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
5061
5281
|
children: "Sign in to continue"
|
|
5062
5282
|
}),
|
|
5063
|
-
/* @__PURE__ */
|
|
5283
|
+
/* @__PURE__ */ jsx17("p", {
|
|
5064
5284
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
5065
5285
|
children: "Your email will be used to identify you across sessions"
|
|
5066
5286
|
})
|
|
5067
5287
|
]
|
|
5068
5288
|
}),
|
|
5069
|
-
/* @__PURE__ */
|
|
5289
|
+
/* @__PURE__ */ jsxs13("form", {
|
|
5070
5290
|
onSubmit: handleSubmit,
|
|
5071
5291
|
className: "skippr:flex skippr:flex-col skippr:gap-3",
|
|
5072
5292
|
children: [
|
|
5073
|
-
/* @__PURE__ */
|
|
5293
|
+
/* @__PURE__ */ jsx17("input", {
|
|
5074
5294
|
type: "email",
|
|
5075
5295
|
placeholder: "you@example.com",
|
|
5076
5296
|
value: email,
|
|
@@ -5079,15 +5299,15 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
5079
5299
|
required: true,
|
|
5080
5300
|
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"
|
|
5081
5301
|
}),
|
|
5082
|
-
/* @__PURE__ */
|
|
5302
|
+
/* @__PURE__ */ jsx17(Button, {
|
|
5083
5303
|
type: "submit",
|
|
5084
5304
|
disabled: isSubmitting || !email.trim(),
|
|
5085
5305
|
className: "skippr:w-full",
|
|
5086
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
5306
|
+
children: isSubmitting ? /* @__PURE__ */ jsx17(LoaderCircle, {
|
|
5087
5307
|
className: "skippr:size-4 skippr:animate-spin"
|
|
5088
5308
|
}) : "Continue"
|
|
5089
5309
|
}),
|
|
5090
|
-
error && /* @__PURE__ */
|
|
5310
|
+
error && /* @__PURE__ */ jsx17("p", {
|
|
5091
5311
|
className: "skippr:text-xs skippr:text-center skippr:text-destructive",
|
|
5092
5312
|
children: error
|
|
5093
5313
|
})
|
|
@@ -5097,30 +5317,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
5097
5317
|
});
|
|
5098
5318
|
}
|
|
5099
5319
|
function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
5100
|
-
const [digits, setDigits] =
|
|
5101
|
-
const [resendCooldown, setResendCooldown] =
|
|
5102
|
-
const inputRefs =
|
|
5103
|
-
const submittedRef =
|
|
5104
|
-
|
|
5320
|
+
const [digits, setDigits] = useState18(Array(OTP_LENGTH).fill(""));
|
|
5321
|
+
const [resendCooldown, setResendCooldown] = useState18(0);
|
|
5322
|
+
const inputRefs = useRef20([]);
|
|
5323
|
+
const submittedRef = useRef20(false);
|
|
5324
|
+
useEffect25(() => {
|
|
5105
5325
|
inputRefs.current[0]?.focus();
|
|
5106
5326
|
}, []);
|
|
5107
|
-
|
|
5327
|
+
useEffect25(() => {
|
|
5108
5328
|
if (error)
|
|
5109
5329
|
submittedRef.current = false;
|
|
5110
5330
|
}, [error]);
|
|
5111
|
-
|
|
5331
|
+
useEffect25(() => {
|
|
5112
5332
|
if (resendCooldown <= 0)
|
|
5113
5333
|
return;
|
|
5114
5334
|
const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
|
|
5115
5335
|
return () => clearTimeout(timer);
|
|
5116
5336
|
}, [resendCooldown]);
|
|
5117
|
-
const submitCode =
|
|
5337
|
+
const submitCode = useCallback16((code) => {
|
|
5118
5338
|
if (submittedRef.current || isSubmitting)
|
|
5119
5339
|
return;
|
|
5120
5340
|
submittedRef.current = true;
|
|
5121
5341
|
onSubmit(code);
|
|
5122
5342
|
}, [onSubmit, isSubmitting]);
|
|
5123
|
-
const handleDigitChange =
|
|
5343
|
+
const handleDigitChange = useCallback16((index2, value) => {
|
|
5124
5344
|
const digit = value.replace(/\D/g, "").slice(-1);
|
|
5125
5345
|
const newDigits = [...digits];
|
|
5126
5346
|
newDigits[index2] = digit;
|
|
@@ -5134,12 +5354,12 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
5134
5354
|
submitCode(code);
|
|
5135
5355
|
}
|
|
5136
5356
|
}, [digits, submitCode]);
|
|
5137
|
-
const handleKeyDown =
|
|
5357
|
+
const handleKeyDown = useCallback16((index2, e) => {
|
|
5138
5358
|
if (e.key === "Backspace" && !digits[index2] && index2 > 0) {
|
|
5139
5359
|
inputRefs.current[index2 - 1]?.focus();
|
|
5140
5360
|
}
|
|
5141
5361
|
}, [digits]);
|
|
5142
|
-
const handlePaste =
|
|
5362
|
+
const handlePaste = useCallback16((e) => {
|
|
5143
5363
|
e.preventDefault();
|
|
5144
5364
|
const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, OTP_LENGTH);
|
|
5145
5365
|
if (pasted.length > 0) {
|
|
@@ -5167,22 +5387,22 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
5167
5387
|
submittedRef.current = false;
|
|
5168
5388
|
inputRefs.current[0]?.focus();
|
|
5169
5389
|
}
|
|
5170
|
-
return /* @__PURE__ */
|
|
5390
|
+
return /* @__PURE__ */ jsxs13("div", {
|
|
5171
5391
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
|
|
5172
5392
|
children: [
|
|
5173
|
-
/* @__PURE__ */
|
|
5393
|
+
/* @__PURE__ */ jsxs13("div", {
|
|
5174
5394
|
className: "skippr:mb-4 skippr:text-center",
|
|
5175
5395
|
children: [
|
|
5176
|
-
/* @__PURE__ */
|
|
5396
|
+
/* @__PURE__ */ jsx17("p", {
|
|
5177
5397
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
5178
5398
|
children: "Enter verification code"
|
|
5179
5399
|
}),
|
|
5180
|
-
/* @__PURE__ */
|
|
5400
|
+
/* @__PURE__ */ jsxs13("p", {
|
|
5181
5401
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
5182
5402
|
children: [
|
|
5183
5403
|
"We sent a 6-digit code to",
|
|
5184
5404
|
" ",
|
|
5185
|
-
/* @__PURE__ */
|
|
5405
|
+
/* @__PURE__ */ jsx17("span", {
|
|
5186
5406
|
className: "skippr:font-medium skippr:text-foreground",
|
|
5187
5407
|
children: email
|
|
5188
5408
|
})
|
|
@@ -5190,13 +5410,13 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
5190
5410
|
})
|
|
5191
5411
|
]
|
|
5192
5412
|
}),
|
|
5193
|
-
/* @__PURE__ */
|
|
5413
|
+
/* @__PURE__ */ jsxs13("form", {
|
|
5194
5414
|
onSubmit: handleSubmit,
|
|
5195
5415
|
className: "skippr:flex skippr:flex-col skippr:gap-3",
|
|
5196
5416
|
children: [
|
|
5197
|
-
/* @__PURE__ */
|
|
5417
|
+
/* @__PURE__ */ jsx17("div", {
|
|
5198
5418
|
className: "skippr:flex skippr:justify-center skippr:gap-1.5",
|
|
5199
|
-
children: digits.map((digit, index2) => /* @__PURE__ */
|
|
5419
|
+
children: digits.map((digit, index2) => /* @__PURE__ */ jsx17("input", {
|
|
5200
5420
|
ref: (el) => {
|
|
5201
5421
|
inputRefs.current[index2] = el;
|
|
5202
5422
|
},
|
|
@@ -5211,29 +5431,29 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
5211
5431
|
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"
|
|
5212
5432
|
}, DIGIT_KEYS[index2]))
|
|
5213
5433
|
}),
|
|
5214
|
-
error && /* @__PURE__ */
|
|
5434
|
+
error && /* @__PURE__ */ jsx17("p", {
|
|
5215
5435
|
className: "skippr:text-xs skippr:text-center skippr:text-destructive",
|
|
5216
5436
|
children: error
|
|
5217
5437
|
}),
|
|
5218
|
-
/* @__PURE__ */
|
|
5438
|
+
/* @__PURE__ */ jsx17(Button, {
|
|
5219
5439
|
type: "submit",
|
|
5220
5440
|
disabled: isSubmitting || digits.join("").length !== OTP_LENGTH,
|
|
5221
5441
|
className: "skippr:w-full",
|
|
5222
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
5442
|
+
children: isSubmitting ? /* @__PURE__ */ jsx17(LoaderCircle, {
|
|
5223
5443
|
className: "skippr:size-4 skippr:animate-spin"
|
|
5224
5444
|
}) : "Verify"
|
|
5225
5445
|
}),
|
|
5226
|
-
/* @__PURE__ */
|
|
5446
|
+
/* @__PURE__ */ jsxs13("div", {
|
|
5227
5447
|
className: "skippr:flex skippr:items-center skippr:justify-between skippr:text-xs",
|
|
5228
5448
|
children: [
|
|
5229
|
-
/* @__PURE__ */
|
|
5449
|
+
/* @__PURE__ */ jsx17("button", {
|
|
5230
5450
|
type: "button",
|
|
5231
5451
|
onClick: onBack,
|
|
5232
5452
|
disabled: isSubmitting,
|
|
5233
5453
|
className: "skippr:text-muted-foreground hover:skippr:text-foreground skippr:transition-colors disabled:skippr:opacity-50",
|
|
5234
5454
|
children: "Change email"
|
|
5235
5455
|
}),
|
|
5236
|
-
/* @__PURE__ */
|
|
5456
|
+
/* @__PURE__ */ jsx17("button", {
|
|
5237
5457
|
type: "button",
|
|
5238
5458
|
onClick: handleResend,
|
|
5239
5459
|
disabled: isSubmitting || resendCooldown > 0,
|
|
@@ -5249,17 +5469,17 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
5249
5469
|
}
|
|
5250
5470
|
|
|
5251
5471
|
// src/components/MessageList.tsx
|
|
5252
|
-
import { useCallback as
|
|
5472
|
+
import { useCallback as useCallback17, useLayoutEffect as useLayoutEffect3, useRef as useRef22, useState as useState20 } from "react";
|
|
5253
5473
|
|
|
5254
5474
|
// src/components/ChatInput.tsx
|
|
5255
|
-
import { useEffect as
|
|
5256
|
-
import { jsx as
|
|
5475
|
+
import { useEffect as useEffect26, useRef as useRef21, useState as useState19 } from "react";
|
|
5476
|
+
import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
5257
5477
|
var MAX_INPUT_HEIGHT = 60;
|
|
5258
5478
|
function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
5259
|
-
const [inputText, setInputText] =
|
|
5260
|
-
const textareaRef =
|
|
5479
|
+
const [inputText, setInputText] = useState19("");
|
|
5480
|
+
const textareaRef = useRef21(null);
|
|
5261
5481
|
const canSend = inputText.trim().length > 0 && !isSendingChat;
|
|
5262
|
-
|
|
5482
|
+
useEffect26(() => {
|
|
5263
5483
|
if (autoFocus)
|
|
5264
5484
|
textareaRef.current?.focus();
|
|
5265
5485
|
}, [autoFocus]);
|
|
@@ -5290,13 +5510,13 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
5290
5510
|
handleSubmit(e);
|
|
5291
5511
|
}
|
|
5292
5512
|
}
|
|
5293
|
-
return /* @__PURE__ */
|
|
5513
|
+
return /* @__PURE__ */ jsx18("form", {
|
|
5294
5514
|
onSubmit: handleSubmit,
|
|
5295
5515
|
className: "skippr:border-t skippr:border-border skippr:p-3",
|
|
5296
|
-
children: /* @__PURE__ */
|
|
5516
|
+
children: /* @__PURE__ */ jsxs14("div", {
|
|
5297
5517
|
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",
|
|
5298
5518
|
children: [
|
|
5299
|
-
/* @__PURE__ */
|
|
5519
|
+
/* @__PURE__ */ jsx18("textarea", {
|
|
5300
5520
|
ref: textareaRef,
|
|
5301
5521
|
rows: 1,
|
|
5302
5522
|
value: inputText,
|
|
@@ -5306,12 +5526,12 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
5306
5526
|
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",
|
|
5307
5527
|
style: { maxHeight: `${MAX_INPUT_HEIGHT}px` }
|
|
5308
5528
|
}),
|
|
5309
|
-
/* @__PURE__ */
|
|
5529
|
+
/* @__PURE__ */ jsx18("button", {
|
|
5310
5530
|
type: "submit",
|
|
5311
5531
|
disabled: !canSend,
|
|
5312
5532
|
"aria-label": "Send message",
|
|
5313
5533
|
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"),
|
|
5314
|
-
children: /* @__PURE__ */
|
|
5534
|
+
children: /* @__PURE__ */ jsx18(Send, {
|
|
5315
5535
|
className: "skippr:size-3.5"
|
|
5316
5536
|
})
|
|
5317
5537
|
})
|
|
@@ -5321,7 +5541,7 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
5321
5541
|
}
|
|
5322
5542
|
|
|
5323
5543
|
// src/components/ChatMessage.tsx
|
|
5324
|
-
import { jsx as
|
|
5544
|
+
import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
5325
5545
|
function formatTimestamp(ts) {
|
|
5326
5546
|
return new Date(ts).toLocaleTimeString("en-US", {
|
|
5327
5547
|
hour: "numeric",
|
|
@@ -5331,16 +5551,16 @@ function formatTimestamp(ts) {
|
|
|
5331
5551
|
}
|
|
5332
5552
|
function ChatMessage({ message }) {
|
|
5333
5553
|
const isAgent = message.role === "assistant";
|
|
5334
|
-
return /* @__PURE__ */
|
|
5554
|
+
return /* @__PURE__ */ jsx19("div", {
|
|
5335
5555
|
className: cn("skippr:flex skippr:gap-2", isAgent ? "skippr:items-start" : "skippr:justify-end"),
|
|
5336
|
-
children: /* @__PURE__ */
|
|
5556
|
+
children: /* @__PURE__ */ jsxs15("div", {
|
|
5337
5557
|
className: cn("skippr:flex skippr:max-w-[80%] skippr:flex-col", isAgent ? "skippr:items-start" : "skippr:items-end"),
|
|
5338
5558
|
children: [
|
|
5339
|
-
/* @__PURE__ */
|
|
5559
|
+
/* @__PURE__ */ jsx19("div", {
|
|
5340
5560
|
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"),
|
|
5341
5561
|
children: message.content
|
|
5342
5562
|
}),
|
|
5343
|
-
message.timestamp && /* @__PURE__ */
|
|
5563
|
+
message.timestamp && /* @__PURE__ */ jsx19("span", {
|
|
5344
5564
|
className: "skippr:mt-1 skippr:px-1 skippr:text-[10px] skippr:text-muted-foreground/60",
|
|
5345
5565
|
children: formatTimestamp(message.timestamp)
|
|
5346
5566
|
})
|
|
@@ -5350,70 +5570,70 @@ function ChatMessage({ message }) {
|
|
|
5350
5570
|
}
|
|
5351
5571
|
|
|
5352
5572
|
// src/components/PlanCard.tsx
|
|
5353
|
-
import { useEffect as
|
|
5354
|
-
import { jsx as
|
|
5573
|
+
import { useEffect as useEffect27 } from "react";
|
|
5574
|
+
import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
5355
5575
|
var APPROVE_MESSAGE = "Yes, go ahead.";
|
|
5356
5576
|
var CANCEL_MESSAGE = "No, cancel that.";
|
|
5357
5577
|
var COMPLETED_CARD_VISIBLE_MS = 2500;
|
|
5358
5578
|
function StepIcon({ status }) {
|
|
5359
5579
|
if (status === "done") {
|
|
5360
|
-
return /* @__PURE__ */
|
|
5580
|
+
return /* @__PURE__ */ jsx20(CircleCheck, {
|
|
5361
5581
|
className: "skippr:size-4 skippr:text-chart-3"
|
|
5362
5582
|
});
|
|
5363
5583
|
}
|
|
5364
5584
|
if (status === "failed") {
|
|
5365
|
-
return /* @__PURE__ */
|
|
5585
|
+
return /* @__PURE__ */ jsx20(CircleX, {
|
|
5366
5586
|
className: "skippr:size-4 skippr:text-destructive"
|
|
5367
5587
|
});
|
|
5368
5588
|
}
|
|
5369
5589
|
if (status === "active") {
|
|
5370
|
-
return /* @__PURE__ */
|
|
5590
|
+
return /* @__PURE__ */ jsx20(Circle, {
|
|
5371
5591
|
className: "skippr:size-4 skippr:fill-primary/30 skippr:text-primary"
|
|
5372
5592
|
});
|
|
5373
5593
|
}
|
|
5374
|
-
return /* @__PURE__ */
|
|
5594
|
+
return /* @__PURE__ */ jsx20(Circle, {
|
|
5375
5595
|
className: "skippr:size-4 skippr:text-muted-foreground/30"
|
|
5376
5596
|
});
|
|
5377
5597
|
}
|
|
5378
5598
|
function PlanCard({ plan, sendChatMessage, onDismiss }) {
|
|
5379
5599
|
const awaitingApproval = plan.state === "proposed";
|
|
5380
|
-
|
|
5600
|
+
useEffect27(() => {
|
|
5381
5601
|
if (plan.state !== "completed")
|
|
5382
5602
|
return;
|
|
5383
5603
|
const timer = setTimeout(onDismiss, COMPLETED_CARD_VISIBLE_MS);
|
|
5384
5604
|
return () => clearTimeout(timer);
|
|
5385
5605
|
}, [plan.state, onDismiss]);
|
|
5386
|
-
return /* @__PURE__ */
|
|
5606
|
+
return /* @__PURE__ */ jsxs16("div", {
|
|
5387
5607
|
className: "skippr:rounded-2xl skippr:rounded-tl-md skippr:bg-card skippr:p-3.5 skippr:ring-2 skippr:ring-brand",
|
|
5388
5608
|
children: [
|
|
5389
|
-
/* @__PURE__ */
|
|
5609
|
+
/* @__PURE__ */ jsx20("p", {
|
|
5390
5610
|
className: "skippr:mb-3 skippr:text-sm skippr:font-semibold skippr:leading-snug skippr:text-foreground",
|
|
5391
5611
|
children: "Plan"
|
|
5392
5612
|
}),
|
|
5393
|
-
/* @__PURE__ */
|
|
5613
|
+
/* @__PURE__ */ jsx20("div", {
|
|
5394
5614
|
className: "skippr:space-y-2",
|
|
5395
|
-
children: plan.steps.map((step) => /* @__PURE__ */
|
|
5615
|
+
children: plan.steps.map((step) => /* @__PURE__ */ jsxs16("div", {
|
|
5396
5616
|
className: "skippr:flex skippr:items-center skippr:gap-2",
|
|
5397
5617
|
children: [
|
|
5398
|
-
/* @__PURE__ */
|
|
5618
|
+
/* @__PURE__ */ jsx20(StepIcon, {
|
|
5399
5619
|
status: step.status
|
|
5400
5620
|
}),
|
|
5401
|
-
/* @__PURE__ */
|
|
5621
|
+
/* @__PURE__ */ jsx20("p", {
|
|
5402
5622
|
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"),
|
|
5403
5623
|
children: step.label
|
|
5404
5624
|
})
|
|
5405
5625
|
]
|
|
5406
5626
|
}, step.index))
|
|
5407
5627
|
}),
|
|
5408
|
-
awaitingApproval && /* @__PURE__ */
|
|
5628
|
+
awaitingApproval && /* @__PURE__ */ jsxs16("div", {
|
|
5409
5629
|
className: "skippr:mt-3.5 skippr:flex skippr:gap-2",
|
|
5410
5630
|
children: [
|
|
5411
|
-
/* @__PURE__ */
|
|
5631
|
+
/* @__PURE__ */ jsx20(Button, {
|
|
5412
5632
|
className: "skippr:flex-1 skippr:py-2",
|
|
5413
5633
|
onClick: () => sendChatMessage(APPROVE_MESSAGE),
|
|
5414
5634
|
children: "Approve"
|
|
5415
5635
|
}),
|
|
5416
|
-
/* @__PURE__ */
|
|
5636
|
+
/* @__PURE__ */ jsx20(Button, {
|
|
5417
5637
|
variant: "outline",
|
|
5418
5638
|
className: "skippr:flex-1 skippr:py-2",
|
|
5419
5639
|
onClick: () => sendChatMessage(CANCEL_MESSAGE),
|
|
@@ -5426,26 +5646,26 @@ function PlanCard({ plan, sendChatMessage, onDismiss }) {
|
|
|
5426
5646
|
}
|
|
5427
5647
|
|
|
5428
5648
|
// src/components/TypingIndicator.tsx
|
|
5429
|
-
import { jsx as
|
|
5649
|
+
import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
5430
5650
|
function TypingIndicator() {
|
|
5431
|
-
return /* @__PURE__ */
|
|
5651
|
+
return /* @__PURE__ */ jsx21("div", {
|
|
5432
5652
|
className: "skippr:flex skippr:items-start skippr:gap-2 skippr:animate-skippr-tab-fade",
|
|
5433
|
-
children: /* @__PURE__ */
|
|
5653
|
+
children: /* @__PURE__ */ jsxs17("div", {
|
|
5434
5654
|
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",
|
|
5435
5655
|
children: [
|
|
5436
|
-
/* @__PURE__ */
|
|
5656
|
+
/* @__PURE__ */ jsx21("span", {
|
|
5437
5657
|
children: "Agent is analyzing your screen"
|
|
5438
5658
|
}),
|
|
5439
|
-
/* @__PURE__ */
|
|
5659
|
+
/* @__PURE__ */ jsxs17("span", {
|
|
5440
5660
|
className: "skippr:inline-flex skippr:items-center skippr:gap-[2px]",
|
|
5441
5661
|
children: [
|
|
5442
|
-
/* @__PURE__ */
|
|
5662
|
+
/* @__PURE__ */ jsx21("span", {
|
|
5443
5663
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:0ms]"
|
|
5444
5664
|
}),
|
|
5445
|
-
/* @__PURE__ */
|
|
5665
|
+
/* @__PURE__ */ jsx21("span", {
|
|
5446
5666
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:200ms]"
|
|
5447
5667
|
}),
|
|
5448
|
-
/* @__PURE__ */
|
|
5668
|
+
/* @__PURE__ */ jsx21("span", {
|
|
5449
5669
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:400ms]"
|
|
5450
5670
|
})
|
|
5451
5671
|
]
|
|
@@ -5456,10 +5676,10 @@ function TypingIndicator() {
|
|
|
5456
5676
|
}
|
|
5457
5677
|
|
|
5458
5678
|
// src/components/MessageList.tsx
|
|
5459
|
-
import { jsx as
|
|
5679
|
+
import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
5460
5680
|
var BOTTOM_THRESHOLD_PX = 32;
|
|
5461
5681
|
function isPlanVisible(plan) {
|
|
5462
|
-
return !!plan && plan.steps.length > 0 && plan.state !== "abandoned";
|
|
5682
|
+
return !!plan && plan.steps.length > 0 && plan.state !== "abandoned" && plan.state !== "aborted";
|
|
5463
5683
|
}
|
|
5464
5684
|
function MessageList({
|
|
5465
5685
|
messages,
|
|
@@ -5470,17 +5690,17 @@ function MessageList({
|
|
|
5470
5690
|
autoFocus = false,
|
|
5471
5691
|
readOnly = false
|
|
5472
5692
|
}) {
|
|
5473
|
-
const containerRef =
|
|
5474
|
-
const isPinnedToBottom =
|
|
5475
|
-
const lastSeenMessageId =
|
|
5476
|
-
const [showJumpToLatest, setShowJumpToLatest] =
|
|
5693
|
+
const containerRef = useRef22(null);
|
|
5694
|
+
const isPinnedToBottom = useRef22(true);
|
|
5695
|
+
const lastSeenMessageId = useRef22(undefined);
|
|
5696
|
+
const [showJumpToLatest, setShowJumpToLatest] = useState20(false);
|
|
5477
5697
|
const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
|
|
5478
|
-
const [dismissedPlanId, setDismissedPlanId] =
|
|
5479
|
-
const dismissPlan =
|
|
5698
|
+
const [dismissedPlanId, setDismissedPlanId] = useState20(null);
|
|
5699
|
+
const dismissPlan = useCallback17(() => {
|
|
5480
5700
|
if (plan)
|
|
5481
5701
|
setDismissedPlanId(plan.planId);
|
|
5482
5702
|
}, [plan]);
|
|
5483
|
-
const handleScroll =
|
|
5703
|
+
const handleScroll = useCallback17(() => {
|
|
5484
5704
|
const container = containerRef.current;
|
|
5485
5705
|
if (!container)
|
|
5486
5706
|
return;
|
|
@@ -5489,7 +5709,7 @@ function MessageList({
|
|
|
5489
5709
|
isPinnedToBottom.current = pinned;
|
|
5490
5710
|
setShowJumpToLatest(!pinned);
|
|
5491
5711
|
}, []);
|
|
5492
|
-
const jumpToLatest =
|
|
5712
|
+
const jumpToLatest = useCallback17(() => {
|
|
5493
5713
|
const container = containerRef.current;
|
|
5494
5714
|
if (!container)
|
|
5495
5715
|
return;
|
|
@@ -5512,49 +5732,49 @@ function MessageList({
|
|
|
5512
5732
|
container.scrollTop = container.scrollHeight;
|
|
5513
5733
|
}, [messages.length, lastMessage?.content]);
|
|
5514
5734
|
const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
|
|
5515
|
-
return /* @__PURE__ */
|
|
5735
|
+
return /* @__PURE__ */ jsxs18("div", {
|
|
5516
5736
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
5517
5737
|
children: [
|
|
5518
|
-
/* @__PURE__ */
|
|
5738
|
+
/* @__PURE__ */ jsxs18("div", {
|
|
5519
5739
|
className: "skippr:relative skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
5520
5740
|
children: [
|
|
5521
|
-
/* @__PURE__ */
|
|
5741
|
+
/* @__PURE__ */ jsxs18("div", {
|
|
5522
5742
|
ref: containerRef,
|
|
5523
5743
|
onScroll: handleScroll,
|
|
5524
5744
|
className: "skippr:min-h-0 skippr:flex-1 skippr:space-y-4 skippr:overflow-y-auto skippr:p-4 skippr:[overflow-anchor:none]",
|
|
5525
5745
|
children: [
|
|
5526
|
-
messages.length === 0 && !showTyping && (readOnly ? /* @__PURE__ */
|
|
5746
|
+
messages.length === 0 && !showTyping && (readOnly ? /* @__PURE__ */ jsx22("p", {
|
|
5527
5747
|
className: "skippr:px-2 skippr:py-6 skippr:text-center skippr:text-sm skippr:text-muted-foreground",
|
|
5528
5748
|
children: "No messages in this conversation yet."
|
|
5529
|
-
}) : /* @__PURE__ */
|
|
5749
|
+
}) : /* @__PURE__ */ jsx22(LoadingDots, {
|
|
5530
5750
|
label: "Waiting for conversation to begin..."
|
|
5531
5751
|
})),
|
|
5532
|
-
messages.map((message) => /* @__PURE__ */
|
|
5752
|
+
messages.map((message) => /* @__PURE__ */ jsx22(ChatMessage, {
|
|
5533
5753
|
message
|
|
5534
5754
|
}, message.id)),
|
|
5535
|
-
showTyping && /* @__PURE__ */
|
|
5755
|
+
showTyping && /* @__PURE__ */ jsx22(TypingIndicator, {})
|
|
5536
5756
|
]
|
|
5537
5757
|
}),
|
|
5538
|
-
showJumpToLatest && /* @__PURE__ */
|
|
5758
|
+
showJumpToLatest && /* @__PURE__ */ jsx22("button", {
|
|
5539
5759
|
type: "button",
|
|
5540
5760
|
onClick: jumpToLatest,
|
|
5541
5761
|
"aria-label": "Jump to latest message",
|
|
5542
5762
|
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",
|
|
5543
|
-
children: /* @__PURE__ */
|
|
5763
|
+
children: /* @__PURE__ */ jsx22(ChevronDown, {
|
|
5544
5764
|
className: "skippr:size-4"
|
|
5545
5765
|
})
|
|
5546
5766
|
})
|
|
5547
5767
|
]
|
|
5548
5768
|
}),
|
|
5549
|
-
sendChatMessage && isPlanVisible(plan) && plan.planId !== dismissedPlanId && /* @__PURE__ */
|
|
5769
|
+
sendChatMessage && isPlanVisible(plan) && plan.planId !== dismissedPlanId && /* @__PURE__ */ jsx22("div", {
|
|
5550
5770
|
className: "skippr:shrink-0 skippr:border-t skippr:border-border skippr:p-3",
|
|
5551
|
-
children: /* @__PURE__ */
|
|
5771
|
+
children: /* @__PURE__ */ jsx22(PlanCard, {
|
|
5552
5772
|
plan,
|
|
5553
5773
|
sendChatMessage,
|
|
5554
5774
|
onDismiss: dismissPlan
|
|
5555
5775
|
}, plan.planId)
|
|
5556
5776
|
}),
|
|
5557
|
-
!readOnly && sendChatMessage && /* @__PURE__ */
|
|
5777
|
+
!readOnly && sendChatMessage && /* @__PURE__ */ jsx22(ChatInput, {
|
|
5558
5778
|
sendChatMessage,
|
|
5559
5779
|
isSendingChat,
|
|
5560
5780
|
autoFocus
|
|
@@ -5564,49 +5784,49 @@ function MessageList({
|
|
|
5564
5784
|
}
|
|
5565
5785
|
|
|
5566
5786
|
// src/components/SessionAgenda.tsx
|
|
5567
|
-
import { jsx as
|
|
5787
|
+
import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
5568
5788
|
function SessionAgenda({ phases, hasStarted }) {
|
|
5569
5789
|
if (phases.length === 0 || !hasStarted) {
|
|
5570
|
-
return /* @__PURE__ */
|
|
5790
|
+
return /* @__PURE__ */ jsx23("div", {
|
|
5571
5791
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
5572
|
-
children: /* @__PURE__ */
|
|
5792
|
+
children: /* @__PURE__ */ jsx23(LoadingDots, {
|
|
5573
5793
|
label: "Waiting for agenda to load..."
|
|
5574
5794
|
})
|
|
5575
5795
|
});
|
|
5576
5796
|
}
|
|
5577
|
-
return /* @__PURE__ */
|
|
5797
|
+
return /* @__PURE__ */ jsx23("div", {
|
|
5578
5798
|
className: "skippr:flex-1 skippr:overflow-y-auto skippr:px-4 skippr:py-4",
|
|
5579
|
-
children: /* @__PURE__ */
|
|
5799
|
+
children: /* @__PURE__ */ jsx23("div", {
|
|
5580
5800
|
className: "skippr:space-y-1",
|
|
5581
5801
|
children: phases.map((phase) => {
|
|
5582
5802
|
const isActive = phase.status === "active";
|
|
5583
5803
|
const isCompleted = phase.status === "completed";
|
|
5584
|
-
return /* @__PURE__ */
|
|
5804
|
+
return /* @__PURE__ */ jsxs19("div", {
|
|
5585
5805
|
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"),
|
|
5586
5806
|
children: [
|
|
5587
|
-
/* @__PURE__ */
|
|
5807
|
+
/* @__PURE__ */ jsx23("div", {
|
|
5588
5808
|
className: "skippr:mt-0.5",
|
|
5589
|
-
children: isCompleted ? /* @__PURE__ */
|
|
5809
|
+
children: isCompleted ? /* @__PURE__ */ jsx23(CircleCheck, {
|
|
5590
5810
|
className: "skippr:size-4 skippr:text-chart-3"
|
|
5591
|
-
}) : isActive ? /* @__PURE__ */
|
|
5811
|
+
}) : isActive ? /* @__PURE__ */ jsx23(Circle, {
|
|
5592
5812
|
className: "skippr:size-4 skippr:fill-primary/30 skippr:text-primary"
|
|
5593
|
-
}) : /* @__PURE__ */
|
|
5813
|
+
}) : /* @__PURE__ */ jsx23(Circle, {
|
|
5594
5814
|
className: "skippr:size-4 skippr:text-muted-foreground/30"
|
|
5595
5815
|
})
|
|
5596
5816
|
}),
|
|
5597
|
-
/* @__PURE__ */
|
|
5817
|
+
/* @__PURE__ */ jsxs19("div", {
|
|
5598
5818
|
className: "skippr:min-w-0 skippr:flex-1",
|
|
5599
5819
|
children: [
|
|
5600
|
-
/* @__PURE__ */
|
|
5820
|
+
/* @__PURE__ */ jsx23("p", {
|
|
5601
5821
|
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"),
|
|
5602
5822
|
children: phase.name
|
|
5603
5823
|
}),
|
|
5604
|
-
phase.highlights.length > 0 && /* @__PURE__ */
|
|
5824
|
+
phase.highlights.length > 0 && /* @__PURE__ */ jsx23("ul", {
|
|
5605
5825
|
className: "skippr:mt-1 skippr:space-y-0.5",
|
|
5606
|
-
children: phase.highlights.map((text) => /* @__PURE__ */
|
|
5826
|
+
children: phase.highlights.map((text) => /* @__PURE__ */ jsxs19("li", {
|
|
5607
5827
|
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"),
|
|
5608
5828
|
children: [
|
|
5609
|
-
/* @__PURE__ */
|
|
5829
|
+
/* @__PURE__ */ jsx23("span", {
|
|
5610
5830
|
className: "skippr:size-1 skippr:shrink-0 skippr:rounded-full skippr:bg-current"
|
|
5611
5831
|
}),
|
|
5612
5832
|
text
|
|
@@ -5623,12 +5843,12 @@ function SessionAgenda({ phases, hasStarted }) {
|
|
|
5623
5843
|
}
|
|
5624
5844
|
|
|
5625
5845
|
// src/components/SessionWarningBanner.tsx
|
|
5626
|
-
import { jsx as
|
|
5846
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
5627
5847
|
var SESSION_WARNING_THRESHOLD_SECS = 60;
|
|
5628
5848
|
function SessionWarningBanner({ remaining }) {
|
|
5629
5849
|
if (remaining === null || remaining <= 0 || remaining > SESSION_WARNING_THRESHOLD_SECS)
|
|
5630
5850
|
return null;
|
|
5631
|
-
return /* @__PURE__ */
|
|
5851
|
+
return /* @__PURE__ */ jsx24("div", {
|
|
5632
5852
|
"data-testid": "session-warning-banner",
|
|
5633
5853
|
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",
|
|
5634
5854
|
children: "Session ending soon"
|
|
@@ -5636,7 +5856,7 @@ function SessionWarningBanner({ remaining }) {
|
|
|
5636
5856
|
}
|
|
5637
5857
|
|
|
5638
5858
|
// src/components/Sidebar.tsx
|
|
5639
|
-
import { jsx as
|
|
5859
|
+
import { jsx as jsx25, jsxs as jsxs20, Fragment as Fragment3 } from "react/jsx-runtime";
|
|
5640
5860
|
var PANEL_GAP_PX = 12;
|
|
5641
5861
|
var PANEL_VIEWPORT_MARGIN_PX = 24;
|
|
5642
5862
|
var PANEL_MAX_HEIGHT_PX = 460;
|
|
@@ -5696,7 +5916,7 @@ function Sidebar({
|
|
|
5696
5916
|
height: panelExpanded ? availableHeight : `min(${PANEL_MAX_HEIGHT_PX}px, ${availableHeight})`
|
|
5697
5917
|
};
|
|
5698
5918
|
}
|
|
5699
|
-
|
|
5919
|
+
useEffect28(() => {
|
|
5700
5920
|
if (!isSidebar)
|
|
5701
5921
|
return;
|
|
5702
5922
|
const prop = position === "right" ? "marginRight" : "marginLeft";
|
|
@@ -5710,13 +5930,13 @@ function Sidebar({
|
|
|
5710
5930
|
document.body.style.transition = "";
|
|
5711
5931
|
};
|
|
5712
5932
|
}, [isSidebar, isPanelOpen, position]);
|
|
5713
|
-
return /* @__PURE__ */
|
|
5933
|
+
return /* @__PURE__ */ jsxs20("div", {
|
|
5714
5934
|
ref: internalCtx?.panelRef,
|
|
5715
5935
|
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"),
|
|
5716
5936
|
style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined, ...floatingStyle },
|
|
5717
5937
|
children: [
|
|
5718
|
-
!hideHeader && /* @__PURE__ */
|
|
5719
|
-
authFailed ? /* @__PURE__ */
|
|
5938
|
+
!hideHeader && /* @__PURE__ */ jsx25(ChatHeader, {}),
|
|
5939
|
+
authFailed ? /* @__PURE__ */ jsx25(AuthError, {}) : isAuthenticated ? /* @__PURE__ */ jsx25(AuthenticatedContent, {
|
|
5720
5940
|
isConnected,
|
|
5721
5941
|
isPaused,
|
|
5722
5942
|
isPausing,
|
|
@@ -5732,12 +5952,12 @@ function Sidebar({
|
|
|
5732
5952
|
onTalk: startDefaultSession,
|
|
5733
5953
|
talkLabel: startSessionLabel,
|
|
5734
5954
|
talkDisabled
|
|
5735
|
-
}) : usesHostAuth || isValidating ? /* @__PURE__ */
|
|
5955
|
+
}) : usesHostAuth || isValidating ? /* @__PURE__ */ jsx25("div", {
|
|
5736
5956
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
5737
|
-
children: /* @__PURE__ */
|
|
5957
|
+
children: /* @__PURE__ */ jsx25(LoadingDots, {
|
|
5738
5958
|
label: "Loading..."
|
|
5739
5959
|
})
|
|
5740
|
-
}) : /* @__PURE__ */
|
|
5960
|
+
}) : /* @__PURE__ */ jsx25(LoginFlow, {
|
|
5741
5961
|
requestOtp,
|
|
5742
5962
|
verifyOtp,
|
|
5743
5963
|
error: authError,
|
|
@@ -5769,61 +5989,61 @@ function AuthenticatedContent({
|
|
|
5769
5989
|
if (isStarting && !isConnected) {
|
|
5770
5990
|
transitionLabel = "Reconnecting...";
|
|
5771
5991
|
}
|
|
5772
|
-
return /* @__PURE__ */
|
|
5992
|
+
return /* @__PURE__ */ jsxs20(Fragment3, {
|
|
5773
5993
|
children: [
|
|
5774
|
-
isConnected && /* @__PURE__ */
|
|
5775
|
-
showAgenda && /* @__PURE__ */
|
|
5994
|
+
isConnected && /* @__PURE__ */ jsx25(ConnectedBanner, {}),
|
|
5995
|
+
showAgenda && /* @__PURE__ */ jsxs20("div", {
|
|
5776
5996
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-1",
|
|
5777
5997
|
children: [
|
|
5778
|
-
/* @__PURE__ */
|
|
5998
|
+
/* @__PURE__ */ jsxs20("button", {
|
|
5779
5999
|
type: "button",
|
|
5780
6000
|
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"),
|
|
5781
6001
|
onClick: () => onTabChange("chat"),
|
|
5782
6002
|
children: [
|
|
5783
|
-
/* @__PURE__ */
|
|
6003
|
+
/* @__PURE__ */ jsx25(MessageCircle, {
|
|
5784
6004
|
className: "skippr:size-3.5"
|
|
5785
6005
|
}),
|
|
5786
6006
|
"Chat",
|
|
5787
|
-
activeTab === "chat" && /* @__PURE__ */
|
|
6007
|
+
activeTab === "chat" && /* @__PURE__ */ jsx25("span", {
|
|
5788
6008
|
className: "skippr:absolute skippr:-bottom-1 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
5789
6009
|
})
|
|
5790
6010
|
]
|
|
5791
6011
|
}),
|
|
5792
|
-
/* @__PURE__ */
|
|
6012
|
+
/* @__PURE__ */ jsxs20("button", {
|
|
5793
6013
|
type: "button",
|
|
5794
6014
|
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"),
|
|
5795
6015
|
onClick: () => onTabChange("agenda"),
|
|
5796
6016
|
children: [
|
|
5797
|
-
/* @__PURE__ */
|
|
6017
|
+
/* @__PURE__ */ jsx25(Calendar, {
|
|
5798
6018
|
className: "skippr:size-3.5"
|
|
5799
6019
|
}),
|
|
5800
6020
|
"Agenda",
|
|
5801
|
-
activeTab === "agenda" && /* @__PURE__ */
|
|
6021
|
+
activeTab === "agenda" && /* @__PURE__ */ jsx25("span", {
|
|
5802
6022
|
className: "skippr:absolute skippr:-bottom-1 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
5803
6023
|
})
|
|
5804
6024
|
]
|
|
5805
6025
|
})
|
|
5806
6026
|
]
|
|
5807
6027
|
}),
|
|
5808
|
-
/* @__PURE__ */
|
|
6028
|
+
/* @__PURE__ */ jsx25("div", {
|
|
5809
6029
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
5810
|
-
children: isDisconnecting ? /* @__PURE__ */
|
|
6030
|
+
children: isDisconnecting ? /* @__PURE__ */ jsx25("div", {
|
|
5811
6031
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
5812
|
-
children: /* @__PURE__ */
|
|
6032
|
+
children: /* @__PURE__ */ jsx25(LoadingDots, {
|
|
5813
6033
|
label: "Ending session..."
|
|
5814
6034
|
})
|
|
5815
|
-
}) : inSession ? /* @__PURE__ */
|
|
6035
|
+
}) : inSession ? /* @__PURE__ */ jsxs20(Fragment3, {
|
|
5816
6036
|
children: [
|
|
5817
|
-
transitionLabel && /* @__PURE__ */
|
|
6037
|
+
transitionLabel && /* @__PURE__ */ jsx25("div", {
|
|
5818
6038
|
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",
|
|
5819
6039
|
children: transitionLabel
|
|
5820
6040
|
}),
|
|
5821
|
-
/* @__PURE__ */
|
|
6041
|
+
/* @__PURE__ */ jsx25(ConnectedBody, {
|
|
5822
6042
|
activeTab: effectiveTab,
|
|
5823
6043
|
autoFocusChat
|
|
5824
6044
|
})
|
|
5825
6045
|
]
|
|
5826
|
-
}) : /* @__PURE__ */
|
|
6046
|
+
}) : /* @__PURE__ */ jsx25(IdleHistory, {
|
|
5827
6047
|
activeTab: effectiveTab,
|
|
5828
6048
|
history: idleHistory,
|
|
5829
6049
|
onTalk,
|
|
@@ -5832,22 +6052,22 @@ function AuthenticatedContent({
|
|
|
5832
6052
|
error
|
|
5833
6053
|
})
|
|
5834
6054
|
}),
|
|
5835
|
-
!hideControls && /* @__PURE__ */
|
|
6055
|
+
!hideControls && /* @__PURE__ */ jsx25("div", {
|
|
5836
6056
|
className: "skippr:shrink-0 skippr:border-t skippr:border-border",
|
|
5837
|
-
children: /* @__PURE__ */
|
|
6057
|
+
children: /* @__PURE__ */ jsxs20("div", {
|
|
5838
6058
|
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",
|
|
5839
6059
|
children: [
|
|
5840
|
-
/* @__PURE__ */
|
|
6060
|
+
/* @__PURE__ */ jsxs20("svg", {
|
|
5841
6061
|
viewBox: "21 21 109 109",
|
|
5842
6062
|
className: "skippr:size-3",
|
|
5843
6063
|
fill: "none",
|
|
5844
6064
|
"aria-hidden": "true",
|
|
5845
6065
|
children: [
|
|
5846
|
-
/* @__PURE__ */
|
|
6066
|
+
/* @__PURE__ */ jsx25("path", {
|
|
5847
6067
|
d: "M119.497 24C124.193 24 128 27.8071 128 32.5033V81.3974C128 83.0339 127.536 84.5616 126.735 85.8587L89.8936 57.4811L89.8943 57.4804C80.4203 50.1648 66.2971 56.7058 66.297 69.0147V89.9007H29.5033C24.8071 89.9007 21 86.0936 21 81.3974V32.5033C21 27.8071 24.8071 24 29.5033 24H119.497ZM76.2715 69.0147C76.2716 65.1724 80.7356 63.0111 83.7978 65.3755L115.637 89.9007H76.2715V69.0147Z",
|
|
5848
6068
|
fill: "currentColor"
|
|
5849
6069
|
}),
|
|
5850
|
-
/* @__PURE__ */
|
|
6070
|
+
/* @__PURE__ */ jsx25("path", {
|
|
5851
6071
|
d: "M83.7979 64.8856C80.7358 62.5211 76.2716 64.6824 76.2716 68.5247V120.892C76.2716 125.27 81.8518 127.191 84.5938 123.755L97.6194 107.437C98.1001 106.836 98.7119 106.35 99.4091 106.016C100.106 105.683 100.871 105.51 101.645 105.51H122.946C127.386 105.51 129.316 99.9436 125.81 97.2466L83.7979 64.8856Z",
|
|
5852
6072
|
className: "skippr:fill-brand"
|
|
5853
6073
|
})
|
|
@@ -5861,17 +6081,17 @@ function AuthenticatedContent({
|
|
|
5861
6081
|
});
|
|
5862
6082
|
}
|
|
5863
6083
|
function AuthError() {
|
|
5864
|
-
return /* @__PURE__ */
|
|
6084
|
+
return /* @__PURE__ */ jsxs20("div", {
|
|
5865
6085
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:px-6 skippr:py-4 skippr:text-center",
|
|
5866
6086
|
children: [
|
|
5867
|
-
/* @__PURE__ */
|
|
6087
|
+
/* @__PURE__ */ jsx25(CircleAlert, {
|
|
5868
6088
|
className: "skippr:mb-3 skippr:size-7 skippr:text-destructive"
|
|
5869
6089
|
}),
|
|
5870
|
-
/* @__PURE__ */
|
|
6090
|
+
/* @__PURE__ */ jsx25("p", {
|
|
5871
6091
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
5872
6092
|
children: "We couldn't verify your session"
|
|
5873
6093
|
}),
|
|
5874
|
-
/* @__PURE__ */
|
|
6094
|
+
/* @__PURE__ */ jsx25("p", {
|
|
5875
6095
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
5876
6096
|
children: "Please contact administrator."
|
|
5877
6097
|
})
|
|
@@ -5880,7 +6100,7 @@ function AuthError() {
|
|
|
5880
6100
|
}
|
|
5881
6101
|
function ConnectedBanner() {
|
|
5882
6102
|
const remaining = useSessionRemaining();
|
|
5883
|
-
return /* @__PURE__ */
|
|
6103
|
+
return /* @__PURE__ */ jsx25(SessionWarningBanner, {
|
|
5884
6104
|
remaining
|
|
5885
6105
|
});
|
|
5886
6106
|
}
|
|
@@ -5893,43 +6113,43 @@ function IdleHistory({
|
|
|
5893
6113
|
error
|
|
5894
6114
|
}) {
|
|
5895
6115
|
if (history2.isLoading) {
|
|
5896
|
-
return /* @__PURE__ */
|
|
6116
|
+
return /* @__PURE__ */ jsx25("div", {
|
|
5897
6117
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
5898
|
-
children: /* @__PURE__ */
|
|
6118
|
+
children: /* @__PURE__ */ jsx25(LoadingDots, {
|
|
5899
6119
|
label: "Loading conversation..."
|
|
5900
6120
|
})
|
|
5901
6121
|
});
|
|
5902
6122
|
}
|
|
5903
|
-
return /* @__PURE__ */
|
|
6123
|
+
return /* @__PURE__ */ jsxs20("div", {
|
|
5904
6124
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
|
|
5905
6125
|
children: [
|
|
5906
|
-
activeTab === "agenda" ? /* @__PURE__ */
|
|
6126
|
+
activeTab === "agenda" ? /* @__PURE__ */ jsx25("div", {
|
|
5907
6127
|
className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto",
|
|
5908
|
-
children: /* @__PURE__ */
|
|
6128
|
+
children: /* @__PURE__ */ jsx25(SessionAgenda, {
|
|
5909
6129
|
phases: history2.phases,
|
|
5910
6130
|
hasStarted: history2.phases.length > 0
|
|
5911
6131
|
})
|
|
5912
|
-
}) : /* @__PURE__ */
|
|
6132
|
+
}) : /* @__PURE__ */ jsx25(MessageList, {
|
|
5913
6133
|
messages: history2.messages,
|
|
5914
6134
|
isStreaming: false,
|
|
5915
6135
|
readOnly: true
|
|
5916
6136
|
}),
|
|
5917
|
-
/* @__PURE__ */
|
|
6137
|
+
/* @__PURE__ */ jsxs20("div", {
|
|
5918
6138
|
className: "skippr:shrink-0 skippr:border-t skippr:border-border skippr:p-3",
|
|
5919
6139
|
children: [
|
|
5920
|
-
/* @__PURE__ */
|
|
6140
|
+
/* @__PURE__ */ jsxs20("button", {
|
|
5921
6141
|
type: "button",
|
|
5922
6142
|
onClick: onTalk,
|
|
5923
6143
|
disabled: talkDisabled,
|
|
5924
6144
|
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",
|
|
5925
6145
|
children: [
|
|
5926
|
-
/* @__PURE__ */
|
|
6146
|
+
/* @__PURE__ */ jsx25(Mic, {
|
|
5927
6147
|
className: "skippr:size-4"
|
|
5928
6148
|
}),
|
|
5929
6149
|
talkLabel
|
|
5930
6150
|
]
|
|
5931
6151
|
}),
|
|
5932
|
-
error && /* @__PURE__ */
|
|
6152
|
+
error && /* @__PURE__ */ jsx25("p", {
|
|
5933
6153
|
className: "skippr:mt-2 skippr:text-center skippr:text-xs skippr:text-destructive",
|
|
5934
6154
|
children: error
|
|
5935
6155
|
})
|
|
@@ -5948,17 +6168,17 @@ function ConnectedBody({
|
|
|
5948
6168
|
const { agentControls, isPaused } = useLiveAgent();
|
|
5949
6169
|
const { isHeld } = useSessionHoldContext();
|
|
5950
6170
|
if (activeTab === "agenda") {
|
|
5951
|
-
return /* @__PURE__ */
|
|
6171
|
+
return /* @__PURE__ */ jsx25("div", {
|
|
5952
6172
|
className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto skippr:animate-skippr-tab-fade",
|
|
5953
|
-
children: /* @__PURE__ */
|
|
6173
|
+
children: /* @__PURE__ */ jsx25(SessionAgenda, {
|
|
5954
6174
|
phases,
|
|
5955
6175
|
hasStarted: allMessages.length > 0 || agentState === "speaking"
|
|
5956
6176
|
})
|
|
5957
6177
|
}, "agenda");
|
|
5958
6178
|
}
|
|
5959
|
-
return /* @__PURE__ */
|
|
6179
|
+
return /* @__PURE__ */ jsx25("div", {
|
|
5960
6180
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
|
|
5961
|
-
children: /* @__PURE__ */
|
|
6181
|
+
children: /* @__PURE__ */ jsx25(MessageList, {
|
|
5962
6182
|
messages: allMessages,
|
|
5963
6183
|
isStreaming: agentState === "speaking",
|
|
5964
6184
|
sendChatMessage,
|
|
@@ -5974,9 +6194,9 @@ function ConnectedBody({
|
|
|
5974
6194
|
import { useContext as useContext14 } from "react";
|
|
5975
6195
|
|
|
5976
6196
|
// src/components/Logo.tsx
|
|
5977
|
-
import { jsx as
|
|
6197
|
+
import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
5978
6198
|
function Logo({ className }) {
|
|
5979
|
-
return /* @__PURE__ */
|
|
6199
|
+
return /* @__PURE__ */ jsxs21("svg", {
|
|
5980
6200
|
width: "1em",
|
|
5981
6201
|
height: "1em",
|
|
5982
6202
|
viewBox: "0 0 200 200",
|
|
@@ -5986,20 +6206,20 @@ function Logo({ className }) {
|
|
|
5986
6206
|
"aria-label": "Skippr",
|
|
5987
6207
|
className,
|
|
5988
6208
|
children: [
|
|
5989
|
-
/* @__PURE__ */
|
|
6209
|
+
/* @__PURE__ */ jsx26("rect", {
|
|
5990
6210
|
width: "200",
|
|
5991
6211
|
height: "200",
|
|
5992
6212
|
rx: "40",
|
|
5993
6213
|
fill: "#2D2D3F"
|
|
5994
6214
|
}),
|
|
5995
|
-
/* @__PURE__ */
|
|
6215
|
+
/* @__PURE__ */ jsxs21("g", {
|
|
5996
6216
|
transform: "translate(100 100) scale(0.8) translate(-100 -100)",
|
|
5997
6217
|
children: [
|
|
5998
|
-
/* @__PURE__ */
|
|
6218
|
+
/* @__PURE__ */ jsx26("path", {
|
|
5999
6219
|
d: "M144.497 59C149.193 59 153 62.8071 153 67.5033V116.397C153 118.034 152.536 119.562 151.735 120.859L114.894 92.4811L114.894 92.4804C105.42 85.1648 91.2971 91.7058 91.297 104.015V124.901H54.5033C49.8071 124.901 46 121.094 46 116.397V67.5033C46 62.8071 49.8071 59 54.5033 59H144.497ZM101.272 104.015C101.272 100.172 105.736 98.0111 108.798 100.375L140.637 124.901H101.272V104.015Z",
|
|
6000
6220
|
fill: "white"
|
|
6001
6221
|
}),
|
|
6002
|
-
/* @__PURE__ */
|
|
6222
|
+
/* @__PURE__ */ jsx26("path", {
|
|
6003
6223
|
d: "M108.798 99.8856C105.736 97.5211 101.271 99.6824 101.271 103.525V155.892C101.271 160.27 106.852 162.191 109.594 158.755L122.619 142.437C123.1 141.836 123.712 141.35 124.409 141.016C125.106 140.683 125.871 140.51 126.645 140.51H147.946C152.386 140.51 154.316 134.944 150.81 132.247L108.798 99.8856Z",
|
|
6004
6224
|
className: "skippr:fill-brand"
|
|
6005
6225
|
})
|
|
@@ -6010,7 +6230,7 @@ function Logo({ className }) {
|
|
|
6010
6230
|
}
|
|
6011
6231
|
|
|
6012
6232
|
// src/components/SidebarTrigger.tsx
|
|
6013
|
-
import { jsx as
|
|
6233
|
+
import { jsx as jsx27 } from "react/jsx-runtime";
|
|
6014
6234
|
function SidebarTrigger() {
|
|
6015
6235
|
const {
|
|
6016
6236
|
isPanelOpen,
|
|
@@ -6029,23 +6249,23 @@ function SidebarTrigger() {
|
|
|
6029
6249
|
if (isMinimized || isConnected || isStarting || isPausing)
|
|
6030
6250
|
return null;
|
|
6031
6251
|
const handleClick = isPanelOpen && minimizable ? minimizePanel : togglePanel;
|
|
6032
|
-
return /* @__PURE__ */
|
|
6252
|
+
return /* @__PURE__ */ jsx27("button", {
|
|
6033
6253
|
type: "button",
|
|
6034
6254
|
onClick: handleClick,
|
|
6035
6255
|
title: isPanelOpen ? "Close chat" : "Open chat",
|
|
6036
6256
|
"aria-label": isPanelOpen ? "Close chat" : "Open chat",
|
|
6037
6257
|
style: { bottom: triggerBottomPx(launcherBottomPx, popsDown) },
|
|
6038
6258
|
className: cn("skippr:fixed skippr:z-[9998]", "skippr:flex skippr:size-12 skippr:items-center skippr:justify-center", "skippr:shadow-[0_4px_16px_rgba(45,43,61,0.45),0_2px_4px_rgba(0,0,0,0.1)] skippr:transition-all", "skippr:cursor-pointer skippr:hover:brightness-110 skippr:hover:-translate-y-0.5 skippr:active:translate-y-0", isPanelOpen ? "skippr:rounded-[14px] skippr:bg-bubble skippr:text-white" : "skippr:rounded-[10px] skippr:overflow-hidden", position === "right" ? "skippr:right-6" : "skippr:left-6"),
|
|
6039
|
-
children: isPanelOpen ? /* @__PURE__ */
|
|
6259
|
+
children: isPanelOpen ? /* @__PURE__ */ jsx27(ChevronDown, {
|
|
6040
6260
|
className: "skippr:size-5"
|
|
6041
|
-
}) : /* @__PURE__ */
|
|
6261
|
+
}) : /* @__PURE__ */ jsx27(Logo, {
|
|
6042
6262
|
className: "skippr:size-12"
|
|
6043
6263
|
})
|
|
6044
6264
|
});
|
|
6045
6265
|
}
|
|
6046
6266
|
|
|
6047
6267
|
// src/components/LiveAgent.tsx
|
|
6048
|
-
import { jsx as
|
|
6268
|
+
import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
6049
6269
|
function readSavedLauncherBottom() {
|
|
6050
6270
|
try {
|
|
6051
6271
|
const saved = Number.parseInt(localStorage.getItem("skippr_widget_bottom") ?? "", 10);
|
|
@@ -6055,7 +6275,7 @@ function readSavedLauncherBottom() {
|
|
|
6055
6275
|
}
|
|
6056
6276
|
}
|
|
6057
6277
|
function AgentCursorMount({ animated }) {
|
|
6058
|
-
return /* @__PURE__ */
|
|
6278
|
+
return /* @__PURE__ */ jsx28(AgentCursor, {
|
|
6059
6279
|
target: useAgentCursor(),
|
|
6060
6280
|
animated
|
|
6061
6281
|
});
|
|
@@ -6063,8 +6283,8 @@ function AgentCursorMount({ animated }) {
|
|
|
6063
6283
|
function PlanPanelOpener() {
|
|
6064
6284
|
const plan = usePlanUpdates();
|
|
6065
6285
|
const { expandPanel } = useLiveAgent();
|
|
6066
|
-
const surfacedPlanIdRef =
|
|
6067
|
-
|
|
6286
|
+
const surfacedPlanIdRef = useRef23(null);
|
|
6287
|
+
useEffect29(() => {
|
|
6068
6288
|
if (plan?.state !== "proposed" || surfacedPlanIdRef.current === plan.planId)
|
|
6069
6289
|
return;
|
|
6070
6290
|
surfacedPlanIdRef.current = plan.planId;
|
|
@@ -6104,18 +6324,18 @@ function LiveAgent(props) {
|
|
|
6104
6324
|
const auth = useAuth({ appKey });
|
|
6105
6325
|
const usesHostAuth = !!getUserToken || !!userToken || !!authTokenProp;
|
|
6106
6326
|
const effectiveAuthToken = usesHostAuth ? authTokenProp : auth.authToken ?? undefined;
|
|
6107
|
-
const [activeModule, setActiveModule] =
|
|
6108
|
-
const minimizeOnSessionStart =
|
|
6327
|
+
const [activeModule, setActiveModule] = useState21(null);
|
|
6328
|
+
const minimizeOnSessionStart = useCallback18(() => {
|
|
6109
6329
|
if (minimizable) {
|
|
6110
6330
|
setIsMinimized(true);
|
|
6111
6331
|
setIsPanelOpen(false);
|
|
6112
6332
|
}
|
|
6113
6333
|
}, [minimizable]);
|
|
6114
|
-
const expandOnSessionStartError =
|
|
6334
|
+
const expandOnSessionStartError = useCallback18(() => {
|
|
6115
6335
|
setIsMinimized(false);
|
|
6116
6336
|
setIsPanelOpen(true);
|
|
6117
6337
|
}, []);
|
|
6118
|
-
const minimizeOnSessionDisconnect =
|
|
6338
|
+
const minimizeOnSessionDisconnect = useCallback18(() => {
|
|
6119
6339
|
setActiveModule(null);
|
|
6120
6340
|
if (minimizable) {
|
|
6121
6341
|
setIsMinimized(true);
|
|
@@ -6150,30 +6370,30 @@ function LiveAgent(props) {
|
|
|
6150
6370
|
onStartError: expandOnSessionStartError,
|
|
6151
6371
|
onDisconnect: minimizeOnSessionDisconnect
|
|
6152
6372
|
});
|
|
6153
|
-
const teardownInFlightRef =
|
|
6373
|
+
const teardownInFlightRef = useRef23(false);
|
|
6154
6374
|
teardownInFlightRef.current = isPaused || isPausing || isDisconnecting;
|
|
6155
|
-
const handleRoomDisconnected =
|
|
6375
|
+
const handleRoomDisconnected = useCallback18(() => {
|
|
6156
6376
|
if (teardownInFlightRef.current)
|
|
6157
6377
|
return;
|
|
6158
6378
|
disconnect();
|
|
6159
6379
|
}, [disconnect]);
|
|
6160
6380
|
const isSessionLive = connection !== null || isStarting || isPausing || isDisconnecting;
|
|
6161
|
-
const [isPanelOpen, setIsPanelOpen] =
|
|
6162
|
-
const [isMinimized, setIsMinimized] =
|
|
6163
|
-
const [sidebarTab, setSidebarTab] =
|
|
6164
|
-
const [phasesSnapshot, setPhasesSnapshot] =
|
|
6165
|
-
const [textMode, setTextMode] =
|
|
6166
|
-
const [panelExpanded, setPanelExpanded] =
|
|
6167
|
-
const togglePanelExpanded =
|
|
6168
|
-
const panelRef =
|
|
6169
|
-
const controlBarRef =
|
|
6170
|
-
const [isDragging, setIsDragging] =
|
|
6171
|
-
const setTextModeState =
|
|
6381
|
+
const [isPanelOpen, setIsPanelOpen] = useState21(defaultOpen);
|
|
6382
|
+
const [isMinimized, setIsMinimized] = useState21(minimizable && !defaultOpen);
|
|
6383
|
+
const [sidebarTab, setSidebarTab] = useState21("agenda");
|
|
6384
|
+
const [phasesSnapshot, setPhasesSnapshot] = useState21([]);
|
|
6385
|
+
const [textMode, setTextMode] = useState21(false);
|
|
6386
|
+
const [panelExpanded, setPanelExpanded] = useState21(false);
|
|
6387
|
+
const togglePanelExpanded = useCallback18(() => setPanelExpanded((prev) => !prev), []);
|
|
6388
|
+
const panelRef = useRef23(null);
|
|
6389
|
+
const controlBarRef = useRef23(null);
|
|
6390
|
+
const [isDragging, setIsDragging] = useState21(false);
|
|
6391
|
+
const setTextModeState = useCallback18((enabled) => {
|
|
6172
6392
|
setTextMode(enabled);
|
|
6173
6393
|
}, []);
|
|
6174
6394
|
const isConnected = connection !== null;
|
|
6175
6395
|
const showControlBar = isConnected || isStarting || isPausing;
|
|
6176
|
-
|
|
6396
|
+
useEffect29(() => {
|
|
6177
6397
|
if (!isConnected)
|
|
6178
6398
|
setTextModeState(false);
|
|
6179
6399
|
}, [isConnected, setTextModeState]);
|
|
@@ -6201,16 +6421,18 @@ function LiveAgent(props) {
|
|
|
6201
6421
|
const agentMode = operatingModule?.mode ?? null;
|
|
6202
6422
|
const shouldAnimateCursor = operatingModule?.uiPreferences?.animateCursor ?? animateAgentCursor;
|
|
6203
6423
|
const resumableSession = useMemo7(() => getResumableSession(operatingModule), [operatingModule]);
|
|
6204
|
-
const resumeSession =
|
|
6424
|
+
const resumeSession = useCallback18(async () => {
|
|
6205
6425
|
if (!resumableSession)
|
|
6206
6426
|
return;
|
|
6427
|
+
if (operatingModule)
|
|
6428
|
+
setActiveModule(operatingModule);
|
|
6207
6429
|
await startSession({
|
|
6208
6430
|
agentId: resumableSession.agentId,
|
|
6209
6431
|
agentControls,
|
|
6210
6432
|
existingSessionId: resumableSession.id
|
|
6211
6433
|
});
|
|
6212
|
-
}, [resumableSession, startSession, agentControls]);
|
|
6213
|
-
const selectModule =
|
|
6434
|
+
}, [resumableSession, operatingModule, startSession, agentControls]);
|
|
6435
|
+
const selectModule = useCallback18((moduleId, opts) => {
|
|
6214
6436
|
const found = availableModules.find((m) => m.id === moduleId);
|
|
6215
6437
|
if (!found)
|
|
6216
6438
|
return;
|
|
@@ -6222,7 +6444,7 @@ function LiveAgent(props) {
|
|
|
6222
6444
|
autoStarted: opts?.autoStarted
|
|
6223
6445
|
});
|
|
6224
6446
|
}, [availableModules, startSession]);
|
|
6225
|
-
const startAdoptionSession =
|
|
6447
|
+
const startAdoptionSession = useCallback18((goal) => {
|
|
6226
6448
|
attendGoal(goal.goalId);
|
|
6227
6449
|
const found = availableModules.find((m) => m.id === goal.agentId);
|
|
6228
6450
|
if (found)
|
|
@@ -6233,9 +6455,9 @@ function LiveAgent(props) {
|
|
|
6233
6455
|
adoptionGoalId: goal.goalId
|
|
6234
6456
|
});
|
|
6235
6457
|
}, [attendGoal, availableModules, startSession]);
|
|
6236
|
-
const [welcomeDismissed, setWelcomeDismissed] =
|
|
6237
|
-
const dismissWelcome =
|
|
6238
|
-
const [currentPosition, setCurrentPosition] =
|
|
6458
|
+
const [welcomeDismissed, setWelcomeDismissed] = useState21(false);
|
|
6459
|
+
const dismissWelcome = useCallback18(() => setWelcomeDismissed(true), []);
|
|
6460
|
+
const [currentPosition, setCurrentPosition] = useState21(() => {
|
|
6239
6461
|
try {
|
|
6240
6462
|
const saved = localStorage.getItem("skippr_widget_position");
|
|
6241
6463
|
if (saved === "left" || saved === "right")
|
|
@@ -6243,18 +6465,18 @@ function LiveAgent(props) {
|
|
|
6243
6465
|
} catch {}
|
|
6244
6466
|
return position;
|
|
6245
6467
|
});
|
|
6246
|
-
const setPositionWithPersist =
|
|
6468
|
+
const setPositionWithPersist = useCallback18((pos) => {
|
|
6247
6469
|
setCurrentPosition(pos);
|
|
6248
6470
|
try {
|
|
6249
6471
|
localStorage.setItem("skippr_widget_position", pos);
|
|
6250
6472
|
} catch {}
|
|
6251
6473
|
}, []);
|
|
6252
6474
|
const savedLauncherBottom = readSavedLauncherBottom();
|
|
6253
|
-
const hasDraggedRef =
|
|
6254
|
-
const verticalAlignRef =
|
|
6255
|
-
const [launcherBottomPx, setLauncherBottomPxState] =
|
|
6256
|
-
const [popsDown, setPopsDown] =
|
|
6257
|
-
const setLauncherBottomPx =
|
|
6475
|
+
const hasDraggedRef = useRef23(savedLauncherBottom !== null);
|
|
6476
|
+
const verticalAlignRef = useRef23(verticalAlign);
|
|
6477
|
+
const [launcherBottomPx, setLauncherBottomPxState] = useState21(() => savedLauncherBottom !== null ? clampLauncherBottom(savedLauncherBottom) : verticalAlignToBottomPx(verticalAlign));
|
|
6478
|
+
const [popsDown, setPopsDown] = useState21(() => launcherPopsDown(launcherBottomPx));
|
|
6479
|
+
const setLauncherBottomPx = useCallback18((px) => {
|
|
6258
6480
|
hasDraggedRef.current = true;
|
|
6259
6481
|
setLauncherBottomPxState(px);
|
|
6260
6482
|
setPopsDown(launcherPopsDown(px));
|
|
@@ -6262,13 +6484,13 @@ function LiveAgent(props) {
|
|
|
6262
6484
|
localStorage.setItem("skippr_widget_bottom", String(px));
|
|
6263
6485
|
} catch {}
|
|
6264
6486
|
}, []);
|
|
6265
|
-
const launcherBottomPxRef =
|
|
6487
|
+
const launcherBottomPxRef = useRef23(launcherBottomPx);
|
|
6266
6488
|
launcherBottomPxRef.current = launcherBottomPx;
|
|
6267
|
-
const commitLauncherDrop =
|
|
6489
|
+
const commitLauncherDrop = useCallback18(({ side, bottomPx }) => {
|
|
6268
6490
|
setPositionWithPersist(side);
|
|
6269
6491
|
setLauncherBottomPx(bottomPx);
|
|
6270
6492
|
}, [setPositionWithPersist, setLauncherBottomPx]);
|
|
6271
|
-
|
|
6493
|
+
useEffect29(() => {
|
|
6272
6494
|
const syncToViewport = () => {
|
|
6273
6495
|
const next = hasDraggedRef.current ? clampLauncherBottom(launcherBottomPxRef.current) : verticalAlignToBottomPx(verticalAlignRef.current);
|
|
6274
6496
|
setLauncherBottomPxState(next);
|
|
@@ -6278,26 +6500,26 @@ function LiveAgent(props) {
|
|
|
6278
6500
|
window.addEventListener("resize", syncToViewport);
|
|
6279
6501
|
return () => window.removeEventListener("resize", syncToViewport);
|
|
6280
6502
|
}, []);
|
|
6281
|
-
const openPanel =
|
|
6282
|
-
const closePanel =
|
|
6283
|
-
const togglePanel =
|
|
6284
|
-
const expandPanel =
|
|
6503
|
+
const openPanel = useCallback18(() => setIsPanelOpen(true), []);
|
|
6504
|
+
const closePanel = useCallback18(() => setIsPanelOpen(false), []);
|
|
6505
|
+
const togglePanel = useCallback18(() => setIsPanelOpen((prev) => !prev), []);
|
|
6506
|
+
const expandPanel = useCallback18(() => {
|
|
6285
6507
|
setIsMinimized(false);
|
|
6286
6508
|
setIsPanelOpen(true);
|
|
6287
6509
|
}, []);
|
|
6288
|
-
const minimizePanel =
|
|
6510
|
+
const minimizePanel = useCallback18(() => {
|
|
6289
6511
|
if (!minimizable)
|
|
6290
6512
|
return;
|
|
6291
6513
|
setIsMinimized(true);
|
|
6292
6514
|
setIsPanelOpen(false);
|
|
6293
6515
|
}, [minimizable]);
|
|
6294
|
-
const pauseSessionAndMinimize =
|
|
6516
|
+
const pauseSessionAndMinimize = useCallback18(async () => {
|
|
6295
6517
|
await pauseSession();
|
|
6296
6518
|
minimizePanel();
|
|
6297
6519
|
}, [pauseSession, minimizePanel]);
|
|
6298
6520
|
const isAuthenticated = bearerToken !== null || auth.isAuthenticated;
|
|
6299
6521
|
const defaultAgentId = hostAgentId ?? defaultSelection.agentId;
|
|
6300
|
-
const startDefaultSession =
|
|
6522
|
+
const startDefaultSession = useCallback18(() => {
|
|
6301
6523
|
const target = availableModules.find((m) => m.id === defaultAgentId);
|
|
6302
6524
|
if (!target)
|
|
6303
6525
|
return;
|
|
@@ -6460,45 +6682,45 @@ function LiveAgent(props) {
|
|
|
6460
6682
|
adoptionGoals,
|
|
6461
6683
|
startAdoptionSession
|
|
6462
6684
|
]);
|
|
6463
|
-
return /* @__PURE__ */
|
|
6685
|
+
return /* @__PURE__ */ jsx28(LiveAgentContext.Provider, {
|
|
6464
6686
|
value: ctx,
|
|
6465
|
-
children: /* @__PURE__ */
|
|
6687
|
+
children: /* @__PURE__ */ jsxs22(LiveKitRoom, {
|
|
6466
6688
|
serverUrl: connection?.livekitUrl,
|
|
6467
6689
|
token: connection?.token,
|
|
6468
6690
|
connect: shouldConnect,
|
|
6469
6691
|
audio: true,
|
|
6470
6692
|
onDisconnected: handleRoomDisconnected,
|
|
6471
6693
|
children: [
|
|
6472
|
-
connection && !textMode && /* @__PURE__ */
|
|
6473
|
-
connection && captureMode === CAPTURE_MODE.Screenshare && /* @__PURE__ */
|
|
6694
|
+
connection && !textMode && /* @__PURE__ */ jsx28(RoomAudioRenderer, {}),
|
|
6695
|
+
connection && captureMode === CAPTURE_MODE.Screenshare && /* @__PURE__ */ jsx28(AutoStartMedia, {
|
|
6474
6696
|
pendingScreenStream,
|
|
6475
|
-
|
|
6697
|
+
pushOrTapMicMode: isRequestResponseMicMode(agentControls?.micMode)
|
|
6476
6698
|
}),
|
|
6477
|
-
connection && captureMode === CAPTURE_MODE.Auto && /* @__PURE__ */
|
|
6478
|
-
|
|
6699
|
+
connection && captureMode === CAPTURE_MODE.Auto && /* @__PURE__ */ jsx28(DomCapture, {
|
|
6700
|
+
pushOrTapMicMode: isRequestResponseMicMode(agentControls?.micMode)
|
|
6479
6701
|
}),
|
|
6480
|
-
/* @__PURE__ */
|
|
6702
|
+
/* @__PURE__ */ jsxs22(ShadowHost, {
|
|
6481
6703
|
children: [
|
|
6482
|
-
connection && captureMode === CAPTURE_MODE.Auto && agentControls?.highlight && /* @__PURE__ */
|
|
6483
|
-
connection && captureMode === CAPTURE_MODE.Auto && agentControls?.actions && /* @__PURE__ */
|
|
6484
|
-
connection && captureMode === CAPTURE_MODE.Auto && agentControls?.actions && /* @__PURE__ */
|
|
6485
|
-
connection && captureMode === CAPTURE_MODE.Auto && (agentControls?.highlight || agentControls?.actions) && /* @__PURE__ */
|
|
6704
|
+
connection && captureMode === CAPTURE_MODE.Auto && agentControls?.highlight && /* @__PURE__ */ jsx28(HighlightOverlay, {}),
|
|
6705
|
+
connection && captureMode === CAPTURE_MODE.Auto && agentControls?.actions && /* @__PURE__ */ jsx28(PageActionHandler, {}),
|
|
6706
|
+
connection && captureMode === CAPTURE_MODE.Auto && agentControls?.actions && /* @__PURE__ */ jsx28(PlanPanelOpener, {}),
|
|
6707
|
+
connection && captureMode === CAPTURE_MODE.Auto && (agentControls?.highlight || agentControls?.actions) && /* @__PURE__ */ jsx28(AgentCursorMount, {
|
|
6486
6708
|
animated: shouldAnimateCursor
|
|
6487
6709
|
}),
|
|
6488
|
-
/* @__PURE__ */
|
|
6489
|
-
children: /* @__PURE__ */
|
|
6490
|
-
children: /* @__PURE__ */
|
|
6491
|
-
children: /* @__PURE__ */
|
|
6710
|
+
/* @__PURE__ */ jsx28(SessionHoldProvider, {
|
|
6711
|
+
children: /* @__PURE__ */ jsx28(VoiceTurnProvider, {
|
|
6712
|
+
children: /* @__PURE__ */ jsx28(TranscriptionsProvider, {
|
|
6713
|
+
children: /* @__PURE__ */ jsxs22("div", {
|
|
6492
6714
|
id: WIDGET_ROOT_ID,
|
|
6493
6715
|
children: [
|
|
6494
|
-
isMinimized && !showControlBar && /* @__PURE__ */
|
|
6716
|
+
isMinimized && !showControlBar && /* @__PURE__ */ jsx28(MinimizedBubble, {
|
|
6495
6717
|
welcomeMessage,
|
|
6496
6718
|
welcomeDismissed,
|
|
6497
6719
|
onDismissWelcome: dismissWelcome
|
|
6498
6720
|
}),
|
|
6499
|
-
showControlBar && !hideControls && /* @__PURE__ */
|
|
6500
|
-
/* @__PURE__ */
|
|
6501
|
-
/* @__PURE__ */
|
|
6721
|
+
showControlBar && !hideControls && /* @__PURE__ */ jsx28(SessionControlBar, {}),
|
|
6722
|
+
/* @__PURE__ */ jsx28(SidebarTrigger, {}),
|
|
6723
|
+
/* @__PURE__ */ jsx28(Sidebar, {
|
|
6502
6724
|
hideControls,
|
|
6503
6725
|
hideHeader,
|
|
6504
6726
|
startSessionLabel
|