@skippr/live-agent-sdk 0.66.0 → 0.68.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/README.md +1 -2
- package/dist/esm/lib-exports.js +506 -358
- package/dist/skippr-sdk.css +1 -1
- package/dist/skippr-sdk.js +143 -143
- package/dist/types/components/PausedCountdown.d.ts +4 -0
- package/dist/types/context/LiveAgentContext.d.ts +2 -2
- package/dist/types/hooks/useSession.d.ts +1 -0
- package/dist/types/hooks/useSessionHold.d.ts +13 -0
- package/dist/types/lib/constants.d.ts +1 -0
- package/package.json +1 -1
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 useCallback15, useEffect as useEffect24, useMemo as useMemo6, useRef as useRef17, useState as useState18 } from "react";
|
|
12
12
|
|
|
13
13
|
// src/capture/useAgentCursor.ts
|
|
14
14
|
import { useEffect, useState } from "react";
|
|
@@ -426,6 +426,7 @@ var HIGHLIGHT_TOPIC = "skippr.highlight";
|
|
|
426
426
|
var PAGE_ACTIONS_TOPIC = "skippr.page-actions";
|
|
427
427
|
var TEXT_MODE_TOPIC = "skippr.text-mode";
|
|
428
428
|
var ACTION_CONTROL_TOPIC = "skippr.action-control";
|
|
429
|
+
var SESSION_HOLD_TOPIC = "skippr.session-hold";
|
|
429
430
|
var PLAN_ATTR = "skippr.action-plan";
|
|
430
431
|
var NAME_MAX_CHARS = 80;
|
|
431
432
|
|
|
@@ -555,6 +556,7 @@ function useSession({
|
|
|
555
556
|
const [pendingScreenStream, setPendingScreenStream] = useState6(null);
|
|
556
557
|
const [isPaused, setIsPaused] = useState6(false);
|
|
557
558
|
const [isPausing, setIsPausing] = useState6(false);
|
|
559
|
+
const [pauseTimeoutSeconds, setPauseTimeoutSeconds] = useState6(null);
|
|
558
560
|
const [historyMessages, setHistoryMessages] = useState6([]);
|
|
559
561
|
const [authFailed, setAuthFailed] = useState6(false);
|
|
560
562
|
const tokenRef = useRef(authToken ? { token: authToken, expiresAt: null } : null);
|
|
@@ -730,7 +732,11 @@ function useSession({
|
|
|
730
732
|
setErrorCode(startResp.status);
|
|
731
733
|
throw new Error(body?.detail || `Failed to start session: ${startResp.status}`);
|
|
732
734
|
}
|
|
733
|
-
const {
|
|
735
|
+
const {
|
|
736
|
+
session,
|
|
737
|
+
connection: conn,
|
|
738
|
+
pauseTimeoutSeconds: pauseTimeout
|
|
739
|
+
} = await startResp.json();
|
|
734
740
|
const history2 = existingSessionId ? await fetchSessionMessages(session.id, authedFetch) : [];
|
|
735
741
|
setSessionId(session.id);
|
|
736
742
|
setHistoryMessages(history2);
|
|
@@ -741,6 +747,7 @@ function useSession({
|
|
|
741
747
|
setPendingScreenStream(screenStream);
|
|
742
748
|
setShouldConnect(true);
|
|
743
749
|
setIsPaused(false);
|
|
750
|
+
setPauseTimeoutSeconds(typeof pauseTimeout === "number" ? pauseTimeout : null);
|
|
744
751
|
} catch (e) {
|
|
745
752
|
stopStream(screenStream);
|
|
746
753
|
setError(e instanceof Error ? e.message : "Failed to start session");
|
|
@@ -810,6 +817,7 @@ function useSession({
|
|
|
810
817
|
disconnect,
|
|
811
818
|
isPaused,
|
|
812
819
|
isPausing,
|
|
820
|
+
pauseTimeoutSeconds,
|
|
813
821
|
historyMessages,
|
|
814
822
|
pendingScreenStream,
|
|
815
823
|
bearerToken,
|
|
@@ -1153,8 +1161,14 @@ var __iconNode21 = [
|
|
|
1153
1161
|
]
|
|
1154
1162
|
];
|
|
1155
1163
|
var MousePointerClick = createLucideIcon("mouse-pointer-click", __iconNode21);
|
|
1156
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/
|
|
1164
|
+
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/pause.js
|
|
1157
1165
|
var __iconNode22 = [
|
|
1166
|
+
["rect", { x: "14", y: "3", width: "5", height: "18", rx: "1", key: "kaeet6" }],
|
|
1167
|
+
["rect", { x: "5", y: "3", width: "5", height: "18", rx: "1", key: "1wsw3u" }]
|
|
1168
|
+
];
|
|
1169
|
+
var Pause = createLucideIcon("pause", __iconNode22);
|
|
1170
|
+
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/play.js
|
|
1171
|
+
var __iconNode23 = [
|
|
1158
1172
|
[
|
|
1159
1173
|
"path",
|
|
1160
1174
|
{
|
|
@@ -1163,9 +1177,9 @@ var __iconNode22 = [
|
|
|
1163
1177
|
}
|
|
1164
1178
|
]
|
|
1165
1179
|
];
|
|
1166
|
-
var Play = createLucideIcon("play",
|
|
1180
|
+
var Play = createLucideIcon("play", __iconNode23);
|
|
1167
1181
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/send.js
|
|
1168
|
-
var
|
|
1182
|
+
var __iconNode24 = [
|
|
1169
1183
|
[
|
|
1170
1184
|
"path",
|
|
1171
1185
|
{
|
|
@@ -1175,18 +1189,18 @@ var __iconNode23 = [
|
|
|
1175
1189
|
],
|
|
1176
1190
|
["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
|
|
1177
1191
|
];
|
|
1178
|
-
var Send = createLucideIcon("send",
|
|
1192
|
+
var Send = createLucideIcon("send", __iconNode24);
|
|
1179
1193
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/square.js
|
|
1180
|
-
var
|
|
1194
|
+
var __iconNode25 = [
|
|
1181
1195
|
["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }]
|
|
1182
1196
|
];
|
|
1183
|
-
var Square = createLucideIcon("square",
|
|
1197
|
+
var Square = createLucideIcon("square", __iconNode25);
|
|
1184
1198
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/x.js
|
|
1185
|
-
var
|
|
1199
|
+
var __iconNode26 = [
|
|
1186
1200
|
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
|
|
1187
1201
|
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
|
|
1188
1202
|
];
|
|
1189
|
-
var X = createLucideIcon("x",
|
|
1203
|
+
var X = createLucideIcon("x", __iconNode26);
|
|
1190
1204
|
// src/components/AgentCursor.tsx
|
|
1191
1205
|
import { useContext as useContext3, useEffect as useEffect7, useLayoutEffect, useRef as useRef2, useState as useState7 } from "react";
|
|
1192
1206
|
|
|
@@ -3063,9 +3077,8 @@ function MinimizedBubble({
|
|
|
3063
3077
|
popsDown,
|
|
3064
3078
|
adoptionGoals,
|
|
3065
3079
|
startAdoptionSession,
|
|
3066
|
-
hasModuleSelector,
|
|
3067
3080
|
isAuthenticated,
|
|
3068
|
-
|
|
3081
|
+
displayModules,
|
|
3069
3082
|
hasResolvedModules,
|
|
3070
3083
|
selectModule,
|
|
3071
3084
|
expandPanel,
|
|
@@ -3091,15 +3104,15 @@ function MinimizedBubble({
|
|
|
3091
3104
|
};
|
|
3092
3105
|
}, []);
|
|
3093
3106
|
const { wasDraggedRef } = useLauncherDrag(hoverContainerRef, commitLauncherDrop);
|
|
3094
|
-
const actionableModules =
|
|
3107
|
+
const actionableModules = displayModules.filter((module) => {
|
|
3095
3108
|
const state = getModuleSessionState(module.currentSession, module.mode);
|
|
3096
3109
|
return state !== "completed" && state !== "expired";
|
|
3097
|
-
})
|
|
3110
|
+
});
|
|
3098
3111
|
const alwaysOnModule = actionableModules.find((module) => module.mode === AGENT_MODE.AlwaysOn);
|
|
3099
3112
|
const pillCandidates = actionableModules.filter((module) => module.mode !== AGENT_MODE.AlwaysOn);
|
|
3100
3113
|
const onboardingModule = pillCandidates.find((module) => module.type === "onboarding");
|
|
3101
3114
|
const modulePills = onboardingModule ? [onboardingModule] : pillCandidates.slice(0, MAX_MODULE_PILLS).reverse();
|
|
3102
|
-
const goalsEligible = adoptionGoals.length > 0 && !onboardingModule &&
|
|
3115
|
+
const goalsEligible = adoptionGoals.length > 0 && !onboardingModule && hasResolvedModules;
|
|
3103
3116
|
useEffect12(() => {
|
|
3104
3117
|
if (!goalsEligible)
|
|
3105
3118
|
return;
|
|
@@ -3128,13 +3141,12 @@ function MinimizedBubble({
|
|
|
3128
3141
|
const launchDefaultSession = () => {
|
|
3129
3142
|
if (wasDraggedRef.current || isStarting)
|
|
3130
3143
|
return;
|
|
3131
|
-
|
|
3144
|
+
const target = isAuthenticated ? alwaysOnModule ?? onboardingModule ?? pillCandidates[0] : null;
|
|
3145
|
+
if (target) {
|
|
3146
|
+
selectModule(target.id);
|
|
3147
|
+
} else {
|
|
3132
3148
|
expandPanel();
|
|
3133
|
-
return;
|
|
3134
3149
|
}
|
|
3135
|
-
const target = alwaysOnModule ?? onboardingModule ?? pillCandidates[0];
|
|
3136
|
-
if (target)
|
|
3137
|
-
selectModule(target.id);
|
|
3138
3150
|
};
|
|
3139
3151
|
return /* @__PURE__ */ jsxs4("div", {
|
|
3140
3152
|
ref: hoverContainerRef,
|
|
@@ -3705,20 +3717,114 @@ function usePhaseUpdates() {
|
|
|
3705
3717
|
return { phases };
|
|
3706
3718
|
}
|
|
3707
3719
|
|
|
3720
|
+
// src/hooks/useSessionHold.ts
|
|
3721
|
+
import { useLocalParticipant as useLocalParticipant6 } from "@livekit/components-react/hooks";
|
|
3722
|
+
import { useCallback as useCallback11, useEffect as useEffect17, useState as useState11 } from "react";
|
|
3723
|
+
var textEncoder4 = new TextEncoder;
|
|
3724
|
+
var FALLBACK_PAUSE_TIMEOUT_SECONDS = 120;
|
|
3725
|
+
function useSessionHold({
|
|
3726
|
+
pauseSession,
|
|
3727
|
+
pauseTimeoutSeconds
|
|
3728
|
+
}) {
|
|
3729
|
+
const { localParticipant } = useLocalParticipant6();
|
|
3730
|
+
const timeoutSeconds = pauseTimeoutSeconds ?? FALLBACK_PAUSE_TIMEOUT_SECONDS;
|
|
3731
|
+
const [isHeld, setIsHeld] = useState11(false);
|
|
3732
|
+
const [countdown, setCountdown] = useState11(timeoutSeconds);
|
|
3733
|
+
const publish = useCallback11(async (type) => {
|
|
3734
|
+
await localParticipant.publishData(textEncoder4.encode(JSON.stringify({ type })), {
|
|
3735
|
+
reliable: true,
|
|
3736
|
+
topic: SESSION_HOLD_TOPIC
|
|
3737
|
+
});
|
|
3738
|
+
}, [localParticipant]);
|
|
3739
|
+
const hold = useCallback11(async () => {
|
|
3740
|
+
try {
|
|
3741
|
+
await localParticipant.setMicrophoneEnabled(false);
|
|
3742
|
+
await publish("pause");
|
|
3743
|
+
setIsHeld(true);
|
|
3744
|
+
} catch (error) {
|
|
3745
|
+
console.error("Failed to hold session:", error);
|
|
3746
|
+
}
|
|
3747
|
+
}, [localParticipant, publish]);
|
|
3748
|
+
const release = useCallback11(async () => {
|
|
3749
|
+
try {
|
|
3750
|
+
await localParticipant.setMicrophoneEnabled(true);
|
|
3751
|
+
await publish("resume");
|
|
3752
|
+
setIsHeld(false);
|
|
3753
|
+
} catch (error) {
|
|
3754
|
+
console.error("Failed to release session:", error);
|
|
3755
|
+
}
|
|
3756
|
+
}, [localParticipant, publish]);
|
|
3757
|
+
useEffect17(() => {
|
|
3758
|
+
if (!isHeld) {
|
|
3759
|
+
setCountdown(timeoutSeconds);
|
|
3760
|
+
return;
|
|
3761
|
+
}
|
|
3762
|
+
const id = setInterval(() => {
|
|
3763
|
+
setCountdown((seconds) => Math.max(0, seconds - 1));
|
|
3764
|
+
}, 1000);
|
|
3765
|
+
return () => clearInterval(id);
|
|
3766
|
+
}, [isHeld, timeoutSeconds]);
|
|
3767
|
+
useEffect17(() => {
|
|
3768
|
+
if (isHeld && countdown === 0) {
|
|
3769
|
+
setIsHeld(false);
|
|
3770
|
+
pauseSession();
|
|
3771
|
+
}
|
|
3772
|
+
}, [isHeld, countdown, pauseSession]);
|
|
3773
|
+
const toggle = useCallback11(() => {
|
|
3774
|
+
if (isHeld) {
|
|
3775
|
+
release();
|
|
3776
|
+
} else {
|
|
3777
|
+
hold();
|
|
3778
|
+
}
|
|
3779
|
+
}, [isHeld, hold, release]);
|
|
3780
|
+
return { isHeld, countdown, toggle };
|
|
3781
|
+
}
|
|
3782
|
+
|
|
3783
|
+
// src/components/PausedCountdown.tsx
|
|
3784
|
+
import { jsxs as jsxs5 } from "react/jsx-runtime";
|
|
3785
|
+
function PausedCountdown({ secondsRemaining }) {
|
|
3786
|
+
const minutes = Math.floor(secondsRemaining / 60);
|
|
3787
|
+
const seconds = String(secondsRemaining % 60).padStart(2, "0");
|
|
3788
|
+
return /* @__PURE__ */ jsxs5("span", {
|
|
3789
|
+
role: "timer",
|
|
3790
|
+
"aria-label": `Agent closes in ${secondsRemaining} seconds`,
|
|
3791
|
+
className: "skippr:flex skippr:h-12 skippr:items-center skippr:whitespace-nowrap skippr:px-1 skippr:text-[13px] skippr:font-medium skippr:text-neutral-500 skippr:[animation:skippr-stage-fade_240ms_ease-out]",
|
|
3792
|
+
children: [
|
|
3793
|
+
"Agent closes in",
|
|
3794
|
+
/* @__PURE__ */ jsxs5("span", {
|
|
3795
|
+
className: "skippr:ml-1 skippr:font-semibold skippr:tabular-nums skippr:text-bubble",
|
|
3796
|
+
children: [
|
|
3797
|
+
minutes,
|
|
3798
|
+
":",
|
|
3799
|
+
seconds
|
|
3800
|
+
]
|
|
3801
|
+
})
|
|
3802
|
+
]
|
|
3803
|
+
});
|
|
3804
|
+
}
|
|
3805
|
+
|
|
3708
3806
|
// src/components/SessionControlBar.tsx
|
|
3709
|
-
import { jsx as jsx5, jsxs as
|
|
3807
|
+
import { jsx as jsx5, jsxs as jsxs6, Fragment } from "react/jsx-runtime";
|
|
3710
3808
|
var STANDBY_BAR_WIDTH = 168;
|
|
3711
|
-
var READY_BAR_WIDTH =
|
|
3809
|
+
var READY_BAR_WIDTH = 268;
|
|
3810
|
+
var PAUSED_BAR_WIDTH = 220;
|
|
3712
3811
|
var TEXT_BAR_WIDTH = 64;
|
|
3713
3812
|
var SCREEN_SHARE_EXTRA_WIDTH = 56;
|
|
3714
3813
|
var ACTION_CONTROL_EXTRA_WIDTH = 56;
|
|
3715
|
-
var MIC_REGION_WIDTH =
|
|
3814
|
+
var MIC_REGION_WIDTH = 140;
|
|
3716
3815
|
var MIC_SQUARE_WIDTH = 48;
|
|
3717
|
-
var
|
|
3816
|
+
var AGENT_ACTIVITY_WIDTH = 84;
|
|
3817
|
+
var SQUARE_BUTTON = "skippr:flex skippr:size-12 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-[12px] skippr:cursor-pointer skippr:transition-colors";
|
|
3718
3818
|
var AGENT_BARS = 4;
|
|
3719
3819
|
var AGENT_BAR_IDLE_HEIGHT_PX = 4;
|
|
3720
3820
|
var AGENT_BAR_MAX_GROWTH_PX = 12;
|
|
3721
3821
|
var AGENT_NOISE_GATE = 0;
|
|
3822
|
+
var AGENT_STATE_LABELS = {
|
|
3823
|
+
idle: "Idle",
|
|
3824
|
+
listening: "Listening",
|
|
3825
|
+
thinking: "Thinking",
|
|
3826
|
+
speaking: "Talking"
|
|
3827
|
+
};
|
|
3722
3828
|
function AgentActivity({
|
|
3723
3829
|
state,
|
|
3724
3830
|
isActing,
|
|
@@ -3730,68 +3836,72 @@ function AgentActivity({
|
|
|
3730
3836
|
maxGrowthPx: AGENT_BAR_MAX_GROWTH_PX,
|
|
3731
3837
|
noiseGate: AGENT_NOISE_GATE
|
|
3732
3838
|
});
|
|
3733
|
-
|
|
3734
|
-
|
|
3735
|
-
role: "status",
|
|
3736
|
-
className: "skippr:flex skippr:h-5 skippr:w-12 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:text-bubble",
|
|
3737
|
-
"aria-label": "Agent is acting",
|
|
3738
|
-
children: /* @__PURE__ */ jsx5(MousePointerClick, {
|
|
3739
|
-
strokeWidth: 2,
|
|
3740
|
-
className: "skippr:size-5 skippr:[animation:skippr-finger-tap_1.1s_ease-in-out_infinite]"
|
|
3741
|
-
})
|
|
3742
|
-
});
|
|
3743
|
-
}
|
|
3744
|
-
return /* @__PURE__ */ jsxs5("span", {
|
|
3839
|
+
const label = isActing ? "Working" : AGENT_STATE_LABELS[state] ?? "";
|
|
3840
|
+
return /* @__PURE__ */ jsxs6("span", {
|
|
3745
3841
|
role: "status",
|
|
3746
|
-
className: "skippr:flex skippr:
|
|
3747
|
-
"aria-label": `Agent is ${state}`,
|
|
3842
|
+
className: "skippr:flex skippr:items-center skippr:gap-1.5 skippr:text-bubble",
|
|
3843
|
+
"aria-label": isActing ? "Agent is acting" : `Agent is ${state}`,
|
|
3748
3844
|
children: [
|
|
3749
|
-
|
|
3750
|
-
className: "skippr:flex skippr:
|
|
3751
|
-
children:
|
|
3752
|
-
|
|
3753
|
-
|
|
3754
|
-
|
|
3755
|
-
|
|
3756
|
-
|
|
3757
|
-
|
|
3758
|
-
|
|
3759
|
-
|
|
3760
|
-
|
|
3761
|
-
|
|
3762
|
-
|
|
3763
|
-
|
|
3764
|
-
|
|
3765
|
-
|
|
3766
|
-
|
|
3767
|
-
|
|
3768
|
-
|
|
3769
|
-
|
|
3770
|
-
|
|
3771
|
-
|
|
3845
|
+
/* @__PURE__ */ jsx5("span", {
|
|
3846
|
+
className: "skippr:flex skippr:size-5 skippr:shrink-0 skippr:items-center skippr:justify-center",
|
|
3847
|
+
children: isActing ? /* @__PURE__ */ jsx5(MousePointerClick, {
|
|
3848
|
+
strokeWidth: 2,
|
|
3849
|
+
className: "skippr:size-5 skippr:[animation:skippr-finger-tap_1.1s_ease-in-out_infinite]"
|
|
3850
|
+
}) : /* @__PURE__ */ jsxs6(Fragment, {
|
|
3851
|
+
children: [
|
|
3852
|
+
state === "speaking" && /* @__PURE__ */ jsx5("span", {
|
|
3853
|
+
className: "skippr:flex skippr:h-5 skippr:items-center skippr:gap-[2px]",
|
|
3854
|
+
children: Array.from({ length: AGENT_BARS }).map((_, index2) => /* @__PURE__ */ jsx5("span", {
|
|
3855
|
+
ref: (el) => {
|
|
3856
|
+
barRefs.current[index2] = el;
|
|
3857
|
+
},
|
|
3858
|
+
className: "skippr:w-[2px] skippr:rounded-full skippr:bg-current skippr:transition-[height] skippr:duration-75",
|
|
3859
|
+
style: { height: AGENT_BAR_IDLE_HEIGHT_PX }
|
|
3860
|
+
}, index2))
|
|
3861
|
+
}),
|
|
3862
|
+
state === "thinking" && /* @__PURE__ */ jsxs6("span", {
|
|
3863
|
+
className: "skippr:flex skippr:items-center skippr:gap-[3px]",
|
|
3864
|
+
children: [
|
|
3865
|
+
/* @__PURE__ */ jsx5("span", {
|
|
3866
|
+
className: "skippr:size-[5px] skippr:rounded-full skippr:bg-current skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
3867
|
+
}),
|
|
3868
|
+
/* @__PURE__ */ jsx5("span", {
|
|
3869
|
+
className: "skippr:size-[5px] skippr:rounded-full skippr:bg-current skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
3870
|
+
}),
|
|
3871
|
+
/* @__PURE__ */ jsx5("span", {
|
|
3872
|
+
className: "skippr:size-[5px] skippr:rounded-full skippr:bg-current skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
3873
|
+
})
|
|
3874
|
+
]
|
|
3875
|
+
}),
|
|
3876
|
+
state === "listening" && /* @__PURE__ */ jsxs6("svg", {
|
|
3877
|
+
viewBox: "0 0 24 24",
|
|
3878
|
+
className: "skippr:size-5",
|
|
3879
|
+
fill: "none",
|
|
3880
|
+
stroke: "currentColor",
|
|
3881
|
+
strokeWidth: "2",
|
|
3882
|
+
strokeLinecap: "round",
|
|
3883
|
+
strokeLinejoin: "round",
|
|
3884
|
+
"aria-hidden": "true",
|
|
3885
|
+
children: [
|
|
3886
|
+
/* @__PURE__ */ jsx5("path", {
|
|
3887
|
+
d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
|
|
3888
|
+
}),
|
|
3889
|
+
/* @__PURE__ */ jsx5("circle", {
|
|
3890
|
+
cx: "12",
|
|
3891
|
+
cy: "12",
|
|
3892
|
+
r: "2.5",
|
|
3893
|
+
fill: "currentColor",
|
|
3894
|
+
stroke: "none",
|
|
3895
|
+
className: "skippr:origin-center skippr:[animation:skippr-banner-look_2.4s_ease-in-out_infinite]"
|
|
3896
|
+
})
|
|
3897
|
+
]
|
|
3898
|
+
})
|
|
3899
|
+
]
|
|
3900
|
+
})
|
|
3772
3901
|
}),
|
|
3773
|
-
|
|
3774
|
-
|
|
3775
|
-
|
|
3776
|
-
fill: "none",
|
|
3777
|
-
stroke: "currentColor",
|
|
3778
|
-
strokeWidth: "2",
|
|
3779
|
-
strokeLinecap: "round",
|
|
3780
|
-
strokeLinejoin: "round",
|
|
3781
|
-
"aria-hidden": "true",
|
|
3782
|
-
children: [
|
|
3783
|
-
/* @__PURE__ */ jsx5("path", {
|
|
3784
|
-
d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
|
|
3785
|
-
}),
|
|
3786
|
-
/* @__PURE__ */ jsx5("circle", {
|
|
3787
|
-
cx: "12",
|
|
3788
|
-
cy: "12",
|
|
3789
|
-
r: "2.5",
|
|
3790
|
-
fill: "currentColor",
|
|
3791
|
-
stroke: "none",
|
|
3792
|
-
className: "skippr:origin-center skippr:[animation:skippr-banner-look_2.4s_ease-in-out_infinite]"
|
|
3793
|
-
})
|
|
3794
|
-
]
|
|
3902
|
+
/* @__PURE__ */ jsx5("span", {
|
|
3903
|
+
className: "skippr:text-[11px] skippr:font-medium skippr:capitalize",
|
|
3904
|
+
children: label
|
|
3795
3905
|
})
|
|
3796
3906
|
]
|
|
3797
3907
|
});
|
|
@@ -3813,7 +3923,15 @@ function SessionControlBar() {
|
|
|
3813
3923
|
if (!internalCtx) {
|
|
3814
3924
|
throw new Error("SessionControlBar must be used within a <LiveAgent> provider");
|
|
3815
3925
|
}
|
|
3816
|
-
const {
|
|
3926
|
+
const {
|
|
3927
|
+
textMode,
|
|
3928
|
+
launcherBottomPx,
|
|
3929
|
+
popsDown,
|
|
3930
|
+
controlBarRef,
|
|
3931
|
+
commitLauncherDrop,
|
|
3932
|
+
panelRef,
|
|
3933
|
+
pauseTimeoutSeconds
|
|
3934
|
+
} = internalCtx;
|
|
3817
3935
|
const followsPanel = variant === "floating" && isPanelOpen;
|
|
3818
3936
|
const panelFollowers = followsPanel ? [panelRef] : null;
|
|
3819
3937
|
const { wasDraggedRef } = useLauncherDrag(controlBarRef, commitLauncherDrop, panelFollowers);
|
|
@@ -3821,16 +3939,29 @@ function SessionControlBar() {
|
|
|
3821
3939
|
const { state, mediaStreamTrack: agentMediaStreamTrack } = useAgentVoiceState();
|
|
3822
3940
|
const { phases } = usePhaseUpdates();
|
|
3823
3941
|
const { actionsActive, actionsPaused: actionsPaused2, togglePaused } = useActionControl();
|
|
3942
|
+
const {
|
|
3943
|
+
isHeld,
|
|
3944
|
+
countdown,
|
|
3945
|
+
toggle: togglePause
|
|
3946
|
+
} = useSessionHold({
|
|
3947
|
+
pauseSession,
|
|
3948
|
+
pauseTimeoutSeconds
|
|
3949
|
+
});
|
|
3824
3950
|
const isReady = state === "listening" || state === "thinking" || state === "speaking";
|
|
3825
|
-
const { barRefs, isTalking } = useMicLevel(isReady && !isMuted && !textMode);
|
|
3951
|
+
const { barRefs, isTalking } = useMicLevel(isReady && !isMuted && !textMode && !isHeld);
|
|
3826
3952
|
const showScreenShareToggle = captureMode === "screenshare";
|
|
3827
3953
|
const showActionControl = captureMode === "auto" && actionsActive;
|
|
3828
3954
|
const screenShareExtra = showScreenShareToggle ? SCREEN_SHARE_EXTRA_WIDTH : 0;
|
|
3829
3955
|
const actionControlExtra = showActionControl ? ACTION_CONTROL_EXTRA_WIDTH : 0;
|
|
3830
3956
|
let barWidth = STANDBY_BAR_WIDTH;
|
|
3831
3957
|
if (isReady) {
|
|
3832
|
-
|
|
3833
|
-
|
|
3958
|
+
if (textMode) {
|
|
3959
|
+
barWidth = TEXT_BAR_WIDTH;
|
|
3960
|
+
} else if (isHeld) {
|
|
3961
|
+
barWidth = PAUSED_BAR_WIDTH;
|
|
3962
|
+
} else {
|
|
3963
|
+
barWidth = READY_BAR_WIDTH + screenShareExtra + actionControlExtra;
|
|
3964
|
+
}
|
|
3834
3965
|
}
|
|
3835
3966
|
const agendaModule = activeModule && activeModule.mode !== AGENT_MODE.AlwaysOn && activeModule.totalPhases > 0 ? activeModule : null;
|
|
3836
3967
|
const agendaProgress = phases.length > 0 ? {
|
|
@@ -3858,13 +3989,13 @@ function SessionControlBar() {
|
|
|
3858
3989
|
return;
|
|
3859
3990
|
action();
|
|
3860
3991
|
};
|
|
3861
|
-
return /* @__PURE__ */
|
|
3992
|
+
return /* @__PURE__ */ jsxs6("div", {
|
|
3862
3993
|
ref: controlBarRef,
|
|
3863
3994
|
style: { bottom: launcherBottomPx },
|
|
3864
3995
|
className: cn("skippr:fixed skippr:z-[9999] skippr:touch-none skippr:cursor-grab", position === "right" ? "skippr:right-3" : "skippr:left-3"),
|
|
3865
3996
|
children: [
|
|
3866
3997
|
!isPanelOpen && agendaModule && agendaProgress && /* @__PURE__ */ jsx5("div", {
|
|
3867
|
-
className: cn("skippr:absolute", popsDown ? "skippr:top-full skippr:mt-3" : "skippr:bottom-full skippr:mb-3", position === "right" ? "skippr:right-0" : "skippr:left-0"),
|
|
3998
|
+
className: cn("skippr:absolute", popsDown ? "skippr:top-full skippr:mt-3" : "skippr:bottom-full skippr:mb-3", isReady ? position === "right" ? "skippr:right-7" : "skippr:left-7" : position === "right" ? "skippr:right-0" : "skippr:left-0"),
|
|
3868
3999
|
children: /* @__PURE__ */ jsx5(ModulePill, {
|
|
3869
4000
|
module: agendaModule,
|
|
3870
4001
|
onSelect: ifNotDragged(openAgenda),
|
|
@@ -3873,14 +4004,14 @@ function SessionControlBar() {
|
|
|
3873
4004
|
isLive: true
|
|
3874
4005
|
})
|
|
3875
4006
|
}),
|
|
3876
|
-
/* @__PURE__ */
|
|
4007
|
+
/* @__PURE__ */ jsxs6("div", {
|
|
3877
4008
|
style: { width: barWidth },
|
|
3878
|
-
className: cn("skippr:group skippr:relative skippr:flex skippr:h-16 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] skippr:duration-300 skippr:ease-out", "skippr:[animation:skippr-toolset-pop_440ms_cubic-bezier(0.22,1,0.36,1)]"),
|
|
4009
|
+
className: cn("skippr:group skippr:relative skippr:flex skippr:h-16 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")),
|
|
3879
4010
|
children: [
|
|
3880
|
-
!isReady && /* @__PURE__ */
|
|
4011
|
+
!isReady && /* @__PURE__ */ jsxs6("span", {
|
|
3881
4012
|
className: "skippr:flex skippr:h-12 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]",
|
|
3882
4013
|
children: [
|
|
3883
|
-
/* @__PURE__ */
|
|
4014
|
+
/* @__PURE__ */ jsxs6("span", {
|
|
3884
4015
|
className: "skippr:flex skippr:items-center skippr:gap-[3px]",
|
|
3885
4016
|
children: [
|
|
3886
4017
|
/* @__PURE__ */ jsx5("span", {
|
|
@@ -3899,135 +4030,159 @@ function SessionControlBar() {
|
|
|
3899
4030
|
})
|
|
3900
4031
|
]
|
|
3901
4032
|
}),
|
|
3902
|
-
isReady && /* @__PURE__ */
|
|
3903
|
-
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:[animation:skippr-stage-fade_240ms_ease-out]",
|
|
4033
|
+
isReady && /* @__PURE__ */ jsxs6("div", {
|
|
4034
|
+
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"),
|
|
3904
4035
|
children: [
|
|
3905
|
-
!textMode && /* @__PURE__ */
|
|
3906
|
-
className: "skippr:relative skippr:h-12",
|
|
3907
|
-
style: { width: MIC_REGION_WIDTH },
|
|
3908
|
-
children: [
|
|
3909
|
-
!isTalking && /* @__PURE__ */ jsx5("span", {
|
|
3910
|
-
className: "skippr:absolute skippr:inset-y-0 skippr:right-[-3px] skippr:flex skippr:w-14 skippr:items-center skippr:justify-center skippr:[animation:skippr-agent-in_200ms_ease-out_240ms_both]",
|
|
3911
|
-
children: /* @__PURE__ */ jsx5(AgentActivity, {
|
|
3912
|
-
state,
|
|
3913
|
-
isActing: showActionControl && !actionsPaused2,
|
|
3914
|
-
mediaStreamTrack: agentMediaStreamTrack
|
|
3915
|
-
})
|
|
3916
|
-
}),
|
|
3917
|
-
/* @__PURE__ */ jsxs5("button", {
|
|
3918
|
-
type: "button",
|
|
3919
|
-
onClick: ifNotDragged(() => void toggleMute()),
|
|
3920
|
-
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
3921
|
-
className: "skippr:group skippr:absolute skippr:top-0 skippr:left-0 skippr:z-10 skippr:flex skippr:h-12 skippr:items-center skippr:gap-2.5 skippr:overflow-hidden skippr:rounded-2xl skippr:bg-bubble skippr:pl-3.5 skippr:text-white skippr:cursor-pointer skippr:transition-[width] skippr:duration-300 skippr:ease-out",
|
|
3922
|
-
style: { width: isTalking ? MIC_REGION_WIDTH : MIC_SQUARE_WIDTH },
|
|
3923
|
-
children: [
|
|
3924
|
-
/* @__PURE__ */ jsx5("span", {
|
|
3925
|
-
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"),
|
|
3926
|
-
children: isMuted ? /* @__PURE__ */ jsx5(MicOff, {
|
|
3927
|
-
className: "skippr:size-5"
|
|
3928
|
-
}) : /* @__PURE__ */ jsx5(Mic, {
|
|
3929
|
-
className: "skippr:size-5"
|
|
3930
|
-
})
|
|
3931
|
-
}),
|
|
3932
|
-
/* @__PURE__ */ jsx5("span", {
|
|
3933
|
-
className: cn("skippr:flex skippr:h-6 skippr:flex-1 skippr:items-center skippr:justify-center skippr:gap-[3px] skippr:transition-opacity skippr:duration-200", isTalking ? "skippr:opacity-100" : "skippr:opacity-0"),
|
|
3934
|
-
children: Array.from({ length: MIC_BARS }).map((_, index2) => /* @__PURE__ */ jsx5("span", {
|
|
3935
|
-
ref: (el) => {
|
|
3936
|
-
barRefs.current[index2] = el;
|
|
3937
|
-
},
|
|
3938
|
-
className: "skippr:w-[3px] skippr:rounded-full skippr:bg-white skippr:transition-[height] skippr:duration-75",
|
|
3939
|
-
style: { height: 5 }
|
|
3940
|
-
}, index2))
|
|
3941
|
-
})
|
|
3942
|
-
]
|
|
3943
|
-
})
|
|
3944
|
-
]
|
|
3945
|
-
}),
|
|
3946
|
-
showScreenShareToggle && /* @__PURE__ */ jsx5("button", {
|
|
3947
|
-
type: "button",
|
|
3948
|
-
onClick: ifNotDragged(() => void toggleScreenShare()),
|
|
3949
|
-
"aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
|
|
3950
|
-
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"),
|
|
3951
|
-
children: isScreenSharing ? /* @__PURE__ */ jsx5(MonitorOff, {
|
|
3952
|
-
className: "skippr:size-5"
|
|
3953
|
-
}) : /* @__PURE__ */ jsx5(Monitor, {
|
|
3954
|
-
className: "skippr:size-5"
|
|
3955
|
-
})
|
|
3956
|
-
}),
|
|
3957
|
-
/* @__PURE__ */ jsx5("button", {
|
|
4036
|
+
!textMode && /* @__PURE__ */ jsx5("button", {
|
|
3958
4037
|
type: "button",
|
|
3959
|
-
onClick: ifNotDragged(
|
|
3960
|
-
"aria-label":
|
|
3961
|
-
|
|
3962
|
-
|
|
3963
|
-
|
|
3964
|
-
})
|
|
3965
|
-
}),
|
|
3966
|
-
showActionControl && /* @__PURE__ */ jsx5("button", {
|
|
3967
|
-
type: "button",
|
|
3968
|
-
onClick: ifNotDragged(() => void togglePaused()),
|
|
3969
|
-
"aria-label": actionsPaused2 ? "Resume actions" : "Stop actions",
|
|
3970
|
-
title: actionsPaused2 ? "Resume" : "Stop",
|
|
3971
|
-
className: cn(SQUARE_BUTTON, actionsPaused2 ? "skippr:bg-green-100 skippr:text-green-700 skippr:hover:bg-green-200" : "skippr:bg-red-100 skippr:text-red-600 skippr:hover:bg-red-200"),
|
|
3972
|
-
children: actionsPaused2 ? /* @__PURE__ */ jsx5(Play, {
|
|
4038
|
+
onClick: ifNotDragged(togglePause),
|
|
4039
|
+
"aria-label": isHeld ? "Resume" : "Pause",
|
|
4040
|
+
title: isHeld ? "Resume" : "Pause",
|
|
4041
|
+
className: cn(SQUARE_BUTTON, isHeld ? "skippr:bg-bubble skippr:text-white skippr:hover:bg-[#3a384b]" : "skippr:bg-neutral-100 skippr:text-neutral-700 skippr:hover:bg-neutral-200"),
|
|
4042
|
+
children: isHeld ? /* @__PURE__ */ jsx5(Play, {
|
|
3973
4043
|
className: "skippr:size-5",
|
|
3974
4044
|
fill: "currentColor"
|
|
3975
|
-
}) : /* @__PURE__ */ jsx5(
|
|
4045
|
+
}) : /* @__PURE__ */ jsx5(Pause, {
|
|
3976
4046
|
className: "skippr:size-5",
|
|
3977
4047
|
fill: "currentColor"
|
|
3978
4048
|
})
|
|
3979
|
-
})
|
|
3980
|
-
]
|
|
3981
|
-
}, textMode ? "ready-text" : "ready"),
|
|
3982
|
-
isReady && /* @__PURE__ */ jsxs5("button", {
|
|
3983
|
-
type: "button",
|
|
3984
|
-
onClick: ifNotDragged(() => void pauseSession()),
|
|
3985
|
-
disabled: isPausing,
|
|
3986
|
-
"aria-label": "Pause session",
|
|
3987
|
-
"aria-busy": isPausing,
|
|
3988
|
-
className: cn("skippr:absolute skippr:-top-2 skippr:-right-2 skippr:z-20 skippr:flex skippr:size-6 skippr:items-center skippr:justify-center", "skippr:rounded-full skippr:bg-bubble skippr:text-white", "skippr:shadow-[0_4px_14px_rgba(0,0,0,0.3)]", "skippr:transition-opacity skippr:duration-150", isPausing ? "skippr:cursor-default" : "skippr:cursor-pointer skippr:hover:bg-[#3a384b]"),
|
|
3989
|
-
children: [
|
|
3990
|
-
/* @__PURE__ */ jsx5(X, {
|
|
3991
|
-
className: cn("skippr:size-3.5 skippr:transition-opacity skippr:duration-200", isPausing && "skippr:opacity-40"),
|
|
3992
|
-
strokeWidth: 2.5
|
|
3993
4049
|
}),
|
|
3994
|
-
|
|
3995
|
-
|
|
3996
|
-
|
|
3997
|
-
"aria-hidden": "true",
|
|
3998
|
-
className: "skippr:absolute skippr:inset-0 skippr:size-full skippr:animate-spin skippr:motion-reduce:hidden",
|
|
4050
|
+
isHeld ? /* @__PURE__ */ jsx5(PausedCountdown, {
|
|
4051
|
+
secondsRemaining: countdown
|
|
4052
|
+
}) : /* @__PURE__ */ jsxs6(Fragment, {
|
|
3999
4053
|
children: [
|
|
4000
|
-
/* @__PURE__ */
|
|
4001
|
-
|
|
4002
|
-
|
|
4003
|
-
|
|
4004
|
-
|
|
4005
|
-
|
|
4006
|
-
|
|
4054
|
+
!textMode && /* @__PURE__ */ jsxs6("div", {
|
|
4055
|
+
className: "skippr:relative skippr:h-12",
|
|
4056
|
+
style: { width: MIC_REGION_WIDTH },
|
|
4057
|
+
children: [
|
|
4058
|
+
!isTalking && /* @__PURE__ */ jsx5("span", {
|
|
4059
|
+
className: "skippr:absolute skippr:inset-y-0 skippr:right-0 skippr:flex skippr:items-center skippr:justify-center skippr:[animation:skippr-agent-in_200ms_ease-out_240ms_both]",
|
|
4060
|
+
style: { width: AGENT_ACTIVITY_WIDTH },
|
|
4061
|
+
children: /* @__PURE__ */ jsx5(AgentActivity, {
|
|
4062
|
+
state,
|
|
4063
|
+
isActing: showActionControl && !actionsPaused2,
|
|
4064
|
+
mediaStreamTrack: agentMediaStreamTrack
|
|
4065
|
+
})
|
|
4066
|
+
}),
|
|
4067
|
+
/* @__PURE__ */ jsxs6("button", {
|
|
4068
|
+
type: "button",
|
|
4069
|
+
onClick: ifNotDragged(() => void toggleMute()),
|
|
4070
|
+
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
4071
|
+
className: "skippr:group skippr:absolute skippr:top-0 skippr:left-0 skippr:z-10 skippr:flex skippr:h-12 skippr:items-center skippr:gap-2.5 skippr:overflow-hidden skippr:rounded-2xl skippr:bg-bubble skippr:pl-3.5 skippr:text-white skippr:cursor-pointer skippr:transition-[width] skippr:duration-300 skippr:ease-out",
|
|
4072
|
+
style: { width: isTalking ? MIC_REGION_WIDTH : MIC_SQUARE_WIDTH },
|
|
4073
|
+
children: [
|
|
4074
|
+
/* @__PURE__ */ jsx5("span", {
|
|
4075
|
+
className: cn("skippr:flex skippr:shrink-0 skippr:items-center skippr:justify-center skippr:transition-colors", isMuted ? "skippr:text-red-400 skippr:group-hover:text-red-300" : "skippr:text-white skippr:group-hover:text-white/80"),
|
|
4076
|
+
children: isMuted ? /* @__PURE__ */ jsx5(MicOff, {
|
|
4077
|
+
className: "skippr:size-5"
|
|
4078
|
+
}) : /* @__PURE__ */ jsx5(Mic, {
|
|
4079
|
+
className: "skippr:size-5"
|
|
4080
|
+
})
|
|
4081
|
+
}),
|
|
4082
|
+
/* @__PURE__ */ jsx5("span", {
|
|
4083
|
+
className: cn("skippr:flex skippr:h-6 skippr:flex-1 skippr:items-center skippr:justify-center skippr:gap-[3px] skippr:transition-opacity skippr:duration-200", isTalking ? "skippr:opacity-100" : "skippr:opacity-0"),
|
|
4084
|
+
children: Array.from({ length: MIC_BARS }).map((_, index2) => /* @__PURE__ */ jsx5("span", {
|
|
4085
|
+
ref: (el) => {
|
|
4086
|
+
barRefs.current[index2] = el;
|
|
4087
|
+
},
|
|
4088
|
+
className: "skippr:w-[3px] skippr:rounded-full skippr:bg-white skippr:transition-[height] skippr:duration-75",
|
|
4089
|
+
style: { height: 5 }
|
|
4090
|
+
}, index2))
|
|
4091
|
+
})
|
|
4092
|
+
]
|
|
4093
|
+
})
|
|
4094
|
+
]
|
|
4007
4095
|
}),
|
|
4008
|
-
/* @__PURE__ */ jsx5("
|
|
4009
|
-
|
|
4010
|
-
|
|
4011
|
-
|
|
4012
|
-
|
|
4013
|
-
|
|
4014
|
-
|
|
4015
|
-
|
|
4096
|
+
showScreenShareToggle && /* @__PURE__ */ jsx5("button", {
|
|
4097
|
+
type: "button",
|
|
4098
|
+
onClick: ifNotDragged(() => void toggleScreenShare()),
|
|
4099
|
+
"aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
|
|
4100
|
+
className: cn(SQUARE_BUTTON, isScreenSharing ? "skippr:bg-bubble skippr:text-white skippr:hover:bg-[#3a384b]" : "skippr:bg-neutral-100 skippr:text-neutral-700 skippr:hover:bg-neutral-200"),
|
|
4101
|
+
children: isScreenSharing ? /* @__PURE__ */ jsx5(MonitorOff, {
|
|
4102
|
+
className: "skippr:size-5"
|
|
4103
|
+
}) : /* @__PURE__ */ jsx5(Monitor, {
|
|
4104
|
+
className: "skippr:size-5"
|
|
4105
|
+
})
|
|
4106
|
+
}),
|
|
4107
|
+
/* @__PURE__ */ jsx5("button", {
|
|
4108
|
+
type: "button",
|
|
4109
|
+
onClick: ifNotDragged(togglePanel),
|
|
4110
|
+
"aria-label": isPanelOpen ? "Close panel" : agendaModule && !textMode ? "Open agenda" : "Open chat",
|
|
4111
|
+
className: cn(SQUARE_BUTTON, "skippr:text-neutral-700", textMode ? "skippr:hover:bg-neutral-100" : "skippr:bg-neutral-100 skippr:hover:bg-neutral-200"),
|
|
4112
|
+
children: /* @__PURE__ */ jsx5(MessageSquare, {
|
|
4113
|
+
className: "skippr:size-5"
|
|
4114
|
+
})
|
|
4115
|
+
}),
|
|
4116
|
+
showActionControl && /* @__PURE__ */ jsx5("button", {
|
|
4117
|
+
type: "button",
|
|
4118
|
+
onClick: ifNotDragged(() => void togglePaused()),
|
|
4119
|
+
"aria-label": actionsPaused2 ? "Resume actions" : "Stop actions",
|
|
4120
|
+
title: actionsPaused2 ? "Resume" : "Stop",
|
|
4121
|
+
className: cn(SQUARE_BUTTON, actionsPaused2 ? "skippr:bg-green-100 skippr:text-green-700 skippr:hover:bg-green-200" : "skippr:bg-red-100 skippr:text-red-600 skippr:hover:bg-red-200"),
|
|
4122
|
+
children: actionsPaused2 ? /* @__PURE__ */ jsx5(Play, {
|
|
4123
|
+
className: "skippr:size-5",
|
|
4124
|
+
fill: "currentColor"
|
|
4125
|
+
}) : /* @__PURE__ */ jsx5(Square, {
|
|
4126
|
+
className: "skippr:size-5",
|
|
4127
|
+
fill: "currentColor"
|
|
4128
|
+
})
|
|
4016
4129
|
})
|
|
4017
4130
|
]
|
|
4018
4131
|
})
|
|
4019
4132
|
]
|
|
4020
|
-
})
|
|
4133
|
+
}, textMode ? "ready-text" : "ready")
|
|
4021
4134
|
]
|
|
4135
|
+
}),
|
|
4136
|
+
isReady && /* @__PURE__ */ jsx5("button", {
|
|
4137
|
+
type: "button",
|
|
4138
|
+
onClick: ifNotDragged(() => void pauseSession()),
|
|
4139
|
+
disabled: isPausing,
|
|
4140
|
+
"aria-label": "End session",
|
|
4141
|
+
"aria-busy": isPausing,
|
|
4142
|
+
className: cn("skippr:absolute skippr:top-1/2 skippr:z-20 skippr:flex skippr:h-16 skippr:w-[50px] skippr:-translate-y-1/2 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", isPausing ? "skippr:cursor-default" : "skippr:cursor-pointer skippr:hover:bg-red-600"),
|
|
4143
|
+
children: /* @__PURE__ */ jsxs6("span", {
|
|
4144
|
+
className: "skippr:relative skippr:flex skippr:size-5 skippr:items-center skippr:justify-center",
|
|
4145
|
+
children: [
|
|
4146
|
+
/* @__PURE__ */ jsx5(X, {
|
|
4147
|
+
className: cn("skippr:size-4 skippr:transition-opacity skippr:duration-200", isPausing && "skippr:opacity-40"),
|
|
4148
|
+
strokeWidth: 2.5
|
|
4149
|
+
}),
|
|
4150
|
+
isPausing && /* @__PURE__ */ jsxs6("svg", {
|
|
4151
|
+
viewBox: "0 0 24 24",
|
|
4152
|
+
fill: "none",
|
|
4153
|
+
"aria-hidden": "true",
|
|
4154
|
+
className: "skippr:absolute skippr:inset-0 skippr:size-full skippr:animate-spin skippr:motion-reduce:hidden",
|
|
4155
|
+
children: [
|
|
4156
|
+
/* @__PURE__ */ jsx5("circle", {
|
|
4157
|
+
cx: "12",
|
|
4158
|
+
cy: "12",
|
|
4159
|
+
r: "10.5",
|
|
4160
|
+
stroke: "white",
|
|
4161
|
+
strokeOpacity: "0.2",
|
|
4162
|
+
strokeWidth: "1.5"
|
|
4163
|
+
}),
|
|
4164
|
+
/* @__PURE__ */ jsx5("circle", {
|
|
4165
|
+
cx: "12",
|
|
4166
|
+
cy: "12",
|
|
4167
|
+
r: "10.5",
|
|
4168
|
+
stroke: "white",
|
|
4169
|
+
strokeWidth: "1.5",
|
|
4170
|
+
strokeLinecap: "round",
|
|
4171
|
+
strokeDasharray: "17 49"
|
|
4172
|
+
})
|
|
4173
|
+
]
|
|
4174
|
+
})
|
|
4175
|
+
]
|
|
4176
|
+
})
|
|
4022
4177
|
})
|
|
4023
4178
|
]
|
|
4024
4179
|
});
|
|
4025
4180
|
}
|
|
4026
4181
|
|
|
4027
4182
|
// src/components/ShadowHost.tsx
|
|
4028
|
-
import { useLayoutEffect as useLayoutEffect2, useRef as useRef10, useState as
|
|
4183
|
+
import { useLayoutEffect as useLayoutEffect2, useRef as useRef10, useState as useState12 } from "react";
|
|
4029
4184
|
import { createPortal } from "react-dom";
|
|
4030
|
-
import { jsx as jsx6, Fragment } from "react/jsx-runtime";
|
|
4185
|
+
import { jsx as jsx6, Fragment as Fragment2 } from "react/jsx-runtime";
|
|
4031
4186
|
var PROPERTIES_STYLE_ID = "skippr-tw-properties";
|
|
4032
4187
|
var PROPERTY_RULE = /@property\s+[^{]+\{[^}]*\}/g;
|
|
4033
4188
|
function hoistTailwindProperties(css) {
|
|
@@ -4043,9 +4198,9 @@ function hoistTailwindProperties(css) {
|
|
|
4043
4198
|
}
|
|
4044
4199
|
function ShadowHost({ children }) {
|
|
4045
4200
|
const hostRef = useRef10(null);
|
|
4046
|
-
const [shadowRoot, setShadowRoot] =
|
|
4201
|
+
const [shadowRoot, setShadowRoot] = useState12(null);
|
|
4047
4202
|
const css = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
|
4048
|
-
@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-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-600:oklch(57.7% .245 27.325);--skippr-color-red-700:oklch(50.5% .213 27.518);--skippr-color-amber-50:oklch(98.7% .022 95.277);--skippr-color-amber-100:oklch(96.2% .059 95.617);--skippr-color-amber-400:oklch(82.8% .189 84.429);--skippr-color-amber-700:oklch(55.5% .163 48.998);--skippr-color-amber-950:oklch(27.9% .077 45.635);--skippr-color-green-100:oklch(96.2% .044 156.743);--skippr-color-green-200:oklch(92.5% .084 155.995);--skippr-color-green-700:oklch(52.7% .154 150.069);--skippr-color-emerald-400:oklch(76.5% .177 163.223);--skippr-color-emerald-500:oklch(69.6% .17 162.48);--skippr-color-neutral-100:oklch(97% 0 0);--skippr-color-neutral-200:oklch(92.2% 0 0);--skippr-color-neutral-700:oklch(37.1% 0 0);--skippr-color-black:#000;--skippr-color-white:#fff;--skippr-spacing:.25rem;--skippr-text-xs:.75rem;--skippr-text-xs--line-height:calc(1/.75);--skippr-text-sm:.875rem;--skippr-text-sm--line-height:calc(1.25/.875);--skippr-font-weight-medium:500;--skippr-font-weight-semibold:600;--skippr-leading-tight:1.25;--skippr-leading-snug:1.375;--skippr-leading-relaxed:1.625;--skippr-ease-out:cubic-bezier(0,0,.2,1);--skippr-ease-in-out:cubic-bezier(.4,0,.2,1);--skippr-animate-spin:spin 1s linear infinite;--skippr-animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--skippr-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--skippr-animate-bounce:bounce 1s infinite;--skippr-blur-sm:8px;--skippr-default-transition-duration:.15s;--skippr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--skippr-default-font-family:var(--skippr-font-sans);--skippr-default-mono-font-family:var(--skippr-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--skippr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--skippr-default-font-feature-settings,normal);font-variation-settings:var(--skippr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--skippr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--skippr-default-mono-font-feature-settings,normal);font-variation-settings:var(--skippr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.skippr\\:pointer-events-none{pointer-events:none}.skippr\\:absolute{position:absolute}.skippr\\:fixed{position:fixed}.skippr\\:relative{position:relative}.skippr\\:sticky{position:sticky}.skippr\\:inset-0{inset:calc(var(--skippr-spacing)*0)}.skippr\\:inset-y-0{inset-block:calc(var(--skippr-spacing)*0)}.skippr\\:-top-2{top:calc(var(--skippr-spacing)*-2)}.skippr\\:top-0{top:calc(var(--skippr-spacing)*0)}.skippr\\:top-1\\/2{top:50%}.skippr\\:top-full{top:100%}.skippr\\:-right-2{right:calc(var(--skippr-spacing)*-2)}.skippr\\:right-0{right:calc(var(--skippr-spacing)*0)}.skippr\\:right-3{right:calc(var(--skippr-spacing)*3)}.skippr\\:right-5{right:calc(var(--skippr-spacing)*5)}.skippr\\:right-6{right:calc(var(--skippr-spacing)*6)}.skippr\\:right-\\[-3px\\]{right:-3px}.skippr\\:right-\\[24px\\]{right:24px}.skippr\\:-bottom-1{bottom:calc(var(--skippr-spacing)*-1)}.skippr\\:-bottom-9{bottom:calc(var(--skippr-spacing)*-9)}.skippr\\:bottom-20{bottom:calc(var(--skippr-spacing)*20)}.skippr\\:bottom-full{bottom:100%}.skippr\\:left-0{left:calc(var(--skippr-spacing)*0)}.skippr\\:left-1\\/2{left:50%}.skippr\\:left-3{left:calc(var(--skippr-spacing)*3)}.skippr\\:left-5{left:calc(var(--skippr-spacing)*5)}.skippr\\:left-6{left:calc(var(--skippr-spacing)*6)}.skippr\\:left-\\[24px\\]{left:24px}.skippr\\:z-10{z-index:10}.skippr\\:z-20{z-index:20}.skippr\\:z-\\[9998\\]{z-index:9998}.skippr\\:z-\\[9999\\]{z-index:9999}.skippr\\:mx-auto{margin-inline:auto}.skippr\\:-mt-\\[5px\\]{margin-top:-5px}.skippr\\:mt-0\\.5{margin-top:calc(var(--skippr-spacing)*.5)}.skippr\\:mt-1{margin-top:calc(var(--skippr-spacing)*1)}.skippr\\:mt-1\\.5{margin-top:calc(var(--skippr-spacing)*1.5)}.skippr\\:mt-3{margin-top:calc(var(--skippr-spacing)*3)}.skippr\\:mt-3\\.5{margin-top:calc(var(--skippr-spacing)*3.5)}.skippr\\:-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\\:flex{display:flex}.skippr\\:inline-flex{display:inline-flex}.skippr\\:size-1{width:calc(var(--skippr-spacing)*1);height:calc(var(--skippr-spacing)*1)}.skippr\\:size-1\\.5{width:calc(var(--skippr-spacing)*1.5);height:calc(var(--skippr-spacing)*1.5)}.skippr\\:size-2{width:calc(var(--skippr-spacing)*2);height:calc(var(--skippr-spacing)*2)}.skippr\\:size-2\\.5{width:calc(var(--skippr-spacing)*2.5);height:calc(var(--skippr-spacing)*2.5)}.skippr\\:size-3\\.5{width:calc(var(--skippr-spacing)*3.5);height:calc(var(--skippr-spacing)*3.5)}.skippr\\:size-4{width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}.skippr\\:size-5{width:calc(var(--skippr-spacing)*5);height:calc(var(--skippr-spacing)*5)}.skippr\\:size-6{width:calc(var(--skippr-spacing)*6);height:calc(var(--skippr-spacing)*6)}.skippr\\:size-7{width:calc(var(--skippr-spacing)*7);height:calc(var(--skippr-spacing)*7)}.skippr\\:size-8{width:calc(var(--skippr-spacing)*8);height:calc(var(--skippr-spacing)*8)}.skippr\\:size-9{width:calc(var(--skippr-spacing)*9);height:calc(var(--skippr-spacing)*9)}.skippr\\:size-10{width:calc(var(--skippr-spacing)*10);height:calc(var(--skippr-spacing)*10)}.skippr\\:size-12{width:calc(var(--skippr-spacing)*12);height:calc(var(--skippr-spacing)*12)}.skippr\\:size-\\[5px\\]{width:5px;height:5px}.skippr\\:size-\\[6px\\]{width:6px;height:6px}.skippr\\:size-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-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-12{height:calc(var(--skippr-spacing)*12)}.skippr\\:h-16{height:calc(var(--skippr-spacing)*16)}.skippr\\:h-\\[18\\.5px\\]{height:18.5px}.skippr\\:h-\\[50px\\]{height:50px}.skippr\\:h-full{height:100%}.skippr\\:min-h-0{min-height:calc(var(--skippr-spacing)*0)}.skippr\\:w-0{width:calc(var(--skippr-spacing)*0)}.skippr\\:w-3\\.5{width:calc(var(--skippr-spacing)*3.5)}.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-10{width:calc(var(--skippr-spacing)*10)}.skippr\\:w-12{width:calc(var(--skippr-spacing)*12)}.skippr\\:w-14{width:calc(var(--skippr-spacing)*14)}.skippr\\:w-40{width:calc(var(--skippr-spacing)*40)}.skippr\\:w-\\[2px\\]{width:2px}.skippr\\:w-\\[3px\\]{width:3px}.skippr\\:w-\\[15\\.4px\\]{width:15.4px}.skippr\\:w-\\[50px\\]{width:50px}.skippr\\:w-full{width:100%}.skippr\\:max-w-64{max-width:calc(var(--skippr-spacing)*64)}.skippr\\:max-w-72{max-width:calc(var(--skippr-spacing)*72)}.skippr\\:max-w-\\[80\\%\\]{max-width:80%}.skippr\\:min-w-0{min-width:calc(var(--skippr-spacing)*0)}.skippr\\:flex-1{flex:1}.skippr\\:shrink-0{flex-shrink:0}.skippr\\:origin-bottom-left{transform-origin:0 100%}.skippr\\:origin-bottom-right{transform-origin:100% 100%}.skippr\\:origin-center{transform-origin:50%}.skippr\\:origin-left{transform-origin:0}.skippr\\:origin-right{transform-origin:100%}.skippr\\:origin-top-left{transform-origin:0 0}.skippr\\:origin-top-right{transform-origin:100% 0}.skippr\\:-translate-x-1\\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:-translate-x-7{--tw-translate-x:calc(var(--skippr-spacing)*-7);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:translate-x-7{--tw-translate-x:calc(var(--skippr-spacing)*7);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:-translate-y-1\\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:scale-0{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:-rotate-90{rotate:-90deg}.skippr\\:rotate-45{rotate:45deg}.skippr\\:rotate-\\[225deg\\]{rotate:225deg}.skippr\\:\\[animation\\:skippr-agent-in_200ms_ease-out_240ms_both\\]{animation:.2s ease-out .24s both skippr-agent-in}.skippr\\:\\[animation\\:skippr-banner-look_2\\.4s_ease-in-out_infinite\\]{animation:2.4s ease-in-out infinite skippr-banner-look}.skippr\\:\\[animation\\:skippr-finger-tap_1\\.1s_ease-in-out_infinite\\]{animation:1.1s ease-in-out infinite skippr-finger-tap}.skippr\\:\\[animation\\:skippr-orb-in_320ms_cubic-bezier\\(0\\.34\\,1\\.3\\,0\\.64\\,1\\)\\]{animation:.32s cubic-bezier(.34,1.3,.64,1) skippr-orb-in}.skippr\\:\\[animation\\:skippr-stage-fade_240ms_ease-out\\]{animation:.24s ease-out skippr-stage-fade}.skippr\\:\\[animation\\:skippr-tip-in_360ms_cubic-bezier\\(0\\.34\\,1\\.3\\,0\\.64\\,1\\)_backwards\\]{animation:.36s cubic-bezier(.34,1.3,.64,1) backwards skippr-tip-in}.skippr\\:\\[animation\\:skippr-toolset-pop_440ms_cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\]{animation:.44s cubic-bezier(.22,1,.36,1) skippr-toolset-pop}.skippr\\:animate-\\[skippr-banner-look_2\\.4s_ease-in-out_infinite\\]{animation:2.4s ease-in-out infinite skippr-banner-look}.skippr\\:animate-\\[skippr-bubble-in_0\\.28s_ease-out\\]{animation:.28s ease-out skippr-bubble-in}.skippr\\:animate-\\[skippr-fade-in_0\\.3s_ease-out\\]{animation:.3s ease-out skippr-fade-in}.skippr\\:animate-\\[skippr-pill-content_0\\.22s_ease-out\\]{animation:.22s ease-out skippr-pill-content}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.3s_infinite\\]{animation:1.1s ease-in-out .3s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.6s_infinite\\]{animation:1.1s ease-in-out .6s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.15s_infinite\\]{animation:1.1s ease-in-out .15s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.45s_infinite\\]{animation:1.1s ease-in-out .45s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_infinite\\]{animation:1.1s ease-in-out infinite skippr-speak}.skippr\\:animate-bounce{animation:var(--skippr-animate-bounce)}.skippr\\:animate-ping{animation:var(--skippr-animate-ping)}.skippr\\:animate-pulse{animation:var(--skippr-animate-pulse)}.skippr\\:animate-skippr-annotation-pulse{animation:1.8s ease-in-out infinite skippr-annotation-pulse}.skippr\\:animate-skippr-click-ping{animation:.5s ease-out forwards skippr-click-ping}.skippr\\:animate-skippr-cursor-pop{animation:.22s ease-out skippr-cursor-pop}.skippr\\:animate-skippr-press{animation:.5s ease-in-out skippr-press}.skippr\\:animate-skippr-tab-fade{animation:.2s ease-out skippr-tab-fade}.skippr\\:animate-skippr-thinking-dot{animation:1.2s ease-in-out infinite skippr-thinking-dot}.skippr\\:animate-spin{animation:var(--skippr-animate-spin)}.skippr\\:cursor-default{cursor:default}.skippr\\:cursor-grab{cursor:grab}.skippr\\:cursor-pointer{cursor:pointer}.skippr\\:touch-none{touch-action:none}.skippr\\:resize-none{resize:none}.skippr\\:flex-col{flex-direction:column}.skippr\\:flex-col-reverse{flex-direction:column-reverse}.skippr\\:items-center{align-items:center}.skippr\\:items-end{align-items:flex-end}.skippr\\:items-start{align-items:flex-start}.skippr\\:justify-between{justify-content:space-between}.skippr\\:justify-center{justify-content:center}.skippr\\:justify-end{justify-content:flex-end}.skippr\\: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-\\[14px\\]{border-radius:14px}.skippr\\:rounded-\\[16px\\]{border-radius:16px}.skippr\\:rounded-\\[20px\\]{border-radius:20px}.skippr\\:rounded-full{border-radius:3.40282e38px}.skippr\\:rounded-lg{border-radius:.625rem}.skippr\\:rounded-md{border-radius:.5rem}.skippr\\:rounded-sm{border-radius:.375rem}.skippr\\:rounded-xl{border-radius:.875rem}.skippr\\:rounded-tl-md{border-top-left-radius:.5rem}.skippr\\:border{border-style:var(--tw-border-style);border-width:1px}.skippr\\:border-0{border-style:var(--tw-border-style);border-width:0}.skippr\\:border-2{border-style:var(--tw-border-style);border-width:2px}.skippr\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.skippr\\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.skippr\\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.skippr\\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.skippr\\:border-\\[\\#2bc0ae\\]{border-color:#2bc0ae}.skippr\\:border-border,.skippr\\:border-input{border-color:oklch(92.3% .003 48.717)}.skippr\\:border-primary\\/20{border-color:oklab(29.9244% .0107414 -.0305411/.2)}.skippr\\:border-r-border{border-right-color:oklch(92.3% .003 48.717)}.skippr\\:border-l-border{border-left-color:oklch(92.3% .003 48.717)}.skippr\\:bg-\\[\\#2bc0ae\\]{background-color:#2bc0ae}.skippr\\:bg-\\[\\#2bc0ae\\]\\/50{background-color:oklab(72.9347% -.121518 -.00545585/.5)}.skippr\\:bg-amber-50{background-color:var(--skippr-color-amber-50)}.skippr\\:bg-amber-400{background-color:var(--skippr-color-amber-400)}.skippr\\:bg-background{background-color:oklch(100% 0 0)}.skippr\\:bg-black\\/\\[0\\.07\\]{background-color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:bg-black\\/\\[0\\.07\\]{background-color:color-mix(in oklab,var(--skippr-color-black)7.0%,transparent)}}.skippr\\:bg-bubble{background-color:#2d2b3d}.skippr\\:bg-bubble\\/95{background-color:oklab(29.9244% .0107414 -.0305411/.95)}.skippr\\:bg-card{background-color:oklch(100% 0 0)}.skippr\\:bg-current{background-color:currentColor}.skippr\\:bg-destructive{background-color:#d94f4f}.skippr\\:bg-emerald-400{background-color:var(--skippr-color-emerald-400)}.skippr\\:bg-emerald-500{background-color:var(--skippr-color-emerald-500)}.skippr\\:bg-foreground{background-color:oklch(14.7% .004 49.25)}.skippr\\:bg-green-100{background-color:var(--skippr-color-green-100)}.skippr\\:bg-launcher{background-color:#2d2d3f}.skippr\\:bg-muted{background-color:oklch(97% .001 106.424)}.skippr\\:bg-muted-foreground\\/20{background-color:oklab(55.3% .00687528 .0110332/.2)}.skippr\\:bg-muted-foreground\\/40{background-color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:bg-muted\\/50{background-color:oklab(97% -.000282743 .000959196/.5)}.skippr\\:bg-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-secondary{background-color:#ffdfb5}.skippr\\:bg-transparent{background-color:#0000}.skippr\\:bg-white{background-color:var(--skippr-color-white)}.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-2{padding:calc(var(--skippr-spacing)*2)}.skippr\\:p-3{padding:calc(var(--skippr-spacing)*3)}.skippr\\:p-3\\.5{padding:calc(var(--skippr-spacing)*3.5)}.skippr\\:p-4{padding:calc(var(--skippr-spacing)*4)}.skippr\\:px-1{padding-inline:calc(var(--skippr-spacing)*1)}.skippr\\:px-1\\.5{padding-inline:calc(var(--skippr-spacing)*1.5)}.skippr\\:px-2{padding-inline:calc(var(--skippr-spacing)*2)}.skippr\\:px-2\\.5{padding-inline:calc(var(--skippr-spacing)*2.5)}.skippr\\:px-3{padding-inline:calc(var(--skippr-spacing)*3)}.skippr\\:px-4{padding-inline:calc(var(--skippr-spacing)*4)}.skippr\\:px-6{padding-inline:calc(var(--skippr-spacing)*6)}.skippr\\:px-8{padding-inline:calc(var(--skippr-spacing)*8)}.skippr\\:py-0\\.5{padding-block:calc(var(--skippr-spacing)*.5)}.skippr\\:py-1{padding-block:calc(var(--skippr-spacing)*1)}.skippr\\:py-1\\.5{padding-block:calc(var(--skippr-spacing)*1.5)}.skippr\\:py-2{padding-block:calc(var(--skippr-spacing)*2)}.skippr\\:py-2\\.5{padding-block:calc(var(--skippr-spacing)*2.5)}.skippr\\:py-3{padding-block:calc(var(--skippr-spacing)*3)}.skippr\\:py-4{padding-block:calc(var(--skippr-spacing)*4)}.skippr\\:pt-1\\.5{padding-top:calc(var(--skippr-spacing)*1.5)}.skippr\\:pt-2{padding-top:calc(var(--skippr-spacing)*2)}.skippr\\:pr-3{padding-right:calc(var(--skippr-spacing)*3)}.skippr\\:pb-0{padding-bottom:calc(var(--skippr-spacing)*0)}.skippr\\:pb-2{padding-bottom:calc(var(--skippr-spacing)*2)}.skippr\\:pl-1\\.5{padding-left:calc(var(--skippr-spacing)*1.5)}.skippr\\:pl-3\\.5{padding-left:calc(var(--skippr-spacing)*3.5)}.skippr\\:text-center{text-align:center}.skippr\\:text-left{text-align:left}.skippr\\:font-mono{font-family:var(--skippr-font-mono)}.skippr\\:text-sm{font-size:var(--skippr-text-sm);line-height:var(--tw-leading,var(--skippr-text-sm--line-height))}.skippr\\:text-xs{font-size:var(--skippr-text-xs);line-height:var(--tw-leading,var(--skippr-text-xs--line-height))}.skippr\\:text-\\[10px\\]{font-size:10px}.skippr\\:text-\\[11px\\]{font-size:11px}.skippr\\:text-\\[13px\\]{font-size:13px}.skippr\\:leading-5{--tw-leading:calc(var(--skippr-spacing)*5);line-height:calc(var(--skippr-spacing)*5)}.skippr\\:leading-relaxed{--tw-leading:var(--skippr-leading-relaxed);line-height:var(--skippr-leading-relaxed)}.skippr\\:leading-snug{--tw-leading:var(--skippr-leading-snug);line-height:var(--skippr-leading-snug)}.skippr\\:leading-tight{--tw-leading:var(--skippr-leading-tight);line-height:var(--skippr-leading-tight)}.skippr\\:font-medium{--tw-font-weight:var(--skippr-font-weight-medium);font-weight:var(--skippr-font-weight-medium)}.skippr\\:font-semibold{--tw-font-weight:var(--skippr-font-weight-semibold);font-weight:var(--skippr-font-weight-semibold)}.skippr\\:whitespace-nowrap{white-space:nowrap}.skippr\\:text-\\[\\#2bc0ae\\]{color:#2bc0ae}.skippr\\:text-amber-700{color:var(--skippr-color-amber-700)}.skippr\\:text-amber-950{color:var(--skippr-color-amber-950)}.skippr\\:text-background{color:oklch(100% 0 0)}.skippr\\:text-black{color:var(--skippr-color-black)}.skippr\\:text-bubble{color:#2d2b3d}.skippr\\:text-chart-3{color:oklch(66.6% .179 58.318)}.skippr\\:text-destructive{color:#d94f4f}.skippr\\:text-foreground{color:oklch(14.7% .004 49.25)}.skippr\\:text-green-700{color:var(--skippr-color-green-700)}.skippr\\:text-muted-foreground{color:oklch(55.3% .013 58.071)}.skippr\\:text-muted-foreground\\/30{color:oklab(55.3% .00687528 .0110332/.3)}.skippr\\:text-muted-foreground\\/40{color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:text-muted-foreground\\/60{color:oklab(55.3% .00687528 .0110332/.6)}.skippr\\:text-muted-foreground\\/70{color:oklab(55.3% .00687528 .0110332/.7)}.skippr\\:text-neutral-700{color:var(--skippr-color-neutral-700)}.skippr\\:text-primary{color:#2d2b3d}.skippr\\:text-primary-foreground{color:#fff}.skippr\\:text-primary-foreground\\/70{color:oklab(100% 0 5.96046e-8/.7)}.skippr\\:text-red-400{color:var(--skippr-color-red-400)}.skippr\\:text-red-600{color:var(--skippr-color-red-600)}.skippr\\:text-red-700{color:var(--skippr-color-red-700)}.skippr\\:text-secondary-foreground{color:#613700}.skippr\\:text-white{color:var(--skippr-color-white)}.skippr\\:line-through{text-decoration-line:line-through}.skippr\\:placeholder-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}.skippr\\:opacity-0{opacity:0}.skippr\\:opacity-40{opacity:.4}.skippr\\:opacity-75{opacity:.75}.skippr\\:opacity-100{opacity:1}.skippr\\:shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[-6px_6px_22px_rgba\\(0\\,0\\,0\\,0\\.3\\)\\]{--tw-shadow:-6px 6px 22px var(--tw-shadow-color,#0000004d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.12\\)\\]{--tw-shadow:0 4px 12px var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_14px_rgba\\(0\\,0\\,0\\,0\\.3\\)\\]{--tw-shadow:0 4px 14px var(--tw-shadow-color,#0000004d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_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-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-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\\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:duration-75{--tw-duration:75ms;transition-duration:75ms}.skippr\\:duration-150{--tw-duration:.15s;transition-duration:.15s}.skippr\\:duration-200{--tw-duration:.2s;transition-duration:.2s}.skippr\\:duration-300{--tw-duration:.3s;transition-duration:.3s}.skippr\\:ease-in-out{--tw-ease:var(--skippr-ease-in-out);transition-timing-function:var(--skippr-ease-in-out)}.skippr\\:ease-out{--tw-ease:var(--skippr-ease-out);transition-timing-function:var(--skippr-ease-out)}.skippr\\:outline-none{--tw-outline-style:none;outline-style:none}.skippr\\:select-none{-webkit-user-select:none;user-select:none}.skippr\\:\\[animation-delay\\:0ms\\]{animation-delay:0s}.skippr\\:\\[animation-delay\\:150ms\\]{animation-delay:.15s}.skippr\\:\\[animation-delay\\:200ms\\]{animation-delay:.2s}.skippr\\:\\[animation-delay\\:300ms\\]{animation-delay:.3s}.skippr\\:\\[animation-delay\\:400ms\\]{animation-delay:.4s}.skippr\\:\\[overflow-anchor\\:none\\]{overflow-anchor:none}.skippr\\:group-focus-within\\:scale-100:is(:where(.skippr\\:group):focus-within *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-focus-within\\:opacity-100:is(:where(.skippr\\:group):focus-within *){opacity:1}@media (hover:hover){.skippr\\:group-hover\\:scale-100:is(:where(.skippr\\:group):hover *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-hover\\:text-red-300:is(:where(.skippr\\:group):hover *){color:var(--skippr-color-red-300)}.skippr\\:group-hover\\:text-white\\/80:is(:where(.skippr\\:group):hover *){color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:group-hover\\:text-white\\/80:is(:where(.skippr\\:group):hover *){color:color-mix(in oklab,var(--skippr-color-white)80%,transparent)}}.skippr\\:group-hover\\:opacity-100:is(:where(.skippr\\:group):hover *){opacity:1}}.skippr\\:placeholder\\:text-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}@media (hover:hover){.skippr\\:hover\\:-translate-y-0\\.5:hover{--tw-translate-y:calc(var(--skippr-spacing)*-.5);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:hover\\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:hover\\:bg-\\[\\#3a384b\\]:hover{background-color:#3a384b}.skippr\\:hover\\:bg-accent:hover{background-color:#e7e5e4}.skippr\\:hover\\:bg-amber-100:hover{background-color:var(--skippr-color-amber-100)}.skippr\\:hover\\:bg-bubble:hover{background-color:#2d2b3d}.skippr\\:hover\\:bg-destructive\\/90:hover{background-color:oklab(61.4357% .15892 .0698893/.9)}.skippr\\:hover\\:bg-green-200:hover{background-color:var(--skippr-color-green-200)}.skippr\\:hover\\:bg-muted\\/70:hover{background-color:oklab(97% -.000282743 .000959196/.7)}.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-foreground\\/10:hover{background-color:oklab(100% 0 5.96046e-8/.1)}.skippr\\:hover\\:bg-primary\\/90:hover{background-color:oklab(29.9244% .0107414 -.0305411/.9)}.skippr\\:hover\\:bg-red-200:hover{background-color:var(--skippr-color-red-200)}.skippr\\:hover\\:bg-secondary\\/80:hover{background-color:oklab(91.9963% .0175391 .0626889/.8)}.skippr\\:hover\\:text-accent-foreground:hover{color:oklch(21.6% .006 56.043)}.skippr\\:hover\\:text-foreground:hover{color:oklch(14.7% .004 49.25)}.skippr\\:hover\\:text-primary-foreground:hover{color:#fff}.skippr\\:hover\\: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-bubble\\/60:focus-visible{--tw-ring-color:oklab(29.9244% .0107414 -.0305411/.6)}.skippr\\:focus-visible\\:ring-ring:focus-visible{--tw-ring-color:oklch(70.9% .01 56.259)}.skippr\\:focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.skippr\\:focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.skippr\\:active\\:translate-y-0:active{--tw-translate-y:calc(var(--skippr-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:disabled\\:pointer-events-none:disabled{pointer-events:none}.skippr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.skippr\\:disabled\\:opacity-50:disabled{opacity:.5}.skippr\\:disabled\\:opacity-60:disabled{opacity:.6}@media (prefers-reduced-motion:reduce){.skippr\\:motion-reduce\\:hidden{display:none}.skippr\\:motion-reduce\\:animate-none{animation:none}}.skippr\\:\\[\\&_svg\\]\\:pointer-events-none svg{pointer-events:none}.skippr\\:\\[\\&_svg\\]\\:shrink-0 svg{flex-shrink:0}.skippr\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 svg:not([class*=size-]){width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}}@keyframes skippr-tap{0%{transform:scale(1)}45%{transform:scale(.7)}to{transform:scale(1)}}@keyframes skippr-press{0%{transform:scale(1)}55%{transform:scale(1)}85%{transform:scale(.68)}to{transform:scale(1)}}@keyframes skippr-cursor-pop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes skippr-click-ping{0%{opacity:.9;transform:translate(-50%,-50%)scale(.4)}to{opacity:0;transform:translate(-50%,-50%)scale(2.4)}}@keyframes skippr-tab-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-speak{0%,to{opacity:.6;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-thinking-dot{0%,80%,to{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}@keyframes skippr-pulse-ring{0%,to{box-shadow:0 0 #2d2b3d66}50%{box-shadow:0 0 0 10px #2d2b3d00}}@keyframes skippr-annotation-pulse{0%,to{box-shadow:0 0 #2bc0ae80}50%{box-shadow:0 0 0 6px #2bc0ae00}}@keyframes skippr-speak-ripple{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}@keyframes skippr-bar{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}@keyframes skippr-breathe{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes skippr-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-wave{0%,to{opacity:.4;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-bubble-in{0%{opacity:0;transform:translateY(12px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes skippr-tip-in{0%{opacity:0;transform:translateY(14px)scale(.96)}60%{opacity:1;transform:translateY(-2px)scale(1.01)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes skippr-pill-content{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes skippr-banner-look{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}@keyframes skippr-finger-tap{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(2px)rotate(-6deg)}}@keyframes skippr-toolset-pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes skippr-stage-fade{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes skippr-agent-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes skippr-orb-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.skippr-no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.skippr-no-scrollbar::-webkit-scrollbar{display:none}:host{color:var(--color-foreground)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}`;
|
|
4203
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--skippr-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--skippr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--skippr-color-red-50:oklch(97.1% .013 17.38);--skippr-color-red-100:oklch(93.6% .032 17.717);--skippr-color-red-200:oklch(88.5% .062 18.334);--skippr-color-red-300:oklch(80.8% .114 19.571);--skippr-color-red-400:oklch(70.4% .191 22.216);--skippr-color-red-500:oklch(63.7% .237 25.331);--skippr-color-red-600:oklch(57.7% .245 27.325);--skippr-color-red-700:oklch(50.5% .213 27.518);--skippr-color-amber-50:oklch(98.7% .022 95.277);--skippr-color-amber-100:oklch(96.2% .059 95.617);--skippr-color-amber-400:oklch(82.8% .189 84.429);--skippr-color-amber-700:oklch(55.5% .163 48.998);--skippr-color-amber-950:oklch(27.9% .077 45.635);--skippr-color-green-100:oklch(96.2% .044 156.743);--skippr-color-green-200:oklch(92.5% .084 155.995);--skippr-color-green-700:oklch(52.7% .154 150.069);--skippr-color-emerald-400:oklch(76.5% .177 163.223);--skippr-color-emerald-500:oklch(69.6% .17 162.48);--skippr-color-neutral-100:oklch(97% 0 0);--skippr-color-neutral-200:oklch(92.2% 0 0);--skippr-color-neutral-500:oklch(55.6% 0 0);--skippr-color-neutral-700:oklch(37.1% 0 0);--skippr-color-black:#000;--skippr-color-white:#fff;--skippr-spacing:.25rem;--skippr-text-xs:.75rem;--skippr-text-xs--line-height:calc(1/.75);--skippr-text-sm:.875rem;--skippr-text-sm--line-height:calc(1.25/.875);--skippr-font-weight-medium:500;--skippr-font-weight-semibold:600;--skippr-leading-tight:1.25;--skippr-leading-snug:1.375;--skippr-leading-relaxed:1.625;--skippr-ease-out:cubic-bezier(0,0,.2,1);--skippr-ease-in-out:cubic-bezier(.4,0,.2,1);--skippr-animate-spin:spin 1s linear infinite;--skippr-animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--skippr-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--skippr-animate-bounce:bounce 1s infinite;--skippr-blur-sm:8px;--skippr-default-transition-duration:.15s;--skippr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--skippr-default-font-family:var(--skippr-font-sans);--skippr-default-mono-font-family:var(--skippr-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--skippr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--skippr-default-font-feature-settings,normal);font-variation-settings:var(--skippr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--skippr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--skippr-default-mono-font-feature-settings,normal);font-variation-settings:var(--skippr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.skippr\\:pointer-events-none{pointer-events:none}.skippr\\:absolute{position:absolute}.skippr\\:fixed{position:fixed}.skippr\\:relative{position:relative}.skippr\\:sticky{position:sticky}.skippr\\:inset-0{inset:calc(var(--skippr-spacing)*0)}.skippr\\:inset-y-0{inset-block:calc(var(--skippr-spacing)*0)}.skippr\\:top-0{top:calc(var(--skippr-spacing)*0)}.skippr\\:top-1\\/2{top:50%}.skippr\\:top-full{top:100%}.skippr\\:-right-8{right:calc(var(--skippr-spacing)*-8)}.skippr\\:right-0{right:calc(var(--skippr-spacing)*0)}.skippr\\:right-3{right:calc(var(--skippr-spacing)*3)}.skippr\\:right-5{right:calc(var(--skippr-spacing)*5)}.skippr\\:right-6{right:calc(var(--skippr-spacing)*6)}.skippr\\:right-7{right:calc(var(--skippr-spacing)*7)}.skippr\\:right-\\[24px\\]{right:24px}.skippr\\:-bottom-1{bottom:calc(var(--skippr-spacing)*-1)}.skippr\\:-bottom-9{bottom:calc(var(--skippr-spacing)*-9)}.skippr\\:bottom-20{bottom:calc(var(--skippr-spacing)*20)}.skippr\\:bottom-full{bottom:100%}.skippr\\:-left-8{left:calc(var(--skippr-spacing)*-8)}.skippr\\:left-0{left:calc(var(--skippr-spacing)*0)}.skippr\\:left-1\\/2{left:50%}.skippr\\:left-3{left:calc(var(--skippr-spacing)*3)}.skippr\\:left-5{left:calc(var(--skippr-spacing)*5)}.skippr\\:left-6{left:calc(var(--skippr-spacing)*6)}.skippr\\:left-7{left:calc(var(--skippr-spacing)*7)}.skippr\\:left-\\[24px\\]{left:24px}.skippr\\:z-10{z-index:10}.skippr\\:z-20{z-index:20}.skippr\\:z-\\[9998\\]{z-index:9998}.skippr\\:z-\\[9999\\]{z-index:9999}.skippr\\:mx-auto{margin-inline:auto}.skippr\\:-mt-\\[5px\\]{margin-top:-5px}.skippr\\:mt-0\\.5{margin-top:calc(var(--skippr-spacing)*.5)}.skippr\\:mt-1{margin-top:calc(var(--skippr-spacing)*1)}.skippr\\:mt-1\\.5{margin-top:calc(var(--skippr-spacing)*1.5)}.skippr\\:mt-3{margin-top:calc(var(--skippr-spacing)*3)}.skippr\\:mt-3\\.5{margin-top:calc(var(--skippr-spacing)*3.5)}.skippr\\:mr-7{margin-right:calc(var(--skippr-spacing)*7)}.skippr\\:-mb-\\[5px\\]{margin-bottom:-5px}.skippr\\:mb-1\\.5{margin-bottom:calc(var(--skippr-spacing)*1.5)}.skippr\\:mb-2{margin-bottom:calc(var(--skippr-spacing)*2)}.skippr\\:mb-3{margin-bottom:calc(var(--skippr-spacing)*3)}.skippr\\:mb-4{margin-bottom:calc(var(--skippr-spacing)*4)}.skippr\\:ml-0\\.5{margin-left:calc(var(--skippr-spacing)*.5)}.skippr\\:ml-1{margin-left:calc(var(--skippr-spacing)*1)}.skippr\\:ml-7{margin-left:calc(var(--skippr-spacing)*7)}.skippr\\:flex{display:flex}.skippr\\:inline-flex{display:inline-flex}.skippr\\:size-1{width:calc(var(--skippr-spacing)*1);height:calc(var(--skippr-spacing)*1)}.skippr\\:size-1\\.5{width:calc(var(--skippr-spacing)*1.5);height:calc(var(--skippr-spacing)*1.5)}.skippr\\:size-2{width:calc(var(--skippr-spacing)*2);height:calc(var(--skippr-spacing)*2)}.skippr\\:size-2\\.5{width:calc(var(--skippr-spacing)*2.5);height:calc(var(--skippr-spacing)*2.5)}.skippr\\:size-3\\.5{width:calc(var(--skippr-spacing)*3.5);height:calc(var(--skippr-spacing)*3.5)}.skippr\\:size-4{width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}.skippr\\:size-5{width:calc(var(--skippr-spacing)*5);height:calc(var(--skippr-spacing)*5)}.skippr\\:size-6{width:calc(var(--skippr-spacing)*6);height:calc(var(--skippr-spacing)*6)}.skippr\\:size-7{width:calc(var(--skippr-spacing)*7);height:calc(var(--skippr-spacing)*7)}.skippr\\:size-8{width:calc(var(--skippr-spacing)*8);height:calc(var(--skippr-spacing)*8)}.skippr\\:size-9{width:calc(var(--skippr-spacing)*9);height:calc(var(--skippr-spacing)*9)}.skippr\\:size-10{width:calc(var(--skippr-spacing)*10);height:calc(var(--skippr-spacing)*10)}.skippr\\:size-12{width:calc(var(--skippr-spacing)*12);height:calc(var(--skippr-spacing)*12)}.skippr\\:size-\\[5px\\]{width:5px;height:5px}.skippr\\:size-\\[6px\\]{width:6px;height:6px}.skippr\\:size-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-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-12{height:calc(var(--skippr-spacing)*12)}.skippr\\:h-16{height:calc(var(--skippr-spacing)*16)}.skippr\\:h-\\[18\\.5px\\]{height:18.5px}.skippr\\:h-\\[50px\\]{height:50px}.skippr\\:h-full{height:100%}.skippr\\:min-h-0{min-height:calc(var(--skippr-spacing)*0)}.skippr\\:w-0{width:calc(var(--skippr-spacing)*0)}.skippr\\:w-3\\.5{width:calc(var(--skippr-spacing)*3.5)}.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-10{width:calc(var(--skippr-spacing)*10)}.skippr\\:w-40{width:calc(var(--skippr-spacing)*40)}.skippr\\:w-\\[2px\\]{width:2px}.skippr\\:w-\\[3px\\]{width:3px}.skippr\\:w-\\[15\\.4px\\]{width:15.4px}.skippr\\:w-\\[50px\\]{width:50px}.skippr\\:w-full{width:100%}.skippr\\:max-w-64{max-width:calc(var(--skippr-spacing)*64)}.skippr\\:max-w-72{max-width:calc(var(--skippr-spacing)*72)}.skippr\\:max-w-\\[80\\%\\]{max-width:80%}.skippr\\:min-w-0{min-width:calc(var(--skippr-spacing)*0)}.skippr\\:flex-1{flex:1}.skippr\\:shrink-0{flex-shrink:0}.skippr\\:origin-bottom-left{transform-origin:0 100%}.skippr\\:origin-bottom-right{transform-origin:100% 100%}.skippr\\:origin-center{transform-origin:50%}.skippr\\:origin-left{transform-origin:0}.skippr\\:origin-right{transform-origin:100%}.skippr\\:origin-top-left{transform-origin:0 0}.skippr\\:origin-top-right{transform-origin:100% 0}.skippr\\:-translate-x-1\\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:-translate-x-7{--tw-translate-x:calc(var(--skippr-spacing)*-7);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:translate-x-7{--tw-translate-x:calc(var(--skippr-spacing)*7);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:-translate-y-1\\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:scale-0{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:-rotate-90{rotate:-90deg}.skippr\\:rotate-45{rotate:45deg}.skippr\\:rotate-\\[225deg\\]{rotate:225deg}.skippr\\:\\[animation\\:skippr-agent-in_200ms_ease-out_240ms_both\\]{animation:.2s ease-out .24s both skippr-agent-in}.skippr\\:\\[animation\\:skippr-banner-look_2\\.4s_ease-in-out_infinite\\]{animation:2.4s ease-in-out infinite skippr-banner-look}.skippr\\:\\[animation\\:skippr-finger-tap_1\\.1s_ease-in-out_infinite\\]{animation:1.1s ease-in-out infinite skippr-finger-tap}.skippr\\:\\[animation\\:skippr-orb-in_320ms_cubic-bezier\\(0\\.34\\,1\\.3\\,0\\.64\\,1\\)\\]{animation:.32s cubic-bezier(.34,1.3,.64,1) skippr-orb-in}.skippr\\:\\[animation\\:skippr-stage-fade_240ms_ease-out\\]{animation:.24s ease-out skippr-stage-fade}.skippr\\:\\[animation\\:skippr-tip-in_360ms_cubic-bezier\\(0\\.34\\,1\\.3\\,0\\.64\\,1\\)_backwards\\]{animation:.36s cubic-bezier(.34,1.3,.64,1) backwards skippr-tip-in}.skippr\\:\\[animation\\:skippr-toolset-pop_440ms_cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\]{animation:.44s cubic-bezier(.22,1,.36,1) skippr-toolset-pop}.skippr\\:animate-\\[skippr-banner-look_2\\.4s_ease-in-out_infinite\\]{animation:2.4s ease-in-out infinite skippr-banner-look}.skippr\\:animate-\\[skippr-bubble-in_0\\.28s_ease-out\\]{animation:.28s ease-out skippr-bubble-in}.skippr\\:animate-\\[skippr-fade-in_0\\.3s_ease-out\\]{animation:.3s ease-out skippr-fade-in}.skippr\\:animate-\\[skippr-pill-content_0\\.22s_ease-out\\]{animation:.22s ease-out skippr-pill-content}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.3s_infinite\\]{animation:1.1s ease-in-out .3s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.6s_infinite\\]{animation:1.1s ease-in-out .6s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.15s_infinite\\]{animation:1.1s ease-in-out .15s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.45s_infinite\\]{animation:1.1s ease-in-out .45s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_infinite\\]{animation:1.1s ease-in-out infinite skippr-speak}.skippr\\:animate-bounce{animation:var(--skippr-animate-bounce)}.skippr\\:animate-ping{animation:var(--skippr-animate-ping)}.skippr\\:animate-pulse{animation:var(--skippr-animate-pulse)}.skippr\\:animate-skippr-annotation-pulse{animation:1.8s ease-in-out infinite skippr-annotation-pulse}.skippr\\:animate-skippr-click-ping{animation:.5s ease-out forwards skippr-click-ping}.skippr\\:animate-skippr-cursor-pop{animation:.22s ease-out skippr-cursor-pop}.skippr\\:animate-skippr-press{animation:.5s ease-in-out skippr-press}.skippr\\:animate-skippr-tab-fade{animation:.2s ease-out skippr-tab-fade}.skippr\\:animate-skippr-thinking-dot{animation:1.2s ease-in-out infinite skippr-thinking-dot}.skippr\\:animate-spin{animation:var(--skippr-animate-spin)}.skippr\\:cursor-default{cursor:default}.skippr\\:cursor-grab{cursor:grab}.skippr\\:cursor-pointer{cursor:pointer}.skippr\\:touch-none{touch-action:none}.skippr\\:resize-none{resize:none}.skippr\\:flex-col{flex-direction:column}.skippr\\:flex-col-reverse{flex-direction:column-reverse}.skippr\\:items-center{align-items:center}.skippr\\:items-end{align-items:flex-end}.skippr\\:items-start{align-items:flex-start}.skippr\\:justify-between{justify-content:space-between}.skippr\\:justify-center{justify-content:center}.skippr\\:justify-end{justify-content:flex-end}.skippr\\:justify-start{justify-content:flex-start}.skippr\\:gap-1{gap:calc(var(--skippr-spacing)*1)}.skippr\\:gap-1\\.5{gap:calc(var(--skippr-spacing)*1.5)}.skippr\\:gap-2{gap:calc(var(--skippr-spacing)*2)}.skippr\\:gap-2\\.5{gap:calc(var(--skippr-spacing)*2.5)}.skippr\\:gap-3{gap:calc(var(--skippr-spacing)*3)}.skippr\\:gap-\\[2px\\]{gap:2px}.skippr\\:gap-\\[3px\\]{gap:3px}:where(.skippr\\:space-y-0\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}.skippr\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.skippr\\:overflow-hidden{overflow:hidden}.skippr\\:overflow-y-auto{overflow-y:auto}.skippr\\:rounded-2xl{border-radius:1.125rem}.skippr\\:rounded-\\[1rem\\]{border-radius:1rem}.skippr\\:rounded-\\[10px\\]{border-radius:10px}.skippr\\:rounded-\\[12px\\]{border-radius:12px}.skippr\\:rounded-\\[14px\\]{border-radius:14px}.skippr\\:rounded-\\[16px\\]{border-radius:16px}.skippr\\:rounded-\\[20px\\]{border-radius:20px}.skippr\\:rounded-full{border-radius:3.40282e38px}.skippr\\:rounded-lg{border-radius:.625rem}.skippr\\:rounded-md{border-radius:.5rem}.skippr\\:rounded-sm{border-radius:.375rem}.skippr\\:rounded-xl{border-radius:.875rem}.skippr\\:rounded-tl-md{border-top-left-radius:.5rem}.skippr\\:border{border-style:var(--tw-border-style);border-width:1px}.skippr\\:border-0{border-style:var(--tw-border-style);border-width:0}.skippr\\:border-2{border-style:var(--tw-border-style);border-width:2px}.skippr\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.skippr\\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.skippr\\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.skippr\\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.skippr\\:border-\\[\\#2bc0ae\\]{border-color:#2bc0ae}.skippr\\:border-border,.skippr\\:border-input{border-color:oklch(92.3% .003 48.717)}.skippr\\:border-primary\\/20{border-color:oklab(29.9244% .0107414 -.0305411/.2)}.skippr\\:border-r-border{border-right-color:oklch(92.3% .003 48.717)}.skippr\\:border-l-border{border-left-color:oklch(92.3% .003 48.717)}.skippr\\:bg-\\[\\#2bc0ae\\]{background-color:#2bc0ae}.skippr\\:bg-\\[\\#2bc0ae\\]\\/50{background-color:oklab(72.9347% -.121518 -.00545585/.5)}.skippr\\:bg-amber-50{background-color:var(--skippr-color-amber-50)}.skippr\\:bg-amber-400{background-color:var(--skippr-color-amber-400)}.skippr\\:bg-background{background-color:oklch(100% 0 0)}.skippr\\:bg-black\\/\\[0\\.07\\]{background-color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:bg-black\\/\\[0\\.07\\]{background-color:color-mix(in oklab,var(--skippr-color-black)7.0%,transparent)}}.skippr\\:bg-bubble{background-color:#2d2b3d}.skippr\\:bg-bubble\\/95{background-color:oklab(29.9244% .0107414 -.0305411/.95)}.skippr\\:bg-card{background-color:oklch(100% 0 0)}.skippr\\:bg-current{background-color:currentColor}.skippr\\:bg-destructive{background-color:#d94f4f}.skippr\\:bg-emerald-400{background-color:var(--skippr-color-emerald-400)}.skippr\\:bg-emerald-500{background-color:var(--skippr-color-emerald-500)}.skippr\\:bg-foreground{background-color:oklch(14.7% .004 49.25)}.skippr\\:bg-green-100{background-color:var(--skippr-color-green-100)}.skippr\\:bg-launcher{background-color:#2d2d3f}.skippr\\:bg-muted{background-color:oklch(97% .001 106.424)}.skippr\\:bg-muted-foreground\\/20{background-color:oklab(55.3% .00687528 .0110332/.2)}.skippr\\:bg-muted-foreground\\/40{background-color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:bg-muted\\/50{background-color:oklab(97% -.000282743 .000959196/.5)}.skippr\\:bg-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{background-color:var(--skippr-color-white)}.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-2{padding:calc(var(--skippr-spacing)*2)}.skippr\\:p-3{padding:calc(var(--skippr-spacing)*3)}.skippr\\:p-3\\.5{padding:calc(var(--skippr-spacing)*3.5)}.skippr\\:p-4{padding:calc(var(--skippr-spacing)*4)}.skippr\\:px-1{padding-inline:calc(var(--skippr-spacing)*1)}.skippr\\:px-1\\.5{padding-inline:calc(var(--skippr-spacing)*1.5)}.skippr\\:px-2{padding-inline:calc(var(--skippr-spacing)*2)}.skippr\\:px-2\\.5{padding-inline:calc(var(--skippr-spacing)*2.5)}.skippr\\:px-3{padding-inline:calc(var(--skippr-spacing)*3)}.skippr\\:px-4{padding-inline:calc(var(--skippr-spacing)*4)}.skippr\\:px-6{padding-inline:calc(var(--skippr-spacing)*6)}.skippr\\:px-8{padding-inline:calc(var(--skippr-spacing)*8)}.skippr\\:py-0\\.5{padding-block:calc(var(--skippr-spacing)*.5)}.skippr\\:py-1{padding-block:calc(var(--skippr-spacing)*1)}.skippr\\:py-1\\.5{padding-block:calc(var(--skippr-spacing)*1.5)}.skippr\\:py-2{padding-block:calc(var(--skippr-spacing)*2)}.skippr\\:py-2\\.5{padding-block:calc(var(--skippr-spacing)*2.5)}.skippr\\:py-3{padding-block:calc(var(--skippr-spacing)*3)}.skippr\\:py-4{padding-block:calc(var(--skippr-spacing)*4)}.skippr\\:pt-1\\.5{padding-top:calc(var(--skippr-spacing)*1.5)}.skippr\\:pt-2{padding-top:calc(var(--skippr-spacing)*2)}.skippr\\:pr-2\\.5{padding-right:calc(var(--skippr-spacing)*2.5)}.skippr\\:pr-3{padding-right:calc(var(--skippr-spacing)*3)}.skippr\\:pb-0{padding-bottom:calc(var(--skippr-spacing)*0)}.skippr\\:pb-2{padding-bottom:calc(var(--skippr-spacing)*2)}.skippr\\:pl-1\\.5{padding-left:calc(var(--skippr-spacing)*1.5)}.skippr\\:pl-2\\.5{padding-left:calc(var(--skippr-spacing)*2.5)}.skippr\\:pl-3\\.5{padding-left:calc(var(--skippr-spacing)*3.5)}.skippr\\:text-center{text-align:center}.skippr\\:text-left{text-align:left}.skippr\\:font-mono{font-family:var(--skippr-font-mono)}.skippr\\:text-sm{font-size:var(--skippr-text-sm);line-height:var(--tw-leading,var(--skippr-text-sm--line-height))}.skippr\\:text-xs{font-size:var(--skippr-text-xs);line-height:var(--tw-leading,var(--skippr-text-xs--line-height))}.skippr\\:text-\\[10px\\]{font-size:10px}.skippr\\:text-\\[11px\\]{font-size:11px}.skippr\\:text-\\[13px\\]{font-size:13px}.skippr\\:leading-5{--tw-leading:calc(var(--skippr-spacing)*5);line-height:calc(var(--skippr-spacing)*5)}.skippr\\:leading-relaxed{--tw-leading:var(--skippr-leading-relaxed);line-height:var(--skippr-leading-relaxed)}.skippr\\:leading-snug{--tw-leading:var(--skippr-leading-snug);line-height:var(--skippr-leading-snug)}.skippr\\:leading-tight{--tw-leading:var(--skippr-leading-tight);line-height:var(--skippr-leading-tight)}.skippr\\:font-medium{--tw-font-weight:var(--skippr-font-weight-medium);font-weight:var(--skippr-font-weight-medium)}.skippr\\:font-semibold{--tw-font-weight:var(--skippr-font-weight-semibold);font-weight:var(--skippr-font-weight-semibold)}.skippr\\:whitespace-nowrap{white-space:nowrap}.skippr\\:text-\\[\\#2bc0ae\\]{color:#2bc0ae}.skippr\\:text-amber-700{color:var(--skippr-color-amber-700)}.skippr\\:text-amber-950{color:var(--skippr-color-amber-950)}.skippr\\:text-background{color:oklch(100% 0 0)}.skippr\\:text-black{color:var(--skippr-color-black)}.skippr\\:text-bubble{color:#2d2b3d}.skippr\\:text-chart-3{color:oklch(66.6% .179 58.318)}.skippr\\:text-destructive{color:#d94f4f}.skippr\\:text-foreground{color:oklch(14.7% .004 49.25)}.skippr\\:text-green-700{color:var(--skippr-color-green-700)}.skippr\\:text-muted-foreground{color:oklch(55.3% .013 58.071)}.skippr\\:text-muted-foreground\\/30{color:oklab(55.3% .00687528 .0110332/.3)}.skippr\\:text-muted-foreground\\/40{color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:text-muted-foreground\\/60{color:oklab(55.3% .00687528 .0110332/.6)}.skippr\\:text-muted-foreground\\/70{color:oklab(55.3% .00687528 .0110332/.7)}.skippr\\:text-neutral-500{color:var(--skippr-color-neutral-500)}.skippr\\:text-neutral-700{color:var(--skippr-color-neutral-700)}.skippr\\:text-primary{color:#2d2b3d}.skippr\\:text-primary-foreground{color:#fff}.skippr\\:text-primary-foreground\\/70{color:oklab(100% 0 5.96046e-8/.7)}.skippr\\:text-red-400{color:var(--skippr-color-red-400)}.skippr\\:text-red-600{color:var(--skippr-color-red-600)}.skippr\\:text-red-700{color:var(--skippr-color-red-700)}.skippr\\:text-secondary-foreground{color:#613700}.skippr\\:text-white{color:var(--skippr-color-white)}.skippr\\:capitalize{text-transform:capitalize}.skippr\\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.skippr\\:line-through{text-decoration-line:line-through}.skippr\\:placeholder-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}.skippr\\:opacity-0{opacity:0}.skippr\\:opacity-40{opacity:.4}.skippr\\:opacity-75{opacity:.75}.skippr\\:opacity-100{opacity:1}.skippr\\:shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[-6px_6px_22px_rgba\\(0\\,0\\,0\\,0\\.3\\)\\]{--tw-shadow:-6px 6px 22px var(--tw-shadow-color,#0000004d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.12\\)\\]{--tw-shadow:0 4px 12px var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_14px_rgba\\(239\\,68\\,68\\,0\\.45\\)\\]{--tw-shadow:0 4px 14px var(--tw-shadow-color,#ef444473);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_16px_rgba\\(45\\,43\\,61\\,0\\.45\\)\\,0_2px_4px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow:0 4px 16px var(--tw-shadow-color,#2d2b3d73),0 2px 4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_24px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 8px 24px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_24px_rgba\\(45\\,43\\,61\\,0\\.35\\)\\]{--tw-shadow:0 8px 24px var(--tw-shadow-color,#2d2b3d59);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_30px_rgba\\(0\\,0\\,0\\,0\\.16\\)\\,0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\]{--tw-shadow:0 8px 30px var(--tw-shadow-color,#00000029),0 4px 12px var(--tw-shadow-color,#00000014);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_10px_32px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 10px 32px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-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-offset-background{--tw-ring-offset-color:oklch(100% 0 0)}.skippr\\:drop-shadow-\\[0_2px_5px_rgba\\(0\\,0\\,0\\,0\\.4\\)\\]{--tw-drop-shadow-size:drop-shadow(0 2px 5px var(--tw-drop-shadow-color,#0006));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.skippr\\:backdrop-blur-sm{--tw-backdrop-blur:blur(var(--skippr-blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.skippr\\:transition-\\[height\\]{transition-property:height;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-\\[opacity\\,transform\\,height\\]{transition-property:opacity,transform,height;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-\\[width\\,margin\\]{transition-property:width,margin;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-\\[width\\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:duration-75{--tw-duration:75ms;transition-duration:75ms}.skippr\\:duration-150{--tw-duration:.15s;transition-duration:.15s}.skippr\\:duration-200{--tw-duration:.2s;transition-duration:.2s}.skippr\\:duration-300{--tw-duration:.3s;transition-duration:.3s}.skippr\\:ease-in-out{--tw-ease:var(--skippr-ease-in-out);transition-timing-function:var(--skippr-ease-in-out)}.skippr\\:ease-out{--tw-ease:var(--skippr-ease-out);transition-timing-function:var(--skippr-ease-out)}.skippr\\:outline-none{--tw-outline-style:none;outline-style:none}.skippr\\:select-none{-webkit-user-select:none;user-select:none}.skippr\\:\\[animation-delay\\:0ms\\]{animation-delay:0s}.skippr\\:\\[animation-delay\\:150ms\\]{animation-delay:.15s}.skippr\\:\\[animation-delay\\:200ms\\]{animation-delay:.2s}.skippr\\:\\[animation-delay\\:300ms\\]{animation-delay:.3s}.skippr\\:\\[animation-delay\\:400ms\\]{animation-delay:.4s}.skippr\\:\\[overflow-anchor\\:none\\]{overflow-anchor:none}.skippr\\:group-focus-within\\:scale-100:is(:where(.skippr\\:group):focus-within *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-focus-within\\:opacity-100:is(:where(.skippr\\:group):focus-within *){opacity:1}@media (hover:hover){.skippr\\:group-hover\\:scale-100:is(:where(.skippr\\:group):hover *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-hover\\:text-red-300:is(:where(.skippr\\:group):hover *){color:var(--skippr-color-red-300)}.skippr\\:group-hover\\:text-white\\/80:is(:where(.skippr\\:group):hover *){color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:group-hover\\:text-white\\/80:is(:where(.skippr\\:group):hover *){color:color-mix(in oklab,var(--skippr-color-white)80%,transparent)}}.skippr\\:group-hover\\:opacity-100:is(:where(.skippr\\:group):hover *){opacity:1}}.skippr\\:placeholder\\:text-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}@media (hover:hover){.skippr\\:hover\\:-translate-y-0\\.5:hover{--tw-translate-y:calc(var(--skippr-spacing)*-.5);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:hover\\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:hover\\:bg-\\[\\#3a384b\\]:hover{background-color:#3a384b}.skippr\\:hover\\:bg-accent:hover{background-color:#e7e5e4}.skippr\\:hover\\:bg-amber-100:hover{background-color:var(--skippr-color-amber-100)}.skippr\\:hover\\:bg-bubble:hover{background-color:#2d2b3d}.skippr\\:hover\\:bg-destructive\\/90:hover{background-color:oklab(61.4357% .15892 .0698893/.9)}.skippr\\:hover\\:bg-green-200:hover{background-color:var(--skippr-color-green-200)}.skippr\\:hover\\:bg-muted\\/70:hover{background-color:oklab(97% -.000282743 .000959196/.7)}.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-foreground\\/10:hover{background-color:oklab(100% 0 5.96046e-8/.1)}.skippr\\:hover\\:bg-primary\\/90:hover{background-color:oklab(29.9244% .0107414 -.0305411/.9)}.skippr\\:hover\\:bg-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\\: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-bubble\\/60:focus-visible{--tw-ring-color:oklab(29.9244% .0107414 -.0305411/.6)}.skippr\\:focus-visible\\:ring-ring:focus-visible{--tw-ring-color:oklch(70.9% .01 56.259)}.skippr\\:focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.skippr\\:focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.skippr\\:active\\:translate-y-0:active{--tw-translate-y:calc(var(--skippr-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:disabled\\:pointer-events-none:disabled{pointer-events:none}.skippr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.skippr\\:disabled\\:opacity-50:disabled{opacity:.5}.skippr\\:disabled\\:opacity-60:disabled{opacity:.6}@media (prefers-reduced-motion:reduce){.skippr\\:motion-reduce\\:hidden{display:none}.skippr\\:motion-reduce\\:animate-none{animation:none}}.skippr\\:\\[\\&_svg\\]\\:pointer-events-none svg{pointer-events:none}.skippr\\:\\[\\&_svg\\]\\:shrink-0 svg{flex-shrink:0}.skippr\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 svg:not([class*=size-]){width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}}@keyframes skippr-tap{0%{transform:scale(1)}45%{transform:scale(.7)}to{transform:scale(1)}}@keyframes skippr-press{0%{transform:scale(1)}55%{transform:scale(1)}85%{transform:scale(.68)}to{transform:scale(1)}}@keyframes skippr-cursor-pop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes skippr-click-ping{0%{opacity:.9;transform:translate(-50%,-50%)scale(.4)}to{opacity:0;transform:translate(-50%,-50%)scale(2.4)}}@keyframes skippr-tab-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-speak{0%,to{opacity:.6;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-thinking-dot{0%,80%,to{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}@keyframes skippr-pulse-ring{0%,to{box-shadow:0 0 #2d2b3d66}50%{box-shadow:0 0 0 10px #2d2b3d00}}@keyframes skippr-annotation-pulse{0%,to{box-shadow:0 0 #2bc0ae80}50%{box-shadow:0 0 0 6px #2bc0ae00}}@keyframes skippr-speak-ripple{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}@keyframes skippr-bar{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}@keyframes skippr-breathe{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes skippr-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-wave{0%,to{opacity:.4;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-bubble-in{0%{opacity:0;transform:translateY(12px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes skippr-tip-in{0%{opacity:0;transform:translateY(14px)scale(.96)}60%{opacity:1;transform:translateY(-2px)scale(1.01)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes skippr-pill-content{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes skippr-banner-look{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}@keyframes skippr-finger-tap{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(2px)rotate(-6deg)}}@keyframes skippr-toolset-pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes skippr-stage-fade{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes skippr-agent-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes skippr-orb-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.skippr-no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.skippr-no-scrollbar::-webkit-scrollbar{display:none}:host{color:var(--color-foreground)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}`;
|
|
4049
4204
|
useLayoutEffect2(() => {
|
|
4050
4205
|
const host = hostRef.current;
|
|
4051
4206
|
if (!host || !css)
|
|
@@ -4060,7 +4215,7 @@ function ShadowHost({ children }) {
|
|
|
4060
4215
|
setShadowRoot(root);
|
|
4061
4216
|
}, [css]);
|
|
4062
4217
|
if (!css)
|
|
4063
|
-
return /* @__PURE__ */ jsx6(
|
|
4218
|
+
return /* @__PURE__ */ jsx6(Fragment2, {
|
|
4064
4219
|
children
|
|
4065
4220
|
});
|
|
4066
4221
|
return /* @__PURE__ */ jsx6("div", {
|
|
@@ -4070,13 +4225,13 @@ function ShadowHost({ children }) {
|
|
|
4070
4225
|
}
|
|
4071
4226
|
|
|
4072
4227
|
// src/components/Sidebar.tsx
|
|
4073
|
-
import { useContext as useContext10, useEffect as
|
|
4228
|
+
import { useContext as useContext10, useEffect as useEffect23 } from "react";
|
|
4074
4229
|
|
|
4075
4230
|
// src/hooks/useCombinedMessages.ts
|
|
4076
4231
|
import { useContext as useContext7, useMemo as useMemo5 } from "react";
|
|
4077
4232
|
|
|
4078
4233
|
// src/hooks/useChatMessages.ts
|
|
4079
|
-
import { useChat, useLocalParticipant as
|
|
4234
|
+
import { useChat, useLocalParticipant as useLocalParticipant7 } from "@livekit/components-react/hooks";
|
|
4080
4235
|
import { useMemo as useMemo3 } from "react";
|
|
4081
4236
|
|
|
4082
4237
|
// src/lib/filterSystemMessages.ts
|
|
@@ -4088,7 +4243,7 @@ function filterSystemMessages(messages) {
|
|
|
4088
4243
|
// src/hooks/useChatMessages.ts
|
|
4089
4244
|
function useChatMessages() {
|
|
4090
4245
|
const { chatMessages: rawMessages, send, isSending } = useChat();
|
|
4091
|
-
const { localParticipant } =
|
|
4246
|
+
const { localParticipant } = useLocalParticipant7();
|
|
4092
4247
|
const localIdentity = localParticipant.identity;
|
|
4093
4248
|
const chatMessages = useMemo3(() => {
|
|
4094
4249
|
const sortedMessages = rawMessages.map((msg) => ({
|
|
@@ -4104,11 +4259,11 @@ function useChatMessages() {
|
|
|
4104
4259
|
}
|
|
4105
4260
|
|
|
4106
4261
|
// src/hooks/useStreamingTranscript.ts
|
|
4107
|
-
import { useLocalParticipant as
|
|
4262
|
+
import { useLocalParticipant as useLocalParticipant8, useTranscriptions } from "@livekit/components-react/hooks";
|
|
4108
4263
|
import { useMemo as useMemo4 } from "react";
|
|
4109
4264
|
function useStreamingTranscript() {
|
|
4110
4265
|
const transcriptions = useTranscriptions();
|
|
4111
|
-
const { localParticipant } =
|
|
4266
|
+
const { localParticipant } = useLocalParticipant8();
|
|
4112
4267
|
const localIdentity = localParticipant.identity;
|
|
4113
4268
|
const transcriptMessages = useMemo4(() => filterSystemMessages(transcriptions.filter((stream) => stream.text.trim().length > 0).map((stream) => ({
|
|
4114
4269
|
id: stream.streamInfo.id,
|
|
@@ -4159,7 +4314,7 @@ function useCombinedMessages() {
|
|
|
4159
4314
|
}
|
|
4160
4315
|
|
|
4161
4316
|
// src/hooks/useSessionRemaining.ts
|
|
4162
|
-
import { useEffect as
|
|
4317
|
+
import { useEffect as useEffect18, useRef as useRef11, useState as useState13 } from "react";
|
|
4163
4318
|
|
|
4164
4319
|
// src/lib/format.ts
|
|
4165
4320
|
function formatTime(seconds) {
|
|
@@ -4176,8 +4331,8 @@ function parseNumber(s) {
|
|
|
4176
4331
|
function useSessionRemaining() {
|
|
4177
4332
|
const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
|
|
4178
4333
|
const endTimeRef = useRef11(null);
|
|
4179
|
-
const [remaining, setRemaining] =
|
|
4180
|
-
|
|
4334
|
+
const [remaining, setRemaining] = useState13(null);
|
|
4335
|
+
useEffect18(() => {
|
|
4181
4336
|
if (maxCallDuration === null || endTimeRef.current !== null)
|
|
4182
4337
|
return;
|
|
4183
4338
|
const endTime = Date.now() + maxCallDuration * 1000;
|
|
@@ -4194,25 +4349,25 @@ function useSessionRemaining() {
|
|
|
4194
4349
|
}
|
|
4195
4350
|
|
|
4196
4351
|
// src/hooks/useTextMode.ts
|
|
4197
|
-
import { useLocalParticipant as
|
|
4198
|
-
import { useCallback as
|
|
4199
|
-
var
|
|
4352
|
+
import { useLocalParticipant as useLocalParticipant9 } from "@livekit/components-react/hooks";
|
|
4353
|
+
import { useCallback as useCallback12, useContext as useContext8, useRef as useRef12 } from "react";
|
|
4354
|
+
var textEncoder5 = new TextEncoder;
|
|
4200
4355
|
function useTextMode() {
|
|
4201
4356
|
const ctx = useContext8(LiveAgentContext);
|
|
4202
4357
|
if (!ctx) {
|
|
4203
4358
|
throw new Error("useTextMode must be used within a <LiveAgent> provider");
|
|
4204
4359
|
}
|
|
4205
4360
|
const { textMode, setTextModeState, sidebarTab, setSidebarTab } = ctx;
|
|
4206
|
-
const { localParticipant } =
|
|
4361
|
+
const { localParticipant } = useLocalParticipant9();
|
|
4207
4362
|
const confirmedTextModeRef = useRef12(false);
|
|
4208
|
-
const toggleTextMode =
|
|
4363
|
+
const toggleTextMode = useCallback12(async () => {
|
|
4209
4364
|
const next = !textMode;
|
|
4210
4365
|
setTextModeState(next);
|
|
4211
4366
|
if (next && sidebarTab === "agenda") {
|
|
4212
4367
|
setSidebarTab("chat");
|
|
4213
4368
|
}
|
|
4214
4369
|
try {
|
|
4215
|
-
await localParticipant.publishData(
|
|
4370
|
+
await localParticipant.publishData(textEncoder5.encode(JSON.stringify({ textMode: next })), {
|
|
4216
4371
|
reliable: true,
|
|
4217
4372
|
topic: TEXT_MODE_TOPIC
|
|
4218
4373
|
});
|
|
@@ -4230,10 +4385,10 @@ function useTextMode() {
|
|
|
4230
4385
|
import { useContext as useContext9, useRef as useRef13 } from "react";
|
|
4231
4386
|
|
|
4232
4387
|
// src/hooks/useElapsedSeconds.ts
|
|
4233
|
-
import { useEffect as
|
|
4388
|
+
import { useEffect as useEffect19, useState as useState14 } from "react";
|
|
4234
4389
|
function useElapsedSeconds(isRunning) {
|
|
4235
|
-
const [elapsed, setElapsed] =
|
|
4236
|
-
|
|
4390
|
+
const [elapsed, setElapsed] = useState14(0);
|
|
4391
|
+
useEffect19(() => {
|
|
4237
4392
|
if (!isRunning) {
|
|
4238
4393
|
setElapsed(0);
|
|
4239
4394
|
return;
|
|
@@ -4249,7 +4404,7 @@ function useElapsedSeconds(isRunning) {
|
|
|
4249
4404
|
}
|
|
4250
4405
|
|
|
4251
4406
|
// src/components/ChatHeader.tsx
|
|
4252
|
-
import { jsx as jsx7, jsxs as
|
|
4407
|
+
import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
4253
4408
|
function ChatHeader() {
|
|
4254
4409
|
const ctx = useContext9(LiveAgentContext);
|
|
4255
4410
|
if (!ctx) {
|
|
@@ -4270,7 +4425,7 @@ function ChatHeader() {
|
|
|
4270
4425
|
const followsPanel = variant === "floating" && isPanelOpen;
|
|
4271
4426
|
const dragFollowers = followsPanel ? [panelRef, controlBarRef] : null;
|
|
4272
4427
|
const { wasDraggedRef } = useLauncherDrag(headerRef, commitLauncherDrop, dragFollowers);
|
|
4273
|
-
return /* @__PURE__ */
|
|
4428
|
+
return /* @__PURE__ */ jsxs7("header", {
|
|
4274
4429
|
ref: headerRef,
|
|
4275
4430
|
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"),
|
|
4276
4431
|
children: [
|
|
@@ -4278,13 +4433,13 @@ function ChatHeader() {
|
|
|
4278
4433
|
className: "skippr:text-sm skippr:font-semibold skippr:text-primary-foreground",
|
|
4279
4434
|
children: "Skippr"
|
|
4280
4435
|
}),
|
|
4281
|
-
/* @__PURE__ */
|
|
4436
|
+
/* @__PURE__ */ jsxs7("div", {
|
|
4282
4437
|
className: "skippr:flex skippr:items-center skippr:gap-2",
|
|
4283
4438
|
children: [
|
|
4284
|
-
isConnected && /* @__PURE__ */
|
|
4439
|
+
isConnected && /* @__PURE__ */ jsxs7("div", {
|
|
4285
4440
|
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",
|
|
4286
4441
|
children: [
|
|
4287
|
-
/* @__PURE__ */
|
|
4442
|
+
/* @__PURE__ */ jsxs7("span", {
|
|
4288
4443
|
className: "skippr:relative skippr:flex skippr:size-1.5",
|
|
4289
4444
|
children: [
|
|
4290
4445
|
/* @__PURE__ */ jsx7("span", {
|
|
@@ -4327,12 +4482,12 @@ function ChatHeader() {
|
|
|
4327
4482
|
}
|
|
4328
4483
|
|
|
4329
4484
|
// src/components/LoadingDots.tsx
|
|
4330
|
-
import { jsx as jsx8, jsxs as
|
|
4485
|
+
import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
4331
4486
|
function LoadingDots({ label }) {
|
|
4332
|
-
return /* @__PURE__ */
|
|
4487
|
+
return /* @__PURE__ */ jsxs8("div", {
|
|
4333
4488
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:py-4",
|
|
4334
4489
|
children: [
|
|
4335
|
-
/* @__PURE__ */
|
|
4490
|
+
/* @__PURE__ */ jsxs8("div", {
|
|
4336
4491
|
className: "skippr:flex skippr:gap-1",
|
|
4337
4492
|
children: [
|
|
4338
4493
|
/* @__PURE__ */ jsx8("span", {
|
|
@@ -4355,7 +4510,7 @@ function LoadingDots({ label }) {
|
|
|
4355
4510
|
}
|
|
4356
4511
|
|
|
4357
4512
|
// src/components/LoginFlow.tsx
|
|
4358
|
-
import { useCallback as
|
|
4513
|
+
import { useCallback as useCallback13, useEffect as useEffect20, useRef as useRef14, useState as useState15 } from "react";
|
|
4359
4514
|
|
|
4360
4515
|
// src/components/ui/button.tsx
|
|
4361
4516
|
import { forwardRef as forwardRef3 } from "react";
|
|
@@ -4387,24 +4542,24 @@ var Button = forwardRef3(({ className, variant = "default", size = "default", ..
|
|
|
4387
4542
|
Button.displayName = "Button";
|
|
4388
4543
|
|
|
4389
4544
|
// src/components/LoginFlow.tsx
|
|
4390
|
-
import { jsx as jsx10, jsxs as
|
|
4545
|
+
import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
4391
4546
|
var OTP_LENGTH = 6;
|
|
4392
4547
|
var DIGIT_KEYS = ["d0", "d1", "d2", "d3", "d4", "d5"];
|
|
4393
4548
|
function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
4394
|
-
const [step, setStep] =
|
|
4395
|
-
const [email, setEmail] =
|
|
4396
|
-
const handleRequestOtp =
|
|
4549
|
+
const [step, setStep] = useState15("email");
|
|
4550
|
+
const [email, setEmail] = useState15("");
|
|
4551
|
+
const handleRequestOtp = useCallback13(async (emailValue) => {
|
|
4397
4552
|
const success = await requestOtp(emailValue);
|
|
4398
4553
|
if (success)
|
|
4399
4554
|
setStep("otp");
|
|
4400
4555
|
}, [requestOtp]);
|
|
4401
|
-
const handleVerifyOtp =
|
|
4556
|
+
const handleVerifyOtp = useCallback13(async (code) => {
|
|
4402
4557
|
await verifyOtp(email, code);
|
|
4403
4558
|
}, [verifyOtp, email]);
|
|
4404
|
-
const handleBack =
|
|
4559
|
+
const handleBack = useCallback13(() => {
|
|
4405
4560
|
setStep("email");
|
|
4406
4561
|
}, []);
|
|
4407
|
-
const handleResend =
|
|
4562
|
+
const handleResend = useCallback13(async () => {
|
|
4408
4563
|
await requestOtp(email);
|
|
4409
4564
|
}, [requestOtp, email]);
|
|
4410
4565
|
if (step === "otp") {
|
|
@@ -4431,10 +4586,10 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
4431
4586
|
if (email.trim())
|
|
4432
4587
|
onSubmit(email.trim());
|
|
4433
4588
|
}
|
|
4434
|
-
return /* @__PURE__ */
|
|
4589
|
+
return /* @__PURE__ */ jsxs9("div", {
|
|
4435
4590
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
|
|
4436
4591
|
children: [
|
|
4437
|
-
/* @__PURE__ */
|
|
4592
|
+
/* @__PURE__ */ jsxs9("div", {
|
|
4438
4593
|
className: "skippr:mb-4 skippr:text-center",
|
|
4439
4594
|
children: [
|
|
4440
4595
|
/* @__PURE__ */ jsx10(Mail, {
|
|
@@ -4450,7 +4605,7 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
4450
4605
|
})
|
|
4451
4606
|
]
|
|
4452
4607
|
}),
|
|
4453
|
-
/* @__PURE__ */
|
|
4608
|
+
/* @__PURE__ */ jsxs9("form", {
|
|
4454
4609
|
onSubmit: handleSubmit,
|
|
4455
4610
|
className: "skippr:flex skippr:flex-col skippr:gap-3",
|
|
4456
4611
|
children: [
|
|
@@ -4481,30 +4636,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
4481
4636
|
});
|
|
4482
4637
|
}
|
|
4483
4638
|
function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
4484
|
-
const [digits, setDigits] =
|
|
4485
|
-
const [resendCooldown, setResendCooldown] =
|
|
4639
|
+
const [digits, setDigits] = useState15(Array(OTP_LENGTH).fill(""));
|
|
4640
|
+
const [resendCooldown, setResendCooldown] = useState15(0);
|
|
4486
4641
|
const inputRefs = useRef14([]);
|
|
4487
4642
|
const submittedRef = useRef14(false);
|
|
4488
|
-
|
|
4643
|
+
useEffect20(() => {
|
|
4489
4644
|
inputRefs.current[0]?.focus();
|
|
4490
4645
|
}, []);
|
|
4491
|
-
|
|
4646
|
+
useEffect20(() => {
|
|
4492
4647
|
if (error)
|
|
4493
4648
|
submittedRef.current = false;
|
|
4494
4649
|
}, [error]);
|
|
4495
|
-
|
|
4650
|
+
useEffect20(() => {
|
|
4496
4651
|
if (resendCooldown <= 0)
|
|
4497
4652
|
return;
|
|
4498
4653
|
const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
|
|
4499
4654
|
return () => clearTimeout(timer);
|
|
4500
4655
|
}, [resendCooldown]);
|
|
4501
|
-
const submitCode =
|
|
4656
|
+
const submitCode = useCallback13((code) => {
|
|
4502
4657
|
if (submittedRef.current || isSubmitting)
|
|
4503
4658
|
return;
|
|
4504
4659
|
submittedRef.current = true;
|
|
4505
4660
|
onSubmit(code);
|
|
4506
4661
|
}, [onSubmit, isSubmitting]);
|
|
4507
|
-
const handleDigitChange =
|
|
4662
|
+
const handleDigitChange = useCallback13((index2, value) => {
|
|
4508
4663
|
const digit = value.replace(/\D/g, "").slice(-1);
|
|
4509
4664
|
const newDigits = [...digits];
|
|
4510
4665
|
newDigits[index2] = digit;
|
|
@@ -4518,12 +4673,12 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
4518
4673
|
submitCode(code);
|
|
4519
4674
|
}
|
|
4520
4675
|
}, [digits, submitCode]);
|
|
4521
|
-
const handleKeyDown =
|
|
4676
|
+
const handleKeyDown = useCallback13((index2, e) => {
|
|
4522
4677
|
if (e.key === "Backspace" && !digits[index2] && index2 > 0) {
|
|
4523
4678
|
inputRefs.current[index2 - 1]?.focus();
|
|
4524
4679
|
}
|
|
4525
4680
|
}, [digits]);
|
|
4526
|
-
const handlePaste =
|
|
4681
|
+
const handlePaste = useCallback13((e) => {
|
|
4527
4682
|
e.preventDefault();
|
|
4528
4683
|
const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, OTP_LENGTH);
|
|
4529
4684
|
if (pasted.length > 0) {
|
|
@@ -4551,17 +4706,17 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
4551
4706
|
submittedRef.current = false;
|
|
4552
4707
|
inputRefs.current[0]?.focus();
|
|
4553
4708
|
}
|
|
4554
|
-
return /* @__PURE__ */
|
|
4709
|
+
return /* @__PURE__ */ jsxs9("div", {
|
|
4555
4710
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
|
|
4556
4711
|
children: [
|
|
4557
|
-
/* @__PURE__ */
|
|
4712
|
+
/* @__PURE__ */ jsxs9("div", {
|
|
4558
4713
|
className: "skippr:mb-4 skippr:text-center",
|
|
4559
4714
|
children: [
|
|
4560
4715
|
/* @__PURE__ */ jsx10("p", {
|
|
4561
4716
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
4562
4717
|
children: "Enter verification code"
|
|
4563
4718
|
}),
|
|
4564
|
-
/* @__PURE__ */
|
|
4719
|
+
/* @__PURE__ */ jsxs9("p", {
|
|
4565
4720
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
4566
4721
|
children: [
|
|
4567
4722
|
"We sent a 6-digit code to",
|
|
@@ -4574,7 +4729,7 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
4574
4729
|
})
|
|
4575
4730
|
]
|
|
4576
4731
|
}),
|
|
4577
|
-
/* @__PURE__ */
|
|
4732
|
+
/* @__PURE__ */ jsxs9("form", {
|
|
4578
4733
|
onSubmit: handleSubmit,
|
|
4579
4734
|
className: "skippr:flex skippr:flex-col skippr:gap-3",
|
|
4580
4735
|
children: [
|
|
@@ -4607,7 +4762,7 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
4607
4762
|
className: "skippr:size-4 skippr:animate-spin"
|
|
4608
4763
|
}) : "Verify"
|
|
4609
4764
|
}),
|
|
4610
|
-
/* @__PURE__ */
|
|
4765
|
+
/* @__PURE__ */ jsxs9("div", {
|
|
4611
4766
|
className: "skippr:flex skippr:items-center skippr:justify-between skippr:text-xs",
|
|
4612
4767
|
children: [
|
|
4613
4768
|
/* @__PURE__ */ jsx10("button", {
|
|
@@ -4633,17 +4788,17 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
4633
4788
|
}
|
|
4634
4789
|
|
|
4635
4790
|
// src/components/MessageList.tsx
|
|
4636
|
-
import { useCallback as
|
|
4791
|
+
import { useCallback as useCallback14, useLayoutEffect as useLayoutEffect3, useRef as useRef16, useState as useState17 } from "react";
|
|
4637
4792
|
|
|
4638
4793
|
// src/components/ChatInput.tsx
|
|
4639
|
-
import { useEffect as
|
|
4640
|
-
import { jsx as jsx11, jsxs as
|
|
4794
|
+
import { useEffect as useEffect21, useRef as useRef15, useState as useState16 } from "react";
|
|
4795
|
+
import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
4641
4796
|
var MAX_INPUT_HEIGHT = 60;
|
|
4642
4797
|
function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
4643
|
-
const [inputText, setInputText] =
|
|
4798
|
+
const [inputText, setInputText] = useState16("");
|
|
4644
4799
|
const textareaRef = useRef15(null);
|
|
4645
4800
|
const canSend = inputText.trim().length > 0 && !isSendingChat;
|
|
4646
|
-
|
|
4801
|
+
useEffect21(() => {
|
|
4647
4802
|
if (autoFocus)
|
|
4648
4803
|
textareaRef.current?.focus();
|
|
4649
4804
|
}, [autoFocus]);
|
|
@@ -4677,7 +4832,7 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
4677
4832
|
return /* @__PURE__ */ jsx11("form", {
|
|
4678
4833
|
onSubmit: handleSubmit,
|
|
4679
4834
|
className: "skippr:border-t skippr:border-border skippr:p-3",
|
|
4680
|
-
children: /* @__PURE__ */
|
|
4835
|
+
children: /* @__PURE__ */ jsxs10("div", {
|
|
4681
4836
|
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",
|
|
4682
4837
|
children: [
|
|
4683
4838
|
/* @__PURE__ */ jsx11("textarea", {
|
|
@@ -4705,7 +4860,7 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
4705
4860
|
}
|
|
4706
4861
|
|
|
4707
4862
|
// src/components/ChatMessage.tsx
|
|
4708
|
-
import { jsx as jsx12, jsxs as
|
|
4863
|
+
import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
4709
4864
|
function formatTimestamp(ts) {
|
|
4710
4865
|
return new Date(ts).toLocaleTimeString("en-US", {
|
|
4711
4866
|
hour: "numeric",
|
|
@@ -4715,7 +4870,7 @@ function formatTimestamp(ts) {
|
|
|
4715
4870
|
}
|
|
4716
4871
|
function ChatMessage({ message }) {
|
|
4717
4872
|
const isAgent = message.role === "assistant";
|
|
4718
|
-
return /* @__PURE__ */
|
|
4873
|
+
return /* @__PURE__ */ jsxs11("div", {
|
|
4719
4874
|
className: cn("skippr:flex skippr:gap-2", isAgent ? "skippr:items-start" : "skippr:justify-end"),
|
|
4720
4875
|
children: [
|
|
4721
4876
|
isAgent && /* @__PURE__ */ jsx12("div", {
|
|
@@ -4724,7 +4879,7 @@ function ChatMessage({ message }) {
|
|
|
4724
4879
|
className: "skippr:size-3.5 skippr:text-primary-foreground"
|
|
4725
4880
|
})
|
|
4726
4881
|
}),
|
|
4727
|
-
/* @__PURE__ */
|
|
4882
|
+
/* @__PURE__ */ jsxs11("div", {
|
|
4728
4883
|
className: cn("skippr:flex skippr:max-w-[80%] skippr:flex-col", isAgent ? "skippr:items-start" : "skippr:items-end"),
|
|
4729
4884
|
children: [
|
|
4730
4885
|
/* @__PURE__ */ jsx12("div", {
|
|
@@ -4742,8 +4897,8 @@ function ChatMessage({ message }) {
|
|
|
4742
4897
|
}
|
|
4743
4898
|
|
|
4744
4899
|
// src/components/PlanCard.tsx
|
|
4745
|
-
import { useEffect as
|
|
4746
|
-
import { jsx as jsx13, jsxs as
|
|
4900
|
+
import { useEffect as useEffect22 } from "react";
|
|
4901
|
+
import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
4747
4902
|
var APPROVE_MESSAGE = "Yes, go ahead.";
|
|
4748
4903
|
var CANCEL_MESSAGE = "No, cancel that.";
|
|
4749
4904
|
var COMPLETED_CARD_VISIBLE_MS = 2500;
|
|
@@ -4769,13 +4924,13 @@ function StepIcon({ status }) {
|
|
|
4769
4924
|
}
|
|
4770
4925
|
function PlanCard({ plan, sendChatMessage, onDismiss }) {
|
|
4771
4926
|
const awaitingApproval = plan.state === "proposed";
|
|
4772
|
-
|
|
4927
|
+
useEffect22(() => {
|
|
4773
4928
|
if (plan.state !== "completed")
|
|
4774
4929
|
return;
|
|
4775
4930
|
const timer = setTimeout(onDismiss, COMPLETED_CARD_VISIBLE_MS);
|
|
4776
4931
|
return () => clearTimeout(timer);
|
|
4777
4932
|
}, [plan.state, onDismiss]);
|
|
4778
|
-
return /* @__PURE__ */
|
|
4933
|
+
return /* @__PURE__ */ jsxs12("div", {
|
|
4779
4934
|
className: "skippr:rounded-2xl skippr:rounded-tl-md skippr:bg-card skippr:p-3.5 skippr:ring-2 skippr:ring-brand",
|
|
4780
4935
|
children: [
|
|
4781
4936
|
/* @__PURE__ */ jsx13("p", {
|
|
@@ -4784,7 +4939,7 @@ function PlanCard({ plan, sendChatMessage, onDismiss }) {
|
|
|
4784
4939
|
}),
|
|
4785
4940
|
/* @__PURE__ */ jsx13("div", {
|
|
4786
4941
|
className: "skippr:space-y-2",
|
|
4787
|
-
children: plan.steps.map((step) => /* @__PURE__ */
|
|
4942
|
+
children: plan.steps.map((step) => /* @__PURE__ */ jsxs12("div", {
|
|
4788
4943
|
className: "skippr:flex skippr:items-center skippr:gap-2",
|
|
4789
4944
|
children: [
|
|
4790
4945
|
/* @__PURE__ */ jsx13(StepIcon, {
|
|
@@ -4797,7 +4952,7 @@ function PlanCard({ plan, sendChatMessage, onDismiss }) {
|
|
|
4797
4952
|
]
|
|
4798
4953
|
}, step.index))
|
|
4799
4954
|
}),
|
|
4800
|
-
awaitingApproval && /* @__PURE__ */
|
|
4955
|
+
awaitingApproval && /* @__PURE__ */ jsxs12("div", {
|
|
4801
4956
|
className: "skippr:mt-3.5 skippr:flex skippr:gap-2",
|
|
4802
4957
|
children: [
|
|
4803
4958
|
/* @__PURE__ */ jsx13(Button, {
|
|
@@ -4818,9 +4973,9 @@ function PlanCard({ plan, sendChatMessage, onDismiss }) {
|
|
|
4818
4973
|
}
|
|
4819
4974
|
|
|
4820
4975
|
// src/components/TypingIndicator.tsx
|
|
4821
|
-
import { jsx as jsx14, jsxs as
|
|
4976
|
+
import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
4822
4977
|
function TypingIndicator() {
|
|
4823
|
-
return /* @__PURE__ */
|
|
4978
|
+
return /* @__PURE__ */ jsxs13("div", {
|
|
4824
4979
|
className: "skippr:flex skippr:items-start skippr:gap-2 skippr:animate-skippr-tab-fade",
|
|
4825
4980
|
children: [
|
|
4826
4981
|
/* @__PURE__ */ jsx14("div", {
|
|
@@ -4829,13 +4984,13 @@ function TypingIndicator() {
|
|
|
4829
4984
|
className: "skippr:size-3.5 skippr:text-primary-foreground"
|
|
4830
4985
|
})
|
|
4831
4986
|
}),
|
|
4832
|
-
/* @__PURE__ */
|
|
4987
|
+
/* @__PURE__ */ jsxs13("div", {
|
|
4833
4988
|
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",
|
|
4834
4989
|
children: [
|
|
4835
4990
|
/* @__PURE__ */ jsx14("span", {
|
|
4836
4991
|
children: "Agent is analyzing your screen"
|
|
4837
4992
|
}),
|
|
4838
|
-
/* @__PURE__ */
|
|
4993
|
+
/* @__PURE__ */ jsxs13("span", {
|
|
4839
4994
|
className: "skippr:inline-flex skippr:items-center skippr:gap-[2px]",
|
|
4840
4995
|
children: [
|
|
4841
4996
|
/* @__PURE__ */ jsx14("span", {
|
|
@@ -4856,7 +5011,7 @@ function TypingIndicator() {
|
|
|
4856
5011
|
}
|
|
4857
5012
|
|
|
4858
5013
|
// src/components/MessageList.tsx
|
|
4859
|
-
import { jsx as jsx15, jsxs as
|
|
5014
|
+
import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
4860
5015
|
function isPlanVisible(plan) {
|
|
4861
5016
|
return !!plan && plan.steps.length > 0 && plan.state !== "abandoned";
|
|
4862
5017
|
}
|
|
@@ -4870,8 +5025,8 @@ function MessageList({
|
|
|
4870
5025
|
}) {
|
|
4871
5026
|
const containerRef = useRef16(null);
|
|
4872
5027
|
const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
|
|
4873
|
-
const [dismissedPlanId, setDismissedPlanId] =
|
|
4874
|
-
const dismissPlan =
|
|
5028
|
+
const [dismissedPlanId, setDismissedPlanId] = useState17(null);
|
|
5029
|
+
const dismissPlan = useCallback14(() => {
|
|
4875
5030
|
if (plan)
|
|
4876
5031
|
setDismissedPlanId(plan.planId);
|
|
4877
5032
|
}, [plan]);
|
|
@@ -4884,10 +5039,10 @@ function MessageList({
|
|
|
4884
5039
|
container.scrollTop = container.scrollHeight;
|
|
4885
5040
|
}, [messages.length, lastMessage?.content]);
|
|
4886
5041
|
const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
|
|
4887
|
-
return /* @__PURE__ */
|
|
5042
|
+
return /* @__PURE__ */ jsxs14("div", {
|
|
4888
5043
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
4889
5044
|
children: [
|
|
4890
|
-
/* @__PURE__ */
|
|
5045
|
+
/* @__PURE__ */ jsxs14("div", {
|
|
4891
5046
|
ref: containerRef,
|
|
4892
5047
|
className: "skippr:min-h-0 skippr:flex-1 skippr:space-y-4 skippr:overflow-y-auto skippr:p-4 skippr:[overflow-anchor:none]",
|
|
4893
5048
|
children: [
|
|
@@ -4918,7 +5073,7 @@ function MessageList({
|
|
|
4918
5073
|
}
|
|
4919
5074
|
|
|
4920
5075
|
// src/components/SessionAgenda.tsx
|
|
4921
|
-
import { jsx as jsx16, jsxs as
|
|
5076
|
+
import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
4922
5077
|
function SessionAgenda({ phases, hasStarted }) {
|
|
4923
5078
|
if (phases.length === 0 || !hasStarted) {
|
|
4924
5079
|
return /* @__PURE__ */ jsx16("div", {
|
|
@@ -4935,7 +5090,7 @@ function SessionAgenda({ phases, hasStarted }) {
|
|
|
4935
5090
|
children: phases.map((phase) => {
|
|
4936
5091
|
const isActive = phase.status === "active";
|
|
4937
5092
|
const isCompleted = phase.status === "completed";
|
|
4938
|
-
return /* @__PURE__ */
|
|
5093
|
+
return /* @__PURE__ */ jsxs15("div", {
|
|
4939
5094
|
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"),
|
|
4940
5095
|
children: [
|
|
4941
5096
|
/* @__PURE__ */ jsx16("div", {
|
|
@@ -4948,7 +5103,7 @@ function SessionAgenda({ phases, hasStarted }) {
|
|
|
4948
5103
|
className: "skippr:size-4 skippr:text-muted-foreground/30"
|
|
4949
5104
|
})
|
|
4950
5105
|
}),
|
|
4951
|
-
/* @__PURE__ */
|
|
5106
|
+
/* @__PURE__ */ jsxs15("div", {
|
|
4952
5107
|
className: "skippr:min-w-0 skippr:flex-1",
|
|
4953
5108
|
children: [
|
|
4954
5109
|
/* @__PURE__ */ jsx16("p", {
|
|
@@ -4957,7 +5112,7 @@ function SessionAgenda({ phases, hasStarted }) {
|
|
|
4957
5112
|
}),
|
|
4958
5113
|
phase.highlights.length > 0 && /* @__PURE__ */ jsx16("ul", {
|
|
4959
5114
|
className: "skippr:mt-1 skippr:space-y-0.5",
|
|
4960
|
-
children: phase.highlights.map((text) => /* @__PURE__ */
|
|
5115
|
+
children: phase.highlights.map((text) => /* @__PURE__ */ jsxs15("li", {
|
|
4961
5116
|
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"),
|
|
4962
5117
|
children: [
|
|
4963
5118
|
/* @__PURE__ */ jsx16("span", {
|
|
@@ -4990,7 +5145,7 @@ function SessionWarningBanner({ remaining }) {
|
|
|
4990
5145
|
}
|
|
4991
5146
|
|
|
4992
5147
|
// src/components/StartSessionPrompt.tsx
|
|
4993
|
-
import { jsx as jsx18, jsxs as
|
|
5148
|
+
import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
4994
5149
|
var PROMPT_BUTTON = "skippr:cursor-pointer skippr:rounded-xl skippr:bg-primary skippr:px-8 skippr:py-3 skippr:text-sm skippr:font-medium skippr:text-primary-foreground skippr:transition-all skippr:hover:bg-primary/90 skippr:disabled:cursor-not-allowed skippr:disabled:opacity-60";
|
|
4995
5150
|
function StartSessionPrompt({
|
|
4996
5151
|
onStartSession,
|
|
@@ -5002,7 +5157,7 @@ function StartSessionPrompt({
|
|
|
5002
5157
|
canResume = false,
|
|
5003
5158
|
onResume
|
|
5004
5159
|
}) {
|
|
5005
|
-
return /* @__PURE__ */
|
|
5160
|
+
return /* @__PURE__ */ jsxs16("div", {
|
|
5006
5161
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:px-4",
|
|
5007
5162
|
children: [
|
|
5008
5163
|
canResume && onResume ? /* @__PURE__ */ jsx18("button", {
|
|
@@ -5031,7 +5186,7 @@ function StartSessionPrompt({
|
|
|
5031
5186
|
}
|
|
5032
5187
|
|
|
5033
5188
|
// src/components/Sidebar.tsx
|
|
5034
|
-
import { jsx as jsx19, jsxs as
|
|
5189
|
+
import { jsx as jsx19, jsxs as jsxs17, Fragment as Fragment3 } from "react/jsx-runtime";
|
|
5035
5190
|
var PANEL_GAP_PX = 12;
|
|
5036
5191
|
var PANEL_VIEWPORT_MARGIN_PX = 24;
|
|
5037
5192
|
var PANEL_MAX_HEIGHT_PX = 460;
|
|
@@ -5085,7 +5240,7 @@ function Sidebar({
|
|
|
5085
5240
|
height: panelExpanded ? availableHeight : `min(${PANEL_MAX_HEIGHT_PX}px, ${availableHeight})`
|
|
5086
5241
|
};
|
|
5087
5242
|
}
|
|
5088
|
-
|
|
5243
|
+
useEffect23(() => {
|
|
5089
5244
|
if (!isSidebar)
|
|
5090
5245
|
return;
|
|
5091
5246
|
const prop = position === "right" ? "marginRight" : "marginLeft";
|
|
@@ -5099,7 +5254,7 @@ function Sidebar({
|
|
|
5099
5254
|
document.body.style.transition = "";
|
|
5100
5255
|
};
|
|
5101
5256
|
}, [isSidebar, isPanelOpen, position]);
|
|
5102
|
-
return /* @__PURE__ */
|
|
5257
|
+
return /* @__PURE__ */ jsxs17("div", {
|
|
5103
5258
|
ref: internalCtx?.panelRef,
|
|
5104
5259
|
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"),
|
|
5105
5260
|
style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined, ...floatingStyle },
|
|
@@ -5166,13 +5321,13 @@ function AuthenticatedContent({
|
|
|
5166
5321
|
} else if (isPaused) {
|
|
5167
5322
|
transitionLabel = "Paused";
|
|
5168
5323
|
}
|
|
5169
|
-
return /* @__PURE__ */
|
|
5324
|
+
return /* @__PURE__ */ jsxs17(Fragment3, {
|
|
5170
5325
|
children: [
|
|
5171
5326
|
isConnected && /* @__PURE__ */ jsx19(ConnectedBanner, {}),
|
|
5172
|
-
/* @__PURE__ */
|
|
5327
|
+
/* @__PURE__ */ jsxs17("div", {
|
|
5173
5328
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-1",
|
|
5174
5329
|
children: [
|
|
5175
|
-
/* @__PURE__ */
|
|
5330
|
+
/* @__PURE__ */ jsxs17("button", {
|
|
5176
5331
|
type: "button",
|
|
5177
5332
|
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"),
|
|
5178
5333
|
onClick: () => onTabChange("chat"),
|
|
@@ -5186,7 +5341,7 @@ function AuthenticatedContent({
|
|
|
5186
5341
|
})
|
|
5187
5342
|
]
|
|
5188
5343
|
}),
|
|
5189
|
-
showAgenda && /* @__PURE__ */
|
|
5344
|
+
showAgenda && /* @__PURE__ */ jsxs17("button", {
|
|
5190
5345
|
type: "button",
|
|
5191
5346
|
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"),
|
|
5192
5347
|
onClick: () => onTabChange("agenda"),
|
|
@@ -5209,7 +5364,7 @@ function AuthenticatedContent({
|
|
|
5209
5364
|
children: /* @__PURE__ */ jsx19(LoadingDots, {
|
|
5210
5365
|
label: "Ending session..."
|
|
5211
5366
|
})
|
|
5212
|
-
}) : inSession ? /* @__PURE__ */
|
|
5367
|
+
}) : inSession ? /* @__PURE__ */ jsxs17(Fragment3, {
|
|
5213
5368
|
children: [
|
|
5214
5369
|
transitionLabel && /* @__PURE__ */ jsx19("div", {
|
|
5215
5370
|
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",
|
|
@@ -5234,7 +5389,7 @@ function AuthenticatedContent({
|
|
|
5234
5389
|
})
|
|
5235
5390
|
}, `${activeTab}-empty`)
|
|
5236
5391
|
}),
|
|
5237
|
-
!hideControls && /* @__PURE__ */
|
|
5392
|
+
!hideControls && /* @__PURE__ */ jsxs17("div", {
|
|
5238
5393
|
className: "skippr:shrink-0 skippr:border-t skippr:border-border",
|
|
5239
5394
|
children: [
|
|
5240
5395
|
isConnected && !isDisconnecting && /* @__PURE__ */ jsx19(ModeToggleRow, {}),
|
|
@@ -5256,14 +5411,14 @@ function ModeToggleRow() {
|
|
|
5256
5411
|
"aria-label": textMode ? "Switch to voice mode" : "Switch to text mode",
|
|
5257
5412
|
className: "skippr:flex skippr:cursor-pointer skippr:items-center skippr:gap-2 skippr:rounded-xl skippr:bg-muted skippr:px-4 skippr:py-1.5 skippr:text-sm skippr:font-medium skippr:text-foreground skippr:transition-colors skippr:hover:bg-muted/70",
|
|
5258
5413
|
onClick: () => void toggleTextMode(),
|
|
5259
|
-
children: textMode ? /* @__PURE__ */
|
|
5414
|
+
children: textMode ? /* @__PURE__ */ jsxs17(Fragment3, {
|
|
5260
5415
|
children: [
|
|
5261
5416
|
/* @__PURE__ */ jsx19(Mic, {
|
|
5262
5417
|
className: "skippr:size-4"
|
|
5263
5418
|
}),
|
|
5264
5419
|
"Voice mode"
|
|
5265
5420
|
]
|
|
5266
|
-
}) : /* @__PURE__ */
|
|
5421
|
+
}) : /* @__PURE__ */ jsxs17(Fragment3, {
|
|
5267
5422
|
children: [
|
|
5268
5423
|
/* @__PURE__ */ jsx19(MessageSquare, {
|
|
5269
5424
|
className: "skippr:size-4"
|
|
@@ -5275,7 +5430,7 @@ function ModeToggleRow() {
|
|
|
5275
5430
|
});
|
|
5276
5431
|
}
|
|
5277
5432
|
function AuthError() {
|
|
5278
|
-
return /* @__PURE__ */
|
|
5433
|
+
return /* @__PURE__ */ jsxs17("div", {
|
|
5279
5434
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:px-6 skippr:py-4 skippr:text-center",
|
|
5280
5435
|
children: [
|
|
5281
5436
|
/* @__PURE__ */ jsx19(CircleAlert, {
|
|
@@ -5332,9 +5487,9 @@ function ConnectedBody({
|
|
|
5332
5487
|
import { useContext as useContext11 } from "react";
|
|
5333
5488
|
|
|
5334
5489
|
// src/components/Logo.tsx
|
|
5335
|
-
import { jsx as jsx20, jsxs as
|
|
5490
|
+
import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
5336
5491
|
function Logo({ className }) {
|
|
5337
|
-
return /* @__PURE__ */
|
|
5492
|
+
return /* @__PURE__ */ jsxs18("svg", {
|
|
5338
5493
|
width: "1em",
|
|
5339
5494
|
height: "1em",
|
|
5340
5495
|
viewBox: "0 0 200 200",
|
|
@@ -5350,7 +5505,7 @@ function Logo({ className }) {
|
|
|
5350
5505
|
rx: "40",
|
|
5351
5506
|
fill: "#2D2D3F"
|
|
5352
5507
|
}),
|
|
5353
|
-
/* @__PURE__ */
|
|
5508
|
+
/* @__PURE__ */ jsxs18("g", {
|
|
5354
5509
|
transform: "translate(100 100) scale(0.8) translate(-100 -100)",
|
|
5355
5510
|
children: [
|
|
5356
5511
|
/* @__PURE__ */ jsx20("path", {
|
|
@@ -5403,7 +5558,7 @@ function SidebarTrigger() {
|
|
|
5403
5558
|
}
|
|
5404
5559
|
|
|
5405
5560
|
// src/components/LiveAgent.tsx
|
|
5406
|
-
import { jsx as jsx22, jsxs as
|
|
5561
|
+
import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
5407
5562
|
function AgentCursorMount({ animated }) {
|
|
5408
5563
|
return /* @__PURE__ */ jsx22(AgentCursor, {
|
|
5409
5564
|
target: useAgentCursor(),
|
|
@@ -5414,7 +5569,7 @@ function PlanPanelOpener() {
|
|
|
5414
5569
|
const plan = usePlanUpdates();
|
|
5415
5570
|
const { expandPanel } = useLiveAgent();
|
|
5416
5571
|
const surfacedPlanIdRef = useRef17(null);
|
|
5417
|
-
|
|
5572
|
+
useEffect24(() => {
|
|
5418
5573
|
if (plan?.state !== "proposed" || surfacedPlanIdRef.current === plan.planId)
|
|
5419
5574
|
return;
|
|
5420
5575
|
surfacedPlanIdRef.current = plan.planId;
|
|
@@ -5453,29 +5608,24 @@ function LiveAgent(props) {
|
|
|
5453
5608
|
const auth = useAuth({ appKey });
|
|
5454
5609
|
const usesHostAuth = !!getUserToken || !!userToken || !!authTokenProp;
|
|
5455
5610
|
const effectiveAuthToken = usesHostAuth ? authTokenProp : auth.authToken ?? undefined;
|
|
5456
|
-
const
|
|
5457
|
-
const
|
|
5458
|
-
const agentId = hasModuleSelector ? activeModule?.id ?? null : hostAgentId;
|
|
5459
|
-
const agentControls = hasModuleSelector ? activeModule?.controls : hostAgentControls;
|
|
5460
|
-
const minimizeOnSessionStart = useCallback14(() => {
|
|
5611
|
+
const [activeModule, setActiveModule] = useState18(null);
|
|
5612
|
+
const minimizeOnSessionStart = useCallback15(() => {
|
|
5461
5613
|
if (minimizable) {
|
|
5462
5614
|
setIsMinimized(true);
|
|
5463
5615
|
setIsPanelOpen(false);
|
|
5464
5616
|
}
|
|
5465
5617
|
}, [minimizable]);
|
|
5466
|
-
const expandOnSessionStartError =
|
|
5618
|
+
const expandOnSessionStartError = useCallback15(() => {
|
|
5467
5619
|
setIsMinimized(false);
|
|
5468
5620
|
setIsPanelOpen(true);
|
|
5469
5621
|
}, []);
|
|
5470
|
-
const minimizeOnSessionDisconnect =
|
|
5471
|
-
|
|
5472
|
-
setActiveModule(null);
|
|
5473
|
-
}
|
|
5622
|
+
const minimizeOnSessionDisconnect = useCallback15(() => {
|
|
5623
|
+
setActiveModule(null);
|
|
5474
5624
|
if (minimizable) {
|
|
5475
5625
|
setIsMinimized(true);
|
|
5476
5626
|
setIsPanelOpen(false);
|
|
5477
5627
|
}
|
|
5478
|
-
}, [minimizable
|
|
5628
|
+
}, [minimizable]);
|
|
5479
5629
|
const {
|
|
5480
5630
|
connection,
|
|
5481
5631
|
shouldConnect,
|
|
@@ -5488,6 +5638,7 @@ function LiveAgent(props) {
|
|
|
5488
5638
|
pauseSession,
|
|
5489
5639
|
disconnect,
|
|
5490
5640
|
isPaused,
|
|
5641
|
+
pauseTimeoutSeconds,
|
|
5491
5642
|
historyMessages,
|
|
5492
5643
|
pendingScreenStream,
|
|
5493
5644
|
bearerToken,
|
|
@@ -5505,28 +5656,28 @@ function LiveAgent(props) {
|
|
|
5505
5656
|
});
|
|
5506
5657
|
const teardownInFlightRef = useRef17(false);
|
|
5507
5658
|
teardownInFlightRef.current = isPaused || isPausing || isDisconnecting;
|
|
5508
|
-
const handleRoomDisconnected =
|
|
5659
|
+
const handleRoomDisconnected = useCallback15(() => {
|
|
5509
5660
|
if (teardownInFlightRef.current)
|
|
5510
5661
|
return;
|
|
5511
5662
|
disconnect();
|
|
5512
5663
|
}, [disconnect]);
|
|
5513
5664
|
const isSessionLive = connection !== null || isStarting || isPausing || isDisconnecting;
|
|
5514
|
-
const [isPanelOpen, setIsPanelOpen] =
|
|
5515
|
-
const [isMinimized, setIsMinimized] =
|
|
5516
|
-
const [sidebarTab, setSidebarTab] =
|
|
5517
|
-
const [phasesSnapshot, setPhasesSnapshot] =
|
|
5518
|
-
const [textMode, setTextMode] =
|
|
5519
|
-
const [panelExpanded, setPanelExpanded] =
|
|
5520
|
-
const togglePanelExpanded =
|
|
5665
|
+
const [isPanelOpen, setIsPanelOpen] = useState18(defaultOpen);
|
|
5666
|
+
const [isMinimized, setIsMinimized] = useState18(minimizable && !defaultOpen);
|
|
5667
|
+
const [sidebarTab, setSidebarTab] = useState18("agenda");
|
|
5668
|
+
const [phasesSnapshot, setPhasesSnapshot] = useState18([]);
|
|
5669
|
+
const [textMode, setTextMode] = useState18(false);
|
|
5670
|
+
const [panelExpanded, setPanelExpanded] = useState18(false);
|
|
5671
|
+
const togglePanelExpanded = useCallback15(() => setPanelExpanded((prev) => !prev), []);
|
|
5521
5672
|
const panelRef = useRef17(null);
|
|
5522
5673
|
const controlBarRef = useRef17(null);
|
|
5523
|
-
const setTextModeState =
|
|
5674
|
+
const setTextModeState = useCallback15((enabled) => {
|
|
5524
5675
|
setTextMode(enabled);
|
|
5525
5676
|
setPanelExpanded(enabled);
|
|
5526
5677
|
}, []);
|
|
5527
5678
|
const isConnected = connection !== null;
|
|
5528
5679
|
const showControlBar = isConnected || isStarting || isPausing;
|
|
5529
|
-
|
|
5680
|
+
useEffect24(() => {
|
|
5530
5681
|
if (!isConnected)
|
|
5531
5682
|
setTextModeState(false);
|
|
5532
5683
|
}, [isConnected, setTextModeState]);
|
|
@@ -5546,17 +5697,14 @@ function LiveAgent(props) {
|
|
|
5546
5697
|
bearerToken,
|
|
5547
5698
|
authedFetch
|
|
5548
5699
|
});
|
|
5549
|
-
const
|
|
5550
|
-
|
|
5551
|
-
|
|
5552
|
-
|
|
5553
|
-
|
|
5554
|
-
|
|
5555
|
-
|
|
5556
|
-
const
|
|
5557
|
-
const shouldAnimateCursor = activeModuleForAgent?.uiPreferences?.animateCursor ?? animateAgentCursor;
|
|
5558
|
-
const resumableSession = useMemo6(() => getResumableSession(activeModuleForAgent), [activeModuleForAgent]);
|
|
5559
|
-
const resumeSession = useCallback14(async () => {
|
|
5700
|
+
const displayModules = useMemo6(() => hostAgentId ? availableModules.filter((m) => m.id === hostAgentId) : availableModules, [hostAgentId, availableModules]);
|
|
5701
|
+
const operatingModule = activeModule ?? (hostAgentId ? displayModules[0] ?? null : null);
|
|
5702
|
+
const agentId = operatingModule?.id ?? null;
|
|
5703
|
+
const agentControls = operatingModule?.controls ?? hostAgentControls;
|
|
5704
|
+
const agentMode = operatingModule?.mode ?? null;
|
|
5705
|
+
const shouldAnimateCursor = operatingModule?.uiPreferences?.animateCursor ?? animateAgentCursor;
|
|
5706
|
+
const resumableSession = useMemo6(() => getResumableSession(operatingModule), [operatingModule]);
|
|
5707
|
+
const resumeSession = useCallback15(async () => {
|
|
5560
5708
|
if (!resumableSession)
|
|
5561
5709
|
return;
|
|
5562
5710
|
await startSession({
|
|
@@ -5565,7 +5713,7 @@ function LiveAgent(props) {
|
|
|
5565
5713
|
existingSessionId: resumableSession.id
|
|
5566
5714
|
});
|
|
5567
5715
|
}, [resumableSession, startSession, agentControls]);
|
|
5568
|
-
const selectModule =
|
|
5716
|
+
const selectModule = useCallback15((moduleId) => {
|
|
5569
5717
|
const found = availableModules.find((m) => m.id === moduleId);
|
|
5570
5718
|
if (!found)
|
|
5571
5719
|
return;
|
|
@@ -5576,7 +5724,7 @@ function LiveAgent(props) {
|
|
|
5576
5724
|
existingSessionId: getResumableSessionId(found.currentSession, found.mode)
|
|
5577
5725
|
});
|
|
5578
5726
|
}, [availableModules, startSession]);
|
|
5579
|
-
const startAdoptionSession =
|
|
5727
|
+
const startAdoptionSession = useCallback15((goal) => {
|
|
5580
5728
|
attendGoal(goal.goalId);
|
|
5581
5729
|
const found = availableModules.find((m) => m.id === goal.agentId);
|
|
5582
5730
|
if (found)
|
|
@@ -5587,9 +5735,9 @@ function LiveAgent(props) {
|
|
|
5587
5735
|
adoptionGoalId: goal.goalId
|
|
5588
5736
|
});
|
|
5589
5737
|
}, [attendGoal, availableModules, startSession]);
|
|
5590
|
-
const [welcomeDismissed, setWelcomeDismissed] =
|
|
5591
|
-
const dismissWelcome =
|
|
5592
|
-
const [currentPosition, setCurrentPosition] =
|
|
5738
|
+
const [welcomeDismissed, setWelcomeDismissed] = useState18(false);
|
|
5739
|
+
const dismissWelcome = useCallback15(() => setWelcomeDismissed(true), []);
|
|
5740
|
+
const [currentPosition, setCurrentPosition] = useState18(() => {
|
|
5593
5741
|
try {
|
|
5594
5742
|
const saved = localStorage.getItem("skippr_widget_position");
|
|
5595
5743
|
if (saved === "left" || saved === "right")
|
|
@@ -5597,13 +5745,13 @@ function LiveAgent(props) {
|
|
|
5597
5745
|
} catch {}
|
|
5598
5746
|
return position;
|
|
5599
5747
|
});
|
|
5600
|
-
const setPositionWithPersist =
|
|
5748
|
+
const setPositionWithPersist = useCallback15((pos) => {
|
|
5601
5749
|
setCurrentPosition(pos);
|
|
5602
5750
|
try {
|
|
5603
5751
|
localStorage.setItem("skippr_widget_position", pos);
|
|
5604
5752
|
} catch {}
|
|
5605
5753
|
}, []);
|
|
5606
|
-
const [launcherBottomPx, setLauncherBottomPxState] =
|
|
5754
|
+
const [launcherBottomPx, setLauncherBottomPxState] = useState18(() => {
|
|
5607
5755
|
try {
|
|
5608
5756
|
const saved = Number.parseInt(localStorage.getItem("skippr_widget_bottom") ?? "", 10);
|
|
5609
5757
|
if (Number.isFinite(saved) && saved > 0)
|
|
@@ -5611,8 +5759,8 @@ function LiveAgent(props) {
|
|
|
5611
5759
|
} catch {}
|
|
5612
5760
|
return DEFAULT_LAUNCHER_BOTTOM_PX;
|
|
5613
5761
|
});
|
|
5614
|
-
const [popsDown, setPopsDown] =
|
|
5615
|
-
const setLauncherBottomPx =
|
|
5762
|
+
const [popsDown, setPopsDown] = useState18(() => launcherPopsDown(launcherBottomPx));
|
|
5763
|
+
const setLauncherBottomPx = useCallback15((px) => {
|
|
5616
5764
|
setLauncherBottomPxState(px);
|
|
5617
5765
|
setPopsDown(launcherPopsDown(px));
|
|
5618
5766
|
try {
|
|
@@ -5621,11 +5769,11 @@ function LiveAgent(props) {
|
|
|
5621
5769
|
}, []);
|
|
5622
5770
|
const launcherBottomPxRef = useRef17(launcherBottomPx);
|
|
5623
5771
|
launcherBottomPxRef.current = launcherBottomPx;
|
|
5624
|
-
const commitLauncherDrop =
|
|
5772
|
+
const commitLauncherDrop = useCallback15(({ side, bottomPx }) => {
|
|
5625
5773
|
setPositionWithPersist(side);
|
|
5626
5774
|
setLauncherBottomPx(bottomPx);
|
|
5627
5775
|
}, [setPositionWithPersist, setLauncherBottomPx]);
|
|
5628
|
-
|
|
5776
|
+
useEffect24(() => {
|
|
5629
5777
|
const syncToViewport = () => {
|
|
5630
5778
|
const clamped = clampLauncherBottom(launcherBottomPxRef.current);
|
|
5631
5779
|
setLauncherBottomPxState(clamped);
|
|
@@ -5635,20 +5783,20 @@ function LiveAgent(props) {
|
|
|
5635
5783
|
window.addEventListener("resize", syncToViewport);
|
|
5636
5784
|
return () => window.removeEventListener("resize", syncToViewport);
|
|
5637
5785
|
}, []);
|
|
5638
|
-
const openPanel =
|
|
5639
|
-
const closePanel =
|
|
5640
|
-
const togglePanel =
|
|
5641
|
-
const expandPanel =
|
|
5786
|
+
const openPanel = useCallback15(() => setIsPanelOpen(true), []);
|
|
5787
|
+
const closePanel = useCallback15(() => setIsPanelOpen(false), []);
|
|
5788
|
+
const togglePanel = useCallback15(() => setIsPanelOpen((prev) => !prev), []);
|
|
5789
|
+
const expandPanel = useCallback15(() => {
|
|
5642
5790
|
setIsMinimized(false);
|
|
5643
5791
|
setIsPanelOpen(true);
|
|
5644
5792
|
}, []);
|
|
5645
|
-
const minimizePanel =
|
|
5793
|
+
const minimizePanel = useCallback15(() => {
|
|
5646
5794
|
if (!minimizable)
|
|
5647
5795
|
return;
|
|
5648
5796
|
setIsMinimized(true);
|
|
5649
5797
|
setIsPanelOpen(false);
|
|
5650
5798
|
}, [minimizable]);
|
|
5651
|
-
const pauseSessionAndMinimize =
|
|
5799
|
+
const pauseSessionAndMinimize = useCallback15(async () => {
|
|
5652
5800
|
await pauseSession();
|
|
5653
5801
|
minimizePanel();
|
|
5654
5802
|
}, [pauseSession, minimizePanel]);
|
|
@@ -5667,6 +5815,7 @@ function LiveAgent(props) {
|
|
|
5667
5815
|
resumeSession,
|
|
5668
5816
|
disconnect,
|
|
5669
5817
|
isPaused,
|
|
5818
|
+
pauseTimeoutSeconds,
|
|
5670
5819
|
resumableSession,
|
|
5671
5820
|
historyMessages,
|
|
5672
5821
|
phasesSnapshot,
|
|
@@ -5708,8 +5857,7 @@ function LiveAgent(props) {
|
|
|
5708
5857
|
agentId,
|
|
5709
5858
|
agentMode,
|
|
5710
5859
|
agentControls,
|
|
5711
|
-
|
|
5712
|
-
availableModules,
|
|
5860
|
+
displayModules,
|
|
5713
5861
|
activeModule,
|
|
5714
5862
|
isLoadingModules,
|
|
5715
5863
|
modulesError,
|
|
@@ -5732,6 +5880,7 @@ function LiveAgent(props) {
|
|
|
5732
5880
|
resumeSession,
|
|
5733
5881
|
disconnect,
|
|
5734
5882
|
isPaused,
|
|
5883
|
+
pauseTimeoutSeconds,
|
|
5735
5884
|
resumableSession,
|
|
5736
5885
|
historyMessages,
|
|
5737
5886
|
phasesSnapshot,
|
|
@@ -5769,8 +5918,7 @@ function LiveAgent(props) {
|
|
|
5769
5918
|
agentId,
|
|
5770
5919
|
agentMode,
|
|
5771
5920
|
agentControls,
|
|
5772
|
-
|
|
5773
|
-
availableModules,
|
|
5921
|
+
displayModules,
|
|
5774
5922
|
activeModule,
|
|
5775
5923
|
isLoadingModules,
|
|
5776
5924
|
modulesError,
|
|
@@ -5782,7 +5930,7 @@ function LiveAgent(props) {
|
|
|
5782
5930
|
]);
|
|
5783
5931
|
return /* @__PURE__ */ jsx22(LiveAgentContext.Provider, {
|
|
5784
5932
|
value: ctx,
|
|
5785
|
-
children: /* @__PURE__ */
|
|
5933
|
+
children: /* @__PURE__ */ jsxs19(LiveKitRoom, {
|
|
5786
5934
|
serverUrl: connection?.livekitUrl,
|
|
5787
5935
|
token: connection?.token,
|
|
5788
5936
|
connect: shouldConnect,
|
|
@@ -5794,7 +5942,7 @@ function LiveAgent(props) {
|
|
|
5794
5942
|
pendingScreenStream
|
|
5795
5943
|
}),
|
|
5796
5944
|
connection && captureMode === "auto" && /* @__PURE__ */ jsx22(DomCapture, {}),
|
|
5797
|
-
/* @__PURE__ */
|
|
5945
|
+
/* @__PURE__ */ jsxs19(ShadowHost, {
|
|
5798
5946
|
children: [
|
|
5799
5947
|
connection && captureMode === "auto" && agentControls?.highlight && /* @__PURE__ */ jsx22(HighlightOverlay, {}),
|
|
5800
5948
|
connection && captureMode === "auto" && agentControls?.actions && /* @__PURE__ */ jsx22(PageActionHandler, {}),
|
|
@@ -5802,7 +5950,7 @@ function LiveAgent(props) {
|
|
|
5802
5950
|
connection && captureMode === "auto" && (agentControls?.highlight || agentControls?.actions) && /* @__PURE__ */ jsx22(AgentCursorMount, {
|
|
5803
5951
|
animated: shouldAnimateCursor
|
|
5804
5952
|
}),
|
|
5805
|
-
/* @__PURE__ */
|
|
5953
|
+
/* @__PURE__ */ jsxs19("div", {
|
|
5806
5954
|
id: WIDGET_ROOT_ID,
|
|
5807
5955
|
children: [
|
|
5808
5956
|
isMinimized && !showControlBar && /* @__PURE__ */ jsx22(MinimizedBubble, {
|
|
@@ -5827,9 +5975,9 @@ function LiveAgent(props) {
|
|
|
5827
5975
|
});
|
|
5828
5976
|
}
|
|
5829
5977
|
// src/hooks/useIsLocalSpeaking.ts
|
|
5830
|
-
import { useIsSpeaking, useLocalParticipant as
|
|
5978
|
+
import { useIsSpeaking, useLocalParticipant as useLocalParticipant10 } from "@livekit/components-react/hooks";
|
|
5831
5979
|
function useIsLocalSpeaking() {
|
|
5832
|
-
const { localParticipant } =
|
|
5980
|
+
const { localParticipant } = useLocalParticipant10();
|
|
5833
5981
|
return useIsSpeaking(localParticipant);
|
|
5834
5982
|
}
|
|
5835
5983
|
export {
|